/* Role and Bespoke heroes: visuals integrated into the page, not boxed. */
.benefit-hero h1,.bespoke-hero h1{text-wrap:balance}
.benefit-hero h1 br,.bespoke-hero h1 br{display:none}.benefit-hero h1 em,.bespoke-hero h1 em{display:block;text-wrap:balance}
.benefit-hero .role-platforms{gap:0;margin:26px 0 30px}
.benefit-hero .role-platforms li{border:0;padding:0;border-radius:0;font:500 11.5px/1.4 'Hanken Grotesk',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#c9b48a}
.benefit-hero .role-platforms li+li:before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#6f6656;margin:0 14px;vertical-align:middle;transform:translateY(-1px)}
/* Guest: the whole composition (phone, SmartButton and watch) stays in view and melts into the page on the left. */
@media(min-width:901px){
 .guest-concept-hero{min-height:min(calc(100svh - 95px),900px);align-items:center;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important;gap:0!important;padding-top:105px;padding-bottom:50px;overflow:hidden}
 .guest-concept-image{position:relative;margin-right:-6vw!important;margin-left:-6vw!important}
 .guest-concept-image img{width:100%;height:auto;max-height:calc(100svh - 110px);object-fit:contain}
}
.guest-concept-image{position:relative}
.guest-concept-image img{border-radius:0!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);mask-composite:intersect;animation:heroKB 2.8s cubic-bezier(.2,.7,.2,1) both}
.guest-concept-image figcaption{position:absolute;right:6vw;bottom:2%;margin:0!important;font-size:10.5px!important;letter-spacing:.04em;color:#7f7b72!important;max-width:none!important}
@keyframes heroKB{from{opacity:0;transform:scale(1.07) translateX(2%)}to{opacity:1;transform:none}}
@media(max-width:900px){
 .guest-concept-image{margin:6px -6vw 0!important}
 .guest-concept-image img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
 .guest-concept-image figcaption{position:static;padding:0 6vw;text-align:right}
}
/* Crew: phone and watch sit on a soft light pool instead of floating in a void. */
.crew-hero-stage{position:relative}
.crew-hero-stage:before{content:'';position:absolute;left:-8%;right:-8%;top:4%;bottom:0;background:radial-gradient(52% 46% at 50% 52%,rgba(198,170,112,.15),rgba(198,170,112,0) 70%);pointer-events:none}
.crew-hero-stage:after{content:'';position:absolute;left:14%;right:14%;bottom:-2%;height:40px;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));filter:blur(4px);pointer-events:none;z-index:0}
.crew-hero-stage>figure{position:relative;z-index:1}
.crew-hero-stage .phone{animation:floatA 7s ease-in-out infinite}
.crew-hero-stage .wear{animation:floatB 7s ease-in-out infinite}
@keyframes floatA{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes floatB{0%,100%{translate:0 0}50%{translate:0 6px}}
/* Bespoke: the two routes, side by side, as objects. */
.bespoke-hero-visual{position:relative;margin:0;width:100%}
.bhv-main{position:absolute;right:0;top:2%;width:84%;aspect-ratio:4/3;overflow:hidden;box-shadow:0 46px 80px -34px rgba(52,38,16,.5);animation:bhvInA 1.4s cubic-bezier(.2,.7,.2,1) both}
.bhv-main img{display:block;width:100%;height:100%;object-fit:cover;animation:bhvDrift 16s ease-in-out infinite alternate}
.bhv-sig{position:absolute;left:0;bottom:3%;width:50%;aspect-ratio:1;background:#0a0a0a;overflow:hidden;box-shadow:0 44px 70px -26px rgba(22,15,6,.65),0 0 0 1px rgba(255,255,255,.04);animation:bhvInB 1.4s .15s cubic-bezier(.2,.7,.2,1) both}
.bhv-sig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1.2s ease,transform 3.2s ease}
.bhv-sig img.on{opacity:1;transform:none}
.bhv-sig img:first-child{opacity:1}
.bhv-sig.is-live img:first-child:not(.on){opacity:0}
.bhv-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:9px;z-index:2}
.bhv-dots i{display:block;width:9px;height:9px;border-radius:50%;background:var(--c);opacity:.35;transition:opacity .5s ease,box-shadow .5s ease}
.bhv-dots i.on{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.22)}
@keyframes bhvInA{from{opacity:0;transform:translate(36px,-14px)}to{opacity:1;transform:none}}
@keyframes bhvInB{from{opacity:0;transform:translate(-30px,34px)}to{opacity:1;transform:none}}
@keyframes bhvDrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
@media(min-width:801px){
 .bespoke-detail .bespoke-hero.with-visual{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center;padding:118px 6vw 76px;min-height:min(calc(100svh - 95px),880px)}
 .bespoke-hero.with-visual>div{max-width:none;margin:0}
 .bespoke-hero.with-visual h1{font-size:clamp(56px,6.1vw,98px)}
 .bespoke-hero-visual{aspect-ratio:1/1;max-width:640px;justify-self:end}
}
@media(max-width:800px){
 .bespoke-hero .bespoke-hero-visual{grid-row:3;aspect-ratio:1.08/1;margin:4px 0 6px}
}
@media(prefers-reduced-motion:reduce){.guest-concept-image img,.bhv-main,.bhv-main img,.bhv-sig,.crew-hero-stage .phone,.crew-hero-stage .wear{animation:none!important}.bhv-sig img{transition:none}}
/* Crew hero: Android phone with a Wear OS watch in front of it. */
.crew-hero-stage{display:flex!important;align-items:center;justify-content:center;gap:0!important;min-height:560px}
.crew-hero-stage .phone{width:min(290px,60%)!important;margin:0!important}
.crew-hero-watch{position:relative;z-index:2;margin:0 0 0 -54px;align-self:flex-end;transform:translateY(-70px);animation:floatB 7s ease-in-out infinite}
.crew-hero-watch .watchx{width:178px}
.crew-hero-watch figcaption,.crew-hero-stage .phone figcaption{margin-top:28%;font-size:11.5px;color:#8e9a9d;text-align:center}
.crew-hero-stage .phone figcaption{margin-top:14px}
.crew-hero-watch figcaption{margin-top:60%}
.crew-accept-pulse{position:absolute;left:14%;right:14%;top:56%;height:15%;border-radius:999px;box-shadow:0 0 0 0 rgba(118,196,160,.55);animation:crewPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes crewPulse{0%{box-shadow:0 0 0 0 rgba(118,196,160,.55)}70%,100%{box-shadow:0 0 0 14px rgba(118,196,160,0)}}
@media(max-width:760px){.crew-hero-stage{min-height:0;margin-top:10px}.crew-hero-watch{margin-left:-40px;transform:translateY(-40px)}.crew-hero-watch .watchx{width:128px}}
@media(prefers-reduced-motion:reduce){.crew-hero-watch,.crew-accept-pulse{animation:none!important}}
/* Integrators: a lit cabin bedside on the right, melting into the hero background. */
.int-hero-visual{margin:0;pointer-events:none}
.int-hero-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:heroKB 2.8s cubic-bezier(.2,.7,.2,1) both}
@media(min-width:901px){
 .integration-hero{min-height:min(calc(100svh - 95px),860px)!important}
 .integration-hero>*:not(.int-hero-visual){position:relative;z-index:1;max-width:min(50vw,720px)}
 .integration-hero h1{font-size:clamp(58px,6.2vw,100px)!important}
 .int-hero-visual{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0}
 .int-hero-visual img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(180deg,transparent 0,#000 18%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(180deg,transparent 0,#000 18%,#000 78%,transparent 100%);mask-composite:intersect;opacity:.92}
}
@media(max-width:900px){
 .int-hero-visual{margin:34px -6vw 0;height:340px}
 .int-hero-visual img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){.int-hero-visual img{animation:none!important}}