.page-about {
  --about-grass: #70aa45;
  --about-grass-deep: #55983b;
  --about-dark: #0d3b24;
  --about-green: rgba(26, 129, 90, 1);
  --about-card: #1d251f;
  --hero-progress: 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.page-about .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h, 68px);
  color: #fff;
  background: transparent;
  box-shadow: none;
  transition:
    color .25s ease,
    background-color .25s ease,
    box-shadow .25s ease,
    backdrop-filter .25s ease;
}

.page-about .site-header__inner {
  width: min(calc(100% - 48px), 1840px);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
}

.page-about .site-logo {
  justify-self: start;
}

.page-about .site-logo img {
  width: auto;
  height: 31px;
}

/* Keep the supplied logo artwork unchanged. */
.page-about .site-header:not(.is-stuck) .site-logo img {
  filter: none;
}

.page-about .desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(25px, 2.55vw, 49px);
}

.page-about .desktop-nav a {
  position: relative;
  color: rgba(239, 250, 244, 1);
  font-size: 12px;
  font-weight: 400;
}

.page-about .desktop-nav a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -9px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transition: right .22s ease;
}

.page-about .desktop-nav a:hover::after,
.page-about .desktop-nav a[aria-current="page"]::after {
  right: 0;
}

.page-about .header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.page-about .notification {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
}

.page-about .notification svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-about .login-button {
  min-width: 106px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #fff;
  background: var(--about-green);
  font-size: 12px;
  font-weight: 600;
}

