/* ==========================================================================
   AROZEN CARE — HOME PAGE STYLES
   Section map: 1. Tokens  2. Reset  3. Layout utils  4. Buttons
                5. Header/Nav  6. Dropdown  7. Mobile nav  8. Hero
                9. Care selector  10. Trust indicators  11. Animations
                12. Responsive  13. Care Paths (Home Section 2)
                14. Personalised Care (Home Section 3)
                15. Day of Care (Home Section 4)
                16. Care Beyond the Patient (Home Section 6)
                17. Special Care Benefits (Home Section 7)
                18. Laboratory & Diagnostics (Home Section 8)
                19. Proof Wall / Why Families Choose Arozen (Home Section 9)
                20. Real Care. Real Stories. (Home Section 10)
                21. Gurugram Care Network (Home Section 11)
                22. Final CTA (Home)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (Theme B)
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #263B8F;
  --color-primary-dark: #1b2c6e;
  --color-secondary: #5BC7B0;
  --color-secondary-dark: #46a794;
  --color-accent: #F3A58C;
  --color-bg: #F7FAF8;
  --color-text: #171B2D;
  --color-text-muted: #5b6178;
  --color-white: #ffffff;
  --color-border: #e4e8f0;

  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 10px rgba(23, 27, 45, 0.06);
  --shadow-md: 0 10px 30px rgba(38, 59, 143, 0.14);
  --shadow-lg: 0 24px 60px rgba(38, 59, 143, 0.18);

  --container-width: 1240px;
  --header-height: 78px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1 {
  font-family: var(--font-heading);
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link (visible on keyboard focus only) */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   3. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.text-gradient {
  background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-secondary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 0.9rem 1.9rem;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   5. SITE HEADER / NAVBAR
   -------------------------------------------------------------------------- */
/* The blurred background lives on ::before (not on .site-header itself)
   because `backdrop-filter`/`filter` on an ancestor creates a new
   containing block for `position: fixed` descendants — that was silently
   trapping the mobile nav panel inside the 78px header box instead of the
   viewport, which is why the menu failed to open reliably. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 250, 248, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.site-header.is-scrolled::before {
  background: rgba(247, 250, 248, 0.97);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-height);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Logo image is scaled to the header height (not a fixed 150px) so the
   sticky header never clips on any screen size */
.logo-img {
  width: auto;
  height: 46px;
  max-height: 68%;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.logo-accent {
  color: var(--color-secondary-dark);
}

/* Primary nav (desktop) */
.primary-nav {
  display: flex;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--color-text);
  padding: 0.4rem 0.1rem;
  position: relative;
  background: none;
  border: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width 0.25s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--color-primary);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
  width: 100%;
}

.nav-item--cta-mobile {
  display: none;
}

/* --------------------------------------------------------------------------
   6. SERVICES DROPDOWN
   -------------------------------------------------------------------------- */
.nav-item--dropdown {
  position: relative;
}

.dropdown-toggle .chevron {
  transition: transform 0.25s var(--ease);
}

.nav-item--dropdown.is-open .dropdown-toggle .chevron {
  transform: rotate(180deg);
}

/* Mobile-first accordion (the ONLY rule set previously; the desktop
   floating-panel version lived here unconditionally and mobile had to
   fight it with overrides. That's what caused the left-overflow bug: a
   more specific base rule — .nav-item--dropdown.is-open .dropdown-menu
   (3 classes) — set `transform: translate(-50%, 0)`, which beat the
   mobile override's `transform: none` (2 classes) the moment the menu
   opened. At width:100%, a -50% translate shoves the whole panel off
   the left edge. Making the accordion the unconditional default removes
   the conflicting rule entirely instead of patching around it.) */
.dropdown-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  width: 100%;
  max-width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 0.6rem;
  max-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: max-height 0.3s var(--ease), padding 0.3s var(--ease), margin 0.3s var(--ease);
}

.nav-item--dropdown.is-open .dropdown-menu {
  max-height: min(60vh, 560px);
  padding: 0.6rem;
  margin-block: 0.3rem 0.4rem;
}

.dropdown-menu li a {
  display: block;
  padding: 0.8rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--color-text);
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), padding-left 0.2s var(--ease);
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
  background: var(--color-white);
  color: var(--color-primary);
  padding-left: 1.1rem;
}

.dropdown-viewall {
  border-top: 1px solid var(--color-border);
  margin-top: 0.3rem;
  padding-top: 0.3rem;
}

.dropdown-viewall a {
  color: var(--color-secondary-dark);
  font-weight: 600;
}

/* Desktop only (900px+): the floating 2-column panel. Everything here —
   absolute positioning, the centered transform, the 2-column grid — is
   scoped to this query, so it can never leak into (or conflict with) the
   mobile accordion above. Values match the previous desktop appearance
   exactly; only the source organization changed. */
@media (min-width: 900px) {
  .dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 8px);
    width: auto;
    max-width: none;
    min-width: 560px;
    background: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.6rem;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
    gap: 0.15rem 0.5rem;
    max-height: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
    z-index: 60;
  }

  .nav-item--dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    padding: 0.6rem;
    margin: 0;
  }

  .dropdown-menu li a {
    padding: 0.62rem 0.85rem;
  }

  .dropdown-menu li a:hover,
  .dropdown-menu li a:focus-visible {
    background: var(--color-bg);
  }
}

/* --------------------------------------------------------------------------
   7. MOBILE NAV TOGGLE
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.4rem;
}

.nav-toggle-bar {
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header-cta {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. HERO SECTION
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 3rem 4rem;
}

/* Subtle creative grid/line pattern, Theme B colors at very low opacity,
   faded out toward the edges so it reads as texture, not noise */
.hero-grid-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(38, 59, 143, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 59, 143, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 70% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 65% at 70% 30%, #000 0%, transparent 75%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hero-content {
  animation: fadeUpIn 0.8s var(--ease) both;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  background: rgba(91, 199, 176, 0.12);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  margin: 0 0 1.1rem;
}

.hero-heading {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: 1.1rem;
}

.hero-subtext {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}

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

/* Hero image: open, integrated visual — no card/box wrapper (no shadow,
   no background frame, no border). Mobile: a plain full-width photo
   sitting naturally below the content. Desktop: bleeds to the section's
   right + bottom edges (see 1024px breakpoint below). */
.hero-media {
  position: relative;
  animation: fadeIn 1s var(--ease) 0.15s both;
}

.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Fallback shown if the placeholder image fails to load */
.hero-image.hero-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-align: center;
  padding: 2rem;
}

/* Floating badges: kept inside the image bounds at every breakpoint (no
   negative offsets) so `.hero` overflow:hidden never clips them — the
   image itself now bleeds to the true edges on desktop, so there's no
   longer any room outside it for a badge to float into.
   FIX: explicit z-index (the image is a static, non-positioned element,
   so it paints below positioned content by default, but that ordering
   was implicit/undeclared) guarantees the badges always render above
   the image layer rather than depending on default paint order, which
   is what let them appear to merge into the image on some renders. */
.hero-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: min(78%, 220px);
  background: var(--color-white);
  border-radius: var(--radius-full);
  padding: 0.5rem 0.85rem;
  box-shadow: var(--shadow-md);
  font-size: clamp(0.72rem, 2.3vw, 0.85rem);
  font-weight: 600;
  line-height: 1.2;
  animation: floatBadge 4.5s ease-in-out infinite;
}

.hero-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 0.72rem;
  flex-shrink: 0;
}

.hero-badge--top {
  top: 6%;
  left: 6%;
  animation-delay: 0.2s;
}

.hero-badge--bottom {
  bottom: 7%;
  right: 6%;
  animation-delay: 1s;
}

@media (min-width: 600px) {
  .hero-badge {
    max-width: none;
    padding: 0.65rem 1.05rem;
  }
}

/* --------------------------------------------------------------------------
   9. CARE SELECTOR ("What care do you need?")
   -------------------------------------------------------------------------- */
.care-selector {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2.2rem;
  max-width: 520px;
}

.care-selector-label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.65rem;
  color: var(--color-primary);
}

.care-selector-controls {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.care-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.95rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23263B8F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.care-select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(38, 59, 143, 0.15);
}

.care-select-btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   10. TRUST INDICATORS
   -------------------------------------------------------------------------- */
.hero-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem 1rem;
  margin: 0;
}

.trust-item {
  border-left: 3px solid var(--color-secondary);
  padding-left: 0.75rem;
}

.trust-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-primary);
}

