/* ============================================================================
   INVELO CINEMATIC ENGINE — cinematic.css                     Sprint 01 · v0.1.0
   ----------------------------------------------------------------------------
   Styles ONLY the two Sprint 01 components:

     .invelo-header      the Elementor Pro Theme Builder header (fixed, never moves)
     .invelo-hero-*      the Hero saved template (pinned stage, scroll-driven video)

   It sits on top of the frozen Global Kit (invelo-global.css) and redefines
   nothing in it: every colour, font, radius and the 1440 container come from
   the kit's --invelo-* tokens. Selectors are the stable class hooks the
   templates carry in `_css_classes`. Elementor element IDs are never used.

   Elementor 4.2.x note: "optimized markup" may omit .elementor-widget-container
   inside widgets. Nothing below depends on that wrapper being present.

   Layout model (unchanged from the approved prototype):
     --invelo-s   1 Figma pixel = min(100vw / 1728, 100svh / 1218). At exactly
                  1728x1218 the hero is pixel-identical to the comp. On a wider
                  or shorter viewport the height rules and the width slack goes
                  to the gutters; narrower/taller and the width rules.
     --invelo-su  = max(--invelo-s, 0.8px): the header's legibility floor.
   ========================================================================== */


/* == 0. Scale tokens & live transition state =============================== */

/* Registered so it computes to a real length (cinematic.js reads it back). */
@property --invelo-s {
  syntax: "<length>";
  inherits: true;
  initial-value: 1px;
}

