/* Responsive layer — loaded last. One layout system for every screen size (phones, tablets, laptops, large desktops).
   Sizes come from viewport units, clamp() and container units, so each scene is reduced to fit instead of being cropped. */

/* ===== HERO: the same scroll effect on every screen ===== */
.hero{--hh:var(--hero-header-height,68px);--pad:clamp(22px,4.2svh,46px)}
.hero .hero-pin{display:flex;flex-direction:column;height:calc(100svh - var(--hh));min-height:540px;max-height:1100px;overflow:hidden}
.hero.motion-ready{height:calc(100svh - var(--hh) + 88svh)}
.hero.motion-ready .hero-pin{position:sticky;top:var(--hh)}
.hero:not(.motion-ready) .hero-pin{height:auto;min-height:0;max-height:none}
.hero .hero-heading{flex:none;padding:var(--pad) 20px 0}
.hero .hero-kicker{font-size:clamp(16px,1.5vw,20px);margin-bottom:clamp(8px,1.6svh,14px)}
.hero h1{font-size:clamp(50px,min(13.6vw,8.4svh + 5vw),104px);line-height:1.04;margin:0 auto clamp(12px,2.4svh,20px);white-space:normal;max-width:min(100%,14ch);text-wrap:balance;letter-spacing:-.034em}
.hero .hero-sub{font-size:clamp(14px,1.45vw,18px)}
@media(min-width:760px){.hero h1{font-size:clamp(64px,6.4vw,104px);max-width:none;white-space:nowrap}}
@media(min-width:760px) and (max-height:760px){.hero h1{font-size:clamp(56px,min(6.4vw,10svh),84px)}}
.hero .hero-stage{position:relative;inset:auto;flex:1 1 0;min-height:0;width:100%;max-width:1440px;margin:0 auto;container-type:size;perspective:1400px}
.hero:not(.motion-ready) .hero-stage{flex:none;height:clamp(260px,min(58vw,86vh),520px)}
.hero .hero-bob{position:absolute;top:0;bottom:auto;left:50%;height:100%;width:auto;max-width:none}
.hero .hero-agent{display:block;position:absolute;bottom:0;top:auto;height:72cqh;max-height:440px;width:auto;max-width:none;--d:min(70cqh,38cqw)}
.hero .hero-agent-left{left:calc(50% - var(--d) - 20cqh);right:auto}
.hero .hero-agent-right{right:calc(50% - var(--d) - 21cqh);left:auto}
.hero .hero-controls{position:relative;flex:none;inset:auto;padding:clamp(10px,1.8svh,18px) 20px clamp(14px,2.6svh,24px)}
.hero .hero-scroll{bottom:clamp(30px,5svh,41px)}
.hero .hero-next{position:absolute;inset:var(--pad) 20px auto;display:block}
.hero .hero-next .hero-kicker{margin-bottom:clamp(8px,1.6svh,14px)}
.hero .hero-next-title{font-size:clamp(40px,min(11.4vw,7.6svh + 4vw),84px);line-height:1.05;max-width:min(100%,14ch);margin-inline:auto;text-wrap:balance}
@media(min-width:760px){.hero .hero-next-title{font-size:clamp(58px,5.7vw,84px);max-width:none}}
.hero:not(.motion-ready) .hero-next,.hero:not(.motion-ready) .hero-agent{display:none}
@media(max-width:1000px){.hero .hero-scroll{display:none}}

/* ===== DEMO: the whole laptop + iPhone scene is reduced to fit, never cropped ===== */
.mission .mf-stage{aspect-ratio:1500/800;height:auto;overflow:visible;border-radius:0}
.mission .mf-world{width:1500px;height:800px}
@media(max-width:700px){
 .mission .mf-stage{aspect-ratio:1240/1800;overflow-x:clip;overflow-y:visible}
 .mission .mf-world{width:1240px;height:1800px}
 .mission .mf-phone{left:397px;top:800px;transform:scale(1.7);transform-origin:0 0}
}
/* Arriving from the language chooser: cross-document view transition (no delay, browser-native) */
@view-transition{navigation:auto}
::view-transition-new(root){animation:coceyo-arrive .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes coceyo-arrive{from{opacity:0;transform:scale(.97)}}

/* Audited viewport fit: account for the announcement above the sticky navigation. */
.hero.motion-ready .hero-pin{height:calc(100svh - var(--hh) - var(--hero-top-space,0px));min-height:0}
.beyond .wk{width:100%;min-width:0;grid-template-columns:minmax(0,1fr)}
.beyond .wk>*{min-width:0;max-width:100%}
.beyond .wk-logos{flex-wrap:wrap}
.beyond .wk-row{grid-template-columns:auto minmax(0,1fr)}
.beyond .wk-row span,.beyond .wk-row em{overflow-wrap:anywhere}
@media(max-width:480px){
 .beyond .bw-panel{padding:24px 18px}
 .beyond .wk-row{padding:10px;gap:3px 8px}
 .hero .hero-explore{min-height:44px;display:inline-flex;align-items:center}
 .hero .hero-controls{padding-block:8px 12px}
 .hero .hero-actions{gap:4px}
}
@media(hover:none),(pointer:coarse){
 .gallery-prev,.gallery-next,.detail-close,.language-trigger,.menu-toggle{min-width:44px;min-height:44px}
 .faq summary{min-height:44px}
}
/* The invisible demo scrubber must stay clipped, including its overflowing controls. */
.mf-sr{clip-path:inset(50%)}
html.team-scroll-hold{scroll-behavior:auto!important;overscroll-behavior:none}
.beyond .wk-tools{grid-template-columns:minmax(0,1fr)}
.beyond .wk-tools ul.wk-logos{flex-wrap:wrap;max-width:100%;row-gap:6px}