/* Brand tokens from Leanne's 17 Jul email: Helvetica headings, Space Grotesk
   subheadings, Gordita body. Black/white only, logo green (#72aa4a) in text. */
:root {
  --gg-green: #72aa4a;
}


/* Homepage hero: large editorial type over the original background footage. */
.elementor-element-eaa77c1.hero-redesign {
  --min-height: max(760px, 100svh) !important;
  position: relative;
  height: var(--min-height);
  min-height: var(--min-height) !important;
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  background: #07100b !important;
}

.elementor-element-eaa77c1.hero-redesign > .elementor-background-video-container {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.elementor-element-eaa77c1.hero-redesign > .elementor-background-video-container video {
  position: absolute;
  inset: 0 !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center;
  transform: scale(1.08) !important;
}

.elementor-element-eaa77c1.hero-redesign::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  opacity: 0 !important;
  background: none !important;
  pointer-events: none;
}

.elementor-element-eaa77c1.hero-redesign .elementor-element-8e39d7d {
  --content-width: 1760px;
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: var(--min-height);
  padding: 0 !important;
}

.elementor-element-eaa77c1.hero-redesign .elementor-element-8e39d7d > .e-con-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1760px;
  min-height: var(--min-height);
  margin: 0 auto;
  padding: clamp(54px, 7vh, 88px) clamp(28px, 4.5vw, 88px);
}