.trust-label {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   11. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* --------------------------------------------------------------------------
   12. RESPONSIVE — MOBILE NAV PANEL (below 900px)
   -------------------------------------------------------------------------- */
/* Body scroll lock while the mobile menu is open (class toggled in home.js) */
body.nav-open {
  overflow: hidden;
}

@media (max-width: 899px) {
  /* Full-viewport-width panel; overflow-x:hidden is a belt-and-braces
     guard so nothing inside (long link text, the accordion, etc.) can
     ever force horizontal scroll. */
  .primary-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 400;
    background: var(--color-white);
    padding: 1.5rem 1.25rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .primary-nav.is-open {
    transform: translateX(0);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .nav-link {
    padding: 0.85rem 0.2rem;
    width: 100%;
  }

  .nav-link::after {
    display: none;
  }

  .nav-item--cta-mobile {
    display: block;
    margin-top: 1rem;
  }

  .nav-item--cta-mobile .btn {
    width: 100%;
  }

  .header-cta {
    display: none;
  }
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  /* Slightly larger logo once there's room in the desktop header */
  .logo-img {
    height: 52px;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — HERO & GENERAL BREAKPOINTS
   -------------------------------------------------------------------------- */

/* FIX: small-phone hero polish (targets Samsung Galaxy S8+, 360×740, and
   phones generally below the 600px tablet breakpoint). A max-width query
   is used here — instead of folding these into the shared base rules —
   specifically so tablet (600px+) and desktop (1024px+) never inherit
   these overrides and stay pixel-for-pixel unchanged; every property
   touched below already has its own tablet/desktop behavior defined
   elsewhere (base rules or the min-width blocks) and is left alone. */
@media (max-width: 599px) {
  /* Center the eyebrow, heading and description as a group — text-align
     centers each inline/line box without needing per-element overrides */
  .hero-content {
    text-align: center;
  }

  /* Balances the wrapped heading lines (e.g. avoids a short, lonely last
     line) instead of the browser's default greedy line-break; falls back
     to normal wrapping in browsers that don't support it, and never
     breaks a word mid-way either way. Margin trimmed for a compact
     vertical rhythm on a 740px-tall viewport. */
  .hero-heading {
    text-wrap: balance;
    margin-bottom: 0.85rem;
  }

  /* Stack + center the two CTAs instead of the default left-aligned row
     (row layout returns at 600px below), with trimmed spacing below to
     match the compact mobile rhythm */
  .hero-actions {
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  /* FIX: explicit width + height (rather than sizing to each button's own
     text, which made "Explore Services" wider than "Book a Visit") makes
     both CTAs EXACTLY the same size. 200px comfortably fits the longer
     label without wrapping (white-space:nowrap on .btn) while staying
     well short of the viewport — never full-width. align-items:center on
     the column above keeps both centered, and the existing gap on
     .hero-actions keeps a small consistent gap between them. */
  .hero-actions .btn {
    width: 200px;
    height: 44px;
    padding: 0 1.4rem;
    font-size: 0.88rem;
  }

  /* FIX: "Certified & Verified Nurses" moves out of the floating overlay
     and into normal flow above the image, instead of hovering over its
     top-left corner. .hero-media becomes a column flex container and the
     badge is pulled to the front of that flow via `order` (it comes
     after the <img> in the DOM, so order is what actually moves it
     above rather than below). flex-start keeps the badge sized to its
     own content instead of stretching to the image's full width. The
     rating badge is untouched and keeps floating over the image. */
  .hero-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .hero-badge--top {
    position: static;
    order: -1;
  }

  /* Keep the care-selector card centered with even side margins, and
     trim its bottom margin to match the compact mobile rhythm */
  .care-selector {
    margin-inline: auto;
    margin-bottom: 1.75rem;
  }

  /* Compact (not crowded) vertical rhythm for a 740px-tall viewport —
     trims section/element spacing without removing it outright */
  .hero {
    padding-block: 2rem 2.5rem;
  }

  .hero-inner {
    gap: 1.75rem;
  }

  .hero-eyebrow {
    margin-bottom: 0.85rem;
  }

  .hero-subtext {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 600px) {
  .hero-actions {
    flex-wrap: nowrap;
  }

  .care-selector-controls {
    flex-direction: row;
  }

  .care-select {
    flex: 1;
  }

  .care-select-btn {
    width: auto;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 4.5rem 6rem;
  }

  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.5rem;
  }

  /* Open, edge-bleeding hero image: fills its grid column, then extends
     past the container's own right padding (a fixed rem value, so this can
     never exceed the viewport — no horizontal-overflow risk) and past the
     section's own bottom padding, so the photo reads as part of the
     section itself rather than a boxed card sitting inside it. */
  .hero-media {
    order: 2;
    align-self: stretch;
    margin-right: -1.25rem;
    margin-bottom: -6rem;
    min-height: 560px;
  }

  .hero-content {
    order: 1;
  }

  .hero-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 560px;
    /* Flush to the right + bottom (the bleed edges); only the top-left
       corner is softened, where the photo meets the text column */
    border-radius: var(--radius-lg) 0 0 0;
  }

  .hero-trust {
    grid-template-columns: repeat(4, auto);
    gap: 1.5rem 2rem;
  }
}

/* ============================================================================
   13. CARE PATHS SECTION (Home Section 2)
   An organic hub-and-spoke composition — not a card grid. Mobile-first:
   the center element and 6 nodes stack in a single vertical column strung
   along one connecting line (a touch-friendly "path"). Desktop (900px+):
   the same nodes reposition around a central hub via grid-column/row-free
   absolute placement, joined to it by thin SVG lines that draw in on
   scroll. Section alternates to a soft Theme-B mint background, per the
   new "alternate section backgrounds" convention.
   ============================================================================ */
.care-paths {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  /* Soft Theme-B mint tint (secondary color at low opacity over the page bg) */
  background: rgba(91, 199, 176, 0.07);
}

/* Flowing background lines — decorative, Theme-B, very low opacity */
.care-paths-flow-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.35;
}

.care-paths-header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.care-paths-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin-bottom: 0.6rem;
}

.care-paths-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.care-paths-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* --- Hub container ---------------------------------------------------- */
.care-paths-orbit {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mobile connecting line: a single vertical line running behind the
   center element and every node, from the first to the last */
.care-paths-orbit::before {
  content: '';
  position: absolute;
  top: 46px;
  bottom: 40px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--color-secondary), var(--color-primary));
  opacity: 0.3;
  z-index: 0;
}

/* Connector SVG lines only apply in the desktop hub layout */
.care-paths-lines {
  display: none;
}

/* --- Center focal element ---------------------------------------------- */
.care-paths-center {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Organic blob shape, not a perfect circle */
  border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.care-paths-orbit.is-visible .care-paths-center {
  opacity: 1;
  transform: scale(1);
}

.care-paths-center-label {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
}

/* Soft "breathing" pulse ring around the center — a lightweight,
   continuous micro-interaction (paused for prefers-reduced-motion via
   the global RESET rule) */
.care-paths-center-pulse {
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 1.5px solid var(--color-secondary);
  opacity: 0;
  animation: pathPulse 3.2s var(--ease) infinite;
}

@keyframes pathPulse {
  0% { transform: scale(0.9); opacity: 0.55; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* --- Nodes --------------------------------------------------------------
   Mobile: full-width, stacked, content centered, always-visible
   description (no hover on touch). Whole node is a link. */
.care-node {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.9rem 1rem 1.3rem;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.care-paths-orbit.is-visible .care-node {
  opacity: 1;
  transform: translateY(0);
}

.care-node:nth-child(3) { transition-delay: 0.08s; }
.care-node:nth-child(4) { transition-delay: 0.16s; }
.care-node:nth-child(5) { transition-delay: 0.24s; }
.care-node:nth-child(6) { transition-delay: 0.32s; }
.care-node:nth-child(7) { transition-delay: 0.4s; }
.care-node:nth-child(8) { transition-delay: 0.48s; }

.care-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.care-node-icon svg {
  width: 24px;
  height: 24px;
}

/* Cycle icon accent color across the 6 nodes for premium variety */
.care-node--2 .care-node-icon,
.care-node--5 .care-node-icon {
  color: var(--color-secondary-dark);
}

.care-node--3 .care-node-icon,
.care-node--6 .care-node-icon {
  color: var(--color-accent);
}

.care-node:hover .care-node-icon,
.care-node:focus-visible .care-node-icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.12) rotate(-6deg);
}

.care-node-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
}

.care-node-desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  max-width: 26ch;
}

.care-node:hover,
.care-node:focus-visible {
  outline: none;
}

.care-node:hover .care-node-label,
.care-node:focus-visible .care-node-label {
  color: var(--color-primary);
}

@media (min-width: 900px) {
  /* --- Desktop: radial hub layout -------------------------------------- */
  .care-paths {
    padding-block: 5rem;
  }

  .care-paths-orbit {
    display: block;
    position: relative;
    min-height: 640px;
    max-width: 900px;
    margin-inline: auto;
  }

  .care-paths-orbit::before {
    display: none;
  }

  .care-paths-lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  /* Lines stay hidden until drawn in on scroll via stroke-dashoffset,
     normalized to 0–1 by the `pathLength="1"` attribute on each <line> */
  .care-path-line {
    stroke: var(--color-secondary);
    stroke-width: 0.35;
    stroke-linecap: round;
    fill: none;
    opacity: 0.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s var(--ease);
  }

  .care-paths-orbit.is-visible .care-path-line {
    stroke-dashoffset: 0;
  }

  .care-paths-orbit.is-visible .care-path-line:nth-child(1) { transition-delay: 0.15s; }
  .care-paths-orbit.is-visible .care-path-line:nth-child(2) { transition-delay: 0.22s; }
  .care-paths-orbit.is-visible .care-path-line:nth-child(3) { transition-delay: 0.29s; }
  .care-paths-orbit.is-visible .care-path-line:nth-child(4) { transition-delay: 0.36s; }
  .care-paths-orbit.is-visible .care-path-line:nth-child(5) { transition-delay: 0.43s; }
  .care-paths-orbit.is-visible .care-path-line:nth-child(6) { transition-delay: 0.5s; }

  .care-paths-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  .care-paths-orbit.is-visible .care-paths-center {
    transform: translate(-50%, -50%) scale(1);
  }

  .care-paths-center-label {
    font-size: 1rem;
  }

  /* Each node is placed asymmetrically by percentage — matching the
     coordinates of its connector <line> exactly, since the SVG uses a
     0–100 viewBox with preserveAspectRatio="none" */
  .care-node {
    position: absolute;
    z-index: 3;
    width: auto;
    max-width: 132px;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-md);
    background: transparent;
    transform: translate(-50%, -50%);
    transition: opacity 0.55s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }

  .care-paths-orbit.is-visible .care-node {
    opacity: 1;
  }

  .care-node:hover,
  .care-node:focus-visible {
    transform: translate(-50%, -50%) scale(1.14);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    z-index: 5;
  }

  .care-node--1 { left: 14%; top: 10%; }
  .care-node--2 { left: 50%; top: 4%; }
  .care-node--3 { left: 87%; top: 16%; }
  .care-node--4 { left: 90%; top: 64%; }
  .care-node--5 { left: 50%; top: 92%; }
  .care-node--6 { left: 11%; top: 68%; }

  /* Description is a floating tooltip on desktop — hidden until hover/
     focus, opening below top-half nodes and above bottom-half nodes so
     it always stays inside the orbit container */
  .care-node-desc {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(4px);
    width: 168px;
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-width: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }

  .care-node--4 .care-node-desc,
  .care-node--5 .care-node-desc,
  .care-node--6 .care-node-desc {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  .care-node:hover .care-node-desc,
  .care-node:focus-visible .care-node-desc {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================================================
   14. PERSONALISED CARE SECTION (Home Section 3)
   Editorial split layout — not a card/grid. Mobile-first: image stacked
   above an eyebrow/heading/copy block and a minimal numbered 3-step story
   (no boxes, just typography + a thin connecting line). Desktop (900px+):
   two-column split, image opposite the story. Steps activate sequentially
   as each scrolls through the viewport center (home.js), which also drives
   a matching pulse marker + a subtle transform shift on the image.
   ============================================================================ */
.personal-care {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  /* Very light blue/lavender wash — Theme-B primary at low opacity,
     deliberately distinct from Section 2's mint tint */
  background: rgba(38, 59, 143, 0.055);
}

/* Minimal decorative line pattern — a couple of thin diagonals, barely there */
.personal-care-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.08;
}

.personal-care-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* --- Image side: large and open, no card/box styling -------------------- */
.personal-care-media {
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.personal-care-inner.is-visible .personal-care-media {
  opacity: 1;
  transform: translateY(0);
}

.personal-care-image-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.personal-care-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* The subtle "image movement" tied to the active step, via the
     data-active-step attribute set in home.js */
  transition: transform 0.7s var(--ease);
}

.personal-care-media[data-active-step="2"] .personal-care-image {
  transform: scale(1.02) translateY(-4px);
}

.personal-care-media[data-active-step="3"] .personal-care-image {
  transform: scale(1.015) translateY(2px);
}

/* Fallback shown if the placeholder image fails to load */
.personal-care-image.personal-care-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-align: center;
  padding: 2rem;
}

/* Small markers over the image, echoing the 3 steps opposite; the one
   matching the active step gets a pulsing ring */
.personal-care-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(38, 59, 143, 0.18);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.personal-care-marker::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  opacity: 0;
}

