/* ============================================================================
   IFS EXPERT INC. — EDITORIAL DESIGN SYSTEM
   Warm paper, graphite ink, serif display. Built for C-suite manufacturing
   buyers evaluating a senior IFS consultancy. Restraint. Typography. Air.
   ============================================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- Design tokens ---------- */
:root {
  /* Palette — warm paper, graphite ink. Senior. Considered. */
  --paper:        #f7f4ee;    /* page background — warm off-white */
  --paper-soft:   #ede8dc;    /* accent surfaces, section shifts */
  --card:         #fbf9f4;    /* cards, lighter surfaces */
  --ink:          #1a1a1c;    /* headings, primary text — near-black graphite */
  --ink-soft:     #3d3d42;    /* body text */
  --ink-mute:     #7a7a80;    /* meta, captions, eyebrows */
  --line:         #d9d3c4;    /* dividers, hairlines */
  --line-strong:  #b8b0a0;    /* stronger dividers */
  --graphite:     #2a2d34;    /* accent — deep graphite, used for buttons/CTAs */
  --graphite-hover: #14161b;  /* hover state */
  --accent-soft:  #5a5f6b;    /* muted graphite for secondary accents */
  --warning:      #8b3a1e;    /* used very sparingly for highlights */

  /* Typography */
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Editorial type scale */
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.31vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.44vw, 1.41rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.68vw, 1.76rem);
  --step-3:  clamp(1.73rem, 1.53rem + 1.01vw, 2.20rem);
  --step-4:  clamp(2.07rem, 1.79rem + 1.44vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.09rem + 2.02vw, 3.43rem);
  --step-6:  clamp(2.99rem, 2.44rem + 2.78vw, 4.29rem);
  --step-7:  clamp(3.58rem, 2.83rem + 3.79vw, 5.36rem);

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --measure: 62ch;
  --gutter: clamp(1.5rem, 4vw, 3rem);
  --max: 1360px;
  --max-narrow: 900px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.35s;
}

/* ============================================================================
   OVERRIDES for legacy enhanced-styles.css — force editorial defaults
   ============================================================================ */

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  font-family: var(--font-sans) !important;
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft) !important;
  background: var(--paper) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 400;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }

h1 em, h1 i, h2 em, h2 i, h3 em, h3 i {
  font-style: italic;
  color: var(--ink);
  opacity: 0.85;
}

p {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.7;
}

a { color: var(--ink); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--graphite-hover); }

.eyebrow, .eyebrow-tag, .hero-eyebrow {
  display: inline-block !important;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: var(--space-3) !important;
}

/* ---------- Header / Navigation ---------- */
.header, header.header {
  background: var(--paper) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.header.is-scrolled {
  border-bottom-color: var(--line) !important;
  background: rgba(247, 244, 238, 0.94) !important;
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
}

.navbar {
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: var(--space-3) var(--gutter) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
}

.logo img {
  height: 44px !important;
  width: auto !important;
}

.nav-links {
  display: flex !important;
  gap: var(--space-4) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
}

.nav-links li { margin: 0 !important; }

.nav-links a {
  font-family: var(--font-sans) !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  position: relative;
  padding: var(--space-1) 0 !important;
  background: transparent !important;
  border: 0 !important;
  transition: color var(--dur) var(--ease);
}

.nav-links a:hover {
  color: var(--ink) !important;
  background: transparent !important;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--ink);
  transition: width var(--dur) var(--ease);
}

.nav-links a:hover::after { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  background: var(--paper) !important;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter) clamp(3rem, 8vw, 6rem) !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: none !important;
}

