@font-face { font-family: "Atlas Display"; src: url("/atlas/fonts/libre-caslon-display-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Atlas Sans"; src: url("/atlas/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atlas Sans"; src: url("/atlas/fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Atlas Sans"; src: url("/atlas/fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* Metric-matched fallbacks (measured in Chromium 29 Oct 2026: same headline width as Libre Caslon Display / Manrope), so the
   arrival does not reflow when the brand fonts arrive. Overrides are divided by size-adjust. */
@font-face { font-family: "Atlas Display Fallback"; src: local("Georgia"); size-adjust: 83.1%; ascent-override: 116.7%; descent-override: 32.5%; line-gap-override: 0%; }
@font-face { font-family: "Atlas Display Fallback T"; src: local("Times New Roman"); size-adjust: 91.6%; ascent-override: 105.9%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: "Atlas Sans Fallback"; src: local("Arial"); size-adjust: 103.8%; ascent-override: 103.1%; descent-override: 28.9%; line-gap-override: 0%; }

/* ---- Homepage v5 "The Lab Observatory" hero (ObservatoryHero.tsx + shared/homeObservatoryShell.ts obsHeroHtml). Served
   byte-identical as /home/observatory.css for the phone first paint (a test holds the two files together).
   Motion is transform/opacity only; reduced motion = still plate, still globe, Milo standing. */
.ob {
  --ink: #050a1a; --line: rgba(169, 236, 228, 0.22); --teal: #2fd3c6; --teal-soft: #a9ece4; --copper: #f3a55a; --gold: #ffd9a3; --ivory: #f4f1ea;
  --display: "Atlas Display", "Atlas Display Fallback", "Atlas Display Fallback T", Georgia, serif;
  --sans: "Atlas Sans", "Atlas Sans Fallback", Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fx: 0.62; --fy: 0.5; --p: 0; --mx: 0; --my: 0;
  position: relative; isolation: isolate; overflow: hidden; min-height: max(720px, 100svh); background: var(--ink); color: var(--ivory); font-family: var(--sans);
}
.ob *, .ob *::before, .ob *::after { box-sizing: border-box; }

/* the world: a 16:9 stage that always covers the hero, so plate, globe, screens and Milo share one coordinate system */
.ob-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; }
.ob-stage {
  --stage-w: max(100cqw, 177.78cqh); position: absolute; aspect-ratio: 16 / 9; width: var(--stage-w);
  left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); translate: calc(var(--fx) * -100%) calc(var(--fy) * -100%);
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--p) * 90px + var(--my) * -6px), 0) scale(calc(1 + var(--p) * 0.1)); transform-origin: 79% 60%;
}
@supports not (width: 1cqw) { .ob-stage { inset: 0; width: 100%; height: 100%; translate: none; } }
.ob-plate, .ob-plate img, .ob-plate__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-plate__video { opacity: 0; transition: opacity 1.4s ease; }
.ob-plate__video.is-in { opacity: 1; }

/* scrims: copy side, header band, the bottom hand-off into the labs, and the descent's darkening */
.ob-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 8, 22, 0.78) 0px, rgba(4, 8, 22, 0.35) 110px, rgba(4, 8, 22, 0) 190px),
    linear-gradient(95deg, rgba(4, 8, 22, 0.92) 0%, rgba(4, 8, 22, 0.78) 30%, rgba(4, 8, 22, 0.25) 52%, rgba(4, 8, 22, 0) 64%),
    linear-gradient(0deg, #060b1d 0%, rgba(6, 11, 29, 0.6) 10%, rgba(6, 11, 29, 0) 26%);
}
.ob-shade::after { content: ""; position: absolute; inset: 0; background: #060b1d; opacity: calc(var(--p) * 0.7); }

/* the pedestal's light column and projector ring (decorative) */
.ob-beam { position: absolute; left: 79.1%; top: 46%; width: 9%; height: 23%; translate: -50% 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255, 214, 150, 0.55), rgba(255, 190, 110, 0.12) 60%, rgba(255, 190, 110, 0) 100%);
  filter: blur(2px); animation: ob-breathe 6s ease-in-out infinite; }
