/* ==========================================================================
   Elite Transfer Brussels — sections
   Frame 01 Hero · 02 Mission · 03 Assist · 04 Tailored · 05 Fleet
   06 Onboard · 07 Request · 08 Thank you
   Desktop values are read off the 1440-wide frames.
   ========================================================================== */

.shell {
  width: var(--page);
  margin-inline: auto;
}

.ground-night {
  background: var(--night);
  color: var(--cream-light);
}
/* Frame 02 — the hairline sits inside the section, about 60px above its
   bottom edge on the 1440 x 1024 frame, with the night ground continuing
   below it. Same gradient, same weight, same colour as the other hairlines;
   the inset follows the one used on frame 08 so the two agree. */
.rule-gold--inset {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 5.9vh, 3.75rem);
}

.ground-cream {
  background: var(--cream);
  color: var(--night);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}


/* ==========================================================================
   Navigation — subtle glass, part of the hero rather than a block on top
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: clamp(1rem, 1.8vw, 1.75rem);
  background: rgba(var(--cream-light-rgb), 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(var(--cream-light-rgb), 0.08);
  color: var(--cream-light);
  transition:
    background-color var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease),
    backdrop-filter var(--dur-slow) var(--ease);
}

/* the navbar becomes part of the experience as the hero settles */
.nav__inner {
  width: min(94vw, 1312px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.has-js .nav__inner {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 1.1s var(--ease-soft),
    transform 1.1s var(--ease-soft);
}
.nav.is-settled .nav__inner { opacity: 1; transform: none; }

/* once past the hero the panel carries the night ground, so the links stay
   legible over the cream sections beneath */
.nav.is-scrolled {
  background: rgba(var(--night-deep-rgb), 0.72);
  border-bottom-color: rgba(var(--cream-light-rgb), 0.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav__logo img {
  width: clamp(150px, 14vw, 192px);
  height: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.35rem;
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--cream-light);
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--gold); }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

/* phone — the links sit under the logo rather than crowding it */
@media (max-width: 640px) {
  .nav { padding-block: 0.7rem; }
  .nav__inner { flex-direction: column; gap: 0.6rem; }
  .nav__links { gap: 1.1rem; }
  .nav__link { font-size: var(--t-small); }
}


/* ==========================================================================
   Frame 01 — Hero
   The supplied video is the hero. It plays once and rests on its final frame.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 640px;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
  background: var(--night);
  color: var(--cream-light);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;   /* keeps the vehicle the focal subject */
}

/* the quiet left-hand side the typography sits on, and the fall into
   the night ground of the section below */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(var(--night-deep-rgb), 0.88) 0%,
      rgba(var(--night-deep-rgb), 0.76) 20%,
      rgba(var(--night-deep-rgb), 0.50) 38%,
      rgba(var(--night-deep-rgb), 0.22) 56%,
      rgba(var(--night-deep-rgb), 0.04) 74%,
      rgba(var(--night-deep-rgb), 0) 88%),
    linear-gradient(to bottom,
      rgba(var(--night-deep-rgb), 0.55) 0%,
      rgba(var(--night-deep-rgb), 0.10) 22%,
      rgba(var(--night-deep-rgb), 0) 48%,
      rgba(var(--night-deep-rgb), 0.35) 88%,
      var(--night) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: var(--page);
  margin-inline: auto;
  max-width: 1240px;
  padding-top: clamp(5rem, 9vh, 7rem);
  padding-bottom: clamp(2rem, 12vh, 8rem);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* no measure is set here: the headline wraps naturally to the viewport */
}

.hero__sub {
  margin-top: clamp(1.25rem, 3.4vh, 2.75rem);
  margin-left: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--t-hero-sub);
  line-height: 1.35;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  max-width: 39rem;
}

.hero__cta {
  margin-top: clamp(2.5rem, 17vh, 11rem);
  margin-left: clamp(0rem, 11vw, 10.375rem);   /* the indent shown in frame 01 */
  min-width: 245px;
}

@media (max-width: 900px) {
  .hero__video { object-position: 64% 50%; }
  .hero__scrim {
    background:
      linear-gradient(to right,
        rgba(var(--night-deep-rgb), 0.88) 0%,
        rgba(var(--night-deep-rgb), 0.66) 34%,
        rgba(var(--night-deep-rgb), 0.30) 62%,
        rgba(var(--night-deep-rgb), 0) 92%),
      linear-gradient(to bottom,
        rgba(var(--night-deep-rgb), 0.60) 0%,
        rgba(var(--night-deep-rgb), 0.10) 26%,
        rgba(var(--night-deep-rgb), 0) 52%,
        rgba(var(--night-deep-rgb), 0.40) 86%,
        var(--night) 100%);
  }
}

