/* ==========================================================================
   ZIVAH FERTILITY · HOME PAGE STYLES
   --------------------------------------------------------------------------
   Page-specific styles for index.php sections. Loaded AFTER core.css so
   it inherits all `--zc-*` design tokens and the global reset — never
   redefines :root, body, or element resets.

   LOCKED RULES:
     • NO max-width caps anywhere — sections are full-bleed.
     • Container padding is ALWAYS:
         desktop / tablet (≥992px) → var(--zc-pad-x)    = 28px
         mobile         (≤991px)   → var(--zc-pad-x-mb) = 14px
     • Compact, premium, gradient-driven palette (--zc-amber, --zc-navy …).
   --------------------------------------------------------------------------
   §1  Blog strip   (Health Journal — compact carousel, header CTA)
   ========================================================================== */


/* §1  ==== BLOG STRIP — Health Journal ================================
   Premium magazine: editorial masthead row, display title, flat
   hairline-driven cards. Each card is image plate on top, monospace
   caption (N°XX · Category) below, display-serif title (2 lines max),
   meta line, hairline divider, and author + amber arrow. No heavy
   shadows or rounded chrome. Easing on cubic-bezier(0.32, 0.72, 0, 1).
   ===================================================================== */

.zc-home-blog {
  position: relative;
  padding: clamp(36px, 3.8vw, 60px) 0 clamp(40px, 4vw, 64px);
  background:
    radial-gradient(ellipse at 96% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 4% 100%, rgba(207, 138, 63, 0.06) 0%, transparent 45%),
    linear-gradient(180deg, var(--zc-off-white) 0%, var(--zc-snow, #fdfbf6) 100%);
  border-top: 1px solid var(--zc-linen);
  overflow: clip;
}

/* Container — full-bleed, locked padding via --zc-pad-x */
.zc-home-blog__inner {
  width: 100%;
  padding-left:  var(--zc-pad-x);
  padding-right: var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .zc-home-blog__inner {
    padding-left:  var(--zc-pad-x-mb);
    padding-right: var(--zc-pad-x-mb);
  }
}

/* === MASTHEAD ============================================================ */
.zc-home-blog__head {
  text-align: left;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}
.zc-home-blog__masthead {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 14px;
}
.zc-home-blog__masthead-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-blog__masthead-rule { height: 1px; }
.zc-home-blog__masthead-rule--l {
  width: clamp(20px, 3vw, 44px);
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-dk) 100%);
}
.zc-home-blog__masthead-rule--r {
  background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-a25) 70%, var(--zc-linen) 100%);
}
.zc-home-blog__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0; background: transparent; border: 0; border-radius: 0;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-blog__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
/* View-all CTA at the end of the masthead — typography only, no
   button chrome. The amber arrow translates on hover. */
.zc-home-blog__masthead-all {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.4s cubic-bezier(0.32, 0.72, 0, 1), color 0.3s var(--zc-ease);
}
.zc-home-blog__masthead-all:hover { gap: 13px; color: var(--zc-amber-dk); }
.zc-home-blog__masthead-all-num {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 22px;
  padding: 0 6px;
  background: rgba(207, 138, 63, 0.12);
  border: 1px solid var(--zc-amber-a35);
  border-radius: 999px;
  font-size: 11px;
  color: var(--zc-amber-dk);
  letter-spacing: 0.6px;
  transition: background 0.3s var(--zc-ease), color 0.3s var(--zc-ease);
}
.zc-home-blog__masthead-all:hover .zc-home-blog__masthead-all-num {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
  border-color: transparent;
}
.zc-home-blog__masthead-all-label { color: var(--zc-warm-dk); }
.zc-home-blog__masthead-all:hover .zc-home-blog__masthead-all-label { color: var(--zc-amber-dk); }
.zc-home-blog__masthead-all i {
  font-size: 12px;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-blog__masthead-all:hover i { transform: translateX(3px); }

@media (max-width: 640px) {
  .zc-home-blog__masthead {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .zc-home-blog__masthead-num { grid-row: 1; grid-column: 1; }
  .zc-home-blog__masthead-rule--l {
    grid-row: 1; grid-column: 2; width: auto;
    background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-a25) 50%, transparent 100%);
  }
  .zc-home-blog__masthead-all { grid-row: 1; grid-column: 3; }
  .zc-home-blog__eyebrow { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .zc-home-blog__masthead-rule--r { display: none; }
  .zc-home-blog__masthead-all-label { display: none; } /* keep just the number + arrow on mobile */
}

.zc-home-blog__title {
  margin: 0 0 10px;
  font-family: var(--zc-f-display);
  font-size: clamp(24px, 2vw + 12px, 40px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.8px;
  color: var(--zc-charcoal);
}
.zc-home-blog__title-accent {
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.zc-home-blog__sub {
  margin: 0;
  max-width: 64ch;
  font-family: var(--zc-f-body);
  font-size: clamp(13px, 0.25vw + 12px, 14.5px);
  line-height: 1.6;
  color: var(--zc-warm-dk);
}


/* === SWIPER RAIL ======================================================= */
.zc-home-blog__viewport {
  position: relative;
  margin-top: clamp(20px, 2.2vw, 30px);
}
.zc-home-blog__swiper {
  overflow: hidden;
  padding: 6px 2px 14px;
}
.zc-home-blog__swiper .swiper-wrapper { display: flex; }
.zc-home-blog__swiper .swiper-slide   { height: auto; display: flex; }


/* === CARD — flat magazine, no chunky chrome ============================ */
.zc-home-blog__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  animation: zc-home-blog-rise 0.7s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  animation-delay: var(--zc-blog-delay, 0s);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes zc-home-blog-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zc-home-blog__card:hover { transform: translateY(-3px); }


/* Media — 16:10 image plate, sharp corners, amber radial tint on hover. */
.zc-home-blog__media {
  position: relative;
  margin: 0 0 14px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zc-linen);
  contain: layout paint;
}
.zc-home-blog__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(0.32, 0.72, 0, 1),
              filter 0.6s var(--zc-ease);
  filter: saturate(0.95);
}
.zc-home-blog__card:hover .zc-home-blog__media img {
  transform: scale(1.06);
  filter: saturate(1.06);
}
.zc-home-blog__media-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--zc-amber-dk);
  font-size: clamp(34px, 4vw, 52px);
  opacity: 0.55;
}
.zc-home-blog__media-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(207, 138, 63, 0) 0%, rgba(207, 138, 63, 0.18) 100%),
    linear-gradient(180deg, transparent 60%, rgba(20, 30, 50, 0.18) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--zc-ease);
  pointer-events: none;
}
.zc-home-blog__card:hover .zc-home-blog__media-tint { opacity: 1; }


/* === BODY ============================================================= */
.zc-home-blog__body {
  display: flex; flex-direction: column;
  flex: 1;
  padding: 0 2px;
}

/* Caption strip: N°XX · Category (no chip background) */
.zc-home-blog__caption {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
}
.zc-home-blog__num { color: var(--zc-amber-dk); }
.zc-home-blog__caption-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--zc-amber-a45);
}
.zc-home-blog__category {
  color: var(--zc-warm-dk);
  opacity: 0.85;
}


/* Title — display serif, 2 lines max, amber on hover */
.zc-home-blog__h {
  margin: 0 0 12px;
  font-family: var(--zc-f-display);
  font-size: clamp(15px, 0.4vw + 12px, 18.5px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.3px;
  color: var(--zc-charcoal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.35s var(--zc-ease);
}
.zc-home-blog__card:hover .zc-home-blog__h { color: var(--zc-amber-dk); }


/* Meta — date · separator · reading time, no pill chrome */
.zc-home-blog__meta {
  display: inline-flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: var(--zc-f-body);
  font-size: 11.5px;
  color: var(--zc-warm-dk);
}
.zc-home-blog__meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.zc-home-blog__meta-item i {
  font-size: 11px;
  color: var(--zc-amber-dk);
  opacity: 0.85;
}
.zc-home-blog__meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--zc-amber-a45);
}


/* Footer — author + amber arrow with growing rule on hover */
.zc-home-blog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--zc-linen);
}
.zc-home-blog__author {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: var(--zc-f-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--zc-charcoal);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zc-home-blog__author-label {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
  opacity: 0.85;
}

.zc-home-blog__more {
  position: relative;
  display: inline-flex; align-items: center;
  width: 36px; height: 32px;
  flex-shrink: 0;
  color: var(--zc-amber-dk);
  font-size: 14px;
  transition: gap 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-blog__more-rule {
  display: block;
  width: 18px; height: 1.5px;
  margin-right: 6px;
  background: var(--zc-amber-dk);
  border-radius: 1px;
  transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.4s var(--zc-ease);
}
.zc-home-blog__more i {
  font-size: 14px;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-blog__card:hover .zc-home-blog__more-rule {
  width: 32px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
}
.zc-home-blog__card:hover .zc-home-blog__more i {
  transform: translate(2px, -2px);
}


/* === SWIPER NAVIGATION ================================================= */
.zc-home-blog__nav {
  position: absolute;
  top: calc(50% - 60px); /* aligned with image plate center, not body */
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--zc-white) 0%, var(--zc-snow, #fdfaf3) 100%);
  border: 1.5px solid var(--zc-amber-a35);
  color: var(--zc-amber-dk);
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 8px 18px rgba(46, 75, 113, 0.18),
    0 3px 8px rgba(207, 138, 63, 0.14);
  transition:
    transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    background 0.35s var(--zc-ease),
    color 0.35s var(--zc-ease),
    border-color 0.35s var(--zc-ease);
}
.zc-home-blog__nav:hover {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
  border-color: var(--zc-amber-dk);
  transform: scale(1.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 12px 26px var(--zc-amber-a45);
}
.zc-home-blog__nav--prev { left: -16px; }
.zc-home-blog__nav--next { right: -16px; }
.zc-home-blog__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}


/* === EMPTY STATE ====================================================== */
.zc-home-blog__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--zc-warm-mid);
  font-size: 13px;
}


/* === RESPONSIVE ======================================================= */
@media (max-width: 991px) {
  .zc-home-blog__nav--prev { left: 4px; }
  .zc-home-blog__nav--next { right: 4px; }
  .zc-home-blog__nav { width: 36px; height: 36px; font-size: 12px; }
}
@media (max-width: 600px) {
  .zc-home-blog__nav { display: none; } /* swipe instead */
  .zc-home-blog__body { padding: 0; }
  .zc-home-blog__h    { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-blog__card { animation: none; opacity: 1; }
}


/* ==========================================================================
   §2  HERO SLIDER  (.zc-home-hero)
   --------------------------------------------------------------------------
   Premium full-bleed brand hero. Tokens + reset come from core.css; this
   block only adds the section-specific styling. Container padding is
   ALWAYS var(--zc-pad-x) / var(--zc-pad-x-mb) per the locked rule.
   ========================================================================== */

.zc-home-hero {
  position: relative;
  width: 100%;
  background: var(--zc-deep);
  overflow: hidden;
  isolation: isolate;
}

.zc-home-hero__swiper { width: 100%; overflow: hidden; }
.zc-home-hero__swiper .swiper-wrapper { display: flex; }

/* ---- Slide ---- */
.zc-home-hero__slide {
  position: relative;
  width: 100%;
  /* Fluid height — short enough on phones, immersive on desktop */
  height: clamp(520px, 70vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--zc-white);
}

/* Background image — <img> for native lazy loading.
   Wrapper handles positioning + clipping; the inner img does the
   Ken-Burns zoom on the active slide. */
.zc-home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: block;
}
.zc-home-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 9s var(--zc-ease-out);
}

/* On mobile the slide is portrait, so the wide hero image gets centre-
   cropped and the person (the subject of each photo) falls outside the
   visible frame. Each slide knows which side its content sits on via
   the .zc-home-hero__slide--{left|right} modifier:
     align="right" → text on the right → person on the LEFT of the photo
     align="left"  → text on the left  → person on the RIGHT of the photo
   Shift the object-position to the side that holds the person so the
   crop preserves them at small widths. */
@media (max-width: 768px) {
  .zc-home-hero__slide--right .zc-home-hero__bg-img { object-position: 22% center; }
  .zc-home-hero__slide--left  .zc-home-hero__bg-img { object-position: 78% center; }
}
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__bg-img {
  transform: scale(1.08);
}

/* Brand-tinted gradient overlay — adapts to slide alignment */
.zc-home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 100% 100%, rgba(207, 138, 63, 0.22) 0%, transparent 55%),
    linear-gradient(110deg,
      rgba(26, 18, 8, 0.85) 0%,
      rgba(26, 18, 8, 0.65) 35%,
      rgba(26, 18, 8, 0.20) 65%,
      rgba(26, 18, 8, 0.00) 100%);
}
.zc-home-hero__slide--right .zc-home-hero__overlay {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(207, 138, 63, 0.22) 0%, transparent 55%),
    linear-gradient(250deg,
      rgba(26, 18, 8, 0.85) 0%,
      rgba(26, 18, 8, 0.65) 35%,
      rgba(26, 18, 8, 0.20) 65%,
      rgba(26, 18, 8, 0.00) 100%);
}

/* Decorative concentric ring in the corner opposite to the text.
   The static ring is the base; two pseudo-elements emit a continuous
   wave-pulse of light outward like water ripples. */
.zc-home-hero__ring {
  position: absolute;
  width: 460px; height: 460px;
  border: 1px solid rgba(207, 138, 63, 0.18);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 60px transparent,
    inset 0 0 0 61px rgba(207, 138, 63, 0.12),
    inset 0 0 0 130px transparent,
    inset 0 0 0 131px rgba(207, 138, 63, 0.08);
}
.zc-home-hero__slide--left  .zc-home-hero__ring { top: -160px; right: -160px; }
.zc-home-hero__slide--right .zc-home-hero__ring { top: -160px; left:  -160px; }

/* Wave-pulse rings — two staggered ripples emanating from the static ring */
.zc-home-hero__ring::before,
.zc-home-hero__ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(207, 138, 63, 0.55);
  opacity: 0;
  animation: zc-hero-ring-pulse 6.5s var(--zc-ease-out) infinite;
  pointer-events: none;
}
.zc-home-hero__ring::after {
  animation-delay: 3.25s;
  border-color: rgba(245, 211, 163, 0.55);    /* lighter amber for the second wave */
}
@keyframes zc-hero-ring-pulse {
  0%   { transform: scale(0.84); opacity: 0;   box-shadow: 0 0 0  0 rgba(207, 138, 63, 0); }
  15%  {                          opacity: 0.62; box-shadow: 0 0 24px 4px rgba(207, 138, 63, 0.28); }
  60%  {                          opacity: 0.18; }
  100% { transform: scale(1.42); opacity: 0;   box-shadow: 0 0 0  0 rgba(207, 138, 63, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .zc-home-hero__ring::before,
  .zc-home-hero__ring::after { animation: none; opacity: 0; }
}

/* Content shell — uses the locked container padding */
.zc-home-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left:  var(--zc-pad-x);
  padding-right: var(--zc-pad-x);
  display: flex;
  align-items: center;
}
.zc-home-hero__slide--right .zc-home-hero__inner { justify-content: flex-end; }
@media (max-width: 991px) {
  .zc-home-hero__inner {
    padding-left:  var(--zc-pad-x-mb);
    padding-right: var(--zc-pad-x-mb);
  }
}

/* Text block (capped width for readability — NOT a section max-width) */
.zc-home-hero__content {
  width: 100%;
  max-width: 640px;
}
.zc-home-hero__slide--right .zc-home-hero__content { text-align: left; }   /* keep text left-aligned even when the block sits right */

/* Eyebrow pill */
.zc-home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--zc-f-heading);
  font-size: clamp(10px, 0.7vw + 5px, 11.5px);
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--zc-amber-lt);
  background: rgba(207, 138, 63, 0.12);
  border: 1px solid rgba(207, 138, 63, 0.30);
  border-radius: 999px;
  padding: 6px 14px 6px 11px;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.zc-home-hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 10px var(--zc-amber-a45);
}

/* Title — display font, big, with amber-gradient accent word */
.zc-home-hero__title {
  font-family: var(--zc-f-display);
  font-size: clamp(34px, 4vw + 12px, 64px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -1.2px;
  color: var(--zc-white);
  margin: 0 0 18px 0;
}
.zc-home-hero__title-accent {
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-lt) 0%, var(--zc-amber) 50%, var(--zc-amber-dk) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.zc-home-hero__tagline {
  font-family: var(--zc-f-accent);
  font-size: clamp(14.5px, 0.6vw + 9px, 18px);
  font-weight: 500;
  color: var(--zc-amber-lt);
  margin: 0 0 12px 0;
  letter-spacing: 0.2px;
}

.zc-home-hero__desc {
  font-family: var(--zc-f-body);
  font-size: clamp(14px, 0.4vw + 9px, 16.5px);
  line-height: 1.7;
  color: var(--zc-w94);
  margin: 0 0 28px 0;
  max-width: 580px;
}

/* CTA buttons */
.zc-home-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.zc-home-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--zc-f-heading);
  font-size: clamp(12px, 0.4vw + 7px, 13.5px);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.4s var(--zc-ease-spring),
    background 0.4s var(--zc-ease),
    color 0.3s ease,
    box-shadow 0.4s var(--zc-ease),
    border-color 0.3s ease;
}
.zc-home-hero__btn--primary {
  background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
  color: var(--zc-white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 12px 28px var(--zc-amber-a45);
}
.zc-home-hero__btn--primary i { font-size: 14px; transition: transform 0.4s var(--zc-ease-spring); }
.zc-home-hero__btn--primary:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  color: var(--zc-white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 18px 36px var(--zc-amber-a45);
}
.zc-home-hero__btn--primary:hover i { transform: translateX(3px); }

.zc-home-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--zc-white);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.zc-home-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--zc-amber-a45);
  color: var(--zc-amber-lt);
  transform: translateY(-3px);
}

/* ---- Slide content reveal animation (only on the active slide) ---- */
.zc-home-hero__slide .zc-home-hero__eyebrow,
.zc-home-hero__slide .zc-home-hero__title,
.zc-home-hero__slide .zc-home-hero__tagline,
.zc-home-hero__slide .zc-home-hero__desc,
.zc-home-hero__slide .zc-home-hero__actions {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--zc-ease-out),
    transform 0.8s var(--zc-ease-spring);
}
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__eyebrow { opacity: 1; transform: none; transition-delay: 0.10s; }
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__title   { opacity: 1; transform: none; transition-delay: 0.20s; }
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__tagline { opacity: 1; transform: none; transition-delay: 0.32s; }
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__desc    { opacity: 1; transform: none; transition-delay: 0.42s; }
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__actions { opacity: 1; transform: none; transition-delay: 0.52s; }

/* ---- Navigation arrows ---- */
.zc-home-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: var(--zc-white);
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s var(--zc-ease-spring),
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.zc-home-hero__nav:hover {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: var(--zc-amber-dk);
  color: var(--zc-white);
  transform: translateY(-50%) scale(1.06);
}
.zc-home-hero__nav--prev { left: 22px; }
.zc-home-hero__nav--next { right: 22px; }
.zc-home-hero__nav.swiper-button-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
@media (max-width: 768px) {
  .zc-home-hero__nav { width: 42px; height: 42px; font-size: 14px; }
  .zc-home-hero__nav--prev { left: 10px; }
  .zc-home-hero__nav--next { right: 10px; }
}
@media (max-width: 480px) {
  .zc-home-hero__nav { display: none; }       /* swipe instead */
}

/* ---- Pagination (animated pill) ---- */
.zc-home-hero__pagination {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  bottom: clamp(96px, 11vh, 130px);
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.zc-home-hero__pagination .swiper-pagination-bullet {
  pointer-events: auto;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  opacity: 1;
  margin: 0 !important;
  transition: width 0.45s var(--zc-ease-spring), background 0.3s ease;
}
.zc-home-hero__pagination .swiper-pagination-bullet-active {
  width: 36px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 14px var(--zc-amber-a45);
}

/* ---- Slide counter (top-right corner) ---- */
.zc-home-hero__counter {
  position: absolute;
  top: 24px; right: 28px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--zc-f-accent);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--zc-w75);
}
.zc-home-hero__counter-current {
  color: var(--zc-amber-lt);
  font-weight: 600;
  font-size: 18px;
}
.zc-home-hero__counter-sep {
  display: inline-block;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-lt), transparent);
}
.zc-home-hero__counter-total { color: var(--zc-w52); font-size: 13px; }
@media (max-width: 600px) {
  .zc-home-hero__counter { top: 14px; right: 14px; font-size: 12px; }
  .zc-home-hero__counter-current { font-size: 15px; }
  .zc-home-hero__counter-sep { width: 22px; }
}