.personal-care-marker--1 { left: 12%; top: 18%; }
.personal-care-marker--2 { left: 82%; top: 46%; }
.personal-care-marker--3 { left: 20%; top: 80%; }

.personal-care-media[data-active-step="1"] .personal-care-marker--1,
.personal-care-media[data-active-step="2"] .personal-care-marker--2,
.personal-care-media[data-active-step="3"] .personal-care-marker--3 {
  opacity: 1;
  transform: scale(1.3);
}

.personal-care-media[data-active-step="1"] .personal-care-marker--1::before,
.personal-care-media[data-active-step="2"] .personal-care-marker--2::before,
.personal-care-media[data-active-step="3"] .personal-care-marker--3::before {
  animation: markerOrbit 1.8s var(--ease) infinite;
}

@keyframes markerOrbit {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* --- Text side: eyebrow, heading, copy ----------------------------------- */
.personal-care-content {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease) 0.1s, transform 0.7s var(--ease) 0.1s;
}

.personal-care-inner.is-visible .personal-care-content {
  opacity: 1;
  transform: translateY(0);
}

.personal-care-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

.personal-care-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 0.85rem;
}

.personal-care-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-bottom: 2rem;
}

/* --- 3-step care story: minimal numbered list, not cards ----------------- */
.care-story {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Thin connecting line running behind the numbered markers */
.care-story::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 22px;
  width: 1.5px;
  background: var(--color-border);
  z-index: 0;
}

.care-story-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 0.9rem;
}

.care-story-marker {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.care-story-number {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  transition: color 0.4s var(--ease);
}

.care-story-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  opacity: 0;
}

.care-story-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.35rem;
}

.care-story-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
  transition: color 0.4s var(--ease);
}

.care-story-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  opacity: 0.6;
  max-width: 40ch;
  transition: opacity 0.4s var(--ease);
}

/* Active / completed step states (toggled in home.js as each step
   crosses the viewport center while scrolling) */
.care-story-step.is-active .care-story-marker,
.care-story-step.is-done .care-story-marker {
  background: var(--color-primary);
  border-color: transparent;
}

.care-story-step.is-active .care-story-number,
.care-story-step.is-done .care-story-number {
  color: var(--color-white);
}

.care-story-step.is-active .care-story-title {
  color: var(--color-primary);
}

.care-story-step.is-active .care-story-desc,
.care-story-step.is-done .care-story-desc {
  opacity: 1;
}

.care-story-step.is-active .care-story-marker {
  transform: scale(1.08);
}

.care-story-step.is-active .care-story-pulse {
  animation: markerOrbit 1.8s var(--ease) infinite;
}

/* Circles are individually interactive, independent of the scroll-driven
   .is-active/.is-done states above. Hovering (desktop) or focusing/tapping
   (keyboard + touch, via the `.is-hover-active` class toggled in home.js)
   a single circle highlights just that circle + its text, using the same
   0.4s transitions already defined above — no new animation added. The
   sibling combinator keeps the trigger scoped to the circle itself, not
   the whole row, per spec ("hovering each circle"). */
.care-story-marker {
  cursor: pointer;
}

.care-story-marker:hover,
.care-story-marker:focus-visible,
.care-story-marker.is-hover-active {
  background: var(--color-primary);
  border-color: transparent;
  transform: scale(1.08);
}

.care-story-marker:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 59, 143, 0.25);
}

.care-story-marker:hover .care-story-number,
.care-story-marker:focus-visible .care-story-number,
.care-story-marker.is-hover-active .care-story-number {
  color: var(--color-white);
}

.care-story-marker:hover ~ .care-story-body .care-story-title,
.care-story-marker:focus-visible ~ .care-story-body .care-story-title,
.care-story-marker.is-hover-active ~ .care-story-body .care-story-title {
  color: var(--color-primary);
}

.care-story-marker:hover ~ .care-story-body .care-story-desc,
.care-story-marker:focus-visible ~ .care-story-body .care-story-desc,
.care-story-marker.is-hover-active ~ .care-story-body .care-story-desc {
  opacity: 1;
}

@media (min-width: 900px) {
  .personal-care {
    padding-block: 5rem;
  }

  .personal-care-inner {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }

  .personal-care-media,
  .personal-care-content {
    flex: 1 1 0;
    min-width: 0;
  }

  .personal-care-image-frame {
    aspect-ratio: auto;
  }

  .personal-care-image {
    aspect-ratio: 4 / 4.6;
  }

  .personal-care-subtext {
    font-size: 1.05rem;
  }

  .care-story-step {
    padding-block: 1.15rem;
  }
}

