/* ============================================================================
   INVELO CINEMATIC ENGINE — section8.css              Sprint 08 Rev 02 · v0.9.0
   ----------------------------------------------------------------------------
   Section 8 — "Why clients choose Invelo": black, NORMAL-flow section; a
   full-bleed looping planet video anchored to the bottom; a manual, staggered
   four-slot glass testimonial carousel above the horizon.

   No pin, no scroll shell, no scrub. section8.js only (1) plays / pauses the
   loop with an IntersectionObserver and (2) moves the testimonial cards
   between the four anchor slots when an arrow is used.

   LAYERS:  global header > carousel (3) > heading (2) > planet (0/1) > black

   SLOTS (desktop, the 1440 container; design measured on the 1728 frame):
     A  far-left,  lower   x 0      y 185      C  inner-right, upper  x 748  y 0
     B  inner-left, upper  x 380    y 0        D  far-right,  lower   x 1122 y 185
   Card 318 × auto (≈ 203). The carousel stage is 388 tall (203 + 185).
   A card's slot is a class (.is-slot-a … .is-slot-d) → a transform; leaving /
   entering cards use .is-out-left / .is-out-right. Only transform + opacity
   animate (0.55 s).

   Elementor owns editorial margin / padding / gap: values below are Elementor
   variable defaults at class specificity.
   ========================================================================== */

:root {
  --invelo-s8: var(--invelo-su, 1px);
  --invelo-s8-ink: #FFFFFF;
  --invelo-s8-muted: rgba(255, 255, 255, 0.72);
  --invelo-s8-orange: #F46F20;
  --invelo-s8-card-w: calc(318 * var(--invelo-s8));
  --invelo-s8-card-radius: calc(16 * var(--invelo-s8));
  --invelo-s8-stagger: calc(185 * var(--invelo-s8));      /* outer slots sit this much lower than the inner ones */
  --invelo-s8-stage-h: calc(388 * var(--invelo-s8));      /* card ≈ 203 + stagger */
  --invelo-s8-transition: 550ms;
  --invelo-s8-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --invelo-s8-arrow: 48px;
  --invelo-s8-planet-w: 100vw;                            /* the planet spans the viewport, never the container */
  --invelo-s8-planet-tail: 300px;                         /* how far the planet must run on below Section 8 — Section 9 darkens it to black over exactly this height (section9.css reads it) */
  --invelo-s8-planet-h: max(90vw, calc(100% + var(--invelo-s8-planet-tail) - var(--invelo-s8-planet-top)));   /* the shared planet box (Sections 8 → 9): 1555 px at 1728 (337 px of it below the section); never shorter than the section + tail, so its bottom edge is always hidden under Section 9's fade */
  --invelo-s8-planet-top: 0px;
}

/* == 1. Section + planet layer ============================================= */
.e-con.invelo-section8,
.invelo-section8 {
  position: relative;
  --position: relative;
  min-height: 100svh;
  --min-height: 100svh;
  background: #000000;
  color: var(--invelo-s8-ink);
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  /* Rev 02 (Sprint 09): the planet is the SHARED BRIDGE into Section 9 — its box is taller than the section and
     overflows downward through Section 9's transparent top. Horizontal overflow stays clipped (100vw planet),
     vertical overflow must stay visible. */
  overflow-x: clip;
  overflow-y: visible;
  --overflow: visible;
  z-index: 0;
  --z-index: 0;
  isolation: isolate;
}
.invelo-section8 > .invelo-s8-planet,
.invelo-section8 > .elementor-widget.invelo-s8-planet {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  overflow: visible;
  width: 100%;
  max-width: none;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}
.invelo-s8-planet .elementor-widget-container { position: absolute; inset: 0; overflow: visible; }
/* THE ONE PLANET (Sections 8 + 9). The box is 100vw wide and --invelo-s8-planet-h tall, anchored at
   --invelo-s8-planet-top from the section's top, so it runs on below the section into Section 9 (whose top is
   transparent and darkens to black — section9.css). object-fit: cover scales the 16:9 frame to the box height
   (1.6× at 90vw), keeping the horizon at ≈ 52 % of the viewport behind the testimonials as approved and the
   sunrise on screen (crop 30 vw a side). Nothing is stretched. */
.invelo-section8 .invelo-s8-planet-video,
.elementor .invelo-s8-planet-video {
  position: absolute;
  left: 50%;
  top: var(--invelo-s8-planet-top);
  bottom: auto;
  transform: translateX(-50%);
  width: var(--invelo-s8-planet-w);
  min-width: 0;
  max-width: none;
  height: var(--invelo-s8-planet-h);
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: #000000;
  pointer-events: none;
}

