/* ============================================================
   site.css — layout. Colors / fonts / sizes from theme.css.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.55;
  /* Mobile safety: never allow horizontal scroll. Any element wider
     than the viewport gets clipped at the body edge instead of
     producing a side-scroll. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Clean dark background — flat warm-dark with a single very subtle
     warm vignette anchored near center. No grain, no noise, no rust
     splotches. */
  background-color: var(--c-bg);
  background-image:
    radial-gradient(ellipse 90% 65% at 50% 40%, rgba(232,120,42,0.05), transparent 75%);
  background-attachment: fixed;
  background-size: 100% 100%;
  /* Scroll buffer so the last content can scroll fully above the
     fixed .bean-glass strip (26vh / 22vh on mobile, min 180px / 140px).
     Without this buffer, the bottom of the footer sits permanently
     under the blur and reads as unfinished/cut off. */
  padding-bottom: max(220px, 30vh);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }


/* ============================================================
   LAYOUT WRAPS
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--sz-max);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}
.wrap--narrow { max-width: 760px; }
.wrap--menu   { max-width: var(--sz-menu); }
/* Listen page wrap: wide enough for the bigger wordmark + video frame
   to render at their full intended size. The brand/title/frame center
   themselves inside it. */
.listen-wrap  { max-width: 2000px; padding: 0 24px; }


/* ============================================================
   GRAVITY GRINDER ANCHOR — invisible block that pins the
   grinder's draw position in the document on the listen page.
   The canvas reads its rect to know where to render the wheel
   and where the local gravity field lives. Height = room around
   the visible halo so it doesn't crowd the video above or the
   footer below.
   ============================================================ */
.grinder-anchor {
  display: block;
  width: 100%;
  height: 220px;
  margin: 32px 0 12px;
  pointer-events: none;
}
@media (max-width: 760px) {
  .grinder-anchor { height: 170px; margin: 24px 0 8px; }
}

/* ============================================================
   GRINDER FOG — masks the bottom of the viewport so anything
   below the grinder line dissolves into the dark. Content fades
   into view as it scrolls up past this band. Above sections (z=1),
   below the bean canvas (z=5) so the grinder wheels stay clear.
   ============================================================ */
.grinder-fog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(
    to bottom,
    rgba(10,8,7,0)    0%,
    rgba(10,8,7,0.55) 35%,
    rgba(10,8,7,0.95) 70%,
    rgba(10,8,7,1)    100%
  );
}
@media (max-width: 760px) {
  /* Hide the fog on phones — twin grinders are display:none on mobile
     so there's no grinder line to fade above. */
  .grinder-fog { display: none; }
}

/* ============================================================
   GRAVITY GRINDER BLUR — circular backdrop-blur disc that sits
   BEHIND the canvas-drawn grinder wheel on the listen page.
   Anything that scrolls underneath (footer text, etc.) gets
   blurred so the grinder doesn't look like it's sitting on top
   of readable garbage. Position matches the JS grinder y = H - 180.
   ============================================================ */
.grinder-blur {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
          backdrop-filter: blur(18px) saturate(0.85);
  background: radial-gradient(circle,
    rgba(10,8,7,0.55) 0%,
    rgba(10,8,7,0.25) 55%,
    rgba(10,8,7,0)    100%);
}
@media (max-width: 760px) {
  .grinder-blur { width: 200px; height: 200px; bottom: 60px; }
}

/* ============================================================
   BEAN CANVAS  — full-screen falling-beans physics layer.
   Sits ABOVE content (z=5) so the grinders at the bottom of the
   viewport are never blocked by content sections scrolling past.
   pointer-events: none means clicks still go through to content.
   Pinned UI (top-link z=30, bean-hint z=40) stays above the canvas.
   ============================================================ */
#bean-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
}

/* ============================================================
   BEAN GLASS — frosted strip pinned to the bottom of the viewport.
   Sits ABOVE content (z=4) and BELOW the bean canvas (z=5) so:
     - content scrolling underneath gets blurred by backdrop-filter
     - beans drawn over this region stay crisp (they're on z=5)
   The mask gradient fades the blur in from the strip's top edge so
   content reads as "clear above, frosted while passing behind the
   bean pile, hidden once it scrolls fully past." Pointer-events
   are off so the strip never intercepts clicks.
   ============================================================ */
.bean-glass {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26vh;
  min-height: 180px;
  z-index: 4;
  pointer-events: none;
  -webkit-backdrop-filter: blur(9px) saturate(0.9);
          backdrop-filter: blur(9px) saturate(0.9);
  /* Slight darkening so the strip has presence even when no beans are
     piled in it yet — keeps it cohesive with the gunmetal background. */
  background: linear-gradient(180deg,
    rgba(13, 14, 17, 0.00) 0%,
    rgba(13, 14, 17, 0.18) 60%,
    rgba(13, 14, 17, 0.34) 100%);
  /* Fade the blur in from the top edge. Mask hides the layer's effect
     above the bean pile zone, then ramps up to full blur lower down. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,0.4) 22%, #000 55%);
          mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,0.4) 22%, #000 55%);
}
@media (max-width: 760px) {
  .bean-glass {
    height: 22vh;
    min-height: 140px;
    -webkit-backdrop-filter: blur(7px) saturate(0.92);
            backdrop-filter: blur(7px) saturate(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bean-glass { display: none; }
}

/* All section-level wrappers sit at z=1, with TRANSPARENT bgs so the
   canvas (and the body's dark color) shows through everywhere. Sections
   that want a solid color use their own bg in their specific rules. */
section, footer { position: relative; z-index: 1; background: transparent; }

/* Prevent text-highlight on drag (mouse selection + iOS long-press
   magnifier both suppressed). Applied to EVERY element so nothing
   can re-enable selection accidentally. Inputs / textareas re-enable
   text selection so users can type. */
*, *::before, *::after {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}


/* ============================================================
   TOP LINK  — "Bored? Pull over. Listen up."
   Pinned upper-right, pulsing dot, opens song URL.
   ============================================================ */
/* ============================================================
   BRAND NAV — single canonical fixed top bar (replaces the old
   floating .top-menu + sticky .section-nav). Brand mark left,
   in-page section anchors center, top-level pages right. Same
   labels mirrored in .foot-nav below. z=50 so it sits above the
   bean canvas (z=5) and bean glass strip (z=4).
   ============================================================ */
html { scroll-behavior: smooth; }
.brand-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Solid, readable nav bar — was too translucent to register as a nav. */
  background: linear-gradient(180deg, rgba(10,8,7,0.97) 0%, rgba(10,8,7,0.92) 100%);
  border-bottom: 1px solid rgba(232,120,42,0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
          backdrop-filter: blur(14px) saturate(1.05);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(232,120,42,0.10);
}
.brand-nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px 18px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--c-text);
}
/* Horizontal lockup per master brief: TEXAS FUEL wordmark | steel
   vertical rule | "Coffee Co." in warm ivory. The descriptor is
   typeset (not in the wordmark artwork) so we can tune size/color
   independently and keep the header height compact. */
.brand-mark--horizontal { gap: 12px; }
.brand-mark-rule {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(232,228,218,0.28);
}
.brand-mark-coffee {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D8D2C8;
  line-height: 1;
  white-space: nowrap;
}
.brand-mark-name {
  display: none;
  font-family: 'Inter Tight', var(--f-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--c-text);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .brand-mark-rule { display: none; }
  .brand-mark-coffee { display: none; }
  .brand-mark-name { display: inline-block; }
}
.brand-mark-glyph {
  /* TF monogram — shown on PHONES only. Unified wordmark takes over on desktop. */
  width: auto;
  height: 32px;
  display: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.brand-mark-wordmark {
  /* Simple TEXAS FUEL brushed-metal wordmark in the top-left of every
     page on DESKTOP. Sized for the tightly-cropped (13:1) source so the
     letters read at a normal nav-mark scale, not blown out wide. */
  display: block;
  height: 18px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65));
}
/* Small descriptor line under the brand mark — "Texas Fuel Coffee
   Company" (full) on desktop, "Coffee Co." (short) on phones. Same
   treatment as the foot-descriptor / hero-descriptor so the wordmark
   reads as part of one consistent identity everywhere it appears. */
.brand-mark-descriptor {
  display: block;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 1px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.brand-mark-descriptor-full  { display: inline; }
.brand-mark-descriptor-short { display: none; }
@media (max-width: 760px) {
  .brand-mark-descriptor-full  { display: none; }
  .brand-mark-descriptor-short { display: inline; }
  .brand-mark-descriptor { font-size: 8.5px; letter-spacing: 0.18em; margin-top: 2px; }
}
.brand-mark-word {
  font-family: 'Black Ops One', 'Bebas Neue', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  white-space: nowrap;
}
.brand-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.brand-nav-links::-webkit-scrollbar { display: none; }
.brand-nav-link {
  display: inline-block;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.brand-nav-link:hover {
  color: var(--c-text);
  background: rgba(232,120,42,0.12);
}
.brand-nav-link.is-current {
  color: var(--c-accent);
  background: rgba(232,120,42,0.10);
}
.brand-nav-link[aria-current="page"] { pointer-events: none; }
/* Thin vertical divider between in-page anchor links and external page
   links (The Tape / The Guzzler). Just a hairline — no boxed-off pill. */
.brand-nav-divider {
  width: 1px;
  height: 18px;
  background: rgba(232,120,42,0.35);
  margin: 0 6px;
  flex: 0 0 auto;
  align-self: center;
}
/* Legacy: hide the old separate-pages list if any older markup ships. */
.brand-nav-pages { display: none; }

/* Push page content below the fixed nav so the hero doesn't sit
   underneath it. Hero uses min-height: 100vh — body padding keeps
   the wordmark from being clipped by the bar. */
body { padding-top: 58px; }
section[id] { scroll-margin-top: 72px; }

@media (max-width: 760px) {
  body { padding-top: 50px; }
  .brand-nav-inner { gap: 8px; padding: 6px 10px; }
  .brand-mark-word { display: none; }     /* glyph alone on phone */
  .brand-mark-wordmark { display: none; }
  .brand-mark-glyph    { display: block; height: 28px; }
  /* On phones the whole nav scrolls horizontally — every link stays
     visible, no items hidden. Edge fades let the user see scroll is
     available. */
  .brand-nav-links { gap: 2px; justify-content: flex-start; }
  .brand-nav-link { font-size: 11px; padding: 6px 9px; letter-spacing: 0.14em; }
  .brand-nav-divider { display: none; }
  section[id] { scroll-margin-top: 60px; }
}

/* Hard-kill any leftover legacy nav classes if older HTML still
   references them. The canonical bar is .brand-nav (above). */
.top-menu, .section-nav,
.top-link, .top-link--game, .top-link--pending,
.top-menu-item, .top-menu-eyebrow, .top-menu-label,
.section-nav-inner, .section-nav-item { display: none !important; }

/* Pulse keyframe is still used by .listen-pending-dot below. Keep it. */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.65; }
}


/* ============================================================
   BEAN HINT — bottom-center "mash & hold" pill. Hidden by default,
   pump.js fades it in after a delay and removes it on first click.
   ============================================================ */
.bean-hint {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(10,8,7,0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(232,120,42,0.45);
  border-radius: 999px;
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 6px 22px rgba(0,0,0,0.55),
    0 0 0 rgba(232,120,42,0);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 1.4s ease;
}
.bean-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: bean-hint-glow 2.4s ease-in-out infinite;
}
.bean-hint.is-dismissed {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(14px);
  animation: none !important;
}
.bean-hint-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 10px rgba(232,120,42,0.7);
  animation: led 2.4s ease-in-out infinite;
  flex: 0 0 7px;
}
.bean-hint-arrow {
  color: var(--c-accent);
  font-size: 14px;
  animation: bean-hint-bob 1.4s ease-in-out infinite;
}
@keyframes bean-hint-glow {
  0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 0 rgba(232,120,42,0); }
  50%      { box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 28px rgba(232,120,42,0.42); }
}
@keyframes bean-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (max-width: 760px) {
  .bean-hint {
    bottom: 18px;
    padding: 8px 14px;
    font-size: 9.5px;
    letter-spacing: 0.18em;
  }
}


/* ============================================================
   REVEAL ON SCROLL  — driven by pump.js IntersectionObserver
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  /* Slow, gentle ease so nothing snaps — feels like content rising into view */
  transition: opacity 1.4s cubic-bezier(.2,.7,.2,1),
              transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   KICKER  — small uppercase eyebrow used by every section
   ============================================================ */
.kicker {
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker--center {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 auto 32px;
}

/* Section-headline eyebrows ("THE BIG GAS BEAST", "SPECS AND STUFF",
   "STATION No. 001 · DALLAS, TEXAS") — display-sized so they actually
   read as titles, not tiny labels. */
.room .kicker--center,
.machine .kicker--center,
.specs .kicker--center {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--c-accent);
  margin-bottom: 22px;
}
@media (max-width: 760px) {
  .room .kicker--center,
  .machine .kicker--center,
  .specs .kicker--center {
    font-size: clamp(22px, 6vw, 32px);
    letter-spacing: 0.14em;
  }
}


/* ============================================================
   STATUS LED dot  — used inside kickers
   ============================================================ */
.led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 10px rgba(232,120,42,0.8);
  animation: led 2.8s ease-in-out infinite;
  display: inline-block;
  flex: 0 0 6px;
}


/* ============================================================
   WORDMARK  — each TEXAS / FUEL letter is its own glyph element.
   No PNG, no box. Metal vertical gradient via background-clip:text
   and an ember drop-shadow stack underneath. Sits directly on the
   page bg.
   ============================================================ */
.wm {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  font-family: 'Anton', 'Bebas Neue', 'Black Ops One', system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  /* Larger on the home hero — was clipping at 168px on big screens. */
  font-size: clamp(64px, 14vw, 260px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Ember glow stacks below every letter — keep the orange halo even
     though .hero-mark-ember layer also adds a radial bloom underneath. */
  filter:
    drop-shadow(0 2px 0  rgba(255,140,55,0.85))
    drop-shadow(0 8px 6px  rgba(232,120,42,0.55))
    drop-shadow(0 18px 26px rgba(232,120,42,0.30))
    drop-shadow(0 32px 48px rgba(160,60,15,0.18));
}
/* Listen page: a touch smaller so it doesn't dwarf the video frame. */
.listen-brand .wm { font-size: clamp(48px, 9vw, 168px); }
.wm-l {
  /* Polished-chrome vertical gradient. Bright cream highlight up top,
     a thin warm reflection band around 55%, then a deep base. The thin
     dark band sits at the bottom (not centered) so it never reads as a
     strikethrough across the letters. */
  background:
    linear-gradient(180deg,
      #fdf8ea 0%,
      #efe5cd 14%,
      #b8ad94 32%,
      #8c8170 46%,
      #c9bb9e 56%,
      #f4e9cd 64%,
      #a99e85 82%,
      #4a4234 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Thin charcoal outline drawn via stroke (kept subtle so letters read crisp) */
  -webkit-text-stroke: 1.2px rgba(15,12,8,0.7);
  display: inline-block;
}
.wm-gap {
  display: inline-block;
  width: 0.45em;          /* the space between "TEXAS" and "FUEL" */
}


/* ============================================================
   HERO  — TEXAS FUEL wordmark + Honor Pump sign, stacked.
   Both edge-fade into the page bg. Generous gap, restrained
   breath, ember spotlight behind. Texas grit, no overlap.
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  background: transparent;
  overflow: hidden;
}
.hero--stack {
  min-height: 100vh;
  padding: 6vh 24px 7vh;        /* tighter so the bigger artwork fits */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;                      /* tighter pair so both can be tall */
}
/* (Warm ember backdrop removed — was creating a lighter pool that made
   the wordmark look like it sat in a darker rectangle by contrast.) */
.hero--stack > * { position: relative; }

/* ------------------------------------------------------------
   HERO — SIGN ONLY. The Honor Pump sign already carries the
   TEXAS FUEL wordmark, sub-copy, leaded/unleaded marks, and
   the $1 per pour callout. Removed the separate wordmark above
   it (that was just repeating "TEXAS FUEL" in the same visual
   language); scaled the sign up to anchor the whole viewport.
   ------------------------------------------------------------ */
.hero--sign-only {
  min-height: 100vh;
  padding: 6vh 24px 8vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* =============================================================
   Composed hero — wordmark image on top, Honor Pump content
   typeset directly below it. No sign image, no boxes. The whole
   thing dissolves into the dark page bg.
   ============================================================= */
.hero--composed {
  min-height: 100vh;
  padding: 4vh 24px 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Wordmark sits at the top (no auto margin); the honor-pump card
     gets auto top + bottom margins so it floats centered in the
     remaining space between the wordmark and the bottom of the hero. */
  justify-content: flex-start;
  text-align: center;
}
.hero--composed .hero-card {
  margin-top: auto;
  margin-bottom: auto;
}
.hero--composed .hero-mark {
  width: auto;
  max-width: min(2200px, 98vw);
  max-height: 30vh;
  height: auto;
  display: block;
  margin: 0;
  position: relative;
  z-index: 2;       /* sits on top of the ember glow */
}
/* "PUMP" sub-headline directly under the TEXAS FUEL wordmark.
   Anton (heavy condensed) for the closest match to the wordmark's
   letterform proportions, with a brushed-metal vertical gradient
   clipped to the text and an ember-orange underglow — same treatment
   the wordmark PNG uses, just rendered live in CSS. */
.hero-sublogo {
  font-family: 'Anton', 'Black Ops One', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(46px, 7vw, 110px);
  letter-spacing: 0.10em;
  line-height: 0.95;
  text-align: center;
  margin: -2px 0 24px;
  text-transform: uppercase;
  /* Brushed-metal vertical gradient — cream highlight up top, dark
     middle, polished base. Mirrors the wordmark's chrome bevel. */
  background:
    linear-gradient(180deg,
      #f5ede0 0%,
      #c8bea8 22%,
      #8a8170 46%,
      #4a4234 60%,
      #b8ad94 80%,
      #d8c8a0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(20,16,12,0.5);
  /* Ember underglow — sells "the chrome letters are sitting on hot
     coals" same as the wordmark above. */
  filter:
    drop-shadow(0 2px 0  rgba(255,150,55,0.75))
    drop-shadow(0 8px 8px  rgba(232,120,42,0.55))
    drop-shadow(0 18px 28px rgba(232,120,42,0.28))
    drop-shadow(0 32px 48px rgba(160,60,15,0.16));
}
@media (max-width: 760px) {
  .hero-sublogo { margin: 0 0 14px; letter-spacing: 0.08em; }
}
.hero-mark-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  max-width: 100%;
}
/* Sub-tagline under the TEXAS FUEL wordmark, mirroring the
   "INDUSTRIAL. BOLD. HIGH-OCTANE." treatment from the bag labels.
   Letter-spaced caps in a clean industrial sans — the same role
   that "INDUSTRIAL. BOLD. HIGH-OCTANE." plays on the packaging. */
.hero-mark-tagline {
  font-family: 'Bebas Neue', 'Anton', 'Inter Tight', system-ui, sans-serif;
  font-size: clamp(13px, 1.5vw, 22px);
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(232,210,160,0.85);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  margin: 4px 0 0;
  padding-left: 0.36em;            /* compensates for trailing letter-spacing */
  position: relative;
  z-index: 2;
}
@media (max-width: 760px) {
  .hero-mark-tagline { letter-spacing: 0.28em; }
}
@media (max-width: 760px) {
  .hero-mark-wrap { margin-bottom: 16px; }
}

/* Hidden — the new TF wordmark PNG already has ember edges baked
   into the artwork. The old radial halo overlay read as a hot red
   bloom against the page bg. Keeping the element hidden (rather
   than deleting it from the templates) so the markup still validates
   if any older template still includes the span. */
.hero-mark-ember,
.listen-mark-ember { display: none; }

@keyframes ember-breath {
  0%   { opacity: 0.88; transform: scale(1.000) translateY(0); }
  18%  { opacity: 1.00; transform: scale(1.020) translateY(-2px); }
  42%  { opacity: 0.82; transform: scale(0.985) translateY(1px); }
  64%  { opacity: 0.97; transform: scale(1.012) translateY(-1px); }
  82%  { opacity: 0.86; transform: scale(0.995) translateY(2px); }
  100% { opacity: 0.88; transform: scale(1.000) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark-ember { animation: none; }
}
/* Scroll cue hidden on the composed hero — kept overlapping the
   honor-pump card content and the bottom border. The page is
   obviously scrollable without it. */
.hero--composed .scroll-cue { display: none; }

/* ----- Hero tagline — uppercase signage caps, matching the metal-plate
   aesthetic. Cream color, generous tracking, subtle embossing.
   The whole line sits between two thin ember rules so it reads as a
   stamped panel callout under the wordmark, not floating prose. */
.hero-tagline {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(17px, 1.9vw, 26px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  line-height: 1.45;
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 28px;
  text-align: center;
  position: relative;
  /* Solid cream — no gradient banding crossing through the text. */
  color: #e8dfc8;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 0 12px rgba(232,120,42,0.18);
}
/* Ember pinstripes above and below — frame the tagline like a sign rule. */
.hero-tagline::before,
.hero-tagline::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,120,42,0.45) 25%,
    rgba(232,120,42,0.85) 50%,
    rgba(232,120,42,0.45) 75%,
    transparent 100%);
  pointer-events: none;
}
.hero-tagline::before { top: 0; }
.hero-tagline::after  { bottom: 0; }
@media (max-width: 760px) {
  .hero-tagline {
    font-size: clamp(13px, 3.4vw, 17px);
    letter-spacing: 0.14em;
    padding: 12px 14px;
    max-width: 96%;
  }
  .hero-tagline::before,
  .hero-tagline::after { left: 6%; right: 6%; }
}

/* ----- Hero card — reads like a brushed-metal signage plate -----
   Three stacked backgrounds:
   1) very faint horizontal brushed-metal lines (top layer)
   2) subtle off-axis sheen / highlight bloom (middle layer)
   3) vertical dark anodized gradient (bottom layer)
   Combined with crisp inset bevels + drop shadow = real signage feel. */
.hero-card {
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 44px 32px;
  border-radius: 6px;
  position: relative;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 3px),
    radial-gradient(ellipse 75% 55% at 50% 0%,
      rgba(255,225,170,0.06) 0%,
      transparent 70%),
    linear-gradient(180deg,
      rgba(34,28,22,0.85) 0%,
      rgba(22,19,15,0.92) 45%,
      rgba(16,14,11,0.92) 75%,
      rgba(24,20,16,0.86) 100%);
  border: 1px solid rgba(232,120,42,0.34);
  box-shadow:
    inset 0 1px 0  rgba(255,235,200,0.10),     /* top bevel — catches light */
    inset 0 -1px 0 rgba(0,0,0,0.65),           /* bottom bevel — deep shadow */
    inset 0 0 28px rgba(0,0,0,0.40),           /* slight inner darkening */
    0 22px 48px rgba(0,0,0,0.55),              /* drop shadow off the wall */
    0 0 0 1px rgba(0,0,0,0.6);                 /* tight black outline around the orange border */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* Corner bolts — four recessed mounting screws, one in each corner.
   Pure CSS: each is a stack of radial gradients (highlight rim +
   dark recess + center stud) so they read as machined steel bolts
   sunken into the plate. */
.hero-card::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 4px;
  pointer-events: none;
  background:
    /* TOP-LEFT bolt */
    radial-gradient(circle 6px at 0 0,
      #2a221a 0%,
      #1a1410 32%,
      rgba(80,72,60,0.45) 55%,
      rgba(0,0,0,0.30) 65%,
      transparent 80%) top left / 22px 22px no-repeat,
    /* TOP-RIGHT bolt */
    radial-gradient(circle 6px at 100% 0,
      #2a221a 0%,
      #1a1410 32%,
      rgba(80,72,60,0.45) 55%,
      rgba(0,0,0,0.30) 65%,
      transparent 80%) top right / 22px 22px no-repeat,
    /* BOTTOM-LEFT bolt */
    radial-gradient(circle 6px at 0 100%,
      #2a221a 0%,
      #1a1410 32%,
      rgba(80,72,60,0.45) 55%,
      rgba(0,0,0,0.30) 65%,
      transparent 80%) bottom left / 22px 22px no-repeat,
    /* BOTTOM-RIGHT bolt */
    radial-gradient(circle 6px at 100% 100%,
      #2a221a 0%,
      #1a1410 32%,
      rgba(80,72,60,0.45) 55%,
      rgba(0,0,0,0.30) 65%,
      transparent 80%) bottom right / 22px 22px no-repeat;
}

/* Ember accent rule under the title — applied directly to the title's
   ::after so it always sits flush at the bottom of the letterforms,
   no calc() arithmetic that can drift when font-size changes. */
.hb-title {
  position: relative;
  padding-bottom: 14px;
}
.hb-title::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,120,42,0.45) 25%,
    rgba(232,120,42,0.85) 50%,
    rgba(232,120,42,0.45) 75%,
    transparent 100%);
  pointer-events: none;
}

.hb-title {
  font-family: 'Black Ops One', 'Anton', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(54px, 8.2vw, 112px);
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 8px;
  /* Brushed-metal letter fill — smooth top-to-bottom shade with no
     dark middle band (the old gradient was reading as a strikethrough
     across the letters' centerlines). */
  background: linear-gradient(180deg,
    #f6eed8  0%,
    #ddd3b4 50%,
    #c8bd99 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 0  rgba(0,0,0,0.65))
    drop-shadow(0 0 22px rgba(232,120,42,0.30));
}
.hb-tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.35;
  letter-spacing: 0.005em;
  max-width: 580px;
  margin: 0;
}
.hb-price {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(18px, 1.9vw, 24px);
  letter-spacing: 0.22em;
  color: var(--c-text);
  text-transform: uppercase;
  margin: 0;
}
.hb-suggested {
  color: var(--c-accent);
  letter-spacing: 0.28em;
  margin-right: 4px;
}
.hb-price-sub {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.24em;
  color: var(--c-text-muted);
  text-transform: uppercase;
  margin: -6px 0 0;       /* tuck close under the $1 line */
}
@media (max-width: 760px) {
  .hb-price-sub { font-size: clamp(11px, 3.0vw, 13px); letter-spacing: 0.18em; }
}
.hb-verse {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 24px);
  color: var(--c-accent);
  letter-spacing: 0.01em;
  margin: 0;
}
@media (max-width: 760px) {
  .hero-card { padding: 18px 16px 18px; gap: 10px; max-width: calc(100% - 8px); }
  .hb-title { font-size: clamp(40px, 11vw, 64px); margin-bottom: 2px; }
  .hb-tagline { font-size: clamp(15px, 4.2vw, 19px); }
  .hb-price { font-size: clamp(13px, 3.6vw, 16px); letter-spacing: 0.16em; }
  .hb-verse { font-size: clamp(14px, 3.8vw, 17px); }
}

