/* ============================================================
   WING WORLD — "Around the World in 30 Sauces"
   Dark · smoky · gold + red · ember heat scale
   ============================================================ */

:root{
  --ink:        #0e0b09;
  --ink-2:      #15110e;
  --ink-3:      #1d1813;
  --char:       #241d17;
  --cream:      #f4ead6;
  --cream-dim:  rgba(244,234,214,.62);
  --cream-faint:rgba(244,234,214,.40);
  --gold:       #f7b40a;
  --gold-deep:  #e0900a;
  --red:        #d62216;
  --red-deep:   #9b1109;
  --ember:      #ff5a1f;
  --line:       rgba(244,234,214,.12);

  --heat: linear-gradient(90deg,#8bbf24 0%,#f7b40a 32%,#ff8c1a 56%,#ff5a1f 74%,#d62216 88%,#5e0a06 100%);

  --ff-display: "Anton", "Arial Narrow", sans-serif;
  --ff-grotesk: "Bricolage Grotesque", system-ui, sans-serif;
  --ff-body:    "Hanken Grotesk", system-ui, sans-serif;

  --maxw: 1240px;
  --pad: clamp(1.1rem, 4vw, 4rem);
  --r: 18px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:84px; overflow-x:hidden; max-width:100% }
body{
  font-family:var(--ff-body);
  background:var(--ink);
  color:var(--cream);
  line-height:1.55;
  overflow-x:hidden;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
section{ position:relative }

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

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--ff-grotesk); font-weight:800;
  text-transform:uppercase; letter-spacing:.28em; font-size:.74rem;
  color:var(--gold);
}
.sec-title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.6rem,7vw,6rem); line-height:.92;
  letter-spacing:.01em; text-transform:uppercase;
}
.sec-lede{ max-width:60ch; color:var(--cream-dim); margin-top:1rem; font-size:1.05rem }
.txt-gold{ color:var(--gold) }
.txt-fire{
  background:linear-gradient(180deg,#ffd23f,#ff5a1f 55%,#d62216);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-head{ max-width:var(--maxw); margin:0 auto; padding:clamp(3.4rem,8vw,6rem) var(--pad) 2.4rem }
.sec-head--center{ text-align:center }
.sec-head--center .sec-lede{ margin-inline:auto }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--ff-grotesk); font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; font-size:.85rem;
  padding:.85em 1.4em; border-radius:100px; border:2px solid transparent;
  cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s, color .25s;
  white-space:nowrap;
}
.btn--lg{ font-size:.95rem; padding:1em 1.7em }
.btn--xl{ font-size:1.15rem; padding:1.15em 2.3em }
.btn--order{
  background:var(--red); color:#fff;
  box-shadow:0 8px 0 var(--red-deep), 0 18px 30px -12px rgba(214,34,22,.7);
}
.btn--order:hover{ transform:translateY(-3px); box-shadow:0 11px 0 var(--red-deep),0 26px 40px -14px rgba(214,34,22,.8) }
.btn--order:active{ transform:translateY(3px); box-shadow:0 3px 0 var(--red-deep) }
.btn--ghost{ border-color:var(--line); color:var(--cream); background:rgba(244,234,214,.03) }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px) }

/* ---------- topbar ---------- */
.topbar{ background:var(--red-deep); color:#ffe9c7; font-size:.78rem }
.topbar__inner{
  max-width:var(--maxw); margin:0 auto; padding:.5rem var(--pad);
  display:flex; gap:.9rem; align-items:center; justify-content:center; flex-wrap:wrap;
  font-family:var(--ff-grotesk); font-weight:600; letter-spacing:.04em;
}
.topbar__dot{ color:var(--gold); opacity:.8 }
.topbar__phone{ color:#fff; font-weight:800 }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:200; transition:background .35s, box-shadow .35s, padding .35s; }
.nav.scrolled{ background:rgba(14,11,9,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line) }
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:.7rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.nav__logo img{ height:46px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) }
.nav__links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a{
  font-family:var(--ff-grotesk); font-weight:600; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--cream-dim);
  position:relative; padding:.2rem 0; transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--gold); transition:width .25s;
}
.nav__links a:hover{ color:var(--cream) } .nav__links a:hover::after{ width:100% }
.nav__cta{ margin-left:.2rem }
.nav__burger{ display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; margin-left:auto }
.nav__burger span{ width:26px; height:3px; background:var(--cream); border-radius:3px; transition:.3s }
.nav__burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.nav__burger.open span:nth-child(2){ opacity:0 }
.nav__burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(80vw,320px); z-index:190;
  background:var(--ink-2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.7,0,.2,1);
  display:flex; flex-direction:column; gap:.4rem; padding:6rem 1.6rem 2rem;
}
.drawer.open{ transform:translateX(0) }
.drawer a{ font-family:var(--ff-grotesk); font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.9rem .4rem; border-bottom:1px solid var(--line) }
.drawer .btn{ margin-top:1rem; justify-content:center }

