@font-face{
  font-family:'TAY Crumb';
  src:url('../fonts/TAYCrumbRegular.woff2') format('woff2'),
      url('../fonts/TAYCrumbRegular.woff') format('woff'),
      url('../fonts/TAYCrumbRegular.otf') format('opentype');
  /* TAY Crumb ships a single cut. Claiming the whole 100-900 range stops the
     browser faking bold, which smeared the counters shut at small sizes.
     Real weight variation is carried by Baloo 2, which has true 400-800 cuts. */
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   BAAN YAI — VERSION 1 "STREET MARKET" (bold, playful, colorful)
   ============================================================ */

:root{
  --orange:#FE5922;
  --orange-deep:#E8460F;
  --plum:#3C0233;
  --plum-2:#4E0A44;
  --cream:#F5E8D5;
  --cream-2:#FBF3E6;
  --green:#39B54A;
  --dark-green:#1A3F37;
  --ink:#3C0233;
  --radius:26px;
  --radius-sm:14px;
  --shadow: 0 10px 0 rgba(60,2,51,0.9);
  --shadow-sm: 0 6px 0 rgba(60,2,51,0.9);
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--plum);
  font-family:'Baloo 2', system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  line-height:1.05;
  margin:0 0 .4em;
  letter-spacing:.2px;
}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}
.section-pad{padding:88px 0}
@media(max-width:720px){.section-pad{padding:56px 0}}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Baloo 2',sans-serif;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:7px 18px;
  border-radius:999px;
  border:2.5px solid currentColor;
  margin-bottom:10px;
}
.eyebrow.on-cream{color:var(--orange);background:var(--cream-2)}
.eyebrow.on-orange{color:var(--cream);background:transparent}
.eyebrow.on-plum{color:var(--orange);background:transparent}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Baloo 2',sans-serif;
  font-weight:400;
  font-size:1rem;
  padding:15px 30px;
  border-radius:999px;
  border:3px solid var(--plum);
  cursor:pointer;
  transition:transform .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(0,0)}
.btn-primary{background:var(--orange);color:var(--cream);box-shadow:var(--shadow-sm)}
.btn-dark{background:var(--plum);color:var(--cream);border-color:var(--plum);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.btn-outline{background:transparent;color:var(--plum);box-shadow:var(--shadow-sm)}
.btn-outline.on-plum{color:var(--cream);border-color:var(--cream);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.btn-outline.on-orange{color:var(--cream);border-color:var(--cream);box-shadow:0 6px 0 rgba(60,2,51,.9)}
.btn-sm{padding:10px 20px;font-size:.85rem;border-width:2.5px}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--cream);
  border-bottom:3px solid var(--plum);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:var(--maxw);margin:0 auto;
}
.nav .logo{display:flex;align-items:center;gap:10px}
.nav .logo img{height:52px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:.98rem;
  padding:10px 16px;border-radius:999px;
}
.nav-links a:hover{background:var(--orange);color:var(--cream)}
.nav-links a.active{background:var(--plum);color:var(--cream)}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:2.5px solid var(--plum);border-radius:10px;padding:8px 10px;cursor:pointer}
.burger span{display:block;width:22px;height:3px;background:var(--plum);margin:4px 0;border-radius:3px}
@media(max-width:980px){
  .nav-links{
    position:fixed;top:calc(var(--header-h, 78px) + 8px);right:16px;bottom:auto;left:16px;background:var(--cream);
    flex-direction:column;align-items:stretch;gap:2px;
    border:3px solid var(--plum);border-radius:20px;padding:14px;
    box-shadow:var(--shadow);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 16px}
  .burger{display:block}
  .nav-cta .btn span.long{display:none}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--orange);
  padding:64px 0 0;
  overflow:hidden;
  position:relative;
}
.hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;
}
.hero-copy h1{
  color:var(--cream);
  font-size:clamp(2.6rem,5.6vw,4.6rem);
  text-transform:uppercase;
}
.hero-copy h1 em{font-style:normal;color:var(--plum)}
.hero-copy p{color:var(--plum);font-size:1.15rem;max-width:480px;font-weight:600}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art img{width:100%;max-width:460px}
.hero-stats{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;
  padding-top:26px;border-top:2.5px dashed rgba(60,2,51,.4);
}
.hero-stat{font-family:'Baloo 2',sans-serif;color:var(--plum)}
.hero-stat b{display:block;font-size:1.6rem}
.hero-stat span{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.wave-bottom{display:block;width:100%;height:auto;margin-top:40px}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{order:-1}
}