.hero .container,
.hero > div {
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-family: var(--font-serif) !important;
  font-size: var(--step-7) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  max-width: 22ch;
  margin-bottom: var(--space-4) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

.hero h1 em, .hero h1 i {
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  position: relative;
}

/* Slight display bump on italic keyword — editorial signature */
h2 em, h2 i {
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}

.hero p {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: var(--step-2) !important;
  line-height: 1.4 !important;
  color: var(--ink-soft) !important;
  max-width: 52ch;
  margin-bottom: var(--space-5) !important;
  font-weight: 400 !important;
}

.hero-cta-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ---------- Buttons ---------- */
.btn, a.btn, button.btn {
  display: inline-block !important;
  font-family: var(--font-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 1.1rem 2rem !important;
  border-radius: 0 !important;
  border: 1px solid var(--ink) !important;
  transition: all var(--dur) var(--ease) !important;
  cursor: pointer;
  background: transparent !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary, a.btn-primary {
  background: var(--graphite) !important;
  color: var(--paper) !important;
  border-color: var(--graphite) !important;
}

.btn-primary:hover {
  background: var(--graphite-hover) !important;
  border-color: var(--graphite-hover) !important;
  color: var(--paper) !important;
}

.btn-secondary, a.btn-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}

.btn-secondary:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* ---------- Sections ---------- */
section {
  padding: clamp(4rem, 8vw, 7rem) var(--gutter) !important;
}

section > .container,
main > section > div:first-child {
  max-width: var(--max);
  margin: 0 auto;
}

/* Section titles */
.section-title {
  font-family: var(--font-serif) !important;
  font-size: var(--step-5) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: var(--space-4) !important;
  max-width: 20ch;
}

/* ---------- Cards / Feature grids ---------- */
.features-grid, .offer-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--line);
}

.feature-card, .offer-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: var(--space-5) var(--space-4) !important;
  box-shadow: none !important;
  transition: background var(--dur) var(--ease) !important;
}

.feature-card:hover, .offer-card:hover {
  background: var(--card) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Kill emoji icons — editorial doesn't do emoji */
.feature-card .feature-icon,
.offer-card > div:first-child[style*="font-size"],
.offer-card > div[style*="2.4em"] {
  font-size: 0 !important;
  display: none !important;
  margin: 0 !important;
}

.feature-card h3, .offer-card h3 {
  font-family: var(--font-serif) !important;
  font-size: var(--step-2) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin-bottom: var(--space-2) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

.feature-card p, .offer-card p {
  color: var(--ink-soft) !important;
  font-size: var(--step-0) !important;
  line-height: 1.65 !important;
}

/* ---------- Premium cards / link cards ---------- */
.premium-card, .premium-link-card, .cta-panel {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--space-5) !important;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}

.premium-link-card:hover, .premium-card:hover {
  border-color: var(--ink) !important;
  background: var(--card) !important;
  transform: none !important;
  box-shadow: none !important;
}

.premium-card h3, .premium-link-card h3, .cta-panel h3 {
  font-family: var(--font-serif) !important;
  font-size: var(--step-2) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin-bottom: var(--space-2) !important;
  letter-spacing: -0.01em !important;
}

.premium-card ul, .premium-link-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.premium-card ul li, .premium-link-card ul li {
  padding: var(--space-1) 0 !important;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--step-0);
}

.premium-card ul li:last-child, .premium-link-card ul li:last-child {
  border-bottom: 0;
}

/* CTA panel — inverse treatment for emphasis */
.cta-panel {
  background: var(--graphite) !important;
  border-color: var(--graphite) !important;
  color: var(--paper);
}

.cta-panel h3, .cta-panel h2 {
  color: var(--paper) !important;
}

.cta-panel p {
  color: rgba(247, 244, 238, 0.82) !important;
}

.cta-panel .btn {
  border-color: var(--paper) !important;
  color: var(--paper) !important;
}

.cta-panel .btn:hover {
  background: var(--paper) !important;
  color: var(--graphite) !important;
}

/* ---------- Section shifts (alternating tones) ---------- */
section[style*="background: var(--light-color)"],
section.section-alt {
  background: var(--paper-soft) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Trusted Partner band — restrain it */
section[style*="rgba(154, 166, 255"] {
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: var(--space-4) var(--gutter) !important;
}

section[style*="rgba(154, 166, 255"] p {
  color: var(--ink-mute) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ---------- Gallery / hero image ---------- */
#homepage-gallery {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--ink) !important;
  border: 1px solid var(--line);
  overflow: hidden;
}

#homepage-gallery-image {
  height: clamp(360px, 55vh, 560px) !important;
  filter: grayscale(0.15) contrast(1.02);
}

