/* An image-led hero: the product and its controls share a real layout box. */
#home.cinematic-hero {
  --hero-gutter: max(6vw, calc((100vw - 1440px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas: "copy product" "footer footer";
  align-items: center;
  column-gap: clamp(32px, 5vw, 90px);
  row-gap: 28px;
  height: auto;
  min-height: 100svh;
  max-height: none;
  padding: 126px var(--hero-gutter) 22px;
  background: linear-gradient(100deg, #09070cf5, #09070ca8);
  overflow: hidden;
  isolation: isolate;
}
#home .hero-copy { grid-area: copy; width: 100%; padding: 0; max-width: 680px; }
#home h1 { font-size: clamp(64px, 6.1vw, 104px); line-height: .98; letter-spacing: -.035em; }
#home h1 em { font-size: 1.19em; margin-top: 5px; padding-bottom: 15px; }
#home .hero-caption { margin-top: 28px; max-width: 360px; font-size: 14px; line-height: 1.85; color: #d4c1cd; }
#home .hero-actions { margin-top: 30px; gap: 14px 24px; flex-wrap: wrap; }
#home .hero-actions .button { gap: 28px; }
#home .film-link { background: none; }
#home .hero-product { grid-area: product; min-width: 0; width: min(100%, clamp(280px, calc((100svh - 278px) * .8), 520px)); justify-self: end; }
#home .hero-art {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  opacity: 1;
  mix-blend-mode: normal;
  background: #080507;
  overflow: hidden;
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0);
  outline-color: #dab1c23d;
}
/* The original landscape contains black negative space to the left.
   This fixed portrait window trims only that space and preserves full height. */
#home .hero-art img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 89% center; }
#home .hero-art::after { content: none; }
#home .hero-art .photo-light-frame__rim { opacity: .42; }
#home .hero-art .photo-light-frame__inner { opacity: .45; }
#home .hero-art .photo-light-frame__trail { opacity: .24; }
#home .hero-art .photo-light-frame__corners { opacity: .6; }
#home .hero-product-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 17px; }
#home .hero-product-caption p { display: flex; flex-direction: column; gap: 2px; }
#home .hero-product-caption strong { font-size: 12px; font-weight: 500; color: #f4dce7; }
#home .hero-product-caption p span { font-size: 10px; color: #c6a9b9; letter-spacing: .035em; }
#home .hero-product-caption .line-link { min-height: 44px; font-size: 11px; gap: 10px; border-bottom-color: #c88da85c; white-space: nowrap; }
#home .hero-product-caption .icon { width: 15px; height: 15px; }
#home .hero-footer { grid-area: footer; position: relative; inset: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid #deb6c525; font-size: 11px; letter-spacing: .07em; }
#home .constellation-invite { position: static; min-height: 44px; font-size: 11px; gap: 10px; letter-spacing: 0; }
#home .constellation-invite>span { width: 30px; height: 30px; }
#home .hero-footer a { min-height: 44px; gap: 12px; }
@media (min-width: 701px) and (max-width: 1000px) {
  #home.cinematic-hero { --hero-gutter: 5vw; column-gap: 24px; padding-top: 136px; min-height: 760px; }
  #home h1 { font-size: clamp(48px, 6.6vw, 66px); }
  #home .hero-copy { align-self: center; }
  #home .hero-caption { max-width: 280px; font-size: 13px; }
  #home .hero-actions { gap: 10px; flex-direction: column; align-items: flex-start; }
  #home .hero-product { width: 100%; }
  #home .hero-product-caption { gap: 8px; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  #home.cinematic-hero { --hero-gutter: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "caption" "product" "actions" "footer"; row-gap: 20px; min-height: 0; height: auto; padding: 112px var(--hero-gutter) 24px; background: linear-gradient(#09070ce6, #09070cbf); }
  #home .hero-copy { display: contents; text-align: center; }
  #home h1 { grid-area: heading; justify-self: center; font-size: clamp(43px, 11.8vw, 72px); line-height: .96; }
  #home h1 em { margin: 3px auto 0; font-size: 1.18em; padding-bottom: 9px; }
  #home .hero-caption { grid-area: caption; justify-self: center; font-size: 12px; line-height: 1.7; margin: 0; max-width: 320px; }
  #home .hero-actions { grid-area: actions; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 0; }
  #home .hero-actions .button { min-height: 48px; padding: 12px 17px; gap: 18px; font-size: 11px; }
  #home .hero-actions .film-link { font-size: 10px; gap: 6px; min-height: 44px; }
  #home .hero-product { width: min(100%, 390px); justify-self: center; }
  #home .hero-art { transform: none; }
  #home .hero-product-caption { padding-top: 12px; gap: 10px; text-align: left; }
  #home .hero-footer { padding-top: 12px; font-size: 10px; gap: 8px; }
  #home .hero-footer a { letter-spacing: .035em; gap: 8px; }
  #home .constellation-invite { font-size: 10px; gap: 8px; }
}
@media (max-width: 360px) {
  #home.cinematic-hero { --hero-gutter: 20px; padding-top: 108px; row-gap: 22px; }
  #home h1 { font-size: 42px; }
  #home .hero-actions { gap: 5px; }
  #home .hero-actions .button { width: 100%; }
  #home .hero-product-caption strong { font-size: 11px; }
  #home .hero-product-caption .line-link { font-size: 10px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { #home .hero-art { transform: none; } }