@media (max-width: 760px) {
  /* Top padding pushed down so the wordmark clears the fixed top-right
     "I'm bored / Listen up" pill that sits at top: 18px. */
  .hero--composed { padding: 92px 16px 24px; gap: 10px; }
  .hero--composed .hero-mark { max-height: 18vh; max-width: 100%; }
  .honor-board { gap: 10px; padding: 0 6px; }
  /* Hide scroll cue on mobile — space is too tight. */
  .hero--composed .scroll-cue { display: none; }
}
.hero--sign-only::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 60% at 50% 52%, rgba(232,120,42,0.16), transparent 72%),
    radial-gradient(ellipse 55% 45% at 50% 88%, rgba(232,120,42,0.09), transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.hero--sign-only > * { position: relative; z-index: 1; }
.hero--sign-only .hero-sign {
  width: auto;
  /* Sign is the entire hero now — sized so it actually anchors the
     viewport. Sign image is 1400×1050 (4:3). On a 1920×1080 monitor
     this resolves to ~1150 × 864 (60% wide × 80% tall). */
  max-width: min(1300px, 90vw);
  max-height: 82vh;
  /* Sign already has its own bg + frame, so no edge-fade mask —
     it should read as a real backlit sign sitting on the wall. */
  -webkit-mask-image: none;
          mask-image: none;
  filter:
    drop-shadow(0 40px 100px rgba(0,0,0,0.75))
    drop-shadow(0 0 80px rgba(232,120,42,0.28));
  animation: hero-sign-breath 13s ease-in-out infinite;
}

.hero-mark,
.hero-sign {
  display: block;
  margin: 0 auto;
  flex: 0 0 auto;
  will-change: transform;
  height: auto;
}
/* Wordmark — first thing you see. The image is ~1672×941; previous
   max-height: 40vh capped it at 432 px tall on a 1080 viewport, only
   ~770 px wide. With 56vh + 1700 px width cap the wordmark renders at
   roughly 600 × 1070 on 1080p — ~60% of viewport width. Properly big. */
.hero-mark {
  position: relative;
  width: auto;
  max-width: min(1700px, 96vw);
  max-height: 56vh;
  animation: hero-breath 9s ease-in-out infinite;
  transform-origin: center;
}
/* Sign — supporting actor under the wordmark, big enough to read the
   menu copy on the plaque from across the room without crowding out
   the wordmark above it. (4:3 aspect: 28vh × 1.33 ≈ 37vh wide.) */
.hero-sign {
  width: auto;
  max-width: min(680px, 72vw);
  max-height: 28vh;
  animation: hero-sign-breath 13s ease-in-out infinite 1.5s;
  -webkit-mask-image:
    linear-gradient(90deg,  transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg,  transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-composite: intersect;
  animation: hero-breath 13s ease-in-out infinite 1.8s;
}
@keyframes hero-breath {
  /* Very subtle ember-pulse with no perceptible scale — the wordmark
     stays put visually; only the glow underneath breathes. */
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 14px rgba(232,120,42,0.12))
            drop-shadow(0 14px 28px rgba(232,120,42,0.05));
  }
  50% {
    transform: scale(1);
    filter: drop-shadow(0 0 28px rgba(232,120,42,0.32))
            drop-shadow(0 20px 40px rgba(232,120,42,0.14));
  }
}
@keyframes hero-sign-breath {
  /* Sign breathes too, gentler and slower, offset from the wordmark
     so the hero never feels static but never feels synchronized. */
  0%, 100% {
    transform: scale(1.000);
    filter: drop-shadow(0 0 12px rgba(232,120,42,0.10));
  }
  50% {
    transform: scale(1.012);
    filter: drop-shadow(0 0 22px rgba(232,120,42,0.30));
  }
}
.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 38px;
  border: 1px solid rgba(240,232,214,0.32);
  border-radius: 12px;
  z-index: 2;
  display: grid; place-items: start center;
  padding-top: 7px;
  transition: border-color 0.2s ease;
}
.scroll-cue span {
  display: block;
  width: 2px; height: 8px;
  background: var(--c-text-muted);
  border-radius: 2px;
  animation: scroll-cue 2s ease-in-out infinite;
}
.scroll-cue:hover { border-color: var(--c-accent); }


/* ============================================================
   THE MACHINE — photo of the Jura J8 Twin (chrome variant).
   Product shot lives on a cream "showroom card" so its white
   background reads as intentional against the dark page.
   ============================================================ */
/* J8 image — sits directly on the page bg with no box, no border, no
   shadow. mix-blend-mode: lighten makes any pixel darker than the
   page background fall through to the page; only the bright parts
   (chrome, ember splash, beans) render. */
.machine-photo {
  position: relative;
  margin: 44px auto 36px;
  max-width: 820px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* NO isolation — that was creating a new stacking context that
     trapped mix-blend-mode so the dark backdrop couldn't fall through. */
  overflow: visible;
}
.machine-photo::before,
.machine-photo::after { display: none; }
.machine-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  border: none;
  box-shadow: none;
  -webkit-mask-image: none;
          mask-image: none;
  filter: none;
  opacity: 1;
  /* No mix-blend-mode — the PNG is genuinely transparent now. */
}
.machine-photo figcaption {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  text-align: center;
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
@media (max-width: 760px) {
  .machine-photo {
    max-width: 94%;
    margin: 32px auto 28px;
  }
}


/* ============================================================
   THE ROOM  — real Station No. 001 photo. Photo above, text below.
   ============================================================ */
.room {
  padding: 120px 0 100px;
  text-align: center;
}
.room .wrap { display: flex; flex-direction: column; align-items: center; }
.room .kicker { margin-bottom: 36px; }
.room-photo {
  position: relative;
  width: 100%;
  max-width: 1040px;
  border-radius: var(--sz-radius);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(232,120,42,0.18),
    0 30px 80px rgba(0,0,0,0.6),
    inset 0 0 120px rgba(0,0,0,0.4);
  margin-bottom: 36px;
}
.room-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.92) contrast(1.05) saturate(1.05);
  transform: scale(1.0);
  transition: transform 14s ease;
}
.reveal.is-revealed .room-photo img { transform: scale(1.04); }
.room-caption {
  position: absolute;
  left: 24px; bottom: 18px;
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text);
  background: rgba(10,8,7,0.75);
  padding: 8px 14px;
  border-radius: var(--sz-radius);
  border: 1px solid rgba(232,120,42,0.35);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.room-text { max-width: 640px; }
.room-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(42px, 5.6vw, 72px);
  letter-spacing: -0.015em;
  line-height: 1.0;
  color: var(--c-text);
  margin-bottom: 18px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.room-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--c-text-muted);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}


/* ============================================================
   THE MACHINE  — Jura J8 Twin block. Text-only.
   ============================================================ */
.machine {
  padding: 120px 0;
  text-align: center;
}
.machine-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
}
.machine-brand {
  font-family: 'Black Ops One', 'Bebas Neue', var(--f-label);
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 96px);
  letter-spacing: 0.06em;
  color: var(--c-text);
  line-height: 0.95;
}
.machine-model {
  font-family: 'Black Ops One', 'Bebas Neue', var(--f-label);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 128px);
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #f4ebd9 0%, #d6ccb6 22%, #7a7164 60%, #bdb39e 85%, #e7decb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 8px 22px rgba(232,120,42,0.35))
    drop-shadow(0 -2px 0 rgba(255,140,58,0.15));
  line-height: 0.95;
  animation: ember-breath 6s ease-in-out infinite;
}
.machine-body {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--c-text-muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 40px;
}
.machine-specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.machine-specs li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--sz-radius);
  color: var(--c-text);
  background: rgba(255,255,255,0.015);
}


/* ============================================================
   BEAN MARK  — tiny CSS-shaped coffee bean, used in spec rows
   ============================================================ */
.bean-mark {
  display: inline-block;
  width: 12px; height: 14px;
  background: radial-gradient(ellipse 60% 60% at 40% 35%, #6e3e1e 0%, #3a2418 55%, #1d0f08 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  box-shadow: 0 0 6px rgba(232,120,42,0.25);
  flex: 0 0 12px;
}
.bean-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,10,6,0.9) 45%, transparent 55%);
  border-radius: inherit;
}
.bean-mark--leaded   { filter: hue-rotate(-6deg) saturate(1.2) brightness(1.05); }
.bean-mark--unleaded { filter: brightness(0.78) saturate(0.65); }


/* ============================================================
   PUMP SIGN  — full menu artwork
   ============================================================ */
.pump-sign {
  padding: 80px 0 100px;
  text-align: center;
}
.pump-sign-art {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto 36px;
  /* Fade off the rectangular edges so the sign melts into the page bg */
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at center, #000 55%, rgba(0,0,0,0.7) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 92% 92% at center, #000 55%, rgba(0,0,0,0.7) 78%, transparent 100%);
  filter: drop-shadow(0 18px 50px rgba(0,0,0,0.65)) drop-shadow(0 0 30px rgba(232,120,42,0.18));
  transition: transform 0.6s ease, filter 0.4s ease;
}
.pump-sign-art:hover {
  transform: scale(1.015);
  filter: drop-shadow(0 22px 60px rgba(0,0,0,0.7)) drop-shadow(0 0 36px rgba(232,120,42,0.28));
}
.pump-sign-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--c-text);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  line-height: 1.1;
}
.pump-sign-body {
  font-family: var(--f-body);
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--c-text-muted);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}


/* ============================================================
   COMING SOON — homepage bag-SKU grid. Four product cards laid
   out 4-up on desktop, 2-up tablet, 1-up phone. Each bag photo
   was shot against its own industrial / charcoal backdrop, so the
   cards are intentionally minimal — no competing colored borders,
   no chrome strokes around the bag. The atmosphere in the photo
   IS the styling. Top-rule + accent dot per card matches the
   bag's own accent color (green / blue / charcoal / ember) but
   stays muted enough to not fight the photography.
   ============================================================ */
.soon {
  padding: 90px 0 110px;
  text-align: center;
}
.soon-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 48px);
  color: var(--c-text);
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}
.soon-sub {
  font-family: var(--f-body);
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--c-text-muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 56px;
}
.soon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.soon-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--c-border-strong);
  border-top: 1px solid var(--soon-accent, rgba(232,120,42,0.45));
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}
.soon-card:hover {
  background: rgba(255,255,255,0.028);
  border-color: rgba(232,120,42,0.32);
  transform: translateY(-3px);
}
/* Per-SKU accent — used only on the thin top rule and badge dot. The
   bag photo already carries the actual color story. */
.soon-card--ember     { --soon-accent: rgba(232,120,42,0.55); }
.soon-card--charcoal  { --soon-accent: rgba(180,170,150,0.45); }
.soon-card--blue      { --soon-accent: rgba(120,170,220,0.55); }
.soon-card--green     { --soon-accent: rgba(140,200,120,0.50); }
.soon-card--leaded,
.soon-card--house     { --soon-accent: rgba(232,120,42,0.55); }
.soon-card--cold      { --soon-accent: rgba(120,170,220,0.55); }
.soon-card--unleaded  { --soon-accent: rgba(140,200,120,0.50); }

/* Photo wrap — preserve the dark backdrop of the source. The bags were
   shot against industrial / charcoal scenes; we don't crop the
   atmosphere out. The image fills the wrap at natural aspect and the
   wrap takes the dark tone so the photo edges dissolve into the card. */
.soon-card-photo {
  position: relative;
  margin: 0;
  background: #0a0807;
  aspect-ratio: 5 / 6;       /* fits the source crop without letterbox */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.soon-card-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.soon-card-photo--missing img {
  width: 48%;
  height: auto;
  opacity: 0.5;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}
.soon-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 4px;
  background: rgba(10,8,7,0.78);
  border: 1px solid var(--soon-accent);
  border-radius: 999px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.soon-card-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--soon-accent);
  box-shadow: 0 0 8px var(--soon-accent);
}
.soon-card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.soon-card-tag {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0;
}
.soon-card-name {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 26px);
  letter-spacing: 0.03em;
  color: var(--c-text);
  margin: 0;
  line-height: 1.1;
}
.soon-card-tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--c-accent);
  margin: 2px 0 4px;
  line-height: 1.35;
}
.soon-card-body-line {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
}

/* Email capture — single field + button. Belt-and-suspenders narrow so
   it doesn't look like a marketing form; it's an "ok, signal me when"
   pill more than a lead-gen widget. */
.soon-notify {
  margin: 56px auto 0;
  max-width: 520px;
  text-align: center;
}
.soon-notify-label {
  display: block;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 10px;
}
.soon-notify-row {
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  padding: 6px;
  transition: border-color 0.18s ease;
}
.soon-notify-row:focus-within {
  border-color: rgba(232,120,42,0.45);
}
.soon-notify-input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 15px;
  padding: 10px 12px;
  outline: none;
  min-width: 0;
}
.soon-notify-input::placeholder { color: var(--c-text-dim); }
.soon-notify-cta {
  flex: 0 0 auto;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  background: var(--c-accent);
  color: var(--c-bg);
  border: 1px solid var(--c-accent-hover);
  border-radius: 3px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
}
.soon-notify-cta:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}
.soon-notify-note {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: 12px 0 0;
}
.soon-signoff {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--c-text-muted);
  margin: 28px 0 0;
}

@media (max-width: 1100px) {
  .soon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .soon { padding: 64px 0 80px; }
  .soon-grid { grid-template-columns: 1fr; gap: 16px; }
  .soon-notify-row { flex-direction: column; }
  .soon-notify-cta { width: 100%; padding: 12px 16px; }
}


/* ============================================================
   SPECS  — deadpan factoid list, monospaced register
   ============================================================ */
.specs {
  padding: 80px 0 100px;
  text-align: center;
}
.specs-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.005em;
  color: var(--c-text);
  margin-bottom: 36px;
}
.specs-list {
  list-style: none;
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 36px 24px;
  border-radius: 6px;
  /* Brushed-metal spec plate — matches the Honor Pump card and the
     pricing blocks. Reads as a signage panel mounted on the wall. */
  background:
    linear-gradient(180deg,
      rgba(28,24,20,0.80) 0%,
      rgba(18,16,13,0.90) 50%,
      rgba(22,19,15,0.84) 100%);
  border: 1px solid rgba(232,120,42,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 16px 36px rgba(0,0,0,0.42);
}
.specs-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  text-align: left;
}
.specs-list li:last-child { border-bottom: 0; }
.specs-k {
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-size: 10.5px;
}
.specs-v {
  flex: 1;
  text-align: right;
  color: var(--c-text-muted);
  font-weight: 500;
}
.gun-on, .gun-on * { cursor: crosshair !important; }
.gun-on a, .gun-on button, .gun-on input, .gun-on textarea { cursor: crosshair !important; }


/* ============================================================
   PAY SECTION  — Honor Pump heading + two pricing groups
   ============================================================ */
.pay {
  padding: 60px 0 100px;
}

/* ============================================================
   SONG STRIP  — embedded Suno player right below the hero
   ============================================================ */
.song-strip {
  padding: 50px 0 30px;
  text-align: center;
}
.song-strip-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--c-text);
  letter-spacing: -0.005em;
  margin-bottom: 18px;
}
.song-strip-frame {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border-radius: var(--sz-radius);
  overflow: hidden;
  border: 1px solid rgba(232,120,42,0.25);
  background: #0a0807;
  box-shadow: 0 0 0 1px rgba(232,120,42,0.12), 0 20px 50px rgba(0,0,0,0.6);
}
.song-strip-iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
  background: #0a0807;
}
.song-strip-foot {
  margin-top: 14px;
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.song-strip-foot a {
  color: var(--c-accent);
  border-bottom: 1px solid rgba(232,120,42,0.4);
}
.song-strip-foot a:hover { color: var(--c-accent-hover); }


/* Fade strip — transition between PAY and ROOM. A vignette that hints
   the next section is coming through the dark. */
.fade-strip {
  position: relative;
  height: 180px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center top, rgba(232,120,42,0.10), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(10,8,7,0.55) 50%, rgba(10,8,7,0.85) 100%);
}
.section-head {
  text-align: center;
  margin-bottom: 64px;
}
.section-rule {
  display: block;
  width: 28px; height: 1px;
  background: var(--c-accent);
  margin: 0 auto 22px;
  box-shadow: 0 0 8px rgba(232,120,42,0.5);
}
.section-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 54px);
  color: var(--c-text);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 22px;
}
.section-sub {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.pay-stamp { margin-top: 4px; }
.pay-thanks {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--c-text-muted);
  max-width: 540px;
  margin: 22px auto 0;
  line-height: 1.45;
}


/* ============================================================
   LISTEN PAGE  — /listen/ — embedded song
   ============================================================ */
.listen {
  min-height: calc(100vh - 60px);
  padding: 80px 0 120px;
  display: flex;
  align-items: center;
  text-align: center;
}
.listen .wrap { display: flex; flex-direction: column; align-items: center; }
.listen-back {
  align-self: flex-start;
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 8px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--sz-radius);
  margin-bottom: 32px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.listen-back:hover {
  color: var(--c-text);
  border-color: var(--c-accent);
  background: rgba(232,120,42,0.06);
}
.listen-brand {
  display: inline-block;
  position: relative;            /* anchors the ember glow layer */
  margin: 24px auto 40px;
  transition: transform 0.4s ease;
}
/* Match the home-page hero-mark treatment exactly: same source PNG,
   same sizing, same ember-pulse animation. Both pages now read as the
   same brand mark. */
.listen-brand img {
  display: block;
  position: relative;            /* on top of the ember glow */
  z-index: 2;
  margin: 0 auto;
  width: auto;
  max-width: min(2200px, 98vw);
  max-height: 30vh;
  height: auto;
  animation: hero-breath 9s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
.listen-brand:hover { transform: translateY(-2px); }
@media (max-width: 760px) {
  .listen-brand { margin: 24px auto 28px; }
  .listen-brand img { max-width: 100%; max-height: 22vh; }
}
.listen-pending {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 22px 28px;
  border: 1px dashed rgba(232,120,42,0.4);
  border-radius: var(--sz-radius);
  background: rgba(232,120,42,0.04);
  color: var(--c-text-muted);
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 36px 0 20px;
}
.listen-pending-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 12px rgba(232,120,42,0.9);
  animation: pulse 2.2s ease-in-out infinite;
}
.listen-title {
  font-family: 'Black Ops One', 'Bebas Neue', var(--f-label);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #f4ebd9 0%, #d6ccb6 22%, #7a7164 60%, #bdb39e 85%, #e7decb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 10px 30px rgba(232,120,42,0.4))
    drop-shadow(0 -2px 0 rgba(255,140,58,0.18));
  margin: 18px 0 14px;
  animation: ember-breath 6s ease-in-out infinite;
  line-height: 1;
}
.listen-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--c-text-muted);
  margin-bottom: 46px;
  max-width: 520px;
}
.listen-frame {
  position: relative;
  width: 100%;
  /* Sized so beans have meaningful room to orbit around it — the
     video shouldn't dominate the viewport on the gravity-grinder page. */
  max-width: min(1080px, 84vw);
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;               /* no surrounding box at all */
  margin-bottom: 28px;
  /* Subtle feathered edges — dual linear masks composited so each
     side gets a soft ~5% fade. Reads as polished, not blurry. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-composite: intersect;
}
.listen-iframe,
.listen-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: transparent;
  outline: none;
}
/* Decorative glow stripe removed */
.listen-frame-glow { display: none; }

/* ---- Video facade (click-to-play poster) ---- */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;     /* no black box around the poster */
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.video-facade:hover {
  transform: scale(1.005);
}
.video-facade-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), filter 0.3s ease;
}
.video-facade:hover .video-facade-poster {
  transform: scale(1.04);
  filter: brightness(1.08);
}
.video-facade-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.video-facade:hover .video-facade-play {
  transform: scale(1.12);
}
.video-facade:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}
.listen-foot {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.listen-open {
  color: var(--c-accent);
  border-bottom: 1px solid rgba(232,120,42,0.5);
  margin-left: 6px;
  transition: color 0.2s ease;
}
.listen-open:hover { color: var(--c-accent-hover); }

@media (max-width: 760px) {
  .listen { padding: 56px 0 80px; }
  .listen-back { margin-bottom: 36px; font-size: 9.5px; padding: 6px 12px; }
  /* Listen page wrap: trim padding on mobile so the video and brand
     can render at viewport width without overflowing. */
  .listen-wrap { padding: 0 12px; }
  /* Video frame uses 100% of the wrap's content area on mobile. */
  .listen-frame { max-width: 100%; }
  .listen-title { font-size: clamp(40px, 12vw, 60px); }
}
@media (max-width: 460px) {
  .listen-title { font-size: clamp(36px, 11vw, 54px); }
  .listen-wrap { padding: 0 8px; }
}

.pay-group { margin-top: 72px; }
.pay-group:first-of-type { margin-top: 0; }
.pay-group-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--c-text);
  text-align: center;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.pay-group-sub {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-align: center;
  margin-bottom: 32px;
}


/* ============================================================
   PRICE STAMP
   ============================================================ */
.price-stamp {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  border: 1px solid rgba(232,120,42,0.28);
  border-radius: var(--sz-radius);
  background: rgba(232,120,42,0.04);
}
.price-stamp-line {
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
}
.price-stamp-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: 0 0 4px;
}
.price-stamp-math {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}


/* ============================================================
   ONE-TIME BIG BLOCKS — 3 horizontal
   ============================================================ */
.blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  /* Brushed-metal signage plate — matches the hero Honor Pump card. */
  background:
    linear-gradient(180deg,
      rgba(28,24,20,0.78) 0%,
      rgba(18,16,13,0.88) 50%,
      rgba(22,19,15,0.82) 100%);
  border: 1px solid rgba(232,120,42,0.28);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 14px 32px rgba(0,0,0,0.40);
  padding: 36px 30px 32px;
  min-height: 280px;
  transition: opacity 1.4s cubic-bezier(.2,.7,.2,1),
              transform 1.4s cubic-bezier(.2,.7,.2,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  opacity: 0;
  transform: translateY(28px);
  overflow: hidden;
}
.block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(232,120,42,0.10), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.block.is-revealed { opacity: 1; transform: translateY(0); }
.block:hover {
  border-color: rgba(232,120,42,0.65);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 22px 48px rgba(0,0,0,0.55),
    0 0 28px rgba(232,120,42,0.12);
}
.block:hover::before { opacity: 1; }

.block-amount {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(54px, 6.2vw, 80px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-text);
  margin-bottom: 12px;
}
.block-name {
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.block-blurb {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--c-text-muted);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 22px;
}
.block-cta {
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  padding-top: 16px;
  border-top: 1px solid var(--c-border-strong);
  width: 100%;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.block:hover .block-cta {
  color: var(--c-accent-hover);
  border-top-color: rgba(232,120,42,0.5);
}


/* ============================================================
   SUBSCRIPTION CARDS — 5 horizontal
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background:
    linear-gradient(180deg,
      rgba(28,24,20,0.78) 0%,
      rgba(18,16,13,0.88) 50%,
      rgba(22,19,15,0.82) 100%);
  border: 1px solid rgba(232,120,42,0.22);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 10px 24px rgba(0,0,0,0.35);
  padding: 32px 18px 22px;
  min-height: 220px;
  transition: opacity 1.4s cubic-bezier(.2,.7,.2,1),
              transform 1.4s cubic-bezier(.2,.7,.2,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  opacity: 0;
  transform: translateY(28px);
}
.card.is-revealed { opacity: 1; transform: translateY(0); }
.card:hover {
  border-color: rgba(232,120,42,0.6);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 18px 36px rgba(0,0,0,0.50),
    0 0 22px rgba(232,120,42,0.12);
}
.card-amount {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--c-text);
  margin-bottom: 6px;
}
.card-per {
  font-family: var(--f-label);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: 0;
  margin-left: 4px;
}
.card-name {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.card-blurb {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--c-text-muted);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 18px;
}
.card-cta {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid var(--c-border-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.card:hover .card-cta {
  color: var(--c-accent-hover);
  border-top-color: rgba(232,120,42,0.5);
}
.card--featured {
  border-color: rgba(232,120,42,0.4);
  background: linear-gradient(180deg, rgba(232,120,42,0.06), transparent 60%), var(--c-surface);
  box-shadow: 0 0 0 1px rgba(232,120,42,0.15), 0 10px 26px rgba(0,0,0,0.4);
}
.card-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-accent);
  color: #1a0e05;
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--sz-radius);
}

.block.is-pending,
.card.is-pending { cursor: not-allowed; }
.block.is-pending .block-cta,
.card.is-pending .card-cta { color: var(--c-text-dim); }
.block.is-pending .block-cta::after,
.card.is-pending .card-cta::after {
  content: " · not wired";
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: none;
  color: var(--c-text-dim); margin-left: 6px;
}


/* ============================================================
   CLOSING  — verse over monogram-stone photo. Scrim for legibility.
   ============================================================ */
.closing {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  text-align: center;
  background: #000;
}
.closing-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.45;
  z-index: 0;
  animation: hero-pan 42s ease-in-out infinite alternate;
}
.closing-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(10,8,7,0.55) 60%, rgba(10,8,7,0.95) 100%),
    linear-gradient(180deg, rgba(10,8,7,0.6) 0%, transparent 35%, transparent 65%, rgba(10,8,7,0.6) 100%);
  z-index: 1;
}
.closing-text {
  position: relative;
  z-index: 2;
}
.closing-a {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  color: var(--c-text);
  margin-bottom: 12px;
  letter-spacing: 0.005em;
  text-shadow: 0 4px 22px rgba(0,0,0,0.7);
}
.closing-b {
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 28px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}
.closing-verse {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--c-accent);
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(232,120,42,0.5);
}


/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact {
  padding: 80px 0 100px;
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 22px;
  margin-top: 8px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field-label {
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.field-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--c-text-dim);
  margin-left: 6px;
}
.field input,
.field textarea {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-border-strong);
  padding: 10px 2px 12px;
  resize: vertical;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease;
}
.field textarea { min-height: 92px; line-height: 1.55; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--c-accent); }
.form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--c-border);
}
.form-note {
  font-family: var(--f-label);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.form-note a {
  color: var(--c-accent);
  border-bottom: 1px solid rgba(232,120,42,0.4);
}
.form-submit {
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 0;
  padding: 14px 22px;
  border-radius: var(--sz-radius);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 24px rgba(232,120,42,0.25);
}
.form-submit:hover:not(:disabled) {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(232,120,42,0.4);
}
.form-submit:disabled { opacity: 0.6; cursor: progress; }
.form-error {
  grid-column: 1 / -1;
  color: #ff8c3a;
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 8px;
}
.form-sent {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--c-text);
}
.form-sent .form-sent-mark {
  display: block;
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--c-accent);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-style: normal;
}


/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  padding: 56px 0 64px;
  text-align: center;
  border-top: 1px solid var(--c-border);
  position: relative;
  z-index: 1;
}
.foot-mark {
  /* FINAL TF monogram (800x557). Sized big enough that the brushed
     metal + ember-edge detail reads as the actual brand mark, not a
     tiny favicon. */
  width: auto;
  height: 130px;
  display: block;
  margin: 0 auto 22px;
  animation: ember-breath 6s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.65));
}
@media (max-width: 760px) {
  .foot-mark { height: 92px; }
}

/* ============================================================
   RUNNING-AWAY MARQUEE — highway-sign scroll band above footer.
   Two duplicate tracks loop seamlessly via translateX(-50%).
   ============================================================ */
