:root {
  --dark-1: #08201a;
  --dark-2: #0b2e22;
  --green-mid: #146b45;
  --green-bright: #1fa15f;
  --green-glow: #22c26b;
  --teal: #28d1c4;
  --gold: #eab676;
  --gold-bright: #f0b869;
  --mint-bg: #ebf5e7;
  --mint-bg-2: #dcecd6;
  --ink: #3f4642;
  --ink-soft: #5c645f;
  --white: #ffffff;
  --off-white: #f4f2ee;
  --lime-btn: #d7e79f;

  --font-heading: 'Poppins', Arial, Helvetica, sans-serif;
  --font-body: 'Poppins', Arial, Helvetica, sans-serif;

  --container-w: 1240px;
  --pad: 2vw;
  --grid-pad: clamp(20px, 5vw, 80px);

  --line-color: var(--gold);
  --line-width: 1px;
  --ease: cubic-bezier(.22, .8, .32, 1);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.preloader,
#about,
.herd-banner,
#presence,
.product-block,
#clients,
#contact,
.site-footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
}

.accent {
  color: var(--gold-bright);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  color: var(--green-bright);
  margin-bottom: 14px;
}

.eyebrow--light {
  color: var(--gold);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: .01em;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  cursor: pointer;
  font-size: 1.2rem;
}

.btn-outline {
  border: 1.5px solid var(--gold);
  color: var(--gold);
  background: transparent;
}

.btn-outline:hover {
  background: var(--gold);
  color: var(--dark-1);
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn-solid {
  background: var(--lime-btn);
  color: #223018;
}

.btn-solid:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* scroll-triggered fade/slide, see script.js */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.v-logo {
  display: block;
  object-fit: contain;
}

.v-logo--nav,
.v-logo--footer {
  width: 56px;
  height: auto;
}


/* INTRO ANIMATION */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-1);
  transition: background 1.2s var(--ease);
  overflow: hidden;
  cursor: pointer;
}

.preloader.docked {
  position: relative;
  inset: auto;
  z-index: 1;
  min-height: 100vh;
  cursor: default;
}

.preloader-bg {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, var(--green-bright) 0%, var(--dark-2) 55%, var(--dark-1) 85%);
  opacity: .9;
  transition: opacity 1.2s var(--ease);
}

.preloader.stage-final .preloader-bg {
  opacity: 0;
}

.preloader.stage-final {
  background: radial-gradient(ellipse at center, var(--mint-bg-2) 0%, var(--mint-bg) 65%);
}

.logo-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 20px 20px 60px;
  z-index: 2;
}

.hero-logo-lockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  z-index: 1;
}

.preloader.stage-final .hero-logo-lockup {
  opacity: 1;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-bright);
  opacity: 0;
  transition: opacity .8s var(--ease);
}

.preloader.stage-final .scroll-cue {
  opacity: 1;
  cursor: pointer;
}

.arrow-down {
  animation: bounceDown 1.6s ease-in-out infinite;
  display: inline-block;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}


/* HEADER / NAV */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}

.site-header.scrolled {
  background: rgba(8, 32, 26, .82);
  backdrop-filter: blur(10px);
  padding: 1px 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: initial;
}

.brand {
  display: flex;
  align-items: center;
}

.main-nav {
  display: flex;
  gap: 47px;
  margin-left: 44px;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  opacity: .85;
  position: relative;
  padding: 4px 0;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}

.nav-link:hover,
.nav-link.active {
  opacity: 1;
  color: var(--gold);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
  margin-left: auto;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ABOUT SECTION */

.about {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 130px 0 0;
}

.about-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.about-bg-video {
  width: 100%;
  height: 100%;
  display: block;
  object-position: center center;
}

.about-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.about-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding-bottom: 100px;
  max-width: 1230px;
  width: 100%;
}

.eyebrow {
  text-align: left;
}

.about-copy {
  align-self: start;
  margin-top: -17px;
  max-width: 482px;
  border-top: 1px solid var(--green-mid);
  border-bottom: 1px solid var(--green-mid);
  padding: 36px 0;
}

