/* ─── XpertLab Hero Slider — Frontend Styles ──────────────────────────────── */

/* Variables set via inline style on .xls-slider:
   --xls-height       : slider height in px (desktop only)
   --xls-accent       : highlight / brand color  (default #B51B5A)
   --xls-back-color   : decorative image bg color (default #35B6FF)
   --xls-arrow-bg / --xls-arrow-border / --xls-arrow-radius / --xls-arrow-color
*/

/* ════════════════════════════════════════════════════════════════════════════
   THEME RESET — scoped to .xls-slider so nothing bleeds into the page
   ════════════════════════════════════════════════════════════════════════════ */
.xls-slider,
.xls-slider *,
.xls-slider *::before,
.xls-slider *::after {
  box-sizing: border-box !important;
}

.xls-slider button {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  color: inherit !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  border-radius: 0;
}
.xls-slider button:hover,
.xls-slider button:focus,
.xls-slider button:active,
.xls-slider button:focus-visible {
  background: transparent;
  box-shadow: none !important;
  outline: none;
}

.xls-slider h1, .xls-slider h2, .xls-slider h3,
.xls-slider h4, .xls-slider h5, .xls-slider h6 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.xls-slider p {
  margin: 0 !important;
  padding: 0 !important;
}
.xls-slider a,
.xls-slider a:hover,
.xls-slider a:focus,
.xls-slider a:visited,
.xls-slider a:active {
  text-decoration: none !important;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.xls-slider span { line-height: inherit; }
.xls-slider svg  { display: block; }

/* ════════════════════════════════════════════════════════════════════════════
   WRAPPER  (maps to .hero)
   ════════════════════════════════════════════════════════════════════════════ */
.xls-slider {
  /* Corner rounding of the hero image (and of the decorative panel behind it).
     30px on every screen where the image is at full size; below ~600px the
     image itself shrinks, so the radius shrinks with it (same proportion as
     desktop) instead of slicing chunks out of the artwork's corners. */
  --xls-img-radius: clamp(14px, calc(5.4vw - 2px), 30px);
  position: relative;
  width: 100%;
  height: min(var(--xls-height, 738px), 90vh);
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: #fff;
  font-family: 'DM Sans', 'Product Sans', 'Google Sans', Arial, sans-serif;
  max-width: 1600px !important;
  margin: 60px auto 0;
}

/* ─── Ambient glow layers (maps to .blue-glow / .pink-glow) ──────────────── */
/* These must be LARGE to fill the intended color areas (right-top = blue, bottom-left = pink).
   The slider clips them with overflow:hidden — size them so the visible portion matches the design. */
.xls-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  /* No glow may ever be wider than the slider itself — see the note on
     .xls-glow-blue below for why any horizontal spill is a page-level problem. */
  max-width: 100%;
}

/* Blue blob — starts from menu bottom (negative top to cross the 60px slider margin), fades by 2nd heading line */
.xls-glow-blue {
  width: 226px;
  height: 226px;
  top: -60px;
  /* 571px is the desktop design offset. On a narrow viewport it put the blob's
     right edge at 571 + 226 = 797px — outside the slider — and because the
     slider deliberately keeps `overflow: visible` so the blob can bleed ABOVE
     it, that sideways spill turned into page overflow and a horizontal
     scrollbar (iPad Mini at 768px, and anything narrower).
     min() caps the offset in proportional terms on small screens and is a
     no-op on desktop: 62% only wins once the slider is narrower than ~920px,
     so the design position is untouched everywhere it used to be correct. */
  left: min(571px, 62%);
  background: #87D4FF;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 1;
}

/* Pink blob — bottom-left ambient */
.xls-glow-pink {
  width: 62px;
  height: 133px;
  bottom: -30px;
  left: 93px;
  background: #B51B5A;
  border-radius: 50%;
  filter: blur(76px);
  opacity: 1;
}