.runaway {
  overflow: hidden;
  white-space: nowrap;
  padding: 22px 0;
  margin-top: 60px;
  background: linear-gradient(180deg,
    rgba(232,120,42,0.06) 0%,
    rgba(232,120,42,0.14) 50%,
    rgba(232,120,42,0.06) 100%);
  border-top: 1px solid rgba(232,120,42,0.32);
  border-bottom: 1px solid rgba(232,120,42,0.32);
  position: relative;
  z-index: 1;
  /* Mask the edges so text fades in/out instead of getting clipped hard */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.runaway-track {
  display: inline-block;
  animation: runaway-scroll 38s linear infinite;
  will-change: transform;
}
.runaway-track span {
  display: inline-block;
  font-family: 'Black Ops One', 'Anton', 'Bebas Neue', system-ui, sans-serif;
  font-size: clamp(28px, 4.4vw, 56px);
  letter-spacing: 0.10em;
  color: var(--c-accent);
  text-shadow:
    0 0 18px rgba(232,120,42,0.45),
    0 2px 0 rgba(0,0,0,0.5);
  padding: 0 24px;
}
@keyframes runaway-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .runaway-track { animation: none; }
}
@media (max-width: 760px) {
  .runaway { padding: 16px 0; margin-top: 40px; }
  .runaway-track { animation-duration: 26s; }
  .runaway-track span { padding: 0 14px; }
}
/* Same canonical labels as .brand-nav. The two lists must match. */
.foot-nav {
  list-style: none;
  margin: 0 auto 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  max-width: 760px;
}
.foot-nav-link {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.foot-nav-link:hover {
  color: var(--c-text);
  border-bottom-color: rgba(232,120,42,0.55);
}
/* Descriptor + tagline in the footer — same words / order as nav and
   hero so the brand identity reads consistently in all three places. */
.foot-descriptor {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 8px 0 6px;
}
.foot-tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--c-accent);
  margin: 0 0 22px;
  text-shadow: 0 0 12px rgba(232,120,42,0.22);
}
@media (max-width: 760px) {
  .foot-descriptor { font-size: 11px; letter-spacing: 0.24em; }
  .foot-tagline    { font-size: 13px; margin-bottom: 18px; }
}
.foot-line {
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 6px;
}
.foot-copy {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--c-text-dim);
  text-transform: uppercase;
}


/* ============================================================
   MOTION
   ============================================================ */
@keyframes hero-pan {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1%, -1.5%); }
}
@keyframes led {
  0%, 60%, 100% { opacity: 1; }
  72%           { opacity: 0.3; }
  82%           { opacity: 1; }
}
@keyframes scroll-cue {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
@keyframes ember-breath {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(232,120,42,0.35)); }
  50%      { filter: drop-shadow(0 6px 18px rgba(232,120,42,0.65)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo, .closing-photo,
  .led, .scroll-cue span, .foot-mark, .machine-model,
  .section-rule, .top-link-pulse { animation: none !important; }
  .block, .card, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  #bean-canvas { display: none; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card--featured { grid-column: span 1; }
  .machine { padding: 90px 0; }
  .room { padding: 90px 0 80px; }
}
@media (max-width: 760px) {
  .top-link { top: 12px; right: 12px; padding: 8px 12px; }
  .top-link-text, .top-link-sub { font-size: 9.5px; letter-spacing: 0.14em; }
  .top-link-arrow { display: none; }

  .hero { height: 62vh; min-height: 420px; }
  .hero--sign { height: auto; min-height: 0; }

  /* Stacked hero on phones: hug content height so there's no empty
     space dead zone between the sign and the pricing below. */
  .hero--stack {
    height: auto;
    min-height: 0;
    padding: 4vh 16px 2vh;
    gap: 3vh;
  }
  /* Phone hero — wordmark + sign tightened but still prominent */
  .hero--stack .hero-mark { max-width: min(640px, 92vw); max-height: 26vh; }
  .hero--stack .hero-sign { max-width: min(440px, 86vw); max-height: 30vh; }
  .hero--stack .scroll-cue { display: none; }
  /* Pay section pulls up tighter on mobile to meet the hero */
  .hero--stack + .pay { padding-top: 24px; }

  /* Sign-only hero on phones: hug content height, sign fills width */
  .hero--sign-only {
    height: auto;
    min-height: 0;
    padding: 5vh 16px 4vh;
  }
  .hero--sign-only .hero-sign {
    max-width: min(640px, 96vw);   /* fill phone width edge-to-edge */
    max-height: none;
  }
  .hero--sign-only .scroll-cue { display: none; }
  .hero--sign-only + .pay { padding-top: 24px; }

  .room { padding: 70px 0 70px; }
  .room-photo { max-width: 100%; }
  .room-caption { left: 14px; bottom: 12px; font-size: 9.5px; padding: 6px 10px; }
  .room-title { font-size: clamp(34px, 9vw, 48px); }
  .machine { padding: 70px 0; }
  .machine-body { font-size: 15px; }
  .machine-specs li { padding: 8px 14px; font-size: 10px; }
  .pump-sign { padding: 60px 0 80px; }
  .pump-sign-art { max-width: 86%; }

  .pay { padding: 48px 0 80px; }
  .section-head { margin-bottom: 48px; }
  .section-title { font-size: clamp(28px, 5.6vw, 38px); }
  .pay-group { margin-top: 56px; }

  .blocks { grid-template-columns: 1fr; gap: 14px; }
  .block { padding: 28px 24px 24px; min-height: 0; }
  .block-amount { font-size: 52px; }

  /* 6 cards on phone: single full-width column so content has room and
     tiles sit right up to each other (no awkward gap, no overlap).
     Hairline gap so the bottom border of one becomes the top border
     of the next. */
  .cards { grid-template-columns: 1fr; gap: 0; }
  .card {
    padding: 22px 22px 20px;
    min-height: 0;
    border-radius: 0;
    /* Collapse adjacent borders so cards share a single hairline */
    margin-top: -1px;
  }
  .card:first-child { margin-top: 0; }
  .card--featured { grid-column: 1; }

  .price-stamp { flex-direction: column; gap: 6px; padding: 10px 16px; }
  .price-stamp-dot { display: none; }

  .form { grid-template-columns: 1fr; gap: 22px 0; }
  .form-foot { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .form-submit { width: 100%; padding: 16px 22px; }
  .form-note { text-align: center; }
}
@media (max-width: 460px) {
  .wrap { padding: 0 20px; }
  .hero { height: 56vh; min-height: 360px; }
  .hero--sign { height: auto; min-height: 0; }
  .room { padding: 56px 0 60px; }
  .machine { padding: 56px 0; }
  .pay { padding: 36px 0 64px; }
  .cards { grid-template-columns: 1fr; }
  .card--featured { grid-column: auto; }
  .block-amount { font-size: 44px; }
  .closing { padding: 88px 0; }
}


/* ============================================================
   FUEL RUN — the /play/ game page
   ============================================================ */
.play {
  min-height: calc(100vh - 60px);
  padding: 40px 16px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.play-head {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Real Texas Fuel wordmark above the funny game title. */
.play-mark-wrap {
  display: block;
  margin: 0 auto 6px;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.play-mark-wrap:hover { transform: translateY(-1px); }
.play-mark {
  display: block;
  width: auto;
  height: auto;
  max-width: min(640px, 86vw);
  max-height: 14vh;
  margin: 0 auto;
  /* Just a dark separation shadow — the PNG's baked-in ember edges
     are the glow. No CSS orange halo on top. */
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}
.play-title {
  font-family: 'Black Ops One', 'Anton', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin: 2px 0 8px;
  text-shadow: 0 0 24px rgba(232,120,42,0.35);
}
.play-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  margin: 0 0 22px;
  line-height: 1.45;
}

.play-stage {
  position: relative;
  width: 100%;
  max-width: 760px;                /* matches .play-head + .play-hud */
  margin: 8px auto 0;
}

#play-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 20px 40px rgba(0,0,0,0.55);
  background: #0a0807;
  width: 100%;
  height: auto;
  touch-action: manipulation;     /* faster taps on mobile */
}

.play-hud {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;            /* wrap to two rows on narrow screens */
  gap: 8px 12px;
  margin: 14px auto 4px;
  max-width: 760px;
  width: 100%;
}
.play-controls { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.play-hud-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: rgba(17,16,14,0.78);
  border: 1px solid rgba(232,120,42,0.22);
  border-radius: 4px;
}
.play-hud-label {
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: 4px;
}
.play-hud-val {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: 0.05em;
  color: var(--c-accent);
}

.play-controls {
  margin-top: 8px;
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.play-key {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  color: var(--c-text);
  margin-right: 6px;
  letter-spacing: 0.1em;
}

/* Overlay — start screen and win screen */
.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,8,7,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
  transition: opacity 0.35s ease;
  z-index: 10;
}
.play-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.play-overlay-inner {
  text-align: center;
  max-width: 480px;
  padding: 32px 28px;
}
.play-overlay h2 {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 0.04em;
  color: var(--c-accent);
  margin: 0 0 14px;
}
.play-overlay p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--c-text);
  margin: 0 0 24px;
  line-height: 1.45;
}
.play-btn {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 4px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.play-btn:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .play { padding: 60px 12px 40px; }
  .play-hud { gap: 6px 8px; }
  .play-hud-block { padding: 6px 8px; min-width: 22%; }
  .play-hud-label { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 2px; }
  .play-hud-val { font-size: clamp(16px, 4.8vw, 22px); }
  .play-controls { font-size: 9.5px; letter-spacing: 0.16em; padding: 0 8px; }
  /* Block native double-tap-to-zoom on the canvas region so rapid taps
     register as shots instead of zoom gestures. */
  #play-canvas { touch-action: none; -webkit-user-select: none; user-select: none; }
}
/* The Decaf pill is also a button on touch — give it a hover/active hint. */
.play-hud-block[style*="cursor: pointer"]:hover { border-color: rgba(232,120,42,0.55); }
.play-hud-block[style*="cursor: pointer"]:active { transform: scale(0.97); }
.play-key kbd { font-family: inherit; }


/* ============================================================
   PAYMENT PICKER MODAL — multi-option pay sheet.
   Opens when any tier / pour button is clicked. Lets the
   visitor pick Stripe, Cash App, Venmo, or PayPal.
   ============================================================ */
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.pay-modal[hidden] { display: none; }
body.pay-modal-open { overflow: hidden; }

.pay-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,6,5,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pay-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background:
    linear-gradient(180deg,
      rgba(28,24,20,0.95) 0%,
      rgba(18,16,13,0.97) 50%,
      rgba(22,19,15,0.95) 100%);
  border: 1px solid rgba(232,120,42,0.34);
  border-radius: 8px;
  padding: 28px 28px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,235,200,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 24px 48px rgba(0,0,0,0.65);
  text-align: center;
}
.pay-modal-close {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 4px 8px;
}
.pay-modal-close:hover { color: var(--c-accent); }

.pay-modal-eyebrow {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 4px;
}
.pay-modal-title {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.pay-modal-amount {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  margin: 0 0 22px;
}

.pay-modal-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pay-modal-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  text-decoration: none;
  color: var(--c-text);
  font-family: var(--f-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.pay-modal-option:hover {
  background: rgba(232,120,42,0.10);
  border-color: rgba(232,120,42,0.5);
  transform: translateY(-1px);
}
.pay-modal-option-label {
  flex: 0 0 auto;
  text-align: left;
}
.pay-modal-option-sub {
  flex: 1;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-text-dim);
  text-align: left;
}
.pay-modal-option-arrow {
  color: var(--c-accent);
  font-size: 16px;
}
.pay-modal-stripe   { border-color: rgba(232,120,42,0.55); background: rgba(232,120,42,0.05); }
.pay-modal-stripe:hover { background: rgba(232,120,42,0.18); }
.pay-modal-empty {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-text-dim);
  padding: 16px 0;
  margin: 0;
}
.pay-modal-note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--c-text-dim);
  margin: 18px 0 0;
}

@media (max-width: 460px) {
  .pay-modal-card { padding: 22px 20px 18px; }
  .pay-modal-option { padding: 12px 14px; font-size: 12.5px; }
  .pay-modal-option-sub { display: none; }
}


/* ============================================================
   BREWS — Texas Fuel house pours. Three product cards in a grid
   with gas-pump-grade color coding: orange (leaded), red (heavy
   roast), blue (unleaded / decaf). Each card has a pump-handle
   accent up top for the fuel-station vibe.
   ============================================================ */
.brews {
  position: relative;
  padding: 100px 24px;
  text-align: center;
}
.brews-title {
  font-family: 'Black Ops One', 'Anton', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 54px);
  color: var(--c-text);
  margin: 6px 0 14px;
  letter-spacing: 0.02em;
}
.brews-sub {
  max-width: 620px;
  margin: 0 auto 44px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  line-height: 1.55;
}
.brews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.brew {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 22px 28px;
  background: linear-gradient(180deg,
    rgba(17,16,14,0.85) 0%,
    rgba(10,8,7,0.95) 100%);
  border: 1px solid rgba(232,120,42,0.22);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,235,200,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 14px 30px rgba(0,0,0,0.45);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.brew:hover { transform: translateY(-3px); border-color: rgba(232,120,42,0.55); }

/* Grade indicator strip — top of the card, color-coded like a
   real gas pump nozzle (orange = leaded, red = heavy, blue = unleaded). */
.brew-pump {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 6px 6px 0 0;
}
.brew--leaded   .brew-pump { background: linear-gradient(90deg, #e8782a 0%, #ff8c3a 50%, #e8782a 100%); }
.brew--house    .brew-pump { background: linear-gradient(90deg, #6a6a6a 0%, #b8b8b8 50%, #6a6a6a 100%); }
.brew--cold     .brew-pump { background: linear-gradient(90deg, #4a78c8 0%, #6ac0ff 50%, #4a78c8 100%); }
.brew--unleaded .brew-pump { background: linear-gradient(90deg, #6a8a3a 0%, #a8d860 50%, #6a8a3a 100%); }

.brew-tag {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: 0 0 14px;
}
.brew--leaded   .brew-tag { color: #ff8c3a; }
.brew--house    .brew-tag { color: #c8c8c8; }
.brew--cold     .brew-tag { color: #6ac0ff; }
.brew--unleaded .brew-tag { color: #a8d860; }

.brew-name {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: 0.03em;
  color: var(--c-text);
  margin: 0 0 12px;
}
.brew-tagline {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 16px;
}
.brew--house    .brew-tagline { color: #d0d0d0; }
.brew--cold     .brew-tagline { color: #8ad4ff; }
.brew--unleaded .brew-tagline { color: #b8e078; }
.brew-body {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--c-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 28ch;
}

.brews-soon-heading {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-align: center;
  margin: 24px 0 22px;
  padding: 8px 0;
  border-top: 1px solid rgba(232,120,42,0.18);
  border-bottom: 1px solid rgba(232,120,42,0.18);
}
.brew--soon { opacity: 0.92; }
.brew-soon-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--f-label);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text);
  background: rgba(232,120,42,0.22);
  border: 1px solid rgba(232,120,42,0.55);
  padding: 3px 8px;
  border-radius: 2px;
  z-index: 2;
}

@media (max-width: 760px) {
  .brews { padding: 64px 16px; }
  .brews-grid { gap: 16px; }
  .brew { padding: 28px 18px 22px; }
}


/* Music toggle inside the game stage */
.play-mute {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(10,8,7,0.78);
  border: 1px solid rgba(232,120,42,0.5);
  color: var(--c-accent);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.play-mute:hover { background: rgba(232,120,42,0.16); color: #fff; }
.play-mute.is-off { color: var(--c-text-dim); border-color: var(--c-border-strong); }

/* Fullscreen toggle — sits left of the music toggle inside the stage */
.play-fs {
  position: absolute;
  top: 10px;
  right: 56px;       /* sits to the LEFT of .play-mute */
  z-index: 8;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(10,8,7,0.78);
  border: 1px solid rgba(232,120,42,0.5);
  color: var(--c-accent);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.play-fs:hover { background: rgba(232,120,42,0.16); color: #fff; transform: scale(1.05); }
.play-fs span { display: block; transform: translateY(-1px); }

/* While firing, kill pointer events on the FS + mute buttons so an
   accidental click in their direction doesn't toggle fullscreen
   mid-burst (the "suddenly minimizes" bug). Also dim them so the
   player sees they're inactive. */
.play-stage.is-firing .play-fs,
.play-stage.is-firing .play-mute {
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.12s ease;
}

/* Fullscreen state — the stage element itself goes fullscreen.
   Make the canvas fill the available space while preserving aspect. */
.play-stage:fullscreen,
.play-stage:-webkit-full-screen {
  background: #050403;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.play-stage:fullscreen #play-canvas,
.play-stage:-webkit-full-screen #play-canvas {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
}
.play-stage.is-fullscreen .play-overlay { z-index: 12; }

/* Mobile adaptation — bigger touch targets, more breathing room */
@media (max-width: 760px) {
  .play-fs, .play-mute {
    width: 42px; height: 42px;
    font-size: 20px;
  }
  .play-fs { right: 60px; }
}
@media (max-width: 480px) {
  .play-controls { padding: 0 6px; font-size: 9px; letter-spacing: 0.12em; }
  .play-hud-block { padding: 5px 6px; }
  .play-hud-label { font-size: 8.5px; letter-spacing: 0.14em; }
  .play-hud-val { font-size: clamp(14px, 4.6vw, 18px); }
}


/* ============================================================
   JOURNEY  — /journey/  2:40 cinematic pilgrimage
   ============================================================ */
.journey {
  min-height: calc(100vh - 60px);
  padding: 40px 16px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.journey-head {
  max-width: 900px;
  width: 100%;
  margin: 0 auto 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.journey-mark-wrap {
  display: block;
  margin: 0 auto 8px;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.journey-mark-wrap:hover { transform: translateY(-1px); }
.journey-mark {
  display: block;
  max-width: min(560px, 78vw);
  max-height: 12vh;
  margin: 0 auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}
.journey-title {
  font-family: 'Black Ops One', 'Anton', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin: 2px 0 8px;
  text-shadow: 0 0 24px rgba(232,120,42,0.35);
}
.journey-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--c-text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
  max-width: 720px;
}

.journey-stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: #050403;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
#journey-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #050403;
}

/* Scene caption — bottom-left chyron */
.journey-caption {
  position: absolute;
  bottom: 48px;
  left: 20px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.journey-caption.is-pulse { opacity: 1; }
.journey-caption-num {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  color: var(--c-accent);
  text-shadow: 0 0 18px rgba(232,120,42,0.6);
}
.journey-caption-text {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}

/* Sound toggle — pinned top-right of the stage. Two glyphs swap based
   on the .is-muted state set by journey.js. Stays clickable even after
   the start overlay disappears, so visitors can mute mid-scene. */
.journey-mute {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10,8,7,0.74);
  border: 1px solid rgba(232,120,42,0.4);
  border-radius: 999px;
  color: var(--c-text);
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.journey-mute:hover {
  background: rgba(232,120,42,0.16);
  border-color: var(--c-accent-hover);
  transform: translateY(-1px);
}
.journey-mute-on  { color: var(--c-accent); font-size: 14px; display: inline; }
.journey-mute-off { color: var(--c-accent); font-size: 14px; display: none; }
.journey-mute.is-muted .journey-mute-on  { display: none; }
.journey-mute.is-muted .journey-mute-off { display: inline; }
.journey-mute.is-muted { border-color: rgba(255,120,80,0.5); }

/* Progress bar across the bottom */
.journey-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}
.journey-progress-bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-accent) 0%, #ffd28a 100%);
  box-shadow: 0 0 12px rgba(232,120,42,0.7);
  transition: width 0.18s linear;
}
.journey-progress-time {
  margin-left: auto;
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* Start / end overlay */
.journey-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,8,7,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.4s ease;
  z-index: 5;
}
.journey-overlay.hidden { opacity: 0; pointer-events: none; }
.journey-overlay-inner {
  text-align: center;
  max-width: 540px;
  padding: 36px 32px;
}
.journey-overlay h2 {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: 0.04em;
  color: var(--c-accent);
  margin: 0 0 16px;
  text-shadow: 0 0 26px rgba(232,120,42,0.45);
}
.journey-overlay p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text);
  margin: 0 0 26px;
  line-height: 1.5;
}
.journey-btn {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 24px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 4px;
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.journey-btn:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .journey { padding: 32px 8px 40px; }
  .journey-mark { max-height: 9vh; }
  .journey-caption { bottom: 36px; left: 12px; gap: 8px; }
  .journey-caption-num { font-size: 26px; }
  .journey-caption-text { font-size: 11px; letter-spacing: 0.14em; }
  .journey-progress { height: 18px; padding: 0 8px; }
  .journey-progress-time { font-size: 9.5px; }
  .journey-overlay-inner { padding: 24px 18px; }
}


/* ============================================================
   FEATURED · IGNITION strip on the home page. Wide poster card
   that previews the cinematic and drops the visitor into it with
   one click. Mother-Bean halo + drifting stars on the left;
   title + play CTA on the right.
   ============================================================ */
.ignition-feature {
  padding: 56px 24px 64px;
  display: flex;
  justify-content: center;
}
.ignition-feature-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  width: 100%;
  max-width: 1100px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, #0e0c1a 0%, #1a1004 100%);
  border: 1px solid rgba(232,120,42,0.32);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,235,200,0.05), inset 0 -1px 0 rgba(0,0,0,0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ignition-feature-card:hover { transform: translateY(-3px); border-color: rgba(232,120,42,0.65); box-shadow: 0 40px 80px rgba(0,0,0,0.65), 0 0 60px rgba(232,120,42,0.12); }
.ignition-feature-poster { position: relative; min-height: 280px; background: radial-gradient(ellipse at 50% 60%, rgba(255,180,80,0.10) 0%, rgba(232,120,42,0) 60%), linear-gradient(180deg, #050108 0%, #1a0e08 100%); overflow: hidden; }
.ignition-feature-halo { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; transform: translate(-50%, -50%); background: radial-gradient(circle at center, rgba(255,220,140,0.55) 0%, rgba(255,140,40,0.40) 25%, rgba(232,120,42,0.18) 50%, rgba(120,30,5,0) 75%); filter: blur(8px); animation: ignition-feature-breath 4.5s ease-in-out infinite; }
.ignition-feature-bean { position: absolute; left: 50%; top: 50%; width: 120px; height: 84px; transform: translate(-50%, -50%); background: radial-gradient(ellipse at 35% 35%, #c87a32 0%, #7a3a14 45%, #3a1a0a 80%, #1a0a04 100%); border-radius: 50% / 60%; box-shadow: inset 0 0 12px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,200,120,0.45), 0 0 22px rgba(255,140,50,0.55); }
.ignition-feature-bean::before { content: ''; position: absolute; left: 50%; top: 8%; width: 3px; height: 84%; background: linear-gradient(180deg, rgba(255,180,80,0.9) 0%, rgba(255,220,140,0.95) 50%, rgba(255,180,80,0.9) 100%); border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 6px rgba(255,200,120,0.6); }
.ignition-feature-stars { position: absolute; inset: 0; pointer-events: none; }
.ifs { position: absolute; width: 1.5px; height: 1.5px; background: rgba(255,255,240,0.65); border-radius: 50%; box-shadow: 0 0 4px rgba(255,255,240,0.5); }
.ifs:nth-child(odd) { background: rgba(255,255,240,0.85); }
.ifs:nth-child(1)  { left: 7%;  top: 12%; }
.ifs:nth-child(2)  { left: 22%; top: 8%; width: 2px; height: 2px; }
.ifs:nth-child(3)  { left: 84%; top: 18%; }
.ifs:nth-child(4)  { left: 51%; top: 6%; }
.ifs:nth-child(5)  { left: 36%; top: 24%; }
.ifs:nth-child(6)  { left: 71%; top: 11%; width: 2px; height: 2px; }
.ifs:nth-child(7)  { left: 14%; top: 32%; }
.ifs:nth-child(8)  { left: 92%; top: 38%; }
.ifs:nth-child(9)  { left: 47%; top: 42%; }
.ifs:nth-child(10) { left: 28%; top: 56%; }
.ifs:nth-child(11) { left: 64%; top: 28%; }
.ifs:nth-child(12) { left: 8%;  top: 78%; }
.ifs:nth-child(13) { left: 88%; top: 64%; width: 2px; height: 2px; }
.ifs:nth-child(14) { left: 42%; top: 88%; }
.ifs:nth-child(15) { left: 76%; top: 82%; }
.ifs:nth-child(16) { left: 18%; top: 91%; }
.ifs:nth-child(17) { left: 57%; top: 72%; }
.ifs:nth-child(18) { left: 30%; top: 70%; }
.ifs:nth-child(19) { left: 95%; top: 22%; }
.ifs:nth-child(20) { left: 4%;  top: 48%; }
.ifs:nth-child(n+21) { display: none; }
@keyframes ignition-feature-breath { 0%,100% { transform: translate(-50%, -50%) scale(1.00); opacity: 0.88; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1.00; } }
@media (prefers-reduced-motion: reduce) { .ignition-feature-halo { animation: none; } }
.ignition-feature-text { padding: 38px 36px 36px; display: flex; flex-direction: column; justify-content: center; }
.ignition-feature-kicker { font-family: var(--f-label); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 12px; }
.ignition-feature-title { font-family: 'Black Ops One', 'Anton', system-ui, sans-serif; font-weight: 400; font-size: clamp(32px, 4.8vw, 56px); letter-spacing: 0.02em; color: var(--c-text); margin: 0 0 12px; text-shadow: 0 0 22px rgba(232,120,42,0.35); }
.ignition-feature-sub { font-family: var(--f-serif); font-style: italic; font-size: clamp(14px, 1.5vw, 18px); color: var(--c-text-muted); margin: 0 0 22px; line-height: 1.55; max-width: 38ch; }
.ignition-feature-cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 12px 22px; font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif; font-size: 16px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--c-bg); background: var(--c-accent); border: 1px solid var(--c-accent-hover); border-radius: 4px; transition: background 0.2s ease, transform 0.15s ease; }
.ignition-feature-card:hover .ignition-feature-cta { background: var(--c-accent-hover); transform: translateY(-1px); }
@media (max-width: 760px) {
  .ignition-feature { padding: 36px 12px 44px; }
  .ignition-feature-card { grid-template-columns: 1fr; }
  .ignition-feature-poster { min-height: 200px; }
  .ignition-feature-halo { width: 280px; height: 280px; }
  .ignition-feature-bean { width: 92px; height: 64px; }
  .ignition-feature-text { padding: 28px 22px; }
}


/* ============================================================
   HERO REVISION — direct headline + sub + dual CTAs + stamp.
   Replaces the old hero-tagline + hb-card stack.
   ============================================================ */
.hero-headline {
  font-family: 'Black Ops One', 'Anton', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--c-text);
  text-align: center;
  margin: 28px auto 16px;
  max-width: 18ch;
  text-shadow: 0 0 22px rgba(232,120,42,0.30);
}
.hero-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 21px);
  color: var(--c-text-muted);
  text-align: center;
  margin: 0 auto 28px;
  max-width: 52ch;
  line-height: 1.55;
  padding: 0 16px;
}
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 auto 22px;
}
.hero-cta {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(15px, 1.8vw, 19px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.hero-cta:hover { transform: translateY(-2px); }
.hero-cta--primary {
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  box-shadow: 0 14px 28px rgba(232,120,42,0.30);
}
.hero-cta--primary:hover { background: var(--c-accent-hover); }
.hero-cta--secondary {
  color: var(--c-text);
  background: transparent;
  border: 1px solid rgba(232,120,42,0.55);
}
.hero-cta--secondary:hover { border-color: var(--c-accent-hover); background: rgba(232,120,42,0.08); }
.hero-stamp {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  text-align: center;
  margin: 0;
  padding: 0 16px;
}
.hero-card,
.hero-tagline { display: none; }  /* old hero blocks retired */

/* ============================================================
   HOW IT WORKS — three numbered steps. Replaces the buried
   "do I have to pay?" question with a clear answer up front.
   ============================================================ */
.how {
  position: relative;
  padding: 80px 24px 90px;
  text-align: center;
}
.how-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: 0.03em;
  color: var(--c-text);
  margin: 8px 0 42px;
  text-shadow: 0 0 22px rgba(232,120,42,0.28);
}
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.how-step {
  padding: 28px 22px 24px;
  background: linear-gradient(180deg, rgba(17,16,14,0.7) 0%, rgba(10,8,7,0.9) 100%);
  border: 1px solid rgba(232,120,42,0.22);
  border-radius: 6px;
  text-align: center;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,235,200,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 14px 28px rgba(0,0,0,0.4);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.how-step:hover { transform: translateY(-3px); border-color: rgba(232,120,42,0.55); }
.how-num {
  display: inline-block;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.30em;
  color: var(--c-accent);
  margin-bottom: 10px;
}
.how-step-title {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 4px 0 10px;
}
.how-step-body {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--c-text-muted);
  line-height: 1.55;
  margin: 0;
}
.how-signoff {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--c-text-dim);
  text-align: center;
  margin: 42px auto 0;
  letter-spacing: 0.04em;
}

/* Station status badge */
.room-status {
  display: inline-block;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-accent);
  border: 1px solid rgba(232,120,42,0.55);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 auto 14px;
  background: rgba(232,120,42,0.08);
}


/* ============================================================
   DONATE CHIPS — simple amount-chip row that replaces the
   six-tier card grid. Tier names live as brand voice elsewhere
   on the site; the donation UI is just clean amounts.
   ============================================================ */
.donate-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px auto 18px;
  max-width: 720px;
}
.donate-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 18px 26px;
  font-family: 'Black Ops One', 'Anton', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.04em;
  color: var(--c-text);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(17,16,14,0.85) 0%, rgba(10,8,7,0.95) 100%);
  border: 1px solid rgba(232,120,42,0.45);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,235,200,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 12px 24px rgba(0,0,0,0.45);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.donate-chip:hover {
  transform: translateY(-2px);
  border-color: var(--c-accent-hover);
  background: linear-gradient(180deg, rgba(232,120,42,0.16) 0%, rgba(10,8,7,0.92) 100%);
  color: #fff;
}
.donate-chip.is-featured {
  border-color: var(--c-accent);
  color: var(--c-accent);
  box-shadow:
    inset 0 1px 0 rgba(255,235,200,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 14px 28px rgba(232,120,42,0.20),
    0 0 24px rgba(232,120,42,0.18);
}
.donate-chip.is-featured:hover {
  color: #fff;
  background: var(--c-accent);
  border-color: var(--c-accent-hover);
}
.donate-flavor {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 17px);
  color: var(--c-text-dim);
  text-align: center;
  margin: 18px auto 0;
  max-width: 52ch;
  letter-spacing: 0.02em;
}

/* Hide the legacy card grid if any old markup ever resurfaces. */
.pay .cards { display: none; }


/* ============================================================
   BRAND-NAV CTA — pinned right-side button: Fuel the Pump.
   ============================================================ */
.brand-nav-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 8px 16px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 3px;
  margin-left: auto;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 18px rgba(232,120,42,0.18);
}
.brand-nav-cta:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(232,120,42,0.35);
}
@media (max-width: 760px) {
  .brand-nav-cta { display: none; }
}


/* ============================================================
   HERO LOCKUP — THE / TEXAS FUEL / PUMP stacked.
   Treats "Texas Fuel" as the brand mark (logo image) and frames
   it with "THE" above + "PUMP" below so the title reads as
   "The Texas Fuel Pump" without merging into one wordmark.
   ============================================================ */
.hero--lockup {
  min-height: 100vh;
  padding: 90px 24px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.hero-lockup-top,
.hero-lockup-bottom {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 7vw, 80px);
  line-height: 0.92;
  letter-spacing: 0.06em;
  color: var(--c-text);
  text-shadow:
    0 1px 0 rgba(255,200,120,0.18),
    0 0 28px rgba(232,120,42,0.32);
}
.hero-lockup-top    { color: var(--c-text-muted); font-size: clamp(26px, 5vw, 56px); letter-spacing: 0.14em; }
.hero-lockup-bottom { color: var(--c-text);       font-size: clamp(46px, 9vw, 110px); letter-spacing: 0.05em; }
.hero-lockup-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 2px;
}
.hero-lockup-ember {
  position: absolute;
  inset: -30% -10% -30% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,180,80,0.18) 0%, rgba(232,120,42,0.06) 45%, transparent 75%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
  animation: ember-breath 6s ease-in-out infinite;
}
.hero-lockup-mark {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: min(78vw, 760px);
  height: clamp(60px, 11vw, 130px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}
.hero-eyebrow {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 18px;
}


/* ============================================================
   WHAT IS THE PUMP? — concept overview.
   ============================================================ */
.what {
  padding: 80px 0 60px;
  text-align: center;
}
.what-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 50px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 26px;
  max-width: 22ch;
  line-height: 1.05;
}
.what-lead {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.55;
  color: var(--c-text);
  margin: 0 auto 22px;
  max-width: 58ch;
}
.what-tail {
  font-family: var(--f-label);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 auto;
  max-width: 48ch;
}


/* ============================================================
   HOW TO PULL A CUP — 7-step grid (auto-fits to 2 or 3 columns).
   ============================================================ */
.how-steps--seven {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  margin: 36px 0 28px;
  list-style: none;
}


/* ============================================================
   THE PUMP MAP — labeled diagram cards.
   ============================================================ */
.map {
  padding: 80px 0 60px;
  text-align: center;
}
.map-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 50px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 12px;
  max-width: 24ch;
  line-height: 1.05;
}
.map-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  margin: 0 auto 36px;
  max-width: 52ch;
}
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  list-style: none;
}
.map-node {
  position: relative;
  padding: 22px 22px 22px 56px;
  background: linear-gradient(180deg, rgba(20,16,12,0.55) 0%, rgba(10,8,7,0.55) 100%);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  text-align: left;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.map-node:hover {
  border-color: rgba(232,120,42,0.45);
  transform: translateY(-2px);
}
.map-node-pin {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3a28, #1a120a);
  border: 1px solid rgba(232,120,42,0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.map-node-pin-dot {
  width: 7px;
  height: 7px;
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--c-accent-hover);
}
.map-node-title {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 6px;
}
.map-node-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0;
}


/* ============================================================
   KEEP THE PUMP READY — soft upkeep list.
   ============================================================ */
.keep {
  padding: 80px 0 60px;
  text-align: center;
}
.keep-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 46px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 12px;
  max-width: 24ch;
  line-height: 1.05;
}
.keep-intro {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  margin: 0 auto 32px;
  max-width: 52ch;
}
.keep-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  list-style: none;
  margin-bottom: 32px;
}
.keep-item {
  padding: 20px 22px;
  background: rgba(20,16,12,0.35);
  border-left: 2px solid var(--c-accent);
  border-radius: 2px;
  text-align: left;
}
.keep-item-title {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 6px;
}
.keep-item-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0;
}
.keep-signoff {
  font-family: var(--f-label);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 auto;
  max-width: 48ch;
}