#homepage-gallery-tag {
  background: rgba(247, 244, 238, 0.14) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
}

#homepage-gallery-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  letter-spacing: -0.01em !important;
  color: var(--paper) !important;
}

#homepage-gallery-caption {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  color: rgba(247, 244, 238, 0.88) !important;
}

#homepage-gallery-prev,
#homepage-gallery-next {
  border-radius: 0 !important;
  background: rgba(247, 244, 238, 0.16) !important;
  backdrop-filter: blur(6px);
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(247, 244, 238, 0.2) !important;
}

/* ---------- Footer ---------- */
.footer, footer.footer {
  background: var(--ink) !important;
  color: var(--paper) !important;
  padding: var(--space-6) var(--gutter) !important;
  border-top: 0 !important;
}

.footer p {
  color: rgba(247, 244, 238, 0.7) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em;
}

.footer a {
  color: var(--paper) !important;
}

/* ---------- Utility ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap--narrow {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 48ch;
}

.rule {
  height: 1px;
  background: var(--line);
  margin: var(--space-6) 0;
  border: 0;
}

/* Hide/soften the floating AI advisor bubble to fit editorial tone */
.ifs-ai-advisor-toggle,
button[aria-label*="IFS AI"],
#ifs-ai-advisor-toggle {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(26, 26, 28, 0.18) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--ink) !important;
  padding: 12px 18px !important;
  opacity: 0.9;
  transition: opacity var(--dur) var(--ease);
}

.ifs-ai-advisor-toggle:hover,
button[aria-label*="IFS AI"]:hover,
#ifs-ai-advisor-toggle:hover {
  opacity: 1;
}

/* Style any AI advisor panel to match editorial */
.ifs-ai-advisor-panel,
#ifs-ai-advisor-panel {
  font-family: var(--font-sans) !important;
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
  box-shadow: 0 20px 60px rgba(26,26,28,0.15) !important;
}

/* ---------- Forms (contact page) ---------- */
input[type="text"], input[type="email"], input[type="tel"],
textarea, select {
  font-family: var(--font-sans) !important;
  font-size: var(--step-0) !important;
  padding: var(--space-2) var(--space-3) !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  transition: border-color var(--dur) var(--ease);
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: 0 !important;
  border-color: var(--ink) !important;
}

/* Standalone form labels (only when direct child of .field, not nested labels) */
.field > label,
form > label {
  font-family: var(--font-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  margin-bottom: var(--space-1) !important;
  display: block;
}

/* Interior labels (radio options, consent checkboxes) should read as natural editorial text */
label.priority-option,
label.priority-option *,
label.consent-row,
label.consent-row * {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--font-serif) !important;
  color: var(--ink) !important;
  font-size: inherit !important;
}
label.priority-option .p-hint,
label.consent-row span {
  color: var(--ink-soft) !important;
}

/* ---------- Blog / article typography ---------- */
article, .article, .blog-post {
  max-width: 68ch;
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
}

article h1, .article h1 {
  font-size: var(--step-5) !important;
  margin-bottom: var(--space-3);
}

article h2, .article h2 {
  font-size: var(--step-3) !important;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

article h3, .article h3 {
  font-size: var(--step-2) !important;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

article p, .article p {
  margin-bottom: var(--space-3);
  max-width: 62ch;
}

article ul li, article ol li, .article ul li, .article ol li {
  margin-bottom: var(--space-1);
  line-height: 1.7;
}

article blockquote, .article blockquote {
  border-left: 2px solid var(--ink);
  padding-left: var(--space-3);
  margin: var(--space-5) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--ink);
}

article code, .article code {
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--paper-soft);
  padding: 2px 6px;
  border-radius: 0;
}