/* Phone — recomposed rather than shrunk. A full-bleed cover crop on a
   portrait viewport leaves a fragment of a car; instead the film keeps a band
   across the top, where the whole vehicle stays readable, and the copy moves
   below it onto the night ground. Same film, same single playback. */
@media (max-width: 640px) {
  .hero {
    min-height: 620px;
    align-items: flex-end;
  }

  .hero__media {
    inset: 0 0 auto 0;
    height: min(44svh, 380px);
  }
  .hero__video { object-position: 60% 50%; }

  /* the band is feathered into the ground below it */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgba(var(--night-deep-rgb), 0.55) 0%,
      rgba(var(--night-deep-rgb), 0.08) 26%,
      rgba(var(--night-deep-rgb), 0) 48%,
      rgba(var(--night-rgb), 0.72) 84%,
      var(--night) 100%);
  }

  .hero__content { padding-block: 0 clamp(3rem, 10vh, 5rem); }
  .hero__sub { margin-left: 0; }
  .hero__cta {
    margin-top: clamp(2rem, 6vh, 3rem);
    margin-left: 0;
    width: 100%;
    max-width: 320px;
  }

  /* the ground under the band is already night; only the very top needs a
     wash, so the navigation stays legible over the film */
  .hero__scrim {
    background: linear-gradient(to bottom,
      rgba(var(--night-deep-rgb), 0.55) 0%,
      rgba(var(--night-deep-rgb), 0.12) 18%,
      rgba(var(--night-deep-rgb), 0) 34%);
  }
}


/* ==========================================================================
   Frame 02 — Mission
   ========================================================================== */
.mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 10vw, 9.125rem);
  align-items: center;
}

.mission__title {
  font-family: var(--font-display);
  font-size: var(--t-title-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.mission__statement {
  margin-top: clamp(2rem, 5vw, 4.5rem);
  font-size: var(--t-body-lg);
  font-weight: 400;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: 32ch;
}

.mission__values {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(2rem, 5vw, 4.5rem);
  font-size: var(--t-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mission__cta {
  margin-top: clamp(2.5rem, 12vw, 10.5rem);
  min-width: 284px;
}

.mission__figure img {
  width: 100%;
  aspect-ratio: 625 / 545;
  object-fit: cover;
  border-radius: 2px;
}

@media (max-width: 860px) {
  .mission__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .mission__figure { order: -1; }
  .mission__cta { width: 100%; max-width: 340px; }
}


/* ==========================================================================
   Frame 03 — How can we assist you?
   ========================================================================== */
.assist__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 11vw, 10.625rem);
  row-gap: clamp(1.5rem, 5vw, 5rem);
  width: min(100%, 940px);
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
}

/* the card — a button, so it is reachable by keyboard and by touch */
.assist-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 1px solid rgba(var(--night-rgb), 0.06);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--night);
  color: var(--cream-light);
  text-align: left;
  cursor: pointer;
  transition:
    translate var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur) var(--ease);
}

.assist-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-soft);
}

/* subtle glass at the foot of the card, so the label always reads */
.assist-card__panel {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1.125rem;
  background:
    linear-gradient(to top,
      rgba(var(--night-deep-rgb), 0.72) 0%,
      rgba(var(--night-deep-rgb), 0.38) 55%,
      rgba(var(--night-deep-rgb), 0) 100%);
}
.assist-card__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 100%);
  mask-image: linear-gradient(to top, #000 40%, transparent 100%);
}

.assist-card__label {
  position: relative;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}

.assist-card__cue {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
  transition:
    max-height var(--dur-slow) var(--ease),
    opacity var(--dur-slow) var(--ease);
}

.assist-card:hover,
.assist-card:focus-visible {
  translate: 0 -6px;
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow: 0 18px 40px rgba(var(--night-deep-rgb), 0.22);
}
.assist-card:hover .assist-card__img,
.assist-card:focus-visible .assist-card__img { transform: scale(1.045); }
.assist-card:hover .assist-card__cue,
.assist-card:focus-visible .assist-card__cue { max-height: 3rem; opacity: 1; }
.assist-card:hover .btn__arrow,
.assist-card:focus-visible .btn__arrow { transform: translateX(4px); }

/* the selected journey stays marked, so the recommendation has an origin */
.assist-card[aria-pressed="true"] {
  border-color: var(--gold);
}
.assist-card[aria-pressed="true"] .assist-card__cue { max-height: 3rem; opacity: 1; }

.assist__cta {
  display: block;
  margin: clamp(2.5rem, 6vw, 6rem) auto 0;
  width: min(100%, 466px);
  min-height: 102px;
}