/* ============================================================
   FUEL THE PUMP — group lede above the donation chips.
   ============================================================ */
.pay-group-lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 21px);
  color: var(--c-text);
  text-align: center;
  margin: 8px auto 14px;
  max-width: 48ch;
}


/* ============================================================
   THE FUEL — Onyx + future house brews.
   ============================================================ */
.fuel {
  padding: 80px 0 60px;
  text-align: center;
}
.fuel-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 46px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 18px;
  max-width: 30ch;
  line-height: 1.1;
}
.fuel-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  margin: 0 auto 18px;
  max-width: 64ch;
  line-height: 1.55;
}
.fuel-tail {
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 auto 48px;
  max-width: 60ch;
}
.future-heading {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 24px 0 6px;
}
.future-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--c-text-dim);
  margin: 0 0 26px;
}


/* ============================================================
   THE RIG — machine-agnostic. Inherits machine styles where used.
   ============================================================ */
.rig {
  padding: 80px 0 60px;
  text-align: center;
}
.rig-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 46px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 26px;
  max-width: 24ch;
  line-height: 1.1;
}
.rig-photo {
  margin: 12px auto 28px;
  max-width: 480px;
}
.rig-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.6));
}
.rig-body {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  margin: 0 auto 28px;
  max-width: 58ch;
  line-height: 1.55;
}
.rig-specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin: 0 auto 22px;
  max-width: 640px;
}
.rig-specs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  background: rgba(20,16,12,0.45);
  border: 1px solid var(--c-border);
  border-radius: 2px;
}
.rig-current {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: 14px auto 0;
  max-width: 48ch;
}


/* ============================================================
   TAPE DECK — homepage feature card + hub-page grid.
   ============================================================ */
.tapedeck-feature {
  padding: 60px 24px 80px;
  display: flex;
  justify-content: center;
}
.tapedeck-feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  max-width: 1080px;
  background: linear-gradient(180deg, rgba(20,16,12,0.55), rgba(10,8,7,0.85));
  border: 1px solid var(--c-border);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tapedeck-feature-card:hover { transform: translateY(-3px); border-color: rgba(232,120,42,0.55); box-shadow: 0 40px 80px rgba(0,0,0,0.6); }
.tapedeck-feature-poster {
  position: relative;
  min-height: 240px;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,180,80,0.10) 0%, transparent 60%), linear-gradient(180deg, #050108 0%, #1a0e08 100%);
  overflow: hidden;
}
.tapedeck-feature-halo {
  position: absolute; left: 50%; top: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(255,220,140,0.45) 0%, rgba(255,140,40,0.30) 25%, rgba(232,120,42,0.12) 55%, transparent 78%);
  filter: blur(10px);
  animation: ignition-feature-breath 5s ease-in-out infinite;
}
.tapedeck-feature-bean {
  position: absolute; left: 50%; top: 50%;
  width: 110px; height: 76px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 35% 35%, #c87a32 0%, #7a3a14 45%, #3a1a0a 80%);
  border-radius: 50% / 60%;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.55), 0 0 22px rgba(255,140,50,0.55);
}
.tapedeck-feature-stars { position: absolute; inset: 0; pointer-events: none; }
.tapedeck-feature-text { padding: 38px 36px; display: flex; flex-direction: column; justify-content: center; }
.tapedeck-feature-kicker { font-family: var(--f-label); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 12px; }
.tapedeck-feature-title { font-family: 'Black Ops One', 'Anton', system-ui, sans-serif; font-weight: 400; font-size: clamp(28px, 4vw, 46px); letter-spacing: 0.02em; color: var(--c-text); margin: 0 0 12px; }
.tapedeck-feature-sub { font-family: var(--f-serif); font-style: italic; font-size: clamp(14px, 1.5vw, 17px); color: var(--c-text-muted); margin: 0 0 22px; line-height: 1.55; max-width: 40ch; }
.tapedeck-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 12px 22px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 3px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.tapedeck-feature-card:hover .tapedeck-feature-cta { background: var(--c-accent-hover); transform: translateY(-1px); }
@media (max-width: 760px) {
  .tapedeck-feature-card { grid-template-columns: 1fr; }
  .tapedeck-feature-poster { min-height: 180px; }
}

/* Tape Deck hub page */
.tapedeck-hub {
  padding: 120px 0 80px;
  text-align: center;
}
.tapedeck-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 14px auto 14px;
  max-width: 22ch;
  line-height: 1.05;
}
.tapedeck-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 20px);
  color: var(--c-text-muted);
  margin: 0 auto 48px;
  max-width: 56ch;
  line-height: 1.55;
}
.tapedeck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-bottom: 56px;
}
.tapedeck-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20,16,12,0.55), rgba(10,8,7,0.85));
  border: 1px solid var(--c-border);
  border-radius: 3px;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tapedeck-card:hover {
  border-color: rgba(232,120,42,0.55);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
}
.tapedeck-card-poster {
  position: relative;
  height: 180px;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,180,80,0.10) 0%, transparent 60%), linear-gradient(180deg, #050108 0%, #1a0e08 100%);
  overflow: hidden;
}
.tapedeck-card-poster--tape {
  background: linear-gradient(180deg, #0a0807 0%, #1a1410 100%);
}
.tapedeck-card-poster--guzzler {
  background: linear-gradient(180deg, #050108 0%, #2a1408 100%);
}
.tapedeck-card-halo {
  position: absolute; left: 50%; top: 50%;
  width: 240px; height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(255,220,140,0.4) 0%, rgba(255,140,40,0.25) 30%, transparent 70%);
  filter: blur(10px);
  animation: ignition-feature-breath 5s ease-in-out infinite;
}
.tapedeck-card-bean {
  position: absolute; left: 50%; top: 50%;
  width: 90px; height: 62px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 35% 35%, #c87a32 0%, #7a3a14 45%, #3a1a0a 80%);
  border-radius: 50% / 60%;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.55), 0 0 16px rgba(255,140,50,0.45);
}
.tapedeck-card-vhs {
  position: absolute;
  left: 50%; top: 50%;
  width: 140px; height: 84px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #1a1410 0%, #050302 100%);
  border: 2px solid rgba(232,120,42,0.5);
  border-radius: 3px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.7), 0 0 22px rgba(232,120,42,0.25);
}
.tapedeck-card-vhs::before,
.tapedeck-card-vhs::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a1f15 0%, #0a0604 100%);
  border: 1px solid rgba(232,120,42,0.5);
}
.tapedeck-card-vhs::before { left: 22px; }
.tapedeck-card-vhs::after  { right: 22px; }
.tapedeck-card-arcade {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 80px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #050108 0%, #0a0408 100%);
  border: 2px solid rgba(232,120,42,0.55);
  border-radius: 3px;
  box-shadow: inset 0 0 18px rgba(232,120,42,0.45), 0 0 22px rgba(232,120,42,0.3);
}
.tapedeck-card-arcade::after {
  content: '◉';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--c-accent);
  text-shadow: 0 0 12px var(--c-accent-hover);
}
.tapedeck-card-body { padding: 24px 26px 26px; }
.tapedeck-card-kicker { font-family: var(--f-label); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 8px; }
.tapedeck-card-title { font-family: 'Black Ops One', 'Anton', system-ui, sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 0.02em; color: var(--c-text); margin: 0 0 10px; }
.tapedeck-card-blurb { font-family: var(--f-serif); font-style: italic; font-size: 14.5px; color: var(--c-text-muted); margin: 0 0 16px; line-height: 1.55; }
.tapedeck-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 3px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.tapedeck-card:hover .tapedeck-card-cta { background: var(--c-accent-hover); transform: translateY(-1px); }

.tapedeck-back {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}


/* ============================================================
   SUB-PAGE BACK ROW — retired per master brief. The header + footer
   handle navigation; the bottom-row card group was duplicating the
   header and the arrows implied a sequence that didn't exist.
   ============================================================ */
.subpage-back { display: none !important; }


/* ============================================================
   PLAY PAGE — eyebrow + subtitle additions for "Off Shift /
   The Guzzler Arcade" framing.
   ============================================================ */
.play-eyebrow {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 4px 0 6px;
}
.play-subtitle {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--c-text-muted);
  margin: 6px 0 0;
}


/* ============================================================
   HOLLER — request-type select.
   ============================================================ */
.field-select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-text);
  background: rgba(10,8,7,0.65);
  border: 1px solid var(--c-border);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-accent) 50%), linear-gradient(135deg, var(--c-accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field-select:focus { outline: none; border-color: var(--c-accent); }
.field-select option { background: var(--c-bg); color: var(--c-text); }

/* Hide legacy hero-card / hero-tagline / brand-nav-divider that the
   old templates referenced — the new lockup hero doesn't use them. */
.hero-card,
.hero-tagline,
.brand-nav-divider { display: none !important; }


/* ============================================================
   HERO — top-aligned, natural-height. No min-height: 100vh
   and no vertical centering — that's what was creating the
   black gap above the wordmark on first load.
   Order in DOM: eyebrow → lockup → H1 tagline → body → CTAs.
   ============================================================ */
.hero--top {
  padding: 28px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  position: relative;
}
@media (max-width: 760px) {
  .hero--top { padding: 20px 18px 44px; }
}
/* Legacy class kept for any old reference; matches the new layout. */
.hero--brand-product {
  padding: 40px 24px 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  position: relative;
}

/* Eyebrow that sits ABOVE the brand lockup. */
.hero-eyebrow-above {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 22px;
}

/* Lockup wrapper (was an H1; now a div so the actual H1 can be
   the headline, which is the proper page heading). */
.hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  line-height: 1;
}

/* The H1 tagline — "Coffee built for the long haul." — clean
   modern display weight in the body family. The italic serif read
   as "fancy restaurant," not specialty coffee. */
.hero-headline {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: 6px auto 22px;
  max-width: 22ch;
}
@media (max-width: 760px) {
  .hero-headline { font-size: clamp(30px, 8.4vw, 42px); }
}
.hero-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 2px;
  margin-bottom: 14px;
}
.hero-brand-ember {
  position: absolute;
  inset: -30% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,180,80,0.18) 0%, rgba(232,120,42,0.06) 45%, transparent 75%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
  animation: ember-breath 6s ease-in-out infinite;
}
.hero-brand-mark {
  /* Sized for the tightly-cropped wordmark (13:1) so it doesn't blow
     out width-wise. Scaled to a sensible hero presence without
     dominating the rest of the first viewport. */
  position: relative;
  z-index: 1;
  width: auto;
  max-width: min(70vw, 580px);
  height: clamp(40px, 5.6vw, 64px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}
/* Unified TEXAS FUEL + COFFEE COMPANY lockup from the REVISED.ai
   file. Width-driven (not height) so both designed lines render
   at the right proportions and the COFFEE COMPANY sub-line stays
   legible. Overrides the .hero-brand-mark height. */
.hero-brand-mark--full {
  width: clamp(280px, 56vw, 640px);
  max-width: min(86vw, 720px);
  height: auto;
}
@media (max-width: 760px) {
  .hero-brand-mark--full { width: min(86vw, 460px); }
}
/* "Coffee Company" label that sits under the hero TEXAS FUEL wordmark.
   Clean edge, no text-shadow halo. Proportioned to read as a balanced
   subtitle, not a tiny afterthought. */
.hero-coffee-label {
  display: block;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  line-height: 1;
  margin-top: 10px;
  align-self: center;
}
.hero-product {
  /* Retained for fallback / any standalone use. The active hero now uses
     .hero-station inside .hero-station-lockup. */
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 12vw, 144px);
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--c-text);
  margin: 6px 0 18px;
  text-shadow: 0 1px 0 rgba(255,200,120,0.18), 0 0 28px rgba(232,120,42,0.30);
}

/* ============================================================
   TEXAS FUEL STATION LOCKUP — wordmark image + matching-font
   "STATION" text. Reads as one brand mark.
   ============================================================ */
.hero-station-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  /* H1 default font-size would inflate the wordmark wrapper line-box. */
  font-size: inherit;
  line-height: 1;
}
.hero-station-lockup .hero-brand {
  margin-bottom: 0;
}
.hero-station {
  /* Match the brushed-metal wordmark with Black Ops One + a vertical
     metal gradient on the text + warm ember underglow. Sized so the
     full hero (lockup → tagline → body → CTAs) fits inside one
     standard viewport on a QR-code first load. */
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 9vw, 110px);
  letter-spacing: 0.04em;
  line-height: 0.88;
  text-transform: uppercase;
  /* Metal gradient: highlight → bright crown → mid shadow → warm body
     → deep shadow. Same family of greys/warm-greys as the wordmark. */
  background: linear-gradient(180deg,
    #d4c8b5 0%,
    #f4ebd9 18%,
    #8a7960 38%,
    #c0a880 55%,
    #5a4a36 80%,
    #2e2418 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Stamped edge + ember glow underneath. */
  filter:
    drop-shadow(0 1px 0 rgba(255,200,120,0.25))
    drop-shadow(0 3px 0 rgba(0,0,0,0.55))
    drop-shadow(0 8px 22px rgba(0,0,0,0.55))
    drop-shadow(0 0 28px rgba(232,120,42,0.25));
}
.hero--brand-product .hero-eyebrow {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 12px;
}
.hero--brand-product .hero-headline {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--c-text);
  margin: 0 auto 14px;
  max-width: 32ch;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.hero-body {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0 auto 22px;
  max-width: 56ch;
}


/* ============================================================
   HONOR TANK STRIP — compact support callout under the hero.
   ============================================================ */
.honor-strip {
  padding: 28px 0 32px;
  border-top: 1px solid rgba(232,120,42,0.20);
  border-bottom: 1px solid rgba(232,120,42,0.20);
  background: linear-gradient(180deg, rgba(20,16,12,0.55), rgba(10,8,7,0.55));
}
.honor-strip-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 28px;
}
.honor-strip-text { flex: 1 1 320px; }
.honor-strip-kicker {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 6px;
}
.honor-strip-title {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 6px;
}
.honor-strip-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--c-text-muted);
  margin: 0;
  max-width: 60ch;
}
.honor-strip-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 14px 26px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 16px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 3px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.honor-strip-cta:hover { background: var(--c-accent-hover); transform: translateY(-1px); }


/* ============================================================
   SUBPAGE HERO — shared across /pump /manual /fuel /station etc.
   ============================================================ */
.subpage-hero {
  padding: 96px 24px 36px;
  text-align: center;
}
.subpage-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 88px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 14px auto 18px;
  max-width: 22ch;
  line-height: 1.02;
  text-shadow: 0 0 28px rgba(232,120,42,0.25);
}
.subpage-lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--c-text);
  margin: 0 auto 16px;
  max-width: 58ch;
  line-height: 1.5;
}
.subpage-body {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--c-text-muted);
  margin: 0 auto 16px;
  max-width: 60ch;
  line-height: 1.55;
}
.subpage-stamp {
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 auto 14px;
  max-width: 50ch;
}
.subpage-split {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  margin: 0 auto 14px;
  max-width: 52ch;
  line-height: 1.5;
}
.what-cta-wrap {
  text-align: center;
  margin: 24px 0 8px;
}


/* ============================================================
   DONATE CHIPS — named tier variant (Idle / Cruise / High Octane /
   Gas Guzzler / Fill the Tank). Tile-style chip with $ amount,
   tier name, and a one-line blurb.
   ============================================================ */
.donate-chips--named {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: stretch;
  list-style: none;
  margin: 28px 0 18px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.donate-chips--named .donate-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 18px 20px;
  text-align: left;
  height: 100%;
  border-radius: 3px;
}
.donate-chip-amount {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  line-height: 1;
}
.donate-chip-name {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.donate-chip-blurb {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-text-muted);
}
.donate-chips--named .donate-chip.is-featured {
  background: linear-gradient(180deg, rgba(232,120,42,0.10), rgba(232,120,42,0.04));
  border-color: rgba(232,120,42,0.65);
}
.donate-chips--named .donate-chip:hover {
  border-color: rgba(232,120,42,0.7);
  transform: translateY(-2px);
}


/* ============================================================
   BREW CARD — bag photo is the hero of the card. Card padding
   resets to 0; photo wrap goes edge-to-edge with a per-grade
   glow; tag/name/tagline/body live in a tighter body block
   below the photo.
   ============================================================ */
.brew {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  align-items: stretch;
  overflow: hidden;
}
.brew-photo-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Tall enough that a 900×1039 bag mockup reads at a real product
     scale rather than a tiny thumbnail. */
  aspect-ratio: 3 / 4;
  min-height: 320px;
  background: radial-gradient(ellipse at 50% 100%, rgba(20,16,12,0.95) 0%, rgba(8,6,4,0.95) 70%);
  border-bottom: 1px solid rgba(232,120,42,0.18);
  overflow: hidden;
}
/* Per-grade glow behind the bag — color-coded to match the brew. */
.brew-photo-wrap::before {
  content: '';
  position: absolute;
  left: 50%; top: 55%;
  width: 120%; height: 90%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--brew-glow, rgba(232,120,42,0.35)) 0%, transparent 60%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
.brew--leaded   { --brew-glow: rgba(232,120,42,0.42); }
.brew--house    { --brew-glow: rgba(180,180,180,0.18); }
.brew--cold     { --brew-glow: rgba(74,120,200,0.40); }
.brew--unleaded { --brew-glow: rgba(140,180,80,0.38); }
.brew-photo {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 96%;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,0.65))
    drop-shadow(0 4px 10px rgba(0,0,0,0.55));
  transition: transform 0.35s ease;
}
.brew:hover .brew-photo {
  transform: translateY(-4px);
}
/* Coming Soon / In Development badge — sits in the top-right of
   the photo well so it reads as a product label, not a footer. */
.brew-soon-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  padding: 5px 10px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 2px;
}
/* Grade strip lives across the seam between the photo and body. */
.brew-photo-wrap + .brew-body-wrap > .brew-pump {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0;
  pointer-events: none;
}
.brew-body-wrap {
  position: relative;
  padding: 22px 22px 26px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(180deg, rgba(15,13,11,0.95) 0%, rgba(10,8,7,0.98) 100%);
}
.brew-body-wrap .brew-tag {
  margin: 4px 0 4px;
}
.brew-body-wrap .brew-name {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 30px);
}
.brew-body-wrap .brew-tagline {
  margin: 0 0 6px;
  font-size: clamp(12px, 1.2vw, 14px);
}
.brew-body-wrap .brew-body {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(13px, 1.3vw, 14.5px);
  line-height: 1.55;
}

/* Photo Pending badge — only shows when the per-brew bag image
   filename is missing (data-photo="") or the file 404s and the
   onerror handler swaps to monogram + adds .brew-photo--missing. */
.brew-photo-pending {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 5px 11px;
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245,235,217,0.85);
  background: rgba(232,120,42,0.18);
  border: 1px solid rgba(232,120,42,0.55);
  border-radius: 2px;
  display: none;
}
.brew-photo-wrap[data-photo=""] .brew-photo-pending,
.brew-photo-wrap.brew-photo--missing .brew-photo-pending { display: inline-block; }
.brew-photo-wrap[data-photo=""] .brew-photo,
.brew-photo-wrap.brew-photo--missing .brew-photo {
  max-width: 45%;
  max-height: 60%;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .brew-photo-wrap { min-height: 280px; aspect-ratio: 4 / 5; }
  .brew-photo { max-width: 78%; max-height: 92%; }
}


/* ============================================================
   CLEAN CUP STANDARD section.
   ============================================================ */
.clean {
  padding: 80px 0 60px;
  text-align: center;
}
.clean-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 46px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 18px;
  max-width: 22ch;
  line-height: 1.1;
}
.clean-intro {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--c-text);
  margin: 0 auto 18px;
  max-width: 52ch;
}
.clean-body {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--c-text-muted);
  margin: 0 auto 26px;
  max-width: 62ch;
  line-height: 1.55;
}
.clean-promise-head {
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 auto 16px;
}
.clean-promise {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.clean-promise li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14.5px;
  color: var(--c-text);
  background: rgba(20,16,12,0.35);
  border-left: 2px solid var(--c-accent);
  border-radius: 2px;
}
.clean-promise-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px; margin-top: 7px;
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c-accent-hover);
}


/* ============================================================
   UNLEADED section — decaf direction.
   ============================================================ */
.unleaded {
  padding: 60px 0 80px;
  text-align: center;
}
.unleaded-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 18px;
  max-width: 24ch;
  line-height: 1.1;
}
.unleaded-body {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--c-text-muted);
  margin: 0 auto 18px;
  max-width: 62ch;
  line-height: 1.55;
}
.unleaded-stamp {
  font-family: var(--f-label);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 auto;
  max-width: 48ch;
}

/* Future heading variant when not preceded by a fuel-section intro */
.future-heading--solo {
  font-size: clamp(28px, 4.2vw, 44px);
  margin-top: 0;
}


/* ============================================================
   STATION NOTES "what support covers" — list variant.
   ============================================================ */
.keep-list--covers .keep-item {
  border-left-color: var(--c-accent);
}


/* ============================================================
   FOOTER — brand anchor line.
   ============================================================ */
.foot-anchor {
  margin-top: 14px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c-text-dim);
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   MOBILE SUPPORT PILL — small sticky button on phones.
   ============================================================ */
