/* =========================================================
   MELTA NORBURY — Homepage
   Brand:  #D96427 (sampled from the Melta logo mark)
   Type:   Archivo (display) + Plus Jakarta Sans (body)
   Layout: one spacing scale, one section rhythm, applied
           to every section without exception.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand */
  --brand:      #D96427;
  --brand-600:  #BC4F18;
  --brand-300:  #F0904F;
  --brand-tint: #FBE8DC;

  /* Delivery partners */
  --uber:     #06C167;
  --deliveroo:#00CCBC;
  --justeat:  #FF8000;

  /* Neutrals — warm, never grey.
     The page runs dark throughout, alternating two surfaces so sections still
     read as separate: near-black (--ink) and graphite (--graphite). */
  --ink:        #0B0A09;   /* surface A — hero, bestsellers, reviews, footer */
  --graphite:   #262320;   /* surface B — menu, story, visit */
  --ink-2:      #141110;   /* card on surface A */
  --ink-3:      #1F1A16;   /* card hover on surface A */
  --graphite-2: #322E29;   /* card on surface B */
  --cream:      #FFF3D7;

  /* Text now sits on dark everywhere, so --text IS the light tone.
     --text-invert is kept as an alias so dark-specific rules still read right. */
  --text:            #FFF6E9;
  --text-soft:       rgba(255, 246, 233, .64);
  --text-invert:     #FFF6E9;
  --text-invert-soft: rgba(255, 246, 233, .64);

  /* Ink-on-light, used only inside the orange order section */
  --on-brand:      #1A1613;
  --on-brand-soft: rgba(26, 22, 19, .92);

  --line:        rgba(255, 246, 233, .13);
  --line-invert: rgba(255, 246, 233, .13);

  /* Type scale */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t--1: clamp(.8rem, .77rem + .14vw, .88rem);
  --t-0:  clamp(1rem, .97rem + .16vw, 1.06rem);
  --t-1:  clamp(1.12rem, 1.05rem + .35vw, 1.32rem);
  --t-2:  clamp(1.4rem, 1.2rem + .9vw, 1.95rem);
  --t-3:  clamp(2rem, 1.55rem + 2vw, 3.35rem);
  --t-4:  clamp(2.9rem, 1.9rem + 4.6vw, 6rem);

  /* ---- Spacing scale: every gap on the page comes from here ---- */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* ---- Rhythm: shared by every section, so heights stay in step ---- */
  --section-y:  clamp(4.5rem, 3.4rem + 5.2vw, 8rem);   /* section padding-block */
  --head-mb:    clamp(2.5rem, 2rem + 2.4vw, 4rem);     /* header -> content gap */
  --gap:        clamp(1rem, .85rem + .8vw, 1.5rem);    /* every grid gap */
  --card-pad:   clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  --wrap:       1280px;
  --pad:        clamp(1.15rem, .65rem + 2.1vw, 2.5rem);
  --header-h:   94px;
  --topbar-h:   42px;

  /* Shape */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --shadow:    0 18px 44px -22px rgba(20, 14, 8, .34);
  --shadow-lg: 0 44px 96px -44px rgba(8, 5, 3, .72);

  --ease:     cubic-bezier(.22, .68, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Fine film grain, generated in the stylesheet: no request, no image file,
     and it cannot fail to load. This is the texture that makes a dark page read
     as a food brand — char, kraft paper, crumb — instead of flat web grey. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--graphite);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute; left: 50%; top: 0; z-index: 300;
  transform: translate(-50%, -130%);
  background: var(--brand); color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

/* Every section shares the same vertical rhythm. Default surface is graphite;
   .section--dark drops to near-black. Alternating the two is what keeps a
   fully dark page from flattening into one continuous block. */
/* Every section is a lit surface, not a flat fill. Three layers do it:
   a warm key light whose position moves down the page, its cooler bounce in the
   opposite corner, and a top-lift / bottom-shadow that gives the surface weight
   so each seam reads as the edge of a material rather than a butt-joint between
   two colours. Grain sits over the lot. Flat fill was the whole problem: the
   menu section alone is 1,600px of it. */
.section {
  padding-block: var(--section-y);
  position: relative;
  background-color: var(--graphite);
  color: var(--text);

  --light-x: 12%;
  --light-y: -2%;
  --light-size: 62% 52%;
  --light-tint: rgba(217, 100, 39, .14);
  --bounce-tint: rgba(217, 100, 39, .07);
  --grain-opacity: .055;
  --grain-blend: normal;
}
.section--dark { background-color: var(--ink); color: var(--text-invert); }

.section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(var(--light-size) at var(--light-x) var(--light-y),
                    var(--light-tint), transparent 70%),
    /* The bounce mirrors the key automatically, so moving one moves both. */
    radial-gradient(46% 40% at calc(100% - var(--light-x)) 100%,
                    var(--bounce-tint), transparent 70%),
    linear-gradient(180deg,
      rgba(255, 246, 233, .035) 0%,
      transparent 20%,
      transparent 74%,
      rgba(0, 0, 0, .34) 100%);
}
.section::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}
.section > .wrap { position: relative; z-index: 1; }

/* The light walks down the page rather than sitting in the same corner twice
   running, which is what the two dark sections used to do. */
#menu       { --light-x: 6%;  --light-y: -4%; }
#signatures { --light-x: 90%; --light-y: 0%;  --light-tint: rgba(217, 100, 39, .17); }
#story      { --light-x: 14%; --light-y: 4%;  --light-tint: rgba(217, 100, 39, .16); }
#reviews    { --light-x: 52%; --light-y: -8%; --light-tint: rgba(217, 100, 39, .15); }
#visit      { --light-x: 94%; --light-y: 8%; }

/* ---------- 4. SHARED ELEMENTS ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: var(--s-4);
}
.section--dark .eyebrow { color: var(--brand-300); }
.eyebrow--ink { color: var(--ink); }

.pulse {
  position: relative; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.pulse::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .5;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.7); opacity: .7; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { opacity: 0; }
}

.sec-title { font-size: var(--t-3); }
.sec-title em { font-style: normal; color: var(--brand-300); }
.section--dark .sec-title em { color: var(--brand-300); }

.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: end;
  margin-bottom: var(--head-mb);
}
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 4vw, 5rem); }
}
.sec-head--center {
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
  max-width: 62rem;
  margin-inline: auto;
}
.sec-lede {
  color: var(--text-soft);
  font-size: var(--t-1);
  line-height: 1.6;
  max-width: 48ch;
}
.section--dark .sec-lede { color: var(--text-invert-soft); }
.sec-lede--ink { color: var(--on-brand); }

/* Section-level call to action — same spacing everywhere it appears. */
.sec-cta { display: flex; justify-content: center; margin-top: var(--head-mb); }

.stars { color: #F2A93B; letter-spacing: .1em; font-size: .95rem; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 1.05rem 1.8rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-0);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn > span { position: relative; z-index: 1; }
.btn svg { position: relative; z-index: 1; width: 1.05em; height: 1.05em; fill: currentColor; transition: transform .35s var(--ease); }
/* Sheen that sweeps across on hover. */
.btn::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s var(--ease-out);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--btn-bg) 85%, #000); }
.btn:hover::after { transform: translateX(100%); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(-1px); }

.btn--sm { padding: .78rem 1.3rem; font-size: var(--t--1); }
/* .btn on its own is the primary (brand orange) style; .btn--primary is kept
   on the markup as an explicit label for it. */

/* ---------- 6. SCROLL PROGRESS ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-300));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- 7. TOP BAR ---------- */
.topbar {
  background: var(--ink);
  color: var(--text-invert-soft);
  font-size: .78rem;
  border-bottom: 1px solid var(--line-invert);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-5); flex-wrap: wrap;
  padding-block: var(--s-3);
}
.topbar__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.topbar__item svg { width: 14px; height: 14px; fill: var(--brand-300); flex: none; }
.topbar__tel { transition: color .2s; }
.topbar__tel:hover { color: var(--cream); }

/* Live trading status, same source of truth as the footer badge */
.topbar__status {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #5FD08A 38%, transparent);
  background: rgba(95, 208, 138, .1);
  color: #7EE0A4;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.topbar__status-dot {
  position: relative; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.topbar__status-dot::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid currentColor;
  animation: pulse 2.4s ease-out infinite;
}
.topbar__status.is-closed {
  border-color: color-mix(in srgb, #E2574C 38%, transparent);
  background: rgba(226, 87, 76, .1);
  color: #F08A81;
}
.topbar__status.is-closed .topbar__status-dot::after { animation: none; }

@media (max-width: 860px) { .topbar__item--addr { display: none; } }
@media (max-width: 520px) { .topbar__inner { gap: var(--s-3); } }

/* ---------- 8. HEADER + LOGO ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.header.is-stuck {
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  border-bottom-color: var(--line-invert);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* Logo carries the wordmark itself, so it stands alone — no text beside it. */
.brand { position: relative; display: inline-flex; align-items: center; flex: none; }
.brand__ring {
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(217, 100, 39, .38);
  transition: inset .45s var(--ease), border-color .45s var(--ease), opacity .45s;
}
.brand__logo {
  position: relative;
  width: 78px; height: 78px;
  border-radius: 50%;
  transition: width .35s var(--ease), height .35s var(--ease), transform .5s var(--ease);
}
.header.is-stuck .brand__logo { width: 62px; height: 62px; }
.brand:hover .brand__logo { transform: rotate(-6deg) scale(1.04); }
.brand:hover .brand__ring { inset: -11px; border-color: rgba(240, 144, 79, .7); }
@media (max-width: 620px) {
  .brand__logo, .header.is-stuck .brand__logo { width: 58px; height: 58px; }
}

/* Nav sits in a glass capsule with a pill that slides to whatever you hover. */
.nav {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 246, 233, .045);
  border: 1px solid rgba(255, 246, 233, .09);
  backdrop-filter: blur(12px);
}
.nav__pill {
  position: absolute; top: 5px; bottom: 5px; left: 0;
  width: 0; border-radius: 999px;
  background: rgba(255, 246, 233, .11);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 233, .09);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s var(--ease);
}
.nav a {
  position: relative; z-index: 1;
  padding: .6rem .95rem;
  font-size: .92rem; font-weight: 600;
  color: var(--text-invert-soft);
  border-radius: 999px;
  transition: color .25s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--text-invert); }

.nav__divider, .nav__order { display: none; }

.header__actions { display: flex; align-items: center; gap: var(--s-3); }
.header__cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }

.burger {
  display: none;
  width: 46px; height: 46px;
  border-radius: 13px;
  border: 1px solid var(--line-invert);
  padding: 13px 12px;
  flex-direction: column; justify-content: space-between;
}
.burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--cream);
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6, 5, 4, .62);
  backdrop-filter: blur(4px);
  animation: fade .25s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

@media (max-width: 1040px) {
  .burger { display: flex; }
  .nav {
    position: fixed; z-index: 95;
    inset: calc(var(--header-h) + 40px) var(--pad) auto var(--pad);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--ink-2);
    border: 1px solid var(--line-invert);
    border-radius: var(--r-lg);
    padding: var(--s-3);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden;
    transform: translateY(-14px) scale(.98);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__pill { display: none; }
  .nav a { padding: .9rem 1rem; font-size: 1.05rem; border-radius: var(--r-sm); }
  .nav a:hover { background: rgba(255,255,255,.05); }
  .nav__divider { display: block; height: 1px; background: var(--line-invert); margin: var(--s-2) 0; }
  .nav__order {
    display: block; text-align: center;
    padding: .95rem 1rem; border-radius: var(--r-sm);
    background: var(--brand); color: #fff;
    font-family: var(--font-display); font-weight: 700;
  }
}
@media (max-width: 620px) { .header__actions .btn { display: none; } }

/* ---------- 9. HERO ---------- */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  min-height: clamp(620px, calc(100svh - var(--header-h) - var(--topbar-h)), 900px);
  background: var(--ink);
  color: var(--text-invert);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 48%;
  filter: contrast(1.12) saturate(1.18) brightness(.95);
  transform: scale(1.06) translate(var(--px, 0px), var(--py, 0px));
  animation: kenburns 26s ease-in-out infinite alternate;
  transition: transform .9s var(--ease-out);
}
@keyframes kenburns { from { scale: 1; } to { scale: 1.09; } }

.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(11,10,9,.97) 0%, rgba(11,10,9,.9) 34%, rgba(11,10,9,.6) 58%, rgba(11,10,9,.3) 100%),
    linear-gradient(to top, var(--ink) 2%, rgba(11,10,9,.1) 40%),
    radial-gradient(60% 50% at 50% 50%, transparent 40%, rgba(11,10,9,.45) 100%),
    radial-gradient(46% 42% at 82% 30%, rgba(217,100,39,.2), transparent 70%);
}
/* The hero shipped with grain from the start; --grain is that same idea pulled
   out to one definition so every surface on the page shares it. The shared one
   also stitches its tiles, which drops the seams the local copy had. */
.hero__grain {
  position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: var(--grain);
}

.hero__inner {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--s-7);
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(4rem, 3rem + 3vw, 5.5rem);
}
@media (min-width: 1080px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) auto; gap: var(--s-8); }
}
.hero__copy { max-width: 43rem; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .5rem 1rem .5rem .8rem;
  border: 1px solid var(--line-invert);
  border-radius: 999px;
  background: rgba(255, 246, 233, .05);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: var(--t--1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: var(--s-5);
}

.hero__title {
  font-size: var(--t-4);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .94;
  margin-bottom: var(--s-5);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ln__i {
  display: block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--ln) * .13s + .2s);
}
.is-ready .ln__i { transform: none; }
.hero__title em { font-style: normal; color: var(--brand); }

