/* Release 1.3 canonical public presentation refinements.
 * Presentation only: no route, pricing, analytics, or booking semantics.
 */
:root {
  --rx-r13-measure: 68ch;
  --rx-r13-section: clamp(3rem, 6vw, 5rem);
  --rx-r13-card-radius: 16px;
  --rx-r13-card-shadow: 0 8px 28px rgb(16 42 67 / 10%);
}

.rx-marketing__header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 72px;
  gap: clamp(16px, 3vw, 40px);
}
.rx-marketing__brand { white-space: nowrap; }
.rx-marketing__nav { justify-content: flex-end; margin-left: 0; gap: 4px; }
.rx-marketing__nav .rx-nav-item { padding-inline: clamp(9px, 1.1vw, 16px); }

.rx-marketing__section,
.rx-marketing__faq { padding-block: var(--rx-r13-section); }
.rx-marketing__section-head { max-width: var(--rx-r13-measure); }
.rx-marketing__section-head h2 { max-width: 24ch; }
.rx-marketing__section-head p { max-width: var(--rx-r13-measure); }
.rx-marketing__page-header h1 { max-width: 22ch; text-wrap: balance; }

.rx-marketing__service-card,
.rx-marketing__media-card,
.rx-marketing__vehicle-card {
  border-radius: var(--rx-r13-card-radius);
  box-shadow: 0 1px 2px rgb(16 42 67 / 5%);
}
.rx-marketing__service-card:focus-within,
.rx-marketing__media-card:focus-within,
.rx-marketing__vehicle-card:focus-within { box-shadow: var(--rx-r13-card-shadow); }

