/* Three continuous ribbons: encounter, beauty, and growth. */
.hero--motion{isolation:isolate;background:#071522;height:clamp(720px,93svh,1000px);min-height:720px}
.hero-art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 78% 40%,#15334a 0,#0c2133 34%,#071522 71%);pointer-events:none}
.hero-art canvas,.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-art canvas{opacity:0}
.hero-art.is-ready canvas{opacity:1}
.hero-art.is-ready .hero-poster{opacity:0}
.hero-art-wash{position:absolute;inset:0;background:linear-gradient(180deg,#07152299,transparent 24%),linear-gradient(90deg,rgba(7,21,34,.7),rgba(7,21,34,.1) 49%,transparent 70%),linear-gradient(0deg,rgba(7,21,34,.66),transparent 23%)}
.hero--motion::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:100px;height:1px;background:linear-gradient(90deg,#49617466,#65809533);pointer-events:none}
.hero--motion .hero-content{padding-top:clamp(225px,29vh,330px);z-index:2;pointer-events:none}
.hero--motion .hero-kicker{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.22em;margin-bottom:32px;color:#bfd2df}
.hero-kicker>span{width:5px;height:5px;background:#9ec8d8;display:block}
.hero--motion h1{font-size:clamp(46px,5.25vw,80px);font-weight:500;line-height:1.55;letter-spacing:.07em}
.hero--motion .hero-sub{margin-top:32px;font-size:14px;color:#c4d3dd;line-height:2.1;letter-spacing:.1em}
.hero--motion .hero-bottom{bottom:24px;z-index:3;min-height:50px;gap:30px;font-size:10px;letter-spacing:.14em}
.hero-bottom .hero-scroll{padding:12px 0;gap:16px;color:#d1e1e8;white-space:nowrap}
.hero-bottom .hero-scroll-line{height:30px;width:1px;background:#547285;position:relative;overflow:hidden;font-size:0}
.hero-scroll-line::after{content:"";position:absolute;top:0;width:1px;height:15px;background:#e4f2f7;animation:mp-scroll-line 2.8s ease-in-out infinite}
.hero-disciplines{display:flex;gap:35px;margin-left:auto;color:#809cab;font:10px/1.5 Arial,sans-serif;letter-spacing:.1em}
.hero-disciplines span{display:flex;gap:12px}.hero-disciplines b{font-weight:400;color:#c1d5de}
.hero-motion-toggle{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 14px;margin-left:30px;border:1px solid #50697b;background:transparent;color:#c8dce6;font:10px/1.4 Arial,sans-serif;letter-spacing:.1em;border-radius:0;transition:background .2s,border-color .2s}
.hero-motion-toggle[hidden]{display:none}.hero-motion-toggle:hover{background:#ffffff0a;border-color:#96b6c7}.motion-play{display:none}.hero-motion-toggle[data-paused="true"] .motion-play{display:block}.hero-motion-toggle[data-paused="true"] .motion-pause{display:none}
.hero--motion.is-paused .hero-scroll-line::after{animation-play-state:paused}
@keyframes mp-scroll-line{0%{transform:translateY(-17px)}65%,100%{transform:translateY(33px)}}
@media(min-width:1600px){.hero--motion .hero-content{padding-top:295px}}
@media(max-width:1100px){.hero--motion h1{font-size:clamp(44px,5.6vw,65px)}.hero-disciplines{gap:20px}.hero-motion-toggle{margin-left:5px}.hero--motion .hero-bottom{gap:20px}}
@media(max-width:700px){
 .hero--motion{height:clamp(690px,92svh,850px);min-height:690px}
 .hero--motion .hero-content{padding-top:214px}
 .hero--motion .hero-kicker{font-size:9px;gap:10px;letter-spacing:.16em;margin-bottom:25px}
 .hero--motion h1{font-size:clamp(36px,9.1vw,55px);line-height:1.65;letter-spacing:.04em}
 .hero--motion .hero-sub{font-size:12px;line-height:2.1;margin-top:25px;letter-spacing:.06em}
 .hero-art-wash{background:linear-gradient(90deg,rgba(7,21,34,.54),rgba(7,21,34,.08) 95%),linear-gradient(0deg,#071522aa,transparent 35%)}
 .hero--motion::after{bottom:84px}.hero--motion .hero-bottom{bottom:17px;font-size:8px;gap:8px}.hero-bottom .hero-scroll{gap:12px}.hero-disciplines{display:none}.hero-motion-toggle{font-size:9px;min-width:83px;margin-left:auto;padding-inline:11px}
 .hero-poster{object-position:67% center}
}
@media(prefers-reduced-motion:reduce){.hero-scroll-line::after{animation:none;transform:translateY(8px)}.hero-art canvas,.hero-art.is-ready .hero-poster{transition:none}}
/* A more expressive opening, with controls shared by the sculpture and its orbits. */
.hero--motion .hero-content{transform:translate3d(0,calc(var(--hero-scroll,0)*.13px),0)}
.hero--motion .hero-kicker{animation:hero-copy-in 1s .1s both}.hero--motion h1{animation:hero-copy-in 1.2s .25s both}.hero--motion .hero-sub{animation:hero-copy-in 1.2s .45s both}
.hero-orbit{position:absolute;right:8%;top:12%;width:43%;aspect-ratio:1;border:1px solid #94bedb24;border-radius:50%;transform:rotateX(64deg) rotateZ(-30deg);animation:hero-orbit-turn 25s linear infinite;pointer-events:none}.hero-orbit::after{content:'';width:5px;height:5px;background:#b7dfea;border-radius:50%;position:absolute;left:14%;top:14%;box-shadow:0 0 18px #b7dfea66}.hero-orbit--two{right:1%;top:20%;width:53%;border-color:#94bedb16;animation-direction:reverse;animation-duration:34s}.hero-orbit--two::after{width:3px;height:3px;background:#799aaa}
.hero--motion.is-paused .hero-orbit{animation-play-state:paused}
@keyframes hero-copy-in{from{opacity:0;transform:translateY(25px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes hero-orbit-turn{from{transform:rotateX(64deg) rotateZ(-30deg)}to{transform:rotateX(64deg) rotateZ(330deg)}}
@media(max-width:700px){.hero-orbit{top:24%;right:-45%;width:125%;opacity:.65}.hero-orbit--two{top:30%;right:-25%;width:135%}.hero--motion .hero-content{transform:none}}
@media(prefers-reduced-motion:reduce){.hero--motion .hero-content{transform:none}.hero-orbit{animation:none}.hero--motion h1,.hero--motion .hero-sub,.hero--motion .hero-kicker{animation:none}}