/* ————————————————————————————————————————
   SIP N’ CRUNCH — loud, hot and sweet.
   Design language after cravburgers.shop:
   cream base · red + amber · Modak sticker type · Mouse Memoirs
   ———————————————————————————————————————— */

:root{
  --cream:  #F5E3CD;
  --cream-2:#FFF6E8;
  --red:    #F91814;
  --red-2:  #D90F0B;
  --amber:  #F4A804;
  --sun:    #FFD34D;
  --ink:    #1B1B1B;
  --maroon: #4C0016;

  --font-display: "Modak", system-ui, sans-serif;
  --font-body:    "Mouse Memoirs", "Arial Narrow", sans-serif;

  --pad-x: clamp(1.25rem, 5vw, 5rem);

  /* white sticker outline for display type */
  --stroke: var(--cream-2);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.35rem;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--amber); color:var(--ink); }

a{ color:inherit; }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:2px; }

section[id], #reserve{ scroll-margin-top:5.5rem; }

/* sticker outline via layered text-shadow (works everywhere) */
.sticker-text{
  text-shadow:
    .045em 0 0 var(--stroke), -.045em 0 0 var(--stroke),
    0 .045em 0 var(--stroke), 0 -.045em 0 var(--stroke),
    .032em .032em 0 var(--stroke), -.032em .032em 0 var(--stroke),
    .032em -.032em 0 var(--stroke), -.032em -.032em 0 var(--stroke),
    0 .07em 0 var(--stroke);
}

/* ——— floating logo, upper left ——— */
.float-logo{
  position:fixed; top:14px; left:18px; z-index:81;
  font-family:var(--font-display);
  font-size:1.45rem; line-height:1;
  color:var(--red); text-decoration:none;
  background:var(--cream-2);
  border:3px solid var(--ink);
  border-radius:999px;
  padding:.5rem 1.2rem .65rem;
  box-shadow:0 6px 0 rgba(27,27,27,.22);
  transform:rotate(-2deg);
  transition:transform .18s ease;
  white-space:nowrap;
}
.float-logo:hover{ transform:rotate(0deg) scale(1.04); }

/* ——— floating capsule nav ——— */
.float-nav{
  position:fixed; top:14px; left:50%;
  transform:translateX(-50%);
  z-index:80;
  display:flex; align-items:center;
  gap:clamp(.6rem, 2vw, 1.4rem);
  background:var(--cream-2);
  border:3px solid var(--ink);
  border-radius:999px;
  padding:.45rem .5rem;
  box-shadow:0 6px 0 rgba(27,27,27,.22);
  transition:transform .35s ease;
  max-width:calc(100vw - 2rem);
}
.float-nav.tucked{ transform:translate(-50%, -160%); }
.fn-links{ display:flex; gap:.2rem; }
.fn-links a{
  font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  padding:.4rem .9rem; border-radius:999px;
  transition:background .25s ease, color .25s ease;
  white-space:nowrap;
}
.fn-links a:hover{ background:var(--sun); }
.fn-links a.active{ background:var(--red); color:var(--cream-2); }
.fn-cta{
  font-size:1.05rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none;
  background:var(--red); color:var(--cream-2);
  padding:.5rem 1.3rem; border-radius:999px;
  transition:transform .18s ease, background .18s ease;
  white-space:nowrap;
}
.fn-cta:hover{ transform:scale(1.05) rotate(-1.5deg); background:var(--red-2); }

/* ——— hero ——— */
.hero{
  position:relative;
  padding:6.5rem var(--pad-x) 4.5rem;
  min-height:100vh;
  display:flex; flex-direction:column;
}
.hero-eyebrow{
  text-align:center;
  font-size:.95rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--ink); opacity:.85;
  margin-bottom:1rem;
}
.hero-stack{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; }
.giant{
  font-family:var(--font-display); font-weight:400;
  color:var(--red);
  font-size:clamp(4.5rem, 16.5vw, 15rem);
  line-height:.82;
  text-align:center;
  text-transform:uppercase;
  user-select:none;
}
.giant .line{ display:block; }
.js .giant{ opacity:0; transform:scale(.94); transition:opacity .8s ease .1s, transform .8s cubic-bezier(.2,1.4,.4,1) .1s; }
.js .fonts-in .giant, .fonts-in .giant{ opacity:1; transform:none; }