.rx-marketing__vehicle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-marketing__vehicle-card { display: flex; min-width: 0; flex-direction: column; }
.rx-marketing__vehicle-card-figure { flex: none; aspect-ratio: 16 / 10; padding: 0; background: #102a43; }
.rx-marketing__vehicle-card-figure picture { display: block; width: 100%; height: 100%; }
.rx-marketing__vehicle-card-figure img { width: 100%; height: 100%; object-fit: cover; }
.rx-marketing__vehicle-card-body { display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 108px; }

.rx-marketing__faq { width: min(100%, 840px); }
.rx-marketing__faq-item { margin-bottom: 10px; padding: 0; }
.rx-marketing__faq-item summary { min-height: 56px; padding: 15px 18px; }
.rx-marketing__faq-item p { padding: 0 18px 18px; }

.rx-marketing__footer-conversion,
.rx-marketing__footer-inner { width: min(100%, 1200px); margin-inline: auto; }
.rx-marketing__footer-inner--expanded { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.rx-marketing__footer-links { gap: 2px; }
.rx-marketing__footer-inner a { min-height: 40px; }
.rx-marketing__newsletter form { max-width: 820px; }

.rx-packages-hero__layout { max-width: 1100px; margin-inline: auto; }
.rx-marketing__filters { gap: 10px; margin-bottom: 28px; }
.rx-marketing__filters .rx-btn { border-radius: 999px; padding-inline: 18px; }
[data-rx-filter-catalog] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
[data-rx-package-card] .rx-marketing__service-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
[data-rx-package-card] .rx-marketing__service-card > .rx-stack { flex: 1; padding: 20px; }
[data-rx-package-card] .rx-marketing__media { aspect-ratio: 3 / 2; }
[data-rx-package-card] .rx-marketing__card-head h3 { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }

.rx-marketing__page-header--airport-preview { padding-block: clamp(40px, 6vw, 72px); }
.rx-marketing__airport-booking { box-shadow: var(--rx-r13-card-shadow); }
.rx-marketing__pricing-strip + .rx-marketing__section { padding-top: clamp(36px, 5vw, 64px); }

@media (max-width: 1100px) {
  .rx-marketing__header-inner { display: flex; }
  .rx-marketing__nav-toggle { margin-left: auto; }
  [data-rx-filter-catalog], .rx-marketing__vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rx-marketing__header-inner { display: flex; min-height: 64px; }
  .rx-marketing__nav { gap: 2px; }
  .rx-marketing__section-head h2 { max-width: none; }
  .rx-marketing__footer-inner--expanded,
  [data-rx-filter-catalog],
  .rx-marketing__vehicle-grid { grid-template-columns: 1fr; }
  .rx-marketing__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px !important; scroll-snap-type: x proximity; }
  .rx-marketing__filters li { flex: 0 0 auto; scroll-snap-align: start; }
  .rx-marketing__filters .rx-btn { white-space: nowrap; }
}

/* Canonical normalization for the retained airport/outstation/editorial URL
 * families. These selectors are deliberately rooted at the shared bases;
 * they do not reinterpret booking inputs, metadata, or individual content.
 */
.rx-r13-legacy-body { min-width: 0; color: var(--rx-light-body); }
.rx-r13-legacy-body :where(article,.container,.container-fluid,.row,[class*="col-"]) { min-width: 0; }
.rx-r13-legacy-body :where(h1,h2,h3,h4) { color: var(--rx-light-heading); text-wrap: balance; }
.rx-r13-legacy-body :where(p,li) { overflow-wrap: anywhere; }
.rx-r13-legacy-body :where(img,picture,video,iframe) { max-width: 100%; }
.rx-r13-legacy-body img { height: auto; }
.rx-r13-legacy-body :where(table) { max-width: 100%; }
.rx-r13-legacy-body :where(.table-responsive,.rx-table-scroll) {
  max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.rx-r13-legacy-body--editorial :where(article,.blog-details-content,.post-details) {
  max-width: var(--rx-r13-measure); margin-inline: auto;
}
.rx-r13-legacy-body--editorial :where(p,li) { line-height: 1.7; }
.rx-r13-legacy-body--editorial :where(h2,h3) { margin-top: 1.75em; margin-bottom: .65em; }
.rx-r13-legacy-body--journey > :where(section,article,.container) { max-width: 1200px; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .rx-marketing__service-card,
  .rx-marketing__media-card,
  .rx-marketing__vehicle-card,
  .rx-marketing__faq-item summary::after { transition: none !important; }
  .rx-marketing :is(.rx-marketing__service-card,.rx-marketing__media-card,.rx-marketing__vehicle-card):hover { transform: none !important; }
}

/* ------------------------------------------------------------------------
 * Release 1.3 Lane 1 -- shared UI/UX finishing.
 * Presentation only, rooted at the shared public shell (body.rx-marketing)
 * so every family built on marketing_base.html inherits it once. No route,
 * metadata, schema, booking, pricing or analytics behavior is touched.
 * --------------------------------------------------------------------- */

/* 1. Light-surface token anchoring (dark-mode contrast root cause).
 * tokens.css defines aliases such as --rx-color-text-primary as
 * var(--rx-color-text) on :root, so under prefers-color-scheme: dark they
 * resolve to the DARK text colour there. .rx-marketing re-pins the base
 * tokens to the light surfaces the public sections actually paint, but an
 * alias resolved on :root never sees that override: trust-card titles
 * rendered #F5FAFF on #FFFFFF (1.05:1). Re-declaring the aliases here makes
 * them resolve against the shell's light values in every colour scheme. */
.rx-marketing {
  --rx-color-text-primary: var(--rx-color-text);
  --rx-color-text-secondary: #4B5A68;
  --rx-color-primary: var(--rx-color-text);
  --rx-color-secondary: #4B5A68;
  --rx-color-muted: var(--rx-color-text-muted);
  --rx-color-accent: #C9A227;
  --rx-color-background: var(--rx-color-surface);
  --rx-color-border-strong: #767F8C;
  --rx-color-cta-text: var(--rx-color-text);
  --rx-color-success-bg: #E6F9F0;
  --rx-color-info-bg: #E8F0FE;
  --rx-color-warning-bg: #FEF3E0;
  --rx-color-danger-bg: #FDEAEA;
  --rx-color-on-success-bg: #0A5C36;
  --rx-color-on-info-bg: #0B2E6B;
  --rx-color-on-warning-bg: #7A4E00;
  --rx-color-on-danger-bg: #7A1F1F;
  --rx-l1-ease: cubic-bezier(.2, .7, .2, 1);
  --rx-l1-fast: 160ms;
  --rx-l1-base: 220ms;
  --rx-l1-lift: 0 10px 28px rgb(16 42 67 / 12%);
}
.rx-marketing .rx-trust-card__body,
.rx-marketing .rx-trust-card__body p { color: var(--rx-light-body); }
.rx-marketing .rx-trust-card .rx-trust-card__title { color: var(--rx-light-heading); }
/* Bootstrap's #0D6EFD (4.26:1 on the canvas) leaked into the editorial
 * related-links list; use the shell's contrast-tested light link colour. */
.rx-marketing .rx-journey-related__link,
.rx-marketing .rx-journey-related__link span { color: var(--rx-light-link); }

/* 2. Heading wrapping and alignment. Balanced wrapping removes the
 * single-word last lines measured on the footer conversion heading (every
 * page at 390px) and on centred page headers; long unbroken tokens wrap
 * instead of widening the viewport. Body copy avoids orphans too. */
.rx-marketing :where(h1, h2, h3) { text-wrap: balance; overflow-wrap: break-word; }
.rx-marketing :where(p, li, summary) { text-wrap: pretty; }
@media (max-width: 767px) { .rx-marketing__footer-conversion h2 { max-width: 20ch; } }
/* public-polish.css scales centred page-header H1s to 64px inside a 19ch
 * measure, which broke keyword-length titles into three or four short
 * lines and started lines with their own separators ("-- Quick Pickups",
 * "| Bangalore Taxi"). A calmer ceiling and a slightly wider measure let
 * balanced wrapping keep separators with their phrase at every width. */
.rx-marketing .rx-marketing__page-header > h1 {
  max-width: 24ch;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  line-height: 1.1;
}

/* 3. Header, logo and navigation. */
.rx-marketing__header-inner { align-items: center; }
.rx-marketing__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.rx-marketing__header .rx-marketing__nav-toggle {
  display: none;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  line-height: 0;
}
/* components.css paints .rx-nav-item:hover with the LIGHT sunken surface
 * while the shell turns the text pale gold, so every desktop header link
 * (and the open "More" summary) became pale gold on light grey. */
.rx-marketing__header .rx-nav-item:not(.rx-nav-item--book):hover,
.rx-marketing__header .rx-marketing__more[open] > summary {
  background: rgb(255 255 255 / 8%);
  color: #F8D66D;
}
.rx-marketing__header .rx-marketing__more > summary { gap: 6px; border-radius: 10px; }
.rx-marketing__header .rx-marketing__more > summary::before {
  order: 2;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--rx-l1-fast) var(--rx-l1-ease);
}
.rx-marketing__header .rx-marketing__more[open] > summary::before { transform: translateY(1px) rotate(-135deg); }
.rx-marketing__more[open] .rx-marketing__more-menu { animation: rx-l1-pop var(--rx-l1-fast) var(--rx-l1-ease); }
/* :is() keeps this above components.css's .rx-nav-item:focus-visible, which
 * painted the light-surface dark-gold ring onto the navy header. */
.rx-marketing .rx-marketing__header :is(a, button, summary):focus-visible {
  outline: 3px solid var(--rx-focus-dark);
  outline-offset: 2px;
}
@media (max-width: 1100px) {
  .rx-marketing__header .rx-marketing__nav-toggle { display: inline-flex; }
  .rx-marketing__header .rx-marketing__nav { padding: 8px 16px 16px; }
  .rx-marketing__header .rx-marketing__nav > .rx-nav-item,
  .rx-marketing__header .rx-marketing__more > summary {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 8px;
    border-bottom: 1px solid rgb(255 255 255 / 18%);
    border-radius: 0;
  }
  .rx-marketing__header .rx-marketing__more > summary { justify-content: space-between; }
  .rx-marketing__header .rx-marketing__more-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: 4px 0 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
  }
  .rx-marketing__header .rx-nav-item--book {
    justify-content: center;
    margin-top: 12px;
    border-bottom: 0;
    border-radius: var(--rx-radius-pill, 999px);
  }
}

