/* ==========================================================================
   Kebab Palace — Take Away
   Header / Hero / Footer
   ========================================================================== */

:root{
  /* brand blues — sampled from the shopfront logo */
  --navy-900:#061631;
  --navy-850:#081c3d;
  --navy-800:#0c1f47;
  --navy-700:#14336b;
  --navy-600:#20498b;

  /* brand golds — sampled from the shopfront lettering */
  --gold-050:#fff7da;
  --gold-100:#f7e0a0;
  --gold-300:#deb458;
  --gold-500:#b9862b;
  --gold-700:#8a6218;

  --ink:#12203a;
  --ink-soft:#5a6a85;
  --line:rgba(12,31,71,.12);

  --wrap:1240px;
  --header-h:104px;

  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --gold-grad:linear-gradient(180deg,#fff7da 0%,#f7e0a0 16%,#deb458 37%,#b9862b 52%,#daae4b 68%,#f3d88c 87%,#9c7420 100%);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:15px 30px;
  border:0;
  border-radius:4px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-position .35s ease, color .18s ease;
}
.btn-sm{padding:11px 22px;font-size:12.5px}

.btn-gold{
  color:#20180a;
  background:var(--gold-grad);
  background-size:100% 220%;
  background-position:0 22%;
  box-shadow:0 6px 18px rgba(140,96,20,.32), inset 0 0 0 1px rgba(255,255,255,.35);
}
.btn-gold:hover{
  background-position:0 78%;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(140,96,20,.42), inset 0 0 0 1px rgba(255,255,255,.5);
}

.btn-ghost{
  color:var(--gold-100);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1.5px rgba(222,180,88,.65);
  backdrop-filter:blur(2px);
}
.btn-ghost:hover{
  color:#20180a;
  background:var(--gold-grad);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(140,96,20,.35);
}

/* --------------------------------------------------------------------------
   Logo on its blue stripe band
   -------------------------------------------------------------------------- */
.brand{display:inline-block;line-height:0}

.brand-stripe{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:0;
  background:none;
  transition:transform .2s ease;
}

.brand-stripe img{height:48px;width:auto}

.brand:hover .brand-stripe{transform:translateY(-1px)}

.brand-stripe-sm img{height:38px}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, padding .25s ease;
}
.site-header.is-stuck{box-shadow:0 10px 30px rgba(6,22,49,.12)}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:var(--header-h);
  padding-block:12px;
}

.primary-nav{
  display:flex;
  align-items:center;
  gap:36px;
}
.primary-nav ul{
  display:flex;
  align-items:center;
  gap:34px;
  margin:0;
  padding:0;
  list-style:none;
}
.primary-nav ul a{
  position:relative;
  display:inline-block;
  padding:6px 0;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--navy-800);
  transition:color .18s ease;
}
.primary-nav ul a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;
  height:2px;
  background:var(--gold-grad);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.primary-nav ul a:hover,
.primary-nav ul a.is-current{color:var(--navy-600)}
.primary-nav ul a:hover::after,
.primary-nav ul a.is-current::after{transform:scaleX(1)}

/* mobile toggle */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:46px;height:46px;
  padding:0 10px;
  border:0;
  border-radius:4px;
  background:var(--navy-700);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  background:var(--gold-100);
  transition:transform .25s ease, opacity .2s ease;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(400px,60vh,600px);
  overflow:hidden;
  isolation:isolate;
}

/* Drop a photo in at assets/hero.jpg and it takes over automatically.
   Until then the layered gradients below stand in for it. */
