/* Texas Fuego Trailer Rentals: shared styles for every page.
   Colors come from Brenden's logo: black/charcoal, fire red, chrome, steel. NO BLUE anywhere (links, focus rings,
   selection, form controls all use the palette below).
   What lives where:
     base.css   (this file) tokens, fonts, reset, type, header/nav, footer, buttons, sections, cards, lists, FAQ,
                form controls + the request form, placeholders (.ph / .ph-photo), embers, smoke, burn-in reveal,
                CTA band, map frame, phone bottom bar, utilities, page transitions.
     ride.css   the Night Haul ride and the price card it hands off to (home page only).
     home.css   home page sections.
     pages.css  inner pages (page hero, breadcrumbs, gallery, town pages). */

/* ---------- fonts (self-hosted) + size-matched fallbacks so the swap barely moves anything ---------- */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("assets/fonts/big-shoulders-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "BSD Fallback";
  src: local("Arial Narrow"), local("ArialNarrow"), local("Roboto Condensed"), local("Arial");
  size-adjust: 92%;
  ascent-override: 98%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 104%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #060608;
  --night: #0b0a0e;
  --coal: #141218;
  --coal2: #1d1a21;
  --smoke: #2a2630;
  --blood: #3a0508;
  --ember: #7a0a0e;
  --fire: #e1141c;      /* buttons, bars, big shapes (white text on it passes AA) */
  --flare: #ff2a2a;     /* red TEXT on dark backgrounds (fire is too dark for small text on black) */
  --spark: #ffb347;     /* focus ring, hot highlights */
  --chrome: #f4f4f6;
  --steel: #c9ccd2;
  --gun: #8a8f98;       /* small print on black only (6:1); use steel on charcoal */
  --line: rgba(244, 244, 246, 0.12);
  --line-hot: rgba(255, 42, 42, 0.45);
  /* the red the ride's taillight zoom ends on; the price card starts with exactly this color (ride.css) */
  --ride-red: #c8101a;
  --head: "Big Shoulders Display", "BSD Fallback", "Arial Narrow", sans-serif;
  --body: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --gut: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --wrap: 1180px;
  --radius: 16px;
  --head-h: 68px;       /* header height (sticky offset for anchors on inner pages) */
  --bar-h: 0px;         /* phone bottom bar height (set below on phones) */
  color-scheme: dark;
  accent-color: var(--fire);
}
/* laptops and iPads on their side: real gutters (16 px hugged the screen edge at 1024-1366), the same on every page
   and the home opening screen, so the header, the hero and the sections share their edges */
@media (min-width: 1024px) {
  :root { --gut: max(24px, 3.4vw, env(safe-area-inset-left), env(safe-area-inset-right)); }
}

