/* Hero lane: the photo and the moving light share one coordinate system, so pulses ride the photographed trails at every size. */
.hero-grid{position:relative;z-index:1;padding-bottom:115px;align-items:center}
.hero-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:#071c39}
.hero-atmosphere::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 18% 38%,#071c39b3,#071c3900 100%);pointer-events:none}
/* The nav floats over the hero so the lane runs all the way to the top of the page. */
.hero{padding-top:110px}
.hero-atmosphere::before{content:"";position:absolute;inset:0 0 auto;height:190px;background:linear-gradient(180deg,#071c39e6,#071c3900);z-index:1;pointer-events:none}
.hero .road-motion{position:absolute;inset:0;z-index:0;background:none;opacity:1;animation:none;transform:none;will-change:auto}
.hero .road-motion::after{content:none}
.hero .motion-toggle{background:#0c1c34;border-color:#9dbbc7}
.hero-stage{position:relative;min-width:0;width:85%;max-width:550px;justify-self:center;transform:none;padding:0}
.hero-stage .referral-preview{position:relative;padding:28px;border-color:#dceae9;box-shadow:0 25px 65px #0004,0 0 36px #86edd10b}
.hero-stage .preview-top{margin-bottom:30px}
.hero-stage .referral-preview h2{font-size:clamp(2rem,3vw,2.85rem)}
.hero-stage .record-email{margin-bottom:28px}
.hero-stage .relationship{padding:0 0 28px;gap:12px}
.hero-stage .relationship strong{font-size:.8rem}
.hero-stage .record-next{padding-top:22px}
.hero-stage .record-next h3{font-size:1.2rem;margin-bottom:10px}
.hero .relationship-rule{position:relative;background:#a9bed5}
.hero-journey{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px auto 0;color:#d3f9ef;font-size:.73rem;letter-spacing:.025em}
.hero-journey span{white-space:nowrap}.hero-journey i{width:24px;height:1px;background:#86edd164}
.lane-frame{position:absolute;inset:0;height:calc(100% + max(0px,(100vw - 1440px) * .16));background:url('assets/hero-scene.webp') right bottom/cover no-repeat}
.lane-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.lane-frame.is-live .lane-gl{opacity:1}
.hero .hero-note,.hero-journey{text-shadow:0 1px 14px #071c39,0 0 4px #071c39cc}
/* The introduction travels from Sarah to Jordan. */
.hero .relationship-rule::after{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:#2fd9a8;box-shadow:0 0 6px 2px rgba(134,237,209,.8);opacity:0;animation:rule-travel 4.8s cubic-bezier(.55,0,.35,1) infinite}
@keyframes rule-travel{0%{left:0;opacity:0}12%{opacity:1}78%{left:calc(100% - 5px);opacity:1}92%,100%{left:calc(100% - 5px);opacity:0}}
.hero-stage .relationship .initials.blue{animation:arrive 4.8s ease-out infinite}
@keyframes arrive{0%,74%{box-shadow:0 0 0 0 rgba(47,217,168,0)}80%{box-shadow:0 0 0 4px rgba(47,217,168,.35)}100%{box-shadow:0 0 0 12px rgba(47,217,168,0)}}
@media(max-width:1100px) and (min-width:801px){.hero-stage{width:95%}.hero-stage .referral-preview{padding:23px}.hero-stage .initials{width:48px;height:48px}.hero .relationship-rule{margin-top:24px}.hero-stage .relationship strong{font-size:.72rem}.hero-stage .relationship small{font-size:.7rem}}
@media(max-width:800px){.hero{padding-top:84px}.hero-grid{padding-bottom:140px}.hero-stage{width:100%;max-width:540px;margin:auto}.hero-stage .referral-preview{padding:28px}.hero-stage .referral-preview h2{font-size:2.6rem}.hero-journey{margin-top:22px}.lane-frame{inset:auto -8% -70px auto;width:190%;height:auto;aspect-ratio:3/2;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);mask-image:linear-gradient(to bottom,transparent,#000 22%)}.hero-atmosphere{background:radial-gradient(90% 45% at 100% 30%,#0f3a5c80,transparent 70%),#071c39}.hero-atmosphere::after{content:none}}
@media(max-width:430px){.hero-stage .referral-preview{padding:23px 20px}.hero-stage .referral-preview h2{font-size:2.15rem}.hero-journey{gap:8px;font-size:.67rem}.hero-journey i{width:20px}.hero-stage .relationship strong{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.lane-gl{display:none}.hero .road-motion{animation:none;transform:none}.hero-stage{transform:none;transition:none}}