.hero-media{
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    url("../assets/hero.jpg"),
    radial-gradient(ellipse 70% 90% at 78% 22%, rgba(52,110,196,.55), transparent 62%),
    radial-gradient(ellipse 60% 80% at 12% 88%, rgba(185,134,43,.32), transparent 60%),
    linear-gradient(155deg,var(--navy-700) 0%,var(--navy-850) 52%,var(--navy-900) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
}

/* Two layers: a pool of shade under the text block so the gold holds on any crop,
   plus a top-to-bottom wash that seats the hero against header and footer. */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse 88% 58% at 50% 44%,
      rgba(6,22,49,.60) 0%,
      rgba(6,22,49,.42) 52%,
      rgba(6,22,49,.14) 100%),
    linear-gradient(180deg,
      rgba(6,22,49,.58) 0%,
      rgba(6,22,49,.26) 38%,
      rgba(6,22,49,.40) 74%,
      rgba(6,22,49,.80) 100%);
}

.hero-inner{
  text-align:center;
  padding-block:68px;
}

.eyebrow{
  margin:0 0 22px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--gold-100);
}

.hero-title{
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(46px,8.4vw,116px);
  line-height:1.02;
  letter-spacing:.035em;
  text-transform:uppercase;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 10px rgba(3,9,26,.8)) drop-shadow(0 1px 2px rgba(3,9,26,.9));
}

.hero-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:26px auto 0;
  max-width:420px;
}
.hero-rule span{
  flex:1;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-300));
}
.hero-rule span:last-child{background:linear-gradient(90deg,var(--gold-300),transparent)}
.hero-rule i{
  width:9px;height:9px;
  transform:rotate(45deg);
  background:var(--gold-300);
}

.hero-tagline{
  max-width:680px;
  margin:24px auto 0;
  font-size:clamp(16px,1.9vw,20px);
  color:rgba(255,255,255,.9);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:40px;
}

.hero-hours{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:34px 0 0;
  font-size:13.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero-hours .dot{
  width:9px;height:9px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 4px rgba(74,222,128,.22);
}
.hero-hours.is-closed .dot{
  background:var(--gold-300);
  box-shadow:0 0 0 4px rgba(222,180,88,.22);
}

.scroll-cue{
  position:absolute;
  left:50%;bottom:26px;
  translate:-50% 0;
  width:26px;height:42px;
  border-radius:14px;
  box-shadow:inset 0 0 0 1.5px rgba(222,180,88,.6);
}
.scroll-cue span{
  position:absolute;
  left:50%;top:9px;
  translate:-50% 0;
  width:3px;height:8px;
  border-radius:2px;
  background:var(--gold-300);
  animation:cue 1.7s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{opacity:0;transform:translateY(0)}
  35%{opacity:1}
  70%{opacity:0;transform:translateY(13px)}
}

/* --------------------------------------------------------------------------
   Section furniture
   -------------------------------------------------------------------------- */
.section-eyebrow{
  margin:0 0 14px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-700);
}

.section-title{
  margin:0;
  max-width:18ch;
  font-family:var(--serif);
  font-size:clamp(29px,3.6vw,44px);
  font-weight:700;
  line-height:1.16;
  letter-spacing:.005em;
  text-wrap:balance;
  color:var(--navy-800);
}

.title-rule{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 30px;
}
.title-rule i{
  width:9px;height:9px;
  transform:rotate(45deg);
  background:var(--gold-500);
}
.title-rule span{
  width:96px;height:2px;
  background:linear-gradient(90deg,var(--gold-500),rgba(185,134,43,0));
}

/* --------------------------------------------------------------------------
   About us
   -------------------------------------------------------------------------- */
.about{
  padding:clamp(70px,9vw,116px) 0;
  background:#fff;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1.06fr;
  gap:clamp(44px,6vw,80px);
  align-items:center;
}

.about-figure{
  position:relative;
  margin:0;
  padding-bottom:34px;
}
.about-figure img{
  width:100%;
  height:auto;
  border-radius:6px;
  box-shadow:0 26px 60px rgba(6,22,49,.26);
}