.mobile-support-pill {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 14px));
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  z-index: 60;
  padding: 9px 16px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 18px rgba(232,120,42,0.35);
  display: none;
}
@media (max-width: 760px) {
  .mobile-support-pill { display: inline-flex; }
  /* Bean hint sits center-bottom; pull it left so it doesn't sit under
     the support pill in the corner. */
  .bean-hint { right: auto; left: 14px; transform: none; }
}


/* ============================================================
   HERO POLISH — small "place" line under the wordmark+H1 lockup
   ("The Texas Fuel Pump · Station No. 001").
   ============================================================ */
.hero-under-lockup {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: -4px 0 18px;
}

/* "Texas Fuel Coffee Company" descriptor — sits directly under the
   STATION lockup so a first-time visitor reads coffee company from
   the jump. Larger than the nav descriptor (this is the headline of
   the page); smaller than the lockup so it never competes. */
.hero-descriptor {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(13px, 1.45vw, 18px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 10px 0 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
/* Clean-coffee tagline under the descriptor. Serif italic so it
   reads as the operator's voice, not a marketing line. The fuel
   metaphor does the heavy lifting. */
.hero-tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 21px);
  letter-spacing: 0.005em;
  color: var(--c-accent);
  margin: 0 0 12px;
  text-shadow: 0 0 14px rgba(232,120,42,0.30);
}
@media (max-width: 760px) {
  .hero-descriptor { font-size: 12px; letter-spacing: 0.24em; margin: 8px 0 4px; }
  .hero-tagline    { font-size: 14px; margin-bottom: 10px; }
}


/* ============================================================
   CLEAN STRIP — single-line operator value-prop. Sits between
   the hero / honor tank and the "What is" section. Small but
   prominent — feels like the operator stamping a quality line
   under the showroom shot.
   ============================================================ */
.clean-strip {
  padding: 24px 24px 32px;
  text-align: center;
}
.clean-strip-line {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 28px);
  color: var(--c-text);
  letter-spacing: 0.005em;
  margin: 0 auto 8px;
  max-width: 720px;
  text-shadow: 0 0 18px rgba(232,120,42,0.18);
}
.clean-strip-sub {
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.55;
}


/* ============================================================
   CLEAN PILLARS — three short pillars expanding the clean-coffee
   positioning. Operator-pride card layout: small ember mark, all-
   caps title, one sentence of body. Three across on desktop, stacks
   on phone. No icons-as-decoration — the ember mark is the only
   shape, intentional minimalism so the COPY does the talking.
   ============================================================ */
.clean-pillars {
  padding: 56px 24px 72px;
  text-align: center;
}
.clean-pillars-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--c-text);
  letter-spacing: -0.005em;
  margin: 0 0 16px;
}
.clean-pillars-sub {
  font-family: var(--f-body);
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--c-text-muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 48px;
}
.clean-pillars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.clean-pillar {
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--c-border-strong);
  border-top: 1px solid rgba(232,120,42,0.45);
  border-radius: 4px;
  padding: 30px 24px 26px;
  text-align: left;
  position: relative;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.clean-pillar:hover {
  border-color: rgba(232,120,42,0.40);
  background: rgba(255,255,255,0.028);
  transform: translateY(-2px);
}
.clean-pillar-mark {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 16px rgba(232,120,42,0.65);
  margin-bottom: 16px;
}
.clean-pillar-title {
  font-family: 'Black Ops One', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin: 0 0 10px;
}
.clean-pillar-body {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
}
.clean-pillars-signoff {
  font-family: var(--f-label);
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: 36px 0 0;
}
@media (max-width: 760px) {
  .clean-pillars { padding: 40px 16px 56px; }
  .clean-pillars-list { grid-template-columns: 1fr; gap: 14px; }
  .clean-pillar { padding: 24px 20px 22px; }
}


/* ============================================================
   TIER RAIL — song-based support selector. One row of equal-
   width chips that toggle selected state, then ONE Add Fuel
   button below. No six independent submit buttons.
   ============================================================ */
.tier-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 18px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.tier-chip {
  appearance: none;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px 16px;
  background: rgba(20,16,12,0.55);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  color: var(--c-text);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  min-height: 86px;
}
.tier-chip:hover { border-color: rgba(232,120,42,0.55); }
.tier-chip:focus-visible {
  outline: 2px solid #FFC28F;
  outline-offset: 2px;
}
.tier-chip.is-selected {
  background: linear-gradient(180deg, rgba(232,120,42,0.18), rgba(232,120,42,0.08));
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px rgba(232,120,42,0.25), 0 8px 20px rgba(0,0,0,0.4);
}
.tier-chip-name {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  line-height: 1;
}
.tier-chip-amount {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier-summary {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--c-text-muted);
  text-align: center;
  margin: 8px 0 18px;
  min-height: 1.4em;
}
.tier-submit {
  appearance: none;
  cursor: pointer;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(16px, 1.8vw, 18px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 6px;
  padding: 16px 36px;
  display: inline-block;
  margin: 0 auto;
  min-width: 220px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 24px rgba(232,120,42,0.30);
  transition: background 0.15s ease, transform 0.12s ease;
}
.tier-submit:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}
.tier-submit:focus-visible {
  outline: 2px solid #FFC28F;
  outline-offset: 3px;
}
.tier-helper {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: 12px 0 0;
  text-align: center;
}
@media (max-width: 720px) {
  .tier-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-chip:last-child { grid-column: 1 / -1; }
}
/* Hide the old chip styles where they used to live on this page. */
.donate-chips--named { display: none; }


/* ============================================================
   /fuel-up/ — dedicated QR landing. Minimal, payment-first.
   ============================================================ */
.fuel-up {
  padding: 48px 18px 80px;
  text-align: center;
}
@media (max-width: 760px) {
  .fuel-up { padding: 28px 16px 56px; }
}
.fuel-up-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto 24px;
  line-height: 1;
}
.fuel-up-mark {
  display: block;
  width: auto;
  max-width: min(78vw, 520px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}
.fuel-up-co {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text);
}
.fuel-up-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 56px);
  color: var(--c-text);
  margin: 8px 0 14px;
  line-height: 1.05;
}
.fuel-up-body {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0 auto 22px;
  max-width: 48ch;
}
.fuel-up-prompt {
  font-family: var(--f-label);
  font-size: 11.5px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 auto 6px;
}
.fuel-up-links {
  margin: 36px 0 0;
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.fuel-up-links a {
  color: var(--c-text-muted);
  border-bottom: 1px solid rgba(232,120,42,0.35);
  padding-bottom: 1px;
  margin: 0 6px;
}
.fuel-up-links a:hover { color: var(--c-accent); border-color: var(--c-accent); }


/* ============================================================
   HERO DONATE CTA — central button for QR-code first load.
   Two-line button: clever brand label on top ("Top Off the
   Tank"), small optional/support clarifier underneath. Glows
   subtly so it reads as the primary action without shouting.
   ============================================================ */
.hero-cta--donate {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 30px;
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255,200,120,0.12) inset,
    0 8px 22px rgba(0,0,0,0.55),
    0 0 28px rgba(232,120,42,0.35);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.hero-cta--donate:hover {
  background: var(--c-accent-hover);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,200,120,0.18) inset,
    0 12px 28px rgba(0,0,0,0.6),
    0 0 36px rgba(232,120,42,0.55);
}
.hero-cta--donate .hero-cta-label {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: clamp(17px, 1.8vw, 21px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bg);
  line-height: 1;
}
.hero-cta--donate .hero-cta-sub {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(10,8,7,0.78);
  line-height: 1;
}


/* ============================================================
   HONOR TANK CARD — under-hero support callout. Gauge-style
   dashboard card with amount chips inline. Visible immediately,
   not a paywall.
   ============================================================ */
.honor-tank {
  padding: 36px 24px 28px;
}
.honor-tank-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 28px 24px;
  background: linear-gradient(180deg, rgba(20,16,12,0.78), rgba(8,6,4,0.78));
  border: 1px solid rgba(232,120,42,0.42);
  border-radius: 4px;
  box-shadow:
    0 24px 56px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,200,120,0.10),
    0 0 28px rgba(232,120,42,0.12);
}
/* Tiny gauge mark in the top-right corner so the card reads as a
   dashboard, not a banner. */
.honor-tank-card::before {
  content: '';
  position: absolute;
  top: 18px; right: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb070, #b85a1a 55%, #3a1a05 100%);
  box-shadow: 0 0 14px rgba(232,120,42,0.55);
}
/* "DONATION · HONOR SYSTEM · OPTIONAL" pill at the top — visually
   declares: this is a donation block, not a price grid. */
.honor-tank-badge {
  align-self: center;
  margin: -2px 0 0;
  padding: 5px 12px;
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(232,120,42,0.10);
  border: 1px solid rgba(232,120,42,0.45);
  border-radius: 999px;
}
.honor-tank-covers-label {
  font-family: var(--f-label);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-right: 4px;
}
.honor-tank-head { text-align: center; }
.honor-tank-kicker {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 6px;
}
.honor-tank-line {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin: 0 0 8px;
  line-height: 1.15;
}
.honor-tank-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--c-text-muted);
  margin: 0 auto;
  max-width: 56ch;
  line-height: 1.5;
}
.honor-tank-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.honor-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  text-align: center;
  background: rgba(20,16,12,0.55);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.15s ease, background 0.18s ease;
}
.honor-chip:hover {
  border-color: rgba(232,120,42,0.7);
  background: rgba(232,120,42,0.08);
  transform: translateY(-1px);
}
.honor-chip.is-featured {
  background: linear-gradient(180deg, rgba(232,120,42,0.14), rgba(232,120,42,0.04));
  border-color: rgba(232,120,42,0.65);
}
.honor-chip-amount {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  line-height: 1;
}
.honor-chip-name {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.honor-tank-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.honor-tank-covers {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: 0;
}
.honor-tank-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-accent);
  border: 1px solid var(--c-accent-hover);
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.honor-tank-cta:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .honor-tank-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .honor-chip:last-child { grid-column: 1 / -1; }
  .honor-tank-foot { justify-content: center; text-align: center; }
}


/* ============================================================
   FUEL PILLARS — 3 lead cards: Current Tank · House Fuels · Clean Cup.
   ============================================================ */
.fuel-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 32px 0 40px;
}
.fuel-pillar {
  position: relative;
  padding: 22px 22px 22px 60px;
  background: linear-gradient(180deg, rgba(20,16,12,0.55), rgba(10,8,7,0.55));
  border: 1px solid var(--c-border);
  border-radius: 3px;
  text-align: left;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.fuel-pillar:hover {
  border-color: rgba(232,120,42,0.45);
  transform: translateY(-2px);
}
.fuel-pillar-mark {
  position: absolute;
  left: 20px; top: 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3a28, #1a120a);
  border: 1px solid rgba(232,120,42,0.5);
}
.fuel-pillar-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px; height: 7px;
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--c-accent-hover);
}
.fuel-pillar-label {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 6px;
}
.fuel-pillar-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0;
}


/* ============================================================
   MAP CARD — small "Need the details?" link block (replaces the
   full Pump Map on the homepage).
   ============================================================ */
.map-card {
  padding: 24px 24px 0;
}
.map-card-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: rgba(20,16,12,0.45);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: 3px;
}
.map-card-text { flex: 1 1 280px; }
.map-card-kicker {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 4px;
}
.map-card-title {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: 0.06em;
  color: var(--c-text);
  margin: 0 0 4px;
}
.map-card-body {
  font-size: 14px;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.5;
}
.map-card-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 11px 22px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-text);
  border: 1px solid var(--c-accent);
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.map-card-cta:hover {
  background: rgba(232,120,42,0.12);
  border-color: var(--c-accent-hover);
}


/* ============================================================
   SHORT HOW STEPS / SHORT KEEP LIST — homepage grids.
   ============================================================ */
.how-steps--short {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 30px 0 26px;
  list-style: none;
}
.keep-list--short {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .keep-list--short { grid-template-columns: 1fr; }
}


/* ============================================================
   DONATE CHIPS — add the "Add Fuel →" action cue.
   ============================================================ */
.donate-chip-action {
  margin-top: auto;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.85;
  padding-top: 6px;
  border-top: 1px dashed rgba(232,120,42,0.25);
}
.donate-chip:hover .donate-chip-action { opacity: 1; }


/* ============================================================
   FOOTER CTA LINK — the support link in the footer stands out.
   ============================================================ */
.foot-nav-link--cta {
  color: var(--c-accent);
}
.foot-nav-link--cta:hover { color: var(--c-accent-hover); }


/* Honor-system blocks are no longer rendered on the homepage. Keep
   styles dormant in case /support/ still references them. */
.honor-strip,
.honor-tank,
.honor-tank-card { display: none !important; }


/* ============================================================
   NAV BRAND-MARK DESCRIPTOR — "Coffee Co." line pinned under the
   wordmark / monogram so anyone landing reads it instantly.
   ============================================================ */
.brand-mark-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}
.brand-mark-descriptor {
  display: block;
  font-family: var(--f-label);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.brand-mark-descriptor-full  { display: inline; }
.brand-mark-descriptor-short { display: none; }
@media (max-width: 760px) {
  .brand-mark-stack { align-items: center; }
  .brand-mark-descriptor { font-size: 8.5px; letter-spacing: 0.20em; }
  .brand-mark-descriptor-full  { display: none; }
  .brand-mark-descriptor-short { display: inline; }
}


/* ============================================================
   HERO — Coffee Co. descriptor + tagline directly under the
   STATION lockup. Reads in three seconds: "Texas Fuel Coffee
   Company — clean fuel, nothing in the tank but coffee."
   ============================================================ */
.hero-coffee-co {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 18px 0 6px;
}
.hero-coffee-tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--c-text-muted);
  margin: 0 0 16px;
  max-width: 38ch;
}


/* ============================================================
   WHAT WE DO — 3-card grid on homepage. Clean, short.
   ============================================================ */
.what-we-do {
  padding: 72px 0 60px;
  text-align: center;
}
.what-we-do-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 28px;
  max-width: 24ch;
  line-height: 1.05;
}
.what-we-do-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  list-style: none;
}
/* 5-column variant for The Texas Fuel Standard. Falls back to 2-col
   on tablets and 1-col on phones. */
.what-we-do-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  .what-we-do-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .what-we-do-grid--five { grid-template-columns: 1fr; }
}


/* Hero proof line — small uppercase fact line beneath the body. */
.hero-proof {
  font-family: var(--f-label);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 14px auto 18px;
  max-width: 64ch;
}

/* ============================================================
   PAY MODAL — loading / error / success states. Driven by
   .is-loading / .is-error / .is-success on .pay-modal in pump.js.
   ============================================================ */
.pay-modal.is-loading .pay-modal-options::before {
  content: '';
  display: block;
  margin: 24px auto;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(232,120,42,0.25);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin-pay 0.9s linear infinite;
}
@keyframes spin-pay { to { transform: rotate(360deg); } }
.pay-modal.is-error .pay-modal-options,
.pay-modal.is-error .pay-modal-empty {
  color: var(--c-text);
  border-left: 2px solid var(--c-accent);
  padding-left: 14px;
  background: rgba(232,120,42,0.08);
}
.pay-modal.is-success .pay-modal-title::before {
  content: '✓ ';
  color: #7ed26b;
}


/* House brews footnote — single section-level note under the grid. */
.future-footnote {
  margin: 28px auto 0;
  text-align: center;
  font-family: var(--f-body);
  font-size: 13px;
  font-style: italic;
  color: var(--c-text-dim);
  max-width: 48ch;
}


/* ============================================================
   LOCAL NAV — section anchor tabs that sit directly beneath a
   page's hero (Coffee + Station). NOT part of the global nav.
   Quiet, hairline, scroll-snap on mobile.
   ============================================================ */
.local-nav {
  padding: 14px 0 6px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: rgba(8,7,6,0.55);
  margin-bottom: 8px;
}
.local-nav-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
}
.local-nav a {
  display: inline-block;
  padding: 8px 4px;
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.local-nav a:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}
@media (max-width: 720px) {
  .local-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 0 14px;
  }
  .local-nav-inner::-webkit-scrollbar { display: none; }
  .local-nav a { font-size: 11px; }
}


/* ============================================================
   Nav readability bump per brief — looser font, less aggressive
   tracking, medium weight, slightly larger.
   ============================================================ */
.brand-nav-link {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .brand-nav-link { font-size: 12px; letter-spacing: 0.10em; }
}
.what-we-do-card {
  padding: 26px 24px 24px;
  background: linear-gradient(180deg, rgba(20,16,12,0.55), rgba(10,8,7,0.55));
  border: 1px solid var(--c-border);
  border-radius: 3px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.what-we-do-card:hover {
  border-color: rgba(232,120,42,0.50);
  transform: translateY(-2px);
}
.what-we-do-card-title {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0;
}
.what-we-do-card-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
}
.what-we-do-card-cta {
  margin-top: auto;
  padding-top: 6px;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.what-we-do-card-cta:hover { color: var(--c-accent-hover); }


/* ============================================================
   DONATE STRIP — homepage donation section. Reads as a CTA,
   not a price grid.
   ============================================================ */
.donate-strip {
  padding: 72px 0 60px;
  text-align: center;
}
.donate-strip-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 50px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 12px;
  max-width: 24ch;
  line-height: 1.05;
}
.donate-strip-lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--c-text);
  margin: 0 auto 14px;
  max-width: 52ch;
}
.donate-strip-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--c-text-muted);
  margin: 0 auto 22px;
  max-width: 60ch;
  line-height: 1.55;
}


/* ============================================================
   CONTACT STRIP — short CTA section that points to /contact/.
   ============================================================ */
.contact-strip {
  padding: 72px 0 60px;
  text-align: center;
}
.contact-strip-title {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 18px auto 14px;
  max-width: 24ch;
  line-height: 1.05;
}
.contact-strip-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-text-muted);
  margin: 0 auto 16px;
  max-width: 56ch;
}


/* ============================================================
   FOOTER — descriptor + tagline matching the nav/hero identity.
   ============================================================ */
.foot-descriptor {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 12px 0 4px;
}
.foot-tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--c-text-muted);
  margin: 0 0 16px;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   MASTER RESET PASS — subtraction over everything above.
   The user's brief said: fewer voices. One typography system
   (Manrope). One logo system (bare TEXAS FUEL + live "Coffee
   Company"). Compact hero. Four-area homepage. One palette.
   Rules below trump the legacy layers when they conflict.
   ============================================================ */

:root {
  --c-bg:           #070707;
  --c-surface:      #111212;
  --c-surface-raised: #171818;
  --c-text:         #f1ece3;
  --c-text-muted:   #aaa69e;
  --c-border:       #2c2d2e;
  --c-accent:       #f27622;
  --c-accent-hover: #ff8438;
  --c-descriptor:   #cbc6bd;
  --f-sans:         'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

html, body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
}

/* One typography system. Kill every legacy font reference site-wide. */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, button, input, textarea, select,
.hero-headline, .hero-body, .hero-eyebrow-above, .hero-descriptor,
.subpage-title, .subpage-lede, .subpage-stamp,
.kicker, .kicker--center, .brand-mark, .brand-mark-coffee, .brand-mark-name,
.brand-nav-link, .brand-nav-cta,
.what-title, .what-lead, .what-tail,
.fuel-title, .fuel-sub, .clean-title, .clean-intro,
.unleaded-title, .unleaded-body, .options-title,
.room-title, .room-sub, .room-caption,
.future-heading, .future-sub, .future-footnote,
.what-we-do-title, .what-we-do-card-title, .what-we-do-card-body,
.donate-strip-title, .donate-strip-sub,
.contact-strip-title, .contact-strip-sub,
.keep-title, .keep-item-title, .keep-item-body,
.how-title, .how-step-title, .how-step-body, .how-num,
.brew-name, .brew-tag, .brew-tagline, .brew-soon-badge,
.foot-mark, .foot-descriptor, .foot-tagline, .foot-line, .foot-copy,
.foot-nav-link, .foot-anchor,
.pay-modal-eyebrow, .pay-modal-title, .pay-modal-amount, .pay-modal-note,
.tier-chip, .tier-submit,
.local-nav, .local-nav a {
  font-family: var(--f-sans) !important;
  font-style: normal !important;
}

/* Kill any leftover italic / serif treatments. */
.hero-headline em, .hero-headline i,
.subpage-title em, .subpage-title i,
.fuel-title em, .clean-title em,
.what-title em, .room-title em,
.how-title em, .keep-title em {
  font-style: normal !important;
}

/* Brand nav — bare wordmark, underline-only active state. */
.brand-nav {
  background: rgba(7,7,7,0.94) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}
.brand-nav-inner {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 12px 24px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
.brand-mark { flex: 0 0 auto !important; }
.brand-mark-wordmark {
  display: block !important;
  height: auto !important;
  width: 190px !important;
  filter: none !important;
}
.brand-mark-glyph,
.brand-mark-rule,
.brand-mark-coffee,
.brand-mark-name,
.brand-mark-word,
.brand-mark-descriptor,
.brand-mark-descriptor-full,
.brand-mark-descriptor-short { display: none !important; }
.brand-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: flex-end;
  overflow: visible !important;
}
.brand-nav-link {
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: none;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.brand-nav-link:hover {
  color: var(--c-text);
  background: transparent !important;
}
.brand-nav-link.is-current {
  color: var(--c-accent) !important;
  background: transparent !important;
  border-bottom-color: var(--c-accent);
}
.brand-nav-link[aria-current="page"] { pointer-events: none; }
.brand-nav-divider { display: none !important; }
.brand-nav-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1208 !important;
  background: var(--c-accent) !important;
  border-radius: 6px !important;
  text-decoration: none;
  transition: background 0.15s ease;
  border: 1px solid transparent !important;
  margin-left: 8px;
  flex: 0 0 auto;
}
.brand-nav-cta:hover { background: var(--c-accent-hover) !important; }

.brand-nav-toggle { display: none; }

body { padding-top: 64px !important; }

@media (max-width: 760px) {
  .brand-nav-inner { padding: 10px 16px !important; gap: 12px !important; }
  .brand-mark-wordmark { width: 140px !important; }
  .brand-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-left: auto;
    order: 3;
  }
  .brand-nav-toggle span {
    display: block;
    height: 2px;
    background: var(--c-text);
    border-radius: 1px;
  }
  .brand-nav-cta {
    height: 36px;
    padding: 0 14px;
    font-size: 12px;
    order: 2;
    margin-left: 0;
  }
  .brand-nav-links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0 4px;
    border-top: 1px solid var(--c-border);
    margin-top: 8px;
    display: none;
  }
  .brand-nav-links.is-open { display: flex; }
  .brand-nav-link {
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
  }
  .brand-nav-link.is-current { border-bottom-color: var(--c-accent); }
  body { padding-top: 58px !important; }
}

/* HERO — compact, no 100vh, no centering void. */
.hero,
.hero--top,
.hero--reset {
  min-height: 0 !important;
  height: auto !important;
  padding: 40px 24px 64px !important;
  display: block !important;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* IMAGE-LED HERO — campfire photograph is the dominant element.
   Wordmark is burned into the wood in-frame; we don't render a
   separate wordmark over the top. Overlay copy is minimal: a quiet
   "Coffee Company" descriptor + the "Fuel the Grind." headline +
   one secondary line + two CTAs. The photo carries the mood — no
   body paragraph. Anchored to the right side on desktop so the
   wordmark in the photo (left half) reads clean. Full-bleed on
   phones with the overlay pinned to the bottom. */
.hero--photo {
  padding: 0 !important;
  text-align: left !important;
  background: var(--c-bg);
}
.hero-photo-frame {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: #0a0807;
}
@media (max-width: 760px) {
  /* Source photo is 4:3 landscape (1448x1086). A tall 4:5 frame was
     cropping 110px off each side, killing the TEXAS FUEL wordmark.
     Match the frame to the source so the whole shot fits cleanly. */
  .hero-photo-frame { aspect-ratio: 4 / 3; }
  .hero-photo { object-fit: contain; }
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Scrim — fades the right edge to black so the overlay copy stays
   readable without veiling the wordmark / kettle on the left. On
   phones the scrim runs bottom-up instead so the campfire stays
   the dominant element. */
.hero-photo-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(10,8,7,0.00) 0%,
    rgba(10,8,7,0.00) 38%,
    rgba(10,8,7,0.55) 70%,
    rgba(10,8,7,0.88) 100%);
}
@media (max-width: 760px) {
  .hero-photo-scrim {
    background: linear-gradient(180deg,
      rgba(10,8,7,0.00) 0%,
      rgba(10,8,7,0.00) 40%,
      rgba(10,8,7,0.65) 78%,
      rgba(10,8,7,0.92) 100%);
  }
}
.hero-photo-overlay {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  z-index: 2;
}
@media (max-width: 980px) {
  .hero-photo-overlay { max-width: 360px; right: 4%; gap: 12px; }
}
@media (max-width: 760px) {
  /* On phones the burned-in TEXAS FUEL wordmark in the hero photo
     fills the mid frame. Absolute-positioning the overlay copy on
     top of the image made "Fuel the Grind." collide with the
     wordmark. Move the copy OUT of the image into the page flow
     on mobile so nothing overlaps the photograph. */
  .hero-photo-overlay {
    position: static;
    right: auto;
    left: auto;
    bottom: auto;
    top: auto;
    transform: none;
    max-width: none;
    text-align: center;
    padding: 22px 20px 8px;
    gap: 10px;
    align-items: center;
  }
  .hero-photo-descriptor,
  .hero-photo-headline,
  .hero-photo-sub {
    text-shadow: none;
  }
  .hero--photo .hero-ctas { justify-content: center; }
}
.hero-photo-descriptor {
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.hero-photo-headline {
  font-family: 'Black Ops One', 'Anton', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 60px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 0;
  line-height: 1.0;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.75),
    0 0 28px rgba(232,120,42,0.30);
}
.hero-photo-sub {
  font-family: var(--f-serif), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--c-accent);
  margin: 0;
  line-height: 1.4;
  max-width: 28em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.75);
}
.hero--photo .hero-ctas {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .hero--photo .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero--photo .hero-cta { width: 100%; text-align: center; }
}

/* Lifestyle pouring shot leading the coffee-band — sits above the
   "Onyx at the station. Texas Fuel coming soon." block. Frames the
   bag-introduction with the cowboy + steaming kettle + glowing sign. */
.coffee-band-lead {
  margin: 0 auto 36px;
  max-width: 980px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0807;
  box-shadow:
    0 0 0 1px rgba(232,120,42,0.18),
    0 24px 60px rgba(0,0,0,0.55);
}
.coffee-band-lead-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Origin strip — sourcing photo + a one-liner about provenance.
   Sits between the coffee-band and the mood-band so the visual
   story is: bags → origin → ritual. Caption sits to the right on
   desktop, drops below on phones. */
