@font-face{font-family:Manrope;src:url('assets/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{color-scheme:dark;--ink:#061521;--blue:#2bace2;--white:#f1f7fa;--muted:#9cb2c0;--line:#254253}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;color:var(--white);font-family:Manrope,Arial,sans-serif;background:radial-gradient(ellipse at 52% 46%,#0c2636 0,transparent 60%),var(--ink);min-width:280px}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:#2bace233}
button{font:inherit}
.page{max-width:1600px;margin:auto;padding:24px 5vw 0;min-height:100svh;display:flex;flex-direction:column}
.header{display:flex;align-items:center;justify-content:space-between;min-height:78px}
.logo{width:216px;height:auto;object-fit:contain;filter:url(#logo-night);margin-left:-13px}
.filter-defs{position:absolute;width:0;height:0;pointer-events:none}
.header-label{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:2.6px;text-transform:uppercase;color:#c1d3dd}
.status-dot{width:5px;height:5px;background:var(--blue);border-radius:50%;box-shadow:0 0 12px #2bace280}
main{flex:1}
.intro{text-align:center;margin:34px auto 0;position:relative;z-index:1}
.eyebrow{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
h1{font-size:clamp(36px,4.3vw,68px);line-height:1.13;letter-spacing:-2.8px;font-weight:700;margin:0}
h1 span{color:#40b7eb}
.subtitle{font-size:15px;color:#b7cbd7;margin:18px 0 0;line-height:1.6}
.mobile-word,.mobile-break{display:none}
.map-section{position:relative;margin:6px auto -6px;max-width:1270px}
.map-caption{position:absolute;left:0;right:0;top:46%;display:flex;justify-content:space-between;pointer-events:none;font-size:8px;letter-spacing:1.8px;color:#7492a5;opacity:.7;z-index:1}
.map-caption span{writing-mode:vertical-rl}
.world{display:block;width:100%;height:auto;overflow:hidden}
.world.mobile{display:none}
.world.desktop{height:clamp(270px,43vh,470px)}
.graticule{fill:none;stroke:#2bace2;stroke-opacity:.1;stroke-width:.4}
.land{stroke:#386079;stroke-width:.4;stroke-linejoin:round}
.atmosphere{transform:translate(var(--map-x,0),var(--map-y,0));transition:transform 1s ease-out;transform-origin:center}
.leader{fill:none;stroke:#67b4d5;stroke-width:.65;stroke-opacity:.8}
.pin text{font-size:11px;fill:#dfedf6;font-weight:700}
.pin tspan{fill:#5fc9f5;font-weight:400}
.pin-hit{fill:#0b2230;fill-opacity:.85;stroke:#477089;stroke-opacity:.5;stroke-width:.75;transition:fill .25s,stroke .25s}
.core{fill:#e9faff;stroke:#2bace2;stroke-width:1.8}
.halo{fill:#2bace2;opacity:.17;transform-box:fill-box;transform-origin:center;animation:none}
.pin[data-region=uk] .halo{animation-delay:-1.3s}
.pin[data-region=ae] .halo{animation-delay:-2.6s}
.pin:hover .pin-hit,.pin:focus-visible .pin-hit,.pin.is-active .pin-hit{fill:#153e54;stroke:#6acfff;stroke-opacity:1}
.pin:hover .core,.pin.is-active .core,.pin:focus-visible .core{stroke-width:2.8}
.pin:focus-visible{outline:none}
.pin:focus-visible .pin-hit{stroke-width:3}
.regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative;z-index:2;max-width:1180px;margin:0 auto 36px;scroll-margin-top:20px}
.region-card{display:flex;gap:17px;align-items:center;min-height:96px;padding:22px 24px;background:linear-gradient(115deg,#102a3b80,#081b2980);border:1px solid #254b61;border-radius:9px;transition:border-color .2s,background .2s,transform .2s}
.region-number{font-size:10px;color:#799bad;align-self:flex-start;padding-top:7px;letter-spacing:1px}
.region-copy{display:flex;flex-direction:column;gap:7px}
.region-copy strong{font-size:18px;font-weight:700;letter-spacing:-.3px}
.region-copy>span{font-size:12px;color:#a8c0ce}
.arrow{margin-left:auto;font-size:25px;font-weight:400;color:#b9d6e6;transition:transform .2s,color .2s}
.region-card:hover,.region-card.is-active{border-color:#4fa9d2;background:#123448}
.region-card:hover .arrow,.region-card.is-active .arrow{transform:translate(2px,-2px);color:#6cd1ff}
.region-card:active{transform:scale(.985)}
a:focus-visible,button:focus-visible{outline:2px solid #7cd7ff;outline-offset:5px}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:21px 0 23px;font-size:10px;letter-spacing:.5px;color:#9bb4c3}
.footer-year{color:#6f8b9d;margin-left:7px}
.motion-toggle{color:#a6c0d0;background:none;border:0;min-height:30px;padding:0;cursor:pointer;font-size:10px;letter-spacing:.5px}
.motion-toggle span{margin-left:7px;color:#6fc5eb}
.skip-link{position:absolute;top:-80px;left:20px;padding:14px;background:var(--white);color:var(--ink);z-index:20}
.skip-link:focus{top:12px}
@keyframes breathe{0%,100%{transform:scale(.8);opacity:.12}50%{transform:scale(1.35);opacity:.28}}
body.motion-paused .halo{animation:none}
body.motion-paused .atmosphere{transform:none;transition:none}
@media(min-width:1500px){.page{padding-left:80px;padding-right:80px}.map-section{max-width:1250px}.intro{margin-top:50px}}
@media(max-width:760px){
 .page{padding:14px 22px 0;overflow:hidden}
 .header{min-height:65px}.logo{width:186px;margin-left:-11px}.header-label{font-size:9px;letter-spacing:2px;gap:7px}
 .desktop-word{display:none}.mobile-word{display:inline}.mobile-break{display:block}
 .intro{text-align:left;margin:30px 0 0}.eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:15px}
 h1{font-size:clamp(30px,8.6vw,54px);letter-spacing:-1.4px;line-height:1.14}.subtitle{font-size:14px;margin-top:14px}
 .map-section{margin:18px -22px 4px}.map-caption{display:none}
 .world.desktop{display:none}.world.mobile{display:block}
 .pin text{font-size:11px}.pin-hit{fill-opacity:.94}.leader{stroke-width:.7}.core{r:3;stroke-width:1.8}.halo{r:9}
 .regions{grid-template-columns:1fr;gap:10px;margin-bottom:28px}
 .region-card{min-height:76px;padding:14px 18px;gap:16px;border-radius:8px}.region-number{font-size:9px;padding-top:4px}.region-copy{gap:4px}.region-copy strong{font-size:17px}.region-copy>span{font-size:12px}.arrow{font-size:23px}
 footer{padding:18px 0 22px;font-size:9px;flex-wrap:wrap;gap:12px}.footer-year{display:none}.motion-toggle{font-size:9px;min-height:36px;margin-left:auto}
}
@media(max-width:360px){.page{padding-left:18px;padding-right:18px}.map-section{margin-left:-18px;margin-right:-18px}.logo{width:162px}.intro{margin-top:20px}.eyebrow{letter-spacing:1px}.region-card{min-height:72px}.region-copy strong{font-size:16px}footer>span:first-child{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.atmosphere{transform:none!important}}

body.motion-enabled:not(.motion-paused) .halo{animation:breathe 4s ease-in-out infinite}
[hidden]{display:none!important}
.error-page{max-width:800px;margin:15vh auto;padding:24px}.error-page p{line-height:1.8}.error-page .region-card{margin-top:32px;max-width:300px;justify-content:space-between}
@media(prefers-reduced-motion:reduce){body.motion-enabled .halo{animation:none!important}}

.header-lines{display:flex;flex-direction:column;gap:6px;line-height:1.4}.header-lines>span:last-child{color:#9cb2c0;letter-spacing:2px}
@media(max-width:760px){.header .logo{width:166px;max-width:48%}.header-label{font-size:8px;letter-spacing:1.2px;gap:7px}.header-lines{gap:4px}.header-lines>span:last-child{letter-spacing:1.2px}}
@media(max-width:360px){.header .logo{width:143px}.header-label{font-size:7px;letter-spacing:1px}}

/* Fixed vector icons cannot be substituted with platform emoji. */
.pin-arrow{color:#86d5f5;pointer-events:none}
.region-card{display:grid;grid-template-columns:18px minmax(0,1fr) 24px;column-gap:16px}
.region-copy{min-width:0}
.region-copy strong{overflow-wrap:normal}
.arrow{display:block;width:24px;height:24px;margin:0;justify-self:end;flex-shrink:0;color:#c7e5f3}
.territories{pointer-events:none}
.territory{fill:#258ec3;fill-opacity:.45;stroke:#63d1ff;stroke-width:1.3;stroke-linejoin:round;opacity:0;transition:opacity 160ms ease-out}
.territory.is-active{opacity:1}
@media(max-width:760px){.region-card{padding:17px 18px;min-height:82px}.region-copy strong{font-size:16px;line-height:1.35}.arrow{width:23px;height:23px}.territory{stroke-width:1.1}}
@media(prefers-reduced-motion:reduce){.territory{transition:none}}