main > section {
  position: relative;
  padding-inline: max(var(--space-s), calc((100vw - var(--container)) / 2));
  border-bottom: var(--line-hairline) solid var(--colour-rule-dark);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.brand-mark svg {
  width: 1.75rem;
}

.hero {
  display: grid;
  isolation: isolate;
  min-height: 118svh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  padding-block: calc(var(--nav-height) + var(--space-3xl)) var(--space-xl);
  overflow: hidden;
}

.has-js .hero__media {
  transform: scale(calc(1 + var(--scene-progress, 0) * 0.055));
  transform-origin: 60% 48%;
  will-change: transform;
}

.has-js .hero__content {
  transform: translateY(calc(var(--scene-progress, 0) * -9vh));
  opacity: clamp(0.18, calc(1 - var(--scene-progress, 0) * 1.12), 1);
  will-change: transform, opacity;
}

.has-js .hero__telemetry {
  transform: translateY(calc(var(--scene-progress, 0) * -5vh));
  opacity: clamp(0, calc(1 - var(--scene-progress, 0) * 1.35), 1);
  will-change: transform, opacity;
}

.hero__media,
.hero__grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 0;
  border-radius: 0;
}

.hero__media {
  background:
    radial-gradient(circle at 72% 33%, color-mix(in srgb, var(--colour-amber) 26%, transparent), transparent 24rem),
    linear-gradient(145deg, var(--colour-midnight-soft), var(--colour-midnight));
}

.hero__media img {
  filter: brightness(0.68) saturate(0.82);
}

.hero__media .media-frame__veil {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--colour-midnight) 88%, transparent) 0 35%, transparent 72%),
    linear-gradient(0deg, color-mix(in srgb, var(--colour-midnight) 82%, transparent), transparent 64%);
}

.hero__grid {
  z-index: 1;
  opacity: 0.52;
  background:
    linear-gradient(90deg, transparent calc(25% - var(--line-hairline)), var(--colour-rule-dark) 25%, transparent calc(25% + var(--line-hairline))),
    linear-gradient(90deg, transparent calc(75% - var(--line-hairline)), var(--colour-rule-dark) 75%, transparent calc(75% + var(--line-hairline))),
    linear-gradient(0deg, transparent calc(34% - var(--line-hairline)), var(--colour-rule-dark) 34%, transparent calc(34% + var(--line-hairline))),
    linear-gradient(0deg, transparent calc(72% - var(--line-hairline)), var(--colour-rule-dark) 72%, transparent calc(72% + var(--line-hairline)));
}

.hero__content {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 7;
  align-self: center;
  padding-top: var(--space-xl);
}

.hero__content h1 {
  max-width: 8ch;
  margin-block: var(--space-m);
  font-size: var(--step-7);
}

.hero__content > * {
  animation: hero-settle 900ms var(--ease-quiet) both;
}

.hero__content > :nth-child(2) {
  animation-delay: 90ms;
}

.hero__content > :nth-child(3) {
  animation-delay: 170ms;
}

.hero__content > :nth-child(4) {
  animation-delay: 250ms;
}

.hero__intro {
  max-width: 34rem;
  margin-bottom: var(--space-l);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}

.hero .qualifier {
  margin-bottom: 0;
}

.hero__telemetry {
  position: relative;
  z-index: 2;
  grid-column: 10 / -1;
  align-self: end;
  padding: var(--space-s);
  border: var(--line-hairline) solid var(--colour-rule-dark);
  border-radius: var(--radius-s);
  background: var(--colour-night-glass);
  backdrop-filter: blur(1rem);
}

.hero__telemetry dl {
  margin-block: var(--space-m);
}

.hero__telemetry dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-2xs);
  border-bottom: var(--line-hairline) solid var(--colour-rule-dark);
}

.hero__telemetry dt {
  color: var(--colour-steel);
}

.hero__telemetry dd {
  margin: 0;
  font-family: var(--font-mono);
}

.charge-track {
  height: 0.35rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--colour-rule-dark);
}

