/* Mobile layer: shared by all four homepages (he / en / ar / ro). Phones only. */
@media (max-width:767px){
  /* shorter story: the reel and the journey take fewer screens */
  .beat{height:92svh}
  .step{min-height:auto;padding-block:30px}

  /* swipe carousels instead of long stacks */
  .m-car{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:84%;gap:12px!important;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-car::-webkit-scrollbar{display:none}
  .m-car>*{scroll-snap-align:center;min-width:0;grid-column:auto!important;grid-row:auto!important}
  .m-car.m-car--wide{grid-auto-columns:88%}
  .m-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .m-dots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.22);transition:width .35s cubic-bezier(.2,.7,.2,1),background .35s}
  .m-dots i.on{width:22px;background:var(--blue,#468AC7)}

  /* site plan: villas big enough to tap (≥ 44px) */
  .plan .map{width:1900px}
  .dl{min-height:44px;display:inline-flex;align-items:center}

  /* contact bar steps aside while reading down, returns on the way up */
  .mbar{transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
  body.m-down .mbar{transform:translateY(110%)}

  /* bottom sheets: lead form and plans viewer slide up from the thumb zone */
  .lead{place-items:end center!important;padding:0!important}
  .lead__box{width:100%!important;max-height:92svh!important;border-radius:24px 24px 0 0;padding-top:34px!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;transform:translateY(100%)!important;transition:transform .24s cubic-bezier(.23,1,.32,1)!important}
  .lead.open .lead__box{transform:translateY(var(--m-drag,0px))!important;transition:transform .42s cubic-bezier(.32,.72,0,1)!important}   /* 05.10: drawer curve in, faster out */
  .lead__box::before,.m-sheet::before{content:"";position:absolute;top:10px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(255,255,255,.28)}

  /* section reveal (added by script only, so content never hides without it) */
  .m-rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .m-rv.in{opacity:1;transform:none}

  /* floating chapter pill, Apple-style local nav */
  .m-pill{position:fixed;z-index:44;left:50%;top:calc(76px + env(safe-area-inset-top,0px));transform:translate(-50%,-12px);opacity:0;pointer-events:none;
    display:flex;align-items:center;gap:10px;max-width:calc(100% - 140px);padding:8px 14px 8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
    background:rgba(9,9,9,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);color:#fff;font:600 15.5px/1.2 var(--f);
    transition:opacity .4s,transform .4s;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  body.m-past .m-pill{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  body.m-down .m-pill{opacity:0;transform:translate(-50%,-12px);pointer-events:none}
  body.nav-open .m-pill,body.m-sheet-open .m-pill{opacity:0;pointer-events:none}
  .m-pill svg{flex:none;width:22px;height:22px;transform:rotate(-90deg)}
  .m-pill circle{fill:none;stroke-width:3}
  .m-pill .bg{stroke:rgba(255,255,255,.18)}.m-pill .fg{stroke:var(--blue,#468AC7);stroke-linecap:round;transition:stroke-dashoffset .3s}
  .m-pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-pill b{flex:none;font:500 13px var(--num,inherit);color:var(--faint,#9BA2AA)}

  /* chapters sheet */
  .m-scrim{position:fixed;inset:0;z-index:61;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .35s}
  body.m-sheet-open .m-scrim{opacity:1;pointer-events:auto}
  .m-sheet{position:fixed;z-index:62;left:0;right:0;bottom:0;max-height:78svh;overflow:auto;padding:30px var(--gut) calc(20px + env(safe-area-inset-bottom,0px));
    border-radius:24px 24px 0 0;background:#141414;border-top:1px solid rgba(255,255,255,.12);transform:translateY(105%);transition:transform .24s cubic-bezier(.23,1,.32,1)}
  body.m-sheet-open .m-sheet{transform:translateY(var(--m-drag,0px));transition:transform .42s cubic-bezier(.32,.72,0,1)}
  .m-sheet h3{font-size:15.5px;font-weight:600;color:var(--faint,#9BA2AA);letter-spacing:.04em;margin-bottom:8px}
  .m-sheet ol{list-style:none;display:grid;gap:2px}
  .m-sheet a{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;min-height:50px;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.07);
    text-decoration:none;color:#E9ECEF;font-size:18px;line-height:1.3}
  .m-sheet a i{font:500 13px var(--num,inherit);font-style:normal;color:var(--faint,#9BA2AA)}
  .m-sheet a.on{color:#fff}.m-sheet a.on i{color:var(--blue,#468AC7)}

  /* press feedback on everything tappable */
  .btn,.type,.nav__c,.m-sheet a,.mbar a,.q,.school,.quote{-webkit-tap-highlight-color:transparent}
  .btn:active,.nav__c:active,.mbar a:active,.school:active{transform:scale(.97);transition:transform .12s}

  /* 04.10 audit at 375px: nothing readable under 14px, every footer link a 44px tap target (sizes only go up) */
  .kick{font-size:15px!important;letter-spacing:.18em}
  .mark__s,.mark__n,.model__t,.foot__geo,.bm__legend span{font-size:15px!important}
  .hstat__c b,.num small,h3 small,.jhead small,.wrap small,.bm__lab b,.bm__sitelab span,.bm__shield,.u b.num{font-size:14px!important}
  .foot__cr,.foot__cr b,.foot__cr3{font-size:14px!important}
  .bm__facts span,.turn small{font-size:14.5px!important}
  .foot__l a,.foot__ck{display:inline-flex;align-items:center;min-height:44px}
  .phone a,.phone .num{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .m-rv{opacity:1;transform:none;transition:none}
  .lead__box,.m-sheet,.m-pill,.mbar{transition:none!important}
}

/* guard: the pill and sheet are built once at load; if the frame later grows past phone width, hide them instead of leaving a bare list */
@media (min-width:768px){.m-pill,.m-scrim,.m-sheet,.m-dots{display:none!important}}