/* touch — no hover to rely on; the cue arrives with the card */
@media (hover: none) {
  .assist-card.is-revealed .assist-card__cue { max-height: 3rem; opacity: 1; }
}

@media (max-width: 900px) {
  .assist__grid { column-gap: clamp(1rem, 4vw, 2rem); }
}
@media (max-width: 620px) {
  .assist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 1rem;
  }
}


/* ==========================================================================
   Frame 04 — Tailored to your journey
   The recommendation. Answers the choice made in frame 03.
   ========================================================================== */
/* the line that answers the choice — quiet, and only after a selection */
.tailored__response {
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  letter-spacing: normal;
  text-transform: none;
}
.tailored__response[hidden] { display: none; }

.tailored__grid {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 478fr);
  gap: clamp(1.5rem, 19vw, 17.5rem);
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

/* the vehicle, as photographed */
.tailored__vehicle {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tailored__vehicle img {
  width: 100%;
  aspect-ratio: 480 / 686;
  object-fit: cover;
}

/* the recommendation panel — the one place the glass is allowed to be
   slightly more visible, because it is an interactive result */
.tailored__card {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  color: var(--cream-light);
}
.tailored__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tailored__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(var(--night-deep-rgb), 0.34) 0%,
      rgba(var(--night-deep-rgb), 0.14) 34%,
      rgba(var(--night-deep-rgb), 0.30) 62%,
      rgba(var(--night-deep-rgb), 0.72) 100%);
}
.tailored__panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 688px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(var(--cream-light-rgb), 0.06);
  border: 1px solid var(--glass-edge);
  border-radius: inherit;
  /* No blur here. This panel covers the whole card, so a backdrop filter on it
     would blur the photograph rather than sit on it. The glass is carried by
     the cream tint and the fine edge; the only surface that blurs what is
     behind it is the CONTINUE button, which is the glass element the frame
     actually draws. */
}

.tailored__lede {
  font-size: var(--t-body);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-align: center;
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
}

.tailored__foot { margin-top: auto; }

.tailored__vehicle-name {
  font-family: var(--font-display);
  font-size: var(--t-lede);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.tailored__specs {
  margin-top: 0.75rem;
  font-size: var(--t-body);
  line-height: 1.65;
}

.tailored__continue {
  align-self: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  width: min(100%, 240px);
  min-height: 56px;
}

.tailored__cta {
  display: block;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  min-height: 76px;
}

/* the panel answers a selection — a short, quiet change of state */
.tailored.is-answering .tailored__panel,
.tailored.is-answering .tailored__vehicle img {
  animation: tailored-answer 900ms var(--ease-soft) both;
}
@keyframes tailored-answer {
  0%   { opacity: 0.35; transform: translateY(8px); }
  100% { opacity: 1;    transform: none; }
}

@media (max-width: 900px) {
  /* the line that answers the choice — quiet, and only after a selection */
.tailored__response {
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  letter-spacing: normal;
  text-transform: none;
}
.tailored__response[hidden] { display: none; }

.tailored__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .tailored__panel { min-height: 440px; }
  .tailored__vehicle img { aspect-ratio: 4 / 3; }
}


/* ==========================================================================
   Frame 05 — Fleet
   ========================================================================== */
.fleet__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 5.5vw, 5rem);
  width: min(100%, 1120px);
  margin: clamp(2.5rem, 6vw, 5.5rem) auto 0;
}

.fleet-card {
  position: relative;
  aspect-ratio: 320 / 420;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--night);
  color: var(--cream-light);
  transition:
    translate var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}
.fleet-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-soft);
}

/* subtle glass, carrying only the essential information */
.fleet-card__panel {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.25rem 1.25rem 1.375rem;
  text-align: center;
  background:
    linear-gradient(to top,
      rgba(var(--night-deep-rgb), 0.70) 0%,
      rgba(var(--night-deep-rgb), 0.34) 60%,
      rgba(var(--night-deep-rgb), 0) 100%);
}
.fleet-card__name {
  font-size: var(--t-body-lg);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.fleet-card__detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--dur-slow) var(--ease),
    opacity var(--dur-slow) var(--ease);
}
.fleet-card__detail > div { overflow: hidden; }
.fleet-card__spec {
  padding-top: 0.5rem;
  font-size: var(--t-small);
  line-height: 1.6;
}
.fleet-card__action {
  margin-top: 0.6rem;
  color: var(--gold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: var(--t-micro);
}

.fleet-card:hover,
.fleet-card:focus-within,
.fleet-card.is-open {
  translate: 0 -5px;
  box-shadow: 0 20px 44px rgba(var(--night-deep-rgb), 0.24);
}
.fleet-card:hover .fleet-card__img,
.fleet-card:focus-within .fleet-card__img,
.fleet-card.is-open .fleet-card__img { transform: scale(1.05); }

.fleet-card:hover .fleet-card__detail,
.fleet-card:focus-within .fleet-card__detail,
.fleet-card.is-open .fleet-card__detail {
  grid-template-rows: 1fr;
  opacity: 1;
}
.fleet-card:hover .btn__arrow,
.fleet-card:focus-within .btn__arrow { transform: translateX(4px); }

/* the whole card is the control, stretched over the image */
.fleet-card__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.fleet__cta {
  display: block;
  margin: clamp(2.5rem, 6vw, 5.5rem) auto 0;
  min-height: 90px;
}

@media (max-width: 860px) {
  .fleet__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 420px; }
  .fleet-card { aspect-ratio: 3 / 2; }
}


