/* ==========================================================================
   Zivah Fertility & Women's Wellness Centre — Core Stylesheet
   --------------------------------------------------------------------------
   Premium "Liquid Glass" header system (v7) — fonts mapped to the project's
   existing Google Fonts URL (Cormorant Garamond + Outfit).

   Architecture:
     §1  Tokens (root vars)
     §2  Reset & fluid container
     §3  Topbar (slim navy strip)
     §4  Header shell (sticky liquid-glass)
     §5  Brand
     §6  Right cluster (nav + book CTA)
     §7  Premium nav (glass pill hover)
     §8  Book CTA + dropdown panel
     §9  Mega menu base
    §10  Services mega
    §11  Knowledge mega
    §12  Simple dropdown
    §13  Hamburger + backdrop
    §14  Responsive (mobile drawer + bottom-sheet)
   ========================================================================== */


/* §1  ROOT TOKENS ------------------------------------------------------- */
:root {
  /* Brand */
  --zc-navy:       #2e4b71;
  --zc-navy-deep:  #1e3353;
  --zc-navy-edge:  #243d5e;
  --zc-navy-soft:  #3a5a85;

  --zc-amber:      #cf8a3f;
  --zc-amber-lt:   #e8aa62;
  --zc-amber-dk:   #a86828;
  --zc-amber-soft: #f5d3a3;

  --zc-white:      #ffffff;
  --zc-pearl:      #fdfcfa;
  --zc-off-white:  #f8f6f2;
  --zc-snow:       #f5f3ef;
  --zc-linen:      #ede8de;
  --zc-stone:      #d6cfc2;

  --zc-warm-mid:   #9a8e7e;
  --zc-warm-dk:    #6b6055;
  --zc-deep:       #1a1208;
  --zc-charcoal:   #2a2520;

  /* Status / utility */
  --zc-red:        #c14b51;       /* brand error / danger */
  --zc-success:    #1a9e5c;       /* status badges */
  --zc-warning:    #d97706;       /* caution states */

  /* Alpha scales */
  --zc-amber-a08: rgba(207,138,63,0.08);
  --zc-amber-a12: rgba(207,138,63,0.12);
  --zc-amber-a18: rgba(207,138,63,0.18);
  --zc-amber-a25: rgba(207,138,63,0.25);
  --zc-amber-a35: rgba(207,138,63,0.35);
  --zc-amber-a45: rgba(207,138,63,0.45);

  --zc-navy-a08: rgba(46,75,113,0.08);
  --zc-navy-a15: rgba(46,75,113,0.15);
  --zc-navy-a30: rgba(46,75,113,0.30);

  --zc-w08: rgba(255,255,255,0.08);
  --zc-w12: rgba(255,255,255,0.12);
  --zc-w22: rgba(255,255,255,0.22);
  --zc-w36: rgba(255,255,255,0.36);
  --zc-w52: rgba(255,255,255,0.52);
  --zc-w75: rgba(255,255,255,0.75);
  --zc-w94: rgba(255,255,255,0.94);

  --zc-d08: rgba(26,18,8,0.08);
  --zc-d15: rgba(26,18,8,0.15);
  --zc-d30: rgba(26,18,8,0.30);
  --zc-d55: rgba(26,18,8,0.55);
  --zc-d80: rgba(26,18,8,0.80);

  /* Type — Outfit (display), Figtree (UI / body), Jost (small accents).
     Helvetica Neue / Helvetica / Arial keep the page legible if Google
     Fonts is blocked or slow. No serif token — the design is fully
     sans-serif now. The legacy --zc-f-serif alias points back at the
     display stack so any older selector still resolves. */
  --zc-f-display:  'Outfit',  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --zc-f-heading:  'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --zc-f-body:     'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --zc-f-accent:   'Jost',    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --zc-f-serif:    'Outfit',  'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Easings */
  --zc-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --zc-ease-out:    cubic-bezier(0.16, 1.00, 0.30, 1.00);
  --zc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout heights */
  --zc-tb-h:    40px;
  --zc-nav-h:   84px;
  --zc-mob-h:   64px;

  /* Container padding */
  --zc-pad-x:    28px;
  --zc-pad-x-mb: 14px;

  /* Radii */
  --zc-r-xs:   4px;
  --zc-r-sm:   8px;
  --zc-r-md:  14px;
  --zc-r-lg:  22px;
  --zc-r-pill: 999px;

  /* Glass tokens */
  --zc-glass-bg:     rgba(253, 252, 250, 0.55);
  --zc-glass-bg-sc:  rgba(253, 252, 250, 0.78);
  --zc-glass-blur:   blur(28px) saturate(200%);
  --zc-glass-border: rgba(255, 255, 255, 0.55);
  --zc-glass-edge:   rgba(207, 138, 63, 0.18);
}


/* §2  RESET & FLUID CONTAINER ------------------------------------------- */
.zc-hdr *, .zc-hdr *::before, .zc-hdr *::after,
.zc-tb  *, .zc-tb  *::before, .zc-tb  *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.zc-hdr a,
.zc-tb  a       { text-decoration: none; color: inherit; }
.zc-hdr img,
.zc-tb  img     { max-width: 100%; display: block; }
.zc-hdr button,
.zc-tb  button  { cursor: pointer; font-family: var(--zc-f-body); border: none; background: none; padding: 0; font: inherit; }
.zc-hdr ul, .zc-hdr ol,
.zc-tb  ul, .zc-tb  ol { list-style: none; }
.zc-hdr em, .zc-hdr i, .zc-hdr cite,
.zc-tb  em, .zc-tb  i, .zc-tb  cite { font-style: normal !important; }

/* Google Translate — hide every default UI surface (banner, gadget, balloon,
   tooltip) so only our pill switcher is visible. The host element is also
   parked off-screen so even a flash of the iframe is invisible. */
#google_translate_element {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.skiptranslate,
.goog-te-gadget,
.goog-te-gadget-icon,
.goog-te-gadget img,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight { display: none !important; }
body { top: 0 !important; }
font[style*="background-color"],
.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Fluid 100% container */
.zc-container {
  width: 100%;
  margin: 0 auto;
  padding-left:  var(--zc-pad-x);
  padding-right: var(--zc-pad-x);
}
@media (max-width: 991px) {
  .zc-container {
    padding-left:  var(--zc-pad-x-mb);
    padding-right: var(--zc-pad-x-mb);
  }
}


/* §3  TOPBAR ------------------------------------------------------------ */
.zc-tb {
  position: relative;
  z-index: 1000;
  width: 100%;
  height: var(--zc-tb-h);
  background: linear-gradient(90deg,
    var(--zc-navy-deep) 0%,
    var(--zc-navy)      58%,
    var(--zc-navy-edge) 100%);
  overflow: visible;
  font-family: var(--zc-f-body);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--zc-w52);
  -webkit-font-smoothing: antialiased;
}
.zc-tb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--zc-amber-a25) 12%,
    var(--zc-amber)     50%,
    var(--zc-amber-a25) 88%,
    transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
.zc-tb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.zc-tb__left { display: flex; align-items: center; flex-shrink: 0; }
.zc-tb__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--zc-tb-h);
  padding: 0 14px;
  color: var(--zc-w52);
  text-decoration: none;
  font-family: var(--zc-f-body);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.3px;
  white-space: nowrap;
  position: relative;
  transition: color 0.22s ease;
}
.zc-tb__item + .zc-tb__item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 13px;
  background: var(--zc-w22);
}
.zc-tb__ic    { font-size: 9.5px; color: var(--zc-amber); flex-shrink: 0; transition: transform 0.28s ease; }
.zc-tb__val   { color: var(--zc-w94); font-weight: 500; }
.zc-tb__item[href]:hover                 { color: var(--zc-w94); }
.zc-tb__item[href]:hover .zc-tb__ic      { transform: scale(1.18); }
.zc-tb__item[href]:hover .zc-tb__val     { color: var(--zc-amber-lt); }
.zc-tb__item--static                     { cursor: default; pointer-events: none; }

.zc-tb__spacer { flex: 1; min-width: 16px; }
.zc-tb__right { display: flex; align-items: center; flex-shrink: 0; }
.zc-tb__r-sep { width: 1px; height: 13px; background: var(--zc-w22); margin: 0 8px; flex-shrink: 0; }

/* Language switcher */
.zc-lang { position: relative; display: flex; align-items: center; }
.zc-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--zc-tb-h);
  padding: 0 12px 0 11px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: var(--zc-f-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--zc-w94);
  white-space: nowrap;
  transition: color 0.22s ease;
}
.zc-lang__btn:hover { color: var(--zc-amber-lt); }
.zc-lang__flag-img {
  width: 18px; height: 13px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
  display: block;
}
.zc-lang__code { font-weight: 700; color: var(--zc-w94); font-size: 11px; letter-spacing: 0.7px; text-transform: uppercase; }
.zc-lang__caret { font-size: 6.5px; color: var(--zc-w22); margin-left: 2px; flex-shrink: 0; transition: transform 0.24s ease, color 0.22s ease; }
.zc-lang.is-open .zc-lang__caret { transform: rotate(180deg); color: var(--zc-amber-a45); }

.zc-lang__panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 200px;
  background: var(--zc-pearl);
  border: 1px solid var(--zc-amber-a25);
  border-radius: 12px;
  box-shadow:
    0 16px 48px rgba(18, 12, 4, 0.20),
    0  4px 12px rgba(18, 12, 4, 0.10),
    inset 0 1px 0 var(--zc-white);
  padding: 6px;
  z-index: 2000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}
.zc-lang__panel::before {
  content: '';
  position: absolute;
  top: -5px; right: 18px;
  width: 9px; height: 9px;
  background: var(--zc-pearl);
  border-left: 1px solid var(--zc-amber-a25);
  border-top:  1px solid var(--zc-amber-a25);
  transform: rotate(45deg);
}
.zc-lang.is-open .zc-lang__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

.zc-lang__opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--zc-f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--zc-warm-dk);
  border-radius: 7px;
  transition: background 0.16s ease, color 0.16s ease;
  position: relative;
}
.zc-lang__opt + .zc-lang__opt { margin-top: 1px; }
.zc-lang__opt:hover { background: var(--zc-amber-a08); color: var(--zc-navy-deep); }
.zc-lang__opt.is-active { color: var(--zc-amber-dk); font-weight: 600; background: var(--zc-amber-a12); }
.zc-lang__opt.is-active::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--zc-amber);
  box-shadow: 0 0 8px var(--zc-amber-a45);
}
.zc-lang__opt .zc-lang__flag-img { width: 22px; height: 16px; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.06); }
.zc-lang__name { font-size: 13px; font-weight: 500; color: inherit; line-height: 1.3; flex: 1; }

.zc-tb__socials { display: flex; align-items: center; gap: 1px; }
.zc-tb__soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--zc-w36);
  font-size: 11px;
  flex-shrink: 0;
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.zc-tb__soc:hover { color: var(--zc-amber-lt); background: var(--zc-amber-a12); transform: translateY(-1px); }

/* Topbar shimmer.
   IMPORTANT: animate the BACKGROUND-POSITION rather than transforming
   the pseudo-element. The old `transform: translateX(±100%)` pushed the
   full-width pseudo to the right of the topbar at peak animation, and
   because `.zc-tb` must stay `overflow: visible` for the language
   dropdown to escape downward, that pseudo extended the document and
   forced a brief horizontal scrollbar every 5s. Background-position
   only moves the gradient INSIDE the pseudo's existing box — no escape,
   no overflow, same visual sweep. */
@keyframes ztb-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
.zc-tb--shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--zc-amber-a08) 50%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: ztb-sweep 5s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .zc-tb__item--hours { display: none; }
}
@media (max-width: 767px) {
  .zc-tb__item--email { display: none; }
}


/* §4  HEADER SHELL ------------------------------------------------------ */
.zc-hdr {
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
  height: var(--zc-nav-h);
  background: var(--zc-glass-bg);
  backdrop-filter: var(--zc-glass-blur);
  -webkit-backdrop-filter: var(--zc-glass-blur);
  border-bottom: 1px solid rgba(207, 138, 63, 0.10);
  font-family: var(--zc-f-body);
  isolation: isolate;
  transition:
    background 0.5s var(--zc-ease),
    border-color 0.4s ease,
    box-shadow 0.5s var(--zc-ease);
}

/* Aurora mesh-gradient behind glass */
.zc-hdr::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(at 8% 30%,  rgba(207, 138, 63, 0.14) 0%, transparent 42%),
    radial-gradient(at 92% 70%, rgba(207, 138, 63, 0.10) 0%, transparent 48%),
    radial-gradient(at 50% 0%,  rgba(245, 211, 163, 0.10) 0%, transparent 55%),
    radial-gradient(at 50% 120%,rgba(46, 75, 113, 0.08)   0%, transparent 60%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
  animation: zc-aurora-drift 18s ease-in-out infinite;
}
@keyframes zc-aurora-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 0%, 50% 100%; }
  50%      { background-position: 4% 2%, 96% 98%, 52% 2%, 48% 98%; }
}

/* Top hairline highlight */
.zc-hdr::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 18%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.5) 82%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.zc-hdr.is-scrolled {
  background: var(--zc-glass-bg-sc);
  border-bottom-color: rgba(207, 138, 63, 0.18);
  box-shadow:
    0  1px 0 rgba(207, 138, 63, 0.12),
    0 20px 50px rgba(46, 75, 113, 0.10),
    0  4px 14px rgba(46, 75, 113, 0.05);
}
.zc-hdr.is-scrolled::before { opacity: 0.55; }

.zc-hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
  position: relative;
  z-index: 2;
}


/* §5  BRAND ------------------------------------------------------------- */
.zc-hdr__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
  height: 100%;
}
.zc-hdr__logo {
  height: 52px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: transform 0.5s var(--zc-ease-spring), opacity 0.3s ease;
}
.zc-hdr__brand:hover .zc-hdr__logo { transform: scale(1.04); }


/* §6  RIGHT CLUSTER ----------------------------------------------------- */
.zc-hdr__right {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  gap: 8px;
  min-width: 0;
}


/* §7  PREMIUM NAV ------------------------------------------------------- */
.zc-hdr__nav {
  display: flex;
  align-items: center;
  list-style: none;
  height: 100%;
  gap: 2px;
}
.zc-hdr__nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.zc-hdr__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  font-family: var(--zc-f-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--zc-charcoal);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  border-radius: 12px;
  transition:
    color 0.3s ease,
    background 0.32s var(--zc-ease);
}
.zc-hdr__nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 248, 235, 0.88),
    rgba(245, 230, 200, 0.70));
  border: 1px solid rgba(207, 138, 63, 0.18);
  border-radius: 12px;
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.32s var(--zc-ease),
    transform 0.4s var(--zc-ease-spring);
  z-index: -1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 12px rgba(207, 138, 63, 0.10),
    0 1px 3px rgba(46, 75, 113, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.zc-hdr__nav-link::after { display: none; }
.zc-hdr__nav-link:hover,
.zc-hdr__nav-item:hover > .zc-hdr__nav-link { color: var(--zc-amber-dk); }
.zc-hdr__nav-link:hover::before,
.zc-hdr__nav-item:hover > .zc-hdr__nav-link::before {
  opacity: 1;
  transform: scale(1);
}
.zc-hdr__nav-link.is-active {
  color: var(--zc-charcoal);
  font-weight: 600;
}
.zc-hdr__nav-link.is-active:hover { color: var(--zc-charcoal); }
.zc-hdr__nav-link.is-active::before,
.zc-hdr__nav-link.is-active::after { display: none !important; }

.zc-hdr__nav-caret {
  font-size: 8px;
  color: var(--zc-warm-mid);
  opacity: 0.6;
  transition: transform 0.4s var(--zc-ease), opacity 0.32s, color 0.32s;
}
.zc-hdr__nav-item:hover .zc-hdr__nav-caret {
  transform: rotate(180deg);
  color: var(--zc-amber);
  opacity: 1;
}

/* Hover bridge */
.zc-hdr__nav-item::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 16px;
  pointer-events: none;
  z-index: 799;
}
.zc-hdr__nav-item:hover::before { pointer-events: auto; }


/* §8  BOOK CTA + PANEL -------------------------------------------------- */
.zc-hdr__book {
  position: relative;
  flex-shrink: 0;
  margin-left: 12px;
}
.zc-hdr__book::before {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 16px;
  pointer-events: none;
}
.zc-hdr__book:hover::before { pointer-events: auto; }

.zc-hdr__book-btn {
  /* The header trigger is now a <button>; the global reset in
     style.css line 505 sets `-webkit-appearance: button` which
     would otherwise force the OS-native (white/grey) button look
     and hide our gradient. Strip it. !important across the visual
     properties because Bootstrap and the legacy theme reset both
     ship `<button>` rules (color/background/border) that beat us
     on specificity in some browsers. */
  -webkit-appearance: none !important;
          appearance: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  background:
    linear-gradient(135deg,
      var(--zc-charcoal) 0%,
      var(--zc-deep)     50%,
      var(--zc-charcoal) 100%) !important;
  background-size: 200% 200%;
  background-position: 0% 0%;
  background-color: var(--zc-charcoal) !important;
  color: var(--zc-white) !important;
  height: 48px;
  border-radius: 12px;
  font-family: var(--zc-f-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(0, 0, 0, 0.20) inset,
    0 6px 18px rgba(26, 18, 8, 0.20),
    0 1px 3px rgba(26, 18, 8, 0.10);
  transition:
    transform 0.4s var(--zc-ease-spring),
    box-shadow 0.4s ease,
    background-position 0.6s ease;
}
.zc-hdr__book-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left,
    rgba(255, 255, 255, 0.16),
    transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.zc-hdr__book-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: left 0.8s ease;
  pointer-events: none;
  z-index: 0;
}
.zc-hdr__book-btn .zc-hdr__book-edge {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--zc-amber-dk) 10%,
    var(--zc-amber) 30%,
    var(--zc-amber-lt) 50%,
    var(--zc-amber) 70%,
    var(--zc-amber-dk) 90%,
    transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.55s var(--zc-ease-out);
  pointer-events: none;
  box-shadow: 0 0 14px var(--zc-amber-a35);
}
.zc-hdr__book:hover .zc-hdr__book-btn {
  transform: translateY(-2px);
  background-position: 100% 100%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset,
    0 14px 32px rgba(26, 18, 8, 0.32),
    0 4px 12px rgba(26, 18, 8, 0.14),
    0 0 0 4px rgba(207, 138, 63, 0.08);
}
.zc-hdr__book:hover .zc-hdr__book-btn::after { left: 100%; }
.zc-hdr__book:hover .zc-hdr__book-edge { transform: scaleX(1); }

.zc-hdr__book-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 20px;
  height: 100%;
  position: relative;
  z-index: 1;
}
.zc-hdr__book-main i {
  font-size: 13px;
  color: var(--zc-amber-lt);
  transition: color 0.3s ease;
}
.zc-hdr__book:hover .zc-hdr__book-main i { color: var(--zc-amber); }

.zc-hdr__book-sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  z-index: 1;
}
.zc-hdr__book-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  height: 100%;
  position: relative;
  z-index: 1;
}
.zc-hdr__book-caret i {
  font-size: 9px;
  color: var(--zc-w75);
  transition: transform 0.4s var(--zc-ease), color 0.3s ease;
}
.zc-hdr__book:hover .zc-hdr__book-caret i {
  transform: rotate(180deg);
  color: var(--zc-amber-lt);
}

