/* ==========================================================================
   Ghandour Global Group — Home page stylesheet
   Hero orbit, strategy-panel sequence, final CTA/phone, globe-to-UAE transition.
   Requires css/base.css to be loaded first.
   ========================================================================== */

/* .home-flow itself (the dark gradient + grid overlay) moved to
   css/base.css - it's shared scaffolding every page's `X-flow` class
   builds on, not home-page-specific. */

.home-panel {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - var(--header-h, 72px));
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vw, 7rem);
}

.home-panel h1,
.home-panel h2 {
  color: var(--color-white);
}

.home-panel p {
  color: rgba(232, 237, 247, 0.82);
}

.home-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.home-copy {
  max-width: 680px;
}

.home-copy h1 {
  max-width: 19ch;
  font-size: clamp(2rem, 5vw, 4rem);
}

.home-copy p {
  max-width: 56ch;
  font-size: 1.1rem;
}

/* Tilt wrapper: js/main.js sets --tilt-x/--tilt-y from mouse position
   so the whole orbit leans subtly toward the cursor, and --hero-fade
   (0→1 while scrolling off the hero) sinks and dims the orbit as its
   energy transfers to the light trails below. */
.home-orbit-tilt {
  justify-self: center;
  transform:
    perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(calc(var(--hero-fade, 0) * 46px))
    scale(calc(1 - var(--hero-fade, 0) * 0.14));
  opacity: calc(1 - var(--hero-fade, 0) * 0.9);
  /* Slower, softer easing on the mouse-tilt response — a calmer,
     more premium float rather than a snappy follow. */
  transition: transform 0.5s cubic-bezier(0.16, 0.6, 0.2, 1);
  will-change: transform, opacity;
}

/* One ring only (was two, nested) — less visual noise around the core. */
.home-orbit {
  position: relative;
  width: min(28vw, 360px);
  aspect-ratio: 1;
  border: 1px solid rgba(232, 237, 247, 0.14);
  border-radius: 50%;
  /* Slowed from 30s: this ring is a purely decorative ambient accent (the
     hub/labels stay upright via the counter-rotation below, which must
     match this duration exactly to stay in sync), so a calmer speed here
     doesn't cost any legibility. */
  animation: home-orbit-spin 36s linear infinite;
}

.home-orbit::before {
  content: "";
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(77, 125, 255, 0.2);
  border-radius: 50%;
}

.home-orbit-node {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: var(--font-primary);
  font-weight: 700;
}

/* Globe hub: a shaded sphere (conic sweep + glass highlight + inset
   shadow sell the roundness) with two tilted orbit bands wrapping it
   in real 3D space (rotateX'd ellipses on a preserve-3d parent) so it
   reads as a globe in orbit, not a flat disc. Counter-rotates so the
   GGG face stays upright inside the spinning ring. */
.home-hub-counter {
  --hub-s: min(10.5vw, 138px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hub-s);
  height: var(--hub-s);
  margin-left: calc(var(--hub-s) / -2);
  margin-top: calc(var(--hub-s) / -2);
  perspective: 560px;
  animation: home-orbit-counter 36s linear infinite;
}

.home-hub {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.home-hub-sphere {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-white);
  letter-spacing: 0.05em;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.5), transparent 34%),
    conic-gradient(from 210deg, #061029, #0040e0 45%, #061029 100%);
  border: 1px solid rgba(232, 237, 247, 0.4);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.14),
    inset 0 -12px 22px rgba(0, 0, 0, 0.5),
    0 0 44px rgba(0, 64, 224, 0.5);
}

.home-hub-band {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(122, 160, 255, 0.4);
  transform-style: preserve-3d;
}

.home-hub-band--one { transform: rotateX(72deg) rotateZ(-12deg); }
.home-hub-band--two { transform: rotateX(72deg) rotateZ(58deg); border-color: rgba(232, 237, 247, 0.28); }

/* Portfolio lines: thin connectors from the hub to each subsidiary
   node, brightening on that node's hover/focus (via :has(), no JS
   needed) — the concrete answer to "portfolio lines" in the brief. */
.home-portfolio-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(77, 125, 255, 0.55), transparent);
  opacity: 0.6;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.home-portfolio-line--one { transform: translateY(-50%) rotate(-90deg); }
.home-portfolio-line--two { transform: translateY(-50%) rotate(-10deg); }
.home-portfolio-line--three { transform: translateY(-50%) rotate(155deg); }
.home-portfolio-line--four { transform: translateY(-50%) rotate(-170deg); }

.home-orbit:has(.home-orbit-node--one:hover) .home-portfolio-line--one,
.home-orbit:has(.home-orbit-node--one:focus-visible) .home-portfolio-line--one,
.home-orbit:has(.home-orbit-node--two:hover) .home-portfolio-line--two,
.home-orbit:has(.home-orbit-node--two:focus-visible) .home-portfolio-line--two,
.home-orbit:has(.home-orbit-node--three:hover) .home-portfolio-line--three,
.home-orbit:has(.home-orbit-node--three:focus-visible) .home-portfolio-line--three,
.home-orbit:has(.home-orbit-node--four:hover) .home-portfolio-line--four,
.home-orbit:has(.home-orbit-node--four:focus-visible) .home-portfolio-line--four {
  opacity: 1;
  background: linear-gradient(90deg, rgba(122, 160, 255, 0.95), transparent);
}

