/* ============================================================
   GREY ACCENTS + PROCESS CLEANUP
   - Shifts champagne accent from warm gold → warm pewter grey
   - Tightens the horizontal-scroll process section
   ============================================================ */

/* — Pewter / platinum override — */
:root,
[data-accent="champagne"] {
  --champagne:    #8A8378;   /* warm pewter */
  --champagne-dim:#56524A;   /* deep pewter */
  --accent: #8A8378;
  --accent-dim: #56524A;
  --accent-glow: rgba(138, 131, 120, 0.28);
  --accent-soft: rgba(138, 131, 120, 0.08);
}

/* Body wash — desaturated, less yellow */
body {
  background:
    radial-gradient(ellipse 1400px 700px at 15% 0%, rgba(200, 195, 185, 0.32), transparent 55%),
    radial-gradient(ellipse 1200px 800px at 85% 100%, rgba(170, 165, 155, 0.20), transparent 55%),
    radial-gradient(ellipse 800px 600px at 50% 50%, rgba(230, 225, 215, 0.25), transparent 60%),
    var(--bg-0) !important;
  background-attachment: fixed;
}

/* Body off-white shifted toward cool ivory (less warm) */
:root {
  --bg-0: #EFECE2;  /* cooler off-white */
  --bg-1: #F6F2E8;
}

/* Hero orbs — neutral grey instead of warm gold */
.hero-orb-1 { background: #8A8378 !important; opacity: 0.12 !important; }
.hero-orb-2 { background: #6E6862 !important; opacity: 0.10 !important; }

/* Network signup — neutral tone */
.network-signup-eyebrow {
  color: var(--accent-dim);
  background: rgba(138, 131, 120, 0.10);
  border-color: rgba(138, 131, 120, 0.22);
}

/* Group pillar feature — neutral border */
.group-pillar-feature {
  border-color: rgba(138, 131, 120, 0.30) !important;
}
.group-pillar-feature::after { background: var(--accent); }

/* Featured case accents */
.featured-case-client { color: var(--accent-dim); }
.featured-case-stats b { color: var(--accent); }
.sebo-pillar header span { color: var(--accent); }
.sebo-pillar h3 em { color: var(--accent); }
.sebo-pull p em { color: var(--accent); }

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

/* ============================================================
   PROCESS — cleaner, tighter, last step now visible
   ============================================================ */

/* Make track shorter so each step doesn't drag on. Also gives
   the last step proper view-time. 360vh = 260vh of scroll over
   5 steps, ~50vh per transition. */
.process-track { height: 360vh; }

/* The sticky stage — clean container, generous gutters */
.process-stage {
  padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(60px, 8vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  overflow: hidden;
}

.process-stage > div {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(24px, 3vw, 48px);
  padding-block: 0 !important;
}

/* Header row */
.process-stage > div > :first-child {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-6);
}

/* Stages row — tighten to viewport */
.process-stages {
  height: auto;
  min-height: 60vh;
  align-items: center;
  transition: none !important;          /* JS owns transform now */
  will-change: transform;
}

.process-step {
  padding: 0 clamp(20px, 3vw, 56px);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

.process-step-title {
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: -0.04em;
  line-height: 0.94;
}
.process-step-body {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  max-width: 48ch;
}
.process-step-list {
  margin-top: var(--s-5);
  gap: 4px;
}
.process-step-list li {
  padding: 10px 0;
  font-size: var(--fs-14);
}

/* Tidy the visual: smaller, framed glass */
.process-visual {
  aspect-ratio: 4/5;
  max-width: 380px;
  margin-left: auto;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 244, 232, 0.55) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 30px 80px rgba(50, 45, 35, 0.12),
    0 8px 18px rgba(50, 45, 35, 0.06);
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 40px);
}
.process-visual svg {
  width: 70% !important;
  height: 70% !important;
}
@media (max-width: 920px) {
  .process-visual { max-width: 280px; }
  .process-step { grid-template-columns: 1fr; gap: var(--s-6); }
  .process-stages { min-height: 70vh; }
}

/* Bottom progress bar — refined */
.process-progress {
  position: relative;
  bottom: auto;
  left: 0;
  right: 0;
  margin-top: var(--s-6);
  gap: 6px;
}
.process-progress-step {
  height: 2px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.process-progress-step span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 200ms linear;
}

/* Header meta */
.process-step-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.process-step-meta b {
  color: var(--accent);
  margin-right: var(--s-3);
  font-weight: 500;
}
.process-step-title em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
}

