@charset "utf-8";
/* ==========================================================================
   TAQUERÍA VELA — taqueriavelawa.com
   Hand-built stylesheet. No frameworks, no build step.

   TABLE OF CONTENTS
   01. Custom properties
   02. Reset & base
   03. Accessibility helpers
   04. Typography
   05. Layout primitives
   06. Decorative patterns (checkerboard, ribbons, paper, seals)
   07. Utility bar
   08. Header & navigation
   09. Buttons
   10. Hero
   11. Marquee
   12. About
   13. Menu preview
   14. Catering
   15. Gallery
   16. Location & map
   17. Social
   18. Final CTA
   19. Contact hero & cards
   20. Contact form
   21. FAQ
   22. Footer
   23. Mobile order bar
   24. Animation & reveals
   25. Responsive breakpoints
   26. Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   01. CUSTOM PROPERTIES
   ========================================================================== */
:root {
  /* --- Brand palette (supplied) --- */
  --vela-cream: #D1D0C9;
  --vela-teal: #4F7F84;
  --vela-gold: #CAA357;
  --vela-burgundy: #781C30;
  --vela-orange: #C17128;

  /* --- Derived tones: accessible text-on-color + printed-menu paper --- */
  --vela-paper: #F7F0DB;          /* warm menu paper, matches printed menu */
  --vela-paper-2: #FBF6E9;        /* lighter panel */
  --vela-paper-3: #EFE4C8;        /* toned panel */
  --vela-teal-deep: #3A6165;      /* white small text passes AA */
  --vela-orange-deep: #A85B18;    /* white small text passes AA */
  --vela-burgundy-deep: #5B1424;
  --vela-rose: #C2566F;           /* checkerboard accent from the menu */
  --vela-ink: #241A16;
  --vela-ink-soft: #4A3A32;
  --white: #FFFFFF;

  /* --- Type --- */
  --font-display: Rockwell, "Rockwell Nova", "Roboto Slab", "Bookman Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-utility: Arial, Helvetica, sans-serif;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --section-y: clamp(3rem, 7vw, 6rem);

  /* --- Widths --- */
  --wrap: 1240px;
  --wrap-narrow: 940px;
  --measure: 68ch;

  /* --- Borders & radii --- */
  --bd-hair: 2px;
  --bd-thick: 4px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --sh-offset: 6px 6px 0 rgba(36, 26, 22, 0.16);
  --sh-offset-sm: 4px 4px 0 rgba(36, 26, 22, 0.14);
  --sh-soft: 0 10px 26px rgba(36, 26, 22, 0.16);
  --sh-lift: 0 18px 40px rgba(36, 26, 22, 0.22);

  /* --- Header --- */
  --header-h: 84px;
  --scroll-offset: 104px;

  /* --- Motion --- */
  --t-fast: 140ms ease;
  --t-med: 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-slow: 620ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- Focus --- */
  --focus-ring: 3px solid var(--vela-orange-deep);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--vela-ink);
  background-color: var(--vela-paper);
  /* Paper grain: a single tiny inline SVG turbulence, no image request */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(202, 163, 87, 0.10), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(79, 127, 132, 0.09), transparent 44%),
    radial-gradient(circle at 50% 96%, rgba(120, 28, 48, 0.07), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  /* `clip` (not `hidden`) keeps decorative overflow contained WITHOUT turning
     <body> into a scroll container, which would break position: sticky. */
  overflow-x: clip;
}

/* Fallback for browsers without overflow: clip */
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

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

a { color: var(--vela-burgundy); text-underline-offset: 3px; }
a:hover { color: var(--vela-orange-deep); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

hr { border: 0; border-top: var(--bd-hair) dashed rgba(120, 28, 48, 0.35); margin: var(--sp-6) 0; }

/* The HTML `hidden` attribute is only `display:none` in the browser's own
   stylesheet, so ANY author rule that sets display (e.g. `display:flex` on a
   loading row) silently defeats it and the element stays on screen. Anything
   toggled with element.hidden in site.js depends on this rule. Do not remove it. */
[hidden] { display: none !important; }

/* Anchored sections must clear the sticky header */
[id] { scroll-margin-top: var(--scroll-offset); }

/* ==========================================================================
   03. ACCESSIBILITY HELPERS
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-4);
  z-index: 999;
  display: inline-block;
  padding: 0.85rem 1.4rem;
  background: var(--vela-burgundy);
  color: var(--white);
  font-family: var(--font-utility);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--bd-thick) solid var(--vela-gold);
  border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-3); color: var(--white); }

/* ==========================================================================
   04. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.4rem + 3.6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 1.08rem + 0.8vw, 1.65rem); }
h4 { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }

.lead {
  font-size: clamp(1.06rem, 1rem + 0.42vw, 1.28rem);
  line-height: 1.6;
  color: var(--vela-ink-soft);
}

/* Small stamp-style label above headings */
.eyebrow {
  display: inline-block;
  font-family: var(--font-utility);
  font-size: clamp(0.7rem, 0.66rem + 0.16vw, 0.79rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vela-burgundy);
  background: var(--vela-paper-2);
  border: var(--bd-hair) solid var(--vela-burgundy);
  border-radius: var(--r-pill);
  padding: 0.42rem 1rem;
  margin: 0 0 var(--sp-4);
  box-shadow: 3px 3px 0 rgba(120, 28, 48, 0.22);
  max-width: 100%;
}
.eyebrow--teal { color: var(--vela-teal-deep); border-color: var(--vela-teal-deep); box-shadow: 3px 3px 0 rgba(58, 97, 101, 0.24); }
.eyebrow--gold { color: var(--vela-ink); border-color: var(--vela-orange-deep); box-shadow: 3px 3px 0 rgba(168, 91, 24, 0.24); }
.eyebrow--onDark {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--vela-gold);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
}

/* Hand-lettered feel for short Spanish accents (system italic, no webfont) */
.handwritten {
  font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  color: var(--vela-burgundy);
  transform: rotate(-3deg);
  display: inline-block;
}

.text-outline {
  color: var(--vela-paper-2);
  text-shadow:
    2px 2px 0 var(--vela-burgundy-deep),
    -1px -1px 0 var(--vela-burgundy-deep),
    1px -1px 0 var(--vela-burgundy-deep),
    -1px 1px 0 var(--vela-burgundy-deep),
    5px 5px 0 rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   05. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2rem, var(--wrap-narrow)); }

.section { padding-block: var(--section-y); position: relative; }
.section > .wrap { position: relative; z-index: 2; }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { text-align: center; }
.section-head--center .lead,
.section-head--center p { margin-inline: auto; }

