/* FazilatPro — font.override.css
   Combo #06 → Headings: DM Sans | Body: Roboto Slab
   Fonts-only override. No sizes/spacing/colors changed. */

/* Load fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700;800&family=Roboto+Slab:wght@400;500;600;700&display=swap');

/* Body/UI → Roboto Slab (serif) */
.fp{
  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings & heading-like elements → DM Sans */
.fp h1, .fp h2, .fp h3, .fp h4,
.fp .badge,
.fp .pill,
.fp #services .card h3,
.fp .home-how .card h3,
.fp.about-page #vmv77 .card h3,
.fp.about-page .how .card h3,
.fp.about-page #serve63 .card h3,
.fp.contact-page .talk-card h3,
.fp.why-page .hero h1{
  font-family: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   FazilatPro — Typography Lock (Global, Page-Agnostic)
   Purpose: unify font sizes across ALL pages without
   touching style.final.css. Loads last → overrides safely.
   ========================================================= */

/* Scale tokens (one source of truth) */
.fp{
  --h1: clamp(34px, 4.6vw, 56px);
  --h2: clamp(22px, 3.0vw, 34px);
  --h3: clamp(18px, 2.2vw, 22px);
  --body: 18px;
  --lede: 20px;
  --lh-tight: 1.15;
  --lh-body: 1.6;
}

/* Headings */
.fp h1,.fp h2,.fp h3,.fp h4{
  line-height: var(--lh-tight);
  color: var(--brand-ink);
  margin: 0 0 10px;
}
.fp h1{ font-size: var(--h1); font-weight: 800; }
.fp h2{ font-size: var(--h2); font-weight: 800; }
.fp h3{ font-size: var(--h3); font-weight: 700; }

/* Body & lists */
.fp, .fp p, .fp li{
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.fp p{ margin: 12px 0; }

/* Lede paragraphs (intros) */
.fp .lede{
  font-size: var(--lede);
  color: var(--ink-700);
  font-weight: 500; /* ensure not bold unless <strong> is used */
}

/* UI sizes */
.fp .badge, .fp .pill, .fp .btn{ font-size: 16px; font-weight: 700; }
.fp nav[aria-label="Primary"] a{ font-size: 16px; font-weight: 700; }

/* Forms */
.fp label{ font-size: 16px; font-weight: 600; }
.fp input, .fp select, .fp textarea{ font-size: 16px; }

/* ---- Neutralize any page-scoped font-size rules below ----
   (Loaded last, so these win without !important.)
   Keep page-specific COLORS elsewhere; we only unify sizes. */
.fp.about-page .hero h1,
.fp.why-page   .hero h1,
.fp.services-page .svc-hero h1{ font-size: var(--h1); }

.fp.about-page h2,
.fp.why-page   h2,
.fp.services-page h2{ font-size: var(--h2); }

.fp.about-page h3,
.fp.why-page   h3,
.fp.services-page h3{ font-size: var(--h3); }

.fp.about-page p,
.fp.why-page   p,
.fp.services-page p{ font-size: var(--body); }

.fp.about-page .lede,
.fp.why-page   .lede,
.fp.services-page .lede{ font-size: var(--lede); font-weight: 500; }

/* ================================
   FazilatPro — Global Rhythm (override)
   Goal: same vertical pace across pages without color changes
   Safe to paste at END of font.override.css
   ================================ */

/* 1) Section padding: unified (desktop / tablet / mobile) */
.fp section{ 
  padding: clamp(28px, 5.2vw, 56px) 0 !important;
}

/* 2) Hero blocks: align all hero variants to same vertical rhythm */
.fp .hero,
.fp .svc-hero,
.fp .contact-hero{
  padding: clamp(44px, 6vw, 88px) 0 !important;
}

/* 3) Section heads: consistent gap under label and under h2 */
.fp .section-head{ 
  margin-bottom: clamp(10px, 2vw, 16px) !important;
}
.fp .section-head h2{
  margin: 6px 0 6px !important;
}
.fp .section-head p,
.fp .section-head .lede{
  margin: 0 !important;
}

/* 4) Grid gap normalization */
.fp .grid{ gap: clamp(16px, 2.4vw, 28px) !important; }

/* 5) Cards grids: stable gutters across lists */
.fp .cards{ gap: clamp(16px, 2.4vw, 24px) !important; }

/* 6) Hero copy tweaks: tidy badge/h1/lede spacing */
.fp .badge{ margin-bottom: 10px !important; }
.fp .hero h1,
.fp .svc-hero h1,
.fp .contact-hero h1{
  margin: 8px 0 8px !important;
}
.fp .hero .lede,
.fp .svc-hero .lede,
.fp .contact-hero .lede{
  margin: 0 !important;
}

/* 7) Button rows: consistent spacing without inline styles */
.fp .btn-row,
.fp .hero .btn-row{
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px !important;
}
/* If your HTML uses inline styles on button rows, this still wins due to cascade order+!important. */

/* 8) Between sections: keep the thin divider only when stacking content sections */
.fp section + section{ border-top: 1px solid var(--line); }

/* 9) FAQ & CTA minor tightening (keeps your existing look) */
.fp #faq .section-head,
.fp #contact-cta .section-head{ margin-bottom: 6px !important; }

/* === PERMANENT — unified hero/section rhythm (no debug visuals) === */

/* 1) One hero height rhythm across Home/About/Why/Services/Contact */
.fp .hero,
.fp .svc-hero,
.fp .contact-hero{
  padding: clamp(48px, 6vw, 96px) 0;
}

/* 2) Section-head spacing (pill + H2 block) */
.fp .section-head{
  margin: 0 0 12px;
}

/* 3) Headline rhythm (keeps your token sizes, just the spacing) */
.fp h1{ margin: 10px 0 8px; }
.fp h2{ margin: 8px 0 6px; }

/* 4) Grid/card gaps – keep tidy & consistent */
.fp .grid{ gap: 24px; }
.fp .cards{ gap: 18px; }


/* ================================
   RHYTHM — PRODUCTION PASS
   Put at END of font.override.css
   ================================ */

/* 1) Global section vertical rhythm (subtle, consistent) */
.fp section { 
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

/* 2) CTA strips — a touch tighter so they feel like interludes */
.fp #contact-cta,
.fp .cta-ready,
.fp section.cta,
.fp section[id*="cta"] {
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(28px, 4vw, 52px);
}

/* 3) Headline + lede rhythm */
.fp .section-head h2,
.fp h2 { 
  margin: 0 0 clamp(12px, 2vw, 20px);
  line-height: 1.15;
}
.fp .section-head .lede,
.fp p.lede {
  margin-top: clamp(6px, 1vw, 10px);
  margin-bottom: clamp(16px, 1.8vw, 22px);
  font-size: clamp(18px, 1.6vw, 20px);
}

/* 4) Grid/card spacing */
.fp .cards,
.fp .grid { gap: clamp(16px, 2vw, 24px); }

/* 5) Footer lock — remove accidental extra visual gap above footer */
.fp main > section:last-of-type {
  padding-bottom: clamp(32px, 4.5vw, 56px);
}