/* ============================================================
   SAY HI — Thai Noodle Bar · Brisbane
   Brand: deep crimson red + gold, warm cream. Street-food soul.
   ============================================================ */

:root{
  /* Brand red & gold — now ACCENTS on a white base */
  --red:      #b11226;   /* brand crimson (from the logo) */
  --red-2:    #cf1a2e;   /* brighter */
  --red-deep: #7c0c18;   /* dark maroon */
  --red-ink:  #2a0f06;
  --gold:     #cda23a;   /* brand gold (deepened to read on white) */
  --gold-2:   #e0bf6a;   /* light gold */
  --gold-hi:  #f6e6ad;   /* gold highlight (for dark grounds) */
  --gold-ink: #9a7413;   /* legible gold for text on white */
  --blue:     #26235f;   /* Thai-flag navy blue accent */
  --blue-2:   #3a3688;

  --paper:    #fdfbf4;   /* page base — warm white */
  --surface:  #ffffff;   /* cards / header */
  --cream:    #f7efdd;   /* soft warm section tint */
  --cream-2:  #efe3ca;
  --line:     #ece0c6;   /* hairline */
  --ink:      #241812;   /* warm near-black (text + dark bands) */
  --muted:    #7c6552;

  --shadow:   0 18px 40px rgba(36,24,18,.14);
  --shadow-sm:0 8px 20px rgba(36,24,18,.12);

  --display: "Manrope", system-ui, sans-serif;
  --body:    "Manrope", system-ui, sans-serif;
  --hand:    "Manrope", system-ui, sans-serif;

  --r:       20px;
  --nav-h:   68px;
  --wrap:    1180px;

  /* Thai-flag pennant bunting (red / white / blue) */
  --bunting: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='16'%3E%3Cpolygon%20points='0,0%2012,0%206,14'%20fill='%23b11226'/%3E%3Cpolygon%20points='12,0%2024,0%2018,14'%20fill='%23ffffff'%20stroke='%23e6d9b6'/%3E%3Cpolygon%20points='24,0%2036,0%2030,14'%20fill='%2326235f'/%3E%3Cpolygon%20points='36,0%2048,0%2042,14'%20fill='%23ffffff'%20stroke='%23e6d9b6'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(205,162,58,.07), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(38,35,95,.05), transparent 38%);
  line-height:1.6; overflow-x:hidden;
}
/* full-width Thai-flag bunting strip */
.bunting{ height:16px; background:var(--bunting) repeat-x top center; background-size:48px 16px; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.08; margin:0; letter-spacing:-.015em; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
section{ position:relative; }

/* ---------- Reusable ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--body); font-weight:600; letter-spacing:.005em; font-size:.98rem;
  padding:.85em 1.6em; border-radius:100px; text-decoration:none; cursor:pointer;
  border:0; white-space:nowrap; position:relative;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .2s ease, filter .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:var(--red-ink);
  box-shadow:0 4px 14px rgba(177,18,38,.10), 0 2px 6px rgba(217,169,52,.4); }
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(217,169,52,.5); filter:brightness(1.05); }
.btn--red{ background:linear-gradient(180deg, var(--red-2), var(--red)); color:var(--gold-hi);
  box-shadow:0 4px 14px rgba(124,12,24,.28); }
.btn--red:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(124,12,24,.42); filter:brightness(1.06); }
.btn--cream{ background:var(--cream); color:var(--ink); border:1px solid rgba(42,5,9,.08); box-shadow:0 4px 14px rgba(42,5,9,.12); }
.btn--cream:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(42,5,9,.18); }
/* outline button on LIGHT grounds (red text, gold ring) */
.btn--ghost-gold{ background:transparent; color:var(--red); border:1.5px solid var(--gold); }
.btn--ghost-gold:hover{ background:var(--red); color:var(--gold-hi); border-color:var(--red); transform:translateY(-2px); box-shadow:0 12px 26px rgba(124,12,24,.28); }
/* outline button on DARK grounds (cream text) */
.btn--ghost-light{ background:rgba(255,255,255,.05); color:var(--gold-hi); border:1.5px solid rgba(246,230,173,.55); }
.btn--ghost-light:hover{ background:var(--gold); color:var(--red-ink); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 12px 26px rgba(205,162,58,.4); }
.btn--dark{ background:var(--ink); color:var(--gold-hi); box-shadow:0 4px 14px rgba(0,0,0,.28); }
.btn--dark:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.38); }
.btn--big{ font-size:1.06rem; padding:.98em 1.95em; }