/* floating decorative stickers */
.deco{position:absolute;pointer-events:none;opacity:.95}
.deco img{width:100%;height:100%}

/* ---------- Badge / pill row ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pill{
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:.85rem;
  background:var(--cream-2);border:2.5px solid var(--plum);
  padding:9px 18px;border-radius:999px;
}

/* ---------- Section headers ---------- */
.sec-head{max-width:640px;margin:0 auto 46px;text-align:center}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);text-transform:uppercase}
.sec-head p{font-size:1.05rem}
.sec-head.left{margin:0 0 40px;text-align:left}

/* ---------- Cards ---------- */
.card{
  background:var(--cream-2);
  border:3px solid var(--plum);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:26px;
}
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-4,.grid-5,.grid-2{grid-template-columns:1fr}}

/* dish photo placeholder block */
.photo-ph{
  border-radius:18px;
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:'Baloo 2',sans-serif;font-weight:600;
  color:var(--cream);
  padding:16px;
  position:relative;overflow:hidden;
  border:3px solid var(--plum);
}
.photo-ph small{display:block;font-weight:600;font-size:.72rem;opacity:.85;margin-top:6px;text-transform:uppercase;letter-spacing:1px}
.ph-orange{background:repeating-linear-gradient(135deg,var(--orange),var(--orange) 18px,var(--orange-deep) 18px,var(--orange-deep) 36px)}
.ph-plum{background:repeating-linear-gradient(135deg,var(--plum),var(--plum) 18px,var(--plum-2) 18px,var(--plum-2) 36px)}
.ph-green{background:repeating-linear-gradient(135deg,var(--dark-green),var(--dark-green) 18px,var(--green) 18px,var(--green) 36px)}
.photo-ph.icon-card::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}
.ph-icon-wrap{
  position:relative;z-index:1;
  width:58%;max-width:130px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.72) 70%);
  box-shadow:0 10px 0 rgba(60,2,51,.9), 0 14px 26px rgba(0,0,0,.18);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.ph-icon-wrap img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}
.card:hover .ph-icon-wrap,a.card:hover .ph-icon-wrap{transform:translateY(-6px) rotate(-4deg)}
.photo-ph.ph-mascot{background:var(--cream-2)}
.photo-ph.ph-mascot img{object-fit:contain;position:relative;padding:34px;transition:transform .5s ease}
.photo-ph .ph-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 18px 16px;text-align:left;
  background:linear-gradient(0deg,rgba(60,2,51,.92),rgba(60,2,51,0));
  font-size:.98rem;line-height:1.3;
}
.photo-credit{font-size:.68rem;opacity:.55;text-align:center;margin-top:10px;font-family:'Baloo 2',sans-serif}

/* ---------- Menu items ---------- */
.menu-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.menu-tab{
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:.95rem;
  padding:11px 22px;border-radius:999px;border:2.5px solid var(--plum);
  background:var(--cream-2);cursor:pointer;
}
.menu-tab.active,.menu-tab:hover{background:var(--plum);color:var(--cream)}
.menu-cat{display:none;margin-bottom:60px}
.menu-cat.active{display:block}
.menu-cat h3{
  font-size:1.9rem;text-transform:uppercase;margin-bottom:22px;
  display:flex;align-items:center;gap:14px;color:var(--orange);
}
.menu-cat h3::after{content:"";flex:1;border-bottom:3px dashed var(--plum);opacity:.5}
.menu-item{
  display:flex;justify-content:space-between;gap:18px;
  padding:18px 0;border-bottom:2px dashed rgba(60,2,51,.25);
}
.menu-item:last-child{border-bottom:none}
.menu-item-name{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:1.12rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.menu-item-desc{font-size:.92rem;opacity:.85;margin-top:4px;max-width:520px}
.menu-item-price{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--orange);white-space:nowrap;font-size:1.15rem}
.tag{font-size:.62rem;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px}
.tag-veg{background:var(--green);color:#fff}
.tag-spicy{background:var(--orange);color:#fff}

/* ---------- Timeline / about ---------- */
.timeline{border-left:4px dashed var(--plum);padding-left:30px;display:flex;flex-direction:column;gap:34px;margin-left:8px}
.timeline-item{position:relative}
.timeline-item b{font-family:'Baloo 2',sans-serif;color:var(--orange);display:block;font-size:.85rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.timeline-item .icon-badge.sm{position:absolute;left:-49px;top:-6px}

/* ---------- Icon badges (steps, timeline, testimonials, menu heads) ---------- */
.icon-badge{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--plum);box-shadow:0 5px 0 rgba(60,2,51,.9);
}
.icon-badge img{width:56%;height:56%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.icon-badge.tone-orange{background:var(--orange)}
.icon-badge.tone-plum{background:var(--plum-2)}
.icon-badge.tone-green{background:var(--green)}
.icon-badge.sm{width:36px;height:36px;border-width:2.5px;box-shadow:0 3px 0 rgba(60,2,51,.9)}
.icon-badge.testi-avatar{width:48px;height:48px}

/* ---------- Values ---------- */
.value-card{text-align:center}
.value-card img{width:70px;margin:0 auto 14px}

/* ---------- Blog ---------- */
.blog-card{overflow:hidden;padding:0}
.blog-card .photo-ph{border-radius:0;border-width:0 0 3px 0;aspect-ratio:16/10}
.blog-card-body{padding:22px}
.blog-meta{font-family:'Baloo 2',sans-serif;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--orange);margin-bottom:8px}
.blog-card h3{font-size:1.3rem}
.blog-card p{font-size:.94rem;opacity:.85}
.blog-featured{display:grid;grid-template-columns:1.1fr .9fr;gap:0;overflow:hidden;padding:0;margin-bottom:50px}
.blog-featured .photo-ph{border-radius:0;aspect-ratio:auto;height:100%;border-width:0}
.blog-featured-body{padding:40px}
@media(max-width:760px){.blog-featured{grid-template-columns:1fr}.blog-featured .photo-ph{aspect-ratio:16/9}}

/* ---------- Events ---------- */
.event-card{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.event-media{display:flex;align-items:center;gap:14px}
.event-date{
  background:var(--plum);color:var(--cream);border-radius:16px;
  text-align:center;padding:16px 8px;font-family:'Baloo 2',sans-serif;width:76px;
}
.event-date .d{font-size:2.1rem;font-weight:700;line-height:1}
.event-date .m{font-size:.85rem;text-transform:uppercase;letter-spacing:1px}
.event-card h3{font-size:1.4rem;margin-bottom:6px}
.event-meta{font-size:.85rem;font-weight:700;font-family:'Baloo 2',sans-serif;color:var(--orange);margin-bottom:8px;display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:560px){.event-card{grid-template-columns:1fr}.event-media{justify-content:center}}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gallery-grid .photo-ph{aspect-ratio:1/1}
.gallery-grid .tall{grid-row:span 2;aspect-ratio:auto}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.quote-block{
  background:var(--plum);color:var(--cream);border-radius:var(--radius);
  padding:50px;text-align:center;position:relative;
}
.quote-block p{font-family:'Baloo 2',sans-serif;font-size:1.5rem;max-width:700px;margin:0 auto 14px}
.quote-block span{font-size:.85rem;opacity:.75;text-transform:uppercase;letter-spacing:1px}

/* ---------- Visit / contact ---------- */
.info-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.info-list li{display:flex;gap:14px}
.info-ico{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--orange);
  display:flex;align-items:center;justify-content:center;color:var(--cream);
  font-family:'Baloo 2',sans-serif;font-weight:700;border:3px solid var(--plum);
}
.hours-table{width:100%;border-collapse:collapse}
.hours-table td{padding:10px 0;border-bottom:2px dashed rgba(60,2,51,.25);font-family:'Baloo 2',sans-serif}
.hours-table td:last-child{text-align:right;font-weight:700;color:var(--orange)}
.map-ph{
  border-radius:var(--radius);border:3px solid var(--plum);
  background:
    linear-gradient(rgba(60,2,51,.08),rgba(60,2,51,.08)),
    repeating-linear-gradient(45deg,var(--cream-2),var(--cream-2) 22px,#efdcc0 22px,#efdcc0 44px);
  min-height:340px;display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:600;text-align:center;padding:20px;
}
.form-field{margin-bottom:16px}
.form-field label{display:block;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:.85rem;margin-bottom:6px}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:13px 16px;border-radius:12px;border:2.5px solid var(--plum);
  background:var(--cream-2);font-family:inherit;font-size:.95rem;color:var(--plum);
}
.form-field textarea{resize:vertical;min-height:110px}
.faq-item{border-bottom:2.5px dashed rgba(60,2,51,.3);padding:18px 0}
.faq-item summary{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:1.05rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-item p{margin-top:12px;opacity:.85}

/* ---------- Newsletter / CTA band ---------- */
.cta-band{
  background:var(--plum);color:var(--cream);
  border-radius:var(--radius);padding:56px;text-align:center;
  position:relative;overflow:hidden;
}
.cta-band h2{color:var(--cream);text-transform:uppercase}
.cta-band p{opacity:.85;max-width:520px;margin:0 auto 24px}

/* ---------- Footer ---------- */
.site-footer{background:var(--plum);color:var(--cream);padding:70px 0 26px;margin-top:100px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:50px}
.footer-grid h4{color:var(--orange);font-size:1rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-grid a:hover{color:var(--orange)}
.footer-logo img{height:50px;margin-bottom:16px}
.footer-grid p{opacity:.8;font-size:.92rem}
.social-row{display:flex;gap:10px;margin-top:14px}
.social-row a{
  width:38px;height:38px;border-radius:50%;border:2px solid var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;
}
.social-row a:hover{background:var(--orange);border-color:var(--orange)}
.footer-bottom{
  border-top:1.5px solid rgba(245,232,213,.25);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.85rem;opacity:.75;
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:var(--plum);color:var(--cream);padding:140px 0 120px;text-align:center;position:relative;overflow:hidden}
.page-hero h1{color:var(--cream);text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.4rem)}
.page-hero p{max-width:560px;margin:0 auto;opacity:.85;font-size:1.05rem}
.crumb-strip{height:16px;width:100%;background:var(--orange);position:relative}
.crumb-strip::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--cream) 3px,transparent 3.5px);
  background-size:26px 16px;background-position:13px 8px;opacity:.5;
}

/* utility */
.text-center{text-align:center}
.mt-0{margin-top:0}
.flex{display:flex}
.gap-2{gap:10px}
.hidden-mobile{}
@media(max-width:720px){.hidden-mobile{display:none}}

/* ============================================================
   ANIMATION SYSTEM (shared behaviour, v1 styling)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  body{animation:pageIn .7s ease both}
}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-scale.in-view{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale{opacity:1;transform:none;transition:none}
  body{animation:none}
}

.site-header{transition:padding .3s ease, box-shadow .3s ease, border-color .3s ease}
.site-header.scrolled{box-shadow:0 6px 18px rgba(60,2,51,.18);border-bottom-color:var(--orange)}
.site-header.scrolled .nav{padding-top:8px;padding-bottom:8px}
.site-header.scrolled .logo img{height:40px;transition:height .3s ease}
.nav .logo img{transition:height .3s ease}
.nav-links a{transition:background .25s ease,color .25s ease}

.hero-art img{animation:floaty 5.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(-1.5deg)}}
@media (prefers-reduced-motion: reduce){.hero-art img{animation:none}}

.marquee-band{background:var(--plum);overflow:hidden;padding:16px 0;border-top:3px solid var(--orange);border-bottom:3px solid var(--orange)}
.marquee-track{display:flex;width:max-content;gap:0;animation:marquee 26s linear infinite}
.marquee-track span{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:1.05rem;color:var(--cream);
  padding:0 28px;white-space:nowrap;text-transform:uppercase;letter-spacing:1px;
}
.marquee-track span::after{content:"✦";color:var(--orange);margin-left:14px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}

.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(254,89,34,.5);transition:box-shadow .4s ease;
}
.btn:hover::after{box-shadow:0 0 0 8px rgba(254,89,34,0)}

[data-counter]{font-variant-numeric:tabular-nums}

.parallax-el{will-change:transform}
.menu-strip{grid-template-columns:repeat(5,1fr)}
@media(max-width:760px){.menu-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.menu-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- Steps (How to Order) ---------- */
.step-num-wrap{position:relative;width:64px;margin:0 auto 16px}
.step-num{
  width:64px;height:64px;border-radius:50%;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--plum);box-shadow:0 6px 0 rgba(60,2,51,.9);
}
.step-num img{width:52%;height:52%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.step-tag{
  position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;
  background:var(--plum);color:var(--cream);font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:.8rem;display:flex;align-items:center;justify-content:center;border:2px solid var(--cream);
}
.step-card{text-align:center}
.step-arrow{display:flex;align-items:center;justify-content:center;color:var(--plum);opacity:.4;font-size:1.8rem}
@media(max-width:760px){.step-arrow{transform:rotate(90deg)}}

/* ---------- Menu category headers ---------- */
.menu-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.menu-cat-head h3{margin:0}

/* ---------- Instagram strip (home) ---------- */
.grid-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:980px){.grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.grid-6{grid-template-columns:repeat(2,1fr)}}
.insta-strip .photo-ph{aspect-ratio:1/1}

