/* ---------------------------------------------------------------
   Tokens

   Palette v2 (Direction 7 — user-supplied Color Hunt palette, roles
   applied): blue is the structural/text color, amber is a
   background-only accent (fails contrast as text on white), red is
   a rare secondary highlight. --navy/--sienna/--green names kept for
   minimal-risk inheritance across the file; values now point at the
   new palette. See --navy-vivid for the more electric blue used on
   borders/badges where nothing needs to sit directly on top of it.
--------------------------------------------------------------- */
:root {
  --navy: #045f9e;
  --navy-deep: #023a61;
  --navy-tint: #dceefb;
  --navy-vivid: #007dcc;
  --sienna: #ffb900;
  --sienna-deep: #d6991b;
  --sienna-tint: #fff2d6;
  --green: #41a67e;
  --green-deep: #2c7a55;
  --green-tint: #e1f3ea;
  /* Pastel background tier — navy/green-deep are the DEEP sections, white/
     surface-alt are LIGHT, these fill the third register that gold used to
     occupy before it was restricted to text/buttons only. Both count as
     "primary colored" for the no-consecutive-colored-sections rule, so
     they still need a light/white section on both sides. Derived at
     matching HSL lightness/saturation (30%, 87%) so the two read as a
     matched pair, not arbitrary picks — lightened from the original
     (32%, 79%) per feedback that the first pass read too heavy. */
  --sky: #d4dee8;
  --mint: #d4e8e0;
  --paper: #ffffff;
  --surface-alt: #e1e6ea;
  --ink: #1c2126;
  --slate: #4b525a;
  --slate-soft: #6b727a;
  --line: #dde1e5;

  --radius-sm: 4px;
  --radius: 10px;
  --maxw: 1180px;

  --shadow-sm: 0 1px 2px rgba(28, 33, 38, 0.08);
  --shadow: 0 16px 32px -18px rgba(28, 33, 38, 0.32);
  --shadow-lg: 0 30px 60px -24px rgba(28, 33, 38, 0.4);

  --font-display: "Roboto Slab", Georgia, serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------
   Reset & base
--------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration-color: color-mix(in srgb, var(--navy) 40%, transparent); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 2px;
}
img { max-width: 100%; }
::selection { background: var(--sienna); color: var(--ink); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

h1, h2, h3.section-title {
  font-family: var(--font-display); color: var(--ink); font-weight: 700;
  letter-spacing: -0.005em; text-wrap: pretty;
}
/* text-wrap:balance actively narrows a heading's used width to equalize
   line lengths — invisible (looks intentional) for a centered heading,
   but for the left-aligned default every other heading on the site uses,
   it leaves a large, broken-looking gap on the right whenever dynamic
   content (a city/submarket name) pushes a heading to 2 lines. Verified
   real case: "Free Vending Machines & Micro Markets for Brandon
   Businesses" wrapped after "Micro" with ~350px of empty space to its
   right. text-wrap:pretty avoids a lone orphan word on the last line
   without artificially narrowing the line — the sitewide default now,
   with balance kept only for the two known centered-heading sections. */
.centered-cta h2 { text-wrap: balance; }
h3 {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 13.5px; color: var(--navy);
  margin: 32px 0 14px;
}
/* Paragraphs span their container by default — no artificial narrow
   column — except inside an explicit two-column layout (FAQ, the evolved
   detail grid) or a card/box, which are narrow by their own boundary,
   not by an override. Set max-width: none on those exceptions directly. */
p { max-width: none; }
strong { color: var(--ink); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 12.5px; color: var(--navy);
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */
header.site-header {
  border-bottom: 3px solid var(--navy-vivid);
  background: var(--paper);
  position: sticky; top: 0; z-index: 40;
}
header.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
}
.logo { display: flex; align-items: center; }
.logo img { display: block; width: auto; }
.site-header-right { display: flex; align-items: center; gap: 4px; }
nav.site-nav { display: flex; align-items: center; gap: 4px; }
nav.site-nav a {
  color: var(--slate); text-decoration: none; font-size: 14.5px; font-weight: 700;
  padding: 9px 15px; border-radius: var(--radius-sm); transition: color 0.15s, background-color 0.15s;
}
nav.site-nav a:hover { color: var(--ink); background: var(--surface-alt); }
nav.site-nav a[aria-current="page"] { color: #fff; background: var(--navy); }
.nav-cta {
  background: var(--sienna); color: var(--navy-deep); font-weight: 800;
  font-size: 14.5px; text-decoration: none; border-radius: var(--radius-sm);
  padding: 9px 16px; margin-left: 8px; transition: background-color 0.15s;
}
.nav-cta:hover { background: var(--sienna-deep); }

/* Mobile nav toggle — hidden on desktop, where all 5 links + CTA fit on
   one line. Below ~900px the links collapse into a dropdown panel;
   the CTA itself stays visible outside the collapsed nav so the
   primary conversion action is never hidden behind the toggle. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin-left: 4px;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--navy); cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-alt); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  nav.site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); padding: 10px 20px 18px;
    border-bottom: 3px solid var(--navy-vivid); box-shadow: var(--shadow);
  }
  nav.site-nav.is-open { display: flex; }
  nav.site-nav a { padding: 12px 10px; }
}
@media (max-width: 460px) {
  .nav-cta { font-size: 13px; padding: 8px 12px; }
}

/* ---------------------------------------------------------------
   Hero — real photography, dark gradient overlay for legibility
--------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 94px 0 74px;
  color: #ece7e0;
  overflow: hidden;
  background: var(--navy-deep) center/cover no-repeat;
}
.hero.photo-breakroom { background-image: linear-gradient(100deg, rgba(2,58,97,0.94) 0%, rgba(2,58,97,0.76) 46%, rgba(2,58,97,0.46) 100%), url("/assets/img/hero-breakroom.jpg"); }
.hero .container { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--sienna); margin-bottom: 18px; }
.hero .crumb { color: #c7cbcf; }
.hero .crumb a { color: #c7cbcf; }
.hero .crumb a:hover { color: var(--sienna); }
.hero h1 {
  color: #fff;
  font-size: clamp(38px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 20px; max-width: 780px;
}
.hero p.lede { font-size: 18.5px; color: #d6d2cb; max-width: 620px; margin: 0 0 0; }
/* Simple single-column inner-page heroes (contact, how-it-works, request-
   service, etc.) have no second column competing for width, so the lede
   should fill the section instead of wrapping at the two-column cap
   above. */
.hero:not(.photo-breakroom) p.lede { max-width: none; }
.hero .hero-subline { font-size: 13.5px; color: #b7c1c9; margin: 14px 0 0; font-weight: 700; }
.hero .btn { margin-bottom: 28px; }
.hero .trust-strip { margin-top: 4px; }

/* One orchestrated entrance — the page's single deliberate motion moment */
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero .eyebrow, .hero h1, .hero p.lede, .hero-grid #hero-form {
  animation: hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero .eyebrow { animation-delay: 0s; }
.hero h1 { animation-delay: 0.09s; }
.hero p.lede { animation-delay: 0.18s; }
.hero-grid #hero-form { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero p.lede, .hero-grid #hero-form { animation: none; }
}

/* Form column widened and given more breathing room from the left
   (1.05fr vs the old 1.15fr) so the extra ~half-inch of card width
   shifts the form toward the section's center instead of just pushing
   its right edge further out. */
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-grid .lead-form { max-width: 488px; margin: 0 auto; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .lead-form { max-width: none; }
}

/* Trust bar — full-width solid strip beneath the hero. */
.trust-bar { background: var(--sienna); padding: 20px 0; }
.trust-bar .container {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px;
}
.trust-bar-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--navy-deep); font-weight: 700; font-size: 14.5px;
}
.trust-bar-item::before { content: "\2713"; font-weight: 800; }

/* Green variant — white on this green measures ~3.0:1, which only
   clears WCAG's 3:1 bar if the text qualifies as "large" (>=18.66px
   bold) — bumped size to actually clear that threshold, not just
   look bigger. */
.trust-bar.green-bg { background: var(--green); }
.trust-bar.green-bg .trust-bar-item { color: #fff; font-size: 19px; font-weight: 800; }
.trust-bar.green-bg .trust-bar-item::before {
  content: "\2713"; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--sienna); color: var(--navy-deep); font-size: 12px; font-weight: 800;
}

