/* ==========================================================================
   BlinkFuel — Mobile GASOLINE + DIESEL Fueling Site Template
   Design system: "The pump came to you. We made the trip disappear."
   Surface: warm-graphite sunlit fuel-yard ground · one signal accent (live route)
   · condensed-grotesque operator-stamped type · route-line composition signature.
   Built on the proven static-HTML chassis (Blue Ridge bones) — DIVERGED on every
   aesthetic: warm-graphite NOT cream · Clash/Cabinet condensed-grotesque NOT Boska
   serif · route-line NOT ridgeline · signal-amber NOT clay/flame.
   ZERO PROPANE anywhere. Company = Digital Software Services LLC.
   Color in OKLCH, never pure #000/#fff.
   ========================================================================== */

/* ==========================================================================
   TOKEN CONTRACT (Iris's SSOT — the flex layer)
   Per-customer FLEX (5-token swap reskins the whole site):
     --signal, --signal-deep   — extracted from operator logo color, auto-AA'd
     --ground-tint             — one structural tint biased toward the brand
     region pack (photography + map data + city list) lives in HTML, not CSS
     service toggles / strip toggles handled by present/absent HTML sections
   FIXED FOREVER (never flexes): type system, layout chassis, route-line
     signature, motion grammar, spacing scale, a11y/CWV floor, schema pattern.
   ========================================================================== */
:root {
  /* ---- THE GROUND: warm-graphite, concrete, brushed steel (template default)
     Every neutral tinted ~0.006–0.012 chroma toward warm-graphite hue (~70).
     Harder, industrial sunlit daylight — the opposite of propane's cream. ---- */
  --ground:       oklch(0.962 0.006 75);   /* sunlit concrete — page ground */
  --ground-sunk:  oklch(0.928 0.008 74);   /* sunk band — poured-concrete shade */
  --ground-tint:  oklch(0.906 0.012 72);   /* FLEX: structural tint biased to brand (amber-warm default) */
  --steel:        oklch(0.300 0.014 250);  /* deep brushed-steel — dark structural ground / footer / trust band */
  --steel-soft:   oklch(0.430 0.016 250);  /* mid steel — receding panels on dark */
  --ink:          oklch(0.250 0.012 70);   /* near-black warm graphite — body text */
  --ink-soft:     oklch(0.455 0.013 72);   /* secondary text — passes AA on ground */
  --hairline:     oklch(0.838 0.012 75);   /* rules / borders */

  /* ---- THE SIGNAL ACCENT: "live route" — hi-vis fueling-safety hue.
     Marker-amber, the color of a hi-vis vest / hose-reel handle / fuel placard.
     Deliberately MORE AMBER than propane's flame-orange so it reads as a
     *fueling-safety* signal, not a *flame*. ≤10% of any surface.
     --signal-deep is AA-safe for small text on the light grounds. ---- */
  --signal:       oklch(0.760 0.170 75);   /* hi-vis marker-amber — large fills, route line, motion (NOT for small text on light) */
  --signal-deep:  oklch(0.520 0.122 56);   /* AA-safe amber-bronze — small text/links/eyebrows on light grounds (>=4.5:1 on every neutral ground incl sunk/tint) */
  --signal-on-dark: oklch(0.800 0.165 78); /* bright amber for use on --steel dark grounds */

  /* ---- Recognizable status (discipline rule: red=error, green=success) ---- */
  --ok:           oklch(0.520 0.130 150);  /* success */
  --err:          oklch(0.530 0.180 28);   /* error */
  --focus:        oklch(0.560 0.150 250);  /* non-brand a11y focus ring (steel-blue) */

  /* ---- Type scale (1.25 step ratio — weight + scale contrast, never color) ---- */
  --fs-base: 1.0625rem;  /* 17px body */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-xs:   0.8125rem;  /* 13px stencil labels */
  --fs-md:   1.1875rem;  /* 19px */
  --fs-lg:   1.3125rem;  /* ~21px lead */
  --fs-h3:   1.3rem;
  --fs-h2:   clamp(1.7rem, 2.9vw, 2.4rem);
  --fs-h1:   clamp(2.1rem, 4.2vw, 3.1rem);
  --fs-display: clamp(2.9rem, 6vw, 4.75rem);

  /* ---- Spacing (8px base, non-linear, more deliberate asymmetry) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ---- Radii (tighter / more industrial than propane's soft cream) ---- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;

  /* ---- Elevation — used sparingly ---- */
  --shadow: 0 1px 3px oklch(0.250 0.012 70 / 0.08), 0 10px 26px oklch(0.250 0.012 70 / 0.10);

  /* ---- Layout ---- */
  --maxw: 1180px;
  --prose: 680px;

  /* ---- Type families — condensed-grotesque DISPLAY (operator signage / stencil)
     + humanist grotesque BODY (Satoshi) for glare/Android legibility.
     NO Boska serif (propane). Metric-compatible fallbacks reduce CLS. ---- */
  --font-display: "Clash Display", "Arial Narrow", "Helvetica Neue Condensed", "Oswald", system-ui, sans-serif;
  --font-stencil: "Cabinet Grotesk", "Clash Display", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Satoshi", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-ui: var(--font-body);

  /* ---- Motion timing (ease-out-expo / quint — never bounce/elastic) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--signal-deep); text-decoration: none; }
a:hover { color: var(--ink); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.04;
  margin: 0 0 var(--s4); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}
.display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); }
p { margin: 0 0 var(--s5); text-wrap: pretty; }
.lead { font-family: var(--font-body); font-size: var(--fs-lg); line-height: 1.5; color: var(--ink); font-weight: 450; }

/* THE TYPE SIGNATURE MOVE — "operator-stamped": condensed face, tracked,
   uppercase, for eyebrows, numerals, short labels, phone, route times. */
.eyebrow, .stencil {
  font-family: var(--font-stencil); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep);
  margin: 0 0 var(--s3); line-height: 1.2;
}
.prose { max-width: var(--prose); }
.prose p, .prose li { font-size: var(--fs-base); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); }
@media (min-width: 760px) { .container { padding-inline: var(--s7); } }
/* Section rhythm — denser base + deliberate size modifiers so bands VARY
   (Kassia: no uniform quiet stripes). Base ~half the old empty 96-160px band.
   --lg = a narrative band that earns extra air; --tight = connective/dense band. */
