/* ==========================================================================
   BOCADOS VENEZUELAN FOOD — styles.css
   Dark, rustic, editorial. Vanilla CSS only.

   Contents
   01. Tokens
   02. Reset & base
   03. Layout primitives
   04. Typography helpers & ornaments
   05. Buttons
   06. Texture (grain / vignette)
   07. Header & navigation
   08. Hero
   09. Marquee
   10. Location cards & status
   11. Food / brand
   12. Breakfast
   13. Order
   14. Story
   15. Final CTA
   16. Footer
   17. Order modal
   18. Contact page: locator
   19. Delivery areas
   20. Order-direct comparison
   20a. FAQ
   20b. Reviews (third-party widget)
   21. Reveal on scroll
   22. Reduced motion & print
   ========================================================================== */

/* 01. TOKENS ============================================================== */

:root {
  /* Brand — charcoal #2C2C2B, gold #D6B56D, white #FFFFFF, off-white #FCFCFC.
     Every other value below is a tonal derivation of those four. */
  --char:          #2C2C2B;
  --char-deep:     #232322;
  --char-deeper:   #1B1B1A;
  --char-raised:   #343432;
  --char-line:     #3E3E3B;

  --gold:          #D6B56D;
  --gold-bright:   #E6CB8E;
  --gold-dim:      #A88B4F;

  --white:         #FFFFFF;
  --off-white:     #FCFCFC;

  --text:          var(--off-white);
  --text-muted:    rgba(255, 255, 255, 0.70);
  --text-faint:    rgba(255, 255, 255, 0.52);

  --hairline:      rgba(214, 181, 109, 0.22);
  --hairline-soft: rgba(255, 255, 255, 0.09);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sign:    "Barlow Condensed", "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --shell:        75rem;          /* 1200px */
  --gutter:       clamp(1.25rem, 4.5vw, 2.5rem);
  --section-y:    clamp(4.5rem, 9vw, 8rem);
  --stack:        clamp(1.75rem, 3.5vw, 3rem);

  /* Depth — warm, never blue */
  --shadow-soft:  0 1.25rem 3rem rgba(0, 0, 0, 0.45);
  --shadow-lift:  0 1.75rem 3.5rem rgba(0, 0, 0, 0.55);
  --shadow-gold:  0 0.75rem 1.75rem rgba(214, 181, 109, 0.18);

  --radius:       4px;
  --radius-lg:    8px;

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h:     4.5rem;
}

@media (min-width: 60em) {
  :root { --header-h: 5.5rem; }
}

/* 02. RESET & BASE ======================================================== */

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

* { margin: 0; }

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

body {
  min-height: 100%;
  background-color: var(--char);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.7;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;      /* belt-and-braces against decorative overflow */
}

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

img { height: auto; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--gold-bright); }

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

ul, ol { list-style: none; padding: 0; }

[hidden] { display: none !important; }

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

/* Scroll containers we focus programmatically (for keyboard users landing on a
   section) shouldn't draw a ring around the whole panel — the scroll is the
   feedback. Interactive elements keep their focus ring. */
[tabindex="-1"]:focus { outline: none; }

button:disabled { opacity: 0.55; cursor: not-allowed; }
button:disabled:hover { transform: none; }

::selection { background: var(--gold); color: var(--char-deeper); }

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

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -150%);
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--char-deeper);
  font-family: var(--font-sign);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* 03. LAYOUT PRIMITIVES =================================================== */

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

.shell--narrow { max-width: 56rem; }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--deep   { background: var(--char-deep); }
.section--deeper { background: var(--char-deeper); }

/* A hairline that reads as a seam between panels rather than a hard border */
.section--seam { border-top: 1px solid var(--hairline-soft); }

