/* the mesh, named once and used twice */
:root{--nx-mesh:url("/delivered/4c2ae7c9095f03cd.jpg")}

/* ---- 1 · the hero copy sits higher --------------------------------------
   The hero centres its content, so the block floats in the middle of the
   panel and there is no way to open space under it without shortening the
   copy. Anchored to the top instead, with the padding doing the placing, so
   the field below the office strip is free. */
.at-hero{align-items:flex-start;padding:158px 0 120px}

/* ---- 3 · the kicker rule, white ---------------------------------------- */
.at-hero .at-kicker::before{background:#ffffff;background-color:#ffffff}

/* ---- 2 · the office strip -----------------------------------------------
   Countries rather than cities, set in Geist instead of Geist Mono. The caps
   come off with the mono, so "USA" reads as an initialism and the rest as
   place names; the mono tracking goes with them, because .16em is set for
   uppercase and gaps badly in mixed case. */
.at-hero .at-hero-legend > div{
  font-family:var(--ui);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.01em;
  text-transform:none}
.at-hero .at-hero-legend .at-sep{padding:0 4px}

/* ---- 4 · the platform band carries the hero's mesh ----------------------
   As a ::before rather than a background on the section itself, because the
   section is ~2600px tall and the picture needs its own layer to sit on and
   a veil over it. The veil is not decoration: the band's copy is white, and
   the mesh's light half would take it to about 3:1 unaided. */
#platform{background:#0A1D33;position:relative;isolation:isolate}
#platform::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(9,22,42,.58),rgba(9,22,42,.58)),var(--nx-mesh);
  background-size:cover,cover;
  background-position:50% 50%,50% 50%;
  /* The band is 2840px tall and the picture is 1920x1080, so `cover` scales it
     to about 5000px wide and all that is left on screen is a corner of one
     sweep: the mesh stops reading as the mesh. Fixed sizes it against the
     viewport instead, at exactly the scale the hero shows it, and the section
     scrolls past as a window onto the same field. Touch devices get the
     scrolled version, because iOS has never honoured fixed attachment and
     falls back in a way that jumps. */
  background-attachment:scroll,fixed}
@media(hover:none),(max-width:820px){
  #platform::before{background-attachment:scroll,scroll}
}
#platform > .at-wrap{position:relative;z-index:2}

/* ---- 9 · the compliance headline breaks after "compliance" --------------
   Done in the markup with a <br>, not here: that section is one of the
   injected replacements, so its heading is literal HTML and the headline map
   entry the other sections use never reaches the page. */

/* ---- 10 · the questions move below the CTA ------------------------------
   The root becomes a flex column purely so two children can be re-ordered.
   Everything else stays at order 0 and so keeps its document order; only the
   questions and the footer are placed. The nav is position:fixed and out of
   flow, so it is unaffected. */
.at{display:flex;flex-direction:column}
#faq{order:1}
.at-foot{order:2}