/* The homepage is a scroll sequence: four full-viewport moments you move
   through, rather than a document with pictures in it.

   Motion is driven by scroll position, not fired once on entry. main.js writes
   --p (how far a section has travelled through the viewport, 0 to 1) and
   --seq / --seq-p (which step of a pinned sequence is showing). Every rule
   below reads those; none of them decides anything on its own.

   Without script none of those properties are ever set, so each rule falls
   back to a resting value that is the finished state -- the page is complete,
   just still. */

/* ---------- Shared: a photograph filling its section ---------- */

/* Each moment is a different ground, so the page alternates instead of running
   three dark screens together: photograph, page, dark, brand green. The green
   is the company's own and had appeared exactly once on this page. */
.wr-scale,
.wr-close {
  position: relative;
  display: grid;
  align-content: center;
  min-block-size: 100svh;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wr-scale {
  background: var(--color-ground);
  color: var(--color-ink);
}

/* Black on the brand green, not white: white is about 3.3:1 on #00a35e and
   fails AA below display sizes. */
.wr-close {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* ---------- One figure ---------- */

.wr-scale__body {
  padding-block: var(--space-9);
}

.wr-scale__figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: clamp(5rem, 2rem + 16vw, 15rem);
  font-weight: var(--weight-bold);
  line-height: 0.82;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  /* The one place the brand green is set at scale. */
  color: var(--color-accent);
  /* Rises as the section arrives and keeps rising as it leaves, so the number
     is never simply parked in the middle of the screen. */
  transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 9vh), 0);
}

/* transform does not apply to an inline box, and [data-rise] moves this one as
   it arrives. */
.wr-scale__count {
  display: inline-block;
}

.wr-scale__prefix {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  color: var(--color-ink-faint);
}

.wr-scale__label {
  margin-block-start: var(--space-5);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.wr-scale__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-block-start: var(--space-6);
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}

.wr-scale__items > li + li {
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--color-border-strong);
}

/* ---------- The pinned sequence ---------- */

/* Four screens of scroll for one screen of content: that height is what the
   sticky stage travels through, and what gives each service its turn. */
.wr-seq {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  block-size: 400svh;
}

.wr-seq__stage {
  position: sticky;
  inset-block-start: 0;
  display: grid;
  align-content: center;
  block-size: 100svh;
  background: var(--color-invert-bg);
  color: var(--color-invert-ink);
  overflow: hidden;
}

.wr-seq__panel {
  padding-block: var(--space-8) var(--space-9);
  color: #fff;
}

.wr-seq__heading {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgb(255 255 255 / 0.6);
}

.wr-seq__steps {
  margin-block-start: var(--space-5);
}

/* Each step dims until it is the one showing. Without script every step is at
   full strength, which is the honest fallback: four services, all readable. */
.wr-step {
  padding-block: var(--space-2);
  transition: opacity var(--motion-base) var(--ease);
}

/* The step's own index, which the two distance calculations below measure
   against --seq. It is set here rather than as a style attribute on the <li>
   because the Content-Security-Policy has no 'unsafe-inline': an inline style
   is dropped, --i resolves to nothing, and every calc() using it becomes
   invalid at computed-value time -- which silently returns each step to full
   opacity and kills the highlight altogether. Six covers the four services with
   room to grow; a seventh would simply not dim. */
.wr-seq__steps > :nth-child(1) { --i: 0; }
.wr-seq__steps > :nth-child(2) { --i: 1; }
.wr-seq__steps > :nth-child(3) { --i: 2; }
.wr-seq__steps > :nth-child(4) { --i: 3; }
.wr-seq__steps > :nth-child(5) { --i: 4; }
.wr-seq__steps > :nth-child(6) { --i: 5; }

/* The step showing is at full strength; the others sit back without
   disappearing, so the whole offer stays readable while one has its turn. */
.js .wr-step {
  opacity: calc(1 - 0.62 * min(1, max(var(--seq, 0) - var(--i), var(--i) - var(--seq, 0))));
}

.wr-step__link {
  display: grid;
  gap: var(--space-1);
  text-decoration: none;
  color: inherit;
}

.wr-step__title {
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  font-weight: var(--weight-bold);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  transition: color var(--motion-base) var(--ease);
}

/* The service having its turn takes the brand green, mixed by the same
   distance maths the photographs used to cross-fade on: 0 away from the active
   step means full accent, anything else means white. Colour is not the only
   carrier -- the other three are dimmed as well. */
.js .wr-step__title {
  color: color-mix(
    in srgb,
    var(--color-accent)
      calc((1 - min(1, max(var(--seq, 0) - var(--i), var(--i) - var(--seq, 0)))) * 100%),
    #fff);
}

.js .wr-step__link:hover .wr-step__title,
.js .wr-step__link:focus-visible .wr-step__title {
  color: var(--color-accent);
}

.wr-step__line {
  max-inline-size: 44ch;
  font-size: var(--text-base);
  color: rgb(255 255 255 / 0.78);
}

/* ---------- One way out ---------- */

.wr-close__body {
  padding-block: var(--space-9);
}

.wr-close__line {
  max-inline-size: 20ch;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--color-accent-ink);
  transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 6vh), 0);
}

.wr-close__action {
  display: inline-block;
  margin-block-start: var(--space-6);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-accent-ink);
  text-decoration: none;
  border-block-end: 2px solid var(--color-accent-ink);
  padding-block-end: var(--space-2);
  transition: opacity var(--motion-fast) var(--ease);
}

.wr-close__action:hover {
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
    }