.ob-ring { position: absolute; left: 79.1%; top: 67.2%; width: 15%; aspect-ratio: 4 / 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 214, 150, 0.55); box-shadow: 0 0 24px rgba(255, 190, 110, 0.5), inset 0 0 18px rgba(47, 211, 198, 0.35);
  animation: ob-breathe 6s ease-in-out infinite; }

/* the holographic globe (still image first; the lazy three.js canvas fades in over it) */
.ob-globe { position: absolute; left: 79.2%; top: 43%; width: 23.5%; aspect-ratio: 1; translate: -50% -50%;
  transform: translate3d(calc(var(--mx) * -16px), calc(var(--p) * 120px + var(--my) * -10px), 0) scale(calc(1 - var(--p) * 0.28)); }
/* the canvas (and its still) overscan the globe box by 30% so the halo is never clipped (GLOBE_VIEW.overscan) */
.ob-globe__still, .ob-globe__canvas { position: absolute; inset: -15%; width: 130%; height: 130%; max-width: none; display: block; } /* preflight caps img at 100% */
.ob-globe__canvas { opacity: 0; transition: opacity 0.9s ease; }
.ob-globe.is-live .ob-globe__canvas { opacity: 1; }
.ob-globe.is-live .ob-globe__still { opacity: 0; transition: opacity 0.9s ease 0.2s; }
.ob-pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ob-pins li { position: absolute; left: calc(50% + var(--x, 0) * 46.5%); top: calc(50% + var(--y, 0) * 46.5%); translate: -50% -50%; transition: opacity 0.3s ease; }
.ob-pins li[data-back], .ob-pins li[data-empty] { opacity: 0; pointer-events: none; }
.ob-pin { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; text-decoration: none; color: inherit; }
.ob-pin::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4dd, #ffc27a 55%, #e0802f); box-shadow: 0 0 12px rgba(255, 194, 122, 0.95), 0 0 0 3px rgba(255, 194, 122, 0.25); }
.ob-pin::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(255, 214, 150, 0.8); animation: ob-ping 2.6s ease-out infinite; }
.ob-pin__label { position: absolute; left: 50%; bottom: calc(100% + 2px); translate: -50% 0; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(6, 12, 30, 0.86); border: 1px solid var(--line); font: 600 0.75rem/1.3 var(--sans); color: var(--ivory); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.ob-pin:hover .ob-pin__label, .ob-pin:focus-visible .ob-pin__label, .ob-pin[aria-expanded="true"] .ob-pin__label { opacity: 1; }
.ob-pin:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* glass lab screens in a slow orbit around the globe (decorative; each is a real lab loop) */
.ob-orbit { position: absolute; left: 79.2%; top: 43%; width: 0; height: 0; pointer-events: none; }
.ob-screen { position: absolute; left: 0; top: 0; width: calc(var(--stage-w, 1600px) * 0.078); aspect-ratio: 16 / 10; translate: -50% -50%; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(169, 236, 228, 0.5); background: #0b1530; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(47, 211, 198, 0.28);
  animation: ob-orbit 64s linear infinite; animation-delay: calc(var(--i) * -16s); }
.ob-screen img, .ob-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-screen video { opacity: 0; transition: opacity 0.6s ease; }
.ob-screen video.is-in { opacity: 1; }
.ob-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 40%); }

