/* Page heroes with a 3D scene, built like the Stony Island heroes: the hero is one screen, the scene fills all of it
   behind the words, and while the page scrolls the hero holds still and the scroll plays the scene from its first
   frame to its last; only then does the page move on.
   Structure: .hero-scroll > .hero-top (the screen: .hero-copy over .hero-stage) + .hero-run (the scroll room).
   js/hero3d.js loads js/hero3d/<scene>.js into .hero-stage. The stage's <picture> is the subject's box: the poster
   sits in it and the live scene frames itself to it (core.js), so the two line up exactly; the scene still draws over
   the whole screen, so anything flying out of the box keeps going. Computers: words left, subject right. Tablets and
   phones: headline and buttons on top, subject below.
   Nothing is held for visitors who prefer reduced motion, or when the scene cannot run (html.no-3d). */
.hero.hero-3d, .page-hero.hero-3d { padding-top: 0; overflow: hidden; }
.hero-3d .hero-top {
  position: relative; display: flex; align-items: center;
  height: calc(100vh - 77px); height: calc(100svh - 77px); min-height: 460px;   /* one screen under the 77px header */
}
.hero-3d .hero-copy { position: relative; z-index: 2; width: 100%; }
.hero-run { height: 0; }

/* the stage runs from edge to edge of the screen, behind the words */
.hero-stage { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: 0; pointer-events: none; }
.hero-stage .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-stage picture { position: absolute; display: block; aspect-ratio: 1057 / 919; }
.hero-stage picture::before {
  content: ""; position: absolute; inset: 12% 10% 8%; border-radius: 50%;
  background:
    radial-gradient(closest-side at 38% 48%, rgba(139,92,246,.22), transparent),
    radial-gradient(closest-side at 64% 56%, rgba(67,83,255,.18), transparent);
  filter: blur(22px);
}
.hero-stage .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transition: opacity .5s ease; }
.hero-stage.is-live .hero-poster { opacity: 0; }
/* a soft wash of the page colour where the words sit */
.hero-stage::after { content: ""; position: absolute; inset: 0; }

@media (min-width: 1024px) {
  .hero-3d .hero-copy { text-align: left; max-width: 520px; }
  .hero.hero-3d .h-xl { font-size: clamp(2.7rem, 4.15vw, 3.65rem); }
  .page-hero.hero-3d .h-xl { font-size: clamp(2.35rem, 3.6vw, 3.2rem); }
  .hero-3d .hero-copy .sub { margin-left: 0; font-size: 1.12rem; max-width: 500px; }
  .hero-3d .hero-copy .hero-ctas { justify-content: flex-start; }
  .hero-3d .hero-copy .breadcrumb { justify-content: flex-start; }
  /* subject on the right: each scene's content (its --xs/--ys/--cx/--cy in the FITS block) fills the space between
     the words (520px from the container's left + 22px) and the right edge of the screen, centred in it, and never
     taller than the hero */
  .hero-stage { --xs: .85; --ys: .8; --cx: .5; --cy: .5; }
  .hero-stage picture {
    --a: calc(max(0px, 50vw - 590px) + 566px);
    --b: 98.5vw;
    --w: min(calc((var(--b) - var(--a)) / var(--xs)), calc((100vh - 77px) * .94 * 1.15 / var(--ys)));
    width: var(--w);
    left: calc((var(--a) + var(--b)) / 2 - var(--cx) * var(--w));
    top: calc(50% - var(--cy) * var(--w) / 1.15);
  }
  .hero-stage::after { background: linear-gradient(90deg, rgba(248,247,252,.9) 0%, rgba(248,247,252,.62) 30%, rgba(248,247,252,0) 50%); }
  .hero.hero-3d .consult { margin-top: 40px; }
  .page-hero.hero-3d .metric-strip { margin-top: 40px; }
}
@media (max-width: 1023px) {
  .hero-3d .hero-top { align-items: flex-start; padding-top: 22px; }
  .hero-3d .hero-copy { text-align: center; }
  /* subject under the headline, as big as the scene allows (each scene's --rw, --cx, --cy, --y1 are in the FITS block
     at the end): its content centred across the screen and at 70% of the hero's height, never below its bottom */
  .hero-stage { --rw: 115; --cx: .5; --cy: .5; --y1: .92; }
  .hero-stage picture {
    --w: min(calc(var(--rw) * 1vw), calc((100vh - 77px) * .62 * 1.15));
    width: var(--w); right: auto; transform: none;
    left: calc(50% - var(--cx) * var(--w));
    top: min(calc(70% - var(--cy) * var(--w) / 1.15), calc(99% - var(--y1) * var(--w) / 1.15));
  }
  .hero-stage::after { background: linear-gradient(180deg, rgba(248,247,252,.92) 0%, rgba(248,247,252,.6) 30%, rgba(248,247,252,0) 46%); }
  .hero-3d .hero-copy .breadcrumb, .hero-3d .hero-copy .hero-note { display: none; }
  .hero-3d .hero-ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 18px; gap: 10px; }
  .hero-3d .hero-ctas .btn { width: auto; padding: 12px 20px; font-size: .92rem; }
}
@media (max-width: 640px) {
  /* phones: one screen holds the headline, the buttons and a big scene, like the Stony heroes; the longer lines wait
     for the page below */
  .hero-3d .hero-copy p { display: none; }
  .hero-stage picture { aspect-ratio: 670 / 586; }
}

/* ---------- the freeze ----------
   overflow: clip (not hidden) keeps the hero's edges tidy without making it a scroll box of its own, which would stop
   it from holding still. Browsers without clip keep the still hero above. */