.origin-strip {
  margin: 56px 0;
  padding: 0 24px;
}
.origin-strip-figure {
  position: relative;
  margin: 0 auto;
  max-width: 1280px;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  background: #0a0807;
  box-shadow:
    0 0 0 1px rgba(232,120,42,0.18),
    0 24px 60px rgba(0,0,0,0.55);
}
.origin-strip-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 4 / 3;
}
.origin-strip-caption {
  align-self: center;
  padding: 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.origin-strip-caption .kicker {
  margin: 0;
  font-family: 'Bebas Neue', 'Anton', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.origin-strip-line {
  font-family: var(--f-serif), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  color: var(--c-text);
  margin: 0;
  max-width: 22em;
}
@media (max-width: 760px) {
  .origin-strip { margin: 40px 0; padding: 0 16px; }
  .origin-strip-figure { grid-template-columns: 1fr; }
  .origin-strip-img { aspect-ratio: 5 / 4; }
  .origin-strip-caption { padding: 24px 22px; }
}
@media (max-width: 760px) {
  .hero,
  .hero--top,
  .hero--reset {
    padding: 24px 18px 44px !important;
  }
}
.hero-eyebrow-above {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 18px;
}
.hero-lockup,
.hero-lockup--reset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto 22px;
  padding: 0 !important;
  background: none !important;
}
.hero-brand,
.hero-brand-ember,
.hero-brand-mark,
.hero-brand-mark--full { display: none !important; }
.hero-wordmark {
  display: block;
  width: clamp(240px, 56vw, 520px);
  height: auto;
  filter: none;
}
.hero-descriptor {
  font-family: var(--f-sans) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-descriptor);
  margin: 0;
}
@media (max-width: 760px) {
  .hero-descriptor { font-size: 11px; letter-spacing: 0.20em; }
}
.hero-headline {
  font-family: var(--f-sans) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(38px, 5.4vw, 62px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-text);
  margin: 14px auto 18px;
  max-width: 820px;
}
.hero-body {
  font-family: var(--f-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--c-text-muted);
  max-width: 640px;
  margin: 0 auto 26px;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.hero-proof { display: none !important; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.hero-cta,
.hero-cta--primary,
.hero-cta--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  font-family: var(--f-sans) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px !important;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.hero-cta--primary {
  background: var(--c-accent) !important;
  color: #1a1208 !important;
  box-shadow: none !important;
}
.hero-cta--primary:hover { background: var(--c-accent-hover) !important; }
.hero-cta--secondary {
  background: transparent !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
.hero-cta--secondary:hover { border-color: var(--c-text-muted) !important; }

/* Hide bean canvas + bean-glass on homepage so the layout reads clean. */
.is-home #bean-canvas,
.is-home .bean-glass,
.is-home .grinder-fog,
.is-home .fade-strip { display: none !important; }

/* COMPACT SUPPORT — tier rail. Kept short. */
.support-compact {
  padding: 56px 24px;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.support-compact .wrap { max-width: 920px; margin: 0 auto; text-align: center; }
.support-compact .kicker {
  font-family: var(--f-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--c-text-muted) !important;
  margin: 0 0 10px;
}
.support-compact-title {
  font-family: var(--f-sans) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: var(--c-text);
  margin: 0 0 12px;
}
.support-compact-sub {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text-muted);
  max-width: 560px;
  margin: 0 auto 24px;
}
@media (max-width: 760px) {
  .support-compact { padding: 40px 18px; }
}

/* COFFEE BAND — two-column lede, then 4-card brews row. */
.coffee-band {
  padding: 64px 24px;
  background: var(--c-bg);
}
.coffee-band .wrap { max-width: 1100px; margin: 0 auto; text-align: center; }
.coffee-band .kicker {
  font-family: var(--f-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--c-text-muted) !important;
  margin: 0 0 10px;
}
.coffee-band-title {
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: var(--c-text);
  margin: 0 0 26px;
}
.coffee-band-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  text-align: left;
  margin-bottom: 36px;
}
.coffee-band-col {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.coffee-band-col-head {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0;
}
.coffee-band-col-body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
}
.coming-soon-pill {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 999px;
}
@media (max-width: 760px) {
  .coffee-band { padding: 44px 18px; }
  .coffee-band-cols { grid-template-columns: 1fr; gap: 12px; }
}

/* BREWS GRID — 4 cards in one row on desktop, 2x2 tablet, swipe carousel on mobile. */
.brews-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1024px) {
  .brews-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .brews-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 18px 8px !important;
    margin: 0 -18px !important;
    gap: 12px !important;
  }
  .brews-grid::-webkit-scrollbar { display: none; }
  .brews-grid > .brew {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
.brew {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 8px !important;
  padding: 14px 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-shadow: none !important;
}
.brew-photo-wrap {
  aspect-ratio: 4 / 5;
  width: 100%;
  background: #0b0b0b;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brew-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brew-body-wrap {
  padding: 14px 4px 4px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.brew-pump { display: none !important; }
.brew-soon-badge {
  font-family: var(--f-sans) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent) !important;
  background: transparent !important;
  border: 1px solid var(--c-accent);
  border-radius: 999px;
  padding: 3px 10px;
  align-self: flex-start;
}
.brew-tag {
  font-family: var(--f-sans) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted) !important;
  margin: 4px 0 0;
}
.brew-name {
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: -0.01em;
  color: var(--c-text) !important;
  margin: 0;
}
.brew-tagline {
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text-muted) !important;
  margin: 0;
}

.future-footnote {
  font-family: var(--f-sans) !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-text-muted) !important;
  margin: 18px 0 0;
  text-align: center;
}

/* SPLIT BAND — Station + Contact two columns. */
.split-band { padding: 56px 24px 96px; background: var(--c-bg); }
.split-band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.split-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.split-card-title {
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 0;
}
.split-card-body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
  flex: 1 1 auto;
}
@media (max-width: 760px) {
  .split-band { padding: 36px 18px 56px; }
  .split-band-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ABOUT / COFFEE / STATION shared body block. */
.subpage-hero {
  padding: 56px 24px 36px;
  text-align: center;
}
.subpage-hero .wrap { max-width: 760px; margin: 0 auto; }
.subpage-title {
  font-family: var(--f-sans) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(34px, 4.2vw, 52px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--c-text) !important;
  margin: 14px 0 18px;
}
.subpage-lede {
  font-family: var(--f-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--c-text-muted) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  max-width: 620px;
  margin: 0 auto;
}
.about-block {
  padding: 30px 24px;
  border-top: 1px solid var(--c-border);
}
.about-block .wrap { max-width: 760px; margin: 0 auto; text-align: left; }
.about-block .kicker {
  font-family: var(--f-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--c-text-muted) !important;
  margin: 0 0 12px;
  text-align: left !important;
}
.about-block-title {
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 2.8vw, 32px) !important;
  letter-spacing: -0.01em;
  line-height: 1.2 !important;
  color: var(--c-text);
  margin: 0 0 14px;
}
.about-block-body {
  font-family: var(--f-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--c-text-muted) !important;
  margin: 0;
}
.about-principles {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.about-principles li {
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-text);
  padding-left: 18px;
  position: relative;
}
.about-principles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
}
.about-principles--ordered {
  counter-reset: step;
}
.about-principles--ordered li {
  counter-increment: step;
  padding-left: 32px;
}
.about-principles--ordered li::before {
  content: counter(step);
  background: transparent;
  border: 1px solid var(--c-accent);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-accent);
  top: 4px;
  left: 0;
}
.about-block-cta {
  margin: 18px 0 0;
}

/* Footer — same nav order as header, Manrope. */
.foot { background: var(--c-bg); border-top: 1px solid var(--c-border); }
.foot-mark { filter: none !important; }
.foot-nav-link {
  font-family: var(--f-sans) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.foot-nav-link--cta {
  color: var(--c-accent) !important;
}

/* Tier rail compact: chip + featured + Add Fuel button.
   These classes already exist; nudge them onto the Manrope grid. */
.tier-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 18px;
}
.tier-chip {
  font-family: var(--f-sans) !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  padding: 8px 14px;
}
.tier-chip.is-selected,
.tier-chip[aria-pressed="true"] {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.tier-submit {
  font-family: var(--f-sans) !important;
  font-weight: 700;
  height: 48px;
  padding: 0 24px;
  border-radius: 6px;
  background: var(--c-accent);
  color: #1a1208;
}
.tier-submit:hover { background: var(--c-accent-hover); }

/* Kill any leftover bottom-nav rows site-wide. */
.subpage-back { display: none !important; }

/* Generic kicker base for any leftover sections that still use it. */
.kicker,
.kicker--center {
  font-family: var(--f-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--c-text-muted) !important;
}

/* Brew card final cleanup — kill any legacy absolute-positioning
   that pushed the COMING SOON badge over the tag line. */
.brew-body-wrap > * { position: static !important; top: auto !important; left: auto !important; right: auto !important; }
.brew-body-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 14px 4px 4px !important;
  align-items: flex-start !important;
}
.brew-soon-badge {
  order: 0 !important;
  position: static !important;
  margin: 0 !important;
}
.brew-tag { order: 1 !important; margin: 2px 0 0 !important; }
.brew-name { order: 2 !important; margin: 0 !important; }
.brew-tagline { order: 3 !important; margin: 0 !important; }

/* Same on /coffee/ and /about/ pages — generic about-block kicker
   should center, since the brief shows centered section eyebrows. */
.about-block .kicker { text-align: center !important; }
.about-block .about-block-title { text-align: center !important; }
.about-block .about-block-body { text-align: center !important; max-width: 620px; margin-left: auto; margin-right: auto; }
.about-block .about-principles { max-width: 620px; margin-left: auto; margin-right: auto; }
.about-block .about-block-cta { text-align: center !important; }

/* ============================================================
   TYPOGRAPHY + SPACING PASS — Inter Tight headings, Inter body,
   title-case nav and buttons, exact paddings, 8px spacing system,
   2-column compact support, 1-line standard band, 2x2 brews grid.
   Overrides the Manrope-era reset above.
   ============================================================ */

:root {
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --c-bg:           #070707;
  --c-section-alt:  #10100f;
  --c-surface:      #151514;
  --c-text:         #f2eee7;
  --c-text-muted:   #aaa49b;
  --c-text-dim:     #817c74;
  --c-border:       #292724;
  --c-accent:       #f27622;
  --c-accent-hover: #ff8438;
  --c-descriptor:   #cbc6bd;
  --c-focus:        #ffc08a;
}

html, body { background: var(--c-bg) !important; color: var(--c-text) !important; }

body, p, a, span, li, button, input, textarea, select,
.brand-nav-link, .brand-nav-cta, .hero-cta, .hero-body, .hero-descriptor,
.kicker, .subpage-lede, .about-block-body, .about-principles li,
.coffee-band-col-head, .coffee-band-col-body,
.split-card-body, .future-footnote,
.tier-chip, .tier-submit,
.foot-mark, .foot-descriptor, .foot-tagline, .foot-line, .foot-copy, .foot-nav-link, .foot-anchor,
.pay-modal-eyebrow, .pay-modal-amount, .pay-modal-note,
.brew-tag, .brew-tagline, .brew-soon-badge,
.support-compact-sub, .standard-band-eyebrow, .standard-band-line,
.coffee-band-brews-eyebrow,
.page-subnav, .page-subnav a,
.coming-soon-pill {
  font-family: var(--f-sans) !important;
}
h1, h2, h3, h4, h5, h6,
.hero-headline, .subpage-title, .support-compact-title,
.coffee-band-title, .coffee-band-brews-title,
.split-card-title, .about-block-title, .pay-modal-title,
.brew-name {
  font-family: var(--f-display) !important;
}

/* HEADER — 68px desktop / 60px mobile, container 1200px,
   title-case nav, 2px ember underline active. */
.brand-nav { background: rgba(7,7,7,0.96) !important; border-bottom: 1px solid var(--c-border) !important; }
.brand-nav-inner {
  max-width: 1200px !important;
  padding: 0 40px !important;
  height: 68px !important;
  gap: 30px !important;
}
.brand-mark-wordmark { width: 190px !important; height: auto !important; }
.brand-nav-links { gap: 28px !important; justify-content: flex-end; }
.brand-nav-link {
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--c-text-muted) !important;
  padding: 6px 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}
.brand-nav-link:hover { color: var(--c-text) !important; border-bottom-color: transparent !important; }
.brand-nav-link.is-current {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-accent) !important;
}
.brand-nav-cta {
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  height: 40px !important;
  padding: 0 18px !important;
  margin-left: 24px !important;
  color: #1a1208 !important;
  background: var(--c-accent) !important;
  border-radius: 6px !important;
}
body { padding-top: 68px !important; }

@media (max-width: 760px) {
  .brand-nav-inner { padding: 0 20px !important; height: 60px !important; gap: 12px !important; }
  .brand-mark-wordmark { width: 140px !important; }
  .brand-nav-cta { height: 36px !important; padding: 0 14px !important; font-size: 13px !important; margin-left: 0 !important; }
  body { padding-top: 60px !important; }
}

/* HERO — exact paddings per brief, title-case buttons,
   wordmark up to 900px desktop / 88-92vw mobile. */
.hero, .hero--top, .hero--reset {
  padding: 32px 40px 68px !important;
  text-align: center;
}
@media (max-width: 760px) {
  .hero, .hero--top, .hero--reset { padding: 20px 20px 46px !important; }
}
.hero-eyebrow-above {
  font-family: var(--f-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--c-text-dim) !important;
  margin: 0 0 18px !important;
}
.hero-lockup--reset { gap: 0 !important; margin: 0 auto 30px !important; }
.hero-wordmark {
  width: clamp(280px, 88vw, 900px) !important;
  margin: 0 auto !important;
}
.hero-descriptor {
  font-family: var(--f-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase;
  color: var(--c-descriptor) !important;
  margin-top: 11px !important;
}
@media (max-width: 760px) {
  .hero-descriptor { font-size: 10px !important; letter-spacing: 0.18em !important; margin-top: 9px !important; }
}
.hero-headline {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 5.4vw, 68px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
  max-width: 760px !important;
  margin: 0 auto 20px !important;
  color: var(--c-text) !important;
}
@media (max-width: 760px) {
  .hero-headline { font-size: clamp(40px, 9.2vw, 46px) !important; line-height: 1.02 !important; letter-spacing: -0.025em !important; }
}
.hero-body {
  font-family: var(--f-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--c-text-muted) !important;
  max-width: 620px !important;
  margin: 0 auto 28px !important;
}
@media (max-width: 760px) {
  .hero-body { font-size: 16px !important; line-height: 1.55 !important; margin: 0 auto 24px !important; }
}
.hero-ctas { gap: 12px !important; }
.hero-cta {
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  height: 48px !important;
  padding: 0 22px !important;
  border-radius: 6px !important;
}
.hero-cta--primary {
  background: var(--c-accent) !important;
  color: #1a1208 !important;
  border: 0 !important;
}
.hero-cta--primary:hover { background: var(--c-accent-hover) !important; transform: translateY(-1px); }
.hero-cta--secondary {
  background: transparent !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important;
}
.hero-cta--secondary:hover { border-color: var(--c-text-muted) !important; }

/* SECTION BASE — global 8px-based padding scale. */
.support-compact { padding: 56px 40px !important; background: var(--c-section-alt) !important; border-top: 1px solid var(--c-border) !important; border-bottom: 1px solid var(--c-border) !important; }
.standard-band   { padding: 28px 40px !important; background: var(--c-bg) !important; border-bottom: 1px solid var(--c-border) !important; }
.coffee-band     { padding: 80px 40px !important; background: var(--c-bg) !important; }
.split-band      { padding: 72px 40px 88px !important; }
.subpage-hero    { padding: 80px 40px 56px !important; }
.about-block     { padding: 56px 40px !important; }
@media (max-width: 760px) {
  .support-compact { padding: 36px 20px !important; }
  .standard-band   { padding: 22px 20px !important; }
  .coffee-band     { padding: 48px 20px !important; }
  .split-band      { padding: 44px 20px 56px !important; }
  .subpage-hero    { padding: 52px 20px 36px !important; }
  .about-block     { padding: 40px 20px !important; }
}
.wrap { max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; }

/* KICKER — used everywhere; 11-12px / 0.14em (no 0.25em+). */
.kicker, .kicker--center {
  font-family: var(--f-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--c-text-dim) !important;
  margin: 0 0 14px !important;
}

/* COMPACT SUPPORT — 2-column band, target 220-260px tall on desktop. */
.support-compact-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  gap: 56px !important;
  align-items: center !important;
}
.support-compact-left { text-align: left !important; }
.support-compact-left .kicker { text-align: left !important; margin: 0 0 12px !important; }
.support-compact-title {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--c-text) !important;
  margin: 0 0 14px !important;
  text-align: left !important;
}
.support-compact-sub {
  font-family: var(--f-sans) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--c-text-muted) !important;
  margin: 0 !important;
  text-align: left !important;
  max-width: 460px !important;
}
.support-compact-right { display: flex !important; flex-direction: column !important; gap: 16px !important; }
@media (max-width: 760px) {
  .support-compact-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* STANDARD BAND — one compact horizontal line; full version on About. */
.standard-band .wrap { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 18px; justify-content: center; }
.standard-band-eyebrow {
  font-family: var(--f-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--c-text-dim) !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.standard-band-line {
  font-family: var(--f-sans) !important;
  font-size: 16px !important;
  color: var(--c-text) !important;
  margin: 0 !important;
  text-align: center;
}
@media (max-width: 760px) {
  .standard-band-line { font-size: 14px !important; }
}

/* COFFEE BAND headings + brews label. */
.coffee-band .wrap { text-align: center; }
.coffee-band .kicker { text-align: center !important; margin: 0 0 12px !important; }
.coffee-band-title {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  margin: 0 auto 36px !important;
  max-width: 820px !important;
  color: var(--c-text) !important;
}
.coffee-band-cols {
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  max-width: 920px !important;
  margin: 0 auto 64px !important;
  text-align: left !important;
}
.coffee-band-col { padding: 22px 24px !important; border-radius: 8px !important; border: 1px solid var(--c-border) !important; background: var(--c-surface) !important; }
.coffee-band-col-head { font-size: 12px !important; letter-spacing: 0.14em !important; }
.coffee-band-col-body { font-size: 16px !important; line-height: 1.5 !important; color: var(--c-text) !important; margin: 8px 0 14px !important; }
.coffee-band-brews-eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--c-text-dim) !important;
  margin: 0 0 8px !important;
}
.coffee-band-brews-title {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  margin: 0 0 28px !important;
  color: var(--c-text) !important;
}
@media (max-width: 760px) {
  .coffee-band-cols { grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 auto 40px !important; }
}

/* BREWS GRID — 4 col >=1280, 2x2 at 900-1279, swipe carousel mobile. */
.brews-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  margin: 0 !important;
}
@media (max-width: 1279px) and (min-width: 901px) {
  .brews-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) and (min-width: 641px) {
  .brews-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .brews-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px !important;
    margin: 0 -20px !important;
    gap: 14px !important;
  }
  .brews-grid::-webkit-scrollbar { display: none; }
  .brews-grid > .brew {
    flex: 0 0 88%;
    scroll-snap-align: center;
    margin-left: 6%;
  }
  .brews-grid > .brew:first-child { margin-left: 6%; }
  .brews-grid > .brew:last-child { margin-right: 6%; }
}
.brew {
  padding: 18px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 8px !important;
}
.brew-body-wrap { padding: 16px 4px 4px !important; }
.brew-soon-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--c-accent) !important;
  border: 1px solid var(--c-accent) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
}
.brew-tag { font-size: 10px !important; letter-spacing: 0.14em !important; }
.brew-name {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
}
.brew-tagline { font-size: 14px !important; line-height: 1.4 !important; }

/* SPLIT BAND — Station + Contact. */
.split-band .wrap { max-width: 1100px !important; }
.split-band-grid { gap: 20px !important; }
.split-card { padding: 28px !important; border-radius: 8px !important; }
.split-card-title { font-size: 24px !important; letter-spacing: -0.015em !important; font-weight: 700 !important; }
.split-card-body { font-size: 16px !important; line-height: 1.55 !important; }

/* SUBPAGE — interior page hero + subnav. */
.subpage-hero { text-align: center !important; }
.subpage-hero .wrap { max-width: 720px !important; margin: 0 auto !important; }
.subpage-title {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: clamp(36px, 4.4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  color: var(--c-text) !important;
  margin: 14px 0 18px !important;
}
.subpage-lede {
  font-family: var(--f-sans) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--c-text-muted) !important;
  margin: 0 auto !important;
  max-width: 620px !important;
}

/* Coffee page local subnav — restrained, 1px bottom border row,
   ember underline on hover/active. */
.page-subnav { background: var(--c-bg); border-bottom: 1px solid var(--c-border); padding: 0 40px; }
.page-subnav-inner { display: flex; flex-wrap: wrap; gap: 26px; max-width: 1200px; margin: 0 auto; }
.page-subnav a {
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--c-text-muted) !important;
  padding: 14px 0 !important;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.page-subnav a:hover { color: var(--c-text) !important; border-bottom-color: var(--c-accent); }
@media (max-width: 760px) {
  .page-subnav { padding: 0 20px; }
  .page-subnav-inner { gap: 16px; }
  .page-subnav a { padding: 12px 0 !important; font-size: 13px !important; }
}

/* About body block — left-aligned, 720px max, 2-col principles. */
.about-block .wrap { max-width: 720px !important; margin: 0 auto !important; text-align: left !important; }
.about-block .kicker { text-align: left !important; margin: 0 0 12px !important; }
.about-block-title {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  text-align: left !important;
  margin: 0 0 16px !important;
}
.about-block-body {
  font-family: var(--f-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--c-text-muted) !important;
  text-align: left !important;
  margin: 0 !important;
  max-width: none !important;
}
.about-principles {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 32px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.about-principles li {
  font-family: var(--f-sans) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--c-text) !important;
  padding-left: 18px !important;
  position: relative !important;
}
.about-principles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
}
@media (max-width: 640px) {
  .about-principles { grid-template-columns: 1fr !important; }
}
.about-block-cta { margin-top: 24px !important; text-align: left !important; }

/* FOOTER — title case, Inter, same link order as header. */
.foot { background: var(--c-bg) !important; border-top: 1px solid var(--c-border) !important; padding: 40px 40px 56px !important; }
.foot-nav-link {
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--c-text-muted) !important;
}
.foot-nav-link--cta { color: var(--c-accent) !important; }

/* TIER RAIL — selectable chips, no glow. */
.tier-rail { gap: 8px !important; justify-content: flex-start !important; flex-wrap: wrap; }
.tier-chip {
  font-family: var(--f-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border-radius: 999px !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}
.tier-chip[aria-pressed="true"], .tier-chip.is-selected {
  border-color: var(--c-accent) !important;
  background: rgba(242, 118, 34, 0.10) !important;
  color: var(--c-text) !important;
}
.tier-submit {
  font-family: var(--f-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  height: 48px !important;
  padding: 0 22px !important;
  border-radius: 6px !important;
  background: var(--c-accent) !important;
  color: #1a1208 !important;
  align-self: flex-start;
}

/* Coming-soon pill (homepage 2-col card). */
.coming-soon-pill {
  font-family: var(--f-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--c-accent) !important;
  border: 1px solid var(--c-accent) !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
}

/* Future-footnote — quiet single line. */
.future-footnote {
  font-family: var(--f-sans) !important;
  font-size: 12px !important;
  color: var(--c-text-dim) !important;
  letter-spacing: 0.04em !important;
  margin: 18px 0 0 !important;
  text-align: center !important;
}

/* Pay modal text family — title case. */
.pay-modal-title { font-family: var(--f-display) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; }

/* Bottom-nav rows site-wide. */
.subpage-back, .tapedeck-back { display: none !important; }

/* Hide leftover legacy hero artwork that would still get loaded. */
.hero-brand, .hero-brand-mark, .hero-brand-ember { display: none !important; }

/* ============================================================
   COMPLETE RESET — Geist only, exact tokens from the master brief.
   Overrides the Inter Tight + Inter layer above.
   ============================================================ */

:root {
  --bg:             #070707;
  --surface:        #10100f;
  --surface-raised: #161615;
  --text:           #f1ece3;
  --text-muted:     #aaa59d;
  --text-quiet:     #7f7a72;
  --line:           #2b2926;
  --steel:          #a4a6a6;
  --ember:          #ef7024;
  --ember-hover:    #ff8034;
  --ember-dark:     #c65418;
  --focus:          #ffc08a;
  --f-sans:    'Geist', 'Helvetica Neue', Arial, sans-serif;
  --f-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
}

html, body, body * {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif !important;
}
body { background: var(--bg) !important; color: var(--text) !important; }

/* HEADER — 68px, container 1200px, title case nav, ember 2px underline. */
.brand-nav { background: rgba(7,7,7,0.96) !important; border-bottom: 1px solid var(--line) !important; }
.brand-nav-inner {
  max-width: 1200px !important;
  padding: 0 40px !important;
  height: 68px !important;
  gap: 28px !important;
}
.brand-mark-wordmark { width: 185px !important; height: auto !important; }
.brand-nav-link {
  font-weight: 550 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
  padding: 6px 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
.brand-nav-link:hover { color: var(--text) !important; }
.brand-nav-link.is-current { color: var(--text) !important; border-bottom-color: var(--ember) !important; }
.brand-nav-cta {
  height: 40px !important;
  padding: 0 18px !important;
  margin-left: 24px !important;
  font-weight: 650 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #0a0807 !important;
  background: var(--ember) !important;
  border-radius: 6px !important;
}
.brand-nav-cta:hover { background: var(--ember-hover) !important; }
body { padding-top: 68px !important; }
@media (max-width: 760px) {
  .brand-nav-inner { padding: 0 20px !important; height: 60px !important; gap: 12px !important; }
  .brand-mark-wordmark { width: 138px !important; }
  body { padding-top: 60px !important; }
}

/* HERO — exact spacing, 88vw wordmark max 900px, descriptor right-aligned
   under final third on desktop, centered mobile. */
.hero, .hero--top, .hero--reset {
  padding: 32px 40px 68px !important;
  text-align: center;
  background: var(--bg) !important;
}
@media (max-width: 760px) {
  .hero, .hero--top, .hero--reset { padding: 20px 20px 46px !important; }
}
.hero-eyebrow-above {
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--text-quiet) !important;
  margin: 0 0 16px !important;
}
.hero-lockup--reset {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 auto 30px !important;
  width: min(900px, 88vw);
}
.hero-wordmark {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
.hero-descriptor {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #cbc6bd !important;
  line-height: 1 !important;
  margin: 11px 0 0 !important;
  text-align: right !important;
  align-self: flex-end !important;
  padding-right: 0 !important;
}
@media (max-width: 760px) {
  .hero-lockup--reset { width: 91vw; max-width: 620px; }
  .hero-descriptor { text-align: center !important; align-self: center !important; font-size: 11px !important; letter-spacing: 0.20em !important; margin: 9px 0 0 !important; }
}
.hero-headline {
  font-weight: 650 !important;
  font-size: clamp(48px, 5vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  max-width: 800px !important;
  margin: 0 auto 18px !important;
  color: var(--text) !important;
}
@media (max-width: 760px) {
  .hero-headline { font-size: clamp(38px, 11vw, 48px) !important; line-height: 1.02 !important; letter-spacing: -0.025em !important; }
}
.hero-body {
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  max-width: 660px !important;
  margin: 0 auto 28px !important;
}
@media (max-width: 760px) { .hero-body { font-size: 16px !important; } }
.hero-ctas { display: flex !important; gap: 12px !important; flex-wrap: wrap; justify-content: center; }
.hero-cta {
  height: 48px !important;
  padding: 0 22px !important;
  border-radius: 6px !important;
  font-weight: 650 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
.hero-cta--primary {
  background: var(--ember) !important;
  color: #0a0807 !important;
  border: 0 !important;
}
.hero-cta--primary:hover { background: var(--ember-hover) !important; }
.hero-cta--secondary {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid #45413d !important;
}
.hero-cta--secondary:hover { border-color: var(--text-muted) !important; }

/* Section paddings + container. */
.support-compact { padding: 56px 40px !important; background: var(--surface) !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.quality-strip   { padding: 28px 40px !important; background: var(--bg) !important; border-bottom: 1px solid var(--line) !important; }
.coffee-band     { padding: 72px 40px !important; background: var(--bg) !important; }
.split-band      { padding: 72px 40px !important; background: var(--bg) !important; }
.subpage-hero    { padding: 72px 40px 48px !important; }
.about-block     { padding: 48px 40px !important; border-top: 1px solid var(--line) !important; }
.about-block:first-of-type { border-top: 0 !important; }
@media (max-width: 760px) {
  .support-compact { padding: 36px 20px !important; }
  .quality-strip   { padding: 24px 20px !important; }
  .coffee-band     { padding: 48px 20px !important; }
  .split-band      { padding: 48px 20px !important; }
  .subpage-hero    { padding: 48px 20px 36px !important; }
  .about-block     { padding: 40px 20px !important; }
}
.wrap { max-width: 1200px !important; margin: 0 auto !important; }

/* Kicker / eyebrows. */
.kicker, .kicker--center, .coffee-band-brews-eyebrow, .standard-band-eyebrow {
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-quiet) !important;
  margin: 0 0 12px !important;
}

/* QUALITY STRIP — 4-column line; no descriptions. */
.quality-strip-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
}
.quality-strip-grid li {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  position: relative;
}
.quality-strip-grid li + li::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
@media (max-width: 760px) {
  .quality-strip-grid { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .quality-strip-grid li + li::before { display: none; }
  .quality-strip-grid li:nth-child(odd)::after {
    content: "";
    position: absolute;
    right: -9px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--line);
  }
}

/* SUPPORT BAND — compact 2-col. */
.support-compact-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  gap: 56px !important;
  align-items: center !important;
}
.support-compact-left { text-align: left !important; }
.support-compact-left .kicker { text-align: left !important; }
.support-compact-title {
  font-weight: 650 !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  margin: 0 0 14px !important;
  text-align: left !important;
}
.support-compact-sub {
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  max-width: 460px !important;
  text-align: left !important;
}
@media (max-width: 760px) {
  .support-compact-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* COFFEE BAND. */
.coffee-band .wrap { text-align: center; }
.coffee-band-title {
  font-weight: 650 !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  margin: 0 auto 36px !important;
  max-width: 800px !important;
  color: var(--text) !important;
}
.coffee-band-cols {
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  max-width: 920px !important;
  margin: 0 auto 64px !important;
  text-align: left !important;
}
.coffee-band-col {
  padding: 22px 24px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-raised) !important;
}
.coffee-band-col-head { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--text-quiet) !important; font-weight: 650 !important; }
.coffee-band-col-body { font-size: 16px !important; line-height: 1.5 !important; color: var(--text) !important; margin: 8px 0 14px !important; }
.coffee-band-brews-title {
  font-weight: 650 !important;
  font-size: clamp(28px, 2.8vw, 40px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  margin: 0 0 28px !important;
  color: var(--text) !important;
  text-align: center;
}
@media (max-width: 760px) {
  .coffee-band-cols { grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 auto 40px !important; }
}

/* BREWS grid breakpoints. */
.brews-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  margin: 0 !important;
}
@media (max-width: 1279px) and (min-width: 700px) {
  .brews-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 699px) {
  .brews-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px !important;
    margin: 0 -20px !important;
    gap: 14px !important;
  }
  .brews-grid::-webkit-scrollbar { display: none; }
  .brews-grid > .brew { flex: 0 0 84%; scroll-snap-align: center; margin-left: 8%; }
  .brews-grid > .brew:first-child { margin-left: 8%; }
  .brews-grid > .brew:last-child { margin-right: 8%; }
}
.brew { padding: 18px !important; border-radius: 6px !important; background: var(--surface-raised) !important; border: 1px solid var(--line) !important; }
.brew-name { font-weight: 650 !important; font-size: 22px !important; letter-spacing: -0.015em !important; line-height: 1.15 !important; }
.brew-tag { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--text-quiet) !important; }
.brew-tagline { font-size: 14px !important; line-height: 1.4 !important; color: var(--text-muted) !important; }
.brew-soon-badge {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.16em !important;
  text-transform: uppercase; color: var(--ember) !important;
  border: 1px solid var(--ember) !important; border-radius: 999px !important;
  padding: 3px 9px !important;
}
.coming-soon-pill {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.16em !important;
  text-transform: uppercase; color: var(--ember) !important;
  border: 1px solid var(--ember) !important; border-radius: 999px !important;
  padding: 4px 9px !important;
}