.page-about .site-header.is-stuck {
  position: absolute;
  color: var(--ink, #16251b);
  /* background: rgba(255, 255, 255, .96); */
  box-shadow: 0 8px 28px rgba(19, 58, 40, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.page-about .site-header.is-stuck .desktop-nav a,
.page-about .site-header.is-stuck .notification {
  color: var(--ink, #16251b);
}

.page-about .site-header.is-stuck .desktop-nav a::after {
  background: var(--about-green);
}

.page-about .menu-button,
.page-about .mobile-menu {
  display: none;
}

/* ==========================================================================
   HERO
   The same banner is rendered twice. The second copy is clipped to the
   foreground. The title moves between those layers and becomes hidden behind
   the stone wall and hedge row while scrolling.
   ========================================================================== */

.page-about .ahero {
  --hero-cut: 43.5%;
  --hero-art-y: calc(var(--hero-progress, 0) * -34px);
  --hero-copy-y: calc(var(--hero-progress, 0) * 390px);

  position: relative;
  min-height: max(520px, min(56.25vw, 100svh));
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  /* background: #69a742; */
}

.page-about .ahero__banner,
.page-about .ahero__foreground {
  position: absolute;
  inset: -1% 0;
  width: 100%;
  height: 108%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform:
    translate3d(0, var(--hero-art-y), 0) scale(1.035);
  transform-origin: 50% 100%;
  will-change: transform;
}

.page-about .ahero__banner {
  z-index: 1;
}

.page-about .ahero__content {
  position: absolute;
  top: 18%;
  right: 0;
  left: 0;
  z-index: 2;
  padding-block: 0;
  text-align: center;
  transform: translate3d(0, var(--hero-copy-y), 0);
  will-change: transform;
}

.page-about .ahero__content .h-hero {
  color: #000;
  font-family: var(--font-display, "DM Sans", sans-serif);
  font-size: clamp(3.25rem, 5.05vw, 6.05rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: none;
}

.page-about .ahero__content p {
  max-width: min(68ch, 92%);
  margin: clamp(10px, 1vw, 20px) auto 0;
  color: #000;
  font-size: clamp(.92rem, 1.05vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
}

.page-about .ahero__foreground {
  z-index: 3;
  clip-path: inset(var(--hero-cut) 0 0 0);
}

/* ==========================================================================
   ABOUT LOWASTE
   ========================================================================== */

.page-about .aintro {
  position: relative;
  min-height: clamp(550px, 47vw, 980px);
  margin-top: -4px;
  padding-block: clamp(95px, 9vw, 165px);
  overflow: hidden;
  color: #101710;
  background:
    url("../img/about-us-ground.png") center top / cover no-repeat;
  contain: paint;
}

/* Desktop only — hero forest bleed, fixed offset instead of clamp() */
@media (min-width: 1025px) {
  .page-about .ahero__forest {
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    bottom: clamp(-124px, -4.6vw, -137px) !important;
    z-index: 999 !important;
    width: 114% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
    translate: none !important;
  }
}

.page-about .aintro::before {
  content: none;
}

.page-about .aintro__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 110px);
  align-items: center;
}

.page-about .aintro__copy {
  max-width: 650px;
}

.page-about .aintro__copy .h-sect {
  margin-bottom: clamp(14px, 1.25vw, 24px);
  color: #0d150e;
  font-size: clamp(2rem, 2.55vw, 3.15rem);
}

.page-about .aintro__copy p {
  max-width: 58ch;
  color: #172018;
  font-size: clamp(.94rem, 1vw, 1.12rem);
  line-height: 1.7;
}

.page-about .aintro__copy .btn {
  margin-top: clamp(22px, 2vw, 34px);
}

.page-about .aintro .btn--light {
  --btn-bg: var(--about-green);
  --btn-fg: #fff;
  box-shadow: none;
}

.page-about .aintro__scene {
  position: relative;
  min-height: clamp(330px, 30vw, 540px);
  display: grid;
  align-items: center;
}

.page-about .aintro__scene .warehouse {
  width: min(100%, 1300px);
  margin-left: auto;
  /* filter: drop-shadow(0 25px 35px rgba(30, 70, 22, .18)); */
  position: absolute;
  right: 4%;
  bottom: 5%;
}

.page-about .aintro__scene .truck {
  position: absolute;
  left: -75%;
  bottom: -23%;
  width: clamp(115px, 50vw, 361px);
}

.page-about .aintro__scene .forklift {
  position: absolute;
  right: -34px;
  bottom: -1%;
  width: clamp(86px, 46vw, 282px);
}

.page-about .aintro__scene .pallet {
  position: absolute;
  right: 26%;
  bottom: 10%;
  width: clamp(62px, 20.5vw, 105px);
}

/* ==========================================================================
   MISSION & VISION
   ========================================================================== */

.page-about .mission {
  position: relative;
  min-height: clamp(820px, 72vw, 1160px);
  padding-block: clamp(125px, 11vw, 200px);
  overflow: hidden;
  color: #111811;
  background:
    url("../img/about-us-roadground.png") center center / cover no-repeat;
  contain: paint;
}

.page-about .mission__road {
  /* position: absolute;
  top: 0;
  right: clamp(4%, 7vw, 10%);
  bottom: 0;
  width: clamp(190px, 18vw, 345px);
  background:
    url("../img/road.svg")
    repeat-y center top / 100% auto;
  filter: drop-shadow(0 0 26px rgba(18, 51, 20, .18)); */
}

.page-about .mission__road .truck {
  position: absolute;
  left: 37%;
  width: 53%;
  translate: -50% 0;
  will-change: top;
}

.page-about .mission__road .truck-1 {
  top: calc(-8% + (var(--sp, 0) * 93%));
  rotate: 180deg;
}

.page-about .mission__road .truck-2 {
  top: calc(84% - (var(--sp, 0) * 84%));
  rotate: 0deg;
}

.page-about .mission__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-about .mission__deco>* {
  position: absolute;
}

.page-about .mission .picnic {
  top: -17%;
  right: 46%;
  width: clamp(70px, 19vw, 189px);
}

.page-about .mission .play {
  top: 16%;
  right: 49%;
  width: clamp(76px, 9vw, 155px);
}

.page-about .mission .bin-1 {
  right: 32%;
  bottom: 28%;
  width: clamp(28px, 3vw, 52px);
}

.page-about .mission .bin-2 {
  right: 42%;
  bottom: 12%;
  width: clamp(24px, 2.7vw, 46px);
}

.page-about .mission__inner {
  position: relative;
  z-index: 3;
  max-width: 690px;
  margin-left: 7%;
}

.page-about .mission__inner .h-sect {
  margin-bottom: clamp(32px, 4vw, 58px);
  color: #0b120c;
  font-size: clamp(2rem, 2.6vw, 3.1rem);
}

.page-about .pillars {
  padding-left: 0;
}

.page-about .pillars::before,
.page-about .pillars::after,
.page-about .pillar::before {
  content: none;
}

.page-about .pillar+.pillar {
  margin-top: clamp(30px, 3.5vw, 52px);
}

.page-about .pillar {
  max-width: 610px;
}

.page-about .pillar h3 {
  margin-bottom: 8px;
  color: #101710;
  font-family: var(--font-display, "DM Sans", sans-serif);
  font-size: clamp(1.08rem, 1.45vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

.page-about .pillar p {
  max-width: 60ch;
  color: #283228;
  font-size: clamp(.88rem, .92vw, 1rem);
  line-height: 1.65;
}

/* ==========================================================================
   SUSTAINABILITY COMMITMENT
   ========================================================================== */

/* .page-about .commit {
  position: relative;
  min-height: 500px;
  padding-block: clamp(74px, 7vw, 120px);
  overflow: hidden;
  color: #111811;
  background:
    url("../img/about-us-last-ground.png")
    center center / cover no-repeat;
  contain: paint;
} */

.page-about .commit__top {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(30px, 5vw, 92px);
  align-items: end;
  margin-bottom: clamp(34px, 4vw, 62px);
}

.page-about .commit__top .h-sect {
  max-width: 470px;
  color: #0d150e;
  font-size: clamp(2rem, 2.55vw, 3.05rem);
}

.page-about .commit__top p {
  max-width: 920px;
  color: #1d281e;
  font-size: clamp(.9rem, .95vw, 1.04rem);
  line-height: 1.65;
}

.page-about .rail-wrap {
  position: relative;
}

.page-about .rail {
  display: flex;
  gap: clamp(12px, 1.1vw, 19px);
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-bottom: 14px;
  overflow-x: auto;
  cursor: grab;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.page-about .rail::-webkit-scrollbar {
  display: none;
}

.page-about .rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.page-about .rail.is-dragging * {
  pointer-events: none;
  user-select: none;
}

.page-about .commit-card {
  flex: 0 0 clamp(218px, 14.6vw, 270px);
  min-height: 255px;
  padding: clamp(20px, 1.55vw, 28px);
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  color: #fff;
  background: rgba(24, 22, 22, 1);
  box-shadow: 0 10px 24px rgba(25, 45, 26, .16);
  scroll-snap-align: start;
  transition:
    transform .35s var(--ease-out, ease),
    border-color .25s ease;
}

.page-about .commit-card:hover {
  transform: translateY(-6px);
  border-color: rgba(116, 206, 82, .52);
}

.page-about .commit-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 17px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  /* color: #5dcf89; */
  background: rgba(209, 250, 229, 0.2);
}

.page-about .commit-card__icon svg {
  width: 20px;
  height: 20px;
}

.page-about .commit-card h3 {
  min-height: 2.7em;
  margin-bottom: 10px;
  color: #fff;
  font-size: .95rem;
  line-height: 1.35;
}

.page-about .commit-card p {
  color: rgba(255, 255, 255, .72);
  font-size: .79rem;
  line-height: 1.58;
}

.page-about .rail-ctrl {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.page-about .rail-ctrl button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(19, 58, 34, .32);
  border-radius: 50%;
  color: #13251a;
  background: rgba(255, 255, 255, .42);
}

.page-about .rail-ctrl button[disabled] {
  opacity: .35;
  pointer-events: none;
}

.page-about .rail-ctrl svg {
  width: 18px;
  height: 18px;
}

.page-about .rail-progress {
  flex: 1;
  height: 3px;
  margin-left: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 49, 28, .2);
}

.page-about .rail-progress i {
  display: block;
  width: var(--rp, 8%);
  height: 100%;
  border-radius: inherit;
  background: #173f27;
}

/* ==========================================================================
   TEAM
   ========================================================================== */

.page-about .team {
  padding-block: clamp(64px, 7vw, 108px);
  color: #121812;
  text-align: center;
  background: #fff;
}

.page-about .team .sect-head {
  max-width: 650px;
}

.page-about .team__grid {
  margin-top: clamp(34px, 4vw, 58px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 72px);
}

.page-about .member img {
  width: clamp(105px, 10.5vw, 155px);
  aspect-ratio: 1;
  margin: 0 auto 16px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--paper-2, #f4f8f2);
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--line, #e2e9dd);
  transition:
    transform .4s var(--ease-out, ease),
    box-shadow .3s ease;
}

.page-about .member:hover img {
  transform: translateY(-5px);
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--about-green);
}

.page-about .member h3 {
  color: #111811;
  font-size: 1rem;
  font-weight: 700;
}

.page-about .member span {
  display: block;
  margin-top: 3px;
  color: #6f7971;
  font-size: .8rem;
}

/* ==========================================================================
   CERTIFICATIONS
   ========================================================================== */

.page-about .certs {
  position: relative;
  padding-block: clamp(70px, 7vw, 115px);
  overflow: hidden;
  color: #fff;
  background: #0c3922;
  contain: paint;
}

.page-about .certs .h-sect {
  margin-bottom: clamp(26px, 3vw, 44px);
  color: #fff;
  font-size: clamp(1.9rem, 2.45vw, 2.9rem);
}

.page-about .certs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.page-about .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
}

.page-about .badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(106, 207, 127, .4);
  border-radius: 999px;
  color: #d6f4dc;
  background: rgba(66, 166, 88, .12);
  font-size: .74rem;
  font-weight: 500;
}

.page-about .badge svg {
  width: 14px;
  height: 14px;
  color: #69ce82;
  flex: none;
}

.page-about .cert-frame {}

.page-about .cert-dots {
  display: flex;
  gap: 7px;
  margin-top: 16px;
}

.page-about .cert-dots button {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .38);
}

.page-about .cert-dots button[aria-selected="true"] {
  width: 23px;
  background: #fff;
}

.page-about .certs__copy p {
  color: rgba(255, 255, 255, .74);
  font-size: clamp(.86rem, .9vw, .98rem);
  line-height: 1.7;
}

.page-about .certs__copy p+p {
  margin-top: 18px;
}

.page-about .certs .flowers {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: clamp(105px, 12vw, 195px);
  opacity: .95;
  pointer-events: none;
}

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

.page-about .cta-band {
  padding-block: clamp(58px, 7vw, 100px);
  background: #fff;
}

.page-about .cta {
  min-height: clamp(260px, 25vw, 390px);
  overflow: hidden;
  border-radius: 14px;
}

.page-about .cta__bg {
  object-fit: cover;
  object-position: center;
}

.page-about .cta>div {
  position: relative;
  z-index: 2;
}

.page-about .cta h2 {
  color: #121812;
}

.page-about .cta p {
  max-width: 58ch;
  color: #354238;
}

/* ==========================================================================
   SCROLL MOTION
   ========================================================================== */

.page-about [data-par],
.page-about [data-par-x] {
  --par-x: 0px;
  --par-y: 0px;
  translate: var(--par-x) var(--par-y);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: translate;
}

.page-about .aintro__scene {
  translate: 0 calc((var(--sp, .5) - .5) * -28px);
  will-change: translate;
}

/* .page-about .aintro__copy {
  translate: 0 calc((var(--sp, .5) - .5) * 15px);
  will-change: translate;
} */

.page-about [data-reveal] {
  opacity: 0;

}

.page-about [data-reveal="left"] {
  transform: translate3d(-34px, 0, 0);
}

.page-about [data-reveal="right"] {
  transform: translate3d(34px, 0, 0);
}

.page-about [data-reveal="zoom"] {
  transform: scale(.94);
}

.page-about [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.page-about .commit-card[data-reveal] {
  transform: translate3d(0, 32px, 0) scale(.985);
}

.page-about .commit-card[data-reveal].is-in {
  transform: translate3d(0, 0, 0) scale(1);
}

.page-about .commit-card[data-reveal].is-in:hover {
  transform: translateY(-6px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 981px) {

  /* The reference desktop composition keeps the cards visually clean.
     Mouse/trackpad drag still works. */
  .page-about .rail-ctrl {
    display: none;
  }
}

@media (max-width: 980px) {
  .page-about {
    --header-h: 68px;
  }

  .page-about .site-header,
  .page-about .site-header.is-stuck {
    position: absolute;
    color: var(--ink, #16251b);
    box-shadow: 0 1px 0 rgba(14, 56, 38, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-about .site-header__inner {
    width: calc(100% - 32px);
    display: flex;
    justify-content: space-between;
  }

  .page-about .site-header:not(.is-stuck) .site-logo img {
    filter: none;
  }

  .page-about .desktop-nav,
  .page-about .notification,
  .page-about .login-button {
    display: none;
  }

  .page-about .header-actions {
    margin-left: auto;
  }

  .page-about .menu-button {
    position: relative;
    z-index: 130;
    width: 48px;
    height: 38px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 8px;
    background: #f1f2f1;
    cursor: pointer;
  }

  .page-about .menu-button span {
    width: 23px;
    height: 2px;
    border-radius: 99px;
    background: #111b16;
    transform-origin: center;
    transition: transform .25s ease, opacity .2s ease;
  }

  .page-about.menu-open .menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .page-about.menu-open .menu-button span:nth-child(2) {
    opacity: 0;
  }

  .page-about.menu-open .menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .page-about .mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 90;
    height: calc(100dvh - var(--header-h));
    padding: 24px 20px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .25s cubic-bezier(.16, 1, .3, 1);
  }

  .page-about.menu-open .mobile-menu,
  .page-about .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .page-about .mobile-menu nav {
    display: grid;
  }

  .page-about .mobile-menu nav a {
    min-height: 54px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line, #e4e9e5);
    font-size: 16px;
    font-weight: 600;
  }

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

  .page-about .mobile-menu__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .page-about .mobile-menu__actions a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--about-green);
    border-radius: 7px;
    color: var(--about-green);
    font-size: 14px;
    font-weight: 700;
  }

  .page-about .mobile-menu__actions a:first-child {
    color: #fff;
    background: var(--about-green);
  }

  .page-about .ahero {
    --hero-cut: 46%;
    --hero-art-y: calc(var(--hero-progress, 0) * -22px);
    --hero-copy-y: calc(var(--hero-progress, 0) * 290px);

    min-height: max(650px, min(86svh, 188vw));
    padding-top: var(--header-h);
  }

  .page-about .ahero__banner,
  .page-about .ahero__foreground {
    top: var(--header-h);
    bottom: auto;
    height: calc(100% - var(--header-h));
  }

  .page-about .ahero__content {
    top: calc(var(--header-h) + 18%);
  }

  .page-about .ahero__content .h-hero {
    font-size: clamp(2.8rem, 12.7vw, 3.75rem);
  }

  .page-about .ahero__content p {
    max-width: min(42ch, 88%);
    font-size: clamp(.9rem, 3.8vw, 1.02rem);
  }

  .page-about .aintro {
    min-height: auto;
    padding-block: 90px 110px;
  }

  .page-about .aintro__grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .page-about .aintro__copy {
    max-width: 680px;
  }

  .page-about .aintro__scene {
    min-height: 360px;
  }

  .page-about .aintro__scene .warehouse {
    margin-inline: auto;
  }

  .page-about .mission {
    min-height: 880px;
    padding-block: 110px 140px;
  }

  .page-about .mission__road {
    right: -3%;
    width: clamp(165px, 26vw, 255px);
    opacity: .82;
  }

  .page-about .mission__inner {
    max-width: min(62%, 560px);
  }


  .page-about .mission .bin-1 {
    right: 29%;
  }

  .page-about .mission .bin-2 {
    right: 34%;
  }

  .page-about .commit__top {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-about .commit-card {
    flex-basis: min(78vw, 300px);
  }

  .page-about .team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .certs__grid {
    grid-template-columns: 1fr;
  }

  .page-about .certs .flowers {
    display: none;
  }
}

@media (max-width: 620px) {
  .page-about {
    --header-h: 68px;
  }

  .page-about .site-logo img {
    height: 30px;
  }

  .page-about .ahero {
    --hero-cut: 47.5%;
    --hero-copy-y: calc(var(--hero-progress, 0) * 250px);

    min-height: max(690px, 190vw);
  }

  .page-about .ahero__content {
    top: calc(var(--header-h) + 17%);
  }

  .page-about .ahero__content .h-hero {
    font-size: clamp(3rem, 14vw, 3.55rem);
  }

  .page-about .ahero__content p {
    max-width: 88%;
    margin-top: 16px;
    font-size: clamp(.93rem, 4vw, 1.03rem);
    line-height: 1.55;
  }

  .page-about .aintro {
    padding-block: 76px 92px;
  }

  .page-about .aintro__copy .h-sect,
  .page-about .mission__inner .h-sect,
  .page-about .commit__top .h-sect {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
  }

  .page-about .aintro__scene {
    min-height: 285px;
  }

  .page-about .aintro__scene .truck {
    left: -2%;
    bottom: 5%;
    width: 115px;
  }

  .page-about .aintro__scene .forklift {
    width: 68px;
  }

  .page-about .aintro__scene .pallet {
    width: 50px;
  }

  .page-about .mission {
    min-height: 820px;
    padding-block: 86px 110px;
  }

  .page-about .mission__inner {
    max-width: 69%;
  }

  .page-about .mission__road {
    right: -12%;
    width: 178px;
    opacity: .72;
  }

  .page-about .pillar+.pillar {
    margin-top: 28px;
  }

  .page-about .pillar h3 {
    font-size: 1rem;
  }

  .page-about .pillar p {
    font-size: .82rem;
    line-height: 1.55;
  }

  .page-about .commit {
    padding-block: 68px 80px;
  }

  .page-about .commit-card {
    flex-basis: min(82vw, 294px);
  }

  .page-about .team__grid {
    gap: 32px 18px;
  }

  .page-about .member img {
    width: 105px;
  }

  .page-about .cta-band {
    padding: 52px 18px 68px;
  }

  .page-about .cta {
    min-height: 280px;
    border-radius: 11px;
  }

  .page-about .aintro__scene,
  .page-about .aintro__copy {
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .page-about .ahero__banner,
  .page-about .ahero__foreground,
  .page-about .ahero__content {
    transform: none !important;
  }

  .page-about [data-par],
  .page-about [data-par-x],
  .page-about .aintro__scene,
  .page-about .aintro__copy {
    translate: none !important;
  }

  .page-about [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   ABOUT PAGE — FOUR SECTION UI ALIGNMENT FIX
   Sections: Mission, Sustainability, Team, Certifications.
   Existing hero, About Lowaste, CTA and footer are unchanged.
   ========================================================================== */

/* 1. MISSION & VISION ---------------------------------------------------- */

.page-about .mission {
  position: relative;
  min-height: clamp(1120px, 77vw, 1480px);
  padding:
    clamp(410px, 27vw, 520px) 0 clamp(110px, 8vw, 165px);
  overflow: hidden;
  background:
    url("../img/about-us-roadground.png") center top / 100% 100% no-repeat;
}

/*
 * The road is already part of about-us-roadground.png.
 * This transparent layer is retained only to align and animate the trucks.
 */
.page-about .mission__road {
  top: 0;
  right: 7.4%;
  bottom: 0;
  width: 15.2%;
  background: none;
  filter: none;
  overflow: hidden;
}

.page-about .mission__road .truck {
  left: 50%;
  width: 46%;
  max-width: 142px;
  translate: -50% 0;
  filter: drop-shadow(0 7px 8px rgba(13, 43, 23, .18));
}

.page-about .mission__road .truck-1 {
  top: calc(2% + (var(--sp, 0) * 58%));
  rotate: 180deg;
}

.page-about .mission__road .truck-2 {
  top: calc(78% - (var(--sp, 0) * 48%));
  rotate: 0deg;
}

.page-about .mission__inner {
  position: relative;
  z-index: 4;
  width: min(100%, 650px);
  max-width: 650px;
  margin-left: 0;
}

.page-about .mission__inner .h-sect {
  margin: 0 0 clamp(34px, 3vw, 52px);
  color: #0d1410;
  font-size: clamp(2rem, 2.45vw, 2.95rem);
  line-height: 1.08;
}

.page-about .pillar {
  max-width: 590px;
}

.page-about .pillar+.pillar {
  margin-top: clamp(30px, 2.8vw, 46px);
}

.page-about .pillar h3 {
  margin: 0 0 8px;
  font-size: clamp(1.02rem, 1.15vw, 1.28rem);
  font-weight: 600;
}

.page-about .pillar p {
  margin: 0;
  color: #263027;
  font-size: clamp(.82rem, .78vw, .92rem);
  line-height: 1.6;
}

.page-about .mission .picnic {
  top: 25%;
  right: 46%;
  width: clamp(70px, 7vw, 130px);
}

.page-about .mission .play {
  top: 20%;
  right: 32%;
  width: clamp(75px, 7.6vw, 142px);
}

.page-about .mission .bin-1 {
  right: 31%;
  bottom: 34%;
  width: clamp(27px, 2.5vw, 46px);
}

.page-about .mission .bin-2 {
  right: 39%;
  bottom: 17%;
  width: clamp(23px, 2.2vw, 40px);
}

/* 2. SUSTAINABILITY COMMITMENT ------------------------------------------ */

.page-about .commit {
  min-height: clamp(555px, 36vw, 690px);
  padding:
    clamp(78px, 5.7vw, 110px) 0 clamp(82px, 6vw, 118px);
  background:
    url("../img/about-us-grass2.jpg") center center / 100% 100% no-repeat;
}

.page-about .commit__top {
  grid-template-columns: minmax(300px, .65fr) minmax(0, 1.35fr);
  gap: clamp(55px, 6vw, 120px);
  align-items: start;
  margin-bottom: clamp(44px, 4vw, 68px);
}

.page-about .commit__top .h-sect {
  max-width: 440px;
  margin: 0;
  color: #11182a;
  font-size: clamp(2rem, 2.45vw, 2.95rem);
  line-height: 1.04;
}

.page-about .commit__top p {
  max-width: 920px;
  margin: 4px 0 0;
  color: rgba(0, 0, 0, 1);
  font-size: clamp(.87rem, .82vw, .96rem);
  line-height: 1.66;
}

.page-about .rail {
  gap: clamp(14px, 1.15vw, 22px);
  padding-bottom: 12px;
}

.page-about .commit-card {
  flex: 0 0 clamp(252px, 15vw, 292px);
  min-height: clamp(300px, 20vw, 350px);
  padding: 16px 16px 24px;
  border: 0;
  border-radius: 14px;
  background: #171918;
  box-shadow: none;
}

.page-about .commit-card__icon {
  width: 100%;
  height: clamp(68px, 5.2vw, 82px);
  margin: 0 0 18px;
  border-radius: 10px;
  color: #11c887;
  background: #414844;
}

.page-about .commit-card__icon svg {
  width: 24px;
  height: 24px;
}

.page-about .commit-card h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.page-about .commit-card p {
  margin: 0;
  color: rgba(210, 210, 210, 1);
  font-size: clamp(.69rem, .61vw, .77rem);
  line-height: 1.58;
}

.page-about .commit-card:hover {
  border-color: transparent;
  transform: translateY(-5px);
}

/* 3. MEET OUR TEAM ------------------------------------------------------ */

.page-about .team {
  min-height: clamp(480px, 31vw, 610px);
  padding: 43px;
  background: #fff;
}

.page-about .team .sect-head {
  max-width: 660px;
}

.page-about .team .sect-head .h-sect {
  margin: 0;
  color: #11182a;
  font-size: clamp(2.15rem, 2.55vw, 3rem);
  line-height: 1.08;
}

.page-about .team .sect-head p {
  margin: 13px 0 0;
  color: #707989;
  font-size: clamp(.88rem, .82vw, 1rem);
}

.page-about .team__grid {
  margin-top: clamp(54px, 4.6vw, 82px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 5.2vw, 100px);
  align-items: start;
}

.page-about .member img {
  width: clamp(150px, 11.2vw, 190px);
  height: clamp(150px, 11.2vw, 190px);
  aspect-ratio: 1;
  margin: 0 auto 22px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  box-shadow: none;
}

.page-about .member:hover img {
  transform: translateY(-4px);
  box-shadow: none;
}

.page-about .member h3 {
  margin: 0;
  color: #11182a;
  font-size: clamp(.96rem, .9vw, 1.1rem);
  font-weight: 700;
  line-height: 1.35;
}

.page-about .member span {
  margin-top: 7px;
  color: #707989;
  font-size: clamp(.76rem, .71vw, .88rem);
}

.page-about .team-dots {
  display: none;
}

/* 4. CERTIFICATIONS & COMPLIANCE ---------------------------------------- */

.page-about .certs {
  min-height: clamp(690px, 43vw, 830px);
  padding:
    clamp(82px, 6vw, 115px) 0 clamp(96px, 7vw, 135px);
  background: #0c3923;
}

.page-about .certs .h-sect {
  margin: 0 0 clamp(34px, 3.2vw, 52px);
  color: #fff;
  font-size: clamp(2.05rem, 2.55vw, 3rem);
  line-height: 1.08;
}

.page-about .certs__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  gap: clamp(65px, 7vw, 135px);
  align-items: center;
}

.page-about .badges {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-bottom: 34px;
}

.page-about .badge {
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid rgba(72, 199, 143, .42);
  color: #ecfff6;
  background: rgba(30, 126, 91, .47);
  font-size: clamp(.7rem, .67vw, .82rem);
}

.page-about .badge svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

.page-about .cert-dots {
  gap: 8px;
  margin-top: 26px;
}

.page-about .cert-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #bcefd7;
}

.page-about .cert-dots button[aria-selected="true"] {
  width: 12px;
  background: #0c7c59;
}

.page-about .cert-dots button[aria-disabled="true"] {
  pointer-events: none;
}

.page-about .certs__copy {
  padding-top: 65px;
}

.page-about .certs__copy p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(.86rem, .8vw, .96rem);
  line-height: 1.75;
}

.page-about .certs__copy p+p {
  margin-top: 28px;
}

.page-about .certs .flowers {
  right: 3.4%;
  bottom: 0;
  width: clamp(175px, 15vw, 290px);
}

/* TABLET --------------------------------------------------------------- */

@media (max-width: 980px) {
  .page-about .mission {
    min-height: 1450px;
    padding: 690px 0 110px;
    background-size: auto 680px;
    background-position: 54% top;
    background-repeat: no-repeat;
  }

  .page-about .mission__road {
    top: 20px;
    right: 9%;
    bottom: auto;
    width: 31%;
    height: 630px;
  }

  .page-about .mission__road .truck {
    width: 43%;
  }

  .page-about .mission__road .truck-1 {
    top: calc(3% + (var(--sp, 0) * 50%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(78% - (var(--sp, 0) * 40%));
  }

  .page-about .mission__inner {
    width: min(72%, 590px);
    margin-left: 0;
  }

  .page-about .mission .picnic {
    top: 18%;
    right: 57%;
  }

  .page-about .mission .play {
    top: 14%;
    right: 34%;
  }

  .page-about .mission .bin-1 {
    top: 27%;
    right: 29%;
    bottom: auto;
  }

  .page-about .mission .bin-2 {
    top: 41%;
    right: 36%;
    bottom: auto;
  }

  .page-about .commit {
    min-height: auto;
    padding: 70px 0 82px;
    background-size: cover;
  }

  .page-about .commit__top {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 38px;
  }

  .page-about .commit__top .h-sect {
    max-width: 530px;
  }

  .page-about .commit-card {
    flex-basis: min(78vw, 310px);
    min-height: 320px;
  }

  .page-about .team {
    min-height: auto;
    padding: 68px 0 76px;
  }

  .page-about .team__grid {
    display: flex;
    width: 100%;
    margin-top: 42px;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .page-about .team__grid::-webkit-scrollbar {
    display: none;
  }

  .page-about .member {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
  }

  .page-about .member img {
    width: 155px;
    height: 155px;
  }

  .page-about .team-dots {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .page-about .team-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #bfead9;
  }

  .page-about .team-dots button[aria-selected="true"] {
    background: #31bb83;
  }

  .page-about .certs {
    min-height: auto;
    padding: 75px 0 100px;
  }

  .page-about .certs__grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .page-about .certs__copy {
    padding-top: 0;
  }

  .page-about .certs .flowers {
    right: 6%;
    width: 155px;
  }
}

/* MOBILE ---------------------------------------------------------------- */

@media (max-width: 620px) {
  .page-about .mission {
    min-height: 1350px;
    padding: 635px 0 88px;
    background-size: auto 610px;
    background-position: 54% top;
  }

  .page-about .mission__road {
    top: 12px;
    right: 4%;
    width: 42%;
    height: 580px;
  }

  .page-about .mission__inner {
    width: 73%;
    max-width: 285px;
  }

  .page-about .mission__inner .h-sect {
    margin-bottom: 31px;
    font-size: clamp(1.72rem, 7.3vw, 2.05rem);
  }

  .page-about .pillar+.pillar {
    margin-top: 28px;
  }

  .page-about .pillar h3 {
    font-size: .96rem;
  }

  .page-about .pillar p {
    font-size: .78rem;
    line-height: 1.55;
  }

  .page-about .mission .picnic {
    top: 18%;
    right: 59%;
    width: 67px;
  }

  .page-about .mission .play {
    top: 14%;
    right: 31%;
    width: 72px;
  }

  .page-about .mission .bin-1 {
    top: 28%;
    right: 27%;
    width: 27px;
  }

  .page-about .mission .bin-2 {
    top: 42%;
    right: 34%;
    width: 24px;
  }

  .page-about .commit {
    padding: 63px 0 72px;
  }

  .page-about .commit__top .h-sect {
    font-size: clamp(1.72rem, 7.2vw, 2.05rem);
  }

  .page-about .commit__top p {
    font-size: .82rem;
    line-height: 1.58;
  }

  .page-about .commit-card {
    flex-basis: min(86vw, 306px);
    min-height: 320px;
  }

  .page-about .team .sect-head .h-sect {
    font-size: 2rem;
  }

  .page-about .team .sect-head p {
    font-size: .82rem;
  }

  .page-about .member img {
    width: 138px;
    height: 138px;
  }

  .page-about .member h3 {
    font-size: .92rem;
  }

  .page-about .member span {
    font-size: .72rem;
  }

  .page-about .certs {
    padding: 68px 0 94px;
  }

  .page-about .certs .h-sect {
    font-size: 1.82rem;
  }

  .page-about .badge {
    min-height: 38px;
    padding: 8px 13px;
    font-size: .64rem;
  }

  .page-about .cert-frame {
    min-height: 245px;
    padding: 25px;
  }

  .page-about .cert-frame img {
    width: 185px;
  }

  .page-about .cert-dots {
    margin-top: 18px;
  }

  .page-about .cert-dots button {
    width: 9px;
    height: 9px;
  }

  .page-about .cert-dots button[aria-selected="true"] {
    width: 9px;
  }

  .page-about .certs__copy p {
    font-size: .76rem;
    line-height: 1.66;
  }

  .page-about .certs__copy p+p {
    margin-top: 23px;
  }

  .page-about .certs .flowers {
    right: 8%;
    width: 130px;
  }
}

/* ==========================================================================
   FINAL UI REFINEMENT — requested fixes only
   - add top/bottom fences in sustainability section
   - add grass field support in mission section above the road scene
   - refine certifications alignment
   - correct mobile layout for mission / commitment / team / certifications
   ========================================================================== */

/* Mission section ------------------------------------------------------- */
.page-about .mission {
  position: relative;
  isolation: isolate;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Extra grass field between the upper road scene and the text zone. */
.page-about .mission::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(280px, 22vw, 430px);
  height: clamp(160px, 12vw, 230px);
  z-index: 1;
  pointer-events: none;
}

.page-about .mission__road {
  z-index: 2;
}

.page-about .mission__deco,
.page-about .mission__inner {
  position: relative;
  z-index: 3;
}

.page-about .mission__road .truck {
  filter: drop-shadow(0 6px 8px rgba(16, 44, 23, .18));
}

/* Sustainability section ----------------------------------------------- */
.page-about .commit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Two decorative fences, one near the top and one near the bottom. */
/* .page-about .commit::before,
.page-about .commit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      transparent 0 6px,
      #945533 6px 8px,
      transparent 8px 16px,
      #945533 16px 18px,
      transparent 18px 100%),
    repeating-linear-gradient(to right,
      transparent 0 28px,
      #945533 28px 31px,
      transparent 31px 62px);
  opacity: .96;
} */

.page-about .commit::before {
  top: 10px;
}

.page-about .commit::after {
  bottom: 10px;
}

.page-about .commit>.shell {
  position: relative;
  z-index: 2;
}

.page-about .commit__top {
  align-items: center;
}

.page-about .rail-wrap {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Team section ---------------------------------------------------------- */
.page-about .team__grid {
  align-items: start;
  padding: 0px 80px;
}

.page-about .member {
  text-align: center;
}

/* Certification section ------------------------------------------------- */
.page-about .certs {
  position: relative;
  isolation: isolate;
}

.page-about .certs .shell {
  position: relative;
  z-index: 2;
}

.page-about .certs__grid {
  align-items: center;
}

.page-about .badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-about .badge {
  min-height: 40px;
}

.page-about .cert-frame {
  display: grid;
  place-items: center;
}

.page-about .cert-dots {
  justify-content: center;
}

.page-about .certs__copy {
  align-self: center;
}

/* Mobile corrections ---------------------------------------------------- */
@media (max-width: 980px) {
  .page-about .mission {
    min-height: 1460px;
    padding-top: 700px;
    background-size: auto 690px;
    background-position: 54% top;
  }

  .page-about .mission::before {
    top: 370px;
    height: 220px;
  }

  .page-about .mission__road {
    top: 28px;
    right: 7%;
    width: min(220px, 32vw);
    height: 620px;
  }

  .page-about .mission__inner {
    width: min(70%, 560px);
    max-width: min(70%, 560px);
  }

  .page-about .commit {
    padding-top: 84px;
    padding-bottom: 96px;
  }

  .page-about .commit::before {
    top: 8px;
  }

  .page-about .commit::after {
    bottom: 8px;
  }

  .page-about .commit__top {
    gap: 20px;
    margin-bottom: 36px;
  }

  .page-about .rail-wrap {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .page-about .team {
    padding-top: 72px;
    padding-bottom: 84px;
  }

  .page-about .team__grid {
    margin-top: 40px;
  }

  .page-about .certs {
    padding-top: 82px;
    padding-bottom: 96px;
  }

  .page-about .certs__grid {
    gap: 46px;
  }

  .page-about .badges {
    gap: 10px;
    margin-bottom: 28px;
  }

  .page-about .cert-frame {
    min-height: 270px;
  }

  .page-about .cert-frame img {
    width: min(220px, 72%);
  }

  .page-about .certs__copy p {
    max-width: 62ch;
  }
}

@media (max-width: 620px) {
  .page-about .mission {
    min-height: 1360px;
    padding-top: 620px;
    padding-bottom: 90px;
    background-size: auto 610px;
    background-position: 56% top;
  }

  .page-about .mission::before {
    top: 335px;
    height: 205px;
  }

  .page-about .mission__road {
    top: 22px;
    right: 5%;
    width: 152px;
    height: 575px;
  }

  .page-about .mission__inner {
    width: 74%;
    max-width: 290px;
  }

  .page-about .mission .picnic {
    top: 18%;
    right: 59%;
    width: 68px;
  }

  .page-about .mission .play {
    top: 14%;
    right: 30%;
    width: 72px;
  }

  .page-about .mission .bin-1 {
    top: 28%;
    right: 28%;
    bottom: auto;
  }

  .page-about .mission .bin-2 {
    top: 42%;
    right: 35%;
    bottom: auto;
  }

  .page-about .commit {
    padding-top: 78px;
    padding-bottom: 90px;
  }

  .page-about .commit::before,
  .page-about .commit::after {
    height: 28px;
    background:
      linear-gradient(to bottom,
        transparent 0 5px,
        #945533 5px 7px,
        transparent 7px 13px,
        #945533 13px 15px,
        transparent 15px 100%),
      repeating-linear-gradient(to right,
        transparent 0 22px,
        #945533 22px 25px,
        transparent 25px 48px);
  }

  .page-about .commit__top {
    margin-bottom: 30px;
  }

  .page-about .rail-wrap {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .page-about .commit-card {
    flex-basis: min(86vw, 306px);
  }

  .page-about .team {
    padding-top: 66px;
    padding-bottom: 74px;
  }

  .page-about .member img {
    width: 138px;
    height: 138px;
  }

  .page-about .certs {
    padding-top: 74px;
    padding-bottom: 90px;
  }

  .page-about .certs__grid {
    gap: 38px;
  }

  .page-about .badges {
    margin-bottom: 24px;
  }

  .page-about .badge {
    font-size: .66rem;
    line-height: 1.35;
  }

  .page-about .cert-frame {
    min-height: 244px;
    padding: 24px;
  }

  .page-about .cert-frame img {
    width: min(190px, 75%);
  }

  .page-about .cert-dots {
    margin-top: 18px;
    gap: 7px;
  }

  .page-about .certs__copy p {
    font-size: .76rem;
    line-height: 1.68;
  }

  .page-about .certs .flowers {
    right: 8%;
    width: 125px;
  }
}

/* ==========================================================================
   FINAL ABOUT PAGE ALIGNMENT
   DM Sans, Mission alignment, Certification layout and Footer.
   ========================================================================== */

/* Typography ------------------------------------------------------------ */
.page-about {
  --font-body: "DM Sans", Arial, sans-serif;
  --font-display: "DM Sans", Arial, sans-serif;
  font-family: var(--font-body);
}

.page-about,
.page-about button,
.page-about input,
.page-about textarea,
.page-about select {
  font-family: var(--font-body);
}

.page-about h1,
.page-about h2,
.page-about h3,
.page-about h4,
.page-about h5,
.page-about h6,
.page-about .h-hero,
.page-about .h-sect,
.page-about .h-card {
  font-family: var(--font-display);
}

/* Mission & Vision ------------------------------------------------------ */
.page-about .mission {
  position: relative;
  overflow: hidden;
  /* background-color: #75b447; */
}

/* Keep the content aligned to the same shell as the other sections.
   The earlier margin-left: 0 rule was pulling it against the viewport edge. */
.page-about .mission__inner.shell {
  width: min(calc(100% - 80px), 1480px);
  max-width: none;
  margin-inline: auto;
  padding-right: clamp(320px, 26vw, 500px);
}

.page-about .mission__inner .h-sect {
  max-width: 620px;
  margin-bottom: clamp(34px, 3vw, 52px);
  color: #101710;
  font-size: clamp(2.15rem, 2.7vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.page-about .pillars {
  max-width: 620px;
}

.page-about .pillar {
  max-width: 590px;
}

.page-about .pillar+.pillar {
  margin-top: clamp(32px, 3vw, 48px);
}

.page-about .pillar h3 {
  margin-bottom: 9px;
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
}

.page-about .pillar p {
  max-width: 58ch;
  color: #293229;
  font-size: clamp(.88rem, .86vw, .98rem);
  line-height: 1.68;
}

.page-about .mission__road {
  right: clamp(3%, 6vw, 9%);
}

.page-about .mission__road .truck {
  width: 48%;
  max-width: 145px;
}

/* Certifications & Compliance ----------------------------------------- */
.page-about .certs {
  min-height: auto;
  padding: clamp(88px, 7vw, 132px) 0 clamp(105px, 8vw, 150px);
  background: #0c4229;
}

.page-about .certs>.shell {
  width: min(calc(100% - 80px), 1480px);
  max-width: none;
  margin-inline: auto;
}

.page-about .certs .h-sect {
  margin: 0 0 clamp(40px, 3.5vw, 62px);
  color: #fff;
  font-size: clamp(2.2rem, 2.75vw, 3.35rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.page-about .certs__grid {
  display: grid;
  grid-template-columns: minmax(440px, .92fr) minmax(0, 1.08fr);
  gap: clamp(70px, 8vw, 150px);
  align-items: start;
}

.page-about .certs__grid>div:first-child {
  width: 100%;
  max-width: 590px;
}

.page-about .badges {
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: 14px;
  margin: 0 0 38px;
}

.page-about .badge {
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  color: #fff;
  border: 1px solid rgba(69, 206, 148, .46);
  background: rgba(32, 135, 94, .55);
  font-size: clamp(.78rem, .74vw, .9rem);
  line-height: 1.35;
}

.page-about .badge svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.page-about .cert-frame {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
}

.page-about .cert-frame img {
  width: min(600px, 100%);
  max-height: 280px;
  object-fit: cover;
}

.page-about .cert-dots {
  max-width: 560px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 9px;
}

.page-about .cert-dots button,
.page-about .cert-dots button[aria-selected="true"] {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
}

.page-about .certs__copy {
  max-width: 660px;
  padding-top: clamp(118px, 9vw, 165px);
  align-self: start;
}

.page-about .certs__copy p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.96rem, 1vw, 1.12rem);
  line-height: 1.8;
}

.page-about .certs__copy p+p {
  margin-top: 34px;
}

.page-about .certs .flowers {
  right: 8%;
  bottom: -108px;
  width: clamp(157px, 23vw, 260px);
}

/* Footer --------------------------------------------------------------- */
.page-about .footer {
  color: #1d2922;
  background: #fff;
  border-top: 1px solid #e8eee9;
}

.page-about .footer>.footer__grid.shell {
  width: min(calc(100% - 80px), 1480px);
  max-width: none;
  margin-inline: auto;
  padding: clamp(70px, 6vw, 105px) 0 clamp(60px, 5vw, 90px);
  display: grid;
  grid-template-columns: minmax(290px, 1.4fr) minmax(130px, .62fr) minmax(220px, .9fr) minmax(220px, .82fr);
  gap: clamp(42px, 5vw, 92px);
  align-items: start;
}

.page-about .footer__brand img {
  width: auto;
  height: clamp(42px, 3.5vw, 56px);
  object-fit: contain;
}

.page-about .footer__brand>p {
  max-width: 410px;
  margin: 22px 0 0;
  color: #616b65;
  font-size: .94rem;
  line-height: 1.7;
}

.page-about .footer__socials {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-about .footer__socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe5dd;
  border-radius: 50%;
  color: #1b6f4e;
  background: #fff;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.page-about .footer__socials a:hover {
  color: #fff;
  border-color: var(--about-green);
  background: var(--about-green);
  transform: translateY(-2px);
}

.page-about .footer__socials svg {
  width: 17px;
  height: 17px;
}

.page-about .footer__col h3,
.page-about .footer__contact dt {
  margin: 0 0 20px;
  color: #18231d;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.page-about .footer__col ul,
.page-about .footer__bar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .footer__col ul {
  display: grid;
  gap: 14px;
}

.page-about .footer__col a,
.page-about .footer__contact a,
.page-about .footer__contact dd {
  color: #626c66;
  font-size: .9rem;
  line-height: 1.5;
  transition: color .2s ease;
}

.page-about .footer__col a:hover,
.page-about .footer__contact a:hover {
  color: var(--about-green);
}

.page-about .footer__contact {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.page-about .footer__contact dt {
  margin-bottom: 7px;
}

.page-about .footer__contact dd {
  margin: 0 0 22px;
}

.page-about .footer__bar {
  min-height: 64px;
  color: #fff;
  background: var(--about-green);
}

.page-about .footer__bar>.shell {
  width: min(calc(100% - 80px), 1480px);
  max-width: none;
  min-height: 64px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.page-about .footer__bar p {
  margin: 0;
  font-size: .78rem;
}

.page-about .footer__bar ul {
  display: flex;
  align-items: center;
  gap: 28px;
}

.page-about .footer__bar a {
  color: #fff;
  font-size: .78rem;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .page-about .footer>.footer__grid.shell {
    grid-template-columns: 1.25fr .65fr .9fr;
  }

  .page-about .footer__contact {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 35px;
  }

  .page-about .footer__contact dt,
  .page-about .footer__contact dd {
    margin: 0;
  }
}

@media (max-width: 980px) {
  .page-about .mission__inner.shell {
    width: min(calc(100% - 48px), 900px);
    padding-right: min(34vw, 290px);
  }

  .page-about .certs>.shell {
    width: min(calc(100% - 48px), 900px);
  }

  .page-about .certs__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .page-about .certs__grid>div:first-child,
  .page-about .cert-frame,
  .page-about .cert-dots,
  .page-about .certs__copy {
    max-width: 100%;
  }

  .page-about .cert-frame {
    min-height: 320px;
  }

  .page-about .certs__copy {
    padding-top: 0;
  }

  .page-about .footer>.footer__grid.shell {
    width: min(calc(100% - 48px), 900px);
    grid-template-columns: 1fr 1fr;
    gap: 45px 55px;
  }

  .page-about .footer__brand,
  .page-about .footer__contact {
    grid-column: 1 / -1;
  }

  .page-about .footer__contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .footer__bar>.shell {
    width: min(calc(100% - 48px), 900px);
  }
}

@media (max-width: 620px) {
  .page-about .mission__inner.shell {
    width: calc(100% - 36px);
    padding-right: 35%;
  }

  .page-about .mission__inner .h-sect {
    font-size: clamp(1.75rem, 8vw, 2.15rem);
  }

  .page-about .pillar h3 {
    font-size: .98rem;
  }

  .page-about .pillar p {
    font-size: .8rem;
    line-height: 1.58;
  }

  .page-about .certs {
    padding: 72px 0 95px;
  }

  .page-about .certs>.shell {
    width: calc(100% - 36px);
  }

  .page-about .certs .h-sect {
    margin-bottom: 34px;
    font-size: 1.9rem;
  }

  .page-about .badge {
    width: 100%;
    font-size: .72rem;
  }

  .page-about .cert-frame {
    min-height: 250px;
    padding: 24px;
  }

  .page-about .cert-frame img {
    width: min(205px, 72%);
  }

  .page-about .certs__copy p {
    font-size: .8rem;
    line-height: 1.68;
  }

  .page-about .footer>.footer__grid.shell {
    width: calc(100% - 40px);
    padding: 58px 0 52px;
    grid-template-columns: 1fr 1fr;
    gap: 38px 24px;
  }

  .page-about .footer__brand,
  .page-about .footer__contact {
    grid-column: 1 / -1;
  }

  .page-about .footer__brand>p {
    font-size: .86rem;
  }

  .page-about .footer__contact {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .page-about .footer__contact dt {
    margin-bottom: 5px;
  }

  .page-about .footer__contact dd {
    margin-bottom: 18px;
  }

  .page-about .footer__bar>.shell {
    width: calc(100% - 40px);
    padding: 17px 0;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 13px;
  }

  .page-about .footer__bar ul {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .page-about .footer__bar p,
  .page-about .footer__bar a {
    font-size: .68rem;
  }
}

/* ==========================================================================
   FINAL MOBILE ALIGNMENT — ABOUT PAGE
   Matches the supplied 390px mobile reference. Desktop rules are unchanged.
   ========================================================================== */

@media (max-width: 767px) {
  .page-about {
    --header-h: 62px;
    overflow-x: hidden;
  }

  .page-about .shell,
  .page-about .shell-wide {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
  }

  /* Header ------------------------------------------------------------ */
  .page-about .site-header,
  .page-about .site-header.is-stuck {
    position: fixed;
    inset: 0 0 auto;
    height: var(--header-h);
    color: #17221c;
    background: #fff;
    box-shadow: 0 1px 0 rgba(18, 48, 30, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-about .site-header__inner {
    width: calc(100% - 24px);
    min-height: var(--header-h);
    padding: 0;
  }

  .page-about .site-logo img {
    height: 25px;
  }

  .page-about .menu-button {
    width: 38px;
    height: 34px;
    border-radius: 6px;
  }

  .page-about .menu-button span {
    width: 20px;
  }

  /* Hero -------------------------------------------------------------- */
  .page-about .ahero {
    --hero-cut: 48%;
    --hero-art-y: calc(var(--hero-progress, 0) * -12px);
    --hero-copy-y: calc(var(--hero-progress, 0) * 175px);
    min-height: 670px;
    height: 174vw;
    max-height: 760px;
    padding-top: var(--header-h);
  }

  .page-about .ahero__banner,
  .page-about .ahero__foreground {
    top: var(--header-h);
    bottom: auto;
    height: calc(100% - var(--header-h));
    inset-inline: 0;
    object-position: 50% 100%;
    transform:
      translate3d(0, var(--hero-art-y), 0) scale(1.015);
  }

  .page-about .ahero__content {
    top: calc(var(--header-h) + 13.5%);
    width: 100%;
    padding-inline: 18px;
  }

  .page-about .ahero__content .h-hero {
    margin: 0;
    font-size: clamp(2.7rem, 13vw, 3.35rem);
    line-height: .98;
  }

  .page-about .ahero__content p {
    max-width: 320px;
    margin-top: 12px;
    font-size: .78rem;
    line-height: 1.45;
  }

  /* About Lowaste ----------------------------------------------------- */
  .page-about .aintro {
    min-height: auto;
    padding: 62px 0 56px;
    background-position: center top;
    background-size: cover;
  }

  .page-about .aintro__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .page-about .aintro__copy {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    translate: none;
  }

  .page-about .aintro__copy .h-sect {
    margin-bottom: 12px;
    font-size: 1.75rem;
    line-height: 1.08;
  }

  .page-about .aintro__copy p {
    max-width: none;
    font-size: .78rem;
    line-height: 1.62;
  }

  .page-about .aintro__copy .btn {
    min-height: 38px;
    margin-top: 20px;
    padding-inline: 16px;
    font-size: .72rem;
  }

  .page-about .aintro__scene {
    min-height: 305px;
    width: 100%;
    translate: none;
  }

  .page-about .aintro__scene .warehouse {
    width: 100%;
    max-width: 337px;
    margin: 0 auto;
  }

  .page-about .aintro__scene .truck {
    left: 2%;
    bottom: -4%;
    width: 203px;
  }

  .page-about .aintro__scene .forklift {
    right: 1%;
    bottom: 7%;
    width: 159px;
  }

  .page-about .aintro__scene .pallet {
    right: 17%;
    bottom: 22%;
    width: 128px;
  }

  /* Mission ----------------------------------------------------------- */
  .page-about .mission {
    min-height: 1220px;
    padding: 610px 0 72px;
    background-position: 55% top;
    background-size: auto 610px;
    background-repeat: no-repeat;
  }

  .page-about .mission::before {
    top: 330px;
    height: 205px;
  }

  .page-about .mission__road {
    top: 18px;
    right: 4%;
    bottom: auto;
    width: 150px;
    height: 565px;
    opacity: 1;
  }

  .page-about .mission__road .truck {
    width: 42%;
  }

  .page-about .mission__road .truck-1 {
    top: calc(4% + (var(--sp, 0) * 48%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(76% - (var(--sp, 0) * 38%));
  }

  .page-about .mission__deco {
    z-index: 3;
  }

  .page-about .mission .picnic {
    display: block;
    top: 22%;
    right: 57%;
    width: 66px;
  }

  .page-about .mission .play {
    display: block;
    top: 17%;
    right: 31%;
    width: 70px;
  }

  .page-about .mission .bin-1 {
    display: block;
    top: 31%;
    right: 26%;
    bottom: auto;
    width: 25px;
  }

  .page-about .mission .bin-2 {
    display: block;
    top: 45%;
    right: 34%;
    bottom: auto;
    width: 23px;
  }

  .page-about .mission__inner.shell {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }

  .page-about .mission__inner .h-sect {
    margin: 0 0 30px;
    font-size: 1.75rem;
    line-height: 1.08;
  }

  .page-about .pillar {
    max-width: none;
  }

  .page-about .pillar+.pillar {
    margin-top: 28px;
  }

  .page-about .pillar h3 {
    margin-bottom: 7px;
    font-size: .9rem;
    line-height: 1.35;
  }

  .page-about .pillar p {
    max-width: none;
    font-size: .75rem;
    line-height: 1.58;
  }

  /* Sustainability ---------------------------------------------------- */
  .page-about .commit {
    min-height: auto;
    padding: 74px 0 82px;
    background-position: center;
    background-size: cover;
  }

  .page-about .commit::before {
    top: 8px;
  }

  .page-about .commit::after {
    bottom: 8px;
  }

  .page-about .commit__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 17px;
    align-items: start;
    margin-bottom: 28px;
  }

  .page-about .commit__top .h-sect {
    max-width: 310px;
    margin: 0;
    font-size: 1.72rem;
    line-height: 1.06;
  }

  .page-about .commit__top p {
    max-width: none;
    margin: 0;
    font-size: .75rem;
    line-height: 1.58;
  }

  .page-about .rail-wrap {
    width: 100%;
    padding: 12px 0 10px;
  }

  .page-about .rail {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    margin-right: 0;
    padding: 0 16px 12px;
    gap: 12px;
    scroll-padding-left: 16px;
  }

  .page-about .commit-card {
    flex: 0 0 min(82vw, 300px);
    min-height: 286px;
    padding: 14px 14px 21px;
    border-radius: 10px;
  }

  .page-about .commit-card__icon {
    height: 62px;
    margin-bottom: 16px;
  }

  .page-about .commit-card h3 {
    min-height: auto;
    margin-bottom: 10px;
    font-size: .78rem;
  }

  .page-about .commit-card p {
    font-size: .69rem;
    line-height: 1.52;
  }

  .page-about .rail-ctrl {
    margin-top: 5px;
    display: none;
  }

  /* Team -------------------------------------------------------------- */
  .page-about .team {
    min-height: auto;
    padding: 62px 0 66px;
  }

  .page-about .team .sect-head .h-sect {
    font-size: 1.78rem;
  }

  .page-about .team .sect-head p {
    margin-top: 8px;
    font-size: .74rem;
  }

  .page-about .team__grid {
    width: 100%;
    margin-top: 34px;
    padding: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .page-about .team__grid::-webkit-scrollbar {
    display: none;
  }

  .page-about .member {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    padding-inline: 8px;
    scroll-snap-align: start;
  }

  .page-about .member img {
    width: 128px;
    height: 128px;
    margin-bottom: 16px;
    box-shadow: none;
  }

  .page-about .member h3 {
    font-size: .86rem;
  }

  .page-about .member span {
    margin-top: 4px;
    font-size: .68rem;
  }

  .page-about .team-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 19px;
  }

  .page-about .team-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #bcead8;
  }

  .page-about .team-dots button[aria-selected="true"] {
    background: rgba(19, 82, 60, 1);
  }

  /* Certifications ---------------------------------------------------- */
  .page-about .certs {
    min-height: auto;
    padding: 64px 0 88px;
  }

  .page-about .certs>.shell {
    width: calc(100% - 32px);
  }

  .page-about .certs .h-sect {
    margin: 0 0 28px;
    font-size: 1.72rem;
    line-height: 1.08;
  }

  .page-about .certs__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .page-about .badges {
    display: grid;
    gap: 9px;
    margin-bottom: 24px;
  }

  .page-about .badge {
    width: fit-content;
    max-width: 100%;
    min-height: 35px;
    padding: 7px 11px;
    white-space: normal;
    font-size: .64rem;
    line-height: 1.35;
  }

  .page-about .badge svg {
    width: 13px;
    height: 13px;
  }

  .page-about .cert-frame {
    width: 100%;
    min-height: 214px;
    padding: 24px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    /* background: #21383a; */
  }

  .page-about .cert-frame img {
    width: min(170px, 64%);
    max-height: 170px;
    object-fit: contain;
  }

  .page-about .cert-dots {
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
  }

  .page-about .cert-dots button,
  .page-about .cert-dots button[aria-selected="true"] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }

  .page-about .certs__copy {
    padding-top: 0;
  }

  .page-about .certs__copy p {
    margin: 0;
    font-size: .73rem;
    line-height: 1.66;
  }

  .page-about .certs__copy p+p {
    margin-top: 20px;
  }

  .page-about .certs .flowers {
    right: 8%;
    bottom: 0;
    width: 112px;
  }

  /* CTA --------------------------------------------------------------- */
  .page-about .cta-band {
    padding: 38px 8px 48px;
  }

  .page-about .cta-band .shell-wide {
    width: 100%;
  }

  .page-about .cta {
    min-height: 230px;
    border-radius: 8px;
  }

  .page-about .cta__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .page-about .cta>div {
    padding-inline: 20px;
  }

  .page-about .cta h2 {
    font-size: 1.25rem;
  }

  .page-about .cta p {
    max-width: 260px;
    margin-top: 8px;
    font-size: .68rem;
    line-height: 1.45;
  }

  .page-about .cta .btn {
    min-height: 36px;
    margin-top: 16px;
    padding-inline: 15px;
    font-size: .68rem;
  }

  /* Footer ------------------------------------------------------------ */
  .page-about .footer>.footer__grid.shell {
    width: calc(100% - 32px);
    padding: 48px 0 42px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
  }

  .page-about .footer__brand {
    grid-column: 1 / -1;
  }

  .page-about .footer__brand>img {
    width: auto;
    height: 38px;
  }

  .page-about .footer__brand>p {
    max-width: 330px;
    margin-top: 17px;
    font-size: .76rem;
    line-height: 1.58;
  }

  .page-about .footer__socials {
    margin-top: 20px;
    gap: 9px;
  }

  .page-about .footer__socials a {
    width: 30px;
    height: 30px;
  }

  .page-about .footer__socials svg {
    width: 14px;
    height: 14px;
  }

  .page-about .footer__col h3,
  .page-about .footer__contact dt {
    margin-bottom: 12px;
    font-size: .76rem;
  }

  .page-about .footer__col ul {
    gap: 11px;
  }

  .page-about .footer__col a,
  .page-about .footer__contact a,
  .page-about .footer__contact dd {
    font-size: .72rem;
    line-height: 1.45;
  }

  .page-about .footer__contact {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 4px;
  }

  .page-about .footer__contact dt,
  .page-about .footer__contact dd {
    margin: 0;
  }

  .page-about .footer__contact dt:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .page-about .footer__contact dd:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }

  .page-about .footer__contact dt:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .page-about .footer__contact dd:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }

  .page-about .footer__bar {
    min-height: auto;
  }

  .page-about .footer__bar>.shell {
    width: calc(100% - 32px);
    min-height: 74px;
    padding: 14px 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
  }

  .page-about .footer__bar ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .page-about .footer__bar p,
  .page-about .footer__bar a {
    font-size: .58rem;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .page-about .ahero {
    min-height: 640px;
  }

  .page-about .mission {
    min-height: 1190px;
    padding-top: 590px;
    background-size: auto 590px;
  }

  .page-about .mission::before {
    top: 320px;
    height: 195px;
  }

  .page-about .mission__road {
    width: 142px;
    height: 545px;
  }

  .page-about .footer>.footer__grid.shell {
    gap: 31px 18px;
  }

  .page-about .footer__bar p,
  .page-about .footer__bar a {
    font-size: .54rem;
  }
}

/* ==========================================================================
   FINAL MISSION UI + STATIC FOLLOWING SECTIONS
   Only the Mission section layout and post-Mission scroll transitions change.
   ========================================================================== */

/* Mission & Vision - desktop/tablet composition ------------------------- */
.page-about .mission {
  position: relative;
  min-height: clamp(820px, 59vw, 1080px);
  padding: clamp(330px, 27vw, 510px) 0 clamp(78px, 6vw, 112px);
  overflow: hidden;
  isolation: isolate;
  color: #111811;
  background:
    url("../img/about-us-roadground.png") center top / 100% 100% no-repeat;
  contain: paint;
}

/* Do not place an artificial colour band over the supplied artwork. */
.page-about .mission::before {
  content: none !important;
}

/* The road is already inside about-us-roadground.png.
   This transparent box is used only to position the two moving trucks. */
.page-about .mission__road {
  position: absolute;
  top: 0;
  right: 6.8%;
  bottom: 0;
  width: 15.8%;
  height: auto;
  z-index: 2;
  overflow: hidden;
  background: none;
  filter: none;
}

.page-about .mission__road .truck {
  position: absolute;
  left: 50%;
  width: 44%;
  max-width: 138px;
  translate: -50% 0;
  filter: drop-shadow(0 7px 8px rgba(13, 43, 23, .18));
}

.page-about .mission__road .truck-1 {
  top: calc(2% + (var(--sp, 0) * 58%));
  rotate: 180deg;
}

.page-about .mission__road .truck-2 {
  top: calc(80% - (var(--sp, 0) * 48%));
  rotate: 0deg;
}

.page-about .mission__deco {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.page-about .mission .picnic {
  top: 24%;
  right: 46%;
  width: clamp(72px, 7.4vw, 138px);
}

.page-about .mission .play {
  top: 19%;
  right: 32%;
  width: clamp(76px, 7.8vw, 145px);
}

.page-about .mission .bin-1 {
  top: 31%;
  right: 31%;
  bottom: auto;
  width: clamp(26px, 2.5vw, 46px);
}

.page-about .mission .bin-2 {
  top: 48%;
  right: 38%;
  bottom: auto;
  width: clamp(23px, 2.2vw, 41px);
}

.page-about .mission__inner.shell {
  position: relative;
  z-index: 4;
  width: min(calc(100% - 80px), 1480px);
  max-width: none;
  margin-inline: auto;
  padding: 0 clamp(300px, 29vw, 520px) 0 clamp(15px, 4vw, 72px);
}

.page-about .mission__inner .h-sect {
  max-width: 600px;
  margin: 0 0 clamp(32px, 3vw, 48px);
  color: #101710;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(2rem, 2.5vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.page-about .pillars {
  max-width: 590px;
  padding: 0;
}

.page-about .pillar {
  max-width: 570px;
}

.page-about .pillar+.pillar {
  margin-top: clamp(26px, 2.7vw, 43px);
}

.page-about .pillar h3 {
  margin: 0 0 8px;
  color: #111811;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  font-weight: 700;
  line-height: 1.32;
}

.page-about .pillar p {
  max-width: 58ch;
  margin: 0;
  color: #283128;
  font-size: clamp(.82rem, .78vw, .92rem);
  line-height: 1.62;
}

/* Post-Mission sections are immediately visible with no scroll reveals. */
.page-about .static-scroll-section [data-reveal],
.page-about .static-scroll-section [data-reveal="left"],
.page-about .static-scroll-section [data-reveal="right"],
.page-about .static-scroll-section [data-reveal="zoom"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0ms !important;
}

.page-about .static-scroll-section [data-par],
.page-about .static-scroll-section [data-par-x] {
  translate: none !important;
  transform: none !important;
  transition: none !important;
}

/* Keep ordinary rail/carousel scrolling, but remove automatic section motion. */
.page-about .static-scroll-section,
.page-about .static-scroll-section .commit-card,
.page-about .static-scroll-section .member,
.page-about .static-scroll-section .certs__copy,
.page-about .static-scroll-section .cert-frame,
.page-about .static-scroll-section .cta,
.page-about .static-scroll-section .cta__bg,
.page-about .static-scroll-section .flowers {
  animation: none !important;
}

/* Tablet ---------------------------------------------------------------- */
@media (max-width: 980px) {
  .page-about .mission {
    min-height: 1320px;
    padding: 650px 0 82px;
    background-position: 54% top;
    background-size: auto 650px;
    background-repeat: no-repeat;
    /* background-color: #75b447; */
  }

  .page-about .mission__road {
    top: 18px;
    right: 7%;
    bottom: auto;
    width: min(220px, 31vw);
    height: 600px;
  }

  .page-about .mission__road .truck {
    width: 43%;
  }

  .page-about .mission__road .truck-1 {
    top: calc(3% + (var(--sp, 0) * 49%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(77% - (var(--sp, 0) * 39%));
  }

  .page-about .mission .picnic {
    top: 18%;
    right: 58%;
    width: 72px;
  }

  .page-about .mission .play {
    top: 14%;
    right: 32%;
    width: 77px;
  }

  .page-about .mission .bin-1 {
    top: 28%;
    right: 27%;
    width: 27px;
  }

  .page-about .mission .bin-2 {
    top: 43%;
    right: 34%;
    width: 24px;
  }

  .page-about .mission__inner.shell {
    width: min(calc(100% - 48px), 900px);
    margin-inline: auto;
    padding: 0;
  }

  .page-about .mission__inner .h-sect {
    max-width: none;
    font-size: clamp(1.85rem, 5vw, 2.45rem);
  }

  .page-about .pillars,
  .page-about .pillar {
    max-width: 650px;
  }
}

/* Mobile - the road scene finishes first; text begins below it. ---------- */
@media (max-width: 767px) {
  .page-about .mission {
    min-height: 1180px;
    padding: 575px 0 68px;
    background-position: 54% top;
    background-size: auto 575px;
    background-repeat: no-repeat;
    /* background-color: #75b447; */
  }

  .page-about .mission__road {
    top: 14px;
    right: 4%;
    bottom: auto;
    width: 144px;
    height: 535px;
  }

  .page-about .mission__road .truck {
    width: 42%;
  }

  .page-about .mission__road .truck-1 {
    top: calc(4% + (var(--sp, 0) * 46%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(76% - (var(--sp, 0) * 36%));
  }

  .page-about .mission .picnic {
    top: 19%;
    right: 59%;
    width: 62px;
  }

  .page-about .mission .play {
    top: 14%;
    right: 30%;
    width: 67px;
  }

  .page-about .mission .bin-1 {
    top: 29%;
    right: 27%;
    width: 23px;
  }

  .page-about .mission .bin-2 {
    top: 43%;
    right: 34%;
    width: 21px;
  }

  .page-about .mission__inner.shell {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }

  .page-about .mission__inner .h-sect {
    max-width: none;
    margin-bottom: 27px;
    font-size: 1.62rem;
    line-height: 1.08;
  }

  .page-about .pillar,
  .page-about .pillars {
    max-width: none;
  }

  .page-about .pillar+.pillar {
    margin-top: 25px;
  }

  .page-about .pillar h3 {
    margin-bottom: 7px;
    font-size: .88rem;
  }

  .page-about .pillar p {
    max-width: none;
    font-size: .73rem;
    line-height: 1.56;
  }
}

@media (max-width: 380px) {
  .page-about .mission {
    min-height: 1140px;
    padding-top: 550px;
    background-size: auto 550px;
  }

  .page-about .mission__road {
    width: 136px;
    height: 510px;
  }
}



/* =======================================================================
   FINAL MISSION CLEANUP
   - remove extra dustbin visuals
   - hide the unwanted grandfather/campfire patch from the baked background
   - keep trucks separated and moving in opposite directions
   ======================================================================= */

.page-about .mission__road {
  z-index: 3;
}

.page-about .mission__deco,
.page-about .mission__inner {
  z-index: 4;
}

.page-about .mission .picnic {
  top: 13%;
  right: 50%;
  width: clamp(72px, 32vw, 185px);
}

.page-about .mission .play {
  top: 12%;
  right: 37%;
  width: clamp(76px, 11vw, 158px);
}

.page-about .mission__road .truck {
  left: 50%;
  width: 44%;
  max-width: 136px;
  translate: -50% 0;
}

/* The top truck goes downward and stops safely above mid road. */
.page-about .mission__road .truck-1 {
  top: calc(8% + (var(--sp, 0) * 28%));
  rotate: 180deg;
}

/* The bottom truck goes upward and stops safely below the top truck. */
.page-about .mission__road .truck-2 {
  top: calc(78% - (var(--sp, 0) * 22%));
  rotate: 0deg;
}

@media (max-width: 980px) {
  .page-about .mission::after {
    left: 4%;
    top: 19%;
    width: 120px;
    height: 84px;
  }

  .page-about .mission .picnic {
    top: 7%;
    right: 44%;
    width: 78px;
  }

  .page-about .mission .play {
    top: 16%;
    right: 40%;
    width: 84px;
  }

  .page-about .mission__road .truck {
    width: 42%;
  }

  .page-about .mission__road .truck-1 {
    top: calc(10% + (var(--sp, 0) * 24%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(76% - (var(--sp, 0) * 20%));
  }
}

@media (max-width: 620px) {
  .page-about .mission::after {
    left: 5%;
    top: 17%;
    width: 104px;
    height: 76px;
  }

  .page-about .mission .picnic {
    top: 6%;
    right: 46%;
    width: 72px;
  }

  .page-about .mission .play {
    top: 14%;
    right: 39%;
    width: 72px;
  }

  .page-about .mission__road .truck {
    width: 44%;
  }

  .page-about .mission__road .truck-1 {
    top: calc(8% + (var(--sp, 0) * 22%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(79% - (var(--sp, 0) * 18%));
  }
}

/* ========================================================================
   FINAL MOBILE MISSION SCENE FIX
   Keeps the complete road/grass/fence artwork visible on tablet and mobile
   and starts the Mission & Vision content below the illustrated scene.
   ======================================================================== */

@media (max-width: 980px) {
  .page-about .mission {
    min-height: auto;
    padding: clamp(270px, 43vw, 430px) 0 82px;
    background-image: url("../img/about-us-roadground.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    /* background-color: #75b447; */
  }

  .page-about .mission__road {
    top: 0;
    right: clamp(2px, 3vw, 28px);
    bottom: auto;
    width: clamp(105px, 18vw, 180px);
    height: clamp(250px, 41vw, 410px);
    overflow: hidden;
  }

  .page-about .mission__road .truck {
    width: 43%;
    max-width: none;
  }

  .page-about .mission__road .truck-1 {
    top: calc(8% + (var(--sp, 0) * 22%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(72% - (var(--sp, 0) * 18%));
  }

  .page-about .mission__inner.shell {
    width: min(calc(100% - 48px), 900px);
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }
}

@media (max-width: 767px) {
  .page-about .mission {
    min-height: auto;
    padding: clamp(205px, 53vw, 300px) 0 68px;
    background-image: url("../img/about-us-roadground.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    /* background-color: #75b447; */
  }

  .page-about .mission__road {
    top: 0;
    right: 0;
    bottom: auto;
    width: clamp(78px, 22vw, 112px);
    height: clamp(190px, 49vw, 278px);
    overflow: hidden;
  }

  .page-about .mission__road .truck {
    width: 44%;
    max-width: none;
  }

  .page-about .mission__road .truck-1 {
    top: calc(8% + (var(--sp, 0) * 20%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(72% - (var(--sp, 0) * 16%));
  }

  .page-about .mission .picnic {
    top: 5.5%;
    right: 47%;
    width: clamp(52px, 15vw, 72px);
  }

  .page-about .mission .play {
    top: 10%;
    right: 34%;
    width: clamp(55px, 16vw, 76px);
  }

  .page-about .mission__inner.shell {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }

  .page-about .mission__inner .h-sect {
    max-width: none;
    margin: 0 0 26px;
    font-size: clamp(1.8rem, 8vw, 2.15rem);
    line-height: 1.08;
  }

  .page-about .pillars,
  .page-about .pillar {
    max-width: none;
  }

  .page-about .pillar+.pillar {
    margin-top: 26px;
  }

  .page-about .pillar h3 {
    margin-bottom: 8px;
    font-size: clamp(.98rem, 4.2vw, 1.08rem);
    line-height: 1.35;
  }

  .page-about .pillar p {
    max-width: none;
    font-size: clamp(.88rem, 3.8vw, .98rem);
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  .page-about .mission {
    padding-top: 198px;
  }

  .page-about .mission__road {
    width: 76px;
    height: 184px;
  }

  .page-about .mission__inner .h-sect {
    font-size: 1.75rem;
  }
}

/* =======================================================================
   FINAL MISSION DUSTBIN FIX
   Four bins matching the approved About Us layout.
   Keep this block at the very end of about.css so earlier rules cannot hide it.
   ======================================================================= */

.page-about .mission__deco {
  z-index: 5;
  overflow: visible;
}

.page-about .mission .mission-bin {
  position: absolute;
  display: block !important;
  height: auto;
  max-width: none;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(18, 54, 24, .2));
  transform-origin: 50% 100%;
}

/* Desktop positions: four bins beside the left edge of the road. */
.page-about .mission .bin-1 {
  top: 27%;
  right: 32%;
  bottom: auto;
  width: clamp(25px, 21.15vw, 72px);
}

.page-about .mission .bin-2 {
  top: 40%;
  right: 32%;
  bottom: auto;
  width: clamp(25px, 21.15vw, 72px);
}

.page-about .mission .bin-3 {
  top: 56%;
  right: 32%;
  bottom: auto;
  width: clamp(25px, 21.15vw, 72px);
}

.page-about .mission .bin-4 {
  top: 71%;
  right: 32%;
  bottom: auto;
  width: clamp(25px, 21.15vw, 72px);
}

@media (max-width: 980px) {
  .page-about .mission .bin-1 {
    top: 22%;
    right: 25%;
    width: 27px;
  }

  .page-about .mission .bin-2 {
    top: 37%;
    right: 28%;
    width: 26px;
  }

  .page-about .mission .bin-3 {
    top: 52%;
    right: 25%;
    width: 25px;
  }

  .page-about .mission .bin-4 {
    top: 67%;
    right: 28%;
    width: 24px;
  }
}

@media (max-width: 767px) {
  .page-about .mission .mission-bin {
    filter: drop-shadow(0 3px 3px rgba(18, 54, 24, .18));
  }

  /* On mobile the road sits at the far right, so the bins stay beside it. */
  .page-about .mission .bin-1 {
    top: 20%;
    right: 8%;
    width: clamp(18px, 5.2vw, 24px);
  }

  .page-about .mission .bin-2 {
    top: 35%;
    right: 10%;
    width: clamp(18px, 5vw, 23px);
  }

  .page-about .mission .bin-3 {
    top: 50%;
    right: 8%;
    width: clamp(17px, 4.8vw, 22px);
  }

  .page-about .mission .bin-4 {
    top: 65%;
    right: 10%;
    width: clamp(17px, 4.7vw, 21px);
  }
}

@media (max-width: 380px) {

  .page-about .mission .bin-1,
  .page-about .mission .bin-3 {
    right: 7%;
  }

  .page-about .mission .bin-2,
  .page-about .mission .bin-4 {
    right: 9%;
  }
}


/* ======================================================================
   ABOUT PAGE - CTA + FOOTER ONLY
   This block is intentionally scoped to .page-about and does not modify
   any section above the footer area.
   ====================================================================== */

/* CTA banner ----------------------------------------------------------- */
.page-about .cta-band {
  padding: clamp(56px, 5.2vw, 86px) 0 clamp(72px, 6vw, 104px);
  background: #fff;
}

.page-about .cta-band .shell-wide {
  width: min(calc(100% - 128px), 1390px);
  max-width: none;
  margin-inline: auto;
}

.page-about .cta {
  position: relative;
  min-height: clamp(285px, 22vw, 350px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
}

.page-about .cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.page-about .cta>div {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, 760px);
  margin-inline: auto;
  padding: 34px 24px;
  text-align: center;
}

.page-about .cta h2 {
  margin: 0;
  color: #111811;
  font-size: clamp(1.8rem, 2.25vw, 2.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.page-about .cta p {
  max-width: 680px;
  margin: 14px auto 0;
  color: #26332b;
  font-size: clamp(.9rem, 1vw, 1.05rem);
  line-height: 1.55;
}

.page-about .cta .btn {
  min-width: 190px;
  min-height: 48px;
  margin-top: 28px;
  padding-inline: 28px;
  border: 1px solid #16815b;
  border-radius: 10px;
  color: #16815b;
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
  font-size: .9rem;
  font-weight: 700;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.page-about .cta .btn:hover {
  color: #fff;
  background: #16815b;
}

/* Footer --------------------------------------------------------------- */
.page-about .footer {
  color: #222b26;
  background: #fff;
  border-top: 0;
}

.page-about .footer>.footer__grid.shell {
  width: min(calc(100% - 136px), 1500px);
  max-width: none;
  margin-inline: auto;
  padding: clamp(88px, 7vw, 122px) 0 clamp(82px, 6.2vw, 112px);
  display: grid;
  grid-template-columns:
    minmax(300px, 1.45fr) minmax(118px, .48fr) minmax(230px, .9fr) minmax(210px, .72fr);
  column-gap: clamp(48px, 6vw, 112px);
  row-gap: 48px;
  align-items: start;
}

.page-about .footer__brand img {
  display: block;
  width: clamp(148px, 11.5vw, 184px);
  height: auto;
  max-height: none;
  object-fit: contain;
}

.page-about .footer__brand>p {
  max-width: 390px;
  margin: 25px 0 0;
  color: #26312b;
  font-size: clamp(.9rem, .92vw, 1rem);
  line-height: 1.65;
}

.page-about .footer__socials {
  margin-top: 30px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(18px, 1.55vw, 27px);
}

.page-about .footer__socials a {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #151b17;
  background: transparent;
  box-shadow: none;
  transition: color .2s ease, transform .2s ease;
}

.page-about .footer__socials a:hover {
  color: #16815b;
  border-color: transparent;
  background: transparent;
  transform: translateY(-2px);
}

.page-about .footer__socials svg {
  width: 21px;
  height: 21px;
}

.page-about .footer__col h3 {
  display: none;
}

.page-about .footer__col ul,
.page-about .footer__bar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .footer__col ul {
  display: grid;
  gap: clamp(22px, 1.9vw, 30px);
}

.page-about .footer__col a {
  color: #37403b;
  font-size: clamp(.82rem, .82vw, .94rem);
  font-weight: 400;
  line-height: 1.45;
}

.page-about .footer__col a:hover,
.page-about .footer__contact a:hover {
  color: #16815b;
}

.page-about .footer__contact {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}

.page-about .footer__contact dt {
  margin: 0 0 10px;
  color: #161d19;
  font-size: clamp(.76rem, .74vw, .86rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.page-about .footer__contact dd {
  margin: 0 0 34px;
  color: #49534d;
  font-size: clamp(.82rem, .8vw, .92rem);
  line-height: 1.5;
}

.page-about .footer__contact a {
  color: inherit;
  font: inherit;
}

/* Bottom legal bar ----------------------------------------------------- */
.page-about .footer__bar {
  min-height: 60px;
  color: #fff;
  background: #16815b;
}

.page-about .footer__bar>.shell {
  width: min(calc(100% - 136px), 1500px);
  max-width: none;
  min-height: 60px;
  margin-inline: auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.page-about .footer__bar p {
  margin: 0;
  color: #fff;
  font-size: clamp(.72rem, .72vw, .82rem);
  line-height: 1.4;
}

.page-about .footer__bar ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 2.5vw, 42px);
}

.page-about .footer__bar a {
  color: #fff;
  font-size: clamp(.72rem, .72vw, .82rem);
  line-height: 1.4;
}

@media (max-width: 1100px) {

  .page-about .cta-band .shell-wide,
  .page-about .footer>.footer__grid.shell,
  .page-about .footer__bar>.shell {
    width: min(calc(100% - 64px), 980px);
  }

  .page-about .footer>.footer__grid.shell {
    grid-template-columns: minmax(270px, 1.15fr) .7fr 1fr;
    column-gap: 48px;
  }

  .page-about .footer__contact {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 820px) {
  .page-about .footer>.footer__grid.shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 40px;
  }

  .page-about .footer__brand,
  .page-about .footer__contact {
    grid-column: 1 / -1;
  }

  .page-about .footer__contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

@media (max-width: 620px) {
  .page-about .cta-band {
    padding: 38px 18px 56px;
  }

  .page-about .cta-band .shell-wide {
    width: 100%;
  }

  .page-about .cta {
    min-height: clamp(310px, 98vw, 385px);
    border-radius: 8px;
  }

  .page-about .cta__bg {
    object-position: center;
  }

  .page-about .cta>div {
    width: 100%;
    align-self: start;
    padding: clamp(92px, 25vw, 118px) 20px 24px;
  }

  .page-about .cta h2 {
    font-size: clamp(1.48rem, 7vw, 1.85rem);
    line-height: 1.18;
  }

  .page-about .cta p {
    max-width: 330px;
    margin-top: 16px;
    font-size: clamp(.95rem, 4.5vw, 1.12rem);
    line-height: 1.55;
  }

  .page-about .cta .btn {
    width: min(100%, 330px);
    min-height: 54px;
    margin-top: 28px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #16815b;
    font-size: 1rem;
  }

  .page-about .footer>.footer__grid.shell {
    width: calc(100% - 48px);
    padding: 68px 0 112px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    row-gap: 58px;
  }

  .page-about .footer__brand {
    grid-column: 1 / -1;
  }

  .page-about .footer__brand img {
    width: min(188px, 62vw);
    height: auto;
  }

  .page-about .footer__brand>p {
    max-width: 340px;
    margin-top: 34px;
    color: #202722;
    font-size: clamp(.96rem, 4.2vw, 1.08rem);
    line-height: 1.72;
  }

  .page-about .footer__socials {
    margin-top: 36px;
    justify-content: flex-start;
    gap: clamp(20px, 7vw, 30px);
  }

  .page-about .footer__socials a {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .page-about .footer__socials svg {
    width: 24px;
    height: 24px;
  }

  .page-about .footer__col ul {
    gap: 31px;
  }

  .page-about .footer__col a {
    color: #333a36;
    font-size: clamp(.98rem, 4.3vw, 1.1rem);
    line-height: 1.4;
  }

  .page-about .footer__contact {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: -2px;
  }

  .page-about .footer__contact dt,
  .page-about .footer__contact dd {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .page-about .footer__contact dt {
    margin: 0 0 13px;
    color: #16815b;
    font-size: clamp(.83rem, 3.6vw, .94rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  .page-about .footer__contact dd {
    margin: 0 0 42px;
    color: #303934;
    font-size: clamp(1rem, 4.5vw, 1.12rem);
    line-height: 1.45;
  }

  .page-about .footer__contact dd:last-child {
    margin-bottom: 0;
  }

  .page-about .footer__bar {
    min-height: 154px;
  }

  .page-about .footer__bar>.shell {
    width: calc(100% - 48px);
    min-height: 154px;
    padding: 28px 0 24px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
  }

  .page-about .footer__bar ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: clamp(18px, 5vw, 28px);
  }

  .page-about .footer__bar p,
  .page-about .footer__bar a {
    font-size: clamp(.72rem, 3.25vw, .84rem);
    line-height: 1.4;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .page-about .cta-band {
    padding-inline: 14px;
  }

  .page-about .footer>.footer__grid.shell,
  .page-about .footer__bar>.shell {
    width: calc(100% - 36px);
  }

  .page-about .footer>.footer__grid.shell {
    column-gap: 24px;
  }

  .page-about .footer__socials {
    gap: 19px;
  }

  .page-about .footer__col a {
    font-size: .94rem;
  }

  .page-about .footer__bar ul {
    gap: 16px;
  }

  .page-about .footer__bar p,
  .page-about .footer__bar a {
    font-size: .69rem;
  }
}

.contact-header__logo img {
  width: auto;
  height: 31px;
  transition: filter .25s ease;
}

@media (max-width: 760px) {

  .contact-header__logo img,
  .contact-header.is-stuck .contact-header__logo img {
    height: 22px;
    filter: none;
  }
}

/* ==========================================================================
   FINAL ABOUT-US REFERENCE FIX — MISSION + CERTIFICATIONS
   07 Aug 2026
   Only overrides these two sections. All other page styles remain unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MISSION & VISION
   -------------------------------------------------------------------------- */
.page-about .mission {
  position: relative;
  min-height: clamp(860px, 72vw, 1160px);
  padding: clamp(150px, 12vw, 205px) 0 clamp(145px, 11vw, 185px);
  overflow: hidden;
  isolation: isolate;
  color: #111811;
  /* background: url("../img/about-us-roadground.png") center center / cover no-repeat; */
  contain: paint;
}

/* Disable older pseudo artwork so the supplied forest assets are the only borders. */
.page-about .mission::before,
.page-about .mission::after {
  content: none !important;
  display: none !important;
}

.page-about .mission__tree-strip {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.page-about .mission__tree-strip--top {
  top: -47px;

  height: clamp(94px, 8.4vw, 142px);
}

.page-about .mission__tree-strip--bottom {
  bottom: 0;
  height: clamp(62px, 5.4vw, 92px);
}

.page-about .mission__tree-strip img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.page-about .mission__road {
  /* position: absolute;
  top: 0;
  right: clamp(4%, 7vw, 10%);
  bottom: 0;
  width: clamp(190px, 18vw, 345px);
  overflow: visible;
  z-index: 3;
  background: url("../img/road.svg") repeat-y center top / 100% auto;
  filter: drop-shadow(0 0 26px rgba(18, 51, 20, .18)); */
}

.page-about .mission__welcome {
  position: absolute;
  top: clamp(-78px, -14.6vw, 75px);
  left: 50%;
  z-index: 9999;
  width: clamp(161px, 44vw, 343px);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.page-about .mission__deco {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.page-about .mission__deco>* {
  position: absolute;
}

/* Existing picnic.png is the seated-people asset from the supplied design. */
.page-about .mission .picnic,
.page-about .mission .mission__elders {
  top: auto !important;
  right: auto !important;
  left: clamp(4%, 6.2vw, 8%);
  bottom: clamp(95px, 10vw, 150px);
  width: clamp(95px, 11vw, 172px);
  z-index: 5;
}

.page-about .mission .play {
  top: clamp(16%, 16vw, 21%);
  right: clamp(36%, 40vw, 43%);
  width: clamp(78px, 9vw, 150px);
  z-index: 5;
}

.page-about .mission .mission-bin {
  display: block !important;
  z-index: 5;
}

.page-about .mission .bin-1 {
  top: 29%;
  right: 31%;
  bottom: auto;
  width: clamp(26px, 2.5vw, 46px);
}

.page-about .mission .bin-2 {
  top: 43%;
  right: 38%;
  bottom: auto;
  width: clamp(23px, 2.2vw, 41px);
}

.page-about .mission .bin-3 {
  top: 57%;
  right: 31%;
  bottom: auto;
  width: clamp(22px, 2.1vw, 39px);
}

.page-about .mission .bin-4 {
  top: 70%;
  right: 38%;
  bottom: auto;
  width: clamp(21px, 2vw, 37px);
}

.page-about .mission__inner,
.page-about .mission__inner.shell {
  position: relative;
  z-index: 6;
  max-width: 690px;
  margin-left: 7%;
}

.page-about .mission__road .truck {
  position: absolute;
  left: 50%;
  z-index: 7;
  width: 43%;
  max-width: 138px;
  translate: -50% 0;
  will-change: top;
}

/* Vehicles stay in separate halves of the road and never collide. */
.page-about .mission__road .truck-1 {
  top: calc(18% + (var(--sp, 0) * 22%));
  rotate: 180deg;
}

.page-about .mission__road .truck-2 {
  top: calc(73% - (var(--sp, 0) * 18%));
  rotate: 0deg;
}

/* --------------------------------------------------------------------------
   CERTIFICATIONS & COMPLIANCE — match supplied PDF
   -------------------------------------------------------------------------- */
.page-about .certs {
  position: relative;
  min-height: clamp(570px, 43vw, 760px);
  padding: clamp(76px, 6.8vw, 112px) 0 clamp(92px, 7.4vw, 126px);
  overflow: hidden;
  color: #fff;
  background: rgba(15, 45, 30, 1) !important;
}

.page-about .certs>.shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 260px), 1510px);
}

.page-about .certs .h-sect {
  margin: 0 0 clamp(30px, 3vw, 48px);
  color: #fff;
  font-size: clamp(2rem, 2.7vw, 3.25rem);
  line-height: 1.05;
}

.page-about .certs__grid {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  gap: clamp(58px, 7vw, 130px);
  align-items: center;
}

.page-about .badges {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-bottom: 28px;
}

.page-about .badge {
  width: fit-content;
  max-width: 100%;
  min-height: 38px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: rgba(255, 255, 255, .92);
  background: rgba(24, 91, 65, .68);
  font-size: clamp(.72rem, .78vw, .88rem);
  line-height: 1.35;
}

.page-about .badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.page-about .cert-frame {
  width: min(100%, 520px);
  min-height: clamp(270px, 22vw, 360px);
  padding: clamp(24px, 2.5vw, 38px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.page-about .cert-frame img {
  /* display: block;
  width: min(76%, 300px);
  max-height: 280px; */
  object-fit: contain;
}

.page-about .cert-dots {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin-top: 24px;
}

.page-about .cert-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
}

.page-about .cert-dots button[aria-selected="true"] {
  background: #8de2a4;
}

.page-about .certs__copy {
  padding-top: clamp(34px, 4vw, 68px);
}

.page-about .certs__copy p {
  max-width: 66ch;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(.86rem, .91vw, 1rem);
  line-height: 1.85;
}

.page-about .certs__copy p+p {
  margin-top: clamp(24px, 2.2vw, 34px);
}

.page-about .certs .flowers {
  width: clamp(145px, 29vw, 248px);
  position: absolute;
  right: clamp(4%, 6vw, 8%);
  bottom: -100px;
  width: clamp(118px, 11vw, 176px);
  width: clamp(145px, 29vw, 296px);
  pointer-events: none;
}

@media (max-width: 980px) {
  .page-about .mission {
    min-height: 820px;
    padding: 126px 0 118px;
  }

  .page-about .mission__tree-strip--top {
    height: 88px;
  }

  .page-about .mission__tree-strip--bottom {
    height: 60px;
  }

  .page-about .mission__road {
    right: 3%;
    width: clamp(145px, 20vw, 205px);
  }

  .page-about .mission__welcome {
    top: 48px;
    width: clamp(116px, 19vw, 172px);
  }

  .page-about .mission .picnic,
  .page-about .mission .mission__elders {
    left: 4%;
    bottom: 82px;
    width: 104px;
  }

  .page-about .mission .play {
    top: 17%;
    right: 35%;
    width: 82px;
  }

  .page-about .mission__road .truck {
    width: 42%;
  }

  .page-about .mission__road .truck-1 {
    top: calc(19% + (var(--sp, 0) * 20%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(72% - (var(--sp, 0) * 16%));
  }

  .page-about .certs>.shell {
    width: min(calc(100% - 48px), 900px);
  }

  .page-about .certs__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .page-about .cert-frame {
    width: min(100%, 560px);
  }

  .page-about .certs__copy {
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .page-about .mission {
    min-height: 720px;
    padding: 94px 0 92px;
  }

  .page-about .mission__tree-strip--top {
    height: 62px;
  }

  .page-about .mission__tree-strip--bottom {
    height: 44px;
  }

  .page-about .mission__road {
    right: 0;
    width: 108px;
  }

  .page-about .mission__welcome {
    top: 34px;
    width: 104px;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
  }

  .page-about .mission__inner .h-sect {
    max-width: calc(100% - 90px);
    font-size: clamp(1.72rem, 8vw, 2.05rem);
  }

  .page-about .pillar {
    max-width: calc(100% - 90px);
  }

  .page-about .mission .picnic,
  .page-about .mission .mission__elders {
    left: 4%;
    bottom: 54px;
    width: 76px;
  }

  .page-about .mission .play {
    top: 14%;
    right: 30%;
    width: 64px;
  }

  .page-about .mission .bin-1 {
    top: 29%;
    right: 29%;
    width: 21px;
  }

  .page-about .mission .bin-2 {
    top: 43%;
    right: 34%;
    width: 19px;
  }

  .page-about .mission .bin-3 {
    top: 57%;
    right: 29%;
    width: 18px;
  }

  .page-about .mission .bin-4 {
    top: 70%;
    right: 34%;
    width: 17px;
  }

  .page-about .mission__road .truck {
    width: 40%;
    max-width: 52px;
  }

  .page-about .mission__road .truck-1 {
    top: calc(20% + (var(--sp, 0) * 18%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(70% - (var(--sp, 0) * 14%));
  }

  .page-about .certs {
    min-height: auto;
    padding: 62px 0 82px;
  }

  .page-about .certs>.shell {
    width: calc(100% - 32px);
  }

  .page-about .certs .h-sect {
    margin-bottom: 26px;
    font-size: 1.76rem;
  }

  .page-about .badges {
    gap: 9px;
    margin-bottom: 24px;
  }

  .page-about .badge {
    min-height: 34px;
    padding: 7px 11px;
    white-space: normal;
    font-size: .66rem;
  }

  .page-about .cert-frame {
    width: 100%;
    min-height: 218px;
    padding: 22px;
  }

  .page-about .cert-frame img {
    width: min(170px, 64%);
    max-height: 170px;
  }

  .page-about .cert-dots {
    justify-content: flex-start;
    margin-top: 16px;
  }

  .page-about .certs__copy p {
    font-size: .75rem;
    line-height: 1.72;
  }

  .page-about .certs__copy p+p {
    margin-top: 20px;
  }

  .page-about .certs .flowers {
    right: 4px;
    width: 108px;
  }
}

/* ==========================================================================
   VISUAL FIX — 07 Aug 2026 (second pass)
   Two concrete bugs traced through the cascade above:

   1) .mission__tree-strip--top used `top: -47px` while its parent .mission
      has `overflow: hidden`. Anything positioned above y=0 inside an
      overflow:hidden box gets cut off, so part (or most) of the top forest
      strip — the transition line between "About Lowaste" and "Mission &
      Vision" that appears in the About_Us_8 reference — was being clipped
      away. Fixed by pinning it to top: 0, which sits comfortably inside the
      section's top padding.

   2) The winning `background` declaration for .mission (the last one that
      actually sets it, several thousand lines up) uses
      `center top / 100% 100% no-repeat`. `100% 100%` stretches the artwork
      to exactly the box's width AND height, distorting its proportions.
      Switching to `cover` preserves the image's aspect ratio and crops
      instead of stretching, matching how the source art actually looks in
      the design file.
   ========================================================================== */

.page-about .mission__tree-strip--top {
  top: 0;
}

.page-about .mission {
  background-size: cover;
}

/* ==========================================================================\n   FINAL MISSION REFERENCE ALIGNMENT - 07 AUG 2026\n   Matches the supplied About Us PDF/screenshot. This block intentionally\n   wins over older Mission overrides without changing other page sections.\n   ========================================================================== */

.page-about .mission {
  position: relative;
  min-height: clamp(760px, 63vw, 1040px);
  padding: clamp(285px, 31vw, 430px) 0 clamp(105px, 8vw, 140px);
  overflow: hidden;
  isolation: isolate;
  color: #111811;
  background-image: url("../img/about-us-roadground.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  contain: paint;
}

/* Do not allow older pseudo elements to hide the elderly/campfire artwork. */
.page-about .mission::before,
.page-about .mission::after {
  content: none !important;
  display: none !important;
}

/* ----------------------------- FOREST ---------------------------------- */
.page-about .mission__tree-strip {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.page-about .mission__tree-strip--top {
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(94px, 9vw, 145px);
}

/* The reference has the bottom trees concentrated around the road exit,
   not a full-width hedge across the whole section. */
.page-about .mission__tree-strip--bottom {
  right: 0;
  bottom: -44px;
  left: auto;
  width: clamp(236px, 92vw, 439px);
  height: clamp(72px, 18vw, 141px);
}

.page-about .mission__tree-strip img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.page-about .mission__tree-strip--top img {
  object-position: center center;
}

.page-about .mission__tree-strip--bottom img {
  object-position: right bottom;
}

/* ------------------------------- ROAD ---------------------------------- */
.page-about .mission__road {
  /* position: absolute;
  top: 0;
     right: clamp(3%, 15vw, 11%);
  bottom: 0;
  width: clamp(112px, 14.5vw, 245px);
  overflow: visible;
  z-index: 3;
  background: url("../img/road.svg") repeat-y center top / 100% auto;
  filter: drop-shadow(0 0 20px rgba(18, 51, 20, .14)); */
}

/* Welcome gate must sit exactly on the mouth of the road. */
.page-about .mission__welcome {
  top: -28px;
  left: 50%;
  z-index: 8;
  width: 100%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

/* Trucks remain centred inside the road and stay in separate travel zones. */
.page-about .mission__road .truck {
  position: absolute;
  left: 50%;
  z-index: 7;
  width: 58%;
  max-width: 107px;
  translate: -9%;
  will-change: top;
  filter: drop-shadow(rgba(12, 34, 19, 0.16) 0px 5px 6px);
}

.page-about .mission__road .truck-1 {
  top: calc(16% + (var(--sp, 0) * 19%));
  rotate: 180deg;
}

.page-about .mission__road .truck-2 {
  top: calc(77% - (var(--sp, 0) * 17%));
  rotate: 0deg;
}

/* ----------------------------- DECOR ----------------------------------- */
.page-about .mission__deco {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.page-about .mission__deco>* {
  position: absolute;
}

/* Family picnic - upper-left/centre of the open lawn. */
.page-about .mission .picnic {
  top: 51%;
  left: 34%;
  right: auto !important;
  bottom: 64% !important;
  width: clamp(97px, 22vw, 166px);
  z-index: 5;
}

/* Swing/play asset - to the right of the picnic, before the road. */
.page-about .mission .play {
  top: 24%;
  right: clamp(34%, 37vw, 40%);
  left: auto;
  bottom: auto;
  width: clamp(82px, 8.5vw, 140px);
  z-index: 5;
}

/* Four bins form one clean vertical line immediately to the left of the
   roadside trees. They are deliberately larger than the old implementation. */
.page-about .mission .mission-bin {
  display: block !important;
  right: clamp(33%, 35.5vw, 30%);
  bottom: auto !important;
  width: clamp(28px, 16.65vw, 90px);
  height: auto;
  z-index: 6;
  transform: none !important;
  translate: none !important;
}

.page-about .mission .bin-1 {
  top: 34%;
}

.page-about .mission .bin-2 {
  top: 48%;
}

.page-about .mission .bin-3 {
  top: 62%;
}

.page-about .mission .bin-4 {
  top: 76%;
}

/* ----------------------------- CONTENT --------------------------------- */
.page-about .mission__inner,
.page-about .mission__inner.shell {
  position: relative;
  z-index: 6;
  width: min(calc(100% - 48px), 1320px);
  max-width: none;
  margin-inline: auto;
  padding-left: clamp(34px, 7vw, 118px);
  padding-right: clamp(190px, 25vw, 390px);
}

.page-about .mission__inner .h-sect {
  max-width: 560px;
  margin: 0 0 clamp(30px, 3vw, 46px);
  color: #0b120c;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(2rem, 2.5vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.page-about .mission .pillars {
  max-width: 585px;
  padding: 0;
}

.page-about .mission .pillar {
  max-width: 565px;
}

.page-about .mission .pillar+.pillar {
  margin-top: clamp(26px, 2.7vw, 42px);
}

.page-about .mission .pillar h3 {
  margin: 0 0 8px;
  color: #111811;
  font-size: clamp(1rem, 1.12vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
}

.page-about .mission .pillar p {
  max-width: 58ch;
  margin: 0;
  color: rgba(0, 0, 0, 1);
  font-size: clamp(.82rem, .82vw, .94rem);
  line-height: 1.62;
}

/* ----------------------------- TABLET ---------------------------------- */
@media (max-width: 980px) {
  .page-about .mission {
    min-height: 760px;
    padding: 260px 0 105px;
  }

  .page-about .mission__tree-strip--top {
    height: 86px;
  }

  .page-about .mission__tree-strip--bottom {
    width: 240px;
    height: 70px;
  }

  .page-about .mission__road {
    right: 2%;
    width: clamp(112px, 17vw, 165px);
  }

  .page-about .mission__welcome {
    top: 0;
    width: 94%;
  }

  .page-about .mission__road .truck {
    width: 39%;
    max-width: 68px;
  }

  .page-about .mission .picnic {
    top: 25%;
    left: 23%;
    width: 88px;
  }

  .page-about .mission .play {
    top: 22%;
    right: 27%;
    width: 82px;
  }

  .page-about .mission .mission-bin {
    right: 24%;
    width: 28px;
  }

  .page-about .mission .bin-1 {
    top: 34%;
  }

  .page-about .mission .bin-2 {
    top: 48%;
  }

  .page-about .mission .bin-3 {
    top: 62%;
  }

  .page-about .mission .bin-4 {
    top: 76%;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: min(calc(100% - 40px), 900px);
    padding-left: clamp(24px, 6vw, 58px);
    padding-right: clamp(150px, 24vw, 230px);
  }
}

/* ----------------------------- MOBILE ---------------------------------- */
@media (max-width: 620px) {
  .page-about .mission {
    min-height: 700px;
    padding: 218px 0 86px;
    background-position: 46% top;
  }

  .page-about .mission__tree-strip--top {
    height: 62px;
  }

  .page-about .mission__tree-strip--bottom {
    width: 150px;
    height: 50px;
  }

  .page-about .mission__road {
    right: 0;
    width: 98px;
  }

  .page-about .mission__welcome {
    width: 96%;
  }

  .page-about .mission__road .truck {
    width: 40%;
    max-width: 44px;
  }

  .page-about .mission__road .truck-1 {
    top: calc(17% + (var(--sp, 0) * 16%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(76% - (var(--sp, 0) * 14%));
  }

  .page-about .mission .picnic {
    top: 23%;
    left: 10%;
    width: 72px;
  }

  .page-about .mission .play {
    top: 20%;
    right: 26%;
    width: 65px;
  }

  .page-about .mission .mission-bin {
    right: 25%;
    width: 24px;
  }

  .page-about .mission .bin-1 {
    top: 32%;
  }

  .page-about .mission .bin-2 {
    top: 45%;
  }

  .page-about .mission .bin-3 {
    top: 58%;
  }

  .page-about .mission .bin-4 {
    top: 71%;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: calc(100% - 28px);
    margin-inline: auto;
    padding-left: 0;
    padding-right: 108px;
  }

  .page-about .mission__inner .h-sect {
    font-size: clamp(1.65rem, 7.7vw, 2rem);
    margin-bottom: 25px;
  }

  .page-about .mission .pillar+.pillar {
    margin-top: 24px;
  }

  .page-about .mission .pillar h3 {
    font-size: .96rem;
  }

  .page-about .mission .pillar p {
    font-size: .78rem;
    line-height: 1.55;
  }
}

/* ==========================================================================
   CONSOLIDATED ABOUT PAGE UI REPAIR — 07 AUG 2026
   This block intentionally sits at the very end of about.css.
   It resolves the competing legacy overrides above and provides one final
   source of truth for the Mission scene and responsive page layout.
   ========================================================================== */

/* ---------- Mission scene: desktop/tablet baseline ----------------------- */
.page-about .mission {
  --mission-road-right: clamp(34px, 8.2vw, 150px);
  --mission-road-width: clamp(132px, 13.8vw, 238px);
  --mission-top-forest-h: clamp(92px, 8.5vw, 142px);
  position: relative;
  min-height: clamp(820px, 66vw, 1080px);
  padding: clamp(300px, 29vw, 430px) 0 clamp(105px, 8vw, 140px);
  overflow: hidden;
  isolation: isolate;
  background-image: url("../img/about-us-roadground.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* background-color: #75b447; */
  contain: paint;
}

.page-about .mission::before,
.page-about .mission::after {
  content: none !important;
  display: none !important;
}

/* Keep the transition artwork INSIDE the clipped section so it can never
   disappear at the top/bottom. */
.page-about .mission__tree-strip {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

.page-about .mission__tree-strip--top {
  top: -72px;
  left: -1px;
  width: 100%;
  width: 100%;
  height: 180px;
}

.page-about .mission__tree-strip--bottom {
  right: 48px;
  bottom: -46px;
  left: auto;
  width: clamp(230px, 28vw, 470px);
  height: clamp(81px, 30vw, 128px);
}

.page-about .mission__tree-strip img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.page-about .mission__tree-strip--top img {
  object-position: center bottom;
}

.page-about .mission__tree-strip--bottom img {
  object-position: right bottom;
}

/* Road layer */
.page-about .mission__road {
  /* position: absolute;
  top: 0;
  right: var(--mission-road-right);
  bottom: 0;
  width: var(--mission-road-width);
  overflow: visible;
  z-index: 5;
  background: url("../img/road.svg") repeat-y center top / 100% auto;
  filter: drop-shadow(0 0 18px rgba(18, 51, 20, .14)); */
}

/* The previous top:-28px was clipped by .mission { overflow:hidden }.
   Pinning the gate inside the section fixes the top alignment. */
.page-about .mission__welcome {
  position: absolute;
  top: 31px;
  left: 22%;
  z-index: 9;
  width: 91%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Trucks must remain centred on the road. The legacy translate:-9% caused
   visible horizontal drift. */
.page-about .mission__road .truck {
  position: absolute;
  left: 35%;
  z-index: 8;
  width: 47%;
  max-width: 104px;
  translate: -50% 0;
  will-change: top;
  filter: drop-shadow(0 5px 6px rgba(12, 34, 19, .16));
}

.page-about .mission__road .truck-1 {
  top: calc(16% + (var(--sp, 0) * 19%));
  rotate: 180deg;
}

.page-about .mission__road .truck-2 {
  top: calc(77% - (var(--sp, 0) * 17%));
  rotate: 0deg;
}

/* Scene decorations */
.page-about .mission__deco {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.page-about .mission__deco>* {
  position: absolute;
}

.page-about .mission .picnic {
  top: 22%;
  left: clamp(16%, 36vw, 34%);
  right: auto !important;
  bottom: 68% !important;
  width: clamp(76px, 20.6vw, 148px);
  z-index: 6;
}

.page-about .mission .play {
  top: 18%;
  right: clamp(30%, 40vw, 51%);
  left: auto;
  bottom: auto;
  width: clamp(74px, 10vw, 137px);
  z-index: 6;
}

/* Four bins: keep them visually small and beside the road. */
.page-about .mission .mission-bin {
  display: block !important;
  right: calc(var(--mission-road-right) + var(--mission-road-width) + clamp(10px, 9.3vw, 126px));
  bottom: auto !important;
  width: clamp(24px, 31.2vw, 88px);
  height: auto;
  max-width: none;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 7;
  transform: none !important;
  translate: none !important;
}

.page-about .mission .bin-1 {
  top: 20%;
}

.page-about .mission .bin-2 {
  top: 40%;
}

.page-about .mission .bin-3 {
  top: 60%;
}

.page-about .mission .bin-4 {
  top: 80%;
}

/* Mission copy */
.page-about .mission__inner,
.page-about .mission__inner.shell {
  position: relative;
  z-index: 8;
  width: min(calc(100% - 80px), 1480px);
  max-width: none;
  margin-inline: auto;
  padding-left: 247px;
  padding-right: clamp(260px, 25vw, 430px);
}

.page-about .mission__inner .h-sect {
  max-width: 590px;
  margin: 0 0 clamp(30px, 3vw, 46px);
}

.page-about .mission .pillars,
.page-about .mission .pillar {
  max-width: 590px;
}

/* ---------- Tablet ------------------------------------------------------- */
@media (max-width: 980px) {
  .page-about .mission {
    --mission-road-right: clamp(14px, 4vw, 36px);
    --mission-road-width: clamp(118px, 19vw, 178px);
    --mission-top-forest-h: clamp(72px, 9vw, 90px);
    min-height: auto;
    padding: clamp(330px, 48vw, 470px) 0 94px;
    background-position: 50% top;
    background-size: auto clamp(430px, 64vw, 620px);
  }

  .page-about .mission__road {
    bottom: auto;
    height: clamp(410px, 61vw, 590px);
  }

  .page-about .mission__welcome {
    top: 0;
    width: 110%;
  }

  .page-about .mission__tree-strip--bottom {
    width: clamp(190px, 31vw, 290px);
    height: clamp(58px, 8vw, 76px);
  }

  .page-about .mission .picnic {
    top: 16%;
    left: 17%;
    width: clamp(66px, 9vw, 88px);
  }

  .page-about .mission .play {
    top: 15%;
    right: 30%;
    width: clamp(66px, 9vw, 86px);
  }

  .page-about .mission .mission-bin {
    right: calc(var(--mission-road-right) + var(--mission-road-width) + 9px);
    width: clamp(21px, 3vw, 28px);
  }

  .page-about .mission .bin-1 {
    top: 29%;
  }

  .page-about .mission .bin-2 {
    top: 43%;
  }

  .page-about .mission .bin-3 {
    top: 57%;
  }

  .page-about .mission .bin-4 {
    top: 70%;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: min(calc(100% - 48px), 900px);
    padding: 0;
  }

  .page-about .mission .pillars,
  .page-about .mission .pillar {
    max-width: 650px;
  }

  .page-about .certs__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mobile: one clean layout source of truth -------------------- */
@media (max-width: 767px) {
  .page-about {
    --header-h: 62px;
    overflow-x: clip;
  }

  .page-about .shell,
  .page-about .shell-wide {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
  }

  /* Header */
  .page-about .site-header,
  .page-about .site-header.is-stuck {
    position: fixed;
    inset: 0 0 auto;
    height: var(--header-h);
    color: #17221c;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 1px 0 rgba(18, 48, 30, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-about .site-header__inner {
    width: calc(100% - 24px);
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .page-about .contact-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .page-about .contact-header__logo img {
    display: block;
    width: auto;
    height: 24px;
    max-width: min(34vw, 132px);
  }

  .page-about .header-actions {
    margin-left: auto;
  }

  .page-about .menu-button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
  }

  .page-about .mobile-menu {
    inset: var(--header-h) 0 0;
    height: calc(100dvh - var(--header-h));
  }

  /* Hero */
  .page-about .ahero {
    --hero-cut: 48%;
    --hero-art-y: calc(var(--hero-progress, 0) * -10px);
    --hero-copy-y: calc(var(--hero-progress, 0) * 150px);
    min-height: 600px;
    height: min(168vw, 710px);
    max-height: 710px;
    padding-top: var(--header-h);
  }

  .page-about .ahero__banner,
  .page-about .ahero__foreground {
    top: var(--header-h);
    bottom: auto;
    height: calc(100% - var(--header-h));
    inset-inline: 0;
    object-position: 50% 100%;
    transform: translate3d(0, var(--hero-art-y), 0) scale(1.01);
  }

  .page-about .ahero__content {
    top: calc(var(--header-h) + 13%);
    width: 100%;
    padding-inline: 18px;
  }

  .page-about .ahero__content .h-hero {
    margin: 0;
    font-size: clamp(2.55rem, 12vw, 3.25rem);
    line-height: .98;
  }

  .page-about .ahero__content p {
    max-width: 320px;
    margin-top: 12px;
    font-size: clamp(.78rem, 3.6vw, .9rem);
    line-height: 1.5;
  }

  /* About Lowaste */
  .page-about .aintro {
    min-height: auto;
    padding: 58px 0 50px;
    background-position: center top;
    background-size: cover;
  }

  .page-about .aintro__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .page-about .aintro__copy,
  .page-about .aintro__scene {
    width: 100%;
    max-width: none;
    translate: none;
  }

  .page-about .aintro__copy .h-sect {
    margin-bottom: 12px;
    font-size: clamp(1.72rem, 7.6vw, 2rem);
  }

  .page-about .aintro__copy p {
    max-width: none;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(0, 0, 0, 1);
  }

  .page-about .aintro__scene .warehouse {
    width: min(100%, 1300px);
    margin-left: auto;
    /* filter: drop-shadow(0 25px 35px rgba(30, 70, 22, .18)); */
    position: absolute;
    right: 3%;
    bottom: 26%;
  }

  .page-about .aintro__copy .btn {
    margin-top: 20px;
  }

  .page-about .aintro__scene {
    min-height: clamp(260px, 72vw, 325px);
  }

  .page-about .aintro__scene .warehouse {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .page-about .aintro__scene .truck {
    left: 2%;
    bottom: -1%;
    width: min(46vw, 190px);
  }

  .page-about .aintro__scene .forklift {
    right: -4%;
    bottom: 20%;
    width: min(52vw, 166px);

  }

  .page-about .aintro__scene .pallet {
    right: 21%;
    bottom: 31%;
    width: min(20vw, 78px);
  }

  /* Mission: finish the illustration first, then give the copy full width. */
  .page-about .mission {
    --mission-road-right: 0px;
    --mission-road-width: clamp(82px, 23vw, 108px);
    --mission-top-forest-h: clamp(54px, 15vw, 66px);
    min-height: auto;
    padding: clamp(246px, 33vw, 235px) 0 0px;
    background-position: 49% top;
    background-size: 100%;
    /* background-color: #75b447; */
  }

  .page-about .mission__tree-strip--top {
    height: var(--mission-top-forest-h);
  }

  .page-about .mission__tree-strip--bottom {
    width: clamp(130px, 38vw, 175px);
    height: clamp(44px, 12vw, 56px);
  }

  .page-about .mission__road {
    top: 0;
    right: 0;
    bottom: auto;
    width: var(--mission-road-width);
    height: clamp(270px, 75vw, 355px);
    overflow: visible;
  }

  .page-about .mission__welcome {
    top: 0;
    width: 112%;
  }

  .page-about .mission__road .truck {
    width: 42%;
    max-width: 46px;
  }

  .page-about .mission__road .truck-1 {
    top: calc(18% + (var(--sp, 0) * 16%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(74% - (var(--sp, 0) * 13%));
  }

  .page-about .mission .picnic {
    top: 13%;
    left: 12%;
    width: clamp(56px, 16vw, 72px);
  }

  .page-about .mission .play {
    top: 15%;
    right: 27%;
    width: clamp(54px, 15vw, 68px);
  }

  .page-about .mission .mission-bin {
    right: calc(var(--mission-road-width) + 7px);
    width: clamp(17px, 4.8vw, 22px);
  }

  .page-about .mission .bin-1 {
    top: 28%;
  }

  .page-about .mission .bin-2 {
    top: 41%;
  }

  .page-about .mission .bin-3 {
    top: 54%;
  }

  .page-about .mission .bin-4 {
    top: 67%;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }

  .page-about .mission__inner .h-sect {
    max-width: none;
    margin: 0 0 26px;
    font-size: 23px;
    line-height: 1;
  }

  .page-about .mission .pillars,
  .page-about .mission .pillar {
    max-width: none;
  }

  .page-about .mission .pillar+.pillar {
    margin-top: -4px;
  }

  .page-about .mission .pillar h3 {
    margin-bottom: 7px;
    font-size: clamp(.96rem, 4.2vw, 1.06rem);
  }

  .page-about .mission .pillar p {
    max-width: none;
    font-size: 11px;
    line-height: 1.6;
    width: 227px;
  }

  /* Sustainability */
  .page-about .commit {
    min-height: auto;
    padding: 70px 16px 76px;
  }

  .page-about .commit__top {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 28px;
  }

  .page-about .commit__top .h-sect {
    max-width: 320px;
    margin: 0;
    font-size: clamp(1.7rem, 7.6vw, 2rem);
    line-height: 1.08;
  }

  .page-about .commit__top p {
    max-width: none;
    margin: 0;
    font-size: clamp(.82rem, 3.65vw, .92rem);
    line-height: 1.6;
  }

  .page-about .rail-wrap {
    width: 100%;
    padding: 12px 0 8px;
  }

  .page-about .rail {
    width: auto;
    margin: 0;
    padding: 0 0 12px;
    gap: 12px;
    scroll-padding-left: 0;
  }

  .page-about .commit-card {
    flex: 0 0 min(84vw, 300px);
    min-height: 278px;
    padding: 16px 16px 22px;
  }

  .page-about .commit-card__icon {
    height: 58px;
    margin-bottom: 15px;
  }

  .page-about .commit-card h3 {
    min-height: auto;
    font-size: .82rem;
  }

  .page-about .commit-card p {
    font-size: .72rem;
    line-height: 1.55;
  }

  .page-about .rail-ctrl {
    margin-top: 8px;
  }

  /* Team */
  .page-about .team {
    min-height: auto;
    padding: 60px 0 68px;
  }

  .page-about .team .sect-head .h-sect {
    font-size: clamp(1.72rem, 7.6vw, 2rem);
  }

  .page-about .team .sect-head p {
    margin-top: 8px;
    font-size: .78rem;
  }

  .page-about .team__grid {
    width: 100%;
    margin-top: 34px;
    padding: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .page-about .team__grid::-webkit-scrollbar {
    display: none;
  }

  .page-about .member {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    padding-inline: 8px;
    scroll-snap-align: start;
  }

  .page-about .member img {
    width: 126px;
    height: 126px;
    margin-bottom: 16px;
    box-shadow: none;
  }

  .page-about .team-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
  }

  /* Certifications */
  .page-about .certs {
    min-height: auto;
    padding: 62px 0 82px;
  }

  .page-about .certs>.shell {
    width: calc(100% - 32px);
  }

  .page-about .certs .h-sect {
    margin: 0 0 28px;
    font-size: clamp(1.68rem, 7.4vw, 1.95rem);
    line-height: 1.08;
  }

  .page-about .certs__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .page-about .badges {
    display: grid;
    justify-items: stretch;
    gap: 9px;
    margin-bottom: 22px;
  }

  .page-about .badge {
    width: 100%;
    min-height: 36px;
    padding: 8px 11px;
    white-space: normal;
    font-size: clamp(.66rem, 3vw, .76rem);
  }

  .page-about .cert-frame {
    width: 100%;
    min-height: 220px;
    padding: 22px;
    /* background: #21383a; */
  }

  .page-about .cert-frame img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
  }

  .page-about .cert-dots {
    justify-content: center;
    margin-top: 16px;
  }

  .page-about .certs__copy {
    padding-top: 0;
  }

  .page-about .certs__copy p {
    font-size: clamp(.78rem, 3.5vw, .88rem);
    line-height: 1.7;
  }

  .page-about .certs .flowers {
    right: 89px;
    bottom: -50px;
    width: 150px;
    opacity: .72;
    display: flex;
  }

  /* CTA */
  .page-about .cta-band {
    padding: 42px 16px 58px;
  }

  .page-about .cta-band .shell-wide {
    width: 100%;
  }

  .page-about .cta {
    min-height: clamp(270px, 76vw, 330px);
    border-radius: 10px;
  }

  .page-about .cta__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .page-about .cta>div {
    width: 100%;
    align-self: center;
    padding: 28px 20px;
  }

  .page-about .cta h2 {
    font-size: clamp(1.35rem, 6.5vw, 1.7rem);
  }

  .page-about .cta p {
    max-width: 310px;
    margin-top: 12px;
    font-size: clamp(.78rem, 3.5vw, .88rem);
    line-height: 1.55;
  }

  .page-about .cta .btn {
    width: auto;
    min-height: 44px;
    margin-top: 22px;
    padding-inline: 18px;
    font-size: .8rem;
  }

  /* Footer */
  .page-about .footer>.footer__grid.shell {
    width: calc(100% - 40px);
    padding: 58px 0 64px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 24px;
  }

  .page-about .footer__brand,
  .page-about .footer__contact {
    grid-column: 1 / -1;
  }

  .page-about .footer__brand img {
    width: min(170px, 54vw);
    height: auto;
  }

  .page-about .footer__brand>p {
    max-width: 340px;
    margin-top: 24px;
    font-size: .88rem;
    line-height: 1.65;
  }

  .page-about .footer__socials {
    margin-top: 26px;
    gap: 20px;
  }

  .page-about .footer__col ul {
    gap: 20px;
  }

  .page-about .footer__col a {
    font-size: .9rem;
  }

  .page-about .footer__contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .page-about .footer__contact dt,
  .page-about .footer__contact dd {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .page-about .footer__contact dt {
    margin: 0 0 8px;
    font-size: .78rem;
  }

  .page-about .footer__contact dd {
    margin: 0 0 26px;
    font-size: .9rem;
  }

  .page-about .footer__contact dd:last-child {
    margin-bottom: 0;
  }

  .page-about .footer__bar,
  .page-about .footer__bar>.shell {
    min-height: auto;
  }

  .page-about .footer__bar>.shell {
    width: calc(100% - 40px);
    padding: 20px 0;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
  }

  .page-about .footer__bar ul {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 20px;
  }

  .page-about .footer__bar p,
  .page-about .footer__bar a {
    font-size: .68rem;
    line-height: 1.45;
    white-space: normal;
  }
}

@media (max-width: 380px) {

  .page-about .shell,
  .page-about .shell-wide,
  .page-about .mission__inner,
  .page-about .mission__inner.shell,
  .page-about .certs>.shell {
    width: calc(100% - 28px);
  }

  .page-about .mission {
    padding-top: 238px;
    background-size: auto 690px;
  }

  .page-about .mission__road {
    width: 78px;
    height: 262px;
  }

  .page-about .mission .mission-bin {
    right: 84px;
  }

  .page-about .footer>.footer__grid.shell,
  .page-about .footer__bar>.shell {
    width: calc(100% - 32px);
  }

  .page-about .footer>.footer__grid.shell {
    column-gap: 18px;
  }
}

/* ========================================================================== 
   SHARED CONTACT-PAGE HEADER + FOOTER UI
   Keeps About page content untouched while matching Contact exactly.
   ========================================================================== */
.page-about {
  --contact-green: rgba(26, 129, 90, 1);
  --contact-green-dark: #0f6b4a;
}

/* Header ---------------------------------------------------------------- */
.page-about .contact-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 200;
  height: 72px;
  color: #fff;
  background: transparent;
  transition: height .25s ease, color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.page-about .contact-header.is-stuck {
  height: 64px;
  color: #111b17;
}

.page-about .contact-header__inner {
  width: min(calc(100% - 48px), 1840px);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

.page-about .contact-header__logo {
  display: flex;
  align-items: center;
  width: fit-content;
}

.page-about .contact-header__logo img {
  width: auto;
  height: 31px;
  transition: filter .25s ease;
}

.page-about .contact-header.is-stuck .contact-header__logo img {
  filter: none;
}

.page-about .contact-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(25px, 3vw, 52px);
}

.page-about .contact-nav a {
  position: relative;
  padding-block: 10px;
  color: inherit;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 400;
}

.page-about .contact-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}

.page-about .contact-nav a:hover::after,
.page-about .contact-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.page-about .contact-nav__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.page-about .contact-nav__more svg {
  width: 13px;
  height: 13px;
}

.page-about .contact-header__tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

.page-about .contact-icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  color: currentColor;
  background: transparent;
  cursor: pointer;
}

.page-about .contact-icon-btn svg {
  width: 20px;
  height: 20px;
}

.page-about .contact-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 102px;
  min-height: 38px;
  padding: 9px 20px;
  border-radius: 5px;
  color: #fff;
  background: var(--contact-green);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 500;
  transition: background-color .2s ease, transform .2s ease;
}

.page-about .contact-login:hover {
  background: var(--contact-green-dark);
  transform: translateY(-1px);
}

.page-about .contact-burger,
.page-about .contact-drawer {
  display: none;
}

/* Footer ---------------------------------------------------------------- */
.page-about .contact-footer {
  padding-top: clamp(78px, 7vw, 112px);
  background: #fff;
}

.page-about .contact-footer__inner {
  width: min(calc(100% - 64px), 1760px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.7fr .7fr 1.2fr .9fr;
  align-items: start;
  gap: clamp(34px, 5vw, 88px);
  padding-bottom: clamp(70px, 6vw, 100px);
}

.page-about .contact-footer__brand img {
  width: auto;
  height: 46px;
  margin-bottom: 19px;
}

.page-about .contact-footer__brand p {
  margin: 0;
  color: #313742;
  font-size: 14px;
  line-height: 1;
}

.page-about .contact-footer__socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 25px;
}

.page-about .contact-footer__socials a {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #111820;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.page-about .contact-footer__socials a:hover {
  color: var(--contact-green);
  transform: translateY(-2px);
}

.page-about .contact-footer__socials svg {
  width: 16px;
  height: 16px;
}

.page-about .contact-footer__nav {
  display: grid;
  gap: 22px;
  padding-top: 5px;
}

.page-about .contact-footer__nav a {
  width: fit-content;
  color: #363c48;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}

.page-about .contact-footer__nav a:hover,
.page-about .contact-footer__nav a[aria-current="page"] {
  color: var(--contact-green);
}

.page-about .contact-footer__contact {
  display: grid;
  gap: 30px;
  padding-top: 5px;
}

.page-about .contact-footer__contact div {
  display: grid;
  gap: 9px;
}

.page-about .contact-footer__contact span {
  font-size: 14px;
  font-weight: 600;
}

.page-about .contact-footer__contact a {
  color: #565c67;
  text-decoration: none;
  font-size: 14px;
}

.page-about .contact-footer__bar {
  color: #fff;
  background: var(--contact-green);
}

.page-about .contact-footer__bar>div {
  width: min(calc(100% - 64px), 1760px);
  min-height: 58px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.page-about .contact-footer__bar p,
.page-about .contact-footer__bar a {
  margin: 0;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}

.page-about .contact-footer__bar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
}

@media (max-width: 1100px) {
  .page-about .contact-footer__inner {
    grid-template-columns: 1.35fr .7fr 1fr .9fr;
    gap: 34px;
  }
}

@media (max-width: 900px) {
  .page-about .contact-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .page-about .contact-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .page-about.menu-open {
    overflow: hidden;
  }

  .page-about .contact-header,
  .page-about .contact-header.is-stuck,
  .page-about.menu-open .contact-header {
    height: 68px;
    color: #101820;
    /* -webkit-backdrop-filter: none; */
    background: #fff;
  }



  .page-about .contact-header__inner {
    width: calc(100% - 32px);
    display: flex;
    justify-content: space-between;
    gap: 18px;
  }

  .page-about .contact-header__logo img,
  .page-about .contact-header.is-stuck .contact-header__logo img {
    height: 22px;
    filter: none;
  }

  .page-about .contact-nav,
  .page-about .contact-icon-btn,
  .page-about .contact-login {
    display: none;
  }

  .page-about .contact-header__tools {
    margin-left: auto;
  }

  .page-about .contact-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;
    background: #f3f3f3;
    cursor: pointer;
  }

  .page-about .contact-burger span {
    display: block;
    width: 23px;
    height: 2px;
    border-radius: 99px;
    background: #101820;
    transform-origin: center;
    transition: transform .25s ease, opacity .2s ease;
  }

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

  .page-about.menu-open .contact-burger span:nth-child(2) {
    opacity: 0;
  }

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

  .page-about .contact-drawer {
    position: fixed;
    inset: 62px 0 0;
    z-index: 190;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: calc(100dvh - 62px);
    padding: 24px 20px 28px;
    overflow-y: auto;
    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-about.menu-open .contact-drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .page-about .contact-drawer nav {
    display: grid;
  }

  .page-about .contact-drawer nav a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding-inline: 4px;
    border-bottom: 1px solid #ecefed;
    color: #15201b;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
  }

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

  .page-about .contact-drawer__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 28px;
  }

  .page-about .contact-drawer__actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid var(--contact-green);
    border-radius: 7px;
    color: var(--contact-green);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
  }

  .page-about .contact-drawer__actions a:first-child {
    color: #fff;
    background: var(--contact-green);
  }

  .page-about .contact-footer {
    padding-top: 58px;
  }

  .page-about .contact-footer__inner {
    width: calc(100% - 40px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 24px;
    padding-bottom: 58px;
  }

  .page-about .contact-footer__brand,
  .page-about .contact-footer__contact {
    grid-column: 1 / -1;
  }

  .page-about .contact-footer__brand img {
    height: 81px;
  }

  .page-about .contact-footer__brand p {
    font-size: .84rem;
  }

  .page-about .contact-footer__nav {
    min-width: 0;
    gap: 18px;
  }

  .page-about .contact-footer__nav a {
    max-width: 100%;
    font-size: .83rem;
    overflow-wrap: anywhere;
  }

  .page-about .contact-footer__contact {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }

  .page-about .contact-footer__bar>div {
    width: calc(100% - 40px);
    min-height: 0;
    padding-block: 22px;
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 16px;
  }

  .page-about .contact-footer__bar ul {
    flex-wrap: wrap;
    gap: 13px 23px;
  }
}

@media (max-width: 480px) {
  .page-about .contact-footer__contact {
    grid-template-columns: 1fr;
  }

  .page-about .contact-footer__bar ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 9px;
  }

  .page-about .contact-footer__bar li,
  .page-about .contact-footer__bar a {
    white-space: nowrap;
  }
}


/* ==========================================================================
   ABOUT US — SCOPED FIXES
   Link this AFTER about.css:
     <link rel="stylesheet" href="assets/css/about-fixes.css">

   Nothing here touches the header, nav, footer, CTA, team, certifications,
   sustainability cards, type, colour or copy. Two fixes only:
     FIX 1 — .mission__tree-strip--top foreground stacking
     FIX 4 — fence as an image asset instead of CSS drawing
   ========================================================================== */


/* ==========================================================================
   FIX 1 — MISSION FOREGROUND STACKING
   --------------------------------------------------------------------------
   Root cause, from base.css:

     [data-par], [data-par-x] {
       translate: calc(...) calc(...);   -> non-none, always
       will-change: translate;           -> promotes preemptively
       backface-visibility: hidden;      -> compositing layer
     }

   Each of those independently creates a stacking context, permanently, even
   at rest. So a z-index set on .mission__tree-strip--top is scoped INSIDE
   its nearest [data-par] ancestor and can never outrank that ancestor's
   siblings. Raising the child is a no-op; the ancestor has to be raised.

   :has() lets us do that without knowing your DOM. Whatever parallax layer
   contains the strip gets lifted as a whole unit.
   ========================================================================== */

.page-about [data-par]:has(.mission__tree-strip--top),
.page-about [data-par-x]:has(.mission__tree-strip--top) {
  position: relative;
  z-index: 30;
  isolation: auto;
}

/* The strip's own layer, now that the ancestor can actually carry it. */
.page-about .mission__tree-strip--top {
  position: relative;
  z-index: 6;
}

/* Any ancestor clipping the strip's bleed. The reference lets this artwork
   overflow its section, so clipping wrappers between the section and the
   strip must not cut it. Scoped to ancestors of the strip only. */
.page-about .mission:has(.mission__tree-strip--top),
.page-about [data-scene]:has(.mission__tree-strip--top) {
  overflow: visible;
  isolation: auto;
}

/* Stop the 260px default clamp in about.js from throwing the strip off its
   CSS position. JS reads data-par-max, so this is a reminder, not a fix:
   add data-par-max="60" to the strip's parallax layer in about.html. */


/* ==========================================================================
   FIX 4 — FENCE AS IMAGE
   --------------------------------------------------------------------------
   Measured from About_Us__8_.pdf (1920 x 6424) and Frame_2018778254__1_.pdf
   (390 x 5310):

     asset native      1536 x 1024  (aspect 1.5), transparent PNG
     railing occupies  ~37%-60% of the image height; rest is empty space
     desktop tile      288 x 192, horizontal step 270 (18px overlap)
     mobile tile       147.6 x 98.4, step 138.3

   Because the railing sits in the middle band of a mostly-empty PNG, the
   container height must be the FULL tile height (192px at 1920), not the
   height of the visible railing. Sizing the box to the railing crops it.

   Set --fence-src to your real filename.
   ========================================================================== */

.page-about {
  --fence-src: url("../img/fence.png");

  /* 192 / 1920 = 10vw, held to the design height on very wide screens. */
  --fence-h: min(10vw, 192px);
}

/* Kill any existing CSS-drawn fence. Add your current fence class/element
   to this list if it is not one of these. */
.page-about .fence::before,
.page-about .fence::after,
.page-about .mission__fence::before,
.page-about .mission__fence::after,
.page-about .sustain__fence::before,
.page-about .sustain__fence::after {
  content: none !important;
  display: none !important;
}

.page-about .fence,
.page-about .mission__fence,
.page-about .sustain__fence {
  border: 0 !important;
  background-image: none;
}

/* The real fence. */
.page-about .fence-img {
  position: absolute;
  left: 0;
  z-index: 12;

  width: 100%;
  height: var(--fence-h);

  background-image: var(--fence-src);
  background-repeat: repeat-x;

  /* auto 100% preserves the 1.5 ratio off the height, so the tile can never
     stretch vertically however wide the viewport gets. */
  background-size: auto 100%;
  background-position: left center;

  pointer-events: none;
}

/* Top run — reference y3142, section top y3126.7, i.e. flush with the edge. */
.page-about .fence-img--top {
  top: 0;
}

/* Bottom run — reference y3873->4065 in a section ending y4153.3,
   so 88px clear of the bottom at 1920 = 4.58% of the section height. */
.page-about .fence-img--bottom {
  bottom: 4.58%;
}

/* The container needs to be a positioning context and must not clip the
   run. Add your section's class here if it differs. */
.page-about .sustain,
.page-about .sustain__scene {
  position: relative;
}

@media (max-width: 760px) {
  .page-about {
    /* 98.4 / 390 = 25.2vw. Mobile is proportionally much taller than
       desktop in the reference, so it is not the same ratio. */
    --fence-h: 25.2vw;
  }

  /* On mobile the reference runs the fence only across the open grass and
     lets the tree column cover the right end, rather than edge to edge. */
  .page-about .fence-img {
    width: 62%;
  }
}


/* ==========================================================================
   ABOUT PAGE — MISSION FOREST FOREGROUND FIX ONLY
   11 AUG 2026

   IMPORTANT:
   The existing last override changes .mission__tree-strip--top to
   position: relative, which removes it from the intended absolute scene
   layer and creates the large green gap/misalignment.

   This final block restores only the top forest strip.
   No road, gate, truck, content, fence, card, header, footer or JS rules
   are changed here.
   ========================================================================== */

.page-about .mission__tree-strip--top {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: clamp(150px, 9.4vw, 180px) !important;

  margin: 0 !important;
  overflow: hidden !important;

  /* Above the Mission background, below the road/decor/content layers. */
  z-index: 2 !important;

  pointer-events: none !important;
}

.page-about .mission__tree-strip--top img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center bottom !important;

  margin: 0 !important;
  transform: none !important;
}

/* Tablet */
@media (max-width: 980px) {
  .page-about .mission__tree-strip--top {
    height: clamp(88px, 11vw, 120px) !important;
  }
}

/* Mobile — match the supplied narrow About-page reference. */
@media (max-width: 760px) {
  .page-about .mission__tree-strip--top {
    height: clamp(58px, 16vw, 68px) !important;
  }
}


/* ==========================================================================
   ABOUT PAGE — TABLET UI FIX ONLY
   Scope: 761px–1024px
   Desktop >1024px stays unchanged.
   Mobile <=760px stays unchanged.
   ========================================================================== */

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

  .page-about {
    --tablet-header-h: 68px;
    overflow-x: clip;
  }

  .page-about .shell,
  .page-about .shell-wide {
    width: calc(100% - 56px);
    max-width: none;
    margin-inline: auto;
  }

  /* -----------------------------------------------------------------------
     TABLET HEADER
     ----------------------------------------------------------------------- */
  .page-about.menu-open {
    overflow: hidden;
  }

  .page-about .contact-header,
  .page-about .contact-header.is-stuck,
  .page-about.menu-open .contact-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 220;
    height: var(--tablet-header-h);
    color: #101820;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

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

  .page-about .contact-header__logo {
    position: relative;
    z-index: 222;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .page-about .contact-header__logo img,
  .page-about .contact-header.is-stuck .contact-header__logo img {
    width: auto;
    height: 25px;
    max-width: 150px;
    filter: none;
  }

  .page-about .contact-nav,
  .page-about .contact-icon-btn,
  .page-about .contact-login {
    display: none;
  }

  .page-about .contact-header__tools {
    margin-left: auto;
  }

  .page-about .contact-burger {
    position: relative;
    z-index: 222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 18px rgba(13, 59, 36, .08);
    cursor: pointer;
  }

  .page-about .contact-burger span {
    display: block;
    width: 23px;
    height: 2px;
    border-radius: 99px;
    background: #101820;
    transform-origin: center;
    transition: transform .25s ease, opacity .2s ease;
  }

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

  .page-about.menu-open .contact-burger span:nth-child(2) {
    opacity: 0;
  }

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

  .page-about .contact-drawer {
    position: fixed;
    top: var(--tablet-header-h);
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 215;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: min(420px, 100%);
    height: calc(100dvh - var(--tablet-header-h));
    padding: 28px 28px 30px;
    overflow-y: auto;
    color: #101820;
    background: #fff;
    box-shadow: -20px 0 48px rgba(10, 31, 23, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(24px, 0, 0);
    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .25s ease;
  }

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

  .page-about .contact-drawer nav {
    display: grid;
  }

  .page-about .contact-drawer nav a {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding-inline: 4px;
    border-bottom: 1px solid #ecefed;
    color: #15201b;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
  }

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

  .page-about .contact-drawer__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 28px;
  }

  .page-about .contact-drawer__actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid var(--contact-green);
    border-radius: 7px;
    color: var(--contact-green);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
  }

  /* -----------------------------------------------------------------------
     HERO
     ----------------------------------------------------------------------- */
  .page-about .ahero {
    --hero-cut: 46%;
    --hero-art-y: calc(var(--hero-progress, 0) * -18px);
    --hero-copy-y: calc(var(--hero-progress, 0) * 230px);
    min-height: clamp(650px, 74vw, 760px);
    height: clamp(650px, 74vw, 760px);
    max-height: none;
    padding: 0;
  }

  .page-about .ahero__banner,
  .page-about .ahero__foreground {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    transform: translate3d(0, var(--hero-art-y), 0) scale(1.015);
  }

  .page-about .ahero__content {
    top: 18%;
    width: 100%;
    padding-inline: 32px;
  }

  .page-about .ahero__content .h-hero {
    margin: 0;
    font-size: clamp(3.35rem, 7vw, 4.6rem);
    line-height: .98;
  }

  .page-about .ahero__content p {
    max-width: 620px;
    margin-top: 14px;
    font-size: clamp(.9rem, 1.7vw, 1rem);
    line-height: 1.5;
  }

  /* -----------------------------------------------------------------------
     ABOUT LOWASTE
     ----------------------------------------------------------------------- */
  .page-about .aintro {
    min-height: clamp(610px, 70vw, 720px);
    height: auto;
    padding: clamp(76px, 8vw, 92px) 0 clamp(64px, 7vw, 82px);
    background-position: center top;
    background-size: cover;
  }

  .page-about .aintro__grid {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    gap: clamp(30px, 4.5vw, 52px);
    align-items: center;
  }

  .page-about .aintro__copy {
    width: 100%;
    max-width: 440px;
    margin: 0;
    padding: 0;
    translate: none;
  }

  .page-about .aintro__copy .h-sect {
    margin-bottom: 15px;
    font-size: clamp(1.9rem, 3.5vw, 2.35rem);
  }

  .page-about .aintro__copy p {
    max-width: 46ch;
    font-size: clamp(.82rem, 1.45vw, .92rem);
    line-height: 1.65;
  }

  .page-about .aintro__copy .btn {
    margin-top: 22px;
  }

  .page-about .aintro__scene {
    min-height: clamp(360px, 43vw, 450px);
    width: 100%;
    padding: 0;
    translate: none;
  }

  .page-about .aintro__scene .warehouse {
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .page-about .aintro__scene .truck {
    left: -2%;
    bottom: 1%;
    width: clamp(150px, 20vw, 205px);
  }

  .page-about .aintro__scene .forklift {
    right: 0;
    bottom: 8%;
    width: clamp(112px, 14vw, 145px);
  }

  .page-about .aintro__scene .pallet {
    right: 20%;
    bottom: 25%;
    width: clamp(60px, 7.5vw, 78px);
  }

  /* -----------------------------------------------------------------------
     MISSION & VISION
     Tablet gets a full illustration stage first, then readable copy below.
     ----------------------------------------------------------------------- */
  .page-about .mission {
    --mission-road-right: clamp(18px, 4vw, 38px);
    --mission-road-width: clamp(142px, 18vw, 188px);
    min-height: auto;
    padding: clamp(520px, 66vw, 650px) 0 clamp(78px, 8vw, 96px);
    overflow: hidden;
    background-position: 50% top;
    background-size: auto clamp(500px, 64vw, 630px);
  }

  .page-about .mission__tree-strip--top {
    position: absolute !important;
    top: clamp(34px, 5vw, 52px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: clamp(94px, 11vw, 118px) !important;
    overflow: hidden !important;
    z-index: 7 !important;
  }

  .page-about .mission__tree-strip--top img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
  }

  .page-about .mission__tree-strip--bottom {
    right: var(--mission-road-right);
    bottom: auto;
    top: clamp(425px, 52vw, 515px);
    width: clamp(210px, 30vw, 300px);
    height: clamp(62px, 8vw, 82px);
    z-index: 7;
  }

  .page-about .mission__road {
    position: absolute;
    top: 0;
    right: var(--mission-road-right);
    bottom: auto;
    width: var(--mission-road-width);
    height: clamp(485px, 61vw, 600px);
    overflow: visible;
    z-index: 8 !important;
    background: none !important;
  }

  .page-about .mission__welcome {
    top: 0;
    left: 50%;
    width: 110%;
    transform: translateX(-50%);
    z-index: 10 !important;
  }

  .page-about .mission__road .truck {
    left: 50%;
    width: 43%;
    max-width: 72px;
    translate: -50% 0;
    z-index: 9 !important;
  }

  .page-about .mission__road .truck-1 {
    top: calc(10% + (var(--sp, 0) * 32%));
  }

  .page-about .mission__road .truck-2 {
    top: calc(75% - (var(--sp, 0) * 27%));
  }

  .page-about .mission .picnic {
    top: 17%;
    left: 19%;
    right: auto;
    width: clamp(72px, 9vw, 92px);
  }

  .page-about .mission .play {
    top: 15%;
    right: 31%;
    width: clamp(70px, 9vw, 90px);
  }

  .page-about .mission .mission-bin {
    right: calc(var(--mission-road-right) + var(--mission-road-width) + 10px);
    width: clamp(22px, 2.7vw, 29px);
  }

  .page-about .mission .bin-1 {
    top: 28%;
  }

  .page-about .mission .bin-2 {
    top: 41%;
  }

  .page-about .mission .bin-3 {
    top: 54%;
  }

  .page-about .mission .bin-4 {
    top: 67%;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: calc(100% - 64px);
    max-width: 860px;
    margin-inline: auto;
    padding: 0;
  }

  .page-about .mission__inner .h-sect {
    max-width: none;
    margin: 0 0 32px;
    font-size: clamp(1.95rem, 3.6vw, 2.4rem);
    line-height: 1.08;
  }

  .page-about .mission .pillars,
  .page-about .mission .pillar {
    max-width: 690px;
  }

  .page-about .mission .pillar+.pillar {
    margin-top: 28px;
  }

  .page-about .mission .pillar h3 {
    margin-bottom: 8px;
    font-size: clamp(.96rem, 1.8vw, 1.08rem);
  }

  .page-about .mission .pillar p {
    width: auto;
    max-width: 50ch;
    font-size: clamp(.78rem, 1.35vw, .88rem);
    line-height: 1.62;
  }

  /* -----------------------------------------------------------------------
     SUSTAINABILITY
     ----------------------------------------------------------------------- */
  .page-about .commit {
    min-height: auto;
    padding: clamp(76px, 8vw, 94px) 0 clamp(78px, 8vw, 96px);
  }

  .page-about .commit__top {
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
    gap: clamp(34px, 4vw, 54px);
    align-items: start;
    margin-bottom: 36px;
  }

  .page-about .commit__top .h-sect {
    max-width: 330px;
    margin: 0;
    font-size: clamp(1.9rem, 3.5vw, 2.35rem);
    line-height: 1.08;
  }

  .page-about .commit__top p {
    max-width: none;
    margin: 0;
    font-size: clamp(.8rem, 1.4vw, .9rem);
    line-height: 1.62;
  }

  .page-about .rail-wrap {
    width: calc(100% - 56px);
    margin-inline: auto;
    padding: 0;
  }

  .page-about .rail {
    width: 100%;
    margin: 0;
    padding: 0 0 14px;
    gap: 14px;
    overflow-x: auto;
  }

  .page-about .commit-card {
    flex: 0 0 clamp(250px, 31vw, 300px);
    min-height: 278px;
    padding: 16px 16px 20px;
  }

  .page-about .commit-card__icon {
    width: 100%;
    height: 58px;
    margin-bottom: 14px;
  }

  .page-about .commit-card h3 {
    min-height: 2.5em;
    font-size: .8rem;
  }

  .page-about .commit-card p {
    font-size: .7rem;
    line-height: 1.53;
  }

  .page-about .rail-ctrl {
    display: flex;
    margin-top: 8px;
    display: none;
  }

  /* -----------------------------------------------------------------------
     TEAM
     ----------------------------------------------------------------------- */
  .page-about .team {
    min-height: auto;
    height: auto;
    padding: 70px 0 78px;
  }

  .page-about .team .sect-head .h-sect {
    font-size: clamp(1.9rem, 3.5vw, 2.3rem);
  }

  .page-about .team .sect-head p {
    margin-top: 9px;
    font-size: .8rem;
  }

  .page-about .team__grid {
    width: calc(100% - 56px);
    max-width: 820px;
    margin: 42px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 54px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .page-about .member {
    width: auto;
    min-width: 0;
    padding: 0;
    text-align: center;
  }

  .page-about .member img {
    width: clamp(128px, 17vw, 158px);
    height: clamp(128px, 17vw, 158px);
    margin-bottom: 15px;
  }

  .page-about .member h3 {
    font-size: .86rem;
  }

  .page-about .member span {
    font-size: .73rem;
  }

  .page-about .team-dots {
    display: none;
  }

  /* -----------------------------------------------------------------------
     CERTIFICATIONS
     ----------------------------------------------------------------------- */
  .page-about .certs {
    min-height: auto;
    height: auto;
    padding: 76px 0 88px;
  }

  .page-about .certs>.shell {
    width: calc(100% - 56px);
    max-width: 920px;
  }

  .page-about .certs .h-sect {
    margin: 0 0 34px;
    font-size: clamp(1.9rem, 3.5vw, 2.35rem);
    line-height: 1.08;
  }

  .page-about .certs__grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(34px, 4.5vw, 56px);
    align-items: center;
  }

  .page-about .badges {
    display: grid;
    justify-items: start;
    gap: 9px;
    margin-bottom: 22px;
  }

  .page-about .badge {
    width: auto;
    min-height: 34px;
    padding: 7px 11px;
    white-space: normal;
    font-size: .68rem;
  }

  .page-about .cert-frame {
    width: 100%;
    min-height: 230px;
    padding: 20px;
  }

  .page-about .cert-frame img {
    display: block;
    width: min(215px, 72%);
    max-height: 185px;
    margin-inline: auto;
    object-fit: contain;
  }

  .page-about .certs__copy {
    padding-top: 0;
  }

  .page-about .certs__copy p {
    font-size: clamp(.76rem, 1.35vw, .86rem);
    line-height: 1.68;
  }

  .page-about .certs__copy p+p {
    margin-top: 18px;
  }

  .page-about .certs .flowers {
    right: -4px;
    bottom: -4px;
    width: 112px;
  }

  /* -----------------------------------------------------------------------
     CTA
     ----------------------------------------------------------------------- */
  .page-about .cta-band {
    min-height: auto;
    padding: 54px 28px 66px;
  }

  .page-about .cta-band .shell-wide {
    width: 100%;
    max-width: 940px;
    margin-inline: auto;
  }

  .page-about .cta {
    min-height: clamp(300px, 38vw, 360px);
    height: clamp(300px, 38vw, 360px);
    border-radius: 12px;
  }

  .page-about .cta>div {
    width: 100%;
    align-self: center;
    padding: 32px 28px;
  }

  .page-about .cta h2 {
    font-size: clamp(1.55rem, 3.5vw, 2rem);
  }

  .page-about .cta p {
    max-width: 520px;
    margin-top: 12px;
    font-size: clamp(.8rem, 1.4vw, .9rem);
  }

  /* -----------------------------------------------------------------------
     FOOTER
     ----------------------------------------------------------------------- */
  .page-about .contact-footer {
    padding-top: 68px;
  }

  .page-about .contact-footer__inner {
    width: calc(100% - 56px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 46px;
    padding-bottom: 68px;
  }

  .page-about .contact-footer__brand {
    grid-column: 1 / -1;
    max-width: 620px;
  }

  .page-about .contact-footer__brand img {
    height: 42px;
  }

  .page-about .contact-footer__brand p {
    font-size: .84rem;
    line-height: 1.5;
  }

  .page-about .contact-footer__nav {
    min-width: 0;
    gap: 17px;
  }

  .page-about .contact-footer__nav a {
    max-width: 100%;
    font-size: .82rem;
    overflow-wrap: anywhere;
  }

  .page-about .contact-footer__contact {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 40px;
  }

  .page-about .contact-footer__bar>div {
    width: calc(100% - 56px);
    min-height: 58px;
    gap: 20px;
  }

  .page-about .contact-footer__bar p,
  .page-about .contact-footer__bar a {
    font-size: .73rem;
  }

  .page-about .contact-footer__bar ul {
    gap: 18px;
  }
}

/* Portrait-tablet refinement */
@media (min-width: 761px) and (max-width: 860px) {

  .page-about .shell,
  .page-about .shell-wide {
    width: calc(100% - 44px);
  }

  .page-about .ahero {
    min-height: 650px;
    height: 650px;
  }

  .page-about .ahero__content {
    top: 17%;
  }

  .page-about .aintro {
    padding-top: 68px;
    padding-bottom: 64px;
  }

  .page-about .aintro__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 26px;
  }

  .page-about .aintro__scene {
    min-height: 350px;
  }

  .page-about .mission {
    padding-top: 535px;
    background-size: auto 520px;
  }

  .page-about .mission__road {
    height: 505px;
  }

  .page-about .mission__tree-strip--bottom {
    top: 425px;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell,
  .page-about .certs>.shell,
  .page-about .team__grid,
  .page-about .contact-footer__inner,
  .page-about .contact-footer__bar>div {
    width: calc(100% - 44px);
  }

  .page-about .commit__top {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .page-about .commit__top .h-sect {
    max-width: 350px;
  }

  .page-about .certs__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .page-about .cert-frame {
    max-width: 460px;
  }
}

/* ==========================================================================
   ABOUT PAGE NAV — FINAL MOBILE + TABLET FIX
   Navigation only. All About-page sections remain unchanged.
   ========================================================================== */

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

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

  .page-about .contact-header,
  .page-about .contact-header.is-stuck,
  .page-about.menu-open .contact-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 300;
    width: 100%;
    height: 68px;
    color: #101820;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

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

  .page-about .contact-header__logo {
    position: relative;
    z-index: 302;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: fit-content;
    opacity: 1;
    pointer-events: auto;
  }

  .page-about .contact-header__logo img,
  .page-about .contact-header.is-stuck .contact-header__logo img,
  .page-about.menu-open .contact-header__logo img {
    display: block;
    width: auto;
    height: 22px;
    max-width: none;
    filter: none;
  }

  .page-about .contact-nav,
  .page-about .contact-icon-btn,
  .page-about .contact-login {
    display: none;
  }

  .page-about .contact-header__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  .page-about .contact-burger {
    position: relative;
    z-index: 302;
    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;
    box-shadow: none;
    cursor: pointer;
  }

  .page-about .contact-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-about.menu-open .contact-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .page-about.menu-open .contact-burger span:nth-child(2) {
    opacity: 0;
  }

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

  .page-about .contact-drawer {
    position: fixed;
    inset: 68px 0 0;
    z-index: 290;
    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;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -12px, 0);
    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .25s ease;
  }

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

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

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

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

  /* Login directly below Contact link */
  .page-about .contact-drawer__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
    padding-top: 0;
  }

  .page-about .contact-drawer__actions a,
  .page-about .contact-drawer__actions a:first-child {
    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(--contact-green);
    text-decoration: none;
    font-family: "DM Sans", sans-serif;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
  }

  .page-about .contact-drawer__actions a:hover {
    color: #fff;
    background: var(--contact-green-dark);
  }

  /* Account only for the fixed navigation height */
  .page-about .ahero {
    /* margin-top: 68px; */
  }
}


/* --------------------------------------------------------------------------
   TABLET 761px - 1024px
   Same full-width navigation pattern as mobile.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1024px) {

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

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

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

  .page-about .contact-header__logo {
    position: relative;
    z-index: 302;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: fit-content;
    opacity: 1;
    pointer-events: auto;
  }

  .page-about .contact-header__logo img,
  .page-about .contact-header.is-stuck .contact-header__logo img,
  .page-about.menu-open .contact-header__logo img {
    display: block;
    width: auto;
    height: 24px;
    max-width: none;
    filter: none;
  }

  .page-about .contact-nav,
  .page-about .contact-icon-btn,
  .page-about .contact-login {
    display: none;
  }

  .page-about .contact-header__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  .page-about .contact-burger {
    position: relative;
    z-index: 302;
    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;
    box-shadow: none;
    cursor: pointer;
  }

  .page-about .contact-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-about.menu-open .contact-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .page-about.menu-open .contact-burger span:nth-child(2) {
    opacity: 0;
  }

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

  /* Replace the old 420px side drawer with the same full-width menu */
  .page-about .contact-drawer {
    position: fixed;
    inset: 68px 0 0;
    z-index: 290;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    height: calc(100dvh - 68px);
    padding: 28px 32px 32px;
    overflow-y: auto;
    color: #101820;
    background: #fff;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -12px, 0);
    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .25s ease;
  }

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

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

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

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

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

  .page-about .contact-drawer__actions a,
  .page-about .contact-drawer__actions a:first-child {
    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(--contact-green);
    text-decoration: none;
    font-family: "DM Sans", sans-serif;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
  }

  .page-about .contact-drawer__actions a:hover {
    color: #fff;
    background: var(--contact-green-dark);
  }

  /* Account only for the fixed navigation height */
  .page-about .ahero {
    margin-top: 68px;
  }
}

/* ==========================================================================
   ABOUT PAGE — MISSION / FOREST / WELCOME / FENCE REFERENCE FIX
   Final scoped override.
   Does not modify header, intro, commitment cards, team, certifications,
   CTA or footer.
   ========================================================================== */

/* ----------------------------- DESKTOP ---------------------------------- */
.page-about .mission {
  --mission-road-right: clamp(34px, 8.2vw, 150px);
  --mission-road-width: clamp(132px, 13.8vw, 238px);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Keep the supplied scene artwork proportional. */
  background-image: url("../img/about-us-mission-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* background-color: #75b447; */
}

/* Use the supplied fence.png asset at the bottom of Mission.
   This intentionally re-enables ::after, which older blocks disabled. */
.page-about .mission::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  right: 0;
  top: 86%;
  left: 0;
  z-index: 26;
  width: 72%;
  height: min(16vw, 192px);
  background-image: url(../img/fence.png);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 100%;
  pointer-events: none;
}

/* Forest transition: it must sit in front of the road artwork/trucks,
   while the welcome gate remains visible above the trees. */
.page-about .mission__tree-strip {
  position: absolute !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: none !important;
  translate: none !important;
}

.page-about .mission__tree-strip--top {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 20 !important;

  width: 100% !important;
  height: clamp(128px, 9.2vw, 176px) !important;
  margin: 0 !important;
}

.page-about .mission__tree-strip--top img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  object-fit: cover !important;
  object-position: center bottom !important;

  transform: none !important;
  translate: none !important;
}

/* Road-exit trees stay local to the right side, like the reference. */
.page-about .mission__tree-strip--bottom {
  right: -10px;
  bottom: -54px !important;
  left: auto !important;
  z-index: 20 !important;
  width: 34%;
  height: clamp(93px, 13.5vw, 154px) !important;
}

.page-about .mission__tree-strip--bottom img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: right bottom !important;

  transform: none !important;
  translate: none !important;
}

/* IMPORTANT:
   The old positioning for .mission__road is commented out in the source.
   Re-establish it so welcome-gate.png and the trucks use the ROAD as their
   containing block rather than the whole Mission section. */
.page-about .mission__road {
  position: absolute !important;
  top: 0 !important;
  right: var(--mission-road-right) !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 10 !important;

  width: var(--mission-road-width) !important;
  height: 100% !important;

  overflow: visible !important;
  background: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* Welcome gate sits on the road mouth, above the forest transition. */
.page-about .mission__welcome {
  position: absolute !important;
  top: clamp(-112px, 529.118px, -109px) !important;
  left: 22% !important;
  z-index: 22 !important;
  width: 114% !important;

  max-width: none !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  translate: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* Trucks stay centred on the baked road. */
.page-about .mission__road .truck {
  position: absolute !important;
  left: 38% !important;
  z-index: 12 !important;
  width: 69% !important;
  max-width: 128px !important;

  height: auto !important;

  translate: -50% 0 !important;
  transform: none !important;
}

.page-about .mission__road .truck-1 {
  top: calc(15% + (var(--sp, 0) * 20%)) !important;
}

.page-about .mission__road .truck-2 {
  top: calc(65% - (var(--sp, 0) * 20%)) !important;
}

/* Keep the text above the grass/background but below foreground tree/gate art. */
.page-about .mission__inner,
.page-about .mission__inner.shell {
  position: relative;
  z-index: 15;
}


/* ----------------------------- TABLET ----------------------------------- */
@media (min-width: 761px) and (max-width: 1024px) {

  .page-about .mission {
    --mission-road-right: clamp(18px, 4vw, 38px);
    --mission-road-width: clamp(142px, 18vw, 188px);

    min-height: auto;
    padding: clamp(500px, 64vw, 625px) 0 clamp(112px, 11vw, 138px);

    background-position: 50% top;
    background-size: auto clamp(500px, 64vw, 630px);
  }

  .page-about .mission::after {
    height: clamp(90px, 12vw, 122px);
    width: 100%;
  }

  .page-about .mission__tree-strip--top {
    top: 0 !important;
    height: clamp(92px, 11vw, 116px) !important;
    z-index: 20 !important;
  }

  .page-about .mission__road {
    top: 0 !important;
    right: var(--mission-road-right) !important;
    bottom: auto !important;

    width: var(--mission-road-width) !important;
    height: clamp(485px, 61vw, 600px) !important;
  }

  .page-about .mission__welcome {

    top: -73px !important;
    width: 116% !important;
    z-index: 6 !important;
    overflow: visible;
  }

  .page-about .mission__road .truck {
    width: 42% !important;
    max-width: 72px !important;
  }

  .page-about .mission__tree-strip--bottom {
    right: max(0px, calc(var(--mission-road-right) - 31px)) !important;
    bottom: 10px !important;
    width: clamp(200px, 30vw, 292px) !important;
    /* height: clamp(64px, 8vw, 82px) !important; */
    top: 60%;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: calc(100% - 64px);
    max-width: 860px;
    margin-inline: auto;
    padding: 0;
  }
}


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

  .page-about .mission {
    --mission-road-right: 0px;
    --mission-road-width: clamp(86px, 24vw, 108px);
    min-height: auto;
    background-position: 49% top;

  }

  /* The supplied fence asset is proportionally taller on the mobile frame. */
  .page-about .mission::after {
    height: clamp(86px, 25.2vw, 100px);
    background-position: left center;
    background-size: auto 100%;
  }

  /* Strong, clean forest transition at the start of Mission. */
  .page-about .mission__tree-strip--top {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: clamp(58px, 16vw, 68px) !important;

    z-index: 20 !important;
  }

  .page-about .mission__tree-strip--top img {
    object-fit: cover !important;
    object-position: center bottom !important;
  }

  /* Positioning container follows the visible road on the right. */
  .page-about .mission__road {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: var(--mission-road-width) !important;
    height: clamp(300px, 86vw, 360px) !important;

    z-index: 10 !important;
  }

  .page-about .mission__welcome {
    top: -41px !important;
    left: 15% !important;

    width: 118% !important;

    z-index: 22 !important;
    transform: translateX(-50%) !important;
  }

  .page-about .mission__road .truck {
    left: 26% !important;
    width: 42% !important;
    max-width: 46px !important;
    translate: -50% 0 !important;
  }

  .page-about .mission__road .truck-1 {
    top: calc(18% + (var(--sp, 0) * 16%)) !important;
  }

  .page-about .mission__road .truck-2 {
    top: calc(74% - (var(--sp, 0) * 13%)) !important;
  }

  /* Trees wrap the road exit and sit over the fence where they meet. */
  .page-about .mission__tree-strip--bottom {
    right: 0 !important;
    bottom: -25px !important;
    left: auto !important;
    width: clamp(138px, 21vw, 176px) !important;
    height: clamp(48px, 13vw, 58px) !important;
    z-index: 21 !important;
  }

  /* Keep Mission text in the free space left of the road, matching the
     supplied narrow reference instead of allowing it underneath the road. */
  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;

    padding: 0 calc(var(--mission-road-width) + 10px) 0 0;
  }

  .page-about .mission__inner .h-sect {
    max-width: none;
    margin: 0 0 24px;

    font-size: clamp(20px, 5.7vw, 23px);
    line-height: 1.08;
  }

  .page-about .mission .pillars,
  .page-about .mission .pillar {
    width: 100%;
    max-width: none;
  }

  .page-about .mission .pillar+.pillar {
    margin-top: 22px;
  }

  .page-about .mission .pillar h3 {
    margin-bottom: 7px;
    font-size: clamp(.9rem, 4vw, 1rem);
    line-height: 1.3;
  }

  .page-about .mission .pillar p {
    width: auto;
    max-width: none;
    margin: 0;

    font-size: clamp(10.5px, 3vw, 12px);
    line-height: 1.6;
  }

  /* Keep decorations inside the illustrated upper stage. */
  .page-about .mission .picnic {
    top: 29% !important;
    left: 39%;
    right: auto !important;
    width: clamp(54px, 15vw, 68px);
  }

  .page-about .mission .play {
    top: 31%;
    right: calc(var(--mission-road-width) + 58px);
    left: 1px !important;
    width: 140px;
  }

  .page-about .mission .mission-bin {
    right: calc(var(--mission-road-width) + 7px);
    width: clamp(17px, 4.8vw, 22px);
  }

  .page-about .mission .bin-1 {
    top: 27%;
  }

  .page-about .mission .bin-2 {
    top: 39%;
  }

  .page-about .mission .bin-3 {
    top: 51%;
  }

  .page-about .mission .bin-4 {
    top: 63%;
  }
}

/* ==========================================================================
   ABOUT PAGE — REQUESTED VISUAL FIXES ONLY
   13 AUG 2026

   Scope:
   1. Hero forest.png visibility
   2. Mission top forest positioning / z-index / no crop
   3. grand-couples.png under the left tree
   4. ONE fence at the BOTTOM of Sustainability Commitment using fence.png
   5. Certifications image presented as the requested carousel-style panel

   No header/nav/team/CTA/footer/copy changes.
   ========================================================================== */


/* ==========================================================================
   1. HERO — EXISTING forest.png
   ========================================================================== */

.page-about .ahero__forest {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 4;

  width: 100%;
  height: auto;

  overflow: visible;
  pointer-events: none;
}

.page-about .ahero__forest img {
  display: block;

  width: 100%;
  height: auto;
  max-width: none;

  margin: 0;

  object-fit: contain;
  object-position: center bottom;

  transform: none;
  translate: none;
}


/* ==========================================================================
   2. MISSION — TOP FOREST
   ========================================================================== */

/*
  The existing CSS repeatedly forces this wrapper to a short fixed height with
  overflow:hidden and the image to object-fit:cover. That is what cuts the tree
  crowns. Keep the layer at the section top, raise it in the scene, and allow
  the complete forest artwork to render.
*/
.page-about .mission__tree-strip--top {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  left: 0 !important;

  z-index: 20 !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  pointer-events: none !important;

  transform: none !important;
  translate: none !important;
}

.page-about .mission__tree-strip--top img {
  position: relative !important;
  z-index: 1 !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center top !important;

  transform: none !important;
  translate: none !important;
}

/* Preserve the Mission stacking order around the fixed forest. */
.page-about .mission__road {
  z-index: 24 !important;
}

.page-about .mission__welcome {
  z-index: 27 !important;
}

.page-about .mission__road .truck {
  z-index: 26 !important;
}

.page-about .mission__deco {
  z-index: 23 !important;
}

.page-about .mission__inner {
  z-index: 25 !important;
}


/* ==========================================================================
   3. MISSION — GRANDPARENTS BELOW THE LEFT TREE
   ========================================================================== */

.page-about .mission .grand-couples {
  position: absolute;
  top: 35%;
  left: 11%;
  z-index: 10;
  width: clamp(72px, 13vw, 132px);
  height: auto;
  pointer-events: none;
  transform: none !important;
  translate: none !important;
}


/* ==========================================================================
   4. SUSTAINABILITY COMMITMENT — ONE BOTTOM PNG FENCE ONLY
   ========================================================================== */

/* Remove the old/top generated fence so only the requested bottom fence stays. */
.page-about .commit::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/*
  Replace the old CSS-line bottom fence with the supplied transparent PNG.
  about.css is inside assets/css, therefore ../img/fence.png resolves to
  assets/img/fence.png.
*/
.page-about .commit::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: -61px !important;
  left: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: clamp(110px, 13vw, 192px) !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-image: url(../img/fence.png) !important;
  background-repeat: repeat-x !important;
  background-position: left center !important;
  background-size: auto 100% !important;
  opacity: 1 !important;
}

.page-about .commit>.shell,
.page-about .commit__top,
.page-about .rail-wrap {
  position: relative;
  z-index: 5;
}


/* ==========================================================================
   5. CERTIFICATIONS — CAROUSEL-STYLE IMAGE PRESENTATION
   ========================================================================== */

.page-about .certs__grid {
  align-items: start;
}

/* Left carousel column */
.page-about .certs__grid>div:first-child {
  width: 100%;
  min-width: 0;
}

/* Match the large dark carousel image panel from the supplied reference. */
.page-about .cert-frame {
  position: relative;

  display: grid;
  place-items: center;

  width: 100%;
  max-width: 680px;
  min-height: 0;
  aspect-ratio: 680 / 320;

  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 14px;

  /* background: #24383b; */
  box-shadow: none;
}

.page-about .cert-frame img[data-slide] {
  display: block;

  /* width: min(48%, 330px); */
  height: auto;
  /* max-height: 82%; */

  margin: 0 auto;

  object-fit: contain;
  object-position: center;

  border: 0;
  border-radius: 12px;
}

/* Carousel dots visible neatly below the certificate panel. */
.page-about .cert-dots {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 9px;

  width: 100%;
  max-width: 680px;

  margin-top: 44px;
  padding: 0;
}

.page-about .cert-dots button,
.page-about .cert-dots button[aria-disabled="true"] {
  display: block;

  width: 12px;
  height: 12px;
  min-width: 12px;

  padding: 0;

  border: 0;
  border-radius: 999px;

  background: #b7e2cd;

  opacity: 1;
}

.page-about .cert-dots button[aria-selected="true"] {
  width: 12px;
  background: #0c7052;
}


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

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

  .page-about .ahero__forest {
    bottom: 0;
    z-index: 4;
  }

  .page-about .mission__tree-strip--top {
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 20 !important;
  }

  .page-about .mission__tree-strip--top img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .page-about .mission .grand-couples {
    top: 24%;
    left: 10%;
    width: clamp(68px, 10vw, 105px);
  }

  .page-about .commit::after {
    bottom: -28px !important;
    height: clamp(96px, 15vw, 150px) !important;
  }

  .page-about .cert-frame {
    max-width: 620px;
    aspect-ratio: 680 / 320;
  }



  .page-about .cert-dots {
    max-width: 620px;
    margin-top: 28px;
  }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 760px) {

  .page-about .ahero__forest {
    bottom: 0;
    z-index: 4;
    width: 100%;
  }

  .page-about .ahero__forest {
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    bottom: clamp(-28px, -4.6vw, -137px) !important;
    z-index: 999 !important;
    width: 126% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
    translate: none !important;
  }

  .page-about .ahero__forest img {
    width: 100%;
    height: auto;
  }

  .page-about .mission__tree-strip--top {
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    z-index: 20 !important;
  }

  .page-about .mission__tree-strip--top img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  .page-about .mission .grand-couples {
    top: 24%;
    left: 9%;

    width: clamp(58px, 19vw, 82px);
  }

  .page-about .commit::after {
    bottom: -38px !important;
    height: 200px;
  }

  .page-about .cert-frame {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 680 / 320;

    padding: 0;
    border-radius: 9px;
  }


  .page-about .cert-dots {
    justify-content: flex-start;
    max-width: 100%;
    margin-top: 18px;
  }

  .page-about .cert-dots button,
  .page-about .cert-dots button[aria-disabled="true"],
  .page-about .cert-dots button[aria-selected="true"] {
    width: 9px;
    min-width: 9px;
    height: 9px;
  }
}

/* ==========================================================================
   ABOUT — FOREST OVERLAP FIX ONLY
   Changes ONLY:
   - .ahero / .ahero__forest
   - .mission / .mission__tree-strip--top

   Purpose:
   Allow forest.png to extend across the section boundary instead of being
   cropped by overflow:hidden / contain:paint.
   ========================================================================== */


/* --------------------------------------------------------------------------
   HERO FOREST
   -------------------------------------------------------------------------- */

.page-about .ahero {
  /*
    These two existing properties were clipping ahero__forest at the exact
    Hero boundary.
  */
  overflow: visible !important;
  contain: none !important;

  /*
    Keep the Hero stacking context above the following section only where
    a child actually overlaps it.
  */
  z-index: 4;
}

.page-about .ahero__forest {
  position: absolute !important;
  right: 0 !important;
  left: 0px !important;
  bottom: clamp(-99px, -1.6vw, -133px) !important;
  z-index: 999 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  translate: none !important;
}

@media (max-width: 767px) {
  .page-about .ahero__forest {
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    bottom: clamp(-30px, -4.6vw, -137px) !important;
    z-index: 999 !important;
    width: 800px !important;
    height: 94px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
    translate: none !important;
  }

  .aintro__copy {
    position: relative;
    left: 0% !important;
    top: 20px;
  }
}

.page-about .ahero__forest img {
  display: block !important;

  width: 100% !important;
  height: auto !important;
  max-width: none !important;

  margin: 0 !important;

  object-fit: contain !important;
  object-position: center bottom !important;

  transform: none !important;
  translate: none !important;
}


/* --------------------------------------------------------------------------
   MISSION TOP FOREST
   -------------------------------------------------------------------------- */

.page-about .mission {
  /*
    mission__tree-strip--top is intentionally pulled above the Mission section.
    It cannot do that while the Mission section clips its children.
  */
  overflow: visible !important;
  contain: none !important;
}

.page-about .mission__tree-strip--top {
  position: absolute !important;

  /*
    Pull forest.png over the About Lowaste -> Mission boundary.
  */
  top: clamp(-88px, -4.6vw, -42px) !important;

  right: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  pointer-events: none !important;

  /*
    Above the Mission ground/decor, while the existing road/gate rules can
    remain above it where required.
  */
  z-index: 20 !important;

  transform: none !important;
  translate: none !important;
}

.page-about .mission__tree-strip--top img {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center top !important;

  transform: none !important;
  translate: none !important;
}

/* ==========================================================================
   MISSION TOP FOREST — PDF MATCH
   ONLY the two top transition rows are changed.
   Reference: About Us PDF.
   ========================================================================== */

.page-about .mission {
  /*
    Row 1 lives partly above the Mission section.
    Without this, the parent clips that row.
  */
  overflow: visible !important;
  contain: none !important;

  /*
    The PDF uses two DIFFERENT forest heights:
    row 1 = smaller / farther forest
    row 2 = larger / foreground forest
  */
  --mission-forest-row-1-h: clamp(78px, 7.2vw, 138px);
  --mission-forest-row-2-h: clamp(96px, 9vw, 172px);
}


/* --------------------------------------------------------------------------
   COMMON — TOP FOREST ROWS ONLY
   -------------------------------------------------------------------------- */

.page-about .mission__tree-strip--top-1,
.page-about .mission__tree-strip--top-2 {
  position: absolute !important;

  right: 0 !important;
  left: 0 !important;

  width: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  /*
    Keep each complete forest row visible.
  */
  overflow: hidden !important;

  pointer-events: none !important;

  /*
    Above Mission ground, without changing any other Mission layer.
  */
  z-index: 20 !important;

  transform: none !important;
  translate: none !important;
}


/* --------------------------------------------------------------------------
   ROW 1 — SMALLER FOREST, ABOVE THE MISSION BOUNDARY
   -------------------------------------------------------------------------- */

.page-about .mission__tree-strip--top-1 {
  /*
    PDF: first forest row belongs visually to the bottom of About Lowaste.
    Almost the whole row sits above the Mission start.
  */
  top: calc((var(--mission-forest-row-1-h) * -1) + 2px) !important;

  height: var(--mission-forest-row-1-h) !important;
}


/* --------------------------------------------------------------------------
   ROW 2 — LARGER FOREGROUND FOREST, INSIDE MISSION
   -------------------------------------------------------------------------- */

.page-about .mission__tree-strip--top-2 {
  /*
    PDF: second / larger forest begins exactly at Mission top.
  */
  top: 0 !important;

  height: var(--mission-forest-row-2-h) !important;
}


/* --------------------------------------------------------------------------
   IMAGE FIT
   Do not use object-fit: cover here — cover was clipping the tree crowns.
   The complete forest artwork is fitted into each intended band.
   -------------------------------------------------------------------------- */

.page-about .mission__tree-strip--top-1>img,
.page-about .mission__tree-strip--top-2>img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: fill !important;
  object-position: center center !important;

  transform: none !important;
  translate: none !important;
}


/* --------------------------------------------------------------------------
   TABLET — only scale these two forest rows
   -------------------------------------------------------------------------- */

@media (min-width: 761px) and (max-width: 1024px) {
  .page-about .mission {
    --mission-forest-row-1-h: clamp(68px, 9.2vw, 94px);
    --mission-forest-row-2-h: clamp(82px, 11.5vw, 118px);
  }
}


/* --------------------------------------------------------------------------
   MOBILE — only scale these two forest rows
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .page-about .mission {
    --mission-forest-row-1-h: clamp(48px, 14vw, 62px);
    --mission-forest-row-2-h: clamp(58px, 17vw, 76px);
  }

  .page-about .mission__tree-strip--top-1 {
    top: calc((var(--mission-forest-row-1-h) * -1) + 1px) !important;
  }
}

/* ==========================================================================
   MISSION FOREST TRANSITION — FINAL PDF MATCH
   ONLY this transition is affected.
   ========================================================================== */

/*
  The PDF uses two forest bands with NO green gap:
  - a smaller/farther band above the Mission boundary
  - a taller/denser band immediately below it
*/
.page-about .mission {
  overflow: visible !important;
  contain: none !important;

  --mission-forest-back-h: clamp(72px, 6.2vw, 120px);
  --mission-forest-front-h: clamp(94px, 8.2vw, 158px);
}


/* --------------------------------------------------------------------------
   ONE WRAPPER CONTROLS BOTH ROWS
   This is the key fix: the rows can no longer drift apart.
   -------------------------------------------------------------------------- */
.page-about .mission .mission__forest-transition {
  position: absolute !important;

  /*
    Put the smaller upper row entirely above Mission.
    Its bottom edge meets Mission y=0.
  */
  top: calc(var(--mission-forest-back-h) * -1) !important;
  right: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: calc(var(--mission-forest-back-h) + var(--mission-forest-front-h)) !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  pointer-events: none !important;

  z-index: 20 !important;

  transform: none !important;
  translate: none !important;
}


/* Neutralize all older top-strip positioning rules. */
.page-about .mission .mission__forest-transition>.mission__tree-strip--top {
  position: absolute !important;

  right: 0 !important;
  left: 0 !important;

  width: 74% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  pointer-events: none !important;

  transform: none !important;
  translate: none !important;

  z-index: 1 !important;
}


/* --------------------------------------------------------------------------
   UPPER / BACK FOREST
   -------------------------------------------------------------------------- */
.page-about .mission .mission__forest-transition>.mission__tree-strip--top-1 {
  top: -4px !important;

  /* height: var(--mission-forest-back-h) !important; */
}


/* --------------------------------------------------------------------------
   LOWER / FRONT FOREST
   Starts 1px before row 1 ends to guarantee there is never a green seam.
   -------------------------------------------------------------------------- */
.page-about .mission .mission__forest-transition>.mission__tree-strip--top-2 {
  top: calc(var(--mission-forest-back-h) - 1px) !important;

  height: calc(var(--mission-forest-front-h) + 1px) !important;
}


/* --------------------------------------------------------------------------
   SHOW THE COMPLETE FOREST ARTWORK
   -------------------------------------------------------------------------- */
.page-about .mission .mission__forest-transition>.mission__tree-strip--top>img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  /*
    Keep the full supplied band visible.
    No object-fit: cover, because cover crops the tree crowns.
  */
  object-fit: fill !important;
  object-position: center center !important;

  transform: none !important;
  translate: none !important;
}


/* Road and Welcome gate remain above the forest, as in the PDF. */
.page-about .mission__road {
  z-index: 30 !important;
}

.page-about .mission__welcome {
  z-index: 34 !important;
}

.page-about .mission__road .truck {
  z-index: 33 !important;
}


/* ==========================================================================
   TABLET — FOREST TRANSITION ONLY
   ========================================================================== */
@media (min-width: 761px) and (max-width: 1024px) {

  .page-about .mission {
    --mission-forest-back-h: clamp(62px, 8.4vw, 86px);
    --mission-forest-front-h: clamp(76px, 10.8vw, 110px);
  }
}


/* ==========================================================================
   MOBILE — FOREST TRANSITION ONLY
   ========================================================================== */
@media (max-width: 760px) {

  .page-about .mission {
    --mission-forest-back-h: clamp(44px, 12.5vw, 58px);
    --mission-forest-front-h: clamp(54px, 15.5vw, 70px);
  }
}


/* MISSION ONLY FIX — paste at the absolute end of assets/css/about.css */

/* DESKTOP/TABLET: forest on both sides of the Welcome gate */
@media (min-width: 761px) {
  .page-about .mission {
    --mission-forest-gap-left:
      calc(100% - var(--mission-road-right) - var(--mission-road-width) - 10px);
    --mission-forest-gap-right:
      calc(100% - var(--mission-road-right) + -95px);
  }

  .page-about .mission .mission__forest-transition>.mission__tree-strip--top-1 {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;

    -webkit-mask-image: linear-gradient(to right,
        #000 0,
        #000 var(--mission-forest-gap-left),
        transparent var(--mission-forest-gap-left),
        transparent var(--mission-forest-gap-right),
        #000 var(--mission-forest-gap-right),
        #000 100%) !important;

    mask-image: linear-gradient(to right,
        #000 0,
        #000 var(--mission-forest-gap-left),
        transparent var(--mission-forest-gap-left),
        transparent var(--mission-forest-gap-right),
        #000 var(--mission-forest-gap-right),
        #000 100%) !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
  }

  .page-about .mission .mission__forest-transition>.mission__tree-strip--top-1>img {
    display: block !important;
    width: 100% !important;
    height: 140% !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: center bottom !important;
  }

  .page-about .mission__road {
    z-index: 30 !important;
  }

  .page-about .mission__welcome {
    z-index: 34 !important;
  }

  .page-about .mission__road .truck {
    z-index: 33 !important;
  }
}

/* MOBILE: text safe area + fence below copy + Safari parallax fallback */
@media (max-width: 760px) {
  .page-about .mission {
    --mission-copy-safe-right: clamp(112px, 34vw, 138px);
    padding-bottom: clamp(66px, 18vw, 82px) !important;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 0 var(--mission-copy-safe-right) 0 0 !important;
  }

  .page-about .mission .pillars,
  .page-about .mission .pillar,
  .page-about .mission .pillar p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .page-about .mission .pillar p {
    margin-right: 0 !important;
    overflow-wrap: break-word !important;
  }

  .page-about .mission::after {
    content: "" !important;
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: clamp(36px, 10vw, 44px) !important;
    z-index: 18 !important;
    background-image: url("../img/fence.png") !important;
    background-repeat: repeat-x !important;
    background-position: left bottom !important;
    background-size: auto 100% !important;
    pointer-events: none !important;
  }

  .page-about .mission [data-par],
  .page-about .mission [data-par-x] {
    translate: none !important;
    transform: translate3d(var(--par-x, 0px),
        var(--par-y, 0px),
        0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
  }
}

@media (max-width: 390px) {
  .page-about .mission {
    --mission-copy-safe-right: clamp(108px, 35vw, 132px);
  }
}


/* ==========================================================================
   FINAL MOBILE MISSION MATCH
   Scope: Mission section ONLY, <= 760px.
   Keep this as the ABSOLUTE LAST Mission block in about.css.
   ========================================================================== */

@media (max-width: 760px) {

  .page-about .mission {
    /*
      Reference composition:
      - Welcome gate + road + roadside trees occupy the upper scene.
      - Road ends before the copy.
      - Mission copy uses the full grass width below.
    */
    --mission-mobile-scene-h: clamp(390px, 145vw, 402px);
    --mission-mobile-gap: clamp(30px, 8vw, 42px);

    /*
      Position the road away from the extreme right edge.
      This matches the mobile reference where a tree strip remains
      visible to the right of the road.
    */
    --mission-road-right: 23%;
    --mission-road-width: clamp(78px, 21vw, 94px);

    position: relative !important;
    min-height: 0 !important;

    /*
      RESET every older Mission background declaration.
      This prevents the road image from continuing beside the Mission text.
    */
    background: url(../img/about-us-mission-bg.png) center top / cover no-repeat;

    padding:
      calc(var(--mission-mobile-scene-h) + var(--mission-mobile-gap)) 0 72px !important;

    overflow: hidden !important;
    isolation: isolate !important;
    contain: none !important;
  }


  /* -----------------------------------------------------------------------
     UPPER MOBILE SCENE
     about-us-roadground.png exists ONLY in this fixed-height layer.
     ----------------------------------------------------------------------- */

  .page-about .mission::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: var(--mission-mobile-scene-h) !important;

    background-image: url("../img/mobile-mission-bg.png") !important;
    background-repeat: no-repeat !important;

    /*
      COVER is important here.
      The previous 100% 100% / auto-height solutions exposed the green
      side gutters seen in the broken screenshot.
    */
    background-size: cover !important;
    background-position: center top !important;

    z-index: 0 !important;
    pointer-events: none !important;
  }


  /* -----------------------------------------------------------------------
     TOP FOREST / WELCOME AREA
     ----------------------------------------------------------------------- */

  .page-about .mission .mission__forest-transition {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: auto !important;

    z-index: 20 !important;
    pointer-events: none !important;
  }


  /* -----------------------------------------------------------------------
     ROAD POSITIONING LAYER
     The visible road is baked into roadground.png.
     This box only positions the gate and trucks.
     ----------------------------------------------------------------------- */

  .page-about .mission__road {
    position: absolute !important;

    top: 0 !important;
    right: var(--mission-road-right) !important;
    bottom: auto !important;
    left: auto !important;

    width: var(--mission-road-width) !important;
    height: var(--mission-mobile-scene-h) !important;

    overflow: visible !important;

    z-index: 30 !important;
    pointer-events: none !important;
  }


  .page-about .mission__welcome {
    position: absolute !important;
    top: -112px !important;
    left: 30% !important;
    width: 240px !important;
    max-width: none !important;
    height: auto !important;
    z-index: 33 !important;
    transform: translateX(-50%) !important;
    translate: none !important;
  }


  .page-about .mission__road .truck {
    left: 123% !important;
    width: 65% !important;
    max-width: 44px !important;
    z-index: 33 !important;
    translate: -50% 0 !important;
  }


  /* -----------------------------------------------------------------------
     DECORATIONS
     Their % positions must be calculated against the scene height,
     not against the full Mission content height.
     ----------------------------------------------------------------------- */

  .page-about .mission__deco {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: var(--mission-mobile-scene-h) !important;

    overflow: hidden !important;

    z-index: 23 !important;
    pointer-events: none !important;
  }


  /* -----------------------------------------------------------------------
     ROAD EXIT FOREST
     Keep the supplied forest cluster, but make it a compact road-exit group
     instead of the large horizontal rectangle from the broken screenshot.
     ----------------------------------------------------------------------- */

  .page-about .mission__tree-strip--bottom {
    display: block !important;
    position: absolute !important;
    top: calc(var(--mission-mobile-scene-h) - 84px) !important;
    right: -2% !important;
    bottom: 24px !important;
    left: auto !important;
    width: 76% !important;
    height: clamp(62px, 43vw, 124px) !important;
    overflow: hidden !important;
    z-index: 32 !important;
    pointer-events: none !important;
  }

  .page-about .mission__tree-strip--bottom img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover !important;
    object-position: center bottom !important;
  }


  /* -----------------------------------------------------------------------
     MISSION COPY
     Full width, BELOW the complete illustrated scene.
     ----------------------------------------------------------------------- */

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    position: relative !important;
    z-index: 40 !important;

    box-sizing: border-box !important;

    width: calc(100% - 36px) !important;
    max-width: none !important;

    margin: 0 auto !important;

    /*
      Neutralise all historical mobile rules that reserved a road column:
      padding-right:35%, 108px, --mission-copy-safe-right, etc.
    */
    padding: 0 !important;
  }


  .page-about .mission__inner .h-sect {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 28px !important;

    font-size: clamp(1.62rem, 7vw, 1.82rem) !important;
    line-height: 1.08 !important;
  }


  .page-about .mission .pillars,
  .page-about .mission .pillar {
    width: 100% !important;
    max-width: none !important;
  }


  .page-about .mission .pillar+.pillar {
    margin-top: 28px !important;
  }


  .page-about .mission .pillar h3 {
    margin: 0 0 8px !important;

    font-size: .96rem !important;
    line-height: 1.3 !important;
  }


  .page-about .mission .pillar p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    font-size: .79rem !important;
    line-height: 1.58 !important;
  }


  /* -----------------------------------------------------------------------
     FENCE
     The Mission fence belongs below all three text blocks.
     ----------------------------------------------------------------------- */

  .page-about .mission::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    top: auto !important;
    right: 0 !important;
    bottom: -37px !important;
    left: 0 !important;
    width: 100% !important;
    height: 100px !important;

    z-index: 18 !important;

    background-image: url("../img/fence.png") !important;
    background-repeat: repeat-x !important;
    background-position: left bottom !important;
    background-size: auto 100% !important;

    pointer-events: none !important;
  }
}


/* iPhone 13 / 390px */
@media (max-width: 390px) {
  .page-about .mission {
    --mission-mobile-scene-h: 565px;
    --mission-mobile-gap: 34px;
    --mission-road-right: 22%;
    --mission-road-width: 82px;
  }

  .page-about .mission__inner,
  .page-about .mission__inner.shell {
    width: calc(100% - 34px) !important;
  }
}

/* =========================================================
   MISSION — COMPLETELY STATIC
   ========================================================= */

.page-about .mission *,
.page-about .mission *::before,
.page-about .mission *::after {
  animation: none !important;
  transition: none !important;
}


/* Stop scroll/parallax transforms */
.page-about .mission [data-par],
.page-about .mission [data-par-x] {
  transform: none !important;
  translate: none !important;
}


/* Mission trucks — fixed/static positions */
.page-about .mission__road .truck {
  will-change: auto !important;
}





/* Prevent reveal animation inside mission */
.page-about .mission [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
}


/* Decorative mission items */
.page-about .mission__deco>* {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}


/* Forest / trees / decorative layers */
.page-about .mission__forest-transition,
.page-about .mission__tree-strip,
.page-about .mission__road,
.page-about .mission .picnic,
.page-about .mission .play,
.page-about .mission .bin-1,
.page-about .mission .bin-2 {
  animation: none !important;
  transition: none !important;
}

.aintro__copy {
  position: relative;
  left: 267px;
  bottom: 117px;
}



/* =========================================================
   ABOUT PAGE — DISABLE ALL BELOW-HERO ANIMATIONS
   Hero remains animated
   ========================================================= */

.page-about main section:not(.ahero) [data-reveal],
.page-about main section:not(.ahero) [data-reveal="left"],
.page-about main section:not(.ahero) [data-reveal="right"],
.page-about main section:not(.ahero) [data-reveal="up"] {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  transition: none !important;
  animation: none !important;
}

/* Disable parallax transforms below hero */
.page-about main section:not(.ahero) [data-par],
.page-about main section:not(.ahero) [data-par-x] {
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
}

/* Stop scene-controlled decorative movement */
.page-about main section:not(.ahero) {
  --sp: 0 !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: clamp(28px, 2.7vw, 42px);

  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;
}

.lw-inner-cta__label--mobile {
  display: 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__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;
  }


  .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%;
  }

}







/* =========================================================
   ABOUT PAGE — STICKY DESKTOP HEADER
   ========================================================= */

@media (min-width: 981px) {

  .page-about .contact-header {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    width: 100%;

    transition:
      background-color .25s ease,
      box-shadow .25s ease,
      backdrop-filter .25s ease;
  }


  /* after scrolling */
  .page-about .contact-header.is-stuck {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

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

    color: #16251b;

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }


  /* nav becomes dark on white sticky header */
  .page-about .contact-header.is-stuck .contact-nav a {
    color: #16251b;
  }


  /* notification icon */
  .page-about .contact-header.is-stuck .contact-icon-btn {
    color: #16251b;
  }

}


/* =========================================================
   ABOUT HEADER LOGO
   ========================================================= */

.page-about .contact-header__logo img {
  display: block;
  width: auto;
  height: 31px;
  max-width: none;
  object-fit: contain;
}


/* STICKY DESKTOP LOGO */
@media (min-width: 761px) {

  .page-about .contact-header.is-stuck .contact-header__logo img {
    width: auto;
    height: 21px;
    max-width: none;
    filter: none !important;
  }

}


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

  .page-about .contact-header__logo img,
  .page-about .contact-header.is-stuck .contact-header__logo img {
    width: auto;
    height: 22px;
    max-width: none;
    filter: none !important;
  }

}




/* =========================================================
   MISSION — PUT WELCOME GATE BEHIND TOP TREE STRIP
   ========================================================= */

.page-about .mission {
  position: relative;
}


/* forest transition */
.page-about .mission .mission__forest-transition {
  z-index: 30 !important;
}


/* top tree strip above the welcome gate */
.page-about .mission .mission__forest-transition>.mission__tree-strip--top-1 {
  position: absolute !important;
  z-index: 32 !important;
}


/* road can stay below the trees */
.page-about .mission__road {
  position: absolute;
  z-index: 20 !important;
}


/* welcome gate behind tree strip */
.page-about .mission__welcome {
  position: absolute;
  z-index: 21 !important;
}


/* trucks can remain visible above road */
.page-about .mission__road .truck {
  z-index: 22 !important;
}

@media (max-width: 760px) {
  .contact-footer__contact span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(26, 129, 90, 1);
    text-transform: uppercase;
  }
}



@media (max-width: 760px) {
  .page-about .mission .grand-couples {
    display: none;
  }

  .page-about .mission .picnic {
    display: none;
  }

  .mission-bin .bin-1 {
    display: none;
  }

  .page-about .mission .bin-2 {
    display: none;
  }

  .page-about .mission .bin-3 {
    display: none;
  }

  .page-about .mission .bin-4 {
    display: none;
  }

  .page-about .mission__road .truck-1 {
    display: none;
  }

  .page-about .mission__road .truck-2 {
    display: none;
  }

  .page-about .mission .mission__forest-transition>.mission__tree-strip--top {
    position: absolute !important;
    right: 0 !important;
    left: 6px !important;
    width: 29% !important;
    /* min-height: 0 !important; */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    translate: none !important;
    z-index: 1 !important;
    /* height: 212px; */
  }
}


/* ==========================================================================
   MOBILE ONLY  —  MISSION SCENE: TOP + BOTTOM + LEFT FENCE
   Scope: <= 760px. Paste at the ABSOLUTE END of about.css so it wins.
   No desktop rule is affected.

   WHAT WAS WRONG
   TOP     Tree crowns sliced flat at the section edge -> .mission still had
           overflow:hidden winning from a later block in the file.
   BOTTOM  The road ended on a hard horizontal cut, because the bottom tree
           strip was not sitting at the foot of the scene to close it off.

   Everything is now driven by ONE height variable, --scene-h, so the
   background band, the bottom treeline and the text padding stay in sync.
   ========================================================================== */

@media (max-width: 760px) {

  /* ---------------------------------------------------------------------
     MASTER GEOMETRY
     --------------------------------------------------------------------- */
  .page-about .mission {
    /* Height of the illustrated scene. Everything below derives from it. */
    --scene-h: clamp(320px, 90vw, 400px);

    /* Gap in the top band = carriageway + 5px verge each side. Sized to the
       ROAD, not the gate, so trees reach both edges. */
    --road-gap-l:
      calc(100% - var(--mission-road-right) - var(--mission-road-width) - 5px);
    --road-gap-r:
      calc(100% - var(--mission-road-right) + 5px);

    --forest-h: clamp(92px, 26vw, 118px);
    --bottom-forest-h: clamp(74px, 21vw, 96px);

    --overhang: clamp(38px, 11vw, 52px);

    --left-fence-top: 62vw;
    --left-fence-h: clamp(90px, 21vw, 120px);
  }


  /* ---------------------------------------------------------------------
     STOP THE SECTION CLIPPING  (this is the top fix)
     --------------------------------------------------------------------- */
  .page-about .mission {
    position: relative !important;
    overflow: visible !important;
    contain: none !important;

    /* Paint above .aintro so the overhang is not covered by it. */
    z-index: 6 !important;

    padding-top: calc(var(--scene-h) + 34px) !important;
  }

  /* The scene band still clips itself, so the road cannot bleed downward. */
  .page-about .mission::before {
    height: var(--scene-h) !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }

  .page-about .mission__deco {
    overflow: hidden !important;
  }


  /* =====================================================================
     1. TOP TREE BAND
     ===================================================================== */

  .page-about .mission .mission__forest-transition {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: auto !important;

    overflow: visible !important;
    pointer-events: none !important;

    z-index: 30 !important;
  }

  .page-about .mission .mission__tree-strip,
  .page-about .mission .mission__forest-transition>.mission__tree-strip--top,
  .page-about .mission .mission__forest-transition>.mission__tree-strip--top-1 {
    position: absolute !important;

    top: calc(var(--overhang) * -1.40) !important;
    right: 0 !important;
    left: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    max-width: none !important;
    height: var(--forest-h) !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    pointer-events: none !important;

    transform: none !important;
    translate: none !important;

    z-index: 30 !important;

    -webkit-mask-image: linear-gradient(to right,
        #000 0,
        #000 var(--road-gap-l),
        transparent var(--road-gap-l),
        transparent var(--road-gap-r),
        #000 var(--road-gap-r),
        #000 100%) !important;

    mask-image: linear-gradient(to right,
        #000 0,
        #000 var(--road-gap-l),
        transparent var(--road-gap-l),
        transparent var(--road-gap-r),
        #000 var(--road-gap-r),
        #000 100%) !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
  }

  .page-about .mission .mission__tree-strip>img,
  .page-about .mission .mission__forest-transition>.mission__tree-strip--top>img,
  .page-about .mission .mission__forest-transition>.mission__tree-strip--top-1>img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center bottom !important;

    transform: none !important;
    translate: none !important;
  }


  /* =====================================================================
     2. BOTTOM TREE LINE  —  closes off the foot of the scene
     This is the bottom fix. It sits at the base of --scene-h and runs the
     full width, so the road no longer ends on a bare horizontal cut.
     ===================================================================== */

  .page-about .mission .mission__tree-strip--bottom {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: calc(var(--scene-h) - var(--bottom-forest-h) + 16px) !important;
    bottom: auto !important;
    right: 0 !important;
    left: 127px !important;
    width: 73% !important;
    max-width: none !important;
    height: var(--bottom-forest-h) !important;
    min-height: 113px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    translate: none !important;
    z-index: 28 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;

  }

  .page-about .mission .mission__tree-strip--bottom>img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center top !important;

    transform: none !important;
    translate: none !important;
  }


  /* =====================================================================
     3. LEFT FENCE  —  lower-left grass
     ===================================================================== */

  .page-about .mission::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    top: 80vw !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;

    width: 46% !important;
    height: var(--left-fence-h) !important;

    background-image: url("../img/fence.png") !important;
    background-repeat: repeat-x !important;
    background-position: left bottom !important;
    background-size: 120px var(--left-fence-h) !important;

    z-index: 26 !important;
    pointer-events: none !important;
  }
}


/* iPhone 13 / 390px and narrower ------------------------------------------ */
@media (max-width: 390px) {
  .page-about .mission {
    --scene-h: clamp(310px, 90vw, 355px);
    --forest-h: 98px;
    --bottom-forest-h: 80px;
    --overhang: 44px;
    --left-fence-top: 62vw;
    --left-fence-h: 80px;
  }

  .page-about .mission::after {
    width: 39% !important;
    background-size: 169px var(--left-fence-h) !important;
  }
}


/* ==========================================================================
   MOBILE DELTA  —  TREES BEHIND GATE  +  FENCE BELOW MISSION TEXT
   Scope: <= 760px. Paste AFTER your current block. Nothing else changes.
   ========================================================================== */

@media (max-width: 760px) {

  /* =====================================================================
     1. TOP TREES BEHIND THE WELCOME GATE
     The band was at z-index 30, close enough to the road layer that the
     crowns crowded the gate posts. Dropping it well below the road, and
     lifting the gate above everything, puts the whole treeline behind the
     gate so the posts and the WELCOME board read cleanly.
     ===================================================================== */

  .page-about .mission .mission__forest-transition {
    z-index: 12 !important;
  }

  .page-about .mission .mission__tree-strip,
  .page-about .mission .mission__forest-transition>.mission__tree-strip--top,
  .page-about .mission .mission__forest-transition>.mission__tree-strip--top-1 {
    z-index: 12 !important;
  }

  .page-about .mission__road {
    z-index: 44 !important;
    overflow: visible !important;
  }

  .page-about .mission__welcome {
    z-index: 46 !important;
  }


  /* =====================================================================
     2. NEW FENCE  —  BELOW THE MISSION & VISION TEXT
     Hosted on .mission__inner::after so it lands under the three pillars.
     Full-bleed: .mission__inner is inset by its own side margin, so the
     fence is stretched back out to the full viewport width.
     ===================================================================== */

  .page-about .mission__inner {
    position: relative !important;
  }

  .page-about .mission__inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    bottom: calc(var(--mission-bottom-fence-drop, 98px) * -1) !important;
    left: 50% !important;
    right: auto !important;
    width: 102vw !important;
    height: clamp(52px, 26vw, 78px) !important;
    transform: translateX(-50%) !important;
    background-image: url(../img/fence.png) !important;
    background-repeat: repeat-x !important;
    background-position: left bottom !important;
    background-size: contain !important;
    z-index: 26 !important;
    pointer-events: none !important;
  }
}


/* iPhone 13 / 390px and narrower ------------------------------------------ */
@media (max-width: 390px) {
  .page-about .mission__inner::after {
    height: 92px !important;
    bottom: -92px !important;
  }
}






@media (min-width: 761px) and (max-width: 1024px) {
  .page-about .cert-frame img[data-slide] {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(280px, 42vw, 420px);
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 14px;
  }

  .lw-inner-cta__content {

    left: 6%;
  }

  .page-about .ahero__forest {
    position: absolute !important;
    right: 0 !important;
    left: 0px !important;
    bottom: clamp(-43px, -13.6vw, -122px) !important;
  }

  .aintro__copy {
    position: relative;
    left: 20%;
    top: -14%;
  }

  .page-about .aintro__scene .truck {
    left: -34%;
    bottom: -29%;
    width: clamp(150px, 34vw, 205px);
  }

  .page-about .aintro__scene .pallet {
    right: 27%;
    bottom: 11%;
    width: clamp(84px, 7.5vw, 78px);
  }

  .page-about .aintro__scene .forklift {
    right: -27px;
    bottom: -22%;
    width: clamp(126px, 36vw, 277px);
  }

  .page-about .mission {
    /* --mission-road-right: clamp(18px, 4vw, 38px); */
    /* --mission-road-width: clamp(142px, 18vw, 188px); */
    min-height: auto;
    padding: clamp(500px, 64vw, 625px) 0 clamp(112px, 11vw, 138px);
    /* background-position: 50% top; */
    background-size: auto clamp(504px, 79vw, 652px);
  }

  .page-about .mission {
    background-color: #628b17;
  }

  .page-about .mission::after {
    top: 93%;
    display: block !important;
    position: absolute;
    right: 0;
  }
}

/* iPad Pro landscape — 1025px to 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  .page-about .cert-frame img[data-slide] {
    max-height: clamp(340px, 34vw, 480px);
  }


}






/* ==========================================================================
   MISSION — TRUCK FACING DIRECTION
   The winning rotate values come from the "CONSOLIDATED ABOUT PAGE UI REPAIR"
   block far above; the later fence/forest block only overrides `top`.
   `rotate` is a standalone property, so the `transform: none !important`
   rules in the "MISSION — COMPLETELY STATIC" block do not affect it.
   ========================================================================== */

.page-about .mission__road .truck-1 {
  rotate: 0deg !important;
}



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

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

}





/* 
ipad pro screen */

@media (min-width: 1024px) and (max-width: 1366px) and (pointer: coarse) {
  .page-about .mission__tree-strip--bottom {
    right: -1px;
    bottom: -51px !important;
    left: auto !important;
    z-index: 20 !important;
    width: 32%;
    height: clamp(93px, 13.5vw, 154px) !important;
  }

  .page-about .mission .pillar {
    max-width: 310px;
  }

  .page-about .mission__welcome {
    position: absolute !important;
    top: clamp(-112px, 529.118px, -80px) !important;
    left: 39% !important;
    z-index: 22 !important;
    width: 122% !important;
    max-width: none !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    translate: none !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  .page-about .mission .mission__forest-transition>.mission__tree-strip--top-1 {
    top: 6px !important;
    /* height: var(--mission-forest-back-h) !important; */
  }

  .page-about .mission .mission__forest-transition>.mission__tree-strip--top-1 {
    left: 0 !important;
    right: 0 !important;
    width: 104% !important;
    max-width: none !important;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 var(--mission-forest-gap-left), transparent var(--mission-forest-gap-left), transparent var(--mission-forest-gap-right), #000 var(--mission-forest-gap-right), #000 100%) !important;
    mask-image: linear-gradient(to right, #000 0, #000 var(--mission-forest-gap-left), transparent var(--mission-forest-gap-left), transparent var(--mission-forest-gap-right), #000 var(--mission-forest-gap-right), #000 100%) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
  }

  .page-about .mission {
    --mission-forest-gap-left: calc(100% - var(--mission-road-right) - var(--mission-road-width) - 26px);
    --mission-forest-gap-right: calc(100% - var(--mission-road-right) + -84px);
  }

  .page-about .mission::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    right: 0;
    top: 88%;
    left: 0;
    z-index: 26;
    width: 72%;
    height: min(16vw, 192px);
    background-image: url(../img/fence.png);
    background-repeat: repeat-x;
    background-position: left center;
    background-size: 100%;
    pointer-events: none;
  }

  .aintro__copy {
    position: relative;
    left: 267px;
    bottom: 53px;
  }

  .page-about .aintro__scene .truck {
    position: absolute;
    left: -75%;
    bottom: -38%;
    width: clamp(115px, 50vw, 361px);
  }
}



/* iPad Mini + iPad Air only */
@media (min-width:761px) and (max-width:1024px) {

  .page-about .mission__inner,
  .page-about .mission__inner.shell {

    width: calc(100% - 60px) !important;
    max-width: 500px !important;

    margin-inline: auto !important;
    padding: 0 !important;

    position: absolute !important;

    top: 40% !important;
    left: 37% !important;

    transform: translateX(-50%) !important;
  }

  .page-about .mission__tree-strip--bottom {
    right: max(0px, calc(var(--mission-road-right) - 31px)) !important;
    bottom: 10px !important;
    width: clamp(200px, 32vw, 292px) !important;
    /* height: clamp(64px, 8vw, 82px) !important; */
    top: 89%;
  }

  .page-about .mission::after {
    top: 91%;
    display: block !important;
    position: absolute;
    right: 0;
  }

  .page-about .mission::after {
    height: clamp(90px, 11vw, 122px);
    width: 73%;
  }

  .page-about .mission .pillars,
  .page-about .mission .pillar {
    max-width: 434px;
  }

  .page-about .mission__welcome {
    top: -78px !important;
    width: 109% !important;
    z-index: 6 !important;
    overflow: visible;
    left: 26% !important;
  }

  .page-about .mission .grand-couples {
    top: 29%;
    left: 14%;
    width: clamp(68px, 16vw, 105px);
  }

  .page-about .mission {
    --mission-forest-gap-left: calc(100% - var(--mission-road-right) - var(--mission-road-width) - 8px);
    --mission-forest-gap-right: calc(100% - var(--mission-road-right) + -66px);
  }

  .page-about .mission .mission-bin {
    position: absolute;
    display: block !important;
  }


  .page-about .mission .mission-bin {
    right: calc(var(--mission-road-right) + var(--mission-road-width) + 50px);
    width: clamp(67px, 2.7vw, 29px);
  }

  .page-about .mission .picnic {
    top: 17%;
    left: 38%;
    right: auto;
    width: clamp(97px, 9vw, 92px);
  }


  .page-about .mission .play {
    top: 15%;
    right: 31%;
    width: clamp(81px, 9vw, 90px);
  }
}

/* Surface Pro 10 (also 8/9/11) — landscape
   Screen: 2880×1920 @ 200% scale → 1440×960 CSS px, DPR 2
   Browser viewport ≈ 1440×840–870 with Edge/Chrome chrome */
@media screen and (min-width: 1380px) and (max-width: 1460px) and (min-height: 800px) and (max-height: 1000px) and (any-pointer: coarse) and (any-pointer: fine) {

  .page-about .mission {
    min-height: auto;
    padding: 625px 0 138px;
    background-size: auto clamp(504px, 79vw, 712px);
  }
}

.page-about .mission .bin-3 {
  right: calc(var(--mission-road-right) + var(--mission-road-width) + clamp(80px, 12vw, 128px));
}


.page-about .mission .bin-4 {
  right: calc(var(--mission-road-right) + var(--mission-road-width) + clamp(80px, 12vw, 130px));
}

/* iPad Pro 13 inch only */
@media screen and (min-width: 1024px) and (max-width: 1100px) and (min-height: 1300px) and (max-height: 1400px) {

  .page-about .mission .bin-3 {

    right: calc(var(--mission-road-right) + var(--mission-road-width) + clamp(80px, 10vw, 121px));

  }

  .page-about .mission .bin-4 {
    right: calc(var(--mission-road-right) + var(--mission-road-width) + clamp(80px, 11vw, 130px));
  }
}

/* iPad Mini + iPad Air only */
@media screen and (min-width: 768px) and (max-width: 1100px) and (min-height: 900px) and (max-height: 1200px) and (hover: none) and (pointer: coarse) {

  .page-about .mission .bin-3 {
    right: calc(var(--mission-road-right) + var(--mission-road-width) + clamp(54px, 7vw, 121px));
  }

  .page-about .mission .bin-4 {
    right: calc(var(--mission-road-right) + var(--mission-road-width) + clamp(56px, -3vw, 130px));
  }



}

@media screen and (min-width: 1430px) and (max-width: 1450px) and (min-height: 890px) and (max-height: 910px) {
  .page-about .mission__tree-strip--bottom {
    right: -115px;
    bottom: -54px !important;
    left: auto !important;
    z-index: 20 !important;
    width: 41%;
    height: clamp(93px, 13.5vw, 154px) !important;
  }
}