/* ---- Bottom contact strip — PREMIUM LIGHT GLASS, 4 in a row ---------
   Lifted off the slider with a small gap, individual glass cards (not
   joined), brand-amber icon pill, refined typography. Stays 4-in-row at
   every breakpoint — text/icon scale down for tiny phones. */
.zc-home-hero__strip {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 0.8vw, 12px);
  padding: clamp(12px, 1.4vw, 18px) clamp(12px, 1.6vw, 24px);
  background:
    linear-gradient(180deg, rgba(26, 18, 8, 0.20) 0%, rgba(26, 18, 8, 0.55) 100%);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Strip items — no box, no border, no chrome. Just typography +
   icon on a glass strip, with a thin vertical hairline divider
   between items (faded at top and bottom for a premium feel). */
.zc-home-hero__strip-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--zc-w94);
  transition: color 0.3s var(--zc-ease);
}
/* Divider hairline on the trailing edge of every item except the last —
   premium "magazine sidebar" rail. */
.zc-home-hero__strip-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 18%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.10) 82%,
    transparent 100%);
  pointer-events: none;
}
.zc-home-hero__strip-item:hover {
  color: var(--zc-white);
}

/* Outline-style icon mark — quiet at rest, fills with amber on hover.
   Only the icon transitions; the parent strip item stays flat (no
   box / glow / lift on the rectangle). */
.zc-home-hero__strip-ic {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(207, 138, 63, 0.55);
  color: var(--zc-amber-lt);
  font-size: 14px;
  transition: background 0.35s var(--zc-ease),
              color 0.3s var(--zc-ease),
              border-color 0.35s var(--zc-ease),
              transform 0.4s var(--zc-ease-spring);
}
.zc-home-hero__strip-item:hover .zc-home-hero__strip-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
  border-color: transparent;
  transform: rotate(-4deg);
}
.zc-home-hero__strip-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zc-home-hero__strip-label {
  font-family: var(--zc-f-heading);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-amber-lt);
  opacity: 0.85;
}
.zc-home-hero__strip-val {
  font-family: var(--zc-f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--zc-w94);
  letter-spacing: 0.05px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Strip stays 4-in-row at EVERY breakpoint — only text/icon shrink.
   Grid `gap: 0` since the per-item ::after hairline IS the divider. */
@media (max-width: 991px) {
  .zc-home-hero__strip { padding: 8px var(--zc-pad-x-mb); gap: 0; }
  .zc-home-hero__strip-item { padding: 8px 10px; gap: 8px; }
  .zc-home-hero__strip-ic { width: 30px; height: 30px; font-size: 12px; }
  .zc-home-hero__strip-label { font-size: 8.5px; letter-spacing: 1.2px; }
  .zc-home-hero__strip-val { font-size: 12px; }
}
@media (max-width: 600px) {
  .zc-home-hero__strip { padding: 6px var(--zc-pad-x-mb); gap: 0; }
  .zc-home-hero__strip-item {
    /* Icon-on-top, value-below tile layout. Stays 4-in-row. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    gap: 6px;
    min-height: 70px;
  }
  /* Move the hairline divider to a different range so it doesn't reach
     the tighter edges on the vertical tile layout. */
  .zc-home-hero__strip-item:not(:last-child)::after { top: 22%; bottom: 22%; }
  .zc-home-hero__strip-ic { width: 28px; height: 28px; font-size: 12px; }
  .zc-home-hero__strip-label { display: none; }
  /* CRITICAL FIX: allow the value to wrap to 2 lines so "Pradhan Nagar,
     Siliguri" / "care@zivahclinic.com" / "+91 92391 22520" don't overflow. */
  .zc-home-hero__strip-val {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    max-width: 100%;
  }
}
@media (max-width: 380px) {
  .zc-home-hero__strip { padding: 7px var(--zc-pad-x-mb); gap: 3px; }
  .zc-home-hero__strip-item { padding: 9px 4px; gap: 5px; min-height: 72px; }
  .zc-home-hero__strip-val { font-size: 9.5px; }
  .zc-home-hero__strip-ic  { width: 30px; height: 30px; font-size: 12px; }
}


/* ---- Mobile slide tweaks ---- */
@media (max-width: 768px) {
  /* Fixed 55vh — image visible at top, text anchored at bottom */
  .zc-home-hero__slide {
    height: 55vh;
    min-height: 420px;
    align-items: flex-end;            /* content sits at the bottom of the slide */
  }
  .zc-home-hero__overlay,
  .zc-home-hero__slide--right .zc-home-hero__overlay {
    /* Stronger bottom gradient so text on the lower 40% reads cleanly,
       upper 60% stays clearer so the image is actually visible. */
    background:
      linear-gradient(180deg,
        rgba(26, 18, 8, 0.05) 0%,
        rgba(26, 18, 8, 0.10) 35%,
        rgba(26, 18, 8, 0.55) 65%,
        rgba(26, 18, 8, 0.94) 100%);
  }
  .zc-home-hero__slide--right .zc-home-hero__inner { justify-content: flex-start; }
  .zc-home-hero__inner {
    align-items: flex-end;
    padding-bottom: 20px;             /* breathing room above the strip */
  }
  /* Shorter slide on mobile so the image — not the overlay — leads. */
  .zc-home-hero__slide { height: clamp(420px, 58vh, 560px); }
  .zc-home-hero__content { max-width: 100%; }
  .zc-home-hero__title   { font-size: clamp(22px, 5.6vw, 30px); margin-bottom: 8px; line-height: 1.08; }
  .zc-home-hero__tagline { font-size: 12.5px; margin-bottom: 4px; }
  .zc-home-hero__desc    { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
  .zc-home-hero__eyebrow { margin-bottom: 9px; font-size: 9.5px; padding: 4px 9px; }
  .zc-home-hero__btn     { padding: 9px 14px; font-size: 10.5px; letter-spacing: 0.6px; }
  .zc-home-hero__pagination {
    bottom: clamp(60px, 12vh, 96px);
    gap: 5px;
  }
  /* Smaller dots on mobile so the strip doesn't crowd the bottom of
     the slide and leaves more space for the image. */
  .zc-home-hero__pagination .swiper-pagination-bullet {
    width: 6px; height: 6px;
  }
  .zc-home-hero__pagination .swiper-pagination-bullet-active {
    width: 20px;
  }

  /* Smaller ring on mobile, parked top-corner so it stays visible above
     the bottom-anchored content. The wave-pulse animation still runs. */
  .zc-home-hero__ring { width: 280px; height: 280px; opacity: 0.85; }
  .zc-home-hero__slide--left  .zc-home-hero__ring { top: -120px; right: -110px; left: auto; }
  .zc-home-hero__slide--right .zc-home-hero__ring { top: -120px; left:  -110px; right: auto; }
}
@media (max-width: 480px) {
  .zc-home-hero__ring { width: 220px; height: 220px; opacity: 0.78; }
  .zc-home-hero__slide--left  .zc-home-hero__ring { top: -90px; right: -85px; }
  .zc-home-hero__slide--right .zc-home-hero__ring { top: -90px; left:  -85px; right: auto; }
}


/* ==========================================================================
   §2.1  HERO POLISH — premium smoothness
   --------------------------------------------------------------------------
   Layered AFTER §2 so it wins by source order. Refines:
     • Slower, softer Swiper fade (1.1s instead of 900ms)
     • Slow shimmer that drifts across the amber-gradient title accent
     • More refined text reveal — slight scale + blur clearing
     • Strip cards get a longer hover transition + soft inner highlight
     • Pulse rings get a subtle breathing on top of the ripple
   ========================================================================== */

/* Smoother fade between slides (Swiper sets opacity on .swiper-slide) */
.zc-home-hero__swiper .swiper-slide {
  transition: opacity 1.1s var(--zc-ease) !important;
}

/* Title-accent shimmer — soft moving sheen across the gradient text */
.zc-home-hero__title-accent {
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: zc-hero-shimmer 9s ease-in-out infinite;
}
@keyframes zc-hero-shimmer {
  0%,  100% { background-position:   0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* Refined content reveal — adds a tiny scale + blur clearing for that
   "premium camera focus" feel. Overrides the basic opacity+translate
   from §2 because it comes later in the cascade. */
.zc-home-hero__slide .zc-home-hero__eyebrow,
.zc-home-hero__slide .zc-home-hero__title,
.zc-home-hero__slide .zc-home-hero__tagline,
.zc-home-hero__slide .zc-home-hero__desc,
.zc-home-hero__slide .zc-home-hero__actions {
  transform: translateY(22px) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.9s var(--zc-ease-out),
    transform 1s var(--zc-ease-spring),
    filter 0.7s var(--zc-ease-out);
}
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__eyebrow,
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__title,
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__tagline,
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__desc,
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__actions {
  transform: none;
  filter: blur(0);
}

/* Slower Ken-Burns for a more cinematic feel */
.zc-home-hero__bg-img {
  transition: transform 12s var(--zc-ease-out) !important;
}
.zc-home-hero__slide.swiper-slide-active .zc-home-hero__bg-img {
  transform: scale(1.10) !important;
}

/* (Removed) Strip cards used to gain a soft amber box-shadow + inset
   highlight on hover. That treatment is gone — strip items now stay
   flat. Only the icon transitions on hover, defined in §2 above. */

/* Subtle "breathing" on the static ring itself (in addition to the pulse
   pseudo rings). Very slow + tiny so it never feels distracting. */
.zc-home-hero__ring {
  animation: zc-hero-ring-breathe 9s ease-in-out infinite;
}
@keyframes zc-hero-ring-breathe {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%      { transform: scale(1.02); opacity: 0.92; }
}

/* Eyebrow gets a soft shimmer too — same direction as the title accent */
.zc-home-hero__eyebrow {
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: zc-hero-shimmer 11s ease-in-out infinite;
}

/* Smoother nav arrow press feel */
.zc-home-hero__nav { transition:
  transform 0.5s var(--zc-ease-spring),
  background 0.4s var(--zc-ease),
  border-color 0.4s var(--zc-ease),
  color 0.4s var(--zc-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-hero__title-accent,
  .zc-home-hero__eyebrow,
  .zc-home-hero__ring { animation: none !important; }
  .zc-home-hero__bg-img { transition: none !important; transform: none !important; }
}


/* ==========================================================================
   §3  USP / WHY-US — MAGAZINE SPREAD WITH ANIMATED WAVES
   ========================================================================== */
.zc-home-usp {
  position: relative;
  min-height: 55vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 4vw, 56px) 0 clamp(36px, 4vw, 56px);
  background:
    radial-gradient(ellipse at 6% 12%, rgba(207, 138, 63, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 94% 88%, rgba(46, 75, 113, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, var(--zc-snow, #fdfbf6) 0%, var(--zc-off-white) 60%, var(--zc-pearl, #fdf8ee) 100%);
  border-top: 1px solid var(--zc-linen);
  overflow: clip;
}
/* === TOP-RIGHT CONSTELLATION ====================================
   Three concentric rings rotating at different speeds and directions,
   plus two orbiting amber dots and a pulsing core. More alive than a
   single rotating dashed ring; reads as a quiet "diagnostic compass". */
.zc-home-usp__constellation {
  position: absolute;
  top: -140px; right: -120px;
  width: 380px; height: 380px;
  pointer-events: none;
  z-index: 0;
}
.zc-home-usp__ring {
  position: absolute;
  border-radius: 50%;
  inset: 0;
}
.zc-home-usp__ring--1 {
  border: 1px dashed var(--zc-amber-a35);
  animation: zc-home-usp-spin 70s linear infinite;
}
.zc-home-usp__ring--2 {
  inset: 50px;
  border: 1px solid var(--zc-amber-a18);
  animation: zc-home-usp-spin 110s linear infinite reverse;
}
.zc-home-usp__ring--3 {
  inset: 100px;
  border: 1px dotted var(--zc-amber-a45);
  animation: zc-home-usp-spin 50s linear infinite;
}
/* Each orbit is a rotating wrapper that carries a dot anchored to its
   top edge — the visual result is a dot traveling around the centre. */
.zc-home-usp__orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.zc-home-usp__orbit--1 {
  inset: 0;
  animation: zc-home-usp-spin 14s linear infinite;
}
.zc-home-usp__orbit--2 {
  inset: 50px;
  animation: zc-home-usp-spin 9s linear infinite reverse;
}
.zc-home-usp__orbit-dot {
  position: absolute;
  top: -4px; left: calc(50% - 4px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 12px var(--zc-amber-a45);
}
.zc-home-usp__orbit--2 .zc-home-usp__orbit-dot {
  width: 6px; height: 6px; top: -3px; left: calc(50% - 3px);
  box-shadow: 0 0 8px var(--zc-amber-a35);
}
/* Pulsing center mark — small amber bullseye. */
.zc-home-usp__core {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 var(--zc-amber-a45);
  animation: zc-home-usp-pulse 3.4s ease-in-out infinite;
}

/* Mobile: scale the constellation down so it doesn't dominate the
   top-right corner. Inner rings and orbits scale proportionally. */
@media (max-width: 768px) {
  .zc-home-usp__constellation {
    top: -70px; right: -60px;
    width: 200px; height: 200px;
  }
  .zc-home-usp__ring--2  { inset: 26px; }
  .zc-home-usp__ring--3  { inset: 52px; }
  .zc-home-usp__orbit--2 { inset: 26px; }
  .zc-home-usp__orbit-dot { width: 6px; height: 6px; top: -3px; left: calc(50% - 3px); }
  .zc-home-usp__orbit--2 .zc-home-usp__orbit-dot { width: 5px; height: 5px; top: -2.5px; left: calc(50% - 2.5px); }
  .zc-home-usp__core { width: 7px; height: 7px; }
}
@media (max-width: 480px) {
  .zc-home-usp__constellation {
    top: -55px; right: -50px;
    width: 160px; height: 160px;
  }
  .zc-home-usp__ring--2  { inset: 22px; }
  .zc-home-usp__ring--3  { inset: 42px; }
  .zc-home-usp__orbit--2 { inset: 22px; }
}

@keyframes zc-home-usp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes zc-home-usp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--zc-amber-a45); opacity: 1; }
  50%      { box-shadow: 0 0 0 14px rgba(207, 138, 63, 0); opacity: 0.85; }
}

/* Quieter secondary shape on the bottom-left. */
.zc-home-usp__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.zc-home-usp__shape--2 {
  bottom: 80px; left: -140px;
  width: 260px; height: 260px;
  border: 1px solid rgba(46, 75, 113, 0.08);
  animation: zc-home-usp-spin 140s linear infinite reverse;
}

.zc-home-usp__inner {
  position: relative; z-index: 2;
  width: 100%; padding: 0 var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) { .zc-home-usp__inner { padding: 0 var(--zc-pad-x-mb); } }

/* === MASTHEAD (mirrors the Services section grammar) ============= */
.zc-home-usp__head {
  text-align: left;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.zc-home-usp__masthead {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 16px;
}
.zc-home-usp__masthead-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-usp__masthead-rule { height: 1px; }
.zc-home-usp__masthead-rule--l {
  width: clamp(20px, 3vw, 44px);
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-dk) 100%);
}
.zc-home-usp__masthead-rule--r {
  background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-a25) 70%, var(--zc-linen) 100%);
}
.zc-home-usp__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0; background: transparent; border: 0; border-radius: 0;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-usp__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
.zc-home-usp__masthead-count {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'Courier New', ui-monospace, monospace;
  white-space: nowrap;
}
.zc-home-usp__masthead-count-num {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--zc-amber-dk);
}
.zc-home-usp__masthead-count-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  opacity: 0.85;
}
@media (max-width: 640px) {
  .zc-home-usp__masthead {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .zc-home-usp__masthead-num { grid-row: 1; grid-column: 1; }
  .zc-home-usp__masthead-rule--l {
    grid-row: 1; grid-column: 2; width: auto;
    background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-a25) 50%, transparent 100%);
  }
  .zc-home-usp__masthead-count { grid-row: 1; grid-column: 3; }
  .zc-home-usp__eyebrow { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .zc-home-usp__masthead-rule--r { display: none; }
}

.zc-home-usp__title {
  margin: 0 0 12px;
  font-family: var(--zc-f-display);
  font-size: clamp(26px, 2.2vw + 14px, 44px);
  font-weight: 300;
  line-height: 1.08; letter-spacing: -1px;
  color: var(--zc-charcoal);
}
.zc-home-usp__title-accent {
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.zc-home-usp__sub {
  margin: 0;
  max-width: 64ch;
  font-family: var(--zc-f-body);
  font-size: clamp(13.5px, 0.25vw + 12px, 15.5px);
  line-height: 1.65;
  color: var(--zc-warm-dk);
}

/* === USP CARD GRID ============================================== */
.zc-home-usp__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
  margin-top: clamp(22px, 2.4vw, 32px);
}
@media (max-width: 1200px) { .zc-home-usp__grid { grid-template-columns: repeat(3, 1fr); } }
/* Mobile: horizontal scroll, 2 cards visible per viewport. The 5
   cards live in a single horizontal row that swipes left/right; an
   8px peek on the right hints there is more to scroll. Snaps card to
   card. Native momentum scrolling on touch devices. */
@media (max-width: 768px) {
  .zc-home-usp__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    padding: 4px 16px 14px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zc-home-usp__grid::-webkit-scrollbar { display: none; }
  .zc-home-usp__card {
    flex: 0 0 calc(50% - 7px);
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* Magazine column — no card chrome. Each item is just typography in a
   column, separated from its neighbour by a soft vertical hairline. */
.zc-home-usp__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 4px clamp(14px, 1.2vw, 22px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: zc-home-usp-rise 0.7s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
  animation-delay: var(--zc-usp-delay, 0s);
  transition: transform 0.5s var(--zc-ease-spring);
}
.zc-home-usp__card:first-child { padding-left: 0; }
.zc-home-usp__card:last-child  { padding-right: 0; }

/* Vertical column rule between items — magazine spread divider. */
.zc-home-usp__card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--zc-amber-a25) 14%,
    var(--zc-linen) 50%,
    var(--zc-amber-a25) 86%,
    transparent 100%);
}

@keyframes zc-home-usp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zc-home-usp__card:hover { transform: translateY(-3px); }
@media (max-width: 1200px) {
  .zc-home-usp__card:nth-child(3n)::after { display: none; }
}
/* Mobile horizontal-scroll layout — vertical hairline divider stays
   between cards inside the scroller; only the last card has no
   trailing divider. The dashed top-border treatment is dropped. */
@media (max-width: 768px) {
  .zc-home-usp__card { padding: 6px 12px; }
  .zc-home-usp__card::after { display: block; }
  .zc-home-usp__card:last-child::after { display: none; }
}

/* N°XX monospace marker top-left. */
.zc-home-usp__card-num {
  position: relative; z-index: 1;
  display: inline-block;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--zc-amber-dk);
  margin-bottom: 4px;
}
.zc-home-usp__card-num::before {
  content: 'N° ';
  opacity: 0.6;
}
.zc-home-usp__card-rule {
  position: relative; z-index: 1;
  display: block;
  width: 28px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
  margin-bottom: 16px;
  transition: width 0.5s var(--zc-ease-spring);
}
.zc-home-usp__card:hover .zc-home-usp__card-rule { width: 56px; }

/* Icon — outline-only circle so it doesn't read as another little chip
   sitting on top of an already-removed card. Fills amber on hover. */
.zc-home-usp__ic {
  position: relative; z-index: 1;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--zc-amber-a45);
  color: var(--zc-amber-dk);
  font-size: 18px;
  margin-bottom: 16px;
  transition: transform 0.5s var(--zc-ease-spring),
              background 0.4s var(--zc-ease),
              color 0.4s var(--zc-ease),
              border-color 0.4s var(--zc-ease),
              box-shadow 0.4s var(--zc-ease);
}
.zc-home-usp__ic-ring {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--zc-amber-a25);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s var(--zc-ease), transform 0.5s var(--zc-ease-spring);
}
.zc-home-usp__card:hover .zc-home-usp__ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: transparent;
  color: var(--zc-white);
  transform: scale(1.05) rotate(-6deg);
  box-shadow: 0 12px 24px -6px var(--zc-amber-a45);
}
.zc-home-usp__card:hover .zc-home-usp__ic-ring {
  opacity: 1; transform: scale(1);
}