.zc-hdr__book-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 360px;
  background: rgba(253, 252, 250, 0.92);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(207, 138, 63, 0.20);
  border-radius: 16px;
  box-shadow:
    0 30px 70px rgba(18, 12, 4, 0.22),
    0  8px 22px rgba(46, 75, 113, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 12px;
  z-index: 800;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transform-origin: top right;
  transition:
    opacity 0.32s var(--zc-ease),
    visibility 0.32s,
    transform 0.4s var(--zc-ease-spring);
}
.zc-hdr__book:hover .zc-hdr__book-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.zc-hdr__book-head {
  font-family: var(--zc-f-heading);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
  padding: 10px 14px 14px;
  border-bottom: 1px solid var(--zc-linen);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.zc-hdr__book-head::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--zc-amber);
}
.zc-hdr__book-opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 12px;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.3s var(--zc-ease);
  position: relative;
}
.zc-hdr__book-opt + .zc-hdr__book-opt { margin-top: 4px; }
.zc-hdr__book-opt:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(245, 243, 239, 0.65));
  border-color: rgba(207, 138, 63, 0.18);
  transform: translateX(2px);
}
.zc-hdr__book-opt-ic {
  width: 46px; height: 46px;
  background: var(--zc-white);
  border: 1px solid var(--zc-linen);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--zc-amber);
  flex-shrink: 0;
  transition: all 0.4s var(--zc-ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.zc-hdr__book-opt:hover .zc-hdr__book-opt-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: var(--zc-amber-dk);
  color: var(--zc-white);
  box-shadow: 0 6px 16px var(--zc-amber-a35);
}
.zc-hdr__book-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zc-hdr__book-opt-tag {
  font-family: var(--zc-f-heading);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
}
.zc-hdr__book-opt-title {
  font-family: var(--zc-f-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--zc-charcoal);
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.zc-hdr__book-opt-desc {
  font-family: var(--zc-f-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--zc-warm-mid);
  line-height: 1.45;
  letter-spacing: 0.05px;
}
.zc-hdr__book-opt-arrow {
  font-size: 11px;
  color: var(--zc-warm-mid);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s, color 0.3s;
}
.zc-hdr__book-opt:hover .zc-hdr__book-opt-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--zc-amber);
}

.zc-hdr__book-foot {
  margin-top: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-deep));
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.zc-hdr__book-foot-ic {
  width: 32px; height: 32px;
  background: var(--zc-amber);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zc-white);
  font-size: 13px;
  flex-shrink: 0;
}
.zc-hdr__book-foot-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.zc-hdr__book-foot-label {
  font-family: var(--zc-f-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--zc-w52);
}
.zc-hdr__book-foot-num {
  font-family: var(--zc-f-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--zc-white);
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: color 0.25s ease;
}
.zc-hdr__book-foot-num:hover { color: var(--zc-amber-lt); }


/* §9  MEGA MENU BASE ---------------------------------------------------- */
.zc-hdr__mega {
  position: fixed;
  top: var(--zc-nav-h);
  left: 0; right: 0;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  z-index: 800;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity 0.36s var(--zc-ease),
    visibility 0.36s,
    transform 0.42s var(--zc-ease-spring);
}
.zc-hdr__nav-item:hover > .zc-hdr__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.zc-hdr__mega-inner {
  width: 100%;
  padding: 0 var(--zc-pad-x) 32px;
}


/* §10  SERVICES MEGA ---------------------------------------------------- */
/* Base layout: a generic block so mobile (which has its own ≤991px
   rules below) starts from a clean slate. Desktop grid setup lives
   inside the @media (min-width: 992px) block that follows so it
   cannot leak into the drawer on small screens. */
.zc-hdr__svc-layout {
  display: block;
  margin: 0 auto;
  background: var(--zc-pearl);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--zc-linen);
  box-shadow:
    0 30px 70px rgba(18, 12, 4, 0.18),
    0 12px 28px rgba(46, 75, 113, 0.08),
    inset 0 1px 0 var(--zc-white);
}
@media (min-width: 992px) {
  .zc-hdr__svc-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "cats content"
      "cats feat";
    gap: 0;
    min-height: 420px;
    max-width: 1400px;
  }
  .zc-hdr__svc-cats    { grid-area: cats; }
  .zc-hdr__svc-content { grid-area: content; }
  .zc-hdr__svc-feat    { grid-area: feat; }
}
.zc-hdr__svc-cats {
  background: var(--zc-snow);
  padding: 18px 0;
  border-right: 1px solid var(--zc-linen);
}
.zc-hdr__svc-cat {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 22px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  font-family: var(--zc-f-heading);
  transition: background 0.3s ease, color 0.3s ease;
}
.zc-hdr__svc-cat:hover,
.zc-hdr__svc-cat.is-active { background: var(--zc-pearl); }
.zc-hdr__svc-cat.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--zc-amber);
  border-radius: 0 3px 3px 0;
}
.zc-hdr__svc-cat-ic {
  width: 42px; height: 42px;
  background: var(--zc-white);
  border: 1px solid var(--zc-linen);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.4s var(--zc-ease);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.zc-hdr__svc-cat-ic img {
  width: 24px; height: 24px;
  object-fit: contain;
  display: block;
  transition: transform 0.4s var(--zc-ease);
}
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: var(--zc-amber-dk);
  box-shadow: 0 6px 16px var(--zc-amber-a35);
}
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic img,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic img {
  filter: brightness(0) invert(1);
}
.zc-hdr__svc-cat-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.zc-hdr__svc-cat-name {
  font-family: var(--zc-f-heading);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--zc-charcoal);
  letter-spacing: 0.05px;
  line-height: 1.2;
}
.zc-hdr__svc-cat-count {
  font-family: var(--zc-f-accent);
  font-size: 10px;
  font-weight: 400;
  color: var(--zc-warm-mid);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.zc-hdr__svc-cat-arrow {
  font-size: 9px;
  color: var(--zc-warm-mid);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s, color 0.3s;
  flex-shrink: 0;
}
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-arrow,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--zc-amber);
}

.zc-hdr__svc-content {
  padding: 25px 18px 25px;
  position: relative;
  min-height: 450px;
}

.zc-hdr__svc-panel { display: none; animation: zc-svc-fade 0.4s var(--zc-ease) both; }
.zc-hdr__svc-panel.is-active { display: block; }
@keyframes zc-svc-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zc-hdr__svc-eyebrow {
  font-family: var(--zc-f-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.zc-hdr__svc-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-a35), transparent);
}
.zc-hdr__svc-title {
  font-family: var(--zc-f-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--zc-charcoal);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  line-height: 1.18;
}
.zc-hdr__svc-title-accent { color: var(--zc-amber); font-weight: 500; }
.zc-hdr__svc-tagline {
  font-family: var(--zc-f-accent);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--zc-warm-mid);
  margin-bottom: 22px;
  line-height: 1.5;
  letter-spacing: 0.2px;
}
.zc-hdr__svc-divider { height: 1px; background: var(--zc-linen); margin-bottom: 22px; }
.zc-hdr__svc-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 20px;
}
.zc-hdr__svc-group { min-width: 0; }
.zc-hdr__svc-group-head {
  font-family: var(--zc-f-heading);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--zc-linen);
}
.zc-hdr__svc-list { display: flex; flex-direction: column; gap: 1px; }
.zc-hdr__svc-link {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--zc-f-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--zc-warm-dk);
  letter-spacing: 0.05px;
  transition: background 0.22s, color 0.22s, padding-left 0.25s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zc-hdr__svc-link:hover {
  background: var(--zc-amber-a08);
  color: var(--zc-charcoal);
  padding-left: 12px;
}

.zc-hdr__svc-all {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--zc-f-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--zc-amber-dk);
  letter-spacing: 1.4px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 8px;
  background: var(--zc-amber-a08);
  border: 1px solid var(--zc-amber-a18);
  transition: all 0.3s ease;
}
.zc-hdr__svc-all:hover {
  color: var(--zc-white);
  background: var(--zc-amber);
  border-color: var(--zc-amber-dk);
  gap: 12px;
}
.zc-hdr__svc-all i { font-size: 9px; }

.zc-hdr__svc-feat {
  background:
    radial-gradient(at 12% 50%, rgba(207, 138, 63, 0.15) 0%, transparent 55%),
    linear-gradient(90deg, var(--zc-navy-deep) 0%, var(--zc-navy) 100%);
  padding: 18px 28px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--zc-w08);
}
.zc-hdr__svc-feat::before,
.zc-hdr__svc-feat::after { display: none; }
.zc-hdr__svc-feat-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "badge title stats btn"
    "badge desc  stats btn";
  align-items: center;
  column-gap: 24px;
  row-gap: 2px;
}
.zc-hdr__svc-feat-badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--zc-amber-soft);
  font-family: var(--zc-f-heading);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding-right: 18px;
  border-right: 1px solid var(--zc-w12);
  align-self: center;
  white-space: nowrap;
}
.zc-hdr__svc-feat-badge::before {
  content: '';
  width: 12px; height: 1px;
  background: var(--zc-amber);
}
.zc-hdr__svc-feat-title {
  grid-area: title;
  font-family: var(--zc-f-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--zc-white);
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin: 0;
}
.zc-hdr__svc-feat-title-accent { color: var(--zc-amber-lt); font-weight: 400; }
.zc-hdr__svc-feat-desc {
  grid-area: desc;
  font-family: var(--zc-f-body);
  font-size: 12px;
  color: var(--zc-w52);
  line-height: 1.45;
  margin: 0;
}
.zc-hdr__svc-feat-stats {
  grid-area: stats;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 22px;
  border-left: 1px solid var(--zc-w08);
  border-right: 1px solid var(--zc-w08);
  margin: 0;
}
.zc-hdr__svc-feat-stat-n {
  font-family: var(--zc-f-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--zc-amber-lt);
  line-height: 1;
  letter-spacing: -0.4px;
}
.zc-hdr__svc-feat-stat-l {
  font-family: var(--zc-f-heading);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--zc-w36);
  margin-top: 4px;
}
.zc-hdr__svc-feat-btn {
  grid-area: btn;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--zc-amber);
  color: var(--zc-white);
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--zc-f-heading);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, gap 0.3s ease, transform 0.3s ease;
  width: auto;
  white-space: nowrap;
  box-shadow: 0 8px 20px var(--zc-amber-a35);
}
.zc-hdr__svc-feat-btn:hover {
  background: var(--zc-amber-dk);
  gap: 14px;
  color: var(--zc-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--zc-amber-a45);
}


/* §11  KNOWLEDGE MEGA --------------------------------------------------- */
.zc-hdr__know-wrap {
  background: var(--zc-pearl);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--zc-linen);
  box-shadow:
    0 30px 70px rgba(18, 12, 4, 0.18),
    0 12px 28px rgba(46, 75, 113, 0.08),
    inset 0 1px 0 var(--zc-white);
  max-width: 1100px;
  margin: 0 auto;
}
.zc-hdr__know-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
}
.zc-hdr__know-articles {
  padding: 24px 26px 22px;
  border-right: 1px solid var(--zc-linen);
}
.zc-hdr__know-head {
  font-family: var(--zc-f-heading);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--zc-linen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.zc-hdr__know-count {
  font-family: var(--zc-f-accent);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--zc-amber-dk);
  background: var(--zc-amber-a08);
  border: 1px solid var(--zc-amber-a18);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: none;
}
.zc-hdr__know-articles-list { display: flex; flex-direction: column; gap: 6px; }
.zc-hdr__know-article {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  text-decoration: none;
  padding: 7px;
  border-radius: 10px;
  background: var(--zc-white);
  border: 1px solid var(--zc-linen);
  transition:
    transform 0.35s var(--zc-ease-spring),
    box-shadow 0.35s ease,
    border-color 0.35s,
    background 0.35s;
}
.zc-hdr__know-article:hover {
  transform: translateX(3px);
  border-color: var(--zc-amber-a35);
  background: linear-gradient(135deg, var(--zc-pearl) 0%, rgba(255,255,255,0.95) 100%);
  box-shadow:
    0 8px 22px rgba(46, 75, 113, 0.08),
    0 3px 8px rgba(207, 138, 63, 0.10);
}
.zc-hdr__know-article-thumb {
  position: relative;
  height: 58px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--zc-snow);
}
.zc-hdr__know-article-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--zc-ease);
}
.zc-hdr__know-article:hover .zc-hdr__know-article-thumb img { transform: scale(1.08); }
.zc-hdr__know-article-tag {
  position: absolute;
  top: 5px; left: 5px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--zc-white);
  font-family: var(--zc-f-heading);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 1;
}
.zc-hdr__know-article-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 1px 4px 1px 0; }
.zc-hdr__know-article-title {
  font-family: var(--zc-f-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--zc-charcoal);
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}
.zc-hdr__know-article:hover .zc-hdr__know-article-title { color: var(--zc-amber-dk); }
.zc-hdr__know-article-meta {
  font-family: var(--zc-f-accent);
  font-size: 10px;
  font-weight: 400;
  color: var(--zc-warm-mid);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}
.zc-hdr__know-article-meta i { font-size: 9px; color: var(--zc-amber); }
.zc-hdr__know-article-meta-dot { color: var(--zc-stone); }
.zc-hdr__know-resources {
  padding: 24px 26px 22px;
  background: var(--zc-snow);
  display: flex;
  flex-direction: column;
}
.zc-hdr__know-list { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.zc-hdr__know-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 11px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.22s, transform 0.22s;
}
.zc-hdr__know-link:hover { background: var(--zc-pearl); transform: translateX(3px); }
.zc-hdr__know-ic {
  width: 34px; height: 34px;
  background: var(--zc-white);
  border: 1px solid var(--zc-linen);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--zc-amber);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  transition: all 0.3s var(--zc-ease);
}
.zc-hdr__know-link:hover .zc-hdr__know-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: var(--zc-amber-dk);
  color: var(--zc-white);
  transform: rotate(-5deg) scale(1.06);
  box-shadow: 0 5px 14px var(--zc-amber-a45);
}
.zc-hdr__know-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zc-hdr__know-label {
  font-family: var(--zc-f-heading);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--zc-charcoal);
  line-height: 1.3;
  letter-spacing: 0.05px;
}
.zc-hdr__know-sub {
  font-family: var(--zc-f-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--zc-warm-mid);
  line-height: 1.4;
}
.zc-hdr__know-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px;
  background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-deep));
}
.zc-hdr__know-footer-text { display: flex; flex-direction: column; gap: 4px; }
.zc-hdr__know-footer-title {
  font-family: var(--zc-f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--zc-white);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.zc-hdr__know-footer-sub {
  font-family: var(--zc-f-accent);
  font-size: 11.5px;
  color: var(--zc-w52);
  letter-spacing: 0.3px;
}
.zc-hdr__know-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--zc-amber);
  color: var(--zc-white);
  padding: 12px 20px;
  border-radius: 10px;
  font-family: var(--zc-f-heading);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px var(--zc-amber-a35);
  transition: background 0.3s ease, gap 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
.zc-hdr__know-footer-btn:hover {
  background: var(--zc-amber-dk);
  gap: 14px;
  color: var(--zc-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px var(--zc-amber-a45);
}


/* §12  SIMPLE DROPDOWN -------------------------------------------------- */
.zc-hdr__drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  background: rgba(253, 252, 250, 0.94);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(207, 138, 63, 0.20);
  border-radius: 14px;
  box-shadow:
    0 26px 64px rgba(18, 12, 4, 0.20),
    0  6px 18px rgba(46, 75, 113, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 8px;
  margin-top: 14px;
  z-index: 800;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.32s var(--zc-ease),
    visibility 0.32s,
    transform 0.4s var(--zc-ease-spring),
    margin-top 0.32s ease;
}
.zc-hdr__nav-item:hover > .zc-hdr__drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  margin-top: 0;
}
/* Section labels — small uppercase brand-colour headers that group
   related links inside a dropdown ("Patient Stories", "Care Services"). */
.zc-hdr__drop-label {
  display: block;
  padding: 14px 14px 6px;
  font-family: var(--zc-f-heading);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-amber-dk);
  pointer-events: none;
  user-select: none;
}
.zc-hdr__drop-label:first-child { padding-top: 4px; }

.zc-hdr__drop-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-family: var(--zc-f-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--zc-warm-dk);
  text-decoration: none;
  border-radius: 8px;
  letter-spacing: 0.05px;
  transition: all 0.25s ease;
}
.zc-hdr__drop-link + .zc-hdr__drop-link { margin-top: 1px; }
.zc-hdr__drop-ic {
  width: 32px; height: 32px;
  background: var(--zc-white);
  border: 1px solid var(--zc-linen);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--zc-amber);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  transition: all 0.3s var(--zc-ease);
}
.zc-hdr__drop-link:hover {
  background: var(--zc-amber-a08);
  color: var(--zc-charcoal);
  padding-left: 18px;
}
.zc-hdr__drop-link:hover .zc-hdr__drop-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-color: var(--zc-amber-dk);
  color: var(--zc-white);
  transform: rotate(-5deg) scale(1.05);
}
.zc-hdr__drop-link-text { flex: 1; min-width: 0; }


/* §13  HAMBURGER + BACKDROP -------------------------------------------- */
.zc-hdr__ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(207, 138, 63, 0.15);
  cursor: pointer;
  border-radius: 11px;
  transition: background 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.zc-hdr__ham:hover,
