/* ======================================================================
   CHUMBLEY'S AUTO DETAILING — comic book theme
====================================================================== */

* { box-sizing: border-box; }

:root {
  --ink:        #111111;
  --paper:     #fff7df;
  --hero-blue: #2563ff;
  --hero-cyan: #45c8ff;
  --hero-red:  #e3140f;
  --hero-yellow:#ffd400;
  --hero-pink: #ff6fa3;
  --shadow:    0 6px 0 #111;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--hero-blue);
  color: var(--ink);
  font-family: 'Fredoka', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

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

/* ======================================================================
   Halftone & paper backgrounds (CSS-only)
====================================================================== */
.halftone-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(0,0,0,.18) 1.4px, transparent 1.6px);
  background-size: 14px 14px;
  background-color: var(--paper);
  z-index: -1;
}
.halftone-bg.yellow  { background-color: var(--hero-yellow); }
.halftone-bg.red     { background-color: var(--hero-red); background-image: radial-gradient(circle, rgba(0,0,0,.25) 1.4px, transparent 1.6px); }
.halftone-bg.blue    { background-color: var(--hero-cyan); }
.halftone-bg.pink    { background-color: var(--hero-pink); background-image: radial-gradient(circle, rgba(255,255,255,.5) 1.4px, transparent 1.6px); }

body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}

/* ======================================================================
   Top ticker
====================================================================== */
.ticker {
  background: var(--hero-yellow);
  border-bottom: 4px solid var(--ink);
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.ticker-track {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  font-family: 'Bangers', cursive;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 8px 0;
  animation: tick 30s linear infinite;
}
.ticker-track span { padding-right: 36px; }
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ======================================================================
   Nav
====================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 28px;
  background: var(--paper);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 4px 0 #111;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--hero-yellow);
  border: 3px solid var(--ink);
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
}
.logo-mark img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.logo-mark.sm { width: 38px; height: 38px; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text em {
  font-family: 'Permanent Marker', cursive; font-style: normal;
  font-size: 22px; color: var(--hero-red);
  -webkit-text-stroke: 1px var(--ink);
}
.logo-text strong {
  font-family: 'Bangers', cursive; font-weight: 400;
  font-size: 14px; letter-spacing: 2px;
}

.nav-links { display: flex; gap: 22px; }
.nav-links a {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px; font-size: 18px;
  text-decoration: none;
  position: relative; padding: 4px 2px;
}
.nav-links a:hover { color: var(--hero-red); }
.nav-links a:hover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 4px; background: var(--hero-yellow);
  border-bottom: 2px solid var(--ink);
}
.nav-cta {
  font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 1px;
  background: var(--hero-red); color: #fff;
  padding: 10px 16px;
  border: 3px solid var(--ink); border-radius: 8px;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.nav-cta:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ======================================================================
   Generic panel
====================================================================== */
.panel {
  position: relative;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 8px;
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.panel-corner {
  position: absolute; width: 22px; height: 22px;
  background: var(--hero-yellow); border: 3px solid var(--ink);
  z-index: 2;
}
.panel-corner.tl { top: -3px; left: -3px;  border-radius: 0 0 8px 0; border-top: 0; border-left: 0; }
.panel-corner.tr { top: -3px; right: -3px; border-radius: 0 0 0 8px; border-top: 0; border-right: 0; }
.panel-corner.bl { bottom: -3px; left: -3px;  border-radius: 0 8px 0 0; border-bottom: 0; border-left: 0; }
.panel-corner.br { bottom: -3px; right: -3px; border-radius: 8px 0 0 0; border-bottom: 0; border-right: 0; }

/* ======================================================================
   Hero
====================================================================== */
.hero {
  padding: 32px 28px 48px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  max-width: 1280px; margin: 0 auto;
}

.panel-hero {
  min-height: 600px;
  max-height: 720px;
  position: relative;
}

.panel-hero .hero-photo {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 1;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.origin-img img.ai {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: none;
}

.speed-lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      rgba(0,0,0,.06) 14px 16px
    );
  pointer-events: none;
  z-index: 2;
}

/* speech bubbles */
.bubble {
  position: absolute;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 12px 18px;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  line-height: 1.05;
  text-align: center;
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 4;
  max-width: 240px;
}
.bubble span { display: block; font-size: 14px; }
.bubble strong { display: block; font-size: 22px; color: var(--hero-red); }
.bubble::after {
  content: ""; position: absolute;
  width: 20px; height: 20px;
  background: #fff;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.bubble.bubble-tl { top: 18px; left: 18px; max-width: 200px; transform: rotate(-3deg); }
.bubble.bubble-tl::after { left: auto; right: 26px; bottom: -12px; transform: rotate(45deg); }
.bubble.bubble-bl { bottom: 24px; left: 24px; transform: rotate(-2deg); }
.bubble.bubble-bl::after { left: 26px; top: -12px; transform: rotate(-135deg); }
.bubble.bubble-tl strong { font-size: 18px; }
.bubble.bubble-tl span   { font-size: 12px; }

/* burst — starburst CSS */
.burst {
  position: absolute;
  width: 110px; height: 110px;
  display: grid; place-items: center;
  font-family: 'Bangers', cursive;
  font-size: 24px;
  color: var(--ink);
  text-align: center;
  z-index: 3;
  filter: drop-shadow(4px 4px 0 var(--ink));
}
.burst::before {
  content: "";
  position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg,
      var(--hero-yellow) 0 18deg, transparent 18deg 36deg,
      var(--hero-yellow) 36deg 54deg, transparent 54deg 72deg,
      var(--hero-yellow) 72deg 90deg, transparent 90deg 108deg,
      var(--hero-yellow) 108deg 126deg, transparent 126deg 144deg,
      var(--hero-yellow) 144deg 162deg, transparent 162deg 180deg,
      var(--hero-yellow) 180deg 198deg, transparent 198deg 216deg,
      var(--hero-yellow) 216deg 234deg, transparent 234deg 252deg,
      var(--hero-yellow) 252deg 270deg, transparent 270deg 288deg,
      var(--hero-yellow) 288deg 306deg, transparent 306deg 324deg,
      var(--hero-yellow) 324deg 342deg, transparent 342deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 22%);
          mask: radial-gradient(circle, transparent 22%, #000 22%);
}
.burst::after {
  content: "";
  position: absolute; inset: 18%;
  background: var(--hero-yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.burst span {
  position: relative; z-index: 1;
  -webkit-text-stroke: 1px var(--ink);
}
/* SHINE burst on red halftone bg — use white rays + red center for contrast */
.burst.burst-red::before {
  background:
    conic-gradient(from 0deg,
      #fff 0 18deg, transparent 18deg 36deg,
      #fff 36deg 54deg, transparent 54deg 72deg,
      #fff 72deg 90deg, transparent 90deg 108deg,
      #fff 108deg 126deg, transparent 126deg 144deg,
      #fff 144deg 162deg, transparent 162deg 180deg,
      #fff 180deg 198deg, transparent 198deg 216deg,
      #fff 216deg 234deg, transparent 234deg 252deg,
      #fff 252deg 270deg, transparent 270deg 288deg,
      #fff 288deg 306deg, transparent 306deg 324deg,
      #fff 324deg 342deg, transparent 342deg 360deg);
}
.burst.burst-red::after { background: var(--hero-red); }
.burst.burst-red span   { color: var(--hero-yellow); -webkit-text-stroke: 1.5px var(--ink); }

.burst.burst-bl { bottom: 18px; left: 12px; transform: rotate(-12deg); }
.burst.burst-tr { top: 18px; right: 12px; transform: rotate(8deg); }
.burst.big {
  width: 200px; height: 200px; font-size: 38px; line-height: 1;
  position: absolute; top: -40px; right: -40px; transform: rotate(14deg);
  z-index: 5;
}

/* "rip" element on hero for the chest emblem */
.rip {
  position: absolute;
  bottom: 6%; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: none; /* hidden on photo treatment, shown on AI version */
}
.rip-emblem {
  display: grid; place-items: center;
  width: 86px; height: 86px;
  background: var(--hero-yellow);
  color: var(--hero-red);
  border: 4px solid var(--ink);
  border-radius: 50%;
  font-family: 'Bangers', cursive;
  font-size: 50px;
  box-shadow: 5px 5px 0 var(--ink);
}

/* Title panel */
.panel-title {
  padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.title {
  margin: 0; line-height: .85;
  font-family: 'Bowlby One', sans-serif;
}
.title-line {
  display: block;
  font-size: clamp(38px, 4.6vw, 64px);
  -webkit-text-stroke: 2.5px var(--ink);
  text-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 var(--hero-red);
  letter-spacing: -1.5px;
}
.title-line.line-1 { color: var(--hero-yellow); transform: rotate(-1deg); }
.title-line.line-2 {
  color: #fff;
  font-size: clamp(58px, 7vw, 100px);
  text-shadow:
    3px 3px 0 var(--ink),
    7px 7px 0 var(--hero-blue),
    11px 11px 0 var(--ink);
  transform: translateX(6px);
}
.title-line.line-3 {
  color: var(--hero-red); transform: rotate(1deg) translateX(14px);
  font-size: clamp(42px, 5.4vw, 76px);
}

.kicker {
  font-size: 18px; line-height: 1.45;
  font-weight: 500;
  background: rgba(255,255,255,.7);
  padding: 12px 16px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 1.5px;
  padding: 14px 22px;
  border: 4px solid var(--ink);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
  background: var(--hero-yellow);
  color: var(--ink);
  max-width: 100%;
  word-break: break-word;
  text-align: center;
}
.btn:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

.btn.btn-red    { background: var(--hero-red); color: #fff; }
.btn.btn-yellow { background: var(--hero-yellow); }
.btn.lg { font-size: 26px; padding: 18px 28px; }
.btn.sm { font-size: 18px; padding: 10px 16px; box-shadow: 4px 4px 0 var(--ink); }

.meta { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 600; }
.meta-row { display: flex; align-items: center; gap: 10px; }
.meta-row a { text-decoration: none; }
.meta-row a:hover { color: var(--hero-red); }

/* ======================================================================
   Section heads
====================================================================== */
.section { padding: 56px 28px; max-width: 1280px; margin: 0 auto; position: relative; }

.section-head {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 36px; gap: 4px;
  padding-top: 12px; /* room for the rotated banner bubble above kapow */
  position: relative;
  text-align: center;
}
.bubble.bubble-banner {
  position: relative; transform: rotate(-2deg);
  background: var(--hero-yellow);
  border-radius: 14px;
  padding: 8px 18px;
  font-size: 14px;
}
.bubble.bubble-banner strong {
  font-size: 20px; color: var(--ink);
}
.bubble.bubble-banner.red-bg  { background: var(--hero-red); color: #fff; }
.bubble.bubble-banner.red-bg strong { color: #fff; }
.bubble.bubble-banner.blue-bg { background: var(--hero-cyan); }
.bubble.bubble-banner::after { display: none; }

.kapow {
  font-family: 'Bowlby One', sans-serif;
  font-size: clamp(40px, 8vw, 110px);
  margin: 6px 0 0;
  color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  text-shadow:
    4px 4px 0 var(--ink),
    8px 8px 0 var(--hero-red);
  letter-spacing: -2px;
  line-height: 1;
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}
.kapow.yellow { color: var(--hero-yellow); }
.kapow span {
  display: inline-block;
  color: var(--hero-yellow);
  -webkit-text-stroke: 3px var(--ink);
  transform: rotate(8deg);
}

/* ======================================================================
   Services grid
====================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.service {
  padding: 26px 22px 50px;
  text-align: center;
  min-height: 280px;
  transition: transform .15s;
}
.service:hover { transform: translate(-3px, -3px) rotate(-.5deg); }
.service-icon {
  font-size: 56px;
  display: grid; place-items: center;
  width: 92px; height: 92px;
  margin: 0 auto 12px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink);
}
.service-icon svg {
  width: 64px; height: 64px;
  display: block;
}
.service h3 {
  font-family: 'Bangers', cursive;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 1.5px;
  line-height: 1;
  margin: 6px 0 10px;
}
.service p { font-size: 15px; line-height: 1.45; margin: 0 0 8px; }
.onomatopoeia {
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: 'Bangers', cursive;
  font-size: 26px;
  color: var(--hero-red);
  -webkit-text-stroke: 1px var(--ink);
  transform: rotate(-8deg);
}
/* On the red halftone cards, switch onomatopoeia to yellow so it pops */
.service:has(.halftone-bg.red) .onomatopoeia {
  color: var(--hero-yellow);
}

/* ======================================================================
   Origin
====================================================================== */
.section-origin { background: var(--hero-blue); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); max-width: none; }
.section-origin .section-head .kapow { color: var(--hero-yellow); }

.origin-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  max-width: 1280px; margin: 0 auto;
}
.origin-img {
  min-height: 460px;
  position: relative;
  overflow: hidden;
}
.origin-img img.comic-treat {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.25) saturate(1.4)
          drop-shadow(0 0 0 #000);
  position: relative; z-index: 1;
}
.origin-img::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,.22) 1.4px, transparent 1.6px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
  z-index: 2;
}

.origin-text {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--paper);
  border: 4px solid var(--ink); border-radius: 10px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 28px 28px 24px;
}
.comic-p { font-size: 18px; line-height: 1.55; margin: 0; }
.dropcap {
  float: left;
  font-family: 'Bowlby One', sans-serif;
  font-size: 64px; line-height: .85;
  color: var(--hero-red);
  background: var(--hero-yellow);
  border: 3px solid var(--ink);
  padding: 6px 12px 4px;
  margin: 4px 12px 0 0;
  box-shadow: 3px 3px 0 var(--ink);
}
.hl-yellow { background: var(--hero-yellow); padding: 0 6px; box-shadow: 2px 2px 0 var(--ink); }

.stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; margin-top: 6px;
}
.stat {
  background: var(--hero-red); color: #fff;
  border: 3px solid var(--ink); border-radius: 10px;
  text-align: center; padding: 14px 6px;
  box-shadow: 4px 4px 0 var(--ink);
}
.stat strong {
  display: block;
  font-family: 'Bowlby One', sans-serif;
  font-size: 32px;
  -webkit-text-stroke: 1px var(--ink);
  color: var(--hero-yellow);
}
.stat span { display: block; font-size: 12px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }

/* ======================================================================
   Before / After
====================================================================== */
.ba-feature {
  margin: 0 auto 32px;
  background: var(--paper);
  padding: 0;
  overflow: hidden;
  max-width: 900px;
}
.ba-feature img {
  width: 100%; height: auto; display: block;
}
.ba-grid {
  display: grid; gap: 28px;
}
.ba-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.ba-panel {
  position: relative;
  background: var(--paper);
  border: 4px solid var(--ink); border-radius: 10px;
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
  aspect-ratio: 400 / 220;
}
.ba-svg { width: 100%; height: 100%; }
.ba-svg svg { width: 100%; height: 100%; display: block; }
.ba-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--ink); color: var(--hero-yellow);
  font-family: 'Bangers', cursive;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 6px;
  z-index: 2;
}
.ba-arrow {
  display: grid; place-items: center;
}
.ba-arrow span {
  font-family: 'Bangers', cursive;
  font-size: 38px; color: var(--hero-yellow);
  background: var(--hero-red);
  border: 4px solid var(--ink);
  padding: 14px 22px;
  border-radius: 50%;
  box-shadow: 5px 5px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
  transform: rotate(-6deg);
}
@media (max-width: 800px) {
  .ba-card { grid-template-columns: 1fr; }
  .ba-arrow span { transform: rotate(0); }
}

/* ======================================================================
   Pricing
====================================================================== */
.section-pricing { }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.price-card {
  padding: 28px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: center;
  position: relative;
}
.price-card.featured {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 12px 12px 0 var(--ink);
}
.price-tag {
  font-family: 'Bangers', cursive;
  font-size: 24px; letter-spacing: 2px;
  background: var(--ink); color: var(--hero-yellow);
  display: inline-block;
  padding: 4px 14px;
  align-self: center;
  border-radius: 6px;
}
.price {
  font-family: 'Bowlby One', sans-serif;
  font-size: 64px; line-height: 1;
  -webkit-text-stroke: 2px var(--ink);
  color: var(--hero-red);
  text-shadow: 4px 4px 0 var(--ink);
}
.price .dollar { font-size: 38px; vertical-align: super; -webkit-text-stroke: 1.5px var(--ink); }
.price .from { font-size: 28px; -webkit-text-stroke: 1.5px var(--ink); }
.price-card ul { list-style: none; margin: 6px 0 0; padding: 0; text-align: left; display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.price-card .btn { margin-top: auto; align-self: center; }

.ribbon {
  position: absolute; top: 14px; right: -34px;
  background: var(--hero-red); color: #fff;
  font-family: 'Bangers', cursive; letter-spacing: 1px;
  padding: 6px 38px;
  transform: rotate(28deg);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 3;
}

.price-foot { text-align: center; margin-top: 22px; font-size: 14px; color: #fff; }

/* ======================================================================
   Testimonials
====================================================================== */
.section-testi { }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.testi-bubble {
  position: relative;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 6px 6px 0 var(--ink);
}
.testi-bubble p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; font-weight: 500; }
.testi-bubble span { font-family: 'Bangers', cursive; font-size: 18px; color: var(--hero-red); letter-spacing: 1px; }
.testi-bubble::after {
  content: "";
  position: absolute; bottom: -22px; left: 32px;
  width: 24px; height: 24px;
  background: #fff;
  border-right: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  transform: rotate(45deg);
}
.testi:nth-child(2) .testi-bubble { transform: rotate(.5deg); }
.testi:nth-child(3) .testi-bubble { transform: rotate(-.8deg); }

/* ======================================================================
   CTA
====================================================================== */
.section-cta { }
.cta-panel {
  text-align: center;
  padding: 60px 28px 50px;
  border-width: 6px;
  position: relative;
}
.cta-title {
  font-family: 'Bowlby One', sans-serif;
  font-size: clamp(48px, 8vw, 96px);
  margin: 0 0 6px;
  color: var(--hero-red);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 5px 5px 0 var(--ink);
  letter-spacing: -1px;
}
.cta-sub {
  font-size: 18px; font-weight: 600; margin: 0 0 22px;
}
.cta-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.hours {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
}

/* ======================================================================
   Footer
====================================================================== */
.foot {
  background: var(--ink);
  color: #fff;
  border-top: 4px solid var(--ink);
  padding: 28px 28px;
  position: relative;
}
.foot::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--hero-red) 0 24px,
    var(--hero-yellow) 24px 48px,
    var(--hero-blue) 48px 72px
  );
}
.foot-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand strong { display: block; font-family: 'Bangers', cursive; letter-spacing: 1.5px; font-size: 18px; }
.foot-brand span { display: block; font-size: 13px; color: #ddd; }

.foot-meta { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 14px; }
.foot-meta a { color: #fff; text-decoration: none; }
.foot-meta a:hover { color: var(--hero-yellow); }

.foot-credit { text-align: right; font-size: 13px; color: #ccc; }
.foot-credit a { color: var(--hero-yellow); text-decoration: none; font-weight: 700; }
.foot-credit a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 800px) {
  .foot-grid { grid-template-columns: 1fr; text-align: center; }
  .foot-brand { justify-content: center; }
  .foot-credit { text-align: center; }
}

/* ======================================================================
   Responsive layouts
====================================================================== */
@media (max-width: 980px) {
  .hero-grid    { grid-template-columns: 1fr; }
  .origin-grid  { grid-template-columns: 1fr; }
  .panel-hero   { min-height: 460px; }
  .burst.big    { width: 150px; height: 150px; font-size: 26px; top: -20px; right: -20px; }
}

@media (max-width: 540px) {
  .hero { padding: 22px 14px 36px; }
  .section { padding: 44px 14px; }
  .nav { padding: 12px 14px; }
  .nav-cta { font-size: 14px; padding: 8px 12px; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; text-align: center; }

  /* Smaller "kapow" headings on small screens so they don't overflow */
  .kapow {
    font-size: clamp(32px, 9vw, 48px);
    -webkit-text-stroke: 2px var(--ink);
    text-shadow: 3px 3px 0 var(--ink), 5px 5px 0 var(--hero-red);
    letter-spacing: -1px;
  }
  .kapow span { transform: none; }

  /* Title panel — keep stacked title from breaking the layout */
  .title-line { font-size: clamp(34px, 9vw, 52px); }
  .title-line.line-2 { font-size: clamp(50px, 13vw, 80px); }
  .title-line.line-3 { font-size: clamp(38px, 10vw, 60px); transform: rotate(1deg) translateX(8px); }

  /* CTA panel — hide the decorative burst on mobile (overlaps the title) */
  .burst.big { display: none; }
  .cta-panel { padding: 36px 18px 32px; }
  .cta-title { font-size: clamp(40px, 11vw, 60px); }

  /* CTA buttons — long emails wrap rather than blow out the panel */
  .cta-actions .btn.lg {
    font-size: 18px;
    padding: 14px 18px;
    width: 100%;
    word-break: break-word;
  }

  /* Pricing — stop "MOST POPULAR" ribbon from clipping past panel edge */
  .price-card.featured { transform: none; }
  .ribbon {
    top: 10px; right: -28px;
    padding: 5px 30px;
    font-size: 14px;
  }

  /* Section bubbles — give them room above so they don't get clipped */
  .bubble.bubble-banner { font-size: 12px; padding: 6px 14px; }
  .bubble.bubble-banner strong { font-size: 16px; }

  /* Origin text — reduce dropcap so first paragraph wraps cleanly */
  .dropcap { font-size: 50px; padding: 4px 10px 2px; margin: 2px 10px 0 0; }

  /* Footer — tighter on mobile */
  .foot { padding: 22px 14px; }
}