/* ==========================================================================
   GRIT BURGERS — DESIGN SYSTEM
   Redesign build. Brand constraints preserved: logo, #f4bb16 / #0b0b0b /
   #f6f0e4 palette, existing photography, menu content, copy voice.
   Theme is locked dark across the whole site: every product shot is lit on
   near-black, so a dark ground lets the food carry the page.
   ========================================================================== */

/* --- 0. Self-hosted fonts (no external dependency) ------------------------ */
@font-face {
  font-family: "Anton";
  src: url("fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InterVar";
  src: url("fonts/inter-latin.woff2") format("woff2-variations"),
       url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Brand (preserved) */
  --yellow: #f4bb16;
  --yellow-deep: #d09a05;
  --ink: #0b0b0b;
  --cream: #f6f0e4;
  --red: #d6301f;

  /* Extended dark ground */
  --ink-0: #070706;
  --ink-1: #0b0b0b;
  --ink-2: #121110;
  --ink-3: #191714;

  /* Type colour roles */
  --text: #f6f0e4;
  --text-dim: rgba(246, 240, 228, 0.66);
  --text-faint: rgba(246, 240, 228, 0.42);
  --hair: rgba(246, 240, 228, 0.14);
  --hair-strong: rgba(246, 240, 228, 0.28);

  /* Type families */
  --display: "Anton", "Archivo Black", Impact, sans-serif;
  --ui: "InterVar", "Inter", system-ui, -apple-system, Arial, sans-serif;

  /* Type scale — three tiers, used consistently sitewide */
  --t1: clamp(3.1rem, 8.4vw, 8.6rem);   /* hero headline, one per page */
  --t2: clamp(2.3rem, 5.4vw, 5.2rem);   /* section headline */
  --t2-sm: clamp(1.9rem, 3.6vw, 3.2rem);/* calmer section headline (Partners) */
  --t3: clamp(1.15rem, 1.9vw, 1.7rem);  /* card / product title */
  --body: clamp(0.97rem, 1.05vw, 1.06rem);
  --micro: 0.7rem;

  /* Spacing — 8px base */
  --gutter: clamp(20px, 5vw, 76px);
  --section: clamp(76px, 9vw, 152px);
  --section-tight: clamp(52px, 6vw, 96px);

  /* Shape — surfaces and buttons are square; metadata chips are pill. */
  --r-surface: 0px;
  --r-chip: 999px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 0.18s;
  --mid: 0.36s;
  --chrome: 104px; /* ticker + header */
}

/* --- 2. Reset and base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* jump links land clear of the sticky header */
section[id], [id="find"], [id="menu"], [id="apply"], [id="calculator"] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--ink-1);
  color: var(--text);
  font-family: var(--ui);
  font-size: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

img { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.88;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t1); }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t3); line-height: 0.96; }

p { margin: 0; }

a { color: inherit; }