/* ==========================================================================
   Frame 06 — Onboard experience
   ========================================================================== */
.onboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 380fr) minmax(0, 860fr);
  gap: clamp(2rem, 3vw, 2.5rem);
  align-items: start;
}
.onboard__title {
  font-size: var(--t-body-lg);
  font-weight: 500;
  line-height: 1.4;
}
.onboard__text {
  margin-top: clamp(1.5rem, 3vw, 3.25rem);
  font-size: var(--t-body-lg);
  line-height: 1.6;
  max-width: 34ch;
}
.onboard__figure img {
  width: 100%;
  aspect-ratio: 860 / 560;
  object-fit: cover;
  border-radius: 2px;
}

@media (max-width: 860px) {
  .onboard__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}


/* ==========================================================================
   Frame 07 — Request
   ========================================================================== */
.request__form {
  width: min(100%, 1058px);
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
}

.field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.field__label {
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-align: center;
}
.field__control {
  width: min(100%, 300px);
  height: 50px;
  padding: 0 1rem;
  background: var(--cream-light);
  color: var(--night);
  border: 1px solid rgba(var(--night-rgb), 0.10);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.field__control::placeholder { color: rgba(var(--night-rgb), 0.38); }
.field__control:hover { border-color: rgba(var(--night-rgb), 0.20); }
.field__control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.22);
}
.field__control:focus-visible { outline: none; }

.field--need { margin-bottom: clamp(2rem, 5vw, 4rem); }

.request__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  justify-content: space-between;
  column-gap: clamp(1.5rem, 20vw, 28.625rem);
  row-gap: clamp(1.75rem, 4.5vw, 3.5rem);
}

.request__cta {
  display: block;
  margin: clamp(2.5rem, 6vw, 5.5rem) auto 0;
  width: min(100%, 338px);
  min-height: 56px;
}

@media (max-width: 720px) {
  .request__rows {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    row-gap: 1.5rem;
  }
  .field__control { width: 100%; max-width: 420px; }
  .field { align-items: stretch; }
  .field__label { text-align: center; }
}


/* ==========================================================================
   Footer / Frame 08 — Thank you
   ========================================================================== */
.colophon {
  padding-block: clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-size: var(--t-body);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}

/* Frame 08.
   The page is one composition between two gold hairlines, both inset from the
   edge of the viewport as the frame draws them. Read off the 1440 x 1024
   frame: rules at 60 and 965, THANK YOU at 139, the title at 206, the copy at
   274, RETURN TO HOME at 798 x 340 x 59, the copyright at 936. The block
   holds those places by filling the height between the rules, so the long
   quiet middle of the frame is kept. */
.page-thanks {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: clamp(1.5rem, 5.9vh, 3.75rem);
  background: var(--night);
}
.page-thanks .thanks { flex: 1; }

.thanks {
  display: flex;
  flex-direction: column;
}
.thanks__inner {
  flex: 1;
  width: var(--page);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(2.5rem, 6.3vh, 4rem) clamp(1rem, 2vh, 1.25rem);
}
.thanks__eyebrow {
  font-size: var(--t-body-lg);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.thanks__title {
  margin-top: clamp(1.5rem, 2.8vw, 2.5rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.thanks__text {
  margin-top: clamp(1.5rem, 2.8vw, 2.5rem);
  font-family: var(--font-display);
  font-size: var(--t-lede);
  line-height: 1.45;
  text-transform: uppercase;
  max-width: 30ch;
}
.thanks__cta {
  margin-top: auto;
  width: min(100%, 340px);
  min-height: 59px;
}
.thanks__colophon {
  margin-top: clamp(2rem, 6.6vh, 4.25rem);
  font-size: 1rem;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}