/* ============================================================================
   Big Frank — "Ayo Glizzie" cartoony hot-dog look.
   Deep royal-blue background, mustard + ketchup, soft-rounded Fredoka, grilled
   hot-dog section dividers, a mustard drip under the header, and yellow outlined
   section titles. Body = Work Sans. GSAP reveal engine inherited from the base.
   ========================================================================== */

:root {
  --blue:       #151515;   /* main royal-blue background */
  --blue-2:     #241414;   /* lighter blue (gradients/panels) */
  --blue-deep:  #0a0a0a;   /* darker blue (footer / depth) */
  --brand:      #e01e1e;   /* ketchup red */
  --brand-2:    #bd1414;
  --accent:     #ffd000;   /* mustard */
  --accent-2:   #ffe14d;
  --ink:        #0a0a0a;   /* near-navy ink for card text + outlines */
  --paper:      #fff7e9;   /* cream card surface */
  --paper-2:    #ffefcf;
  --card-text:  #1d2a55;   /* dark text inside light cards */
  --card-muted: #5e6a8c;
  --text:       #ffffff;   /* default text on blue */
  --text-muted: rgba(255, 255, 255, 0.82);
  --border:     var(--ink);

  --radius:     20px;
  --radius-lg:  30px;
  --radius-pill:999px;
  --shadow-sm:  0 8px 20px rgba(6, 16, 54, 0.30);
  --shadow:     0 22px 48px rgba(6, 16, 54, 0.40);
  --shadow-lg:  0 36px 80px rgba(6, 16, 54, 0.46);
  --hard:       6px 6px 0 var(--ink);
  --hard-brand: 8px 9px 0 var(--brand);

  --display:    "Fredoka", system-ui, -apple-system, sans-serif;
  --body:       "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max-w:      1180px;
  --gutter:     clamp(20px, 4vw, 56px);

  /* mustard drip — used as a MASK over a solid mustard fill (so the band is one
     continuous strip, never tiled color blocks). Solid full-width top + teardrops. */
  --drip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 40' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0 H84 V14 C78 14 77 36 70 37 C63 38 62 14 55 14 C47 14 46 26 40 26 C33 26 32 14 25 14 C17 14 16 32 10 32 C5 32 4 14 0 14 Z'/%3E%3C/svg%3E");

  --dur-1:      .35s;
  --dur-2:      .6s;
  --ease:       cubic-bezier(.34, 1.3, .5, 1);   /* bouncy/playful */
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.reduced-motion, html:not(.has-js) { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0; overflow-x: hidden;
  font-family: var(--body); color: var(--text);
  background: var(--blue);
  background-image: linear-gradient(180deg, var(--blue-2) 0%, var(--blue) 38%, var(--blue) 100%);
  background-attachment: fixed;
  font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-1) var(--ease-soft); }
a:hover { color: var(--accent-2); }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; margin: 0 0 1rem; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.04; margin: 0 0 .5em; }
h1 { font-size: clamp(2.7rem, 6.8vw, 5.2rem); color: #fff; text-shadow: 0 5px 0 rgba(6, 16, 54, .35); }
h1 .accent-word { color: var(--accent); }
/* Section titles — bubbly YELLOW with a dark outline (paint-order keeps fill readable) */
h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem); color: var(--accent);
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(6, 16, 54, .3);
}
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 12.5px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 22px; height: 4px; border-radius: 3px; background: var(--brand); }
.accent-word { color: var(--accent); }

/* ─── Layout ─── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 8vw, 104px) 0; position: relative; }
.section--alt { background: rgba(0, 0, 0, 0.28); }   /* subtle deeper-blue panel */

