/* ==========================================================================
   Home page
   Scroll scenes (hero, scan, adventure, closing CTA) lay out as ordinary
   sections by default and become pinned, scrubbed scenes under .has-scroll-fx.
   Each section names its view timeline; each .scrub element inside plays its
   keyframes across the --scrub-start → --scrub-end window of that timeline.
   ========================================================================== */

@keyframes kv-hero-settle {
  from {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes kv-hero-rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

@keyframes kv-hero-drift {
  to {
    scale: 1.14;
    translate: 0 -4%;
  }
}

@keyframes kv-veil-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.8;
  }
}

/* The scan reveal slides a clipping window in from the left while the image
   inside slides the opposite way, so the photo stays still: transform only. */
@keyframes kv-scan-window {
  from {
    translate: -100% 0;
  }

  to {
    translate: 0 0;
  }
}

@keyframes kv-scan-counter {
  from {
    translate: 100% 0;
  }

  to {
    translate: 0 0;
  }
}

/* Each panel rests for 13% of the scene while its text is read; the track
   then glides to the next panel over 16%. The sine-shaped curve keeps the
   peak speed per scrolled pixel low (about 1.6x the average), because this
   motion follows the scrollbar rather than a clock. */
@keyframes kv-track {
  0%,
  13% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }

  29%,
  42% {
    translate: -25% 0;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }

  58%,
  71% {
    translate: -50% 0;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }

  87%,
  100% {
    translate: -75% 0;
  }
}

@keyframes kv-cta-settle {
  from {
    scale: 1.16;
  }

  to {
    scale: 1;
  }
}

@keyframes kv-cta-veil {
  from {
    opacity: 0.92;
  }

  to {
    opacity: 0.5;
  }
}

@keyframes kv-pulse {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.9);
  }
}

@keyframes kv-flow {
  to {
    background-position: 0 48px;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  --scene-timeline: --scene-hero;

  position: relative;
  background-color: var(--color-bg);
  view-timeline-name: --scene-hero;
  view-timeline-inset: 0;
}

.hero__sentinel,
.hero__intro-sentinel {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hero__sentinel {
  top: 45svh;
}

/* Marks the point where the intro has fully faded (22% of the pinned range). */
.hero__intro-sentinel {
  top: 31svh;
}

.hero__frame {
  position: relative;
}

.hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  overflow: hidden;
}

.hero__media,
.hero__shade,
.hero__veil {
  position: absolute;
  inset: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 62%;
}

.hero__shade--vertical {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 80%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 20%, transparent) 34%,
    color-mix(in srgb, var(--color-bg) 62%, transparent) 74%,
    var(--color-bg) 100%
  );
}

.hero__shade--horizontal {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-bg) 70%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 6%, transparent) 55%,
    color-mix(in srgb, var(--color-bg) 35%, transparent) 100%
  );
}

.hero__veil {
  background-color: var(--color-bg);
  opacity: 0;
  pointer-events: none;
}

.hero__intro {
  position: relative;
  padding-top: calc(var(--header-height) + 24px);
}

.hero__content {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(24px, 3.5vw, 48px);
}

.hero__kicker {
  margin-bottom: clamp(14px, 2vw, 22px);
}

.hero__title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}

.hero__title-line--last {
  padding-bottom: 0.06em;
}

.hero__title-text {
  display: block;
}

.hero__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(18px, 3vw, 36px);
}

/* The negative margins tuck each item's trailing rules under the clipped edge,
   leaving only the dividers between items in both the 2- and 4-column layouts. */
.hero__features-wrap {
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  background-color: color-mix(in srgb, var(--color-bg) 68%, transparent);
}

.hero__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 -1px -1px 0;
}