/* tilted sticker badges */
.badge{
  position:absolute;
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 2.6vw, 2.3rem);
  line-height:.95; text-transform:uppercase; text-align:center;
  color:var(--amber);
  text-shadow:
    .05em 0 0 var(--cream-2), -.05em 0 0 var(--cream-2),
    0 .05em 0 var(--cream-2), 0 -.05em 0 var(--cream-2),
    .04em .04em 0 var(--cream-2), -.04em .04em 0 var(--cream-2),
    .04em -.04em 0 var(--cream-2), -.04em -.04em 0 var(--cream-2);
  transform:rotate(-8deg);
}
.badge-a{ top:8%; left:12%; }
.badge-b{ top:14%; right:10%; transform:rotate(7deg); }
.badge-feels{ right:14%; bottom:18%; transform:rotate(8deg); }

/* mascots overlap the giant type */
.mascots{ display:contents; }
.mascot{ position:absolute; filter:drop-shadow(0 14px 0 rgba(27,27,27,.12)); }
.mascot-burger{
  width:clamp(130px, 18vw, 260px);
  left:50%; top:50%;
  transform:translate(-85%, -18%) rotate(-4deg);
}
.mascot-cup{
  width:clamp(85px, 11.5vw, 170px);
  left:50%; top:50%;
  transform:translate(42%, -8%) rotate(6deg);
}
@media (prefers-reduced-motion: no-preference){
  .js .mascot-burger{ animation:bob 5.2s ease-in-out infinite; }
  .js .mascot-cup{ animation:bob 4.4s ease-in-out infinite reverse; }
}
.motion-off .mascot-burger, .motion-off .mascot-cup{ animation:none !important; }
@keyframes bob{
  0%,100%{ margin-top:0; }
  50%{ margin-top:-14px; }
}

.hero-feet{
  display:flex; justify-content:space-between; gap:2.5rem;
  max-width:100%;
}
.hero-feet p{
  max-width:20rem; font-size:1.3rem; line-height:1.35;
}
.hero-feet p + p{ text-align:right; }

/* ——— marquee ——— */
.marquee{
  background:var(--red);
  overflow:hidden;
  padding:.7rem 0;
  border-top:4px solid var(--ink);
  border-bottom:4px solid var(--ink);
}
.marquee-track{
  display:flex; width:max-content;
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 2.6vw, 2.2rem);
  color:var(--cream-2);
  white-space:nowrap;
}
.marquee-track span{ padding-right:.5em; }
@media (prefers-reduced-motion: no-preference){
  .js .marquee-track{ animation:scroll-x 28s linear infinite; }
}
.motion-off .marquee-track{ animation:none !important; }
@keyframes scroll-x{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ——— intro ——— */
.intro{
  text-align:center;
  padding:clamp(4rem, 9vh, 7rem) var(--pad-x) clamp(3rem, 7vh, 5rem);
}
.intro-copy{
  max-width:46rem; margin:0 auto 2rem;
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  line-height:1.35;
}
.blob-btn{
  display:inline-block;
  font-family:var(--font-body); font-size:1.35rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream-2); background:var(--red);
  text-decoration:none; border:none; cursor:pointer;
  padding:1.05rem 2.8rem;
  border-radius:48% 52% 55% 45% / 58% 48% 52% 42%;
  box-shadow:0 6px 0 rgba(27,27,27,.18);
  transition:transform .18s ease, background .18s ease;
}
.blob-btn:hover{ transform:scale(1.05) rotate(-2deg); background:var(--red-2); }
.blob-btn:active{ transform:scale(.98); }