.zc-home-usp__h {
  position: relative; z-index: 1;
  margin: 0 0 8px;
  font-family: var(--zc-f-display);
  font-size: clamp(15px, 0.4vw + 12px, 18px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.3px;
  color: var(--zc-charcoal);
  transition: color 0.3s var(--zc-ease);
}
.zc-home-usp__card:hover .zc-home-usp__h { color: var(--zc-amber-dk); }
.zc-home-usp__p {
  position: relative; z-index: 1;
  margin: 0;
  font-family: var(--zc-f-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--zc-warm-dk);
  flex: 1;
}

/* Bottom footer accent — hairline rule + amber dot. */
.zc-home-usp__card-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--zc-linen);
}
.zc-home-usp__card-foot-rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-a25), transparent);
}
.zc-home-usp__card-foot-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--zc-amber-a45);
  transition: background 0.3s var(--zc-ease), box-shadow 0.3s var(--zc-ease);
}
.zc-home-usp__card:hover .zc-home-usp__card-foot-dot {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  box-shadow: 0 0 0 3px var(--zc-amber-a18);
}

/* === HORIZONTAL TICKER — INLINE, NO BOX =========================
   Reads as a single ruled line of magazine ticker text. Hairlines
   anchor the strip on either side; tracked monospace tag opens it
   and a list of stats with amber-dot separators follows. */
.zc-home-usp__ticker {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(22px, 2.4vw, 32px);
  padding: clamp(14px, 1.4vw, 20px) 0;
  z-index: 1; position: relative;
}
.zc-home-usp__ticker-rule {
  flex: 1; min-width: 24px; height: 1px;
}
.zc-home-usp__ticker-rule--l {
  background: linear-gradient(90deg, transparent 0%, var(--zc-linen) 30%, var(--zc-amber-a45) 100%);
}
.zc-home-usp__ticker-rule--r {
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-linen) 70%, transparent 100%);
}
.zc-home-usp__ticker-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-usp__ticker-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
/* Amber dot separator between stats. */
.zc-home-usp__ticker-sep {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--zc-amber-a45);
  flex-shrink: 0;
}
.zc-home-usp__stat {
  display: inline-flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.zc-home-usp__stat-num {
  font-family: var(--zc-f-display);
  font-size: clamp(20px, 1vw + 14px, 28px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.zc-home-usp__stat-num sup {
  font-size: 0.55em;
  font-weight: 700;
  top: -0.5em;
  margin-left: 1px;
}
.zc-home-usp__stat-label {
  font-family: var(--zc-f-heading);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  opacity: 0.9;
}
/* The rupee stat — accent it slightly stronger since it's a brand
   trust signal for Indian patients (zero hidden fees, EMI ready). */
.zc-home-usp__stat--rupee .zc-home-usp__stat-num {
  font-weight: 600;
}

@media (max-width: 768px) {
  .zc-home-usp__ticker { gap: 10px; justify-content: center; }
  .zc-home-usp__ticker-rule { flex-basis: 100%; min-width: 0; }
  .zc-home-usp__ticker-rule--l,
  .zc-home-usp__ticker-rule--r {
    background: linear-gradient(90deg, transparent 0%, var(--zc-amber-a45) 50%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-usp__ring--1,
  .zc-home-usp__ring--2,
  .zc-home-usp__ring--3,
  .zc-home-usp__orbit--1,
  .zc-home-usp__orbit--2,
  .zc-home-usp__core,
  .zc-home-usp__shape--2 { animation: none; }
}


/* ==========================================================================
   §4  DOCTORS AVAILABLE  (.zc-home-doc)
   Magazine spread — left-anchored masthead, full-width title, six doctor
   columns separated by vertical hairlines. No card chrome on the doctors;
   the photo IS the card.
   ========================================================================== */
.zc-home-doc {
  position: relative;
  padding: clamp(40px, 4vw, 64px) 0 clamp(44px, 4.4vw, 70px);
  background:
    radial-gradient(ellipse at 92% 0%, rgba(207, 138, 63, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--zc-pearl, #fdf8ee) 0%, var(--zc-snow, #fdfbf6) 100%);
  border-top: 1px solid var(--zc-linen);
  overflow: clip;
}
.zc-home-doc__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) { .zc-home-doc__inner { padding: 0 var(--zc-pad-x-mb); } }

/* === MASTHEAD (same grammar as §3 USP / §7 Services) =========== */
.zc-home-doc__head {
  text-align: left;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}
.zc-home-doc__masthead {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 16px;
}
.zc-home-doc__masthead-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-doc__masthead-rule { height: 1px; }
.zc-home-doc__masthead-rule--l {
  width: clamp(20px, 3vw, 44px);
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-dk) 100%);
}
.zc-home-doc__masthead-rule--r {
  background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-a25) 70%, var(--zc-linen) 100%);
}
.zc-home-doc__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-doc__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
.zc-home-doc__masthead-count {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'Courier New', ui-monospace, monospace;
  white-space: nowrap;
}
.zc-home-doc__masthead-count-num {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--zc-amber-dk);
}
.zc-home-doc__masthead-count-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  opacity: 0.85;
}
@media (max-width: 640px) {
  .zc-home-doc__masthead {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .zc-home-doc__masthead-num { grid-row: 1; grid-column: 1; }
  .zc-home-doc__masthead-rule--l {
    grid-row: 1; grid-column: 2; width: auto;
    background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-a25) 50%, transparent 100%);
  }
  .zc-home-doc__masthead-count { grid-row: 1; grid-column: 3; }
  .zc-home-doc__eyebrow { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .zc-home-doc__masthead-rule--r { display: none; }
}

.zc-home-doc__title {
  margin: 0 0 10px;
  font-family: var(--zc-f-display);
  font-size: clamp(24px, 2vw + 13px, 40px);
  font-weight: 300;
  line-height: 1.08; letter-spacing: -0.9px;
  color: var(--zc-charcoal);
}
.zc-home-doc__title-accent {
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.zc-home-doc__sub {
  margin: 0;
  max-width: 64ch;
  font-family: var(--zc-f-body);
  font-size: clamp(13px, 0.25vw + 12px, 14.5px);
  line-height: 1.65;
  color: var(--zc-warm-dk);
}

/* === DOCTOR CARDS ROW ========================================== */
.zc-home-doc__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: clamp(22px, 2.4vw, 32px);
}
@media (max-width: 1200px) { .zc-home-doc__grid { grid-template-columns: repeat(3, 1fr); } }
/* Mobile: horizontal scroll, ~1.75 doctor cards visible per viewport
   so the next card peeks in on the right as a swipe hint. Snaps card
   to card; scrollbar hidden; native momentum. */
@media (max-width: 768px) {
  .zc-home-doc__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    padding: 4px 16px 14px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zc-home-doc__grid::-webkit-scrollbar { display: none; }
  .zc-home-doc__card {
    flex: 0 0 calc((100% - 14px) / 1.75);
    min-width: 0;
    scroll-snap-align: start;
  }
}

.zc-home-doc__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 8px clamp(12px, 1.2vw, 20px) 12px;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: inherit;
  animation: zc-home-doc-rise 0.7s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
  animation-delay: var(--zc-doc-delay, 0s);
  transition: transform 0.4s var(--zc-ease-spring);
}
.zc-home-doc__card:first-child { padding-left: 0; }
.zc-home-doc__card:last-child  { padding-right: 0; }
.zc-home-doc__card:hover { transform: translateY(-3px); }

@keyframes zc-home-doc-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Vertical column rule between cards (magazine separator). */
.zc-home-doc__card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--zc-amber-a25) 14%,
    var(--zc-linen) 50%,
    var(--zc-amber-a25) 86%,
    transparent 100%);
}
@media (max-width: 1200px) {
  .zc-home-doc__card:nth-child(3n)::after { display: none; }
}
/* Mobile horizontal-scroll layout — vertical hairline divider stays
   between cards inside the scroller; only the last card has no
   trailing divider. The dashed top-border treatment is dropped. */
@media (max-width: 768px) {
  .zc-home-doc__card { padding: 6px 12px 12px; }
  .zc-home-doc__card::after { display: block; }
  .zc-home-doc__card:last-child::after { display: none; }
}

.zc-home-doc__card-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--zc-amber-dk);
  opacity: 0.85;
  margin-bottom: 4px;
}
.zc-home-doc__card-rule {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
  margin-bottom: 14px;
  transition: width 0.5s var(--zc-ease-spring);
}
.zc-home-doc__card:hover .zc-home-doc__card-rule { width: 46px; }

.zc-home-doc__photo {
  position: relative;
  margin: 0 0 14px;
  aspect-ratio: 1 / 1.15;
  overflow: hidden;
  background: var(--zc-linen);
  contain: layout paint;
}
.zc-home-doc__photo-img {
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0;
  transition: opacity 0.55s var(--zc-ease),
              transform 0.8s var(--zc-ease),
              filter 0.6s var(--zc-ease);
  filter: saturate(0.96);
}
.zc-home-doc__photo-img[src]:not([src=""]),
.zc-home-doc__photo-img.is-loaded { opacity: 1; }
.zc-home-doc__card:hover .zc-home-doc__photo-img {
  transform: scale(1.05);
  filter: saturate(1.05);
}
/* Bottom amber gradient wash on the photo so the available pulse-dot
   sits over a slightly tinted base, not on flat skin tone. */
.zc-home-doc__photo-wash {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(207, 138, 63, 0.18) 100%);
  pointer-events: none;
}

.zc-home-doc__name {
  margin: 0 0 4px;
  font-family: var(--zc-f-display);
  font-size: clamp(14px, 0.35vw + 12px, 17px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--zc-charcoal);
  transition: color 0.3s var(--zc-ease);
}
.zc-home-doc__card:hover .zc-home-doc__name { color: var(--zc-amber-dk); }

.zc-home-doc__role {
  margin: 0 0 12px;
  font-family: var(--zc-f-body);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--zc-warm-dk);
  opacity: 0.9;
  min-height: 2lh;
}

/* "Available this week" with a pulsing amber dot. */
.zc-home-doc__avail {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
  font-family: var(--zc-f-heading);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
}
.zc-home-doc__avail-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 0 var(--zc-amber-a45);
  animation: zc-home-doc-pulse 2.4s ease-in-out infinite;
}
@keyframes zc-home-doc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--zc-amber-a45); transform: scale(1); }
  50%      { box-shadow: 0 0 0 7px rgba(207, 138, 63, 0); transform: scale(1.1); }
}

/* "Book consultation" line with arrow — magazine read-more style. */
.zc-home-doc__book {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding-bottom: 4px;
  font-family: var(--zc-f-heading);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  transition: color 0.3s var(--zc-ease), gap 0.3s var(--zc-ease);
}
.zc-home-doc__book::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 1.5px;
  border-radius: 2px;
  background: var(--zc-amber-dk);
  transition: width 0.4s var(--zc-ease-spring);
}
.zc-home-doc__book i {
  font-size: 12px;
  transition: transform 0.4s var(--zc-ease-spring);
}
.zc-home-doc__card:hover .zc-home-doc__book {
  color: var(--zc-amber-dk);
  gap: 11px;
}
.zc-home-doc__card:hover .zc-home-doc__book::after {
  width: 52px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
}
.zc-home-doc__card:hover .zc-home-doc__book i {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-doc__avail-dot { animation: none; }
}


/* ==========================================================================
   §5  PATIENT JOURNEY  (.zc-home-journey)
   Editorial spread on cream paper: LEFT — dynamic hero image (swaps on
   right-side step hover). RIGHT — 4 numbered text entries, the active
   one drives the hero. Premium, magazine-spread quiet, no card chrome.
   ========================================================================== */
.zc-home-journey {
  position: relative;
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Bottom padding reduced to 20% of original (was 40-62px). */
  padding: clamp(36px, 3.8vw, 58px) 0 clamp(8px, 0.8vw, 12px);
  background:
    radial-gradient(ellipse at 96% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(207, 138, 63, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--zc-pearl, #fdf8ee) 0%, var(--zc-snow, #fdfbf6) 60%, var(--zc-pearl, #fdf8ee) 100%);
  border-top: 1px solid var(--zc-linen);
  overflow: clip;
}
.zc-home-journey__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.zc-home-journey__shape--1 {
  top: -100px; right: -80px;
  width: 280px; height: 280px;
  border: 1px dashed var(--zc-amber-a25);
  animation: zc-home-journey-spin 110s linear infinite;
}
@keyframes zc-home-journey-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.zc-home-journey__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) { .zc-home-journey__inner { padding: 0 var(--zc-pad-x-mb); } }

/* === MASTHEAD ============================================================ */
.zc-home-journey__head {
  text-align: left;
  margin-bottom: clamp(22px, 2.4vw, 30px);
}
.zc-home-journey__masthead {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 14px;
}
.zc-home-journey__masthead-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-journey__masthead-rule { height: 1px; }
.zc-home-journey__masthead-rule--l {
  width: clamp(20px, 3vw, 44px);
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-dk) 100%);
}
.zc-home-journey__masthead-rule--r {
  background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-a25) 70%, var(--zc-linen) 100%);
}
.zc-home-journey__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-journey__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
.zc-home-journey__masthead-count {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'Courier New', ui-monospace, monospace;
  white-space: nowrap;
}
.zc-home-journey__masthead-count-num {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--zc-amber-dk);
}
.zc-home-journey__masthead-count-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  opacity: 0.85;
}
@media (max-width: 640px) {
  .zc-home-journey__masthead {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .zc-home-journey__masthead-num { grid-row: 1; grid-column: 1; }
  .zc-home-journey__masthead-rule--l {
    grid-row: 1; grid-column: 2; width: auto;
    background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-a25) 50%, transparent 100%);
  }
  .zc-home-journey__masthead-count { grid-row: 1; grid-column: 3; }
  .zc-home-journey__eyebrow { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .zc-home-journey__masthead-rule--r { display: none; }
}

.zc-home-journey__title {
  margin: 0;
  font-family: var(--zc-f-display);
  font-size: clamp(26px, 2.2vw + 14px, 44px);
  font-weight: 300;
  line-height: 1.08; letter-spacing: -0.9px;
  color: var(--zc-charcoal);
}
.zc-home-journey__title-accent {
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* === SPREAD: HERO LEFT + 4 STEPS RIGHT ================================== */
.zc-home-journey__spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 3vw, 56px);
  margin-top: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
@media (max-width: 991px) {
  .zc-home-journey__spread { grid-template-columns: 1fr; gap: 28px; }
}

@keyframes zc-home-journey-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === HERO IMAGE (LEFT) ================================================== */
.zc-home-journey__hero {
  position: relative;
  margin: 0;
  min-height: 420px;
  overflow: hidden;
  background: var(--zc-linen);
  contain: layout paint;
  animation: zc-home-journey-rise 0.8s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}
/* Mobile: let aspect-ratio drive the hero height instead of a forced
   340px min-height. The 4:3 ratio gives a landscape crop wide enough
   for the photo subject to stay in frame on narrow phones. */
@media (max-width: 991px) {
  .zc-home-journey__hero {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 540px) {
  .zc-home-journey__hero { aspect-ratio: 5 / 4; }
}
.zc-home-journey__hero-stage {
  position: absolute; inset: 0;
  display: block;
}
.zc-home-journey__hero-img {
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.7s var(--zc-ease),
              transform 1.4s var(--zc-ease);
  transform: scale(1.04);
  filter: saturate(1.0);
}
.zc-home-journey__hero-img.is-on[src]:not([src=""]),
.zc-home-journey__hero-img.is-on.is-loaded {
  opacity: 1;
  transform: scale(1);
}
/* Amber L-corner brackets — feature-plate signature. */
.zc-home-journey__hero-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid var(--zc-amber-dk);
  pointer-events: none;
  z-index: 3;
}
.zc-home-journey__hero-corner--tl { top: 12px; left: 12px;     border-right: 0; border-bottom: 0; }
.zc-home-journey__hero-corner--tr { top: 12px; right: 12px;    border-left: 0;  border-bottom: 0; }
.zc-home-journey__hero-corner--bl { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; }
.zc-home-journey__hero-corner--br { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; }
/* Caption sits in the bottom-left of the hero. Text content updates
   from the JS hover-swap handler. */
.zc-home-journey__hero-cap {
  position: absolute;
  left: clamp(20px, 2vw, 30px);
  right: clamp(20px, 2vw, 30px);
  bottom: clamp(20px, 2vw, 30px);
  z-index: 4;
  color: var(--zc-white);
}
.zc-home-journey__hero-cap-mark {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--zc-amber-lt);
  border: 1px solid rgba(207, 138, 63, 0.55);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.zc-home-journey__hero-cap-text {
  display: block;
  font-family: var(--zc-f-display);
  font-size: clamp(18px, 0.7vw + 13px, 26px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.4px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}
/* Mobile: shorter caption + tighter padding so the image stays the
   focal point and overlay text doesn't crowd it. */
@media (max-width: 540px) {
  .zc-home-journey__hero-cap {
    left: 14px; right: 14px; bottom: 14px;
  }
  .zc-home-journey__hero-cap-mark {
    margin-bottom: 6px;
    padding: 3px 9px;
    font-size: 9px;
    letter-spacing: 1.4px;
  }
  .zc-home-journey__hero-cap-text {
    font-size: 14.5px;
    line-height: 1.2;
  }
  .zc-home-journey__hero-corner { width: 16px; height: 16px; }
  .zc-home-journey__hero-corner--tl { top: 8px; left: 8px; }
  .zc-home-journey__hero-corner--tr { top: 8px; right: 8px; }
  .zc-home-journey__hero-corner--bl { bottom: 8px; left: 8px; }
  .zc-home-journey__hero-corner--br { bottom: 8px; right: 8px; }
}

/* === RIGHT — 4 NUMBERED STEPS ========================================== */
.zc-home-journey__steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
/* Mobile: turn the timeline into a horizontal scroller. 1.2 cards
   visible per viewport (the next card peeks 20% in as a swipe hint).
   No gap, no card chrome — just typography separated by a thin amber
   hairline divider on the trailing edge of every card except the
   last. The JS handler observes scroll and activates whichever card
   sits at the centre of the scroller, swapping the hero image to
   match. */
@media (max-width: 991px) {
  .zc-home-journey__steps {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    padding: 4px 0 10px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zc-home-journey__steps::-webkit-scrollbar { display: none; }
  /* Higher-specificity selectors (.zc-home-journey__steps > .step)
     so these mobile rules win over the desktop .step base rules
     declared further down in source order. */
  .zc-home-journey__steps > .zc-home-journey__step {
    position: relative;
    flex: 0 0 calc(100% / 1.2);
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    /* Body (text) on the left, big numeral floating top-right.
       Right padding gives a clean gap between the numeral and the
       trailing hairline divider. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: 14px;
    padding: 14px 22px 14px 16px;
    align-items: start;
    scroll-snap-align: start;
    transition: opacity 0.35s var(--zc-ease);
    border-top: 0;
  }
  /* Put the number in the right column and the body in the left,
     overriding the desktop two-column order (num | body). */
  .zc-home-journey__steps > .zc-home-journey__step .zc-home-journey__step-num {
    grid-column: 2; grid-row: 1;
    align-self: start;
    margin-top: 2px;
  }
  .zc-home-journey__steps > .zc-home-journey__step .zc-home-journey__step-rule { display: none; }
  .zc-home-journey__steps > .zc-home-journey__step .zc-home-journey__step-body {
    grid-column: 1; grid-row: 1;
    min-width: 0;
    padding-top: 0;
  }
  /* Thin vertical hairline divider between cards. */
  .zc-home-journey__steps > .zc-home-journey__step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 14%; bottom: 14%;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      var(--zc-amber-a25) 14%,
      var(--zc-linen) 50%,
      var(--zc-amber-a25) 86%,
      transparent 100%);
    pointer-events: none;
  }
  /* Inactive cards dim slightly so the centred (active) one leads. */
  .zc-home-journey__steps > .zc-home-journey__step { opacity: 0.55; }
  .zc-home-journey__steps > .zc-home-journey__step.is-active { opacity: 1; }
  /* Desktop left-rail marker has no place in the scroller. */
  .zc-home-journey__steps > .zc-home-journey__step .zc-home-journey__step-marker { display: none; }
  /* Show the full body text on mobile — desktop caps it at 3.6em
     so the hairline rule stays even; that cap clips real content
     here, where each card stands alone. */
  .zc-home-journey__steps > .zc-home-journey__step .zc-home-journey__step-text {
    max-height: none;
    overflow: visible;
    opacity: 1;
  }
}
.zc-home-journey__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: clamp(14px, 1.4vw, 22px);
  align-items: flex-start;
  padding: clamp(14px, 1.4vw, 18px) clamp(14px, 1.4vw, 22px) clamp(14px, 1.4vw, 18px) 0;
  border-top: 1px solid var(--zc-linen);
  cursor: pointer;
  opacity: 0;
  outline: none;
  transition: padding 0.4s var(--zc-ease), color 0.3s var(--zc-ease);
  animation: zc-home-journey-rise 0.7s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
  animation-delay: var(--zc-jrn-delay, 0s);
}
.zc-home-journey__step:last-child { border-bottom: 1px solid var(--zc-linen); }

