/* ==========================================================================
   3 Kings Mexican Kitchen — shared stylesheet
   Palette: cream / green / red / black only.
   Structure: 1 Tokens · 2 Reset · 3 Typography · 4 Texture & rules
              5 Buttons · 6 Header · 7 Hero · 8 Sections · 9 Gallery
              10 Location & hours · 11 Contact page · 12 Footer
              13 Action bar · 14 Motion · 15 Print
   ========================================================================== */

/* -------------------------------------------------- 1 · Tokens ---------- */
:root {
  --color-cream: #F4ECE4;
  --color-green: #0F712D;
  --color-red: #C21215;
  --color-black: #000000;

  /* Derived tints — all are opacity variations of the four brand colours. */
  --cream-90: rgba(244, 236, 228, 0.90);
  --cream-70: rgba(244, 236, 228, 0.70);
  --cream-45: rgba(244, 236, 228, 0.45);
  --cream-18: rgba(244, 236, 228, 0.18);
  --cream-10: rgba(244, 236, 228, 0.10);
  --black-88: rgba(0, 0, 0, 0.88);
  --black-70: rgba(0, 0, 0, 0.70);
  --black-38: rgba(0, 0, 0, 0.38);
  --black-14: rgba(0, 0, 0, 0.14);
  --black-08: rgba(0, 0, 0, 0.08);
  --black-04: rgba(0, 0, 0, 0.04);
  --green-22: rgba(15, 113, 45, 0.22);
  --green-12: rgba(15, 113, 45, 0.12);
  --red-55: rgba(194, 18, 21, 0.55);
  --red-30: rgba(194, 18, 21, 0.30);
  --red-14: rgba(194, 18, 21, 0.14);

  --font-display: "Bitter", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.845rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.375rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.55rem + 2.75vw, 3.9rem);

  --measure: 62ch;
  --shell: 1160px;
  --shell-tight: 940px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 4px;
  --header-h: 74px;
  --bar-h: 0px;
}

/* -------------------------------------------------- 2 · Reset ----------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--color-cream);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-x: hidden;
  /* Room for the fixed mobile action bar. */
  padding-bottom: var(--bar-h);
}

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

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

figure { margin: 0; }
picture { display: block; }

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

.is-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--color-cream); }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100vh;
  z-index: 200;
  padding: 0.85rem 1.4rem;
  background: var(--color-green);
  color: var(--color-cream);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

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

/* -------------------------------------------------- 3 · Typography ------ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: 0; }

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

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 0.9rem;
}
.is-dark .eyebrow { color: var(--color-cream); opacity: 0.82; }

.lede { font-size: var(--step-1); line-height: 1.6; }

/* -------------------------------------------------- 4 · Texture & rules - */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--tight { max-width: var(--shell-tight); }

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

main { scroll-margin-top: calc(var(--header-h) + 12px); }
main:focus { outline: none; }

/* Aged-plaster wash: three faint colour clouds over cream. */
.is-plaster {
  background-color: var(--color-cream);
  background-image:
    radial-gradient(60ch 40ch at 12% 8%, var(--black-04), transparent 70%),
    radial-gradient(50ch 34ch at 88% 24%, var(--green-12), transparent 72%),
    radial-gradient(46ch 30ch at 62% 96%, var(--red-14), transparent 70%);
}

/* Dark sections: black with a soft top sheen and a faint woven grain. */
.is-dark {
  background-color: var(--color-black);
  color: var(--color-cream);
  background-image:
    radial-gradient(70ch 42ch at 18% 0%, var(--cream-10), transparent 68%),
    radial-gradient(52ch 34ch at 92% 100%, var(--green-22), transparent 70%),
    repeating-linear-gradient(
      135deg,
      var(--cream-10) 0 1px,
      transparent 1px 7px
    );
  background-blend-mode: normal, normal, soft-light;
}
.is-dark p { color: var(--cream-90); }

/* Hand-painted sign rule: a short red bar sitting on a hairline. */
.rule {
  --rule-color: var(--color-red);
  display: block;
  width: 100%;
  max-width: 220px;
  height: 4px;
  margin: 1.35rem 0 1.6rem;
  background:
    linear-gradient(var(--rule-color), var(--rule-color)) left / 66px 4px no-repeat,
    linear-gradient(var(--black-14), var(--black-14)) left / 100% 1px no-repeat;
  background-position: left top, left 1.5px;
}
.is-dark .rule { background-image:
    linear-gradient(var(--rule-color), var(--rule-color)),
    linear-gradient(var(--cream-18), var(--cream-18)); }
.rule--center { margin-inline: auto; }

/* Traditional tile band — alternating green/red triangles, used sparingly. */
.tile-band {
  height: 10px;
  border: 0;
  margin: 0;
  background-image:
    linear-gradient(135deg, var(--color-green) 25%, transparent 25.5%),
    linear-gradient(225deg, var(--color-green) 25%, transparent 25.5%),
    linear-gradient(135deg, var(--color-red) 25%, transparent 25.5%),
    linear-gradient(225deg, var(--color-red) 25%, transparent 25.5%);
  background-size: 20px 10px;
  background-position: 0 0, 0 0, 10px 0, 10px 0;
  background-repeat: repeat-x;
  background-color: transparent;
}

/* -------------------------------------------------- 5 · Buttons --------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
    color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-green);
  color: var(--color-cream);
  border-color: var(--color-green);
}
.btn--primary:hover {
  /* Darkened with a black overlay so no colour outside the palette is used. */
  background-image: linear-gradient(var(--black-14), var(--black-14));
}

.btn--outline {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn--outline:hover { background: var(--color-black); color: var(--color-cream); }

.is-dark .btn--outline { color: var(--color-cream); border-color: var(--cream-45); }
.is-dark .btn--outline:hover {
  background: var(--color-cream);
  color: var(--color-black);
  border-color: var(--color-cream);
}

.btn--plain { text-transform: none; letter-spacing: 0.01em; }

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

/* Live open/closed pill — colour plus always-visible wording. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: var(--color-black);
  color: var(--color-cream);
  border: 1px solid var(--cream-45);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
}
.status::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.status[data-state="open"] {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-cream);
}
.status[data-state="closed"] {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-cream);
}

/* -------------------------------------------------- 6 · Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-black);
  color: var(--color-cream);
  border-bottom: 1px solid var(--cream-18);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--color-cream);
}
.brand picture { flex: none; }
.brand img { width: 50px; height: 50px; }
.brand__name {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.brand__name span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-70);
  margin-top: 0.18rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.7rem;
  background: transparent;
  border: 1px solid var(--cream-45);
  border-radius: var(--radius);
  color: var(--color-cream);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--color-cream); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 2vw, 1.6rem);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.35rem;
  color: var(--color-cream);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--step--1);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.site-nav a:hover { border-bottom-color: var(--color-red); }
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--color-red);
  color: var(--color-cream);
}
.site-nav .btn { min-height: 44px; padding: 0.55rem 1.15rem; border-bottom: 0; }
.site-nav .btn:hover { border-bottom-color: transparent; }

/* Mobile: JS collapses the panel. Without JS it stays open and usable. */
@media (max-width: 899px) {
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.85rem;
  }
  .site-nav li + li { border-top: 1px solid var(--cream-18); }
  .site-nav a {
    min-height: 52px;
    padding-inline: 0.2rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: 0.85rem;
  }
  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    border-bottom-color: transparent;
    border-left-color: var(--color-red);
  }
  .site-nav .btn { margin-top: 0.85rem; width: 100%; border-left: 0; }
  /* No JavaScript: the navigation stays open and usable, and the toggle
     button is hidden because it would do nothing. */
  .nav-toggle { display: none; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
}

@media (min-width: 900px) {
  .brand img { width: 56px; height: 56px; }
  .brand__name { display: block; }
  .nav-toggle, .js .nav-toggle { display: none; }
  .site-nav, .js .site-nav { display: block; }
}

/* -------------------------------------------------- 7 · Hero ------------ */
.hero { padding-block: clamp(2.75rem, 7vw, 5.5rem); overflow: hidden; }

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

.hero__logo {
  width: clamp(112px, 24vw, 168px);
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: 1.5rem;
}

.hero h1 { margin-bottom: 1.25rem; }
.hero p { margin-bottom: 0.25rem; }
.hero .status { margin-top: 1.6rem; }

/* Framed print: cream mat, thin red keyline, square corners. */
.frame {
  position: relative;
  padding: clamp(0.6rem, 1.6vw, 0.9rem);
  background: var(--color-cream);
  border: 1px solid var(--black-14);
  box-shadow: 0 1px 0 var(--black-08);
}
.frame::after {
  content: "";
  position: absolute;
  inset: clamp(0.3rem, 0.8vw, 0.45rem);
  border: 1px solid var(--red-55);
  pointer-events: none;
}
.frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  object-position: center;
}
.is-dark .frame { border-color: var(--cream-18); }

.hero__media { position: relative; }
/* The source photographs are small, so the media column is capped to keep the
   picture near its native size rather than scaling it up on wide screens.
   Capping the column rather than the frame keeps the decorative corner
   locked to the frame's edge at every width. */
.hero__media { width: min(430px, 100%); margin-inline: auto; }
/* Small green corner block echoing the tile motif. */
.hero__media { isolation: isolate; }
.hero__media .frame { position: relative; z-index: 1; }
.hero__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -10px; bottom: -10px;
  width: 46%; height: 46%;
  max-width: 150px; max-height: 150px;
  border-left: 6px solid var(--color-green);
  border-bottom: 6px solid var(--color-green);
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  .hero__media { margin-left: auto; margin-right: 0; }
}

/* Deliberate mobile order: logo → eyebrow → headline → photo → copy → CTAs. */
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero__copy { display: contents; }
  .hero__logo { order: 1; margin-bottom: 0.5rem; }
  .hero__intro { order: 2; }
  .hero__media { order: 3; }
  .hero__body { order: 4; }
  .hero__actions { order: 5; margin-top: 0; }
  .hero__status { order: 6; }
  .hero .status { margin-top: 0; }
}

/* -------------------------------------------------- 8 · Sections -------- */
.intro { text-align: center; }
.intro .shell { display: grid; justify-items: center; }
.intro p + p { margin-top: 1.15rem; }
.intro p { text-align: left; }

.values {
  width: 100%;
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); } }

.value {
  padding-top: 1.5rem;
  border-top: 3px solid var(--color-black);
  text-align: left;
}
.value:nth-child(2) { border-top-color: var(--color-green); }
.value:nth-child(3) { border-top-color: var(--color-red); }
.value svg { width: 42px; height: 42px; margin-bottom: 1rem; }
.value h3 { margin-bottom: 0.6rem; }
.value p { color: var(--black-88); }

.section__head { max-width: var(--measure); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .rule { margin-inline: auto; }
.section__head p { margin-top: 1rem; }
.section__head--center p { margin-inline: auto; }

/* -------------------------------------------------- 9 · Gallery --------- */
.gallery {
  display: grid;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  max-width: 900px;
  margin-inline: auto;
}

.gallery figure {
  overflow: hidden;
  background: var(--color-black);
  border: 1px solid var(--black-14);
  aspect-ratio: 7 / 5;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}
.gallery figure:hover img { transform: scale(1.03); }

@media (min-width: 480px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__feature { grid-column: span 2; }
}

/* Desktop: the feature fills two columns and both rows, so its height is
   exactly the two stacked tiles plus the gap. Every tile keeps the same 7:5
   crop and the feature lands within 2% of it, so nothing is cropped hard. */
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery__feature { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
}

/* -------------------------------------------------- 10 · Location ------- */
.order-cta { text-align: center; }
.order-cta h2 { max-width: 22ch; margin-inline: auto; }
.order-cta p { margin: 1.15rem auto 0; }
.order-cta .btn--plain { text-transform: none; letter-spacing: 0.01em; }

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

.location__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .location__grid { grid-template-columns: 1fr 0.85fr; }
}

.address {
  font-style: normal;
  font-size: var(--step-1);
  line-height: 1.5;
  font-family: var(--font-display);
  font-weight: 600;
}
.address a { color: inherit; text-decoration-color: var(--red-30); }
.address a:hover { text-decoration-color: currentColor; }

/* Hours card — strong black block on the cream location section. */
.hours-card {
  background: var(--color-black);
  color: var(--color-cream);
  padding: clamp(1.4rem, 3.5vw, 2.1rem);
  border-top: 6px solid var(--color-green);
}
.hours-card h3 {
  font-size: var(--step-1);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.hours { display: grid; gap: 0; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--cream-18);
  font-size: var(--step--1);
}
.hours div:last-child { border-bottom: 0; }
.hours dt { font-weight: 600; letter-spacing: 0.04em; }
.hours dd { margin: 0; color: var(--cream-90); text-align: right; }
.hours .is-closed {
  border-left: 3px solid var(--color-red);
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}
.hours .is-closed dd { color: var(--color-cream); font-weight: 700; }
.hours-card .status { margin-top: 1.25rem; }
.hours-note {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--cream-70);
}

/* -------------------------------------------------- 11 · Contact -------- */
.page-hero { padding-block: clamp(2.5rem, 6vw, 4rem); }
.page-hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) {
  .page-hero__grid { grid-template-columns: 1.2fr 0.8fr; }
}

.cards {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background: var(--color-cream);
  border: 1px solid var(--black-14);
  border-top: 5px solid var(--color-green);
}
.card:nth-child(2) { border-top-color: var(--color-black); }
.card:nth-child(3) { border-top-color: var(--color-red); }
.card svg { width: 34px; height: 34px; margin-bottom: 0.9rem; }
.card h3 { font-size: var(--step-2); margin-bottom: 0.55rem; }
.card p { font-size: var(--step--1); color: var(--black-88); }
.card .card__action { margin-top: auto; padding-top: 1.35rem; }
.card .btn { width: 100%; }

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-black);
  border: 1px solid var(--black-14);
  overflow: hidden;
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 640px) { .map-frame { aspect-ratio: 4 / 5; } }

.map__grid { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); align-items: center; }
@media (min-width: 900px) { .map__grid { grid-template-columns: 0.85fr 1.15fr; } }

.location__copy { margin-top: 1.25rem; }


/* ------------------------------------- 11b · Delivery-area pages -------- */
/* Breadcrumb trail above the page hero. */
.crumbs { margin-bottom: 1.5rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.crumbs li { display: flex; align-items: center; gap: 0.55rem; }
.crumbs li + li::before {
  content: "";
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--color-red);
}
.crumbs a { color: var(--cream-70); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--color-cream); border-bottom-color: var(--color-red); }
.crumbs [aria-current="page"] { color: var(--color-cream); font-weight: 600; }

/* Grid of neighbourhoods on the hub page. */
.area-grid {
  display: grid;
  gap: clamp(0.9rem, 2.2vw, 1.35rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 560px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }

.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  padding-right: 3.25rem;
  background: var(--color-cream);
  border: 1px solid var(--black-14);
  border-left: 4px solid var(--color-green);
  transition: transform 0.18s ease, border-left-color 0.18s ease,
    background-color 0.18s ease;
}
.area-card:nth-child(3n + 2) { border-left-color: var(--color-black); }
.area-card:nth-child(3n) { border-left-color: var(--color-red); }
.area-card h3 { font-size: var(--step-1); }
.area-card h3 a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
/* The whole card is the target; the heading link carries the accessible name. */
.area-card h3 a::after { content: ""; position: absolute; inset: 0; }
.area-card p { font-size: var(--step--1); color: var(--black-88); }
.area-card__go {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
  color: var(--color-green);
  transition: transform 0.18s ease;
}
.area-card__go svg { width: 22px; height: 22px; }
.area-card:hover { transform: translateY(-2px); background: var(--color-cream); }
.area-card:hover h3 a { border-bottom-color: var(--color-red); }
.area-card:hover .area-card__go { transform: translate(4px, -50%); }
.area-card:focus-within {
  outline: 3px solid var(--color-green);
  outline-offset: 3px;
}
.area-card h3 a:focus-visible { outline: none; }

/* Black delivery-radius panel beside the area copy. */
.radius-card {
  background: var(--color-black);
  color: var(--color-cream);
  padding: clamp(1.4rem, 3.5vw, 2.1rem);
  border-top: 6px solid var(--color-green);
}
.radius-card svg { width: 46px; height: 46px; margin-bottom: 1.1rem; }
.radius-card h3 { font-size: var(--step-1); margin-bottom: 0.75rem; }
.radius-card p { color: var(--cream-90); font-size: var(--step--1); }
.radius-card a { color: var(--color-cream); }
.radius-card .hours { margin-top: 1.25rem; }
.radius-card .status { margin-top: 1.25rem; }

/* Inline list of nearby neighbourhoods. */
.area-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.area-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  background: var(--color-cream);
  border: 1px solid var(--black-14);
  border-bottom: 3px solid var(--color-red);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.area-links a:hover { background: var(--color-black); color: var(--color-cream); }

.text-link {
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-red);
}
.text-link:hover { text-decoration-color: currentColor; }


/* ------------------------------------- 11c · Order-direct pages --------- */
.fee-compare {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 5vw, 3rem);
  max-width: 940px;
  margin-inline: auto;
  align-items: stretch;
}
@media (min-width: 820px) { .fee-compare { grid-template-columns: 1fr 1fr; } }

.fee-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
}
.fee-panel .fee-list { margin-top: auto; }
.fee-panel .fee-total { margin-top: 0; }
.fee-panel h3 { font-size: var(--step-1); margin-bottom: 1.1rem; }

/* The marketplace side sits on cream so the red reads as a warning. */
.fee-panel--market {
  background: var(--color-cream);
  border: 1px solid var(--black-14);
  border-top: 6px solid var(--color-red);
}
/* The direct side is the strong black card used elsewhere on the site. */
.fee-panel--direct {
  background: var(--color-black);
  color: var(--color-cream);
  border-top: 6px solid var(--color-green);
}
.fee-panel--direct p { color: var(--cream-90); }

.fee-list { display: grid; }
.fee-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--black-14);
  font-size: var(--step--1);
}
.fee-panel--direct .fee-list li { border-bottom-color: var(--cream-18); }
.fee-list li:last-child { border-bottom: 0; }
.fee-list__label { flex: 1 1 12ch; }
.fee-list__pct {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.fee-panel--market .fee-list__pct { color: var(--color-red); }

/* Proportional bar: the flex values are the percentages themselves. */
.fee-bar {
  display: flex;
  gap: 3px;
  height: 12px;
  margin: 1.35rem 0 0.9rem;
  max-width: none;
}
.fee-bar__seg { display: block; }
.fee-bar__seg--a { flex: 30; background: var(--color-red); }
.fee-bar__seg--b { flex: 3; background: var(--red-55); }
.fee-bar__seg--c { flex: 15; background: var(--red-30); }
.fee-bar--direct .fee-bar__seg--direct { flex: 4; background: var(--color-green); }
.fee-bar--direct { justify-content: flex-start; }
.fee-bar--direct .fee-bar__seg--direct { min-width: 12%; flex: none; width: 12%; }

.fee-total {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
}
.fee-panel--market .fee-total strong { color: var(--color-red); }

.fee-note {
  max-width: 68ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  text-align: center;
  font-size: var(--step--1);
  color: var(--black-88);
}

.disclaimer {
  max-width: 78ch;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--black-14);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--black-70);
}



/* Compact social-proof badge in a page hero. The avatars widget is configured
   for a light background (white card, near-black text), so it is given a cream
   panel to sit on; dropped straight onto the black hero its own text colour
   would be unreadable. If the widget is later re-themed for dark backgrounds
   in the review dashboard, this panel can be removed. */
.hero-proof {
  width: fit-content;
  max-width: min(100%, 430px);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: 0.7rem 0.95rem;
  background: var(--color-cream);
  border: 1px solid var(--black-14);
  border-left: 4px solid var(--color-green);
}
.hero-proof emr-avatars {
  display: block;
  min-height: 40px;
}

/* Review carousel on the homepage. Height is reserved so the section does not
   jump when the third-party widget finishes loading. */
.reviews__widget {
  max-width: 940px;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
}
.reviews__widget emr-simple-carousel {
  display: block;
  min-height: 200px;
}
.reviews__fallback { text-align: center; }
.reviews__fallback p { margin-inline: auto; }
.reviews__fallback .btn-row { justify-content: center; }
.reviews__aside {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  text-align: center;
  font-size: var(--step--1);
  color: var(--black-88);
}

/* ---------------------------------------------- 11e · FAQ accordion ----- */
/* Native <details>/<summary>: keyboard accessible, works without JavaScript,
   and the answers stay in the HTML for crawlers even while collapsed. */
.faq { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--black-14); }

.faq__item { border-bottom: 1px solid var(--black-14); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-black);
}
.faq__item summary::-webkit-details-marker { display: none; }

/* Plus / minus built from two bars, so no icon font or image is needed. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.28em;
  background:
    linear-gradient(var(--color-green), var(--color-green)) center / 100% 2px no-repeat,
    linear-gradient(var(--color-green), var(--color-green)) center / 2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after {
  background:
    linear-gradient(var(--color-red), var(--color-red)) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}
.faq__item summary:hover { color: var(--color-green); }

.faq__answer { padding: 0 0 1.15rem; }
.faq__answer p { color: var(--black-88); max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after { transition: none; }
}

/* -------------------------------------------- 11d · Feedback page ------- */
/* Copy column aligns with the left edge of the shell, matching the other
   page heroes; only the headline is capped so it wraps sensibly. */
.feedback-hero h1 { max-width: 20ch; }

/* Container for the third-party review widget. It is given a reserved height
   so the page does not jump when the embed finishes loading, and it is left
   otherwise unstyled so the widget's own styles are not fought. */
.review-form {
  max-width: 760px;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  padding: clamp(1.25rem, 3.5vw, 2rem);
  background: var(--color-cream);
  border: 1px solid var(--black-14);
  border-top: 6px solid var(--color-green);
}
.review-form emr-collect-review-form {
  display: block;
  min-height: 300px;
}
.review-form__fallback { text-align: center; }
.review-form__fallback p { margin-inline: auto; }
.review-form__fallback .btn-row { justify-content: center; }

/* -------------------------------------------------- 12 · Footer --------- */
.site-footer {
  background: var(--color-black);
  color: var(--color-cream);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2rem;
}
.site-footer h2 { font-size: var(--step-1); margin-bottom: 1rem; }
.site-footer p { color: var(--cream-90); }
.site-footer a { color: var(--cream-90); }

.footer__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.footer__brand img { width: 96px; height: 96px; margin-bottom: 1.1rem; }
.footer__brand p { font-size: var(--step--1); max-width: 34ch; }

.footer__address {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.7;
}
.footer__hours { font-size: var(--step--1); margin-top: 0.85rem; }

.footer__list li + li { margin-top: 0.55rem; }
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--step--1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer__list a:hover { border-bottom-color: var(--color-red); color: var(--color-cream); }

.socials { display: flex; gap: 0.6rem; margin-top: 1.3rem; }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--cream-45);
  border-radius: var(--radius);
  color: var(--color-cream);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.socials a:hover { background: var(--color-cream); color: var(--color-black); border-color: var(--color-cream); }
.socials svg { width: 21px; height: 21px; }

.footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--cream-18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--cream-70);
}
.footer__bottom p { color: inherit; }

/* -------------------------------------------------- 13 · Action bar ----- */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--cream-18);
  border-top: 1px solid var(--cream-18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.6rem 0.5rem;
  background: var(--color-black);
  color: var(--color-cream);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.action-bar a + a { background: var(--color-green); }
.action-bar svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 767px) { :root { --bar-h: 68px; } }
@media (min-width: 768px) { .action-bar { display: none; } }

/* -------------------------------------------------- 14 · Motion --------- */
[data-reveal] {
  opacity: 1;
  transform: none;
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@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;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .gallery figure:hover img { transform: none; }
}

/* -------------------------------------------------- 15 · Print ---------- */
@media print {
  .site-header, .action-bar, .map-frame, .btn--plain { text-transform: none; letter-spacing: 0.01em; }

.btn-row { display: none; }
  body { background: var(--color-cream); color: var(--color-black); padding-bottom: 0; }
  .is-dark { background: var(--color-cream) !important; color: var(--color-black) !important; }
}