/* == 2. Content layer ====================================================== */
.e-con.invelo-s8-content,
.invelo-s8-content {
  position: relative;
  --position: relative;
  z-index: 2;
  --z-index: 2;
  --padding-top: calc(var(--invelo-header-safe-top, 88px) + 30 * var(--invelo-s8));   /* below the occupied header band */
  --padding-bottom: calc(120 * var(--invelo-s8));
  --padding-left: 0px; --padding-right: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --align-items: center;
  --justify-content: flex-start;
  text-align: center;
}
.invelo-s8-content > .elementor-widget { --container-widget-width: 100%; width: 100%; max-width: 100%; }
.invelo-s8-content > .invelo-s8-heading { margin-top: calc(36 * var(--invelo-s8)); }     /* eyebrow → heading (design 36) */

/* == 3. Carousel stage + slots ============================================= */
.e-con.invelo-s8-carousel,
.invelo-s8-carousel {
  position: relative;
  --position: relative;
  width: 100%;
  --width: 100%;
  height: var(--invelo-s8-stage-h);
  --min-height: var(--invelo-s8-stage-h);
  --margin-top: calc(60 * var(--invelo-s8));      /* heading → carousel (design 60) — Elementor's Margin control replaces it */
  --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  z-index: 3;
  --z-index: 3;
  display: block;
  --display: block;
}
/* cards: absolute at their slot (frontend, JS armed). section8.js measures the stage once (and on resize) and writes
   the slot coordinates as custom properties on the carousel (--invelo-s8-slot-a-x/-y … -d, -out-left-x, -out-right-x,
   -peek-left-x, -peek-right-x); a card's slot is a class → transform only, transitions on transform + opacity */
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial {
  position: absolute;
  --position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(var(--invelo-s8-x, 0px), var(--invelo-s8-y, 0px), 0);
  opacity: 1;
  transition: transform var(--invelo-s8-transition) var(--invelo-s8-ease), opacity var(--invelo-s8-transition) var(--invelo-s8-ease);
  will-change: transform, opacity;
  z-index: 1;
}
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-slot-a { --invelo-s8-x: var(--invelo-s8-slot-a-x, 0px); --invelo-s8-y: var(--invelo-s8-slot-a-y, 0px); }
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-slot-b { --invelo-s8-x: var(--invelo-s8-slot-b-x, 0px); --invelo-s8-y: var(--invelo-s8-slot-b-y, 0px); }
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-slot-c { --invelo-s8-x: var(--invelo-s8-slot-c-x, 0px); --invelo-s8-y: var(--invelo-s8-slot-c-y, 0px); }
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-slot-d { --invelo-s8-x: var(--invelo-s8-slot-d-x, 0px); --invelo-s8-y: var(--invelo-s8-slot-d-y, 0px); }
/* off-stage: leaving to the left / arriving from the right (and the mirror); phones: the neighbours peek at the edges */
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-out-left  { --invelo-s8-x: var(--invelo-s8-out-left-x, -400px);  --invelo-s8-y: var(--invelo-s8-out-y, 0px); opacity: 0; pointer-events: none; z-index: 0; }
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-out-right { --invelo-s8-x: var(--invelo-s8-out-right-x, 2000px); --invelo-s8-y: var(--invelo-s8-out-y, 0px); opacity: 0; pointer-events: none; z-index: 0; }
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-peek-left  { --invelo-s8-x: var(--invelo-s8-peek-left-x, -400px);  --invelo-s8-y: var(--invelo-s8-slot-a-y, 0px); opacity: 0.45; pointer-events: none; z-index: 0; }
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-peek-right { --invelo-s8-x: var(--invelo-s8-peek-right-x, 2000px); --invelo-s8-y: var(--invelo-s8-slot-a-y, 0px); opacity: 0.45; pointer-events: none; z-index: 0; }
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.is-parked { opacity: 0; pointer-events: none; visibility: hidden; z-index: 0; }
.invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial.no-transition { transition: none; }

/* == 4. Glass card ========================================================= */
.e-con.invelo-s8-testimonial,
.invelo-s8-testimonial {
  width: var(--invelo-s8-card-w);
  --width: var(--invelo-s8-card-w);
  max-width: 100%;
  margin: 0;
  --padding-top: calc(26 * var(--invelo-s8)); --padding-bottom: calc(26 * var(--invelo-s8));
  --padding-left: calc(24 * var(--invelo-s8)); --padding-right: calc(24 * var(--invelo-s8));
  --gap: calc(10 * var(--invelo-s8)); --row-gap: calc(10 * var(--invelo-s8)); --column-gap: calc(10 * var(--invelo-s8));
  --flex-direction: column;
  --align-items: flex-start;
  text-align: left;
  box-sizing: border-box;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--invelo-s8-card-radius);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* a dark floor: the card stays readable where the sunrise or the planet's highlights pass behind it */
