/* ==========================================================================
   ZIVAH · OUR NUMBERS
   --------------------------------------------------------------------------
   Loaded AFTER core.css. Inherits all `--zc-*` brand tokens.
   Class prefix per section: .zc-num-{section}__*
   LOCKED RULES:
     • NO max-width caps anywhere, full-bleed sections.
     • Container padding: var(--zc-pad-x) / var(--zc-pad-x-mb)
     • Two brand colors per section: AMBER + NAVY
     • No gradient body-text, no italic, no em-dashes
   --------------------------------------------------------------------------
   §0   Page reset
   §1   Hero — editorial intro + KPI strip
   §2   Headline numbers — 4 counter cards
   §3   Care team — 4 amber/navy counter tiles
   §4   Scope — 4 service-category cards with sub-lists
   §5   Quality signals — 4 promise tiles + footnote
   §6   Closing CTA
   §7   Mobile / tablet responsive overrides
   ========================================================================== */


/* §0  ==== PAGE RESET ============================================== */
body .content-wrap.my-wrap-no-padding { padding: 0 !important; }
body .content-wrap.my-wrap-no-padding > div + div,
body .content-wrap.my-wrap-no-padding section { margin: 0; }


/* ==========================================================================
   §1   HERO
   ========================================================================== */
.zc-num-hero {
    position: relative;
    padding: clamp(14px, 1.6vw, 22px) 0 clamp(28px, 3.5vw, 50px);
    background:
        radial-gradient(ellipse at 92% 6%, rgba(207, 138, 63, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 8% 92%, rgba(46, 75, 113, 0.08)  0%, transparent 50%),
        linear-gradient(180deg, var(--zc-snow) 0%, var(--zc-off-white) 100%);
    overflow: hidden;
}
.zc-num-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-a25), var(--zc-navy-a15), transparent);
}

.zc-num-hero__topline {
    display: flex; align-items: center; gap: 14px;
    padding: 0 var(--zc-pad-x);
    margin-bottom: clamp(14px, 1.6vw, 20px);
}
.zc-num-hero__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-num-hero__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-num-hero__topline-rule {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-a45), transparent);
}
.zc-num-hero__topline-stars {
    display: inline-flex; gap: 6px; color: var(--zc-amber);
    font-size: 8px; flex-shrink: 0; opacity: 0.6;
}

.zc-num-hero__inner {
    position: relative; z-index: 1;
    width: 100%;
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}

.zc-num-hero__crumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 clamp(20px, 2.5vw, 32px);
    font-family: var(--zc-f-heading); font-size: 11.5px;
    font-weight: 600; letter-spacing: 0.4px;
}
.zc-num-hero__crumb-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    text-decoration: none; color: var(--zc-warm-dk);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--zc-linen);
    transition: all 0.3s var(--zc-ease);
}
.zc-num-hero__crumb-link:hover { color: var(--zc-amber-dk); border-color: var(--zc-amber-a35); background: rgba(255, 255, 255, 0.95); }
.zc-num-hero__crumb-sep { color: var(--zc-stone); font-size: 9px; }
.zc-num-hero__crumb-current {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    box-shadow: 0 6px 14px var(--zc-amber-a35);
}

.zc-num-hero__layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    margin-bottom: clamp(20px, 2.4vw, 36px);
}
.zc-num-hero__editorial { display: flex; flex-direction: column; }
.zc-num-hero__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: 12px;
}
.zc-num-hero__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-num-hero__title {
    font-family: var(--zc-f-display);
    font-size: clamp(30px, 3vw + 12px, 56px);
    font-weight: 300; line-height: 1.05; letter-spacing: -1.4px;
    color: var(--zc-charcoal); margin: 0 0 14px 0;
}
.zc-num-hero__title-accent {
    font-weight: 500; position: relative; display: inline-block;
    color: var(--zc-amber-dk);
}
.zc-num-hero__title-accent::after {
    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-num-hero__lead {
    font-family: var(--zc-f-body);
    font-size: 15px; line-height: 1.65; color: var(--zc-warm-dk);
    margin: 0 0 22px 0;
}

.zc-num-hero__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-num-hero__chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 999px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    font-family: var(--zc-f-heading); font-size: 11px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--zc-warm-dk);
    text-decoration: none;
    transition: all 0.35s var(--zc-ease-spring);
}
.zc-num-hero__chip i { font-size: 12px; color: var(--zc-amber-dk); }
.zc-num-hero__chip:hover {
    transform: translateY(-2px); border-color: var(--zc-amber-a35);
    color: var(--zc-amber-dk); box-shadow: 0 8px 18px rgba(207, 138, 63, 0.12);
}

/* Floating ambient gold dots & pulse rings — hero decoration */
.zc-num-hero__dots {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
}
.zc-num-hero__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);
    animation: zc-num-dot 5s ease-in-out infinite;
}
.zc-num-hero__dots span:nth-child(1) { top: 14%;  right: 32%; animation-delay: 0s;   }
.zc-num-hero__dots span:nth-child(2) { bottom: 28%; left: 26%; animation-delay: -1.5s; width: 4px; height: 4px; }
.zc-num-hero__dots span:nth-child(3) { top: 62%;  right: 6%;  animation-delay: -3s;   width: 5px; height: 5px; }
.zc-num-hero__dots span:nth-child(4) { top: 32%;  left: 4%;   animation-delay: -2s;   width: 4px; height: 4px; }
.zc-num-hero__dots span:nth-child(5) { top: 80%;  right: 42%; animation-delay: -4s;   width: 5px; height: 5px; }
@keyframes zc-num-dot {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.5); }
}
.zc-num-hero__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none; z-index: 0;
}
.zc-num-hero__ring--1 {
    top: -120px; right: -100px;
    width: 320px; height: 320px;
    border: 1px solid var(--zc-amber-a25);
    box-shadow: inset 0 0 0 50px transparent, inset 0 0 0 51px var(--zc-amber-a08);
    animation: zc-num-ring-breathe 7s ease-in-out infinite;
}
.zc-num-hero__ring--2 {
    bottom: -90px; left: 6%;
    width: 220px; height: 220px;
    border: 1px solid var(--zc-navy-a15);
    box-shadow: inset 0 0 0 30px transparent, inset 0 0 0 31px rgba(46, 75, 113, 0.06);
    animation: zc-num-ring-breathe 9s ease-in-out infinite reverse;
}
@keyframes zc-num-ring-breathe {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.05); opacity: 1;    }
}

/* Hero art-poster (replaces KPI strip) */
.zc-num-hero__poster {
    position: relative;
    background:
        radial-gradient(ellipse at 8% 8%, rgba(207, 138, 63, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(46, 75, 113, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%);
    border: 1px solid var(--zc-linen);
    border-radius: 4px;
    padding: clamp(24px, 2.4vw, 36px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 22px 50px -24px rgba(106, 70, 24, 0.34);
    overflow: hidden;
    z-index: 1;
}
.zc-num-hero__poster-foil {
    position: absolute; top: 0; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk) 18%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 82%, transparent 100%);
}
.zc-num-hero__poster-corner {
    position: absolute; width: 28px; height: 28px;
    pointer-events: none;
}
.zc-num-hero__poster-corner--tl {
    top: 8px; left: 8px;
    border-top: 1px solid var(--zc-amber-a45);
    border-left: 1px solid var(--zc-amber-a45);
}
.zc-num-hero__poster-corner--br {
    bottom: 8px; right: 8px;
    border-bottom: 1px solid var(--zc-amber-a45);
    border-right: 1px solid var(--zc-amber-a45);
}
.zc-num-hero__poster-mono {
    position: absolute;
    bottom: -56px; right: -28px;
    font-family: var(--zc-f-display);
    font-size: 280px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -8px;
    color: transparent;
    -webkit-text-stroke: 1px var(--zc-amber-a18);
    pointer-events: none; user-select: none;
    z-index: 0;
}

.zc-num-hero__poster-head {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: clamp(14px, 1.6vw, 22px);
}
.zc-num-hero__poster-tag {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px;
    color: var(--zc-amber-dk); opacity: 0.85;
    text-transform: uppercase;
}
.zc-num-hero__poster-since {
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--zc-warm-mid);
}

.zc-num-hero__poster-figure {
    position: relative; z-index: 1;
    margin-bottom: clamp(16px, 1.6vw, 22px);
}
.zc-num-hero__poster-num {
    display: block;
    font-family: var(--zc-f-display);
    font-size: clamp(64px, 6.4vw + 12px, 110px);
    font-weight: 300; line-height: 0.95; letter-spacing: -3.2px;
    color: var(--zc-charcoal);
    margin-bottom: 8px;
}
.zc-num-hero__poster-num sup {
    font-size: 0.35em; font-weight: 500;
    color: var(--zc-amber-dk);
    margin-left: 4px;
    vertical-align: super;
}
.zc-num-hero__poster-lbl {
    display: block;
    font-family: var(--zc-f-heading);
    font-size: 12px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--zc-warm-dk);
    line-height: 1.5;
    max-width: 26ch;
}

