/* =========================================================
   Inner Pages — Design System Override
   Aligns about/services/contact/areas pages with homepage
   (Poppins/Inter Tight + green/cream palette)
   ========================================================= */

/* Re-tokenize the legacy variables used by inner-page inline CSS
   (--char/--brass/--cream/--ink/--stone/--parch + font vars) */
:root {
  /* Surfaces */
  --char: #1F2933;          /* dark sections (was charcoal) */
  --char-soft: #2A3441;
  --char-mid: #3A4654;
  --cream: #F5F7F2;         /* page background */
  --parch: #E8F0E2;         /* soft green panel */
  /* Accent — was brass gold, now green-primary */
  --brass: #2F6D3A;
  --brass-lt: #3F8A4D;
  --brass-dk: #1F4D27;
  --brass-fog: rgba(47,109,58,.10);
  --brass-line: rgba(47,109,58,.22);
  /* Text */
  --ink: #1F2933;
  --stone: #5A6470;
  --stone-lt: #8A929D;
  --rule: rgba(31,41,51,.10);
  --rule-d: rgba(255,255,255,.08);
  /* Typography — match homepage */
  --fd: 'Poppins', system-ui, sans-serif;     /* display/headings */
  --fb: 'Inter Tight', system-ui, sans-serif; /* body */
  --fm: 'Inter Tight', system-ui, sans-serif; /* mono → use sans for consistency */
}

/* Body */
body { font-family: var(--fb); background: var(--cream); color: var(--ink); }

/* Headings: lighten the heavy 900 weights to homepage's 500/600 */
.pg-h1, .story-h2, .wd-h2, .si-h2, .sc-h2,
.values-head h2, .cb-left h2, .related-head h2,
.faq-l h2, .ch-h1, .form-title, .si-stat-n, .stat-n, .story-badge-n {
  font-family: var(--fd);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pg-h1 { font-weight: 500; }
.pg-h1 em, .story-h2 em, .wd-h2 em, .si-h2 em, .sc-h2 em,
.values-head h2 em, .cb-left h2 em, .related-head h2 em,
.faq-l h2 em, .ch-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}

/* Mono labels still use clean sans now */
.kk, .stat-l, .si-stat-l, .wd-i-n, .breadcrumb,
.nav-brand-sub, .nav-links a, .nav-tel,
.ft-col h5, .ft-bottom, .ft-meta {
  font-family: var(--fb);
}

/* ================= NAVIGATION (match homepage exactly) ================= */
#nav, nav.nav {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 100 !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #E4E7E0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
#nav .nav-inner, nav.nav .nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 32px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 24px;
}
#nav .logo, nav.nav .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
#nav .logo-text { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; color: #1F2933; line-height: 1.1; letter-spacing: -0.01em; }
#nav .logo-sub { font-size: 10px; letter-spacing: 0.12em; color: #5A6470; text-transform: uppercase; font-weight: 500; margin-top: 2px; }
#nav .nav-links { display: flex !important; align-items: center; gap: 36px !important; list-style: none; margin: 0 !important; padding: 0 !important; }
#nav .nav-links a { color: #1F2933 !important; text-decoration: none; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; opacity: 1; transition: color .2s; }
#nav .nav-links a::after { background: var(--brass); }
#nav .nav-links a:hover, #nav .nav-links a.active { color: var(--brass) !important; }
#nav .nav-cta { display: flex; align-items: center; gap: 16px; }
#nav .nav-phone { font-size: 14px; font-weight: 600; color: #1F2933; text-decoration: none; display: flex; align-items: center; gap: 6px; }
#nav .nav-phone:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6DBE45; box-shadow: 0 0 0 4px rgba(109,190,69,0.2); display: inline-block; }
#nav .nav-tel { color: #1F2933; font-family: var(--fb); font-weight: 600; font-size: 14px; }
#nav .nav-dot { background: #6DBE45; box-shadow: 0 0 0 4px rgba(109,190,69,0.2); }
.nav-burger { border-color: #E4E7E0; }
.nav-burger:hover { border-color: var(--brass); background: rgba(47,109,58,.06); }
.nav-burger span { background: #1F2933; }

@media (max-width: 900px) {
  #nav .nav-inner, nav.nav .nav-inner { padding: 16px 20px !important; }
  #nav .nav-links { display: none !important; }
  #nav .nav-phone span { display: none; }
}

/* Dropdown stays dark for legibility */
.dd-menu { background: rgba(31,41,51,0.97); border-color: rgba(47,109,58,.25); }
.dd-menu a:hover { background: rgba(47,109,58,.12); border-left-color: var(--brass); }

/* ================= BUTTONS ================= */
.btn-p {
  background: var(--brass);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 8px;
}
.btn-p:hover { background: var(--brass-dk); }
.btn-g {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px;
  padding: 11px 21px; border-radius: 8px;
}
.btn-dark {
  background: var(--brass);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 8px;
}
.btn-dark:hover { background: var(--brass-dk); }

/* ================= HERO (dark) ================= */
.pg-hero { background-color: var(--char); }
.pg-hero::before { background: radial-gradient(ellipse at 70% 30%, rgba(109,190,69,.10) 0%, transparent 60%) !important; }

/* ================= STATS BAND (now green) ================= */
.stats-band { background: var(--brass); }
.stat-n { color: #fff; font-weight: 600; }
.stat-l { color: rgba(255,255,255,0.75); letter-spacing: 0.1em; }

/* Story badge dark accent */
.story-badge { background: var(--char); }
.story-badge-n { color: #6DBE45; }

/* Service intro stat */
.si-stat-n { color: var(--brass); font-weight: 600; }

/* Values cards */
.val-num { color: rgba(109,190,69,0.25); font-weight: 600; }
.val-card:hover .val-num { color: rgba(109,190,69,0.55); }
.val-title { font-family: var(--fd); font-weight: 600; }

/* CTA band */
.cta-band { background: var(--brass); }
.cb-left h2 { color: #fff; }
.cb-left p { color: rgba(255,255,255,0.85); }
.cb-right .btn-dark { background: var(--char); }
.cb-right .btn-dark:hover { background: #000; }

/* Story lead, body text */
.story-lead, .si-lead { font-family: var(--fd); font-weight: 500; font-style: italic; border-left-color: var(--brass); color: var(--ink); }

/* Process numbers */
.wd-i-n { color: var(--brass); font-weight: 600; }

/* Quote card */
.wd-quote { background: var(--char); }
.wd-quote blockquote { font-family: var(--fd); }
.wd-quote cite { color: rgba(109,190,69,0.85); }

/* FAQ */
.faq-list .fq-btn, .faq-q-h3, .fq-btn { font-family: var(--fd); font-weight: 600; }
.fq-ico { color: var(--brass); }
.faq-l-tel { color: var(--brass); font-family: var(--fd); font-weight: 600; }

/* Related */
.rc-title { font-family: var(--fd); font-weight: 600; }
.rc-tag { color: var(--brass); }

/* Contact page */
.ch-h1 { font-family: var(--fd); font-weight: 500; }
.form-title, .form-eyebrow, .form-tagline { font-family: var(--fd); }
.ch-method-icon { color: var(--brass); }
.ch-step-n { color: var(--brass); font-family: var(--fd); }

/* ================= FOOTER (light cream like homepage) ================= */
footer {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border-top: 1px solid #E4E7E0;
}
.ft-grid { border-bottom-color: #E4E7E0; }
.ft-name { color: var(--ink); font-family: var(--fd); font-weight: 600; }
.ft-brand p { color: var(--stone); }
.ft-contact a { color: var(--ink); }
.ft-contact a:hover { color: var(--brass); }
.ft-tel { color: var(--brass) !important; font-family: var(--fd); font-weight: 600; }
.ft-col h5 { color: var(--stone-lt); letter-spacing: 0.1em; font-weight: 600; }
.ft-links a { color: var(--ink); }
.ft-links a:hover { color: var(--brass); }
.ft-bottom { color: var(--stone-lt); border-top-color: #E4E7E0; }

/* Mobile drawer keeps dark style but with new palette */
#mobile-drawer { background: rgba(31,41,51,0.98); border-left-color: rgba(47,109,58,.25); }
#mobile-drawer .md-cta { background: var(--brass); color: #fff; }
#mobile-drawer .md-tel { border-color: rgba(47,109,58,.4); }
#mobile-drawer a:hover { color: var(--brass); }
.md-close { border-color: rgba(47,109,58,.4); }
.md-close:hover { background: rgba(47,109,58,.12); }

/* Service inner page cards (full-width dark panels) — keep dark, accent green */
.svc-card { background: var(--char); }
.sc-num { color: var(--brass); font-weight: 600; }
.sc-list li::before { background: var(--brass); }

/* Comparison table */
.cmp-pill { background: var(--brass); color: #fff; }

/* Comparison pills */
.cta-band .btn-dark { background: var(--char); color: #fff; }

/* Ensure heading weight isn't overly heavy from inline 900 */
.pg-h1, .story-h2, .wd-h2, .si-h2, .sc-h2, .ch-h1,
.values-head h2, .cb-left h2, .faq-l h2 { font-weight: 500 !important; }
.val-title, .rc-title, .form-title, .wd-i-title { font-weight: 600 !important; }

/* Smooth out body text */
.story-body, .wd-body, .si-body, .sc-body p, .pg-hero-sub,
.values-head p, .faq-l p, .ft-brand p, .ch-sub {
  font-family: var(--fb);
  line-height: 1.7;
}

/* Eyebrow style */
.kk { color: var(--brass); letter-spacing: 0.14em; font-weight: 600; }
.kk::before { background: var(--brass); }
.kk.dim { color: var(--brass); opacity: 0.85; }
.kk.dim::before { background: var(--brass); opacity: 0.85; }

/* Breadcrumb on dark hero */
.breadcrumb a { color: rgba(109,190,69,0.85); }
.breadcrumb a:hover { color: #6DBE45; }

/* Dropdown menu — improve readability */
.dd-menu { background: rgba(31,41,51,0.98) !important; border-color: rgba(47,109,58,.35) !important; }
.dd-menu a { color: rgba(255,255,255,0.92) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; padding: 10px 22px !important; }
.dd-menu a:hover { color: #fff !important; background: rgba(47,109,58,0.25) !important; border-left-color: #6DBE45 !important; }