/* ==========================================================================
   AROZEN CARE — HOME SECTION 5: HEALTHCARE ECOSYSTEM
   Reuses global tokens/utilities from home.css (:root vars, .container) —
   this file only adds section-5-specific rules, kept separate per spec.
   Mobile-first: single-column category → row flow with a compact center
   logo. Desktop (900px+): asymmetric 3-column composition (left groups /
   center logo / right groups). No connector lines. The center logo badge
   is slightly larger (110px/62px mobile, 130px/72px desktop), and every
   service row uses a real 56–64px rounded-square photo thumbnail instead
   of an SVG icon. Global prefers-reduced-motion handling already lives in
   home.css and applies here too (it targets `*`), so it isn't repeated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION + BACKGROUND DECORATION
   -------------------------------------------------------------------------- */
.ecosystem {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background: var(--color-bg);
}

/* Subtle healthcare line/dot background decoration, faded toward the center */
.ecosystem-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(rgba(38, 59, 143, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(38, 59, 143, 0.04) 1px, transparent 1px);
  background-size: 22px 22px, 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
}

/* --------------------------------------------------------------------------
   HEADER: EYEBROW, HEADING, SUPPORTING COPY
   -------------------------------------------------------------------------- */
.ecosystem-header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.ecosystem-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;
}

.ecosystem-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;
}

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

/* --------------------------------------------------------------------------
   ECOSYSTEM COMPOSITION — mobile-first single column: center logo, then
   each group in document order (left groups, then right groups)
   -------------------------------------------------------------------------- */
.ecosystem-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* --- Center: Arozen logo — compact, no large image/photo -----------------
   Mobile: 110px badge / 62px logo. Desktop: 130px badge / 72px logo
   (see the 900px breakpoint below). Kept centered and balanced. */
.ecosystem-center {
  position: relative;
  z-index: 1;
  align-self: center;
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.ecosystem-grid.is-visible .ecosystem-center {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ecosystem-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  margin: 0 auto 0.6rem;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.ecosystem-logo {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.ecosystem-center-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   GROUPS + ROWS — compact horizontal interactive rows, not cards
   -------------------------------------------------------------------------- */
.ecosystem-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

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

.ecosystem-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Compact horizontal row — layout: [small image] Service Name →. Not a
   card: no border/shadow on the row itself, just a hover/focus accent. */
.ecosystem-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.3s var(--ease), background-color 0.25s var(--ease);
}

.ecosystem-grid.is-visible .ecosystem-row {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger each group's 3 rows independently (nth-child resets per <ul>) */
.ecosystem-rows li:nth-child(1) .ecosystem-row { transition-delay: 0s; }
.ecosystem-rows li:nth-child(2) .ecosystem-row { transition-delay: 0.08s; }
.ecosystem-rows li:nth-child(3) .ecosystem-row { transition-delay: 0.16s; }

/* Real photo thumbnail, 60px rounded-square (56–64px range), soft
   #EEF2FA background showing while the image loads (and, via
   .ecosystem-thumb--fallback, if it fails) — no SVG/icon font here */
.ecosystem-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 13px;
  background: #EEF2FA;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.ecosystem-row-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}

/* Fallback shown if a thumbnail path fails to load — a soft tinted
   square instead of a broken-image icon */
.ecosystem-row-icon img.ecosystem-thumb--fallback {
  width: 60%;
  height: 60%;
  margin: auto;
  object-fit: contain;
  opacity: 0.35;
}

.ecosystem-row-name {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 500;
}

.ecosystem-row-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

/* Hover / keyboard-focus: thumbnail gets a soft accent ring + gentle
   zoom, and the whole row shifts right — declared after the .is-visible
   rule (equal specificity) so it correctly overrides the resting
   transform, same pattern used across the other sections */
.ecosystem-row:hover,
.ecosystem-row:focus-visible {
  background: rgba(91, 199, 176, 0.14);
  transform: translateX(4px);
  outline: none;
}

.ecosystem-row:hover .ecosystem-row-icon,
.ecosystem-row:focus-visible .ecosystem-row-icon {
  box-shadow: 0 0 0 3px rgba(91, 199, 176, 0.4);
}

.ecosystem-row:hover .ecosystem-row-icon img,
.ecosystem-row:focus-visible .ecosystem-row-icon img {
  transform: scale(1.08);
}

.ecosystem-row:hover .ecosystem-row-arrow,
.ecosystem-row:focus-visible .ecosystem-row-arrow {
  color: var(--color-primary);
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   CTA — "View All Services"
   -------------------------------------------------------------------------- */
.ecosystem-cta {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 2.5rem;
}

.ecosystem-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-primary);
  padding: 0.85rem 1.75rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-full);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

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

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

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

/* --------------------------------------------------------------------------
   DESKTOP (900px+): asymmetric 3-column composition + larger center logo
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .ecosystem {
    padding-block: 5rem;
  }

  /* Named grid areas mean DOM order (center-first, for a clean mobile
     flow) doesn't dictate the visual order here */
  .ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr 0.85fr 1fr;
    grid-template-areas: "left center right";
    align-items: start;
    gap: 1.5rem;
  }

  .ecosystem-center {
    grid-area: center;
    align-self: center;
    margin-top: 2rem;
  }

  /* Slightly larger center badge/logo on desktop, still centered */
  .ecosystem-logo-badge {
    width: 130px;
    height: 130px;
  }

  .ecosystem-logo {
    width: 72px;
    height: 72px;
  }

  .ecosystem-col--left {
    grid-area: left;
  }

  .ecosystem-col--right {
    grid-area: right;
  }

  /* Asymmetric stagger: the second group in each column sits lower than
     its neighbour across the way, avoiding a rigid, symmetric 2x2 look */
  .ecosystem-group--offset {
    margin-top: 2.5rem;
  }

  .ecosystem-col--right .ecosystem-group--offset {
    margin-top: 4rem;
  }
}

