/* ══════════════════════════════
  HERO BANNER
══════════════════════════════ */
.hero-swiper{
  width:100%;
  height:calc(100vh - var(--header-h, 0px));
  min-height:480px;
  position:relative;
  overflow:hidden;
  margin-top: var(--header-h, 0px);
}
.hero-swiper .swiper-wrapper{
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-swiper .swiper-slide{
  position:relative;
  overflow:hidden;
  height:100%;
  /* Soft band behind contain letterboxing / parallax peek — not black */
  background:#ebe8e2;
}

/* Oversized media — same parallax bleed; JS still translates this layer */
.hero-swiper .slide-media{
  position:absolute;
  top:0;
  left:-15%;
  width:130%;
  height:100%;
  z-index:0;
  will-change:transform;
}
/* Fit picture to the visible slide (100/130 of media) so the full image shows */
.hero-swiper .bannerinner-picture{
  position:absolute;
  inset:auto;
  top:0;
  left:50%;
  width:calc(100% / 1);
  height:100%;
  transform:translateX(-50%);
  display:block;
  margin:0;
}
.hero-swiper .slide-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  display:block;
}

.slide-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* Side fade for text only — light vertical so letterboxing stays soft */
  background:
    linear-gradient(90deg, rgba(10,10,8,0.08) 0%, rgba(10,10,8,0.02) 38%, rgba(10,10,8,0.35) 62%, rgba(10,10,8,0.5) 100%),
    linear-gradient(0deg, rgba(6,6,5,0.12) 0%, rgba(6,6,5,0) 35%, rgba(6,6,5,0.04) 100%);
}
.swiper-slide:has(.slide-copy--left) .slide-scrim{
  background:
    linear-gradient(270deg, rgba(10,10,8,0.08) 0%, rgba(10,10,8,0.02) 38%, rgba(10,10,8,0.35) 62%, rgba(10,10,8,0.5) 100%),
    linear-gradient(0deg, rgba(6,6,5,0.12) 0%, rgba(6,6,5,0) 35%, rgba(6,6,5,0.04) 100%);
}

.hero-swiper .slide-copy{
  position:relative;
  z-index:2;
  height:100%;
}
.hero-swiper .slide-content{
  padding-bottom:0rem;
}

/* Slide content column alignment (static — motion now comes from Swiper's
   native parallax module on the data-swiper-parallax-tagged children) */
.hero-swiper .slide-copy--right .slide-content{
  margin-left:auto;
  margin-right:0;
  position: relative;
}
.hero-swiper .slide-copy--left .slide-content{
  margin-right:auto;
  margin-left:0;
}