.stack > * + * { margin-top: var(--sp-4); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* Tinted section grounds */
.section--paper { background: var(--vela-paper-2); }
.section--teal {
  background: var(--vela-teal-deep);
  color: var(--vela-paper);
}
.section--teal h2, .section--teal h3 { color: var(--white); }
.section--teal p { color: rgba(247, 240, 219, 0.94); }
.section--burgundy {
  background: var(--vela-burgundy);
  color: var(--vela-paper);
}
.section--burgundy h2, .section--burgundy h3 { color: var(--white); }
.section--burgundy p { color: rgba(247, 240, 219, 0.94); }

/* ==========================================================================
   06. DECORATIVE PATTERNS
   ========================================================================== */

/* --- Multicolor checkerboard strip (the menu's signature border) --- */
.checker {
  height: 22px;
  width: 100%;
  --c1: var(--vela-burgundy);
  --c2: var(--vela-gold);
  --c3: var(--vela-teal);
  --c4: var(--vela-orange);
  --c5: var(--vela-rose);
  --c6: var(--vela-paper-3);
  background-image:
    repeating-linear-gradient(90deg,
      var(--c1) 0 22px, var(--c2) 22px 44px, var(--c3) 44px 66px,
      var(--c4) 66px 88px, var(--c5) 88px 110px, var(--c6) 110px 132px),
    repeating-linear-gradient(90deg,
      var(--c4) 0 22px, var(--c6) 22px 44px, var(--c1) 44px 66px,
      var(--c3) 66px 88px, var(--c2) 88px 110px, var(--c5) 110px 132px);
  background-size: 100% 50%, 100% 50%;
  background-position: 0 0, 0 100%;
  background-repeat: repeat-x;
}
.checker--tall { height: 30px; }
.checker--thin { height: 14px; }

/* --- Ribbon heading (notched banner, exactly like the printed menu) --- */
.ribbon {
  display: block;
  position: relative;
  margin: 0 0 var(--sp-5);
  padding: 0.7rem clamp(1.5rem, 4vw, 3rem);
  background: var(--vela-burgundy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  line-height: 1.16;
  text-align: center;
  clip-path: polygon(
    0 0, 100% 0, calc(100% - 24px) 50%, 100% 100%,
    0 100%, 24px 50%
  );
  filter: drop-shadow(5px 5px 0 rgba(36, 26, 22, 0.2));
}
.ribbon--teal { background: var(--vela-teal-deep); }
.ribbon--gold { background: var(--vela-gold); color: var(--vela-ink); }
.ribbon--orange { background: var(--vela-orange-deep); }
.ribbon--left { text-align: left; padding-left: clamp(2.2rem, 5vw, 3.4rem); }
.ribbon--sm { font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.4rem); padding-block: 0.5rem; }

/* --- Layered paper panel: double border + offset shadow --- */
.panel {
  position: relative;
  background: var(--vela-paper-2);
  border: var(--bd-thick) solid var(--vela-burgundy);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: var(--sh-offset);
  isolation: isolate;
}
/* inner hairline = the printed menu's double rule */
.panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: var(--bd-hair) solid rgba(202, 163, 87, 0.9);
  border-radius: calc(var(--r-md) - 4px);
  pointer-events: none;
  z-index: -1;
}
.panel--teal { border-color: var(--vela-teal-deep); }
.panel--gold { border-color: var(--vela-gold); }
.panel--orange { border-color: var(--vela-orange-deep); }
.panel--flat { box-shadow: none; }

/* <picture> wrappers around the logo must not disturb the medallion layout */
.brand__medallion picture,
.hero__medallion picture,
.footer__medallion picture,
.contact-hero__medallion picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Circular seal / badge --- */
.seal {
  display: grid;
  place-content: center;
  text-align: center;
  width: clamp(112px, 15vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--vela-paper-2) 62%, transparent 63%),
    conic-gradient(var(--vela-gold) 0 25%, var(--vela-burgundy) 0 50%, var(--vela-gold) 0 75%, var(--vela-burgundy) 0);
  border: var(--bd-thick) solid var(--vela-burgundy);
  box-shadow: var(--sh-offset-sm), inset 0 0 0 3px var(--vela-paper-2);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 0.62rem + 0.36vw, 0.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vela-burgundy);
  padding: 12%;
}

/* --- Small stamp label --- */
.stamp {
  display: inline-block;
  font-family: var(--font-utility);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--vela-orange-deep);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-sm);
  box-shadow: 2px 2px 0 rgba(36, 26, 22, 0.25);
}

/* --- Dotted / starburst confetti (decorative only) --- */
.dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle, rgba(120, 28, 48, 0.28) 2px, transparent 2.5px);
  background-size: 26px 26px;
  z-index: 0;
}

/* --- Angular section divider --- */
.divider-zigzag {
  height: 16px;
  width: 100%;
  background:
    linear-gradient(-45deg, transparent 66%, var(--vela-gold) 0) repeat-x,
    linear-gradient(45deg, transparent 66%, var(--vela-gold) 0) repeat-x;
  background-size: 22px 22px;
}

/* ==========================================================================
   07. UTILITY BAR
   ========================================================================== */
.utility-bar {
  background: var(--vela-burgundy-deep);
  color: var(--vela-paper);
  font-family: var(--font-utility);
  font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0;
  text-align: center;
}
.utility-bar__hours { font-weight: 700; }

/* Live open/closed pill */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(202, 163, 87, 0.85);
}
.status__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--vela-gold);
  flex: none;
}
/* State is never conveyed by colour alone — the text always says open/closed */
.status.is-open .status__dot { background: #7BD389; box-shadow: 0 0 0 3px rgba(123, 211, 137, 0.25); }
.status.is-closed .status__dot { background: #E9A0A0; }

/* ==========================================================================
   08. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--vela-paper-2);
  border-bottom: var(--bd-thick) solid var(--vela-burgundy);
  box-shadow: 0 3px 0 var(--vela-gold), 0 10px 24px rgba(36, 26, 22, 0.14);
  transition: padding var(--t-med), background var(--t-med);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.6rem 0;
  min-height: var(--header-h);
}

/* --- Brand lockup --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--vela-burgundy);
  flex: none;
}
.brand__medallion {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--vela-paper);
  border: 3px solid var(--vela-gold);
  box-shadow: 2px 2px 0 rgba(120, 28, 48, 0.35);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  transition: width var(--t-med), height var(--t-med);
}
.brand__medallion img { width: 100%; height: 100%; object-fit: contain; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.brand__tag {
  display: block;
  font-family: var(--font-utility);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vela-teal-deep);
  margin-top: 0.22rem;
}

/* Compact logo after scroll */
.site-header.is-stuck { background: var(--vela-paper-2); }
.site-header.is-stuck .site-header__inner { min-height: 68px; }
.site-header.is-stuck .brand__medallion { width: 48px; height: 48px; }
.site-header.is-stuck .brand__tag { display: none; }

/* --- Desktop nav --- */
.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 1vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-utility);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--vela-burgundy);
  border-radius: var(--r-sm);
  border-bottom: 3px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--vela-orange-deep); border-bottom-color: var(--vela-orange); background: rgba(202, 163, 87, 0.16); }