/* ─── Buttons — chunky red pills ─── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: var(--radius-pill);
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .2px;
  background: var(--brand); color: #fff; border: 3px solid var(--ink); cursor: pointer;
  text-decoration: none; box-shadow: 4px 5px 0 var(--ink);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 var(--ink); color: #fff; background: var(--brand-2); }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-2); color: var(--ink); }
.btn--ghost { background: #fff; color: var(--ink); }
.btn--ghost:hover { background: var(--paper); color: var(--brand); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; color: #fff; }

/* ─── Top hot-dog strip + scrolling order banner (skin body_inject) ─── */
.topbar-strip {  /* transparent cut-out hot dog only — no lines, no background */
  width: 100%; height: 66px;
  background: url("divider.png") center center / cover no-repeat;
}
@media (max-width: 640px) { .topbar-strip { height: 46px; } }

.promo-marquee { background: var(--ink); color: var(--accent); overflow: hidden; white-space: nowrap; border-bottom: 4px solid var(--brand); }
.promo-marquee__track {
  display: inline-flex; padding: 9px 0;
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  letter-spacing: 1px; text-transform: uppercase;
  animation: marquee 24s linear infinite; will-change: transform;
}
.promo-marquee__track span { padding: 0 24px; position: relative; }
.promo-marquee__track span::after { content: "🌭"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); font-size: .9em; }
@keyframes marquee { to { transform: translateX(-50%); } }
html.reduced-motion .promo-marquee__track { animation: none; }

/* ─── Stretched grilled hot-dog section divider (generated → assets/divider.png) ─── */
.hotdog-divider {  /* transparent cut-out hot dog only — no lines, no background */
  width: 100%; height: clamp(64px, 8vw, 100px);
  background: url("divider.png") center center / cover no-repeat;
}
@media (max-width: 640px) { .hotdog-divider { height: 52px; } }

/* ─── Header + mustard drip ─── */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--blue); transition: box-shadow var(--dur-2) var(--ease-soft); }
.site-header::after {  /* solid mustard band, shaped into drips via a mask — oozes */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px;
  background: var(--accent);
  -webkit-mask: var(--drip) repeat-x top / 84px 30px;
          mask: var(--drip) repeat-x top / 84px 30px;
  pointer-events: none; z-index: 2;
  transform-origin: top center; animation: drip-ooze 3.4s var(--ease-soft) infinite;
}
.site-header::before {  /* a mustard droplet that periodically drips + falls */
  content: ""; position: absolute; left: 26%; top: 100%; margin-top: 30px;
  width: 13px; height: 15px; background: var(--accent);
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  opacity: 0; pointer-events: none; z-index: 1;
  animation: drip-fall 4.2s var(--ease-soft) infinite;
}
@keyframes drip-ooze { 0%, 100% { transform: scaleY(1); } 46% { transform: scaleY(1.22); } }
@keyframes drip-fall {
  0%, 58% { opacity: 0; transform: translateY(-4px) scaleY(.5); }
  66%     { opacity: 1; transform: translateY(0) scaleY(1); }
  100%    { opacity: 0; transform: translateY(54px) scaleY(1.4); }
}
html.reduced-motion .site-header::after { animation: none; }
html.reduced-motion .site-header::before { display: none; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; padding-bottom: 9px; position: relative; }
.site-header.is-scrolled { box-shadow: 0 10px 24px rgba(6, 16, 54, .34); }
.site-header__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.site-header__logo img { height: 50px; width: auto; transition: height var(--dur-2) var(--ease-soft); }
.site-header.is-scrolled .site-header__logo img { height: 42px; }
.site-header__brand { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 26px; line-height: 1; letter-spacing: -.01em; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.logo-fallback { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--display); font-weight: 700; font-size: 19px; border: 3px solid var(--ink); }
.site-nav { display: flex; gap: 6px; align-items: center; }
.site-nav a { position: relative; color: #fff; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: var(--radius-pill); transition: background var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft); }
.site-nav a:hover { color: var(--accent); background: rgba(255, 255, 255, 0.10); }
.site-header__cta { display: flex; align-items: center; gap: 14px; }
.site-header__phone { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 18px; line-height: 1; }

/* the mustard drip — a hanging blob row built from a tiled radial gradient */
.mustard-drip { position: relative; height: 20px; background: var(--accent); z-index: 40; }
.mustard-drip::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 20px;
  background: var(--drip) 0 0 / 28px 20px repeat-x;
}

