/* ================================================================
   VIR Automation — styles-v2-overlay.css
   Thin overlay for interior pages: fonts + nav + footer overrides
   Loaded AFTER styles.css + nav-ext.css to unify with new homepage
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Design Tokens (match styles-v2.css) ─────────────────────── */
:root {
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
  --emerald-500:  #3AAF4F;
  --emerald-600:  #2D8C3E;
  --navy-900:     #0B1220;
  --navy-600:     #1A2D4D;
  --white:        #FFFFFF;
  --off-white:    #F8FAFC;
  --text-primary: #0F172A;
  --text-muted:   #64748B;
  --text-muted-dark: #94A3B8;
  --border:       #E2E8F0;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;
  --ease-default: 200ms ease;
  --nav-height:   64px;
}

/* ── Global Typography ───────────────────────────────────────── */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}


/* ================================================================
   NAVIGATION — white sticky topbar (overrides old glass/fixed nav)
   ================================================================ */
.topbar {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 100;
  background: var(--white) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  height: var(--nav-height);
  transition: transform 300ms ease;
}

.topbar.nav-hidden {
  transform: translateY(-100%);
  opacity: 1;
}

/* Sticky nav takes up document flow — remove legacy fixed-nav padding-top */
.main-content {
  padding-top: 0 !important;
}

.nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-6);
}

/* Logo */
.logo-text span:first-child {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  font-size: 16px !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.04em !important;
}

.logo-text span:last-child {
  font-family: var(--font-heading) !important;
  font-weight: 500;
  font-size: 9px;
  color: var(--text-muted) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Nav Links */
.nav-links a {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: var(--nav-height);
}

.nav-links a::after {
  display: none !important;
}

.nav-links a:hover {
  color: var(--emerald-500) !important;
}

.nav-links a.active {
  color: var(--emerald-500) !important;
}

/* Nav Dropdown Trigger */
.nav-dropdown-trigger {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.nav-dropdown-trigger:hover {
  color: var(--emerald-500) !important;
}

/* Nav CTA */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  font-family: var(--font-heading) !important;
  font-weight: 500;
  font-size: 14px;
  color: var(--white) !important;
  background: var(--emerald-500) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: background var(--ease-default);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--emerald-600) !important;
  box-shadow: none !important;
}


/* ── Dropdown Menu — white bg (overrides nav-ext.css dark) ───── */
.nav-dropdown-menu {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  padding: 8px 0;
}

.nav-dropdown-menu a {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
}

.nav-dropdown-menu a:hover {
  color: var(--emerald-500) !important;
  background: var(--off-white) !important;
}

.nav-dropdown-menu .dropdown-flagship {
  color: var(--emerald-500) !important;
  font-weight: 600 !important;
}

.nav-dropdown-menu .dropdown-flagship:hover {
  color: var(--emerald-600) !important;
  background: var(--off-white) !important;
}

.dropdown-divider {
  border-top: 1px solid var(--border) !important;
}


/* ── Mobile Toggle ───────────────────────────────────────────── */
.mobile-toggle {
  color: var(--text-primary) !important;
}