/* Amber left rail that slides in on active. */
.zc-home-journey__step-marker {
  position: absolute;
  left: -2px; top: 50%;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--zc-amber-lt), var(--zc-amber-dk));
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 0.45s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.zc-home-journey__step-num {
  font-family: var(--zc-f-display);
  font-size: clamp(34px, 2vw + 16px, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--zc-amber-a45);
  transition: color 0.35s var(--zc-ease);
}
.zc-home-journey__step-rule {
  display: none; /* reserved for hover, kept as a no-op */
}
.zc-home-journey__step-body { min-width: 0; padding-top: 6px; }
.zc-home-journey__step-meta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  opacity: 0.85;
}
.zc-home-journey__step-meta i { font-size: 12px; }
.zc-home-journey__step-title {
  margin: 0 0 6px;
  font-family: var(--zc-f-display);
  font-size: clamp(17px, 0.55vw + 13px, 22px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.3px;
  color: var(--zc-charcoal);
  transition: color 0.3s var(--zc-ease);
}
.zc-home-journey__step-text {
  margin: 0;
  font-family: var(--zc-f-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--zc-warm-dk);
  max-height: 3.6em;
  overflow: hidden;
  opacity: 0.78;
  transition: max-height 0.4s var(--zc-ease), opacity 0.3s var(--zc-ease);
}

/* Hover / active state on a step. Amber rail grows in, number turns
   solid amber, title shifts to amber-dk, a faint cream blush bleeds
   from the left edge. */
.zc-home-journey__step:hover,
.zc-home-journey__step.is-active {
  padding-left: clamp(14px, 1.4vw, 22px);
  background: linear-gradient(90deg, var(--zc-amber-a08) 0%, transparent 75%);
}
.zc-home-journey__step:hover .zc-home-journey__step-marker,
.zc-home-journey__step.is-active .zc-home-journey__step-marker { height: 64%; }
.zc-home-journey__step:hover .zc-home-journey__step-num,
.zc-home-journey__step.is-active .zc-home-journey__step-num {
  color: var(--zc-amber-dk);
}
.zc-home-journey__step:hover .zc-home-journey__step-title,
.zc-home-journey__step.is-active .zc-home-journey__step-title {
  color: var(--zc-amber-dk);
}
.zc-home-journey__step.is-active .zc-home-journey__step-text { opacity: 1; }

@media (max-width: 540px) {
  .zc-home-journey__step { grid-template-columns: 44px 1fr; column-gap: 14px; }
  .zc-home-journey__step-num { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-journey__shape--1,
  .zc-home-journey__hero,
  .zc-home-journey__step,
  .zc-home-journey__step-marker { animation: none; opacity: 1; }
}


/* ==========================================================================
   §6  NUMBERS SCOREBOARD  (.zc-home-stats)
   Stand-alone premium scoreboard. Slightly warmer cream than the
   journey above so the section feels separate. Editorial layout: a
   single ruled masthead opens it, then 4 cells in a row separated by
   amber-fading hairlines. Display-serif big numbers, monospace slot
   labels, no card chrome.
   ========================================================================== */
.zc-home-stats {
  position: relative;
  padding: clamp(36px, 3.6vw, 58px) 0 clamp(42px, 4vw, 64px);
  background:
    radial-gradient(ellipse at 4% 50%, rgba(207, 138, 63, 0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 96% 50%, rgba(207, 138, 63, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #fbf3e3 0%, #fdf8ee 100%);
  border-top: 1px solid var(--zc-amber-a18);
  border-bottom: 1px solid var(--zc-amber-a18);
  overflow: clip;
}
/* Foil hairlines just inside the top and bottom borders — magazine
   "premium feature spread" cue. */
.zc-home-stats::before,
.zc-home-stats::after {
  content: '';
  position: absolute;
  left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zc-amber-a45), var(--zc-amber-dk), var(--zc-amber-a45), transparent);
  pointer-events: none;
  opacity: 0.7;
}
.zc-home-stats::before { top: 5px; }
.zc-home-stats::after  { bottom: 5px; }

.zc-home-stats__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) { .zc-home-stats__inner { padding: 0 var(--zc-pad-x-mb); } }

/* === MASTHEAD ============================================================ */
.zc-home-stats__masthead {
  display: flex; align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin-bottom: clamp(22px, 2.4vw, 32px);
}
.zc-home-stats__tag,
.zc-home-stats__mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-stats__mark { color: var(--zc-warm-dk); opacity: 0.85; }
.zc-home-stats__tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
.zc-home-stats__rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-a25) 60%, var(--zc-linen) 100%);
}

/* === STAT STRIP ========================================================= */
.zc-home-stats__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: end;
}
/* Mobile: horizontal scroller — 2.2 stat cells visible per viewport,
   next cell peeks 20% in as a swipe hint. Same magazine-rail grammar
   as the USP / doctor scrollers above. */
@media (max-width: 768px) {
  .zc-home-stats__strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    grid-template-columns: none;
    gap: 0;
    align-items: stretch;
    padding: 4px 0 12px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zc-home-stats__strip::-webkit-scrollbar { display: none; }
}

.zc-home-stats__cell {
  position: relative;
  display: flex; flex-direction: column;
  padding: 6px clamp(18px, 1.8vw, 30px);
  opacity: 0;
  animation: zc-home-stats-rise 0.7s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
  animation-delay: var(--zc-stat-delay, 0s);
}
.zc-home-stats__cell:first-child { padding-left: 0; }
.zc-home-stats__cell:last-child  { padding-right: 0; }
.zc-home-stats__cell:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--zc-amber-a45) 14%,
    var(--zc-linen) 50%,
    var(--zc-amber-a45) 86%,
    transparent 100%);
}
/* Mobile: each stat cell sized to 1/2.2 of the viewport so 2 cells
   sit fully visible and the 3rd peeks 20% in. Specificity-boosted
   selectors (.strip > .cell) so these mobile rules win against the
   desktop base rules declared earlier. */
@media (max-width: 768px) {
  .zc-home-stats__strip > .zc-home-stats__cell {
    flex: 0 0 calc(100% / 2.2);
    min-width: 0;
    padding: 6px 18px;
    scroll-snap-align: start;
    border-top: 0 !important;
  }
  .zc-home-stats__strip > .zc-home-stats__cell:first-child { padding-left: 0; }
  .zc-home-stats__strip > .zc-home-stats__cell:last-child  { padding-right: 0; }
  /* Hairline divider stays on every cell except the last. */
  .zc-home-stats__strip > .zc-home-stats__cell:not(:last-child)::after { display: block; }
  .zc-home-stats__strip > .zc-home-stats__cell:last-child::after       { display: none; }
}
@keyframes zc-home-stats-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zc-home-stats__cell-idx {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--zc-amber-dk);
  opacity: 0.7;
  margin-bottom: 8px;
}
.zc-home-stats__cell-num {
  font-family: var(--zc-f-display);
  font-size: clamp(34px, 2.6vw + 14px, 60px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1.8px;
  color: var(--zc-charcoal);
  margin-bottom: 14px;
  transition: transform 0.4s var(--zc-ease);
}
.zc-home-stats__cell-num .zc-count {
  background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 55%, var(--zc-amber-lt) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Suffix sibling — "+", "%", "+ Yrs" raised next to the big number. */
.zc-home-stats__cell-suffix {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--zc-f-display);
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.5px;
  vertical-align: 0.85em;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
}
.zc-home-stats__cell:hover .zc-home-stats__cell-num { transform: translateY(-2px); }
.zc-home-stats__cell-rule {
  display: block;
  width: 32px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
  margin-bottom: 12px;
  transition: width 0.5s var(--zc-ease-spring);
  box-shadow: 0 1px 6px rgba(207, 138, 63, 0.30);
}
.zc-home-stats__cell:hover .zc-home-stats__cell-rule { width: 56px; }
.zc-home-stats__cell-label {
  font-family: var(--zc-f-display);
  font-size: clamp(13px, 0.3vw + 11px, 16px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--zc-charcoal);
  margin-bottom: 8px;
}
.zc-home-stats__cell-foot {
  display: flex; align-items: center; gap: 9px;
}
.zc-home-stats__cell-ic {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--zc-amber-a45);
  color: var(--zc-amber-dk);
  font-size: 12px;
  transition: background 0.35s var(--zc-ease), color 0.35s var(--zc-ease);
}
.zc-home-stats__cell:hover .zc-home-stats__cell-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
  border-color: transparent;
}
.zc-home-stats__cell-sub {
  font-family: var(--zc-f-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--zc-warm-dk);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-stats__cell { animation: none; opacity: 1; }
}


/* ==========================================================================
   §7  SERVICES EXPLORER  (.zc-home-svc)
       Layout:
         · TOP    — single-row category scroller (left/right arrow nav).
         · LEFT   — vertical sub-category index (magazine TOC style with
                    amber rail on the active row).
         · RIGHT  — Swiper of WIDE 16:9 service cards, one Swiper per
                    sub-category. Active sub's swiper is visible.
   ========================================================================== */

/* — Belt-and-braces overflow guard —
   On desktop, the legacy theme's #wrapper allows horizontal overflow,
   which means anything that briefly renders wider than the viewport
   (Swiper slides BEFORE JS init is the usual culprit — each slide is
   `width: 100%` with `flex-shrink: 0`, so N slides flex out wider than
   the swiper for a moment) creates a visible "white strip" on the
   right edge until layout settles. core.css already applies
   `#wrapper { overflow-x: clip }` on mobile; we extend it to every
   viewport on the home page so nothing flashes past the viewport
   during initial paint. `clip` (vs `hidden`) does NOT create a scroll
   container, so position: sticky descendants keep working. */
body #wrapper { overflow-x: clip; }

.zc-home-svc {
  position: relative;
  /* Top padding reduced to 40% of the previous value, bottom to 60% —
     less air before the section, more after. */
  padding: clamp(16px, 1.84vw, 29px) 0 clamp(24px, 2.76vw, 43px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(207, 138, 63, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, var(--zc-snow, #fdfbf6) 0%, var(--zc-off-white) 100%);
  border-top: 1px solid var(--zc-linen);
  /* `clip` is preferred over `hidden` — same visual clip, no new
     scroll container, no surprise for `position: sticky` descendants. */
  overflow: clip;
  width: 100%;
  max-width: 100%;
  contain: layout paint;
  box-sizing: border-box;
}
.zc-home-svc__inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 100%;
  padding: 0 var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .zc-home-svc__inner { padding: 0 var(--zc-pad-x-mb); }
}

/* === SECTION HEAD — MAGAZINE MASTHEAD ============================= */
.zc-home-svc__head {
  text-align: left;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

/* Top row of the head — section number, short rule, eyebrow, long
   stretching rule, count chip. Reads as a left-anchored masthead
   that spans the full width of the section. */
.zc-home-svc__masthead {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 18px;
}
.zc-home-svc__masthead-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-svc__masthead-rule {
  height: 1px;
}
/* Short rule connecting the section number to the eyebrow. */
.zc-home-svc__masthead-rule--l {
  width: clamp(20px, 3vw, 44px);
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-dk) 100%);
}
/* Long rule stretching across to the count chip. */
.zc-home-svc__masthead-rule--r {
  background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-a25) 70%, var(--zc-linen) 100%);
}
.zc-home-svc__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-svc__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
.zc-home-svc__masthead-count {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'Courier New', ui-monospace, monospace;
  color: var(--zc-charcoal);
  white-space: nowrap;
}
.zc-home-svc__masthead-count-num {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--zc-amber-dk);
}
.zc-home-svc__masthead-count-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  opacity: 0.85;
}

@media (max-width: 640px) {
  .zc-home-svc__masthead {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .zc-home-svc__masthead-num { grid-row: 1; grid-column: 1; }
  .zc-home-svc__masthead-rule--l {
    grid-row: 1; grid-column: 2;
    width: auto;
    background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-a25) 50%, transparent 100%);
  }
  .zc-home-svc__masthead-count { grid-row: 1; grid-column: 3; }
  .zc-home-svc__eyebrow { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .zc-home-svc__masthead-rule--r { display: none; }
}

.zc-home-svc__title {
  margin: 0 0 14px;
  font-family: var(--zc-f-display);
  font-size: clamp(26px, 2.2vw + 14px, 44px);
  font-weight: 300;
  line-height: 1.08; letter-spacing: -1px;
  color: var(--zc-charcoal);
}
.zc-home-svc__title-accent {
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.zc-home-svc__sub {
  margin: 0;
  font-family: var(--zc-f-body);
  font-size: clamp(13.5px, 0.25vw + 12px, 15.5px);
  line-height: 1.65;
  color: var(--zc-warm-dk);
}

/* Three-dot ornament below the head copy — small print decoration to
   close the masthead block, mirroring the rules-flanking-text grammar
   from the top row. */
.zc-home-svc__head-ornament {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.zc-home-svc__head-ornament span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--zc-amber-a45);
}
.zc-home-svc__head-ornament span:nth-child(2) {
  width: 6px; height: 6px;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}


/* ----------------------------------------------------------------------------
   §7.1  CATEGORY SCROLLER — single horizontal row with overlay arrow nav.
         Same grammar as the departments page: arrows are absolutely
         positioned inside the rail and only appear when JS toggles
         .can-prev / .can-next, so there's no permanent side gutter when
         the row already fits.
   ---------------------------------------------------------------------------- */
.zc-home-svc__catbar {
  position: relative;
  display: flex; align-items: center;
  min-width: 0;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.zc-home-svc__catbar::before,
.zc-home-svc__catbar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zc-home-svc__catbar::before {
  left: 0;
  background: linear-gradient(90deg, var(--zc-pearl, rgba(255, 252, 245, 0.95)) 0%, transparent 100%);
}
.zc-home-svc__catbar::after {
  right: 0;
  background: linear-gradient(270deg, var(--zc-pearl, rgba(255, 252, 245, 0.95)) 0%, transparent 100%);
}
/* Edge fades + arrows only appear while hovering the rail (or while a
   tab inside the rail has keyboard focus), and only on the side that
   actually has more content to scroll to. When the user is not over the
   rail, the chips read as a clean magazine row without floating arrows. */
.zc-home-svc__catbar.can-prev:hover::before,
.zc-home-svc__catbar.can-prev:focus-within::before { opacity: 1; }
.zc-home-svc__catbar.can-next:hover::after,
.zc-home-svc__catbar.can-next:focus-within::after { opacity: 1; }

.zc-home-svc__catbar-scroll {
  flex: 1; min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 2px;
  transition: padding 0.3s ease;
}
.zc-home-svc__catbar.can-prev:hover .zc-home-svc__catbar-scroll,
.zc-home-svc__catbar.can-prev:focus-within .zc-home-svc__catbar-scroll { padding-left: 48px; }
.zc-home-svc__catbar.can-next:hover .zc-home-svc__catbar-scroll,
.zc-home-svc__catbar.can-next:focus-within .zc-home-svc__catbar-scroll { padding-right: 48px; }
.zc-home-svc__catbar-scroll::-webkit-scrollbar { display: none; }
.zc-home-svc__cattabs {
  display: inline-flex; gap: 4px;
  align-items: stretch;
}

/* Magazine-style category tab — no pill chrome. Each chip is an
   editorial title block with a monospace kicker (N°01), a small icon
   plate, the category name in display, and a count chip. The
   chip stays flat; an amber bottom rule slides in on hover / fills
   on active to mark the live section. */
.zc-home-svc__cattab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 8px 14px 12px;
  background: transparent;
  border: 0;
  border-radius: 2px;
  font-family: var(--zc-f-heading);
  font-size: 13px; font-weight: 500;
  color: var(--zc-warm-dk);
  cursor: pointer; white-space: nowrap;
  transition: color 0.3s var(--zc-ease), background 0.3s var(--zc-ease);
  flex-shrink: 0;
  scroll-snap-align: start;
}
.zc-home-svc__cattab:not(:last-child)::after {
  /* Thin column rule between tabs — magazine column separator. */
  content: '';
  position: absolute;
  right: -2px; top: 14%; bottom: 14%;
  width: 1px;
  background: var(--zc-linen);
  pointer-events: none;
}

.zc-home-svc__cattab-num {
  grid-column: 1 / 4; grid-row: 1;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--zc-amber-dk);
  opacity: 0.55;
  transition: opacity 0.3s var(--zc-ease);
}

.zc-home-svc__cattab-body {
  grid-column: 1 / 3; grid-row: 2;
  display: inline-flex; align-items: center; gap: 9px;
  min-width: 0;
}

.zc-home-svc__cattab-ic {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 3px;
  background: var(--zc-pearl, #fdf8ee);
  border: 1px solid var(--zc-linen);
  color: var(--zc-amber-dk);
  font-size: 12px;
  overflow: hidden; flex-shrink: 0;
  transition: background 0.3s var(--zc-ease), border-color 0.3s var(--zc-ease),
              color 0.3s var(--zc-ease);
}
.zc-home-svc__cattab-ic img {
  width: 68% !important; height: 68% !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}

.zc-home-svc__cattab-label {
  font-family: var(--zc-f-display);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.1px;
  line-height: 1.1;
  color: inherit;
}

.zc-home-svc__cattab-count {
  grid-column: 3; grid-row: 2;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--zc-warm-dk);
  opacity: 0.55;
  min-width: 22px; text-align: right;
  transition: color 0.3s var(--zc-ease), opacity 0.3s var(--zc-ease);
}

/* Animated bottom rule — scales from 0 → 1 on hover, full on active. */
.zc-home-svc__cattab-rule {
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.zc-home-svc__cattab:hover {
  color: var(--zc-charcoal);
}
.zc-home-svc__cattab:hover .zc-home-svc__cattab-num { opacity: 0.9; }
.zc-home-svc__cattab:hover .zc-home-svc__cattab-ic {
  background: linear-gradient(135deg, var(--zc-amber-a12), var(--zc-amber-a25));
  border-color: var(--zc-amber-a35);
}
.zc-home-svc__cattab:hover .zc-home-svc__cattab-count { color: var(--zc-amber-dk); opacity: 0.85; }
.zc-home-svc__cattab:hover .zc-home-svc__cattab-rule { transform: scaleX(0.4); }

.zc-home-svc__cattab.is-on {
  color: var(--zc-deep, var(--zc-charcoal));
  font-weight: 600;
  cursor: default;
}
.zc-home-svc__cattab.is-on .zc-home-svc__cattab-num { opacity: 1; }
.zc-home-svc__cattab.is-on .zc-home-svc__cattab-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: transparent;
  color: var(--zc-white);
}
.zc-home-svc__cattab.is-on .zc-home-svc__cattab-ic img { filter: brightness(0) invert(1); }
.zc-home-svc__cattab.is-on .zc-home-svc__cattab-count {
  color: var(--zc-amber-dk);
  opacity: 1;
}
.zc-home-svc__cattab.is-on .zc-home-svc__cattab-rule { transform: scaleX(1); }

