:root {
  --dark-1: #08201a;
  --dark-2: #0b2e22;
  --green-mid: #146b45;
  --green-bright: #06ac48;
  --green-glow: #22c26b;
  --teal: #28d1c4;
  --gold: #fdba4d;
  --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: 0.5px;
  --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: 44px;
  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: flex-start;
  text-align: left;
  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-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  margin-top: 60px;
  color: var(--dark-2);
  opacity: 0;
  transition: opacity .8s var(--ease);
}

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

.scroll-cue-mouse {
  grid-column: 1;
  grid-row: 1;
  width: 26px;
  height: 42px;
  display: block;
}

.scroll-cue-dot {
  animation: scrollDotMove 1.8s ease-in-out infinite;
}

.scroll-cue-text {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.3rem;
  color: var(--dark-2);
}

.scroll-cue-chevrons {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.scroll-cue-chevrons svg {
  width: 18px;
  height: 9px;
}

.scroll-cue-chevrons svg:first-child {
  animation: bounceDown 1.6s ease-in-out infinite;
}

.scroll-cue-chevrons svg:last-child {
  animation: bounceDown 1.6s ease-in-out infinite .2s;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(4px); opacity: 1; }
}

@keyframes scrollDotMove {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: .4; }
}


/* 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;
}

/* desktop-only per user request — mobile keeps the fixed px width above */
@media (min-width: 901px) {
  .about-copy {
    max-width: 39%;
  }
}

.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?v=3');
  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;
}

/* mobile-only composite screenshot — swapped in for .herd-banner-bg +
   .herd-banner-inner below at narrow widths, same "kept hidden, shown
   per breakpoint" pattern used for .presence-mobile-complete-img */
.herd-banner-mobile-complete-img {
  display: none;
  width: 100%;
  height: auto;
}


/* OUR PRESENCE / WORLD MAP */

.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;
}

/* old static composite (baked-in text) — replaced by the live map+pins
   markup below, kept hidden rather than removed from the DOM */
.presence-complete-img {
  display: none;
}

/* mobile-only composite screenshot — swapped in for .presence-mobile
   below at narrow widths, same "kept hidden, shown per breakpoint"
   pattern as .presence-complete-img above */
.presence-mobile-complete-img {
  display: none;
  width: 100%;
  height: auto;
}

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

.presence-map {
  position: relative;
  width: 100%;
}

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

/* zoom the map in a bit on desktop — makes the image (and so the whole
   box) proportionally taller, giving the overlaid text more room to sit
   higher up and clear of the pins, without needing to scroll to see it
   all; mobile stays untouched since it already stacks instead of overlays.
   120% overshot and pushed the section past one viewport, so this is
   trimmed back to 108%, with the section's own vertical padding reduced
   to compensate and keep the total within one screen */
@media (min-width: 901px) {
  .presence-mobile {
    padding: 15px 0;
  }

  .presence-map {
    overflow: hidden;
  }

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

.presence-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 32, 26, 0) 55%, rgba(8, 32, 26, .85) 78%, rgba(8, 32, 26, .97) 100%);
}

.pin {
  position: absolute;
  z-index: 2;
  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;
}

/* Latin America's dot sits low enough on the map (51% down) to land in
   the same zone as the heading text below it — flip its label above the
   dot instead of below so it clears the text without moving the dot off
   its real spot */
.pin-latam .pin-label {
  top: auto;
  bottom: 14px;
}

/* India and Nepal's dots sit only 2% apart on this map, close enough that
   their labels collided ("IndNapal") — push Nepal's label down a line so
   the two stay legible without moving the dots off their real spots */
.pin-nepal .pin-label {
  top: 38px;
}

.presence-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 21%;
  z-index: 2;
  text-align: center;
}

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

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

.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: 15px;
}

.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); }
}


/* PRODUCTS */

.products {
  background: radial-gradient(ellipse at 97% 38%, var(--green-bright) 0%, var(--dark-2) 38%, 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% - -51px);
    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;
}

