/* =========================================================================
   SLICE — wood-fired pizza · retro-cartoon maximalist
   ========================================================================= */

:root{
  /* palette */
  --red:#e11015;   --red-2:#c20d11;  --red-deep:#7a0d10;
  --cream:#f1e5cf; --cream-2:#ecdcc0; --paper:#f6ecda;
  --yellow:#f7c63b;--yellow-2:#eab21f;
  --ink:#23150f;   --ink-muted:#5a4a40; --white:#fff7ea;
  --maroon:#4b0a0e;--orange:#e96a2b;

  /* type */
  --f-bubble:'Luckiest Guy', system-ui, sans-serif;
  --f-display:'Paytone One', system-ui, sans-serif;
  --f-body:'Fredoka', system-ui, sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:clip; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-weight:500; line-height:1.5;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; height:100vh; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
ul{ list-style:none; margin:0; padding:0; }
section{ position:relative; }
:focus-visible{ outline:3px dashed var(--red); outline-offset:4px; }
.menu-overlay :focus-visible{ outline-color:var(--cream); }
body.menu-open{ overflow:hidden; }

/* grain overlay */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================== TYPOGRAPHY UTILS =============================== */
.display{
  font-family:var(--f-display); font-weight:400; line-height:.92;
  text-transform:uppercase; letter-spacing:-.01em; margin:0;
  color:var(--red);
  -webkit-text-stroke:9px var(--white); paint-order:stroke fill;
}
/* shadow on the animated children, not the parent — keeps GSAP reveals composited */
.display .dline{ display:block; filter:drop-shadow(0 12px 16px rgba(60,12,8,.20)); }
.display--red{ color:var(--red); -webkit-text-stroke-color:var(--white); }
.display--cream{ color:var(--cream); -webkit-text-stroke-color:#fff; }
.display--cream .dline{ filter:drop-shadow(0 10px 14px rgba(0,0,0,.22)); }

.eyebrow,.sticker{
  font-family:var(--f-bubble); font-weight:400; letter-spacing:.03em; line-height:1;
  color:var(--red); -webkit-text-stroke:3.5px var(--white); paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(0,0,0,.10); display:inline-block;
}
.eyebrow{ font-size:clamp(1rem,1.7vw,1.4rem); transform:rotate(-4deg); margin-bottom:.7em; }
.eyebrow--ghost{ color:var(--red); -webkit-text-stroke-color:#fff; }
.sticker{ font-size:clamp(.85rem,1.3vw,1.15rem); transform:rotate(var(--rot,0)); }
.sticker--yellow{ color:var(--yellow); -webkit-text-stroke-color:var(--red-deep); }
.sticker--red{ color:var(--red); }

.lede{
  font-family:var(--f-body); font-weight:500; font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.55; max-width:34ch; color:var(--ink);
}
.lede--ink{ color:var(--ink); }

/* =============================== BUTTONS =============================== */
.btn{ font-family:var(--f-bubble); letter-spacing:.03em; display:inline-flex; align-items:center; gap:.6em;
  transition:transform .3s var(--ease), background .25s, color .25s, box-shadow .3s; }
.btn--oval{
  background:var(--red); color:#fff; font-size:clamp(1rem,1.4vw,1.25rem);
  padding:.85em 2.1em; border-radius:50%/120%;
  box-shadow:0 8px 0 var(--red-deep), 0 14px 22px rgba(60,8,8,.28);
  -webkit-text-stroke:0;
}
.btn--oval:hover{ transform:translateY(-3px) rotate(-2deg) scale(1.04); box-shadow:0 11px 0 var(--red-deep),0 20px 30px rgba(60,8,8,.32); }
.btn--oval:active{ transform:translateY(3px) scale(.98); box-shadow:0 3px 0 var(--red-deep); }

.btn--pill{
  background:var(--red); color:#fff; font-size:.95rem; padding:.55em 1.4em; border-radius:999px;
  box-shadow:0 5px 0 var(--red-deep); min-height:44px;
}
.btn--pill:hover{ transform:translateY(-2px) rotate(-2deg); }
.btn--menu{
  color:var(--ink); font-size:.95rem; padding:.5em 1.1em; border-radius:999px; min-height:44px;
  border:3px solid var(--ink); background:var(--cream);
}
.btn--menu:hover{ background:var(--ink); color:var(--cream); }
.btn--menu:hover .btn__bars i{ background:var(--cream); }
.btn__bars{ display:inline-flex; flex-direction:column; gap:3px; width:18px; }
.btn__bars i{ height:2.6px; background:var(--ink); border-radius:2px; transition:.3s; }

/* =============================== WAVES =============================== */
.wave{ position:absolute; left:0; width:100%; line-height:0; z-index:4; pointer-events:none; bottom:-1px; }
.wave svg{ display:block; width:100%; height:7.5vw; min-height:54px; }
.wave--top{ top:-1px; bottom:auto; }
.wave--bottom{ bottom:-1px; top:auto; }
.wave--red svg path{ fill:var(--red); }
.wave--cream svg path{ fill:var(--cream); }
.wave--yellow svg path{ fill:var(--yellow); }

/* =============================== CURSOR =============================== */
.cursor{
  position:fixed; top:0; left:0; z-index:9000; width:42px; height:42px; margin:-21px 0 0 -21px;
  border:2.5px solid var(--ink); border-radius:50%; pointer-events:none;
  display:grid; place-items:center; transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s; mix-blend-mode:normal;
}
.cursor__label{ font-family:var(--f-bubble); font-size:.7rem; color:#fff; opacity:0; transition:.2s; text-transform:uppercase; }
.cursor.is-active{ width:84px; height:84px; margin:-42px 0 0 -42px; background:var(--red); border-color:var(--red); }
.cursor.is-active .cursor__label{ opacity:1; }
@media (pointer:coarse){ .cursor{ display:none; } }

/* =============================== LOADER =============================== */
html:not(.js) .loader, html:not(.js) .reveal{ display:none; }
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--red);
  display:grid; place-items:center; color:var(--cream);
}
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; width:min(86vw,420px); text-align:center; }
.loader__pizza{ width:min(54vw,250px,40vh); height:auto; filter:drop-shadow(0 18px 26px rgba(0,0,0,.3)); }
.loader .lp--sauce,.loader .lp--cheese,.loader .lp--pep,.loader .lp--basil,.loader .lp--face{ opacity:0; }
.loader__status{
  font-family:var(--f-bubble); font-size:clamp(1.1rem,3.4vw,1.5rem); letter-spacing:.02em; margin:0;
  -webkit-text-stroke:2.5px var(--red-deep); paint-order:stroke fill; min-height:1.5em;
}
.loader__bar{ width:100%; height:12px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.2); }
.loader__fill{ display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--yellow),var(--cream)); }
.loader__count{ font-family:var(--f-bubble); font-size:1rem; margin:0; letter-spacing:.05em; }