.zc-home-svc__catarr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--zc-white) 0%, var(--zc-snow, #fdfaf3) 100%);
  border: 1.5px solid var(--zc-amber-a35);
  color: var(--zc-amber-dk);
  font-size: 13px;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 14px rgba(46, 75, 113, 0.16),
    0 2px 6px rgba(207, 138, 63, 0.12);
  transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease,
              transform 0.3s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              box-shadow 0.3s ease;
}
.zc-home-svc__catarr--prev { left: 2px; }
.zc-home-svc__catarr--next { right: 2px; }
.zc-home-svc__catarr:hover {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: var(--zc-amber-dk);
  color: var(--zc-white);
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 10px 24px var(--zc-amber-a45),
    0 4px 10px rgba(207, 138, 63, 0.30);
}
.zc-home-svc__catbar.can-prev:hover .zc-home-svc__catarr--prev,
.zc-home-svc__catbar.can-prev:focus-within .zc-home-svc__catarr--prev,
.zc-home-svc__catbar.can-next:hover .zc-home-svc__catarr--next,
.zc-home-svc__catbar.can-next:focus-within .zc-home-svc__catarr--next {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

/* Touch viewports: swipe is faster than tapping the overlay arrows,
   so hide them and drop the side padding. */
@media (max-width: 720px) {
  .zc-home-svc__catarr { display: none; }
  .zc-home-svc__catbar.can-prev .zc-home-svc__catbar-scroll { padding-left: 4px; }
  .zc-home-svc__catbar.can-next .zc-home-svc__catbar-scroll { padding-right: 4px; }
}


/* ----------------------------------------------------------------------------
   §7.2  PANEL — one per category. Active panel is the only one displayed.
   ---------------------------------------------------------------------------- */
.zc-home-svc__panels { position: relative; }
.zc-home-svc__panel { display: none; }
.zc-home-svc__panel.is-on {
  display: block;
  animation: zc-home-svc-fade 0.35s var(--zc-ease) both;
}
@keyframes zc-home-svc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* PREMIUM EDITORIAL FRAME — wraps the subindex + service stage in a
   single elevated card. Soft pearl wash, hairline amber border, four
   corner brackets, gold-foil inset, and a monospace "FILE N°XX" tag
   pinned to the top. Premium variant of the our-numbers scope frame. */
.zc-home-svc__frame {
  position: relative;
  padding: clamp(24px, 2.6vw, 38px) clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 30px);
  margin-top: 22px; /* leave room for the FILE tag that overhangs the top edge */
  background:
    radial-gradient(ellipse at 0% 0%, rgba(207, 138, 63, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(46, 75, 113, 0.045) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, var(--zc-pearl, #fdf8ee) 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Corner brackets — L-shapes anchored to each corner. */
.zc-home-svc__frame-corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid var(--zc-amber-dk);
  pointer-events: none;
  opacity: 0.7;
}
.zc-home-svc__frame-corner--tl { top: -1px; left: -1px;     border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.zc-home-svc__frame-corner--tr { top: -1px; right: -1px;    border-left: 0;  border-bottom: 0; border-top-right-radius: 4px; }
.zc-home-svc__frame-corner--bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0;    border-bottom-left-radius: 4px; }
.zc-home-svc__frame-corner--br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0;    border-bottom-right-radius: 4px; }
/* Monospace file tag that overhangs the top edge. */
.zc-home-svc__frame-tag {
  position: absolute;
  top: -13px; left: clamp(20px, 2.4vw, 32px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 14px;
  background: linear-gradient(180deg, var(--zc-white) 0%, var(--zc-snow, #fdfaf3) 100%);
  border: 1px solid var(--zc-amber-a35);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 14px -6px rgba(207, 138, 63, 0.28);
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-svc__frame-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  box-shadow: 0 0 0 3px var(--zc-amber-a18);
  flex-shrink: 0;
}
.zc-home-svc__frame-tag-rule {
  width: 14px; height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-a45), transparent);
}
.zc-home-svc__frame-tag-name {
  font-family: var(--zc-f-heading);
  font-weight: 600; letter-spacing: 1px;
  color: var(--zc-charcoal);
}
@media (max-width: 540px) {
  .zc-home-svc__frame-tag-rule,
  .zc-home-svc__frame-tag-name { display: none; }
}

.zc-home-svc__panel-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  /* Stretch so the subindex column matches the swiper stage height. */
  align-items: stretch;
}
@media (max-width: 880px) {
  .zc-home-svc__panel-grid {
    grid-template-columns: 1fr;
    align-items: start;
    /* Tight row-gap between the chip scroller and the swiper stage.
       Desktop's column gap (20-36px) reads too loose as a row gap. */
    gap: 6px;
  }
}


/* ----------------------------------------------------------------------------
   §7.3  SUB-CATEGORY INDEX (LEFT) — magazine TOC with amber rail on active.
         Same highlight grammar as the our-numbers scope index that you
         said felt right.
   ---------------------------------------------------------------------------- */
/* Magazine spread, not a card-in-a-card. The subindex is just type +
   lines inside the frame; a vertical hairline on its trailing edge
   plays the role of a column gutter between the index and the swiper
   stage, the same way our-numbers separates its index from its detail. */
.zc-home-svc__subindex {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: clamp(4px, 0.6vw, 8px) clamp(18px, 1.6vw, 24px) clamp(4px, 0.6vw, 8px) 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.zc-home-svc__subindex::after {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px; right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--zc-amber-a25) 12%,
    var(--zc-linen) 50%,
    var(--zc-amber-a25) 88%,
    transparent 100%);
}
@media (max-width: 880px) {
  /* Mobile: section frame goes transparent — drop the pearl gradient
     and radial accents so the cream page background shows through. */
  .zc-home-svc__frame {
    background: transparent;
    padding: clamp(20px, 2vw, 28px) 0 clamp(16px, 1.8vw, 24px);
  }
  /* Subindex collapses to a horizontal chip scroller — the title and
     vertical hairline divider are dropped, the list scrolls left to
     right. Each subidx button below restyles as a chip. */
  .zc-home-svc__subindex {
    padding: 0 0 4px;
    border: 0;
  }
  .zc-home-svc__subindex::after { display: none; }
  .zc-home-svc__subindex-head { display: none; }
  /* Swiper stage hugs the chip row — no extra top breathing room. */
  .zc-home-svc__swiperwrap.is-on { padding-top: 0; }
}

/* Editorial header — display title sits over a short amber rule, like
   a magazine section opener. No card chrome, just type. */
.zc-home-svc__subindex-head {
  position: relative;
  margin-bottom: 18px;
  padding: 0 0 16px;
}
.zc-home-svc__subindex-title {
  margin: 0;
  font-family: var(--zc-f-display);
  font-size: clamp(22px, 1.2vw + 14px, 28px);
  font-weight: 300; line-height: 1.08; letter-spacing: -0.7px;
  color: var(--zc-charcoal);
}
.zc-home-svc__subindex-title span {
  display: inline-block;
  color: var(--zc-amber-dk);
  font-weight: 500;
}
.zc-home-svc__subindex-rule {
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 1px 6px rgba(207, 138, 63, 0.35);
}

.zc-home-svc__subindex-list {
  list-style: none; margin: 0;
  /* Right padding leaves room for the scrollbar so list items don't shift
     when the column overflows and gains a scroller. */
  padding: 0 4px 0 0;
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--zc-amber-a25) transparent;
}
.zc-home-svc__subindex-list::-webkit-scrollbar { width: 4px; }
.zc-home-svc__subindex-list::-webkit-scrollbar-track { background: transparent; }
.zc-home-svc__subindex-list::-webkit-scrollbar-thumb {
  background: var(--zc-amber-a25);
  border-radius: 4px;
}
.zc-home-svc__subindex-list li {
  border-bottom: 1px dashed var(--zc-linen);
}
.zc-home-svc__subindex-list li:last-child { border-bottom: none; }

.zc-home-svc__subidx {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: padding-left 0.4s var(--zc-ease),
              background 0.4s var(--zc-ease),
              color 0.3s var(--zc-ease);
}
.zc-home-svc__subidx::before {
  /* Amber left rail — grows in on active */
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--zc-amber-lt), var(--zc-amber-dk));
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 0.45s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.zc-home-svc__subidx:hover {
  padding-left: 18px;
  background: linear-gradient(90deg, var(--zc-amber-a08), transparent 70%);
}
.zc-home-svc__subidx.is-on {
  padding-left: 18px;
  background: linear-gradient(90deg, var(--zc-amber-a18), transparent 70%);
  cursor: default;
}
.zc-home-svc__subidx.is-on::before { height: 60%; }

.zc-home-svc__subidx-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--zc-amber-dk);
  opacity: 0.7;
}
.zc-home-svc__subidx.is-on .zc-home-svc__subidx-num { opacity: 1; }

.zc-home-svc__subidx-name {
  font-family: var(--zc-f-display);
  font-size: clamp(13px, 0.4vw + 10px, 15px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--zc-charcoal);
  min-width: 0;
  /* Wrap up to 2 lines instead of truncating with an ellipsis —
     wider column gives most subcategory names enough room on one line. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
}
.zc-home-svc__subidx-meta {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0;
}
.zc-home-svc__subidx-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--zc-amber-a12);
  color: var(--zc-amber-dk);
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px;
}
.zc-home-svc__subidx.is-on .zc-home-svc__subidx-count {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
}
.zc-home-svc__subidx-arrow {
  font-size: 11px;
  color: var(--zc-amber-dk);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.3s var(--zc-ease), transform 0.3s var(--zc-ease);
}
.zc-home-svc__subidx.is-on .zc-home-svc__subidx-arrow,
.zc-home-svc__subidx:hover .zc-home-svc__subidx-arrow { opacity: 1; transform: none; }

/* === MOBILE — subcategory list as horizontal chip scroller =============
   Reuses the same swipe-row grammar as the USP / doctor / stats
   scrollers. Each subidx button becomes a pill chip. Higher-specificity
   selectors (.subindex .subidx, .subindex-list > li) so the rules win
   against the desktop base rules above. */
@media (max-width: 880px) {
  .zc-home-svc__subindex .zc-home-svc__subindex-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 10px 0;
    gap: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 0 0 auto;
  }
  .zc-home-svc__subindex .zc-home-svc__subindex-list::-webkit-scrollbar { display: none; }
  .zc-home-svc__subindex .zc-home-svc__subindex-list li {
    flex: 0 0 auto;
    border-bottom: 0;
    scroll-snap-align: start;
  }
  /* Convert the magazine-TOC button into a flat amber-ring chip with
     all three children — num · name · count — in a single row. */
  .zc-home-svc__subindex .zc-home-svc__subidx {
    grid-template-columns: auto auto auto;
    column-gap: 8px;
    padding: 8px 14px;
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 999px;
    white-space: nowrap;
  }
  /* Stop the name from wrapping to 2 lines inside the chip. */
  .zc-home-svc__subindex .zc-home-svc__subidx-name {
    display: inline;
    -webkit-line-clamp: unset;
    white-space: nowrap;
    overflow: visible;
    line-height: 1;
  }
  .zc-home-svc__subindex .zc-home-svc__subidx:hover,
  .zc-home-svc__subindex .zc-home-svc__subidx.is-on {
    padding-left: 14px;                          /* don't slide on tap — keep stable */
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
  }
  /* Hide the amber left-rail (chip border replaces it). */
  .zc-home-svc__subindex .zc-home-svc__subidx::before { display: none; }
  /* Hide the trailing arrow inside the chip (the chip itself is the cue). */
  .zc-home-svc__subindex .zc-home-svc__subidx-arrow { display: none; }
  /* Active chip: name, number AND count all turn white for contrast. */
  .zc-home-svc__subindex .zc-home-svc__subidx.is-on .zc-home-svc__subidx-name,
  .zc-home-svc__subindex .zc-home-svc__subidx.is-on .zc-home-svc__subidx-num {
    color: var(--zc-white);
  }
  .zc-home-svc__subindex .zc-home-svc__subidx.is-on .zc-home-svc__subidx-count {
    color: var(--zc-white);
    background: rgba(255, 255, 255, 0.22);
  }
}

/* ----------------------------------------------------------------------------
   §7.4  SWIPER STAGE (RIGHT) — one swiperwrap per subcategory. Active
         one is .is-on; rest are hidden. Active swiper carries the
         services for that sub-area.
   ---------------------------------------------------------------------------- */
.zc-home-svc__stage { position: relative; min-width: 0; display: flex; }
.zc-home-svc__swiperwrap { display: none; }
.zc-home-svc__swiperwrap.is-on {
  /* Flex column so the swiper centers vertically when the subindex
     column is taller than the card. The pagination sits on its own
     row beneath the card, not floating over the image. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 6px 0;
  animation: zc-home-svc-fade 0.35s var(--zc-ease) both;
}

/* Card + overlay arrows in one row. Arrows reference this row (not the
   taller swiperwrap), so top:50% lands on the card's vertical center. */
.zc-home-svc__swiperrow {
  position: relative;
  width: 100%;
}
.zc-home-svc__swiper {
  position: relative;
  /* `clip` instead of `hidden` so no scroll context is created. */
  overflow: clip;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* PRE-INIT GUARD — until Swiper JS runs and sets its own width math
   on the wrapper, browsers paint the slides at their natural width
   (each slide is `width: 100%` with `flex-shrink: 0`, so N slides
   stack at N × wrapper-width). We force `flex-wrap: wrap` for the
   un-initialised state so slides drop onto subsequent rows instead
   of pushing the row out wider than the viewport. Once Swiper
   initialises it adds a `swiper-initialized` class to the .swiper
   container, at which point we relax this back to nowrap. */
.zc-home-svc__swiper:not(.swiper-initialized) .swiper-wrapper {
  flex-wrap: wrap;
}
.zc-home-svc__swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

/* Pagination row — sits below the card with a hairline rule on either
   side of the bar bullets, like a magazine track. */
.zc-home-svc__pgbar {
  display: flex; align-items: center;
  gap: 14px;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding: 0 4px;
}
.zc-home-svc__pgbar::before,
.zc-home-svc__pgbar::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--zc-linen) 40%, var(--zc-linen) 60%, transparent 100%);
}
.zc-home-svc__pg.swiper-pagination {
  position: static;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
}
.zc-home-svc__pg.swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 18px; height: 3px;
  margin: 0;
  border-radius: 2px;
  background: var(--zc-amber-a25);
  opacity: 1;
  transition: width 0.4s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              background 0.3s var(--zc-ease),
              box-shadow 0.3s var(--zc-ease);
  cursor: pointer;
}
.zc-home-svc__pg.swiper-pagination .swiper-pagination-bullet:hover {
  background: var(--zc-amber);
}
.zc-home-svc__pg.swiper-pagination .swiper-pagination-bullet-active {
  width: 32px;
  background: linear-gradient(90deg, var(--zc-amber-lt) 0%, var(--zc-amber) 50%, var(--zc-amber-dk) 100%);
  box-shadow: 0 0 8px rgba(207, 138, 63, 0.45);
}

/* Arrows — overlay-style glass pills that sit on top of the swiper edges.
   Swiper.js manages enabled state: `.swiper-button-disabled` when the user
   has hit an end, `.swiper-button-lock` when nothing overflows. Both fade
   the arrow out so it never blocks a card or hangs in space. */
.zc-home-svc__arr {
  position: absolute;
  top: 50%; /* arrows sit inside .swiperrow → already only the card height */
  transform: translateY(-50%) scale(0.92);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--zc-white) 0%, var(--zc-snow, #fdfaf3) 100%);
  border: 1.5px solid var(--zc-amber-a35);
  color: var(--zc-amber-dk);
  font-size: 14px;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 8px 18px rgba(46, 75, 113, 0.18),
    0 3px 8px rgba(207, 138, 63, 0.14);
  transition: transform 0.3s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              opacity 0.25s ease,
              box-shadow 0.3s ease;
  z-index: 5;
}
.zc-home-svc__arr--prev { left: 8px; }
.zc-home-svc__arr--next { right: 8px; }
.zc-home-svc__arr:hover {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: var(--zc-amber-dk);
  color: var(--zc-white);
  transform: translateY(-50%) scale(1.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 12px 26px var(--zc-amber-a45),
    0 4px 12px rgba(207, 138, 63, 0.30);
}
.zc-home-svc__arr.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.85);
}
.zc-home-svc__arr.swiper-button-lock {
  display: none;
}
/* Touch viewports: swipe is faster than reaching for the overlay arrows. */
@media (max-width: 640px) {
  .zc-home-svc__arr { display: none; }
}


/* ----------------------------------------------------------------------------
   §7.5  SERVICE CARD — magazine spread layout. Image on top, typography
         block underneath (N°XX, animated rule, arrow, display-serif title,
         and a quiet "Read more" line with a growing amber rule on hover).
         No category pill — the user is already filtered into that scope
         via the cattab + subindex above.
   ---------------------------------------------------------------------------- */
.zc-home-svc__card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  height: auto;
  /* Tighter horizontal padding inside the card column so the
     typographic block reads inset from the image edges, like a
     printed page margin. */
  padding: 0 2px;
}
.zc-home-svc__card-plate {
  position: relative;
  margin: 0 -2px; /* image goes full-bleed across the card column */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--zc-linen);
  transition: transform 0.5s var(--zc-ease-spring);
  contain: layout paint;
}
.zc-home-svc__card:hover .zc-home-svc__card-plate {
  transform: translateY(-2px);
}

.zc-home-svc__card-img {
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.55s var(--zc-ease),
              transform 0.9s var(--zc-ease),
              filter 0.6s var(--zc-ease);
  filter: saturate(0.96);
}
.zc-home-svc__card-img[src]:not([src=""]),
.zc-home-svc__card-img.is-loaded { opacity: 1; }
.zc-home-svc__card:hover .zc-home-svc__card-img {
  transform: scale(1.06);
  filter: saturate(1.06);
}

.zc-home-svc__card-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--zc-amber-dk);
  font-size: clamp(36px, 4vw, 56px);
  opacity: 0.55;
}

/* Removed elements from the previous overlay treatment. */
.zc-home-svc__card-frame,
.zc-home-svc__card-foil,
.zc-home-svc__card-wash,
.zc-home-svc__card-subpill { display: none; }

/* Meta strip directly under the image: number marker on the left,
   hairline rule that stretches across, arrow on the right. Magazine
   caption strip. */
.zc-home-svc__card-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0 10px;
}
.zc-home-svc__card-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--zc-amber-dk);
}
.zc-home-svc__card-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-linen) 100%);
  transition: background 0.4s var(--zc-ease);
}
.zc-home-svc__card-arrow {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--zc-amber-a45);
  color: var(--zc-amber-dk);
  font-size: 12px;
  background: transparent;
  transition: background 0.35s var(--zc-ease),
              color 0.35s var(--zc-ease),
              border-color 0.35s var(--zc-ease),
              transform 0.4s var(--zc-ease-spring);
}
.zc-home-svc__card-arrow i { transition: transform 0.4s var(--zc-ease-spring); }
.zc-home-svc__card:hover .zc-home-svc__card-arrow {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: transparent;
  color: var(--zc-white);
  transform: rotate(-8deg);
}
.zc-home-svc__card:hover .zc-home-svc__card-arrow i { transform: translate(1px, -1px); }

/* Display-serif title, dark on cream — the primary block of the card. */
.zc-home-svc__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-family: var(--zc-f-display);
  font-size: clamp(17px, 0.55vw + 13px, 22px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: var(--zc-charcoal);
  transition: color 0.3s var(--zc-ease);
}
.zc-home-svc__card:hover .zc-home-svc__card-title { color: var(--zc-amber-dk); }

/* Read-more cue — small caps text with an underline that animates
   in on hover, replacing what used to be a "Read more" button. */
.zc-home-svc__card-readmore {
  position: relative;
  display: inline-flex; align-items: center;
  margin-top: 10px;
  padding-bottom: 4px;
  font-family: var(--zc-f-heading);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  transition: color 0.3s var(--zc-ease), gap 0.3s var(--zc-ease);
}
.zc-home-svc__card-readmore-rule {
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 1.5px;
  border-radius: 2px;
  background: var(--zc-amber-dk);
  transition: width 0.5s var(--zc-ease-spring);
}
.zc-home-svc__card:hover .zc-home-svc__card-readmore { color: var(--zc-amber-dk); }
.zc-home-svc__card:hover .zc-home-svc__card-readmore-rule {
  width: 60px;
  background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
}

@media (max-width: 540px) {
  .zc-home-svc__card-meta { padding: 12px 0 8px; }
}
/* ==========================================================================
   §8  PATIENT STORIES  (.zc-home-test) — Elfsight Google Reviews
   Magazine-style masthead, a trust strip that names the source, then
   the Elfsight widget hosted inside a framed plate with amber corner
   brackets. Cream paper, premium, no card-on-card chrome.
   ========================================================================== */
.zc-home-test {
  position: relative;
  padding: clamp(40px, 4.4vw, 70px) 0 0;
  background:
    radial-gradient(ellipse at 96% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 4% 100%, rgba(207, 138, 63, 0.07) 0%, transparent 45%),
    linear-gradient(180deg, var(--zc-snow, #fdfbf6) 0%, var(--zc-off-white) 60%, var(--zc-pearl, #fdf8ee) 100%);
  border-top: 1px solid var(--zc-linen);
  overflow: clip;
}
.zc-home-test__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) { .zc-home-test__inner { padding: 0 var(--zc-pad-x-mb); } }

/* === MASTHEAD ============================================================ */
.zc-home-test__head {
  text-align: left;
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.zc-home-test__masthead {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 14px;
}
.zc-home-test__masthead-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-test__masthead-rule { height: 1px; }
.zc-home-test__masthead-rule--l {
  width: clamp(20px, 3vw, 44px);
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-dk) 100%);
}
.zc-home-test__masthead-rule--r {
  background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-a25) 70%, var(--zc-linen) 100%);
}
.zc-home-test__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-test__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
.zc-home-test__masthead-source {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--zc-warm-dk);
  white-space: nowrap;
}
.zc-home-test__masthead-source i {
  font-size: 13px;
  color: var(--zc-amber-dk);
}
@media (max-width: 640px) {
  .zc-home-test__masthead {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .zc-home-test__masthead-num { grid-row: 1; grid-column: 1; }
  .zc-home-test__masthead-rule--l {
    grid-row: 1; grid-column: 2; width: auto;
    background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-a25) 50%, transparent 100%);
  }
  .zc-home-test__masthead-source { grid-row: 1; grid-column: 3; }
  .zc-home-test__eyebrow { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .zc-home-test__masthead-rule--r { display: none; }
}

.zc-home-test__title {
  margin: 0 0 8px;
  font-family: var(--zc-f-display);
  font-size: clamp(26px, 2.2vw + 14px, 44px);
  font-weight: 300;
  line-height: 1.08; letter-spacing: -0.9px;
  color: var(--zc-charcoal);
}
.zc-home-test__title-accent {
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.zc-home-test__sub {
  margin: 0;
  max-width: 64ch;
  font-family: var(--zc-f-body);
  font-size: clamp(13.5px, 0.25vw + 12px, 15.5px);
  line-height: 1.65;
  color: var(--zc-warm-dk);
}

/* === GOOGLE TRUST STRIP ================================================= */
.zc-home-test__trust {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(20px, 2.2vw, 30px) 0 clamp(20px, 2.2vw, 30px);
  padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.6vw, 22px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(253, 248, 238, 0.6) 100%);
  border-top: 1px solid var(--zc-amber-a25);
  border-bottom: 1px solid var(--zc-amber-a25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.zc-home-test__trust-mark {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--zc-white);
  border: 1px solid var(--zc-amber-a35);
  color: var(--zc-amber-dk);
  font-size: 20px;
  box-shadow: 0 6px 14px -6px rgba(207, 138, 63, 0.32);
  flex-shrink: 0;
}
.zc-home-test__trust-body {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.zc-home-test__trust-stars {
  display: inline-flex; gap: 3px;
  color: var(--zc-amber);
  font-size: 13px;
}
.zc-home-test__trust-stars i { filter: drop-shadow(0 1px 4px rgba(207, 138, 63, 0.35)); }
.zc-home-test__trust-text {
  font-family: var(--zc-f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--zc-warm-dk);
}
.zc-home-test__trust-text b {
  font-family: var(--zc-f-display);
  font-weight: 500;
  color: var(--zc-charcoal);
  margin-right: 4px;
}
.zc-home-test__trust-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--zc-amber-a45);
  border-radius: 999px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  background: var(--zc-white);
  white-space: nowrap;
}
.zc-home-test__trust-tag-dot {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 0 var(--zc-amber-a45);
  animation: zc-home-test-pulse 2.4s ease-in-out infinite;
}
@keyframes zc-home-test-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--zc-amber-a45); }
  50%      { box-shadow: 0 0 0 6px rgba(207, 138, 63, 0); }
}
@media (max-width: 640px) {
  .zc-home-test__trust {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 12px;
  }
  .zc-home-test__trust-tag { grid-column: 1 / -1; justify-self: flex-start; }
}

/* === WIDGET HOST ========================================================
   Wraps the Elfsight embed in a framed plate with amber corner
   brackets. Generous padding so the widget breathes; no background
   so Elfsight's own theme is visible without competing chrome. */
.zc-home-test__widget {
  position: relative;
  padding: clamp(16px, 2vw, 28px);
  min-height: 320px;
  background: transparent;
}
.zc-home-test__widget-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid var(--zc-amber-dk);
  pointer-events: none;
  opacity: 0.7;
}
.zc-home-test__widget-corner--tl { top: 0; left: 0;     border-right: 0; border-bottom: 0; }
.zc-home-test__widget-corner--tr { top: 0; right: 0;    border-left: 0;  border-bottom: 0; }
.zc-home-test__widget-corner--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.zc-home-test__widget-corner--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.zc-home-test__widget-fallback {
  margin: 0;
  padding: 24px;
  text-align: center;
  font-family: var(--zc-f-body);
  font-size: 13.5px;
  color: var(--zc-warm-dk);
}
.zc-home-test__widget-fallback a {
  color: var(--zc-amber-dk);
  font-weight: 600;
}

/* Elfsight's own root sits inside .zc-home-test__widget. We don't
   override its internals (typography, layout) — just remove any
   bottom margin it may add so the section padding controls spacing. */
.zc-home-test__widget [class^="elfsight-app-"] {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-test__trust-tag-dot { animation: none; }
}
/* ==========================================================================
/* ==========================================================================
   §9  FAQ  (.zc-home-faq) — Apple-grade editorial answer page
   Sticky-aside left column with massive display title + helpline /
   ask-a-question actions. Right column is a hairline-divided
   accordion: no card chrome, just elegant rows with a big numeral,
   display-serif question, and a + → × icon. Open state slides an
   amber rail in on the left, turns the numeral amber, and fades the
   answer up. Cubic-bezier easing throughout — slow start, slow stop,
   the "this is expensive" feel.
   ========================================================================== */
.zc-home-faq {
  position: relative;
  padding: clamp(96px, 8vw, 140px) 0 clamp(56px, 5vw, 80px);
  background:
    radial-gradient(ellipse at 96% 20%, rgba(207, 138, 63, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 4% 100%, rgba(207, 138, 63, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--zc-off-white) 0%, var(--zc-snow, #fdfbf6) 100%);
  margin-top: -65px;
  z-index: 9;
  overflow: clip;
}
.zc-home-faq__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.zc-home-faq__shape--1 {
  top: 80px; right: -120px;
  width: 260px; height: 260px;
  border: 1px dashed var(--zc-amber-a25);
  animation: zc-home-faq-spin 110s linear infinite;
}
@keyframes zc-home-faq-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.zc-home-faq__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) { .zc-home-faq__inner { padding: 0 var(--zc-pad-x-mb); } }

.zc-home-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: flex-start;
}
@media (max-width: 991px) { .zc-home-faq__grid { grid-template-columns: 1fr; gap: 36px; } }

/* === LEFT — sticky editorial aside ============================== */
.zc-home-faq__aside {
  position: sticky;
  top: clamp(80px, 8vw, 120px);
  padding-right: clamp(8px, 1.4vw, 24px);
}
@media (max-width: 991px) { .zc-home-faq__aside { position: static; padding-right: 0; } }

/* Massive watermark digit behind the aside content — Apple-style
   ghost numeral. Sits decoratively, doesn't interfere with text. */
.zc-home-faq__watermark {
  position: absolute;
  top: -20px;
  left: -10px;
  font-family: var(--zc-f-display);
  font-size: clamp(180px, 22vw, 360px);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  background: linear-gradient(180deg, rgba(207, 138, 63, 0.10) 0%, rgba(207, 138, 63, 0.02) 100%);
  -webkit-background-clip: text; background-clip: text;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.zc-home-faq__aside > *:not(.zc-home-faq__watermark) {
  position: relative;
  z-index: 1;
}

.zc-home-faq__masthead {
  display: flex; align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0 0 22px;
}
.zc-home-faq__masthead-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-faq__masthead-rule {
  width: clamp(28px, 4vw, 52px); height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-dk) 100%);
}
.zc-home-faq__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
}
.zc-home-faq__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}

.zc-home-faq__title {
  margin: 0 0 18px;
  font-family: var(--zc-f-display);
  font-size: clamp(34px, 4vw + 4px, 64px);
  font-weight: 300;
  line-height: 1.02; letter-spacing: -1.5px;
  color: var(--zc-charcoal);
  text-wrap: balance;
}
.zc-home-faq__title-accent {
  display: inline;
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.zc-home-faq__sub {
  margin: 0 0 30px;
  max-width: 42ch;
  font-family: var(--zc-f-body);
  font-size: clamp(14px, 0.25vw + 12px, 16px);
  line-height: 1.65;
  color: var(--zc-warm-dk);
}

/* === LIVE STATUS — soft amber pulse + small caption =============
   A confident "we're online" cue. No box, no border — just two
   small typography elements with a pulsing dot. */
.zc-home-faq__live {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 24px;
}
.zc-home-faq__live-dot {
  position: relative;
  width: 9px; height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 0 var(--zc-amber-a45);
  animation: zc-home-faq-pulse 2.4s ease-in-out infinite;
}
.zc-home-faq__live-dot::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(207, 138, 63, 0.35);
}
@keyframes zc-home-faq-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--zc-amber-a45); }
  50%      { box-shadow: 0 0 0 10px rgba(207, 138, 63, 0); }
}
.zc-home-faq__live-text {
  display: flex; flex-direction: column;
  gap: 1px;
}
.zc-home-faq__live-text b {
  font-family: var(--zc-f-display);
  font-size: clamp(13.5px, 0.2vw + 12px, 15.5px);
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--zc-charcoal);
}
.zc-home-faq__live-text span {
  font-family: var(--zc-f-body);
  font-size: 12px;
  color: var(--zc-warm-dk);
  opacity: 0.85;
}

/* === CONTACT LINES — pure typography, no chrome =================
   Two ruled rows. The phone number is the hero, set in display
   serif at large size. Subtle amber rail on hover marks intent. */
.zc-home-faq__lines {
  display: flex; flex-direction: column;
  margin-bottom: clamp(28px, 3vw, 40px);
  max-width: 420px;
}
.zc-home-faq__line {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: clamp(16px, 1.6vw, 22px) 4px clamp(16px, 1.6vw, 22px) 0;
  border-top: 1px solid var(--zc-linen);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-faq__line:last-child { border-bottom: 1px solid var(--zc-linen); }
.zc-home-faq__line::before {
  content: '';
  position: absolute;
  left: -2px; top: 50%;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--zc-amber-lt), var(--zc-amber-dk));
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(207, 138, 63, 0.45);
  transition: height 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-faq__line:hover {
  padding-left: 14px;
}
.zc-home-faq__line:hover::before { height: 60%; }

.zc-home-faq__line-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-faq__line-tag i {
  font-size: 11px;
  color: var(--zc-amber-dk);
  opacity: 0.85;
}
.zc-home-faq__line-val {
  font-family: var(--zc-f-display);
  font-size: clamp(18px, 0.5vw + 14px, 22px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--zc-charcoal);
  min-width: 0;
  transition: color 0.3s var(--zc-ease);
}
.zc-home-faq__line:hover .zc-home-faq__line-val { color: var(--zc-amber-dk); }
.zc-home-faq__line-arrow {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  color: var(--zc-warm-dk);
  font-size: 12px;
  opacity: 0.55;
  transition: opacity 0.3s var(--zc-ease),
              color 0.3s var(--zc-ease),
              background 0.35s var(--zc-ease),
              transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-faq__line:hover .zc-home-faq__line-arrow {
  opacity: 1;
  color: var(--zc-white);
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  transform: translate(2px, -2px) rotate(-6deg);
}

/* Tablet/mobile — Helpline + Ask-in-writing sit side-by-side as two
   centered stacks (tag on top, value below) separated by a single
   amber-tinted hairline divider down the middle. Cleaner, denser. */
@media (max-width: 991px) {
  .zc-home-faq__lines {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    max-width: 100%;
    margin-bottom: 20px;
    border-top: 1px solid var(--zc-linen);
    border-bottom: 1px solid var(--zc-linen);
  }
  .zc-home-faq__line {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    text-align: center;
    row-gap: 4px;
    column-gap: 0;
    padding: 12px 8px;
    border-top: 0;
  }
  .zc-home-faq__line:last-child { border-bottom: 0; }
  .zc-home-faq__line + .zc-home-faq__line {
    border-left: 1px solid var(--zc-linen);
  }
  .zc-home-faq__line:hover { padding-left: 8px; }
  .zc-home-faq__line::before { display: none; }
  .zc-home-faq__line-tag {
    grid-row: 1; grid-column: 1;
    font-size: 9px;
    letter-spacing: 1.6px;
  }
  .zc-home-faq__line-val {
    grid-row: 2; grid-column: 1;
    font-size: 15px;
    line-height: 1.2;
  }
  .zc-home-faq__line-arrow { display: none; }
}

/* === FOUNDER BYLINE — small signature ============================ */
.zc-home-faq__byline {
  display: flex; align-items: flex-start;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px dashed var(--zc-linen);
  max-width: 420px;
}
.zc-home-faq__byline-mark {
  flex-shrink: 0;
  width: 24px; height: 1px;
  margin-top: 9px;
  background: linear-gradient(90deg, var(--zc-amber-dk), transparent);
}
.zc-home-faq__byline-text {
  display: flex; flex-direction: column;
  gap: 1px;
  font-family: var(--zc-f-body);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.2px;
  color: var(--zc-warm-dk);
  opacity: 0.85;
}
.zc-home-faq__byline-text b {
  font-family: var(--zc-f-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--zc-charcoal);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-faq__live-dot { animation: none; }
}

/* === RIGHT — accordion list ===================================== */
.zc-home-faq__list {
  display: flex; flex-direction: column;
}
.zc-home-faq__empty {
  padding: 40px;
  text-align: center;
  color: var(--zc-warm-mid);
  font-family: var(--zc-f-body);
}

/* Each item is a flat row, no card chrome. Hairline top/bottom.
   The amber rail sweeps in from the left when open. */
.zc-home-faq__item {
  position: relative;
  border-top: 1px solid var(--zc-linen);
  opacity: 0;
  animation: zc-home-faq-rise 0.65s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  animation-delay: var(--zc-faq-delay, 0s);
  transition: background 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-faq__item:last-child { border-bottom: 1px solid var(--zc-linen); }
@keyframes zc-home-faq-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zc-home-faq__item:hover {
  background: linear-gradient(90deg, rgba(207, 138, 63, 0.04) 0%, transparent 75%);
}
.zc-home-faq__item.is-open {
  background: linear-gradient(90deg, rgba(207, 138, 63, 0.06) 0%, transparent 75%);
}

/* Amber rail on the left edge of an open item. */
.zc-home-faq__item-rail {
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--zc-amber-lt), var(--zc-amber-dk));
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(207, 138, 63, 0.55);
  transition: height 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-faq__item.is-open .zc-home-faq__item-rail { height: 64%; }

/* Question button — large hit target, generous spacing. */
.zc-home-faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: clamp(56px, 5vw, 80px) 1fr auto;
  column-gap: clamp(14px, 1.6vw, 24px);
  align-items: center;
  padding: clamp(22px, 2.4vw, 32px) clamp(16px, 1.6vw, 22px) clamp(22px, 2.4vw, 32px) clamp(12px, 1.4vw, 20px);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: padding-left 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-faq__item.is-open .zc-home-faq__q { padding-left: clamp(20px, 1.8vw, 28px); }
.zc-home-faq__q:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--zc-amber-a45) inset; }

.zc-home-faq__q-num {
  font-family: var(--zc-f-display);
  font-size: clamp(20px, 1.2vw + 12px, 30px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--zc-amber-a45);
  transition: color 0.35s var(--zc-ease);
}
.zc-home-faq__item:hover .zc-home-faq__q-num,
.zc-home-faq__item.is-open .zc-home-faq__q-num { color: var(--zc-amber-dk); }

.zc-home-faq__q-text {
  font-family: var(--zc-f-display);
  font-size: clamp(17px, 0.55vw + 13px, 22px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.3px;
  color: var(--zc-charcoal);
  transition: color 0.3s var(--zc-ease);
}
.zc-home-faq__item.is-open .zc-home-faq__q-text { color: var(--zc-amber-dk); }

/* + → × icon, made from two crossed bars. Rotates the vertical bar
   to 90deg on open so + becomes —. Smooth Apple-style ease. */
.zc-home-faq__q-ic {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--zc-amber-a35);
  background: var(--zc-white);
  transition: background 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-faq__q-ic-line {
  position: absolute;
  background: var(--zc-amber-dk);
  border-radius: 1px;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background 0.4s var(--zc-ease);
}
.zc-home-faq__q-ic-line--h { width: 12px; height: 1.5px; }
.zc-home-faq__q-ic-line--v { width: 1.5px; height: 12px; }
.zc-home-faq__item.is-open .zc-home-faq__q-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: transparent;
  transform: rotate(180deg);
}
.zc-home-faq__item.is-open .zc-home-faq__q-ic-line { background: var(--zc-white); }
.zc-home-faq__item.is-open .zc-home-faq__q-ic-line--v { transform: rotate(90deg); }
.zc-home-faq__item:hover .zc-home-faq__q-ic {
  border-color: var(--zc-amber-a45);
}

/* Answer pane — collapsed by default, smooth height transition. */
.zc-home-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-faq__item.is-open .zc-home-faq__a { max-height: 800px; }

.zc-home-faq__a-inner {
  position: relative;
  padding: 0 clamp(16px, 1.6vw, 22px) clamp(26px, 2.6vw, 36px) calc(clamp(56px, 5vw, 80px) + clamp(14px, 1.6vw, 24px) + clamp(12px, 1.4vw, 20px));
  font-family: var(--zc-f-body);
  font-size: clamp(13.5px, 0.2vw + 12px, 15.5px);
  line-height: 1.7;
  color: var(--zc-warm-dk);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.1s,
              transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.1s;
}
.zc-home-faq__item.is-open .zc-home-faq__a-inner {
  opacity: 1;
  transform: translateY(0);
}
.zc-home-faq__a-inner a { color: var(--zc-amber-dk); font-weight: 600; }
.zc-home-faq__a-inner p:first-child { margin-top: 0; }
.zc-home-faq__a-inner p:last-child  { margin-bottom: 0; }

/* Vertical answer-mark — small amber tick on the left side of the
   answer body, aligned with the question's number column. */
.zc-home-faq__a-mark {
  position: absolute;
  left: calc(clamp(56px, 5vw, 80px) / 2 + clamp(12px, 1.4vw, 20px) - 1px);
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--zc-amber-a45) 0%, transparent 100%);
  opacity: 0.6;
}

@media (max-width: 540px) {
  .zc-home-faq__q { grid-template-columns: 28px 1fr auto; column-gap: 8px; }
  .zc-home-faq__q-num { font-size: 16px; }
  .zc-home-faq__a-inner { padding-left: calc(28px + 8px + 10px); }
  .zc-home-faq__a-mark  { left: calc(28px / 2 + 10px - 1px); }
}

/* === MOBILE — compact FAQ ============================================
   Tighter section padding, smaller fonts, single-row question layout
   (num + question text + plus icon) so the question never wraps the
   number to its own line. Answer copy steps down a notch too. */
