/* ============================================================
   Pups Takeout Kitchen — responsive safety layer
   Loaded last so page-specific designs keep their personality while
   gaining consistent behavior across phones, tablets, laptops and desktop.
   ============================================================ */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
img,video,canvas,picture{max-width:100%;height:auto}
svg{max-width:100%}
input,select,textarea,button{min-width:0;max-width:100%}
pre,code{max-width:100%;overflow-wrap:anywhere}

/* Grid/flex children are allowed to shrink instead of forcing overflow. */
.wrap,.max-w,.section,.w3-container{width:100%}
.hero-grid>*,.product>*,.steps>*,.lanes>*,.more>*,.g2>*,.g3>*,
.grid>*,.grid-2>*,.grid-3>*,.grid-4>*,.contact-grid>*,.studio-grid>*,
.story-grid>*,.reviews>*,.showcase>*,.menu-grid>*,.frow>*{min-width:0}

/* Long labels, URLs and generated content should never widen the viewport. */
p,li,td,th,.card,.card-flat,.card-panel,.step,.lane,.more-item,
.pcallout,.order-card,.ing-row{overflow-wrap:anywhere}

/* Buttons remain tappable without becoming wider than their container. */
.btn{max-width:100%;white-space:normal;text-align:center}

/* Tables are allowed to scroll locally on compact screens. */
.table-scroll,.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================
   Home page — interactive process / bowl slide
   ============================================================ */
#pupsStory{max-width:100%}
#pupsStory .ps-frame,#pupsStory .ps-track,#pupsStory .ps-slide{min-width:0;max-width:100%}
#pupsStory .ps-slide.ps-bowl .bowl-card{width:100%;max-width:100%}
#pupsStory .ps-bowl-copy{
  width:min(100%,46rem);
  margin:0 auto 14px!important;
  padding-inline:clamp(4px,2vw,16px);
  text-align:center;
}
#pupsStory .ps-bowl-copy p{
  max-width:42ch;
  margin-inline:auto;
  text-wrap:balance;
}
#pupsStory .size-picker{width:100%;max-width:100%;margin-inline:auto}
#pupsStory #sizeSlider{display:block;max-width:100%}
#pupsStory .tier-marks{grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}
#pupsStory .tier-mark{min-width:0;overflow-wrap:normal}
#pupsStory .tier-mark .tm-name{white-space:normal}
#pupsStory .bowl-stage{width:100%;min-width:0}
#pupsStory .bowl-stage svg{width:min(100%,330px);max-width:100%;height:auto}
#pupsStory .bowl-cap,#pupsStory .legend,#pupsStory .example-note,#pupsStory .eye-note{
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
#pupsStory .legend{width:min(100%,44rem);padding-inline:clamp(4px,1.5vw,12px)}
#pupsStory .example-note{
  width:min(100%,43ch);
  margin-top:10px;
  padding-inline:8px;
  text-align:center;
  font-size:13px;
  line-height:1.55;
  color:var(--muted,#988877);
  font-style:italic;
  text-wrap:balance;
}
#pupsStory .eye-note{
  width:min(100%,40ch);
  padding-inline:8px;
  text-wrap:balance;
}

/* ============================================================
   Tablet / compact laptop
   ============================================================ */
@media (max-width:900px){
  .wrap{padding-left:clamp(18px,4vw,28px);padding-right:clamp(18px,4vw,28px)}
  .section{padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px)}
  .section-head{margin-bottom:clamp(32px,6vw,46px)}
  .pcallout{padding:clamp(26px,5vw,36px) clamp(22px,5vw,34px)}
}

/* ============================================================
   Phones / portrait tablets
   ============================================================ */
@media (max-width:640px){
  body{font-size:15px}
  .wrap{padding-left:16px;padding-right:16px}
  .section{padding-left:16px;padding-right:16px}
  .nav{padding-left:16px!important;padding-right:16px!important}
  .hero{padding-top:clamp(28px,8vw,42px)}
  .hero-cta,.why-cta{width:100%}
  .hero-cta .btn,.why-cta .btn{flex:1 1 220px}
  .card,.card-flat,.card-panel{padding:clamp(16px,5vw,20px)}

  #pupsStory .ps-slide{padding:22px 16px 18px}
  #pupsStory .ps-slide.ps-bowl{padding:0}
  #pupsStory .ps-slide.ps-bowl .bowl-card{padding:18px 14px 18px}
  #pupsStory .ps-bowl-copy{margin-bottom:12px!important;padding-inline:4px}
  #pupsStory .ps-bowl-copy h3{font-size:clamp(20px,6vw,24px)}
  #pupsStory .ps-bowl-copy p{font-size:13.5px;line-height:1.5}
  #pupsStory .tier-marks{gap:3px;margin-top:7px}
  #pupsStory .tier-mark{padding:6px 1px;font-size:9.5px;line-height:1.18}
  #pupsStory .tier-mark .tm-name{font-size:10px;line-height:1.15}
  #pupsStory .bowl-stage svg{width:min(100%,285px)}
  #pupsStory .bowl-cap .cap-name{font-size:clamp(20px,6vw,22px)}
  #pupsStory .bowl-cap .cap-soft{font-size:13px}
  #pupsStory .legend{gap:7px 11px;margin-top:12px;padding-inline:2px}
  #pupsStory .legend .lg{font-size:12px;gap:5px}
  #pupsStory .legend .lg .lg-g{font-size:11px}
  #pupsStory .example-note{font-size:12.5px;width:min(100%,38ch);padding-inline:4px}
  #pupsStory .eye-note{font-size:12px;width:min(100%,37ch);padding-inline:4px}
  #pupsStory .ps-nav{width:38px;height:38px}
  #pupsStory .ps-prev{left:6px}
  #pupsStory .ps-next{right:6px}

  /* Form rows and utility flex layouts should stack when they run out of room. */
  .form-actions,.actions,.terms-actions{max-width:100%}
  .ops-sub-actions{max-width:100%}
}

/* Very narrow phones. Keep four size stops aligned with the one slider. */
@media (max-width:390px){
  .wrap,.section{padding-left:13px;padding-right:13px}
  .nav{padding-left:13px!important;padding-right:13px!important}
  #pupsStory .ps-slide.ps-bowl .bowl-card{padding:16px 10px 17px}
  #pupsStory .tier-mark{font-size:9px;padding-inline:0}
  #pupsStory .tier-mark .tm-name{font-size:9px}
  #pupsStory .bowl-stage svg{width:min(100%,260px)}
  #pupsStory .legend{gap:6px 9px}
  #pupsStory .legend .lg{font-size:11.5px}
  #pupsStory .example-note,#pupsStory .eye-note{padding-inline:2px}
}

/* Landscape phone: reduce vertical bulk without shrinking tap targets. */
@media (max-height:520px) and (orientation:landscape){
  section{padding-top:40px;padding-bottom:40px}
  #pupsStory .bowl-stage svg{width:min(100%,245px)}
}


/* ============================================================
   Brand presence — Moose & Magnus deserve to be seen.
   Loaded last, so this wins over per-page nav sizing.
   ============================================================ */
.nav-logo{height:56px}
@media(max-width:860px){.nav-logo{height:44px}}