.page-process {
  --process-green: #16815b;
  --process-green-dark: #0f6849;
  --process-ink: #101820;
  --process-muted: #626b73;
  --process-sky-top: #72cef2;
  --process-sky-bottom: #dff5fc;
  --process-shell: 1620px;
  --story-progress: 0;
  --truck-x: 0px;
  --road-shift: 0px;
  background: #fff;
  color: var(--process-ink);
}

.page-process main {
  overflow: clip;
}

/* Keep the shared header above the sticky scroll scene. */
.page-process .gallery-header {
  z-index: 120;
}

/* Active process item, without changing the header's base design. */
.page-process .gallery-header .nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.process-hero {
  --scroll-y: 0px;
  --content-parallax-y: 0px;
  position: relative;
  min-height: clamp(650px, 52vw, 920px);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--process-sky-top) 0%, #9cddf5 52%, var(--process-sky-bottom) 100%);
}

.process-hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 14%, rgba(255, 255, 255, .22), transparent 23%),
    radial-gradient(circle at 78% 10%, rgba(255, 255, 255, .17), transparent 26%);
}

.process-hero [data-parallax-depth] {
  --layer-x: 0px;
  --layer-y: 0px;
  --layer-scale: 1;
  transform: translate3d(var(--layer-x), var(--layer-y), 0) scale(var(--layer-scale));
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.process-hero__content {
  position: absolute;
  top: 28%;
  left: 50%;
  z-index: 6;
  width: min(100% - 40px, 920px);
  transform: translate3d(-50%, var(--content-parallax-y), 0);
  text-align: center;
  will-change: transform;
}

.process-hero h1 {
  margin: 0;
  color: rgba(0, 0, 0, 1);
  font-family: var(--font-display, "DM Sans", sans-serif);
  font-size: clamp(4rem, 6.4vw, 6.7rem);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -.055em;
  text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.22);
}

.process-hero p {
  max-width: 720px;
  margin: 1.65rem auto 0;
  color: #17232b;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(.95rem, 1.25vw, 1.18rem);
  font-weight: 500;
  line-height: 1.5;
}

.process-cloud {
  position: absolute;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(35, 103, 132, .08));
}

.process-cloud--one {
  top: 13%;
  left: 7%;
  width: clamp(110px, 10vw, 190px);
  --layer-scale: .92;
}

.process-cloud--two {
  top: 17%;
  right: 7%;
  width: clamp(135px, 13vw, 235px);
  --layer-scale: 1;
}

.process-cloud--three {
  top: 8%;
  left: 60%;
  width: clamp(72px, 6.8vw, 122px);
  opacity: .72;
  --layer-scale: .88;
}

.process-bird {
  position: absolute;
  z-index: 4;
  display: block;
  width: clamp(22px, 2vw, 38px);
  height: auto;
  object-fit: contain;
  opacity: .9;
  filter: drop-shadow(0 3px 4px rgba(20, 65, 82, .08));
}

.process-bird--1 {
  top: 64%;
  left: 12%;
  --layer-scale: .82;
}

.process-bird--2 {
  top: 64%;
  left: 15.3%;
  --layer-scale: .95;
}

.process-bird--3 {
  top: 64%;
  left: 18.3%;
  --layer-scale: .72;
}

.process-bird--4 {
  top: 40.5%;
  right: 18.5%;
  --layer-scale: .76;
}

.process-bird--5 {
  top: 42.3%;
  right: 15.2%;
  --layer-scale: .92;
}

.process-bird--6 {
  top: 39.8%;
  right: 12%;
  --layer-scale: .8;
}

.process-hero__trees {
  position: absolute;
  left: 0%;
  bottom: -14%;
  z-index: 8;
  width: 100%;
  max-width: none;
  filter: saturate(.96);
}


/* ========================================================================== 
   PROCESS STORY — VIDEO FRAME MATCH
   Only this section is rewritten. Hero / Technology / CTA / footer untouched.
   ========================================================================== */

.page-process .process-story {
  --story-progress: 0;
  --screen: 100vw;
  position: relative;
  height: 720vh;
  min-height: calc(var(--process-mobile-vh, 100vh) * 7.2);
  background: #fff;
}

.page-process .process-story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  height: var(--process-mobile-vh, 100vh);
  min-height: 650px;
  overflow: hidden;
}

.page-process .process-story__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

/* Macro scenes */
.page-process .process-macro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-process .process-macro.is-active {
  visibility: visible;
}

.page-process .process-macro--collection,
.page-process .process-macro--destination {
  background: #fff;
}

.page-process .process-macro--interior {
  background: #171513;
}

/* --------------------------------------------------------------------------
   COPY — positions measured against the supplied reference frames.
   Outdoor and indoor scenes intentionally use different x/y positions.
   -------------------------------------------------------------------------- */
.page-process .process-step-copy {
  position: absolute;
  z-index: 85;
  width: min(61vw, 900px);
  pointer-events: none;
}

.page-process .collection-copy {
  top: clamp(74px, 15.2vh, 160px);
  left: 27%;
}

.page-process .destination-copy {
  top: clamp(150px, 19.2vh, 188px);
  left: 21.5%;
}

.page-process .process-step-copy--interior {
  top: clamp(74px, 8.5vh, 104px);
}

.page-process .process-step-copy__title-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.page-process .process-step-copy__number {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  background: #16815b;
  font-family: var(--font-display, "DM Sans", sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

.page-process .process-step-copy h2 {
  margin: 0;
  font-family: var(--font-display, "DM Sans", sans-serif);
  font-size: clamp(2.15rem, 2.75vw, 3.2rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.045em;
}

.page-process .process-step-copy p {
  max-width: 790px;
  margin: 20px 0 0 78px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(.88rem, .98vw, 1rem);
  font-weight: 500;
  line-height: 1.62;
}

.page-process .process-step-copy--outdoor h2,
.page-process .process-step-copy--outdoor p {
  color: #0d1114;
}

.page-process .process-step-copy--interior h2,
.page-process .process-step-copy--interior p {
  color: #fff;
}

/* ========================================================================== 
   1. COLLECTION
   Two tree segments are now used. The world is shortened, while the visual
   positions/treatment of the tree layer itself are preserved.
   ========================================================================== */
.page-process .collection-world {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 200vw;
  height: 76%;
  will-change: transform;
}

.page-process .collection-world__mountains {
  position: absolute;
  left: -29px;
  bottom: -10%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 210vw;
  height: 75%;
  will-change: transform;
}

.page-process .collection-world__mountains img:nth-child(3) {
  transform: translateX(-20px);
}

.page-process .collection-world__mountains img {
  display: block;
  flex: 0 0 50vw;
  width: 40vw;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
}

.page-process .collection-world__trees {
  position: absolute;
  left: 0;
  bottom: 7%;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  width: 200vw;
  will-change: transform;
}

.page-process .collection-world__trees img {
  display: block;
  flex: 0 0 100vw;
  width: 100vw;
  max-width: none;
  object-fit: cover;
  object-position: bottom center;
}

/* Keep the user's tree treatment unchanged. */
.page-process .collection-world__trees img:nth-child(2),
.page-process .collection-world__trees img:nth-child(3) {
  height: 600px !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  position: relative;
  bottom: -106px;
  margin-left: -39px;
}

.page-process .collection-house {
  position: absolute;
  left: 73vw;
  bottom: 4.7%;
  z-index: 14;
  width: clamp(145px, 12vw, 225px);
  max-width: none;
}

.page-process .collection-person {
  position: absolute;
  left: 36.5vw;
  bottom: 14%;
  z-index: 18;
  width: clamp(66px, 3.4vw, 73px);
  max-width: none;
}

.page-process .collection-bins {
  position: absolute;
  left: 43.5vw;
  bottom: 12%;
  z-index: 19;
  width: clamp(56px, 4.2vw, 80px);
  max-width: none;
}

.page-process .collection-factory {
  position: absolute;
  left: 199vw;
  bottom: 2%;
  z-index: 45;
  width: clamp(800px, 75vw, 1400px);
  max-width: none;
}

.page-process .story-jeep {
  position: absolute;
  left: 0;
  z-index: 32;
  width: clamp(23px, 30vw, 274px);
  max-width: none;
  transform-origin: center bottom;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .16));
  will-change: transform;
}

.page-process .story-jeep--collection {
  bottom: -6.2%;
}

/* Desktop only fix */
@media (min-width: 1200px) {

  .page-process .story-jeep--collection {
    bottom: -46px;
  }

}

/* ========================================================================== 
   2–4. WAREHOUSE — one continuous 4-screen camera world
   ========================================================================== */
.page-process .interior-world,
.page-process .interior-copy-track {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--screen) * 4);
  height: 100%;
  will-change: transform;
}

.page-process .interior-world {
  z-index: 5;
}

.page-process .interior-shell-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  width: calc(var(--screen) * 4);
  height: 100%;
  overflow: hidden;
}

.page-process .interior-shell-tile {
  position: relative;
  flex: 0 0 var(--screen);
  width: var(--screen);
  height: 100%;
  overflow: hidden;
}

.page-process .interior-shell-tile img {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: center;
}

/*
  Keep the warehouse at its natural proportions.
  We crop the transparent/side-wall edges instead of stretching the PNG.
  This makes all four screens read as one continuous hall.
*/
.page-process .interior-shell-tile--entry img {
  left: 0;
  width: 100%;
  object-position: left center;
}

/* Screens 1–2 use a cropped centre slice of the same warehouse PNG.
   The loading door and side wall are pushed completely outside each screen,
   so the horizontal pan reads as one closed hall rather than repeated rooms. */
/* Shredding + Bailing use only the CENTER of the warehouse artwork.
   Rendering it as a background lets us zoom/crop the two side walls away
   without stretching the hall. This removes the repeated room/open-door seam. */
.page-process .interior-shell-tile--closed {
  background-color: #b9b0a6;
  background-image: url("../img/process-warehouse.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 165% auto;
}

.page-process .interior-shell-tile--closed img {
  opacity: 0;
  visibility: hidden;
}

/* Dispatch keeps the loading opening on the far-right only.
   Crop its left wall away so the Bailing -> Dispatch handoff stays continuous. */
.page-process .interior-shell-tile--exit img {
  left: -32%;
  width: 132%;
  object-position: center center;
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   WAREHOUSE BELTS + MATERIAL FLOW
   Three separate horizontal belt runs are used so a conveyor never passes
   behind the shredding or bailing machines. This matches the supplied frames:
   Segregation → [gap for shredder] → shredded belt → [gap for baler] → bale belt.
   -------------------------------------------------------------------------- */
.page-process .process-macro--interior {
  --warehouse-belt-bottom: 3.4%;
  --warehouse-belt-height: clamp(190px, 24vh, 245px);
}

.page-process .interior-belt-run {
  position: absolute;
  bottom: var(--warehouse-belt-bottom);
  z-index: 22;
  display: flex;
  align-items: flex-end;
  height: var(--warehouse-belt-height);
  overflow: hidden;
  pointer-events: none;
}

/* Mixed-waste conveyor: Segregation up to the shredder inlet. */
.page-process .interior-belt-run--mixed {
  left: calc(var(--screen) * .19);
  width: calc(var(--screen) * 1.00);
}

/* Shredded-material conveyor: shredder discharge up to the baler. */
.page-process .interior-belt-run--shredded {
  left: calc(var(--screen) * 1.57);
  width: calc(var(--screen) * .72);
}

/* Finished-bale conveyor: baler discharge to dispatch truck. */
.page-process .interior-belt-run--baled {
  left: calc(var(--screen) * 2.50);
  width: calc(var(--screen) * .84);
}

/* bench-process is used as the cap/leg section and conveyer-middle fills the
   long centre. Pieces overlap by 5px so there is no visible transparent seam. */
.page-process .interior-belt-piece {
  display: block;
  min-width: 0;
  height: 100%;
  max-width: none;
  object-fit: fill;
  margin-right: -4px;
}

/* bench-process.png is now a SHORT end/cap section, not a stretched belt. */
.page-process .interior-belt-piece--cap {
  flex: 0 0 28%;
}

.page-process .interior-belt-piece--middle {
  flex: 1 1 0;
}

.page-process .interior-belt-run--shredded .interior-belt-piece--cap,
.page-process .interior-belt-run--baled .interior-belt-piece--cap {
  flex-basis: 31%;
}

/* Mixed waste sits directly on the black belt surface and stops before the
   shredding-machine asset. */
.page-process .interior-waste-window {
  position: absolute;
  left: calc(var(--screen) * .205);
  bottom: 24.4%;
  z-index: 25;
  width: calc(var(--screen) * .97);
  height: 40px;
  overflow: hidden;
  pointer-events: none;
}

.page-process .interior-waste-strip {
  display: flex;
  align-items: flex-end;
  gap: 0;
  width: max-content;
  height: 100%;
  will-change: transform;
  backface-visibility: hidden;
}

.page-process .interior-waste-strip img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  /* overlap transparent ends in waste-strips.png so there is no visible gap */
  margin-right: -46px;
}

.page-process .interior-station {
  position: absolute;
  z-index: 35;
  max-width: none;
}

/* Screen 0 — Segregation, matched to the supplied reference frame. */
.page-process .interior-delivery-truck {
  left: calc(var(--screen) * .10);
  bottom: -27%;
  z-index: 36;
  width: clamp(600px, 190vw, 550px);
  max-width: none;
}

.page-process .interior-recycle-bin {
  left: calc(var(--screen) * .20);
  bottom: -1.3%;
  z-index: 35;
  width: clamp(253px, 35vw, 275px);
  max-width: none;
  transform: translate3d(calc(var(--screen) * .20), 0, 0);
  transition: transform .62s cubic-bezier(.22, .8, .22, 1);
}

.page-process .interior-robot {
  left: calc(var(--screen) * .38);
  bottom: 5.5%;
  z-index: 20;
  width: clamp(190px, 24vw, 400px);
  max-width: none;
  transform-origin: 43% 78%;
}

.page-process .interior-worker {
  left: calc(var(--screen) * 0.5);
  bottom: 1%;
  z-index: 18;
  width: 390px;
  max-width: none;
}

/* Screen 1 — Shredding.
   The complete shredding-machine asset begins around 20% into screen 1, which
   puts its blue cabinet / inclined feed / hopper in the same geometry as the
   uploaded Shredding reference. */
.page-process .interior-shredder {
  left: calc(var(--screen) * 1.15);
  bottom: -16.3%;
  z-index: 42;
  width: clamp(802px, 50vw, 890px);
}

/* Shredded output starts under the machine's discharge and continues right up
   to the baler.  The machine has the higher z-index so the strip never cuts
   across the machine body. */
.page-process .interior-shred-output-track {
  position: absolute;
  left: calc(var(--screen) * 1.59);
  bottom: 24.4%;
  z-index: 34;
  width: calc(var(--screen) * .69);
  height: 38px;
  overflow: hidden;
  pointer-events: none;
}

/* Screen 2 — Bailing. */
.page-process .interior-baler {
  left: calc(var(--screen) * 2.33);
  bottom: -6.3%;
  z-index: 42;
  width: clamp(260px, 23vw, 325px);
}

/* Finished bales begin just after the baler and run almost all the way to the
   loading bay / dispatch truck, matching the last two supplied screenshots. */
.page-process .interior-bale-output {
  position: absolute;
  left: calc(var(--screen) * 2.50);
  bottom: 15%;
  z-index: 34;
  width: calc(var(--screen) * .84);
  height: 68px;
  overflow: hidden;
  pointer-events: none;
}

/*
  Material output uses the source PNG at its natural aspect ratio.
  Repeating backgrounds avoid stretching Shredding (1).png / Bailing.png,
  and the longer durations intentionally slow the material movement.
*/
.page-process .interior-material-loop {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  will-change: background-position;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: auto 100%;
}

.page-process .interior-shred-output-track .interior-material-loop {
  background-image: url("../img/Shredding (1).png");
  animation: process-shred-flow 18s linear infinite;
}

.page-process .interior-bale-output .interior-material-loop {
  background-image: url("../img/Bailing.png");
  animation: process-bale-flow 22s linear infinite;
}

/* The HTML copies remain as a no-JS fallback source but are hidden visually. */
.page-process .interior-material-loop img {
  display: none;
}

@keyframes process-shred-flow {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: 300px;
  }
}

