/* ============================================================================
   INVELO CINEMATIC ENGINE — section5.css              Sprint 05 Rev 02 · v0.5.2
   ----------------------------------------------------------------------------
   Section 5 "Portfolio Engine": a normal-flow section — the white → orange →
   black transition band scrolls with the page, then the orbit stage enters in
   flow, the two rings of project tiles grow from entryScale to 1 exactly as
   their shared centre reaches the viewport centre, the stage holds there
   (sticky) while the rings rotate in opposite directions, then the section
   releases normally. No Section 3 card stack, no overlay.

   THIS SHEET OWNS (mechanics + look)
     transition band, black environment, orbit shell height (hold distance),
     the sticky/pinned stage, the ring scale layer, ring rotation layers,
     circular tile placement, tile sizes, z-order, centre-content type/colour.
   IT DOES NOT OWN editorial margin / padding / gap — Elementor's own
     variables at class specificity are the only defaults.

   TRANSFORM SEPARATION (never on one element)
     .invelo-section5-rings          scale(var(--invelo-s5-scale))
     .invelo-section5-ring--outer    rotate(var(--invelo-s5-outer-rotation))
     .invelo-section5-ring--inner    rotate(var(--invelo-s5-inner-rotation))
     .invelo-section5-ring-item      static placement on the circle + tilt

   LIVE VALUES written by section5.js (pure functions of scroll)
     --invelo-s5-scale             entryScale … 1, clamped at 1 for the hold
     --invelo-s5-inner-rotation    0 … +innerRotationDegrees  (clockwise)
     --invelo-s5-outer-rotation    0 … −outerRotationDegrees  (counter-clockwise)
     --invelo-s5-outer-radius / --invelo-s5-inner-radius   px, measured (viewport fit)
     --invelo-s5-a  (per item)     its angle on the circle
   ========================================================================== */

:root {
  --invelo-s5: var(--invelo-su, 1px);
  --invelo-s5-transition-h: 70svh;           /* the atmospheric band; structural, scrolls with the page */
  --invelo-s5-hold-scroll: 180svh;           /* centre-hold distance (holdScrollVh) — structural animation distance, not editorial padding */
  --invelo-s5-entry-scale: 0.58;             /* entryScale (section5.js reads it) */
  --invelo-s5-inner-ratio: 0.60;             /* inner radius / outer radius (reference: 175 / 290) */
  --invelo-s5-editor-scale: 1;               /* static representation (editor, reduced motion, no JS) = the hold state: measured fit, scale 1 */
  --invelo-s5-edge-safety: 24px;             /* margin kept from the viewport edges when the viewport is narrower than the fit width */
  --invelo-s5-fit-width: var(--invelo-container-max, 1440px);   /* the ring spans this width (outer tile edge to outer tile edge); height may overflow the viewport */
  --invelo-s5-scale: var(--invelo-s5-editor-scale);
  --invelo-s5-inner-rotation: 0deg;
  --invelo-s5-outer-rotation: 0deg;
  /* fallback until section5.js measures: the same width-fit solution in CSS terms
     (R = min(vw − 2·safety, fit width) / (2 + kW) with the largest rotated tile ≈ 0.33 R) */
  --invelo-s5-outer-radius: max(80px, min(calc(43vw - 20px), calc(var(--invelo-s5-fit-width) / 2.33)));
  --invelo-s5-inner-radius: calc(var(--invelo-s5-outer-radius) * var(--invelo-s5-inner-ratio));
  --invelo-s5-tile-radius: calc(6 * var(--invelo-s5));
}


/* == 1. Section + transition band ========================================== */
.e-con.invelo-section5,
.invelo-section5 {
  position: relative;
  --position: relative;
  background: #000000;
  color: #FFFFFF;
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px;
  z-index: 0;
  --z-index: 0;
  overflow: clip;                                 /* the ring is width-fitted and may be taller than the viewport: the section clips it (not the stage, so no cut line while the stage is mid-viewport); clip ≠ hidden, so the sticky stage still sticks to the viewport */
  --overflow: clip;
}
/* the ring can be taller than the viewport, so when the section releases its bottom edge
   would cut the lowest tiles: a short fade to black at the section's bottom edge instead.
   (0,2,1) with every property explicit — Elementor's own `.e-con:before/:after` rules
   must not float it. */
