/* Struma Mega Hub — "service area signage"
   ------------------------------------------------------------------
   The audience decides whether to pull in while they are driving, so the
   page borrows motorway sign language: solid colour panels, pictograms,
   distance strips. Light rather than dark on purpose — the page is read
   in a sunlit cab far more often than at a desk.

   Every colour comes from the logo (see the palette below), so the sign
   panels are the brand teal rather than motorway blue.

   The compiled Tailwind bundle is no longer loaded. The app bundle still
   toggles a handful of Tailwind class names at runtime, so those are
   redefined under "runtime classes" at the bottom of this file. Removing
   any of them breaks the sliders, tabs or the detail sheet.
   ------------------------------------------------------------------ */

:root {
  /* Palette taken straight from the logo: the mark runs #35847e -> #24303b and
     the swoosh is #f50. Those three carry the whole page — teal is the brand
     surface, charcoal the deep sections and the body ink, orange every accent
     and call to action. */
  --sign: #35847e;          /* logo teal — primary surface */
  --sign-ink: #24303b;      /* logo charcoal — deep surface, wordmark colour */
  --sign-lit: #3f9a92;      /* hover teal */
  --sign-bar: #e4f0ee;      /* pale teal for the top bar — the logo keeps its
                               own colours only on a light surface */
  --paper: #f2f5f5;         /* page white, warmed slightly toward the teal */
  --paper-pure: #ffffff;
  --asphalt: #1b232b;       /* photo scrims, sits just under the charcoal */
  --marking: #ff5500;       /* logo orange — accents and CTAs */
  --marking-lit: #ff7733;
  --line: #d3dcdd;          /* hairline */
  --ink: #24303b;           /* body text is the logo charcoal */
  --ink-soft: #5d6b74;      /* secondary text */

  /* Service hues. The bundle hardcodes four badge classes, so rather than fight
     it these are drawn from the logo's own two poles: two teals and two oranges,
     far enough apart to stay tellable at a glance. */
  --svc-motel: #35847e;
  --svc-grill: #ff5500;
  --svc-parking: #1d5b52;
  --motorway: #15614b;      /* road-sign green, held to the same deep teal family */
  --svc-store: #c0721a;   /* deepened from the logo's amber: the lighter tone
                             only reached 2.2:1 as a glyph on white */

  /* Type */
  --display: "Fira Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Fira Sans", system-ui, -apple-system, sans-serif;
  --mono: "Fira Mono", ui-monospace, "Courier New", monospace;

  /* Scale — a signage scale: few sizes, big jumps, tight tracking up top */
  --t-mega: clamp(2.75rem, 9vw, 6.5rem);
  --t-xl: clamp(2rem, 5vw, 3.5rem);
  --t-lg: clamp(1.5rem, 3vw, 2.25rem);
  --t-md: 1.125rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-micro: 0.6875rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --stack: clamp(3.5rem, 9vw, 7rem);
  --bar-h: 65px;          /* height of the sticky top bar; the menu page's
                             jump list parks directly under it */
  --radius: 6px;          /* signs have small, consistent corner radii */
  --radius-lg: 14px;
  --sheet-max: 1200px;
}

/* ---------------------------------------------------------------- reset */

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

/* --------------------------------------------------------------- icons

   Every icon is drawn on a 24-unit grid but rendered anywhere from 12px to
   42px, so a stroke-width baked into the markup lands somewhere different on
   screen each time: measured across the page it ran from 1.50px on the
   language chevron to 3.85px on the form's success tick. Seven different
   values were in use. That, more than any drawing, is why they did not read
   as one set.

   non-scaling-stroke takes the scaling out of it - the stroke is laid down at
   the width named here regardless of how big the icon is drawn - so one number
   governs the whole set and the markup no longer carries a weight at all. */