/* the "-" glyph in "Bio-CNG" renders thick at this font size — swap it
   for an explicit thin bar matching the site's other 0.5px accent lines.
   the character itself is hidden (color:transparent, not removed) so
   "Bio-CNG" still reads correctly to screen readers/copy-paste — an
   earlier font-size:0 approach also zeroed out the em-based width on
   this same element (em is relative to its own font-size), making the
   bar invisible; an explicit background color avoids that */
.hyphen-thin {
  display: inline-block;
  width: 0.55em;
  height: 0.5px;
  line-height: 0.5px;
  overflow: hidden;
  vertical-align: 0.45em;
  background: var(--gold-bright);
  color: transparent;
}

.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: 26px;
}

.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 {
}

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

.product-copy-inset p {
  margin-top: 25px;
}

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

.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) 0%, var(--dark-1) 80%);
  margin-top: 6px;
  padding: 110px 0;
  overflow: hidden;
}

.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: 4.2rem;
  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 */
/* each line is broken into two segments so it runs through the empty
   space beside the cards but stops before/resumes after the card grid
   itself, instead of running behind the boxes. Segments are anchored to
   .trust-grid's own box (right:100%/left:100% = exactly its left/right
   edge) and oversized to 100vw so they always reach the viewport edge;
   .clients has overflow:hidden to clip the oversized part */
.trust-grid::before,
.trust-grid::after,
.trust-rule {
  position: absolute;
  width: 100vw;
  height: 1px;
  background: var(--gold);
}

.trust-grid::before,
.trust-grid::after {
  content: '';
}

.trust-grid::before,
.trust-rule--bottom-left {
  right: 100%;
}

.trust-grid::after,
.trust-rule--bottom-right {
  left: 100%;
}

.trust-grid::before,
.trust-grid::after {
  top: 0;
}

.trust-rule--bottom-left,
.trust-rule--bottom-right {
  bottom: 0;
}

.trust-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas: "icon h3" "p p";
  column-gap: 18px;
  align-items: center;
  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), border-width .35s var(--ease), background .35s var(--ease);
}

/* removed the spreading green glow (box-shadow) on hover — border just
   gets a bit bolder instead, same lift/movement as before */
.trust-card:hover {
  transform: translateY(-6px);
  border-width: 2px;
  border-color: var(--green-bright);
  background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
}

.trust-icon {
  grid-area: icon;
  width: 52px;
  height: 52px;
  color: var(--gold);
  margin-bottom: 0;
}

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

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

.trust-card p {
  grid-area: p;
  margin-top: 14px;
  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;
  position: relative;
}

.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;
}

/* mobile: flattened screenshot 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 — same technique
   as the desktop composite above */
.contact-mobile-img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-cta-btn-mobile {
  position: absolute;
  left: 9.17%;
  top: 61.75%;
  width: 37.7%;
  height: 7.47%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}


/* FOOTER */

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

.footer-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .18;
  z-index: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
}

