.car-hero {
  scroll-snap-align: start;
}

.car-section {
  padding: var(--section-standard) var(--page-gutter);
}

.car-page h1 {
  font-size: var(--heading-md);
  max-inline-size: 18ch;
}

.car-page .lede {
  margin-block-start: var(--space-5);
}

.workshop-stage {
  margin-block-start: var(--space-8);
  overflow: hidden;
}

.workshop-captions {
  display: none;
}

.workshop-frame {
  position: relative;
  width: 100%;
}

.h1-line {
  display: inline;
}

.h1-wrap {
  display: inline;
}

.workshop-stage svg,
.flow-stage svg {
  width: 100%;
  height: auto;
}

.workshop-hero {
  max-height: min(68vh, 36rem);
  overflow: hidden;
}

.workshop-hero.geometric-art {
  overflow: hidden;
}

.hero-car,
.hero-car-next {
  transform-box: fill-box;
}

.hero-car-next {
  opacity: 0;
}

.hero-supplier .tech-label {
  font-size: 10px;
  letter-spacing: 0.04em;
}

.pikaosa-pulse,
.supplier-pulse,
.station-pulse {
  stroke: var(--color-accent);
  fill: none;
  opacity: 0;
}

.pikaosa-link {
  stroke: var(--color-line);
  fill: none;
  stroke-dasharray: 5 7;
  animation: pikaosa-flow 1.15s linear infinite;
}

.return-token,
.part-token {
  fill: var(--color-bg);
  stroke: var(--color-line);
  opacity: 0;
}

.request-token,
.fan-token {
  opacity: 0;
}

@keyframes pikaosa-flow {
  to {
    stroke-dashoffset: -24;
  }
}

.flow-section {
  scroll-snap-align: start;
  padding-block: var(--section-compact);
}

.flow-section h2 {
  font-size: var(--heading-md);
  max-inline-size: 18ch;
}

.flow-section .support {
  margin-block-start: var(--space-5);
  font-size: var(--text-lg);
}

.flow-stage {
  margin-block-start: var(--space-7);
  display: flex;
  justify-content: center;
}

.parts-flow {
  width: min(100%, 22rem);
  height: auto;
}

.flow-token {
  fill: var(--color-bg);
  stroke: var(--color-accent);
}

.pikaosa-shell {
  fill: none;
}

.stock-shape {
  fill: var(--color-bg);
  stroke: var(--color-line-muted);
}

.stock-shape.is-lit {
  stroke: var(--color-accent);
}

.contact-section {
  display: grid;
  scroll-snap-align: start;
  gap: var(--space-8);
  padding-block: var(--space-8);
  min-height: calc(100svh - var(--header-height) - 8.5rem);
  align-content: center;
}

.contact-section h2 {
  font-size: var(--heading-md);
  max-inline-size: 14ch;
}

.contact-section .support {
  font-size: var(--text-base);
  margin-block-start: var(--space-5);
}

.contact-section .arrow-link {
  margin-block-start: var(--space-6);
}

.contact-visual {
  width: min(100%, 38rem);
}

.contact-overhead {
  animation: contact-idle 5.5s ease-in-out infinite;
}

