/* ============================================================
   MOBILE OPTIMIZATION — shared, loaded last so it overrides.
   Keeps every animation intact; only fixes touch + small-screen.
   ============================================================ */

/* never allow sideways scroll, kill the blue tap flash.
   NOTE: must be `clip`, not `hidden` — `hidden` on one axis forces the other
   axis to compute as `auto`, turning <html> into a scroll container and
   breaking window.scrollY (which the hero scroll-expansion depends on). */
html{overflow-x:clip;}
body{overflow-x:clip;}
*{-webkit-tap-highlight-color:rgba(181,98,60,.12);}
img,video,svg,image-slot{max-width:100%;}

/* ---- TOUCH DEVICES: neutralise hover-only states so nothing
        gets "stuck" once a finger lifts ---- */
@media(hover:none){
  /* SMM mosaic: keep every tile bright & flat (hover zoom/dim is desktop-only) */
  .smm-mosaic:hover .smm-tile.in{opacity:1;}
  .smm-tile.in:hover{opacity:1!important;transform:scale(1) rotate(0deg);z-index:auto;
    box-shadow:0 14px 30px -24px rgba(36,31,26,.5);}
  /* image zooms reset */
  .sb-big:hover img,.sb-cell:hover img,.pg-item:hover img,.ss-item:hover img,
  .m-item:hover img,.cf-card:hover img{transform:none;}
  /* button micro-lifts off */
  .site-btn:hover{transform:none;}
  .slot:hover{transform:none;}
}

/* ============ ≤760px ============ */
@media(max-width:760px){
  .wrap{padding-left:18px;padding-right:18px;}

  /* revolving reels: shrink the screen so neighbours peek & it fits tall phones */
  .reel-flow{height:min(132vw,560px);}
  .rf-card{width:60vw;margin-left:-30vw;margin-top:calc(-30vw * 16 / 9);}
  .rf-prev{left:2px;} .rf-next{right:2px;}
  .cf-arrow{width:44px;height:44px;}

  /* social bento: big image keeps a sensible height */
  .smm-bento .sb-big{aspect-ratio:1;}

  /* footer tool coins a touch smaller, names tidy */
  .foot-tools .tool-tile{width:96px;}

  /* calendar tap targets */
  .cal-nav{width:44px;height:44px;}
  .cal-day{font-size:14px;}
  .slots-list{grid-template-columns:repeat(2,1fr);}

  /* TESTIMONIALS: show all 3 columns, shrink cards so they fit */
  .mq-hide-sm{display:flex!important;}
  .marquee3d{gap:10px;height:clamp(420px,120vw,560px);
    transform:perspective(1100px) rotateX(12deg) rotateZ(-4deg);}
  .mq-col{width:clamp(118px,30vw,168px);gap:14px;}
  .mq-col .mq-inner{gap:14px;}
  .mq-card{padding:15px 14px;border-radius:15px;}
  .mq-card .q{font-size:12.5px;line-height:1.36;margin:0 0 12px;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;}
  .mq-av{width:30px;height:30px;font-size:13px;}
  .mq-card .nm{font-size:12px;} .mq-card .rl{font-size:10.5px;}
  .mq-card .stars{font-size:10px;margin-top:9px;letter-spacing:1.5px;}
}

/* ============ ≤480px ============ */
@media(max-width:480px){
  .wrap{padding-left:16px;padding-right:16px;}

  /* hero word-pair stays on one line, never clips */
  .hero-titles{gap:.12em;}

  /* revolving reels a bit taller-proportioned on narrow phones */
  .reel-flow{height:min(150vw,520px);}
  .rf-card{width:64vw;margin-left:-32vw;margin-top:calc(-32vw * 16 / 9);}

  /* site-visit buttons full width, easy to tap */
  .site-btns{grid-template-columns:1fr;}
  .site-btn{padding:16px 18px;}

  /* booking slots single column for big tap targets */
  .slots-list{grid-template-columns:1fr;}

  /* mobile menu links never overflow */
  .mobile-menu a{font-size:clamp(30px,9vw,46px);}
}

/* respect reduced motion: stop the looping marquees & auto-spin feel */
@media(prefers-reduced-motion:reduce){
  .bm-row,.tool-track{animation:none!important;}
}