/* the review card carries a real, sourced number - not decoration */
.rating-card{
  position:absolute;
  left:-14px;
  bottom:0;
  padding:20px 26px 18px;
  border-radius:6px;
  background:linear-gradient(180deg,var(--navy-700) 0%,var(--navy-900) 100%);
  box-shadow:0 18px 38px rgba(6,22,49,.34), inset 0 0 0 1px rgba(222,180,88,.45);
}
.rating-score{
  margin:0;
  font-family:var(--serif);
  font-size:38px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.rating-score span{font-size:17px}
.rating-src{
  margin:8px 0 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  color:#fff;
}
.rating-alt{
  margin:3px 0 0;
  font-size:12.5px;
  color:rgba(255,255,255,.62);
}

.about-copy p{
  margin:0 0 18px;
  max-width:60ch;
  font-size:16.5px;
  color:var(--ink-soft);
}
.about-copy .section-eyebrow,
.about-copy .section-title{max-width:none}

.about-points{
  margin:32px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:20px;
}
.about-points li{
  position:relative;
  padding-left:34px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.about-points li::before{
  content:"";
  position:absolute;
  left:0;top:.42em;
  width:11px;height:11px;
  transform:rotate(45deg);
  background:var(--gold-grad);
  box-shadow:0 2px 6px rgba(140,96,20,.4);
}
.about-points b{
  display:block;
  margin-bottom:2px;
  font-family:var(--serif);
  font-size:17.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--navy-800);
}

.about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:38px;
}

.btn-navy{
  color:var(--gold-100);
  background:linear-gradient(180deg,var(--navy-600) 0%,var(--navy-800) 100%);
  box-shadow:0 8px 20px rgba(12,31,71,.28), inset 0 0 0 1px rgba(222,180,88,.4);
}
.btn-navy:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 28px rgba(12,31,71,.36), inset 0 0 0 1px rgba(247,224,160,.75);
}

.btn-quiet{
  color:var(--navy-800);
  background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(12,31,71,.2);
}
.btn-quiet:hover{
  color:var(--navy-600);
  box-shadow:inset 0 0 0 1.5px var(--gold-500);
  transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   Centred section heads
   -------------------------------------------------------------------------- */
.section-head{
  text-align:center;
  margin-bottom:clamp(38px,4.6vw,58px);
}
.section-head .section-title{
  max-width:22ch;
  margin-inline:auto;
}
.title-rule--center{
  justify-content:center;
  margin:22px auto 0;
}
.title-rule--center span:first-child{
  background:linear-gradient(90deg,rgba(185,134,43,0),var(--gold-500));
}
.section-head--invert .section-eyebrow{color:var(--gold-300)}
.section-head--invert .section-title{color:var(--gold-100)}

/* --------------------------------------------------------------------------
   Gallery - equal square tiles, click to open the lightbox
   -------------------------------------------------------------------------- */
.gallery{
  padding:clamp(70px,9vw,110px) 0;
  background:#f4f6fb;
  border-top:1px solid var(--line);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.gallery-tile{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  border-radius:6px;
  aspect-ratio:1;
  background:var(--navy-800);
  box-shadow:0 10px 26px rgba(6,22,49,.16);
  cursor:pointer;
}
.gallery-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
/* per-tile crop anchor: these shots are 3:2 in a square tile, so a centred
   crop trims both edges. Anchor left where the dish sits against that edge. */
.gallery-tile img.pos-left{object-position:left center}
.gallery-tile::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  box-shadow:inset 0 0 0 0 rgba(222,180,88,0);
  transition:box-shadow .3s ease;
  pointer-events:none;
}
.gallery-tile:hover img,
.gallery-tile:focus-visible img{transform:scale(1.06)}
.gallery-tile:hover::after,
.gallery-tile:focus-visible::after{box-shadow:inset 0 0 0 2px rgba(222,180,88,.85)}
.gallery-tile:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
body.lightbox-open{overflow:hidden}

/* a class selector outranks the UA rule for [hidden], so say it explicitly */
[hidden]{display:none!important}

.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,2vw,26px);
  padding:clamp(16px,4vw,54px);
  background:rgba(4,13,32,.93);
  backdrop-filter:blur(3px);
}