::selection { background: var(--yellow); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.wrap { width: 100%; padding-inline: var(--gutter); }
.measure { max-width: 58ch; }
.yellow { color: var(--yellow); }
h1 em, h2 em, h3 em { font-style: normal; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[data-error]::after {
  content: attr(data-error);
  display: block;
  margin-top: 8px;
  color: var(--yellow);
  font-weight: 600;
}

/* Grain — fixed, pointer-events none, never on a scrolling container. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: 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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Small uppercase label. Used sparingly — max one per three sections. */
.eyebrow {
  font-size: var(--micro);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 20px;
}

.lede {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 46ch;
}

.section-note { color: var(--text-dim); max-width: 42ch; }

/* --- 3. Motion primitives ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); will-change: transform, opacity; }

.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

@keyframes ticker-run {
  to { transform: translateX(-50%); }
}

/* --- 4. Ticker ----------------------------------------------------------- */
.ticker {
  height: 34px;
  background: var(--yellow);
  color: var(--ink);
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 40;
}

.ticker-track { display: flex; min-width: max-content; animation: ticker-run 30s linear infinite; }

.ticker-group {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ticker-g { height: 15px; width: auto; opacity: 0.85; }

/* --- 5. Header and navigation -------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 70px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(11, 11, 11, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}

.wordmark { display: block; width: 104px; flex: none; }
.wordmark img { width: 100%; height: auto; }

.topbar nav { display: flex; gap: 30px; margin-left: auto; }

.topbar nav a {
  position: relative;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  padding-block: 6px;
  transition: color var(--fast) ease;
}

.topbar nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}

.topbar nav a:hover { color: var(--text); }
.topbar nav a:hover::after, .topbar nav a.active::after { transform: scaleX(1); }
.topbar nav a.active { color: var(--text); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle i { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: background var(--fast); }
.nav-toggle i::before, .nav-toggle i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--mid) var(--ease);
}
.nav-toggle i::before { top: -7px; }
.nav-toggle i::after { top: 7px; }

body.nav-open .nav-toggle i { background: transparent; }
body.nav-open .nav-toggle i::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle i::after { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--ink-0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
  visibility: hidden;
}

body.nav-open .nav-drawer { transform: none; visibility: visible; }

.nav-drawer a {
  font-family: var(--display);
  font-size: clamp(2.4rem, 12vw, 4rem);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  transition: color var(--fast) ease, padding-left var(--mid) var(--ease);
}

.nav-drawer a:hover, .nav-drawer a:focus-visible { color: var(--yellow); padding-left: 10px; }
.nav-drawer .btn { margin-top: 28px; align-self: flex-start; }

/* --- 6. Buttons, links, chips, inputs ------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 26px;
  border: 0;
  border-radius: var(--r-surface);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(246, 240, 228, 0.22);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) ease;
}

.btn:hover { background: #ffc92a; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(246, 240, 228, 0.4); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(246, 240, 228, 0); }
.btn span { font-size: 1em; line-height: 1; }
.btn.lg { padding: 21px 34px; font-size: 0.84rem; }
.btn.block { width: 100%; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border: 1.5px solid var(--hair-strong);
  border-radius: var(--r-surface);
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease);
}

.btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); transform: translateY(-2px); }
.btn-ghost.dark { border-color: rgba(11, 11, 11, 0.38); color: var(--ink); }
.btn-ghost.dark:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-ghost:active { transform: translateY(1px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding-block: 4px;
  border-bottom: 2px solid var(--yellow);
  transition: gap var(--mid) var(--ease), color var(--fast) ease;
}

.text-link:hover { gap: 15px; color: var(--yellow); }

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-chip);
  padding: 6px 13px;
  font-size: var(--micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(244, 187, 22, 0.14);
  color: var(--yellow);
  border: 1px solid rgba(244, 187, 22, 0.3);
}

.chip.plain { background: rgba(246, 240, 228, 0.08); color: var(--text-dim); border-color: var(--hair); }

/* Postcode capture — the conversion control, used on Home, Order, Locations */
.pc-form { width: 100%; max-width: 560px; }

.pc-row { display: flex; gap: 10px; flex-wrap: wrap; }

.pc-row input {
  flex: 1 1 200px;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  border: 1.5px solid var(--hair-strong);
  border-radius: var(--r-surface);
  background: var(--ink-2);
  color: var(--text);
  font-family: var(--ui);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}

.pc-row input::placeholder { color: var(--text-faint); font-weight: 500; letter-spacing: 0.04em; }
.pc-row input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(244, 187, 22, 0.25); }
.pc-row .btn { height: 60px; }

.pc-note { margin-top: 12px; font-size: 0.78rem; color: var(--text-dim); }

/* --- 7. Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--chrome));
  display: flex;
  align-items: center;
  padding: clamp(28px, 4vw, 56px) var(--gutter);
  background: var(--ink-0);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -20%;
  width: 80%;
  height: 120%;
  background: radial-gradient(circle at 60% 50%, rgba(244, 187, 22, 0.17), transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.hero-copy { position: relative; z-index: 2; width: min(56%, 760px); }

.hero h1 { margin-bottom: 22px; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; animation: rise 0.8s var(--ease) backwards; }
.hero h1 .line:nth-child(1) > span { animation-delay: 0.1s; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.19s; }
.hero .eyebrow { animation: rise 0.7s var(--ease) backwards; }
.hero .hero-sub { animation: rise 0.8s var(--ease) 0.3s backwards; }
.hero .hero-action { animation: rise 0.8s var(--ease) 0.4s backwards; }

.hero-sub {
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 38ch;
  margin-bottom: 30px;
}

.hero-action { max-width: 560px; }
.hero-action .pc-note { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Bleeds to every edge of the hero rather than sitting inside its padding */
.hero-media {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52%;
  z-index: 0;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: settle 1.4s var(--ease) backwards;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}

.stamp {
  position: absolute;
  right: clamp(16px, 4vw, 72px);
  bottom: clamp(16px, 4vw, 56px);
  z-index: 3;
  width: clamp(94px, 10vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--yellow);
  background: rgba(11, 11, 11, 0.72);
  backdrop-filter: blur(6px);
  display: grid;
  place-content: center;
  text-align: center;
  transform: rotate(-9deg);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.7;
  color: var(--yellow);
  text-transform: uppercase;
}

.stamp b { font-family: var(--display); font-size: 1.15rem; font-weight: 400; letter-spacing: 0.04em; display: block; color: var(--cream); }

/* --- 8. Hero product (Classic Grit) -------------------------------------- */
.hero-product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  padding: var(--section) var(--gutter) var(--section) 0;
  background: linear-gradient(180deg, var(--ink-0), var(--ink-2));
  overflow: hidden;
}

.hero-product-media { position: relative; margin-left: calc(var(--gutter) * -1); }

.hero-product-media::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  background: radial-gradient(circle, rgba(244, 187, 22, 0.2), transparent 64%);
  filter: blur(26px);
}

.hero-product-media img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.06);
}

.hero-product-copy { position: relative; z-index: 2; }

.hero-product h2 {
  font-size: clamp(2.8rem, 6.4vw, 6.4rem);
  margin: 18px 0 20px;
}

.hero-product .build {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 32px;
  padding: 0;
  list-style: none;
}

.hero-product .build li {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 7px 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-chip);
}

.hero-product .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* --- 10. Yellow band ----------------------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  color: var(--ink);
  padding: 0 0 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.64fr);
  align-items: stretch;
  gap: clamp(20px, 4vw, 64px);
}

/* the photo is used as shot and bleeds to the band's edges: no masking, no cut-out edges */
.band-copy { padding-block: clamp(46px, 5.5vw, 84px); align-self: center; }
.band h2 { font-size: clamp(2.6rem, 7.4vw, 6.4rem); color: var(--ink); }
.band p { margin-top: 20px; font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.2rem); max-width: 42ch; line-height: 1.5; }
.band .btn-ghost { margin-top: 30px; }

.band-media {
  width: 100%;
  /* explicit height: a portrait source would otherwise drive the whole band's
     height. Taller frame + narrower column = less of the portrait cropped. */
  height: clamp(410px, 43vw, 575px);
  object-fit: cover;
  object-position: 50% 46%;
  align-self: stretch;
}

/* --- 11. Menu ------------------------------------------------------------ */
.menu-section { padding: var(--section) var(--gutter); background: var(--ink-1); }

/* Headline and its note stack; no floating corner paragraph. */
.menu-head { margin-bottom: 30px; }
.menu-head .section-note { margin-top: 18px; }

.tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--hair);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs button {
  flex: none;
  scroll-snap-align: start;
  background: transparent;
  border: 1.5px solid var(--hair);
  border-radius: var(--r-chip);
  color: var(--text-dim);
  font-family: var(--ui);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 20px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease);
}

.tabs button:hover { color: var(--text); border-color: var(--hair-strong); }
.tabs button.active { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.tabs button:active { transform: scale(0.97); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
}

/* Photo left, description right. Every item gets the same card so the
   range reads as one set rather than a headline act with support. */
.menu-item {
  display: grid;
  grid-template-columns: clamp(118px, 13vw, 168px) minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  align-items: center;
  padding: clamp(12px, 1vw, 16px);
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  transition: border-color var(--mid) ease, background var(--mid) ease, transform var(--mid) var(--ease);
}

.menu-item:hover { border-color: rgba(244, 187, 22, 0.45); transform: translateY(-3px); }
.menu-item:hover .menu-thumb img { transform: scale(1.07); }

.menu-thumb { overflow: hidden; aspect-ratio: 1; background: var(--ink-3); }
.menu-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; transition: transform 0.6s var(--ease); }

.menu-copy { padding-right: 4px; }
.menu-copy h3 { font-size: clamp(1.02rem, 1.35vw, 1.25rem); }

/* Text-only categories drop the photo column and keep the same frame. */
.menu-item.no-image { grid-template-columns: minmax(0, 1fr); padding: clamp(18px, 1.8vw, 24px); }
.menu-item.no-image h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

.menu-head-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.menu-copy p { font-size: 0.81rem; color: var(--text-dim); line-height: 1.5; }

.drinks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.drink-item {
  display: grid;
  gap: 14px;
  place-items: center;
  padding: 26px 16px;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  text-align: center;
  transition: border-color var(--mid) ease, transform var(--mid) var(--ease);
}

.drink-item:hover { border-color: var(--hair-strong); transform: translateY(-3px); }
.drink-logo { height: 62px; display: grid; place-content: center; }
.drink-logo img { max-height: 62px; width: auto; object-fit: contain; }
.drink-item h3 { font-size: 0.95rem; }

.allergen { margin-top: 28px; font-size: 0.78rem; color: var(--text-faint); }

/* --- 12. Dip artwork ------------------------------------------------------ */
/* Cut-out version of the existing sauce artwork so the pots sit on the dark
   ground instead of carrying their original cream backdrop. */
.sauce-pot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("sauce-pots-cutout.webp");
  background-size: 500% 100%;
  background-repeat: no-repeat;
  background-position-y: center;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55));
  transition: filter var(--mid) ease, transform var(--mid) var(--ease);
}

.s-grit { background-position-x: 0%; }
.s-spicy { background-position-x: 25%; }
.s-bbq { background-position-x: 50%; }
.s-truffle { background-position-x: 75%; }
.s-cheese { background-position-x: 100%; }

/* The pot artwork is tall and narrow, so it gets a portrait cell of its own
   and sits on the card rather than filling it edge to edge. */
.menu-item.dip { grid-template-columns: clamp(104px, 11vw, 140px) minmax(0, 1fr); }

.menu-item.dip .menu-thumb {
  aspect-ratio: 410 / 520;
  background: radial-gradient(circle at 50% 42%, rgba(244, 187, 22, 0.12), transparent 68%);
  padding: 10px 0;
}

.menu-item.dip .menu-thumb .sauce-pot { background-size: 500% auto; background-position-y: center; }
.menu-item.dip:hover .sauce-pot { transform: translateY(-3px); filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.6)) brightness(1.06); }

/* --- 13. Story split ----------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding: var(--section) var(--gutter) var(--section) 0;
  background: var(--ink-0);
}

.story-media { position: relative; }
/* The source is square and the burger fills it edge to edge, so a portrait
   crop clipped the sides. Keep the frame square and nothing is lost. */
.story-media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--hair);
  pointer-events: none;
}

.story-copy h2 { margin-bottom: 26px; }
.story-copy p + p { margin-top: 18px; }
.story-copy p { color: var(--text-dim); max-width: 46ch; }
.story-copy .text-link { margin-top: 30px; }

/* --- 14. Order band + platforms ------------------------------------------ */
.order-band {
  padding: var(--section) var(--gutter);
  background: var(--ink-1);
  border-top: 1px solid var(--hair);
}

.order-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

.platforms { display: grid; gap: 10px; }

.platform {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  text-decoration: none;
  transition: border-color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease);
}

.platform:hover { border-color: var(--yellow); background: var(--ink-3); transform: translateX(4px); }
.platform:active { transform: translateX(0) scale(0.995); }

.platform .mark {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--hair);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.platform .mark.uber { background: #06c167; color: #06231a; border-color: #06c167; }
.platform b { display: block; font-size: 0.96rem; }
.platform small { display: block; font-size: 0.76rem; color: var(--text-dim); }
.platform .status { margin-left: auto; font-size: var(--micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.platform.live .status { color: var(--yellow); }
.platform.muted { opacity: 0.66; }

/* --- 15. Footer + mobile bar --------------------------------------------- */
footer {
  padding: clamp(46px, 5vw, 76px) var(--gutter) calc(clamp(40px, 5vw, 64px) + env(safe-area-inset-bottom));
  background: var(--ink-0);
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 30px;
  align-items: center;
}

footer .wordmark { width: 118px; }
.footer-links { display: flex; gap: 12px 26px; flex-wrap: wrap; justify-content: center; }

.footer-links a {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  transition: color var(--fast) ease;
  /* keeps the tap target at the 24px minimum without changing the look */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 3px;
}

.footer-links a:hover { color: var(--yellow); }
.social { display: flex; gap: 12px; }

.social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  border: 1px solid var(--hair);
  border-radius: 50%;
  transition: border-color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease);
}

.social a:hover { border-color: var(--yellow); background: rgba(244, 187, 22, 0.12); transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.social svg .fill { fill: currentColor; stroke: none; }

.legal { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-faint); border-top: 1px solid var(--hair); padding-top: 24px; }

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 44;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: calc(62px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--yellow);
  color: var(--ink);
  border: 0;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) ease;
}

.mobile-bar:active { background: var(--yellow-deep); }

/* --- 16. Inner page banner ----------------------------------------------- */
.banner {
  position: relative;
  padding: clamp(54px, 7vw, 116px) var(--gutter) clamp(46px, 6vw, 96px);
  background: linear-gradient(180deg, var(--ink-0), var(--ink-1));
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}

.banner::before {
  content: "";
  position: absolute;
  right: -6%;
  top: -40%;
  width: 56%;
  height: 180%;
  background: radial-gradient(circle at 50% 50%, rgba(244, 187, 22, 0.14), transparent 62%);
  pointer-events: none;
}

.banner-inner { position: relative; z-index: 1; max-width: 1000px; }

/* Product shot alongside the ordering headline: appetite at the top of the flow */
.banner-media {
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  width: min(42%, 520px);
  height: auto;
  z-index: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 74%);
}
.banner h1 { font-size: clamp(2.6rem, 6.6vw, 6.2rem); margin-bottom: 22px; }
.banner .lede { max-width: 52ch; }
.banner-actions { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-top: 34px; }

/* --- 17. Order page ------------------------------------------------------ */
.finder { padding: var(--section) var(--gutter); background: var(--ink-1); }

.finder-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.finder-inner h2 { margin-bottom: 18px; }
.finder-inner .lede { margin: 0 auto 36px; }
.finder-inner .pc-form { margin: 0 auto; }
.finder-inner .pc-row input { text-align: center; }

.result { margin-top: 40px; text-align: left; }
.result:empty { margin-top: 0; }
.result-heading { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 18px; }
.result-msg { color: var(--text-dim); }

.kitchen-list { display: grid; gap: 12px; }

.kitchen {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: left;
  padding: 20px 22px;
  border: 1.5px solid var(--hair);
  border-radius: var(--r-surface);
  background: var(--ink-2);
  color: var(--text);
  font-family: var(--ui);
  cursor: pointer;
  transition: border-color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease);
}

.kitchen:hover { border-color: var(--yellow); transform: translateY(-2px); }
.kitchen:active { transform: translateY(0) scale(0.995); }
.kitchen.selected { border-color: var(--yellow); background: rgba(244, 187, 22, 0.1); }
.kitchen h3 { font-size: 1.5rem; }
.kitchen small { display: block; font-size: var(--micro); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.kitchen .dist { margin-top: 6px; font-size: 0.82rem; color: var(--text-dim); }
.kitchen .pick { margin-left: auto; flex: none; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }

.handoff {
  margin-top: 34px;
  padding: clamp(22px, 3vw, 34px);
  border: 1.5px solid var(--yellow);
  background: linear-gradient(140deg, rgba(244, 187, 22, 0.1), var(--ink-2) 60%);
}

.handoff[hidden] { display: none; }
.handoff, .handoff .platform { text-align: left; }
.handoff h3, .handoff > p { text-align: center; }
.platform div { min-width: 0; }
.handoff h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.handoff > p { color: var(--text-dim); margin-bottom: 22px; font-size: 0.9rem; }

.service-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
  background: var(--ink-0);
}

.service-row article { padding: clamp(30px, 4vw, 56px) var(--gutter); border-right: 1px solid var(--hair); }
.service-row article:last-child { border-right: 0; }
.service-row h3 { font-size: 1.15rem; margin-bottom: 12px; }
.service-row p { color: var(--text-dim); font-size: 0.89rem; }

/* --- 18. Locations page -------------------------------------------------- */
.regions { padding: var(--section) var(--gutter); background: var(--ink-1); }

.region + .region { margin-top: clamp(44px, 5vw, 78px); }

.region-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--hair);
}

.region-head h3 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); }
.region-head .count { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }

.kitchen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.kitchen-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kitchen-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  transition: border-color var(--mid) ease, transform var(--mid) var(--ease);
}

.kitchen-card:hover { border-color: rgba(244, 187, 22, 0.4); transform: translateY(-4px); }
.kitchen-card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kitchen-card .sub { min-width: 0; font-size: var(--micro); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.kitchen-card h4 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.8rem); text-transform: uppercase; letter-spacing: -0.01em; margin: 0; }
.kitchen-card p { font-size: 0.86rem; color: var(--text-dim); }
.kitchen-card .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.kitchen-card .tags span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; padding: 5px 10px; border-radius: var(--r-chip); background: rgba(246, 240, 228, 0.07); border: 1px solid var(--hair); color: var(--text-dim); }

.status-dot { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: var(--micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }

.network {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: var(--section) var(--gutter);
  background: var(--ink-0);
  border-top: 1px solid var(--hair);
}

/* --- 19. Partners page (calmer register) --------------------------------- */
.partners-page { --section: clamp(60px, 7vw, 116px); }
.partners-page .banner h1 { font-size: clamp(2.3rem, 5vw, 4.6rem); }
.partners-page h2 { font-size: var(--t2-sm); }

.model {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 70px);
  padding: var(--section) var(--gutter);
  background: var(--ink-1);
}

.model p { color: var(--text-dim); max-width: 56ch; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 34px; background: var(--hair); border: 1px solid var(--hair); }
.stats div { background: var(--ink-1); padding: 22px 20px; }
.stats b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--yellow); line-height: 1; margin-bottom: 8px; }
.stats span { font-size: 0.78rem; color: var(--text-dim); }

.calc-section { padding: var(--section) var(--gutter); background: var(--ink-0); border-block: 1px solid var(--hair); }
.calc-head { max-width: 760px; margin-bottom: clamp(26px, 3vw, 44px); }

.calculator {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

.calc-controls, .calc-result { background: var(--ink-1); padding: clamp(24px, 3vw, 40px); }
.calc-controls { display: grid; gap: 28px; align-content: start; }

.calc-controls label { display: grid; gap: 14px; }
.calc-controls label > span { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 0.85rem; color: var(--text-dim); }
.calc-controls output { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--text); letter-spacing: 0.01em; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-chip);
  background: linear-gradient(90deg, var(--yellow) var(--range-progress, 40%), rgba(246, 240, 228, 0.16) var(--range-progress, 40%));
}

input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-chip); background: linear-gradient(90deg, var(--yellow) var(--range-progress, 40%), rgba(246, 240, 228, 0.16) var(--range-progress, 40%)); }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--cream);
  border: 4px solid var(--ink-1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: transform var(--fast) var(--ease), background var(--fast) ease;
}

input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 4px solid var(--ink-1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
input[type="range"]:hover::-webkit-slider-thumb { background: var(--yellow); transform: scale(1.08); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.94); }
input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--yellow); }

.contribution { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--hair); margin-bottom: 22px; }
.contribution > span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.contribution b { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.contribution small { font-size: 0.82rem; color: var(--text-dim); }

.stacked-bar { display: flex; height: 12px; overflow: hidden; margin-bottom: 22px; background: var(--ink-3); }
.stacked-bar i { display: block; height: 100%; transition: width var(--mid) var(--ease); }
[data-seg="vat"] { background: #39342f; }
[data-seg="commission"] { background: #6b6560; }
[data-seg="food"] { background: #9a8f80; }
[data-seg="fees"] { background: var(--yellow-deep); }
[data-seg="keep"] { background: var(--yellow); }

.calc-key { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.calc-key li { display: flex; align-items: center; gap: 12px; font-size: 0.87rem; color: var(--text-dim); }
.calc-key li b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.calc-key i { display: block; width: 11px; height: 11px; padding: 0; border: 0; flex: none; }
.calc-key .k-vat { background: #39342f; }
.calc-key .k-commission { background: #6b6560; }
.calc-key .k-food { background: #9a8f80; }
.calc-key .k-fees { background: var(--yellow-deep); }
.calc-key .k-keep { background: var(--yellow); }
.calc-key .keep-row { color: var(--text); font-weight: 700; padding-top: 10px; border-top: 1px solid var(--hair); }

.calc-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-bottom: 20px; }
.calc-totals div { background: var(--ink-2); padding: 18px; }
.calc-totals span { display: block; font-size: var(--micro); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.calc-totals b { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.7rem); font-variant-numeric: tabular-nums; }
.calc-note { font-size: 0.78rem; color: var(--text-faint); line-height: 1.55; }

.included { padding: var(--section) var(--gutter); background: var(--ink-1); }
.included-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin-top: clamp(24px, 3vw, 40px); }
.included-grid article { padding: 26px 0; border-top: 1px solid var(--hair); }
.included-grid h3 { font-size: 1.15rem; margin-bottom: 10px; }
.included-grid p { color: var(--text-dim); font-size: 0.89rem; max-width: 46ch; }

.process { padding: var(--section) var(--gutter); background: var(--ink-0); border-top: 1px solid var(--hair); }
.process-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); margin-top: clamp(24px, 3vw, 44px); }
.process-flow article { position: relative; padding-top: 22px; border-top: 2px solid var(--hair); transition: border-color var(--mid) ease; }
.process-flow article:hover { border-top-color: var(--yellow); }
.process-flow h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--yellow); margin-bottom: 10px; }
.process-flow p { font-size: 0.87rem; color: var(--text-dim); }

.commercial { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); padding: var(--section) var(--gutter); background: var(--ink-1); }
.terms { display: grid; gap: 0; }
.terms p { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.terms p span { color: var(--text-dim); font-size: 0.9rem; }
.terms p b { font-size: 1rem; }
.terms small { display: block; margin-top: 20px; font-size: 0.78rem; color: var(--text-faint); line-height: 1.55; max-width: 62ch; }

.apply { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); padding: var(--section) var(--gutter); background: var(--ink-0); border-top: 1px solid var(--hair); }
.apply > div p { color: var(--text-dim); margin-top: 20px; max-width: 40ch; }

.partner-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.partner-form label { display: grid; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.partner-form .wide { grid-column: 1 / -1; }

.partner-form input, .partner-form select, .partner-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--hair);
  border-radius: var(--r-surface);
  background: var(--ink-2);
  color: var(--text);
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}

.partner-form input::placeholder, .partner-form textarea::placeholder { color: var(--text-faint); }
.partner-form input:focus, .partner-form select:focus, .partner-form textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(244, 187, 22, 0.22); }
.partner-form textarea { resize: vertical; min-height: 110px; }
.partner-form .btn { grid-column: 1 / -1; justify-self: start; }
.form-message { grid-column: 1 / -1; font-size: 0.85rem; color: var(--yellow); }

/* --- 20. Dialog ---------------------------------------------------------- */
dialog {
  width: min(560px, 92vw);
  padding: clamp(26px, 4vw, 44px);
  border: 1.5px solid var(--hair-strong);
  border-radius: var(--r-surface);
  background: var(--ink-1);
  color: var(--text);
}

dialog::backdrop { background: rgba(4, 4, 4, 0.82); backdrop-filter: blur(4px); }
dialog h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 14px; }
dialog > p { color: var(--text-dim); margin-bottom: 24px; font-size: 0.92rem; }
dialog .close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; background: none; border: 0; color: var(--text-dim); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: color var(--fast) ease; }
dialog .close:hover { color: var(--yellow); }
dialog .result { margin-top: 26px; }

/* --- 21. Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  /* Hero becomes full-bleed photography with the copy and postcode field
     stacked over it, so the primary action always sits in the first screen. */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(24px, 6vw, 48px) var(--gutter) clamp(32px, 6vw, 56px);
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(7, 7, 6, 0.62) 0%, rgba(7, 7, 6, 0.38) 30%, rgba(7, 7, 6, 0.93) 76%);
    pointer-events: none;
  }
  .hero-copy { position: relative; z-index: 2; width: 100%; }
  .hero-media { position: absolute; inset: 0; width: auto; z-index: 0; margin: 0; min-height: 0; }
  .hero-media img { object-position: 62% 40%; -webkit-mask-image: none; mask-image: none; }
  .stamp { top: clamp(14px, 4vw, 30px); bottom: auto; right: clamp(14px, 4vw, 30px); }
  .hero-product, .story, .order-band-inner, .model, .commercial, .apply, .network, .calculator { grid-template-columns: minmax(0, 1fr); }
  .hero-product { padding-inline: var(--gutter); }
  .hero-product-media { margin-left: 0; }
  .hero-product h2 { margin-left: 0; }
  .story { padding-inline: var(--gutter); }
  .band { grid-template-columns: 1fr; padding-left: 0; gap: 0; }
  .band-copy { padding: clamp(40px, 7vw, 56px) var(--gutter); }
  .band-media { width: 100%; height: clamp(300px, 62vw, 400px); object-position: 50% 44%; }
  .kitchen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drinks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-media { width: 44%; right: -12%; opacity: 0.5; }
}

@media (max-width: 860px) {
  :root { --chrome: 94px; }
  .topbar nav, .topbar .btn { display: none; }
  .nav-toggle { display: flex; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 62px; }
  /* keep the whole hero clear of the sticky order bar */
  .hero { min-height: calc(100dvh - var(--chrome) - 76px); }
  .menu-grid, .included-grid, .partner-form { grid-template-columns: minmax(0, 1fr); }
  .service-row { grid-template-columns: minmax(0, 1fr); }
  .service-row article { border-right: 0; border-bottom: 1px solid var(--hair); }
  .kitchen-grid { grid-template-columns: minmax(0, 1fr); }
  footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-links { justify-content: center; }
  .stats, .calc-totals { grid-template-columns: minmax(0, 1fr); }
  .stats div { padding: 18px; }
}