.hero-pag-wrap{
  position:absolute;
  left:50%;
  bottom:70px;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  pointer-events:auto;
}
.hero-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.hero-pagination .swiper-pagination-bullet{
  width:8px;
  height:8px;
  border-radius:9999px;
  background:rgba(255,255,255,0.55);
  opacity:1;
  margin:0 !important;
  transition: width .45s var(--ease, cubic-bezier(.22,1,.36,1)), background-color .3s ease;
  cursor:pointer;
}
.hero-pagination .swiper-pagination-bullet-active{
  width:28px;
  background: var(--color-secondary, #ED1C24);
}

.cta-panel{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.06);
  border-top:1px solid rgba(255,255,255,0.25);
  border-left:1px solid rgba(255,255,255,0.14);
}
.cta-arrow{ transition: transform .35s cubic-bezier(0.16,1,0.3,1), background-color .35s ease;}
.cta-panel:hover .cta-arrow{ transform: translateX(4px); background:#fff;}
.cta-panel:hover .cta-arrow svg{ stroke:#111; }

.hero-pag-wrap .swiper-button-prev,
.hero-pag-wrap .swiper-button-next{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  margin:0 !important;
  width:32px;
  height:32px;
  color:#fff;
  opacity:0.9;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  transition:
    opacity .3s ease,
    transform .3s ease,
    background-color .3s ease,
    box-shadow .3s ease;
  z-index:1;
  border:0;
  border-radius:9999px;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);
  flex-shrink:0;
  cursor:pointer;
  --swiper-navigation-size: 0px;
  font-size:0;
}
/* Kill Swiper default font/SVG chevrons */
.hero-pag-wrap .swiper-button-prev:after,
.hero-pag-wrap .swiper-button-next:after,
.hero-pag-wrap .swiper-button-prev:before,
.hero-pag-wrap .swiper-button-next:before{
  content:"" !important;
  display:none !important;
  font-size:0 !important;
  width:0 !important;
  height:0 !important;
  opacity:0 !important;
}
.hero-pag-wrap .swiper-button-prev .swiper-navigation-icon,
.hero-pag-wrap .swiper-button-next .swiper-navigation-icon,
.hero-pag-wrap .swiper-button-prev svg:not(.hero-nav-arrow),
.hero-pag-wrap .swiper-button-next svg:not(.hero-nav-arrow){
  display:none !important;
}
.hero-pag-wrap .swiper-button-prev img,
.hero-pag-wrap .swiper-button-next img{
  width:13px;
  height:auto;
  display:block;
  position:relative;
  z-index:1;
  /* SVG is dark fill — make it white on the hero */
  filter:brightness(0) invert(1);
}
.hero-pag-wrap .swiper-button-prev img{
  transform:rotate(180deg);
}
.hero-pag-wrap .swiper-button-prev:hover,
.hero-pag-wrap .swiper-button-next:hover,
.hero-pag-wrap .swiper-button-prev:focus-visible,
.hero-pag-wrap .swiper-button-next:focus-visible{
  opacity:1;
  outline:none;
  background:rgba(255,255,255,0.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22);
}
.hero-pag-wrap .swiper-button-prev:active,
.hero-pag-wrap .swiper-button-next:active{
  transform:scale(0.96);
  background:rgba(255,255,255,0.26);
}
.hero-swiper .slide-content .hero-para{
  color:#fff;
  font-size: var(--text-p);
  margin-top: 20px;
  max-width: 36rem;
  margin-left: auto;
}
.banner-extra-logo-wrap {  position:absolute; right:0; top: -7vw;}
.outer-hero-button{
  position:absolute;
  bottom:0;
  right:0;
  z-index:5;
  padding:15px 20px;
  /* motion now comes from Swiper's native parallax (data-swiper-parallax="500", set in JS) */
}

/* ══════════════════════════════
  PRODUCTS SECTION
══════════════════════════════ */





@media (min-width: 768px){
  .hero-swiper .slide-content .hero-para{ margin-left: 0; }
}
@media (max-width: 768px){
  .hero-swiper{ min-height:520px; }
  .hero-pag-wrap {
    bottom: 90px;
    gap: 10px;
  }
  .hero-pag-wrap .swiper-button-prev,
  .hero-pag-wrap .swiper-button-next{
    width:30px;
    height:30px;
  }
  .hero-pag-wrap .swiper-button-prev img,
  .hero-pag-wrap .swiper-button-next img{
    width:12px;
  }
  .outer-hero-button {padding: 12px 18px;}
  .banner-extra-logo-wrap img{max-width: 60px;}
  .banner-logo-wrap img{max-width: 110px;}
  .banner-extra-logo-wrap {top: -12vw;}
  .slide-scrim { background:
  linear-gradient(
    180deg,
    rgba(10, 10, 8, 0.2) 0%,
    rgba(10, 10, 8, 0.08) 45%,
    rgba(10, 10, 8, 0.02) 100%
  ),
  linear-gradient(
    0deg,
    rgba(6, 6, 5, 0.14) 0%,
    rgba(6, 6, 5, 0.04) 50%,
    rgba(6, 6, 5, 0) 100%
  );
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-swiper .swiper-wrapper{ transition-timing-function: ease; }
  .hero-swiper .slide-media{
    transition:none !important;
    transform:none !important;
  }
}

/* ══════════════════════════════
  PRODUCTS — pin + scroll slide
══════════════════════════════ */
.home-products-section{
  position:relative;
  overflow:clip;
}
.products-pin-track{
  position:relative;
}
.products-pin-sticky{
  position:sticky;
  top:var(--header-h, 0px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  overflow:hidden;
  background:inherit;
}

/* Left gap = container content edge; right edge = full viewport */
.home-products-section .outer-product-slider{
  width:100%;
  max-width:none;
  padding-left: calc((100vw - min(90vw, 1680px)) / 2 + 1.25rem);
  padding-right:0;
  overflow:hidden;
  box-sizing:border-box;
}
.home-products-section .product-swiper{
  overflow:hidden;
  width:100%;
}
.home-products-section .product-swiper .swiper-slide{
  height:auto;
}

/* Image parallax frame — overflow clips, img oversized for travel room */
.product-slide-img{
  position:relative;
  overflow:hidden;
}
.product-slide-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:none;
  will-change:auto;
  backface-visibility:hidden;
  transition:none;
}

.product-slide-box .product-slide-inner{
  transform:scale(1);
  transform-origin:center top;
  transition:transform .35s var(--ease, cubic-bezier(.22,1,.36,1));
  will-change:transform;
}
.product-slide-box:hover .product-slide-inner{
  transform:scale(0.94);
}
.product-slide-box .product-slide-inner h3{font-size: var(--text-24);}

/* Desktop pin: appear → travel → active rise via --offset (JS each scroll frame) */
.home-products-section.is-products-pin .products-pin-sticky{
  overflow:visible;
}
.home-products-section.is-products-pin .outer-product-slider{
  overflow:visible;
}
.home-products-section.is-products-pin .product-swiper{
  overflow:visible;
}
.home-products-section.is-products-pin .product-slide-box .product-slide-inner{
  transform: translate3d(0, var(--offset, 0px), 0);
  transform-origin: center center;
  transition: none;
  will-change: transform;
  backface-visibility: hidden;
}
.home-products-section.is-products-pin .product-slide-box:hover .product-slide-inner{
  transform: translate3d(0, var(--offset, 0px), 0);
}

.product-slide-box .site-link{
  --link-color:#231F20;
  --link-hover:#ED1C24;
}

/* Default common underlines off — we use label line + full hover line */
.product-slide-box .site-link::after{
  display:none;
}
.product-slide-box .site-link::before{
  background:var(--link-hover);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s var(--link-ease, cubic-bezier(.22,1,.36,1));
}

.product-slide-box .site-link-label{
  position:relative;
  display:inline-block;
}
/* Default: underline under "View specs" text only */
.product-slide-box .site-link-label::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:1px;
  background:currentColor;
  transition:opacity .28s var(--link-ease, cubic-bezier(.22,1,.36,1));
}

/* Whole-card hover (or link hover) → middle-card look */
.product-slide-box:hover .site-link,
.product-slide-box .site-link:hover{
  color:var(--link-hover);
}
.product-slide-box:hover .site-link-label::after,
.product-slide-box .site-link:hover .site-link-label::after{
  opacity:0;
}
.product-slide-box:hover .site-link::before,
.product-slide-box .site-link:hover::before{
  transform:scaleX(1);
}
.product-slide-box:hover .site-link-arrow,
.product-slide-box .site-link:hover .site-link-arrow{
  transform:translateX(6px);
}
.product-slide-box:hover .site-link img,
.product-slide-box .site-link:hover img{
  filter:brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(5054%) hue-rotate(349deg) brightness(97%) contrast(92%);
}

.product-slide-box-last .product-slide-inner{background-color: var(--color-primary);border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 20px;width: 100%;aspect-ratio: 1.05 / 1;}
.product-slide-box-last .site-link {
    --link-color: #fff;
    --link-hover: #ED1C24;
}

.eyebrow-text {display: none;}

@media (max-width: 992px){
  .home-products-section .outer-product-slider{
    padding-left: 1.25rem; /* matches .container at ≤992px (width:100%) */
  }
}

/* Mobile: no pin — normal flow + arrow nav */
@media (max-width: 1024px){
  .products-pin-track{
    height:auto !important;
  }
  .products-pin-sticky{
    position:relative;
    top:auto;
    min-height:0;
    overflow:visible;
  }
  .home-products-section .outer-product-slider{
    position:relative;
    padding-right: 0;
  }
  .product-swiper-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:20px;
    padding-right:0;
  }
  .product-swiper-prev,
  .product-swiper-next{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(35,31,32,0.18);
    background:#fff;
    position:relative;
    cursor:pointer;
    flex-shrink:0;
    padding:0;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .product-swiper-prev:hover,
  .product-swiper-next:hover{
    border-color:var(--color-secondary, #ED1C24);
    transform:scale(1.04);
  }
  .product-swiper-prev::after,
  .product-swiper-next::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:9px;
    height:9px;
    border-top:2px solid #231F20;
    border-right:2px solid #231F20;
  }
  .product-swiper-prev::after{
    transform:translate(-30%, -50%) rotate(-135deg);
  }
  .product-swiper-next::after{
    transform:translate(-70%, -50%) rotate(45deg);
  }
  .product-swiper-prev.swiper-button-disabled,
  .product-swiper-next.swiper-button-disabled{
    opacity:0.35;
    pointer-events:none;
  }
}

@media (min-width: 1025px){
  .product-swiper-nav{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .products-pin-track{ height:auto !important; }
  .products-pin-sticky{
    position:relative;
    top:auto;
    min-height:0;
  }
  .product-slide-img img{
    transform:none !important;
  }
}

/* ══════════════════════════════
  WHAT WE STAND FOR — full-bleed parallax
══════════════════════════════ */
.home-whatwestandfor-section{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100%;
  isolation:isolate;
  background-color: #f1f1f1;
}

/* Desktop enlarge: keep travel inside the container frame */
@media (min-width: 1024px) {
  .enlarge-outer-section.is-enlarge-active,
  .enlarge-outer-section.is-enlarge-active.overflow-hidden {
    overflow: hidden !important;
  }
  .enlarge-outer-section.is-enlarge-active > .container {
    position: relative;
    /* clip on section only — container overflow was killing left-image (careers) travel */
    overflow: visible;
  }
  .enlarge-outer-section .enlarge-wrapper {
    position: relative;
    z-index: 30;
    will-change: transform;
    backface-visibility: hidden;
    max-width: 100%;
  }
  .enlarge-outer-section .enlarge-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .enlarge-outer-section .leftContent-wrap,
  .enlarge-outer-section .rightContent-wrap {
    position: relative;
    z-index: 1;
  }
}
.home-whatwestandfor-section .section-title-outer p {max-width: 100%;}
.home-whatwestandfor-section .eyebrow-text {color: var(--color-primary);}
.home-whatwestandfor-section .outer-btn-wrap{
  margin-top:1.75rem;
}
.certificates-box-outer {max-width: 785px;}
.certificates-box {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.certificates-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .certificates-box {
    will-change: auto;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ══════════════════════════════
  SUSTAINABILITY
══════════════════════════════ */
.home-sustainability-section{
  position:relative;
  display:flex;
  align-items:start;
  isolation:isolate;
  height: calc(100vh - var(--header-h, 0px));
  /* min-height: calc(100vh - var(--header-h, 0px)); */
}
.home-sustainability-section.is-sustain-anim{
  overflow: hidden;
}
.video-bg-wrap {
  z-index: 0;
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.video-bg {
  object-fit: cover;
  object-position: center;
}

.video-bg-overlay {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.40) 16.04%, rgba(0, 0, 0, 0.00) 55.73%),
              linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
}
.counter-suffix, .stat-label, .stat-sub {color:#fff;}
.stat-label {font-size: var(--text-p); font-weight: 500;margin-bottom: 0;}
.counter-wrap-outer {width: 100%;}
.sustainability-block { 
  display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    text-align: left;
    max-width: 28vw;
    margin-inline-start: auto;
    position: absolute;
    right: 0;
    top: 0;
  }

/* Tablet + mobile: full-bleed video, content in normal flow.
   Do NOT scale the video — a mid-scale frame leaves white gutters while
   white copy still spans the full width, so text looks “cut off” on the left. */
@media (max-width: 1023px) {
  .home-sustainability-section {
    height: auto;
    min-height: calc(100svh - var(--header-h, 0px));
    padding-bottom: 5.5rem;
    align-items: stretch;
    overflow: hidden;
  }
  .home-sustainability-section.is-sustain-anim {
    overflow: hidden;
  }
  .home-sustainability-section .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    transform: none !important;
    left: auto;
    right: auto;
  }
  .home-sustainability-section .section-title-outer,
  .home-sustainability-section .sustainability-block,
  .home-sustainability-section .outer-btn-wrap {
    /* Allow GSAP opacity/y via inline style; reset any leftover scale/x */
    max-width: 100%;
  }
  .home-sustainability-section .section-title-outer {
    position: relative;
    z-index: 2;
  }
  .sustainability-block {
    max-width: 100% !important;
    width: 100%;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    margin-inline-start: 0 !important;
    margin-top: 1.25rem;
    z-index: 2;
  }
  .home-sustainability-section .video-bg-wrap {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* Kill scale / translate on the WRAP — full bleed; ken-burns runs on .video-bg */
    transform: none !important;
    border-radius: 0 !important;
    will-change: opacity;
    overflow: hidden;
  }
  .home-sustainability-section .video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 45%;
    will-change: transform;
    backface-visibility: hidden;
  }
  .home-sustainability-section .outer-btn-wrap {
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-sustainability-section .video-bg-wrap {
    transform: none !important;
    border-radius: 0 !important;
  }
}

/* ══════════════════════════════
  TESTIMONIALS - MARQUEE
══════════════════════════════ */
  .marquee-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
  }

  .marquee-track {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
  }

  .marquee-track.up {
    animation-name: scrollUp;
    animation-duration: 32s;
  }
  .marquee-track.down {
    animation-name: scrollDown;
    animation-duration: 32s;
  }

  /* start running only once the section enters view (CSS fallback) */
  .section-in-view .marquee-track {
    animation-play-state: running;
  }

  /* pause whichever column is hovered, without affecting the other */
  .marquee-viewport:hover .marquee-track {
    animation-play-state: paused;
  }

  /* JS-driven marquee (auto + drag) — desktop only */
  @media (min-width: 1024px) {
    #marquee-section.is-js-marquee .marquee-track {
      animation: none !important;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
    }
    #marquee-section.is-js-marquee .marquee-viewport {
      touch-action: none;
      cursor: grab;
    }
    #marquee-section.is-js-marquee .marquee-viewport.is-dragging,
    #marquee-section.is-js-marquee .marquee-viewport.is-dragging .marquee-track {
      cursor: grabbing;
    }
  }

  @keyframes scrollUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }
  @keyframes scrollDown {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none !important; }
    #marquee-section.is-js-marquee .marquee-track {
      cursor: default;
    }
  }


