/* ==================================================================
   Mountain View — mountainviewlp.com
   ART DIRECTION: flat, signage-driven forecourt retail.
   The reference class is Circle K / 7-Eleven / Wawa — not a startup
   landing page. That means: flat color blocks, heavy grotesque type,
   hairline-bordered tiles, tight commercial spacing, one signature
   element (the pump-topper deal card), and nothing rotated, grained,
   glassy, or animated for its own sake.

   Chain-fidelity pass (2026-07-10, benchmarked against live sites):
   Circle K → short dash under key headings, whole-tile links with a
   circle-arrow cue, white locator pill + circular action button.
   7-Eleven → deal energy on the teal band: ink disc under the product
   cluster + tilted white "FREE" deal tag (the one real offer — never
   invent prices).

   Palette : red #D71920 · dark red #8F0018 · yellow #FFC400
             black #111111 · off-white #FAF8F4 · grey #F0F0F0
   Type    : Anton (display) + Barlow Condensed (UI) + Arial (body),
             self-hosted woff2, SIL OFL. Headlines uppercase, tight.
   v13     : Circle K calm — white nav + black utility (chrome recedes),
             flat red hero with black/yellow disc, everything else
             white/grey with the teal deal band as the second color
             moment. Anton only at true display sizes (h1/h2, tiles,
             deal card, FREE tag); Barlow carries all bars/bands/labels.
             The offer appears at most twice per page (hero card + teal
             band). Tilt is for product cutouts and the FREE tag only —
             never chrome. No perpetual animation; one-time hero
             entrance only. Yellow is an accent, never a surface.
   v15     : polish pass — merchandised clusters re-anchored to the disc
             (no clipped cutouts), two-layer contact+ambient shadows on
             all cutouts, die-cut card language (ink border + hard offset
             shadow) unified across why-cards / map / photo slots to match
             the FREE tag, button lift states, FAQ chip toggles, looser
             section rhythm, one reduced-motion-safe scroll reveal.
   v16     : retail-feed redesign. Identity stays Mountain View's own;
             pacing and merchandising energy informed by the national
             c-store reference class (no single-brand naming). Mobile-first
             authoring for NEW components only (375px base, enhanced up);
             legacy components keep their desktop-first blocks. Product-led
             campaign hero (cutouts larger than the copy area, no storefront
             photo), cream + night surfaces, sticker badges (at most ONE
             tilted sticker per section), photo band, calm community band
             (body type, no stickers, no sales styling), dark social cards.
             The one confirmed offer is stated bare — never with conditions,
             fine print, or invented terms.
   ================================================================== */

/* self-hosted fonts — SIL Open Font License */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/Anton-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/BarlowCondensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/BarlowCondensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #d71920;
  --red-dark: #8f0018;
  --red-press: #b3151b;
  --yellow: #ffc400;
  --yellow-press: #eab400;
  --ink: #111111;
  --white: #ffffff;
  --off: #faf8f4;
  --grey: #f0f0f0;
  --hairline: #e4e1da;
  --muted: #55565a;
  --muted-dark: #b7b9bf;
  --green: #1e9e4a;

  /* slush accent — deal/slushie contexts ONLY, never a full brand color */
  --slush: #52d2dc;
  --slush-deep: #0e6672;
  --ice: #e3f7fa;

  /* v16 surfaces */
  --cream: #f6efe1;
  --night: #17171a;
  --night-2: #232327;

  --display: "Anton", "Arial Black", "Arial Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --condensed: "Barlow Condensed", "Arial Narrow", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --body: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --container: 1200px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-lift: 0 8px 20px rgba(17, 17, 17, 0.1);
  /* die-cut sticker shadows — hard offset, no blur, same language as the FREE tag */
  --shadow-cut: 4px 5px 0 rgba(17, 17, 17, 0.07);
  --shadow-cut-hover: 6px 9px 0 rgba(17, 17, 17, 0.09);
  --shadow-sticker: 5px 7px 0 rgba(17, 17, 17, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* sticky footer: on short pages (404) the hero fills the gap so the footer
   meets the bottom edge; pages taller than the viewport render unchanged */
body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* 404 on the v16 campaign hero: same fill-the-gap behaviour, plus vertical
   centring of the copy inside the stretched red field. :only-child keeps
   this off fuel/convenience/index, whose mains have multiple sections. */
main > .hero-campaign:only-child {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}

main > .hero-campaign:only-child .hero-campaign-inner { width: 100%; }

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

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
/* width rhythm (alignment pass): campaign shelves run wider, reading
   sections narrower — so consecutive sections stop sharing edges */
.container.wide { max-width: 1320px; }
.container.tight { max-width: 1100px; }

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }

/* ---------- type ---------- */

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

h3 {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
}

h1, h2, h3 { text-wrap: balance; }

