/* Texas Fuego Trailer Rentals: home page only (loaded after base.css and ride.css).
   The home page builder owns this file. Shared pieces (buttons, cards, lists, FAQ, form, placeholders, burn-in,
   embers, smoke) are in base.css; the ride and the price card are in ride.css. In order:
     1. the opening screen (.ride-hero, inside the ride's sticky stage)  2. price card extras  3. how booking works
     4. the trailer  5. what goes in  6. what to bring  7. photos  8. pickup spot + map  9. areas  10. request
     11. FAQ  12. reduced motion */

/* ======================================================================================================
   1. THE OPENING SCREEN
   The first screen is the ride's opening shot: Brenden's place at night with the cut-out logo glowing in the sky,
   the H1, prices and buttons. It lives INSIDE #ride .ride-stage so the visitor lands on the live scene.
   - js/site.js sets --hero on #ride (0 = fully shown, 1 = gone; over the first 0.4 screen of scrolling), keeps
     html.hero-up while it's < 1, html.hero-cta while the opening screen's own buttons still show (< 0.2) and
     #ride.hero-gone once it's 1. html.ride-drawn comes on once js/ride.js has drawn its first full frame (the canvas
     then fades in over the identical still picture, .ride-poster). js/ride.js holds the story still at its opening
     shot through a lead-in of half a screen, so the truck only starts backing in once this screen is gone.
   - Until the canvas draws (it waits for the first scroll: no canvas work at all while the visitor reads this screen,
     which keeps phones and PageSpeed fast), the scene's life is CSS on the compositor: embers (.hero-embers), smoke
     drifting across the sky (.hero-smoke) and the porch lanterns flickering (.hero-glow, placed by js/ride.js right on
     the poster's lights).
   - Default (no JS, Reduce Motion, or the ride can't start = #ride.is-list): a normal full-screen hero (the still
     picture behind the logo, H1, prices, buttons), followed by the 5 steps as a list.
   ====================================================================================================== */
.site-head.is-over .brand { visibility: hidden; } /* the big logo is right there; no second logo in the corner */
/* not even downloaded on home until the header comes back after the ride (its img is loading="lazy": a lazy image that
   isn't rendered never loads) */
.site-head.is-over .brand img { display: none; }
html { scroll-padding-top: calc(var(--head-h) + 12px); } /* the header comes back as a fixed bar after the ride */

/* After the ride (html.past-ride, js/site.js: #price has covered the stage, or in list mode the opening screen has
   scrolled away) the header slides back in as a fixed bar like the inner pages' sticky header: the menu on phones, the
   nav and Call on tablets and desktop. It goes again inside the ride, so it never covers the pinned stage. Not on
   very short screens (phones on their side, zoomed-in desktops), where the inner pages' header doesn't stick either. */
@media (min-height: 501px), (pointer: fine) and (min-height: 431px) {
  html.past-ride .site-head.is-over {
    position: fixed; 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);
    animation: head-back 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.past-ride .site-head.is-over { background: rgba(6, 6, 8, 0.82); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
  }
  html.past-ride .site-head.is-over::after { display: block; }
  html.past-ride .site-head.is-over .brand { visibility: visible; }
  html.past-ride .site-head.is-over .brand img { display: block; }
}
@keyframes head-back { from { transform: translate3d(0, -100%, 0); } to { transform: none; } }

.ride-hero {
  position: relative; display: flex; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  background: var(--ink);
}
.ride-poster { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ride-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 45% at 50% 18%, rgba(6, 6, 8, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(6, 6, 8, 0.6) 0%, rgba(6, 6, 8, 0) 18%, rgba(6, 6, 8, 0) 52%, rgba(6, 6, 8, 0.72) 80%, var(--night) 100%);
}
.hero-in {
  position: relative; z-index: 3;
  flex: 1; display: flex; flex-direction: column; gap: 18px;
  width: 100%; max-width: calc(1320px + 2 * var(--gut)); margin: 0 auto; /* the header's content box (base.css) */
  padding: calc(var(--head-h) + env(safe-area-inset-top)) var(--gut) calc(18px + var(--bar-h));
  text-align: center;
}
.hero-in > * { min-width: 0; }

/* the logo: no box, just the cut-out floating in the sky with a soft fire glow behind it */
.hero-logo {
  position: relative; align-self: center;
  width: min(92vw, 520px, 60vh); width: min(92vw, 520px, 60svh);
}
.hero-logo::before { /* the glow */
  content: ""; position: absolute; z-index: -1; left: -8%; right: -8%; top: -18%; bottom: -22%; pointer-events: none;
  background:
    radial-gradient(48% 46% at 50% 55%, rgba(255, 70, 20, 0.34), rgba(225, 20, 28, 0.14) 55%, transparent 75%);
  animation: glow 4.2s ease-in-out infinite;
}
.hero-logo img {
  width: 100%; height: auto;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
  animation: logo-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes logo-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes glow {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.03); }
  55% { opacity: 0.7; transform: scale(0.99); }
  80% { opacity: 0.95; transform: scale(1.02); }
}

.hero-foot { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.hero-title { display: grid; justify-items: center; gap: 14px; }
.ride-hero h1 { font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.005em; text-wrap: wrap; }
.h1-a {
  display: block; font-size: clamp(2.35rem, 11.2vw, 4.4rem);
  color: var(--chrome);
  background: linear-gradient(180deg, #ffffff 0%, #eceef2 40%, #a3a8b2 54%, #f4f4f6 68%, #c9ccd2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 18px rgba(225, 20, 28, 0.55));
}
.h1-b {
  display: block; margin-top: 0.22em;
  font-size: clamp(1.25rem, 5.6vw, 2.1rem); letter-spacing: 0.14em; font-weight: 800;
  color: var(--flare); text-shadow: 0 0 6px rgba(0, 0, 0, 0.85), 0 2px 0 #000, 0 0 16px rgba(255, 42, 42, 0.45);
}

/* price: a chrome tag + a burning "first 10" tag */
.hero-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px; }
.hp-main, .hp-deal {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 40px; padding: 4px 14px;
  border-radius: 8px; font-weight: 700; line-height: 1.15;
}
.hp-main { background: rgba(6, 6, 8, 0.72); border: 1.5px solid rgba(244, 244, 246, 0.55); color: var(--steel); }
.hp-num { font-family: var(--head); font-weight: 900; font-size: 1.65em; line-height: 1; color: var(--chrome); }
.hp-deal {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--fire), var(--fire) 60%, #b30e14); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 140, 110, 0.45) inset, 0 6px 24px -6px rgba(255, 42, 42, 0.8);
}
.hp-deal strong { font-weight: 850; }
/* large text (200%) or a narrow column: the tag breaks between its two parts, never inside them */
.hp-deal { flex-wrap: wrap; justify-content: center; row-gap: 0; max-width: 100%; }
.hp-deal > strong { white-space: nowrap; }
.hp-deal::after { /* a hot shimmer runs across the tag now and then */
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 122, 0.1), transparent);
  will-change: transform; transform: skewX(-20deg); animation: shimmer 4.5s ease-in-out 1.4s infinite;
}
/* transform only (animating left counted as layout shifts: CLS 0.006) */
@keyframes shimmer { 0% { transform: translate3d(0, 0, 0) skewX(-20deg); } 28%, 100% { transform: translate3d(425%, 0, 0) skewX(-20deg); } }

.hero-act { display: grid; justify-items: center; gap: 14px; }
.hero-act .btns { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 440px; gap: 10px; }
.hero-act .btn-ghost { background: rgba(6, 6, 8, 0.6); }
@media (min-width: 480px) { .hero-act .btns { grid-template-columns: repeat(2, minmax(0, max-content)); width: auto; max-width: none; } }

.scroll-cue {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; text-decoration: none;
  font-family: var(--head); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.92rem;
  color: var(--steel); text-shadow: 0 1px 6px #000;
}
.scroll-cue:hover { color: #fff; }
.scroll-cue i {
  flex: none; width: 20px; height: 32px; border: 2px solid rgba(244, 244, 246, 0.65); border-radius: 11px; position: relative;
}
.scroll-cue i::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px;
  border-radius: 2px; background: var(--flare); box-shadow: 0 0 6px var(--flare);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(11px); opacity: 0.2; } }

/* big screens: a movie poster. Logo in the sky, the title block and buttons along the dark ground (laptop gutters,
   not the 16 px phone gutter, so the title doesn't hug the screen edge at 1024-1366) */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .hero-in {
    /* --head-fit (site.js): the header's real height, taller than --head-h when large text wraps the nav */
    padding-top: calc(max(var(--head-h), var(--head-fit, 0px)) + 1vh); padding-bottom: calc(26px + var(--bar-h)); text-align: left;
    /* the laptop gutters (base.css: 3.4vw from 1024 px) and the header's 1320 px content box, so the hero's buttons
       line up with the header's Call and the title column keeps its width ("DUMP TRAILER RENTAL" on one line) */
    padding-left: var(--gut); padding-right: var(--gut);
    max-width: calc(1320px + 2 * var(--gut));
  }
  .hero-logo { width: min(46vw, 70vh, 760px); }
  /* title block left (takes the free width), buttons right. A wrapping flex row, not a grid: the title can't shrink
     below its longest word, so with very large browser text the buttons drop under the title instead of covering it */
  .hero-foot { flex-direction: row; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; justify-content: space-between; gap: 20px 40px; }
  /* 26rem basis: narrower than the title column at default text on every desktop (no change there), but it grows with
     the visitor's text size, so with large text the buttons wrap under the title instead of squeezing it into a stack */
  .hero-title { flex: 1 1 26rem; justify-items: start; gap: 16px; }
  /* 6rem cap: one line in the 805 px column at default text. No nowrap: with larger browser text the buttons take
     more of the row, and the title must be free to wrap (balanced) instead of running under them */
  .h1-a { font-size: clamp(3rem, min(5.1vw, 8vh), 6rem); text-wrap: balance; }
  .h1-b { font-size: clamp(1.4rem, min(2.3vw, 3.7vh), 2.7rem); text-wrap: balance; } /* no lone "TX" when it wraps */
  .hero-price { justify-content: flex-start; }
  .hero-act { flex: none; margin-left: auto; justify-items: end; }
  .hero-act .btns { grid-template-columns: repeat(2, max-content); }
}
/* phones on their side and other short screens: everything in the sky, so the ground band (the parked trailer) stays
   clear. Logo, title and prices stacked on the left; Call / Request stacked on the right. Only from 480 px wide: narrower
   short windows (desktop zoom at 300-400%, e.g. 427x360 or the 320x256 reflow size) can't fit two columns, so they get
   the stacked phone layout, and js/ride.js's LIST_QUERY puts them in list mode, where the opening screen can grow */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 480px) {
  .hero-in { padding-top: calc(54px + env(safe-area-inset-top)); padding-bottom: calc(12px + var(--bar-h)); gap: 4px; text-align: left; }
  .hero-logo { width: min(28vw, 230px); align-self: flex-start; }
  .hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; justify-content: initial; flex: none; gap: 8px 20px; }
  .hero-title { justify-items: start; gap: 6px; }
  .h1-a { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }
  .h1-b { font-size: clamp(0.9rem, 2.1vw, 1.2rem); margin-top: 0.15em; }
  .hero-price { justify-content: flex-start; gap: 6px; }
  .hp-main, .hp-deal { min-height: 34px; font-size: 0.88rem; padding: 3px 11px; white-space: nowrap; }
  /* level with the logo, under the header's Menu button */
  .hero-act { justify-items: stretch; gap: 2px; margin-top: calc(10px - min(28vw, 230px) * 0.37); }
  .hero-act .btns { grid-template-columns: minmax(0, 1fr); width: auto; gap: 6px; }
  .hero-act .btn-lg { min-height: 44px; padding: 0.45em 1em; font-size: 0.98rem; }
  .scroll-cue { justify-content: center; font-size: 0.8rem; }
}
/* narrow phones on their side (iPhone SE, 568-700 px wide): tighter still */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 480px) and (max-width: 700px) {
  .hero-logo { width: min(26vw, 200px); }
  .hero-act { margin-top: calc(10px - min(26vw, 200px) * 0.37); }
  .h1-a { font-size: clamp(1.5rem, 4.6vw, 2rem); }
}
/* Short portrait screens (iPhone Safari with its toolbars showing: about 375x553 to 430x746; the iPhone SE): a compact
   stack, so the parked trailer (about 60-69% down the scene) shows between the title block and the buttons. Call on its
   own row; Request a date and a short "Scroll" cue side by side under it. */
.cue-more { display: inline; }
@media (max-width: 1023.98px) and (max-height: 760px) and (orientation: portrait) {
  .hero-in { gap: 8px; }
  .ride-on .ride:not(.is-list) .hero-in { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .hero-logo { width: min(80vw, 42vh); width: min(80vw, 42svh); }
  .h1-a { font-size: clamp(1.95rem, 9.4vw, 2.9rem); }
  .h1-b { font-size: clamp(1.05rem, 4.9vw, 1.55rem); }
  .hero-title { gap: 8px; }
  .hero-price { gap: 6px; }
  .hp-main, .hp-deal { min-height: 36px; padding: 3px 11px; font-size: 0.9rem; }
  .hero-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; gap: 8px 10px; }
  .hero-act .btns { display: contents; }
  .hero-act .btn-fire { grid-column: 1 / -1; }
  .hero-act .btn-lg { min-height: 46px; padding: 0.5em 1em; font-size: 1.02rem; }
  .scroll-cue { padding: 0 4px 0 2px; gap: 8px; }
  .cue-more { /* "Scroll" only, but screen readers still hear the whole label */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* the cue's label: "Scroll to take the ride" in the pinned ride, "See how it works" where the steps are a list (no JS,
   Reduce Motion, very short screens) */
.cue-ride { display: none; }

/* the pinned ride: the opening screen sits over the live canvas and lifts away as you scroll in
   (the same media query as the pinned ride in ride.css: the opposite of LIST_QUERY in js/ride.js) */
.hero-smoke, .hero-glow { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-height: 340px) and (min-width: 480px),
  (prefers-reduced-motion: no-preference) and (min-height: 500.02px),
  (prefers-reduced-motion: no-preference) and (min-height: 340px) and (orientation: portrait) {
  .ride-on .ride:not(.is-list) { --hero: 0; }
  .ride-on .ride:not(.is-list) .cue-ride { display: inline; }
  .ride-on .ride:not(.is-list) .cue-list { display: none; }
  /* a reload or Back mid-ride, before js/site.js runs (the page head sets html.hero-past) */
  .ride-on.hero-past .ride:not(.is-list) .hero-in, .ride-on.hero-past .ride:not(.is-list) .hero-scrim,
  .ride-on.ride-restored .ride:not(.is-list) .ride-poster, .ride-on.ride-restored .ride:not(.is-list) .hero-glow { visibility: hidden; }
  /* the canvas's first frame is mid-ride (js/ride.js: html.ride-cut): it shows at once, no crossfade over the poster */
  .ride-on.ride-cut .ride:not(.is-list) .ride-canvas, .ride-on.ride-cut .ride:not(.is-list) .hero-embers,
  .ride-on.ride-cut .ride:not(.is-list) .hero-smoke, .ride-on.ride-cut .ride:not(.is-list) .hero-glow { transition: none; }
  /* stacking inside the stage: still picture 0, canvas 1, CSS lantern glows 1 (until the canvas draws), scrim 2,
     CSS smoke and embers 2 (until the canvas draws), hero text 3, captions 2 (hidden during the hero), the ride's
     Call pill 3 */
  .ride-on .ride:not(.is-list) .ride-hero { position: static; display: block; min-height: 0; background: none; overflow: visible; }
  .ride-on .ride:not(.is-list) .ride-canvas { z-index: 1; opacity: 0; transition: opacity 0.4s ease; } /* short: where the poster's shape differs a little, the crossfade is brief */
  .ride-on.ride-drawn .ride:not(.is-list) .ride-canvas { opacity: 1; }
  /* the poster's shape is more than ~4% off the stage's (js/ride.js: html.poster-off): a quick fade, no ghosting */
  .ride-on.poster-off .ride:not(.is-list) .ride-canvas { transition-duration: 0.12s; }
  .ride-on .ride:not(.is-list) .hero-scrim { z-index: 2; opacity: calc(1 - var(--hero)); }
  /* the scene's ambient life before the canvas draws (it then has its own embers, smoke and flicker) */
  .ride-on .ride:not(.is-list) .hero-embers, .ride-on .ride:not(.is-list) .hero-smoke, .ride-on .ride:not(.is-list) .hero-glow {
    display: block; transition: opacity 0.7s ease;
  }
  .ride-on .ride:not(.is-list) .hero-embers { z-index: 2; }
  .ride-on.ride-drawn .ride:not(.is-list) .hero-embers, .ride-on.ride-drawn .ride:not(.is-list) .hero-smoke,
  .ride-on.ride-drawn .ride:not(.is-list) .hero-glow { opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s linear 0.7s; }
  .ride-on .ride:not(.is-list) .hero-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .hero-glow i {
    position: absolute; display: block; opacity: 0; border-radius: 50%; mix-blend-mode: screen;
    background: radial-gradient(closest-side at 50% 43%, rgba(255, 196, 120, 0.85), rgba(255, 120, 40, 0.35) 45%, rgba(255, 90, 31, 0) 100%);
  }
  .glows-set .hero-glow i { animation: lantern 3.1s steps(1, end) infinite; }
  .glows-set .hero-glow i:nth-child(2) { animation-duration: 2.6s; animation-delay: -1.3s; }
  .glows-set .hero-glow i:nth-child(3) { animation: yard 5s ease-in-out infinite; }
  .ride-on .ride:not(.is-list) .hero-smoke {
    position: absolute; left: -20%; right: -20%; top: 4%; height: 48%; z-index: 2; pointer-events: none; overflow: hidden;
  }
  .hero-smoke::before, .hero-smoke::after {
    content: ""; position: absolute; inset: 0; will-change: transform;
    background:
      radial-gradient(28% 34% at 22% 40%, rgba(120, 100, 104, 0.2), transparent 70%),
      radial-gradient(34% 30% at 62% 62%, rgba(90, 70, 74, 0.18), transparent 70%);
    animation: drift-sky 46s ease-in-out infinite alternate;
  }
  .hero-smoke::after {
    background: radial-gradient(30% 36% at 78% 30%, rgba(110, 92, 96, 0.16), transparent 70%);
    animation-duration: 38s; animation-direction: alternate-reverse;
  }
  .ride-on .ride:not(.is-list) .hero-in {
    position: absolute; left: 0; right: 0; top: 0; z-index: 3; margin: 0 auto;
    height: 100%; /* the stage: 100svh, the same box the scene is framed in (ride.css) */
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    pointer-events: none;
  }
  .ride-on .ride:not(.is-list) .hero-in a { pointer-events: auto; }
  .ride-on .ride:not(.is-list) .hero-logo {
    transform: translate3d(0, calc(var(--hero) * -24vh), 0) scale(calc(1 - var(--hero) * 0.12));
    opacity: calc(1 - var(--hero) * 1.25);
    will-change: transform, opacity;
  }
  .ride-on .ride:not(.is-list) .hero-foot {
    transform: translate3d(0, calc(var(--hero) * -12vh), 0);
    opacity: calc(1 - var(--hero) * 3.4); /* a third left when html.hero-cta goes (0.2) and the bottom bar / Call pill
      slide in, gone by 0.29, so the two sets of buttons never show together for long */
    will-change: transform, opacity;
  }
  /* fading buttons can't be tapped once the bottom bar / Call pill have taken over (hidden with .hero-in at 1) */
  .ride-on:not(.hero-cta) .ride:not(.is-list) .hero-foot a { pointer-events: none; }
  .ride-on .ride.hero-gone:not(.is-list) .hero-in { visibility: hidden; }
  /* ...but the page's one H1 stays in the accessibility tree (it is already transparent: .hero-foot's opacity is 0) */
  .ride-on .ride.hero-gone:not(.is-list) .hero-in h1 { visibility: visible; }
  /* caption 01 (and the dots) only once the opening screen is gone. Opacity only: the captions are text without links,
     so screen readers reading from the top still get "How renting works" and the 5 steps */
  .ride-on .ride:not(.is-list) .ride-ui { transition: opacity 0.35s ease; }
  .ride-on .ride:not(.is-list):not(.hero-gone) .ride-ui { opacity: 0; transition: opacity 0.2s ease; }
  .ride-on .ride:not(.is-list) .step:focus { outline: none; } /* the cue's landing point (js/site.js), not a control */
  /* #how comes right after #price and, like it, sits above the stage: together they cover the stage when it stops
     being pinned (#price keeps its natural height, ride.css). Its burn-in is on its inner .wrap, so its background is
     never see-through */
  .ride-on .ride:not(.is-list) + .price + .how { z-index: 4; }
  /* The opening screen has its own Call / Request buttons. As they fade (html.hero-cta off at --hero 0.2, after the
     header has scrolled away), the ride's Call pill (desktop, phones on their side) or the bottom bar
     (phones) takes over, so a Call button is always on screen and never two in one corner. */
  .ride-on.hero-cta .ride.is-pinned:not(.is-list) .ride-call { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  @media (max-width: 767.98px), (max-height: 500px) and (pointer: coarse) {
    .mbar { transition: transform 0.25s ease, visibility 0s; }
    .ride-on.hero-cta:has(.ride:not(.is-list)) .mbar { transform: translateY(105%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
    /* ...so don't reserve the bar's strip as scroll padding then: the scroll cue sits in it, and focusing the cue made
       the browser scroll it "clear of the bar", which lifted the opening screen away and dropped keyboard focus */
    .ride-on.hero-cta:has(.ride:not(.is-list)) { scroll-padding-bottom: 12px; }
  }
}
@keyframes lantern { /* an old porch bulb: mostly steady, with quick dips */
  0% { opacity: 0.38; } 17% { opacity: 0.3; } 19% { opacity: 0.08; } 21% { opacity: 0.34; } 48% { opacity: 0.42; }
  62% { opacity: 0.33; } 64% { opacity: 0.12; } 66% { opacity: 0.25; } 68% { opacity: 0.4; } 90% { opacity: 0.36; }
}
@keyframes yard { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.26; } }
@keyframes drift-sky { from { transform: translate3d(-7%, 0, 0); } to { transform: translate3d(7%, -3%, 0); } }

/* ======================================================================================================
   2. PRICE CARD EXTRAS (the card itself is in ride.css: it starts on the ride's red for ~36 px only)
   ====================================================================================================== */
.price { overflow: hidden; }
.price .embers { z-index: 1; }
.price-card { z-index: 2; }
.price-kicker {
  font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.98rem;
  color: var(--flare); margin-bottom: 10px; text-wrap: balance;
}
@media (min-width: 768px) { .price-kicker { margin-bottom: 18px; } }
/* phones on their side: the price heading comes up with less scroll (it is fully on screen within about 0.1 screen
   of the taillight zoom ending) */
@media (max-height: 500px) and (orientation: landscape) {
  .price { padding-top: 24px; }
  .price-card { padding-top: 20px; }
  .price-kicker { margin-bottom: 6px; }
}
.price .deal {
  position: relative; overflow: hidden; isolation: isolate;
  font-size: 1.12rem; color: #fff;
  background: linear-gradient(180deg, var(--fire), var(--fire) 60%, #b30e14);
  border-color: rgba(255, 150, 120, 0.6);
  box-shadow: 0 10px 30px -10px rgba(255, 42, 42, 0.85);
}
/* narrow phones: one line at 360, still one tidy line at 320 (after the base rule, so it wins) */
@media (max-width: 399.98px) { .price .deal { font-size: 1rem; padding: 8px 14px; } }
@media (max-width: 340px) { .price .deal { font-size: 0.9rem; padding: 8px 10px; } }
.price .deal strong { font-weight: 850; }
/* the shimmer stays faint (0.1), so the white "$125 a day" keeps 4.5:1 while it passes behind (4.55:1 at its peak) */
.price .deal::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 122, 0.1), transparent);
  will-change: transform; transform: skewX(-20deg); animation: shimmer 5s ease-in-out 0.6s infinite;
}

/* ======================================================================================================
   3. HOW BOOKING WORKS: a burning fuse joins the 4 steps
   ====================================================================================================== */
.how {
  background:
    radial-gradient(50% 55% at 0% 45%, rgba(122, 10, 14, 0.26), transparent 70%),
    var(--night);
}
.fuse { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 30px; }
.fuse > li { position: relative; padding-left: 70px; min-height: 52px; }
.fuse > li h3 { margin: 4px 0 8px; }
.fuse > li p { color: var(--steel); }
.fuse-n {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--head); font-weight: 900; font-size: 1.45rem; color: var(--chrome);
  background: radial-gradient(circle at 50% 35%, #3a0508, #120305 70%);
  border: 2px solid var(--flare);
  box-shadow: 0 0 0 5px var(--night), 0 0 22px rgba(255, 42, 42, 0.55);
}
.fuse::before { /* the fuse */
  content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--spark), var(--flare) 35%, var(--fire) 70%, rgba(225, 20, 28, 0.35));
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.7);
  transform-origin: 50% 0;
}
@media (min-width: 900px) {
  .fuse { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .fuse > li { padding: 78px 0 0; }
  .fuse::before { left: 26px; right: 26px; top: 25px; bottom: auto; width: auto; height: 3px; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--spark), var(--flare) 30%, var(--fire) 70%, rgba(225, 20, 28, 0.35)); }
}
@media (prefers-reduced-motion: no-preference) {
  .burn-ready .how .burn:not(.is-in) .fuse::before { transform: scaleY(0); }
  .burn-ready .how .burn.is-in .fuse::before { animation: fuse-y 1.8s cubic-bezier(0.4, 0.1, 0.3, 1) 0.3s both; }
  .burn-ready .how .burn:not(.is-in) .fuse-n { opacity: 0.3; box-shadow: 0 0 0 5px var(--night); }
  .burn-ready .how .burn.is-in .fuse > li:nth-child(1) .fuse-n { animation: lit 0.5s ease 0.3s both; }
  .burn-ready .how .burn.is-in .fuse > li:nth-child(2) .fuse-n { animation: lit 0.5s ease 0.8s both; }
  .burn-ready .how .burn.is-in .fuse > li:nth-child(3) .fuse-n { animation: lit 0.5s ease 1.3s both; }
  .burn-ready .how .burn.is-in .fuse > li:nth-child(4) .fuse-n { animation: lit 0.5s ease 1.8s both; }
  @media (min-width: 900px) {
    .burn-ready .how .burn:not(.is-in) .fuse::before { transform: scaleX(0); }
    .burn-ready .how .burn.is-in .fuse::before { animation-name: fuse-x; }
  }
}
@keyframes fuse-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fuse-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lit {
  from { opacity: 0.3; box-shadow: 0 0 0 5px var(--night); }
  60% { opacity: 1; box-shadow: 0 0 0 5px var(--night), 0 0 36px rgba(255, 179, 71, 0.9); }
  to { opacity: 1; box-shadow: 0 0 0 5px var(--night), 0 0 22px rgba(255, 42, 42, 0.55); }
}

/* ======================================================================================================
   4. THE TRAILER: photo placeholders + a diamond-plate spec sheet
   ====================================================================================================== */
.trailer {
  background:
    radial-gradient(60% 55% at 100% 35%, rgba(122, 10, 14, 0.32), transparent 70%),
    linear-gradient(180deg, var(--night), var(--ink));
}
.tr-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
.tr-copy > * + * { margin-top: 14px; }
.tr-copy .plate { margin-top: 24px; }
.tr-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-main { grid-column: 1 / -1; }
.tr-photos .ph-photo:not(.tr-main) { aspect-ratio: auto; min-height: 150px; padding: 14px; gap: 8px; }
.tr-photos .ph-photo:not(.tr-main) .ph { font-size: 0.86rem; }
.tr-photos .ph-photo:not(.tr-main) .ph-ico { width: 32px; height: 32px; }
@media (min-width: 980px) {
  .tr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.plate {
  position: relative; border-radius: 14px; padding: 4px clamp(16px, 3vw, 26px);
  border: 1px solid rgba(244, 244, 246, 0.16);
  background:
    radial-gradient(circle at 14px 14px, #5d5a63 0 3px, #19171c 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #5d5a63 0 3px, #19171c 3.5px, transparent 4.5px),
    radial-gradient(circle at 14px calc(100% - 14px), #5d5a63 0 3px, #19171c 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #5d5a63 0 3px, #19171c 3.5px, transparent 4.5px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 13px),
    linear-gradient(135deg, #222026, #131116 55%, #1d1b21);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -36px rgba(0, 0, 0, 0.95), 0 0 50px -30px rgba(225, 20, 28, 0.6);
}
.plate .specs { border-top: 0; }
.plate .specs > div:last-child { border-bottom: 0; }
.plate .specs dd .muted { font-weight: 500; }

/* ======================================================================================================
   5. WHAT GOES IN: three bins
   ====================================================================================================== */
.bins { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .bins { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.bin h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bin-ico {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid rgba(244, 244, 246, 0.55); background: rgba(244, 244, 246, 0.07);
}
.bin-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--chrome); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bin-no .bin-ico { border-color: var(--flare); background: rgba(225, 20, 28, 0.2); box-shadow: 0 0 18px rgba(255, 42, 42, 0.45); }
.bin-no .bin-ico svg { stroke: #ff7a6e; }
.bin-load .bin-ico { border-color: var(--spark); background: rgba(255, 179, 71, 0.1); }
.bin-load .bin-ico svg { stroke: var(--spark); }
.bin-no::before { /* hazard tape along the top of "Not allowed" */
  height: 6px; opacity: 0.95;
  background: repeating-linear-gradient(-45deg, var(--fire) 0 12px, #0b0a0e 12px 24px);
}
.bin-load::before { background: linear-gradient(90deg, transparent, var(--spark) 30%, #ffd27a 50%, var(--spark) 70%, transparent); }
.bin .list-ok li, .bin .list-no li, .bin .list-star li { line-height: 1.45; }
.bins-note { margin-top: clamp(22px, 3vw, 32px); color: var(--steel); }

/* ======================================================================================================
   6. WHAT TO BRING: a pickup-day ticket
   ====================================================================================================== */
.bring { background: var(--night); padding-top: clamp(48px, 7vw, 88px); }
.ticket {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  border-radius: 22px; border: 1px solid rgba(244, 244, 246, 0.14);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(122, 10, 14, 0.38), transparent 60%),
    linear-gradient(180deg, #1c1920, #110f14);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.95), 0 0 70px -40px rgba(225, 20, 28, 0.6);
}
.ticket-head { position: relative; padding: clamp(24px, 4vw, 44px); border-bottom: 2px dashed rgba(244, 244, 246, 0.18); }
.ticket-head > * + * { margin-top: 12px; }
.ticket-head h2 { font-size: clamp(2.3rem, 6.5vw, 4rem); }
.ticket-list { list-style: none; margin: 0; padding: clamp(10px, 2vw, 18px) clamp(20px, 4vw, 40px); }
.ticket-list > li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.ticket-list > li:last-child { border-bottom: 0; }
.ticket-list h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 4px 0 6px; }
.ticket-list p { color: var(--steel); }
.tk-ico {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 90, 31, 0.3), rgba(225, 20, 28, 0.1) 70%);
  border: 1px solid var(--line-hot);
}
.tk-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--chrome); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ticket-list .ph, .bin .ph { display: inline-block; }
.tk-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--steel); }
@media (min-width: 900px) {
  .ticket { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .ticket-head { border-bottom: 0; border-right: 2px dashed rgba(244, 244, 246, 0.18); display: flex; flex-direction: column; justify-content: center; }
  /* the notches of a torn ticket, top and bottom of the dashed line */
  .ticket::before, .ticket::after {
    content: ""; position: absolute; left: calc(40% - 16px); width: 32px; height: 32px; border-radius: 50%;
    background: var(--night); border: 1px solid rgba(244, 244, 246, 0.14);
  }
  .ticket::before { top: -17px; clip-path: inset(50% 0 0 0); }
  .ticket::after { bottom: -17px; clip-path: inset(0 0 50% 0); }
}

/* ======================================================================================================
   7. PHOTOS: one real photo + placeholders
   ====================================================================================================== */
.photos-head { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.photos-head > * + * { margin-top: 0; }
.photos-head > div > * + * { margin-top: 14px; }
.photo-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.photo-real { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #000; }
.photo-real img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1672 / 941; }
.photo-real figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
  font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem; color: var(--chrome);
}
.photo-grid .ph-photo { aspect-ratio: auto; min-height: 170px; }
@media (min-width: 760px) {
  .photo-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .photo-real { grid-row: span 2; }
  .photo-grid .ph-photo { min-height: 0; }
}

/* ======================================================================================================
   8. PICKUP SPOT: porch-light glow + the map
   ====================================================================================================== */
.pickup {
  background:
    radial-gradient(45% 55% at 12% 30%, rgba(255, 179, 71, 0.12), transparent 70%),
    radial-gradient(50% 60% at 90% 80%, rgba(122, 10, 14, 0.3), transparent 70%),
    var(--ink);
}
.pk-grid { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 980px) { .pk-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.pk-copy > * + * { margin-top: 16px; }
.pk-addr { display: grid; gap: 2px; margin-top: 22px; }
.pk-street {
  font-family: var(--head); font-weight: 900; text-transform: uppercase; line-height: 0.95;
  font-size: clamp(2.6rem, 8vw, 4.4rem); color: var(--chrome);
  text-shadow: 0 0 26px rgba(255, 179, 71, 0.3);
}
@media (min-width: 420px) { .pk-street { white-space: nowrap; } }
@media (min-width: 980px) { .pk-street { font-size: clamp(2.4rem, 4.6vw, 4.4rem); } }
.pk-city { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--flare); }
.pk-list { margin-top: 22px; }

.map-box { position: relative; }
.map svg { display: block; width: 100%; height: auto; }
.mgrid path { stroke: rgba(244, 244, 246, 0.05); stroke-width: 1.5; fill: none; }
.mr { fill: none; stroke: rgba(255, 90, 31, 0.6); stroke-width: 2.5; stroke-dasharray: 2 10; stroke-linecap: round; }
.md { fill: var(--chrome); stroke: #000; stroke-width: 2.5; }
.md-big { fill: var(--flare); }
.md-air { fill: var(--steel); stroke: none; }
.md-city path { fill: rgba(244, 244, 246, 0.42); }
.mp-pin { fill: var(--fire); stroke: #ffd9d2; stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(255, 42, 42, 0.9)); }
.mp-dot { fill: #fff; }
.mp-ring { fill: none; stroke: var(--flare); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.mcompass path { fill: var(--chrome); }
.mcompass .mc-s { fill: rgba(244, 244, 246, 0.25); }
.mcompass text, .mscale text { fill: var(--steel); font-family: var(--head); font-weight: 800; font-size: 34px; letter-spacing: 0.06em; }
.mscale path { stroke: var(--steel); stroke-width: 3; fill: none; }
.map-labels { position: absolute; inset: 0; pointer-events: none; }
.ml {
  position: absolute; white-space: nowrap;
  font-family: var(--body); font-weight: 650; font-size: 12.5px; line-height: 1.2; color: var(--chrome);
  text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 10px #000;
}
.ml-r { transform: translate(10px, -50%); }
.ml-l { transform: translate(calc(-100% - 10px), -50%); }
.ml-t { transform: translate(-50%, calc(-100% - 8px)); }
.ml-b { transform: translate(-50%, 8px); }
.ml-rb { transform: translate(7px, 3px); }
.ml-big { font-family: var(--head); font-weight: 900; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; transform: translate(14px, -50%); }
.ml-air { color: var(--steel); }
.ml-pick {
  transform: translate(10px, 8px); padding: 3px 8px; border-radius: 6px; /* phones: below right of the pin */
  background: var(--fire); color: #fff; font-weight: 700; text-shadow: none;
  box-shadow: 0 6px 18px -6px rgba(255, 42, 42, 0.9);
}
.ml-pick b { font-family: var(--head); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 3px; }
@media (max-width: 419.98px) { /* small phones: shorter pin label, Saginaw's label above its dot */
  .ml-addr { display: none; }
  .ml-nt { transform: translate(-50%, calc(-100% - 8px)); }
}
@media (min-width: 600px) {
  .ml { font-size: 14px; } .ml-big { font-size: 17px; }
  .ml-pick { transform: translate(calc(-100% - 20px), -130%); } /* wide maps: left of the pin */
}
@media (prefers-reduced-motion: no-preference) {
  .mr { animation: route 2.4s linear infinite; }
  .mp-ring { animation: ring 2.6s ease-out infinite; }
  .mp-ring2 { animation-delay: 1.3s; }
  /* only while the map is on screen (js/site.js toggles .is-live): an SVG dash animation is main-thread work */
  .map-gate .pk-map:not(.is-live) .mr, .map-gate .pk-map:not(.is-live) .mp-ring { animation-play-state: paused; }
}
@keyframes route { to { stroke-dashoffset: -24; } }
@keyframes ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }

/* ======================================================================================================
   9. AREAS WE SERVE
   ====================================================================================================== */
/* the map of the towns (same drawing as the Areas page, written in by tools/build-pages.mjs) beside the list, each
   town with its straight-line distance from the pickup spot, nearest first */
.areas-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .areas-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; } }
.towns { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) and (max-width: 899.98px) { .towns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.towns a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 64px; height: 100%; padding: 12px 16px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(180deg, var(--coal2), var(--coal)); border: 1px solid var(--line);
  font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.18rem; line-height: 1.05;
  color: var(--chrome);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.towns .t-name { flex: 1; min-width: 0; }
.towns .t-mi {
  flex: none; font-family: var(--body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: none;
  color: #ffe2b8; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255, 179, 71, 0.5); background: rgba(6, 6, 8, 0.6);
  white-space: nowrap;
}
.towns li:first-child .t-mi { color: #fff; background: var(--fire); border-color: rgba(255, 150, 120, 0.6); }
.towns a i {
  flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--flare); border-top: 2.5px solid var(--flare);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.towns a:hover { border-color: var(--line-hot); box-shadow: 0 0 0 1px rgba(225, 20, 28, 0.3), 0 14px 40px -18px rgba(255, 42, 42, 0.7); }
.towns a:hover i { transform: translateX(4px) rotate(45deg); }

.link-tap { display: inline-flex; align-items: center; min-height: 44px; }

/* ======================================================================================================
   10. REQUEST A DATE
   ====================================================================================================== */
.request {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 100%, rgba(225, 20, 28, 0.22), transparent 70%),
    linear-gradient(180deg, var(--ink), var(--night));
  border-top: 1px solid rgba(225, 20, 28, 0.3);
}

/* ======================================================================================================
   11. FAQ
   ====================================================================================================== */
.faq-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.faq-side > * + * { margin-top: 14px; }
@media (min-width: 980px) {
  .faq-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
  .faq-side { position: sticky; top: 32px; }
}

/* ======================================================================================================
   12. REDUCED MOTION: nothing moves (base.css already hides embers and smoke)
   ====================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-logo::before, .hero-logo img, .hp-deal::after, .price .deal::after, .scroll-cue i::after, .hero-glow i, .hero-smoke::before, .hero-smoke::after { animation: none; }
  .hp-deal::after, .price .deal::after { display: none; }
  .towns a, .towns a i { transition: none; }
}