@keyframes process-bale-flow {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: 260px;
  }
}

/* Screen 3 — Dispatch.  At the final camera hold the truck begins around 72%
   of the viewport and sits inside the right-side loading opening. */
.page-process .interior-dispatch-truck {
  left: 20%;
  bottom: -2%;
  z-index: 38;
  width: clamp(400px, 28vw, 490px);
  transform-origin: center bottom;
  will-change: transform;
}

.page-process .interior-dark-overlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(7, 6, 6, .78) 0%,
      rgba(7, 6, 6, .55) 25%,
      rgba(7, 6, 6, .20) 53%,
      rgba(7, 6, 6, .02) 82%);
}

.page-process .interior-copy-track {
  z-index: 80;
  pointer-events: none;
}

/* These positions reproduce the overlapping copy visible during camera handoffs. */
.page-process .process-step-copy--slot-0 {
  left: calc(var(--screen) * .31);
}

.page-process .process-step-copy--slot-1 {
  left: calc(var(--screen) * 1.31);
}

.page-process .process-step-copy--slot-2 {
  left: calc(var(--screen) * 2.31);
}

.page-process .story-copy-branch--recyclable {
  display: none;
}

.page-process .process-story[data-branch="recyclable"] .story-copy-branch--non-recyclable {
  display: none;
}

.page-process .process-story[data-branch="recyclable"] .story-copy-branch--recyclable {
  display: block;
}

/* ==========================================================
   RECYCLABLE ROUTE — CORRECT UI VISIBILITY
   ========================================================== */


/* ----------------------------------------------------------
   RECYCLABLE SCREEN 0
   Keep normal warehouse UI visible
   ---------------------------------------------------------- */

.page-process .process-story[data-branch="recyclable"] .interior-delivery-truck,

.page-process .process-story[data-branch="recyclable"] .interior-recycle-bin,

.page-process .process-story[data-branch="recyclable"] .interior-robot,

.page-process .process-story[data-branch="recyclable"] .interior-worker,

.page-process .process-story[data-branch="recyclable"] .interior-belt-run--mixed,