.kicker{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--body); font-weight:700; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin-bottom:1rem;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--gold); }
.kicker--onred{ color:var(--gold-2); }
.kicker--onred::before{ background:var(--gold); }
.kicker--center{ justify-content:center; }

.eyebrow-gold{ color:var(--gold); }
.center{ text-align:center; }
.script{ font-family:var(--hand); }

/* Gold squiggle divider */
.squiggle{ display:block; width:120px; height:14px; margin:1.2rem auto; color:var(--gold);
  background:none; }
.squiggle svg{ width:100%; height:100%; }

/* ---------- HEADER ---------- */
.hdr{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; gap:1rem;
  padding-inline:clamp(1rem,4vw,2.2rem);
  background:var(--surface); color:var(--ink);
  border-bottom:1px solid var(--line); box-shadow:0 2px 10px rgba(36,24,18,.05);
}
.hdr__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.hdr__logo{ width:42px; height:42px; border-radius:50%; border:2px solid var(--gold); object-fit:cover; background:var(--red-deep); }
.hdr__word{ font-family:var(--display); font-weight:600; font-size:1.45rem; color:var(--red); letter-spacing:.01em; }
.hdr__word b{ color:var(--red); font-weight:700; }
.hdr__thai{ font-size:.85rem; color:var(--gold-ink); margin-left:.15rem; }
.hdr__nav{ display:flex; gap:1.5rem; align-items:center; }
.hdr__nav a{ text-decoration:none; font-weight:500; color:var(--ink); position:relative; padding:.2em 0; }
.hdr__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .2s; transform-origin:left; }
.hdr__nav a:hover::after,.hdr__nav a[aria-current="page"]::after{ transform:scaleX(1); }
.hdr__nav a[aria-current="page"]{ color:var(--red); }
.hdr__order{ font-size:.88rem; padding:.55em 1.15em; }
.hdr__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.hdr__burger span{ width:26px; height:3px; background:var(--red); border-radius:2px; transition:.25s; }
.hdr__burger.x span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hdr__burger.x span:nth-child(2){ opacity:0; }
.hdr__burger.x span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(80vw,320px); z-index:59;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
  padding:calc(var(--nav-h) + 1.5rem) 2rem 2rem; display:flex; flex-direction:column; gap:1.3rem;
  transform:translateX(110%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  font-family:var(--display); font-size:1.35rem; border-left:3px solid var(--gold);
}
.drawer.open{ transform:translateX(0); }
.drawer a{ text-decoration:none; color:var(--red); }
.drawer .btn{ font-family:var(--body); font-size:1rem; margin-top:.5rem; }

/* ---------- HERO ---------- */
.hero{ background:var(--paper); color:var(--ink); position:relative; overflow:hidden; }
.hero::after{ /* faint warm glow */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 82% 26%, rgba(205,162,58,.10), transparent 42%);
}
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem); position:relative; z-index:2; }
.hero__eyebrow{ display:inline-block; font-weight:700; letter-spacing:.15em; text-transform:uppercase; font-size:.8rem;
  color:var(--red-deep); background:var(--gold); padding:.4em 1em; border-radius:100px; transform:rotate(-2deg); }