/* ─── Hero — blue, big headline, framed photo + mascot ─── */
.hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(70px, 9vw, 120px); overflow: hidden; color: #fff; }
.hero__inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 5vw, 64px); align-items: center; position: relative; z-index: 1; }
.hero__copy { max-width: 600px; }
.hero__copy .eyebrow { color: var(--accent); }
.hero__copy .eyebrow::before { background: var(--brand); }
.hero__copy h1 { margin-bottom: 18px; }
.hero__sub { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--text-muted); margin-bottom: 30px; max-width: 540px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__rating { margin-top: 34px; display: inline-flex; align-items: center; gap: 14px; padding: 11px 22px; background: #fff; color: var(--ink); border-radius: var(--radius-pill); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--brand); }
.hero__rating .stars { color: var(--brand); font-size: 19px; letter-spacing: 3px; }
.hero__rating .text { font-size: 14px; font-weight: 700; color: var(--ink); }
/* decorative floating + swaying hot dog behind the hero */
.hero__dog { position: absolute; top: 7%; right: clamp(-60px, -3vw, -20px); width: clamp(170px, 22vw, 300px); z-index: 0; opacity: .9; filter: drop-shadow(5px 7px 0 rgba(6, 16, 54, 0.28)); transform-origin: center; animation: dog-float 7s var(--ease-soft) infinite; }
.hero__dog svg { display: block; width: 100%; height: auto; }
@keyframes dog-float { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-16px); } }
html.reduced-motion .hero__dog { animation: none; }
@media (max-width: 980px) { .hero__dog { display: none; } }

.hero__art { position: relative; }
.hero__photo { width: 100%; aspect-ratio: 4 / 3.5; object-fit: cover; border-radius: var(--radius-lg); border: 5px solid var(--ink); box-shadow: 12px 12px 0 var(--brand); background: var(--blue-deep); }
.hero__mascot { position: absolute; left: -42px; bottom: -40px; width: clamp(116px, 13vw, 178px); filter: drop-shadow(5px 7px 0 rgba(6, 16, 54, 0.3)); z-index: 3; }
.hero__mascot svg { display: block; width: 100%; height: auto; animation: bob 3.4s var(--ease-soft) infinite; transform-origin: center bottom; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
html.reduced-motion .hero__mascot svg { animation: none; }

/* section intro paragraphs sit on blue → light text */
.section > .container > p { color: var(--text-muted); }

/* ─── Cards (shared chunk markup) — cream cards, dark text ─── */
.services-grid, .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; margin-top: 8px; }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin-top: 40px; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-top: 40px; }

.service-card, .process-step, .work-card, .review-card { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--hard); color: var(--card-text); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.service-card:hover, .process-step:hover, .review-card:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: var(--hard-brand); }

/* MENU-CATEGORY grid */
.service-card { padding: 0 0 30px; overflow: hidden; text-align: center; }
.service-card::before { content: ""; display: block; height: 18px; background: repeating-linear-gradient(45deg, var(--brand) 0 18px, var(--accent) 18px 36px); }
.service-card__num { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--brand); border: 4px solid var(--ink); margin: 24px auto 16px; }
.service-card h3 { color: var(--ink); margin: 0 26px 10px; }
.service-card p { color: var(--card-muted); margin: 0 26px; font-size: 15.5px; line-height: 1.65; }

.process-step { padding: 32px 28px; text-align: center; }
.process-step__num { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1; margin-bottom: 16px; border: 4px solid var(--ink); }
.process-step h3 { color: var(--ink); margin-bottom: 10px; }
.process-step p { color: var(--card-muted); font-size: 15px; margin: 0; line-height: 1.65; }

