/* Formium Alliance — "Building Worldwide" section (home page). Sizes use the site's type tokens. */
.fg-title { background: #fff; padding: 80px 32px 0; text-align: center; }
@media (min-width: 768px) { .fg-title { padding: 100px 64px 0; } }
.fg-title h2 { color: #000; white-space: pre-line; margin: 0; }
.fg-scene { position: relative; height: 440vh; background: #fff; }
@supports (height: 100svh) { .fg-scene { height: 440svh; } }
.fg-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
#fg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fg-cards { position: absolute; inset: 0; pointer-events: none; }

/* a card is a zero-size anchor sitting exactly on the place; the pin is centred on it, the label is placed beside it */
.fg-card { --pin: 25px; --gap: 12px; position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: opacity; }
.fg-pin { position: absolute; left: 0; top: 0; display: flex; width: var(--pin); height: var(--pin); transform: translate(-50%, -50%) scale(var(--s, 1)); }
.fg-pin svg { display: block; width: 100%; height: 100%; fill: #111113; }
.fg-txt { --dy: 0px; position: absolute; display: flex; flex-direction: column; gap: 5px; white-space: nowrap; will-change: transform, opacity; }
.fg-card[data-side="right"] .fg-txt { left: calc(var(--pin) / 2 + var(--gap)); top: var(--dy); transform: translateY(-50%) scale(var(--s, 1)); transform-origin: left center; }
.fg-card[data-side="left"]  .fg-txt { left: calc(var(--pin) / -2 - var(--gap)); top: var(--dy); align-items: flex-end; text-align: right; transform: translate(-100%, -50%) scale(var(--s, 1)); transform-origin: right center; }
.fg-card[data-side="below"] .fg-txt { left: 0; top: calc(var(--pin) / 2 + 6px + var(--dy)); align-items: center; text-align: center; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: center top; }
.fg-card[data-side="above"] .fg-txt { left: 0; top: calc(var(--pin) / -2 - 6px + var(--dy)); align-items: center; text-align: center; transform: translate(-50%, -100%) scale(var(--s, 1)); transform-origin: center bottom; }
.fg-city { font-family: var(--fa-font, 'Geist', system-ui, sans-serif); font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: -.012em; color: #111113; }
.fg-sub { font-family: var(--fa-mono, 'Geist Mono', ui-monospace, monospace); font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: .04em; color: #9a9aa0; font-variant-numeric: tabular-nums; }
.fg-sub i { font-style: normal; opacity: .5; margin: 0 1px; }
.fg-clock { color: #111113; opacity: .55; }

/* phones, small windows and short landscape screens: smaller labels */
@media (max-width: 640px), (max-height: 520px) {
  .fg-card { --pin: 20px; --gap: 8px; }
  .fg-city { font-size: 16px; }
  .fg-sub { font-size: 9.5px; letter-spacing: .03em; }
  .fg-txt { gap: 4px; }
}
@media (max-width: 360px) { .fg-city { font-size: 15px; } .fg-sub { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .fg-card { transition: none; } }

/* position:sticky needs html/body not to be scroll containers: `clip` hides horizontal overflow just like `hidden` did */
@supports (overflow: clip) {
  html, body { overflow-x: clip !important; }
}

@supports (height: 100svh) { .fg-sticky { height: 100svh; } }
/* short landscape screens need less of a run-up above the title */
@media (max-height: 520px) { .fg-title { padding-top: 72px; } }