/* Orbiting subsidiary links: small, refined glass pills, now real
   navigation into each subsidiary page. Each carries that subsidiary's
   own established accent color (same hex values used site-wide, e.g.
   in js/subsidiaries.js) as a quiet left-edge tint. */
.home-orbit-node {
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: clamp(0.6rem, 0.9vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(232, 237, 247, 0.22);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  animation: home-orbit-counter 36s linear infinite;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.home-orbit-node:hover,
.home-orbit-node:focus-visible {
  border-color: rgba(232, 237, 247, 0.5);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px var(--node-glow, rgba(77, 125, 255, 0.5));
  outline: none;
}

.home-orbit-node::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--node-accent, #4d7dff);
  box-shadow: 0 0 6px var(--node-accent, #4d7dff);
  vertical-align: middle;
}

.home-orbit-node--one { top: -3%; left: 50%; margin-left: -2.2em; --node-accent: #4d7dff; --node-glow: rgba(77, 125, 255, 0.5); }
.home-orbit-node--two { right: -10%; top: 42%; --node-accent: #1fcc1f; --node-glow: rgba(31, 204, 31, 0.5); }
.home-orbit-node--three { bottom: -2%; left: 28%; --node-accent: #2fd46b; --node-glow: rgba(47, 212, 107, 0.5); }
.home-orbit-node--four { left: -13%; top: 30%; --node-accent: #6f9dff; --node-glow: rgba(111, 157, 255, 0.5); }

@keyframes home-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes home-orbit-counter {
  to { transform: rotate(-360deg); }
}

/* Animated light/data lines flowing out of the hero into the next panel */
.hero-lines {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 220px;
  display: flex;
  justify-content: center;
  gap: clamp(2.5rem, 9vw, 7rem);
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 30%);
  /* Trails brighten smoothly as the orbit hands its energy down on
     scroll — the transition here is what makes the handoff feel like
     a continuous glide rather than a cut. */
  opacity: calc(0.35 + var(--hero-fade, 0) * 0.65);
  transition: opacity 0.5s ease-out;
}

.hero-lines span {
  position: relative;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(77, 125, 255, 0.55));
}

.hero-lines span::after {
  content: "";
  position: absolute;
  top: -30px;
  left: -1.5px;
  width: 4px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: #7aa0ff;
  box-shadow: 0 0 12px rgba(77, 125, 255, 0.95);
  animation: hero-line-drop 3.4s linear infinite;
}

.hero-lines span:nth-child(2)::after { animation-delay: 0.5s; }
.hero-lines span:nth-child(3)::after { animation-delay: 1.1s; }
.hero-lines span:nth-child(4)::after { animation-delay: 1.7s; }
.hero-lines span:nth-child(5)::after { animation-delay: 2.3s; }

@keyframes hero-line-drop {
  0% { top: -30px; opacity: 0; }
  12% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.home-panel--bridge {
  min-height: 70svh;
}

.home-bridge-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.1fr;
  align-items: end;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.home-bridge-grid h2 {
  max-width: 16ch;
  font-size: clamp(2rem, 5vw, 4rem);
}

.home-bridge-grid p:not(.eyebrow) {
  max-width: 58ch;
  font-size: 1.08rem;
}

/* Floating 3D strategy panels: js/main.js drives --align (0→1) directly
   from scroll position through this layer — not a one-shot reveal, but
   a continuous scroll-scrubbed alignment, so the panels visibly snap
   together into a system layer as you scroll (and un-align if you
   scroll back up). --drift is a per-panel parallax offset once aligned. */
.strategy-layer {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-block: 1.5rem;
  perspective: 1200px;
}

/* Soft glowing backplane behind the row — brightens with --align so the
   panels read as slotting into a lit system layer, not floating in void. */
.strategy-backplane {
  position: absolute;
  inset: -1.5rem -1rem;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 70% 100% at 30% 50%, rgba(0, 64, 224, 0.16), transparent 65%),
    radial-gradient(ellipse 70% 100% at 75% 50%, rgba(31, 204, 31, 0.12), transparent 65%);
  border: 1px solid rgba(232, 237, 247, 0.08);
  opacity: var(--align, 0);
  transition: opacity 0.2s linear;
}

.strategy-bus {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(77, 125, 255, 0.75) 22%, rgba(31, 204, 31, 0.55) 78%, transparent);
  filter: drop-shadow(0 0 8px rgba(77, 125, 255, 0.8));
  opacity: var(--align, 0);
  transition: opacity 0.2s linear;
}

.strategy-panel {
  position: relative;
  padding: 1.4rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(232, 237, 247, 0.16);
  box-shadow: 0 26px 44px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(6px);
  opacity: var(--align, 0);
  /* Blend continuously from the scattered start pose (--y0/--z0, own
     depth per panel) to fully aligned (flat, drifting gently with
     --drift) as --align goes 0→1. A dramatic, scroll-tied snap. */
  transform:
    translateY(calc(var(--y0, 52px) * (1 - var(--align, 0)) + var(--drift, 0) * 1px * var(--align, 0)))
    translateZ(calc(var(--z0, -50px) * (1 - var(--align, 0))))
    rotateX(calc(32deg * (1 - var(--align, 0))))
    scale(calc(1 - 0.07 * (1 - var(--align, 0))));
  transition: opacity 0.2s linear;
  will-change: transform;
}

.strategy-panel:nth-of-type(1) { --y0: 64px; --z0: -80px; }
.strategy-panel:nth-of-type(2) { --y0: 40px; --z0: -30px; }
.strategy-panel:nth-of-type(3) { --y0: 78px; --z0: -110px; }
.strategy-panel:nth-of-type(4) { --y0: 50px; --z0: -55px; }

.strategy-panel h3 {
  color: var(--color-white);
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}

.strategy-panel p {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(232, 237, 247, 0.75);
}

/* Connector node where each panel meets the bus line */
.strategy-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #7aa0ff;
  box-shadow: 0 0 10px rgba(77, 125, 255, 0.9);
  opacity: var(--align, 0);
  transition: opacity 0.2s linear;
}

@media (max-width: 900px) {
  /* Intro hero: text column then orbit graphic, stacked full-width in DOM
     order instead of forced side-by-side - the orbit's own minmax(280px,…)
     column was squeezing the heading into a column narrow enough to wrap
     one or two words per line, and leaving the orbit itself barely visible. */
  .home-panel-grid {
    grid-template-columns: 1fr;
  }

  .home-orbit-tilt {
    margin-top: clamp(2rem, 7vw, 3rem);
  }

  /* Was viewport-relative (28vw) regardless of available width, so it
     stayed tiny even once the orbit had its own full-width row to sit in. */
  .home-orbit {
    width: min(72vw, 320px);
  }

  /* The ring above got a lot wider for mobile, but the hub kept its own
     desktop-scale vw value, so the globe read as noticeably smaller
     relative to the ring here than on desktop. */
  .home-hub-counter {
    --hub-s: min(13vw, 100px);
  }

  /* Bridge panel: same fix for the eyebrow/heading/paragraph column that
     sat forced side-by-side with the strategy-layer card grid. */
  .home-bridge-grid {
    grid-template-columns: 1fr;
  }

  .strategy-layer { grid-template-columns: repeat(2, 1fr); }
  .strategy-backplane,
  .strategy-bus,
  .strategy-panel::after { display: none; }

  /* Simpler motion on mobile: a plain fade/slide, no 3D scatter/tilt. */
  .strategy-panel {
    transform: translateY(calc(24px * (1 - var(--align, 0))));
  }
}

.home-panel--final {
  min-height: 130svh;
  overflow: hidden;
}

.home-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.7fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
}

.home-final-inner {
  max-width: 760px;
}

.home-final-inner h2 {
  font-size: clamp(2rem, 5vw, 4.6rem);
}

.home-final-inner p {
  max-width: 56ch;
  font-size: 1.12rem;
}

.scroll-phone-scene {
  --phone-rotate-y: -18deg;
  --phone-rotate-x: 10deg;
  --phone-translate-y: 0px;
  perspective: 1100px;
  min-height: 520px;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.scroll-phone {
  position: relative;
  /* Sized a touch smaller than before — realistic and detailed, but a
     supporting visual, not competing with the CTA headline for attention. */
  width: clamp(190px, 19vw, 290px);
  aspect-ratio: 9 / 18;
  transform-style: preserve-3d;
  transform:
    translateY(var(--phone-translate-y))
    rotateX(var(--phone-rotate-x))
    rotateY(var(--phone-rotate-y))
    rotateZ(var(--phone-rotate-z, -4deg));
  transition: transform 0.08s linear;
  filter: drop-shadow(0 36px 44px rgba(0, 0, 0, 0.45));
}

.scroll-phone::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(2, 7, 19, 0.92));
  transform: translateZ(-44px);
}