article pre, .article pre {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3);
  overflow-x: auto;
  border-radius: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .navbar {
    padding: var(--space-2) var(--gutter) !important;
  }

  .nav-links {
    gap: var(--space-3) !important;
    flex-wrap: wrap;
  }

  .nav-links a {
    font-size: 0.68rem !important;
  }

  .hero h1 {
    font-size: var(--step-5) !important;
  }

  .hero p {
    font-size: var(--step-1) !important;
  }

  .features-grid, .offer-grid {
    grid-template-columns: 1fr !important;
  }

  .feature-card, .offer-card {
    border-right: 0 !important;
  }
}

@media (max-width: 560px) {
  .nav-links {
    display: none !important;
  }

  .hero {
    padding: var(--space-5) var(--gutter) var(--space-5) !important;
  }
}

/* ---------- Kill gradient text on section titles from legacy CSS ---------- */
.section-title,
h1, h2, h3 {
  background: none !important;
  -webkit-text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* ---------- Legacy variable shims (so any inline styles referring to
   --primary-color etc. still look editorial) ---------- */
:root {
  --primary-color: var(--ink);
  --secondary-color: var(--ink-soft);
  --accent-color: var(--graphite);
  --dark-color: var(--ink);
  --gray-color: var(--ink-soft);
  --light-color: var(--paper-soft);
  --border-color: var(--line);
  --white: var(--paper);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ============================================================================
   EDITORIAL OVERRIDES for legacy dark-navy panels and cards.
   The old enhanced-styles.css uses linear-gradient(rgba(15,27,45)…) on many
   classes AND on any inline style="background: white/#fff/#f8fafc/…" — an
   aggressive "dark-mode" upgrade rule. Undo it completely.
   ============================================================================ */

/* CRITICAL: reverse enhanced-styles.css transformation of inline "background: white"
   (and every other pale hex it targets) into a dark-navy gradient.
   Match the exact selector chain the old rule uses, so specificity + !important
   + later cascade order guarantee we win. */
main [style*="background: white"],
main [style*="background:white"],
main [style*="background: #ffffff"],
main [style*="background:#ffffff"],
main [style*="background: #fff"],
main [style*="background:#fff"],
main [style*="background: #f8fafc"],
main [style*="background:#f8fafc"],
main [style*="background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%)"],
main [style*="background: #eef2ff"],
main [style*="background:#eef2ff"],
main [style*="background: #f5f3ff"],
main [style*="background:#f5f3ff"],
main [style*="background: #ecfeff"],
main [style*="background:#ecfeff"],
main [style*="background: #fff1f2"],
main [style*="background:#fff1f2"],
main [style*="background: #fff7ed"],
main [style*="background:#fff7ed"],
section[style*="background: var(--light-color)"] {
  background: var(--card) !important;
  background-image: none !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Kill dark navy backgrounds from legacy cards */
article,
.premium-panel,
.premium-card,
.pricing-card,
section[style*="background: var(--light-color)"] > *,
main .feature-card,
main .offer-card,
main aside > div,
main aside article,
main .blog-card,
main .post-card,
main .article-card,
main .featured-post,
main .sidebar-widget,
main .content-card {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink-soft) !important;
}

/* Restore ink text color on formerly-dark cards */
article p, article h1, article h2, article h3, article h4, article h5, article li,
main [style*="background: white"] p,
main [style*="background: white"] h1,
main [style*="background: white"] h2,
main [style*="background: white"] h3,
main [style*="background: white"] h4,
main [style*="background: white"] li,
main [style*="background: white"] a,
main [style*="background: white"] div,
main [style*="background: white"] span,
.premium-card p, .premium-card h3, .premium-card h4, .premium-card li,
.premium-panel p, .premium-panel h2, .premium-panel h3,
.pricing-card p, .pricing-card h3, .pricing-card li,
main aside > div p, main aside > div h3, main aside > div h4, main aside > div li,
main aside > div a {
  color: var(--ink-soft) !important;
}

article h1, article h2, article h3, article h4,
main [style*="background: white"] h1,
main [style*="background: white"] h2,
main [style*="background: white"] h3,
main [style*="background: white"] h4,
.premium-card h3, .premium-card h4,
.premium-panel h2, .premium-panel h3,
.pricing-card h3,
main aside > div h3, main aside > div h4 {
  color: var(--ink) !important;
}

/* Kill inline gradient-heavy CTA panels used in blog and elsewhere
   These render as dark purple/navy — force them to editorial graphite */
main div[style*="linear-gradient(135deg, var(--primary-color)"],
main div[style*="linear-gradient(135deg,var(--primary-color)"],
main section[style*="linear-gradient(135deg, var(--primary-color)"],
main div[style*="linear-gradient(180deg, var(--primary-color)"],
main div[style*="background: linear-gradient(135deg, #"],
main section[style*="background: linear-gradient(135deg, #"] {
  background: var(--graphite) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

main div[style*="linear-gradient"] h1,
main div[style*="linear-gradient"] h2,
main div[style*="linear-gradient"] h3,
main div[style*="linear-gradient"] h4,
main div[style*="linear-gradient"] p,
main section[style*="linear-gradient"] h1,
main section[style*="linear-gradient"] h2,
main section[style*="linear-gradient"] h3,
main section[style*="linear-gradient"] p {
  color: var(--paper) !important;
}

/* Contact page dark elements — the process badges and any highlight cards */
.contact-process-badge {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 50% !important;
  font-family: var(--font-serif) !important;
}

.contact-highlight,
.contact-direct,
.contact-card {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink-soft) !important;
}

.contact-highlight h2, .contact-highlight h3, .contact-highlight h4,
.contact-direct h2, .contact-direct h3, .contact-direct h4,
.contact-card h2, .contact-card h3, .contact-card h4 {
  color: var(--ink) !important;
}

.contact-highlight p, .contact-direct p, .contact-card p,
.contact-highlight li, .contact-direct li, .contact-card li {
  color: var(--ink-soft) !important;
}

/* Inline colored icon backgrounds — soften to paper */
[style*="background: #10b981"],
[style*="background: #0ea5e9"],
[style*="background: #17a2b8"],
[style*="background: #007bff"],
[style*="background: #6366f1"],
[style*="background: #8b5cf6"] {
  background: var(--paper-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

/* "NEW" / "FEATURED" tag pills on blog cards */
article [style*="background: linear-gradient"],
article span[class*="badge"],
article span[class*="tag"],
article [style*="border-radius: 999"] {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
}

/* Blog list — each article a magazine feature, hairline dividers */
main article {
  padding: var(--space-5) var(--space-4) !important;
  margin-bottom: var(--space-3) !important;
}

main article a {
  color: var(--ink) !important;
}

main article a:hover {
  color: var(--graphite-hover) !important;
}

/* Fix .btn inside old dark CTA panels — treat as inverse */
.cta-panel .btn,
[style*="linear-gradient(135deg, var(--primary-color)"] .btn {
  background: transparent !important;
  color: var(--paper) !important;
  border: 1px solid var(--paper) !important;
}

.cta-panel .btn:hover,
[style*="linear-gradient(135deg, var(--primary-color)"] .btn:hover {
  background: var(--paper) !important;
  color: var(--graphite) !important;
}

/* Ensure any "background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color)"
   or similar inline that renders dark in the blog CTA aside is caught */
main aside div[style*="linear-gradient"],
main aside > div[style*="background:"] {
  background: var(--graphite) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

main aside div[style*="linear-gradient"] h3,
main aside div[style*="linear-gradient"] p,
main aside > div[style*="background:"] h3,
main aside > div[style*="background:"] p {
  color: var(--paper) !important;
}

main aside div[style*="linear-gradient"] a.btn,
main aside > div[style*="background:"] a.btn,
main aside div[style*="linear-gradient"] a {
  background: transparent !important;
  color: var(--paper) !important;
  border: 1px solid var(--paper) !important;
}