body.blue #geography { position: relative; overflow: hidden; background: radial-gradient(at 75% 40%, rgb(18, 58, 118) 0%, rgb(11, 36, 82) 42%, rgb(7, 28, 66) 100%); padding: 85px 0px 70px; color: rgb(232, 243, 255); }
body.blue #geography::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background-image: radial-gradient(rgba(154, 198, 255, 0.145) 0.7px, transparent 0.8px); background-size: 23px 23px; opacity: 0.5; }
body.blue #geography .geo-layout { position: relative; display: grid; grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 1.35fr); gap: 35px; align-items: center; min-height: 650px; }
body.blue #geography .geo-layout > div:first-child { position: relative; z-index: 2; max-width: 490px; }
body.blue #geography h2 { font-size: clamp(38px, 4.1vw, 62px); line-height: 1.08; letter-spacing: -0.055em; color: rgb(241, 247, 255); margin: 25px 0px; }
body.blue #geography .geo-layout > div > p { font-size: 16px; line-height: 1.75; max-width: 400px; color: rgb(173, 199, 233); margin: 0px 0px 30px; }
body.blue #geography .eyebrow { color: rgb(142, 180, 227); }
body.blue #geography .geo-visual { position: relative; height: 690px; min-width: 0px; width: 100%; background: none; border: 0px; overflow: visible; border-radius: 0px; box-shadow: none; isolation: isolate; }
body.blue #geography .geo-visual::after, body.blue #geography .geo-visual::before { display: none; }
body.blue #geography .globe-stage { position: absolute; inset: 0px -30px 60px; min-width: 0px; }
#payment-globe { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
#payment-globe.is-dragging { cursor: grabbing; }
.globe-route-badge { position: absolute; top: 10%; right: 7%; display: flex; gap: 8px; align-items: center; pointer-events: none; padding: 9px 14px; border: 1px solid rgba(119, 185, 255, 0.27); border-radius: 30px; background: rgba(10, 33, 70, 0.9); color: rgb(188, 227, 255); font-size: 10px; letter-spacing: 0.05em; backdrop-filter: blur(8px); }
.globe-route-badge i { width: 6px; height: 6px; border-radius: 50%; background: rgb(128, 212, 255); box-shadow: rgb(102, 196, 255) 0px 0px 14px; }
.globe-interaction-hint { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; color: rgb(143, 178, 223); pointer-events: none; }
body.blue #geography .geo-country-card { position: absolute; inset: auto 15px 0px auto; width: 300px; max-width: calc(100% - 30px); padding: 24px; border: 1px solid rgba(120, 180, 255, 0.25); border-radius: 18px; background: rgba(18, 53, 108, 0.74); box-shadow: rgba(2, 14, 39, 0.2) 0px 18px 55px; backdrop-filter: blur(16px); z-index: 2; }
body.blue #geography .geo-country-card h3 { font-size: 30px; margin: 15px 0px 20px; color: rgb(242, 247, 255); }
body.blue #geography .geo-country-card > div { padding: 12px 0px; border-color: rgba(122, 171, 235, 0.15); gap: 14px; font-size: 11px; color: rgb(151, 184, 227); }
body.blue #geography .geo-country-card > div strong { color: rgb(225, 238, 255); font-size: 11px; text-align: right; font-weight: 450; }
body.blue #geography .geo-country-card .eyebrow { font-size: 8px; }
body.blue #geography .geo-country-list { max-width: 410px; }
body.blue #geography .geo-country-list button { color: rgb(148, 181, 224); border-color: rgba(107, 157, 220, 0.25); font-size: 14px; }
body.blue #geography .geo-country-list button.active { color: rgb(233, 246, 255); }
body.blue #geography .geo-country-list button.active::after { background: rgb(155, 221, 255); }
body.blue #geography .geo-country-card .button { margin-top: 12px; --cta-bg: #dfedff; --cta-fg: #0048e4; font-size: 14px; }
@media (max-width: 1050px) {
  body.blue #geography .geo-layout { gap: 10px; grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr); }
  body.blue #geography .geo-visual { height: 590px; }
  .globe-route-badge { right: 0px; font-size: 8px; }
  body.blue #geography .geo-country-card { right: 0px; width: 280px; padding: 22px; }
}
@media (max-width: 700px) {
  body.blue #geography { padding: 65px 0px 60px; }
  body.blue #geography .geo-layout { display: flex; flex-direction: column; gap: 20px; min-height: 0px; }
  body.blue #geography .geo-layout > div:first-child { width: 100%; max-width: none; text-align: center; }
  body.blue #geography h2 { font-size: 38px; margin: 20px 0px; }
  body.blue #geography .geo-layout > div > p { font-size: 14px; max-width: 410px; margin: 0px auto 24px; }
  body.blue #geography .geo-country-list { margin: 0px auto; max-width: none; text-align: left; }
  body.blue #geography .geo-country-list button { font-size: 13px; }
  body.blue #geography .geo-visual { height: auto; min-height: 0px; overflow: visible; padding-top: 340px; }
  body.blue #geography .globe-stage { inset: 0px -15px auto; height: 340px; }
  .globe-route-badge { top: 5%; right: 4%; font-size: 8px; padding: 8px 11px; }
  .globe-interaction-hint { bottom: 6%; font-size: 9px; }
  body.blue #geography .geo-country-card { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; padding: 24px; border-radius: 18px; }
  body.blue #geography .geo-country-card h3 { font-size: 30px; }
  body.blue #geography .geo-country-card > div, body.blue #geography .geo-country-card > div strong { font-size: 12px; }
  body.blue #geography .geo-country-card .eyebrow { font-size: 9px; }
}
body.blue #geography .geo-visual { display: block; }
body.blue #geography .geo-country-card { margin: 0px; }