/* ============================================================================
   15. DAY OF CARE SECTION (Home Section 4)
   One continuous scroll-driven timeline — not cards/grid. Mobile-first: a
   compact floating visual above a full-width vertical timeline (5 stages
   strung along a single line that fills in as each stage activates).
   Desktop (900px+): the visual moves beside the timeline instead of above
   it; the mechanism is identical everywhere — each stage activates as it
   crosses the viewport center while scrolling (home.js), driving the line
   fill height, a heartbeat-style pulse on the active marker, and a subtle
   positional nudge on the floating visual, all together.
   ============================================================================ */
.day-of-care {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  /* Very light warm coral/peach wash — Theme-B accent at low opacity,
     distinct from Section 2's mint and Section 3's lavender */
  background: rgba(243, 165, 140, 0.1);
}

/* Subtle decorative line/grid pattern, faded toward one corner */
.day-of-care-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(38, 59, 143, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 59, 143, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 80% 15%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 55% at 80% 15%, #000 0%, transparent 75%);
}

.day-of-care-header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.day-of-care-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.day-of-care-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.day-of-care-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.day-of-care-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* --- Floating visual: subtly repositions per active stage --------------- */
.day-of-care-visual {
  align-self: center;
  width: 100%;
  max-width: 240px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.day-of-care-body.is-visible .day-of-care-visual {
  opacity: 1;
  transform: translateY(0);
}

.day-of-care-image-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.day-of-care-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  /* The "floating" position nudge tied to data-active-stage (home.js) */
  transition: transform 0.8s var(--ease);
}

.day-of-care-visual[data-active-stage="2"] .day-of-care-image { transform: translateY(-6px) rotate(-0.6deg); }
.day-of-care-visual[data-active-stage="3"] .day-of-care-image { transform: translateY(4px) scale(1.02); }
.day-of-care-visual[data-active-stage="4"] .day-of-care-image { transform: translateY(-4px) rotate(0.6deg); }
.day-of-care-visual[data-active-stage="5"] .day-of-care-image { transform: translateY(6px) scale(1.015); }

/* Fallback shown if the placeholder image fails to load */
.day-of-care-image.day-of-care-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3.4;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-align: center;
  padding: 2rem;
}

/* --- Timeline: one continuous line + 5 stages ---------------------------- */
.day-timeline-wrap {
  position: relative;
}

/* Track + fill both span top:22px (roughly the first marker's center) to
   bottom:0 — the wrap's own bottom edge, which is exactly the bottom of
   the last stage item ("Evening Check-in"), since the wrap contains
   nothing else. This is the fix: the line previously used `bottom:22px`
   on the track (an assumption that every stage is the same height, which
   breaks the moment description text wraps differently) and, more
   importantly, `height:X%` on the fill — a percentage that resolves
   against the wrap's *full* height regardless of `top:22px`, so at 100%
   it overshot the wrap's true bottom by 22px. Because `.day-of-care`
   (not `.day-timeline-wrap`) is what clips overflow, that overshoot
   rendered past the last item, into the section's own bottom padding.
   Using `transform: scaleY()` instead of `height` avoids the bug
   entirely: the fill's box is already correctly sized to its full
   top:22/bottom:0 span, and scaleY only ever grows *within* that span. */
/* Timeline line ends at Evening Check-in */
.day-timeline-track {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 2px;
  height: 560px;
  background: rgba(38, 59, 143, 0.14);
  z-index: 0;
}

.day-timeline-fill {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 2px;
  height: 560px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
  z-index: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease);
}
.day-timeline {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.day-stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1rem;
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}

.day-stage.is-active,
.day-stage.is-done {
  opacity: 1;
}

.day-stage-marker {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.day-stage-icon {
  display: flex;
  width: 20px;
  height: 20px;
}

.day-stage-icon svg {
  width: 130%;
  height: 130%;
}

.day-stage.is-active .day-stage-marker,
.day-stage.is-done .day-stage-marker {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-white);
}

/* Subtle heartbeat-inspired pulse — only the currently active marker,
   never more than one at a time, kept elegant (not a full spin/bounce) */
.day-stage.is-active .day-stage-marker {
  animation: dayHeartbeat 1.6s ease-in-out infinite;
}

@keyframes dayHeartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.14); }
  30% { transform: scale(1); }
  45% { transform: scale(1.08); }
  60% { transform: scale(1); }
}

.day-stage-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.3rem;
  transition: transform 0.4s var(--ease);
}

.day-stage.is-active .day-stage-body {
  transform: translateX(3px);
}

.day-stage-time {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.day-stage-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  transition: color 0.4s var(--ease);
}

.day-stage.is-active .day-stage-title {
  color: var(--color-primary);
}

.day-stage-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 42ch;
}

@media (min-width: 900px) {
  .day-of-care {
    padding-block: 5rem;
  }

  .day-of-care-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
  }

  .day-of-care-visual {
    flex: 0 0 300px;
    max-width: 300px;
    align-self: flex-start;
  }

  .day-of-care-image {
    aspect-ratio: 4 / 4.4;
  }

  .day-timeline-wrap {
    flex: 1;
    min-width: 0;
  }

  .day-stage {
    padding-block: 1.3rem;
  }
}

/* ============================================================================
   16. CARE BEYOND THE PATIENT SECTION (Home Section 6)
   An editorial Patient ↔ Family composition — not cards/grid. Fully
   static by request: no scroll-reveal, no image movement/zoom/pulse, no
   animated connector line, no hover/tap interactions, no transitions or
   transforms anywhere in this section — every rule below is either a
   plain visual style or a layout/stacking rule (position + z-index, kept
   only where needed so content correctly paints above the background
   decoration and connecting line). Mobile-first: a single vertical flow
   (patient benefits → connecting image → family benefits) strung along
   one static line. Desktop (900px+): an asymmetric 3-column layout
   (patient / image / family) joined by a single static flowing curve.
   ============================================================================ */
.family-care {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background: var(--color-white);
}

/* Elegant healthcare line-pattern background decoration */
.family-care-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(38, 59, 143, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 59, 143, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 55% at 50% 50%, #000 0%, transparent 78%);
}

.family-care-header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.family-care-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.family-care-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.family-care-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* --- Flow container: mobile-first vertical stack (patient → connection
   → family) --------------------------------------------------------------- */
.family-care-flow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Static connecting line (mobile) — a fixed line, always fully visible */
.family-care-flow::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary));
  z-index: 0;
}

/* Flowing/orbit connector line — desktop only, see 900px breakpoint */
.family-care-flow-line {
  display: none;
}

/* --- Patient / Family sides (kept relatively positioned + z-index:1 so
   they paint above the absolutely positioned background/line, which is
   a stacking necessity, not an animation) ---------------------------------- */
.family-care-side {
  position: relative;
  z-index: 1;
}

.family-care-side-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.family-care-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Static benefit item — not a card: icon + label + description, always
   fully visible, no interaction */
.family-care-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius-sm);
}

.family-care-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(38, 59, 143, 0.08);
  color: var(--color-primary);
}

.family-care-benefit-icon svg {
  width: 17px;
  height: 17px;
}

.family-care-benefit-icon svg path,
.family-care-benefit-icon svg circle {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.family-care-benefit-body {
  display: flex;
  flex-direction: column;
  padding-top: 0.3rem;
}

.family-care-benefit-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
}

.family-care-benefit-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 32ch;
}

/* --- Connection: static image --------------------------------------------- */
.family-care-link {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 100%;
  max-width: 260px;
}

/* Central image: completely static and always visible — no reveal, no
   movement, no zoom, no pulse */
.family-care-image-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.family-care-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
}

/* Fallback shown if the placeholder image fails to load */
.family-care-image.family-care-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3.2;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem;
}