.section { padding-block: clamp(40px, 5.2vw, 84px); position: relative; }
.section--lg { padding-block: clamp(52px, 6.6vw, 108px); }
.section--tight { padding-block: clamp(28px, 3.6vw, 52px); }
.section--sunk { background: var(--ground-sunk); }
.section--tint { background: var(--ground-tint); }
.section--steel { background: var(--steel); color: oklch(0.880 0.012 250); }
.section--steel h1, .section--steel h2, .section--steel h3 { color: oklch(0.975 0.004 250); }
.section--steel .eyebrow, .section--steel .stencil { color: var(--signal-on-dark); }
.stack > * + * { margin-top: var(--s5); }

/* THE ROUTE-LINE COMPOSITION SIGNATURE — a thin structural rule in the signal
   accent that threads the page as "stops on a route". Breaks the card grid.
   Used as a section top-tick + as the How-It-Works connective line. */
.route-tick {
  position: relative;
}
.route-tick::before {
  content: ""; position: absolute; left: var(--s5); top: 0;
  width: 40px; height: 3px; background: var(--signal);
}
@media (min-width: 760px) { .route-tick::before { left: var(--s7); width: 56px; } }
.section--steel.route-tick::before { background: var(--signal-on-dark); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--ground); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); font-family: var(--font-body); font-weight: 600;
}
.skip-link:focus { left: var(--s4); top: var(--s4); color: var(--ground); }

/* ---------- Focus ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
/* 2.4.11 Focus Not Obscured — sticky header is ~66px; keep focused element clear of it */
:focus-visible, :focus { scroll-margin-top: 72px; scroll-margin-bottom: 16px; }

/* ==========================================================================
   Emergency / urgency strip (signal-amber surface)
   ========================================================================== */