.hero__lede {
  font-size: var(--t-1);
  color: var(--text-invert-soft);
  max-width: 46ch;
  margin-bottom: var(--s-6);
}

.hero__order-label {
  font-family: var(--font-display);
  font-size: var(--t--1); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-invert-soft);
  margin-bottom: var(--s-3);
}
.hero__pills { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }

.pill {
  --pf: var(--brand);
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: .95rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--line-invert);
  background: rgba(255, 246, 233, .06);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-0);
  line-height: 1;
  color: var(--text-invert);
  overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), border-color .35s var(--ease), color .3s var(--ease);
}
.pill--uber      { --pf: var(--uber); }
.pill--deliveroo { --pf: var(--deliveroo); }
.pill--justeat   { --pf: var(--justeat); }
.pill__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pf);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf) 22%, transparent);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.pill__go { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .55; transition: transform .35s var(--ease), opacity .3s; }
.pill::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--pf);
  transform: translateY(101%);
  transition: transform .42s var(--ease-out);
}
.pill:hover, .pill:focus-visible { transform: translateY(-3px); border-color: var(--pf); color: #08110C; }
.pill:hover::before, .pill:focus-visible::before { transform: none; }
.pill:hover .pill__dot { background: #08110C; box-shadow: 0 0 0 4px rgba(8,17,12,.18); }
.pill:hover .pill__go { opacity: 1; transform: translate(2px, -2px); }

.hero__alt { font-size: var(--t--1); color: var(--text-invert-soft); }
.hero__alt a { color: var(--text-invert); border-bottom: 1px solid rgba(255,246,233,.3); transition: color .2s, border-color .2s; }
.hero__alt a:hover { color: var(--brand-300); border-color: var(--brand-300); }
.hero__alt span { margin-inline: var(--s-2); opacity: .4; }

/* ---- Right rail: one panel, one alignment ----
   The stats previously sat in three separately-offset cards, which read as a
   broken grid rather than a composition. They are now rows inside a single
   panel sharing one left edge and one right edge, with the seal anchored to
   the panel's corner instead of floating free above it. */
.hero__rail { display: flex; justify-content: flex-end; }

.trustwrap { position: relative; width: min(340px, 100%); }

.trustcard {
  width: 100%;
  padding: var(--s-5);
  border-radius: 24px;
  background: rgba(11, 10, 9, .64);
  border: 1px solid rgba(255, 246, 233, .14);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.trustcard:hover {
  border-color: rgba(255, 246, 233, .24);
  transform: translateY(-4px);
}

.trustcard__head {
  display: flex; align-items: center;
  gap: var(--s-2);
  padding-right: 62px;          /* keeps the glyph clear of the seal */
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(255, 246, 233, .12);
  font-size: .78rem; font-weight: 600;
  color: var(--text-invert-soft);
  white-space: nowrap;
}
.trustcard__head .stars { font-size: .82rem; letter-spacing: .06em; }

.trustcard__rows > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid rgba(255, 246, 233, .09);
}
.trustcard__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.trustcard__rows dt {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.45rem);
  letter-spacing: -.045em; line-height: 1;
  color: var(--text-invert);
  font-variant-numeric: tabular-nums;
}
.trustcard__rows dd {
  margin: 0; text-align: right;
  font-size: .71rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-invert-soft);
}

/* Seal reads as a stamp pressed onto the panel's corner. */
.seal {
  position: absolute; z-index: 2;
  top: -36px; right: -20px;
  width: 100px; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 243, 215, .3);
  background: rgba(11, 10, 9, .82);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .95);
  transform: rotate(-8deg);
}
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 30s linear infinite; }
.seal__ring text {
  font-family: var(--font-display);
  font-size: 7.4px; font-weight: 700;
  letter-spacing: .12em;
  fill: rgba(255, 243, 215, .82);
  text-transform: uppercase;
}
@keyframes spin { to { transform: rotate(360deg); } }
.seal__core {
  width: 66%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  display: grid; place-items: center; align-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 243, 215, .34);
}
/* Ink on the orange core clears 4.5:1 at every size; white does not. */
.seal__pct {
  font-family: var(--font-display);
  font-weight: 900; font-size: .95rem;
  line-height: 1; letter-spacing: -.03em;
  color: var(--on-brand);
}
.seal__word {
  font-size: .54rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-brand);
  margin-top: 2px;
}

@media (max-width: 1079px) {
  .hero__rail { justify-content: flex-start; }
  .trustwrap { width: min(400px, 100%); }
  .seal { top: -32px; right: -14px; width: 88px; }
}
@media (max-width: 520px) {
  .trustwrap { width: 100%; }
  .trustcard { padding: var(--s-4); }
  .seal { width: 74px; top: -26px; right: 0; }
  .trustcard__head { font-size: .72rem; gap: 6px; padding-right: 52px; }
  .trustcard__rows dt { font-size: 1.7rem; }
}

/* Scroll cue */
.hero__scroll {
  position: absolute; z-index: 3;
  left: 50%; bottom: var(--s-5);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: .67rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-invert-soft);
  transition: color .25s;
}
.hero__scroll:hover { color: var(--text-invert); }
.hero__scroll-mouse {
  position: relative; flex: none;
  width: 21px; height: 33px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 246, 233, .34);
}
.hero__scroll-mouse span {
  position: absolute; left: 50%; top: 6px;
  width: 3px; height: 6px; border-radius: 2px;
  background: var(--brand-300);
  transform: translateX(-50%);
  animation: wheel 1.9s ease-in-out infinite;
}
@keyframes wheel {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 13px); }
}

@media (max-width: 720px) {
  .hero__inner { padding-block: var(--s-6) clamp(3.5rem, 3rem + 2vw, 4.5rem); }
  .hero__pills { gap: var(--s-2); }
  .pill { padding: .85rem 1.1rem; font-size: .92rem; }
  .hero__scroll span:last-child { display: none; }
}