.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) {
  /* 100vh is measured against the browser's largest possible viewport,
     before the mobile address bar collapses — that made this section
     taller than what's actually visible on load, so scroll-snap would
     land with a sliver of the next section's top/margin already peeking
     into view; 100svh accounts for the address bar */
  .preloader.docked {
    min-height: 100svh;
  }

  /* the hero video is 16:9, cropped very aggressively by object-fit:cover
     into a ~9:19 mobile box — the logo lockup inside the video isn't
     perfectly centered in its own 1920px frame, so the default 50% crop
     point clips the right side ("TM" and the tail of "future"); nudging
     the crop's focus right re-centers the logo itself in view.
     the logo itself is also a small element inside a much larger blank
     frame (built for landscape/desktop playback), so cover-fit alone
     still shows it looking small with a lot of empty space around it on
     mobile — scaling up zooms into that same focal point so the logo
     actually fills the screen */
  .hero-logo-lockup {
    object-position: 51.7% center;
    transform: scale(0.95);
    transform-origin: 51.7% center;
  }

  /* full mobile screen per section for a clean one-section-per-scroll
     feel. these show a fixed-aspect-ratio composite screenshot, so the
     image is centered (justify-content:center, set on the base rule)
     within whatever extra height 100dvh adds beyond the image itself —
     same fix now used consistently across every full-screen section */
  .herd-banner,
  .presence {
    min-height: 100dvh;
  }

  .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;
    /* full mobile screen per section for a clean one-section-per-scroll
       feel (matches the fix already used for .clients) — min-height:auto
       had made this section shorter than the viewport, so the next
       section was already partly visible before the scroll-snap even
       settled. align-items:flex-start (not the default stretch) keeps
       .product-grid sized to its own content within that taller box,
       instead of stretching it and pushing the image down like the
       original min-height:100vh version did */
    min-height: 100dvh;
    align-items: flex-start;
  }

  /* swap the live bg-image + heading markup for the composite screenshot
     supplied for this breakpoint — desktop keeps the live version above */
  .herd-banner-bg,
  .herd-banner-inner {
    display: none;
  }

  .herd-banner-mobile-complete-img {
    display: block;
  }


  .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 .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: 0px 18px 0;
  }

  /* Bio-CNG's copy block only — TMR keeps the shared rule above */
  .product-block--alt .product-copy {
    padding: 17px 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.3rem;
  }

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

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

  .contact {
    /* full mobile screen per section for a clean one-section-per-scroll
       feel — image is centered (justify-content:center, base rule)
       within whatever extra height 100dvh adds, same fix now used
       consistently across every full-screen section */
    min-height: 100dvh;
    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;
  }

  /* .clients-grid's actual content (heading + 4 trust cards) is naturally
     only ~629px tall here — well under a full mobile screen — so forcing
     min-height:100svh stretched the section to fill the viewport, and any
     real-device mismatch in what 100svh actually resolves to let the next
     section's top edge peek in on scroll-snap, same root cause already
     fixed for .herd-banner/.presence/.contact above. min-height:auto made
     it shorter than the screen instead, which was worse — the next
     section was then always partly visible, not just on a mismatch.
     100dvh tracks the real, current visible viewport as the address bar
     shows/hides (unlike svh, which is pinned to the smallest-possible
     estimate), so the section's height should track reality directly
     instead of guessing a fixed value */
  .clients {
    min-height: 100dvh;
    padding: 0;
  }

  .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,
  .trust-grid::after {
    top: 0;
  }

  .trust-rule--bottom-left,
  .trust-rule--bottom-right {
    bottom: 0;
  }

  .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;
    margin-top: 0px;
    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: 23px;
  }

  /* 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;
    margin-top: 25px;
  }

  .about {
    padding: 110px 0 40px;
    flex-direction: column;
    align-items: stretch;
    /* full mobile screen per section for a clean one-section-per-scroll
       feel (matches the fix already used for .clients/.product-block) —
       align-items:stretch here only affects the cross-axis (width, since
       this is flex-direction:column), so raising the height doesn't risk
       the same content-gets-pushed-down issue .product-block had */
    min-height: 100dvh;
  }

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

@media (max-width: 720px) {
  /* swap the live map+pins+text markup for the composite screenshot
     supplied for this breakpoint — desktop keeps the live version above */
  .presence-mobile {
    display: none;
  }

  .presence-mobile-complete-img {
    display: block;
  }

  /* this map renders quite short at mobile widths (a wide panoramic
     shape), too short to fit the text overlaid on top of it without
     colliding with the pins — no font-size shrink could fix that cleanly,
     so on mobile the text stacks in normal flow instead of overlaying it;
     desktop keeps the true overlay since it has plenty of room there.
     the eyebrow+heading need to sit above the map and the country list
     below it, but they're all one .presence-copy block in the markup —
     display:contents drops .presence-copy's own box so its children
     become direct flex items of .presence-map, then order places each
     piece where it needs to go without duplicating any markup/text */
  .presence-overlay {
    display: none;
  }

  .presence-map {
    display: flex;
    flex-direction: column;
  }

  .presence-copy {
    display: contents;
  }

  .presence-line-wrap--eyebrow {
    order: 1;
    justify-content: flex-start;
    margin: 54px 0 20px;
    padding-left: 20px;
  }

  .presence-line-wrap--eyebrow::before {
    display: none;
  }

  .presence-line-wrap--eyebrow .presence-eyebrow-text {
    background: none;
    padding: 0;
  }

  .presence-copy h2 {
    order: 1;
    text-align: left;
    font-size: 2.4rem;
    margin: 0 20px;
  }

  .presence-map img {
    order: 2;
  }

  .presence-line-wrap--countries {
    order: 3;
    margin: 24px 20px 0;
    padding: 14px 0;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
  }

  .presence-line-wrap--countries::before {
    display: none;
  }

  .presence-line-wrap--countries .presence-countries-text {
    background: none;
    padding: 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;
  }

}


