/* Tablets and laptops (all pages): smaller screens and short screens.
   Loaded in number order by templates/site.php (order matters: later files win). */
/* ===== responsive ===== */
@media (max-width:1180px){
  .nav,.head-cta{display:none}
  .menu-btn{display:block}
  .rail{display:none}
}
@media (max-width:980px){
  .hero-grid,.rv-grid,.about-grid,.bpanel{grid-template-columns:1fr}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{display:contents}
  .hero-copy .kicker{order:1}.hero-copy h1{order:2}.hero-meta{order:3;margin-top:18px}
  .rate-side{order:4;margin-top:10px}
  .hero-copy .lede{order:5}.hero-actions{order:6}
  .pick[aria-selected="true"]{transform:none}
  .bvis{min-height:280px}
}
@media (max-width:640px){
  :root{--head:72px;--wrap:calc(100% - 32px)}
  body{font-size:18px}
  .brand{gap:11px}
  .brand img{width:60px}
  .brand-name{font-size:18px}
  .brand-sub{font-size:12px;margin-top:6px}
  .chapter{border-radius:24px 24px 0 0}
  .ch-in{padding:calc(var(--head) + 36px) 0 64px}
  .c-home .ch-in{padding-top:calc(var(--head) + 20px)}
  .note{width:40%}
  .c-jpy{display:none}
  .c-sgd{right:0;top:40%;--s:38px;--z:20px}.c-myr{left:0;top:48%;--s:32px;--z:20px}
  .note{width:46%}
  .note{width:50%}
  .note-eur{left:-12%;top:0}.note-gbp{right:-12%;top:0}
  .note-myr{left:-12%;bottom:0}.note-usd{right:-12%;bottom:0}
  .orbit{width:320px;height:320px;margin:-160px 0 0 -160px}
  .orbit.o2{display:none}
  .glow{width:420px;height:420px;margin:-210px 0 0 -210px}
  .fl{padding:14px 20px;gap:10px}.fl img{width:32px;height:23px}.fl span{font-size:17px}
  .chip{padding-right:14px}.chip .sym{width:36px;height:36px}
  .pedestal{width:260px;margin-left:-130px}
  .tabs{grid-template-columns:1fr;gap:8px}
  .tab{padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .tab b{margin:0}.tab .status{margin:0 0 0 auto}
  .tab .new{position:static;order:3}
  .tab[aria-selected="true"]{transform:none}
  .binfo{padding:24px 20px}
  .bgrid{grid-template-columns:1fr}
  .qrs,.rv-qr{display:none}
  .values{grid-template-columns:1fr 1fr}
  .faq-cols{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot > div:first-child{grid-column:1/-1}
  .stars svg{width:34px;height:34px}
}
/* phones & small tablets: normal flowing sections (no stacking) */
@media (max-width:820px){
  .chapter{border-radius:26px 26px 0 0;margin-top:-26px}
  .chapter + .anchor + .chapter::after{border-radius:26px 26px 0 0;top:-26px;height:26px}
  .chapter:first-of-type{margin-top:0;border-radius:0}
  .ch-in{min-height:0;justify-content:flex-start;padding:76px 0 84px}
  .ch-in::before{display:none}
  .c-home .ch-in{min-height:100svh;padding:calc(var(--head) + 18px) 0 26px}
  .c-faq .ch-in{padding-bottom:40px}
  .ch-head{margin-bottom:26px}
  .ch-head p{font-size:19px}
  h2{font-size:clamp(30px,8vw,40px)}
  .bvis{min-height:0;aspect-ratio:16/10}
  .bvis .plaque{gap:8px;padding:18px}
  .bvis .plaque img{width:96px}
  .bvis .plaque p{font-size:17px}
  .about-grid{gap:28px}
  .about-foot{grid-template-columns:1fr;gap:18px}
  .c-about h2{max-width:none}
  .city-art{max-width:460px;margin:0 auto;order:-1}
  .rv-grid{gap:26px}
}
@media (max-width:640px){
  .kicker{font-size:12.5px;letter-spacing:.14em;gap:10px;margin-bottom:16px}
  .kicker::before{width:20px}
  .hero-grid h1{font-size:clamp(34px,10vw,44px)}
  .hero-meta{gap:8px 10px}
  .hero-copy .lede{font-size:19px;margin-top:20px}
  .hero-actions{margin-top:24px;gap:10px}
  .hero-actions > .btn,.hero-actions > .gr{flex:1 1 100%}
  .hero-actions .gr > .btn{width:100%}
  .gr-menu{left:0;right:0;min-width:0}
  .c-home .ch-in{min-height:0;padding-bottom:26px}
  .hero-main{padding-bottom:34px}
  .prism{--w:min(214px,58vw);--h:254px}
  .prism-stage,.stage{height:290px}
  .face{padding:15px 16px 13px;border-radius:18px}
  .f-top{gap:10px}
  .f-top img{width:38px;height:27px}
  .f-top b{font-size:26px}
  .f-top small{font-size:11px;margin-top:5px;letter-spacing:.12em;white-space:normal;overflow:visible;line-height:1.25}
  .f-rate{padding:8px 0;gap:4px}
  .f-rate strong{font-size:31px}
  .f-na b{font-size:72px}
  .rb button{padding:9px 11px;font-size:11px;letter-spacing:.1em}
  .rate-side{gap:14px}
  .chips{gap:8px;width:100%;flex-wrap:nowrap}
  .chip{flex:1;justify-content:center;min-height:48px;padding:5px 10px 5px 5px;gap:8px}
  .chip .sym{width:34px;height:34px;font-size:12px}
  .chip b{font-size:15px}
  .tab{padding:12px 14px}
  .binfo .addr{font-size:17.5px}
  .bactions .btn{flex:1 1 auto}
  details.more summary{font-size:11px}
  .rv-grid .picker{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
  .rv-grid .pick{flex-direction:column;justify-content:center;gap:8px;padding:14px 6px;text-align:center;border-radius:18px}
  .rv-grid .pick .sym{width:38px;height:38px}
  .rv-grid .pick .sym svg{width:18px !important;height:18px !important}
  .rv-grid .pick b{font-size:11.5px;letter-spacing:.06em;line-height:1.25}
  .rv-grid .pick small{font-size:13.5px}
  .rv-grid .pick .chev{display:none}
  .rv-grid .pick[aria-selected="true"]{transform:none}
  .rv-steps{font-size:10.5px;gap:8px 14px;margin-top:18px}
  .rv-steps li::before{width:20px;height:20px}
  .rv-card{padding:26px 18px;border-radius:26px}
  .rv-card h3{font-size:26px;margin:10px 0 16px}
  .rv-actions .btn{flex:1 1 100%}
  .about-grid .story p{font-size:19px}
  .values{gap:14px;margin-top:26px}
  .mas{padding:16px}
  .mas .btn{width:100%}
  .qa button{font-size:19px;padding:16px 0}
  .ch-head{max-width:none}
}
/* desktop pages must fit one screen: tighten on shorter laptop screens */
@media (min-width:821px) and (max-height:880px){
  :root{--head:72px}
  .brand img{width:66px}.brand-name{font-size:20px}.brand-sub{font-size:12px;margin-top:7px}
  .chapter:not(.c-home) .ch-in{padding:calc(var(--head) + 8px) 0 24px}
  h2{font-size:clamp(28px,3vw,36px)}
  .ch-head{margin-bottom:14px}.ch-head p{font-size:17px;margin-top:8px}.ch-head p.kicker{margin-bottom:12px}
  .tabs{margin-bottom:12px}.tab{padding:11px 16px}.tab b{font-size:17px;margin-top:5px}.tab .status{margin-top:6px}
  .bvis{min-height:0}.bpanel{align-items:stretch}
  .binfo{padding:18px 22px}.binfo .addr{font-size:18px}.binfo .desc{margin-top:6px;font-size:17px}
  .bgrid{margin-top:10px;padding-top:10px;gap:6px 24px}.bgrid h4{margin-bottom:4px}
  .bactions{margin-top:10px}.qrs{margin-top:10px}.qr img{width:52px;height:52px}
  .more{margin-top:10px}.hours-note{margin-top:8px;font-size:14px}
  .rv-card{padding:24px 28px;border-radius:24px}.rv-card h3{margin:8px 0 12px}.stars{margin-bottom:12px}.stars svg{width:34px;height:34px}
  .rv-actions{margin-top:16px}.rv-qr{margin-top:14px}.rv-qr img{width:68px;height:68px}.rv-grid .picker{margin-top:18px;gap:8px}.pick{padding:10px 16px 10px 10px}.pick .sym{width:48px;height:48px}
  .rv-steps{margin-top:16px}
  .about-grid .story p{font-size:16.5px;margin-top:8px}.mas{margin-top:0;padding:12px 18px}.city-art{max-width:470px;margin:0 auto}.c-about h2{font-size:clamp(26px,2.5vw,34px)}.about-foot{margin-top:16px;padding-top:14px}.values div{padding-top:10px}.values p{font-size:16px}
  .qa button{padding:9px 0;font-size:17.5px}.qa .ans p{font-size:16px}.faq-grid{gap:0 40px}
  .foot{padding-top:24px}
}
@media (min-width:821px) and (min-height:881px) and (max-height:1120px){
  .chapter:not(.c-home) .ch-in{padding:calc(var(--head) + 12px) 0 34px}
  h2{font-size:clamp(32px,3.6vw,46px)}
  .ch-head{margin-bottom:22px}.ch-head p{font-size:18px;margin-top:10px}
  .bvis{min-height:340px}.hours-note{margin-top:10px;font-size:15px}
  .about-grid .story p{font-size:18px;margin-top:12px}
  .qa button{padding:14px 0}.qa .ans p{font-size:17px}
  .tab{padding:14px 18px}.tabs{margin-bottom:16px}
  .binfo{padding:22px 26px}.bgrid{margin-top:14px;padding-top:14px}.bactions{margin-top:14px}.qrs{margin-top:14px}
}