/* ===========================================================
   JOOCY SMASH — Meat In The Middle
   Design tokens — real brand palette: red, yellow, black
   =========================================================== */
/* ---------- Self-hosted type ----------
   Anton and Poppins, latin subset only, served from /fonts. The
   Google Fonts <link> they replace was render-blocking on a third-party
   origin and needed two extra preconnects; these five files are 43 KB
   all up and let the CSP stay locked to 'self'. Adding a weight means
   adding a @font-face here, not reaching for a Google Fonts link. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700.woff2') format('woff2');
}

:root {
  --header-h: 115px;
  --bg: #FFF8ED;
  --ink: #1E1712;
  --ink-soft: #4A362B;
  --red: #E4232C;
  --red-dark: #B81E23;
  --yellow: #FFC72C;
  --amber: #FF7A1A;
  --green: #5FA845;
  --line: #EAD9C0;
  --white: #FFFFFF;

  --font-display: 'Anton', sans-serif;
  --font-body: 'Poppins', sans-serif;

  --max-width: 1140px;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  margin: 0 0 0.35em;
  color: var(--ink);
}

h1 { font-size: clamp(2.8rem, 6.5vw, 5.2rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; max-width: 60ch; }

.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 44ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  border: 3px solid var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(0,0); box-shadow: 2px 2px 0 var(--ink); }
.btn-primary { background: var(--red); color: var(--white); border-color: var(--ink); }
.btn-secondary { background: var(--yellow); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--white); }

/* ---------- Badge / stamp ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 16px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  transform: rotate(-3deg);
}

.badge--green { background: var(--green-deep); color: var(--white); border-color: var(--ink); }

/* ---------- Header / Nav ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 3px solid var(--red-dark);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 28px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--amber);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo span { color: var(--red); }
.logo-img { height: 104px; width: auto; display: block; }

nav.main-nav ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.main-nav a {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--white);
  padding: 8px 16px;
  border-radius: 999px;
}
nav.main-nav a:hover,
nav.main-nav a.active {
  background: var(--yellow);
  color: var(--ink);
}

.nav-order-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  background: var(--red);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--ink);
  margin-left: 16px;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.nav-order-btn:hover { transform: translateY(-2px); background: var(--red-dark); }
@media (max-width: 760px) { .nav-order-btn { font-size: 0.82rem; padding: 8px 14px; margin-left: 8px; } }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  /* 44x44 including the padding: the bars stay the same size, the
     thing you have to hit with a thumb gets bigger. */
  padding: 10px;
  width: 44px;
  height: 44px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--white);
  border-radius: 2px;
}

@media (max-width: 760px) {
  nav.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 3px solid var(--red-dark);
    display: none;
  }
  nav.main-nav.open { display: block; }
  nav.main-nav ul { flex-direction: column; gap: 6px; padding: 14px 28px 22px; }
  .nav-toggle { display: block; }
  .logo-img { height: 58px; }
}
@media (max-width: 760px) {
  :root { --header-h: 69px; }
}

/* ---------- Hero: video-scrub scene, swift transparent burger build ---------- */
.hero-scroll {
  position: relative;
  height: 122vh; /* tight scroll room — video fills more of it, less dead trail after */
  background: var(--ink);
  border-bottom: 3px solid var(--ink);
}
.hero-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--ink) url('images/hero-poster.webp') center center / cover no-repeat;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: transparent;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(30,23,18,0.12) 0%, rgba(30,23,18,0.05) 40%, rgba(30,23,18,0.5) 100%);
}
.hero-stage .wrap {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.hero-copy h1, .hero-copy .lede { color: var(--white); }
.hero-copy h1 { text-shadow: 0 3px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5); font-size: clamp(2.3rem, 6vw, 5.2rem); }
.hero-copy .lede { color: rgba(255,255,255,0.88); }
.hero-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--yellow);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 4px 0 14px;
}
.hero-logo { height: 130px; width: auto; margin-bottom: 16px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.4)); }
.hero-badges { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.hero-badges .badge:nth-child(2) { transform: rotate(2deg); }
.hero-actions { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

.hero-scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--white);
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: opacity 0.4s ease;
}
.hero-scroll-hint svg { animation: hero-hint-bounce 1.6s ease-in-out infinite; }
.hero-scroll-hint.hide { opacity: 0; }
@keyframes hero-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- Burger build: swift + translucent, overlaid on video ---------- */
.burger-build {
  width: min(360px, 78vw);
  height: auto;
  overflow: visible;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}
.burger-layer {
  opacity: 0.82;
  transform: none;
  transition: transform 0.28s cubic-bezier(0.25, 0.9, 0.35, 1), opacity 0.22s ease;
  transform-origin: center;
  will-change: transform, opacity;
}
html.js-ready .burger-layer { opacity: 0; transform: translateY(-60px) scale(0.9); }
html.js-ready .burger-layer[data-from="below"] { transform: translateY(45px) scale(0.9); }
html.js-ready .burger-layer.assembled { opacity: 0.82; transform: translateY(0) scale(1); }

.meat-press {
  transform: none;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.15, 0.4, 1) 0.12s;
}
html.js-ready .meat-press { transform: scale(0.58, 1.9); }
html.js-ready .burger-layer.assembled .meat-press { transform: scale(1, 1); }

@media (max-width: 820px) {
  .hero-stage .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero-badges { justify-content: center; }
  .hero-actions { justify-content: center; }
  .hero-logo { height: 100px; margin: 0 auto 14px; }
  .burger-build { width: min(230px, 58vw); margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js-ready .burger-layer { transition: none; opacity: 0.82; transform: none; }
  html.js-ready .meat-press { transition: none; transform: scale(1,1); }
  .hero-scroll { height: auto; }
  .hero-stage { position: relative; height: auto; padding: 70px 0; }
  .hero-scroll-hint { display: none; }
}

/* ---------- Real photos ---------- */
.site-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.gallery-grid .photo-frame { height: 220px; }

/* ---------- Zigzag divider ---------- */
.zigzag {
  height: 16px;
  width: 100%;
  background:
    linear-gradient(135deg, var(--bg) 25%, transparent 25%) -12px 0,
    linear-gradient(225deg, var(--bg) 25%, transparent 25%) -12px 0,
    var(--ink);
  background-size: 24px 24px;
}

/* ---------- Info strip ---------- */
.info-strip { background: var(--ink); color: var(--white); }
.info-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font-display);
}
.info-strip .item { display: flex; align-items: center; gap: 10px; }
.info-strip .item strong { color: var(--yellow); }

/* ---------- Section spacing ---------- */
section { padding: 80px 0; }
.section-tight { padding: 56px 0; }

/* ---------- Highlight cards ---------- */
.dark-panel { background: var(--ink); }
.dark-panel h2 { color: var(--white); }
.dark-panel .lede { color: rgba(255,255,255,0.8); }

.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.highlight-card {
  background: var(--ink);
  color: var(--white);
  border: 3px solid var(--red-dark);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 6px 6px 0 var(--red-dark);
}
.highlight-card h3 { color: var(--white); }
.highlight-card .icon { width: 44px; height: 44px; margin-bottom: 14px; }
.highlight-card--green { background: var(--ink); color: var(--white); border-color: var(--red); box-shadow: 6px 6px 0 var(--red); }
.highlight-card--green h3, .highlight-card--green p { color: var(--white); }
.highlight-card--red { background: var(--red); color: var(--white); }
.highlight-card--red h3, .highlight-card--red p { color: var(--white); }
.highlight-card--yellow { background: var(--yellow); color: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.highlight-card--yellow h3 { color: var(--ink); }
.highlights--four { grid-template-columns: repeat(4, 1fr); }
.highlights--four .highlight-card { box-shadow: none; border-color: var(--red-dark); background: #241713; padding: 22px 20px; }
@media (max-width: 900px) { .highlights--four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .highlights { grid-template-columns: 1fr; } }

/* ---------- Photo gallery grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 760px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Two-col feature ---------- */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 820px) { .feature-split { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--red); color: var(--white); text-align: center; padding: 66px 0; }
.cta-band h2 { color: var(--white); }
.cta-band .btn-dark:hover { background: var(--white); color: var(--ink); }

/* ---------- Menu page ---------- */
.menu-category { margin-bottom: 50px; }
.menu-category h2 { display: flex; align-items: center; gap: 14px; }
.menu-category h2 .badge { font-size: 0.75rem; padding: 5px 12px; }
.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 3px dotted var(--line);
}
.menu-item:last-child { border-bottom: none; }
.menu-item-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.menu-item-desc { color: var(--ink-soft); font-size: 0.94rem; margin: 4px 0 0; }
.menu-item-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  color: var(--red-dark);
}

/* ---------- About page ---------- */
.story-block { max-width: 74ch; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.value-item { background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); padding: 22px; box-shadow: 5px 5px 0 var(--ink); }
@media (max-width: 820px) { .values-grid { grid-template-columns: 1fr; } }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info .item { display: flex; gap: 14px; margin-bottom: 24px; }
.contact-info .icon-badge {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--ink); flex-shrink: 0;
}
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; color: var(--ink); }
.form-field input, .form-field textarea {
  width: 100%; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 12px;
  font-family: var(--font-body); font-size: 0.98rem; background: var(--white); color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--red); }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: -4px; }
.map-embed {
  border: 3px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: 6px 6px 0 var(--ink); line-height: 0;
}
.map-embed iframe { display: block; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--ink); color: var(--white); padding: 50px 0 28px; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.footer-logo span { color: var(--yellow); }
.footer-logo-img { height: 64px; width: auto; margin-bottom: 10px; }
.footer-tagline { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: rgba(255,255,255,0.85); margin: 0; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow); margin: 0 0 12px; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.94rem; margin-bottom: 8px; }
.footer-col a:hover { color: var(--white); }
.footer-social-label { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--yellow); margin: 10px 0 8px; }
.footer-social { display: flex; gap: 10px; }
.social-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.social-icon svg { width: 18px; height: 18px; }
.social-icon:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.footer-bottom { padding-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.55); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Cheese splats (scroll reveal) ---------- */
.cheese-splat {
  position: absolute;
  width: 84px;
  z-index: 3;
  opacity: 0;
  transform: scale(0.15) rotate(-18deg);
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), opacity 0.32s ease;
  pointer-events: none;
}
.cheese-splat.in-view {
  opacity: 1;
  transform: scale(1) rotate(var(--rot, 0deg));
}
.cheese-splat--hero { opacity: 0; }
.cheese-splat--hero.assembled { opacity: 0.9; transform: scale(1) rotate(var(--rot, 0deg)); }
@media (max-width: 700px) {
  .cheese-splat { width: 56px; }
}

/* ---------- Reviews ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.review-card {
  background: var(--ink);
  border: 3px solid var(--red-dark);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: 6px 6px 0 var(--red-dark);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.review-card:hover, .review-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--red-dark);
}
.review-meta { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
.review-quote { font-size: 0.98rem; color: var(--white); margin-bottom: 12px; flex-grow: 1; }
.review-reply {
  background: rgba(255,255,255,0.08);
  border-left: 3px solid var(--yellow);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 16px;
}
.review-reply strong { color: var(--white); }
.review-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.review-author { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--white); }
.review-time { font-size: 0.82rem; color: rgba(255,255,255,0.55); white-space: nowrap; }
.review-more {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--yellow);
}
@media (max-width: 820px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ---------- Food carousel ---------- */
.carousel {
  position: relative;
  margin-top: 36px;
  border: 3px solid var(--red-dark);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--red-dark);
  overflow: hidden;
  background: var(--ink);
}
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.carousel-slide {
  flex: 0 0 100%;
  height: 420px;
  position: relative;
}
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 16px;
  border-radius: 999px;
}
.carousel-slide--placeholder {
  background: repeating-linear-gradient(45deg, var(--ink), var(--ink) 12px, #2A1210 12px, #2A1210 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: rgba(255,255,255,0.65);
}
.carousel-placeholder-icon { font-size: 2.2rem; }
.carousel-placeholder-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--white); }
.carousel-placeholder-note { font-size: 0.85rem; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 3px 3px 0 var(--ink);
}
.carousel-arrow:hover { background: var(--red); color: var(--white); }
.carousel-arrow--prev { left: 16px; }
.carousel-arrow--next { right: 16px; }

.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 4;
  /* Same trap as .floaties: this bar spans the full width of the
     carousel but only the dots in the middle of it are meant to be
     clickable. The strip is thin enough that nothing was caught behind
     it, but it is the same bug waiting for the first caption or link
     that lands under it. */
  pointer-events: none;
}
.carousel-dot { pointer-events: auto; }
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 2px solid var(--ink);
  cursor: pointer;
  padding: 0;
}
.carousel-dot.active { background: var(--red); }

@media (max-width: 700px) {
  .carousel-slide { height: 280px; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
}

/* ---------- Process section (Whole Cuts to Your Smash) ---------- */
.process-section { background: var(--ink); }
.process-section .badge, .process-section h2 { color: var(--white); }
.process-section h2 { color: var(--white); }
.process-section .lede { color: rgba(255,255,255,0.8); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.process-step h3 { color: var(--white); margin-top: 10px; }
.process-step p { color: rgba(255,255,255,0.75); font-size: 0.92rem; }
.process-media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--yellow);
  background: #000;
}
.process-media video, .process-media img { width: 100%; height: 100%; object-fit: cover; }
.process-media--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: repeating-linear-gradient(45deg, #2A2019, #2A2019 12px, #33261C 12px, #33261C 24px);
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  text-align: center;
  padding: 10px;
}
.process-number {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yellow);
  font-size: 1.4rem;
  margin-top: 14px;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Find Joocy strip: one seamless photo, no hard boxes ---------- */
.find-strip {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}
.find-strip-bg { position: absolute; inset: 0; background: var(--ink); }
.find-strip-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 88% center; }
.find-strip-fade { position: absolute; inset: 0; }
.find-strip-fade--left {
  /* The scrim has to reach the end of the text, not the end of the
     panel. The address line runs to 34% of the strip; the fade used to
     go transparent at 32%, which left white text sitting on bare
     photograph at 3.8:1. Holding the same stop out to 42% clears it at
     8.4:1 and looks the same. Re-measure if the copy gets longer. */
  background: linear-gradient(90deg,
    var(--ink) 0%, var(--ink) 14%,
    rgba(30,23,18,0.6) 22%,
    rgba(30,23,18,0.6) 34%,
    transparent 42%);
}
.find-strip-fade--right {
  /* Same fix on the other side: the CTA copy starts at 76% of the
     strip, where the yellow was only 38% opaque, leaving near-black
     text on the photograph at 3.2:1. The yellow now reaches full
     strength by 92% instead of 100%, which puts 6.7:1 under the text
     and keeps the photo-into-yellow fade intact. */
  background: linear-gradient(90deg,
    transparent 52%,
    rgba(255,199,44,0.2) 62%,
    rgba(255,199,44,0.62) 72%,
    rgba(255,199,44,0.86) 82%,
    var(--yellow) 92%);
}
.find-strip-content {
  position: relative;
  z-index: 2;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.find-strip-label {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 6px;
}
.find-strip-info, .find-strip-cta {
  padding: 44px 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 440px;
}
.find-strip-info { position: relative; color: var(--white); }
.find-strip-info h2 { color: var(--white); }
.find-strip-info p { color: rgba(255,255,255,0.9); margin: 0 0 8px; }
.find-strip-info .btn { margin-top: 16px; align-self: flex-start; }
.find-strip-cta { position: relative; color: var(--ink); text-align: right; align-items: flex-end; margin-left: auto; }
.find-strip-watermark {
  position: absolute;
  top: 90px;
  left: 0;
  height: 200px;
  width: auto;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}
.find-strip-info > *:not(.find-strip-watermark) { position: relative; z-index: 1; }
.find-strip-cta h2 { color: var(--ink); }
.find-strip-cta p { color: var(--ink); }
@media (max-width: 760px) {
  .find-strip { min-height: 560px; }
  .find-strip-content { flex-direction: column; align-items: stretch; min-height: 560px; }
  .find-strip-bg img { object-fit: cover; object-position: center 35%; }
  .find-strip-fade--left { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, rgba(30,23,18,0.4) 75%, transparent 100%); }
  .find-strip-fade--right { background: linear-gradient(0deg, var(--yellow) 0%, rgba(255,199,44,0.88) 6%, rgba(255,199,44,0.65) 15%, rgba(255,199,44,0.35) 26%, rgba(255,199,44,0.12) 36%, transparent 48%); }
  .find-strip-info, .find-strip-cta { max-width: none; padding: 32px 24px; }
  .find-strip-cta { text-align: left; align-items: flex-start; margin-left: 0; }
  .find-strip-watermark { top: 60px; height: 120px; opacity: 0.12; }
}

/* ---------- Combined "Why Joocy hits different" + process cards ---------- */
.combo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 16px 24px;
  margin-top: 40px;
}
.combo-text {
  background: #241713;
  border: 3px solid var(--red-dark);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 5px 5px 0 var(--red-dark);
  display: flex;
  flex-direction: column;
}
.combo-number {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yellow);
  font-size: 1.1rem;
}
.combo-text h3 { color: var(--red-light); font-size: 1.1rem; margin: 4px 0 6px; }
.combo-text p { color: var(--white); font-size: 0.9rem; margin: 0; max-width: none; }
.combo-text--green { border-color: var(--green); box-shadow: 5px 5px 0 var(--green); }
.combo-text--green h3 { color: var(--green); }
.combo-text--yellow { border-color: var(--yellow); box-shadow: 5px 5px 0 var(--yellow); }
.combo-text--yellow h3 { color: var(--yellow); }
.combo-media {
  aspect-ratio: 1 / 1;
  border: 3px solid var(--red-dark);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 5px 5px 0 var(--red-dark);
}
.combo-media video, .combo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.combo-media--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: repeating-linear-gradient(45deg, var(--ink), var(--ink) 12px, #2A1210 12px, #2A1210 24px);
  color: rgba(255,255,255,0.65);
  text-align: center;
  padding: 10px;
}
@media (max-width: 900px) {
  .combo-grid { grid-template-columns: 1fr 1fr; }
  .combo-grid > *:nth-child(1) { order: 1; }
  .combo-grid > *:nth-child(2) { order: 2; }
  .combo-grid > *:nth-child(3) { order: 5; }
  .combo-grid > *:nth-child(4) { order: 6; }
  .combo-grid > *:nth-child(5) { order: 3; }
  .combo-grid > *:nth-child(6) { order: 4; }
  .combo-grid > *:nth-child(7) { order: 7; }
  .combo-grid > *:nth-child(8) { order: 8; }
}

/* ---------- Grass-fed beef strip ---------- */
.grass-fed-strip { background: var(--green-deep); border-bottom: 3px solid var(--ink); }
.grass-fed-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  text-align: center;
}
.grass-fed-strip-inner p { margin: 0; color: var(--white); font-weight: 500; max-width: 70ch; }
.grass-fed-strip-inner strong { font-family: var(--font-display); }
.grass-fed-icon { font-size: 1.4rem; flex-shrink: 0; }
@media (max-width: 600px) { .grass-fed-strip-inner { flex-direction: column; gap: 6px; } }

/* ---------- Rating badge (above reviews) ---------- */
.rating-badge {
  display: inline-block;
  background: var(--ink);
  border: 3px solid var(--yellow);
  border-radius: 16px;
  padding: 14px 22px;
}
.rating-stars { color: var(--yellow); font-size: 1.3rem; letter-spacing: 3px; line-height: 1; margin-bottom: 6px; }
.rating-score { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 1.1rem; }
.rating-sep { color: var(--yellow); }
.rating-sub {
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* ---------- Hero intro (relocated from hero) ---------- */
.hero-intro { background: var(--bg); padding: 34px 0; text-align: center; border-bottom: 3px solid var(--ink); }
.hero-intro-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--red-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 10px;
}
.hero-intro-lede { color: var(--ink-soft); font-size: 1.1rem; max-width: 56ch; margin: 0 auto; }

/* ---------- Focus visibility ---------- */
/* summary is neither a button nor a link, so it has to be named here
   or the FAQ rows are the one control on the site you cannot see
   yourself tab onto. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--red); outline-offset: 2px;
}
/* On the ink grounds the red outline all but disappears; yellow reads
   on both. */
.dark-panel a:focus-visible, .dark-panel button:focus-visible,
footer.site-footer a:focus-visible, footer.site-footer button:focus-visible,
header.site-header a:focus-visible, header.site-header button:focus-visible {
  outline-color: var(--yellow);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}

/* ---------- Footer copy rows ----------
   The house kit's copy buttons sit beside the detail they copy, so the
   block layout of .footer-col a has to be relaxed for these two rows. */
.footer-copy-row { display: flex; align-items: center; margin-bottom: 8px; }
.footer-copy-row a { margin-bottom: 0; }