/* tilted highlight cards */
.card-fan{
  display:flex; justify-content:center; align-items:stretch;
  gap:clamp(1rem, 3vw, 2.5rem);
  margin-top:clamp(3rem, 7vh, 5rem);
  flex-wrap:wrap;
}
.fan-card{
  width:min(19rem, 80vw);
  border-radius:18px;
  padding:2.2rem 1.6rem 1.8rem;
  color:var(--cream-2);
  box-shadow:0 14px 0 rgba(27,27,27,.12);
  transition:rotate .25s ease, scale .25s ease;
}
.fan-card:nth-child(1){ rotate:-4deg; }
.fan-card:nth-child(2){ rotate:2deg; }
.fan-card:nth-child(3){ rotate:5deg; }
.fan-card:hover{ rotate:0deg; scale:1.04; }
.fan-red{ background:var(--red); }
.fan-amber{ background:var(--amber); color:var(--ink); }
.fan-maroon{ background:var(--maroon); }
.fan-name{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 4vw, 3rem);
  line-height:1;
  margin-bottom:.5rem;
}
/* dark cards need a dark sticker outline — cream-on-cream is a blob */
.fan-red .fan-name{ --stroke: #4C0016; }
.fan-maroon .fan-name{ --stroke: #1B0009; }
.fan-desc{ font-size:1.2rem; opacity:.92; margin-bottom:1.1rem; }
.chip{
  display:inline-block;
  background:var(--cream-2); color:var(--ink);
  font-weight:700; font-size:1.2rem;
  padding:.25rem 1.1rem; border-radius:999px;
  border:2px solid var(--ink);
}

/* ——— waves ——— */
.wave{ display:block; width:100%; height:clamp(40px, 7vw, 90px); }
.wave-to-red, .wave-yellow-to-red{ margin-bottom:-1px; }
.wave-from-red{ margin-top:-1px; }
.wave-to-yellow{ margin-bottom:-1px; }

/* ——— red statement ——— */
.feels{
  position:relative;
  background:var(--red);
  text-align:center;
  padding:clamp(3rem, 8vh, 6rem) var(--pad-x) clamp(4rem, 10vh, 8rem);
  overflow:hidden;
}
.feels-title{
  font-family:var(--font-body); font-weight:400;
  text-transform:uppercase;
  color:var(--cream);
  font-size:clamp(3.4rem, 12vw, 11rem);
  line-height:.92;
  margin-bottom:1.5rem;
}
.feels-burger{
  width:clamp(240px, 34vw, 460px);
  margin:0 auto; display:block;
  filter:drop-shadow(0 16px 0 rgba(27,27,27,.18));
}
.feels-list{
  list-style:none;
  position:absolute; bottom:clamp(2rem, 6vh, 4rem);
  color:var(--cream-2);
  text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(1.1rem, 1.8vw, 1.5rem);
  line-height:1.6;
}
.feels-left{ left:var(--pad-x); text-align:left; }
.feels-right{ right:var(--pad-x); text-align:right; }

/* ——— menu ——— */
.menu{ padding:clamp(3rem, 8vh, 6rem) var(--pad-x); }
.menu-head{ text-align:center; margin-bottom:clamp(2.5rem, 6vh, 4.5rem); }
.giant-2{
  font-family:var(--font-display); font-weight:400;
  color:var(--red);
  font-size:clamp(3.2rem, 9vw, 7.5rem);
  line-height:.95;
  text-transform:uppercase;
}
.menu-note{
  margin-top:.9rem;
  font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase;
}
.menu-note b{ color:var(--red); }

.menu-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 6rem);
  max-width:72rem; margin:0 auto;
}
.col-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem, 4.5vw, 3.6rem);
  color:var(--amber);
  text-shadow:.04em .04em 0 var(--ink);
  border-bottom:4px solid var(--ink);
  padding-bottom:.4rem; margin-bottom:1.8rem;
  text-transform:uppercase;
}
.col-note{
  font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.75;
  margin:-1.2rem 0 1.6rem;
}
.col-note b{ color:var(--red); }

/* best-selling flavor inside a category's run-in list */
.fl{ font-style:normal; }
.fl-best{
  color:var(--red); font-weight:700;
  border-bottom:2px solid var(--amber);
}
.fl-best::before{ content:"★ "; color:var(--amber); }

