/* Restored full-width collection build. */
@font-face {
  font-family: "Tre Display";
  src: url("/public/fonts/tre-display.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Tre UI";
  src: url("/public/fonts/tre-ui.woff2") format("woff2");
  font-display: swap;
}

:root {
  --black: #111212;
  --paper: #f3f1e9;
  --white: #e9ece7;
  --acid: #b9ff2e;
  --project: #254a78;
  --project-ink: #e8eef4;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  background: var(--black);
}

body {
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: "Tre UI", Arial, sans-serif;
  text-transform: uppercase;
  overscroll-behavior: none;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  text-transform: inherit;
  cursor: pointer;
}

a {
  text-decoration: none;
}

button:focus-visible,
a:focus-visible {
  outline: 1px solid var(--acid);
  outline-offset: 5px;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.site {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  transition:
    background-color 0.85s var(--ease),
    color 0.6s ease;
}

.mode-preview .site,
.mode-detail .site {
  background: var(--project);
  color: var(--project-ink);
}

.site::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 25%, transparent 72%, rgba(0, 0, 0, 0.08)),
    radial-gradient(circle at 50% 48%, transparent 0 42%, rgba(0, 0, 0, 0.1) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.mode-preview .site::after {
  opacity: 1;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 110px;
  color: var(--white);
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.8s 0.1s var(--ease),
    transform 0.9s 0.1s var(--ease),
    color 0.5s ease;
}

.site-ready .site-header {
  opacity: 1;
  transform: translateY(0);
}

.mode-preview .site-header {
  color: var(--project-ink);
}

.mode-detail .site-header {
  opacity: 0;
  transform: translateY(-25px);
  pointer-events: none;
}

.brand {
  position: absolute;
  top: 37px;
  left: 3.05vw;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 39px;
  line-height: 1;
  text-align: left;
}

.brand-mark,
.detail-brand {
  font-family: "Tre Display", Impact, sans-serif;
  font-size: 46px;
  line-height: 0.8;
  letter-spacing: -0.055em;
}

.brand-copy {
  padding-bottom: 1px;
  font-size: 8px;
  line-height: 0.92;
  letter-spacing: 0.12em;
}

.about-link {
  position: absolute;
  top: 52px;
  right: 3.05vw;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.project-progress {
  position: absolute;
  top: 47px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 360px;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: currentColor;
}

.progress-window {
  width: 29px;
  height: 17px;
  border: 1px solid currentColor;
  opacity: 0.76;
}

.progress-ticks {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  height: 20px;
  margin-left: 12px;
}

.progress-ticks i {
  width: 1px;
  height: 17px;
  background: currentColor;
  opacity: 0.2;
  transform-origin: center;
  transition:
    height 0.45s var(--ease),
    opacity 0.3s ease,
    background-color 0.3s ease;
}

.progress-ticks i.is-past {
  opacity: 0.38;
}

.progress-ticks i.is-current {
  width: 2px;
  height: 28px;
  background: var(--acid);
  opacity: 1;
}

.index-view {
  position: fixed;
  inset: 0;
  z-index: 5;
  opacity: 0;
  transition:
    opacity 0.72s ease,
    transform 0.95s var(--ease);
}

.site-ready .index-view {
  opacity: 1;
}

.mode-preview .index-view,
.mode-detail .index-view {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

.film-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.is-dragging .film-window,
.is-dragging .detail-viewport {
  cursor: grabbing;
}

.film-track {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.4vw, 30px);
  width: max-content;
  height: clamp(330px, 52vh, 590px);
  transform: translate3d(50vw, -50%, 0);
  will-change: transform;
}

.film-card {
  position: relative;
  flex: 0 0 clamp(92px, 7.3vw, 152px);
  height: 100%;
  overflow: hidden;
  background: #202122;
  opacity: 0;
  transform: translateY(18px);
  filter: grayscale(1) brightness(0.52);
  transition:
    filter 0.6s var(--ease),
    opacity 0.5s ease,
    transform 0.65s var(--ease);
  animation: film-enter 0.95s var(--ease) forwards;
  animation-delay: calc(0.28s + var(--i, 0) * 17ms);
}

.film-card::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.film-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform 1s var(--ease);
}

.film-card > span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  font-size: 7px;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.film-card:hover {
  filter: grayscale(0.35) brightness(0.78);
}

.film-card:hover img {
  transform: scale(1);
}

.film-card.is-selected {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

.film-card.is-selected > span {
  opacity: 0.78;
}

@keyframes film-enter {
  to {
    opacity: 0.78;
    transform: translateY(0);
  }
}

.preview-view {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  color: var(--project-ink);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    visibility 0s 0.85s,
    opacity 0.5s ease;
}

.mode-preview .preview-view,
.mode-detail .preview-view {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.preview-title {
  position: absolute;
  top: 17.7vh;
  left: 2.45vw;
  z-index: 12;
  width: 49vw;
  margin: 0;
  color: var(--project-ink);
  font-family: "Tre Display", Impact, sans-serif;
  font-size: clamp(142px, 20.5vw, 410px);
  font-weight: 700;
  line-height: 0.765;
  letter-spacing: -0.055em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(45px);
  transition:
    opacity 0.75s 0.3s ease,
    transform 1.05s 0.22s var(--ease);
}

.mode-preview .preview-title,
.mode-detail .preview-title {
  opacity: 0.96;
  transform: translateY(0);
}

.preview-title span {
  display: block;
}

.preview-title.is-long {
  font-size: clamp(112px, 16vw, 320px);
  top: 22vh;
}

.preview-title.is-extra-long {
  font-size: clamp(88px, 12vw, 245px);
  top: 26vh;
}

.preview-media {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  width: min(49vw, 1000px);
  height: min(50vh, 540px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  background: #0c0d0e;
  opacity: 0;
  transition:
    opacity 0.6s 0.18s ease,
    transform 1.05s 0.1s var(--ease);
}

.mode-preview .preview-media,
.mode-detail .preview-media {
  opacity: 1;
}

.preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform 1.4s var(--ease);
}

.preview-media:hover img {
  transform: scale(1);
}

.preview-side {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 19vw;
  height: min(50vh, 540px);
  overflow: hidden;
  transform: translateY(-50%);
  background: var(--project);
  opacity: 0;
  transition:
    opacity 0.7s 0.28s ease,
    transform 1s 0.16s var(--ease);
}

.mode-preview .preview-side,
.mode-detail .preview-side {
  opacity: 1;
}

.preview-previous {
  left: 0;
  transform: translate(-30px, -50%);
}

.preview-next {
  right: 0;
  transform: translate(30px, -50%);
}

.mode-preview .preview-previous,
.mode-detail .preview-previous,
.mode-preview .preview-next,
.mode-detail .preview-next {
  transform: translate(0, -50%);
}

.preview-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  filter: grayscale(0.42) contrast(1.08);
  mix-blend-mode: multiply;
  transform: scale(1.04);
  transition:
    opacity 0.5s ease,
    transform 1s var(--ease);
}

.preview-side:hover img {
  opacity: 0.55;
  transform: scale(1);
}

.explore-card {
  position: absolute;
  top: calc(75% + 14px);
  left: 50%;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.6s 0.55s ease;
}

.mode-preview .explore-card,
.mode-detail .explore-card {
  opacity: 1;
}

.explore-card > span {
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
}

.explore-card i {
  display: block;
  width: 1px;
  height: 38px;
  margin-top: 14px;
  background: currentColor;
  transform-origin: top;
  transition: transform 0.45s var(--ease);
}

.explore-card b {
  margin-top: 6px;
  color: var(--acid);
  font-size: 15px;
  font-weight: 400;
  transition: transform 0.45s var(--ease);
}

.explore-card:hover i {
  transform: scaleY(1.28);
}

.explore-card:hover b {
  transform: translateY(8px);
}

.preview-facts {
  position: absolute;
  bottom: 3.9vh;
  left: 26vw;
  z-index: 14;
  display: grid;
  width: min(430px, 34vw);
  margin: 0;
  gap: 4px;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s 0.5s ease,
    transform 0.8s 0.45s var(--ease);
}

.mode-preview .preview-facts,
.mode-detail .preview-facts {
  opacity: 1;
  transform: translateY(0);
}

.preview-facts > div {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  font-size: 9px;
  line-height: 1.05;
}

.preview-facts dt,
.preview-facts dd {
  margin: 0;
}

.preview-facts dt {
  opacity: 0.56;
}

.preview-description {
  position: absolute;
  right: 16.5vw;
  bottom: 4.1vh;
  z-index: 14;
  width: min(410px, 26vw);
  margin: 0;
  font-size: 9px;
  line-height: 1.16;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s 0.58s ease,
    transform 0.8s 0.52s var(--ease);
}

.mode-preview .preview-description,
.mode-detail .preview-description {
  opacity: 0.65;
  transform: translateY(0);
}

.preview-view.moves-left .preview-media,
.preview-view.moves-left .preview-title {
  animation: preview-left 0.78s var(--ease-smooth);
}

.preview-view.moves-right .preview-media,
.preview-view.moves-right .preview-title {
  animation: preview-right 0.78s var(--ease-smooth);
}

.preview-view.moves-left .preview-side,
.preview-view.moves-right .preview-side {
  opacity: 0.25;
}

@keyframes preview-left {
  0% { opacity: 1; transform: translate(-50%, -50%); }
  36% { opacity: 0; transform: translate(-58%, -50%); }
  42% { opacity: 0; transform: translate(-42%, -50%); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes preview-right {
  0% { opacity: 1; transform: translate(-50%, -50%); }
  36% { opacity: 0; transform: translate(-42%, -50%); }
  42% { opacity: 0; transform: translate(-58%, -50%); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}

.preview-view.moves-left .preview-title,
.preview-view.moves-right .preview-title {
  animation-name: title-fade;
}

@keyframes title-fade {
  0% { opacity: 0.96; }
  36% { opacity: 0; }
  44% { opacity: 0; }
  100% { opacity: 0.96; }
}

.site-footer {
  position: fixed;
  right: 3.05vw;
  bottom: 3.7vh;
  left: 3.05vw;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 9px;
  line-height: 1.05;
  color: var(--white);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.75s 0.25s ease,
    transform 0.85s 0.25s var(--ease),
    color 0.5s ease;
}

.site-ready .site-footer {
  opacity: 1;
  transform: translateY(0);
}

.mode-preview .site-footer,
.mode-detail .site-footer {
  color: var(--project-ink);
}

.site-footer p {
  margin: 0;
  pointer-events: auto;
}

.site-footer p:last-child {
  text-align: right;
}

.mode-detail .site {
  transform: translateY(-12vh);
  transition:
    transform 1s var(--ease),
    background-color 0.85s var(--ease);
}

.detail-page {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--paper);
  color: #171714;
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 1.05s var(--ease),
    visibility 0s 1.05s;
}

.mode-detail .detail-page {
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.detail-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 120px;
  color: color-mix(in srgb, var(--project) 80%, #8d671d);
  opacity: 0;
  transform: translateY(-18px);
  transition:
    opacity 0.65s 0.45s ease,
    transform 0.9s 0.38s var(--ease);
}

.mode-detail .detail-header {
  opacity: 1;
  transform: translateY(0);
}

.detail-brand {
  position: absolute;
  top: 47px;
  left: 5.9vw;
  font-size: 72px;
  color: inherit;
}

.detail-close {
  position: absolute;
  top: 59px;
  right: 5.9vw;
  padding-bottom: 7px;
  border-bottom: 2px solid currentColor;
  font-size: 17px;
  letter-spacing: 0.015em;
}

.detail-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.detail-rail {
  display: grid;
  grid-template-columns: 46vw 42vw 64vw 46vw;
  gap: 7vw;
  align-items: center;
  width: max-content;
  height: 100%;
  padding: 0 8vw 0 5.9vw;
  will-change: transform;
}

.detail-intro {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 46vw;
  padding-top: 7vh;
}

.detail-index,
.detail-kicker,
.detail-prompt,
.detail-slab figcaption,
.detail-next > p {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.detail-index {
  margin-bottom: 5vh;
  opacity: 0.5;
}

.detail-intro h2 {
  width: 70vw;
  margin: 0;
  color: color-mix(in srgb, var(--project) 84%, #a57720);
  font-family: "Tre Display", Impact, sans-serif;
  font-size: clamp(190px, 20vw, 400px);
  font-weight: 700;
  line-height: 0.72;
  letter-spacing: -0.055em;
  white-space: normal;
  overflow-wrap: normal;
}

.detail-prompt {
  margin-top: 7vh;
  opacity: 0.5;
}

.detail-slab {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42vw;
  height: 100%;
  margin: 0;
}

.detail-slab img {
  width: 100%;
  max-width: 540px;
  height: 76vh;
  object-fit: contain;
  filter: drop-shadow(0 35px 35px rgba(0, 0, 0, 0.18));
}

.detail-slab figcaption {
  position: absolute;
  right: 2vw;
  bottom: 5vh;
  opacity: 0.5;
}

.detail-information {
  width: 64vw;
  padding: 8vh 8vw 0;
}

.detail-kicker {
  margin-bottom: 8vh;
  color: color-mix(in srgb, var(--project) 82%, #a57720);
}

.detail-information h3 {
  margin: 0 0 5vh;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 7.4vw, 150px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.detail-information > p:not(.detail-kicker) {
  width: min(620px, 42vw);
  margin: 0 0 6vh;
  font-size: 13px;
  line-height: 1.45;
  text-transform: none;
}

.detail-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  width: min(650px, 48vw);
  margin: 0 0 5vh;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.detail-specs > div {
  padding: 17px 20px 17px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.detail-specs dt {
  margin-bottom: 8px;
  font-size: 8px;
  letter-spacing: 0.1em;
  opacity: 0.48;
}

.detail-specs dd {
  margin: 0;
  font-size: 11px;
}

.sales-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(650px, 48vw);
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--project) 55%, transparent);
  color: color-mix(in srgb, var(--project) 84%, #6a4a17);
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

.sales-link span {
  margin-bottom: 9px;
  font-size: 8px;
  letter-spacing: 0.1em;
}

.sales-link strong {
  font-size: 14px;
  font-weight: 400;
}

.sales-link:hover {
  background: var(--project);
  color: var(--project-ink);
}

.detail-next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 46vw;
  height: 100%;
}

.detail-next > p {
  margin-bottom: 25px;
  opacity: 0.5;
}

.detail-next button {
  position: relative;
  width: 36vw;
  height: 64vh;
  overflow: hidden;
  color: #fff;
  text-align: left;
}

.detail-next img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) brightness(0.78);
  transform: scale(1.04);
  transition:
    transform 1s var(--ease),
    filter 0.6s ease;
}

.detail-next button:hover img {
  filter: grayscale(0) brightness(0.9);
  transform: scale(1);
}

.detail-next button span {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  z-index: 2;
  font-family: "Tre Display", Impact, sans-serif;
  font-size: clamp(46px, 5.5vw, 110px);
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.detail-progress {
  position: fixed;
  right: 5.9vw;
  bottom: 28px;
  left: 5.9vw;
  z-index: 125;
  height: 1px;
  background: rgba(0, 0, 0, 0.16);
}

.detail-progress span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--project);
  transform: scaleX(0.04);
  transform-origin: left center;
  will-change: transform;
}

::view-transition-old(card-flight),
::view-transition-new(card-flight) {
  height: 100%;
  animation-duration: 0.95s;
  animation-timing-function: var(--ease);
  object-fit: cover;
  overflow: hidden;
}

::view-transition-group(card-flight) {
  z-index: 200;
}

@media (max-width: 1000px) {
  .project-progress {
    min-width: 290px;
  }

  .progress-ticks {
    gap: 4px;
  }

  .preview-title {
    font-size: 19vw;
  }

  .preview-facts {
    width: 38vw;
  }

  .preview-description {
    right: 5vw;
  }
}

@media (max-width: 700px) {
  .site-header {
    height: 130px;
  }

  .brand {
    top: max(24px, env(safe-area-inset-top));
    left: 20px;
    height: 31px;
  }

  .brand-mark {
    font-size: 36px;
  }

  .brand-copy {
    display: none;
  }

  .about-link {
    top: max(31px, calc(env(safe-area-inset-top) + 7px));
    right: 20px;
    font-size: 9px;
  }

  .project-progress {
    top: max(91px, calc(env(safe-area-inset-top) + 67px));
    left: 50%;
    min-width: 0;
    width: 66vw;
    gap: 7px;
  }

  .progress-window {
    width: 22px;
    height: 13px;
  }

  .progress-ticks {
    gap: 3px;
    margin-left: 5px;
  }

  .progress-ticks i {
    height: 12px;
  }

  .progress-ticks i.is-current {
    height: 22px;
  }

  .film-track {
    top: 52%;
    gap: 7vw;
    height: min(62vh, 590px);
  }

  .film-card {
    align-self: center;
    flex-basis: min(78vw, 330px);
    height: auto;
    aspect-ratio: 5 / 7;
  }

  .film-card img {
    object-fit: contain;
    transform: none;
  }

  .film-card > span {
    font-size: 6px;
  }

  .site-footer {
    display: none;
  }

  .preview-title {
    top: 23.5vh;
    left: 4.5vw;
    width: 91vw;
    font-size: 27vw;
    line-height: 0.78;
    white-space: normal;
  }

  .preview-title.is-long {
    top: 27vh;
    font-size: 20vw;
  }

  .preview-title.is-extra-long {
    top: 29vh;
    font-size: 15vw;
  }

  .preview-media {
    top: 52%;
    width: 82vw;
    height: 52vh;
  }

  .preview-side {
    top: 52%;
    width: 31vw;
    height: 45vh;
  }

  .preview-previous {
    left: -25vw;
  }

  .preview-next {
    right: -25vw;
  }

  .explore-card {
    top: calc(78% + 8px);
    font-size: 8px;
  }

  .explore-card i {
    height: 32px;
  }

  .preview-facts,
  .preview-description {
    display: none;
  }

  .detail-page {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .detail-header {
    height: 100px;
  }

  .detail-brand {
    top: max(28px, env(safe-area-inset-top));
    left: 20px;
    font-size: 44px;
  }

  .detail-close {
    top: max(31px, calc(env(safe-area-inset-top) + 3px));
    right: 20px;
    font-size: 10px;
    border-bottom-width: 1px;
  }

  .detail-viewport {
    position: relative;
    inset: auto;
    overflow: visible;
    touch-action: pan-y;
    cursor: auto;
  }

  .detail-rail {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 20px 80px;
    transform: none !important;
  }

  .detail-intro,
  .detail-slab,
  .detail-information,
  .detail-next {
    width: 100%;
  }

  .detail-intro {
    min-height: 34svh;
    padding: 132px 0 24px;
  }

  .detail-index {
    margin-bottom: 28px;
  }

  .detail-intro h2 {
    width: 100%;
    font-size: clamp(100px, 30vw, 150px);
    line-height: 0.75;
  }

  .detail-prompt {
    margin-top: 24px;
  }

  .detail-slab {
    height: 63svh;
  }

  .detail-slab img {
    width: 100%;
    max-width: none;
    height: 58svh;
  }

  .detail-slab figcaption {
    right: 0;
    bottom: 18px;
  }

  .detail-information {
    min-height: 90svh;
    padding: 100px 0 50px;
  }

  .detail-kicker {
    margin-bottom: 44px;
  }

  .detail-information h3 {
    margin-bottom: 36px;
    font-size: 21vw;
  }

  .detail-information > p:not(.detail-kicker) {
    width: 100%;
    margin-bottom: 45px;
    font-size: 13px;
  }

  .detail-specs {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .sales-link {
    width: 100%;
  }

  .detail-next {
    min-height: 82svh;
    padding: 80px 0 40px;
  }

  .detail-next button {
    width: 100%;
    height: 64svh;
  }

  .detail-next button span {
    font-size: 18vw;
  }

  .detail-progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}