/* Right-side glow */
.xls-glow-br {
  width: 130px;
  height: 195px;
  top: 132px;
  right: 0;
  background: #87D4FF;
  border-radius: 55%;
  filter: blur(100px);
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   TRACK
   ════════════════════════════════════════════════════════════════════════════ */
.xls-track {
  position: relative;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   SLIDE  (maps to .hero-inner — two-column flex layout)
   ════════════════════════════════════════════════════════════════════════════ */
.xls-slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 60px;
  gap: 40px;
  pointer-events: none;
  visibility: hidden;
  background: transparent;
}
.xls-slide.is-active  { visibility: visible; pointer-events: auto; }
.xls-slide.is-leaving { visibility: visible; }

/* ─── Left column: text  (maps to .hero-content) ─────────────────────────── */
.xls-slide-content {
  position: relative;
  z-index: 2;
  max-width: 551px;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ─── Right column: image  (maps to .hero-image-wrapper) ─────────────────── */
.xls-slide-image-col {
  position: relative;
  width: 686px;
  max-width: 54%;
  height: 485px;
  flex-shrink: 0;
  overflow: visible;
}

/* Dot-grid behind image, left */
/* Geometry is expressed in % of .xls-slide-image-col (desktop 560×420) so the
   whole composition scales as one unit on tablet/mobile: 95/420=22.6%,
   110/560=19.6%, 110/420=26.2%. */
.xls-img-bg-dots {
  position: absolute;
  left: 1%;
  top: 22.6%;
  width: 19.6%;
  height: 26.2%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpolygon points='9,5 13,9 9,13 5,9' fill='%23dddddd'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  z-index: 1;
  pointer-events: none;
}

/* Blue rectangle — decorative background behind image.
   Shape comes from the PNG mask; color is controlled via --xls-back-color (admin). */
/* top 35/420 = 8.3% keeps the panel's offset proportional at every width. */
.xls-img-bg-blue {
  position: absolute;
  width: 51.3%;
  height: 85%;
  top: 8.3%;
  bottom: auto;
  right: 0;
  background: var(--xls-back-color, #35B6FF);
  -webkit-mask: url(../Rectangle_bg.png) no-repeat center / 100% 100%;
          mask: url(../Rectangle_bg.png) no-repeat center / 100% 100%;
  border-radius: var(--xls-img-radius, 30px);
  z-index: 1;
}

/* Main image card */
/* Percentages relative to .xls-slide-image-col (686×485px): 645/686=94%, 451/485=93%, 12/686=1.75% */
/* The card is the rounded clipping box. Its height follows the image
   (`height:auto`, capped at 94% of the column) so the box and the picture have
   exactly the same edges — that way the corner radius clips all FOUR corners
   identically. With a fixed 94% height the box stayed taller than the picture,
   so only the top corners were rounded and the bottom ones stayed square. */
.xls-slide-img-card {
  position: absolute;
  width: 94%;
  height: auto;
  max-height: 94%;
  top: 0;
  left: 1.75%;
  overflow: hidden;
  border-radius: var(--xls-img-radius, 30px);
  z-index: 3;
  background: transparent;
  will-change: opacity, transform;
}
/* height:auto keeps the box on the image's own ratio; max-height + contain are
   the safety net for unusually tall images (scaled down, never cropped). */
.xls-slide-img-card img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: top left;
  display: block;
  /* -webkit-backface-visibility: hidden;
  backface-visibility: hidden; */
  transform: translateZ(0);
}

/* Dot-grid bottom-right corner */
/* 10/420=2.4%, 85/560=15.2%, 104/420=24.8% — scales with the column. */
.xls-img-dots-br {
  position: absolute;
  right: -5%;
  bottom: 2.4%;
  width: 15.2%;
  height: 24.8%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpolygon points='9,5 13,9 9,13 5,9' fill='%23dddddd'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  z-index: 0;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   TEXT ELEMENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* maps to .hero-content h1 */
.xls-heading {
  font-family: 'Syne', sans-serif !important;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.2;
  font-weight: 700 !important;
  color: #191919;
  margin: 0;
  letter-spacing: 0;
}

/* maps to .hero-content .highlight */
.xls-highlight {
  color: var(--xls-accent, #B51B5A);
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  /* The highlighted phrase must never break across two lines on any device.
     `inline-block` makes it a single unbreakable box, so if it doesn't fit
     beside the heading text it drops to the next line as a whole. The JS
     auto-fit (slider.js → fitHighlights) shrinks the heading just enough on
     narrow screens so the nowrap phrase still fits inside the column. */
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
}

/* maps to .hero-content p */
.xls-desc {
  margin-top: 50px !important;
  font-size: clamp(15px, 1.7vw, 22px);
  line-height: 1.35;
  color: #778AA9;
  max-width: 517px;
  /* no card styling */
  background: none;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0 !important;
  border-left: none;
  font-family: 'DM Sans', 'Product Sans', 'Google Sans', Arial, sans-serif;
  font-weight: 400;
}

/* CTA Button */
.xls-slider .xls-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: var(--xls-accent, #B51B5A) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 28px rgba(181,27,90,.28);
  transition: transform .2s, box-shadow .2s;
  border: 0;
  margin-top: 36px;
}
.xls-slider .xls-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(181,27,90,.42);
  color: #fff !important;
}
.xls-btn-arrow { transition: transform .25s; }
.xls-btn:hover .xls-btn-arrow { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════════════════════
   ARROWS
   ════════════════════════════════════════════════════════════════════════════ */
.xls-slider .xls-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--xls-arrow-radius, 50%) !important;
  border: 2px solid var(--xls-arrow-border, rgba(53,182,255,.30)) !important;
  background: var(--xls-arrow-bg, rgba(255,255,255,.85)) !important;
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
  padding: 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
}
.xls-arrow svg {
  width: 18px; height: 18px;
  stroke: var(--xls-arrow-color, #35B6FF);
  stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.xls-arrow:hover {
  background: var(--xls-arrow-bg, rgba(255,255,255,.98)) !important;
  border-color: var(--xls-arrow-border, rgba(53,182,255,.55)) !important;
  transform: translateY(-50%) scale(1.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
}
.xls-arrow-prev { left: 16px; }
.xls-arrow-next { right: 16px; }

/* ════════════════════════════════════════════════════════════════════════════
   PAGINATION BARS  (maps to .pagination spans)
   active: 70×4px #35B6FF  |  inactive: 20×4px #D9D9D9
   ════════════════════════════════════════════════════════════════════════════ */
.xls-dots {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
  width: 100%;
  padding: 32px 16px 20px;
  margin: 0;
  z-index: 10;
}
.xls-slider .xls-dot {
  width: 20px !important;
  height: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #D9D9D9 !important;
  cursor: pointer;
  flex-shrink: 0;
  flex-grow: 0;
  transition: width .35s cubic-bezier(.34,1.56,.64,1), background .25s;
}
.xls-slider .xls-dot:hover  { background: rgba(53,182,255,.45) !important; }
.xls-slider .xls-dot.is-active {
  width: 60px !important;
  background: #35B6FF !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── FADE ── */
.xls-slide[data-animation="fade"] {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.4,0,.2,1);
}
.xls-slide[data-animation="fade"].is-active  { opacity: 1; }
.xls-slide[data-animation="fade"].is-leaving { opacity: 0; }

/* ── SLIDE ── */
.xls-slide[data-animation="slide"] {
  transform: translateX(100%);
  transition: transform .8s cubic-bezier(.77,0,.18,1);
}
.xls-slide[data-animation="slide"].is-active  { transform: translateX(0); }
.xls-slide[data-animation="slide"].is-leaving { transform: translateX(-100%); }

/* ── ZOOM ── */
.xls-slide[data-animation="zoom"] {
  opacity: 0; transform: scale(1.06);
  transition: opacity .75s ease, transform .75s ease;
}
.xls-slide[data-animation="zoom"].is-active  { opacity: 1; transform: scale(1); }
.xls-slide[data-animation="zoom"].is-leaving { opacity: 0; transform: scale(.95); }

/* ── REVEAL / CURTAIN ── */
.xls-slide[data-animation="reveal"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s cubic-bezier(.77,0,.18,1);
}
.xls-slide[data-animation="reveal"].is-active  { clip-path: inset(0 0% 0 0); }
.xls-slide[data-animation="reveal"].is-leaving { clip-path: inset(0 0 0 100%); }

/* ── FLIP ── */
.xls-slide[data-animation="flip"] {
  opacity: 0;
  transform: perspective(1200px) rotateY(90deg);
  transform-origin: left center;
  transition: opacity .7s ease, transform .7s cubic-bezier(.77,0,.18,1);
}
.xls-slide[data-animation="flip"].is-active  { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
.xls-slide[data-animation="flip"].is-leaving { opacity: 0; transform: perspective(1200px) rotateY(-90deg); }

/* ── BLUR ── */
.xls-slide[data-animation="blur"] {
  opacity: 0; filter: blur(18px);
  transition: opacity .75s ease, filter .75s ease;
}
.xls-slide[data-animation="blur"].is-active  { opacity: 1; filter: blur(0px); }
.xls-slide[data-animation="blur"].is-leaving { opacity: 0; filter: blur(18px); }

/* ── SLIDE UP ── */
.xls-slide[data-animation="slide-up"] {
  opacity: 0; transform: translateY(60px);
  transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.34,1.56,.64,1);
}
.xls-slide[data-animation="slide-up"].is-active  { opacity: 1; transform: translateY(0); }
.xls-slide[data-animation="slide-up"].is-leaving { opacity: 0; transform: translateY(-60px); }

/* ── ROTATE ZOOM ── */
.xls-slide[data-animation="rotate-zoom"] {
  opacity: 0; transform: scale(.80) rotate(-6deg);
  transition: opacity .75s ease, transform .75s cubic-bezier(.34,1.56,.64,1);
}
.xls-slide[data-animation="rotate-zoom"].is-active  { opacity: 1; transform: scale(1) rotate(0deg); }
.xls-slide[data-animation="rotate-zoom"].is-leaving { opacity: 0; transform: scale(.80) rotate(6deg); }

/* ── SPLIT ── */
.xls-slide[data-animation="split"] {
  clip-path: inset(50% 0 50% 0); opacity: 0;
  transition: clip-path .85s cubic-bezier(.77,0,.18,1), opacity .5s ease;
}
.xls-slide[data-animation="split"].is-active  { clip-path: inset(0% 0 0% 0); opacity: 1; }
.xls-slide[data-animation="split"].is-leaving { clip-path: inset(50% 0 50% 0); opacity: 0; }

/* ── PARALLAX DEPTH ── */
.xls-slide[data-animation="parallax"] {
  opacity: 0;
  transform: translateX(80px) scale(.92);
  filter: blur(6px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1), filter .9s ease;
}
.xls-slide[data-animation="parallax"].is-active  { opacity:1; transform: translateX(0) scale(1); filter: blur(0); }
.xls-slide[data-animation="parallax"].is-leaving { opacity:0; transform: translateX(-80px) scale(.92); filter: blur(6px); }

/* ── GLITCH / DIGITAL ── */
@keyframes xls-glitch-in {
  0%   { transform: translate(0,0) skewX(0); filter: hue-rotate(0) contrast(1); opacity: 0; }
  20%  { transform: translate(-12px,4px) skewX(-4deg); filter: hue-rotate(40deg) contrast(1.4); opacity: .6; }
  40%  { transform: translate(10px,-3px) skewX(3deg); filter: hue-rotate(-30deg) contrast(1.3); opacity: .85; }
  60%  { transform: translate(-4px,2px) skewX(-1deg); filter: hue-rotate(15deg) contrast(1.1); opacity: .95; }
  100% { transform: translate(0,0) skewX(0); filter: none; opacity: 1; }
}
.xls-slide[data-animation="glitch"]            { opacity: 0; }
.xls-slide[data-animation="glitch"].is-active  { animation: xls-glitch-in .9s steps(8,end) forwards; }
.xls-slide[data-animation="glitch"].is-leaving { animation: xls-glitch-in .6s steps(8,end) reverse forwards; }

/* ── DIAGONAL WIPE ── */
.xls-slide[data-animation="diagonal"] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path .9s cubic-bezier(.77,0,.18,1);
}
.xls-slide[data-animation="diagonal"].is-active  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.xls-slide[data-animation="diagonal"].is-leaving { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }

/* ── MOSAIC REVEAL ── */
@keyframes xls-mosaic {
  0%   { mask-size: 4px 4px; -webkit-mask-size: 4px 4px; opacity: 0; }
  60%  { opacity: 1; }
  100% { mask-size: 100% 100%; -webkit-mask-size: 100% 100%; opacity: 1; }
}
.xls-slide[data-animation="mosaic"] {
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle at center, #000 60%, transparent 61%);
          mask-image: radial-gradient(circle at center, #000 60%, transparent 61%);
  -webkit-mask-repeat: round; mask-repeat: round;
  -webkit-mask-size: 4px 4px; mask-size: 4px 4px;
  transition: opacity .8s ease;
}
.xls-slide[data-animation="mosaic"].is-active  { animation: xls-mosaic .9s ease forwards; }
.xls-slide[data-animation="mosaic"].is-leaving { opacity: 0; transition: opacity .5s ease; }

/* ── LIQUID MORPH ── */
.xls-slide[data-animation="liquid"] {
  clip-path: ellipse(0% 0% at 50% 50%);
  opacity: 0;
  transition: clip-path 1s cubic-bezier(.77,0,.18,1), opacity .8s ease;
}
.xls-slide[data-animation="liquid"].is-active  { clip-path: ellipse(120% 120% at 50% 50%); opacity: 1; }
.xls-slide[data-animation="liquid"].is-leaving { clip-path: ellipse(0% 0% at 50% 50%); opacity: 0; }

/* ── IRIS OPEN ── */
.xls-slide[data-animation="iris"] {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .9s cubic-bezier(.77,0,.18,1);
}
.xls-slide[data-animation="iris"].is-active  { clip-path: circle(140% at 50% 50%); }
.xls-slide[data-animation="iris"].is-leaving { clip-path: circle(0% at 50% 50%); }

/* ── CUBE ROTATE (3D) ── */
.xls-slide[data-animation="cube"] {
  opacity: 0;
  transform: perspective(1400px) rotateY(70deg) translateZ(-200px);
  transform-origin: left center;
  transition: opacity .85s ease, transform .85s cubic-bezier(.77,0,.18,1);
}
.xls-slide[data-animation="cube"].is-active  { opacity:1; transform: perspective(1400px) rotateY(0deg) translateZ(0); }
.xls-slide[data-animation="cube"].is-leaving { opacity:0; transform: perspective(1400px) rotateY(-70deg) translateZ(-200px); transform-origin: right center; }

/* ════════════════════════════════════════════════════════════════════════════
   REVERSE DIRECTION
   ════════════════════════════════════════════════════════════════════════════ */
.xls-no-transition .xls-slide,
.xls-no-transition .xls-slide *,
.xls-no-transition .xls-anim {
  transition: none !important;
  animation: none !important;
}

.xls-reverse .xls-slide[data-animation="slide"]            { transform: translateX(-100%); }
.xls-reverse .xls-slide[data-animation="slide"].is-leaving { transform: translateX(100%); }

.xls-reverse .xls-slide[data-animation="slide-up"]            { transform: translateY(-60px); }
.xls-reverse .xls-slide[data-animation="slide-up"].is-leaving { opacity: 0; transform: translateY(60px); }

.xls-reverse .xls-slide[data-animation="reveal"]            { clip-path: inset(0 0 0 100%); }
.xls-reverse .xls-slide[data-animation="reveal"].is-leaving { clip-path: inset(0 100% 0 0); }

.xls-reverse .xls-slide[data-animation="flip"] {
  transform: perspective(1200px) rotateY(-90deg);
  transform-origin: right center;
}
.xls-reverse .xls-slide[data-animation="flip"].is-leaving {
  transform: perspective(1200px) rotateY(90deg);
  transform-origin: left center;
}

.xls-reverse .xls-slide[data-animation="parallax"]            { transform: translateX(-80px) scale(.92); }
.xls-reverse .xls-slide[data-animation="parallax"].is-leaving { opacity:0; transform: translateX(80px) scale(.92); filter: blur(6px); }

.xls-reverse .xls-slide[data-animation="diagonal"]            { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
.xls-reverse .xls-slide[data-animation="diagonal"].is-leaving { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }

.xls-reverse .xls-slide[data-animation="cube"] {
  transform: perspective(1400px) rotateY(-70deg) translateZ(-200px);
  transform-origin: right center;
}
.xls-reverse .xls-slide[data-animation="cube"].is-leaving {
  transform: perspective(1400px) rotateY(70deg) translateZ(-200px);
  transform-origin: left center;
}

.xls-reverse .xls-slide[data-animation="glitch"].is-active  { animation: xls-glitch-in .9s steps(8,end) reverse forwards; }
.xls-reverse .xls-slide[data-animation="glitch"].is-leaving { animation: xls-glitch-in .6s steps(8,end) forwards; }

/* ════════════════════════════════════════════════════════════════════════════
   PER-ELEMENT ANIMATIONS
   ════════════════════════════════════════════════════════════════════════════ */
.xls-anim {
  --xls-anim-delay: 0ms;
  --xls-anim-duration: .8s;
  --xls-anim-ease: cubic-bezier(.22,1,.36,1);
  opacity: 0;
  will-change: transform, opacity, filter;
  transition:
    opacity   var(--xls-anim-duration) var(--xls-anim-ease) var(--xls-anim-delay),
    transform var(--xls-anim-duration) var(--xls-anim-ease) var(--xls-anim-delay),
    filter    var(--xls-anim-duration) var(--xls-anim-ease) var(--xls-anim-delay);
}
.xls-slide.is-active .xls-anim { opacity: 1; transform: none; filter: none; }

/* ── data-anim variants ──────────────────────────────────────────────────── */
.xls-anim[data-anim="none"]       { opacity: 1; transform: none; transition: none; }
.xls-anim[data-anim="fade"]       { transform: none; }
.xls-anim[data-anim="fade-up"]    { transform: translateY(40px); }
.xls-anim[data-anim="fade-down"]  { transform: translateY(-40px); }
.xls-anim[data-anim="fade-left"]  { transform: translateX(-60px); }
.xls-anim[data-anim="fade-right"] { transform: translateX(60px); }
.xls-anim[data-anim="zoom-in"]    { transform: scale(.78); }
.xls-anim[data-anim="zoom-out"]   { transform: scale(1.18); }
.xls-anim[data-anim="bounce-in"]  {
  transform: scale(.5);
  transition:
    opacity   .8s ease var(--xls-anim-delay),
    transform .9s cubic-bezier(.34,1.8,.64,1) var(--xls-anim-delay);
}
.xls-anim[data-anim="flip-x"] {
  transform: perspective(1000px) rotateX(80deg);
  transform-origin: center bottom;
}
.xls-anim[data-anim="flip-y"] {
  transform: perspective(1000px) rotateY(80deg);
  transform-origin: left center;
}
.xls-anim[data-anim="rotate-in"] { transform: rotate(-12deg) scale(.85); }
.xls-anim[data-anim="blur-in"]   { filter: blur(20px); transform: scale(1.04); }
.xls-anim[data-anim="skew-in"]   { transform: skewX(-14deg) translateX(-30px); }
.xls-anim[data-anim="elastic"]   {
  transform: scale(.4);
  transition:
    opacity   .6s ease var(--xls-anim-delay),
    transform 1s cubic-bezier(.34,2.4,.64,1) var(--xls-anim-delay);
}

/* ── Keyframe-based variants ─────────────────────────────────────────────── */
@keyframes xls-swing {
  0%   { transform: rotate(0); opacity: 0; }
  20%  { transform: rotate(15deg); opacity: 1; }
  40%  { transform: rotate(-10deg); }
  60%  { transform: rotate(5deg); }
  80%  { transform: rotate(-3deg); }
  100% { transform: rotate(0); opacity: 1; }
}
.xls-anim[data-anim="swing"] { transform-origin: top center; opacity: 0; }
.xls-slide.is-active .xls-anim[data-anim="swing"] {
  animation: xls-swing 1s ease both;
  animation-delay: var(--xls-anim-delay);
  opacity: 1;
}

@keyframes xls-roll-in {
  0%   { transform: translateX(-100%) rotate(-120deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}
.xls-anim[data-anim="roll-in"] { opacity: 0; }
.xls-slide.is-active .xls-anim[data-anim="roll-in"] {
  animation: xls-roll-in .9s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--xls-anim-delay);
}

@keyframes xls-tada {
  0%   { transform: scale(.9); opacity: 0; }
  10%  { transform: scale(.9) rotate(-3deg); opacity: 1; }
  20%, 40%, 60%, 80% { transform: scale(1.08) rotate(3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.xls-anim[data-anim="tada"] { opacity: 0; }
.xls-slide.is-active .xls-anim[data-anim="tada"] {
  animation: xls-tada 1.1s ease both;
  animation-delay: var(--xls-anim-delay);
}

@keyframes xls-pulse {
  0%   { transform: scale(.9); opacity: 0; }
  50%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.xls-anim[data-anim="pulse"] { opacity: 0; }
.xls-slide.is-active .xls-anim[data-anim="pulse"] {
  animation: xls-pulse .9s ease both;
  animation-delay: var(--xls-anim-delay);
}

.xls-anim[data-anim="slide-clip"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transition: clip-path 1s cubic-bezier(.77,0,.18,1) var(--xls-anim-delay);
}
.xls-slide.is-active .xls-anim[data-anim="slide-clip"] {
  clip-path: inset(0 0% 0 0);
  opacity: 1;
}

/* ── Internal stagger inside text column ────────────────────────────────── */
.xls-slide-content.xls-anim .xls-heading,
.xls-slide-content.xls-anim .xls-desc,
.xls-slide-content.xls-anim .xls-btn {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   .55s cubic-bezier(.4,0,.2,1),
    transform .55s cubic-bezier(.4,0,.2,1);
}
.xls-slide.is-active .xls-slide-content.xls-anim .xls-heading { opacity:1; transform:none; transition-delay: calc(var(--xls-anim-delay, 0ms) + 100ms); }
.xls-slide.is-active .xls-slide-content.xls-anim .xls-desc    { opacity:1; transform:none; transition-delay: calc(var(--xls-anim-delay, 0ms) + 220ms); }
.xls-slide.is-active .xls-slide-content.xls-anim .xls-btn     { opacity:1; transform:none; transition-delay: calc(var(--xls-anim-delay, 0ms) + 340ms); }

.xls-slide-content.xls-anim[data-anim="none"] .xls-heading,
.xls-slide-content.xls-anim[data-anim="none"] .xls-desc,
.xls-slide-content.xls-anim[data-anim="none"] .xls-btn {
  opacity: 1; transform: none; transition: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .xls-anim, .xls-slide,
  .xls-slide-content.xls-anim .xls-heading,
  .xls-slide-content.xls-anim .xls-desc,
  .xls-slide-content.xls-anim .xls-btn {
    transition: opacity .25s ease !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — cinematic, layered entrance for the whole hero section
   ────────────────────────────────────────────────────────────────────────────
   JS adds `.xls-reveal` immediately (arms the pre-hidden state), then
   `.is-revealed` once the section scrolls into view. Because arming is done by
   JS, no-JS visitors never see the hidden state — content stays fully visible.
   All rules are scoped under `.xls-slider.xls-reveal` so nothing here affects
   the per-slide / per-element animations once the reveal has played.
   ════════════════════════════════════════════════════════════════════════════ */
.xls-slider.xls-reveal {
  /* Long, weighted settle — decelerates late for that "expensive" feel */
  --xls-reveal-ease: cubic-bezier(.16,.84,.32,1);

  opacity: 0;
  transform: translateY(46px) scale(.986);
  filter: blur(8px);
  transition:
    opacity   1.4s var(--xls-reveal-ease),
    transform 1.6s var(--xls-reveal-ease),
    filter    1.3s var(--xls-reveal-ease);
  will-change: transform, opacity, filter;
}
.xls-slider.xls-reveal.is-revealed {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── Ambient glows arrive last — a slow, delayed breathe-in ──────────────── */
.xls-slider.xls-reveal .xls-glow {
  opacity: 0;
  transform: scale(.6);
  transition:
    opacity   1.9s ease .55s,
    transform 2.2s var(--xls-reveal-ease) .55s;
}
.xls-slider.xls-reveal.is-revealed .xls-glow {
  opacity: 1;
  transform: scale(1);
}

/* ── Blue decorative panel curtains up from the bottom ───────────────────── */
.xls-slider.xls-reveal .xls-img-bg-blue {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.35s var(--xls-reveal-ease) .38s;
}
.xls-slider.xls-reveal.is-revealed .xls-img-bg-blue {
  clip-path: inset(0 0 0 0);
}

/* ── Dot-grids fade in gently, offset in time ────────────────────────────── */
.xls-slider.xls-reveal .xls-img-bg-dots,
.xls-slider.xls-reveal .xls-img-dots-br {
  opacity: 0;
  transition: opacity 1.3s ease .65s;
}
.xls-slider.xls-reveal .xls-img-dots-br { transition-delay: .8s; }
.xls-slider.xls-reveal.is-revealed .xls-img-bg-dots,
.xls-slider.xls-reveal.is-revealed .xls-img-dots-br {
  opacity: 1;
}

/* ── One-time light sheen sweeping across the hero image ─────────────────── */
.xls-slider.xls-reveal .xls-slide-img-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255,255,255,.42) 48%,
    rgba(255,255,255,.08) 60%,
    transparent 72%
  );
  transform: translateX(-130%);
}
.xls-slider.xls-reveal.is-revealed .xls-slide-img-card::after {
  animation: xls-sheen 1.5s cubic-bezier(.22,1,.36,1) .9s both;
}
@keyframes xls-sheen {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

/* ── Hold the first slide's text + image entrance until the section reveals ─ */
/* `:not(.is-revealed)` only ever matches the initial state, so later slide
   changes keep their normal (snappier) stagger. */
.xls-slider.xls-reveal:not(.is-revealed) .xls-slide.is-active .xls-anim {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

/* Reduced motion — neutralise the reveal entirely (belt-and-suspenders; JS
   also skips arming when reduced motion is requested). */
@media (prefers-reduced-motion: reduce) {
  .xls-slider.xls-reveal,
  .xls-slider.xls-reveal .xls-glow,
  .xls-slider.xls-reveal .xls-img-bg-blue,
  .xls-slider.xls-reveal .xls-img-bg-dots,
  .xls-slider.xls-reveal .xls-img-dots-br {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: opacity .25s ease !important;
  }
  .xls-slider.xls-reveal .xls-slide-img-card::after { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP  (≥ 1200px)  e.g. Nest Hub Max 1280×800 and larger
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1241px) {
  .xls-slide {
    /* 36px side padding + space-between makes the text hug the LEFT edge and the
       image hug the RIGHT edge at the exact same positions as Smart Strategies
       (its .xlss-inner uses 36px inner padding), so the two sections' left/right
       sides line up. Image/text sizes are untouched. */
    padding: 40px 36px;
    gap: 40px;
    justify-content: space-between;
  }

  .xls-slide-content {
    flex: 0 1 480px;
    min-width: 0;
    max-width: 480px;
  }

  .xls-slide-image-col {
    flex: 0 0 560px;
    width: 560px;
    max-width: none;
    height: 420px;
  }

  .xls-heading {
    font-size: clamp(24px, 2.9vw, 38px);
    line-height: 1.2;
  }

  .xls-desc {
    margin-top: 20px !important;
    font-size: clamp(13px, 1.3vw, 17px);
  }

  .xls-slider .xls-btn {
    margin-top: 18px;
    font-size: 14px !important;
    padding: 12px 24px !important;
  }

  .xls-img-bg-blue {
    border-radius: var(--xls-img-radius, 30px);
  }

  /* height:auto — the rounded box hugs the image so all four corners match */
  .xls-slide-img-card {
    border-radius: var(--xls-img-radius, 30px);
    top: 0;
    height: auto;
    max-height: 94%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — LARGE DESKTOP  (≥ 1440px)
   Slider is capped at 1600px so layout values from ≥1101px block apply.
   Only border-radius needs a slight bump for larger screens.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .xls-img-bg-blue {
    border-radius: var(--xls-img-radius, 30px);
  }

  /* height:auto — the rounded box hugs the image so all four corners match */
  .xls-slide-img-card {
    border-radius: var(--xls-img-radius, 30px);
    top: 0;
    height: auto;
    max-height: 94%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET / SMALL LAPTOP  (≤ 1240px)
   Extended up from 1199px: between 1200–1240px the side-by-side row got too
   tight (theme narrows the column), so the fixed image overlapped the heading.
   Stacking (image on top, text below) fixes that band.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1240px) {
  .xls-slider {
    height: auto !important;
    min-height: 0 !important;
    /* Catch-all against a horizontal scrollbar on tablets and phones. The
       layout is stacked and centred from here down, so nothing is meant to
       bleed sideways any more — only up and down (the glows cross the slider's
       top edge by design). `clip` rather than `hidden` so no scroll container is
       created and the vertical axis stays `visible`; on desktop the rule is
       absent, which keeps the soft blurred bleed of the glows past the slider's
       edges from being cut by a hard line. */
    overflow-x: clip;
  }

  .xls-track {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative;
  }

  .xls-slide {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: flex-start !important;
    padding: 40px 20px 20px !important;
    gap: 32px !important;
    min-height: 0 !important;
  }

  .xls-slide.is-active {
    position: relative !important;
    inset: auto !important;
    width: 100%;
  }

  .xls-slide-content {
    max-width: 100% !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .xls-desc {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The image column keeps the desktop 560×420 proportions instead of a fixed
     pixel height. Because every layer inside it (image card, blue panel,
     dot-grids) is sized in %, the whole composition becomes a uniform
     scale-down of the desktop design — nothing gets clipped or shifted. */
  .xls-slide-image-col {
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;
    aspect-ratio: 560 / 420;
    overflow: visible !important;
    margin: 0 auto;
    order: -1 !important;
  }

  /* Browsers without aspect-ratio support fall back to fixed heights; the
     image itself still can't be cropped thanks to object-fit:contain. */
  @supports not (aspect-ratio: 4 / 3) {
    .xls-slide-image-col { height: 420px !important; }
  }

  .xls-slide-img-card {
    width: 94% !important;
    height: auto !important;
    max-height: 94% !important;
    transform: none !important;
  }

  /* The dot grid hangs 5% past the image column on desktop, where there is
     plenty of room beside it. Stacked and centred, the column fills the slide's
     full content width, so that overhang lands outside the slider — it tucks to
     the column's edge here instead, so the clip above never has to cut it. */
  .xls-img-dots-br {
    right: 0 !important;
  }

  .xls-heading { font-size: clamp(26px, 5vw, 42px); }
  .xls-desc    { font-size: clamp(15px, 2.8vw, 20px); }

  /* glows hidden */

  .xls-slider .xls-arrow {
    width: 36px !important;
    height: 36px !important;
    top: 35%;
    transform: translateY(-50%);
  }
  .xls-slider .xls-arrow:hover { transform: translateY(-50%) scale(1.10); }
  .xls-arrow svg  { width: 15px; height: 15px; }
  .xls-arrow-prev { left: 8px; }
  .xls-arrow-next { right: 8px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL DESKTOP / LARGE TABLET  (1024px – 1240px)
   e.g. Nest Hub (1024×600) and iPad landscape. Text and image belong on ONE
   row here, like the desktop layout — stacking them (the ≤1240px block above)
   left a tall, empty-looking hero. The auto-height / relative-slide machinery
   from that block is kept, so the row can never be clipped by the fixed slider
   height; only the direction and the column sizes are restored.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1240px) {
  .xls-slide {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 36px 32px !important;
    gap: 32px !important;
  }

  /* text first (left), image second (right) — same order as desktop */
  .xls-slide-content {
    order: 0 !important;
    flex: 1 1 auto !important;
    max-width: 44% !important;
    align-items: flex-start !important;
  }

  .xls-desc {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 16px !important;
    font-size: clamp(14px, 1.5vw, 17px);
  }

  .xls-slide-image-col {
    order: 0 !important;
    flex: 0 1 50% !important;
    width: 50% !important;
    max-width: 520px !important;
    margin: 0 !important;
  }

  .xls-heading { font-size: clamp(24px, 2.8vw, 34px); }

  .xls-slider .xls-btn {
    margin-top: 20px;
    font-size: 14px !important;
    padding: 12px 24px !important;
  }

  /* arrows back to the vertical centre of the row */
  .xls-slider .xls-arrow       { top: 50%; }
  .xls-slider .xls-arrow:hover { transform: translateY(-50%) scale(1.10); }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .xls-slide {
    padding: 40px 20px 20px !important;
  }

  .xls-heading { font-size: clamp(24px, 6vw, 36px); }
  .xls-desc    { font-size: clamp(14px, 3.5vw, 18px); }

  /* Column size, image card and the decorative layers all keep the
     proportional values from the ≤1240px block — no fixed heights here, so the
     image is never cut and the blue panel stays in its desktop position. */
  @supports not (aspect-ratio: 4 / 3) {
    .xls-slide-image-col { height: 320px !important; }
  }

  .xls-slider .xls-dot           { width: 16px !important; }
  .xls-slider .xls-dot.is-active { width: 50px !important; }
  .xls-dots                      { gap: 10px; padding: 14px 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .xls-slide { padding: 30px 16px 16px !important; gap: 24px !important; }

  .xls-heading { font-size: clamp(22px, 6.5vw, 30px); }
  .xls-desc    { font-size: clamp(13px, 4vw, 16px); margin-top: 20px !important; }

  .xls-slider .xls-btn { font-size: 14px !important; padding: 12px 24px !important; margin-top: 24px; }

  /* Image block stays proportional (see the ≤1240px block) — its height now
     follows the width, so small phones show the full image, not a cropped one. */
  @supports not (aspect-ratio: 4 / 3) {
    .xls-slide-image-col { height: 260px !important; }
  }

  .xls-slider .xls-arrow { width: 32px !important; height: 32px !important; }
  .xls-arrow svg  { width: 13px; height: 13px; }

  .xls-slider .xls-dot           { width: 14px !important; }
  .xls-slider .xls-dot.is-active { width: 44px !important; }
  .xls-dots                      { gap: 8px; padding: 12px; }

  /* glows hidden */
}


/* Prevent any horizontal overflow */
.xls-slider { max-width: 100%; }