/* World globe in the client stories section (24 Sept). Pins ride on cobe's
   marker anchors (CSS anchor positioning); the chosen pin turns into a
   pixel and a quiet tag names its client. */
/* The horizon (24 Sept, round 2). The globe is not an object beside the
   heading: its upper cap rises across the section like the Earth seen from
   orbit, and the client stories stand on it. The body of the globe fades out
   under the cards. --cap is the band of sky between heading and cards. */
.client-stories { overflow-x: clip; }
.client-stories__stage {
  --globe-w: min(68rem, 130vw); --globe-pad: calc(var(--globe-w) * .08); --cap: clamp(12rem, 22vw, 21rem);
  position: relative; padding-bottom: var(--cap);
}
.client-stories__stage > .client-stories__head { position: relative; z-index: 1; }
.client-stories__rail { position: relative; z-index: 1; }
.world-globe.world-globe--horizon {
  position: absolute; left: 50%; top: calc(100% - var(--cap) - var(--globe-pad)); translate: -50% 0; z-index: 0;
  width: var(--globe-w); max-width: none; aspect-ratio: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--globe-pad) + var(--cap)), transparent calc(var(--globe-pad) + var(--cap) + 26rem));
          mask-image: linear-gradient(to bottom, #000 calc(var(--globe-pad) + var(--cap)), transparent calc(var(--globe-pad) + var(--cap) + 26rem));
}
.client-stories__stage > .world-globe__hint { position: absolute; left: 0; right: 0; bottom: 1.25rem; z-index: 1; margin-inline: auto; translate: none; text-align: right; pointer-events: none; }
.world-globe { position: relative; aspect-ratio: 1; width: 100%; max-width: 40rem; justify-self: center; cursor: grab; touch-action: pan-y; }
.world-globe.is-dragging { cursor: grabbing; }
.world-globe canvas { width: 100%; height: 100%; display: block; }
.world-globe__hint { margin: 0; font-size: .875rem; color: var(--ed-muted); }

/* Pins ride on cobe's marker anchors (CSS anchor positioning). */
.world-globe__pin {
  position: absolute; left: anchor(center); top: anchor(center); translate: -50% -50%;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 150ms ease-out;
}
.world-globe__pin::before { content: ""; width: .875rem; height: .875rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgb(0 82 248 / .18); }
.world-globe__pin:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 50%; }

/* The chosen pin turns into a pixel. (The signal card that opened above
   it was removed on 20 Oct 2026: a pin now brings its story up below.) */
.world-globe .world-globe__pin[data-active]::before { border-radius: 0; width: .75rem; height: .75rem; box-shadow: 0 0 0 5px rgb(0 82 248 / .22); }

@media (max-width: 639px) { .client-stories__stage > .world-globe__hint { display: none; } }
/* The story being read: a quiet tag beside its pin. */
.world-globe__here {
  position: absolute; left: calc(anchor(center) + 1rem); top: anchor(center); translate: 0 -50%; z-index: 2; margin: 0;
  padding: .375rem .625rem; background: #121417; color: #fff; font-size: .875rem; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 200ms ease-out 250ms;
}
.world-globe__here span { color: #9aa1ab; margin-left: .25rem; }
.world-globe__here[data-on] { opacity: 1; }
.world-globe__here[data-hidden] { opacity: 0; transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .world-globe__here, .world-globe__pin { transition: none; } }
@media (max-width: 639px) { .world-globe__here { left: anchor(center); top: auto; bottom: calc(anchor(center) + 1rem); translate: -50% 0; } }

/* ---------- The footer globe ---------- */
/* The foot of the footer is one row on the grid: the CII block left-aligned
   in the first columns, a window onto the planet in the rest, both under the
   same rule. The window is cut to the container, so the planet reads as
   placed, not as something bleeding off the screen. */
.footer__bottom {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: stretch;
  border-top: 1px solid var(--footer-line);
}
.footer__bottom .footer__cert { border-top: 0; align-items: flex-start; text-align: left; justify-content: flex-end; padding-block: 2.5rem 2rem; }
.footer__globe { position: relative; min-height: clamp(15rem, 22vw, 21rem); overflow: hidden; pointer-events: none;
  /* Sides and foot both fade (21 Oct 2026, Hulusi: the hard cut at the
     bottom was harsh once the link groups moved under the globe). */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(#000 45%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(#000 45%, transparent 100%);
          mask-composite: intersect; }
/* The stage is exactly the canvas (cobe places its anchors in its parent).
   The crest sits 4.5rem into the window, leaving room for the tags. */
.footer__globe-stage {
  --w: min(60rem, 150vw);
  position: absolute; left: 50%; top: calc(4.5rem - var(--w) * .08); translate: -50% 0;
  width: var(--w); aspect-ratio: 1;
}
.footer__globe-stage canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 899px) {
  .footer__bottom { grid-template-columns: 1fr; }
  .footer__globe { min-height: 13rem; }
}
/* The tag the tour opens: a frosted pill on the dot, the testimonials' glass. */
.footer__globe-tags { display: contents; } /* not positioned: the tag must see cobe's anchors */
.footer__globe-tag { z-index: 2; }
.footer__globe-tag {
  position: absolute; left: anchor(center); bottom: calc(anchor(center) + .75rem); translate: -50% 0; margin: 0;
  padding: .5rem .875rem; font-size: .9375rem; color: #fff; white-space: nowrap;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
  opacity: 0; transform: translateY(6px); transition: opacity 220ms ease-out 180ms, transform 280ms cubic-bezier(.2, .8, .2, 1) 180ms;
}
.footer__globe-tag span { margin-left: .5rem; color: rgb(255 255 255 / .6); font-size: .8125rem; } /* the country, quiet (was the gold \"démo\") */
.footer__globe-tag[data-on] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .footer__globe-tag { transition: none; } }