/* MARK: - Tokens (tune here) */
html body .ace-industry-slider {
  /* motion — progress-driven: every card style is a function of the slider position */
  --ace-dur: 0.6s; /* ≈ time to settle on a slide */

  /* n1 leaving pose */
  --ace-exit-scale: 0.8;
  --ace-exit-blur: 36px;
  --ace-exit-shift: 0.5; /* moves right by this × n1 width while it shrinks */

  /* glass */
  --ace-glass: rgba(255, 255, 255, 0.4);
  --ace-glass-blur: 0; /* step badge backdrop */
  --ace-n2-img-blur: 2px; /* soft photo on n2+ */
  --ace-n2-title-blur: 0px; /* title on n2+ */
  --ace-n2-title: 0.75;
  --ace-n2-img: 0.15;
  --ace-n3-fill-start: 1; /* n3 → n2: when glass / photo / title start filling.
                                   1 = once the whole card is on screen (no edge at the cut),
                                   <1 earlier, >1 later */

  /* left copy (title + text) swap */
  --ace-copy-dur: 0.4s;
  --ace-copy-in-scale: 0.8;
  --ace-copy-out-scale: 1.2;
  --ace-copy-blur: 0; /* blur at the 0.8 / 1.2 ends of the swap */

  /* geometry (n2 / n3 = n1 scaled by n2-w ÷ n1-w, bottom aligned) */
  --ace-track-w: 839px; /* desktop visible track */
  --ace-edge: 12px; /* wrapper spacing from the screen edge */
  --ace-gap: 12px;
  --ace-n1-w: 368px;
  --ace-n1-h: 460px;
  --ace-n2-w: 336px;
  --ace-card-title: 24px;
}

/* 01. SECTION */

html body .ace-industry-slider {
  width: 100vw !important;
  max-width: none !important;
  box-sizing: border-box !important;
  height: 80dvh !important;
  min-height: fit-content !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;   /* inner sits in the middle */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.20) 0%, rgb(18 64 15) 100%),
    url("https://acebatt.com/wp-content/uploads/2026/07/Frame-84.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* 02. INNER FRAME */
html body .ace-industry-slider .ace-industry-inner {
  width: min(calc(1284px + 2 * var(--ace-edge)), 100%) !important;   /* children carry the edge padding */
  max-width: calc(1284px + 2 * var(--ace-edge)) !important;
  min-height: 526px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  gap: calc(48px - 2 * var(--ace-edge)) !important;   /* + padding on both sides = 48px visual gap */
}

/* 03. LEFT CONTENT */
html body .ace-industry-slider .ace-industry-content {
  position: relative !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: calc(385px + 2 * var(--ace-edge)) !important;
  min-width: 0 !important;
  height: 526px !important;
  padding-inline: var(--ace-edge) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 12px !important;
  color: #ffffff !important;
}

/* MARK: info wrapper (step + title + text) — fills the column */
html body .ace-industry-slider .ace-industry-info {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* MARK: copy (title + text) — swaps with a scale / fade, anchored bottom-right */
html body .ace-industry-slider .ace-industry-copy {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end;
  gap: 12px !important;
  min-height: 160px;
  transform-origin: 100% 100% !important;
}
html body .ace-industry-slider .ace-industry-copy.is-leaving {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
}

/* 04. STEP */
html body .ace-industry-slider .ace-industry-step {
  position: relative !important;
  margin-bottom: auto !important;         /* pushes everything else down */
  box-sizing: border-box !important;
  min-width: 48px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 2px !important;
  border-radius: 999px !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  backdrop-filter: blur(var(--ace-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--ace-glass-blur)) !important;
  font-family: "Sofia Sans Condensed", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* 05. LEFT TITLE */
html body .ace-industry-slider .ace-industry-content h2 {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-family: "Sofia Sans Condensed", "Arial Narrow", Arial, sans-serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

/* 06. LEFT DESCRIPTION */
html body .ace-industry-slider .ace-industry-content p {
  position: relative !important;
  width: 100% !important;
  max-width: 350px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

/* 07. LEFT CTA BUTTON */
html body .ace-industry-slider .ace-industry-btn {
  position: relative !important;
  flex: 0 0 auto !important;
  margin-top: 12px !important;           /* 12 gap + 12 = 24 above the CTA */
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 0 !important;
  max-height: 44px !important;
  padding: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 1px solid #2d9a27 !important;
  border-radius: 69.9px !important;
  background-color: #2d9a27 !important;
  color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}
html body .ace-industry-slider .ace-industry-btn:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #2d9a27 !important;
  transform: none !important;
}
/* MARK: CTA label */
html body .ace-industry-slider .ace-industry-btn .ace-industry-btn-text {
  padding: 0 8px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* 08. LEFT CTA BUTTON ARROW */
html body .ace-industry-slider .ace-industry-btn-arrow {
  font-size: 0 !important;
  line-height: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  transform: none !important;
  transition: transform 0.25s ease !important;
}
html body .ace-industry-slider .ace-industry-btn-arrow::before {
  content: "arrow_forward" !important;
  font-family: "Material Symbols Rounded" !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 20px !important;
  line-height: 20px !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 !important;
  -webkit-font-feature-settings: "liga" !important;
  font-feature-settings: "liga" !important;
  -webkit-font-smoothing: antialiased !important;
}
html body .ace-industry-slider .ace-industry-btn:hover .ace-industry-btn-arrow {
  transform: translateX(3px) !important;
}

/* 09. SLIDER AREA */
html body .ace-industry-slider .ace-industry-slider-area {
  position: relative !important;
  flex: 0 0 calc(var(--ace-track-w) + 2 * var(--ace-edge)) !important;
  width: calc(var(--ace-track-w) + 2 * var(--ace-edge)) !important;
  height: auto !important;
  overflow: visible !important;
  /* cards on top, nav row underneath */
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* MARK: nav row — [prev/next] [progress ......] */
html body .ace-industry-slider .ace-industry-nav {
  box-sizing: border-box !important;
  width: 100% !important;               /* = .ace-industry-track */
  padding-inline: var(--ace-edge) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
}

/* MARK: - Track (JS positions every card inside it) */
html body .ace-industry-slider .ace-industry-track {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: calc(var(--ace-n1-h) + 48px) !important;
  margin-bottom: -48px;
  overflow: hidden !important;
  /* desktop: clip at the content edge, cards may use the left padding area */
  clip-path: inset(0 var(--ace-edge) 0 0) !important;
  touch-action: pan-y !important;       /* vertical page scroll stays native */
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
html body .ace-industry-slider .ace-industry-track.is-grabbing,
html body .ace-industry-slider .ace-industry-track.is-grabbing .ace-industry-card {
  cursor: grabbing !important;
}

/* MARK: - Card
   Size is always n1. JS writes per frame:
   transform / opacity / z-index / filter on the card,
   --ace-s (scale), --ace-gm (glass end strength) and --ace-gv (visible width) as custom props,
   opacity on the two photos, the shade and the title. */
html body .ace-industry-slider .ace-industry-card {
  --ace-s: 1;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--ace-n1-w) !important;
  height: var(--ace-n1-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  transform-origin: 0 0 !important;
  will-change: transform, opacity !important;
  cursor: pointer !important;
  box-shadow: none !important;
  background: none !important;
}
html body .ace-industry-slider .ace-industry-card * {
  pointer-events: none !important;
}

/* glass: two stops, 0 → the card's VISIBLE width (--ace-gv).
   Start = --ace-glass, end = --ace-glass at --ace-gm strength
   (n1/n2: 1 = flat, n3: 0 = fades out exactly at the clip edge). */
html body .ace-industry-slider .ace-industry-card__glass {
  --ace-gm: 1;
  --ace-gv: 100%;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: linear-gradient(
    to right,
    var(--ace-glass) 0,
    color-mix(in srgb, var(--ace-glass) calc(var(--ace-gm) * 100%), transparent) var(--ace-gv)
  ) !important;
}

/* photos: sharp one for n1, pre-blurred one for n2+ (only opacities animate) */
html body .ace-industry-slider .ace-industry-card__img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0;
  transition: transform 0.35s ease !important;
  -webkit-user-drag: none !important;
}
html body .ace-industry-slider .ace-industry-card__img--soft {
  filter: blur(var(--ace-n2-img-blur)) !important;
  transform: scale(1.08) !important;    /* hides the blur's soft edges */
  transition: none !important;
}
html body .ace-industry-slider .ace-industry-card.is-active:hover .ace-industry-card__img:not(.ace-industry-card__img--soft) {
  transform: scale(1.04) !important;
}

/* white shade over the n1 photo */
html body .ace-industry-slider .ace-industry-card__shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 100%) !important;
  opacity: 0;
}

/* title: counter-scaled so the text stays the same size on every card */
html body .ace-industry-slider .ace-industry-card-title {
  position: absolute !important;
  left: calc(24px / var(--ace-s)) !important;
  bottom: calc(24px / var(--ace-s)) !important;
  z-index: 3 !important;
  width: calc(var(--ace-n1-w) * var(--ace-s) - 48px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: scale(calc(1 / var(--ace-s))) !important;
  transform-origin: 0 100% !important;
  color: #1f1f1f !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: var(--ace-card-title) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  text-align: left !important;
  opacity: 0;
}

/* 10. NAV CONTROLS */
html body .ace-industry-slider .ace-industry-controls {
  position: relative !important;
  z-index: 30 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 42px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 11. NAV BUTTONS */
html body .ace-industry-slider .ace-industry-controls button {
  box-sizing: border-box !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 42px !important;
  max-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
html body .ace-industry-slider .ace-industry-controls button:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #002a5c !important;
  transform: none !important;
}

/* 12. MATERIAL SYMBOL NAV ICONS */
html body .ace-industry-slider .ace-industry-prev::before,
html body .ace-industry-slider .ace-industry-next::before {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Material Symbols Rounded" !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 20px !important;
  color: currentColor !important;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 !important;
  -webkit-font-feature-settings: "liga" !important;
  font-feature-settings: "liga" !important;
  -webkit-font-smoothing: antialiased !important;
}
html body .ace-industry-slider .ace-industry-prev::before { content: "arrow_back" !important; }
html body .ace-industry-slider .ace-industry-next::before { content: "arrow_forward" !important; }
html body .ace-industry-slider .ace-industry-controls button::after {
  display: none !important;
  content: none !important;
}

/* 13. PROGRESS BAR — thumb follows the slider position (JS) */
html body .ace-industry-slider .ace-industry-progress {
  position: relative !important;     /* thumb is absolute inside it */
  flex: 1 1 auto !important;         /* fills the rest of the nav row */
  min-width: 0 !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.20) !important;
  overflow: visible !important;
  cursor: pointer !important;
  touch-action: none !important;
}
html body .ace-industry-slider .ace-industry-thumb {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 12.5%;                      /* JS sets 100% / total */
  min-width: 34% !important;
  max-width: 50dvw !important;
  border-radius: 999px !important;
  background: white !important;
  cursor: grab !important;
  will-change: transform !important; /* JS moves it every frame, no transition */
}
html body .ace-industry-slider .ace-industry-thumb.is-dragging {
  cursor: grabbing !important;
}
/* bigger hit area than 4px */
html body .ace-industry-slider .ace-industry-progress::before,
html body .ace-industry-slider .ace-industry-thumb::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px 0 !important;
}

/* MARK: - Tablet (≤1200) — content on top, cards below, swipe + line */
@media (max-width: 1200px) {
  html body .ace-industry-slider {
    --ace-edge: 24px;
    padding: 64px 0 120px !important;
  }

  /* inner — edge to edge, children carry the edge padding */
  html body .ace-industry-slider .ace-industry-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin-inline: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 48px !important;
  }

  /* content — full width, [info ........ button] */
  html body .ace-industry-slider .ace-industry-content {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 24px !important;
  }
  html body .ace-industry-slider .ace-industry-btn {
    margin-top: 0 !important;
    flex: 0 0 auto !important;
  }
  html body .ace-industry-slider .ace-industry-step { margin-bottom: 20px !important; }
  html body .ace-industry-slider .ace-industry-content p { max-width: 520px !important; }

  /* slider — full width, no prev/next */
  html body .ace-industry-slider .ace-industry-slider-area {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .ace-industry-slider .ace-industry-controls { display: none !important; }

  /* cards run to the right screen edge */
  html body .ace-industry-slider .ace-industry-track {
    clip-path: none !important;
  }
}

/* MARK: - Mobile (≤768) */
@media (max-width: 768px) {
  html body .ace-industry-slider {
    --ace-n1-w: min(368px, calc(100dvw - 72px));
    --ace-n2-w: calc(var(--ace-n1-w) - 32px);
    --ace-card-title: 20px;
  }
  html body .ace-industry-slider .ace-industry-content h2 { font-size: 42px !important; }
  html body .ace-industry-slider .ace-industry-content p { font-size: 16px !important; }

  /* content back to a column, everything full width */
  html body .ace-industry-slider .ace-industry-content {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  html body .ace-industry-slider .ace-industry-btn {
    width: 100% !important;
    margin-top: 12px !important;          /* 24px above, same as desktop */
  }
}