:root {
  --red: #D9242A;
  --red-dark: #B01D22;
  --red-deep: #A81A1F;
  --yellow: #FFC72C;
  --yellow-soft: #FFD557;
  --black: #0A0A0A;
  --ink: #1A1A1A;
  --paper: #FAF7F2;
  --cream: #FFF8EC;
  --muted: #6B6B6B;
  --border: #E8E2D6;
  --ocean-1: #2C6BA8;
  --ocean-2: #4A95C8;
  --ocean-3: #6BB0DC;
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 88px;
}

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

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PROMO STRIP */
.promo-strip {
  background: var(--black);
  color: var(--yellow);
  text-align: center;
  padding: 8px 16px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  z-index: 101;
}
.promo-strip .dot { color: var(--red); margin: 0 8px; }

/* HEADER */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 16px;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 130px;
}
.logo img, .logo svg { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .logo { width: 100px; } }

.nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  /* Mobile: dropdown panel anchored to the bottom of the sticky header. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  padding: 6px 0;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav a {
  position: relative;
  padding: 14px 22px;
  transition: color 0.2s, background 0.15s;
  color: var(--ink);
  border-bottom: 1px solid rgba(10,10,10,0.04);
}
.nav a:last-child { border-bottom: 0; }
.nav a:hover { color: var(--red); background: rgba(217,36,42,0.04); }
.nav a.active { color: var(--red); }
.nav a.active::after {
  content: '';
  position: absolute;
  bottom: 8px; left: 22px;
  width: 22px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}

/* Hamburger toggle (mobile only). `order: 99` pushes it to the far-right
   end of the flex line so it sits past the Order Now button rather than
   crowding between the logo and the CTA. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  order: 99;
  margin: 0 0 0 4px;
  transition: background 0.15s;
}
.nav-toggle:hover { background: rgba(10,10,10,0.05); }
.nav-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.btn-order-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: white;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(217,36,42,0.25);
  flex-shrink: 0;
}
.btn-order-header:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(217,36,42,0.35);
}
.clock {
  width: 18px; height: 18px;
  border: 2px solid white;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.clock::after {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  width: 2px; height: 6px;
  background: white;
  transform-origin: bottom;
  transform: rotate(35deg);
}
/* Slim the order button on narrow phones so it doesn't crowd the logo. */
@media (max-width: 540px) {
  .btn-order-header { padding: 9px 14px; font-size: 12px; gap: 6px; letter-spacing: 0.5px; }
  .btn-order-header .clock { width: 14px; height: 14px; }
  .header-inner { gap: 8px; padding: 8px 14px; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    flex-direction: row;
    gap: 36px;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  .nav a { padding: 8px 0; border: 0; }
  .nav a:hover { background: none; }
  .nav a.active::after { bottom: -4px; left: 0; right: 0; width: auto; }
  .header-inner { padding: 10px 32px; }
}

/* HERO */
.hero {
  position: relative;
  background: var(--black);
  color: white;
  overflow: hidden;
  min-height: 620px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%),
    url('images/hero-loaded-spud.jpg');
  background-size: cover;
  background-position: center 30%;
}
@media (min-width: 800px) {
  .hero-bg {
    background-image:
      linear-gradient(90deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.85) 28%, rgba(0,0,0,0.4) 50%, transparent 72%),
      url('images/hero-loaded-spud.jpg');
    background-position: right center;
    background-size: cover;
  }
}
.hero-grain {
  position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.hero-content {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 20px 70px;
  z-index: 2;
}
.hero-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: 3px;
  color: var(--yellow);
  line-height: 1;
  animation: fadeUp 0.6s ease both;
}
.hero-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(48px, 9vw, 100px);
  line-height: 0.92;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin-top: 6px;
  animation: fadeUp 0.7s ease 0.1s both;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
.hero-title .accent {
  display: block;
  color: var(--red);
  font-size: clamp(72px, 16vw, 168px);
  line-height: 0.85;
  letter-spacing: -4px;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.6);
  margin-top: -6px;
}
.hero-underline {
  width: 180px;
  height: 6px;
  background: var(--yellow);
  border-radius: 3px;
  margin: 18px 0 26px;
  animation: fadeUp 0.7s ease 0.2s both;
  position: relative;
}
.hero-underline::after {
  content: '';
  position: absolute;
  left: 30px; top: 100%;
  width: 60px; height: 12px;
  border-bottom: 4px solid var(--yellow);
  border-radius: 0 0 50% 50%;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  margin-top: -3px;
  transform: rotate(-2deg);
  opacity: 0.7;
}
.hero-subtext {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: 8px;
  max-width: 480px;
  animation: fadeUp 0.7s ease 0.3s both;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.hero-subtext .yellow { color: var(--yellow); }
.hero-subtext .light { font-family: 'Inter', sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.65em; display: block; margin-top: 10px; max-width: 380px; opacity: 0.95; }

.hero-arrow {
  display: none;
  position: absolute;
  bottom: 38%;
  left: 36%;
  width: 110px;
  z-index: 3;
  opacity: 0.85;
  animation: fadeUp 0.7s ease 0.5s both;
}
@media (min-width: 900px) { .hero-arrow { display: block; } }

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
  animation: fadeUp 0.7s ease 0.4s both;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  min-height: 56px;
  text-align: center;
}
.btn-primary {
  background: var(--red);
  color: white;
  box-shadow: 0 8px 24px rgba(217,36,42,0.5);
}
.btn-primary:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(217,36,42,0.6);
}
.btn-secondary { background: transparent; color: white; border-color: white; }
.btn-secondary:hover { background: white; color: var(--black); }

.arrow-circle {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  position: relative;
  font-size: 0;
}
.arrow-circle::after {
  content: '→';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: white;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* VALUE STRIP */
.value-strip {
  background: var(--ink);
  color: white;
  padding: 18px 0;
  border-top: 4px solid var(--yellow);
}
.value-strip-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
}
.value-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.value-item .icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--yellow);
}
.value-item .icon svg { width: 100%; height: 100%; }
@media (max-width: 700px) {
  .value-strip-inner { gap: 4px; }
  .value-item { padding: 6px 12px; font-size: 11px; letter-spacing: 1px; }
  .value-item .icon { width: 18px; height: 18px; }
}

/* SECTION */
.section { padding: 56px 0 64px; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-title .flame {
  display: inline-block;
  font-size: 0.95em;
  filter: drop-shadow(0 2px 4px rgba(217,36,42,0.4));
}
.view-all {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-all:hover { color: var(--red-dark); }

.favorites-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 600px) { .favorites-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .favorites-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.fav-card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
}
.fav-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.15);
}
.fav-card.featured::before {
  content: '★ Best Seller';
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: var(--yellow);
  color: var(--black);
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-transform: uppercase;
}
.fav-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
}
.fav-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.fav-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 19px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1.1;
}
.fav-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
  flex-grow: 1;
  margin: 4px 0 8px;
}
.fav-price {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: var(--ink);
  margin-top: auto;
}
.fav-add {
  margin-top: 12px;
  width: 100%;
  background: var(--red);
  color: white;
  border: none;
  padding: 14px 16px;
  border-radius: 8px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s, transform 0.15s;
  min-height: 48px;
}
.fav-add:hover { background: var(--red-dark); }
.fav-add:active { transform: scale(0.98); }
.cart-icon { width: 16px; height: 16px; display: inline-block; }

/* BROWSE MENU */
.browse-section {
  background: var(--paper);
  padding: 16px 0 64px;
}
.browse-header { text-align: center; margin-bottom: 36px; }
.browse-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}
.browse-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 4px;
  background: var(--yellow);
  border-radius: 2px;
}
.categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 700px) { .categories { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.cat-card {
  background: white;
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
  border-color: var(--yellow);
}
.cat-icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}
.cat-icon.spuds { background: #FFEFD5; }
.cat-icon.salads { background: #E8F4E0; }
.cat-icon.subs { background: #FFE4D5; }
.cat-icon.sides { background: #DCE9F5; }
.cat-info { flex-grow: 1; min-width: 0; }
.cat-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 17px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.1;
}
.cat-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: 6px;
}
.cat-link {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
}

/* TESTIMONIALS */
.testimonials {
  background: white;
  padding: 56px 0 64px;
  position: relative;
}
.testimonials-header { text-align: center; margin-bottom: 36px; }
.testimonials-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 4.5vw, 40px);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.testimonials-sub {
  font-size: 15px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stars { color: var(--yellow); font-size: 16px; letter-spacing: 1px; }

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 700px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.testimonial {
  background: var(--cream);
  border-radius: 14px;
  padding: 24px 22px 22px;
  border: 1px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: -8px; left: 16px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 64px;
  color: var(--red);
  line-height: 1;
  opacity: 0.25;
}
.testimonial-stars {
  color: var(--yellow);
  font-size: 16px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.testimonial-quote {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 16px;
  flex-grow: 1;
  font-weight: 500;
}
.testimonial-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: -0.3px;
  color: var(--red);
  text-transform: uppercase;
}
.testimonials-cta {
  text-align: center;
  margin-top: 28px;
}
.testimonials-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.testimonials-cta a:hover {
  background: var(--ink);
  color: white;
}

/* MEET SPUDDY */
.spuddy-section {
  position: relative;
  background: linear-gradient(180deg, var(--ocean-1) 0%, var(--ocean-2) 50%, var(--ocean-3) 100%);
  color: white;
  overflow: hidden;
  padding: 50px 0 60px;
}
.spuddy-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(180deg, transparent 0%, #E8C99B 100%);
  opacity: 0.4;
}
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  filter: blur(2px);
}
.cloud-1 { top: 20px; left: 5%; width: 80px; height: 30px; }
.cloud-2 { top: 40px; left: 35%; width: 100px; height: 32px; opacity: 0.7; }
.cloud-3 { top: 25px; right: 30%; width: 70px; height: 26px; opacity: 0.6; }
.palms {
  position: absolute;
  right: -10px;
  bottom: 0;
  width: 220px;
  height: 280px;
  display: none;
}
@media (min-width: 800px) { .palms { display: block; } }

.spuddy-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.spuddy-mascot {
  width: 240px;
  max-width: 100%;
  flex-shrink: 0;
}
@media (max-width: 600px) { .spuddy-mascot { width: 180px; } }
.spuddy-mascot img { width: 100%; height: auto; display: block; }
.spuddy-mascot svg { width: 100%; height: 100%; }
.spuddy-text { flex: 1; min-width: 240px; max-width: 620px; }
.spuddy-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 14px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.spuddy-copy {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 8px;
  font-weight: 500;
}
.spuddy-copy .yellow { color: var(--yellow); font-weight: 700; }
.spuddy-tag {
  font-family: 'Archivo Black', sans-serif;
  font-size: 19px;
  color: var(--yellow);
  letter-spacing: -0.3px;
  margin-top: 16px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.spuddy-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  color: var(--ocean-1);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 18px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.spuddy-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.3); }

/* JOIN GUEST BOOK STRIP */
.guestbook {
  background: var(--yellow);
  color: var(--black);
  padding: 28px 0;
  text-align: center;
}
.guestbook-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.guestbook-text {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  max-width: 480px;
  text-align: left;
  line-height: 1.3;
}
.guestbook-text small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
  opacity: 0.75;
}
.guestbook-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--black);
  color: var(--yellow);
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: transform 0.2s;
}
.guestbook-cta:hover { transform: translateY(-2px) scale(1.02); }

@media (max-width: 600px) {
  .guestbook-text { text-align: center; font-size: 14px; }
}

/* LOCATION + ORDER */
.location-section {
  background: var(--red);
  color: white;
  padding: 32px 0;
  position: relative;
  z-index: 1;
}
.location-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .location-inner {
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
  }
}
.loc-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: center;
}
@media (min-width: 900px) {
  .loc-block { justify-content: flex-start; }
  .loc-block.right { justify-content: flex-end; }
}
.loc-icon-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.loc-icon-circle svg { width: 18px; height: 18px; }
.loc-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.92;
}
.loc-detail {
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 500;
  font-style: normal;
}
.loc-phone {
  color: var(--yellow);
  font-weight: 700;
  margin-top: 4px;
  display: inline-block;
  font-size: 16px;
}
.loc-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--black);
  padding: 18px 42px;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  line-height: 1;
}
.loc-cta-row { display: inline-flex; align-items: center; gap: 12px; }
.loc-cta-row .arrow-black {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--black);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.loc-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.loc-cta-sub {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-family: 'Archivo Black', sans-serif;
  opacity: 0.85;
  font-weight: 700;
}
.loc-everyday {
  font-family: 'Archivo Black', sans-serif;
  color: var(--yellow);
  letter-spacing: 1px;
  margin-top: 2px;
  display: inline-block;
}

/* FOOTER */
.footer {
  background: var(--red-deep);
  color: rgba(255,255,255,0.92);
  padding: 32px 0 24px;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-col h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 10px;
}
.footer-col p, .footer-col a { font-size: 13.5px; line-height: 1.65; }
.footer-col a { display: block; transition: color 0.15s; }
.footer-col a:hover { color: var(--yellow); }
.footer-bar {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.social { display: flex; align-items: center; gap: 10px; }
.social-label {
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: white;
  font-size: 11px;
}
.social-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.2s;
}
.social-icon:hover { background: rgba(0,0,0,0.3); }
.social-icon svg { width: 14px; height: 14px; }
.footer-link { color: rgba(255,255,255,0.85); font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.footer-link:hover { color: var(--yellow); }

/* MOBILE BAR */
.mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: white;
  border-top: 1px solid var(--border);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  transition: transform 0.22s ease;
}

/* When the OrderOut iframe dominates the viewport, hide the sticky bar so the
   iframe's own ADD TO CART button (which sits at the bottom of its viewport)
   isn't covered. Triggered by an IntersectionObserver in site.js. */
body.iframe-dominant .mobile-bar {
  transform: translateY(110%);
  pointer-events: none;
}
body.iframe-dominant .back-to-top {
  bottom: calc(20px + env(safe-area-inset-bottom));
}
.mobile-bar-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  min-height: 56px;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}
.mobile-bar-btn:active { transform: scale(0.98); }
.mb-order {
  background: var(--red);
  color: white;
  box-shadow: 0 4px 12px rgba(217,36,42,0.3);
}
.mb-order:hover { background: var(--red-dark); }
.mb-call {
  background: var(--ink);
  color: white;
  flex: 0 0 auto;
  padding: 16px 22px;
}
.mb-call:hover { background: #000; }
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .mobile-bar { display: none; }
}

.fav-card { animation: cardIn 0.5s ease both; }
.fav-card:nth-child(1) { animation-delay: 0.05s; }
.fav-card:nth-child(2) { animation-delay: 0.12s; }
.fav-card:nth-child(3) { animation-delay: 0.19s; }
.fav-card:nth-child(4) { animation-delay: 0.26s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed;
  top: 10px; left: 10px;
  background: var(--red);
  color: white;
  padding: 12px 16px;
  z-index: 999;
  border-radius: 6px;
  font-weight: 700;
}

/* =========================================================
   SUBPAGE UTILITIES — used by menu / about / contact / franchise.
   Homepage doesn't need these.
   ========================================================= */

.page-hero {
  position: relative;
  background: var(--black);
  color: white;
  padding: 48px 0 56px;
  overflow: hidden;
  border-bottom: 4px solid var(--yellow);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%),
    url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=1600&q=80');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.55;
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--yellow);
}
.page-hero-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  margin-top: 8px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
.page-hero-title .accent { color: var(--red); }
.page-hero-sub {
  font-size: clamp(15px, 2vw, 18px);
  margin-top: 14px;
  max-width: 560px;
  font-weight: 500;
  opacity: 0.95;
}

/* Menu page — categorized item lists */
.menu-section { padding: 48px 0 16px; }
.menu-section.alt { background: white; }
.menu-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--yellow);
}
.menu-section-head .menu-cat-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.menu-section-head h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.menu-section-head .menu-section-sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 4px;
}

.menu-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) { .menu-list { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

.menu-item {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
  transition: border-color 0.2s, transform 0.2s;
}
.menu-item:hover {
  border-color: var(--yellow);
  transform: translateY(-2px);
}
/* Accessibility widget — floating button bottom-left + popover panel.
   Mirror image of back-to-top. Body classes toggle visual modes. */
.a11y-toggle {
  position: fixed;
  left: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  z-index: 95;
  transition: background 0.18s ease, bottom 0.22s ease;
}
.a11y-toggle:hover { background: var(--red); }
.a11y-toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (min-width: 900px) {
  .a11y-toggle { bottom: 24px; left: 24px; }
}
body.iframe-dominant .a11y-toggle {
  bottom: calc(20px + env(safe-area-inset-bottom));
}

.a11y-panel {
  position: fixed;
  left: 16px;
  bottom: calc(156px + env(safe-area-inset-bottom));
  width: min(300px, calc(100vw - 32px));
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  padding: 16px;
  z-index: 96;
  display: none;
  font-family: 'Inter', sans-serif;
}
.a11y-panel.is-open { display: block; }
@media (min-width: 900px) {
  .a11y-panel { bottom: 84px; left: 24px; }
}
body.iframe-dominant .a11y-panel {
  bottom: calc(80px + env(safe-area-inset-bottom));
}
.a11y-panel-head {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--ink);
}
.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 8px;
  text-align: left;
}
.a11y-option:hover { border-color: var(--ink); }
.a11y-option-state {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: transparent;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.a11y-option[aria-pressed="true"] {
  background: var(--cream);
  border-color: var(--red);
}
.a11y-option[aria-pressed="true"] .a11y-option-state {
  background: var(--red);
  border-color: var(--red);
}
.a11y-reset {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.a11y-reset:hover { color: var(--ink); }

/* Accessibility modes. !important is used sparingly to override inline styles
   and higher-specificity rules where necessary. The OrderOut iframe content
   is cross-origin and cannot be styled from here — these modes only affect
   the wrapper site. */
body.a11y-larger-text { font-size: 120%; }
body.a11y-larger-text .menu-item-name { font-size: 22px; }
body.a11y-larger-text .menu-item-price { font-size: 18px; }
body.a11y-larger-text .nav a, body.a11y-larger-text .footer-col a, body.a11y-larger-text .footer-col p { font-size: 17px; }

body.a11y-high-contrast {
  background: #fff !important;
  color: #000 !important;
}
body.a11y-high-contrast .menu-item,
body.a11y-high-contrast .order-frame-wrap,
body.a11y-high-contrast .menu-note,
body.a11y-high-contrast .a11y-panel {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}
body.a11y-high-contrast .header,
body.a11y-high-contrast .footer,
body.a11y-high-contrast .promo-strip,
body.a11y-high-contrast .guestbook,
body.a11y-high-contrast .mobile-bar,
body.a11y-high-contrast .a11y-toggle,
body.a11y-high-contrast .back-to-top {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.a11y-high-contrast .page-hero,
body.a11y-high-contrast .menu-section,
body.a11y-high-contrast .menu-section.alt,
body.a11y-high-contrast .order-section,
body.a11y-high-contrast main {
  background: #fff !important;
  color: #000 !important;
}
body.a11y-high-contrast .page-hero::before {
  display: none !important;
}
body.a11y-high-contrast .page-hero-title,
body.a11y-high-contrast .page-hero-sub,
body.a11y-high-contrast .page-hero-eyebrow,
body.a11y-high-contrast h1,
body.a11y-high-contrast h2,
body.a11y-high-contrast h3,
body.a11y-high-contrast h4 {
  color: #000 !important;
  text-shadow: none !important;
}
body.a11y-high-contrast a { color: #1a1aFF !important; text-decoration: underline !important; }
body.a11y-high-contrast .accent { color: #B00 !important; }
body.a11y-high-contrast .menu-item-name { color: #000 !important; }
body.a11y-high-contrast .btn-order-header,
body.a11y-high-contrast .mb-order,
body.a11y-high-contrast .guestbook-cta,
body.a11y-high-contrast .loc-cta {
  background: #B00 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
}

body.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px !important; }

body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Back-to-top floating button. Injected from site.js. Sits above .mobile-bar
   on phones (mobile-bar is fixed at bottom up to 900px); slides to standard
   bottom-right on desktop where the mobile bar is hidden. */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
  z-index: 95;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--red); }
.back-to-top:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
@media (min-width: 900px) {
  .back-to-top { bottom: 24px; right: 24px; }
}

/* Order Online embed (OrderOut iframe on menu.html#order-online) */
.order-section { padding-bottom: 40px; }
.order-frame-wrap {
  margin-top: 20px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
}
.order-frame {
  display: block;
  width: 100%;
  border: 0;
  background: #FFFFFF;
  /* JS in site.js sizes the iframe to viewport-minus-header at load and on
     resize, so the SPA's cart/checkout UI ends up at the bottom of the
     visible viewport (where customers expect it) instead of 5400px down the
     page. The values below are CSS fallbacks in case JS fails. */
  height: 80vh;
  min-height: 480px;
  max-height: 900px;
}
.order-frame-note {
  margin: 12px 4px 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--muted);
}
.order-frame-note a {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.menu-item-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1.15;
}
.menu-item-price {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
}
.menu-item-desc {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.menu-item.featured {
  background: white;
  border-color: var(--yellow);
  box-shadow: 0 6px 18px rgba(255,199,44,0.25);
}
.menu-item.featured .menu-item-name::before {
  content: '★ ';
  color: var(--yellow);
}
/* Sold-out state — toggled from the admin availability switch, baked into the
   regenerated menu.html. Greys the row, strikes the price, badges the name. */
.menu-item.sold-out {
  opacity: 0.6;
  background: var(--paper);
}
.menu-item.sold-out:hover {
  transform: none;
  border-color: var(--border);
}
.menu-item.sold-out .menu-item-price {
  color: var(--muted);
  text-decoration: line-through;
}
.sold-out-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
}
/* Holiday / temporary hours override — set from the admin; rendered in the
   location block only when a note exists. */
.hours-override {
  margin-top: 10px;
  background: var(--yellow);
  color: var(--black);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 8px;
}

.menu-note {
  background: var(--cream);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 12px 0;
}
.menu-note strong { color: var(--ink); font-family: 'Archivo Black', sans-serif; letter-spacing: 0.3px; }

/* About / Franchise / generic content sections */
.content-section {
  padding: 56px 0;
  background: var(--paper);
}
.content-section.alt { background: white; }
.content-section .container { max-width: 880px; }
.content-section h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 4.5vw, 40px);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.content-section h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--red);
  margin: 28px 0 10px;
}
.content-section p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 14px;
}
.content-section p.lead {
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}
.content-section ul {
  margin: 8px 0 16px 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.content-section ul li { margin-bottom: 6px; }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 800px) {
  .contact-grid { grid-template-columns: 1fr 1.3fr; gap: 36px; }
}
.contact-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 26px 28px;
  box-shadow: var(--shadow-md);
}
.contact-card h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
  margin-top: 18px;
}
.contact-card h3:first-child { margin-top: 0; }
.contact-card .info-row { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.contact-card .info-row a { color: var(--red); font-weight: 700; }
.contact-card .info-row a:hover { color: var(--red-dark); }

.form-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 26px 28px;
  box-shadow: var(--shadow-md);
}
.form-card h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-card .form-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--red);
  background: white;
}
.form-row textarea { resize: vertical; min-height: 110px; }
.form-row.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) { .form-row.row-2 { grid-template-columns: 1fr; } }

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--red);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  min-height: 52px;
  margin-top: 4px;
  box-shadow: 0 6px 16px rgba(217,36,42,0.3);
}
.btn-submit:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(217,36,42,0.4);
}

.map-embed {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: var(--cream);
  aspect-ratio: 16/9;
  width: 100%;
}
.map-embed iframe { border: 0; width: 100%; height: 100%; display: block; }

.franchise-callout {
  background: var(--yellow);
  color: var(--black);
  padding: 28px;
  border-radius: 14px;
  margin: 24px 0;
  text-align: center;
}
.franchise-callout h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 8px;
}
.franchise-callout p { font-size: 15px; line-height: 1.55; margin-bottom: 0; }
.franchise-callout p + p { margin-top: 6px; }

/* ─────────────────────────────────────────────────────────────
   Credit bar — beach/ocean motif. The bar IS Tim's bar; Spuddy
   rides on a foam wave that's part of it, sides feather softly
   into the page so there's no hard edge, Spuddy's bottom feathers
   into the water so he reads as emerging from the surf rather
   than pasted on top. Brand fonts + accents stay consistent with
   the rest of the site (Bebas Neue eyebrow, Archivo Black
   headline, Inter body, brand red + yellow accents).
   ───────────────────────────────────────────────────────────── */
.credit-bar {
  position: relative;
  /* Sky → ocean → sand. Sand owns the bottom 28% so Spuddy has a
     beach to stand on. */
  background:
    linear-gradient(180deg,
      #A6D4E8  0%,
      #6FB3D2 22%,
      #2E7AA8 55%,
      #2E7AA8 70%,
      #E8D4A8 73%,
      #F5E6CC 100%);
  color: #FFF8EC;
  padding: 38px 20px 28px;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
}

/* Scene layer — palm trees, sun, mid-foam, sand grain. All pointer-
   events: none so they never intercept clicks. */
.credit-bar-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cb-sun {
  position: absolute;
  top: 14px;
  right: 9%;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 0 12px rgba(255,196,44,0.55));
}
.cb-palm {
  position: absolute;
  bottom: 8%;
  width: 58px;
  height: 80px;
  opacity: 0.9;
  filter: drop-shadow(0 4px 6px rgba(0,40,72,0.25));
}
.cb-palm-left  { left:  3%;  transform: rotate(-6deg); }
.cb-palm-right { right: 3%;  transform: rotate(6deg) scaleX(-1); }
.cb-foam-mid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28%;
  height: 14px;
  width: 100%;
}
/* Dither sand grain — repeating SVG noise dots so the sand doesn't read
   as a flat gradient. The whole sand band gets a low-opacity dot
   pattern for a stylized "planned" beach texture. */
.cb-sand-grain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='1' cy='1' r='0.6' fill='%238a6b3a'/><circle cx='5' cy='3' r='0.5' fill='%238a6b3a'/><circle cx='3' cy='5' r='0.5' fill='%238a6b3a'/><circle cx='7' cy='6' r='0.6' fill='%238a6b3a'/></svg>");
  background-size: 8px 8px;
  mix-blend-mode: multiply;
}
/* Side feathering — page (paper) fades INTO the bar so the edges
   transition seamlessly instead of cutting hard against the body. */
.credit-bar::before,
.credit-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
  z-index: 3;
}
.credit-bar::before {
  left: 0;
  background: linear-gradient(90deg, #FAF7F2 0%, rgba(250,247,242,0) 100%);
}
.credit-bar::after {
  right: 0;
  background: linear-gradient(-90deg, #FAF7F2 0%, rgba(250,247,242,0) 100%);
}

/* Foam wave at the top — two soft layers of white, low opacity, so
   the bar's top edge looks like the leading edge of a wave breaking. */
.credit-bar-foam {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 28px;
  pointer-events: none;
  line-height: 0;
  z-index: 2;
}
.credit-bar-foam svg { width: 100%; height: 100%; display: block; }

.credit-bar-inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  text-align: left;
  padding-top: 4px;
}

.credit-spuddy {
  flex: 0 0 130px;
  width: 130px;
  height: 130px;
  margin-bottom: -14px; /* board sinks slightly into the sand */
  filter: drop-shadow(0 10px 14px rgba(8,40,72,0.35));
  /* Feather Spuddy's bottom into the sand color so he emerges from the
     beach instead of being pasted on top. The mask fades from full
     opacity to transparent in the lower 22%. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,0.0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,0.0) 100%);
  /* Stepped (dithered) bob — discrete poses at 6 frames per cycle so the
     motion reads as a planned animation loop, not a generic smooth bob. */
  animation: spuddy-pose 4.2s steps(6, end) infinite;
  transform-origin: 50% 92%;
}
.credit-spuddy img { width: 100%; height: 100%; display: block; }
@keyframes spuddy-pose {
  0%   { transform: translateY(0px)   rotate(-4deg); }
  17%  { transform: translateY(-3px)  rotate(-2deg); }
  34%  { transform: translateY(-7px)  rotate(0deg); }
  50%  { transform: translateY(-9px)  rotate(2deg); }
  67%  { transform: translateY(-7px)  rotate(4deg); }
  84%  { transform: translateY(-3px)  rotate(2deg); }
  100% { transform: translateY(0px)   rotate(-4deg); }
}

/* Single-line attribution: "Built by Aaron Neece — Value Systems POS".
   Whole strip is one anchor (mailto) so any tap lands the email. */
.credit-bar-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #FFF8EC;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(8,40,72,0.3);
  padding-bottom: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.credit-bar-prefix {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: #FFC72C;
  text-transform: uppercase;
  opacity: 0.95;
}
.credit-bar-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: #FFF8EC;
}
.credit-bar-sep {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: #FFC72C;
  opacity: 0.85;
}
.credit-bar-co {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: #FFF8EC;
}
.credit-bar-line:hover .credit-bar-name,
.credit-bar-line:hover .credit-bar-co {
  color: #FFC72C;
  transition: color 0.15s ease;
}

@media (max-width: 720px) {
  .credit-bar { padding: 32px 16px 22px; }
  .credit-bar::before, .credit-bar::after { width: 50px; }
  .credit-bar-inner { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .credit-spuddy { width: 100px; height: 100px; flex-basis: 100px; margin-bottom: -8px; }
  .credit-bar-line { justify-content: center; gap: 6px; padding-bottom: 0; }
  .credit-bar-name, .credit-bar-sep, .credit-bar-co { font-size: 18px; }
  .cb-palm { width: 40px; height: 56px; bottom: 30%; }
  .cb-palm-left { left: 4px; }
  .cb-palm-right { right: 4px; }
  .cb-sun { width: 32px; height: 32px; top: 10px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .credit-spuddy { animation: none; }
}