.emergency-strip {
  background: var(--steel); color: oklch(0.965 0.006 75);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  text-align: center; padding: var(--s2) var(--s4);
  border-bottom: 3px solid var(--signal);
}
.emergency-strip strong { font-family: var(--font-stencil); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-on-dark); }
.emergency-strip a { color: oklch(0.975 0.004 250); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.emergency-strip a:hover { color: var(--signal-on-dark); }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: oklch(0.962 0.006 75 / 0.92); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--hairline); transition: box-shadow 200ms ease-out; }
.site-header.scrolled { box-shadow: 0 2px 12px oklch(0.250 0.012 70 / 0.08); }
.nav { display: flex; align-items: center; gap: var(--s5); padding-block: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand .logo-mark { flex: 0 0 auto; }
.brand .logo-mark img { display: block; width: 44px; height: 44px; border-radius: 9px; }
.nav-links { display: flex; gap: var(--s5); margin-left: auto; align-items: center; list-style: none; padding: 0; margin-block: 0; }
.nav-links a { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink); padding-block: var(--s2); position: relative; white-space: nowrap; }
.nav-links a:hover { color: var(--signal-deep); }
.nav-links a[aria-current="page"] { color: var(--signal-deep); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--signal); }
.nav-phone { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-stencil); font-weight: 600; letter-spacing: 0.03em; color: var(--ink); white-space: nowrap; }
.nav-phone:hover { color: var(--signal-deep); }
.nav-phone svg { color: var(--signal-deep); }
.nav-cta { margin-left: var(--s2); }
.nav-toggle { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem;
  padding: 15px 26px; min-height: 56px; border-radius: var(--r-md);
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
/* Primary = the signal CTA. Dark ink text on amber passes AA (amber is light/high-L). */
.btn-primary { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.btn-primary:hover { background: var(--signal-deep); color: oklch(0.975 0.006 75); border-color: var(--signal-deep); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--ground); transform: translateY(-1px); }
.btn-on-dark { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.btn-on-dark:hover { background: var(--signal-on-dark); color: var(--ink); transform: translateY(-1px); }
.btn-ghost-dark { background: transparent; color: oklch(0.965 0.006 75); border-color: oklch(0.880 0.012 250 / 0.55); }
.btn-ghost-dark:hover { background: oklch(0.965 0.006 75); color: var(--ink); border-color: oklch(0.965 0.006 75); transform: translateY(-1px); }
.btn-block { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* inline link + arrow link */
.link-inline { color: var(--signal-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.link-inline:hover { text-decoration-thickness: 3px; color: var(--ink); }
.arrow-link { font-family: var(--font-body); font-weight: 600; color: var(--signal-deep); display: inline-flex; align-items: center; gap: 6px; }
.arrow-link:hover { gap: 10px; color: var(--ink); transition: gap 160ms var(--ease-out), color 160ms var(--ease-out); }
.section--steel .arrow-link { color: var(--signal-on-dark); }
.section--steel .arrow-link:hover { color: oklch(0.975 0.004 250); }

/* ==========================================================================
   Hero (full-bleed correct-rig photo + left type scrim + route line entering)
   ========================================================================== */
.hero {
  position: relative;
  /* tightened so the first content band peeks above the fold (was 540/80vh/760) */
  min-height: clamp(460px, 62vh, 600px);
  display: flex; align-items: center;
  background: var(--steel);   /* pre-image / pre-JS ground so type is always legible */
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; background:
    repeating-linear-gradient(135deg, oklch(0.250 0.014 255 / 0.14) 0 18px, transparent 18px 36px),
    var(--steel); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 42%; }
/* clearly-marked temporary hero placeholder (visible only until Pixel's finals land) */
.hero-media .ph-hero { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--s3); color: oklch(0.880 0.012 250); font-family: var(--font-stencil); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: var(--s5); pointer-events: none; }
.hero-media .ph-hero svg { width: 48px; height: 48px; color: var(--signal-on-dark); }
.hero-media .ph-hero b { font-family: var(--font-body); color: oklch(0.965 0.006 75); letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); max-width: 40ch; }
/* Left type scrim — graded warm-graphite so upper-left copy always clears AA */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(95deg,
      oklch(0.220 0.014 255 / 0.90) 0%,
      oklch(0.220 0.014 255 / 0.70) 40%,
      oklch(0.250 0.018 255 / 0.22) 72%,
      oklch(0.250 0.018 255 / 0) 100%),
    linear-gradient(0deg,
      oklch(0.200 0.014 255 / 0.50) 0%,
      oklch(0.200 0.014 255 / 0) 40%);
}
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero-copy { max-width: 39rem; color: oklch(0.975 0.006 75); padding-block: var(--s7); }
.hero .eyebrow { color: var(--signal-on-dark); }
.hero h1.display { color: oklch(0.985 0.004 75); margin-bottom: var(--s5); }
.hero .lead { color: oklch(0.945 0.008 250); margin-bottom: var(--s6); max-width: 44ch; }
.hero-trust { font-family: var(--font-stencil); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.950 0.008 250); margin-top: var(--s6); line-height: 1.9; text-shadow: 0 1px 4px oklch(0.200 0.014 255 / 0.6); }
.hero-trust .dot { color: var(--signal-on-dark); margin-inline: 8px; font-weight: 700; }
.hero .btn-secondary { color: oklch(0.985 0.004 75); border-color: oklch(0.945 0.008 250 / 0.6); }
.hero .btn-secondary:hover { background: oklch(0.985 0.004 75); color: var(--ink); border-color: oklch(0.985 0.004 75); }

/* mobile: near-uniform vertical scrim so lead text always clears AA */
@media (max-width: 759px) {
  .hero-scrim {
    background: linear-gradient(180deg,
      oklch(0.200 0.014 255 / 0.88) 0%,
      oklch(0.200 0.014 255 / 0.80) 38%,
      oklch(0.200 0.014 255 / 0.78) 64%,
      oklch(0.200 0.014 255 / 0.88) 100%);
  }
  .hero { min-height: clamp(420px, 72vh, 560px); }
  .hero-copy { padding-block: var(--s6); }
  .hero .lead { margin-bottom: var(--s5); }
  .hero-trust { margin-top: var(--s5); line-height: 1.8; }
  .hero-media img { object-position: 58% 46%; }
}

/* Interior page mastheads */
.page-head { padding-block: clamp(32px, 4.4vw, 60px) clamp(20px, 3vw, 32px); }
.page-head .lead { max-width: 60ch; }

/* ==========================================================================
   How it works — the THREE STEPS ON A ROUTE LINE (origin -> mid -> arrival)
   This is the layout expression of "the truck is on its way". NOT three boxes.
   ========================================================================== */
.routeline { position: relative; margin-top: var(--s7); }
/* the connective route line behind the steps (desktop horizontal) */
.routeline-track { position: absolute; left: 0; right: 0; top: 28px; height: 3px; pointer-events: none; }
.routeline-track svg { width: 100%; height: 3px; overflow: visible; }
.routeline-track line { stroke: var(--hairline); stroke-width: 3; }
.routeline-track .drawn { stroke: var(--signal); stroke-width: 3; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.steps { display: grid; gap: var(--s7); position: relative; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s8); } }
.step { position: relative; padding-top: var(--s2); }
.step .stop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ground); border: 3px solid var(--signal);
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ink);
  line-height: 1; margin-bottom: var(--s4); position: relative; z-index: 2;
}
.section--sunk .step .stop { background: var(--ground-sunk); }
.step h3 { margin-bottom: var(--s2); }
.step p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
/* mobile: route line runs vertically through the stops */
@media (max-width: 759px) {
  .routeline-track { display: none; }
  .step { padding-left: var(--s8); }
  .step::before { content: ""; position: absolute; left: 26px; top: 56px; bottom: calc(var(--s7) * -1); width: 3px; background: var(--hairline); }
  .step:last-child::before { display: none; }
  .step .stop { position: absolute; left: 0; top: var(--s2); width: 52px; height: 52px; }
}