@media (max-width: 560px) {
  .menu-item { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .drinks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-flow { grid-template-columns: minmax(0, 1fr); }
  /* stacked: flex-basis would otherwise apply to height and inflate the field */
  .pc-row { flex-direction: column; }
  .pc-row input, .pc-row .btn { width: 100%; flex: none; height: 58px; }
  .eyebrow { font-size: 0.64rem; letter-spacing: 0.18em; }
  .kitchen { flex-wrap: wrap; gap: 12px; }
  .kitchen .pick { margin-left: 0; width: 100%; }
  .hero h1 { letter-spacing: -0.02em; }
  .stamp { width: 84px; font-size: 0.52rem; }
}

/* --- 22. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}

/* --- 23. Locations map ---------------------------------------------------- */
.map-section { padding: var(--section) var(--gutter) var(--section-tight); background: var(--ink-1); }
.map-head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); }
.map-head h2 { margin-bottom: 18px; }

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

/* region list */
.map-list { background: var(--ink-1); padding: 10px 0; height: clamp(460px, 64vh, 660px); overflow-y: auto; }
.region-group + .region-group { border-top: 1px solid var(--hair); }

.region-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color var(--fast) ease;
}

.region-toggle:hover { color: var(--yellow); }
.region-toggle .count {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(246, 240, 228, 0.08);
  border: 1px solid var(--hair);
  font-size: 0.66rem;
  color: var(--text-dim);
}

.region-toggle[aria-expanded="true"] { color: var(--yellow); }
.region-toggle[aria-expanded="true"] .count { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

.region-items { list-style: none; margin: 0; padding: 0; display: none; }
.region-group.open .region-items { display: block; }

.region-items button {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 22px 11px 26px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--ui);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: color var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease;
}