@media (min-width: 900px) {
  .hero__features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Landscape phones: the kicker and feature strip would push the headline under the header. */
@media (max-height: 520px) {
  .hero__kicker,
  .hero__features-wrap {
    display: none;
  }
}

.hero__feature {
  padding: 16px clamp(18px, 2.4vw, 28px);
  border-right: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
}

.hero__feature-index {
  display: block;
  margin-bottom: 6px;
  font: 300 var(--text-label) var(--font-mono);
  letter-spacing: 0.22em;
  color: var(--color-secondary);
}

.hero__feature-text {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.hero__statement {
  position: relative;
  padding: var(--section-pad-lg) var(--gutter);
  background-color: var(--color-bg);
}

.hero__statement-kicker {
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

.hero__statement-title {
  font-size: clamp(2.875rem, 9.6vw, 10.5rem);
  font-weight: 900;
  font-stretch: 116%;
  letter-spacing: var(--tracking-display);
  line-height: 0.86;
}

.hero__word {
  display: block;
}

.hero__statement-copy {
  max-width: 40ch;
  margin-top: clamp(18px, 2.4vw, 30px);
  font-size: clamp(0.9375rem, 1.4vw, 1.3125rem);
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__image {
    animation: kv-hero-settle 1.8s var(--ease-out) both;
  }

  .hero__kicker {
    animation: kv-hero-rise 0.9s var(--ease-out) 0.5s both;
  }

  .hero__title-text {
    animation: kv-lift 1s var(--ease-out) 0.6s both;
  }

  .hero__title-line--last .hero__title-text {
    animation-delay: 0.78s;
  }

  .hero__lead {
    animation: kv-hero-rise 1s var(--ease-out) 1.1s both;
  }

  .hero__actions {
    animation: kv-hero-rise 1s var(--ease-out) 1.35s both;
  }

  .hero__features-wrap {
    animation: kv-fade 1s ease 1.7s both;
  }
}

.has-scroll-fx .hero {
  height: 240svh;
}

.has-scroll-fx .hero__frame {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}

.has-scroll-fx .hero__stage {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.has-scroll-fx .hero__statement {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 0;
  background: none;
  pointer-events: none;
}

/* Once faded out, the intro's buttons must not catch clicks meant for the statement. */
.has-scroll-fx .hero.is-past-intro .hero__intro {
  pointer-events: none;
}

.has-scroll-fx .hero__media {
  animation-name: kv-hero-drift;
}

.has-scroll-fx .hero__veil {
  animation-name: kv-veil-in;
}

.hero__veil { --scrub-start: 0.08; --scrub-end: 0.42; }
.hero__intro { --scrub-start: 0; --scrub-end: 0.22; }
.hero__statement-kicker { --scrub-start: 0.26; --scrub-end: 0.36; }
.hero__word--1 { --scrub-start: 0.3; --scrub-end: 0.42; }
.hero__word--2 { --scrub-start: 0.44; --scrub-end: 0.56; }
.hero__word--3 { --scrub-start: 0.58; --scrub-end: 0.7; }
.hero__statement-copy { --scrub-start: 0.72; --scrub-end: 0.84; }

/* --------------------------------------------------------------------------
   Difference
   -------------------------------------------------------------------------- */

.difference {
  padding-bottom: var(--section-pad-lg);
}

.difference__statement {
  margin: clamp(24px, 3vw, 40px) 0 18px;
}

/* --------------------------------------------------------------------------
   Laminate scan scene
   -------------------------------------------------------------------------- */

.scan-scene {
  --scene-timeline: --scene-scan;

  position: relative;
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border-subtle);
  view-timeline-name: --scene-scan;
  view-timeline-inset: 0;
}

.scan-scene__frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  padding: var(--section-pad) var(--gutter);
}

.scan-scene__head,
.scan-scene__viewer,
.scan-scene__layers {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.scan-scene__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.scan-scene__head .eyebrow {
  margin-bottom: 12px;
}

.scan-scene__title {
  font-size: clamp(1.875rem, 5vw, 4.75rem);
  line-height: 0.9;
}

.scan-scene__hint {
  display: none;
  color: var(--color-text-subtle);
}

.scan-scene__viewer {
  position: relative;
  aspect-ratio: 1880 / 1000;
  overflow: hidden;
  background-color: var(--color-bg-deep);
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-text) 4%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-text) 4%, transparent) 0 1px, transparent 1px 64px);
  border: 1px solid var(--color-border);
}

.scan-scene__raw,
.scan-scene__weave,
.scan-scene__window,
.scan-scene__finished {
  position: absolute;
  inset: 0;
}

.scan-scene__raw,
.scan-scene__finished {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scan-scene__raw {
  filter: grayscale(1) brightness(0.45) contrast(1.25);
}

.scan-scene__weave {
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent) 10%, transparent) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-accent) 7%, transparent) 0 6px, transparent 6px 12px);
  mix-blend-mode: screen;
}

.scan-scene__window {
  overflow: hidden;
}

/* The scanning beam is a light source, so it keeps its glow. */
.scan-scene__beam {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  width: 2px;
  background-color: var(--color-accent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--color-accent) 90%, transparent);
}

.scan-scene__label {
  position: absolute;
  top: 12px;
  left: 14px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

.scan-scene__layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border-top: 1px solid var(--color-border);
}