@media (min-width: 900px) {
  .family-care {
    padding-block: 5rem;
  }
 

  /* Desktop uses the static SVG curve instead of the mobile line */
  .family-care-flow::before {
    display: none;
  }

  .family-care-flow-line {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  /* Always fully drawn — no stroke-dasharray/dashoffset animation */
  .family-care-flow-path {
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: 0.5;
    stroke-linecap: round;
    opacity: 0.55;
  }

  /* Asymmetric 3-column composition: named grid areas keep the DOM order
     (line, patient, link, family) independent of the visual order */
  .family-care-flow {
    display: grid;
    grid-template-columns: 1fr 0.85fr 1fr;
    grid-template-areas: "patient link family";
    align-items: center;
    gap: 2rem;
  }

  .family-care-side--patient {
    grid-area: patient;
  }

  .family-care-link {
    grid-area: link;
    max-width: none;
  }

  /* The family column sits slightly lower than the patient column,
     avoiding a perfectly mirrored, symmetric layout */
  .family-care-side--family {
    grid-area: family;
    margin-top: 3rem;
  }
}

/* MOBILE — remove the vertical connecting line */
@media (max-width: 899px) {
  .family-care-flow::before {
    display: none !important;
    content: none !important;
  }

  .family-care-flow-line {
    display: none !important;
  }
}

/* ============================================================================
   17. SPECIAL CARE BENEFITS SECTION (Home Section 7)
   Two asymmetric editorial panels — not cards/grid. Mobile-first: each
   panel stacks vertically (media, then content, following DOM order — the
   second panel is content-first, giving mobile some natural variety too).
   Desktop (900px+): a two-column row per panel, alternating which side the
   image sits on via source order alone (no CSS row-reverse needed), plus
   an unequal 44/56 split and a vertical offset on the second panel's image
   for genuine asymmetry rather than a mirrored pair. No links/CTAs — every
   list item is plain text. Reveal + hover use the same lightweight
   opacity/transform patterns established across the other sections.
   ============================================================================ */
.special-benefits {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background: var(--color-bg);
}

/* Subtle healthcare line/dot background decoration */
.special-benefits-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(rgba(38, 59, 143, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(38, 59, 143, 0.035) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 75%);
}

.special-benefits-header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.special-benefits-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.special-benefits-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.special-benefits-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.benefit-panels {
  position: relative;
  z-index: 1;
}

/* Each panel fades/lifts in once, independently, as it scrolls into view */
.benefit-panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.benefit-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.benefit-panel + .benefit-panel {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-border);
}

/* --- Media: image + seal badge -------------------------------------------- */
.benefit-panel-media {
  position: relative;
}

.benefit-panel-image-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.benefit-panel-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

/* Lightweight hover: the whole panel gently zooms its own image */
.benefit-panel:hover .benefit-panel-image {
  transform: scale(1.03);
}

/* Fallback shown if the placeholder image fails to load */
.benefit-panel-image.benefit-panel-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3.2;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem;
}

/* Refined seal badge, overlapping the image's corner */
.benefit-panel-badge {
  position: absolute;
  z-index: 1;
  left: 1rem;
  bottom: -1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}

.benefit-panel-badge svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* --- Content: number, title, tagline, list -------------------------------- */
.benefit-panel-content {
  display: flex;
  flex-direction: column;
}

.benefit-panel-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-secondary-dark);
  margin-bottom: 0.5rem;
}

.benefit-panel-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.benefit-panel-tagline {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 1.25rem;
}

.benefit-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.benefit-panel-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--color-text);
  transition: color 0.25s var(--ease);
}

.benefit-panel-list li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-secondary-dark);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

/* Lightweight hover on individual list points */
.benefit-panel-list li:hover {
  color: var(--color-primary);
}

.benefit-panel-list li:hover svg {
  color: var(--color-primary);
  transform: scale(1.1);
}

@media (min-width: 900px) {
  .special-benefits {
    padding-block: 5rem;
  }

  .benefit-panel {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }

  .benefit-panel-media {
    flex: 0 0 44%;
  }

  .benefit-panel-content {
    flex: 1;
    min-width: 0;
  }

  /* Slight asymmetric vertical offset on the second panel's image, so the
     two panels don't read as a mirrored, symmetric pair */
  .benefit-panel--reverse .benefit-panel-media {
    margin-top: 2.5rem;
  }

  .benefit-panel-title {
    font-size: 1.6rem;
  }
}

/* ============================================================================
   18. LABORATORY & DIAGNOSTICS SECTION (Home Section 8)
   Not cards/grid: a large open image on the left, a connected vertical
   diagnostic journey on the right. Reuses the Day of Care timeline
   mechanic (track + growing fill, per-stage marker, sequential scroll
   activation — see home.js) with new content, plus a distinct subtle
   scan-line animation across the image (not a heartbeat/pulse motif, to
   stay visually distinct from Section 4). Mobile-first: image, then
   journey, stacked. Desktop (900px+): two-column row.
   ============================================================================ */
.lab-diagnostics {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  /* Section-specified background tint */
  background: #EEF2FA;
}

/* Subtle healthcare line/dot background decoration */
.lab-diagnostics-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(rgba(38, 59, 143, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(38, 59, 143, 0.035) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 15% 70%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 15% 70%, #000 0%, transparent 75%);
}

.lab-diagnostics-header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.lab-diagnostics-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.lab-diagnostics-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.lab-diagnostics-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.lab-diagnostics-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* --- Left: open image + scan line + partner-lab trust -------------------- */
.lab-diagnostics-media {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.lab-diagnostics-body.is-visible .lab-diagnostics-media {
  opacity: 1;
  transform: translateY(0);
}

.lab-diagnostics-image-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.lab-diagnostics-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
}

/* Fallback shown if the placeholder image fails to load */
.lab-diagnostics-image.lab-diagnostics-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3.3;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem;
}

/* Subtle diagnostic scan-line sweeping down the image, on a loop */
.lab-diagnostics-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(91, 199, 176, 0.85), transparent);
  animation: labScan 4.5s ease-in-out infinite;
}

@keyframes labScan {
  0% { top: 0; opacity: 0; }
  12% { opacity: 0.9; }
  50% { top: 100%; opacity: 0.9; }
  62% { opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

.lab-diagnostics-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.lab-diagnostics-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-full);
}

.lab-diagnostics-trust-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-secondary-dark);
}

/* --- Right: highlighted services + journey + CTA -------------------------- */
.lab-diagnostics-journey-wrap {
  position: relative;
}

.lab-diagnostics-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.lab-diagnostics-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(38, 59, 143, 0.08);
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-full);
}

.lab-diagnostics-highlight svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Thin connecting line running behind the stage markers */
.lab-journey-track {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 22px;
  width: 1.5px;
  background: var(--color-border);
  z-index: 0;
}

/* Grows from 0 to 100% height as stages activate */
.lab-journey-fill {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 1.5px;
  height: 0%;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
  z-index: 0;
  transition: height 0.6s var(--ease);
}

.lab-journey {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lab-stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 0.9rem;
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}

.lab-stage.is-active,
.lab-stage.is-done {
  opacity: 1;
}

.lab-stage-marker {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.lab-stage.is-active .lab-stage-marker,
.lab-stage.is-done .lab-stage-marker {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-white);
}

.lab-stage-icon {
  display: flex;
  width: 20px;
  height: 20px;
}

.lab-stage-icon svg {
  width: 100%;
  height: 100%;
}

/* Soft pulse ring on the active marker only (reuses @keyframes markerOrbit
   defined under PERSONALISED CARE, rather than redefining it) */
.lab-stage-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  opacity: 0;
}

.lab-stage.is-active .lab-stage-pulse {
  animation: markerOrbit 1.8s var(--ease) infinite;
}

.lab-stage-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.3rem;
}

.lab-stage-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  transition: color 0.4s var(--ease);
}

.lab-stage.is-active .lab-stage-title {
  color: var(--color-primary);
}

.lab-stage-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 42ch;
}

.lab-diagnostics-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.lab-diagnostics-cta:hover,
.lab-diagnostics-cta:focus-visible {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  outline: none;
}

.lab-diagnostics-cta span {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.lab-diagnostics-cta:hover span,
.lab-diagnostics-cta:focus-visible span {
  transform: translateX(3px);
}

@media (min-width: 900px) {
  .lab-diagnostics {
    padding-block: 5rem;
  }

  .lab-diagnostics-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
  }

  .lab-diagnostics-media {
    flex: 0 0 42%;
  }

  .lab-diagnostics-journey-wrap {
    flex: 1;
    min-width: 0;
  }

  .lab-diagnostics-image {
    aspect-ratio: 4 / 4.6;
  }
}

/* Journey line ends at Care Guidance */
.lab-journey-track {
  top: 22px;
  bottom: auto;
  height: 390px;
}

.lab-journey-fill {
  top: 22px;
  bottom: auto;
  max-height: 390px;
}
/* ============================================================================
   19. PROOF WALL SECTION — WHY FAMILIES CHOOSE AROZEN (Home Section 9)
   Not cards/grid, and deliberately not Section 2's radial hub: one
   off-center pull-quote statement with 6 points hand-scattered
   asymmetrically around it (uneven positions/distances, not a ring).
   Mobile-first: statement, then a plain vertical sequence of point
   buttons, each with its own small accent underline that activates on
   hover/tap. Desktop (900px+): the scattered composition, with straight
   SVG lines that light up per-point on hover/focus/tap instead of
   drawing in on scroll — a different interaction model from the rest of
   the page. Staggered scroll-reveal via home.js.
   ============================================================================ */
.proof-wall {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background: #F7FAF8;
}

/* Subtle healthcare line-pattern background decoration */
.proof-wall-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(38, 59, 143, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 59, 143, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 78%);
}

.proof-wall-header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.proof-wall-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.proof-wall-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.proof-wall-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* --- Canvas: mobile-first vertical sequence ------------------------------- */
.proof-wall-canvas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Desktop-only connector lines */
.proof-wall-lines {
  display: none;
}