@supports (overflow: clip) {
  .hero.hero-3d, .page-hero.hero-3d { overflow: clip; }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.no-3d) .hero-3d .hero-top { position: sticky; top: 77px; }
    html:not(.no-3d) .hero-run { height: 150vh; height: 150svh; }
  }
  @media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    html:not(.no-3d) .hero-run { height: 140vh; height: 140svh; }
  }
}

/* FITS: written by fit-css.js from fits.json, do not edit by hand */
.hero-stage[data-scene="about"] { --rw: 116; --cx: 0.494; --cy: 0.55; --y1: 0.845; --xs: 0.848; --ys: 0.589; }
.hero-stage[data-scene="ai"] { --rw: 108; --cx: 0.529; --cy: 0.462; --y1: 0.768; --xs: 0.908; --ys: 0.612; }
.hero-stage[data-scene="ai-back-office"] { --rw: 111; --cx: 0.531; --cy: 0.477; --y1: 0.837; --xs: 0.879; --ys: 0.719; }
.hero-stage[data-scene="ai-receptionist"] { --rw: 140; --cx: 0.6; --cy: 0.473; --y1: 0.939; --xs: 0.656; --ys: 0.931; }
.hero-stage[data-scene="ai-sales-agent"] { --rw: 110; --cx: 0.549; --cy: 0.463; --y1: 0.856; --xs: 0.891; --ys: 0.785; }
.hero-stage[data-scene="booking-pipelines"] { --rw: 116; --cx: 0.542; --cy: 0.482; --y1: 0.842; --xs: 0.843; --ys: 0.719; }
.hero-stage[data-scene="business-websites"] { --rw: 118; --cx: 0.485; --cy: 0.518; --y1: 0.9; --xs: 0.829; --ys: 0.763; }
.hero-stage[data-scene="campaigns"] { --rw: 129; --cx: 0.565; --cy: 0.507; --y1: 0.961; --xs: 0.759; --ys: 0.907; }
.hero-stage[data-scene="contact"] { --rw: 109; --cx: 0.508; --cy: 0.506; --y1: 0.839; --xs: 0.901; --ys: 0.666; }
.hero-stage[data-scene="customers"] { --rw: 117; --cx: 0.5; --cy: 0.493; --y1: 0.751; --xs: 0.84; --ys: 0.515; }
.hero-stage[data-scene="domains-email"] { --rw: 121; --cx: 0.528; --cy: 0.508; --y1: 0.919; --xs: 0.807; --ys: 0.823; }
.hero-stage[data-scene="growth"] { --rw: 124; --cx: 0.505; --cy: 0.5; --y1: 0.977; --xs: 0.788; --ys: 0.953; }
.hero-stage[data-scene="home"] { --rw: 107; --cx: 0.53; --cy: 0.495; --y1: 0.977; --xs: 0.92; --ys: 0.964; }
.hero-stage[data-scene="industry-fitness"] { --rw: 123; --cx: 0.454; --cy: 0.492; --y1: 0.917; --xs: 0.795; --ys: 0.851; }
.hero-stage[data-scene="industry-health"] { --rw: 113; --cx: 0.514; --cy: 0.546; --y1: 0.845; --xs: 0.865; --ys: 0.598; }
.hero-stage[data-scene="industry-home-services"] { --rw: 129; --cx: 0.5; --cy: 0.502; --y1: 0.889; --xs: 0.759; --ys: 0.774; }
.hero-stage[data-scene="industry-professional"] { --rw: 122; --cx: 0.563; --cy: 0.561; --y1: 0.889; --xs: 0.803; --ys: 0.655; }
.hero-stage[data-scene="industry-retail"] { --rw: 130; --cx: 0.602; --cy: 0.497; --y1: 0.884; --xs: 0.756; --ys: 0.774; }
.hero-stage[data-scene="landing-pages"] { --rw: 137; --cx: 0.542; --cy: 0.528; --y1: 0.85; --xs: 0.714; --ys: 0.644; }
.hero-stage[data-scene="lead-capture"] { --rw: 118; --cx: 0.494; --cy: 0.492; --y1: 0.966; --xs: 0.833; --ys: 0.947; }
.hero-stage[data-scene="online-stores"] { --rw: 111; --cx: 0.497; --cy: 0.486; --y1: 0.873; --xs: 0.886; --ys: 0.774; }
.hero-stage[data-scene="pricing"] { --rw: 120; --cx: 0.516; --cy: 0.446; --y1: 0.864; --xs: 0.819; --ys: 0.837; }
.hero-stage[data-scene="product-cinematics"] { --rw: 130; --cx: 0.429; --cy: 0.489; --y1: 0.897; --xs: 0.755; --ys: 0.815; }
.hero-stage[data-scene="reputation"] { --rw: 108; --cx: 0.536; --cy: 0.458; --y1: 0.906; --xs: 0.908; --ys: 0.896; }
.hero-stage[data-scene="social-content"] { --rw: 117; --cx: 0.555; --cy: 0.487; --y1: 0.809; --xs: 0.836; --ys: 0.644; }
.hero-stage[data-scene="solutions"] { --rw: 110; --cx: 0.5; --cy: 0.481; --y1: 0.93; --xs: 0.888; --ys: 0.898; }
.hero-stage[data-scene="studio"] { --rw: 118; --cx: 0.532; --cy: 0.396; --y1: 0.768; --xs: 0.829; --ys: 0.744; }
.hero-stage[data-scene="video-ads"] { --rw: 111; --cx: 0.506; --cy: 0.487; --y1: 0.93; --xs: 0.881; --ys: 0.887; }
.hero-stage[data-scene="websites"] { --rw: 113; --cx: 0.499; --cy: 0.529; --y1: 0.831; --xs: 0.866; --ys: 0.603; }
/* /FITS */