@keyframes contact-idle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.contact-visual .contact-wheat {
  stroke: var(--color-accent);
  stroke-width: var(--line-art-large);
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.contact-section.is-active .contact-wheat {
  opacity: 1;
  stroke-dashoffset: 0;
  animation: wheat-pulse 2.8s var(--ease-standard) infinite;
}

.contact-section.is-active .contact-overhead {
  opacity: 0.18;
}

@keyframes wheat-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 63.99rem) {
  .car-hero,
  .flow-section {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "title"
      "visual"
      "copy";
    row-gap: var(--space-9);
    align-items: stretch;
    box-sizing: border-box;
    height: calc(100svh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    scroll-snap-stop: always;
    padding-block: var(--space-6);
    overflow: hidden;
  }

  .car-hero h1,
  .flow-section h2 {
    grid-area: title;
    align-self: end;
    margin: 0;
    font-size: var(--heading-md);
  }

  .car-hero h1 {
    max-inline-size: none;
  }

  .h1-line {
    display: block;
  }

  .h1-wrap {
    display: block;
  }

  .workshop-stage,
  .flow-stage {
    grid-area: visual;
    position: relative;
    margin: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .workshop-frame {
    position: relative;
    width: 100%;
  }

  .workshop-stage svg,
  .flow-stage svg {
    width: 100%;
    height: auto;
    max-height: min(30svh, calc(100svh - var(--header-height) - 26rem));
    display: block;
  }

  .workshop-hero {
    max-height: min(30svh, calc(100svh - var(--header-height) - 26rem));
    min-height: 0;
    overflow: visible;
  }

  .workshop-hero .tech-label {
    fill: transparent;
    opacity: 0;
  }

  .workshop-captions {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--color-text-muted);
  }

  .workshop-captions p {
    position: absolute;
    margin: 0;
    padding: 0.05em 0.3em;
    background: var(--color-bg);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    line-height: 1.1;
  }

  /* Mobile viewBox "48 -60 860 472": labels sit inside the resized boxes. */
  .workshop-captions__suppliers {
    left: 50.8%;
    top: 9.7%;
  }

  .workshop-captions__pikaosa {
    left: 50.2%;
    top: 29.2%;
  }

  .workshop-captions p.workshop-captions__workshop {
    left: 50.2%;
    top: 50%;
    transform: translate(-50%, 0.85em);
  }

  .car-hero .lede,
  .flow-section .support {
    grid-area: copy;
    align-self: start;
    margin-block-start: 0;
    font-size: var(--text-base);
  }

  .parts-flow {
    width: 100%;
  }

  .parts-flow .tech-label {
    font-size: 18px;
  }

  .car-page .contact-section {
    position: relative;
    z-index: 2;
    scroll-snap-stop: always;
    gap: var(--space-5);
    padding-block: var(--space-6) var(--space-5);
    min-height: calc(100svh - var(--header-height) - 14rem);
    align-content: start;
    background: var(--color-bg);
  }

  .contact-section h2 {
    font-size: var(--heading-sm);
  }

  .contact-section .support {
    margin-block-start: var(--space-4);
  }

  .contact-section .arrow-link {
    margin-block-start: var(--space-4);
  }

  .contact-visual {
    width: min(100%, 22rem);
  }
}

@media (min-width: 64rem) {
  .car-hero,
  .flow-section {
    display: grid;
    grid-template-columns: minmax(16rem, 0.7fr) minmax(24rem, 1.3fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ". visual"
      "title visual"
      "copy visual"
      ". visual";
    column-gap: var(--space-7);
    row-gap: var(--space-5);
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    padding-block: var(--space-8);
  }

  .car-hero h1,
  .flow-section h2 {
    grid-area: title;
    align-self: end;
    margin: 0;
  }

  .h1-line,
  .h1-wrap {
    display: inline;
  }

  .car-hero .lede,
  .flow-section .support {
    grid-area: copy;
    align-self: start;
    margin-block-start: 0;
  }

  .workshop-stage,
  .flow-stage {
    grid-area: visual;
    align-self: center;
    margin-block-start: 0;
  }

  .workshop-hero {
    max-height: none;
  }

  .flow-stage {
    justify-content: flex-start;
  }

  .contact-section {
    grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 1.15fr);
    align-items: center;
    min-height: calc(100svh - var(--header-height) - 8.5rem);
    padding-block: var(--space-9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .part-token {
    opacity: 1;
  }

  .request-token,
  .fan-token,
  .return-token {
    opacity: 0;
  }

  .pikaosa-link {
    animation: none;
  }

  .contact-wheat,
  .contact-overhead {
    stroke-dashoffset: 0;
    animation: none;
  }
}