/* =========================================================
   ĐẢO SỐ — MOBILE ART DIRECTION
   Mobile is composed as its own experience, not a collapsed desktop.
   Target: 320–760px, with special tuning for 320–430px.
   ========================================================= */

@media(max-width:760px){
  :root{
    --mobile-gutter:16px;
    --mobile-radius:18px;
    --mobile-rail-gap:.8rem;
    --mobile-touch:48px;
  }

  .container{
    width:min(var(--max),calc(100% - var(--mobile-gutter) - var(--mobile-gutter)));
  }

  html.nav-open,
  html.nav-open body{
    overflow:hidden;
  }

  /* ---------------------------------------------------------
     MOBILE SHELL — compact command bar + full-height menu panel
     --------------------------------------------------------- */
  .studio-shell-header{
    min-height:64px;
    backdrop-filter:blur(16px) saturate(115%);
  }

  .studio-nav{
    min-height:64px;
  }

  .site-header .studio-brand .studio-brand-mark{
    width:32px;
    height:32px;
    border-radius:9px;
  }

  .site-header .studio-brand .studio-brand-mark img{
    width:23px;
    height:23px;
  }

  .site-header .studio-brand .studio-brand-name{
    font-size:.88rem;
  }

  .site-header .studio-brand .studio-brand-name small{
    font-size:.58rem;
  }

  .studio-nav-toggle{
    width:46px;
    min-width:46px;
    height:42px;
    min-height:42px;
    flex:0 0 46px;
    padding:0!important;
    border-radius:12px;
    position:relative;
  }

  .studio-nav-toggle span{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }

  .studio-nav-toggle i{
    position:relative;
    width:18px;
    height:2px;
    border-radius:999px;
    background:#00f5ff;
    box-shadow:none;
    transition:background .18s ease;
  }

  .studio-nav-toggle i::before,
  .studio-nav-toggle i::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    border-radius:999px;
    background:#f7faff;
    transform-origin:center;
    transition:transform .2s ease,top .2s ease,bottom .2s ease;
  }

  .studio-nav-toggle i::before{top:-6px}
  .studio-nav-toggle i::after{bottom:-6px}

  .studio-nav-toggle[aria-expanded="true"] i{
    background:transparent;
  }

  .studio-nav-toggle[aria-expanded="true"] i::before{
    top:0;
    transform:rotate(45deg);
  }

  .studio-nav-toggle[aria-expanded="true"] i::after{
    bottom:0;
    transform:rotate(-45deg);
  }

  .studio-nav-links{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:auto!important;
    height:calc(100vh - 82px)!important;
    height:calc(100dvh - 82px)!important;
    max-height:calc(100dvh - 82px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:.85rem!important;
    border-radius:20px!important;
    overscroll-behavior:contain;
    z-index:120!important;
  }

  .site-header .studio-nav-links .shell-nav-link{
    min-height:54px;
    padding:.75rem .85rem;
    font-size:.9rem;
  }

  .site-header .studio-nav-links .shell-nav-link>span{
    width:22px;
    font-size:.52rem;
  }

  .shell-audit-cta{
    min-height:70px;
    margin-top:.55rem;
    padding:.8rem .9rem;
  }

  .shell-audit-cta small{font-size:.64rem}
  .shell-audit-cta strong{font-size:.84rem}

  /* ---------------------------------------------------------
     MOBILE CHAPTER RHYTHM
     --------------------------------------------------------- */
  section[data-chapter]:not([data-chapter="hero"]):not([data-chapter="signal"]):not([data-chapter="note"]):not([data-chapter="closing"]){
    padding-top:clamp(4.1rem,14vw,5.4rem)!important;
    padding-bottom:clamp(4.1rem,14vw,5.4rem)!important;
  }

  section[data-chapter]:not([data-chapter="hero"]):not([data-chapter="signal"]):not([data-chapter="closing"]):not([data-chapter="note"])::before{
    top:.78rem;
    right:var(--mobile-gutter);
    opacity:.62;
  }

  section[data-chapter="visual"]::after{
    background-size:34px 34px;
    opacity:.14;
  }

  /* Projects is an app-like gallery: keep its opening stage close to the shell header. */
  body.projects-page main section.project-showcase[data-chapter="visual"]:not([data-chapter="hero"]):not([data-chapter="signal"]):not([data-chapter="note"]):not([data-chapter="closing"]){
    min-height:calc(100svh - 72px)!important;
    padding-top:clamp(2.6rem,8vw,3.25rem)!important;
    padding-bottom:1rem!important;
  }

  /* ---------------------------------------------------------
     HERO SYSTEM — copy first, visual stage second
     --------------------------------------------------------- */
  :where(
    .rest-hero,.stay-hero,.tour-hero,.maps-hero,.qr-hero,
    .about-hero,.pricing-hero,.projects-hero,.audit-hero,
    .privacy-hero,.terms-hero,.solutions-hero
  ){
    padding-top:1.6rem!important;
    padding-bottom:2.8rem!important;
  }

  :where(
    .rest-hero-layout,.stay-hero-layout,.tour-hero-layout,
    .maps-hero-layout,.qr-hero-layout,.about-hero-layout,
    .pricing-hero-layout,.projects-hero-layout,.audit-hero-layout
  ){
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    min-height:auto!important;
  }

  :where(
    .rest-hero-copy,.stay-hero-copy,.tour-hero-copy,.maps-hero-copy,
    .qr-hero-copy,.about-hero-copy,.pricing-hero-copy,.projects-hero-copy,.audit-hero-copy
  ){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }

  :where(
    .rest-hero-copy h1,.stay-hero-copy h1,.tour-hero-copy h1,.maps-hero-copy h1,
    .qr-hero-copy h1,.about-hero-copy h1,.pricing-hero-copy h1,
    .projects-hero-copy h1,.audit-hero-copy h1,
    .privacy-hero h1,.terms-hero h1,.solutions-hero h1
  ){
    max-width:9.2ch!important;
    margin-bottom:.9rem!important;
    font-size:clamp(2.9rem,13.2vw,4.35rem)!important;
  }

  :where(
    .rest-hero-copy .lead,.stay-hero-copy .lead,.tour-hero-copy .lead,.maps-hero-copy .lead,
    .qr-hero-copy .lead,.about-hero-copy .lead,.pricing-hero-copy .lead,
    .projects-hero-copy .lead,.audit-hero-copy .lead
  ){
    max-width:34rem!important;
    font-size:.98rem!important;
    line-height:1.62!important;
  }

  :where(
    .rest-hero-actions,.stay-hero-actions,.tour-hero-actions,.maps-hero-actions,
    .qr-hero-actions,.about-hero-actions,.pricing-hero-actions,
    .projects-hero-actions,.audit-hero-actions
  ){
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:.6rem!important;
    margin-top:1.25rem!important;
  }

  :where(
    .rest-hero-actions,.stay-hero-actions,.tour-hero-actions,.maps-hero-actions,
    .qr-hero-actions,.about-hero-actions,.pricing-hero-actions,
    .projects-hero-actions,.audit-hero-actions
  ) :where(.btn,a){
    min-height:var(--mobile-touch);
  }

  :where(
    .rest-proof-row,.stay-proof-row,.tour-proof-row,.maps-hero-proof,.qr-capability-row,
    .about-proof-row,.pricing-proof-row,.projects-proof-row,.audit-proof-row
  ){
    display:flex!important;
    gap:.55rem!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin-top:1.15rem!important;
    padding:0 var(--mobile-gutter) .2rem 0!important;
    max-width:none!important;
  }

  :where(
    .rest-proof-row,.stay-proof-row,.tour-proof-row,.maps-hero-proof,.qr-capability-row,
    .about-proof-row,.pricing-proof-row,.projects-proof-row,.audit-proof-row
  )::-webkit-scrollbar{display:none}

  :where(
    .rest-proof-row,.stay-proof-row,.tour-proof-row,.maps-hero-proof,.qr-capability-row,
    .about-proof-row,.pricing-proof-row,.projects-proof-row,.audit-proof-row
  )>*{
    flex:0 0 auto;
    min-width:max-content;
    scroll-snap-align:start;
  }

  :where(
    .rest-hero-visual,.stay-hero-visual,.tour-hero-visual,
    .maps-hero-visual,.qr-hero-visual,.audit-hero-visual
  ){
    order:2;
    width:calc(100% + var(--mobile-gutter) + var(--mobile-gutter))!important;
    min-height:clamp(285px,82vw,350px)!important;
    margin:1.5rem calc(0px - var(--mobile-gutter)) 0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }

  .visual-asset-hero,
  .restaurant-solution-page .visual-asset-restaurant,
  .maps-solution-page .visual-asset-maps,
  .qr-solution-page .visual-asset-qr,
  .homestay-solution-page .visual-asset-stay,
  .tourism-solution-page .visual-asset-tour{
    width:108%!important;
    max-width:none!important;
  }

  .visual-asset-hero img{
    border-radius:16px!important;
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.2))!important;
  }

  /* The product screenshot is the hero visual on mobile; remove support scenery. */
  :where(
    .restaurant-radar,.stay-location-field,.tour-route-field,.local-radar,
    .rest-float-card,.stay-float-card,.tour-float-card,.maps-float-card,.qr-float-card,
    .pricing-float-card,.projects-float-card,.audit-float-card
  ){
    display:none!important;
  }

  /* ---------------------------------------------------------
     HOMEPAGE — editorial, not a mini desktop homepage
     --------------------------------------------------------- */
  .visual-home .hero-editorial{
    min-height:auto!important;
    padding:1.35rem 0 3.2rem!important;
  }

  .visual-home .hero-editorial-topline{
    display:block!important;
    margin-bottom:1rem!important;
  }

  .visual-home .hero-editorial-meta{
    display:none!important;
  }

  .visual-home .hero-editorial-headline{
    display:block!important;
  }

  .visual-home .hero-editorial-title{
    font-size:clamp(3.4rem,16.2vw,5rem)!important;
    line-height:1!important;
    letter-spacing:-.027em!important;
  }

  .visual-home .editorial-line,
  .visual-home .editorial-line-b,
  .visual-home .editorial-line-c{
    margin-left:0!important;
    transform:none!important;
  }

  .visual-home .hero-editorial-index{
    display:none!important;
  }

  .visual-home .hero-editorial-deck{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:1.35rem!important;
    margin-top:1.45rem!important;
  }

  .visual-home .hero-editorial-statement{
    justify-self:stretch!important;
    max-width:none!important;
    padding:.85rem 0 0!important;
    border-left:0!important;
    border-top:1px solid rgba(0,245,255,.18)!important;
    border-image:none!important;
  }

  .visual-home .hero-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:.6rem!important;
    margin-top:1.15rem!important;
  }

  .visual-home .hero-actions .btn{
    min-height:var(--mobile-touch);
  }

  .visual-home .growth-runway{
    display:grid!important;
    grid-auto-flow:column;
    grid-auto-columns:min(74vw,270px);
    grid-template-columns:none!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin:2rem calc(0px - var(--mobile-gutter)) 0 0!important;
    padding-right:var(--mobile-gutter);
    scroll-padding-inline-end:var(--mobile-gutter);
    border-bottom:0!important;
  }

  .visual-home .growth-runway::-webkit-scrollbar{display:none}

  .visual-home .growth-runway>*{
    min-height:150px;
    scroll-snap-align:start;
  }

  .visual-home .hero-editorial-footer{
    display:block!important;
    margin-top:1rem!important;
  }

  .visual-home .hero-proof{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .visual-home .hero-proof::-webkit-scrollbar{display:none}

  .visual-home .hero-proof>div{
    min-width:180px;
    scroll-snap-align:start;
  }

  .visual-home .hero-editorial-beam,
  .visual-home .hero-monogram{
    opacity:.16!important;
  }

  /* ---------------------------------------------------------
     MOBILE CARD RAILS — browse instead of endless vertical stacks
     --------------------------------------------------------- */
  :where(
    .restaurant-menu-showcase,
    .rest-deliverable-grid,
    .stay-deliverable-grid,
    .tour-service-grid,
    .tour-deliverable-grid,
    .qr-problem-grid,
    .qr-language-grid,
    .pricing-package-grid,
    .project-vault-grid,
    .solution-industry-grid,
    .solution-deliverables-grid,
    .maps-fit-grid,
    .qr-fit-grid,
    .region-grid
  ){
    display:grid!important;
    grid-auto-flow:column;
    grid-auto-columns:min(82vw,330px);
    grid-template-columns:none!important;
    gap:var(--mobile-rail-gap)!important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:0 var(--mobile-gutter) .55rem 0!important;
    margin-right:calc(0px - var(--mobile-gutter))!important;
    scroll-padding-inline-end:var(--mobile-gutter);
  }

  :where(
    .restaurant-menu-showcase,
    .rest-deliverable-grid,
    .stay-deliverable-grid,
    .tour-service-grid,
    .tour-deliverable-grid,
    .qr-problem-grid,
    .qr-language-grid,
    .pricing-package-grid,
    .project-vault-grid,
    .solution-industry-grid,
    .solution-deliverables-grid,
    .maps-fit-grid,
    .qr-fit-grid,
    .region-grid
  )::-webkit-scrollbar{display:none}

  :where(
    .restaurant-menu-showcase,
    .rest-deliverable-grid,
    .stay-deliverable-grid,
    .tour-service-grid,
    .tour-deliverable-grid,
    .qr-problem-grid,
    .qr-language-grid,
    .pricing-package-grid,
    .project-vault-grid,
    .solution-industry-grid,
    .solution-deliverables-grid,
    .maps-fit-grid,
    .qr-fit-grid,
    .region-grid
  )>*{
    min-width:0!important;
    scroll-snap-align:start;
  }

  .restaurant-menu-showcase .rest-menu-panel,
  .pricing-package-card,
  .project-vault-card{
    min-height:unset!important;
  }

  /* ---------------------------------------------------------
     PROCESS / TIMELINE — swipeable sequence
     --------------------------------------------------------- */
  :where(
    .audit-process-grid,
    .quote-process,
    .project-method-grid,
    .rest-ops-grid,
    .stay-ops-grid,
    .tour-journey-grid,
    .maps-journey-grid
  ){
    display:grid!important;
    grid-auto-flow:column;
    grid-auto-columns:min(78vw,310px);
    grid-template-columns:none!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:0 var(--mobile-gutter) .5rem 0!important;
    margin-right:calc(0px - var(--mobile-gutter))!important;
    scroll-padding-inline-end:var(--mobile-gutter);
    border-right:0!important;
  }

  :where(
    .audit-process-grid,
    .quote-process,
    .project-method-grid,
    .rest-ops-grid,
    .stay-ops-grid,
    .tour-journey-grid,
    .maps-journey-grid
  )::-webkit-scrollbar{display:none}

  :where(
    .audit-process-grid,
    .quote-process,
    .project-method-grid,
    .rest-ops-grid,
    .stay-ops-grid,
    .tour-journey-grid,
    .maps-journey-grid
  )>*{
    min-height:190px!important;
    scroll-snap-align:start;
  }

  /* ---------------------------------------------------------
     PAGE-SPECIFIC MOBILE COMPOSITIONS
     --------------------------------------------------------- */

  /* Pricing hero = compact 2x2 investment matrix */
  .pricing-page .pricing-hero-visual{
    min-height:clamp(285px,82vw,360px)!important;
    overflow:visible!important;
    margin:1.45rem 0 0!important;
    width:100%!important;
  }

  .pricing-page .pricing-stack{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
  }

  .pricing-page .price-chip{
    min-height:126px!important;
    width:auto!important;
    padding:.8rem!important;
  }

  .pricing-page .price-chip strong{
    font-size:1.7rem!important;
  }

  .pricing-page .selector-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .pricing-page .selector-tabs button{
    min-height:58px!important;
  }

  /* Projects hero = compact index, projects section = swipe gallery */
  .projects-page .projects-hero-visual{
    min-height:clamp(285px,82vw,360px)!important;
    overflow:visible!important;
    margin:1.4rem 0 0!important;
    width:100%!important;
  }

  .projects-page .vault-core{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
  }

  .projects-page .vault-center{
    grid-column:1/-1!important;
    min-height:112px!important;
    height:auto!important;
  }

  .projects-page .vault-node{
    min-height:104px!important;
    height:auto!important;
  }

  .projects-page .project-filter-tabs{
    display:flex!important;
    gap:.45rem!important;
    width:calc(100% + var(--mobile-gutter))!important;
    overflow-x:auto;
    scrollbar-width:none;
    padding-right:var(--mobile-gutter);
  }

  .projects-page .project-filter-tabs::-webkit-scrollbar{display:none}

  .projects-page .project-filter-tabs button{
    flex:0 0 auto;
    min-height:44px;
    white-space:nowrap;
  }

  .projects-page .project-filter-tabs button:last-child{
    grid-column:auto!important;
  }

  /* About keeps one concise brand-system illustration on mobile. */
  .about-page .about-hero-visual{
    display:block!important;
    min-height:clamp(285px,82vw,350px)!important;
    overflow:visible!important;
    margin:1.4rem 0 0!important;
    width:100%!important;
  }

  .about-page .about-hero-copy h1{
    max-width:8.5ch!important;
  }

  /* Audit: visual becomes concise; form copy no longer sticky. */
  .audit-page .audit-form-intro{
    position:static!important;
  }

  .audit-page .audit-input-guide{
    grid-template-columns:1fr!important;
  }

  .audit-page .audit-form-shell,
  .audit-page .audit-form-card{
    border-radius:18px!important;
  }

  .audit-page .audit-output-layout,
  .audit-page .audit-form-layout{
    grid-template-columns:1fr!important;
    gap:1.5rem!important;
  }

  /* ---------------------------------------------------------
     TOUCH TARGETS / FORMS
     --------------------------------------------------------- */
  :where(button,.btn,input,select,textarea,summary){
    scroll-margin-top:82px;
  }

  :where(.btn,button,[role="button"]){
    min-height:44px;
  }

  .field input,
  .field select{
    min-height:48px;
  }

  .field textarea{
    min-height:128px;
  }

  /* ---------------------------------------------------------
     FOOTER — shorter, denser mobile closing
     --------------------------------------------------------- */
  .studio-footer-statement{
    padding:4rem 0 3rem!important;
    gap:1.5rem!important;
  }

  html[lang="vi"] .studio-footer .footer-statement-copy h2{
    max-width:10.5ch!important;
    font-size:clamp(2.75rem,13vw,4.4rem)!important;
  }

  .footer-main-cta{
    width:100%;
    max-width:none!important;
    min-height:70px;
  }

  .studio-footer-system{
    gap:2rem!important;
    padding:2.8rem 0!important;
  }

  .footer-column{
    padding-top:.2rem;
  }
}