.scan-scene__layer {
  padding: 16px clamp(12px, 1.4vw, 20px) 0;
}

.scan-scene__layer + .scan-scene__layer {
  border-left: 1px solid var(--color-border-subtle);
}

.scan-scene__layer .label {
  margin-bottom: 8px;
}

.scan-scene__layer-title {
  margin-bottom: 6px;
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  font-weight: 800;
  letter-spacing: var(--tracking-title);
}

.scan-scene__layer-text {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (max-width: 599px) {
  .scan-scene__layers {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .scan-scene__layer {
    padding-bottom: 14px;
  }

  .scan-scene__layer + .scan-scene__layer {
    border-top: 1px solid var(--color-border-subtle);
    border-left: 0;
  }
}

.has-scroll-fx .scan-scene {
  height: 320svh;
}

.has-scroll-fx .scan-scene__frame {
  position: sticky;
  top: 0;
  height: 100svh;
  gap: clamp(12px, 2vh, 28px);
  padding: clamp(64px, 9vh, 100px) var(--gutter) clamp(16px, 3vh, 40px);
}

.has-scroll-fx .scan-scene__viewer {
  max-height: 44svh;
}

.has-scroll-fx .scan-scene__hint,
.has-scroll-fx .scan-scene__beam {
  display: block;
}

/* On phones the pinned frame keeps the three layers side by side so the whole
   scene fits one screen. */
@media (max-width: 599px) {
  .has-scroll-fx .scan-scene__layers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  .has-scroll-fx .scan-scene__layer {
    padding-bottom: 0;
  }

  .has-scroll-fx .scan-scene__layer + .scan-scene__layer {
    border-top: 0;
    border-left: 1px solid var(--color-border-subtle);
  }
}

.has-scroll-fx .scan-scene__window {
  animation-name: kv-scan-window;
}

.has-scroll-fx .scan-scene__finished {
  animation-name: kv-scan-counter;
}

.scan-scene__head { --scrub-start: 0; --scrub-end: 0.1; }
.scan-scene__window,
.scan-scene__finished { --scrub-start: 0.14; --scrub-end: 0.86; }
.scan-scene__layer--1 { --scrub-start: 0.22; --scrub-end: 0.32; }
.scan-scene__layer--2 { --scrub-start: 0.46; --scrub-end: 0.56; }
.scan-scene__layer--3 { --scrub-start: 0.7; --scrub-end: 0.8; }

/* --------------------------------------------------------------------------
   Materials switcher
   -------------------------------------------------------------------------- */

.materials__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.materials__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--color-bg) 80%, transparent));
  pointer-events: none;
}

.materials__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-surface);
  opacity: 0;
  scale: 1.04;
}

.materials__layer.is-active {
  opacity: 1;
  scale: 1;
}

/* The opacity crossfade helps follow the change, so it stays under reduced
   motion; only the scale is dropped. */
.materials__layer {
  transition: opacity var(--duration-base) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .materials__layer {
    transition:
      opacity var(--duration-base) var(--ease-out),
      scale 0.4s var(--ease-out);
  }
}

.materials__caption {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 12px;
}

.materials__tag {
  margin-bottom: 8px;
}

.materials__name {
  font-size: clamp(1.375rem, 2.6vw, 2.25rem);
  font-weight: 900;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  line-height: 1;
}

.materials__note {
  margin-left: auto;
  color: var(--color-text-subtle);
  text-align: right;
}

.materials__list {
  display: flex;
  flex-direction: column;
}

.materials__item {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 30px);
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  border-left: 2px solid transparent;
  background-color: transparent;
  color: var(--color-text);
  text-align: left;
  transition:
    background-color var(--duration-hover) var(--ease-out),
    border-color var(--duration-hover) var(--ease-out),
    color var(--duration-hover) var(--ease-out);
}

.materials__item:last-child {
  border-bottom: 0;
}

.materials__item:focus-visible {
  outline-offset: -3px;
}

@media (hover: hover) {
  .materials__item:hover .materials__item-title {
    color: var(--color-accent);
  }
}

.materials__item[aria-pressed="true"] {
  border-left-color: var(--color-accent);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent);
  color: var(--color-accent);
}

.materials__item-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.materials__index {
  min-width: 26px;
  font: 400 var(--text-label) var(--font-mono);
  letter-spacing: 0.16em;
}

.materials__item-title {
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.03em;
  transition: color var(--duration-hover) var(--ease-out);
}