/* =============================== COLOR-BAND REVEAL =============================== */
.reveal{ position:fixed; inset:0; z-index:9998; pointer-events:none; }
.reveal__band{
  position:absolute; left:-5%; width:110%; height:130%; top:0; background:var(--c);
  border-radius:0 0 50% 50%/0 0 16vw 16vw; transform:translateY(0);
}
.reveal__band:nth-child(1){ z-index:5; }
.reveal__band:nth-child(2){ z-index:4; }
.reveal__band:nth-child(3){ z-index:3; }
.reveal__band:nth-child(4){ z-index:2; }

/* =============================== NAV =============================== */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:max(clamp(.7rem,1.8vw,1.3rem),env(safe-area-inset-top)) max(clamp(1rem,3vw,2.4rem),env(safe-area-inset-right)) clamp(.7rem,1.8vw,1.3rem) max(clamp(1rem,3vw,2.4rem),env(safe-area-inset-left));
  transition:transform .4s var(--ease), background .4s, padding .4s;
}
.nav.is-hidden{ transform:translateY(-130%); }
.nav.is-stuck{ background:rgba(241,229,207,.86); backdrop-filter:blur(8px); box-shadow:0 4px 20px rgba(60,12,8,.10); }
.nav__logo{
  font-family:var(--f-bubble); font-size:clamp(1.6rem,3vw,2.3rem); color:var(--red);
  -webkit-text-stroke:2.5px var(--white); paint-order:stroke fill; letter-spacing:.02em;
}
.nav__actions{ display:flex; align-items:center; gap:.8rem; }