/* ==========================================================================
   Almanac service rows (a manifest, NOT a card grid)
   ========================================================================== */
.almanac { border-top: 1px solid var(--hairline); }
.almanac-row { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s4) var(--s5); align-items: start; padding-block: var(--s6); border-bottom: 1px solid var(--hairline); }
.almanac-row .icon { color: var(--signal-deep); }
.almanac-row .icon svg { width: 40px; height: 40px; }
.almanac-row h3 { margin: 0 0 var(--s2); }
.almanac-row p { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; }
.almanac-row .more { align-self: center; white-space: nowrap; }
@media (max-width: 640px) {
  .almanac-row { grid-template-columns: 40px 1fr; }
  .almanac-row .icon svg { width: 32px; height: 32px; }
  .almanac-row .more { grid-column: 2; }
}

/* ==========================================================================
   Route divider — the signature recurring section device (inline SVG, ~0.5KB)
   A thin dashed route-line segment with a stop-dot, color = signal.
   ========================================================================== */
.route-divider { display: block; width: 100%; height: 24px; margin: 0; color: var(--signal); }
.route-divider svg { display: block; width: 100%; height: 100%; }
.route-divider line { stroke: currentColor; stroke-width: 2; stroke-dasharray: 2 8; opacity: 0.5; }
.route-divider circle { fill: currentColor; }
@media (min-width: 760px) { .route-divider { height: 30px; } }

/* Alternating service detail rows — photo banners */
.service-block { display: grid; gap: var(--s6); align-items: center; padding-block: var(--s7); border-bottom: 1px solid var(--hairline); }
@media (min-width: 820px) { .service-block { grid-template-columns: 1fr 1fr; gap: var(--s8); } .service-block.reverse .service-media { order: -1; } }
.service-block h2 { margin-bottom: var(--s4); }
.service-block ul { margin: var(--s4) 0 0; padding-left: 1.1em; }
.service-block li { margin-bottom: var(--s2); color: var(--ink-soft); }
.service-media { display: flex; flex-direction: column; }
.service-media .banner { aspect-ratio: 3 / 2; }