/* best-seller chip, fed by the POS (api/bestsellers) */
.bs-badge{
  display:inline-block;
  margin-left:.55em;
  background:var(--amber); color:var(--ink);
  font-size:.78rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.08rem .65rem; border-radius:999px;
  transform:rotate(-2deg);
  box-shadow:0 2px 0 rgba(27,27,27,.18);
  white-space:nowrap;
  vertical-align:.12em;
}
.mcat{ margin-bottom:2.4rem; }
.mcat h4{
  font-family:var(--font-display); font-weight:400;
  color:var(--red);
  font-size:1.55rem;
  margin-bottom:.5rem;
  display:flex; justify-content:space-between; align-items:baseline;
  text-transform:uppercase;
}
.sizes{
  font-family:var(--font-body);
  font-size:1rem; letter-spacing:.12em;
  color:var(--ink); opacity:.7;
}
.cat-note{
  font-size:1.12rem; line-height:1.3;
  opacity:.75;
  margin-bottom:.5rem;
}
.mcat ul{ list-style:none; }
.mcat li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.3rem 0;
  font-size:1.3rem;
  border-bottom:2px dotted rgba(27,27,27,.25);
}
.dish em{ font-style:normal; font-size:.85em; opacity:.65; margin-left:.3em; }
.dish b{ color:var(--red); margin-right:.2em; }
.price{ font-weight:700; color:var(--red); white-space:nowrap; }

/* ——— snack sets (yellow) ——— */
.sets{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200'%3E%3Cpath d='M-20 160 Q60 80 130 130 Q210 185 280 90' fill='none' stroke='%23F4A804' stroke-width='5' stroke-dasharray='18 16' stroke-linecap='round'/%3E%3C/svg%3E"),
    var(--sun);
  text-align:center;
  padding:clamp(3rem, 8vh, 6rem) var(--pad-x) clamp(4rem, 9vh, 7rem);
}
.sets .giant-2{ color:var(--red); }
.sets-sub{
  font-size:clamp(1.3rem, 2vw, 1.7rem);
  margin:.8rem 0 clamp(2.5rem, 6vh, 4rem);
}
.set-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.2rem, 2.5vw, 2rem);
  max-width:72rem; margin:0 auto;
}
.set-card{
  background:var(--cream-2);
  border-radius:16px;
  width:min(15.5rem, 84vw);
  padding:1.6rem 1.2rem 1.5rem;
  box-shadow:0 10px 0 rgba(27,27,27,.15);
  transition:rotate .22s ease, scale .22s ease;
}
.set-card:nth-child(odd){ rotate:-2.5deg; }
.set-card:nth-child(even){ rotate:2deg; }
.set-card:hover{ rotate:0deg; scale:1.05; }
.set-tag{
  display:inline-block;
  font-size:.95rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-2); background:var(--maroon);
  padding:.15rem .8rem; border-radius:999px;
  margin-bottom:.6rem;
}
.set-name{
  font-family:var(--font-display);
  color:var(--red); font-size:2.1rem; line-height:1;
  margin-bottom:.4rem;
}
.set-what{ font-size:1.1rem; opacity:.8; margin-bottom:1rem; min-height:2.2em; }

/* ——— visit + reserve (red) ——— */
.visit{
  background:var(--red);
  padding:clamp(3rem, 8vh, 6rem) var(--pad-x) clamp(4rem, 9vh, 7rem);
}
.visit-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(2.5rem, 6vw, 6rem);
  max-width:72rem; margin:0 auto;
  align-items:start;
}
.visit-title{
  font-family:var(--font-body); font-weight:400;
  text-transform:uppercase;
  color:var(--cream);
  font-size:clamp(3.4rem, 8vw, 7rem);
  line-height:.9;
  margin-bottom:2rem;
}
.hours{ list-style:none; margin-bottom:1.8rem; max-width:24rem; }
.hours li{
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--cream-2);
  font-size:1.3rem;
  padding:.4rem 0;
  border-bottom:2px dotted rgba(255,246,232,.5);
  text-transform:uppercase; letter-spacing:.04em;
}
.addr{
  font-style:normal; color:var(--cream-2);
  font-size:1.3rem; line-height:1.6;
  margin-bottom:2rem;
}
.addr a{ color:var(--cream-2); }

