:root {
  --ink: #0b0b0b;
  --ink-soft: #17130f;
  --cream: #faf4ea;
  --cream-deep: #f1e6d6;
  --paper: #fffaf2;
  --gold: #e5a33c;
  --orange: #f57c1a;
  --brick: #bd4221;
  --brown: #522516;
  --line: rgba(11, 11, 11, 0.16);
  --light-line: rgba(255, 250, 242, 0.18);
  --muted: #70685f;
  --shadow: 0 24px 70px rgba(55, 29, 10, 0.13);
  --radius: 32px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--cream);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 14%, rgba(229, 163, 60, 0.08), transparent 24rem),
    var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

body::before {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, var(--brick), var(--orange), var(--gold));
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  transform: translateY(-150%);
  border-radius: 8px;
  color: var(--ink);
  background: var(--gold);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  right: 22px;
  left: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  max-width: 1480px;
  min-height: 72px;
  margin: 0 auto;
  padding: 8px 10px 8px 16px;
  transition: transform 0.35s ease, background 0.25s ease, border-color 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  color: var(--paper);
  background: rgba(11, 11, 11, 0.78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.site-header.scrolled {
  border-color: rgba(229, 163, 60, 0.28);
  background: rgba(11, 11, 11, 0.94);
}

.site-header.header-hidden {
  transform: translateY(-125%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(229, 163, 60, 0.12));
}

.brand span {
  display: grid;
  line-height: 1;
}

.brand b {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}

.brand small {
  margin-top: 7px;
  color: var(--gold);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.site-nav > a,
.site-nav summary {
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
  color: rgba(255, 250, 242, 0.8);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
}

.site-nav summary::-webkit-details-marker {
  display: none;
}

.site-nav summary::after {
  margin-left: 6px;
  content: "⌄";
  color: var(--gold);
}

.site-nav > a:hover,
.site-nav summary:hover,
.site-nav details[open] summary {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.08);
}

.site-nav details {
  position: relative;
}

.nav-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  display: grid;
  width: 310px;
  padding: 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(229, 163, 60, 0.25);
  border-radius: 18px;
  background: #14110e;
  box-shadow: var(--shadow);
}

.nav-panel::before {
  position: absolute;
  top: -17px;
  right: 0;
  left: 0;
  height: 18px;
  content: "";
}

.nav-panel a {
  display: grid;
  padding: 12px 14px;
  border-radius: 11px;
  color: var(--paper);
  font-size: 0.86rem;
  font-weight: 700;
}

.nav-panel a:hover {
  color: var(--ink);
  background: var(--gold);
}

.nav-panel small {
  margin-top: 3px;
  color: #a9a096;
  font-size: 0.7rem;
  font-weight: 500;
}

.nav-panel a:hover small {
  color: rgba(11, 11, 11, 0.7);
}

.nav-panel.compact {
  width: 240px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-link {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--light-line);
  border-radius: 50%;
  font-size: 0.74rem;
  font-weight: 700;
}

.lang-link:hover {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--gold);
}

.nav-toggle {
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 52px;
  padding: 14px 22px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--ink);
  background: var(--gold);
  font-size: 0.87rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.button:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  background: var(--orange);
}

.button-small {
  min-height: 44px;
  padding: 11px 17px;
  gap: 10px;
  white-space: nowrap;
}

.button-outline {
  color: var(--paper);
  background: transparent;
}

.button-outline:hover {
  color: var(--ink);
}

/* Inverse-solid CTA for dark bands (.restaurant-invitation).
   Distinct from .button (gold fill) and .button-outline (ghost);
   hover returns to the brand gold. Inherits the -2px lift from .button:hover. */
.button-dark {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--paper);
}
.button-dark:hover {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

.button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid currentColor;
  font-size: 0.86rem;
  font-weight: 700;
}

.text-link span {
  color: var(--gold);
}

.section {
  position: relative;
  max-width: 1540px;
  margin: 0 auto;
  padding: 120px 5vw;
  scroll-margin-top: 7rem;
}

.anchor-target {
  display: block;
  height: 0;
  scroll-margin-top: 7rem;
  visibility: hidden;
}

.section-dark {
  color: var(--paper);
  background:
    radial-gradient(circle at 82% 18%, rgba(189, 66, 33, 0.32), transparent 36rem),
    linear-gradient(135deg, var(--ink), #0f0d0b 60%, #25140d);
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--serif);
  line-height: 0.98;
}

h1 {
  overflow-wrap: normal;
  hyphens: none;
  margin-bottom: 30px;
  font-size: clamp(4rem, 8vw, 8.3rem);
  letter-spacing: -0.055em;
}

h1 em,
h2 em {
  color: var(--gold);
  font-weight: 600;
}

h2 {
  margin-bottom: 28px;
  font-size: clamp(2.6rem, 5vw, 5rem);
  letter-spacing: -0.045em;
}

h3 {
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

.lead {
  max-width: 700px;
  color: rgba(255, 250, 242, 0.74);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.7;
}

.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 42px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
  align-items: center;
  min-height: 820px;
  max-width: none;
  padding-top: 170px;
  overflow: hidden;
}

.hero::after {
  position: absolute;
  bottom: -300px;
  left: -200px;
  width: 650px;
  height: 650px;
  content: "";
  opacity: 0.35;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(229, 163, 60, 0.04), 0 0 0 160px rgba(229, 163, 60, 0.025);
}

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

.hero-visual {
  display: grid;
  align-items: center;
  min-height: 550px;
}

.hero-media {
  position: relative;
  width: min(100%, 690px);
  min-height: 640px;
  margin: 0 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(229, 163, 60, 0.44);
  border-radius: 42px;
  background: #21130c;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.48);
}

.hero-media::before,
.hero-media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero-media::before {
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.58), transparent 38%),
    linear-gradient(0deg, rgba(8, 6, 5, 0.96), transparent 46%);
}