/* Editorial photo banner — single signal corner-tick */
.banner {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--ground-tint); border: 1px solid var(--hairline);
}
.banner img { width: 100%; height: 100%; object-fit: cover; }
.banner::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 52px; height: 52px;
  border-top: 3px solid var(--signal); border-right: 3px solid var(--signal);
  border-top-right-radius: var(--r-md);
}
.banner figcaption, .media-caption { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-soft); margin-top: var(--s3); }
.demo-tag { font-style: italic; }
/* clearly-marked temporary placeholder (until Pixel's finals land) */
.img-placeholder {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: var(--s3); text-align: center; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, oklch(0.300 0.014 250 / 0.06) 0 14px, transparent 14px 28px),
    var(--ground-tint);
  color: var(--ink-soft); font-family: var(--font-stencil); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase; padding: var(--s5);
}
.img-placeholder .ph-icon { color: var(--signal-deep); }
.img-placeholder .ph-icon svg { width: 40px; height: 40px; }
.img-placeholder b { font-family: var(--font-body); color: var(--ink); letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }

/* Two-column copy-beside-media */
.split-grid { display: grid; gap: var(--s6); }
@media (min-width: 820px) { .split-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s8); align-items: center; } }

/* Why-us app mockup (EJ edit 1): portrait phone preview, centered, capped */
.whyus-mockup { display: flex; justify-content: center; }
.whyus-mockup img { display: block; width: 100%; max-width: 320px; height: auto; }
@media (min-width: 820px) { .whyus-grid { align-items: center; } .whyus-mockup img { max-width: 360px; } }

/* ==========================================================================
   Trust band (running figures on steel, NOT metric tiles)
   ========================================================================== */
.trust-sentence { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.25; max-width: 26ch; margin-inline: auto; text-align: center; }
.trust-sentence b { color: var(--signal-deep); font-weight: 600; }
.section--steel .trust-sentence b { color: var(--signal-on-dark); }
.trust-almanac { margin-top: var(--s6); }
.section--steel .almanac { border-top-color: oklch(0.880 0.012 250 / 0.24); }
.section--steel .almanac-row { border-bottom-color: oklch(0.880 0.012 250 / 0.24); }
.section--steel .almanac-row .icon { color: var(--signal-on-dark); }
.section--steel .almanac-row h3 { color: oklch(0.975 0.004 250); }
.section--steel .almanac-row p { color: oklch(0.860 0.012 250); }

/* ==========================================================================
   App-download band (the section the propane template lacks)
   ========================================================================== */
.app-band { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 820px) { .app-band { grid-template-columns: 1.1fr 0.9fr; gap: var(--s8); } }
.app-features { list-style: none; padding: 0; margin: var(--s5) 0 var(--s6); display: grid; gap: var(--s3); }
.app-features li { display: flex; gap: var(--s3); align-items: flex-start; font-size: 1.0625rem; color: var(--ink-soft); }
.section--steel .app-features li { color: oklch(0.880 0.012 250); }
.app-features .tick { color: var(--signal-on-dark); flex: 0 0 auto; margin-top: 2px; }
.app-features .tick svg { width: 22px; height: 22px; }
.store-row { display: flex; flex-wrap: wrap; gap: var(--s4); }
.store-btn { display: inline-flex; align-items: center; gap: var(--s3); background: var(--ink); color: oklch(0.975 0.006 75); border: 1.5px solid var(--ink); border-radius: var(--r-md); padding: 10px 18px; min-height: 56px; transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.section--steel .store-btn { background: oklch(0.975 0.006 75); color: var(--ink); border-color: oklch(0.975 0.006 75); }
.store-btn:hover { transform: translateY(-1px); color: oklch(0.975 0.006 75); }
.section--steel .store-btn:hover { color: var(--ink); }
.store-btn svg { width: 26px; height: 26px; flex: 0 0 auto; }
.store-btn .store-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn .store-txt small { font-family: var(--font-body); font-size: 0.7rem; opacity: 0.8; }
.store-btn .store-txt b { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .store-btn:hover { transform: none; } }
.app-demo-note { font-family: var(--font-body); font-size: var(--fs-xs); font-style: italic; color: var(--ink-soft); margin-top: var(--s4); }
.section--steel .app-demo-note { color: oklch(0.800 0.012 250); }
/* phone mockup */
.phone-mock { max-width: 280px; margin-inline: auto; aspect-ratio: 9 / 19; border-radius: 32px; border: 10px solid var(--ink); background: var(--ground-tint); overflow: hidden; position: relative; box-shadow: var(--shadow); }
.phone-mock img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.phone-mock .img-placeholder { position: absolute; inset: 0; border-radius: 0; z-index: 0; }
/* app screenshot shown as-is — the PNG already includes a phone mockup, so no extra frame/background/crop (Fuel Texas request 2026-06-24) */
.app-shot { display: block; width: 100%; max-width: 280px; height: auto; margin-inline: auto; }

/* ==========================================================================
   Testimonials (pull-quote, not card)
   ========================================================================== */
.quote-block { max-width: 56ch; margin-inline: auto; text-align: center; position: relative; }
.quote-block .mark { font-family: var(--font-display); font-size: 3.6rem; color: var(--signal); line-height: 0.6; display: block; margin-bottom: var(--s2); }
.quote-block blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.32; margin: 0 0 var(--s4); }
.quote-block .attr { font-family: var(--font-stencil); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.quote-block .attr::before { content: ""; display: block; width: 28px; height: 3px; background: var(--signal); margin: 0 auto var(--s3); }
.stars { color: var(--signal-deep); letter-spacing: 2px; font-size: 1rem; margin-bottom: var(--s3); }
.quotes-grid { display: grid; gap: var(--s8); }
@media (min-width: 880px) { .quotes-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } .quotes-grid .quote-block { text-align: left; margin-inline: 0; } .quotes-grid .attr::before { margin: 0 auto 12px 0; } }
.demo-note { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-soft); font-style: italic; text-align: center; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--hairline); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: var(--s5); max-width: 22ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }
.cta-band .or { font-family: var(--font-body); color: var(--ink-soft); margin-top: var(--s4); }
.cta-band .or a { font-weight: 700; }
.section--steel .cta-band .or { color: oklch(0.860 0.012 250); }