/* ==========================================================================
   AROZEN CARE — SERVICES PAGE (services.html)
   Reuses global tokens/utilities from home.css (:root vars, .container,
   .btn/.btn-primary/.btn-lg, header/nav/footer) — kept in this existing
   file per spec, alongside Home Section 5's Ecosystem styles above.
   Mobile-first; desktop switch at 900px, matching the breakpoint used
   across the rest of the site. Global prefers-reduced-motion handling
   already lives in home.css and applies here too.
   Section map: S1. Services Hero  S2. All Services
   ========================================================================== */

/* --------------------------------------------------------------------------
   SERVICES — S1: HERO
   Text-only, centered — no image. A soft gradient/fade decoration behind
   the copy gives it some depth without competing with the text.
   -------------------------------------------------------------------------- */
.services-hero {
  position: relative;
  overflow: hidden;
  padding-block: 3rem 3.5rem;
  background: var(--color-bg);
  text-align: center;
}

.services-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(38, 59, 143, 0.08) 0%, transparent 70%),
    radial-gradient(circle at 85% 90%, rgba(91, 199, 176, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(243, 165, 140, 0.08) 0%, transparent 45%);
}

.services-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.services-hero.is-visible .services-hero-inner {
  opacity: 1;
  transform: translateY(0);
}

.services-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 0 0 1rem;
}

.services-hero-eyebrow::before,
.services-hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--color-secondary);
}

.services-hero-heading {
  max-width: 20ch;
  margin: 0 auto 1.25rem;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--color-text);
}

.services-hero-text {
  max-width: 56ch;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   SERVICES — S2: ALL SERVICES
   Mobile: single column, comfortable spacing. Desktop (900px+): a clean
   multi-column grid. Cards avoid the generic template look via a soft
   corner wash behind the icon, a distinct hover lift + icon nudge, and
   an "Explore Service" link whose arrow moves on hover.
   -------------------------------------------------------------------------- */
.services-all {
  position: relative;
  overflow: hidden;
  padding-block: 3rem 4rem;
  background: var(--color-white);
}

/* Light abstract background fade — decorative only, clipped by
   .services-all's overflow:hidden so it can never cause horizontal
   scroll even with its off-edge offsets */
.services-all-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 92% 8%, rgba(38, 59, 143, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 4% 96%, rgba(91, 199, 176, 0.06) 0%, transparent 40%);
}