.page-process .process-story[data-branch="recyclable"] .interior-waste-window {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ----------------------------------------------------------
   RECYCLABLE ROUTE DOES NOT SHOW SHREDDING
   ---------------------------------------------------------- */

.page-process .process-story[data-branch="recyclable"] .interior-shredder,

.page-process .process-story[data-branch="recyclable"] .interior-shred-output-track {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ----------------------------------------------------------
   BAILING MUST STILL SHOW
   ---------------------------------------------------------- */

.page-process .process-story[data-branch="recyclable"] .interior-baler,

.page-process .process-story[data-branch="recyclable"] .interior-bale-output,

.page-process .process-story[data-branch="recyclable"] .interior-belt-run--baled {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ----------------------------------------------------------
   RECYCLE BIN POSITION
   ---------------------------------------------------------- */

.page-process .process-story[data-branch="recyclable"] .interior-recycle-bin {
  transform: translate3d(0, 0, 0);
}

.page-process .process-story[data-branch="recyclable"] .interior-recycle-bin {
  transform: translate3d(0, 0, 0);
}

/* Fixed toggle — it does NOT travel with the hall. */
.page-process .process-toggle {
  position: absolute;
  top: 38.5%;
  left: 50%;
  z-index: 100;
  display: inline-flex;
  width: min(410px, 39vw);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px;
  opacity: 0;
  visibility: hidden;
  background: rgba(192, 190, 190, .74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateX(-50%);
  pointer-events: auto;
}

.page-process .process-toggle__option {
  display: inline-flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 11px 15px;
  border: 0;
  border-radius: 999px;
  margin: 0;
  color: rgba(255, 255, 255, .90);
  background: transparent;
  font: inherit;
  font-size: .77rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.page-process .process-toggle__option.is-active {
  color: #111;
  background: #fff;
}

/* ========================================================================== 
   DESTINATIONS
   ========================================================================== */
.page-process .destination-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #fff;
}

.page-process .destination-mountain {
  position: absolute;
  bottom: -10%;
  z-index: 2;
  max-width: none;
}

.page-process .destination-mountain--left {
  left: -2%;
  width: 58%;
}

.page-process .destination-mountain--middle {
  left: 60%;
  width: 43%;
}

.page-process .destination-trees {
  position: absolute;
  left: -2%;
  bottom: -9%;
  z-index: 8;
  width: 104%;
  max-width: none;
}

.page-process .destination-plant {
  position: absolute;
  right: -13%;
  bottom: 12%;
  z-index: 45;
  max-width: none;
}

.page-process .destination-plant--cement {
  right: -9%;
  bottom: 3px;
  z-index: 46;
  width: clamp(480px, 38vw, 980px);
}

.page-process .process-macro--cement .story-jeep--destination {
  z-index: 32;
}

.page-process .destination-plant--recycling {
  right: -13%;
  bottom: 0.5%;
  width: clamp(500px, 42vw, 720px);
}

.page-process .story-jeep--destination {
  bottom: -6.9%;
  z-index: 32;
}

.page-process .process-story img.asset-missing {
  display: none !important;
}

/* ========================================================================== 
   STORY RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .page-process .collection-copy {
    left: 31%;
  }

  .page-process .destination-copy {
    left: 18%;
  }

  .page-process .process-step-copy {
    width: min(68vw, 730px);
  }

  .page-process .process-step-copy--slot-0 {
    left: calc(var(--screen) * .25);
  }

  .page-process .process-step-copy--slot-1 {
    left: calc(var(--screen) * 1.25);
  }

  .page-process .process-step-copy--slot-2 {
    left: calc(var(--screen) * 2.25);
  }
}

@media (max-width: 760px) {
  .page-process .process-story {
    height: 760vh;
  }


  .page-process .process-story__sticky {
    height: var(--process-mobile-vh, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }


  .page-process .process-step-copy,
  .page-process .collection-copy,
  .page-process .destination-copy,
  .page-process .process-step-copy--interior {
    top: 232px;
    width: calc(var(--screen) - 30px);
  }

  .interior-copy-track {
    background: linear-gradient(180deg, #0D0B0B 0%, rgba(31, 25, 25, 0.88) 52.02%, rgba(153, 153, 153, 0) 107.74%);

  }

  .page-process .collection-copy,
  .page-process .destination-copy {
    left: 15px;
  }

  .page-process .process-step-copy--slot-0 {
    left: 15px;
  }

  .page-process .process-step-copy--slot-1 {
    left: calc(var(--screen) + 15px);
  }

  .page-process .process-step-copy--slot-2 {
    left: calc(var(--screen) * 2 + 15px);
  }

  .page-process .process-step-copy__title-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
  }

  .page-process .process-step-copy__number {
    width: 36px;
    height: 36px;
    font-size: .8rem;
  }

  .page-process .process-step-copy h2 {
    padding-top: 3px;
    font-size: 1.28rem;
    line-height: 1.06;
  }

  .page-process .process-step-copy p {
    max-width: min(270px, calc(100vw - 67px));
    margin: 9px 0 0 49px;
    font-size: .64rem;
    line-height: 1.46;
  }

  .page-process .collection-world {
    width: 290vw;
    height: 70%;
  }

  .page-process .collection-world__mountains {
    width: 300vw;
    height: 100%;
  }

  .page-process .collection-world__mountains img {
    flex: 0 0 175.666vw;
    width: 136.666vw;
  }

  .page-process .collection-world__trees {
    width: 280vw;
    bottom: 5%;
  }

  .page-process .collection-world__trees img {
    flex: 0 0 293vw;
    width: 140vw;
  }

  .page-process .collection-world__mountains {
    position: absolute;
    left: -29px;
    bottom: -9%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    width: 210vw;
    height: 75%;
    will-change: transform;
  }

  .page-process .collection-world__trees img:nth-child(2),
  .page-process .collection-world__trees img:nth-child(3) {
    height: 393px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    position: relative;
    bottom: -69px;
  }

  .page-process .collection-house {
    left: 126vw;
    bottom: 4.8%;
    width: 105px;
  }

  .page-process .collection-person {
    left: 94vw;
    bottom: 8.6%;
    width: 81px;
  }

  .page-process .collection-bins {
    left: 121vw;
    bottom: 8.6%;
    width: 59px;
  }

  .page-process .collection-factory {
    left: 612vw;
    bottom: 3%;
    width: 648px;
  }

  .page-process .story-jeep {
    width: 180px;
  }

  .page-process .story-jeep--collection {
    bottom: -25px;
  }

  /* Mobile keeps the same stage gaps: no conveyor beneath either machine. */
  .page-process .process-macro--interior {
    --warehouse-belt-bottom: 6%;
    --warehouse-belt-height: 145px;
  }

  .page-process .interior-belt-run--mixed {
    left: calc(var(--screen) * .07);
    width: calc(var(--screen) * 1.00);
  }

  .page-process .interior-belt-run--shredded {
    left: calc(var(--screen) * 1.52);
    width: calc(var(--screen) * .68);
  }

  .page-process .interior-belt-run--baled {
    left: calc(var(--screen) * 2.43);
    width: calc(var(--screen) * .78);
  }

  .page-process .interior-belt-piece {
    margin-right: -2px;
  }

  .page-process .interior-belt-piece--cap {
    flex-basis: 27%;
  }

  .page-process .interior-waste-window {
    left: calc(var(--screen) * .08);
    bottom: 21.0%;
    width: calc(var(--screen) * .97);
    height: 25px;
  }

  .page-process .interior-waste-strip img {
    flex-basis: auto;
    width: auto;
    margin-right: -28px;
  }


  .page-process .interior-shell-tile--entry img,
  .page-process .interior-shell-tile--exit img {
    width: 100%;
  }

  .page-process .interior-shell-tile--closed {
    background-size: 245% auto;
    background-position: center center;
  }

  .page-process .interior-shell-tile--closed img {
    opacity: 0;
    visibility: hidden;
  }

  .page-process .interior-shell-tile--exit img {
    left: -45%;
    width: 145%;
  }


  .page-process .interior-delivery-truck {
    left: 111px;
    bottom: -5%;
    width: 387px;

  }

  .page-process .interior-recycle-bin {
    left: 12%;
    bottom: 3%;
    width: 131px;
  }



  .page-process .interior-robot {
    left: 17%;
    bottom: 15%;
    width: 134px;
  }

  .page-process .interior-worker {
    left: 20%;
    bottom: 10.5%;
    width: 179px;
  }

  .page-process .interior-shredder {
    left: calc(var(--screen) * 1.10);
    bottom: 3.5%;
    width: min(94vw, 348px);
  }

  .page-process .interior-shred-output-track {
    left: calc(var(--screen) * 1.53);
    bottom: 20.8%;
    width: calc(var(--screen) * .65);
    height: 24px;
  }

  .page-process .interior-baler {
    left: calc(var(--screen) * 2.23);
    bottom: 2%;
    width: min(66vw, 294px);

  }

  .page-process .interior-bale-output {
    left: calc(var(--screen) * 2.43);
    bottom: 20.0%;
    width: calc(var(--screen) * .76);
    height: 46px;
  }

  .page-process .interior-dispatch-truck {
    left: calc(var(--screen) * 3.17);
    bottom: 8%;
    width: 235px;
  }

  .page-process .process-toggle {
    top: 30.5%;
    width: calc(100% - 30px);
    padding: 3px;
    transform: translateX(-50%);
  }

  .page-process .process-toggle__option {
    padding: 8px 5px;
    gap: 5px;
    font-size: .57rem;
  }

  .page-process .destination-mountain--left {
    left: -27%;
    bottom: -1%;
    width: 100%;
  }

  .page-process .destination-mountain--middle {
    left: 23%;
    bottom: 0;
    width: 100%;
  }

  .page-process .destination-trees {
    left: -27%;
    bottom: 0;
    width: 175%;
  }

  .page-process .destination-plant {
    right: -33%;
    bottom: 5%;
  }

  .page-process .destination-plant--cement {
    right: -27%;
    bottom: 4%;
    width: 66vw;
  }

  .page-process .destination-plant--recycling {
    right: -36%;
    width: 61vw;
  }

  .page-process .story-jeep--destination {
    width: 141px;
    bottom: 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-process .interior-material-loop {
    animation: none;
    background-position: 0 100%;
  }

  .page-process .collection-world,
  .page-process .collection-world__mountains,
  .page-process .collection-world__trees,
  .page-process .story-jeep,
  .page-process .interior-world,
  .page-process .interior-copy-track,
  .page-process .interior-waste-strip,
  .page-process .interior-dispatch-truck {
    will-change: auto;
  }
}



/* ==========================================================================
   TECHNOLOGY
   ========================================================================== */

.process-tech {
  position: relative;
  z-index: 30;
  padding: clamp(78px, 8vw, 130px) 48px;
  background: #fff;
}

.process-tech__inner {
  width: min(100%, var(--process-shell));
  margin-inline: auto;
}

.process-tech__head {
  margin-bottom: clamp(34px, 4vw, 58px);
  text-align: center;
}

.process-tech__head h2 {
  margin: 0;
  color: #10171b;
  font-family: var(--font-display, "DM Sans", sans-serif);
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.process-tech__head p {
  max-width: 760px;
  margin: 12px auto 0;
  color: #6c7277;
  font-size: .92rem;
  line-height: 1.65;
}

.process-tech__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 32px);
}

.process-tech__card {
  min-width: 0;
}

.process-tech__media {
  overflow: hidden;
  aspect-ratio: 1.48 / 1;
  background: #eef1ef;
}

.process-tech__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transition: transform .65s cubic-bezier(.16,1,.3,1); */
}

.process-tech__card:hover .process-tech__media img {
  /* transform: scale(1.04); */
}

.process-tech__card h3 {
  margin: 16px 0 0;
  color: #10171b;
  font-family: var(--font-display, "DM Sans", sans-serif);
  font-size: 1rem;
  font-weight: 700;
}

.process-tech__card p {
  margin: 7px 0 0;
  color: #697077;
  font-size: .78rem;
  line-height: 1.55;
}

.process-tech__card a {
  display: inline-flex;
  margin-top: 10px;
  color: var(--process-green);
  font-size: .75rem;
  font-weight: 600;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.process-cta {
  padding: 0 48px clamp(76px, 7vw, 116px);
  background: #fff;
}

.process-cta__inner {
  position: relative;
  width: min(100%, var(--process-shell));
  min-height: clamp(260px, 23vw, 399px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
}

.process-cta__copy {
  position: relative;
  z-index: 8;
  width: min(100% - 40px, 680px);
  margin: 0 auto;
  padding-top: clamp(54px, 5.4vw, 86px);
  text-align: center;
}

.process-cta h2 {
  margin: 0;
  color: #11181c;
  font-family: var(--font-display, "DM Sans", sans-serif);
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.process-cta p {
  margin: 12px auto 0;
  color: #39484d;
  font-size: .9rem;
}

.process-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 22px;
  padding: 0 24px;
  border: 1px solid rgba(10, 91, 63, .22);
  border-radius: 7px;
  color: #0c5e43;
  background: rgba(255, 255, 255, .38);
  font-size: .76rem;
  font-weight: 600;
  backdrop-filter: blur(7px);
  transition: transform .2s ease, background-color .2s ease;
}

.process-cta__button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .7);
}

.process-cta__truck,
.process-cta__warehouse,
.process-cta__trees {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.process-cta__trees {
  left: -3%;
  bottom: -15%;
  z-index: 2;
  width: 106%;
  max-width: none;
  opacity: .95;
}

.process-cta__truck {
  left: 4%;
  bottom: 12%;
  z-index: 5;
  width: clamp(110px, 12vw, 210px);
}

.process-cta__warehouse {
  right: 5%;
  bottom: 15%;
  z-index: 4;
  width: clamp(115px, 11vw, 190px);
}


/* ========================================================================== 
   RESPONSIVE — non-story sections only
   Story responsiveness lives in the single story block above.
   ========================================================================== */

@media (max-width: 1100px) {
  .process-tech {
    padding-inline: 32px;
  }

  .process-cta {
    padding-inline: 32px;
  }
}

@media (max-width: 760px) {
  .process-hero {
    min-height: 610px;
  }

  .process-bird--4 {
    display: none;
  }

  .process-bird--5 {
    display: none;
  }

  .process-bird--6 {
    display: none;
  }

  .process-hero__content {
    top: 28%;
  }

  .process-hero h1 {
    font-size: clamp(3.4rem, 16vw, 5rem);
  }

  .process-hero p {
    max-width: 330px;
    margin-top: 1.25rem;
    font-size: .9rem;
  }

  .process-hero__trees {
    bottom: -1%;
    left: -22%;
    width: 144%;
  }

  .process-cloud--one {
    left: 5%;
    transform: scale(.56);
  }

  .process-cloud--two {
    right: 1%;
    transform: scale(.67);
  }

  .process-cloud--three {
    display: none;
  }

  .process-birds--one {
    left: 13%;
  }

  .process-birds--two {
    right: 10%;
  }

  .process-tech {
    padding: 72px 18px;
  }

  .process-tech__head {
    margin-bottom: 28px;
  }

  .process-tech__head h2 {
    font-size: 2rem;
  }

  .process-tech__head p {
    font-size: .82rem;
  }

  .process-tech__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .process-tech__media {
    aspect-ratio: 1.55 / 1;
  }

  .process-cta {
    padding: 0 18px 72px;
  }

  .process-cta__inner {
    border-radius: 14px;
  }

  .process-cta__copy {
    width: calc(100% - 32px);
    padding-top: 97px;
  }

  .process-cta h2 {
    font-size: 1.75rem;
  }

  .process-cta p {
    max-width: 310px;
    font-size: .8rem;
    line-height: 1.5;
  }

  .process-cta__trees {
    left: -33%;
    width: 166%;
    bottom: -4%;
  }

  .process-cta__truck {
    left: 4%;
    bottom: 10%;
    width: 100px;
  }

  .process-cta__warehouse {
    right: 4%;
    bottom: 12%;
    width: 95px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-hero [data-parallax-depth] {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 760px) {

  .process-hero {
    min-height: 610px;
  }


  /* CLOUD 1 */

  .process-cloud--one {
    top: 49%;
    left: 2%;

    width: 92px;
  }


  /* CLOUD 2 */

  .process-cloud--two {
    top: 49%;
    right: 1%;

    width: 110px;
  }


  /* CLOUD 3 */

  .process-cloud--three {
    top: 10%;
    left: 58%;

    width: 65px;
  }


  /* BIRDS LEFT */

  .process-birds--one {
    top: 44%;
    left: 11%;

    width: 58px;
  }


  /* BIRDS RIGHT */

  .process-birds--two {
    top: 41%;
    right: 10%;

    width: 64px;
  }


  /* TREES */

  .process-hero__trees {
    left: -22%;
    bottom: -17%;
    width: 213%;
    height: 300px;
  }

  .page-process .collection-world__mountains img:nth-child(3) {
    transform: translateX(-7px);
  }


  /* CONTENT */

  .process-hero__content {
    top: 14%;
  }


  .process-hero h1 {
    font-size:
      clamp(3.4rem,
        16vw,
        5rem);
  }


  .process-hero p {
    max-width: 330px;

    margin-top: 1.25rem;

    font-size: .9rem;
  }
}

/* ==========================================================================
   PROCESS PAGE NAV — MOBILE + TABLET ONLY
   Scoped to .page-process so Process hero/story/cards/CTA/footer and all
   desktop styles remain unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE: <= 760px
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  .page-process.menu-open {
    overflow: hidden;
  }

  .page-process .gallery-header,
  .page-process .gallery-header.is-stuck,
  .page-process.menu-open .gallery-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 220;
    height: 68px;
    color: #101820;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-process .gallery-header .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 32px);
    height: 100%;
    margin-inline: auto;
    gap: 18px;
  }

  .page-process .gallery-header .header__logo,
  .page-process.menu-open .gallery-header .header__logo {
    position: relative;
    z-index: 222;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    opacity: 1;
    pointer-events: auto;
  }

  .page-process .gallery-header .logo,
  .page-process .gallery-header.is-stuck .logo,
  .page-process.menu-open .gallery-header .logo {
    display: block;
    width: auto;
    height: 22px;
  }

  .page-process .gallery-header .nav,
  .page-process .gallery-header .icon-btn,
  .page-process .gallery-header .header__tools>.btn {
    display: none;
  }

  .page-process .gallery-header .header__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  .page-process .gallery-header .burger {
    position: relative;
    z-index: 222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #101820;
    background: #f3f3f3;
  }

  .page-process .gallery-header .burger span,
  .page-process.menu-open .gallery-header .burger span {
    display: block;
    width: 23px;
    height: 2px;
    margin: 0;
    border-radius: 99px;
    background: #101820;
    transform-origin: center;
    transition: transform .25s ease, opacity .2s ease;
  }

  .page-process.menu-open .gallery-header .burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .page-process.menu-open .gallery-header .burger span:nth-child(2) {
    opacity: 0;
  }

  .page-process.menu-open .gallery-header .burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .page-process .drawer {
    position: fixed;
    inset: 68px 0 0;
    z-index: 215;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: calc(100dvh - 68px);
    padding: 24px 20px 28px;
    overflow-y: auto;
    color: #101820;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -12px, 0);
    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .25s ease;
  }

  .page-process.menu-open .drawer,
  .page-process .drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .page-process .drawer nav {
    display: grid;
    width: 100%;
  }

  .page-process .drawer nav a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 4px;
    border-bottom: 1px solid #ecefed;
    color: #15201b;
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    font-weight: 500;
  }

  .page-process .drawer nav a[aria-current="page"] {
    color: var(--process-green);
  }

  .page-process .drawer__foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
    padding-top: 0;
  }

  .page-process .drawer__foot .btn,
  .page-process .drawer__foot .btn--outline-light {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--process-green);
    font-family: "DM Sans", sans-serif;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
  }

  .page-process .drawer__foot .btn:hover,
  .page-process .drawer__foot .btn--outline-light:hover {
    color: #fff;
    background: var(--process-green-dark);
    transform: none;
  }

  /* Offset only for the fixed mobile header. */
  .page-process .process-hero {
    margin-top: 68px;
  }
}


/* --------------------------------------------------------------------------
   TABLET: 761px–1024px
   Same mobile-style navigation system, with tablet spacing.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1024px) {

  .page-process.menu-open {
    overflow: hidden;
  }

  .page-process .gallery-header,
  .page-process .gallery-header.is-stuck,
  .page-process.menu-open .gallery-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 220;
    height: 68px;
    color: #101820;
    background: #fff;
    box-shadow: 0 1px 0 rgba(10, 24, 18, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-process .gallery-header .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 48px);
    height: 100%;
    margin-inline: auto;
    gap: 18px;
  }

  .page-process .gallery-header .header__logo,
  .page-process.menu-open .gallery-header .header__logo {
    position: relative;
    z-index: 222;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    opacity: 1;
    pointer-events: auto;
  }

  .page-process .gallery-header .logo,
  .page-process .gallery-header.is-stuck .logo,
  .page-process.menu-open .gallery-header .logo {
    display: block;
    width: auto;
    height: 24px;
  }

  .page-process .gallery-header .nav,
  .page-process .gallery-header .icon-btn,
  .page-process .gallery-header .header__tools>.btn {
    display: none;
  }

  .page-process .gallery-header .header__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  .page-process .gallery-header .burger {
    position: relative;
    z-index: 222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #101820;
    background: #f3f3f3;
  }

  .page-process .gallery-header .burger span,
  .page-process.menu-open .gallery-header .burger span {
    display: block;
    width: 23px;
    height: 2px;
    margin: 0;
    border-radius: 99px;
    background: #101820;
    transform-origin: center;
    transition: transform .25s ease, opacity .2s ease;
  }

  .page-process.menu-open .gallery-header .burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .page-process.menu-open .gallery-header .burger span:nth-child(2) {
    opacity: 0;
  }

  .page-process.menu-open .gallery-header .burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .page-process .drawer {
    position: fixed;
    inset: 68px 0 0;
    z-index: 215;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: calc(100dvh - 68px);
    padding: 28px 32px 32px;
    overflow-y: auto;
    color: #101820;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -12px, 0);
    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .25s ease;
  }

  .page-process.menu-open .drawer,
  .page-process .drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .page-process .drawer nav {
    display: grid;
    width: 100%;
  }

  .page-process .drawer nav a {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 4px;
    border-bottom: 1px solid #ecefed;
    color: #15201b;
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    font-weight: 500;
  }

  .page-process .drawer nav a[aria-current="page"] {
    color: var(--process-green);
  }

  .page-process .drawer__foot {
    display: grid;
    grid-template-columns: minmax(0, 220px) 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    padding-top: 0;
  }

  .page-process .drawer__foot .btn,
  .page-process .drawer__foot .btn--outline-light {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--process-green);
    font-family: "DM Sans", sans-serif;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
  }

  .page-process .drawer__foot .btn:hover,
  .page-process .drawer__foot .btn--outline-light:hover {
    color: #fff;
    background: var(--process-green-dark);
    transform: none;
  }

  /* Offset only for the fixed tablet header. */
  .page-process .process-hero {
    margin-top: 68px;
  }
}

/* ==========================================================================
   FINAL PROCESS-STORY FLOOR / MOVING MATERIAL / BAILING FIX
   Only Process Story warehouse overrides are changed.
   ========================================================================== */

/* ==========================================================
   1. WAREHOUSE BACKGROUND / FLOOR
   Move the warehouse artwork slightly upward, then use the
   bottom part of the SAME warehouse image as a real floor strip.
   This makes conveyor feet and machines visually sit on the floor
   without affecting Hero / Technology / CTA / footer.
   ========================================================== */
.page-process .process-macro--interior .interior-shell-track {
  background: #b8afa5 !important;
}

.page-process .process-macro--interior .interior-shell-tile {
  position: relative !important;
  flex: 0 0 var(--screen) !important;
  width: var(--screen) !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #b8afa5 !important;
}

/* Main warehouse artwork */
.page-process .process-macro--interior .interior-shell-tile img {
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  z-index: 1 !important;

  /* Raise the room itself. The real floor is restored by ::after below. */
  top: -5.5% !important;
  height: 100% !important;

  width: 145% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform-origin: center center !important;
}

/* Real floor extension made from the BOTTOM of the same warehouse artwork. */
.page-process .process-macro--interior .interior-shell-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  height: 11.5%;
  pointer-events: none;

  background-image: url("../img/process-warehouse.png");
  background-repeat: no-repeat;
  background-size: 145% auto;
  background-position: center bottom;
}

/* Screen 0 — real loading opening on the LEFT */
.page-process .process-macro--interior .interior-shell-tile--entry {
  background-image: none !important;
}

.page-process .process-macro--interior .interior-shell-tile--entry img {
  left: 0 !important;
  object-position: left center !important;
  transform: none !important;
}

.page-process .process-macro--interior .interior-shell-tile--entry::after {
  background-position: left bottom;
}

/* Screen 1 + 2 — closed centre hall */
.page-process .process-macro--interior .interior-shell-tile--closed {
  background-image: none !important;
}

.page-process .process-macro--interior .interior-shell-tile--closed img {
  left: -22.5% !important;
  object-position: center center !important;
  transform: none !important;
}

.page-process .process-macro--interior .interior-shell-tile--closed::after {
  background-position: center bottom;
}

/* Screen 3 — loading opening on the RIGHT */
.page-process .process-macro--interior .interior-shell-tile--exit {
  background-image: none !important;
}

.page-process .process-macro--interior .interior-shell-tile--exit img {
  left: -45% !important;
  object-position: left center !important;
  transform: scaleX(-1) !important;
}

.page-process .process-macro--interior .interior-shell-tile--exit::after {
  background-position: left bottom;
  transform: scaleX(-1);
}

/* ==========================================================
   2. CONVEYOR / BENCH
   Lower the complete conveyor so its feet meet the new floor.
   Bench is intentionally absent behind Shredding and Bailing.
   ========================================================== */
.page-process .process-macro--interior {
  --warehouse-belt-bottom: -6.0%;
  --warehouse-belt-height: clamp(210px, 24.5vh, 255px);
}

.page-process .process-macro--interior .interior-belt-run {
  display: flex !important;
  align-items: flex-end !important;
  bottom: var(--warehouse-belt-bottom) !important;
  height: var(--warehouse-belt-height) !important;
  overflow: hidden !important;
  background: none !important;
  gap: 0 !important;
  z-index: 22 !important;
  pointer-events: none !important;
}

/* Segregation -> Shredding machine */
.page-process .process-macro--interior .interior-belt-run--mixed {
  left: calc(var(--screen) * .17) !important;
  width: calc(var(--screen) * 1.03) !important;
}

/* Shredding machine -> Bailing machine */
.page-process .process-macro--interior .interior-belt-run--shredded {
  left: calc(var(--screen) * 1.61) !important;
  width: calc(var(--screen) * .70) !important;
}

/* Bailing machine -> final dispatch truck */
.page-process .process-macro--interior .interior-belt-run--baled {
  left: calc(var(--screen) * 2.53) !important;
  width: calc(var(--screen) * .90) !important;
}

.page-process .process-macro--interior .interior-belt-run>img {
  display: block !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center bottom !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

/* bench-process.png = short cap/leg section */
.page-process .process-macro--interior .interior-belt-piece--cap {
  flex: 0 0 24% !important;
  width: 24% !important;
}

/* Strong overlap = no visible space between bench pieces */
.page-process .process-macro--interior .interior-belt-piece--middle {
  flex: 1 1 0 !important;
  width: 0 !important;
  margin-left: -118px !important;
}

.page-process .process-macro--interior .interior-belt-piece--middle+.interior-belt-piece--middle {
  margin-left: -132px !important;
}

/* ==========================================================
   3. MATERIAL
   Material always fills the visible bench.
   JS changes background-position-x while scrolling.
   IMPORTANT: no !important on background-position shorthand,
   otherwise JS cannot move the material.
   ========================================================== */

/* Segregation waste */
.page-process .process-macro--interior .interior-waste-window {
  left: calc(var(--screen) * .17) !important;
  bottom: 12.85% !important;
  width: calc(var(--screen) * 1.03) !important;
  height: 73px !important;
  overflow: hidden !important;
  z-index: 27 !important;
  background-image: url(../img/waste-strips.png) !important;
  background-repeat: repeat-x !important;
  background-position-y: 100% !important;
  background-size: auto 100% !important;
  animation: none !important;
  pointer-events: none !important;
}

/* Old <img> strip is hidden; parent background is seamless. */
.page-process .process-macro--interior .interior-waste-strip {
  display: none !important;
}

/* Shredded waste output */
.page-process .process-macro--interior .interior-shred-output-track {
  left: calc(var(--screen) * 1.61) !important;
  bottom: 11.85% !important;
  width: calc(var(--screen) * .70) !important;
  height: 42px !important;
  z-index: 34 !important;
  overflow: hidden !important;
}

/* Bailing output */
.page-process .process-macro--interior .interior-bale-output {
  left: calc(var(--screen) * 2.53) !important;
  bottom: 12.25% !important;
  width: calc(var(--screen) * .88) !important;
  height: 60px !important;
  z-index: 34 !important;
  overflow: hidden !important;
}

.page-process .process-macro--interior .interior-material-loop {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  animation: none !important;
  background-repeat: repeat-x !important;
  background-position-y: 100% !important;
  background-size: auto 100% !important;
  will-change: background-position !important;
}

.page-process .process-macro--interior .interior-shred-output-track .interior-material-loop {
  background-image: url("../img/Shredding (1).png") !important;
}

.page-process .process-macro--interior .interior-bale-output .interior-material-loop {
  background-image: url("../img/Bailing.png") !important;
}

.page-process .process-macro--interior .interior-material-loop img {
  display: none !important;
}

/* ==========================================================
   4. MACHINES
   Keep bench out of machine footprints.
   ========================================================== */
.page-process .process-macro--interior .interior-shredder {
  z-index: 42 !important;
}

.page-process .process-macro--interior .interior-baler {
  z-index: 42 !important;
}

/* ==========================================================
   5. FINAL DISPATCH TRUCK
   ========================================================== */
.page-process .process-macro--interior .interior-dispatch-truck {
  left: calc(var(--screen) * 3.47) !important;
  bottom: -6.6% !important;
  width: clamp(325px, 23vw, 418px) !important;
  max-width: none !important;
  z-index: 40 !important;
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width: 760px) {
  .page-process .process-macro--interior {
    --warehouse-belt-bottom: -2.8%;
    --warehouse-belt-height: 160px;
  }

  .page-process .process-macro--interior .interior-shell-tile img {
    top: -4.5% !important;
    height: 100% !important;
    width: 152% !important;
  }

  .page-process .process-macro--interior .interior-shell-tile::after {
    height: 10.5%;
    background-size: 152% auto;
  }

  .page-process .process-macro--interior .interior-shell-tile--entry img {
    left: 0 !important;
  }

  .page-process .process-macro--interior .interior-shell-tile--closed img {
    left: -26% !important;
  }

  .page-process .process-macro--interior .interior-shell-tile--exit img {
    left: -52% !important;
    transform: scaleX(-1) !important;
  }

  .page-process .process-macro--interior .interior-belt-run--mixed {
    left: calc(var(--screen) * 0.4) !important;
    width: calc(var(--screen) * 0.76) !important;
  }

  .page-process .process-macro--interior .interior-belt-run--shredded {
    left: calc(var(--screen) * 1.61) !important;
    width: calc(var(--screen) * .70) !important;
  }

  .page-process .process-macro--interior .interior-belt-run--baled {
    left: calc(var(--screen) * 2.53) !important;
    width: calc(var(--screen) * .88) !important;
  }

  .page-process .process-macro--interior .interior-belt-piece--middle {
    margin-left: -48px !important;
  }

  .page-process .process-macro--interior .interior-belt-piece--middle+.interior-belt-piece--middle {
    margin-left: -56px !important;
  }

  .page-process .process-macro--interior .interior-waste-window {
    left: calc(var(--screen) * .30) !important;
    bottom: 16.4% !important;
    width: calc(var(--screen) * 0.9) !important;
    height: 29px !important;
  }

  .page-process .process-macro--interior .interior-belt-run {
    display: flex !important;
    align-items: flex-end !important;
    bottom: 9px !important;
    height: var(--warehouse-belt-height) !important;
    overflow: hidden !important;
    background: none !important;
    gap: 0 !important;
    z-index: 22 !important;
    pointer-events: none !important;
  }

  .page-process .process-macro--interior .interior-shred-output-track {
    left: calc(var(--screen) * 1.91) !important;
    bottom: 21.4% !important;
    width: calc(var(--screen) * .70) !important;
    height: 25px !important;
  }

  .page-process .process-macro--interior .interior-shred-output-track {
    left: calc(var(--screen) * 1.61) !important;
    bottom: 16.4% !important;
    width: calc(var(--screen) * .70) !important;
    height: 25px !important;
  }

  .page-process .process-macro--interior .interior-bale-output {
    left: calc(var(--screen) * 2.53) !important;
    bottom: 15.9% !important;
    width: calc(var(--screen) * .86) !important;
    height: 45px !important;
  }

  .page-process .process-macro--interior .interior-dispatch-truck {
    left: calc(var(--screen) * 3.42) !important;
    bottom: 6.5% !important;
    width: 235px !important;
  }
}

/* ==========================================================================
   FINAL SMALL BENCH HEIGHT + LAST DISPATCH ALIGNMENT FIX
   Requested change only:
   1) make conveyor/bench physically taller so legs meet the warehouse floor
   2) remove final Bailing -> truck gap
   3) keep the conveyor TOP/material alignment unchanged
   ========================================================================== */

@media (min-width: 761px) {
  .page-process .process-macro--interior {
    /*
      Old visual top:
        -6% bottom + ~24.5vh height

      New:
        more height + lower bottom
      This makes the legs longer / grounded while keeping the belt TOP
      almost in the exact same place, so waste alignment does not break.
    */
    --warehouse-belt-bottom: -11% !important;
    --warehouse-belt-height: clamp(255px, 29.5vh, 305px) !important;
  }

  /* Bailing machine -> dispatch truck:
     start immediately after the baler and finish under the truck body.
     No blank conveyor gap before the truck. */
  .page-process .process-macro--interior .interior-belt-run--baled {
    left: calc(var(--screen) * 2.51) !important;
    width: calc(var(--screen) * .97) !important;
  }

  /* Fill the complete final conveyor with bales. */
  .page-process .process-macro--interior .interior-bale-output {
    left: calc(var(--screen) * 2.52) !important;
    width: calc(var(--screen) * .94) !important;
  }

  /* Bring truck a touch toward the conveyor so the final composition
     matches the reference: baler -> continuous bench -> truck/loading bay. */
  .page-process .process-macro--interior .interior-dispatch-truck {
    left: calc(var(--screen) * 3.46) !important;
    bottom: -6.2% !important;
  }

  /* The taller bench should not visually expose seams between supplied PNGs. */
  .page-process .process-macro--interior .interior-belt-piece--middle {
    margin-left: -126px !important;
  }

  .page-process .process-macro--interior .interior-belt-piece--middle+.interior-belt-piece--middle {
    margin-left: -142px !important;
  }
}

@media (max-width: 760px) {
  .page-process .process-macro--interior {
    /*
      Same idea on mobile:
      taller bench + lower bottom = same belt-top position,
      but legs now reach the floor.
    */
    --warehouse-belt-bottom: -7% !important;
    --warehouse-belt-height: 190px !important;
  }

  .page-process .process-macro--interior .interior-belt-run--baled {
    left: calc(var(--screen) * 2.51) !important;
    width: calc(var(--screen) * .95) !important;
  }

  .page-process .process-macro--interior .interior-bale-output {
    left: calc(var(--screen) * 2.52) !important;
    width: calc(var(--screen) * .91) !important;
  }

  .page-process .process-macro--interior .interior-dispatch-truck {
    left: calc(var(--screen) * 3.40) !important;
    bottom: 6% !important;
  }

  .page-process .process-macro--interior .interior-belt-piece--middle {
    margin-left: -54px !important;
  }

  .page-process .process-macro--interior .interior-belt-piece--middle+.interior-belt-piece--middle {
    margin-left: -64px !important;
  }
}

/* ==========================================================================
   FINAL REQUESTED FIX — FLOOR + BAILING MACHINE GAP + FINAL TRUCK
   This block intentionally overrides only the Process Story warehouse.
   ========================================================================== */

/* ----------------------------------------------------------
   A. REMOVE THE BROKEN BOTTOM FLOOR BAND
   The previous ::after floor extension created the flat beige strip.
   Fill the viewport with the actual warehouse image instead.
   ---------------------------------------------------------- */
.page-process .process-macro--interior .interior-shell-tile::after {
  display: none !important;
}

.page-process .process-macro--interior .interior-shell-tile img {
  top: -6% !important;
  height: 106% !important;
  /* -6 + 106 = 100: image still reaches bottom */
}

/* Keep the correct warehouse crops. */
.page-process .process-macro--interior .interior-shell-tile--entry img {
  left: 0 !important;
  width: 145% !important;
  object-position: left center !important;
  transform: none !important;
}

.page-process .process-macro--interior .interior-shell-tile--closed img {
  left: -22.5% !important;
  width: 145% !important;
  object-position: center center !important;
  transform: none !important;
}

/* Right-side loading bay: mirrored version of the Segregation opening. */
.page-process .process-macro--interior .interior-shell-tile--exit img {
  left: -45% !important;
  width: 145% !important;
  object-position: left center !important;
  transform: scaleX(-1) !important;
}

/* ----------------------------------------------------------
   B. SLIGHTLY TALLER BENCH, BUT KEEP ITS TOP ALMOST UNCHANGED
   Increasing both height and negative bottom together makes the
   legs visually taller without pushing the waste away from the belt.
   ---------------------------------------------------------- */
@media (min-width: 761px) {
  .page-process .process-macro--interior {
    --warehouse-belt-bottom: -13.5% !important;
    --warehouse-belt-height: clamp(270px, 31vh, 325px) !important;
  }

  /* Segregation -> shredder: stop exactly before machine. */
  .page-process .process-macro--interior .interior-belt-run--mixed {
    left: calc(var(--screen) * .17) !important;
    width: calc(var(--screen) * 1.03) !important;
  }

  /* Shredder -> baler:
     leave a REAL clear machine footprint around the baler.
     No conveyor behind the Bailing machine. */
  .page-process .process-macro--interior .interior-belt-run--shredded {
    left: calc(var(--screen) * 1.64) !important;
    width: calc(var(--screen) * .63) !important;
  }

  /* Baler -> final truck:
     starts AFTER the machine and runs continuously to the truck. */
  .page-process .process-macro--interior .interior-belt-run--baled {
    left: calc(var(--screen) * 2.1) !important;
    width: calc(var(--screen) * 1.6) !important;
  }

  /* Match the material exactly to those visible conveyor runs. */
  .page-process .process-macro--interior .interior-shred-output-track {
    left: calc(var(--screen) * 1.64) !important;
    width: calc(var(--screen) * .83) !important;
  }

  .page-process .process-macro--interior .interior-bale-output {
    left: calc(var(--screen) * 2.40) !important;
    width: calc(var(--screen) * 1.6) !important;
  }

  /* Final truck = same visual size/bottom as Segregation truck,
     mirrored and parked at the RIGHT loading opening. */
  .page-process .process-macro--interior .interior-dispatch-truck {
    bottom: -31.6% !important;
    width: clamp(321px, 80vw, 675px) !important;
    max-width: none !important;
    z-index: 40 !important;
  }
}

@media (max-width: 760px) {
  .page-process .process-macro--interior {
    --warehouse-belt-bottom: -10% !important;
    --warehouse-belt-height: 205px !important;
  }

  .page-process .process-macro--interior .interior-shell-tile img {
    top: -8% !important;
    height: 127% !important;
  }

  .page-process .process-macro--interior .interior-shell-tile--entry img {
    left: 0 !important;
    width: 152% !important;
  }

  .page-process .process-macro--interior .interior-shell-tile--closed img {
    left: -26% !important;
    width: 152% !important;
  }

  .page-process .process-macro--interior .interior-shell-tile--exit img {
    left: -52% !important;
    width: 152% !important;
    transform: scaleX(-1) !important;
  }

  .page-process .process-macro--interior .interior-belt-run--shredded {
    left: calc(var(--screen) * 1.62) !important;
    width: calc(var(--screen) * 1.65) !important;
  }

  .page-process .process-macro--interior .interior-belt-run--baled {
    left: calc(var(--screen) * 2.57) !important;
    width: calc(var(--screen) * 1.08) !important;
  }

  .page-process .process-macro--interior .interior-shred-output-track {
    left: calc(var(--screen) * 1.92) !important;
    width: calc(var(--screen) * .65) !important;
  }

  .page-process .process-macro--interior .interior-bale-output {
    left: calc(var(--screen) * 2.58) !important;
    width: calc(var(--screen) * 1.05) !important;
  }

  .page-process .process-macro--interior .interior-dispatch-truck {

    left: calc(var(--screen) * 2.7) !important;
    bottom: -4% !important;
    width: 402px !important;
  }
}




/* =========================================================
   REUSABLE INNER CTA — FIXED TO MATCH HOME STYLE
   ========================================================= */

.lw-inner-cta {
  width: 100%;
  padding: 42px 32px 56px;
  background: #fff;
}

.lw-inner-cta__container {
  width: min(calc(100% - 20px), 1320px);
  margin-inline: auto;
}

.lw-inner-cta__card {
  position: relative;

  width: 100%;
  min-height: 399px;

  display: flex;
  align-items: center;

  padding: 40px 70px;

  overflow: hidden;

  border-radius: 12px;

  isolation: isolate;
}


/* background */
.lw-inner-cta__bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center center;

  z-index: 0;

  pointer-events: none;
}


/* remove overlay */
.lw-inner-cta__card::after {
  display: none;
}


/* content */
.lw-inner-cta__content {
  position: relative;
  z-index: 3;

  width: min(100%, 520px);

  margin-left: 0;

  text-align: center;
  left: 26%;
}


.lw-inner-cta__content h2 {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: #101710;
}


.lw-inner-cta__content p {
  max-width: 480px;

  margin: 18px 0 0;

  font-family: "DM Sans", sans-serif;

  font-size: 15px;
  line-height: 1.5;

  color: #27352e;
}


/* button */
.lw-inner-cta__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 44px;

  margin-top: 22px;

  padding: 0 20px;
  border: 1px solid rgba(26, 129, 90, 1);
  background: transparent;
  color: rgba(26, 129, 90, 1);

  border-radius: 12px;

  font-family: "DM Sans", sans-serif;

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
}





/* birds */
.lw-inner-cta__bird {
  position: absolute;

  z-index: 2;

  width: 28px;

  height: auto;

  pointer-events: none;
}


.lw-inner-cta__bird--1 {
  top: 23%;
  left: 16%;
}


.lw-inner-cta__bird--2 {
  top: 20%;
  left: 19%;
}


.lw-inner-cta__bird--3 {
  top: 16%;
  left: 22%;
}

@media (max-width: 760px) {

  .lw-inner-cta {
    padding: 28px 16px 38px;
  }

  .lw-inner-cta__container {
    width: 100%;
  }

  .lw-inner-cta__card {
    min-height: 190px;

    padding: 22px 18px;

    border-radius: 10px;
  }


  .lw-inner-cta__bg {
    object-fit: cover;

    /*
      Important:
      moves the background so the useful middle
      part stays visible on mobile
    */
    object-position: center center;
  }


  .lw-inner-cta__content {
    width: 100%;
    max-width: 290px;

    text-align: center;
    left: 0%;
    margin-inline: auto;
  }


  .lw-inner-cta__content h2 {
    font-size: 19px;
    line-height: 1.15;
  }


  .lw-inner-cta__content p {
    max-width: 34ch;

    margin: 9px auto 0;

    font-size: 11px;
    line-height: 1.4;
  }


  .lw-inner-cta__button {
    min-height: 34px;

    margin-top: 13px;

    padding: 0 15px;

    font-size: 10px;
  }


  .lw-inner-cta__bird {
    width: 14px;
  }


  .lw-inner-cta__bird--1 {
    top: 8%;
    left: 43%;
  }

  .lw-inner-cta__bird--2 {
    top: 8%;
    left: 48%;
  }

  .lw-inner-cta__bird--3 {
    top: 8%;
    left: 53%;
  }

}


/* ==========================================================
   DESKTOP HEADER — STICKY ONLY AFTER SCROLL
   ========================================================== */

@media (min-width: 1025px) {

  /* Normal state — keep original header behaviour */
  .page-process .gallery-header {
    z-index: 9999;
  }

  /* Only becomes fixed AFTER scrolling */
  .page-process .gallery-header.is-stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 9999 !important;

    background: #fff !important;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);

    animation: processHeaderDown 0.3s ease forwards;
  }

  @keyframes processHeaderDown {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translateY(0);
    }
  }
}