.section__head {
  max-width: 46rem;
  margin-bottom: var(--stack);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.stack > * + * { margin-top: 1.15em; }

/* 04. TYPOGRAPHY & ORNAMENTS ============================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}

.h-hero {
  font-size: clamp(2.9rem, 1.7rem + 6.2vw, 6.25rem);
  line-height: 0.95;
  letter-spacing: -0.028em;
}

.h-section {
  font-size: clamp(2.1rem, 1.35rem + 3.4vw, 3.9rem);
  line-height: 1.0;
  letter-spacing: -0.022em;
}

.h-card {
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.15rem);
  line-height: 1.05;
}

/* Gold emphasis inside a display headline */
.h-accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 700;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.lede--wide { max-width: 60ch; }
.section__head .lede { margin-top: 1.15rem; }
.section__head--center .lede { margin-inline: auto; }

.body-text { color: var(--text-muted); text-wrap: pretty; }
.body-text strong { color: var(--white); font-weight: 500; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-sign);
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section__head--center .eyebrow { justify-content: center; }
.section__head--center .eyebrow::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* Diamond ornament — lifted from the diamond frame in the Bocados mark */
.ornament {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block: clamp(2rem, 4vw, 3rem);
  color: var(--gold);
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

.ornament__diamond {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.tag {
  display: inline-block;
  font-family: var(--font-sign);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* 05. BUTTONS ============================================================= */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: var(--hairline);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sign);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--gold);
  --btn-fg: var(--char-deeper);
  --btn-bd: var(--gold);
  font-weight: 700;
}
.btn--primary:hover {
  --btn-bg: var(--gold-bright);
  --btn-bd: var(--gold-bright);
  color: var(--char-deeper);
  box-shadow: var(--shadow-gold);
}

.btn--outline {
  --btn-fg: var(--gold);
  --btn-bd: var(--gold);
}
.btn--outline:hover {
  --btn-bg: rgba(214, 181, 109, 0.12);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

.btn--quiet {
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.28);
}
.btn--quiet:hover {
  --btn-bg: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.btn--small {
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
}

.btn--block { width: 100%; }

.btn__icon { flex: 0 0 auto; width: 1rem; height: 1rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.btn-row--center { justify-content: center; }

/* Full-width buttons on the smallest phones — thumb-friendly, no cramped rows */
@media (max-width: 26.25em) {
  .btn-row .btn { width: 100%; }
}

/* 06. TEXTURE ============================================================= */

/* Fine film grain. Fixed so it never scrolls with content, and never
   intercepts pointer events. Kept below 5% so text contrast is untouched. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* Warm tonal wash — the "dark wood" note, built from gold at low alpha */
.wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 12% -10%, rgba(214, 181, 109, 0.075), transparent 62%),
    radial-gradient(50rem 30rem at 92% 108%, rgba(214, 181, 109, 0.055), transparent 60%);
}

/* 07. HEADER & NAVIGATION ================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(44, 44, 43, 0.72);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header {
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
  }
}

.header.is-stuck {
  background: rgba(27, 27, 26, 0.94);
  border-bottom-color: var(--hairline);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.4);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--white);
}

.brand__mark {
  width: clamp(2.5rem, 2.1rem + 1.6vw, 3.25rem);
  height: auto;
  border-radius: 50%;
}

.brand__text {
  display: none;
  font-family: var(--font-sign);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}

@media (min-width: 30em) { .brand__text { display: block; } }

.brand__text b {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.18em;
  color: var(--white);
}

/* Nav — mobile drawer first, horizontal bar from 60em */
.nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 1.25rem var(--gutter) 2rem;
  background: var(--char-deeper);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform 0.35s var(--ease), visibility 0.35s;
}

.nav.is-open {
  transform: translateY(0);
  visibility: visible;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav__link {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-sign);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  background: none;
  border-inline: 0;
  border-top: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.nav__link:hover { color: var(--gold); }

.nav__link[aria-current="page"] { color: var(--gold); }

.nav__cta { margin-top: 1.25rem; }
.nav__cta .btn { width: 100%; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 1.25rem;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 60em) {
  .nav-toggle { display: none; }

  .nav {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .nav__link {
    padding: 0.35rem 0;
    border: 0;
    width: auto;
    font-size: 1rem;
    letter-spacing: 0.16em;
    position: relative;
  }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .nav__cta { margin-top: 0; }
  .nav__cta .btn { width: auto; }
}

/* 08. HERO ================================================================ */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(34rem, 88vh, 52rem);
  padding-block: clamp(4rem, 12vh, 8rem) clamp(2.5rem, 6vh, 4.5rem);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(3rem, 10vh, 7rem));
  overflow: hidden;
  background: var(--char-deeper);
}

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

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Scrim: deep at the bottom-left where the type sits, lighter top-right so
   the food stays visible. Tuned for AA contrast on white body copy. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(27, 27, 26, 0.86) 0%, rgba(27, 27, 26, 0.45) 34%, rgba(27, 27, 26, 0.9) 82%, var(--char) 100%),
    linear-gradient(90deg, rgba(27, 27, 26, 0.9) 0%, rgba(27, 27, 26, 0.55) 48%, rgba(27, 27, 26, 0.25) 100%);
}

.hero__inner { position: relative; }

.hero__eyebrow { color: var(--gold); }

.hero__title { margin-bottom: 1.25rem; }

.hero__copy {
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.6;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  text-wrap: pretty;
}

.hero__actions { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Live "open now" rail — conversion nudge straight under the CTAs */
.hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-soft);
  max-width: 44rem;
}

/* Stacked on phones so the location name never separates from its status. */
.status-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

@media (min-width: 30em) {
  .status-line {
    flex-direction: row;
    align-items: baseline;
    gap: 0.55rem;
  }
}

.status-line__name {
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.status-line__value { color: var(--text-muted); }
.status-line__value.is-open { color: var(--gold); }

/* 09. MARQUEE ============================================================= */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.15rem;
  background: var(--char-deeper);
  border-block: 1px solid var(--hairline);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-sign);
  font-size: clamp(1.0625rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.marquee__group span:nth-child(odd) { color: var(--gold); }

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: clamp(2rem, 8vw, 6rem);
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--char-deeper), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--char-deeper), transparent); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 10. LOCATION CARDS & STATUS ============================================= */

.locations__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.loc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: linear-gradient(175deg, var(--char-raised), var(--char-deep) 70%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}

/* Frame-within-a-frame — the rustic "menu card" cue, kept to a hairline */
.loc-card::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid rgba(214, 181, 109, 0.12);
  border-radius: calc(var(--radius-lg) - 3px);
  pointer-events: none;
}

.loc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(214, 181, 109, 0.42);
  box-shadow: var(--shadow-lift);
}

.loc-card.is-active {
  border-color: var(--gold);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(214, 181, 109, 0.35);
}

.loc-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.loc-card__name { margin-bottom: 0.35rem; }

.loc-card__note {
  font-family: var(--font-sign);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.loc-card__body { flex: 1 1 auto; }

.loc-card__rule {
  height: 1px;
  margin-block: 1.35rem;
  background: linear-gradient(90deg, var(--hairline), transparent);
}

.loc-card__label {
  font-family: var(--font-sign);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.4rem;
}

.loc-card__address {
  font-style: normal;
  color: var(--text-muted);
  line-height: 1.6;
}

.loc-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  text-decoration: none;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.loc-card__phone:hover { color: var(--gold); border-color: var(--gold); }

.hours {
  display: grid;
  gap: 0.4rem;
  font-size: 0.9688rem;
}

.hours__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}
.hours__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hours__row dt { font-weight: 500; }
.hours__row dd { margin: 0; color: var(--white); font-variant-numeric: tabular-nums; }
.hours__row dd.is-closed { color: var(--text-faint); }

.loc-card__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 30em) {
  .loc-card__actions--two { grid-template-columns: 1fr 1fr; }
}

/* Status pill */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  font-family: var(--font-sign);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.status__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.status.is-open {
  color: var(--gold);
  border-color: rgba(214, 181, 109, 0.45);
  background: rgba(214, 181, 109, 0.1);
}

.status.is-open .status__dot { animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

.status-note {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* 11. FOOD / BRAND ======================================================== */

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

@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.1fr 0.9fr; }
  .split--flip .split__media { order: -1; }
}

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.split__media:hover img { transform: scale(1.03); }

/* Warm tint so photography sits inside the dark palette instead of glaring */
.split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(27, 27, 26, 0.05), rgba(27, 27, 26, 0.42));
}

.split__media--tall img { aspect-ratio: 3 / 4; }

.dish-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
}

.dish {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  font-family: var(--font-sign);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.dish:hover {
  border-color: rgba(214, 181, 109, 0.4);
  background: rgba(214, 181, 109, 0.06);
}

.dish__diamond {
  flex: 0 0 auto;
  width: 0.4375rem;
  height: 0.4375rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* 12. BREAKFAST =========================================================== */

.breakfast { position: relative; overflow: hidden; }

.breakfast__panel {
  position: relative;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  background: linear-gradient(160deg, rgba(214, 181, 109, 0.09), rgba(27, 27, 26, 0.2) 55%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.clock-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.9rem 1.15rem;
  background: rgba(0, 0, 0, 0.22);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
  font-size: 0.9688rem;
}

.clock-note svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--gold); }

/* 13. ORDER =============================================================== */

.order-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--stack);
}

/* Each order tile is unmistakably one location: name, address, and a button
   that names the location again. */
.order-tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--char-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.order-tile:hover { transform: translateY(-3px); border-color: rgba(214, 181, 109, 0.42); }

.order-tile__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
}

.order-tile__meta {
  font-size: 0.9375rem;
  color: var(--text-faint);
  line-height: 1.5;
}

.order-tile .btn { margin-top: auto; }

/* 14. STORY =============================================================== */

.story { position: relative; }

.story__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--gold);
  margin-block: clamp(1.5rem, 3vw, 2.25rem);
  text-wrap: balance;
}

.story__figure { position: relative; }

.story__caption {
  margin-top: 0.85rem;
  font-family: var(--font-sign);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* 15. FINAL CTA =========================================================== */

.finale {
  position: relative;
  overflow: hidden;
  background: var(--char-deeper);
  text-align: center;
}

.finale__logo {
  width: clamp(4.5rem, 9vw, 6rem);
  margin: 0 auto 1.5rem;
  opacity: 0.9;
}

.finale .btn-row { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* 16. FOOTER ============================================================== */

.footer {
  background: var(--char-deeper);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Five columns: the brand block gets extra measure, the link lists share
   the rest evenly. Below this it falls back to the auto-fit above. */
@media (min-width: 68em) {
  .footer__grid { grid-template-columns: 1.6fr 0.95fr 1.1fr 1.15fr 1.2fr; }
}

.footer__brand { max-width: 22rem; }
.footer__mark { width: 4.5rem; margin-bottom: 1rem; border-radius: 50%; }

.footer__tagline {
  color: var(--text-faint);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.footer__title {
  font-family: var(--font-sign);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.15rem;
}

.footer__list { display: grid; gap: 0.6rem; }

.footer__list a,
.footer__list button {
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.footer__list a:hover,
.footer__list button:hover { color: var(--gold); }

.footer__address {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.footer__address + .footer__address { margin-top: 1.15rem; }

.footer__address b {
  display: block;
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--white);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.social__link:hover {
  color: var(--char-deeper);
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.social__link svg { width: 1.125rem; height: 1.125rem; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.875rem;
  color: var(--text-faint);
}

/* 17. ORDER MODAL ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.modal.is-open { opacity: 1; visibility: visible; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 14, 0.78);
  border: 0;
  padding: 0;
  cursor: pointer;
}

@supports (backdrop-filter: blur(1px)) {
  .modal__backdrop { backdrop-filter: blur(6px); }
}

.modal__dialog {
  position: relative;
  width: min(100%, 40rem);
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(170deg, var(--char-raised), var(--char-deep) 65%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  transform: translateY(1rem) scale(0.985);
  transition: transform 0.35s var(--ease);
}

.modal.is-open .modal__dialog { transform: none; }

.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline-soft);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.modal__close:hover { color: var(--gold); border-color: var(--gold); }
.modal__close svg { width: 0.875rem; height: 0.875rem; }

.modal__title {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  margin-bottom: 0.5rem;
  padding-right: 2.5rem;
}

.modal__intro { color: var(--text-muted); margin-bottom: 1.75rem; }

.modal__choices {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.choice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--white);
  text-decoration: none;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease);
}

.choice:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: rgba(214, 181, 109, 0.08);
  color: var(--white);
}

.choice__name {
  font-family: var(--font-sign);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}

.choice__meta { font-size: 0.875rem; color: var(--text-faint); line-height: 1.5; }
.choice .status { align-self: flex-start; }

.choice__go {
  margin-top: 0.35rem;
  font-family: var(--font-sign);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

body.is-locked { overflow: hidden; }

/* 18. CONTACT PAGE: LOCATOR =============================================== */

.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) clamp(3rem, 7vw, 5rem);
  margin-top: calc(var(--header-h) * -1);
  background: var(--char-deeper);
  overflow: hidden;
}

/* Constrain the measure of the hero's children rather than the shell itself,
   so the hero's left edge stays aligned with every section below it. */
.page-hero__inner { position: relative; }
.page-hero__inner > * { max-width: 52rem; }

.locator {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--char-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.locator__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.locator__question {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}

/* Wide enough to hold both buttons on one row; drops to its own full-width
   row (buttons splitting it evenly) once the header can't fit them. */
.locator__switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  flex: 1 1 19rem;
}

.switch-btn {
  flex: 1 1 8rem;
  max-width: 13rem;
  white-space: nowrap;
  min-height: 3rem;
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-sign);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

/* On phones the two choices become full-width, thumb-sized targets. */
@media (max-width: 30em) {
  .locator__switch { justify-content: stretch; }
  .switch-btn { flex-basis: 100%; max-width: none; }
}

.switch-btn:hover { color: var(--white); border-color: rgba(214, 181, 109, 0.45); }

.switch-btn[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--char-deeper);
  font-weight: 700;
}

.locator__panel {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
}

@media (min-width: 48em) {
  .locator__panel { grid-template-columns: 1.2fr 1fr; align-items: start; }
}

/* min-width:0 keeps a long unbreakable child (a status line, a URL) from
   forcing the grid tracks wider than the viewport. */
.locator__panel > * { min-width: 0; }
.locator__facts { display: grid; gap: 1rem; min-width: 0; }
.locator__facts * { min-width: 0; }

.locator__fact-label {
  font-family: var(--font-sign);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.25rem;
}

.locator__actions { display: grid; gap: 0.65rem; align-content: start; }

.locator__geo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-soft);
}

.locator__geo-msg {
  font-size: 0.9375rem;
  color: var(--text-muted);
  flex: 1 1 12rem;
  min-width: 0;
}

.locator__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
}

/* Social block on contact page */
.social-cta {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  justify-items: center;
  text-align: center;
}

.social-cta__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-sign);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease),
              background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.social-pill svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }

.social-pill:hover {
  transform: translateY(-2px);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--char-deeper);
}

/* 19. DELIVERY AREAS ====================================================== */

/* Breadcrumbs — express the Areas We Deliver → city hierarchy */
.crumbs {
  padding-block: 1rem 0;
  background: var(--char-deeper);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  font-family: var(--font-sign);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.crumbs li { display: flex; align-items: center; gap: 0.65rem; }

.crumbs li + li::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex: 0 0 auto;
  opacity: 0.7;
}

.crumbs a { color: var(--text-faint); text-decoration: none; transition: color 0.2s var(--ease); }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current="page"] { color: var(--white); }

/* The delivery-area page hero sits directly under breadcrumbs, so it needs
   less top padding than the standard page hero. */
.page-hero--tight {
  margin-top: 0;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
}

/* The "you're in the right place" line — deliberately louder than body copy */
.hook {
  margin-top: 1.25rem;
  padding-left: clamp(0.85rem, 2vw, 1.25rem);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  max-width: 40ch;
  text-wrap: pretty;
}

/* Delivery-zone panel */
.radius {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: linear-gradient(165deg, rgba(214, 181, 109, 0.09), rgba(27, 27, 26, 0.28) 58%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.radius__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.radius__loc {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
  margin-top: 0.35rem;
}

.radius__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-soft);
}

.radius__grid > * { min-width: 0; }

@media (min-width: 44em) {
  .radius__grid { grid-template-columns: repeat(3, 1fr); }
}

.radius .clock-note { margin-top: 1.5rem; align-items: flex-start; }

.radius__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 44em) {
  .radius__actions { grid-template-columns: repeat(3, 1fr); }
}

/* City fact list */
.fact-list {
  display: grid;
  gap: 0.65rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hairline-soft);
}

.fact-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.9688rem;
}

.fact__diamond {
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  translate: 0 -0.15rem;
}

/* Ordering steps */
.steps {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  counter-reset: step;
}

.step {
  padding: clamp(1.35rem, 3vw, 1.85rem);
  background: var(--char-deep);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s var(--ease);
}

.step:hover { border-color: rgba(214, 181, 109, 0.4); }

.step__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 0.65rem;
}

.step__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 0.6rem;
}

/* Area cards on the hub page */
.area-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(175deg, var(--char-raised), var(--char-deep) 72%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--white);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

.area-card:hover {
  transform: translateY(-3px);
  border-color: rgba(214, 181, 109, 0.5);
  box-shadow: var(--shadow-lift);
  color: var(--white);
}

.area-card__tag {
  font-family: var(--font-sign);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.area-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.05rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
}

.area-card__blurb {
  color: var(--text-muted);
  font-size: 0.9688rem;
  line-height: 1.6;
  flex: 1 1 auto;
}

.area-card__go {
  margin-top: 0.65rem;
  font-family: var(--font-sign);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Cross-links between area pages */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-sign);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease),
              background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.chip:hover {
  transform: translateY(-2px);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--char-deeper);
}

/* 20. ORDER-DIRECT COMPARISON ============================================= */

/* Fee stack — bars are decorative (aria-hidden); every figure is also in text. */
.fee-stack {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  max-width: 52rem;
}

.fee {
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--hairline-soft);
}

.fee:last-child { border-bottom: 0; padding-bottom: 0; }

.fee__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.75rem;
}

.fee__label {
  font-family: var(--font-sign);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.fee__pct {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
}

.fee__bar {
  display: block;
  width: 100%;
  height: 0.625rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.fee__fill {
  display: block;
  height: 100%;
  width: calc(var(--pct) * 1%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}

.fee__note {
  margin-top: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 52ch;
}

/* The total row carries the weight of the argument */
.fee--total {
  margin-top: 0.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgba(214, 181, 109, 0.08);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.fee--total .fee__label { color: var(--gold); letter-spacing: 0.16em; }
.fee--total .fee__pct { font-size: clamp(1.875rem, 1.5rem + 1.9vw, 3rem); }
.fee--total .fee__bar { height: 0.875rem; background: rgba(0, 0, 0, 0.3); }

/* Two-column comparison */
.compare {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.compare__col {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--char-deep);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
}

.compare__col--good {
  background: linear-gradient(165deg, rgba(214, 181, 109, 0.1), rgba(27, 27, 26, 0.3) 60%);
  border-color: rgba(214, 181, 109, 0.42);
}

.compare__tag {
  font-family: var(--font-sign);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline-soft);
}

.compare__col--good .compare__tag { color: var(--gold); }

.compare__list { display: grid; gap: 0.85rem; }

.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.compare__col--good .compare__list li { color: rgba(255, 255, 255, 0.85); }

.tick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.tick svg { width: 0.75rem; height: 0.75rem; }
.tick--no { color: var(--text-faint); }
.tick--yes { color: var(--gold); }

/* Timeline */
.timeline {
  display: grid;
  gap: 0;
  max-width: 44rem;
  border-left: 1px solid var(--hairline);
  margin-left: 0.3125rem;
}

.tl {
  position: relative;
  padding: 0 0 clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
}

.tl:last-child { padding-bottom: 0; }

.tl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--gold);
  background: var(--char-deep);
  transform: translateX(-50%) rotate(45deg);
}

.tl__year {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.tl__text { color: var(--text-muted); max-width: 54ch; line-height: 1.65; }

/* Trademark / figures small print */
.disclaimer {
  max-width: 62ch;
  margin-inline: auto;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-faint);
  text-align: center;
}

/* 20a. FAQ ================================================================ */

/* Native <details>/<summary>: keyboard-operable and screen-reader friendly
   without a line of JavaScript, and the answers stay in the HTML for crawlers
   and AI answer engines even while collapsed. */
.faq {
  border-top: 1px solid var(--hairline-soft);
}

.faq__item {
  border-bottom: 1px solid var(--hairline-soft);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
  transition: color 0.25s var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--gold); }

/* Chevron built from a rotated square edge — same geometry as the logo's
   diamond, so the ornament language stays consistent. */
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5em;
  margin-left: auto;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.faq__item[open] .faq__q { color: var(--gold); }
.faq__item[open] .faq__q::after { transform: rotate(225deg); margin-top: 0.75em; }

.faq__a {
  padding: 0 0 1.35rem;
  max-width: 68ch;
}

.faq__a p {
  color: var(--text-muted);
  line-height: 1.7;
  text-wrap: pretty;
}

/* 20b. REVIEWS (third-party widget) ======================================= */

/* The carousel is rendered by an external script into a shadow root, so its
   internals are deliberately left alone — it exposes no colour custom
   properties, and reaching past a shadow boundary would break on their next
   release. Its cards are white with dark text and gold stars, which reads as
   paper on charcoal and sits fine against this palette.

   This container only reserves space (limiting layout shift while the widget
   loads) and stops it overflowing on narrow screens. script.js clears the
   min-height once reviews render, and hides the section entirely if none do. */
.reviews__frame {
  min-height: 13rem;
  overflow-x: hidden;
}

.reviews__frame emr-simple-carousel {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Compact avatar strip under the hero CTAs.

   It sits on an off-white pill rather than straight on the charcoal, and that
   is not decoration. The widget hard-codes `color: #374151` on its shadow root
   and exposes no colour custom properties, so its summary line would render at
   1.36:1 against the hero background — invisible. On #FCFCFC the same text is
   10:1. Its avatars also carry white rings, so it was drawn for a light
   surface. Shrink-to-fit so it reads as a small trust badge, not a light band
   across a dark hero.

   script.js removes this strip — never the hero — if the widget returns
   nothing. */
.hero-proof {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 0.55rem clamp(0.9rem, 2vw, 1.25rem);
  min-height: 3.25rem;
  background: var(--off-white);
  border: 1px solid rgba(214, 181, 109, 0.4);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.hero-proof emr-avatars {
  display: block;
  max-width: 100%;
}

/* 21. REVEAL ON SCROLL ==================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.15rem);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* If JS never runs, nothing should stay invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* 22. 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__track { animation: none; transform: none; }
  .btn:hover,
  .loc-card:hover,
  .order-tile:hover,
  .social__link:hover,
  .social-pill:hover,
  .choice:hover { transform: none; }
  .split__media:hover img { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  body::after,
  .header,
  .modal,
  .marquee,
  .hero__media,
  .hero__scrim { display: none !important; }

  body { background: #fff; color: #000; }
  h1, h2, h3, .loc-card__name { color: #000; }
  .loc-card { border: 1px solid #999; break-inside: avoid; }
  .body-text, .lede, .loc-card__address, .hours__row dt { color: #333; }
  .hours__row dd { color: #000; }
}