.elementor-element-eaa77c1.hero-redesign .elementor-element-17198eb {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Hero eyebrow (17.7 notes): Space Grotesk welcome line above the H1.
   18.7 notes: the W of WELCOME must line up exactly with the P of
   Pioneering. Both are pulled left by their own glyph side bearing (in
   em, so it holds at every clamp size), which puts both ink edges flush
   on the container padding edge. Measured: W in Space Grotesk = 0.037em,
   P in Helvetica Light = 0.078em. */
.elementor-element-eaa77c1.hero-redesign .hero-eyebrow {
  margin: 0 0 18px;
  margin-left: -0.037em;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgb(0 0 0 / 55%);
}

/* Hero heading: Helvetica, white only (brand: green stays to small doses). */
.elementor-element-eaa77c1.hero-redesign .elementor-element-17198eb .elementor-heading-title {
  max-width: 1550px;
  margin-left: -0.078em;
  color: #fff !important;
  font-family: 'HelveticaW01', Helvetica, Arial, sans-serif !important;
  font-size: clamp(52px, 5.5vw, 88px) !important;
  font-weight: 300;
  letter-spacing: -0.015em !important;
  line-height: 1.02;
  text-shadow: 0 2px 24px rgb(0 0 0 / 55%);
  text-transform: none !important;
}

.elementor-element-eaa77c1.hero-redesign .elementor-element-17198eb .elementor-heading-title span {
  display: block;
}

.elementor-element-eaa77c1.hero-redesign .elementor-element-17198eb .elementor-heading-title span:last-child {
  color: #fff;
}

@media (max-width: 1100px) {
  .elementor-element-eaa77c1.hero-redesign .elementor-element-17198eb .elementor-heading-title {
    font-size: clamp(46px, 6.4vw, 68px) !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-eaa77c1.hero-redesign {
    --min-height: max(680px, 100svh) !important;
  }

  .elementor-element-eaa77c1.hero-redesign > .elementor-background-video-container {
    display: block !important;
  }

  .elementor-element-eaa77c1.hero-redesign > .elementor-background-video-container video {
    object-position: 59% center;
  }

  .elementor-element-eaa77c1.hero-redesign .elementor-element-8e39d7d > .e-con-inner {
    padding: 52px 22px 34px;
  }

  .elementor-element-eaa77c1.hero-redesign .elementor-element-17198eb .elementor-heading-title {
    font-size: clamp(36px, 9.4vw, 48px) !important;
    line-height: 1.05;
  }
}

/* Energy statistics: white background, black text, green figures.
   Intro aligned with the top of the first stat row, no 01-04 numbering. */
.elementor-element-959f470 {
  background: #fff !important;
  color: #000;
  padding: clamp(18px, 1.8vw, 30px) 10px !important;
  /* The slide-in start state (translateX) must never widen the page */
  overflow-x: clip;
}

.elementor-element-959f470 > .e-con-inner {
  /* The captured Elementor vars add another 60/70px — the section's own
     clamp() padding is the single source of vertical space here. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(430px, 0.95fr) minmax(0, 1.05fr) !important;
  grid-template-areas: "introduction statistics" !important;
  gap: clamp(40px, 4vw, 64px) !important;
  align-items: start !important;
  /* Match the black introduction section's page grid. */
  width: min(100%, 1850px) !important;
  max-width: 1850px !important;
}

.elementor-element-959f470 .home-stats-intro {
  grid-area: introduction;
  align-self: start;
  padding-top: 6px;
}

.elementor-element-959f470 .elementor-element-6320e13 {
  margin-bottom: 14px !important;
}

.elementor-element-959f470 .elementor-element-298c6ed {
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 0 !important;
}

.elementor-element-959f470 .elementor-element-298c6ed .elementor-heading-title {
  font-size: clamp(44px, 4.3vw, 69px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.elementor-element-959f470 .elementor-element-d3486e7 {
  grid-area: statistics;
  display: block !important;
  width: 100% !important;
  border-top: 1px solid rgb(0 0 0 / 22%);
}

.elementor-element-959f470 .elementor-heading-title,
.elementor-element-959f470 .elementor-image-box-title {
  color: #000 !important;
}

.elementor-element-959f470 .elementor-element-6320e13 .elementor-heading-title {
  color: #000 !important;
}

.elementor-element-959f470 .energyBox {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

.elementor-element-959f470 .borderBox {
  display: block !important;
  min-height: 88px;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgb(0 0 0 / 22%);
  background: transparent !important;
}

.elementor-element-959f470 .borderBox::before {
  display: none !important;
}

.elementor-element-959f470 .doubleLine {
  display: none !important;
}

.elementor-element-959f470 .box {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.elementor-element-959f470 .box::before,
.elementor-element-959f470 .box::after {
  display: none !important;
}

.elementor-element-959f470 .elementor-image-box-content {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 46px);
  align-items: center;
  text-align: left;
}

.elementor-element-959f470 .elementor-image-box-title,
.elementor-element-959f470 .elementor-image-box-description {
  margin: 0 !important;
  text-align: left !important;
}

/* Figures in the brand green, as requested. */
.elementor-element-959f470 .elementor-image-box-title label {
  color: var(--gg-green);
  font-size: clamp(40px, 4vw, 62px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.elementor-element-959f470 .elementor-image-box-description {
  max-width: 430px;
  color: #000 !important;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
}

/* Stat rows slide in one by one from the right. The hidden start state only
   applies once our JS tags the column (.stats-anim), so rows are never lost
   if scripts fail; .stats-anim-in is added by an IntersectionObserver.
   !important is required to out-rank the global "* { transition: none }"
   animation kill-switch in additional1.css. */
@media (prefers-reduced-motion: no-preference) {
  .elementor-element-959f470 .stats-anim .energyBox {
    opacity: 0;
    transform: translateX(72px) !important;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }

  .elementor-element-959f470 .stats-anim.stats-anim-in .energyBox {
    opacity: 1;
    transform: none !important;
  }

  .elementor-element-959f470 .stats-anim .energyBox:nth-child(1) { transition-delay: 0.15s !important; }
  .elementor-element-959f470 .stats-anim .energyBox:nth-child(2) { transition-delay: 0.4s !important; }
  .elementor-element-959f470 .stats-anim .energyBox:nth-child(3) { transition-delay: 0.65s !important; }
  .elementor-element-959f470 .stats-anim .energyBox:nth-child(4) { transition-delay: 0.9s !important; }
}

/* Subterranean (17.7 notes): copy and video share one column width, gentle
   fade-up reveal (distinct from the stats slide-in), Read more → Sub-BESS. */
.elementor-element-6581f6c .elementor-element-47d43be {
  width: min(100%, 1180px);
  margin-left: auto !important;
  margin-right: auto !important;
}

.elementor-element-6581f6c .elementor-element-31b7b92 video {
  width: min(100%, 1180px);
  margin: clamp(22px, 3vw, 36px) auto 0;
}

.elementor-element-6581f6c .protect-readmore {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/* The shared button2 style assumes a dark section — this one is white. */
.elementor-element-6581f6c .protect-readmore .elementor-button,
.elementor-element-6581f6c .protect-readmore .elementor-button-text {
  color: #000 !important;
}

/* Arrow sits to the right of the label, matching every other button. */
.elementor-element-6581f6c .protect-readmore .elementor-button-content-wrapper {
  flex-direction: row-reverse;
  gap: 10px;
}

.elementor-element-6581f6c .protect-readmore svg path {
  fill: #000 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .protectWrap .protect-anim > * {
    opacity: 0;
    transform: translateY(34px) !important;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }

  .protectWrap .protect-anim.protect-anim-in > * {
    opacity: 1;
    transform: none !important;
  }

  .protectWrap .protect-anim > *:nth-child(2) { transition-delay: 0.12s !important; }
  .protectWrap .protect-anim > *:nth-child(3) { transition-delay: 0.24s !important; }
  .protectWrap .protect-anim > *:nth-child(4) { transition-delay: 0.36s !important; }
  .protectWrap .protect-anim > *:nth-child(5) { transition-delay: 0.48s !important; }
}

/* Smart BESS (17.7 notes): heading spans the full section width, video and
   copy sit side by side below it. */
.elementor-element-84f32c8 .smart-heading {
  width: 100%;
  margin-bottom: clamp(18px, 2.4vw, 34px);
}

.elementor-element-84f32c8 .smart-heading .elementor-element-9770cba {
  margin-bottom: 0 !important;
}

/* Smart BESS: square corners for continuity with the rest of the brand. */
.elementor-element-84f32c8 .elementor-element-1f1757e {
  align-items: center !important;
}

.elementor-element-84f32c8 .elementor-element-7a276ee {
  overflow: hidden;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.elementor-element-84f32c8 .elementor-element-7a276ee video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

/* Products grid: the bullet lists only appear on hover, which touch
   devices don't have. On touch / small screens the info is always
   shown, with the photo eased toward the black card (the same shift
   the desktop hover applies) so the white text stays legible.
   Desktop pointer behaviour is untouched. */
@media (hover: none), (max-width: 1024px) {
  .solutionsWrap .box .elementor-widget-text-editor {
    opacity: 1 !important;
  }

  .solutionsWrap .box .group:before {
    opacity: 0.42 !important;
  }

  .solutionsWrap .elementor-widget-text-editor ul li {
    text-shadow: 0 1px 12px rgb(0 0 0 / 65%);
  }
}

/* Smart BESS: on stacked (tablet/phone) layouts the video sits flush
   against the black Products section below — give the white section
   breathing room so the video reads as its own block. */
@media (max-width: 1024px) {
  .elementor-element-84f32c8 {
    padding-bottom: 52px !important;
  }

  .elementor-element-84f32c8 .elementor-element-7a276ee {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) {
  .elementor-element-959f470 > .e-con-inner {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "introduction"
      "statistics" !important;
    gap: 32px !important;
  }

  .elementor-element-959f470 .elementor-element-d3486e7 {
    margin-top: 0;
  }

  .elementor-element-959f470 .elementor-element-298c6ed .elementor-heading-title {
    font-size: clamp(42px, 6.4vw, 56px);
  }

  .elementor-element-84f32c8 .elementor-element-7a276ee {
    margin-top: 28px;
  }
}

@media (max-width: 767px) {
  .elementor-element-959f470 {
    padding: 30px 20px !important;
  }

  .elementor-element-959f470 .borderBox {
    min-height: 0;
    padding: 22px 0 !important;
  }

  .elementor-element-959f470 .elementor-image-box-content {
    display: block;
  }

  .elementor-element-959f470 .elementor-image-box-title {
    margin-bottom: 10px !important;
  }

  .elementor-element-959f470 .elementor-image-box-title label {
    font-size: clamp(38px, 12vw, 50px);
  }

  .elementor-element-959f470 .elementor-element-298c6ed .elementor-heading-title {
    font-size: clamp(38px, 10vw, 46px);
  }
}

/* USP snapshot: stacking cards on the left, sticky heading on the right
   (layout per Leanne's sketch, 17 Jul). White square cards, black icon tile.
   The theme's .wrapperOuter{overflow:hidden} would trap the sticky sections,
   so it must not become a scroll container — but dropping it to plain
   visible let iOS Safari pan the homepage sideways into blank space
   (iOS ignores body{overflow-x:hidden} for touch panning; the wrapper was
   the only clamp it honoured). overflow-x: clip keeps the horizontal clamp
   without creating a scroll container, so sticky still works; older
   browsers that don't know clip fall back to visible, i.e. today's
   behaviour. */
body.home .wrapperOuter {
  overflow: visible;
  overflow-x: clip;
}

.elementor-element-912cf3f {
  position: relative;
  padding: 0 !important;
  overflow: visible !important;
  background: #050505 !important;
}

.elementor-element-912cf3f > .e-con-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  width: 100% !important;
  max-width: 1600px !important;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px) !important;
  overflow: visible !important;
}

/* Sticky intro column on the right. */
.elementor-element-912cf3f .usp-stack-intro {
  position: sticky;
  top: 0;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Intro aligns with the top edge of the cards (17.7 notes): the card top
     sits at (viewport − card height)/2 − 4vh, mirrored here as padding. */
  justify-content: flex-start;
  height: 100vh;
  height: 100svh;
  min-height: 650px;
  padding: 40px 0 40px clamp(36px, 4.5vw, 90px);
  padding-top: calc((100vh - min(620px, 74vh)) / 2 - 4vh);
  padding-top: calc((100svh - min(620px, 74vh)) / 2 - 4vh);
  text-align: left;
}

.elementor-element-912cf3f .elementor-element-882f42d,
.elementor-element-912cf3f .elementor-element-34d0356 {
  width: 100%;
  margin: 0 !important;
}

.elementor-element-912cf3f .elementor-element-882f42d .elementor-heading-title {
  color: var(--gg-green) !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.elementor-element-912cf3f .elementor-element-34d0356 {
  margin-top: 18px !important;
}

.elementor-element-912cf3f .elementor-element-34d0356 .elementor-heading-title {
  max-width: 15ch;
  margin: 0;
  color: #fff !important;
  font-size: clamp(40px, 4.3vw, 69px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
}

/* Cards column on the left. */
.elementor-element-912cf3f .elementor-element-0bb6583 {
  counter-reset: usp-card;
  grid-column: 1;
  grid-row: 1;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.elementor-element-912cf3f .elementor-element-0bb6583 > .energyBox {
  --stack-offset: 0px;
  --stack-scale: 1;
  --stack-image-scale: 1.45;
  counter-increment: usp-card;
  position: sticky !important;
  top: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100vh;
  height: 100svh;
  min-height: 650px;
  margin: 0 !important;
  padding: 0 clamp(24px, 3vw, 56px) 0 0 !important;
  background: transparent !important;
}

/* The card itself: white, square, icon tile on top, text underneath. */
.elementor-element-912cf3f .energyBox > .borderBox {
  position: relative;
  top: calc(-4vh + var(--stack-offset));
  display: flex !important;
  align-items: stretch !important;
  width: min(100%, 560px) !important;
  height: min(620px, 74vh);
  min-height: 480px !important;
  margin: 0 auto;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 30px 80px rgb(0 0 0 / 45%);
  transform: scale(var(--stack-scale));
  transform-origin: top center;
  will-change: transform;
}

.elementor-element-912cf3f .energyBox > .borderBox::before {
  content: counter(usp-card, decimal-leading-zero) "  /  10";
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 28px;
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.elementor-element-912cf3f .energyBox > .borderBox > .borderBox {
  display: contents !important;
}

.elementor-element-912cf3f .energyBox .box {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  padding: 62px 36px 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.elementor-element-912cf3f .energyBox .box::before {
  display: none !important;
}

.elementor-element-912cf3f .energyBox .elementor-image-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  height: 100%;
  text-align: center;
}

.elementor-element-912cf3f .energyBox .elementor-image-box-img {
  flex: 1;
  display: grid;
  place-items: center;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #0a0a0a;
}

.elementor-element-912cf3f .energyBox .elementor-image-box-img img {
  width: min(42%, 170px);
  height: 180px;
  object-fit: contain;
  transform: scale(var(--stack-image-scale));
  will-change: transform;
}

.elementor-element-912cf3f .energyBox .elementor-image-box-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  text-align: center;
}

/* Card copy stays in Gordita at body-text scale. */
.elementor-element-912cf3f .energyBox .elementor-image-box-title {
  max-width: 30ch;
  margin: 0 !important;
  color: #000 !important;
  font-family: 'Gordita', sans-serif !important;
  font-size: clamp(19px, 1.5vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 1024px) {
  .elementor-element-912cf3f > .e-con-inner {
    display: block !important;
    padding: 0 24px !important;
  }

  .elementor-element-912cf3f .usp-stack-intro {
    position: static;
    height: auto;
    min-height: 0;
    padding: 64px 4px 8px;
    align-items: flex-start;
  }

  .elementor-element-912cf3f .elementor-element-34d0356 .elementor-heading-title {
    max-width: 850px;
    font-size: clamp(42px, 6.4vw, 56px);
  }

  .elementor-element-912cf3f .elementor-element-0bb6583 > .energyBox {
    min-height: 620px;
    padding: 0 !important;
  }

  .elementor-element-912cf3f .energyBox > .borderBox {
    width: min(100%, 560px) !important;
    height: min(560px, 68vh);
  }
}

@media (max-width: 767px) {
  .elementor-element-912cf3f > .e-con-inner {
    padding: 0 16px !important;
  }

  .elementor-element-912cf3f .usp-stack-intro {
    padding: 48px 4px 4px;
  }

  .elementor-element-912cf3f .elementor-element-34d0356 .elementor-heading-title {
    font-size: clamp(34px, 9.4vw, 44px);
  }

  .elementor-element-912cf3f .elementor-element-0bb6583 > .energyBox {
    min-height: 580px;
  }

  .elementor-element-912cf3f .energyBox > .borderBox {
    top: calc(-3vh + var(--stack-offset));
    width: 100% !important;
    height: min(540px, 74svh);
    min-height: 420px !important;
  }

  .elementor-element-912cf3f .energyBox > .borderBox::before {
    top: 20px;
    left: 22px;
  }

  .elementor-element-912cf3f .energyBox .box {
    padding: 54px 22px 28px !important;
  }

  .elementor-element-912cf3f .energyBox .elementor-image-box-img img {
    width: 105px;
    height: 112px;
  }

  .elementor-element-912cf3f .energyBox .elementor-image-box-title {
    font-size: clamp(17px, 4.8vw, 21px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-element-912cf3f .elementor-element-0bb6583 {
    padding: 0 0 70px !important;
  }

  .elementor-element-912cf3f .elementor-element-0bb6583 > .energyBox {
    position: relative !important;
    top: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 24px !important;
    padding: 0 !important;
  }

  .elementor-element-912cf3f .energyBox > .borderBox {
    top: auto;
    margin: auto;
    transform: none;
  }

  .elementor-element-912cf3f .energyBox .elementor-image-box-img img {
    transform: none;
  }
}

/* Applications: sliding gallery of the application-page hero videos,
   title overlay links through to the page. White section, black heading. */
.app-gallery-section {
  padding: clamp(44px, 4vw, 76px) 0;
  background: #fff;
}

.app-gallery-section .app-gallery-head {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 0 40px;
}

.app-gallery-section .app-gallery-head h2 {
  margin: 0 0 clamp(28px, 3vw, 48px);
  color: #000;
  font-size: clamp(44px, 4.3vw, 69px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.app-gallery-viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/* 18.7 notes: while the gallery drifts on its own continuous loop (class set
   by usp-stack.js), the strip is moved by a transform on the track instead of
   native scrolling, so the viewport just clips. pan-y hands horizontal touch
   pans to the script while vertical still scrolls the page. */
.app-gallery-looping .app-gallery-viewport {
  overflow-x: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
}

.app-gallery-looping .app-gallery-track {
  will-change: transform;
}

.app-gallery-viewport::-webkit-scrollbar {
  display: none;
}

.app-gallery-track {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  width: max-content;
  padding: 0 max(40px, calc((100vw - 1600px) / 2 + 40px));
}

.app-gallery-item {
  position: relative;
  flex: 0 0 auto;
  width: min(50vw, 720px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  scroll-snap-align: center;
  display: block;
  background: #000;
  text-decoration: none;
}

.app-gallery-item video,
.app-gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 28%);
  transition: background 0.3s ease !important;
}

.app-gallery-item:hover::after {
  background: rgb(0 0 0 / 14%);
}

.app-gallery-item .app-gallery-title {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff;
  font-family: 'HelveticaW01', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 2px 18px rgb(0 0 0 / 45%);
}

.app-gallery-nav {
  display: flex;
  justify-content: flex-end;
  gap: 26px;
  width: min(100%, 1600px);
  margin: clamp(20px, 2vw, 32px) auto 0;
  padding: 0 40px;
}

.app-gallery-nav button {
  padding: 6px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.app-gallery-nav button svg {
  width: 34px;
  height: 22px;
  fill: #000;
  /* !important out-ranks the global transition kill-switch in additional1.css */
  transition: fill 0.25s ease !important;
}

/* 18.7 notes: arrows go brand green on hover, like the footer links. */
.app-gallery-nav button:hover svg,
.app-gallery-nav button:focus-visible svg {
  fill: #73A94A;
}

@media (max-width: 767px) {
  .app-gallery-section .app-gallery-head,
  .app-gallery-nav {
    padding: 0 20px;
  }

  .app-gallery-track {
    padding: 0 20px;
  }

  .app-gallery-item {
    width: 72vw;
  }

  .app-gallery-item .app-gallery-title {
    font-size: clamp(22px, 6.4vw, 30px);
  }
}

/* ===== Energy journey: scroll-scrubbed video section (systemWrap) ===== */
/* The static markup keeps the original layout as a fallback; everything
   below applies only once usp-stack.js activates the journey. */

.energy-journey.journey-active {
  display: block;
  position: relative;
  /* Journey length = scroll distance per scene; taller = slower pacing */
  height: 600vh;
  /* The static fallback's background (a zoomed still of the looping video)
     must never peek out around the sticky stage — iOS Safari exposes a strip
     below it while the toolbar collapses/expands. Active journeys are black. */
  background: #000 !important;
}

/* Scene snapping: flings are forced to stop at each scene (snap-stop below),
   so a single flick can never skip a title. Proximity (not mandatory) so
   positions away from the markers scroll completely normally — the only snap
   areas on the page are the journey's markers. */
html.journey-snap {
  scroll-snap-type: y proximity;
}

/* Touch devices keep their native momentum scroll: no snapping, ever.
   (The script already skips snap setup for coarse pointers; this covers
   any browser that misreports its pointer capabilities.) */
@media (hover: none), (pointer: coarse) {
  html.journey-snap {
    scroll-snap-type: none;
  }

  .energy-journey.journey-active .journey-snap-point {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
}

.energy-journey.journey-active .journey-snap-point {
  position: absolute;
  left: 0;
  width: 1px;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  pointer-events: none;
}

.energy-journey.journey-active > .elementor-background-video-container {
  position: sticky !important;
  top: 0;
  /* lvh: as tall as the largest mobile viewport, so the stage still covers
     the whole screen when iOS Safari's toolbar collapses (100svh left a gap
     at the bottom that showed the section behind it); same as vh on desktop */
  height: 100vh;
  height: 100lvh;
  width: 100%;
  overflow: hidden;
  opacity: 1 !important;
}

.energy-journey.journey-active > .elementor-background-video-container {
  /* The poster still sits behind the video, so the stage is never a black
     hole while frames buffer on a slow connection — and when autoplay is
     refused outright (blocked class below) the section reads as a designed
     still image rather than a broken player. */
  background-image: url("/static/wp-content/uploads/energy-generation-big-image.jpg");
  background-size: cover;
  background-position: center;
}

.energy-journey.journey-active > .elementor-background-video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none; /* Elementor centers hosted videos with translate(-50%,-50%) */
}


/* Legibility layers: slight overall dim, stronger wash behind the left-hand
   journey text, bottom fade into the black section below, soft vignette */
.energy-journey.journey-active > .elementor-background-video-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgb(0 0 0 / 14%), rgb(0 0 0 / 14%)),
    linear-gradient(to right, rgb(0 0 0 / 48%) 0%, rgb(0 0 0 / 18%) 42%, rgb(0 0 0 / 0%) 68%),
    linear-gradient(to bottom, rgb(0 0 0 / 0%) 80%, rgb(0 0 0 / 85%) 100%),
    radial-gradient(ellipse at center, rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 32%) 100%);
  pointer-events: none;
}

/* End-of-journey dim: the script ramps --journey-dim to 1 over the final
   stretch so the stage is fully black before the sticky handoff cuts it */
.energy-journey.journey-active > .elementor-background-video-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: var(--journey-dim, 0);
  pointer-events: none;
}

/* The text box becomes a second sticky layer over the video stage. Its
   height stays 100svh so the titles always sit inside the visible area even
   with the toolbar expanded; the negative margin matches the stage's flow
   height (100lvh) so the two sticky layers start at the same spot. */
.energy-journey.journey-active > .textBox {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-top: -100vh;
  margin-top: -100lvh;
  z-index: 2;
  pointer-events: none;
  padding: 0 !important;
}

/* The journey in writing: all three stages stacked on the left, joined by a
   rail that fills green with progress. The active stage is lit full-white. */
.energy-journey.journey-active > .textBox > .e-con-inner {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Spread the stages over the stage height so each title sits beside its
     part of the video: generation top, storage middle, distribution bottom */
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(130px, 19vh, 210px) 0 clamp(70px, 11vh, 130px) clamp(64px, 9vw, 160px);
}

.energy-journey.journey-active > .textBox > .e-con-inner::before,
.energy-journey.journey-active > .textBox > .e-con-inner::after {
  content: "";
  position: absolute;
  left: calc(clamp(64px, 9vw, 160px) - 30px);
  top: var(--journey-rail-top, 30%);
  height: var(--journey-rail-height, 40%);
  width: 2px;
}

.energy-journey.journey-active > .textBox > .e-con-inner::before {
  background: rgb(255 255 255 / 22%);
}

/* Green energy fill, top-down with scroll progress */
.energy-journey.journey-active > .textBox > .e-con-inner::after {
  background: #22be0d;
  box-shadow: 0 0 14px rgb(34 190 13 / 75%);
  transform: scaleY(var(--journey-line, 0));
  transform-origin: top;
}

.energy-journey.journey-active > .textBox > .e-con-inner > .e-con {
  position: static;
  display: block;
  padding: 0 !important;
  opacity: var(--journey-opacity, 0.35);
  transform: scale(var(--journey-scale, 0.94));
  transform-origin: left center;
  will-change: opacity, transform;
}


/* Neutralise the old Elementor motion-fx on the titles; the rows animate instead */
.energy-journey.journey-active .subTitle {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.energy-journey.journey-active .subTitle p {
  margin: 0;
  font-family: 'HelveticaW01', Helvetica, Arial, sans-serif;
  font-weight: 300;
  /* This title is intentionally much larger than the shared eyebrow tier. */
  font-size: clamp(36px, 4vw, 68px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 20px rgb(0 0 0 / 55%);
}

/* The journey runs identically on phones: the video stage (hidden by
   Elementor's mobile class in the static fallback) is shown whenever
   the journey is active, and the rail/titles tighten to the viewport. */
@media (max-width: 767px) {
  .energy-journey.journey-active > .elementor-background-video-container {
    display: block !important;
  }

  .energy-journey.journey-active {
    min-height: 0;
  }

  .energy-journey.journey-active > .textBox > .e-con-inner {
    padding: clamp(110px, 17vh, 170px) 18px clamp(64px, 10vh, 120px) 58px;
  }

  .energy-journey.journey-active > .textBox > .e-con-inner::before,
  .energy-journey.journey-active > .textBox > .e-con-inner::after {
    left: 30px;
  }

  .energy-journey.journey-active .subTitle p {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
}