/* Pure-CSS animated bar visualization */
.zc-num-hero__poster-bars {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    align-items: end;
    height: 36px;
    margin-bottom: clamp(16px, 1.6vw, 22px);
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--zc-linen);
}
.zc-num-hero__poster-bars span {
    height: 100%;
    background: linear-gradient(180deg, var(--zc-amber-lt) 0%, var(--zc-amber-dk) 100%);
    border-radius: 1px;
    transform-origin: bottom;
    animation: zc-num-bar 2.6s var(--zc-ease, ease-out) infinite;
    opacity: 0.85;
}
.zc-num-hero__poster-bars span:nth-child(1)  { animation-delay: 0s; }
.zc-num-hero__poster-bars span:nth-child(2)  { animation-delay: 0.08s; }
.zc-num-hero__poster-bars span:nth-child(3)  { animation-delay: 0.16s; }
.zc-num-hero__poster-bars span:nth-child(4)  { animation-delay: 0.24s; }
.zc-num-hero__poster-bars span:nth-child(5)  { animation-delay: 0.32s; }
.zc-num-hero__poster-bars span:nth-child(6)  { animation-delay: 0.40s; }
.zc-num-hero__poster-bars span:nth-child(7)  { animation-delay: 0.48s; }
.zc-num-hero__poster-bars span:nth-child(8)  { animation-delay: 0.56s; }
.zc-num-hero__poster-bars span:nth-child(9)  { animation-delay: 0.64s; }
.zc-num-hero__poster-bars span:nth-child(10) { animation-delay: 0.72s; }
@keyframes zc-num-bar {
    0%        { transform: scaleY(0.20); }
    20%, 100% { transform: scaleY(1); }
}

.zc-num-hero__poster-foot {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
}
.zc-num-hero__poster-mini {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px;
}
.zc-num-hero__poster-mini-n {
    font-family: var(--zc-f-display);
    font-size: clamp(20px, 1.4vw + 10px, 28px);
    font-weight: 400; line-height: 1; letter-spacing: -0.6px;
    color: var(--zc-charcoal);
}
.zc-num-hero__poster-mini-n sup {
    font-size: 0.45em; font-weight: 500;
    color: var(--zc-amber-dk);
    margin-left: 1px;
}
.zc-num-hero__poster-mini-l {
    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-num-hero__poster-divider {
    width: 1px; align-self: stretch;
    background: linear-gradient(180deg, transparent, var(--zc-linen), transparent);
}


/* ==========================================================================
   §2   HEADLINE NUMBERS
   --------------------------------------------------------------------------
   Section now uses a soft tinted backdrop and the headline + cards sit
   inside a framed white container so the zone reads as "width-fitted",
   not as a flat edge-to-edge block.
   ========================================================================== */
.zc-num-head {
    position: relative;
    padding: clamp(48px, 5vw, 88px) 0;
    background:
        radial-gradient(ellipse at 8% 12%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 88%, rgba(46, 75, 113, 0.07)  0%, transparent 55%),
        linear-gradient(180deg, var(--zc-snow) 0%, var(--zc-off-white) 100%);
    border-top: 1px solid var(--zc-linen);
    overflow: hidden;
}

/* Decorative ambient shapes that read across the tinted backdrop */
.zc-num-head__shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.zc-num-head__shape--1 {
    top: -100px; right: -80px;
    width: 280px; height: 280px;
    border: 1px dashed var(--zc-amber-a25);
    border-radius: 50%;
    animation: zc-num-spin 80s linear infinite;
}
.zc-num-head__shape--2 {
    bottom: -120px; left: -100px;
    width: 240px; height: 240px;
    border: 1px solid var(--zc-navy-a15);
    border-radius: 50%;
    animation: zc-num-ring-breathe 11s ease-in-out infinite reverse;
}

.zc-num-head__inner {
    position: relative; z-index: 1;
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}

/* The frame — contained white box around the headline + grid */
.zc-num-head__frame {
    position: relative;
    /* Top padding has extra room so the floating tag (top: -8px) sits
       visually above the frame edge without crowding the headline. */
    padding: clamp(36px, 3.8vw, 60px) clamp(20px, 2.4vw, 40px) clamp(28px, 3.4vw, 56px);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.05) 0%, transparent 55%),
        var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 6px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 26px 60px -28px rgba(106, 70, 24, 0.22);
    /* No overflow:hidden — the floating __frame-tag sits half above the
       frame's top edge and was getting clipped. */
}
.zc-num-head__frame-foil {
    position: absolute; top: 0; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk) 18%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 82%, transparent 100%);
    opacity: 0.65;
}
.zc-num-head__frame-tag {
    position: absolute;
    top: -9px;
    left: clamp(20px, 2.4vw, 36px);
    z-index: 2;
    padding: 3px 12px;
    background: var(--zc-snow, #f5f3ef);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 999px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 600; letter-spacing: 1.6px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    white-space: nowrap;
}
.zc-num-head__frame-corner {
    position: absolute; width: 22px; height: 22px;
    pointer-events: none;
}
.zc-num-head__frame-corner--tl {
    top: 10px; left: 10px;
    border-top: 1px solid var(--zc-amber-a35);
    border-left: 1px solid var(--zc-amber-a35);
}
.zc-num-head__frame-corner--tr {
    top: 10px; right: 10px;
    border-top: 1px solid var(--zc-amber-a35);
    border-right: 1px solid var(--zc-amber-a35);
}
.zc-num-head__frame-corner--bl {
    bottom: 10px; left: 10px;
    border-bottom: 1px solid var(--zc-amber-a35);
    border-left: 1px solid var(--zc-amber-a35);
}
.zc-num-head__frame-corner--br {
    bottom: 10px; right: 10px;
    border-bottom: 1px solid var(--zc-amber-a35);
    border-right: 1px solid var(--zc-amber-a35);
}

.zc-num-head__head {
    margin-bottom: clamp(28px, 3vw, 44px);
    max-width: 60ch;
}
.zc-num-head__head-row {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 12px;
}
.zc-num-head__overline {
    font-family: var(--zc-f-heading);
    font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--zc-amber-dk);
    flex-shrink: 0;
}
.zc-num-head__head-rule {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-a45), transparent);
}
.zc-num-head__head-meta {
    font-family: var(--zc-f-body);
    font-size: 12px; color: var(--zc-warm-mid);
    letter-spacing: 0.3px; flex-shrink: 0;
}
.zc-num-head__title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(26px, 2.2vw + 14px, 42px);
    font-weight: 300; line-height: 1.1; letter-spacing: -1px;
    color: var(--zc-charcoal);
}
.zc-num-head__title-accent {
    color: var(--zc-amber-dk); font-weight: 500; display: inline-block;
}
.zc-num-head__head-sub {
    margin: 12px 0 0;
    max-width: 70ch;
    font-family: var(--zc-f-body);
    font-size: 14px; line-height: 1.6;
    color: var(--zc-warm-dk);
}

.zc-num-head__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2vw, 28px);
}
.zc-num-head__card {
    position: relative;
    display: flex; flex-direction: column;
    background:
        radial-gradient(ellipse at 12% 8%, var(--zc-amber-a18) 0%, transparent 55%),
        linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%);
    border: 1px solid var(--zc-linen);
    border-radius: 4px;
    padding: clamp(22px, 2.4vw, 30px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 16px 38px -22px rgba(106, 70, 24, 0.22);
    transition: transform 0.4s var(--zc-ease-spring), box-shadow 0.4s var(--zc-ease), border-color 0.4s var(--zc-ease);
    overflow: hidden;
}
.zc-num-head__card:hover {
    transform: translateY(-3px);
    border-color: var(--zc-amber-a35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 22px 44px -22px rgba(106, 70, 24, 0.35);
}
.zc-num-head__card-foil {
    position: absolute; top: 0; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk) 18%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 82%, transparent 100%);
    opacity: 0.65;
}
.zc-num-head__card-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px;
    color: var(--zc-amber-dk); opacity: 0.85;
    margin-bottom: 14px;
}
.zc-num-head__card-ic {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85) 0%, transparent 60%),
        linear-gradient(135deg, var(--zc-amber-a25), var(--zc-amber-a08));
    border: 1px solid var(--zc-amber-a35);
    color: var(--zc-amber-dk);
    font-size: 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 12px -4px rgba(168, 104, 40, 0.20);
}
.zc-num-head__card-kind {
    display: inline-block;
    width: fit-content;
    margin-bottom: 8px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    font-family: var(--zc-f-heading); font-size: 10px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-num-head__card-figure {
    display: flex; align-items: baseline; gap: 2px;
    margin: 6px 0 10px;
    font-family: var(--zc-f-display);
    font-size: clamp(40px, 3.4vw + 12px, 64px);
    font-weight: 300; line-height: 1; letter-spacing: -1.6px;
    color: var(--zc-charcoal);
    flex-wrap: wrap;
}
.zc-num-head__card-figure small {
    font-size: 0.55em;
    font-weight: 400;
    color: var(--zc-charcoal);
    letter-spacing: -0.6px;
}
.zc-num-head__card-figure sup {
    font-size: 0.45em;
    font-weight: 500;
    color: var(--zc-amber-dk);
    margin-left: 2px;
    align-self: flex-start;
    line-height: 1.2;
}
.zc-num-head__card-lbl {
    margin: 0 0 4px;
    font-family: var(--zc-f-display);
    font-size: 17px; font-weight: 500;
    line-height: 1.25; letter-spacing: -0.3px;
    color: var(--zc-charcoal);
}
.zc-num-head__card-sub {
    margin: 0 0 14px;
    font-family: var(--zc-f-body);
    font-size: 12.5px; line-height: 1.5;
    color: var(--zc-warm-dk);
}

/* Decorative corner that grows on hover */
.zc-num-head__card-corner {
    position: absolute;
    top: 0; right: 0;
    width: 28px; height: 28px;
    border-top: 1px solid var(--zc-amber-a35);
    border-right: 1px solid var(--zc-amber-a35);
    pointer-events: none;
    transition: width 0.4s var(--zc-ease), height 0.4s var(--zc-ease);
}
.zc-num-head__card:hover .zc-num-head__card-corner { width: 44px; height: 44px; }

/* Per-card visualizations, pure CSS / SVG. Each viz is chosen to match
   the statistic it sits next to. */
.zc-num-head__viz {
    display: block;
    margin-top: auto;
    padding-top: 14px;
    margin-bottom: 12px;
    border-top: 1px dashed var(--zc-linen);
}

/* (1) Six icons — five empty + one filled, "1 in 6" visual */
.zc-num-head__viz--six {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    align-items: center;
}
.zc-num-head__viz--six span {
    aspect-ratio: 1;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    color: var(--zc-amber-a35);
    font-size: 14px;
    transition: all 0.4s var(--zc-ease);
}
.zc-num-head__viz--six span.is-on {
    background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
    border-color: var(--zc-amber-dk);
    color: var(--zc-white);
    box-shadow: 0 4px 10px -2px var(--zc-amber-a45);
    animation: zc-num-six-pulse 2.4s ease-in-out infinite;
}
@keyframes zc-num-six-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* (2) Arc — declining curve, visualises "fertility drop by age 40" */
.zc-num-head__viz--arc {
    width: 100%; height: 60px;
    display: block;
    overflow: visible;
}
.zc-num-head__arc-bg,
.zc-num-head__arc-fg {
    fill: none;
    stroke-width: 3;
}
.zc-num-head__arc-bg { stroke: var(--zc-amber-a18); }
.zc-num-head__arc-fg {
    stroke: var(--zc-amber-dk);
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: zc-num-arc 2.6s var(--zc-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)) 0.4s forwards;
}
@keyframes zc-num-arc {
    to { stroke-dashoffset: 110; }     /* 50% — half the curve drawn */
}