/* ---------- reset + type ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(225, 20, 28, 0.25);
  scroll-padding-top: 12px;
  /* focused fields and links are never scrolled in under the phone bottom bar (WCAG 2.4.11); --bar-fit is the bar's
     real height (js/site.js), taller than --bar-h when large text wraps its labels */
  scroll-padding-bottom: calc(max(var(--bar-h), var(--bar-fit, 0px)) + 12px);
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--chrome);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
  padding-bottom: max(var(--bar-h), var(--bar-fit, 0px)); /* the footer credit always clears the bar */
}
img, picture, canvas, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 0.98; margin: 0; letter-spacing: 0.01em; text-wrap: balance; }
h2 { font-weight: 900; text-transform: uppercase; font-size: clamp(2.1rem, 6vw, 3.6rem); }
h3 { font-weight: 800; text-transform: uppercase; font-size: clamp(1.35rem, 2.8vw, 1.75rem); line-height: 1.02; }
h4 { font-weight: 800; text-transform: uppercase; font-size: 1.2rem; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
strong, b { font-weight: 750; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--fire); color: #fff; }
:focus-visible { outline: 3px solid var(--spark); outline-offset: 3px; }
[hidden] { display: none !important; }

/* links inside running text: chrome with a fire underline */
.prose a, .link {
  color: var(--chrome); text-decoration: underline; text-decoration-color: var(--flare);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.prose a:hover, .link:hover { color: #fff; text-decoration-color: var(--spark); }
/* running text: spaced paragraphs and lists */
.prose { max-width: 68ch; color: var(--steel); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { color: var(--chrome); margin-top: 1.4em; }
.prose strong { color: var(--chrome); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.35em; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--chrome); color: var(--ink); padding: 10px 14px; border-radius: 8px; font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------- utilities ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { --wrap: 780px; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.muted { color: var(--steel); }
.small { font-size: 0.92rem; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.t-fire { color: var(--flare); }
.t-chrome {
  background: linear-gradient(180deg, #ffffff 0%, #e9eaee 38%, #9aa0aa 52%, #f4f4f6 64%, #c9ccd2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.35em;
  border-radius: 10px; border: 2px solid transparent;
  font-family: var(--body); font-weight: 750; font-size: 1.02rem; letter-spacing: 0.01em;
  text-decoration: none; line-height: 1.1; white-space: normal; max-width: 100%; text-align: center;
  cursor: pointer; background: none;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-fire {
  background: linear-gradient(180deg, #f0262d, var(--fire) 55%, #b80e15);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 90, 80, 0.35) inset, 0 8px 26px -8px rgba(225, 20, 28, 0.75);
}
.btn-fire:hover { box-shadow: 0 0 0 1px rgba(255, 120, 100, 0.5) inset, 0 10px 34px -6px rgba(255, 42, 42, 0.85); }
.btn-ghost { border-color: rgba(244, 244, 246, 0.7); color: var(--chrome); background: rgba(6, 6, 8, 0.35); }
.btn-ghost:hover { border-color: var(--chrome); background: rgba(244, 244, 246, 0.08); }
.btn-sm { min-height: 44px; padding: 0.5em 1em; font-size: 0.95rem; }
.btn-lg { min-height: 56px; padding: 0.8em 1.7em; font-size: 1.12rem; }
.btn-block { display: flex; width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btns-center { justify-content: center; }

/* ---------- header + nav ----------
   Inner pages: a normal sticky header. Home: add class "is-over" (sits on top of the hero, scrolls away, so it never
   covers the pinned ride). Phones (< 1024 px): a Menu button opens the nav as a panel (js/site.js). Without JS the
   nav shows as a wrapped row under the logo. */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.96), rgba(6, 6, 8, 0.92));
  border-bottom: 1px solid rgba(225, 20, 28, 0.28);
  padding-top: env(safe-area-inset-top);
}
.site-head::after { /* a thin ember line under the header */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 31, 0.8) 30%, rgba(255, 42, 42, 0.9) 60%, transparent);
  opacity: 0.6;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-head { background: rgba(6, 6, 8, 0.82); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
}
.site-head.is-over {
  position: absolute; left: 0; right: 0; top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%) no-repeat;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0; /* (a transparent border let the gradient repeat into it: a hard dark line across the logo) */
}
.site-head.is-over::after { display: none; }
.head-in {
  display: flex; align-items: center; gap: 12px;
  max-width: calc(1320px + 2 * var(--gut)); margin: 0 auto;
  min-height: var(--head-h); padding: 6px var(--gut);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; flex: none; }
.brand img { width: auto; height: 50px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.site-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px;
  font-family: var(--head); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--steel); position: relative;
}
.site-nav a:hover { color: #fff; }
.site-nav a::after { /* glowing underline for hover and the current page */
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--spark), var(--flare));
  box-shadow: 0 0 10px rgba(255, 42, 42, 0.8);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--chrome); }
.head-call { flex: none; }

.nav-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 14px;
  border-radius: 10px; border: 2px solid rgba(244, 244, 246, 0.35); background: rgba(6, 6, 8, 0.55);
  font-family: var(--head); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.05rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--chrome); }
