/* ===========================================================================
   Mobile optimisation — phones only (≤767px)
   ===========================================================================

   Every rule in this file lives inside a max-width media query, so the desktop
   and tablet experience is byte-for-byte unchanged. Nothing is deleted from the
   markup: sections are hidden with CSS, which means reversing any decision here
   is a one-line change and no content is lost.

   Loaded last, after theme-light.css, so it wins on specificity ties.

   Measured on a 375×812 viewport against the live page:
     before   10,949px   13.5 screens of scrolling
     after     8,454px   10.4 screens
     saved     2,495px   23% shorter

   Breakpoint is 767px to match the theme's own phone breakpoint. Tablets
   (768px and up) deliberately keep the full desktop experience.
   ======================================================================== */

@media (max-width: 767px) {

  /* ── Decorative sections removed on phones ─────────────────────────────
     Both are presentation rather than information, and both animate
     continuously or on scroll — the two things that cost the most battery
     on a phone. Nothing stated in either is unique to it. */

  /* The crossed scrolling-text marquee. It animates forever, on and off
     screen, and only repeats words already in the trust-card grid below. */
  .hw-mobile-hide { display: none !important; }

  /* ── Repeating lists trimmed, not removed ──────────────────────────────
     Each of these sections keeps its heading, its styling and its leading
     items. Only the tail is hidden, so the section still reads as itself
     and the page still makes the same argument — just faster. */

  /* Service accordion: 5 panels → 3. Each panel is ~295px on a phone, and
     the horizontal-accordion interaction does not suit touch well past the
     first few. */
  .tt-horizontal-accordion .tt-hac-item:nth-child(n + 4) { display: none !important; }

  /* Trust cards: 8 → 6. The grid is single-column on a phone, so all eight
     cost ~1,690px. Six still fills the point without three extra screens. */
  .tt-avards-list .tt-avlist-item:nth-child(n + 7) { display: none !important; }

  /* Testimonials: 5 → 2.
     This was the single largest section on mobile at 1,990px, because each
     card is pinned and scrubbed by ScrollTrigger and therefore consumes a
     screen of scrolling on its own. Targeting the wrapper's children
     positionally rather than by class is deliberate: GSAP wraps each pinned
     card in a generated .pin-spacer at runtime, so a class selector on the
     card itself would no longer match the element that occupies the height. */
  .tt-sticky-testimonials > *:nth-child(n + 3) { display: none !important; }

  /* ── Animation, toned down ─────────────────────────────────────────────
     Smooth scrolling (Lenis) is already disabled on touch devices by the
     theme, so nothing to do there. What remains worth softening is the
     decorative motion that runs while someone is trying to read. */

  /* Shorter, flatter reveals. The full-distance rise reads as sluggish on a
     small screen where the element is already most of the viewport. */
  .tt-anim-fadeinup,
  .tt-anim-fadein { animation-duration: .35s !important; }

  /* Hover-driven flourishes never fire on touch but still cost a compositor
     layer on some Android browsers. */
  .cursor-alter { transition: none !important; }
}

/* ===========================================================================
   Reduced motion — every screen size
   ===========================================================================
   The theme ships no prefers-reduced-motion support at all. Someone who has
   asked their phone or laptop to stop animating things should not be handed a
   page that ignores it, and for anyone prone to motion sickness a scrubbed,
   pinned, parallaxing page is genuinely unpleasant.

   This only neutralises CSS-driven motion. GSAP animates inline styles and is
   not reachable from a stylesheet, so this is a meaningful improvement rather
   than a complete one — the marquee, transitions and CSS keyframes stop.
   ======================================================================== */

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

  /* The marquee is pure motion with no resting state worth showing. */
  .tt-scrolling-text-crossed { display: none !important; }
}