/* ---------- Testimonial row ---------- */
.testi-card{display:flex;flex-direction:column;gap:14px}
.testi-top{display:flex;align-items:center;gap:12px}
.testi-stars{color:var(--orange);letter-spacing:2px;font-size:1rem}
.testi-name{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:.9rem;opacity:.85;margin-top:auto}
.photo-ph.ph-lg .ph-icon-wrap{max-width:230px;width:66%}
.photo-ph.ph-lg .ph-icon-wrap img{width:58%;height:58%}

/* ============================================================
   ADDITIONS — campus-edition homepage build
   ============================================================ */

/* ---------- Accessibility utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--plum);color:var(--cream);padding:12px 20px;border-radius:0 0 10px 0;z-index:999;font-family:'Baloo 2',sans-serif;font-weight:600}
.skip-link:focus{left:0}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--plum);color:var(--cream);
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:.88rem;
  text-align:center;padding:10px 28px;
  position:relative;border-bottom:3px solid var(--orange);
}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:0}
.announce strong{color:var(--orange)}
.announce-close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--cream);opacity:.75;font-size:1.2rem;line-height:1;
  padding:4px;cursor:pointer;
}
.announce-close:hover{opacity:1}

/* ---------- Why Baan Yai / feature cards (icon-badge style) ---------- */
.feature-card{text-align:center}
.feature-card .icon-badge{margin:0 auto 16px}
.feature-card h3{font-size:1.08rem}
.feature-card p{font-size:.9rem;opacity:.8;margin:0}

/* ---------- Signature dish cards ---------- */
.dish-card{padding:0;overflow:hidden}
.dish-card .photo-ph{border-radius:0;border-width:0 0 3px 0}
.dish-card-body{padding:20px 22px 24px}
.dish-card-body .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.dish-card-body h3{margin:0;font-size:1.12rem}
.dish-card-body .price{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--orange);white-space:nowrap}
.dish-card-body p{font-size:.9rem;opacity:.8;margin:0}