.nav__link[aria-current="page"] {
  color: var(--vela-burgundy);
  border-bottom-color: var(--vela-burgundy);
  background: rgba(120, 28, 48, 0.1);
}

/* The in-drawer Order Online button is for the mobile menu only — the header
   actions already carry one on desktop. */
.nav__item--cta { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* --- Mobile toggle --- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 48px; min-height: 48px;
  padding: 0.5rem 0.8rem;
  background: var(--vela-burgundy);
  color: var(--white);
  border: 3px solid var(--vela-gold);
  border-radius: var(--r-sm);
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 20px; height: 2px;
  background: currentColor;
  display: inline-block;
  transition: background var(--t-fast);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  transition: transform var(--t-med), top var(--t-med);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   09. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-utility);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid var(--vela-ink);
  border-radius: var(--r-sm);
  background: var(--vela-paper-2);
  color: var(--vela-ink);
  box-shadow: var(--sh-offset-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(36, 26, 22, 0.2); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(36, 26, 22, 0.2); }
.btn svg { flex: none; }

.btn--primary {
  background: var(--vela-orange-deep);
  border-color: var(--vela-burgundy-deep);
  color: var(--white);
}
.btn--primary:hover { background: #96500F; color: var(--white); }

.btn--secondary {
  background: var(--vela-burgundy);
  border-color: var(--vela-gold);
  color: var(--white);
}
.btn--secondary:hover { background: var(--vela-burgundy-deep); color: var(--white); }

.btn--teal {
  background: var(--vela-teal-deep);
  border-color: var(--vela-gold);
  color: var(--white);
}
.btn--teal:hover { background: #2F5155; color: var(--white); }

.btn--outline {
  background: var(--vela-paper-2);
  border-color: var(--vela-burgundy);
  color: var(--vela-burgundy);
}
.btn--outline:hover { background: var(--vela-paper-3); color: var(--vela-burgundy-deep); }

.btn--onDark {
  background: var(--vela-paper-2);
  border-color: var(--vela-gold);
  color: var(--vela-burgundy);
}
.btn--onDark:hover { background: var(--white); color: var(--vela-burgundy-deep); }

.btn--sm { min-height: 44px; padding: 0.55rem 1rem; font-size: 0.78rem; }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.05rem); }
.btn--block { width: 100%; }

/* Header phone button collapses to an icon on small screens */
.btn--phone .btn__label { display: inline; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-family: var(--font-utility);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vela-burgundy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.link-arrow:hover { color: var(--vela-orange-deep); }
.link-arrow--onDark { color: var(--vela-paper); }
.link-arrow--onDark:hover { color: var(--vela-gold); }

/* ==========================================================================
   10. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(202, 163, 87, 0.3), transparent 55%),
    radial-gradient(ellipse at 92% 40%, rgba(79, 127, 132, 0.22), transparent 52%),
    var(--vela-paper);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__copy { max-width: 42rem; }
.hero__title { margin-bottom: var(--sp-4); color: var(--vela-burgundy); }
.hero__title .accent { color: var(--vela-orange-deep); display: block; }
.hero__lead { max-width: 40rem; }
.hero__actions { margin-top: var(--sp-5); }
.hero__handwritten { margin-top: var(--sp-4); display: block; }

/* Supporting strip under the hero copy */
.hero__strip {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  align-items: center;
  padding: 0.7rem 1rem;
  background: var(--vela-burgundy);
  color: var(--vela-paper);
  border-radius: var(--r-sm);
  border: 3px solid var(--vela-gold);
  font-family: var(--font-utility);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--sh-offset-sm);
}
.hero__strip span { display: inline-flex; align-items: center; gap: 0.7rem; }
.hero__strip span::after { content: "•"; color: var(--vela-gold); }
.hero__strip span:last-child::after { content: none; }

/* --- Hero medallion: the logo as the centrepiece --- */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
}
.hero__medallion {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, var(--vela-paper-2) 70%, transparent 71%),
    conic-gradient(from 8deg,
      var(--vela-burgundy) 0 12.5%, var(--vela-gold) 0 25%,
      var(--vela-teal) 0 37.5%, var(--vela-orange) 0 50%,
      var(--vela-burgundy) 0 62.5%, var(--vela-gold) 0 75%,
      var(--vela-teal) 0 87.5%, var(--vela-orange) 0);
  border: 6px solid var(--vela-burgundy);
  box-shadow: var(--sh-lift), inset 0 0 0 10px var(--vela-paper-2);
  padding: 9%;
}
.hero__medallion img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(36, 26, 22, 0.2));
}

/* Floating seal pinned to the medallion */
.hero__seal {
  position: absolute;
  right: -2%;
  bottom: 4%;
  transform: rotate(-11deg);
  z-index: 3;
}

/* Truck photo tucked behind/beside the medallion on large screens */
.hero__photo {
  position: absolute;
  left: -4%;
  top: 2%;
  width: 44%;
  max-width: 210px;
  transform: rotate(-6deg);
  border: 5px solid var(--vela-paper-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lift);
  overflow: hidden;
  display: none;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* ==========================================================================
   11. MARQUEE
   ========================================================================== */
.marquee {
  background: var(--vela-teal-deep);
  border-block: var(--bd-thick) solid var(--vela-burgundy);
  overflow: hidden;
  padding: 0.85rem 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee-scroll 34s linear infinite;
  will-change: transform;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.5rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vela-paper);
  white-space: nowrap;
}
.marquee__group span { display: inline-flex; align-items: center; gap: 1.6rem; }
.marquee__group span::after { content: "◆"; color: var(--vela-gold); font-size: 0.7em; }
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ==========================================================================
   12. ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.about__copy .lead { max-width: 38rem; }
.about__labels {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--sp-2) 0 var(--sp-5);
}
.about__labels li { list-style: none; }

