:root{--fallback-earth:url('../images/globe-fallback.webp')}:root{--ink:#f4f8ff;--muted:#91a0b6;--cyan:#53cfff;--panel:rgba(4,12,25,.86);--line:rgba(154,199,236,.22)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#010713;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}.globe-hero{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 75% 35%,#0b3154 0,#031326 32%,#010713 72%)}.globe-fallback{position:absolute;z-index:0;top:4%;right:-4%;width:min(72vw,940px);aspect-ratio:1;background:center/contain no-repeat var(--fallback-earth);filter:drop-shadow(0 0 45px rgba(52,167,255,.42));opacity:.95;transition:opacity .35s}.globe-ready .globe-fallback{opacity:0}#globe{position:absolute;z-index:0;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}#globe:active{cursor:grabbing}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(1,7,19,.94) 0%,rgba(1,7,19,.68) 30%,transparent 64%),linear-gradient(0deg,rgba(1,7,19,.72),transparent 35%);z-index:1}.topbar{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:30px clamp(22px,5vw,78px);border-bottom:1px solid var(--line)}.brand{color:white;text-decoration:none;font-size:clamp(1.25rem,2.1vw,2rem);font-weight:750;letter-spacing:-.06em;line-height:.8}.brand small{display:block;text-align:center;margin-top:9px;font-size:.58rem;letter-spacing:.38em;color:#b8c8db}.project-toggle{border:1px solid rgba(255,255,255,.45);background:rgba(2,9,20,.28);backdrop-filter:blur(12px);color:white;padding:13px 18px;cursor:pointer;text-transform:uppercase;letter-spacing:.13em;font-size:.76rem}.project-toggle:hover,.project-toggle:focus-visible{background:white;color:#06101e}.intro{position:relative;z-index:2;width:min(640px,83vw);margin:clamp(75px,12vh,150px) 0 0 clamp(22px,8vw,150px);pointer-events:none}.eyebrow{display:flex;align-items:center;gap:12px;font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;color:#b8c8db}.eyebrow span{width:34px;height:1px;background:var(--cyan)}h1{margin:24px 0 22px;font-weight:700;font-size:clamp(3.3rem,6.7vw,7rem);line-height:.88;letter-spacing:-.065em}h1 em{font-weight:300;font-style:normal;color:var(--cyan)}.lede{max-width:510px;color:#b8c3d2;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.65}.controls{display:flex;align-items:center;gap:9px;margin-top:30px;pointer-events:auto}.control{width:44px;height:44px;border:1px solid var(--line);color:#e8f4ff;background:rgba(3,12,27,.62);cursor:pointer}.control:hover,.control:focus-visible{border-color:var(--cyan);color:var(--cyan)}.drag-hint{margin-left:8px;color:#71849d;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}.project-card{position:absolute;z-index:3;right:clamp(22px,6vw,100px);bottom:clamp(66px,10vh,120px);width:min(430px,calc(100vw - 44px));display:grid;grid-template-columns:52px 1fr;gap:16px;padding:24px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(7,19,36,.87),rgba(3,10,22,.72));backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.38);transition:opacity .25s,transform .25s}.project-card.switching{opacity:0;transform:translateY(8px)}.card-number{font-family:Georgia,serif;color:var(--cyan);font-size:1.4rem}.card-location{margin:0 0 10px;color:var(--cyan);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem}.project-card h2{font-size:1.28rem;line-height:1.2;margin:0 0 11px}.project-card p:not(.card-location){font-size:.89rem;line-height:1.5;color:#9dacbe;margin:0 0 16px}.project-card a{font-size:.8rem;color:white;text-decoration:none;text-transform:uppercase;letter-spacing:.13em;border-bottom:1px solid var(--cyan);padding-bottom:4px}.tour-dots{position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:10px}.tour-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#54667e;cursor:pointer;transition:.25s}.tour-dots button.active{width:28px;border-radius:5px;background:var(--cyan)}.drawer{position:absolute;z-index:12;top:0;right:0;width:min(460px,100%);height:100%;padding:32px;background:rgba(2,9,20,.96);backdrop-filter:blur(24px);border-left:1px solid var(--line);transform:translateX(102%);transition:transform .4s cubic-bezier(.22,.9,.3,1);overflow:auto}.drawer.open{transform:translateX(0)}.drawer-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:34px}.drawer-head span{display:block;color:var(--cyan);font-size:.67rem;letter-spacing:.18em}.drawer-head strong{display:block;margin-top:8px;font-size:1.55rem}.drawer-close{border:0;background:transparent;color:white;font-size:2rem;cursor:pointer}.search-wrap label{display:block;color:#8293aa;font-size:.72rem;margin-bottom:8px}.search-wrap input{width:100%;padding:14px 16px;color:white;border:1px solid var(--line);background:#071426;outline:none}.search-wrap input:focus{border-color:var(--cyan)}.project-list{margin-top:22px}.project-item{width:100%;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;text-align:left;padding:18px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:white;cursor:pointer}.project-item:hover,.project-item:focus-visible{color:var(--cyan)}.project-item .num{color:#60738b;font-family:Georgia,serif}.project-item strong{display:block;font-size:.94rem}.project-item small{display:block;margin-top:5px;color:#7f91a9}.project-item .arrow{font-size:1.2rem}.empty{color:#7e90a6;padding:28px 0}
@media(max-width:850px){.globe-fallback{width:105vw;right:-38%;top:12%}.shade{background:linear-gradient(180deg,rgba(1,7,19,.3),rgba(1,7,19,.9) 72%)}.intro{margin:65px 22px 0;width:calc(100% - 44px)}h1{font-size:clamp(3rem,13vw,5rem)}.lede{max-width:390px}.project-card{left:22px;right:auto;bottom:65px}.tour-dots{display:none}}
@media(max-width:560px){.topbar{padding:22px}.project-toggle{font-size:0;width:48px;height:44px;padding:0}.project-toggle span{font-size:1.1rem}.intro{margin-top:42px}h1{margin-top:18px}.lede{font-size:.94rem;line-height:1.5}.controls{margin-top:18px}.project-card{grid-template-columns:36px 1fr;padding:18px;bottom:18px}.drawer{padding:24px}.drag-hint{display:none}}
.globe-hero>.drawer{z-index:120}.globe-hero>.intro{margin-top:clamp(155px,18vh,220px)}.globe-noscript{margin:0;padding:1rem 2rem;color:#f4f8ff;background:#010713;text-align:center}@media(max-width:850px){.globe-hero>.intro{margin-top:120px}}@media(prefers-reduced-motion:reduce){.drawer,.project-card,.tour-dots button{transition:none}}
.globe-hero{isolation:auto}.globe-hero>.drawer{position:fixed;inset:0 0 0 auto;z-index:9999;height:100dvh;pointer-events:auto}.globe-hero>.drawer.open{pointer-events:auto}

/* Project logos and the light homepage project preview. */
.project-card{width:min(480px,calc(100vw - 44px));grid-template-columns:92px 1fr;gap:20px;border-color:rgba(83,207,255,.45);border-radius:24px;color:#071426;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(10px) saturate(1.08);backdrop-filter:blur(10px) saturate(1.08)}
.card-logo{display:flex;align-items:center;justify-content:center;align-self:start;min-height:84px;padding:10px;border:1px solid #dce7ef;border-radius:14px;background:#f4f8ff}
.card-logo.card-logo--dark{background:#071426}
.card-logo img{width:100%;height:70px;object-fit:contain}
.card-location{color:#087cac}
.project-card h2{color:#071426}
.project-card p:not(.card-location){color:#536579}
.project-card a{color:#071426;border-bottom-color:#087cac}
.drawer{width:min(520px,100%)}
.project-item{grid-template-columns:70px 1fr auto;gap:14px;padding-block:16px}
.project-item-logo{display:flex;align-items:center;justify-content:center;width:70px;height:54px;padding:6px;background:#fff;border:1px solid rgba(255,255,255,.18)}
.project-item-logo--dark{background:#071426}
.project-item-logo img{width:100%;height:100%;object-fit:contain}
.project-item small{line-height:1.35}
@media(max-width:560px){.project-card{grid-template-columns:64px 1fr;gap:13px;padding:16px}.card-logo{min-height:60px;padding:6px}.card-logo img{height:48px}.project-item{grid-template-columns:58px 1fr auto}.project-item-logo{width:58px;height:48px}}

/* Polished homepage content motion; the globe itself keeps its original look. */
.globe-ready .intro>*{animation:globe-content-in .8s cubic-bezier(.2,.75,.2,1) both}
.globe-ready .intro>.eyebrow{animation-delay:.08s}.globe-ready .intro>h1{animation-delay:.16s}.globe-ready .intro>.lede{animation-delay:.24s}.globe-ready .intro>.controls{animation-delay:.32s}
.globe-ready .project-card{animation:globe-card-in .8s .36s cubic-bezier(.2,.75,.2,1) both}
.project-card::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);transform:translateX(-120%);transition:transform .85s cubic-bezier(.2,.75,.2,1)}
.project-card:hover::before{transform:translateX(120%)}
.control,.project-toggle,.project-item{transition:color .25s ease,background-color .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.75,.2,1)}
.control:hover,.control:focus-visible,.project-toggle:hover,.project-toggle:focus-visible{transform:translateY(-2px)}
@keyframes globe-content-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes globe-card-in{from{translate:0 28px;scale:.98}to{translate:0 0;scale:1}}
@media(prefers-reduced-motion:reduce){.globe-ready .intro>*,.globe-ready .project-card{animation:none}.project-card::before{display:none}}

/* Stable hit areas and compositor-only dot transitions avoid layout work. */
.tour-dots{bottom:8px;gap:0}
.tour-dots button{position:relative;width:32px;height:44px;border-radius:0;background:transparent;transition:none}
.tour-dots button::before{content:"";position:absolute;top:50%;left:2px;width:28px;height:7px;border-radius:5px;background:#54667e;transform:translateY(-50%) scaleX(.25);transition:transform .25s,background-color .25s}
.tour-dots button.active{width:32px;background:transparent}
.tour-dots button.active::before{background:var(--cyan);transform:translateY(-50%) scaleX(1)}
