@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@900&family=Noto+Sans:wght@400;500;600;700&display=swap');/* ============================================================
   The Ideal Vendor - PAGE CONTENT CSS (v5 UNIFIED)
   Lives in: CSS Hero > Custom CSS panel
   ----------------------------------------------------------------
   SCOPE: page content only (hero H1, body headings, paragraphs,
   Divi buttons). Header pills + Forminator live in Theme Options
   Custom CSS — do NOT duplicate them here.
   ----------------------------------------------------------------
   v5 changes from v4:
   - Added .qc-h2--centered utility class for centered Inter Black
     section headings with centered grey underline
   ============================================================ */
/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --qc-blue: #214c8a;
  --qc-blue-dark: #16365e;
  --qc-charcoal: #383838;
  --qc-muted: #6b6b6b;
  --qc-white: #ffffff;
  --qc-underline: #c4c4c4;
  --qc-underline-light: rgba(255, 255, 255, 0.4);
  --qc-accent: #f26522;
  --qc-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --qc-font-body: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qc-font-hero: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qc-h1-size: 3.75rem;
  --qc-h2-size: 2.5rem;
  --qc-h3-size: 1.75rem;
  --qc-body-size: 17px;
  --qc-body-leading: 1.7;
}
/* ============================================================
   COLOR UTILITY CLASSES
   Apply via Divi's CSS Class field on section/row/column/module.
   ============================================================ */
.qc-text--white,
.qc-text--white p,
.qc-text--white h1,
.qc-text--white h2,
.qc-text--white h3,
.qc-text--white h4,
.qc-text--white h5,
.qc-text--white h6,
.qc-text--white span,
.qc-text--white li,
.qc-text--white a {
  color: var(--qc-white) !important;
}
.qc-text--charcoal,
.qc-text--charcoal p,
.qc-text--charcoal h1,
.qc-text--charcoal h2,
.qc-text--charcoal h3,
.qc-text--charcoal h4,
.qc-text--charcoal h5,
.qc-text--charcoal h6,
.qc-text--charcoal span,
.qc-text--charcoal li {
  color: var(--qc-charcoal) !important;
}
.qc-text--blue,
.qc-text--blue p,
.qc-text--blue h1,
.qc-text--blue h2,
.qc-text--blue h3,
.qc-text--blue h4,
.qc-text--blue h5,
.qc-text--blue h6,
.qc-text--blue span,
.qc-text--blue li {
  color: var(--qc-blue) !important;
}
.qc-text--blue-dark,
.qc-text--blue-dark p,
.qc-text--blue-dark h1,
.qc-text--blue-dark h2,
.qc-text--blue-dark h3,
.qc-text--blue-dark span,
.qc-text--blue-dark li {
  color: var(--qc-blue-dark) !important;
}
.qc-text--muted,
.qc-text--muted p,
.qc-text--muted h1,
.qc-text--muted h2,
.qc-text--muted h3,
.qc-text--muted span,
.qc-text--muted li {
  color: var(--qc-muted) !important;
}
.qc-text--accent,
.qc-text--accent p,
.qc-text--accent h1,
.qc-text--accent h2,
.qc-text--accent h3,
.qc-text--accent span,
.qc-text--accent li,
.qc-text--accent a {
  color: var(--qc-accent) !important;
}
.qc-text--white h1::after,
.qc-text--white h2::after,
.qc-text--white h3::after {
  background: var(--qc-underline-light) !important;
}
.qc-bg--white {
  background-color: var(--qc-white) !important;
}
.qc-bg--charcoal {
  background-color: var(--qc-charcoal) !important;
}
.qc-bg--blue {
  background-color: var(--qc-blue) !important;
}
.qc-bg--blue-dark {
  background-color: var(--qc-blue-dark) !important;
}
.qc-bg--accent {
  background-color: var(--qc-accent) !important;
}
/* ============================================================
   BODY HEADINGS - default DM Serif Display with 70% underline
   ============================================================ */
h1,
h2,
h3,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3 {
  font-family: var(--qc-font-display) !important;
  font-weight: 400 !important;
  color: var(--qc-blue) !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: inline-block !important;
  position: relative;
  padding-bottom: 0.4em;
  margin-bottom: 0.6em;
}
h1::after,
h2::after,
h3::after,
.entry-content h1::after,
.entry-content h2::after,
.entry-content h3::after,
.et_pb_text h1::after,
.et_pb_text h2::after,
.et_pb_text h3::after,
.et_pb_module h1::after,
.et_pb_module h2::after,
.et_pb_module h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  background: var(--qc-underline);
}
h1,
.entry-content h1,
.et_pb_text h1,
.et_pb_module h1 {
  font-size: var(--qc-h1-size) !important;
}
h1::after,
.entry-content h1::after,
.et_pb_text h1::after,
.et_pb_module h1::after {
  height: 3px;
}
h2,
.entry-content h2,
.et_pb_text h2,
.et_pb_module h2 {
  font-size: var(--qc-h2-size) !important;
}
h2::after,
.entry-content h2::after,
.et_pb_text h2::after,
.et_pb_module h2::after {
  height: 2px;
}
h3,
.entry-content h3,
.et_pb_text h3,
.et_pb_module h3 {
  font-size: var(--qc-h3-size) !important;
}
h3::after,
.entry-content h3::after,
.et_pb_text h3::after,
.et_pb_module h3::after {
  height: 2px;
}
/* ============================================================
   HERO SECTION OVERRIDES
   Apply class "qc-hero" to the hero section in Divi UI
   (Section Settings > Advanced > CSS Class)
   ----------------------------------------------------------------
   Inter Black 900, white, 46px H1 (no underline)
   Selectors deliberately deep to outrank the default heading rules.
   ============================================================ */