/* ==========================================================
   PROCESS STORY — WASTE ROUTE TOGGLE
   ========================================================== */

.page-process .process-toggle {
  position: absolute;

  left: 50%;
  top: 38%;

  transform: translate(-50%, -50%);

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  width: 390px;
  height: 52px;

  padding: 4px;

  border-radius: 999px;

  background: rgba(177, 173, 172, 0.96);

  border: 1px solid rgba(255, 255, 255, 0.48);

  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);

  overflow: hidden;

  z-index: 100;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.page-process .process-toggle__option {
  appearance: none;
  -webkit-appearance: none;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0 14px;

  border: 0;
  outline: 0;

  border-radius: 999px;

  background: transparent;

  color: rgba(255, 255, 255, 0.96);

  font-family: inherit;

  font-size: 14px;
  font-weight: 600;

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}


/* ==========================================================
   ACTIVE BUTTON
   ========================================================== */

.page-process .process-toggle__option.is-active,
.page-process .process-toggle__option[aria-pressed="true"] {
  background: #ffffff;

  color: #0c0c0c;

  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 4px 7px rgba(0, 0, 0, 0.06);
}


/* ==========================================================
   INACTIVE BUTTON
   ========================================================== */

.page-process .process-toggle__option:not(.is-active) {
  background: transparent;

  color: rgba(255, 255, 255, 0.92);
}


