/* Original website palette, typography, navigation and body remain authoritative. */
#top{min-height:850px;height:100svh;isolation:isolate;justify-content:flex-start}
#top>.ghost,#top>div[aria-hidden]{display:none}
#top>.shell{align-items:flex-start;text-align:left;padding-top:130px;padding-left:57%;padding-right:5%;width:100%;max-width:none}
#top h1{font-size:clamp(42px,4.5vw,68px)}
#top>.shell>.relative.mt-14{display:none}
#top>.shell>p{max-width:42ch}
.telos-hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#101111}
.telos-hero-media img,.telos-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.telos-hero-media video{opacity:0}.telos-hero-media video.is-ready{opacity:1}
.telos-hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 35%,#10111166 65%,#101111aa),linear-gradient(0deg,#101111bb,transparent 24%);pointer-events:none}
.telos-hero-controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;font-size:13px}
.telos-hero-controls button,.telos-hero-controls a{border:1px solid #ffffff50;background:#101111a0;color:#fff;border-radius:30px;padding:12px 20px;cursor:pointer}
.telos-hero-controls a{background:var(--color-accent,#c33);color:#fff}
.telos-hero-controls :focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:900px){#top{height:980px;min-height:980px}#top>.shell{padding:90px 24px 0;align-items:center;text-align:center}#top h1{font-size:clamp(42px,8vw,66px)}#top>.shell>p{font-size:15px}.telos-hero-media img,.telos-hero-media video{top:40%;height:60%;object-position:27% center}.telos-hero-media:after{background:linear-gradient(180deg,#101111 0%,#101111 35%,transparent 59%,#10111170 100%)}}

/* First paint does not depend on the post-hydration video mount. */
#top::before{content:'';position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,transparent 35%,#10111166 65%,#101111aa),linear-gradient(0deg,#101111bb,transparent 24%),url('/assets/cinematic/telos-journey-v2.webp') center/cover no-repeat}
#top>.shell>h1,#top>.shell>p{opacity:1!important;transform:none!important}
@media(max-width:900px){#top::before{top:40%;height:60%;background:linear-gradient(180deg,#101111 0%,transparent 32%,#10111170 100%),url('/assets/cinematic/telos-journey-v2.webp') 27% center/cover no-repeat}}
/* Move the idea typography and its equalizer below FAQ, before the footer. */
main{display:flex;flex-direction:column}main>div.shell{order:1}main>div.eq{order:2}main>footer{order:3}