/* SPLIT BAND. */
.split-band .wrap { max-width: 1100px !important; }
.split-band-grid { gap: 20px !important; }
.split-card { padding: 28px !important; border-radius: 6px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; }
.split-card-title { font-weight: 650 !important; font-size: 24px !important; letter-spacing: -0.015em !important; }
.split-card-body { font-size: 16px !important; line-height: 1.55 !important; color: var(--text-muted) !important; }

/* INTERIOR PAGES. */
.subpage-hero { text-align: center !important; }
.subpage-hero .wrap { max-width: 720px !important; margin: 0 auto !important; }
.subpage-title {
  font-weight: 650 !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
  margin: 14px 0 18px !important;
}
.subpage-lede {
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  margin: 0 auto !important;
  max-width: 620px !important;
}
.subpage-hero-ctas {
  margin: 26px 0 0 !important;
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}

/* SUBNAV. */
.page-subnav { background: var(--bg); border-bottom: 1px solid var(--line); padding: 0 40px; }
.page-subnav-inner { display: flex; flex-wrap: wrap; gap: 26px; max-width: 1200px; margin: 0 auto; }
.page-subnav a {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
  padding: 14px 0 !important;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.page-subnav a:hover { color: var(--text) !important; border-bottom-color: var(--ember); }
@media (max-width: 760px) { .page-subnav { padding: 0 20px; } .page-subnav-inner { gap: 16px; } }

/* ABOUT BLOCKS. */
.about-block .wrap { max-width: 720px !important; margin: 0 auto !important; text-align: left !important; }
.about-block .kicker { text-align: left !important; margin: 0 0 14px !important; }
.about-block-title {
  font-weight: 650 !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
  text-align: left !important;
  margin: 0 0 18px !important;
  color: var(--text) !important;
}
.about-block-body {
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  text-align: left !important;
  margin: 0 !important;
  max-width: 660px !important;
}
.about-block-quiet {
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--text-quiet) !important;
  margin: 14px 0 0 !important;
}
.about-block-cta { margin-top: 26px !important; text-align: left !important; }

/* ABOUT MATTERS — 2-column label + body list, replaces about-principles. */
.about-matters {
  list-style: none;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 32px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}
.about-matters li { margin: 0 !important; padding: 0 !important; }
.about-matters-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--text-quiet) !important;
  margin: 0 0 6px !important;
}
.about-matters-body {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  margin: 0 !important;
}
@media (max-width: 640px) { .about-matters { grid-template-columns: 1fr !important; } }

/* CURRENT COFFEE on /coffee/. */
.current-coffee { margin: 16px 0 0; padding: 0; display: grid; gap: 18px; }
.current-coffee-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 16px 18px;
}
.current-coffee-row dt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 8px;
}
.current-coffee-row dd { margin: 0; }
.current-coffee-line { display: flex; gap: 12px; font-size: 15px; line-height: 1.4; margin: 4px 0; color: var(--text); }
.cc-label { color: var(--text-quiet); min-width: 86px; font-size: 13px; letter-spacing: 0.04em; }
.cc-value { color: var(--text); }

/* ABOUT-PRINCIPLES — Station "what it offers" / Care list, simple bullets. */
.about-principles {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.about-principles li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  padding-left: 16px;
  position: relative;
}
.about-principles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--ember);
  border-radius: 50%;
}

/* TIER RAIL + Add Fuel. */
.tier-rail { gap: 8px !important; }
.tier-chip {
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}
.tier-chip[aria-pressed="true"], .tier-chip.is-selected {
  border-color: var(--ember) !important;
  background: rgba(239, 112, 36, 0.10) !important;
  color: var(--text) !important;
}
.tier-submit {
  font-weight: 650 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  height: 48px !important;
  padding: 0 22px !important;
  border-radius: 6px !important;
  background: var(--ember) !important;
  color: #0a0807 !important;
}
.tier-submit:hover { background: var(--ember-hover) !important; }

/* FOOTER — same nav order as header, title case. */
.foot { background: var(--bg) !important; border-top: 1px solid var(--line) !important; padding: 40px 40px 56px !important; }
.foot-nav-link {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
}
.foot-nav-link--cta { color: var(--ember) !important; }

/* Form (contact). */
.field-label { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; color: var(--text) !important; }
.field-hint { color: var(--text-quiet) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.field input, .field textarea, .field-select {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
}
.field input, .field-select { height: 50px !important; padding: 0 14px !important; }
.field textarea { min-height: 150px !important; padding: 14px !important; }
.field input:focus, .field textarea:focus, .field-select:focus {
  outline: none !important;
  border-color: var(--ember) !important;
  box-shadow: 0 0 0 3px rgba(239, 112, 36, 0.25) !important;
}

/* Strip anything still labeled subpage-back / tapedeck-back. */
.subpage-back, .tapedeck-back { display: none !important; }

/* Hide legacy elements that competed with the reset. */
.hero-brand, .hero-brand-mark, .hero-brand-ember, .hero-proof, .brand-mark-rule,
.brand-mark-coffee, .brand-mark-name, .brand-mark-glyph,
.brand-mark-descriptor, .brand-mark-descriptor-full, .brand-mark-descriptor-short,
.standard-band, .standard-band-eyebrow, .standard-band-line,
.brew-pump, .grinder-fog, .fade-strip { display: none !important; }

/* Bean canvas behind hero, never affecting flow. */
.is-home #bean-canvas, .is-home .bean-glass { display: none !important; }

/* ============================================================
   BREW CARD FIX — bag artwork shows the brand, brew name, class,
   and tagline; the card mirrors the class + tagline beneath the
   bag so they read as one unit. Use object-fit:contain so the
   bag isn't cropped, and a 1:1 frame so it matches the bag PNGs.
   ============================================================ */
.brew-photo-wrap {
  aspect-ratio: 1 / 1 !important;
  background: var(--bg) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.brew-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}
.brew { padding: 14px !important; }
.brew-body-wrap {
  padding: 14px 6px 4px !important;
  gap: 6px !important;
  align-items: flex-start !important;
}
.brew-soon-badge { margin: 0 !important; }
.brew-tag {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--text-quiet) !important;
  font-weight: 600 !important;
  margin: 4px 0 0 !important;
}
.brew-name {
  font-weight: 650 !important;
  font-size: 19px !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  color: var(--text) !important;
}
.brew-tagline {
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
  margin: 2px 0 0 !important;
}

/* Brew tagline runs in sentence case to match what's actually
   printed on the bag artwork. (Older rules forced uppercase.) */
.brew-tagline { text-transform: none !important; }

/* TEXT FORMATTING CLEANUP — kill leftover glow / shadow effects
   on headings that were making type read hazy. Geist is crisp
   on its own; no shadow needed. Also bind to weights that are
   actually loaded (400/500/600/700). */
.hero-headline,
.subpage-title,
.support-compact-title,
.coffee-band-title,
.coffee-band-brews-title,
.split-card-title,
.about-block-title,
.brew-name,
.fuel-up-title,
.pay-modal-title,
h1, h2, h3, h4, h5, h6 {
  text-shadow: none !important;
  filter: none !important;
}

.hero-headline,
.subpage-title,
.support-compact-title,
.coffee-band-title,
.coffee-band-brews-title,
.about-block-title,
.split-card-title,
.fuel-up-title {
  font-weight: 700 !important;
}
.brew-name { font-weight: 600 !important; }

/* Small-label tracking: dial back the wide 0.14em on body text
   eyebrows so they read as labels rather than decorative caps. */
.kicker, .kicker--center, .coffee-band-col-head, .standard-band-eyebrow {
  letter-spacing: 0.10em !important;
  font-weight: 600 !important;
}
.hero-eyebrow-above { letter-spacing: 0.10em !important; font-weight: 600 !important; }
.hero-descriptor    { letter-spacing: 0.18em !important; font-weight: 600 !important; }

/* Body line-height a touch looser for breathing room. */
.hero-body, .subpage-lede, .about-block-body, .split-card-body, .support-compact-sub {
  line-height: 1.6 !important;
}

/* ============================================================
   HERO LOCKUP COHESION + FOLD CLEANUP
   - "Coffee Company" descriptor centered under the wordmark (not
     floating right-aligned). Reads as a single unit.
   - Headline downsized so the brushed-metal wordmark stays the
     dominant brand element instead of competing.
   - Hero bottom padding increased so the support section doesn't
     poke half-visible above the fold on a standard laptop view.
   ============================================================ */
.hero-lockup--reset {
  align-items: center !important;
}
.hero-descriptor {
  text-align: center !important;
  align-self: center !important;
  margin: 8px 0 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: #aaa49b !important;
}
.hero-headline {
  font-size: clamp(36px, 3.4vw, 48px) !important;
  font-weight: 600 !important;
  margin: 24px auto 18px !important;
  max-width: 720px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}
@media (max-width: 760px) {
  .hero-headline {
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: 1.1 !important;
    margin: 20px auto 16px !important;
  }
}
.hero, .hero--top, .hero--reset {
  padding: 32px 40px 140px !important;
}
@media (max-width: 760px) {
  .hero, .hero--top, .hero--reset {
    padding: 20px 20px 56px !important;
  }
}

/* Keep the wordmark at its lockup width; the descriptor centers
   under it via text-align, not flex alignment. */
.hero-lockup--reset { align-items: stretch !important; }
.hero-descriptor    { align-self: auto !important; }
/* Also: dial hero bottom padding back so support sits cleanly in
   the next frame instead of a sliver poking up. */
.hero, .hero--top, .hero--reset { padding-bottom: 56px !important; }
@media (max-width: 760px) {
  .hero, .hero--top, .hero--reset { padding-bottom: 40px !important; }
}

/* Restore the ember glow on hero / section headings — user
   liked it; my earlier "strip text-shadow" pass was wrong. */
.hero-headline,
.subpage-title,
.support-compact-title,
.coffee-band-title,
.coffee-band-brews-title,
.fuel-up-title,
.split-card-title,
.about-block-title {
  text-shadow: 0 0 22px rgba(232, 120, 42, 0.3) !important;
}

/* Mobile hamburger — bars were collapsing to dots because the
   span elements had no width. Force full button width. */
.brand-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.brand-nav-toggle span {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: #f1ece3 !important;
  border-radius: 1px !important;
}
@media (max-width: 760px) {
  .brand-nav-toggle { display: inline-flex !important; order: 3; margin-left: 6px; }
  .brand-nav-cta { order: 2; }
  .brand-nav-links {
    order: 4 !important;
    flex-basis: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 12px 0 6px !important;
    border-top: 1px solid var(--line) !important;
    margin-top: 8px !important;
    display: none !important;
  }
  .brand-nav-links.is-open { display: flex !important; }
  .brand-nav-link {
    width: 100% !important;
    padding: 14px 4px !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: left !important;
  }
  .brand-nav-link.is-current { border-bottom-color: var(--ember) !important; }
}

/* Mobile: let the nav drawer wrap to a second row and break free
   of the fixed 60px header height. */
@media (max-width: 760px) {
  .brand-nav { height: auto !important; }
  .brand-nav-inner {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 60px !important;
    padding: 0 20px !important;
    align-items: center !important;
  }
  .brand-nav-links.is-open {
    background: rgba(7,7,7,0.97) !important;
    padding: 8px 0 12px !important;
  }
}

/* Keep wordmark + CTA + hamburger on one line on mobile.
   Tightening sizes + gaps so they fit at 390px. */
@media (max-width: 760px) {
  .brand-nav-inner { gap: 8px !important; padding: 0 16px !important; }
  .brand-mark-wordmark { width: 120px !important; }
  .brand-nav-cta {
    height: 34px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    margin-left: auto !important;
    order: 2 !important;
  }
  .brand-nav-toggle {
    order: 3 !important;
    margin-left: 4px !important;
    width: 24px !important;
    height: 18px !important;
  }
}

/* Coffee-page subnav: align with the centered 720px content column
   below it (was full-bleed left-aligned, looked detached). */