/* ---------- 10. TICKER ---------- */
.ticker {
  position: relative;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 190%);
  color: #fff;
  padding-block: var(--s-4);
  overflow: hidden;
}
.ticker::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain);
  opacity: .22;
  mix-blend-mode: soft-light;
}
.ticker__track {
  display: flex; align-items: center; gap: var(--s-6);
  width: max-content;
  animation: marquee 42s linear infinite;
}
.ticker__track span {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(.95rem, 2vw, 1.3rem);
  text-transform: uppercase; white-space: nowrap;
}
.ticker__track i { font-style: normal; opacity: .5; font-size: .6rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ---------- 11. MENU BOARD ---------- */
/* The menu is an index, not a wall of tiles: name, items and price are readable
   without hovering, and a single sticky panel carries the appetite shot so ten
   photo crops of uneven quality never compete at full size.
   Hover, keyboard focus and the JS-set .is-active state all resolve to one
   switch, --on (0 or 1), that every visual state below is derived from, so each
   state is written once instead of three times.
   Registering --on is what makes it animatable, so the switch itself carries the
   timing and every value derived from it moves in step. That is why nothing
   below declares a transition of its own — they all ride this one. Where
   @property is unsupported the switch snaps instead of easing, which costs the
   animation but never the state. */
@property --on {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.board {
  display: grid;
  gap: clamp(2rem, 3.5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1000px) {
  .board { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
}

/* --- The index --- */
.board__caption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-soft);
}
.board__caption-note { color: var(--brand-300); }

.mrow {
  --on: 0;
  transition: --on .5s var(--ease);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .mrow { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--s-5); }
}
.mrow:hover, .mrow:focus-visible { --on: 1; }
/* .is-active mirrors whichever row the preview panel is showing, so it only
   means anything at the width where that panel exists. */
@media (min-width: 1000px) { .mrow.is-active { --on: 1; } }

.mrow > * { position: relative; z-index: 1; }

/* Warm wash that fades in from the left edge of the live row. */
.mrow::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%);
  opacity: var(--on);
}
/* Brand rule that wipes down that same edge. */
.mrow::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  width: 2px;
  background: var(--brand);
  transform: scaleY(var(--on)); transform-origin: 50% 0;
}

.mrow__no {
  display: none;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 800;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--brand-300) calc(var(--on) * 100%), var(--text-soft));
}
@media (min-width: 720px) { .mrow__no { display: block; } }

.mrow__thumb {
  position: relative;
  display: block;
  width: clamp(64px, 17vw, 76px);
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--graphite-2);
}
.mrow__thumb::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 233, .16);
}
.mrow__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1 + .08 * var(--on)));
}

.mrow__text { display: block; min-width: 0; }
.mrow__head { display: flex; align-items: baseline; gap: var(--s-3); }
.mrow__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.04rem, .94rem + .5vw, 1.34rem);
  letter-spacing: -.03em;
  line-height: 1.15;
}
/* The dotted leader is the detail that makes this read as a menu, not a list. */
.mrow__lead {
  display: none;
  flex: 1;
  align-self: flex-end;
  height: 2px;
  margin-bottom: .3rem;
  background-image: radial-gradient(circle, rgba(255, 246, 233, .3) 1px, transparent 1.3px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
}
@media (min-width: 720px) { .mrow__lead { display: block; } }

.mrow__price {
  margin-left: auto;              /* holds the right edge once the leader hides */
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  font-variant-numeric: tabular-nums;
  color: var(--brand-300);
  white-space: nowrap;
}
.mrow__desc {
  display: block;
  margin-top: .3rem;
  font-size: .875rem; line-height: 1.5;
  color: var(--text-soft);
  max-width: 48ch;
}

.mrow__go {
  display: none;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand) calc(var(--on) * 100%), var(--line));
  background: color-mix(in srgb, var(--brand) calc(var(--on) * 100%), transparent);
  color: color-mix(in srgb, #fff calc(var(--on) * 100%), var(--text-soft));
  opacity: var(--on);
  transform: translateX(calc(-8px * (1 - var(--on))));
}
@media (min-width: 720px) { .mrow__go { display: grid; } }
.mrow__go svg { width: 15px; height: 15px; fill: currentColor; }

/* --- The preview panel --- */
/* Hidden below 1000px: the rows already carry a photo, a name, the items and a
   price, and a phone is better served by a list it can scan in two thumbs. */
.board__panel {
  display: none;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 1000px) {
  .board__panel {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
  }
}

/* Square, because that is what most of the source photography already is:
   four of the ten files are exactly 1:1, and a taller frame would crop the
   16:9 ones (beef, wings, drinks) by more than half their width. */
.panel__stack { position: relative; aspect-ratio: 1; background: var(--ink-2); }
.panel__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .55s var(--ease), transform 1.2s var(--ease-out);
}
.panel__shot.is-on { opacity: 1; transform: none; }
.panel__stack::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--ink) 1%, rgba(11, 10, 9, .18) 32%, transparent 60%);
}
.panel__count {
  position: absolute; z-index: 2; top: var(--s-4); left: var(--s-4);
  padding: .36rem .74rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 246, 233, .2);
  background: rgba(11, 10, 9, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--text-invert-soft);
}
.panel__count b { color: var(--cream); font-weight: 800; }

.panel__foot {
  position: relative; z-index: 2;
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--ink);
}
.panel__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.panel__name { font-size: var(--t-2); }
.panel__price {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.05rem;
  color: var(--brand-300); white-space: nowrap;
}
.panel__note { font-size: .86rem; line-height: 1.55; color: var(--text-invert-soft); }
.panel__cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--s-2);
  padding: .95rem 1.2rem;
  font-size: var(--t--1);
}
.panel__cta-label { overflow: hidden; text-overflow: ellipsis; }

/* ---------- 12. DISHES ---------- */
.dishes { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .dishes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dishes { grid-template-columns: repeat(3, 1fr); } }

.dish {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-invert);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.dish:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  background: var(--ink-3);
}
.dish__img { overflow: hidden; }
.dish__img img {
  width: 100%; aspect-ratio: 16 / 11; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.dish:hover .dish__img img { transform: scale(1.07); }
.dish__body {
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--s-2);
  flex: 1;
}
.dish__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.dish__row h3 { font-size: 1.16rem; }
.dish__price {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.1rem;
  color: var(--brand-300); white-space: nowrap;
}
.dish__body p { font-size: .92rem; line-height: 1.55; color: var(--text-invert-soft); flex: 1; }
.tag {
  align-self: flex-start;
  padding: .32rem .72rem;
  border-radius: 999px;
  border: 1px solid var(--line-invert);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-invert-soft);
}
.tag--hot { border-color: color-mix(in srgb, var(--brand) 60%, transparent); color: var(--brand-300); }

/* ---------- 13. STORY ---------- */
/* Composed and image-led, the way the section always wanted to be. The earlier
   attempt here stacked four bands of type and read sparse rather than premium:
   for a food brand the photography has to carry it, and the craft goes into
   depth, warmth and the quality of each detail instead of into white space. */
.story { overflow: hidden; }