/* 4. Section rhythm: a FAQ that directly follows a plain content section
 * shares its surface, so do not stack two full section paddings. */
.rx-marketing__section:not([class*="--"]) + .rx-marketing__faq { padding-top: clamp(8px, 2vw, 24px); }
.rx-marketing__section-head { margin-bottom: clamp(20px, 3.5vw, 36px); }

/* 5. FAQ: one compact, light, keyboard-accessible accordion language for
 * the marketing (/faq, homepage, contact) and journey (route/airport/
 * service) families. Native <details>/<summary> keep keyboard and
 * assistive-technology behavior; open state is shape + border, not only
 * colour; answers remain in the DOM for crawlers and FAQPage parity. */
.rx-marketing .rx-marketing__faq > h2 { margin: 0 0 clamp(16px, 2.5vw, 24px); }
.rx-marketing .rx-marketing__faq-item,
.rx-marketing .rx-journey-faq__item {
  margin: 0 0 10px;
  padding: 0;
  border: 1px solid var(--rx-border);
  border-radius: 12px;
  background: var(--rx-surface);
  color: var(--rx-light-heading);
  box-shadow: 0 1px 2px rgb(16 42 67 / 4%);
  transition: border-color var(--rx-l1-fast) var(--rx-l1-ease), box-shadow var(--rx-l1-fast) var(--rx-l1-ease);
}
.rx-marketing .rx-journey-faq { gap: 10px; }
.rx-marketing .rx-journey-faq .rx-journey-faq__item { margin: 0; }
.rx-marketing .rx-marketing__faq-item summary,
.rx-marketing .rx-journey-faq__q {
  min-height: 52px;
  box-sizing: border-box;
  padding: 14px 18px;
  border-radius: 12px;
  color: var(--rx-light-heading);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
}
.rx-marketing .rx-marketing__faq-item summary:hover,
.rx-marketing .rx-journey-faq__q:hover { color: var(--rx-light-link); }
.rx-marketing .rx-marketing__faq-item[open] summary,
.rx-marketing .rx-journey-faq__item[open] .rx-journey-faq__q { color: var(--rx-light-heading); }
.rx-marketing .rx-marketing__faq-item:hover,
.rx-marketing .rx-journey-faq__item:hover { border-color: var(--rx-control-border); }
.rx-marketing .rx-marketing__faq-item[open],
.rx-marketing .rx-journey-faq__item[open] {
  border-color: var(--rx-gold);
  box-shadow: inset 3px 0 0 var(--rx-gold), 0 4px 16px rgb(16 42 67 / 7%);
}
.rx-marketing .rx-marketing__faq-item summary:focus-visible,
.rx-marketing .rx-journey-faq__q:focus-visible {
  outline: 3px solid var(--rx-light-link);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--rx-focus-dark);
}
.rx-marketing .rx-marketing__faq-item p,
.rx-marketing .rx-journey-faq__a {
  padding: 0 18px 16px;
  color: var(--rx-light-body);
  font-size: 15.5px;
  line-height: 1.6;
}
.rx-marketing .rx-marketing__faq-item p *,
.rx-marketing .rx-journey-faq__a * { color: inherit; }
.rx-marketing .rx-marketing__faq-item p a,
.rx-marketing .rx-journey-faq__a a { color: var(--rx-light-link); text-decoration: underline; text-underline-offset: 3px; }
.rx-marketing .rx-marketing__faq-item[open] p { margin-top: 0; }
.rx-marketing .rx-marketing__faq-item summary::after { color: var(--rx-muted); }
.rx-marketing .rx-marketing__faq-item[open] summary::after,
.rx-marketing .rx-journey-faq__item[open] .rx-journey-faq__chevron { color: var(--rx-gold-text); }
.rx-marketing .rx-journey-faq__item[open] > .rx-journey-faq__a { animation: rx-l1-reveal var(--rx-l1-base) var(--rx-l1-ease); }

