/* Shared full-viewport sizing for the hero and future sections. */
.viewport-section{height:100vh;height:100dvh;min-height:0;max-height:none;width:100%;position:relative;box-sizing:border-box}
.hero{isolation:isolate;overflow:hidden;background:transparent;padding-inline:var(--gutter)}
.hero-topline{position:absolute;inset:calc(5rem + env(safe-area-inset-top)) var(--gutter) auto;display:flex;justify-content:space-between;font-size:.53rem;letter-spacing:.2em;color:var(--muted);animation:arrive 1s .7s both}.topline-right{display:none}
.backdrop-word{position:absolute;z-index:1;top:42%;left:50%;font-size:23vw;line-height:1;font-weight:900;letter-spacing:-.07em;white-space:nowrap;color:var(--word);transform:translateX(calc(-50% + var(--px,0px)));animation:arrive 1.2s both}

.portrait{position:absolute;z-index:3;height:57%;width:110%;left:50%;bottom:6%;transform:translateX(-50%);mask-image:linear-gradient(to bottom,var(--white) 55%,transparent 100%);animation:portrait-in 1.3s .15s both;pointer-events:none}.portrait img{width:100%;height:100%;object-fit:contain;object-position:center top}
.hero-copy{position:absolute;z-index:4;top:17%;left:var(--gutter);right:var(--gutter);animation:copy-in 1s .4s both}.eyebrow{display:flex;align-items:center;gap:.65rem;font-size:clamp(.43rem,1.7vw,.6rem);font-weight:500;letter-spacing:.15em;color:var(--muted);margin-bottom:clamp(.65rem,2vh,1.5rem)}.eyebrow>span{width:1.3rem;height:1px;background:var(--accent);flex-shrink:0}
h1{font-size:clamp(2.5rem,min(14vw,9dvh),5.4rem);line-height:.9;font-weight:900;letter-spacing:-.06em;background:var(--heading);background-clip:text;color:transparent}h1>span{display:block;font-size:.83em;margin-top:.1em}.title-dot{color:var(--accent)}.tagline{font-size:clamp(.75rem,1.6dvh,.95rem);font-weight:400;line-height:1.5;margin-top:clamp(.6rem,1.8vh,1.3rem)}.hero-link{display:inline-flex;align-items:center;gap:1rem;min-height:var(--touch);font-size:.46rem;font-weight:600;letter-spacing:.12em;margin-top:.2rem;border-bottom:1px solid var(--border)}.hero-link span{font-size:1rem;color:var(--accent)}.hero-link:hover{color:var(--accent)}
.professional{position:absolute;z-index:4;left:var(--gutter);bottom:13%;animation:arrive 1s .8s both}.detail-line{display:block;width:2.5rem;height:1px;background:var(--accent);margin-bottom:.65rem}.professional p{font-size:.55rem;line-height:1.9;letter-spacing:.16em;font-weight:600}.professional p span{color:var(--muted);font-size:.5rem}.professional-note{display:block;color:var(--muted);font-size:.6rem;margin-top:.4rem}
.hero-bottom{position:absolute;z-index:10;inset:auto var(--gutter) max(.75rem,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:.7rem;min-height:2.8rem;animation:arrive 1s .8s both}.edition{font-size:.43rem;letter-spacing:.1em;color:var(--muted)}.edition>span{display:block;margin-top:.3rem}.explore{position:absolute;left:50%;transform:translateX(-50%);bottom:2.6rem;min-height:var(--touch);display:flex;align-items:center;gap:.7rem;font-size:.46rem;letter-spacing:.16em;white-space:nowrap}.arrow{font-size:1rem;color:var(--accent);animation:scroll-cue 2s infinite}.mouse,.bottom-note{display:none}
@keyframes arrive{from{opacity:0}to{opacity:1}}@keyframes portrait-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@keyframes copy-in{from{opacity:0;translate:-20px 0}to{opacity:1;translate:0 0}}@keyframes scroll-cue{0%,100%{translate:0 -3px}50%{translate:0 3px}}
@media(min-width:640px){.hero-copy{top:22%;right:auto;max-width:55%}h1{font-size:clamp(4rem,min(10.5vw,15dvh),10rem)}.portrait{height:78%;width:65%;left:50%;bottom:2%}.professional{left:auto;right:var(--gutter);bottom:15%}.topline-right{display:block}.hero-link{font-size:.5rem}.eyebrow{font-size:.53rem}.backdrop-word{font-size:19vw;top:35%}.explore{bottom:0}.edition>span{display:inline;margin-left:.6rem}.hero-bottom{bottom:1.3rem}.professional-note{font-size:.62rem}}
@media(min-width:768px){.hero-copy{top:28%}.portrait{height:81%}.tagline{font-size:.9rem}.professional{bottom:20%}.hero-topline{top:6.5rem}}
@media(min-width:1024px){.hero-copy{top:32%}.portrait{height:85%;width:54%;left:50%;bottom:0}.professional{bottom:24%;max-width:21%}.professional p{font-size:.6rem}.hero-bottom{padding-top:1.2rem;bottom:1.6rem}.mouse{display:block;width:16px;height:24px;border:1px solid var(--muted);border-radius:10px;position:relative}.mouse::after{content:'';position:absolute;top:5px;left:6px;width:2px;height:5px;background:var(--accent);animation:scroll-cue 2s infinite}.bottom-note{display:block;font-size:.45rem;letter-spacing:.13em;color:var(--muted)}.hero-link{margin-top:1rem}.hero-topline{top:7.5rem}}
@media(min-width:1280px){.professional p{font-size:.65rem}.professional p span{font-size:.55rem}.eyebrow{font-size:.6rem}.tagline{font-size:1rem}}
@media(min-width:1536px){.hero-copy{max-width:45%}}
@media(max-height:600px) and (max-width:639px){.hero-copy{top:21%}.hero-topline{top:4.5rem}.professional-note{display:none}.professional{bottom:15%}.portrait{height:59%;left:50%;bottom:4%}.eyebrow{margin-bottom:.5rem}.tagline{margin-top:.45rem}.professional p{font-size:.5rem}.detail-line{margin-bottom:.35rem}.explore{left:50%;right:auto;transform:translateX(-50%);bottom:2.6rem}}
@media(max-height:540px) and (min-width:640px){.hero-topline{top:4.5rem}.hero-copy{top:26%}.eyebrow{margin-bottom:.5rem}.tagline{margin-top:.5rem;font-size:.75rem}.hero-link{margin-top:0}.professional{bottom:22%}.professional-note{display:none}.hero-bottom{bottom:.5rem}}

/* Reference subtleBounce: the entire cue floats 8px over a 2s cycle. */
.explore{animation:explore-levitation 2s ease-in-out infinite;transition:opacity var(--duration)}
.explore:hover{opacity:1}
.explore .arrow{animation:none}
@keyframes explore-levitation{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
/* Independent wheel motion, matching the reference's 1.8s fade/travel. */
.mouse::after{animation:explore-wheel 1.8s ease-in-out infinite}
@keyframes explore-wheel{0%{top:4px;opacity:0}30%{opacity:1}100%{top:13px;opacity:0}}