.story__grid { display: grid; gap: clamp(2.75rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 980px) { .story__grid { grid-template-columns: 1.05fr 1fr; } }

/* --- Media: two frames and a seal, layered for depth --- */
.story__stack { position: relative; padding-bottom: clamp(2.25rem, 5.5vw, 4rem); }

.story__shot {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  /* Warm bloom under the frame so a light photograph settles into a dark page
     rather than floating on it as a bright rectangle. */
  box-shadow: 0 60px 110px -62px rgba(217, 100, 39, .55), var(--shadow-lg);
}
.story__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

/* Bordered in the section's own colour, which reads as a cut-out rather than a
   second picture pasted on top. */
.story__shot--float {
  position: absolute; right: -3%; bottom: 0;
  width: 40%;
  border: 7px solid var(--graphite);
  border-radius: var(--r-lg);
  box-shadow: 0 34px 62px -30px rgba(8, 5, 3, .9);
  transition: transform .55s var(--ease);
}
.story__shot--float img { aspect-ratio: 1; }

.story__stack:hover .story__shot:not(.story__shot--float) img { transform: scale(1.045); }
.story__stack:hover .story__shot--float { transform: translateY(-9px); }

.story__seal {
  position: absolute; z-index: 2;
  left: clamp(.85rem, 3.5%, 1.6rem);
  top: clamp(.85rem, 3.5%, 1.6rem);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r);
  background: rgba(11, 10, 9, .5);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 246, 233, .24);
  box-shadow: 0 22px 44px -24px rgba(8, 5, 3, .95);
  color: var(--text-invert);
}
.story__seal-mark {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--brand);
  box-shadow: 0 8px 18px -8px rgba(217, 100, 39, .95);
}
.story__seal-mark svg { width: 18px; height: 18px; fill: #fff; }
.story__seal-text { display: flex; flex-direction: column; line-height: 1.22; }
.story__seal-text strong {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1rem; letter-spacing: -.02em;
}
.story__seal-text span { font-size: .72rem; color: var(--text-invert-soft); }

/* --- Copy --- */
.story__copy .sec-title { margin-bottom: var(--s-5); }
/* :not(.eyebrow) matters — the eyebrow is a <p> too, and the older rule here
   was quietly overriding its brand colour and clamping its width. */
.story__copy > p:not(.eyebrow) { color: var(--text-soft); margin-bottom: var(--s-4); max-width: 52ch; }

.story__proof {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.story__proof li {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.story__proof-ico {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
}
.story__proof-ico svg { width: 16px; height: 16px; fill: var(--brand-300); }
.story__proof-txt { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.story__proof-txt strong { font-weight: 700; font-size: 1rem; }
.story__proof-txt > span { font-size: .9rem; line-height: 1.5; color: var(--text-soft); }

@media (max-width: 560px) {
  .story__shot--float { right: 0; width: 46%; border-width: 5px; }
  .story__seal { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
  .story__seal-mark { width: 28px; height: 28px; border-radius: 9px; }
  .story__seal-mark svg { width: 15px; height: 15px; }
}

/* ---------- 14. REVIEWS ---------- */
.reviews-sec { overflow: hidden; }

/* Summary panel */
.rscore {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--s-5) var(--s-6);
  width: fit-content; max-width: 100%;
  margin: 0 auto var(--head-mb);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 246, 233, .075), rgba(255, 246, 233, .02));
  border: 1px solid var(--line-invert);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.rscore__num { display: flex; align-items: baseline; gap: .25rem; }
.rscore__num strong {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2.2vw, 3.7rem);
  font-weight: 900; letter-spacing: -.05em; line-height: 1;
  color: var(--brand-300);
  font-variant-numeric: tabular-nums;
}
.rscore__of { font-size: 1rem; font-weight: 600; color: var(--text-invert-soft); }
.rscore__mid { text-align: left; }
.rscore__mid p { font-size: .92rem; color: var(--text-invert-soft); margin-top: .3rem; }
.rscore__mid p strong { color: var(--text-invert); font-variant-numeric: tabular-nums; }
.stars--lg { font-size: 1.2rem; letter-spacing: .14em; }

.rscore__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .78rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line-invert);
  background: rgba(255, 246, 233, .04);
  font-family: var(--font-display);
  font-weight: 700; font-size: .9rem;
  color: var(--text-invert);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.rscore__link:hover {
  background: rgba(255, 246, 233, .1);
  border-color: rgba(255, 246, 233, .28);
  transform: translateY(-2px);
}
.gicon { width: 17px; height: 17px; flex: none; }
.rscore__go {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  transition: transform .3s var(--ease);
}
.rscore__link:hover .rscore__go { transform: translate(3px, -3px); }

/* Marquee — two rows, opposite directions, paused on hover.
   Edges fade out so cards enter and leave rather than being cut off. */
.revmarquee {
  position: relative; z-index: 1;
  display: grid; gap: var(--gap);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.revmarquee__row {
  display: flex; gap: var(--gap);
  width: max-content;
  animation: marquee 72s linear infinite;
}
.revmarquee__row--rev { animation-direction: reverse; }
.revmarquee:hover .revmarquee__row,
.revmarquee:focus-within .revmarquee__row { animation-play-state: paused; }

.rcard {
  flex: none;
  width: clamp(290px, 25vw, 375px);
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--card-pad);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 246, 233, .07), rgba(255, 246, 233, .025));
  border: 1px solid var(--line-invert);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.rcard:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 46%, transparent);
  background: linear-gradient(165deg, rgba(255, 246, 233, .1), rgba(255, 246, 233, .04));
}
.rcard__head { display: flex; align-items: center; gap: var(--s-3); }

/* Initials, not stock portraits — we have names from Google, not photos. */
.rcard__avatar {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--av, var(--brand)) 88%, #000);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800; font-size: .92rem; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.rcard__who { display: flex; flex-direction: column; min-width: 0; }
.rcard__who strong {
  font-size: .95rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rcard__src {
  display: inline-flex; align-items: center;
  font-size: .72rem; letter-spacing: .04em;
  color: var(--text-invert-soft);
}
.rcard__src::before {
  content: '✓';
  color: #7EE0A4;
  font-weight: 800;
  margin-right: .3rem;
}
.rcard blockquote { font-size: .94rem; line-height: 1.62; color: var(--text-invert); }
.rcard blockquote::before { content: '“'; }
.rcard blockquote::after  { content: '”'; }

@media (max-width: 620px) {
  .rscore { gap: var(--s-4); padding: var(--s-5) var(--s-4); text-align: center; }
  .rscore__mid { text-align: center; }
  .rscore__link { width: 100%; justify-content: center; }
}

/* ---------- 15. ORDER / PARTNERS ---------- */
/* The one bright section on a dark page, so it carries the page's only real
   colour field. Flat brand orange read cheap at full-viewport size; a warm
   sweep plus a fine grain gives it depth without touching the brand hue. */
.order {
  background: linear-gradient(158deg, var(--brand-300) 0%, var(--brand) 36%, var(--brand-600) 100%);
  color: var(--ink);
  overflow: hidden;
  --grain-opacity: .24;
  --grain-blend: soft-light;
}
/* Its own light, because cream reads on orange where brand orange would not.
   The grain comes from .section::after like every other surface — only the
   blend changes, since normal-blended noise would haze a field this bright. */
.order::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 55% at 78% 10%, rgba(255, 243, 215, .34), transparent 64%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .07) 0%,
      transparent 18%,
      transparent 74%,
      rgba(74, 26, 4, .26) 100%);
}
.order .sec-title { color: var(--ink); }
.order .sec-title em { color: var(--cream); }