.hero-media::after {
  inset: 14px;
  border: 1px solid rgba(255, 250, 242, 0.16);
  border-radius: 31px;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-media:hover img {
  transform: scale(1.025);
}

.hero-media-caption {
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 38px;
  display: grid;
  max-width: 370px;
}

.hero-media-caption span,
.hero-media-caption small {
  color: var(--gold);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-media-caption strong {
  margin: 10px 0 12px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.5vw, 3.8rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.hero-service-strip {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 250, 242, 0.16);
  border-radius: 18px;
  background: rgba(8, 6, 5, 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.hero-service-strip span {
  display: grid;
  min-height: 82px;
  align-content: center;
  gap: 8px;
  padding: 14px 16px;
  color: rgba(255, 250, 242, 0.82);
  border-right: 1px solid rgba(255, 250, 242, 0.13);
  font-size: 0.7rem;
  font-weight: 650;
}

.hero-service-strip span:last-child {
  border-right: 0;
}

.hero-service-strip i {
  color: var(--gold);
  font-size: 0.61rem;
  font-style: normal;
  letter-spacing: 0.12em;
}

.hero-origin-badge {
  position: absolute;
  z-index: 3;
  top: 30px;
  right: 28px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 8px;
  padding: 13px 15px;
  border: 1px solid rgba(229, 163, 60, 0.4);
  border-radius: 16px;
  color: var(--paper);
  background: rgba(8, 6, 5, 0.76);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.hero-origin-badge b {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.08rem;
}

.hero-origin-badge span {
  color: rgba(255, 250, 242, 0.7);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-origin-badge i {
  grid-column: 1 / -1;
  height: 1px;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(90deg, var(--brick), var(--gold));
}

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1540px;
  margin: 0 auto;
  padding: 22px 5vw;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.trust-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 26px;
  border-right: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.trust-bar span:last-child {
  border: 0;
}

.trust-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.section-heading {
  display: grid;
  max-width: 880px;
  margin-bottom: 60px;
}

.section-heading > p:last-child {
  max-width: 700px;
  color: var(--muted);
  font-size: 1.08rem;
}

.buyer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.buyer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 28px;
  overflow: hidden;
  transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255, 250, 242, 0.48);
}

.buyer-card::after {
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  content: "";
  transition: transform 0.3s ease;
  border: 1px solid rgba(229, 163, 60, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(229, 163, 60, 0.05);
}

.buyer-card:hover {
  transform: translateY(-8px);
  color: var(--paper);
  border-color: var(--brown);
  background: var(--brown);
  box-shadow: var(--shadow);
}

.buyer-card:hover::after {
  transform: scale(1.3);
}

.buyer-card > span {
  color: var(--brick);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.buyer-card:hover > span {
  color: var(--gold);
}

.buyer-card h3 {
  margin: auto 0 18px;
  font-size: 2rem;
}

.buyer-card p {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 0.9rem;
}

.buyer-card:hover p {
  color: rgba(255, 250, 242, 0.7);
}

.buyer-card > b {
  position: absolute;
  right: 26px;
  bottom: 22px;
  z-index: 2;
  color: var(--gold);
}

.live-feature {
  display: grid;
  grid-template-columns: minmax(380px, 0.9fr) 1.1fr;
  align-items: center;
  max-width: none;
  min-height: 760px;
}

.live-stage {
  position: relative;
  display: grid;
  width: min(530px, 90vw);
  height: min(530px, 90vw);
  place-items: center;
  margin: 0 auto;
}

.live-stage-photo {
  position: absolute;
  z-index: 0;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: cover;
  object-position: 56% center;
  opacity: 0.62;
  border: 1px solid rgba(229, 163, 60, 0.26);
  border-radius: 50%;
  filter: saturate(0.78) contrast(1.05) brightness(0.7);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.62), 0 35px 90px rgba(0, 0, 0, 0.4);
}

.live-ring {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(229, 163, 60, 0.26);
  border-radius: 50%;
}

.ring-a {
  width: 100%;
  height: 100%;
  animation: spin 28s linear infinite;
  border-top-color: var(--gold);
  border-bottom-color: var(--brick);
}

.ring-b {
  width: 72%;
  height: 72%;
  animation: spin 20s linear infinite reverse;
  border-right-color: var(--gold);
}

.ring-a::before,
.ring-b::before {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  content: "";
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 20px var(--gold);
}

.live-center {
  position: relative;
  z-index: 3;
  display: grid;
  width: 230px;
  height: 230px;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #3a2116, #100e0c 68%);
  box-shadow: inset 0 0 60px rgba(229, 163, 60, 0.08), 0 30px 80px rgba(0, 0, 0, 0.4);
}

.live-center span {
  color: var(--orange);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.25em;
}

.live-center b {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 3.3rem;
  line-height: 1;
}

.live-center small {
  margin-top: 12px;
  color: var(--gold);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}

.steam {
  position: absolute;
  z-index: 4;
  top: 14%;
  width: 2px;
  height: 130px;
  opacity: 0;
  animation: steam 4s ease-in-out infinite;
  background: linear-gradient(transparent, rgba(255, 250, 242, 0.28), transparent);
  filter: blur(2px);
}

.steam-a {
  left: 43%;
}

.steam-b {
  left: 50%;
  animation-delay: 1s;
}

.steam-c {
  left: 57%;
  animation-delay: 2s;
}

.live-copy {
  max-width: 690px;
  padding-left: 6vw;
}

.live-copy > p:not(.eyebrow) {
  max-width: 620px;
  color: rgba(255, 250, 242, 0.7);
  font-size: 1.05rem;
}

.check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 34px 0 40px;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-top: 1px solid var(--light-line);
  color: rgba(255, 250, 242, 0.84);
  font-size: 0.86rem;
}

.check-list li::before {
  position: absolute;
  left: 0;
  content: "✓";
  color: var(--gold);
}

.cuisine-list {
  border-top: 1px solid var(--line);
}

.cuisine-row {
  display: grid;
  grid-template-columns: 70px 1fr auto auto;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 18px 8px;
  transition: padding 0.2s ease, background 0.2s ease;
  border-bottom: 1px solid var(--line);
}

.cuisine-row:hover {
  padding-right: 22px;
  padding-left: 22px;
  background: var(--paper);
}

.cuisine-row span {
  color: var(--brick);
  font-size: 0.72rem;
  font-weight: 700;
}

.cuisine-row h3 {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.7rem);
}

.cuisine-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cuisine-row em {
  padding: 7px 10px;
  border: 1px solid rgba(189, 66, 33, 0.24);
  border-radius: 999px;
  color: var(--brick);
  font-size: 0.61rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.cuisine-signature {
  background: linear-gradient(90deg, rgba(229, 163, 60, 0.11), transparent 58%);
}

.cuisine-row b {
  color: var(--gold);
  font-size: 1.4rem;
}

.visual-story {
  max-width: none;
}

.visual-story .section-heading > p:last-child {
  color: rgba(255, 250, 242, 0.68);
}

.visual-story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 245px;
  gap: 14px;
}

.visual-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(229, 163, 60, 0.25);
  border-radius: 24px;
  background: #17110e;
}

.visual-card-large {
  grid-row: span 2;
  grid-column: span 2;
}

.visual-card-wide {
  grid-column: span 2;
}

.visual-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 42%, rgba(7, 5, 4, 0.92));
}

.visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: saturate(0.9) contrast(1.03);
}

.visual-card:hover img {
  transform: scale(1.035);
}

.visual-card figcaption {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 20px;
  left: 22px;
  display: grid;
  gap: 4px;
}

.visual-card figcaption b {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.55rem;
}

.visual-card figcaption span {
  color: rgba(255, 250, 242, 0.68);
  font-size: 0.76rem;
}

.process-section {
  background: var(--paper);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.process-card {
  min-height: 290px;
  padding: 28px;
  background: var(--paper);
}

.process-card span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 80px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--brick);
  font-size: 0.72rem;
  font-weight: 700;
}

.process-card h3 {
  margin-bottom: 14px;
}

.process-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.proof-section {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 8vw;
  align-items: center;
  background: var(--cream-deep);
}

.proof-story {
  max-width: 680px;
}

.proof-story h3 {
  font-size: 2rem;
}

.proof-story > p:not(.eyebrow) {
  max-width: 560px;
  color: var(--muted);
}

.case-mark {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  margin: 38px 0 24px;
  border: 1px solid var(--brick);
  border-radius: 50%;
  color: var(--brick);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(82, 37, 22, 0.2);
  border-radius: var(--radius);
  background: rgba(82, 37, 22, 0.2);
}

.stat {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  padding: 20px;
  background: var(--cream-deep);
  text-align: center;
}

.stat b {
  color: var(--brown);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 4.3rem);
  line-height: 1;
}

.stat span {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.account-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.account-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 50px;
  padding: clamp(32px, 6vw, 76px);
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--paper);
  background:
    radial-gradient(circle at 88% 28%, rgba(229, 163, 60, 0.2), transparent 23rem),
    var(--brown);
}

.account-card h2 {
  max-width: 830px;
  font-size: clamp(2.5rem, 5vw, 5rem);
}

.account-card p:not(.eyebrow) {
  max-width: 720px;
  margin-bottom: 0;
  color: rgba(255, 250, 242, 0.7);
}

.download-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.download-links a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 15px;
  border: 1px solid var(--light-line);
  border-radius: 999px;
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 700;
}

.download-links a:hover {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--gold);
}

.download-links span {
  color: var(--gold);
}

.download-links a:hover span {
  color: var(--ink);
}

.pricing-teaser {
  padding-top: 80px;
}

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

.price-card {
  display: grid;
  min-height: 250px;
  align-content: space-between;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 250, 242, 0.45);
}

.price-card > span {
  color: var(--brick);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.price-card b {
  margin-top: auto;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 1;
}

.price-card small {
  margin-top: 16px;
  color: var(--muted);
}

.price-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 24px;
}

.price-footer p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.enquiry-section {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 7vw;
  align-items: start;
  max-width: none;
  color: var(--paper);
  background:
    radial-gradient(circle at 15% 70%, rgba(189, 66, 33, 0.3), transparent 30rem),
    var(--ink);
}

.enquiry-intro {
  position: sticky;
  top: 130px;
}

.enquiry-intro > p:not(.eyebrow) {
  max-width: 520px;
  color: rgba(255, 250, 242, 0.68);
}

.response-promise {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 50px;
  padding-top: 26px;
  border-top: 1px solid var(--light-line);
}

.response-promise > span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 700;
}

.response-promise p {
  margin: 0;
  color: rgba(255, 250, 242, 0.62);
  font-size: 0.78rem;
}

.response-promise b {
  color: var(--paper);
  font-family: var(--sans);
}

.enquiry-form {
  min-height: 650px;
  padding: clamp(24px, 4vw, 50px);
  border: 1px solid rgba(229, 163, 60, 0.26);
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.055);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.24);
}

.form-progress {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  margin-bottom: 44px;
}

.form-progress span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  border: 1px solid var(--light-line);
  border-radius: 50%;
  color: rgba(255, 250, 242, 0.45);
  font-size: 0.68rem;
  font-weight: 700;
}

.form-progress span.active {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--gold);
}

.form-progress i {
  height: 1px;
  background: var(--light-line);
}

.form-step {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-step.active {
  display: block;
  animation: formIn 0.35s ease;
}

.form-step legend {
  margin-bottom: 34px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field-grid label,
.field-group {
  display: grid;
  gap: 9px;
}

.field-grid label.wide {
  grid-column: 1 / -1;
}

.field-grid label > span,
.field-group > span {
  color: rgba(255, 250, 242, 0.62);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Shared box model for all form controls, on any ground. */
input,
select,
textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
  border-radius: 12px;
  outline: 0;
  /* Light-ground default. Previously these three properties were set to the
     DARK theme globally, so any form placed on a cream/paper background
     rendered near-white text in a near-white field. */
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper);
}

/* Dark grounds: the enquiry section paints its own dark background rather than
   using .section-dark, so both selectors are required. */
.section-dark input,
.section-dark select,
.section-dark textarea,
.enquiry-section input,
.enquiry-section select,
.enquiry-section textarea {
  border-color: var(--light-line);
  color: var(--paper);
  background: rgba(255, 255, 255, 0.045);
}

textarea {
  min-height: 112px;
  resize: vertical;
}

.section-dark select,
.enquiry-section select {
  color-scheme: dark;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  background: rgba(229, 163, 60, 0.08);
}

.section-dark input:focus,
.section-dark select:focus,
.section-dark textarea:focus,
.enquiry-section input:focus,
.enquiry-section select:focus,
.enquiry-section textarea:focus {
  background: rgba(229, 163, 60, 0.06);
}

.field-group {
  margin-bottom: 26px;
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-chip {
  position: relative;
  cursor: pointer;
}

.choice-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-chip span {
  display: inline-flex;
  padding: 11px 16px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  border: 1px solid var(--light-line);
  border-radius: 999px;
  color: rgba(255, 250, 242, 0.72);
  font-size: 0.8rem;
}

.choice-chip input:checked + span {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--gold);
}

.choice-chip input:focus-visible + span {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 38px;
}

.form-actions .button {
  margin-left: auto;
}

.text-button {
  padding: 10px 0;
  cursor: pointer;
  border: 0;
  color: rgba(255, 250, 242, 0.62);
  background: none;
  font-size: 0.82rem;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  color: rgba(255, 250, 242, 0.62);
  font-size: 0.75rem;
}

.consent input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
}

.form-status {
  margin-top: 24px;
  padding: 0;
  border-radius: 12px;
  font-size: 0.85rem;
}

.form-status.success,
.form-status.error {
  padding: 18px;
}

.form-status.success {
  color: #0c351f;
  background: #ccefd8;
}

.form-status.error {
  color: #5d1209;
  background: #ffd9cf;
}

.form-status small {
  display: inline-block;
  margin-left: 5px;
  opacity: 0.65;
}

.faq-section {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 8vw;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 400;
}

.faq-item[open] summary span {
  transform: rotate(45deg);
}

.faq-item p {
  max-width: 700px;
  padding: 0 48px 24px 0;
  color: var(--muted);
}

.page-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  min-height: 680px;
  max-width: none;
  padding-top: 170px;
}

.page-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 960px;
}

.page-hero h1 {
  font-size: clamp(3.2rem, 6.3vw, 6rem);
}

.page-manifest {
  position: relative;
  width: min(100%, 520px);
  margin-left: auto;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(229, 163, 60, 0.42);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(229, 163, 60, 0.08), transparent 42%),
    rgba(12, 10, 8, 0.72);
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.32);
}

.page-manifest::before {
  position: absolute;
  z-index: 2;
  top: -140px;
  right: -120px;
  width: 320px;
  height: 320px;
  content: "";
  border: 1px solid rgba(229, 163, 60, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(229, 163, 60, 0.035), 0 0 0 76px rgba(229, 163, 60, 0.02);
}

.page-manifest-photo img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.44;
  filter: saturate(0.72) contrast(1.05) brightness(0.63);
}

.page-manifest-photo::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.48), rgba(8, 6, 5, 0.72)),
    linear-gradient(135deg, transparent 30%, rgba(82, 37, 22, 0.4));
}

.manifest-top,
.manifest-metrics {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.manifest-top {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--light-line);
  color: var(--gold);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.manifest-top b {
  color: rgba(255, 250, 242, 0.7);
  font-size: 0.62rem;
}

.manifest-center {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 280px;
  align-content: end;
  padding: 42px 0 38px;
}

.manifest-center small {
  margin-bottom: 16px;
  color: var(--orange);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.manifest-center strong {
  max-width: 390px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.7vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.manifest-center p {
  margin: 18px 0 0;
  color: rgba(255, 250, 242, 0.56);
  font-size: 0.86rem;
}

.manifest-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 22px;
  border-top: 1px solid var(--light-line);
}

.manifest-metrics span {
  display: grid;
  padding: 0 14px;
  color: rgba(255, 250, 242, 0.47);
  border-right: 1px solid var(--light-line);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.manifest-metrics span:first-child {
  padding-left: 0;
}

.manifest-metrics span:last-child {
  padding-right: 0;
  border-right: 0;
}

.manifest-metrics b {
  margin-bottom: 7px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: none;
}

.assurance-section {
  padding-bottom: 80px;
}

.assurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.assurance-card {
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 250, 242, 0.48);
}

.assurance-card span {
  color: var(--brick);
  font-size: 0.7rem;
  font-weight: 700;
}

.assurance-card h3 {
  margin-top: 58px;
}

.price-detail,
.case-study,
.quality-flow,
.menu-detail {
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--paper);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
}

table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
}

