.taxi-hero {
  position: relative;
  min-height: clamp(520px, 42vw, 590px);
  display: grid;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(20, 28, 36, .78) 0%, rgba(20, 28, 36, .48) 44%, rgba(20, 28, 36, .08) 76%, rgba(20, 28, 36, 0) 100%),
    url('../images/taxi-mathura-vrindavan-hero.png') center 54% / cover no-repeat;
}

.taxi-hero .wrap { padding: 96px 0 78px; }
.taxi-hero .eyebrow { color: #f5cf8d; margin-bottom: 14px; }
.taxi-hero h1 { max-width: 680px; margin: 0 0 18px; font-size: clamp(2.55rem, 4.25vw, 4.35rem); line-height: 1.08; letter-spacing: -.02em; }
.taxi-hero p { max-width: 600px; margin: 0; color: #fff7ea; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.7; }
.taxi-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.taxi-hero-actions .btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 20px; }
.taxi-hero .btn-outline { border-color: rgba(255, 255, 255, .75); color: #fff; background: rgba(255, 255, 255, .08); }

.taxi-page-section { padding: clamp(68px, 8vw, 104px) 0; }
.taxi-page-section--soft { background: #f2e9dc; }
.taxi-section-heading { max-width: 710px; margin-bottom: 32px; }
.taxi-section-heading h2 { margin-top: 10px; font-size: clamp(2.2rem, 4vw, 3.55rem); }
.taxi-section-heading p { margin: 14px 0 0; color: var(--muted); }

.taxi-vehicle-grid, .taxi-service-grid, .taxi-why-grid { display: grid; gap: 22px; }
.taxi-vehicle-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.taxi-vehicle-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 8px 22px rgba(71, 43, 18, .07); }
.taxi-vehicle-card__image { height: 202px; background: #b79b7b; }
.taxi-vehicle-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.taxi-vehicle-card__body { display: flex; flex: 1; flex-direction: column; padding: 21px; }
.taxi-vehicle-card h3 { font-size: 1.55rem; }
.taxi-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #6d5037; font-size: .78rem; font-weight: 800; }
.taxi-vehicle-card p { margin: 0 0 20px; color: var(--muted); font-size: .91rem; }
.taxi-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; }
.taxi-card-actions .btn { min-height: 42px; padding: 10px 8px; font-size: .78rem; }

.taxi-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.taxi-service-card, .taxi-why-card { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); padding: 22px; }
.taxi-service-card { display: flex; min-height: 246px; flex-direction: column; border-color: #e6d6c2; box-shadow: 0 7px 18px rgba(71, 43, 18, .055); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.taxi-service-card:hover { transform: translateY(-4px); border-color: #d9b780; box-shadow: 0 16px 29px rgba(71, 43, 18, .12); }
.taxi-service-card span, .taxi-why-card span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #fff0da; color: #85501f; font-size: 1.38rem; font-weight: 800; line-height: 1; }
.taxi-service-card h3, .taxi-why-card h3 { margin-top: 17px; font-size: 1.3rem; line-height: 1.22; }
.taxi-service-card p, .taxi-why-card p { margin: 11px 0 0; color: #685d52; font-size: .9rem; line-height: 1.65; }
.taxi-service-card.is-featured { border-color: #dfbf8e; background: linear-gradient(180deg, #fffdf9, #fff7ec); box-shadow: 0 9px 22px rgba(126, 76, 29, .08); }
.taxi-service-card.is-featured span { background: #f8e3bf; color: #783c15; }
.taxi-service-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; padding: 24px 28px; border: 1px solid #e4cda9; border-radius: 18px; background: #fffaf3; }
.taxi-service-cta h3 { font-size: 1.36rem; }
.taxi-service-cta p { max-width: 610px; margin: 6px 0 0; color: var(--muted); font-size: .92rem; }
.taxi-service-cta__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }
.taxi-service-cta__actions .btn { min-height: 44px; padding: 10px 16px; }

.taxi-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.taxi-why-card { background: #fffaf3; }
.taxi-outstation-section { background: #fffaf3; }
.taxi-outstation-layout { max-width: 900px; }
.taxi-outstation-layout h2 { margin: 10px 0 14px; font-size: clamp(2.2rem, 4vw, 3.45rem); }
.taxi-outstation-layout p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.7; }
.taxi-route-chips, .taxi-choice-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.taxi-route-chips span, .taxi-choice-list span { border: 1px solid #e3c89f; border-radius: 999px; background: #fffdf9; color: #6b4425; padding: 9px 13px; font-size: .78rem; font-weight: 800; line-height: 1.35; }
.taxi-outstation-note, .taxi-choice-note { margin-top: 16px !important; color: #7a604a !important; font-size: .86rem; }
.taxi-outstation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.taxi-outstation-actions .btn { min-height: 45px; padding: 11px 18px; }
.taxi-vehicle-choice { padding-top: 68px; padding-bottom: 70px; }
.taxi-choice-list { margin-top: 4px; }
.taxi-choice-list span { min-width: 142px; padding: 13px 17px; background: #fffaf3; text-align: center; }
.taxi-booking-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.taxi-booking-step { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); padding: 26px; box-shadow: 0 7px 18px rgba(71, 43, 18, .05); }
.taxi-booking-step__number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #9b531d; color: #fff; font: 700 1rem Georgia, serif; }
.taxi-booking-step h3 { margin-top: 18px; font-size: 1.48rem; }
.taxi-booking-step p { margin: 10px 0 0; color: var(--muted); }
.taxi-enquiry-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.taxi-enquiry-copy { padding-top: 15px; }
.taxi-enquiry-copy h2 { margin: 10px 0 16px; font-size: clamp(2.15rem, 4vw, 3.45rem); }
.taxi-enquiry-copy p { max-width: 530px; color: var(--muted); }
.taxi-enquiry-form { padding: 30px; border: 1px solid #e3c79f; border-radius: 18px; background: var(--paper); box-shadow: 0 14px 34px rgba(71, 43, 18, .1); }
.taxi-enquiry-form h3 { margin-bottom: 18px; font-size: 1.7rem; }
.taxi-enquiry-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.taxi-enquiry-form .input--wide { grid-column: 1 / -1; }
.taxi-enquiry-form .input.is-hidden { display: none; }
.taxi-enquiry-form textarea { width: 100%; min-height: 98px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fff; font: inherit; font-size: .85rem; }
.taxi-enquiry-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.taxi-enquiry-actions .btn { min-height: 46px; padding: 11px 18px; }
.taxi-enquiry-form .form-result { margin: 18px 0 0; padding: 13px 15px; border: 1px solid #e9d1a9; border-radius: 10px; background: #fff5e5; color: #70451f; font-size: .89rem; line-height: 1.55; }

@media (max-width: 1100px) {
  .taxi-hero { min-height: 545px; background-position: 61% center; }
  .taxi-hero .wrap { padding: 88px 0 76px; }
  .taxi-hero h1 { max-width: 620px; font-size: clamp(2.55rem, 5.4vw, 3.85rem); }
  .taxi-vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taxi-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taxi-booking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .taxi-hero { min-height: 525px; background-position: 63% center; }
  .taxi-hero .wrap { padding: 76px 0 70px; }
  .taxi-service-grid, .taxi-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taxi-booking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taxi-enquiry-layout { grid-template-columns: 1fr; }
  .taxi-service-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 540px) {
  .taxi-hero { min-height: 520px; background-position: 65% center; }
  .taxi-hero .wrap { padding: 70px 0 56px; }
  .taxi-hero .eyebrow { margin-bottom: 12px; }
  .taxi-hero h1 { max-width: 340px; margin-bottom: 15px; font-size: clamp(2.15rem, 10vw, 2.8rem); line-height: 1.1; }
  .taxi-hero p { max-width: 320px; font-size: .98rem; line-height: 1.6; }
  .taxi-hero-actions { gap: 10px; margin-top: 24px; }
  .taxi-hero-actions .btn { width: 100%; min-height: 46px; }
  .taxi-page-section { padding: 64px 0; }
  .taxi-vehicle-grid, .taxi-service-grid, .taxi-why-grid, .taxi-booking-grid { grid-template-columns: 1fr; gap: 16px; }
  .taxi-service-card { min-height: 0; padding: 22px; }
  .taxi-service-cta { margin-top: 26px; padding: 22px; }
  .taxi-service-cta__actions { width: 100%; }
  .taxi-service-cta__actions .btn { flex: 1 1 160px; }
  .taxi-outstation-actions .btn { flex: 1 1 170px; }
  .taxi-vehicle-card__image { height: 220px; }
  .taxi-enquiry-form { padding: 20px; }
  .taxi-enquiry-form .form-grid { grid-template-columns: 1fr; }
  .taxi-enquiry-form .input--wide { grid-column: auto; }
  .taxi-enquiry-actions .btn { flex: 1 1 100%; }
}