/* --- Central statement: an off-center pull-quote, not a photo ------------ */
.proof-wall-statement {
  position: relative;
  padding-left: 1.25rem;
  border-left: 3px solid var(--color-secondary);
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.proof-wall-canvas.is-visible .proof-wall-statement {
  opacity: 1;
  transform: translateY(0);
}

.proof-wall-quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
  margin-bottom: -0.4rem;
}

.proof-wall-quote {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
}

/* --- Points: plain buttons, no card styling -------------------------------
   FIX: all 6 points now share a consistent box-sizing + min-height so
   they render as equal-size containers on every breakpoint, regardless
   of how much each title/description wraps. min-height (not a fixed
   height) means a box can still grow taller for unusually long content
   instead of clipping it — "equal size" never overrides "never clip". */
.proof-point {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  min-height: 92px;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: inherit;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.35s var(--ease), background-color 0.25s var(--ease);
}

.proof-wall-canvas.is-visible .proof-point {
  opacity: 1;
  transform: translateY(0);
}

.proof-point--1 { transition-delay: 0s; }
.proof-point--2 { transition-delay: 0.07s; }
.proof-point--3 { transition-delay: 0.14s; }
.proof-point--4 { transition-delay: 0.21s; }
.proof-point--5 { transition-delay: 0.28s; }
.proof-point--6 { transition-delay: 0.35s; }

.proof-point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(38, 59, 143, 0.08);
  color: var(--color-primary);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

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

/* FIX: flex children default to min-width:auto, which lets the text's
   intrinsic width push it past the container edge instead of wrapping —
   min-width:0 lets this column shrink to the space it's actually given.
   flex:1 lets it fill the remaining row width consistently next to the
   fixed-size icon. overflow-wrap:break-word is a last-resort safety net
   only (a single word too long to fit its own line still wraps instead
   of overflowing) — unlike `anywhere`, it doesn't shrink the column's
   computed minimum size, which was previously forcing headings to break
   letter-by-letter even though the container had room to wrap normally
   at word boundaries. */
.proof-point-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 0.15rem;
  padding-top: 0.25rem;
  overflow-wrap: break-word;
}

.proof-point-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
  transition: color 0.25s var(--ease);
}

.proof-point-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Small accent underline — the "thin connecting line" on mobile, where
   there's no adjacent statement to draw a line toward */
.proof-point-line {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-secondary);
  margin-top: 0.4rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

/* Hover / keyboard-focus / tap (.is-active, toggled in home.js) — declared
   after the entrance rule (equal specificity) so it correctly overrides
   the resting transform, same pattern used across the other sections */
.proof-point:hover,
.proof-point:focus-visible,
.proof-point.is-active {
  outline: none;
  background: rgba(91, 199, 176, 0.1);
}

.proof-point:hover .proof-point-icon,
.proof-point:focus-visible .proof-point-icon,
.proof-point.is-active .proof-point-icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.1);
}

.proof-point:hover .proof-point-title,
.proof-point:focus-visible .proof-point-title,
.proof-point.is-active .proof-point-title {
  color: var(--color-primary);
}

.proof-point:hover .proof-point-line,
.proof-point:focus-visible .proof-point-line,
.proof-point.is-active .proof-point-line {
  transform: scaleX(1);
  background: var(--color-primary);
}

@media (min-width: 900px) {
  .proof-wall {
    padding-block: 5.5rem;
  }

  /* Scattered composition: absolute positioning, hand-placed per point
     below, replaces the mobile vertical flow */
  .proof-wall-canvas {
    display: block;
    position: relative;
    min-height: 620px;
    max-width: 1000px;
    margin-inline: auto;
  }

  .proof-wall-lines {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  /* Invisible until its matching point is hovered/focused/tapped */
  .proof-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 0.3;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }

  .proof-line.is-active {
    opacity: 0.7;
  }

  .proof-wall-statement {
    position: absolute;
    z-index: 1;
    left: 4%;
    top: 28%;
    width: 36%;
    margin-bottom: 0;
    padding-left: 1.5rem;
  }

  .proof-wall-quote {
    font-size: 1.7rem;
  }

  /* FIX: a fixed width (replacing width:auto/max-width, which let each
     point shrink-to-fit its own content and end up a different size) plus
     a shared min-height make all 6 points render as equal-size containers
     on desktop. 210px gives the text column (~130px after the icon, its
     gap and padding) enough room for the longest heading word
     ("Communication"/"Professionals") to sit on one line, so headings
     wrap naturally between words instead of breaking mid-word.
     box-sizing:border-box keeps padding inside that fixed width instead
     of adding to it. min-height (not height) still lets a box grow taller
     in the rare case content needs more room, so text is never clipped. */
  .proof-point {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    width: 210px;
    min-height: 136px;
    padding: 0.75rem 0.85rem;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 0.5s var(--ease), transform 0.3s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }

  .proof-wall-canvas.is-visible .proof-point {
    transform: translate(-50%, -50%) scale(1);
  }

  .proof-point--1 { left: 54%; top: 8%; }
  .proof-point--2 { left: 86%; top: 20%; }
  /* FIX: nudged in from 92% to 88% — with the wider 210px box (needed for
     natural heading wrap) the old 92% position could push this point past
     the right edge of the viewport just above the 900px breakpoint,
     causing horizontal overflow. 88% keeps it visually in the same spot
     while staying safely on-screen. */
  .proof-point--3 { left: 88%; top: 52%; }
  .proof-point--4 { left: 78%; top: 84%; }
  .proof-point--5 { left: 44%; top: 90%; }
  .proof-point--6 { left: 16%; top: 88%; }

  .proof-point:hover,
  .proof-point:focus-visible,
  .proof-point.is-active {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    z-index: 3;
  }

  /* Replaced by the SVG connector lines on desktop */
  .proof-point-line {
    display: none;
  }
}

/* ============================================================================
   20. REAL CARE. REAL STORIES. SECTION (Home Section 10)
   A premium editorial review composition — not an image section, not a
   card grid. Mobile-first: 3 review panels stacked in a single column,
   separated by a fine top-border divider line. Desktop (900px+): a row
   of 3, separated by a thin vertical rule centered in the gap (not a
   border on the panel itself, so it doesn't fight the flex gap), with
   the second panel offset lower for a slight asymmetric stagger. Subtle
   scroll-reveal only (staggered fade/lift); hover is a light lift + a
   name underline — no heavy motion anywhere.
   ============================================================================ */
.reviews {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background: #EEF2FA;
}

/* Subtle quote/line background decoration */
.reviews-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(38, 59, 143, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 59, 143, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 25%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 55% at 50% 25%, #000 0%, transparent 78%);
}

.reviews-header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.reviews-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.reviews-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.reviews-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* Prominent trust line, flanked by thin rule ornaments */
.reviews-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  margin: 0;
}

.reviews-trust-rule {
  flex: 1 1 32px;
  max-width: 48px;
  height: 1px;
  background: var(--color-secondary);
}

/* Visible flag marking the reviews below as placeholder content */
.reviews-flag-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2rem;
}

.reviews-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(243, 165, 140, 0.18);
  border: 1px dashed var(--color-accent);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-full);
}

.reviews-flag svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Review panels ---------------------------------------------------------- */
.reviews-panels {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.review-panel {
  position: relative;
  padding-block: 1.75rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.4s var(--ease);
}

.reviews-panels.is-visible .review-panel {
  opacity: 1;
  transform: translateY(0);
}

.review-panel:first-child {
  padding-top: 0;
}

.review-panel + .review-panel {
  border-top: 1px solid var(--color-border);
}

.review-panel:nth-child(1) { transition-delay: 0s; }
.review-panel:nth-child(2) { transition-delay: 0.12s; }
.review-panel:nth-child(3) { transition-delay: 0.24s; }

/* Light hover lift — declared after the entrance rule (equal
   specificity) so it correctly overrides the resting transform */
.review-panel:hover {
  transform: translateY(-3px);
}

.review-quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
  margin-bottom: -0.4rem;
  transition: opacity 0.3s var(--ease);
}

.review-panel:hover .review-quote-mark {
  opacity: 0.9;
}

.review-stars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}

.review-stars svg {
  width: 15px;
  height: 15px;
  fill: var(--color-accent);
}

/* Unfilled star variant (e.g. the 5th star in a 4-out-of-5 rating) */
.review-stars svg.empty-star {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.review-text {
  margin: 0 0 1rem;
  padding: 0;
  border: none;
}

.review-text p {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

.review-author {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
}

.review-name {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.review-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--color-secondary);
  transition: width 0.3s var(--ease);
}

.review-panel:hover .review-name::after {
  width: 100%;
}

.review-relation {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .reviews {
    padding-block: 5rem;
  }

  .reviews-panels {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
    margin-top: 1rem;
  }

  .review-panel {
    flex: 1;
    min-width: 0;
    padding-block: 0;
  }

  .review-panel:first-child {
    padding-top: 0;
  }

  .review-panel + .review-panel {
    border-top: none;
  }

  /* Thin vertical rule centered in the flex gap, not a border on the
     panel box itself (avoids doubling up with the gap spacing) */
  .review-panel:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
  }

  /* Slight asymmetric stagger — avoids a rigid, mirrored 3-column look */
  .review-panel:nth-child(2) {
    margin-top: 2.25rem;
  }

  .review-text p {
    font-size: 1.05rem;
  }
}