.lead-text {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 100;
  color: var(--green-mid);
  line-height: 1.22;
}

.lead-text strong {
  color: var(--dark-1);
  font-weight: 700;
}

.herd-banner {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark-1);
  border-top: 1px solid var(--gold);
  margin-top: 6px;
}

/* artwork rendered straight from the PDF, nav bar and heading cropped off */
.herd-banner-bg {
  position: relative;
  width: 100%;
  margin-top: 36px;
  aspect-ratio: 4000 / 1200;
  background-color: var(--dark-1);
  background-image: url('../images/herd-banner-bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.herd-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 32, 26, 0), rgba(8, 32, 26, .95));
}

.herd-banner-inner {
  position: relative;
  padding: 24px 0 90px;
  text-align: left;
}

.herd-banner-inner h2 {
  color: var(--white);
  font-weight: 10;
  font-size: clamp(1.6rem, 1rem + 1.2vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: .003em;
}

.herd-banner-inner .accent {
  display: inline-block;
  margin-top: 6px;
}


/* OUR PRESENCE / WORLD MAP */

/* desktop: one flat image straight from the PDF; mobile swaps to
   .presence-mobile below since the baked-in text gets too small */
.presence {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark-1);
  border-top: 1px solid var(--gold);
  margin-top: 6px;
}

.presence-complete-img {
  width: 100%;
  height: auto;
}

.presence-mobile {
  display: none;
}


/* PRODUCTS */

.products {
  background: radial-gradient(ellipse at 68% 10%, var(--green-bright) 0%, var(--dark-2) 45%, var(--dark-1) 80%);
  border-top: 1px solid var(--gold);
  margin-top: 6px;
}

.product-block {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 195px 0 105px;
}

/* base grid, used by TMR — approved layout, don't change. Bio-CNG's
   positioning lives entirely in its own scoped rules below. */
.product-grid {
  position: relative;
  flex: 1;
  display: grid;
  max-width: none;
  padding: 0;
  grid-template-columns:
    minmax(var(--grid-pad), 1fr)
    minmax(320px, 490px)
    48px
    minmax(410px, 620px)
    minmax(var(--grid-pad), 1fr);
}

/* Bio-CNG desktop-only overrides, scoped so they can never touch TMR or
   collide with the mobile stacking rules */
@media (min-width: 901px) {
  /* Bio-CNG doesn't need TMR's full 195px top padding (that's sized for
     TMR's full-screen slide) — shrinking it removes the dead space above
     the heading and brings the button back within one screen */
  .product-block--alt {
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .product-block--alt .product-visual::after {
    top: -100px;
    bottom: auto;
    height: 183px;
  }

  /* no grid-template-columns/width override here on purpose — inherits
     TMR's shrink-wrap-and-center grid so both images land on the same X
     at every viewport width */

  .product-block--alt .product-copy {
    position: relative;
    padding-top: 49px;
    padding-left: 1px;
  }

  /* anchored at the heading's own text start (1px padding-left, h2 no
     longer has its own margin-left), extending a full 100vw to the left
     of that so it always reaches the true viewport edge regardless of how
     far the shrink-wrap-and-center grid happens to sit from it at this
     width */
  .product-block--alt .product-copy::before {
    content: '';
    position: absolute;
    top: 83px;
    right: calc(100% - 1px);
    width: 100vw;
    height: var(--line-width);
    background: var(--line-color);
  }
}

.product-copy {
  grid-column: 2 / 3;
  padding: 48px 1px 0;
}

.product-copy h2 {
  color: var(--off-white);
  font-size: 4.5rem;
  font-weight: 10;
  line-height: 1.18;
  margin-bottom: 25px;
}

.product-copy p {
  color: rgba(255, 255, 255, .78);
  max-width: 46ch;
  margin-bottom: 34px;
  font-size: 1.1rem;
  font-weight: 300;
}

.product-visual {
  grid-column: 4 / 5;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 40px;
}

.product-visual::before {
  content: '';
  position: absolute;
  left: 0;
  top: -195px;
  height: 195px;
  width: var(--line-width);
  background: var(--line-color);
}

/* Bio-CNG: starts at the image's own top instead of running up to the
   section top, and runs down to the block's bottom instead */
@media (min-width: 901px) {
  .product-block--alt .product-visual::before {
    top: 83px;
    height: auto;
    bottom: -70px;
  }
}

/* starts at the image's own top (no upward extension) and runs down to
   the block's true bottom edge; Bio-CNG's own override re-adds the
   upward reach so its line still connects up into TMR's image */
.product-visual::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: -105px;
  width: var(--line-width);
  background: var(--line-color);
}

.product-visual .btn {
  margin-top: 34px;
}

.product-copy-inset {
  width: 100%;
  padding-left: 36px;
  padding-right: 40px;
}

/* cancels the wrapper's own padding-left so Bio-CNG's button lines up
   with TMR's, which sits flush against the image's left edge */
.product-copy-inset .btn {
  margin-left: -36px;
}

.product-visual p {
  color: rgba(255, 255, 255, .78);
  font-size: 1.1rem;
  font-weight: 300;
}

.product-illustration {
  position: relative;
  border: var(--line-width) solid var(--line-color);
  width: 100%;
  aspect-ratio: 16 / 7;
}

.product-illustration::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100vw;
  height: var(--line-width);
  background: var(--line-color);
}

