/* Scroll hero: dark "hooked" strips -> device spins, one tap -> warm "free" strips.
   Driven by hero.js (scroll progress 0..1 across the tall section; sticky stage). */
.sh {
  --sh-night: #0b1020; --sh-cream: #F2F0EA; --sh-pine: #3F4021; --sh-gold: #F4CE8F;
  --sh-row: min(16.5svh, 46vw); --sh-gap: 10px;
  --sh-top: calc(max(12px, env(safe-area-inset-top)) + 80px);      /* below the header pill */
  --sh-strips: max(256px, 30svh);
  --sh-serif: Fraunces, Georgia, serif;
  --sh-sans: Inter, var(--font);
}
.hero.sh { display: block; height: 400vh; min-height: 0; overflow: visible; background: var(--sh-night); align-items: initial; }
.sh-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--sh-bg, var(--sh-night)); }

/* three strips of scenes */
.sh-strips { position: absolute; left: 0; right: 0; top: var(--sh-strips); display: flex; flex-direction: column; gap: var(--sh-gap); }
.sh-row { position: relative; height: var(--sh-row); }
.sh-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; gap: var(--sh-gap); will-change: transform; }
.sh-card { position: relative; height: 100%; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; flex: none; background: #141a33; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.sh-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.sh-card .n { filter: brightness(1.18) saturate(1.1); }
.sh-card .d { opacity: var(--day, 0); }
.sh-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); pointer-events: none; }

/* pool behind the device so it reads over busy pictures */
.sh-halo { position: absolute; left: 50%; top: var(--dev-y, 56%); width: 120vmin; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo, rgba(8,11,24,.92)) 0%, var(--halo-mid, rgba(8,11,24,.55)) 32%, transparent 62%); }
.sh-device { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.sh-ripple { position: absolute; z-index: 3; left: 50%; top: var(--dev-y, 56%); width: 0; height: 0; pointer-events: none; }
.sh-ripple i { position: absolute; left: 0; top: 0; width: 140vmax; height: 140vmax; border-radius: 50%; border: 3px solid rgba(255,238,205,.9); box-shadow: 0 0 30px rgba(255,220,170,.45); transform: translate(-50%,-50%) scale(0); opacity: 0; }

/* words */
.sh-cap { position: absolute; z-index: 4; left: 0; right: 0; top: var(--sh-top); padding: 0 22px; text-align: center; pointer-events: none; }
.sh-big { margin: 0 auto; font: 600 clamp(40px, min(6vw, 8svh), 72px)/1.05 var(--sh-serif); letter-spacing: -.025em; color: var(--sh-cream); text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.sh-big em { font-style: normal; color: var(--sh-gold); }
.sh-big.sh-tap { font-size: clamp(36px, min(4.7vw, 6.2svh), 56px); }
.hero.sh h1 { margin: 0 auto; max-width: none; font: 600 clamp(44px, min(6.7vw, 8.2svh), 80px)/1.05 var(--sh-serif); letter-spacing: -.025em; color: var(--sh-pine); text-wrap: balance; }
#shCap2, #shCap3, .sh-end { opacity: 0; }

.sh-end { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); padding: 0 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: none; }
.sh-line { max-width: 34ch; margin: 0; font: 700 clamp(20px, 2.1vw, 28px)/1.3 var(--sh-sans); color: var(--sh-pine); text-wrap: balance; }
.sh-line img { display: inline; height: .82em; width: auto; vertical-align: -.1em; border-radius: 0; }
.sh-cta { display: inline-flex; align-items: center; justify-content: center; height: 58px; padding: 0 34px; border-radius: 999px; background: var(--sh-pine); color: var(--sh-cream); font: 700 clamp(18px, 1.5vw, 20px)/1 var(--sh-sans); text-decoration: none; }
.sh-cta:hover { background: #2f3018; }

@media (min-aspect-ratio: 1/1) {
  .sh { --sh-row: 15.5svh; --sh-gap: 14px; --sh-strips: max(316px, 35svh); --sh-top: 104px; }
  .sh-card { border-radius: 18px; }
  .sh-line { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.sh { height: 260vh; }
}