*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#06162c;color:#fff;font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
header{height:110px;display:flex;align-items:center;justify-content:space-between;margin:0 6%;border-bottom:1px solid #ffffff25;position:relative;z-index:3}
.logo{width:165px}
nav{display:flex;gap:34px;align-items:center;font-size:12px}
nav a:last-child{border-bottom:1px solid #5ce5f0;padding:12px 0}
.hero{position:relative;min-height:800px;overflow:hidden;background:radial-gradient(ellipse at 85% 65%,#064b79 0,transparent 47%),#06162c}
.hero-inner{max-width:1440px;margin:auto;padding:60px 6% 75px;display:grid;grid-template-columns:1.05fr 1fr;gap:25px;align-items:center;position:relative;z-index:2}
.eyebrow{text-transform:uppercase;letter-spacing:2.3px;font-size:10px;color:#72e4ec;font-weight:bold;margin:0 0 28px}
h1{font-size:clamp(56px,6.25vw,92px);line-height:.99;letter-spacing:-5px;font-weight:600;margin:0;max-width:760px}
h1 em{font-family:Georgia,serif;font-weight:normal;color:#64e8ed;letter-spacing:-5px}
h1 span{display:block}
p.intro{font-size:18px;line-height:1.65;max-width:390px;color:#bfcedd;margin:30px 0}
.stores{display:flex;gap:12px;flex-wrap:wrap}
.store{display:flex;flex-direction:column;justify-content:center;background:#f5fbff;color:#07172d;min-width:160px;padding:11px 22px;border-radius:6px;transition:transform .25s}
.store:hover{transform:translateY(-3px);background:#7de7ee}
.store small{font-size:9px;letter-spacing:1px}
.store b{font-size:18px;margin-top:3px}
.availability{font-size:11px;color:#a5b9cc;margin-top:17px}
.visual{position:relative;height:650px;display:flex;align-items:center;justify-content:center}
.phone{position:relative;width:263px;flex-shrink:0;padding:7px;border:1px solid #6a8295;border-radius:32px;background:#0b0c13;box-shadow:18px 28px 70px #0007;transform:rotate(5deg);animation:float 9s ease-in-out infinite;z-index:2}
.phone video{width:100%;display:block;border-radius:25px}
.stage-word{position:absolute;color:#ffffff0b;font-size:112px;font-weight:bold;letter-spacing:-7px;transform:rotate(-90deg);white-space:nowrap;left:-155px;top:250px}
.annotation{position:absolute;z-index:3;color:#e2fbff;font:italic 25px Georgia,serif;right:-14px;top:8px;transform:none}
.annotation:after{content:'';display:block;width:60px;height:40px;border-right:1px solid #5be0ef;border-bottom:1px solid #5be0ef;border-radius:0 0 35px 0;margin:12px 0 0 50px}
.video-control{position:absolute;bottom:0;right:0;background:transparent;border:1px solid #7b9ca6;color:white;border-radius:30px;padding:10px 16px;font-size:11px}
.ribbon{position:absolute;width:1000px;height:330px;border:1px solid #33dbef80;border-radius:50%;transform:rotate(-33deg);right:-280px;top:300px;box-shadow:0 -24px 70px #008dff50,inset 0 22px 55px #0cddeb33;animation:flow 14s ease-in-out infinite;pointer-events:none}
.ribbon.second{top:470px;right:-170px;width:950px;opacity:.45;animation-delay:-7s}
.bottom-line{display:flex;justify-content:space-between;padding:0 6% 24px;color:#afc4d9;position:relative;z-index:2;font-size:10px;letter-spacing:1px}
.ticker{overflow:hidden;background:#64e2e7;color:#052541;padding:24px 0;white-space:nowrap}
.ticker-inner{display:flex;width:max-content;gap:0;animation:marquee var(--ticker-duration,32s) linear infinite;font-family:Georgia,serif;font-size:29px;font-style:italic}
.ticker-group{display:flex;flex:none;align-items:center;gap:55px;padding-right:55px}
.ticker-group span{flex:none}
.ticker span:after{content:'·';padding-left:55px}
.story{background:#f2f6f8;color:#102239;padding:100px 7%;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.story .eyebrow{color:#116784}
.story h2{font-size:clamp(40px,4.3vw,63px);line-height:1.06;letter-spacing:-2px;margin:0 0 28px}
.story h2 em{font-family:Georgia,serif;color:#006d89;font-weight:normal}
.story p{font-size:17px;line-height:1.65;color:#526475;max-width:480px}
.story .quote{font-size:23px;color:#112e45;line-height:1.4;margin:30px 0}
.details{border-top:1px solid #b5c6cc}
.detail{border-bottom:1px solid #b5c6cc;padding:25px 0}
.detail h3{font-size:23px;font-weight:500;margin:0 0 9px}
.detail p{font-size:14px;margin:0;line-height:1.6}
.closing{position:relative;overflow:hidden;padding:90px 7% 70px;background:radial-gradient(ellipse at 0 110%,#007caa,transparent 70%),#06162c}
.closing h2{font-size:clamp(44px,5vw,70px);font-weight:500;letter-spacing:-3px;margin:0 0 30px;max-width:820px}
.closing h2 em{font-family:Georgia,serif;color:#70e9ec;font-weight:normal}
footer{padding:30px 7%;display:flex;justify-content:space-between;gap:25px;border-top:1px solid #ffffff25;font-size:11px;color:#b3c7d5;line-height:1.8}
footer .links{display:flex;flex-wrap:wrap;gap:18px}
.reveal{transition:opacity .8s,transform .8s}
.js .reveal:not(.visible){opacity:0;transform:translateY(25px)}
body.paused *{animation-play-state:paused!important}
@keyframes flow{50%{transform:translate(-35px,-25px) rotate(-25deg)}
}
@keyframes float{50%{transform:translateY(-12px) rotate(3deg)}
}
@keyframes marquee{to{transform:translateX(-50%)}
}
@media(max-width:760px){header{height:85px}
.logo{width:135px}
nav{gap:20px}
nav .desktop{display:none}
.hero-inner{padding-top:40px;grid-template-columns:1fr;gap:0}
h1{font-size:54px;letter-spacing:-3px}
.stores{flex-wrap:nowrap}
.store{min-width:0;flex:1;padding:11px 14px}
.store b{font-size:17px}
h1 em{letter-spacing:-3.5px}
.intro{margin:25px 0!important}
.visual{height:590px;margin-top:25px}
.phone{width:225px}
.annotation{right:0;top:0;font-size:22px}
.stage-word{font-size:90px;left:-110px;top:230px}
.video-control{bottom:0}
.ribbon{top:650px;right:-440px}
.ribbon.second{top:800px;right:-420px}
.story{padding:65px 7%;grid-template-columns:1fr;gap:35px}
.closing{padding:65px 7%}
.closing h2{letter-spacing:-2px}
footer{flex-direction:column;padding-bottom:65px}
.bottom-line{font-size:8px}
.ticker-inner{font-size:24px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}
.js .reveal:not(.visible){opacity:1;transform:none}
}

.promo{margin:0;perspective:1200px}
.promo img{width:100%;display:block;box-shadow:0 28px 55px #082b4a30;transform:rotate(-2deg);transition:transform .5s}
.promo:hover img{transform:rotate(0)}
.promo figcaption{font-size:11px;color:#526475;margin-top:24px;text-align:center;letter-spacing:.4px}
.story{gap:8%;padding-top:85px;padding-bottom:85px}
.story .detail{padding:20px 0}
@media(max-width:760px){.story{padding:60px 7%;gap:45px}
.promo{max-width:440px;margin:auto}
.story h2{font-size:43px}
}
@media(prefers-reduced-motion:reduce){.promo img{transform:none}
}
 
/* Production accessibility and compact-screen refinements. */
a:focus-visible,button:focus-visible{outline:3px solid #087bce;outline-offset:5px}

.hero a:focus-visible,.hero button:focus-visible,.closing a:focus-visible,footer a:focus-visible{outline-color:#64e2e7}

.logo{height:auto}
.phone video{aspect-ratio:480/1084;object-fit:cover}

.promo img{height:auto}
button.video-control{min-height:44px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:20px;top:-80px;z-index:20;background:#fff;color:#06162c;padding:12px 18px}

.skip-link:focus{top:12px}

@media(max-width:360px){h1{font-size:47px}
.store{padding:11px 10px}
.store b{font-size:16px}
.eyebrow{letter-spacing:1.5px}
.bottom-line{letter-spacing:0;font-size:8px}
}