/* ── Mobile Menu Overlay — white bg ──────────────────────────── */
.mobile-menu {
  background: var(--white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mobile-menu-link {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.mobile-menu-link:hover {
  color: var(--emerald-500) !important;
}

.mobile-menu-cta {
  font-family: var(--font-heading) !important;
  font-weight: 600;
  font-size: 16px;
  color: var(--white) !important;
  background: var(--emerald-500) !important;
  border-radius: var(--radius-md) !important;
}

.mobile-menu-cta:hover {
  background: var(--emerald-600) !important;
}


/* ================================================================
   FOOTER — dark 4-column (overrides old footer classes)
   ================================================================ */
footer.footer,
.footer {
  background: var(--navy-900) !important;
  border-top: 1px solid var(--navy-600);
  padding: var(--sp-16) 0 var(--sp-8);
  color: var(--text-muted-dark);
}

.footer .container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

/* ── 4-column grid (matches styles-v2.css homepage footer) ─── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
}

/* Footer Brand Column */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer-logo-img {
  max-height: 36px;
  width: auto;
  display: block;
  align-self: flex-start;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted-dark);
  max-width: 280px;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.footer-contact-info a,
.footer-contact-info span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  color: var(--text-muted-dark);
  transition: color var(--ease-default);
}

.footer-contact-info a:hover {
  color: var(--white) !important;
}

.footer-contact-info svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Footer Link Columns */
.footer-col h4 {
  font-family: var(--font-heading) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-col-links a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted-dark) !important;
  transition: color var(--ease-default);
}

.footer-col-links a:hover {
  color: var(--white) !important;
}

/* Footer Bottom Bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--navy-600) !important;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-legal {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted-dark);
  max-width: 600px;
}

.footer-meta {
  display: flex;
  gap: var(--sp-6);
}

.footer-meta a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted-dark);
  transition: color var(--ease-default);
}

.footer-meta a:hover {
  color: var(--white) !important;
}

/* ── Legacy footer overrides (old 3-col classes still in some pages) */
.footer-container {
  padding: var(--sp-16) 0 var(--sp-8);
  border-top: none;
}

.footer-main {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
  padding-bottom: 0;
  border-bottom: none;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer-links {
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted-dark) !important;
}

.footer-links a:hover {
  color: var(--white) !important;
}

.footer-contact a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted-dark) !important;
}

.footer-contact a:hover {
  color: var(--white) !important;
}

/* Override old footer-col h5 heading to match new h4 style */
.footer-col h5,
.footer-heading {
  font-family: var(--font-heading) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.footer-col a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted-dark) !important;
}

.footer-col a:hover {
  color: var(--white) !important;
}

/* ── Footer Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .footer-main {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer-main {
    grid-template-columns: 1fr !important;
    gap: var(--sp-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Nav Responsive — match styles-v2.css breakpoint ─────────── */
@media (max-width: 1024px) {
  .nav-links {
    display: none !important;
  }

  .nav-cta {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
  }
}

/* ================================================================
   INTERIOR PAGE CONTENT CONSISTENCY
   Aligns body, headings, sections, cards, buttons, links, and
   shared components across all 60+ interior pages with the
   styles-v2.css Swiss Modernism design system.
   ================================================================ */

