/* ============================================================
   ORANGE INTEGRATION — warm signal accent
   Secondary accent layered over the pewter grey system.
   Used for: status pulses, hover states, key CTAs, signal moments.
   ============================================================ */

:root {
  --warm-orange: #E87A3B;       /* clay / terracotta orange */
  --warm-orange-deep: #B85A22;
  --warm-orange-light: #F4A572;
  --warm-orange-soft: rgba(232, 122, 59, 0.10);
  --warm-orange-glow: rgba(232, 122, 59, 0.30);
}

/* — Status pulse + small signals: now warm orange — */
.status-pulse {
  background: var(--warm-orange) !important;
  box-shadow: 0 0 0 0 var(--warm-orange-glow) !important;
  animation: pulse-warm 2.2s infinite;
}
@keyframes pulse-warm {
  0%   { box-shadow: 0 0 0 0 rgba(232, 122, 59, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(232, 122, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 122, 59, 0); }
}
.network-signup-eyebrow::before {
  background: var(--warm-orange);
  box-shadow: 0 0 8px var(--warm-orange-glow);
}

/* — Section eyebrow dot: orange — */
.section-eyebrow::before {
  background: var(--warm-orange) !important;
  box-shadow: 0 0 10px var(--warm-orange-glow) !important;
}

/* — Panel dot in growth section — */
.growth .panel-dot { background: var(--warm-orange-light) !important; }

/* — Hero orb 2 → orange ambient — */
.hero-orb-2 {
  background: var(--warm-orange) !important;
  opacity: 0.10 !important;
}

/* — Hero stat sup → orange — */
.hero-stat-value sup { color: var(--warm-orange); }

/* — Primary button hover: pewter base → orange hover for energy — */
.btn-primary:hover {
  background: linear-gradient(180deg, var(--warm-orange) 0%, var(--warm-orange-deep) 100%);
  color: #FFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 14px 32px rgba(184, 90, 34, 0.40),
    0 4px 10px rgba(184, 90, 34, 0.25);
}
.network-signup-submit:hover {
  background: linear-gradient(180deg, var(--warm-orange) 0%, var(--warm-orange-deep) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 14px 36px rgba(184, 90, 34, 0.42);
}
.nav-cta:hover {
  background: var(--warm-orange);
  color: #FFF;
}
.diag-next:not(:disabled):hover {
  background: linear-gradient(180deg, var(--warm-orange) 0%, var(--warm-orange-deep) 100%);
  color: #FFF;
}

/* — Service row hover: orange wash + text — */
.service-row::before {
  background: linear-gradient(90deg,
    var(--warm-orange-soft) 0%,
    rgba(232, 122, 59, 0.04) 40%,
    transparent 70%) !important;
}
.service-row:hover .service-name { color: var(--warm-orange-deep); }
.service-row:hover .service-arrow { color: var(--warm-orange); }

/* — Pillar hover icon: orange — */
.pillar:hover .pillar-icon {
  background: var(--warm-orange);
  border-color: var(--warm-orange);
  color: #FFF;
}
.pillar:hover {
  background: linear-gradient(90deg, var(--warm-orange-soft), transparent 60%);
}

/* — Case hover border accent — */
.case:hover { border-color: rgba(232, 122, 59, 0.30) !important; }
.case-metrics b { color: var(--warm-orange-deep); }

/* — Process: stage indicator + step counter orange — */
#step-current { color: var(--warm-orange); }
.process-step-meta b { color: var(--warm-orange); }
.process-step-title em { color: var(--warm-orange); }
.process-progress-step span { background: var(--warm-orange) !important; }

/* — Process SVG accents — */
.process-visual svg [stroke="var(--accent)"] { stroke: var(--warm-orange) !important; }
.process-visual svg [fill="var(--accent)"] { fill: var(--warm-orange) !important; }
.process-visual svg text[fill*="--accent"] { fill: var(--warm-orange) !important; }

/* — Featured case (Sebo): orange on pillar headers + pull quote em — */
.featured-case-client { color: var(--warm-orange-deep); }
.featured-case-stats b { color: var(--warm-orange-deep); }
.sebo-pillar header span { color: var(--warm-orange); }
.sebo-pillar h3 em { color: var(--warm-orange-deep); }
.sebo-pillar p em { color: var(--warm-orange-deep); }
.sebo-pull p em { color: var(--warm-orange-deep); }
.sebo-pillar-feature { border-color: rgba(232, 122, 59, 0.32) !important; }

/* — Diagnostic recommendation: orange left border — */
.diag-rec { border-left-color: var(--warm-orange) !important; }
.diag-option.is-selected {
  border-color: var(--warm-orange) !important;
  background: var(--warm-orange-soft) !important;
}
.diag-option.is-selected .diag-option-check {
  background: var(--warm-orange) !important;
  border-color: var(--warm-orange) !important;
}
.diag-progress span.is-done { background: var(--warm-orange) !important; }

/* — Step labels + diagnostic intro em — */
.diag-step-q em,
.diagnostic-intro h2 em { color: var(--warm-orange-deep); }

/* — Cursor ring active state + scroll progress: orange — */
.cursor-ring.is-active { border-color: var(--warm-orange) !important; }
.scroll-progress {
  background: linear-gradient(90deg, var(--warm-orange), transparent) !important;
}
.cursor-glow {
  background: radial-gradient(circle, rgba(232, 122, 59, 0.45) 0%, transparent 60%) !important;
}

/* — Marquee separator ✦: orange — */
.marquee-item::after { color: var(--warm-orange) !important; }

/* — Group pillar feature "Core" badge: orange — */
.group-pillar-feature::after {
  background: var(--warm-orange) !important;
  color: #FFF !important;
}

/* — Quote avatar: warm tone — */
.quote-avatar {
  background: var(--warm-orange-soft) !important;
  border-color: rgba(232, 122, 59, 0.25) !important;
  color: var(--warm-orange-deep) !important;
}

/* — Final CTA gradient button: stays neutral, hover → orange — */
.final-cta .btn-primary:hover {
  background: linear-gradient(180deg, #FFF 0%, var(--warm-orange) 100%);
  color: #0A0707;
}

/* — Footer wordmark em + final-cta-title em: orange highlight — */
.footer-wordmark em { color: var(--warm-orange-light) !important; }
.final-cta-title em { color: var(--warm-orange-light) !important; }
.footer-col a:hover { color: var(--warm-orange-light) !important; }

/* — Hero headline em: warm orange flourish — */
.hero-headline em { color: var(--warm-orange-deep); }
.positioning-title em,
.section-title em,
.thought-title em,
.group-pillar-name em { color: var(--warm-orange-deep); }
.featured-case-title em { color: var(--warm-orange-deep); }

/* — Selection — */
::selection {
  background: var(--warm-orange);
  color: #FFF;
}

/* — KPI label sparkline (the bright one) gets orange — */
.growth .kpi-spark polyline[stroke="var(--accent)"] { stroke: var(--warm-orange-light) !important; }
.growth .funnel-fill {
  background: linear-gradient(90deg, var(--warm-orange-deep), var(--warm-orange-light)) !important;
}
.growth .funnel-fill::after {
  box-shadow: 0 0 12px rgba(244, 165, 114, 0.5) !important;
}
.growth .loop-svg circle[fill="var(--accent)"] { fill: var(--warm-orange-light) !important; }
.growth .loop-svg circle[stroke="var(--accent)"] { stroke: var(--warm-orange-light) !important; }
.growth .loop-center b { color: var(--warm-orange-light); }

/* — KPI value sup + delta keep neutral; orange used sparingly — */
.kpi-value sup { color: var(--warm-orange-light); }