.order__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }

/* Live trading status, third badge driven by the same .js-status calculation as
   the top bar and the footer. Dark pill, because nothing else reads cleanly on
   a field this bright. */
.order__status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .95rem;
  border-radius: 999px;
  background: var(--ink);
  color: #7EE0A4;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 14px 28px -16px rgba(8,5,3,.85);
}
.order__status-dot {
  position: relative; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.order__status-dot::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid currentColor;
  animation: pulse 2.4s ease-out infinite;
}
.order__status.is-closed { color: #F2A96A; }
.order__status.is-closed .order__status-dot::after { animation: none; }

/* --- The pass --- */
/* One object rather than three cards: three segments split by hairlines, with
   the collection line closing it off along the bottom. */
.pass {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 44px 90px -50px rgba(8, 5, 3, .95);
  transition: box-shadow .55s var(--ease);
}
@media (min-width: 820px) { .pass { grid-template-columns: repeat(3, 1fr); } }

.pass__seg {
  --pf: var(--brand);
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  gap: var(--s-2);
  padding: clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem);
  color: var(--text-invert);
  border-top: 1px solid var(--line);
}
.pass__seg:first-child { border-top: 0; }
/* Stacked, the segments are sized by their content — a fixed height would turn
   three short links into two thumb-scrolls of empty slab. */
@media (min-width: 820px) {
  .pass__seg {
    min-height: clamp(200px, 20vw, 250px);
    border-top: 0; border-left: 1px solid var(--line);
  }
  .pass__seg:first-child { border-left: 0; }
}
/* Between a large phone and the three-column switch there is width to spare, so
   the call to action moves out beside the name instead of under it. */
@media (min-width: 560px) and (max-width: 819.98px) {
  .pass__seg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-5);
  }
  .pass__name { grid-area: 1 / 1; }
  .pass__meta { grid-area: 2 / 1; }
  .pass__go   { grid-area: 1 / 2 / 3 / 3; margin-top: 0; }
}
.pass__seg--uber      { --pf: var(--uber); }
.pass__seg--deliveroo { --pf: var(--deliveroo); }
.pass__seg--justeat   { --pf: var(--justeat); }

/* The signature move: the partner's own colour floods the segment from the
   bottom and the type inverts to ink. All three brand colours are bright
   enough to carry near-black text at better than 8:1. */
.pass__seg::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--pf);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .55s var(--ease-out);
}
.pass__seg:hover::before,
.pass__seg:focus-visible::before { transform: scaleY(1); }
/* Focus also floods, so the ring is drawn inside, in ink: the page's orange
   ring would sit at barely 2:1 against Just Eat's orange. */
.pass__seg:focus-visible { outline: 3px solid var(--ink); outline-offset: -7px; }

/* Resting colour cue, swallowed by the flood it sits under. */
.pass__seg::after {
  content: '';
  position: absolute; inset: auto 0 0 0; z-index: -1;
  height: 3px;
  background: var(--pf);
  transition: opacity .3s var(--ease);
}
.pass__seg:hover::after,
.pass__seg:focus-visible::after { opacity: 0; }

.pass__name {
  font-family: var(--font-display);
  font-size: var(--t-2); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--pf);
  transition: color .35s var(--ease);
}
.pass__meta {
  font-size: .92rem; line-height: 1.5;
  color: var(--text-invert-soft);
  flex: 1;
  transition: color .35s var(--ease);
}
.pass__go {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-5);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  transition: color .35s var(--ease);
}
.pass__go svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  transition: transform .35s var(--ease);
}
.pass__seg:hover .pass__name,
.pass__seg:focus-visible .pass__name,
.pass__seg:hover .pass__go,
.pass__seg:focus-visible .pass__go { color: var(--ink); }
.pass__seg:hover .pass__meta,
.pass__seg:focus-visible .pass__meta { color: rgba(11, 10, 9, .76); }
.pass__seg:hover .pass__go svg,
.pass__seg:focus-visible .pass__go svg { transform: translate(3px, -3px); }

/* The whole slab picks up the glow of whichever partner is about to be chosen.
   Purely additive — without :has() support the shadow simply stays neutral. */
.pass:has(.pass__seg--uber:hover)      { box-shadow: 0 46px 90px -46px color-mix(in srgb, var(--uber) 62%, transparent); }
.pass:has(.pass__seg--deliveroo:hover) { box-shadow: 0 46px 90px -46px color-mix(in srgb, var(--deliveroo) 62%, transparent); }
.pass:has(.pass__seg--justeat:hover)   { box-shadow: 0 46px 90px -46px color-mix(in srgb, var(--justeat) 62%, transparent); }

.pass__foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--card-pad);
  border-top: 1px solid var(--line);
  background: rgba(255, 246, 233, .035);
  font-size: .9rem;
  color: var(--text-invert-soft);
  text-align: center;
}
.pass__foot svg { width: 17px; height: 17px; fill: var(--brand-300); flex: none; }
.pass__foot a {
  font-weight: 700; color: var(--cream);
  border-bottom: 1px solid rgba(255, 246, 233, .32);
  transition: border-color .25s var(--ease);
}
.pass__foot a:hover { border-color: var(--cream); }

/* ---------- 16. VISIT ---------- */
.visit__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .visit__grid { grid-template-columns: .9fr 1.1fr; } }

.visit__list {
  display: grid; gap: var(--s-5);
  margin-block: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.visit__list dt {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-300);
  margin-bottom: var(--s-2);
}
.visit__list dd { margin: 0; line-height: 1.55; color: var(--text-soft); }
.visit__list dd strong { color: var(--text); }
.visit__list a { color: var(--text); border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.visit__list a:hover { color: var(--brand-300); border-color: var(--brand-300); }

.visit__map {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--ink-2);
}
.visit__map iframe {
  width: 100%; height: clamp(320px, 40vw, 470px); border: 0;
  /* OSM only ships light tiles. invert + 180° hue-rotate flips the lightness
     while keeping hues roughly true, so the map reads dark without a paid
     dark-tile provider — and the marker stays recognisably green. */
  filter: invert(0.92) hue-rotate(180deg) saturate(.85) brightness(.95) contrast(.92);
}