/* Fan-favorites = bold square photo tiles */
.work-card { overflow: hidden; padding: 0; }
.work-card:hover { transform: translateY(-7px) rotate(1deg); box-shadow: var(--hard-brand); }
.work-card__img { width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: var(--paper-2); border-bottom: 3px solid var(--ink); transition: transform var(--dur-2) var(--ease); }
.work-card:hover .work-card__img { transform: scale(1.06); }
.work-card figcaption { padding: 20px 22px 24px; }
.work-card figcaption h3 { color: var(--ink); margin-bottom: 8px; }
.work-card figcaption p { color: var(--card-muted); font-size: 15px; margin: 0; }

/* ─── Promise band — bold ketchup-red band ─── */
.promise-band { position: relative; padding: clamp(72px, 10vw, 128px) 0; text-align: center; background: var(--brand); color: #fff; overflow: hidden; border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink); }
.promise-band .container { position: relative; z-index: 1; max-width: 860px; }
.promise-band .eyebrow { color: var(--accent); justify-content: center; }
.promise-band .eyebrow::before { background: #fff; }
.promise-band h2 { color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; font-size: clamp(2.2rem, 5vw, 4rem); margin: 0 auto 18px; max-width: 820px; }
.promise-band p { color: rgba(255, 255, 255, 0.94); font-size: 1.2rem; max-width: 640px; margin: 0 auto; }
.promise-band__mascot { position: absolute; right: 3%; bottom: -24px; width: clamp(118px, 13vw, 184px); transform: rotate(6deg); filter: drop-shadow(5px 7px 0 rgba(6, 16, 54, 0.24)); z-index: 0; }
.promise-band__mascot svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .promise-band__mascot { display: none; } }

/* ─── Why us ─── */
.why-us-diagonal { position: relative; overflow: hidden; }
.why-us-diagonal .container { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); position: relative; z-index: 1; }
.why-us-diagonal .eyebrow { color: var(--accent); }
.why-us-diagonal h2 { margin-bottom: 40px; max-width: 820px; }
.why-us-diagonal .why-us__list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1040px; }
.why-us-diagonal .why-us__item { background: var(--paper); color: var(--card-text); border: 3px solid var(--ink); border-radius: var(--radius-lg); padding: 26px; display: grid; grid-template-columns: 56px 1fr; gap: 18px; box-shadow: var(--hard); transition: transform var(--dur-2) var(--ease); }
.why-us-diagonal .why-us__item:hover { transform: translateY(-6px); }
.why-us-diagonal .why-us__num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.4rem; border: 4px solid var(--ink); }
.why-us-diagonal .why-us__item h3 { color: var(--ink); font-size: 1.2rem; margin-bottom: 8px; }
.why-us-diagonal .why-us__item p { color: var(--card-muted); margin: 0; font-size: 15px; }

/* ─── Reviews ─── */
.review-card { padding: 32px 30px; text-align: left; }
.review-card__stars { color: var(--brand); font-size: 18px; margin-bottom: 12px; letter-spacing: 2px; }
.review-card__text { font-size: 16px; line-height: 1.75; margin-bottom: 16px; color: var(--card-text); }
.review-card__author { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--brand); }

/* ─── Service areas / locations ─── */
.areas-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 32px; }
.area-pill { padding: 15px 22px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-pill); text-align: center; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 15px; box-shadow: 3px 3px 0 var(--ink); transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.area-pill:hover { background: var(--brand); color: #fff; transform: translateY(-3px); }
.area-card { box-shadow: var(--hard); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease) !important; }
.area-card:hover { transform: translateY(-4px); box-shadow: var(--hard-brand) !important; }

