/* FIXD — request CTA (yellow) and the closing lifestyle section.
   The yellow block is the loudest moment on the page; the final frame is the
   quietest. Everything after the CTA slows down deliberately. */

.cta {
  background: var(--yellow);
  color: var(--black);
  padding-block: clamp(3.5rem, 9vh, 7rem);
}
.cta__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
.cta__title {
  font-size: clamp(2.6rem, 10vw, 7.5rem);
  font-variation-settings: 'wdth' 76;
  letter-spacing: var(--track-mega);
  line-height: .84;
}
.cta__copy { font-size: var(--t-lede); color: rgba(11, 11, 10, .72); max-width: 34ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.cta__note { margin-top: 1.25rem; }
.cta .btn--dark::after { background: var(--white); }
.cta .btn--dark:hover { color: var(--black); }
.cta .btn--ghost { color: var(--black); }
.cta .btn--ghost::after { background: var(--black); }
.cta .btn--ghost:hover { color: var(--yellow); }

@media (min-width: 900px) {
  .cta__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}

/* --- closing frame ----------------------------------------------------- */
.final {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(3rem, 8vh, 6rem);
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.final__media { position: absolute; inset: 0; z-index: -2; }
.final__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(var(--s, 1));
  transform-origin: center 60%;
}
.final__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, rgba(11, 11, 10, .92) 0%, rgba(11, 11, 10, .68) 38%, rgba(11, 11, 10, .18) 72%),
    linear-gradient(to top, rgba(11, 11, 10, .78) 0%, rgba(11, 11, 10, 0) 45%);
}
.final__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.final__content { max-width: 100%; display: grid; gap: 1.25rem; }
.final__title {
  font-size: var(--t-hero);
  font-variation-settings: 'wdth' 76;
  letter-spacing: var(--track-mega);
  line-height: .84;
}
.final__title em { display: block; font-style: normal; color: var(--yellow); }
.final__copy { color: var(--white-72); max-width: 40ch; }
.final__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* The closing reveal is the one slow moment on the page. */
.js .final [data-reveal='mask'] { transition-duration: .8s; }

@media (max-width: 699px) {
  .cta__actions .btn,
  .final__actions .btn { flex: 1 1 100%; justify-content: center; }
  .final__media img { object-position: 58% 45%; }
}
@media (prefers-reduced-motion: reduce) {
  .final__media img { transform: none !important; }
}

@media (min-width: 700px) {
  .final__content { max-width: 58vw; }
}
@media (min-width: 1200px) {
  .final__content { max-width: 640px; }
}