/* Grizzly Beam — /approach/ (spec: specs/approach-build-spec.md)
   Shared: .svc-hero*, .svc-plus, .svc-closer* → components.css */

/* ---------- 1 · Hero ---------- */
.apr-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 2 · The steps ---------- */
.apr-steps { background: var(--paper); color: var(--ink); padding-block: 9rem; }
.apr-steps__head { text-align: center; }
.apr-steps__eyebrow { color: var(--tx-g); }
.apr-steps__title {
  font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.005em; font-weight: var(--w-h2);   /* brand: H2 */
  margin-top: 1.5rem;
}
.apr-steps__list { list-style: none; max-width: 62rem; margin: 5rem auto 0; }
.apr-step {
  position: relative;
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 2.4rem;
  padding-block: 3rem;
  border-top: 1px solid rgba(22, 24, 28, 0.18);
  will-change: transform, opacity;
}
.apr-step::before {
  content: ""; position: absolute; left: 0; top: 0; width: 5rem; height: 2px;
  background: var(--accent);
  /* scaleX instead of animating width — same picture, but it runs on the compositor */
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.apr-step.is-lit::before { transform: scaleX(1); }
.apr-step__num {
  font-family: var(--f-mono);
  font-size: 1.196rem; letter-spacing: 0.18em;
  color: var(--tx-g); padding-top: 0.9rem;
}
.apr-step__name { font-size: 2.53rem; line-height: 1.1; letter-spacing: -0.005em; font-weight: var(--w-h2); }   /* brand: H2 scale (dab-proc__step) */
.apr-step__desc { color: var(--tx-g); margin-top: 1.2rem; max-width: 42rem; }

/* ---------- 3 · Our promises (ink) ---------- */
/* Backdrop: the same beam field as "Our services" on the home page. Markup is
   components/BeamField.astro, styles (.hs__bg/.hsbg*) live in core.css, so nothing is
   duplicated here — the section only has to become the positioning context and clip
   the beams, exactly like .hs does in home.css.

   No wrapper here, but for a different reason than the other pages. .apr-prom follows
   .apr-tl, which is ALSO dark — navy against this section's ink, 1.22:1 apart. That is a
   subtle boundary but a real one, so the field's top edge lands on a break the eye
   already reads rather than cutting a continuous band. Below, .svc-closer is light, so
   the bottom edge falls where the dark ends. If the timeline ever gets a field too, the
   two should share one wrapper the way .dab-dark does. */
.apr-prom { position: relative; overflow: clip; background: var(--ink); color: var(--tx-l); padding-block: 8rem; }
.apr-prom__ctr { position: relative; z-index: 1; }
.apr-prom__eyebrow { color: rgba(236, 232, 225, 0.65); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Was four lines at statement scale (2.53rem/700) stacked in the left half, with the right
   half empty. Since 2026-09-21: one row of four across the full width, H3 scale, each on its
   own hairline and numbered like the steps higher up the page. */
.apr-prom__list {
  list-style: none; margin-top: 3.4rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem;
}
.apr-prom__item { border-top: 1px solid rgba(236, 232, 225, 0.28); padding-top: 1.5rem; }
.apr-prom__n { color: rgba(236, 232, 225, 0.55); }
.apr-prom__t {
  margin-top: 1.4rem;
  font-size: 1.6rem; line-height: 1.35; font-weight: var(--w-h3); letter-spacing: -0.003em;
  color: var(--tx-l); max-width: 22rem;
}

/* ---------- 4 · Closer ---------- */
.apr-closer { padding-block: 10rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .apr-step { grid-template-columns: 5rem minmax(0, 1fr); gap: 1.6rem; }
  .apr-prom__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2.4rem; }
  .apr-prom__t { max-width: 24rem; }
}
@media (max-width: 767px) {
  .apr-steps { padding-block: 6rem; }
  .apr-steps__title { font-size: 2.6rem; }
  .apr-steps__list { margin-top: 3.4rem; }
  .apr-step { grid-template-columns: 1fr; gap: 0.8rem; padding-block: 2.2rem; }
  .apr-step__num { padding-top: 0; }
  .apr-step__name { font-size: 2rem; }
  .apr-prom { padding-block: 6rem; }
  .apr-prom__list { grid-template-columns: 1fr; gap: 2.4rem; }
  .apr-prom__t { font-size: 1.5rem; max-width: none; }
  .apr-closer { padding-block: 6rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .apr-step { opacity: 1 !important; transform: none !important; }
  .apr-step::before { transition: none; }
}

/* ============================================================
   THE TIMELINE — navy section (§04: navy behind proof/founder moments)
   Idea: the axis on top carries the six steps from the section above, and four constants
   below it run the ENTIRE length of the axis. The structure says what the text says:
   the steps change, these four things do not. That is why the bars do not stop at a tick.
   ============================================================ */
.apr-tl { background: var(--navy); color: var(--tx-l); padding-block: 9rem; }
.apr-tl__ctr { max-width: 74rem; margin-inline: auto; }

.apr-tl__rule { display: block; width: 3.4rem; height: 3px; background: var(--accent); }
.apr-tl__title {
  margin-top: 1.8rem;
  font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.005em;
  font-weight: var(--w-h2); color: var(--tx-l);
}
.apr-tl__lede {
  font-family: var(--f-body); font-size: 1.4rem; line-height: 1.55; font-weight: 400;
  color: rgba(236, 232, 225, 0.66); max-width: 48rem; margin-top: 1.6rem;
}

.apr-tl__grid { margin-top: 5.4rem; }
.apr-tl__sub {
  font-size: 2.1rem; line-height: 1.25; font-weight: var(--w-h3); color: var(--tx-l);
}

/* ---- axis: six steps ---- */
.tl-axis {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 2.4rem;
  border-bottom: 1px solid rgba(236, 232, 225, 0.14);
}
.tl-axis__tick { position: relative; padding: 0 0 0.75rem 0.7rem; }
.tl-axis__tick i {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 1.1rem;
  background: rgba(236, 232, 225, 0.3);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tl-axis__tick em {
  font-family: var(--f-mono); font-style: normal;
  font-size: 0.984rem; letter-spacing: 0.18em;
  color: rgba(236, 232, 225, 0.55);   /* AA on navy: 0.42 gave 3.33, below 4.5 */
}

/* ---- constants: each runs the full width of the axis ---- */
.tl-lanes { list-style: none; }
.tl-lane { position: relative; padding: 2.3rem 0 2.5rem; }
.tl-lane__name {
  font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.005em;
  font-weight: var(--w-h3); color: var(--tx-l);
}
.tl-lane__note {
  font-family: var(--f-body); font-size: 1.266rem; line-height: 1.5;
  color: rgba(236, 232, 225, 0.6); max-width: 48rem; margin-top: 0.6rem;
}
.tl-lane__track {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; display: block;
  background: rgba(236, 232, 225, 0.12); overflow: hidden;
}
.tl-lane__fill {
  display: block; width: 100%; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.05s cubic-bezier(0.33, 0, 0.15, 1);
}

/* ---- entrance: axis, then bars, staggered ---- */
.apr-tl.is-on .tl-axis__tick i { transform: scaleY(1); }
.apr-tl.is-on .tl-axis__tick:nth-child(2) i { transition-delay: 0.05s; }
.apr-tl.is-on .tl-axis__tick:nth-child(3) i { transition-delay: 0.10s; }
.apr-tl.is-on .tl-axis__tick:nth-child(4) i { transition-delay: 0.15s; }
.apr-tl.is-on .tl-axis__tick:nth-child(5) i { transition-delay: 0.20s; }
.apr-tl.is-on .tl-axis__tick:nth-child(6) i { transition-delay: 0.25s; }
.apr-tl.is-on .tl-lane__fill { transform: scaleX(1); }
.apr-tl.is-on .tl-lane:nth-child(1) .tl-lane__fill { transition-delay: 0.34s; }
.apr-tl.is-on .tl-lane:nth-child(2) .tl-lane__fill { transition-delay: 0.48s; }
.apr-tl.is-on .tl-lane:nth-child(3) .tl-lane__fill { transition-delay: 0.62s; }
.apr-tl.is-on .tl-lane:nth-child(4) .tl-lane__fill { transition-delay: 0.76s; }

.apr-tl__cta { margin-top: 4rem; }

@media (max-width: 1023px) {
  .apr-tl { padding-block: 7rem; }
  .apr-tl__title { font-size: 2.8rem; }
  .apr-tl__grid { margin-top: 4.2rem; }
}
@media (max-width: 767px) {
  .apr-tl { padding-block: 6rem; }
  .apr-tl__title { font-size: 2.6rem; }
  .apr-tl__lede { font-size: 1.35rem; }
  .apr-tl__sub { font-size: 1.9rem; }
  .tl-axis__tick { padding-left: 0.45rem; }
  .tl-axis__tick em { font-size: 0.9rem; letter-spacing: 0.1em; }
  .tl-lane { padding: 1.9rem 0 2.1rem; }
  .tl-lane__name { font-size: 1.6rem; }
  .apr-tl__cta { margin-top: 3rem; }
}

/* No animation: final state immediately */
@media (prefers-reduced-motion: reduce) {
  .tl-lane__fill, .tl-axis__tick i { transition: none; transform: none; }
}