html,body{height:100%;overflow:hidden;background:#fff}
.home{position:relative;height:100vh;height:100svh;isolation:isolate}
/* the globe (assets/globe.js): big, on the right, cropped by the edge of the screen; you can drag it */
.visual{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;animation:vfade 1.6s ease-out .1s forwards}
@keyframes vfade{to{opacity:1}}
.globe-wrap{position:absolute;top:50%;right:0;width:min(clamp(640px,110vh,1280px),78vw);aspect-ratio:1;transform:translate(32%,-50%);pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.globe-wrap.is-dragging{cursor:grabbing}
#globe-canvas{display:block;width:100%;height:100%}
/* the headline block sits in the middle of the cover, on the left, like the first website */
.copy{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);z-index:2;max-width:min(620px,42vw)}
.copy h1{font-size:clamp(36px,3.5vw,54px);font-weight:500;letter-spacing:-.04em;line-height:1.03}
.copy h1 span{color:var(--turq)}
.copy h1 span.f{color:var(--red)}
.copy h1 b{font-weight:inherit;white-space:nowrap}
.copy p{font-size:clamp(16px,1.25vw,18px);color:var(--body);margin-top:28px;line-height:1.55}
.copy .sub{margin-top:18px;max-width:30em;color:#6A6E88}
.legal{position:absolute;right:var(--gut);bottom:clamp(32px,5.5vh,56px);z-index:2}
@media (prefers-reduced-motion:reduce){.visual{animation:none;opacity:1}}
/* tablets and phones: the text on top, the globe rising from the bottom, half hidden and faint */
@media (max-width:900px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 .home{display:flex;flex-direction:column;height:auto;min-height:100vh;min-height:100svh;padding:clamp(96px,15vh,130px) var(--gut) clamp(40px,10vh,96px)}
 .copy{position:relative;left:auto;top:auto;transform:none;max-width:none}
 .globe-wrap{width:min(640px,118vw);top:auto;bottom:0;right:50%;transform:translate(50%,34%);opacity:.5}
}
@media (max-width:520px){.globe-wrap{width:min(560px,134vw);transform:translate(50%,36%);opacity:.45}}
@media (max-width:760px){.legal{display:none}}
/* short, wide windows: keep the globe to the side */
@media (min-width:901px) and (max-height:600px){.globe-wrap{width:min(clamp(420px,80vh,820px),78vw);opacity:.55}.copy{max-width:min(560px,42vw)}}