/* ============================================================
   Circi — Theme · Warm Peach variant
   Loaded LAST (after theme-navy-terracotta.css). Overrides only.
   - Header (nav + util) → #FFF0E4
   - Removes the dark navy section separator bars
   - Distinct alternating section backgrounds
   - Hero gets a light fresh-blue gradient
   - Trust pillars get a brownish (#A47251) fill
   ============================================================ */

/* ---- Header: utility bar + nav → warm peach ---- */
/* Utility bar stays navy (base styles.css) — no override here */

.nav {
  background: #F6F1E9 !important;
  border-bottom: 1px solid rgba(90,74,60,0.12) !important;
}
.nav.scrolled {
  background: rgba(246,241,233,0.94) !important;
  box-shadow: 0 1px 0 rgba(90,74,60,0.08) !important;
}
.nav .search-expand { background: rgba(246,241,233,0.97) !important; }

/* ---- Remove the navy 4px separator bars on every section ---- */
section.directory,
section.lc,
section.built,
section.testimonials,
section.trust,
section.ms,
.site-footer {
  border-top: 0 !important;
}

/* ---- Alternating, distinctive section backgrounds ---- */
/* Hero — soft blue gradient (shared with the two bands) */
.hero {
  background: linear-gradient(180deg, #E8F1FB 0%, #CFDFF4 100%) !important;
}

/* Directory — creamy */
.directory { background: #FAF6F0 !important; }

/* How It Works — soft blue band */
.lc {
  background: linear-gradient(180deg, #E8F1FB 0%, #CFDFF4 100%) !important;
}

/* Built For You — creamy */
.built { background: #FAF6F0 !important; }

/* Trust — soft blue band */
.trust {
  background: linear-gradient(180deg, #E8F1FB 0%, #CFDFF4 100%) !important;
  margin-top: 0 !important;
}

/* Reposition the referral toast so it tucks into the card cluster (not detached) */
.hero-split .card-referral {
  bottom: 92px !important;
  right: 30px !important;
}

/* Footer — warm stone to close */
.site-footer { background: #F6F1E9 !important; }

/* ---- Trust pillars → gapped light cards, deep-brown #3D251D on hover ---- */
.trust .pillars {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  gap: 18px !important;
}
.trust .pillar {
  background: #FFFFFF !important;
  border: 1px solid rgba(61,37,29,0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px -14px rgba(61,37,29,0.35);
  transition: transform .3s cubic-bezier(.4,0,.2,1),
              box-shadow .3s ease,
              background-color .3s ease,
              border-color .3s ease;
}
.trust .pillar:hover {
  background: #3D251D !important;
  border-color: #3D251D !important;
  transform: translateY(-8px);
  box-shadow: 0 30px 50px -22px rgba(61,37,29,0.6);
}

/* Icon — terracotta accent by default, white on hover */
.trust .pi-ico {
  background: rgba(209,117,86,0.12) !important;
  color: #D17556 !important;
  border-color: rgba(209,117,86,0.28) !important;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.trust .pillar:hover .pi-ico {
  background: rgba(255,255,255,0.16) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.30) !important;
  transform: scale(1.06);
}

/* Heading — warm terracotta touch by default, white on hover */
.trust .pi-label {
  color: #B85A3C !important;
  transition: color .3s ease;
}
.trust .pillar:hover .pi-label { color: #FFFFFF !important; }

/* Supporting line */
.trust .pi-line {
  color: var(--ink-2) !important;
  transition: color .3s ease;
}
.trust .pillar:hover .pi-line { color: rgba(255,255,255,0.85) !important; }

@media (prefers-reduced-motion: reduce) {
  .trust .pillar, .trust .pi-ico { transition: none !important; }
  .trust .pillar:hover { transform: none; }
  .trust .pillar:hover .pi-ico { transform: none; }
}

/* ============================================================
   TYPOGRAPHY — Spectral (display serif) + Hanken Grotesk (body)
   Replaces Poppins across the entire page.
   ============================================================ */

/* Base: everything in the warm humanist sans */
* {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif !important;
}

/* Big section headlines → editorial serif (incl. their accent spans) */
.hero-h, .hero-h *,
.dir-head h2, .dir-head h2 *,
.lc-heading, .lc-heading *,
.b-head h2, .b-head h2 *,
.t-head h2, .t-head h2 *,
.tr-head h2, .tr-head h2 *,
.section-title, .section-title *,
.ms-title, .ms-title *,
.statement, .statement * {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif !important;
  letter-spacing: -0.012em !important;
  line-height: 1.14 !important;
}

/* Serif accents stay in their italic for warmth where the design italicises */
.hero-h .accent, .lc-heading .muted, .dir-head h2 .muted,
.b-head h2 .muted, .tr-head h2 .muted {
  font-style: normal;
}

/* Card-level titles stay in the bold sans — give them comfortable leading */
.trust .pi-label { line-height: 1.3 !important; }
.lc-step-label, .built-col h3, .card-name { line-height: 1.3 !important; }

/* "Simplified by AI." accent → terracotta (not sage) */
.ai .section-title .accent { color: #D17556 !important; }

/* ============================================================
   AI section → medium blue with soft bubble discs (not deep navy)
   ============================================================ */
.ai {
  background: linear-gradient(165deg, #2F4577 0%, #243659 100%) !important;
}
/* Repurpose the (empty) ::after as floating bubbles, clipped by overflow:hidden */
.ai::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 86% 28%, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.085) 18%, transparent 18.7%),
    radial-gradient(circle at 99% 90%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 16%, transparent 16.7%),
    radial-gradient(circle at 74% 72%, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.055) 10%, transparent 10.7%),
    radial-gradient(circle at 9% 20%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 12%, transparent 12.7%) !important;
}
/* Keep all content above the bubble layer */
.ai > .wrap { position: relative; z-index: 2; }