.eyebrow {
  font-family: var(--condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.88rem;
  color: var(--red);
  margin-bottom: 10px;
}


/* density pass: 36 -> 30 — heads sit closer to the content they introduce */
.section-head { max-width: 720px; margin-bottom: 30px; }
.section-head h2 { margin-bottom: 10px; }
.section-head p { color: var(--muted); }

/* Circle K signature: short dash under key headings
   (the featured-offer stack and calm community band opt out) */
.section-head h2::after,
.cta-band h2::after,
.signup-panel h2::after,
.local-grid h2::after,
.pm-copy h3::after {
  content: "";
  display: block;
  width: 46px;
  height: 5px;
  background: var(--red);
  margin-top: 12px;
}

.cta-band h2::after,
.signup-panel h2::after,
.pm-copy h3::after { background: var(--yellow); }
.pm-copy h3::after { width: 36px; height: 4px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.02rem;
  line-height: 1.1;
  text-decoration: none;
  text-align: center;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(17, 17, 17, 0.18); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(17, 17, 17, 0.14); }

/* 7-Eleven CTA language: solid buttons carry a trailing chevron */
.btn-red::after,
.btn-ink::after,
.btn-yellow::after {
  content: "\203A";
  font-weight: 700;
  font-size: 1.15em;
  line-height: 0;
  transform: translateY(-1px);
}

.btn-sm::after, .nav-menu .btn::after { content: none; }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-press); }

.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--yellow-press); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-outline-w { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-w:hover { background: #fff; color: var(--red); }

.btn-sm { padding: 13px 20px; font-size: 0.9rem; }

/* chrome stays calm: no lift inside the sticky nav */
.nav-menu .btn:hover { transform: none; box-shadow: none; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* yellow focus ring on every red/dark surface, where the red ring would vanish */
.utility :focus-visible,
.cta-band :focus-visible,
.sticky-bar :focus-visible,
.signup-panel :focus-visible,
footer.site :focus-visible,
.section.ink :focus-visible,
.photo-band :focus-visible,
.reason-ink :focus-visible,
.hero-campaign :focus-visible { outline-color: var(--yellow); }
/* whole-tile promo focus keeps the global red ring: it passes 3:1 on the
   cream section surface, where a yellow ring reads at ~1.5:1 */

/* on teal, ink is the only ring that passes non-text contrast (yellow is ~1.1:1) */
.deal-hero :focus-visible { outline-color: var(--ink); }

.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* skip link: hidden until keyboard focus */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 13px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.15s ease;
}

.skip-link:focus-visible { top: 0; outline-color: var(--yellow); }

::selection { background: var(--yellow); color: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[id] { scroll-margin-top: 90px; }

/* ---------- utility bar ---------- */

.utility { background: var(--ink); color: #fff; font-size: 0.88rem; }

.utility-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.utility .fact { font-family: var(--condensed); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utility .fact .dot-sep { color: var(--yellow); padding: 0 6px; }

.utility-links { display: flex; gap: 4px; flex: none; align-self: stretch; }

/* 44px-tall hit areas inside the tight bar — padding, not extra bar height */
.utility-links a {
  color: #fff;
  text-decoration: none;
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

.utility-links a:hover { color: var(--yellow); }
.utility-links .icon { font-size: 0.85rem; }

/* ---------- header / nav ---------- */

header.site {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.05);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 20px;
  max-width: var(--container);
  margin: 0 auto;
}

.nav .wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.34rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  flex: none;
}

/* tight circular crop so the badge sits at national-chain scale */
.nav .wordmark .logo-crop {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
}

.nav .wordmark .logo-crop img { width: 118%; height: auto; max-width: none; }

.nav-menu { display: flex; gap: 4px; list-style: none; align-items: center; }

.nav-menu a {
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.nav-menu a:hover { background: var(--grey); }
.nav-menu a[aria-current="page"] { color: var(--red); box-shadow: inset 0 -3px 0 var(--red); border-radius: 0; }

.nav-menu .nav-cta { margin-left: 10px; }
/* color repeated on purpose: .nav-menu a (0-1-1) outspecifies .btn-red (0-1-0) */
.nav-menu a.btn { padding: 12px 18px; font-size: 0.82rem; color: #fff; }
.nav-menu a.btn:hover { background: var(--red-press); }

.nav-toggle:hover { background: var(--grey); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  padding: 7px 11px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

/* ---------- v16 campaign hero (product-led, mobile-first) ---------- */

/* flat canopy red — blended gradients read as web UI, not signage */
.hero-campaign {
  position: relative;
  background: var(--red);
  color: #fff;
  overflow: hidden;
  border-bottom: 6px solid var(--yellow);
}

/* ray burst behind the product cluster — a flat colour field, not an image */
.hero-campaign::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -180px;
  transform: translateX(-50%);
  width: 880px;
  height: 880px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.06) 0deg 9deg,
    rgba(255, 255, 255, 0) 9deg 24deg
  );
  pointer-events: none;
}

.hero-campaign-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 15px 0;
}

/* one-time entrance, same move as the benchmark's hero slide-up */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.hc-copy { text-align: center; animation: hero-rise 0.5s ease-out both; }

.hc-copy .sticker { margin-bottom: 10px; }

.hero-campaign h1 {
  font-size: clamp(46px, 13vw, 58px);
  line-height: 0.94;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
}

.hero-campaign h1 .line { display: block; }
/* yellow passes 3:1 on red only at display sizes — H1 lines qualify */
.hero-campaign h1 .line.accent { color: var(--yellow); }

.hero-campaign .sub {
  margin: 10px auto 0;
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  max-width: 22em;
}

.hc-cta { margin-top: 14px; justify-content: center; }
.hc-cta .btn { flex: 0 0 auto; padding: 13px 26px; }

/* merchandised product stage — the cutouts, not copy, dominate the hero.
   Decorative only: never allowed to shadow the CTA's tap area. */
.hc-stage {
  position: relative;
  height: 316px;
  width: min(400px, 100%);
  margin: 2px auto 0;
  animation: hero-rise 0.5s ease-out 0.1s both;
  pointer-events: none;
}

/* MV signature disc: authentic product triptych clipped to the circle.
   The yellow ring + drop shadow are the outer frame; the photo's baked ink
   seams keep the black campaign-circle language. (Replaced the illustrated
   cutout cluster; ink backing shows behind the photo before it loads.) */
.hc-stage .hero-disc {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: min(330px, 88%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  /* contact + ambient pair seats the disc instead of floating it */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(0, 0, 0, 0.35);
}

/* yellow ring + top-light/bottom-falloff drawn on the wrapper. The ring must
   live on a pseudo, NOT as an inset box-shadow on the <img>: inset shadows
   paint behind replaced content, so a ring declared there never renders. */
.hc-stage .hero-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px var(--yellow);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0) 32%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.2)
  );
  pointer-events: none;
}

