/* ==========================================================================
   How I Work — the homepage staircase
   Markup + behaviour: assets/js/components/approach-grid.js
   Light section, 4-column grid, hairlines and the Approach typography.
   The section draws its own grid, so it has no static grid lines.
   ========================================================================== */

.ag-track {
  position: relative;
  height: 520vh;
}

.ag-sticky {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h) - 24px);
}

.ag-stage {
  position: relative;
  height: 100%;
  --started: 0;
}

/* ------------------------------------------------------------- lines */

.ag-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ag-svg path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* the dark staircase line … */
.ag-main {
  stroke: var(--c-ink);
  stroke-width: 2.5;
  stroke-linecap: square;
}

/* … and the dark column lines that start down from the top as it reaches
   each column, running on to the bottom */
.ag-col {
  stroke: var(--c-ink);
  stroke-width: 1.5;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

/* Home: the column lines in the grid's light grey — only the staircase is dark */
.ag-stage--light-cols .ag-col {
  stroke: var(--line-on-light);
  stroke-width: 1;
}

/* the drawing head: a small square, in the grid's own vocabulary */
.ag-tip {
  fill: var(--c-ink);
  transition: opacity 0.3s var(--ease);
}

/* ------------------------------------------------------------- copy */

.ag-head {
  position: absolute;
  left: calc(50% + var(--col-pad));
  top: var(--col-pad);
}

.ag-head .eyebrow {
  margin-bottom: 18px;
}

.ag-title {
  line-height: 0.9;
}

.ag-copy {
  position: absolute;
  left: calc(75% + var(--col-pad));
  right: var(--col-pad);
  top: calc(25% + var(--col-pad));
  max-width: 300px;
  opacity: calc(0.35 + var(--started) * 0.65);
  transition: opacity 0.6s var(--ease);
}

/* ------------------------------------------------------------- stages */

.ag-step {
  --a: 0;
  --near: 0;                          /* 0 → 1 as the line approaches this stage */
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: var(--col-pad);
}

.ag-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: auto;
}

.ag-step__index {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  opacity: calc(var(--near) * 0.3 + var(--a) * 0.7);
}

/* four squares like .step__dots; hidden until the line nears the stage,
   then they fill as it activates */
.ag-dots {
  display: flex;
  gap: 4px;
  opacity: max(var(--near), var(--a));
}

.ag-dots i {
  width: 7px;
  height: 7px;
  box-shadow: inset 0 0 0 1px var(--c-ink);
  opacity: calc(0.25 + var(--a) * 0.75);
}

.ag-dots i.is-on {
  background: var(--c-ink);
  transform: scale(calc(0.4 + var(--a) * 0.6));
}

.ag-step__title {
  overflow: hidden;
  margin-bottom: 10px;
  font-size: var(--fs-headline-md);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ag-step__title span {
  display: block;
  transform: translateY(calc((1 - var(--a)) * 105%));
}

.ag-step__desc {
  max-width: 300px;
  font-size: var(--fs-mono-sm);
  opacity: var(--a);
  transform: translateY(calc((1 - var(--a)) * 10px));
}

/* ------------------------------------------------------------- counter */

.ag-count {
  position: absolute;
  left: var(--col-pad);
  bottom: var(--col-pad);
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  column-gap: 10px;
  opacity: calc(0.15 + var(--started) * 0.85);
  transition: opacity 0.6s var(--ease);
}

.ag-count__num {
  display: block;
  height: 1em;
  overflow: hidden;
  font-size: var(--fs-display-md);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ag-count__of {
  padding-bottom: 0.7em;
}

.ag-count__name {
  grid-column: 1 / -1;
  display: block;
  height: 1.4em;
  margin-top: 10px;
  overflow: hidden;
  text-transform: uppercase;
}

.ag-roll,
.ag-roll2 {
  display: block;
  transition: transform 0.7s var(--ease-out);
}

.ag-roll b,
.ag-roll2 b {
  display: block;
  font-weight: inherit;
}

.ag-roll b { height: 1em; }
.ag-roll2 b { height: 1.4em; }

/* Home: the bottom padding mirrors the dark Recognition section below, whose
   content starts 120px under the boundary — so "04 / Test & Deliver" (left)
   and the Test & Deliver copy (right) end 120px above it (100px here + the
   20px column padding). The grid lines carry on through this space
   (approach-grid.js), so they still run straight into the page grid below. */
.approach.approach--grid {                /* .approach (pages/home.css) also sets padding — this wins in any load order */
  padding-bottom: calc(120px - var(--col-pad));
}

@media (max-width: 1199px) {
  .ag-head { left: calc(50% + var(--col-pad)); }
  .ag-copy { display: none; }
  .ag-step__desc { display: none; }
}

/* Phones: four columns are too narrow for the staircase — no pinning, the
   heading, copy and the four stages simply stack, fully shown, with the
   grid's hairlines between them. */
@media (max-width: 809px) {
  .approach.approach--grid { padding-bottom: 70px; }   /* stacked list: keep the normal spacing */
  .ag-track { height: auto; }
  .ag-sticky { position: static; height: auto; }
  .ag-stage { height: auto; }
  .ag-svg,
  .ag-count { display: none; }
  .ag-head,
  .ag-copy { position: static; display: block; padding: 0 var(--col-pad); }
  .ag-copy { margin: 24px 0 40px; max-width: none; opacity: 1; }
  .ag-step {
    --a: 1 !important;
    --near: 1 !important;
    position: static;
    width: auto !important;
    height: auto !important;
    gap: 16px;
    padding: 24px var(--col-pad) 28px;
    box-shadow: inset 0 1px 0 var(--line-on-light);
  }
  .ag-step__desc { display: block; }
  .ag-step__top { margin-bottom: 8px; }
}