/* 6. Footer and newsletter. */
.rx-marketing .rx-marketing__footer .rx-marketing__footer-inner h3 {
  margin: 0 0 12px;
  color: var(--rx-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.rx-marketing__footer-links a {
  display: inline-flex;
  align-items: center;
  transition: color var(--rx-l1-fast) var(--rx-l1-ease);
}
.rx-marketing__footer-conversion { align-items: center; }
.rx-marketing .rx-marketing__newsletter form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "copy copy" "input action" "consent consent" "status status";
  align-items: center;
  gap: 10px 12px;
  max-width: 760px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 16px;
  background: rgb(255 255 255 / 5%);
}
.rx-marketing__newsletter form > .rx-field__label {
  grid-area: label;
  margin: 0;
  color: var(--rx-white);
  font-size: 18px;
  font-weight: 700;
}
.rx-marketing__newsletter form > p:not([data-rx-newsletter-status]) { grid-area: copy; margin: 0 0 4px; color: #D7E0E6; }
.rx-marketing__newsletter form > .rx-input { grid-area: input; min-height: 48px; }
.rx-marketing__newsletter form > .rx-stack { grid-area: action; }
.rx-marketing__newsletter form > .rx-stack .rx-btn { min-height: 48px; }
.rx-marketing__newsletter form > .rx-marketing__consent {
  grid-area: consent;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #D7E0E6;
  font-size: 14px;
  line-height: 1.5;
}
.rx-marketing__newsletter .rx-marketing__consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--rx-gold);
}
.rx-marketing__newsletter form > [data-rx-newsletter-status] { grid-area: status; margin: 0; color: #F8D66D; }
.rx-marketing__newsletter form > [data-rx-newsletter-status]:empty { display: none; }
@media (max-width: 599px) {
  .rx-marketing .rx-marketing__footer-inner--expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .rx-marketing .rx-marketing__footer-inner--expanded > :nth-child(n + 3) { grid-column: 1 / -1; }
  .rx-marketing .rx-marketing__newsletter form {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "copy" "input" "consent" "action" "status";
  }
  .rx-marketing__newsletter form > .rx-stack .rx-btn { width: 100%; justify-content: center; }
}

/* 7. Restrained micro-interactions. Motion is opt-in: transforms only run
 * when the visitor has not asked for reduced motion and the device can
 * hover; the release-1-1 reduced-motion guard (and the block below) keeps
 * every state change instant and every reveal visible. */
.rx-marketing .rx-btn,
.rx-marketing .rx-nav-item--book {
  transition: background-color var(--rx-l1-fast) var(--rx-l1-ease),
              border-color var(--rx-l1-fast) var(--rx-l1-ease),
              color var(--rx-l1-fast) var(--rx-l1-ease),
              box-shadow var(--rx-l1-fast) var(--rx-l1-ease),
              transform var(--rx-l1-fast) var(--rx-l1-ease);
}
.rx-marketing :is(.rx-marketing__service-card, .rx-marketing__media-card, .rx-marketing__vehicle-card,
  .rx-marketing__destination-card, .rx-trust-card, .rx-journey-card) {
  transition: transform var(--rx-l1-base) var(--rx-l1-ease),
              box-shadow var(--rx-l1-base) var(--rx-l1-ease),
              border-color var(--rx-l1-base) var(--rx-l1-ease);
}
.rx-marketing__reveal { transition-duration: 420ms; transition-timing-function: var(--rx-l1-ease); }
@keyframes rx-l1-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rx-l1-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rx-marketing .rx-btn:hover,
  .rx-marketing .rx-nav-item--book:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(16 42 67 / 18%); }
  .rx-marketing .rx-btn:active,
  .rx-marketing .rx-nav-item--book:active { transform: none; box-shadow: none; }
  .rx-marketing :is(.rx-marketing__service-card, .rx-marketing__media-card, .rx-marketing__vehicle-card,
    .rx-marketing__destination-card, .rx-trust-card, .rx-journey-card):hover {
    transform: translateY(-3px);
    box-shadow: var(--rx-l1-lift);
  }
}