.hero-product-collage {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: var(--ink);
}

/* ---------- sticker badges (die-cut, same language as the old FREE tag) ---------- */

.sticker {
  display: inline-block;
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  font-size: clamp(2rem, 4.6vw, 3rem);
  padding: 10px 20px 12px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sticker);
  transform: rotate(-2deg);
}

.sticker-yellow { background: var(--yellow); }

.sticker-sm {
  font-size: 1rem;
  padding: 8px 14px 9px;
  box-shadow: 3px 4px 0 rgba(17, 17, 17, 0.3);
}

/* ---------- sections ---------- */

/* density pass: 64 -> 52. The ≤560 rule (48px) still governs mobile. */
.section { padding: 52px 0; }
.section.grey { background: var(--grey); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

/* v16 alternating surfaces */
.section.cream { background: var(--cream); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

.section.ink { background: var(--ink); color: #fff; }
.section.ink h2 { color: #fff; }
.section.ink .eyebrow { color: var(--yellow); }
.section.ink .section-head h2::after { background: var(--yellow); }
.section.ink .section-head p { color: var(--muted-dark); }

/* homepage pacing (alignment pass): information sections tightened on
   desktop only — campaign sections keep their full stage */
@media (min-width: 861px) {
  .section-tight { padding: 44px 0; }
}

/* ---------- category strip (rounded tiles, 4x2 mobile / 8-across desktop) ---------- */

.cat-strip { background: var(--white); border-bottom: 1px solid var(--hairline); }

.cat-strip-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 15px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  padding: 8px 4px;
  background: var(--off);
  /* near-invisible edge: merchandising shelf tiles, not software chrome */
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* the strip's one restrained MV accent: red icons over ink labels */
.cat-item .icon { font-size: 27px; color: var(--red); transition: transform 0.18s ease, color 0.15s ease; }

.cat-item:hover { color: var(--red); background: var(--grey); border-color: var(--ink); }
.cat-item:hover .icon { color: var(--red); transform: translateY(-2px); }

/* ---------- featured offer (teal campaign band, mobile-first) ----------
   The one confirmed offer as bare display type — no kicker, no foot line,
   no conditions. Wording changes only through the K1 gate. */

.deal-hero {
  /* translucent bubbles / ice circles layered over the flat slush field —
     condensation atmosphere in pure CSS, no imagery */
  background:
    radial-gradient(circle 110px at 8% 12%, rgba(255, 255, 255, 0.10) 0 62%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 30px at 30% 6%, rgba(255, 255, 255, 0.08) 0 58%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 52px at 90% 12%, rgba(255, 255, 255, 0.13) 0 62%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 78px at 96% 70%, rgba(227, 247, 250, 0.20) 0 64%, rgba(227, 247, 250, 0) 100%),
    radial-gradient(circle 42px at 4% 58%, rgba(255, 255, 255, 0.11) 0 60%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 24px at 14% 86%, rgba(227, 247, 250, 0.14) 0 58%, rgba(227, 247, 250, 0) 100%),
    radial-gradient(circle 18px at 72% 24%, rgba(255, 255, 255, 0.09) 0 56%, rgba(255, 255, 255, 0) 100%),
    var(--slush);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.deal-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 36px 15px 40px;
  display: grid;
  gap: 0;
  justify-items: center;
  text-align: center;
}

.offer-stack {
  display: grid;
  justify-items: center;
  line-height: 1;
}

.offer-stack .offer-free {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(64px, 19vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* slush-deep passes 3:1 on teal at display sizes only */
.offer-stack .offer-item {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 8.6vw, 44px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--slush-deep);
  margin-top: 4px;
}

/* the section's one yellow accent: a short dash between the item and the band */
.offer-stack .offer-item::after {
  content: "";
  display: block;
  width: 46px;
  height: 5px;
  background: var(--yellow);
  margin: 12px auto 0;
}

/* same band language as the pump-topper card. The deals hero keeps the
   condition OUTSIDE its h1 (the heading stays "Free Small Slushie"), so the
   chip is matched by scope there rather than by nesting. */
.offer-stack .offer-cond,
.deals-offer-copy .offer-cond {
  margin-top: 14px;
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 1.05rem;
  background: var(--red);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
}

.offer-cta { margin-top: 20px; justify-content: center; }

/* single merchandised object on the ink disc — the slushie IS the offer */
.deal-montage {
  position: relative;
  height: 280px;
  width: min(340px, 100%);
  margin: 14px auto 0;
}

/* firmer natural ground shadow under the cup (the drop-shadow filters stay) */
.deal-montage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 200px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(7, 45, 51, 0.5), rgba(7, 45, 51, 0));
  z-index: 1;
}

.deal-montage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(270px, 84%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 50px 70px rgba(255, 255, 255, 0.05),
    inset 0 -45px 60px rgba(0, 0, 0, 0.45),
    0 16px 36px rgba(14, 102, 114, 0.35);
}

/* slushie cup render seated concentric with the ink disc; the disc rim (::before)
   reads as the dark campaign frame, ::after keeps the ground shadow.
   The circle is sized on a plain wrapper <div> and clipped with overflow:hidden.
   Do NOT move aspect-ratio onto <picture> or the <img>: Safari/iOS ignores it
   there (the img's width/height attrs win) and the disc renders as a tall oval. */
.deal-montage .offer-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(238px, 74%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  z-index: 2;
  box-shadow: 0 12px 30px rgba(14, 102, 114, 0.45);
}

.deal-montage .offer-disc picture {
  display: block;
  width: 100%;
  height: 100%;
}

.deal-montage .offer-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ---------- promo modules (campaign cards, media on top, mobile-first) ---------- */

.promo-modules {
  display: grid;
  gap: 14px;
}

.promo-module {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-cut);
}

.promo-module.red { background: var(--red); color: #fff; }
.promo-module.night { background: var(--night); color: #fff; }
/* slush-deep is the sanctioned slush-context surface (never plain teal for text) */
.promo-module.slush { background: var(--slush-deep); color: #fff; }

/* 4:3 media crop; either a real photo or a cutout cluster on a colour field */
.pm-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }

.pm-media picture, .pm-media img.photo { position: absolute; inset: 0; }
.pm-media img.photo { width: 100%; height: 100%; object-fit: cover; }

/* Media → copy scrim so the image seats into the text block instead of ending on
   a hard edge. Applied to the photo card only: the fuel render already ends in
   its own red field, and scrimming it just veiled the hose and tank base. */
.promo-module.night .pm-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(23, 23, 26, 0) 0%, rgba(23, 23, 26, 0.5) 60%, rgba(23, 23, 26, 0.95) 100%);
}

/* real store photo only: a small tonal lift so it holds its own next to the
   studio-lit render. Deliberately restrained — the shot must still read as a
   real photo of the store, not a retouched stock image. */
.promo-module.night .pm-media img.photo {
  filter: contrast(1.06) saturate(1.06) brightness(0.95);
}

/* gentle vignette: settles the bright empty wall and the shelving at the frame
   edges so the machines carry the card. Corners only — no visible ring. */
.promo-module.night .pm-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(115% 95% at 52% 45%,
    rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.3) 100%);
}