/* ==========================================================================
   Service area
   ========================================================================== */
.map-illustration { border-radius: var(--r-md); border: 1px solid var(--hairline); overflow: hidden; background: var(--ground); }
.town-index { columns: 2; column-gap: var(--s7); margin-top: var(--s6); }
@media (min-width: 720px) { .town-index { columns: 3; } }
.town-index a { display: block; font-family: var(--font-body); font-size: 1rem; padding-block: var(--s2); border-bottom: 1px solid var(--hairline); break-inside: avoid; color: var(--ink); }
.town-index a:hover { color: var(--signal-deep); }

/* One-line area list (EJ edit 2): towns flow on a single row, wrap gracefully on narrow screens */
.town-index--inline { columns: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.town-index--inline a { display: inline-block; padding-block: 0; border-bottom: 0; white-space: nowrap; }
.town-index--inline a:not(:last-child)::after { content: "·"; color: var(--hairline); margin-left: var(--s3); }
/* On desktop the column is wide enough for all towns on a single row — keep them on one line */
@media (min-width: 820px) {
  .town-index--inline { flex-wrap: nowrap; gap: 0 var(--s2); font-size: 0.94rem; }
  .town-index--inline a:not(:last-child)::after { margin-left: var(--s2); }
}
.callout { background: var(--ground-tint); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s6); display: flex; gap: var(--s4); align-items: flex-start; }
.callout .icon { color: var(--signal-deep); flex: 0 0 auto; }
.callout .icon svg { width: 32px; height: 32px; }
.callout p { margin: 0; }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.accordion { border-top: 1px solid var(--hairline); max-width: 780px; }
.accordion details { border-bottom: 1px solid var(--hairline); }
.accordion summary { list-style: none; cursor: pointer; padding: var(--s5) var(--s8) var(--s5) 0; font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; position: relative; color: var(--ink); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--signal-deep); line-height: 1; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion .answer { padding: 0 var(--s5) var(--s5) 0; }
.accordion .answer p { margin: 0; color: var(--ink-soft); }

/* ==========================================================================
   Forms / order + contact panel
   ========================================================================== */
.contact-grid { display: grid; gap: var(--s8); }
@media (min-width: 880px) { .contact-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--s8); align-items: start; } }
.order-panel { background: var(--ground); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--s7); }
.form-field { margin-bottom: var(--s5); }
.form-field label { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--s2); color: var(--ink); }
.form-field .req { color: var(--err); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1.0625rem; color: var(--ink);
  background: var(--ground-sunk); border: 1.5px solid var(--hairline); border-radius: var(--r-sm);
  padding: 14px 14px; min-height: 56px;
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--signal-deep); box-shadow: 0 0 0 3px var(--focus); }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { outline: none; }
/* error state */
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--err); }
.field-error { display: none; color: var(--err); font-family: var(--font-body); font-size: 0.85rem; margin-top: 6px; font-weight: 500; }
.form-field.has-error .field-error { display: block; }
.form-row.two { display: grid; gap: 0 var(--s5); }
@media (min-width: 560px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aside-block { font-family: var(--font-body); }
.big-phone { display: inline-flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--signal-deep); margin-bottom: var(--s4); }
.big-phone:hover { color: var(--ink); }
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s2); border-bottom: 1px solid var(--hairline); font-size: 1rem; }
.hours-list .day { color: var(--ink-soft); }
.nap-line { font-style: normal; line-height: 1.8; }