/* fullscreen menu */
.menu-overlay{
  position:fixed; inset:0; z-index:115; background:var(--red); color:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  overflow-y:auto; padding:4.5rem 1rem 2rem;
  clip-path:circle(0% at calc(100% - 5rem) 3rem); transition:clip-path .7s var(--ease); pointer-events:none;
}
.menu-overlay.is-open{ clip-path:circle(150% at calc(100% - 5rem) 3rem); pointer-events:auto; }
.menu-overlay__list{ text-align:center; }
.menu-overlay__list li{ overflow:hidden; }
.menu-overlay__list a{
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.8rem,min(9vw,10vh),6rem); line-height:1.05;
  color:var(--cream); -webkit-text-stroke:2px var(--red-deep); paint-order:stroke fill;
  display:inline-block; transition:color .2s, transform .3s var(--ease);
}
.menu-overlay__list a:hover{ color:var(--yellow); transform:rotate(-2deg) scale(1.04); }
.menu-overlay__meta{ font-family:var(--f-bubble); font-size:1.05rem; letter-spacing:.04em; color:var(--white); }
.menu-overlay__phone{ font-size:1.4em; }

/* =============================== HERO =============================== */
.hero{
  min-height:100svh; padding:clamp(4.5rem,9vh,7rem) clamp(1rem,3vw,2.4rem) 2rem;
  display:grid; align-content:center; justify-items:center; gap:0;
}
.hero__headline{
  font-family:var(--f-display); text-transform:uppercase; text-align:center; white-space:nowrap;
  font-size:clamp(3.4rem,24vw,18rem); line-height:.82; letter-spacing:-.02em; color:var(--red);
  -webkit-text-stroke:clamp(4px,1vw,13px) var(--white); paint-order:stroke fill;
  margin:0; position:relative; z-index:2;
}
.hero__headline .line{ display:block; white-space:nowrap; }
.hero__headline .char{ display:inline-block; will-change:transform; filter:drop-shadow(0 14px 18px rgba(60,12,8,.18)); }
.hero__product{
  position:relative; margin:-7.5vw 0 -3vw; z-index:3; width:clamp(190px,27vw,370px);
}
.hero__disc{
  aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:0 30px 50px rgba(60,12,8,.35);
  border:5px solid var(--white); transform:rotate(-6deg);
}
.hero__disc img{ width:100%; height:100%; object-fit:cover; }
.eyes{ position:absolute; top:24%; left:50%; transform:translateX(-50%); width:46%; z-index:5; pointer-events:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.eyes--big{ top:30%; width:52%; }
.hero__brand{
  font-family:var(--f-bubble); font-size:clamp(3.4rem,15vw,13rem); line-height:.8; color:var(--yellow);
  -webkit-text-stroke:clamp(3px,.7vw,8px) var(--white); paint-order:stroke fill;
  filter:drop-shadow(0 12px 16px rgba(60,12,8,.2)); z-index:2; position:relative; margin-top:-1vw;
}
.hero__badge{ position:absolute; z-index:6; }
.hero__badge--a{ top:15%; left:7%; }
.hero__badge--b{ top:39%; right:7%; }
.hero__copy{ position:absolute; bottom:clamp(1.5rem,5vh,3.5rem); width:min(38vw,360px); }
.hero__copy--left{ left:clamp(1rem,3vw,2.6rem); }
.hero__copy--right{ right:clamp(1rem,3vw,2.6rem); text-align:right; }
.hero__copy p{ margin:0; font-size:clamp(.85rem,1.1vw,1.05rem); line-height:1.5; }

.scroll-cue{ position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; font-family:var(--f-bubble); font-size:.75rem; letter-spacing:.1em; color:var(--ink); opacity:.7; }
.scroll-cue i{ width:2px; height:34px; background:var(--ink); border-radius:2px; transform-origin:top; animation:cue 1.6s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);} 40%{transform:scaleY(1);} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* =============================== MARQUEE =============================== */
.marquee{ background:var(--red); color:var(--cream); overflow:hidden; padding:.7rem 0; transform:rotate(-1.4deg) scale(1.02); margin:1rem 0; border-top:4px solid var(--red-deep); border-bottom:4px solid var(--red-deep); }
.marquee__track{ display:flex; width:max-content; animation:marq 28s linear infinite; }
.marquee__track span{ font-family:var(--f-bubble); font-size:clamp(1rem,2vw,1.6rem); letter-spacing:.04em; white-space:nowrap; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* =============================== CLASSIC / STONE BAKED =============================== */
.classic{ background:var(--cream); padding:clamp(4rem,9vw,8rem) 0 9vw; text-align:center; overflow:hidden; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2.4rem); position:relative; z-index:2; }
.classic .display{ font-size:clamp(2.6rem,9vw,8rem); }
.classic .lede{ margin:1.4rem auto 2rem; text-align:center; max-width:48ch; }
.mascot{ position:absolute; pointer-events:none; z-index:3; }
.mascot--selfie{ width:clamp(120px,15vw,210px); left:4%; bottom:24%; transform:rotate(-8deg); }
.cards{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(1rem,2.4vw,2.4rem); margin-top:clamp(2rem,5vw,4rem); padding:0 1rem; position:relative; z-index:2; }
.card{
  margin:0; width:clamp(180px,22vw,300px); aspect-ratio:3/4; border-radius:18px; overflow:hidden;
  border:6px solid var(--white); box-shadow:0 22px 40px rgba(60,12,8,.26); transform:rotate(var(--rot,0));
  background:var(--white);
}
.card:nth-child(2){ margin-top:clamp(-3rem,-4vw,-1rem); }
.card img{ width:100%; height:100%; object-fit:cover; }

