/* Gulfalts Dubai Fintech District hero v3 (v2 + on phones the words sit at the sides, FINTECH left and DISTRICT right,
   overlapping the card's top and bottom edges): the "hero-scrub" component (cinematic scroll-scrubbed hero) recreated for
   Webflow. A tall section with a sticky stage: two huge words above and below a rounded video card. Scrolling first
   pushes the words apart and grows the card, then the card fills the screen while the district fly-through plays with
   the scroll, then it shrinks back and the words return. Choreography in ga-dfd-hero-v1.js (GSAP + ScrollTrigger). */
html #dfd-arrival { display: none !important; }

html .ga-scrub { position: relative; width: 100%; height: 420vh; overflow: clip; background: #0b0a09; color: #fff; }
html .ga-scrub.is-static { height: 100svh; }
html .ga-scrub_sticky {
  position: sticky; top: 0; height: 100svh; width: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
html .ga-scrub_bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%),
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .08) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
    var(--ga-scrub-accent, #4a3f33);
}
html .ga-scrub_stage {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 1.4vw, 16px);
}
html .ga-scrub_title {
  position: relative; z-index: 2; margin: 0; font-family: var(--body-font); font-weight: 700; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(3.75rem, 12vw, 11rem); line-height: .85; letter-spacing: -.04em; color: #fff; will-change: transform;
}
/* The card starts shrunk by a transform, so its layout box is bigger than it looks: the words are pulled in by most of
   that difference (--ga-pull, set by the script) so they sit near the card rather than at the screen edges. */
html .ga-scrub_title.is-top { margin-bottom: calc(-1 * var(--ga-pull, 0px)); }
html .ga-scrub_title.is-bottom { margin-top: calc(-1 * var(--ga-pull, 0px)); }
html .ga-scrub_card {
  --ar: 1.7778; position: relative; overflow: hidden; border-radius: 16px; background: #000;
  width: min(96vw, calc(72svh * var(--ar))); height: min(72svh, calc(96vw / var(--ar))); aspect-ratio: var(--ar);
  box-shadow: 0 20px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1); will-change: transform;
}
html .ga-scrub_card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 120px rgba(0, 0, 0, .45);
}
html .ga-scrub_card :is(video, img) {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
}
html .ga-scrub_card img { z-index: 2; transition: opacity .4s ease; }
html .ga-scrub_card.has-frame img { opacity: 0; }
@media (max-width: 767px) {
  html .ga-scrub_card { border-radius: 12px; }
  html .ga-scrub_title { text-shadow: 0 2px 24px rgba(0, 0, 0, .28); }
  html .ga-scrub_title.is-top { align-self: flex-start; margin-left: 12px; }
  html .ga-scrub_title.is-bottom { align-self: flex-end; margin-right: 12px; }
}