/* Transparent, softly lit sphere under the WebGL particle network. */
body.blue #geography .globe-stage:before{content:'';position:absolute;left:var(--globe-x,50%);top:var(--globe-y,45%);width:var(--globe-diameter,80%);height:var(--globe-diameter,80%);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle at 37% 30%,#15477b08 20%,#02152e14 67%,#7ebaff26 96%,#b4d9ff20 99%,transparent 100%);box-shadow:inset 0 0 25px #9bd0ff1a,0 0 25px #6ca9fc0a}
body.blue #geography .globe-stage canvas{position:relative;z-index:1}
body.blue #geography .globe-route-badge,body.blue #geography .globe-interaction-hint{z-index:2}
.globe-location-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.globe-country-marker{position:absolute;transform:translate(5px,var(--label-shift,-17px));font-size:9px;line-height:1.4;padding:3px 7px;border:1px solid #7baff533;background:#0a2146d9;border-radius:20px;color:#a5c8ed;white-space:nowrap}
.globe-country-marker:before{content:'';position:absolute;left:-6px;bottom:4px;width:4px;height:4px;border-radius:50%;background:#addaff;box-shadow:0 0 7px #8accff}
.globe-country-marker.is-active{color:#e1f4ff;border-color:#75c7ff70}
.globe-country-marker[hidden]{display:none}
@media(max-width:700px){.globe-country-marker{font-size:7px;padding:2px 5px}.globe-country-marker:not(.is-active){display:none}}
body.blue #geography .geo-country-list button{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.blue #geography .geo-currency-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #94b5e035;border-radius:50%;color:inherit;background:#a4cdff08;transition:background .2s,border-color .2s}
body.blue #geography .geo-currency-icon svg{width:17px;height:17px}
body.blue #geography .geo-country-list button.active .geo-currency-icon,body.blue #geography .geo-country-list button:hover .geo-currency-icon{border-color:#b3ddff80;background:#a4cdff18}
@media(max-width:700px){body.blue #geography .geo-currency-icon{flex-basis:26px;width:26px;height:26px}body.blue #geography .geo-currency-icon svg{width:15px;height:15px}}
body.blue #geography .geo-country-list button>span{opacity:1}

/* Larger globe with a taller rendering area so northern arcs stay visible. */
@media(min-width:701px){body.blue #geography .geo-visual{height:760px}body.blue #geography .globe-stage{inset:-70px -65px 0}}
@media(min-width:701px) and (max-width:1050px){body.blue #geography .geo-visual{height:660px}body.blue #geography .globe-stage{inset:-55px -35px 0}}
@media(max-width:700px){body.blue #geography .geo-visual{padding-top:420px}body.blue #geography .globe-stage{height:420px}}

/* The globe explains destinations; enquiry follows the selected country. */
body.blue #geography .geo-enquiry{margin-top:28px}
@media(max-width:700px){body.blue #geography .geo-enquiry{width:100%;margin-top:24px}body.blue #geography .geo-visual{padding-top:0;height:420px}body.blue #geography h2{font-size:34px}}
