@layer sections {
  .hero { position: relative; display: grid; min-height: max(100svh, 40rem); isolation: isolate; overflow: clip; background: var(--c-ink); color: var(--c-cream); }

  /* ---- media stack: photo → gold dust (WebGL) → shade → rays ---- */
  .hero__media { position: absolute; inset: 0; z-index: 0; }
  .hero__img-wrap { position: absolute; inset: -5% 0; }
  .hero__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 40%); transform: scale(1.14); animation: hero-settle 2.8s var(--ease-out) 0.1s forwards; }
  html.is-intro .hero__img { animation-play-state: paused; }
  @keyframes hero-settle { to { transform: scale(1); } }
  .hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity 2s var(--ease-out); }
  .hero__gl.is-live { opacity: 1; }
  .hero__shade {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to bottom, rgb(12 8 6 / 0.7) 0, rgb(12 8 6 / 0) 24%),
      linear-gradient(to top, var(--c-ink) 0, rgb(12 8 6 / 0.82) 15%, rgb(12 8 6 / 0) 50%),
      linear-gradient(to right, rgb(12 8 6 / calc(var(--hero-overlay, 0.5) * 1.35)) 0, rgb(12 8 6 / calc(var(--hero-overlay, 0.5) * 0.45)) 38%, transparent 62%);
  }
  .hero__rays { mix-blend-mode: screen; opacity: 0.9; }

  /* honey drip on the default photo (positions are set by motion.js from the data-* percentages) */
  .hero__drip { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 1; --dy: 80px; opacity: 0; }
  .hero__drip.is-placed { opacity: 1; }
  .hero__drip i {
    position: absolute; left: -4px; top: -3px; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 36% 30%, #fff3c9, #f4b93f 42%, #b4601a 100%); box-shadow: 0 0 14px 2px rgb(255 190 80 / 0.75);
    transform-origin: 50% 0; transform: scale(0); animation: drip 4.2s cubic-bezier(0.5, 0, 0.75, 0.2) infinite 2.6s;
  }
  .hero__drip::after {
    content: ''; position: absolute; left: -18px; top: var(--dy); width: 36px; height: 9px; margin-top: -3px; border-radius: 50%; border: 1.5px solid rgb(255 214 130 / 0.9);
    transform: scale(0.2); opacity: 0; animation: splash 4.2s ease-out infinite 2.6s;
  }
  @keyframes drip {
    0% { transform: scale(0); opacity: 1; }
    18% { transform: scale(1) scaleY(1.05); }
    30% { transform: scale(1, 1.55) translateY(3px); }
    52% { transform: scale(0.85, 1.4) translateY(var(--dy)); opacity: 1; }
    54% { transform: scale(0.5, 0.3) translateY(var(--dy)); opacity: 0; }
    100% { transform: scale(0); opacity: 0; }
  }
  @keyframes splash {
    0%, 52% { transform: scale(0.2); opacity: 0; }
    54% { opacity: 1; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { opacity: 0; }
  }

  /* ---- layout ---- */
  .hero__inner {
    position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr; min-height: inherit;
    padding-top: calc(var(--header-h) + clamp(1.25rem, 5vh, 3.5rem)); padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
  }
  .hero__top { display: grid; gap: 1.4rem; justify-items: start; margin-left: clamp(0px, 29vw, 560px); }
  .hero__title { font-size: clamp(3rem, 0.9rem + 6.2vw, 8.25rem); max-width: 13ch; text-shadow: 0 6px 50px rgb(0 0 0 / 0.5); }
  .hero__eyebrow { color: var(--c-honey); }
  .hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; align-self: end; gap: 2rem; padding-top: 2rem; }
  .hero__copy { display: grid; gap: 1.6rem; max-width: 34rem; }
  .hero__lead { color: color-mix(in oklab, var(--c-cream) 88%, transparent); font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
  .hero__delivery { display: inline-flex; align-items: center; gap: 0.8rem; width: fit-content; padding: 0.7rem 1.1rem 0.7rem 0.95rem; border-radius: var(--radius-pill); background: rgb(12 8 6 / 0.55); border: 1px solid rgb(255 255 255 / 0.14); backdrop-filter: blur(10px); font-size: var(--fs-s); line-height: 1.3; }
  .hero__delivery strong { font-weight: 600; }

  /* rotating seal */
  .hero__seal { width: clamp(7.5rem, 11vw, 10.5rem); aspect-ratio: 1; color: var(--c-cream); flex: none; filter: drop-shadow(0 12px 24px rgb(0 0 0 / 0.4)); }
  .hero__seal-svg { width: 100%; height: 100%; overflow: visible; }
  .hero__seal-ring { transform-origin: 70px 70px; animation: spin 26s linear infinite; }
  .hero__seal text { font-family: var(--font-body); font-size: 9.6px; font-weight: 700; letter-spacing: 0.16em; fill: currentColor; }
  .hero__seal-hex { fill: var(--c-gold); stroke: var(--c-cream); stroke-width: 1; stroke-linejoin: round; }
  .hero__seal-year { font-family: var(--font-display); font-size: 21px; font-weight: 700; fill: var(--c-ink); letter-spacing: -0.02em; }
  @media (prefers-reduced-motion: reduce) { .hero__seal-ring { animation: none; } }

  /* scroll cue */
  .hero__scroll { position: absolute; left: 50%; bottom: 1rem; translate: -50% 0; display: grid; justify-items: center; gap: 0.6rem; color: color-mix(in oklab, var(--c-cream) 75%, transparent); font-size: var(--fs-2xs); letter-spacing: 0.3em; text-transform: uppercase; transition: color var(--dur-s); }
  .hero__scroll:hover { color: var(--c-gold); }
  .hero__scroll-line { position: relative; width: 1px; height: 3.2rem; background: color-mix(in oklab, var(--c-cream) 25%, transparent); overflow: hidden; }
  .hero__scroll-line::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 40%; background: var(--c-gold); animation: scroll-cue 2.2s var(--ease-in-out) infinite; }
  @keyframes scroll-cue { 0% { transform: translateY(-110%); } 70%, 100% { transform: translateY(260%); } }
  @media (prefers-reduced-motion: reduce) { .hero__scroll-line::after { animation: none; } }

  @media (max-width: 989px) {
    .hero__top { margin-left: 0; }
    .hero__title { max-width: 11ch; }
    .hero__scroll { display: none; }
  }
  @media (max-width: 749px) {
    .hero__seal { display: none; }
    .hero__bottom { display: block; }
    .hero__ctas .btn { flex: 1 1 100%; }
    .hero__shade { background: linear-gradient(to bottom, rgb(12 8 6 / 0.72) 0, rgb(12 8 6 / 0.15) 32%, rgb(12 8 6 / 0.3) 52%, var(--c-ink) 96%); }
  }
}