/* ==========================================================================
   LA ROSA PIZZA — Highland Park, NJ
   styles.css

   TABLE OF CONTENTS
   01. Tokens & custom properties
   02. Reset & base
   03. Texture (grain / halftone / stripes)
   04. Typography utilities
   05. Buttons
   06. Layout primitives
   07. Header & navigation
   08. Mobile menu + sticky order bar
   09. Marquee
   10. Hero
   11. Intro / brand
   12. Editorial photo band
   13. Menu preview
   14. Statement break
   15. Ordering
   16. Location & hours
   17. Final CTA
   18. Contact page
   19. Footer
   20. Motion & reveal
   21. Delivery areas (hub + town pages)
   22. Order-direct landing pages
   23. Responsive
   ========================================================================== */


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

:root {
  /* Brand — these four colors only */
  --yellow: #F6FF08;
  --red:    #F60504;
  --white:  #FFFFFF;
  --black:  #000000;

  /* Transparency variations of the brand palette */
  --black-62: rgba(0, 0, 0, 0.62);   /* photo scrim */
  --black-12: rgba(0, 0, 0, 0.12);   /* hairlines */
  --white-70: rgba(255, 255, 255, 0.70);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-15: rgba(255, 255, 255, 0.15);

  /* Type */
  --font-display: "Anton", "Haettenschweiler", "Arial Narrow", "Impact", sans-serif;
  --font-heavy:   "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-mega:   clamp(3.1rem, 11.5vw, 10.5rem);
  --fs-xxl:    clamp(2.6rem, 7.6vw, 6.5rem);
  --fs-xl:     clamp(2.1rem, 5.4vw, 4.4rem);
  --fs-lg:     clamp(1.65rem, 3.4vw, 2.6rem);
  --fs-md:     clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:   clamp(1rem, 1.15vw, 1.125rem);
  --fs-sm:     0.8125rem;
  --fs-xs:     0.6875rem;

  /* Spacing */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4rem, 9vw, 8.5rem);
  --maxw: 1440px;

  /* Structure */
  --rule: 3px;
  --rule-thick: 5px;
  --shadow-hard: 10px 10px 0 var(--black);
  --shadow-hard-sm: 6px 6px 0 var(--black);
  --header-h: 84px;
}


/* ==========================================================================
   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) + 20px);
}

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img { height: auto; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* Focus — always visible, always high contrast */
:focus { outline: none; }

:focus-visible {
  outline: 4px solid var(--red);
  outline-offset: 3px;
}

/* On red or black surfaces, switch the focus ring to yellow */
.hero :focus-visible,
.band :focus-visible,
.sec--black :focus-visible,
.sec--red :focus-visible,
.footer :focus-visible,
.mobile-menu :focus-visible,
.marquee--black :focus-visible {
  outline-color: var(--yellow);
}

::selection {
  background: var(--yellow);
  color: var(--black);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 700;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-heavy);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  border: var(--rule) solid var(--black);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus { top: 12px; }

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


/* ==========================================================================
   03. TEXTURE — newsprint grain, halftone dots, awning stripes
   ========================================================================== */

/* Fine print grain over the whole page. Sits above content, ignores pointer. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halftone dot field, used behind a couple of dark blocks */
.halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='3' cy='3' r='2.1' fill='%23F6FF08'/%3E%3C/svg%3E");
}

/* Awning stripe — hard-stop bars, no color blending */
.stripe-awning {
  height: 12px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--red) 0, var(--red) 14px,
    var(--white) 14px, var(--white) 28px,
    var(--yellow) 28px, var(--yellow) 42px,
    var(--white) 42px, var(--white) 56px
  );
  border-bottom: var(--rule) solid var(--black);
}

/* Checker strip — used once, at the top of the footer */
.stripe-checker {
  height: 16px;
  background-color: var(--yellow);
  background-image:
    repeating-linear-gradient(90deg, var(--black) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--black) 8px 16px);
  background-size: 16px 8px, 16px 8px;
  background-position: 0 0, 0 8px;
  background-repeat: repeat-x, repeat-x;
}

/* Menu-style dotted leader rule */
.rule-dotted {
  flex: 1 1 auto;
  height: 0;
  border-bottom: 3px dotted currentColor;
  opacity: 0.35;
  margin: 0 12px;
  transform: translateY(-5px);
}


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

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: 0.005em;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.display--mega { font-size: var(--fs-mega); }
.display--xxl  { font-size: var(--fs-xxl); }
.display--xl   { font-size: var(--fs-xl); }
.display--lg   { font-size: var(--fs-lg); line-height: 0.92; }

/* Print-registration misalignment — the cheap-ink look, done on purpose */
.print-red    { text-shadow: 0.055em 0.055em 0 var(--red); }
.print-yellow { text-shadow: 0.055em 0.055em 0 var(--yellow); }
.print-black  { text-shadow: 0.055em 0.055em 0 var(--black); }

/* Hollow storefront lettering */
.outline-yellow {
  color: transparent;
  -webkit-text-stroke: 2px var(--yellow);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heavy);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
}

.eyebrow .star { width: 14px; height: 14px; flex: none; }

.lede {
  font-size: var(--fs-md);
  line-height: 1.55;
  max-width: 46ch;
}

.lede p + p { margin-top: 0.6rem; }

.text-yellow { color: var(--yellow); }
.text-red    { color: var(--red); }
.text-white  { color: var(--white); }

.star { fill: currentColor; }


/* ==========================================================================
   05. BUTTONS — printed-sign tactility
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 16px 30px;
  font-family: var(--font-heavy);
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: var(--rule) solid var(--black);
  border-radius: 2px;
  box-shadow: var(--shadow-hard-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--black);
}

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

.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--red    { background: var(--red);    color: var(--white); }
.btn--black  { background: var(--black);  color: var(--yellow); }
.btn--white  { background: var(--white);  color: var(--black); }

.btn--yellow:hover { background: var(--red);    color: var(--white); }
.btn--red:hover    { background: var(--black);  color: var(--yellow); }
.btn--black:hover  { background: var(--yellow); color: var(--black); }
.btn--white:hover  { background: var(--yellow); color: var(--black); }

/* Ghost button that lives on black */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  box-shadow: 6px 6px 0 var(--yellow);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--white);
  color: var(--black);
  box-shadow: 3px 3px 0 var(--yellow);
}

/* Buttons sitting on a yellow field get a red offset so they still pop */
.sec--yellow .btn { box-shadow: 6px 6px 0 var(--black); }

.btn--xl {
  min-height: 76px;
  padding: 22px 44px;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  box-shadow: var(--shadow-hard);
}

.btn--xl:hover,
.btn--xl:focus-visible {
  transform: translate(5px, 5px);
  box-shadow: 5px 5px 0 var(--black);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Hand-drawn arrow that nudges on hover */
.arrow { width: 30px; height: 14px; flex: none; }
.arrow path { stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .arrow { animation: nudge 0.5s ease infinite; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}


/* ==========================================================================
   06. LAYOUT PRIMITIVES
   ========================================================================== */

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

.wrap--narrow { max-width: 1080px; }

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

.sec--black  { background: var(--black);  color: var(--white); }
.sec--yellow { background: var(--yellow); color: var(--black); }
.sec--red    { background: var(--red);    color: var(--white); }
.sec--white  { background: var(--white);  color: var(--black); }

.sec--black  { border-top: var(--rule-thick) solid var(--black); }
.sec--yellow { border-block: var(--rule-thick) solid var(--black); }
.sec--red    { border-block: var(--rule-thick) solid var(--black); }

.sec-head { margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
.sec-head .eyebrow { margin-bottom: 1rem; }
.sec-head h2 { margin: 0; }

/* Circular pizza-shop stamp */
.stamp {
  width: clamp(112px, 15vw, 176px);
  height: auto;
  aspect-ratio: 1;
}

.stamp text {
  font-family: var(--font-heavy);
  fill: var(--black);
}

.stamp .stamp-arc   { font-size: 12.5px; letter-spacing: 0.06em; }
.stamp .stamp-line1 { font-size: 13px;   letter-spacing: 0.02em; }
.stamp .stamp-line2 { font-size: 9.5px;  letter-spacing: 0.14em; fill: var(--red); }

/* Framed photo — thick black border, slight tilt, hard offset */
.frame {
  border: var(--rule-thick) solid var(--black);
  background: var(--black);
  overflow: hidden;
}

.frame img { width: 100%; }

/* Storefront / street photography reads black & white, food stays in color */
.photo-bw img {
  filter: grayscale(100%) contrast(1.12);
  transition: filter 0.45s ease;
}

.photo-bw:hover img,
.photo-bw:focus-within img { filter: grayscale(0%) contrast(1); }


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

/* Sits above the mobile menu so the logo and the close button stay reachable
   while the panel is open. */
.header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--white);
  border-bottom: var(--rule-thick) solid var(--black);
  transition: box-shadow 0.2s ease;
}

.header.is-scrolled { box-shadow: 0 6px 0 var(--black-12); }

.header__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--header-h);
  padding-block: 12px;
  transition: min-height 0.2s ease;
}

.header.is-scrolled .header__bar { min-height: 68px; }

.brand {
  display: block;
  flex: none;
  line-height: 0;
  transition: transform 0.2s ease;
}

.brand:hover { transform: rotate(-1.5deg) scale(1.02); }

.brand img {
  height: clamp(40px, 5.2vw, 54px);
  width: auto;
  transition: height 0.2s ease;
}

.header.is-scrolled .brand img { height: 40px; }

.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-heavy);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 2px;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

.nav__link[aria-current="page"]::after,
.nav__item--active > .nav__toggle::after {
  transform: scaleX(1);
  background: var(--red);
}

/* --- Nav dropdown (Delivery Areas) --- */

.nav__item { position: relative; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.nav__caret {
  width: 10px;
  height: 7px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.nav__item:hover .nav__caret,
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  z-index: 20;
  min-width: 244px;
  background: var(--white);
  border: var(--rule) solid var(--black);
  box-shadow: 8px 8px 0 var(--black);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

/* Invisible bridge so the menu survives the gap under the trigger */
.nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub,
.nav__item.is-open .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
}

.nav__sub li + li { border-top: 2px dotted var(--black-12); }

.nav__sub a {
  display: block;
  padding: 12px 18px;
  font-family: var(--font-heavy);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav__sub a:hover,
.nav__sub a:focus-visible { background: var(--yellow); }

.nav__sub a[aria-current="page"] { background: var(--black); color: var(--yellow); }

.header__cta { flex: none; }

.header__cta .btn {
  min-height: 52px;
  padding: 12px 24px;
  font-size: 0.8125rem;
}

/* Hamburger */
.burger {
  display: none;
  flex: none;
  margin-left: auto;
  width: 56px;
  height: 52px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  background: var(--yellow);
  border: var(--rule) solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.burger:active { transform: translate(4px, 4px); box-shadow: none; }

.burger span {
  display: block;
  width: 26px;
  height: 3.5px;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

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


/* ==========================================================================
   08. MOBILE MENU + STICKY ORDER BAR
   ========================================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: var(--black);
  color: var(--white);
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  transform: translateY(-100%);
  visibility: hidden;
  /* Visibility flips instantly on open (so the first link can take focus) and
     only after the slide-out finishes on close. */
  transition: transform 0.32s cubic-bezier(0.32, 0.8, 0.35, 1),
              visibility 0s linear 0.32s;
}

.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.32s cubic-bezier(0.32, 0.8, 0.35, 1),
              visibility 0s linear 0s;
}

.mobile-menu__list { display: flex; flex-direction: column; gap: 4px; }

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9.5vw, 3.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: var(--rule) solid var(--white-15);
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible { color: var(--yellow); }

.mobile-menu__link[aria-current="page"] { color: var(--yellow); }

.mobile-menu__num {
  font-family: var(--font-heavy);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--red);
}

/* Town links under "Delivery" — chips keep 44px touch targets */
.mobile-menu__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 6px;
}

.mobile-menu__sub a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 15px;
  border: 2px solid var(--white-15);
  font-family: var(--font-heavy);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.mobile-menu__sub a:hover,
.mobile-menu__sub a:focus-visible,
.mobile-menu__sub a[aria-current="page"] {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}

.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-heavy);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-70);
}

.mobile-menu__foot a { text-decoration: none; }
.mobile-menu__foot a:hover { color: var(--yellow); }

body.menu-open { overflow: hidden; }

/* Persistent bottom ORDER ONLINE bar on phones */
.order-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 430;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 62px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--yellow);
  color: var(--black);
  border-top: var(--rule-thick) solid var(--black);
  font-family: var(--font-heavy);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.order-bar:active { background: var(--red); color: var(--white); }
.order-bar .arrow { width: 26px; }


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

.marquee {
  overflow: hidden;
  border-block: var(--rule-thick) solid var(--black);
  padding-block: 14px;
  user-select: none;
}

.marquee--yellow { background: var(--yellow); color: var(--black); }
.marquee--black  { background: var(--black);  color: var(--yellow); }
.marquee--red    { background: var(--red);    color: var(--white); }

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

.marquee--reverse .marquee__track { animation-direction: reverse; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-right: clamp(1.5rem, 3vw, 2.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.marquee__group .star { width: 0.62em; height: 0.62em; }

.marquee:hover .marquee__track { animation-play-state: paused; }

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


/* ==========================================================================
   10. HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.hero__plaque {
  display: block;
  width: fit-content;
  background: var(--white);
  border: var(--rule-thick) solid var(--black);
  box-shadow: 12px 12px 0 var(--yellow);
  padding: 14px 20px;
  transform: rotate(-1.6deg);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.hero__plaque img {
  width: clamp(210px, 26vw, 330px);
  height: auto;
}

.hero__eyebrow { color: var(--yellow); margin-bottom: 1.1rem; }

/* Sized against the hero's left column, not the full viewport, so the two
   authored lines hold without wrapping. */
.hero__title {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  margin-bottom: 1.5rem;
  color: var(--white);
}

.hero__title .line-2 { color: var(--yellow); }

.hero__lede { color: var(--white-70); margin-bottom: 2.25rem; }

.hero__media {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.hero__photo {
  width: 100%;
  transform: rotate(1.4deg);
  box-shadow: 16px 16px 0 var(--red);
}

.hero__photo img { aspect-ratio: 4 / 3; object-fit: cover; }

.hero__stamp {
  position: absolute;
  left: -3%;
  bottom: -6%;
  transform: rotate(-11deg);
  filter: drop-shadow(5px 5px 0 var(--black));
}

/* Vertical "EST. HIGHLAND PARK" style rail on the far edge */
.hero__rail {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-heavy);
  font-size: 0.6875rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--white-15);
  pointer-events: none;
}


/* ==========================================================================
   11. INTRO / BRAND
   ========================================================================== */

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.intro__title { margin-bottom: 1.5rem; }
.intro__title .line-2 { color: var(--red); }

.intro__body { display: flex; flex-direction: column; gap: 1.15rem; }

.intro__body p { max-width: 52ch; }

.intro__kicker {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  text-transform: uppercase;
  line-height: 1;
  padding-top: 0.35rem;
}

.intro__kicker span { color: var(--red); }

.intro__aside {
  border-left: var(--rule) solid var(--black);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: 0.4rem;
}


/* ==========================================================================
   12. EDITORIAL PHOTO BAND
   ========================================================================== */

.band {
  position: relative;
  min-height: clamp(460px, 72vh, 780px);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
  border-block: var(--rule-thick) solid var(--black);
}

.band__bg {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
}

.band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--black-62);
}

.band__inner { position: relative; z-index: 2; width: 100%; }

.band__stack { display: block; }

.band__stack span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 12.5vw, 11rem);
  line-height: 0.82;
  text-transform: uppercase;
  color: var(--white);
}

.band__stack span:nth-child(1) { color: var(--yellow); }
.band__stack span:nth-child(2) { color: var(--white); }
.band__stack span:nth-child(3) { color: var(--yellow); }
.band__stack span:nth-child(4) {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--red);
}

.band__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-heavy);
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-70);
}


/* ==========================================================================
   13. MENU PREVIEW
   ========================================================================== */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border: var(--rule-thick) solid var(--black);
  background: var(--white);
  box-shadow: 10px 10px 0 var(--black);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.menu-card:hover,
.menu-card:focus-within {
  transform: translate(5px, 5px);
  box-shadow: 5px 5px 0 var(--black);
}

.menu-card--wide { grid-column: span 2; }

.menu-card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 190px;
  overflow: hidden;
  background: var(--black);
}

.menu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.menu-card:hover .menu-card__media img { transform: scale(1.06); }

.menu-card__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: var(--font-heavy);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  background: var(--yellow);
  color: var(--black);
  padding: 7px 12px;
  border-right: var(--rule) solid var(--black);
  border-bottom: var(--rule) solid var(--black);
}

.menu-card__body {
  padding: 20px clamp(18px, 2vw, 26px) 24px;
  border-top: var(--rule) solid var(--black);
}

.menu-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.9vw, 2.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.menu-card__desc {
  font-size: 0.975rem;
  line-height: 1.5;
  max-width: 40ch;
  opacity: 0.85;
}

/* Type-only cards — no invented photography */
.menu-card--type { justify-content: flex-end; }

.menu-card--type .menu-card__body { border-top: 0; }

.menu-card--black {
  background: var(--black);
  color: var(--white);
}

.menu-card--black .menu-card__title { color: var(--yellow); }

.menu-card--red {
  background: var(--red);
  color: var(--white);
}

.menu-card--red .menu-card__num { background: var(--black); color: var(--yellow); }

.menu-card__mark {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%) rotate(-8deg);
  width: 150px;
  height: 150px;
  opacity: 0.18;
  pointer-events: none;
}

.menu-card__mark .star { fill: var(--white); }

.menu-foot {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}

.menu-foot__note {
  font-family: var(--font-heavy);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  max-width: 34ch;
  opacity: 0.7;
}


/* ==========================================================================
   14. STATEMENT BREAK
   ========================================================================== */

.statement {
  position: relative;
  overflow: hidden;
  text-align: left;
}

.statement__inner { position: relative; z-index: 2; }

.statement__title {
  color: var(--yellow);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.statement__sub {
  display: inline-block;
  font-family: var(--font-heavy);
  font-size: clamp(1.05rem, 2.4vw, 1.85rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  border: var(--rule) solid var(--black);
  box-shadow: 8px 8px 0 var(--yellow);
  padding: 12px 22px;
  transform: rotate(-1.4deg);
}

/* A yellow offset would vanish on the yellow sections */
.sec--yellow .statement__sub { box-shadow: 8px 8px 0 var(--black); }

.statement__star {
  position: absolute;
  z-index: 1;
  right: -60px;
  top: 50%;
  transform: translateY(-50%) rotate(14deg);
  width: clamp(260px, 34vw, 480px);
  height: auto;
  opacity: 0.14;
  pointer-events: none;
}

.statement__star .star { fill: var(--red); }


/* ==========================================================================
   15. ORDERING
   ========================================================================== */

.order__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.order__title { margin-bottom: 1.35rem; }

.order__body { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.25rem; }

.order__photo {
  transform: rotate(-2deg);
  box-shadow: 14px 14px 0 var(--black);
}

.order__photo img { aspect-ratio: 5 / 4; object-fit: cover; }

.order__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 1.75rem;
  font-family: var(--font-heavy);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.order__steps li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order__steps .star { width: 11px; height: 11px; color: var(--red); }


/* ==========================================================================
   16. LOCATION & HOURS
   ========================================================================== */

.find__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}

.find__photo { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.find__photo img { aspect-ratio: 16 / 10; object-fit: cover; }

.address {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.02;
  text-transform: uppercase;
  font-style: normal;
  margin-bottom: 1.5rem;
}

.address span { display: block; }
.address .address__name { color: var(--red); }

.contact-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 0.5rem;
  font-family: var(--font-heavy);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-line__label { flex: none; opacity: 0.55; }

.phone-link {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-block;
  line-height: 1.05;
  border-bottom: 5px solid var(--yellow);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.phone-link:hover,
.phone-link:focus-visible { color: var(--red); border-color: var(--red); }

/* Hours price board */
.hours-board {
  border: var(--rule-thick) solid var(--black);
  background: var(--white);
  box-shadow: 12px 12px 0 var(--yellow);
}

.sec--black .hours-board { box-shadow: 12px 12px 0 var(--red); }

.hours-board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px clamp(18px, 2.5vw, 28px);
  background: var(--black);
  color: var(--white);
  border-bottom: var(--rule) solid var(--black);
}

.hours-board__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  color: var(--yellow);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heavy);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  border-radius: 50%;
  flex: none;
}

.status-pill.is-open   { background: var(--yellow); color: var(--black); }
.status-pill.is-closed { background: var(--black);  color: var(--red);   border-color: var(--red); }
.status-pill.is-open::before  { animation: blip 1.6s ease-in-out infinite; }

@keyframes blip {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.hours-list { padding: 8px 0; }

.hours-list li {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 11px clamp(18px, 2.5vw, 28px);
  font-family: var(--font-heavy);
  font-size: clamp(0.8125rem, 1.35vw, 0.9375rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hours-list li + li { border-top: 2px dotted var(--black-12); }

.hours-list .day  { flex: none; }
.hours-list .time { flex: none; white-space: nowrap; }

.hours-list li.is-today {
  background: var(--yellow);
  border-top-color: var(--black);
  position: relative;
}

.hours-list li.is-today::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--red);
}

.hours-list li.is-today .day::after {
  content: "TODAY";
  display: inline-block;
  margin-left: 10px;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  background: var(--black);
  color: var(--yellow);
  padding: 3px 7px;
  vertical-align: 2px;
}

.hours-note {
  padding: 14px clamp(18px, 2.5vw, 28px);
  border-top: var(--rule) solid var(--black);
  background: var(--black);
  color: var(--white-70);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}


/* ==========================================================================
   17. FINAL CTA
   ========================================================================== */

.final { text-align: center; }

.final__title {
  /* Sized so the authored line breaks hold inside .wrap--narrow */
  font-size: clamp(1.75rem, 8vw, 4.9rem);
  color: var(--white);
  margin-bottom: 1.5rem;
}

.final__copy {
  font-family: var(--font-heavy);
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  color: var(--white);
}

.final__copy span { color: var(--black); }

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


/* ==========================================================================
   18. CONTACT PAGE
   ========================================================================== */

.chero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
}

.chero__title {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  margin-bottom: 1.5rem;
  color: var(--white);
}
.chero__title .line-2 { color: var(--yellow); }

.chero__photo {
  transform: rotate(-1.6deg);
  box-shadow: 14px 14px 0 var(--yellow);
}

.chero__photo img { aspect-ratio: 4 / 3; object-fit: cover; }

.detail-card {
  border: var(--rule-thick) solid var(--black);
  background: var(--white);
  box-shadow: 12px 12px 0 var(--red);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.detail-card__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.detail-card .btn-row { margin-top: 2rem; }

.map-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.map-frame {
  border: var(--rule-thick) solid var(--yellow);
  background: var(--black);
  line-height: 0;
}

.map-frame iframe {
  width: 100%;
  height: clamp(300px, 42vh, 430px);
  border: 0;
  filter: grayscale(100%) contrast(1.05);
  transition: filter 0.4s ease;
}

.map-frame:hover iframe,
.map-frame:focus-within iframe { filter: grayscale(0%); }

.map-copy .display { margin-bottom: 1.25rem; }


/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.footer {
  background: var(--black);
  color: var(--white);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
  gap: clamp(2.25rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.footer__plaque {
  display: block;
  width: fit-content;
  background: var(--white);
  border: var(--rule) solid var(--black);
  box-shadow: 8px 8px 0 var(--red);
  padding: 12px 16px;
  margin-bottom: 1.75rem;
}

.footer__plaque img { width: clamp(180px, 22vw, 250px); height: auto; }

.footer__address {
  font-style: normal;
  font-family: var(--font-heavy);
  font-size: 0.9375rem;
  line-height: 1.85;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer__address a { text-decoration: none; }
.footer__address a:hover { color: var(--yellow); }

.footer__phone {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--yellow);
  border-bottom: 4px solid var(--red);
}

.footer__phone:hover { color: var(--white); }

.footer__heading {
  font-family: var(--font-heavy);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.25rem;
}

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

.footer__nav--sm a { font-size: clamp(1.05rem, 1.7vw, 1.3rem) !important; }

.footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.15;
}

.footer__nav a::before {
  content: "";
  width: 0;
  height: 4px;
  background: var(--yellow);
  transition: width 0.2s ease;
}

.footer__nav a:hover,
.footer__nav a:focus-visible { color: var(--yellow); }
.footer__nav a:hover::before,
.footer__nav a:focus-visible::before { width: 22px; }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.75rem;
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: var(--rule) solid var(--yellow);
  color: var(--yellow);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.social svg { width: 24px; height: 24px; fill: currentColor; }

.social:hover,
.social:focus-visible {
  background: var(--yellow);
  color: var(--black);
  transform: translate(-2px, -2px);
}

.footer__hours-mini {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--white-70);
}

.footer__hours-mini strong {
  display: block;
  font-family: var(--font-heavy);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.35rem;
}

.footer__bottom {
  border-top: var(--rule) solid var(--white-15);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heavy);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-45);
}

.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--yellow); }


/* ==========================================================================
   20. MOTION & REVEAL
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

.js [data-reveal][data-reveal-delay="1"] { transition-delay: 0.09s; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 0.18s; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 0.27s; }
.js [data-reveal][data-reveal-delay="4"] { transition-delay: 0.36s; }


/* ==========================================================================
   21. DELIVERY AREAS — hub page + town pages
   ========================================================================== */

/* --- Breadcrumbs --- */

.crumbs {
  background: var(--black);
  color: var(--white-70);
  border-bottom: var(--rule-thick) solid var(--black);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-block: 13px;
  font-family: var(--font-heavy);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover,
.crumbs a:focus-visible { color: var(--yellow); }
.crumbs li[aria-current] { color: var(--yellow); }

.crumbs li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--red);
}

/* --- Area card grid (hub) --- */

.area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--rule-thick) solid var(--black);
  background: var(--white);
  box-shadow: 10px 10px 0 var(--black);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.area-card:hover,
.area-card:focus-within {
  transform: translate(5px, 5px);
  box-shadow: 5px 5px 0 var(--black);
}

.area-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--black);
}

.area-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.area-card:hover .area-card__media img { transform: scale(1.06); }

.area-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 22px clamp(18px, 2vw, 26px) 26px;
  border-top: var(--rule) solid var(--black);
}

.area-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

/* One link per card, stretched over the whole tile */
.area-card__link { text-decoration: none; }

.area-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.area-card__desc {
  font-size: 0.975rem;
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 1.35rem;
}

.area-card__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heavy);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.area-card:hover .area-card__go { color: var(--red); }

/* --- Radius panel — reads like a road sign --- */

.radius {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  max-width: 1120px;
}

.radius .lede { max-width: 58ch; }

.radius__badge {
  text-align: center;
  border: var(--rule-thick) solid currentColor;
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 3.5vw, 2.75rem);
}

.radius__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 10rem);
  line-height: 0.78;
  text-transform: uppercase;
}

.radius__unit {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-heavy);
  font-size: clamp(0.8125rem, 1.6vw, 1.15rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.radius__title { margin-bottom: 1.25rem; }

.radius__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-family: var(--font-heavy);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.radius__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.radius__list .star {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
  color: var(--red);
}

/* --- Fact strip on town pages --- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--rule) solid var(--black);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.facts > div { padding: 18px clamp(16px, 2vw, 22px); }
.facts > div + div { border-left: var(--rule) solid var(--black); }

.facts dt {
  font-family: var(--font-heavy);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 7px;
}

.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  line-height: 1.06;
  text-transform: uppercase;
}

/* --- Category chips --- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.75rem;
}

.chips li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: var(--rule) solid var(--black);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-heavy);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- "Other areas" link row --- */

.area-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.75rem;
}

.area-links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  border: var(--rule) solid currentColor;
  font-family: var(--font-heavy);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.area-links a:hover,
.area-links a:focus-visible {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}

/* Town page intro layout */

.town__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Sized against the narrower left column so authored breaks hold */
.town__h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }

.town__body { display: flex; flex-direction: column; gap: 1.1rem; }
.town__body p { max-width: 56ch; }

.town__photo { transform: rotate(-1.2deg); box-shadow: 14px 14px 0 var(--red); }
.town__photo img { aspect-ratio: 4 / 3; object-fit: cover; }


/* ==========================================================================
   22. ORDER-DIRECT LANDING PAGES
   ========================================================================== */

/* --- Two-panel fee comparison --- */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
  align-items: stretch;
}

.compare__panel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: var(--rule-thick) solid var(--black);
}

.compare__panel--app {
  background: var(--black);
  color: var(--white);
}

.compare__panel--direct {
  background: var(--yellow);
  color: var(--black);
  box-shadow: 12px 12px 0 var(--black);
}

.compare__label {
  font-family: var(--font-heavy);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.compare__panel--app .compare__label { color: var(--red); }

.compare__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Fee rows with proportional bars --- */

.fee-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.fee__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.fee__pct {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  line-height: 1;
  flex: none;
}

.fee__who {
  font-family: var(--font-heavy);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
  opacity: 0.82;
}

.fee__bar {
  height: 15px;
  margin-top: 10px;
  border: 2px solid currentColor;
}

.fee__bar span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--red);
}

.compare__panel--direct .fee__bar span { background: var(--black); }

.compare__total {
  margin-top: auto;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: var(--rule) solid currentColor;
}

.compare__total > span:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  line-height: 0.86;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}

.compare__panel--app .compare__total > span:first-child { color: var(--yellow); }

.compare__total p {
  font-size: 0.9375rem;
  line-height: 1.55;
  opacity: 0.85;
}

/* Nudge the totals onto the same baseline when the panels differ in height */
.compare__spacer { flex: 1 1 auto; min-height: 1.5rem; }

/* --- Hero review widget (third-party: reviews.orderchop.com) ---
   Mounted on a white plaque so it stays legible on the black hero whatever
   the widget renders. Kept collapsed until the widget reports a height, so a
   failed or blocked load leaves no empty box behind. --- */

.hero-reviews {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hero-reviews.is-ready {
  max-height: none;
  overflow: visible;
  opacity: 1;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.hero-reviews__plaque {
  display: inline-block;
  max-width: 100%;
  background: var(--white);
  border: var(--rule) solid var(--black);
  box-shadow: 6px 6px 0 var(--yellow);
  padding: 12px 18px;
}

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

/* On phones give the widget the full column rather than shrink-to-fit — its
   summary line is nowrap, so every pixel of width helps it stay on one line. */
@media (max-width: 480px) {
  .hero-reviews__plaque {
    display: block;
    padding: 12px 14px;
  }
}

/* Deliberately no no-JS fallback: the widget is script-driven, so with
   JavaScript off there is nothing to show and the plaque stays collapsed. */

/* --- Homepage review carousel ---
   The whole section collapses until reviews render, so a failed load never
   leaves a heading stranded above an empty box. Same clip trick as the plaque:
   kept measurable while hidden so the widget can report its height. --- */

.reviews-sec {
  padding-block: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.reviews-sec.is-ready {
  padding-block: var(--section-y);
  max-height: none;
  overflow: visible;
  opacity: 1;
}

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

/* --- FAQ (native details/summary — no JS, keyboard accessible) --- */

.faq { border-top: var(--rule) solid currentColor; }

.faq details { border-bottom: var(--rule) solid currentColor; }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  line-height: 1.15;
  text-transform: uppercase;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-heavy);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--red);
}

.faq details[open] summary::after { content: "\2013"; }

.faq summary:hover { color: var(--red); }

.faq__answer {
  padding: 0 0 24px;
  max-width: 68ch;
  line-height: 1.65;
}

.faq__answer a { font-weight: 600; }


/* --- Feedback page --- */

.hero-compact { padding-block: clamp(2.75rem, 6vw, 5.5rem); }

.hero-compact .hero__title {
  font-size: clamp(2.25rem, 5.6vw, 5rem);
  max-width: 17ch;
}

.hero-compact .lede { max-width: 54ch; }

/* The review form IS the page, so unlike the display widgets it is never
   hidden — space is reserved for it, and if it never renders we surface a
   way to reach us instead of leaving the visitor staring at nothing. */
/* The widget lays its own card out at ~576px and centres it, so the frame is
   sized to mat that rather than leaving it stranded in a wide box. */
.review-form {
  max-width: 680px;
  margin-inline: auto;
  min-height: 320px;
  border: var(--rule-thick) solid var(--black);
  background: var(--white);
  box-shadow: 12px 12px 0 var(--yellow);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.review-form emr-collect-review-form {
  display: block;
  max-width: 100%;
}

/* On phones the widget wraps its star row (its stars are a fixed 5 x 64px and
   its own card carries internal padding we cannot reach from outside the shadow
   DOM). Widening the frame does not change that, so it keeps normal padding and
   the wrapped stars stay large and perfectly tappable. */
@media (max-width: 560px) {
  .review-form { padding: 16px; }
}

.review-form__fallback { display: none; }

.review-form.is-failed .review-form__fallback {
  display: block;
  text-align: center;
  padding: clamp(1rem, 3vw, 2rem) 0;
}

.review-form__fallback h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.review-form__fallback p {
  max-width: 44ch;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

/* A rendered form makes the fallback redundant */
.review-form.is-loaded .review-form__fallback { display: none !important; }

/* --- Gratitude block --- */

.thanks__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.thanks__body { display: flex; flex-direction: column; gap: 1.1rem; }
.thanks__body p { max-width: 54ch; font-size: var(--fs-md); line-height: 1.6; }

.thanks__photo { transform: rotate(1.4deg); box-shadow: 14px 14px 0 var(--yellow); }
.thanks__photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Local-economy points --- */

.keeps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--rule) solid var(--black);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.keeps > div { padding: clamp(20px, 2.5vw, 28px); }
.keeps > div + div { border-left: var(--rule) solid var(--black); }

.keeps h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.keeps p { font-size: 0.9375rem; line-height: 1.5; opacity: 0.85; }

/* --- Trademark / accuracy note --- */

.disclaimer {
  background: var(--black);
  color: var(--white-45);
  border-top: var(--rule-thick) solid var(--black);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.disclaimer p {
  font-size: 0.75rem;
  line-height: 1.7;
  max-width: 86ch;
}

.disclaimer p + p { margin-top: 0.75rem; }


/* ==========================================================================
   23. RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-card--wide { grid-column: span 2; }
  .map-block { grid-template-columns: 1fr; }
  .town__grid { grid-template-columns: minmax(0, 1fr); }
  .thanks__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  :root { --header-h: 76px; }

  .nav,
  .header__cta { display: none; }

  .burger { display: flex; }

  .hero__grid,
  .intro__grid,
  .order__grid,
  .find__grid,
  .chero__grid { grid-template-columns: minmax(0, 1fr); }

  .hero__grid { padding-block: clamp(2.25rem, 6vw, 3.5rem) clamp(3.5rem, 8vw, 5rem); }

  .hero__media { margin-top: 0.5rem; }
  .hero__photo { transform: rotate(1deg); box-shadow: 10px 10px 0 var(--red); }
  .hero__stamp { left: auto; right: -2%; bottom: -8%; }
  .hero__rail { display: none; }

  .intro__aside {
    border-left: 0;
    border-top: var(--rule) solid var(--black);
    padding-left: 0;
    padding-top: 1.75rem;
  }

  .order__photo { transform: rotate(-1.2deg); box-shadow: 10px 10px 0 var(--black); }

  .hours-board { box-shadow: 8px 8px 0 var(--yellow); }
  .detail-card { box-shadow: 8px 8px 0 var(--red); }

  .order-bar { display: flex; }

  /* Room for the fixed order bar */
  body { padding-bottom: 76px; }

  .statement__star { right: -110px; opacity: 0.1; }

  .town__photo { transform: rotate(-1deg); box-shadow: 10px 10px 0 var(--red); }
  .thanks__photo { transform: rotate(1deg); box-shadow: 10px 10px 0 var(--yellow); }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare__panel--direct { box-shadow: 8px 8px 0 var(--black); }
  .compare__spacer { display: none; }
  .radius { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .radius__badge { width: 100%; }
}

@media (max-width: 720px) {
  :root { --rule-thick: 4px; }

  .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .menu-card--wide { grid-column: span 1; }
  .menu-card { min-height: 0; box-shadow: 7px 7px 0 var(--black); }
  .menu-card__media { min-height: 210px; }
  .menu-card--type .menu-card__body { padding-top: 44px; }

  .btn { width: 100%; }
  .btn-row { gap: 12px; }
  .menu-foot .btn,
  .final .btn { width: 100%; }

  .hero__plaque { box-shadow: 8px 8px 0 var(--yellow); }

  .band { min-height: 420px; }
  .band__stack span:nth-child(4) { -webkit-text-stroke-width: 1.6px; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { justify-content: flex-start; }

  .area-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .area-card { box-shadow: 7px 7px 0 var(--black); }

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

  .facts > div + div,
  .keeps > div + div {
    border-left: 0;
    border-top: var(--rule) solid var(--black);
  }

  .area-links a { width: 100%; justify-content: center; }

  .hours-list li {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .hours-list .rule-dotted { min-width: 20px; }
  .hours-list li.is-today .day::after { margin-left: 8px; }
}

@media (max-width: 420px) {
  .hours-list li { font-size: 0.75rem; letter-spacing: 0.03em; }
  .hours-list li.is-today .day::after { font-size: 0.5625rem; padding: 2px 5px; }
  .status-pill { font-size: 0.625rem; padding: 7px 11px; }
}

/* Wide screens — let the hero breathe */
@media (min-width: 1600px) {
  :root { --maxw: 1560px; }
}

/* Print */
@media print {
  .header, .order-bar, .marquee, .mobile-menu, body::after { display: none !important; }
  body { padding-bottom: 0; color: #000; background: #fff; }
  .sec--black, .sec--red, .hero, .footer { background: #fff !important; color: #000 !important; }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@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; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .band__bg { inset: 0; }
  .band__bg img { transform: none !important; }
}