/* ============================================================================
   21. GURUGRAM CARE NETWORK SECTION (Home Section 11)
   Not a map screenshot, not a card grid. Mobile-first: a compact hub
   badge with a short connector line into a wrapping "flowing" chip cloud
   of all 32 areas (simple, touch-friendly, no absolute positioning, so
   zero overflow risk). Desktop (900px+): the hub becomes the center of a
   three-ring radial network — 8 inner nodes + 12 mid nodes + 12 outer
   nodes — positioned purely via each node's own --angle/--radius custom
   properties (set inline in the HTML) through a rotate → translateY →
   counter-rotate placement. Each connecting line reuses the exact same
   --angle/--radius pair (rotated the same amount, length = radius,
   pivoted at the hub's center), so line and node geometry can never
   drift out of sync.
   ============================================================================ */
.care-network {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background: #F7FAF8;
}

/* Subtle flowing-line/grid background decoration */
.care-network-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(38, 59, 143, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 59, 143, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 0%, transparent 78%);
}

.care-network-header {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.care-network-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.care-network-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.care-network-subtext {
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* --- Hub + network container ---------------------------------------------- */
.hub-network {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Central hub: elegant circle with a soft breathing pulse ring
   (reuses @keyframes pathPulse defined under CARE PATHS) ------------------- */
.hub-core {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  box-shadow: var(--shadow-md);
}

.hub-core-label {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: center;
}

.hub-core-pulse {
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 1.5px solid var(--color-secondary);
  opacity: 0;
  animation: pathPulse 3.2s var(--ease) infinite;
}

/* Mobile-only connector from the hub into the chip flow below */
.hub-mobile-line {
  display: block;
  width: 2px;
  height: 28px;
  background: linear-gradient(to bottom, var(--color-secondary), var(--color-primary));
  margin: 0.25rem 0;
}

/* Desktop-only radial connector lines */
.hub-lines {
  display: none;
}

/* --- Mobile-first nodes: a wrapping, flowing chip cloud -------------------- */
.hub-nodes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 560px;
}

.hub-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-full);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease), transform 0.3s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  transition-delay: var(--delay, 0s);
}

.hub-network.is-visible .hub-node {
  opacity: 1;
  transform: translateY(0);
}

/* Gentle glow highlight — declared after the entrance rule (equal
   specificity) so it correctly overrides the resting transform */
.hub-node:hover,
.hub-node:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(38, 59, 143, 0.14);
  outline: none;
}

@media (min-width: 900px) {
  .care-network {
    padding-block: 5rem;
  }

  .hub-mobile-line {
    display: none;
  }

  /* Switch to the radial layout: a fixed-size square canvas capped well
     under the available desktop width, with the hub centered and lines
     drawn behind the nodes.
     FIX: widened from 720px to 900px to make room for the new third ring
     (radius 350px + node footprint) — node/line geometry is in fixed
     px, so this only adds breathing-room margin around the existing two
     rings, it doesn't move them. Still comfortably clears the section's
     .container content-box width at the 900px breakpoint (860px), so
     the canvas never gets viewport-squeezed into overflowing. */
  .hub-network {
    display: block;
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }

  .hub-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%);
  }

  .hub-core-label {
    font-size: 0.85rem;
  }

  .hub-lines {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* Line pivots at the hub's exact center (bottom of its own box) and
     rotates by --angle; length = --radius. Draws in on scroll by
     animating height from 0 to --radius. */
  .hub-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 0;
    background: rgba(38, 59, 143, 0.22);
    transform-origin: bottom center;
    transform: translateY(-100%) rotate(var(--angle));
    transition: height 0.5s var(--ease);
    transition-delay: var(--delay, 0s);
  }

  .hub-network.is-visible .hub-line {
    height: var(--radius);
  }

  /* Nodes: same rotate → translateY(-radius) → counter-rotate technique
     as the lines share, so both always point to the same spot. Their
     absolute positioning resolves against .hub-network (the nearest
     *positioned* ancestor) — .hub-nodes itself stays a normal static
     <nav>, so its landmark semantics are never altered by layout. */
  .hub-node {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    max-width: 116px;
    white-space: normal;
    font-size: 0.72rem;
    padding: 0.45rem 0.65rem;
    line-height: 1.25;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(0.85);
  }

  .hub-network.is-visible .hub-node {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(1);
  }

  .hub-node:hover,
  .hub-node:focus-visible {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(1.12);
    z-index: 3;
  }
}

/* --- Local-SEO paragraph ---------------------------------------------------- */
.care-network-seo {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 2.5rem auto 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-align: center;
}

/* ============================================================================
   22. FINAL CTA SECTION (Home)
   A cinematic closing canvas, not a colored rectangle/card: a rich dark
   primary→secondary gradient, an abstract flowing care-path with a short
   bright segment continuously traveling along it (stroke-dasharray/
   dashoffset — pure CSS, no JS), soft layered glow, a faint white grid,
   and a few minimal floating symbols (reusing @keyframes floatBadge from
   the Hero section rather than redefining it). Mobile-first: content
   centered, buttons stack full-width; row layout only from 480px up.
   Coral is used only as a small hover-glow accent on the primary button.
   ============================================================================ */
.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: 4rem;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 45%, var(--color-secondary-dark) 100%);
}

/* Soft layered glow — secondary + a touch of coral, both very soft */
.final-cta-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(91, 199, 176, 0.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(243, 165, 140, 0.16), transparent 40%);
}

/* Subtle line/grid decoration — white-based, since the canvas is dark */
.final-cta-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 82%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 82%);
}

/* Abstract flowing care-path */
.final-cta-path {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.final-cta-path-base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.5;
}

/* Short bright segment that travels the full path length every cycle —
   dasharray totals the normalized pathLength (100), so the gap always
   loops seamlessly back to the start */
.final-cta-path-pulse {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  opacity: 0.85;
  animation: ctaPulseTravel 7s linear infinite;
}

@keyframes ctaPulseTravel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}

/* Minimal floating healthcare symbols — reuses @keyframes floatBadge
   (defined under HERO SECTION) instead of a new animation */
.final-cta-symbol {
  position: absolute;
  z-index: 0;
  display: none;
  color: rgba(255, 255, 255, 0.22);
  animation: floatBadge 5s ease-in-out infinite;
}

.final-cta-symbol svg {
  width: 28px;
  height: 28px;
}

.final-cta-symbol--1 { top: 14%; left: 8%; animation-delay: 0s; }
.final-cta-symbol--2 { top: 68%; left: 12%; animation-delay: 1.2s; color: rgba(91, 199, 176, 0.3); }
.final-cta-symbol--3 { top: 22%; right: 9%; animation-delay: 0.6s; }

/* --- Content ---------------------------------------------------------------- */
.final-cta-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.final-cta-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.final-cta-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 0.9rem;
}

.final-cta-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 1.1rem;
}

.final-cta-copy {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 50ch;
  margin: 0 auto 2.25rem;
}

/* --- CTAs: premium, highly interactive ------------------------------------- */
.final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
}

.final-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.9rem;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.final-cta-btn span {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

.final-cta-btn--primary {
  background: var(--color-white);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
}

/* The section's one small coral accent: a soft glow ring on hover/focus */
.final-cta-btn--primary:hover,
.final-cta-btn--primary:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 0 6px rgba(243, 165, 140, 0.3), var(--shadow-lg);
  outline: none;
}

.final-cta-btn--primary:hover span,
.final-cta-btn--primary:focus-visible span {
  transform: translateX(4px);
}

.final-cta-btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

.final-cta-btn--secondary:hover,
.final-cta-btn--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--color-white);
  transform: translateY(-3px);
  outline: none;
}

@media (min-width: 480px) {
  .final-cta-actions {
    flex-direction: row;
    justify-content: center;
  }

  .final-cta-btn {
    flex: 0 1 auto;
  }
}

@media (min-width: 900px) {
  .final-cta {
    padding-block: 6rem;
  }

  .final-cta-content {
    max-width: 760px;
  }

  /* Floating symbols only appear once there's enough room for them not
     to crowd the text */
  .final-cta-symbol {
    display: block;
  }
}