.pm-copy { padding: 20px 20px 24px; padding-right: 72px; }

.pm-copy .pm-kicker {
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  color: var(--yellow);
  margin-bottom: 6px;
}

/* yellow at kicker size fails 4.5:1 on red (3.25:1); the night tile keeps yellow */
.promo-module.red .pm-kicker { color: var(--white); }

.pm-copy h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 6.9vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin-bottom: 8px;
}

.pm-copy p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.94); }

/* Circle K tile affordance: whole card is the link, circle-arrow is the cue */
.pm-go {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

a.promo-module:hover .pm-go { background: var(--yellow); border-color: var(--yellow); color: var(--ink); transform: translateX(3px); }

/* ---------- reason blocks (homepage campaign tiles) ---------- */

.reason-blocks { display: grid; gap: 12px; }

.reason {
  border-radius: var(--radius-xl);
  padding: 26px 24px;
}

/* 52px, not 40: at 40 the marks floated in the card and the section read
   under-filled. The glyph fills ~43px of the 52px box, so margin-bottom is 10
   rather than 14 — the optical gap to the heading lands at ~14px, keeping the
   heading-to-body 6px as the tightest pair. */
.reason .icon { font-size: 52px; display: block; margin-bottom: 10px; }

.reason h3 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.18rem;
  margin-bottom: 6px;
}

/* copy wraps naturally — never shrunk or tightened to force one line */
.reason p { font-size: 0.92rem; line-height: 1.5; max-width: 30em; }

.reason-red { background: var(--red); color: #fff; }
.reason-red .icon { color: var(--yellow); }
.reason-red p { color: rgba(255, 255, 255, 0.94); }

.reason-cream { background: var(--cream); color: var(--ink); }
.reason-cream .icon { color: var(--red); }
.reason-cream p { color: var(--muted); }

.reason-ink { background: var(--ink); color: #fff; }
/* yellow, not slush: the icon rule across this section is dark surface -> yellow,
   light surface -> red. --slush is reserved for deal/slushie contexts only. */
.reason-ink .icon { color: var(--yellow); }
.reason-ink p { color: rgba(255, 255, 255, 0.9); }

/* ---------- amenities (non-interactive icon grid — facts, not buttons) ---------- */

.amenities-head { margin: 28px 0 0; }

.amenity-grid {
  list-style: none;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 18px;
}

.amenity-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.88rem;
}

.amenity-grid .icon { font-size: 24px; color: var(--red); flex: none; }

/* ---------- premium photo slot (placeholder image system) ---------- */

.photo-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #f6f2ea 0%, #ece7dc 55%, #e2dcce 100%);
  box-shadow: var(--shadow-cut);
}

.photo-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/logo-badge.png") center / 52% no-repeat;
  opacity: 0.08;
  filter: grayscale(1);
}

/* real photo fills the frame; the badge watermark stays behind as a load
   fallback. Sources are pre-cropped to the container's 4:3 with the subject
   centred, so no per-photo positioning is needed. */