@media(max-width:430px){
:root{--mobile-gutter:14px}

  :where(
    .rest-hero-actions,.stay-hero-actions,.tour-hero-actions,.maps-hero-actions,
    .qr-hero-actions,.about-hero-actions,.pricing-hero-actions,
    .projects-hero-actions,.audit-hero-actions,
    .visual-home .hero-actions
  ){
    grid-template-columns:1fr!important;
  }

  :where(
    .rest-hero-actions,.stay-hero-actions,.tour-hero-actions,.maps-hero-actions,
    .qr-hero-actions,.about-hero-actions,.pricing-hero-actions,
    .projects-hero-actions,.audit-hero-actions,
    .visual-home .hero-actions
  ) :where(.btn,a){
    width:100%;
  }

  :where(
    .rest-hero-visual,.stay-hero-visual,.tour-hero-visual,
    .maps-hero-visual,.qr-hero-visual,.audit-hero-visual
  ){
    min-height:clamp(265px,80vw,325px)!important;
  }

  .visual-asset-hero,
  .restaurant-solution-page .visual-asset-restaurant,
  .maps-solution-page .visual-asset-maps,
  .qr-solution-page .visual-asset-qr,
  .homestay-solution-page .visual-asset-stay,
  .tourism-solution-page .visual-asset-tour{
    width:112%!important;
  }

  .visual-home .growth-runway{
    grid-auto-columns:min(80vw,280px);
  }

  :where(
    .restaurant-menu-showcase,.rest-deliverable-grid,.stay-deliverable-grid,
    .tour-service-grid,.tour-deliverable-grid,.qr-problem-grid,.qr-language-grid,
    .pricing-package-grid,.project-vault-grid,
    .audit-process-grid,.quote-process,.project-method-grid,.rest-ops-grid,
    .stay-ops-grid,.tour-journey-grid,.maps-journey-grid
  ){
    grid-auto-columns:min(84vw,310px);
  }

  .pricing-page .pricing-stack{
    grid-template-columns:1fr 1fr!important;
  }

  .pricing-page .price-chip{
    min-height:118px!important;
    padding:.68rem!important;
  }

  .pricing-page .price-chip strong{
    font-size:1.5rem!important;
  }

  .studio-nav-links{
    left:8px!important;
    right:8px!important;
    bottom:auto!important;
  }

  .footer-kicker{
    font-size:.66rem!important;
  }

  .footer-system-note{
    font-size:.68rem!important;
  }
}