/* ---------- hero ---------- */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:6vh var(--pad) 0 }
.hero__bg{
  position:absolute; inset:-12% 0 0 0; height:124%;
  background:url("../assets/web/_herobg.jpg") center/cover no-repeat;
  will-change:transform; z-index:-2;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(14,11,9,.15), transparent 45%),
    linear-gradient(180deg, rgba(14,11,9,.7) 0%, rgba(14,11,9,.55) 35%, rgba(14,11,9,.92) 88%, var(--ink) 100%);
}
.hero__content{ max-width:var(--maxw); margin:0 auto; width:100%; }
.hero__eyebrow{ margin-bottom:1.1rem }
.hero__title{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(3.2rem,12vw,9.5rem); line-height:.86; letter-spacing:.005em;
  text-shadow:0 6px 30px rgba(0,0,0,.6);
}
.hero__title .line{ display:block; overflow:hidden }
.hero__title .line--accent{ color:var(--gold) }
.hero__sub{ max-width:46ch; margin-top:1.6rem; font-size:clamp(1rem,2.2vw,1.3rem); color:var(--cream-dim) }
.hero__sub strong{ color:var(--cream) }
.hero__cta{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap }

.hero__stats{
  max-width:var(--maxw); margin:auto auto 0; width:100%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  padding:2.4rem 0 2.6rem; border-top:1px solid var(--line); margin-top:3rem;
}
.stat{ display:flex; flex-direction:column }
.stat__num{ font-family:var(--ff-display); font-size:clamp(2.4rem,6vw,4rem); line-height:1; color:var(--gold) }
.stat__num--fire{ color:var(--ember) }
.stat__label{ font-family:var(--ff-grotesk); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--cream-faint); margin-top:.4rem }

/* ---------- marquee ---------- */
.marquee{ background:var(--gold); color:var(--ink); overflow:hidden; border-block:3px solid var(--ink) }
.marquee__track{ display:flex; gap:1.4rem; align-items:center; white-space:nowrap; padding:.7rem 0; width:max-content; animation:scroll 26s linear infinite }
@media (max-width:760px){ .marquee__track{ animation-duration:45s } }
.marquee__track span{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.4rem; letter-spacing:.02em }
.marquee__track i{ color:var(--red); font-style:normal }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* ---------- about ---------- */
.about{ background:var(--ink-2) }
.about__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,10vw,8rem) var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center;
}
.about__text{ display:flex; flex-direction:column; gap:1.2rem }
.about__text .eyebrow{ margin-bottom:-.4rem }
.about__text .sec-title{ margin-bottom:.3rem }
.about__text p{ color:var(--cream-dim); max-width:52ch }
.about__text p strong{ color:var(--cream) }
.about__text .btn{ margin-top:.6rem; align-self:flex-start }

.about__photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:260px 260px;
  gap:.8rem;
}
.aphoto{
  border-radius:var(--r); background-size:cover; background-position:center;
  border:1px solid var(--line); transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.aphoto:hover{ transform:scale(1.03) }
.aphoto--tall{ grid-row:span 2 }

/* ---------- split rows (House of Wings style) ---------- */
.split{ background:var(--ink) }
.split__row{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3rem,7vw,6rem) var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center;
  border-bottom:1px solid var(--line);
}
.split__row:last-child{ border-bottom:0 }
.split__row--flip .split__img{ order:2 }
.split__row--flip .split__body{ order:1 }

.split__img{
  aspect-ratio:4/3; border-radius:var(--r);
  background-size:cover; background-position:center;
  border:1px solid var(--line);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.split__row:hover .split__img{ transform:scale(1.02) }

.split__body{ display:flex; flex-direction:column; gap:1.1rem }
.split__body .eyebrow{ margin-bottom:-.3rem }
.split__body p{ color:var(--cream-dim); max-width:50ch; font-size:1.05rem }

/* ---------- photo mosaic ---------- */
.mosaic{ background:var(--ink-2) }
.mosaic__grid{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad) clamp(3rem,8vw,6rem);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
  gap:.8rem;
}
.mtile{
  border-radius:var(--r); background-size:cover; background-position:center;
  border:1px solid var(--line); overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.mtile:hover{ transform:scale(1.04); filter:brightness(1.1) }
.mtile--tall{ grid-row:span 2 }
.mtile--wide{ grid-column:span 2 }

/* ---------- google reviews ---------- */
.reviews{ background:var(--ink) }
.reviews__grid{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad) clamp(3rem,8vw,6rem);
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;
}
.rcard{
  background:var(--char); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem; display:flex; flex-direction:column; gap:1rem;
  transition:transform .25s, border-color .25s;
}
.rcard:hover{ transform:translateY(-4px); border-color:var(--gold) }
.rcard__top{ display:flex; align-items:center; gap:.9rem }
.rcard__avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--gold-deep); color:#fff;
  font-family:var(--ff-display); font-size:1.3rem;
  display:grid; place-items:center; flex-shrink:0;
}
.rcard__name{ font-family:var(--ff-grotesk); font-weight:700; font-size:.95rem }
.rcard__stars{ color:var(--gold); font-size:.95rem; letter-spacing:.05em }
.rcard__glogo{ width:22px; height:22px; margin-left:auto; flex-shrink:0 }
.rcard__text{ color:var(--cream-dim); font-size:.95rem; line-height:1.65; font-style:italic }

/* ---------- gallery ---------- */
.gallery{ background:var(--ink) }
.galSwiper{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(3rem,8vw,6rem); overflow:hidden }
.galSwiper .swiper-slide{ width:320px; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; border:1px solid var(--line) }
.galSwiper .swiper-slide a{ display:block; width:100%; height:100% }
.galSwiper .swiper-slide img{ width:100%; height:100%; object-fit:cover; transition:transform .6s }
.galSwiper .swiper-slide:hover img{ transform:scale(1.08) }
.swiper-button-prev,.swiper-button-next{
  width:48px; height:48px; border-radius:50%;
  background:var(--gold); color:var(--ink);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  top:50%; transform:translateY(-50%);
  opacity:1 !important;
}
.swiper-button-prev:after,.swiper-button-next:after{
  font-size:1.1rem; font-weight:900; color:var(--ink);
}
.swiper-button-prev:hover,.swiper-button-next:hover{
  background:var(--gold-deep); transform:translateY(-50%) scale(1.08);
}

/* ---------- catering ---------- */
.catering{ display:grid; grid-template-columns:1fr 1fr; min-height:80vh; background:var(--ink-2) }
.catering__img{ background-size:cover; background-position:center; position:relative }
.catering__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--ink-2) 96%) }
.catering__panel{ padding:clamp(2.4rem,6vw,5rem); display:flex; flex-direction:column; justify-content:center; gap:1rem }
.catering__panel p{ color:var(--cream-dim); max-width:48ch }
.catering__panel p strong{ color:var(--cream) }
.catering__list{ list-style:none; display:grid; gap:.2rem; margin:.6rem 0 1.4rem; max-width:440px }
.catering__list li{ display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px dashed var(--line); font-weight:600 }
.catering__list li span:last-child{ font-family:var(--ff-grotesk); font-weight:800; color:var(--gold) }

/* ---------- locations ---------- */
.locations{ background:var(--ink) }
.loc-grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(3rem,8vw,6rem); display:grid; grid-template-columns:1fr 1fr; gap:1.4rem }
.loc{ background:var(--char); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem; display:flex; flex-direction:column; gap:.7rem }
.loc h3{ font-family:var(--ff-display); font-size:2.2rem; text-transform:uppercase; color:var(--gold); line-height:1 }
.loc address{ font-style:normal; color:var(--cream-dim); line-height:1.7 }
.loc__hours{ font-family:var(--ff-grotesk); font-weight:600; font-size:.9rem; color:var(--cream) }
.loc__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.3rem 0 .4rem }
.loc__map{ width:100%; height:230px; border:0; border-radius:12px; margin-top:auto; filter:grayscale(.3) contrast(1.05) }

.loc-grid--solo{ grid-template-columns:1fr; max-width:1040px }
.loc--solo{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; align-items:stretch }
.loc--solo .loc__info{ display:flex; flex-direction:column; gap:.7rem }
.loc--solo .loc__map{ height:100%; min-height:300px; margin-top:0 }
.loc__note{ font-size:.85rem; color:var(--cream-faint) }

/* ---------- instagram ---------- */
.insta{ background:var(--ink-2) }
.insta__grid{ max-width:var(--maxw); margin:0 auto 2rem; padding:0 var(--pad); display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem }
.insta__tile{ aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid var(--line); position:relative }
.insta__tile img{ width:100%; height:100%; object-fit:cover; opacity:.9; transition:.4s }
.insta__tile:hover img{ opacity:1; transform:scale(1.06) }
.insta__tile::after{ content:"@"; position:absolute; inset:auto .5rem .4rem auto; font-family:var(--ff-display); color:var(--gold); opacity:.0; transition:.3s }
.insta__tile:hover::after{ opacity:.8 }

/* ---------- footer ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--line) }
.footer__cta{ text-align:center; padding:clamp(3rem,9vw,7rem) var(--pad); background:radial-gradient(80% 120% at 50% 0%, rgba(214,34,22,.18), transparent 60%) }
.footer__cta h2{ font-family:var(--ff-display); font-size:clamp(2.6rem,9vw,7rem); text-transform:uppercase; margin-bottom:1.6rem; line-height:.9 }
.footer__bottom{ max-width:var(--maxw); margin:0 auto; padding:2.4rem var(--pad) 3rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.7rem; border-top:1px solid var(--line) }
.footer__logo{ height:54px; width:auto }
.footer__bottom p{ color:var(--cream-faint); font-size:.88rem }
.footer__copy{ font-size:.78rem !important }

/* back to top */
.totop{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:150; width:52px; height:52px; border-radius:50%; background:var(--red); display:grid; place-items:center; font-size:1.4rem; box-shadow:0 8px 24px -6px rgba(214,34,22,.8); opacity:0; transform:translateY(20px) scale(.6); transition:.35s; pointer-events:none }
.totop.show{ opacity:1; transform:none; pointer-events:auto }
.totop:hover{ transform:translateY(-4px) rotate(8deg) }

/* ---------- reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s ease-out, transform .65s cubic-bezier(.22,.61,.36,1) }
[data-reveal].in{ opacity:1; transform:none }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .about__inner{ grid-template-columns:1fr }
  .about__photo-grid{ grid-template-rows:200px 200px }
  .split__row{ grid-template-columns:1fr; gap:2rem }
  .split__row--flip .split__img{ order:0 }
  .split__row--flip .split__body{ order:0 }
  .mosaic__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px }
  .reviews__grid{ grid-template-columns:1fr }
  .catering{ grid-template-columns:1fr }
  .catering__img{ min-height:300px } .catering__img::after{ background:linear-gradient(180deg,transparent,var(--ink-2) 96%) }
  .insta__grid{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:760px){
  .nav__links,.nav__cta{ display:none }
  .nav__burger{ display:flex }
  .hero__stats{ grid-template-columns:repeat(2,1fr); gap:1.6rem }
  .loc-grid{ grid-template-columns:1fr }
  .loc--solo{ grid-template-columns:1fr } .loc--solo .loc__map{ min-height:240px }
  .mosaic__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px }
  .mtile--wide{ grid-column:span 1 }
}
@media (max-width:460px){
  .mosaic__grid{ grid-template-columns:1fr; grid-auto-rows:200px }
  .mtile--tall{ grid-row:span 1 }
  .marquee__track span{ font-size:1.1rem }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  [data-reveal]{ opacity:1; transform:none }
}