/* =========================================================================
   TAQUERÍA LUNA ANTOJITOS MEXICANOS
   Brutalist static site stylesheet
   -------------------------------------------------------------------------
   01. Custom properties
   02. Reset and base styles
   03. Accessibility helpers
   04. Typography
   05. Layout utilities
   06. Header and navigation
   07. Buttons and links
   08. Status strip
   09. Homepage hero
   10. Ticker
   11. Content sections
   12. Menu cards
   13. Hours and location
   14. Contact page
   15. Map
   16. FAQ
   17. Social icons
   18. Footer
   19. Mobile sticky bar
   20. Motion
   21. Responsive breakpoints
   22. Reduced-motion rules
   23. Print styles
   ========================================================================= */


/* =========================================================================
   01. CUSTOM PROPERTIES
   ========================================================================= */

:root {
  /* Brand palette */
  --luna-blue: #1E9AD5;
  --ink: #050505;
  --paper: #FFFFFF;
  --verde: #0E7A3C;
  --rojo: #BD1B28;

  /* Derived surfaces */
  --blue-deep: #14719E;
  --bone: #F2F0EA;

  /* Structure */
  --rule: 4px;
  --rule-thick: 6px;
  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-hard-sm: 5px 5px 0 var(--ink);
  --shadow-hard-red: 10px 10px 0 var(--rojo);

  /* Type */
  --font-display: "Arial Black", "Helvetica Neue", Impact, Haettenschweiler, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  /* Spacing */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 8vw, 6rem);
  --wrap: 1320px;

  /* Focus */
  --focus-color: var(--ink);
}


/* =========================================================================
   02. RESET AND BASE STYLES
   ========================================================================= */

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

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

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

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

svg {
  display: block;
}

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

figure {
  margin: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

iframe {
  border: 0;
  max-width: 100%;
}

hr {
  border: 0;
  border-top: var(--rule) solid var(--ink);
  margin: 2.5rem 0;
}

::selection {
  background: var(--luna-blue);
  color: var(--ink);
}


/* =========================================================================
   03. ACCESSIBILITY HELPERS
   ========================================================================= */

/* Programmatic focus target for the skip link; no visible ring needed. */
#main:focus {
  outline: none;
}

.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;
  border: 0;
}

.skip-link {
  /* When revealed it sits over the dark status strip, so it needs a light ring. */
  --focus-color: var(--paper);
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 999;
  display: inline-block;
  padding: 0.85rem 1.25rem;
  background: var(--rojo);
  color: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

/* Focus visibility: dark ring by default, light ring on dark surfaces. */
:focus-visible {
  outline: 4px solid var(--focus-color);
  outline-offset: 3px;
}

.status-strip,
.section--ink,
.plan-visit,
.site-footer,
.mobile-bar,
.order-callout {
  --focus-color: var(--paper);
}

/* The ring sits outside the control, on the section background — so its
   colour is chosen by the surface (above), never by the button's own fill. */


/* =========================================================================
   04. TYPOGRAPHY
   ========================================================================= */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  /* Sized so the deliberate two-line break survives: the long line has to fit
     its column. The two-column range gets its own scale further down, because
     there the column is much narrower than the viewport. */
  font-size: clamp(1.65rem, 8.4vw, 4.25rem);
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(2.05rem, 5.4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1;
}

h4 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.05;
}

p {
  margin: 0 0 1.1rem;
  max-width: 62ch;
}

p:last-child {
  margin-bottom: 0;
}

/* Forces a deliberate line break inside a display heading. */
.h-line {
  display: block;
}

strong,
b {
  font-weight: 700;
}

a {
  color: inherit;
}

.lead {
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
  line-height: 1.55;
}

/* Section label / eyebrow */
.slab {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  margin: 0 0 1.25rem;
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}

.slab--verde {
  background: var(--verde);
  border-color: var(--ink);
}

.slab--rojo {
  background: var(--rojo);
}

.slab--paper {
  background: var(--paper);
  color: var(--ink);
}

/* Large editorial numerals — decorative only */
.numeral {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 9.5rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
  letter-spacing: -0.04em;
  user-select: none;
}

.numeral--solid {
  color: var(--ink);
  -webkit-text-stroke: 0;
}

.underline-slash {
  display: block;
  width: 96px;
  height: 10px;
  margin: 1.25rem 0 1.5rem;
  background: var(--rojo);
  border: 3px solid var(--ink);
}


/* =========================================================================
   05. LAYOUT UTILITIES
   ========================================================================= */

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

.section {
  padding-block: var(--section-y);
  border-bottom: var(--rule-thick) solid var(--ink);
  position: relative;
}

.section--blue {
  background-color: var(--luna-blue);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(5, 5, 5, 0.07) 0 14px,
    rgba(5, 5, 5, 0) 14px 28px
  );
  color: var(--ink);
}

.section--bone {
  background: var(--bone);
}

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

.section--ink .slab--paper,
.plan-visit .slab--paper {
  color: var(--ink);
}

.stack > * + * {
  margin-top: 1.25rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-top: 1.75rem;
}

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


/* =========================================================================
   06. HEADER AND NAVIGATION
   ========================================================================= */

.site-header {
  background: var(--paper);
  border-bottom: var(--rule-thick) solid var(--ink);
  position: relative;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}

.brand__mark {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.brand__text {
  display: block;
  line-height: 1;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.brand__sub {
  display: block;
  margin-top: 0.28rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--verde);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 3px solid transparent;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.site-nav__link:hover {
  border-color: var(--ink);
  background: var(--luna-blue);
}

.site-nav__link[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* A child page of a section: cue the parent without claiming to be it. */
.site-nav__link[data-section-current] {
  border-color: var(--ink);
  background: var(--luna-blue);
}


/* =========================================================================
   07. BUTTONS AND LINKS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.8rem 1.4rem;
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

.btn:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--ink);
}

.btn--primary {
  background: var(--rojo);
  color: var(--paper);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}

.btn--verde {
  background: var(--verde);
  color: var(--paper);
}

.btn--blue {
  background: var(--luna-blue);
  color: var(--ink);
}

.btn--paper {
  background: var(--paper);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
}

.section--ink .btn--ghost,
.plan-visit .btn--ghost,
.order-callout .btn--ghost {
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 5px 5px 0 var(--paper);
}

.section--ink .btn--ghost:hover,
.plan-visit .btn--ghost:hover,
.order-callout .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--paper);
}

.btn--lg {
  min-height: 62px;
  padding: 1rem 1.8rem;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  box-shadow: var(--shadow-hard);
}

.btn--lg:hover {
  box-shadow: 3px 3px 0 var(--ink);
}

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

/* External-link cue */
.ext::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ext-mask) center / contain no-repeat;
  mask: var(--ext-mask) center / contain no-repeat;
}

.ext {
  --ext-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h7v2H7v12h12v-5h2v7H5V3zm10 0h6v6h-2V6.4l-7.3 7.3-1.4-1.4L17.6 5H15V3z'/%3E%3C/svg%3E");
}

/* Inline text links */
.text-link {
  /* Inline rather than inline-flex so the external-link arrow stays in the
     text flow and follows the last line when the label wraps. The vertical
     padding keeps the tap target comfortably tall. */
  display: inline;
  padding-block: 0.6rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
}

.text-link.ext::after {
  vertical-align: -0.08em;
  margin-left: 0.35em;
}

.text-link:hover {
  text-decoration-color: var(--rojo);
}

.section--ink .text-link:hover,
.plan-visit .text-link:hover,
.order-callout .text-link:hover {
  text-decoration-color: var(--luna-blue);
}


/* =========================================================================
   08. STATUS STRIP
   ========================================================================= */

.status-strip {
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--rule) solid var(--ink);
  font-family: var(--font-display);
}

.status-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding-block: 0.6rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--paper);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
}

.status-text {
  font-size: clamp(0.875rem, 2.2vw, 1rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
}

.status-strip.is-open .status-badge {
  background: var(--verde);
  color: var(--paper);
  border-color: var(--paper);
}

.status-strip.is-open .status-badge::before {
  border-radius: 0;
}

.status-strip.is-break .status-badge {
  background: var(--luna-blue);
  color: var(--ink);
  border-color: var(--paper);
}

.status-strip.is-closed .status-badge {
  background: var(--rojo);
  color: var(--paper);
  border-color: var(--paper);
}


/* =========================================================================
   09. HOMEPAGE HERO
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--luna-blue);
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(5, 5, 5, 0.09) 0 16px,
      rgba(5, 5, 5, 0) 16px 32px
    );
  border-bottom: var(--rule-thick) solid var(--ink);
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -6% -40% 55%;
  height: 78%;
  background: var(--paper);
  transform: rotate(-8deg);
  opacity: 0.28;
  pointer-events: none;
}

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

.hero__eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.4rem 0.8rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2.1vw, 0.9375rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
}

.hero h1 {
  margin-bottom: 1.15rem;
  line-height: 0.98;
  color: var(--ink);
  text-shadow: 0.07em 0.07em 0 var(--paper);
}

.hero h1 .hero__line-2 {
  display: block;
  color: var(--paper);
  text-shadow: 0.07em 0.07em 0 var(--ink);
}

.hero__text {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 700;
}

.hero__support {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.55rem 0.9rem;
  background: var(--paper);
  border: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.35;
}

.hero__phone {
  margin-top: 1rem;
}

.hero__media {
  display: flex;
  justify-content: center;
}

.hero__frame {
  position: relative;
  width: min(100%, 460px);
  padding: clamp(0.75rem, 2.5vw, 1.4rem);
  background: var(--paper);
  border: var(--rule-thick) solid var(--ink);
  box-shadow: var(--shadow-hard-red);
}

.hero__frame img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.hero__frame:hover img {
  transform: rotate(-3deg) scale(1.02);
}

.hero__stamp {
  position: absolute;
  right: -14px;
  bottom: -22px;
  max-width: 62%;
  padding: 0.5rem 0.8rem;
  background: var(--verde);
  color: var(--paper);
  border: var(--rule) solid var(--ink);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  line-height: 1.2;
  text-align: center;
}


/* =========================================================================
   10. TICKER
   ========================================================================= */

.ticker {
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--rule-thick) solid var(--ink);
  overflow: hidden;
  padding-block: 0.7rem;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 38s linear infinite;
}

.ticker__group {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  /* Cancels the readable-measure cap and bottom margin inherited from `p`;
     without this the nowrap text overflows its own box and the groups
     visually collide. */
  max-width: none;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ticker__item {
  padding-inline: 0.6rem;
}

.ticker__item:nth-child(3n + 2) {
  color: var(--luna-blue);
}

.ticker__item:nth-child(3n + 3) {
  color: var(--paper);
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}


/* =========================================================================
   11. CONTENT SECTIONS
   ========================================================================= */

.intro__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.intro__aside {
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-hard);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.intro__numeral {
  display: block;
  margin-bottom: 0.5rem;
}

.intro__statement {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

.callout-bar {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--verde);
  color: var(--paper);
  border: var(--rule) solid var(--ink);
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.9vw, 1.125rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.25;
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.disclaimer {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 58ch;
}


/* =========================================================================
   12. MENU CARDS
   ========================================================================= */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.menu-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.menu-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--ink);
}

.menu-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-bottom: var(--rule) solid var(--ink);
  overflow: hidden;
  display: grid;
  place-items: center;
}

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

.menu-card__media--blue {
  background-color: var(--luna-blue);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(5, 5, 5, 0.16) 0 12px,
    rgba(5, 5, 5, 0) 12px 24px
  );
}

.menu-card__media--verde {
  background-color: var(--verde);
  background-image: radial-gradient(
    rgba(5, 5, 5, 0.28) 2.5px,
    rgba(5, 5, 5, 0) 2.6px
  );
  background-size: 18px 18px;
}

.menu-card__media--rojo {
  background-color: var(--rojo);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(5, 5, 5, 0.2) 0 10px,
      rgba(5, 5, 5, 0) 10px 20px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(5, 5, 5, 0.2) 0 10px,
      rgba(5, 5, 5, 0) 10px 20px
    );
}

.menu-card__glyph {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  line-height: 0.85;
  color: var(--ink);
  letter-spacing: -0.04em;
  transform: rotate(-6deg);
  text-align: center;
  padding-inline: 0.5rem;
}

.menu-card__glyph span {
  display: block;
  font-size: 0.26em;
  letter-spacing: 0.18em;
  margin-top: 0.5em;
  transform: rotate(0deg);
}

.menu-card__index {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.3rem 0.65rem;
  background: var(--ink);
  color: var(--paper);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
}

.menu-card__body {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1 1 auto;
}

.menu-card__tag {
  align-self: flex-start;
  padding: 0.28rem 0.6rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}

.menu-card__tag--verde {
  background: var(--verde);
}

.menu-card__tag--rojo {
  background: var(--rojo);
}

.menu-card__tag--blue {
  background: var(--luna-blue);
  color: var(--ink);
}

.menu-card h3 {
  margin: 0;
}

.menu-card__body p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.menu-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
}


/* -------------------------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------------------- */

.breadcrumb {
  background: var(--bone);
  border-bottom: var(--rule) solid var(--ink);
  padding-block: 0.7rem;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.breadcrumb__list li + li::before {
  content: "/";
  color: var(--rojo);
}

.breadcrumb__list a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.breadcrumb__list a:hover {
  color: var(--rojo);
}

.breadcrumb__list [aria-current="page"] {
  padding: 0.2rem 0.45rem;
  background: var(--ink);
  color: var(--paper);
}

/* -------------------------------------------------------------------------
   Delivery-area cards
   ---------------------------------------------------------------------- */

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.area-card {
  display: flex;
}

.area-card__link {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.area-card__link:hover {
  background: var(--luna-blue);
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--ink);
}

.area-card__flag {
  align-self: flex-start;
  padding: 0.28rem 0.6rem;
  background: var(--verde);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}

.area-card__flag--partial {
  background: var(--rojo);
}

.area-card__name {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.area-card__meta {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 700;
}

.area-card__go {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* -------------------------------------------------------------------------
   Chips: menu suggestions and sibling-area links
   ---------------------------------------------------------------------- */

.picks-card {
  padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
}

.chip-list__title {
  margin-bottom: 1rem;
}

.chip-list,
.area-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.chip {
  padding: 0.6rem 0.95rem;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.area-chip-list {
  margin-top: 1.5rem;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--paper);
  box-shadow: 4px 4px 0 var(--paper);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.area-chip:hover {
  background: var(--luna-blue);
  color: var(--ink);
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--paper);
}

/* -------------------------------------------------------------------------
   Fee comparison
   ---------------------------------------------------------------------- */

.fee-compare {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}

.fee-card {
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  overflow: hidden;
}

.fee-card__title {
  margin: 0;
  padding: 1rem 1.15rem;
  border-bottom: var(--rule) solid var(--ink);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}

.fee-card--market .fee-card__title {
  background: var(--rojo);
  color: var(--paper);
}

.fee-card--direct .fee-card__title {
  background: var(--verde);
  color: var(--paper);
}

.fee-list {
  padding: 0.35rem 1.15rem 0;
}

/* Stacked rather than side-by-side: the amounts vary too much in width to
   align their descriptions in a column. */
.fee-list li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 0;
  border-bottom: 3px solid var(--ink);
}

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

.fee-list__amt {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.fee-card--market .fee-list__amt {
  color: var(--rojo);
}

.fee-card--direct .fee-list__amt {
  color: var(--verde);
}

.fee-list__what {
  font-size: 1rem;
  line-height: 1.45;
}

.fee-total {
  margin: 0;
  padding: 1rem 1.15rem;
  border-top: var(--rule) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
}

.fee-card--market .fee-total strong {
  color: var(--luna-blue);
}

.fee-card--direct .fee-total strong {
  color: var(--luna-blue);
}

/* -------------------------------------------------------------------------
   Third-party review form
   The markup inside <emr-collect-review-form> is rendered by an external
   script, so this only frames it and stops it forcing horizontal scroll.
   ---------------------------------------------------------------------- */

.review-embed {
  max-width: 46rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
}

.review-embed emr-collect-review-form {
  display: block;
}

.review-embed :where(img, iframe, canvas, video, svg, table) {
  max-width: 100%;
}

.review-embed :where(input, textarea, select, button) {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   Homepage review carousel
   Same shadow-DOM caveat as .review-embed: this only frames the widget.
   min-height reserves space so the async load does not shift the page.
   ---------------------------------------------------------------------- */

.review-carousel {
  /* Reserves roughly the widget's own height so the async load barely shifts
     the page. Kept deliberately a little short: a permanent empty gap is worse
     than a small one-time shift. Tune once you can see the live widget. */
  min-height: 300px;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
}

.review-carousel emr-simple-carousel {
  display: block;
}

.review-carousel :where(img, iframe, canvas, video, svg, table) {
  max-width: 100%;
}

.reviews-cta {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: none;
}

/* -------------------------------------------------------------------------
   Hero social proof (avatars widget)
   Sits above the fold, so the reserved height matters more here than it does
   for the homepage carousel — without it the widget shoves the hero's support
   and phone lines down as it loads.
   ---------------------------------------------------------------------- */

.hero-reviews {
  /* On a white chip, not straight onto the blue hero: the widget's own palette
     is mid-grey (#6b7280 and similar), which drops to about 1.5:1 against Luna
     blue. Shadow DOM puts it out of reach of page CSS, so the fix is the
     surface underneath. Matches the .hero__support box directly below it. */
  width: fit-content;
  max-width: 100%;
  min-height: 74px;
  margin-top: 1.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.hero-reviews emr-avatars {
  display: block;
}

.hero-reviews :where(img, svg) {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   Plain bullet list and fine print
   ---------------------------------------------------------------------- */

.plain-list {
  margin-top: 0.25rem;
}

.plain-list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.5rem;
  border-bottom: 2px solid var(--ink);
  font-size: 1.0625rem;
  line-height: 1.45;
}

.plain-list li:last-child {
  border-bottom: 0;
}

.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--rojo);
}

.fine-print {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 3px solid var(--luna-blue);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 72ch;
}

/* =========================================================================
   13. HOURS AND LOCATION
   ========================================================================= */

.order-callout {
  background-color: var(--rojo);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(5, 5, 5, 0.12) 0 18px,
    rgba(5, 5, 5, 0) 18px 36px
  );
  color: var(--paper);
  border-bottom: var(--rule-thick) solid var(--ink);
  padding-block: var(--section-y);
  text-align: center;
}

.order-callout .slab {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

.order-callout h2 {
  max-width: 20ch;
  margin-inline: auto;
  line-height: 0.98;
  text-shadow: 0.07em 0.07em 0 var(--ink);
}

.order-callout p {
  margin-inline: auto;
  font-size: clamp(1.0625rem, 2vw, 1.2rem);
  font-weight: 700;
}

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

.locate__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.address-card {
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}

.address-card__label {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.25rem 0.6rem;
  background: var(--luna-blue);
  border: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.address {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
}

.hours-mini {
  margin-top: 1.5rem;
  border-top: var(--rule) solid var(--ink);
}

.hours-mini__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 2px solid var(--ink);
}

.hours-mini__day {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hours-mini__time {
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}

.hours-mini__row.is-today {
  background: var(--luna-blue);
  margin-inline: -0.6rem;
  padding-inline: 0.6rem;
  border-bottom-color: var(--ink);
}

.today-flag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.note-block {
  margin-top: 1.35rem;
  padding: 0.85rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  line-height: 1.45;
}

.note-block p {
  max-width: none;
}

.truck-figure {
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
}

.truck-figure img {
  width: 100%;
  border-bottom: var(--rule) solid var(--ink);
}

.truck-figure figcaption {
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
}


/* =========================================================================
   14. CONTACT PAGE
   ========================================================================= */

.page-hero {
  background-color: var(--luna-blue);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(5, 5, 5, 0.09) 0 16px,
    rgba(5, 5, 5, 0) 16px 32px
  );
  border-bottom: var(--rule-thick) solid var(--ink);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

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

.page-hero h1 {
  line-height: 0.98;
  color: var(--ink);
  text-shadow: 0.07em 0.07em 0 var(--paper);
  margin-bottom: 1.1rem;
}

.page-hero h1 .hero__line-2 {
  display: block;
  color: var(--paper);
  text-shadow: 0.07em 0.07em 0 var(--ink);
}

.page-hero p {
  font-weight: 700;
  font-size: clamp(1.0625rem, 2vw, 1.2rem);
}

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

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
}

.contact-card__index {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--verde);
}

.contact-card h3 {
  margin: 0;
}

.contact-card p {
  margin: 0;
  font-size: 1rem;
  flex: 1 1 auto;
}

.contact-card .text-link {
  align-self: flex-start;
  font-size: 1.0625rem;
}

.hours-table {
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
}

.hours-table caption {
  caption-side: top;
  text-align: left;
  padding: 0.9rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hours-table th,
.hours-table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 3px solid var(--ink);
  vertical-align: top;
}

.hours-table tr:last-child th,
.hours-table tr:last-child td {
  border-bottom: 0;
}

.hours-table th {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  width: 45%;
}

.hours-table td {
  font-weight: 700;
  font-size: 1.0625rem;
}

.hours-table td span {
  display: block;
}

.hours-table .is-closed-day td {
  color: var(--rojo);
}

.hours-table tr.is-today {
  background: var(--luna-blue);
}

.hours-table tr.is-today.is-closed-day td {
  color: var(--ink);
}

.plan-visit {
  background-color: var(--ink);
  color: var(--paper);
  border-bottom: var(--rule-thick) solid var(--ink);
  padding-block: var(--section-y);
}

.plan-visit h2 {
  color: var(--paper);
}

.plan-visit h2 span {
  display: block;
  color: var(--luna-blue);
}


/* =========================================================================
   15. MAP
   ========================================================================= */

.map-frame {
  position: relative;
  border: var(--rule-thick) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--bone);
  overflow: hidden;
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 45vw, 460px);
  border: 0;
}

.map-fallback {
  padding: 1rem 1.15rem;
  border-top: var(--rule) solid var(--ink);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.5;
}

.map-fallback p {
  max-width: none;
}


/* =========================================================================
   16. FAQ
   ========================================================================= */

.faq-list {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
}

.faq-item {
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-hard-sm);
}

.faq-item[open] {
  box-shadow: var(--shadow-hard);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  list-style: none;
}

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

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.35rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "–";
  background: var(--rojo);
}

.faq-item summary:hover {
  background: var(--luna-blue);
}

.faq-item__body {
  padding: 0 1.15rem 1.15rem;
  border-top: 3px solid var(--ink);
  padding-top: 1.05rem;
}

.faq-item__body p {
  margin: 0;
  font-size: 1.0625rem;
}


/* =========================================================================
   17. SOCIAL ICONS
   ========================================================================= */

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.social-link {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--paper);
  color: var(--ink);
  border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.social-link svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.social-link:hover {
  background: var(--luna-blue);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

.section--ink .social-link,
.plan-visit .social-link,
.site-footer .social-link {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 5px 5px 0 var(--paper);
}

.section--ink .social-link:hover,
.plan-visit .social-link:hover,
.site-footer .social-link:hover {
  background: var(--luna-blue);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--paper);
}

.social-row--sm .social-link {
  width: 48px;
  height: 48px;
  box-shadow: 3px 3px 0 var(--ink);
}

.social-row--sm .social-link svg {
  width: 22px;
  height: 22px;
}


/* =========================================================================
   18. FOOTER
   ========================================================================= */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem);
  border-top: var(--rule-thick) solid var(--ink);
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.footer__brand {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.footer__brand img {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border: 3px solid var(--paper);
  border-radius: 50%;
}

.footer__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  max-width: none;
}

.footer__tagline {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--luna-blue);
  line-height: 1.4;
  margin: 0;
  max-width: none;
}

.footer__heading {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--luna-blue);
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--luna-blue);
}

.footer__list li + li {
  margin-top: 0.6rem;
}

.footer__list--tight li + li {
  margin-top: 0.1rem;
}

.footer__list--tight a {
  min-height: 44px;
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 700;
}

.footer__list a:hover {
  color: var(--luna-blue);
}

.footer__address {
  font-style: normal;
  line-height: 1.55;
}

.footer__hours {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.65;
  margin: 0;
  max-width: none;
}

.footer__hours span {
  display: block;
}

.footer__hours .is-closed-line {
  color: var(--luna-blue);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: var(--rule) solid var(--luna-blue);
  font-size: 0.9375rem;
}

.footer__bottom p {
  margin: 0;
  max-width: none;
}


/* =========================================================================
   19. MOBILE STICKY BAR
   ========================================================================= */

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  background: var(--ink);
  border-top: var(--rule) solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 60px;
  padding: 0.75rem 0.85rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
}

.mobile-bar__link--order {
  background: var(--rojo);
  color: var(--paper);
  border-right: var(--rule) solid var(--ink);
}

.mobile-bar__link--call {
  background: var(--paper);
  color: var(--ink);
}

.mobile-bar__link:focus-visible {
  outline-offset: -6px;
}


/* =========================================================================
   20. MOTION
   ========================================================================= */

.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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


/* =========================================================================
   21. RESPONSIVE BREAKPOINTS
   ========================================================================= */

/* Small phones */
@media (max-width: 419px) {
  .brand__mark {
    width: 52px;
    height: 52px;
  }

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

  .btn-row {
    gap: 0.75rem;
  }

  .hero__stamp {
    right: -6px;
  }
}

/* Keep the weekly hours on one line per service period on small screens */
@media (max-width: 560px) {
  .hours-table th,
  .hours-table td {
    padding: 0.75rem 0.7rem;
  }

  .hours-table th {
    width: auto;
  }

  .hours-table td {
    white-space: nowrap;
  }
}

/* Keep the whole header to two compact rows on phones */
@media (max-width: 559px) {
  .site-header__inner {
    gap: 0.55rem;
    padding-block: 0.7rem;
  }

  /* Text links wrap across as many rows as they need; Order Online always
     takes a full row of its own so the primary action stays large. */
  .site-nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.4rem 0.35rem;
    align-items: center;
  }

  .site-nav__link {
    padding: 0.5rem 0.6rem;
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
  }

  .site-nav .btn {
    flex: 1 0 100%;
    min-height: 50px;
    box-shadow: 4px 4px 0 var(--ink);
  }
}

/* Reserve room for the sticky bar on small screens */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* Tablet and up */
@media (min-width: 600px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .mobile-bar {
    display: none;
  }

  .split--contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 760px) {
  .fee-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.6rem, 4.6vw, 4.25rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  }

  .intro__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .locate__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
  }
}

@media (min-width: 1080px) {
  .footer__grid {
    grid-template-columns: 1.45fr 1fr 1fr 0.95fr;
  }
}

@media (min-width: 1100px) {
  .site-header__inner {
    padding-block: 1.1rem;
  }

  .brand__mark {
    width: 74px;
    height: 74px;
  }
}


/* =========================================================================
   22. REDUCED-MOTION RULES
   ========================================================================= */

@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;
  }

  .ticker__track {
    animation: none !important;
    width: 100%;
  }

  .ticker {
    overflow-x: auto;
  }

  .ticker__group + .ticker__group {
    display: none;
  }

  .ticker__group {
    margin: 0;
  }

  .has-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__frame:hover img,
  .menu-card:hover,
  .area-card__link:hover,
  .area-chip:hover,
  .btn:hover,
  .social-link:hover {
    transform: none !important;
  }
}


/* =========================================================================
   23. PRINT STYLES
   ========================================================================= */

@media print {
  .skip-link,
  .ticker,
  .area-chip-list,
  .mobile-bar,
  .map-frame iframe,
  .hero::before {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
    padding-bottom: 0;
  }

  .section,
  .hero,
  .page-hero,
  .order-callout,
  .plan-visit,
  .site-footer,
  .status-strip {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    padding-block: 1rem;
  }

  .btn,
  .menu-card,
  .contact-card,
  .address-card,
  .hours-table,
  .faq-item {
    box-shadow: none !important;
    border-color: #000 !important;
  }

  .hero h1,
  .page-hero h1,
  .order-callout h2 {
    text-shadow: none !important;
    color: #000 !important;
  }

  .hero h1 .hero__line-2,
  .page-hero h1 .hero__line-2,
  .plan-visit h2 span {
    color: #000 !important;
  }

  .faq-item__body {
    display: block !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}