/* ============================================================
   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 — cream/stone panel (like How It Works), dark text, orange primary button */
.hero {
  background: #EAE0D4 !important;
}
/* Consistent orange CTAs: nav Get started, directory Search + Browse All */
.nav .btn-navy,
.directory .search-btn,
.directory .foot-cta .primary {
  background: #C4562A !important;
  border-color: #C4562A !important;
  color: #fff !important;
}
.nav .btn-navy:hover,
.directory .search-btn:hover,
.directory .foot-cta .primary:hover {
  background: #D9704A !important;
  border-color: #D9704A !important;
  color: #fff !important;
}
.nav .btn-navy:hover svg path,
.directory .foot-cta .primary:hover svg path { stroke: #fff !important; }

/* Eyebrow pill → radiant navy for contrast on cream */
.hero .hero-pill {
  background: linear-gradient(135deg, #3A5C8C 0%, #2A456F 60%, #243A5E 100%) !important;
  border: 1px solid rgba(72,112,166,0.45) !important;
  color: #F0E9DF !important;
  box-shadow: 0 14px 32px -12px rgba(42,69,111,0.65),
              inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
.hero .hero-pill .pill-tag {
  background: #fff !important;
  color: #C4562A !important;
}
/* Headline → navy; accent stays orange */
.hero .hero-h { color: #2A456F !important; }
.hero .hero-h .accent { color: #C4562A !important; }
.hero .hero-lede { color: #4A5775 !important; }

/* Primary CTA → solid orange */
.hero .btn-navy {
  background: #C4562A !important;
  border-color: #C4562A !important;
  color: #fff !important;
}
.hero .btn-navy:hover {
  background: #D9704A !important;
  border-color: #D9704A !important;
}
/* Secondary CTA → navy ghost outline on cream */
.hero .btn-ghost {
  background: transparent !important;
  border-color: rgba(42,69,111,0.30) !important;
  color: #2A456F !important;
}
.hero .btn-ghost:hover {
  background: rgba(42,69,111,0.06) !important;
  border-color: #2A456F !important;
  color: #2A456F !important;
}

/* Trust strip → dark on cream */
.hero .hero-trust { border-color: rgba(42,69,111,0.16) !important; }
.hero .htrust-icon { color: #C4562A !important; }
.hero .htrust-text strong { color: #2A456F !important; }
.hero .htrust-text span { color: #6B5E52 !important; }
.hero .htrust-divider { background: rgba(42,69,111,0.16) !important; }

/* Stats row → white band, full-bleed and flush to hero bottom */
.hero.hero-split { padding-bottom: 0 !important; }
.hero .hero-stats {
  background: #FFFFFF !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  padding: 34px 48px !important;
  box-shadow: none !important;
  margin: 56px 0 0 !important;
  max-width: none !important;
  border-bottom: 3px solid #C4562A !important;
}
.hero .hero-stats::before { display: none !important; }
.hero .hero-stats-label { color: #8A7A6B !important; }
.hero .hs { border-left-color: rgba(61,37,29,0.14) !important; }
.hero .hs-num { color: #2A456F !important; }
.hero .hs-num sup { color: #C4562A !important; }
.hero .hs-label { color: #6B5E52 !important; }

/* Referral toast → navy for contrast on cream */
.hero .card-referral {
  background: #2A456F !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 18px 40px -16px rgba(42,69,111,0.6) !important;
}
.hero .card-referral .ref-icon {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.hero .card-referral .ref-icon svg { color: #fff !important; }
.hero .card-referral .ref-label { color: rgba(255,255,255,0.6) !important; }
.hero .card-referral .ref-time { color: rgba(255,255,255,0.5) !important; }
.hero .card-referral .ref-body { color: rgba(255,255,255,0.85) !important; }
.hero .card-referral .ref-body strong { color: #E89274 !important; }

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

/* How It Works — warm stone band */
.lc {
  background: #EAE0D4 !important;
}

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

/* Trust — warm stone band */
.trust {
  background: #EAE0D4 !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 — deep navy close */
.site-footer { background: #1D2F58 !important; }
.site-footer,
.site-footer .col-brand .tagline,
.site-footer .col-brand .meta,
.site-footer .col-brand .meta .abn,
.site-footer .footer-bottom .copy { color: rgba(255,255,255,0.72) !important; }
.site-footer .col-brand .logo,
.site-footer .newsletter .nl-copy h4 { color: #FFFFFF !important; }
.site-footer .col-links h4,
.site-footer .col-brand .meta .au-line { color: rgba(255,255,255,0.55) !important; }
.site-footer .col-links a { color: rgba(255,255,255,0.78) !important; }
.site-footer .col-links a:hover { color: #D9704A !important; }
.site-footer .newsletter { border-color: rgba(255,255,255,0.14) !important; }
.site-footer .newsletter .nl-copy p { color: rgba(255,255,255,0.66) !important; }
.site-footer .newsletter .nl-form {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.site-footer .newsletter .nl-form input { color: #FFFFFF !important; }
.site-footer .newsletter .nl-form input::placeholder { color: rgba(255,255,255,0.5) !important; }
.site-footer .newsletter .nl-form button { background: #C4562A !important; }
.site-footer .newsletter .nl-form button:hover { background: #D9704A !important; }
.site-footer .footer-bottom { border-top-color: rgba(255,255,255,0.12) !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(196,86,42,0.12) !important;
  color: #C4562A !important;
  border-color: rgba(196,86,42,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: #D9704A !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: #C4562A !important; }

/* Hero headline — allow it to run wider before wrapping */
.hero-split h1.hero-h { max-width: 30ch !important; }
.hero.hero-split .hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) !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; }