.region-items button .sub { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.region-items button:hover { color: var(--text); background: rgba(246, 240, 228, 0.04); }
.region-items button.active { color: var(--yellow); border-left-color: var(--yellow); background: rgba(244, 187, 22, 0.08); }

/* map */
.map-frame {
  position: relative;
  background: #08090c;
  overflow: hidden;
  height: clamp(460px, 64vh, 660px);
  touch-action: pan-y;
  cursor: grab;
}

.map-frame.dragging { cursor: grabbing; }
.map-svg { display: block; width: 100%; height: 100%; }
.map-svg [data-map-layer] { transition: transform 0.5s var(--ease); }
.map-frame.dragging .map-svg [data-map-layer] { transition: none; }

.map-sea { fill: #06070a; }
.map-neighbour { fill: #131210; stroke: rgba(246, 240, 228, 0.2); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-river { fill: none; stroke: #06070a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* The coastline is the thing that makes the map readable, so it carries a
   brighter, heavier stroke than the surrounding geography, with a soft halo
   underneath to separate land from sea at every zoom level. */
.map-land {
  fill: #2c2517;
  stroke: rgba(244, 187, 22, 0.92);
  stroke-width: 1.7;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-halo { fill: none; stroke: rgba(244, 187, 22, 0.16); stroke-width: 6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.map-place {
  fill: rgba(246, 240, 228, 0.24);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-anchor: middle;
  pointer-events: none;
}

/* teardrop pins */
.pin { cursor: pointer; outline: none; }
.pin-hit { fill: transparent; }
.pin-drop {
  fill: var(--yellow);
  stroke: #08090c;
  stroke-width: 1.5;
  transition: fill var(--fast) ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.pin-eye { fill: #0b0b0b; }
.pin:hover .pin-drop, .pin:focus-visible .pin-drop { fill: #ffd34d; }
.pin:focus-visible .pin-drop { stroke: var(--cream); stroke-width: 2; }
.pin.selected .pin-drop { fill: var(--cream); }
.pin.selected .pin-eye { fill: var(--yellow); }

.you-ring { fill: rgba(246, 240, 228, 0.2); stroke: var(--cream); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.you-dot { fill: var(--cream); }

/* pin popup */
.map-pop {
  position: absolute;
  z-index: 5;
  width: 262px;
  padding: 18px 20px 20px;
  background: rgba(10, 10, 9, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 187, 22, 0.55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.map-pop[hidden] { display: none; }
.map-pop small { display: block; font-size: var(--micro); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.map-pop h3 { font-size: 1.5rem; margin-bottom: 10px; }
.map-pop p { font-size: 0.84rem; color: var(--text-dim); line-height: 1.5; }
.map-pop .codes { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.map-pop .codes span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; padding: 4px 9px; border-radius: var(--r-chip); background: rgba(246, 240, 228, 0.08); border: 1px solid var(--hair); }
.map-pop .status-dot { margin-bottom: 14px; }

.map-pop-cta {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 2px;
}

.map-pop-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  color: var(--text-faint);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.map-pop-close:hover { color: var(--yellow); }

.map-controls { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 4; }

.map-controls button {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hair-strong);
  background: rgba(7, 7, 6, 0.86);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-family: var(--ui);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}

.map-controls button:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.map-controls button:active { transform: scale(0.96); }

.map-note { margin-top: 16px; font-size: 0.78rem; color: var(--text-faint); }

@media (max-width: 980px) {
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .map-list { height: auto; max-height: 340px; order: 2; }
  .map-frame { order: 1; height: clamp(420px, 56vh, 520px); }
  .map-controls { right: 12px; bottom: 12px; }
  .map-pop { width: min(262px, calc(100% - 24px)); }
}

/* SVG elements do not honour the HTML hidden attribute reliably */
.you[hidden] { display: none; }

/* Locations banner: network figures balance the headline column */
.banner.has-facts .banner-inner { max-width: none; }

.banner.has-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.banner-facts {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  border: 1px solid var(--hair);
  background: rgba(18, 17, 16, 0.6);
  backdrop-filter: blur(6px);
}

.banner-facts div {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
}

.banner-facts div + div { border-top: 1px solid var(--hair); }

.banner-facts b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
}

.banner-facts span { font-size: 0.88rem; color: var(--text-dim); line-height: 1.4; }

@media (max-width: 980px) {
  .banner.has-facts { grid-template-columns: minmax(0, 1fr); }
  .banner-facts { margin-top: 8px; }
}

/* Partners banner: a quick self-qualification checklist */
.banner-check {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--hair);
  background: rgba(18, 17, 16, 0.6);
  backdrop-filter: blur(6px);
}

.check-title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

.banner-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.banner-check li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--text);
}

.banner-check li::before {
  content: "✓";
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(244, 187, 22, 0.16);
  border: 1px solid rgba(244, 187, 22, 0.45);
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 700;
}

.check-note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* --- 24. First-paint curtain ---------------------------------------------- */
/* A short branded hold on the first home-page view of a session. It never
   blocks input for longer than it takes the hero to be ready, it clears
   itself on a timer even if JS stalls, and reduced motion skips it. */
.boot { display: none; }

html.booting { overflow: hidden; }

html.booting .boot {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 999;
  place-items: center;
  background: var(--ink-0);
  transform: translateY(0);
  transition: transform 0.62s var(--ease);
}

html.booting.boot-out .boot { transform: translateY(-101%); }

.boot-inner { display: grid; justify-items: center; gap: 22px; width: min(320px, 62vw); }

.boot-inner img {
  width: 100%;
  height: auto;
  opacity: 0;
  animation: boot-mark 0.62s var(--ease) 0.06s forwards;
}

.boot-rule {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.boot-rule::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  animation: boot-rule 1.05s cubic-bezier(0.32, 0.72, 0.2, 1) 0.18s forwards;
}

@keyframes boot-mark {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes boot-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* The hero already animates itself in; hold those animations at their first
   frame so they play to the lifted curtain rather than behind it. */
html.booting .hero .eyebrow,
html.booting .hero h1 .line > span,
html.booting .hero .hero-sub,
html.booting .hero .hero-action,
html.booting .hero-media img,
html.booting .stamp { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html.booting { overflow: auto; }
  html.booting .boot { display: none; }
}

/* --- 25. Coming soon splash ---------------------------------------------- */
/* Shares the dark theme, yellow accent, square surfaces and pill chips of the
   main site. Carries no JS dependency: entrance motion is scroll-driven CSS
   with a visible default, so the page reads correctly without scripting. */

.splash-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--gutter);
  background: var(--ink-0);
  border-bottom: 1px solid var(--hair);
}

.splash-bar .wordmark img { width: clamp(96px, 11vw, 136px); height: auto; display: block; }
.splash-bar .splash-note { font-size: var(--micro); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }

.soon { padding: var(--section-tight) var(--gutter); background: var(--ink-1); }
.soon-inner { max-width: 940px; margin: 0 auto; }

.soon-head { max-width: 600px; margin: 0 auto clamp(26px, 3.2vw, 46px); text-align: center; }
.soon-head h2 { margin-bottom: 18px; }
.soon-head .lede { margin-inline: auto; }

/* Four products, two across, so the whole range sits in one glance rather
   than a long scroll. */
.soon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}

.soon-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  border: 1px solid var(--hair);
  transition: border-color var(--mid) ease;
}

.soon-item:hover { border-color: rgba(244, 187, 22, 0.45); }
.soon-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.soon-item:hover img { transform: scale(1.04); }

.soon-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 44%, rgba(7, 7, 6, 0.88));
  pointer-events: none;
}

.soon-item h3 {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 1.6vw, 22px);
  right: clamp(14px, 1.6vw, 22px);
  bottom: clamp(12px, 1.4vw, 20px);
  font-size: clamp(0.92rem, 1.7vw, 1.5rem);
  line-height: 1;
}

.closer { padding: clamp(56px, 7vw, 100px) var(--gutter); background: var(--yellow); color: var(--ink); text-align: center; }
.closer h2 { font-size: clamp(2.2rem, 6.2vw, 4.8rem); color: var(--ink); }
.closer p { margin: 20px auto 0; max-width: 46ch; font-weight: 600; font-size: clamp(0.98rem, 1.25vw, 1.15rem); line-height: 1.5; }

.app-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-top: clamp(26px, 3vw, 40px); }

.app-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid rgba(11, 11, 11, 0.3);
  border-radius: var(--r-chip);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.app-chip span { color: rgba(11, 11, 11, 0.6); letter-spacing: 0.1em; }

.splash-actions { display: flex; gap: 16px 20px; flex-wrap: wrap; align-items: center; }

@media (max-width: 560px) {
  .soon-grid { gap: 10px; }
  .app-chip { padding: 10px 16px; font-size: 0.7rem; gap: 8px; }
}

/* The holding page has no footer nav, so the social icons take the trailing
   column rather than floating in the middle one. */
.splash-footer { grid-template-columns: auto 1fr; }
.splash-footer .social { justify-self: end; }