/* Scoped replacement hero; the original pill navigation and map retain their styles. */
@font-face{font-family:Outfit;src:url(assets/outfit-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:'Work Sans';src:url(assets/work-sans-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:'Work Sans';src:url(assets/work-sans-500.ttf);font-weight:500;font-display:swap}
.intro-hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#e3f2fc;color:#2d2d2d;font-family:'Work Sans',sans-serif}
.intro-beach{position:absolute;left:var(--ox,0);top:var(--oy,0);width:var(--iw,100%);height:var(--ih,100%);max-width:none;object-fit:cover}
.intro-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,240,232,.96),rgba(245,240,232,.86) 28%,rgba(245,240,232,.5) 45%,rgba(245,240,232,0) 64%)}
.intro-inbox{position:absolute;left:var(--sl);top:var(--st);width:var(--sw);height:var(--sh);overflow:hidden;background:#fbf9f5}
.intro-inbox-inner{width:400px;height:233px;transform:scale(var(--ss));transform-origin:0 0;background:#fbf9f5}
.intro-inbox-bar{height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#e3f2fc;font-size:11px}
.intro-inbox-bar span{background:#fcefc6;border-radius:10px;font-size:9px;padding:2px 7px}
.intro-copy{position:relative;display:flex;flex-direction:column;justify-content:center;height:100%;width:calc(min(37rem,45vw) + 4.6vw);padding:85px 0 80px 4.6vw}
.intro-kicker{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:30px;display:flex;align-items:center;gap:8px}
.intro-kicker:before{content:'';width:4px;height:4px;border-radius:50%;background:#e85a4f}
.intro-copy h1{font:400 clamp(48px,5.1vw,80px)/1.03 Outfit,sans-serif;letter-spacing:-.045em;color:#2d2d2d;text-wrap:initial}
.intro-lede{font-size:15px;line-height:1.8;max-width:400px;margin:28px 0 32px;color:#555555}
.intro-actions{display:flex;gap:12px;flex-wrap:wrap}
.intro-actions .btn{font:400 13px/1.3 'Work Sans',sans-serif;min-height:50px;border-radius:6px;padding:14px 21px;gap:12px;border-width:1px;box-shadow:none}
.intro-primary{background:#e85a4f;color:#2d2d2d}.intro-primary:hover{background:#d24b41;color:#2d2d2d}
.intro-secondary{background:#ffffff91;border-color:#8a8580;color:#2d2d2d}.intro-secondary:hover{background:white;color:#2d2d2d}
.intro-scroll{position:absolute;bottom:25px;left:4.6vw;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
html.motion .scene{height:490svh}
.scene .hero-copy,.scene .floats,.scene .frame{display:none!important}
html:not(.motion) .scene .hero{display:block;min-height:70svh;padding:0}
html:not(.motion) .scene .hero-window{height:70svh}
html:not(.motion) .scene .window{border-radius:0}
@media(max-aspect-ratio:9/10){
.intro-hero{min-height:740px;background:linear-gradient(#f5f0e8,#e3f2fc)}
.intro-scrim{background:linear-gradient(#f5f0e8 0%,rgba(245,240,232,.91) 35%,rgba(245,240,232,0) 64%)}
.intro-copy{width:100%;padding:110px 24px 0;height:auto;justify-content:flex-start}
.intro-copy h1{font-size:clamp(40px,9.6vw,64px);max-width:540px}
.intro-kicker{font-size:9px;margin-bottom:20px}
.intro-lede{font-size:14px;line-height:1.7;margin:20px 0 24px;max-width:450px}
.intro-actions{gap:10px}.intro-actions .btn{font-size:12px;padding:12px 14px;min-height:46px}
.intro-scroll{bottom:16px;left:24px}
}
@media(max-height:560px) and (min-aspect-ratio:9/10){.intro-hero{min-height:480px}.intro-copy{padding-top:100px}.intro-copy h1{font-size:36px}.intro-kicker{margin-bottom:12px}.intro-lede{font-size:13px;line-height:1.5;margin:16px 0}.intro-actions .btn{padding:10px 12px;font-size:12px}.intro-scroll{display:none}}
@media(max-aspect-ratio:9/10){.intro-beach{mask-image:linear-gradient(to bottom,transparent,#000 20%)}.intro-hero{background:#f5f0e8}}
/* Continuous opening: intro copy overlays the same sticky camera used by the story. */
html.motion .scene{height:430svh}
html.motion .intro-hero{position:absolute;inset:0;z-index:5;height:100%;min-height:0;background:transparent;pointer-events:none}
html.motion .intro-actions{pointer-events:auto}
html.motion .intro-beach{display:none}
html.motion .window{background:#c2c9cc}
html.motion .intro-copy{pointer-events:none}