/* ==========================================================
   ICON
   ========================================================== */

.page-process .process-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  color: currentColor;
}


.page-process .process-toggle__icon svg {
  display: block;

  width: 18px;
  height: 18px;

  fill: currentColor;
}


/* ==========================================================
   HOVER / FOCUS
   ========================================================== */

.page-process .process-toggle__option:hover {
  opacity: 0.95;
}


.page-process .process-toggle__option:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: -4px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

  .page-process .process-toggle {
    width: 350px;
    height: 50px;
  }

  .page-process .process-toggle__option {
    gap: 7px;

    padding: 0 12px;

    font-size: 13px;
  }

  .page-process .process-toggle__icon,
  .page-process .process-toggle__icon svg {
    width: 17px;
    height: 17px;
  }

  .page-process .process-toggle__icon {
    flex-basis: 17px;
  }
}

/* ==========================================================
   FINAL MOBILE PROCESS TOGGLE FIX
   DESKTOP UNTOUCHED
   ========================================================== */

@media (max-width: 760px) {

  .page-process .process-toggle {
    position: absolute !important;

    /* IMPORTANT: mobile header = 68px */
    top: 13% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;

    width: min(calc(100vw - 24px), 320px) !important;
    max-width: 320px !important;

    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 3px !important;

    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 999px !important;

    background: rgba(177, 173, 172, 0.96) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.12),
      inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;

    overflow: hidden !important;

    z-index: 150 !important;

    /*
      IMPORTANT:
      DO NOT put opacity / visibility here.
      JS already controls when the toggle appears.
    */
  }


  .page-process .process-toggle__option {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    border: 0 !important;
    outline: none !important;
    border-radius: 999px !important;

    background: transparent !important;

    color: #fff !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    cursor: pointer !important;
  }


  .page-process .process-toggle__option.is-active,
  .page-process .process-toggle__option[aria-pressed="true"] {
    color: #111 !important;
    background: #fff !important;

    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.08) !important;
  }


  .page-process .process-toggle__option:not(.is-active) {
    color: #fff !important;
    background: transparent !important;
  }


  .page-process .process-toggle__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    flex: 0 0 15px !important;
  }


  .page-process .process-toggle__icon svg {
    display: block !important;

    width: 15px !important;
    height: 15px !important;

    fill: currentColor !important;
  }
}