.product-illustration::after {
  content: '';
  position: absolute;
  left: 100%;
  bottom: 0;
  width: 100vw;
  height: var(--line-width);
  background: var(--line-color);
}

@media (min-width: 901px) {
  .product-block--alt .product-illustration {
    margin-top: 83px;
  }

  .product-block--alt .product-illustration::before {
    width: 180px;
  }
}

.tmr-illustration img,
.cng-illustration img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* CLIENTS / WHO WE SERVE */

.clients {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(ellipse at 68% 10%, var(--green-bright) 0%, var(--dark-2) 45%, var(--dark-1) 80%);
  border-top: 1px solid var(--gold);
  margin-top: 6px;
  padding: 110px 0;
}

.clients-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.1fr;
  align-items: center;
}

.clients-copy {
  position: relative;
  text-align: left;
}

.clients h2 {
  color: var(--white);
  font-size: 3.5rem;
  font-weight: 10;
  line-height: 1.18;
  margin-left: -5px;
  margin-bottom: 1px;
}

.clients-sub {
  color: rgba(255, 255, 255, .72);
  max-width: 42ch;
  font-size: 1.02rem;
}

.trust-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 22px;
}

/* laptop/desktop only — mobile stays single-column (see base rule above) */
@media (min-width: 901px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* golden rule anchored to the boxes' own top edge, not the text column's —
   the two columns are different heights and align-items:center means
   their tops don't line up, so anchoring to .clients-copy instead let the
   line drift down and cut across the top of the boxes */
.trust-grid::before,
.trust-grid::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 1px;
  background: var(--gold);
}

.trust-grid::before {
  top: -28px;
}

.trust-grid::after {
  bottom: -28px;
}

.trust-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(31, 161, 95, .35);
  border-radius: 14px;
  padding: 34px 22px;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}

.trust-card:hover {
  transform: translateY(-6px);
  border-color: var(--green-bright);
  background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  box-shadow: 0 14px 32px rgba(31, 161, 95, .3);
}

.trust-icon {
  width: 40px;
  height: 40px;
  color: var(--gold);
  margin-bottom: 22px;
}

.trust-card:nth-child(2n) .trust-icon {
  color: var(--teal);
}

.trust-card h3 {
  font-family: var(--font-heading);
  color: var(--white);
  font-weight: 600;
  font-size: 1.08rem;
  margin-bottom: 10px;
}

.trust-card p {
  color: rgba(255, 255, 255, .68);
  font-size: .92rem;
  line-height: 1.55;
}


/* CONTACT */

.contact {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(ellipse at 78% 50%, var(--green-bright) 0%, var(--dark-2) 45%, var(--dark-1) 80%);
  border-top: 1px solid var(--gold);
  margin-top: 6px;
  overflow: hidden;
}

