/* ══════════════════════════════════════════════════════════════════
   PHO LOVE · Altoona PA · VARIATION C — "The Squeeze"
   The sriracha and hoisin drizzle on the Special becomes the whole
   visual system. A sauce line draws itself down the page as you
   scroll and stitches every section together.
   Warm cream base so the red sauce is the loudest thing on screen.
   ══════════════════════════════════════════════════════════════════ */

@import url("../fonts/fonts.css");

:root{
  --red:#ED2626;          /* sriracha, the brand red */
  --red-deep:#C81C1C;
  --hoisin:#141110;       /* black, the second accent. No brown on this brand. */
  --hoisin-soft:#2C2725;
  --cream:#FFFFFF;
  --sand:#F4F1ED;
  --ink:#141110;
  --ink-soft:#54504E;
  --line:#E4E0DB;
  --white:#FFFFFF;

  --disp:"Baloo 2",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;

  --sh-2:0 8px 22px rgba(20,17,16,.10);
  --sh-3:0 18px 44px rgba(20,17,16,.15);
  --sh-4:0 32px 70px rgba(20,17,16,.22);

  --r-m:20px; --r-l:34px; --r-pill:999px;
  --wrap:1140px;
  --ease:cubic-bezier(.22,.86,.36,1);
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--body);font-size:16px;line-height:1.62;
  color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,44px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--red);color:#fff;padding:10px 16px;border-radius:8px}