/* ─── FAQ ─── */
.faq-list { display: grid; gap: 14px; max-width: 880px; margin: 0 auto; }
.faq-item { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--hard); }
.faq-item:has(details[open]) { box-shadow: var(--hard-brand); }
.faq-item details summary { padding: 22px 28px; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 16.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item details summary::-webkit-details-marker { display: none; }
.faq-item details summary::after { content: "+"; font-family: var(--display); font-size: 1.7rem; color: var(--brand); line-height: .6; transition: transform var(--dur-1) var(--ease); }
.faq-item details[open] summary::after { transform: rotate(45deg); }
.faq-item details .faq-answer { padding: 0 28px 24px; color: var(--card-muted); font-size: 16px; line-height: 1.7; }

/* ─── NAP ─── */
.nap-block { display: grid; gap: 6px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.nap-block strong { color: #fff; font-size: 17px; font-family: var(--display); font-weight: 700; }
.nap-block a { color: var(--text-muted); font-weight: 600; }
.nap-block a:hover { color: var(--accent); }

/* ─── Contact CTA — mustard band, dark text ─── */
.contact-cta { position: relative; padding: clamp(72px, 10vw, 122px) 0; text-align: center; color: var(--ink); overflow: hidden; background: var(--accent); border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink); }
.contact-cta .container { position: relative; z-index: 1; }
.contact-cta .eyebrow { color: var(--brand); justify-content: center; }
.contact-cta .eyebrow::before { background: var(--ink); }
.contact-cta h2 { color: var(--brand); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; max-width: 800px; margin: 0 auto 18px; }
.contact-cta p { color: var(--ink); max-width: 600px; margin: 0 auto 32px; font-size: 1.1rem; font-weight: 500; }

/* ─── Contact form ─── */
.contact-form { display: grid; gap: 18px; max-width: 580px; }
.contact-form label { font-family: var(--display); font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 6px; display: block; }
.contact-form input, .contact-form textarea { width: 100%; padding: 15px 18px; border: 3px solid var(--ink); border-radius: var(--radius); font-family: var(--body); font-size: 16px; background: var(--paper); color: var(--card-text); transition: box-shadow var(--dur-1) var(--ease-soft); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 208, 0, 0.45); }
.contact-form textarea { min-height: 160px; resize: vertical; }

/* ─── Article ─── */
.article { color: var(--text-muted); }
.article h2 { margin-top: 1.6em; }
.article h2, .article h3 { color: #fff; -webkit-text-stroke: 0; }
.article ul { margin-bottom: 1.2rem; }
.article a { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Footer — deep blue ─── */
.site-footer { background: var(--blue-deep); color: rgba(255, 255, 255, 0.78); padding: 76px 0 30px; font-size: 15px; border-top: 5px solid var(--ink); }
.site-footer h4 { color: var(--accent); font-family: var(--display); font-size: 1.1rem; font-weight: 700; margin-bottom: 18px; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; margin-bottom: 50px; }
.site-footer a { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.site-footer a:hover { color: var(--accent); }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: rgba(255, 255, 255, 0.58); }
.site-footer__logo img { height: 48px; margin-bottom: 16px; }
.site-footer__blurb { color: rgba(255, 255, 255, 0.66); font-size: 15px; line-height: 1.7; max-width: 360px; }
.social-icons { display: flex; gap: 10px; margin-top: 16px; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: #fff !important; border: 2px solid var(--ink); transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.social-icons a:hover { transform: translateY(-3px) rotate(-8deg); background: var(--accent) !important; color: var(--ink) !important; }

/* ─── Dropdown ─── */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; padding-bottom: 16px; margin-bottom: -16px; }
.nav-dropdown__label { cursor: pointer; }
.nav-dropdown__menu { position: absolute; top: 100%; left: 0; min-width: 230px; max-width: 320px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); z-index: 60; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-1) var(--ease-soft), transform var(--dur-1) var(--ease-soft), visibility var(--dur-1); }
.nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown__menu a { padding: 10px 13px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.nav-dropdown__menu a:hover { background: rgba(229, 29, 29, 0.12); color: var(--brand); }

/* ─── Mobile hamburger ─── */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: #fff; border-radius: 2px; transition: transform .24s var(--ease-soft), opacity .24s var(--ease-soft); }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ═══ MOTION LAYER — reveal start states + reduced-motion / no-JS safety ═══ */
html.has-js:not(.reduced-motion) .hero__copy > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__copy > * { opacity: 1 !important; }
  .promo-marquee__track { animation: none !important; }
}

/* ─── Responsive ─── */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__art { max-width: 440px; margin: 0 auto; }
  .hero__mascot { width: 124px; left: auto; right: 4px; bottom: -34px; }
  .why-us-diagonal .why-us__list { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .site-header .container { flex-wrap: wrap; }
  .site-header__logo { order: 1; }
  .site-nav, .site-header__cta { order: 3; width: 100%; display: none; }
  .site-header.nav-open .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); }
  .site-header.nav-open .site-nav a { padding: 12px 14px; }
  .site-header.nav-open .site-header__cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 0 16px; }
  .site-header.nav-open .site-header__cta .btn { width: 100%; justify-content: center; }
  .nav-dropdown { flex-direction: column; align-items: stretch; padding: 0; margin: 0; }
  .site-header.nav-open .nav-dropdown__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 14px; min-width: 0; max-width: none; }
}
@media (max-width: 640px) {
  .hero { padding-top: clamp(40px, 10vw, 72px); }
}


/* ═══ Street Dog hero — background image only (clean, for iterating) ═══ */
/* Background-only hero: fit the WHOLE image within the screen (minus the
   marquee + sticky nav) so the full "AYO GLIZZIES" art — including the
   wordmark at the bottom — is visible in one view, no scroll, no crop. */
/* Two-layer hero: brick wall (layer 2) as the section backdrop, the
   transparent wording/logo poster (layer 1) full-bleed on top so the brick
   shows through the see-through gaps. Both are 3:2 so they line up exactly. */
.hero--dev {
  position:relative; overflow:hidden;
  background:#0a0a0a url("hero_brick.jpg") center top / cover no-repeat;
  padding:30px 0 0;                    /* 30px clears the header mustard drip */
}
.hero--dev .hero__overlay {
  display:block; width:100%; height:auto;   /* full-bleed across the whole hero */
  aspect-ratio:1536 / 1024;                 /* reserve height pre-load → no layout jump */
  margin:0; position:relative; z-index:3;   /* wording/badges sit ABOVE the mascot */
}
/* Center mascot + AYO GLIZZIES wordmark — behind the wording/badges layer, gently pulsing. */
.hero__logo {
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(88%, 1080px); height:auto; aspect-ratio:1536 / 1024;  /* reserve box → no load shift */
  z-index:1; pointer-events:none;
  transform-origin:50% 50%; animation:logo-pulse 2.8s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%,100% { transform:translate(-50%,-50%) scale(1);    }
  50%     { transform:translate(-50%,-50%) scale(1.045); }
}
html.reduced-motion .hero__logo { animation:none; }
@media (max-width:640px){ .hero__logo{ width:96%; top:44%; } }
/* Fire-grill glow — warm ember pool at the bottom, behind the dogs, softly pulsing. */
/* Yellow grill glow — warm yellow pool behind the dogs, softly pulsing. */
.hero__glow {
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; height:50%; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 90%,
    rgba(255,210,0,.62) 0%, rgba(255,170,20,.34) 38%, rgba(255,120,0,0) 72%);
  filter:blur(12px); mix-blend-mode:screen;
  animation:grill-glow 3.6s ease-in-out infinite;
}
@keyframes grill-glow {
  0%,100% { opacity:.70; transform:translateX(-50%) scale(1); }
  50%     { opacity:1;   transform:translateX(-50%) scale(1.04); }
}
/* Loaded dogs — bigger, pinned to the very bottom of the hero (lower smoke
   clipped by the section's overflow:hidden), floating up/down ever so slightly. */
/* Grill smoke — soft puffs rising from behind the dogs. */
.hero__smoke {
  position:absolute; left:0; right:0; bottom:6%; height:62%;
  z-index:4; pointer-events:none; mix-blend-mode:screen;
}
.hero__smoke span {
  position:absolute; bottom:0; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(228,223,217,.46) 0%, rgba(212,207,202,.24) 45%, rgba(200,196,190,0) 72%);
  filter:blur(10px); opacity:0;
  animation:smoke-rise 7.5s ease-in infinite;
}
.hero__smoke span:nth-child(1){ left:12%; width:150px; height:150px; animation-delay:0s;   }
.hero__smoke span:nth-child(2){ left:24%; width:175px; height:175px; animation-delay:1.1s; }
.hero__smoke span:nth-child(3){ left:36%; width:200px; height:200px; animation-delay:2.4s; }
.hero__smoke span:nth-child(4){ left:48%; width:210px; height:210px; animation-delay:3.3s; }
.hero__smoke span:nth-child(5){ left:59%; width:185px; height:185px; animation-delay:1.8s; }
.hero__smoke span:nth-child(6){ left:69%; width:170px; height:170px; animation-delay:4.1s; }
.hero__smoke span:nth-child(7){ left:79%; width:160px; height:160px; animation-delay:2.9s; }
.hero__smoke span:nth-child(8){ left:88%; width:150px; height:150px; animation-delay:5.0s; }
.hero__smoke span:nth-child(9){ left:50%; width:230px; height:230px; animation-delay:0.6s; }
@keyframes smoke-rise {
  0%   { opacity:0;   transform:translateY(0)     scale(.55); }
  16%  { opacity:1;   }
  60%  { opacity:.6;  }
  100% { opacity:0;   transform:translateY(-300px) scale(1.7); }
}
html.reduced-motion .hero__smoke { display:none; }

.hero__dogs {
  position:absolute; left:50%; bottom:-23%;
  width:122%; height:auto; aspect-ratio:1536 / 1024;  /* reserve box → no load shift */
  z-index:5; pointer-events:none;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));
  animation:float-dogs 5s ease-in-out infinite;
}
@keyframes float-dogs {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-9px); }
}
html.reduced-motion .hero__glow,
html.reduced-motion .hero__dogs { animation:none; }
/* The empty top hot-dog strip is hidden while iterating on the bg-only hero. */
.topbar-strip { display:none; }

/* ─── Build Your Glizzy — featured 3-card menu band ─── */
.glizzy {
  background:#0e0e0e; padding:clamp(46px,7vw,84px) 0; position:relative;
  border-top:4px solid var(--accent); border-bottom:4px solid var(--accent);
}
.glizzy__kicker {
  text-align:center; text-transform:uppercase; letter-spacing:2px;
  font-weight:700; color:var(--accent); font-size:13px; margin:0 0 6px;
}
.glizzy__title {
  text-align:center; font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(34px,6.2vw,70px); line-height:.95; text-transform:uppercase;
  margin:0 0 clamp(28px,4vw,46px);
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
}
.glizzy__title span { color:var(--accent); }
.glizzy__row {
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.6vw,22px); flex-wrap:nowrap;
}
.glizzy-card {
  margin:0; flex:1 1 0; min-width:0; border-radius:14px; overflow:hidden;
  border:3px solid var(--ink); box-shadow:0 14px 30px rgba(0,0,0,.5);
  transition:transform var(--dur-2,.3s) var(--ease-soft,ease);
}
.glizzy-card img { display:block; width:100%; height:auto; aspect-ratio:1536/1024; }
.glizzy-card:hover { transform:translateY(-6px) rotate(-.4deg); }
.glizzy-vs {
  flex:0 0 auto; font-family:var(--display); font-weight:800; color:var(--ink);
  background:var(--accent); border:3px solid var(--ink); border-radius:50%;
  width:clamp(38px,4vw,56px); height:clamp(38px,4vw,56px);
  display:grid; place-items:center; font-size:clamp(14px,1.6vw,20px);
  box-shadow:0 6px 0 rgba(0,0,0,.4); transform:rotate(-6deg);
}
.glizzy__tagline {
  text-align:center; margin:clamp(26px,4vw,42px) 0 0;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:#fff; font-size:clamp(16px,2.2vw,26px);
}
.glizzy__tagline span { color:var(--accent); }
@media (max-width:760px){
  .glizzy__row { flex-direction:column; }
  .glizzy-card { width:100%; max-width:460px; flex:0 0 auto; }
  .glizzy-vs { transform:rotate(0); }
}