body { font-family: "Inter", system-ui, sans-serif; }

.hero-bg {
  background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .82)), url("https://picsum.photos/id/1015/2000/1200") center / cover no-repeat;
}

.service-card { transition: transform .2s ease, box-shadow .2s ease; }
.service-card--featured { box-shadow: 7px 7px 0 #f97316; }
.service-card--featured:hover { transform: translate(-4px, -4px); box-shadow: 11px 11px 0 #f97316; }

.nav-link { position: relative; }
.nav-link::after { content: ""; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background: #f97316; transition: width .3s; }
.nav-link:hover::after { width: 100%; }

.form-input { width: 100%; border: 1px solid #52525b; border-radius: 1rem; background: #18181b; padding: 1rem 1.25rem; outline: none; }
.form-input:focus { border-color: #f97316; }

.nav-link-active::after { width: 100%; }



.service-card--featured { cursor: pointer; width: 100%; }
.rush-dialog::backdrop { background: rgb(0 0 0 / .65); }
.choice-card { display: flex; gap: .75rem; align-items: flex-start; border: 2px solid #d4d4d8; border-radius: 1rem; padding: 1rem; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.choice-card:has(input:checked) { border-color: #f97316; background: #fff7ed; }
.choice-card input { margin-top: .2rem; accent-color: #ea580c; }
.choice-card strong, .choice-card small { display: block; }
.choice-card small { margin-top: .2rem; color: #52525b; font-size: .8rem; line-height: 1.25rem; }

.route-input { width: 100%; border: 2px solid #18181b; border-radius: 1rem; padding: .9rem 1rem; outline: none; }
.route-input:focus { border-color: #f97316; }

.choice-card em { float: right; margin-left: .5rem; color: #c2410c; font-style: normal; }


.zone-card { position: relative; min-height: 0; }
.zone-card > input { position: absolute; opacity: 0; }
.zone-card-content { display: block; width: 100%; }
.zone-icon { color: #18181b; font-size: 1rem; }
.zone-label { display: block; margin-top: .45rem; color: #18181b !important; font-size: .78rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.zone-miles { display: block; margin-top: .1rem; color: #18181b; font-size: 1.7rem; line-height: 1.05; }
.zone-price { display: block; margin-top: .15rem; color: #18181b; font-size: 1.9rem; line-height: 1; }
.zone-note { display: block; margin-top: .5rem; color: #52525b !important; font-size: .75rem !important; line-height: 1rem !important; }

/* Keeps the page navigation centered even when a page has no phone link. */
.site-nav-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}
.site-nav-menu {
  grid-column: 2;
  justify-content: center;
  white-space: nowrap;
}
.site-nav-call {
  grid-column: 3;
}
@media (max-width: 640px) {
  .site-nav-layout {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .site-nav-call {
    grid-column: 2;
  }
  .site-nav-menu {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    width: 100%;
    white-space: normal;
  }
}

/* Soft city-inspired backdrop keeps the delivery choices clear and easy to scan. */
.services-grid-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 15%, rgb(255 255 255 / .95) 0 11%, transparent 35%),
    radial-gradient(circle at 86% 82%, rgb(191 219 254 / .7) 0 4%, transparent 30%),
    linear-gradient(135deg, #dbeafe 0%, #f8fafc 46%, #dbeafe 100%);
}
.services-grid-section::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 45%;
  opacity: .18;
  background: repeating-linear-gradient(90deg, #64748b 0 20px, transparent 20px 46px), linear-gradient(to top, #94a3b8, transparent);
  clip-path: polygon(0 58%, 5% 39%, 10% 54%, 16% 24%, 22% 49%, 29% 12%, 36% 42%, 43% 27%, 51% 53%, 58% 17%, 65% 45%, 73% 9%, 81% 48%, 88% 30%, 95% 55%, 100% 22%, 100% 100%, 0 100%);
}
.services-grid-section .service-card {
  background: rgb(255 255 255 / .94);
  backdrop-filter: blur(4px);
}

/* Larger familiar symbols and higher-contrast copy make service choices easier to scan. */
.service-emoji {
  display: block;
  margin-bottom: 1.25rem;
  font-size: 4rem;
  line-height: 1;
}
.service-card-description {
  color: #27272a;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.65;
}
.service-card-action {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.5rem;
  border-radius: .75rem;
  background: #ea580c;
  padding: .7rem 1rem;
  color: white;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 3px 0 #9a3412;
}
.service-card-action:hover {
  background: #c2410c;
  color: white;
}


/* Local Tucson landmark keeps the About page connected to the city. */
.about-backdrop {
  min-height: calc(100vh - 8rem);
  background:
    linear-gradient(180deg, rgba(9, 18, 29, 0.52) 0%, rgba(9, 18, 29, 0.70) 100%),
    url("assets/fox-theatre-tucson-backdrop.webp") center / cover no-repeat;
}
.about-content {
  color: white;
}
.about-content > h1 {
  color: white;
  text-shadow: 0 2px 10px rgb(0 0 0 / .45);
}
.about-content > p {
  color: #f4f4f5 !important;
  text-shadow: 0 2px 8px rgb(0 0 0 / .55);
}




/* Compact checkout-style layout for the Rush delivery form. */
.rush-compact .choice-card { padding: .85rem; border-radius: .8rem; }
.rush-compact .choice-card strong { line-height: 1.2; }
.rush-compact .route-input { border-width: 2px; padding: .72rem .8rem; border-radius: .75rem; }
.rush-contact-grid .route-input { min-width: 0; font-size: .9rem; }
.rush-item-grid .choice-card { min-height: 5.25rem; padding: .75rem; }
.rush-item-grid .choice-card small { color: #c2410c; font-weight: 800; }
@media (max-width: 460px) { .rush-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Calm, focused checkout flow for Rush delivery. */
.rush-step-indicator { display: flex; align-items: center; gap: .45rem; margin: 0 2.5rem 1.5rem 0; }
.rush-step-indicator span { display: flex; align-items: center; gap: .35rem; color: #a1a1aa; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.rush-step-indicator b { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border: 1px solid #d4d4d8; border-radius: 999px; font-size: .7rem; }
.rush-step-indicator i { flex: 1; height: 1px; background: #e4e4e7; }
.rush-step-indicator .is-active, .rush-step-indicator .is-done { color: #ea580c; }
.rush-step-indicator .is-active b, .rush-step-indicator .is-done b { border-color: #ea580c; background: #fff7ed; }
.rush-review-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #e4e4e7; color: #52525b; }
.rush-review-row:last-child { border-bottom: 0; }
.rush-review-row strong { max-width: 68%; color: #18181b; text-align: right; }

/* Compact details screen: mirrors a clean checkout instead of a long questionnaire. */
.rush-compact { font-size: .9rem; }
.rush-compact fieldset > legend { margin-bottom: .55rem; font-size: .9rem; }
.rush-compact .choice-card { gap: .55rem; min-height: 0; border-width: 1px; border-radius: .7rem; padding: .72rem .78rem; }
.rush-compact .choice-card:has(input:checked) { border-width: 2px; }
.rush-compact .choice-card input { margin-top: .1rem; }
.rush-compact .choice-card strong { font-size: .86rem; }
.rush-compact .choice-card small { margin-top: .16rem; font-size: .74rem; line-height: 1.05rem; }
.rush-compact .route-input { border-width: 1px; border-color: #d1d5db; border-radius: .55rem; padding: .62rem .72rem; font-size: .88rem; }
.rush-compact textarea.route-input { min-height: 2.8rem; }
.rush-compact #rush-live-estimate { border: 0; }
.rush-compact #rush-live-total { color: #111827; font-size: 1.45rem; }
.rush-compact #rush-live-breakdown { display: none; }
.rush-compact #rush-live-estimate p { margin-top: .25rem; }

/* Match the compact system type and calmer hierarchy of the approved form example. */
.rush-dialog {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.rush-dialog [data-rush-step="1"] > h2 {
  letter-spacing: -.02em;
}
.rush-compact label > span,
.rush-compact fieldset > legend {
  font-weight: 600;
}

/* Shared compact checkout styling for every non-Rush request form. */
#standard-form, #interoffice-form, #routes-form, #multistop-form {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .9rem;
}
#standard-form fieldset > legend, #interoffice-form fieldset > legend, #routes-form fieldset > legend, #multistop-form fieldset > legend {
  margin-bottom: .55rem;
  font-size: .9rem;
}
#standard-form .choice-card, #interoffice-form .choice-card, #routes-form .choice-card, #multistop-form .choice-card {
  gap: .55rem;
  min-height: 0;
  border-width: 1px;
  border-radius: .7rem;
  padding: .72rem .78rem;
}
#standard-form .choice-card:has(input:checked), #interoffice-form .choice-card:has(input:checked), #routes-form .choice-card:has(input:checked), #multistop-form .choice-card:has(input:checked) {
  border-width: 2px;
}
#standard-form .choice-card input, #interoffice-form .choice-card input, #routes-form .choice-card input, #multistop-form .choice-card input { margin-top: .1rem; }
#standard-form .choice-card strong, #interoffice-form .choice-card strong, #routes-form .choice-card strong, #multistop-form .choice-card strong { font-size: .86rem; }
#standard-form .choice-card small, #interoffice-form .choice-card small, #routes-form .choice-card small, #multistop-form .choice-card small { margin-top: .16rem; font-size: .74rem; line-height: 1.05rem; }
#standard-form .route-input, #interoffice-form .route-input, #routes-form .route-input, #multistop-form .route-input {
  border-width: 1px;
  border-color: #d1d5db;
  border-radius: .55rem;
  padding: .62rem .72rem;
  font-size: .88rem;
}
#standard-form textarea, #interoffice-form textarea, #routes-form textarea, #multistop-form textarea {
  border-radius: .55rem !important;
  font-size: .88rem;
}

/* Shared progress bar for every delivery request form. */
.form-step-indicator { display: flex; align-items: center; gap: .45rem; margin: 0 2.5rem 1.25rem 0; }
.form-step-indicator span { display: flex; align-items: center; gap: .35rem; color: #a1a1aa; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.form-step-indicator b { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border: 1px solid #d4d4d8; border-radius: 999px; font-size: .7rem; }
.form-step-indicator i { flex: 1; height: 1px; background: #e4e4e7; }
.form-step-indicator .is-active { color: #ea580c; }
.form-step-indicator .is-active b { border-color: #ea580c; background: #fff7ed; }

/* Price amounts only highlight when their option is selected. */
.choice-card em { color: #64748b; }
.choice-card:has(input:checked) em { color: #ea580c; }

/* Keep option choices calm; reserve bold type for form section headings. */
.choice-card strong { font-weight: 500; }
.choice-card em { font-weight: 500; }

/* Actual regular-weight form controls: only titles and section legends remain emphasized. */
#rush-form label > span { font-weight: 400; }
#rush-form fieldset > legend { font-weight: 500; }
#rush-form .choice-card strong, #rush-form .choice-card em { font-weight: 400; }
#rush-form .choice-card small { font-weight: 400; }
#standard-form label > span, #interoffice-form label > span, #routes-form label > span, #multistop-form label > span { font-weight: 400; }
#standard-form fieldset > legend, #interoffice-form fieldset > legend, #routes-form fieldset > legend, #multistop-form fieldset > legend { font-weight: 500; }
#standard-form .choice-card strong, #standard-form .choice-card em, #interoffice-form .choice-card strong, #interoffice-form .choice-card em, #routes-form .choice-card strong, #routes-form .choice-card em, #multistop-form .choice-card strong, #multistop-form .choice-card em { font-weight: 400; }