@media (max-width: 991px) {
  .zc-home-faq {
    padding: clamp(48px, 6vw, 64px) 0 clamp(32px, 4vw, 44px);
    margin-top: -28px;
  }
  .zc-home-faq__grid { gap: 24px; }
  .zc-home-faq__title { font-size: clamp(26px, 6vw, 34px); margin-bottom: 10px; letter-spacing: -1px; }
  .zc-home-faq__sub   { font-size: 13.5px; margin-bottom: 18px; line-height: 1.55; }
  .zc-home-faq__masthead { margin-bottom: 14px; }
  .zc-home-faq__live  { margin-bottom: 16px; }
  .zc-home-faq__lines { margin-bottom: 20px; }

  /* Single-row question button: tight num/text/icon, smaller padding. */
  .zc-home-faq__q {
    grid-template-columns: 32px 1fr auto;
    column-gap: 10px;
    padding: 14px 10px 14px 8px;
  }
  .zc-home-faq__q-num  { font-size: 16px; }
  .zc-home-faq__q-text {
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.2px;
  }
  .zc-home-faq__q-ic { width: 26px; height: 26px; }
  .zc-home-faq__q-ic-line--h { width: 9px; }
  .zc-home-faq__q-ic-line--v { height: 9px; }
  .zc-home-faq__item.is-open .zc-home-faq__q { padding-left: 10px; }

  .zc-home-faq__a-inner {
    padding: 0 10px 16px calc(32px + 10px + 8px);
    font-size: 13px;
    line-height: 1.6;
  }
  .zc-home-faq__a-mark { left: calc(32px / 2 + 8px - 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-faq__shape--1,
  .zc-home-faq__item { animation: none; opacity: 1; }
}

/* ==========================================================================
/* ==========================================================================
   §10 PILLARS  (.zc-home-pillar) — horizontal ribbon timeline
   Five pillars arranged across an animated dashed amber rail. Odd
   nodes (01, 03, 05) place the image above the rail and text below;
   even nodes (02, 04) invert it. Each rail node is an amber circle
   marker carrying the pillar's icon. No card chrome anywhere.
   ========================================================================== */
.zc-home-pillar {
  position: relative;
  padding: clamp(32px, 3.2vw, 50px) 0 clamp(40px, 3.5vw, 60px);
  background:
    radial-gradient(ellipse at 96% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 4% 100%, rgba(207, 138, 63, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--zc-snow, #fdfbf6) 0%, var(--zc-pearl, #fdf8ee) 100%);
  border-top: 1px solid var(--zc-linen);
  overflow: clip;
}
.zc-home-pillar__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.zc-home-pillar__shape--1 {
  top: -100px; right: -80px;
  width: 260px; height: 260px;
  border: 1px dashed var(--zc-amber-a25);
  animation: zc-home-pillar-spin 110s linear infinite;
}
@keyframes zc-home-pillar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.zc-home-pillar__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 var(--zc-pad-x);
  box-sizing: border-box;
}
@media (max-width: 991px) { .zc-home-pillar__inner { padding: 0 var(--zc-pad-x-mb); } }

/* === MASTHEAD ============================================================ */
.zc-home-pillar__head {
  text-align: left;
  margin-bottom: clamp(24px, 2.4vw, 36px);
}
.zc-home-pillar__masthead {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 14px;
}
.zc-home-pillar__masthead-num {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-pillar__masthead-rule { height: 1px; }
.zc-home-pillar__masthead-rule--l {
  width: clamp(20px, 3vw, 44px);
  background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-dk) 100%);
}
.zc-home-pillar__masthead-rule--r {
  background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-a25) 70%, var(--zc-linen) 100%);
}
.zc-home-pillar__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  white-space: nowrap;
}
.zc-home-pillar__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 0 2px rgba(207, 138, 63, 0.18);
}
.zc-home-pillar__masthead-count {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'Courier New', ui-monospace, monospace;
  white-space: nowrap;
}
.zc-home-pillar__masthead-count-num {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--zc-amber-dk);
}
.zc-home-pillar__masthead-count-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  opacity: 0.85;
}
@media (max-width: 640px) {
  .zc-home-pillar__masthead {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .zc-home-pillar__masthead-num { grid-row: 1; grid-column: 1; }
  .zc-home-pillar__masthead-rule--l {
    grid-row: 1; grid-column: 2; width: auto;
    background: linear-gradient(90deg, var(--zc-amber-a45) 0%, var(--zc-amber-a25) 50%, transparent 100%);
  }
  .zc-home-pillar__masthead-count { grid-row: 1; grid-column: 3; }
  .zc-home-pillar__eyebrow { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .zc-home-pillar__masthead-rule--r { display: none; }
}

.zc-home-pillar__title {
  margin: 0;
  font-family: var(--zc-f-display);
  font-size: clamp(26px, 2.2vw + 14px, 44px);
  font-weight: 300;
  line-height: 1.08; letter-spacing: -0.9px;
  color: var(--zc-charcoal);
}
.zc-home-pillar__title-accent {
  font-weight: 500;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* === RIBBON =============================================================
   The horizontal animated rail + 5 nodes. The rail sits at exactly
   50% of the ribbon height, the markers center on it via grid. */
.zc-home-pillar__ribbon {
  position: relative;
  padding: clamp(20px, 2.2vw, 36px) 0 clamp(20px, 2.2vw, 36px);
  margin-top: clamp(18px, 2vw, 28px);
}

/* The dashed amber rail. Background-position-x animates the dashes
   so the line looks like it's flowing. */
.zc-home-pillar__rail {
  position: absolute;
  left: clamp(40px, 6vw, 80px);
  right: clamp(40px, 6vw, 80px);
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background-image: linear-gradient(90deg,
    transparent 0%,
    transparent 6%,
    var(--zc-amber-dk) 6%,
    var(--zc-amber-dk) 11%,
    transparent 11%,
    transparent 16%);
  background-size: 16px 100%;
  background-repeat: repeat-x;
  animation: zc-home-pillar-rail-flow 1.8s linear infinite;
  opacity: 0.7;
}
@keyframes zc-home-pillar-rail-flow {
  from { background-position-x: 0; }
  to   { background-position-x: 16px; }
}
/* Soft amber light traveling along the rail — a slow shimmer pulse. */
.zc-home-pillar__rail-shimmer {
  position: absolute;
  left: clamp(40px, 6vw, 80px);
  right: clamp(40px, 6vw, 80px);
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, transparent 35%, var(--zc-amber-lt) 50%, transparent 65%, transparent 100%);
  background-size: 30% 100%;
  background-repeat: no-repeat;
  filter: blur(4px);
  opacity: 0.6;
  animation: zc-home-pillar-shimmer 5s ease-in-out infinite;
}
@keyframes zc-home-pillar-shimmer {
  0%   { background-position-x: -20%; }
  100% { background-position-x: 120%; }
}

/* === NODES ============================================================== */
.zc-home-pillar__nodes {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.2vw, 22px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.zc-home-pillar__node {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: stretch;
  min-height: 360px;
  opacity: 0;
  animation: zc-home-pillar-rise 0.8s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  animation-delay: var(--zc-pi-delay, 0s);
}
/* Column tether removed in favor of two short stem segments inside
   .zc-home-pillar__node-mid (see further down) — they sit only
   between the marker and the content, never over the text/image. */

@keyframes zc-home-pillar-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Top + bottom halves — alignment depends on which half holds the photo. */
.zc-home-pillar__node-top,
.zc-home-pillar__node-bottom {
  display: flex;
}
.zc-home-pillar__node-top    { align-items: flex-end;   padding-bottom: clamp(10px, 1vw, 16px); }
.zc-home-pillar__node-bottom { align-items: flex-start; padding-top:    clamp(10px, 1vw, 16px); }

/* === PHOTO ============================================================== */
.zc-home-pillar__node-photo {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--zc-linen);
  border-radius: 2px;
  contain: layout paint;
}
.zc-home-pillar__node-img {
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s var(--zc-ease),
              transform 1.2s cubic-bezier(0.32, 0.72, 0, 1),
              filter 0.6s var(--zc-ease);
  filter: saturate(0.94);
}
.zc-home-pillar__node-img[src]:not([src=""]),
.zc-home-pillar__node-img.is-loaded { opacity: 1; transform: scale(1); }
.zc-home-pillar__node:hover .zc-home-pillar__node-img {
  transform: scale(1.06);
  filter: saturate(1.05);
}
.zc-home-pillar__node-photo-tint {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(207, 138, 63, 0) 0%, rgba(207, 138, 63, 0.12) 100%);
  pointer-events: none;
}

/* === TEXT BLOCK ========================================================= */
.zc-home-pillar__node-text {
  width: 100%;
  text-align: left;
}
.zc-home-pillar__node-num {
  display: inline-block;
  margin-bottom: 6px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--zc-amber-dk);
}
.zc-home-pillar__node-title {
  margin: 0 0 8px;
  font-family: var(--zc-f-display);
  font-size: clamp(15px, 0.5vw + 11px, 19px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--zc-charcoal);
  transition: color 0.3s var(--zc-ease);
}
.zc-home-pillar__node:hover .zc-home-pillar__node-title { color: var(--zc-amber-dk); }
.zc-home-pillar__node-desc {
  margin: 0;
  font-family: var(--zc-f-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--zc-warm-dk);
}

/* === MARKER (icon circle on the rail) =================================== */
.zc-home-pillar__node-mid {
  display: grid;
  grid-template-rows: 36px auto 36px; /* short stem · marker · short stem */
  justify-items: center;
  align-items: center;
}
/* Short stem segments connecting the marker to the content directly
   above and below — animated dashed amber pattern. They live inside
   the mid row (between content rows), so they NEVER overlap image
   or text. This is what visually anchors marker N°XX to its column. */
.zc-home-pillar__node-stem {
  width: 2px;
  height: 100%;
  background-image: linear-gradient(180deg,
    var(--zc-amber-dk) 0%, var(--zc-amber-dk) 50%,
    transparent 50%, transparent 100%);
  background-size: 100% 8px;
  background-repeat: repeat-y;
  opacity: 0.7;
  animation: zc-home-pillar-stem-flow 1.8s linear infinite;
}
@keyframes zc-home-pillar-stem-flow {
  from { background-position-y: 0; }
  to   { background-position-y: 8px; }
}
.zc-home-pillar__node-stem--up   {
  /* Fades from transparent (where the image/text edge is) into
     amber as it approaches the marker. */
  mask-image: linear-gradient(180deg, transparent 0%, black 70%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 70%, black 100%);
}
.zc-home-pillar__node-stem--down {
  /* Fades from amber at the marker into transparent before reaching
     the content below. */
  mask-image: linear-gradient(180deg, black 0%, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 30%, transparent 100%);
}
.zc-home-pillar__node:hover .zc-home-pillar__node-stem { opacity: 1; }

.zc-home-pillar__node-marker {
  position: relative;
  width: 64px; height: 64px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  z-index: 2; /* punches above the vertical column line + horizontal rail */
}
/* Outer pulsing ring */
.zc-home-pillar__node-marker-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--zc-amber-a45);
  opacity: 0;
  animation: zc-home-pillar-pulse 3s ease-in-out infinite;
  animation-delay: calc(var(--zc-pi-delay, 0s) + 0.2s);
}
@keyframes zc-home-pillar-pulse {
  0%, 100% { opacity: 0; transform: scale(0.92); }
  50%      { opacity: 0.7; transform: scale(1.06); }
}
/* The amber gradient core that holds the icon */
.zc-home-pillar__node-marker-core {
  width: 100%; height: 100%;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt) 0%, var(--zc-amber) 55%, var(--zc-amber-dk) 100%);
  color: var(--zc-white);
  font-size: 22px;
  border: 4px solid var(--zc-snow, #fdfbf6);
  box-shadow:
    0 0 0 1px var(--zc-amber-a45),
    0 12px 26px -8px var(--zc-amber-a45),
    0 6px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.zc-home-pillar__node:hover .zc-home-pillar__node-marker-core {
  transform: scale(1.08) rotate(-6deg);
  box-shadow:
    0 0 0 1px var(--zc-amber-dk),
    0 18px 38px -10px var(--zc-amber-a45),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

/* === MOBILE — horizontal scroller, image → text only ====================
   Each card is a uniform stack: image on top, text below. The icon
   marker + connecting rail are dropped on mobile for a cleaner
   minimal scroll. Title / first-card gap and section bottom padding
   are tightened. */
@media (max-width: 991px) {
  .zc-home-pillar { padding-bottom: clamp(8px, 1vw, 12px); }
  .zc-home-pillar__head { margin-bottom: 12px; }
  .zc-home-pillar__ribbon { margin: 0; }
  .zc-home-pillar__rail,
  .zc-home-pillar__rail-shimmer { display: none; }

  /* Scroller sits inside the inner's standard mobile padding, so the
     first card's left edge aligns with the section heading. A small
     right padding gives a peek-of-next-card cue. */
  .zc-home-pillar__nodes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 16px;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px 0 0;
  }
  .zc-home-pillar__nodes::-webkit-scrollbar { display: none; }

  .zc-home-pillar__node {
    flex: 0 0 74%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    scroll-snap-align: start;
    padding: 0;
  }

  /* Uniform stack: image on top, text below for both is-up and is-down
     nodes. Use flex order to remap the existing top/bottom slots. */
  .zc-home-pillar__node.is-up .zc-home-pillar__node-top    { order: 1; } /* image */
  .zc-home-pillar__node.is-up .zc-home-pillar__node-bottom { order: 2; } /* text  */
  .zc-home-pillar__node.is-down .zc-home-pillar__node-bottom { order: 1; } /* image */
  .zc-home-pillar__node.is-down .zc-home-pillar__node-top    { order: 2; } /* text  */

  /* Icon marker + connecting rail removed on mobile. */
  .zc-home-pillar__node-mid { display: none; }
  .zc-home-pillar__node-stem { display: none; }

  .zc-home-pillar__node-top,
  .zc-home-pillar__node-bottom {
    align-items: flex-start;
    padding: 0;
    margin: 0 0 10px;
  }
  .zc-home-pillar__node-photo {
    max-width: none;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .zc-home-pillar__node-text { padding: 0; }
  .zc-home-pillar__node-num   { font-size: 9.5px; letter-spacing: 1.6px; margin-bottom: 4px; }
  .zc-home-pillar__node-title { font-size: 14.5px; margin-bottom: 6px; line-height: 1.25; }
  .zc-home-pillar__node-desc  { font-size: 12px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .zc-home-pillar__shape--1,
  .zc-home-pillar__rail,
  .zc-home-pillar__rail-shimmer,
  .zc-home-pillar__node,
  .zc-home-pillar__node-marker-ring { animation: none; opacity: 1; }
  .zc-home-pillar__rail-shimmer { opacity: 0; }
  .zc-home-pillar__node-marker-ring { opacity: 0.6; }
}
/* ==========================================================================

/* ==========================================================================
   §4  ABOUT THE CLINIC — magazine-editorial composition (.zc-home-clinic)
   --------------------------------------------------------------------------
   Asymmetric, layered, intentional. Locked to ~50vh desktop / ~45vh mobile.
   ========================================================================== */
.zc-home-clinic {
  position: relative;
  min-height: 45vh;
  padding: clamp(14px, 1.6vw, 22px) 0 clamp(16px, 2vw, 26px);
  background:
    radial-gradient(ellipse at 92% 8%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(46, 75, 113, 0.08)  0%, transparent 55%),
    linear-gradient(180deg, var(--zc-snow) 0%, var(--zc-off-white) 100%);
  overflow: hidden;
}

/* Editorial top-rule — gold mark + "Est. 2013 · Siliguri" + thin rule */
.zc-home-clinic__topline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--zc-pad-x);
  margin-bottom: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 991px) { .zc-home-clinic__topline { padding: 0 var(--zc-pad-x-mb); } }

.zc-home-clinic__mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-deep));
  border: 1px solid var(--zc-amber-a45);
  color: var(--zc-amber-lt);
  font-family: var(--zc-f-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(18, 12, 4, 0.18);
}
.zc-home-clinic__topline-text {
  font-family: var(--zc-f-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--zc-warm-dk);
  flex-shrink: 0;
}
.zc-home-clinic__topline-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-a45), transparent);
}
.zc-home-clinic__topline-stars {
  display: inline-flex; gap: 6px;
  color: var(--zc-amber);
  font-size: 8px;
  flex-shrink: 0;
  opacity: 0.6;
}

.zc-home-clinic__inner {
  width: 100%;
  padding-left: var(--zc-pad-x);
  padding-right: var(--zc-pad-x);
}
@media (max-width: 991px) {
  .zc-home-clinic__inner { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}

.zc-home-clinic__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;            /* visual matches editorial column height */
}
@media (max-width: 991px) {
  .zc-home-clinic__layout { grid-template-columns: 1fr; gap: 36px; align-items: center; }
}


/* ============== VISUAL — multi-image composition ============== */
.zc-home-clinic__visual {
  position: relative;
  isolation: isolate;
  height: 100%;                    /* fill the editorial column height — no top/bottom void */
  min-height: clamp(380px, 42vh, 460px);
}
@media (max-width: 991px) { .zc-home-clinic__visual { height: clamp(380px, 50vh, 460px); } }

/* MAIN image card — wide rectangle (not square), sits middle-band of visual.
   Shorter height leaves room for the years badge above and the sub image below. */
.zc-home-clinic__main {
  position: relative;
  margin: 7% 0 0 2%;
  width: 82%;
  height: 70%;                     /* shorter than visual stage → landscape rectangle */
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 28px 50px rgba(18, 12, 4, 0.20),
    0 8px 18px rgba(46, 75, 113, 0.12);
  z-index: 1;
}
.zc-home-clinic__main-img {
  /* !important overrides the two global .lazy rules in core.css
     (max-width: 40% / height: auto). The figure container is the
     real size; this image must fill it edge-to-edge. */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  transition: transform 9s var(--zc-ease-out);
}
.zc-home-clinic__main:hover .zc-home-clinic__main-img { transform: scale(1.06); }
.zc-home-clinic__main-tint {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(207, 138, 63, 0.14) 0%, transparent 45%, rgba(46, 75, 113, 0.16) 100%);
  mix-blend-mode: multiply;
}

/* "12+ years of trust" — own floating card, sits in the empty top band on the right
   (above the main image), so it never sits on top of the photo. */
.zc-home-clinic__years {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 8px 12px;
  background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-deep));
  border: 1px solid rgba(207, 138, 63, 0.40);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 18px 36px rgba(18, 12, 4, 0.28);
  animation: zc-home-clinic-float-2 8s ease-in-out infinite;
}
.zc-home-clinic__years::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--zc-amber), transparent);
  border-radius: 14px 14px 0 0;
}
.zc-home-clinic__years-num {
  font-family: var(--zc-f-display);
  font-size: 28px; font-weight: 500; letter-spacing: -1px; line-height: 1;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.zc-home-clinic__years-num sup {
  font-size: 16px; vertical-align: super;
  -webkit-text-fill-color: var(--zc-amber-lt);
  color: var(--zc-amber-lt);
}
.zc-home-clinic__years-text {
  font-family: var(--zc-f-heading);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--zc-amber-lt);
  line-height: 1.25;
}

/* SUB image — anchored to the bottom-right of the visual stage,
   sized to overlap the main image's bottom-right quadrant so the
   composition reads as a real magazine spread. Mobile breakpoints
   further down keep their own narrower values. */
.zc-home-clinic__sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65%;
  height: 35%;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 5px solid var(--zc-pearl);
  box-shadow:
    0 18px 36px rgba(18, 12, 4, 0.22),
    0 4px 10px rgba(46, 75, 113, 0.08);
  z-index: 4;
  transition: transform 0.5s var(--zc-ease-spring);
}
.zc-home-clinic__sub:hover { transform: scale(1.03); }
.zc-home-clinic__sub-img {
  /* See note on .zc-home-clinic__main-img — same .lazy cap override. */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

/* STAT card — sits OFF the left edge of main, only ~20% on photo. */
.zc-home-clinic__stat {
  position: absolute;
  left: 0; bottom: 14%;             /* fully on the left of main — minimal overlap */
  z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 13px 11px;
  width: 165px;                     /* tighter card */
  background: linear-gradient(180deg, var(--zc-pearl), var(--zc-snow));
  border: 1px solid var(--zc-linen);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 36px rgba(18, 12, 4, 0.16);
  animation: zc-home-clinic-float-1 6s ease-in-out infinite;
}
.zc-home-clinic__stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--zc-amber-lt), transparent);
  border-radius: 16px 16px 0 0;
}
.zc-home-clinic__stat-num {
  font-family: var(--zc-f-display);
  font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -1.2px;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.zc-home-clinic__stat-num sup {
  font-size: 18px; vertical-align: super;
  -webkit-text-fill-color: var(--zc-amber-dk);
  color: var(--zc-amber-dk);
}
.zc-home-clinic__stat-text b {
  display: block;
  font-family: var(--zc-f-display); font-size: 13px; color: var(--zc-charcoal); font-weight: 500;
  letter-spacing: -0.1px;
}
.zc-home-clinic__stat-text small {
  display: block;
  font-family: var(--zc-f-accent); font-size: 11px; color: var(--zc-warm-mid);
  margin-top: 1px;
}
.zc-home-clinic__stat-bars {
  display: flex; gap: 3px; margin-top: 8px;
  height: 4px;
}
.zc-home-clinic__stat-bars span {
  flex: 1;
  background: var(--zc-amber-a18);
  border-radius: 2px;
  transition: background 0.5s var(--zc-ease);
}
.zc-home-clinic__stat-bars span:nth-child(1),
.zc-home-clinic__stat-bars span:nth-child(2),
.zc-home-clinic__stat-bars span:nth-child(3) { background: linear-gradient(90deg, var(--zc-amber), var(--zc-amber-dk)); }

@keyframes zc-home-clinic-float-1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* QUOTE card — sits in the right gap above the sub image. Mostly OFF
   the main image (~15% overlap on the right edge of main). */
.zc-home-clinic__quote {
  position: absolute;
  right: 4%;
  top: 36%;
  z-index: 5;
  width: 220px;
  padding: 13px 14px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(18, 12, 4, 0.22);
  animation: zc-home-clinic-float-2 7s ease-in-out infinite;
}
@keyframes zc-home-clinic-float-2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.zc-home-clinic__quote-mark {
  position: absolute;
  top: 6px; right: 14px;
  font-size: 42px;
  color: var(--zc-amber-a35);
  line-height: 1;
}
.zc-home-clinic__quote-text {
  font-family: var(--zc-f-display);
  font-size: 14px; line-height: 1.5;
  color: var(--zc-charcoal);
  font-weight: 500;
  margin: 0 0 14px 0;
  letter-spacing: -0.1px;
}
.zc-home-clinic__quote-author {
  display: flex; align-items: center; gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--zc-linen);
}
.zc-home-clinic__quote-avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
  font-family: var(--zc-f-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px var(--zc-amber-a35);
}
.zc-home-clinic__quote-author b {
  display: block;
  font-family: var(--zc-f-display); font-size: 12.5px; color: var(--zc-charcoal); font-weight: 500;
}
.zc-home-clinic__quote-author small {
  display: block;
  font-family: var(--zc-f-accent); font-size: 10.5px; color: var(--zc-warm-mid);
  letter-spacing: 0.2px;
}

