/* =========================================================
   HOW WE WORK — page motion and refinements
   Scoped to body.page-how-we-work
   ========================================================= */

body.page-how-we-work {
  --hww-navy: #0E2340;
  --hww-accent: #7A2F3B;
  --hww-cream: #F6F4EF;
  --hww-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Timeline: drawn line + staggered steps ---------- */
body.page-how-we-work .timeline {
  overflow: visible;
}

body.page-how-we-work .timeline::before {
  background: linear-gradient(
    to bottom,
    rgba(14, 35, 64, 0.22),
    rgba(14, 35, 64, 0.12) 50%,
    rgba(14, 35, 64, 0.08)
  );
  transform-origin: top center;
  transform: scaleY(1);
}

html.js-reveal body.page-how-we-work .timeline::before {
  transform: scaleY(0);
  transition: transform 1.15s var(--hww-ease);
}

html.js-reveal body.page-how-we-work .timeline.is-drawn::before,
html.js-reveal body.page-how-we-work .timeline:has(.timeline-step.is-visible)::before {
  transform: scaleY(1);
}

body.page-how-we-work .timeline-step {
  --d: 0ms;
}

body.page-how-we-work .timeline-step:nth-child(1) { --d: 0ms; }
body.page-how-we-work .timeline-step:nth-child(2) { --d: 80ms; }
body.page-how-we-work .timeline-step:nth-child(3) { --d: 160ms; }
body.page-how-we-work .timeline-step:nth-child(4) { --d: 240ms; }
body.page-how-we-work .timeline-step:nth-child(5) { --d: 320ms; }
body.page-how-we-work .timeline-step:nth-child(6) { --d: 400ms; }

html.js-reveal body.page-how-we-work .timeline-step[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

html.js-reveal body.page-how-we-work .timeline-step[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--hww-ease),
    transform 700ms var(--hww-ease);
  transition-delay: var(--d, 0ms);
}

html.js-reveal body.page-how-we-work .timeline-step[data-reveal] .timeline-marker {
  opacity: 0;
  transform: scale(0.72);
}

html.js-reveal body.page-how-we-work .timeline-step[data-reveal].is-visible .timeline-marker {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 560ms var(--hww-ease),
    transform 560ms var(--hww-ease),
    border-color 280ms var(--hww-ease),
    color 280ms var(--hww-ease),
    background-color 280ms var(--hww-ease);
  transition-delay: calc(var(--d, 0ms) + 90ms);
}

body.page-how-we-work .timeline-marker {
  border-color: rgba(14, 35, 64, 0.16);
  color: var(--hww-navy);
  font-family: "Source Serif 4", Georgia, serif;
  transition:
    border-color 280ms var(--hww-ease),
    color 280ms var(--hww-ease),
    background-color 280ms var(--hww-ease),
    box-shadow 280ms var(--hww-ease);
}

body.page-how-we-work .timeline-step.is-visible .timeline-marker,
body.page-how-we-work .timeline-step:hover .timeline-marker {
  border-color: var(--hww-accent);
  color: var(--hww-accent);
  box-shadow: 0 0 0 3px rgba(122, 47, 59, 0.08);
}

body.page-how-we-work .timeline-content {
  min-width: 0;
}

body.page-how-we-work .timeline-content h3,
body.page-how-we-work .timeline-content p {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ---------- Role grid: hover + unclipped full-width text ---------- */
body.page-how-we-work .role-grid {
  overflow: visible;
}

body.page-how-we-work .role-grid > [data-reveal]:nth-child(1) { --d: 0ms; }
body.page-how-we-work .role-grid > [data-reveal]:nth-child(2) { --d: 70ms; }
body.page-how-we-work .role-grid > [data-reveal]:nth-child(3) { --d: 140ms; }
body.page-how-we-work .role-grid > [data-reveal]:nth-child(4) { --d: 210ms; }

body.page-how-we-work .role-item {
  min-width: 0;
  width: 100%;
  transition:
    background-color 280ms var(--hww-ease),
    box-shadow 280ms var(--hww-ease),
    transform 280ms var(--hww-ease);
}

body.page-how-we-work .role-item h4,
body.page-how-we-work .role-item p {
  max-width: none;
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

body.page-how-we-work .role-item:hover,
body.page-how-we-work .role-item:focus-within {
  background: var(--hww-cream);
  box-shadow: inset 0 0 0 1px rgba(14, 35, 64, 0.1);
  transform: translateY(-2px);
  position: relative;
  z-index: 1;
}

body.page-how-we-work .role-item:hover h4,
body.page-how-we-work .role-item:focus-within h4 {
  color: var(--hww-navy);
}

body.page-how-we-work .role-item:focus-visible {
  outline: 2px solid var(--hww-accent);
  outline-offset: 2px;
}

body.page-how-we-work .role-note {
  max-width: none;
  width: 100%;
  overflow: visible;
  overflow-wrap: break-word;
}

/* ---------- Boundary + final CTA calm reveals ---------- */
html.js-reveal body.page-how-we-work section.boundary[data-reveal],
html.js-reveal body.page-how-we-work section.final-cta[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

html.js-reveal body.page-how-we-work section.boundary[data-reveal].is-visible,
html.js-reveal body.page-how-we-work section.final-cta[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 720ms var(--hww-ease),
    transform 720ms var(--hww-ease);
}

body.page-how-we-work section.boundary .inner {
  min-width: 0;
}

body.page-how-we-work section.boundary h2,
body.page-how-we-work section.boundary p {
  overflow-wrap: break-word;
}

body.page-how-we-work section.final-cta h2 {
  overflow-wrap: break-word;
}

/* ---------- Section head spacing for this page ---------- */
body.page-how-we-work .on-white .section-head,
body.page-how-we-work .role-variation .section-head {
  margin-bottom: 28px;
}

/* ---------- Overflow guard ---------- */
body.page-how-we-work main,
body.page-how-we-work .timeline,
body.page-how-we-work .role-grid,
body.page-how-we-work .role-note,
body.page-how-we-work section.boundary,
body.page-how-we-work section.final-cta {
  max-width: 100%;
}

/* ---------- Reduced motion: static, always visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal body.page-how-we-work .timeline::before,
  html.js-reveal body.page-how-we-work .timeline.is-drawn::before,
  html.js-reveal body.page-how-we-work .timeline:has(.timeline-step.is-visible)::before {
    transform: none !important;
  }

  html.js-reveal body.page-how-we-work .timeline-step[data-reveal],
  html.js-reveal body.page-how-we-work .timeline-step[data-reveal].is-visible,
  html.js-reveal body.page-how-we-work .timeline-step[data-reveal] .timeline-marker,
  html.js-reveal body.page-how-we-work .timeline-step[data-reveal].is-visible .timeline-marker,
  html.js-reveal body.page-how-we-work section.boundary[data-reveal],
  html.js-reveal body.page-how-we-work section.final-cta[data-reveal],
  html.js-reveal body.page-how-we-work section.boundary[data-reveal].is-visible,
  html.js-reveal body.page-how-we-work section.final-cta[data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  body.page-how-we-work .role-item:hover,
  body.page-how-we-work .role-item:focus-within,
  body.page-how-we-work .timeline-marker {
    transform: none !important;
  }
}