.testimonials-outer-wrap .parallax-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  border-radius:0;
}
.testimonials-outer-wrap .testimonials-bg-img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
z-index: -1;
}



  /* Mobile / tablet: real #marquee-section cards + Load More (no fixed height) */
  @media (max-width: 1023px) {
    .home-testimonials-section {
      height: auto;
      min-height: 0;
      display: block;
    }

    .home-testimonials-section .testimonials-left-part {
      position: static;
      top: auto;
    }

    #marquee-section {
      height: auto !important;
    }

    #marquee-section .marquee-viewport {
      overflow: visible;
      height: auto;
      -webkit-mask-image: none;
              mask-image: none;
      padding-top: 0 !important;
      touch-action: auto;
      cursor: auto;
    }

    #marquee-section .marquee-track {
      animation: none !important;
      transform: none !important;
      will-change: auto;
      gap: 1.5rem;
      cursor: auto;
      user-select: auto;
    }

    /* Never capture swipe on mobile — even if is-js-marquee leaked */
    #marquee-section.is-js-marquee .marquee-viewport,
    #marquee-section.is-js-marquee .marquee-track {
      touch-action: auto !important;
      cursor: auto !important;
    }

    #marquee-section .quote-card[aria-hidden="true"] {
      display: none !important;
    }

    #marquee-section .quote-card.is-collapsed {
      display: none;
    }
  }

  @media (min-width: 1024px) {
    .home-testimonials-section {
      display: block;
      isolation: isolate;
      /* Let section height follow the marquee column so sticky left can pin while it scrolls past */
      height: auto;
      min-height: calc(100vh - var(--header-h, 0px));
    }

    /* .home-testimonials-section > .container {
      width: 100%;
    } */

    .home-testimonials-section .testimonials-layout {
      align-items: start;
    }

    /* Pin left copy under header for the duration of this section */
    .home-testimonials-section .testimonials-left-part {
      position: sticky;
      top: calc(var(--header-h, 0px) + 1.25rem);
      z-index: 2;
      align-self: start;
    }

    /* Marquee keeps a viewport-tall frame so scroll animation still clips correctly */
    .home-testimonials-section .testimonials-marquee-col {
      height: calc(100vh - var(--header-h, 0px) - 5rem);
      max-height: calc(100vh - var(--header-h, 0px) - 5rem);
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    #marquee-section {
      flex: 1 1 auto;
      height: 100%;
      min-height: 0;
    }

    #marquee-section .marquee-viewport {
      min-height: 0;
    }
  }