/* Overlapping photo collage — flattened on mobile */
.about__collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  position: relative;
}
.about__photo {
  border: 5px solid var(--vela-paper-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-offset);
  overflow: hidden;
  background: var(--vela-paper-3);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.about__photo--wide { grid-column: 1 / -1; }
.about__photo--wide img { aspect-ratio: 16 / 9; }

/* ==========================================================================
   13. MENU PREVIEW
   ========================================================================== */
.menu-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
.menu-card {
  display: flex;
  flex-direction: column;
  background: var(--vela-paper-2);
  border: var(--bd-thick) solid var(--vela-burgundy);
  border-radius: var(--r-md);
  box-shadow: var(--sh-offset);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.menu-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lift); }
.menu-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--vela-paper-3);
  overflow: hidden;
  border-bottom: 3px solid var(--vela-gold);
}
.menu-card__media img { width: 100%; height: 100%; object-fit: cover; }
.menu-card__body { padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.7rem); }
.menu-card__ribbon {
  position: relative;
  margin: -1.15rem 0 var(--sp-3);
  z-index: 2;
}
.menu-card h3 { margin: 0; }
.menu-card p { margin: 0; color: var(--vela-ink-soft); font-size: 0.98rem; }

.menu-note {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--vela-paper-3);
  border-left: 6px solid var(--vela-orange-deep);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  color: var(--vela-ink-soft);
  max-width: none;
}
.menu-note strong { color: var(--vela-burgundy); }

/* Meat-choice board lifted straight from the printed menu */
.meat-board {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}
.meat-board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
}
.meat-board__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dotted rgba(120, 28, 48, 0.3);
}
.meat-board__list li:last-child { border-bottom: 0; }
.meat-board__es { color: var(--vela-burgundy); }
.meat-board__en {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--vela-ink-soft);
}
.meat-board__extra {
  margin-top: var(--sp-3);
  font-size: 0.92rem;
  color: var(--vela-ink-soft);
}
.meat-board__extra strong { color: var(--vela-orange-deep); }

/* ==========================================================================
   14. CATERING
   ========================================================================== */
.catering { position: relative; overflow: hidden; }
.catering__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.catering__art {
  display: grid;
  place-items: center;
}
.catering__plate {
  width: min(100%, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--vela-gold);
  box-shadow: var(--sh-lift);
  overflow: hidden;
  background: var(--vela-paper-3);
}
.catering__plate img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   15. GALLERY
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
}
.gallery-card {
  position: relative;
  border: var(--bd-thick) solid var(--vela-burgundy);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-offset);
  background: var(--vela-paper-3);
  aspect-ratio: 1;
  isolation: isolate;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.gallery-card:hover,
.gallery-card:focus-within { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.gallery-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.gallery-card:hover img { transform: scale(1.06); }

/* Illustrated tile: used where no photograph exists yet */
.gallery-card__illustration {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  padding: 14%;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 10px, transparent 10px 20px),
    var(--tile-bg, var(--vela-teal-deep));
}
.gallery-card__illustration svg { width: 100%; height: auto; max-height: 100%; }
.gallery-card--illustrated { background: var(--tile-bg, var(--vela-teal-deep)); }

/* Label ribbon across the bottom of every tile */
.gallery-card__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.6rem 0.9rem 0.85rem;
  background: linear-gradient(to top, rgba(36, 26, 22, 0.92) 42%, rgba(36, 26, 22, 0) 100%);
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.94rem + 0.42vw, 1.3rem);
  text-align: center;
  letter-spacing: 0.02em;
}
.gallery-card__note {
  display: block;
  font-family: var(--font-utility);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vela-gold);
  margin-top: 0.2rem;
}

/* ==========================================================================
   16. LOCATION & MAP
   ========================================================================== */
.location__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.info-list {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.info-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.info-list__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vela-gold);
  color: var(--vela-burgundy-deep);
  border: 2px solid var(--vela-burgundy);
  flex: none;
}
.info-list__label {
  display: block;
  font-family: var(--font-utility);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vela-teal-deep);
  margin-bottom: 0.15rem;
}
.info-list address, .info-list p { font-style: normal; margin: 0; }
.info-list a { font-weight: 700; }

/* Map frame styled like a photo mounted on the menu */
.map-frame {
  position: relative;
  border: var(--bd-thick) solid var(--vela-burgundy);
  border-radius: var(--r-md);
  box-shadow: var(--sh-offset);
  overflow: hidden;
  background: var(--vela-paper-3);
}
.map-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}
.map-frame__caption {
  padding: 0.8rem 1rem;
  background: var(--vela-burgundy);
  color: var(--vela-paper);
  font-family: var(--font-utility);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

/* Hours table */
.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.45rem 0;
  border-bottom: 2px dotted rgba(120, 28, 48, 0.3);
  font-size: 0.98rem;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list dt, .hours-list .day { font-weight: 700; }
.hours-list .closed { color: var(--vela-burgundy); font-weight: 700; }

/* ==========================================================================
   17. SOCIAL
   ========================================================================== */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 128px;
  padding: var(--sp-4);
  text-align: center;
  text-decoration: none;
  background: var(--vela-paper-2);
  border: var(--bd-thick) solid var(--vela-gold);
  border-radius: var(--r-md);
  color: var(--vela-burgundy);
  font-family: var(--font-utility);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--sh-offset-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.social-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
  background: var(--white);
  color: var(--vela-burgundy-deep);
}
.social-card svg { width: 34px; height: 34px; }

/* ==========================================================================
   18. FINAL CTA
   ========================================================================== */
.final-cta {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.final-cta__inner { position: relative; z-index: 2; }
.final-cta h2 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); }
.final-cta p { margin-inline: auto; }

/* ==========================================================================
   19. CONTACT HERO & CARDS
   ========================================================================== */
.contact-hero {
  position: relative;
  padding-block: clamp(2.5rem, 5.5vw, 4.5rem);
  background:
    radial-gradient(ellipse at 78% 10%, rgba(79, 127, 132, 0.25), transparent 55%),
    radial-gradient(ellipse at 8% 80%, rgba(202, 163, 87, 0.3), transparent 55%),
    var(--vela-paper);
  overflow: hidden;
}
.contact-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.contact-hero__art { display: grid; place-items: center; }
.contact-hero__medallion {
  width: min(100%, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 8%;
  background:
    radial-gradient(circle at 50% 50%, var(--vela-paper-2) 70%, transparent 71%),
    conic-gradient(var(--vela-gold) 0 25%, var(--vela-burgundy) 0 50%, var(--vela-teal) 0 75%, var(--vela-orange) 0);
  border: 6px solid var(--vela-burgundy);
  box-shadow: var(--sh-lift), inset 0 0 0 8px var(--vela-paper-2);
}
.contact-hero__medallion img { width: 100%; height: 100%; object-fit: contain; }

.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--vela-paper-2);
  border: var(--bd-thick) solid var(--vela-burgundy);
  border-radius: var(--r-md);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  box-shadow: var(--sh-offset);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.contact-card:hover,