.page-process .process-story[data-branch="recyclable"] .process-macro--interior .interior-waste-window {
  left: calc(var(--screen) * 0.3) !important;
  width: calc(var(--screen) * 1.38) !important;
}



/* ==========================================================
   RECYCLABLE ROUTE
   CONTINUE FIRST WASTE UP TO BAILING MACHINE
   ========================================================== */

.page-process .process-story[data-branch="recyclable"] .process-macro--interior .interior-waste-window {

  /* extend original waste from Recycling all the way to Bailing */
  width: calc(var(--screen) * 2.15) !important;

  opacity: 1 !important;
  visibility: visible !important;

  background-image: url("../img/waste-strips.png") !important;
  background-repeat: repeat-x !important;
  background-position-y: 100% !important;
  background-size: auto 100% !important;

  z-index: 27 !important;

  overflow: hidden !important;
}


















/* ===== TABLET — .lw-inner-cta__content ===== */

/* Tablet portrait (iPad, iPad Air, iPad Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  .lw-inner-cta__content {
    position: relative;
    z-index: 3;
    width: min(100%, 520px);
    margin-left: 0;
    text-align: center;
    left: 0%;
  }
}



/* ===== TABLET — .page-process .destination-mountain ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .destination-mountain {

    position: absolute;
    bottom: -7%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    max-width: none;
    z-index: 2;

  }
}



/* ===== TABLET — .page-process .destination-trees ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .destination-trees {

    position: absolute;
    left: -4%;
    bottom: -3%;
    width: 144%;
    max-width: none;
    z-index: 8;
  }

  .page-process .destination-plant--cement {
    right: -8%;
    bottom: 15px;
    z-index: 46;
    width: clamp(480px, 52vw, 980px);
  }
}



/* ===== TABLET — .page-process .story-jeep--destination ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .story-jeep--destination {
    bottom: -5%;
    z-index: 32;
  }
}



/* ===== TABLET — .page-process .destination-plant--recycling ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .destination-plant--recycling {
    right: -14%;
    bottom: -2%;
    width: clamp(380px, 62vw, 560px);
  }
}



/* ===== TABLET — .page-process .process-macro--interior ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .process-macro--interior {
    --warehouse-belt-bottom: 8% !important;
    --warehouse-belt-height: clamp(180px, 22vh, 260px) !important;
  }
}



/* ===== TABLET — .page-process .interior-delivery-truck ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .interior-delivery-truck {
    left: calc(var(--screen) * 0.10);
    bottom: 10%;
    width: clamp(340px, 52vw, 480px);
    max-width: none;
    z-index: 36;
  }
}



/* ===== TABLET — .page-process .interior-recycle-bin ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .interior-recycle-bin {
    left: calc(var(--screen, 100vw) * 0.48);
    bottom: 14%;
    width: clamp(160px, 24vw, 210px);
    max-width: none;
    z-index: 35;
    transition: transform 0.62s cubic-bezier(0.22, 0.8, 0.22, 1);
  }
}




/* ===== TABLET — .page-process .YOUR-SELECTOR ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .YOUR-SELECTOR {
    left: calc(var(--screen, 100vw) * 0.48);
    bottom: 24%;
    width: clamp(150px, 26vw, 230px);
    max-width: none;
    z-index: 20;
    transform-origin: 43% 78%;
  }
}




/* ===== TABLET — .page-process .interior-worker ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .interior-worker {

    left: calc(var(--screen, 100vw) * 0.68);
    bottom: 22%;
    width: clamp(200px, 30vw, 260px);
    max-width: none;
    z-index: 18;

  }

  .page-process .interior-robot {
    left: calc(var(--screen) * 0.55);
    bottom: 24.5%;
    z-index: 20;
    width: clamp(190px, 24vw, 400px);
    max-width: none;
    transform-origin: 43% 78%;
  }
}


/* ===== TABLET — .page-process .interior-waste-window ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .process-macro--interior .interior-waste-window {
    left: calc(var(--screen, 100vw) * 0.15) !important;
    bottom: 26% !important;
  }
}




/* ===== TABLET — .page-process .interior-shredder ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .interior-shredder {
    left: calc(var(--screen, 100vw) * 1.10);
    bottom: 8%;
    width: clamp(320px, 80vw, 472px);
  }
}



/* ===== TABLET — .page-process .interior-shred-output-track ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .process-macro--interior .interior-shred-output-track {
    bottom: 26% !important;
  }
}




/* ===== TABLET — .page-process .interior-baler ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .interior-baler {
    left: calc(var(--screen, 100vw) * 2.33);
    bottom: 9%;
    width: clamp(233px, 71vw, 289px);
  }

  .page-process .process-macro--interior .interior-bale-output {
    left: calc(var(--screen) * 2.40) !important;
    width: calc(var(--screen) * 1.2) !important;
  }
}




/* ===== TABLET — .page-process .interior-bale-output ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .process-macro--interior .interior-bale-output {
    bottom: 26.5% !important;
  }
}



/* ===== TABLET — .page-process .interior-dispatch-truck ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .process-macro--interior .interior-dispatch-truck {
    left: calc(var(--screen, 100vw) * 3.05) !important;
    bottom: 0% !important;
  }
}




/* ===== TABLET — .page-process .collection-world__mountains ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .collection-world__mountains {
    position: absolute;
    left: -20px;
    bottom: -1%;
    width: 260vw;
    height: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 2;
    will-change: transform;
  }

  .page-process .story-jeep--collection {
    bottom: -3.2%;
    width: 236px;
  }

  .page-process .collection-world__mountains img {
    display: block;
    flex: 0 0 71vw;
    width: 40vw;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
  }

  .page-process .collection-world__trees img {
    display: block;
    flex: 0 0 171vw;
    width: 100vw;
    max-width: none;
    object-fit: cover;
    object-position: bottom center;
  }


}




/* ===== TABLET — .page-process .collection-world__trees ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .collection-world__trees {
    position: absolute;
    left: 0;
    bottom: 4%;
    width: 250vw;
    display: flex;
    align-items: flex-end;
    z-index: 8;
    will-change: transform;
  }
}




/* ===== TABLET — .page-process .collection-person ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .collection-person {


    position: absolute;
    left: 64vw;
    bottom: 8%;
    width: clamp(44px, 34vw, 90px);
    max-width: none;
    z-index: 18;

  }
}




/* ===== TABLET — .page-process .collection-bins ===== */

/* Tablet portrait (iPad, Air, Mini) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-process .collection-bins {
    position: absolute;
    left: 78vw;
    bottom: 8%;
    width: clamp(38px, 40.4vw, 52px);
    max-width: none;
    z-index: 19;
  }

  .page-process .collection-factory:not([data-collection-factory-overlay]) {
    position: absolute;
    left: 288vw !important;
    bottom: 2%;
    z-index: 45 !important;
    width: clamp(800px, 75vw, 1400px);
    max-width: none;
  }

  .page-process .story-jeep {
    position: absolute;
    left: 0;
    z-index: 32;
    width: clamp(23px, 34vw, 260px);
    max-width: none;
    transform-origin: center bottom;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .16));
    will-change: transform;
  }

  .page-process .process-macro--interior .interior-belt-run {
    display: flex !important;
    align-items: flex-end !important;
    bottom: 121px !important;
    height: var(--warehouse-belt-height) !important;
    overflow: hidden !important;
    background: none !important;
    gap: 0 !important;
    z-index: 22 !important;
    pointer-events: none !important;
  }
}


@media only screen and (max-width: 375px) and (max-height: 700px) {

  .page-process .story-jeep--collection {
    bottom: -4%;
    width: 159px;
  }


}

/* MacBook Air / Laptop screens only */
@media only screen and (min-width: 1200px) and (max-width: 1440px) and (max-height: 850px) {

  .page-process .collection-world__mountains {
    position: absolute;
    left: -29px;
    bottom: -6%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    width: 210vw;
    height: 76%;
    will-change: transform;
  }

  .page-process .collection-world__trees {
    position: absolute;
    left: 0;
    bottom: 6%;
    z-index: 8;
    display: flex;
    align-items: flex-end;
    width: 200vw;
    will-change: transform;
  }

  .page-process .interior-delivery-truck {
    left: calc(var(--screen) * .10);
    bottom: -29%;
    z-index: 36;
    width: clamp(600px, 190vw, 550px);
    max-width: none;
  }

  .page-process .process-macro--interior .interior-belt-run {
    bottom: -7.5% !important;
    height: var(--warehouse-belt-height) !important;
  }

  .page-process .story-jeep--destination {
    bottom: -8.9%;
    z-index: 32;
  }

  .page-process .destination-plant--cement {
    right: -9%;
    bottom: -12px;
    z-index: 46;
    width: clamp(480px, 38vw, 980px);
  }

  .page-process .destination-plant--recycling {
    right: -13%;
    bottom: -2.5%;
    width: clamp(500px, 42vw, 720px);
  }
}





/* =====================================================
   iPad Air Portrait Only
   Does NOT affect iPad Mini
   Target: iPad Air 820 x 1180
===================================================== */

@media only screen and (min-width: 810px) and (max-width: 830px) and (min-height: 1100px) and (max-height: 1190px) and (orientation: portrait) {

  .page-process .process-macro--interior .interior-belt-run {
    display: flex !important;
    align-items: flex-end !important;
    bottom: 141px !important;
    height: var(--warehouse-belt-height) !important;
    overflow: hidden !important;
    background: none !important;
    gap: 0 !important;
    z-index: 22 !important;
    pointer-events: none !important;
  }

  .page-process .interior-shredder {
    left: calc(var(--screen, 100vw) * 1.10);
    bottom: 8%;
    width: clamp(320px, 96vw, 504px);
  }

  .page-process .story-jeep--destination {
    bottom: -4%;
    z-index: 32;
  }
}




/* iPad Mini portrait only - 768 x 1024 */
@media only screen and (min-width: 760px) and (max-width: 770px) and (min-height: 1018px) and (max-height: 1030px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  .page-process .destination-plant--recycling {
    right: -14% !important;
    bottom: 2% !important;
    width: clamp(380px, 62vw, 560px) !important;
  }

}

/* iPad Air portrait only - 820 x 1180 */
@media only screen and (min-width: 810px) and (max-width: 830px) and (min-height: 1170px) and (max-height: 1190px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  .page-process .destination-plant--recycling {
    right: -14% !important;
    bottom: 1% !important;
    width: clamp(380px, 62vw, 560px) !important;
  }

}



/* Surface Pro 7 portrait only - does not affect desktop */
@media only screen and (min-width: 900px) and (max-width: 920px) and (orientation: portrait) and (any-pointer: coarse) {

  .page-process .process-macro--interior .interior-belt-run {
    display: flex !important;
    align-items: flex-end !important;
    bottom: 183px !important;
    height: var(--warehouse-belt-height) !important;
    overflow: hidden !important;
    background: none !important;
    gap: 0 !important;
    z-index: 22 !important;
    pointer-events: none !important;
  }

  .page-process .interior-shredder {
    left: calc(var(--screen, 100vw) * 1.10);
    bottom: 14%;
    width: clamp(320px, 97vw, 549px);
  }

  .page-process .interior-baler {
    left: calc(var(--screen, 100vw) * 2.33);
    bottom: 11%;
    width: clamp(233px, 71vw, 337px);
  }

  .page-process .process-macro--interior .interior-dispatch-truck {
    left: calc(var(--screen, 100vw) * 3.10) !important;
    bottom: 4% !important;
  }
}