.services-all-inner {
  position: relative;
  z-index: 1;
}

.services-all-header {
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

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

.services-all-text {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0;
}

.services-all-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* --- Card: the whole card is the link, for a single large touch target -- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 1.75rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), translate 0.3s var(--ease);
}

.services-all-grid.is-visible .service-card {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger each card's reveal (capped so the last cards don't lag too long) */
.service-card:nth-child(1) { transition-delay: 0s; }
.service-card:nth-child(2) { transition-delay: 0.05s; }
.service-card:nth-child(3) { transition-delay: 0.1s; }
.service-card:nth-child(4) { transition-delay: 0.15s; }
.service-card:nth-child(5) { transition-delay: 0.2s; }
.service-card:nth-child(6) { transition-delay: 0.25s; }
.service-card:nth-child(7) { transition-delay: 0.3s; }
.service-card:nth-child(8) { transition-delay: 0.35s; }
.service-card:nth-child(9) { transition-delay: 0.4s; }
.service-card:nth-child(10) { transition-delay: 0.45s; }
.service-card:nth-child(11) { transition-delay: 0.5s; }
.service-card:nth-child(12) { transition-delay: 0.55s; }
.service-card:nth-child(13) { transition-delay: 0.6s; }

/* Soft corner wash behind the icon — a small, premium detail instead of
   a plain flat card */
.service-card::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 199, 176, 0.16) 0%, transparent 70%);
  transition: transform 0.4s var(--ease);
}

/* FIX: scoped under .services-all-grid.is-visible so this rule's
   specificity matches (and wins over) the reveal rule above — .service-
   card:hover alone was being silently overridden by the higher-
   specificity `.services-all-grid.is-visible .service-card` reveal rule
   once a card had revealed, since both set the same `transform`
   property and CSS resolves conflicts by specificity, not source order. */
.services-all-grid.is-visible .service-card:hover,
.services-all-grid.is-visible .service-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
  outline: none;
}

.service-card:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.service-card:hover::before,
.service-card:focus-visible::before {
  transform: scale(1.15);
}

/* SERVICES — S2: SERVICE CARD IMAGE
   FIX: border-radius:50% alone doesn't clip a child <img> to a circle —
   it only rounds the element's own box. overflow:hidden is what actually
   crops the photo to the circle; without it the image would render as a
   square poking out past the rounded background. Size stays fixed at
   48px across every breakpoint (same footprint the SVG icons used, so
   the card layout doesn't shift), and the <img> itself fills that
   circle at width/height:100% with object-fit:cover so it scales
   responsively without distortion regardless of the photo's own
   proportions. */
.service-card-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(38, 59, 143, 0.08);
  color: var(--color-primary);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* SERVICES — S2: SERVICE CARD IMAGE */
.service-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Fallback shown if a service photo fails to load — same graceful
   pattern used across the rest of the site */
.service-card-icon img.service-card-icon-img--fallback {
  width: 60%;
  height: 60%;
  margin: auto;
  object-fit: contain;
  opacity: 0.4;
}

.service-card:hover .service-card-icon,
.service-card:focus-visible .service-card-icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px) scale(1.06);
}

.service-card-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.service-card-desc {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}

.service-card-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
}