/* =========================================================
   AROZEN CARE — FOOTER
   Moved here from an inline <style> block in index.html —
   markup, appearance and behavior are unchanged.
   Self-contained on purpose: every color/spacing/font token used below
   is a local custom property scoped to .site-footer (--f-*), not the
   :root tokens above, and no selector here is a bare element type
   (nav/ul/li/a) or reused from elsewhere in this file (.container,
   .btn, etc.) — so these rules can only ever match inside
   <footer class="site-footer">, and nothing else in this stylesheet can
   accidentally match, override, or be overridden by them.
   Mobile-first: single-column stack, comfortable padding, no fixed
   widths above ~320px so nothing can overflow at Galaxy S8+ (360px).
   Desktop (900px+, the same breakpoint used across the rest of the
   site): a horizontal 4-column grid — Brand, Services, Company,
   Contact — using minmax(0, Nfr) tracks so a long line of text (an
   email address, "Laboratory & Diagnostics") wraps inside its own
   column instead of forcing that column — and the whole grid — wider
   than the footer.
   ========================================================= */
.site-footer {
  --f-primary: #263B8F;
  --f-primary-dark: #161f4a;
  --f-secondary: #5BC7B0;
  --f-secondary-dark: #46a794;
  --f-accent: #F3A58C;
  --f-bg: #F7FAF8;
  --f-text: #171B2D;
  --f-text-light: #eef1fa;
  --f-text-muted: rgba(238, 241, 250, 0.7);
  --f-white: #ffffff;
  --f-border: rgba(255, 255, 255, 0.14);
  --f-font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --f-font-body: 'Inter', 'Segoe UI', sans-serif;
  --f-radius-sm: 10px;
  --f-radius-full: 999px;
  --f-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --f-container-width: 1240px;

  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--f-primary-dark) 0%, #1c2758 55%, var(--f-primary) 100%);
  color: var(--f-text-light);
  font-family: var(--f-font-body);
}

.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

/* Subtle premium glow decoration — low-cost radial gradients, no
   filter/blur (which would create a containing-block trap for any
   fixed-position descendant elsewhere on the page) */
.site-footer-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(91, 199, 176, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(243, 165, 140, 0.12) 0%, transparent 45%);
}

/* Faint line-grid texture, matching the decorative language used in
   the hero/section backgrounds elsewhere on this page */
.site-footer-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(91, 199, 176, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 199, 176, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
}

.site-footer-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--f-container-width);
  margin-inline: auto;
  padding: 3rem 1.25rem 1.5rem;
}

/* --- Column grid: mobile-first single column --------------------------- */
.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--f-border);
}

/* FOOTER: soft scroll reveal. min-width:0 is the fix that keeps grid
   columns from blowing out on long content (unrelated to the reveal —
   see file header) and must stay regardless of the animation state. */
.footer-col {
  min-width: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--f-ease), transform 0.6s var(--f-ease);
}

.site-footer.is-visible .footer-col {
  opacity: 1;
  transform: translateY(0);
}

.footer-col:nth-child(1) { transition-delay: 0s; }
.footer-col:nth-child(2) { transition-delay: 0.08s; }
.footer-col:nth-child(3) { transition-delay: 0.16s; }
.footer-col:nth-child(4) { transition-delay: 0.24s; }

/* --- Brand column --------------------------------------------------------
   FIX: logo.png already has a transparent background — .footer-logo and
   .footer-logo-img previously put a white background + padding behind
   it (meant as a generic "logo chip" treatment), which showed up as an
   unwanted white box around the mark. Both are now forced transparent/
   borderless/shadowless explicitly, and the border-radius that only
   existed to round that box's corners is removed (a border-radius left
   on the <img> itself would still clip the logo's own pixels to a
   rounded rect even with no visible background). Sizing/layout
   (width/height/gap/margin) is unchanged.
   UPDATE: the footer brand mark is now assets/logoo.png — a wide
   (~2:1) full logo lockup with its own opaque white fill, unlike the
   old square transparent-background mark. width switches to auto (so
   the box always matches the image's true aspect ratio — no
   stretching) and a small border-radius is reinstated so that white
   fill reads as the intended "small rounded rectangle" logo chip
   rather than a hard-edged rectangle. */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.footer-logo-img {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
  border-radius: var(--f-radius-sm);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.footer-logo-text {
  font-family: var(--f-font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--f-white);
}

.footer-logo-accent {
  color: var(--f-secondary);
}

.footer-tagline {
  max-width: 34ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--f-text-muted);
  margin: 0 0 1.4rem;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* FOOTER: 44x44 meets the standard minimum touch-target size */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--f-border);
  transition: background-color 0.25s var(--f-ease), border-color 0.25s var(--f-ease), transform 0.25s var(--f-ease), box-shadow 0.25s var(--f-ease);
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  background: var(--f-secondary);
  border-color: var(--f-secondary);
  color: var(--f-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(91, 199, 176, 0.3);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

/* --- Link columns (Services / Company) ----------------------------------- */
.footer-col-heading {
  font-family: var(--f-font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--f-white);
  margin: 0 0 1.1rem;
}

.footer-links li + li {
  margin-top: 0.75rem;
}

/* FOOTER: refined link hover — color shift + nudge, plus a thin
   underline that reveals via scaleX (cheap, GPU-friendly) */
.footer-links a {
  position: relative;
  display: inline-block;
  font-size: 0.9rem;
  color: var(--f-text-muted);
  transition: color 0.2s var(--f-ease), padding-left 0.2s var(--f-ease);
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--f-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--f-ease);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--f-secondary);
  padding-left: 0.25rem;
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

/* --- Contact column -------------------------------------------------------- */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--f-text-muted);
}

.footer-contact li + li {
  margin-top: 0.85rem;
}

/* min-width:0 + overflow-wrap on the text side of each flex row so a
   long value (the email address in particular) wraps inside its
   column instead of forcing the row — and the grid track behind it —
   wider than intended */
.footer-contact a,
.footer-contact li > span {
  min-width: 0;
  overflow-wrap: break-word;
  transition: color 0.2s var(--f-ease);
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--f-secondary);
}

.footer-contact a:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

.footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--f-secondary);
}

.footer-contact-icon svg {
  width: 16px;
  height: 16px;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.4rem;
  padding: 0.65rem 1.3rem;
  background: var(--f-secondary);
  color: var(--f-primary-dark);
  font-family: var(--f-font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: var(--f-radius-full);
  transition: background-color 0.25s var(--f-ease), transform 0.25s var(--f-ease), box-shadow 0.25s var(--f-ease);
}

.footer-cta:hover,
.footer-cta:focus-visible {
  background: var(--f-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.footer-cta:focus-visible {
  outline: 2px solid var(--f-white);
  outline-offset: 3px;
}

/* --- Bottom bar: copyright + legal links, and the TechVahni credit ------- */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.75rem;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--f-ease) 0.3s, transform 0.6s var(--f-ease) 0.3s;
}

.site-footer.is-visible .footer-bottom {
  opacity: 1;
  transform: translateY(0);
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.footer-copyright {
  margin: 0;
  font-size: 0.82rem;
  color: var(--f-text-muted);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
}

.footer-legal-links a {
  font-size: 0.82rem;
  color: var(--f-text-muted);
  transition: color 0.2s var(--f-ease);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--f-secondary);
}

.footer-legal-links a:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

/* FOOTER: TechVahni credit — a small, professional line, not a second
   brand competing with Arozen Care. Slightly larger than before, still
   sized well below the footer's own heading text. Two restrained
   animations, both unchanged: a small continuous heartbeat on the heart
   icon, and a soft glow that only appears on hover/focus (rather than a
   constant shimmer loop, which would read as distracting for something
   this size that's visible on every page indefinitely). */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border-radius: var(--f-radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--f-border);
  font-family: var(--f-font-heading);
  font-size: 0.92rem;
  transition: background-color 0.25s var(--f-ease), border-color 0.25s var(--f-ease), transform 0.25s var(--f-ease), box-shadow 0.25s var(--f-ease);
}

.footer-credit-heart {
  display: inline-block;
  font-size: 1.05rem;
  animation: footerHeartBeat 1.8s ease-in-out infinite;
}

.footer-credit-text {
  color: var(--f-text-muted);
  font-weight: 500;
}

.footer-credit-brand {
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(90deg, var(--f-secondary) 0%, var(--f-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glow appears only on hover/focus — kept out of the constant-animation
   path so the credit stays calm at rest */
.footer-credit:hover,
.footer-credit:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--f-secondary);
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(91, 199, 176, 0.35);
}

.footer-credit:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

@keyframes footerHeartBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — DESKTOP (900px+, matching the breakpoint used site-wide)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .site-footer-inner {
    padding: 4.5rem 2rem 2rem;
  }

  .site-footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .footer-tagline {
    max-width: 30ch;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .footer-legal {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — reduced motion (self-contained; the global reset near
   the top of this file already covers `*`, so this scoped copy is
   redundant there — it's kept so the footer block stays independently
   correct if it's ever lifted back out on its own)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}