.zc-hdr__ham:active {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(207, 138, 63, 0.30);
}
.zc-hdr__ham-bar {
  width: 22px; height: 1.6px;
  background: var(--zc-charcoal);
  border-radius: 2px;
  transition: transform 0.42s var(--zc-ease), opacity 0.32s ease;
}
.zc-hdr.is-open .zc-hdr__ham-bar:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.zc-hdr.is-open .zc-hdr__ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.zc-hdr.is-open .zc-hdr__ham-bar:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.zc-hdr__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 12, 4, 0.45);
  z-index: 9990;
  opacity: 0;
  visibility: hidden;
  /* Premium frosted-glass effect over the page when the drawer or
     bottom-sheet is open. Drops in/out smoothly. */
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease,
    -webkit-backdrop-filter 0.45s ease,
    backdrop-filter 0.45s ease;
}
body.zc-drawer-open .zc-hdr__backdrop,
body.zc-book-open  .zc-hdr__backdrop {
  opacity: 1;
  visibility: visible;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
body.zc-drawer-open .zc-hdr,
body.zc-book-open  .zc-hdr {
  z-index: 9999;
}


/* §14  RESPONSIVE ------------------------------------------------------- */
@media (max-width: 1280px) {
  .zc-hdr__nav-link {
    padding: 0 14px;
    font-size: 12.5px;
    letter-spacing: 0.3px;
  }
  .zc-hdr__svc-layout { grid-template-columns: 220px 1fr; }
}
@media (max-width: 1100px) {
  .zc-hdr__nav-link { padding: 0 11px; font-size: 12px; }
  .zc-hdr__book-main { padding: 0 14px 0 16px; }
  .zc-hdr__book-caret { padding: 0 12px; }
}

@media (max-width: 991px) {
  .zc-hdr {
    height: var(--zc-mob-h);
    /* Solid white on mobile so page content NEVER bleeds through the
       sticky header as the user scrolls. !important guards against
       any legacy header rule leaking from /style.css. */
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: auto;
    /* Smooth fade between solid white (closed) and transparent
       (drawer/book open — lets the backdrop's blur show through). */
    transition: background 0.4s ease;
  }
  .zc-hdr.is-scrolled {
    background: #ffffff !important;
  }
  /* When the drawer or book bottom-sheet is open, drop the header
     background to transparent. The .zc-hdr__backdrop (which already
     covers the full viewport including the header area with blur+dim)
     shows THROUGH the transparent header — so the entire viewport reads
     as one continuous frosted-glass surface. No backdrop-filter on the
     header itself: that creates a containing block for fixed-positioned
     descendants in some browsers and was breaking the CTA dock + book
     panel anchoring. */
  body.zc-drawer-open .zc-hdr,
  body.zc-book-open   .zc-hdr {
    background: transparent !important;
  }
  /* Fade the logo so it recedes into the dim. We deliberately do NOT
     fade .zc-hdr__book — it contains the book bottom-sheet panel, and
     opacity on the parent would cascade to the panel (rendering it at
     35% transparency) and create a stacking context that traps its
     fixed positioning. The hamburger stays full-opacity so the user
     can tap it to close the menu. */
  body.zc-drawer-open .zc-hdr__brand,
  body.zc-book-open   .zc-hdr__brand {
    opacity: 0.45;
    transition: opacity 0.4s ease;
  }
  .zc-hdr::before,
  .zc-hdr::after { display: none; }

  .zc-hdr__inner { gap: 12px; }
  .zc-hdr__logo { height: 38px; }

  .zc-hdr__ham { display: flex; }

  /* Mobile book button */
  .zc-hdr__book {
    margin-left: 0;
    margin-right: 8px;
    position: static;
  }
  .zc-hdr__book-btn {
    height: 42px;
    border-radius: 11px;
    width: auto;
    padding: 0;
    overflow: hidden;
  }
  .zc-hdr__book-btn::before,
  .zc-hdr__book-btn::after { display: none; }
  .zc-hdr__book .zc-hdr__book-edge { display: none; }
  .zc-hdr__book-main {
    padding: 0 12px;
    height: 100%;
    justify-content: center;
    gap: 6px;
  }
  .zc-hdr__book-main i {
    font-size: 12px;
    color: var(--zc-amber-lt);
  }
  .zc-hdr__book-main-label {
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    font-size: 0;
  }
  .zc-hdr__book-main-label::before {
    content: 'Book';
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--zc-white);
    line-height: 1.1;
  }
  .zc-hdr__book-main-label::after {
    content: 'Appointment';
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: var(--zc-amber-lt);
    line-height: 1.1;
    margin-top: 2px;
    text-transform: uppercase;
  }
  .zc-hdr__book-sep,
  .zc-hdr__book-caret { display: none; }

  /* Book bottom-sheet */
  .zc-hdr__book-panel {
    display: block !important;
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(at 100% 0%, rgba(207,138,63,0.12) 0%, transparent 50%),
      linear-gradient(180deg, #1a1208 0%, #14110a 100%);
    border: 1px solid rgba(207, 138, 63, 0.18);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow:
      0 -16px 60px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transform-origin: bottom;
    transition:
      opacity 0.4s var(--zc-ease),
      visibility 0.4s,
      transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .zc-hdr__book-panel::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
  }
  .zc-hdr__book.is-open .zc-hdr__book-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .zc-hdr__book:hover .zc-hdr__book-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
  }
  .zc-hdr__book.is-open:hover .zc-hdr__book-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .zc-hdr__book-head {
    color: var(--zc-amber-lt);
    border-bottom: 1px solid rgba(207, 138, 63, 0.15);
    padding: 18px 16px 14px;
    font-size: 9.5px;
    text-align: center;
    justify-content: center;
  }
  .zc-hdr__book-head::before { display: none; }
  .zc-hdr__book-opt {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px;
    border-radius: 14px;
  }
  .zc-hdr__book-opt + .zc-hdr__book-opt { margin-top: 8px; }
  .zc-hdr__book-opt:hover,
  .zc-hdr__book-opt:active {
    background: rgba(207, 138, 63, 0.10);
    border-color: rgba(207, 138, 63, 0.25);
    transform: none;
    box-shadow: none;
  }
  .zc-hdr__book-opt-ic {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--zc-amber-lt);
    box-shadow: none;
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  .zc-hdr__book-opt:hover .zc-hdr__book-opt-ic,
  .zc-hdr__book-opt:active .zc-hdr__book-opt-ic {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: var(--zc-amber-dk);
    color: var(--zc-white);
    transform: none;
    box-shadow: none;
  }
  .zc-hdr__book-opt-tag { color: var(--zc-amber-lt); }
  .zc-hdr__book-opt-title { color: var(--zc-white); font-size: 15px; }
  .zc-hdr__book-opt-desc { color: rgba(255, 255, 255, 0.5); font-size: 11.5px; }
  .zc-hdr__book-opt-arrow { color: var(--zc-amber-lt); opacity: 0.6; transform: none; }
  .zc-hdr__book-foot {
    margin-top: 10px;
    padding: 14px 16px;
    background: rgba(207, 138, 63, 0.10);
    border: 1px solid rgba(207, 138, 63, 0.20);
  }
  .zc-hdr__book-foot-ic { width: 34px; height: 34px; }
  .zc-hdr__book-foot-num { font-size: 16px; }

  .zc-hdr__nav-item::before { display: none; }

  /* Mobile drawer */
  .zc-hdr__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 75vw;
    height: 100dvh;
    height: 100vh;
    background:
      radial-gradient(at 0% 0%, rgba(207,138,63,0.12) 0%, transparent 45%),
      radial-gradient(at 100% 100%, rgba(46,75,113,0.20) 0%, transparent 50%),
      linear-gradient(170deg, #1a1208 0%, #14110a 50%, #0d0a06 100%);
    z-index: 9999;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
    border-left: 1px solid rgba(207, 138, 63, 0.22);
    border-radius: 0;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.04);
    scrollbar-width: thin;
    scrollbar-color: rgba(207, 138, 63, 0.25) transparent;
    pointer-events: auto;
  }
  .zc-hdr__nav::-webkit-scrollbar { width: 3px; }
  .zc-hdr__nav::-webkit-scrollbar-track { background: transparent; }
  .zc-hdr__nav::-webkit-scrollbar-thumb {
    background: rgba(207, 138, 63, 0.25);
    border-radius: 3px;
  }
  .zc-hdr.is-open .zc-hdr__nav { transform: translateX(0); }

  .zc-hdr__drawer-brand {
    display: flex !important;
    align-items: center;
    gap: clamp(10px, 2vw, 14px);
    padding: 0 clamp(14px, 3vw, 22px);
    height: clamp(58px, 9vw, 72px);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    /* Identical layered gradient to the drawer body (.zc-hdr__nav) so the
       sticky brand bar visually merges with the drawer behind it — looks
       like one continuous premium panel instead of a separate plate.
       Opaque base layer at the bottom of the stack keeps scrolling nav
       items from bleeding through. */
    background:
      radial-gradient(at 0% 0%,    rgba(207, 138, 63, 0.12) 0%, transparent 45%),
      radial-gradient(at 100% 100%,rgba(46, 75, 113, 0.20)  0%, transparent 50%),
      linear-gradient(170deg, #1a1208 0%, #14110a 50%, #0d0a06 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(207, 138, 63, 0.18);
  }
  .zc-hdr__drawer-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  .zc-hdr__drawer-brand-logo {
    height: clamp(30px, 4.8vw, 42px);
    width: auto;
    display: block;
    filter:
      brightness(0)
      invert(1)
      sepia(0.18)
      saturate(2.2)
      hue-rotate(-16deg)
      brightness(1.05);
    transition: opacity 0.3s ease;
  }
  .zc-hdr__drawer-brand-link:active .zc-hdr__drawer-brand-logo { opacity: 0.7; }
  .zc-hdr__drawer-close {
    width: clamp(34px, 5vw, 42px);
    height: clamp(34px, 5vw, 42px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zc-w94);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 11;
  }
  .zc-hdr__drawer-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .zc-hdr__drawer-close:active {
    background: var(--zc-amber);
    border-color: var(--zc-amber-dk);
    transform: scale(0.92);
  }

  .zc-hdr.is-open .zc-hdr__ham {
    position: relative;
    z-index: 1;
  }

  .zc-hdr__nav-item {
    height: auto;
    width: 100%;
    border-bottom: 1px solid rgba(207, 138, 63, 0.06);
    flex-direction: column;
    align-items: stretch;
    pointer-events: auto;
  }
  .zc-hdr__nav-link {
    width: 100%;
    height: clamp(52px, 7.5vw, 62px);
    padding: 0 clamp(16px, 4vw, 22px);
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--zc-f-heading);
    font-size: clamp(13px, 1.6vw + 8px, 15px);
    font-weight: 500;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.5vw, 14px);
    justify-content: flex-start;
    text-align: left;
    border-radius: 0;
    background: transparent;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
    cursor: pointer;
  }
  .zc-hdr__nav-link .zc-hdr__nav-caret {
    margin-left: auto;
    flex-shrink: 0;
  }
  .zc-hdr__nav-link::before,
  .zc-hdr__nav-link::after { display: none; }
  .zc-hdr__nav-link:hover,
  .zc-hdr__nav-link:active,
  .zc-hdr__nav-item.is-mobile-open > .zc-hdr__nav-link {
    color: var(--zc-amber-lt);
    background: rgba(255, 255, 255, 0.04);
  }
  .zc-hdr__nav-link.is-active {
    color: var(--zc-amber-lt);
    background: rgba(207, 138, 63, 0.08);
    font-weight: 600;
  }
  .zc-hdr__nav-link.is-active:hover { color: var(--zc-amber-lt); }

  .zc-hdr__nav-caret {
    transform: rotate(-90deg);
    color: rgba(255, 255, 255, 0.32);
    opacity: 1;
    font-size: 9px;
    transition: transform 0.35s var(--zc-ease), color 0.3s ease;
  }
  .zc-hdr__nav-item.is-mobile-open > .zc-hdr__nav-link .zc-hdr__nav-caret {
    transform: rotate(0deg);
    color: var(--zc-amber);
  }
  .zc-hdr__nav-item:hover .zc-hdr__nav-caret { transform: rotate(-90deg); }

  .zc-hdr__mega,
  .zc-hdr__drop {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    max-width: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--zc-ease);
    width: 100%;
  }
  .zc-hdr__mega-inner { padding: 0; }
  .zc-hdr__nav-item:hover > .zc-hdr__mega,
  .zc-hdr__nav-item:hover > .zc-hdr__drop { max-height: 0; }
  .zc-hdr__nav-item.is-mobile-open > .zc-hdr__mega,
  .zc-hdr__nav-item.is-mobile-open > .zc-hdr__drop { max-height: 5000px; }

  /* Mobile: drawer should read flat — no rounded corners, no
     drop-shadows, no light borders on the services panel. The
     desktop polish rules use `!important` for the box-shadow on
     .zc-hdr__svc-layout, so we have to match the specificity to
     win the cascade on mobile. */
  .zc-hdr__svc-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
    min-height: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .zc-hdr__svc-cats,
  .zc-hdr__svc-content,
  .zc-hdr__svc-feat { grid-area: auto; }
  .zc-hdr__svc-cats {
    background: transparent;
    border-right: none;
    border-bottom: 1px solid var(--zc-w08);
    padding: 8px 0;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zc-hdr__svc-cats::-webkit-scrollbar { display: none; }
  /* Categories scroll horizontally as flat text/icon items separated
     by soft vertical hairlines (not rounded pills). Active item
     gets an amber underline + amber text, no background fill. */
  .zc-hdr__svc-cat {
    position: relative;
    padding: 8px 14px;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-right: 0 !important;
    gap: 8px;
    transform: none !important;
  }
  /* Vertical hairline divider between adjacent categories. */
  .zc-hdr__svc-cat + .zc-hdr__svc-cat::before {
    content: '';
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(207, 138, 63, 0.10) 20%,
      rgba(207, 138, 63, 0.30) 50%,
      rgba(207, 138, 63, 0.10) 80%,
      transparent 100%);
    pointer-events: none;
  }
  /* Active item — amber underline (no background fill). */
  .zc-hdr__svc-cat:hover, .zc-hdr__svc-cat.is-active { background: transparent !important; }
  .zc-hdr__svc-cat.is-active::before { display: none; }
  .zc-hdr__svc-cat.is-active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, var(--zc-amber-lt), var(--zc-amber-dk));
    border-radius: 1px;
  }
  .zc-hdr__svc-cat-name {
    color: var(--zc-w94);
    font-size: 12px;
    transition: color 0.25s ease;
  }
  .zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-name { color: var(--zc-amber-lt); }
  .zc-hdr__svc-cat-count { color: var(--zc-w36); font-size: 9px; }
  .zc-hdr__svc-cat-arrow { display: none; }

  /* Icon: no white card around it — just the glyph on a small amber
     translucent tile so it reads in the dark drawer. */
  .zc-hdr__svc-cat-ic {
    width: 26px; height: 26px;
    background: rgba(207, 138, 63, 0.12) !important;
    border: 1px solid rgba(207, 138, 63, 0.20) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  .zc-hdr__svc-cat-ic img { width: 18px; height: 18px; filter: brightness(0) invert(0.85); }
  .zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic,
  .zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)) !important;
    border-color: transparent !important;
    transform: none !important;
  }
  .zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic img,
  .zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic img { filter: brightness(0) invert(1); }

  /* Speciality panel — eyebrow + title + tagline + service links
     all sized down for mobile drawer. */
  .zc-hdr__svc-content { padding: 16px 16px; max-height: none; }
  .zc-hdr__svc-eyebrow {
    color: var(--zc-amber);
    font-size: 8.5px;
    letter-spacing: 2px;
    margin-bottom: 6px;
    gap: 8px;
  }
  .zc-hdr__svc-title {
    font-size: 16px;
    color: var(--zc-w94);
    margin-bottom: 4px;
    letter-spacing: -0.3px;
    line-height: 1.2;
  }
  .zc-hdr__svc-tagline {
    color: var(--zc-w36);
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .zc-hdr__svc-divider { background: var(--zc-w08); margin-bottom: 10px; }
  .zc-hdr__svc-groups { grid-template-columns: 1fr; gap: 14px; }
  .zc-hdr__svc-group-head {
    color: var(--zc-amber);
    border-bottom-color: var(--zc-w08);
    font-size: 10px;
    letter-spacing: 1.4px;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
  .zc-hdr__svc-link {
    color: var(--zc-w52);
    font-size: 12px;
    padding: 6px 10px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .zc-hdr__svc-link:hover { color: var(--zc-amber-lt); background: var(--zc-w08); }
  .zc-hdr__svc-all { color: var(--zc-amber); background: var(--zc-w08); border-color: var(--zc-w12); }
  .zc-hdr__svc-all:hover { background: var(--zc-amber); color: var(--zc-white); }
  /* "Free First Visit / Begin your journey" CTA card — compact on
     mobile. Previous version was full-width with thick padding,
     large title and big stats; now sized to read as a small accent
     panel inside the drawer. */
  /* Hide the "Begin your journey" feat banner entirely on mobile —
     the drawer already has its own bottom CTA dock + bottom-sheet
     booking flow, so this card was duplicative on small screens. */
  .zc-hdr__svc-feat { display: none; }
  .zc-hdr__svc-feat::before,
  .zc-hdr__svc-feat::after { display: none; }
  /* Revert desktop horizontal grid back to natural vertical
     stacking so the card reads as a compact block in the drawer. */
  .zc-hdr__svc-feat-content {
    display: block;
    grid-template-columns: none;
    grid-template-areas: none;
    column-gap: 0;
    row-gap: 0;
  }
  .zc-hdr__svc-feat-badge {
    font-size: 8.5px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    gap: 6px;
    padding-right: 0;
    border-right: none;
  }
  .zc-hdr__svc-feat-badge::before { width: 10px; }
  .zc-hdr__svc-feat-title {
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
  }
  .zc-hdr__svc-feat-desc {
    font-size: 11.5px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .zc-hdr__svc-feat-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--zc-w08);
    border-bottom: 1px solid var(--zc-w08);
  }
  .zc-hdr__svc-feat-stat-n { font-size: 18px; }
  .zc-hdr__svc-feat-stat-l { font-size: 8px; letter-spacing: 1.2px; margin-top: 4px; }
  .zc-hdr__svc-feat-btn {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 1.1px;
    border-radius: 8px;
    gap: 8px;
    width: 100%;
    white-space: normal;
  }

  .zc-hdr__know-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-width: none;
  }
  .zc-hdr__know-body { grid-template-columns: 1fr; }
  .zc-hdr__know-articles { border-right: none; border-bottom: 1px solid var(--zc-w08); padding: 22px 22px; }
  .zc-hdr__know-resources { background: transparent; padding: 22px 22px; }
  .zc-hdr__know-head { color: var(--zc-amber); border-bottom-color: var(--zc-w08); }
  .zc-hdr__know-count { color: var(--zc-amber-lt); background: var(--zc-w08); border-color: var(--zc-w12); }
  /* Latest Articles → horizontal scroller, ~1.6 cards visible.
     Each article becomes a vertical card: image on top, title +
     meta below. */
  .zc-hdr__know-articles-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -22px;          /* let cards bleed to drawer edges */
    padding: 4px 22px 8px;    /* and restore safe area inside */
  }
  .zc-hdr__know-articles-list::-webkit-scrollbar { display: none; }
  .zc-hdr__know-article {
    flex: 0 0 62.5%;          /* ~1.6 visible (one + half-peek) */
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    padding: 6px !important;
    background: var(--zc-w08);
    border-color: var(--zc-w08);
    scroll-snap-align: start;
  }
  .zc-hdr__know-article:hover {
    background: var(--zc-w12);
    transform: none;          /* don't translate inside scroller */
  }
  .zc-hdr__know-article-thumb {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .zc-hdr__know-article-body { padding: 2px 4px 6px; }
  .zc-hdr__know-article-title { color: var(--zc-w94); font-size: 12.5px; line-height: 1.3; margin-bottom: 3px; }
  .zc-hdr__know-article:hover .zc-hdr__know-article-title { color: var(--zc-amber-lt); }
  .zc-hdr__know-article-meta { color: var(--zc-w36); font-size: 9.5px; gap: 4px; }
  .zc-hdr__know-article-meta i { font-size: 8.5px; }
  .zc-hdr__know-link:hover { background: var(--zc-w08); }
  .zc-hdr__know-ic { background: var(--zc-w08); border: none; }
  .zc-hdr__know-label { color: var(--zc-w94); }
  .zc-hdr__know-sub { color: var(--zc-w36); }
  /* "Explore Our Blog" CTA card — title on top, paragraph below,
     button at bottom (single column, not horizontal). White text on
     amber background, compact for the drawer. */
  .zc-hdr__know-footer {
    margin: 8px 14px 14px;
    border-radius: 10px;
    padding: 14px 14px;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .zc-hdr__know-footer-text { gap: 4px; }
  .zc-hdr__know-footer-title {
    color: var(--zc-white) !important;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.2px;
  }
  .zc-hdr__know-footer-sub {
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.2px;
  }
  .zc-hdr__know-footer-btn {
    background: rgba(255, 255, 255, 0.95);
    color: var(--zc-amber-dk) !important;
    padding: 9px 14px;
    font-size: 9.5px;
    letter-spacing: 1.2px;
    gap: 7px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(18, 12, 4, 0.18);
    align-self: stretch;
    justify-content: center;
  }
  .zc-hdr__know-footer-btn:hover {
    background: var(--zc-white);
    color: var(--zc-amber-dk) !important;
    gap: 10px;
  }

  .zc-hdr__drop-link { color: var(--zc-w52); padding: 14px 24px; border-radius: 0; background: transparent; }
  .zc-hdr__drop-ic { background: var(--zc-w08); border: none; box-shadow: none; }
  .zc-hdr__drop-link:hover { background: var(--zc-w08); color: var(--zc-amber-lt); padding-left: 28px; }
  .zc-hdr__drop-link:hover .zc-hdr__drop-ic { transform: none; }

  .zc-hdr__drawer-divider {
    display: flex !important;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
    padding: clamp(14px, 2.5vw, 20px) clamp(14px, 3vw, 22px) clamp(6px, 1vw, 10px);
    font-family: var(--zc-f-heading);
    font-size: clamp(8.5px, 1vw + 5px, 10px);
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(207, 138, 63, 0.55);
    border-bottom: none !important;
  }
  .zc-hdr__drawer-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(207, 138, 63, 0.12);
  }

  .zc-hdr__drawer-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 1.2vw, 10px);
    padding: clamp(10px, 1.8vw, 14px) clamp(14px, 3vw, 22px) clamp(12px, 2vw, 18px);
    border-bottom: none !important;
  }
  .zc-hdr__drawer-stat {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(207, 138, 63, 0.16);
    border-radius: clamp(9px, 1.4vw, 12px);
    padding: clamp(9px, 1.5vw, 13px) clamp(4px, 0.8vw, 8px);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
  }
  .zc-hdr__drawer-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207,138,63,0.4), transparent);
  }
  .zc-hdr__drawer-stat:active { transform: scale(0.96); }
  .zc-hdr__drawer-stat-n {
    font-family: var(--zc-f-display);
    font-size: clamp(17px, 2.5vw + 6px, 24px);
    font-weight: 600;
    color: var(--zc-amber-lt);
    line-height: 1;
    letter-spacing: -0.3px;
  }
  .zc-hdr__drawer-stat-l {
    font-size: clamp(8px, 0.8vw + 4px, 10px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.38);
    margin-top: clamp(3px, 0.5vw, 5px);
    line-height: 1.3;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }

  .zc-hdr__drawer-contact {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    padding: clamp(2px, 0.5vw, 6px) clamp(10px, 2vw, 14px) clamp(6px, 1.2vw, 10px);
    border-bottom: none !important;
  }
  .zc-hdr__drawer-contact-row {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 14px);
    padding: clamp(10px, 1.8vw, 14px) clamp(8px, 1.5vw, 12px);
    border-radius: clamp(10px, 1.6vw, 13px);
    text-decoration: none;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .zc-hdr__drawer-contact-row:active,
  .zc-hdr__drawer-contact-row:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .zc-hdr__drawer-contact-ic {
    width: clamp(32px, 4.8vw, 40px);
    height: clamp(32px, 4.8vw, 40px);
    background: rgba(207, 138, 63, 0.10);
    border: 1px solid rgba(207, 138, 63, 0.18);
    border-radius: clamp(9px, 1.4vw, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zc-amber);
    font-size: clamp(12px, 1.4vw + 6px, 15px);
    flex-shrink: 0;
  }
  .zc-hdr__drawer-contact-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
  }
  .zc-hdr__drawer-contact-label {
    font-family: var(--zc-f-heading);
    font-size: clamp(8px, 0.8vw + 4.5px, 10px);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
  }
  .zc-hdr__drawer-contact-val {
    font-family: var(--zc-f-body);
    font-size: clamp(12px, 1.2vw + 7px, 14px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05px;
  }

  /* "Follow Us" divider + socials — flow naturally with drawer content,
     no sticky stack. Avoids the iOS Safari "sticky inside overflow" quirk
     that hid the rows on some phones. */
  .zc-hdr__drawer-divider:has(+ .zc-hdr__drawer-socials) {
    position: static;
    margin: auto 0 0 0;       /* still pushed below scrolling nav items */
    padding: 10px 22px 6px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid rgba(207, 138, 63, 0.10);
  }

  /* Socials row — left-aligned, rounded-square pills matching the
     drawer's nav-item icon style (.zc-hdr__nav-mob-ic). */
  .zc-hdr__drawer-socials {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, 1.6vw, 12px);
    padding: clamp(6px, 1.2vw, 10px) clamp(14px, 3vw, 22px) clamp(10px, 1.8vw, 14px);
    border-bottom: none !important;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    position: static;
    flex-shrink: 0;
    margin: 0;
  }
  .zc-hdr__drawer-soc {
    width: clamp(36px, 5vw, 42px);
    height: clamp(36px, 5vw, 42px);
    border-radius: clamp(9px, 1.4vw, 12px);   /* rounded square, not circle */
    background: rgba(207, 138, 63, 0.10);
    border: 1px solid rgba(207, 138, 63, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zc-amber);
    font-size: clamp(13px, 1.4vw + 6px, 15px);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .zc-hdr__drawer-soc:hover,
  .zc-hdr__drawer-soc:active {
    background: var(--zc-amber);
    border-color: var(--zc-amber-dk);
    color: var(--zc-white);
    transform: translateY(-2px);
  }

  .zc-hdr__nav-item .zc-hdr__nav-link::before { display: none; }
  .zc-hdr__nav-link i.zc-hdr__nav-mob-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(30px, 4.5vw, 38px);
    height: clamp(30px, 4.5vw, 38px);
    background: rgba(207, 138, 63, 0.10);
    border: 1px solid rgba(207, 138, 63, 0.18);
    border-radius: clamp(8px, 1.4vw, 11px);
    color: var(--zc-amber);
    font-size: clamp(11px, 1.4vw + 6px, 14px);
    margin-right: 0;
    flex-shrink: 0;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
  }
  .zc-hdr__nav-item.is-mobile-open .zc-hdr__nav-link i.zc-hdr__nav-mob-ic {
    background: var(--zc-amber);
    color: var(--zc-white);
    border-color: var(--zc-amber-dk);
  }

  /* Mobile CTA dock — moved OUT of <ul.zc-hdr__nav> in the markup, so it
     no longer competes with the drawer's overflow:auto scroll context.
     It's a viewport-anchored fixed bar that sits at bottom-right and
     slides in/out together with the drawer via the same translateX
     animation. Width matches the drawer (75vw). */
  .zc-hdr__mobile-cta {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 75vw;
    display: flex !important;
    flex-direction: column;
    gap: clamp(8px, 1.5vw, 12px);
    padding: clamp(10px, 1.8vw, 14px) clamp(12px, 2.5vw, 16px) calc(clamp(12px, 2vw, 16px) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, var(--zc-charcoal) 0%, var(--zc-deep) 100%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(207, 138, 63, 0.18);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
    z-index: 10000;            /* above drawer (9999), under modals */
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    visibility: hidden;
  }
  body.zc-drawer-open .zc-hdr__mobile-cta {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
  }
  /* Reserve plenty of room at the bottom of the drawer scroll area —
     CTA dock is ~80–95px tall and we want the socials row to clear it
     comfortably (≈40–60px breathing space) when scrolled to the end. */
  .zc-hdr__nav { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  .zc-hdr__mobile-cta-row {
    display: flex;
    gap: clamp(7px, 1.5vw, 11px);
    width: 100%;
  }
  .zc-hdr__mobile-book {
    flex: 1 1 0;
    min-width: 0;             /* prevents one button shoving the other off-screen */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, 1.4vw, 10px);
    /* Bigger vertical hit area — was reading as a thin bar, which
       made the CTA hard to tap. Bumped both axes so the button
       looks like a real primary action in the drawer footer. */
    padding: 14px clamp(10px, 1.8vw, 16px);
    min-height: 48px;
    border-radius: clamp(10px, 1.6vw, 14px);
    font-family: var(--zc-f-heading);
    font-size: clamp(12px, 0.7vw + 9px, 14px);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .zc-hdr__mobile-book i { font-size: 14px; }
  .zc-hdr__mobile-book--primary {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    box-shadow: 0 8px 24px var(--zc-amber-a45);
  }
  .zc-hdr__mobile-book--primary:active {
    transform: scale(0.97);
    box-shadow: 0 4px 16px var(--zc-amber-a45);
  }
  .zc-hdr__mobile-book--primary:hover {
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber-dk));
    color: var(--zc-white);
  }
  .zc-hdr__mobile-book--secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
  }
  .zc-hdr__mobile-book--secondary:hover,
  .zc-hdr__mobile-book--secondary:active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--zc-amber-lt);
  }
  .zc-hdr__mobile-book i { font-size: clamp(12px, 1.3vw + 6px, 14px); }
}

@media (min-width: 992px) {
  .zc-hdr__drawer-brand,
  .zc-hdr__drawer-divider,
  .zc-hdr__drawer-stats,
  .zc-hdr__drawer-contact,
  .zc-hdr__drawer-socials,
  .zc-hdr__nav-mob-ic,
  .zc-hdr__mobile-cta { display: none !important; }
}

@media (max-width: 380px) {
  .zc-hdr__logo { height: 32px; }
}

/* Topbar hide on mobile */
@media (max-width: 991px) {
  .zc-tb { display: none !important; }
}


/* ==========================================================================
   §15  LEGACY-CSS OVERRIDES (mobile)
   --------------------------------------------------------------------------
   The legacy /custom/css/style.css ships two rules that fight the new
   header at mobile widths:
     1. `body { margin-top: 60px }` — left over from when the old #header
        was position:fixed. With our new sticky .zc-hdr it just paints a
        60px white strip above the page.
     2. `#wrapper { overflow-x: hidden }` — establishes a clipping/scroll
        context that silently breaks `position: sticky` on every
        descendant. That's why the new header stops sticking on mobile.

   We can't safely edit /custom/css/style.css (it's huge and shared), so
   we neutralise both rules here. core.css is the last sheet loaded by
   index.php, so source-order beats the legacy rules at equal specificity.
   `overflow-x: clip` keeps the same visual horizontal-scroll guard
   without creating a scroll container, so sticky continues to work.
   ========================================================================== */
@media (max-width: 991px) {
  body { margin-top: 0 !important; }
  #wrapper { overflow-x: clip; }
}

/* Belt-and-braces: prevent ANY descendant from forcing a horizontal
   scrollbar on the document. `overflow-x: clip` (vs `hidden`) does NOT
   establish a scroll container or a containing block for fixed-pos
   descendants, so `position: sticky` and `position: fixed` keep working
   exactly as before. Applies on every viewport width. */
html { overflow-x: clip; }


/* ==========================================================================
   §16  COLOR LOCKS  (legacy <a> / .btn rules in style.css were forcing
        most header text back to charcoal/black). We use !important on the
        few selectors that actually matter so the design stays correct
        without us having to chase down dozens of legacy rules.
   ========================================================================== */

/* Desktop: solid dark "Book Appointment" pill */
.zc-hdr__book-btn,
.zc-hdr__book-btn:hover,
.zc-hdr__book-btn:focus,
.zc-hdr__book-btn:active        { color: var(--zc-white) !important; }
.zc-hdr__book-main i            { color: var(--zc-amber-lt) !important; }
.zc-hdr__book:hover .zc-hdr__book-main i { color: var(--zc-amber) !important; }
.zc-hdr__book-caret i           { color: var(--zc-w75) !important; }
.zc-hdr__book:hover .zc-hdr__book-caret i { color: var(--zc-amber-lt) !important; }
.zc-hdr__book-foot-num,
.zc-hdr__book-foot-num:hover    { color: var(--zc-white) !important; }
.zc-hdr__book-foot-label        { color: var(--zc-w52) !important; }

/* Desktop nav text (legacy `a { color: ... }` was repainting it) */
.zc-hdr__nav-link               { color: var(--zc-charcoal) !important; }
.zc-hdr__nav-link:hover,
.zc-hdr__nav-item:hover > .zc-hdr__nav-link { color: var(--zc-amber-dk) !important; }
.zc-hdr__nav-link.is-active     { color: var(--zc-charcoal) !important; }

/* Desktop dropdown panels */
.zc-hdr__drop-link              { color: var(--zc-warm-dk) !important; }
.zc-hdr__drop-link:hover        { color: var(--zc-charcoal) !important; }
.zc-hdr__svc-link               { color: var(--zc-warm-dk) !important; }
.zc-hdr__svc-link:hover         { color: var(--zc-charcoal) !important; }
.zc-hdr__svc-cat-name,
.zc-hdr__know-article-title,
.zc-hdr__know-label,
.zc-hdr__book-opt-title         { color: var(--zc-charcoal) !important; }

/* Mobile drawer overrides — drawer is a dark panel, so light text wins */
@media (max-width: 991px) {
  .zc-hdr__nav-link             { color: rgba(255, 255, 255, 0.82) !important; }
  .zc-hdr__nav-link:hover,
  .zc-hdr__nav-link:active,
  .zc-hdr__nav-item.is-mobile-open > .zc-hdr__nav-link,
  .zc-hdr__nav-link.is-active   { color: var(--zc-amber-lt) !important; }

  .zc-hdr__drop-link            { color: var(--zc-w52) !important; }
  .zc-hdr__drop-link:hover      { color: var(--zc-amber-lt) !important; }

  .zc-hdr__svc-link             { color: var(--zc-w52) !important; }
  .zc-hdr__svc-link:hover       { color: var(--zc-amber-lt) !important; }
  .zc-hdr__svc-cat-name,
  .zc-hdr__know-label,
  .zc-hdr__know-article-title   { color: var(--zc-w94) !important; }
  .zc-hdr__svc-cat-count,
  .zc-hdr__know-sub,
  .zc-hdr__know-article-meta    { color: var(--zc-w36) !important; }

  .zc-hdr__svc-feat-title,
  .zc-hdr__know-footer-title    { color: var(--zc-white) !important; }
  .zc-hdr__svc-feat-desc        { color: var(--zc-w52) !important; }

  .zc-hdr__drawer-contact-row   { color: var(--zc-w94) !important; }
  .zc-hdr__drawer-soc           { color: var(--zc-amber) !important; }
  .zc-hdr__drawer-soc:hover,
  .zc-hdr__drawer-soc:active    { color: var(--zc-white) !important; }
  .zc-hdr__drawer-contact-val   { color: rgba(255, 255, 255, 0.85) !important; }
  .zc-hdr__drawer-contact-label { color: rgba(255, 255, 255, 0.32) !important; }

  /* Sticky footer CTA inside the drawer */
  .zc-hdr__mobile-book {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .zc-hdr__mobile-book--primary,
  .zc-hdr__mobile-book--primary:hover,
  .zc-hdr__mobile-book--primary:active   {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)) !important;
    color: var(--zc-white) !important;
  }
  .zc-hdr__mobile-book--secondary        {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(207, 138, 63, 0.30) !important;
    color: rgba(255, 255, 255, 0.90) !important;
  }
  .zc-hdr__mobile-book--secondary:hover,
  .zc-hdr__mobile-book--secondary:active {
    background: rgba(207, 138, 63, 0.18) !important;
    color: var(--zc-amber-lt) !important;
  }
}


/* ==========================================================================
   §16b  EXTRA OVERRIDES  (legacy padding / span-color rules were
         clobbering specific surfaces — language popup options, mega-menu
         title accents, mobile book-sheet titles).
   ========================================================================== */

/* Language popup option rows (legacy `button` rules were eating padding) */
.zc-lang__opt {
  padding: 8px 12px !important;
  font-family: var(--zc-f-body) !important;
  display: flex !important;
  align-items: center !important;
}

/* Mega-menu title accent spans (legacy heading-color was inherited
   into <span> children with high specificity) */
.zc-hdr__svc-title-accent       { color: var(--zc-amber)    !important; font-weight: 500 !important; }
.zc-hdr__svc-feat-title-accent  { color: var(--zc-amber-lt) !important; font-weight: 400 !important; }
.zc-hdr__svc-title              { color: var(--zc-charcoal) !important; }
.zc-hdr__svc-feat-title         { color: var(--zc-white)    !important; }

/* Book bottom-sheet titles on mobile (legacy color rules were repainting
   the white headline back to charcoal/black) */
@media (max-width: 991px) {
  .zc-hdr__svc-title              { color: var(--zc-w94)    !important; }
  .zc-hdr__book-opt-title         { color: var(--zc-white)  !important; font-size: 15px !important; }
  .zc-hdr__book-opt-tag           { color: var(--zc-amber-lt) !important; }
  .zc-hdr__book-opt-desc          { color: rgba(255,255,255,0.55) !important; }
  .zc-hdr__book-foot-num,
  .zc-hdr__book-foot-num:hover    { color: var(--zc-white) !important; }
  .zc-hdr__book-foot-label        { color: var(--zc-amber-lt) !important; }
}


/* ==========================================================================
   §17  SITE-WIDE LINK COLOR GUARD
   --------------------------------------------------------------------------
   /custom/css/style.css line 2 sets --cnvs-themecolor to #000, and the
   legacy /style.css then paints every bare <a> via
       a { color: var(--cnvs-link-color); }
   which resolves to --cnvs-themecolor — i.e. pure black. That left
   anchor links across the home page painted black, especially obvious
   on mobile where many component overrides fall away. We re-point the
   link tokens at the brand amber palette so all bare <a> tags inherit
   a visible color. We deliberately do NOT touch --cnvs-themecolor
   itself — that token is also used for buttons, borders, and accents
   elsewhere on the legacy site.
   ========================================================================== */
:root {
  --cnvs-link-color:       #cf8a3f;  /* var(--zc-amber)    */
  --cnvs-link-hover-color: #a86828;  /* var(--zc-amber-dk) */
}


/* ==========================================================================
   §18  FOOTER COMPONENT  (.zc-ftr)
   --------------------------------------------------------------------------
   The dark footer band that ships with the v7 layout. Markup lives in
   /file/common/footer.php; the lifted "Begin your journey" CTA card lives
   in /file/common/subfooter.php. Tokens are inherited from §1 (root).
   Sections:
     §18.1  Footer shell (gradient + decorative rings)
     §18.2  CTA card "Begin your journey"   (from subfooter.php)
     §18.3  Main 5-column grid              (Brand / Services / Patient
                                             Care / Knowledge / Connect)
     §18.4  Newsletter signup
     §18.5  Bottom bar
     §18.6  Responsive overrides (1280 / 991 / 600 / 380 + accordion)
   ========================================================================== */

/* ---------- §18.-1  Layout escape hatch -----------------------------------
   The legacy theme wraps the footer in `#wrapper` (with box-shadow) and
   places it after `<section id="content">` which has its own
   `margin: var(--cnvs-section-margin) 0`. We hard-pin the footer's own
   spacing so it matches the standalone HTML 1:1.

   IMPORTANT: We DROP `overflow: hidden` from .zc-ftr because the CTA
   card uses `margin-top: -80px` to lift above the footer top — and
   overflow:hidden was clipping the top half of the lifted card, leaving
   a white strip and only half the CTA visible. The decorative concentric
   ring at top-right (.zc-ftr::after at top:-200px right:-200px) is
   instead contained by `body { overflow-x: hidden }` which the legacy
   /custom/css/style.css already enforces.
   --------------------------------------------------------------------------- */
.zc-ftr {
  margin-bottom: 0 !important;
  padding: 0 !important;             /* spacing comes from inner sections */
  width: 100% !important;
  display: block !important;
  overflow: visible !important;      /* ← key fix: don't clip the lifted CTA */
}

/* The decorative concentric ring (.zc-ftr::after at top:-200px right:-200px)
   was a subtle motif that REQUIRED overflow:hidden on .zc-ftr to clip its
   overflow. Since we now need overflow:visible for the lifted CTA, the
   ring would extend visibly into the page above and viewport-right, which
   is worse than just dropping it. The hairline gold edge (.zc-ftr::before)
   stays — it sits flush at the footer top and doesn't need clipping. */
.zc-ftr::after { display: none !important; }

/* ---------- §18.0  Scoped reset (defeats Bootstrap base styles) -----------
   The legacy /style.css ships Bootstrap-style defaults that leak in:
     h2 { margin-bottom: .5rem }   p { margin-bottom: 1rem }
     ul { padding-left: 2rem }     a { text-decoration: underline }
   STRATEGY:
     1. Use a UNIVERSAL `.zc-ftr *` reset for margin/padding (no !important).
        Specificity (0,1,0) beats bare Bootstrap rules like `p` (0,0,1).
        Component classes (.zc-ftr__cta-title etc.) come AFTER this rule
        in source order and have the same specificity, so they naturally
        override the reset where they set their own margin/padding.
     2. `!important` only on properties that custom legacy rules might
        target with higher specificity (list-style, text-decoration,
        font-style on <i>, button outline, input shadow).
   --------------------------------------------------------------------------- */
.zc-ftr,
.zc-ftr *,
.zc-ftr *::before,
.zc-ftr *::after { box-sizing: border-box; }

.zc-ftr * {
  margin: 0;
  padding: 0;
}

.zc-ftr ul, .zc-ftr ol, .zc-ftr li { list-style: none !important; }

.zc-ftr a { text-decoration: none !important; }

.zc-ftr button {
  border: none !important;
  outline: none !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: none;     /* component classes can override */
  font: inherit;
}

.zc-ftr img { max-width: 100%; display: block; height: auto; }