/* Milo on the marble floor beside the pedestal */
/* Milo stands on the marble floor left of the pedestal; his bubble floats to his upper left (never over the globe) */
.ob-milo { position: absolute; left: 63.2%; top: 87%; width: 12.6%; translate: -50% -100%; display: block; text-decoration: none; color: inherit; }
.ob-milo__fig { display: block; width: 100%; }
.ob[data-intro] .ob-milo__fig { animation: ob-walkin 1.7s cubic-bezier(0.25, 0.8, 0.3, 1) 0.4s both; }
.ob-milo__fig img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)); animation: ob-bob 3.4s ease-in-out 2.2s infinite; }
.ob-milo__bubble { position: absolute; right: 74%; bottom: 74%; width: max-content; max-width: 250px; padding: 10px 14px; border-radius: 16px 16px 16px 5px; background: rgba(244, 241, 234, 0.96); color: #0a1430;
  font: 600 0.92rem/1.35 var(--sans); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.ob[data-intro] .ob-milo__bubble { animation: ob-pop 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) 2.1s both; }
.ob-milo__name { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #a1471a; }
.ob-milo:hover .ob-milo__bubble { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--teal); }
.ob-milo:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 12px; }

/* copy over the dark half */
.ob-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: max(720px, 100svh); width: min(600px, 46vw);
  padding: 112px 0 72px max(24px, 6vw); opacity: calc(1 - var(--p) * 1.4); transform: translateY(calc(var(--p) * -40px)); }