.nav-bars { position: relative; width: 20px; height: 14px; }
.nav-bars i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-bars i:nth-child(1) { top: 0; }
.nav-bars i:nth-child(2) { top: 6px; background: var(--flare); }
.nav-bars i:nth-child(3) { top: 12px; }
.nav-open .nav-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-bars i:nth-child(2) { opacity: 0; }
.nav-open .nav-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023.98px) {
  .head-in { flex-wrap: wrap; }
  .brand img { height: 44px; }
  .js .nav-toggle { display: inline-flex; order: 3; }
  .head-call { order: 2; }
  /* the panel (JS) */
  .js .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
    padding: 10px var(--gut) 18px;
    background: linear-gradient(180deg, #060608, #140406);
    border-bottom: 1px solid rgba(225, 20, 28, 0.45);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 12px 40px -18px rgba(225, 20, 28, 0.5);
    max-height: calc(100vh - var(--head-h) - var(--bar-h)); overflow-y: auto;
  }
  .js .nav-open .site-nav { display: block; animation: nav-in 0.22s ease-out; }
  .js .site-nav ul { flex-direction: column; gap: 2px; }
  .js .site-nav a { min-height: 54px; font-size: 1.5rem; padding: 0 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .js .site-nav a::after { left: 8px; right: auto; width: 48px; bottom: 10px; }
  /* no JS: the links wrap in a row under the logo */
  html:not(.js) .site-head { position: relative; } /* no JS: the wrapped nav is tall, so the header doesn't stick */
  html:not(.js) .site-nav { order: 4; width: 100%; }
  html:not(.js) .site-nav a { padding: 0 10px; font-size: 1rem; }
}
/* phones on their side: the panel's links are shorter, so the last one isn't hidden under the bottom bar */
@media (max-width: 1023.98px) and (max-height: 500px) {
  .js .site-nav a { min-height: 44px; font-size: 1.3rem; }
}
/* very short screens (phones on their side, desktops zoomed to 200-400%): the header scrolls away with the page
   instead of sticking, so the content gets the screen; with a fine pointer the bottom bar sits at the end of the page */
@media (max-height: 500px) and (pointer: coarse), (max-height: 430px) {
  .site-head { position: relative; }
}
@media (max-height: 430px) and (pointer: fine) {
  .mbar { position: static !important; }
  body { padding-bottom: 0 !important; }
  :root { --bar-h: 0px !important; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(60px, 9vw, 116px) 0; }
/* ghost words, smoke and embers may hang past the edges: never a sideways scroll (clip keeps sticky working) */
.sec, .cta-band { overflow-x: hidden; overflow-x: clip; }
/* Safari 15.4-15.x has no overflow: clip: overflow-x: hidden alone would make every section a scroll container (a
   touch could scroll a section's own content); hidden on both axes can't be scrolled by the visitor */
@supports not (overflow: clip) { .sec, .cta-band { overflow: hidden; } }
.sec-tight { padding: clamp(40px, 6vw, 72px) 0; }
.sec-alt { background: linear-gradient(180deg, var(--night), var(--coal) 30%, var(--night)); }
.sec-alt::before { /* glowing seam at the top of an alternate section */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 42, 42, 0.55), transparent);
}
.sec-head { max-width: 46rem; margin-bottom: clamp(26px, 4vw, 44px); }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head > * + * { margin-top: 14px; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--flare); font-size: 0.98rem; line-height: 1.2;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; box-shadow: 0 0 8px rgba(255, 42, 42, 0.8); }
.center .kicker::after, .kicker.both::after { content: ""; width: 26px; height: 2px; background: currentColor; box-shadow: 0 0 8px rgba(255, 42, 42, 0.8); }
.lead { font-size: clamp(1.1rem, 2.4vw, 1.3rem); color: var(--steel); max-width: 44ch; }
.center .lead { margin-left: auto; margin-right: auto; }
.lead strong { color: var(--chrome); }

/* big decorative chrome word behind a section ("HAUL", "DUMP", "DFW"); aria-hidden. Slides sideways with the scroll
   where the browser supports scroll-driven animations (Chrome); everywhere else it just sits there. */
.ghost-word {
  position: absolute; z-index: 0; left: 0; top: clamp(10px, 3vw, 40px); pointer-events: none; user-select: none;
  font-family: var(--head); font-weight: 900; text-transform: uppercase; line-height: 0.8; white-space: nowrap;
  font-size: clamp(7rem, 26vw, 22rem); letter-spacing: -0.01em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(244, 244, 246, 0.07);
  background: linear-gradient(180deg, rgba(244, 244, 246, 0.07), rgba(244, 244, 246, 0)); -webkit-background-clip: text; background-clip: text;
}
.sec > .wrap { position: relative; z-index: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ghost-word { animation: ghost-slide linear both; animation-timeline: view(); }
    .ghost-word.to-left { animation-name: ghost-slide-l; }
  }
}
@keyframes ghost-slide { from { transform: translateX(-12%); } to { transform: translateX(6%); } }
@keyframes ghost-slide-l { from { transform: translateX(10%); } to { transform: translateX(-14%); } }

/* ---------- cards + grids ---------- */
.grid { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--coal2), var(--coal));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.card::before { /* ember edge along the top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fire) 30%, var(--spark) 50%, var(--fire) 70%, transparent);
  opacity: 0.55;
}
.card > * + * { margin-top: 10px; }
.card h3 { color: var(--chrome); }
.card p { color: var(--steel); }
.card-hot { border-color: var(--line-hot); box-shadow: 0 0 0 1px rgba(225, 20, 28, 0.25), 0 30px 70px -40px rgba(225, 20, 28, 0.7); }
.card-ico {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 90, 31, 0.35), rgba(225, 20, 28, 0.12) 70%);
  border: 1px solid var(--line-hot); color: var(--chrome);
}
.card-ico svg { width: 28px; height: 28px; fill: currentColor; }

/* small pill ("First 10 customers: $125 a day") */
.tag {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35em;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(225, 20, 28, 0.16); border: 1px solid rgba(255, 42, 42, 0.6);
  font-weight: 650; line-height: 1.3; color: var(--chrome);
}
.tag strong { color: #fff; }

/* ---------- lists ---------- */
.list-ok, .list-no, .list-star { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.card > * + .list-ok, .card > * + .list-no, .card > * + .list-star { margin-top: 12px; } /* lists sit below a card's heading */
.list-ok li, .list-no li, .list-star li { position: relative; padding-left: 34px; color: var(--steel); }
.list-ok li strong, .list-no li strong, .list-star li strong { color: var(--chrome); }
.list-ok li::before, .list-no li::before {
  content: ""; position: absolute; left: 0; top: 0.12em; width: 22px; height: 22px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
.list-ok li::before {
  background-color: rgba(244, 244, 246, 0.1); box-shadow: 0 0 0 1.5px rgba(244, 244, 246, 0.55) inset;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23f4f4f6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.list-no li::before {
  background-color: rgba(225, 20, 28, 0.22); box-shadow: 0 0 0 1.5px rgba(255, 42, 42, 0.8) inset;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ff5a5a' stroke-width='3.2' stroke-linecap='round' d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.list-star li::before { content: "\2605"; position: absolute; left: 4px; top: 0; color: var(--flare); }

/* numbered steps (big fire numerals, like the ride captions) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(18px, 3vw, 28px); counter-reset: st; }
.steps > li { counter-increment: st; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start; }
.steps > li::before {
  content: counter(st, decimal-leading-zero); grid-row: span 2;
  font-family: var(--head); font-weight: 900; font-size: clamp(2.8rem, 7vw, 3.8rem); line-height: 0.85;
  color: var(--fire); text-shadow: 0 0 22px rgba(225, 20, 28, 0.55); font-variant-numeric: tabular-nums;
}
.steps h3 { margin-top: 2px; }
.steps p { color: var(--steel); }

/* spec sheet: <dl class="specs"><div><dt>Size</dt><dd>7x16</dd></div>...</dl> */
.specs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.specs > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel); font-size: 1.05rem; }
.specs dd { margin: 0; color: var(--chrome); font-weight: 600; }
@media (max-width: 479.98px) { .specs > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ: <div class="faq"><details><summary>Q</summary><div class="faq-a"><p>A</p></div></details> ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  background: linear-gradient(180deg, var(--coal2), var(--coal)); border: 1px solid var(--line); border-radius: 12px;
}
.faq details[open] { border-color: var(--line-hot); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 18px; font-weight: 700; font-size: 1.08rem; color: var(--chrome);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px; border-right: 2.5px solid var(--flare); border-bottom: 2.5px solid var(--flare);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq-a { padding: 0 18px 18px; color: var(--steel); }
.faq-a > * + * { margin-top: 0.8em; }
.faq-a a { color: var(--chrome); text-decoration-color: var(--flare); text-underline-offset: 3px; }

/* ---------- placeholders: everything Brenden still has to send. ONE class so they're easy to find (grep "ph") ----
   inline:  <span class="ph">[HITCH SIZE — ASK BRENDEN]</span>
   photo:   <figure class="ph-photo ar-43"><svg class="ph-ico" ...camera...></svg>
              <figcaption class="ph">[PHOTO: the trailer loaded with junk — ASK BRENDEN]</figcaption></figure> */
.ph {
  /* one box even when it wraps (inline + clone drew two dashed boxes for "[SIDE HEIGHT — ASK / BRENDEN]") */
  display: inline-block; max-width: 100%; vertical-align: baseline; padding: 0.05em 0.4em; border-radius: 5px;
  border: 2px dashed var(--flare); background: rgba(225, 20, 28, 0.14);
  color: #ffd9d2; font-family: var(--body); font-weight: 750; font-size: 0.92em; letter-spacing: 0.02em;
  text-transform: none; line-height: 1.6; overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph-photo {
  position: relative; margin: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  aspect-ratio: 4 / 3; padding: 20px; text-align: center; overflow: hidden;
  border: 2px dashed var(--flare); border-radius: var(--radius);
  background:
    radial-gradient(90% 70% at 50% 110%, rgba(225, 20, 28, 0.28), transparent 70%),
    repeating-linear-gradient(135deg, rgba(244, 244, 246, 0.035) 0 12px, transparent 12px 24px),
    var(--coal);
}
.ph-photo .ph { border: 0; background: none; padding: 0; font-size: 0.98rem; line-height: 1.4; display: block; max-width: 30ch; }
.ph-ico { width: 46px; height: 46px; fill: none; stroke: var(--flare); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(255, 42, 42, 0.6)); }
.ar-11 { aspect-ratio: 1 / 1; } .ar-43 { aspect-ratio: 4 / 3; } .ar-34 { aspect-ratio: 3 / 4; } .ar-169 { aspect-ratio: 16 / 9; } .ar-32 { aspect-ratio: 3 / 2; }

/* ---------- embers (CSS only, transform/opacity; never block paint): <div class="embers" aria-hidden="true"> + 12 <i> */
.embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.embers i {
  position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #ffd27a 0%, #ff5a1f 45%, rgba(225, 20, 28, 0) 75%);
  box-shadow: 0 0 6px 1px rgba(255, 90, 31, 0.7);
  opacity: 0;
  animation: rise 7s linear infinite;
}
.embers i:nth-child(1) { left: 6%; animation-delay: 0s; animation-duration: 7.5s; }
.embers i:nth-child(2) { left: 14%; animation-delay: 2.1s; animation-duration: 9s; width: 3px; height: 3px; }
.embers i:nth-child(3) { left: 23%; animation-delay: 4.3s; }
.embers i:nth-child(4) { left: 31%; animation-delay: 1.2s; animation-duration: 8.2s; }
.embers i:nth-child(5) { left: 42%; animation-delay: 5.5s; animation-duration: 6.4s; }
.embers i:nth-child(6) { left: 51%; animation-delay: 3.1s; animation-duration: 8.8s; width: 3px; height: 3px; }
.embers i:nth-child(7) { left: 60%; animation-delay: 0.7s; animation-duration: 7.1s; }
.embers i:nth-child(8) { left: 68%; animation-delay: 6.2s; animation-duration: 9.4s; }
.embers i:nth-child(9) { left: 76%; animation-delay: 2.7s; animation-duration: 6.9s; width: 5px; height: 5px; }
.embers i:nth-child(10) { left: 84%; animation-delay: 4.9s; animation-duration: 8.4s; }
.embers i:nth-child(11) { left: 91%; animation-delay: 1.8s; animation-duration: 7.7s; }
.embers i:nth-child(12) { left: 97%; animation-delay: 3.8s; animation-duration: 9.8s; width: 3px; height: 3px; }
@keyframes rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate3d(18px, -45vh, 0); opacity: 0.85; }
  100% { transform: translate3d(-12px, -95vh, 0); opacity: 0; }
}

/* ---------- smoke: <div class="smoke" aria-hidden="true"></div> drifts along the bottom of a section ---------- */
.smoke { position: absolute; left: -10%; right: -10%; bottom: 0; height: min(60%, 360px); pointer-events: none; z-index: 0; overflow: hidden; }
.smoke::before, .smoke::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 55% at 20% 85%, rgba(150, 140, 150, 0.12), transparent 70%),
    radial-gradient(35% 50% at 60% 95%, rgba(120, 110, 120, 0.10), transparent 70%),
    radial-gradient(30% 45% at 90% 80%, rgba(150, 140, 150, 0.09), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
.smoke::after { animation-duration: 34s; animation-direction: alternate-reverse; transform: scaleX(-1); opacity: 0.8; }
/* off screen (js/site.js toggles .is-live near the viewport): paused, no per-frame style work */
.map-gate .smoke:not(.is-live)::before, .map-gate .smoke:not(.is-live)::after { animation-play-state: paused; }
@keyframes drift { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -4%, 0); } }

/* ---------- burn-in reveal: add class "burn" to a section or block below the fold.
   js/site.js sets html.burn-ready and adds .is-in as each one scrolls into view: it burns in top to bottom behind a
   glowing ember edge. Without JS (or with Reduce Motion) everything is simply visible. ---------- */
@property --burn { syntax: "<percentage>"; inherits: false; initial-value: 120%; }
.burn-ready .burn { position: relative; --burn: 120%; }
.burn-ready .burn:not(.is-in) { --burn: -20%; }
@media (prefers-reduced-motion: no-preference) {
  .burn-ready .burn:not(.is-done) {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(var(--burn) - 16%), rgba(0, 0, 0, 0.35) calc(var(--burn) - 3%), transparent var(--burn));
    mask-image: linear-gradient(180deg, #000 0%, #000 calc(var(--burn) - 16%), rgba(0, 0, 0, 0.35) calc(var(--burn) - 3%), transparent var(--burn));
  }
  /* only the reveal animates (hiding at load is instant) */
  .burn-ready .burn.is-in:not(.is-done) { transition: --burn 1.15s cubic-bezier(0.3, 0.55, 0.25, 1); }
  .burn-ready .burn:not(.is-done)::after { /* the glowing edge riding along the burn line */
    /* the box stays still (full height) and only its paint moves: animating "top" was a layout shift every frame (CLS) */
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; pointer-events: none;
    --burn: inherit; /* follows the section's animated value (the property doesn't inherit by itself) */
    background: linear-gradient(180deg, transparent calc(var(--burn) - 9% - 18px), rgba(255, 70, 20, 0.4) calc(var(--burn) - 9% - 5px),
      #ffd27a calc(var(--burn) - 9%), rgba(255, 70, 20, 0.4) calc(var(--burn) - 9% + 5px), transparent calc(var(--burn) - 9% + 18px));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 70%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 70%, transparent);
    opacity: 0.9;
  }
  .burn-ready .burn:not(.is-in)::after { opacity: 0; }
}
/* browsers without @property (Safari < 16.4): --burn can't animate, so it jumps to its end value and the block simply
   appears when it scrolls in (never stuck hidden: site.js also adds .is-done after 1.4 s, which drops the mask) */

/* ---------- CTA band (Call + Request a date), used near the bottom of every page ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(56px, 8vw, 100px) 0;
  background:
    radial-gradient(70% 120% at 85% 120%, rgba(225, 20, 28, 0.55), transparent 65%),
    radial-gradient(50% 90% at 0% 0%, rgba(122, 10, 14, 0.5), transparent 70%),
    linear-gradient(180deg, #120305, #060608);
  border-top: 1px solid rgba(225, 20, 28, 0.35); border-bottom: 1px solid rgba(225, 20, 28, 0.2);
}
.cta-in { position: relative; z-index: 3; display: grid; gap: 22px; align-items: center; }
.cta-in h2 { font-size: clamp(2.2rem, 6.5vw, 4rem); text-shadow: 0 0 30px rgba(225, 20, 28, 0.5); }
.cta-in p { color: var(--steel); max-width: 46ch; margin-top: 12px; }
@media (min-width: 900px) { .cta-in { grid-template-columns: minmax(0, 1.4fr) auto; } }

/* ---------- map frame (inline SVG drawn from real lat/long + a "Get directions" link) ---------- */
.map {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: radial-gradient(80% 80% at 50% 50%, #1a0d10, #0b0a0e 75%);
  box-shadow: 0 30px 70px -40px rgba(225, 20, 28, 0.6);
}
.map svg { width: 100%; height: auto; }
.map figcaption { padding: 12px 16px; color: var(--steel); font-size: 0.95rem; border-top: 1px solid var(--line); }

/* ---------- the area map (inline SVG drawn from real latitude/longitude; tools/build-pages.mjs areaMap: inner pages
   and the home Areas block) ---------- */
.area-map text { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 30px; }
.area-map .m-ring { fill: rgba(225, 20, 28, 0.035); stroke: rgba(255, 42, 42, 0.38); stroke-width: 2; stroke-dasharray: 4 10; }
.area-map .m-ring-l { fill: rgba(255, 140, 120, 0.8); font-size: 24px; letter-spacing: 0.12em; }
.area-map .m-grid { stroke: rgba(244, 244, 246, 0.045); stroke-width: 1; }
.area-map .m-dot { fill: #d9dbe0; stroke: #0b0a0e; stroke-width: 4; }
.area-map .m-lbl { fill: var(--steel); paint-order: stroke; stroke: #0b0a0e; stroke-width: 7px; stroke-linejoin: round; }
.area-map .is-focus .m-dot { fill: var(--fire); stroke: #fff; stroke-width: 3; }
.area-map .is-focus .m-lbl { fill: #fff; }
.area-map .m-pin { fill: var(--fire); stroke: #fff; stroke-width: 4; }
.area-map .m-pin-l { fill: #fff; font-size: 34px; }
.area-map .m-pin-sub { fill: #ffd9d2; font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 24px; }
.area-map .m-tag { fill: var(--fire); }
.area-map .m-tag-t { fill: #fff; font-size: 22px; letter-spacing: 0.16em; }
.area-map .m-route { fill: none; stroke: var(--spark); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 14; }
.area-map .m-dist { fill: rgba(6, 6, 8, 0.9); stroke: rgba(255, 179, 71, 0.75); stroke-width: 2; }
.area-map .m-dist-t { fill: #ffe2b8; font-size: 26px; }
.area-map .m-scale { stroke: var(--steel); stroke-width: 3; fill: none; }
.area-map .m-scale-t, .area-map .m-north-t { fill: var(--steel); font-size: 22px; letter-spacing: 0.12em; }
.area-map .m-north { fill: var(--flare); }
/* (paused while off screen: js/site.js marks maps near the viewport .is-live) */
.map-gate .map:not(.is-live) .m-route, .map-gate .map:not(.is-live) .m-glow { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .area-map .m-route { animation: route-run 1.6s linear infinite; }
  .area-map .m-glow { animation: pin-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes route-run { to { stroke-dashoffset: -32; } }
@keyframes pin-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }
/* phones: the map is small, so its words get bigger (SVG user units; every label at least 12 CSS px from 343 px of
   map width, i.e. 375 px phones; narrower phones get the step below) */
@media (max-width: 640px) {
  .area-map text { font-size: 38px; }
  .area-map .m-pin-l { font-size: 40px; }
  .area-map .m-pin-sub, .area-map .m-dist-t { font-size: 36px; }
  .area-map .m-ring-l, .area-map .m-scale-t, .area-map .m-north-t, .area-map .m-tag-t { font-size: 36px; }
  .area-map .m-lbl { stroke-width: 9px; }
}
@media (max-width: 374.98px) {
  .area-map text { font-size: 42px; }
  .area-map .m-pin-sub, .area-map .m-dist-t, .area-map .m-ring-l, .area-map .m-scale-t, .area-map .m-north-t,
  .area-map .m-tag-t { font-size: 42px; }
  .area-map .m-pin-l { font-size: 46px; }
}

/* ---------- request form (markup: docs/partials/request-form.html; behaviour: js/site.js) ---------- */
.request-form { position: relative; }
.rf-card {
  position: relative; max-width: 760px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(29, 26, 33, 0.96), rgba(14, 12, 17, 0.98));
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95), 0 0 70px -30px rgba(225, 20, 28, 0.55);
}
.rf-card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fire), var(--spark), var(--fire), transparent);
}
/* the form fields only show once js/site.js has wired them up; until then (or with JS off) the call panel shows */
.request-form:not(.rf-ready) .rf-body { display: none; }
.request-form.rf-ready .rf-nojs { display: none; }
.rf-nojs { display: grid; gap: 14px; justify-items: start; }
.rf-nojs p { color: var(--steel); }
.rf-grid { display: grid; gap: 18px 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-grid .span-2 { grid-column: 1 / -1; }
}
.rf-legend { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--flare); font-size: 1rem; padding: 0; margin-bottom: 12px; }
.rf-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.rf-set + .rf-set { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.field > label, .field-label { font-weight: 700; font-size: 1rem; color: var(--chrome); line-height: 1.3; }
.opt { font-weight: 450; color: var(--steel); font-size: 0.92rem; }
.req { color: var(--flare); font-weight: 800; }
.hint { color: var(--steel); font-size: 0.92rem; line-height: 1.4; }
/* (:where() keeps this at 0,1,1, so the focus and error rules below win the border and fill on every typed input) */
.field input:where(:not([type="checkbox"]):not([type="radio"])), .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font-size: max(16px, 1.0625rem); line-height: 1.3; /* 16px+: no iOS zoom */
  color: var(--chrome); background: #0e0c11;
  border: 1.5px solid rgba(244, 244, 246, 0.24); border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8f939b; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(244, 244, 246, 0.42); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--spark); box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.35);
}
.field select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ff2a2a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field select option { background: #0e0c11; color: var(--chrome); }
.field input[type="date"] { display: block; text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.85; cursor: pointer; }
/* the calendar button (its own Tab stop in Chrome): the field is then :focus-within but not :focus, and a :focus-visible
   rule on the indicator never matches, so ring the whole field */
.field input[type="date"]:focus-within:not(:focus) {
  outline: 3px solid var(--spark); outline-offset: 2px; border-color: var(--spark); box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.35);
}
/* Mac Safari paints today's date in an empty date field: dim it so the field doesn't look filled in */
.field input[type="date"]:invalid:not(:focus)::-webkit-datetime-edit { opacity: 0.4; }
.field [aria-invalid="true"], .field [aria-invalid="true"]:not(:focus):hover { border-color: var(--flare); background-color: #1a0709; box-shadow: 0 0 0 3px rgba(255, 42, 42, 0.22); }
.field-err { display: flex; gap: 8px; align-items: flex-start; color: #ffb4a8; font-weight: 650; font-size: 0.95rem; line-height: 1.35; }
.field-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fire); color: #fff; font-weight: 900; font-size: 0.8rem; margin-top: 1px; }
.check {
  display: flex; gap: 14px; align-items: flex-start; min-height: 48px; padding: 12px 14px; cursor: pointer;
  border: 1.5px solid rgba(244, 244, 246, 0.18); border-radius: 12px; background: rgba(6, 6, 8, 0.5);
  font-weight: 600; line-height: 1.4;
}
.check:hover { border-color: rgba(244, 244, 246, 0.4); }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--fire); cursor: pointer; }
.check input:focus-visible { outline: 3px solid var(--spark); outline-offset: 2px; }
.check:has(input:checked) { border-color: var(--line-hot); background: rgba(225, 20, 28, 0.1); }
.check:has(input[aria-invalid="true"]) { border-color: var(--flare); background: #1a0709; }
.checks { display: grid; gap: 10px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rf-alert {
  margin-bottom: 20px; padding: 14px 16px; border-radius: 12px;
  border: 2px solid var(--flare); background: #1a0709; color: var(--chrome);
}
.rf-alert:focus { outline: 3px solid var(--spark); outline-offset: 3px; }
.rf-alert h3 { font-size: 1.3rem; margin-bottom: 6px; }
.rf-alert ul { margin: 0; padding-left: 1.2em; }
.rf-alert li { padding: 5px 0; line-height: 1.45; }
.rf-alert a { color: #ffd9d2; text-decoration-color: var(--flare); text-underline-offset: 3px; }
.rf-est {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-top: 22px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(225, 20, 28, 0.18), rgba(225, 20, 28, 0.04));
  border: 1px solid var(--line-hot);
}
.rf-est-main { font-family: var(--head); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--chrome); }
.rf-est-deal { color: var(--steel); font-weight: 600; }
.rf-est-deal strong { color: #fff; }
.rf-note { margin-top: 14px; color: var(--steel); font-size: 0.95rem; }
.rf-actions { margin-top: 22px; display: grid; gap: 12px; }
.rf-actions .btn { width: 100%; }
@media (min-width: 640px) { .rf-actions { grid-template-columns: auto 1fr; align-items: center; } .rf-actions .btn { width: auto; } }
.rf-submit[disabled] { opacity: 0.7; cursor: progress; }
.rf-done { display: grid; gap: 14px; justify-items: start; text-align: left; }
.rf-done:focus { outline: none; }
.rf-done h3 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.rf-done p { color: var(--steel); max-width: 52ch; }
.rf-done p strong { color: var(--chrome); }
.rf-done .rf-flame { width: 56px; height: 56px; }

/* ---------- footer ---------- */
.site-foot {
  position: relative; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 0%, rgba(122, 10, 14, 0.35), transparent 70%), #000;
  color: var(--steel); font-size: 0.97rem;
  border-top: 1px solid rgba(225, 20, 28, 0.3);
  padding: clamp(44px, 6vw, 72px) 0 calc(18px + env(safe-area-inset-bottom));
}
.foot-in { display: grid; gap: 32px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-brand, .foot-in > .foot-col:nth-child(2) { grid-column: 1 / -1; } /* phones: Pages + Towns side by side */
/* tablets: the brand on its own row, then Pick up, Pages and Towns side by side (no lone column on a third row) */
@media (min-width: 700px) { .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-in > .foot-col:nth-child(2) { grid-column: auto; } }
@media (min-width: 1000px) { .foot-in { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: auto; } }
.foot-logo { display: inline-block; }
.foot-logo img { width: 240px; height: auto; }
.foot-brand > * + * { margin-top: 12px; }
.foot-brand p { max-width: 34ch; }
.foot-price { color: var(--chrome); font-weight: 650; }
.foot-h {
  font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 1rem;
  color: var(--flare); margin-bottom: 8px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col a, .foot-base a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px;
  color: var(--steel); text-decoration: none;
}
.foot-col a:hover, .foot-base a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--flare); text-underline-offset: 3px; }
.foot-col address { color: var(--chrome); line-height: 1.5; margin-bottom: 4px; }
.foot-tel { color: var(--chrome) !important; font-weight: 750; font-size: 1.1rem; }
.foot-col .ico { width: 20px; height: 20px; color: var(--flare); }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; align-items: center;
  margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--gun); font-size: 0.92rem;
}
.foot-base .credit a { color: var(--steel); text-decoration: underline; text-decoration-color: rgba(255, 42, 42, 0.6); text-underline-offset: 3px; }

/* ---------- phone bottom bar (Call + Request a date) ---------- */
.mbar { display: none; }
@media (max-width: 767.98px), (max-height: 500px) and (pointer: coarse) {
  :root { --bar-h: calc(68px + env(safe-area-inset-bottom)); }
  .head-call { display: none; } /* the bottom bar carries Call on phones */
  .mbar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: rgba(6, 6, 8, 0.97);
    border-top: 1px solid rgba(225, 20, 28, 0.35);
  }
  .mbar .btn { min-height: 48px; padding: 0.5em 0.8em; }
}
/* narrow phones: a tighter label; with large text it wraps onto two lines instead of running off the screen */
@media (max-width: 399.98px) { .mbar .btn { font-size: 0.95rem; white-space: normal; line-height: 1.1; text-align: center; padding: 0.5em 0.6em; } }
/* phones on their side: a slimmer bar (it takes a big share of a 390 px tall screen) */
@media (max-height: 500px) and (pointer: coarse) {
  :root { --bar-h: calc(56px + env(safe-area-inset-bottom)); }
  .mbar { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .mbar .btn { min-height: 44px; }
}

/* ---------- page-to-page transitions (Chrome/Edge/Safari 18.2+; others just load the page) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.22s ease-in both; }
::view-transition-new(root) { animation: vt-in 0.32s ease-out both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- reduced motion: no movement anywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  .embers, .smoke::before, .smoke::after { display: none; }
  .btn, .site-nav a::after, .nav-bars i, .faq summary::after { transition: none; }
  .js .nav-open .site-nav { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* spacing utilities (last, so they win over component margins) */
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }