@font-face {
    font-family: 'Mona Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/fontsource/fonts/mona-sans@latest/latin-800-normal.woff2') format('woff2');
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    font-family: 'Mona Sans', 'Segoe UI', Arial, sans-serif;
    background: #eef6ea;
    color: #16321c;
  }

  .pin-wrap {
    position: relative;
    height: 280vh;
    background: #eaf1e7;
  }
  .pin-inner {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden !important;
    clip-path: inset(0);
    background: linear-gradient(180deg, #87CEEB 0%, #eaf1e7 100%);
  }
  .scene {
    position: absolute; top: 50%; left: 50%;
    width: 240vh; min-width: 100vw;
    aspect-ratio: 1920 / 800;
    transform: translate(-50%, -50%);
  }
  @media (max-aspect-ratio: 4/3) {
    .scene {
      width: min(150vw, max(100vw, 150vh));
      min-width: 0;
    }
  }

  /* ===== MOBILE (portrait phones & tablets) =====
     Uses web-png-images.png as the farmer image (tractor + drone are inside it). */
  @media (max-aspect-ratio: 4/5) {
    /* No page "bounce"/stretch when scrolling on phones */
    html, body { overscroll-behavior-y: none; }

    /* >>> MOBILE SCROLL LENGTH <<<
       Shorter = text comes faster and the next section starts right after.
       svh = stable height, does not jump when the phone's address bar hides/shows. */
    /* Bottom colour = same light green as the section below (#eaf1e7),
       so there is no white strip / hard line at the bottom of the hero. */
    .pin-wrap { height: 125vh; height: 125svh; background: #eaf1e7; }
    .pin-inner {
      /* sky -> white -> light green at the bottom */
      background: linear-gradient(180deg, #87CEEB 0%, #dff0f7 30%, #ffffff 55%, #ffffff 78%, #eaf1e7 100%);
    }

    /* >>> MOBILE IMAGE SIZE / POSITION <<< */
    .scene {
      width: min(100vw, 60vh);
      width: min(100vw, 60svh);
      min-width: 0;
      aspect-ratio: auto;
      top: auto;
      bottom: 0;
      transform: translateX(-50%);
    }
    /* Higher specificity so the desktop .scene-bg rule below can't squash the mobile image to 0 height */
    .scene .scene-bg {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
    }

    /* >>> MOBILE TRACTOR & DRONE <<<
       The mobile image (web-png-images.png) already has the tractor and drone
       in it, so the separate moving tractor/drone layers are hidden on mobile
       (otherwise you get 2 tractors). If you switch to a mobile image WITHOUT
       tractor/drone, change "none" to "block" on the next line. */
    .scene .tractor-layer,
    .scene .drone-layer { display: none !important; }

    /* ".scene ..." = stronger rules so the desktop positions further down
       can't override these mobile positions. */
    .scene .tractor-layer { left: 4%; top: 60%; width: 55%;
      transform: translate3d(calc(5% - var(--pT,0) * 15%), calc(var(--bobT,0) * 1px), 0)
                 scale(calc(0.88 + var(--pT,0) * 0.15)); }
    .scene .drone-layer { left: 62%; top: 42%; width: 28%;
      transform: translate3d(calc(var(--p,0) * 10%), calc(var(--p,0) * -90% + var(--bobD,0) * 1px), 0); }

    /* >>> MOBILE CLOUDS <<< */
    /* left: -125% pushes the sun in the clouds picture off-screen on mobile */
    .scene .clouds-layer { width: 260%; left: -125%; top: -60%; }

    /* >>> MOBILE BIRDS <<< */
    .scene .birdA { left: 70%; top: -28%; width: 15%; }
    .scene .birdB { left: 56%; top: -18%; width: 11%; }

    .glow-text {
      left: 0 !important;
      right: 0 !important;
      /* >>> MOBILE TEXT STOP POSITION <<<
         Text stops at 60% of the screen height (measured from the bottom).
         Bigger number = text higher, smaller number = text lower. */
      top: auto !important;
      bottom: 60vh !important;
      bottom: 60svh !important;
      /* Same as desktop: text sits BEHIND the farmer, only the glowing G is in front */
      z-index: 0 !important;
      white-space: normal !important;
      font-size: clamp(34px, 12vw, 64px) !important;
      line-height: 1.05 !important;
      letter-spacing: 0.03em !important;
      padding: 0 16px !important;
      /* >>> MOBILE TEXT RISE DISTANCE <<<
         Starts at the very bottom of the screen and rises up to 60%.
         Keep this number the same as the "bottom" number above. */
      transform: translateY(calc(60vh - var(--pText, 0) * 60vh)) !important;
      transform: translateY(calc(60svh - var(--pText, 0) * 60svh)) !important;
    }
    .glow-text .glow-line { display: block; }

    /* No sun glow behind the "G" on mobile */
    .glow-front .g-hl::before { content: none !important; display: none !important; }
  }

  .scene-bg {
    position: absolute !important; inset: 0;
    width: 100% !important; height: 100% !important;
    max-width: none !important;
    display: block;
    z-index: 1;
  }

  .element {
    position: absolute !important;
    max-width: none !important;
    display: block;
    will-change: transform;
  }

  .clouds-layer { left: 0; top: 0; width: 100%; z-index: 0;
    transform: translate3d(calc(var(--p,0) * 6vw), 0, 0); }

  .tractor-layer { left: 28.729%; top: 55.5%; width: 30%; z-index: 3;
    transform-origin: 50% 100%;
    transform: translate3d(calc(2.5vw + var(--pT,0) * -5.5vw), 0, 0)
               scale(calc(0.88 + var(--pT,0) * 0.15)); }

  .drone-layer { left: 54.167%; top: 58%; width: 13.542%; z-index: 4;
    transform: translate3d(calc(var(--p,0) * 1vw), calc(var(--p,0) * -6vw + var(--bobD,0) * 1px), 0); }

  .birdA { left: 71.417%; top: 21%; width: 9%; z-index: 5;
    transform: translate3d(calc(var(--p,0) * 7vw), calc(var(--p,0) * 4vw + var(--bobA,0) * 1px), 0)
               rotate(calc(var(--p,0) * 6deg))
               scaleX(calc(1 + var(--flapA, 0))); }

  .birdB { left: 66.208%; top: 27%; width: 7%; z-index: 5;
    transform: translate3d(calc(var(--p,0) * 5vw), calc(var(--p,0) * 3vw + var(--bobB,0) * 1px), 0)
               rotate(calc(var(--p,0) * 5deg))
               scaleX(calc(1 + var(--flapB, 0))); }

  .bee-swarm { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .bee {
    position: absolute !important;
    display: block;
    will-change: transform;
    transform-origin: 50% 50%;
  }
  .bee-body {
    position: relative;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    z-index: 1;
  }
  .bee-wing {
    position: absolute;
    z-index: 2;
    border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
    background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(210,235,255,0.35));
    border: 1px solid rgba(120,150,180,0.45);
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
    transform-origin: 50% 100%;
    will-change: transform;
    pointer-events: none;
  }

  .glow-text {
    position: absolute !important;
    left: 0; right: 0;
    /* >>> TEXT STOP POSITION (desktop) <<< */
    top: 32%;
    z-index: 0;
    text-align: center;
    pointer-events: none;
    margin: 0 !important;
    font-family: 'Mona Sans', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(28px, 7.5vw, 130px) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #005424 !important;
    text-shadow:
      0 0 18px rgba(255,255,255,0.9),
      0 0 6px rgba(255,255,255,0.9),
      0 2px 4px rgba(0,0,0,0.25);
    white-space: nowrap;
    padding: 0 12px;
    opacity: calc(0.12 + var(--pText, 0) * 0.88) !important;
    transform: translateY(calc(60vh - var(--pText, 0) * 60vh)) !important;
    visibility: visible !important;
    display: block !important;
    animation: none !important;
  }

  .scene h2.glow-text,
  .scene h2.glow-text span {
    font-family: 'Mona Sans', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    word-spacing: normal !important;
  }
  .scene h2.glow-text {
    font-size: clamp(28px, 7.5vw, 130px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
  }
  @media (max-aspect-ratio: 4/5) {
    .scene h2.glow-text {
      font-size: clamp(34px, 12vw, 64px) !important;
      line-height: 1.05 !important;
      letter-spacing: 0.03em !important;
    }
  }
  .scene h2.glow-text span {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    margin: 0 !important; padding: 0 !important;
  }
  .scene h2.glow-front { z-index: 2 !important; text-shadow: none !important; }
  .glow-front .g-hl {
    color: #17663e !important;
    text-shadow:
      0 0 18px rgba(255,255,255,0.9),
      0 0 6px rgba(255,255,255,0.9),
      0 2px 4px rgba(0,0,0,0.25);
  }
  .glow-front .g-rest { color: transparent !important; }