/* Hide delivery truck only when Recyclable is selected */
.page-process .process-story[data-branch="recyclable"] .interior-delivery-truck {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Reset delivery truck when Non Recyclable is selected */
.page-process .process-story[data-branch="non-recyclable"] .interior-delivery-truck {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* Recycling Plant layering fix */
.page-process .process-macro--plant .destination-scene {
  z-index: 1 !important;
}

.page-process .process-macro--plant .story-jeep--destination {
  z-index: 32 !important;
}

.page-process .process-macro--plant .destination-plant--recycling {
  position: absolute !important;
  z-index: 46 !important;
}




/* iPad Mini portrait only - 768px width */
/* @media only screen
and (min-width: 767px)
and (max-width: 769px)
and (orientation: portrait) {

  .page-process .process-hero .process-hero__trees {
    position: absolute !important;
    left: 0% !important;
    bottom: -11% !important;
    z-index: 8 !important;
    width: 120% !important;
    max-width: none !important;
    filter: saturate(.96) !important;
  }
.page-process .collection-world__mountains
 {
    position: absolute;
    left: -29px;
    bottom: 4%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    width: 210vw;
    height: 75%;
    will-change: transform;
}

.page-process .story-jeep--collection
 {
    bottom: -2.2%;
}

.page-process .collection-factory
 {
    position: absolute;
    left: 199vw;
    bottom: 4% !important;
    z-index: 45;
    width: clamp(800px, 75vw, 1400px);
    max-width: none;
}

.page-process .process-story__viewport {
    position: relative;
    width: 100%;
    height: 114%;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
}

.page-process .interior-delivery-truck
 {
    left: calc(var(--screen) * .12);
    bottom: 3%;
    z-index: 36;
    width: clamp(600px, 190vw, 550px);
    max-width: none;
}

.page-process .interior-recycle-bin {
    left: calc(var(--screen) * .28);
    bottom: 11.7%;
    z-index: 35;
    width: clamp(253px, 35vw, 275px);
    max-width: none;
    transform: translate3d(calc(var(--screen) * .20), 0, 0);
    transition: transform .62s cubic-bezier(.22, .8, .22, 1);
}

.page-process .interior-robot {
    left: calc(var(--screen) * .48);
    bottom: 27.5%;
    z-index: 20;
    width: clamp(190px, 24vw, 400px);
    max-width: none;
    transform-origin: 43% 78%;
}

.page-process .interior-worker {
    left: calc(var(--screen) * 0.6);
    bottom: 21%;
    z-index: 18;
    width: 390px;
    max-width: none;
}

.page-process .process-macro--interior .interior-belt-run {
    display: flex !important;
    align-items: flex-end !important;
    bottom: 9%!important;
    height: var(--warehouse-belt-height) !important;
    overflow: hidden !important;
    background: none !important;
    gap: 0 !important;
    z-index: 22 !important;
    pointer-events: none !important;
}


.page-process .process-macro--interior .interior-waste-window {
    left: calc(var(--screen) * .17) !important;
    bottom: 26.85% !important;
    width: calc(var(--screen) * 1.03) !important;
    height: 73px !important;
    overflow: hidden !important;
    z-index: 27 !important;
    background-image: url(../img/waste-strips.png) !important;
    background-repeat: repeat-x !important;
    background-position-y: 100% !important;
    background-size: auto 100% !important;
    animation: none !important;
    pointer-events: none !important;
}

    .page-process .interior-shredder
 {
        left: calc(var(--screen) * 1.15);
        bottom: 8.7%;
        z-index: 42;
        width: clamp(502px, 50vw, 890px);
    }

    .page-process .process-macro--interior .interior-shred-output-track {
    left: calc(var(--screen) * 1.61) !important;
    bottom: 26.85% !important;
    width: calc(var(--screen) * .70) !important;
    height: 35px !important;
    z-index: 34 !important;
    overflow: hidden !important;
}

.page-process .interior-baler
 {
    left: calc(var(--screen) * 2.10);
    bottom: 11.7%;
    z-index: 42;
    width: clamp(260px, 23vw, 325px);
}

.page-process .process-macro--interior .interior-bale-output {
    left: calc(var(--screen) * 2.53) !important;
    bottom: 26.25% !important;
    width: calc(var(--screen) * .88) !important;
    height: 60px !important;
    z-index: 34 !important;
    overflow: hidden !important;
}

    .page-process .process-macro--interior .interior-dispatch-truck
 {
        left: calc(var(--screen) * 3.0) !important;
 }

    .page-process .process-macro--interior .interior-dispatch-truck {
        bottom: -1.6% !important;
        width: clamp(321px, 87vw, 675px) !important;
        max-width: none !important;
        z-index: 40 !important;
    }
} */

/* Desktop only - reduce gap between footer nav columns */
@media (min-width: 1025px) {

  .gallery-footer__nav+.gallery-footer__nav {
    margin-left: -110px !important;
  }

}


/* =========================================================
   FINAL DESKTOP WASTE SURFACE ALIGNMENT FIX
   Paste at the VERY BOTTOM of process.css
   ========================================================= */

@media (min-width: 1025px) {
  .page-process .process-macro--interior {
    --warehouse-belt-bottom: -13.5% !important;
    --warehouse-belt-height: clamp(270px, 31vh, 325px) !important;
    --warehouse-waste-height: 50px !important;
  }

  .page-process .process-macro--interior .interior-belt-run {
    bottom: var(--warehouse-belt-bottom) !important;
    height: var(--warehouse-belt-height) !important;
  }

  .page-process .process-macro--interior .interior-waste-window {
    left: calc(var(--screen) * .17) !important;
    width: calc(var(--screen) * 1.03) !important;

    bottom: calc(var(--warehouse-belt-bottom) + var(--warehouse-belt-height) - 92px) !important;

    height: var(--warehouse-waste-height) !important;

    overflow: hidden !important;
    z-index: 27 !important;
    pointer-events: none !important;

    background-image: url("../img/waste-strips.png") !important;
    background-repeat: repeat-x !important;
    background-position: 0 100% !important;
    background-size: auto 100% !important;
    animation: none !important;
  }

  .page-process .process-macro--interior .interior-waste-strip {
    display: none !important;
  }

  /* Shredding output waste - desktop 80% zoom belt alignment */
  .page-process .process-macro--interior .interior-shred-output-track {
    bottom: calc(var(--warehouse-belt-bottom) + var(--warehouse-belt-height) - 97px) !important;
    height: 42px !important;
    overflow: hidden !important;
    z-index: 34 !important;
    pointer-events: none !important;
  }


  /* Bailing output waste - desktop 80% zoom belt alignment */
  .page-process .process-macro--interior .interior-bale-output {
    bottom: calc(var(--warehouse-belt-bottom) + var(--warehouse-belt-height) - 98px) !important;
    height: 60px !important;
    overflow: hidden !important;
    z-index: 34 !important;
    pointer-events: none !important;
  }
}




/* iPad Mini Portrait */
@media only screen and (min-width:768px) and (max-width:820px) and (orientation:portrait) {

  .page-process .process-hero__trees {
    left: 0%;
    bottom: -10%;
    width: 112%;
  }

}

/* LABEL CSS FOR CTA */

.lw-inner-cta__label--mobile {
  display: none;
}

@media (max-width: 760px) {

  .lw-inner-cta__label--desktop {
    display: none;
  }

  .lw-inner-cta__label--mobile {
    display: inline;
  }

  .lw-inner-cta__arrow {
    display: none;
  }

  .lw-inner-cta__button {
    display: flex;

    width: 100%;
    max-width: 170px;
    min-height: 34px;

    margin: 18px auto 0;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: #16815b;
    color: #fff;

    font-size: 12px;
    font-weight: 100;

    align-items: center;
    justify-content: center;
  }

}


/* ==========================================================================
   PROCESS STORY — MOBILE BELT + MATERIAL ALIGNMENT (SINGLE SOURCE OF TRUTH)

   Paste this at the VERY BOTTOM of process.css.

   Before pasting, DELETE every per-device block that sets
   `.interior-belt-run { bottom: ...px }`, otherwise those px values will
   keep overriding this one. Full list at the bottom of this file.

   How it works
   ------------
   All four elements (bench, mixed waste, shredded output, bales) are
   derived from ONE anchor: --belt-bottom. Everything is expressed as a
   percentage of the same box (.process-macro--interior, which is inset:0
   inside .process-story__sticky), so the whole assembly scales with screen
   height instead of drifting.

   The old code mixed units:
       --warehouse-belt-bottom: -10%   (relative to screen height)
       --warehouse-belt-height: 205px  (fixed)
   Belt top = (-10% x H) + 205px, so on a 640px phone the top lands at
   141px and on a 950px phone at 110px — it moves the WRONG WAY as the
   screen grows. That is why every phone needed its own query.

   To tune: change --belt-bottom ONLY. The waste, shred and bale strips
   follow it automatically.
   ========================================================================== */

@media (max-width: 760px) {

  .page-process .process-story .process-macro--interior {
    /* ---- the one anchor ---------------------------------------------- */
    --belt-bottom: 0%;
    /* raise/lower the whole assembly here */
    --belt-height: 24%;
    /* bench height, relative not px */

    /* ---- material offsets (measured down from the bench top) --------- */
    --material-drop: 8%;
    /* bench top -> material bottom edge */
    --waste-h: 3.4%;
    --shred-h: 3.0%;
    --bale-h: 5.4%;

    /* ---- derived: do not edit ---------------------------------------- */
    --belt-top: calc(var(--belt-bottom) + var(--belt-height));
    --material-bottom: calc(var(--belt-top) - var(--material-drop));

    /* keep the legacy vars in sync so any leftover rule agrees */
    --warehouse-belt-bottom: var(--belt-bottom);
    --warehouse-belt-height: var(--belt-height);
  }

  /* ---- 1. THE BENCH ------------------------------------------------- */
  .page-process .process-story .process-macro--interior .interior-belt-run {
    bottom: var(--belt-bottom) !important;
    height: var(--belt-height) !important;
  }

  /* ---- 2. MIXED WASTE (segregation -> shredder) --------------------- */
  .page-process .process-story .process-macro--interior .interior-waste-window {
    bottom: var(--material-bottom) !important;
    height: var(--waste-h) !important;
  }

  /* ---- 3. SHREDDED OUTPUT (shredder -> baler) ---------------------- */
  .page-process .process-story .process-macro--interior .interior-shred-output-track {
    bottom: var(--material-bottom) !important;
    height: var(--shred-h) !important;
  }

  /* ---- 4. BALES (baler -> dispatch truck) -------------------------- */
  .page-process .process-story .process-macro--interior .interior-bale-output {
    /* bales are chunkier, so they sit a touch lower to keep their
       BOTTOM edge on the same belt surface line */
    bottom: calc(var(--material-bottom) - 0.5%) !important;
    height: var(--bale-h) !important;
  }

  /* ---- 5. MACHINES + TRUCKS ON THE SAME FLOOR LINE ------------------
     These were also being hand-tuned per device. Anchoring them to
     --belt-bottom means they move together with the bench.
     Delete this section if you want to keep tuning them by hand.       */

  .page-process .process-story .interior-shredder {
    bottom: calc(var(--belt-bottom) + 3.5%) !important;
    width: min(94vw, 348px) !important;
  }

  .page-process .process-story .interior-baler {
    bottom: calc(var(--belt-bottom) + 2%) !important;
    width: min(66vw, 294px) !important;
  }

  .page-process .process-story .interior-delivery-truck {
    left: calc(var(--screen) * .24) !important;
    bottom: calc(var(--belt-bottom) - 6%) !important;
    width: min(99vw, 390px) !important;
  }

  .page-process .process-story .process-macro--interior .interior-dispatch-truck {
    bottom: calc(var(--belt-bottom) - 6%) !important;
    width: min(103vw, 402px) !important;
  }
}

/* --------------------------------------------------------------------------
   OPTIONAL: very short phones (SE / Z30 class, <= 700px tall)
   The warehouse PNG is object-fit: cover, so on a short-and-wide box the
   image scales by WIDTH and its floor line creeps up slightly. One
   height-based query handles every such device — no model names needed.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   OPTIONAL: tall phones (Pro Max / Plus class, >= 900px tall)
   -------------------------------------------------------------------------- */
@media (max-width: 760px) and (min-height: 900px) {
  .page-process .process-story .process-macro--interior {
    --belt-bottom: 1.5%;
  }
}

/* ==========================================================================
   DELETE THESE BLOCKS FROM process.css BEFORE USING THE ABOVE
   (each one only sets .interior-belt-run { bottom: <px> } for one phone)

   1.  @media (min-width:370px) and (max-width:380px) and (max-height:700px)
       -> "iPhone SE only"                          bottom: -3.9%
   2.  @media (min-width:389px) and (max-width:391px)
       -> "iPhone 13 portrait"                      bottom: -17px
   3.  @media (min-width:358px) and (max-width:362px)
       -> "Samsung Galaxy S22"                      bottom: -14px
   4.  @media (min-width:389px) and (max-width:391px)
       -> "iPhone 12 portrait"                      bottom: -8px
   5.  @media (min-width:389px) and (max-width:391px)
       -> "iPhone 13 Pro portrait"                  bottom: -14px
   6.  @media (min-width:389px) and (max-width:391px)
       -> "iPhone 14 portrait"                      bottom: -17px
   7.  @media (min-width:374px) and (max-width:376px)
       -> "iPhone X portrait"                       bottom: -17px
   8.  @media (min-width:392px) and (max-width:394px)
       -> "Google Pixel 5 portrait"                 bottom: -4px
   9.  @media (max-width:360px) and (max-height:640px)
       -> "BlackBerry Z30 Portrait"                 bottom: -32px
   10. @media (min-width:428px) and (max-width:432px)
       -> "iPhone 14 Pro Max Portrait"              bottom: -3px
   11. @media (min-width:428px) and (max-width:431px) and (min-height:900px)
       -> "iPhone 15 Plus ONLY"                     bottom: 15px
   12. @media (min-width:438px) and (max-width:442px) and (min-height:950px)
       -> "iPhone 15 Pro Max ONLY"                  bottom: 2px
   13. @media (width:390px) and (height:844px)
       -> "iPhone 12 Pro ONLY"                      bottom: 0px

   Note: blocks 2, 4, 5, 6 all match the SAME 389-391px range, so only the
   last one in the file ever applies. -17px, -8px and -14px are dead code.
   ========================================================================== */
@media (max-width: 760px) and (max-height: 700px) {

  /* The 600px min-height is taller than the SE's ~553px small viewport,
     so anything anchored with bottom: fell below the fold. */
  .page-process .process-story__sticky {
    min-height: 0 !important;
  }

  .page-process .process-story .process-macro--interior {
    --belt-bottom: 0%;
  }

  /* SE sits lower than the other phones */
  .page-process .process-story .interior-delivery-truck {
    bottom: calc(var(--belt-bottom) - 10%) !important;
  }

  .page-process .process-step-copy,
  .page-process .collection-copy,
  .page-process .destination-copy,
  .page-process .process-step-copy--interior {
    top: 150px;
  }

  .page-process .process-toggle {
    top: 19% !important;
  }

  .page-process .story-jeep--destination {
    bottom: -1%;
  }
}



/* ==========================================================
   MOBILE PROCESS WHITE SPACE FIX
   Only mobile. Desktop and iPad not affected.
   ========================================================== */

@media (max-width: 760px) {

  .page-process .process-story__viewport {
    height: var(--process-mobile-vh, 100dvh) !important;
    overflow: hidden !important;
  }

}


/* ==========================================================
   MOBILE PROCESS TITLE + TOGGLE ALIGNMENT FIX
   Fixes Redmi / iPhone 13 / iPhone 17 / 360x640 devices
   Does not affect tablet or desktop
   ========================================================== */

@media (max-width: 760px) {

  /* Keep toggle at a stable safe position */
  .page-process .process-toggle {
    top: clamp(88px, calc(var(--process-mobile-vh, 100dvh) * 0.16), 128px) !important;
    left: 50% !important;
    width: calc(100% - 30px) !important;
    max-width: 380px !important;
    transform: translateX(-50%) !important;
    z-index: 120 !important;
  }

  /* Push title/content below toggle */
  .page-process .process-step-copy,
  .page-process .collection-copy,
  .page-process .destination-copy,
  .page-process .process-step-copy--interior {
    top: clamp(165px, calc(var(--process-mobile-vh, 100dvh) * 0.25), 232px) !important;
    width: calc(var(--screen) - 30px) !important;
  }

}

/* ==========================================================
   SHORT MOBILE HEIGHT FIX
   360x640 / small Android / Redmi small viewport
   ========================================================== */

@media (max-width: 760px) and (max-height: 700px) {

  .page-process .process-toggle {
    top: 92px !important;
  }

  .page-process .process-step-copy,
  .page-process .collection-copy,
  .page-process .destination-copy,
  .page-process .process-step-copy--interior {
    top: 158px !important;
  }

  .page-process .process-step-copy p {
    font-size: 0.58rem !important;
    line-height: 1.38 !important;
  }

}

/* ==========================================================
   SERVICE HERO - 80% ZOOM ROAD + CAR FIX
   Only for desktop zoomed-out laptop screens
   100% and 90% will not be affected
   ========================================================== */

@media (min-width: 1600px) and (max-width: 2200px) and (max-height: 1100px) {

  .page-services .services-hero {
    --road-bottom: 88px !important;
    --car-road-offset: 15px !important;
  }

  .page-services .hero-road {
    bottom: var(--road-bottom) !important;
  }

  .page-services .hero-car {
    bottom: calc(var(--road-bottom) - var(--car-road-offset)) !important;
  }

}

@media (max-width:760px) {

  .page-process .process-toggle {
    top: 18%;
    width: min(330px, 85vw);
  }

}



/* iPad Pro / Tablet Fix */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

  .page-process .process-story {
    height: 720vh;
  }


  .page-process .collection-world {
    width: 300vw;
  }


  .page-process .story-jeep--collection {
    bottom: -5%;
    width: 30vw;
  }


  .page-process .process-toggle {
    width: 360px;
    top: 35%;
  }


  .page-process .process-step-copy {
    width: 70vw;
  }


}



@media only screen and (min-width:768px) and (max-width:1024px) {

  .page-process .story-jeep--collection {
    bottom: -3%;
  }

  .page-process .process-step-copy {
    width: 75vw;
  }

}

@media (min-width:768px) and (max-width:1024px) {

  .page-process .collection-factory:not([data-collection-factory-overlay]) {
    left: 170vw;
    width: 650px;
  }

}

/* iPad Pro only */
@media only screen and (min-width: 1000px) and (max-width: 1100px) and (min-height: 1200px) and (max-height: 1400px) {

  .page-process .collection-world__mountains {

    position: absolute !important;
    left: -29px !important;
    bottom: 3% !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-end !important;
    width: 210vw !important;
    height: 75% !important;
    will-change: transform !important;

  }

  .page-process .story-jeep--collection {
    bottom: -0.2%;
  }

  .page-process .collection-person {
    position: absolute;
    left: 36.5vw;
    bottom: 9%;
    z-index: 18;
    width: clamp(83px, 3.4vw, 73px);
    max-width: none;
  }

  .page-process .collection-bins {
    position: absolute;
    left: 43.5vw;
    bottom: 9%;
    z-index: 19;
    width: clamp(66px, 4.2vw, 80px);
    max-width: none;
  }

  .page-process .collection-factory {
    position: absolute;
    left: 199vw;
    bottom: 5%;
    z-index: 45;
    width: clamp(900px, 75vw, 1400px);
    max-width: none;
  }

  .page-process .process-macro--interior {
    --warehouse-belt-bottom: 10.5% !important;
    --warehouse-belt-height: clamp(270px, 31vh, 325px) !important;
  }

  .page-process .process-macro--interior .interior-waste-window {
    left: calc(var(--screen) * .17) !important;
    bottom: 25.85% !important;
    width: calc(var(--screen) * 1.03) !important;
    height: 73px !important;
    overflow: hidden !important;
    z-index: 27 !important;
    background-image: url(../img/waste-strips.png) !important;
    background-repeat: repeat-x !important;
    background-position-y: 100% !important;
    background-size: auto 100% !important;
    animation: none !important;
    pointer-events: none !important;
  }

  .page-process .interior-delivery-truck {
    left: calc(var(--screen) * 0.14);
    bottom: 7%;
    z-index: 36;
    width: clamp(600px, 190vw, 550px);
    max-width: none;
  }

  .page-process .interior-recycle-bin {
    left: calc(var(--screen) * .24);
    bottom: 14.7%;
    z-index: 35;
    width: clamp(253px, 35vw, 275px);
    max-width: none;
    transform: translate3d(calc(var(--screen) * .20), 0, 0);
    transition: transform .62s cubic-bezier(.22, .8, .22, 1);
  }

  .page-process .interior-robot {
    left: calc(var(--screen) * .48);
    bottom: 25.5%;
    z-index: 20;
    width: clamp(190px, 24vw, 400px);
    max-width: none;
    transform-origin: 43% 78%;
  }


  .page-process .interior-worker {
    left: calc(var(--screen) * 0.7);
    bottom: 19%;
    z-index: 18;
    width: 390px;
    max-width: none;
  }

  .page-process .interior-shredder {
    left: calc(var(--screen) * 1.15);
    bottom: 5.7%;
    z-index: 42;
    width: clamp(802px, 50vw, 890px);
  }

  .page-process .process-macro--interior .interior-shred-output-track {
    left: calc(var(--screen) * 1) !important;
    width: calc(var(--screen) * 1.5) !important;
  }

  .page-process .process-macro--interior .interior-shred-output-track {
    left: calc(var(--screen) * 1.8) !important;
    bottom: 25.85% !important;
    width: calc(var(--screen) * .70) !important;
    height: 42px !important;
    z-index: 34 !important;
    overflow: hidden !important;
  }

  .page-process .interior-baler {
    left: calc(var(--screen) * 2.33);
    bottom: 9.7%;
    z-index: 42;
    width: clamp(343px, 23vw, 325px);
  }

  .page-process .process-macro--interior .interior-bale-output {
    left: calc(var(--screen) * 2.45) !important;
    bottom: 26.25% !important;
    width: calc(var(--screen) * 1.2) !important;
    height: 60px !important;
    z-index: 34 !important;
    overflow: hidden !important;
  }


  .page-process .process-macro--interior .interior-dispatch-truck {
    bottom: 1.4% !important;
    width: clamp(321px, 80vw, 675px) !important;
    max-width: none !important;
    z-index: 40 !important;
  }

  .page-process .process-macro--interior .interior-dispatch-truck {
    left: calc(var(--screen) * 3.20) !important;
    bottom: 0.8% !important;
  }

  .page-process .destination-mountain {
    position: absolute;
    bottom: -4%;
    z-index: 2;
    max-width: none;
  }

  .page-process .destination-trees {
    position: absolute;
    left: -2%;
    bottom: -3%;
    z-index: 8;
    width: 104%;
    max-width: none;
  }

  .page-process .story-jeep--destination {
    bottom: -3.9%;
    z-index: 32;
  }
}

/* Surface Pro 7 Portrait Only */
@media screen and (min-width: 900px) and (max-width: 920px) and (min-height: 1300px) and (max-height: 1400px) and (orientation: portrait) {

  .page-process .story-jeep--destination {

    bottom: -3% !important;
    z-index: 32 !important;

  }

}


/* Desktop zoom fix */
@media screen and (min-width: 1200px) {

  .page-process .process-story__viewport {
    overflow: hidden !important;
  }


  .page-process .collection-world {
    width: 100vw !important;
    max-width: none !important;
  }


  .page-process .interior-shredder {
    width: 850px !important;
  }


  .page-process .interior-baler {
    width: 320px !important;
  }


  .page-process .process-step-copy {
    width: 900px !important;
    max-width: 900px !important;
  }

}


/* MacBook Air / MacBook Pro 1440x900 only */
@media screen and (min-width: 1430px) and (max-width: 1450px) and (min-height: 890px) and (max-height: 910px) {

  .page-process .collection-world__trees {
    position: absolute;
    left: 0;
    bottom: 5%;
    z-index: 8;
    display: flex;
    align-items: flex-end;
    width: 200vw;
    will-change: transform;
  }

  .page-process .collection-world__mountains {
    position: absolute;
    left: -29px;
    bottom: -8%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    width: 210vw;
    height: 75%;
    will-change: transform;
  }

  .page-process .interior-delivery-truck {
    left: calc(var(--screen) * .10);
    bottom: -18%;
    z-index: 36;
    width: clamp(600px, 190vw, 550px);
    max-width: none;
  }

  .page-process .process-macro--interior {
    --warehouse-belt-bottom: -7.5% !important;
    --warehouse-belt-height: clamp(270px, 31vh, 325px) !important;
    --warehouse-waste-height: 50px !important;
  }

  .page-process .process-macro--interior .interior-dispatch-truck {
    bottom: -22.6% !important;
    width: clamp(321px, 80vw, 695px) !important;
    max-width: none !important;
    z-index: 40 !important;
    left: -6%;
  }

  .page-process .destination-plant--cement {
    right: -9%;
    bottom: -11px;
    z-index: 46;
    width: clamp(480px, 38vw, 980px);
  }

  .page-process .story-jeep--destination {
    bottom: -7.9%;
    z-index: 32;
  }

  .page-process .destination-plant--recycling {
    right: -13%;
    bottom: -1.5%;
    width: clamp(500px, 42vw, 720px);
  }
}