/* Decorative rings (back layer) */
/* Decorative rings — water-pulse + outward wave-ripple */
.zc-home-clinic__ring {
  position: absolute;
  border: 1px solid var(--zc-amber-a25);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.zc-home-clinic__ring::before,
.zc-home-clinic__ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
}
.zc-home-clinic__ring--1 {
  top: -50px; right: -60px;
  width: 200px; height: 200px;
  color: var(--zc-amber-a35);
  box-shadow: inset 0 0 0 30px transparent, inset 0 0 0 31px var(--zc-amber-a08);
  animation: zc-home-clinic-ring-breathe 6s ease-in-out infinite;
}
.zc-home-clinic__ring--1::before { animation: zc-home-clinic-ring-wave 4.5s ease-out infinite; }
.zc-home-clinic__ring--1::after  { animation: zc-home-clinic-ring-wave 4.5s ease-out infinite -2.25s; }

.zc-home-clinic__ring--2 {
  bottom: -40px; left: 6%;
  width: 140px; height: 140px;
  border-color: var(--zc-navy-a15);
  color: var(--zc-navy-a25, rgba(46, 75, 113, 0.30));
  box-shadow: inset 0 0 0 22px transparent, inset 0 0 0 23px var(--zc-navy-a08);
  animation: zc-home-clinic-ring-breathe 7.5s ease-in-out infinite reverse;
}
.zc-home-clinic__ring--2::before { animation: zc-home-clinic-ring-wave 5.5s ease-out infinite -1s; }
.zc-home-clinic__ring--2::after  { animation: zc-home-clinic-ring-wave 5.5s ease-out infinite -3.75s; }

@keyframes zc-home-clinic-ring-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1;    }
}
@keyframes zc-home-clinic-ring-wave {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { opacity: 0.18; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Floating gold dots — sprinkle */
.zc-home-clinic__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.zc-home-clinic__dots span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 12px var(--zc-amber-a45);
}
.zc-home-clinic__dots span:nth-child(1) { top: 8%;  right: 35%; animation: zc-home-clinic-dot 4s ease-in-out infinite; }
.zc-home-clinic__dots span:nth-child(2) { bottom: 15%; left: 30%; animation: zc-home-clinic-dot 5.5s ease-in-out infinite -1.5s; width: 4px; height: 4px; }
.zc-home-clinic__dots span:nth-child(3) { top: 60%; right: 8%;  animation: zc-home-clinic-dot 6s ease-in-out infinite -3s; width: 5px; height: 5px; }
@keyframes zc-home-clinic-dot {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.5); }
}


/* ============== EDITORIAL — typography column ============== */
.zc-home-clinic__editorial { display: flex; flex-direction: column; }

.zc-home-clinic__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start;
  font-family: var(--zc-f-heading);
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  margin-bottom: 10px;
  padding: 0;
  background: none; border: none; box-shadow: none; border-radius: 0;
}
.zc-home-clinic__eyebrow-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  box-shadow: 0 0 10px var(--zc-amber-a45);
}

.zc-home-clinic__title {
  font-family: var(--zc-f-display);
  font-size: clamp(26px, 2vw + 10px, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--zc-charcoal);
  margin: 0 0 12px 0;
}
.zc-home-clinic__title-accent {
  font-weight: 500;
  font-style: normal;
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber), var(--zc-amber-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  position: relative;
  display: inline-block;
}
.zc-home-clinic__title-accent::after {
  /* Hand-drawn underline accent */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 8px;
  background:
    radial-gradient(ellipse at center, var(--zc-amber-a35) 0%, transparent 70%);
  z-index: -1;
}

.zc-home-clinic__lead {
  font-family: var(--zc-f-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--zc-warm-dk);
  margin: 0 0 14px 0;
}

/* 2x2 stats grid — premium tiles with gradient numbers */
.zc-home-clinic__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.zc-home-clinic__stat-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: linear-gradient(180deg, var(--zc-pearl), var(--zc-snow));
  border: 1px solid var(--zc-linen);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s var(--zc-ease-spring), box-shadow 0.3s ease;
}
.zc-home-clinic__stat-tile:hover {
  border-color: var(--zc-amber-a35);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(207, 138, 63, 0.12);
}
.zc-home-clinic__stat-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--zc-amber-lt), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zc-home-clinic__stat-tile:hover::before { opacity: 1; }

.zc-home-clinic__stat-tile-ic {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
  font-size: 15px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 6px 14px var(--zc-amber-a35);
  transition: transform 0.4s var(--zc-ease-spring);
}
.zc-home-clinic__stat-tile:hover .zc-home-clinic__stat-tile-ic {
  transform: scale(1.06) rotate(-4deg);
}
.zc-home-clinic__stat-tile-body { min-width: 0; }
.zc-home-clinic__stat-tile-num {
  font-family: var(--zc-f-display);
  font-size: 22px; font-weight: 500; letter-spacing: -0.8px; line-height: 1;
  background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-amber-dk));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 2px;
}
.zc-home-clinic__stat-tile-num small {
  font-size: 14px;
  -webkit-text-fill-color: var(--zc-amber-dk);
  color: var(--zc-amber-dk);
}
.zc-home-clinic__stat-tile-label {
  font-family: var(--zc-f-display);
  font-size: 12.5px; font-weight: 500;
  color: var(--zc-charcoal);
  letter-spacing: -0.05px;
  margin-bottom: 1px;
}
.zc-home-clinic__stat-tile-sub {
  font-family: var(--zc-f-accent);
  font-size: 10.5px; color: var(--zc-warm-mid);
  letter-spacing: 0.2px;
}

/* Meta — two stacked rows:
     row 1: Languages | divider | Care team avatars
     row 2: glass "Meet our team" button (full width)
*/
.zc-home-clinic__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 12px;
  background: var(--zc-white);
  border: 1px solid var(--zc-linen);
  border-radius: 12px;
  margin-bottom: 10px;
}
.zc-home-clinic__meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.zc-home-clinic__meta-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.zc-home-clinic__meta-div {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--zc-linen) 30%, var(--zc-linen) 70%, transparent);
}
@media (max-width: 480px) {
  .zc-home-clinic__meta-row { gap: 10px; }
}
.zc-home-clinic__meta-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--zc-f-heading); font-size: 9.5px;
  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--zc-warm-mid);
}
.zc-home-clinic__meta-label i { color: var(--zc-amber-dk); font-size: 11px; }

.zc-home-clinic__langs { display: flex; gap: 5px; }
.zc-home-clinic__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px;
  padding: 0 8px;
  background: linear-gradient(135deg, var(--zc-amber-a08), var(--zc-amber-a18));
  border: 1px solid var(--zc-amber-a25);
  border-radius: 7px;
  font-family: var(--zc-f-heading);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--zc-amber-dk);
  transition: all 0.3s var(--zc-ease-spring);
}
.zc-home-clinic__lang:hover {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white); border-color: var(--zc-amber-dk);
  transform: translateY(-1px);
}

.zc-home-clinic__avatars {
  display: inline-flex;
  flex-direction: row-reverse;
}
.zc-home-clinic__avatar {
  position: relative;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
  font-family: var(--zc-f-heading);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px;
  border: 2px solid var(--zc-white);
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(18, 12, 4, 0.18);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s var(--zc-ease-spring), box-shadow 0.3s var(--zc-ease);
  cursor: pointer;
}
.zc-home-clinic__avatar:first-child { margin-left: 0; }
.zc-home-clinic__avatar:hover {
  transform: translateY(-3px) scale(1.08);
  z-index: 2;
  box-shadow: 0 6px 14px rgba(207, 138, 63, 0.45);
}
/* Initials read as the amber-gradient backdrop; the doctor photo layers
   on top and covers them once loaded by the site-wide lazy loader. */
.zc-home-clinic__avatar-init {
  position: relative;
  z-index: 1;
  color: var(--zc-white);
}
.zc-home-clinic__avatar-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.35s var(--zc-ease);
}
.zc-home-clinic__avatar-img[src]:not([src=""]),
.zc-home-clinic__avatar-img.is-loaded { opacity: 1; }
.zc-home-clinic__avatar--more {
  background: var(--zc-charcoal);
  color: var(--zc-amber-lt);
  font-size: 9.5px;
}

/* Meet our team — glass button on row 2 of meta box */
.zc-home-clinic__meta-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 10px 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.45)),
    linear-gradient(135deg, var(--zc-amber-a08), var(--zc-amber-a18));
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--zc-amber-a25);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 6px 14px rgba(207, 138, 63, 0.10);
  font-family: var(--zc-f-heading);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  text-decoration: none;
  overflow: hidden;
  transition: all 0.4s var(--zc-ease-spring);
}
.zc-home-clinic__meta-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--zc-ease);
}
.zc-home-clinic__meta-cta:hover {
  border-color: var(--zc-amber-dk);
  color: var(--zc-amber-dk);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 12px 22px rgba(207, 138, 63, 0.18);
  transform: translateY(-1px);
}
.zc-home-clinic__meta-cta:hover::before { left: 130%; }
.zc-home-clinic__meta-cta i { font-size: 13px; }
.zc-home-clinic__meta-cta-arrow {
  margin-left: auto;
  transition: transform 0.4s var(--zc-ease-spring);
}
.zc-home-clinic__meta-cta:hover .zc-home-clinic__meta-cta-arrow { transform: translateX(3px); }

/* Founder byline — small refined attribution under the lead */
.zc-home-clinic__founder {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  background:
    linear-gradient(135deg, rgba(207, 138, 63, 0.06), rgba(46, 75, 113, 0.04));
  border: 1px solid var(--zc-amber-a18);
  border-left: 3px solid var(--zc-amber);
  border-radius: 10px;
}
.zc-home-clinic__founder-mark {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white); font-size: 16px;
  box-shadow: 0 5px 12px var(--zc-amber-a35);
}
.zc-home-clinic__founder-text {
  font-family: var(--zc-f-accent);
  font-size: 12px; color: var(--zc-warm-dk);
  line-height: 1.35;
  letter-spacing: 0.2px;
}
.zc-home-clinic__founder-text b {
  display: inline-block;
  color: var(--zc-charcoal);
  font-family: var(--zc-f-display);
  font-weight: 500; font-size: 13.5px;
  letter-spacing: -0.1px;
  margin: 0 4px;
}
.zc-home-clinic__founder-text small {
  display: block;
  font-family: var(--zc-f-accent);
  font-size: 10.5px; color: var(--zc-warm-mid);
  letter-spacing: 0.3px; margin-top: 1px;
}

/* Patient-attractor pills
   ─────────────────────────
   Desktop: pills sit naturally in one inline row (icon + text inline).
   Mobile : single row, horizontally scrollable; each pill stacks icon-on-top
            with text below for a compact tile feel. */
.zc-home-clinic__attractors {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 12px 0;
}
.zc-home-clinic__attractor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  background: linear-gradient(135deg, var(--zc-amber-a08), var(--zc-amber-a18));
  border: 1px solid var(--zc-amber-a25);
  border-radius: 999px;
  font-family: var(--zc-f-accent);
  font-size: 11.5px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--zc-warm-dk);
  text-align: center;
  white-space: nowrap;
  transition: transform 0.3s var(--zc-ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
}
.zc-home-clinic__attractor:hover {
  transform: translateY(-2px);
  border-color: var(--zc-amber-dk);
  box-shadow: 0 8px 18px rgba(207, 138, 63, 0.18);
}
.zc-home-clinic__attractor i {
  font-size: 13px;
  color: var(--zc-amber-dk);
}
.zc-home-clinic__attractor b {
  font-family: var(--zc-f-heading);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
}

/* Mobile — single row, all 4 fit 100% width (no scroll/gap), icon ↑ + text ↓ */
@media (max-width: 991px) {
  .zc-home-clinic__attractors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .zc-home-clinic__attractor {
    flex-direction: column;       /* icon on top, text below */
    align-items: center;
    gap: 4px;
    padding: 9px 6px;
    min-width: 0;
    border-radius: 14px;          /* tile-feel rather than pure pill */
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
  .zc-home-clinic__attractor i { font-size: 16px; }
  .zc-home-clinic__attractor b {
    display: block;
    font-size: 10px;
    letter-spacing: 0.5px;
  }
}

/* CTA box — single primary action, wrapped in a soft amber card */
.zc-home-clinic__cta-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(207, 138, 63, 0.08), rgba(46, 75, 113, 0.05)),
    var(--zc-white);
  border: 1px solid var(--zc-amber-a25);
  border-left: 3px solid var(--zc-amber);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(207, 138, 63, 0.10);
  overflow: hidden;
}
.zc-home-clinic__cta-box::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--zc-amber-a18), transparent 70%);
  pointer-events: none;
}
.zc-home-clinic__cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zc-home-clinic__cta-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--zc-f-heading);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  margin-bottom: 2px;
}
.zc-home-clinic__cta-eyebrow i { font-size: 10px; }
.zc-home-clinic__cta-title {
  font-family: var(--zc-f-display);
  font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--zc-charcoal);
  line-height: 1.25;
}
.zc-home-clinic__cta-sub {
  display: block;
  font-family: var(--zc-f-accent);
  font-size: 11px;
  color: var(--zc-warm-mid);
  letter-spacing: 0.2px;
  margin-top: 3px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .zc-home-clinic__cta-box {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .zc-home-clinic__cta-box .zc-home-clinic__btn {
    justify-content: center;
    width: 100%;
  }
}

.zc-home-clinic__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--zc-f-heading);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  text-decoration: none;
  transition: all 0.4s var(--zc-ease-spring);
  white-space: nowrap;
}
.zc-home-clinic__btn--primary {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  color: var(--zc-white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 8px 20px var(--zc-amber-a35);
}
.zc-home-clinic__btn--primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
  color: var(--zc-white);
  box-shadow: 0 14px 28px var(--zc-amber-a45);
}
.zc-home-clinic__btn i { font-size: 13px; }

.zc-home-clinic__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--zc-f-heading);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--zc-charcoal);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease, gap 0.3s var(--zc-ease-spring);
}
.zc-home-clinic__link::after {
  content: '';
  position: absolute;
  left: 0; right: 22px; bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--zc-amber-dk), var(--zc-amber-lt));
  transform-origin: left;
  transform: scaleX(0.4);
  transition: transform 0.45s var(--zc-ease-spring);
}
.zc-home-clinic__link:hover { color: var(--zc-amber-dk); gap: 10px; }
.zc-home-clinic__link:hover::after { transform: scaleX(1); }
.zc-home-clinic__link i { transition: transform 0.4s var(--zc-ease-spring); }
.zc-home-clinic__link:hover i { transform: translateX(3px); }


/* ============== MOBILE ==============
   Layout per corner of the visual stage:
     top-left    : Dr. Esha quote card (small, glass)
     top-right   : 12+ years badge
     bottom-left : 5,000+ babies stat (lifted higher than sub for asymmetry)
     bottom-right: sub image (grounded at bottom: 0)
*/
@media (max-width: 991px) {
  .zc-home-clinic__visual { padding: 0; }

  /* Main — full-width feature photo, top-anchored with small offset for quote */
  .zc-home-clinic__main   { width: 100%; margin: 8% 0 0 0; height: 75%; }

  /* Sub — bottom-right, grounded, slim overlap onto main */
  .zc-home-clinic__sub    { width: 36%; right: 2%; bottom: 0; height: 32%; border-width: 4px; }

  /* 12+ Years — top-right, lifted just above main */
  .zc-home-clinic__years  { top: 0; right: 2%; padding: 8px 12px; gap: 8px; }
  .zc-home-clinic__years-num { font-size: 24px; }
  .zc-home-clinic__years-num sup { font-size: 14px; }
  .zc-home-clinic__years-text { font-size: 9px; letter-spacing: 1.2px; }

  /* Dr. Esha quote — top-left, LONG & THIN pill, quote text in one line.
     Author block hidden on mobile so the card stays compact horizontally. */
  .zc-home-clinic__quote {
    display: flex;
    align-items: center;
    gap: 8px;
    top: 0; left: 2%; right: auto;
    width: auto;
    max-width: 60%;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
  }
  .zc-home-clinic__quote-mark { display: none; }
  .zc-home-clinic__quote-text {
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .zc-home-clinic__quote-author { display: none; }

  /* Tiny avatar lives inline at the start of the pill — pulled in via ::before */
  .zc-home-clinic__quote::before {
    content: 'ES';
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    font-family: var(--zc-f-heading);
    font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px;
  }

  /* 5,000+ babies stat — bottom-left, dropped LOW so only its top ~10%
     overlaps the main image bottom edge. Sits below the photo line. */
  .zc-home-clinic__stat {
    display: flex;
    left: 2%; bottom: 4%;
    width: 138px;
    padding: 9px 11px 8px;
    border-radius: 12px;
  }
  .zc-home-clinic__stat-num { font-size: 22px; }
  .zc-home-clinic__stat-num sup { font-size: 13px; }
  .zc-home-clinic__stat-text b { font-size: 11px; }
  .zc-home-clinic__stat-text small { font-size: 9.5px; }
  .zc-home-clinic__stat-bars { margin-top: 5px; height: 3px; }

  /* Decorative dots — kept hidden on mobile, they crowd the small stage */
  .zc-home-clinic__dots { display: none; }
}

@media (max-width: 768px) {
  .zc-home-clinic { min-height: 0; }
  .zc-home-clinic__visual { height: clamp(320px, 48vh, 400px); min-height: 0; }
  .zc-home-clinic__main   { width: 100%; margin: 9% 0 0 0; height: 73%; border-radius: 16px; }
  .zc-home-clinic__sub    { width: 38%; right: 2%; bottom: 0; height: 30%; }
  .zc-home-clinic__quote  { max-width: 64%; }
  .zc-home-clinic__stat   { width: 130px; bottom: 5%; }
  .zc-home-clinic__topline-text { font-size: 10px; letter-spacing: 1.6px; }
  .zc-home-clinic__topline-stars { display: none; }
}

@media (max-width: 480px) {
  .zc-home-clinic__visual { height: clamp(300px, 46vh, 360px); }
  .zc-home-clinic__main   { width: 100%; margin: 10% 0 0 0; height: 70%; border-radius: 14px; }
  .zc-home-clinic__sub    { width: 38%; right: 2%; bottom: 0; height: 28%; border-width: 3px; }
  .zc-home-clinic__years  { padding: 6px 10px 6px 9px; gap: 7px; }
  .zc-home-clinic__years-num { font-size: 21px; }
  .zc-home-clinic__years-num sup { font-size: 13px; }
  .zc-home-clinic__years-text { font-size: 8.5px; letter-spacing: 1.1px; }
  .zc-home-clinic__quote  { padding: 6px 12px 6px 10px; max-width: 68%; }
  .zc-home-clinic__quote-text { font-size: 10px; }
  .zc-home-clinic__quote::before { width: 20px; height: 20px; font-size: 8px; }
  .zc-home-clinic__stat   { width: 122px; bottom: 6%; padding: 8px 10px 7px; }
  .zc-home-clinic__stat-num { font-size: 20px; }

  /* Editorial — keep attractor pills as 2x2 (already grid-based), trim sizes */
  .zc-home-clinic__stats-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .zc-home-clinic__stat-tile  { padding: 10px 11px; gap: 8px; }
  .zc-home-clinic__stat-tile-ic   { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
  .zc-home-clinic__stat-tile-num  { font-size: 19px; }
  .zc-home-clinic__stat-tile-label{ font-size: 11px; }
  .zc-home-clinic__stat-tile-sub  { font-size: 9.5px; }
  .zc-home-clinic__attractor      { font-size: 10px; padding: 8px 5px; gap: 3px; }
  .zc-home-clinic__attractor i    { font-size: 14px; }
  .zc-home-clinic__attractor b    { font-size: 9.5px; }
  .zc-home-clinic__founder        { padding: 9px 11px; gap: 9px; }
  .zc-home-clinic__founder-mark   { width: 30px; height: 30px; font-size: 13px; }
}