/* Phones (640px and below): app-style layout for all pages.
   Loaded in number order by templates/site.php (order matters: later files win). */
/* ===== MOBILE (≤640px): app-style layout ===== */
@media (max-width:640px){
  :root{--wrap:calc(100% - 28px)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .ch-in{padding:54px 0 58px}
  .c-home .ch-in{padding-top:calc(var(--head) + 14px);padding-bottom:0}
  .hero-main{padding-bottom:26px}
  .ch-head{margin-bottom:18px}.ch-head p{font-size:17.5px;margin-top:10px}
  h2{font-size:clamp(28px,8.2vw,36px);line-height:1.1}
  /* hero */
  .hero-grid h1{font-size:clamp(31px,9.2vw,40px);line-height:1.04}
  .hero-meta{margin-top:14px}
  .hero-copy .lede{display:none}
  .rate-side{order:4;margin-top:16px;gap:12px;width:100%}
  .rb{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;border:1px solid var(--line-soft);background:rgba(4,17,32,.6)}
  .rb > small{display:none}
  .rb button{width:100%;padding:11px 4px;border-radius:10px;border:0;background:transparent;font-size:10.5px;letter-spacing:.06em;white-space:normal;line-height:1.2}
  .rb button[aria-selected="true"]{transform:none}
  .prism-stage,.stage{height:300px}
  .prism{--w:min(272px,74vw);--h:284px}
  .face{padding:16px 18px 14px;border-radius:20px}
  .f-top img{width:42px;height:30px}.f-top b{font-size:28px}
  .f-rate strong{font-size:36px}.f-na b{font-size:80px}
  .note{width:44%}
  .note-eur{left:-16%;top:-2%}.note-gbp{right:-16%;top:-2%}
  .note-myr{left:-16%;bottom:-2%}.note-usd{right:-16%;bottom:-2%}
  .chips{gap:6px}.chip{min-height:50px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .hero-actions > .btn,.hero-actions > .gr{flex:none;width:100%}
  .hero-actions .btn{min-height:48px;padding:0 8px;font-size:10.5px;letter-spacing:.06em;gap:6px}
  .hero-actions .gr .btn svg{width:14px;height:14px}
  /* branches: 3 compact tiles, then photo and info */
  .tabs{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
  .tab{display:grid;gap:5px;padding:12px 10px 11px;border-radius:16px;text-align:center;justify-items:center;align-content:start;min-height:84px}
  .tab small{font-size:10px;letter-spacing:.12em}
  .tab b{font-size:14.5px;line-height:1.15;letter-spacing:.03em}
  .tab .status{font-size:9.5px;letter-spacing:.06em;margin:2px 0 0;white-space:normal;text-align:center;line-height:1.3}
  .tab .status::before{width:6px;height:6px}
  .tab .new{position:absolute;top:-8px;right:-4px;order:0;font-size:9px;padding:4px 6px}
  .bpanel{gap:12px}
  .bvis{aspect-ratio:16/11;border-radius:20px}
  .bvis .cap{font-size:13.5px}
  .binfo{padding:18px 16px;border-radius:20px}
  .binfo .addr{font-size:17px}.binfo .desc{font-size:16.5px;margin-top:8px}
  .bgrid{grid-template-columns:1fr;gap:12px;margin-top:14px;padding-top:14px}
  .hrow span{white-space:nowrap}
  .bgrid h4{font-size:10.5px}.hrow{font-size:15.5px}.bgrid a,.bgrid p{font-size:16px}
  .bactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .bactions .btn{min-height:44px;padding:0 8px;font-size:10.5px;letter-spacing:.08em}
  .bactions .btn:first-child{grid-column:1/-1}
  .hours-note{font-size:14.5px;margin-top:12px}
  /* reviews */
  .rv-grid .picker{gap:8px;margin-top:18px}
  .rv-grid .pick{padding:12px 6px;min-height:84px;border-radius:16px}
  .rv-card{padding:24px 16px;border-radius:22px}
  .rv-card h3{font-size:24px}
  .stars{gap:6px}.stars svg{width:30px;height:30px}
  .rv-card p{font-size:16.5px}
  /* about / faq */
  .about-grid{gap:20px}.city-art{max-width:300px}
  .about-grid .story p{font-size:17.5px}
  .values{gap:12px;margin-top:20px}.values h3{font-size:12px}.values p{font-size:16px}
  .mas{padding:14px;gap:10px 14px}.mas p{font-size:15.5px}
  .qa button{font-size:17px;padding:14px 0}.qa .ans p{font-size:16px}
  .foot{gap:22px}
  /* fixed quick-contact bar for the selected branch */
  .mbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:4px;border-radius:18px;
    border:1px solid rgba(226,189,120,.4);background:rgba(8,29,46,.92);box-shadow:0 18px 40px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);animation:barIn .5s var(--ease)}
  .mbar[hidden]{display:none}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:14px;text-decoration:none;color:var(--ivory);font:700 11px/1 var(--serif);letter-spacing:.1em}
  .mbar a svg{width:18px;height:18px;color:var(--gold)}
  .mbar a:first-child{background:linear-gradient(180deg,#fff1c8,var(--gold) 60%,var(--gold-lo));color:#1b1206}
  .mbar a:first-child svg{color:#1b1206}
  @keyframes barIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (max-width:640px) and (max-height:700px){
  .prism-stage,.stage{height:270px}.prism{--w:min(250px,70vw);--h:264px}
}