/* ==========================================================================
   Mobile layout
   ==========================================================================
   The desktop build is a fixed 1280px stage of absolutely-positioned parts.
   Below the breakpoint that stage is dissolved into normal flow: sections
   stack, media goes full-bleed and type steps up to phone sizes — the live
   site reflows rather than shrinking, so this does the same.

   Inline styles carry the desktop geometry, so these overrides need
   !important to win. Text blocks are tagged with mh-* role classes.
   ========================================================================== */

@media (max-width: 900px) {

  /* ---- dissolve the scaled stage ---- */
  .stage-wrap{overflow:visible !important; height:auto !important; margin-top:56px}
  .stage-wrap.solo{margin-top:0}
  .stage{width:100% !important; height:auto !important; transform:none !important}

  /* ---- sections become stacked blocks ---- */
  .sec{
    position:relative !important;
    left:auto !important; top:auto !important;
    width:100% !important; height:auto !important;
    display:flex; flex-direction:column; align-items:center;
    padding:52px 18px; overflow:hidden;
  }

  /* ---- full-bleed background art sits behind everything ---- */
  .frame.bg{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    z-index:0; pointer-events:none;
  }
  .frame.bg img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; object-fit:cover;
  }
  .sec > *:not(.frame.bg){position:relative; z-index:1}

  /* ---- content media ---- */
  .frame:not(.bg){
    position:relative !important;
    left:auto !important; top:auto !important;
    width:100% !important; max-width:520px; height:auto !important;
    aspect-ratio:4/3; margin:0 auto 22px;
  }
  .frame:not(.bg) img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; object-fit:cover;
  }

  .el{position:relative !important; left:auto !important; top:auto !important; margin:0 auto 16px}
  img.el{width:auto !important; height:auto !important; max-width:76px}

  /* decorative colour blocks are desktop-only ornament */
  .box{display:none !important}

  /* ---- text roles ---- */
  .t{
    position:relative !important;
    left:auto !important; top:auto !important;
    width:100% !important; max-width:560px;
    text-align:center !important;
    white-space:normal !important;
    letter-spacing:normal !important;
    line-height:1.32 !important;
    margin:0 auto;
  }
  .mh-kicker{font-size:18px !important; margin-bottom:10px}
  .mh-kicker2{font-size:24px !important; line-height:1.2 !important}
  .mh-title{font-size:32px !important; line-height:1.16 !important; margin-bottom:6px}
  .mh-sub{font-size:24px !important; line-height:1.25 !important; margin-bottom:12px}
  .mh-body{font-size:17px !important; line-height:1.52 !important; margin-bottom:16px}
  .mh-left{text-align:left !important}
  .mh-note{font-size:20px !important}

  /* ---- buttons ---- */
  .btn-row{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:12px; width:100%; max-width:420px; margin:6px auto 0;
  }
  .btn{
    position:relative !important;
    left:auto !important; top:auto !important;
    width:auto !important; min-width:200px; height:auto !important;
    padding:15px 26px; margin:6px auto 0;
    font-size:15px !important; line-height:1 !important;
  }
  .btn-row .btn{flex:1 1 0; min-width:0; margin:0; padding:15px 10px}

  /* ---- nav ---- */
  .nav{height:56px}
  .nav ul{top:56px}

  /* ======================= HERO ======================= */
  #home{min-height:calc(100svh - 56px); justify-content:center; padding:56px 18px 50px}
  /* keep the desktop crop — the frame shows the wordmark only, not the
     red sub-line, which is already spelled out by the kicker below it */
  #home .frame:not(.bg){
    width:80% !important; max-width:310px;
    aspect-ratio:368.1/111.9; height:auto !important; margin-bottom:14px; overflow:hidden;
  }
  #home .frame:not(.bg) img{
    position:absolute !important; inset:auto !important;
    left:-13.4% !important; top:-21.5% !important;
    width:127.8% !important; height:auto !important; object-fit:contain;
  }
  #home .mh-title{font-size:36px !important; line-height:1.14 !important; margin-bottom:0}
  #home .mh-title + .mh-title{margin-bottom:24px}
  #home img.el{max-width:22px; margin:26px auto 8px}

  /* ======================= ABOUT ======================= */
  /* nth-of-type counts every sibling div, so: 1 = bg, 2 = interior,
     3 = the red block (hidden), 4 = the dish shot */
  #about .frame:not(.bg):nth-of-type(2){margin-bottom:0}
  #about .frame:not(.bg):nth-of-type(4){
    width:60% !important; max-width:250px; aspect-ratio:2/3;
    margin:-56px auto 26px; border:5px solid #000; position:relative; z-index:2;
  }
  #about img.el{max-width:270px; margin:0 auto 18px}

  /* ======================= CHEF ======================= */
  #chef .frame:not(.bg){aspect-ratio:1/1}

  /* ======================= FOLLOW US ======================= */
  .sec:has(> a[href*="instagram"]){
    flex-direction:row; flex-wrap:wrap; justify-content:center;
    align-items:center; gap:16px; padding:30px 18px;
  }
  .mh-inline{width:auto !important; font-size:22px !important; margin:0}
  a.el{margin:0}
  a.el img{width:30px !important; height:30px !important}
  a.el[href*="facebook"] img{width:15px !important}

  /* ======================= STORES BAND ======================= */
  #contact{padding:36px 18px}
  #contact .frame:not(.bg){
    width:62% !important; max-width:215px;
    aspect-ratio:189/92.6; height:auto !important; margin-bottom:18px; overflow:hidden;
  }
  #contact .frame:not(.bg) img{
    position:absolute !important; inset:auto !important;
    left:-13.8% !important; top:0 !important;
    width:128.3% !important; height:auto !important; object-fit:contain;
  }

  /* ======================= FOOTER ======================= */
  #site-footer{
    flex-direction:row; flex-wrap:wrap; justify-content:center;
    align-items:baseline; gap:4px 7px; padding:28px 18px 34px;
  }
  #site-footer .t{width:auto !important; max-width:none; font-size:13px !important; line-height:1.5 !important}
  #site-footer .frame{
    position:relative !important; width:108px !important; height:20px !important;
    aspect-ratio:auto; flex:0 0 100%; margin:10px auto 0; overflow:visible;
  }
  #site-footer .frame img{
    position:relative !important; inset:auto !important;
    display:block; width:108px !important; height:40px !important;
    margin:-10px auto 0; object-fit:contain;
  }

  /* ======================= API CONTACT CARDS ======================= */
  .api-contact{padding:44px 18px 40px}
  .api-contact .api-title,
  .api-contact .api-sub{
    position:relative !important; left:auto !important; top:auto !important;
    width:100% !important;
  }
  .api-contact .api-title{font-size:30px !important; line-height:1.2 !important; margin-bottom:2px}
  .api-contact .api-sub{font-size:23px !important; line-height:1.3 !important; margin-bottom:22px}
  .api-card{
    position:relative !important; left:auto !important; top:auto !important;
    width:100% !important; max-width:520px; margin:0 auto 18px; padding:20px 18px 22px;
  }
  .api-card h3{font-size:21px}
  .api-line{font-size:15.5px; line-height:22px}
  .api-line .lbl{flex-basis:58px; font-size:11.5px}
  .hours-row{font-size:14.5px; line-height:21px}
  .api-actions{flex-direction:column; gap:9px}
  .api-btn{height:46px; font-size:14px}

  /* ======================= SUB-PAGES ======================= */
  .stage-wrap.solo .sec{min-height:100svh; justify-content:center}
  .stage-wrap.solo .sec + .sec{min-height:0}

  /* stores: store cards */
  .card{
    position:relative !important; left:auto !important; top:auto !important;
    width:100% !important; max-width:330px; height:auto !important; margin:0 auto 20px;
  }
  .card .plate{
    position:relative !important; left:auto !important; top:auto !important;
    display:block; width:100% !important; height:118px !important;
  }
  .card .frame{
    position:absolute !important;
    left:50% !important; top:33px !important; transform:translateX(-50%);
    width:170px !important; height:52px !important; aspect-ratio:auto; margin:0; overflow:hidden;
  }
  .card .frame img{
    position:absolute !important; inset:auto !important;
    left:-23px !important; top:-11px !important;
    width:218px !important; height:83px !important; object-fit:contain;
  }
  .card .bar{
    position:relative !important; left:auto !important; top:auto !important;
    display:block; width:100% !important; height:52px !important;
  }
  .card .t{
    position:absolute !important;
    left:0 !important; right:0; top:auto !important; bottom:15px;
    width:100% !important; max-width:none; font-size:17px !important;
  }
  .card img[src*="chevron"]{
    position:absolute !important;
    left:auto !important; right:18px !important; bottom:19px !important; top:auto !important;
  }

  /* booking / ordering store buttons */
  .btn-row > a[style*="border:2px solid"],
  .btn-row > a[style*="background:#fafafb"]{
    position:relative !important; left:auto !important; top:auto !important;
    width:100% !important; max-width:300px; height:52px !important;
    display:flex !important; align-items:center; justify-content:center; margin:0 auto;
  }
  .btn-row > a > .t{position:static !important; width:auto !important; font-size:16px !important}
  .stage-wrap.solo .btn-row{flex-direction:column; align-items:center; gap:12px; max-width:320px}
}

/* very small phones */
@media (max-width: 380px) {
  #home .mh-title{font-size:31px !important}
  .mh-title{font-size:27px !important}
  .btn-row .btn{font-size:13.5px !important; padding:14px 8px}
}