.form-confirm { display: none; text-align: center; padding: var(--s6) var(--s4); }
.form-confirm .check { width: 56px; height: 56px; color: var(--ok); margin: 0 auto var(--s4); }
.form-confirm.show { display: block; }
.is-submitted .order-form { display: none; }
.is-submitted .form-confirm { display: block; }

/* ==========================================================================
   Timeline (about)
   ========================================================================== */
.timeline { list-style: none; padding: 0; margin: var(--s6) 0 0; max-width: var(--prose); }
.timeline li { position: relative; padding: 0 0 var(--s6) var(--s7); border-left: 2px solid var(--hairline); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); border: 2px solid var(--ground); }
.timeline .year { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--signal-deep); display: block; margin-bottom: 4px; }
.timeline p { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; }

/* Portrait / editorial figure */
.portrait { border-radius: var(--r-md); border: 1px solid var(--hairline); overflow: hidden; aspect-ratio: 4/5; max-width: 360px; background: var(--ground-tint); position: relative; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait.banner::after { width: 48px; height: 48px; }

/* Do / Don't (safety) */
.do-dont { display: grid; gap: var(--s6); margin-top: var(--s5); }
@media (min-width: 720px) { .do-dont { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.do-dont h3 { font-size: 1.05rem; margin-bottom: var(--s3); }
.do-col h3 { color: var(--ok); }
.dont-col h3 { color: var(--err); }
.do-list, .dont-list { list-style: none; padding: 0; margin: 0; }
.do-list li, .dont-list li { position: relative; padding-left: 28px; margin-bottom: var(--s3); font-size: 1rem; color: var(--ink-soft); }
.do-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; }
.dont-list li::before { content: "\00D7"; position: absolute; left: 0; top: -1px; color: var(--err); font-weight: 700; font-size: 1.25rem; line-height: 1; }

.note-block { background: var(--ground-sunk); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s6); }
.last-updated { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); margin-top: var(--s5); }