/* ── Root Token Alignment (map old var names → new values) ──── */
:root { --text-on-light: #0F172A; --text-muted-light: #64748B; }

/* ── Body Defaults ──────────────────────────────────────────── */
body {
  color: var(--text-primary) !important;
  background: var(--white) !important;
  font-size: 16px; line-height: 1.7;
}

/* ── Headings — Poppins, remove Bebas Neue + gradient fills ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: normal !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}
h1 { font-size: clamp(30px, 4vw, 42px) !important; line-height: 1.15 !important; }
h2 { font-size: clamp(24px, 3vw, 32px) !important; line-height: 1.2 !important; }
h3 { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; }
h4 { font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; }
h5 { font-size: 12px !important; font-weight: 600 !important;
     text-transform: uppercase !important; letter-spacing: 0.1em !important; }

/* Headings in dark contexts stay white */
.service-hero h1, .service-hero h2,
.cta-banner h2, .contact-cta-section h2 { color: #FFFFFF !important; }

/* ── Content Links (in paragraphs / lists) ─────────────────── */
p a, li a, td a {
  color: #1E40AF !important;
  text-decoration: underline;
  text-decoration-color: rgba(30, 64, 175, 0.3);
  text-underline-offset: 2px;
  transition: color var(--ease-default);
}
p a:hover, li a:hover, td a:hover {
  color: var(--emerald-500) !important;
  text-decoration-color: rgba(58, 175, 79, 0.4);
}
/* Suppress underline on structured contexts */
.nav-links a, .nav-dropdown-menu a, .footer a,
.breadcrumb a, .cookie-consent a { text-decoration: none; }
/* Dark CTA links stay white */
.cta-banner p a { color: #FFFFFF !important; text-decoration-color: rgba(255,255,255,0.4); }

/* ── Sections ───────────────────────────────────────────────── */
.section { padding: 48px 0 !important; }
.section-light { background: var(--off-white) !important; color: var(--text-primary) !important; }
.section-dark { background: var(--navy-900) !important; color: #FFFFFF !important; }

/* ── Section Headers / Titles / Intros ─────────────────────── */
.section-title { margin-bottom: 24px; }
.section-title h2, h2.section-title {
  font-size: clamp(24px, 3vw, 32px) !important;
  color: var(--text-primary) !important;
  letter-spacing: normal !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}
.section-subtitle, .section-intro {
  font-family: var(--font-body) !important;
  font-size: 16px !important; line-height: 1.6 !important;
  color: var(--text-muted) !important;
}
.section-label {
  display: inline-block;
  font-family: var(--font-body) !important; font-weight: 500 !important;
  font-size: 12px !important; letter-spacing: 0.1em !important;
  text-transform: uppercase !important; color: var(--emerald-500) !important;
  margin-bottom: var(--sp-4);
}

/* ── Breadcrumb — dark navy bg merges with service-hero (eliminates white gap) */
.breadcrumb {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  background: var(--navy-900) !important;
  padding: 10px var(--sp-6) !important;
  margin: 0 !important;
  max-width: none !important;
}
.breadcrumb a { color: rgba(255,255,255,0.55) !important; text-decoration: none !important; }
.breadcrumb a:hover { color: var(--emerald-500) !important; }
.breadcrumb .separator { color: rgba(255,255,255,0.25) !important; margin: 0 8px; }
.breadcrumb span[aria-current], .breadcrumb .current { color: rgba(255,255,255,0.85) !important; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--emerald-500) !important; color: #FFFFFF !important;
  font-family: var(--font-heading) !important; font-weight: 600 !important;
  font-size: 14px !important; border: none !important;
  border-radius: var(--radius-md) !important; cursor: pointer;
  transition: background var(--ease-default), transform var(--ease-default);
}
.btn-primary:hover { background: var(--emerald-600) !important; color: #FFFFFF !important; transform: translateY(-1px); }
.btn-lg { padding: 16px 28px !important; font-size: 15px !important; }
.btn-sm { padding: 8px 20px !important; font-size: 13px !important; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading) !important; font-weight: 500 !important;
  font-size: 14px !important; color: var(--text-primary) !important;
  background: transparent !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color var(--ease-default), background var(--ease-default);
}
.btn-ghost:hover { border-color: var(--text-muted) !important; background: var(--off-white) !important; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading) !important; font-weight: 600 !important;
  background: transparent !important; border: 1px solid var(--border) !important;
  color: var(--text-primary) !important; border-radius: var(--radius-md) !important;
  transition: all var(--ease-default);
}
.btn-outline:hover { border-color: var(--text-muted) !important; background: var(--off-white) !important; }
.btn-submit { width: 100%; font-family: var(--font-heading) !important; font-weight: 600 !important; }

/* ── Service Hero — keep dark bg, align typography ──────────── */
.service-hero {
  background: linear-gradient(135deg, var(--navy-900) 0%, #111827 50%, #1E293B 100%) !important;
  padding: 32px 0 40px !important;
}
.service-hero-grid {
  align-items: start !important;
}
.service-hero h1 { font-size: clamp(30px, 4vw, 42px) !important; letter-spacing: -0.01em !important; color: #FFFFFF !important; }
.service-hero .subtitle {
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.5vw, 18px) !important;
  color: var(--text-muted-dark) !important; line-height: 1.6 !important;
}
.service-hero .btn-ghost { color: #FFFFFF !important; border-color: rgba(255,255,255,0.3) !important; }
.service-hero .btn-ghost:hover { border-color: rgba(255,255,255,0.6) !important; background: rgba(255,255,255,0.05) !important; }

/* ── Hero Card (sidebar in dark hero) ───────────────────────── */
.hero-card { border-radius: var(--radius-lg) !important; }
.hero-card-header span { font-family: var(--font-heading) !important; font-weight: 600 !important; color: #FFFFFF !important; }
.hero-card-text { font-family: var(--font-body) !important; color: var(--text-muted-dark) !important; }
.hero-card-stat-number { font-family: var(--font-heading) !important; font-weight: 700 !important; color: var(--emerald-500) !important; }
.hero-card-stat-label { font-family: var(--font-body) !important; color: var(--text-muted-dark) !important; }
.hero-card-platforms span { font-family: var(--font-body) !important; color: var(--text-muted-dark) !important; }
.hero-card-link { font-family: var(--font-heading) !important; font-weight: 500 !important; color: var(--emerald-500) !important; }
.hero-card-link:hover { color: var(--emerald-600) !important; }

/* ── Cards — unified container styling ──────────────────────── */
.feature-card, .deliverable-card, .capability-card,
.equipment-card, .trust-card, .platform-card,
.knowledge-card, .industry-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: border-color var(--ease-default), transform var(--ease-default);
}
.feature-card:hover, .deliverable-card:hover, .capability-card:hover,
.equipment-card:hover, .trust-card:hover, .platform-card:hover,
.knowledge-card:hover, .industry-card:hover {
  border-color: var(--emerald-500) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Card icons */
.feature-icon {
  background: rgba(58,175,79,0.08) !important;
  border: 1px solid rgba(58,175,79,0.15) !important;
  color: var(--emerald-500) !important;
}
.deliverable-card i, .deliverable-card svg,
.capability-card i, .icon-lg, .icon-md { color: var(--emerald-500) !important; }

/* Card headings — explicit dark color override (fixes glass-text inheritance) */
.feature-card h2, .feature-card h3, .feature-card h4,
.deliverable-card h2, .deliverable-card h3, .deliverable-card h4,
.capability-card h2, .capability-card h3, .capability-card h4,
.equipment-card h2, .equipment-card h3, .equipment-card h4,
.trust-card h2, .trust-card h3, .trust-card h4,
.platform-card h2, .platform-card h3, .platform-card h4,
.knowledge-card h2, .knowledge-card h3, .knowledge-card h4,
.industry-card h2, .industry-card h3, .industry-card h4 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Card body text */
.feature-card p, .feature-card .muted,
.deliverable-card p, .capability-card p,
.equipment-card p, .trust-card p,
.platform-card p, .platform-card .muted,
.knowledge-card p, .industry-card p {
  font-family: var(--font-body) !important;
  color: var(--text-muted) !important; line-height: 1.6 !important;
}
.platform-card strong, .industry-card strong {
  font-family: var(--font-heading) !important; color: var(--text-primary) !important;
}
.feature-link {
  font-family: var(--font-heading) !important; font-weight: 500 !important;
  font-size: 14px !important; color: var(--emerald-500) !important;
  text-decoration: none !important;
}
.feature-link:hover { color: var(--emerald-600) !important; }
.knowledge-card { border-left: 3px solid var(--emerald-500) !important; }
.knowledge-meta { font-family: var(--font-body) !important; color: var(--text-muted) !important; }

/* ── Platform Items ─────────────────────────────────────────── */
/* Override dark glass-bg from styles.css — platform items on interior pages use light card style */
.platform-item {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.5rem !important;
  transition: transform 0.2s, border-color 0.2s !important;
}
.platform-item:hover { transform: translateY(-2px) !important; border-color: var(--emerald-500) !important; }
.platform-item h3 { font-size: 16px !important; color: var(--text-primary) !important; }
.platform-item p {
  font-family: var(--font-body) !important; color: var(--text-muted) !important;
  font-size: 14px !important; line-height: 1.6 !important;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-item {
  background: var(--white) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important; margin-bottom: 12px !important;
}
.faq-item summary {
  font-family: var(--font-heading) !important; font-weight: 600 !important;
  font-size: 16px !important; color: var(--text-primary) !important; cursor: pointer;
}
.faq-item p, .faq-answer {
  font-family: var(--font-body) !important; color: var(--text-muted) !important;
  font-size: 15px !important; line-height: 1.7 !important;
}

/* ── Related Services Grid ──────────────────────────────────── */
.related-services a {
  background: var(--white) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important; color: var(--text-primary) !important;
  font-family: var(--font-heading) !important; font-weight: 600 !important;
  font-size: 16px !important; letter-spacing: normal !important;
  text-decoration: none !important;
  transition: border-color var(--ease-default), transform var(--ease-default);
}
.related-services a:hover { border-color: var(--emerald-500) !important; transform: translateY(-2px); }
.related-services a span {
  font-family: var(--font-body) !important; font-weight: 400 !important;
  font-size: 13px !important; color: var(--text-muted) !important;
  letter-spacing: normal !important;
}

/* ── Industries List (pill tags) ────────────────────────────── */
.industries-list a {
  background: var(--white) !important; border: 1px solid var(--border) !important;
  border-radius: 100px !important; color: var(--text-primary) !important;
  font-family: var(--font-body) !important; font-size: 14px !important;
  font-weight: 500 !important; text-decoration: none !important;
  transition: border-color var(--ease-default), color var(--ease-default);
}
.industries-list a:hover { border-color: var(--emerald-500) !important; color: var(--emerald-500) !important; }

/* ── Process Steps ──────────────────────────────────────────── */
.step-num {
  font-family: var(--font-heading) !important; font-weight: 700 !important;
  color: var(--emerald-500) !important;
  background: rgba(58,175,79,0.08) !important; border: 1px solid rgba(58,175,79,0.2) !important;
}
.process-step h3 { font-size: 16px !important; color: var(--text-primary) !important; }
.process-step > p {
  font-family: var(--font-body) !important; color: var(--text-muted) !important;
  font-size: 14px !important; line-height: 1.6 !important;
}

/* ── CTA Banner — keep emerald bg, align typography ─────────── */
.cta-banner { border-radius: var(--radius-lg) !important; }
.cta-banner h2 { font-size: clamp(22px, 3vw, 30px) !important; color: #FFFFFF !important; letter-spacing: normal !important; }
.cta-banner p {
  font-family: var(--font-body) !important; color: rgba(255,255,255,0.9) !important;
  font-size: 16px !important; line-height: 1.6 !important;
}
.cta-banner .btn-primary { background: #FFFFFF !important; color: var(--emerald-500) !important; }
.cta-banner .btn-primary:hover { background: var(--off-white) !important; color: var(--emerald-600) !important; }

/* ── Contact CTA Section (dark bg) ──────────────────────────── */
.contact-cta-section { background: var(--navy-900) !important; }
.contact-cta-section h2 { color: #FFFFFF !important; }
.contact-cta-subtext { font-family: var(--font-body) !important; color: var(--text-muted-dark) !important; }
.contact-cta-actions .btn-primary { background: var(--emerald-500) !important; color: #FFFFFF !important; }
.contact-cta-actions .btn-outline { border-color: #FFFFFF !important; color: #FFFFFF !important; }
.contact-cta-actions .btn-outline:hover { background: rgba(255,255,255,0.1) !important; }

/* ── Contact Page Elements ──────────────────────────────────── */
.contact-specialization { font-family: var(--font-body) !important; color: var(--emerald-500) !important; }
.contact-phone { font-family: var(--font-heading) !important; color: var(--emerald-500) !important; }
.contact-info-item strong { font-family: var(--font-heading) !important; color: var(--text-primary) !important; }
.contact-info-item .muted { color: var(--text-muted) !important; }
.contact-info-icon { background: var(--off-white) !important; border: 1px solid var(--border) !important; color: var(--emerald-500) !important; }
.contact-card {
  background: var(--off-white) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.contact-response-badge {
  font-family: var(--font-body) !important; color: var(--emerald-500) !important;
  background: rgba(58,175,79,0.06) !important; border-color: rgba(58,175,79,0.2) !important;
}

/* ── Form Elements ──────────────────────────────────────────── */
.input, .textarea, .select {
  font-family: var(--font-body) !important;
  background: var(--white) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important; color: var(--text-primary) !important;
  font-size: 15px !important;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--emerald-500) !important;
  box-shadow: 0 0 0 3px rgba(58,175,79,0.12) !important;
}
label { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 14px !important; color: var(--text-primary) !important; }

/* ── About Page ─────────────────────────────────────────────── */
.about-text { font-family: var(--font-body) !important; color: var(--text-muted) !important; font-size: 15px !important; line-height: 1.7 !important; }
.about-stat { background: var(--off-white) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.about-stat-num { font-family: var(--font-heading) !important; color: var(--text-primary) !important; letter-spacing: normal !important; }
.about-stat-label { font-family: var(--font-body) !important; color: var(--text-muted) !important; }
.about-highlight { background: var(--off-white) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.about-highlight strong { font-family: var(--font-heading) !important; color: var(--text-primary) !important; }
.about-highlight-text { font-family: var(--font-body) !important; color: var(--text-muted) !important; }
.about-highlight-icon { background: rgba(58,175,79,0.08) !important; color: var(--emerald-500) !important; }
.timeline-dot { background: var(--emerald-500) !important; }
.timeline-content strong { font-family: var(--font-heading) !important; color: var(--text-primary) !important; }
.timeline-content p { font-family: var(--font-body) !important; color: var(--text-muted) !important; }
.cta-band h3 { color: var(--text-primary) !important; }
.cta-quote { font-family: var(--font-body) !important; color: var(--text-muted) !important; font-style: italic; }

/* ── Knowledge Article Typography ───────────────────────────── */
.article-intro { font-family: var(--font-body) !important; font-size: 17px !important; line-height: 1.7 !important; color: var(--text-primary) !important; }
.container-narrow h2 { font-size: 24px !important; margin-top: 40px !important; margin-bottom: 12px !important; }
.container-narrow h3 { font-size: 18px !important; margin-top: 32px !important; margin-bottom: 8px !important; }
.container-narrow p { font-size: 16px !important; line-height: 1.7 !important; color: var(--text-primary) !important; margin-bottom: 16px !important; }
.container-narrow ul, .container-narrow ol { margin-bottom: 16px !important; padding-left: 24px !important; }
.container-narrow ul { list-style: disc !important; }
.container-narrow ol { list-style: decimal !important; }
.container-narrow li { font-size: 15px !important; line-height: 1.7 !important; color: var(--text-primary) !important; margin-bottom: 8px !important; }

/* ── Muted Text (universal) ─────────────────────────────────── */
.muted, .text-muted { color: var(--text-muted) !important; }

/* ── Misc — tags, captions, icons, cookie consent ───────────── */
.tag { font-family: var(--font-body) !important; font-size: 12px !important; background: rgba(58,175,79,0.08) !important; color: var(--emerald-500) !important; border-radius: 100px !important; }
.photo-grid-caption { font-family: var(--font-body) !important; color: var(--text-muted) !important; }
.industry-icon { color: var(--emerald-500) !important; }
.social-proof-card { border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; background: var(--white) !important; }
.service-detail summary, .service-detail-header { font-family: var(--font-heading) !important; color: var(--text-primary) !important; }
.accordion-arrow { color: var(--text-muted) !important; }
.service-detail.is-open .accordion-arrow { color: var(--emerald-500) !important; }

/* Cookie consent */
.cookie-consent { background: var(--white) !important; border-top: 1px solid var(--border) !important; }
.cookie-consent-content p { font-family: var(--font-body) !important; font-size: 13px !important; color: var(--text-muted) !important; }
.cookie-consent-content p a { color: var(--emerald-500) !important; }
.cookie-consent-actions .btn { font-family: var(--font-heading) !important; border-radius: var(--radius-md) !important; }
.cookie-consent-actions .btn-primary { background: var(--emerald-500) !important; color: var(--white) !important; }
.cookie-consent-actions .btn-primary:hover { background: var(--emerald-600) !important; }
.cookie-consent-actions .btn-outline { border: 1px solid var(--border) !important; color: var(--text-muted) !important; background: transparent !important; }
.cookie-consent-actions .btn-outline:hover { background: var(--off-white) !important; }

/* ── Content Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 32px 0 !important; }
  h1 { font-size: clamp(26px, 6vw, 34px) !important; }
  h2 { font-size: clamp(22px, 5vw, 28px) !important; }
  .service-hero { padding: 20px 0 32px !important; }
  .section-title { margin-bottom: 16px; }
}