.materials__item-body {
  max-width: 60ch;
  display: block;
  margin-top: 10px;
  padding-left: 42px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Adventure — horizontal track
   -------------------------------------------------------------------------- */

.adventure {
  --scene-timeline: --scene-adventure;

  position: relative;
  background-color: var(--color-bg);
  view-timeline-name: --scene-adventure;
  view-timeline-inset: 0;
}

.adventure__frame {
  position: relative;
}

.adventure__panel {
  position: relative;
  min-height: 85svh;
  overflow: hidden;
}

.adventure__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 50%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 6%, transparent) 30%,
    color-mix(in srgb, var(--color-bg) 60%, transparent) 68%,
    color-mix(in srgb, var(--color-bg) 95%, transparent) 100%
  );
  pointer-events: none;
}

.adventure__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.adventure__study {
  position: absolute;
  top: clamp(80px, 14vh, 120px);
  left: var(--gutter);
  z-index: 1;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  background-color: color-mix(in srgb, var(--color-bg) 45%, transparent);
  line-height: 1.7;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.adventure__body {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(28px, 5vh, 56px);
  left: var(--gutter);
  z-index: 1;
}

/* On narrow screens the study label and the section heading would share the
   same top band; drop the label below the heading's plate. */
@media (max-width: 599px) {
  .adventure__study {
    top: calc(clamp(76px, 12vh, 110px) + 44px);
  }

  /* A resting headline spans the full phone width; keep it above the
     floating enquiry button (14px offset + 44px button + breathing room). */
  .adventure__body {
    bottom: 80px;
  }
}

.adventure__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 10px;
  background-color: var(--color-overlay-strong);
  font: 400 var(--text-label)/1.4 var(--font-mono);
  letter-spacing: 0.2em;
}

.adventure__headline {
  font-size: clamp(2.875rem, 9vw, 9.375rem);
  font-weight: 900;
  font-stretch: 116%;
  letter-spacing: var(--tracking-display);
  line-height: 0.86;
}

.adventure__headline--closing {
  font-size: clamp(2.5rem, 7vw, 7.5rem);
}

.adventure__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

/* The section heading floats over bright photography (desert, coast), so it
   gets the same dark plate as the panel tags. */
.adventure__eyebrow {
  position: absolute;
  top: clamp(76px, 12vh, 110px);
  right: var(--gutter);
  z-index: 1;
  margin: 0;
  padding: 7px 10px;
  background-color: var(--color-overlay-strong);
}

.has-scroll-fx .adventure {
  height: 450svh;
}

.has-scroll-fx .adventure__frame {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}

.has-scroll-fx .adventure__track {
  display: flex;
  width: 400%;
  height: 100%;
  animation-name: kv-track;
}

.has-scroll-fx .adventure__panel {
  flex: 0 0 25%;
  height: 100%;
  min-height: 0;
}

/* Text timing follows the track's rests (see kv-track): each panel's text
   rises once the panel has landed and fades out as the next move begins,
   before the panel has shifted by more than the page gutter. */
.adventure__tag--1 { --scrub-start: 0; --scrub-end: 0.025; }
.adventure__headline--1 { --scrub-start: 0.005; --scrub-end: 0.03; }
.adventure__body--1 { --scrub-start: 0.11; --scrub-end: 0.14; }

.adventure__tag--2 { --scrub-start: 0.29; --scrub-end: 0.315; }
.adventure__headline--2 { --scrub-start: 0.295; --scrub-end: 0.32; }
.adventure__body--2 { --scrub-start: 0.4; --scrub-end: 0.43; }

.adventure__tag--3 { --scrub-start: 0.58; --scrub-end: 0.605; }
.adventure__headline--3 { --scrub-start: 0.585; --scrub-end: 0.61; }
.adventure__body--3 { --scrub-start: 0.69; --scrub-end: 0.72; }

.adventure__tag--4 { --scrub-start: 0.87; --scrub-end: 0.895; }
.adventure__closing { --scrub-start: 0.875; --scrub-end: 0.9; }

/* --------------------------------------------------------------------------
   Caravan explorer (home variant)
   -------------------------------------------------------------------------- */

.explorer__details {
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Off-grid
   -------------------------------------------------------------------------- */

.offgrid {
  overflow: clip;
  background-color: var(--color-bg-deep);
}

.offgrid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    color-mix(in srgb, var(--color-bg) 35%, transparent) 30%,
    color-mix(in srgb, var(--color-bg) 55%, transparent) 70%,
    var(--color-bg) 100%
  );
  pointer-events: none;
}