.map-wrap{ max-width:30rem; }
.map-frame{
  position:relative; height:240px; overflow:hidden;
  border-radius:16px;
  border:4px solid var(--cream-2);
  box-shadow:0 10px 0 rgba(27,27,27,.2);
  transform:rotate(-1.5deg);
}
.map-frame iframe{
  position:absolute; top:-14%; left:-10%;
  width:124%; height:132%;
  border:0; display:block;
  pointer-events:none;
  filter:sepia(.28) saturate(.85) contrast(1.02);
}
.map-attr{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-top:1rem;
  font-size:1rem; letter-spacing:.06em;
  color:var(--cream-2); text-transform:uppercase;
}
.map-attr a{ color:var(--cream-2); }
.map-link{ text-decoration:none; border-bottom:2px solid rgba(255,246,232,.6); }
.map-link:hover{ border-color:var(--cream-2); }

/* reservation card */
.reserve-card{
  background:var(--cream-2);
  border-radius:22px;
  padding:clamp(1.8rem, 3vw, 2.8rem);
  box-shadow:0 14px 0 rgba(27,27,27,.22);
}
.reserve-card h3{
  font-family:var(--font-display); font-weight:400;
  color:var(--red);
  font-size:clamp(2rem, 3.4vw, 2.8rem);
  line-height:1;
  margin-bottom:1.6rem;
  text-transform:uppercase;
  --stroke:#FFFFFF;
}
.field{ margin-bottom:1.1rem; }
.field label{
  display:block;
  font-size:1rem; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:.35rem;
}
.field input, .field select{
  width:100%;
  background:#FFFDF8;
  border:3px solid var(--ink);
  border-radius:12px;
  color:var(--ink);
  font-family:var(--font-body); font-size:1.25rem;
  padding:.65rem .9rem;
  transition:border-color .2s ease;
  appearance:none; -webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B1B1B' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  padding-right:2.4rem;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--red); }
.field input:focus-visible, .field select:focus-visible{
  outline:3px solid var(--amber); outline-offset:2px;
}
.field input::placeholder{ color:rgba(27,27,27,.4); }
.field-row{ display:grid; grid-template-columns:1.2fr 1fr 1.4fr; gap:1rem; }
.form-error{
  font-size:1.1rem; color:var(--red-2); font-weight:700;
  margin:-.2rem 0 .8rem;
}
.blob-submit{ width:100%; margin-top:.4rem; }
.blob-submit.is-sending{ opacity:.7; pointer-events:none; }

/* honeypot — humans never see it, bots fill it */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

/* Viber copy button on the confirmation */
.pill-viber{
  display:inline-block; margin-top:1.2rem;
  background:#7360F2; color:#FFFFFF;
  font-size:1.1rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none;
  padding:.7rem 1.8rem; border-radius:999px;
  box-shadow:0 5px 0 rgba(27,27,27,.18);
  transition:transform .18s ease, background .18s ease;
}
.pill-viber:hover{ transform:scale(1.05) rotate(-1.5deg); background:#5B48E0; }
.viber-hint{ margin-top:.6rem; }
.form-fine{
  font-size:1.05rem; opacity:.75;
  margin-top:1rem; text-align:center;
}
.form-done{ text-align:center; padding:1.5rem 0 .5rem; }
.done-mark{ font-size:2.2rem; margin-bottom:.6rem; }
.form-done h4{
  font-family:var(--font-display); font-weight:400;
  color:var(--red); font-size:2rem;
  margin-bottom:.6rem;
}
.form-done h4:focus{ outline:none; }
#doneDetail{ font-size:1.25rem; font-weight:700; }

/* ——— motion toggle ——— */
.motion-toggle{
  position:fixed; bottom:1rem; left:1rem; z-index:85;
  background:var(--cream-2); color:var(--ink);
  border:2px solid var(--ink); border-radius:999px;
  font-family:var(--font-body); font-size:.95rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.45rem 1rem; cursor:pointer;
  box-shadow:0 4px 0 rgba(27,27,27,.2);
}
.motion-toggle:hover{ background:#FFFDF8; }

/* ——— footer ——— */
.site-foot{
  background:var(--cream);
  padding:clamp(3rem, 7vh, 5rem) var(--pad-x) 2.5rem;
}
.foot-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:2rem;
  flex-wrap:wrap;
  border-bottom:2px solid rgba(27,27,27,.3);
  padding-bottom:1rem; margin-bottom:1rem;
}
.foot-nav{ display:flex; gap:1.8rem; }
.foot-nav a{
  text-decoration:none; text-transform:uppercase; letter-spacing:.06em;
  font-size:1.2rem;
}
.foot-nav a:hover{ color:var(--red); }
.foot-copy{ font-size:1.1rem; text-transform:uppercase; letter-spacing:.04em; }
.foot-tag{
  font-size:1.15rem; text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:1rem;
}
/* (giant footer wordmark removed by request) */

/* ——— reveal on scroll (armed only when JS is present) ———
   uses `translate`/`opacity` so it composes with each card's `rotate` tilt */
.js .reveal{
  opacity:0; translate:0 26px;
  transition:
    opacity .8s ease, translate .8s cubic-bezier(.2,1.2,.4,1),
    rotate .25s ease, scale .25s ease;
}
.js .reveal.in{ opacity:1; translate:0 0; }

/* ——— reduced motion ——— */
@media (prefers-reduced-motion: reduce){
  .js .giant{ opacity:1; transform:none; transition:none; }
  .js .reveal, .js .fan-card.reveal, .js .set-card.reveal{ opacity:1; translate:0 0; transform:none; transition:none; }
  .marquee-track{ animation:none !important; }
  .mascot-burger, .mascot-cup{ animation:none !important; }
  .fn-cta:hover, .blob-btn:hover{ transform:none; }
  .float-nav{ transition:none; }
}

/* ——— mobile ——— */
@media (max-width: 900px){
  .menu-cols{ grid-template-columns:1fr; gap:3.5rem; }
  .visit-grid{ grid-template-columns:1fr; gap:3rem; }
  .feels-list{ position:static; text-align:center !important; margin-top:1.2rem; }
  .feels{ padding-bottom:clamp(2.5rem, 6vh, 4rem); }
}
@media (max-width: 640px){
  body{ font-size:1.25rem; }
  /* the capsule becomes a bottom dock — thumb territory */
  .float-nav{
    top:auto; bottom:12px;
    padding:.4rem .45rem;
    gap:.5rem;
    width:max-content;
  }
  .float-nav.tucked{ transform:translateX(-50%); } /* dock never hides */
  .float-logo{ top:10px; left:10px; font-size:1.1rem; padding:.4rem .9rem .5rem; }
  .fn-links a{ font-size:.95rem; padding:.35rem .7rem; }
  .fn-cta{ font-size:.95rem; padding:.45rem 1rem; }
  /* keep page content scrollable above the dock */
  .visit{ padding-bottom:7rem; }
  .site-foot{ padding-bottom:6rem; }
  .motion-toggle{ bottom:calc(12px + 3.6rem); }
  .hero{ padding-top:4rem; min-height:92vh; }
  .hero-eyebrow{ font-size:.8rem; letter-spacing:.22em; }
  .giant{ font-size:19vw; }
  .badge-a{ top:4%; left:4%; }
  .badge-b{ top:8%; right:4%; }
  /* small screens: mascots sit in a row under the wordmark instead of covering it */
  .hero-stack{ flex-direction:column; justify-content:center; }
  .mascots{
    display:flex; justify-content:center; align-items:flex-end;
    gap:2.2rem; margin-top:2rem;
  }
  .mascot{ position:static; }
  .mascot-burger{ width:37vw; transform:rotate(-5deg); }
  .mascot-cup{ width:23vw; transform:rotate(6deg); }
  .hero-feet{ flex-direction:column; gap:1rem; }
  .hero-feet p + p{ text-align:left; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .map-wrap{ max-width:none; }
  .foot-row{ flex-direction:column; gap:.8rem; }
  .motion-toggle{ font-size:.8rem; padding:.35rem .8rem; }
}