/* (3) Days — 7 day chips, days 5-7 highlighted */
.zc-num-head__viz--days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.zc-num-head__viz--days span {
    aspect-ratio: 1;
    display: grid; place-items: center;
    border-radius: 4px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 600;
    color: var(--zc-warm-mid);
    letter-spacing: 0;
    transition: all 0.4s var(--zc-ease);
}
.zc-num-head__viz--days span:nth-child(n+5) {
    background: linear-gradient(135deg, var(--zc-amber-a25), var(--zc-amber-a08));
    border-color: var(--zc-amber-a45);
    color: var(--zc-amber-dk);
    animation: zc-num-day-glow 3s ease-in-out infinite;
}
.zc-num-head__viz--days span:nth-child(6) { animation-delay: -1s; }
.zc-num-head__viz--days span:nth-child(7) { animation-delay: -2s; }
@keyframes zc-num-day-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--zc-amber-a35); }
    50%      { box-shadow: 0 2px 10px -2px var(--zc-amber-a45); }
}

/* (4) Bars — 10 stacked bars, 3 highlighted = 30% benchmark */
.zc-num-head__viz--bars {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    align-items: end;
    height: 36px;
}
.zc-num-head__viz--bars span {
    height: 38%;
    background: var(--zc-amber-a18);
    border-radius: 1px;
    transform-origin: bottom;
    animation: zc-num-bar 2.6s ease-out infinite;
    opacity: 0.7;
}
.zc-num-head__viz--bars span:nth-child(-n+3) {
    height: 100%;
    background: linear-gradient(180deg, var(--zc-amber-lt), var(--zc-amber-dk));
    opacity: 1;
}
.zc-num-head__viz--bars span:nth-child(1)  { animation-delay: 0s; }
.zc-num-head__viz--bars span:nth-child(2)  { animation-delay: 0.1s; }
.zc-num-head__viz--bars span:nth-child(3)  { animation-delay: 0.2s; }
.zc-num-head__viz--bars span:nth-child(4)  { animation-delay: 0.3s; }
.zc-num-head__viz--bars span:nth-child(5)  { animation-delay: 0.4s; }
.zc-num-head__viz--bars span:nth-child(6)  { animation-delay: 0.5s; }
.zc-num-head__viz--bars span:nth-child(7)  { animation-delay: 0.6s; }
.zc-num-head__viz--bars span:nth-child(8)  { animation-delay: 0.7s; }
.zc-num-head__viz--bars span:nth-child(9)  { animation-delay: 0.8s; }
.zc-num-head__viz--bars span:nth-child(10) { animation-delay: 0.9s; }

/* Source-citation pill at the bottom of each card */
.zc-num-head__card-src {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--zc-linen);
    font-family: var(--zc-f-heading);
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-num-head__card-src i {
    color: var(--zc-amber-dk);
    font-size: 11px;
}

/* Card variants — alternate amber/navy tonal rhythm */
.zc-num-head__card--arc {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(46, 75, 113, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #f8f6f2 0%, #efebe2 100%);
    border-color: var(--zc-navy-a15);
}
.zc-num-head__card--arc .zc-num-head__card-foil {
    background: linear-gradient(90deg, transparent 0%, #2e4b71 18%, #5a78a3 50%, #2e4b71 82%, transparent 100%);
}
.zc-num-head__card--arc .zc-num-head__arc-fg { stroke: #2e4b71; }
.zc-num-head__card--arc .zc-num-head__arc-bg { stroke: rgba(46, 75, 113, 0.18); }

.zc-num-head__card--bars {
    background:
        radial-gradient(ellipse at 88% 12%, rgba(207, 138, 63, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%);
}


/* ==========================================================================
   §3   CARE TEAM — compact 2-column editorial spread.
   --------------------------------------------------------------------------
   Left column: 4-row ledger. Right column: 6-doctor orbit, each a real
   clickable link to its profile page. Section height tightened so the
   spread reads at-a-glance, not as a full panel of empty space.
   ========================================================================== */
.zc-num-team {
    position: relative;
    padding: clamp(40px, 4.4vw, 64px) 0;
    background: var(--zc-deep, #1a1208);
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

/* Background image + dark amber veil */
.zc-num-team__bg {
    position: absolute; inset: 0;
    z-index: 0;
    overflow: hidden;
}
.zc-num-team__bg-img {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover;
    display: block;
    max-width: none !important;
    filter: grayscale(0.18) contrast(1.05);
    transform: scale(1.04);
    animation: zc-num-team-zoom 22s ease-in-out infinite alternate;
}
@keyframes zc-num-team-zoom {
    from { transform: scale(1.04); }
    to   { transform: scale(1.10); }
}
.zc-num-team__bg-veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 8% 8%, rgba(207, 138, 63, 0.30) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 92%, rgba(207, 138, 63, 0.18) 0%, transparent 55%),
        linear-gradient(160deg, rgba(26, 18, 8, 0.86) 0%, rgba(42, 37, 32, 0.92) 100%);
}

/* Ambient dots */
.zc-num-team__dot {
    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 14px rgba(232, 170, 98, 0.65);
    pointer-events: none;
    z-index: 1;
    animation: zc-num-dot 5s ease-in-out infinite;
}
.zc-num-team__dot--a { top: 18%;  left: 9%;  }
.zc-num-team__dot--b { top: 64%;  right: 12%; width: 4px; height: 4px; animation-delay: -1.5s; }
.zc-num-team__dot--c { bottom: 22%; left: 38%; width: 5px; height: 5px; animation-delay: -3s; }

.zc-num-team__inner {
    position: relative; z-index: 2;
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}

/* 2-column layout — copy/ledger on the left, doctor orbit on the right */
.zc-num-team__layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
}

/* === LEFT column === */
.zc-num-team__copy {
    display: flex; flex-direction: column;
    min-width: 0;
}

.zc-num-team__head {
    margin-bottom: clamp(16px, 2vw, 24px);
}
.zc-num-team__overline {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(207, 138, 63, 0.18);
    border: 1px solid rgba(207, 138, 63, 0.30);
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--zc-amber-lt, #e8aa62);
    margin-bottom: 12px;
}
.zc-num-team__overline-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
    box-shadow: 0 0 8px var(--zc-amber-a45);
    animation: zc-num-pulse 1.8s ease-in-out infinite;
}
.zc-num-team__title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(22px, 1.8vw + 12px, 36px);
    font-weight: 300; line-height: 1.1; letter-spacing: -1px;
    color: var(--zc-white, #ffffff);
}
.zc-num-team__title-accent {
    display: inline-block;
    font-weight: 500;
    color: var(--zc-amber-lt, #e8aa62);
}

/* Compact ledger — 1 line per fact (number + rule + label) */
.zc-num-team__ledger {
    list-style: none; margin: 0 0 clamp(16px, 2vw, 22px); padding: 0;
    border-top: 1px solid rgba(207, 138, 63, 0.20);
}
.zc-num-team__row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    padding: clamp(8px, 1vw, 12px) 0;
    border-bottom: 1px solid rgba(207, 138, 63, 0.18);
    animation: zc-num-row-in 0.6s var(--zc-ease, cubic-bezier(0.16, 1, 0.30, 1)) both;
    animation-delay: calc(0.10s * var(--zc-i, 0));
}
@keyframes zc-num-row-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.zc-num-team__row-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 1.4px;
    color: var(--zc-amber-lt, #e8aa62);
    opacity: 0.85;
}
.zc-num-team__row-fig {
    font-family: var(--zc-f-display);
    font-size: clamp(28px, 1.8vw + 12px, 40px);
    font-weight: 300; line-height: 1; letter-spacing: -1.2px;
    color: var(--zc-white, #ffffff);
    min-width: 1.4ch;
    text-align: right;
}
.zc-num-team__row-rule {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, rgba(207, 138, 63, 0.50), transparent);
}
.zc-num-team__row-lbl {
    font-family: var(--zc-f-heading);
    font-size: 12px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

/* Footer — location + CTA */
.zc-num-team__foot {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 2vw, 24px);
}
.zc-num-team__foot-loc {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.zc-num-team__foot-loc i { color: var(--zc-amber-lt); font-size: 13px; }
.zc-num-team__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber, #cf8a3f), var(--zc-amber-dk, #a86828));
    color: var(--zc-white, #ffffff);
    font-family: var(--zc-f-heading);
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 24px var(--zc-amber-a45);
    transition: transform 0.3s var(--zc-ease-spring), box-shadow 0.3s var(--zc-ease), gap 0.3s var(--zc-ease);
}
.zc-num-team__cta i { font-size: 13px; transition: transform 0.3s var(--zc-ease); }
.zc-num-team__cta:hover {
    transform: translateY(-2px);
    color: var(--zc-white);
    box-shadow: 0 14px 30px var(--zc-amber-a45);
    gap: 12px;
}
.zc-num-team__cta:hover i { transform: translateX(3px); }


/* === RIGHT column — DOCTOR ORBIT === */
.zc-num-team__orbit {
    --orbit-size: clamp(280px, 28vw, 420px);
    --orbit-r:    calc(var(--orbit-size) * 0.42);  /* portrait orbit radius */
    --avatar:     clamp(56px, 6vw, 78px);

    position: relative;
    width: var(--orbit-size);
    height: var(--orbit-size);
    margin: 0 auto;
}

/* Two concentric orbital rings */
.zc-num-team__orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.zc-num-team__orbit-ring--1 {
    width: calc(var(--orbit-r) * 2 + var(--avatar) * 0.4);
    height: calc(var(--orbit-r) * 2 + var(--avatar) * 0.4);
    border: 1px dashed rgba(207, 138, 63, 0.32);
    animation: zc-num-spin 60s linear infinite;
}
.zc-num-team__orbit-ring--2 {
    width: calc(var(--orbit-r) * 1.2);
    height: calc(var(--orbit-r) * 1.2);
    border: 1px solid rgba(207, 138, 63, 0.20);
}

/* Centre hub with Z monogram + pulsing rings */
.zc-num-team__hub {
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    transform: translate(-50%, -50%);
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-deep));
    border: 1px solid var(--zc-amber-a45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    z-index: 2;
}
.zc-num-team__hub-pulse {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid var(--zc-amber-a45);
    animation: zc-num-hub-pulse 3.2s ease-out infinite;
    pointer-events: none;
}
.zc-num-team__hub-pulse--2 { animation-delay: -1.6s; }
@keyframes zc-num-hub-pulse {
    0%   { transform: scale(0.9); opacity: 0.85; }
    80%  { opacity: 0.15; }
    100% { transform: scale(2.4); opacity: 0; }
}
.zc-num-team__hub-mark {
    font-family: var(--zc-f-display);
    font-size: 22px; font-weight: 500;
    line-height: 1; letter-spacing: -0.6px;
    color: var(--zc-amber-lt, #e8aa62);
}

/* Six portraits placed around the orbit */
.zc-num-team__orbit-list {
    list-style: none; margin: 0; padding: 0;
    position: absolute; inset: 0;
}
.zc-num-team__orbit-item {
    position: absolute;
    top: 50%; left: 50%;
    width: var(--avatar); height: var(--avatar);
    /* angle = -90deg (start at top) + 60deg per index */
    --angle: calc(-90deg + 60deg * var(--zc-i, 0));
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translate(var(--orbit-r))
        rotate(calc(-1 * var(--angle)));
    animation: zc-num-orbit-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(0.10s * var(--zc-i, 0) + 0.2s);
}
@keyframes zc-num-orbit-in {
    from { opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translate(0) rotate(calc(-1 * var(--angle))) scale(0.4);
    }
    to   { opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--orbit-r)) rotate(calc(-1 * var(--angle))) scale(1);
    }
}

.zc-num-team__orbit-link {
    position: relative;
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: rgba(207, 138, 63, 0.30);
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.55);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.35s var(--zc-ease-spring), box-shadow 0.35s var(--zc-ease), border-color 0.35s var(--zc-ease);
    cursor: pointer;
}
.zc-num-team__orbit-link::before {
    /* Connecting line from hub to portrait, drawn from the avatar back
       to the centre. Uses a tall narrow gradient as the "spoke". */
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 1px;
    height: var(--orbit-r);
    transform-origin: top center;
    transform: translate(-50%, 0) rotate(180deg);
    background: linear-gradient(180deg, transparent 0%, rgba(207, 138, 63, 0.45) 50%, transparent 100%);
    z-index: -1;
    opacity: 0.5;
    transition: opacity 0.3s var(--zc-ease);
}
.zc-num-team__orbit-link:hover {
    transform: scale(1.10);
    border-color: var(--zc-amber-lt);
    box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(207, 138, 63, 0.20);
}
.zc-num-team__orbit-link:hover::before { opacity: 1; }