.e-con.invelo-section5::after,
.invelo-section5::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: min(22svh, 260px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 70%, #000000 100%);
  pointer-events: none;
  z-index: 3;
  display: block;
  width: auto;
  opacity: 1;
  transform: none;
}
html.invelo-cine-editor .invelo-section5::after, body.elementor-editor-active .invelo-section5::after { display: none; }
/* white → orange → dark orange/brown → black. One soft atmospheric blend
   (vertical ramp + two radial glows), full width, in normal flow. */
.e-con.invelo-section5-transition,
.invelo-section5-transition {
  position: relative;
  --position: relative;
  width: 100%;
  --width: 100%;
  height: var(--invelo-s5-transition-h);
  --min-height: 0px;
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  background-color: #000000;
  background-image:
    radial-gradient(90% 50% at 50% 34%, rgba(255, 150, 60, 0.45) 0%, rgba(255, 120, 40, 0.15) 45%, rgba(255, 120, 40, 0) 72%),
    radial-gradient(60% 40% at 50% 62%, rgba(140, 40, 15, 0.55) 0%, rgba(140, 40, 15, 0) 70%),
    linear-gradient(to bottom,
      #FFFFFF 0%, #FFF6EE 9%, #FFD3B2 20%, #FF9A5C 31%, #F55A28 42%, #C7391A 53%,
      #6E1F0E 66%, #2B0E06 80%, #0B0402 91%, #000000 100%);
  pointer-events: none;
}


/* == 2. Orbit shell + stage (mechanism) ==================================== */
.e-con.invelo-section5-orbit-shell,
.invelo-section5-orbit-shell {
  position: relative;
  --position: relative;
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px;
  background: #000000;
}
.e-con.invelo-section5-stage,
.invelo-section5-stage {
  position: relative;
  --position: relative;
  min-height: 100svh;
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px;
  --justify-content: center;
  --align-items: center;
  overflow: visible;                              /* tiles above / below the 100svh stage stay visible inside the section (see the section clip) */
  --overflow: visible;
  background: #000000;
  isolation: isolate;
}
/* driven (desktop / tablet / phone alike): the shell is the scroll space, the stage holds at the top */
.invelo-section5-orbit-shell[data-s5="armed"] { height: calc(100svh + var(--invelo-s5-hold-scroll)); }
.invelo-section5-orbit-shell[data-s5="armed"] .invelo-section5-stage {
  position: sticky;
  --position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
.invelo-section5-orbit-shell[data-s5="armed"][data-invelo-anchor="pin"] .invelo-section5-stage {
  position: relative;
  --position: relative;
  top: auto;
}


/* == 3. Rings: scale layer → rotation layers → tiles on the circle ========== */
.e-con.invelo-section5-rings,
.invelo-section5-rings {
  position: absolute;
  --position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  --width: 0px;
  height: 0;
  min-height: 0;
  --min-height: 0px;
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  display: block;
  --display: block;
  z-index: 1;
  --z-index: 1;
  transform: scale(var(--invelo-s5-scale));
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
}
.e-con.invelo-section5-ring,
.invelo-section5-ring {
  position: absolute;
  --position: absolute;
  left: 0;
  top: 0;
  width: 0;
  --width: 0px;
  height: 0;
  min-height: 0;
  --min-height: 0px;
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  display: block;
  --display: block;
  transform-origin: 0 0;
  will-change: transform;
}
.invelo-section5-ring--outer { --invelo-s5-radius: var(--invelo-s5-outer-radius); transform: rotate(var(--invelo-s5-outer-rotation)); }
.invelo-section5-ring--inner { --invelo-s5-radius: var(--invelo-s5-inner-radius); transform: rotate(var(--invelo-s5-inner-rotation)); }

/* a tile: placed at its angle on the ring's circle, kept upright, then its own static tilt */
.invelo-section5-ring .invelo-section5-ring-item {
  --invelo-s5-a: 0deg;
  --invelo-s5-tilt: 0deg;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: auto;
  max-width: none;
  line-height: 0;
  transform: translate(-50%, -50%) rotate(var(--invelo-s5-a)) translate(var(--invelo-s5-radius)) rotate(calc(-1 * var(--invelo-s5-a))) rotate(var(--invelo-s5-tilt));
  transform-origin: 50% 50%;
  pointer-events: none;
  backface-visibility: hidden;
}
.invelo-section5-ring .invelo-section5-ring-item img {
  display: block;
  width: var(--invelo-s5-tile-w);
  height: var(--invelo-s5-tile-h);
  max-width: none;
  object-fit: cover;
  border-radius: var(--invelo-s5-tile-radius);
  background: #111;
}
/* No-JS / pre-JS distribution: the same angular spacing section5.js computes
   (start −90° outer / −75° inner, i·360/n) and the radial tilt (a + 90°), so the
   composition is already the wheel before the script runs and stays one without
   it. JS overrides these inline (and re-spaces when tiles are added / removed). */
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(1) { --invelo-s5-a: -90.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(1) { --invelo-s5-tilt: 0.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(2) { --invelo-s5-a: -70.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(2) { --invelo-s5-tilt: 20.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(3) { --invelo-s5-a: -50.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(3) { --invelo-s5-tilt: 40.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(4) { --invelo-s5-a: -30.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(4) { --invelo-s5-tilt: 60.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(5) { --invelo-s5-a: -10.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(5) { --invelo-s5-tilt: 80.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(6) { --invelo-s5-a: 10.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(6) { --invelo-s5-tilt: 100.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(7) { --invelo-s5-a: 30.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(7) { --invelo-s5-tilt: 120.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(8) { --invelo-s5-a: 50.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(8) { --invelo-s5-tilt: 140.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(9) { --invelo-s5-a: 70.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(9) { --invelo-s5-tilt: 160.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(10) { --invelo-s5-a: 90.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(10) { --invelo-s5-tilt: 180.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(11) { --invelo-s5-a: 110.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(11) { --invelo-s5-tilt: 200.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(12) { --invelo-s5-a: 130.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(12) { --invelo-s5-tilt: 220.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(13) { --invelo-s5-a: 150.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(13) { --invelo-s5-tilt: 240.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(14) { --invelo-s5-a: 170.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(14) { --invelo-s5-tilt: 260.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(15) { --invelo-s5-a: 190.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(15) { --invelo-s5-tilt: 280.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(16) { --invelo-s5-a: 210.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(16) { --invelo-s5-tilt: 300.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(17) { --invelo-s5-a: 230.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(17) { --invelo-s5-tilt: 320.000deg; }
.invelo-section5-ring--outer .invelo-section5-ring-item:nth-child(18) { --invelo-s5-a: 250.000deg; }
.invelo-section5-ring--outer[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(18) { --invelo-s5-tilt: 340.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(1) { --invelo-s5-a: -75.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(1) { --invelo-s5-tilt: 15.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(2) { --invelo-s5-a: -45.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(2) { --invelo-s5-tilt: 45.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(3) { --invelo-s5-a: -15.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(3) { --invelo-s5-tilt: 75.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(4) { --invelo-s5-a: 15.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(4) { --invelo-s5-tilt: 105.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(5) { --invelo-s5-a: 45.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(5) { --invelo-s5-tilt: 135.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(6) { --invelo-s5-a: 75.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(6) { --invelo-s5-tilt: 165.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(7) { --invelo-s5-a: 105.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(7) { --invelo-s5-tilt: 195.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(8) { --invelo-s5-a: 135.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(8) { --invelo-s5-tilt: 225.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(9) { --invelo-s5-a: 165.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(9) { --invelo-s5-tilt: 255.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(10) { --invelo-s5-a: 195.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(10) { --invelo-s5-tilt: 285.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(11) { --invelo-s5-a: 225.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(11) { --invelo-s5-tilt: 315.000deg; }
.invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(12) { --invelo-s5-a: 255.000deg; }
.invelo-section5-ring--inner[data-invelo-orient="radial"] .invelo-section5-ring-item:nth-child(12) { --invelo-s5-tilt: 345.000deg; }
/* Figma set (For Developers 9 / 10): one portrait tile per ring — outer 260 × 326, inner 189 × 237 at R ≈ 1400 */
.invelo-section5-ring--outer .invelo-section5-ring-item { --invelo-s5-tile-w: calc(var(--invelo-s5-outer-radius) * 0.186); --invelo-s5-tile-h: calc(var(--invelo-s5-outer-radius) * 0.233); }
.invelo-section5-ring--inner .invelo-section5-ring-item { --invelo-s5-tile-w: calc(var(--invelo-s5-outer-radius) * 0.135); --invelo-s5-tile-h: calc(var(--invelo-s5-outer-radius) * 0.169); }
/* legacy orientation classes (a landscape / square replacement keeps its shape) */
.invelo-section5-ring--outer .invelo-section5-ring-item--landscape { --invelo-s5-tile-w: calc(var(--invelo-s5-outer-radius) * 0.233); --invelo-s5-tile-h: calc(var(--invelo-s5-outer-radius) * 0.186); }
.invelo-section5-ring--outer .invelo-section5-ring-item--square    { --invelo-s5-tile-w: calc(var(--invelo-s5-outer-radius) * 0.21); --invelo-s5-tile-h: calc(var(--invelo-s5-outer-radius) * 0.21); }
.invelo-section5-ring--inner .invelo-section5-ring-item--landscape { --invelo-s5-tile-w: calc(var(--invelo-s5-outer-radius) * 0.169); --invelo-s5-tile-h: calc(var(--invelo-s5-outer-radius) * 0.135); }
.invelo-section5-ring--inner .invelo-section5-ring-item--square    { --invelo-s5-tile-w: calc(var(--invelo-s5-outer-radius) * 0.15); --invelo-s5-tile-h: calc(var(--invelo-s5-outer-radius) * 0.15); }
/* the reference keeps the work quiet: no borders, no glow, a faint depth falloff on the inner ring only */
.invelo-section5-ring--inner .invelo-section5-ring-item img { filter: brightness(0.92); }


/* == 4. Centre content ====================================================== */
.e-con.invelo-section5-content,
.invelo-section5-content {
  position: relative;
  --position: relative;
  z-index: 2;
  --z-index: 2;
  --align-items: center;
  --gap: calc(14 * var(--invelo-s5));                 /* Elementor Gap default; the editor's Gap replaces it */
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  text-align: center;
  opacity: var(--invelo-s5-content-opacity, 1);
  /* a very soft radial vignette behind the words only — no card, no rectangle */
  background: radial-gradient(48% 62% at 50% 50%, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
}
.invelo-section5-content > .elementor-widget { width: auto; max-width: 100%; }
.invelo-section5 .invelo-section5-eyebrow .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(12 * var(--invelo-s5));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
}
.invelo-section5 .invelo-section5-heading .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(46 * var(--invelo-s5));
  line-height: 1.06;
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 0;
}
.invelo-section5-brand {
  color: #F4762A;
  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-section5-brand { -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.invelo-section5 .invelo-section5-copy,
.invelo-section5 .invelo-section5-copy p {
  font-family: var(--invelo-font-body);
  font-size: calc(15 * var(--invelo-s5));
  line-height: 1.5;
  color: #FFFFFF;
  margin: 0;
  max-width: 46ch;
}
/* proof row: three labels on one hairline (no cards) */
.e-con.invelo-section5-stats,
.invelo-section5-stats {
  --display: flex;
  --flex-direction: row;
  --justify-content: space-between;
  --align-items: center;
  --gap: calc(24 * var(--invelo-s5));
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: calc(14 * var(--invelo-s5)); --padding-left: 0px;
  width: min(100%, calc(1000 * var(--invelo-s5)));
  --width: min(100%, calc(1000 * var(--invelo-s5)));
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.invelo-section5-stats .elementor-widget { width: auto; }
.invelo-section5 .invelo-section5-stat .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(11 * var(--invelo-s5));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  white-space: nowrap;
}
.invelo-section5 .invelo-section5-mark { line-height: 0; }
.invelo-section5 .invelo-section5-mark img { display: block; width: calc(44 * var(--invelo-s5)); height: auto; }
.invelo-section5 .invelo-section5-footer-line .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(12 * var(--invelo-s5));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
}


/* == 5. Tablet / phone ======================================================
   The concept survives: two rings, opposing rotation, entry scale → measured
   viewport-safe maximum at the centre, clamp, hold, reverse. Smaller tiles,
   shorter hold, smaller rotation; readability of the centre first. */
@media (max-width: 1024px) {
  :root { --invelo-s5-hold-scroll: 150svh; --invelo-s5-transition-h: 56svh; --invelo-s5-edge-safety: 16px; }
  .invelo-section5 .invelo-section5-heading .elementor-heading-title { font-size: clamp(30px, 5.6vw, 48px); }
}
@media (max-width: 767px) {
  :root { --invelo-s5-hold-scroll: 120svh; --invelo-s5-transition-h: 46svh; --invelo-s5-inner-ratio: 0.58; }
  /* phones: the outer ring is width-limited; tiles a touch larger relative to it so they stay legible */
  .invelo-section5-ring--outer .invelo-section5-ring-item { --invelo-s5-tile-w: calc(var(--invelo-s5-outer-radius) * 0.234); --invelo-s5-tile-h: calc(var(--invelo-s5-outer-radius) * 0.293); }
  .invelo-section5-ring--inner .invelo-section5-ring-item { --invelo-s5-tile-w: calc(var(--invelo-s5-outer-radius) * 0.170); --invelo-s5-tile-h: calc(var(--invelo-s5-outer-radius) * 0.213); }
  /* density: every other inner tile steps back on phones (section5.js honours the class when distributing) */
  .invelo-section5-ring--inner .invelo-section5-ring-item:nth-child(even) { display: none; }
  .invelo-section5 .invelo-section5-heading .elementor-heading-title { font-size: clamp(24px, 7vw, 32px); }
  .invelo-section5 .invelo-section5-copy p { font-size: 14px; max-width: 30ch; }
  .invelo-section5-content { --gap: 10px; }
  /* phones are width-limited: the rings become a backdrop to the centre, so they step back and the vignette firms up */
  .invelo-section5-ring-item { opacity: 0.55; }
  .invelo-section5-content { background: radial-gradient(52% 60% at 50% 50%, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0) 100%); }
  /* stats stack on phones via the container's own responsive Direction control (flex_direction_mobile: column in the template) */
  .e-con.invelo-section5-stats, .invelo-section5-stats { --gap: 8px; border-bottom: 0; }
  .invelo-section5 .invelo-section5-stat .elementor-heading-title { font-size: 11px; }
}


/* == 6. Editor · reduced motion · no JS: one static, readable composition === */
html.invelo-cine-editor .invelo-section5-orbit-shell,
body.elementor-editor-active .invelo-section5-orbit-shell,
html[data-invelo-cine-motion="reduced"] .invelo-section5-orbit-shell,
html:not([data-invelo-cine]) .invelo-section5-orbit-shell { height: auto; }
html.invelo-cine-editor .invelo-section5-stage,
body.elementor-editor-active .invelo-section5-stage,
html[data-invelo-cine-motion="reduced"] .invelo-section5-stage,
html:not([data-invelo-cine]) .invelo-section5-stage { position: relative; --position: relative; height: auto; min-height: 100svh; }
html.invelo-cine-editor .invelo-section5-rings,
body.elementor-editor-active .invelo-section5-rings,
html[data-invelo-cine-motion="reduced"] .invelo-section5-rings,
html:not([data-invelo-cine]) .invelo-section5-rings { transform: scale(var(--invelo-s5-editor-scale)); }
html.invelo-cine-editor .invelo-section5-ring,
body.elementor-editor-active .invelo-section5-ring,
html[data-invelo-cine-motion="reduced"] .invelo-section5-ring,
html:not([data-invelo-cine]) .invelo-section5-ring { transform: none; }
html.invelo-cine-editor .invelo-section5-content,
body.elementor-editor-active .invelo-section5-content { opacity: 1; }
/* the editor must be able to select every tile */
body.elementor-editor-active .invelo-section5-rings,
body.elementor-editor-active .invelo-section5-ring .invelo-section5-ring-item { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .invelo-section5-orbit-shell { height: auto !important; }
  .invelo-section5-stage { position: relative !important; height: auto !important; min-height: 100svh; }
  .invelo-section5-rings { transform: scale(var(--invelo-s5-editor-scale)) !important; }
  .invelo-section5-ring { transform: none !important; }
  .invelo-section5-content { opacity: 1 !important; }
}

/* == 7. Print ============================================================== */
@media print {
  .invelo-section5-transition { display: none; }
  .invelo-section5-orbit-shell { height: auto; }
  .invelo-section5-stage { position: static; }
  .invelo-section5-rings { display: none; }
  .invelo-section5 { background: #fff; color: #000; }
}