svg [stroke],
svg path,
svg circle,
svg rect,
svg line,
svg polyline,
svg ellipse {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg { stroke-width: 1.7px; }

/* Two deliberate exceptions. Below ~14px a 1.7px stroke starts to look like a
   smudge rather than a line, and a 42px confirmation mark drawn at UI weight
   looks broken rather than quiet. */
.lang__btn svg,
.plate__cta svg { stroke-width: 1.55px; }
.success svg    { stroke-width: 2.4px; }


h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

:focus-visible {
  outline: 3px solid var(--marking);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: 100%;
  max-width: var(--sheet-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* --------------------------------------------------------- eyebrow/label */

/* Used for anything that behaves like sign lettering: small, wide, caps. */
.plate-label {
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.datum {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------- gantry bar */

.gantry {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--sign-bar);
  color: var(--ink);
  border-bottom: 3px solid var(--marking);
}

.gantry__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  min-height: 62px;
  padding-block: 0.5rem;
}

.gantry__mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}

/* The supplied colour mark, unmodified and with no tile behind it. */
.gantry__mark img { width: 46px; height: 46px; flex: none; }

.gantry__name {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

.gantry__name b {
  font-family: var(--display);
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gantry__name span {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: #4a6b67;
  margin-top: 3px;
  white-space: nowrap;
}

/* Road shield — the A3 marker, drawn rather than imported */
.shield {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.55rem;
  border: 2px solid #235f5a;
  border-radius: 4px;
  color: #235f5a;   /* the plain brand teal only reached 3.8:1 on the pale bar */
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

@media (min-width: 900px) { .shield { display: inline-flex; } }

/* Motorway plate.

   Set in caps with letter-spacing, "А3" reads as "АЗ" - the Bulgarian word for
   "I" - because capital З and the digit 3 are near-identical glyphs. No amount
   of tracking fixes that; the shape has to say "road number". So it is drawn
   the way European route shields are drawn: coloured field, white keyline,
   white numeral. The keyline is what lets one plate work on the pale bar and
   on the dark hero band without a second variant. */
.mw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 0.18em 0.4em;
  border-radius: 3px;
  background: var(--motorway);
  /* White keyline inside, dark hairline outside. The green field is only
     1.67:1 against the teal hero band, so the plate cannot rely on its fill
     to detach - the double edge is what makes it read on every surface. */
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.96),
    0 0 0 1px rgba(9, 26, 22, 0.38);
  color: #fff;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;          /* the tracking around it is what caused the misread */
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* Larger against the hero band, where it is the first thing read and has the
   room for it. */
.hero__route .mw {
  font-size: 1rem;
  padding: 0.2em 0.45em;
}

/* The road's name beside its number, the way the sign itself is laid out. It is
   the first thing to go when the band gets narrow: on a phone the plate alone
   still carries the meaning, and a wrapped eyebrow costs more than it gives. */
.mw-name,
.mw-sep { display: none; }

@media (min-width: 760px) {
  .mw-name,
  .mw-sep { display: inline; }
  .mw-sep { opacity: 0.55; }
}


.gantry__actions { display: flex; align-items: center; gap: 0.5rem; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.75rem;
  border-radius: var(--radius);
  background: rgba(44, 111, 106, 0.12);
  color: #235f5a;
  text-decoration: none;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.icon-btn:hover { background: rgba(44, 111, 106, 0.22); }
.icon-btn svg { width: 18px; height: 18px; flex: none; }
.icon-btn--solid { background: var(--marking); color: #16202a; }
.icon-btn--solid:hover { background: #ff7733; }
.icon-btn__text { display: none; }

@media (min-width: 720px) { .icon-btn__text { display: inline; } }

/* language selector */
.lang { position: relative; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding-inline: 0.6rem;
  border-radius: var(--radius);
  background: rgba(44, 111, 106, 0.12);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-xs);
}

.lang__btn:hover { background: rgba(44, 111, 106, 0.22); }

.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(36, 48, 59, 0.22);
  overflow: hidden;
  z-index: 70;
}

.lang__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  text-align: left;
  font-size: var(--t-sm);
  color: var(--ink);
}

.lang__opt:hover { background: var(--paper); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(520px, 76vh, 760px);
  background: var(--asphalt);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; z-index: 0; }

/* The bundle moves this with translateX(-index * 25%), which is a percentage of
   the TRACK. So the track has to be 4 slides wide and each slide a quarter of
   it — at flex: 0 0 100% every step would jump four slides at once. */
.hero__track {
  display: flex;
  width: 400%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__slide { position: relative; flex: 0 0 25%; height: 100%; }

.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Scrim: weighted to the bottom-left, which is where the type sits. The photo
   stays readable across the top where there is nothing over it. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(15, 18, 24, 0.5) 0%, rgba(15, 18, 24, 0.12) 30%, rgba(10, 13, 19, 0.88) 100%),
    radial-gradient(120% 90% at 50% 78%, rgba(20, 34, 38, 0.6), transparent 70%);
}

.hero__body {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 10vw, 5.5rem) clamp(2rem, 5vw, 3.25rem);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.15rem;
}

/* Route badge — all that remains of the sign panel up here. */
.hero__route {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.7rem;
  background: var(--sign);
  border-left: 4px solid var(--marking);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__title {
  font-size: clamp(2.25rem, 5.6vw, 4.25rem);
  letter-spacing: -0.025em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  /* Sized for the longest of the five headlines: Greek runs 64 characters
     against Bulgarian's 54, and at a narrower cap only Greek fell to three
     lines. Balance keeps the pair even instead of leaving a stray word. */
  max-width: 31ch;
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: #e2eae9;
  max-width: 46ch;
  margin-inline: auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* ------- signature: the services strip under the photo -------
   A gantry board flattened into a bar. Still the primary way in. */
.hero__strip {
  position: relative;
  z-index: 2;
  background: var(--sign);
  border-top: 3px solid var(--marking);
}

.hero__strip ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--sheet-max);
  margin-inline: auto;
  padding: 0;
  margin-block: 0;
  list-style: none;
}

@media (min-width: 760px) { .hero__strip ul { grid-template-columns: repeat(4, 1fr); } }

.hero__strip li { border-right: 1px solid rgba(255, 255, 255, 0.16); }
.hero__strip li:nth-child(2n) { border-right: 0; }

@media (min-width: 760px) {
  .hero__strip li { border-right: 1px solid rgba(255, 255, 255, 0.16); }
  .hero__strip li:last-child { border-right: 0; }
}

.hero__strip li:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
@media (min-width: 760px) { .hero__strip li:nth-child(-n + 2) { border-bottom: 0; } }

.strip-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 74px;
  padding: 0.75rem clamp(0.75rem, 2vw, 1.25rem);
  color: #fff;
  text-align: left;
  justify-content: center;
  transition: background 0.15s ease;
}

.strip-link:hover { background: rgba(255, 255, 255, 0.1); }

/* White tile, coloured glyph. Filling the tile with --svc instead would sink
   the two teal services into the teal strip behind them. */
.strip-link__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius);
  background: var(--paper-pure);
  color: var(--svc, var(--sign));
}