.contact-card:focus-within { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.contact-card__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vela-gold);
  color: var(--vela-burgundy-deep);
  border: 3px solid var(--vela-burgundy);
  margin-bottom: var(--sp-1);
}
.contact-card__label {
  font-family: var(--font-utility);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vela-teal-deep);
  margin: 0;
}
.contact-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem);
  line-height: 1.4;
  font-style: normal;
  margin: 0;
  color: var(--vela-ink);
}
.contact-card__value a { color: var(--vela-burgundy); font-weight: 700; }
.contact-card .link-arrow { margin-top: auto; }
.contact-card .status { color: var(--vela-ink); background: rgba(202, 163, 87, 0.22); border-color: var(--vela-burgundy); align-self: flex-start; }

/* ==========================================================================
   20. CONTACT FORM
   ========================================================================== */
.form-layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-utility);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vela-burgundy);
}
.field .req { color: var(--vela-orange-deep); }
.field .optional {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--vela-ink-soft);
}
.field__hint {
  font-size: 0.83rem;
  color: var(--vela-ink-soft);
  margin: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--vela-ink);
  background: var(--white);
  border: 3px solid var(--vela-teal-deep);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--vela-burgundy) 50%),
    linear-gradient(135deg, var(--vela-burgundy) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.75rem center;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--vela-orange-deep);
  box-shadow: 0 0 0 3px rgba(168, 91, 24, 0.24);
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: #6F625A; }

/* Error state — icon + text, never colour alone */
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--vela-burgundy); background: #FFF6F6; }
.field__error {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--vela-burgundy);
}
.field.has-error .field__error { display: flex; }
.field__error::before { content: "⚠"; font-size: 1rem; }

/* Conditional fields */
.conditional-fields {
  display: none;
  grid-column: 1 / -1;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--vela-paper-3);
  border: 3px dashed var(--vela-orange-deep);
  border-radius: var(--r-md);
  grid-template-columns: 1fr;
}
.conditional-fields.is-visible { display: grid; }
.conditional-fields__title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-utility);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vela-orange-deep);
}

/* Honeypot — hidden from people, reachable by bots */
.honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
}
.form-status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  border: 3px solid var(--vela-teal-deep);
  background: var(--vela-paper-3);
  font-size: 0.95rem;
}
.form-status:empty { display: none; }
.form-status strong { color: var(--vela-burgundy); }
.form-status.is-error { border-color: var(--vela-burgundy); background: #FFF6F6; }

.form-fineprint {
  margin-top: var(--sp-4);
  font-size: 0.86rem;
  color: var(--vela-ink-soft);
}
.form-fineprint p { max-width: none; }

/* Sidebar beside the form */
.form-aside { display: grid; gap: var(--sp-4); }

/* ==========================================================================
   21. FAQ
   ========================================================================== */
.faq-list { display: grid; gap: var(--sp-3); max-width: 58rem; margin-inline: auto; }
.faq-item {
  background: var(--vela-paper-2);
  border: 3px solid var(--vela-burgundy);
  border-radius: var(--r-md);
  box-shadow: var(--sh-offset-sm);
  overflow: hidden;
}
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  color: var(--vela-burgundy);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vela-gold);
  color: var(--vela-burgundy-deep);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform var(--t-med);
}
.faq-item[open] > summary::after { content: "−"; transform: rotate(180deg); }
.faq-item[open] > summary { background: var(--vela-paper-3); }
.faq-item__body { padding: 0 1.1rem 1.1rem; }
.faq-item__body p { margin: 0; }

/* ==========================================================================
   22. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--vela-burgundy-deep);
  color: var(--vela-paper);
  border-top: var(--bd-thick) solid var(--vela-gold);
}
.site-footer a { color: var(--vela-paper); }
.site-footer a:hover { color: var(--vela-gold); }
.site-footer h2, .site-footer h3 { color: var(--white); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer__brand { display: grid; gap: var(--sp-3); justify-items: start; }
.footer__medallion {
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--vela-paper-2);
  border: 4px solid var(--vela-gold);
  padding: 8px;
  display: grid;
  place-items: center;
}
.footer__medallion img { width: 100%; height: 100%; object-fit: contain; }
.footer__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
  color: var(--vela-gold);
  max-width: 22rem;
  margin: 0;
}
.footer__title {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vela-gold);
  margin: 0 0 var(--sp-3);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.footer__list a,
.footer__list address,
.footer__list p {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-style: normal;
  margin: 0;
  text-decoration: none;
}
.footer__list a { text-decoration: underline; text-underline-offset: 3px; }
.footer__list .no-link { min-height: 0; padding: 0.2rem 0; }
.footer__hours { display: grid; gap: 0.2rem; }
.footer__hours div { display: flex; justify-content: space-between; gap: var(--sp-4); max-width: 20rem; padding: 0.3rem 0; border-bottom: 1px dotted rgba(202, 163, 87, 0.4); }
.footer__hours div:last-child { border-bottom: 0; }

/* Icon-only social links: 44×44 minimum */
.social-icons { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.social-icons a {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(247, 240, 219, 0.1);
  border: 2px solid var(--vela-gold);
  color: var(--vela-paper);
  transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.social-icons a:hover {
  background: var(--vela-gold);
  color: var(--vela-burgundy-deep);
  transform: translateY(-3px);
}
.social-icons svg { width: 22px; height: 22px; }

.footer__bottom {
  border-top: 2px solid rgba(202, 163, 87, 0.4);
  padding-block: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}
.footer__bottom p { margin: 0; max-width: none; }

/* ==========================================================================
   23. MOBILE ORDER BAR
   ========================================================================== */
.mobile-order-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--vela-burgundy);
  border-top: 3px solid var(--vela-gold);
  box-shadow: 0 -8px 24px rgba(36, 26, 22, 0.28);
  transition: transform var(--t-med), opacity var(--t-med);
}
.mobile-order-bar.is-hidden {
  transform: translateY(115%);
  opacity: 0;
  pointer-events: none;
}
.mobile-order-bar .btn { width: 100%; min-height: 52px; margin: 0; }

/* ==========================================================================
   24. ANIMATION & REVEALS
   ========================================================================== */
