@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');
/* ============================================================
   ZDH Consulting — sitewide theme overlay (v1)
   Layered AFTER styles.css on every non-home page to bring the
   existing markup into the new premium design language.
   Content/markup untouched; this only restyles shared components.
   ============================================================ */

:root {
  --blue-deep: #0a2a6e;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --radius-lg: 22px;
}

/* ---------- Typography ---------- */
html { overflow-x: clip; }
body { font-family: var(--font-body); overflow-x: clip; }
h1, h2, h3, h4, .eyebrow { font-family: var(--font-display); letter-spacing: -.01em; }
h1 { letter-spacing: -.02em; }

/* ---------- Header / brand / nav ---------- */
.site-header {
  min-height: 66px;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid rgba(228,235,247,.8);
  box-shadow: 0 8px 30px rgba(9,42,91,.05);
}
.brand { align-items: baseline; }
.brand-mark { color: var(--blue-deep) !important; font-style: normal !important; font-weight: 800; font-size: 26px; letter-spacing: -.01em; }
.brand-text { color: var(--muted, #5a6781) !important; font-size: 12.5px !important; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin-left: 9px; }
.main-nav { background: transparent !important; box-shadow: none !important; border: 0 !important; }
/* The transparent nav above is for the desktop pill bar; on mobile the nav is
   an open drawer that needs a solid background so links aren't see-through. */
@media (max-width: 930px) {
  .main-nav {
    background: #fff !important;
    box-shadow: 0 26px 68px rgba(9, 42, 91, .2) !important;
    border: 1px solid rgba(220, 229, 244, .96) !important;
  }
}
.main-nav a {
  border-radius: 999px; font-weight: 600; font-size: 14.5px; text-transform: none;
  color: var(--muted, #5a6781); letter-spacing: 0;
}
.main-nav a::before, .main-nav a::after { display: none !important; }
.main-nav a:hover { background: var(--soft, #f5f8ff); color: var(--ink, #080d24); }
.main-nav a.active { color: var(--blue, #075fff) !important; background: transparent; }
.header-cta {
  border-radius: 999px !important; background: linear-gradient(120deg,#075fff,#11b7ff) !important;
  color: #fff !important; font-weight: 700; box-shadow: 0 14px 30px rgba(7,95,255,.28);
  border: 0 !important;
}
.header-cta:hover { transform: translateY(-2px); }

/* ---------- Buttons ---------- */
.btn, .btn-primary, .btn-green, .btn-ghost {
  border-radius: 999px !important; font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.btn-primary { background: linear-gradient(120deg,#075fff,#11b7ff) !important; box-shadow: 0 20px 46px rgba(7,95,255,.30); border: 0 !important; color: #fff !important; }
.btn-green { background: linear-gradient(120deg,#17c964,#11c7a6) !important; color: #04231a !important; box-shadow: 0 20px 46px rgba(23,201,100,.30); border: 0 !important; }
.btn-primary:hover, .btn-green:hover { transform: translateY(-2px); }

/* ---------- Eyebrows ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue, #075fff);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#075fff,#11b7ff); }

/* ---------- Cards / panels ---------- */
.feature-card, .panel, .info-card, .proof-card, .case-card,
.service-card, .route-map-card, .industries-card, .resource-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--line, #e4ebf7);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
}
.feature-card:hover, .service-card:hover, .route-map-card:hover, .industries-card:hover, .resource-card:hover {
  transform: translateY(-5px); box-shadow: 0 18px 44px rgba(11,24,64,.10); border-color: transparent;
}

/* ---------- Section rhythm ---------- */
.section { padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(48px, 7vw, 92px); }

/* ---------- Forms ---------- */
input, select, textarea {
  border-radius: 12px !important;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue, #075fff) !important;
  box-shadow: 0 0 0 4px rgba(7,95,255,.12) !important;
}

/* ---------- Text-out-of-box guards ----------
   Fixes words spilling outside cards/chips: let text wrap, and let
   flex/grid children shrink below their content width (min-width:0). */
p, h1, h2, h3, h4, h5, li, a, span, b, em, strong, blockquote, dt, dd, label {
  overflow-wrap: break-word;
  word-break: normal;
}
[class*="-grid"] > *, [class*="-row"] > *, [class*="-rail"] > *,
[class*="-stack"] > *, [class*="-cluster"] > *, [class*="-metrics"] > *,
[class*="-meta"] > *, [class*="-chips"] > * { min-width: 0; }
/* Small metric/label/contact boxes: let their inner text shrink & break so
   values and emails never spill outside the little boxes. */
[class*="-metrics"] span, [class*="-metrics"] span *,
[class*="-meta"] span, [class*="-meta"] span *,
[class*="proof"] article, [class*="proof"] article *,
[class*="-strip"] article, [class*="-strip"] article *,
.footer-contact-rail span, .footer-contact-rail span *,
.rep-card-metrics span, .rep-card-metrics span * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Collapse multi-column content grids on small screens so cards keep a
   usable width (works around a source-order bug in styles.css where the
   base 3-column rule overrides the mobile collapse). */
@media (max-width: 680px) {
  [class*="-grid"] { grid-template-columns: 1fr !important; }
}
@media (min-width: 681px) and (max-width: 960px) {
  .service-proof-grid, .feature-grid, .expanded-seo-grid, .landing-depth-grid,
  .case-proof-grid, .trending-resource-grid, .blog-grid, .decision-grid,
  .proof-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Contact card mini-tiles: the 2-col grid (icon | text) has 3 children, so
   the value <em> was auto-flowing into the 42px icon column and wrapping to
   4 lines. Span the icon across both rows so label + value fill the wide
   column. */
.contact-visual-rail i[data-icon] { grid-row: 1 / span 2; align-self: start; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink, #080d24); color: #c7d0ec; }
.site-footer .brand-mark { color: #fff !important; }
.site-footer .brand-text { color: #9aa6c2 !important; }
.footer-proof-chips span, .footer-proof-chips b { color: inherit; }
.footer-proof-chips b { color: #11b7ff; }

/* ---------- Sticky CTA (injected) ---------- */
.sticky-growth-cta { border-radius: 999px; }
.sticky-growth-cta .btn { border-radius: 999px !important; }

@media (prefers-reduced-motion: reduce) {
  .btn, .feature-card, .header-cta { transition: none !important; }
}

/* Small-screen brand sizing so the wordmark never overflows the header */
@media (max-width: 430px) {
  .brand-mark { font-size: 22px !important; }
  .brand-text { font-size: 11px !important; letter-spacing: .12em; margin-left: 6px; }
}