.service-card-link span {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.service-card:hover .service-card-link span,
.service-card:focus-visible .service-card-link span {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   SERVICES — RESPONSIVE (900px+, matching the breakpoint used site-wide)
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .services-all-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .services-all {
    padding-block: 4.5rem 5.5rem;
  }

  .services-all-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

.services-hero-heading {
  color: #171B2D;
}

.services-hero-heading span {
  background: linear-gradient(90deg, #263B8F, #5BC7B0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
  .services-hero-heading {
    text-align: center;
  }
}

/* ==========================================================================
   AROZEN CARE — SERVICE DETAIL PAGES (servicess/*.html)
   Kept in this existing file per spec, alongside the Ecosystem and
   Services-hub styles above. Deliberately generic class names
   (.service-detail-*, .service-benefits-*) so this same CSS is reused by
   every individual service page (doctor-home-visit.html and future
   pages) without duplicating rules per page. Mobile-first; desktop
   switch at 900px, matching the breakpoint used site-wide. Global
   prefers-reduced-motion handling already lives in home.css and applies
   here too.
   Section map: S1. Service Intro  S2. Benefits
   ========================================================================== */

/* --------------------------------------------------------------------------
   SERVICE — S1: DOCTOR HOME VISIT
   Premium editorial, text-only — no image. Reveals on load like the
   other hero-equivalent sections (fadeUpIn, reused from home.css), since
   it's the first thing on the page rather than something scrolled to.
   -------------------------------------------------------------------------- */
.service-detail-intro {
  position: relative;
  overflow: hidden;
  padding-block: 3rem 3.5rem;
  background: var(--color-bg);
}

.service-detail-intro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(38, 59, 143, 0.07) 0%, transparent 70%),
    radial-gradient(circle at 95% 30%, rgba(91, 199, 176, 0.08) 0%, transparent 45%);
}

.service-detail-intro-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
}

/* SERVICE — S1: DOCTOR HOME VISIT */
.service-detail-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 0 0 1rem;
  opacity: 0;
  animation: fadeUpIn 0.7s var(--ease) both;
}

.service-detail-heading {
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 1.25rem;
  opacity: 0;
  animation: fadeUpIn 0.8s var(--ease) 0.08s both;
}

.service-detail-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0 0 2.5rem;
  opacity: 0;
  animation: fadeUpIn 0.8s var(--ease) 0.16s both;
}

.service-detail-block {
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUpIn 0.8s var(--ease) 0.22s both;
}

.service-detail-block-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

.service-detail-text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
}

/* Definition list: term + description, a clean editorial alternative to
   an icon grid — a thin left rule marks each item instead of a card box */
.service-detail-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.service-detail-list-item {
  padding-left: 1rem;
  border-left: 3px solid var(--color-secondary);
}

.service-detail-list-item dt {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 0.3rem;
}

.service-detail-list-item dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Safety notice — visually distinct (tinted, bordered) so it's never
   mistaken for regular body copy */
.service-detail-notice {
  padding: 1.5rem 1.5rem;
  background: rgba(243, 165, 140, 0.12);
  border: 1px solid rgba(243, 165, 140, 0.35);
  border-radius: var(--radius-md);
  opacity: 0;
  animation: fadeUpIn 0.8s var(--ease) 0.28s both;
}

.service-detail-notice-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.service-detail-notice-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* SERVICE — S1: HOME NURSING CARE */
/* Opt-in modifier: centers the intro (eyebrow/H1/lead/block headings) on
   mobile only, for pages that want a hero-like centered intro above a
   left-aligned editorial body. Scoped to this class so it doesn't affect
   pages that don't use it, e.g. Doctor Home Visit. */
@media (max-width: 899.98px) {
  .service-detail-intro-inner--centered .service-detail-eyebrow,
  .service-detail-intro-inner--centered .service-detail-heading,
  .service-detail-intro-inner--centered .service-detail-lead,
  .service-detail-intro-inner--centered .service-detail-block-heading {
    text-align: center;
  }
}

/* SERVICE — S1: CARETAKER / NURSING STAFF */
/* Broader opt-in modifier: centers the whole intro column on mobile —
   headings, body text, the definition list and the notice — not just the
   hero. Kept separate from --centered (which only centers the hero on
   Home Nursing Care) so that page's mobile layout stays unaffected. */
@media (max-width: 899.98px) {
  .service-detail-intro-inner--center-all .service-detail-eyebrow,
  .service-detail-intro-inner--center-all .service-detail-heading,
  .service-detail-intro-inner--center-all .service-detail-lead,
  .service-detail-intro-inner--center-all .service-detail-block-heading,
  .service-detail-intro-inner--center-all .service-detail-text,
  .service-detail-intro-inner--center-all .service-detail-notice-heading,
  .service-detail-intro-inner--center-all .service-detail-notice-text {
    text-align: center;
  }

  .service-detail-intro-inner--center-all .service-detail-list {
    align-items: center;
  }

  .service-detail-intro-inner--center-all .service-detail-list-item {
    text-align: center;
    padding-left: 0;
    padding-top: 0.85rem;
    border-left: none;
    border-top: 3px solid var(--color-secondary);
  }
}