.photo-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.photo-slot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--yellow);
}

.photo-slot .slot-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(17, 17, 17, 0.85);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  padding: 6px 11px;
  border-radius: 4px;
}

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- 24/7 storefront campaign band (photo / ink panel split) ----------
   The photograph stays truthful and unaltered — copy lives on its own panel,
   so no legibility overlay touches the photo. */

.photo-band { background: var(--ink); }

.pb-grid { display: grid; }

.photo-band .pb-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.photo-band .pb-media picture,
.photo-band .pb-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-band .pb-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 44px;
  color: #fff;
}

.photo-band .pb-eyebrow {
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.88rem;
  color: var(--yellow);
  margin-bottom: 10px;
}

.photo-band h2 {
  color: #fff;
  font-size: clamp(2.1rem, 9vw, 2.4rem);
  margin-bottom: 10px;
}

/* yellow dash under the band heading, matching the section-head motif */
.photo-band h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 5px;
  background: var(--yellow);
  margin-top: 12px;
}

.photo-band .pb-sub {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 26em;
  margin-bottom: 22px;
}

/* ---------- community band (calm on purpose: body type, no stickers,
   no sales styling — the one section that never merchandises) ---------- */

.community-band { background: var(--cream); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

.community-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 15px 44px;
  display: grid;
  gap: 22px;
}

.community-band h2 {
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  margin-bottom: 10px;
}

.community-band p { color: var(--muted); max-width: 36em; }

.community-band .cb-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 8px 0;
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-band .cb-link:hover { color: var(--red); }

.community-band .cb-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.community-band .cb-media img { width: 100%; height: auto; }

/* ---------- Get Connected (static social cards, dark section) ---------- */

.social-feed { display: grid; gap: 14px; }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--night-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.post-card .pc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.post-card .pc-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  display: grid;
  place-items: center;
}

.post-card .pc-avatar img { width: 100%; height: 100%; object-fit: cover; }

.post-card .pc-handle {
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.98rem;
}

.post-card .pc-net { margin-left: auto; font-size: 1.2rem; color: var(--muted-dark); }

/* taller-than-square crop: the photo carries the card (alignment pass) */
.post-card .pc-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.post-card .pc-media picture,
.post-card .pc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card .pc-caption {
  padding: 12px 14px 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.post-card:hover .pc-handle { color: var(--yellow); }

/* ---------- local section ---------- */

.clock-line { margin-top: 14px; font-size: 0.85rem; color: var(--muted); }

.local-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  align-items: start;
}


.fact-list { list-style: none; margin: 20px 0 24px; border-top: 1px solid var(--hairline); }

.fact-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}

.fact-list .k {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--muted);
  flex: none;
}

.fact-list .v { font-weight: 700; text-align: right; }
.fact-list .v a { text-decoration: underline; text-underline-offset: 2px; }
.fact-list .v a:hover { color: var(--red); }
/* green text fails 4.5:1 on white at this size; the pulsing dot carries the
   open-state instead (decorative indicators are exempt) */
.fact-list .v.open-now {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fact-list .v.open-now .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

.map-card {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-cut);
}

.map-card iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- promo signup ---------- */

.signup-panel {
  background: var(--red-dark);
  color: #fff;
  border-radius: 3px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

.signup-panel h2 { color: #fff; }
.signup-panel h2 .y { color: var(--yellow); }
.signup-panel .blurb { color: var(--muted-dark); margin-top: 10px; }

.signup-panel form { display: grid; gap: 10px; }

.signup-panel input[type="text"],
.signup-panel input[type="email"],
.signup-panel input[type="tel"] {
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 13px 15px;
  border: 1px solid #3a3d44;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  width: 100%;
}

.signup-panel .consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--muted-dark);
}

.signup-panel .consent input { margin-top: 3px; accent-color: var(--yellow); }
.form-note { font-size: 0.85rem; color: var(--yellow); min-height: 1.4em; }

/* v17: the signup form is parked until the email integration lands.
   This informational hold sits in the form's grid slot. */
.signup-panel .signup-hold { display: grid; gap: 18px; justify-items: start; }
.signup-panel .signup-hold p { color: var(--muted-dark); }
.signup-panel .signup-hold a:not(.btn) { color: var(--yellow); }

/* ---------- FAQ ---------- */

.faq { max-width: 780px; }

.faq details {
  border: 1px solid #d9d5cc;
  border-radius: var(--radius-lg);
  background: var(--white);
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease;
}