.zc-num-team__orbit-img-wrap {
    position: relative;
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.zc-num-team__orbit-img {
    width: 100% !important; height: 100% !important;
    object-fit: cover;
    display: block;
    max-width: none !important;
}
.zc-num-team__orbit-init {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--zc-f-display);
    font-size: 18px; font-weight: 500;
    color: var(--zc-amber-lt);
    pointer-events: none;
    opacity: 0;
}
.zc-num-team__orbit-img:not([src]),
.zc-num-team__orbit-img[src=""] { opacity: 0; }
.zc-num-team__orbit-img:not([src]) ~ .zc-num-team__orbit-init,
.zc-num-team__orbit-img[src=""] ~ .zc-num-team__orbit-init { opacity: 1; }

/* Hover tooltip with name + role */
.zc-num-team__orbit-tip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(0);
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--zc-deep, #1a1208);
    border: 1px solid rgba(207, 138, 63, 0.45);
    box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.7);
    text-align: center;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: transform 0.25s var(--zc-ease-spring), box-shadow 0.25s var(--zc-ease), border-color 0.25s var(--zc-ease);
    z-index: 5;
}
.zc-num-team__orbit-link:hover .zc-num-team__orbit-tip,
.zc-num-team__orbit-link:focus-visible .zc-num-team__orbit-tip {
    transform: translateX(-50%) translateY(-2px);
    border-color: var(--zc-amber-lt);
    box-shadow: 0 18px 34px -8px rgba(0, 0, 0, 0.8);
}
.zc-num-team__orbit-tip b {
    display: block;
    font-family: var(--zc-f-display);
    font-size: 13px; font-weight: 500;
    color: var(--zc-white);
    line-height: 1.2;
    margin-bottom: 2px;
}
.zc-num-team__orbit-tip small {
    display: block;
    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);
}

/* Caption under the orbit */
.zc-num-team__orbit-cap {
    position: absolute;
    bottom: -28px; left: 50%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--zc-f-heading);
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
.zc-num-team__orbit-cap-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
    box-shadow: 0 0 8px var(--zc-amber-a45);
    animation: zc-num-pulse 1.8s ease-in-out infinite;
}

@keyframes zc-num-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.3); }
}


/* ==========================================================================
   §4   SCOPE — expanding-tile service accordion (premium).
   --------------------------------------------------------------------------
   Tiles are flex children of the row. Default: each takes equal width.
   Click a sub-category inside any tile: that tile gets `is-active`
   (flex grows, body unfolds, services slide in). Sibling tiles get
   `is-collapsed` (flex shrinks, body fades, vertical rail label shows).
   No JS for sizing, just class toggles. Flex transitions handle the rest.
   ========================================================================== */
.zc-num-scope {
    position: relative;
    padding: clamp(36px, 4vw, 64px) 0;
    background:
        radial-gradient(ellipse at 8% 12%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 88%, rgba(46, 75, 113, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, var(--zc-snow) 0%, var(--zc-off-white) 100%);
    border-top: 1px solid var(--zc-linen);
    overflow: hidden;
}
.zc-num-scope__shape {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}
.zc-num-scope__shape--1 {
    top: -120px; right: -100px;
    width: 320px; height: 320px;
    border: 1px dashed var(--zc-amber-a25);
    animation: zc-num-spin 80s linear infinite;
}
.zc-num-scope__shape--2 {
    bottom: -130px; left: -110px;
    width: 240px; height: 240px;
    border: 1px solid var(--zc-navy-a15);
    animation: zc-num-ring-breathe 11s ease-in-out infinite reverse;
}
.zc-num-scope__inner {
    position: relative; z-index: 1;
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}
.zc-num-scope__head {
    margin-bottom: clamp(20px, 2.4vw, 32px);
    max-width: 60ch;
}
.zc-num-scope__head-row {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 12px;
}
.zc-num-scope__overline {
    font-family: var(--zc-f-heading);
    font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--zc-amber-dk);
    flex-shrink: 0;
}
.zc-num-scope__overline sup { font-size: 0.7em; }
.zc-num-scope__head-rule {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-a45), transparent);
}
.zc-num-scope__head-meta {
    font-family: var(--zc-f-body);
    font-size: 12px; color: var(--zc-warm-mid);
    letter-spacing: 0.3px; flex-shrink: 0;
}
.zc-num-scope__title {
    margin: 0 0 12px;
    font-family: var(--zc-f-display);
    font-size: clamp(26px, 2.2vw + 14px, 42px);
    font-weight: 300; line-height: 1.1; letter-spacing: -1px;
    color: var(--zc-charcoal);
}
.zc-num-scope__title-accent {
    color: var(--zc-amber-dk); font-weight: 500; display: inline-block;
}
.zc-num-scope__sub {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 14.5px; line-height: 1.6;
    color: var(--zc-warm-dk);
}

/* === MASTER-INDEX + DETAIL SPREAD ============================== */

.zc-num-scope__layout {
    display: grid;
    grid-template-columns: minmax(300px, 1.05fr) minmax(0, 2.2fr);
    gap: clamp(20px, 2.6vw, 36px);
    align-items: stretch;
}

