/* ============================================================
   Circi — Theme · Navy · Terracotta · Sage
   Layered AFTER styles.css and all section stylesheets.
   Typography untouched (Poppins).
   ============================================================ */

:root {
  /* PRIMARY — Navy */
  --navy:        #121358;   /* buttons, nav, headings, dark sections, footer */
  --navy-deep:   #0A0A3A;   /* deepest surfaces */
  --navy-2:      #2A2D6D;   /* raised dark elements / secondary navy */
  --navy-3:      #4A5775;   /* softer muted headline navy */

  /* INK / TEXT */
  --ink:         #121358;   /* primary text / headings (navy) */
  --ink-2:       #4A5775;   /* secondary text (slate) */
  --ink-3:       #8089A3;   /* tertiary / meta labels */

  /* SURFACES */
  --rule:        #E4E8F0;
  --rule-soft:   #EFF2F7;
  --paper:       #F8FAFC;   /* crystal white page bg */
  --paper-2:     #EEF2FF;   /* brand-tint tinted surface (footer / built col) */
  --surface:     #FFFFFF;
  --surface-2:   #FAFBFD;

  /* SECONDARY ACCENT — Terracotta (maps onto --teal token) */
  --teal:        #D17556;   /* CTAs, links, accents, focus, active */
  --teal-deep:   #B85A3C;   /* hover / pressed */
  --teal-ink:    #A04C30;   /* chip text, underline ink */
  --teal-soft:   #EEF2FF;   /* chip + icon-tile backgrounds (pale brand tint) */

  /* SUCCESS — Emerald */
  --success:      #0EA572;
  --success-deep: #0B8A60;
  --success-soft: #D6F5E8;
  --success-ink:  #07533A;
}

/* ===== Section separator — 4px navy bar atop major sections ===== */
section.directory,
section.pathway,
section.built,
section.testimonials,
section.trust,
.site-footer {
  border-top: 4px solid var(--navy) !important;
}