/* Keyboard focus inside page content: a two-tone indicator (dark-gold
 * outline inside a light-gold halo) so one tone always contrasts >= 3:1,
 * whether the control sits on a light section or a navy band. It also
 * restores a visible ring where Bootstrap's .form-control and legacy
 * pagination removed the outline. */
.rx-marketing main :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--rx-light-link);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--rx-focus-dark);
}
/* Keyboard focus on the navy footer uses the dark-surface ring. */
.rx-marketing .rx-marketing__footer :is(a, button, summary, input):focus-visible {
  outline: 3px solid var(--rx-focus-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rx-marketing .rx-btn,
  .rx-marketing .rx-nav-item--book,
  .rx-marketing .rx-marketing__faq-item,
  .rx-marketing .rx-journey-faq__item,
  .rx-marketing .rx-marketing__more > summary::before,
  .rx-marketing :is(.rx-marketing__service-card, .rx-marketing__media-card, .rx-marketing__vehicle-card,
    .rx-marketing__destination-card, .rx-trust-card, .rx-journey-card) { transition: none !important; }
  .rx-marketing :is(.rx-btn, .rx-nav-item--book, .rx-marketing__service-card, .rx-marketing__media-card,
    .rx-marketing__vehicle-card, .rx-marketing__destination-card, .rx-trust-card, .rx-journey-card):hover { transform: none !important; }
  .rx-marketing__more[open] .rx-marketing__more-menu,
  .rx-marketing .rx-journey-faq__item[open] > .rx-journey-faq__a { animation: none !important; }
  .rx-marketing__reveal { opacity: 1 !important; transform: none !important; }
}