.scroll-phone-back {
  position: absolute;
  inset: 5px;
  border-radius: 40px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.14), transparent 16%),
    linear-gradient(145deg, #1d2a48, #071021 56%, #02050c);
  border: 1px solid rgba(232, 237, 247, 0.18);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    inset 0 -26px 34px rgba(0, 0, 0, 0.45);
  transform: translateZ(-56px);
}

.scroll-phone-body {
  position: absolute;
  inset: 0;
  border-radius: 42px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 8%, transparent 91%, rgba(0, 0, 0, 0.5)),
    linear-gradient(145deg, #1a2642, #020713 58%, #12327d);
  border: 2px solid rgba(232, 237, 247, 0.24);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.06),
    inset 10px 0 18px rgba(255, 255, 255, 0.08),
    inset -14px 0 24px rgba(0, 0, 0, 0.5),
    inset 0 -22px 30px rgba(0, 0, 0, 0.42),
    0 0 64px rgba(0, 64, 224, 0.34);
  transform: translateZ(42px);
}

.scroll-phone-side {
  position: absolute;
  top: 38px;
  bottom: 38px;
  width: 74px;
  border-radius: 36px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent 32%, rgba(0, 0, 0, 0.6)),
    linear-gradient(180deg, #3e5480, #071021 48%, #02050c);
  box-shadow:
    inset 10px 0 18px rgba(255, 255, 255, 0.1),
    inset -14px 0 22px rgba(0, 0, 0, 0.62);
  opacity: 0.98;
}

.scroll-phone-side--left {
  left: -39px;
  transform: rotateY(80deg) translateZ(16px);
}

.scroll-phone-side--right {
  right: -39px;
  transform: rotateY(-80deg) translateZ(16px);
}

