/* 3rd Wave Cafe v5.1. Phone first (390 px); wider screens adapt in the min-width blocks at the end.
   The wave runs the page: every section's top edge is a wave in that section's color. Palette = the logo system.
   Screen modes, one rule each (CSS, the <picture>/preload media and main.js use these exact queries):
     desktop nav      (min-width: 1180px)                         else the menu button + sheet
     wide hero        (orientation: landscape)                    else the tall keyed loop (square counts as portrait)
     sideways phone   (orientation: landscape) and (max-height: 520px)   slim bar with Order, no bottom bar */
@font-face { font-family: 'DM Sans'; src: url(assets/fonts/dmsans-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Titan One'; src: url(assets/fonts/titanone-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Yellowtail'; src: url(assets/fonts/yellowtail-latin.woff2) format('woff2'); font-display: swap; }
:root {
  --aqua: #6CCEE0; --teal: #2B8D8A; --teal-deep: #1E6E6B; --foam: #92CECD; --foam-pale: #EAF6F5;
  --orange: #E16F45; --sunset: #F2895E; --ink: #13302E; --white: #fff;
  --kiwi: #8FD14F; --kiwi-deep: #4F8A1C; --mango: #FFD45C; --mango-deep: #C98F14; --berry: #F2453D; --berry-deep: #A82A24; --pitaya: #C72F72;
  --display: 'Titan One', 'Arial Rounded MT Bold', ui-rounded, system-ui, sans-serif;
  --body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Yellowtail', cursive;
  --pad: max(18px, env(safe-area-inset-left), env(safe-area-inset-right)); --wave: 54px; --gap-after: calc(var(--wave) + 44px); --logo-w: min(64vw, 440px); --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 70px; scroll-padding-bottom: 96px; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: .005em; text-wrap: balance; }
html:not(.js) .burger, html:not(.js) .car-btn, html:not(.js) .play, html:not(.js) .dots { display: none; }   /* they need main.js */
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 60; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.sheet :focus-visible, .ride :focus-visible, .l-bowls :focus-visible, .l-eats :focus-visible, .l-coffee :focus-visible, .film :focus-visible, .foot :focus-visible { outline-color: #fff; }
.orderbar :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink); }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- buttons: ink = order (mango on dark grounds), one family everywhere ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 999px;
  font: 700 19px/1 var(--body); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--ease), background-color .26s var(--ease), box-shadow .26s var(--ease); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); }
.btn-order { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #000, 0 10px 22px -10px rgba(0, 0, 0, .55); }
.btn-order:active { box-shadow: 0 1px 0 #000; transform: translateY(3px); }
.on-dark .btn-order, .l-coffee .btn-order, .film .btn-order { background: var(--mango); color: var(--ink); box-shadow: 0 4px 0 var(--mango-deep), 0 10px 22px -10px rgba(0, 0, 0, .6); }
.btn-ghost { border: 2.5px solid currentColor; background: rgba(255, 255, 255, .35); }
.btn-line { border: 2.5px solid currentColor; background: transparent; }
@media (hover: hover) { .btn-line:hover { background: rgba(19, 48, 46, .08); } .sheet .btn-line:hover { background: rgba(255, 255, 255, .12); }
  .link:hover { border-bottom-width: 4px; } .car-btn:hover:not(:disabled) { background: var(--foam-pale); } .jump a:hover img { transform: scale(1.04); } .jump img { transition: transform .26s var(--ease); }
  .sheet-links a:hover { border-bottom-color: #fff; } .facts a:hover b { text-decoration: underline; }
  .btn-order:hover { background: #24504C; } .on-dark .btn-order:hover, .l-coffee .btn-order:hover { background: #FFE07F; } .btn-ghost:hover { background: rgba(255, 255, 255, .6); } }
.link { display: inline-flex; align-items: flex-end; min-height: 44px; font-weight: 700; text-decoration: none; border-bottom: 2.5px solid currentColor; padding: 0 0 2px; }
.link-ig { display: inline-flex; align-items: center; gap: 7px; } .link-ig svg { width: 18px; height: 18px; }

/* ---------- waves: each section's top edge ---------- */
.wave { position: absolute; left: 0; top: 0; width: 100%; height: var(--wave); transform: translateY(-99%); pointer-events: none; }
.wave path { fill: var(--bg); }

/* ---------- header: over the hero only the round buttons (Instagram, Facebook, call, menu); the logo bar fades in once the hero is passed.
   Order in the bar: logo · social icons · call · order · menu. ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 10px; height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left)); background: transparent; transition: background-color .26s var(--ease), box-shadow .26s var(--ease); }
.top.solid { background: #fff; box-shadow: 0 1px 0 rgba(19, 48, 46, .08), 0 8px 20px -14px rgba(19, 48, 46, .35); }
.brand { flex: none; opacity: 0; pointer-events: none; transition: opacity .26s var(--ease); }
.top.solid .brand, html:not(.js) .brand, .brand:focus-visible { opacity: 1; pointer-events: auto; }
.brand img { height: 46px; width: auto; }
.nav { display: none; }
.top-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ico { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, .82); box-shadow: 0 6px 14px -8px rgba(19, 48, 46, .55); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .26s var(--ease), transform .14s var(--ease); }
.ico:active { transform: scale(.94); }
.ico svg { width: 21px; height: 21px; }
.top.solid .ico { background: var(--foam-pale); box-shadow: none; }
.top-call span { display: none; }
.top-order { display: none; }
.burger { padding: 14px 12px; background: var(--ink) !important; }
.burger span { display: block; width: 20px; height: 2.5px; background: #fff; border-radius: 2px; margin: 0 0 4.5px; }
.burger span:last-child { margin: 0; }
@media (max-width: 339px) { .ico-fb { display: none; } .top-acts { gap: 6px; } .brand img { height: 40px; } }
@media (hover: hover) { .ico:hover { background: #fff; } .top.solid .ico:hover { background: #D8EEEC; } }

/* the pause button: hero corner, same round style as the header icons */
.motion-btn { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 10px); left: var(--pad); }
.motion-btn svg { width: 18px; height: 18px; fill: currentColor; }
.motion-btn .i-play, .paused .motion-btn .i-pause { display: none; } .paused .motion-btn .i-play { display: inline; }
.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }

/* the menu sheet: its own Close button, food sections first, then the two actions */
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--ink); color: #fff; overflow-y: auto; overscroll-behavior: contain;
  padding: env(safe-area-inset-top) max(var(--pad), env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left)); }
.sheet[hidden] { display: none; }
/* the whole sheet fits one screen on every phone: sizes follow the SMALL viewport height (Safari toolbar showing) */
.sheet-top { display: flex; align-items: center; justify-content: space-between; height: clamp(52px, 8svh, 64px); }
.sheet-logo img { height: clamp(36px, 5.6svh, 46px); width: auto; }
.sheet-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: #fff; color: var(--ink);
  font: 700 16px/1 var(--body); cursor: pointer; }
.sheet-close svg { width: 20px; height: 20px; }
.sheet-body { max-width: 560px; margin: 0 auto; padding-top: clamp(4px, 1.2svh, 14px); }
.sheet-label { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--foam); margin-bottom: clamp(6px, 1.2svh, 12px); }
.sheet-food { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 1.2svh, 10px); }
.sheet-food a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, .9svh, 8px); padding: clamp(6px, 1.3svh, 12px) 8px; border-radius: 22px;
  background: rgba(255, 255, 255, .07); text-align: center; text-decoration: none; font-family: var(--display); font-size: min(4.4vw, 2.6svh, 19px); line-height: 1.05; }
.sheet-food img { flex: none; width: min(14vw, 7.6svh, 60px); height: min(14vw, 7.6svh, 60px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--c); }
.sheet-food .sheet-all { justify-content: center; background: var(--mango); color: var(--ink); font-size: min(5.2vw, 3svh, 22px); }
.sheet-food span { min-width: 0; }
.sheet-links { display: flex; gap: 22px; margin: clamp(6px, 1.6svh, 22px) 2px 0; font-weight: 700; font-size: 17px; }
.sheet-links a { padding: clamp(8px, 1.3svh, 10px) 0; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, .5); }
.sheet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: clamp(10px, 2svh, 22px); }
.sheet-acts .btn { min-height: clamp(48px, 7svh, 54px); }
.sheet-acts .btn-order { background: var(--mango); color: var(--ink); box-shadow: 0 4px 0 var(--mango-deep); }
.sheet-acts .btn-line { color: #fff; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: clamp(10px, 2svh, 24px); padding-top: clamp(8px, 1.6svh, 18px); border-top: 1.5px solid rgba(255, 255, 255, .14); font-size: 14.5px; line-height: 1.45; color: #D6F0EF; }
.socials { display: flex; gap: 8px; }
.sheet .ico { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
body.menu-open { overflow: hidden; }
@media (max-width: 379px) {
  .sheet-acts .btn { font-size: 16px; padding: 0 10px; gap: 6px; }
  .sheet-links { font-size: 15.5px; gap: 18px; }
  .sheet-foot { font-size: 13px; gap: 8px; } .sheet-foot .ico { width: 40px; height: 40px; }
  .sheet-food a { font-size: min(4.6vw, 2.5svh, 18px); }
}
@media (max-width: 379px) and (max-height: 620px) {
  .sheet-food img { width: min(12vw, 6.4svh); height: min(12vw, 6.4svh); }
  .sheet-label { display: none; }
}
@media (hover: hover) { .sheet-food a:hover { background: rgba(255, 255, 255, .13); } .sheet-food .sheet-all:hover { background: #FFE07F; } }

/* ---------- 1. hero: the loop fills the phone screen, anchored to the bottom; its flat aqua sky continues above it ---------- */
.hero { --sky: #67BAD1; --tuck: 54px; --hero-logo: min(78vw, 380px); position: relative; isolation: isolate; overflow: hidden; background: var(--sky);
  height: 100vh; height: 100dvh; min-height: 560px; padding: 0 var(--pad); }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg picture { display: contents; }
.hero-bg img, .hero-video { position: absolute; left: 0; bottom: calc(var(--tuck) * -1); width: 100%; height: auto; aspect-ratio: 1080 / 1920;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); }
.hero-video { opacity: 0; transition: opacity .4s var(--ease); }
.hero-video.on { opacity: 1; }
.hero-canvas { display: none; }
/* keyed: the video's sky is made see-through on a canvas, so the giant words sit BEHIND the wave */
.hero.keyed .hero-canvas { display: block; position: absolute; left: 0; bottom: calc(var(--tuck) * -1); width: 100%; height: auto; aspect-ratio: 1080 / 1920;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tuck) - 130px), rgba(0,0,0,1) calc(100% - var(--tuck) - 130px), rgba(0,0,0,0.98) calc(100% - var(--tuck) - 119px), rgba(0,0,0,0.93) calc(100% - var(--tuck) - 108px), rgba(0,0,0,0.85) calc(100% - var(--tuck) - 97px), rgba(0,0,0,0.74) calc(100% - var(--tuck) - 86px), rgba(0,0,0,0.61) calc(100% - var(--tuck) - 75px), rgba(0,0,0,0.47) calc(100% - var(--tuck) - 65px), rgba(0,0,0,0.34) calc(100% - var(--tuck) - 54px), rgba(0,0,0,0.22) calc(100% - var(--tuck) - 43px), rgba(0,0,0,0.12) calc(100% - var(--tuck) - 32px), rgba(0,0,0,0.05) calc(100% - var(--tuck) - 21px), rgba(0,0,0,0) calc(100% - var(--tuck) - 10px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tuck) - 130px), rgba(0,0,0,1) calc(100% - var(--tuck) - 130px), rgba(0,0,0,0.98) calc(100% - var(--tuck) - 119px), rgba(0,0,0,0.93) calc(100% - var(--tuck) - 108px), rgba(0,0,0,0.85) calc(100% - var(--tuck) - 97px), rgba(0,0,0,0.74) calc(100% - var(--tuck) - 86px), rgba(0,0,0,0.61) calc(100% - var(--tuck) - 75px), rgba(0,0,0,0.47) calc(100% - var(--tuck) - 65px), rgba(0,0,0,0.34) calc(100% - var(--tuck) - 54px), rgba(0,0,0,0.22) calc(100% - var(--tuck) - 43px), rgba(0,0,0,0.12) calc(100% - var(--tuck) - 32px), rgba(0,0,0,0.05) calc(100% - var(--tuck) - 21px), rgba(0,0,0,0) calc(100% - var(--tuck) - 10px)); }
/* the page stays sky-blue behind the water down to where the smoothie always covers it (troughs behind a moving
   wave are see-through), then turns pink only under the hero's bottom fade, so the video melts into the pink band */
.hero.keyed { --pink: min(max(calc(var(--sea, calc(100% - 43vw + var(--tuck))) + 46px), calc(100% - 118px)), calc(100% - 26px));
  background: linear-gradient(to bottom, var(--sky) var(--pink), #DA5283 calc(var(--pink) + 26px)); }
.hero.keyed .hero-bg img { visibility: hidden; }
.hero.keyed .hero-video { opacity: 0; }
.hero-words { display: none; position: absolute; left: 0; right: 0; z-index: -2; top: var(--words-top, 46%); flex-direction: column; align-items: center;
  font-family: var(--display); font-size: var(--words-size, min(20vw, 110px)); line-height: .86; color: #fff; pointer-events: none; user-select: none; --wd: #2B7F7E; }
.hero.keyed .hero-words { display: flex; }
/* wide screens: the words run in 1 or 2 rows (main.js picks whichever lets them be bigger) */
.hero-words[data-rows="1"], .hero-words[data-rows="2"] { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: .28em; padding: 0 4vw; }
.hero-words[data-rows="1"] { flex-wrap: nowrap; white-space: nowrap; }
.hero-words[data-rows="2"]::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
.hero-words[data-rows="2"] span:nth-child(-n+2) { order: 1; } .hero-words[data-rows="2"] span:nth-child(n+3) { order: 3; }
.hero-words span { display: block; position: relative; text-shadow: 0 1px 0 var(--wd), 0 2px 0 var(--wd), 0 3px 0 var(--wd), 0 4px 0 var(--wd), 0 5px 0 var(--wd), 0 6px 0 var(--wd), 0 7px 0 var(--wd), 0 8px 0 var(--wd), 0 16px 22px rgba(19, 48, 46, .22); }
.hero-words span::after { content: attr(data-w); position: absolute; left: 0; top: 0; width: 100%; text-shadow: none; color: transparent;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, 0) 58%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; animation: sheen 6s var(--ease) infinite; }
.hero-words span:nth-child(2) { color: var(--kiwi); --wd: var(--kiwi-deep); }
.hero-words span:nth-child(4) { color: var(--mango); --wd: var(--mango-deep); }
.hero.c-berry .hero-words span:nth-child(4) { color: var(--berry); --wd: var(--berry-deep); }
.hero-script { display: none; }
.hero.keyed .hero-script { display: block; font-family: var(--script); font-size: clamp(18px, 7vw, 36px); line-height: 1.15; color: var(--ink); white-space: nowrap; margin-top: 2px; transform: rotate(-4deg);
  /* same sticker edge as the photo labels: white outline + soft drop shadow */
  text-shadow: 3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2.2px 2.2px #fff, -2.2px -2.2px #fff, 2.2px -2.2px #fff, -2.2px 2.2px #fff,
    0 6px 0 rgba(19, 48, 46, .18), 0 10px 18px rgba(19, 48, 46, .45); }
.hero.keyed h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.hero-top { position: relative; z-index: 2; padding-top: calc(env(safe-area-inset-top) + 56px); text-align: center; }
.hero h1 { font-size: clamp(25px, 7.2vw, 34px); margin: 6px auto 0; max-width: 14.5em; color: var(--ink); text-wrap: balance; }
.hero .ctas { display: none; }
@media (max-height: 720px) and (orientation: portrait) { .hero { --hero-logo: min(64vw, 280px); } .hero-top { padding-top: calc(env(safe-area-inset-top) + 50px); } .hero h1 { font-size: clamp(23px, 6.6vw, 30px); } .hero.keyed .hero-script { font-size: min(25px, 6.9vw); } }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.intro { padding: 34px var(--pad) 6px; }
.intro .eyebrow { color: #fff; }
.intro .sub { font-size: 18px; font-weight: 500; margin-top: 8px; max-width: 26em; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 15px; font-weight: 600; }
.facts a { display: inline-block; padding: 12px 0; margin: -12px 0; text-decoration: none; }
.stars { color: #FFD45C; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; margin-right: 7px; vertical-align: 1px; }

/* ---------- 2. intro band, 3. marquee; the 3D logo sits in the hero sky ---------- */
.ride { --bg: #C72F72; position: relative; background: linear-gradient(#DA5283, var(--bg) 48px); color: #fff;
  margin-top: -2px; padding-top: 2px; }   /* overlaps the hero by 2px: iOS gives the hero a fractional height that changes with the toolbar,
     which otherwise opens a flickering white hairline between the two */
/* the video's pink sea melts into the band below it (no hard edge) */

.stage { position: relative; width: var(--hero-logo); aspect-ratio: 1.465; margin: 0 auto; z-index: 5; touch-action: pan-y; }
.stage .poster, .stage .logo3d { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage .logo3d { opacity: 0; transition: opacity .52s var(--ease); cursor: grab; touch-action: pan-y; }
.stage .poster { transition: opacity .52s var(--ease) .1s; filter: drop-shadow(0 10px 14px rgba(19, 48, 46, .22)); }
.stage.is-live .logo3d { opacity: 1; }
.stage.is-live .poster { opacity: 0; }
.marquee { overflow: hidden; padding: 22px 0 calc(var(--wave) + 14px); }
.marquee-track { display: flex; align-items: center; gap: 18px; padding-right: 18px; width: max-content; animation: slide 38s linear infinite; }
.marquee span { font-family: var(--display); font-size: 30px; white-space: nowrap; }
.marquee i { font-style: normal; font-size: 14px; color: var(--kiwi); }
.marquee span { color: #fff; }
.marquee span:nth-of-type(4n+1) { color: var(--mango); }
.marquee span:nth-of-type(4n+3) { color: #C9F29B; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 4. jump row ---------- */
.jump { --bg: var(--white); position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 22px var(--pad) calc(30px + var(--wave)); background: var(--white); }
.jump::-webkit-scrollbar { display: none; }
.jump a { min-width: 0; text-decoration: none; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.2; }
.jump img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; margin-bottom: 7px; border: 3px solid var(--foam); }

/* ---------- 5. lanes ---------- */
.lane { position: relative; background: var(--bg); color: var(--fg); padding: 0 var(--pad) var(--gap-after); overflow-x: clip; }
.lane-visual { position: relative; padding-top: 118px; }
.word { position: absolute; top: 0; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); z-index: 0; display: flex; flex-direction: column; align-items: center;
  font-family: var(--display); font-size: clamp(64px, 22vw, 140px); line-height: .84; pointer-events: none; user-select: none; }
.word span { color: var(--word); }
.word span + span { color: transparent; -webkit-text-stroke: 2px var(--word); opacity: .55; }
.word span + span + span { opacity: .28; }
.ph { position: relative; z-index: 1; margin: 0 auto; width: 80%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 50% 50% 28px 28px / 32% 32% 28px 28px; box-shadow: 0 22px 40px -22px rgba(19, 48, 46, .55); background: rgba(255, 255, 255, .2); }
.ph img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0px)) scale(1.1); will-change: transform; }
/* script labels over photos: sticker edge (white outline) + soft drop shadow, so they read on any photo */
.tag { position: absolute; left: 14px; bottom: 4%; z-index: 3; font-family: var(--script); font-size: 36px; line-height: 1.15; color: var(--tagc);
  padding: 0 8px 4px 10px; transform: rotate(-7deg); transform-origin: left bottom;
  text-shadow: 3px 0 var(--tago, #fff), -3px 0 var(--tago, #fff), 0 3px var(--tago, #fff), 0 -3px var(--tago, #fff), 2.2px 2.2px var(--tago, #fff), -2.2px -2.2px var(--tago, #fff), 2.2px -2.2px var(--tago, #fff), -2.2px 2.2px var(--tago, #fff),
    0 6px 0 rgba(19, 48, 46, .18), 0 10px 18px rgba(19, 48, 46, .45); }
.lane-txt { position: relative; margin-top: 30px; }
.lane h2 { font-size: clamp(32px, 9vw, 52px); margin: 8px 0 10px; }
.lede { font-size: 17.5px; max-width: 30em; margin-bottom: 18px; }
.two { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.items { margin-top: 22px; }
.items li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1.5px solid var(--rule); }
.items li:last-child { border-bottom: 1.5px solid var(--rule); }
.items b { display: block; font-size: 18px; font-weight: 700; }
.items small { display: block; font-size: 14.5px; line-height: 1.4; margin-top: 2px; }
.items em { font-style: normal; font-weight: 700; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.l-juice  { --bg: #9BD65A; --fg: var(--ink); --word: #fff; --tagc: var(--pitaya); --rule: rgba(19, 48, 46, .2); }
.l-bowls  { --bg: var(--pitaya); --fg: #fff; --word: #fff; --tagc: var(--mango); --tago: var(--ink); --rule: rgba(255, 255, 255, .25); }
.l-crepes { --bg: var(--mango); --fg: var(--ink); --word: #fff; --tagc: var(--pitaya); --rule: rgba(19, 48, 46, .18); }
.l-eats   { --bg: #D63931; --fg: #fff; --word: #fff; --tagc: var(--mango); --tago: var(--ink); --rule: rgba(255, 255, 255, .25); }
.l-juice .eyebrow { color: #2B550B; } .l-bowls .eyebrow { color: #fff; } .l-crepes .eyebrow { color: #7A4F00; }
.l-eats .eyebrow { color: #fff; } .l-coffee .eyebrow { color: #D6F0EF; }
.l-coffee { --bg: var(--ink); --fg: #fff; --word: var(--mango); --tagc: var(--mango); --tago: var(--ink); --rule: rgba(255, 255, 255, .18); }

/* ---------- 6. strip ---------- */
.strip { --bg: var(--foam-pale); position: relative; background: var(--bg); padding: 26px 0 44px; }
.strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 var(--pad) 16px; }
.strip-head h2 { font-size: clamp(28px, 8vw, 44px); }
.carousel { padding: 0 var(--pad); }
.strip-row, .rev-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.strip-row::-webkit-scrollbar, .rev-row::-webkit-scrollbar { display: none; }
.strip-row li { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.strip-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 26px; }

/* one photo at a time on phones, with arrows + dots */
.car-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.car-btn { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; display: grid; place-items: center; cursor: pointer; transition: opacity .26s var(--ease), background-color .26s var(--ease); }
.car-btn:disabled { opacity: .3; cursor: default; }
.car-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; min-width: 0; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(19, 48, 46, .22); transition: background-color .26s var(--ease), transform .26s var(--ease); }
.dots i.on { background: var(--ink); transform: scale(1.25); }

/* ---------- 7. reviews: 12 real 5-star Google reviews, one card at a time on phones ---------- */
.reviews { background: var(--white); padding: 44px var(--pad) var(--gap-after); text-align: center; }
.reviews .eyebrow { color: var(--teal-deep); }
.reviews h2 { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 6px 0 0; }
.reviews .big { font-size: 76px; line-height: 1; }
.reviews .stars { font-size: 28px; letter-spacing: .04em; color: #F5B700; }
.stars.rate { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #F5B700 calc(var(--r) / 5 * 100%), rgba(19, 48, 46, .2) calc(var(--r) / 5 * 100%)); }
.rev-head { margin-bottom: 24px; }
.rev-count { font-weight: 600; margin: 2px 0 20px; color: var(--teal-deep); }
.rev-car { padding: 0; }
.rev-row li { flex: 0 0 100%; display: flex; scroll-snap-align: start; scroll-snap-stop: always; }
.rv { position: relative; flex: 1; margin: 0; display: flex; flex-direction: column; text-align: left; border-radius: 26px; padding: 22px 22px 20px; background: var(--foam-pale); }
.rev-row li:nth-child(4n+2) .rv { background: #FFF3C7; } .rev-row li:nth-child(4n+3) .rv { background: #FCE3EE; } .rev-row li:nth-child(4n+4) .rv { background: #E9F6D9; }
.rv-stars { color: #F5B700; font-size: 18px; letter-spacing: .08em; }
.rv-h { font-family: var(--display); font-size: 24px; line-height: 1.08; margin: 8px 0 10px; text-wrap: balance; }
.rv blockquote { margin: 0 0 auto; font-size: 17px; line-height: 1.45; }
.rv figcaption { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--teal-deep); }
.rev-all { margin-top: 22px; color: var(--ink); max-width: 100%; white-space: normal; text-align: center; font-size: clamp(15px, 4.4vw, 18px); padding: 10px 20px; line-height: 1.2; }
.rev-all svg { width: 20px; height: 20px; }

/* ---------- 8. film ---------- */
.film { --bg: var(--ink); position: relative; background: var(--bg); color: #fff; padding: 30px var(--pad) var(--gap-after); }
.film .eyebrow { color: #D6F0EF; }
.film h2 { font-size: clamp(34px, 10vw, 60px); margin: 8px 0 12px; }
.film-order { margin-top: 22px; }
.film-in { display: grid; gap: 24px; }
.film-frame { position: relative; width: min(100%, 340px); margin: 0 auto; border-radius: 28px; overflow: hidden; aspect-ratio: 9 / 16; background: #0b1f1e; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; inset: 0; margin: auto; width: 80px; height: 80px; border: 0; border-radius: 50%; background: var(--mango); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); }
.play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.film.playing .play { display: none; }

/* ---------- 9. visit, footer ---------- */
.visit { --bg: var(--foam-pale); position: relative; background: var(--bg); padding: 30px var(--pad) var(--gap-after); }
.visit .eyebrow { color: var(--teal-deep); }
.visit h2 { font-size: clamp(34px, 10vw, 58px); margin: 8px 0 12px; }
.visit-in { display: grid; gap: 28px; }
.note { font-size: 16px; margin-bottom: 18px; }
.visit-btns { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 520px; }
@media (min-width: 420px) { .visit-btns { grid-template-columns: 1fr 1fr; } .visit-btns .btn-order { grid-column: 1 / -1; } }
.visit-btns .btn { font-size: 17px; min-height: 50px; padding: 0 14px; }
.hours { width: 100%; border-collapse: collapse; font-size: 17px; }
.hours td { font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 11px 0; border-bottom: 1.5px solid rgba(19, 48, 46, .14); text-align: left; font-weight: 500; }
.hours td { text-align: right; }
.hours tr.today th, .hours tr.today td { font-weight: 700; color: var(--teal-deep); }
.hours tr.today th::after { content: ' · today'; font-weight: 600; font-size: 14px; }
/* footer: the full logo, details, the social logos, then the legal line + credit. Fits one phone screen. */
.foot { --bg: var(--teal-deep); position: relative; background: var(--bg); color: #fff; padding: 26px var(--pad) calc(96px + env(safe-area-inset-bottom)); text-align: center; font-size: 15px; line-height: 1.5; }
.foot-in { max-width: 1240px; margin: 0 auto; display: grid; justify-items: center; gap: 20px; }
.foot-sign { font-family: var(--script); font-size: clamp(28px, 7vw, 40px); line-height: 1.1; color: var(--mango); transform: rotate(-3deg); }
.foot-logo img { height: clamp(96px, 30vw, 128px); width: auto; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; width: 100%; max-width: 460px; }
.foot-col:last-child { grid-column: 1 / -1; }
.foot-col p { white-space: nowrap; }
@media (max-width: 479px) { .foot-cols { grid-template-columns: 1fr; gap: 14px; } }
.foot-h { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #D6F0EF; margin-bottom: 4px; }
.foot a { text-decoration: none; }
.foot-col a { display: inline-block; padding-block: 11px; margin-block: -8px; }
.foot-col:last-child p { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 18px; }
.foot-col:last-child br { display: none; }
.foot a[href^="tel"] { white-space: nowrap; }
.foot .ico { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.foot-socials { gap: 10px; }
.foot-legal { font-size: 13px; opacity: .85; }
.foot-legal .credit { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (max-width: 359px) { .foot-legal .sep { display: none; } .foot-legal .credit { display: block; margin-top: 0; } .foot-cols { grid-template-columns: 1fr; } }
@media (hover: hover) { .foot-col a:hover, .foot-legal .credit:hover { color: var(--foam); } .foot .ico:hover { background: rgba(255, 255, 255, .22); } }

/* ---------- phone bar: Order + Menu, pinned from the first screen; slides away near the footer ---------- */
.orderbar { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(19, 48, 46, .3), rgba(19, 48, 46, 0)); transition: transform .32s var(--ease); }
.orderbar.hide { transform: translateY(115%); }
.orderbar .btn-order { box-shadow: 0 0 0 2px #fff, 0 4px 0 #000, 0 10px 22px -10px rgba(0, 0, 0, .55); }
.orderbar .btn { min-width: 0; min-height: 54px; font-size: clamp(14px, 3.9vw, 16.5px); padding: 0 10px; }
.orderbar .btn { flex: 1 1 0; max-width: 260px; }
.btn-menu { background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(19, 48, 46, .25), 0 10px 22px -10px rgba(19, 48, 46, .6); }
body.menu-open .orderbar { transform: translateY(115%); }

/* ---------- motion + depth ---------- */
/* giant words: glossy candy letters with depth (like the 3D logo) and a slow moving shine */
.word span { display: block; will-change: transform; }
.word .w3d { position: relative; text-shadow: 0 1px 0 var(--wd), 0 2px 0 var(--wd), 0 3px 0 var(--wd), 0 4px 0 var(--wd), 0 5px 0 var(--wd), 0 6px 0 var(--wd), 0 7px 0 var(--wd), 0 8px 0 var(--wd), 0 16px 22px rgba(19, 48, 46, .28); }
.word .w3d::after { content: attr(data-w); position: absolute; left: 0; top: 0; width: 100%; text-shadow: none; color: transparent;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .85) 48%, rgba(255, 255, 255, 0) 58%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; animation: sheen 6s var(--ease) infinite; }
@keyframes sheen { 0%, 20% { background-position: 160% 0; } 70%, 100% { background-position: -60% 0; } }
.l-juice { --wd: #5E9A26; } .l-bowls { --wd: #8E1E50; } .l-crepes { --wd: #C98F14; } .l-eats { --wd: #A82A24; } .l-coffee { --wd: #C98F14; }
/* photos and text rise into place as they arrive; the photo moves a little slower than the page (depth) */
@media (prefers-reduced-motion: no-preference) {
  .js .ph { opacity: 0; transform: translateY(40px) rotate(-3deg) scale(.95); transition: opacity .45s var(--ease), transform .7s var(--ease); }
  .js .ph.in { opacity: 1; transform: none; }
  .js .lane-txt > * { opacity: 0; transform: translateY(18px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
  .js .lane-txt.in > * { opacity: 1; transform: none; }
  .js .lane-txt.in > :nth-child(2) { transition-delay: .06s; } .js .lane-txt.in > :nth-child(3) { transition-delay: .12s; }
  .js .lane-txt.in > :nth-child(4) { transition-delay: .18s; } .js .lane-txt.in > :nth-child(5) { transition-delay: .24s; }
  .js .jump a { opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .35s var(--ease), transform .45s var(--ease); }
  .js .jump.in a { opacity: 1; transform: none; }
  .js .jump.in a:nth-child(2) { transition-delay: .06s; } .js .jump.in a:nth-child(3) { transition-delay: .12s; }
  .js .jump.in a:nth-child(4) { transition-delay: .18s; } .js .jump.in a:nth-child(5) { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) { .word .w3d::after, .hero-words span::after { animation: none; } }

/* ---------- wider screens. Below 1180 px everything stays ONE centered column (tablets get the phone layout scaled up) ---------- */
@media (min-width: 640px) {
  :root { --pad: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); --wave: 70px; }
  .rev-row li { flex-basis: calc(50% - 6px); }
  .ph { width: 64%; }
}
@media (min-width: 768px) {
  .lane-in, .film-in, .visit-in { max-width: 720px; margin-left: auto; margin-right: auto; }
  .intro { max-width: 720px; margin: 0 auto; }
  .marquee span { font-size: 36px; }
  .jump { grid-template-columns: repeat(5, 120px); justify-content: center; gap: 28px; }
  .jump a { font-size: 14px; }
  .strip-row li { flex: 0 0 calc((100% - 2 * 12px) / 3); }
  .foot-cols { grid-template-columns: repeat(3, auto); justify-content: center; column-gap: 64px; max-width: none; }
  .foot-col:last-child { grid-column: auto; }
  .foot-col:last-child p { display: block; } .foot-col:last-child br { display: inline; }
}

/* desktop nav (the menu button and sheet exist only below this; main.js watches the same query) */
@media (min-width: 1180px) {
  :root { --pad: max(clamp(32px, 5vw, 80px), env(safe-area-inset-left), env(safe-area-inset-right)); --wave: 96px; }
  body { font-size: 18px; }
  .top { height: 78px; gap: 28px; }
  .brand img { height: 58px; }
  .nav { display: flex; gap: 22px; font-weight: 700; font-size: 16px; }
  .nav a { text-decoration: none; padding: 10px 0; }
  .nav a:hover { color: var(--teal-deep); }
  .nav { transition: opacity .26s var(--ease); }
  .top.moved:not(.solid) .nav:not(:focus-within) { opacity: 0; pointer-events: none; }
  .burger { display: none; }
  .top-call { width: auto; padding: 0 16px 0 12px; border-radius: 999px; gap: 8px; display: inline-flex; font-weight: 700; font-size: 15px; }
  .top-call span { display: inline; }
  .top.solid .top-order { display: inline-flex; min-height: 46px; font-size: 16px; padding: 0 22px; }
  .orderbar { display: none; }
  .intro { max-width: 1240px; padding: 44px var(--pad) 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 32px; align-items: baseline; }
  .intro .sub, .intro .facts { margin: 0; }
  .marquee span { font-size: 40px; }
  .jump { grid-template-columns: repeat(5, 130px); gap: 36px; padding-top: 34px; }
  .jump a { font-size: 15px; }
  .lane { padding-top: 10px; padding-bottom: calc(var(--wave) + 70px); }
  .lane-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; max-width: 1320px; }
  .lane-visual { padding-top: 150px; }
  .lane:nth-of-type(even) .lane-visual { order: 2; }
  .word { left: -40px; right: -40px; font-size: clamp(110px, 11vw, 190px); }
  .ph { width: 74%; }
  .lane-txt { margin-top: 0; }
  .lane h2 { font-size: clamp(44px, 4.4vw, 68px); }
  .strip-row li { flex: 0 0 calc((100% - 5 * 12px) / 6); }
  .strip .car-ctl { display: none; }
  .reviews { padding: 80px var(--pad) calc(var(--wave) + 70px); }
  .rev-car { max-width: 1240px; margin: 0 auto; }
  .rev-row li { flex-basis: calc((100% - 2 * 12px) / 3); }
  .film-in, .visit-in { max-width: 1320px; }
  .film { padding: 60px var(--pad) calc(var(--wave) + 70px); }
  .film-in { grid-template-columns: 1fr auto; align-items: center; }
  .visit { padding: 60px var(--pad) calc(var(--wave) + 70px); }
  .visit-in { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .motion-btn { top: 92px; }
  .foot { padding: 44px var(--pad) 40px; text-align: left; }
  .foot-in { grid-template-columns: auto 1fr auto; align-items: center; justify-items: stretch; column-gap: 56px; }
  .foot-cols { justify-content: start; }
  .foot-sign { grid-column: 1 / -1; justify-self: start; }
  .foot-legal { grid-column: 1 / -1; padding-top: 18px; border-top: 1.5px solid rgba(255, 255, 255, .16); }
}
@media (min-width: 1180px) and (max-width: 1399px) {
  .top-call span { display: none; } .top-call { width: 44px; padding: 0; justify-content: center; }
  .nav { gap: 16px; font-size: 15px; }
}
@media (min-width: 1600px) { .top { padding-left: calc((100vw - 1480px) / 2); padding-right: calc((100vw - 1480px) / 2); } }

/* wide hero: every landscape screen. Keyed (WebGL + the 16:9 loop): the same layout as the phone, logo + script on top,
   giant words behind the wave, Order + menu pinned at the bottom of the hero. Not keyed: the wide still + the normal headline. */
@media (orientation: landscape) {
  .hero:not(.keyed) { display: flex; align-items: center; height: auto; min-height: 100vh; min-height: 100dvh; padding: 90px var(--pad) 60px; }
  .hero:not(.keyed) .hero-bg img { inset: 0; bottom: 0; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 70%; -webkit-mask-image: none; mask-image: none; }
  .hero:not(.keyed) .hero-video, .hero:not(.keyed) .hero-canvas, .hero:not(.keyed) .hero-words, .hero:not(.keyed) .hero-script { display: none; }
  .hero:not(.keyed) { --hero-logo: min(26vw, 380px); }
  .hero:not(.keyed) .hero-top { text-align: left; max-width: min(560px, 44vw); padding: 0 0 6vh; isolation: isolate; }
  .hero:not(.keyed) .hero-top::before { content: ''; position: absolute; z-index: -1; inset: -14% -18% -2% -30%;
    background: radial-gradient(closest-side, rgba(108, 206, 224, .92), rgba(108, 206, 224, .7) 60%, rgba(108, 206, 224, 0)); }
  .hero:not(.keyed) .stage { margin: 0; }
  .hero:not(.keyed) h1 { font-size: clamp(30px, 4vw, 62px); margin: 14px 0 0; max-width: 12em; }
  .hero .ctas { display: flex; }
  .hero-bg img, .hero-video, .hero.keyed .hero-canvas { aspect-ratio: 16 / 9; }
  .hero { --sky: #52BADA; }   /* the 16:9 loop's own sky, so the keyed edge and the page sky match */
  .hero.keyed { --hero-logo: min(24vw, 320px, 34vh); }
  .hero.keyed .hero-top { position: static; padding-top: calc(env(safe-area-inset-top) + 62px); }
  .hero.keyed .hero-script { position: relative; z-index: 2; }
  .hero.keyed .ctas .btn-ghost { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(19, 48, 46, .25), 0 10px 22px -10px rgba(19, 48, 46, .6); }
  .hero.keyed .ctas { position: absolute; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); justify-content: center; margin: 0; z-index: 3; }
  .hero .ctas .btn { min-width: 200px; }
  .hero.keyed .hero-script { font-size: clamp(22px, 2.4vw, 40px); }
}
/* laptops: the logo clears the nav bar and the buttons sit off the bottom edge */
@media (orientation: landscape) and (min-width: 1180px) { .hero.keyed .hero-top { padding-top: 86px; } .hero.keyed .ctas { bottom: 36px; } }

/* sideways phones: one slim bar (logo · icons · Order online · menu), no bottom bar, side-by-side sections */
@media (orientation: landscape) and (max-height: 520px) {
  .top { height: calc(56px + env(safe-area-inset-top)); }
  .brand img { height: 40px; }
  .ico { width: 40px; height: 40px; }
  .top.solid .top-order { display: inline-flex; min-height: 40px; font-size: 15px; padding: 0 16px; box-shadow: 0 3px 0 #000; }
  .orderbar { display: none; }
  .hero:not(.keyed) { height: 100vh; height: 100dvh; min-height: 0; padding: 60px var(--pad) 16px; }
  .hero:not(.keyed) { --hero-logo: min(30vw, 240px); }
  .hero:not(.keyed) .hero-top { max-width: 48vw; padding: 0; }
  .hero:not(.keyed) h1 { font-size: clamp(20px, 3.2vw, 28px); margin-top: 8px; }
  /* a fixed height (the small viewport) so Safari's toolbar coming and going never re-flows the hero; the loop sits low
     enough that its calm water is at ~78% of the screen, leaving one clean row for the words */
  .hero.keyed { height: 100svh; min-height: 0; --hero-logo: min(26vw, 30svh * 1.465); --tuck: max(12px, calc(18.34vw - 22svh)); }
  .hero.keyed .hero-top { padding-top: calc(env(safe-area-inset-top) + 8px); }
  .hero.keyed .hero-script { font-size: clamp(18px, 2.6vw, 26px); }
  .hero.keyed .ctas { bottom: 10px; } .hero .ctas .btn { min-width: 150px; }
  .hero .ctas { margin-top: 12px; } .hero .ctas .btn { min-height: 46px; font-size: 16px; padding: 0 18px; }
  .lane-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; max-width: none; }
  .lane-visual { padding-top: 70px; }
  .ph { width: auto; height: min(76vh, 340px); }
  .word { font-size: clamp(56px, 12vw, 96px); }
  .lane-txt { margin-top: 0; }
  .foot { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  .sheet-top { height: 50px; }
  .sheet-body { max-width: none; padding-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
  .sheet-label { display: none; }
  .sheet-food { flex: 1 1 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .sheet-food a { gap: 6px; padding: 8px 6px; font-size: clamp(12px, 1.7vw, 16px); }
  .sheet-food img { width: min(12svh, 56px); height: min(12svh, 56px); }
  .sheet-links { margin: 0; font-size: 15.5px; } .sheet-links a { padding: 8px 0; }
  .sheet-acts { margin: 0; grid-template-columns: auto auto; }
  .sheet-acts .btn { min-height: 44px; font-size: 15.5px; padding: 0 18px; }
  .sheet-foot { margin: 0 0 0 auto; padding: 0; border: 0; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}