/* Keep navigation reachable even at 320px. A hidden empty actions wrapper and
   a max-content brand used to push the quote/home menu outside the viewport. */
@media (max-width: 720px) {
  .site-header .nav-wrap { gap: 10px; }
  .site-header .nav-actions { display: none; }
  .site-header .brand { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 54px); gap: 8px; }
  .site-header .brand-mark { width: 30px; flex: 0 0 30px; }
  .site-header .brand-type { min-width: 0; }
  .site-header .brand-sub { white-space: normal; line-height: 1.35; }
  .site-header .menu-toggle { flex: 0 0 44px; min-width: 44px; width: 44px; min-height: 44px; margin-left: auto; }
}

/* Cache-compatibility guard: older HTML could retain the retired floating
   links after a site-wide contact-control update. Keep them non-rendering even
   when a browser restores a mixed old-HTML/new-CSS page from cache. */
body > a[class*="quote-"][class$="float"],
body > a[class*="whatsapp-"][class$="float"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body > a[class*="quote-"][class$="float"] svg,
body > a[class*="whatsapp-"][class$="float"] svg {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.mobile-contact-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 150px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  box-sizing: border-box;
  color: #fff;
  background: #0b0d0f;
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .075em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, filter .2s ease;
}

.mobile-contact-action:hover,
.mobile-contact-action:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.mobile-contact-action svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-contact-quote {
  color: #0b0d0f;
  background: linear-gradient(135deg, #e2c57f 0%, #d4a953 58%, #bb8537 100%);
  border-color: #cda85f;
}

.mobile-contact-phone {
  color: #e4bb65;
  background: #111417;
  border-color: rgba(224,181,101,.72);
}

.mobile-contact-whatsapp {
  color: #fff;
  background: #07271b;
  border-color: rgba(37,211,102,.32);
}

.mobile-contact-whatsapp svg {
  color: #25d366;
}

.mobile-contact-symbol {
  display: none;
  font: 700 22px/1 Georgia, serif;
}

body .back-to-top {
  right: 23px !important;
  bottom: 194px !important;
}

body.analytics-consent-open .mobile-contact-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 720px), (max-width: 960px) and (max-height: 520px) {
  html {
    scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  body.quote-page {
    padding-bottom: 0;
  }

  .mobile-contact-actions {
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1.15fr .85fr 1fr;
    width: 100%;
    gap: 6px;
    padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    border-top: 1px solid rgba(224,181,101,.28);
    background: rgba(8,10,12,.97);
    box-shadow: 0 -12px 30px rgba(0,0,0,.24);
    backdrop-filter: blur(18px);
  }

  .mobile-contact-action {
    width: 100%;
    height: 52px;
    min-height: 52px;
    gap: 6px;
    padding: 0 8px;
    border-radius: 4px;
    box-shadow: none;
    font-size: 10px;
    letter-spacing: .065em;
  }

  .mobile-contact-action svg {
    width: 18px;
    height: 18px;
  }

  .mobile-contact-symbol {
    display: inline;
    font-size: 18px;
  }

  .mobile-contact-label {
    display: inline;
  }

  .mobile-contact-phone .mobile-contact-label {
    font-size: 0;
  }

  .mobile-contact-phone .mobile-contact-label::after {
    content: "Call";
    font-size: 10px;
  }

  body.quote-page .mobile-contact-actions {
    display: none;
  }

  body .back-to-top {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-contact-action { transition: none; }
}

/* Mobile conversion simplification — 2026-09-14.
   Keep the persistent action dock as the single global conversion row, shorten
   duplicate content, and preserve every desktop layout and booking rule. */
.mobile-fleet-link,
.mobile-services-link,
.mobile-quote-progress,
.mobile-quote-flow-actions {
  display: none;
}

@media (max-width: 720px), (max-width: 960px) and (max-height: 520px) {
  body:not(.quote-page) .mobile-menu .btn,
  body:not(.quote-page) .mobile-menu .wa-pill {
    display: none !important;
  }

  body:has(.menu-toggle[aria-expanded="true"]) .mobile-contact-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body:not(.quote-page) .section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  body:not(.quote-page) .cta-band {
    display: none !important;
  }

  /* Home: one page-level discovery link plus the persistent conversion dock. */
  .hero#home .hero-actions .btn:nth-child(1),
  .hero#home .hero-actions .btn:nth-child(2) {
    display: none !important;
  }

  .hero#home .hero-actions {
    display: block;
  }

  .hero#home .hero-actions .btn:last-child {
    width: 100%;
  }

  #main-content > .anaheim-business,
  #main-content > .home-fleet-film,
  #main-content > .experience,
  #main-content > .about {
    display: none !important;
  }

  #services .service-grid .service-card:nth-child(n + 4) {
    display: none !important;
  }

  #services .service-card {
    min-height: 0 !important;
    padding: 24px !important;
  }

  #services .service-card svg {
    margin: 22px 0 18px !important;
  }

  #services .mobile-services-link {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #fleet .fleet-gallery-grid,
  #fleet .fleet-grid .fleet-card:nth-child(2),
  #fleet .fleet-grid .fleet-card:nth-child(5) {
    display: none !important;
  }

  #fleet .mobile-fleet-link {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Contact: remove the oversized image stage and surface real contact choices. */
  body.contact-page .page-hero {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    background: #080b0d !important;
  }

  body.contact-page .page-hero > picture,
  body.contact-page .page-hero::before,
  body.contact-page .page-hero::after,
  body.contact-page .page-hero .hero-actions,
  body.contact-page .trust-strip + .section.section-white {
    display: none !important;
  }

  body.contact-page .page-hero .hero-inner {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: min(100% - 32px, var(--max)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 38px 0 42px !important;
    transform: none !important;
  }

  body.contact-page .page-hero h1 {
    font-size: clamp(2.2rem, 10vw, 2.65rem) !important;
  }

  body.contact-page .page-hero .hero-lede {
    margin-bottom: 0 !important;
    font-size: .94rem !important;
  }

  body.contact-page #process,
  body.fleet-page #process,
  body.services-page #process,
  body.services-page .trust-strip + .section.section-white,
  body.services-page [data-seo-block="priority-lax-routes"] {
    display: none !important;
  }

  /* Fleet: keep the useful capacity cards; remove the repeated gallery/details. */
  body.fleet-page .fleet-gallery-section,
  body.fleet-page .fleet-gallery-section + .section {
    display: none !important;
  }

  /* Family campaign: routes, proof, seats and FAQs remain; repeated hero/fleet
     and six-item marketing explanation are omitted on phones. */
  body.family-campaign-page .page-hero.family-deferred,
  body.family-campaign-page .embedded-fleet-showcase.family-deferred,
  body.family-campaign-page .family-deferred.section-white {
    display: none !important;
  }

  body.family-campaign-page .family-photo-grid .family-proof-photo:nth-child(2),
  body.family-campaign-page .family-photo-grid .family-proof-photo:nth-child(4) {
    display: none !important;
  }

  body.family-campaign-page .special-amenities,
  body.family-campaign-page .route-browser-note {
    font-size: 12px;
    line-height: 1.45;
  }

  /* LAX specials: a readable one-column shortlist and fully visible filters. */
  body.lax-specials-page .lax-gmc-hero,
  body.lax-specials-page .embedded-fleet-showcase,
  body.lax-specials-page .lax-luggage-feature {
    display: none !important;
  }

  body.lax-specials-page .route-filter-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px !important;
    overflow: visible !important;
  }

  body.lax-specials-page .route-filter-group button {
    width: 100%;
    min-height: 46px;
    padding: 0 5px !important;
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  body.lax-specials-page .route-filter-group button:last-child {
    grid-column: span 2;
  }

  body.lax-specials-page .special-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.lax-specials-page .special-card {
    min-height: 0 !important;
    padding: 14px !important;
    grid-template-rows: auto !important;
  }

  body.lax-specials-page .special-card h3 {
    display: block !important;
    margin: 7px 0 5px !important;
    overflow: visible !important;
    font-size: 1.08rem !important;
  }

  body.lax-specials-page .special-card p,
  body.lax-specials-page .special-card .route-number,
  body.lax-specials-page .special-fare span {
    font-size: .72rem !important;
    line-height: 1.45 !important;
  }

  body.lax-specials-page .special-card .route-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto !important;
    gap: 7px !important;
    margin-top: 10px !important;
  }

  body.lax-specials-page .special-card .btn {
    min-height: 46px !important;
    padding: 8px 6px !important;
    font-size: .6rem !important;
  }

  body.lax-specials-page [data-seo-block="lax-specials-steps"],
  body.lax-specials-page .vehicle-facts > :nth-child(n + 5) {
    display: none !important;
  }

  /* Route pages: replace the large empty image stage with a natural photo
     panel followed by compact copy. Images keep their original proportions. */
  body.seo-route-page .route-breadcrumb {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  body.seo-route-page .seo-route-hero {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column;
    background: #080b0d !important;
  }

  body.seo-route-page .seo-route-hero > picture {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 210px !important;
    order: 1;
    background: #080b0d;
  }

  body.seo-route-page .seo-route-hero > picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  body.seo-route-page .seo-route-hero::before,
  body.seo-route-page .seo-route-hero::after,
  body.seo-route-page .seo-route-hero > picture::after {
    display: none !important;
  }

  body.seo-route-page .seo-route-hero .hero-inner {
    position: relative !important;
    inset: auto !important;
    width: min(100% - 32px, var(--max)) !important;
    max-width: none !important;
    padding: 28px 0 36px !important;
    order: 2;
  }

  body.seo-route-page .seo-route-hero :is(.eyebrow, h1, .hero-lede) {
    text-shadow: none !important;
  }

  body.seo-route-page .seo-route-hero h1 {
    font-size: clamp(2.15rem, 10vw, 2.7rem) !important;
  }

  body.seo-route-page .booking-card .btn {
    display: none !important;
  }

  /* Fixed-price campaign quotes do not need a second mileage/time estimate. */
  html.has-family-route body.quote-page #quote .route-estimate {
    display: none !important;
  }

  /* Generic quote: three short mobile stages without changing data or pricing. */
  body.mobile-quote-flow .mobile-quote-progress {
    position: sticky;
    z-index: 12;
    top: 72px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 0 -2px 14px;
    padding: 6px;
    background: rgba(245, 241, 233, .98);
    border: 1px solid #d5cec3;
    box-shadow: 0 8px 20px rgba(11, 13, 15, .08);
  }

  body.mobile-quote-flow .mobile-quote-progress button {
    min-height: 48px;
    padding: 6px 4px;
    color: #6d675f;
    background: transparent;
    border: 1px solid transparent;
    font: 800 12px/1.25 Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body.mobile-quote-flow .mobile-quote-progress button[aria-current="step"] {
    color: #0b0d0f;
    background: #e0b565;
    border-color: #c89b4d;
  }

  body.mobile-quote-flow .mobile-quote-progress button:disabled {
    opacity: .45;
  }

  body.mobile-quote-flow .mobile-quote-flow-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 4px;
  }

  body.mobile-quote-flow .mobile-quote-flow-actions button {
    min-height: 48px;
    padding: 8px;
    border: 1px solid #b99a60;
    font: 800 12px/1 Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  body.mobile-quote-flow .mobile-quote-back {
    color: #5c554c;
    background: transparent;
  }

  body.mobile-quote-flow .mobile-quote-next {
    color: #0b0d0f;
    background: #e0b565;
  }

  body.mobile-quote-flow[data-mobile-quote-step="1"] .trip-grid > :is(.route-estimate, .hourly-field, .fare-estimate),
  body.mobile-quote-flow[data-mobile-quote-step="2"] .trip-grid > :not(.route-estimate):not(.hourly-field):not(.fare-estimate),
  body.mobile-quote-flow[data-mobile-quote-step="3"] .trip-grid {
    display: none !important;
  }

  body.mobile-quote-flow:not([data-mobile-quote-step="3"]) .quote-form > :is(.form-rule, .contact-heading, .contact-grid, .consent, .consent-error, .booking-trust, .submit-btn, .form-disclaimer) {
    display: none !important;
  }

  body.mobile-quote-flow[data-mobile-quote-step="1"] .mobile-quote-back,
  body.mobile-quote-flow[data-mobile-quote-step="3"] .mobile-quote-next {
    display: none;
  }

  body.mobile-quote-flow[data-mobile-quote-step="1"] .mobile-quote-flow-actions,
  body.mobile-quote-flow[data-mobile-quote-step="3"] .mobile-quote-flow-actions {
    grid-template-columns: 1fr;
  }

  body.mobile-quote-flow[data-mobile-quote-step="3"] .mobile-quote-back {
    width: auto;
    min-height: 44px;
    justify-self: start;
    padding: 0 10px;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  body.mobile-quote-flow .mobile-quote-next[aria-busy="true"] {
    color: #4f4637;
    background: #d6c7a7;
    cursor: wait;
  }

  body.quote-page #quote .field > span,
  body.quote-page #quote .mobile-quote-progress button,
  body.quote-page #quote .consent,
  body.quote-page #quote .form-disclaimer,
  body.quote-page #quote .submit-btn {
    font-size: 12px !important;
  }

  body.quote-page #quote .booking-trust.booking-trust--compact strong,
  body.quote-page #quote .booking-trust.booking-trust--compact > span {
    color: #4f4a43;
    font-size: 12px !important;
    line-height: 1.4;
  }

  body.quote-page #quote .booking-trust.booking-trust--compact strong {
    color: #7b5725;
  }

  .privacy-settings-link {
    display: inline-flex !important;
    min-height: 44px;
    align-items: center;
    padding: 0 2px !important;
  }

  body:not(.quote-page) :is(.info-card a, .related-route a, .text-link) {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

/* Mobile quote legibility, staging and touch safety — 2026-09-14 v25. */
@media (max-width: 720px), (max-width: 960px) and (max-height: 520px) {
  body.quote-page #quote .quote-intro {
    display: none !important;
  }

  body.quote-page #quote .mobile-quote-reset {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    margin: -4px 0 10px auto;
    padding: 0 8px;
    color: #6f542a;
    background: transparent;
    border: 0;
    font: 800 12px/1.25 Arial, sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  body.quote-page #quote :is(
    .error,
    .vehicle-inline-help,
    .maps-address-hint,
    .route-stops-head small,
    .route-stops-help,
    .route-estimate-head span,
    .route-estimate-head p,
    .route-estimate-totals small,
    .route-estimate-legs div,
    .fare-estimate-head > div > span,
    .fare-badge,
    .fare-status,
    .fare-breakdown li,
    .meet-greet-option,
    .meet-greet-selector p,
    .gratuity-toggle-status,
    .gratuity-heading strong,
    .gratuity-heading > span,
    .gratuity-option > span,
    .gratuity-option small,
    .custom-gratuity,
    .gratuity-summary,
    .campaign-route-summary > span,
    .campaign-route-summary p,
    .campaign-vehicle-summary span,
    .optional-trip-details summary span
  ) {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  body.quote-page #quote :is(
    .route-calculate,
    .route-stops-head,
    .stop-drag,
    .stop-action,
    .add-stop-btn
  ) {
    min-height: 44px !important;
  }

  body.quote-page #quote :is(.stop-drag, .stop-action) {
    min-width: 44px !important;
    width: 44px !important;
  }

  html.has-family-route:not(.campaign-route-priced) body.quote-page #quote .quote-form > :is(
    .form-rule,
    .contact-heading,
    .contact-grid,
    .consent,
    .consent-error,
    .booking-trust,
    .submit-btn,
    .form-disclaimer
  ) {
    display: none !important;
  }

  html.has-family-route:not(.campaign-route-priced) body.quote-page #quote .quote-form::after {
    display: block;
    margin-top: 14px;
    padding: 12px;
    color: #5b5144;
    background: #f0e8da;
    border-left: 3px solid #c79b52;
    content: "Select the exact pickup or drop-off address to see the fare, then your contact and payment fields will appear.";
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (max-width: 960px) and (max-height: 520px) {
  body:is(.quote-page, .package-page) .mobile-contact-actions {
    display: none !important;
  }
}