.strip-link__icon svg { width: 21px; height: 21px; }

.strip-link__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.strip-link__text b {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
}

.strip-link__text span { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.88); }

.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding-inline: 1.5rem;
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:active { transform: scale(0.98); }
.btn svg { width: 19px; height: 19px; }
.btn--primary { background: var(--marking); color: #16202a; box-shadow: 0 10px 26px rgba(255, 85, 0, 0.32); }
.btn--primary:hover { background: #ff7733; }
.btn--ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.24); }
.btn--sign { background: var(--sign); color: #fff; }
.btn--sign:hover { background: var(--sign-lit); }
.btn--block { width: 100%; }

/* hero slider controls */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  backdrop-filter: blur(4px);
}

.hero__arrow:hover { background: rgba(0, 0, 0, 0.55); }
.hero__arrow--prev { left: clamp(0.5rem, 2vw, 1.25rem); }
.hero__arrow--next { right: clamp(0.5rem, 2vw, 1.25rem); }
.hero__arrow svg { width: 20px; height: 20px; }

/* On a phone the headline runs the full width, so vertically centred arrows sit
   on top of it. Move them into the clear photo area near the top instead of
   hiding them — the dots alone are a small target for changing slides. */
@media (max-width: 759px) {
  .hero__arrow {
    top: 74px;
    translate: 0 0;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.45);
  }
}

.hero__dots {
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.75rem);
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

/* Sized here rather than via utility classes: the bundle overwrites these
   buttons' className wholesale, so any classes in the markup are lost on the
   first slide change. Only the element's own selector survives. */
.hero-dot,
.grill-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.2s ease, width 0.2s ease;
}

.hero-dot:hover,
.grill-dot:hover { background: rgba(255, 255, 255, 0.7); }

/* The bundle marks the current slide with .bg-white — widen it into a bar so
   position is readable at a glance, the way a progress tick would be. */
