/* ==========================================================================
   ZIVAH · SERVICE DETAIL — premium editorial shell.
   --------------------------------------------------------------------------
   Loaded AFTER core.css + custom/css/style.css.
   The dynamic DB content sits inside `<div class="zc-svc-prose">`. All
   h1 / h2 / h3 / p / ul / ol / table / blockquote / hr / code / img /
   figcaption / dl rules for the DB-rendered HTML live in this file under
   `.zc-svc-body__main .zc-svc-prose <el>` — fully independent of the
   legacy `.services-body` cascade in custom/css/style.css.
   --------------------------------------------------------------------------
   §1   Hero — editorial intro + image card
   §2   Body — 2-column layout (DB content + helpful sidebar)
   §3   FAQ — premium <details>/<summary> accordion
   §4   Closing CTA
   §5   Mobile / tablet responsive
   ========================================================================== */


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

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

/* Branded breadcrumb */
.zc-svc-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-svc-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-svc-hero__crumb-link:hover { color: var(--zc-amber-dk); border-color: var(--zc-amber-a35); background: rgba(255, 255, 255, 0.95); }
.zc-svc-hero__crumb-sep { color: var(--zc-stone); font-size: 9px; }
.zc-svc-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);
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editorial typography tokens — used by the overlay inside the plate
   (and re-styled there for white-on-dark legibility). */
.zc-svc-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: 14px;
}
.zc-svc-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-svc-hero__title {
    font-family: var(--zc-f-display);
    font-size: clamp(32px, 3.4vw + 14px, 60px);
    font-weight: 300; line-height: 1.05; letter-spacing: -1.4px;
    color: var(--zc-charcoal); margin: 0 0 16px 0;
}
.zc-svc-hero__lead {
    font-family: var(--zc-f-body);
    font-size: clamp(15px, 0.4vw + 13px, 17px);
    line-height: 1.65; color: var(--zc-warm-dk);
    margin: 0 0 18px 0;
    max-width: 64ch;
}

.zc-svc-hero__meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 16px;
}
.zc-svc-hero__pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    font-family: var(--zc-f-heading); font-size: 10.5px; font-weight: 600;
    color: var(--zc-warm-dk);
    letter-spacing: 0.3px;
}
.zc-svc-hero__pill i { color: var(--zc-amber-dk); font-size: 11px; }
.zc-svc-hero__pill b { font-family: var(--zc-f-display); font-weight: 500; color: var(--zc-charcoal); }

.zc-svc-hero__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-svc-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-svc-hero__chip i { font-size: 12px; color: var(--zc-amber-dk); }
.zc-svc-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);
}
.zc-svc-hero__chip--cta {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white); border-color: transparent;
    box-shadow: 0 8px 18px var(--zc-amber-a35);
}
.zc-svc-hero__chip--cta i { color: var(--zc-white); }
.zc-svc-hero__chip--cta:hover { color: var(--zc-white); background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk)); }

/* ==========================================================================
   §1.1   FEATURE PLATE — cinematic, wide-image-friendly (16:7 desktop /
          16:9 narrow) replacement for the old side aside. Treats the
          uploaded image as a magazine masthead photograph: gold-foil
          top, four corner brackets, soft dark gradient at bottom for
          legibility, plus two floating chips (category top-left,
          doctor-led seal bottom-right).
   ========================================================================== */
.zc-svc-hero__plate {
    position: relative;
    margin: 0;
    /* Tall enough to host the editorial copy overlay at the bottom AND
       still let the photograph breathe at the top. Min height clamps it
       on short viewports so the title doesn't crash into the chrome. */
    height: clamp(420px, 62vh, 640px);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--zc-amber-a25);
    background: linear-gradient(135deg, var(--zc-amber-a08), var(--zc-linen));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 1px 0 var(--zc-amber-a25),
        0 30px 64px -28px rgba(106, 70, 24, 0.42),
        0 12px 28px -16px rgba(46, 75, 113, 0.18);
    isolation: isolate;
}
@media (max-width: 720px) {
    .zc-svc-hero__plate { height: clamp(380px, 60vh, 540px); border-radius: 10px; }
}

.zc-svc-hero__plate-img {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover;
    display: block;
    transform: scale(1.03);
    transition: transform 1.2s var(--zc-ease);
    z-index: 1;
}
.zc-svc-hero__plate:hover .zc-svc-hero__plate-img { transform: scale(1.08); }

/* Strong dark gradient at bottom — anchors the editorial copy overlay
   so eyebrow, title, lead and meta stay readable on any photograph. */
.zc-svc-hero__plate-mask {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    background:
        linear-gradient(180deg,
            rgba(18, 12, 4, 0.05) 0%,
            transparent 28%,
            transparent 45%,
            rgba(18, 12, 4, 0.55) 75%,
            rgba(18, 12, 4, 0.85) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Gold-foil hairline at the very top — same gesture used on cards */
.zc-svc-hero__plate-foil {
    position: absolute; top: 0; left: 28px; right: 28px;
    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: 4;
}

/* Four corner brackets — magazine-cover ornament */
.zc-svc-hero__plate-corner {
    position: absolute; width: 32px; height: 32px;
    pointer-events: none;
    z-index: 4;
}
.zc-svc-hero__plate-corner--tl { top: 16px; left: 16px;
    border-top: 2px solid var(--zc-amber-dk); border-left: 2px solid var(--zc-amber-dk); }
.zc-svc-hero__plate-corner--tr { top: 16px; right: 16px;
    border-top: 2px solid var(--zc-amber-dk); border-right: 2px solid var(--zc-amber-dk); }
.zc-svc-hero__plate-corner--bl { bottom: 16px; left: 16px;
    border-bottom: 2px solid var(--zc-amber-dk); border-left: 2px solid var(--zc-amber-dk); }
.zc-svc-hero__plate-corner--br { bottom: 16px; right: 16px;
    border-bottom: 2px solid var(--zc-amber-dk); border-right: 2px solid var(--zc-amber-dk); }

/* Category chip — top-left, dark glassmorphic */
.zc-svc-hero__plate-cat {
    position: absolute;
    top: clamp(20px, 2.4vw, 32px); left: clamp(20px, 2.4vw, 32px);
    z-index: 5;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(26, 18, 8, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(207, 138, 63, 0.50);
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--zc-amber-lt);
    box-shadow: 0 8px 18px -6px rgba(18, 12, 4, 0.40);
}
.zc-svc-hero__plate-cat i { font-size: 12px; }

/* Editorial content overlay — anchored bottom-left inside the plate.
   White-on-dark typography so the title reads as a magazine masthead
   sitting right on the photograph. The dark gradient mask above keeps
   it legible no matter what the photograph looks like. */
.zc-svc-hero__plate-content {
    position: absolute;
    left: clamp(22px, 3vw, 44px);
    right: clamp(22px, 3vw, 44px);
    bottom: clamp(28px, 3.4vw, 44px);
    z-index: 5;
    max-width: 880px;
    color: var(--zc-white);
}

.zc-svc-hero__plate-content .zc-svc-hero__eyebrow {
    color: var(--zc-amber-lt);
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.zc-svc-hero__plate-content .zc-svc-hero__title {
    color: var(--zc-white);
    font-size: clamp(28px, 3.2vw + 12px, 56px);
    font-weight: 300;
    letter-spacing: -1.2px;
    margin: 0 0 14px 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.40);
}
.zc-svc-hero__plate-content .zc-svc-hero__lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(14px, 0.4vw + 12px, 16px);
    line-height: 1.6;
    margin: 0 0 16px 0;
    max-width: 64ch;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.zc-svc-hero__plate-content .zc-svc-hero__meta {
    margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
/* Pills inside the overlay use a glassmorphic light treatment */
.zc-svc-hero__plate-content .zc-svc-hero__pill {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.zc-svc-hero__plate-content .zc-svc-hero__pill i {
    color: var(--zc-amber-lt);
}
.zc-svc-hero__plate-content .zc-svc-hero__pill b {
    color: var(--zc-white);
}

@media (max-width: 720px) {
    .zc-svc-hero__plate-content .zc-svc-hero__lead {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


/* ==========================================================================
   §2   BODY — 2-column editorial layout (DB content + helpful sidebar)
   --------------------------------------------------------------------------
   The section now has a soft cream backdrop (matches the rest of the
   site), floating ambient shapes, and the article wrapper is a premium
   card with foil hairline, bracket corners, and a magazine-column rule
   running down the inside-left edge. Drop cap, masthead, and footer
   are added as new chrome around the .zc-svc-prose inner content,
   which still keeps every existing rule from custom/css/style.css.
   ========================================================================== */
.zc-svc-body-wrap {
    position: relative;
    /* `overflow: clip` clips the decorative shapes WITHOUT creating a scroll
       container — so `position: sticky` on the sidebar still pins to the
       page viewport. (Plain `overflow: hidden` would silently break sticky.) */
    overflow: clip;
    background:
        radial-gradient(ellipse at 8% 10%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 90%, 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);
}
.zc-svc-body__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.zc-svc-body__shape--1 {
    top: -120px; right: -100px;
    width: 320px; height: 320px;
    border: 1px dashed var(--zc-amber-a25);
    animation: zc-svc-spin 90s linear infinite;
}
.zc-svc-body__shape--2 {
    bottom: -130px; left: -110px;
    width: 240px; height: 240px;
    border: 1px solid var(--zc-navy-a15);
    animation: zc-svc-breathe 11s ease-in-out infinite reverse;
}
@keyframes zc-svc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes zc-svc-breathe {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.05); opacity: 1;    }
}
.zc-svc-body {
    position: relative; z-index: 1;
    padding: clamp(28px, 3.4vw, 56px) 0;
}
.zc-svc-body__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
    gap: clamp(22px, 2.6vw, 40px);
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
    align-items: start;
}
@media (max-width: 960px) {
    .zc-svc-body__inner {
        grid-template-columns: 1fr;
        gap: clamp(20px, 3vw, 32px);
    }
}
.zc-svc-body__main {
    min-width: 0;
    position: relative;
}

/* === Article masthead — editorial meta strip on the cream backdrop.
       No card around it: a gold-foil top hairline and a dashed amber
       bottom rule are the only visual chrome, so the article reads as
       part of the page, not boxed in. */
.zc-svc-body__masthead {
    position: relative;
    padding: clamp(14px, 1.8vw, 22px) 0 clamp(14px, 1.6vw, 20px);
    margin-bottom: clamp(16px, 2vw, 26px);
    border-bottom: 1px dashed var(--zc-amber-a25);
}
.zc-svc-body__mast-foil {
    position: absolute; top: 0; left: 0; right: 0;
    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-svc-body__mast-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-bottom: 12px;
}
.zc-svc-body__mast-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-svc-body__mast-tag i { font-size: 11px; }
.zc-svc-body__mast-cat {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-svc-body__mast-date {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--zc-f-body);
    font-size: 12px; color: var(--zc-warm-dk);
    letter-spacing: 0.05px;
}
.zc-svc-body__mast-date i { color: var(--zc-amber-dk); font-size: 12px; }

.zc-svc-body__mast-author {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--zc-linen);
}
.zc-svc-body__mast-author-init {
    position: relative;
    display: grid; place-items: 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: 14px; font-weight: 500;
    letter-spacing: -0.3px;
    overflow: hidden;
    flex-shrink: 0;
}
/* When a real user image is available it sits on top of the initial
   fallback; the initial stays visible only when the image is missing
   or has not loaded yet. */
.zc-svc-body__mast-author-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50%;
    z-index: 1;
}
.zc-svc-body__mast-author-text {
    display: flex; flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.zc-svc-body__mast-author-text small {
    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-svc-body__mast-author-text b {
    font-family: var(--zc-f-display);
    font-size: 14px; font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
}
.zc-svc-body__mast-author-rt {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--zc-linen);
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--zc-warm-dk);
    white-space: nowrap;
}
.zc-svc-body__mast-author-rt i { color: var(--zc-amber-dk); font-size: 11px; }


/* === The .zc-svc-prose wrapper — magazine column on the cream bg.
       No white card, no border. The content flows on the section's
       cream gradient with a gold-foil left margin rule and a corner
       ornament at the bottom-right for editorial framing. */
.zc-svc-body__main .zc-svc-prose {
    position: relative;
    padding: 0 0 clamp(24px, 2.6vw, 36px) clamp(18px, 2.2vw, 32px);
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
/* L-bracket ornament in the bottom-right of the article column */
.zc-svc-body__main .zc-svc-prose::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 24px; height: 24px;
    border-bottom: 1px solid var(--zc-amber-a45);
    border-right: 1px solid var(--zc-amber-a45);
    pointer-events: none;
}
/* Magazine-column left rule — gold-foil down the article's left margin */
.zc-svc-body__main .zc-svc-prose::before {
    content: '';
    position: absolute;
    top: 4px; bottom: 30px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--zc-amber-a35) 12%,
        var(--zc-amber) 50%,
        var(--zc-amber-a35) 88%,
        transparent 100%);
    border-radius: 2px;
    opacity: 0.55;
    pointer-events: none;
}

/* Drop cap on the very first paragraph of the dynamic content. */
.zc-svc-body__main .zc-svc-prose > p:first-of-type::first-letter {
    font-family: var(--zc-f-display);
    float: left;
    font-size: 3.6em;
    line-height: 0.9;
    font-weight: 400;
    color: var(--zc-amber-dk);
    padding: 4px 10px 0 0;
    margin-top: 4px;
    letter-spacing: -2px;
}


/* ==========================================================================
   §2.5  PREMIUM EDITORIAL TYPOGRAPHY for DB-rendered content.
   --------------------------------------------------------------------------
   These rules use `.zc-svc-body__main .zc-svc-prose <el>` (3 classes +
   element = high specificity) to override the existing legacy rules in
   custom/css/style.css and bring every dynamic element in line with the
   page's editorial language: amber/navy palette, gold-foil hairlines,
   monospace markers, dashed accents.
   ========================================================================== */

/* Counter so each H2 in the body gets an automatic ·01·, ·02·, ... marker */
.zc-svc-body__main .zc-svc-prose { counter-reset: zc-svc-h2; }

/* === HEADINGS ============================================================ */
.zc-svc-body__main .zc-svc-prose h1 {
    margin: 0 0 14px;
    font-family: var(--zc-f-display);
    font-size: clamp(28px, 1.8vw + 14px, 38px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.8px;
    color: var(--zc-charcoal);
}

.zc-svc-body__main .zc-svc-prose h2 {
    counter-increment: zc-svc-h2;
    position: relative;
    margin: 36px 0 14px;
    padding-bottom: 12px;
    font-family: var(--zc-f-display);
    font-size: clamp(22px, 1.4vw + 12px, 30px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--zc-charcoal);
    border-bottom: 1px dashed var(--zc-amber-a25);
}
/* Auto-numbered ·01· marker before each H2 */
.zc-svc-body__main .zc-svc-prose h2::before {
    content: "\00b7" counter(zc-svc-h2, decimal-leading-zero) "\00b7";
    display: inline-block;
    margin-right: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 0.42em;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--zc-amber-dk);
    vertical-align: middle;
    line-height: 1.5;
}

.zc-svc-body__main .zc-svc-prose h3 {
    position: relative;
    margin: 28px 0 10px;
    padding-left: 16px;
    font-family: var(--zc-f-display);
    font-size: clamp(18px, 1vw + 10px, 22px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--zc-charcoal);
}
.zc-svc-body__main .zc-svc-prose h3::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 4px; height: 60%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, var(--zc-amber-lt), var(--zc-amber-dk));
    border-radius: 2px;
}

.zc-svc-body__main .zc-svc-prose h4 {
    margin: 22px 0 8px;
    font-family: var(--zc-f-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}

.zc-svc-body__main .zc-svc-prose h5,
.zc-svc-body__main .zc-svc-prose h6 {
    margin: 18px 0 6px;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-warm-dk);
}


/* === BODY COPY =========================================================== */
.zc-svc-body__main .zc-svc-prose p {
    margin: 0 0 14px;
    font-family: var(--zc-f-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.05px;
    color: var(--zc-warm-dk);
}
.zc-svc-body__main .zc-svc-prose p b,
.zc-svc-body__main .zc-svc-prose p strong {
    font-family: var(--zc-f-body);
    font-weight: 600;
    color: var(--zc-charcoal);
    font-size: inherit;
}
.zc-svc-body__main .zc-svc-prose p em,
.zc-svc-body__main .zc-svc-prose em {
    font-style: normal;
    background: linear-gradient(transparent 60%, var(--zc-amber-a18) 60%);
    padding: 0 2px;
    color: var(--zc-charcoal);
}
.zc-svc-body__main .zc-svc-prose mark {
    padding: 0 4px;
    background: var(--zc-amber-a25);
    color: var(--zc-charcoal);
    border-radius: 2px;
}
.zc-svc-body__main .zc-svc-prose small {
    font-size: 13px;
    color: var(--zc-warm-mid);
}


/* === LINKS =============================================================== */
/* Default editorial links inside the article body — amber-dk with a
   thin amber underline. Excludes the helpful-CTA chip below (which
   has its own white-on-amber treatment) so that button doesn't
   inherit amber text on an amber background. */
.zc-svc-body__main .zc-svc-prose a:not(.zc-svc-body__helpful-cta),
.zc-svc-body__main .zc-svc-prose p a:not(.zc-svc-body__helpful-cta) {
    color: var(--zc-amber-dk) !important;
    border-bottom: 1px solid var(--zc-amber-a35);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.05px;
    transition: color 0.25s var(--zc-ease), border-color 0.25s var(--zc-ease), background 0.25s var(--zc-ease);
}
.zc-svc-body__main .zc-svc-prose a:not(.zc-svc-body__helpful-cta):hover {
    color: var(--zc-amber-dk) !important;
    border-bottom-color: var(--zc-amber-dk);
    background: var(--zc-amber-a08);
}
/* Re-assert the helpful-CTA's white-on-amber styling at higher
   specificity in case other anchor rules still try to win. */
.zc-svc-body__main .zc-svc-prose a.zc-svc-body__helpful-cta {
    color: var(--zc-white) !important;
    border-bottom: 0 !important;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)) !important;
}
.zc-svc-body__main .zc-svc-prose a.zc-svc-body__helpful-cta:hover {
    color: var(--zc-white) !important;
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber-dk)) !important;
}


/* === LISTS =============================================================== */
.zc-svc-body__main .zc-svc-prose ul,
.zc-svc-body__main .zc-svc-prose ol {
    margin: 14px 0;
    padding: 0;
    list-style: none;
}
/* Defeat inline `style="list-style-type: circle"` (or roman/square/...)
   that the WYSIWYG editor injects on UL/OL tags — would otherwise paint
   native bullets next to the custom ::before markers below. !important
   beats the inline attribute; ::marker rule kills any leftover dot
   browsers might still draw. */
.zc-svc-body__main .zc-svc-prose ul,
.zc-svc-body__main .zc-svc-prose ol,
.zc-svc-body__main .zc-svc-prose ul[style],
.zc-svc-body__main .zc-svc-prose ol[style] {
    list-style: none !important;
    list-style-type: none !important;
}
.zc-svc-body__main .zc-svc-prose ul li::marker,
.zc-svc-body__main .zc-svc-prose ol li::marker {
    content: '';
    color: transparent;
    font-size: 0;
}
.zc-svc-body__main .zc-svc-prose ul li,
.zc-svc-body__main .zc-svc-prose ol li {
    position: relative;
    padding: 6px 0 6px 30px;
    font-family: var(--zc-f-body);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--zc-warm-dk);
}
.zc-svc-body__main .zc-svc-prose ul li + li,
.zc-svc-body__main .zc-svc-prose ol li + li {
    border-top: 1px dashed var(--zc-linen);
}
.zc-svc-body__main .zc-svc-prose ul li::before {
    content: '';
    position: absolute;
    left: 8px; top: 1.05em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
    box-shadow: 0 0 8px var(--zc-amber-a35);
}
.zc-svc-body__main .zc-svc-prose ol {
    counter-reset: zc-svc-ol;
}
.zc-svc-body__main .zc-svc-prose ol li {
    counter-increment: zc-svc-ol;
}
.zc-svc-body__main .zc-svc-prose ol li::before {
    content: counter(zc-svc-ol, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0.55em;
    width: 24px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--zc-amber-dk);
    text-align: left;
}
/* Nested lists keep the same rhythm */
.zc-svc-body__main .zc-svc-prose ul ul,
.zc-svc-body__main .zc-svc-prose ol ol,
.zc-svc-body__main .zc-svc-prose ul ol,
.zc-svc-body__main .zc-svc-prose ol ul {
    margin: 6px 0 6px 12px;
}
.zc-svc-body__main .zc-svc-prose ul li strong,
.zc-svc-body__main .zc-svc-prose ol li strong {
    color: var(--zc-charcoal);
    font-weight: 600;
}
.zc-svc-body__main .zc-svc-prose ul li strong a {
    color: var(--zc-amber-dk) !important;
    border-bottom: 1px solid var(--zc-amber-a35);
}


/* === BLOCKQUOTE — premium pull-quote ===================================== */
.zc-svc-body__main .zc-svc-prose blockquote {
    position: relative;
    margin: 28px 0;
    padding: 28px 28px 24px 64px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.12) 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 16px 32px -22px rgba(106, 70, 24, 0.22);
    font-family: var(--zc-f-display);
    font-size: clamp(17px, 1vw + 10px, 21px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: var(--zc-charcoal);
    quotes: "\201C" "\201D";
    overflow: hidden;
}
.zc-svc-body__main .zc-svc-prose blockquote::before {
    content: "\201C";
    position: absolute;
    top: 8px; left: 14px;
    font-family: var(--zc-f-display);
    font-size: 80px;
    line-height: 1;
    color: var(--zc-amber-a45);
    pointer-events: none;
}
.zc-svc-body__main .zc-svc-prose blockquote::after {
    content: '';
    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-svc-body__main .zc-svc-prose blockquote p {
    margin: 0 0 8px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.zc-svc-body__main .zc-svc-prose blockquote p:last-child { margin-bottom: 0; }
.zc-svc-body__main .zc-svc-prose blockquote cite {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 12px;
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-svc-body__main .zc-svc-prose blockquote cite::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--zc-amber-dk);
}


/* === HR — gold-foil separator =========================================== */
.zc-svc-body__main .zc-svc-prose hr {
    border: 0;
    height: 1px;
    margin: 32px 0;
    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.55;
}


/* === CODE / PRE ========================================================== */
.zc-svc-body__main .zc-svc-prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 0.92em;
    color: var(--zc-amber-dk);
}
.zc-svc-body__main .zc-svc-prose pre {
    margin: 18px 0;
    padding: 18px 20px;
    background: var(--zc-charcoal);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    border: 1px solid var(--zc-amber-a25);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.65;
    overflow-x: auto;
    box-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.55);
}
.zc-svc-body__main .zc-svc-prose pre code {
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
}


/* === TABLE — premium magazine treatment ================================= */
.zc-svc-body__main .zc-svc-prose table {
    width: 100% !important;
    margin: 22px 0;
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 6px;
    box-shadow: 0 14px 32px -22px rgba(106, 70, 24, 0.18);
    overflow: hidden;
    font-family: var(--zc-f-body);
    font-size: 14px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}
.zc-svc-body__main .zc-svc-prose table thead {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.20) 0%, transparent 55%),
        linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%);
}
.zc-svc-body__main .zc-svc-prose table thead tr { border-bottom: 1px solid var(--zc-amber-a25); }
.zc-svc-body__main .zc-svc-prose table thead th,
.zc-svc-body__main .zc-svc-prose table thead td {
    padding: 12px 16px;
    text-align: left;
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    border: 0 !important;
    background: transparent;
}
.zc-svc-body__main .zc-svc-prose table tr {
    border-bottom: 1px dashed var(--zc-linen);
}
.zc-svc-body__main .zc-svc-prose table tr:last-child { border-bottom: none; }
.zc-svc-body__main .zc-svc-prose table tbody tr:nth-child(odd) td { background: rgba(207, 138, 63, 0.025); }
.zc-svc-body__main .zc-svc-prose table tbody tr:hover td { background: var(--zc-amber-a08); }
.zc-svc-body__main .zc-svc-prose table td {
    padding: 12px 16px;
    border: 0 !important;
    font-family: var(--zc-f-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--zc-warm-dk);
    transition: background 0.25s var(--zc-ease);
}
.zc-svc-body__main .zc-svc-prose table td b,
.zc-svc-body__main .zc-svc-prose table td strong { color: var(--zc-charcoal); font-weight: 600; }

/* === TABLE SCROLL WRAPPER — horizontal scroll for wide DB tables ======
   A small inline script in service.php wraps every <table> inside
   .zc-svc-prose with <div class="zc-table-scroll">. Wide tables
   (4-5+ columns) stay readable on mobile by scrolling horizontally
   instead of squashing into the viewport. Scoped to .zc-svc-prose
   so it never affects static tables on other pages. */
.zc-svc-body__main .zc-svc-prose .zc-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 22px 0;
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--zc-amber-a35) transparent;
}
.zc-svc-body__main .zc-svc-prose .zc-table-scroll::-webkit-scrollbar { height: 6px; }
.zc-svc-body__main .zc-svc-prose .zc-table-scroll::-webkit-scrollbar-track { background: transparent; }
.zc-svc-body__main .zc-svc-prose .zc-table-scroll::-webkit-scrollbar-thumb {
    background: var(--zc-amber-a35);
    border-radius: 3px;
}
.zc-svc-body__main .zc-svc-prose .zc-table-scroll > table,
.zc-svc-body__main .zc-svc-prose .zc-table-scroll > table[style] {
    margin: 0 !important;            /* wrapper provides the spacing */
    /* Desktop default: fill the column, even column distribution. */
    width: 100% !important;
    min-width: 0;
}
/* Mobile / small screen: let the table size to its content so cells
   keep their natural widths, and scroll horizontally inside the
   wrapper when total content > viewport. */
@media (max-width: 768px) {
    .zc-svc-body__main .zc-svc-prose .zc-table-scroll {
        margin: 14px 0;
        /* Soft right-edge fade hints there's more table to scroll. */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    }
    .zc-svc-body__main .zc-svc-prose .zc-table-scroll > table,
    .zc-svc-body__main .zc-svc-prose .zc-table-scroll > table[style] {
        width: max-content !important;
        min-width: max-content;
    }
}

/* === TABLE — fully ignore writer-injected inline styles ================
   Writers occasionally add inline style="color/background/width/border/
   font-size/etc." on table / tr / td / th via the WYSIWYG editor. We
   re-declare every visual property with !important so OUR design is
   the single source of truth for table presentation regardless of
   what the inline attributes try to set. */
.zc-svc-body__main .zc-svc-prose table,
.zc-svc-body__main .zc-svc-prose table[style] {
    width: 100% !important;
    background: var(--zc-white) !important;
    border: 1px solid var(--zc-linen) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--zc-warm-dk) !important;
    font-family: var(--zc-f-body) !important;
}
.zc-svc-body__main .zc-svc-prose table tr,
.zc-svc-body__main .zc-svc-prose table tr[style] {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: inherit !important;
    height: auto !important;
}
.zc-svc-body__main .zc-svc-prose table td,
.zc-svc-body__main .zc-svc-prose table th,
.zc-svc-body__main .zc-svc-prose table td[style],
.zc-svc-body__main .zc-svc-prose table th[style] {
    padding: 12px 16px !important;
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    color: var(--zc-warm-dk) !important;
    font-family: var(--zc-f-body) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    vertical-align: top !important;
}
/* thead — re-assert the amber-cream header band styling. */
.zc-svc-body__main .zc-svc-prose table thead th,
.zc-svc-body__main .zc-svc-prose table thead td,
.zc-svc-body__main .zc-svc-prose table thead th[style],
.zc-svc-body__main .zc-svc-prose table thead td[style] {
    font-family: var(--zc-f-heading) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: var(--zc-amber-dk) !important;
}
/* Preserve zebra striping + hover despite the transparent override. */
.zc-svc-body__main .zc-svc-prose table tbody tr:nth-child(odd) td,
.zc-svc-body__main .zc-svc-prose table tbody tr:nth-child(odd) td[style] {
    background-color: rgba(207, 138, 63, 0.025) !important;
}
.zc-svc-body__main .zc-svc-prose table tbody tr:hover td,
.zc-svc-body__main .zc-svc-prose table tbody tr:hover td[style] {
    background-color: var(--zc-amber-a08) !important;
}


/* === FIGURE / IMAGE / VIDEO =============================================
   Note: lazyizeContent() (PHP) converts every DB-stored <img src> into
   <img class="lazy" src="" data-src="...">. Two global rules in
   /js/style.css and /custom/css/style.css cap `.lazy` images at
   max-width: 40% / max-height: 100% — those rules clobber prose imagery,
   so we override with `img.lazy` here (same selector specificity, declared
   later, plus !important on the cap-busting properties). */
.zc-svc-body__main .zc-svc-prose img,
.zc-svc-body__main .zc-svc-prose figure img,
.zc-svc-body__main .zc-svc-prose img.lazy,
.zc-svc-body__main .zc-svc-prose figure img.lazy {
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    width: auto;
    border-radius: 6px;
    border: 1px solid var(--zc-linen);
    box-shadow: 0 18px 38px -22px rgba(106, 70, 24, 0.26);
}
.zc-svc-body__main .zc-svc-prose figure {
    margin: 22px 0;
    padding: 0;
}
.zc-svc-body__main .zc-svc-prose figcaption {
    margin-top: 10px;
    padding-left: 14px;
    border-left: 2px solid var(--zc-amber-dk);
    font-family: var(--zc-f-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--zc-warm-mid);
}
.zc-svc-body__main .zc-svc-prose iframe,
.zc-svc-body__main .zc-svc-prose video {
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--zc-linen);
}


/* === DEFINITION LIST ==================================================== */
.zc-svc-body__main .zc-svc-prose dl {
    margin: 18px 0;
    padding: 0;
}
.zc-svc-body__main .zc-svc-prose dt {
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-top: 12px;
}
.zc-svc-body__main .zc-svc-prose dd {
    margin: 4px 0 12px 0;
    font-family: var(--zc-f-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--zc-warm-dk);
}


/* === ABBR / KBD ========================================================= */
.zc-svc-body__main .zc-svc-prose abbr {
    border-bottom: 1px dotted var(--zc-amber-dk);
    cursor: help;
    text-decoration: none;
}
.zc-svc-body__main .zc-svc-prose kbd {
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    box-shadow: 0 2px 0 var(--zc-linen);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 0.85em;
    color: var(--zc-charcoal);
}


/* === Old toggle FAQ wrapper kept for older articles that already used it.
       The new .zc-svc-faq accordion further down takes precedence on
       newly-rendered FAQ sections. */
.zc-svc-body__main .zc-svc-prose .stylisi-toggle {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 14px 28px -20px rgba(106, 70, 24, 0.18);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.zc-svc-body__main .zc-svc-prose .stylisi-toggle .toggle-title {
    font-family: var(--zc-f-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
}
.zc-svc-body__main .zc-svc-prose .toggle-active {
    border-color: var(--zc-amber-a35);
    box-shadow: 0 14px 28px -16px rgba(207, 138, 63, 0.30) !important;
}
.zc-svc-body__main .zc-svc-prose .toggle-content {
    font-family: var(--zc-f-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--zc-warm-dk);
    padding-top: 10px;
}


/* === Article footer — share + helpful prompt === */
.zc-svc-body__footer {
    margin-top: clamp(28px, 3vw, 40px);
    padding-top: clamp(20px, 2.4vw, 30px);
    border-top: 1px dashed var(--zc-amber-a25);
}
.zc-svc-body__footer-rule {
    display: block;
    width: 60px; height: 2px;
    margin: 0 0 16px;
    background: linear-gradient(90deg, var(--zc-amber-dk), transparent);
}
.zc-svc-body__footer-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    margin-bottom: 16px;
}
.zc-svc-body__footer-tag {
    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;
}
.zc-svc-body__footer-meta {
    margin-left: auto;
    font-family: var(--zc-f-body);
    font-size: 12px; line-height: 1.5;
    color: var(--zc-warm-mid);
}
.zc-svc-body__footer-meta b {
    font-family: var(--zc-f-display);
    font-weight: 500;
    color: var(--zc-charcoal);
}

.zc-svc-body__share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 18px;
}
.zc-svc-body__share-lbl {
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-warm-mid);
    margin-right: 4px;
}
.zc-svc-body__share-btn {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    color: var(--zc-warm-dk);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s var(--zc-ease-spring);
}
.zc-svc-body__share-btn:hover {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -4px var(--zc-amber-a45);
}

.zc-svc-body__helpful {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 18px;
    padding: 14px 18px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
}
.zc-svc-body__helpful-q {
    font-family: var(--zc-f-display);
    font-size: 14.5px; line-height: 1.4;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
}
.zc-svc-body__helpful-q b {
    color: var(--zc-amber-dk);
    font-weight: 600;
}
.zc-svc-body__helpful-cta {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    /* `!important` because a global anchor rule (theme typography) overrides
       this and turns the CTA text amber against an amber background. */
    color: var(--zc-white) !important;
    font-family: var(--zc-f-heading);
    font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 18px -4px var(--zc-amber-a45);
    transition: transform 0.3s var(--zc-ease-spring), gap 0.3s var(--zc-ease);
    white-space: nowrap;
}
.zc-svc-body__helpful-cta i { font-size: 12px; transition: transform 0.3s var(--zc-ease); color: var(--zc-white) !important; }
.zc-svc-body__helpful-cta:hover {
    transform: translateY(-2px);
    color: var(--zc-white) !important;
    gap: 10px;
    box-shadow: 0 12px 24px -4px var(--zc-amber-a45);
}
.zc-svc-body__helpful-cta:hover i { transform: translate(2px, -2px); }


/* ==========================================================================
   §2.1   SIDEBAR — helpful links, booking, contact, related
   ========================================================================== */
/* Sidebar rail — pinned by the theme's functions.bundle.js via the
   wrapping .sticky-sidebar-wrap (same pattern used on blog / faq /
   articles). Inside that wrapper the rail itself is just a flex column
   of cards — no position:sticky here. */
.zc-svc-side-wrap {
    align-self: start;
    min-width: 0;
}
.zc-svc-side {
    display: flex; flex-direction: column;
    gap: clamp(14px, 1.4vw, 18px);
    padding-bottom: 4px;  /* breathing room under the last card shadow */
}

.zc-svc-side__card {
    position: relative;
    padding: clamp(16px, 1.7vw, 22px);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.07) 0%, transparent 55%),
        var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 7px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 12px 28px -20px rgba(106, 70, 24, 0.22);
    overflow: hidden;
}
.zc-svc-side__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%);
}
.zc-svc-side__corner {
    position: absolute; width: 14px; height: 14px;
    pointer-events: none;
}
.zc-svc-side__corner--tr { top: 6px; right: 6px;
    border-top: 1px solid var(--zc-amber-a45); border-right: 1px solid var(--zc-amber-a45); }
.zc-svc-side__corner--bl { bottom: 6px; left: 6px;
    border-bottom: 1px solid var(--zc-amber-a45); border-left: 1px solid var(--zc-amber-a45); }

.zc-svc-side__tag {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--zc-amber-dk);
    opacity: 0.85;
    margin-bottom: 8px;
}
.zc-svc-side__title {
    margin: 0 0 7px;
    font-family: var(--zc-f-display);
    font-size: clamp(15px, 0.6vw + 12px, 18px);
    font-weight: 500; line-height: 1.25; letter-spacing: -0.25px;
    color: var(--zc-charcoal);
}
.zc-svc-side__title-accent { color: var(--zc-amber-dk); font-weight: 600; }
.zc-svc-side__sub {
    margin: 0 0 12px;
    font-family: var(--zc-f-body);
    font-size: 12.5px; line-height: 1.5;
    color: var(--zc-warm-dk);
}

/* Booking CTA card — top accent variant */
.zc-svc-side__card--cta {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.16) 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-color: var(--zc-amber-a25);
}

/* Similar services card — image + title + meta_description per row */
.zc-svc-side__card--sim {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.06) 0%, transparent 55%),
        var(--zc-white);
}
.zc-svc-sim {
    list-style: none; margin: 0 0 12px; padding: 0;
    display: flex; flex-direction: column;
    gap: 4px;
}
.zc-svc-sim a {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 11px;
    padding: 8px;
    border-radius: 7px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s var(--zc-ease), background 0.3s var(--zc-ease);
}
.zc-svc-sim a:hover {
    border-color: var(--zc-amber-a25);
    background: linear-gradient(90deg, var(--zc-amber-a08), transparent 80%);
}
.zc-svc-sim__img {
    position: relative;
    width: 52px; height: 52px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--zc-linen);
    background: linear-gradient(135deg, var(--zc-amber-a08), var(--zc-linen));
    flex-shrink: 0;
}
.zc-svc-sim__img img,
.zc-svc-sim__img img.lazy {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block;
}
.zc-svc-sim__img--ph {
    display: grid; place-items: center;
    color: var(--zc-amber-dk);
    font-size: 18px;
    background: linear-gradient(135deg, var(--zc-amber-a25), var(--zc-amber-a08));
    border-color: var(--zc-amber-a25);
}
.zc-svc-sim__body {
    display: flex; flex-direction: column;
    min-width: 0;
    line-height: 1.25;
    gap: 1px;
}
.zc-svc-sim__cat {
    font-family: var(--zc-f-heading);
    font-size: 8.5px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--zc-amber-dk);
    opacity: 0.85;
}
.zc-svc-sim__t {
    font-family: var(--zc-f-display);
    font-size: 13px; font-weight: 500;
    letter-spacing: -0.2px;
    color: var(--zc-charcoal);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: color 0.3s var(--zc-ease);
}
.zc-svc-sim a:hover .zc-svc-sim__t { color: var(--zc-amber-dk); }
.zc-svc-sim__d {
    font-family: var(--zc-f-body);
    font-size: 10.5px;
    color: var(--zc-warm-mid);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.zc-svc-sim__arr {
    color: var(--zc-warm-mid);
    font-size: 11px;
    transition: color 0.3s var(--zc-ease), transform 0.3s var(--zc-ease);
    align-self: center;
}
.zc-svc-sim a:hover .zc-svc-sim__arr {
    color: var(--zc-amber-dk);
    transform: translate(2px, -2px);
}

/* Quick links — compact 3-column tile grid */
.zc-svc-side__card--ql {
    background:
        radial-gradient(ellipse at 0% 100%, rgba(46, 75, 113, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.08) 0%, transparent 55%),
        var(--zc-white);
}
.zc-svc-ql {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.zc-svc-ql__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 8px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.3s var(--zc-ease-spring), border-color 0.3s var(--zc-ease), background 0.3s var(--zc-ease), box-shadow 0.3s var(--zc-ease);
}
.zc-svc-ql__tile i {
    color: var(--zc-amber-dk);
    font-size: 16px;
    transition: transform 0.3s var(--zc-ease-spring);
}
.zc-svc-ql__tile span {
    font-family: var(--zc-f-heading);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--zc-warm-dk);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    transition: color 0.3s var(--zc-ease);
}
.zc-svc-ql__tile:hover {
    transform: translateY(-2px);
    border-color: var(--zc-amber-a35);
    background: linear-gradient(180deg, #fbf7ee 0%, var(--zc-white) 100%);
    box-shadow: 0 12px 24px -16px rgba(207, 138, 63, 0.32);
}
.zc-svc-ql__tile:hover i { transform: scale(1.12); }
.zc-svc-ql__tile:hover span { color: var(--zc-amber-dk); }
.zc-svc-ql__tile--call {
    background: linear-gradient(135deg, var(--zc-amber-a08), var(--zc-amber-a25));
    border-color: var(--zc-amber-a35);
}
.zc-svc-ql__tile--call:hover {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
}
.zc-svc-ql__tile--call:hover i,
.zc-svc-ql__tile--call:hover span { color: var(--zc-white); }
.zc-svc-side__btns {
    display: flex; flex-direction: column; gap: 6px;
}
/* Row variant — primary on the left, ghost on the right, equal width */
.zc-svc-side__btns--row {
    flex-direction: row;
    gap: 8px;
}
.zc-svc-side__btns--row .zc-svc-side__btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.zc-svc-side__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 14px; border-radius: 7px;
    font-family: var(--zc-f-heading); font-size: 10.5px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.3s var(--zc-ease-spring), box-shadow 0.3s var(--zc-ease);
}
.zc-svc-side__btn i { font-size: 12px; }
.zc-svc-side__btn--primary {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white) !important;
    box-shadow: 0 8px 18px -4px var(--zc-amber-a45);
}
.zc-svc-side__btn--primary i { color: var(--zc-white) !important; }
.zc-svc-side__btn--primary:hover { transform: translateY(-2px); color: var(--zc-white) !important; box-shadow: 0 14px 24px -4px var(--zc-amber-a45); }
.zc-svc-side__btn--ghost {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    color: var(--zc-warm-dk);
}
.zc-svc-side__btn--ghost:hover { transform: translateY(-2px); border-color: var(--zc-amber-a35); color: var(--zc-amber-dk); }

/* Quick-reach list (phone / WhatsApp / location) */
.zc-svc-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.zc-svc-side__list a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 7px 8px 5px;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s var(--zc-ease), background 0.3s var(--zc-ease), padding-left 0.3s var(--zc-ease);
}
.zc-svc-side__list a:hover {
    border-color: var(--zc-amber-a25);
    background: linear-gradient(90deg, var(--zc-amber-a08), transparent 70%);
    padding-left: 8px;
}
.zc-svc-side__list .ic {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: 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: 13px;
}
.zc-svc-side__list .ic.ic--wa {
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-color: transparent;
    color: var(--zc-white);
}
.zc-svc-side__list .text {
    display: flex; flex-direction: column;
    line-height: 1.2; min-width: 0;
}
.zc-svc-side__list .text small {
    font-family: var(--zc-f-heading);
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--zc-warm-mid);
    margin-bottom: 1px;
}
.zc-svc-side__list .text b {
    font-family: var(--zc-f-display);
    font-size: 13px; font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-svc-side__list .arr {
    color: var(--zc-warm-mid);
    font-size: 11px;
    transition: color 0.3s var(--zc-ease), transform 0.3s var(--zc-ease);
}
.zc-svc-side__list a:hover .arr { color: var(--zc-amber-dk); transform: translate(2px, -2px); }

/* Hours mini-card */
.zc-svc-side__card--hours { background: linear-gradient(180deg, var(--zc-white) 0%, #fbf7ee 100%); }
.zc-svc-side__hours { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.zc-svc-side__hours-row {
    display: grid; grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--zc-linen);
}
.zc-svc-side__hours-row:last-child { border-bottom: none; }
.zc-svc-side__hours-row .d {
    font-family: var(--zc-f-display);
    font-size: 14px; font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
}
.zc-svc-side__hours-row .t {
    text-align: right;
    font-family: var(--zc-f-body);
    font-size: 12px; color: var(--zc-warm-dk);
    white-space: nowrap;
}
.zc-svc-side__hours-cta,
.zc-svc-side__more {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 999px;
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    font-family: var(--zc-f-heading);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--zc-amber-dk);
    text-decoration: none;
    transition: all 0.3s var(--zc-ease-spring);
    margin-top: 4px;
}
.zc-svc-side__hours-cta i,
.zc-svc-side__more i { font-size: 12px; transition: transform 0.3s var(--zc-ease); }
.zc-svc-side__hours-cta:hover,
.zc-svc-side__more:hover {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: translateY(-1px);
}
.zc-svc-side__hours-cta:hover i,
.zc-svc-side__more:hover i { transform: translateX(3px); }

/* Related-services list */
.zc-svc-side__related { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.zc-svc-side__related li { border-bottom: 1px dashed var(--zc-linen); }
.zc-svc-side__related li:last-child { border-bottom: none; }
.zc-svc-side__related a {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 10px;
    padding: 9px 4px 9px 6px;
    text-decoration: none; color: inherit;
    transition: padding-left 0.3s var(--zc-ease), background 0.3s var(--zc-ease);
}
.zc-svc-side__related a:hover {
    padding-left: 10px;
    background: linear-gradient(90deg, var(--zc-amber-a08), transparent 70%);
}
.zc-svc-side__related .num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px;
    color: var(--zc-amber-dk); opacity: 0.65;
}
.zc-svc-side__related a:hover .num { opacity: 1; }
.zc-svc-side__related .ttl {
    font-family: var(--zc-f-display);
    font-size: 13.5px; font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.3s var(--zc-ease);
}
.zc-svc-side__related a:hover .ttl { color: var(--zc-amber-dk); }
.zc-svc-side__related .arr {
    color: var(--zc-warm-mid); font-size: 11px;
    transition: color 0.3s var(--zc-ease), transform 0.3s var(--zc-ease);
}
.zc-svc-side__related a:hover .arr { color: var(--zc-amber-dk); transform: translateX(3px); }

/* Helpful-links list */
.zc-svc-side__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.zc-svc-side__links a {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 7px 9px; border-radius: 5px;
    font-family: var(--zc-f-body);
    font-size: 12px; font-weight: 500;
    color: var(--zc-warm-dk);
    text-decoration: none;
    transition: background 0.3s var(--zc-ease), color 0.3s var(--zc-ease), padding-left 0.3s var(--zc-ease);
}
.zc-svc-side__links a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zc-svc-side__links a:hover {
    background: var(--zc-amber-a08);
    color: var(--zc-amber-dk);
    padding-left: 12px;
}
.zc-svc-side__links a i { color: var(--zc-amber-dk); font-size: 12px; width: 18px; text-align: center; }


/* "Mon–Sat 9 AM–7 PM" mini-strip inside the Talk-to-us card */
.zc-svc-side__hours-strip {
    display: flex; align-items: center; gap: 7px;
    margin-top: 11px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--zc-amber-a08);
    border: 1px dashed var(--zc-amber-a25);
    font-family: var(--zc-f-body);
    font-size: 11.5px;
    color: var(--zc-warm-dk);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zc-svc-side__hours-strip i { color: var(--zc-amber-dk); font-size: 12px; flex-shrink: 0; }
.zc-svc-side__hours-strip b { font-family: var(--zc-f-display); font-weight: 500; color: var(--zc-charcoal); }


/* ===  Helpful Resources — rich, sectioned card  ========================= */
.zc-svc-side__card--res {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse at 0% 100%, rgba(46, 75, 113, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, #fbf7ee 0%, #f5efe1 100%);
    border-color: var(--zc-amber-a25);
    padding: clamp(16px, 1.8vw, 22px);
}
.zc-svc-res {
    padding: 14px 0;
    border-bottom: 1px dashed var(--zc-amber-a25);
}
.zc-svc-res:last-child { border-bottom: none; padding-bottom: 0; }
.zc-svc-res:first-of-type { padding-top: 8px; }
.zc-svc-res__head {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 7px;
}
.zc-svc-res__num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.3px;
    color: var(--zc-amber-dk);
    opacity: 0.85;
    flex-shrink: 0;
}
.zc-svc-res__h {
    font-family: var(--zc-f-display);
    font-size: 13.5px; font-weight: 500;
    line-height: 1.25; letter-spacing: -0.2px;
    color: var(--zc-charcoal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zc-svc-res__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.zc-svc-res__list li {}
.zc-svc-res__list a {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 6px 7px 6px 0;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
    transition: padding-left 0.3s var(--zc-ease), background 0.3s var(--zc-ease);
}
.zc-svc-res__list a:hover {
    padding-left: 7px;
    background: linear-gradient(90deg, var(--zc-amber-a08), transparent 70%);
}
.zc-svc-res__list a i {
    color: var(--zc-amber-dk);
    font-size: 12px;
    width: 16px;
    text-align: center;
}
.zc-svc-res__list a span {
    font-family: var(--zc-f-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--zc-warm-dk);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s var(--zc-ease);
}
.zc-svc-res__list a:hover span { color: var(--zc-amber-dk); }
/* Variant — list with icons (uses bi i.icon column, no chevron) */
.zc-svc-res__list--icons a i { color: var(--zc-amber-dk); }

.zc-svc-res__more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    font-family: var(--zc-f-heading);
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--zc-amber-dk);
    text-decoration: none;
    transition: all 0.3s var(--zc-ease-spring);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zc-svc-res__more i { font-size: 10.5px; transition: transform 0.3s var(--zc-ease); flex-shrink: 0; }
.zc-svc-res__more:hover {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: translateY(-1px);
}
.zc-svc-res__more:hover i { transform: translate(2px, -2px); }

/* Section header — adds glyph + count pill alongside the ·NN· number and label */
.zc-svc-res__head-ic {
    color: var(--zc-amber-dk);
    font-size: 13px;
    flex-shrink: 0;
}
.zc-svc-res__count {
    margin-left: auto;
    flex-shrink: 0;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--zc-amber-dk);
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    padding: 1px 7px;
    border-radius: 999px;
    line-height: 1.45;
}

/* Rich list — title + one-line meta_description (used by the link_building
   Helpful Resources block). Replaces the icon+label list when items have
   editorial copy from the database. */
.zc-svc-res__rich {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 2px;
}
.zc-svc-res__rich a {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 14px;
    align-items: start;
    gap: 10px;
    padding: 9px 8px 9px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background 0.3s var(--zc-ease), border-color 0.3s var(--zc-ease), padding-left 0.3s var(--zc-ease);
}
.zc-svc-res__rich a:hover {
    background: linear-gradient(90deg, var(--zc-amber-a08), transparent 80%);
    border-color: var(--zc-amber-a25);
    padding-left: 9px;
}
.zc-svc-res__rich-mark {
    margin-top: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
    box-shadow: 0 0 0 2px rgba(232, 170, 98, 0.18);
    transition: transform 0.3s var(--zc-ease-spring);
}
.zc-svc-res__rich a:hover .zc-svc-res__rich-mark { transform: scale(1.25); }
.zc-svc-res__rich-body {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
}
.zc-svc-res__rich-t {
    font-family: var(--zc-f-display);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.15px;
    color: var(--zc-charcoal);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.3s var(--zc-ease);
}
.zc-svc-res__rich a:hover .zc-svc-res__rich-t { color: var(--zc-amber-dk); }
.zc-svc-res__rich-d {
    font-family: var(--zc-f-body);
    font-size: 10.5px;
    color: var(--zc-warm-mid);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.zc-svc-res__rich-arr {
    margin-top: 4px;
    color: var(--zc-warm-mid);
    font-size: 11px;
    transition: color 0.3s var(--zc-ease), transform 0.3s var(--zc-ease);
}
.zc-svc-res__rich a:hover .zc-svc-res__rich-arr {
    color: var(--zc-amber-dk);
    transform: translate(2px, -2px);
}


/* ==========================================================================
   §3   FAQ — premium <details>/<summary> accordion inside .zc-svc-prose
   ========================================================================== */
.zc-svc-faq {
    margin-top: clamp(24px, 3vw, 40px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px dashed var(--zc-linen);
}
.zc-svc-faq__head { margin-bottom: clamp(14px, 1.6vw, 22px); }
.zc-svc-faq__overline {
    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-svc-faq__title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(20px, 1.4vw + 12px, 28px);
    font-weight: 400; line-height: 1.2; letter-spacing: -0.4px;
    color: var(--zc-charcoal);
}
.zc-svc-faq__title-accent { color: var(--zc-amber-dk); font-weight: 500; }

.zc-svc-faq__list { display: flex; flex-direction: column; gap: 10px; }
.zc-svc-faq__item {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.35s var(--zc-ease), box-shadow 0.35s var(--zc-ease);
}
.zc-svc-faq__item[open] {
    border-color: var(--zc-amber-a35);
    box-shadow: 0 14px 28px -16px rgba(207, 138, 63, 0.30);
}
.zc-svc-faq__q {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    transition: background 0.3s var(--zc-ease);
}
.zc-svc-faq__q::-webkit-details-marker { display: none; }
.zc-svc-faq__q:hover { background: var(--zc-amber-a08); }
.zc-svc-faq__q-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
    color: var(--zc-amber-dk);
    opacity: 0.7;
}
.zc-svc-faq__item[open] .zc-svc-faq__q-num { opacity: 1; }
.zc-svc-faq__q-text {
    font-family: var(--zc-f-display);
    font-size: 15px; font-weight: 500;
    line-height: 1.3; letter-spacing: -0.2px;
    color: var(--zc-charcoal);
}
.zc-svc-faq__item[open] .zc-svc-faq__q-text { color: var(--zc-amber-dk); }
.zc-svc-faq__q-toggle {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    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), transform 0.3s var(--zc-ease);
}
.zc-svc-faq__q-ic-close { display: none; }
.zc-svc-faq__item[open] .zc-svc-faq__q-toggle {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
}
.zc-svc-faq__item[open] .zc-svc-faq__q-ic-open { display: none; }
.zc-svc-faq__item[open] .zc-svc-faq__q-ic-close { display: inline-block; }

.zc-svc-faq__a {
    padding: 0 16px 14px 56px;
    font-family: var(--zc-f-body);
    font-size: 14px; line-height: 1.65;
    color: var(--zc-warm-dk);
    border-top: 1px dashed var(--zc-amber-a25);
    padding-top: 12px;
    margin-top: 0;
}
.zc-svc-faq__a p { margin: 0 0 8px; }
.zc-svc-faq__a p:last-child { margin-bottom: 0; }
.zc-svc-faq__a a { color: var(--zc-amber-dk); text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   §4   CLOSING CTA, dark navy band with amber accent
   ========================================================================== */
.zc-svc-cta {
    position: relative;
    padding: clamp(48px, 5vw, 88px) 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-svc-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-svc-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-svc-cta__inner {
    position: relative; z-index: 1;
    text-align: center;
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}
.zc-svc-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-svc-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-svc-pulse 1.8s ease-in-out infinite;
}
@keyframes zc-svc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.3); }
}
.zc-svc-cta__title {
    margin: 0 auto 12px; max-width: 30ch;
    font-family: var(--zc-f-display);
    font-size: clamp(26px, 2.4vw + 12px, 44px);
    font-weight: 300; line-height: 1.1; letter-spacing: -1.2px;
    color: var(--zc-white);
}
.zc-svc-cta__title-accent {
    display: inline-block; font-weight: 500; color: var(--zc-amber-lt);
}
.zc-svc-cta__sub {
    margin: 0 auto 24px; max-width: 56ch;
    font-family: var(--zc-f-body);
    font-size: 14.5px; line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.zc-svc-cta__btns {
    display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.zc-svc-cta__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px; border-radius: 4px;
    font-family: var(--zc-f-heading); font-size: 11.5px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s var(--zc-ease-spring);
}
.zc-svc-cta__btn i { font-size: 13px; }
.zc-svc-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-svc-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px var(--zc-amber-a45);
    color: var(--zc-white);
}
.zc-svc-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-svc-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);
}


/* ==========================================================================
   §5   MOBILE / TABLET responsive
   ========================================================================== */
@media (max-width: 991px) {
    .zc-svc-hero__inner,
    .zc-svc-hero__topline,
    .zc-svc-cta__inner {
        padding-left: var(--zc-pad-x-mb);
        padding-right: var(--zc-pad-x-mb);
    }
    .zc-svc-body__inner {
        padding-left: var(--zc-pad-x-mb);
        padding-right: var(--zc-pad-x-mb);
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .zc-svc-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ==========================================================================
   MOBILE — service hero compact: smaller fonts, shorter plate, image
   gets more breathing room, overlay copy trimmed.
   ========================================================================== */
@media (max-width: 768px) {
    /* Section padding cut so the hero doesn't dominate the viewport. */
    .zc-svc-hero { padding: 14px 0 24px; }

    /* Crumb sized down — long category names + service titles were
       wrapping to 2 lines and pushing the plate down. */
    .zc-svc-hero__crumb { font-size: 10px; gap: 6px; margin-bottom: 14px; }
    .zc-svc-hero__crumb-link,
    .zc-svc-hero__crumb-current { padding: 4px 8px; }
    .zc-svc-hero__crumb-current { max-width: 100%; }

    /* Plate shorter on mobile so the photograph reads as a photo,
       not a billboard. Overlay copy gets less vertical room so the
       image is visible above the dark-gradient text bed. */
    .zc-svc-hero__plate {
        height: clamp(240px, 45vh, 330px);
        border-radius: 10px;
    }
    .zc-svc-hero__plate-corner { width: 22px; height: 22px; }
    .zc-svc-hero__plate-corner--tl,
    .zc-svc-hero__plate-corner--tr,
    .zc-svc-hero__plate-corner--bl,
    .zc-svc-hero__plate-corner--br { inset: auto; }
    .zc-svc-hero__plate-corner--tl { top: 10px;    left: 10px; }
    .zc-svc-hero__plate-corner--tr { top: 10px;    right: 10px; }
    .zc-svc-hero__plate-corner--bl { bottom: 10px; left: 10px; }
    .zc-svc-hero__plate-corner--br { bottom: 10px; right: 10px; }
    .zc-svc-hero__plate-cat {
        top: 12px; left: 12px;
        padding: 5px 10px;
        font-size: 9px;
        letter-spacing: 1.2px;
        gap: 6px;
    }
    .zc-svc-hero__plate-cat i { font-size: 10px; }

    /* Editorial copy inside the plate — tightened typography. */
    .zc-svc-hero__plate-content {
        left: 14px; right: 14px; bottom: 14px;
    }
    .zc-svc-hero__plate-content .zc-svc-hero__eyebrow {
        font-size: 9px;
        letter-spacing: 1.8px;
        margin-bottom: 6px;
        gap: 6px;
    }
    .zc-svc-hero__plate-content .zc-svc-hero__title {
        font-size: clamp(20px, 5.6vw, 26px);
        letter-spacing: -0.5px;
        line-height: 1.15;
        margin: 0 0 8px;
    }
    .zc-svc-hero__plate-content .zc-svc-hero__lead {
        font-size: 12px;
        line-height: 1.5;
        margin: 0 0 10px;
        -webkit-line-clamp: 2;       /* tighter clamp than the 720px rule */
    }
    .zc-svc-hero__plate-content .zc-svc-hero__meta {
        gap: 6px;
    }
    .zc-svc-hero__plate-content .zc-svc-hero__pill {
        padding: 4px 9px;
        font-size: 9.5px;
        letter-spacing: 0.4px;
        gap: 5px;
    }
    .zc-svc-hero__plate-content .zc-svc-hero__pill i { font-size: 10px; }
    .zc-svc-hero__plate-content .zc-svc-hero__pill b { font-weight: 600; }

    /* Soften the dark gradient bed so MORE of the photograph is
       visible (was crushing the bottom 70% to dark navy/black). */
    .zc-svc-hero__plate-mask {
        background: linear-gradient(180deg,
            rgba(18, 12, 4, 0.05) 0%,
            transparent 35%,
            rgba(18, 12, 4, 0.45) 70%,
            rgba(18, 12, 4, 0.78) 100%);
    }
}

@media (max-width: 600px) {
    .zc-svc-hero__topline-text     { display: none; }
    .zc-svc-hero__pill--hide-mb    { display: none; }
    /* Keep "Book a free visit" + "Or chat first" side-by-side on phone. */
    .zc-svc-cta__btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .zc-svc-cta__btn {
        justify-content: center;
        padding: 10px 8px;
        font-size: 9.5px;
        letter-spacing: 0.6px;
        gap: 5px;
        min-width: 0;
    }
    .zc-svc-cta__btn i { font-size: 11px; }
    .zc-svc-faq__a                 { padding-left: 16px; }
    /* Restructure the masthead row on mobile via grid placement:
       row 1 = Article tag (left) + date (right), row 2 = category
       and sub-category. Pure CSS — no HTML changes. */
    .zc-svc-body__mast-row {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 8px 10px;
    }
    .zc-svc-body__mast-tag  { grid-row: 1; grid-column: 1; justify-self: start; }
    .zc-svc-body__mast-date {
        grid-row: 1; grid-column: 2;
        justify-self: end;
        margin-left: 0;
    }
    .zc-svc-body__mast-cat  {
        grid-row: 2; grid-column: 1 / -1;
        justify-self: start;
    }
    .zc-svc-body__mast-author      { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
    .zc-svc-body__mast-author-rt   { display: none; }
    /* On mobile the decorative vertical bar is hidden, so the prose
       no longer needs padding-left to clear it. Zero out the inset
       so the article copy aligns flush with the section padding. */
    .zc-svc-body__main .zc-svc-prose::before { display: none; }
    .zc-svc-body__main .zc-svc-prose { padding-left: 0 !important; }
    .zc-svc-body__main .zc-svc-prose > p:first-of-type::first-letter { font-size: 2.8em; }
    .zc-svc-body__footer-meta      { margin-left: 0; }
    .zc-svc-body__helpful          { flex-direction: column; align-items: flex-start; }
    .zc-svc-body__helpful-cta      { width: 100%; justify-content: center; }

    /* §3 FAQ — compact for mobile readability. */
    .zc-svc-faq                    { margin-top: 22px; padding-top: 20px; }
    .zc-svc-faq__head              { margin-bottom: 12px; }
    .zc-svc-faq__overline          { font-size: 9px; letter-spacing: 1.2px; margin-bottom: 4px; }
    .zc-svc-faq__title             { font-size: clamp(18px, 5vw, 22px); letter-spacing: -0.3px; }
    .zc-svc-faq__list              { gap: 8px; }
    .zc-svc-faq__q                 { padding: 11px 12px; gap: 9px; }
    .zc-svc-faq__q-num             { font-size: 9px; letter-spacing: 1px; }
    .zc-svc-faq__q-text            { font-size: 13px; line-height: 1.3; letter-spacing: -0.1px; }
    .zc-svc-faq__q-toggle          { width: 22px; height: 22px; font-size: 9px; }
    .zc-svc-faq__a                 {
        padding: 10px 12px 12px 12px !important;
        font-size: 12px;
        line-height: 1.55;
    }
}


/* ==========================================================================
   VERIFIED-BY CARD — sticky-sidebar trust badge with the reviewing doctor.
   Mirrors the magazine grammar used elsewhere on the service page:
   gold-foil hairline, corner brackets-free, amber halo on the photo,
   subtle uplift on hover. Whole card is the anchor to /dr-{slug}.
   ========================================================================== */
.zc-svc-side__card--verify {
    display: block;
    position: relative;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}
.zc-svc-side__card--verify:hover {
    transform: translateY(-2px);
    border-color: var(--zc-amber-a35);
    box-shadow: 0 22px 38px -22px rgba(207, 138, 63, 0.40),
                0 10px 20px -16px rgba(46, 75, 113, 0.16);
}

.zc-svc-verify__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.zc-svc-verify__check {
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    font-size: 15px;
    box-shadow: 0 8px 16px -6px rgba(207, 138, 63, 0.55);
    flex-shrink: 0;
}
.zc-svc-verify__tag {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}

.zc-svc-verify__body {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
}
.zc-svc-verify__photo {
    position: relative;
    width: 80px; height: 80px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber));
    color: var(--zc-white);
    box-shadow: 0 14px 26px -14px rgba(207, 138, 63, 0.55),
                inset 0 0 0 3px var(--zc-white);
}
.zc-svc-verify__init {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--zc-f-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--zc-white);
    letter-spacing: -0.6px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    z-index: 0;
}
.zc-svc-verify__img {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    z-index: 1;
}

.zc-svc-verify__meta {
    display: flex; flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.zc-svc-verify__name {
    font-family: var(--zc-f-display);
    font-size: clamp(15px, 0.3vw + 13px, 17.5px);
    font-weight: 600;
    color: var(--zc-charcoal);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.zc-svc-side__card--verify:hover .zc-svc-verify__name { color: var(--zc-amber-dk); }
.zc-svc-verify__role {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 9px;
    margin-top: 2px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 999px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-svc-verify__spec {
    font-family: var(--zc-f-body);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--zc-warm-mid);
    margin-top: 3px;
}

.zc-svc-verify__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--zc-amber-a25);
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    transition: gap 0.25s ease;
}
.zc-svc-verify__foot i { font-size: 13px; transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1); }
.zc-svc-side__card--verify:hover .zc-svc-verify__foot { gap: 14px; }
.zc-svc-side__card--verify:hover .zc-svc-verify__foot i { transform: translateX(2px) translateY(-2px); }

@media (max-width: 480px) {
    .zc-svc-verify__body { grid-template-columns: 1fr; row-gap: 12px; justify-items: start; }
}

/* ==========================================================================
   MOBILE BYLINE ROW — "Written by" + "Medically reviewed by" side-by-side
   --------------------------------------------------------------------------
   On mobile (≤991px) the inline JS wraps the existing .mast-author block
   and the .verify card into a .zc-svc-body__mast-byline grid. Verify card
   is visually reshaped to mirror the compact image-left / text-right
   byline grammar so both cells read as parallel author bylines.
   ========================================================================== */
.zc-svc-body__mast-byline {
    display: flex;
    gap: 10px;
    align-items: stretch;
    justify-content: space-between;
    margin: 0 0 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--zc-linen);
}
.zc-svc-body__mast-byline > * { min-width: 0; }
/* Tighten the author block inside the new wrapper so it matches the
   compact verify cell next to it. */
.zc-svc-body__mast-byline .zc-svc-body__mast-author {
    border-top: 0;
    padding-top: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
}
.zc-svc-body__mast-byline .zc-svc-body__mast-author-init {
    width: 32px;
    height: 32px;
    font-size: 12px;
}
.zc-svc-body__mast-byline .zc-svc-body__mast-author-text { line-height: 1.2; }
.zc-svc-body__mast-byline .zc-svc-body__mast-author-text small {
    font-size: 8px;
    letter-spacing: 1px;
    margin-bottom: 1px;
}
.zc-svc-body__mast-byline .zc-svc-body__mast-author-text b {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

/* Verify card → compact author-style row: 32px photo on the left,
   label + name + specialty on the right. All the card chrome (full
   header tag, decorative photo, "Read profile" footer, foil hairline,
   role line) is hidden so it matches the .mast-author grammar. */
.zc-svc-side__card--verify-inline {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    overflow: visible !important;
}
.zc-svc-side__card--verify-inline .zc-svc-side__foil,
.zc-svc-side__card--verify-inline .zc-svc-side__corner,
.zc-svc-side__card--verify-inline .zc-svc-verify__head,
.zc-svc-side__card--verify-inline .zc-svc-verify__foot,
.zc-svc-side__card--verify-inline .zc-svc-verify__role { display: none !important; }

/* Flatten the inner .verify__body so its children become direct
   grid items of the inline card. */
.zc-svc-side__card--verify-inline .zc-svc-verify__body {
    display: contents !important;
}
.zc-svc-side__card--verify-inline .zc-svc-verify__photo {
    position: relative;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--zc-amber-a45) !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-deep)) !important;
}
.zc-svc-side__card--verify-inline .zc-svc-verify__init {
    position: absolute !important;
    inset: 0 !important;
    display: grid; place-items: center;
    color: var(--zc-amber-lt);
    font-family: var(--zc-f-display);
    font-size: 12px; font-weight: 500;
    z-index: 0;
}
.zc-svc-side__card--verify-inline .zc-svc-verify__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    z-index: 1;
}
.zc-svc-side__card--verify-inline .zc-svc-verify__meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0;
    line-height: 1.2;
}
/* Inject the "Medically reviewed by" label inline (replaces the
   header tag we hid above). */
.zc-svc-side__card--verify-inline .zc-svc-verify__meta::before {
    content: 'Medically reviewed by';
    font-family: var(--zc-f-heading);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    margin-bottom: 1px;
}
.zc-svc-side__card--verify-inline .zc-svc-verify__name {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--zc-charcoal) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zc-svc-side__card--verify-inline .zc-svc-verify__spec {
    font-size: 9px !important;
    color: var(--zc-warm-mid) !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}