@charset "utf-8";

:root { --gold: #F5A800; --orange: #E65C00; --charcoal: #1C1C1E; --black: #0a0a0a; --dark-gray: #404040; --light-gray: #F2F2F2; --white: #ffffff; --font-display: 'Cinzel', serif; --font-headline: 'Oswald', sans-serif; --font-label: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; }

*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }

html { scroll-behavior: smooth; }

body { background: var(--black); color: var(--white); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.nav { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1000; background: var(--charcoal); display: flex; align-items: center; justify-content: space-between; padding: 0px 24px; height: 64px; }

.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }

.nav-links a { font-family: var(--font-headline); font-weight: 600; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--white); transition: color 0.2s; }

.nav-links a:hover { color: var(--gold); }

.nav-call { background: var(--gold); padding: 8px 18px; border-radius: 2px; font-family: var(--font-headline); font-weight: 700; font-size: 14px; letter-spacing: 1px; white-space: nowrap; transition: background 0.2s; color: var(--black) !important; }

.nav-call:hover { background: rgb(224, 150, 0) !important; color: var(--black) !important; }

.nav-mobile-call { display: none; }

/* ===== Mobile hamburger button (hidden on desktop) ===== */
.nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; position: relative;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.nav-hamburger-bar {
  display: block; width: 26px; height: 3px;
  background: var(--white); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-hamburger.is-open .nav-hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-hamburger.is-open .nav-hamburger-bar:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.is-open .nav-hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== Mobile drawer ===== */
.nav-drawer-backdrop {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 998; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.nav-drawer-backdrop.is-open {
  opacity: 1; pointer-events: auto;
}
.nav-drawer {
  position: fixed; top: 64px; left: 0; right: 0;
  background: var(--charcoal);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 999;
  transform: translateY(-110%);
  transition: transform 0.28s ease;
  padding: 18px 24px 22px;
  display: none;
}
.nav-drawer.is-open {
  transform: translateY(0);
}
.nav-drawer-links {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column;
}
.nav-drawer-links li + li {
  border-top: 1px solid rgba(245, 168, 0, 0.18);
}
.nav-drawer-links a {
  display: block; padding: 16px 4px;
  font-family: var(--font-headline); font-weight: 600;
  font-size: 18px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--white);
  transition: color 0.15s ease;
}
.nav-drawer-links a:active,
.nav-drawer-links a:hover {
  color: var(--gold);
}
.nav-drawer-call {
  display: block; text-align: center;
  background: var(--gold); color: var(--black) !important;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 20px; letter-spacing: 0.04em;
  padding: 14px 18px; border-radius: 4px;
  margin-top: 4px;
}
body.nav-drawer-locked { overflow: hidden; }

.hero { background: var(--black); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 100px 24px 60px; position: relative; overflow: hidden; }

/* Override the inline session padding so the dragon icon clears the 64px fixed nav on desktop too,
   then tighten the rest of the hero so first equipment card peeks above the fold. */
section.hero { padding-top: 76px !important; }
section.hero .hero-tagline { margin-bottom: 20px; }
/* Hide "VIEW OUR FLEET" header on every viewport — fleet is visible right below, header is redundant */
.fleet .section-header { display: none !important; }

.hero-icon { width: 220px; height: 220px; margin: 0px auto; background-image: url("../images/dragon_icon_bg.png"); background-size: contain; background-position: center top; background-repeat: no-repeat; position: relative; }

.hero-wordmark { display: flex; flex-direction: column; align-items: center; gap: 0px; margin-bottom: 18px; }

.hero-dragon { font-family: var(--font-display); font-weight: 900; font-size: clamp(52px, 10vw, 96px); color: var(--gold); letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; }

.hero-equipment { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 52px); color: var(--white); letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; }

.hero-rentals { font-family: var(--font-label); font-weight: 600; font-size: clamp(14px, 2.5vw, 20px); color: var(--orange); letter-spacing: 0.35em; text-transform: uppercase; margin-top: 6px; }

.hero-tagline { font-family: var(--font-headline); font-weight: 600; font-size: clamp(14px, 2vw, 20px); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 36px; line-height: 1.5; }

.hero-tagline span { color: var(--gold); }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.marquee-wrap { background: var(--orange); padding: 20px 0px; overflow: hidden; white-space: nowrap; }

.marquee-track { display: inline-flex; animation: 28s linear 0s infinite normal none running marquee; gap: 0px; }

.marquee-item { font-family: var(--font-label); font-weight: 800; font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--black); padding: 0px 40px; display: inline-flex; align-items: center; gap: 14px; }

.marquee-dot { width: 5px; height: 5px; background: #ffffff; border-radius: 50%; flex-shrink: 0; }

@keyframes marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}

.fleet { background: var(--black); padding: 80px 24px; }

.section-header { text-align: center; margin-bottom: 56px; }

.section-label { font-family: var(--font-label); font-weight: 700; font-size: 20px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }

.section-title { font-family: var(--font-headline); font-weight: 700; font-size: clamp(28px, 3.5vw, 44px); color: var(--white); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }

.section-title span { color: var(--gold); }

.fleet-category { margin-bottom: 144px; max-width: 1200px; margin-left: auto; margin-right: auto; }

.category-label { font-family: var(--font-label); font-weight: 700; font-size: 29px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); border-bottom: none; padding-bottom: 16px; margin-bottom: 24px; position: relative; }

.equipment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px; }

/* Center the orphan 3rd card on desktop when a category has exactly 3 non-wide cards
   (Skid Steer Loaders after Wood Chipper removal — Smooth Bucket + Trencher + Auger).
   :not(:has(.wide)) excludes the Mini Excavator category which has a wide hero. */
@media (min-width: 768px) {
  /* Force 2-col layout for non-wide 3-card grids so row 1 cards are big and row 2 has one orphan */
  .fleet-category .equipment-grid:not(:has(.equipment-card.wide)):has(.equipment-card:nth-child(3):last-child) {
    grid-template-columns: 1fr 1fr;
  }
  /* Orphan 3rd card: explicit width so aspect-ratio: 4/3 anchors correctly */
  .fleet-category .equipment-grid:not(:has(.equipment-card.wide)) > .equipment-card:nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 3px);
  }
}

.equipment-card { position: relative; overflow: hidden; background: var(--charcoal); aspect-ratio: 4 / 3; cursor: default; border: 1.5px solid #F5A800; border-radius: 4px; }

.equipment-card.wide { grid-column: span 2; aspect-ratio: 16 / 9; }

.equipment-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.equipment-grid .equipment-card img.shift-right { object-position: 0% 50% !important; }

.cab-badge { position: absolute; top: 12px; right: 12px; background: #1C1C1E; color: #FFFFFF; font-family: var(--font-label); font-weight: 400; font-size: 17px; letter-spacing: 0; padding: 5px 11px; text-transform: uppercase; text-align: center; line-height: 1; z-index: 5; border: 1px solid #F5A800; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); white-space: nowrap; }
@media (max-width: 480px) { .cab-badge { font-size: 15px; padding: 4px 9px; top: 10px; right: 10px; border-radius: 3px; } }



.card-overlay { inset: 0px; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 0px 20px 20px; transition: background 0.3s; position: absolute; }

.card-name { font-family: var(--font-headline); font-weight: 700; font-size: clamp(16px, 2.5vw, 22px); color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1; margin-bottom: 4px; }

.card-tag { font-family: var(--font-label); font-weight: 700; font-size: 18px; color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 2px; }

/* PRICE GRID — same 3-row mini-table on desktop and mobile.
   Desktop: card-price is a row flex, price grid sits left, reserve button sits right.
   Mobile: card-price is a column flex (set in @media block) — reserve button drops below. */
.card-price { font-family: var(--font-label); font-weight: 700; font-size: 13px; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.05em; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.card-price-text {
  display: grid !important;
  grid-template-columns: max-content max-content max-content !important;
  column-gap: 6px !important;
  row-gap: 1px !important;
  align-items: baseline !important;
  flex: 0 1 auto !important;
  white-space: normal !important;
  overflow: visible !important;
}
.price-tier { display: contents; }
.price-sep { color: var(--gold); font-weight: 700; font-size: 18px; }
.price-period { color: var(--gold); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.price-amt { color: #ffffff !important; font-size: 18px; justify-self: start; }

.card-attachments { font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-top: 4px; line-height: 1.4; }

/* Center all card body content as a group: title, description, and the price+reserve row.
   Applies to both desktop and mobile. */
.equipment-grid .equipment-card .card-tag,
.equipment-grid .equipment-card .card-name,
.equipment-grid .equipment-card .card-attachments { text-align: center !important; }
.equipment-grid .equipment-card .card-overlay { align-items: center !important; }
.equipment-grid .equipment-card .card-price { justify-content: center !important; }



.cta-band { background: var(--orange); padding: 56px 24px; text-align: center; }

.cta-band-title { font-family: var(--font-headline); font-weight: 700; font-size: clamp(24px, 5vw, 44px); color: var(--white); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; line-height: 1.1; }

.cta-band-sub { font-family: var(--font-body); font-size: 15px; color: rgba(255, 255, 255, 0.85); margin-bottom: 32px; }

.cta-band .btn-call { display: inline-block; background: var(--black); color: var(--gold); font-family: var(--font-headline); font-weight: 700; font-size: clamp(17px, 3vw, 26px); letter-spacing: 0.04em; padding: 14px 34px; border-radius: 2px; border: 2px solid rgba(245, 168, 0, 0.4); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s; }

.cta-band .btn-call:hover { background: var(--gold); color: var(--black); border-color: var(--gold); transform: translateY(-2px); }

.service-area { background: var(--black); padding: 40px 24px; text-align: center; border-top: 1px solid rgba(245, 168, 0, 0.1); border-bottom: 1px solid rgba(245, 168, 0, 0.1); }

.service-area p { font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.55); max-width: 720px; margin: 0px auto; line-height: 1.7; }

/* Section anchor offsets — nav link scrolls land with section content visible (not under nav bar) */
.service-area, #service { scroll-margin-top: 100px; }
#fleet { scroll-margin-top: 80px; }

/* Service area header (title + tagline above the map) */
.service-area-header { max-width: 1100px; margin: 0 auto 18px; padding: 0 16px; text-align: center; line-height: 1.5; }
.service-area-title { font-family: var(--font-label); font-weight: 700; font-size: 22px; color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; }
.service-area-sep { color: var(--gold); font-weight: 700; padding: 0 4px; }
.service-area-tagline { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 600px) { .service-area-title { font-size: 18px; letter-spacing: 0.15em; } .service-area-tagline { font-size: 13px; } .service-area-sep { display: block; visibility: hidden; height: 4px; } }

/* "Full of Gas" card — gold link to ZIP checker */
.card-zip-cta {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold) !important;
  text-decoration: none;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.card-zip-cta:hover {
  color: #fff !important;
  border-color: #fff;
}

/* Free-delivery promo banner — orange w/ gold border, slide-in on load, gentle 15s breathing pulse on the headline */
.delivery-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 20px;
  background: var(--orange);
  border-top: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-headline);
  transition: background 0.25s;
  overflow: hidden;  /* clip the text while it slides in from off-screen */
}
.delivery-banner:hover {
  background: #CC5200;  /* ~10% darker orange */
}
.delivery-banner-star { color: var(--gold); font-size: 16px; line-height: 1; }
.delivery-banner-text {
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
  transform-origin: center;
  /* 1) slide in slowly over 3s. 2) hold still for 1s. 3) pulse and continue cycle every 15s. */
  animation:
    der-text-slide-in 3s ease-out both,
    der-text-pulse 15s ease-in-out 4s infinite;
}
.delivery-banner-cta {
  color: #000 !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 600px) {
  /* Tight 2-row layout on mobile: star+text on row 1, CTA centered on row 2 */
  .delivery-banner { gap: 6px 10px; padding: 8px 14px; }
  .delivery-banner-star { font-size: 12px; }
  .delivery-banner-text { font-size: 12px; letter-spacing: 0.08em; }
  .delivery-banner-cta { font-size: 11px; flex-basis: 100%; text-align: center; }
}
@keyframes der-text-slide-in {
  from { transform: translateX(-110vw); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes der-text-pulse {
  /* The text lands → immediately pulse once at 0%, then idle until 95%, then pulse again at end of cycle */
  0%   { transform: scale(1.04); }
  3%   { transform: scale(1); }
  95%  { transform: scale(1); }
  97.5%{ transform: scale(1.04); }
  100% { transform: scale(1); }
}
/* Respect users who prefer reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .delivery-banner, .delivery-banner-text { animation: none !important; }
}

/* Service area ZIP-zone checker (sits above the map) */
.service-area-checker { max-width: 480px; margin: 0 auto 22px; padding: 0 16px; text-align: center; }
.service-area-checker-label { display: block; font-family: var(--font-headline); font-weight: 600; font-size: 13px; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; }
#der-service-zip { width: 100%; max-width: 220px; background: #1C1C1E; border: 1px solid var(--gold); color: var(--white); font-family: var(--font-body); font-size: 18px; padding: 12px 16px; text-align: center; letter-spacing: 0.2em; border-radius: 4px; outline: none; box-sizing: border-box; -webkit-appearance: none; }
#der-service-zip:focus { border-color: #fff; }
.der-zip-result { margin-top: 12px; min-height: 56px; display: none; flex-direction: column; align-items: center; gap: 4px; }
.der-zip-result.visible { display: flex; animation: derZipFadeIn 0.3s ease-out; }
.der-zip-result .der-zip-badge { font-size: 30px; line-height: 1; }
.der-zip-result .der-zip-text { font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.3; }
.der-zip-result.in-zone .der-zip-badge { color: #00B140; }
.der-zip-result.in-zone .der-zip-text { color: var(--white); }
.der-zip-result.out-of-zone .der-zip-badge { color: var(--orange); }
.der-zip-result.out-of-zone .der-zip-text { color: var(--orange); }
@keyframes derZipFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Service area interactive map */
#service-map { width: 100%; height: 460px; max-width: 1100px; margin: 0 auto 40px; border: 1.5px solid #F5A800; border-radius: 4px; background: #1C1C1E; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
@media (max-width: 768px) { #service-map { height: 340px; } }
@media (max-width: 480px) { #service-map { height: 280px; margin: 0 auto 28px; } }
.leaflet-container { background: #1C1C1E !important; font-family: var(--font-body) !important; }
.leaflet-popup-content-wrapper { background: #1C1C1E !important; color: #fff !important; border: 1px solid #F5A800; border-radius: 2px; }
.leaflet-popup-tip { background: #1C1C1E !important; }
.leaflet-popup-content { margin: 12px 16px !important; font-size: 13px; line-height: 1.4; }
.leaflet-control-zoom a { background: #1C1C1E !important; color: #F5A800 !important; border: 1px solid #444 !important; }
.leaflet-control-zoom a:hover { background: #2a2a2a !important; }
.leaflet-control-attribution { background: rgba(28,28,30,0.75) !important; color: #888 !important; font-size: 10px !important; }
.leaflet-control-attribution a { color: #F5A800 !important; }

.service-area strong { color: var(--gold); font-weight: 500; }

.footer { background: var(--charcoal); padding: 56px 24px 32px; }

.footer-inner { max-width: 1200px; margin: 0px auto 48px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; }

.footer-logo img { height: 44px; width: auto; margin-bottom: 18px; display: block; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; }

.footer-tagline { font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.5); line-height: 1.65; margin-bottom: 20px; }

.footer-call-link { display: inline-block; font-family: var(--font-headline); font-weight: 700; font-size: 22px; color: var(--gold); letter-spacing: 0.04em; }

.footer-col-title { font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-links a { font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.55); transition: color 0.2s; }

.footer-links a:hover { color: var(--gold); }

.footer-contact-item { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.footer-contact-label { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }

.footer-contact-val { font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.6); }

.footer-bottom { max-width: 1200px; margin: 0px auto; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

.footer-copy { font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.3); }

.footer-legal { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.25); }

/* Sticky CALL + TEXT bar — mobile only. Audit Items #3 + #4. */
.sticky-call {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: var(--charcoal);
  border-top: 1px solid rgba(245, 168, 0, 0.4);
  padding-bottom: env(safe-area-inset-bottom);  /* iOS home-indicator clearance */
}
.sticky-call-btn {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 8px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
  transition: filter 0.15s ease;
  min-height: 56px;  /* large thumb target */
}
.sticky-call-btn:active { filter: brightness(0.85); }
.sticky-call-btn--call {
  background: var(--gold);
  color: var(--black) !important;
}
.sticky-call-btn--text {
  background: var(--orange);
  color: var(--white) !important;
}
.sticky-call-icon {
  font-size: 22px;
  line-height: 1;
}
.sticky-call-label {
  line-height: 1;
}

@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-call { display: none; }
  .nav { justify-content: flex-start; padding: 0 16px; position: fixed; }
  .nav-logo { margin-right: auto; position: relative; z-index: 2; }
  /* Center the phone number absolutely in the nav on mobile */
  .nav-mobile-call {
    display: block;
    font-family: var(--font-headline); font-weight: 700;
    font-size: 14px; color: var(--orange); letter-spacing: 0.05em;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    z-index: 1;
  }
  .nav-hamburger { display: inline-flex; position: relative; z-index: 2; }
  .nav-drawer { display: block; }
  /* On mobile, flip card-price to column flex so reserve button drops below the
     price grid, then center the grid horizontally. Bigger fonts for thumb readability. */
  .equipment-grid .equipment-card .card-price {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .equipment-grid .equipment-card .card-price-text {
    column-gap: 8px !important;
    row-gap: 2px !important;
    justify-content: center !important;
  }
  .equipment-grid .equipment-card .price-amt {
    font-size: 18px !important;
  }
  .equipment-grid .equipment-card .price-sep {
    font-size: 18px !important;
  }
  .equipment-grid .equipment-card .price-period {
    font-size: 18px !important;
  }
  /* Tighten mobile hero so first product card is reachable in one swipe (UX Audit #8).
     padding-top clears the 64px fixed nav with minimal breathing room above the icon. */
  section.hero { padding-top: 64px !important; padding-bottom: 10px !important; }
  .hero .hero-logo-img { width: min(390px, 66vw); margin-bottom: 6px !important; }
  section.hero .hero-tagline { font-size: clamp(11px, 3.2vw, 13px); letter-spacing: 0.04em; margin-bottom: 14px; line-height: 1.4; }
  /* Category labels (Mini Excavators / Skid Steer Loaders / etc): 25% smaller + centered on mobile */
  .fleet .category-label { font-size: 27px !important; text-align: center !important; }
  /* Slim the marquee on mobile: thinner type + 10px padding top/bottom */
  .marquee-wrap { padding: 10px 0 !important; }
  .marquee-item { font-weight: 500 !important; font-size: 16px !important; letter-spacing: 0.12em !important; padding: 0 28px !important; }
  .hero-icon { width: 160px; height: 160px; }
  .equipment-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .equipment-card.wide { grid-column: span 2; aspect-ratio: 16 / 9; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* Show the sticky CALL + TEXT bar on mobile, reserve body space so content doesn't hide behind it */
  .sticky-call { display: flex; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .hero-ctas { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .equipment-grid { grid-template-columns: 1fr; }
  .equipment-card.wide { grid-column: span 1; }
  .nav-logo img { height: 30px; }
}

@keyframes fadeInUp { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.hero-tagline, .hero-ctas { animation: 0.8s ease 0s 1 normal both running fadeInUp; }

.hero-tagline { animation-delay: 0.3s; }

.hero-ctas { animation-delay: 0.5s; }

.hero-logo-img { width: min(340px, 38vw); height: auto; display: block; margin: 0px auto 36px; animation: 0.7s ease 0s 1 normal both running fadeInUp; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; box-shadow: none; vertical-align: bottom; line-height: 0; }

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.nav-icon { height: 54px; width: auto; display: block; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; box-shadow: none; }

.nav-wordmark { display: flex; flex-direction: column; line-height: 1; gap: 2px; }

.nav-word-dragon { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; }

.nav-word-sub { font-family: var(--font-label); font-weight: 600; font-size: 10px; color: var(--white); letter-spacing: 0.28em; text-transform: uppercase; }

.nav-horiz-logo { height: 40px; width: auto; display: block; }

.attachment-spec { font-family: var(--font-body); font-size: 15px; color: rgba(255, 255, 255, 0.55); margin-top: 18px; margin-bottom: 40px; padding: 14px 20px; border-left: 3px solid var(--gold); background: rgba(245, 168, 0, 0.05); line-height: 1.7; }

.attachment-spec-label { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-right: 10px; }

.card-placeholder { width: 100%; height: 100%; background: rgb(17, 17, 17); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 2px dashed rgba(245, 168, 0, 0.2); }

.placeholder-icon { font-size: 36px; opacity: 0.3; }

.placeholder-text { font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245, 168, 0, 0.4); }



.why-because { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 42px); color: rgba(255, 255, 255, 0.25); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 40px; font-style: italic; }

.why-answer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px; }

.why-answer-title { font-family: var(--font-headline); font-weight: 700; font-size: clamp(22px, 3vw, 32px); color: var(--white); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.1; display: block; }

.why-answer-body { font-family: var(--font-body); font-size: 16px; color: rgba(255, 255, 255, 0.55); line-height: 1.65; max-width: 420px; display: block; margin-top: 8px; }

.why-divider { width: 60px; height: 1px; background: rgba(245, 168, 0, 0.3); }

.because-wrap { max-width: 600px; margin: 48px auto 60px; text-align: center; display: flex; flex-direction: column; align-items: center; }

.because-label { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(20px, 3vw, 28px); color: rgba(255, 255, 255, 0.2); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 44px; }

.because-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 20px; width: 100%; }

.because-title { font-family: var(--font-headline); font-weight: 700; font-size: clamp(24px, 3.5vw, 34px); color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1; }

.because-body { font-family: var(--font-body); font-size: 16px; color: rgba(255, 255, 255, 0.55); line-height: 1.7; max-width: 460px; }

.because-rule { width: 50px; height: 1px; background: rgba(245, 168, 0, 0.3); }

.why { padding-bottom: 80px; }

.hero-call-btn { display: inline-block; background: var(--black); color: var(--gold); font-family: var(--font-headline); font-weight: 700; font-size: clamp(17px, 3vw, 26px); letter-spacing: 0.04em; padding: 14px 34px; border-radius: 2px; border: 2px solid rgba(245, 168, 0, 0.4); transition: background 0.2s, color 0.2s, border-color 0.2s; text-align: center; }

.hero-call-btn:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.category-label::after { content: ""; display: block; height: 3px; background: linear-gradient(to right, #F5A800, #E65C00); border-radius: 2px; margin-top: 12px; }