/* "Choose Your Market" — light red-tinted section */
section.block.green { background: var(--green-tint); }
section.block.green h2 { color: var(--ink); }
section.block.green .section-note { color: var(--slate); }
.commitment-card {
  background: var(--paper); border-top: 3px solid var(--green);
  border-radius: var(--radius-sm); padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.commitment-card strong { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.commitment-card p { color: var(--slate); margin: 0; font-size: 14.5px; }

/* Reassurance band — light, subtly textured, no photo/dark block */
.band {
  position: relative; overflow: hidden; padding: 64px 0;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(115deg, rgba(35,38,42,0.035) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(25deg, rgba(35,38,42,0.03) 0 1px, transparent 1px 130px);
  color: var(--slate);
}
.band .container { position: relative; z-index: 1; }
.band h2 { color: var(--ink); }
.band .section-note { color: var(--slate); margin: 0 0 8px; }
.reassure-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); margin-top: 24px; }
.reassure-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.reassure-card .q { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: 15.5px; }
.reassure-card .a { color: var(--slate); font-size: 14.5px; margin: 0; }
.reassure-card .a .normalize { color: var(--slate-soft); font-style: italic; }
.reassure-card .a .resolve { color: var(--navy); font-weight: 700; }

/* ---------------------------------------------------------------
   Buttons — amber background needs dark text, not white
--------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--radius-sm);
  background: var(--sienna); color: var(--navy-deep); font-weight: 800; font-size: 15px;
  font-family: var(--font-body);
  text-decoration: none; border: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { background: var(--sienna-deep); box-shadow: var(--shadow); transform: translateY(-2px); }
.btn-wrap { display: flex; justify-content: center; max-width: none; }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn.secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); box-shadow: none; }
.btn.secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* ---------------------------------------------------------------
   Sections
--------------------------------------------------------------- */
section.block { padding: 64px 0 72px; }
section.block.alt { background: linear-gradient(180deg, #B7BFC6 0%, #FFFFFF 100%); }
/* city-industry.njk's two "Looking for Something Different?" panels read
   as one paired unit (per BC) — the standard 72px+64px = 136px gap
   between sections was too much space between two cards that belong
   together, and the shared .block.alt gradient above was fully white by
   the time it reached the gap, so the plain-white section right after it
   didn't read as a real change at all. Scoped to these two sections by a
   dedicated class rather than editing .block/.block.alt directly, which
   are also used by city-hub.njk and submarket-hub.njk's own unrelated
   grey sections. */
section.block.related-panels-top { padding-bottom: 24px; background: linear-gradient(180deg, #B7BFC6 0%, #B7BFC6 60%, #FFFFFF 100%); }
section.block.related-panels-bottom { padding-top: 24px; }
/* "How We Work" (.flow-block-v2) previously had its own lighter, diagonal
   override here so it read as distinct from the shared .block.alt gray.
   Removed per BC (2026-08-25): every grey section should share the same
   top-to-bottom medium-grey-to-white treatment, so this now just inherits
   the rule above like every other .block.alt section. */

/* Blue section titles on every grey/white-background section across the
   home, city, and industry templates specifically (per BC, 2026-08-25) —
   paragraph/body text stays its normal color, only the h2 changes. Scoped
   to each section's own class/marker rather than a blanket `.block h2`
   rule so pages outside these three templates (Solutions, Services,
   Markets) that reuse the plain .block class are unaffected. .title-blue
   is a marker class added directly to the plain (unclassed) .block
   sections on city-hub.njk and industry-hub.njk that needed one. */
section.block.alt h2,
section.block.textured h2,
section.block.program-specs h2,
section.block.sky h2,
section.block.title-blue h2,
section.block.industries-block h2,
.calculator-block h2,
.faq-panel h2,
.flow-card h2 {
  color: var(--navy);
}
/* Light blue fading to white, per BC. Direction is white-at-top,
   light-blue-at-bottom rather than the literal reading — this section
   sits between Smarter Technology (gray) above and the final CTA
   (white) below; light-blue-at-top would nearly vanish against gray,
   and white-at-bottom would create an invisible seam against the CTA's
   white section right after it (the same "two whites in a row" issue
   from earlier). Reversed, both ends land on genuinely different tones
   from their neighbors. */
section.block.industries-block { background: linear-gradient(160deg, #ffffff 0%, var(--navy-tint) 100%); }
section.block.navy { background: var(--navy); color: #eef1f5; }
section.block.navy h2 { color: #fff; }
section.block.navy .section-note { color: #eef1f5; }
section.block.forest { background: var(--green-deep); color: #eef1f5; }
section.block.forest h2 { color: #fff; }
section.block.forest .section-note { color: #eef1f5; }
h2 { font-size: clamp(27px, 3.6vw, 42px); letter-spacing: -0.015em; margin: 0 0 6px; }
.market-title { font-size: clamp(34px, 4.6vw, 54px); margin-bottom: 12px; }

/* "About [Industry] Vending" — was a single paragraph floating alone in
   a full-width forest section (dead space on anything wider than the
   text column). Source photos vary wildly in native aspect ratio across
   industries (square, portrait, landscape); the parent grid stretches
   both columns to match the (variable-length) paragraph's height, and
   object-fit:cover fills that exact height without distortion — so the
   photo always reads as the same size as the text beside it instead of
   an independently-sized element that happens to sit next to it. */
.about-industry-photo {
  width: 100%; height: 100%; min-height: 260px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); display: block;
}

/* Local submarket detail — replaces a run-on sentence of semicolon-joined
   "Name — description" fields with real name+detail cards, on the same
   dark-glass-card family already used elsewhere on forest/navy sections
   (.proof-card/.tech-card/.zero-card: rgba(2,58,97,0.55) + sienna top
   border), so this doesn't introduce a new card style. */
.submarket-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 28px; }
.submarket-item {
  background: rgba(2,58,97,0.55); border-top: 3px solid var(--sienna);
  padding: 18px 20px; backdrop-filter: blur(2px);
}
.submarket-item strong { display: block; color: #fff; font-size: 15px; margin-bottom: 6px; }
.submarket-item p { color: #eef1f5; margin: 0; font-size: 13.5px; line-height: 1.5; }

/* Mobile sticky CTA — city x industry combo pages only for now. Avoids
   the multi-thousand-pixel round trip back to the hero form every time a
   mobile visitor taps a mid-page "Check Your Location" link; desktop is
   unaffected since the hero form is already on-screen there. */
.mobile-sticky-cta { display: none; }
@media (max-width: 860px) {
  .mobile-sticky-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--navy-deep); padding: 12px 18px;
    box-shadow: 0 -8px 20px -8px rgba(2,10,20,0.4);
  }
  .mobile-sticky-cta span { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; }
  .mobile-sticky-cta .btn { flex: none; padding: 10px 18px; font-size: 13.5px; }
  /* Room for the fixed bar so it doesn't cover the last section/footer. */
  body:has(.mobile-sticky-cta) { padding-bottom: 64px; }
}

/* Testimonial spotlight: the same .testimonial-card used in the homepage's
   3-up grid, but featured alone and centered — for a city-industry page,
   a single real, directly-relevant quote (matching this exact city AND
   industry) is worth more than a repeat of the generic homepage set. */
.testimonial-spotlight { max-width: 560px; margin: 40px auto 0; }
.testimonial-spotlight .testimonial-card { padding: 32px 34px 34px; }
.testimonial-spotlight .testimonial-quote { font-size: 17px; }
/* Plain-text checklist for a forest/navy section — no colored circle
   background (would blend into a same-hue section), just a lightened
   accent glyph, same #ffd35c already proven contrast-safe on these
   dark backgrounds elsewhere (.zero-card strong). */
/* "The Challenges We Solve" — each pain point gets its own card instead
   of competing as a sidebar list next to unrelated copy; same sienna-
   top-accent family as the rest of the site's card language. Section
   swapped to a navy background (was white) — cards are light/white
   accordingly, per the dark-section-needs-light-card pairing rule (a
   navy card here would blend straight into the navy section). */
.pain-point-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 8px; }
.pain-point-card {
  background: #fff; border-top: 3px solid var(--sienna); border-radius: var(--radius);
  padding: 22px 24px 24px; box-shadow: var(--shadow-sm);
}
/* Each card used to just state the problem with nothing about the fix
   sitting next to it. The solution line is visually distinct from the
   problem headline (lighter weight, muted color, a small labeled lead-in
   with a sienna accent dot for the same accent without relying on
   sienna as small text, which fails contrast on either background). */
.pain-point-problem { color: var(--navy-deep); font-weight: 700; font-size: 15.5px; line-height: 1.4; margin: 0 0 12px; }
.pain-point-solution { color: var(--slate); font-weight: 400; font-size: 14px; line-height: 1.55; margin: 0; }
.pain-point-solution-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 11px; color: var(--navy-deep); margin-right: 6px;
}
.pain-point-solution-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sienna); display: inline-block; flex-shrink: 0;
}
.section-note { color: var(--slate); margin: 0 0 22px; max-width: none; font-size: 18px; }

.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Proof cards — layered/elevated so they read as floating panels, not a
   flat tint with a colored line on top. Dark navy-tinted glass, not a
   light overlay: the section is flat trust-bar green with white text
   throughout, and white needs a darker card to read against. 0.55
   measured to clear 4.5:1 for white body text and 3:1 for the gold
   accent used elsewhere in this section. */
.proof-card {
  background: rgba(2,58,97,0.55); border-top: 3px solid var(--sienna); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: 0 16px 30px -16px rgba(1, 10, 20, 0.5);
  backdrop-filter: blur(2px);
}
.proof-card strong { display: block; font-family: var(--font-display); font-size: 18px; color: #fff; margin-bottom: 8px; }
.proof-card p { color: #eef1f5; margin: 0; font-size: 14.5px; }

/* The one focal section on the page — the answer to "how do I get a
   machine." A single decorative reinforcement, not repeated elsewhere. */
section.flow-block { position: relative; overflow: hidden; }
section.flow-block::before {
  content: ""; position: absolute; top: -18%; left: 62%; width: 640px; height: 640px;
  background: radial-gradient(circle, color-mix(in srgb, var(--sienna) 30%, transparent) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
section.flow-block .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   FAQ
--------------------------------------------------------------- */
.faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
.faq-item:last-child { padding-bottom: 0; }
.faq-item dt { font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.faq-item dd { margin: 0; color: var(--slate); }

/* FAQ band — the vending photo shows through at full visibility, no
   dark overlay. Deliberately ink-free/blue-free too — keeps the page
   from closing on three straight blue sections (Industry -> FAQ ->
   footer), now via a neutral photo edge instead of an ink tint. */
.faq-band {
  position: relative; overflow: hidden; padding: 72px 0;
  background: var(--surface-alt) center/cover no-repeat;
  /* Navy gradient scrim at 50% (half the hero's own opacity values —
     0.94/0.76/0.46 halved to 0.47/0.38/0.23) per BC, restoring some
     depth over the photo without going back to a full dark overlay. */
  background-image: linear-gradient(100deg, rgba(2,58,97,0.47) 0%, rgba(2,58,97,0.38) 46%, rgba(2,58,97,0.23) 100%), url("/assets/img/vending-detail.jpg");
}
.faq-band .container { position: relative; z-index: 1; }
/* Reverted to white panel with navy "+"/x icons per BC. */
.faq-panel {
  background: var(--paper); border-radius: var(--radius);
  padding: 40px 44px; box-shadow: var(--shadow-lg); max-width: 1040px; margin: 0 auto;
}
.faq-panel .faq-intro { max-width: none; margin: 0 0 20px; }
.faq-list { column-count: 2; column-gap: 40px; margin-top: 8px; }
.faq-acc { border-top: 1px solid var(--line); break-inside: avoid; }
.faq-acc:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .faq-list { column-count: 1; } }
.faq-acc summary {
  cursor: pointer; list-style: none; padding: 16px 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 800; color: var(--ink); font-size: 15.5px;
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary::after {
  content: "+"; flex: none; color: var(--navy); font-size: 20px; font-weight: 700;
  transition: transform 0.15s ease;
}
.faq-acc[open] summary::after { transform: rotate(45deg); }
.faq-acc .faq-acc-body { padding: 0 26px 18px 4px; color: var(--slate); font-size: 14.5px; }

/* ---------------------------------------------------------------
   Trust strip
--------------------------------------------------------------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.trust-strip span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: #fff; border: none;
  border-radius: 999px; padding: 7px 14px 7px 12px;
}

/* ---------------------------------------------------------------
   Lead form
--------------------------------------------------------------- */
.lead-form {
  background: var(--paper); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.lead-form h3 { margin-top: 0; color: var(--navy); }
.lead-form h2, .lead-form h3 { font-size: 27px; line-height: 1.25; }
.form-subnote { margin: 0 0 16px; font-size: 13px; color: var(--slate-soft); font-weight: 700; max-width: none; }
.lead-form label {
  display: block; font-size: 13px; font-weight: 800; color: var(--ink);
  margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.02em;
}
.lead-form label:first-of-type { margin-top: 0; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 15px; background: var(--surface-alt); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint);
}
.lead-form .disclosure { font-size: 12.5px; color: var(--slate-soft); margin-top: 16px; line-height: 1.55; max-width: none; }
.lead-form button { margin-top: 18px; width: 100%; justify-content: center; }
.form-success p { color: var(--ink); font-weight: 600; }

.form-progress { margin-bottom: 16px; }
.progress-track { display: flex; gap: 6px; margin-bottom: 8px; }
.progress-seg { flex: 1; height: 5px; border-radius: 999px; background: var(--line); transition: background-color 0.2s ease; }
.progress-seg.done { background: var(--sienna); }
.progress-label {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 11.5px; color: var(--navy);
}
.form-nav { display: flex; gap: 12px; margin-top: 18px; }
.form-nav button { flex: 1; margin-top: 0; }
.form-nav .btn.secondary { background: var(--surface-alt); color: var(--ink); border: 1px solid var(--line); }
.form-nav .btn.secondary:hover { background: var(--navy-tint); }

/* ---------------------------------------------------------------
   Footer — solid, substantial, ties the site together
--------------------------------------------------------------- */
footer.site-footer {
  background: var(--navy-deep); color: #b6bfc7;
  padding: 56px 0 28px; font-size: 14px;
}
footer.site-footer .foot-grid {
  display: grid; gap: 32px; grid-template-columns: 2.4fr 1fr;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
footer.site-footer .foot-brand { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: #fff; margin-bottom: 10px; }
footer.site-footer .foot-brand span { color: var(--sienna); }
footer.site-footer .foot-logo { display: block; margin-bottom: 14px; }
footer.site-footer .foot-tagline { color: #99a6b0; font-size: 16px; margin: 0; }
footer.site-footer .foot-email { margin: 14px 0 0; font-size: 16px; }
footer.site-footer ul { list-style: none; margin: 0; padding: 0; text-align: right; }
footer.site-footer ul li { margin-bottom: 9px; }
footer.site-footer a { color: #b6bfc7; text-decoration: none; font-weight: 700; }
footer.site-footer a:hover { color: var(--sienna); text-decoration: underline; }
footer.site-footer .disclosure { max-width: 760px; margin: 28px 0 14px; line-height: 1.6; color: #99a6b0; font-size: 13px; }
footer.site-footer .copyright { color: #99a6b0; font-size: 14.5px; margin: 0; }
footer.site-footer .foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px; margin-top: 20px;
}
footer.site-footer .foot-legal { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
footer.site-footer .foot-legal li { margin: 0; }
footer.site-footer .foot-legal a { font-weight: 400; color: #99a6b0; }
@media (max-width: 760px) {
  footer.site-footer .foot-grid { grid-template-columns: 1fr; }
  footer.site-footer ul { text-align: left; }
}

/* ---------------------------------------------------------------
   Breadcrumb
--------------------------------------------------------------- */
.crumb { font-size: 13px; font-weight: 700; color: var(--slate-soft); margin-bottom: 18px; }
.crumb a { color: var(--slate); text-decoration: none; }
.crumb a:hover { color: var(--navy); }

/* ---------------------------------------------------------------
   Hub lists (city / industry link tiles)
--------------------------------------------------------------- */
.hub-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hub-list a {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: var(--navy);
  border-top: 3px solid var(--sienna); border-radius: var(--radius);
  text-decoration: none; color: #fff; font-weight: 800; font-size: 15.5px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.hub-list a:hover {
  background: var(--navy-deep); box-shadow: var(--shadow); transform: translateY(-3px);
}
.hub-list a .label { display: flex; flex-direction: column; }

/* Market-overview pull quote — an oversized-typography accent so the
   section reads as more than a plain paragraph, without relying on a
   photo (per the "vary the color/interest technique" rule). */
.market-pull {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(26px, 2.8vw, 34px); line-height: 1.3;
  color: var(--green-deep); margin: 18px 0 28px; max-width: 62ch;
}

/* Neighborhood/district pills — plain descriptive tags, not links. Outlined,
   not solid-filled, so they read as labels rather than buttons (a solid
   navy pill with white bold text is indistinguishable from this site's
   actual clickable chips/CTAs, which is a false affordance). */
/* Each neighborhood now carries a real one-line blurb, not just a name,
   so a plain pill row no longer fits — same navy-card/sienna-top-accent
   family as .proof-card/.tech-card, on this section's light (surface-alt)
   background per the card-vs-section contrast rule. */
.district-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 8px; }
/* Fixed 3-up variant — used where the count (e.g. 5 real named districts)
   would otherwise leave a lone card stranded on its own row under
   auto-fit; 3 columns puts 5 items at 3-then-2 instead of 4-then-1. Flex
   (not grid) so justify-content can center a short trailing row instead
   of leaving it flush left in the first column(s). */
.district-grid.fixed-3up { display: flex; flex-wrap: wrap; justify-content: center; }
.district-grid.fixed-3up > .district-card { flex: 0 1 calc((100% - 40px) / 3); }
@media (max-width: 760px) { .district-grid.fixed-3up > .district-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 480px) { .district-grid.fixed-3up > .district-card { flex-basis: 100%; } }
.district-card {
  background: var(--navy); border-top: 3px solid var(--sienna);
  border-radius: var(--radius); padding: 20px 22px 14px;
  display: flex; flex-direction: column;
}
.district-card strong { display: block; font-family: var(--font-display); font-size: 17px; color: #fff; margin-bottom: 8px; }
.district-card p { color: #eef1f5; margin: 0; font-size: 14px; line-height: 1.5; }
.district-card p.district-target { margin-top: 10px; }
.district-card p.district-target strong { display: inline; font-family: inherit; font-size: inherit; color: #fff; margin: 0; }
/* Guarantees breathing room above the CTA divider even on the tallest
   card in a row, where the CTA's margin-top:auto collapses to zero —
   applies whether the last paragraph is the target line or (for cards
   without one yet) the plain blurb. */
.district-card p:last-of-type { margin-bottom: 12px; }
.district-card .district-cta {
  display: block; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.16);
  color: var(--sienna); font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.district-card .district-cta:hover { text-decoration: underline; }

/* Homepage industries explorer — a list + live detail pane instead of
   11 identical cards. Real <a> links throughout so it degrades to a
   plain link list with no JS and stays crawlable either way. */
.industry-explorer {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Dark navy (per BC: revert to the two-blue treatment) — this list sits
   on a plain white section, and a pale gradient there gave the panel
   nothing to catch the eye against. Group headers go navy-deep so they
   still read as dividers against the list's navy. */
.industry-list {
  display: flex; flex-direction: column;
  background: var(--navy);
}
/* Groups the 11 industries into 4 clusters instead of one flat list —
   a real cognitive-load issue at 11 undifferentiated items. Styled as
   a filled label bar, not a tracked-caps eyebrow, so it reads as a
   list divider rather than the generic AI-eyebrow pattern. */
.industry-list-group {
  margin: 0; padding: 8px 22px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
  background: var(--navy-deep); max-width: none;
}
.industry-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; text-decoration: none; color: #fff;
  font-weight: 700; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,0.14);
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.industry-list-item:last-child { border-bottom: none; }
.industry-list-item .arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; color: #ffd35c; }
.industry-list-item:hover,
.industry-list-item:focus-visible {
  background: rgba(255,255,255,0.1); padding-left: 28px;
}
.industry-list-item:hover .arrow,
.industry-list-item:focus-visible .arrow,
.industry-list-item.active .arrow { opacity: 1; transform: translateX(0); }
/* var(--sienna) measures 3.89:1 on navy (fails 4.5:1 at 16px) — the
   lightened #ffd35c token used elsewhere for gold-on-navy passes at 4.70:1. */
.industry-list-item.active { background: rgba(255,255,255,0.1); color: #ffd35c; padding-left: 28px; }
/* Detail pane — a real photo behind the copy at ~50% strength (a dark
   navy scrim over the image, not a plain flat panel), matched per
   industry so the pane visually changes, not just the text inside it. */
.industry-detail {
  position: relative; overflow: hidden; padding: 0;
  background-size: cover; background-position: center;
  transition: background-image 0.2s ease;
}
.industry-detail::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(2,58,97,0.86) 0%, rgba(2,58,97,0.55) 100%);
}
.industry-detail-inner {
  position: relative; z-index: 1; padding: 40px 36px; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.industry-detail-tag {
  align-self: flex-start; font-family: var(--font-body); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy-deep);
  background: var(--sienna); padding: 5px 12px; border-radius: 999px;
}
.industry-detail-name { font-size: clamp(22px, 2.4vw, 28px); margin: 0; color: #fff; }
.industry-detail-hook { margin: 0; color: #fff; font-size: 15.5px; line-height: 1.55; font-weight: 600; }
.industry-detail-angle { margin: 0; color: #dce8f2; font-size: 13.5px; }
.industry-detail-link {
  margin-top: 8px; align-self: flex-start; font-weight: 800; color: var(--sienna);
  text-decoration: none; font-size: 15px;
}
.industry-detail-link:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .industry-explorer { grid-template-columns: 1fr; }
  .industry-detail { border-left: none; border-top: 1px solid var(--line); }
}

/* Markets index (/markets/) — grouped by region so 50 metros stay
   scannable instead of one long flat list. "Now matching" vs
   "Onboarding" is a real status distinction (hasPublishedIndustry),
   not decorative color — that's why it gets its own two-color system
   rather than one accent color per the usual rule. */
.market-region { margin-bottom: 40px; }
.market-region:last-child { margin-bottom: 0; }
.market-region-title, .industry-group-title {
  font-size: 20px; margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--line); color: var(--ink);
}
.industry-group-title { margin-top: 36px; }
.industry-group-title:first-of-type { margin-top: 8px; }
.market-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Same navy-card/sienna-top-accent family as the industries hub list —
   every market reads the same way, since there's no "launched" vs.
   "onboarding" distinction shown to visitors anymore. */
.market-item {
  display: flex; align-items: center;
  padding: 16px 18px; background: var(--navy); border-top: 3px solid var(--sienna);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  text-decoration: none; color: #fff; font-weight: 700; font-size: 14.5px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.market-item:hover { background: var(--navy-deep); box-shadow: var(--shadow); transform: translateY(-3px); }

/* Content-rich cards for the homepage market/industry sections */
.feature-cards { display: grid; gap: 18px; }
.feature-cards.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.feature-card {
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--radius); overflow: hidden;
  padding: 24px 26px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.feature-card h3.card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink);
  text-transform: none; letter-spacing: 0; margin: 0 0 10px;
}
.feature-card p { color: var(--slate); font-size: 14.5px; margin: 0 0 16px; }
.feature-card a.card-link { font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); text-decoration: none; }
.feature-card a.card-link:hover { text-decoration: underline; }

/* Card title as the link — whole card is clickable, only the title carries the href */
.feature-card.linked { position: relative; }
.feature-card.linked h3.card-title a {
  color: inherit; text-decoration: none;
}
.feature-card.linked h3.card-title a::after { content: ""; position: absolute; inset: 0; }
.feature-card.linked:hover h3.card-title a { color: var(--navy); }
.feature-card.linked:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

/* Industry cards — each vertical's real defining trait rendered as oversized
   background type, not a label chip. The words come straight from that
   industry's own differentiation_angle in industries.json. */
.industry-card { overflow: hidden; }
.industry-card .card-tag {
  position: absolute; right: 16px; bottom: 2px; z-index: 0;
  display: block; max-width: 78%;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 6.4vw, 50px); line-height: 0.86;
  letter-spacing: -0.01em; text-transform: uppercase; text-align: right;
  color: color-mix(in srgb, var(--navy) 10%, transparent);
  pointer-events: none;
}
.industry-card .card-title, .industry-card > p { position: relative; z-index: 1; }

/* Product/services showcase — distinct banner-style heading */
.services-offer h2 {
  text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(22px, 3vw, 30px);
}
.services-offer .section-note { text-align: center; margin-left: auto; margin-right: auto; }
.services-offer .section-note .zero-cost { color: var(--ink); font-weight: 800; }
.service-card { padding: 0; overflow: hidden; }
.service-card .service-photo { width: 100%; height: 168px; object-fit: cover; display: block; }
.service-card .service-body { padding: 20px 24px 24px; }
.service-card .service-body .card-title { margin-top: 0; }

.brand-list {
  text-align: center; margin: 28px 0 0; font-size: 14.5px; color: var(--slate); max-width: none;
}
.brand-list-label { font-weight: 800; color: var(--ink); margin-right: 4px; }

/* ---------------------------------------------------------------
   Legal content (privacy, terms) — plain readable article, no new
   heading-style rules invented; scoped h2 size keeps repeated section
   headers from all rendering at full display-headline scale.
--------------------------------------------------------------- */
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content h2 { font-size: 22px; margin: 40px 0 12px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--slate); font-size: 15.5px; line-height: 1.7; }
.legal-content ul { padding-left: 22px; margin: 0 0 16px; }
.legal-content li { margin-bottom: 8px; }
.legal-content .legal-updated { color: var(--slate-soft); font-size: 13.5px; margin-bottom: 8px; max-width: none; }

/* ---------------------------------------------------------------
   Content callouts (market context, related pages)
--------------------------------------------------------------- */
.context-block {
  background: var(--surface-alt); border-radius: var(--radius);
  padding: 24px 26px; margin: 28px 0;
  border: 1px solid var(--line);
}
.context-block .eyebrow { color: var(--navy); margin-bottom: 10px; }
.context-block p:last-child { margin-bottom: 0; }

.related-links { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 20px; }
/* Each column as its own bordered panel with a plain-language label above
   the link list, so "why am I seeing this" is answered before the list
   itself — was a bare heading + list with no framing, per BC (2026-08-25). */
.related-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px 8px; }
.related-panel h3 { font-size: 15.5px; margin: 0 0 4px; }
.related-panel-note { color: var(--slate); font-size: 13.5px; margin: 0 0 4px; }
.related-links ul { list-style: none; padding: 0; margin: 0; }
.related-links li { border-top: 1px solid var(--line); }
.related-links a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14.5px;
}
.related-links a:hover { color: var(--navy); }
/* 4-column variant for a .related-panel list with enough items to fill
   multiple columns (city-industry.njk's two "Looking for Something
   Different?" panels — up to 10 other industries, up to 49 other cities).
   Scoped to this modifier class rather than changing `.related-links ul`
   itself, since submarket-hub.njk's own shorter related-panel lists there
   (a handful of nearby submarkets, a single "full metro" link) still want
   the plain single-column default. */
.related-links ul.link-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; }
@media (max-width: 900px) { .related-links ul.link-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .related-links ul.link-grid-4 { grid-template-columns: 1fr; } }
/* Removes the divider line sitting directly above the grid's top row —
   redundant right under the card's own heading/note — while keeping the
   dividers between every row after that. Column count changes at each
   breakpoint, so which nth-child cells count as "row 1" changes too: each
   query restores the border on cells that were row 1 at a wider column
   count but have dropped into row 2+ at the new one. */
.related-links ul.link-grid-4 li:nth-child(-n+4) { border-top: none; }
@media (max-width: 900px) {
  .related-links ul.link-grid-4 li:nth-child(3), .related-links ul.link-grid-4 li:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .related-links ul.link-grid-4 li:nth-child(2) { border-top: 1px solid var(--line); }
}
/* .flow-card's other use (How We Work, homepage footprint) only ever
   wraps an h2, so it has no h3 styling of its own — reset the generic h3's
   32px top margin here so the sub-heading sits flush under the card's own
   top padding instead of doubling up on space. */
.related-links .flow-card h3 { margin: 0 0 4px; font-size: 15.5px; }

/* Icon link tiles — used in place of the plain text-link list when a
   related-panel wants a livelier, more visual presentation (e.g. a
   cross-sell section that would otherwise read as flat/utility). */
.link-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 14px 0 22px; }
.link-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 20px 12px; border-radius: var(--radius); background: var(--surface-alt);
  text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.link-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: var(--paper); }
.link-tile .tile-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.link-tile .tile-icon svg { width: 22px; height: 22px; }
.link-tile .tile-label { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.link-tile:hover .tile-label { color: var(--navy); }

/* ---------------------------------------------------------------
   Draft-round additions: perception-shift table, business case,
   data section, employee-time calculator, zero-cost band
--------------------------------------------------------------- */
/* Vending-has-evolved grid — Smart Vending + Micro Markets span the top
   row, Traditional Vending is one wide band with 3 machine-type photos
   underneath, not a third identical card. */
.evolved-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Same .evolved-card photo-card look, but an auto-fill grid for a longer,
   uniform list (city-hub's "Choose Your Industry") instead of the fixed
   3-tile layout above. */
/* Flexbox, not grid: a CSS grid's justify-content centers the track set
   as a whole, but a partial last row still left-aligns within tracks
   that already span the full container. A wrapping flex row centers
   each visual line independently, so a short final row centers too. */
.evolved-grid.industry-photo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.evolved-grid.industry-photo-grid .evolved-card { flex: 0 1 290px; }
.evolved-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-top: 3px solid var(--sienna); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); background: var(--surface-alt);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.evolved-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* Section background moved to gray (surface-alt) above, so these cards
   flip to white — keeps the card visually distinct from its section
   (per the "card must differ from section" rule) and lets the product
   photos' own white backgrounds blend seamlessly with the card instead
   of showing a gray-vs-white seam around the letterboxed image. */
.evolved-grid:not(.industry-photo-grid) > .evolved-card { background: var(--paper); }
.evolved-card > img { width: 100%; height: 200px; object-fit: cover; display: block; flex: none; }
/* Smart Vending / Micro Markets photos are product shots of a whole
   machine — cropping top/bottom (the default cover above, still used for
   the industry-photo-grid's scene photos) cuts off the unit itself, so
   these shrink to fit instead. */
.evolved-grid:not(.industry-photo-grid) > .evolved-card > img { height: 268px; object-fit: contain; background: var(--paper); }
/* Matches the Traditional Vending band's photo height (268px) directly —
   BC flagged the old 248px+padding combination as reading noticeably
   smaller/more cramped than the Traditional Vending row once that row's
   photos were the same size. No inset padding needed at the larger size. */
/* flex:1 so the navy body always fills the rest of the card's height —
   otherwise a shorter description leaves the card's own light background
   (surface-alt) showing below it once the grid stretches cards in the
   same row to equal height. */
.evolved-body { background: var(--navy); color: #fff; padding: 22px 24px; flex: 1; display: flex; flex-direction: column; }
/* Overrides the base h3's uppercase tracked-label styling — this is a
   real card title ("Smart Vending", "Micro Markets"), not a small
   eyebrow-style label, so it shouldn't inherit the all-caps treatment. */
.evolved-body .card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; margin: 0 0 8px;
  text-transform: none; letter-spacing: normal;
}
.evolved-body p { color: #eef1f5; font-size: 14.5px; margin: 0; }
a.evolved-card:hover .evolved-body .card-title { text-decoration: underline; }
.evolved-body p.card-cta { margin-top: auto; padding-top: 14px; color: var(--sienna); font-weight: 700; font-size: 13.5px; }
a.evolved-card:hover .evolved-body p.card-cta { text-decoration: underline; }

/* Traditional Vending band — photos stacked above the title/description,
   not beside it, so the three machine types read as the lead content. */
.evolved-traditional { grid-column: 1 / -1; display: flex; flex-direction: column; }
.traditional-photos { display: grid; grid-template-columns: repeat(3, 1fr); }
.traditional-photo { position: relative; }
.traditional-photo img { width: 100%; height: 268px; object-fit: contain; background: var(--paper); display: block; }
.traditional-photo span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px;
  color: var(--ink); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
}
@media (max-width: 760px) {
  .evolved-grid { grid-template-columns: 1fr; }
  .traditional-photos { grid-template-columns: 1fr; }
}

/* Detailed "modern reality" bullets — the old grandfather's comparison
   chart is gone; this is the elaborated version of the same six points,
   as real sentences instead of a three-word table row. */
.evolved-detail-list {
  list-style: none; margin: 28px 0 40px; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr);
}
.evolved-detail-list li {
  position: relative; padding-left: 30px; color: var(--slate); font-size: 15px; line-height: 1.55;
}
.evolved-detail-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800;
  background: var(--green); color: #fff;
}
.evolved-detail-list strong { color: var(--ink); }
@media (max-width: 700px) { .evolved-detail-list { grid-template-columns: 1fr; } }

/* Wraps the "Vending Has Evolved" checklist in the same card shell as
   .evolved-card (border, sienna top accent, radius, shadow, surface-alt
   background) so it reads as one more card in the same family, not a
   bare list floating above the product cards. */
.evolved-checklist-card {
  border: 1px solid var(--line); border-top: 3px solid var(--sienna); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: var(--surface-alt);
  padding: 28px 30px; margin: 28px 0 20px;
}
.evolved-checklist-card .evolved-detail-list { margin: 0; }
.evolved-checklist-card .evolved-detail-list li { font-size: 18px; }

/* Homepage-only ("Vending Has Evolved," not the compact "Choose Your
   Vending Format" reused on industry/city-industry pages) — same flat
   light-gray section as How We Work, with the checklist card flipped to
   white so it still contrasts against that background instead of
   blending into it. */
.block.textured.evolved-full { background: var(--surface-alt); }
.evolved-full .evolved-checklist-card { background: var(--paper); }

.data-disclaimer { font-size: 13px; color: var(--slate-soft); margin-top: 20px; max-width: none; }
section.block.navy .data-disclaimer { color: #eef1f5; }

/* Card is dark navy, not a light tint — the calculator sits on a light
   section, and a light card there would give the eye nothing to catch
   on. Navy, not green-deep: this section directly follows "Convenience
   Has Real Value" (a full green-deep section), and a green card right
   after a green section read as a repeated color moment, not two
   distinct ones. Inputs stay white (a dark card with white/light-
   bordered fields is the standard "form on a dark surface" pattern). */
.calculator {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  background: var(--navy); border-radius: var(--radius);
  padding: 32px; margin-top: 24px; box-shadow: var(--shadow-lg);
}
.calc-inputs label {
  display: block; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  color: #eef6f1; margin: 14px 0 5px;
}
.calc-inputs label:first-child { margin-top: 0; }
.calc-inputs input {
  width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-sm);
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
}
.calc-result { text-align: center; }
.calc-number { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 64px); color: #ffe08a; line-height: 1; }
.calc-label { display: block; font-size: 14px; color: #eef6f1; margin-top: 8px; max-width: 240px; margin-left: auto; margin-right: auto; }
.calc-subnote { display: block; font-size: 12px; color: #eef6f1; margin-top: 6px; }
.data-disclaimer.wide { max-width: none; }
@media (max-width: 640px) { .calculator { grid-template-columns: 1fr; } }

.zero-cost-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); color: var(--sienna); text-align: left; margin: 0 0 32px; max-width: none; }
.zero-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.zero-card {
  background: rgba(255,255,255,0.16); border-top: 3px solid var(--sienna); border-radius: var(--radius);
  padding: 32px 26px 32px; backdrop-filter: blur(2px);
}
.zero-number { display: block; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(58px, 7.5vw, 84px); line-height: 1; margin-bottom: 12px; }
/* var(--sienna) on this navy background measures 3.9:1 (needs 4.5:1 at
   14px) — lightened just for this label rather than touching the
   shared --sienna token used everywhere else. */
.zero-card strong { display: block; color: #ffd35c; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; margin-bottom: 10px; }
.zero-card p { color: #eef1f5; margin: 0; font-size: 14.5px; }

/* Testimonials — same navy-glass card treatment as .zero-card/.tech-card
   above, on the same navy.gradient-deep section. Star color reuses the
   #ffd35c lightened sienna (plain --sienna fails 4.5:1 on this navy). */
.testimonial-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 32px; }
.testimonial-card {
  background: var(--paper); border-top: 3px solid var(--sienna); border-radius: var(--radius);
  padding: 26px 26px 28px;
}
/* Sienna-deep (not the plain lightened #ffd35c used for gold-on-navy
   elsewhere) — that lightened shade reads washed-out against a white
   card; this is a standard, legible gold star on white. */
.testimonial-stars { color: var(--sienna-deep); font-size: 18px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-quote { color: var(--ink); font-size: 16px; line-height: 1.5; margin: 0 0 18px; }
.testimonial-attribution strong { display: block; color: var(--ink); font-size: 14.5px; }
.testimonial-attribution span { display: block; color: var(--slate); font-size: 13.5px; margin-top: 2px; }

/* Smarter Technology — same flat trust-bar green as "Convenience Has
   Real Value" (var(--green), no gradient), per BC. That green is too
   light for a light-tinted glass card (checked previously: fails
   badly), so cards use the SAME dark navy-tinted glass "Convenience Has
   Real Value" uses for its own cards, at the same 0.55 opacity — proven
   to pass 4.5:1+ for white/near-white text against this exact green. */
section.block.green-deep.tech-block { background: var(--green); }
.tech-block h2 { color: #fff; }
/* Same flat --green as .block.onsite-value below, and the same contrast
   gap applies: white section-note at 18px non-bold measures ~3.01:1,
   under the real 4.5:1 (normal text) / 24px (large-text-normal) bar.
   Non-bold per BC (2026-08-26) — see the longer note on
   .block.onsite-value's section-note for the full explanation. */
.tech-block .section-note { color: #fff; }
.tech-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 32px; }
.tech-card {
  background: rgba(2,58,97,0.55); border-top: 3px solid var(--sienna); border-radius: var(--radius);
  padding: 26px 24px 28px; backdrop-filter: blur(2px);
}
.tech-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 16px;
  background: rgba(255,255,255,0.16); color: #fff;
}
.tech-icon svg { width: 20px; height: 20px; }
.tech-card strong { display: block; font-size: 16px; color: #fff; margin-bottom: 6px; }
.tech-card p { color: #eef1f5; margin: 0; font-size: 14px; }

/* Gradient depth — homepage-only modifier, layered on top of the
   existing shared navy/forest section colors rather than changing
   them, so other pages using .block.navy / .block.forest are untouched. */
.block.navy.gradient-deep { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
/* var(--green) as the lighter stop measured 2.6:1 for the white proof-card
   text sitting on top (needs 4.5:1) — a gradient's lightest point has to
   clear contrast too, not just its darkest. Both stops now sit dark enough
   for white text throughout. */
.block.forest.gradient-deep { background: linear-gradient(135deg, var(--green-deep) 0%, #12291b 100%); }

/* Flat solid trust-bar green, per BC — no gradient, no photo blend, and
   deliberately NOT the .forest/.gradient-deep classes (that base rule
   is 3 classes' worth of specificity and was silently overriding this
   flat fill — dropped those classes from the section entirely rather
   than fight it). White measures 3.01:1 against it, which only clears
   WCAG's large-text bar (>=18px normal or >=14px bold) — fine for the
   H2. Cards get a dark overlay (not the light-tinted glass used
   elsewhere) specifically so white text on them passes normal-text
   contrast too. */
.block.onsite-value { background: var(--green); }
.block.onsite-value .container { position: relative; z-index: 1; }
.block.onsite-value h2 { color: #fff; }

/* Service-page "About" tiles section — same flat trust-bar green as
   .onsite-value/.tech-block, per BC (2026-08-28): ties the section
   visually to the trust bar instead of the darker forest green used
   elsewhere, and (like .tech-card on .tech-block) the navy-glass cards
   already pass contrast against this exact green. */
.block.trust-green { background: var(--green); }
.block.trust-green h2 { color: #fff; }
.block.trust-green .section-note { color: #fff; }
/* White, non-bold, 18px per BC (2026-08-26) — flagged, not silently
   fixed: plain-weight white measures 3.01:1 on this green, which fails
   the real WCAG large-text cutoff (24px normal, not 18px — the "18px
   normal" figure two lines up is this project's own long-standing
   shorthand for the bold threshold, not the normal-weight one; the
   actual normal-weight large-text minimum is 18pt/24px). A prior round
   used bold specifically to legitimately clear 14pt/~18.66px bold
   instead. Removing bold at 18px reopens that contrast gap — flagged to
   BC to pick a real fix (darker text color, or size up to 24px) rather
   than left silently non-compliant. */
.block.onsite-value > .container > .section-note { color: #fff; }
.section-note.wide { max-width: none; }
.stat-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); margin-top: 36px; }
.big-stat {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  background: rgba(2,58,97,0.55); border-top: 3px solid var(--sienna); border-radius: var(--radius);
  padding: 26px 28px; backdrop-filter: blur(2px);
}
.big-stat-number {
  font-family: var(--font-display); font-weight: 700; color: var(--sienna);
  font-size: clamp(56px, 8vw, 92px); line-height: 1; flex: none;
}
/* min-height reserves 2 lines regardless of actual wrap count, so the
   <p> below it lines up at the same Y in both cards even though the
   two headlines are different lengths (one wraps to 2 lines, the other
   to 1) — align-items:flex-start on .big-stat only aligns the number
   and this whole copy block to each other, not the <p> inside it. */
.big-stat-copy strong { display: block; color: #fff; font-size: 17px; line-height: 1.3; min-height: 2.6em; margin-bottom: 6px; max-width: 46ch; text-wrap: pretty; }
.big-stat-copy p { color: #eef1f5; font-size: 13.5px; margin: 0; max-width: 52ch; }

/* Section texture — subtle diagonal hairlines, used sparingly (the two
   flattest, most image-free sections) so it reads as a considered
   choice rather than a texture slapped on everything */
.block.textured {
  position: relative; overflow: hidden;
  background-image:
    repeating-linear-gradient(115deg, rgba(28,33,38,0.035) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(25deg, rgba(28,33,38,0.03) 0 1px, transparent 1px 130px),
    linear-gradient(180deg, #B7BFC6 0%, #FFFFFF 100%);
}
.block.textured .container { position: relative; z-index: 1; }


/* "Vending Program Characteristics" — plain gray section (no photo),
   framed by bold sienna borders per the "vary the technique" rule.
   Top-to-bottom medium-grey-to-white gradient (BC request) for depth —
   still solidly in the "light" rhythm bucket (top stop ~75% lightness,
   nowhere near the deep-section threshold), so it doesn't break the
   surrounding deep/light alternation documented above. */
.block.program-specs {
  background: linear-gradient(180deg, #B7BFC6 0%, #FFFFFF 100%);
  border-top: 6px solid var(--sienna);
  border-bottom: 6px solid var(--sienna);
}
.program-specs h3 { color: var(--navy-deep); margin-top: 0; }
.program-specs-subtitle {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--navy-deep); margin: 2px 0 20px;
}
/* Bare text sitting directly on the section had no boundary of its own,
   so a shorter list (2 locations) just trailed off into empty space
   next to a longer one (3 formats) — looked unfinished rather than laid
   out. A real card per column (with align-items:stretch on the parent
   grid matching both to the taller one's height) gives each list a
   defined edge regardless of item count. Green card + white text +
   navy checkmarks, per BC — distinct from every other card family on
   the site (navy card/pain-point-card, white card elsewhere on this
   same page), so this module reads as its own thing. */
.program-specs-col {
  background: var(--green-deep); border-radius: var(--radius); border-top: 4px solid var(--navy-deep);
  padding: 26px 28px 30px; box-shadow: var(--shadow-sm);
}
.program-specs .program-specs-col h3 { color: #fff; }
.program-specs-col .evolved-detail-list li { color: #fff; }
.program-specs-col .evolved-detail-list strong { color: #fff; }
.program-specs-col .evolved-detail-list li::before { background: var(--navy); }

/* "Industry Characteristics" — section swapped to plain/white (was
   navy). This actually improves the rhythm: forest "About" (deep) is
   now followed by a light section here, then navy "Challenges" (deep),
   then "Vending Program Characteristics" (its own light tint) — a clean
   deep/light alternation instead of two deep sections back to back.
   Cards here are navy on the now-light section, matching the
   sienna-top-accent card family used everywhere else. */
/* "Where It Fits Best" — a bold statement list (icon + large text per
   row) instead of another small card grid; the page already has several
   card grids by this point, so this section is deliberately a different
   shape to stand out and read as a confident, scannable fit-check. */
.fit-list { margin-top: 28px; border-top: 1px solid var(--line); }
.fit-item {
  display: flex; align-items: center; gap: 24px;
  padding: 26px 4px; border-bottom: 1px solid var(--line);
}
.fit-icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sienna); color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
}
.fit-icon svg { width: 24px; height: 24px; }
.fit-item p {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, 2.2vw, 23px); color: var(--navy-deep); line-height: 1.35;
}
@media (max-width: 640px) {
  .fit-item { gap: 16px; padding: 20px 2px; }
  .fit-icon { width: 42px; height: 42px; }
  .fit-icon svg { width: 20px; height: 20px; }
}

/* "What's Included" — was one flat checklist card on a navy section,
   which read as plain sitting between the bolder VS-compare and
   fit-list sections on either side of it. Split into individual light
   cards (navy section needs a light card, not another dark one) and
   reuse the same sienna-checkmark-circle language as the trust bar and
   .fit-icon, instead of introducing a fourth checkmark treatment. */
.included-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 28px; }
.included-card {
  background: var(--paper); border-top: 3px solid var(--sienna); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 24px 26px;
}
.included-card p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.55; }

.characteristics-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 8px; }
.characteristic-card {
  background: var(--navy); border-top: 3px solid var(--sienna); border-radius: var(--radius);
  padding: 22px 24px 24px;
}
.characteristic-card strong { display: block; color: #fff; font-size: 15.5px; margin-bottom: 8px; }
.characteristic-card p { color: #d8e2ea; margin: 0; font-size: 14px; line-height: 1.55; }

/* "Which One Is Right for You?" — a decision framing (not a spec sheet,
   which would just repeat the tech-tile/checklist sections above and
   below it), so two contrasting cards with a floating VS badge instead
   of a table. */
.vs-compare { display: flex; align-items: stretch; margin-top: 28px; }
.vs-card {
  flex: 1; background: var(--navy); border-radius: var(--radius);
  padding: 30px 32px; box-shadow: var(--shadow);
}
.vs-card strong { display: block; color: #fff; font-family: var(--font-display); font-size: 19px; margin-bottom: 12px; }
.vs-card p { color: #d8e2ea; margin: 0; font-size: 15px; line-height: 1.6; }
.vs-badge {
  flex: none; align-self: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--sienna); color: var(--navy-deep); font-family: var(--font-display);
  font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center;
  margin: 0 -20px; z-index: 2; box-shadow: var(--shadow);
}
@media (max-width: 700px) {
  .vs-compare { flex-direction: column; }
  .vs-badge { margin: -20px auto; }
}

/* "Choose Your Market" geolocation filter — all markets stay in the DOM
   (crawlers/no-JS see every link; SEO-safe), JS just hides/reorders for
   sighted users once a network is too large to reasonably show as a
   full grid. Opt-in via a button, not an auto-prompt on load — browsers
   already discourage unsolicited geolocation prompts, and a prompt
   nobody asked for reads as spammy. */
.market-filter-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.market-filter-row h2 { margin: 0; }
.market-geo-btn {
  flex-shrink: 0; background: var(--navy); color: #fff; border: none; border-radius: 999px;
  padding: 10px 20px; font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  cursor: pointer; transition: background 0.15s ease;
}
.market-geo-btn:hover { background: var(--navy-deep); }
.market-geo-btn:disabled { opacity: 0.7; cursor: default; }
.market-geo-status { color: var(--slate); font-size: 13.5px; font-weight: 700; margin: 0 0 20px; }

/* Calculator spotlight — a soft radial glow behind the one interactive
   tool on the page, marking it as a distinct "moment," not more texture.
   Section is plain white, NOT surface-alt — the Smarter Technology
   section right after it is already surface-alt, and matching two
   adjacent sections on purpose still reads as "the same background" to
   a reader (confirmed: this was flagged as a real problem, not a false
   positive) — deliberate matching is not an acceptable fix for section
   adjacency. White vs. the (now-strengthened) surface-alt gray is a
   real, visible difference instead. */
.calculator-block { position: relative; overflow: hidden; background: var(--paper); }
.calculator-block::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 820px; height: 820px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--navy-vivid) 14%, transparent) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
/* Faint background photo — a real opacity (not a diluted image blend),
   so it's a separate layer from the text/glow rather than a filter on
   the whole section. */
.calculator-block::after {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/img/onsite-value-bg.jpg") center/cover no-repeat;
  opacity: 0.15; pointer-events: none; z-index: 0;
}
.calculator-block .container { position: relative; z-index: 1; }

/* Mid-page CTA break — a slim amber band, reusing the trust-bar's
   register but with its own copy, used once as a rhythm breather
   between two colored sections rather than another flat repeat. */
.cta-break { background: var(--sienna); padding: 64px 0; text-align: center; }
.cta-break p { margin: 0 0 18px; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.8vw, 30px); color: var(--navy-deep); }
.cta-break .btn { background: var(--navy-deep); color: #fff; }
.cta-break .btn:hover { background: var(--navy); }

/* Final CTA — two failed passes tried to fill this section's empty
   space with color alone (a radial glow, then a stronger glow + gold
   frame) and both still read as "a small box floating in a void." The
   actual fix isn't a better glow, it's giving the section real content
   to fill the space with: a photo, the same text+photo formula already
   proven on "About [Industry] Vending" earlier on this same page.
   Section background is now green per BC (was kept white specifically
   because this partial is the very last section before the footer on
   markets-index.njk, and a colored section can't sit directly against
   the footer's own navy-deep fill). That constraint didn't go away —
   it's solved differently now: a full-bleed light reassurance strip at
   the very bottom of the section (not just section padding) is what
   actually touches the footer, real content (the same three trust
   points shown under the hero) rather than a blank spacer. */
.block.final-cta { background: var(--green); }
.final-cta-panel {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
  max-width: 980px; margin: 0 auto; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.final-cta-copy {
  background: var(--green-deep); color: #fff; padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.final-cta-copy h2 { color: #fff; margin: 0 0 12px; }
.final-cta-copy p:not(.btn-wrap) { color: #eef1f5; margin: 0 0 24px; font-size: 16px; }
.final-cta-copy .btn-wrap { margin: 0; justify-content: flex-start; }
.final-cta-photo { min-height: 260px; }
.final-cta-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .final-cta-panel { grid-template-columns: 1fr; }
  .final-cta-photo { min-height: 200px; order: -1; }
}
/* Contact page — info card is dark (navy) since it sits on a light
   .block section, same pattern as .final-cta-card. */
.contact-info-card { background: var(--navy); border-radius: var(--radius); padding: 40px 36px; }
.contact-info-card h2 { color: #fff; margin-top: 0; }
.contact-info-list { list-style: none; margin: 0; padding: 0; }
.contact-info-list li { margin-bottom: 24px; }
.contact-info-list li:last-child { margin-bottom: 0; }
.contact-info-list strong {
  display: block; text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em;
  color: #9db3c9; margin-bottom: 6px; font-weight: 800;
}
.contact-info-list span, .contact-info-list a { font-size: 17px; color: #fff; }
.contact-info-list a { text-decoration: none; }
.contact-info-list a:hover { color: var(--sienna); text-decoration: underline; }

/* Pastel section backgrounds — the sky/mint tier. Default text colors
   (--ink headings, --slate section-note) already pass contrast here
   (checked: slate-on-sky 4.72:1, slate-on-mint 5.33:1), so no color
   overrides needed the way navy/forest need white text. */
.block.sky { background: var(--sky); }
.block.mint { background: var(--mint); }

/* City cards — replaces the flat pill-link hub-list with real per-market
   context (population_context / homepage_blurb, both existing real data,
   not invented copy) so "Currently Serving" reads as substantive. Card
   is dark navy, not white — this sits on the --sky (light blue) section,
   and a white card there is light-on-light with nothing to catch on. */
/* Full 50-market list — plain links, not cards (no descriptive copy per
   market anymore), four columns. Navy-deep text on the --sky section
   background measures 8.66:1. */
.city-grid {
  display: grid; gap: 2px 20px; grid-template-columns: repeat(5, 1fr);
  margin-top: 24px; list-style: none; padding: 0;
}
.city-grid li { margin: 0; }
.city-link {
  display: block; color: var(--navy-deep); font-weight: 700; font-size: 14px;
  padding: 7px 4px; border-bottom: 1px solid rgba(2,58,97,0.14);
  text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease;
}
.city-link:hover { color: var(--navy); border-color: var(--navy); }
@media (max-width: 900px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .city-grid { grid-template-columns: repeat(2, 1fr); } }


/* Deprecated per the "gold is never a primary background" rule — gold now
   stays confined to buttons, badges, and text accents (see --sky/--mint
   above for the replacement pastel section tier). Left defined only in
   case an un-migrated page still references it; don't add new usages. */
.block.vivid { background: var(--sienna); }
.block.vivid .section-note { color: var(--navy-deep); }
.block.vivid .btn { background: var(--navy-deep); color: #fff; }
.block.vivid .btn:hover { background: var(--navy); }

/* Calculator on a dark section now (navy.gradient-deep) — the white
   calculator card floats on top; the spotlight glow needs to be light,
   not blue, or it disappears against the navy it's now sitting on. */
.calculator-block.navy::before {
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
}

/* "How you get a vending machine" v2 — homepage-only redesign. The old
   .flow component put var(--ink) dark text and amber numerals directly
   on a dark green gradient; the ink text was nearly invisible and
   amber-on-green read as school colors.
   This version sits on a light section instead (also fixes the section
   rhythm — two DEEP sections were ending up adjacent once "why on-site"
   and "economic value" were combined into one), with navy number badges
   instead of colored numerals. */
/* Rounded process cards — inspired by southeastvending.com's "How It
   Works" cards (rounded, soft shadow, icon up top) rather than the
   numbered-circle-and-line layout used before. Section itself is plain
   white since it directly follows the colored trust bar and can't itself
   be colored too. Cards are dark navy, not a light tint — a light card
   on a light section gives the eye nothing to catch on. */
.process-cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 36px; }
.process-card {
  background: var(--navy); border-radius: var(--radius); padding: 32px 28px;
  box-shadow: var(--shadow); text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Light green — matches the trust bar's checkmark circles (a translucent
   white circle over the trust bar's green composites to roughly this
   same soft mint) — reusing --mint directly rather than a one-off
   composited hex. Navy icon color for contrast (5.24:1 on mint; white
   would be too close to the circle's own lightness). */
/* Flat light-gray section (not the shared .alt gradient — this section
   gets its own distinct "floating card" treatment instead) with all
   content inside one big white card with a soft halo shadow, per BC's
   reference to the same pattern on the calculator/cost-estimate section
   of a candidate demo design. Still LIGHT-category for section-rhythm
   purposes (light gray is the same bucket as white), so this doesn't
   change the page's color-rhythm math. */
.flow-block-v2, .footprint-block { background: var(--surface-alt); }
.flow-card {
  background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 30px 44px 32px;
}
.process-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; margin-bottom: 18px;
  background: #fff; color: var(--navy);
}
.process-icon svg { width: 28px; height: 28px; }
.process-card strong { display: block; font-family: var(--font-display); font-size: 18px; color: #fff; margin-bottom: 10px; }

/* ---------------------------------------------------------------
   Blog
--------------------------------------------------------------- */
/* Shorter, tamer hero than the homepage/lead-gen heroes — a blog post
   has no lead form fighting for space, and its titles run long, so the
   type scale is capped well below the 76px marketing-hero max. */
.hero.blog-hero { padding: 60px 0 52px; }
.hero.blog-hero h1 { font-size: clamp(28px, 3.8vw, 42px); max-width: 900px; }
.hero.blog-hero p.lede { max-width: none; }
.hero.blog-hero .eyebrow { font-size: 9px; margin-bottom: 8px; }
.blog-meta { color: #c7cbcf; font-size: 14px; margin: 14px 0 0; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin-top: 8px; }
.blog-card {
  display: flex; flex-direction: column; background: var(--paper);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
/* Fixed min-height so every card's date sits at the same position
   regardless of row — CSS Grid's default row-stretch only equalizes
   height within a single row, so a 2-line vs. 3-line title still shifted
   the date up or down between different rows without this. */
.blog-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; min-height: 300px; }
.blog-card-body h3 { font-size: 16.5px; line-height: 1.3; margin: 0 0 10px; color: var(--ink); }
.blog-card-body p { color: var(--slate); font-size: 14.5px; margin: 0; flex: 1; }
/* Overrides .blog-card-body p above — needs the extra class-selector
   specificity to win, since both rules set font-size/margin and this one
   is declared first in the file. */
.blog-card-body .blog-card-pillar { color: var(--navy); font-size: 11px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; flex: none; }
/* Same specificity issue as .blog-card-pillar above: .blog-card-meta is
   also a bare <p>, so .blog-card-body p's margin:0 was silently winning
   over margin-top:auto and the date never actually bottom-aligned despite
   equal card heights. */
.blog-card-body .blog-card-meta { flex: none; margin-top: auto; padding-top: 14px; color: var(--slate-soft); font-size: 13px; }

/* Post layout: article column + sticky sidebar. A genuine multi-column
   layout, so the article column keeps a measured reading width —
   design-rules.md's no-narrow-paragraph rule exempts real multi-column
   layouts, same precedent as the FAQ panel. */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.blog-body { max-width: 720px; font-size: 17px; line-height: 1.7; }
.blog-body h2 { color: var(--navy); font-size: 26px; margin: 40px 0 16px; }
.blog-body h2:first-child { margin-top: 0; }
.blog-body h3 { font-size: 19px; margin: 28px 0 10px; }
.blog-body p { margin: 0 0 18px; }
.blog-body ul { margin: 0 0 20px; padding-left: 22px; }
.blog-body li { margin-bottom: 8px; }
.blog-body blockquote {
  margin: 28px 0; padding: 2px 0 2px 22px; border-left: 4px solid var(--sienna);
  font-family: var(--font-display); font-size: 19px; color: var(--ink);
}
.blog-body strong { color: var(--ink); }
.blog-cta { margin-top: 44px; text-align: center; }
.blog-cta p { margin: 10px 0 0; }
.blog-sidebar { position: sticky; top: 24px; }
/* .related-links is normally a wide multi-column grid (elsewhere on the
   site it holds 1-2 full .flow-card panels side by side at minmax(280px,
   1fr) each) — inside the ~252px-wide sidebar that grid forces its child
   to a 280px minimum, overflowing the panel and clipping the chevron at
   the edge. Neutralized to a plain block here; the ul/li/a link-row
   styling those selectors provide is unaffected. */
.blog-sidebar .related-links { display: block; margin-top: 0; }
.blog-sidebar .related-links + .related-links { margin-top: 20px; }
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
}
.process-card p { color: #d8e2ea; margin: 0 auto; font-size: 14.5px; max-width: 34ch; }