.hero-dot.bg-white,
.grill-dot.bg-white { width: 26px; background: #fff; }

/* ---------------------------------------------------------- section frame */

.band { padding-block: var(--stack); }
.band--paper { background: var(--paper); }
.band--white { background: var(--paper-pure); }
.band--dark { background: var(--asphalt); color: #fff; }

.band__head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }

.band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  background: var(--sign);
  color: #fff;
}

.band--dark .band__eyebrow { background: var(--marking); color: var(--sign-ink); }
.band__title { font-size: var(--t-xl); }
.band__lede { margin-top: 1rem; color: var(--ink-soft); }
.band--dark .band__lede { color: #a8b6b6; }

/* ------------------------------------------------------- service plates */

.plates {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .plates { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .plates { grid-template-columns: repeat(4, 1fr); } }

.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.plate:hover {
  transform: translateY(-4px);
  border-color: var(--svc, var(--sign));
  box-shadow: 0 18px 40px rgba(36, 48, 59, 0.14);
}

/* The ratio lives on the image, not the box. On the box, a source taller than
   4:3 (the store shot is square) still pushes the container open and the cards end
   up uneven. Fixed here so every plate crops to the same window. */
.plate__media { position: relative; display: block; overflow: hidden; background: var(--line); }

.plate__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* colour key strip — matches the badge colour the bundle sets on the sheet */
.plate__key { position: absolute; inset: auto 0 0 0; height: 5px; background: var(--svc, var(--sign)); }

.plate__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--svc, var(--sign));
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.plate__badge svg { width: 22px; height: 22px; }

.plate__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.15rem 1.25rem; flex: 1; }
.plate__title { font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.01em; }
.plate__desc { font-size: var(--t-sm); color: var(--ink-soft); flex: 1; }

/* Text stays charcoal so every service reads at 12:1; the service colour is
   carried by the arrow, the badge and the key strip instead. */
.plate__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plate:hover .plate__cta svg { transform: translateX(4px); }
.plate__cta svg { width: 15px; height: 15px; color: var(--svc, var(--sign)); transition: transform 0.18s ease; }

/* ------------------------------------------------------------ about band */

.about { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }

@media (min-width: 960px) { .about { grid-template-columns: 3fr 2fr; } }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2vw, 1rem); }

.stat {
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--sign);
  color: #fff;
  border-radius: var(--radius-lg);
}

/* The four tiles walk the logo's own gradient, teal through to charcoal. */
.stat:nth-child(2) { background: #2f7570; }
.stat:nth-child(3) { background: #2a5c5c; }
.stat:nth-child(4) { background: var(--sign-ink); }

.stat__value {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;              /* orange on the teal tile measured 1.38:1 */
  line-height: 1;
}

.stat__label { display: block; margin-top: 0.55rem; color: #c3dbd8; }

/* -------------------------------------------------------------- location */

/* Top row only: a short intro beside the map. The two lists that used to sit
   in this column made it 1140px tall against the map's 442px, which is why the
   map read as an afterthought. They now have their own row below. */
.location { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: stretch; }

@media (min-width: 960px) {
  .location { grid-template-columns: 1fr 1.25fr; }
  .location > div:first-child { align-self: center; }
}

/* Second row: the reasons and the hours side by side, full width. */
.location-extra {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 860px) { .location-extra { grid-template-columns: 1.3fr 1fr; } }

.location-extra .band__subtitle { margin-top: 0; }

.factlist { display: grid; gap: 0.9rem; margin-top: 1.75rem; }

.fact {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact svg { width: 22px; height: 22px; color: var(--marking); margin-top: 2px; }
.fact dt { color: #9db3b1; }
.fact dd { margin: 0.25rem 0 0; font-weight: 600; }

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;      /* with a min-height as well, aspect-ratio drives the WIDTH
                       from the height and the map grew wider than the column */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Fill the row rather than holding a fixed ratio: the intro beside it is short,
   so a ratio-locked map left a band of empty space under the text. */
@media (min-width: 960px) {
  .map { aspect-ratio: auto; height: 100%; min-height: 460px; }
}

.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }

/* ---------------------------------------------------------- detail sheet */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(9, 14, 24, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 900px) {
  .sheet { inset: auto 0 0 0; margin-inline: auto; max-width: var(--sheet-max); }
}

.sheet__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--paper-pure);
  border-radius: 18px 18px 0 0;
}

.sheet__badge { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sheet__titles { min-width: 0; flex: 1; }
.sheet__titles h3 { font-size: 1.375rem; text-transform: uppercase; }
.sheet__titles p { font-size: var(--t-xs); color: var(--ink-soft); }

.sheet__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  flex: none;
}

.sheet__close:hover { background: #e4eceb; }
.sheet__close svg { width: 20px; height: 20px; }
.sheet__body { overflow-y: auto; padding: clamp(1.25rem, 4vw, 2rem) var(--gutter) clamp(2rem, 6vw, 3rem); -webkit-overflow-scrolling: touch; }

.split { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

.gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radius); }
.gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

.ticks { display: grid; gap: 0.6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }

.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: var(--t-sm);
}

.ticks svg { width: 18px; height: 18px; color: var(--svc, var(--sign)); margin-top: 3px; }

.card {
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}

.card__title { font-size: 1.25rem; text-transform: uppercase; }
.card__sub { margin-top: 0.35rem; font-size: var(--t-xs); color: var(--ink-soft); }

.field { display: block; margin-top: 1rem; }

.field > span {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field textarea { min-height: 104px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sign);
  background: var(--paper-pure);
}

.field-row { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 0.85rem;
  background: var(--sign);
  color: #fff;
  border-radius: var(--radius);
  font-family: var(--mono);
}

/* menu tabs (grill) */
.tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }

.tab {
  padding: 0.7rem 0.1rem;
  border-bottom: 3px solid transparent;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.menu-group + .menu-group { margin-top: 1.75rem; }

.menu-group__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--svc-grill);
}

.menu-group__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line);
}

.menu-item:last-child { border-bottom: 0; }
.menu-item h5 { margin: 0; font-family: var(--body); font-size: var(--t-sm); font-weight: 600;
  line-height: 1.3; letter-spacing: 0; text-wrap: normal; }   /* dish names wrap; the
  heading reset's 1.02 leading is for display type, not for two-line names */
.menu-item p { font-size: var(--t-xs); color: var(--ink-soft); }
.menu-item .datum { color: var(--sign); font-weight: 500; white-space: nowrap; }

/* Teaser inside the grill panel: a taste of the menu, then the way through
   to all of it. */
@media (min-width: 1100px) {
  .teaser-list { columns: 2; column-gap: clamp(2rem, 4vw, 3rem); }

  /* Spacing below rather than above, so both columns start level - the same
     reason as on the menu page. */
  .teaser-list .menu-group { break-inside: avoid; margin-top: 0; margin-bottom: 1.75rem; }
  .teaser-list .menu-group:last-child { margin-bottom: 0; }
}

/* The list is cut short on purpose, so it fades out instead of stopping on a
   hard edge and pretending to be the whole menu. */
.teaser-list {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0.15) 100%);
}

/* Sits outside .teaser-list so it is not faded, and outside the columns so it
   centres under both of them rather than flowing into one. */
.teaser-cta {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.teaser-cta .menu-teaser-note { margin-top: 0; margin-bottom: 0.9rem; }
.teaser-cta .btn { min-width: min(320px, 100%); }

/* Line that applies to a whole section rather than one dish. */
.menu-note {
  margin-bottom: 0.75rem;
  font-size: var(--t-xs);
  font-style: italic;
  color: var(--ink-soft);
}

/* Most dishes on this menu have no price yet, so the row must not look broken
   when the price span is absent. */
.menu-item:not(:has(.datum)) { grid-template-columns: 1fr; }

.grill-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
/* Same rule as the hero, with the bundle's 33.333% step: 3 slides, track 300%. */
.grill-slider__track { display: flex; width: 300%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.grill-slider__track > figure { flex: 0 0 33.3333%; margin: 0; }
.grill-slider__track img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.grill-dots { position: absolute; bottom: 0.85rem; left: 50%; translate: -50% 0; display: flex; gap: 0.45rem; }

.note {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  background: #fff3ec;
  border: 1px solid #ffd9c2;
  border-left: 4px solid var(--marking);
  border-radius: var(--radius);
}

.note h4 { font-size: 1rem; text-transform: uppercase; }
.note p { margin-top: 0.3rem; font-size: var(--t-xs); color: #7a4622; }

.success {
  display: grid;
  place-items: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  text-align: center;
  background: #eaf5f3;
  border: 1px solid #b6ded6;
  border-radius: var(--radius-lg);
}

.success svg { width: 42px; height: 42px; color: var(--svc-parking); }

/* ---------------------------------------------------------------- footer */

.footer { background: var(--sign-ink); color: #fff; padding-block: clamp(2.5rem, 6vw, 4rem); }
.footer__inner { display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.footer__mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.footer__mark img { width: 30px; height: 30px; }
.footer__mark b { font-family: var(--display); font-size: 1.125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer__tag { max-width: 52ch; color: #b9d4d1; font-size: var(--t-sm); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; }

.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
}

.footer__links a:hover { color: var(--marking); }
.footer__links svg { width: 17px; height: 17px; }

.footer__legal {
  width: 100%;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #8fa5a3;
  font-size: var(--t-xs);
}

/* ================================================================
   Runtime classes
   The app bundle adds and removes these by name. They are not
   decorative — deleting one breaks a slider, tab, or the sheet.
   ================================================================ */

.hidden { display: none !important; }
.overflow-hidden { overflow: hidden !important; }
.pointer-events-none { pointer-events: none; }
.opacity-100 { opacity: 1 !important; }
.translate-y-full { transform: translateY(100%); }

/* sheet badge — the bundle replaces its className, so flex-shrink has to be
   pinned on the utility class itself or the dot collapses in the flex header */
.w-2\.5 { width: 10px; flex: none; }
.h-2\.5 { height: 10px; }
.rounded-full { border-radius: 999px; }
.bg-white { background-color: #fff; }
.bg-white\/40 { background-color: rgba(255, 255, 255, 0.45); }
.hover\:bg-white\/60:hover { background-color: rgba(255, 255, 255, 0.7); }

/* active tab state */
.border-amber-500 { border-bottom-color: var(--marking) !important; }
.text-amber-500 { color: var(--sign) !important; }
.border-transparent { border-bottom-color: transparent !important; }
.text-slate-400 { color: var(--ink-soft) !important; }

/* header scroll states — the gantry keeps its own colour, so these only
   deepen the shadow rather than repaint it */
.bg-slate-950\/90,
.bg-slate-950\/98 { background-color: var(--sign-bar); }
.border-slate-800,
.border-slate-900 { border-bottom-color: var(--marking); }
.shadow-xl { box-shadow: 0 14px 34px rgba(36, 48, 59, 0.32); }

/* detail sheet badge colours, set from the bundle's section config */
.bg-blue-500 { background-color: var(--svc-motel); }
.bg-amber-500 { background-color: var(--svc-grill); }
.bg-emerald-500 { background-color: var(--svc-parking); }
.bg-pink-500 { background-color: var(--svc-store); }

/* Sold-out dishes, injected by lunch-menu.js */
.menu-item.is-sold-out { opacity: 0.5; }
.menu-item.is-sold-out h5 { text-decoration: line-through; }
.menu-item .plate-label { color: var(--ink-soft); }


/* Sub-heading inside a band, below the lede. */
.band__subtitle {
  margin-top: 2rem;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.band--dark .band__subtitle { color: #fff; }

/* Tick list on the dark location band needs a lighter glyph than --svc. */
.ticks--dark li { color: #cfdad9; }
.ticks--dark svg { color: var(--marking); }

/* Opening hours: one fact per line, the closed one visibly set apart. */
.hours { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }

.hours li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--marking);
  border-radius: var(--radius);
  font-size: var(--t-sm);
}

.hours li.is-soon {
  border-left-color: var(--ink-soft);
  color: #a8b6b6;
}

/* Restaurant slogan — the one line of voice in the grill panel. */
.slogan {
  margin-top: 1.25rem;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--svc-grill);
  letter-spacing: -0.01em;
}

/* Icon-only social buttons. Sized as real tap targets rather than bare glyphs. */
.socials { display: flex; justify-content: center; gap: 0.75rem; }

.socials a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.socials a:hover {
  background: var(--marking);
  border-color: var(--marking);
  color: #16202a;
  transform: translateY(-2px);
}

.socials svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 619px) {
  /* At 375px the brand name needed 144px and had 116px, and the mono sub-line
     needed 205px — both were being cut off mid-word. Drop the sub-line (the
     same "2 min" fact is in the hero and the location band) and tighten the
     rest so the name fits whole. */
  .gantry__name span { display: none; }
  .gantry__name b { font-size: 0.875rem; letter-spacing: 0.02em; }
  .gantry__mark img { width: 34px; height: 34px; }
  .gantry__mark { gap: 0.45rem; }
  .gantry__inner { gap: 0.5rem; }
  .gantry__actions { gap: 0.35rem; }
  .icon-btn { padding-inline: 0.55rem; }

  /* Full-width stacked buttons are easier to hit than two half-width ones. */
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; }

  /* This once dropped a second shield half that no longer exists - by the time
     the eyebrow held a single span, the rule was hiding the only thing in it, so
     phones got an empty teal band. What wraps now is the road name, and that is
     hidden by .mw-name's own breakpoint. The plate stays: a phone in a lorry cab
     is exactly where a road number earns its place. */
  /* 0.08em of tracking on uppercase is airy enough to push the longer
     languages onto a second line at 375px. The plate sets its own. */
  .hero__route { border-left-width: 4px; letter-spacing: 0.035em; }
}

/* ===================================================================
   Standalone menu page (menu.html)
   Opened from a QR code at a table, so it is read on a phone held in
   one hand: one column, large touch targets, no page chrome to speak of.
   =================================================================== */

.menu-page { background: var(--paper); }
.menu-main { padding-block: 0 clamp(3rem, 8vw, 5rem); }

/* Masthead sits on the brand teal so the page opens with something to look
   at rather than a wall of dish names. */
.menu-hero {
  background: var(--sign);
  color: #fff;
  padding-block: clamp(1.75rem, 6vw, 3.25rem);
  border-bottom: 3px solid var(--marking);
}

.menu-hero__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 3px;
  background: var(--marking);
  color: #16202a;
  margin-bottom: 0.9rem;
}

.menu-hero__title {
  font-size: clamp(2rem, 7vw, 3.25rem);
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.02em;
}

.menu-hero .slogan {
  margin-top: 0.7rem;
  color: #fff;
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
}

.menu-hero__hours {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  font-size: var(--t-sm);
}

/* Category cards. The menu opens as a set of boxes rather than one long
   list, so a phone at a table shows the whole shape of the menu at a glance
   and the reader taps into what they want.

   Each card takes public/photos/menu/<slug>.webp when that exists. The client
   has sent building and room photography so far, not food, so the cards
   currently fall back to a brand-coloured tile with a line glyph - which reads
   as deliberate rather than as a broken image. Drop a file in and it appears. */

.menu-section-label {
  display: block;
  margin: clamp(1.25rem, 4vw, 2rem) 0 1rem;
  color: var(--ink-soft);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
}

.cat-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--sign-ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(36, 48, 59, 0.22);
}

.cat-card:active { transform: translateY(0); }

.cat-card__media { position: absolute; inset: 0; display: block; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The darkening. Heavier at the foot, where the name sits, and light across the
   top so the picture still reads as a picture. */
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(12, 18, 22, 0.82) 0%,
    rgba(12, 18, 22, 0.55) 38%,
    rgba(12, 18, 22, 0.18) 70%,
    rgba(12, 18, 22, 0.06) 100%);
  transition: background 0.16s ease;
}

.cat-card:hover::after {
  background: linear-gradient(to top,
    rgba(12, 18, 22, 0.86) 0%,
    rgba(12, 18, 22, 0.6) 40%,
    rgba(12, 18, 22, 0.24) 72%,
    rgba(12, 18, 22, 0.1) 100%);
}

/* Stand-in tile, used where no photograph exists yet. Same darkening runs over
   it, so a grid of photos and tiles still reads as one set. */
.cat-card__media--icon {
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, 0.2), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 6px, transparent 6px 12px),
    var(--tile, var(--sign));
}

