/* Solid MHG blue with slow, monochrome movement from the existing brand mark. */
html{scrollbar-gutter:stable}
.hero-backdrop,.contact-sky{background:#0054f9}
.brand-field{position:absolute;inset:0;overflow:hidden;background:#0054f9;isolation:isolate}
.brand-outline{position:absolute;width:900px;height:900px;color:#fff;opacity:.045;animation:brand-drift 24s ease-in-out infinite alternate;transform-origin:center}
.brand-outline-one{left:-430px;top:8%;transform:rotate(-12deg)}
.brand-outline-two{right:-310px;top:-390px;width:850px;height:850px;opacity:.035;animation-delay:-12s}
.brand-light{position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 42%,#ffffff07 49%,transparent 56%);animation:brand-light 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes brand-drift{to{transform:translate(30px,35px) rotate(12deg)}}
@keyframes brand-light{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.motion .scroll-cue{color:#ffffffb3}.scroll-cue>span{border-color:#ffffffb3}.scroll-cue>span:after{background:#ffffffb3}
.phone-link{color:#ffffffd9}

/* One centred image at a time, with a progress bar directly underneath. */
.brand-intro{position:fixed;inset:0;background:#111318;color:#fff;z-index:2000;overflow:hidden;isolation:isolate;opacity:1;transition:opacity .28s ease;font-family:Switzer,Arial,sans-serif}
.brand-intro[hidden]{display:none}html.intro-pending .brand-intro[hidden]{display:block}
.brand-intro.intro-leaving{opacity:0;pointer-events:none}
body.intro-running{overflow:hidden}
#skip-intro{position:absolute;top:30px;right:40px;color:#a6adb9;display:flex;gap:20px;align-items:center;font-size:11px;padding:12px 0;z-index:2}
#skip-intro:hover{color:#fff}#skip-intro:focus-visible{outline-color:#fff}
.reel-centre{position:absolute;left:50%;top:50%;width:min(40vw,760px);transform:translate(-50%,-50%)}
.reel-stage{position:relative;width:100%;height:44vh;height:44svh;max-height:510px;display:grid;place-items:center}
.reel-frame{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center}
.reel-frame[hidden]{display:none}
.reel-frame img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:0}
.reel-frame.phone img,.reel-frame.transparent img{border-radius:0}
.reel-frame.kaishan img{clip-path:inset(4% 0 0);transform:translateY(-2%)}
.reel-loading{width:100%;margin-top:38px}
.reel-progress{width:100%;height:2px;background:#ffffff24;overflow:hidden;border-radius:0}
.reel-progress>span{display:block;width:100%;height:100%;background:#397aff;transform:scaleX(0);transform-origin:left;will-change:transform}
.reel-loading-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:10px;letter-spacing:.12em;color:#8e96a5}
#intro-percent{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#c0c7d3}
.intro-reveal .hero-copy>h1,.intro-reveal .hero-copy>.hero-description,.intro-reveal .hero-copy>.hero-actions{animation:hero-reveal .85s cubic-bezier(.2,.7,.2,1) both}
.intro-reveal .hero-copy>h1{animation-delay:.06s}.intro-reveal .hero-copy>.hero-description{animation-delay:.14s}.intro-reveal .hero-copy>.hero-actions{animation-delay:.2s}
@keyframes hero-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:850px){.reel-centre{width:60vw}}
@media(max-width:650px){.brand-outline-one{width:620px;height:620px;left:-450px;top:22%}.brand-outline-two{width:550px;height:550px;right:-380px;top:-200px}.reel-centre{width:78vw}.reel-stage{height:38vh;height:38svh;max-height:360px}.reel-loading{margin-top:30px}.reel-loading-meta{font-size:9px}#skip-intro{top:20px;right:25px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.brand-outline,.brand-light{animation:none}.brand-intro{transition:none}.intro-reveal .hero-copy>*{animation:none!important}}
.hero-copy h1:focus{outline:none}