/* Agent 08 — How We Work journey redesign (scoped to how-we-work.html).
   Brand anchors kept: navy #0B1220, teal #20C9C0, blue #0E5BD6.
   System fonts only; no external requests; inline SVG art only (in HTML).
   Motion: transform + opacity only, scroll-triggered, reduced-motion safe.
   No-JS safety: .reveal states apply only under the .js class (set by a
   one-line hook in <head>), so without JS every word renders normally. */

:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6;
  --ink:#0B1220; --muted:#5B6472; --paper:#FFFFFF;
  --line:#E5E7EB; --teal-line:#BFE9E6;
  --radius-sm:8px; --radius-md:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 24px 48px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:180ms; --dur-normal:560ms; --dur-slow:900ms;
}

/* ---------- shared reveal ---------- */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-normal) var(--ease-out),
    transform var(--dur-normal) var(--ease-out),box-shadow .15s ease}
.js .reveal.is-visible{opacity:1;transform:none}

/* hero entrance stagger (pre-reveal only, so hover states never lag) */
.hero .eyebrow.reveal:not(.is-visible){transition-delay:0ms}
.hero h1.reveal:not(.is-visible){transition-delay:90ms}
.hero .lead.reveal:not(.is-visible){transition-delay:180ms}
.hero .hero-cta.reveal:not(.is-visible){transition-delay:270ms}

/* ---------- hero art: abstract geometry, reserved space, no layout shift ---------- */
.journey-hero-art{position:absolute;right:0;top:0;height:100%;width:420px;max-width:46%;
  pointer-events:none;opacity:.9}
@media(max-width:640px){.journey-hero-art{display:none}}

/* ---------- numbered nodes (restyled existing pills; numbers unchanged) ---------- */
.spine-step .step-pill,.path-step .step-pill{display:inline-flex;align-items:center;
  justify-content:center;flex:none;width:56px;height:56px;padding:0;
  background:var(--navy);color:#fff;border:2px solid var(--navy);border-radius:50%;
  font-size:19px;cursor:default;position:relative;z-index:1;
  box-shadow:0 0 0 5px var(--bg),0 10px 20px rgba(11,18,32,.18)}
.js .spine-step .step-pill,.js .path-step .step-pill{transform:scale(.6);opacity:0;
  transition:transform var(--dur-normal) var(--ease-out),
    opacity var(--dur-normal) var(--ease-out)}
.js .spine-step.is-visible .step-pill,.js .path-step.is-visible .step-pill{
  transform:scale(1);opacity:1;transition-delay:120ms}

/* ---------- results spine: horizontal timeline (desktop) ---------- */
.spine{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.spine::before{content:"";position:absolute;
  left:calc((100% - 40px)/6);right:calc((100% - 40px)/6);top:26.5px;
  height:3px;background:var(--line);border-radius:999px}
.spine-progress{position:absolute;
  left:calc((100% - 40px)/6);right:calc((100% - 40px)/6);top:26.5px;
  height:3px;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--blue));
  transform-origin:left center;transform:scaleX(var(--spine-progress,0));
  transition:transform var(--dur-slow) var(--ease-out)}
.spine-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.spine-step .step-pill{margin-bottom:18px}
.spine-body{width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm);
  transition:transform .15s ease,box-shadow .15s ease}
.spine-body:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.spine-body p:last-child{margin-bottom:0}

/* ---------- journey path: stepped timeline, DOM order = visual order ---------- */
.path{position:relative;margin-top:28px}
.path-step{position:relative;display:grid;grid-template-columns:1fr 80px 1fr;align-items:start}
.path-step:not(:last-child)::before{content:"";position:absolute;
  left:calc(50% - 1.5px);top:0;bottom:0;width:3px;background:var(--line)}
.path-step.passed:not(:last-child)::before{
  background:linear-gradient(180deg,var(--teal),var(--blue))}
.path-step .step-pill{grid-column:2;justify-self:center}
.path-step:nth-child(odd) .path-card{grid-column:1}
.path-step:nth-child(even) .path-card{grid-column:3}
.path-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 26px;box-shadow:var(--shadow-sm);margin-bottom:28px;
  transition:transform .15s ease,box-shadow .15s ease}
.path-step:last-child .path-card{margin-bottom:0}
.path-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.path-card strong{font-size:18px}
.path-card strong a{text-decoration:none;color:var(--navy)}
.path-card strong a:hover{color:var(--blue);text-decoration:underline}
.path-card p:last-child{margin-bottom:0}

/* ---------- principles + expectations: phase cards with depth ---------- */
.principles .card,.expect .card{box-shadow:var(--shadow-md);border-top:4px solid var(--navy)}
.principles .card.is-visible:hover,.expect .card.is-visible:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.principles .card.reveal:not(.is-visible):nth-child(2),
.expect .card.reveal:not(.is-visible):nth-child(2){transition-delay:70ms}
.principles .card.reveal:not(.is-visible):nth-child(3),
.expect .card.reveal:not(.is-visible):nth-child(3){transition-delay:140ms}
.principles .card.reveal:not(.is-visible):nth-child(4),
.expect .card.reveal:not(.is-visible):nth-child(4){transition-delay:210ms}
.principles .card.reveal:not(.is-visible):nth-child(5),
.expect .card.reveal:not(.is-visible):nth-child(5){transition-delay:280ms}
.principles .card.reveal:not(.is-visible):nth-child(6),
.expect .card.reveal:not(.is-visible):nth-child(6){transition-delay:350ms}

/* ---------- stage sections: phase cards ---------- */
section.phase .wrap{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:36px 40px;position:relative;overflow:hidden}
section.phase .wrap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--teal),var(--blue))}
section.phase-gate .wrap{box-shadow:var(--shadow-lg);border-color:var(--teal-line)}
@media(max-width:640px){section.phase .wrap{padding:28px 22px}}

/* ---------- final CTA: navy glow card ---------- */
.cta-glow{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:var(--shadow-lg)}
.cta-glow h2{color:#fff}
.cta-glow p{color:#D7DEE8}

/* ---------- narrow widths: timelines collapse to a left rail ---------- */
@media(max-width:900px){
  .spine{display:block}
  .spine::before,.spine-progress{display:none}
  .spine-step{display:grid;grid-template-columns:56px 1fr;gap:16px;
    align-items:start;text-align:left}
  .spine-step:not(:last-child)::before{content:"";position:absolute;
    left:27px;top:0;bottom:0;width:3px;background:var(--line)}
  .spine-step.passed:not(:last-child)::before{
    background:linear-gradient(180deg,var(--teal),var(--blue))}
  .spine-step .step-pill{margin-bottom:0}
  .spine-body{margin-bottom:20px}
  .spine-step:last-child .spine-body{margin-bottom:0}
  .path-step{grid-template-columns:56px 1fr;gap:16px}
  .path-step:not(:last-child)::before{left:27px}
  .path-step .step-pill{grid-column:1}
  .path-step:nth-child(odd) .path-card,.path-step:nth-child(even) .path-card{grid-column:2}
  .path-card{margin-bottom:20px;padding:22px}
}

/* ---------- reduced motion: everything fully visible, no animation ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .spine-step .step-pill,.js .path-step .step-pill{opacity:1;transform:none;transition:none}
  .spine-progress{transform:scaleX(1);transition:none}
  .spine-body,.path-card{transition:none}
}