/* ============================================================
   HERO
   ============================================================ */
.hero { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100dvh; min-height: 600px; overflow: hidden; background: var(--cream); color: var(--white); }
.hero-media { position: absolute; inset: 0; will-change: clip-path; background: var(--plum); overflow: hidden; }
.hero-media-inner { position: absolute; inset: 0; will-change: transform; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(253, 231, 239, 0.34), transparent 55%),
    radial-gradient(90% 80% at 12% 100%, rgba(201, 42, 98, 0.45), transparent 60%),
    repeating-linear-gradient(135deg, #4a3563 0 14px, #3f2b57 14px 28px),
    var(--plum);
}
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(42, 27, 61, 0.5) 0%, rgba(42, 27, 61, 0) 24%),
    linear-gradient(0deg, rgba(42, 27, 61, 0.78) 0%, rgba(42, 27, 61, 0.28) 42%, rgba(42, 27, 61, 0) 70%);
}
.hero-fade { position: absolute; inset: 0; background: var(--plum); opacity: 0; pointer-events: none; }
.hero-slot-note {
  position: absolute; top: calc(var(--nav-h) + 16px); right: var(--page-x); font: 400 11px/1.3 var(--font-body); color: rgba(255, 255, 255, 0.55);
}
.hero-content {
  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(52px, 8vh, 84px); will-change: transform, opacity;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); column-gap: 48px; align-items: end; }
.hero-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.92;
  font-size: clamp(56px, 9.5vw, 148px);
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .word { display: inline-block; will-change: transform; }
.hero-title .accent { color: var(--blush); }
.hero-side { display: flex; flex-direction: column; gap: 28px; padding-bottom: 14px; }
.hero-sub { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); text-wrap: pretty; max-width: 44ch; }
.hero .suggest { margin-top: 14px; gap: 8px; }
.hero .chip { height: 36px; padding: 0 14px; font-size: 13px; color: var(--white); border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); }
.hero .chip[aria-pressed="true"] { background: var(--white); color: var(--plum); border-color: var(--white); }
@media (hover: hover) and (pointer: fine) { .hero .chip:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, 0.2); border-color: var(--white); } }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-foot {
  margin-top: clamp(28px, 5vh, 52px); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.28);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.85);
}
.hero-caption { display: flex; align-items: center; gap: 8px; }
.hero-caption .icon { font-size: 18px; }
.scroll-cue { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.scroll-cue-line { position: relative; width: 1px; height: 36px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.scroll-cue-line::after { content: ""; position: absolute; inset: 0; background: var(--white); animation: cue 2s var(--ease-cine) infinite; transform: translateY(-100%); }
@keyframes cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }

@media (max-width: 899px) {
  .hero-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .hero-side { gap: 20px; padding-bottom: 0; }
  .hero-sub { font-size: 16px; }
  .hero-title { font-size: clamp(52px, 17vw, 96px); }
}
@media (max-width: 599px) {
  .hero-foot .scroll-cue span { display: none; }
  .hero-slot-note { display: none; }
}
@media (max-height: 640px) and (min-width: 900px) { .hero-title { font-size: clamp(48px, 7.5vw, 104px); } }