.hero__title{ font-size:clamp(3rem,8vw,6rem); font-weight:800; line-height:.98; margin:1rem 0 .4rem; color:var(--ink); }
.hero__title em{ font-style:normal; color:var(--red); }
.hero__thai{ display:block; font-family:var(--body); font-weight:500; letter-spacing:.3em; color:var(--gold-ink); font-size:1rem; margin-top:.6rem; }
.hero__tag{ font-size:clamp(1.05rem,2.2vw,1.3rem); max-width:38ch; color:var(--muted); margin:1.2rem 0 2rem; }
.hero__tag b{ color:var(--red); font-weight:600; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__media{ position:relative; }
.hero__bowl{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:50%; border:5px solid var(--gold);
  box-shadow:0 24px 60px rgba(0,0,0,.4); }
.hero__stamp{ position:absolute; bottom:-8px; left:-8px; width:104px; height:104px; }
.hero__badge{ position:absolute; top:6%; right:-2%; background:var(--gold); color:var(--red-deep);
  font-family:var(--display); font-weight:600; font-size:1rem; padding:.5em .9em; border-radius:14px;
  transform:rotate(8deg); box-shadow:var(--shadow-sm); border:2px solid var(--ink); }

/* ---------- MARQUEE ---------- */
.marquee{ background:var(--red); color:var(--gold-hi); overflow:hidden; border-block:2px solid var(--gold); }
.marquee__track{ display:flex; width:max-content; animation:scroll 28s linear infinite; }
.marquee__track span{ font-family:var(--display); font-weight:600; font-style:normal; font-size:1.3rem; letter-spacing:.01em; padding:.55rem 0; white-space:nowrap; }
.marquee__track span b{ color:var(--gold-2); font-style:normal; padding:0 .5rem; }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* ---------- SECTION HEADINGS ---------- */
.sec{ padding-block:clamp(3.5rem,8vw,6rem); }
.sec--cream{ background:var(--cream); }
.sec--paper{ background:var(--paper); }
.sec--red{ background:var(--paper); color:var(--ink); }   /* was red — now light */
.sec--ink{ background:var(--ink); color:var(--cream); }
.sec__head{ max-width:720px; }
.sec__head.center{ margin-inline:auto; }
.sec h2{ font-size:clamp(2rem,5vw,3.4rem); color:var(--red); }
.sec--ink h2{ color:var(--gold-hi); }
.lead{ font-size:1.1rem; color:var(--muted); margin-top:.8rem; }
.sec--ink .lead{ color:var(--cream-2); }

/* ---------- BOWL SHOWCASE (No.1–No.7) ---------- */
.bowls{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.5rem; }
.bowl{ position:relative; text-decoration:none; color:inherit; border-radius:var(--r); overflow:hidden;
  border:3px solid var(--ink); box-shadow:4px 4px 0 var(--gold); transition:transform .16s ease, box-shadow .16s ease; background:var(--cream); }
.bowl:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--gold); }
.bowl img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.bowl__cap{ position:absolute; inset:auto 0 0 0; padding:1.6rem .9rem .8rem;
  background:linear-gradient(transparent, rgba(42,5,9,.9)); color:var(--cream); }
.bowl__no{ font-family:var(--display); font-weight:600; color:var(--gold-2); font-size:.85rem; }
.bowl__name{ font-family:var(--display); font-weight:600; font-size:1.15rem; line-height:1.1; }
.bowl__price{ position:absolute; top:.7rem; right:.7rem; background:var(--gold); color:var(--red-deep);
  font-weight:700; font-size:.85rem; padding:.25em .6em; border-radius:100px; border:2px solid var(--ink); }
.bowl--wide{ grid-column:span 2; }
.bowl--wide img{ aspect-ratio:2/1; }   /* match height of single square bowls */

/* ---------- FEATURE SPLIT ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split--rev .split__media{ order:-1; }
.split__media img{ width:100%; border-radius:var(--r); border:3px solid var(--ink); box-shadow:var(--shadow); }
.tilt{ transform:rotate(-2deg); }
.tilt-r{ transform:rotate(2deg); }

/* Photo frame (polaroid-ish, red/gold) */
.frame{ background:var(--paper); padding:12px 12px 40px; border-radius:8px; box-shadow:var(--shadow); position:relative; }
.frame img{ border-radius:4px; border:0; box-shadow:none; }
.frame figcaption{ font-family:var(--hand); font-size:1.3rem; text-align:center; color:var(--red); position:absolute; bottom:8px; left:0; right:0; }
.frame::before{ content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:96px; height:26px; background:rgba(217,169,52,.65); box-shadow:1px 1px 3px rgba(0,0,0,.15); }

/* ---------- PHOTO SLOT (for shop / parking photos to be added) ---------- */
.slot{ position:relative; aspect-ratio:4/3; border-radius:var(--r); display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--red); font-weight:700; border:2.5px dashed var(--gold); background:
  repeating-linear-gradient(45deg, var(--cream-2), var(--cream-2) 16px, #efd9b0 16px, #efd9b0 32px); }
.slot span{ background:rgba(255,249,239,.85); padding:.5em .9em; border-radius:10px; max-width:80%; }
.slot small{ display:block; font-weight:500; color:var(--muted); }

/* ---------- MENU PAGE ---------- */
.menu-hero{ position:relative; overflow:hidden; color:var(--cream); text-align:center;
  padding-block:clamp(3rem,7vw,5rem); border-bottom:3px solid var(--gold);
  background-color:var(--red-deep);
  background-image:linear-gradient(rgba(124,12,24,.68), rgba(42,5,9,.85)), var(--hero-img, none);
  background-size:cover; background-position:center; background-repeat:no-repeat; }
.menu-hero > *{ position:relative; z-index:2; }
.menu-hero h1{ font-size:clamp(2.4rem,7vw,4.2rem); color:var(--gold-hi); }
.menu-hero .lead{ color:var(--cream); }
.mtabs{ position:sticky; top:var(--nav-h); z-index:30; background:var(--cream); border-bottom:2px solid var(--gold-2);
  display:flex; gap:.5rem; overflow-x:auto; padding:.7rem clamp(1rem,4vw,2.5rem); scrollbar-width:thin; }
.mtab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.4em; font-family:var(--body); font-weight:700; font-size:.9rem;
  padding:.5em 1em; border-radius:100px; border:2px solid var(--red); color:var(--red); background:transparent; cursor:pointer; transition:.15s; }
.mtab:hover{ background:var(--cream-2); }
.mtab.on{ background:var(--red); color:var(--gold-hi); }
.mcat{ padding-block:2.4rem; scroll-margin-top:calc(var(--nav-h) + 60px); border-bottom:1px dashed var(--gold-2); }
.mcat:last-child{ border-bottom:0; }
.mcat__head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.3rem; }
.mcat__head h2{ font-size:clamp(1.6rem,4vw,2.4rem); color:var(--red); }
.mcat__emoji{ font-size:1.6rem; }
.mcat__note{ color:var(--muted); font-style:italic; margin:0 0 1.4rem; }
.mgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem 1.6rem; }
.mitem{ display:flex; gap:1rem; align-items:flex-start; padding:.7rem; border-radius:14px; transition:background .15s; }
.mitem:hover{ background:var(--cream); }
.mitem__img{ width:66px; height:66px; border-radius:12px; object-fit:cover; flex:0 0 auto; border:2px solid var(--gold); background:var(--cream-2); }
.mitem__b{ flex:1; min-width:0; }
.mitem__top{ display:flex; gap:.6rem; align-items:baseline; }
.mitem__name{ font-family:var(--display); font-weight:600; font-size:1.08rem; }
.mitem__dots{ flex:1; border-bottom:2px dotted var(--gold-2); transform:translateY(-4px); min-width:14px; }
.mitem__price{ font-family:var(--display); font-weight:600; color:var(--red); white-space:nowrap; }
.mitem__desc{ color:var(--muted); font-size:.9rem; }
.mitem__star{ color:var(--gold); }
.mitem__tag{ font-size:.62rem; background:var(--red); color:var(--gold-hi); padding:.12em .5em; border-radius:100px; text-transform:uppercase; letter-spacing:.05em; vertical-align:middle; }
.mitem--out{ opacity:.5; }
.mitem--out .mitem__price{ text-decoration:line-through; }