/* Content is visible by default. It is only hidden for the reveal animation
   when JavaScript is actually running (the `js` class is set in <head>), so a
   visitor with JavaScript disabled sees the whole page rather than a blank one. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Gentle float for decorative seals only */
.float { animation: gentle-float 7s ease-in-out infinite; }
@keyframes gentle-float {
  0%, 100% { transform: rotate(-11deg) translateY(0); }
  50%      { transform: rotate(-8deg) translateY(-9px); }
}

/* Slight print-shop rotation on desktop cards */
.tilt-a { transform: rotate(-1.1deg); }
.tilt-b { transform: rotate(0.9deg); }

/* ==========================================================================
   25. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --- ≥ 560px --- */
@media (min-width: 35em) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conditional-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
  .social-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- ≥ 768px --- */
@media (min-width: 48em) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meat-board { grid-template-columns: 1.1fr 0.9fr; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- ≥ 900px: desktop navigation appears --- */
@media (min-width: 56.25em) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  .hero__photo { display: block; }
  .about__grid { grid-template-columns: 1fr 1fr; }
  .catering__inner { grid-template-columns: 1.15fr 0.85fr; }
  .location__grid { grid-template-columns: 0.95fr 1.05fr; }
  .contact-hero__grid { grid-template-columns: 1.15fr 0.85fr; }
  .form-layout { grid-template-columns: 1.5fr 0.9fr; }
  .footer__grid { grid-template-columns: 1.4fr 0.8fr 0.9fr 1fr; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- ≥ 1120px --- */
@media (min-width: 70em) {
  .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-card__media { aspect-ratio: 4 / 3; }
}

/* Just above the drawer breakpoint the horizontal nav is tight, so tighten
   its spacing until there is room to breathe again. */
@media (min-width: 67.5em) and (max-width: 78em) {
  .nav__list { gap: 0.1rem; }
  .nav__link { padding-inline: 0.5rem; font-size: 0.78rem; letter-spacing: 0.06em; }
  .brand__name { font-size: 1.12rem; }
  .header-actions { gap: 0.35rem; }
}

/* --- Below 1080px: drawer navigation ---
   The main nav carries six items plus two action buttons, which no longer fits
   beside the logo between 900px and 1080px. The drawer takes over earlier than
   the layout grids do, so the header never overflows. Keep this breakpoint in
   sync with the matchMedia() call in assets/js/site.js. --- */
@media (max-width: 67.49em) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(90vw, 360px);
    z-index: 120;
    margin: 0;
    padding: 5.5rem 1.25rem 2rem;
    background: var(--vela-paper-2);
    border-left: 5px solid var(--vela-burgundy);
    box-shadow: -12px 0 40px rgba(36, 26, 22, 0.35);
    transform: translateX(105%);
    transition: transform var(--t-med);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0.2rem; }
  .nav__link {
    min-height: 52px;
    font-size: 0.95rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 2px dotted rgba(120, 28, 48, 0.3);
    border-radius: 0;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--vela-burgundy); }
  .nav__item--cta { display: block; margin-top: var(--sp-4); }
  .nav__item--cta .btn { width: 100%; }

  /* Scrim behind the drawer */
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(36, 26, 22, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med), visibility var(--t-med);
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }

  body.nav-open { overflow: hidden; }
}

/* --- Below 900px: simplify decoration and show the order bar --- */
@media (max-width: 56.24em) {
  .tilt-a, .tilt-b { transform: none; }
  .hero__seal { position: static; transform: rotate(-6deg); margin: var(--sp-5) auto 0; }
  .float { animation: none; }
  .hero__art { min-height: 0; }

  .mobile-order-bar { display: block; }
  body { padding-bottom: 76px; }
}

/* Hide the header phone label on very small screens (icon keeps the label via aria) */
@media (max-width: 30em) {
  .btn--phone .btn__label { display: none; }
  .btn--phone { padding-inline: 0.85rem; }
  .header-actions .btn--order { display: none; }
  .brand__name { font-size: 1.05rem; }
  .brand__medallion { width: 52px; height: 52px; }
  .utility-bar__inner { flex-direction: column; gap: 0.35rem; }
}

/* Keep everything inside the viewport at 320px */
@media (max-width: 22.5em) {
  :root { --sp-6: 1.5rem; --sp-7: 2.25rem; }
  .btn { padding-inline: 1rem; font-size: 0.82rem; }
  .ribbon { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); }
}

/* ==========================================================================
   26. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Marquee holds still and shows its content statically */
  .marquee__track { animation: none; transform: none; width: 100%; }
  .marquee { overflow-x: auto; }
  .marquee__group { flex-wrap: wrap; white-space: normal; justify-content: center; }
  .marquee__group + .marquee__group { display: none; }

  .js .reveal { opacity: 1; transform: none; }
  .float { animation: none; }
  .menu-card:hover, .gallery-card:hover, .btn:hover, .social-card:hover { transform: none; }
  .gallery-card:hover img { transform: none; }
}

@media print {
  .utility-bar, .site-header, .mobile-order-bar, .marquee, .map-frame iframe, .nav-scrim { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .panel, .menu-card, .contact-card { box-shadow: none; border-color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* Forced-colors (Windows High Contrast) safety net */
@media (forced-colors: active) {
  .btn, .panel, .menu-card, .contact-card, .gallery-card { border: 2px solid ButtonText; }
  .status__dot { forced-color-adjust: none; }
}

/* ==========================================================================
   27. ORDER-DIRECT LANDING PAGES (/doordash/, /caviar/, /grubhub/,
       /seamless/, /ubereats/, /postmates/)
       Each page sets --app-accent / --app-accent-deep in its own <style>.
   ========================================================================== */

.app-hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.75rem);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(202, 163, 87, 0.32), transparent 55%),
    radial-gradient(ellipse at 90% 60%, rgba(79, 127, 132, 0.2), transparent 52%),
    var(--vela-paper);
  overflow: hidden;
}
.app-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.app-hero h1 { color: var(--vela-burgundy); }
.app-hero h1 .accent { color: var(--app-accent-deep, var(--vela-orange-deep)); display: block; }

/* "You came from X" wayfinding chip */
.from-app {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  margin: 0 0 var(--sp-4);
  background: var(--vela-paper-2);
  border: var(--bd-hair) solid var(--app-accent-deep, var(--vela-burgundy));
  border-radius: var(--r-pill);
  box-shadow: 3px 3px 0 rgba(36, 26, 22, 0.18);
  font-family: var(--font-utility);
  font-size: clamp(0.7rem, 0.66rem + 0.16vw, 0.79rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vela-ink);
  max-width: 100%;
}
.from-app__mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--app-accent-deep, var(--vela-burgundy));
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.86rem;
  line-height: 1;
}