.scroll-phone-screen {
  position: relative;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(31, 204, 31, 0.32), transparent 28%),
    radial-gradient(circle at 30% 70%, rgba(0, 64, 224, 0.58), transparent 36%),
    linear-gradient(180deg, #061021, #02050c);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.24),
    inset 0 18px 20px rgba(255, 255, 255, 0.035);
}

.scroll-phone-screen::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 46%, transparent 62%);
  transform: translateX(calc((var(--phone-progress, 0) * 65%) - 32%));
}

/* Second, static gloss layer (a fixed light source, distinct from the
   scroll-driven moving sweep above) so the screen reads as glass under
   two light sources rather than one moving stripe. */
.scroll-phone-gloss {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    122deg,
    rgba(255, 255, 255, 0.16) 6%,
    transparent 20%,
    transparent 80%,
    rgba(255, 255, 255, 0.05) 94%
  );
}

.scroll-phone-speaker {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 50%;
  width: 72px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  transform: translateX(-50%) translateZ(54px);
}

.scroll-phone-status {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0;
}

.scroll-phone-time {
  font-family: var(--font-primary);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(232, 237, 247, 0.85);
}

.scroll-phone-status-icons {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.scroll-phone-signal {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 8px;
}

.scroll-phone-signal i {
  display: block;
  width: 2.5px;
  border-radius: 1px;
  background: rgba(232, 237, 247, 0.75);
  font-style: normal;
}

.scroll-phone-signal i:nth-child(1) { height: 35%; }
.scroll-phone-signal i:nth-child(2) { height: 55%; }
.scroll-phone-signal i:nth-child(3) { height: 75%; }
.scroll-phone-signal i:nth-child(4) { height: 100%; }

.scroll-phone-battery {
  position: relative;
  width: 18px;
  height: 9px;
  border: 1px solid rgba(232, 237, 247, 0.7);
  border-radius: 2px;
}

.scroll-phone-battery::before {
  content: "";
  position: absolute;
  right: -3px;
  top: 2px;
  width: 2px;
  height: 5px;
  border-radius: 0 1px 1px 0;
  background: rgba(232, 237, 247, 0.7);
}

.scroll-phone-battery::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  width: 65%;
  border-radius: 1px;
  background: var(--color-green);
}

.scroll-phone-dialer {
  position: relative;
  z-index: 1;
  height: calc(100% - 38px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(12px, 3vw, 20px);
  padding: 14% 9% 8%;
  text-align: center;
}

.scroll-phone-dialer p {
  margin: 0;
  font-size: clamp(0.72rem, 1.3vw, 0.95rem);
  color: rgba(232, 237, 247, 0.7);
}

.scroll-phone-keypad {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 13px);
}

.scroll-phone-keypad span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.6vw, 1.25rem);
  font-weight: 600;
  color: var(--color-white);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 32%),
    rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.scroll-phone-call-button {
  width: clamp(56px, 5.4vw, 74px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-primary);
  font-weight: 700;
  text-decoration: none;
  color: #021005;
  background: var(--color-green);
  box-shadow: 0 0 24px rgba(31, 204, 31, 0.45);
}

.scroll-phone-call-icon {
  width: 46%;
  height: 46%;
  fill: #021005;
}

/* Particle glow "landing" on the screen — intensity follows scroll
   progress so the falling particles read as the source of the light. */
.scroll-phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% -10%, rgba(122, 160, 255, 0.4), transparent 48%);
  opacity: var(--phone-progress, 0);
}

/* Green call icon pulses exactly once, right as the phone becomes
   readable (js/main.js adds .is-lit a single time, never removes it,
   so this animation — finite, not infinite — only ever plays once). */
.scroll-phone.is-lit .scroll-phone-call-button {
  animation: call-button-pulse-once 0.9s ease-out;
}

@keyframes call-button-pulse-once {
  0% { transform: scale(1); box-shadow: 0 0 24px rgba(31, 204, 31, 0.45); }
  40% { transform: scale(1.2); box-shadow: 0 0 42px rgba(31, 204, 31, 0.9); }
  100% { transform: scale(1); box-shadow: 0 0 24px rgba(31, 204, 31, 0.45); }
}

/* Keypad light-up once the phone settles front-facing
   (js/main.js adds .is-lit near the end of the scroll) */
.scroll-phone.is-lit .scroll-phone-screen {
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.24),
    inset 0 18px 20px rgba(255, 255, 255, 0.035),
    inset 0 0 46px rgba(0, 64, 224, 0.28);
}

.scroll-phone.is-lit .scroll-phone-keypad span {
  animation: key-glow 3s ease-in-out infinite;
}