.faq details[open] { border-color: var(--ink); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.faq summary:hover { background: var(--grey); border-radius: var(--radius-lg); }
.faq details[open] summary:hover { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.faq .a a:hover { color: var(--red); }
.faq summary::-webkit-details-marker { display: none; }

/* toggle chip: yellow plus flips to ink minus, same sticker language as the ticks */
.faq summary::after {
  content: "+";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.faq details[open] summary::after { content: "\2013"; background: var(--ink); color: var(--yellow); }

.faq .a { padding: 14px 20px 18px; color: var(--muted); font-size: 0.98rem; border-top: 1px solid var(--hairline); }

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.faq details[open] .a { animation: faq-in 0.2s ease-out; }

/* ---------- CTA band (interior cross-sell) ---------- */

.cta-band { background: var(--red); color: #fff; border-top: 3px solid var(--ink); border-bottom: 6px solid var(--yellow); }

.cta-band-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 52px 20px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 36px;
  align-items: center;
}

/* white, not yellow: yellow kicker text on red fails 4.5:1 */
.cta-band .promo-kicker {
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.88rem;
  color: var(--white);
  margin-bottom: 8px;
}

.cta-band h2 .y { color: var(--yellow); }
.cta-band p { color: #fff; max-width: 36em; }
.cta-band .actions { justify-self: end; }

/* ---------- deals page campaign pass ---------- */

.deals-hero .deal-hero-inner { position: relative; }

.deals-offer-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
}

.deals-offer-copy .sticker { margin-bottom: 16px; }
.deals-offer-copy .clock-line { color: var(--ink); }

.deals-lede {
  max-width: 28em;
  margin-top: 16px;
  color: var(--ink);
  font-size: 1rem;
}

.deals-product {
  position: relative;
  width: min(330px, 92vw);
  height: 310px;
  margin-top: 12px;
  pointer-events: none;
}

.deals-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 270px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.28), inset 0 0 0 7px var(--yellow);
}

/* photoreal render clipped concentric with the disc: the image bakes its own
   near-black field, so the visible rim is the disc's yellow ring plus a thin
   ink gap. No tilt — tilt is for cutouts, and this is a photo. */
.deals-photo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 238px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.3);
}

.deals-photo picture { display: block; width: 100%; height: 100%; }

.deals-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.deal-catch-grid { display: grid; gap: 14px; }

.deal-catch {
  min-height: 250px;
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.deal-catch .icon { font-size: 46px; margin-bottom: auto; }

.deal-catch-label {
  margin-top: 28px;
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deal-catch h3 { margin-top: 4px; text-transform: uppercase; font-size: 1.35rem; }
.deal-catch > p:last-of-type { margin-top: 6px; font-size: 0.94rem; }
.deal-catch-red { background: var(--red); color: #fff; }
.deal-catch-red .icon { color: var(--yellow); }
.deal-catch-red > p:last-of-type { color: rgba(255, 255, 255, 0.92); }
.deal-catch-ink { background: var(--ink); color: #fff; }
.deal-catch-ink .icon { color: var(--slush); }
.deal-catch-ink > p:last-of-type { color: rgba(255, 255, 255, 0.88); }
.deal-catch-yellow { background: var(--yellow); color: var(--ink); }
.deal-catch-yellow .icon { color: var(--red); }

.deal-catch-links { display: flex; gap: 18px; margin-top: 14px; }

.deal-catch-links a {
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.deal-catch-links a:hover { color: var(--yellow); }

.deals-signup { background: var(--ink); }

.deals-signup .signup-panel {
  position: relative;
  overflow: hidden;
  background: var(--red-dark);
  border: 3px solid var(--yellow);
  border-radius: var(--radius-xl);
  box-shadow: 8px 8px 0 var(--red);
}

.deals-signup .signup-panel::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  left: -220px;
  bottom: -290px;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 10deg, transparent 10deg 25deg);
  pointer-events: none;
}

.deals-signup .signup-panel > * { position: relative; z-index: 1; }

/* ---------- footer ---------- */

footer.site { background: var(--ink); color: var(--muted-dark); }

.foot-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 20px 36px;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: 36px;
}

.foot-brand .wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.foot-brand .wordmark img { height: 40px; width: auto; }

.foot-brand address { font-style: normal; font-size: 0.92rem; line-height: 1.7; }
.foot-brand a { text-decoration: none; }
.foot-brand a:hover { color: #fff; }
.foot-brand .open-line { color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; margin-top: 10px; }
.foot-brand .foot-tagline { margin-top: 10px; font-size: 0.85rem; font-style: italic; }
.foot-note { margin-top: 14px; font-size: 0.85rem; }

.foot-grid h3 {
  font-family: var(--condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  font-size: 0.88rem;
  margin-bottom: 14px;
}

/* footer columns carry the same short-dash motif as section headings */
.foot-grid h3::after {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  background: var(--yellow);
  margin-top: 8px;
}

.foot-grid ul { list-style: none; display: grid; gap: 10px; font-size: 0.9rem; }
.foot-grid ul a { text-decoration: none; }
.foot-grid ul a:hover { color: #fff; }
.foot-grid .btn { margin-top: 14px; }

.foot-legal {
  border-top: 1px solid #2c2e33;
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 20px 30px;
  font-size: 0.78rem;
  display: grid;
  gap: 7px;
}

/* ---------- sticky mobile action bar ---------- */

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: none;
  grid-template-columns: 1fr 1.2fr 1fr;
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sticky-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px 7px;
  text-decoration: none;
  color: #fff;
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

.sticky-bar a .icon { font-size: 1.1rem; }
.sticky-bar .primary { background: var(--red); }
.sticky-bar a:hover, .sticky-bar a:active { background: #000; }
.sticky-bar .primary:hover, .sticky-bar .primary:active { background: var(--red-press); }

/* ---------- consent bar (rendered by assets/js/measure.js ONLY when at
   least one measurement platform is configured AND the visitor hasn't
   chosen yet — with the shipped empty config it never exists). Fixed =
   zero layout shift; no entrance animation, so nothing to suppress for
   reduced motion. Sits above the mobile sticky-bar (z 70). ---------- */

.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

.consent-bar p { margin: 0; font-size: 0.9rem; }
.consent-bar a { color: var(--yellow); }
.consent-bar div { display: flex; gap: 10px; }
.consent-bar .btn { min-height: 44px; }
/* the engine uses btn-outline; on this ink surface it needs the white treatment */
.consent-bar .btn-outline { color: #fff; border-color: #fff; }
.consent-bar .btn-outline:hover { background: rgba(255, 255, 255, 0.12); }
.consent-bar :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* mobile: clear the sticky action bar instead of covering it */
@media (max-width: 860px) {
  .consent-bar { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
}

/* ---------- scroll reveal (class added by script.js only when JS +
   IntersectionObserver are available and motion is allowed) ---------- */

.js-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
.js-reveal.in { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hc-copy, .hc-stage { animation: none; }
  .faq details[open] .a { animation: none; }
  .btn, .cat-item, .cat-item .icon, .pm-go,
  .skip-link, .faq details, .faq summary::after { transition: none; }
  .btn:hover, .cat-item:hover .icon { transform: none; }
  a.promo-module:hover .pm-go { transform: none; }
  .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* nav collapses earlier than the rest of the layout: five labels + a CTA
   need ~1100px before the desktop row fits without wrapping */
@media (max-width: 1100px) {
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 12px 20px rgba(17, 17, 17, 0.08);
  }

  .nav-menu.open { display: flex; }
  .nav-menu li { border-bottom: 1px solid var(--hairline); }
  .nav-menu li:last-child { border-bottom: none; }
  .nav-menu a { display: block; padding: 13px 4px; border-radius: 0; white-space: normal; }
  .nav-menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--red); padding-left: 12px; }
  .nav-menu .nav-cta { margin: 12px 0 0; }
  .nav-menu a.btn { display: flex; }
  .nav-toggle { display: block; }
}

@media (max-width: 860px) {
  .cta-band-inner { grid-template-columns: 1fr; gap: 20px; padding: 40px 20px; }
  .cta-band .actions { justify-self: start; }
  .local-grid { grid-template-columns: 1fr; gap: 28px; }
  .map-card iframe { height: 320px; }
  .signup-panel { grid-template-columns: 1fr; padding: 30px 24px; gap: 24px; }
  .utility .fact .hide-sm { display: none; }

  .sticky-bar { display: grid; }
  body { padding-bottom: 58px; }
}

@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 48px 0; }
  .actions .btn { flex: 1 1 auto; }
  /* campaign CTAs stay compact pills — never full-width bars */
  .hc-cta .btn, .offer-cta .btn { flex: 0 0 auto; }
  .utility-links { gap: 0; }
  .utility-links .label { display: none; }
  .utility-links .icon { font-size: 1rem; }
  /* keep the whole fact visible beside three 44px hit areas */
  .utility .fact { font-size: 0.78rem; }

  .slot-grid { grid-template-columns: 1fr; }
}

/* ---------- v16 wide-viewport sanity (mobile-first components only) ----------
   NOT the final desktop pass — just enough structure that wider viewports
   read correctly until the post-M1 desktop phase. */

@media (min-width: 861px) {
  .hero-campaign-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 28, not 40: the dead red field between copy and disc was the emptiest
       spot in the hero — closing it makes both halves read larger */
    gap: 28px;
    align-items: center;
    padding: 36px 20px 44px;
  }

  /* Only the 2-col hero gets the bigger headline. Below 861 the hero is stacked,
     so there is no empty copy column to fill and a larger h1 just makes the
     section taller — the opposite of the intent. Ramps 58 -> 80 across 861-1440. */
  .hero-campaign h1 { font-size: clamp(58px, 5.6vw, 80px); }

  /* sub + CTA scale with the bigger headline so the copy column stays one voice */
  .hero-campaign .sub { font-size: 1.06rem; }
  .hc-cta .btn { padding: 15px 30px; }

  .hc-copy { text-align: left; }
  .hero-campaign .sub { margin-left: 0; }
  .hc-cta { justify-content: flex-start; }
  /* the stage sets the hero's height, so it gets shorter while the disc inside it
     gets larger — more presence, less box. Disc bottom lands 24px into the 44px
     bottom padding; keep that clearance if either number moves. */
  .hc-stage { height: 448px; width: 100%; max-width: 520px; margin: 0 auto; }
  .hc-stage .hero-disc { width: min(460px, 94%); }
  .hero-campaign::before { left: 75%; bottom: auto; top: 50%; transform: translate(-50%, -50%); }

  .cat-strip-inner { grid-template-columns: repeat(8, 1fr); padding: 14px 20px; }
  .cat-item { min-height: 88px; font-size: 0.82rem; }
  .cat-item .icon { font-size: 28px; }

  .deal-hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    justify-items: start;
    text-align: left;
    padding: 40px 20px;
  }

  .offer-stack { justify-items: start; }
  .offer-cta { justify-content: flex-start; margin-top: 24px; }
  /* 336, not 360: the disc stays 268 — the trim is pure teal slack above and
     below it. Circle sizing itself is untouched (see the offer-disc rules). */
  .deal-montage { grid-row: 1 / span 2; grid-column: 2; height: 336px; margin: 0 auto; }
  .deal-montage .offer-disc { width: min(268px, 80%); }
  .deal-montage::after { width: 232px; height: 42px; bottom: 16px; }
  .offer-stack .offer-item::after { margin-left: 0; }

  .deals-hero .deal-hero-inner { min-height: 520px; }
  .deals-offer-copy { justify-items: start; text-align: left; }
  .deals-offer-copy .offer-stack { justify-items: start; }
  .deals-product { width: min(440px, 100%); height: 410px; margin: 0 auto; }
  .deals-disc { width: 360px; }
  .deals-photo { width: 316px; }
  .deal-catch-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .promo-modules { grid-template-columns: repeat(3, 1fr); }

  /* storefront campaign band: 58% photo / 42% ink panel, panel content centred */
  .pb-grid { grid-template-columns: 58fr 42fr; }
  .photo-band .pb-media { aspect-ratio: auto; min-height: 424px; height: 100%; }
  .photo-band .pb-panel { padding: 46px 44px; }

  .reason-blocks { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* capped: at full container width the 4 columns sat at 272px against 85-165px
     of content, leaving 107-187px of dead slack per column so the pairs read as
     four islands. 1fr is kept so the column left-edges stay aligned — that
     alignment is what makes it read as a signage board. Mobile is untouched:
     at 375 the widest label already fills its column exactly. */
  .amenity-grid { grid-template-columns: repeat(4, 1fr); gap: 6px 24px; max-width: 880px; }

  .community-inner { grid-template-columns: 42fr 58fr; gap: 40px; align-items: center; padding: 40px 20px; }
  .community-band .cb-media { aspect-ratio: 4 / 3; }
  .community-band .cb-media img { width: 100%; height: 100%; object-fit: cover; }

  /* editorial mosaic: one featured card, two stacked beside it — the
     featured photo flexes to fill the full two-row height */
  .social-feed { grid-template-columns: 1.45fr 1fr; }
  .social-feed .post-card:first-child { grid-row: 1 / span 2; }
  .social-feed .post-card:first-child .pc-media { aspect-ratio: auto; flex: 1; }
  .social-feed .post-card:nth-child(n + 2) .pc-media { aspect-ratio: 3 / 2; }
}

/* ==================================================================
   v16 interior pages — fuel appended 2026-07-15; convenience reuses the
   same component family 2026-07-16. Every selector below is scoped under
   .hero-fuel / .hero-conv / .item- / .ic- / .svc-, so nothing here
   changes how index.html or any other page renders. Mobile-first at
   375px; desktop enhancements in the min-width:861px block at the end.
   ================================================================== */

/* copy-only campaign hero (fuel + convenience + 404): .hero-campaign
   supplies the red field, ray burst, yellow rule, sticker and type — this
   variant only drops the product stage and restores copy-only padding
   (base bottom is 0 for the stage) */
.hero-fuel .hero-campaign-inner,
.hero-conv .hero-campaign-inner,
.hero-404 .hero-campaign-inner,
.hero-faq .hero-campaign-inner,
.hero-about .hero-campaign-inner { padding: 40px 20px 48px; }
.hero-fuel h1,
.hero-conv h1,
.hero-404 h1,
.hero-faq h1,
.hero-about h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); }
.hero-fuel .sub,
.hero-conv .sub,
.hero-404 .sub,
.hero-faq .sub,
.hero-about .sub { max-width: 34em; }
/* white on red is 5.2:1 — AA at body size, same combo as the cta-band copy */
.hero-fuel .clock-line,
.hero-conv .clock-line,
.hero-404 .clock-line,
.hero-faq .clock-line,
.hero-about .clock-line { color: #fff; }

/* grouped FAQ (faq.html): follow-on group heads need their own top gap —
   .section-head only carries margin-bottom */
.faq + .section-head { margin-top: 44px; }

/* ---------- fuel item grid (six grades/services) ---------- */

.item-grid { display: grid; gap: 16px; }

/* retail info tile — same die-cut family as .why-card; not a link on purpose */
.item-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 5px solid var(--red);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-cut);
}

/* signage palette sequenced across the grid — retail rhythm, never a rating.
   Assumes .item-card is the only child type of .item-grid. */
.item-card:nth-child(3n + 2) { border-top-color: var(--yellow); }
.item-card:nth-child(3n) { border-top-color: var(--ink); }

/* icon tile: FIXED height so wide desktop cards never stretch into banners */
.ic-media {
  height: 92px;
  display: grid;
  place-items: center;
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}

.ic-media .icon { font-size: 44px; color: var(--ink); }

.ic-body { padding: 16px 18px 20px; }
.ic-body h3 { text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.22rem; }
.ic-body p { margin-top: 6px; color: var(--muted); font-size: 0.95rem; }

/* counter-note chip ("Ask at the counter" / "Ask inside") */
.ic-note {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 6px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--condensed);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px 4px;
  border-radius: var(--radius-pill);
}

/* ---------- station services (the checklist facts, restyled) ---------- */

.svc-grid { list-style: none; display: grid; gap: 12px; margin-top: 8px; }

.svc-grid li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  box-shadow: var(--shadow-card);
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
}

/* yellow tick-disc language (from the retired checklist), sized up to carry
   sprite icons */
.svc-ic {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-items: center;
}

.svc-ic .icon { font-size: 22px; }

@media (min-width: 861px) {
  /* copy-only hero: collapse the homepage 2-col grid — no empty column.
     The ray burst (left 75% at this width) fills the right side instead. */
  .hero-fuel .hero-campaign-inner,
  .hero-conv .hero-campaign-inner,
  .hero-404 .hero-campaign-inner,
  .hero-faq .hero-campaign-inner,
  .hero-about .hero-campaign-inner { grid-template-columns: 1fr; padding: 64px 20px 72px; }
  .item-grid { grid-template-columns: repeat(2, 1fr); }
  .ic-media { height: 108px; }
  .ic-media .icon { font-size: 48px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}