/* ---------- 17. FOOTER ---------- */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--text-invert-soft);
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% 0%, rgba(217, 100, 39, .16), transparent 68%),
    linear-gradient(180deg, rgba(255, 246, 233, .035) 0%, transparent 18%);
}
.footer::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain);
  opacity: .055;
}
.footer > * { position: relative; z-index: 1; }

/* --- Closing call to action --- */
.footer__cta {
  border-bottom: 1px solid var(--line-invert);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.footer__cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-6);
}
.footer__cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.4rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1;
  color: var(--text-invert);
}
.footer__cta-title em { font-style: normal; color: var(--brand-300); }
.footer__cta-actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.footer__cta-call {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-0);
  color: var(--text-invert);
  transition: color .25s var(--ease);
}
.footer__cta-call svg { width: 17px; height: 17px; fill: var(--brand-300); }
.footer__cta-call span { border-bottom: 1px solid var(--line-invert); padding-bottom: 2px; transition: border-color .25s; }
.footer__cta-call:hover { color: var(--brand-300); }
.footer__cta-call:hover span { border-color: var(--brand-300); }

/* --- Columns --- */
.footer__body { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.footer__grid {
  display: grid; gap: var(--s-7) var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.footer__brand { max-width: 34ch; }
.brand--footer { display: inline-flex; margin-bottom: var(--s-4); }
.brand--footer .brand__logo { width: 84px; height: 84px; }
.footer__blurb { font-size: .93rem; line-height: 1.65; margin-bottom: var(--s-5); }

/* Social buttons carry their label — reads as a brand row, not stray icons. */
.socials { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.socials a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .5rem .95rem .5rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line-invert);
  font-size: .82rem; font-weight: 600;
  color: var(--text-invert-soft);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease);
}
.socials svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.socials a:hover {
  background: var(--brand); border-color: var(--brand);
  color: #fff; transform: translateY(-3px);
}

.footer__head {
  font-family: var(--font-display);
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-invert); font-weight: 800;
  margin-bottom: var(--s-4);
}
.footer__col ul { display: grid; gap: var(--s-2); }
.footer__col ul a {
  display: inline-block;
  font-size: .93rem;
  color: var(--text-invert-soft);
  transition: color .25s var(--ease);
}
/* Underline grows from the left rather than the link sliding about. */
.footer__col ul a span {
  position: relative;
  background-image: linear-gradient(var(--brand-300), var(--brand-300));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease);
}
.footer__col ul a:hover { color: var(--text-invert); }
.footer__col ul a:hover span { background-size: 100% 1px; }

/* Partner links keep their own brand colour */
.footer__partners { gap: var(--s-3) !important; }
.footer__partner { --pf: var(--brand-300); display: inline-flex !important; align-items: center; gap: var(--s-3); }
.footer__partner--uber      { --pf: var(--uber); }
.footer__partner--deliveroo { --pf: var(--deliveroo); }
.footer__partner--justeat   { --pf: var(--justeat); }
.footer__partner--call      { --pf: var(--brand-300); }
.footer__partner-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pf); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf) 40%, transparent);
  transition: box-shadow .35s var(--ease);
}
.footer__partner:hover .footer__partner-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pf) 22%, transparent); }
.footer__partner span:last-child { background-image: linear-gradient(var(--pf), var(--pf)) !important; }

/* Live open / closed indicator */
.footer__status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #5FD08A 40%, transparent);
  background: rgba(95, 208, 138, .1);
  color: #7EE0A4;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: var(--s-4);
}
.footer__status-dot {
  position: relative; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.footer__status-dot::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid currentColor;
  animation: pulse 2.4s ease-out infinite;
}
.footer__status.is-closed {
  border-color: color-mix(in srgb, #E2574C 40%, transparent);
  background: rgba(226, 87, 76, .1);
  color: #F08A81;
}
.footer__status.is-closed .footer__status-dot::after { animation: none; }

.footer__address {
  font-style: normal;
  font-size: .93rem; line-height: 1.65;
  margin-bottom: var(--s-4);
}
.footer__hours { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.footer__hours > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--line-invert);
  font-size: .88rem;
}
.footer__hours dt { color: var(--text-invert-soft); }
.footer__hours dd { margin: 0; color: var(--text-invert); font-weight: 600; font-variant-numeric: tabular-nums; }

.footer__maplink {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  color: var(--brand-300);
  transition: gap .3s var(--ease);
}
.footer__maplink svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  transition: transform .3s var(--ease);
}
.footer__maplink:hover svg { transform: translate(3px, -3px); }

/* --- Oversized wordmark --- */
.footer__mark {
  overflow: hidden;
  line-height: .74;
  padding-inline: var(--pad);
  user-select: none;
  pointer-events: none;
}
.footer__mark span {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 20.5vw, 17rem);
  letter-spacing: -.055em;
  /* Fades out downward so it reads as a watermark, not a headline. */
  background: linear-gradient(180deg,
    rgba(255, 246, 233, .15) 0%,
    rgba(255, 246, 233, .05) 55%,
    rgba(255, 246, 233, 0) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: -.16em;
}

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  padding-block: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line-invert);
  font-size: .84rem;
}
.footer__legal { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.footer__legal a { transition: color .2s; }
.footer__legal a:hover { color: var(--brand-300); }
.footer__legal span { opacity: .4; }

@media (max-width: 620px) {
  .footer__cta-inner { gap: var(--s-5); }
  .footer__cta-actions { width: 100%; }
  .footer__cta-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- 18. ORDER SHEET ---------- */
.sheet { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--pad); }
.sheet[hidden] { display: none; }
.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 5, 4, .72);
  backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.sheet__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100dvh - 2 * var(--pad));
  overflow-y: auto;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  background: var(--ink-2);
  border: 1px solid var(--line-invert);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  color: var(--text-invert);
  opacity: 0;
  transform: translateY(22px) scale(.97);
  transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { opacity: 1; transform: none; }

.sheet__close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-invert);
  transition: background .25s, transform .25s var(--ease);
}
.sheet__close svg { width: 16px; height: 16px; fill: var(--text-invert); }
.sheet__close:hover { background: rgba(255,255,255,.08); transform: rotate(90deg); }

.sheet .eyebrow { color: var(--brand-300); }
.sheet__title { font-size: var(--t-2); margin-bottom: var(--s-3); }
.sheet__title em { font-style: normal; color: var(--brand-300); }
.sheet__lede { font-size: .95rem; color: var(--text-invert-soft); margin-bottom: var(--s-5); }

