/* A cooling atmosphere, carried from the home to the connected service journey. */
:root {
  --ease-flow: cubic-bezier(0.77, 0, 0.175, 1);
}
.hero-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(130deg, var(--surface) 30%, #e5e9ff 75%, #d6f7f2 100%);
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero-cloud {
  position: absolute;
  border-radius: 50%;
  width: 850px;
  height: 850px;
  opacity: 0.7;
}
.hero-cloud-one {
  right: -250px;
  top: -430px;
  background: radial-gradient(ellipse at center, #5b52ce3d 0%, #8dd0ff22 42%, transparent 69%);
}
.hero-cloud-two {
  left: 29%;
  bottom: -600px;
  background: radial-gradient(ellipse at center, #39e5d45e 0%, #39e5d41a 40%, transparent 70%);
}
.hero-visual {
  isolation: isolate;
}
.photo-note {
  z-index: 4;
}
.photo-aura {
  position: absolute;
  z-index: -1;
}
.hero-visit {
  position: absolute;
  top: 27px;
  right: -18px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid #ffffffcc;
  padding: 15px 18px;
  box-shadow: 0 15px 40px #0a19311a;
}
.hero-visit > i {
  display: flex;
  background: var(--violet-light);
  padding: 10px;
  color: var(--indigo);
}
.hero-visit strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.hero-visit small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.hero-scroll-cue {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
  margin-top: 24px;
}
.hero-scroll-cue span {
  height: 30px;
  width: 18px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  display: block;
  position: relative;
}
.hero-scroll-cue span:after {
  content: '';
  height: 5px;
  width: 2px;
  position: absolute;
  left: 7px;
  top: 7px;
  background: var(--indigo);
  animation: scroll-cue 2s var(--ease-flow) infinite;
  animation-play-state: paused;
}
.motion-playing .hero-scroll-cue span:after {
  animation-play-state: running;
}
@keyframes scroll-cue {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(9px);
    opacity: 1;
  }
}
.service-band {
  overflow: hidden;
  position: relative;
  background: linear-gradient(110deg, #e5e9ff, var(--ground) 45%, #d8f5f2);
  border: 0;
  padding: 25px 0;
}
.service-rail {
  display: flex;
  animation-play-state: paused;
  gap: 0;
}
.service-group {
  display: flex;
  align-items: center;
  padding-right: 60px;
}
.service-group > span {
  display: flex;
  gap: 13px;
  align-items: center;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
}
.service-group > span:first-child {
  color: var(--muted);
  font-size: 14px;
}
.service-group i {
  display: flex;
  color: var(--indigo);
}
.service-group svg {
  width: 25px;
  height: 25px;
}
.service-group > span:after {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--indigo);
  border-radius: 50%;
  margin-left: 43px;
  opacity: 0.3;
}
.motion-playing .service-rail {
  animation-play-state: running;
}
@keyframes service-drift {
  to {
    transform: translateX(-50%);
  }
}
.connected-section {
  position: relative;
  padding: 80px 0 100px;
  overflow: clip;
}
.connected-heading {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: end;
}
.connected-heading p {
  max-width: 350px;
  color: var(--muted);
}
.journey-layout {
  display: grid;
  align-items: start;
  margin-top: 50px;
}
.journey-chapter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 35px 0;
  position: relative;
}
.journey-chapter > span:first-child {
  display: flex;
  color: var(--indigo);
  margin-bottom: 22px;
}
.journey-chapter > span:first-child svg {
  width: 32px;
  height: 32px;
}
.journey-chapter h3 {
  font-size: clamp(1.75rem, 2.7vw, 2.5rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.journey-chapter p {
  max-width: 380px;
  color: var(--muted);
  margin-top: 20px;
  font-size: 16px;
}
.chapter-detail {
  font-size: 12px;
  color: var(--navy-soft);
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  width: fit-content;
}
.journey-stage {
  align-self: start;
  padding-top: 20px;
  min-width: 0;
}
.journey-art {
  position: relative;
}
.journey-aura {
  position: absolute;
  pointer-events: none;
}
.journey-aura span {
  position: absolute;
  inset: 0;
}
.journey-float {
  position: absolute;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #ffffffc7;
  font-size: 13px;
  font-weight: 500;
}
.journey-float > i {
  display: flex;
  color: var(--indigo);
  background: var(--violet-light);
  padding: 9px;
}
.journey-float svg {
  width: 22px;
  height: 22px;
}
.journey-float span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px;
}
.float-review > i {
  background: #d6f7f2;
  color: var(--mint-dark);
}
.journey-scene-controls {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.journey-scene-controls button {
  font-size: 12px;
}
.journey-scene-controls button[aria-pressed='true'] {
  background: var(--surface);
  border-color: var(--line);
}
.journey-caption {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}
.district-section {
  background: linear-gradient(145deg, var(--navy) 25%, #161d51 70%, #1a3d63);
  padding-bottom: 64px;
}
.district-grid {
  z-index: 2;
}
.news-section {
  position: relative;
}
.news-item {
  position: relative;
  isolation: isolate;
}
.news-item:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 240ms ease;
}
.news-item[open]:before {
  opacity: 1;
}
.news-item[open] summary,
.news-item[open] .news-body {
  padding-left: 18px;
  padding-right: 18px;
}
.news-item[open] .news-body {
  margin-left: 225px;
}
.news-open {
  background: linear-gradient(135deg, var(--surface), var(--violet-light));
}
.next-section {
  position: relative;
  isolation: isolate;
  row-gap: 35px;
}
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, #4a3fb2, #5b52ce 60%, #1a3d63);
}
.closing-atmosphere {
  position: absolute;
  inset: -180px -100px;
  z-index: -1;
  pointer-events: none;
}
.closing-atmosphere span {
  position: absolute;
  width: 800px;
  height: 800px;
  right: -50px;
  top: 0;
  background: radial-gradient(ellipse, #39e5d450, transparent 66%);
}
.reading-progress {
  background: linear-gradient(90deg, var(--indigo), var(--mint));
}
@media (hover: hover) and (pointer: fine) {
  .news-item:hover:before {
    opacity: 1;
  }
  .journey-scene-controls button:hover {
    background: #ffffff88;
    color: var(--indigo);
  }
}
@media (max-width: 1100px) {
  .hero-visit {
    right: 0;
    top: 20px;
    padding: 12px 14px;
  }
  .journey-float {
    font-size: 12px;
  }
  .news-item[open] .news-body {
    margin-left: 190px;
  }
}
@media (max-width: 900px) {
  .journey-float {
    gap: 9px;
  }
  .journey-float span {
    font-size: 10px;
  }
  .news-item[open] .news-body {
    margin-left: 145px;
  }
}
@media (max-width: 680px) {
  .hero-shell {
    background: linear-gradient(150deg, var(--surface) 35%, #e5e9ff 70%, #d6f7f2);
  }
  .hero-cloud {
    width: 600px;
    height: 600px;
  }
  .hero-cloud-one {
    right: -250px;
    top: 100px;
  }
  .hero-cloud-two {
    left: -200px;
    bottom: -260px;
  }
  .hero-visit {
    top: 14px;
    right: -4px;
    padding: 10px 12px;
    gap: 8px;
  }
  .hero-visit strong {
    font-size: 11px;
  }
  .hero-visit small {
    font-size: 9px;
  }
  .hero-visit > i {
    padding: 7px;
  }
  .hero-visit svg {
    height: 18px;
    width: 18px;
  }
  .hero-scroll-cue {
    display: none;
  }
  .photo-aura {
    border-top-left-radius: 90px;
  }
  .service-band {
    padding: 20px 0;
  }
  .service-group {
    padding-right: 26px;
  }
  .service-group > span:after {
    margin-left: 14px;
  }
  .service-group svg {
    width: 21px;
    height: 21px;
  }
  .connected-section {
    padding: 64px 0;
  }
  .connected-heading {
    display: block;
  }
  .connected-heading p {
    margin-top: 20px;
    font-size: 15px;
  }
  .journey-layout {
    flex-direction: column;
    margin-top: 22px;
  }
  .journey-stage {
    order: 0;
    width: 100%;
    padding: 0;
  }
  .journey-chapters {
    order: 1;
    display: grid;
    gap: 28px;
  }
  .journey-chapter {
    padding: 25px 0;
    border-top: 1px solid var(--line);
  }
  .journey-chapter h3 {
    font-size: 1.75rem;
  }
  .journey-chapter > span:first-child {
    margin-bottom: 15px;
  }
  .journey-chapter p {
    margin-top: 14px;
    font-size: 15px;
  }
  .chapter-detail {
    margin-top: 18px;
    font-size: 11px;
  }
  .journey-float {
    gap: 8px;
  }
  .journey-float > i {
    padding: 7px;
  }
  .journey-float svg {
    width: 19px;
    height: 19px;
  }
  .district-section {
    padding-bottom: 30px;
  }
  .news-item[open] summary,
  .news-item[open] .news-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .news-item[open] .news-body {
    margin-left: 0;
  }
  .closing-atmosphere {
    inset: -100px -200px;
  }
  .closing-atmosphere span {
    width: 600px;
    height: 600px;
  }
}
@media (max-width: 360px) {
  .journey-float {
    font-size: 10px;
  }
  .journey-float span {
    font-size: 9px;
  }
  .journey-chapter h3 {
    font-size: 1.6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-rail {
    animation: none !important;
  }
  .hero-visit {
    transform: none;
  }
  .hero-scroll-cue span:after {
    animation: none !important;
  }
  .service-rail {
    transform: none !important;
  }
  .journey-scene-controls button,
  .news-item:before {
    transition:
      background 160ms ease,
      color 160ms ease,
      opacity 160ms ease !important;
  }
}
.motion-disabled .journey-float {
  transform: none !important;
}

/* A stylized launch illustration; it communicates no precise coverage boundary. */
.launch-atlas {
  position: relative;
  isolation: isolate;
  height: 330px;
  max-width: 1180px;
  margin: 38px auto -46px;
  overflow: hidden;
  pointer-events: none;
  border-top: 1px solid #46698e45;
}
.atlas-halo {
  position: absolute;
  inset: -20% 10% -16%;
  z-index: -1;
  transform-origin: center;
}
.atlas-halo-drift {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 62% 54%, #39e5d424 0%, transparent 47%),
    radial-gradient(ellipse at 41% 65%, #5b52ce55 0%, transparent 61%);
  animation: atlas-atmosphere 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation-play-state: paused;
}
.atlas-grain {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: radial-gradient(circle, #b3cfe5 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(transparent 4%, #000 42%, transparent 75%);
}
.atlas-city-layer,
.atlas-front-layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 80%;
}
.atlas-city,
.atlas-ground {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.atlas-front-layer {
  z-index: 1;
}
.atlas-route-light {
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: 0.85;
  animation: atlas-route-flow 7s linear infinite;
  animation-play-state: paused;
}
.atlas-pin-float {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: atlas-pin-breathe 5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation-play-state: paused;
}
.atlas-ring {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.7);
  opacity: 0.3;
  animation: atlas-launch-ring 5s linear infinite;
  animation-play-state: paused;
}
.atlas-ring-two {
  animation-delay: -2.5s;
}
.atlas-caption {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b3cfe5;
  font-size: 11px;
  letter-spacing: 0.015em;
  z-index: 2;
}
.atlas-caption-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #39e5d4;
  box-shadow: 0 0 12px #39e5d480;
  flex: none;
}
.atlas-caption-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, #46698e55, #46698e15);
  margin: 0 14px;
}
.atlas-caption-next {
  color: #b3cfe5;
}
.launch-atlas.motion-playing .atlas-halo-drift,
.launch-atlas.motion-playing .atlas-route-light,
.launch-atlas.motion-playing .atlas-pin-float,
.launch-atlas.motion-playing .atlas-ring {
  animation-play-state: running;
}
@keyframes atlas-atmosphere {
  0%,
  100% {
    transform: translate3d(-3%, 2%, 0) scale(0.96);
    opacity: 0.72;
  }
  50% {
    transform: translate3d(3%, -2%, 0) scale(1.04);
    opacity: 1;
  }
}
@keyframes atlas-route-flow {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  72% {
    opacity: 0.85;
  }
  88%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes atlas-pin-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes atlas-launch-ring {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
html.motion-disabled .launch-atlas .atlas-halo-drift,
html.motion-disabled .launch-atlas .atlas-route-light,
html.motion-disabled .launch-atlas .atlas-pin-float,
html.motion-disabled .launch-atlas .atlas-ring {
  animation-play-state: paused !important;
}
@media (max-width: 900px) {
  .launch-atlas {
    height: 300px;
    margin-top: 28px;
  }
  .atlas-caption {
    left: 18px;
    right: 18px;
    font-size: 10px;
  }
}
@media (max-width: 680px) {
  .launch-atlas {
    height: 270px;
    margin: 30px -24px -34px;
  }
  .atlas-city-layer,
  .atlas-front-layer {
    left: -180px;
    right: -180px;
  }
  .atlas-halo {
    inset: -3% -18% 0;
  }
  .atlas-caption {
    left: 24px;
    right: 24px;
    bottom: 17px;
    gap: 8px;
    justify-content: center;
  }
  .atlas-caption-line,
  .atlas-caption-next {
    display: none;
  }
  .atlas-grain {
    background-size: 42px 42px;
  }
}
@media (max-width: 360px) {
  .launch-atlas {
    margin-left: -20px;
    margin-right: -20px;
  }
  .atlas-city-layer,
  .atlas-front-layer {
    left: -210px;
    right: -210px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .launch-atlas .atlas-halo-drift,
  .launch-atlas .atlas-route-light,
  .launch-atlas .atlas-pin-float,
  .launch-atlas .atlas-ring {
    animation: none !important;
  }
  .atlas-route-light {
    opacity: 0;
  }
  .atlas-pin-float {
    transform: none !important;
  }
  .atlas-ring-one {
    opacity: 0.25;
    transform: scale(1) !important;
  }
  .atlas-ring-two {
    opacity: 0.14;
    transform: scale(1.5) !important;
  }
  .atlas-city-layer,
  .atlas-front-layer,
  .atlas-halo {
    transform: none !important;
  }
}

/* The known Sejuk app anchors a fan of unresolved, abstract app tiles. */
.future-constellation {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  width: 100%;
  height: 310px;
  margin-top: -28px;
  pointer-events: none;
}
.constellation-wash {
  position: absolute;
  width: 420px;
  height: 280px;
  border-radius: 50%;
  z-index: -2;
}
.constellation-wash-mint {
  top: 58px;
  left: calc(50% - 345px);
  background: radial-gradient(ellipse, #39e5d429, #39e5d400 68%);
}
.constellation-wash-violet {
  top: 8px;
  left: calc(50% - 55px);
  background: radial-gradient(ellipse, #5b52ce25, #5b52ce00 68%);
}
.constellation-orbit {
  position: absolute;
  width: 610px;
  height: 196px;
  left: calc(50% - 305px);
  top: 82px;
  border: 1px solid #5b52ce1c;
  border-radius: 50%;
  z-index: -1;
}
.constellation-orbit-back {
  transform: rotate(-13deg);
}
.constellation-orbit-front {
  transform: rotate(13deg);
  border-color: #0a716615;
}
.constellation-position {
  position: absolute;
  width: 158px;
  height: 182px;
  left: calc(50% - 79px);
  top: 57px;
  transform-origin: 50% 82%;
}
.constellation-position-left {
  transform: translate(-160px, 31px) rotate(-13deg);
}
.constellation-position-right {
  transform: translate(160px, 31px) rotate(13deg);
}
.constellation-position-center {
  transform: translateY(-2px) rotate(-3deg);
  z-index: 2;
}
.constellation-tile {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #ffffffcc;
  box-shadow:
    0 18px 25px -13px #0a19312e,
    0 3px 5px #0a19310a,
    inset 0 1px 0 #ffffff;
}
.constellation-tile-mint {
  background: linear-gradient(145deg, #ffffff, #d5f4ef 55%, #b8dfdf);
}
.constellation-tile-violet {
  background: linear-gradient(145deg, #fafaff, #e5e9ff 52%, #c1c1ec);
}
.constellation-tile-sejuk {
  background: linear-gradient(145deg, #ffffff, #f2f6fb 65%, #e5e9ff);
}
.constellation-surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 15%, #ffffff8a 34%, transparent 54%);
}
.constellation-logo {
  position: absolute;
  width: 75px;
  height: 50px;
  top: 42px;
  left: 41px;
}
.constellation-wordmark {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 107px;
  color: #0a1931;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 600;
}
.constellation-wordmark span {
  color: #5b52ce;
}
.constellation-center-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #39e5d4;
  left: calc(50% - 2.5px);
  bottom: 19px;
}
.constellation-symbol {
  position: absolute;
  left: 49px;
  top: 42px;
  width: 60px;
  height: 58px;
}
.constellation-symbol-orbit span {
  position: absolute;
  width: 53px;
  height: 32px;
  left: 3px;
  top: 12px;
  border: 2px solid #0a716664;
  border-radius: 50%;
  transform: rotate(-35deg);
}
.constellation-symbol-orbit span:nth-child(2) {
  transform: rotate(35deg);
}
.constellation-symbol-orbit span:nth-child(3) {
  width: 9px;
  height: 9px;
  top: 24px;
  left: 26px;
  border: none;
  background: #0a7166;
  box-shadow: 0 2px 4px #0a193116;
}
.constellation-symbol-fold span {
  position: absolute;
  width: 29px;
  height: 35px;
  top: 10px;
  background: linear-gradient(140deg, #5b52ce, #9690e3);
  border-radius: 4px;
  transform: skewY(-27deg);
  box-shadow: 0 5px 8px #5b52ce17;
}
.constellation-symbol-fold span:nth-child(1) {
  left: 4px;
  opacity: 0.5;
}
.constellation-symbol-fold span:nth-child(2) {
  left: 18px;
  opacity: 0.7;
}
.constellation-symbol-fold span:nth-child(3) {
  left: 32px;
}
.constellation-ghost-line {
  position: absolute;
  left: 37px;
  top: 121px;
  width: 84px;
  height: 4px;
  background: #0a193119;
  border-radius: 2px;
}
.constellation-ghost-short {
  top: 134px;
  left: 51px;
  width: 56px;
  opacity: 0.55;
}
.constellation-corner {
  position: absolute;
  right: 13px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffffcf;
  box-shadow: 0 0 0 3px #ffffff33;
}
.constellation-speck {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(140deg, #f2f6fb, #39e5d4);
  box-shadow: 0 3px 7px #0a193116;
}
.constellation-speck-one {
  width: 15px;
  height: 15px;
  left: calc(50% - 277px);
  top: 99px;
}
.constellation-speck-two {
  width: 9px;
  height: 9px;
  left: calc(50% + 288px);
  top: 206px;
  background: linear-gradient(140deg, #e5e9ff, #5b52ce);
}
.constellation-speck-three {
  width: 6px;
  height: 6px;
  left: calc(50% + 214px);
  top: 47px;
  background: #5b52ce66;
}
@media (max-width: 680px) {
  .future-constellation {
    height: 255px;
    margin-top: 0;
  }
  .constellation-position {
    width: 114px;
    height: 144px;
    left: calc(50% - 57px);
    top: 42px;
  }
  .constellation-position-left {
    transform: translate(-85px, 27px) rotate(-13deg);
  }
  .constellation-position-right {
    transform: translate(85px, 27px) rotate(13deg);
  }
  .constellation-logo {
    width: 59px;
    height: 39px;
    top: 30px;
    left: 27px;
  }
  .constellation-wordmark {
    top: 83px;
    font-size: 23px;
  }
  .constellation-center-dot {
    bottom: 15px;
  }
  .constellation-symbol {
    left: 27px;
    top: 26px;
    transform: scale(0.85);
  }
  .constellation-ghost-line {
    left: 26px;
    top: 100px;
    width: 62px;
  }
  .constellation-ghost-short {
    left: 36px;
    top: 111px;
    width: 42px;
  }
  .constellation-orbit {
    width: 364px;
    height: 137px;
    left: calc(50% - 182px);
    top: 69px;
  }
  .constellation-wash {
    width: 280px;
    height: 210px;
  }
  .constellation-wash-mint {
    left: calc(50% - 235px);
    top: 34px;
  }
  .constellation-wash-violet {
    left: calc(50% - 40px);
    top: 4px;
  }
  .constellation-speck-one {
    left: calc(50% - 150px);
    top: 56px;
    width: 10px;
    height: 10px;
  }
  .constellation-speck-two {
    left: calc(50% + 143px);
    top: 191px;
  }
  .constellation-speck-three {
    left: calc(50% + 130px);
    top: 29px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .future-constellation .constellation-surface {
    opacity: 0.25;
    transform: none;
  }
}
.journey-chapter[data-current='true'] > span:first-child {
  color: var(--mint-dark);
}
.district-section:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 65px;
  background: linear-gradient(var(--surface), #f2f6fb00);
  pointer-events: none;
  z-index: 1;
}
.district-section {
  padding-top: 140px;
}
@media (max-width: 680px) {
  .district-section {
    padding-top: 110px;
  }
}

/* Floating notes frame the illustration without covering its content. */
.journey-art {
  pointer-events: none;
}
/* A complete static service strip is the default. Motion opts into the marquee. */
.service-rail {
  width: 100%;
  animation: none;
  justify-content: center;
}
.service-group {
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 34px;
  max-width: 1280px;
  margin: auto;
  padding: 0 24px;
}
.service-group + .service-group {
  display: none;
}
.service-group > span:first-child {
  width: 100%;
  justify-content: center;
}
.service-group > span:after {
  display: none;
}
.motion-running .service-rail {
  width: max-content;
  justify-content: flex-start;
  animation: service-drift 32s linear infinite;
  animation-play-state: paused;
}
.motion-running .service-band.motion-playing .service-rail {
  animation-play-state: running;
}
.motion-running .service-group {
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: none;
  margin: 0;
  padding: 0 60px 0 0;
  gap: 60px;
}
.motion-running .service-group + .service-group {
  display: flex;
}
.motion-running .service-group > span:first-child {
  width: auto;
}
.motion-running .service-group > span:after {
  display: block;
}
@media (max-width: 680px) {
  .journey-float,
  .float-book,
  .float-chat,
  .float-review {
    transition: opacity 240ms ease;
  }
  .service-group {
    gap: 16px 24px;
  }
  .motion-running .service-group {
    gap: 26px;
    padding-right: 26px;
  }
  .service-group > span {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-float {
    transition: opacity 160ms ease !important;
  }
}

/* ---------------------------------------------------------------------------------------------
   Hero reel
   A 14-second loop over the photograph that tells the service story the way an ad would: four
   cards take turns in the top corner (booked, message, photos, invoice) while a story bar counts
   them off, the photograph drifts, and cool air falls from the AC unit.
   It runs only under .motion-running and only while the hero is on screen (.motion-playing).
   With motion off the first card simply stays, and the bar and air are hidden.
   --------------------------------------------------------------------------------------------- */
.hero-image {
  position: relative;
}
.hero-reel-card {
  opacity: 0;
}
/* With motion off one card stays: "Technician assigned". */
.hero-reel-card:nth-child(2) {
  opacity: 1;
}
.hero-reel-bar,
.hero-breeze {
  display: none;
}
.reel-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--mint-dark);
  color: #ffffff;
}
.reel-badge svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}
.reel-dots,
.reel-tiles {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}
.reel-dots b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo);
  opacity: 0.35;
}
.reel-tiles b {
  position: relative;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 7px;
  background: #dfe6ed;
}
.reel-tiles b::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #bfe9df;
}
.reel-tiles b:first-child::after {
  display: none;
}

.motion-running .hero-reel-card {
  opacity: 0;
  animation: hero-reel-card 14s var(--ease) infinite;
  animation-delay: calc(var(--reel) * 3.5s);
  animation-play-state: paused;
}
@keyframes hero-reel-card {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  4%,
  22% {
    opacity: 1;
    transform: none;
  }
  25%,
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}
.motion-running .reel-badge {
  scale: 0;
  animation: hero-reel-pop 14s var(--ease) infinite paused;
  animation-delay: calc(var(--reel) * 3.5s);
}
@keyframes hero-reel-pop {
  0%,
  6% {
    scale: 0;
  }
  9% {
    scale: 1.18;
  }
  11%,
  100% {
    scale: 1;
  }
}
.motion-running .reel-dots b {
  animation: hero-reel-dot 1.1s ease-in-out infinite paused;
}
.motion-running .reel-dots b:nth-child(2) {
  animation-delay: 0.15s;
}
.motion-running .reel-dots b:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes hero-reel-dot {
  0%,
  60%,
  100% {
    translate: 0 0;
    opacity: 0.35;
  }
  30% {
    translate: 0 -4px;
    opacity: 1;
  }
}
.motion-running .reel-tiles b::after {
  clip-path: inset(0 100% 0 0);
  animation: hero-reel-wipe 14s var(--ease) infinite paused;
  animation-delay: 7s;
}
@keyframes hero-reel-wipe {
  0%,
  7% {
    clip-path: inset(0 100% 0 0);
  }
  13%,
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.motion-running .hero-reel-bar {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 40px;
  display: flex;
  gap: 5px;
  width: 36%;
}
.hero-reel-bar span {
  position: relative;
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: #0a193124;
}
.hero-reel-bar span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--indigo);
  transform: scaleX(0);
  transform-origin: left;
  animation: 14s linear infinite paused;
}
.hero-reel-bar span:nth-child(1)::after {
  animation-name: hero-reel-bar-1;
}
.hero-reel-bar span:nth-child(2)::after {
  animation-name: hero-reel-bar-2;
}
.hero-reel-bar span:nth-child(3)::after {
  animation-name: hero-reel-bar-3;
}
.hero-reel-bar span:nth-child(4)::after {
  animation-name: hero-reel-bar-4;
}
@keyframes hero-reel-bar-1 {
  0% {
    transform: scaleX(0);
  }
  25%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes hero-reel-bar-2 {
  0%,
  25% {
    transform: scaleX(0);
  }
  50%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes hero-reel-bar-3 {
  0%,
  50% {
    transform: scaleX(0);
  }
  75%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes hero-reel-bar-4 {
  0%,
  75% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* Cool air falling from the AC unit in the photograph. */
.motion-running .hero-breeze {
  position: absolute;
  z-index: 1;
  left: 41%;
  top: 13%;
  display: block;
  width: 26%;
  height: 32%;
  pointer-events: none;
}
.hero-breeze span {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 42% at 50% 30%, #ffffffbf, #d6f7f270 45%, transparent 70%);
  filter: blur(7px);
  opacity: 0;
  animation: hero-breeze 5.6s ease-in-out infinite paused;
}
.hero-breeze span + span {
  animation-delay: -2.8s;
}
@keyframes hero-breeze {
  0% {
    opacity: 0;
    transform: translateY(-14%) scale(0.8);
  }
  30% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(48%) scale(1.25);
  }
}

/* The photograph drifts slowly. `scale` and `translate` leave the scroll transform alone. */
.motion-running .hero-image img {
  animation: hero-drift 22s ease-in-out infinite alternate paused;
}
@keyframes hero-drift {
  to {
    scale: 1.06;
    translate: -1.2% 0.8%;
  }
}

/* A ping on the launch pin. */
.hero-note .location-icon {
  position: relative;
  display: flex;
}
.motion-running .hero-note .location-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1.5px solid var(--indigo);
  border-radius: 50%;
  opacity: 0;
  animation: hero-ping 2.6s ease-out infinite paused;
}
@keyframes hero-ping {
  0% {
    opacity: 0.7;
    scale: 0.6;
  }
  70%,
  100% {
    opacity: 0;
    scale: 3.4;
  }
}

.hero-shell.motion-playing .hero-reel-card,
.hero-shell.motion-playing .reel-badge,
.hero-shell.motion-playing .reel-dots b,
.hero-shell.motion-playing .reel-tiles b::after,
.hero-shell.motion-playing .hero-reel-bar span::after,
.hero-shell.motion-playing .hero-breeze span,
.hero-shell.motion-playing .hero-image img,
.hero-shell.motion-playing .hero-note .location-icon::after {
  animation-play-state: running;
}
@media (max-width: 680px) {
  .motion-running .hero-reel-bar {
    top: 16px;
    left: 26px;
  }
  .reel-tiles b {
    width: 20px;
    height: 20px;
  }
  .reel-badge {
    width: 20px;
    height: 20px;
  }
}

/* ---------------------------------------------------------------------------------------------
   Ad motion layer
   Small loops that keep every section moving. All of it sits under .motion-running, and the
   loops inside a [data-motion-graphic] section run only while that section is on screen.
   --------------------------------------------------------------------------------------------- */

/* A light sweeps across the accent word of the main headings. */
.motion-running .hero h1 em,
.motion-running .section-heading h2 em,
.motion-running .connected-heading h2 em,
.motion-running .closing h2 em {
  background: linear-gradient(100deg, var(--indigo) 0 38%, #a09cff 50%, var(--indigo) 62% 100%) 0 0 / 250%
    100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: accent-sweep 5.5s ease-in-out infinite;
}
.motion-running .closing h2 em {
  background-image: linear-gradient(100deg, var(--mint) 0 38%, #ffffff 50%, var(--mint) 62% 100%);
}
@keyframes accent-sweep {
  0%,
  45% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/* A shine crosses the two main calls to action. */
.motion-running .hero-actions .button,
.motion-running .closing .button {
  position: relative;
  overflow: hidden;
}
.motion-running .hero-actions .button::after,
.motion-running .closing .button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, #ffffff59 50%, transparent 65%);
  translate: -120% 0;
  animation: button-shine 5.5s ease-in-out infinite paused;
}
.motion-running .closing .button::after {
  background: linear-gradient(105deg, transparent 35%, #5b52ce33 50%, transparent 65%);
}
@keyframes button-shine {
  0%,
  68% {
    translate: -120% 0;
  }
  100% {
    translate: 120% 0;
  }
}

/* The Book tab pings until the preview has been used. */
.motion-running .app-simulator:not([data-touched]) .sim-tabs button[data-preview='book'] > i {
  outline: 2px solid #5b52ce00;
  animation: book-ping 2.4s ease-out infinite paused;
}
@keyframes book-ping {
  0% {
    outline-color: #5b52ce99;
    outline-offset: 0;
  }
  70%,
  100% {
    outline-color: #5b52ce00;
    outline-offset: 12px;
  }
}

/* Type band: two lines of the brand's own words sliding past each other. */
.type-band {
  display: grid;
  gap: 4px;
  padding: 58px 0 50px;
  overflow: hidden;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.045em;
  white-space: nowrap;
  user-select: none;
}
.type-track,
.type-group {
  display: flex;
  align-items: center;
  gap: 0.42em;
  width: max-content;
}
.type-group {
  padding-right: 0.42em;
}
.type-track {
  gap: 0;
}
.type-group i {
  display: flex;
  color: var(--mint-dark);
}
.type-group svg {
  width: 0.5em;
  height: 0.5em;
}
.type-row-outline {
  color: transparent;
  -webkit-text-stroke: 1.2px #5b52ce99;
}
.type-row-solid {
  color: var(--navy);
}
.type-row-solid .type-track {
  margin-left: -18%;
}
.motion-running .type-track {
  animation: type-drift 48s linear infinite paused;
}
.motion-running .type-row-solid .type-track {
  animation-duration: 58s;
  animation-direction: reverse;
}
@keyframes type-drift {
  to {
    transform: translateX(-50%);
  }
}

/* Launch area: a live dot on the label, windows that twinkle in the skyline. */
.launch-label {
  display: flex;
  align-items: center;
  gap: 9px;
}
.launch-label::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
}
.motion-running .launch-label::before {
  animation: label-pulse 2s ease-out infinite;
}
@keyframes label-pulse {
  0% {
    box-shadow: 0 0 0 0 #39e5d48c;
  }
  80%,
  100% {
    box-shadow: 0 0 0 9px #39e5d400;
  }
}
.motion-running .atlas-lights circle {
  animation: atlas-twinkle 3.4s ease-in-out infinite paused;
}
.atlas-lights circle:nth-child(3n) {
  animation-delay: -1.1s;
}
.atlas-lights circle:nth-child(3n + 1) {
  animation-delay: -2.3s;
}
.atlas-lights circle:nth-child(4n) {
  animation-duration: 4.6s;
}
@keyframes atlas-twinkle {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* Upcoming apps: the tiles hover, a sheen passes over them, the specks drift. */
.motion-running .constellation-tile {
  animation: tile-hover 6s ease-in-out infinite paused;
}
.motion-running .constellation-tile-mint {
  animation-delay: -2s;
}
.motion-running .constellation-tile-violet {
  animation-delay: -4s;
}
@keyframes tile-hover {
  50% {
    translate: 0 -11px;
  }
}
.motion-running .constellation-surface {
  opacity: 0;
  animation: tile-sheen 7s ease-in-out infinite paused;
}
.motion-running .constellation-tile-mint .constellation-surface {
  animation-delay: -2.4s;
}
.motion-running .constellation-tile-violet .constellation-surface {
  animation-delay: -4.8s;
}
@keyframes tile-sheen {
  0%,
  20% {
    transform: translateX(-70%);
    opacity: 0;
  }
  32% {
    opacity: 0.65;
  }
  50%,
  100% {
    transform: translateX(70%);
    opacity: 0;
  }
}
.motion-running .constellation-speck {
  animation: speck-drift 7s ease-in-out infinite paused;
}
.motion-running .constellation-speck-two {
  animation-delay: -3.5s;
}
.motion-running .constellation-speck-three {
  animation-delay: -1.8s;
}
@keyframes speck-drift {
  50% {
    translate: 12px -16px;
  }
}

/* Closing: the glow drifts and snowflakes rise through it. */
.motion-running .closing-atmosphere span {
  animation: closing-drift 15s ease-in-out infinite alternate paused;
}
@keyframes closing-drift {
  from {
    translate: -60px 20px;
    scale: 0.94;
  }
  to {
    translate: 50px -30px;
    scale: 1.1;
  }
}
.closing-flakes {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.closing-flakes i {
  position: absolute;
  left: var(--x);
  bottom: -30px;
  display: block;
  width: var(--s);
  height: var(--s);
  color: #ffffff;
  opacity: 0;
}
.closing-flakes svg {
  display: block;
  width: 100%;
  height: 100%;
}
.motion-running .closing-flakes i {
  animation: flake-rise var(--d) linear infinite paused;
  animation-delay: var(--delay);
}
@keyframes flake-rise {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
  12%,
  82% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translateY(-340px) rotate(170deg);
  }
}

.hero-shell.motion-playing .hero-actions .button::after,
.closing.motion-playing .button::after,
.app-simulator.motion-playing .sim-tabs button[data-preview='book'] > i,
.type-band.motion-playing .type-track,
.launch-atlas.motion-playing .atlas-lights circle,
.future-constellation.motion-playing .constellation-tile,
.future-constellation.motion-playing .constellation-surface,
.future-constellation.motion-playing .constellation-speck,
.closing.motion-playing .closing-atmosphere span,
.closing.motion-playing .closing-flakes i {
  animation-play-state: running;
}
@media (max-width: 680px) {
  .type-band {
    padding: 40px 0 34px;
  }
  .type-row-outline {
    -webkit-text-stroke-width: 0.8px;
  }
}

/* =============================================================================================
   Third motion pass: entrances, kinetic headlines, drawn icons, and more for every section.
   Loops follow the same rule as above: defined paused under .motion-running, set running by the
   list at the end while their section is on screen.
   ============================================================================================= */

/* --- Words -----------------------------------------------------------------------------------
   A heading split into words: each word sits in a clipping box and its inner span does the
   moving. The padding and matching negative margins give ascenders, descenders and the tilt room
   without changing the layout. The hero headline is split in the markup; motion.js splits the
   section headings when it reveals them. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0.06em 0.18em 0.04em;
  margin: -0.1em -0.06em -0.18em -0.04em;
}
.word > span {
  display: inline-block;
  transform-origin: 0 100%;
}

/* --- Entrances -------------------------------------------------------------------------------
   Plain CSS, so they play as the page first paints, before any script has run. */
@media (prefers-reduced-motion: no-preference) {
  .header {
    animation: enter-down 700ms var(--ease) backwards;
  }
  .hero-copy h1 .word > span {
    animation: word-rise 900ms var(--ease) backwards;
    animation-delay: calc(120ms + var(--word) * 80ms);
  }
  .hero-copy > p {
    animation: enter-up 800ms var(--ease) 520ms backwards;
  }
  .hero-copy .hero-kicker {
    animation: enter-up 800ms var(--ease) 40ms backwards;
  }
  .hero-points {
    animation: enter-up 800ms var(--ease) 600ms backwards;
  }
  .hero-actions {
    animation: enter-up 800ms var(--ease) 680ms backwards;
  }
  .hero-note {
    animation: enter-up 800ms var(--ease) 760ms backwards;
  }
  .hero-scroll-cue {
    animation: enter-up 800ms var(--ease) 840ms backwards;
  }
  .hero-visual {
    animation: hero-visual-in 1000ms var(--ease) 100ms backwards;
  }
  /* The note pops in, then floats; the float waits for the hero to be on screen. */
  .photo-note {
    animation:
      pop-in 700ms var(--ease) 900ms backwards,
      note-float 7s ease-in-out 1.7s infinite;
    animation-play-state: running, paused;
  }
  .hero-shell.motion-playing .photo-note {
    animation-play-state: running, running;
  }
}
@keyframes word-rise {
  from {
    transform: translateY(115%) rotate(5deg);
  }
}
@keyframes enter-up {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}
@keyframes enter-down {
  from {
    opacity: 0;
    translate: 0 -14px;
  }
}
@keyframes hero-visual-in {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 26px;
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    scale: 0.82;
    translate: 0 12px;
  }
}
@keyframes note-float {
  50% {
    translate: 0 -7px;
  }
}

/* --- Drawn icons -----------------------------------------------------------------------------
   Page icons have one path per stroke (see strokedIcon in main.js), each of length 1, so a stroke
   can be drawn by sliding its dash. The story icons draw as they are revealed, a chapter's icon
   each time it becomes the current chapter, the layers icon each time it comes on screen. */
@keyframes icon-draw {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
.motion-running .story-item[data-revealed] > span path,
.motion-running .journey-chapter[data-current='true'] > span:first-child path,
.motion-running .future-layers.motion-playing path {
  animation: icon-draw 850ms var(--ease) backwards;
  animation-delay: calc(180ms + var(--stroke) * 110ms);
}

/* --- Service strip: each icon does what it stands for ---------------------------------------- */
.motion-running .service-group i[data-icon='wind'] path {
  stroke-dasharray: 0.72 0.28;
  animation: wind-flow 1.7s linear infinite paused;
  animation-delay: calc(var(--stroke) * -0.45s);
}
@keyframes wind-flow {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.motion-running .service-group i[data-icon='droplet'] svg {
  transform-origin: 50% 20%;
  animation: droplet-drip 2.4s ease-in-out infinite paused;
}
@keyframes droplet-drip {
  0%,
  100% {
    transform: translateY(-1.5px) scaleY(1);
  }
  45% {
    transform: translateY(2px) scaleY(1.08);
  }
  60% {
    transform: translateY(1px) scaleY(0.94);
  }
}
.motion-running .service-group i[data-icon='gauge'] path:nth-child(2) {
  transform-box: view-box;
  transform-origin: 12px 13px;
  animation: gauge-needle 3.2s ease-in-out infinite paused;
}
@keyframes gauge-needle {
  0%,
  100% {
    transform: rotate(-72deg);
  }
  55% {
    transform: rotate(18deg);
  }
  70% {
    transform: rotate(6deg);
  }
}
.motion-running .service-group i[data-icon='wrench'] svg {
  animation: wrench-turn 2.6s ease-in-out infinite paused;
}
@keyframes wrench-turn {
  0%,
  100% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(14deg);
  }
}

/* --- Hero: the air around the photograph moves, and the cards lean with the cursor ----------- */
.motion-running .hero-cloud {
  animation: cloud-drift 17s ease-in-out infinite alternate paused;
}
.motion-running .hero-cloud-two {
  animation-duration: 21s;
  animation-delay: -8s;
}
@keyframes cloud-drift {
  from {
    translate: -40px 18px;
    scale: 0.95;
  }
  to {
    translate: 46px -30px;
    scale: 1.1;
  }
}
.motion-running .photo-aura {
  animation: aura-wobble 9s ease-in-out infinite alternate paused;
}
@keyframes aura-wobble {
  from {
    rotate: -2.5deg;
    scale: 0.985;
  }
  to {
    rotate: 3deg;
    scale: 1.03;
  }
}
.motion-running .photo-note svg,
.motion-running .type-group svg {
  animation: spin-slow 18s linear infinite paused;
}
@keyframes spin-slow {
  to {
    rotate: 360deg;
  }
}
/* --px and --py are the cursor lean from motion.js, -1 to 1. */
.hero-reel-card {
  translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 9px);
}

/* --- App story: a line fills between the three icons and lights each one it reaches ---------- */
.app-story {
  position: relative;
  isolation: isolate;
}
.motion-running .app-story::before,
.motion-running .app-story::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: var(--story-line-x, 22px);
  top: var(--story-line-top, 22px);
  width: 2px;
  height: var(--story-line-height, 0px);
  margin-left: -1px;
  border-radius: 2px;
  background: var(--line);
}
.motion-running .app-story::after {
  background: linear-gradient(var(--indigo), var(--mint-dark));
  transform: scaleY(var(--story-progress, 0));
  transform-origin: 50% 0;
}
.story-item > span {
  transition:
    background 320ms ease,
    color 320ms ease,
    transform 240ms var(--ease);
}
.motion-running .story-item[data-reached='true'] > span {
  background: var(--indigo);
  color: #ffffff;
}

/* --- App preview: the glow breathes and the "live" dot pulses -------------------------------- */
.motion-running .app-simulator::before {
  animation: aura-breathe 7s ease-in-out infinite paused;
}
@keyframes aura-breathe {
  50% {
    scale: 1.07;
    opacity: 0.8;
  }
}
.motion-running .sim-connected-dot {
  animation: live-dot 2.2s ease-out infinite paused;
}
@keyframes live-dot {
  0% {
    box-shadow: 0 0 0 0 #0a716680;
  }
  80%,
  100% {
    box-shadow: 0 0 0 7px #0a716600;
  }
}

/* --- Journey: a rail beside the pinned chapters fills as the phones turn --------------------- */
@media (min-width: 681px) {
  [data-journey-mode='scroll'] .journey-chapters {
    --rail-x: -24px;
    /* Centre of the first and last chapter, measured from the ends of the column. */
    --rail-inset: calc(max(0px, (var(--journey-stage-height, 0px) - 65vh) / 2) + 32.5vh);
    position: relative;
  }
  [data-journey-mode='scroll'] .journey-chapters::before,
  [data-journey-mode='scroll'] .journey-chapters::after {
    content: '';
    position: absolute;
    right: var(--rail-x);
    top: var(--rail-inset);
    bottom: var(--rail-inset);
    width: 2px;
    border-radius: 2px;
    background: #0a19311a;
  }
  [data-journey-mode='scroll'] .journey-chapters::after {
    background: linear-gradient(var(--indigo), var(--mint-dark));
    transform: scaleY(var(--journey-progress, 0));
    transform-origin: 50% 0;
  }
  [data-journey-mode='scroll'] .journey-chapter::after {
    content: '';
    position: absolute;
    z-index: 1;
    right: calc(var(--rail-x) - 5px);
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid #b9c5d5;
    border-radius: 50%;
    background: var(--surface);
    transition:
      background 240ms ease,
      border-color 240ms ease,
      box-shadow 240ms ease,
      scale 240ms var(--ease);
  }
  [data-journey-mode='scroll'] .journey-chapter[data-passed='true']::after {
    border-color: var(--indigo);
    background: var(--indigo);
  }
  [data-journey-mode='scroll'] .journey-chapter[data-current='true']::after {
    box-shadow: 0 0 0 6px #5b52ce21;
    scale: 1.15;
  }
}
@media (min-width: 681px) and (max-width: 1100px) {
  [data-journey-mode='scroll'] .journey-chapters {
    --rail-x: -18px;
  }
}
@media (min-width: 681px) and (max-width: 900px) {
  [data-journey-mode='scroll'] .journey-chapters {
    --rail-x: -13px;
  }
}

/* --- Districts: stars, passing clouds, a sheen on the name, a glow under the cursor ---------- */
.atlas-stars circle {
  opacity: 0.45;
}
.motion-running .atlas-stars circle {
  animation: atlas-twinkle 4.4s ease-in-out infinite paused;
}
.atlas-stars circle:nth-child(3n) {
  animation-delay: -1.3s;
}
.atlas-stars circle:nth-child(3n + 1) {
  animation-delay: -2.9s;
}
.atlas-stars circle:nth-child(5n) {
  animation-duration: 6s;
}
.launch-atlas {
  container-type: inline-size;
}
.atlas-clouds {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.atlas-clouds span {
  position: absolute;
  left: 0;
  top: 15%;
  width: 300px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #b3cfe52b, transparent 68%);
  translate: -110% 0;
}
.atlas-clouds span + span {
  top: 33%;
  width: 420px;
  height: 70px;
}
.motion-running .atlas-clouds span {
  animation: cloud-pass 46s linear infinite paused;
}
.motion-running .atlas-clouds span + span {
  animation-duration: 64s;
  animation-delay: -30s;
}
@keyframes cloud-pass {
  from {
    translate: -110% 0;
  }
  to {
    translate: 100cqi 0;
  }
}
.motion-running .district-display h3 {
  background: linear-gradient(100deg, var(--surface) 0 38%, #8df5e8 50%, var(--surface) 62% 100%) 0 0 / 250%
    100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: accent-sweep 6.5s ease-in-out infinite;
}
.district-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    440px circle at var(--spot-x, 70%) var(--spot-y, 30%),
    #6f66e640,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.motion-running .district-section.spot-on::after {
  opacity: 1;
}

/* --- Upcoming apps: two dots travel the orbit rings ------------------------------------------
   The wrapper squashes a circle into the ring's ellipse, the span turns, and the dot undoes both
   so it stays round. --orbit-k is the ring's height over its width. */
.future-constellation {
  --orbit-r: 305px;
  --orbit-k: 0.3213;
  --orbit-k-inverse: 3.1123;
  --orbit-top: 180px;
}
.constellation-orbiter {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: var(--orbit-top);
  width: 0;
  height: 0;
  transform: rotate(13deg) scaleY(var(--orbit-k));
}
.constellation-orbiter-two {
  transform: rotate(-13deg) scaleY(var(--orbit-k));
}
.constellation-orbiter > span {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.constellation-orbiter i {
  position: absolute;
  left: var(--orbit-r);
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f2f6fb, #39e5d4);
  box-shadow: 0 2px 6px #0a193126;
  transform: scaleY(var(--orbit-k-inverse));
}
.constellation-orbiter-two i {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: linear-gradient(140deg, #e5e9ff, #5b52ce);
}
.motion-running .constellation-orbiter > span {
  animation: orbit-turn 16s linear infinite paused;
}
.motion-running .constellation-orbiter i {
  animation: orbit-upright 16s linear infinite paused;
}
.motion-running .constellation-orbiter-two > span,
.motion-running .constellation-orbiter-two i {
  animation-duration: 23s;
  animation-delay: -9s;
  animation-direction: reverse;
}
@keyframes orbit-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orbit-upright {
  from {
    transform: rotate(0deg) scaleY(var(--orbit-k-inverse));
  }
  to {
    transform: rotate(-360deg) scaleY(var(--orbit-k-inverse));
  }
}
@media (max-width: 680px) {
  .future-constellation {
    --orbit-r: 182px;
    --orbit-k: 0.3764;
    --orbit-k-inverse: 2.6568;
    --orbit-top: 137.5px;
  }
}

/* --- News and FAQ rows open smoothly where the browser can animate to an automatic height ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) and (interpolate-size: allow-keywords) {
    html:not(.motion-disabled) :is(.news-item, .faq-list details) {
      interpolate-size: allow-keywords;
    }
    html:not(.motion-disabled) :is(.news-item, .faq-list details)::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size 340ms var(--ease),
        content-visibility 340ms allow-discrete;
    }
    html:not(.motion-disabled) :is(.news-item, .faq-list details)[open]::details-content {
      block-size: auto;
    }
  }
}

/* --- Navigation: an underline grows from the left on hover ----------------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .header nav a {
    position: relative;
  }
  .header nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: var(--indigo);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 280ms var(--ease);
  }
  .header nav a:hover::after,
  .header nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}

.hero-shell.motion-playing .hero-cloud,
.hero-shell.motion-playing .photo-aura,
.hero-shell.motion-playing .photo-note svg,
.type-band.motion-playing .type-group svg,
.service-band.motion-playing .service-group i path,
.service-band.motion-playing .service-group i svg,
.app-simulator.motion-playing::before,
.app-simulator.motion-playing .sim-connected-dot,
.launch-atlas.motion-playing .atlas-stars circle,
.launch-atlas.motion-playing .atlas-clouds span,
.future-constellation.motion-playing .constellation-orbiter > span,
.future-constellation.motion-playing .constellation-orbiter i {
  animation-play-state: running;
}

/* =============================================================================================
   Know the cost, and the district stops
   ============================================================================================= */

/* --- Hero kicker: a live dot ------------------------------------------------------------------ */
.motion-running .hero-kicker > span {
  animation: live-dot 2.2s ease-out infinite paused;
}

/* --- Price: the base price fills, then the "paid at booking" line arrives --------------------- */
.motion-running .price-base {
  animation: price-fill 6.5s var(--ease) infinite paused;
}
.motion-running .price-knob {
  animation: price-knob 6.5s var(--ease) infinite paused;
}
.motion-running .price-pay {
  animation: price-pay 6.5s var(--ease) infinite paused;
}
@keyframes price-fill {
  0%,
  6% {
    transform: scaleX(0);
  }
  24%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes price-knob {
  0%,
  6% {
    left: 0;
    box-shadow: 0 2px 6px #0a193133;
  }
  24% {
    left: 38%;
    box-shadow:
      0 2px 6px #0a193133,
      0 0 0 0 #5b52ce66;
  }
  44%,
  100% {
    left: 38%;
    box-shadow:
      0 2px 6px #0a193133,
      0 0 0 12px #5b52ce00;
  }
}
@keyframes price-pay {
  0%,
  26% {
    opacity: 0;
    translate: 0 6px;
  }
  36%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

/* --- Care guide: the four things it tells you arrive in order, the scam alert last ------------ */
.motion-running .guide-rows li {
  animation: guide-row 7s var(--ease) infinite paused;
  animation-delay: calc(var(--row) * 0.5s);
}
@keyframes guide-row {
  0% {
    opacity: 0;
    translate: 0 8px;
  }
  7%,
  78% {
    opacity: 1;
    translate: 0 0;
  }
  86%,
  100% {
    opacity: 0;
    translate: 0 0;
  }
}
.motion-running .guide-rows .guide-scam {
  animation-name: guide-row, guide-alert;
  animation-duration: 7s, 7s;
  animation-timing-function: var(--ease), ease-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes guide-alert {
  0%,
  8% {
    box-shadow: 0 0 0 0 #f5cd8399;
  }
  26%,
  100% {
    box-shadow: 0 0 0 9px #f5cd8300;
  }
}

/* --- Proof: the "after" tile wipes in, the invoice rises, its tick pops ------------------------ */
.motion-running .proof-after i {
  animation: proof-wipe 7s var(--ease) infinite paused;
}
.motion-running .proof-invoice {
  animation: proof-invoice 7s var(--ease) infinite paused;
}
.motion-running .proof-invoice > b {
  animation: proof-tick 7s var(--ease) infinite paused;
}
@keyframes proof-wipe {
  0%,
  8% {
    clip-path: inset(0 100% 0 0 round 14px);
  }
  24%,
  100% {
    clip-path: inset(0 0 0 0 round 14px);
  }
}
@keyframes proof-invoice {
  0%,
  26% {
    opacity: 0;
    translate: 0 14px;
  }
  38%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes proof-tick {
  0%,
  40% {
    scale: 0;
  }
  46% {
    scale: 1.2;
  }
  50%,
  100% {
    scale: 1;
  }
}

/* --- District stops under the skyline: lit one after another, a light running between them ----
   --stops is the number of stops, --i a stop's (or a line's) place in the row. */
.atlas-stop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.atlas-stop i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #46698e;
}
.atlas-stop:first-child i {
  background: #39e5d4;
  box-shadow: 0 0 12px #39e5d480;
}
.atlas-stop-more {
  opacity: 0.75;
}
.atlas-caption .atlas-caption-line {
  position: relative;
  margin: 0 4px;
  overflow: hidden;
}
.atlas-caption-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #39e5d400, #39e5d4, #39e5d400);
  translate: -100% 0;
}
.motion-running .atlas-stop i {
  animation: stop-lit calc(var(--stops, 4) * 1.6s) linear infinite paused;
  animation-delay: calc(var(--i) * 1.6s);
}
.motion-running .atlas-caption-line::after {
  animation: stop-travel calc(var(--stops, 4) * 1.6s) linear infinite paused;
  animation-delay: calc(var(--i) * 1.6s + 0.9s);
}
@keyframes stop-lit {
  0%,
  22% {
    background: #39e5d4;
    box-shadow:
      0 0 0 4px #39e5d433,
      0 0 14px #39e5d4b3;
    scale: 1.3;
  }
  30%,
  100% {
    background: #46698e;
    box-shadow: none;
    scale: 1;
  }
}
@keyframes stop-travel {
  0% {
    translate: -100% 0;
  }
  18%,
  100% {
    translate: 100% 0;
  }
}
@media (max-width: 680px) {
  .atlas-caption {
    gap: 14px;
  }
}

.hero-shell.motion-playing .hero-kicker > span,
.fair-section.motion-playing .price-base,
.fair-section.motion-playing .price-knob,
.fair-section.motion-playing .price-pay,
.fair-section.motion-playing .guide-rows li,
.fair-section.motion-playing .proof-after i,
.fair-section.motion-playing .proof-invoice,
.fair-section.motion-playing .proof-invoice > b,
.launch-atlas.motion-playing .atlas-stop i,
.launch-atlas.motion-playing .atlas-caption-line::after {
  animation-play-state: running;
}