/* ---------- Thai Heritage / visual story ---------- */
.heritage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.heritage-card{background:rgba(245,232,213,.08);border:2.5px solid rgba(245,232,213,.35);border-radius:var(--radius);padding:26px;text-align:center}
.heritage-card .icon-badge{margin:0 auto 16px}
.heritage-card h3{color:var(--cream);font-size:1.05rem}
.heritage-card p{color:var(--cream);opacity:.78;font-size:.92rem;margin:0}

/* ---------- Student experience stats ---------- */
.student-stats{display:flex;justify-content:center;gap:clamp(26px,6vw,56px);flex-wrap:wrap;margin-top:34px}
.student-stats .item{font-family:'Baloo 2',sans-serif;text-align:center}
.student-stats .item b{display:block;font-size:2rem;color:var(--orange)}
.student-stats .item span{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;opacity:.75}

/* ---------- Location (homepage mini + locations page) ---------- */
.location-card{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid var(--plum);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.location-card .map-ph{border:0;border-radius:0;min-height:100%}
.location-card-body{padding:clamp(26px,4vw,42px);background:var(--cream-2)}
@media(max-width:840px){.location-card{grid-template-columns:1fr}.location-card .map-ph{min-height:240px}}

/* ---------- Catering packages ---------- */
.pkg-card{text-align:left;position:relative}
.pkg-card.featured{border-color:var(--orange);border-width:4px}
.pkg-card .ribbon{
  position:absolute;top:-14px;right:20px;background:var(--orange);color:var(--cream);
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;
  letter-spacing:1px;padding:6px 14px;border-radius:999px;border:2.5px solid var(--plum);
}
.pkg-price{font-family:'Baloo 2',sans-serif;font-size:2rem;color:var(--orange);margin:8px 0}
.pkg-price span{font-size:.85rem;font-weight:600;color:var(--plum);opacity:.7}
.pkg-list{margin:16px 0 22px;display:flex;flex-direction:column;gap:9px;font-size:.9rem}
.pkg-list li{display:flex;gap:8px;align-items:flex-start}
.pkg-list li::before{content:"✓";color:var(--green);font-weight:800}

/* ---------- Social / community grid ---------- */
.social-tile{position:relative;text-align:left}
.social-tile .ph-cap{font-family:'Baloo 2',sans-serif;font-weight:600}

/* ---------- Contact / form layout ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.contact-info-list{display:flex;flex-direction:column;gap:20px;margin-top:6px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form-grid-2{grid-template-columns:1fr}}


/* ---------- TAY Crumb: display face ----------
   TAY Crumb is a caps-only typeface - it has no lowercase letterforms, so
   'Menu' would draw as 'MENU'. It is therefore scoped to the elements the
   design already sets in uppercase, plus numerals. Everything else uses
   Baloo 2, which matches its character and has true lowercase. ---------- */
.eyebrow,
.hero-copy h1,
.hero-stat,
.hero-stat span,
.sec-head h2,
.photo-ph small,
.menu-cat h3,
.tag,
.timeline-item b,
.blog-meta,
.event-date .d,
.event-date .m,
.quote-block span,
.cta-band h2,
.footer-grid h4,
.page-hero h1,
.marquee-track span,
.student-stats .item span,
.pkg-card .ribbon{
  font-family:'TAY Crumb','Baloo 2',sans-serif;
}


/* ============================================================
   MENU PAGE — browse-and-choose experience
   ============================================================ */

/* Tabs follow you down the long Mains list */
.menu-tabs{
  position:sticky; top:74px; z-index:40;
  width:max-content; max-width:100%; margin-left:auto; margin-right:auto;
  padding:12px 16px; margin-bottom:34px;
  background:rgba(245,232,213,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:999px;
  box-shadow:0 6px 0 rgba(60,2,51,.10);
}
.menu-tab{position:relative; transition:transform .18s ease, background .25s ease, color .25s ease}
.menu-tab:hover{transform:translateY(-2px)}
.menu-tab .count{
  display:inline-block; margin-left:7px; padding:1px 7px;
  border-radius:999px; font-size:.7em; line-height:1.5;
  background:rgba(60,2,51,.12); color:inherit;
}
.menu-tab.active .count{background:rgba(245,232,213,.25)}

/* Category header */
.menu-cat-head{
  position:relative; padding-bottom:14px; margin-bottom:22px;
  border-bottom:3px dashed rgba(60,2,51,.2);
}
.menu-cat-head .icon-badge{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.menu-cat.active .menu-cat-head .icon-badge{animation:badgePop .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes badgePop{0%{transform:scale(.6) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* Each dish animates in, one after the next */
.menu-cat.active .menu-item{animation:dishIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes dishIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.menu-cat.active .menu-item:nth-child(2){animation-delay:.04s}
.menu-cat.active .menu-item:nth-child(3){animation-delay:.08s}
.menu-cat.active .menu-item:nth-child(4){animation-delay:.12s}
.menu-cat.active .menu-item:nth-child(5){animation-delay:.16s}
.menu-cat.active .menu-item:nth-child(6){animation-delay:.20s}
.menu-cat.active .menu-item:nth-child(7){animation-delay:.24s}
.menu-cat.active .menu-item:nth-child(8){animation-delay:.28s}
.menu-cat.active .menu-item:nth-child(9){animation-delay:.32s}
.menu-cat.active .menu-item:nth-child(10){animation-delay:.36s}
.menu-cat.active .menu-item:nth-child(n+11){animation-delay:.40s}

/* Hover: lift the row and flag it with a brand accent */
.menu-item{
  position:relative; border-radius:var(--radius-sm);
  padding:18px 16px; margin:0 -16px;
  transition:background .22s ease, transform .22s ease;
}
.menu-item::before{
  content:""; position:absolute; left:2px; top:50%;
  width:4px; height:0; border-radius:99px; background:var(--orange);
  transform:translateY(-50%); transition:height .25s ease;
}
.menu-item:hover{background:var(--cream-2); transform:translateX(4px)}
.menu-item:hover::before{height:56%}
.menu-item:hover .menu-item-price{transform:scale(1.07)}

/* Price reads as a chip, easy to scan down the column */
.menu-item-price{
  align-self:center; height:max-content;
  padding:4px 12px; border-radius:999px;
  background:rgba(254,89,34,.12);
  transition:transform .22s ease, background .22s ease;
}
.menu-item:hover .menu-item-price{background:rgba(254,89,34,.2)}

/* Quiet decorative brand motifs behind the menu */
.menu-deco{position:absolute; pointer-events:none; opacity:.1; z-index:0}
.menu-deco img{width:100%}
.menu-deco-1{width:110px; top:300px; left:-46px; animation:drift 9s ease-in-out infinite}
.menu-deco-2{width:88px; bottom:120px; right:-34px; animation:drift 11s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(8deg)}}
.menu-cats{position:relative; z-index:1}

@media(max-width:720px){
  /* one scrollable strip instead of three stacked rows */
  .menu-tabs{
    top:64px; gap:8px;
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    width:auto; max-width:none;
    margin:0 -28px 26px; padding:10px 28px;
    border-radius:0; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .menu-tabs::-webkit-scrollbar{display:none}
  .menu-tab{flex:0 0 auto; font-size:.82rem; padding:8px 13px}
  .menu-item{margin:0 -10px; padding:16px 10px}
  .menu-deco{display:none}
}
@media (prefers-reduced-motion: reduce){
  .menu-cat.active .menu-item,
  .menu-cat.active .menu-cat-head .icon-badge{animation:none}
  .menu-deco-1,.menu-deco-2{animation:none}
  .menu-item:hover{transform:none}
}


/* Photo slots: drop a real photo in and it fills the tile (object-fit:cover).
   Currently holding the coming-soon placeholders. */
.photo-ph.ph-photo{padding:0; background:var(--cream-2)}
.photo-ph.ph-photo img{width:100%; height:100%; object-fit:cover; display:block}
.card:hover .photo-ph.ph-photo img{transform:scale(1.04)}
.photo-ph.ph-photo img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}