/* --------------------------------------------------------------------------
   SERVICE — S2: BENEFITS
   Mobile: single column. Desktop (900px+): a 2-column staggered list —
   short accent-numbered rows, not a card grid. Scroll-revealed with a
   per-item stagger; gentle hover shifts the accent number and text.
   -------------------------------------------------------------------------- */
.service-benefits {
  position: relative;
  overflow: hidden;
  padding-block: 3rem 4rem;
  background: var(--color-white);
}

.service-benefits-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(38, 59, 143, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 6% 94%, rgba(91, 199, 176, 0.06) 0%, transparent 40%);
}

.service-benefits-inner {
  position: relative;
  z-index: 1;
}

.service-benefits-header {
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

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

.service-benefits-text {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0;
}

.service-benefits-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 880px;
  margin-inline: auto;
}

/* SERVICE — S2: BENEFITS */
/* Contained benefit box — subtle border, light tint, soft shadow; kept
   minimal (small radius, no heavy card chrome) rather than matching the
   bolder .service-card style used on the Services hub grid. */
.service-benefit-item {
  position: relative;
  padding: 1.6rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.service-benefits-list.is-visible .service-benefit-item {
  opacity: 1;
  transform: translateY(0);
}

/* Scoped under .is-visible so this rule's specificity matches (and wins
   over) the reveal rule above — see the identical fix on .service-card
   in the Services hub styles further up this file. */
.service-benefits-list.is-visible .service-benefit-item:hover,
.service-benefits-list.is-visible .service-benefit-item:focus-within {
  transform: translateY(-4px);
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

/* Stagger each benefit's reveal */
.service-benefit-item:nth-child(1) { transition-delay: 0s; }
.service-benefit-item:nth-child(2) { transition-delay: 0.06s; }
.service-benefit-item:nth-child(3) { transition-delay: 0.12s; }
.service-benefit-item:nth-child(4) { transition-delay: 0.18s; }
.service-benefit-item:nth-child(5) { transition-delay: 0.24s; }
.service-benefit-item:nth-child(6) { transition-delay: 0.3s; }
.service-benefit-item:nth-child(7) { transition-delay: 0.36s; }
.service-benefit-item:nth-child(8) { transition-delay: 0.42s; }

.service-benefit-marker {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--color-secondary-dark);
  background: rgba(91, 199, 176, 0.14);
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.85rem;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.service-benefit-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0 0 0.4rem;
}

.service-benefit-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* Gentle hover — the accent badge brightens along with the box lift above */
.service-benefits-list.is-visible .service-benefit-item:hover .service-benefit-marker,
.service-benefits-list.is-visible .service-benefit-item:focus-within .service-benefit-marker {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.service-benefits-cta {
  margin-top: 3rem;
  text-align: center;
}

/* SERVICE — S2: BENEFITS */
/* Opt-in modifier: centers each benefit box's own content on mobile
   (marker badge is inline-block, so it centers along with the text).
   Scoped to this class so pages that keep left-aligned boxes on mobile
   (Doctor Home Visit, Home Nursing Care) are unaffected. */
@media (max-width: 899.98px) {
  .service-benefits-list--center-mobile .service-benefit-item {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   SERVICE DETAIL — RESPONSIVE (900px+, matching the breakpoint used
   site-wide)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .service-detail-intro {
    padding-block: 4.5rem 5rem;
  }

  .service-benefits {
    padding-block: 4.5rem 5.5rem;
  }

  .service-benefits-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2rem;
  }
}

@media (max-width: 768px) {
  .service-page section {
    text-align: center;
  }

  .service-page h1,
  .service-page h2,
  .service-page h3,
  .service-page p {
    text-align: center;
  }

  .service-page .service-benefit,
  .service-page .service-info-item {
    text-align: center;
  }
}

.service-detail-heading {
  color: #171B2D;
}

.service-detail-heading span {
  background: linear-gradient(90deg, #263B8F, #5BC7B0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}