/* Phase 1 of the 2026-10-06 review (loaded last). Each block is one item, so any of them can be dropped on its own. */

/* Tap targets: at least 44px tall on touch screens, without changing how things look. */
@media (max-width:700px),(pointer:coarse){
 header .brand,#language-toggle,#menu,#play,#reel-sound,#reel-close,.project-watch,.contact-email{min-height:44px}
 #ambient-toggle{min-width:44px}
 .contact-phone,.reel-base a,footer a[href="#home"]{display:inline-flex;align-items:center;min-height:44px}
 #scrub{padding-block:10px;box-sizing:content-box}
}
 @media (max-width:700px),(pointer:coarse){.reel-base{min-height:44px}.reel-base a{min-height:44px!important;height:auto!important}}

/* Cleaner hero: no floating buttons over the M. Clicking or tapping the M breaks it apart; the header's motion
   switch still pauses everything. */
.hero .particle-art .art-caption,#scatter,#motion-toggle{display:none!important}
.hero .particle-art canvas{cursor:pointer}

/* Sticky bar on phones (mobile-cta.js): Start a project + WhatsApp, between the hero and the contact section. */
.mobile-cta{display:none}
@media (max-width:700px){
 .mobile-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:8px;padding:6px;border:1px solid #ffffff1f;border-radius:999px;background:#0b0910e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 36px #000a;transform:translateY(calc(100% + 24px));opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease}
 .mobile-cta.is-on{transform:none;opacity:1}
 .mobile-cta a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:999px;font:600 14px/1 Inter,Alexandria,sans-serif;color:#fff;text-decoration:none}
 .mobile-cta-start{flex:1;background:#8052ff}
 .mobile-cta-wa{padding-inline:16px 18px;border:1px solid #ffffff2e}
 .mobile-cta-wa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
 html[lang=ar] .mobile-cta a{font-family:Alexandria,sans-serif}
 html.moe-intro .mobile-cta{visibility:hidden}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.mobile-cta{transition:none}}

/* Arabic project names (i18n-v2.js): the English name stays as a small line under the Arabic one. */
.project summary .pt-en{display:block;margin-top:5px;font:400 .62em/1.2 Inter,sans-serif;letter-spacing:.02em;opacity:.55;text-transform:none}

/* Keep "MOE STUDIOS" on one line in the phone nav bar now that Inter is self-hosted and always loads. */
.brand>span:last-child{white-space:nowrap}
@media (max-width:380px){html body>header{padding-inline:18px;gap:10px}header .brand{font-size:14px;gap:9px}header .brand .mark{width:28px}}