/* === LEFT — magazine-style numbered category index === */
.zc-num-scope__index {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2vw, 28px) clamp(18px, 2vw, 26px);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--zc-linen);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 18px 38px -24px rgba(106, 70, 24, 0.20);
    /* No align-self:start — let the grid stretch this column to match
       the detail panel's height so left and right read the same height. */
}
.zc-num-scope__index-list { flex: 1; }
.zc-num-scope__index-eyebrow {
    display: block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--zc-amber-dk);
    opacity: 0.85;
    margin-bottom: 12px;
}
.zc-num-scope__index-list {
    list-style: none; margin: 0; padding: 0;
    counter-reset: zcidx;
    /* Distribute the items equally to fill the index card's height,
       matching the right-side detail spread visually. */
    display: flex;
    flex-direction: column;
    flex: 1;
}
.zc-num-scope__index-list li {
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
    border-bottom: 1px dashed var(--zc-linen);
}
.zc-num-scope__index-list li:last-child { border-bottom: none; }

.zc-num-scope__idx {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 12px 13px 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-num-scope__idx::before {
    /* Active indicator bar on the left edge */
    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-num-scope__idx:hover {
    padding-left: 18px;
    background: linear-gradient(90deg, var(--zc-amber-a08), transparent 70%);
}
.zc-num-scope__idx.is-on {
    padding-left: 18px;
    background: linear-gradient(90deg, var(--zc-amber-a18), transparent 70%);
    cursor: default;
}
.zc-num-scope__idx.is-on::before { height: 60%; }

.zc-num-scope__idx-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;
    text-align: left;
    transition: opacity 0.3s var(--zc-ease);
}
.zc-num-scope__idx.is-on .zc-num-scope__idx-num { opacity: 1; }

.zc-num-scope__idx-name {
    font-family: var(--zc-f-display);
    font-size: clamp(13px, 0.4vw + 10px, 14.5px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: var(--zc-charcoal);
    min-width: 0;
    /* Smaller font + wider column = full names sit on a single line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s var(--zc-ease);
}
.zc-num-scope__idx.is-on .zc-num-scope__idx-name { color: var(--zc-amber-dk); }

.zc-num-scope__idx-meta {
    display: inline-flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.zc-num-scope__idx-count {
    display: inline-block;
    padding: 2px 9px; border-radius: 999px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    font-family: var(--zc-f-heading);
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--zc-amber-dk);
    line-height: 1.4;
    transition: background 0.3s var(--zc-ease), border-color 0.3s var(--zc-ease);
}
.zc-num-scope__idx-arrow {
    width: 0;
    overflow: hidden;
    color: var(--zc-amber-dk);
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity 0.3s var(--zc-ease),
        transform 0.35s var(--zc-ease),
        width 0.35s var(--zc-ease);
}
.zc-num-scope__idx:hover .zc-num-scope__idx-arrow,
.zc-num-scope__idx.is-on .zc-num-scope__idx-arrow {
    width: 14px;
    opacity: 1;
    transform: translateX(0);
}
.zc-num-scope__index-foot {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 14px;
    font-family: var(--zc-f-heading);
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-num-scope__index-foot i { color: var(--zc-amber-dk); font-size: 11px; }


/* === RIGHT — detail spread ====================================
   All detail panels are stacked in the same grid cell so we can
   cross-fade smoothly without DOM relayout when switching. The
   stage takes the height of whichever panel is tallest so the
   page never jumps as you switch categories. */
.zc-num-scope__stage {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
}
.zc-num-scope__stage > * { grid-area: 1 / 1; }

.zc-num-scope__detail {
    position: relative;
    padding: clamp(24px, 2.4vw, 36px);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(46, 75, 113, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 26px 56px -26px rgba(106, 70, 24, 0.32);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition:
        opacity 0.45s var(--zc-ease),
        transform 0.5s var(--zc-ease),
        visibility 0s 0.5s;
    will-change: opacity, transform;
}
.zc-num-scope__detail.is-on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 0.5s var(--zc-ease),
        transform 0.55s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
        visibility 0s 0s;
}

/* Big background watermark icon, refined and gently breathing */
.zc-num-scope__detail-watermark {
    position: absolute;
    top: clamp(-30px, -2vw, -20px);
    right: clamp(-30px, -2vw, -20px);
    width: clamp(180px, 18vw, 240px);
    height: clamp(180px, 18vw, 240px);
    display: grid; place-items: center;
    color: transparent;
    -webkit-text-stroke: 1px var(--zc-amber-a25);
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
    animation: zc-num-watermark-breathe 8s ease-in-out infinite;
}
.zc-num-scope__detail-watermark i {
    font-size: clamp(150px, 16vw, 210px);
    line-height: 1;
}
@keyframes zc-num-watermark-breathe {
    0%, 100% { transform: scale(1)    rotate(0deg);   opacity: 0.55; }
    50%      { transform: scale(1.04) rotate(-2deg);  opacity: 0.75; }
}

.zc-num-scope__detail-foil {
    position: absolute; top: 0; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk) 18%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 82%, transparent 100%);
    z-index: 1;
}
.zc-num-scope__detail-corner {
    position: absolute; width: 24px; height: 24px;
    pointer-events: none;
    z-index: 1;
}
.zc-num-scope__detail-corner--tr {
    top: 10px; right: 10px;
    border-top: 1px solid var(--zc-amber-a45);
    border-right: 1px solid var(--zc-amber-a45);
}
.zc-num-scope__detail-corner--bl {
    bottom: 10px; left: 10px;
    border-bottom: 1px solid var(--zc-amber-a45);
    border-left: 1px solid var(--zc-amber-a45);
}

/* Editorial header */
.zc-num-scope__detail-head {
    position: relative;
    z-index: 2;
    margin-bottom: clamp(14px, 1.6vw, 20px);
    padding-bottom: clamp(14px, 1.6vw, 18px);
    border-bottom: 1px dashed var(--zc-amber-a25);
}
.zc-num-scope__detail-kicker {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-amber-dk);
    opacity: 0.85;
    margin-bottom: 6px;
}
.zc-num-scope__detail-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 18px;
}
.zc-num-scope__detail-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(24px, 1.8vw + 12px, 38px);
    font-weight: 300; line-height: 1.1;
    letter-spacing: -1px;
    color: var(--zc-charcoal);
    flex: 1 1 auto;
    min-width: 0;
}
.zc-num-scope__detail-meta {
    display: inline-flex; align-items: center; gap: 7px;
    flex-shrink: 0;
    font-family: var(--zc-f-body);
    font-size: 12.5px; line-height: 1.5;
    color: var(--zc-warm-dk);
    white-space: nowrap;
}
.zc-num-scope__detail-meta b {
    font-family: var(--zc-f-display);
    font-weight: 500;
    color: var(--zc-amber-dk);
    font-size: 14px;
}

/* Sub-category chip filters */
.zc-num-scope__chips {
    list-style: none; margin: 0 0 14px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
    position: relative; z-index: 2;
}
.zc-num-scope__chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    font-family: var(--zc-f-heading);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--zc-warm-dk);
    cursor: pointer;
    transition:
        background 0.35s var(--zc-ease),
        border-color 0.35s var(--zc-ease),
        color 0.35s var(--zc-ease),
        transform 0.35s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
        box-shadow 0.35s var(--zc-ease);
    will-change: transform;
}
.zc-num-scope__chip:hover {
    border-color: var(--zc-amber-a35);
    color: var(--zc-amber-dk);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(207, 138, 63, 0.20);
}
.zc-num-scope__chip.is-on {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    box-shadow: 0 10px 20px -6px var(--zc-amber-a45);
    transform: translateY(-1px);
}
.zc-num-scope__chip.is-on:hover { transform: translateY(-2px); }
.zc-num-scope__chip-count {
    padding: 1px 7px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0;
}
.zc-num-scope__chip.is-on .zc-num-scope__chip-count { background: rgba(255, 255, 255, 0.22); }

/* Service-card grids — stacked in one grid cell, only the active
   chip's grid is visible. Cross-fades smoothly on chip switch. */
.zc-num-scope__grids {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 14px;
}
.zc-num-scope__grids > * { grid-area: 1 / 1; }
/* Service-card grid → wrapper around a Swiper now. Cards laid out by
   Swiper inside .swiper-wrapper, not by CSS grid. min-width: 0 keeps
   the parent layout column from being pushed by slide overflow. */
.zc-num-scope__grid {
    display: block;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition:
        opacity 0.4s var(--zc-ease),
        transform 0.4s var(--zc-ease),
        visibility 0s 0.4s;
}
.zc-num-scope__grid.is-on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 0.45s var(--zc-ease),
        transform 0.45s var(--zc-ease),
        visibility 0s 0s;
}

/* Swiper row: holds the slider + overlay arrows. */
.zc-num-scope__swiperrow {
    position: relative;
    min-width: 0;
}
.zc-num-scope__swiper {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.zc-num-scope__swiper .swiper-wrapper { align-items: stretch; }
.zc-num-scope__swiper .swiper-slide {
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Round amber arrow buttons — same pattern as the home page slider. */
.zc-num-scope__arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 36px; height: 36px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    color: var(--zc-charcoal);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(18, 12, 4, 0.10);
    transition: background 0.3s var(--zc-ease), color 0.3s var(--zc-ease),
                border-color 0.3s var(--zc-ease), transform 0.3s var(--zc-ease-spring);
}
.zc-num-scope__arr--prev { left: -12px; }
.zc-num-scope__arr--next { right: -12px; }
.zc-num-scope__arr:hover {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: translateY(-50%) scale(1.06);
}
.zc-num-scope__arr.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Pagination — bullet dots below the slider. */
.zc-num-scope__pgbar {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.zc-num-scope__pg.swiper-pagination {
    position: static;
    width: auto;
    display: inline-flex;
    gap: 6px;
}
.zc-num-scope__pg .swiper-pagination-bullet {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--zc-linen);
    opacity: 1;
    transition: background 0.25s var(--zc-ease), width 0.3s var(--zc-ease);
}
.zc-num-scope__pg .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    width: 20px; border-radius: 4px;
}
@keyframes zc-num-svc-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Premium service card — larger, refined, gold-foil accent on hover,
   circular arrow CTA, image kicked up subtly with parallax-style scale. */
