/* ============================================================
   BROWNIE BOY — design system
   Mirrors the visual structure of chocolate-bar.co.uk's Shapes
   theme, rebuilt from scratch with original tokens + recipes.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* palette */
  --bg-white:        #ffffff;
  --bg-cream:        #fbf6ee;
  --ink:             #1a1a1a;
  --ink-soft:        #4a3f3a;
  --brand-red:       #c8281c;
  --brand-red-deep:  #8e1b12;
  --ivory:           #fff8f0;
  --section-rule:    #1a1a1a;

  /* per-section computed (overridden by [data-scheme]) */
  --scheme-bg:       var(--bg-white);
  --scheme-text:     var(--ink);
  --scheme-accent:   var(--bg-cream);
  --scheme-accent-2: var(--brand-red);

  /* type */
  --font-heading:    "Young Serif", Georgia, serif;
  --font-body:       "Archivo Narrow", system-ui, sans-serif;
  --heading-letter-spacing: -0.05em;
  --heading-line-height: 0.85;
  --body-line-height: 1.35;

  /* layout */
  --max-site:        1820px;
  --max-content:     1280px;
  --header-h:        72px;
  --section-y:       2rem;
  --section-x:       1.25rem;
  --gap:             1.25rem;

  /* shape */
  --r-button:        9999px;
  --r-card:          0;
  --r-media:         0.375rem;
  --bw:              2px;

  /* shadow (always solid, never blurred) */
  --shadow-card:     15px 15px 0 var(--scheme-accent-2);
  --shadow-button:   5px 5px 0 var(--scheme-accent-2);
  --shadow-card-soft:8px 8px 0 var(--scheme-accent-2);
}

@media (min-width: 990px) {
  :root {
    --section-y: 4rem;
    --section-x: 2.5rem;
    --gap:       2.5rem;
  }
}

/* ---------- Color schemes ---------- */
[data-scheme="1"] {
  --scheme-bg:       var(--bg-white);
  --scheme-text:     var(--ink);
  --scheme-accent:   var(--bg-cream);
  --scheme-accent-2: var(--brand-red);
}
[data-scheme="2"] {
  --scheme-bg:       var(--bg-cream);
  --scheme-text:     var(--brand-red);
  --scheme-accent:   var(--brand-red-deep);
  --scheme-accent-2: var(--ink);
}
[data-scheme="3"] {
  --scheme-bg:       var(--brand-red);
  --scheme-text:     var(--ivory);
  --scheme-accent:   var(--brand-red-deep);
  --scheme-accent-2: var(--ink);
}
[data-scheme="4"] {
  --scheme-bg:       var(--bg-cream);
  --scheme-text:     var(--ink);
  --scheme-accent:   var(--brand-red);
  --scheme-accent-2: var(--brand-red);
}

.scheme {
  background: var(--scheme-bg);
  color: var(--scheme-text);
}

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--body-line-height);
  color: var(--ink);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--brand-red); color: var(--ivory); }

/* ---------- Layout helpers ---------- */
.container       { max-width: var(--max-content); margin: 0 auto; padding-inline: var(--section-x); }
.container-wide  { max-width: var(--max-site);    margin: 0 auto; padding-inline: var(--section-x); }
.section         { padding-block: var(--section-y); border-bottom: var(--bw) solid var(--section-rule); position: relative; }
.section-flush   { padding-block: 0; border-bottom: var(--bw) solid var(--section-rule); position: relative; }
.full-bleed      { width: 100vw; margin-inline: calc(50% - 50vw); }