/* ---------- DRINK CARDS ---------- */
.drinks{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.5rem; }
.drink{ background:var(--paper); border:3px solid var(--ink); border-radius:var(--r); overflow:hidden; box-shadow:4px 4px 0 var(--red); text-align:center; }
.drink img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.drink b{ display:block; font-family:var(--display); font-weight:600; padding:.7rem .5rem; font-size:1rem; }

/* ---------- GALLERY ---------- */
.ggrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:2rem; }
.ggrid img,.ggrid .slot{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; border:3px solid var(--ink); }
.ggrid > *:nth-child(6n+1){ grid-column:span 2; grid-row:span 2; }
.ggrid > *{ aspect-ratio:1/1; }

/* ---------- ATMOSPHERE BANNER (full-bleed venue photo) ---------- */
.banner{ position:relative; min-height:clamp(360px,54vw,560px); display:flex; align-items:flex-end; overflow:hidden; }
.banner__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(42,5,9,.9) 0%, rgba(42,5,9,.35) 45%, rgba(42,5,9,.55) 100%); }
.banner__inner{ position:relative; z-index:2; color:var(--cream); width:100%; max-width:var(--wrap);
  margin:0 auto; padding:clamp(1.6rem,5vw,3.4rem) clamp(1.1rem,4vw,2.5rem); }
.banner__inner .kicker{ color:var(--gold-2); }
.banner__inner .kicker::before{ background:var(--gold); }
.banner h2{ color:var(--gold-hi); font-size:clamp(2rem,5vw,3.4rem); max-width:16ch; }
.banner p{ color:var(--cream); max-width:44ch; margin-top:.7rem; font-size:1.08rem; }
.banner__cta{ margin-top:1.4rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- MARKET ---------- */
.reels{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.reel{ position:relative; width:min(220px,44vw); aspect-ratio:9/16; border-radius:18px; overflow:hidden; text-decoration:none;
  border:4px solid var(--gold); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--red-2),var(--red-deep)); color:var(--gold-hi); transform:rotate(var(--r,0)); transition:transform .2s; }
.reel:hover{ transform:rotate(0) scale(1.03); }
.reel .play{ font-size:2.4rem; }
.reel__label{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--gold-hi); font-size:.72rem; font-weight:700; padding:.3em .7em; border-radius:100px; white-space:nowrap; }
.factcards{ display:flex; gap:1rem; flex-wrap:wrap; margin:1.6rem 0; }
.factcard{ background:var(--cream); border:2px solid var(--gold); border-radius:16px; padding:.9rem 1.2rem; }
.factcard strong{ display:block; font-family:var(--display); font-size:1.2rem; color:var(--red); }
.factcard span{ font-size:.9rem; color:var(--muted); }

/* ---------- VISIT ---------- */
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:stretch; }
.info-block{ margin-bottom:1.4rem; }
.info-block h3{ font-size:1.15rem; color:var(--red); display:flex; align-items:center; gap:.5rem; }
.info-block p{ margin:.2rem 0 0; }
.info-block a{ color:var(--red); font-weight:700; }
.map{ position:relative; border:3px solid var(--ink); border-radius:var(--r); overflow:hidden; box-shadow:4px 4px 0 var(--gold); min-height:360px; background:var(--cream-2); }
.map iframe{ width:100%; height:100%; min-height:360px; border:0; display:block; }
.map__btn{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2; background:var(--ink); color:var(--gold-hi);
  text-decoration:none; font-weight:700; font-size:.9rem; padding:.6em 1.1em; border-radius:100px; border:2px solid var(--gold); }
.map__btn:hover{ background:var(--red); }
.hours-table{ list-style:none; padding:0; margin:.3rem 0 0; }
.hours-table li{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; border-bottom:1px dotted var(--gold-2); max-width:320px; }

/* ---------- PRESS ---------- */
.press{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:1.5rem; }
.press a{ text-decoration:none; background:var(--paper); border:2px solid var(--gold); border-radius:100px; padding:.5em 1.1em; font-weight:700; color:var(--red); transition:.15s; }
.press a:hover{ background:var(--red); color:var(--gold-hi); }