/* ── type ───────────────────────────────────────────────────── */
.d-hero{font-family:var(--disp);font-weight:800;font-size:clamp(44px,7.6vw,104px);line-height:.96;letter-spacing:-.02em;margin:0}
.d-xl{font-family:var(--disp);font-weight:800;font-size:clamp(32px,4.6vw,60px);line-height:1.02;letter-spacing:-.012em;margin:0}
.d-lg{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,38px);line-height:1.08;margin:0}
.lead{font-size:clamp(16px,1.3vw,19px);color:var(--ink-soft);max-width:54ch;margin:0}
.on-dark{color:var(--white)}
.on-dark .lead{color:rgba(255,255,255,.92)}
.eyebrow{
  font-weight:700;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px;
}
.on-dark .eyebrow{color:#fff}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-weight:700;font-size:17px;line-height:1;
  padding:16px 30px;border-radius:var(--r-pill);text-decoration:none;
  border:2.5px solid transparent;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn--red{background:var(--red);color:#fff;box-shadow:var(--sh-2)}
.btn--red:hover{background:var(--red-deep);box-shadow:var(--sh-3)}
.btn--hoisin{background:var(--hoisin);color:#fff}
.btn--hoisin:hover{background:var(--hoisin-soft)}
.btn--out{border-color:var(--hoisin);color:var(--hoisin)}
.btn--out:hover{background:var(--hoisin);color:#fff}
.btn--white{background:#fff;color:var(--red-deep);box-shadow:var(--sh-2)}
.btn--outw{border-color:rgba(255,255,255,.85);color:#fff}
.btn--outw:hover{background:#fff;color:var(--red-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}


.nav{position:sticky;z-index:60}
main,.foot,.ig{position:relative;z-index:2}

/* ── nav ────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:var(--red);color:#fff}
.nav__bar{
  max-width:calc(var(--wrap) + 60px);margin-inline:auto;
  padding:0 clamp(18px,4vw,40px);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav__logo img{width:clamp(140px,15vw,178px)}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__links a{
  color:#fff;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:16px;
  transition:opacity .2s;
}
.nav__links a:hover{opacity:.75}
.nav__cta{
  background:#fff;color:var(--red-deep)!important;
  padding:11px 20px;border-radius:var(--r-pill);
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.nav__cta:hover{opacity:1!important;transform:translateY(-1px)}
.nav__burger{display:none;width:44px;height:44px;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav__burger span{display:block;width:24px;height:2.6px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}
@media (max-width:880px){
  .nav__burger{display:flex}
  .nav__links{
    position:absolute;left:0;right:0;top:var(--nav-h);
    background:var(--red);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 0 16px;display:none;box-shadow:0 18px 30px rgba(0,0,0,.18);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:14px clamp(18px,5vw,28px);font-size:18px}
  .nav__cta{margin:10px clamp(18px,5vw,28px) 0;text-align:center}
}

/* ── sections ───────────────────────────────────────────────── */
.sec{padding:clamp(60px,7.5vw,120px) 0;position:relative}
.sec--sand{background:var(--sand)}
.sec--hoisin{background:var(--hoisin);color:#fff}

/* ── hero: one bowl, edge to edge, type sitting on the food ──
   Our pho is shot on light cream, not the dark surface the reference
   used, so a wash rises out of the bottom-left corner only. The photo
   stays legible everywhere else and the type still reads white.      */
.hero{
  position:relative;min-height:calc(100svh - var(--nav-h));
  display:grid;align-content:end;overflow:hidden;
  padding:0 0 clamp(34px,6vh,72px);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(0deg,   rgba(20,17,16,.95) 0%, rgba(20,17,16,.78) 16%, rgba(20,17,16,.34) 38%, rgba(20,17,16,.04) 58%, rgba(20,17,16,0) 72%),
    linear-gradient(75deg,  rgba(20,17,16,.72) 0%, rgba(20,17,16,.18) 42%, rgba(20,17,16,0) 66%),
    linear-gradient(0deg,   rgba(237,38,38,.34) 0%, rgba(237,38,38,0) 40%);
}
.hero__inner{
  position:relative;z-index:3;width:100%;
  max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,44px);
}
.hero__wordmark{width:min(210px,42vw);margin-bottom:clamp(14px,2.4vh,26px);filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.hero__pill{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.94);color:var(--ink);
  padding:8px 16px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;margin-bottom:clamp(10px,1.6vh,18px);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.hero__pill .status__dot{background:#1FA85A;box-shadow:0 0 0 3px rgba(31,168,90,.18)}
.hero__pill .status.is-closed .status__dot{background:#9A9A9A;box-shadow:0 0 0 3px rgba(154,154,154,.18)}

/* the slab, set in Baloo 2. The brand face carries the headline, not a
   generic grotesque borrowed to chase a condensed reference. Baloo is
   rounded, so it is NOT squeezed horizontally, that would deform it.
   Scale and tight leading do the work instead. */
.hero__slab{
  margin:0;color:#fff;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(44px,8.6vw,124px);
  line-height:.88;letter-spacing:-.022em;text-transform:uppercase;
  text-shadow:0 3px 30px rgba(0,0,0,.42);
}
.hero__slab em{font-style:normal;color:var(--red)}
.hero .btn-row{margin-top:clamp(20px,3vh,34px)}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero__meta a{color:inherit}
.stars{color:#FF6B6B;letter-spacing:2px;font-size:14px}
.status{display:inline-flex;align-items:center;gap:8px}
.status__dot{width:9px;height:9px;border-radius:50%;background:#3FD07A;box-shadow:0 0 0 4px rgba(63,208,122,.2)}
.status.is-closed .status__dot{background:#C9C2BC;box-shadow:0 0 0 4px rgba(201,194,188,.2)}
@media (max-width:700px){
  .hero__bg img{object-position:50% 38%}
  .hero__slab{font-size:clamp(38px,12vw,76px)}
}

/* ── dish strip: horizontal scroll of the real bowls ────────── */
.strip{display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 14px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.dish{
  flex:0 0 auto;width:min(280px,74vw);scroll-snap-align:start;
  background:#fff;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-2);text-decoration:none;color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  display:flex;flex-direction:column;
}
.dish:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.dish__img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.dish__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dish:hover .dish__img img{transform:scale(1.06)}
.dish__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.dish__name{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.1}
.dish__desc{font-size:14px;color:var(--ink-soft);line-height:1.45;flex:1}
.dish__price{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--red-deep)}
.strip-nav{display:flex;gap:10px;justify-content:center;margin-top:18px}
.strip-nav button{
  width:42px;height:42px;border-radius:50%;border:2.5px solid var(--hoisin);
  color:var(--hoisin);display:grid;place-items:center;
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.strip-nav button:hover{background:var(--hoisin);color:#fff;transform:scale(1.06)}
.strip-nav svg{width:18px;height:18px}

/* ── split ──────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split__fig{margin:0;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-3);position:relative}
.split__fig img{width:100%;display:block;transition:transform .9s var(--ease)}
.split__fig:hover img{transform:scale(1.04)}
.split__badge{
  position:absolute;left:16px;bottom:16px;background:var(--red);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:13.5px;padding:8px 16px;border-radius:var(--r-pill);
}

/* ── reviews ────────────────────────────────────────────────── */
.revs{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;align-items:stretch}
.revs::-webkit-scrollbar{display:none}
.rev{
  flex:0 0 auto;width:min(300px,80vw);scroll-snap-align:start;margin:0;
  background:#fff;color:var(--ink);border-radius:var(--r-m);padding:22px;
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-2);
}
.rev blockquote{margin:0;font-size:15px;line-height:1.55;font-weight:500;flex:1}
.rev .stars{color:var(--red)}
.rev figcaption{font-size:12.5px;color:var(--ink-soft)}
.rev cite{display:block;font-style:normal;font-weight:700;color:var(--ink)}
.revs-nav{display:flex;gap:10px;justify-content:center;margin-top:18px}
.revs-nav button{
  width:42px;height:42px;border-radius:50%;border:2.5px solid rgba(255,255,255,.8);
  background:rgba(0,0,0,.14);color:#fff;display:grid;place-items:center;
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.revs-nav button:hover{background:#fff;color:var(--hoisin);transform:scale(1.06)}
.revs-nav svg{width:18px;height:18px}

/* ── visit ──────────────────────────────────────────────────── */
.visit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,36px);align-items:stretch}
@media (max-width:900px){.visit{grid-template-columns:1fr}}
.sign{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:290px;display:block;text-decoration:none;color:#fff;box-shadow:var(--sh-3)}
.sign img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sign:hover img{transform:scale(1.045)}
.sign__body{
  position:absolute;inset:auto 0 0 0;padding:64px 20px 18px;
  background:linear-gradient(transparent,rgba(20,17,16,.88));
  display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.sign__addr{font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.8vw,21px);line-height:1.25}
.hours{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-2);padding:clamp(20px,2.4vw,30px)}
.hours h3{margin:0 0 12px;font-family:var(--disp);font-size:22px}
.hrow{display:flex;align-items:baseline;gap:12px;font-size:14.5px;font-weight:500;padding:7px 10px;border-radius:9px}
.hrow .dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.hrow strong{font-family:var(--disp);font-weight:700;white-space:nowrap}
.hrow.is-today{background:var(--red);color:#fff}
.hrow.is-today .dots{border-color:rgba(255,255,255,.5)}
.hnote{margin:12px 0 0;font-size:13px;color:var(--ink-soft)}

/* ── menu page ──────────────────────────────────────────────── */
.mhero{background:var(--red);color:#fff;padding:clamp(30px,4vw,54px) 0}
.mhero h1{font-size:clamp(42px,7vw,88px);line-height:1;margin:0}
.mhero__sub{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding-top:14px;font-weight:500}
.mtabs{position:sticky;top:var(--nav-h);z-index:55;background:var(--cream);border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:none}
.mtabs::-webkit-scrollbar{display:none}
.mtabs__row{display:flex;gap:8px;padding:12px clamp(20px,4vw,44px);max-width:calc(var(--wrap) + 40px);margin-inline:auto}
.mtabs a{
  font-family:var(--disp);font-weight:700;font-size:15px;white-space:nowrap;
  color:var(--hoisin);text-decoration:none;border:2px solid var(--red);
  padding:9px 18px;border-radius:var(--r-pill);transition:background .2s,color .2s;
}
.mtabs a:hover{background:rgba(237,38,38,.1)}
.mtabs a.is-on{background:var(--red);color:#fff}
.cat{padding:clamp(38px,5vw,68px) 0;border-bottom:2px solid var(--line)}
.cat:last-of-type{border-bottom:0}
.cat__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cat__note{font-size:14px;color:var(--ink-soft);font-weight:500}
.cat__fig{margin:24px 0 0;border-radius:var(--r-l);overflow:hidden;position:relative;box-shadow:var(--sh-2)}
.cat__fig img{width:100%;aspect-ratio:21/9;object-fit:cover}
.cat__fig figcaption{
  position:absolute;left:16px;bottom:16px;background:rgba(20,17,16,.84);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:14px;padding:8px 15px;border-radius:var(--r-pill);
}
.list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 44px}
@media (max-width:820px){.list{grid-template-columns:1fr}}
.row{padding:15px 0;border-bottom:1px solid var(--line)}
.row__top{display:flex;align-items:baseline;gap:10px}
.row__code{font-weight:700;font-size:11px;letter-spacing:.08em;color:#fff;background:var(--hoisin);border-radius:5px;padding:3px 6px;flex:none}
.row__name{font-family:var(--disp);font-weight:700;font-size:17.5px}
.row__dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);min-width:16px}
.row__price{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--red-deep);flex:none}
.row__desc{margin:5px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:2px 5px;margin-left:6px;vertical-align:2px;background:#E4F3E8;color:#1F7A3A}
.legend{margin:22px 0 0;font-size:14px;color:var(--ink-soft)}
.extras{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;padding:16px 20px;background:var(--sand);border-radius:var(--r-m);font-size:14.5px}

/* ── instagram + footer ─────────────────────────────────────── */
.ig{background:var(--red);color:#fff;padding:clamp(24px,3vw,36px) 0}
.ig__row{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap}
.ig__head{display:flex;align-items:center;gap:12px}
.ig__head svg{width:26px;height:26px}
.ig__handle{font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.8vw,21px);text-decoration:none;color:#fff}
.ig__handle:hover{color:var(--hoisin)}
.ig__grid{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.ig__grid a{width:clamp(62px,7vw,84px);aspect-ratio:1;border-radius:12px;overflow:hidden;display:block;transition:transform .3s var(--ease)}
.ig__grid a:hover{transform:translateY(-4px) scale(1.03)}
.ig__grid img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.ig__grid{margin-left:0}}

.foot{background:var(--hoisin);color:#F0EEEC;padding:clamp(44px,5vw,72px) 0 0}
.foot__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
@media (max-width:820px){.foot__cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__cols{grid-template-columns:1fr}}
.foot h4{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,238,236,.6);margin:0 0 12px}
.foot a{color:#F0EEEC;text-decoration:none;display:inline-block;padding:4px 0}
.foot a:hover{color:var(--red)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:15px}
.foot__wordmark{width:min(210px,58vw);margin-bottom:14px}
.foot__note{font-size:14px;color:rgba(240,238,236,.68);max-width:32ch}
.foot__base{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  margin-top:clamp(28px,4vw,46px);padding:20px 0 26px;
  border-top:1px solid rgba(240,238,236,.16);font-size:13px;color:rgba(240,238,236,.58);
}

/* ── sticky mobile order bar ────────────────────────────────── */
.sticky-order{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:none;gap:10px;
  background:rgba(20,17,16,.96);backdrop-filter:blur(12px);
  border-radius:var(--r-pill);padding:10px;box-shadow:var(--sh-4);
}
.sticky-order .btn{flex:1}
@media (max-width:680px){.sticky-order{display:flex}}

/* ── scroll reveal ──────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── photo band: catering + reserve ─────────────────────────── */
.band{position:relative;isolation:isolate;overflow:clip;padding:clamp(64px,8vw,120px) 0;color:#fff}
.band__bg{position:absolute;inset:0;z-index:0}
.band__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
.band__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(20,17,16,.84) 0%, rgba(20,17,16,.70) 50%, rgba(20,17,16,.88) 100%);
}
.band__inner{position:relative;z-index:2;max-width:720px;text-align:center}
.band__inner .lead{color:rgba(255,255,255,.92);margin-inline:auto}



/* ══ THE SQUEEZE ════════════════════════════════════════════════
   The bottle just sits in the corner. No toggles, no reset button,
   nothing competing with Order and See the menu. Drag it over the
   bowl and sauce comes out. Ignore it and nothing is lost.         */
.squeeze{position:relative;background:var(--cream);padding:clamp(60px,7.5vw,110px) 0}
.squeeze__inner{text-align:center}
.squeeze .d-xl{color:var(--ink)}
.squeeze__scene{
  position:relative;width:min(440px,82vw);aspect-ratio:1;
  margin:clamp(18px,2.6vw,30px) auto 0;
}
.squeeze__pic{display:block}
.squeeze__bowl{width:100%;filter:drop-shadow(0 26px 40px rgba(20,17,16,.24))}
.squeeze__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.squeeze__canvas path{fill:none;stroke-linecap:round;stroke-linejoin:round}

.squeeze__bottle{
  position:absolute;left:0;top:0;width:23%;height:auto;aspect-ratio:120/260;z-index:3;
  cursor:grab;touch-action:none;            /* only the bottle blocks scroll */
  filter:drop-shadow(0 10px 16px rgba(20,17,16,.28));
  /* JS owns `transform`, so the idle lean animates `rotate` on its own */
  animation:leanIdle 5s var(--ease) infinite;
  transform-origin:50% 88%;
}
.squeeze__bottle:active{cursor:grabbing}
.squeeze__scene.is-held .squeeze__bottle{animation:none;rotate:-16deg;filter:drop-shadow(0 16px 24px rgba(20,17,16,.36))}
/* a slow lean so it reads as pick-me-up-able without a label shouting it */
@keyframes leanIdle{
  0%,100%{rotate:-8deg}
  50%{rotate:-2deg}
}
@media (prefers-reduced-motion:reduce){.squeeze__bottle{animation:none}}

.squeeze__hint{
  position:absolute;right:2%;bottom:1%;z-index:4;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.62;pointer-events:none;
  transition:opacity .4s var(--ease);
}
.squeeze__scene.is-used .squeeze__hint{opacity:0}
@media (max-width:900px){.squeeze__scene{width:min(330px,86vw)}.squeeze__bottle{width:27%}}

/* ── reviews on the food spread ─────────────────────────────── */
.revs-sec{position:relative;isolation:isolate;overflow:clip}
.revs-sec__bg{position:absolute;inset:0;z-index:0}
.revs-sec__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.revs-sec__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(20,17,16,.80) 0%, rgba(20,17,16,.66) 50%, rgba(20,17,16,.84) 100%);
}
.revs-sec .rev{background:#fff;color:var(--ink)}
.rev__top{display:flex;align-items:center;gap:11px}
.rev__av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--red);color:#fff;font-family:var(--disp);font-weight:800;font-size:18px;
}
.rev__top cite{display:block;font-style:normal;font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.2}
.rev__top .stars{font-size:13px;letter-spacing:1.5px}
.revs-sec .rev figcaption{font-size:12.5px;color:var(--ink-soft)}

/* ── newsletter popup, same behaviour as version 1 ─────────── */
.pop{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:20px;
  background:rgba(28,26,26,.62);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.pop.is-open{opacity:1;visibility:visible}
.pop__card{
  position:relative;width:min(460px,100%);
  background:var(--cream, #FFFFFF);border-radius:var(--r-l);
  padding:clamp(28px,4vw,40px);box-shadow:var(--sh-4);
  text-align:center;
  transform:translateY(16px) scale(.97);
  transition:transform .35s var(--ease);
  border-top:6px solid var(--red);
}
.pop.is-open .pop__card{transform:none}
.pop__logo{width:150px;margin:0 auto 14px}
.pop__card h2{color:var(--red-deep);margin:0 0 8px}
.pop__card p{margin:0 0 18px;color:var(--ink-soft);font-size:15.5px}
.pop__close{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(28,26,26,.08);color:var(--ink);
  display:grid;place-items:center;transition:background .2s;
}
.pop__close:hover{background:rgba(28,26,26,.16)}
.pop__close svg{width:18px;height:18px}
.pop form{display:grid;gap:10px}
.pop input{
  width:100%;font:inherit;font-size:16px;
  border:2px solid var(--line);border-radius:var(--r-pill);
  padding:14px 18px;background:var(--white);text-align:center;
}
.pop input:focus{outline:none;border-color:var(--red)}
.pop__fine{font-size:12.5px;color:var(--ink-soft);margin:4px 0 0}
.pop__ok{display:none;font-weight:700;color:#256B31}
.pop__ok.is-on{display:block}