@media (max-width: 768px), (pointer: coarse) {

      /* ── GPU layer budget ──────────────────────────────────────────────── */
      /* Remove will-change from every slide/panel — too many layers on mobile */
      .tslide,
      .turiya-mobile-panel,
      .turiya-mobile-panel .tmobile-media,
      .turiya-canvas {
        will-change: auto !important;
      }

      /* Promote ONLY the active slide to a layer, not all 7 at once */
      .tslide.is-active,
      .turiya-mobile-panel.is-active {
        will-change: opacity;
      }

      /* ── Backdrop-filter: too expensive on mobile, replace with solid bg ─ */
      .popup-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(10, 10, 10, 0.92) !important;
      }
      .nav-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(10, 10, 10, 0.88) !important;
      }

      /* ── Simplify box-shadows on mobile ──────────────────────────────── */
      .tbox, .tmobile-caption {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
      }

      /* ── Hero fixed-video reveal (reference-site behaviour) ──────────────
         Self-contained: does NOT rely on the base stylesheet's hero sizing.
         The video is FIXED to the viewport (always fully covers it, can never
         collapse to a band or leave a black void). The title sits at the lower
         third. The paragraph + buttons live below the first screen and scroll
         UP over the still-visible fixed video as the user scrolls — exactly
         like "GLAZING SPECIALISTS" rises over the fixed hero in the reference.
         Pure CSS — no JS, no GSAP — native-smooth. */

      /* Scene = scroll runway. Transparent so the fixed video shows through.
         Height is auto: it fits the 100vh stage + the content flow exactly, so
         the belief section follows immediately with no empty video gap. */
      .hero-scroll-scene {
        position: relative !important;
        height: auto !important;
        background: transparent !important;
        overflow: visible !important;
        z-index: 1;
      }

      /* Wrapper no longer sizes/pins anything — it's a transparent passthrough.
         The video inside it is what gets fixed. */
      .hero-scroll-scene .hero-wrapper {
        position: static !important;
        height: auto !important;
        transform: none !important;
        background: transparent !important;
        overflow: visible !important;
      }
      .hero-scroll-scene .hero-wrapper .stage {
        position: relative !important;
        height: 100vh !important;
        height: 100svh !important;
        transform: none !important;
        overflow: visible !important;
      }

      /* VIDEO: fixed to the viewport as the base, then translated UP slowly by
         JS (parallax) so it drifts upward at ~35% of scroll speed — like the
         reference. will-change hints the compositor for smoothness. */
      .hero-scroll-scene .bg-video {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 125vh !important;   /* taller than viewport: room to drift up */
        height: 125svh !important;
        object-fit: cover !important;
        object-position: center top !important;
        z-index: 0 !important;
        margin: 0 !important;
        will-change: transform !important;
        transform: translate3d(0,0,0);
        /* Decorative background: let wheel/touch gestures pass through to the
           #lenis-wrapper scroller so Chrome doesn't trap them on this
           viewport-fixed layer (Chrome-only hero scroll-stuck fix). */
        pointer-events: none !important;
      }

      /* Dark scrim over the video for text legibility (fixed with it) */
      /* .hero-scroll-scene .stage::after {
        content: "";
        position: fixed;
        inset: 0;
        background: linear-gradient(180deg,
                    rgba(0,0,0,0.35) 0%,
                    rgba(0,0,0,0.15) 40%,
                    rgba(0,0,0,0.55) 100%);
        z-index: 0;
        pointer-events: none;
      } */

      /* When the hero has scrolled fully past, JS adds .hero-video-hidden to
         the scene — this removes the fixed video AND its scrim so they can't
         bleed through later sections (founder, reviews, CTA, footer). */
      .hero-scroll-scene.hero-video-hidden .bg-video {
        visibility: hidden !important;
        opacity: 0 !important;
      }
      .hero-scroll-scene.hero-video-hidden .stage::after {
        opacity: 0 !important;
        visibility: hidden !important;
      }

      /* TITLE: pinned to the BOTTOM of the 100vh stage (like "Exceptional
         glazing" in the reference). It scrolls up and away with the stage. */
      .hero-scroll-scene .hero-title {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 6vh !important;          /* sits just above the nav bar */
        bottom: 6svh !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        width: 92% !important;
        max-width: 92% !important;
        text-align: center !important;
        color: #fff !important;
        z-index: 2 !important;
        pointer-events: none;
      }

      /* PARAGRAPH + BUTTONS: begin immediately AFTER the 100vh stage, so on
         first load they are fully below the fold (not visible, not overlapping
         the title). They rise up over the fixed video as the user scrolls —
         like "GLAZING SPECIALISTS" in the reference. A small top padding gives
         a little breathing room after the fold before they appear. */
      .hero-scroll-scene .bottom-right {
        position: relative !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 auto !important;
        padding: 14vh 0 10vh 0 !important;   /* runway before + after content */
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 90% !important;
        max-width: 480px !important;
        text-align: center !important;
        z-index: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }
      .hero-scroll-scene .bottom-right p {
        margin: 0 0 20px 0 !important;
        color: #fff !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        line-height: 1.5;
      }
      .hero-scroll-scene .bottom-right .btn-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
      }

      /* ── Native scroll optimisations ───────────────────────────────────── */
      html, body {
        -webkit-overflow-scrolling: touch;
      }
      /* NOTE: .hero-wrapper is deliberately NOT given translateZ here — a
         transform would create a containing block and break the fixed video. */
      .founder-section,
      .reviews-section {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }

      /* The fixed hero video sits at z-index 0. Everything AFTER the hero must
         paint OVER it as it scrolls up, so the video disappears past the hero.
         Give the belief section an opaque background and a stacking context
         above the video. */
      #belief {
        position: relative !important;
        z-index: 5 !important;
        background: #f4f1ec !important;   /* opaque — hides the fixed video */
      }

      /* Fixed nav chrome must stay above the fixed hero video (z-index 0) */
      .top-green-bar,
      .logo-dropdown,
      .bottom-nav {
        z-index: 60 !important;
      }

      /* ── Force-show all reveal-target content on mobile ──────────────────
         html.js sets these to opacity:0 for desktop scroll reveals.
         On mobile we show them immediately (reference-site behaviour). */
      html.js .founder-content,
      html.js .founder-image-wrapper,
      html.js .founder-card,
      html.js .reviews-header,
      html.js .quote-mark,
      html.js .quote-slider,
      html.js .cta-title,
      html.js .cta-btn-group,
      html.js .footer-content > div {
        opacity: 1 !important;
      }

      /* ── Reduce transition durations on mobile ────────────────────────── */
      .turiya-mobile-panel,
      .tmobile-caption {
        transition-duration: 0.25s !important;
      }

      /* ── Skip rendering work for off-screen heavy sections ──────────────
         content-visibility lets the browser skip layout/paint for sections
         not near the viewport — a large win for scroll smoothness on mobile.
         contain-intrinsic-size reserves space so the scrollbar stays stable. */
      .founder-section,
      .reviews-section,
      .cta-section,
      .site-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 600px;
      }

      /* Hint the compositor to keep scrolling on its own thread and avoid
         expensive repaints of the whole document during momentum scroll. */
      img, video {
        backface-visibility: hidden;
      }
    }

    /* -- Shared hero behaviour across desktop + mobile ----------------------
       Mirrors the reference-site handoff more closely: no desktop pin/scrub,
       fixed video background, natural page scroll, and copy/CTAs living below
       the first screen so they rise over the video. */
    .hero-scroll-scene {
      position: relative !important;
      height: auto !important;
      background: transparent !important;
      overflow: visible !important;
      z-index: 1;
    }

    .hero-scroll-scene .hero-wrapper {
      position: static !important;
      height: auto !important;
      transform: none !important;
      background: transparent !important;
      overflow: visible !important;
    }

    .hero-scroll-scene .hero-wrapper .stage {
      position: relative !important;
      height: 100vh !important;
      height: 100svh !important;
      transform: none !important;
      overflow: visible !important;
    }

    .hero-scroll-scene .bg-video {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 125vh !important;
      height: 125svh !important;
      object-fit: cover !important;
      object-position: center top !important;
      z-index: 0 !important;
      margin: 0 !important;
      will-change: transform !important;
      transform: translate3d(0,0,0);
      /* Decorative background: let wheel/touch gestures pass through to the
         #lenis-wrapper scroller so Chrome doesn't trap them on this
         viewport-fixed layer (Chrome-only hero scroll-stuck fix). */
      pointer-events: none !important;
    }

    /* .hero-scroll-scene .stage::after {
      content: "";
      position: fixed;
      inset: 0;
      background: linear-gradient(180deg,
                  rgba(0,0,0,0.35) 0%,
                  rgba(0,0,0,0.15) 40%,
                  rgba(0,0,0,0.55) 100%);
      z-index: 0;
      pointer-events: none;
    } */

    .hero-scroll-scene.hero-video-hidden .bg-video {
      visibility: hidden !important;
      opacity: 0 !important;
    }

    .hero-scroll-scene.hero-video-hidden .stage::after {
      opacity: 0 !important;
      visibility: hidden !important;
    }

    /* ── Mobile: even out the fixed scrim ────────────────────────────────────
       Placed AFTER the shared rule above (equal specificity) so it wins on
       mobile while leaving the desktop scrim untouched. The shared gradient
       has a bright 15% dip in the middle, so as content scrolls through the
       viewport-fixed scrim the tint appears to change per scroll position.
       Here the darkness is kept consistent top-to-bottom (no bright dip) while
       preserving the bottom/nav darkness (~0.55) so the nav area is unchanged. */
    @media (max-width: 768px), (pointer: coarse) {
      /* Mobile: no scrim/backdrop over the hero video at all. */
      .hero-scroll-scene .stage::after {
        display: none !important;
      }
    }

    .hero-scroll-scene .hero-title {
      position: absolute !important;
      left: 50% !important;
      right: auto !important;
      top: auto !important;
      bottom: 6vh !important;
      bottom: 6svh !important;
      margin: 0 !important;
      transform: translateX(-50%) !important;
      width: 92% !important;
      max-width: 92% !important;
      text-align: center !important;
      color: #fff !important;
      opacity: 1 !important;
      z-index: 2 !important;
      pointer-events: none;
    }

    .hero-scroll-scene .bottom-right {
      position: relative !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      margin: 0 auto !important;
      padding: 14vh 0 10vh 0 !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: 90% !important;
      max-width: 480px !important;
      text-align: center !important;
      z-index: 3 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }

    .hero-scroll-scene .bottom-right p {
      margin: 0 0 20px 0 !important;
      color: #fff !important;
      background: transparent !important;
      padding: 0 !important;
      border-radius: 0 !important;
      line-height: 1.5;
    }

    .hero-scroll-scene .bottom-right .btn-group {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 14px !important;
      width: 100% !important;
    }

    #belief {
      position: relative !important;
      z-index: 5 !important;
      background: #f4f1ec !important;
    }

    .top-green-bar,
    .logo-dropdown,
    .bottom-nav {
      z-index: 60 !important;
    }

    @media (min-width: 769px) and (pointer: fine) {
      .hero-scroll-scene .bottom-right {
        width: min(40vw, 520px) !important;
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: 5vw !important;
        text-align: right !important;
        align-items: flex-end !important;
      }

      .hero-scroll-scene .bottom-right .btn-group {
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        width: auto !important;
        gap: 16px !important;
      }

      .hero-scroll-scene .hero-title {
        bottom: 18vh !important;
        bottom: 18svh !important;
      }
    }

    .top-green-bar,
    .logo-dropdown {
      position: absolute !important;
    }

    .bottom-nav {
      position: fixed !important;
      bottom: max(28px, env(safe-area-inset-bottom)) !important;
      opacity: 1 !important;
      visibility: visible !important;
      z-index: 120 !important;
    }

    /* ── Desktop only: make the hero paragraph readable over the bright video.
       Scoped to pointer:fine + min-width so it can never affect mobile. */
    @media (min-width: 769px) and (pointer: fine) {
      #hero .hero-title,
      .hero-scroll-scene .hero-title {
        text-shadow: 0 2px 10px rgba(0,0,0,0.45) !important;
      }

      #hero .bottom-right p,
      .hero-scroll-scene .bottom-right p {
        color: #ffffff !important;
        text-shadow: 0 1px 6px rgba(0,0,0,0.55) !important;
      }
    }


    /* Mobile hero manual spacing override. */
    @media (max-width: 767px) {
      .hero-scroll-scene .hero-title {
        bottom: 20svh !important;
      }

      .hero-scroll-scene .bottom-right {
        padding: 0vh 0 10vh 0 !important;
      }
    }

    /* ── Hide the hero background poster image (keep the video only) ──────── */
    .hero-scroll-scene .bg-video {
      background: #000 !important;   /* neutral base before video paints */
    }
    /* Suppress the poster frame so only the moving video shows.
       poster attribute is also removed via JS as a belt-and-braces measure. */
    .hero-scroll-scene .bg-video[poster] {
      /* nothing to do in CSS for poster removal; handled in JS */
    }

    /* ── Lenis smooth scroll ─────────────────────────────────────────────── */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    .lenis.lenis-smooth iframe { pointer-events: none; }

    .site-preloader {
      display: none;
    }

    html.js .site-preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #15543d;
      transition: opacity 0.55s ease, visibility 0.55s ease;
    }

    html.js.is-loading body {
      overflow: hidden;
    }

    html.js:not(.is-loading) .site-preloader {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .site-preloader__count {
      display: flex;
      align-items: flex-end;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      line-height: 1;
      user-select: none;
    }

    .site-preloader__num {
      font-size: clamp(72px, 14vw, 160px);
      font-weight: 600;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }

    .site-preloader__pct {
      font-size: clamp(28px, 5vw, 54px);
      font-weight: 400;
      margin-bottom: clamp(8px, 2vw, 22px);
      margin-left: 4px;
      opacity: 0.7;
    }
    @media (min-width: 769px) {
      .turiya-canvas .box-pos-1 {
        top: 14%;
        right: 7.5%;
        bottom: auto;
        left: auto;
        transform: none;
      }

      .turiya-canvas .box-pos-2 {
        top: 15%;
        left: 6.5%;
        right: auto;
        bottom: auto;
        transform: none;
      }

      .turiya-canvas .box-pos-3 {
        top: 44%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
      }

      .turiya-canvas .box-pos-4 {
        top: 66%;
        left: 7.5%;
        right: auto;
        bottom: auto;
        transform: none;
      }

      .turiya-canvas .box-pos-5 {
        top: 75%;
        right: 8.5%;
        bottom: auto;
        left: auto;
        transform: none;
      }
    }