.invelo-s8-testimonial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(8, 8, 10, 0.42);
  z-index: -1;
  pointer-events: none;
  display: block;
  opacity: 1;
  transform: none;
}
.invelo-s8-testimonial > .elementor-widget { --container-widget-width: 100%; width: 100%; max-width: 100%; flex: 0 0 auto; }
@media (hover: hover) {
  .invelo-s8-testimonial:hover { border-color: rgba(255, 255, 255, 0.30); background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)); }
}
.invelo-s8-testimonial { transition: border-color 180ms ease, background 180ms ease; }
@media (prefers-reduced-transparency: reduce) {
  .invelo-s8-testimonial { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 14, 16, 0.92); }
  .invelo-s8-testimonial::before { display: none; }
}

/* == 5. Arrows (created by section8.js: real <button>s, inline SVG) =========
   The kit / theme style every <button> (orange pill, min-width, padding), so
   these rules are written at element+class specificity with the decisive
   properties marked !important: the arrows must always be the glass circles. */
.invelo-s8-carousel button.invelo-s8-prev,
.invelo-s8-carousel button.invelo-s8-next {
  all: unset;
  box-sizing: border-box !important;
  position: absolute !important;
  top: 50%;
  width: var(--invelo-s8-arrow) !important;
  height: var(--invelo-s8-arrow) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) !important;
  background-color: rgba(12, 12, 14, 0.55) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  color: #FFFFFF !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  cursor: pointer !important;
  z-index: 4;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: visible !important;
}
/* a dark floor behind the glass (readable over the sunrise) */
.invelo-s8-carousel button.invelo-s8-prev::before,
.invelo-s8-carousel button.invelo-s8-next::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(8, 8, 10, 0.55);
  z-index: -1;
  pointer-events: none;
}
.invelo-s8-carousel button.invelo-s8-prev { left: calc(-1 * var(--invelo-s8-arrow) - 40 * var(--invelo-s8)); right: auto; }
.invelo-s8-carousel button.invelo-s8-next { right: calc(-1 * var(--invelo-s8-arrow) - 40 * var(--invelo-s8)); left: auto; }
.invelo-s8-carousel button.invelo-s8-prev svg,
.invelo-s8-carousel button.invelo-s8-next svg {
  display: block !important;
  width: calc(var(--invelo-s8-arrow) * 0.42) !important;
  height: calc(var(--invelo-s8-arrow) * 0.42) !important;
  fill: none !important;
  stroke: #FFFFFF !important;
  stroke-width: 2 !important;
  transition: transform 180ms ease;
}
.invelo-s8-carousel button.invelo-s8-prev svg path, .invelo-s8-carousel button.invelo-s8-next svg path { fill: none !important; stroke: #FFFFFF !important; }
@media (hover: hover) {
  .invelo-s8-carousel button.invelo-s8-prev:hover, .invelo-s8-carousel button.invelo-s8-next:hover { background-color: rgba(28, 28, 32, 0.72) !important; border-color: rgba(244, 111, 32, 0.7) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(244, 111, 32, 0.18) !important; }
  .invelo-s8-carousel button.invelo-s8-prev:hover svg { transform: translateX(-2px); }
  .invelo-s8-carousel button.invelo-s8-next:hover svg { transform: translateX(2px); }
}
.invelo-s8-carousel button.invelo-s8-prev:focus-visible, .invelo-s8-carousel button.invelo-s8-next:focus-visible { outline: 2px solid var(--invelo-s8-orange) !important; outline-offset: 3px !important; }
.invelo-s8-carousel button.invelo-s8-prev[disabled], .invelo-s8-carousel button.invelo-s8-next[disabled] { opacity: 0.4 !important; cursor: default !important; }
/* the gutter outside the 1440 field is 144 px at 1728: the 48 px circle sits in it; on narrower desktops it moves to the field's edge */
@media (max-width: 1600px) {
  .invelo-s8-carousel button.invelo-s8-prev { left: calc(-1 * var(--invelo-s8-arrow) / 2); }
  .invelo-s8-carousel button.invelo-s8-next { right: calc(-1 * var(--invelo-s8-arrow) / 2); }
}

/* == 6. Typography ========================================================= */
.invelo-s8-content .invelo-s8-eyebrow .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(14 * var(--invelo-s8));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--invelo-s8-ink);
  margin: 0;
}
.invelo-s8-content .invelo-s8-heading .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(54 * var(--invelo-s8));
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--invelo-s8-ink);
  text-align: center;
  margin: 0;
}
.invelo-s8-brand {
  color: var(--invelo-s8-orange);
  background-image: var(--invelo-hero-gradient-headline, linear-gradient(90deg, #F04E23 0%, #F46F20 45%, #FAA61A 100%));
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .invelo-s8-brand { -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.invelo-s8-testimonial .invelo-s8-stars .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(13 * var(--invelo-s8));
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--invelo-s8-orange);
  margin: 0;
}
.invelo-s8-testimonial .invelo-s8-quote,
.invelo-s8-testimonial .invelo-s8-quote p {
  font-family: var(--invelo-font-body);
  font-size: calc(14 * var(--invelo-s8));
  line-height: 1.5;
  color: var(--invelo-s8-ink);
  margin: 0;
}
.invelo-s8-testimonial .invelo-s8-quote { margin-top: calc(4 * var(--invelo-s8)); }
.invelo-s8-testimonial .invelo-s8-name .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(13 * var(--invelo-s8));
  font-weight: 700;
  line-height: 1.3;
  color: var(--invelo-s8-ink);
  margin: 0;
}
.invelo-s8-testimonial .invelo-s8-name { margin-top: calc(10 * var(--invelo-s8)); }
.invelo-s8-testimonial .invelo-s8-company .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(12 * var(--invelo-s8));
  font-weight: 400;
  line-height: 1.3;
  color: var(--invelo-s8-muted);
  margin: 0;
}
.invelo-s8-testimonial .invelo-s8-company { margin-top: calc(-6 * var(--invelo-s8)); }