.zc-ftr input,
.zc-ftr input:focus,
.zc-ftr input:hover {
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.zc-ftr i,
.zc-ftr em,
.zc-ftr cite { font-style: normal !important; }


/* ---------- §18.1  Shell --------------------------------------------------- */
.zc-ftr {
  position: relative;
  width: 100%;
  font-family: var(--zc-f-body);
  color: var(--zc-w75);
  background:
    radial-gradient(ellipse at 15% 0%,  rgba(207,138,63,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(46,75,113,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(245,211,163,0.04) 0%, transparent 70%),
    linear-gradient(180deg, var(--zc-deep) 0%, #181208 30%, #14110a 70%, #0d0905 100%);
  overflow: hidden;
  isolation: isolate;
  margin-top: 80px;
}
.zc-ftr::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(207,138,63,0) 8%,
    rgba(207,138,63,0.45) 50%,
    rgba(207,138,63,0) 92%, transparent 100%);
  z-index: 2;
}
.zc-ftr::after {
  content: '';
  position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px;
  border: 1px solid rgba(207,138,63,0.06);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
  box-shadow:
    inset 0 0 0 60px transparent,
    inset 0 0 0 61px rgba(207,138,63,0.04),
    inset 0 0 0 120px transparent,
    inset 0 0 0 121px rgba(207,138,63,0.03);
}
.zc-ftr__inner { position: relative; z-index: 1; }

/* ---------- §18.2  CTA card (from subfooter.php) -------------------------- */
.zc-ftr__cta-band {
  position: relative;
  padding: 0 var(--zc-pad-x);
  margin-top: -80px;
  margin-bottom: clamp(48px, 7vw, 80px);
  z-index: 5;
}
.zc-ftr__cta {
  position: relative; width: 100%;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 80px);
  border-radius: clamp(20px, 2.4vw, 28px);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,211,163,0.14) 0%, transparent 60%),
    linear-gradient(160deg, var(--zc-pearl) 0%, var(--zc-snow) 100%);
  border: 1px solid var(--zc-amber-a18);
  box-shadow:
    0 32px 80px rgba(18,12,4,0.40),
    0 12px 28px rgba(46,75,113,0.16),
    inset 0 1px 0 rgba(255,255,255,0.92);
  overflow: hidden;
}
.zc-ftr__cta::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 280px; height: 280px;
  border: 1px solid var(--zc-amber-a18); border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 30px transparent,
    inset 0 0 0 31px var(--zc-amber-a08);
}
.zc-ftr__cta::after {
  content: '';
  position: absolute; bottom: -100px; left: -100px;
  width: 240px; height: 240px;
  border: 1px solid var(--zc-amber-a08); border-radius: 50%;
  pointer-events: none;
}
.zc-ftr__cta-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--zc-f-heading);
  font-size: clamp(9.5px, 1vw + 5px, 11px);
  font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--zc-amber-dk);
  margin-bottom: 18px;
  padding: 7px 18px 7px 14px;
  background: var(--zc-amber-a08);
  border: 1px solid var(--zc-amber-a18);
  border-radius: 999px;
}
.zc-ftr__cta-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--zc-amber);
  box-shadow: 0 0 10px var(--zc-amber-a45);
}
.zc-ftr__cta-title {
  font-family: var(--zc-f-display);
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 400; color: var(--zc-charcoal);
  letter-spacing: -1.5px; line-height: 1.1;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.zc-ftr__cta-title-accent { color: var(--zc-amber); font-weight: 500; }
.zc-ftr__cta-desc {
  font-family: var(--zc-f-body);
  font-size: clamp(13.5px, 1.2vw + 6px, 16px);
  color: var(--zc-warm-dk); line-height: 1.7;
  max-width: 580px; margin: 0 auto clamp(28px, 4vw, 40px);
  letter-spacing: 0.1px; position: relative; z-index: 1;
}
.zc-ftr__cta-actions {
  display: inline-flex; align-items: center;
  gap: clamp(12px, 2vw, 20px);
  flex-wrap: wrap; justify-content: center;
  position: relative; z-index: 1;
}
.zc-ftr__cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: clamp(50px, 6.5vw, 60px);
  padding: 0 clamp(24px, 3.5vw, 36px);
  border-radius: clamp(12px, 1.6vw, 16px);
  font-family: var(--zc-f-heading);
  font-size: clamp(12.5px, 1.2vw + 6px, 14px);
  font-weight: 700; letter-spacing: 0.6px;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform 0.4s var(--zc-ease-spring), box-shadow 0.4s var(--zc-ease);
}
.zc-ftr__cta-btn--primary {
  background: linear-gradient(135deg, var(--zc-charcoal) 0%, var(--zc-deep) 50%, var(--zc-charcoal) 100%);
  background-size: 200% 200%; background-position: 0% 0%;
  color: var(--zc-white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 8px 24px rgba(26,18,8,0.30),
    0 2px 6px  rgba(26,18,8,0.15);
}
.zc-ftr__cta-btn--primary:hover {
  background-position: 100% 100%; transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 16px 36px rgba(26,18,8,0.40),
    0 4px 12px rgba(26,18,8,0.18),
    0 0 0 4px rgba(207,138,63,0.10);
}
.zc-ftr__cta-btn--primary i { font-size: 14px; color: var(--zc-amber-lt); transition: transform 0.4s var(--zc-ease-spring); }
.zc-ftr__cta-btn--primary:hover i { transform: translateX(3px); }
.zc-ftr__cta-btn--secondary {
  background: transparent; color: var(--zc-charcoal);
  border: 1.5px solid var(--zc-amber-a35);
}
.zc-ftr__cta-btn--secondary:hover {
  background: var(--zc-amber); border-color: var(--zc-amber-dk);
  color: var(--zc-white); transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--zc-amber-a35);
}
.zc-ftr__cta-btn--secondary i { font-size: 14px; color: var(--zc-amber-dk); transition: transform 0.4s var(--zc-ease-spring), color 0.3s ease; }
.zc-ftr__cta-btn--secondary:hover i { color: var(--zc-white); transform: rotate(-15deg); }

/* ---------- §18.3  Main 5-column grid ------------------------------------- */
.zc-ftr__main { padding: 0 var(--zc-pad-x); margin-bottom: clamp(40px, 5vw, 64px); }
.zc-ftr__main-inner {
  width: 100%; display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 3.5vw, 56px);
}

/* Brand column */
.zc-ftr__brand { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 24px); min-width: 0; }
.zc-ftr__brand-link { display: inline-block; }
.zc-ftr__brand-logo {
  display: inline-block;
  height: clamp(46px, 5.5vw, 58px); width: auto;
  filter: brightness(0) invert(1) sepia(0.18) saturate(2.2) hue-rotate(-16deg) brightness(1.05);
  transition: opacity 0.3s ease;
}
.zc-ftr__brand-link:hover .zc-ftr__brand-logo { opacity: 0.85; }
.zc-ftr__brand-tag {
  font-family: var(--zc-f-heading);
  font-size: clamp(9.5px, 0.9vw + 5px, 10.5px);
  font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--zc-amber);
  display: flex; align-items: center; gap: 10px;
}
.zc-ftr__brand-tag::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--zc-amber-a25), transparent);
}
.zc-ftr__brand-desc {
  font-family: var(--zc-f-body);
  font-size: clamp(13px, 1.1vw + 6.5px, 14.5px);
  color: var(--zc-w75); line-height: 1.75;
  letter-spacing: 0.1px; max-width: 380px;
}
.zc-ftr__brand-contact { display: flex; flex-direction: column; gap: 12px; }
.zc-ftr__brand-contact-row {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0; transition: transform 0.4s var(--zc-ease-spring);
}
.zc-ftr__brand-contact-row:hover { transform: translateX(4px); }
.zc-ftr__brand-contact-ic {
  width: clamp(34px, 4vw, 40px); height: clamp(34px, 4vw, 40px);
  background: rgba(207,138,63,0.10);
  border: 1px solid rgba(207,138,63,0.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--zc-amber);
  font-size: clamp(12px, 1.2vw + 5px, 14px);
  flex-shrink: 0;
  transition: all 0.4s var(--zc-ease-spring);
}
.zc-ftr__brand-contact-row:hover .zc-ftr__brand-contact-ic {
  background: var(--zc-amber); border-color: var(--zc-amber-dk);
  color: var(--zc-white); box-shadow: 0 6px 16px var(--zc-amber-a35);
}
.zc-ftr__brand-contact-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zc-ftr__brand-contact-label {
  font-family: var(--zc-f-heading);
  font-size: clamp(8.5px, 0.8vw + 4.5px, 9.5px);
  font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--zc-w36);
}
.zc-ftr__brand-contact-val {
  font-family: var(--zc-f-body);
  font-size: clamp(13px, 1.1vw + 6.5px, 14.5px);
  font-weight: 500; color: var(--zc-w94);
  letter-spacing: 0.1px;
  transition: color 0.25s ease;
}
.zc-ftr__brand-contact-row:hover .zc-ftr__brand-contact-val { color: var(--zc-amber-lt); }

/* Link columns */
.zc-ftr__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zc-ftr__col-head {
  /* Bootstrap's `button` and `.btn` rules in legacy /style.css set
     font-family / font-size / font-weight / line-height / padding on
     <button> elements with enough specificity to win. We pin every
     typography property with !important so the column heads always
     match the design. */
  font-family: var(--zc-f-heading) !important;
  font-size: clamp(10px, 0.9vw + 5.5px, 11.5px) !important;
  font-weight: 700 !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: var(--zc-amber) !important;
  margin: 0 0 4px 0 !important;
  padding: 0 0 14px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--zc-w08) !important;
  background: none !important;
  position: relative;
  width: 100%;
  text-align: left;
  cursor: default;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
}
.zc-ftr__col-head::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 28px; height: 1px; background: var(--zc-amber);
  transition: width 0.3s var(--zc-ease);
}
.zc-ftr__col-chev {
  font-size: 11px; color: var(--zc-amber); opacity: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(207,138,63,0.10);
  border: 1px solid rgba(207,138,63,0.18);
  transition: transform 0.4s var(--zc-ease-spring),
              background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
@media (min-width: 992px) {
  .zc-ftr__col > .zc-ftr__list,
  .zc-ftr__col > .zc-ftr__socials { display: flex !important; }
}
.zc-ftr__list { display: flex; flex-direction: column; gap: 2px; }
.zc-ftr__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 0;
  font-family: var(--zc-f-body);
  font-size: clamp(12.5px, 1vw + 6px, 13.5px);
  font-weight: 400; letter-spacing: 0.1px;
  color: var(--zc-w75);
  position: relative;
  transition: color 0.3s ease, padding-left 0.4s var(--zc-ease-spring);
}
.zc-ftr__link > i {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--zc-amber); opacity: 0.75;
  flex-shrink: 0;
  transition: opacity 0.3s ease, transform 0.4s var(--zc-ease-spring), color 0.3s ease;
}
.zc-ftr__link:hover > i { opacity: 1; color: var(--zc-amber-lt); transform: translateX(2px); }
.zc-ftr__link::before {
  content: ''; width: 0; height: 1px;
  background: var(--zc-amber); opacity: 0;
  transition: width 0.4s var(--zc-ease-spring), opacity 0.3s ease;
}
.zc-ftr__link:has(> i)::before { display: none; }
.zc-ftr__link:hover { color: var(--zc-amber-lt); padding-left: 4px; }
.zc-ftr__link:hover::before { width: 14px; opacity: 1; }
.zc-ftr__link:has(> i):hover { padding-left: 0; }
.zc-ftr__link--all {
  margin-top: 8px; padding: 7px 0;
  color: var(--zc-amber); font-weight: 600; letter-spacing: 0.4px;
  font-size: clamp(11.5px, 1vw + 5.5px, 12.5px);
}
.zc-ftr__link--all i { font-size: 9px; transition: transform 0.4s var(--zc-ease-spring); }
.zc-ftr__link--all:hover { color: var(--zc-amber-lt); }
.zc-ftr__link--all:hover i { transform: translateX(4px); }
.zc-ftr__link--all::before { display: none; }
.zc-ftr__socials {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; flex-wrap: wrap;
}
.zc-ftr__soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(36px, 4vw, 40px); height: clamp(36px, 4vw, 40px);
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--zc-w52);
  font-size: clamp(13px, 1.2vw + 5px, 14px);
  transition: all 0.4s var(--zc-ease-spring);
}
.zc-ftr__soc:hover {
  background: var(--zc-amber); border-color: var(--zc-amber-dk);
  color: var(--zc-white); transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--zc-amber-a35);
}

/* ---------- §18.4  Newsletter --------------------------------------------- */
.zc-ftr__newsletter { padding: 0 var(--zc-pad-x); margin-bottom: clamp(32px, 4vw, 48px); }
.zc-ftr__newsletter-inner {
  width: 100%;
  padding: clamp(28px, 3.6vw, 40px) clamp(24px, 3.5vw, 40px);
  border-radius: clamp(16px, 1.8vw, 20px);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(207,138,63,0.15);
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 3vw, 40px); align-items: center;
}
.zc-ftr__newsletter-text { display: flex; flex-direction: column; gap: 6px; }
.zc-ftr__newsletter-eyebrow {
  font-family: var(--zc-f-heading);
  font-size: clamp(9.5px, 1vw + 5px, 10.5px);
  font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--zc-amber);
}
.zc-ftr__newsletter-title {
  font-family: var(--zc-f-display);
  font-size: clamp(18px, 1.8vw + 9px, 24px);
  font-weight: 500; color: var(--zc-w94);
  letter-spacing: -0.4px; line-height: 1.2;
}
.zc-ftr__newsletter-sub {
  font-family: var(--zc-f-body);
  font-size: clamp(12px, 1vw + 6px, 13.5px);
  color: var(--zc-w52); line-height: 1.5; margin-top: 2px;
}
.zc-ftr__newsletter-form {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 5px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.zc-ftr__newsletter-form:focus-within {
  border-color: var(--zc-amber-a45);
  background: rgba(255,255,255,0.08);
}
.zc-ftr__newsletter-input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 0 16px;
  font-family: var(--zc-f-body);
  font-size: clamp(13px, 1vw + 6px, 14px);
  font-weight: 400; color: var(--zc-w94); min-width: 0;
}
.zc-ftr__newsletter-input::placeholder { color: var(--zc-w36); letter-spacing: 0.1px; }
.zc-ftr__newsletter-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px clamp(20px, 2.5vw, 26px);
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
  border-radius: 10px; color: var(--zc-white);
  font-family: var(--zc-f-heading);
  font-size: clamp(11.5px, 1vw + 5.5px, 12.5px);
  font-weight: 700; letter-spacing: 0.6px; white-space: nowrap;
  box-shadow: 0 6px 18px var(--zc-amber-a35);
  transition: transform 0.4s var(--zc-ease-spring), box-shadow 0.4s ease;
}
.zc-ftr__newsletter-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber-dk));
  box-shadow: 0 12px 28px var(--zc-amber-a45);
}
.zc-ftr__newsletter-btn i { font-size: 11px; transition: transform 0.4s var(--zc-ease-spring); }
.zc-ftr__newsletter-btn:hover i { transform: translateX(3px); }

/* ---------- §18.5  Bottom bar --------------------------------------------- */
.zc-ftr__bottom { padding: 0 var(--zc-pad-x); border-top: 1px solid var(--zc-w08); }
.zc-ftr__bottom-inner {
  width: 100%; padding: clamp(20px, 2.4vw, 28px) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2.4vw, 28px); flex-wrap: wrap;
}
.zc-ftr__copy {
  font-family: var(--zc-f-body);
  font-size: clamp(11px, 1vw + 5px, 12.5px);
  color: var(--zc-w36); letter-spacing: 0.2px;
}
.zc-ftr__copy strong { color: var(--zc-w75); font-weight: 500; }
.zc-ftr__legal { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); flex-wrap: wrap; }
.zc-ftr__legal-link {
  font-family: var(--zc-f-body);
  font-size: clamp(11px, 1vw + 5px, 12.5px);
  color: var(--zc-w52); letter-spacing: 0.2px;
  transition: color 0.3s ease; position: relative;
}
.zc-ftr__legal-link:hover { color: var(--zc-amber-lt); }
.zc-ftr__legal-item:not(:last-child) .zc-ftr__legal-link::after {
  content: '';
  position: absolute;
  right: calc(-1 * clamp(7px, 1vw, 12px));
  top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--zc-w22);
}
.zc-ftr__made {
  font-family: var(--zc-f-accent);
  font-size: clamp(10.5px, 0.9vw + 5px, 11.5px);
  letter-spacing: 0.5px; color: var(--zc-w36);
  display: inline-flex; align-items: center; gap: 8px;
}
.zc-ftr__made i {
  color: var(--zc-amber); font-size: 11px;
  animation: zc-ftr-heart-pulse 2.4s ease-in-out infinite;
}
@keyframes zc-ftr-heart-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%      { transform: scale(1.18); opacity: 0.85; }
}