/* Process eyebrow */
.process .section-eyebrow,
.process [class*="font-mono"] {
  color: var(--ink-2);
}

/* Step counter (01 / 05) */
#step-current { color: var(--accent); font-weight: 500; }

/* Smoother kickoff — no horizontal jitter */
.process-stages > .process-step { will-change: auto; }

/* ============================================================
   GROWTH INTELLIGENCE — re-tint to grey (the dark section)
   ============================================================ */
.growth .funnel-fill {
  background: linear-gradient(90deg, #56524A, #B0A99D) !important;
}
.growth .funnel-fill::after { box-shadow: 0 0 12px rgba(176, 169, 157, 0.6); }
.growth .kpi-spark polyline[stroke="var(--accent)"] { stroke: #B0A99D !important; }
.growth .kpi-delta { color: #B5C97C; }   /* keep lime signal */
.growth .kpi-value sup { color: #B0A99D; }
.growth .panel-dot { background: #B5C97C; }

/* Loop SVG */
.growth .loop-svg circle[fill="var(--accent)"] { fill: #B0A99D !important; }
.growth .loop-svg circle[stroke="var(--accent)"] { stroke: #B0A99D !important; }
.growth .loop-center b { color: #B0A99D; }

/* Mix bars (first/main one) */
.growth .mix-fill[style*="--accent"] { background: #B0A99D !important; }

/* ============================================================
   Final CTA gold-gradient button → neutral cream/grey
   ============================================================ */
.final-cta .btn-primary {
  background: linear-gradient(180deg, #FFF 0%, #DCD6C8 60%, #A8A296 100%);
  color: #0A0707;
}
.final-cta .btn-primary:hover {
  background: linear-gradient(180deg, #FFF 0%, #8A8378 100%);
  color: #0A0707;
}

/* Footer wordmark em color */
.footer-wordmark em { color: #B0A99D; }
.final-cta-title em { color: #B0A99D; }

/* Featured case stat values cleaner */
.featured-case-stats b { color: var(--accent); }

/* ============================================================
   HERO BACKGROUND IMAGE — Ronin BTS shot, soft blurred
   ============================================================ */
.hero {
  isolation: isolate;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: url("assets/hero-bg-studio.jpg");
  background-size: cover;
  background-position: center 30%;
  filter: blur(3px) saturate(108%) brightness(1.04);
  transform: scale(1.02);
  z-index: -2;
  opacity: 0.9;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(239, 236, 226, 0.20) 0%, rgba(239, 236, 226, 0.45) 60%, rgba(239, 236, 226, 0.82) 100%),
    radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.20), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* Push grid overlay above the bg image but keep its mask */
.hero-grid-bg { z-index: 0; opacity: 0.35; }
.hero-orb-1 { z-index: 0; }
.hero-orb-2 { z-index: 0; }

/* Make hero content sit cleanly above */
.hero > *:not(.hero-grid-bg):not(.hero-orb-1):not(.hero-orb-2):not(.hero-noise) {
  position: relative;
  z-index: 2;
}

/* ============================================================
   NAV — enlarged menu
   ============================================================ */
.nav {
  padding: clamp(20px, 2vw, 32px) var(--gutter);
}
.nav-brand {
  gap: var(--s-4);
  font-size: var(--fs-15);
}
.nav-brand-mark { width: 40px; height: 40px; }
.nav-brand strong {
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.nav-brand small { font-size: var(--fs-13); }

.nav-links {
  gap: var(--s-3);
  font-size: clamp(15px, 1.05vw, 17px);
}
.nav-links a {
  padding: 12px 20px;
  letter-spacing: -0.005em;
  font-weight: 400;
}

.nav-cta {
  padding: 14px 24px;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: -0.005em;
  font-weight: 500;
}
.nav-cta-arrow { width: 16px; height: 16px; }

/* Scrolled state — gets a touch more compact but still big */
.nav.is-scrolled {
  padding: clamp(14px, 1.4vw, 22px) var(--gutter);
}