/* wraps just the image + button so the button's percentage position stays
   relative to the image's own box, even though .contact itself is now
   taller than the image (min-height:100vh + centered) */
.contact-desktop-inner {
  position: relative;
  width: 100%;
}

/* desktop: flattened PDF composite sets the wrapper's height; the button
   is positioned as a percentage of that same box so it lines up with the
   spot masked out of the image, at any width */
.contact-complete-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4000 / 2010;
}

.contact-mobile {
  display: none;
}

.contact-cta-btn-desktop {
  position: absolute;
  left: 9.24%;
  top: 76.39%;
  width: 13.39%;
  height: 9.92%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  z-index: 2;
}

.contact-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  z-index: 1;
}

.knot-graphic {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.contact-inner {
  position: relative;
  z-index: 0;
  max-width: 1600px;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

.contact-copy {
  position: relative;
  grid-row: 2;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-copy::before,
.contact-copy::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 1px;
  background: var(--gold);
}

.contact-copy::before {
  top: 0;
}

.contact-copy::after {
  bottom: 0;
}

.contact-copy h2 {
  color: var(--white);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  line-height: 1.18;
}

.contact-cta-btn {
  grid-row: 3;
  align-self: start;
  justify-self: start;
  display: inline-block;
  margin-top: 88px;
}


/* FOOTER */

.site-footer {
  background: var(--dark-1);
  border-top: 1px solid var(--gold);
  margin-top: 6px;
  padding: 60px 0 34px;
  text-align: center;
}

.v-logo--footer {
  margin: 0 auto 14px;
}

.footer-tagline {
  color: rgba(255, 255, 255, .7);
  font-size: .92rem;
  margin-bottom: 26px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.footer-nav a {
  color: rgba(255, 255, 255, .75);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 400;
}

.footer-nav a:hover {
  color: var(--gold);
}

.footer-copy {
  color: rgba(255, 255, 255, .4);
  font-size: .78rem;
}


/* RESPONSIVE */

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  /* mobile stacks copy above a reduced, contained video instead of the
     desktop full-bleed background — easier to read and doesn't force the
     section to a full viewport height on small screens */
  .about-video-wrap {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: clamp(200px, 62vw, 380px);
    border-radius: 14px;
    margin-top: 28px;
  }

  .about-bg-video {
    object-fit: cover;
    transform: translateX(-25%) translateY(-5%) scale(1.4);
    transform-origin: center center;
  }

  .about-overlay {
    display: none;
  }

  .product-block {
    flex-direction: row;
    padding: 60px 0;
    /* base rule's min-height:100vh forces this section to fill the full
       viewport even though mobile content is much shorter; with
       flex-direction:row here, .product-grid is the cross-axis item, so
       default align-items:stretch was stretching it (and the empty space
       inside it) to fill that height — pushing the image way down from
       the text above it */
    min-height: auto;
    align-items: flex-start;
  }

  .herd-banner-bg {
    aspect-ratio: 3974 / 2600;
    margin-top: 0;
  }

  .herd-banner-bg::after {
    background: none;
  }

  .herd-banner-inner {
    padding: 0 0 0 29px;
  }

  .herd-banner-inner h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  }


  /* font-size intentionally not overridden here — this heading is a full
     two-part sentence, so the uniform large clamp used elsewhere made it
     too tall and pushed the rope image below the fold; falls back to the
     base rule's own clamp(2.4rem, 5.2vw, 4.6rem), which lands at 2.4rem on
     narrow phones anyway */
  .contact-copy h2 {
    font-weight: 10;
    line-height: 1.18;
    margin-left: 15px;
  }

  /* "Let's do it together" at the heading's own size (347px) is just
     wider than the available line (335px), forcing an awkward 2-line
     wrap — a small size step down here keeps it on one line without
     widening past the screen */
  .contact-copy h2 .accent {
    font-size: 2.15rem;
  }

  .product-grid {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .product-copy,
  .product-visual {
    grid-column: 1;
  }

  .product-illustration::before,
  .product-illustration::after,
  .product-visual::before,
  .product-visual::after,
  .product-copy::before {
    display: none;
  }

  .product-visual {
    border-top: 1px solid var(--gold);
    padding-top: 6px;
  }

  .product-visual .btn {
    margin-top: 22px;
    margin-left: 29px;
    max-width: calc(100% - 40px);
  }

  /* Bio-CNG's inset text/button sit inside .product-visual too — give them
     the same 29px left space as TMR's button instead of the desktop-tuned
     36px padding (which the button then cancels back to flush) */
  .product-copy-inset {
    padding-left: 19px;
    padding-right: 0;
  }

  .product-copy-inset .btn {
    margin-left: 0;
  }

  /* the base rule's 1px right padding is a leftover desktop-tuned value —
     on mobile it leaves the heading/paragraph almost touching the edge */
  .product-copy {
    padding: 36px 18px 0;
  }

  .product-visual p {
    margin: 11px -16px;
  }

  /* .product-visual p above (higher up, matches this too since it's a
     descendant) sets a -16px left margin tuned for TMR's own paragraph;
     override it back to 0 here so Bio-CNG's inset paragraph uses its
     wrapper's 29px padding instead, matching TMR's button */
  .product-copy-inset p {
    margin-left: 0;
  }

  .product-copy h2 {
    font-size: 2.4rem;
    margin-bottom: 0;
  }

  .clients h2 {
    font-size: 2.4rem;
  }

  .product-visual p {
    font-size: 1.1rem;
  }

  .btn {
    font-size: 1.2rem;
    padding: 15px 24px;
  }

  .contact {
    /* 100vh is measured against the browser's largest possible viewport,
       before the address bar collapses — on a real phone that makes the
       section taller than what's actually visible on load, pushing the
       rope's bottom out of view even though it measures as "fitting" in
       a fixed-size test viewport; 100svh accounts for the address bar
       (same fix already used for .clients) */
    min-height: 100svh;
    /* stays top-aligned (not centered) on mobile — .contact-visual is
       absolutely positioned against .contact itself, not .contact-mobile,
       so centering the flex content here would separate it from the
       image's anchor point and let the two overlap again */
    justify-content: flex-start;
    /* has to clear .contact-visual's own 340px height, or the rope image
       creeps up over the button and blocks clicks — trimmed from 380px so
       the section's actual fixed-pixel height (which governs real height
       whenever it exceeds the min-height floor) leaves more room on
       shorter real phone viewports */
    padding: 50px 0 330px;
    background: radial-gradient(ellipse at 31% 61%, var(--green-bright) 0%, var(--dark-2) 45%, var(--dark-1) 79%);
  }

  .contact-complete-img {
    display: none;
  }

  .contact-mobile {
    display: block;
  }

  .contact-cta-btn-desktop {
    display: none;
  }

  .contact-visual {
    width: 100%;
    height: 340px;
    top: auto;
    /* the button now sits much higher up (heading/spacing above it was
       shrunk to fit the section in one screen), so there's ~80px of
       clearance before this would risk overlapping it — safe to pull the
       image up further to keep its bottom edge inside the viewport too */
    bottom: 36px;
  }

  .contact-inner {
    display: block;
    height: auto;
    max-width: none;
  }

  .contact-copy {
    max-width: none;
    padding: 0;
  }

  .contact-cta-btn {
    margin-top: 22px;
  }

  .clients {
    min-height: 100svh;
    padding: 0;
    background: radial-gradient(ellipse at 60% 15%, var(--green-glow) 0%, var(--green-bright) 30%, var(--dark-2) 55%, var(--dark-1) 85%);
  }

  .clients-grid {
    flex: 1;
    grid-template-columns: 1fr;
    /* was space-between — that pushes the cards down to the screen's
       true bottom, which opens a big gap above them whenever the content
       falls even a little short of the viewport height. Keeping the
       cards right after the text with just the natural gap is more
       reliable across devices; any leftover room just settles below the
       cards instead of between them. */
    align-content: start;
    gap: 16px;
  }

  .clients-copy {
    padding-top: 66px;
  }

  /* the stacked mobile layout has a much smaller gap between the two
     columns than desktop does, so the line needs to sit closer to avoid
     dipping back up into the text above it */
  .trust-grid::before {
    top: -8px;
  }

  .trust-grid::after {
    bottom: -20px;
  }

  .trust-grid {
    gap: 10px;
  }

  /* icon sits beside the heading instead of stacked above it — the
     stacked layout was taking up too much vertical space per card */
  .trust-card {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-areas: "icon h3" "p p";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    padding: 1px 1px;
    text-align: left;
  }

  .trust-icon {
    grid-area: icon;
    width: 24px;
    height: 24px;
    margin: 0;
  }

  .trust-card h3 {
    grid-area: h3;
    font-size: 1.1rem;
    margin-bottom: 0;
  }

  .trust-card p {
    grid-area: p;
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .eyebrow {
    font-size: .88rem;
    margin-bottom: 0;
  }

  .clients-sub {
    font-size: 1.1rem;
  }

  .footer-tagline {
    font-size: 1.02rem;
  }

  .footer-nav a {
    font-size: .95rem;
  }

  .footer-copy {
    font-size: .85rem;
  }

  .product-block--alt {
    padding: 40px 0;
  }

  /* the shared .product-grid gap is now 0, so no pull-up is needed here
     anymore — just a small buffer above the image */
  .product-block--alt .product-visual {
    padding-top: 2px;
  }

  /* matches the 29px left space the rest of the inset content now uses
     (.product-copy-inset's own padding-left) instead of stacking an extra
     margin on top of it */
  .product-block--alt .product-visual .btn {
    margin-left: 0;
  }

  .product-visual p {
    margin: 11px -16px;
  }

  /* this .product-visual p rule (and its earlier duplicate) both set
     -16px left/right margins tuned for TMR — override back to 0 here,
     after both, so Bio-CNG's inset paragraph uses its wrapper's own
     padding instead (margin-right:-16px was previously absorbed by the
     wrapper's 40px padding-right; now that's 0, it was pushing 16px past
     the screen edge) */
  .product-copy-inset p {
    margin-left: 0;
    margin-right: 0;
  }

  .about {
    padding: 110px 0 40px;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }

  .about-grid {
    order: 1;
    padding-bottom: 0;
  }
}

@media (max-width: 720px) {
  .presence-complete-img {
    display: none;
  }

  .presence-mobile {
    display: block;
    padding: 24px 0 60px;
  }

  .presence-map {
    position: relative;
    margin: 0 auto 40px;
    padding: 0;
  }

  .presence-map img {
    width: 100%;
  }

  .pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
  }

  .pin-dot {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(234, 182, 118, .6);
    animation: pinPulse 2.2s ease-out infinite;
  }

  .pin-label {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--white);
    opacity: .8;
  }

  .presence-copy {
    text-align: left;
  }

  .presence-copy h2 {
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 10;
    line-height: 1.18;
    margin-left: 10px;
  }

  .presence-line-wrap {
    position: relative;
    display: flex;
    justify-content: flex-start;
  }

  .presence-line-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: 1px;
    background: var(--gold);
  }

  .presence-line-wrap--eyebrow {
    margin-bottom: 22px;
  }

  .presence-line-wrap--countries {
    margin-top: 30px;
  }

  .presence-eyebrow-text,
  .presence-countries-text {
    position: relative;
    z-index: 1;
    background: var(--dark-1);
    padding: 0 20px;
  }

  .presence-eyebrow-text {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .88rem;
    color: var(--gold);
  }

  .presence-countries-text {
    color: rgba(255, 255, 255, .85);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
  }

  @keyframes pinPulse {
    0% { box-shadow: 0 0 0 0 rgba(234, 182, 118, .55); }
    70% { box-shadow: 0 0 0 14px rgba(234, 182, 118, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 182, 118, 0); }
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: rgba(8, 32, 26, .97);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    z-index: 100;
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .nav-toggle {
    display: flex;
  }
}


@media (max-width: 480px) {
  :root {
    --pad: 20px;
  }

  .lead-text {
    font-size: 1.45rem;
  }

  .herd-banner-inner h2 br {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}