/* ---------- §18.6  Responsive --------------------------------------------- */
@media (max-width: 1280px) {
  .zc-ftr__main-inner { grid-template-columns: 1fr 1fr 1fr 1fr; gap: clamp(20px, 2.5vw, 36px); }
  .zc-ftr__brand {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; align-items: flex-start;
    gap: 24px 40px; padding-bottom: 28px; margin-bottom: 12px;
    border-bottom: 1px solid var(--zc-w08);
  }
  .zc-ftr__brand-tag, .zc-ftr__brand-link { flex-shrink: 0; }
  .zc-ftr__brand-desc {
    flex: 1 1 320px; min-width: 260px; max-width: 520px; margin-top: 4px;
  }
  .zc-ftr__brand-contact {
    flex-direction: row; flex-wrap: wrap;
    gap: 12px 28px; flex: 1 1 100%; margin-top: 4px;
  }
}
@media (max-width: 991px) {
  .zc-ftr { margin-top: 64px; }
  .zc-ftr__cta-band { margin-top: -64px; }
  .zc-ftr__main-inner { grid-template-columns: 1fr; gap: 0; }
  .zc-ftr__brand {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    column-gap: 14px; row-gap: 12px;
    padding-bottom: 16px; margin-bottom: 0;
    border-bottom: 1px solid var(--zc-w08);
  }
  .zc-ftr__brand-link { flex: 0 0 auto; }
  .zc-ftr__brand-tag  { flex: 1 1 auto; margin: 0; min-width: 0; }
  .zc-ftr__brand-desc { flex: 1 1 100%; margin: 0; max-width: none; }
  .zc-ftr__brand-contact {
    flex: 1 1 100%; flex-direction: row; gap: 8px; margin: 0;
  }
  .zc-ftr__brand-contact-row {
    flex: 1 1 0; min-width: 0;
    padding: 10px 12px; gap: 9px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(207,138,63,0.14);
    border-radius: 11px;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.4s var(--zc-ease-spring);
  }
  .zc-ftr__brand-contact-row:hover,
  .zc-ftr__brand-contact-row:active {
    background: rgba(207,138,63,0.08);
    border-color: rgba(207,138,63,0.28);
    transform: none;
  }
  .zc-ftr__brand-contact-ic { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
  .zc-ftr__brand-contact-text { gap: 1px; min-width: 0; overflow: hidden; }
  .zc-ftr__brand-contact-label { font-size: 8px; letter-spacing: 1.3px; }
  .zc-ftr__brand-contact-val {
    font-size: 11.5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; display: block;
  }
  .zc-ftr__newsletter-inner { grid-template-columns: 1fr; gap: 20px; }

  /* Mobile accordion */
  .zc-ftr__col {
    gap: 0; border-bottom: 1px solid var(--zc-w08);
    padding: 0; margin: 0;
  }
  .zc-ftr__col-head {
    cursor: pointer !important;
    margin: 0 !important;
    padding: 16px 4px !important;
    border-bottom: none !important;
    transition: color 0.25s ease;
  }
  .zc-ftr__col-head::after { display: none; }
  .zc-ftr__col-head:active { color: var(--zc-amber-lt) !important; }
  .zc-ftr__col-chev { opacity: 1; }
  .zc-ftr__col.is-open > .zc-ftr__col-head { color: var(--zc-amber-lt); }
  .zc-ftr__col.is-open .zc-ftr__col-chev {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: var(--zc-amber-dk); color: var(--zc-white);
    transform: rotate(180deg);
    box-shadow: 0 4px 14px var(--zc-amber-a45);
  }
  .zc-ftr__col > .zc-ftr__list,
  .zc-ftr__col > .zc-ftr__socials {
    max-height: 0; overflow: hidden; opacity: 0;
    padding: 0; margin: 0;
    transition:
      max-height 0.45s var(--zc-ease),
      padding 0.45s var(--zc-ease),
      opacity 0.3s ease;
  }
  .zc-ftr__col.is-open > .zc-ftr__list {
    max-height: 600px; opacity: 1; padding: 4px 4px 14px 4px;
  }
  .zc-ftr__col.is-open > .zc-ftr__socials {
    max-height: 100px; opacity: 1; padding: 4px 4px 16px 4px;
  }
  .zc-ftr__link {
    padding: 10px 8px; margin: 0 -8px;
    border-radius: 7px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.2s ease;
  }
  .zc-ftr__link:hover { padding-left: 8px; }
  .zc-ftr__link:active { background: rgba(255,255,255,0.04); color: var(--zc-amber-lt); }
  .zc-ftr__link::before { display: none; }
}
@media (max-width: 600px) {
  .zc-ftr { margin-top: 32px; }
  .zc-ftr__cta-band { margin-top: -28px; margin-bottom: 24px; }
  .zc-ftr__cta { padding: 24px 18px; border-radius: 16px; }
  .zc-ftr__cta-eyebrow {
    font-size: 8.5px; letter-spacing: 1.6px;
    padding: 5px 11px 5px 9px; margin-bottom: 10px; gap: 7px;
  }
  .zc-ftr__cta-eyebrow::before { width: 5px; height: 5px; }
  .zc-ftr__cta-title { font-size: 21px; letter-spacing: -0.3px; line-height: 1.22; margin-bottom: 8px; }
  .zc-ftr__cta-desc  { font-size: 12px; line-height: 1.5; margin-bottom: 14px; }
  .zc-ftr__main-inner { grid-template-columns: 1fr; gap: 0; }
  .zc-ftr__brand-logo { height: 36px; }
  .zc-ftr__brand-tag  { font-size: 9px; letter-spacing: 1.6px; gap: 8px; }
  .zc-ftr__brand-desc { font-size: 12.5px; line-height: 1.55; }
  .zc-ftr__brand-contact { gap: 7px; }
  .zc-ftr__brand-contact-row { padding: 9px 10px; gap: 8px; border-radius: 10px; }
  .zc-ftr__brand-contact-ic  { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; }
  .zc-ftr__brand-contact-label { font-size: 7.5px; letter-spacing: 1.2px; }
  .zc-ftr__brand-contact-val   { font-size: 11px; }
  .zc-ftr__col-head { font-size: 10.5px !important; letter-spacing: 1.8px !important; padding: 16px 4px 16px 2px !important; }
  .zc-ftr__link { font-size: 13px; padding: 10px 8px; gap: 9px; }
  .zc-ftr__link > i { width: 16px; height: 16px; font-size: 11px; }
  .zc-ftr__link--all { font-size: 11.5px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--zc-w08); }
  .zc-ftr__list { padding: 4px 0 14px 0; gap: 0; }
  .zc-ftr__soc  { width: 34px; height: 34px; font-size: 12px; }
  .zc-ftr__newsletter-inner   { padding: 22px 18px; border-radius: 14px; gap: 14px; }
  .zc-ftr__newsletter-eyebrow { font-size: 8.5px; letter-spacing: 1.8px; }
  .zc-ftr__newsletter-title   { font-size: 17px; letter-spacing: -0.2px; }
  .zc-ftr__newsletter-sub     { font-size: 11.5px; line-height: 1.45; }
  .zc-ftr__newsletter-form    { flex-direction: column; padding: 5px; gap: 5px; border-radius: 12px; }
  .zc-ftr__newsletter-input   { padding: 11px 13px; font-size: 12.5px; }
  .zc-ftr__newsletter-btn     { width: 100%; justify-content: center; padding: 11px; font-size: 11px; }
  .zc-ftr__cta-actions {
    width: 100%; flex-direction: row; gap: 8px; flex-wrap: nowrap;
  }
  .zc-ftr__cta-btn {
    flex: 1 1 0; min-width: 0; justify-content: center;
    height: 44px; padding: 0 12px; font-size: 11.5px;
    letter-spacing: 0.3px; border-radius: 10px; gap: 8px;
  }
  .zc-ftr__cta-btn i { font-size: 12px; flex-shrink: 0; }
  .zc-ftr__cta-btn-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .zc-ftr__bottom-inner {
    flex-direction: column; align-items: flex-start; gap: 12px; text-align: left;
  }
  .zc-ftr__copy        { font-size: 11px; }
  .zc-ftr__legal-link  { font-size: 11px; }
  .zc-ftr__legal       { gap: 12px; }
  .zc-ftr__made        { font-size: 10.5px; }
}
@media (max-width: 380px) {
  .zc-ftr { margin-top: 24px; }
  .zc-ftr__cta-band { margin-top: -24px; margin-bottom: 20px; }
  .zc-ftr__cta { padding: 22px 14px; border-radius: 14px; }
  .zc-ftr__cta-eyebrow { font-size: 8px; letter-spacing: 1.4px; padding: 4px 9px 4px 8px; }
  .zc-ftr__cta-title  { font-size: 19px; letter-spacing: -0.2px; }
  .zc-ftr__cta-desc   { font-size: 11.5px; line-height: 1.5; margin-bottom: 12px; }
  .zc-ftr__cta-actions { gap: 6px; }
  .zc-ftr__cta-btn    { height: 42px; font-size: 11px; padding: 0 8px; gap: 6px; border-radius: 9px; }
  .zc-ftr__cta-btn i  { font-size: 12px; }
  .zc-ftr__brand-logo { height: 34px; }
  .zc-ftr__brand-tag  { font-size: 8.5px; letter-spacing: 1.4px; }
  .zc-ftr__brand-desc { font-size: 11.5px; line-height: 1.5; }
  .zc-ftr__brand-contact { gap: 6px; }
  .zc-ftr__brand-contact-row { padding: 8px 9px; gap: 7px; border-radius: 9px; }
  .zc-ftr__brand-contact-ic  { width: 26px; height: 26px; font-size: 10px; border-radius: 6px; }
  .zc-ftr__brand-contact-label { font-size: 7px; letter-spacing: 1px; }
  .zc-ftr__brand-contact-val   { font-size: 10.5px; }
  .zc-ftr__col-head { font-size: 10px !important; letter-spacing: 1.4px !important; padding: 14px 4px 14px 2px !important; }
  .zc-ftr__link { font-size: 12.5px; padding: 9px 8px; gap: 8px; }
  .zc-ftr__link > i { width: 15px; height: 15px; font-size: 10.5px; }
  .zc-ftr__link--all { font-size: 11px; }
  .zc-ftr__list { padding: 2px 4px 12px 4px; }
  .zc-ftr__soc  { width: 32px; height: 32px; font-size: 11px; }
  .zc-ftr__newsletter-inner { padding: 18px 14px; border-radius: 12px; gap: 12px; }
  .zc-ftr__newsletter-title { font-size: 16px; }
  .zc-ftr__newsletter-sub   { font-size: 11px; }
  .zc-ftr__newsletter-input { padding: 10px 12px; font-size: 12px; }
  .zc-ftr__newsletter-btn   { padding: 10px; font-size: 10.5px; }
  .zc-ftr__legal { gap: 10px; }
  .zc-ftr__legal-link::after { display: none; }
  .zc-ftr__copy { font-size: 10.5px; }
  .zc-ftr__legal-link { font-size: 10.5px; }
  .zc-ftr__made { font-size: 10px; }
}


/* ==========================================================================
   §18.7  CTA card — COMPACT override
   --------------------------------------------------------------------------
   The original CTA card was tuned for a hero-scale moment (52px display
   title, 72px vertical padding). User feedback: too big, want it 50/50
   inside/outside the footer. This block tightens every dimension and
   pins the lift to ~half the new card height at each breakpoint.
   Layered AFTER §18.2 / §18.6 so it wins by source order.
   ========================================================================== */

/* ---- Desktop (≥1281px) — main card ---- */
.zc-ftr        { margin-top: 100px !important; }   /* must match |lift| */
.zc-ftr__cta-band {
  margin-top: -100px !important;                   /* 50% of ~200px card */
  margin-bottom: clamp(28px, 4vw, 48px) !important;
}
.zc-ftr__cta {
  padding: clamp(22px, 3vw, 36px) clamp(20px, 4vw, 56px) !important;
  border-radius: clamp(14px, 1.6vw, 20px) !important;
}
.zc-ftr__cta-eyebrow {
  font-size: clamp(9px, 0.8vw + 4.5px, 10px) !important;
  letter-spacing: 2.2px !important;
  margin-bottom: 10px !important;
  padding: 5px 13px 5px 10px !important;
  gap: 8px !important;
}
.zc-ftr__cta-eyebrow::before { width: 5px !important; height: 5px !important; }
.zc-ftr__cta-title {
  font-size: clamp(20px, 2.6vw + 4px, 32px) !important;
  letter-spacing: -0.6px !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
}
.zc-ftr__cta-desc {
  font-size: clamp(12.5px, 0.9vw + 5px, 14px) !important;
  line-height: 1.55 !important;
  max-width: 520px !important;
  margin: 0 auto clamp(16px, 2vw, 22px) !important;
}
.zc-ftr__cta-actions { gap: clamp(8px, 1.2vw, 14px) !important; }
.zc-ftr__cta-btn {
  height: clamp(40px, 4.5vw, 46px) !important;
  padding: 0 clamp(16px, 2.4vw, 24px) !important;
  font-size: clamp(11.5px, 0.9vw + 5px, 13px) !important;
  border-radius: clamp(9px, 1.1vw, 11px) !important;
  gap: 9px !important;
}
.zc-ftr__cta-btn i { font-size: 12.5px !important; }

/* ---- Tablet (≤991px) ---- */
@media (max-width: 991px) {
  .zc-ftr        { margin-top: 80px !important; }
  .zc-ftr__cta-band {
    margin-top: -80px !important;
    margin-bottom: 28px !important;
  }
  .zc-ftr__cta { padding: 22px 22px !important; border-radius: 16px !important; }
  .zc-ftr__cta-title { font-size: 22px !important; margin-bottom: 6px !important; }
  .zc-ftr__cta-desc  { font-size: 12.5px !important; margin-bottom: 14px !important; }
  .zc-ftr__cta-btn   { height: 42px !important; padding: 0 16px !important; font-size: 12px !important; }
}

/* ---- Mobile (≤600px) ---- */
@media (max-width: 600px) {
  .zc-ftr        { margin-top: 60px !important; }
  .zc-ftr__cta-band {
    margin-top: -60px !important;
    margin-bottom: 22px !important;
  }
  .zc-ftr__cta { padding: 18px 14px !important; border-radius: 14px !important; }
  .zc-ftr__cta-eyebrow {
    font-size: 8px !important;
    letter-spacing: 1.4px !important;
    margin-bottom: 8px !important;
    padding: 4px 9px 4px 8px !important;
  }
  .zc-ftr__cta-title { font-size: 17px !important; margin-bottom: 6px !important; line-height: 1.2 !important; }
  .zc-ftr__cta-desc  { font-size: 11.5px !important; margin-bottom: 12px !important; line-height: 1.45 !important; }
  .zc-ftr__cta-btn   { height: 38px !important; padding: 0 10px !important; font-size: 11px !important; gap: 6px !important; border-radius: 9px !important; }
  .zc-ftr__cta-btn i { font-size: 11px !important; }
  .zc-ftr__cta-actions { gap: 6px !important; }
}

/* ---- Tiny phones (≤380px) ---- */
@media (max-width: 380px) {
  .zc-ftr        { margin-top: 48px !important; }
  .zc-ftr__cta-band {
    margin-top: -48px !important;
    margin-bottom: 18px !important;
  }
  .zc-ftr__cta { padding: 16px 12px !important; border-radius: 12px !important; }
  .zc-ftr__cta-title { font-size: 16px !important; }
  .zc-ftr__cta-desc  { font-size: 11px !important; margin-bottom: 10px !important; }
  .zc-ftr__cta-btn   { height: 36px !important; font-size: 10.5px !important; padding: 0 8px !important; }
}


/* ==========================================================================
   §18.8  CTA strip — DARK INTEGRATED redesign
   --------------------------------------------------------------------------
   Replaces the white pearl card (§18.2 / §18.7) with a slim dark panel
   that lives natively inside the footer:
     • No lift / negative margin — sits flush at the footer top
     • Subtle amber-on-navy gradient that blends with the footer bg
     • Horizontal layout on desktop (text left, two buttons right)
     • Stacked on mobile, buttons side-by-side
     • White / amber text, no jarring white box
   Source order = last → wins all !important wars from §18.2 / §18.7.
   ========================================================================== */

/* ---- Reset the lift; restore normal footer top spacing ---- */
.zc-ftr        { margin-top: 56px !important; }
.zc-ftr__cta-band {
  margin: 0 0 clamp(28px, 4vw, 48px) 0 !important;   /* gap before main grid */
  padding: clamp(20px, 3vw, 32px) var(--zc-pad-x) 0 var(--zc-pad-x) !important;
  z-index: auto !important;
}

/* ---- The strip itself: dark panel, horizontal flex ---- */
.zc-ftr__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(20px, 3vw, 36px) !important;
  flex-wrap: wrap !important;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 32px) !important;
  border-radius: clamp(12px, 1.4vw, 16px) !important;
  background:
    linear-gradient(135deg,
      rgba(207, 138, 63, 0.10) 0%,
      rgba(46, 75, 113, 0.14) 100%) !important;
  border: 1px solid var(--zc-amber-a18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 18px rgba(0, 0, 0, 0.18) !important;
  text-align: left !important;
  overflow: hidden;
}
/* Drop the decorative inner rings from the old card */
.zc-ftr__cta::before,
.zc-ftr__cta::after { display: none !important; }

/* ---- Text block (left side on desktop) ---- */
.zc-ftr__cta-text {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zc-ftr__cta-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  align-self: flex-start !important;
  font-family: var(--zc-f-heading) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--zc-amber-lt) !important;
  background: rgba(207, 138, 63, 0.10) !important;
  border: 1px solid var(--zc-amber-a18) !important;
  border-radius: 999px !important;
  padding: 4px 11px 4px 9px !important;
  margin: 0 0 4px 0 !important;
}
.zc-ftr__cta-eyebrow::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--zc-amber) !important;
  box-shadow: 0 0 8px var(--zc-amber-a45) !important;
}

.zc-ftr__cta-title {
  font-family: var(--zc-f-display) !important;
  font-size: clamp(17px, 1.4vw + 6px, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
  color: var(--zc-w94) !important;
  margin: 0 !important;
}
.zc-ftr__cta-title-accent {
  color: var(--zc-amber-lt) !important;
  font-weight: 600 !important;
}

.zc-ftr__cta-desc {
  font-family: var(--zc-f-body) !important;
  font-size: clamp(12px, 0.7vw + 5.5px, 13px) !important;
  line-height: 1.5 !important;
  color: var(--zc-w52) !important;
  margin: 0 !important;
  max-width: 520px !important;
}

/* ---- Action buttons (right side on desktop) ---- */
.zc-ftr__cta-actions {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.zc-ftr__cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  font-family: var(--zc-f-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform 0.3s var(--zc-ease-spring),
              background 0.3s ease,
              box-shadow 0.3s ease,
              color 0.3s ease !important;
}

/* Primary — amber gradient (replaces the old dark gradient) */
.zc-ftr__cta-btn--primary {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)) !important;
  color: var(--zc-white) !important;
  border: none !important;
  box-shadow: 0 4px 14px var(--zc-amber-a35) !important;
}
.zc-ftr__cta-btn--primary:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber)) !important;
  box-shadow: 0 8px 22px var(--zc-amber-a45) !important;
  color: var(--zc-white) !important;
}
.zc-ftr__cta-btn--primary i {
  color: var(--zc-white) !important;
  font-size: 12px !important;
}

/* Secondary — outlined white-on-dark */
.zc-ftr__cta-btn--secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--zc-w94) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}
.zc-ftr__cta-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: var(--zc-amber-a45) !important;
  color: var(--zc-amber-lt) !important;
  transform: translateY(-2px) !important;
}
.zc-ftr__cta-btn--secondary i {
  color: var(--zc-amber-lt) !important;
  font-size: 12px !important;
  transform: none !important;
}
.zc-ftr__cta-btn--secondary:hover i { color: var(--zc-amber-lt) !important; }

/* ---- Mobile (≤768px): stack text + buttons ---- */
@media (max-width: 768px) {
  .zc-ftr        { margin-top: 40px !important; }
  .zc-ftr__cta-band {
    padding: 16px var(--zc-pad-x-mb) 0 var(--zc-pad-x-mb) !important;
  }
  .zc-ftr__cta {
    padding: 16px 16px !important;
    border-radius: 12px !important;
    gap: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .zc-ftr__cta-text { flex: 1 1 100%; gap: 3px; }
  .zc-ftr__cta-title { font-size: 16px !important; }
  .zc-ftr__cta-desc  { font-size: 11.5px !important; }
  .zc-ftr__cta-actions {
    width: 100%;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .zc-ftr__cta-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }
}

/* ---- Tiny phones (≤380px) ---- */
@media (max-width: 380px) {
  .zc-ftr__cta { padding: 14px 12px !important; }
  .zc-ftr__cta-eyebrow { font-size: 8.5px !important; padding: 3px 9px 3px 7px !important; }
  .zc-ftr__cta-title { font-size: 15px !important; }
  .zc-ftr__cta-desc  { font-size: 11px !important; }
  .zc-ftr__cta-btn   { height: 38px !important; font-size: 11px !important; padding: 0 8px !important; }
}


/* ==========================================================================
   §18.9  FOOTER — flush to page content (no top margin)
   --------------------------------------------------------------------------
   Overrides every prior `.zc-ftr { margin-top: ... }` rule (§18.1, §18.6,
   §18.7, §18.8) by being last in source order. The footer now sits
   directly under the page content with zero gap above. Spacing inside
   the footer (CTA strip top padding, etc.) is preserved.
   ========================================================================== */
.zc-ftr { margin-top: 0 !important; }


/* ==========================================================================
   §19  MEGA MENU POLISH
   --------------------------------------------------------------------------
   Refines the Services + Knowledge mega menus that ship from §9–§11:
     • Slower, smoother open/close (less snappy, more premium)
     • Soft glassy backdrop behind the panel
     • Active category gets an amber inset bar + subtle bg lift
     • Service links: gentler hover, small dot bullet, no padding lurch
     • Panel cross-fade with stagger
     • Article cards: smoother lift + image zoom on hover
     • Knowledge resource links: clean amber sweep
   Layered last → wins by source order over §9–§11 base rules.
   ========================================================================== */

/* ---- Mega menu open/close — slower, smoother ---- */
.zc-hdr__mega {
  transition:
    opacity 0.45s var(--zc-ease) !important,
    visibility 0.45s !important,
    transform 0.55s var(--zc-ease-spring) !important;
  transform: translateY(-8px);
}
.zc-hdr__nav-item:hover > .zc-hdr__mega { transform: translateY(0); }

/* ---- Glassy backdrop behind the panel ---- */
.zc-hdr__mega::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 18, 8, 0.32) 0%, rgba(26, 18, 8, 0.12) 60%, transparent 100%);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  opacity: 0;
  transition: opacity 0.4s var(--zc-ease);
  z-index: -1;
}
.zc-hdr__nav-item:hover > .zc-hdr__mega::before { opacity: 1; }