.offgrid__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  opacity: 0.5;
}

.offgrid__content {
  position: relative;
  z-index: 1;
  gap: clamp(30px, 5vw, 80px);
}

.offgrid__title {
  margin-bottom: 22px;
}

.offgrid .body-text {
  max-width: 48ch;
}

.power-chain {
  border-left: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
}

.power-node {
  --dot-color: var(--color-text);
  --link-color: color-mix(in srgb, var(--color-text) 70%, transparent);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}

/* Dashed connector drawn up to the previous node, animated as flowing current. */
.power-node + .power-node {
  margin-top: 40px;
}

.power-node + .power-node::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: -1px;
  width: 1px;
  height: 40px;
  background-image: repeating-linear-gradient(180deg, var(--link-color) 0 8px, transparent 8px 16px);
  background-size: 1px 48px;
}

.power-node__name {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.power-node__dot {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: -27px;
  border-radius: 50%;
  background-color: var(--dot-color);
}

.power-node__value {
  font: 300 var(--text-meta)/1.4 var(--font-mono);
  color: var(--color-text-subtle);
  text-align: right;
}

.power-node--solar {
  --dot-color: var(--color-accent);
}

.power-node--battery {
  --dot-color: var(--color-secondary);
  --link-color: var(--color-accent);
}

.power-node--power {
  --link-color: var(--color-secondary);
}

.power-chain__note {
  margin: 18px 0 0 22px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
}

@media (prefers-reduced-motion: no-preference) {
  .power-node + .power-node::before {
    animation: kv-flow 1.4s linear infinite;
  }

  .power-node--solar .power-node__dot::after,
  .power-node--battery .power-node__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: inherit;
    animation: kv-pulse 2.4s ease-in-out infinite;
  }

  .power-node--battery .power-node__dot::after {
    animation-delay: 0.5s;
  }
}

/* Continuous loops only run while their section is on screen. */
.has-in-view-playback [data-play-in-view]:not(.is-playing) .power-node::before,
.has-in-view-playback [data-play-in-view]:not(.is-playing) .power-node__dot::after {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Why Kevla — comparison
   -------------------------------------------------------------------------- */

.compare {
  padding: clamp(26px, 3vw, 42px);
}

.compare--kevla {
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--color-accent) 9%, transparent),
    color-mix(in srgb, var(--color-secondary) 5%, transparent) 60%,
    transparent
  );
  border-left: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.compare__heading {
  margin-bottom: 22px;
}

.compare__list > li {
  border-bottom-color: color-mix(in srgb, var(--color-text) 12%, transparent);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.cta-scene {
  --scene-timeline: --scene-cta;

  position: relative;
  background-color: var(--color-bg);
  view-timeline-name: --scene-cta;
  view-timeline-inset: 0;
}

.cta-scene__frame {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 90svh;
  overflow: hidden;
}

.cta-scene__image,
.cta-scene__shade,
.cta-scene__veil {
  position: absolute;
  inset: 0;
}

.cta-scene__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 55%;
  filter: saturate(0.85);
}

.cta-scene__shade {
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    color-mix(in srgb, var(--color-bg) 40%, transparent) 35%,
    color-mix(in srgb, var(--color-bg) 60%, transparent) 75%,
    var(--color-bg) 100%
  );
}

.cta-scene__veil {
  background-color: var(--color-bg);
  opacity: 0.5;
}

.cta-scene__content {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-pad) var(--gutter);
}

.cta-scene__title {
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: clamp(2.625rem, 9.6vw, 10rem);
  font-weight: 900;
  font-stretch: 118%;
  letter-spacing: var(--tracking-display);
  line-height: 0.84;
}

.cta-scene__line {
  display: block;
}

.has-scroll-fx .cta-scene {
  height: 170svh;
}

.has-scroll-fx .cta-scene__frame {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

.has-scroll-fx .cta-scene__content {
  padding-block: 0;
}

.has-scroll-fx .cta-scene__image {
  animation-name: kv-cta-settle;
}

.has-scroll-fx .cta-scene__veil {
  animation-name: kv-cta-veil;
}

.cta-scene__image { --scrub-start: 0; --scrub-end: 0.7; }
.cta-scene__veil { --scrub-start: 0; --scrub-end: 0.55; }
.cta-scene__line--1 { --scrub-start: 0.05; --scrub-end: 0.3; }
.cta-scene__line--2 { --scrub-start: 0.18; --scrub-end: 0.43; }
.cta-scene__actions { --scrub-start: 0.36; --scrub-end: 0.58; }