.charge-track span {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: var(--colour-signal);
  transform-origin: left;
  animation: charge-arrive 1.4s var(--ease-quiet) 500ms both;
}

@keyframes hero-settle {
  from {
    transform: translateY(1.1rem);
    opacity: 0;
  }
}

@keyframes charge-arrive {
  from {
    transform: scaleX(0.08);
  }
}

.hero__scroll {
  position: absolute;
  z-index: 2;
  right: var(--space-l);
  bottom: var(--space-l);
  display: flex;
  gap: var(--space-s);
  writing-mode: vertical-rl;
}

.benefit {
  display: grid;
  min-height: 108vh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: var(--space-l);
  align-items: center;
  padding-block: var(--space-xl) var(--space-3xl);
  border-bottom-color: var(--colour-rule-light);
  overflow: hidden;
}

.benefit-story {
  position: relative;
  z-index: 3;
  min-height: 330svh;
  margin-top: -14svh;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--colour-paper);
}

.benefit-story__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent calc(25% - var(--line-hairline)), var(--colour-rule-light) 25%, transparent calc(25% + var(--line-hairline))),
    linear-gradient(90deg, transparent calc(75% - var(--line-hairline)), var(--colour-rule-light) 75%, transparent calc(75% + var(--line-hairline))),
    var(--colour-paper);
}

.benefit-story .benefit {
  position: absolute;
  inset: 0;
  min-height: 100svh;
  border: 0;
  background: transparent;
  transition: visibility 0s linear;
}

.has-js .benefit-story .benefit {
  will-change: transform, opacity;
}

.has-js .benefit--economy {
  z-index: 1;
  opacity: clamp(0, calc((0.42 - var(--scene-progress, 0)) * 8), 1);
  transform: translateY(calc(var(--scene-progress, 0) * -7vh));
}

.has-js .benefit--ready {
  z-index: 2;
  opacity: min(
    clamp(0, calc((var(--scene-progress, 0) - 0.20) * 10), 1),
    clamp(0, calc((0.76 - var(--scene-progress, 0)) * 10), 1)
  );
}

.has-js .benefit--control {
  z-index: 3;
  opacity: clamp(0, calc((var(--scene-progress, 0) - 0.58) * 10), 1);
}

.has-js .benefit--economy .benefit__media {
  transform: translateX(calc((1 - clamp(0, calc(var(--scene-progress, 0) * 5), 1)) * 26vw)) scale(calc(0.94 + clamp(0, calc(var(--scene-progress, 0) * 5), 1) * 0.06));
}

.has-js .benefit--ready .benefit__media {
  transform: translate3d(
    calc((1 - clamp(0, calc((var(--scene-progress, 0) - 0.22) * 8), 1)) * -22vw),
    calc((1 - clamp(0, calc((var(--scene-progress, 0) - 0.22) * 8), 1)) * 18vh),
    0
  );
}

.has-js .benefit--control .benefit__media {
  transform: translate3d(
    calc((1 - clamp(0, calc((var(--scene-progress, 0) - 0.58) * 8), 1)) * 20vw),
    calc((1 - clamp(0, calc((var(--scene-progress, 0) - 0.58) * 8), 1)) * -15vh),
    0
  );
}

.has-js .benefit-story .benefit__media,
.has-js .benefit-story .schedule-card,
.has-js .benefit-story .mini-app {
  will-change: transform, opacity;
}

.section-index {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  align-self: start;
}

.section-rule {
  flex: 1;
  height: var(--line-hairline);
  background: currentColor;
  opacity: 0.22;
}

.benefit__copy {
  grid-column: 2 / span 5;
  align-self: center;
}

.benefit__copy--right {
  grid-column: 8 / span 4;
}

.benefit__media {
  grid-column: 8 / -1;
  align-self: stretch;
  min-height: 39rem;
  border-color: var(--colour-rule-light);
  background:
    radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--colour-amber) 42%, transparent), transparent 16rem),
    var(--colour-paper);
}

.benefit__media--wide {
  grid-column: 1 / span 6;
  min-height: 35rem;
}

.benefit__media img {
  filter: saturate(0.86);
}

.benefit__media figcaption,
.service-step__media figcaption {
  position: absolute;
  right: var(--space-s);
  bottom: var(--space-s);
  left: var(--space-s);
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-pill);
  background: var(--colour-light-glass);
  color: var(--colour-ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  backdrop-filter: blur(0.8rem);
}

.schedule-card {
  position: absolute;
  right: calc(34% - var(--space-xl));
  bottom: var(--space-2xl);
  width: min(22rem, 38vw);
  padding: var(--space-s);
  border: var(--line-hairline) solid var(--colour-rule-light);
  border-radius: var(--radius-m);
  background: var(--colour-light-glass);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(1rem);
}

.schedule-card__time {
  display: flex;
  justify-content: space-between;
  margin-block: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: -0.04em;
}

.schedule-card__bars {
  display: flex;
  height: 5rem;
  align-items: end;
  gap: var(--space-3xs);
  padding-block: var(--space-xs);
  border-block: var(--line-hairline) solid var(--colour-rule-light);
}

.schedule-card__bars span {
  flex: 1;
  height: var(--bar);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--colour-signal-deep);
}

.schedule-card > p:last-child {
  margin: var(--space-xs) 0 0;
  font-size: var(--step--1);
}

.readiness-dial {
  position: relative;
  width: min(22rem, 100%);
  margin-top: var(--space-l);
  text-align: center;
}

.readiness-dial svg path {
  fill: none;
  stroke: var(--colour-rule-light);
  stroke-linecap: round;
  stroke-width: 9;
}

.readiness-dial svg .readiness-dial__value {
  stroke: var(--colour-signal-deep);
  stroke-dasharray: 82 100;
}

.readiness-dial strong {
  display: block;
  margin-top: -3.25rem;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.readiness-dial span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
}

.benefit--control .benefit__media {
  grid-column: 7 / -1;
  min-height: 33rem;
}

.mini-app {
  position: absolute;
  right: max(var(--space-l), calc((100vw - var(--container)) / 2 + var(--space-xl)));
  bottom: var(--space-2xl);
  width: min(24rem, 42vw);
  padding: var(--space-s);
  border: var(--line-hairline) solid var(--colour-rule-light);
  border-radius: var(--radius-m);
  background: var(--colour-light-glass);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(1rem);
}

.mini-app > div {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block: var(--space-m);
}

.mini-app strong {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 400;
  letter-spacing: -0.06em;
}

.mini-app small {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0;
}

.mini-app svg path {
  fill: none;
  stroke: var(--colour-signal-deep);
  stroke-linecap: round;
  stroke-width: 3;
}

.night-shift {
  display: block;
  isolation: isolate;
  min-height: 300svh;
  padding: 0;
  overflow: clip;
}

.night-shift__stage {
  position: sticky;
  top: 0;
  display: grid;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  align-items: end;
  padding: var(--space-3xl) max(var(--space-s), calc((100vw - var(--container)) / 2));
  overflow: hidden;
}

.night-shift__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 70% 28%, color-mix(in srgb, var(--colour-amber) 28%, transparent), transparent 20rem),
    var(--colour-midnight);
}

.night-shift__media img {
  filter: brightness(0.5) saturate(0.74);
}

.night-shift__clock {
  position: absolute;
  z-index: 1;
  top: 13%;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
  color: var(--colour-rule-dark);
  font-family: var(--font-display);
  font-size: min(27vw, 26rem);
  letter-spacing: -0.1em;
  line-height: 0.8;
  white-space: nowrap;
}

.night-shift__clock i {
  padding-inline: 0.04em 0.12em;
  font-style: normal;
}

.night-shift__content {
  position: relative;
  z-index: 2;
  max-width: 76rem;
}

.night-shift__content h2 {
  margin-block: var(--space-l);
  font-size: var(--step-6);
}

.night-shift__content > p:last-child {
  max-width: 35rem;
  font-size: var(--step-1);
}

.night-shift__dawn {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--colour-amber) 24%, transparent), transparent 48%, color-mix(in srgb, var(--colour-signal) 18%, transparent));
  opacity: clamp(0, calc((var(--scene-progress, 0) - 0.58) * 2.4), 0.72);
  pointer-events: none;
}

.has-js .night-shift__media {
  transform: scale(calc(1.06 - var(--scene-progress, 0) * 0.06)) translateY(calc(var(--scene-progress, 0) * -2.5vh));
  will-change: transform, filter;
}

.has-js .night-shift__media img {
  filter: brightness(calc(0.46 + var(--scene-progress, 0) * 0.2)) saturate(calc(0.7 + var(--scene-progress, 0) * 0.16));
}

.night-shift__timeline {
  position: absolute;
  z-index: 3;
  right: max(var(--space-l), calc((100vw - var(--container)) / 2));
  bottom: var(--space-xl);
  width: min(46rem, 48vw);
  padding: var(--space-s);
  border: var(--line-hairline) solid var(--colour-rule-dark);
  border-radius: var(--radius-s);
  background: var(--colour-night-glass);
  backdrop-filter: blur(1rem);
}

.night-shift__timeline p {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.7rem);
  transition: opacity 360ms var(--ease-quiet), transform 360ms var(--ease-quiet);
}

.night-shift[data-night-stage="detected"] [data-night-status="detected"],
.night-shift[data-night-stage="window"] [data-night-status="window"],
.night-shift[data-night-stage="ready"] [data-night-status="ready"] {
  opacity: 1;
  transform: translateY(0);
}

.night-shift__timeline svg {
  display: block;
  width: 100%;
  height: 7rem;
  margin-top: var(--space-m);
  overflow: visible;
}

.night-shift__timeline path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.night-shift__curve-grid {
  stroke: var(--colour-rule-dark);
  stroke-width: 1;
}

[data-night-curve] {
  stroke: var(--colour-signal);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--scene-progress, 0));
}

.service {
  min-height: 360svh;
  padding-block: var(--space-3xl);
  border-bottom-color: var(--colour-rule-light);
}

.service__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-l);
  margin-bottom: var(--space-3xl);
}

.service__intro .eyebrow {
  grid-column: 1 / span 4;
}

.service__intro h2 {
  grid-column: 5 / span 5;
}

.service__intro .chapter-copy {
  grid-column: 10 / -1;
}

.service__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.82fr);
  gap: var(--space-xl);
  align-items: start;
}

.service__steps {
  display: grid;
  gap: 16svh;
}

.service-card__stage {
  position: relative;
}

.service-card {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-s));
  z-index: 1;
  display: grid;
  min-height: calc(100svh - var(--nav-height) - var(--space-xl));
  grid-template-rows: minmax(20rem, 0.88fr) minmax(16rem, 1.12fr);
  overflow: hidden;
  border: var(--line-hairline) solid var(--colour-rule-light);
  border-radius: var(--radius-m);
  background: var(--colour-paper);
  box-shadow: 0 -1.5rem 3rem color-mix(in srgb, var(--colour-ink) 7%, transparent);
}

.service-card:nth-child(2) {
  top: calc(var(--nav-height) + var(--space-l));
  z-index: 2;
}

.service-card:nth-child(3) {
  top: calc(var(--nav-height) + var(--space-xl));
  z-index: 3;
  grid-template-rows: 1fr auto;
  background: color-mix(in srgb, var(--colour-paper) 92%, var(--colour-signal));
}

.service-card .service-step,
.service-card .service-step__media {
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.service-card .service-step__media {
  border-top: var(--line-hairline) solid var(--colour-rule-light);
}

.service-card__completion {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: var(--space-2xs) var(--space-s);
  padding: var(--space-l);
  background: var(--colour-signal);
  color: var(--colour-midnight);
}

.service-card__completion strong {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.service-step {
  min-height: 26rem;
  padding: var(--space-xl) var(--space-l);
  border: var(--line-hairline) solid var(--colour-rule-light);
  border-radius: var(--radius-m);
  background: var(--colour-paper);
}

.service-step h3 {
  max-width: 9ch;
  margin-block: var(--space-xl) var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 400;
  letter-spacing: -0.055em;
}

.service-step p {
  max-width: 31rem;
  font-size: var(--step-1);
}

.service-step__media {
  min-height: 34rem;
  border-color: var(--colour-rule-light);
  background: var(--colour-paper);
}

.service .app-shell {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-xl));
}

.app-shell__greeting {
  margin-block: var(--space-m) var(--space-2xs);
  font-size: var(--step-1);
}

.app-shell__body h3 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.app-shell__metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.app-shell__metric span,
.app-shell__times {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
}

.app-shell__curve {
  width: 100%;
  overflow: visible;
}

.app-shell__curve path {
  fill: none;
}

.app-shell__curve-grid {
  stroke: var(--colour-rule-light);
  stroke-width: 1;
}

.app-shell__curve-value {
  stroke: var(--colour-signal-deep);
  stroke-linecap: round;
  stroke-width: 4;
}

.app-shell__times {
  display: flex;
  justify-content: space-between;
}

.app-state-button {
  min-height: 2.7rem;
  padding: var(--space-2xs) var(--space-s);
  border: var(--line-hairline) solid var(--colour-rule-light);
  background: transparent;
}

.app-state-button:hover,
.app-state-button[aria-pressed="true"] {
  background: var(--colour-ink);
  color: var(--colour-chalk);
}

.network {
  isolation: isolate;
  min-height: 240svh;
  padding-block: var(--space-3xl);
  overflow: clip;
}

.network__media {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 62rem;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 72% 20%, color-mix(in srgb, var(--colour-amber) 22%, transparent), transparent 20rem),
    var(--colour-midnight-soft);
}

.network__media img {
  filter: brightness(0.42) saturate(0.58);
}

.network__media .media-frame__veil {
  background: linear-gradient(0deg, var(--colour-midnight) 4%, transparent 68%);
}

.network__content {
  position: relative;
  z-index: 2;
  max-width: 60rem;
  margin-bottom: var(--space-3xl);
}

.network__content .chapter-heading {
  max-width: 13ch;
  margin-block: var(--space-l);
}

.source-note {
  margin-top: var(--space-l);
  color: var(--colour-steel);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.network-panel {
  z-index: 2;
  min-height: 48rem;
  margin-top: 30rem;
  background: color-mix(in srgb, var(--colour-midnight-soft) 84%, transparent);
  backdrop-filter: blur(1rem);
}

.has-js .network-panel {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-l));
  transform: translateY(calc((1 - clamp(0, calc(var(--scene-progress, 0) * 2.4), 1)) * 12vh));
}

.network-panel > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--colour-steel);
}

.network-map__roads path,
.network-map__links path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.network-map__roads {
  opacity: 0.28;
}

.network-map__links {
  color: var(--colour-signal);
  opacity: 0.72;
}

.network-map__links path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--scene-progress, 0) - 0.12) * 1.8), 1));
}

.network-map__links path:nth-child(2) {
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--scene-progress, 0) - 0.25) * 2), 1));
}

.network-map__links path:nth-child(3) {
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--scene-progress, 0) - 0.38) * 2.2), 1));
}

.network-map__nodes circle {
  fill: var(--colour-signal);
  stroke: var(--colour-chalk);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(0.55 + clamp(0, calc((var(--scene-progress, 0) - 0.38) * 2), 1) * 0.45));
  opacity: clamp(0.32, calc((var(--scene-progress, 0) - 0.28) * 2.2), 1);
}

.network-panel__legend {
  position: absolute;
  right: var(--space-s);
  bottom: var(--space-s);
  left: var(--space-s);
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s);
  border: var(--line-hairline) solid var(--colour-rule-dark);
  border-radius: var(--radius-s);
  background: var(--colour-night-glass);
}

.network > .disclosure {
  position: relative;
  z-index: 2;
  max-width: 48rem;
  margin: var(--space-l) 0 0 auto;
  color: var(--colour-steel);
}

.dawn {
  display: block;
  isolation: isolate;
  min-height: 180svh;
  padding: 0;
  overflow: clip;
}

.dawn__stage {
  position: sticky;
  top: 0;
  display: grid;
  isolation: isolate;
  height: 100svh;
  align-items: end;
  padding: var(--space-3xl) max(var(--space-s), calc((100vw - var(--container)) / 2));
  overflow: hidden;
  background: color-mix(in srgb, var(--colour-midnight-soft) 82%, var(--colour-signal));
}

.dawn__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 68% 24%, color-mix(in srgb, var(--colour-paper) 50%, transparent), transparent 30rem),
    linear-gradient(var(--colour-steel-dark), var(--colour-midnight));
}

.has-js .dawn__media {
  clip-path: inset(0 0 0 calc((1 - clamp(0, calc(var(--scene-progress, 0) * 1.5), 1)) * 50%));
  transform: scale(calc(1.05 - var(--scene-progress, 0) * 0.05));
  transform-origin: 72% 50%;
  will-change: clip-path, transform;
}

.dawn__wipe {
  position: absolute;
  z-index: 2;
  top: 18%;
  right: 12%;
  width: 36%;
  height: 34%;
  background:
    repeating-linear-gradient(108deg, transparent 0 14%, color-mix(in srgb, var(--colour-chalk) 16%, transparent) 14% 28%),
    var(--colour-signal);
  transform: translateX(calc((var(--scene-progress, 0) - 0.5) * 34vw)) scaleX(clamp(0, calc(1 - var(--scene-progress, 0) * 1.25), 1));
  transform-origin: right;
  opacity: clamp(0, calc((0.82 - var(--scene-progress, 0)) * 4), 1);
  mix-blend-mode: screen;
  pointer-events: none;
}

.dawn__media img {
  filter: brightness(0.68) saturate(0.6);
}

.dawn__media .media-frame__veil {
  background: linear-gradient(0deg, var(--colour-midnight), transparent 70%);
}

.dawn__content h2 {
  margin-block: var(--space-m) var(--space-xl);
  font-size: var(--step-7);
}

.dawn__content {
  position: relative;
  z-index: 2;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.65fr;
  gap: var(--space-xl);
  padding: var(--space-xl) max(var(--space-s), calc((100vw - var(--container)) / 2));
  border-top: var(--line-hairline) solid var(--colour-rule-dark);
  background: var(--colour-midnight);
}

.site-footer__brand > p {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-2);
}

.site-footer__meta p,
.site-footer__links a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.site-footer__meta p {
  margin-bottom: var(--space-s);
}

.site-footer__links {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  justify-items: start;
}

@media (max-width: 64rem) {
  .hero__content {
    grid-column: 1 / span 8;
  }

  .hero__telemetry {
    grid-column: 9 / -1;
  }

  .benefit__copy,
  .benefit__copy--right {
    grid-column: 1 / span 5;
  }

  .benefit__media,
  .benefit--control .benefit__media,
  .benefit__media--wide {
    grid-column: 6 / -1;
  }

  .schedule-card {
    right: var(--space-l);
  }

  .service__intro .eyebrow,
  .service__intro h2,
  .service__intro .chapter-copy {
    grid-column: 1 / -1;
  }

  .service__layout {
    grid-template-columns: 1fr 23rem;
  }
}

@media (max-width: 46rem) {
  .hero {
    min-height: 100svh;
    grid-template-columns: 1fr;
    align-content: end;
    padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-l);
  }

  .hero__media .media-frame__veil {
    background: linear-gradient(0deg, var(--colour-midnight) 5%, color-mix(in srgb, var(--colour-midnight) 42%, transparent) 72%);
  }

  .hero__grid {
    opacity: 0.28;
  }

  .hero__content,
  .hero__telemetry {
    grid-column: 1;
  }

  .hero__content h1 {
    font-size: var(--step-6);
  }

  .hero__intro {
    font-size: var(--step-0);
  }

  .hero__telemetry {
    display: none;
  }

  .hero__scroll {
    display: none;
  }

  .benefit {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-xl);
    padding-block: var(--space-xl) var(--space-3xl);
  }

  .section-index,
  .benefit__copy,
  .benefit__copy--right,
  .benefit__media,
  .benefit--control .benefit__media,
  .benefit__media--wide {
    grid-column: 1;
  }

  .benefit__copy {
    order: 2;
  }

  .benefit__media {
    order: 3;
    min-height: 30rem;
  }

  .benefit__media--wide {
    min-height: 23rem;
  }

  .schedule-card,
  .mini-app {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    order: 4;
  }

  .night-shift {
    min-height: 100svh;
  }

  .night-shift__clock {
    top: 20%;
    font-size: 39vw;
  }

  .night-shift__content h2 {
    font-size: var(--step-5);
  }

  .service__intro {
    display: block;
    margin-bottom: var(--space-xl);
  }

  .service__intro > * {
    margin-bottom: var(--space-m);
  }

  .service__layout {
    grid-template-columns: 1fr;
  }

  .service-step {
    min-height: auto;
    padding: var(--space-l) var(--space-s);
  }

  .service-step h3 {
    margin-top: var(--space-xl);
    font-size: var(--step-4);
  }

  .service-step__media {
    min-height: 28rem;
  }

  .service .app-shell {
    position: relative;
    top: auto;
    order: -1;
  }

  .network {
    min-height: auto;
  }

  .network__media {
    height: 46rem;
  }

  .network-panel {
    min-height: 31rem;
    margin-top: var(--space-3xl);
  }

  .network-panel__legend {
    display: grid;
  }

  .dawn__content h2 {
    font-size: var(--step-6);
  }

  .benefit-story {
    min-height: auto;
    margin-top: 0;
    border-radius: 0;
  }

  .benefit-story__stage {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .has-js .benefit-story .benefit {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
  }

  .has-js .benefit-story .benefit__media,
  .has-js .benefit-story .schedule-card,
  .has-js .benefit-story .mini-app {
    transform: none;
  }

  .night-shift__stage,
  .dawn__stage {
    position: relative;
    height: 100svh;
  }

  .night-shift__timeline {
    right: var(--space-s);
    bottom: var(--space-s);
    left: var(--space-s);
    width: auto;
  }

  .service {
    min-height: auto;
  }

  .service__steps {
    gap: var(--space-xl);
  }

  .service-card {
    position: relative;
    top: auto;
    min-height: auto;
    grid-template-rows: auto minmax(24rem, 58svh);
  }

  .service-card:nth-child(2),
  .service-card:nth-child(3) {
    top: auto;
  }

  .has-js .network-panel {
    position: relative;
    top: auto;
    transform: none;
  }

  .dawn {
    min-height: 100svh;
  }

  .has-js .dawn__media {
    clip-path: none;
    transform: none;
  }

  .dawn__wipe {
    display: none;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .benefit-story,
  .night-shift,
  .service,
  .network,
  .dawn {
    min-height: auto;
  }

  .benefit-story {
    margin-top: 0;
  }

  .benefit-story__stage,
  .night-shift__stage,
  .dawn__stage {
    position: relative;
    height: auto;
    min-height: 100svh;
  }

  .has-js .benefit-story .benefit {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
  }

  .has-js .hero__media,
  .has-js .hero__content,
  .has-js .hero__telemetry,
  .has-js .benefit-story .benefit__media,
  .has-js .benefit-story .schedule-card,
  .has-js .benefit-story .mini-app,
  .has-js .night-shift__media,
  .has-js .network-panel,
  .has-js .dawn__media,
  .dawn__wipe {
    transform: none;
    opacity: 1;
    clip-path: none;
  }

  [data-night-curve],
  .network-map__links path {
    stroke-dashoffset: 0;
  }

  .service-card {
    position: relative;
    top: auto;
  }

  .night-shift__clock,
  .hero__grid {
    transform: none;
  }
}