/* ---------- Heading recipe (the visual signature) ---------- */
.heading {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--heading-line-height);
  color: var(--scheme-accent);
  -webkit-text-stroke: 2px var(--scheme-text);
  text-stroke: 2px var(--scheme-text);
  text-shadow:
    0.01em 0.01em 0 var(--scheme-text),
    0.02em 0.02em 0 var(--scheme-text),
    0.03em 0.03em 0 var(--scheme-text),
    0.04em 0.04em 0 var(--scheme-text),
    0.05em 0.05em 0 var(--scheme-text),
    0.06em 0.06em 0 var(--scheme-text),
    0.07em 0.07em 0 var(--scheme-text),
    0.08em 0.08em 0 var(--scheme-text),
    0.09em 0.09em 0 var(--scheme-text),
    0.10em 0.10em 0 var(--scheme-text),
    0.11em 0.11em 0 var(--scheme-text),
    0.12em 0.12em 0 var(--scheme-text),
    0.13em 0.13em 0 var(--scheme-text),
    0.14em 0.14em 0 var(--scheme-text),
    0.15em 0.15em 0 var(--scheme-text),
    0.16em 0.16em 0 var(--scheme-text),
    0.17em 0.17em 0 var(--scheme-text),
    0.18em 0.18em 0 var(--scheme-text),
    0.19em 0.19em 0 var(--scheme-text),
    0.20em 0.20em 0 var(--scheme-text);
  margin: 0;
}
.heading--xxl { font-size: clamp(3rem, 9vw, 6.5rem); }
.heading--xl  { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.heading--lg  { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.heading--md  { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.heading--sm  { font-size: clamp(1.25rem, 2vw, 1.75rem); }

/* No-shadow heading (used inside cards / small contexts) */
.h-plain {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--scheme-text);
  margin: 0;
}
.h-plain--lg { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.h-plain--md { font-size: clamp(1.4rem, 2vw, 1.85rem); }
.h-plain--sm { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }

/* ---------- Push button ---------- */
.push-btn {
  display: inline-block;
  padding: 0 5px 5px 0;        /* room for offset shadow */
  text-decoration: none;
  border: 0;
  background: transparent;
}
.push-btn__surface {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: var(--bw) solid var(--scheme-text);
  border-radius: var(--r-button);
  background: var(--scheme-bg);
  color: var(--scheme-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 5px 5px 0 var(--scheme-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.push-btn:hover .push-btn__surface,
.push-btn:focus .push-btn__surface {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--scheme-text);
}
.push-btn--pop .push-btn__surface {
  background: var(--brand-red);
  color: var(--ivory);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.push-btn--pop:hover .push-btn__surface { box-shadow: 0 0 0 var(--ink); }
.push-btn--accent .push-btn__surface {
  background: var(--scheme-accent);
  color: var(--scheme-text);
}

/* ---------- Card ---------- */
.card {
  display: inline-block;
  padding: 0 15px 15px 0;       /* room for offset shadow */
  width: 100%;
}
.card__surface {
  border: var(--bw) solid var(--scheme-text);
  border-radius: var(--r-card);
  background: var(--scheme-bg);
  color: var(--scheme-text);
  padding: 1.5rem;
  box-shadow: 15px 15px 0 var(--scheme-accent-2);
  height: 100%;
}
.card--media .card__surface { padding: 0; overflow: hidden; }

/* ---------- Sticker ---------- */
.sticker {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  animation: spin 22s linear infinite;
  transform-origin: center;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sticker { animation: none; }
}

/* ---------- Marquee ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  gap: 5rem;
  padding-block: 1rem;
}
.marquee__track {
  display: flex;
  gap: 5rem;
  flex-shrink: 0;
  animation: scroll 35s linear infinite;
  align-items: center;
  white-space: nowrap;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.marquee__icon {
  width: 40px; height: 40px;
  border: var(--bw) solid currentColor;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Big red marquee (between sections) */
.marquee--display .marquee__track {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: none;
  gap: 3rem;
  animation-duration: 30s;
}

/* ---------- Squircle (super-ellipse) clip-path ---------- */
.squircle {
  -webkit-clip-path: path("M2.5 67.24 C 2.5 13.93, 13.93 2.5, 67.24 2.5 H 132.76 C 186.07 2.5, 197.5 13.93, 197.5 67.24 V 132.76 C 197.5 186.07, 186.07 197.5, 132.76 197.5 H 67.24 C 13.93 197.5, 2.5 186.07, 2.5 132.76 Z");
          clip-path: path("M2.5 67.24 C 2.5 13.93, 13.93 2.5, 67.24 2.5 H 132.76 C 186.07 2.5, 197.5 13.93, 197.5 67.24 V 132.76 C 197.5 186.07, 186.07 197.5, 132.76 197.5 H 67.24 C 13.93 197.5, 2.5 186.07, 2.5 132.76 Z");
}
/* When the container should adapt to image, use mask-image instead */
.squircle-mask {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 70%, transparent 71%);
}

/* ---------- Wave shape divider ---------- */
.wave-divider {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 84px);
  fill: var(--scheme-bg);
}

/* ---------- Inputs ---------- */
.input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: var(--bw) solid var(--scheme-text);
  border-radius: 0;
  background: transparent;
  color: var(--scheme-text);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
}
.input::placeholder { color: var(--scheme-text); opacity: 0.5; }
.input:focus { background: var(--scheme-accent); }
.input--rounded { border-radius: 1rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--bg-white);
  border-bottom: var(--bw) solid var(--section-rule);
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem var(--section-x);
  max-width: var(--max-site);
  margin: 0 auto;
}
.site-nav { display: none; }
.site-nav__list { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.75rem; align-items: center; }
.site-nav__list a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  padding: 0.4rem 0;
}
.site-nav__list a:hover { color: var(--brand-red); }
@media (min-width: 990px) {
  .site-nav { display: block; }
  .burger { display: none; }
}

.site-logo {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
}
.site-logo .accent { color: var(--brand-red); }

.icon-row { display: flex; align-items: center; gap: 0.85rem; justify-content: flex-end; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 0; background: transparent; color: inherit;
  position: relative;
}
.icon-btn:hover { color: var(--brand-red); }
.icon-btn .icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.icon-btn[data-cart] .badge {
  position: absolute; top: 0.2rem; right: 0.2rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--brand-red); color: var(--ivory);
  font-size: 0.65rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 0; background: transparent;
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s, visibility 0.25s;
}
.drawer.is-open { visibility: visible; opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(85vw, 380px);
  background: var(--bg-cream);
  border-right: var(--bw) solid var(--ink);
  padding: 1.5rem;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close {
  background: transparent; border: 0; color: var(--ink);
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
}
.drawer__list { list-style: none; padding: 0; margin: 1rem 0 0; }
.drawer__list li { border-bottom: var(--bw) solid var(--ink); }
.drawer__list a {
  display: block; padding: 1rem 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
}
.drawer__sublist { list-style: none; padding-left: 1rem; padding-bottom: 0.5rem; }
.drawer__sublist a { font-family: var(--font-body); font-size: 1rem; padding: 0.5rem 0; text-transform: uppercase; letter-spacing: 0.08em; }

/* Wordmark hero band */
.wordmark-band {
  text-align: center;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  border-bottom: var(--bw) solid var(--section-rule);
  background: var(--bg-white);
}
.wordmark-band__text {
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-size: clamp(3rem, 14vw, 11rem);
  color: var(--ink);
  display: inline-block;
}
.wordmark-band__text .dot { color: var(--brand-red); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--bg-cream);
  overflow: hidden;
  border-bottom: var(--bw) solid var(--section-rule);
}
.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 21/10;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero .sticker--1 { width: 130px; top: 70%; left: 4%; animation-duration: 28s; }
.hero .sticker--2 { width: 200px; top: 60%; right: 4%; left: auto; animation-duration: 22s; animation-direction: reverse; }
@media (min-width: 990px) {
  .hero .sticker--1 { width: 180px; }
  .hero .sticker--2 { width: 260px; }
}

/* Wave at bottom of hero */
.hero__wave {
  position: absolute; bottom: -1px; left: 0; right: 0;
  pointer-events: none;
}

/* Hero feature text under wave */
.hero-feature {
  background: var(--bg-cream);
  text-align: center;
  padding: clamp(2rem, 6vw, 5rem) var(--section-x) clamp(2.5rem, 6vw, 5rem);
  border-bottom: var(--bw) solid var(--section-rule);
}
.hero-feature__inner { max-width: 1100px; margin: 0 auto; }
.hero-feature .heading { margin-bottom: 1.75rem; }

/* ---------- Locations carousel ---------- */
.locations {
  position: relative;
  background: var(--scheme-bg);
  color: var(--scheme-text);
  overflow: hidden;
}
.locations__rail {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--section-x) 2.5rem;
  scrollbar-width: none;
}
.locations__rail::-webkit-scrollbar { display: none; }
.location-card {
  flex: 0 0 min(85vw, 360px);
  scroll-snap-align: center;
}
@media (min-width: 990px) {
  .location-card { flex-basis: min(34vw, 460px); }
}
.location-card__media {
  aspect-ratio: 1/1;
  overflow: hidden;
  border: var(--bw) solid var(--scheme-text);
  background: var(--scheme-accent);
}
.location-card__media img { width: 100%; height: 100%; object-fit: cover; }
.location-card__body { padding-top: 1.25rem; text-align: center; }
.location-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}
.location-card__copy { font-size: 0.95rem; opacity: 0.92; margin: 0 0 1rem; }
.locations__arrows { display: flex; justify-content: center; gap: 1rem; }
.arrow-btn {
  width: 56px; height: 56px;
  border: var(--bw) solid var(--scheme-text);
  border-radius: 9999px;
  background: var(--scheme-bg);
  color: var(--scheme-text);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 5px 5px 0 var(--scheme-text);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.arrow-btn:hover { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--scheme-text); }
.arrow-btn .icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------- Why visit grid ---------- */
.why-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 990px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ---------- What we're made of ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2.5rem;
}
@media (min-width: 990px) {
  .pillar-grid { grid-template-columns: 1fr 1.2fr 1fr; gap: 2rem; }
}
.pillar-grid__center { text-align: center; }
.pillar-grid__center img { max-width: 380px; margin: 0 auto; transform: rotate(8deg); }
.pillar-stack { display: grid; gap: 1.5rem; }

/* ---------- Comparison table ---------- */
.compare {
  border: var(--bw) solid var(--scheme-text);
  margin-top: 2.5rem;
  background: var(--scheme-bg);
  box-shadow: 15px 15px 0 var(--brand-red);
  width: calc(100% - 15px);
  margin-right: 15px;
}
.compare table {
  width: 100%;
  border-collapse: collapse;
}
.compare th, .compare td {
  padding: 1rem 1.25rem;
  border-bottom: var(--bw) solid var(--scheme-text);
  border-right: var(--bw) solid var(--scheme-text);
  text-align: center;
  vertical-align: middle;
}
.compare th:last-child, .compare td:last-child { border-right: 0; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare th {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
}
.compare td.label {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.compare .col-us { background: var(--brand-red); color: var(--ivory); }
.compare .icon-circle {
  width: 38px; height: 38px;
  border: var(--bw) solid currentColor;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Tilted offset photo pair ---------- */
.tilt-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  position: relative;
  padding-block: clamp(2rem, 6vw, 5rem);
  overflow: hidden;
}
.tilt-pair__img { width: 38%; max-width: 380px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-media); border: var(--bw) solid var(--scheme-text); }
.tilt-pair__img--left { transform: rotate(-8deg); }
.tilt-pair__img--right { transform: rotate(8deg); }
.tilt-pair__caption {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding-inline: 1rem;
  pointer-events: none;
}
.tilt-pair__caption .heading { max-width: 32ch; }

/* ---------- Testimonials ---------- */
.testimonials__rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  gap: 0;
}
.testimonials__rail::-webkit-scrollbar { display: none; }
.testimonial {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 2rem var(--section-x);
  text-align: center;
}
.testimonial__stars {
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  color: var(--scheme-text);
  margin-bottom: 1.5rem;
}
.testimonial__quote {
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(2rem, 6vw, 5rem);
  margin: 0 0 1.5rem;
  max-width: 1100px;
  margin-inline: auto;
}
.testimonial__author {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
}

/* ---------- Viral vids ---------- */
.vids__rail {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 1rem var(--section-x) 2rem;
}
.vids__rail::-webkit-scrollbar { display: none; }
.vid-tile {
  flex: 0 0 240px;
  aspect-ratio: 9/16;
  scroll-snap-align: start;
  border: var(--bw) solid var(--scheme-text);
  border-radius: var(--r-media);
  overflow: hidden;
  position: relative;
  background: var(--ink);
}
.vid-tile img { width: 100%; height: 100%; object-fit: cover; }
.vid-tile__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.2);
  color: var(--ivory);
}
.vid-tile__play svg { width: 56px; height: 56px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-white);
  border-top: var(--bw) solid var(--section-rule);
  padding: 3rem var(--section-x);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  max-width: var(--max-site);
  margin: 0 auto;
}
@media (min-width: 990px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 1.5rem;
  max-width: 22ch;
}
.footer-social { display: flex; gap: 0.75rem; }
.footer-social a {
  width: 40px; height: 40px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.footer-social a:hover { background: var(--brand-red); color: var(--ivory); border-color: var(--brand-red); }
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 0.5rem; }
.footer-list a { font-size: 0.95rem; }
.footer-list a:hover { color: var(--brand-red); }
.footer-bottom {
  max-width: var(--max-site);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: var(--bw) solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: 0.85rem;
}
.payment-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.payment-row svg {
  height: 24px; width: auto;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--bg-white);
}

/* Wordmark below footer */
.footer-wordmark {
  border-top: var(--bw) solid var(--section-rule);
  background: var(--bg-cream);
  text-align: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.footer-wordmark .wordmark-band__text { font-size: clamp(2.5rem, 11vw, 9rem); }

/* ---------- Background patterns ---------- */
.pattern-dots {
  background-image: radial-gradient(var(--scheme-accent-2) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 0 0;
  opacity: 0.18;
}
.pattern-zigzag {
  background-image:
    linear-gradient(135deg, var(--scheme-text) 25%, transparent 25%),
    linear-gradient(225deg, var(--scheme-text) 25%, transparent 25%);
  background-size: 18px 18px;
  background-position: 0 0;
  opacity: 0.05;
}

/* ---------- Generic utilities ---------- */
.center      { text-align: center; }
.muted       { opacity: 0.7; }
.uppercase   { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 600; }
.eyebrow     { display: inline-block; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; font-weight: 700; color: var(--brand-red); margin-bottom: 1rem; }
.eyebrow--ink { color: var(--scheme-text); }
.lede        { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.4; max-width: 38ch; margin-inline: auto; }
.flow > * + * { margin-top: 1rem; }
.btn-row     { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }

.bg-cream { background: var(--bg-cream); }
.bg-red   { background: var(--brand-red); color: var(--ivory); }
.bg-white { background: var(--bg-white); }

/* ---------- Forms ---------- */
.form-row { display: flex; gap: 0.75rem; }
.form-row .input { flex: 1; }

/* ---------- Decorative big-text section divider ---------- */
.shout-bar {
  background: var(--brand-red);
  color: var(--ivory);
  padding: 1.25rem 0;
  border-block: var(--bw) solid var(--section-rule);
  overflow: hidden;
}

/* ============================================================
   MOBILE OVERRIDES (≤989px)
   80%+ of traffic is mobile. These rules tame card shadows,
   shrink hero stickers, scale wordmarks down, force the
   comparison table to scroll, and reorder the pillar grid
   so the central sticker doesn't break up the cards.
   ============================================================ */

/* Global: prevent horizontal overflow caused by sticker drift,
   card offset shadows, or full-bleed sections that miscalculate. */
html, body { overflow-x: hidden; }

/* Card shadow tames itself — never wider than container */
.card { max-width: 100%; }
.card__surface { width: 100%; }

/* Compare table — wraps in scrollable container at narrow widths */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2.5rem auto 0;
  max-width: 900px;
  padding-bottom: 15px; /* room for offset shadow when scrolling */
}
.compare-wrap .compare { margin-top: 0; }
.compare-hint {
  display: none;
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

@media (max-width: 989px) {
  /* Header sizing — keep logo readable, tighten icons */
  .site-header__inner { padding: 0.75rem 1rem; gap: 0.5rem; }
  .site-logo { font-size: 1.4rem; }
  .icon-btn { width: 2.2rem; height: 2.2rem; }
  .icon-btn .icon { width: 22px; height: 22px; }
  /* Hide Account icon on phone — exposed in drawer instead */
  .icon-row .icon-btn:first-child { display: none; }

  /* Wordmark band — scale down so single line fits 320px viewports */
  .wordmark-band__text { font-size: clamp(2.5rem, 14vw, 5.5rem); }
  .footer-wordmark .wordmark-band__text { font-size: clamp(2rem, 12vw, 4.5rem); }

  /* Hero image — taller aspect on phones (less band-y) */
  .hero__media { aspect-ratio: 4/5; max-height: 75vh; }
  .hero .sticker--1 { width: 80px; top: 78%; left: 5%; }
  .hero .sticker--2 { width: 110px; top: 62%; right: 5%; }

  /* Hero feature heading — tame the largest size */
  .heading--xxl { font-size: clamp(2.4rem, 11vw, 4.5rem); }
  .heading--xl  { font-size: clamp(2rem, 8vw, 3.25rem); }

  /* Locations carousel — tighten arrows, ensure cards center */
  .locations__rail { padding-bottom: 1.5rem; gap: 1rem; }
  .arrow-btn { width: 48px; height: 48px; box-shadow: 4px 4px 0 var(--scheme-text); }
  .arrow-btn:hover { transform: translate(4px, 4px); }

  /* Pillar grid — push central sticker after the cards on mobile,
     and shrink it so it doesn't dominate the column */
  .pillar-grid { gap: 1rem; }
  .pillar-grid__center { order: 99; padding-top: 1rem; }
  .pillar-grid__center img { max-width: 200px; transform: rotate(8deg); }

  /* Tilt-pair photos — bump the size on phones, drop the rotation
     a touch so they don't bleed off-screen */
  .tilt-pair { gap: 4%; padding-block: 3rem; }
  .tilt-pair__img { width: 44%; max-width: none; }
  .tilt-pair__img--left { transform: rotate(-5deg); }
  .tilt-pair__img--right { transform: rotate(5deg); }
  .tilt-pair__caption .heading { font-size: clamp(1.4rem, 5vw, 2rem); padding: 0.5rem 1rem; background: rgba(26,26,26,0.55); color: var(--ivory); border-radius: 4px; -webkit-text-stroke: 0; text-shadow: none; }

  /* Testimonial quote — clamp so giant quotes don't tower */
  .testimonial__quote { font-size: clamp(1.5rem, 6vw, 2.4rem); }
  .testimonial { padding: 1.5rem 1rem; }

  /* Viral vid tiles — slimmer */
  .vid-tile { flex: 0 0 200px; }

  /* Section vertical rhythm tightens up */
  .section { padding-block: 2.5rem; }

  /* Footer newsletter form — stack input + button on tight screens */
  .form-row { flex-wrap: wrap; }
  .form-row .input { min-width: 0; flex: 1 1 100%; }
  .form-row .push-btn { flex: 1 1 100%; }
  .form-row .push-btn .push-btn__surface { display: block; text-align: center; }

  /* Drawer narrower on small phones */
  .drawer__panel { width: min(88vw, 340px); padding: 1rem; }
  .drawer__list a { font-size: 1.25rem; padding: 0.85rem 0; }

  /* Compare table — make it scroll, force min-width to remain readable */
  .compare { min-width: 560px; box-shadow: 8px 8px 0 var(--brand-red); }
  .compare th, .compare td { padding: 0.7rem 0.75rem; font-size: 0.85rem; }
  .compare th { font-size: 0.95rem; }
  .compare-hint { display: block; }

  /* Cards — softer shadow on mobile to save layout room */
  .card { padding: 0 8px 8px 0; }
  .card__surface { box-shadow: 8px 8px 0 var(--scheme-accent-2); }

  /* Push button — slightly smaller offset so it doesn't crowd */
  .push-btn { padding: 0 4px 4px 0; }
  .push-btn__surface { padding: 0.75rem 1.25rem; box-shadow: 4px 4px 0 var(--scheme-text); }
  .push-btn:hover .push-btn__surface { transform: translate(4px, 4px); }

  /* Cart row — flexible 2-col on phone instead of 3-col grid */
  .cart-row { grid-template-columns: 64px 1fr; }
  .cart-row > div:last-child { grid-column: 1 / -1; text-align: right; }

  /* Payment row — wrap; smaller chips */
  .payment-row svg { height: 20px; }
}

/* Extra-small phones (≤380px) — final safety net */
@media (max-width: 380px) {
  .wordmark-band__text { font-size: 2.4rem; }
  .heading--xxl { font-size: 2.2rem; }
  .site-logo { font-size: 1.25rem; }
  .icon-row { gap: 0.4rem; }
  .footer-wordmark .wordmark-band__text { font-size: 2rem; }
}

/* Tablet refinement (700–989px) — give us 2-col where 1-col is too sparse */
@media (min-width: 700px) and (max-width: 989px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Touch-target safety: all interactive elements ≥44px */
@media (hover: none) and (pointer: coarse) {
  button, .push-btn, a.icon-btn, .arrow-btn { min-height: 44px; }
}