/* ---------------------------------------------------------
   VISUAL QA — narrow mobile regression pass
   --------------------------------------------------------- */
@media(max-width:430px){
  :where(
    .solution-industry-grid,.solution-deliverables-grid,.maps-fit-grid,.qr-fit-grid,.region-grid
  ){grid-auto-columns:min(84vw,310px)}
  .studio-footer .footer-brand-block>p{display:none}
}

@media(max-width:375px){
  :root{--mobile-gutter:12px}
  .visual-home .hero-editorial-title{
    font-size:clamp(3rem,15.5vw,4.05rem)!important;
    line-height:1.02!important;
  }
  :where(
    .rest-hero-copy h1,.stay-hero-copy h1,.tour-hero-copy h1,.maps-hero-copy h1,
    .qr-hero-copy h1,.about-hero-copy h1,.pricing-hero-copy h1,
    .projects-hero-copy h1,.audit-hero-copy h1,.privacy-hero h1,.terms-hero h1,.solutions-hero h1
  ){
    max-width:10.5ch!important;
    font-size:clamp(2.55rem,13vw,3.35rem)!important;
  }
   .visual-asset-hero,
  .restaurant-solution-page .visual-asset-restaurant,
  .maps-solution-page .visual-asset-maps,
  .qr-solution-page .visual-asset-qr,
  .homestay-solution-page .visual-asset-stay,
  .tourism-solution-page .visual-asset-tour{width:106%!important}

  .visual-home .growth-runway{
    grid-auto-columns:min(84vw,270px);
  }
  :where(
    .restaurant-menu-showcase,.rest-deliverable-grid,.stay-deliverable-grid,
    .tour-service-grid,.tour-deliverable-grid,.qr-problem-grid,.qr-language-grid,
    .pricing-package-grid,.project-vault-grid,.solution-industry-grid,
    .solution-deliverables-grid,.maps-fit-grid,.qr-fit-grid,.region-grid,
    .audit-process-grid,.quote-process,.project-method-grid,.rest-ops-grid,
    .stay-ops-grid,.tour-journey-grid,.maps-journey-grid
  ){
    grid-auto-columns:min(88vw,292px);
  }
  .studio-nav-links{left:6px!important;right:6px!important;bottom:auto!important}
  html[lang="vi"] .studio-footer .footer-statement-copy h2{
    font-size:clamp(2.45rem,12.5vw,3.5rem)!important;
    max-width:11ch!important;
  }
  .studio-footer-system{gap:1.55rem!important;padding:2.25rem 0!important}
}

@media (prefers-reduced-motion:reduce) and (max-width:760px){
  :where(
    .growth-runway,.restaurant-menu-showcase,.rest-deliverable-grid,.stay-deliverable-grid,
    .tour-service-grid,.tour-deliverable-grid,.qr-problem-grid,.qr-language-grid,
    .pricing-package-grid,.project-vault-grid,.solution-industry-grid,.solution-deliverables-grid,
    .maps-fit-grid,.qr-fit-grid,.region-grid,.audit-process-grid,.quote-process,
    .project-method-grid
  ){
    scroll-behavior:auto!important;
  }
}