/* hero-motion.css: the layout the shared hero entrance (hero-motion.js) needs.
   Loaded by every service page and every who-we-serve page. The SEO page's own
   card styles stay in its page. */

/* ---- the pin: the hero's inner block sticks under the header while its entrance plays; the spacer
   inside the hero carries the scroll. The hero element itself is never moved. ---- */
.gf-space { display: block; pointer-events: none; }
html #service-overview.hm-pin-host { height: auto !important; min-height: 0 !important; overflow: visible !important; }
html #service-overview.hm-pin-host > #service-overview-scene.hm-pinned { position: sticky; top: 71px; height: calc(100vh - 71px); height: calc(100svh - 71px); min-height: 0 !important; overflow: hidden; }
html section.hero.hm-pin-host { padding-top: 0; padding-bottom: 0; }
html section.hero.hm-pin-host > .hero-grid.hm-pinned { position: sticky; top: 71px; height: calc(100vh - 71px); height: calc(100svh - 71px); box-sizing: border-box; align-content: center; }
@media (max-width: 1039px) {
  /* a phone pins one screen of the hero: the copy reads from the top and whatever sits below the
     fold (the visual, the links) waits there until the hero unpins, uncut */
  html #service-overview.hm-pin-host > #service-overview-scene.hm-pinned { overflow-x: clip; overflow-y: visible; }
  html section.hero.hm-pin-host > .hero-grid.hm-pinned { overflow-x: clip; }
  html section.hero.hm-pin-host > .hero-grid.hm-pinned { align-content: start; padding-top: 14px; height: auto; min-height: calc(100vh - 71px); min-height: calc(100svh - 71px); }
  html #service-overview.hm-pin-host > #service-overview-scene.hm-pinned > .service-overview-content { height: auto; min-height: 0 !important; }
}

/* ---- a service hero in split layout: the stack left, the visual right, the links row under both.
   Children of the clone, in order: the visual, the headline wrapper, the actions, the proof row,
   (a sub-headline if the page has one), the links row. The layout stylesheet sets flex with
   !important, so this needs the extra id to win. ---- */
@media (min-width: 1040px) {
  #service-overview #service-overview-scene > .service-overview-content.hm-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(600px, calc(50% + 30px)));
    grid-template-rows: 1fr auto auto auto 1fr auto;
    column-gap: clamp(28px, 4vw, 64px);
    align-items: center;
    justify-items: center;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding-left: clamp(16px, 3vw, 40px) !important;
    padding-right: clamp(16px, 3vw, 40px) !important;
    height: 100%;
    min-height: 0 !important;
    box-sizing: border-box;
  }
  #service-overview #service-overview-scene.hm-pinned > .service-overview-content { min-height: 0 !important; height: 100%; }
  #service-overview #service-overview-scene > .service-overview-content.hm-split > .hm-visual { grid-column: 2; grid-row: 1 / span 5; align-self: center; justify-self: end; width: 100% !important; margin-bottom: 0 !important; }
  #service-overview #service-overview-scene > .service-overview-content.hm-split > .hm-head { grid-column: 1; grid-row: 2; justify-self: center; }
  #service-overview #service-overview-scene > .service-overview-content.hm-split > .hm-cta { grid-column: 1; grid-row: 3; justify-self: center; }
  #service-overview #service-overview-scene > .service-overview-content.hm-split > .gf-proof { grid-column: 1; grid-row: 4; justify-self: center; }
  #service-overview #service-overview-scene > .service-overview-content.hm-split > .gf-proof { width: 100% !important; max-width: 430px; box-sizing: border-box; }
  #service-overview #service-overview-scene > .service-overview-content.hm-split > .gf-foot { grid-column: 1 / -1; grid-row: 6; justify-self: center; margin-top: 40px !important; }
  /* a stacked hero (a marquee strip above the headline) keeps the layout stylesheet's column; the
     strip only needs its slot kept while it is invisible */
  #service-overview #service-overview-scene > .service-overview-content.hm-stack > .hm-visual { will-change: transform, opacity; }
}
@media (max-width: 1039px) {
  /* on a phone the stack reads top to bottom: headline, actions, proof, the visual, the links */
  #service-overview #service-overview-scene > .service-overview-content.hm-split > .hm-visual { order: 4; margin-top: 34px; margin-bottom: 8px !important; }
  #service-overview #service-overview-scene > .service-overview-content.hm-split > .gf-foot { order: 5; margin-top: 22px !important; }
}
.gf-foot { will-change: opacity, transform; }
.gf-foot a { transform-origin: 50% 100%; }

/* ---- the words, the traveller and its ghosts ---- */
.gf-h1 { position: relative; }
.gf-hw { display: inline-block; transform-origin: 50% 100%; opacity: 0; }
.gf-hdot { display: inline-block; transform-origin: 50% 100%; }
.gf-hghost { position: absolute; display: inline-block; color: #2F8F6B; opacity: 0; pointer-events: none; transform-origin: 50% 100%; }
/* a headline with an animated underline keeps it until the headline has settled */
.hm-rule-hold .dot-accent, .hm-rule-hold .dot-accent .rwi, .hm-rule-hold .dot-accent .gf-hw, .hm-rule-hold .dot-accent .gf-hdot { text-decoration-color: transparent !important; transition: none !important; }
/* the drawn rule (.rule-draw) waits the same way: it draws once the headline has settled */
.hm-rule-hold .dot-accent::after { transform: scaleX(0) !important; transition: none !important; }

/* ---- the ball: the headline's period once it leaves, a fixed circle sized from the glyph ---- */
.gf-ball, .gf-bghost { position: fixed; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #2F8F6B; transform-origin: 50% 100%; pointer-events: none; z-index: 900; opacity: 0; will-change: transform; }
.gf-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* the headings the ball lands on dip from their baseline; their periods are inline-blocks so they can scale */
.case-studies__heading, .service-how-it-works__inner h2, .sec-head h2 { transform-origin: 50% 100%; }
.case-studies__heading-dot, .service-how-it-works__inner h2 span, .sec-head h2 .hm-dot { display: inline-block; transform-origin: 50% 100%; }

/* the pre-hide: the head script marks <html> before first paint so a fresh page never flashes its finished
   hero before the engine hides the pieces (Jad, 2026-09-06); the engine takes the class off as it binds */
html.hm-wait section.hero .hero-copy > *, html.hm-wait section.hero .hero-viz, html.hm-wait #service-overview .service-overview-content > * { opacity: 0 !important; }
/* the fit pass (hero-motion.js, phones only): the visual scaled from its top and the space it gives up
   pulled out of its bottom margin. Important because pages write these two inline. */
html .hm-visual[data-hm-fit], html #service-overview #service-overview-scene > .service-overview-content > .hm-visual[data-hm-fit] { transform: var(--hm-tf, none) !important; transform-origin: top center !important; margin-bottom: var(--hm-mb, 0px) !important; }