:root {
  --invelo-frame-w: 1728;
  --invelo-frame-h: 1218;

  --invelo-s: min(100vw / var(--invelo-frame-w), 100svh / var(--invelo-frame-h));
  --invelo-su: max(var(--invelo-s), 0.8px);

  /* The scrub distance: the ONE number that tunes the whole hero. The video
     owns 0 -> 0.72 of it (250svh, the approved feel); UI exit, camera push and
     blackout share the remaining 98svh. cinematic.js measures the shell, so
     changing this value retunes everything. */
  --invelo-hero-scroll: 348svh;

  /* Video box — Figma layer x -60, y 178, w 1848, h 1039, centred, bottom-pinned */
  --invelo-video-w: calc(1848 * var(--invelo-s));
  --invelo-video-h: calc(var(--invelo-video-w) * 1039 / 1848);

  /* Rev 02 (PM): the headline must never sit on the astronaut's head. The
     helmet crown is at 19.26 % of the video frame (the topmost helmet pixel
     over the whole encode) and the headline block ends at y 376 of the frame
     (216 + 160). When the crown would come closer to that line than
     --invelo-crown-clearance, the video is dropped by the difference (the
     same rule the short-desktop tier already uses). 0px = Figma exactly. */
  --invelo-crown-clearance: 16px;
  --invelo-hero-type-bottom: calc(376 * var(--invelo-s));
  --invelo-video-drop: max(0px, calc(var(--invelo-hero-type-bottom) + var(--invelo-crown-clearance) + 1 * var(--invelo-s)
                                     - 100svh + 0.8074 * var(--invelo-video-h)));
  --invelo-video-bottom: calc(1 * var(--invelo-s) - var(--invelo-video-drop));

  /* Visor calibration — fractions of the video frame, measured on the last
     frame: centre (960, 452) of 1920x1080. The camera origin and the blackout
     centre are the SAME expression, so they cannot drift apart. */
  --invelo-helmet-u: 0.50000;
  --invelo-helmet-v: 0.41852;
  --invelo-helmet-x: calc(50% + (var(--invelo-helmet-u) - 0.5) * var(--invelo-video-w));
  --invelo-helmet-y: calc(100% - var(--invelo-video-bottom) - var(--invelo-video-h)
                          + var(--invelo-helmet-v) * var(--invelo-video-h));

  /* Live state. cinematic.js is the only writer; every value is a pure
     function of scroll progress. Defaults = hero at rest. */
  --invelo-camera-scale: 1;
  --invelo-camera-dim: 1;
  --invelo-blackout-rx: 0px;
  --invelo-blackout-ry: 0px;
  --invelo-blackout-opacity: 0;

  /* Header theme tokens (data-header-theme="light" = light ink on dark). */
  --invelo-hdr-ink: #FFFFFF;
  --invelo-hdr-glass-a: rgba(201, 201, 201, 0.48);
  --invelo-hdr-glass-b: rgba(196, 196, 196, 0.06);
  --invelo-hdr-stroke-a: rgba(255, 255, 255, 0.80);
  --invelo-hdr-stroke-b: rgba(211, 211, 211, 0.10);

  /* Glass fills decoded from the Figma nodes (fill 80%->10%, layer .3 / .6) */
  --invelo-hero-glass-soft-a: rgba(201, 201, 201, 0.24);
  --invelo-hero-glass-soft-b: rgba(196, 196, 196, 0.03);
  --invelo-hero-stroke-a: rgba(255, 255, 255, 0.80);
  --invelo-hero-stroke-b: rgba(211, 211, 211, 0.10);

  /* Headline gradient reaches amber at 91.66% of the text width (Figma). */
  --invelo-hero-gradient-headline: linear-gradient(90deg,
      #F04E23 0%, #F15722 17.4%, #F46F20 44.9%, #F8961C 79.8%, #FAA61A 91.7%);

  /* Baseline nudges — font-dependent, re-measure when Soliden/Nexa land. */
  --invelo-nudge-eyebrow: 0;
  --invelo-nudge-headline: -5;
  --invelo-nudge-left-title: 0;
  --invelo-nudge-body: 0;
  --invelo-nudge-cta-label: -1;
  --invelo-nudge-card-title: -2.26;
  --invelo-nudge-card-body: -2.1;
  --invelo-nudge-metric-40: -5.2;
  --invelo-nudge-metric-65: 0;
  --invelo-nudge-clients-label: 0;
}


/* == 0b. Container defaults — GLOBAL, ELEMENTOR TAKES OVER ================
   Every container the templates carry gets its spacing, width and gap as
   DEFAULTS through Elementor's own container variables (--padding-*,
   --margin-*, --width, --gap, --min-height). Elementor writes a user's
   Advanced-tab values as `.elementor-<post> .elementor-element.elementor-element-<id>`
   (0,3,0), which beats these (0,2,0) rules — so anything set in the editor
   replaces the default instead of fighting it. Only the cinematic mechanics
   (position, height of the stage, overflow, z-order, the camera transform)
   are written as real properties and stay ours.
   ------------------------------------------------------------------------- */
.e-con.invelo-header, .e-con.invelo-header-inner, .e-con.invelo-header-nav,
.e-con.invelo-hero-shell, .e-con.invelo-hero-stage, .e-con.invelo-hero-camera,
.e-con.invelo-hero-content, .e-con.invelo-hero-heading, .e-con.invelo-hero-left,
.e-con.invelo-hero-proof, .e-con.invelo-hero-clients, .e-con.invelo-hero-clients-pill,
.e-con.invelo-hero-expertise, .e-con.invelo-hero-specialists {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --min-height: 0px;
}
/* the two full-width sections are 100% wide by default (Elementor "Full Width") */
.e-con.invelo-hero-shell, .e-con.invelo-hero-stage, .e-con.invelo-header { --width: 100%; }


/* == 1. Global header ======================================================
   PAGE FURNITURE, NOT PART OF THE HERO. position:fixed on the Theme Builder
   header container, which Elementor renders outside every page section.
   No entrance, no sticky threshold, no transform, nothing scroll-driven — the
   only way to guarantee an identical getBoundingClientRect().top at every
   hero progress value. The band itself is transparent and click-through.
   ------------------------------------------------------------------------- */
.e-con.invelo-header,
.invelo-header {
  position: fixed;
  --position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --width: 100%;
  width: 100%;
  z-index: var(--invelo-header-z, 9999);
  --z-index: var(--invelo-header-z, 9999);
  pointer-events: none;
  background: transparent;
}
body.admin-bar .invelo-header { top: var(--wp-admin--admin-bar-height, 32px); }

.invelo-header a,
.invelo-header button,
.invelo-header nav,
.invelo-header [role="button"] { pointer-events: auto; }

/* one grid: logo | nav pill | CTA. At 1728 the container is 1440 wide at
   x=144, so: logo x144, nav centred on 864 (Figma 621 + 487/2), CTA right
   edge 1584 (Figma 1401 + 183). */
.e-con.invelo-header-inner,
.invelo-header-inner {
  position: relative;
  display: grid;
  --display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  height: calc(88 * var(--invelo-su));
  color: var(--invelo-hdr-ink);
}
.invelo-header .elementor-widget { margin: 0; width: auto; }

/* Logo — Figma x144 y38, 143 x 50 */
.invelo-header .invelo-header-logo {
  justify-self: start;
  margin: calc(38 * var(--invelo-su)) 0 0 0;
  width: calc(143 * var(--invelo-su));
  height: calc(50 * var(--invelo-su));
  text-align: left;
  line-height: 0;
}
.invelo-header .invelo-header-logo a { display: block; width: 100%; height: 100%; }
.invelo-header .invelo-header-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* Nav pill — Figma x621 y37, 487 x 51, fully round */
.e-con.e-con-full.invelo-header-nav,
.e-con.invelo-header-nav,
.invelo-header-nav {
  position: relative;
  justify-self: center;
  --margin-top: calc(37 * var(--invelo-su));
  --width: calc(487 * var(--invelo-su));
  width: var(--width);
  height: calc(51 * var(--invelo-su));
  border-radius: var(--invelo-radius-pill, 999px);
  border: 0;
  background: linear-gradient(163.5deg, var(--invelo-hdr-glass-a), var(--invelo-hdr-glass-b));
  -webkit-backdrop-filter: blur(var(--invelo-glass-blur, 20px));
  backdrop-filter: blur(var(--invelo-glass-blur, 20px));
  pointer-events: auto;
}
/* the 1px gradient stroke the Figma node carries, as a masked ring */
.invelo-header-nav::after,
.invelo-hero-clients-pill::after,
.invelo-hero-specialists::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: max(1px, calc(1 * var(--invelo-s)));
  background: linear-gradient(var(--invelo-glass-angle, 120deg), var(--invelo-hero-stroke-a), var(--invelo-hero-stroke-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.invelo-header-nav::after {
  --invelo-glass-angle: 163.5deg;
  --invelo-hero-stroke-a: var(--invelo-hdr-stroke-a);
  --invelo-hero-stroke-b: var(--invelo-hdr-stroke-b);
}

/* Elementor Pro Nav Menu widget, horizontal layout, pointer none */
.invelo-header-nav .invelo-header-menu,
.invelo-header-nav .invelo-header-menu > .elementor-widget-container,
.invelo-header-nav .elementor-nav-menu--main,
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu { height: 100%; }
.invelo-header-nav .invelo-header-menu { width: 100%; }
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 45.4 lands the reference's ink gaps; shrinks first so four links always fit */
  gap: min(calc(45.4 * var(--invelo-su)), calc(45.4 * var(--invelo-s) + 12px));
  font-size: calc(14 * var(--invelo-su));
  line-height: 1;
}
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu > li {
  display: flex;
  margin: 0;
}
/* the link fills the pill height: WCAG 2.2 target size, and no pointer styles */
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu a,
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 calc(2 * var(--invelo-su));
  margin: 0;
  font-family: var(--invelo-font-body);
  font-size: inherit;
  font-weight: 400;
  color: var(--invelo-hdr-ink);
  text-decoration: none;
  background: none;
  transition: opacity .18s ease;
}
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu a:hover,
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu a:focus { opacity: .7; color: var(--invelo-hdr-ink); }
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu a::before,
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu a::after { display: none; }
.invelo-header-nav .elementor-nav-menu--main .elementor-nav-menu .current-menu-item > a { opacity: .75; }

/* mobile trigger (Pro renders it for the dropdown breakpoint; hidden on desktop) */
.invelo-header .elementor-menu-toggle { display: none; }

/* Header CTA — Figma x1401 y37, 183 x 51. Kit pill + gradient; dark ink is the
   kit's global CTA decision (PM Revision 01). */
.invelo-header .invelo-header-cta {
  justify-self: end;
  margin: calc(37 * var(--invelo-su)) 0 0 0;
  line-height: 0;
}
.invelo-header .invelo-header-cta .elementor-button-wrapper { display: block; }
.invelo-header .invelo-header-cta .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(183 * var(--invelo-su));
  height: calc(51 * var(--invelo-su));
  min-height: 0;
  padding: 0;
  border-radius: var(--invelo-radius-pill, 999px);
  background-image: var(--invelo-brand-gradient);
  color: var(--invelo-cta-ink, #111111);
  font-family: var(--invelo-font-body);
  font-size: calc(14 * var(--invelo-su));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.invelo-header .invelo-header-cta .elementor-button:hover,
.invelo-header .invelo-header-cta .elementor-button:focus { color: var(--invelo-cta-ink, #111111); }
.invelo-header .invelo-header-cta .elementor-button-content-wrapper { display: block; }

/* focus — visible on black and on orange */
.invelo-header :where(a, [role="button"], button):focus-visible,
.invelo-hero-stage :where(a, button, [tabindex]):focus-visible {
  outline: max(2px, calc(2 * var(--invelo-s))) solid var(--invelo-focus-color, #FFFFFF);
  outline-offset: max(3px, calc(3 * var(--invelo-s)));
}


/* == 2. Hero shell, pinned stage, camera group ============================= */

/* Outer shell: 1 stage + the scrub distance. The trigger runs from the
   shell's top to its bottom, so the scrub length IS --invelo-hero-scroll. */
.e-con.invelo-hero-shell,
.invelo-hero-shell {
  position: relative;
  --position: relative;
  height: calc(100svh + var(--invelo-hero-scroll));
  background: var(--invelo-black, #000);
  color: var(--invelo-white, #fff);
  overflow: visible;                 /* sticky needs a non-clipping shell */
}

/* The visible stage. CSS sticky is the pin: no pin-spacer, no reflow. */
.e-con.invelo-hero-stage,
.invelo-hero-stage {
  position: sticky;
  --position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  --overflow: clip;
  isolation: isolate;
  z-index: 1;
}

/* Rev 02 anchoring: ONE mechanism per stage. When cinematic.js finds that the
   rendered DOM cannot hold a sticky stage (scroll-container ancestor,
   overridden position, Elementor Sticky effect) it marks the shell and drives
   a single ScrollTrigger pin instead — sticky is switched OFF here first, so
   the two never run together. The shell keeps its height (no pin spacer). */
.invelo-hero-shell[data-invelo-anchor="pin"] .invelo-hero-stage {
  position: relative;
  --position: relative;
  top: auto;
}

/* no Elementor widget spacing anywhere inside the stage — geometry is absolute */
.invelo-hero-stage .elementor-widget { margin: 0; }
.invelo-hero-stage .elementor-widget-image { text-align: left; line-height: 0; }
.invelo-hero-stage .elementor-widget-image img,
.invelo-hero-stage .elementor-widget-image a { display: block; }
.invelo-hero-stage .elementor-widget-heading .elementor-heading-title,
.invelo-hero-stage .elementor-heading-title { margin: 0; padding: 0; color: var(--invelo-white, #fff); }

/* Camera group: everything the virtual camera pushes through, scaled about
   the helmet. The header (outside the shell) and the blackout (stage::after)
   are deliberately NOT inside it. */
.e-con.invelo-hero-camera,
.invelo-hero-camera {
  position: absolute;
  --position: absolute;
  inset: 0;
  --width: 100%;
  height: 100%;
  z-index: 1;
  --z-index: 1;
  transform: scale(var(--invelo-camera-scale));
  transform-origin: var(--invelo-helmet-x) var(--invelo-helmet-y);
  opacity: var(--invelo-camera-dim);
  backface-visibility: hidden;
}

/* edge bleed — averaged edge columns of the video, shown only when the
   viewport is wider than the video box */
.invelo-hero-camera::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: var(--invelo-video-bottom);
  height: var(--invelo-video-h);
  pointer-events: none;
  background:
    url("../img/hero-bleed-left.png")  left  / 50.5% 100% no-repeat,
    url("../img/hero-bleed-right.png") right / 50.5% 100% no-repeat;
  background-color: #000;
}
/* Figma "Rectangle 4464": bottom fade, y 859, h 359 */
.invelo-hero-camera::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  height: calc(359 * var(--invelo-s));
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 97.9%);
  pointer-events: none;
}

/* The HTML widget that carries the <video>. It spans the stage so the video's
   absolute box resolves against the same rectangle as the pseudo layers. */
.invelo-hero-media,
.invelo-hero-media > .elementor-widget-container {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  z-index: 1;
}
/* Rev 02 root cause (live screenshot 1897x914): Elementor's frontend sheet
   carries `.elementor embed, .elementor iframe, .elementor object,
   .elementor video { max-width:100%; width:100% }` (0,1,1), which beat the
   (0,1,0) rule below — the video became 100 % of the stage wide, object-fit
   cover scaled the astronaut to the viewport width and lifted the helmet
   into the headline. Both selectors are (0,2,0) now, so the Figma video box
   wins on the site as well as in the mirror. */
.invelo-hero-stage .invelo-hero-video,
.elementor .invelo-hero-video {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: var(--invelo-video-bottom);
  width: var(--invelo-video-w);
  height: var(--invelo-video-h);
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  transform: translateX(-50%);
  object-fit: cover;
  background: transparent;
  /* the encode carries one light-grey row at y=0; trim it in absolute px */
  clip-path: inset(2px 0 0 0);
  pointer-events: none;
  display: block;
}

/* Visor blackout — a black ellipse locked to the visor that grows past the
   viewport corners. No ring, no glow, no colour: it only gets darker.
   A feathered mask (86% -> 100%) so it reads as the glass closing over the
   lens rather than a circle expanding on a web page. */
.invelo-hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #000;
  pointer-events: none;
  opacity: var(--invelo-blackout-opacity);
  -webkit-mask-image: radial-gradient(var(--invelo-blackout-rx) var(--invelo-blackout-ry)
      at var(--invelo-helmet-x) var(--invelo-helmet-y), #000 0 86%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(var(--invelo-blackout-rx) var(--invelo-blackout-ry)
      at var(--invelo-helmet-x) var(--invelo-helmet-y), #000 0 86%, rgba(0, 0, 0, 0) 100%);
  will-change: opacity;
}
@supports not (mask-image: radial-gradient(#000, #000)) {
  .invelo-hero-stage::after {
    -webkit-clip-path: ellipse(var(--invelo-blackout-rx) var(--invelo-blackout-ry) at var(--invelo-helmet-x) var(--invelo-helmet-y));
            clip-path: ellipse(var(--invelo-blackout-rx) var(--invelo-blackout-ry) at var(--invelo-helmet-x) var(--invelo-helmet-y));
  }
}
/* Safari path: same geometry, centre pre-resolved to px by cinematic.js */
html[data-invelo-cine-fallback] .invelo-hero-stage::after {
  -webkit-mask-image: radial-gradient(var(--invelo-blackout-rx) var(--invelo-blackout-ry)
      at var(--invelo-helmet-px-x) var(--invelo-helmet-px-y), #000 0 86%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(var(--invelo-blackout-rx) var(--invelo-blackout-ry)
      at var(--invelo-helmet-px-x) var(--invelo-helmet-px-y), #000 0 86%, rgba(0, 0, 0, 0) 100%);
  -webkit-clip-path: none;
          clip-path: none;
}
/* past the corners the mask does nothing: drop it, and the #000000 endpoint is exact */
.invelo-hero-stage[data-blackout="full"]::after {
  -webkit-mask-image: none;
          mask-image: none;
  -webkit-clip-path: none;
          clip-path: none;
}
/* no blackout layer at all until the engine has taken over */
html:not([data-invelo-cine="on"]) .invelo-hero-stage::after { display: none; }


/* == 3. Hero content layer =================================================
   .invelo-hero-content is the kit container (1440 content span, x=144 at
   1728), stretched over the stage. The three groups the UI exit animates
   are absolute inside it; GSAP writes opacity/transform on those three only.
   ------------------------------------------------------------------------- */
.e-con.invelo-hero-content,
.invelo-hero-content {
  position: absolute;
  --position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 3;
  --z-index: 3;
  pointer-events: none;
}
.invelo-hero-content a,
.invelo-hero-content button { pointer-events: auto; }

.e-con.invelo-hero-heading, .e-con.invelo-hero-left, .e-con.invelo-hero-proof,
.invelo-hero-heading, .invelo-hero-left, .invelo-hero-proof {
  position: absolute;
  --position: absolute;
}
.invelo-hero-heading { z-index: 3; --z-index: 3; }
.invelo-hero-left    { z-index: 4; --z-index: 4; }
.invelo-hero-proof   { z-index: 5; --z-index: 5; }

/* --- centred heading --------------------------------------------------- */
.e-con.invelo-hero-heading,
.invelo-hero-heading {
  inset: 0 0 auto 0;
  --width: 100%;
  text-align: center;
}
/* Eyebrow — x648 y171, Poppins 18/1.5 uppercase */
.invelo-hero-stage .invelo-hero-eyebrow .elementor-heading-title {
  margin-top: calc((171 + var(--invelo-nudge-eyebrow)) * var(--invelo-s));
  font-family: var(--invelo-font-body);
  font-weight: 400;
  font-size: calc(18 * var(--invelo-s));
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
/* Headline — x362 y216, 1003 x 160, display 80/1.0 */
.invelo-hero-stage .invelo-hero-h1 .elementor-heading-title {
  margin-top: calc((216 - 171 - 27 + var(--invelo-nudge-headline)) * var(--invelo-s));
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(80 * var(--invelo-s));
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
.invelo-hero-h1__line { display: block; }
.invelo-hero-h1__line--gradient {
  color: #F4762A;
  background-image: var(--invelo-hero-gradient-headline);
  padding-bottom: 0.06em;      /* keeps the j/g descenders inside the clip box */
  margin-bottom: -0.06em;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .invelo-hero-h1__line--gradient {
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

/* --- left column: anchored to the bottom (CTA bottom = 1218 - 1052 = 166) --- */
.e-con.invelo-hero-left,
.invelo-hero-left {
  left: 0;
  bottom: calc(166 * var(--invelo-s));
  --width: calc(430 * var(--invelo-s));
  width: var(--width);
}
/* Left title — x144 y544, 295 x 123, display 40.5963/1.0 */
.invelo-hero-stage .invelo-hero-left-title .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(40.5963 * var(--invelo-s));
  height: calc(123 * var(--invelo-s));
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  transform: translate(calc(-3 * var(--invelo-s)), calc(var(--invelo-nudge-left-title) * var(--invelo-s)));
}
/* Strategy arrow — ink box x323.9 y578.9, 87.3 x 86.9, relative to the title */
.invelo-hero-stage .invelo-hero-arrow {
  position: absolute;
  left: calc((323.9 - 144) * var(--invelo-s));
  top: calc((578.9 - 544) * var(--invelo-s));
  width: calc(87.3 * var(--invelo-s));
  height: calc(86.9 * var(--invelo-s));
}
.invelo-hero-stage .invelo-hero-arrow img { width: 100%; height: 100%; max-width: none; }
/* Body — x144 y731, 410 x 180, Poppins 20/1.5 */
.invelo-hero-stage .invelo-hero-body {
  width: calc(410 * var(--invelo-s));
  margin-top: calc((731 - 544 - 123 + var(--invelo-nudge-body)) * var(--invelo-s));
  font-family: var(--invelo-font-body);
  font-size: calc(20 * var(--invelo-s));
  line-height: 1.5;
  color: var(--invelo-white, #fff);
}
.invelo-hero-stage .invelo-hero-body p { margin: 0; font: inherit; color: inherit; }
/* Main CTA — x144 y986, 336 x 66; label +17.58 / arrow circle +273 +4, 58 x 58 */
.invelo-hero-stage .invelo-hero-cta {
  margin-top: calc((986 - 731 - 180) * var(--invelo-s));
  line-height: 0;
}
.invelo-hero-stage .invelo-hero-cta .elementor-button-wrapper { display: block; text-align: left; }
.invelo-hero-stage .invelo-hero-cta .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(336 * var(--invelo-s));
  height: calc(66 * var(--invelo-s));
  min-height: 0;
  padding: 0 0 0 calc(17.58 * var(--invelo-s));
  border-radius: var(--invelo-radius-pill, 999px);
  background-image: var(--invelo-brand-gradient);
  color: var(--invelo-cta-ink, #111111);
  font-family: var(--invelo-font-body);
  font-size: calc(18 * var(--invelo-s));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s ease;
  box-shadow: none;
}
.invelo-hero-stage .invelo-hero-cta .elementor-button:hover { transform: translateY(calc(-2 * var(--invelo-s))); color: var(--invelo-cta-ink, #111111); box-shadow: none; }
.invelo-hero-stage .invelo-hero-cta .elementor-button-content-wrapper { display: block; }
.invelo-hero-stage .invelo-hero-cta .elementor-button-text {
  display: block;
  transform: translateY(calc(var(--invelo-nudge-cta-label) * var(--invelo-s)));
}
/* the white arrow circle, drawn by CSS so the Button widget stays native */
.invelo-hero-stage .invelo-hero-cta .elementor-button::after {
  content: "";
  position: absolute;
  left: calc(273 * var(--invelo-s));
  top: calc(4 * var(--invelo-s));
  width: calc(58 * var(--invelo-s));
  height: calc(58 * var(--invelo-s));
  border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'><path d='M0.5 11H28M18 1.6 28.6 11 18 20.4' fill='none' stroke='%23000' stroke-width='2'/></svg>") center / calc(30 * var(--invelo-s)) calc(22 * var(--invelo-s)) no-repeat;
  pointer-events: none;
}

/* --- right column / social proof ---------------------------------------- */
.e-con.invelo-hero-proof,
.invelo-hero-proof { inset: 0; --width: 100%; }

/* Active clients — right 0 (container edge), bottom 387, 312 x 52 */
.e-con.invelo-hero-clients,
.invelo-hero-clients {
  position: absolute;
  --position: absolute;
  right: 0;
  bottom: calc(387 * var(--invelo-s));
  --width: calc(312 * var(--invelo-s));
  width: var(--width);
  height: calc(52 * var(--invelo-s));
}
.invelo-hero-stage .invelo-hero-avatar {
  position: absolute;
  top: 0;
  z-index: 2;
  width: calc(52 * var(--invelo-s));
  height: calc(52 * var(--invelo-s));
  border-radius: 50%;
  overflow: hidden;
  border: max(1px, calc(2 * var(--invelo-s))) solid rgba(255, 255, 255, .85);
}
/* Figma stacks them left-over-right: client-03 at x76 (bottom), 02 at x38, 01 at x0 (top) */
.invelo-hero-stage .invelo-hero-avatar--3 { left: calc(76 * var(--invelo-s)); z-index: 2; }
.invelo-hero-stage .invelo-hero-avatar--2 { left: calc(38 * var(--invelo-s)); z-index: 3; }
.invelo-hero-stage .invelo-hero-avatar--1 { left: 0; z-index: 4; }
/* each Figma image fill has its own crop inside the 52px frame */
.invelo-hero-stage .invelo-hero-avatar img { position: absolute; max-width: none; object-fit: fill; }
.invelo-hero-stage .invelo-hero-avatar--1 img { left: calc(-20.49 * var(--invelo-s)); top: calc(-4.66 * var(--invelo-s));  width: calc(91.59 * var(--invelo-s));  height: calc(61.06 * var(--invelo-s)); }
.invelo-hero-stage .invelo-hero-avatar--2 img { left: calc(-35.36 * var(--invelo-s)); top: calc(-19.83 * var(--invelo-s)); width: calc(129.78 * var(--invelo-s)); height: calc(86.52 * var(--invelo-s)); }
.invelo-hero-stage .invelo-hero-avatar--3 img { left: calc(-57.07 * var(--invelo-s)); top: calc(-7.61 * var(--invelo-s));  width: calc(162.87 * var(--invelo-s)); height: calc(108.72 * var(--invelo-s)); }

/* pill — local x98 y5, 214 x 42 */
.e-con.invelo-hero-clients-pill,
.invelo-hero-clients-pill {
  --invelo-glass-angle: 150.9deg;
  position: absolute;
  --position: absolute;
  left: calc(98 * var(--invelo-s));
  top: calc(5 * var(--invelo-s));
  --width: calc(214 * var(--invelo-s));
  width: var(--width);
  height: calc(42 * var(--invelo-s));
  z-index: 1;
  --z-index: 1;
  border: 0;
  border-radius: var(--invelo-radius-pill, 999px);
  background: linear-gradient(150.9deg, var(--invelo-hero-glass-soft-a), var(--invelo-hero-glass-soft-b));
}
.invelo-hero-stage .invelo-hero-clients-label,
.invelo-hero-stage .invelo-hero-clients-metric { position: absolute; }
.invelo-hero-stage .invelo-hero-clients-label { left: calc(35 * var(--invelo-s)); top: calc((13 + var(--invelo-nudge-clients-label)) * var(--invelo-s)); }
.invelo-hero-stage .invelo-hero-clients-label .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-weight: 400;
  font-size: calc(15 * var(--invelo-s));
  line-height: 1;
  white-space: nowrap;
}
.invelo-hero-stage .invelo-hero-clients-metric { left: calc(142 * var(--invelo-s)); top: calc((9 + var(--invelo-nudge-metric-65)) * var(--invelo-s)); }
.invelo-hero-stage .invelo-hero-clients-metric .elementor-heading-title {
  font-family: var(--invelo-font-metric);
  font-weight: var(--invelo-weight-metric, 700);
  font-size: calc(29.7724 * var(--invelo-s));
  line-height: 1;
}

/* cards — shared type */
.invelo-hero-stage .invelo-hero-card-title .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(18 * var(--invelo-s));
  line-height: 1.14;
  letter-spacing: 0;
  text-align: left;
}
.invelo-hero-stage .invelo-hero-card-body .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-weight: 400;
  font-size: calc(15 * var(--invelo-s));
  line-height: 1.28;
  text-align: left;
}

/* Expertise — right 423-144, bottom 166, 199 x 215, NOTCHED (step x113 / y62, radii 20) */
.e-con.invelo-hero-expertise,
.invelo-hero-expertise {
  position: absolute;
  --position: absolute;
  right: calc((423 - 144) * var(--invelo-s));
  bottom: calc(166 * var(--invelo-s));
  --width: calc(199 * var(--invelo-s));
  width: var(--width);
  height: calc(215 * var(--invelo-s));
  --invelo-notch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 199 215' preserveAspectRatio='none'><path d='M20 0H93A20 20 0 0 1 113 20V42A20 20 0 0 0 133 62H179A20 20 0 0 1 199 82V195A20 20 0 0 1 179 215H20A20 20 0 0 1 0 195V20A20 20 0 0 1 20 0Z'/></svg>");
}
/* glass fill clipped to the silhouette */
.invelo-hero-expertise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(69.1deg, var(--invelo-hero-glass-soft-a), var(--invelo-hero-glass-soft-b));
  -webkit-backdrop-filter: blur(var(--invelo-glass-blur, 20px));
          backdrop-filter: blur(var(--invelo-glass-blur, 20px));
  -webkit-mask: var(--invelo-notch) 0 0 / 100% 100% no-repeat;
          mask: var(--invelo-notch) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
/* 1px gradient stroke along the same path (outer silhouette minus a 1px inset) */
.invelo-hero-expertise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(17deg, var(--invelo-hero-stroke-a), var(--invelo-hero-stroke-b));
  -webkit-mask: var(--invelo-notch) 0 0 / 100% 100% no-repeat,
                var(--invelo-notch) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat;
  -webkit-mask-composite: xor;
          mask: var(--invelo-notch) 0 0 / 100% 100% no-repeat,
                var(--invelo-notch) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat;
          mask-composite: exclude;
  pointer-events: none;
}
.invelo-hero-stage .invelo-hero-orb {
  position: absolute;
  z-index: 1;
  left: calc(7 * var(--invelo-s));
  top: calc(6 * var(--invelo-s));
  width: calc(78 * var(--invelo-s));
  height: calc(78 * var(--invelo-s));
  filter: drop-shadow(calc(6 * var(--invelo-s)) calc(9 * var(--invelo-s)) calc(11 * var(--invelo-s)) rgba(250, 166, 26, .42));
}
.invelo-hero-stage .invelo-hero-orb img { width: 100%; height: 100%; max-width: none; }
.invelo-hero-stage .invelo-hero-expertise .invelo-hero-card-title {
  position: absolute; z-index: 1;
  left: calc(22 * var(--invelo-s));
  top: calc((92 + var(--invelo-nudge-card-title)) * var(--invelo-s));
  width: calc(168 * var(--invelo-s));
}
.invelo-hero-stage .invelo-hero-expertise .invelo-hero-card-body {
  position: absolute; z-index: 1;
  left: calc(22 * var(--invelo-s));
  top: calc((138 + var(--invelo-nudge-card-body)) * var(--invelo-s));
  width: calc(147 * var(--invelo-s));
}

/* Specialists — right 143-144, bottom 166, 264 x 154, plain rounded glass */
.e-con.invelo-hero-specialists,
.invelo-hero-specialists {
  --invelo-glass-angle: 121.2deg;
  position: absolute;
  --position: absolute;
  right: calc((143 - 144) * var(--invelo-s));
  bottom: calc(166 * var(--invelo-s));
  --width: calc(264 * var(--invelo-s));
  width: var(--width);
  height: calc(154 * var(--invelo-s));
  border: 0;
  border-radius: calc(20 * var(--invelo-s));
  background: linear-gradient(121.2deg, var(--invelo-hero-glass-soft-a), var(--invelo-hero-glass-soft-b));
}
.invelo-hero-stage .invelo-hero-metric {
  position: absolute;
  left: calc(27 * var(--invelo-s));
  top: calc((19 + var(--invelo-nudge-metric-40)) * var(--invelo-s));
}
.invelo-hero-stage .invelo-hero-metric .elementor-heading-title {
  font-family: var(--invelo-font-metric);
  font-weight: var(--invelo-weight-metric, 700);
  font-size: calc(54.0866 * var(--invelo-s));
  line-height: 1;
  color: #F4762A;
  background-image: var(--invelo-brand-gradient);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .invelo-hero-stage .invelo-hero-metric .elementor-heading-title {
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}
.invelo-hero-stage .invelo-hero-specialists .invelo-hero-card-title {
  position: absolute;
  left: calc(27 * var(--invelo-s));
  top: calc((73 + var(--invelo-nudge-card-title)) * var(--invelo-s));
}
.invelo-hero-stage .invelo-hero-specialists .invelo-hero-card-body {
  position: absolute;
  left: calc(27 * var(--invelo-s));
  top: calc((98 + var(--invelo-nudge-card-body)) * var(--invelo-s));
  width: calc(212 * var(--invelo-s));
}


/* == 4. Compact layout (tablet portrait, phones, very short windows) ========
   Header + eyebrow + headline own the top, the astronaut is scaled up and
   bottom-anchored, CTA and clients pill sit on the fade; the long copy and
   the metric cards are not shown in the stage (Section 2 decision pending,
   as documented in the Sprint 02 handoff).
   ------------------------------------------------------------------------- */
@media not all and (min-width: 1024px) and (min-aspect-ratio: 11/10),
       (max-height: 560px) {
  :root {
    --invelo-s: clamp(0.72px, 100vw / 430, 1px);
    --invelo-hero-scroll: 250svh;              /* 180svh approved scrub / 0.72 */
    --invelo-glass-blur: 14px;
    --invelo-mobile-video-w: min(230vw, 1200px);
    --invelo-video-w: var(--invelo-mobile-video-w);
    --invelo-video-bottom: 0px;
  }
  .invelo-hero-camera::after { height: 46svh; }

  /* header: logo + round menu trigger; the CTA leaves (Elementor also hides it) */
  .e-con.invelo-header-inner,
  .invelo-header-inner {
    display: flex;
    --display: flex;
    flex-direction: row;
    --flex-direction: row;
    align-items: center;
    --align-items: center;
    justify-content: space-between;
    --justify-content: space-between;
    height: auto;
    --padding-top: clamp(16px, 4.4vw, 30px);
  }
  .invelo-header .invelo-header-logo {
    margin: 0;
    width: clamp(104px, 27vw, 143px);
    height: auto;
    aspect-ratio: 143 / 50;
  }
  .invelo-header .invelo-header-cta { display: none; }

  .e-con.e-con-full.invelo-header-nav,
  .e-con.invelo-header-nav,
  .invelo-header-nav {
    position: static;
    --margin-top: 0;
    --width: auto;
    width: var(--width);
    height: auto;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .invelo-header-nav::after { display: none; }
  .invelo-header-nav .elementor-nav-menu--main { display: none; }
  /* the container shrinks to the trigger so space-between parks it at the right edge */
  .invelo-header-nav .invelo-header-menu,
  .invelo-header-nav .invelo-header-menu > .elementor-widget-container { width: auto; height: auto; }
  .e-con.invelo-header-nav { flex: 0 0 auto; }
  .invelo-header .elementor-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 12vw, 52px);
    height: clamp(44px, 12vw, 52px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: var(--invelo-hdr-ink);
    font-size: 20px;
    background: linear-gradient(163.5deg, var(--invelo-hdr-glass-a), var(--invelo-hdr-glass-b));
    -webkit-backdrop-filter: blur(var(--invelo-glass-blur, 14px));
            backdrop-filter: blur(var(--invelo-glass-blur, 14px));
    box-shadow: inset 0 0 0 1px var(--invelo-hdr-stroke-b);
    cursor: pointer;
  }
  .invelo-header .elementor-menu-toggle i { color: var(--invelo-hdr-ink); }
  /* the dropdown: dark glass panel under the band, full container width.
     Pro toggles aria-hidden on it; closed = gone, not a collapsed pill. */
  .invelo-header .elementor-nav-menu--dropdown[aria-hidden="true"] { display: none; }
  .invelo-header .elementor-nav-menu--dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 12px;
    padding: 10px 6px;
    border-radius: 22px;
    background: linear-gradient(163.5deg, rgba(20, 20, 22, 0.94), rgba(20, 20, 22, 0.88));
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px var(--invelo-hdr-stroke-b);
    z-index: 5;
  }
  .invelo-header .elementor-nav-menu--dropdown .elementor-nav-menu { margin: 0; padding: 0; list-style: none; }
  .invelo-header .elementor-nav-menu--dropdown a,
  .invelo-header .elementor-nav-menu--dropdown a.elementor-item {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    font-family: var(--invelo-font-body);
    font-size: 16px;
    color: var(--invelo-hdr-ink);
    background: none;
    text-align: left;
  }
  .invelo-header .elementor-nav-menu--dropdown a:hover { background: rgba(255, 255, 255, 0.08); color: var(--invelo-hdr-ink); }

  /* heading */
  .e-con.invelo-hero-heading,
  .invelo-hero-heading {
    --padding-top: calc(clamp(16px, 4.4vw, 30px) + clamp(44px, 12vw, 52px) + clamp(26px, 7vw, 54px));
  }
  .invelo-hero-stage .invelo-hero-eyebrow .elementor-heading-title {
    margin-top: 0;
    font-size: clamp(10px, 2.9vw, 15px);
    letter-spacing: .06em;
    white-space: normal;
  }
  .invelo-hero-stage .invelo-hero-h1 .elementor-heading-title {
    margin-top: clamp(8px, 2.4vw, 16px);
    font-size: clamp(28px, 9.2vw, 54px);
    line-height: 1.04;
  }

  /* left column collapses to a bottom bar: CTA only */
  .e-con.invelo-hero-left,
  .invelo-hero-left {
    left: 0;
    right: 0;
    bottom: max(env(safe-area-inset-bottom, 0px), clamp(20px, 5vw, 34px));
    --width: auto;
  }
  .invelo-hero-stage .invelo-hero-left-title,
  .invelo-hero-stage .invelo-hero-arrow,
  .invelo-hero-stage .invelo-hero-body { display: none; }
  .invelo-hero-stage .invelo-hero-cta { margin-top: 0; }
  .invelo-hero-stage .invelo-hero-cta .elementor-button {
    width: min(100%, 336px);
    height: clamp(56px, 15vw, 66px);
    padding-left: clamp(18px, 5vw, 24px);
    font-size: clamp(15px, 4.1vw, 18px);
  }
  .invelo-hero-stage .invelo-hero-cta .elementor-button::after {
    left: auto;
    right: clamp(4px, 1.2vw, 5px);
    top: 50%;
    translate: 0 -50%;
    width: clamp(48px, 13vw, 58px);
    height: clamp(48px, 13vw, 58px);
    background-size: 20px 15px;
  }

  /* proof: only the clients pill, sitting above the CTA */
  .e-con.invelo-hero-proof,
  .invelo-hero-proof {
    inset: auto 0
           calc(max(env(safe-area-inset-bottom, 0px), clamp(20px, 5vw, 34px)) + clamp(56px, 15vw, 66px) + 16px)
           0;
    height: 48px;
  }
  .e-con.invelo-hero-clients,
  .invelo-hero-clients { position: relative; --position: relative; left: auto; right: auto; bottom: auto; --width: 292px; height: 48px; }
  .invelo-hero-stage .invelo-hero-avatar { width: 48px; height: 48px; }
  .invelo-hero-stage .invelo-hero-avatar--3 { left: 70px; }
  .invelo-hero-stage .invelo-hero-avatar--2 { left: 35px; }
  .invelo-hero-stage .invelo-hero-avatar--1 img { left: -18.9px; top: -4.3px; width: 84.5px; height: 56.4px; }
  .invelo-hero-stage .invelo-hero-avatar--2 img { left: -32.6px; top: -18.3px; width: 119.8px; height: 79.9px; }
  .invelo-hero-stage .invelo-hero-avatar--3 img { left: -52.7px; top: -7px; width: 150.3px; height: 100.4px; }
  .e-con.invelo-hero-clients-pill,
  .invelo-hero-clients-pill {
    left: 90px; top: 4px; --width: 202px; height: 40px;
    display: flex; --display: flex; flex-direction: row; --flex-direction: row; align-items: center; --align-items: center; --gap: 7px; --row-gap: 7px; --column-gap: 7px; gap: 7px; --padding-left: 32px;
  }
  .invelo-hero-stage .invelo-hero-clients-label,
  .invelo-hero-stage .invelo-hero-clients-metric { position: static; left: auto; top: auto; width: auto; }
  .invelo-hero-stage .invelo-hero-clients-label .elementor-heading-title { font-size: 14px; }
  .invelo-hero-stage .invelo-hero-clients-metric .elementor-heading-title { font-size: 27px; }

  .e-con.invelo-hero-expertise, .invelo-hero-expertise,
  .e-con.invelo-hero-specialists, .invelo-hero-specialists { display: none; }
}


/* == 5. Short-desktop layout ===============================================
   A maximised browser on a 1366x768 panel is ~1366x657: --invelo-s would be
   0.539 and the 14px nav 7.5px. Split the scales: --invelo-u is the UI
   scale, floored for legibility and capped so the top block and the bottom
   blocks cannot meet (815 x u + 24px <= 100svh); the video keeps its width
   and is dropped below the fold so the helmet crown always clears the type.
   The paragraph is not shown. Inactive at 1728x1218 and 1440x900.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) and (min-height: 561px) and (max-height: 820px),
       (min-width: 1024px) and (max-width: 1180px) and (min-aspect-ratio: 11/10) and (min-height: 561px) {
  :root {
    --invelo-u: min(max(0.78px, 100vw / 1728), (100svh - 24px) / 815, 0.95px);
    --invelo-su: max(var(--invelo-u), 0.8px);
    --invelo-glass-blur: 16px;
    --invelo-video-w: min(100vw, calc(1848 * 1.05 * var(--invelo-u)));
    --invelo-video-h: calc(var(--invelo-video-w) * 1039 / 1848);
    --invelo-video-drop: max(0px, calc(376 * var(--invelo-u) + 22px - 100svh + 0.8074 * var(--invelo-video-h)));
    --invelo-video-bottom: calc(-1 * var(--invelo-video-drop));
  }
  .invelo-hero-camera::after { height: calc(300 * var(--invelo-u)); }

  .invelo-hero-stage .invelo-hero-eyebrow .elementor-heading-title { margin-top: calc((171 + var(--invelo-nudge-eyebrow)) * var(--invelo-u)); font-size: calc(18 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-h1 .elementor-heading-title { margin-top: calc((216 - 171 - 27 + var(--invelo-nudge-headline)) * var(--invelo-u)); font-size: calc(80 * var(--invelo-u)); }

  .e-con.invelo-hero-left,
  .invelo-hero-left { bottom: calc(166 * var(--invelo-u)); --width: calc(430 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-left-title .elementor-heading-title { font-size: calc(40.5963 * var(--invelo-u)); height: calc(123 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-arrow { left: calc((323.9 - 144) * var(--invelo-u)); top: calc((578.9 - 544) * var(--invelo-u)); width: calc(87.3 * var(--invelo-u)); height: calc(86.9 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-body { display: none; }
  .invelo-hero-stage .invelo-hero-cta { margin-top: calc(40 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-cta .elementor-button { width: calc(336 * var(--invelo-u)); height: calc(66 * var(--invelo-u)); padding-left: calc(17.58 * var(--invelo-u)); font-size: calc(18 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-cta .elementor-button::after { left: calc(273 * var(--invelo-u)); top: calc(4 * var(--invelo-u)); width: calc(58 * var(--invelo-u)); height: calc(58 * var(--invelo-u)); background-size: calc(30 * var(--invelo-u)) calc(22 * var(--invelo-u)); }

  .e-con.invelo-hero-clients, .invelo-hero-clients { bottom: calc(387 * var(--invelo-u)); --width: calc(312 * var(--invelo-u)); height: calc(52 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-avatar { width: calc(52 * var(--invelo-u)); height: calc(52 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-avatar--3 { left: calc(76 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-avatar--2 { left: calc(38 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-avatar--1 img { left: calc(-20.49 * var(--invelo-u)); top: calc(-4.66 * var(--invelo-u));  width: calc(91.59 * var(--invelo-u));  height: calc(61.06 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-avatar--2 img { left: calc(-35.36 * var(--invelo-u)); top: calc(-19.83 * var(--invelo-u)); width: calc(129.78 * var(--invelo-u)); height: calc(86.52 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-avatar--3 img { left: calc(-57.07 * var(--invelo-u)); top: calc(-7.61 * var(--invelo-u));  width: calc(162.87 * var(--invelo-u)); height: calc(108.72 * var(--invelo-u)); }
  .e-con.invelo-hero-clients-pill, .invelo-hero-clients-pill { left: calc(98 * var(--invelo-u)); top: calc(5 * var(--invelo-u)); --width: calc(214 * var(--invelo-u)); height: calc(42 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-clients-label { left: calc(35 * var(--invelo-u)); top: calc((13 + var(--invelo-nudge-clients-label)) * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-clients-label .elementor-heading-title { font-size: calc(15 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-clients-metric { left: calc(142 * var(--invelo-u)); top: calc((9 + var(--invelo-nudge-metric-65)) * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-clients-metric .elementor-heading-title { font-size: calc(29.7724 * var(--invelo-u)); }

  .invelo-hero-stage .invelo-hero-card-title .elementor-heading-title { font-size: calc(18 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-card-body .elementor-heading-title { font-size: calc(15 * var(--invelo-u)); }
  .e-con.invelo-hero-expertise, .invelo-hero-expertise { right: calc((423 - 144) * var(--invelo-u)); bottom: calc(166 * var(--invelo-u)); --width: calc(199 * var(--invelo-u)); height: calc(215 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-orb { left: calc(7 * var(--invelo-u)); top: calc(6 * var(--invelo-u)); width: calc(78 * var(--invelo-u)); height: calc(78 * var(--invelo-u)); filter: drop-shadow(calc(6 * var(--invelo-u)) calc(9 * var(--invelo-u)) calc(11 * var(--invelo-u)) rgba(250, 166, 26, .42)); }
  .invelo-hero-stage .invelo-hero-expertise .invelo-hero-card-title { left: calc(22 * var(--invelo-u)); top: calc((92 + var(--invelo-nudge-card-title)) * var(--invelo-u)); width: calc(168 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-expertise .invelo-hero-card-body { left: calc(22 * var(--invelo-u)); top: calc((138 + var(--invelo-nudge-card-body)) * var(--invelo-u)); width: calc(147 * var(--invelo-u)); }
  .e-con.invelo-hero-specialists, .invelo-hero-specialists { right: calc((143 - 144) * var(--invelo-u)); bottom: calc(166 * var(--invelo-u)); --width: calc(264 * var(--invelo-u)); height: calc(154 * var(--invelo-u)); border-radius: calc(20 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-metric { left: calc(27 * var(--invelo-u)); top: calc((19 + var(--invelo-nudge-metric-40)) * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-metric .elementor-heading-title { font-size: calc(54.0866 * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-specialists .invelo-hero-card-title { left: calc(27 * var(--invelo-u)); top: calc((73 + var(--invelo-nudge-card-title)) * var(--invelo-u)); }
  .invelo-hero-stage .invelo-hero-specialists .invelo-hero-card-body { left: calc(27 * var(--invelo-u)); top: calc((98 + var(--invelo-nudge-card-body)) * var(--invelo-u)); width: calc(212 * var(--invelo-u)); }
}


/* == 6. Short landscape (phones on their side) ============================ */
@media (max-height: 460px) {
  :root {
    --invelo-hero-scroll: 195svh;              /* 140svh approved scrub / 0.72 */
    --invelo-mobile-video-w: min(140vw, calc((100svh - 108px) * 2.2029));
  }
  .invelo-hero-stage .invelo-hero-eyebrow { display: none; }
  .invelo-hero-stage .invelo-hero-h1 .elementor-heading-title { font-size: clamp(20px, 4.4vw, 30px); }
  .e-con.invelo-hero-heading,
  .invelo-hero-heading { --padding-top: clamp(10px, 3vw, 18px); }
  .e-con.invelo-hero-clients, .invelo-hero-clients { display: none; }
}


/* == 7. Elementor editor — SAFE MODE =======================================
   Inside the editor preview nothing pins, nothing scrubs: the shell is one
   screen tall, the stage is a normal block, the poster/first frame stands in
   for the video and every element is clickable. cinematic.js sets
   html.invelo-cine-editor when elementorFrontend.isEditMode() (or any of the
   other checks) is true; body.elementor-editor-active is Elementor's own flag
   and is covered as well so the layout is right even before the engine runs.
   ------------------------------------------------------------------------- */
html.invelo-cine-editor .invelo-hero-shell,
body.elementor-editor-active .invelo-hero-shell { height: auto; min-height: 100svh; }
html.invelo-cine-editor .invelo-hero-stage,
body.elementor-editor-active .invelo-hero-stage { position: relative; --position: relative; top: auto; }
html.invelo-cine-editor .invelo-hero-camera,
body.elementor-editor-active .invelo-hero-camera { transform: none; opacity: 1; }
html.invelo-cine-editor .invelo-hero-stage::after,
body.elementor-editor-active .invelo-hero-stage::after { display: none; }
html.invelo-cine-editor .invelo-hero-heading,
html.invelo-cine-editor .invelo-hero-left,
html.invelo-cine-editor .invelo-hero-proof { opacity: 1 !important; transform: none !important; }
/* the header is fixed on the front end; in the editor canvas it is a normal
   block so it can be selected and so the document's own content stays reachable */
body.elementor-editor-active .invelo-header { position: relative; pointer-events: auto; }
/* the two full-stage layers stay click-through so the video widget, heading,
   left column and cards underneath/inside them are all selectable; every
   group and widget inside them takes the click itself */
body.elementor-editor-active .invelo-hero-content,
body.elementor-editor-active .invelo-hero-proof { pointer-events: none; }
body.elementor-editor-active .invelo-hero-heading,
body.elementor-editor-active .invelo-hero-left,
body.elementor-editor-active .invelo-hero-clients,
body.elementor-editor-active .invelo-hero-expertise,
body.elementor-editor-active .invelo-hero-specialists,
body.elementor-editor-active .invelo-hero-content .elementor-widget { pointer-events: auto; }


/* == 8. Reduced motion / video failure / no JS ============================
   No pin, no scrub, no long scroll: the hero is one screen with the poster
   frame and all copy at natural size. The header carries its own dark band
   in these modes so it stays legible over whatever follows.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .invelo-hero-shell { height: auto; }
  .invelo-hero-stage { position: relative; --position: relative; top: auto; height: 100svh; min-height: calc(620 * var(--invelo-s)); }
  .invelo-hero-camera { transform: none; opacity: 1; }
  .invelo-hero-stage::after { display: none; }
  .invelo-hero-cta .elementor-button,
  .invelo-header a { transition: none; }
}
html[data-invelo-cine-motion="reduced"] .invelo-hero-shell,
html[data-invelo-cine-video="failed"] .invelo-hero-shell,
html:not([data-invelo-cine]) .invelo-hero-shell { height: 100svh; }
html[data-invelo-cine-motion="reduced"] .invelo-hero-stage,
html[data-invelo-cine-video="failed"] .invelo-hero-stage { position: relative; --position: relative; top: auto; }
html[data-invelo-cine-motion="reduced"] .invelo-hero-camera,
html[data-invelo-cine-video="failed"] .invelo-hero-camera { transform: none; opacity: 1; }
html[data-invelo-cine-motion="reduced"] .invelo-hero-stage::after,
html[data-invelo-cine-video="failed"] .invelo-hero-stage::after { display: none; }

/* decode failure: the poster takes over permanently, the bleed is dropped */
html[data-invelo-cine-video="failed"] .invelo-hero-camera::before { display: none; }
html[data-invelo-cine-video="failed"] .invelo-hero-video {
  background: #000 center / cover no-repeat;
  background-image: url("../video/hero-poster.jpg");
}

html[data-invelo-cine-video="failed"] .invelo-header,
html[data-invelo-cine-motion="reduced"] .invelo-header,
html:not([data-invelo-cine]) .invelo-header {
  background: rgba(8, 8, 10, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@supports (backdrop-filter: blur(8px)) {
  html[data-invelo-cine-video="failed"] .invelo-header,
  html[data-invelo-cine-motion="reduced"] .invelo-header,
  html:not([data-invelo-cine]) .invelo-header {
    background: rgba(8, 8, 10, 0.66);
    backdrop-filter: blur(14px);
  }
}
/* the editor canvas never gets the dark band */
body.elementor-editor-active .invelo-header { background: transparent; border-bottom: 0; backdrop-filter: none; }


/* == 9. Reduced transparency / forced colours / print ===================== */
@media (prefers-reduced-transparency: reduce) {
  .invelo-header-nav,
  .invelo-hero-clients-pill,
  .invelo-hero-specialists,
  .invelo-hero-expertise::before,
  .invelo-header .elementor-menu-toggle,
  .invelo-header .elementor-nav-menu--dropdown {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(28, 28, 30, 0.86);
  }
}
@media (forced-colors: active) {
  .invelo-header-nav,
  .invelo-hero-clients-pill,
  .invelo-hero-specialists,
  .invelo-hero-expertise::before {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .invelo-header-nav::after,
  .invelo-hero-clients-pill::after,
  .invelo-hero-specialists::after,
  .invelo-hero-expertise::after,
  .invelo-hero-camera::before,
  .invelo-hero-camera::after { display: none; }
  .invelo-hero-h1__line--gradient,
  .invelo-hero-stage .invelo-hero-metric .elementor-heading-title {
    background-image: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    color: CanvasText;
  }
  .invelo-hero-stage .invelo-hero-cta .elementor-button,
  .invelo-header .invelo-header-cta .elementor-button {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }
  .invelo-hero-stage .invelo-hero-cta .elementor-button::after { background-color: ButtonText; }
}
@media print {
  .invelo-header { position: static; background: #fff; }
  .invelo-hero-shell { height: auto; background: #fff; color: #000; }
  .invelo-hero-stage { position: static; height: auto; overflow: visible; }
  .invelo-hero-camera, .invelo-hero-stage::after { display: none; }
  .invelo-hero-content, .invelo-hero-heading, .invelo-hero-left, .invelo-hero-proof,
  .invelo-hero-clients, .invelo-hero-expertise, .invelo-hero-specialists { position: static; width: auto; height: auto; }
  .invelo-hero-stage .elementor-heading-title { color: #000; }
}