.home-testimonials-section { isolation: isolate; }
.quote-card {background: var(--color-light); padding: 40px 25px;}
.quote-card-member{font-size: var(--text-p); font-weight: 500;margin-bottom: 0;}
.quote-card-desn{font-size: var(--text-small); color: var(--color-gray);margin-bottom: 0;font-weight: 400;}
.quote-card-para {font-size: var(--text-p);margin-bottom: 0;padding-top: 30px;}
.quote-card .site-link{--link-color: #A6A6A6;--link-hover: #231F20;font-size:1rem;}
.quote-card-content {padding: 40px 0 60px 0}
.quote-card .site-link-arrow img { filter: brightness(0) saturate(100%) invert(69%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(102%) contrast(88%);}
.quote-card .site-link:hover img {filter: brightness(0) saturate(100%) invert(11%) sepia(5%) saturate(538%) hue-rotate(314deg) brightness(94%) contrast(90%);}

/* Mobile rise — same feel as .our-products-cards */
@media (max-width: 1023px) {
  #marquee-section.is-mobile-rise-anim .quote-card.is-rise-anim-card {
    will-change: transform;
    backface-visibility: hidden;
  }
}
.bg-light-gray {background-color: #fcfcfc;}

.logo-lion-vector-outer {
  position: absolute;
  top: -2vw;
  left: -25vw;
  z-index: -1;
  pointer-events: none;
}



@media (max-width: 992px){

}

@media (max-width: 767px){
.quote-card-content { padding: 40px 0 0px 0;}

  .sustainability-block { 
    max-width: 100%;
    position: relative;
    margin-top: 1rem;
  }
 
  .logo-lion-vector-outer {max-width: 65%;}
  /* .hero-swiper .slide-media {left: 0;} */
  .hero-swiper {height: calc(90vh - var(--header-h, 0px));}
.logo-lion-vector-outer {right: -5vw; left: auto;}
.home-sustainability-section .section-title-outer .title-section{max-width: 65vw;}
.hero-swiper .slide-bg {object-fit: cover;}
}

@media (max-width: 480px){
/* .hero-swiper .slide-copy--right .slide-content {top: 25vw;} */
}

@media (max-width: 393px){
 .home-sustainability-section {
   min-height: calc(100svh - var(--header-h, 0px));
 }
 /* .hero-swiper .slide-copy--right .slide-content {top: 0vw;} */
}
@media (max-width: 375px){
.home-sustainability-section {
  min-height: calc(100svh - var(--header-h, 0px));
}
}
  
/* 125% zoom */
@media screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio:1.25),screen and (min-width:1025px) and (min-resolution:120dpi) {
.hero-pag-wrap{bottom: 60px;}
.lion-logo-svg {max-width: min(45vw, 380px);}
}
@media (min-width: 1200px) and (max-width: 1366px) {
.hero-pag-wrap{bottom: 40px;}
.site-link {font-size: 1rem;}
.product-slide-box .product-slide-inner h3{font-size: 1.25rem;}
.stat-label {font-size: 1.25rem;}
.stat-sub {font-size:1rem;}
.quote-card-para {font-size: 1rem;}
.banner-extra-logo-wrap img {max-width: 120px;}
.banner-extra-logo-wrap { top: -7vw;} 
.banner-logo-wrap img {max-width: 120px;}
.sustainability-block {max-width: 35vw;}
 .lion-logo-svg {max-width: min(45vw, 320px);}
 .hero-swiper .slide-content .hero-para {margin-top: 10px;}
 .lion-logo-svg {max-width: min(45vw, 280px);}
 .logo-lion-vector-outer {left: -20vw;}
 .home-testimonials-section .testimonials-marquee-col {height: calc(130vh - var(--header-h, 0px) - 5rem);max-height: calc(130vh - var(--header-h, 0px) - 5rem);}
}


/* 150% zoom */
@media screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio:1.5),screen and (min-width:1025px) and (min-resolution:144dpi) {
.hero-pag-wrap{bottom: 40px;}
   
}