.ob-eyebrow { margin: 0; font: 600 0.78rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-soft); }
.ob-title { margin: 0.45em 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance;
  color: var(--ivory); background: linear-gradient(100deg, var(--ivory) 0 42%, #fff7e2 50%, var(--ivory) 58% 100%) 120% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 2px 30px rgba(4, 8, 24, 0.55); }
.ob-sub { margin: 0.85em 0 0; max-width: 27em; min-height: calc(3 * 1.55em); font-size: clamp(1.04rem, 1.2vw, 1.2rem); line-height: 1.55; font-weight: 500; color: rgba(244, 241, 234, 0.9); }
.ob-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ob-cta { display: inline-flex; align-items: center; justify-content: center; min-width: 13.5em; min-height: 50px; padding: 12px 22px; border-radius: 14px; font: 600 1rem/1.2 var(--sans); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.ob-cta--primary { color: #1c0d02; background: linear-gradient(180deg, #ffd29c, #f3a55a); box-shadow: 0 0 0 1px rgba(255, 214, 150, 0.5), 0 12px 34px rgba(243, 165, 90, 0.38), 0 0 46px rgba(255, 190, 110, 0.28); }
.ob-cta--ghost { color: var(--ivory); background: rgba(10, 20, 44, 0.45); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.ob-cta:hover { transform: translateY(-2px); }
.ob-cta--ghost:hover { border-color: var(--teal); }
.ob-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 24px; }
.ob-chips__label { flex-basis: 100%; font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 241, 234, 0.74); }
.ob-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-chip { display: inline-flex; align-items: center; justify-content: center; width: 76px; min-height: 44px; border-radius: 999px; font: 600 0.98rem/1 var(--sans); color: var(--ivory); text-decoration: none;
  background: rgba(10, 20, 44, 0.45); border: 1px solid var(--line); backdrop-filter: blur(6px); transition: border-color 0.2s ease, background-color 0.2s ease; }
.ob-chip:hover { border-color: var(--teal); }
.ob-chip[aria-current="true"] { border-color: var(--teal); background: rgba(47, 211, 198, 0.2); box-shadow: 0 0 18px rgba(47, 211, 198, 0.3); }
.ob-cta:focus-visible, .ob-chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* places under the globe (phones only; desktop has the pins) */
.ob-places { display: none; }
/* the card a pin blooms into (React only) */
.ob-card { position: absolute; z-index: 5; width: min(320px, 86vw); padding: 12px; border-radius: 16px; background: rgba(8, 16, 40, 0.86); border: 1px solid rgba(169, 236, 228, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(47, 211, 198, 0.18); backdrop-filter: blur(12px); color: var(--ivory); animation: ob-bloom 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.ob-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #0b1530; }
.ob-card__media img, .ob-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-card__kicker { margin: 10px 2px 0; font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ob-card__name { margin: 2px 2px 0; font: 400 1.35rem/1.15 var(--display); }
.ob-card__name:focus { outline: none; }
.ob-card__line { margin: 4px 2px 0; font-size: 0.9rem; line-height: 1.45; color: rgba(244, 241, 234, 0.84); }
.ob-card__open { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 14px; border-radius: 10px; background: rgba(47, 211, 198, 0.16); border: 1px solid rgba(47, 211, 198, 0.55); color: var(--ivory); font-weight: 600; text-decoration: none; }
.ob-card__more { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 2px 0; padding: 0; list-style: none; font-size: 0.88rem; }
.ob-card__more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal-soft); font-weight: 600; }
.ob-card__close { position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(4, 8, 22, 0.75); color: var(--ivory); font-size: 1.2rem; cursor: pointer; }
.ob-card a:focus-visible, .ob-card button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

@keyframes ob-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes ob-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ob-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ob-walkin { from { transform: translateX(-70%); opacity: 0; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ob-pop { from { transform: scale(0.85) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ob-bloom { from { transform: scale(0.92) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ob-sweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }
/* an ellipse around the globe: front (bright, large) -> side -> behind (small, faint) -> side */
@keyframes ob-orbit {
  0% { transform: translate(calc(var(--stage-w, 1600px) * 0.168), calc(var(--stage-w, 1600px) * 0.035)) scale(1); opacity: 0.95; }
  12.5% { transform: translate(calc(var(--stage-w, 1600px) * 0.12), calc(var(--stage-w, 1600px) * 0.11)) scale(1.06); opacity: 1; }
  25% { transform: translate(calc(var(--stage-w, 1600px) * 0), calc(var(--stage-w, 1600px) * 0.135)) scale(1.1); opacity: 1; }
  37.5% { transform: translate(calc(var(--stage-w, 1600px) * -0.12), calc(var(--stage-w, 1600px) * 0.11)) scale(1.06); opacity: 1; }
  50% { transform: translate(calc(var(--stage-w, 1600px) * -0.168), calc(var(--stage-w, 1600px) * 0.035)) scale(0.95); opacity: 0.9; }
  62.5% { transform: translate(calc(var(--stage-w, 1600px) * -0.12), calc(var(--stage-w, 1600px) * -0.06)) scale(0.78); opacity: 0.42; }
  75% { transform: translate(calc(var(--stage-w, 1600px) * 0), calc(var(--stage-w, 1600px) * -0.085)) scale(0.7); opacity: 0.28; }
  87.5% { transform: translate(calc(var(--stage-w, 1600px) * 0.12), calc(var(--stage-w, 1600px) * -0.06)) scale(0.78); opacity: 0.42; }
  100% { transform: translate(calc(var(--stage-w, 1600px) * 0.168), calc(var(--stage-w, 1600px) * 0.035)) scale(1); opacity: 0.95; }
}
.ob[data-intro].is-ready .ob-title { animation: ob-sweep 2.6s ease 0.5s 1 both; }


/* ==== round 2 (lead art direction, 1 Nov) ==== */
.ob { background: #060b1d; }
/* 8: no hard edge: the plate feathers into the page over its bottom quarter */
.ob-scene { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%); }
.ob-shade { background:
    linear-gradient(180deg, rgba(4, 8, 22, 0.78) 0px, rgba(4, 8, 22, 0.35) 110px, rgba(4, 8, 22, 0) 190px),
    linear-gradient(95deg, rgba(4, 8, 22, 0.92) 0%, rgba(4, 8, 22, 0.78) 30%, rgba(4, 8, 22, 0.25) 52%, rgba(4, 8, 22, 0) 64%); }

/* 1: the pedestal projects the globe: a soft volumetric column from the glowing bowl into the globe, slow shimmer */
.ob-beam { left: 79.2%; top: 30%; width: 13%; height: 38.5%; translate: -50% 0; filter: none; animation: none; mix-blend-mode: screen; opacity: calc(1 - var(--p) * 1.4);
  background: radial-gradient(46% 100% at 50% 100%, rgba(255, 226, 170, 0.85), rgba(255, 205, 140, 0.38) 45%, rgba(255, 190, 110, 0) 80%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(0deg, #000 0%, #000 55%, transparent 100%); }
.ob-beam i { position: absolute; left: 50%; bottom: 0; width: 38%; height: 100%; translate: -50% 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: linear-gradient(0deg, rgba(255, 246, 220, 0.95), rgba(170, 248, 238, 0.5) 55%, rgba(120, 240, 230, 0) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0 7px, rgba(255, 255, 255, 0.10) 7px 9px);
  filter: blur(3px); animation: ob-shimmer 5.5s ease-in-out infinite; }
@keyframes ob-shimmer { 0%, 100% { opacity: 0.72; transform: scaleX(1); } 40% { opacity: 1; transform: scaleX(1.08); } 70% { opacity: 0.85; transform: scaleX(0.96); } }

/* 2: the globe ~8% larger; 8: it shrinks and fades toward the labs as the visitor scrolls */
.ob-globe { top: 42.5%; width: 25.4%;
  transform: translate3d(calc(var(--mx) * -16px), calc(var(--p) * 240px + var(--my) * -10px), 0) scale(calc(1 - var(--p) * 0.5)); opacity: calc(1 - var(--p) * 1.15); }
.ob-orbit { top: 42.5%; opacity: calc(1 - var(--p) * 1.6); }
.ob-ring { opacity: calc(1 - var(--p) * 1.4); }
.ob-milo { opacity: calc(1 - var(--p) * 1.8); }

/* 3: premium glass orbit screens, tilted toward the globe, each with its label; the radius never lets one clip the viewport */
.ob-stage { --gxv: calc(0.792 * var(--stage-w) - var(--fx) * (var(--stage-w) - 100cqw));
  --rx: min(calc(var(--stage-w) * 0.168), calc(100cqw - var(--gxv) - var(--stage-w) * 0.046 - 22px)); --ry: calc(var(--stage-w) * 0.138); }
.ob-screen { width: calc(var(--stage-w, 1600px) * 0.082); aspect-ratio: auto; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; animation: ob-orbit2 64s linear infinite; animation-delay: calc(var(--i) * -16s); }
.ob-screen::after { content: none; }
.ob-screen__glass { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; padding: 3px;
  background: rgba(14, 30, 64, 0.35); border: 1px solid rgba(110, 240, 228, 0.75); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(47, 211, 198, 0.12), 0 0 18px rgba(47, 211, 198, 0.35), 0 16px 34px rgba(0, 0, 0, 0.5); }
.ob-screen__glass img, .ob-screen__glass video { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; border-radius: 9px; display: block; }
.ob-screen__glass video { opacity: 0; transition: opacity 0.6s ease; }
.ob-screen__glass video.is-in { opacity: 1; }
.ob-screen__glass::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0) 52%); }
.ob-screen__chip { padding: 3px 9px; border-radius: 999px; white-space: nowrap; font: 600 0.75rem/1.3 var(--sans); color: var(--ivory);
  background: rgba(6, 12, 30, 0.78); border: 1px solid rgba(169, 236, 228, 0.35); }
@keyframes ob-orbit2 {
  0% { transform: perspective(900px) translate(var(--rx), calc(var(--ry) * 0.25)) rotateY(-18deg) scale(1); opacity: 0.95; }
  12.5% { transform: perspective(900px) translate(calc(var(--rx) * 0.714), calc(var(--ry) * 0.8)) rotateY(-10deg) scale(1.05); opacity: 1; }
  25% { transform: perspective(900px) translate(0px, var(--ry)) rotateY(0deg) scale(1.08); opacity: 1; }
  37.5% { transform: perspective(900px) translate(calc(var(--rx) * -0.714), calc(var(--ry) * 0.8)) rotateY(10deg) scale(1.05); opacity: 1; }
  50% { transform: perspective(900px) translate(calc(var(--rx) * -1), calc(var(--ry) * 0.25)) rotateY(18deg) scale(0.95); opacity: 0.9; }
  62.5% { transform: perspective(900px) translate(calc(var(--rx) * -0.714), calc(var(--ry) * -0.43)) rotateY(10deg) scale(0.78); opacity: 0.42; }
  75% { transform: perspective(900px) translate(0px, calc(var(--ry) * -0.62)) rotateY(0deg) scale(0.7); opacity: 0.26; }
  87.5% { transform: perspective(900px) translate(calc(var(--rx) * 0.714), calc(var(--ry) * -0.43)) rotateY(-10deg) scale(0.78); opacity: 0.42; }
  100% { transform: perspective(900px) translate(var(--rx), calc(var(--ry) * 0.25)) rotateY(-18deg) scale(1); opacity: 0.95; }
}

/* 4: Milo's bubble: warm glass, gold edge, soft glow, the tail pointing at him */
.ob-milo__bubble { background: rgba(10, 18, 42, 0.72); color: #f8f2e4; border: 1px solid rgba(255, 210, 150, 0.85); backdrop-filter: blur(10px);
  box-shadow: 0 0 22px rgba(255, 196, 122, 0.25), 0 14px 34px rgba(0, 0, 0, 0.5); border-radius: 16px 16px 5px 16px; }
.ob-milo__bubble::after { content: ""; position: absolute; right: -7px; bottom: 12px; width: 13px; height: 13px; rotate: 45deg; background: rgba(10, 18, 42, 0.9);
  border-top: 1px solid rgba(255, 210, 150, 0.85); border-right: 1px solid rgba(255, 210, 150, 0.85); }
.ob-milo__name { color: #ffc98c; }

/* 5: the connector from a pin to its card */
.ob-link { position: absolute; left: 0; top: 0; z-index: 4; height: 1px; transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 214, 150, 0.95), rgba(110, 240, 228, 0.55)); box-shadow: 0 0 8px rgba(255, 200, 130, 0.6); }

/* 6: the proof line under the chips */
.ob-proof { margin: 18px 0 0; font: 500 0.92rem/1.45 var(--sans); color: rgba(244, 241, 234, 0.82); }
.ob-proof::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); vertical-align: 1px; }

/* 9: Milo's sticky guide button */
.ob-dock { position: fixed; right: max(16px, calc(env(safe-area-inset-right) + 16px)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)); z-index: 45;
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 5px 16px 5px 5px; border-radius: 999px; text-decoration: none;
  background: rgba(10, 18, 42, 0.86); border: 1px solid rgba(255, 210, 150, 0.8); color: #f8f2e4; font: 600 0.95rem/1 var(--sans, sans-serif);
  box-shadow: 0 0 24px rgba(255, 196, 122, 0.28), 0 14px 30px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(24px) scale(0.85); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.ob-dock.is-on { opacity: 1; transform: none; pointer-events: auto; animation: ob-hop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.ob-dock:focus-visible { outline: 3px solid #2fd3c6; outline-offset: 3px; }
.ob-dock__face { display: block; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #23386e, #0a1430); border: 1px solid rgba(255, 210, 150, 0.6); }
.ob-dock__face img { display: block; width: 100%; height: auto; max-width: none; transform: translateY(-4%) scale(1.5); transform-origin: 50% 18%; }
@keyframes ob-hop { 0% { transform: translateY(26px) scale(0.8); opacity: 0; } 55% { transform: translateY(-10px) scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ---- phones: the copy first, then the observatory in a window focused on the pedestal and globe */
@media (max-width: 760px) {
  .ob { --fx: 1; --fy: 0.58; display: flex; flex-direction: column; min-height: 0; } /* the stage's right edge on the screen's: the globe centres */
  .ob-copy { order: 0; width: auto; min-height: 0; padding: 100px 20px 10px; opacity: 1; transform: none; }
  .ob-scene { position: relative; inset: auto; order: 1; height: clamp(380px, 60svh, 520px); }
  .ob-shade { background: linear-gradient(180deg, #050a1a 0%, rgba(5, 10, 26, 0) 22%), linear-gradient(0deg, #060b1d 0%, rgba(6, 11, 29, 0) 24%); }
  .ob-title { font-size: clamp(2.05rem, 9vw, 2.6rem); }
  .ob-sub { min-height: 0; font-size: 1rem; }
  .ob-cta { flex: 1 1 auto; min-width: 0; }
  .ob-chip { width: 68px; }
  .ob-milo { left: 66%; width: 17%; }
  .ob-milo__bubble { right: auto; left: 30%; bottom: 96%; max-width: 160px; font-size: 0.8rem; padding: 8px 10px; border-radius: 16px 16px 16px 5px; }
  .ob-screen:nth-child(n + 3) { display: none; }
  .ob-pins li { pointer-events: none; }
  .ob-places { display: block; order: 2; position: relative; z-index: 2; margin-top: -54px; padding: 0 16px 8px; }
  .ob-places ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ob-place { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; font: 600 0.92rem/1 var(--sans); color: var(--ivory); text-decoration: none;
    background: rgba(10, 20, 44, 0.7); border: 1px solid rgba(255, 214, 150, 0.45); backdrop-filter: blur(6px); }
  .ob-place::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #ffc27a; box-shadow: 0 0 10px #ffc27a; }
  .ob-place[aria-current="true"] { border-color: var(--teal); background: rgba(47, 211, 198, 0.2); }
  .ob-place:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  .ob-card { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
}
@media (min-width: 761px) and (max-width: 1100px) { .ob-copy { width: min(560px, 52vw); } .ob-milo__bubble { font-size: 0.82rem; } }

@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before, .ob *::after { animation: none !important; transition: none !important; }
  .ob-stage, .ob-globe, .ob-copy { transform: none !important; }
  .ob-pin::after { display: none; }
}

/* ---- round 2, phones (7): the observatory band FIRST (pedestal, globe and a smaller Milo), the H1 overlapping its lower
   edge over a scrim, then the CTAs, chips, proof line and the places */
@media (max-width: 760px) {
  .ob { --fy: 0.5; }
  .ob-scene { order: 0; height: clamp(360px, 50svh, 420px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
  .ob-shade { background: linear-gradient(180deg, rgba(5, 10, 26, 0.75) 0px, rgba(5, 10, 26, 0) 110px); }
  .ob-copy { order: 1; position: relative; z-index: 3; margin-top: -92px; padding: 0 20px 6px; opacity: 1; transform: none; }
  .ob-copy::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 150px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 11, 29, 0) 0%, rgba(6, 11, 29, 0.82) 45%, #060b1d 100%); }
  .ob-eyebrow { font-size: 0.75rem; }
  .ob-places { order: 2; margin-top: 4px; padding: 6px 16px 10px; }
  .ob-globe { top: 40%; width: 27%; }
  .ob-beam { top: 27.5%; width: 14%; height: 40%; }
  .ob-orbit { top: 40%; }
  .ob-milo { left: 64%; top: 73%; width: 13%; }
  .ob-milo__bubble { left: -30%; right: auto; bottom: 102%; width: max-content; max-width: 150px; border-radius: 14px 14px 14px 5px; }
  .ob-milo__bubble::after { right: auto; left: 22px; bottom: -7px; rotate: 135deg; }
  .ob-screen__chip { display: none; }
  .ob-proof { font-size: 0.86rem; }
  .ob-dock { bottom: max(14px, calc(env(safe-area-inset-bottom) + 14px)); right: max(12px, calc(env(safe-area-inset-right) + 12px)); }
  .ob-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-dock, .ob-dock.is-on { animation: none !important; transition: opacity 0.2s ease !important; transform: none !important; }
  .ob-beam i { animation: none !important; }
}

/* phones <=430 px get the crop of the plate's right part (x 38-100%), placed exactly where it sits on the stage */
@media (max-width: 430px) { .ob-plate img { left: 38%; width: 62%; } .ob-plate__video { display: none; } }
.mt-fp--obs { background: #060b1d; }