/* == 7. Tablet / phone ===================================================== */
/* tablet: three slots — the inner pair (B, C) plus A on the left; the geometry still steps */
@media (max-width: 1024px) {
  :root { --invelo-s8-card-w: 30%; --invelo-s8-stagger: 120px; --invelo-s8-stage-h: 340px; --invelo-s8-planet-tail: 220px; --invelo-s8-planet-h: max(110vw, calc(100% + var(--invelo-s8-planet-tail) - var(--invelo-s8-planet-top))); --invelo-s8-planet-top: -4vw; }
  .invelo-s8-content .invelo-s8-heading .elementor-heading-title { font-size: clamp(32px, 5.2vw, 48px); }
  .invelo-s8-carousel button.invelo-s8-prev { left: -8px; } .invelo-s8-carousel button.invelo-s8-next { right: -8px; }
  .invelo-s8-carousel button.invelo-s8-prev, .invelo-s8-carousel button.invelo-s8-next { top: auto; bottom: -64px; transform: none; }
  .invelo-s8-content { --padding-bottom: 160px; }
}
/* phone: one centred card, the previous / next card peeking at the edges; arrows beneath */
@media (max-width: 767px) {
  :root { --invelo-s8-card-w: 78%; --invelo-s8-stagger: 0px; --invelo-s8-stage-h: 250px; --invelo-s8-arrow: 44px; --invelo-s8-planet-w: 190vw; --invelo-s8-planet-tail: 160px; --invelo-s8-planet-h: max(190vw, calc(100% + var(--invelo-s8-planet-tail) - var(--invelo-s8-planet-top))); --invelo-s8-planet-top: 75vw; }
  .invelo-s8-content .invelo-s8-heading .elementor-heading-title { font-size: clamp(28px, 8vw, 36px); }
  .invelo-s8-content { --padding-bottom: 150px; }
  .invelo-s8-carousel button.invelo-s8-prev, .invelo-s8-carousel button.invelo-s8-next { top: auto; bottom: -64px; transform: none; }
  .invelo-s8-carousel button.invelo-s8-prev { left: calc(50% - var(--invelo-s8-arrow) - 10px); }
  .invelo-s8-carousel button.invelo-s8-next { right: calc(50% - var(--invelo-s8-arrow) - 10px); }
  .invelo-s8-testimonial .invelo-s8-quote, .invelo-s8-testimonial .invelo-s8-quote p { font-size: 13px; }
}

/* == 8. Editor · reduced motion · no JS: every testimonial visible, plain flow ====== */
.invelo-s8-carousel:not([data-s8="armed"]) {
  height: auto;
  --min-height: 0px;
  display: grid;
  --display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}
.invelo-s8-carousel:not([data-s8="armed"]) .invelo-s8-testimonial { position: relative; width: 100%; --width: 100%; }
.invelo-s8-carousel:not([data-s8="armed"]) button.invelo-s8-prev,
.invelo-s8-carousel:not([data-s8="armed"]) button.invelo-s8-next { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .invelo-s8-carousel[data-s8="armed"] .invelo-s8-testimonial { transition: none; }
  .invelo-s8-carousel button.invelo-s8-prev svg, .invelo-s8-carousel button.invelo-s8-next svg { transition: none; }
}
@media print {
  .invelo-s8-planet { display: none; }
}