/* Breadcrumb */
.breadcrumb { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 var(--s4); }
.breadcrumb a { color: var(--signal-deep); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--hairline); margin-inline: var(--s2); text-decoration: none; display: inline-block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--steel); color: oklch(0.860 0.012 250); padding-block: var(--s7) var(--s6); font-family: var(--font-body); border-top: 3px solid var(--signal); }
.site-footer h3 { color: oklch(0.975 0.004 250); font-family: var(--font-stencil); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s4); }
.footer-grid { display: grid; gap: var(--s7); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer a { color: oklch(0.870 0.012 250); }
.site-footer a:hover { color: oklch(0.975 0.004 250); }
.footer-nap { font-style: normal; line-height: 1.9; font-size: 0.975rem; }
.footer-nap .phone { color: oklch(0.975 0.004 250); font-weight: 700; font-size: 1.1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; line-height: 2.1; font-size: 0.975rem; }
.footer-emergency { color: oklch(0.975 0.004 250); font-weight: 600; margin-top: var(--s4); }
.footer-emergency a { color: oklch(0.975 0.004 250); text-decoration: underline; }
.footer-bottom { border-top: 1px solid oklch(1 0 0 / 0.12); margin-top: var(--s7); padding-top: var(--s5); font-size: 0.85rem; color: oklch(0.760 0.012 250); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
.footer-bottom a { color: oklch(0.760 0.012 250); }
.provenance { font-size: 0.9rem; color: oklch(0.800 0.012 250); margin-top: var(--s5); }
.provenance .dot { color: var(--signal-on-dark); margin-inline: 6px; }
.social-row { display: flex; gap: var(--s2); margin-top: var(--s4); }
.social-row a { color: oklch(0.870 0.012 250); display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.social-row svg { width: 22px; height: 22px; }

/* ==========================================================================
   Mobile sticky call/order bar
   ========================================================================== */
.mobile-callbar { display: none; }
@media (max-width: 759px) {
  .mobile-callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: var(--ground); border-top: 1px solid var(--hairline); box-shadow: var(--shadow);
    padding: var(--s3) var(--s4); padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  }
  .mobile-callbar .btn { width: 100%; padding-inline: var(--s3); }
  body { padding-bottom: 88px; }
}

/* ==========================================================================
   Mobile nav — full-height panel, focus-trapped, pinned CTA
   ========================================================================== */
@media (max-width: 879px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--ground); color: var(--ink); cursor: pointer; }
  .nav-toggle svg { width: 26px; height: 26px; }
  .nav-phone-mobile { margin-left: auto; min-width: 44px; min-height: 44px; justify-content: center; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border-left: 1px solid var(--hairline);
    padding: var(--s8) var(--s6) calc(var(--s6) + env(safe-area-inset-bottom));
    margin: 0; overflow-y: auto;
    transform: translateX(100%); transition: transform 240ms var(--ease-out);
    box-shadow: var(--shadow); z-index: 120;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-close { position: absolute; top: var(--s4); right: var(--s4); width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--ground); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .nav-close svg { width: 22px; height: 22px; }
  .nav-links > li { width: 100%; }
  .nav-links a:not(.btn) { display: block; width: 100%; padding-block: var(--s4); border-bottom: 1px solid var(--hairline); font-size: 1.125rem; }
  .nav-links .nav-phone { color: var(--signal-deep); font-weight: 700; }
  .nav-links .nav-cta { width: 100%; margin: var(--s5) 0 0; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-backdrop { position: fixed; inset: 0; background: oklch(0.200 0.014 255 / 0.5); z-index: 110; opacity: 0; visibility: hidden; transition: opacity 200ms ease-out; }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
}
@media (min-width: 880px) { .nav-phone-mobile, .nav-close { display: none; } }

/* ==========================================================================
   Motion — "Arrival, once": route line draws once, hero settles. (Mira)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 280ms ease-out, transform 280ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* Hero load: media settles (fades up), copy staggers in */
.hero-media { opacity: 0; transform: scale(1.03); }
.hero.hero-in .hero-media { opacity: 1; transform: none; transition: opacity 900ms ease-out, transform 1400ms var(--ease-out); }
.hero-copy > * { opacity: 0; transform: translateY(12px); }
.hero.hero-in .hero-copy > * { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 700ms var(--ease-out); }
.hero.hero-in .hero-copy > *:nth-child(1) { transition-delay: 100ms; }
.hero.hero-in .hero-copy > *:nth-child(2) { transition-delay: 200ms; }
.hero.hero-in .hero-copy > *:nth-child(3) { transition-delay: 300ms; }
.hero.hero-in .hero-copy > *:nth-child(4) { transition-delay: 400ms; }
.hero.hero-in .hero-copy > *:nth-child(5) { transition-delay: 500ms; }

/* THE authored motion: the route line draws once toward the arrival stop */
.routeline.drawn-in .routeline-track .drawn { animation: routedraw 1600ms var(--ease-out) 250ms forwards; }
@keyframes routedraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media, .hero-copy > * { opacity: 1; transform: none; transition: none; }
  .routeline-track .drawn { stroke-dashoffset: 0; animation: none; }
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound { min-height: 70vh; display: flex; align-items: center; }
.notfound .code { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 11rem); line-height: 0.9; color: var(--ink); letter-spacing: -0.03em; margin: 0 0 var(--s5); display: inline-block; position: relative; padding-bottom: var(--s3); }
.notfound .code::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--signal); }
.notfound .stencil { display: block; margin-bottom: var(--s4); }

/* ==========================================================================
   FUEL TEXAS LLC — per-customer FLEX override (the 5-token swap, in action).
   THE ONLY divergence from the master chassis. Signal = Fuel Texas LOGO TEAL,
   extracted from the customer-provided Fuel Texas LLC logo (teal camo + chrome;
   Downloads/image0.png → assets/img/logo-fueltexas-*.png) per the
   propane-imagery-system logo-color-scheme build rule: site palette matches
   the customer logo. Type, layout, route-line, motion, spacing, a11y/CWV floor
   stay fixed. Placed last so it wins the cascade over template :root defaults.
   WCAG verified: signal-deep 5.41/4.88/4.59 on ground/sunk/tint;
   signal-on-dark 7.11 on steel; ink-on-signal 7.28 (btn-primary).
   ========================================================================== */
:root {
  --signal:         oklch(0.740 0.125 205); /* logo teal — large fills, route line */
  --signal-deep:    oklch(0.490 0.085 210); /* AA-safe deep teal — small text/links on light grounds */
  --signal-on-dark: oklch(0.780 0.115 200); /* bright teal on --steel dark grounds */
  --ground-tint:    oklch(0.906 0.012 205); /* structural tint biased to logo teal */
}