.page-subnav-inner {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
@media (max-width: 760px) {
  .page-subnav {
    padding: 0 20px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-subnav::-webkit-scrollbar { display: none; }
  .page-subnav-inner {
    flex-wrap: nowrap !important;
    gap: 22px !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   BREW CARDS — bigger, cleaner, no white edge artifacts.
   - Use the actual bag PNG aspect (~5:7) for the photo frame.
   - object-fit: cover so the bag fills the frame and the
     metallic-top "white line" reads as part of the artwork,
     not floating border.
   - Larger card padding, bigger brew name, more breathing room.
   ============================================================ */
.brew {
  padding: 18px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  display: flex !important;
  flex-direction: column !important;
}
.brew-photo-wrap {
  aspect-ratio: 5 / 7 !important;
  width: 100% !important;
  background: #0a0807 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  display: block !important;
  margin: 0 0 18px !important;
}
.brew-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.brew-body-wrap {
  padding: 0 !important;
  gap: 8px !important;
  align-items: flex-start !important;
}
.brew-soon-badge {
  order: 0 !important;
  margin: 0 !important;
}
.brew-tag {
  order: 1 !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  color: var(--text-quiet) !important;
  margin: 4px 0 0 !important;
}
.brew-name {
  order: 2 !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
  margin: 0 !important;
}
.brew-tagline {
  order: 3 !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
  margin: 2px 0 0 !important;
}

/* ============================================================
   PRICING RAIL — flat 6-up grid, no pill shape, no oval chip.
   Square-cornered tiles with name + amount stacked. Selected
   = ember border + tinted background. Single Add Fuel below.
   ============================================================ */
.tier-rail {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  width: 100% !important;
}
.tier-chip {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 4px !important;
  height: auto !important;
  min-height: 76px !important;
  padding: 12px 10px !important;
  font-family: var(--f-sans) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  box-shadow: none !important;
}
.tier-chip:hover { border-color: var(--text-quiet) !important; }
.tier-chip.is-selected,
.tier-chip[aria-pressed="true"],
.tier-chip[aria-checked="true"] {
  border-color: var(--ember) !important;
  background: rgba(239, 112, 36, 0.08) !important;
}
.tier-chip-name {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-quiet) !important;
  line-height: 1.1 !important;
}
.tier-chip.is-selected .tier-chip-name,
.tier-chip[aria-checked="true"] .tier-chip-name {
  color: var(--ember) !important;
}
.tier-chip-amount {
  display: block !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
}
.tier-summary {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  margin: 0 0 16px !important;
  text-align: center;
  min-height: 1.5em;
}
.tier-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 0 28px !important;
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #0a0807 !important;
  background: var(--ember) !important;
  border: 0 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  align-self: stretch !important;
  width: auto !important;
  min-width: 200px !important;
}
.tier-submit:hover { background: var(--ember-hover) !important; }
.tier-helper {
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--text-quiet) !important;
  margin: 8px 0 0 !important;
  text-align: center;
}

/* Center the Add Fuel + helper within the right column. */
.support-compact-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

@media (max-width: 760px) {
  .tier-rail { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .tier-chip { min-height: 68px !important; padding: 10px 6px !important; }
  .tier-chip-amount { font-size: 18px !important; }
  .tier-submit { width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 460px) {
  .tier-rail { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   IGNITION POSTER — full-width editorial image with caption.
   Replaces the prior canvas scene player on /extras/ignition/.
   ============================================================ */
.journey-poster {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg);
}
.journey-poster-figure {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  position: relative;
  background: #0a0807;
}
.journey-poster-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 68px);
  object-fit: cover;
  object-position: center;
}
/* Two stacked images crossfade between scenes. Layer A starts visible;
   when JS swaps to a new frame it preloads onto the inactive layer,
   then toggles is-active. 1.2s ease covers the swap.
   object-fit: contain so heads/feet never get cropped — sources vary
   from 16:9 to 4:3 so cover would chop the squarer ones. The figure's
   dark background fills any letterbox space invisibly. */
.journey-poster-figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0807;
}
.journey-poster-figure > .journey-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.journey-poster-figure > .journey-poster-img.is-active { opacity: 1; }
/* On phones the 16:9 box is tiny — use a friendlier 4:3 so the photo
   actually has room to read. Still contain so nothing crops. */
@media (max-width: 760px) {
  .journey-poster-figure { aspect-ratio: 4 / 3; }
}
.journey-poster-caption {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 40px 96px;
  text-align: center;
}
.journey-poster-caption .kicker {
  text-align: center !important;
  margin: 0 0 12px !important;
}
.journey-poster-title {
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  font-size: clamp(38px, 4.4vw, 64px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.0 !important;
  color: var(--text) !important;
  margin: 0 0 18px !important;
  text-shadow: 0 0 22px rgba(232, 120, 42, 0.3) !important;
}
.journey-poster-sub {
  font-family: var(--f-sans) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  margin: 0 auto 28px !important;
  max-width: 620px;
}
.journey-poster-cta { margin: 0 !important; }
@media (max-width: 760px) {
  .journey-poster-caption { padding: 36px 20px 56px; }
}

/* Hide the legacy canvas/audio overlay styles so they don't leak in. */
.journey-stage, .journey-canvas, #journey-canvas,
.journey-caption, .journey-mute, .journey-progress, .journey-overlay,
.journey-head, .journey-mark, .journey-mark-wrap,
.journey-title, .journey-sub { display: none !important; }
.journey-poster-title, .journey-poster-sub { display: block !important; }

/* ============================================================
   BREW CARDS — MINIMALIST PASS
   No card box, no border, no surface fill. Just the bag photo
   and clean caption underneath. Editorial product display.
   ============================================================ */
.brew {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.brew-photo-wrap {
  aspect-ratio: 4 / 5 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 18px !important;
  overflow: visible !important;
  padding: 0 !important;
}
.brew-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  display: block !important;
}
.brew-body-wrap {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.brew-soon-badge {
  display: inline-block !important;
  order: 0 !important;
  margin: 0 0 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ember) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.brew-tag {
  order: 1 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--text-quiet) !important;
  margin: 0 !important;
}
.brew-name {
  order: 2 !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
  margin: 2px 0 0 !important;
}
.brew-tagline {
  order: 3 !important;
  font-size: 14px !important;
  font-style: normal !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
  margin: 2px 0 0 !important;
}

/* Bag-photo grid spacing — wider gaps now that there's no card chrome. */
.brews-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 36px 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Two-by-two on mid widths. */
@media (max-width: 1199px) and (min-width: 720px) {
  .brews-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 48px 28px !important; }
}

/* Mobile: horizontal swipe carousel, 84vw card width, scroll-snap. */
@media (max-width: 719px) {
  .brews-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 16px !important;
    padding: 4px 0 16px !important;
    margin: 0 -20px !important;
  }
  .brews-grid::-webkit-scrollbar { display: none !important; }
  .brews-grid > .brew {
    flex: 0 0 78% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  .brews-grid > .brew:first-child { margin-left: 11% !important; }
  .brews-grid > .brew:last-child  { margin-right: 11% !important; }
  .brew-name { font-size: 20px !important; }
}

/* Future-footnote already removed from templates, hide if any leaks. */
.future-footnote { display: none !important; }

/* Brews lineup banner — full-width hero image above the brews row. */
.brews-lineup {
  margin: 0 auto 48px !important;
  padding: 0 !important;
  max-width: 1200px;
  display: block;
}
.brews-lineup img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
@media (max-width: 760px) {
  .brews-lineup { margin: 0 -20px 36px !important; }
  .brews-lineup img { border-radius: 0; }
}

/* ============================================================
   BRAND MOOD BAND — full-bleed atmospheric photograph with a
   short overlay quote. Sits between the brews row and the
   Station+Contact split. Pure brand atmosphere — no controls,
   no scroll-jacking, just one large editorial image.
   ============================================================ */
.mood-band {
  padding: 0 !important;
  margin: 80px 0 0 !important;
  background: var(--bg);
}
.mood-band-figure {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 720px;
  overflow: hidden;
  background: #0a0807;
}
.mood-band-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.mood-band-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 80px 40px 56px;
  background: linear-gradient(to top, rgba(7,7,7,0.85) 0%, rgba(7,7,7,0.55) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.mood-band-caption .kicker { margin: 0 !important; }
.mood-band-line {
  font-family: var(--f-sans) !important;
  font-size: clamp(20px, 2.4vw, 32px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
  margin: 0 !important;
  max-width: 760px;
  text-shadow: 0 0 22px rgba(232, 120, 42, 0.3) !important;
}
@media (max-width: 760px) {
  .mood-band { margin-top: 56px !important; }
  .mood-band-figure { aspect-ratio: 4 / 5; max-height: none; }
  .mood-band-caption { padding: 56px 20px 36px; }
}

/* Optional secondary mood strip — a 2x2 photo grid for the
   "world of Texas Fuel" feel without dominating the page.
   Lives below the lineup banner inside the brews section. #}
.mood-strip {
  margin: 0 0 56px !important;
  padding: 0 !important;
}
.mood-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
}
.mood-strip-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
@media (max-width: 760px) {
  .mood-strip-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* Compact variant — used on interior pages so the atmospheric
   image accents the section without dominating the page. */
.mood-band--compact { margin: 24px 0 16px !important; }
.mood-band--compact .mood-band-figure {
  aspect-ratio: 21 / 9;
  max-height: 460px;
}
@media (max-width: 760px) {
  .mood-band--compact .mood-band-figure {
    aspect-ratio: 4 / 3;
    max-height: none;
  }
}

/* RESTORE the falling-bean physics canvas + bean-glass blur strip
   on the homepage. Earlier passes hid them; user wants them back. */
.is-home #bean-canvas { display: block !important; }
.is-home .bean-glass  { display: block !important; }

/* FINAL GLITCH FIXES — verified live, not theoretical.
   1) Bean physics canvas was z-index:5 and floating in front of
      the brews row covering the product photos. Push it behind.
   2) The lineup.jpg shows the OLD industrial bag style which no
      longer matches the new individual Western-theme bag PNGs.
      Hide until a matching lineup shot exists. */
.is-home #bean-canvas { z-index: 0 !important; pointer-events: none; }
.is-home .bean-glass  { z-index: 1 !important; pointer-events: none; }
.coffee-band, .brews-grid, .brew, .brew-photo-wrap { position: relative; z-index: 2; }
.brews-lineup { display: none !important; }

/* Lineup banner artwork now matches the individual bag photos
   (Western/industrial theme). Show it again. */
.brews-lineup { display: block !important; }

/* BEANS BACK + PIC TRIM
   - Restore bean canvas above section backgrounds so the beans
     are actually visible when they fire. Only the brew row needs
     to sit above the canvas to keep product photos clean.
   - Hide the "meeh" forge mood band (cowboy at workbench).
   - Keep hero + lineup + individual brew cards. */
.is-home #bean-canvas { z-index: 5 !important; pointer-events: none; }
.is-home .bean-glass  { z-index: 6 !important; pointer-events: none; }
.coffee-band, .brews-grid, .brew, .brew-photo-wrap { z-index: 10; }
.mood-band { display: none !important; }

/* Correction: the "meeh" pic was actually .coffee-band-lead-img
   (lifestyle/pouring.png), NOT the mood band. Un-hide the mood
   band and hide the real culprit. */
.mood-band { display: block !important; }
.coffee-band-lead-img, .coffee-band-lead { display: none !important; }

/* ============================================================
   PREMIUM CURRENT-COFFEE CARD + BREW LIGHTBOX
   - Featured Now Pouring card gets the workshop photo as a hero
     image inside the card, premium typography below.
   - Brew cards become clickable; click opens a fullscreen
     lightbox so the bag can be enlarged and inspected.
   ============================================================ */
.coffee-band-cols {
  grid-template-columns: 1.4fr 1fr !important;
  align-items: stretch !important;
}
.coffee-band-col--featured {
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--surface-raised) !important;
}
.coffee-band-col-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
}
.coffee-band-col-body-wrap {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.coffee-band-col-title {
  font-family: var(--f-sans) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
  margin: 4px 0 6px !important;
}
@media (max-width: 760px) {
  .coffee-band-cols { grid-template-columns: 1fr !important; }
  .coffee-band-col-img { height: 180px; }
}

/* Brew cards become clickable. Hover state hints interactivity. */
.brew {
  cursor: zoom-in !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.brew:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

/* LIGHTBOX overlay. Built by brew-lightbox.js when a brew is clicked. */
.brew-lightbox {
  position: fixed; inset: 0;
  background: rgba(7,7,7,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  backdrop-filter: blur(8px);
}
.brew-lightbox.is-open { display: flex !important; }
.brew-lightbox-inner {
  max-width: min(900px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.brew-lightbox-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
}
.brew-lightbox-caption {
  text-align: center;
  color: var(--text);
}
.brew-lightbox-name {
  font-family: var(--f-sans) !important;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.brew-lightbox-tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin: 0;
}
.brew-lightbox-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  background: rgba(7,7,7,0.6);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.brew-lightbox-close:hover { background: var(--surface-raised); }

/* ============================================================
   BEANS ON EVERY PAGE — user wants the bean physics canvas
   firing on all pages, not just /. Multiple older rules hid
   the canvas everywhere; these final overrides force it on. */
#bean-canvas {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.bean-glass {
  display: block !important;
  z-index: 6 !important;
  pointer-events: none !important;
}
/* Keep brews + interactive UI above the bean canvas so beans
   don't cover product photography or block clicks. */
/* .brew-lightbox intentionally NOT in this list — it needs to stay
   position: fixed so it overlays the viewport when opened. Forcing
   it to position: relative collapses the modal back into the page
   flow and the click-to-enlarge silently appears off-screen. */
.coffee-band, .brews-grid, .brew, .brew-photo-wrap,
.coffee-band-col, .split-card, .support-compact-grid,
.brand-nav, .pay-modal,
.subpage-hero .wrap, .about-block .wrap {
  position: relative; z-index: 10;
}

/* ============================================================
   3 BUG FIXES — mobile selection / bag tap freeze / grinder blur

   Bug 1 — Bean spray onto an <img> triggered iOS long-press / image
   selection. Beans are decorative; touches that overlap images should
   never invoke the save-image menu, drag, or text selection.

   Bug 2 — Tapping a brew card froze mobile and didn't enlarge. Caused
   by the inline onerror loop (img re-fired on every retry) + iOS
   callout menu intercepting the tap before the click handler fired.

   Bug 3 — Footer monogram ("grinder at the bottom") was getting blurred
   by the .bean-glass strip because the strip's z-index sat above the
   footer content while their stacking contexts overlapped on scroll.
   ============================================================ */

/* Bug 1: lock decorative imagery from selection/callout/drag. */
.hero-photo,
.brew-photo,
.brews-lineup img,
.mood-band-img,
.coffee-band-col-img,
.foot-mark,
.brand-mark-wordmark,
.hero-wordmark,
.origin-strip-img,
.brew-lightbox-img,
#bean-canvas,
.bean-glass {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

/* Bug 2: tap a brew → lightbox. Kill iOS callout, lighten transitions,
   make the whole card a clean tap target. */
.brew {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  transition: transform 0.18s ease !important; /* explicit single prop, no `all` cascade */
}
.brew-photo, .brew-photo-wrap {
  pointer-events: none !important; /* taps go straight to the article */
}
.brew:active { transform: scale(0.985); }

/* Bug 3: keep the footer monogram (and the rest of the footer)
   above the .bean-glass frosted strip so backdrop-filter never
   blurs it. */
.foot          { position: relative; z-index: 20 !important; }
.foot-mark     { position: relative; z-index: 21 !important; }
.bean-glass    { z-index: 6 !important; }

/* Bug 3 follow-up — earlier z-index bump only saved the footer monogram.
   The grinder wheels are drawn on the bean canvas at the bottom of the
   page, and bean-glass sits above it with backdrop-filter: blur, so the
   wheels were still smeared. Removing bean-glass entirely. Bean physics
   are unaffected — only the frosted-shelf cosmetic strip is gone. */
.bean-glass, .grinder-blur, .grinder-fog { display: none !important; }

/* ============================================================
   COFFEE SECTION RESTRUCTURE
   - Drop the dead House Brews text column that was leaving blank space.
   - Now Pouring becomes a full-width premium card (image left, copy right).
   - House Brews intro sits DIRECTLY above the bag cards — no text-then-
     pics-later split, no lineup-then-pics repetition.
   - Bag photos render with object-fit: contain so the bag is whole
     instead of cropped goofy at the edges.
   ============================================================ */
.now-pouring {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 0 !important;
  margin: 0 auto !important;
  max-width: 1100px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.now-pouring-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  min-height: 320px;
}
.now-pouring-body {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
}
.now-pouring-title {
  font-family: var(--f-sans) !important;
  font-weight: 600 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  color: var(--text) !important;
  margin: 4px 0 6px !important;
}
.now-pouring-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 460px;
}
@media (max-width: 760px) {
  .now-pouring { grid-template-columns: 1fr !important; }
  .now-pouring-img { min-height: 220px; max-height: 260px; }
  .now-pouring-body { padding: 22px 22px 26px; }
}

/* HOUSE BREWS — intro and grid as one cohesive block. */
.house-brews {
  padding: 64px 40px 80px !important;
  background: var(--bg);
  text-align: center;
}
.house-brews .kicker { text-align: center !important; margin: 0 0 10px !important; }
.house-brews-title {
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  margin: 0 0 12px !important;
  color: var(--text);
}
.house-brews-line {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 auto 36px !important;
  max-width: 640px;
}
@media (max-width: 760px) {
  .house-brews { padding: 48px 20px 56px !important; }
  .house-brews-line { margin-bottom: 28px !important; }
}

/* BAG PHOTOS — final aspect + fit. Earlier cascade had cover winning
   somewhere; this is the last rule and wins decisively. The bag PNGs
   are ~4:5 so the contain frame matches the artwork and there's no
   goofy crop. */
.brew-photo-wrap {
  aspect-ratio: 4 / 5 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.brew-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* User feedback: 4 full-bleed lifestyle photos was too many on the
   HOMEPAGE specifically. Scope these hides to .is-home so the
   mood-band component is still available on /station/ and /about/
   where photos were explicitly requested. */
.is-home .origin-strip { display: none !important; }
.is-home .mood-band    { display: none !important; }

/* ============================================================
   IGNITION PLAY OVERLAY — centered play/pause on the coffee-hunter
   photo, progress strip slides in at the bottom of the figure once
   audio is running. Keeps the editorial poster look until video lands.
   ============================================================ */
.journey-poster-figure {
  position: relative;
  cursor: pointer;
}
.journey-poster-img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.journey-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid rgba(232, 120, 42, 0.85);
  background: rgba(7, 7, 7, 0.55);
  color: #f1ece3;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, opacity 0.45s ease;
  z-index: 5;
}
/* Auto-hide while playing — JS toggles .is-idle after a few seconds
   with no pointer movement. Pointer movement or touch re-shows it. */
.journey-play.is-idle {
  opacity: 0;
  pointer-events: none;
}
.journey-play:hover {
  background: rgba(232, 120, 42, 0.22);
  transform: translate(-50%, -50%) scale(1.05);
  border-color: #ff8438;
}
.journey-play-icon--play  { display: inline-block; margin-left: 4px; } /* optical center */
.journey-play-icon--pause { display: none; letter-spacing: 2px; }
.journey-play.is-playing .journey-play-icon--play  { display: none; }
.journey-play.is-playing .journey-play-icon--pause { display: inline-block; }

@media (max-width: 760px) {
  .journey-play { width: 78px; height: 78px; font-size: 24px; }
}

.journey-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 24px 16px;
  background: linear-gradient(to top, rgba(7,7,7,0.85), rgba(7,7,7,0));
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 4;
}
.journey-progress.is-visible { opacity: 1; }
.journey-progress-fill {
  height: 3px;
  width: 0%;
  background: #ef7024;
  border-radius: 2px;
  transition: width 0.12s linear;
}
.journey-progress-time {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cbc6bd;
}

/* The bare <audio> element stays hidden — overlay controls drive it. */
#journey-audio { display: none; }

/* ============================================================
   MOBILE BREWS — make horizontal scroll obvious + photo fit
   - Show a clear sliver of the next card so swipe is implied.
   - Add a pagination row underneath (•••• ) that highlights the
     current card so users can SEE there's more than one.
   - Tiny "swipe →" label below the row, only on small screens.
   - Force every bag photo to object-fit: contain on mobile so the
     artwork isn't cropped at the edges.
   ============================================================ */

@media (max-width: 760px) {
  /* Make the next-card edge visibly peek. Shrink card width, kill the
     wide inter-card gap, lead with a small margin so card 2's left edge
     is obvious. Snap-stop so each swipe lands cleanly. */
  .brews-grid {
    gap: 16px !important;
    scroll-padding-left: 6% !important;
    padding-bottom: 4px !important;
  }
  .brews-grid > .brew {
    flex: 0 0 76% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
  .brews-grid > .brew:first-child { margin-left: 6% !important; }
  .brews-grid > .brew:last-child  { margin-right: 6% !important; }

  /* Bag photos: contain, never cropped, full bag visible. */
  .brew-photo-wrap {
    aspect-ratio: 4 / 5 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .brew-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Now Pouring image — cap height so it doesn't dominate mobile scroll. */
  .now-pouring-img { max-height: 240px !important; object-position: center 30% !important; }
}

/* Pagination dots + swipe hint built by JS just under the brews row. */
.brews-pagination {
  display: none;
  margin: 12px auto 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.brews-pagination .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(241, 236, 227, 0.22);
  transition: background 0.18s ease, transform 0.18s ease;
}
.brews-pagination .dot.is-active {
  background: var(--ember);
  transform: scale(1.25);
}
.brews-swipe-hint {
  display: none;
  text-align: center;
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin: 10px 0 0;
}
.brews-swipe-hint .arrow { display: inline-block; animation: swipeNudge 1.6s ease-in-out infinite; }
@keyframes swipeNudge {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(6px); opacity: 1; }
}
@media (max-width: 760px) {
  .brews-pagination { display: flex !important; }
  .brews-swipe-hint { display: block !important; }
}

/* ============================================================
   BEAN-GLASS KILL — earlier rules with .is-home class specificity
   were re-enabling the fixed frosted strip at the bottom of the
   viewport, which sat on top of the bean canvas and made shot
   beans appear stuck behind a black bar at the grinder. Higher
   specificity + later in the cascade beats them all.
   ============================================================ */
body .bean-glass,
.is-home .bean-glass,
.is-home body .bean-glass {
  display: none !important;
}

/* ============================================================
   TIER RAIL — fix orphan-row left shift

   The tier rail has 5 numbered $ chips + 1 "Custom" chip that
   spans the full row. On narrow viewports the 3-column grid
   leaves chip 5 in column 2 with column 3 empty, so the row
   looks shifted left. Switch to flex + center so the orphan
   row centers, and keep the Custom chip full-width.
   ============================================================ */
@media (max-width: 760px) {
  .tier-rail {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .tier-rail .tier-chip {
    flex: 0 0 calc(33.333% - 6px) !important;
    box-sizing: border-box;
  }
  .tier-rail .tier-chip:last-child {
    flex: 0 0 100% !important;
  }
}
@media (max-width: 460px) {
  .tier-rail .tier-chip {
    flex: 0 0 calc(50% - 4px) !important;
  }
}

/* ============================================================
   BEAN CANVAS — sit ABOVE content blocks so beans don't disappear

   Many content sections (coffee-band, brews-grid, brew, split-card,
   support-compact-grid, footer) sit at z:10–20 with opaque dark
   backgrounds. The bean canvas was at z:5, so beans falling over
   those sections vanished into them, which looked like the beans
   were "passing behind dimensions" of the page.

   Bumping the canvas to z:30 keeps beans visible everywhere on
   the page. It stays below the nav (z:50) and modals/lightboxes
   (z:200) and still has pointer-events:none so it never blocks
   clicks or scrolling.
   ============================================================ */
body #bean-canvas,
.is-home #bean-canvas {
  z-index: 30 !important;
  pointer-events: none !important;
}

/* ============================================================
   STORY TEASER — homepage tile linking to /about/

   Horizontal card on desktop (thumbnail left, copy right),
   stacks vertically on phones. The thumbnail has a play glyph
   overlaid so it reads as "watch" even before you click in.
   Whole card is the link.
   ============================================================ */
.story-teaser {
  padding: 40px 24px 16px;
  position: relative;
  z-index: 10;
}
.story-teaser-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(241, 236, 227, 0.10);
  border-radius: 4px;
  background: rgba(16, 16, 15, 0.65);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.story-teaser-card:hover,
.story-teaser-card:focus-visible {
  border-color: rgba(232, 120, 42, 0.55);
  background: rgba(20, 16, 12, 0.85);
  transform: translateY(-1px);
}
.story-teaser-thumb {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: #0a0807;
}
.story-teaser-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.story-teaser-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 120, 42, 0.85);
  background: rgba(7, 7, 7, 0.55);
  color: #f1ece3;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px; /* optical-center the triangle */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.story-teaser-card:hover .story-teaser-play {
  background: rgba(232, 120, 42, 0.25);
  transform: translate(-50%, -50%) scale(1.06);
}
.story-teaser-body { padding: 4px 0; }
.story-teaser-body .kicker { margin: 0 0 6px; }
.story-teaser-title {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text);
}
.story-teaser-sub {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: var(--text-quiet);
  margin: 0;
}
@media (max-width: 640px) {
  .story-teaser { padding: 28px 16px 8px; }
  .story-teaser-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }
  .story-teaser-thumb { aspect-ratio: 16 / 9; }
  .story-teaser-title { font-size: 18px; }
  .story-teaser-sub { font-size: 13px; }
}

/* ============================================================
   ABOUT WATCH PROMPT — small line under the About hero telling
   users to press play below. Plays the triangle in ember orange
   so it ties to the play button in the slideshow.
   ============================================================ */
.about-watch-prompt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.about-watch-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(232, 120, 42, 0.7);
  color: var(--ember);
  font-size: 10px;
  padding-left: 2px;
}

/* ============================================================
   STATION EQUIPMENT BAND — text + machine photo side-by-side

   Two-column grid on desktop (copy left, JURA shot right);
   stacks vertically on phones with the photo below the copy.
   The image sits on a dark background so it reads like an
   editorial product shot rather than a stock catalog image.
   ============================================================ */
.station-equipment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.station-equipment-body { padding: 8px 0; }
.station-equipment-figure {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0807;
}
.station-equipment-figure > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 760px) {
  .station-equipment-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Optional caption under a mood-band photo — used on /station/
   for the room shot ("The station — Dallas, dusk"). */
.mood-band-caption {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quiet);
  text-align: center;
  margin: 12px 0 0;
}

/* ============================================================
   JOURNEY VIDEO — the real 5:05 origin film. Replaces the
   earlier photo crossfade. Native HTML5 controls; user can
   fullscreen via the browser control. Lives in the same
   .journey-poster-figure frame so the aspect ratio stays
   consistent (16:9 desktop, 4:3 mobile).
   ============================================================ */
.journey-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #0a0807;
}

/* ============================================================
   FILM MODAL — fullscreen video overlay opened by the homepage
   teaser tile. Pauses + rewinds on close so each play starts
   from the opening shot. z-index above everything but kept
   below the global nav so the close affordance reads clear.
   ============================================================ */
.film-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.film-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.film-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,7,7,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.film-modal-card {
  position: relative;
  width: 100%;
  max-width: 1280px;
  background: #0a0807;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.film-modal-video {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 96px);
  display: block;
  background: #0a0807;
}
.film-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(241, 236, 227, 0.35);
  background: rgba(7, 7, 7, 0.7);
  color: #f1ece3;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.film-modal-close:hover { background: rgba(232, 120, 42, 0.4); }

/* "Read the full story" link under the teaser tile. */
.story-teaser-readmore {
  text-align: center;
  margin: 12px 0 0;
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.story-teaser-readmore a {
  color: var(--text-quiet);
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 236, 227, 0.18);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.story-teaser-readmore a:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}

/* The runtime pill in the teaser card. */
.story-teaser-runtime {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(232, 120, 42, 0.18);
  color: var(--ember);
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
}

/* The teaser is now a button — strip the default button look. */
button.story-teaser-card {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: rgba(16, 16, 15, 0.65);
  color: inherit;
}

/* ============================================================
   BREW BAG CENTERING — vertically center the bag in each card

   The .brew-photo-wrap was align-items: flex-end (bag glued to the
   bottom of the card). Center it instead so the artwork sits in
   the middle of the photo well, framed evenly top and bottom.
   ============================================================ */
.brew-photo-wrap {
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================================
   BREW ROW CENTERING — keep the 4 bags as a centered group

   At wide widths the brews grid was stretching edge to edge of
   the wrap; on a big monitor that read as "bags at the corners"
   rather than "bags as a centered display." Cap the grid width
   and center it so it always feels like a tight, framed lineup.
   The mobile carousel (≤640px) keeps its existing scroll behavior.
   ============================================================ */
@media (min-width: 641px) {
  .brews-grid {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    justify-items: center !important;
  }
}

/* ============================================================
   SCROLL PERF + GRINDER FADE + BOTTOM BREATHING ROOM

   User report: scrolling down over the brews row makes the beans
   go slow / glitchy. Root causes and fixes below.

   1. .brew-photo had TWO chained drop-shadow filters. Each drop-
      shadow forces the browser to run an SVG filter every frame
      when the bean canvas paints over it. Collapse to a single
      cheaper shadow.

   2. Isolate each brew card's painting via `contain: paint` so
      when the bean canvas repaints, it doesn't invalidate the
      brew layer's rendered pixels.

   3. Restore .grinder-fog (previously hidden) as a soft dark
      gradient at the bottom of the viewport, sitting BETWEEN
      content (z<25) and the bean canvas (z:30). Content fades
      cleanly before hitting the grinder line instead of jumping
      into the wheels.

   4. Add page-level padding-bottom so the last content section
      scrolls up ABOVE the grinder area — nothing gets stuck
      permanently underneath the wheels.
   ============================================================ */

/* 1. Single, cheaper shadow on the bag photo. */
.brew-photo {
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.72)) !important;
}

/* 2. Painting isolation so bean-canvas repaints don't touch the brew layer. */
.brew {
  contain: layout paint style;
}
.brew-photo-wrap {
  contain: paint;
  transform: translateZ(0);
}

/* 3. Revive the grinder fog fade + put it just below the bean canvas. */
body .grinder-fog,
.is-home .grinder-fog {
  display: block !important;
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  z-index: 25 !important;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10,8,7,0)    0%,
    rgba(10,8,7,0.60) 40%,
    rgba(10,8,7,0.92) 75%,
    rgba(10,8,7,1)    100%
  ) !important;
}
@media (max-width: 760px) {
  body .grinder-fog,
  .is-home .grinder-fog {
    height: 18vh;
  }
}

/* 4. Room at the bottom of the document so the tail-end of every page
   can be scrolled UP above the grinders. Matches the fog height so
   the final content can rest above the fade. */
body { padding-bottom: 24vh; }
@media (max-width: 760px) {
  body { padding-bottom: 20vh; }
}

/* ============================================================
   BREW LIGHTBOX NAV — prev/next arrows + counter

   Circular ember-outlined buttons flanking the enlarged bag.
   On phones the arrows anchor to the bottom edges so they don't
   sit over the bag artwork.
   ============================================================ */
.brew-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 120, 42, 0.8);
  background: rgba(7, 7, 7, 0.55);
  color: #f1ece3;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  z-index: 3;
  padding: 0 0 2px; /* optical center for the chevron glyph */
}
.brew-lightbox-nav:hover {
  background: rgba(232, 120, 42, 0.25);
  transform: translateY(-50%) scale(1.08);
  border-color: #ff8438;
}
.brew-lightbox-nav--prev { left: 24px; }
.brew-lightbox-nav--next { right: 24px; }
.brew-lightbox-count {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin: 10px 0 0;
}
@media (max-width: 640px) {
  .brew-lightbox-nav {
    width: 44px; height: 44px;
    font-size: 22px;
    top: auto; bottom: 24px;
    transform: none;
  }
  .brew-lightbox-nav:hover { transform: scale(1.06); }
  .brew-lightbox-nav--prev { left: 20px; }
  .brew-lightbox-nav--next { right: 20px; }
}

/* ============================================================
   BREW LIGHTBOX SLIDE — image glides out to one side and the
   next one glides in from the other. JS toggles classes; the
   transitions live here so timing/curve stay tunable.
   ============================================================ */
.brew-lightbox-img {
  transition: transform 0.22s ease, opacity 0.22s ease;
  will-change: transform, opacity;
}
.brew-lightbox-img.is-slide-out-left  { transform: translateX(-40%); opacity: 0; }
.brew-lightbox-img.is-slide-out-right { transform: translateX( 40%); opacity: 0; }
/* "Snap" start positions for the incoming image — set with the class
   applied (no transition because we force reflow before removing),
   then removing the class lets the transition take it back to 0/1. */
.brew-lightbox-img.is-slide-in-right { transform: translateX( 40%); opacity: 0; transition: none; }
.brew-lightbox-img.is-slide-in-left  { transform: translateX(-40%); opacity: 0; transition: none; }

/* ============================================================
   MOBILE SCROLL PERF — strip expensive effects off the brew
   cards on phones. The blurred ::before glow and the drop-shadow
   filter on the bag photo are decorative; on mobile GPUs they
   have to be re-composited every frame when the bean canvas
   paints on top during scroll. That was the residual lag over
   the brews row on mobile.

   Also add content-visibility: auto so off-screen brew cards
   aren't rendered at all until they scroll into view.
   ============================================================ */
@media (max-width: 760px) {
  .brew-photo-wrap::before { display: none !important; }
  .brew-photo { filter: none !important; }
  .brew {
    content-visibility: auto;
    contain-intrinsic-size: auto 640px;
  }
}

/* ============================================================
   TIER RAIL — recover the center

   The base rule sets max-width: 880px + margin-left/right: auto,
   but a later rule resets margin to 0. Result: the 880-wide tier
   row hangs to the left inside the 1200-wide wrap on desktop.
   Restore auto margins at all viewport widths above the mobile
   breakpoint so the row sits centered under the hero copy.
   ============================================================ */
.tier-rail {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   CONTACT FORM READABILITY — the field labels (NAME, EMAIL,
   REQUEST TYPE, ...) were rendering at 10.5px in a very muted
   token that read as ghost text on the dark page background.
   Bump both size and contrast so they're clearly readable
   without competing with the field values.
   ============================================================ */
.field-label {
  font-size: 12px !important;
  color: rgba(241, 236, 227, 0.72) !important;
  letter-spacing: 0.20em !important;
}
.field input,
.field textarea,
.field-select {
  color: var(--text) !important;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(241, 236, 227, 0.35);
}

/* ============================================================
   SUBPAGE HERO TIGHTENING — the /coffee/, /station/, /contact/,
   /extras/ heroes read as sparse because there's ~80px of empty
   space between the hero copy and the first content section on
   desktop. Trim to bring the next block up into view.
   ============================================================ */
.subpage-hero { padding: 64px 40px 28px !important; }
@media (max-width: 760px) {
  .subpage-hero { padding: 44px 20px 20px !important; }
}

/* ============================================================
   EXTRAS 2-CARD LAYOUT — with the Ignition film retired, the
   grid now has just two cards (Track + Game). auto-fit at 1fr
   stretches them across the full container; each card ends up
   huge on desktop with big empty poster area. Cap card width
   and center the pair so it reads as a tight pairing, not a
   wall.
   ============================================================ */
.tapedeck-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   GRINDER FADE STRENGTHENING — make the fog band deeper so
   content dissolves cleanly into it. The old gradient reached
   only 40% before the mid-tone kicked in; extend it so the
   transition reads as a real transition, not a peek.
   ============================================================ */
body .grinder-fog,
.is-home .grinder-fog {
  background: linear-gradient(
    to bottom,
    rgba(10,8,7,0)    0%,
    rgba(10,8,7,0.30) 20%,
    rgba(10,8,7,0.75) 55%,
    rgba(10,8,7,0.96) 80%,
    rgba(10,8,7,1)    100%
  ) !important;
}

/* ============================================================
   COFFEE + STATION HERO — bring the anchor photo closer to
   the hero copy. Was 28px bottom padding on subpage-hero; the
   mood-band below adds its own top margin. Zero out the gap
   between them so the photo joins the hero as one unit.
   ============================================================ */
.subpage-hero + .mood-band { margin-top: -4px; }
.mood-band--compact .mood-band-figure { margin: 0 auto; }

/* ============================================================
   EXTRAS TIGHTENING — with only 2 cards, the tapedeck-hub had
   120px top padding creating a lonely gap between the hero and
   the cards. Halve it. Also drop the poster height so the cards
   don't feel like they're mostly empty visual panel.
   ============================================================ */
.tapedeck-hub { padding: 40px 0 60px !important; }
.tapedeck-card-poster { height: 140px !important; }

/* ============================================================
   CURRENT COFFEE "LAST UPDATED" LINE — small caps timestamp
   under the status card so the user knows how fresh the data is.
   ============================================================ */
.current-coffee-updated {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  text-align: right;
  margin: 14px 0 0;
}

/* ============================================================
   HOW IT WORKS STRIP — compact 3-step row on the homepage
   immediately after the donate section. Numbered circles, one
   short line per step, "See the full manual" link at the bottom.
   ============================================================ */
.how-strip {
  padding: 44px 24px 40px;
  position: relative;
  z-index: 10;
}
.how-strip .wrap {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.how-strip-grid {
  list-style: none;
  padding: 0;
  margin: 22px 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.how-strip-step {
  padding: 22px 20px;
  background: rgba(16, 16, 15, 0.55);
  border: 1px solid rgba(241, 236, 227, 0.08);
  border-radius: 4px;
  text-align: center;
}
.how-strip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 120, 42, 0.75);
  color: var(--ember);
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
}
.how-strip-title {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.how-strip-body {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: var(--text-quiet);
  margin: 0;
  line-height: 1.5;
}
.how-strip-cta {
  margin: 6px 0 0;
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.how-strip-cta a {
  color: var(--text-quiet);
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 236, 227, 0.18);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.how-strip-cta a:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}
@media (max-width: 760px) {
  .how-strip { padding: 32px 16px 28px; }
  .how-strip-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 16px 0 16px;
  }
  .how-strip-step { padding: 18px 16px; }
  .how-strip-num { width: 32px; height: 32px; font-size: 14px; margin-bottom: 10px; }
  .how-strip-title { font-size: 16px; }
  .how-strip-body { font-size: 13.5px; }
}

/* ============================================================
   PUMP MANUAL STEPS — center the whole "how to pull a cup"
   block on the page. The steps read as a straight column
   centered under the eyebrow + title.
   ============================================================ */
.how .wrap { text-align: center; }
.how-steps {
  list-style: none;
  padding: 0;
  margin: 32px auto 24px;
  max-width: 640px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.how-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 22px;
  background: rgba(16, 16, 15, 0.55);
  border: 1px solid rgba(241, 236, 227, 0.08);
  border-radius: 4px;
}
.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 120, 42, 0.75);
  color: var(--ember);
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  font-feature-settings: 'tnum';
}
.how-step-title {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 6px 0 4px;
  color: var(--text);
}
.how-step-body {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14.5px;
  color: var(--text-quiet);
  margin: 0;
  line-height: 1.55;
}
.how-signoff {
  text-align: center;
  font-style: italic;
  color: var(--text-quiet);
  margin-top: 16px;
}