/* Short editorial notes sit in the film's negative space and follow its scroll. */
.hero-scene-note {
  --note-enter: 0;
  --note-tail: 0;
  --note-exit: 0;
  position: absolute;
  z-index: 2;
  top: 34%;
  left: max(var(--gutter), calc((100% - 1460px) / 2));
  width: min(38%, 530px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  color: #fff8f3;
  text-shadow: 0 2px 22px #0006;
  transform: translate3d(0, calc(var(--note-exit) * -18px), 0);
}
.hero-scene-note--plate {
  top: 21%;
  width: min(37%, 490px);
}
.hero-note-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: clamp(8px, 0.65vw, 10px);
  font-weight: 600;
  letter-spacing: 2.4px;
  transform: translate3d(calc((1 - var(--note-enter)) * -16px), 0, 0);
}
.hero-note-kicker > span {
  width: 26px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(var(--note-enter));
  transform-origin: left;
}
.hero-note-title {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(34px, 3.65vw, 66px);
  line-height: 1.16;
  letter-spacing: -2px;
}
.hero-scene-note--plate .hero-note-title {
  font-size: clamp(30px, 3vw, 54px);
}
.hero-note-title > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hero-note-title b,
.hero-note-title em {
  display: block;
  font-weight: 400;
  transform: translate3d(0, calc((1 - var(--note-enter)) * 112%), 0);
}
.hero-note-title em {
  font-family: var(--serif);
  color: #ef8588;
  transform: translate3d(0, calc((1 - var(--note-tail)) * 112%), 0);
}
.hero-note-rule {
  display: block;
  width: 74px;
  height: 1px;
  margin-top: 25px;
  background: linear-gradient(90deg, var(--accent), #ef515622);
  transform: scaleX(var(--note-tail));
  transform-origin: left;
}
.hero:not(.is-sequence) .hero-scene-note {
  display: none;
}
@media (max-width: 1100px) {
  .hero-scene-note {
    left: var(--gutter);
    width: 43%;
  }
  .hero-note-title {
    letter-spacing: -1.2px;
  }
  .hero-scene-note--plate {
    top: 22%;
  }
}
@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .hero-scene-note {
    display: none;
  }
}

/* Header uses the hero's primary Manrope family, with larger, clearer labels. */
.desktop-nav > a,
.header-actions .button,
.header-actions .quote-link,
.mobile-nav > a {
  font-family: var(--font);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.15px;
}
.desktop-nav > a {
  font-size: 13px;
}
.header-actions .button,
.header-actions .quote-link {
  font-size: 12px;
}

/* Independent alpha layers: no rectangular card, matte or crop around the products. */
.finale-card {
  border: 0;
  box-shadow: none;
}
.finale-card img {
  object-fit: contain;
  filter: drop-shadow(0 20px 22px #0008);
}
.finale-card figcaption {
  background: none;
  padding: 0;
  bottom: -16px;
  font-size: 8px;
  text-shadow: 0 2px 8px #000;
}
.finale-card.main-card img,
.shared-visual > img {
  /* Retain steam, feather its upper edge and let the product remain fully opaque. */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #0006 12%,
    #0009 35%,
    #000 57%
  );
}
.finale-card:last-child img {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #0005 10%,
    #0009 32%,
    #000 48%
  );
}
.shared-visual > img {
  object-fit: contain;
  object-position: center;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 24px 24px #0008);
}
.shared-visual::before {
  content: "";
  position: absolute;
  width: 76%;
  height: 16%;
  left: 12%;
  bottom: 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #0009, transparent 70%);
  transform: rotateX(55deg);
  pointer-events: none;
}
.origin-shutters {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 3;
  pointer-events: none;
}
.origin-shutters > span {
  flex: 1;
  background: var(--ink);
  border-right: 1px solid #ef515638;
}
@media (max-width: 1180px) {
  .header-actions .button,
  .header-actions .quote-link {
    font-size: 11.5px;
  }
}
@media (max-width: 560px) {
  .header-actions .button {
    font-size: 10.5px;
    padding-inline: 9px;
  }
}
@media (max-width: 360px) {
  .header-actions .button {
    font-size: 10px;
    padding-inline: 8px;
  }
  .site-header .brand-image,
  .site-header .brand-image img {
    width: 84px;
  }
}