.qc-hero h1,
.qc-hero .et_pb_module h1,
.qc-hero .et_pb_text h1,
.qc-hero .et_pb_heading h1,
.qc-hero .et_pb_text_inner h1,
.qc-hero h1.et_pb_heading {
  font-family: var(--qc-font-hero) !important;
  font-weight: 900 !important;
  font-size: 46px !important;
  color: var(--qc-white) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  text-align: center !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.5em !important;
  display: block !important;
}
/* Force span color inheritance INSIDE the H1
   (your orange "Premium Combo" span keeps its color via inline style) */
.qc-hero h1 span {
  font-family: var(--qc-font-hero) !important;
  font-weight: 900 !important;
}
/* Kill the underline pseudo-element on hero H1 */
.qc-hero h1::after,
.qc-hero .et_pb_module h1::after,
.qc-hero .et_pb_text h1::after,
.qc-hero .et_pb_heading h1::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}
/* ============================================================
   SECTION HEADING - centered, hero font, centered underline
   Apply class "qc-h2--centered" to the H2 element OR its
   parent Text/Module wrapper in Divi.
   Use case: large section intro headings like
   "Free Customization So They Fit Right In!"
   ============================================================ */
.qc-h2--centered h2,
h2.qc-h2--centered,
.qc-h2--centered .et_pb_text_inner h2 {
  font-family: var(--qc-font-hero) !important;
  font-weight: 900 !important;
  font-size: var(--qc-h2-size) !important;
  color: var(--qc-blue) !important;
  text-align: center !important;
  display: block !important;
  width: 100%;
  max-width: 700px;
  margin: 1em auto !important;
  letter-spacing: -0.01em;
  padding-bottom: 0.4em !important;
  position: relative;
}
.qc-h2--centered h2::after,
h2.qc-h2--centered::after,
.qc-h2--centered .et_pb_text_inner h2::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%);
  bottom: 0 !important;
  width: 60% !important;
  height: 2px !important;
  background: var(--qc-underline) !important;
}
/* ============================================================
   FULLWIDTH HEADER (Divi's Fullwidth Header module) overrides
   100% underline width when this module is used
   ============================================================ */
.et_pb_fullwidth_header h1,
.et_pb_fullwidth_header h2,
.et_pb_fullwidth_header h3,
.et_pb_fullwidth_header .et_pb_fullwidth_header_subhead {
  font-family: var(--qc-font-display) !important;
  font-weight: 400 !important;
  color: var(--qc-blue) !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: inline-block !important;
  position: relative;
  padding-bottom: 0.4em;
  margin-bottom: 0.6em;
}
.et_pb_fullwidth_header h1::after,
.et_pb_fullwidth_header h2::after,
.et_pb_fullwidth_header h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--qc-underline);
}
.et_pb_fullwidth_header h1 {
  font-size: var(--qc-h1-size) !important;
}
.et_pb_fullwidth_header h1::after {
  height: 3px;
}
.et_pb_fullwidth_header h2 {
  font-size: var(--qc-h2-size) !important;
}
.et_pb_fullwidth_header h2::after {
  height: 2px;
}
.et_pb_fullwidth_header h3 {
  font-size: var(--qc-h3-size) !important;
}
.et_pb_fullwidth_header h3::after {
  height: 2px;
}
/* ============================================================
   BODY PARAGRAPHS
   ============================================================ */
p,
.entry-content p,
.et_pb_text p,
.et_pb_module p {
  font-family: var(--qc-font-body);
  font-size: var(--qc-body-size);
  line-height: var(--qc-body-leading);
  font-weight: 400;
}
/* ============================================================
   DIVI DEFAULT BUTTONS (.et_pb_button modules)
   Note: header navigation uses .qc-pill (Theme Options CSS).
   This rule covers Divi's native Button module if/when used in
   page content.
   ============================================================ */
.et_pb_button,
.et_pb_button_one,
.et_pb_button_two,
.et_pb_fullwidth_header .et_pb_button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 32px !important;
  font-family: var(--qc-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background-color: var(--qc-blue) !important;
  border: none !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  cursor: pointer;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(33, 76, 138, 0.2);
  transition: background-color 250ms ease-out, transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.et_pb_button:hover,
.et_pb_fullwidth_header .et_pb_button:hover {
  background-color: var(--qc-blue-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(33, 76, 138, 0.32);
}
.et_pb_button:after,
.et_pb_fullwidth_header .et_pb_button:after {
  display: none !important;
}
/* ============================================================
   RESPONSIVE TYPE SCALE
   ============================================================ */
/* ============================================================
   REDUCED MOTION FALLBACK
   ============================================================ */
@media (max-width: 980px) {
  :root {
    --qc-h1-size: 2.75rem;
    --qc-h2-size: 2rem;
    --qc-h3-size: 1.5rem;
    --qc-body-size: 16px;
  }
}
@media (max-width: 600px) {
  :root {
    --qc-h1-size: 2.25rem;
    --qc-h2-size: 1.75rem;
    --qc-h3-size: 1.375rem;
  }
  .et_pb_button,
  .et_pb_fullwidth_header .et_pb_button {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .et_pb_button,
  .et_pb_fullwidth_header .et_pb_button {
    transition: background-color 150ms ease-out;
  }
  .et_pb_button:hover,
  .et_pb_fullwidth_header .et_pb_button:hover {
    transform: none;
  }
}