/* =============================== FOOD THAT FEELS GOOD (RED) =============================== */
.feelgood{ background:var(--red); color:var(--cream); padding:clamp(5rem,11vw,10rem) 1rem 11vw; text-align:center; overflow:hidden; }
.feelgood .eyebrow--ghost{ position:relative; z-index:4; }
.feelgood__head{ font-size:clamp(2.8rem,11vw,10rem); position:relative; z-index:4; }
.feelgood__product{ position:relative; width:clamp(260px,40vw,520px); margin:clamp(1rem,3vw,2.5rem) auto; z-index:3; }
.feelgood__disc{ aspect-ratio:1; border-radius:50%; overflow:hidden; border:6px solid var(--white); box-shadow:0 30px 60px rgba(0,0,0,.4); transform:rotate(4deg); }
.feelgood__disc img{ width:100%; height:100%; object-fit:cover; }
.glove{ position:absolute; top:42%; width:38%; z-index:5; filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.glove--left{ left:-18%; transform:rotate(-8deg); }
.glove--right{ right:-18%; transform:rotate(8deg); }
.mascot--corner{ width:clamp(80px,9vw,140px); }
.mascot--tl{ top:10%; left:6%; transform:rotate(-12deg); }
.mascot--tr{ top:14%; right:6%; transform:rotate(10deg); }
.feelgood__stats{ display:flex; align-items:center; justify-content:center; gap:clamp(1.5rem,5vw,5rem); margin-top:1.5rem; flex-wrap:wrap; position:relative; z-index:4; }
.stats{ font-family:var(--f-bubble); font-size:clamp(.9rem,1.3vw,1.15rem); line-height:1.7; letter-spacing:.03em; color:var(--white); }
.stats--right{ text-align:right; }

/* =============================== FULL-BLEED =============================== */
.fullbleed{ position:relative; height:min(80vh,720px); overflow:hidden; background:var(--maroon); }
.fullbleed__img{ position:absolute; inset:-12% 0; }
.fullbleed__img img{ width:100%; height:100%; object-fit:cover; will-change:transform; }

/* =============================== EVERY SLICE PACKED (CREAM) =============================== */
.layers{ background:var(--cream); padding:clamp(6rem,14vw,12rem) 1rem 12vw; text-align:center; overflow:hidden; min-height:90vh; display:grid; align-content:center; }
.layers__head{ font-size:clamp(2.2rem,10vw,9.5rem); position:relative; z-index:3; }
.floaters{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.floater{ position:absolute; left:var(--x); top:var(--y); width:clamp(64px,9vw,130px); height:auto; filter:drop-shadow(0 14px 18px rgba(60,12,8,.22)); will-change:transform; }

/* =============================== TAKE AWAY (YELLOW) =============================== */
.takeaway{ background:var(--yellow); color:var(--ink); padding:clamp(4rem,8vw,7rem) 1rem 12vw; overflow:hidden; }
.takeaway__intro{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:5; }
.takeaway__head{ font-size:clamp(2.6rem,9.5vw,9rem); }
.takeaway .lede{ margin-top:1.2rem; }
.flight{ position:relative; max-width:1200px; margin:2rem auto 0; min-height:1500px; }
.flight__path{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.plane{ position:absolute; top:0; left:0; width:clamp(60px,7vw,104px); z-index:3; offset-rotate:auto; }
.city{ position:absolute; left:var(--cx); top:var(--cy); width:clamp(150px,18vw,250px); transform:rotate(var(--rot,0)); z-index:2; }
.city__photo{ aspect-ratio:3/4; border-radius:16px; overflow:hidden; border:5px solid var(--cream); box-shadow:0 20px 36px rgba(80,50,0,.3); background:var(--cream); }
.city__photo img{ width:100%; height:100%; object-fit:cover; }
.city__tag{ position:absolute; top:-1.4em; left:50%; transform:translateX(-50%) rotate(-5deg); z-index:3; white-space:nowrap; }

/* =============================== FEEL THE CHANGE (CTA) =============================== */
.change{ background:var(--cream); padding:clamp(4rem,9vw,8rem) clamp(1rem,4vw,3rem) clamp(4rem,8vw,7rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; overflow:hidden; }
.change__text{ position:relative; }
.change__head{ font-size:clamp(3rem,9vw,8.5rem); }
.change .lede{ margin:1.4rem 0 2rem; }
.change__photo{ margin:0; border-radius:24px; overflow:hidden; border:7px solid var(--white); box-shadow:0 30px 56px rgba(60,12,8,.3); transform:rotate(2deg); aspect-ratio:4/5; }
.change__photo img{ width:100%; height:100%; object-fit:cover; }
.mascot--chef{ width:clamp(150px,17vw,230px); position:absolute; right:-6%; bottom:-8%; transform:rotate(6deg); z-index:1; opacity:.95; }

/* =============================== FOOTER =============================== */
.footer{ background:var(--cream); color:var(--ink); padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,3rem) clamp(1.5rem,4vw,3rem); overflow:hidden; }
.footer__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; }
.footer__nav{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); font-family:var(--f-bubble); font-size:clamp(.95rem,1.4vw,1.2rem); letter-spacing:.03em; }
.footer__nav a{ display:inline-flex; align-items:center; min-height:44px; transition:color .2s, transform .2s; }
.footer__nav a:hover{ color:var(--red); transform:translateY(-2px); }
.footer__rights{ font-family:var(--f-body); font-weight:500; color:var(--ink-muted); font-size:.9rem; }
.footer__tag{ max-width:var(--maxw); margin:1rem auto 0; padding-top:1.2rem; border-top:2px solid rgba(35,21,15,.18); font-family:var(--f-bubble); letter-spacing:.04em; font-size:clamp(.9rem,1.3vw,1.1rem); }
.footer__tag .phone-link{ font-size:1.35em; }
.footer__brand{ display:flex; justify-content:center; align-items:flex-end; gap:clamp(.2rem,1vw,1rem); margin-top:clamp(1rem,3vw,2rem); }
.fb-letter{
  font-family:var(--f-bubble); font-size:clamp(4.5rem,23vw,20rem); line-height:.9; color:var(--red);
  -webkit-text-stroke:clamp(3px,.8vw,9px) var(--white); paint-order:stroke fill; position:relative;
}
.fb-ing{ position:absolute; width:34%; height:34%; left:50%; top:54%; transform:translate(-50%,-50%); }
.fb-ing--top{ top:30%; }

/* =============================== COOKIE =============================== */
.cookie{
  position:fixed; left:50%; bottom:max(1.2rem,env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(160%); z-index:200;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center;
  background:var(--paper); border:3px solid var(--ink); border-radius:18px; padding:.9rem 1.2rem;
  box-shadow:0 14px 30px rgba(60,12,8,.2); width:min(92vw,560px);
  visibility:hidden; transition:transform .6s var(--ease), visibility 0s .6s;
}
.cookie.is-shown{ transform:translateX(-50%) translateY(0); visibility:visible; transition-delay:0s; }
.cookie__dot{ width:14px; height:14px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(247,198,59,.3); flex:none; }
.cookie__txt{ margin:0; font-size:.85rem; line-height:1.35; flex:1 1 200px; }
.cookie__txt strong{ font-family:var(--f-bubble); font-weight:400; letter-spacing:.03em; text-transform:uppercase; font-size:.8rem; }
.cookie__btns{ display:flex; gap:.5rem; }
.cookie__btn{ font-family:var(--f-bubble); font-size:.85rem; padding:.5em 1.2em; border-radius:999px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.cookie__btn--ghost{ border:2px solid var(--ink); }
.cookie__btn--solid{ background:var(--yellow); }
.cookie__btn--solid:hover{ background:var(--red); color:#fff; }
.cookie__btn--ghost:hover{ background:var(--ink); color:var(--cream); }

/* =============================== PAGE SWEEP (in-page nav transition) =============================== */
.page-sweep{ position:fixed; inset:0; z-index:8000; pointer-events:none; }
.page-sweep__band{
  position:absolute; left:-5%; width:110%; height:118%; top:-3%;
  background:var(--c); transform:translateY(118%); will-change:transform;
  border-radius:50% 50% 0 0/9vw 9vw 0 0;
}

/* =============================== PHONE LINKS =============================== */
.phone-link{
  font-family:var(--f-bubble); color:var(--red-2); letter-spacing:.04em; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--yellow-2); text-underline-offset:4px;
  transition:color .2s, transform .2s;
}
.phone-link:hover{ color:var(--red-2); transform:rotate(-1deg) scale(1.03); }
.change__phone{ margin:1.2rem 0 0; font-size:clamp(1rem,1.4vw,1.15rem); }
.change__phone .phone-link{
  display:block; width:fit-content; margin-top:.1em;
  font-size:clamp(1.9rem,4vw,3rem); line-height:1.15;
  text-decoration-thickness:4px; text-underline-offset:7px;
}
.menu-overlay__phone{
  font-family:var(--f-bubble); color:var(--white); letter-spacing:.04em; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--yellow); text-underline-offset:4px;
  transition:color .2s;
}
.menu-overlay__phone:hover{ color:var(--yellow); }

/* =============================== sticker-art shared =============================== */
.sticker-art{ filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 10px 14px rgba(0,0,0,.22)); }
.mascot--chef svg{ filter:drop-shadow(0 0 3px #fff) drop-shadow(0 10px 16px rgba(60,12,8,.18)); }

/* =============================== REVEAL (scroll) initial states =============================== */
.js [data-reveal]{ opacity:0; transform:translateY(34px); }
.js [data-reveal-head] .dline{ opacity:0; transform:translateY(60px) rotate(-3deg); display:block; }
.js [data-card]{ opacity:0; }
.js [data-city]{ opacity:0; }
/* Motion is intentionally forced on for every visitor (see js/main.js): the OS
   "reduce motion" preference no longer disables the marquee, scroll-cue or reveal
   animations, so the site looks identical on every machine. Use ?static for a
   motion-free capture instead. */
/* debug/static capture mode (?static) — show everything, no motion */
.is-static [data-reveal],
.is-static [data-reveal-head] .dline,
.is-static [data-card],
.is-static [data-city]{ opacity:1 !important; transform:none !important; }
.is-static [data-city]{ transform:rotate(var(--rot,0)) !important; }
.is-static .grain{ display:none; }
.is-static *, .is-static *::before, .is-static *::after{ animation:none !important; }

/* Honour the OS "reduce motion" preference even if JS never runs (CSS-only
   marquee / scroll-cue loops still need stopping). JS folds the same preference
   into FROZEN + the .is-static class for the GSAP-driven motion. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =============================== RESPONSIVE =============================== */

/* ---- Large screens (≥1500px): let the hero fill more of the space ---- */
@media (min-width:1500px){
  .hero__headline{ font-size:min(24vw,30rem); }
  .hero__product{ width:min(26vw,480px); }
  .hero__brand{ font-size:min(15vw,21rem); }
}

/* ---- Below desktop (≤1023px): stacked hero, single-column CTA ---- */
@media (max-width:1023px){
  .hero__copy{ position:static; width:min(92vw,560px); text-align:center; margin:.5rem auto 0; }
  .hero__copy--right{ text-align:center; }
  .hero{ padding-bottom:4.5rem; }
  .change{ grid-template-columns:1fr; }
  .change__photo{ order:-1; width:100%; max-width:520px; margin:0 auto; }
  .mascot--chef{ right:0; bottom:auto; top:-3%; width:clamp(110px,16vw,168px); }
}

/* ---- Flight: stack the city cards into a clean column on portrait tablets & phones ---- */
@media (max-width:900px){
  .flight{ position:relative; min-height:0; display:flex; flex-direction:column; align-items:center;
    gap:clamp(2.4rem,6vw,3.4rem); padding-top:1.5rem; }
  .flight__path,.plane{ display:none; }
  .city{ position:relative; left:auto !important; top:auto !important; width:min(78vw,300px); transform:rotate(var(--rot,0)); }
}

/* ---- Phone (≤600px) ---- */
@media (max-width:600px){
  .nav__actions .btn--pill{ display:none; }
  .feelgood__stats{ gap:1.2rem; }
  .glove{ width:46%; }
  .glove--left{ left:-20%; } .glove--right{ right:-20%; }
  .marquee{ transform:rotate(-2deg) scale(1.03); }
  .hero__badge{ display:none; }
  .hero__product{ width:clamp(150px,46vw,240px); }
  .scroll-cue{ display:none; }
}

/* ---- Short desktop windows: the scroll cue has no room below the brand ---- */
@media (max-height:740px){
  .scroll-cue{ display:none; }
}

/* ---- Notch / safe-area side padding ---- */
@supports (padding:max(0px)){
  .feelgood,.layers,.takeaway{ padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)); }
  .change,.footer{ padding-left:max(clamp(1rem,4vw,3rem),env(safe-area-inset-left)); padding-right:max(clamp(1rem,4vw,3rem),env(safe-area-inset-right)); }
}

/* ---- Short / landscape phones: shrink the hero so it never overflows the fold ---- */
@media (max-height:600px) and (orientation:landscape){
  .hero{ min-height:auto; align-content:start; padding:5rem 1rem 2.5rem; }
  .hero__headline{ font-size:20vh; }
  .hero__product{ width:26vh; margin:-2vh 0 0; }
  .hero__brand{ font-size:15vh; }
  .hero__copy,.hero__badge,.scroll-cue{ display:none; }
}