.sheet__list { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.sheet__item {
  --pf: var(--brand);
  position: relative;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  padding-left: var(--s-5);
  border: 1px solid var(--line-invert);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.sheet__item--uber      { --pf: var(--uber); }
.sheet__item--deliveroo { --pf: var(--deliveroo); }
.sheet__item--justeat   { --pf: var(--justeat); }
.sheet__bar { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pf); transition: width .3s var(--ease-out); }
.sheet__text { display: flex; flex-direction: column; flex: 1; }
.sheet__text strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--pf); }
.sheet__text span { font-size: .84rem; color: var(--text-invert-soft); }
.sheet__item > svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  color: var(--text-invert-soft);
  transition: transform .3s var(--ease), color .3s;
}
.sheet__item:hover {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--pf) 50%, transparent);
  background: rgba(255,255,255,.03);
}
.sheet__item:hover .sheet__bar { width: 7px; }
.sheet__item:hover > svg { transform: translate(3px, -3px); color: var(--pf); }

.sheet__call {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-invert);
  font-size: .88rem; color: var(--text-invert-soft);
  transition: color .2s;
}
.sheet__call svg { width: 15px; height: 15px; fill: currentColor; }
.sheet__call:hover { color: var(--brand-300); }

/* ---------- 19. FLOATING ORDER BUTTON ---------- */
.fab {
  position: fixed; z-index: 80;
  right: var(--s-4); bottom: var(--s-4);
  display: none; align-items: center; gap: var(--s-2);
  padding: 1rem 1.4rem;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem;
  box-shadow: 0 16px 32px -12px rgba(217,100,39,.9);
  transform: translateY(160%);
  transition: transform .45s var(--ease-out);
}
.fab svg { width: 18px; height: 18px; fill: currentColor; }
.fab.is-shown { transform: none; }
@media (max-width: 620px) { .fab { display: inline-flex; } }

/* ---------- 20. MOTION SYSTEM ---------- */
/* One class drives every entrance; data-anim picks the flavour,
   data-delay (via --d) staggers it. */
.anim {
  opacity: 0;
  transition:
    opacity .8s var(--ease-out),
    transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 85ms);
  will-change: opacity, transform;
}
.anim[data-anim="up"]   { transform: translateY(22px); }
.anim[data-anim="rise"] { transform: translateY(38px) scale(.98); }
.anim[data-anim="pop"]  { transform: scale(.86); }
.anim[data-anim="left"] { transform: translateX(38px); }
.anim[data-anim="clip"] { transform: translateY(26px); }

/* No clip-path anywhere in the motion system. It clipped children positioned
   outside their box (the hero seal) and its transition proved unreliable. The
   "clip" variant now reveals by scaling its image inside an overflow-hidden
   frame, which reads identically and cannot clip a sibling. */
.anim.is-in { opacity: 1; transform: none; }

/* Images inside a clip reveal drift back to scale 1. */
.anim[data-anim="clip"] img { transform: scale(1.12); transition: transform 1.2s var(--ease-out); }
.anim[data-anim="clip"].is-in img { transform: none; }

/* Safety nets: JS disabled entirely, or main.js failed to load.
   Without these the entrance styles would leave the page blank. */
.no-js .anim,
.reveal-all .anim,
.no-js .ln__i,
.reveal-all .ln__i {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .anim, .ln__i { opacity: 1 !important; transform: none !important; }
  .ticker__track, .revmarquee__row, .hero__bg img,
  .seal__ring, .hero__scroll-mouse span, .pulse::after { animation: none !important; }
}

/* ---------- 21. PRINT ---------- */
@media print {
  .header, .topbar, .fab, .ticker, .visit__map, .hero__badge, .progress, .sheet { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .hero, .order, .footer { background: #fff !important; color: #000 !important; }
  .anim, .ln__i { opacity: 1 !important; transform: none !important; }
}

/* ---------- 22. WORDPRESS ---------- */
/* Everything above is the original static design, unchanged. This section only
   adds what WordPress needs: room for the admin bar, core utility classes, and
   the inner-page (Privacy, Allergens, Terms, posts, 404) styles. */

/* Logged-in admin bar: 32px on desktop, 46px on tablet, scrolls away on phones. */
:root { --wp-admin-h: 0px; }
.has-adminbar { --wp-admin-h: 32px; }
@media (max-width: 782px) { .has-adminbar { --wp-admin-h: 46px; } }
@media (max-width: 600px) { .has-adminbar { --wp-admin-h: 0px; } }

html { scroll-padding-top: calc(var(--header-h) + var(--s-4) + var(--wp-admin-h)); }
.header   { top: var(--wp-admin-h); }
.progress { top: var(--wp-admin-h); }
@media (min-width: 1000px) {
  .board__panel { top: calc(var(--header-h) + var(--s-5) + var(--wp-admin-h)); }
}
@media (max-width: 1040px) {
  .nav { top: calc(var(--header-h) + 40px + var(--wp-admin-h)); }
}

/* Core utility classes */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  white-space: nowrap; word-wrap: normal;
}
.screen-reader-text:focus {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: 400;
  width: auto; height: auto; margin: 0; padding: var(--s-3) var(--s-5);
  clip: auto; clip-path: none; overflow: visible;
  background: var(--brand); color: #fff; border-radius: var(--r-sm); font-weight: 700;
}
.alignleft   { float: left;  margin: .35rem var(--s-5) var(--s-4) 0; }
.alignright  { float: right; margin: .35rem 0 var(--s-4) var(--s-5); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: .85rem; color: var(--text-soft); margin-top: var(--s-2); }

/* Inner pages */
.page-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.page-hero__title { font-size: var(--t-4); font-weight: 900; letter-spacing: -.045em; line-height: .96; max-width: 20ch; }
.page-body { padding-top: 0; }

.prose { max-width: 46rem; color: var(--text-soft); line-height: 1.75; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2, .prose h3, .prose h4 { color: var(--text); margin-top: var(--s-7); }
.prose h2 { font-size: var(--t-2); }
.prose h3 { font-size: var(--t-1); }
.prose h4 { font-size: var(--t-0); }
.prose strong { color: var(--text); }
.prose a:not(.btn) { color: var(--brand-300); border-bottom: 1px solid color-mix(in srgb, var(--brand-300) 40%, transparent); transition: border-color .2s; }
.prose a:not(.btn):hover { border-color: var(--brand-300); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--brand-300); }
.prose blockquote { padding-left: var(--s-5); border-left: 3px solid var(--brand); color: var(--text); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-6); }
.prose img { border-radius: var(--r); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.prose th { color: var(--text); font-family: var(--font-display); }
.prose__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6) !important; }

.entry + .entry { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.entry__title { font-size: var(--t-2); margin-top: 0 !important; }
.entry__title a { color: var(--text); border: 0 !important; }
.entry__title a:hover { color: var(--brand-300); }
.entry__meta { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-300); }
.navigation.pagination { margin-top: var(--s-7); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.navigation.pagination .page-numbers {
  padding: .5rem .95rem; border: 1px solid var(--line-invert); border-radius: 999px;
  color: var(--text-soft); border-bottom-width: 1px !important;
}
.navigation.pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }