.page-hero-equal-height {
  min-height: calc(var(--bs-body-font-size) * 31.25) !important;
  display: flex;
  align-items: center;
}

.page-hero-equal-height > .container {
  width: 100%;
}

/* Phone CTA (matches contact "Ready to Book?" tel button) */
.btn.btn-phone-cta {
  background: #67a5f1;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  transition: background-color 0.2s ease;
}

.btn.btn-phone-cta:hover {
  background-color: var(--bs-primary);
}

.btn.btn-phone-cta .bi {
  color: inherit;
}

/* Reservation + phone button stack (home, pricing, contact, etc.) */
.cta-btn-stack {
  max-width: min(100%, 23rem);
}

/* Home "Guaranteed Flat Rates" CTA lead copy:
   ≥ laptop (992px): cap width so the paragraph wraps to ~2 lines, centered.
   < laptop: no cap — uses full width of the column (normal flow). */
@media (min-width: 992px) {
  .cta-flat-rates-lead {
    display: block;
    max-width: min(100%, 48rem);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Pricing "Save More" — same border tone as footer `text-body-secondary` / `--bs-secondary-color` */
.pricing-banner-rule {
  flex-grow: 1;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--bs-secondary-color);
}

.pricing-banner-icon-ring {
  width: 52px;
  height: 52px;
  border: 1px solid var(--bs-secondary-color);
}

/* Blog list layout (blog.html): thumbnails + YouTube in horizontal rows */
.blog-list-view .zoom-img > a {
  display: block;
  border-radius: 0.75rem;
  overflow: hidden;
}

.blog-list-view .zoom-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  vertical-align: middle;
}

.blog-list-view .zoom-img .js-youtube-player {
  border-radius: 0.75rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* Home jarallax hero: copy sits in an absolutely positioned flex layer
   (align-items: center). Padding on .hero-agency does not inset that layer,
   so vertical breathing room uses .hero-agency-content (not for overlay nav —
   navbar stays normal in-flow).
   Small viewports: shorter band so less empty space above the fold; md+ fixed min-height. */
.hero-agency {
  min-height: clamp(25rem, 72dvh, 32rem);
  padding: 0;
}

@media (min-width: 768px) {
  .hero-agency {
    min-height: 520px;
  }
}

.hero-agency .hero-agency-content {
  box-sizing: border-box;
  padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
}

.read-more-toggle .icon-chevron-up {
  display: none;
}

.read-more-toggle[aria-expanded="true"] .icon-chevron-down {
  display: none;
}

.read-more-toggle[aria-expanded="true"] .icon-chevron-up {
  display: inline-block;
}

.pricing-lax-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.pricing-lax-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.13) !important;
}

/* In-page footer anchors: offset for navbar when scrolling */
#mobile-app,
#services,
#fleet,
#pricing-examples,
#faq {
  scroll-margin-top: 5.5rem;
}