.cat-card__media--icon svg {
  width: 38%;
  height: 38%;
  opacity: 0.9;
  margin-bottom: 18%;   /* clear of the name below */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* One colour per category, all pulled from the two poles of the logo so the
   grid stays on brand instead of turning into a paintbox. */
.cat-card[data-cat="salads"]    { --tile: #2f7d5b; }
.cat-card[data-cat="dips"]      { --tile: #35847e; }
.cat-card[data-cat="burgers"]   { --tile: #c0721a; }
.cat-card[data-cat="mains"]     { --tile: #24303b; }
.cat-card[data-cat="starters"]  { --tile: #a8531c; }
.cat-card[data-cat="grill"]     { --tile: #ff5500; }
.cat-card[data-cat="risotto"]   { --tile: #1d5b52; }
.cat-card[data-cat="pasta"]     { --tile: #8a6a1f; }
.cat-card[data-cat="desserts"]  { --tile: #7a3f5d; }
.cat-card[data-cat="breakfast"] { --tile: #2a5c5c; }
.cat-card[data-cat="drinks"]    { --tile: #3d4f63; }

.cat-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
}

.cat-card__title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.cat-card__count {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding-inline: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: var(--t-xs);
  backdrop-filter: blur(4px);
}

.cat-card:hover .cat-card__count { background: var(--marking); border-color: var(--marking); color: #16202a; }

/* Back out of a category. A real link, so the phone's own back gesture and
   this button end up in the same place. */
.menu-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-top: clamp(1rem, 3vw, 1.5rem);
  color: var(--sign);
  text-decoration: none;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu-back:hover { color: var(--marking); }
.menu-back svg { width: 16px; height: 16px; }

/* The jump list that used to sit here is gone. It listed all eleven categories
   above one category's dishes - the same job the grid already does one tap
   away, and the only thing on the page that scrolled sideways. */

.menu-page .menu-group { scroll-margin-top: calc(var(--bar-h) + 12px); }
.menu-page .menu-group + .menu-group { margin-top: clamp(2rem, 5vw, 2.75rem); }

/* Section heading as a rule with the name sitting on it. */
.menu-page .menu-group__title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.4rem;
  font-size: var(--t-sm);
  letter-spacing: 0.18em;
  color: var(--svc-grill);
}

.menu-page .menu-group__title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--marking), transparent);
}

/* Dish rows: name and price tied together by a dotted leader, the way a
   printed menu does it, so the eye can travel across the gap. */
.menu-page .menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 0.6rem;
  padding: 0.75rem 0;
  border-bottom: 0;
}

.menu-page .menu-item > div { display: contents; }
.menu-page .menu-item h5 { grid-column: 1; font-size: 1.0625rem; font-weight: 600; }
.menu-page .menu-item p { grid-column: 1 / -1; margin-top: 0.2rem; color: var(--ink-soft); font-size: var(--t-xs); }

.menu-page .menu-item .datum {
  grid-column: 2;
  color: var(--sign);
  font-weight: 500;
  white-space: nowrap;
}

.menu-page .menu-item:has(.datum) h5::after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-left: 0.5rem;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-0.25em);
}

.menu-page .menu-item:has(.datum) h5 {
  display: flex;
  align-items: baseline;
  overflow: hidden;
}

@media (min-width: 900px) {
  #menuBody { columns: 2; column-gap: clamp(2.5rem, 5vw, 4rem); }

  /* Gap hangs below each section rather than above the next one. Spacing the
     tops meant whichever section happened to start the second column carried
     that space and sat lower than the section starting the first, so the two
     columns began at different heights. */
  #menuBody .menu-group {
    break-inside: avoid;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
  }

  #menuBody .menu-group + .menu-group { margin-top: 0; padding-top: 0; }
  #menuBody .menu-group:last-child { margin-bottom: 0; }
}

.menu-callout { margin-top: clamp(2rem, 5vw, 3rem); }
.menu-foot { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.btn--dark { color: var(--ink); border-color: var(--line); background: var(--paper-pure); }
.btn--dark:hover { background: #e6eeed; }

.menu-error {
  padding: 1.25rem;
  background: #fff3ec;
  border-left: 4px solid var(--marking);
  border-radius: var(--radius);
}

/* The teaser on the main page: a taste, then the door to the full list. */
.menu-teaser-note {
  margin-top: 1rem;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  font-style: italic;
}

@media print {
  .gantry, .menu-callout, .menu-foot { display: none; }
  .menu-page { background: #fff; }
  .menu-hero { background: none; color: #000; border-bottom: 2px solid #000; }
  .menu-hero__title, .menu-hero .slogan { color: #000; }
  #menuBody { columns: 2; }
}