/* The careers hero, rebuilt around the globe (31 Aug 2026).
   Deliberately NOT reusing .hero: that class is a dark brand-gradient band with
   white text, and the approved globe is the light one, so every .hero rule would
   have to be undone. A separate class is cheaper and cannot leak onto the other
   pages that still use the dark hero.
   Colours are DBB tokens, taken from main.css which already holds them. */

.ghero {
  position: relative;
  background: var(--white);
  padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
}
.ghero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(20px, 3.5vw, 52px);
  align-items: center;
}
.ghero-copy { max-width: 34rem; }
.ghero-eyebrow {
  display: block;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--link);
}
.ghero h1 {
  margin: 0.55rem 0 0;
  color: var(--forest);
  font-size: clamp(2.25rem, 4.9vw, 3.85rem);
  line-height: 1.04; letter-spacing: -0.02em;
  text-wrap: balance;
}
.ghero-lead {
  margin: 1.15rem 0 0;
  color: var(--cocoa);
  font-size: 1.06rem; line-height: 1.62;
  max-width: 31rem;
}
.ghero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 1.9rem; }
.ghero-note { color: var(--cocoa); font-size: 0.9rem; }

/* The stage. The still image is what paints first and what stays if the globe
   cannot run, so this box is never empty and never changes height. */
.ghero-stage {
  position: relative;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 1 / 1;
  justify-self: end;            /* logical, so it flips on the Arabic page */
}
.ghero-still,
.ghero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ghero-still { object-fit: contain; transition: opacity .55s ease; }

/* ⛔ The canvas is INERT until a frame has actually painted, and it never takes
   the vertical axis. opacity:0 does not remove an element from hit testing, so a
   canvas that is merely present swallows every touch that lands on it. With
   touch-action:none that made a 327px block of the mobile hero unscrollable,
   including for visitors who had asked for reduced motion, or whose device has no
   WebGL, where the globe never runs at all and the swipe did nothing whatsoever.
   pan-y hands vertical swipes and pinch-zoom back to the browser; a horizontal
   drag still reaches pointermove and still spins the globe. */
.ghero-stage canvas {
  opacity: 0; transition: opacity .65s ease;
  pointer-events: none;
}
.ghero-stage.is-live canvas {
  opacity: 1;
  pointer-events: auto;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.ghero-stage.is-live canvas:active { cursor: grabbing; }
.ghero-stage.is-live .ghero-still { opacity: 0; }

/* Arabic takes no Latin tracking. main.css already resets h1/h2/h3 for RTL, but
   this file loads later at equal specificity, so .ghero's own values would win. */
[dir="rtl"] .ghero h1,
[dir="rtl"] .ghero-eyebrow,
[dir="rtl"] .ghero-lead { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .ghero-still, .ghero-stage canvas { transition: none; }
}

@media (max-width: 900px) {
  .ghero-inner { grid-template-columns: 1fr; gap: 30px; }
  .ghero-copy { max-width: none; }
  .ghero-stage { justify-self: center; max-width: 460px; }
}
@media (max-width: 560px) {
  .ghero-stage { max-width: 340px; }
}