.zc-num-scope__svc {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 12px 28px -16px rgba(106, 70, 24, 0.22);
    transition:
        transform 0.45s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
        box-shadow 0.45s var(--zc-ease),
        border-color 0.45s var(--zc-ease);
    animation: zc-num-svc-in 0.55s var(--zc-ease) both;
    animation-delay: calc(0.06s * var(--zc-j, 0));
    will-change: transform;
    isolation: isolate;
}
/* Gold-foil top hairline accent — fades in on hover for premium polish */
.zc-num-scope__svc::before {
    content: '';
    position: absolute;
    top: 0; left: 14px; right: 14px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--zc-amber-dk) 18%,
        var(--zc-amber-lt) 50%,
        var(--zc-amber-dk) 82%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s var(--zc-ease);
    z-index: 3;
    pointer-events: none;
}
.zc-num-scope__svc:hover {
    transform: translateY(-5px);
    border-color: var(--zc-amber-a35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 26px 44px -18px rgba(207, 138, 63, 0.36);
}
.zc-num-scope__svc:hover::before { opacity: 0.95; }

/* Media — 4:3 aspect, premium image treatment */
.zc-num-scope__svc-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 55%),
        linear-gradient(135deg, var(--zc-amber-a25), var(--zc-amber-a08));
}
.zc-num-scope__svc-img {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover;
    display: block;
    max-width: none !important;
    transition: transform 0.7s var(--zc-ease);
}
.zc-num-scope__svc:hover .zc-num-scope__svc-img { transform: scale(1.08); }
.zc-num-scope__svc-glyph {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--zc-amber-dk);
    font-size: clamp(40px, 4vw, 56px);
    opacity: 0.6;
}
.zc-num-scope__svc-veil {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 18, 8, 0.62) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Text region — generous spacing, refined typography */
.zc-num-scope__svc-text {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 10px;
    flex: 1;
    position: relative;
    z-index: 2;
}
.zc-num-scope__svc-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: 15px; font-weight: 500;
    line-height: 1.3; letter-spacing: -0.2px;
    color: var(--zc-charcoal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s var(--zc-ease);
}
.zc-num-scope__svc:hover .zc-num-scope__svc-title { color: var(--zc-amber-dk); }

/* CTA — refined "Read more" with a circular arrow disc on the right */
.zc-num-scope__svc-cta {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--zc-linen);
    font-family: var(--zc-f-heading);
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-warm-mid);
    transition: color 0.3s var(--zc-ease), border-color 0.3s var(--zc-ease);
}
.zc-num-scope__svc:hover .zc-num-scope__svc-cta {
    color: var(--zc-amber-dk);
    border-top-color: var(--zc-amber-a35);
}
.zc-num-scope__svc-cta i {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    color: var(--zc-amber-dk);
    font-size: 11px;
    transition:
        background 0.3s var(--zc-ease),
        border-color 0.3s var(--zc-ease),
        color 0.3s var(--zc-ease),
        transform 0.35s var(--zc-ease);
}
.zc-num-scope__svc:hover .zc-num-scope__svc-cta i {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: translate(2px, -2px);
    box-shadow: 0 6px 14px -4px var(--zc-amber-a45);
}

/* (View-all CTA removed per design request — categories are explored
   in place via the index + chip filter, no page-jump needed.) */

/* (Vertical rail label was for the old squeeze-accordion design,
   removed — the new master-index layout doesn't need it.) */


/* §3.5 typography poster removed — its content ("6 doctors / 8 departments
   / 4 languages / one Pradhan Nagar address") is now absorbed into §3
   as the inline ledger + footer location line. Keeps the page tighter
   and avoids two sections saying the same thing. */

/* Reusable spin keyframe for any decorative ring on the page */
@keyframes zc-num-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* ==========================================================================
   §5   INSIDE THE BUILDING — combined facility collage + signals ledger
   --------------------------------------------------------------------------
   Two-column premium spread. Left: 4-image staggered collage of the
   rooms. Right: editorial ledger card with quality-signal rows.
   ========================================================================== */
.zc-num-ins {
    position: relative;
    padding: clamp(36px, 4vw, 60px) 0;
    background:
        radial-gradient(ellipse at 8% 12%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 88%, rgba(46, 75, 113, 0.08)  0%, transparent 55%),
        linear-gradient(180deg, var(--zc-snow) 0%, var(--zc-off-white) 100%);
    border-top: 1px solid var(--zc-linen);
    overflow: hidden;
}
.zc-num-ins__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.zc-num-ins__shape--1 {
    top: -120px; right: -100px;
    width: 320px; height: 320px;
    border: 1px dashed var(--zc-amber-a25);
    animation: zc-num-spin 80s linear infinite;
}
.zc-num-ins__shape--2 {
    bottom: -130px; left: -110px;
    width: 240px; height: 240px;
    border: 1px solid var(--zc-navy-a15);
    animation: zc-num-ring-breathe 11s ease-in-out infinite reverse;
}
.zc-num-ins__inner {
    position: relative; z-index: 1;
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}

/* Section header — same grammar as the rest of the page */
.zc-num-ins__head {
    margin-bottom: clamp(18px, 2vw, 28px);
    max-width: 70ch;
}
.zc-num-ins__head-row {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 12px;
}
.zc-num-ins__overline {
    font-family: var(--zc-f-heading);
    font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--zc-amber-dk);
    flex-shrink: 0;
}
.zc-num-ins__head-rule {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-a45), transparent);
}
.zc-num-ins__head-meta {
    font-family: var(--zc-f-body);
    font-size: 12px; color: var(--zc-warm-mid);
    letter-spacing: 0.3px; flex-shrink: 0;
}
.zc-num-ins__title {
    margin: 0 0 12px;
    font-family: var(--zc-f-display);
    font-size: clamp(26px, 2.2vw + 14px, 42px);
    font-weight: 300; line-height: 1.1; letter-spacing: -1px;
    color: var(--zc-charcoal);
}
.zc-num-ins__title-accent {
    color: var(--zc-amber-dk); font-weight: 500; display: inline-block;
}
.zc-num-ins__sub {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 14.5px; line-height: 1.6;
    color: var(--zc-warm-dk);
}

/* 2-column layout — collage left, ledger right */
.zc-num-ins__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    align-items: stretch;
}

/* === LEFT — Image collage (2x2 compact, equal-height grid) === */
.zc-num-ins__collage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: clamp(10px, 1.2vw, 14px);
    align-self: stretch;
}
.zc-num-ins__shot {
    position: relative;
    margin: 0;
    /* Aspect ratio dropped from 4:5 (tall portrait) to 16:11 — same
       editorial feel, a lot less vertical space. */
    aspect-ratio: 16 / 11;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--zc-linen);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 14px 30px -20px rgba(106, 70, 24, 0.25);
    transition:
        transform 0.45s var(--zc-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
        box-shadow 0.45s var(--zc-ease),
        border-color 0.45s var(--zc-ease);
    will-change: transform;
}
.zc-num-ins__shot:hover {
    transform: translateY(-4px);
    border-color: var(--zc-amber-a35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 22px 40px -20px rgba(207, 138, 63, 0.36);
    z-index: 2;
}
.zc-num-ins__shot-foil {
    position: absolute; top: 0; left: 14px; right: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk) 18%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 82%, transparent 100%);
    z-index: 3;
    opacity: 0.7;
}
.zc-num-ins__shot-num {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(26, 18, 8, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 600; letter-spacing: 1.4px;
    color: var(--zc-amber-lt);
    text-transform: uppercase;
}
.zc-num-ins__shot-img {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover;
    display: block;
    max-width: none !important;
    transition: transform 0.7s var(--zc-ease);
}
.zc-num-ins__shot:hover .zc-num-ins__shot-img { transform: scale(1.06); }
.zc-num-ins__shot-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 18px 14px 14px;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 18, 8, 0.75) 65%);
    color: var(--zc-white);
}
.zc-num-ins__shot-tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(207, 138, 63, 0.22);
    border: 1px solid rgba(207, 138, 63, 0.45);
    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);
}
.zc-num-ins__shot-text {
    display: block;
    font-family: var(--zc-f-display);
    font-size: 14px; font-weight: 500;
    line-height: 1.3; letter-spacing: -0.2px;
    color: var(--zc-white);
}

/* === RIGHT — Signals ledger card === */
.zc-num-ins__ledger {
    position: relative;
    display: flex; flex-direction: column;
    padding: clamp(20px, 2vw, 28px);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(46, 75, 113, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 22px 46px -22px rgba(106, 70, 24, 0.28);
    overflow: hidden;
}
.zc-num-ins__ledger-foil {
    position: absolute; top: 0; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--zc-amber-dk) 18%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 82%, transparent 100%);
    z-index: 1;
}
.zc-num-ins__ledger-corner {
    position: absolute; width: 24px; height: 24px;
    pointer-events: none;
    z-index: 1;
}
.zc-num-ins__ledger-corner--tr {
    top: 10px; right: 10px;
    border-top: 1px solid var(--zc-amber-a45);
    border-right: 1px solid var(--zc-amber-a45);
}
.zc-num-ins__ledger-corner--bl {
    bottom: 10px; left: 10px;
    border-bottom: 1px solid var(--zc-amber-a45);
    border-left: 1px solid var(--zc-amber-a45);
}

.zc-num-ins__ledger-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--zc-amber-a25);
}
.zc-num-ins__ledger-tag {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-amber-dk);
    opacity: 0.85;
    margin-bottom: 6px;
}
.zc-num-ins__ledger-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(16px, 1vw + 8px, 19px);
    font-weight: 500; line-height: 1.2; letter-spacing: -0.4px;
    color: var(--zc-charcoal);
}

/* Vertical ledger of 4 rows — tight, content-driven height */
.zc-num-ins__rows {
    list-style: none; margin: 0 0 12px; padding: 0;
}
.zc-num-ins__row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(207, 138, 63, 0.20);
    animation: zc-num-row-in 0.55s var(--zc-ease, cubic-bezier(0.16, 1, 0.30, 1)) both;
    animation-delay: calc(0.08s * var(--zc-i, 0));
    transition: padding-left 0.35s var(--zc-ease);
}
.zc-num-ins__row:last-child { border-bottom: none; }
.zc-num-ins__row:hover { padding-left: 6px; }

.zc-num-ins__row-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 600;
    letter-spacing: 1.4px;
    color: var(--zc-amber-dk);
    opacity: 0.8;
    min-width: 26px;
}
.zc-num-ins__row-ic {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
        linear-gradient(135deg, var(--zc-amber-a25), var(--zc-amber-a08));
    border: 1px solid var(--zc-amber-a35);
    color: var(--zc-amber-dk);
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.35s var(--zc-ease-spring);
}
.zc-num-ins__row:hover .zc-num-ins__row-ic { transform: rotate(-6deg) scale(1.06); }
.zc-num-ins__row-text { min-width: 0; }
.zc-num-ins__row-fig {
    display: block;
    font-family: var(--zc-f-display);
    font-size: clamp(18px, 1vw + 10px, 22px);
    font-weight: 400; line-height: 1.1; letter-spacing: -0.4px;
    color: var(--zc-charcoal);
}
.zc-num-ins__row-lbl {
    display: inline-block;
    margin: 1px 0 0;
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-num-ins__row-sub {
    margin: 1px 0 0;
    font-family: var(--zc-f-body);
    font-size: 11.5px; line-height: 1.4;
    color: var(--zc-warm-dk);
}

/* Methodology footnote */
.zc-num-ins__note {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px dashed var(--zc-amber-a25);
    font-family: var(--zc-f-body);
    font-size: 11px; line-height: 1.5;
    color: var(--zc-warm-dk);
}
.zc-num-ins__note i { color: var(--zc-amber-dk); font-size: 13px; line-height: 1.5; flex-shrink: 0; }


/* ==========================================================================
   §6   CLOSING CTA, navy band with amber accent
   ========================================================================== */
.zc-num-cta {
    position: relative;
    padding: clamp(48px, 5vw, 96px) 0;
    background:
        radial-gradient(ellipse at 8% 8%, rgba(207, 138, 63, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 92%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        linear-gradient(160deg, var(--zc-charcoal) 0%, var(--zc-deep) 100%);
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
}
.zc-num-cta::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk) 18%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 82%, transparent);
}
.zc-num-cta::after {
    content: '';
    position: absolute;
    top: -90px; right: -90px;
    width: 240px; height: 240px;
    border: 1px solid rgba(207, 138, 63, 0.20);
    border-radius: 50%;
    pointer-events: none;
}
.zc-num-cta__inner {
    position: relative; z-index: 1;
    text-align: center;
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}
.zc-num-cta__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(207, 138, 63, 0.18);
    border: 1px solid rgba(207, 138, 63, 0.30);
    font-family: var(--zc-f-heading); font-size: 11px; font-weight: 700;
    letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--zc-amber-lt);
    margin-bottom: 16px;
}
.zc-num-cta__eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
    box-shadow: 0 0 8px var(--zc-amber-a45);
    animation: zc-num-pulse 1.8s ease-in-out infinite;
}
@keyframes zc-num-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.3); }
}
.zc-num-cta__title {
    margin: 0 auto 12px; max-width: 22ch;
    font-family: var(--zc-f-display);
    font-size: clamp(28px, 2.8vw + 12px, 50px);
    font-weight: 300; line-height: 1.1; letter-spacing: -1.2px;
    color: var(--zc-white);
}
.zc-num-cta__title-accent {
    display: inline-block; font-weight: 500; color: var(--zc-amber-lt);
}
.zc-num-cta__sub {
    margin: 0 auto 28px; max-width: 56ch;
    font-family: var(--zc-f-body);
    font-size: 15px; line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.zc-num-cta__btns {
    display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.zc-num-cta__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px; border-radius: 4px;
    font-family: var(--zc-f-heading); font-size: 12px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s var(--zc-ease-spring);
}
.zc-num-cta__btn i { font-size: 14px; }
.zc-num-cta__btn--primary {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    box-shadow: 0 10px 24px var(--zc-amber-a45);
}
.zc-num-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px var(--zc-amber-a45);
    color: var(--zc-white);
}
.zc-num-cta__btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.92);
}
.zc-num-cta__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(207, 138, 63, 0.40);
    color: var(--zc-amber-lt);
    transform: translateY(-2px);
}


/* ==========================================================================
   §7   MOBILE / TABLET responsive overrides
   ========================================================================== */
@media (max-width: 1100px) {
    .zc-num-head__grid,
    .zc-num-team__grid,
    .zc-num-scope__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .zc-num-hero__inner,
    .zc-num-hero__topline,
    .zc-num-head__inner,
    .zc-num-team__inner,
    .zc-num-ins__inner,
    .zc-num-scope__inner,
    .zc-num-cta__inner {
        padding-left: var(--zc-pad-x-mb);
        padding-right: var(--zc-pad-x-mb);
    }
    .zc-num-hero__layout    { grid-template-columns: 1fr; gap: 28px; }
    .zc-num-team__layout    {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    /* Flatten the copy column so the header, ledger, and footer
       become direct children of the layout grid. Lets us slot the
       "The care team" header ABOVE the doctor orbit on mobile while
       leaving the ledger + footer BELOW it. */
    .zc-num-team__copy      { display: contents; }
    .zc-num-team__head      { order: 1; margin-bottom: 0; }
    .zc-num-team__orbit     { order: 2; margin-top: 0; }
    .zc-num-team__ledger    { order: 3; }
    .zc-num-team__foot      { order: 4; }
    .zc-num-team__foot      { flex-direction: column; align-items: flex-start; gap: 14px; }
    .zc-num-ins__layout     { grid-template-columns: 1fr; gap: 24px; }
    .zc-num-ins__shot:nth-child(2),
    .zc-num-ins__shot:nth-child(3),
    .zc-num-ins__shot:nth-child(4) { transform: none; }
    .zc-num-ins__shot:hover { transform: translateY(-4px); }
    /* Scope master-index → stack vertically. Index becomes a horizontal
       chip strip, detail panel sits below. */
    .zc-num-scope__layout    { grid-template-columns: 1fr; gap: 16px; }
    .zc-num-scope__index     { padding: 16px 14px; }
    .zc-num-scope__index-list {
        display: flex; flex-wrap: wrap; gap: 6px;
    }
    .zc-num-scope__index-list li { border-bottom: none; }
    .zc-num-scope__idx {
        padding: 8px 12px;
        background: var(--zc-white);
        border: 1px solid var(--zc-linen);
        border-radius: 999px;
        gap: 8px;
    }
    .zc-num-scope__idx::before { display: none; }
    .zc-num-scope__idx:hover,
    .zc-num-scope__idx.is-on   { padding-left: 12px; background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)); border-color: transparent; }
    .zc-num-scope__idx:hover .zc-num-scope__idx-name,
    .zc-num-scope__idx.is-on .zc-num-scope__idx-name,
    .zc-num-scope__idx:hover .zc-num-scope__idx-num,
    .zc-num-scope__idx.is-on .zc-num-scope__idx-num   { color: var(--zc-white); opacity: 1; }
    .zc-num-scope__idx:hover .zc-num-scope__idx-count,
    .zc-num-scope__idx.is-on .zc-num-scope__idx-count { background: rgba(255, 255, 255, 0.22); border-color: transparent; color: var(--zc-white); }
    .zc-num-scope__idx-arrow { display: none; }
    .zc-num-scope__index-eyebrow,
    .zc-num-scope__index-foot { display: none; }
    .zc-num-scope__detail-watermark { width: 200px; height: 200px; }
    .zc-num-scope__detail-watermark i { font-size: 180px; }
}
/* ==========================================================================
   MOBILE — hero compact + chip scroller
   ========================================================================== */
@media (max-width: 768px) {
    /* Hero — section bottom padding trimmed, title/lead reduced. */
    .zc-num-hero { padding-bottom: clamp(14px, 1.8vw, 24px); }
    .zc-num-hero__crumb { font-size: 10px; }
    .zc-num-hero__eyebrow { font-size: 9.5px; letter-spacing: 1.8px; margin-bottom: 10px; }
    .zc-num-hero__title {
        font-size: clamp(24px, 6.4vw, 30px);
        letter-spacing: -0.6px;
        line-height: 1.12;
        margin-bottom: 10px;
    }
    .zc-num-hero__lead {
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 16px;
    }

    /* Chips (Headline numbers · The care team · What we do · Quality
       signals) in a single row — scroll horizontally if they overflow
       rather than wrapping. */
    .zc-num-hero__quick {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 calc(-1 * var(--zc-pad-x-mb));
        padding: 0 var(--zc-pad-x-mb) 4px;
    }
    .zc-num-hero__quick::-webkit-scrollbar { display: none; }
    .zc-num-hero__chip {
        flex: 0 0 auto;
        padding: 7px 11px;
        font-size: 10px;
        letter-spacing: 0.4px;
        gap: 5px;
    }
    .zc-num-hero__chip i { font-size: 11px; }

    /* Hero poster footer — 96% / 45+ / 6 stats in a single row with
       hairline dividers between them, sized for phone. */
    .zc-num-hero__poster-foot {
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 8px;
        align-items: stretch;
    }
    .zc-num-hero__poster-mini {
        align-items: center;
        text-align: center;
        gap: 3px;
    }
    .zc-num-hero__poster-mini-n {
        font-size: clamp(20px, 5.6vw, 24px);
        letter-spacing: -0.4px;
    }
    .zc-num-hero__poster-mini-n sup { font-size: 0.5em; }
    .zc-num-hero__poster-mini-l {
        font-size: 8.5px;
        letter-spacing: 1.1px;
    }

    /* §2 Fertility-picture cards — horizontal scroller, ~1.3 visible. */
    .zc-num-head__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .zc-num-head__grid::-webkit-scrollbar { display: none; }
    .zc-num-head__card {
        flex: 0 0 76.92%;  /* ~1.3 cards visible */
        scroll-snap-align: start;
        padding: 14px 12px;
    }
    .zc-num-head__card-num { font-size: 9.5px; top: 8px; left: 10px; }
    .zc-num-head__card-ic { width: 26px; height: 26px; font-size: 13px; margin-bottom: 6px; }
    .zc-num-head__card-kind { font-size: 8.5px; letter-spacing: 1.1px; margin-bottom: 4px; }
    .zc-num-head__card-figure {
        font-size: clamp(22px, 6.4vw, 28px);
        letter-spacing: -0.7px;
        margin: 2px 0 6px;
    }
    .zc-num-head__card-lbl { font-size: 12px; line-height: 1.2; margin-bottom: 4px; }
    .zc-num-head__card-sub { font-size: 10.5px; line-height: 1.4; margin-bottom: 8px; }
    .zc-num-head__card-src { font-size: 8.5px; letter-spacing: 0.9px; }
    /* Per-card visualizations also shrink so they don't overflow the
       smaller card frame. */
    .zc-num-head__viz--six { gap: 4px; }
    .zc-num-head__viz--six span { width: 16px; height: 16px; }
    .zc-num-head__viz--arc { max-width: 88px; }
    .zc-num-head__viz--days span { width: 20px; height: 20px; font-size: 9px; }
    .zc-num-head__viz--bars { height: 28px; }

    /* §3 Care team — ledger rows (01/02/03/04) in a 2x2 grid. */
    .zc-num-team__ledger {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid rgba(207, 138, 63, 0.20);
        margin-bottom: 18px;
    }
    .zc-num-team__row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 2px 10px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(207, 138, 63, 0.14);
    }
    /* Right cell of each pair gets a hairline vertical divider.
       Extra padding-left so the num/label inside don't read as
       touching the divider line. */
    .zc-num-team__row:nth-child(even) {
        border-left: 1px solid rgba(207, 138, 63, 0.14);
        padding-left: 18px;
    }
    .zc-num-team__row-rule { display: none; }
    .zc-num-team__row-num {
        grid-row: 1; grid-column: 1;
        font-size: 9.5px; letter-spacing: 1.2px;
    }
    /* Number sits on the right inset 8px from the boundary so it
       doesn't visually touch the vertical divider. */
    .zc-num-team__row-fig {
        grid-row: 1 / 3; grid-column: 2;
        align-self: center;
        font-size: clamp(24px, 7.2vw, 30px);
        min-width: auto;
        text-align: center;
        padding: 0 4px;
    }
    .zc-num-team__row-lbl {
        grid-row: 2; grid-column: 1;
        font-size: 9.5px; letter-spacing: 1px;
        white-space: normal;
        line-height: 1.2;
    }

    /* Footer — "One Pradhan Nagar address" + "Meet each one" both centered. */
    .zc-num-team__foot {
        flex-direction: column;
        align-items: center !important;
        justify-content: center;
        gap: 12px;
        text-align: center;
    }
    .zc-num-team__foot-loc { justify-content: center; }
    .zc-num-team__cta { padding: 9px 16px; font-size: 10px; letter-spacing: 1.2px; }

    /* Doctor orbit → flat horizontal scroller of rectangular portrait
       cards on mobile. Drop the radial absolute positioning, dashed
       rings, hub and connecting spokes.
       Sits inside the standard inner padding (no full-bleed) so the
       left and right gaps to the section edges stay equal. */
    .zc-num-team__orbit {
        width: auto !important;
        height: auto !important;
        margin: 0;
        padding: 0;
    }
    .zc-num-team__orbit-ring,
    .zc-num-team__hub { display: none; }
    .zc-num-team__orbit-list {
        position: static;
        inset: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0 8px;
    }
    .zc-num-team__orbit-list::-webkit-scrollbar { display: none; }
    .zc-num-team__orbit-item {
        position: static;
        transform: none !important;
        animation: none;
        flex: 0 0 38%;  /* ~2.6 portraits visible */
        width: auto;
        height: auto;
        aspect-ratio: 3 / 4;
        scroll-snap-align: start;
    }
    .zc-num-team__orbit-link {
        width: 100%; height: 100%;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.20);
    }
    .zc-num-team__orbit-link::before { display: none; }
    .zc-num-team__orbit-img-wrap { border-radius: 6px; }
    /* Tip caption sits inside the bottom of the card on a translucent
       band instead of floating outside it. */
    .zc-num-team__orbit-tip {
        position: absolute !important;
        left: 0 !important; right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        padding: 6px 8px !important;
        background: linear-gradient(180deg, transparent, rgba(18, 12, 4, 0.85));
        border-radius: 0 !important;
        opacity: 1 !important;
        text-align: center;
    }
    .zc-num-team__orbit-tip b { font-size: 10.5px; line-height: 1.15; }
    .zc-num-team__orbit-tip small { font-size: 8.5px; letter-spacing: 0.5px; }
    /* Caption: pull out of absolute positioning so it doesn't collide
       with the ledger's top border below. Sit it cleanly below the
       scroller with proper margin. */
    .zc-num-team__orbit-cap {
        position: static;
        transform: none;
        left: auto;
        bottom: auto;
        display: flex;
        justify-content: center;
        margin: 12px 0 0;
        font-size: 9px;
        letter-spacing: 1.3px;
    }
}

@media (max-width: 600px) {
    .zc-num-hero__topline-text { display: none; }
    .zc-num-scope__grid     { grid-template-columns: 1fr; }
    /* Inside the building — 4 image cards become a horizontal
       scroller (~1.3 visible) instead of a single-column stack. */
    .zc-num-ins__collage {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-auto-rows: auto !important;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .zc-num-ins__collage::-webkit-scrollbar { display: none; }
    .zc-num-ins__shot,
    .zc-num-ins__shot:nth-child(2),
    .zc-num-ins__shot:nth-child(3),
    .zc-num-ins__shot:nth-child(4) {
        flex: 0 0 76.92%;  /* ~1.3 visible */
        scroll-snap-align: start;
        aspect-ratio: 16 / 10;
        transform: none;
    }
    .zc-num-team__row {
        grid-template-columns: auto auto 1fr;
        gap: 12px;
        padding: 10px 0;
    }
    .zc-num-team__row-rule  { display: none; }
    .zc-num-team__row-fig   { font-size: clamp(28px, 9vw, 38px); min-width: auto; text-align: left; }
    .zc-num-team__orbit     { --orbit-size: 280px; --avatar: 56px; }

    /* "Small numbers, kept honestly" — 4 stat rows as a 2x2 grid. */
    .zc-num-ins__rows {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }
    .zc-num-ins__row {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 4px 8px;
        padding: 10px;
        border: 1px solid rgba(207, 138, 63, 0.18);
        border-radius: 4px;
        animation: none;
    }
    .zc-num-ins__row:hover { padding-left: 10px; }
    .zc-num-ins__row-num {
        grid-row: 1; grid-column: 1;
        min-width: auto;
        font-size: 9px; letter-spacing: 1.1px;
    }
    .zc-num-ins__row-ic {
        grid-row: 1; grid-column: 2;
        justify-self: end;
        width: 26px; height: 26px;
        font-size: 12px;
    }
    .zc-num-ins__row-text {
        grid-row: 2; grid-column: 1 / 3;
    }
    .zc-num-ins__row-fig {
        font-size: clamp(15px, 4.5vw, 18px);
    }
    .zc-num-ins__row-lbl {
        font-size: 8.5px; letter-spacing: 1px;
    }
    .zc-num-ins__row-sub {
        font-size: 10px; line-height: 1.35;
    }
    .zc-num-head__head-row,
    .zc-num-scope__head-row { flex-wrap: wrap; }
    .zc-num-head__head-rule,
    .zc-num-scope__head-rule{ display: none; }
    .zc-num-team__pile-item { width: 44px; height: 44px; margin-left: -10px; }
    /* Keep 96% / 45+ / 6 stats in a single row with hairline
       dividers between them on phone — same layout as desktop. */
    .zc-num-hero__poster-foot {
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 6px;
    }
    .zc-num-hero__poster-divider { display: block; }
    .zc-num-poster__line { flex-wrap: wrap; gap: 8px; }
    .zc-num-poster__line--mid { padding-left: 0; }
    /* Keep "Book a free visit" + "Meet the team" side-by-side on phone. */
    .zc-num-cta__btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .zc-num-cta__btn {
        justify-content: center;
        padding: 10px 8px;
        font-size: 9.5px;
        letter-spacing: 0.6px;
        gap: 5px;
        min-width: 0;
    }
    .zc-num-cta__btn i { font-size: 11px; }
}