th,
td {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

thead th {
  color: var(--paper);
  background: var(--brown);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

tbody th {
  font-family: var(--serif);
  font-size: 1.15rem;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

tr > *:last-child {
  border-right: 0;
}

.tax-note {
  margin-top: 24px;
  padding: 22px 24px;
  border-left: 3px solid var(--gold);
  color: var(--muted);
  background: var(--cream);
  font-size: 0.82rem;
}

.tax-note b {
  color: var(--ink);
}

.estimate-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(189, 66, 33, 0.24);
  border-radius: 18px;
  color: var(--brown);
  background: rgba(229, 163, 60, 0.12);
}

.estimate-banner b {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--paper);
  background: var(--brick);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.estimate-banner span {
  color: var(--muted);
  font-size: 0.86rem;
}

.restaurant-invitation {
  background:
    radial-gradient(circle at 85% 10%, rgba(229, 163, 60, 0.22), transparent 34%),
    var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  padding-block: clamp(4.5rem, 8vw, 8rem);
}

.restaurant-invitation h2 {
  max-width: 820px;
  margin: 0.65rem 0 1rem;
}

.restaurant-invitation p:not(.eyebrow) {
  max-width: 690px;
  color: rgba(255, 250, 242, 0.72);
}

.restaurant-invitation .button {
  white-space: nowrap;
}

.case-study-card {
  padding: clamp(32px, 7vw, 90px);
  border-radius: var(--radius);
  color: var(--paper);
  background:
    linear-gradient(115deg, rgba(229, 163, 60, 0.1), transparent 45%),
    var(--brown);
}

.case-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 60px;
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

.case-study-card h2 {
  max-width: 950px;
}

.case-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 60px 0 30px;
  border-top: 1px solid var(--light-line);
  border-bottom: 1px solid var(--light-line);
}

.case-numbers span {
  display: grid;
  padding: 28px;
  border-right: 1px solid var(--light-line);
  color: rgba(255, 250, 242, 0.58);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.case-numbers span:last-child {
  border: 0;
}

.case-numbers b {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 2.5rem;
}

.case-study-card > p {
  max-width: 820px;
  margin-bottom: 0;
  color: rgba(255, 250, 242, 0.7);
}

.quality-rows {
  border-top: 1px solid var(--line);
}

.quality-row {
  display: grid;
  grid-template-columns: 80px 0.7fr 1.3fr;
  align-items: center;
  gap: 30px;
  min-height: 120px;
  border-bottom: 1px solid var(--line);
}

.quality-row > span {
  color: var(--brick);
  font-size: 0.72rem;
  font-weight: 700;
}

.quality-row h3,
.quality-row p {
  margin: 0;
}

.quality-row p {
  color: var(--muted);
}

.menu-stack {
  border-top: 1px solid var(--line);
}

.menu-line {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 30px;
  min-height: 140px;
  border-bottom: 1px solid var(--line);
}

.menu-line > span {
  color: var(--brick);
  font-size: 0.72rem;
  font-weight: 700;
}

.menu-line h3 {
  margin-bottom: 7px;
  font-size: 2rem;
}

.menu-line p {
  margin: 0;
  color: var(--muted);
}

.menu-line > b {
  font-family: var(--serif);
  font-size: 1.5rem;
}

.fine-print {
  max-width: 820px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.cta-section {
  padding-top: 80px;
  padding-bottom: 100px;
}

.cta-card {
  display: grid;
  justify-items: start;
  padding: clamp(40px, 8vw, 100px);
  border-radius: var(--radius);
  color: var(--paper);
  background:
    radial-gradient(circle at 90% 50%, rgba(245, 124, 26, 0.28), transparent 27rem),
    var(--ink);
}

.cta-card h2 {
  max-width: 1050px;
}

.legal-section {
  border-top: 1px solid var(--line);
  background: var(--cream-deep);
}

.contact-team {
  padding-top: 80px;
  padding-bottom: 80px;
}

.contact-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.contact-person {
  display: grid;
  min-height: 280px;
  align-content: end;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--paper);
}

.contact-person:first-child {
  color: var(--paper);
  border-color: var(--brown);
  background:
    radial-gradient(circle at 90% 10%, rgba(229, 163, 60, 0.22), transparent 16rem),
    var(--brown);
}

.contact-person > span {
  margin-bottom: auto;
  color: var(--brick);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-person:first-child > span {
  color: var(--gold);
}

.contact-person h3 {
  margin: 68px 0 24px;
  font-size: clamp(2rem, 4vw, 3.6rem);
}

.contact-person a {
  padding: 10px 0;
  border-top: 1px solid currentColor;
  font-size: 0.8rem;
  font-weight: 700;
}

.contact-person:first-child a {
  border-color: rgba(255, 250, 242, 0.18);
}

.legal-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8vw;
}

.legal-grid h3 {
  margin-bottom: 18px;
}

.legal-grid p {
  max-width: 720px;
  color: var(--muted);
  font-size: 0.86rem;
}

.legal-grid a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}

.privacy-copy h3:not(:first-child) {
  margin-top: 28px;
}

.privacy-copy .legal-note {
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(255, 250, 242, 0.5);
}

.site-footer {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1fr;
  gap: 70px;
  padding: 80px 5vw 34px;
  color: var(--paper);
  background: #080706;
}

.footer-brand .brand {
  color: var(--paper);
}

.footer-brand p {
  max-width: 360px;
  margin-top: 26px;
  color: rgba(255, 250, 242, 0.55);
}

.site-footer > div:not(.footer-brand):not(.footer-bottom) {
  display: grid;
  align-content: start;
  gap: 11px;
}

.site-footer h2 {
  margin-bottom: 15px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer a,
.site-footer address {
  color: rgba(255, 250, 242, 0.66);
  font-size: 0.82rem;
  font-style: normal;
}

.site-footer a:hover {
  color: var(--gold);
}

.footer-person {
  display: grid;
  gap: 3px;
  margin-bottom: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--light-line);
}

.footer-person b {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1rem;
}

.footer-person small {
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-bottom {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--light-line);
  color: rgba(255, 250, 242, 0.4);
  font-size: 0.7rem;
}

.mobile-contact-rail {
  display: none;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes steam {
  0% { transform: translateY(30px) scaleX(1); opacity: 0; }
  35% { opacity: 0.55; }
  100% { transform: translateY(-80px) scaleX(4); opacity: 0; }
}

@keyframes formIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: auto auto 1fr;
  }

  .nav-toggle {
    display: grid;
    grid-template-columns: auto 16px;
    align-items: center;
    gap: 4px 10px;
    margin-left: auto;
    padding: 10px 12px;
    border: 0;
    color: var(--paper);
    background: none;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .nav-toggle span {
    grid-row: 1 / 3;
  }

  .nav-toggle i {
    width: 16px;
    height: 1px;
    background: var(--gold);
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100vh - 120px);
    padding: 12px;
    overflow-y: auto;
    border: 1px solid rgba(229, 163, 60, 0.25);
    border-radius: 18px;
    background: #100e0c;
  }

  .site-nav.open {
    display: grid;
  }

  .site-nav > a,
  .site-nav summary {
    display: block;
    padding: 14px;
  }

  .nav-panel {
    position: static;
    width: 100% !important;
    padding: 6px 6px 10px 18px;
    transform: none;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .hero {
    grid-template-columns: 1fr 0.9fr;
  }

  .buyer-grid,
  .assurance-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process-grid {
    grid-template-columns: 1fr 1fr;
  }

  .enquiry-section {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4vw;
  }
}

@media (max-width: 900px) {
  .section {
    padding: 90px 24px;
  }

  .hero,
  .page-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 150px;
  }

  .hero-visual {
    min-height: auto;
    margin-top: 70px;
  }

  .hero-media,
  .page-manifest {
    margin-right: auto;
    margin-left: auto;
  }

  .live-feature,
  .proof-section,
  .faq-section,
  .enquiry-section,
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .live-copy {
    padding: 50px 0 0;
  }

  .enquiry-intro {
    position: static;
  }

  .contact-team-grid {
    grid-template-columns: 1fr;
  }

  .price-grid {
    grid-template-columns: 1fr;
  }

  .price-card {
    min-height: 190px;
  }

  .visual-story-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 300px;
  }

  .visual-card-large,
  .visual-card-wide {
    grid-column: span 1;
  }

  .visual-card-large {
    grid-row: span 2;
  }

  .account-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  body {
    padding-bottom: 58px;
  }

  .site-header {
    top: 10px;
    right: 10px;
    left: 10px;
    min-height: 62px;
    padding: 6px 8px 6px 10px;
    border-radius: 18px;
  }

  .brand {
    min-width: 0;
  }

  .brand img {
    width: 40px;
    height: 40px;
  }

  .brand b {
    font-size: 0.95rem;
  }

  .brand small {
    display: none;
  }

  .header-actions .button {
    display: none;
  }

  .lang-link {
    width: 38px;
    height: 38px;
  }

  h1 {
    font-size: clamp(3.4rem, 17vw, 5.1rem);
  }

  h2 {
    font-size: clamp(2.45rem, 12vw, 3.5rem);
  }

  .section {
    padding: 74px 18px;
  }

  .hero,
  .page-hero {
    padding-top: 130px;
  }

  .page-hero h1 {
    overflow-wrap: normal;
    hyphens: none;
    font-size: clamp(2.8rem, 11.5vw, 3.2rem);
  }

  .account-card h2 {
    overflow-wrap: normal;
    hyphens: none;
    font-size: 2.15rem;
  }

  .hero {
    padding-right: 18px;
    padding-left: 18px;
  }

  .button-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .button {
    width: 100%;
    min-height: 54px;
  }

  .hero-media {
    min-height: 570px;
    border-radius: 27px;
  }

  .hero-media img {
    object-position: 67% center;
  }

  .hero-media::after {
    inset: 10px;
    border-radius: 20px;
  }

  .hero-media-caption {
    top: 26px;
    right: 24px;
    left: 24px;
    max-width: 250px;
  }

  .hero-media-caption strong {
    font-size: 2.35rem;
  }

  .hero-origin-badge {
    top: 22px;
    right: 20px;
    transform: scale(0.86);
    transform-origin: top right;
  }

  .hero-service-strip {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .hero-service-strip span {
    min-height: 78px;
    padding: 12px 9px;
    font-size: 0.59rem;
  }

  .trust-bar {
    grid-template-columns: 1fr 1fr;
    padding: 10px 14px;
  }

  .trust-bar span {
    min-height: 44px;
    padding: 5px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.59rem;
  }

  .trust-bar span:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .buyer-grid,
  .assurance-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .visual-story-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 310px;
  }

  .visual-card-large {
    grid-row: span 1;
  }

  .buyer-card {
    min-height: 260px;
  }

  .live-stage {
    width: min(360px, 88vw);
    height: min(360px, 88vw);
  }

  .live-center {
    width: 180px;
    height: 180px;
  }

  .live-center b {
    font-size: 2.7rem;
  }

  .check-list {
    grid-template-columns: 1fr;
  }

  .cuisine-row {
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    min-height: 104px;
  }

  .cuisine-row h3 {
    font-size: 1.7rem;
  }

  .cuisine-row small {
    font-size: 0.58rem;
    line-height: 1.45;
  }

  .cuisine-row em {
    display: none;
  }

  .process-card {
    min-height: 235px;
  }

  .process-card span {
    margin-bottom: 50px;
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat {
    min-height: 140px;
  }

  .price-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .enquiry-form {
    min-height: 620px;
    padding: 22px 16px;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .field-grid label.wide {
    grid-column: auto;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .form-actions .button {
    margin-left: 0;
  }

  .form-actions .text-button {
    min-height: 42px;
  }

  .page-manifest {
    padding: 21px;
    border-radius: 25px;
  }

  .manifest-center {
    min-height: 230px;
  }

  .manifest-center strong {
    font-size: 2.3rem;
  }

  .manifest-metrics span {
    padding: 0 7px;
    font-size: 0.51rem;
  }

  .manifest-metrics b {
    font-size: 1rem;
  }

  .estimate-banner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .estimate-banner b {
    justify-self: start;
  }

  .restaurant-invitation {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .restaurant-invitation .button {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .case-numbers {
    grid-template-columns: 1fr;
  }

  .case-numbers span {
    border-right: 0;
    border-bottom: 1px solid var(--light-line);
  }

  .quality-row {
    grid-template-columns: 45px 1fr;
    gap: 12px;
    padding: 22px 0;
  }

  .quality-row p {
    grid-column: 2;
  }

  .menu-line {
    grid-template-columns: 38px 1fr;
    gap: 14px;
    padding: 24px 0;
  }

  .menu-line > b {
    grid-column: 2;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 62px 22px 28px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .mobile-contact-rail {
    position: fixed;
    z-index: 200;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 5px;
    border: 1px solid rgba(229, 163, 60, 0.34);
    border-radius: 16px;
    background: rgba(11, 11, 11, 0.95);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .mobile-contact-rail a {
    padding: 10px 6px;
    color: var(--paper);
    border-right: 1px solid var(--light-line);
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
  }

  .mobile-contact-rail a:first-child {
    color: var(--ink);
    border-radius: 11px;
    background: var(--gold);
  }

  .mobile-contact-rail a:last-child {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* ---------- Instant Angebot calculator -------------------------------------
   Built from the existing token set and component vocabulary: no new colours,
   no new typeface. Lives on a dark band, so it inherits the form styling
   already scoped to .section-dark. */

.calc-section {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.calc {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.calc-controls {
  display: grid;
  gap: 22px;
}

.calc-result {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(229, 163, 60, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  min-height: 280px;
  display: grid;
  align-content: start;
  gap: 18px;
}

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.calc-table td {
  padding: 11px 0;
  border-bottom: 1px solid var(--light-line);
  vertical-align: top;
}

.calc-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calc-table small {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 250, 242, 0.55);
}

.calc-table .calc-sub td {
  padding-top: 16px;
  font-weight: 700;
  border-bottom: 1px solid rgba(229, 163, 60, 0.3);
}

.calc-table .calc-vat td {
  color: rgba(255, 250, 242, 0.66);
  border-bottom: 0;
  padding: 5px 0;
  font-size: 0.85rem;
}

.calc-total {
  display: grid;
  gap: 4px;
  padding-top: 6px;
}

.calc-total span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold);
}

.calc-total b {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.calc-total small {
  font-size: 0.8rem;
  color: rgba(255, 250, 242, 0.62);
}

.calc-min {
  margin: 0;
  color: rgba(255, 250, 242, 0.72);
}

.calc-result .button {
  justify-self: start;
}

@media (max-width: 900px) {
  .calc {
    grid-template-columns: 1fr;
  }
}

/* ---------- Dish catalogue --------------------------------------------------
   Uses the hairline-divider pattern already established by .process-grid and
   .stat-grid: a 1px gap over a --line background. No new colours. */

.dish-section {
  display: grid;
  gap: clamp(1.8rem, 3vw, 3rem);
}

.dish-filters {
  display: grid;
  gap: 20px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.dish-count {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brick);
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.dish {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px 22px 20px;
  background: var(--paper);
}

.dish h3 {
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.15;
}

.dish p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.dish-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.dish-tags li {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.dish-tags li.is-halal {
  border-color: rgba(229, 163, 60, 0.5);
  color: var(--brick);
}

.dish[hidden] {
  display: none;
}

.dish-empty {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 620px) {
  .dish-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Keyboard focus -------------------------------------------------
   The site had exactly one :focus-visible rule (.choice-chip). Every other
   interactive component fell back to the UA ring, which is close to invisible
   on a --gold fill or the near-black footer. These reuse the --orange outline
   the choice-chip already established, so the treatment is consistent with
   what was already there. */

.button:focus-visible,
.button-small:focus-visible,
.button-outline:focus-visible,
.button-dark:focus-visible,
.text-link:focus-visible,
.text-button:focus-visible,
.buyer-card:focus-visible,
.cuisine-row:focus-visible,
.quality-row:focus-visible,
.menu-line:focus-visible,
.nav-panel a:focus-visible,
.site-nav summary:focus-visible,
.lang-link:focus-visible,
.faq-item summary:focus-visible,
.download-links a:focus-visible,
.mobile-contact-rail a:focus-visible,
.brand:focus-visible,
.skip-link:focus-visible,
.dish-tags a:focus-visible,
.footer-contacts a:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On the dark bands the orange ring is low-contrast against --ink, so the
   focused element gets a light halo behind the ring as well. */
.section-dark .button:focus-visible,
.section-dark .text-link:focus-visible,
.site-footer a:focus-visible,
.mobile-contact-rail a:focus-visible {
  outline-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(250, 244, 234, 0.22);
}

/* Current page in the navigation — previously not indicated at all. */
.site-nav a[aria-current="page"],
.site-footer a[aria-current="page"] {
  color: var(--gold);
}

.site-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  background: var(--gold);
  border-radius: 2px;
}

/* ---------- Location-Check --------------------------------------------------
   Reuses .choice-chip for the inputs and the hairline-divider pattern for the
   results. Verdict colours come from the existing token set: gold = fine,
   brick = talk to us. */

.loc-section { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.loc {
  display: grid;
  gap: 22px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.loc-out { display: grid; gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden; }
.loc-out:has(.loc-empty) { background: none; }
.loc-empty { margin: 0; padding: 10px 2px; color: var(--muted); }

.loc-item { background: var(--paper); padding: 16px 18px; display: grid; gap: 5px; }
.loc-item b { font-family: var(--serif); font-size: 1.1rem; }
.loc-item p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

.loc-item i {
  font-style: normal;
  justify-self: start;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 2px;
}
.loc-item.v-ok   i { background: rgba(229, 163, 60, .18); color: #6b4708; }
.loc-item.v-plan i { background: rgba(229, 163, 60, .32); color: #5a3b06; }
.loc-item.v-talk i { background: rgba(189, 66, 33, .14); color: var(--brick); }
.loc-item.v-talk { border-left: 3px solid var(--brick); }

.loc-cta { padding-top: 4px; }

/* ---------- Quantity calculator -------------------------------------------- */
.qty-section { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.qty {
  display: grid; gap: 22px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.qty-out {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden;
}
.qty-cell { background: var(--paper); padding: 18px; display: grid; gap: 4px; align-content: start; }
.qty-cell b {
  font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1; letter-spacing: -.02em;
}
.qty-cell span {
  font-size: .62rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.qty-cell small { font-size: .78rem; color: var(--muted); }
.qty-cta { grid-column: 1 / -1; background: var(--paper); padding: 18px; }

/* ---------- Specimen documents --------------------------------------------- */
.docs-section { display: grid; gap: clamp(1.4rem, 2.5vw, 2.2rem); }
.doc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); overflow: hidden;
}
.doc-head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px; padding: clamp(18px, 2.5vw, 26px);
  border-bottom: 1px solid var(--line);
}
.doc-head span {
  display: block; font-size: .6rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brick); margin-bottom: 5px;
}
.doc-head b { display: block; font-family: var(--serif); font-size: 1.15rem; }
.doc-head small { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.doc .table-wrap { border: 0; border-radius: 0; }

/* ---------- Station planner ------------------------------------------------- */
.plan-section { display: grid; gap: clamp(1.4rem, 2.5vw, 2.2rem); }
.plan {
  display: grid; gap: 22px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.plan-out {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden;
}
.plan-cell { background: var(--paper); padding: 16px 18px; display: grid; gap: 3px; }
.plan-cell span {
  font-size: .6rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.plan-cell b { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.plan-svg svg { width: 100%; height: auto; display: block; border-radius: 14px; }
.plan-legend {
  margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  font-size: .72rem; color: var(--muted);
}
.plan-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.lg-station { background: var(--brick); }
.lg-chef    { background: rgba(189, 66, 33, .25); }
.lg-buffet  { background: var(--gold); }
.lg-queue   { background: rgba(11, 11, 11, .1); }
.plan-actions button.text-link { background: none; border: 0; cursor: pointer; font: inherit; }

@media print {
  .site-header, .site-footer, .mobile-contact-rail, .plan-controls,
  .plan-actions, .trust-bar { display: none !important; }
  .plan, .process-card { break-inside: avoid; }
  body { background: #fff; }
}

/* ---------- Guides ---------------------------------------------------------- */
.guide-body { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); max-width: 1540px; }
.guide-byline {
  display: grid; gap: 3px; padding: 16px 20px;
  border-left: 3px solid var(--gold); background: var(--paper);
  border-radius: 0 14px 14px 0;
}
.guide-byline b { font-family: var(--serif); font-size: 1.05rem; }
.guide-byline small, .guide-byline time { color: var(--muted); font-size: .8rem; }
.guide-article { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); max-width: 68ch; }
.guide-block h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-bottom: .6rem; letter-spacing: -.02em;
}
.guide-block p { margin: 0 0 .9rem; color: var(--muted); font-size: 1.02rem; line-height: 1.72; }
.guide-block p:last-child { margin-bottom: 0; }

/* ---------- Light-context form controls ------------------------------------
   BUG FIX. The original form vocabulary (.choice-chip, .field-group > span,
   .field-grid label span, inputs and selects) was written for the dark
   .enquiry-section and hard-codes near-white text on a light hairline:

       .choice-chip span   { color: rgba(255,250,242,.72) }
       .field-group > span { color: rgba(255,250,242,.62) }

   That is correct on --ink but invisible on --paper. The dish filters, the
   Location-Check, the quantity calculator and the station planner all sit on
   light panels, so their chips and labels rendered as blank space.

   These overrides are scoped to the four light containers ONLY, so the dark
   enquiry form's appearance is untouched. */

.dish-filters .field-group > span,
.loc .field-group > span,
.qty .field-grid label > span,
.plan .field-grid label > span {
  color: var(--muted);
}

.dish-filters .choice-chip span,
.loc .choice-chip span {
  color: var(--muted);
  border-color: var(--line);
  background: #fff;
}

.dish-filters .choice-chip input:checked + span,
.loc .choice-chip input:checked + span {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--gold);
}

.dish-filters .choice-chip span:hover,
.loc .choice-chip span:hover {
  border-color: var(--gold);
  color: var(--ink);
}

/* Inputs and selects in the light panels: the global rule paints them
   near-white on a translucent white fill, which is unreadable here. */
.qty input, .qty select,
.plan input, .plan select,
.dish-filters input[type="text"], .dish-filters select {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}
.qty select, .plan select { color-scheme: light; }

.qty input:focus, .qty select:focus,
.plan input:focus, .plan select:focus {
  border-color: var(--gold);
  background: #fff;
}

/* ---------- Guide hero image ------------------------------------------------ */
.guide-hero-image {
  margin: 0;
  max-width: 1540px;
  padding: 0 5vw;
  margin-inline: auto;
}
.guide-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  filter: saturate(0.95) contrast(1.02);
}
@media (max-width: 900px) { .guide-hero-image { padding: 0 24px } }
@media (max-width: 620px) { .guide-hero-image { padding: 0 18px } }

/* ---------- Material overlays ----------------------------------------------
   Linen ground, slate grain on dark bands, jali lattice in the footer.

   Every one of these is a ::before pseudo-element, never an extra layer inside
   an existing `background` shorthand. That is deliberate: if the image 404s or
   the browser cannot decode it, the pseudo-element simply paints nothing and
   the original gradient is untouched. Folding them into the existing shorthand
   would take the gradients down with them.

   image-set() carries the AVIF; the plain url() above it is the WebP fallback
   for engines that cannot parse image-set. ?t= is the manual cache lever —
   these are referenced from static CSS, so they cannot use the PHP $V token. */

/* The linen ground is a background LAYER on body, not a pseudo-element.
   A ::before at z-index:-1 only paints where no element has its own background
   -- measured at 4.3% of the homepage -- because block backgrounds paint above
   the negative-z-index layer. As a body background layer it sits exactly where
   the cream sits today, and anything that covers the cream covers it too.

   background-image is declared once. If the file 404s that layer paints
   nothing and the gradient plus background-color still render, so the ground
   cannot be lost. The texture is pre-lightened (80% blended to white) so the
   multiply blend reads as weave rather than as a colour cast; it tiles at its
   natural 560px, which avoids background-attachment:fixed and the scroll cost
   that carries on mobile. */
body {
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 8% 14%, rgba(229, 163, 60, 0.08), transparent 24rem),
    url("approved/texture-linen.webp?t=3");
  background-repeat: no-repeat, repeat;
  background-size: auto, 560px 560px;
  background-blend-mode: normal, multiply;
}

.section-dark, .cta-card { isolation: isolate; }
.section-dark::before, .cta-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("approved/texture-slate.webp?t=1");
  background-image: image-set(
    url("approved/texture-slate.avif?t=1") type("image/avif"),
    url("approved/texture-slate.webp?t=1") type("image/webp"));
  mix-blend-mode: soft-light;
}
.cta-card::before { border-radius: var(--radius); }

/* The lattice is a true 256px tile — the source was a 2x2 repeat of it, so a
   plain background-repeat reconstructs the original artwork exactly. */
.site-footer { position: relative; isolation: isolate; }
.site-footer::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.07;
  background-image: url("approved/pattern-jali.webp?t=1");
  background-repeat: repeat;
  background-size: 256px 256px;
}

@media print {
  .section-dark::before,
  .cta-card::before, .site-footer::before { display: none !important; }
}

/* ---------- Check-list: light-section fix + icon variant ---------------------
   DEFECT: .check-list li was written with dark-section values
   (color rgba(255,250,242,.84) on border --light-line) but every actual use is
   inside a plain .section, i.e. near-white text on the cream ground. It was
   effectively invisible on 14 district/document routes. Same failure class as
   the .choice-chip span bug. The original values are kept for .section-dark so
   any future dark-band use still renders correctly. */
.check-list li {
  color: rgba(11, 11, 11, 0.82);
  border-top: 1px solid var(--line);
}
.section-dark .check-list li {
  color: rgba(255, 250, 242, 0.84);
  border-top: 1px solid var(--light-line);
}

/* Icon variant — the ✓ is replaced by the matching line icon. */
.check-list.check-icons li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-left: 0;
  min-height: 52px;
}
.check-list.check-icons li::before { content: none; }
.check-list.check-icons img {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  opacity: 0.92;
}
@media (max-width: 620px) {
  .check-list.check-icons img { width: 26px; height: 26px }
}

/* FAQ rows carrying a leading icon. The base .faq-item summary is a two-column
   grid (question | +); this variant inserts the icon column in front and wraps
   the question in <b> so it stays one grid cell. */
.faq-item-icon summary { grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.faq-item-icon summary img { width: 26px; height: 26px; opacity: .9; }
.faq-item-icon summary b { font-weight: 700; }
@media (max-width: 620px) {
  .faq-item-icon summary { gap: 12px }
  .faq-item-icon summary img { width: 22px; height: 22px }
}

/* Trust bar: the <i> dot slots now carry line icons. */
.trust-bar img { width: 22px; height: 22px; flex: 0 0 auto; opacity: .92; }
@media (max-width: 900px) { .trust-bar img { width: 19px; height: 19px } }

/* Footer address gains a pin. */
.site-footer address { display: flex; align-items: center; gap: 9px; }
.site-footer address img { width: 20px; height: 20px; flex: 0 0 auto; opacity: .8; }

/* ---------- Photo-only manifest panel ---------------------------------------
   .page-manifest takes its height from the manifest-top/center/metrics blocks
   inside it. The district pages put ONLY a <picture> in there, and that image
   is position:absolute — so the box collapsed to its own 28px padding and
   rendered as a thin dark bar. This variant gives it a real box ratio and
   treats the image as the subject rather than as a backdrop behind text:
   the heavy dimming exists to keep manifest copy legible, and there is no
   copy here to keep legible. */
.page-manifest-solo {
  aspect-ratio: 760 / 950;
  padding: 0;
}
.page-manifest-solo img {
  opacity: 1;
  filter: saturate(0.92) contrast(1.02);
}
.page-manifest-solo::after {
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.05) 40%, rgba(8, 6, 5, 0.42)),
    linear-gradient(135deg, transparent 55%, rgba(82, 37, 22, 0.22));
}
@media (max-width: 900px) {
  .page-manifest-solo { aspect-ratio: 4 / 3 }
}

/* ---------- .button-outline on light sections -------------------------------
   .button-outline was written for dark bands (the homepage .live-feature) and
   sets color: var(--paper). _partials/cuisine-dishes.php reuses it inside a
   plain cream .section, where near-white on cream measures 1.05:1 — the
   "Alle N Gerichte ansehen" CTA was effectively invisible on 12 routes.

   Same shape as the .check-list fix: make the light context the default and
   restore the light-on-dark values only where the ground is actually dark.
   :hover is untouched — it fills with --orange, where --ink is correct in
   both contexts. */
.button-outline { color: var(--ink); }
.section-dark .button-outline,
.cta-card .button-outline,
.enquiry-section .button-outline,
.site-footer .button-outline { color: var(--paper); }

/* ---------- Footer legal line contrast --------------------------------------
   .footer-bottom carries the copyright and the USt-IdNr — a legal disclosure —
   at rgba(255,250,242,.4) on #080706, which measures 3.64:1 and fails WCAG AA.
   .50 gives 5.15:1 and is still visibly a de-emphasised line. */
.footer-bottom { color: rgba(255, 250, 242, 0.5); }

/* ---------- --muted on dark bands -------------------------------------------
   The mirror of the .check-list / .button-outline bugs. --muted (#70685f) is a
   LIGHT-section body colour; .section-heading > p and .fine-print inherit it
   inside the dark calculator band, where it measures 3.47:1 on rgb(21,15,12).
   That is the calculator's own intro line and its price disclaimer — the two
   sentences a buyer most needs to read.

   Scoped to .section-dark only, so all 29 other --muted usages are untouched.
   .62 matches the alpha the dark form already uses for secondary text. */
.section-dark .section-heading > p:last-child,
.section-dark .fine-print {
  color: rgba(255, 250, 242, 0.62);
}

/* Price ladder: gross is the headline figure (PAngV Gesamtpreis), the net
   amount sits beneath it, visibly subordinate, for the business reader. */
.table-wrap td b { display: block; font-weight: 700; }
.table-wrap td small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.72rem; font-weight: 400; }

/* ---------- Calculator table on small screens --------------------------------
   The global `table { min-width: 580px }` exists so the wide 4-column price
   ladders stay readable, and .table-wrap gives those tables overflow-x:auto to
   scroll in. The calculator builds its table straight into .calc-result, which
   is NOT a .table-wrap — so at 375px the 580px table ran to x=619 while
   body{overflow-x:hidden} clipped it, putting all seven line-item prices
   permanently off screen with no way to scroll to them. Measured, not guessed.

   The calc table is two columns; it never needed 580px. Reset the floor and
   keep overflow-x:auto as a belt-and-braces fallback for very long labels. */
.calc-table { min-width: 0; }
.calc-result { overflow-x: auto; }

/* ---------- Hiding the form after a successful send --------------------------
   app.js sets .hidden = true on the fieldsets and the progress bar once an
   enquiry is accepted. The hidden attribute's UA rule is display:none at the
   lowest specificity, so `.form-progress { display: grid }` and
   `.form-step.active { display: block }` both beat it — the customer kept
   seeing their filled-in form with the submit button re-enabled, and pressing
   it again produced a duplicate lead and a duplicate confirmation mail. */
.form-step[hidden],
.form-progress[hidden] { display: none !important; }

/* ---------- Form fields: a real focus ring ----------------------------------
   input/select/textarea set `outline: 0` and signalled focus only by changing
   border-colour, which is not a visible focus indicator for a keyboard user
   (WCAG 2.4.7). Reuses the same --orange ring the buttons and chips already
   use, so it looks native. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ---------- Small gold labels on light grounds ------------------------------
   .eyebrow is --gold (#e5a33c) at ~12px. On the cream and paper grounds that
   measures 1.99:1 and 2.10:1 — well under the 4.5:1 WCAG AA needs for small
   text, on ~50 pages including the line that introduces the Impressum.

   #8f5a10 is the same hue, darkened until it clears AA on all three light
   grounds (5.28 on cream, 5.56 on paper, 4.68 on the sand panel). The bright
   --gold is kept wherever the ground is dark, so the brand accent is unchanged
   everywhere it was already legible. */
:root { --gold-on-light: #8f5a10; }
.eyebrow { color: var(--gold-on-light); }
/* Every component that paints its own dark ground keeps the bright --gold.
   This list is derived from the stylesheet, not guessed: a first pass missed
   .restaurant-invitation (ink) and .account-card (brown) and put the dark gold
   on a dark ground, which measured 3.41:1 and 2.23:1 — worse than before. */
.section-dark .eyebrow,
.cta-card .eyebrow,
.enquiry-section .eyebrow,
.enquiry-form .eyebrow,
.site-footer .eyebrow,
.site-header .eyebrow,
.page-manifest .eyebrow,
.restaurant-invitation .eyebrow,
.account-card .eyebrow,
.case-study-card .eyebrow,
.calc .eyebrow,
.mobile-contact-rail .eyebrow { color: var(--gold); }

/* ---------- Last two AA gaps ------------------------------------------------
   --muted (#70685f) clears AA on the cream and paper grounds (5.01 / 5.27) but
   lands at 4.44 on the sand .proof-section panel, where the body copy and the
   stat labels sit. #6a6259 is the same neutral one step darker and clears all
   three (5.48 / 5.77 / 4.86) without reading as a different colour.

   The form's step numbers were rgba(...,.45) on #181818 = 4.37; .50 gives 5.09. */
:root { --muted: #6a6259; }
.form-progress span { color: rgba(255, 250, 242, 0.5); }


/* Mobile rail: a written-quote path first (audit 2026-08-30 — the header
   Angebot button is hidden <=620px, so the rail was phone/WhatsApp-only), and
   labels lifted above the legibility floor. */
.mobile-contact-rail { grid-template-columns: repeat(4, 1fr); }
.mobile-contact-rail a { font-size: .72rem; }
.mobile-contact-rail a[data-track="quote"] { background: var(--gold, #c8963e); color: #1d1710; font-weight: 700; }