.app-hero__art { display: grid; place-items: center; position: relative; }
.app-hero__plate {
  width: min(100%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--vela-paper-2);
  box-shadow: var(--sh-lift), 0 0 0 6px var(--app-accent, var(--vela-gold));
  background: var(--vela-paper-3);
}
.app-hero__plate img { width: 100%; height: 100%; object-fit: cover; }
.app-hero__seal { position: absolute; right: 2%; bottom: 2%; transform: rotate(-10deg); z-index: 3; }

/* --- The fee arithmetic: two facing cards --- */
.fee-compare {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.fee-card {
  background: var(--vela-paper-2);
  border: var(--bd-thick) solid var(--vela-burgundy);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  box-shadow: var(--sh-offset);
  height: 100%;
}
.fee-card--direct { border-color: var(--vela-teal-deep); background: var(--vela-paper-2); }
.fee-card__title {
  margin: 0 0 var(--sp-2);
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.4rem);
}
.fee-card__sub {
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vela-ink-soft);
  margin: 0 0 var(--sp-4);
}

/* Stacked proportion bar */
.fee-bar {
  display: flex;
  width: 100%;
  height: 42px;
  border: 3px solid var(--vela-ink);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  background: var(--vela-paper-3);
}
.fee-bar__seg {
  display: grid;
  place-items: center;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--white);
  overflow: hidden;
  min-width: 0;
}
.fee-bar__seg--restaurant { background: var(--vela-burgundy); }
.fee-bar__seg--processing { background: var(--vela-orange-deep); }
.fee-bar__seg--customer   { background: var(--vela-teal-deep); }
.fee-bar__seg--food       { background: var(--vela-paper-3); color: var(--vela-ink); }
.fee-bar__seg--fee        { background: var(--vela-orange-deep); }

/* Itemised list under each bar */
.fee-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.fee-list li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 2px dotted rgba(120, 28, 48, 0.28);
  font-size: 0.96rem;
}
.fee-list li:last-child { border-bottom: 0; }
.fee-list__key {
  width: 14px; height: 14px;
  border-radius: 3px;
  align-self: center;
  border: 1px solid rgba(36, 26, 22, 0.35);
}
.fee-list__amount { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.fee-list__total {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 3px solid var(--vela-ink);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.28rem);
}
.fee-list__total strong { color: var(--vela-burgundy); }
.fee-card--direct .fee-list__total strong { color: var(--vela-teal-deep); }

.fee-caveat {
  margin-top: var(--sp-5);
  font-size: 0.88rem;
  color: var(--vela-ink-soft);
}
.fee-caveat p { max-width: none; margin-bottom: 0.5rem; }
.fee-caveat p:last-child { margin-bottom: 0; }

/* --- "What this means" points --- */
.point-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.point {
  background: var(--vela-paper-2);
  border: 3px solid var(--vela-gold);
  border-radius: var(--r-md);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  box-shadow: var(--sh-offset-sm);
}
.point__num {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--app-accent-deep, var(--vela-burgundy));
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.point h3 { margin-bottom: var(--sp-2); font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); }
.point p { margin: 0; font-size: 0.97rem; color: var(--vela-ink-soft); }

/* --- Cross-links to the sibling pages --- */
.app-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: 0;
  list-style: none;
}
.app-links a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.7rem 0.9rem;
  background: var(--vela-paper-2);
  border: 3px solid var(--vela-burgundy);
  border-radius: var(--r-sm);
  color: var(--vela-burgundy);
  font-family: var(--font-utility);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sh-offset-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.app-links a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(36, 26, 22, 0.2);
  background: var(--white);
}

/* --- Trademark / independence notice --- */
.trademark-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: var(--sp-4);
  background: var(--vela-paper-3);
  border-left: 6px solid var(--vela-ink-soft);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  color: var(--vela-ink-soft);
}
.trademark-note p { max-width: none; margin: 0; }

/* --- Footer strip listing the order-direct pages --- */
.footer__apps {
  border-top: 2px solid rgba(202, 163, 87, 0.4);
  padding-block: var(--sp-5);
}
.footer__apps ul {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.footer__apps a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 2px solid rgba(202, 163, 87, 0.6);
  border-radius: var(--r-pill);
  font-family: var(--font-utility);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.footer__apps a:hover { background: var(--vela-gold); color: var(--vela-burgundy-deep); }
.footer__apps a[aria-current="page"] { background: var(--vela-gold); color: var(--vela-burgundy-deep); }

@media (min-width: 35em) {
  .point-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 56.25em) {
  .app-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .fee-compare { grid-template-columns: 1fr 1fr; }
  .point-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-links { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   28. DELIVERY AREA PAGES (/areas-we-deliver/ and its child pages)
   ========================================================================== */

/* --- Breadcrumbs --- */
.breadcrumb { margin: 0 0 var(--sp-4); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-utility);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumb li + li::before {
  content: "›";
  color: var(--vela-gold);
  font-size: 1.1rem;
  line-height: 1;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--vela-burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb a:hover { color: var(--vela-orange-deep); }
.breadcrumb [aria-current="page"] { color: var(--vela-ink-soft); }

/* --- Distance chip --- */
.dist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--vela-paper-3);
  border: 2px solid var(--vela-teal-deep);
  color: var(--vela-teal-deep);
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dist-chip--ferry { border-color: var(--vela-orange-deep); color: var(--vela-orange-deep); }

/* --- Radius explainer panel --- */
.radius-panel {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.radius-dial {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, var(--vela-paper-2) 0 34%, transparent 34%),
    radial-gradient(circle, rgba(79, 127, 132, 0.16) 0 66%, transparent 66%),
    radial-gradient(circle, rgba(202, 163, 87, 0.22) 0 100%);
  border: 4px dashed var(--vela-teal-deep);
}
.radius-dial__core {
  display: grid;
  place-items: center;
  text-align: center;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vela-burgundy);
  color: var(--vela-paper);
  border: 4px solid var(--vela-gold);
  padding: 8%;
  font-family: var(--font-display);
  line-height: 1.15;
}
.radius-dial__num { display: block; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); }
.radius-dial__unit {
  display: block;
  font-family: var(--font-utility);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vela-gold);
  margin-top: 0.25rem;
}

/* --- Area cards on the hub --- */
.area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.area-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--vela-paper-2);
  border: var(--bd-thick) solid var(--vela-burgundy);
  border-radius: var(--r-md);
  box-shadow: var(--sh-offset);
  text-decoration: none;
  color: var(--vela-ink);
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-fast);
}
.area-card:hover,
.area-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--sh-lift);
  background: var(--white);
  color: var(--vela-ink);
}
.area-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  color: var(--vela-burgundy);
}
.area-card__blurb { margin: 0; font-size: 0.94rem; color: var(--vela-ink-soft); max-width: none; }
.area-card__go {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-utility);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vela-orange-deep);
}

/* --- Heads-up callout (ferry / confirm-first notes) --- */
.callout {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-3);
  align-items: start;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--vela-paper-3);
  border: 3px solid var(--vela-orange-deep);
  border-radius: var(--r-md);
}
.callout__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--vela-orange-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
}
.callout h3 { margin: 0 0 var(--sp-2); font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem); }
.callout p { margin: 0 0 var(--sp-2); max-width: none; font-size: 0.96rem; }
.callout p:last-child { margin-bottom: 0; }
.callout--info { border-color: var(--vela-teal-deep); }
.callout--info .callout__icon { background: var(--vela-teal-deep); }

/* --- Neighbourhood / landmark chips --- */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.chip-list li {
  padding: 0.4rem 0.85rem;
  background: var(--vela-paper-2);
  border: 2px solid var(--vela-gold);
  border-radius: var(--r-pill);
  font-family: var(--font-utility);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--vela-ink);
}
.chip-list--muted li { border-color: var(--vela-cream); color: var(--vela-ink-soft); background: var(--vela-paper-3); }

/* --- Nearby-areas links at the foot of each area page --- */
.nearby-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}
.nearby-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  background: var(--vela-paper-2);
  border: 2px solid var(--vela-burgundy);
  border-radius: var(--r-sm);
  color: var(--vela-burgundy);
  font-family: var(--font-utility);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.nearby-links a:hover { background: var(--white); }
.nearby-links span { font-weight: 400; color: var(--vela-ink-soft); font-size: 0.74rem; }

@media (min-width: 35em) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nearby-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 56.25em) {
  .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .radius-panel { grid-template-columns: 0.8fr 1.2fr; }
  .nearby-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   29. FEEDBACK PAGE (/feedback/)
       The review form itself is a third-party web component, so everything
       here styles the frame around it rather than its internals.
   ========================================================================== */

.review-embed {
  position: relative;
  /* Just enough to hold the loading state without leaving a void under the
     widget, which starts compact (a star rating) and grows as you use it. */
  min-height: 140px;
  margin-top: var(--sp-4);
}
/* Give the vendor component a sane baseline without reaching inside it */
.review-embed emr-collect-review-form {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  color: var(--vela-ink);
}

/* Shown until the component paints, then hidden by site.js */
.review-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--sp-4);
  color: var(--vela-ink-soft);
  font-size: 0.95rem;
}
.review-loading__spinner {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--vela-cream);
  border-top-color: var(--vela-burgundy);
  animation: review-spin 900ms linear infinite;
}
@keyframes review-spin { to { transform: rotate(360deg); } }

/* Revealed only if the third-party script never arrives */
.review-fallback {
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  background: var(--vela-paper-3);
  border: 3px dashed var(--vela-orange-deep);
  border-radius: var(--r-md);
}
.review-fallback h3 { margin-top: 0; }
.review-fallback p { max-width: none; }

/* Small print about who provides the form */
.review-vendor-note {
  margin-top: var(--sp-4);
  font-size: 0.84rem;
  color: var(--vela-ink-soft);
}
.review-vendor-note p { max-width: none; margin: 0; }

/* Ways-to-help list */
.help-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.help-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: 0.98rem;
}
.help-list__tick {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--vela-gold);
  color: var(--vela-burgundy-deep);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
}

@media (min-width: 56.25em) {
  .feedback-layout { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
}

/* ==========================================================================
   30. REVIEW CAROUSEL (homepage social proof)
       Another third-party web component, so this styles the frame only.
   ========================================================================== */

.review-carousel {
  position: relative;
  /* Measured on the live site: the carousel renders ~516px. Reserving close to
     that stops the page jumping when the reviews arrive. */
  min-height: 500px;
  margin-top: var(--sp-5);
}
.review-carousel emr-simple-carousel {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  color: var(--vela-ink);
}

/* Paper mount so the widget sits on the menu's own stationery */
.review-carousel__mount {
  background: var(--vela-paper-2);
  border: var(--bd-thick) solid var(--vela-burgundy);
  border-radius: var(--r-md);
  box-shadow: var(--sh-offset);
  padding: clamp(1rem, 2.4vw, 1.75rem);
}

.review-carousel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 480px;
  color: var(--vela-ink-soft);
  font-size: 0.95rem;
}

/* CTA sitting directly under the proof, where it does the most work */
.review-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-5);
}

/* ==========================================================================
   31. HERO REVIEW STRIP (area pages + order-direct pages)
       A compact <emr-avatars> trust strip sitting as a full-width row at the
       foot of the hero, below the two hero columns.
       NOTE: only this strip carries data-reviews-section — never the <section>
       itself, or a blocked widget would take the H1 and CTAs down with it.
   ========================================================================== */

.hero-reviews {
  position: relative;
  z-index: 2;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 3px dotted rgba(120, 28, 48, 0.35);
}

/* Light mount: an avatars row is a small trust cue, so it gets a soft frame
   rather than the heavy bordered panel used for full content blocks. */
.hero-reviews__mount {
  display: inline-block;
  max-width: 100%;
  background: var(--vela-paper-2);
  border: 2px solid var(--vela-gold);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-offset-sm);
  padding: clamp(0.6rem, 1.4vw, 0.9rem) clamp(0.9rem, 2vw, 1.4rem);
}

.hero-reviews__inner {
  position: relative;
  /* Measured on the live site: the avatars row renders ~60px on a phone and
     ~102px from tablet width up. Reserving those heights keeps the reveal from
     shifting the page. */
  min-height: 64px;
  display: flex;
  align-items: center;
}
@media (min-width: 48em) {
  .hero-reviews__inner { min-height: 104px; }
}
.hero-reviews__inner emr-avatars,
.hero-reviews__inner emr-simple-carousel {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  color: var(--vela-ink);
}

.hero-reviews__loading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  margin: 0;
  color: var(--vela-ink-soft);
  font-size: 0.9rem;
  white-space: nowrap;
}
@media (min-width: 48em) {
  .hero-reviews__loading { min-height: 96px; }
}

/* On narrow screens let the mount fill the width so the row can breathe */
@media (max-width: 35em) {
  .hero-reviews__mount { display: block; border-radius: var(--r-md); }
  .hero-reviews__loading { white-space: normal; justify-content: center; }
}