/* ---- Services panel: refined shadow + softer corners ---- */
.zc-hdr__svc-layout {
  border-radius: 20px;
  box-shadow:
    0 24px 60px rgba(18, 12, 4, 0.22),
    0 8px 22px rgba(46, 75, 113, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(214, 207, 194, 0.6);
}

/* ---- Category tabs: smoother hover + active state ---- */
.zc-hdr__svc-cat {
  transition:
    background 0.32s var(--zc-ease),
    transform 0.32s var(--zc-ease-spring) !important;
  border-radius: 0 10px 10px 0;
  margin-right: 8px;
}
.zc-hdr__svc-cat:hover {
  background: rgba(207, 138, 63, 0.06) !important;
  transform: translateX(2px);
}
.zc-hdr__svc-cat.is-active {
  background: linear-gradient(90deg, rgba(207, 138, 63, 0.10), rgba(207, 138, 63, 0.02)) !important;
}
.zc-hdr__svc-cat.is-active::before {
  width: 3px !important;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--zc-amber-lt), var(--zc-amber-dk)) !important;
  box-shadow: 0 0 12px var(--zc-amber-a45);
}
.zc-hdr__svc-cat-ic {
  transition: transform 0.4s var(--zc-ease-spring), background 0.3s ease, box-shadow 0.3s ease;
}
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic {
  background: var(--zc-amber-a08);
  box-shadow: 0 4px 12px rgba(207, 138, 63, 0.18);
  transform: scale(1.06);
}
.zc-hdr__svc-cat-arrow {
  transition: transform 0.35s var(--zc-ease-spring), opacity 0.25s;
  opacity: 0;
}
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-arrow,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ---- Panel cross-fade — softer, slower ---- */
.zc-hdr__svc-panel {
  animation: zc-svc-fade-soft 0.55s var(--zc-ease-out) both !important;
}
@keyframes zc-svc-fade-soft {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---- Service links: bullet-dot motif, no padding shift ---- */
.zc-hdr__svc-link {
  padding: 8px 12px 8px 18px !important;
  transition:
    background 0.28s var(--zc-ease),
    color 0.28s var(--zc-ease) !important;
}
.zc-hdr__svc-link::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--zc-amber-a25);
  transform: translateY(-50%) scale(0.6);
  transition: transform 0.32s var(--zc-ease-spring), background 0.3s ease;
}
.zc-hdr__svc-link:hover {
  background: rgba(207, 138, 63, 0.06) !important;
  color: var(--zc-amber-dk) !important;
  padding-left: 18px !important;        /* defeat the old +14px lurch */
}
.zc-hdr__svc-link:hover::before {
  background: var(--zc-amber);
  transform: translateY(-50%) scale(1.2);
  box-shadow: 0 0 10px var(--zc-amber-a45);
}

/* ---- Group head: tighter typography, gold underline ---- */
.zc-hdr__svc-group-head {
  position: relative;
  border-bottom: none !important;
  padding-bottom: 8px !important;
}
.zc-hdr__svc-group-head::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 22px;
  height: 1.5px;
  background: var(--zc-amber);
  border-radius: 1px;
}
.zc-hdr__svc-group-head + .zc-hdr__svc-group-head { margin-top: 18px; }

/* ---- Knowledge mega: article cards smoother lift ---- */
.zc-hdr__know-article {
  transition:
    transform 0.4s var(--zc-ease-spring),
    box-shadow 0.4s var(--zc-ease) !important;
  border-radius: 12px;
  overflow: hidden;
}
.zc-hdr__know-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(18, 12, 4, 0.12);
}
.zc-hdr__know-article-thumb {
  overflow: hidden;
  border-radius: 8px;
}
.zc-hdr__know-article-thumb img {
  transition: transform 0.6s var(--zc-ease-out) !important;
}
.zc-hdr__know-article:hover .zc-hdr__know-article-thumb img {
  transform: scale(1.08);
}
.zc-hdr__know-article-title {
  transition: color 0.3s ease;
}
.zc-hdr__know-article:hover .zc-hdr__know-article-title {
  color: var(--zc-amber-dk) !important;
}

/* ---- Knowledge resource links: amber sweep ---- */
.zc-hdr__know-link {
  position: relative;
  border-radius: 10px;
  transition: background 0.3s var(--zc-ease), transform 0.3s var(--zc-ease-spring);
  overflow: hidden;
}
.zc-hdr__know-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(207, 138, 63, 0.05) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.55s var(--zc-ease-out);
}
.zc-hdr__know-link:hover { transform: translateX(2px); }
.zc-hdr__know-link:hover::before { transform: translateX(100%); }
.zc-hdr__know-ic {
  transition: transform 0.35s var(--zc-ease-spring), color 0.3s ease;
}
.zc-hdr__know-link:hover .zc-hdr__know-ic {
  transform: scale(1.1) rotate(-4deg);
  color: var(--zc-amber-lt);
}

/* ---- Drop menus (About / Doctors / Patient Care): match the polish ---- */
.zc-hdr__drop-link {
  transition:
    background 0.28s var(--zc-ease),
    color 0.28s var(--zc-ease),
    padding-left 0.32s var(--zc-ease-spring);
}
.zc-hdr__drop-link:hover {
  background: rgba(207, 138, 63, 0.06);
  color: var(--zc-amber-dk);
}
.zc-hdr__drop-ic {
  transition: transform 0.35s var(--zc-ease-spring), color 0.3s ease;
}
.zc-hdr__drop-link:hover .zc-hdr__drop-ic {
  transform: scale(1.08);
  color: var(--zc-amber);
}


/* ==========================================================================
   §19.1  MEGA MENU POLISH — fixes
   --------------------------------------------------------------------------
   1. Category icons were going white-on-near-white because §10 inverts the
      image to white but §19 made the bg subtle amber. Either both stay
      amber (loud) or both stay subtle (image keeps its color). We pick
      subtle: keep the image colorful, give the icon container a soft
      amber-tinted bg + ring on hover. Smooth.
   2. Service-link bullet dot was a hard pop on hover. Replace with a
      gentle slide-in line (no pop) for a calmer feel.
   3. Increase transition durations across the board so motion feels less
      reactive and more poised.
   ========================================================================== */

/* ---- Icon: keep colorful image, soft amber bg, no white-out ---- */
.zc-hdr__svc-cat-ic {
  background: var(--zc-pearl) !important;
  border: 1px solid var(--zc-linen) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition:
    background 0.5s var(--zc-ease),
    border-color 0.5s var(--zc-ease),
    box-shadow 0.5s var(--zc-ease),
    transform 0.5s var(--zc-ease-spring) !important;
}
.zc-hdr__svc-cat-ic img {
  filter: none !important;            /* keep brand colors */
  transition: transform 0.5s var(--zc-ease-spring) !important;
}

.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic {
  background: linear-gradient(135deg, #fff 0%, var(--zc-amber-soft) 100%) !important;
  border-color: var(--zc-amber-a35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 6px 18px rgba(207, 138, 63, 0.18),
    0 0 0 3px rgba(207, 138, 63, 0.08) !important;
  transform: scale(1.04) !important;
}
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic img,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic img {
  filter: none !important;            /* DEFEAT §10's brightness(0) invert(1) */
  transform: scale(1.08) !important;
}

/* ---- Category row: smoother bg fade ---- */
.zc-hdr__svc-cat {
  transition:
    background 0.5s var(--zc-ease),
    transform 0.5s var(--zc-ease-spring) !important;
}
.zc-hdr__svc-cat:hover {
  background: rgba(207, 138, 63, 0.05) !important;
  transform: translateX(3px) !important;
}
.zc-hdr__svc-cat.is-active {
  background: linear-gradient(90deg, rgba(207, 138, 63, 0.09), rgba(207, 138, 63, 0.01) 80%) !important;
}

/* ---- Service links: replace dot pop with gentle slide-line ---- */
.zc-hdr__svc-link {
  padding: 8px 12px 8px 16px !important;
  transition:
    background 0.45s var(--zc-ease),
    color 0.4s var(--zc-ease) !important;
}
.zc-hdr__svc-link::before {
  /* hide the dot from §19 */
  display: none !important;
}
/* New marker: a thin amber accent that slides in from the left */
.zc-hdr__svc-link::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 0;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--zc-amber), var(--zc-amber-lt));
  transform: translateY(-50%);
  opacity: 0;
  transition:
    width 0.45s var(--zc-ease-out),
    opacity 0.35s var(--zc-ease) !important;
}
.zc-hdr__svc-link:hover {
  background: linear-gradient(90deg, rgba(207,138,63,0.08), rgba(207,138,63,0.02)) !important;
  color: var(--zc-charcoal) !important;
  padding-left: 22px !important;
}
.zc-hdr__svc-link:hover::after {
  width: 12px;
  opacity: 1;
}

/* ---- Service category arrow: gentler ---- */
.zc-hdr__svc-cat-arrow {
  transition: opacity 0.45s var(--zc-ease), transform 0.45s var(--zc-ease-spring) !important;
}

