/* ==========================================================
   AI HEADHUNTER — Font Resilience Layer
   Load this AFTER styles-v4.css.
   Purpose: if Google Fonts ever fails to load, the site falls
   back to clean, professional system fonts instead of breaking.
   Only overrides the three font variables — nothing else.
   ========================================================== */
/* Make the ampersand (&) render in a plain, non-curly font everywhere.
   We define a font family that only covers the & character (U+0026),
   pulling it from Inter Tight (clean ampersand), and place it FIRST in
   the serif stack so headings show a simple & but keep Fraunces for letters. */
@font-face {
  font-family: 'PlainAmp';
  src: local('Inter Tight'), local('Inter'), local('Arial');
  unicode-range: U+0026; /* only the & */
}

:root {
  /* Make all section/card backgrounds white instead of light grey */
  --bg: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #ffffff;

  /* Lighten the dark blue accent (was #003580 — too dark) */
  --accent: #1657a0;
  --accent-2: #2e72c0;

  /* Serif (headlines): PlainAmp handles &, then Fraunces for everything else */
  --serif: 'PlainAmp', 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

  /* Sans (body): Inter Tight, then native system UI fonts (clean on every device) */
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Mono (eyebrows/labels): JetBrains Mono, then native monospace fonts */
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ==========================================================
   TIGHTEN SPACING
   The all-white background made the large section paddings read
   as too much empty space. Pull the vertical padding in so
   sections sit closer together and the page feels less sparse.
   ========================================================== */
header.page-head { padding: 100px 48px 48px !important; }
.cta-block { padding: 72px 48px !important; }
.block { padding-top: 52px !important; padding-bottom: 52px !important; }
.pull-quote { padding: 60px 48px !important; }
.schedule-layout { padding-bottom: 64px !important; }
.stats-band, .clients-stats, .included-band, .trust-band { padding-top: 64px !important; padding-bottom: 64px !important; }

/* ==========================================================
   TWO-WAY SECTION ROTATION
   Sections alternate: BLUE (white text) → WHITE (dark text).
   Burgundy is used ONLY sparingly as a thin accent border,
   never as a section background.
   ========================================================== */

/* --- BLUE sections (white text) --- */
.stats-band,
.clients-stats,
.included-band,
.trust-band,
.pull-quote,
.cta-block,
.block:nth-of-type(even),
.function-block:nth-of-type(even) {
  background: #2e72c0 !important;
  border-top: 4px solid #9b1c31 !important;
}
.stats-band, .stats-band *,
.clients-stats, .clients-stats *,
.included-band, .included-band *,
.trust-band, .trust-band *,
.pull-quote, .pull-quote *,
.cta-block, .cta-block *,
.block:nth-of-type(even), .block:nth-of-type(even) *,
.function-block:nth-of-type(even), .function-block:nth-of-type(even) * {
  color: #ffffff !important;
}

/* --- WHITE sections (dark text, blue headings) --- */
.block:nth-of-type(odd),
.function-block:nth-of-type(odd),
.testi-section,
.industries-section {
  background: #ffffff !important;
  border-top: 3px solid #9b1c31 !important;
}
.block:nth-of-type(odd) p,
.block:nth-of-type(odd) li,
.block:nth-of-type(odd) td,
.block:nth-of-type(odd) .section-lede,
.block:nth-of-type(odd) .section-num,
.function-block:nth-of-type(odd) p,
.function-block:nth-of-type(odd) li,
.testi-section p, .testi-section li,
.industries-section p, .industries-section li {
  color: #1a2632 !important;
}
.block:nth-of-type(odd) h2,
.block:nth-of-type(odd) h3,
.block:nth-of-type(odd) h4,
.block:nth-of-type(odd) .section-title,
.function-block:nth-of-type(odd) h2,
.function-block:nth-of-type(odd) h3,
.function-block:nth-of-type(odd) h4 {
  color: #1657a0 !important;
}

/* Salary/comparison tables — readable in WHITE sections (dark text) */
.function-block:nth-of-type(odd) th,
.function-block:nth-of-type(odd) td,
.block:nth-of-type(odd) th,
.block:nth-of-type(odd) td {
  color: #1a2632 !important;
}
.function-block:nth-of-type(odd) thead,
.block:nth-of-type(odd) thead {
  background: #eef2f7 !important;
}
/* Salary/comparison tables — readable in BLUE sections (white text, translucent header) */
.function-block:nth-of-type(even) th,
.function-block:nth-of-type(even) td,
.block:nth-of-type(even) th,
.block:nth-of-type(even) td {
  color: #ffffff !important;
}
.function-block:nth-of-type(even) thead,
.block:nth-of-type(even) thead {
  background: rgba(255,255,255,0.15) !important;
}

/* Buttons inside blue sections: white button with blue text */
.stats-band .btn, .clients-stats .btn, .included-band .btn,
.trust-band .btn, .pull-quote .btn, .cta-block .btn,
.cta-block a.btn,
.block:nth-of-type(even) .btn,
.function-block:nth-of-type(even) .btn {
  background: #ffffff !important;
  color: #1657a0 !important;
  border-color: #ffffff !important;
}

/* Forms must always stay readable: white field, dark text */
input, textarea, select {
  background: #ffffff !important;
  color: #05080c !important;
}

/* ==========================================================
   CLIENT LOGOS — always readable
   Give each logo its own white card background so logos are
   clearly visible regardless of the section's color.
   ========================================================== */
.company-card,
.companies-grid > div,
div[style*="background: var(--bg-2)"] {
  background: #ffffff !important;
  border: 1px solid #dde3ed !important;
}
.company-card img,
.companies-grid img,
div[style*="background: var(--bg-2)"] img[src*="images/"] {
  filter: brightness(0) invert(0.18) !important;
  opacity: 0.9 !important;
}
.company-card img.keep-color,
.companies-grid img.keep-color {
  filter: none !important;
  opacity: 1 !important;
}
/* The section holding the logos: keep it readable */
.block:has(.companies-grid),
.block:has(.company-card) {
  background: #ffffff !important;
}
.block:has(.companies-grid) h2,
.block:has(.companies-grid) h3,
.block:has(.company-card) h2,
.block:has(.company-card) h3 {
  color: #05080c !important;
}

/* ==========================================================
   PROTECT SPECIFIC ELEMENTS from the section color override
   Role chips, tables, and ledes keep readable colors no matter
   what color section they sit in.
   ========================================================== */
.role-chip {
  background: #ffffff !important;
  color: #1657a0 !important;
  border: 1px solid #1657a0 !important;
}
.role-chip.featured {
  background: #1657a0 !important;
  color: #ffffff !important;
  border-color: #1657a0 !important;
}
/* Tables always readable: white background, dark text */
.table-wrap, .table-wrap table, .compare-table, .compare-table table {
  background: #ffffff !important;
}
.table-wrap th, .table-wrap td {
  color: #1a2632 !important;
  background: #ffffff !important;
}
/* Comparison table: blue text in the cells */
.compare-table td, .compare-table th {
  color: #1657a0 !important;
  background: #ffffff !important;
}
.compare-table td.us {
  color: #1657a0 !important;
  font-weight: 600 !important;
}
.table-wrap thead, .compare-table thead,
.table-wrap th, .compare-table th {
  background: #eef2f7 !important;
  color: #1657a0 !important;
}
.table-wrap td.accent {
  color: #1657a0 !important;
}
/* Section intros readable by default */
.section-lede, .section-num { color: #1a2632 !important; }
/* but white when inside a blue section */
.block:nth-of-type(even) .section-lede,
.block:nth-of-type(even) .section-num,
.function-block:nth-of-type(even) .section-lede,
.cta-block .section-lede,
.pull-quote .section-lede {
  color: #ffffff !important;
}

/* ==========================================================
   FORCE-READABLE OVERRIDES (highest priority, end of file)
   These catch the specific boxes that were rendering white-on-white
   regardless of section rotation. Explicit, not position-based.
   ========================================================== */
/* Comparison table — always white bg, blue text */
.compare-table,
.compare-table table,
.compare-table thead,
.compare-table tbody,
.compare-table tr,
.compare-table th,
.compare-table td {
  background-color: #ffffff !important;
  color: #1657a0 !important;
}
.compare-table thead th {
  background-color: #eef2f7 !important;
  color: #1657a0 !important;
}
.compare-table td.us {
  background-color: #f0f5fb !important;
  color: #1657a0 !important;
  font-weight: 600 !important;
}
.compare-table td:first-child {
  color: #1a2632 !important;
}

/* Role chips — always white bg, blue text (featured = blue bg, white text) */
.role-chips .role-chip {
  background-color: #ffffff !important;
  color: #1657a0 !important;
  border: 1px solid #1657a0 !important;
}
.role-chips .role-chip.featured {
  background-color: #1657a0 !important;
  color: #ffffff !important;
}

/* Salary tables (.table-wrap) — always white bg, dark text */
.table-wrap,
.table-wrap table,
.table-wrap thead,
.table-wrap tbody,
.table-wrap tr,
.table-wrap th,
.table-wrap td {
  background-color: #ffffff !important;
  color: #1a2632 !important;
}
.table-wrap thead th {
  background-color: #eef2f7 !important;
  color: #1657a0 !important;
}

/* The subhead labels above tables — always blue, readable */
.subhead {
  color: #1657a0 !important;
}

/* ==========================================================
   TABLE OVERRIDE — beat the section-rotation specificity
   The nth-of-type rules have higher specificity, so tables in
   "even/blue" sections were still going white-on-white. These
   higher-specificity selectors force tables readable everywhere.
   ========================================================== */
.function-block .table-wrap,
.function-block .table-wrap table,
.function-block .table-wrap thead,
.function-block .table-wrap tbody,
.function-block .table-wrap tr,
.block .table-wrap,
.block .table-wrap table {
  background-color: #ffffff !important;
}
.function-block .table-wrap th,
.function-block .table-wrap td,
.block .table-wrap th,
.block .table-wrap td,
.function-block:nth-of-type(even) .table-wrap th,
.function-block:nth-of-type(even) .table-wrap td,
.function-block:nth-of-type(odd) .table-wrap th,
.function-block:nth-of-type(odd) .table-wrap td {
  background-color: #ffffff !important;
  color: #1a2632 !important;
}
.function-block .table-wrap thead th,
.block .table-wrap thead th,
.function-block:nth-of-type(even) .table-wrap thead th,
.function-block:nth-of-type(odd) .table-wrap thead th {
  background-color: #eef2f7 !important;
  color: #1657a0 !important;
}
.function-block .table-wrap td.accent,
.function-block:nth-of-type(even) .table-wrap td.accent {
  color: #1657a0 !important;
  font-weight: 600 !important;
}