.lightbox-figure{
  margin:0;
  max-width:min(1100px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.lightbox-figure img{
  max-width:100%;
  max-height:74vh;
  width:auto;
  border-radius:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(222,180,88,.35);
}
.lightbox-figure figcaption{
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-100);
}

.lightbox-nav,
.lightbox-close{
  flex:none;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1.5px rgba(222,180,88,.45);
  color:var(--gold-100);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.lightbox-nav{width:54px;height:54px;font-size:34px;line-height:1;padding-bottom:5px}
.lightbox-close{
  position:absolute;
  top:clamp(14px,3vw,28px);
  right:clamp(14px,3vw,28px);
  width:46px;height:46px;
  font-size:29px;
  line-height:1;
  padding-bottom:3px;
}
.lightbox-nav:hover,
.lightbox-close:hover{
  background:var(--gold-grad);
  color:#20180a;
  transform:scale(1.06);
}
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}

/* --------------------------------------------------------------------------
   Our menu - category rail on the left, items on the right
   -------------------------------------------------------------------------- */
.menu{
  /* tighter above than below - the gallery's own bottom padding already
     supplies part of the gap between the two sections */
  padding-top:clamp(36px,4vw,56px);
  padding-bottom:clamp(74px,9vw,116px);
  background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
}

.menu-tabs{
  display:grid;
  grid-template-columns:266px 1fr;
  gap:clamp(28px,4vw,54px);
  align-items:start;
}

.menu-tablist{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-right:22px;
  border-right:1px solid rgba(255,255,255,.12);
}

.menu-tab{
  position:relative;
  padding:14px 16px 14px 20px;
  border:0;
  border-radius:4px;
  background:transparent;
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.045em;
  text-align:left;
  color:rgba(255,255,255,.68);
  cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.menu-tab::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  translate:0 -50%;
  width:3px;height:0;
  border-radius:2px;
  background:var(--gold-grad);
  transition:height .25s ease;
}
.menu-tab:hover{color:#fff;background:rgba(255,255,255,.05)}
.menu-tab.is-active{color:var(--gold-100);background:rgba(255,255,255,.07)}
.menu-tab.is-active::before{height:62%}

.menu-tab:focus-visible,
.menu-panel:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:3px;
}

.menu-items{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 36px;
  margin:0;
  padding:0;
  list-style:none;
}
.menu-panel-title{
  margin:0 0 6px;
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--gold-100);
}
.menu-panel-note{
  margin:0 0 20px;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--gold-300);
}
.menu-panel-title + .menu-items{margin-top:16px}

.menu-items li{
  position:relative;
  padding:14px 0 14px 26px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.menu-items li::before{
  content:"";
  position:absolute;
  left:0;top:21px;
  width:8px;height:8px;
  transform:rotate(45deg);
  background:var(--gold-500);
}
.menu-items li b{
  display:block;
  font-family:var(--serif);
  font-size:17.5px;
  font-weight:700;
  letter-spacing:.015em;
  color:#fff;
}
.menu-items li span{
  display:block;
  margin-top:4px;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.6);
}

.menu-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  margin-top:clamp(42px,5vw,60px);
  text-align:center;
}
.menu-note{
  margin:0;
  font-size:13.5px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.55);
}

/* --------------------------------------------------------------------------
   Testimonials - the public ratings, not invented quotes
   -------------------------------------------------------------------------- */
.reviews{
  padding:clamp(70px,9vw,110px) 0;
  background:#fff;
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.review-card{
  padding:38px 30px 34px;
  text-align:center;
  border-radius:8px;
  background:#f6f8fc;
  box-shadow:inset 0 0 0 1px rgba(12,31,71,.09);
}
.review-card--total{
  background:linear-gradient(180deg,var(--navy-700),var(--navy-900));
  box-shadow:0 16px 34px rgba(6,22,49,.26), inset 0 0 0 1px rgba(222,180,88,.4);
}

.review-score{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(42px,4.6vw,54px);
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.review-score span{font-size:.4em}

.stars{
  position:relative;
  display:inline-block;
  margin-top:13px;
  font-size:17px;
  letter-spacing:4px;
  line-height:1;
  color:rgba(12,31,71,.16);
}
.stars::before{content:"\2605\2605\2605\2605\2605"}
.stars span{
  position:absolute;
  left:0;top:0;
  width:var(--pct,100%);
  overflow:hidden;
  white-space:nowrap;
  color:var(--gold-500);
}

.review-card h3{
  margin:17px 0 6px;
  font-family:var(--serif);
  font-size:20px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--navy-800);
}
.review-card--total h3{color:var(--gold-100)}

.review-count{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
}
.review-card--total .review-count{color:rgba(255,255,255,.66)}

.reviews-note{
  margin:30px 0 0;
  text-align:center;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{
  position:relative;
  color:rgba(255,255,255,.76);
  background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--gold-grad);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:52px 44px;
  padding-block:76px 62px;
}

.footer-col h3{
  margin:0 0 22px;
  font-family:var(--serif);
  font-size:19px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold-100);
}

.footer-brand p{
  margin:22px 0 0;
  max-width:34ch;
  font-size:15px;
}

.footer-col ul{margin:0;padding:0;list-style:none}

.hours li{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  font-size:14.5px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.hours li:last-child{border-bottom:0}
.hours b{color:var(--gold-100);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

.hours-note{
  margin:14px 0 0;
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,255,255,.55);
}

.footer-col address{
  font-style:normal;
  font-size:15px;
  line-height:1.8;
}
.contact-lines{margin:16px 0 0;font-size:15px;line-height:1.9}
.contact-lines a{
  color:var(--gold-100);
  border-bottom:1px solid rgba(247,224,160,.28);
  transition:border-color .18s ease;
}
.contact-lines a:hover{border-color:var(--gold-100)}

.links li{padding:7px 0}
.links a{
  position:relative;
  font-size:15px;
  padding-left:18px;
  transition:color .18s ease,padding-left .18s ease;
}
.links a::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:7px;height:7px;
  transform:rotate(45deg);
  background:var(--gold-500);
  transition:background .18s ease;
}
.links a:hover{color:#fff;padding-left:23px}
.links a:hover::before{background:var(--gold-100)}

.socials{display:flex;gap:12px;margin-top:26px}
.socials a{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(222,180,88,.45);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.socials svg{width:19px;height:19px;fill:var(--gold-100);transition:fill .2s ease}
.socials a:hover{
  background:var(--gold-grad);
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(140,96,20,.35);
}
.socials a:hover svg{fill:#20180a}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.22);
}
.footer-bottom-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-block:22px;
  font-size:13.5px;
  color:rgba(255,255,255,.6);
}
.footer-bottom-inner p{margin:0}
.footer-bottom-inner a:hover{color:var(--gold-100)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:46px 40px}
}

@media (max-width:900px){
  :root{--header-h:86px}

  .nav-toggle{display:flex}

  .primary-nav{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 24px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(6,22,49,.14);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease,padding .3s ease;
  }
  body.nav-open .primary-nav{max-height:420px;padding:8px 24px 24px}

  .primary-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .primary-nav ul a{
    display:block;
    padding:15px 0;
    border-bottom:1px solid var(--line);
  }
  .primary-nav ul a::after{display:none}
  .primary-nav .btn{margin-top:18px;width:100%}

  .brand-stripe{padding:11px 22px}
  .brand-stripe img{height:38px}

  .hero-inner{padding-block:56px}

  .about-grid{grid-template-columns:1fr;gap:52px}
  .about-figure{max-width:560px}
  .section-title{max-width:22ch}

  .gallery-grid{grid-template-columns:repeat(2,1fr)}

  /* category rail becomes a scrolling strip above the items */
  .menu-tabs{grid-template-columns:1fr;gap:26px}
  .menu-tablist{
    flex-direction:row;
    gap:6px;
    padding:0 0 12px;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    scrollbar-width:thin;
    scrollbar-color:rgba(222,180,88,.5) rgba(255,255,255,.06);
  }
  .menu-tablist::-webkit-scrollbar{height:4px}
  .menu-tablist::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:2px}
  .menu-tablist::-webkit-scrollbar-thumb{background:rgba(222,180,88,.5);border-radius:2px}
  .menu-tab{padding:11px 16px;white-space:nowrap}
  .menu-tab::before{
    top:auto;bottom:0;
    left:12px;right:12px;
    width:auto;height:0;
    translate:0 0;
  }
  .menu-tab.is-active::before{height:3px}

  .reviews-grid{grid-template-columns:1fr}

  .lightbox-nav{width:46px;height:46px;font-size:29px}
}