/* ---- Panel cross-fade: even gentler, no blur (cheaper paint) ---- */
.zc-hdr__svc-panel {
  animation: zc-svc-fade-soft2 0.6s var(--zc-ease-out) both !important;
}
@keyframes zc-svc-fade-soft2 {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   §19.2  MEGA MENU — wow polish (icon reactivity + premium motion)
   --------------------------------------------------------------------------
   What this fixes / adds:
     • The category icon itself now reacts on hover (drop-shadow glow,
       saturation boost, lift) — not just the surrounding container.
     • Subtle shine sweep across the icon container on hover.
     • Mega menu open: gentle bounce + scale-from-99 entrance.
     • Active category: soft pulse halo so it reads as "selected".
     • Service links stagger-fade as the panel comes in.
     • Knowledge article cards: image scales smoothly inside a gold-tint
       overlay; title gets a gold underline reveal.
     • Resource icons: bounce-rotate on hover.
   ========================================================================== */

/* ---- ICON: real visual delta on the image itself ---- */
.zc-hdr__svc-cat-ic {
  position: relative;
  isolation: isolate;
}
.zc-hdr__svc-cat-ic::before {
  /* Shine sweep that runs across the icon on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s var(--zc-ease-out);
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic::before {
  transform: translateX(110%);
}

.zc-hdr__svc-cat-ic img {
  position: relative;
  z-index: 1;
  filter: saturate(0.92) brightness(1) contrast(1) !important;
  transition:
    filter 0.5s var(--zc-ease),
    transform 0.55s var(--zc-ease-spring) !important;
}
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic img,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic img {
  /* Saturation boost + amber drop-shadow = icon visibly "lights up" */
  filter:
    saturate(1.25)
    brightness(1.05)
    contrast(1.04)
    drop-shadow(0 2px 6px rgba(207, 138, 63, 0.55))
    drop-shadow(0 0 14px rgba(207, 138, 63, 0.35)) !important;
  transform: scale(1.12) !important;
}

/* Container: stronger amber halo on active so the SELECTED tab really pops */
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic {
  background: linear-gradient(135deg, var(--zc-amber-soft) 0%, #ffe8c8 100%) !important;
  border-color: var(--zc-amber) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 22px rgba(207, 138, 63, 0.30),
    0 0 0 4px rgba(207, 138, 63, 0.12) !important;
  animation: zc-svc-cat-pulse 2.6s var(--zc-ease) infinite;
}
@keyframes zc-svc-cat-pulse {
  0%, 100% { box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 8px 22px rgba(207,138,63,0.30),
    0 0 0 4px rgba(207,138,63,0.12); }
  50%      { box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 10px 28px rgba(207,138,63,0.40),
    0 0 0 6px rgba(207,138,63,0.06); }
}

/* ---- MEGA OPEN: gentle bounce + scale ---- */
.zc-hdr__mega {
  transform: translateY(-10px) scale(0.992) !important;
  transition:
    opacity 0.42s var(--zc-ease) !important,
    visibility 0.42s !important,
    transform 0.6s var(--zc-ease-spring) !important;
}
.zc-hdr__nav-item:hover > .zc-hdr__mega {
  transform: translateY(0) scale(1) !important;
}

/* ---- SERVICES PANEL: stagger-fade links inside the active panel ---- */
.zc-hdr__svc-panel.is-active .zc-hdr__svc-link {
  opacity: 0;
  animation: zc-svc-link-in 0.45s var(--zc-ease-out) forwards;
}
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(1) .zc-hdr__svc-link:nth-child(1) { animation-delay: 0.06s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(1) .zc-hdr__svc-link:nth-child(2) { animation-delay: 0.10s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(1) .zc-hdr__svc-link:nth-child(3) { animation-delay: 0.14s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(1) .zc-hdr__svc-link:nth-child(4) { animation-delay: 0.18s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(1) .zc-hdr__svc-link:nth-child(5) { animation-delay: 0.22s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(2) .zc-hdr__svc-link:nth-child(1) { animation-delay: 0.10s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(2) .zc-hdr__svc-link:nth-child(2) { animation-delay: 0.14s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(2) .zc-hdr__svc-link:nth-child(3) { animation-delay: 0.18s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(2) .zc-hdr__svc-link:nth-child(4) { animation-delay: 0.22s; }
.zc-hdr__svc-panel.is-active .zc-hdr__svc-group:nth-child(2) .zc-hdr__svc-link:nth-child(5) { animation-delay: 0.26s; }
@keyframes zc-svc-link-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- KNOWLEDGE: article cards — gold sheen + title underline reveal ---- */
.zc-hdr__know-article {
  position: relative;
  overflow: hidden;
}
.zc-hdr__know-article-thumb {
  position: relative;
}
.zc-hdr__know-article-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(207, 138, 63, 0.22) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--zc-ease);
  pointer-events: none;
}
.zc-hdr__know-article:hover .zc-hdr__know-article-thumb::after { opacity: 1; }

.zc-hdr__know-article-title {
  position: relative;
  display: inline;
  background-image: linear-gradient(180deg, transparent 92%, var(--zc-amber-lt) 92%, var(--zc-amber-lt) 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--zc-ease-out), color 0.3s ease;
}
.zc-hdr__know-article:hover .zc-hdr__know-article-title {
  background-size: 100% 100%;
}

/* ---- RESOURCE LINKS: bouncy icon ---- */
.zc-hdr__know-link:hover .zc-hdr__know-ic {
  animation: zc-know-ic-bounce 0.6s var(--zc-ease-spring);
}
@keyframes zc-know-ic-bounce {
  0%   { transform: scale(1)    rotate(0); }
  35%  { transform: scale(1.18) rotate(-8deg); }
  60%  { transform: scale(0.96) rotate(3deg); }
  100% { transform: scale(1.08) rotate(-3deg); }
}

/* ---- Drop menus: same icon glow treatment ---- */
.zc-hdr__drop-link:hover .zc-hdr__drop-ic {
  background: var(--zc-amber-a12);
  color: var(--zc-amber-dk);
  box-shadow: 0 4px 14px rgba(207, 138, 63, 0.20);
  transform: scale(1.1) rotate(-3deg);
}

/* ---- Honor reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic { animation: none !important; }
  .zc-hdr__svc-panel.is-active .zc-hdr__svc-link { opacity: 1; animation: none !important; }
  .zc-hdr__know-link:hover .zc-hdr__know-ic { animation: none !important; }
  .zc-hdr__svc-cat-ic::before { display: none !important; }
}


/* ==========================================================================
   §19.3  MEGA MENU — fine tuning
   --------------------------------------------------------------------------
   1. Service category icon: hover bg was a strong amber gradient that
      fought the colored <img> on top. Lighten it to a barely-tinted
      pearl so the brand icon is the hero. Active stays slightly stronger
      so the selected state still reads.
   2. Knowledge "Resources & Tools" icons: §19 was tinting them amber-lt
      on hover. User wants them WHITE on the amber background like the
      original §11 design intended (white-on-amber = high contrast).
   ========================================================================== */

/* ---- Service cat icon: light hover, slightly stronger active ---- */
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic {
  background: var(--zc-pearl) !important;
  border-color: var(--zc-amber-a25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 12px rgba(207, 138, 63, 0.10) !important;
}
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic {
  background: linear-gradient(135deg, #fff 0%, #fff5e6 100%) !important;
  border-color: var(--zc-amber-a45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 6px 16px rgba(207, 138, 63, 0.18),
    0 0 0 3px rgba(207, 138, 63, 0.08) !important;
}

/* Image: lighter tint deltas (the bg is subtle now, the icon does the work) */
.zc-hdr__svc-cat:hover .zc-hdr__svc-cat-ic img,
.zc-hdr__svc-cat.is-active .zc-hdr__svc-cat-ic img {
  filter:
    saturate(1.20)
    brightness(1.04)
    drop-shadow(0 3px 8px rgba(207, 138, 63, 0.45)) !important;
}

/* ---- Resources & Tools: icon goes WHITE on amber bg ---- */
.zc-hdr__know-link:hover .zc-hdr__know-ic,
.zc-hdr__know-link:hover .zc-hdr__know-ic i {
  color: var(--zc-white) !important;
}
.zc-hdr__know-link:hover .zc-hdr__know-ic {
  background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)) !important;
  border-color: var(--zc-amber-dk) !important;
  box-shadow: 0 6px 16px var(--zc-amber-a45) !important;
}


/* ==========================================================================
   §19.4  MEGA MENU — title hover & backdrop blur
   --------------------------------------------------------------------------
   1. Article title was getting a "highlighter" underline on hover (looked
      like a strikethrough on certain monitors). Replace with a clean
      color shift + tiny translate — feels lighter and more premium.
   2. When any mega menu opens, blur + slightly tint the rest of the page
      so the menu pops. Uses a fixed full-screen overlay that fades in
      with the menu.
   ========================================================================== */

/* ---- Article title: drop the underline highlight, use color + slide ---- */
.zc-hdr__know-article-title {
  background-image: none !important;
  background-size: 0 0 !important;
  display: block !important;
  transition: color 0.35s var(--zc-ease), transform 0.45s var(--zc-ease-spring) !important;
  transform-origin: left center;
}
.zc-hdr__know-article:hover .zc-hdr__know-article-title {
  color: var(--zc-amber-dk) !important;
  transform: translateX(2px);
  background-image: none !important;
  background-size: 0 0 !important;
}

/* ---- Page-wide backdrop blur when ANY mega menu is open ---- */
/* The overlay sits behind the mega panel (z-index: 700) but above page
   content. It fades in via the body's :has() of an open mega.       */
.zc-hdr__mega-bg {
  position: fixed;
  top: var(--zc-nav-h);
  left: 0; right: 0; bottom: 0;
  z-index: 700;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(46, 75, 113, 0.10) 0%, transparent 60%),
    rgba(26, 18, 8, 0.18);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  transition: opacity 0.42s var(--zc-ease);
}
.zc-hdr__mega-bg.is-active { opacity: 1; }

/* Fallback path using :has() for browsers that support it (Chrome/Safari/FF 121+).
   When any nav-item is hovered (mega visible), fade in the overlay. */
@supports selector(:has(*)) {
  .zc-hdr:has(.zc-hdr__nav-item:hover > .zc-hdr__mega) ~ .zc-hdr__mega-bg,
  .zc-hdr:has(.zc-hdr__nav-item:focus-within > .zc-hdr__mega) ~ .zc-hdr__mega-bg {
    opacity: 1;
  }
}

/* Slightly brighter shadow on the mega panel itself so it lifts off the
   blurred backdrop more clearly. */
.zc-hdr__svc-layout,
.zc-hdr__know-wrap {
  box-shadow:
    0 30px 70px rgba(18, 12, 4, 0.32),
    0 14px 32px rgba(46, 75, 113, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}


/* ==========================================================================
   ZC-FORM — premium form partial (used on book-an-appointment + popup)
   --------------------------------------------------------------------------
   The form lives at /file/common/appointment.php and is reused across pages.
   All shared styling lives here so any page that includes the partial gets
   the same premium look without re-styling.
   ========================================================================== */
.zc-form {
  --zc-form-radius: 6px;
  --zc-form-bd:     var(--zc-linen);
  --zc-form-bd-hv:  var(--zc-amber-a45);
  --zc-form-bg:     var(--zc-white);
  --zc-form-pad-y:  12px;
  --zc-form-pad-x:  14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}
@media (max-width: 600px) { .zc-form { grid-template-columns: 1fr; gap: 12px; } }

/* Each .col-md-* spans both columns by default; promote select fields to half */
.zc-form > [class*="col-"] { grid-column: span 2; }

/* Labels — small caps, tracking-wide, brand-tone */
.zc-form .form-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--zc-f-heading);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--zc-warm-mid);
}

/* Inputs / textareas / selects — premium glass-on-cream */
.zc-form .form-control,
.zc-form input[type="text"],
.zc-form input[type="email"],
.zc-form input[type="tel"],
.zc-form textarea {
  width: 100%;
  padding: var(--zc-form-pad-y) var(--zc-form-pad-x);
  background: var(--zc-form-bg);
  border: 1px solid var(--zc-form-bd);
  border-radius: var(--zc-form-radius);
  font-family: var(--zc-f-body);
  font-size: 14px;
  color: var(--zc-charcoal);
  letter-spacing: 0.1px;
  line-height: 1.5;
  transition: border-color 0.3s var(--zc-ease), box-shadow 0.3s var(--zc-ease), background 0.3s var(--zc-ease);
  -webkit-appearance: none;
  appearance: none;
}
.zc-form .form-control::placeholder,
.zc-form input::placeholder,
.zc-form textarea::placeholder {
  color: var(--zc-warm-mid);
  opacity: 0.6;
  font-weight: 300;
  font-style: normal;
}
.zc-form .form-control:hover,
.zc-form input:hover,
.zc-form textarea:hover {
  border-color: var(--zc-form-bd-hv);
}
.zc-form .form-control:focus,
.zc-form input:focus,
.zc-form textarea:focus {
  outline: none;
  border-color: var(--zc-amber-dk);
  border-width: 1.5px;
  background: var(--zc-white);
  box-shadow: none;
}

/* Textarea — taller resize-vertical only */
.zc-form textarea {
  min-height: 84px;
  resize: vertical;
}

/* Read-only date input — feels actionable */
.zc-form input[readonly] {
  cursor: pointer;
  background: linear-gradient(180deg, var(--zc-white), var(--zc-pearl));
}

/* Error states — border-only, no halo, no Bootstrap exclamation icon */
.zc-form .form-control.is-invalid,
.zc-form.was-validated .form-control:invalid,
.zc-form .form-control.is-invalid:focus,
.zc-form.was-validated .form-control:invalid:focus,
.zc-form input.is-invalid,
.zc-form textarea.is-invalid {
  border-color: var(--zc-red, #c14b51) !important;
  border-width: 1.5px !important;
  box-shadow: none !important;
  background-image: none !important;
  padding-right: var(--zc-form-pad-x) !important;
}

/* Strip Bootstrap's green :valid styling (no checkmark, no green border) */
.zc-form .form-control.is-valid,
.zc-form.was-validated .form-control:valid,
.zc-form .form-control.is-valid:focus,
.zc-form.was-validated .form-control:valid:focus {
  border-color: var(--zc-form-bd) !important;
  box-shadow: none !important;
  background-image: none !important;
  padding-right: var(--zc-form-pad-x) !important;
}
.zc-form .valid-feedback,
.zc-form .valid-tooltip { display: none !important; }

/* Invalid feedback — hidden until needed, then border-only red text */
.zc-form .invalid-feedback {
  display: none;
  margin: 6px 2px 0;
  font-family: var(--zc-f-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--zc-red, #c14b51);
  letter-spacing: 0.1px;
}
.zc-form .form-control.is-invalid ~ .invalid-feedback,
.zc-form.was-validated .form-control:invalid ~ .invalid-feedback,
.zc-form .form-check-input.is-invalid ~ .invalid-feedback,
.zc-form.was-validated .form-check-input:invalid ~ .invalid-feedback {
  display: block;
}
.zc-form .invalid-feedback::before,
.zc-form .invalid-feedback::after { content: none !important; display: none !important; }

/* Live error spans (#phonealert / #emailalert) — collapse when empty */
.zc-form .phonealert,
.zc-form .emailalert,
.zc-form .error {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 0;
  font-family: var(--zc-f-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--zc-red, #c14b51);
  letter-spacing: 0.1px;
}
.zc-form .phonealert:not(:empty),
.zc-form .emailalert:not(:empty),
.zc-form .error:not(:empty) { margin-top: 6px; }
.zc-form .phonealert:empty,
.zc-form .emailalert:empty,
.zc-form .error:empty { display: none; }

/* If a live-alert span (populated by intl-tel / email JS) has content,
   suppress the static .invalid-feedback that follows so users never see
   two error lines for the same field. */
.zc-form .phonealert:not(:empty) ~ .invalid-feedback,
.zc-form .emailalert:not(:empty) ~ .invalid-feedback,
.zc-form .error:not(:empty) ~ .invalid-feedback {
  display: none !important;
}

/* intl-tel-input premium override (the partial's #phone field) */
.zc-form .iti { width: 100%; display: block; }
.zc-form .iti--separate-dial-code .iti__selected-flag {
  background: var(--zc-pearl);
  border-right: 1px solid var(--zc-form-bd);
  padding: 0 12px 0 10px;
  border-radius: var(--zc-form-radius) 0 0 var(--zc-form-radius);
}
.zc-form .iti--separate-dial-code .iti__selected-dial-code {
  font-family: var(--zc-f-body);
  font-size: 14px;
  color: var(--zc-charcoal);
  margin-left: 6px;
}
.zc-form .iti input[type="tel"] {
  padding-left: 75px !important;
}

/* Date-picker readonly input — small calendar icon hint.
   Uses !important so the icon survives the kill-BS-icon rule that
   strips background-image off any .form-control.is-invalid field. */
.zc-form input[name="appointment_date"],
.zc-form #filter-date,
.zc-form #filter-date.is-invalid,
.zc-form.was-validated #filter-date:invalid,
.zc-form #filter-date.is-invalid:focus,
.zc-form.was-validated #filter-date:invalid:focus {
  background-color: var(--zc-white) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23cf8a3f'><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}

/* Consent checkbox — soft amber pill that enriches when checked */
.zc-form .form-check {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  margin: 4px 0 8px;
  background: var(--zc-amber-a08);
  border: 1px solid var(--zc-amber-a18);
  border-radius: 10px;
  transition: background 0.35s var(--zc-ease), border-color 0.35s var(--zc-ease);
}
.zc-form .form-check:has(.form-check-input:checked) {
  background: linear-gradient(135deg, var(--zc-amber-a18), var(--zc-amber-a08));
  border-color: var(--zc-amber-a35);
}
.zc-form .form-check-input {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin: 1px 0 0 0;
  border: 1.5px solid var(--zc-amber-a45);
  border-radius: 4px;
  background: var(--zc-white);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  transition: transform 0.25s var(--zc-ease-spring), background 0.3s var(--zc-ease), border-color 0.3s var(--zc-ease);
}
.zc-form .form-check-input:hover { border-color: var(--zc-amber-dk); }
.zc-form .form-check-input:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--zc-amber-dk);
}
.zc-form .form-check-input:checked {
  background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
  border-color: var(--zc-amber-dk);
  transform: scale(1.04);
}
.zc-form .form-check-input:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 1px;
  width: 6px; height: 12px;
  border-right: 2.2px solid #fff;
  border-bottom: 2.2px solid #fff;
  transform: rotate(45deg);
}
.zc-form .form-check-label {
  flex: 1;
  min-width: 0;
  font-family: var(--zc-f-body);
  font-size: 11.5px;
  color: var(--zc-warm-dk);
  line-height: 1.55;
  letter-spacing: 0.1px;
  margin: 0;
  cursor: pointer;
}
.zc-form .form-check-label a {
  color: var(--zc-amber-dk);
  text-decoration: none;
  border-bottom: 1px solid var(--zc-amber-a35);
  transition: border-color 0.3s var(--zc-ease);
}
.zc-form .form-check-label a:hover { border-color: var(--zc-amber-dk); }
/* Defeat Bootstrap's red label tint on invalid checkbox + green tint on valid */
.zc-form .was-validated .form-check-input:invalid ~ .form-check-label,
.zc-form .form-check-input.is-invalid ~ .form-check-label,
.was-validated .zc-form .form-check-input:invalid ~ .form-check-label,
.zc-form.was-validated .form-check-input:invalid ~ .form-check-label,
.zc-form .was-validated .form-check-input:valid ~ .form-check-label,
.zc-form .form-check-input.is-valid ~ .form-check-label,
.was-validated .zc-form .form-check-input:valid ~ .form-check-label,
.zc-form.was-validated .form-check-input:valid ~ .form-check-label {
  color: var(--zc-warm-dk) !important;
}

/* Invalid checkbox — red border + red-tinged consent pill (replaces blue) */
.zc-form.was-validated .form-check-input:invalid,
.zc-form .form-check-input.is-invalid {
  border-color: var(--zc-red, #c14b51) !important;
  background-color: var(--zc-white) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.zc-form.was-validated .form-check-input:invalid:focus,
.zc-form .form-check-input.is-invalid:focus {
  box-shadow: none !important;
  border-color: var(--zc-red, #c14b51) !important;
}
.zc-form.was-validated .form-check:has(.form-check-input:invalid),
.zc-form .form-check:has(.form-check-input.is-invalid) {
  background: rgba(204, 41, 48, 0.04);
  border-color: rgba(204, 41, 48, 0.28);
}
/* Strip BS green :valid styling on the checkbox too */
.zc-form.was-validated .form-check-input:valid,
.zc-form .form-check-input.is-valid {
  background-image: none !important;
  box-shadow: none !important;
}

/* invalid-feedback inside consent pill — soft red sub-pill, full row width */
.zc-form .form-check .invalid-feedback {
  flex-basis: 100%;
  margin: 4px 0 0 0;
  padding: 7px 10px;
  background: rgba(204, 41, 48, 0.06);
  border: 1px solid rgba(204, 41, 48, 0.24);
  border-radius: 8px;
}

/* Submit button — gradient-slide hover + paper-plane icon (matches contact) */
.zc-form .contact-form-button,
.zc-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-width: 170px;
  padding: 13px 22px;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 50%, var(--zc-amber) 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: var(--zc-white);
  border: none;
  border-radius: 10px;
  font-family: var(--zc-f-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 16px var(--zc-amber-a35);
  transition:
    transform 0.35s var(--zc-ease-spring),
    background-position 0.5s var(--zc-ease),
    box-shadow 0.35s var(--zc-ease);
}
.zc-form .contact-form-button::after,
.zc-form button[type="submit"]::after {
  content: '\f1d8';                    /* fa-paper-plane */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  display: inline-block;
  transition: transform 0.35s var(--zc-ease-spring);
}
.zc-form .contact-form-button:hover,
.zc-form button[type="submit"]:hover {
  transform: translateY(-2px);
  color: var(--zc-white);
  background-position: 100% 100%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 12px 24px var(--zc-amber-a45);
}
.zc-form .contact-form-button:hover::after,
.zc-form button[type="submit"]:hover::after {
  transform: translateX(3px) translateY(-1px) rotate(-6deg);
}
.zc-form .contact-form-button:active,
.zc-form button[type="submit"]:active {
  transform: translateY(0);
}

/* Success / alert placeholder */
.zc-form #alertPlaceholder { grid-column: span 2; }
.zc-form #alertPlaceholder:empty { display: none; }

/* ==========================================================================
   Datetimepicker — brand-aligned theme (calendar + time-picker overlay)
   Applies wherever jquery.datetimepicker is initialised (book appointment,
   popup, search filters). Token-driven so it stays consistent everywhere.

   Layout: the lib floats .xdsoft_datepicker (250px) + .xdsoft_timepicker
   (70px) side-by-side. We flip to flexbox so the calendar can stretch to
   any container width — JS in custom.js sets the picker's width on open
   to match the input field.
   ========================================================================== */
.xdsoft_datetimepicker {
  background: var(--zc-white) !important;
  border: 1px solid var(--zc-linen) !important;
  border-radius: 12px !important;
  box-shadow:
    0 24px 48px rgba(46, 75, 113, 0.12),
    0 4px 12px rgba(46, 75, 113, 0.06) !important;
  padding: 14px !important;
  font-family: var(--zc-f-body) !important;
  color: var(--zc-charcoal) !important;
  box-sizing: border-box !important;
  min-width: 320px !important;
}
.xdsoft_datetimepicker.xdsoft_inline { font-family: var(--zc-f-body) !important; }

/* Flex layout — calendar grows, time column stays fixed */
.xdsoft_datetimepicker > .xdsoft_datepicker.active,
.xdsoft_datetimepicker > .xdsoft_timepicker.active {
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin: 0 !important;
}
.xdsoft_datetimepicker .xdsoft_datepicker {
  width: calc(100% - 96px) !important;
  margin-right: 12px !important;
}
.xdsoft_datetimepicker.xdsoft_noselect.xdsoft_no_timepicker .xdsoft_datepicker,
.xdsoft_datetimepicker:not(:has(.xdsoft_timepicker.active)) .xdsoft_datepicker {
  width: 100% !important;
  margin-right: 0 !important;
}

/* Header — month/year navigation */
.xdsoft_datetimepicker .xdsoft_monthpicker {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.xdsoft_datetimepicker .xdsoft_label {
  font-family: var(--zc-f-heading) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--zc-deep) !important;
  letter-spacing: 0.4px !important;
  background: transparent !important;
  padding: 6px 10px !important;
  float: none !important;
  width: auto !important;
  flex: 1 !important;
  transition: color 0.25s var(--zc-ease) !important;
}
.xdsoft_datetimepicker .xdsoft_label:hover { color: var(--zc-amber-dk) !important; }
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
  background: var(--zc-white) !important;
  border: 1px solid var(--zc-linen) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(46, 75, 113, 0.10) !important;
  font-family: var(--zc-f-body) !important;
  font-size: 12px !important;
  color: var(--zc-charcoal) !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover,
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
  background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%) !important;
  color: var(--zc-white) !important;
  box-shadow: none !important;
}

/* Prev / next chevrons — soft amber chips, clear icons */
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
  background-color: var(--zc-amber-a08) !important;
  background-image: none !important;
  border-radius: 8px !important;
  width: 28px !important;
  height: 28px !important;
  opacity: 1 !important;
  position: relative !important;
  text-indent: 0 !important;
  float: none !important;
  margin: 0 !important;
  transition: background 0.25s var(--zc-ease), color 0.25s var(--zc-ease) !important;
}
.xdsoft_datetimepicker .xdsoft_prev::before,
.xdsoft_datetimepicker .xdsoft_next::before,
.xdsoft_datetimepicker .xdsoft_today_button::before {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  color: var(--zc-amber-dk) !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.xdsoft_datetimepicker .xdsoft_prev::before          { content: '\f053'; }   /* fa-chevron-left  */
.xdsoft_datetimepicker .xdsoft_next::before          { content: '\f054'; }   /* fa-chevron-right */
.xdsoft_datetimepicker .xdsoft_today_button::before  { content: '\f783'; }   /* fa-calendar-day  */
.xdsoft_datetimepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_next:hover,
.xdsoft_datetimepicker .xdsoft_today_button:hover {
  background-color: var(--zc-amber) !important;
}
.xdsoft_datetimepicker .xdsoft_prev:hover::before,
.xdsoft_datetimepicker .xdsoft_next:hover::before,
.xdsoft_datetimepicker .xdsoft_today_button:hover::before {
  color: var(--zc-white) !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
  width: 100% !important;
  height: 22px !important;
  margin: 0 0 6px !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev::before { content: '\f077'; }  /* fa-chevron-up   */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next::before { content: '\f078'; }  /* fa-chevron-down */

/* Calendar table fills its column */
.xdsoft_datetimepicker .xdsoft_calendar { width: 100% !important; }
.xdsoft_datetimepicker .xdsoft_calendar table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 2px !important;
}

/* Weekday header row */
.xdsoft_datetimepicker .xdsoft_calendar th {
  background: transparent !important;
  color: var(--zc-warm-mid) !important;
  font-family: var(--zc-f-heading) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 8px 0 !important;
}

/* Day cells */
.xdsoft_datetimepicker .xdsoft_calendar td {
  background: transparent !important;
  border: none !important;
  color: var(--zc-charcoal) !important;
  font-family: var(--zc-f-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  height: 34px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.2s var(--zc-ease), color 0.2s var(--zc-ease) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td > div {
  padding: 8px 4px !important;
  border-radius: 8px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover {
  background: var(--zc-amber-a18) !important;
  color: var(--zc-amber-dk) !important;
  box-shadow: none !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled {
  color: var(--zc-stone, #c8c1b6) !important;
  opacity: 0.55 !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled {
  background: var(--zc-pearl) !important;
  pointer-events: none !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
  color: var(--zc-amber-dk) !important;
  font-weight: 700 !important;
  background: var(--zc-amber-a08) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
  background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%) !important;
  color: var(--zc-white) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px var(--zc-amber-a35) !important;
}

/* ----- Time-picker column ----------------------------------------------- */
.xdsoft_datetimepicker .xdsoft_timepicker {
  width: 84px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
  border: 1px solid var(--zc-linen) !important;
  background: var(--zc-pearl) !important;
  border-radius: 10px !important;
  height: 220px !important;
  overflow-y: auto !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}

/* IMPORTANT — actual time slots are .xdsoft_time_box > div > div, NOT .xdsoft_time */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(207, 138, 63, 0.10) !important;
  color: var(--zc-charcoal) !important;
  font-family: var(--zc-f-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.2s var(--zc-ease), color 0.2s var(--zc-ease) !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:first-child {
  border-top-color: transparent !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  background: var(--zc-amber-a18) !important;
  color: var(--zc-amber-dk) !important;
  box-shadow: none !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_today {
  color: var(--zc-amber-dk) !important;
  font-weight: 700 !important;
  background: var(--zc-amber-a08) !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%) !important;
  color: var(--zc-white) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px var(--zc-amber-a35) !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_disabled {
  color: var(--zc-stone, #c8c1b6) !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* Custom scrollbar inside the time list */
.xdsoft_datetimepicker .xdsoft_time_box::-webkit-scrollbar { width: 4px; }
.xdsoft_datetimepicker .xdsoft_time_box::-webkit-scrollbar-track { background: transparent; }
.xdsoft_datetimepicker .xdsoft_time_box::-webkit-scrollbar-thumb {
  background: var(--zc-amber-a35);
  border-radius: 4px;
}
.xdsoft_datetimepicker .xdsoft_time_box::-webkit-scrollbar-thumb:hover {
  background: var(--zc-amber);
}

/* Mobile compactness */
@media (max-width: 600px) {
  .xdsoft_datetimepicker { padding: 10px !important; min-width: 280px !important; }
  .xdsoft_datetimepicker .xdsoft_datepicker { width: calc(100% - 84px) !important; margin-right: 8px !important; }
  .xdsoft_datetimepicker .xdsoft_timepicker { width: 76px !important; }
  .xdsoft_datetimepicker .xdsoft_calendar td { height: 30px !important; font-size: 12px !important; }
  .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { height: 200px !important; }
}
@media (max-width: 380px) {
  .xdsoft_datetimepicker .xdsoft_datepicker { width: 100% !important; margin: 0 0 10px 0 !important; }
  .xdsoft_datetimepicker .xdsoft_timepicker { width: 100% !important; }
  .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { height: 140px !important; }
}