/* Entry hierarchy: a sculptural symbol, a quiet signature, a statement in the established typeface. */
.gateway .gateway__main{padding:42px 48px 76px}
.gateway .gateway__motion{width:min(1120px,100%)}
.gateway .gateway__content{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:48px;text-align:left}
.gateway__symbol{width:100%;max-width:340px;justify-self:start;transform:translateY(-12px)}
.gateway__symbol img{display:block;width:100%;height:auto}
.gateway__copy{min-width:0}
.gateway .gateway__brand{justify-content:flex-start;font-size:25px;line-height:1;gap:0;letter-spacing:-.045em}
.gateway .gateway__wordmark{font-weight:600;line-height:1}
.gateway .gateway__io{font-size:1em;font-weight:600;letter-spacing:inherit;color:var(--logo-accent);margin:0}
.gateway .gateway__main h1{margin:26px 0 32px;font-weight:400;line-height:1;letter-spacing:-.045em;font-size:72px;background:none;color:#1a1917}
.gateway .gateway__main h1>span{color:inherit}
.gateway__lead{display:block;font-size:.84em;line-height:1.05;font-weight:400;letter-spacing:-.055em}
.gateway__claim{display:block;font-family:var(--font-ui);font-style:normal;font-weight:500;font-size:104px;line-height:1.06;letter-spacing:-.065em;white-space:nowrap;margin-top:3px}
.gateway .gateway__period{color:var(--logo-accent)}
.gateway .gateway__actions{justify-content:flex-start;gap:12px}
.gateway .gate-button{min-width:0;flex:1;max-width:226px;padding:17px 22px;gap:22px;font-size:14px;border-radius:100px}
.gateway .gate-button--voice{background:transparent}
.gateway .gate-button--voice:hover{background:#fff}
@media(min-width:1650px){.gateway .gateway__motion{width:1280px}.gateway .gateway__content{gap:72px}.gateway__symbol{max-width:400px}.gateway__claim{font-size:120px}.gateway .gateway__main h1{font-size:80px}}
@media(max-width:1150px) and (min-width:761px){
 .gateway .gateway__main{padding-left:40px;padding-right:40px}
 .gateway .gateway__content{gap:32px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .gateway__symbol{max-width:280px}
 .gateway .gateway__brand{font-size:21px}
 .gateway .gateway__main h1{font-size:60px;margin-top:30px;margin-bottom:36px}
 .gateway__claim{font-size:clamp(64px,8.3vw,96px)}
 .gateway .gate-button{padding:15px 16px;font-size:12px;gap:10px}
}
@media(max-width:760px){
 .gateway .gateway__main{padding:30px 24px 72px}
 .gateway .gateway__motion{width:min(440px,100%)}
 .gateway .gateway__content{grid-template-columns:1fr;gap:18px;text-align:center}
 .gateway__symbol{width:124px;max-width:124px;justify-self:center;transform:none}
 .gateway .gateway__brand{justify-content:center;font-size:20px}
 .gateway .gateway__main h1{font-size:43px;margin:16px 0 24px}
 .gateway__lead{font-size:.86em}
 .gateway__claim{font-size:66px;line-height:1.06;margin-top:5px}
 .gateway .gateway__actions{flex-direction:row;justify-content:center;gap:10px}
 .gateway .gate-button{width:auto;max-width:none;padding:15px 15px;font-size:12px;gap:10px}
 .gateway .gate-button span{font-size:17px}
}
@media(max-width:380px){
 .gateway .gateway__main{padding-left:20px;padding-right:20px}
 .gateway__symbol{width:116px;max-width:116px}
 .gateway .gateway__content{gap:22px}
 .gateway__claim{font-size:60px}
 .gateway .gate-button{font-size:11px;padding:15px 12px;gap:8px}
}
@media(max-height:700px) and (max-width:760px){
 .gateway.landing--motion .gateway__main{height:540px;padding-top:24px;padding-bottom:78px}
 .gateway .gateway__content{gap:18px}
 .gateway__symbol{width:100px;max-width:100px}
 .gateway .gateway__brand{font-size:18px}
 .gateway .gateway__main h1{font-size:34px;margin:15px 0 24px}
 .gateway__claim{font-size:58px}
 .gateway .hero-scroll{bottom:10px}
}
/* Keep the invitation visible even on short screens and with reduced motion. */
.gateway.landing .gateway__main{min-height:0}
@media(max-height:700px) and (min-width:761px){
 .gateway .gateway__main{padding-top:40px;padding-bottom:75px}
 .gateway__symbol{max-width:265px;justify-self:center}
 .gateway .gateway__brand{font-size:21px}
 .gateway .gateway__main h1{font-size:48px;margin:22px 0 28px}
 .gateway__claim{font-size:84px}
}

.gateway .gateway__brand{letter-spacing:.01em}
.gateway__claim{letter-spacing:-.045em}

/* Native page flow: no dissolve, blur or pinned screen swap after the hero. */
.gateway.landing .gateway__main{height:max(620px,100svh)}
.gateway.landing .gateway__content{animation:none}
@media(max-height:700px){.gateway.landing .gateway__main{height:max(540px,100svh)}}

/* More substantial entry actions, aligned with the geometric identity. */
.gateway .gateway__actions{gap:14px}
.gateway .gate-button{min-height:72px;max-width:250px;padding:22px 24px;border-radius:16px;font-family:var(--font-body);font-size:17px;font-weight:600;letter-spacing:0;justify-content:space-between;gap:16px;border:0;box-shadow:none}
.gateway .gate-button--voice{background:#eeedeb;color:#454340}
.gateway .gate-button--voice:hover{background:#454340;color:white}
.gateway .gate-button span{font-size:25px;line-height:1}
@media(max-width:1150px) and (min-width:761px){.gateway .gate-button{font-size:15px;padding:20px;gap:10px}}
@media(max-width:760px){.gateway .gateway__actions{gap:10px}.gateway .gate-button{min-height:66px;padding:18px 15px;border-radius:14px;font-size:15px;gap:8px}.gateway .gate-button span{font-size:21px}}
@media(max-width:380px){.gateway .gateway__actions{flex-direction:column}.gateway .gate-button{width:100%;max-width:none;min-height:56px;padding:16px 20px}.gateway.landing .gateway__main{height:max(620px,100svh)}}

/* The invitation is only present at the very top of the page. */
.gateway .hero-scroll[hidden]{display:none}

/* White remains the base beneath the decorative universe. */
.gateway .gateway__main{background:#fff}
.gateway .gateway__main::before,.gateway .gateway__main::after{display:none}
/* Keep the scrollbar gutter stable, revealing its paint only after scrolling. */
html:not(.has-page-scroll){scrollbar-color:transparent transparent}
html:not(.has-page-scroll)::-webkit-scrollbar-track{background:transparent}
html:not(.has-page-scroll)::-webkit-scrollbar-thumb,
html:not(.has-page-scroll)::-webkit-scrollbar-thumb:hover{background:transparent;border-color:transparent}

/* Restore the signature above the statement, with a calmer scale. */
.gateway .gateway__symbol{max-width:300px}
.gateway .gateway__brand{font-size:24px}
.gateway .gateway__main h1{font-size:64px;margin:24px 0 36px}
.gateway .gateway__claim{font-size:clamp(76px,7.2vw,104px)}
@media(min-width:1650px){.gateway .gateway__symbol{max-width:340px}.gateway .gateway__claim{font-size:112px}}
@media(min-width:761px) and (max-width:1150px){.gateway .gateway__symbol{max-width:260px}.gateway .gateway__main h1{font-size:56px}.gateway .gateway__claim{font-size:clamp(64px,8.2vw,92px)}}
@media(max-width:760px){
 .gateway .gateway__content{gap:24px}
 .gateway .gateway__brand{font-size:20px}
 .gateway .gateway__main h1{font-size:40px;margin:20px 0 30px}
 .gateway .gateway__claim{font-size:clamp(56px,16vw,68px)}
}
@media(max-width:760px) and (max-height:700px){.gateway .gateway__content{gap:18px}.gateway .gateway__main h1{font-size:36px;margin:18px 0 24px}}

/* Equal scale for the statement; the lighter Be keeps the hierarchy. */
.gateway .gateway__main h1{font-size:clamp(76px,7.2vw,104px)}
.gateway .gateway__lead{font-size:inherit;font-weight:400}
.gateway .gateway__claim{font-size:inherit;font-weight:500}
@media(min-width:1650px){.gateway .gateway__main h1{font-size:112px}}
@media(min-width:761px) and (max-width:1150px){.gateway .gateway__main h1{font-size:clamp(64px,8.2vw,92px)}}
@media(max-width:760px){.gateway .gateway__main h1{font-size:clamp(56px,16vw,68px)}}
@media(max-width:760px) and (max-height:700px){.gateway .gateway__main h1{font-size:clamp(56px,16vw,64px)}}


/* Keep the signature closer to the statement on desktop. */
@media(min-width:761px){.gateway .gateway__symbol{justify-self:center}}

/* Keep the complete signature centred at every viewport size. */
.gateway .gateway__motion{margin-inline:auto;transform:none}
@media(max-width:760px){.gateway .gateway__main{padding-left:24px;padding-right:24px}}

/* White hero, with no decorative background or renderer. */
.landing .gateway__main{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.landing .gateway__motion{position:relative;z-index:2}

/* Filled arrow with a short descending trail, inspired by the supplied reference. */
.gateway .hero-scroll{width:76px;height:98px;bottom:20px;border:0;border-radius:0;background:transparent;color:#eeedeb}
.gateway .hero-scroll svg{width:58px;height:82px;fill:currentColor;stroke:none;animation:hero-scroll-breathe 3.6s ease-in-out infinite}
.gateway .hero-scroll__trail rect{fill:currentColor;opacity:1;animation:hero-scroll-trail 1.8s ease-in-out infinite;animation-delay:-1.8s}
.gateway .hero-scroll__trail rect:nth-child(2){animation-delay:-1.2s}
.gateway .hero-scroll__trail rect:nth-child(3){fill:#f97316;opacity:.55;animation:none}
.gateway .hero-scroll:hover{background:transparent;color:#77736e}
.gateway .hero-scroll:focus-visible{outline:2px solid #77736e;outline-offset:3px}
@keyframes hero-scroll-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes hero-scroll-trail{0%,39%,100%{opacity:.4}12%,26%{opacity:1}}
@media(max-width:760px),(max-height:700px){.gateway .hero-scroll{width:56px;height:76px;bottom:14px}.gateway .hero-scroll svg{width:46px;height:65px}}
@media(prefers-reduced-motion:reduce){.gateway .hero-scroll svg,.gateway .hero-scroll__trail rect{animation:none}}