/* LEAD FORM MODAL (Request a Site Assessment / Discuss Your Project) */

.lead-form-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lead-form-modal.open {
  display: flex;
}

.lead-form-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 26, .78);
}

.lead-form-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 14px;
  border-top: 3px solid var(--gold);
  background: var(--dark-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.lead-form-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  padding: 4px 8px;
  transition: color .2s var(--ease);
}

.lead-form-modal-close:hover {
  color: var(--gold);
}

/* re-theme the Zoho embedded form to match the site instead of its
   default plain-white look — selectors are scoped to .lead-form-modal-card
   and use !important where Zoho's own inline <style> already does, since
   that inline block loads after style.css in the cascade */
.lead-form-modal-card #crmWebToEntityForm {
  background: transparent !important;
  color: var(--white) !important;
  padding: 46px 34px 34px !important;
}

.lead-form-modal-card .zcwf_title {
  font-size: 0 !important;
  padding: 0 0 30px !important;
  position: relative;
}

.lead-form-modal-card .zcwf_title::before {
  content: 'Get in Touch';
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--white);
}

.lead-form-modal-card .zcwf_col_lab,
.lead-form-modal-card .zcwf_col_lab label {
  color: rgba(255, 255, 255, .75) !important;
  font-family: var(--font-body) !important;
  font-size: .85rem !important;
}

.lead-form-modal-card .zcwf_col_fld input[type=text],
.lead-form-modal-card .zcwf_col_fld_slt {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 6px !important;
  color: var(--white) !important;
  padding: 9px 12px !important;
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  transition: border-color .2s var(--ease);
}

.lead-form-modal-card .zcwf_col_fld input[type=text]:focus,
.lead-form-modal-card .zcwf_col_fld_slt:focus {
  border-color: var(--gold) !important;
  outline: none;
}

.lead-form-modal-card .zcwf_col_fld_slt option {
  color: #1a1a1a;
}

.lead-form-modal-card .formsubmit.zcwf_button {
  background: var(--green-bright) !important;
  color: var(--dark-1) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 28px !important;
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  max-width: none !important;
  transition: filter .2s var(--ease), transform .2s var(--ease);
}

.lead-form-modal-card .formsubmit.zcwf_button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.lead-form-modal-card .zcwf_button[name=reset] {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  color: rgba(255, 255, 255, .75) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-family: var(--font-heading) !important;
  max-width: none !important;
}

/* mobile: the desktop padding/row-spacing pushed the card to its
   max-height:90vh cap, forcing an internal scroll just to reach the
   submit button — this tightens padding and row spacing so the whole
   form reads as a compact card instead of something oversized */
@media (max-width: 600px) {
  .lead-form-modal {
    padding: 14px;
  }

  .lead-form-modal-card {
    max-height: 92vh;
  }

  .lead-form-modal-card #crmWebToEntityForm {
    padding: 34px 20px 20px !important;
  }

  .lead-form-modal-card .zcwf_title {
    padding: 0 0 16px !important;
  }

  .lead-form-modal-card .zcwf_title::before {
    font-size: 1.5rem;
  }

  .lead-form-modal-card .zcwf_row {
    margin: 8px 0 !important;
  }

  .lead-form-modal-card .zcwf_col_lab {
    font-size: .78rem !important;
    margin-top: 0 !important;
  }

  .lead-form-modal-card .zcwf_col_fld input[type=text],
  .lead-form-modal-card .zcwf_col_fld_slt {
    padding: 7px 10px !important;
    font-size: .88rem !important;
  }

  .lead-form-modal-card .formsubmit.zcwf_button,
  .lead-form-modal-card .zcwf_button[name=reset] {
    padding: 8px 20px !important;
    font-size: .88rem !important;
  }
}

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