/* ---------- FOOTER ---------- */
.ftr{ background:var(--ink); color:var(--cream); padding-block:clamp(3rem,6vw,4.5rem) 2rem; border-top:3px solid var(--gold); }
.ftr__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.ftr__brand img{ width:70px; height:70px; border-radius:50%; border:2px solid var(--gold); }
.ftr__brand p{ color:var(--cream-2); margin-top:.8rem; max-width:28ch; }
.ftr h4{ color:var(--gold-2); font-family:var(--body); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; margin-bottom:.7rem; }
.ftr a{ color:var(--cream); text-decoration:none; display:block; padding:.2rem 0; }
.ftr a:hover{ color:var(--gold-hi); }
.ftr__fine{ text-align:center; color:rgba(251,241,222,.5); font-size:.82rem; margin-top:2.5rem; border-top:1px solid rgba(217,169,52,.25); padding-top:1.5rem; }

/* ---------- FAB ---------- */
.fab{ position:fixed; bottom:1.1rem; right:1.1rem; z-index:55; display:none;
  background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:var(--red-ink);
  text-decoration:none; font-weight:700; padding:.9em 1.35em; border-radius:100px; border:0;
  box-shadow:0 8px 22px rgba(42,5,9,.3); transition:transform .2s ease, box-shadow .2s ease; }
.fab:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(42,5,9,.4); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .bowls,.drinks{ grid-template-columns:repeat(2,1fr); }
  .ggrid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:820px){
  .hdr__nav, .hdr__order{ display:none; }
  .hdr__burger{ display:flex; }
  .hero__grid,.split,.split--rev .split__media,.visit-grid,.ftr__top{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .hero__media{ max-width:420px; margin-inline:auto; }
  .fab{ display:inline-flex; }
  .ftr__top{ grid-template-columns:1fr 1fr; }
  .bowl--wide{ grid-column:span 1; }
}
@media (max-width:520px){
  .bowls,.drinks,.ggrid{ grid-template-columns:1fr 1fr; }
  .ftr__top{ grid-template-columns:1fr; }
  .hero__badge{ display:none; }
}

/* ---------- Menu item click affordance + product pop-up ---------- */
.mitem--click{ cursor:pointer; }
.mitem--click:hover{ background:var(--cream); }
.mitem--click:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:14px; }

.pmodal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:1.2rem; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.pmodal.open{ opacity:1; visibility:visible; }
.pmodal__overlay{ position:absolute; inset:0; background:rgba(36,24,18,.6); backdrop-filter:blur(3px); }
.pmodal__dialog{ position:relative; z-index:1; width:min(94vw,520px); max-height:90vh; overflow:auto;
  background:var(--surface); border-radius:20px; box-shadow:0 30px 80px rgba(36,24,18,.45);
  border:1px solid var(--line); transform:translateY(12px) scale(.98); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.pmodal.open .pmodal__dialog{ transform:none; }
.pmodal__close{ position:absolute; top:.7rem; right:.7rem; z-index:2; width:38px; height:38px; border-radius:50%;
  border:0; cursor:pointer; font-size:1.5rem; line-height:1; background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; }
.pmodal__close:hover{ background:var(--cream); }
.pmodal__figure{ background:var(--cream); }
.pmodal__img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pmodal__body{ padding:1.4rem 1.5rem 1.6rem; }
.pmodal__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.pmodal__top h3{ font-family:var(--display); font-weight:700; font-size:1.4rem; color:var(--ink); }
.pmodal__price{ font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--red); white-space:nowrap; }
.pmodal__desc{ color:var(--muted); font-size:1rem; margin:0 0 1.3rem; line-height:1.55; }
.pmodal__order{ width:100%; }
.pmodal__order.is-disabled{ background:var(--muted); color:var(--cream); pointer-events:none; opacity:.7; box-shadow:none; }

@media (prefers-reduced-motion: reduce){
  .pmodal, .pmodal__dialog{ transition:none; }
  .pmodal__dialog{ transform:none; }
}