.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(1) { animation-delay: 0s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(2) { animation-delay: 0.12s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(3) { animation-delay: 0.24s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(4) { animation-delay: 0.36s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(5) { animation-delay: 0.48s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(6) { animation-delay: 0.6s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(7) { animation-delay: 0.72s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(8) { animation-delay: 0.84s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(9) { animation-delay: 0.96s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(10) { animation-delay: 1.08s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(11) { animation-delay: 1.2s; }
.scroll-phone.is-lit .scroll-phone-keypad span:nth-child(12) { animation-delay: 1.32s; }

@keyframes key-glow {
  0%, 24%, 100% {
    background:
      radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 32%),
      rgba(255, 255, 255, 0.075);
    box-shadow: none;
  }
  8% {
    background: rgba(77, 125, 255, 0.4);
    box-shadow: 0 0 16px rgba(77, 125, 255, 0.65);
  }
}

/* Falling data particles: the map's arcs "dissolving" into energy that
   flows down toward the phone screen. Same blue/green system as the
   map — 8 blue (network) to 4 green (software/action), each with a
   short comet tail so the flow reads as intentional, not decorative
   confetti. */
.particle-flow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46vh;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.particle-flow span {
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7aa0ff;
  box-shadow:
    0 0 12px rgba(77, 125, 255, 0.95),
    0 -14px 10px -4px rgba(77, 125, 255, 0.5),
    0 -26px 16px -8px rgba(77, 125, 255, 0.25);
  opacity: 0;
  animation: particle-fall 3.4s linear infinite;
}

.particle-flow span.is-green {
  background: #35d435;
  box-shadow:
    0 0 12px rgba(31, 204, 31, 0.9),
    0 -14px 10px -4px rgba(31, 204, 31, 0.45),
    0 -26px 16px -8px rgba(31, 204, 31, 0.22);
}

.particle-flow span:nth-child(1)  { left: 10%; animation-delay: 0s; }
.particle-flow span:nth-child(2)  { left: 19%; animation-delay: 1.1s; animation-duration: 4s; }
.particle-flow span:nth-child(3)  { left: 27%; animation-delay: 0.5s; width: 5px; height: 5px; }
.particle-flow span:nth-child(4)  { left: 36%; animation-delay: 1.9s; }
.particle-flow span:nth-child(5)  { left: 44%; animation-delay: 0.15s; animation-duration: 2.8s; }
.particle-flow span:nth-child(6)  { left: 52%; animation-delay: 1.5s; width: 5px; height: 5px; }
.particle-flow span:nth-child(7)  { left: 60%; animation-delay: 0.8s; }
.particle-flow span:nth-child(8)  { left: 68%; animation-delay: 2.3s; }
.particle-flow span:nth-child(9)  { left: 76%; animation-delay: 0.35s; animation-duration: 4.1s; }
.particle-flow span:nth-child(10) { left: 84%; animation-delay: 1.3s; width: 5px; height: 5px; }
.particle-flow span:nth-child(11) { left: 91%; animation-delay: 2.6s; }
.particle-flow span:nth-child(12) { left: 96%; animation-delay: 0.7s; }

@keyframes particle-fall {
  0% { transform: translateY(-6vh) scale(0.7); opacity: 0; }
  16% { opacity: 1; transform: translateY(2vh) scale(1); }
  82% { opacity: 0.55; }
  100% { transform: translateY(46vh) scale(0.9); opacity: 0; }
}

/* --------------------------------------------------------------------------
   7. Globe section (home page)
   -------------------------------------------------------------------------- */

/* Full-bleed home section: the globe/map stage fills the viewport width
   and height, with copy layered into the same scroll structure. */
.globe-section {
  position: relative;
  min-height: 260vh;
  min-height: 260svh;
  padding: 0;
  /* Transparent: the continuous .home-flow gradient runs behind this
     section so there's no blocky color break entering/leaving it. */
  background: transparent;
  color: var(--color-white);
}

.globe-section h2 {
  color: var(--color-white);
}

.globe-section .lead {
  color: rgba(232, 237, 247, 0.85);
}

/* Full-bleed stage: both the 3D globe and the UAE map live here,
   stacked and crossfaded by js/globe.js as the section scrolls. */
.globe-stage {
  position: sticky;
  top: var(--header-h, 72px);
  height: calc(100vh - var(--header-h, 72px));
  height: calc(100svh - var(--header-h, 72px));
  overflow: hidden;
  z-index: 0;
  /* Soft local glow only; edges fade out via the mask below so the
     stage dissolves into the surrounding continuous background. */
  background: radial-gradient(circle at 65% 45%, rgba(10, 18, 38, 0.9) 0%, rgba(4, 6, 12, 0) 78%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  /* Space reserved on the left for the copy card so the map never sits
     under the text; kept in sync with .globe-copy's width per breakpoint. */
  --copy-reserve: 660px;
}

.stage-layer {
  position: absolute;
  inset: 0;
  transition: opacity 0.2s linear;
}

#globe-viz {
  /* Rotation/drag/manual zoom are disabled — this is a scroll-driven
     transition. Cursor only changes to a pointer over clickable markers
     (handled in js/globe.js). */
  cursor: default;
}

/* Tooltip shown on marker hover (injected by globe.gl) */
.globe-tooltip {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  background: rgba(4, 8, 18, 0.92);
  border: 1px solid rgba(77, 125, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  color: var(--color-white);
  white-space: nowrap;
}

.globe-tooltip span {
  color: #8fa8e8;
  font-size: 0.75rem;
}

/* --- UAE map layer (stylized illustrative outline, not surveyed
   cartographic data) — the legible close-up destination of the
   scroll transition, and the full fallback when 3D is unavailable. --- */
.uae-map-svg {
  width: 100%;
  height: 100%;
}

.stage-layer--map {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reserve the left column for the copy card, small breathing room on
     the other three sides; JS (sizeMapFrame) fills whatever's left as
     large as possible, so the map can never overflow/clip. */
  padding: 3vh 3vw 3vh var(--copy-reserve, 660px);
  perspective: 1500px;
}

/* Sized in JS to the SVG's true 700:480 aspect ratio (js/globe.js
   sizeMapFrame), as large as the padded area above allows. The
   landmass, arcs, and marker buttons all position themselves against
   this one box, so they stay aligned regardless of the stage's shape.
   The gentle rotateX + framed glow reads as a raised holographic plate. */
.uae-map-frame {
  position: relative;
  /* rotateX alone tilts the whole frame as one flattened plane (still
     gives the holographic-plate look). No transform-style:preserve-3d
     here — with a real 3D child stacking context, browsers can sort
     paint/hit-testing by depth instead of DOM order, letting the SVG
     landmass/arcs intercept hover meant for the marker buttons above
     them. Keeping this 2D avoids that entirely. */
  transform: rotateX(9deg);
}

/* Holographic plate under the landmass */
.uae-map-frame::before {
  content: "";
  position: absolute;
  inset: -7% -5%;
  z-index: -1;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(77, 125, 255, 0.1), rgba(77, 125, 255, 0.02) 55%, rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(180deg, rgba(122, 160, 255, 0.045) 0 2px, transparent 2px 6px);
  border: 1px solid rgba(77, 125, 255, 0.28);
  box-shadow:
    0 46px 90px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 46px rgba(77, 125, 255, 0.09);
}

.uae-landmass {
  opacity: 0.9;
}

.uae-boundary-hint {
  fill: none;
  stroke: rgba(232, 237, 247, 0.25);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}

/* Base state: each arc carries its destination's sector color
   (js/globe.js sets --arc-color), so the blue/green language is
   consistent across markers, arcs, and active states. */
.uae-arc {
  fill: none;
  stroke: var(--arc-color, #4d7dff);
  stroke-width: 2;
  stroke-dasharray: 6 10;
  opacity: 0.5;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--arc-color, #4d7dff) 70%, transparent));
  animation: uae-arc-flow 3.2s linear infinite;
  transition: opacity 0.3s ease, stroke-width 0.3s ease;
}

/* Arc to the currently-selected subsidiary burns brighter and flows faster */
.uae-arc.is-active {
  opacity: 1;
  stroke: color-mix(in srgb, var(--arc-color, #4d7dff) 65%, white 35%);
  stroke-width: 3.6;
  filter: drop-shadow(0 0 10px var(--arc-color, #4d7dff));
  animation-duration: 1.4s;
}

@keyframes uae-arc-flow {
  to { stroke-dashoffset: -160; }
}

.uae-markers {
  position: absolute;
  inset: 0;
}

/* Markers reveal one by one once the map layer becomes active
   (js/globe.js adds .is-revealed to .uae-markers). */
.uae-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transform: translate(-50%, -30%);
  opacity: 0;
  background: none;
  border: none;
  /* Generous padding = a bigger, easier hit target (~44px min) —
     the visible dot/label stay the same size. */
  padding: 0.7rem 0.85rem;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  color: var(--color-white);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.uae-markers.is-revealed .uae-marker {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.uae-markers.is-revealed .uae-marker:nth-child(1) { transition-delay: 0.05s; }
.uae-markers.is-revealed .uae-marker:nth-child(2) { transition-delay: 0.25s; }
.uae-markers.is-revealed .uae-marker:nth-child(3) { transition-delay: 0.45s; }
.uae-markers.is-revealed .uae-marker:nth-child(4) { transition-delay: 0.65s; }
.uae-markers.is-revealed .uae-marker:nth-child(5) { transition-delay: 0.85s; }

/* Sector color drives both the dot and its glow ring */
.uae-marker-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--marker-color, var(--color-blue));
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--marker-color, #4d7dff) 20%, transparent),
    0 0 12px color-mix(in srgb, var(--marker-color, #4d7dff) 75%, transparent);
  transition: transform 0.15s ease;
}

.uae-marker--hub .uae-marker-dot {
  width: 28px;
  height: 28px;
  box-shadow:
    0 0 0 6px rgba(77, 125, 255, 0.22),
    0 0 22px rgba(77, 125, 255, 0.9);
}

/* Always-on halo (not just hover/active) so GGG unmistakably reads as
   the hub everything else connects to — larger and brighter than a
   subsidiary marker gets at any state. */
.uae-marker--hub::before {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 125, 255, 0.32), transparent 70%);
  pointer-events: none;
}

.uae-marker--hub .uae-marker-label {
  border-color: rgba(77, 125, 255, 0.65);
  background: rgba(0, 64, 224, 0.32);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.36rem 0.9rem;
  box-shadow: 0 0 14px rgba(0, 64, 224, 0.35);
}

/* Every marker pulses in its own sector color; the hub pulses wider */
.uae-marker-ping {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--marker-color, rgba(77, 125, 255, 0.6));
  opacity: 0.7;
  animation: uae-ping 2.2s ease-out infinite;
}

.uae-marker--hub .uae-marker-ping {
  inset: -11px;
}

@keyframes uae-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

.uae-marker-label {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  background: rgba(4, 8, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
}

/* If two markers ever sit close enough for their (generous, tap-
   friendly) hit areas to overlap, whichever one you're actually
   pointing at/tabbed to should win — not just whichever is later in
   the markup. */
.uae-marker:hover,
.uae-marker:focus-visible {
  z-index: 5;
}

.uae-marker:hover .uae-marker-dot,
.uae-marker:focus-visible .uae-marker-dot {
  transform: scale(1.25);
}

/* Selected company: marker flares in its sector color, ping speeds up */
.uae-marker.is-active .uae-marker-dot {
  transform: scale(1.4);
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--marker-color, #4d7dff) 32%, transparent),
    0 0 26px var(--marker-color, #4d7dff);
}

.uae-marker.is-active .uae-marker-ping {
  animation-duration: 1.4s;
  opacity: 1;
}

.uae-marker.is-active .uae-marker-label,
.uae-marker:hover .uae-marker-label,
.uae-marker:focus-visible .uae-marker-label {
  border-color: var(--color-blue);
  background: rgba(0, 64, 224, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .uae-arc { animation: none; }
  .uae-marker-ping { display: none; }
}

/* --- Copy overlay: sits in the normal container column, above the
   full-bleed stage, with a scrim so text stays legible. --- */
.globe-overlay {
  position: sticky;
  top: var(--header-h, 72px);
  height: calc(100vh - var(--header-h, 72px));
  height: calc(100svh - var(--header-h, 72px));
  display: flex;
  align-items: center;
  padding-block: 1rem;
  margin-top: calc(-1 * (100vh - var(--header-h, 72px)));
  z-index: 1;
  width: 100%;
  pointer-events: none;
}

.globe-copy {
  max-width: 598px;
  padding-block: 0.5rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  /* Safety net, not the primary fit strategy: if a breakpoint's sizing
     ever runs long (short window, browser zoom), scroll internally
     instead of silently clipping or spilling into the next section.
     The scrollbar itself is hidden — content stays scrollable. */
  max-height: calc(100svh - var(--header-h, 72px) - 24px);
  overflow-y: auto;
  scrollbar-width: none;
}

.globe-copy::-webkit-scrollbar {
  display: none;
}

.globe-copy > .eyebrow {
  font-size: 1.06rem;
}

.globe-copy h2 {
  font-size: clamp(2.97rem, 4.95vw, 4.34rem);
  margin-bottom: 0.92rem;
}

.globe-copy .lead {
  font-size: 1.74rem;
  line-height: 1.43;
  margin-bottom: 1.25rem;
}

/* Detail panel: sits inside the copy card, updates on selection */
.globe-panel {
  margin-top: 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(77, 125, 255, 0.25);
  border-left: 3px solid var(--color-blue);
  border-radius: 10px;
  padding: 1.15rem 1.32rem;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Parent company gets a visibly heavier treatment than any subsidiary
   — thicker accent, soft ambient glow, bolder heading (js/globe.js
   toggles this when the hub is the selected/default node). */
.globe-panel--hub {
  background: rgba(0, 64, 224, 0.09);
  border-color: rgba(77, 125, 255, 0.4);
  border-left-width: 5px;
  box-shadow: 0 0 32px rgba(0, 64, 224, 0.18);
}

.globe-panel--hub h3 {
  font-size: 1.15em;
}

.globe-panel h3 {
  color: var(--color-white);
  margin-bottom: 0.4rem;
  font-size: 1.99rem;
}

.globe-panel p {
  font-size: 1.52rem;
  line-height: 1.38;
  margin-bottom: 0.85rem;
  color: rgba(232, 237, 247, 0.85);
}

.globe-panel .eyebrow {
  color: var(--color-green);
  margin-bottom: 0.25rem;
  font-size: 1.06rem;
}

.globe-panel-region {
  font-size: 1.38rem;
  color: #8fa8e8;
}

.globe-panel-link {
  font-size: 1.46rem;
  padding: 0.7rem 1.35rem;
}

/* Chip buttons: select a company (keyboard/touch friendly) */
.globe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.8rem;
}

.globe-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.38rem;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  padding: 0.52rem 0.98rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.globe-chip:hover,
.globe-chip:focus,
.globe-chip:focus-visible {
  border-color: var(--color-blue);
  background: rgba(0, 64, 224, 0.2);
}

.globe-chip.is-active {
  border-color: var(--color-blue);
  background: rgba(0, 64, 224, 0.35);
  animation: chip-pulse 2.4s ease-out infinite;
}

@keyframes chip-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 64, 224, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(0, 64, 224, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 64, 224, 0); }
}

/* The parent company's chip stands apart from its subsidiaries' —
   bolder border, permanent soft glow, heavier weight. */
.globe-chip--hub {
  font-weight: 700;
  border-color: rgba(77, 125, 255, 0.6);
  background: rgba(0, 64, 224, 0.14);
  box-shadow: 0 0 16px rgba(0, 64, 224, 0.25);
}

.globe-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Sits at the bottom edge of the stage; only revealed by JS when the
   3D globe is unavailable and the UAE map is the permanent fallback. */
.globe-fallback {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.7rem 1.25rem;
  font-size: 0.78rem;
  text-align: center;
  color: rgba(232, 237, 247, 0.8);
  background: linear-gradient(0deg, rgba(4, 8, 18, 0.85), transparent);
}

.globe-caption {
  margin-top: 0.65rem;
  font-size: 1.29rem;
  line-height: 1.25;
  color: rgba(232, 237, 247, 0.55);
}

@media (max-height: 760px) and (min-width: 901px) {
  .globe-stage {
    /* Card is narrower here, so the map can claim more of the width. */
    --copy-reserve: 400px;
  }

  .globe-copy {
    max-width: 380px;
  }

  .globe-copy > .eyebrow {
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
  }

  .globe-copy h2 {
    font-size: 1.55rem;
    margin-bottom: 0.5rem;
  }

  .globe-copy .lead {
    font-size: 0.92rem;
    line-height: 1.32;
    margin-bottom: 0.55rem;
  }

  .globe-chips {
    gap: 0.3rem;
    margin-top: 0.55rem;
  }

  .globe-chip {
    font-size: 0.78rem;
    padding: 0.32rem 0.65rem;
  }

  .globe-panel {
    margin-top: 0.55rem;
    padding: 0.7rem 0.85rem;
  }

  .globe-panel .eyebrow {
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
  }

  .globe-panel h3 {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
  }

  .globe-panel p {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }

  .globe-panel-region {
    font-size: 0.76rem;
  }

  .globe-panel-link {
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
  }

  .globe-caption {
    font-size: 0.74rem;
    line-height: 1.3;
    margin-top: 0.5rem;
  }
}

/* Mobile: no room for a full-bleed overlay — stack normally with the
   text card first, then the map/globe stage as a tall block below it. */
@media (max-width: 900px) {
  /* The 130svh on desktop exists to give the pinned two-column layout
     room for the phone's scroll-driven rotation. Once the grid stacks
     to one column below, that forced extra 30% of viewport height is
     just empty space above/below the now-taller stacked content - drop
     it and let the panel size to its content instead. */
  .home-panel--final {
    min-height: auto;
  }

  .home-final-grid {
    grid-template-columns: 1fr;
  }

  .scroll-phone-scene {
    min-height: 430px;
  }

  /* Simplify motion on mobile: the falling particles would sit behind
     the stacked headline/phone here rather than bridging two side-by-
     side columns, so they'd just be clutter — drop them. */
  .particle-flow {
    display: none;
  }

  .globe-section {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(2.5rem, 8vw, 4rem) 0;
  }

  .globe-stage {
    position: relative;
    top: auto;
    inset: auto;
    order: 2;
    height: clamp(360px, 70vh, 520px);
    margin-top: 2rem;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .stage-layer--map {
    /* Text is stacked above (not beside) the map here, so no left
       column needs to be reserved — just a little breathing room. */
    padding: 3vh 4vw;
  }

  .globe-overlay {
    position: relative;
    top: auto;
    height: auto;
    margin-top: 0;
    order: 1;
    pointer-events: auto;
  }

  .globe-copy {
    max-width: none;
    max-height: none;
    overflow-y: visible;
    background: none;
    border: none;
    padding: 0;
    backdrop-filter: none;
  }

  /* This card's font sizes were only ever tuned for the two-column desktop
     layout (h2's clamp floor alone is 47.5px, .lead was a flat 1.74rem/
     28px) - reasonable next to a half-width map, wildly oversized once the
     card goes full-width on a phone, wrapping the paragraph into a dozen
     short lines. Same shrink-with-viewport clamp pattern used for every
     other page's mobile hero heading (see e.g. .melon-copy h1). */
  .globe-copy > .eyebrow {
    font-size: 0.85rem;
  }

  .globe-copy h2 {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    margin-bottom: 0.6rem;
  }

  .globe-copy .lead {
    font-size: clamp(1rem, 3.5vw, 1.15rem);
    line-height: 1.5;
    margin-bottom: 0.9rem;
  }

  /* Same oversight as .globe-copy above: the chip list, detail card, and
     caption below it were also only ever tuned for the two-column desktop
     layout (h3 at 1.99rem/~32px, p at 1.52rem/~24px), so they read as
     oversized once this card goes full-width on a phone. Reusing the same
     compact sizes already defined for the short-viewport desktop case
     above, since that's already a tuned "smaller" variant of this exact
     card. */
  .globe-chip {
    font-size: 0.78rem;
    padding: 0.32rem 0.65rem;
  }

  .globe-panel .eyebrow {
    font-size: 0.72rem;
  }

  .globe-panel h3 {
    font-size: 1.05rem;
  }

  .globe-panel p {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .globe-panel-region {
    font-size: 0.76rem;
  }

  .globe-panel-link {
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
  }

  .globe-caption {
    font-size: 0.74rem;
    line-height: 1.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-phone {
    transition: none;
    transform: rotateX(4deg) rotateY(-10deg) rotateZ(-2deg);
  }

  /* Decorative motion off entirely */
  .hero-lines,
  .particle-flow { display: none; }

  .home-orbit,
  .home-hub-counter,
  .home-orbit-node { animation: none; }

  .home-orbit-tilt {
    transform: none;
    transition: none;
  }

  .home-portfolio-line { transition: none; }

  .globe-chip.is-active,
  .scroll-phone.is-lit .scroll-phone-keypad span,
  .scroll-phone.is-lit .scroll-phone-call-button { animation: none; }

  /* Reveal-on-scroll elements render in their final state */
  .strategy-panel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .strategy-backplane,
  .strategy-bus,
  .strategy-panel::after { opacity: 1; transition: none; }

  .uae-marker {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: none;
  }

  .home-orbit-tilt { opacity: 1; }

  .hero-lines { opacity: 1; }
}