/* ===== Avatars ===== */
.directory .card .av.teal,
.testimonials .q-avatar.teal {
  background: linear-gradient(135deg, #D17556, #B85A3C) !important;
  color: #fff !important;
}
.directory .card .av.navy,
.testimonials .q-avatar.navy {
  background: linear-gradient(135deg, #121358, #2C3577) !important;
  color: #fff !important;
}
.directory .card .av.plum,
.testimonials .q-avatar.plum {
  background: linear-gradient(135deg, #2A2D6D, #5C8275) !important;  /* navy → sage */
  color: #fff !important;
}
.testimonials .q-avatar.gold {
  background: linear-gradient(135deg, #5C8275, #3D5E52) !important;  /* sage */
  color: #fff !important;
}
.testimonials .q-avatar.sage {
  background: linear-gradient(135deg, #0EA572, #0B8A60) !important;  /* emerald */
  color: #fff !important;
}

/* ===== Accent tints (focus rings, borders, chips, icon tiles) ===== */
.site-footer .newsletter .nl-form:focus-within {
  box-shadow: 0 0 0 4px rgba(209,117,86,0.14);
}
.directory .chip.consult {
  background: var(--teal-soft) !important;
  color: var(--teal-ink) !important;
  border-color: rgba(209,117,86,0.30) !important;
}
.directory .chip.consult svg { color: var(--teal) !important; }

.trust .pi-ico {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: rgba(209,117,86,0.24);
}
.trust .statement-glyph .gtile {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: rgba(209,117,86,0.24);
}
.statement-card p.statement-body .em,
.trust p.statement-body .em {
  background: linear-gradient(180deg, transparent 64%, rgba(209,117,86,0.30) 64%) !important;
}

/* Pillar grid hairlines → navy hairline */
.trust .pillars {
  border-top-color: rgba(18,19,88,0.14) !important;
  border-bottom-color: rgba(18,19,88,0.14) !important;
}

/* ===== Billing chip — emerald success ===== */
.directory .chip.billing {
  background: var(--success-soft) !important;
  color: var(--success-ink) !important;
  border-color: rgba(14,165,114,0.30) !important;
}
.directory .chip.billing svg { color: var(--success-deep) !important; }

/* ===== GP-column CTA: terracotta pill, white text ===== */
.built .col.gp .col-cta .button { background: var(--teal); color: #fff !important; }
.built .col.gp .col-cta .button:hover { background: var(--teal-deep); }
/* GP top accent strip → terracotta→sage */
.built .col.gp::before { background: linear-gradient(90deg, #D17556, #5C8275) !important; }
.built .col.spec::before { background: linear-gradient(90deg, var(--navy-2), var(--navy)) !important; }

/* GP role pill + icon tiles in built section */
.built .col.gp .role { background: var(--teal-soft) !important; color: var(--teal-ink) !important; border-color: rgba(209,117,86,0.22) !important; }
.built .col.gp .role .role-dot { background: var(--teal) !important; }
.built .col.gp .b-ico { background: var(--teal-soft) !important; color: var(--teal) !important; }

/* ===== Statement card accent strip → terracotta ===== */
.trust .statement-card::before { background: linear-gradient(90deg, #D17556, #5C8275) !important; }

/* ===== Kicker hairlines (currently teal-deep) → terracotta ===== */
.pathway .pw-kicker::before, .pathway .pw-kicker::after,
.directory .dir-kicker::before, .directory .dir-kicker::after,
.built .b-kicker::before, .built .b-kicker::after,
.testimonials .t-kicker::before, .testimonials .t-kicker::after,
.trust .tr-kicker::before, .trust .tr-kicker::after {
  background: var(--teal) !important;
  opacity: 0.55 !important;
}
.pathway .pw-kicker,
.directory .dir-kicker,
.built .b-kicker,
.testimonials .t-kicker,
.trust .tr-kicker { color: var(--teal-ink) !important; }

/* Care-pathway active step ring → terracotta */
.pathway .step.active .step-num {
  border-color: var(--teal) !important;
  color: var(--teal-ink) !important;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--teal-soft) !important;
}
.pathway .step.active .step-meta .v.time { color: var(--teal-ink) !important; }
.pathway .step-icon { color: var(--teal) !important; }

/* Directory verified location pin / consult icon already covered; map pin: */
.directory .card-loc svg { color: var(--teal) !important; }

/* ===== Hero sheen — sage + terracotta over crystal white ===== */
.hero {
  background:
    radial-gradient(700px 320px at 32% 0%, rgba(92,130,117,0.10), transparent 70%),
    radial-gradient(760px 360px at 72% 0%, rgba(209,117,86,0.06), transparent 70%),
    var(--paper) !important;
}

/* Hero eyebrow pulse + meta pip stays AU flag; trust-strip rating stars keep gold.
   Hero CTA primary uses --navy (btn-navy) — already navy. */

/* ===== Ghost button + footer hairlines ===== */
.btn-ghost { border-color: rgba(18,19,88,0.22) !important; }
.btn-ghost:hover { background: rgba(18,19,88,0.04) !important; }
.site-footer .newsletter {
  border-top-color: rgba(18,19,88,0.10);
  border-bottom-color: rgba(18,19,88,0.10);
}
.site-footer .col-brand .logo .stop { color: var(--teal) !important; }

/* Logo period in nav → terracotta */
.logo .stop { color: var(--teal) !important; }

/* Hero headline "Refer with confidence." → terracotta */
.hero-h .muted { color: var(--teal) !important; }

/* All section heading muted sub-spans → terracotta */
.hero-h .muted,
.directory .dir-head h2 .muted,
.pathway .pw-head h2 .muted,
.built .b-head h2 .muted,
.trust .tr-head h2 .muted { color: var(--teal) !important; }


/* ===== Hover color -> Terracotta #D17556 ===== */
.btn-navy:hover,
.nav .btn:hover,
.directory .foot-cta .primary:hover,
.pathway .pw-outro .cta:hover {
  background: #D17556 !important;
  border-color: #D17556 !important;
  color: #fff !important;
}
.btn-navy:hover svg path,
.directory .foot-cta .primary:hover svg path { stroke: #fff !important; }
.nav-links a:hover { color: #D17556 !important; }
.nav-links a:hover::after { background: #D17556 !important; }
.signin:hover { color: #D17556 !important; }
.site-footer .col-links a:hover { color: #D17556 !important; }
.nav .search-icon:hover { border-color: #D17556 !important; color: #D17556 !important; }
.site-footer .newsletter .nl-form button:hover { background: #D17556 !important; }
.directory .card:hover { border-color: rgba(209,117,86,0.45) !important; }
.btn-ghost:hover { background: rgba(209,117,86,0.06) !important; border-color: #D17556 !important; color: #D17556 !important; }