@media (max-width:600px){
  .wrap{padding-inline:18px}
  .brand-stripe{padding:10px 16px}
  .brand-stripe img{height:30px}
  .hero-actions .btn{width:100%}
  .rating-card{left:0;padding:16px 20px 14px}
  .rating-score{font-size:32px}
  .about-actions .btn{width:100%}
  .gallery-grid{gap:10px}
  .menu-items{grid-template-columns:1fr}
  .lightbox{padding:14px;gap:6px}
  .lightbox-figure img{max-height:64vh}
  .lightbox-nav{width:40px;height:40px;font-size:25px}
  .footer-grid{grid-template-columns:1fr;gap:42px;padding-block:56px 46px}
  .footer-bottom-inner{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* --------------------------------------------------------------------------
   Centred layout - every section's content is centre aligned.
   Appended last so it wins over the section rules and the media queries.
   Left-anchored markers are dropped where they would sit oddly beside
   centred text; the rules and borders carry the separation instead.
   -------------------------------------------------------------------------- */

/* About us */
.about-copy{text-align:center}
.about-copy p{margin-left:auto;margin-right:auto}
.about-copy .title-rule{margin-left:auto;margin-right:auto}
.about-actions{justify-content:center}
.rating-card{left:50%;translate:-50% 0;text-align:center}

/* Our menu */
.menu-tab{text-align:center;padding-left:16px}
.menu-panel-title,
.menu-panel-note{text-align:center}
.menu-items li{padding-left:0;text-align:center}
.menu-items li::before{display:none}

/* Footer */
.footer-col{text-align:center}
.footer-brand p{margin-left:auto;margin-right:auto}
.hours li{justify-content:center;gap:12px}
.links a{padding-left:0}
.links a:hover{padding-left:0}
.links a::before{display:none}
.socials{justify-content:center}
.footer-bottom-inner{justify-content:center;text-align:center}

/* logo has no band any more - drop the padding the media queries still set */
.brand-stripe{padding:0}


/* Hamburger on the left, logo centred beside it (mobile only).
   padding-right offsets the toggle (46px) + header gap (28px) so the
   logo sits on the true page centre rather than centre-of-remaining-space. */
@media (max-width:900px){
  .nav-toggle{order:-1}
  .brand{order:1;flex:1;text-align:center;padding-right:74px}
}

/* Larger header logo. Scoped to .site-header so the footer mark, which sits
   on navy and needs no help, keeps its own size. */
.site-header .brand-stripe img{height:64px}
@media (max-width:900px){ .site-header .brand-stripe img{height:48px} }
@media (max-width:600px){ .site-header .brand-stripe img{height:40px} }

/* Powered-by mark sits at the right end of the bottom bar. This overrides the
   centred default for that one row only. */
.footer-bottom-inner{justify-content:space-between}
.powered-by{
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}
.powered-by img{
  height:26px;
  width:auto;
  opacity:.92;
  transition:opacity .2s ease;
}
.powered-by a{display:inline-flex;align-items:center}
.powered-by a:hover img{opacity:1}
@media (max-width:760px){
  .footer-bottom-inner{justify-content:center}
}