/* ── Hero overrides (Persian/RTL optimised) ── */

/*
  IRANSansX is static-per-weight: font-weight has no effect.
  Bold weight requires font-family: font-bold explicitly.
  letter-spacing MUST be 0 on Persian — negative tracking fragments joined letterforms.
  line-height: 1.4 for headings, 1.8 for subtitle (Persian glyph height rule).
*/

/* Kill vendor gradient text — solid brand primary */
.landing-hero .hero-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  animation: none !important;
  color: #2f2b3d !important;
  font-family: font-bold, "tahoma", sans-serif !important;
  font-weight: normal !important;        /* weight via font-family, not font-weight */
  font-size: 2rem !important;            /* ~32px — Persian reads larger than Latin */
  line-height: 1.4 !important;           /* Persian heading rule: 1.3–1.6 */
  letter-spacing: 0 !important;          /* NEVER negative on Persian */
  text-wrap: balance;
  margin-bottom: 0.75rem !important;
  display: block !important;             /* allow text-wrap: balance to apply */
}

/* Subtitle */
.landing-hero .hero-sub-title {
  font-family: font-regular, "tahoma", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;           /* Persian body/subtitle rule: 1.7–2.0 */
  color: #6f6b7d !important;
  font-weight: normal !important;
  text-wrap: balance;
  margin-bottom: 1.25rem !important;
}

/* Hero — Pateh band: full-width art stage + search overlapping bottom */
.landing-hero,
.light-style .landing-hero,
.landing-hero1 {
  --hero-ink: #000000;
  --hero-muted: #5e5e5e;
  --hero-accent: #000000;
  --hero-sky: #f3f3f3;
  --hero-ground: #ffffff;
  padding-top: 0 !important;
  padding-bottom: 1.5rem !important;
  isolation: isolate;
  overflow: visible;
  background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%) !important;
  animation: none !important;
}

.light-style .landing-hero::after,
.landing-hero::after {
  background: transparent !important;
  background-color: transparent !important;
}

.landing-hero-stage {
  position: relative;
  min-height: clamp(17rem, 42vw, 26rem);
  padding-top: 4.25rem;
  padding-bottom: 6.5rem;
  background-color: var(--hero-sky);
  overflow: hidden;
}

/* Art fills the whole stage (not a floating postcard) */
.landing-hero-stage-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.landing-hero-stage-art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Car sits lower-right in the art — crop sky, keep sedan in the band */
  object-position: 72% 78%;
  transform: scale(1.28);
  transform-origin: 72% 78%;
}

/* Soft wash — original overlay (headline gone, keep first look) */
.landing-hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.12) 32%,
      rgba(248, 247, 250, 0.45) 72%,
      var(--hero-ground) 100%
    );
}

.landing-hero-stage-content {
  position: relative;
  z-index: 2;
}

.landing-hero-search-wrap {
  position: relative;
  z-index: 3;
  margin-top: -3.25rem;
  margin-bottom: 1.25rem;
}

.landing-hero-below {
  position: relative;
  z-index: 1;
}

.landing-hero .hero-text-box {
  max-width: 36rem !important;
  margin: 0 auto !important;
  padding-block: 0;
  min-height: 0;
}

.landing-hero .hero-title {
  color: #2f2b3d !important;
  text-shadow: none;
}

.landing-hero .hero-sub-title {
  color: var(--hero-muted) !important;
}

/* Legacy class aliases (safe if cached markup) */
.landing-hero-visual,
.landing-hero-visual-img {
  display: none;
}

/*
  Hero layout system
  ─────────────────────────────────────────────────────────
  Spacing scale (shared by form, stats, definition):
    --hz-sp-2…6, --hz-pad, --hz-gap, --hz-radius

  Widths:
    Laptop  (≥992): page shell ~90%;
                    search form only = previous compact ~45rem;
                    definition = full shell width
    Tablet  (768–991): full container
    Mobile  (<768): full screen edge-to-edge
*/
.landing-hero .hero-safezone {
  --hz-sp-2: 0.5rem;
  --hz-sp-3: 0.75rem;
  --hz-sp-4: 1rem;
  --hz-sp-5: 1.5rem;
  --hz-sp-6: 2rem;
  --hz-pad: 1.5rem;
  --hz-gap: 1.5rem;
  --hz-radius: 1rem;
  --hero-zone-radius: var(--hz-radius);

  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--hz-gap);
}

.landing-hero .hero-safezone--wide {
  margin-top: var(--hz-gap);
}

.landing-hero .hero-search-panel {
  width: 100%;
  margin: 0;
  padding: var(--hz-pad);
  background: var(--hero-ground, #fff);
  border: 1px solid rgba(67, 89, 113, 0.1);
  border-radius: var(--hz-radius);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

.landing-hero .hero-safezone--form {
  width: min(100%, 52rem);
}

/* Trust chips — quieter, same ink as rest of site */
.landing-hero .hero-trust-stats {
  margin-top: 1rem;
  gap: 0.75rem 1.5rem;
}

.landing-hero .hero-trust-stat {
  color: var(--hero-muted);
  font-size: 0.875rem;
}

.landing-hero .hero-trust-stat i {
  color: var(--hero-accent);
  opacity: 0.85;
}

.landing-hero .hero-trust-stat strong {
  color: var(--hero-ink);
  font-family: font-bold, "tahoma", sans-serif;
  font-weight: normal;
}

.landing-hero .hero-search-head {
  margin-bottom: var(--hz-sp-4);
  padding: 0;
  border: 0;
  background: transparent;
}

/* Laptop: wide shell; search form comfortably fits OD + swap + date + CTA */
@media (min-width: 992px) {
  .layout-navbar > .container,
  .landing-hero-stage-content,
  .landing-hero-search-wrap,
  .landing-hero-below {
    max-width: 90% !important;
    width: 90%;
  }
  .landing-hero .hero-safezone--form {
    max-width: 52rem;
  }
  .landing-hero .hero-safezone--wide {
    max-width: 100%;
  }
  .landing-hero .hero-text-box {
    max-width: 38rem !important;
  }
  .landing-hero .hero-safezone {
    --hz-pad: 1.75rem;
    --hz-gap: 1.5rem;
  }
  .landing-hero-stage {
    min-height: clamp(20rem, 36vw, 28rem);
    padding-bottom: 7rem;
  }
  .landing-hero-search-wrap {
    margin-top: -3.75rem;
  }
}

@media (min-width: 1400px) {
  .layout-navbar > .container,
  .landing-hero-stage-content,
  .landing-hero-search-wrap,
  .landing-hero-below {
    max-width: min(90%, 85rem) !important;
    width: min(90%, 85rem);
  }
}

/* Tablet: full container width for cards */
@media (min-width: 768px) and (max-width: 991.98px) {
  .landing-hero .hero-safezone {
    max-width: 100%;
    --hz-pad: 1.5rem;
    --hz-gap: 1.5rem;
  }
}

/* Mobile: full screen cards */
@media (max-width: 767.98px) {
  .landing-hero-stage {
    min-height: 16.5rem;
    padding-top: 3.75rem;
    padding-bottom: 5.25rem;
  }
  .landing-hero-stage-art-img {
    object-position: 78% 74%;
    transform: scale(1.42);
    transform-origin: 78% 74%;
  }
  .landing-hero-stage-content,
  .landing-hero-search-wrap,
  .landing-hero-below {
    padding-inline: 0;
    max-width: 100%;
    width: 100%;
  }
  .landing-hero-search-wrap {
    margin-top: -2.25rem;
    margin-bottom: 0.75rem;
  }
  .landing-hero .hero-text-box {
    padding-inline: var(--hz-sp-4, 1rem) !important;
    max-width: none !important;
  }
  .landing-hero .hero-safezone--form {
    width: 100%;
  }
  .landing-hero .hero-safezone {
    width: 100%;
    max-width: 100%;
    gap: 0;
    --hz-pad: 1.25rem;
    --hz-gap: 0;
    --hz-radius: 0;
  }
  .landing-hero .hero-search-panel {
    padding-inline: var(--hz-pad);
    padding-block: var(--hz-sp-5) var(--hz-sp-5);
  }
  .landing-hero .hero-search-head {
    margin-bottom: var(--hz-sp-4);
  }
  .landing-hero .hero-definition-media {
    border-radius: 0.75rem;
  }
  .landing-hero .hero-trust-stats {
    padding: var(--hz-sp-5) var(--hz-pad);
    margin-top: 0;
  }
}

/* Trust stats — same horizontal rhythm as cards */
.hero-trust-stats {
  display: flex;
  justify-content: center;
  gap: var(--hz-sp-5, 1.5rem) var(--hz-sp-6, 2rem);
  margin-top: 0;
  flex-wrap: wrap;
}
.hero-trust-stat {
  display: flex;
  align-items: center;
  gap: var(--hz-sp-2, 0.5rem);
  color: #000000;
  font-family: font-regular, "tahoma", sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
}
.hero-trust-stat strong {
  font-family: font-bold, "tahoma", sans-serif;
  font-weight: normal;
  color: var(--brand-ink, #000);
  font-size: 1rem;
}
.hero-trust-stat i {
  font-size: 1.1rem;
  color: var(--brand-ink, #000);
  flex-shrink: 0;
}

/* Desktop: slightly larger heading */
@media (min-width: 992px) {
  .landing-hero .hero-title {
    font-size: 2.5rem !important;        /* ~40px desktop */
  }
  .landing-hero {
    padding-top: 7.5rem !important;
    padding-bottom: 4rem !important;
  }
}

/* Mobile: comfortable smaller scale */
@media (max-width: 767.98px) {
  .landing-hero .hero-title {
    font-size: 1.625rem !important;      /* ~26px mobile */
  }
  .landing-hero .hero-sub-title {
    font-size: 0.9375rem !important;
  }
  .landing-hero {
    padding-top: 5.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .hero-trust-stats {
    gap: 1.25rem;
  }
}

/* ── End hero overrides ── */

/* ── Definition CTA — Persian-first (PRODUCT.md + type/spacing rules) ──
   Photo sits beside the bullets only; height matches the bullet list.
   Image on visual left, bullets on visual right (RTL start).
*/
.hero-definition-cta {
  --hd-sp-2: var(--hz-sp-2, 0.5rem);
  --hd-sp-3: var(--hz-sp-3, 0.75rem);
  --hd-sp-4: var(--hz-sp-4, 1rem);
  --hd-sp-5: var(--hz-sp-5, 1.5rem);
  --hd-sp-6: var(--hz-sp-6, 2rem);
  --hd-radius: var(--hz-radius, 1rem);
  --hd-ink: #000000;
  --hd-muted: #5e5e5e;
  --hd-accent: var(--brand-ink, #000);
  --hd-surface: #fff;
  --hd-photo-w: 14rem;
  --hd-photo-ratio: 16 / 9;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: 0;
}
.hero-definition-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  direction: rtl;
  text-align: right;
}
.hero-definition-title {
  font-family: font-bold, "tahoma", sans-serif;
  font-weight: normal;
  font-size: 1.25rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--hd-ink);
  margin: 0 0 var(--hd-sp-3);
  text-wrap: balance;
}
.hero-definition-body {
  font-family: font-regular, "tahoma", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--hd-muted);
  margin: 0 0 var(--hd-sp-4);
  text-wrap: pretty;
}
/* Photo + bullets row: photo size fixed (annotation); bullets stretch to match */
.hero-definition-mid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--hd-sp-4);
  margin: 0 0 var(--hd-sp-5);
  direction: ltr;
}
.hero-definition-media {
  flex: 0 0 var(--hd-photo-w);
  width: var(--hd-photo-w);
  aspect-ratio: var(--hd-photo-ratio);
  height: auto;
  position: relative;
  overflow: hidden;
  background: #ecebf0;
  border-radius: var(--hd-radius); /* same as card */
  align-self: flex-start;
}
.hero-definition-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Frame matches 16:9 source — cover fills without cropping the taxi */
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.hero-definition-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hd-sp-2);
  direction: rtl;
  text-align: right;
}
.hero-definition-aside {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  direction: rtl;
  text-align: right;
}
.hero-definition-bullets li {
  font-family: font-regular, "tahoma", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.8;
  letter-spacing: 0;
  color: var(--hd-ink);
  position: relative;
  padding-inline-start: 1.15rem;
}
.hero-definition-bullets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.65em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--hd-accent);
}
.hero-definition-btn {
  border-radius: 1.25rem;
  padding-inline: 1.75rem;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-definition-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.28);
}
.hero-definition-btn:focus-visible {
  outline: 2px solid var(--hd-accent);
  outline-offset: 3px;
}
@media (min-width: 768px) {
  .hero-definition-content {
    padding: 0;
  }
  .hero-definition-title {
    font-size: 1.375rem;
    line-height: 1.4;
  }
  .hero-definition-cta {
    --hd-photo-w: 15rem;
  }
  .hero-definition-mid {
    gap: var(--hd-sp-5);
  }
  .hero-definition-btn {
    align-self: flex-start;
    width: auto;
  }
}
@media (max-width: 767.98px) {
  .hero-definition-cta {
    margin-top: 0;
    /* Smaller landscape frame — full taxi visible (source is 16:9) */
    --hd-photo-w: min(100%, 17.5rem);
    --hd-photo-ratio: 16 / 9;
  }
  .hero-definition-content {
    padding: var(--hz-sp-5) var(--hz-pad);
  }
  .hero-definition-mid {
    flex-direction: column;
    align-items: center;
    gap: var(--hd-sp-4);
  }
  .hero-definition-media {
    flex: 0 0 auto;
    width: var(--hd-photo-w);
    max-width: 17.5rem;
    min-height: 0;
    aspect-ratio: var(--hd-photo-ratio);
    align-self: center;
  }
  .hero-definition-img {
    object-fit: contain;
    object-position: center;
    background: #ecebf0;
  }
  .hero-definition-aside {
    flex: 0 0 auto;
    width: 100%;
  }
  .hero-definition-btn {
    align-self: stretch;
    width: 100%;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-definition-btn,
  .hero-definition-btn:hover {
    transition: none;
    transform: none;
  }
}

.search-submit-btn {
  width: 100%;
  border-radius: 1.2rem;
}

/* Mobile: taller inputs (+~5%) + CTA button matches input size */
@media (max-width: 767.98px) {
  .landing-hero {
    /* Previous visual ~2.9rem → +5% */
    --hero-field-h: 3.045rem;
  }

  .landing-hero #tripForm .form-control.origin,
  .landing-hero #tripForm .form-control.destination,
  .landing-hero #tripForm .form-control.starttimeselector {
    min-height: var(--hero-field-h) !important;
    height: var(--hero-field-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: calc(var(--hero-field-h) - 2px);
    font-size: 1rem !important;
    border-radius: 1.25rem !important;
  }

  .landing-hero #tripForm .search-submit-btn,
  .landing-hero .hero-definition-btn {
    width: 100% !important;
    min-height: var(--hero-field-h) !important;
    height: var(--hero-field-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline: 1.25rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    border-radius: 1.25rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
  }
}

/* ── Popular routes — fits landing rhythm (features → routes → CTA) ── */
.landing-routes {
  --lr-ink: #000000;
  --lr-muted: #6f6b7d;
  --lr-accent: var(--brand-ink, #000);
  --lr-line: rgba(67, 89, 113, 0.1);
  --lr-surface: rgba(255, 255, 255, 0.72);
  position: relative;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.035) 0%, transparent 42%),
    transparent;
}

.landing-routes-inner {
  max-width: none;
}

.landing-routes-lead {
  max-width: 36rem;
  margin-inline: auto;
  line-height: 1.8;
  font-size: 0.95rem;
}

.landing-routes-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hp-card-gap, var(--space-3));
  direction: rtl;
}

@media (min-width: 992px) {
  .landing-routes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hp-card-gap, var(--space-3));
  }
}

.landing-route-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--hp-card-gap, var(--space-3));
  padding: var(--hp-card-pad, var(--space-5));
  border-radius: var(--section-radius, 1rem);
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  color: var(--lr-ink);
  text-decoration: none;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.08);
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms ease;
}

.landing-route-od {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  min-width: 0;
  font-family: font-bold, "tahoma", sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.landing-route-city {
  color: var(--lr-ink);
}

.landing-route-arrow {
  color: var(--lr-accent);
  opacity: 0.85;
  font-weight: normal;
  font-family: font-regular, "tahoma", sans-serif;
}

.landing-route-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
}

.landing-route-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.4rem;
  min-width: 0;
  line-height: 1.4;
}

.landing-route-price-label {
  font-size: 0.75rem;
  color: var(--lr-muted);
}

.landing-route-price-value {
  font-family: font-bold, "tahoma", sans-serif;
  font-size: 0.88rem;
  color: var(--lr-accent);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.landing-route-hint {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--lr-muted);
  opacity: 0.85;
  transition: color 180ms ease, opacity 180ms ease;
}

.landing-route-link:hover {
  border-color: rgba(0, 0, 0, 0.45);
  color: var(--lr-accent);
  box-shadow: 0 0.55rem 1.35rem rgba(67, 89, 113, 0.08);
  transform: translateY(-1px);
}

.landing-route-link:hover .landing-route-city {
  color: var(--lr-accent);
}

.landing-route-link:hover .landing-route-hint,
.landing-route-link:hover .landing-route-price-label {
  color: var(--lr-accent);
  opacity: 1;
}

.landing-route-link:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 2px;
}

.landing-routes-cities-wrap {
  margin-top: var(--space-6, 2rem);
  padding-top: var(--space-5, 1.5rem);
  border-top: 1px solid var(--lr-line);
  text-align: center;
}

.landing-routes-cities-label {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: 0.88rem;
  color: var(--lr-muted);
}

.landing-routes-cities {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  direction: rtl;
}

.landing-routes-cities a {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  border-radius: 0.65rem;
  border: 1px solid var(--lr-line);
  background: #fff;
  color: var(--lr-ink);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.5;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.landing-routes-cities a:hover {
  border-color: rgba(0, 0, 0, 0.45);
  color: var(--lr-accent);
  background: rgba(0, 0, 0, 0.05);
}

.landing-routes-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-6, 2rem);
}

@media (max-width: 767.98px) {
  .landing-routes-grid {
    grid-template-columns: 1fr;
    gap: var(--hp-card-gap, var(--space-3));
  }

  .landing-route-hint {
    display: none;
  }

  .landing-route-link {
    text-align: right;
  }

  .landing-route-meta {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-route-link,
  .landing-routes-cities a {
    transition: none;
  }

  .landing-route-link:hover {
    transform: none;
  }
}

#landingHowTo,
#landingRoutes,
#landingFeatures,
#landingFAQ,
#landingCTA,
#landingContact {
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --section-y: clamp(3rem, 2.5rem + 3vw, 5rem);
  --section-radius: 1rem;
  --hp-card-pad: 1.5rem;
  --hp-card-gap: 0.75rem;
  padding-block: var(--section-y) !important;
}

@media (max-width: 767.98px) {
  #landingHowTo,
  #landingRoutes,
  #landingFeatures,
  #landingFAQ,
  #landingCTA,
  #landingContact {
    --hp-card-pad: 1.25rem;
    --hp-card-gap: 0.75rem;
  }
}

.landing-section-intro {
  text-align: center;
  margin-bottom: var(--space-6, 2rem);
}

.landing-section-intro .badge {
  display: inline-block;
  margin-bottom: var(--space-3, 0.75rem);
}

.landing-section-intro h2 {
  margin-bottom: var(--space-2, 0.5rem);
}

.landing-section-lead {
  font-family: font-regular, "tahoma", sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
  max-width: 36rem;
  margin: 0 auto;
  font-size: 0.95rem;
}

.landing-cta-band {
  width: 100%;
  margin-inline: auto;
  border: none;
  border-radius: var(--section-radius, 1rem);
  padding: var(--hp-card-pad, var(--space-5));
  background: linear-gradient(180deg, #f3f3f3 0%, #fff 70%);
  color: #000;
  box-shadow: var(--box-shadow-lift, 0 10px 24px rgba(0, 0, 0, 0.1));
}
.landing-cta-img {
  max-height: 16rem;
}

.light-style .landing-cta,
#landingCTA.landing-cta {
  background-image: none !important;
}

.landing-howto,
.landing-classes,
.landing-contact,
#landingHowTo,
#landingClasses,
#landingContact {
  background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%) !important;
}

.landing-howto-lead,
.landing-classes-lead {
  font-family: font-regular, "tahoma", sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
  max-width: 36rem;
  margin-inline: auto;
}

.landing-howto-steps {
  --howto-dot: 2rem;
  --howto-track: #cfcfcf;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  gap: 0;
}

.landing-howto-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--howto-dot) / 2);
  inset-inline: 12.5%;
  height: 1px;
  background: var(--howto-track);
  pointer-events: none;
}

.landing-howto-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 var(--space-3, 0.75rem);
  position: relative;
  z-index: 1;
}

.landing-howto-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--howto-dot);
  height: var(--howto-dot);
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--brand-ink, #000);
  color: var(--brand-ink, #000);
  font-family: font-bold, "tahoma", sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  margin-bottom: var(--space-3, 0.75rem);
}

.landing-howto-title {
  font-family: font-bold, "tahoma", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: #000000;
  margin-bottom: var(--space-2, 0.5rem);
}

.landing-howto-emoji {
  display: inline-block;
  margin-inline-end: 0.35em;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.08em;
}

.landing-howto-text,
.landing-classes-text {
  font-family: font-regular, "tahoma", sans-serif;
  font-size: 0.9rem;
  line-height: 1.85;
  letter-spacing: 0;
  color: #5e5e5e;
  margin-bottom: 0;
}

.landing-howto-cta {
  text-align: center;
  margin-top: var(--space-6, 2rem);
}

@media (max-width: 767.98px) {
  .landing-howto-steps {
    flex-direction: column;
    gap: var(--space-5, 1.5rem);
  }

  .landing-howto-steps::before {
    content: none;
  }

  .landing-howto-step {
    display: grid;
    grid-template-columns: var(--howto-dot) minmax(0, 1fr);
    column-gap: var(--space-4, 1rem);
    align-items: start;
    text-align: start;
    padding: 0;
  }

  .landing-howto-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset-inline-start: calc((var(--howto-dot) - 1px) / 2);
    top: var(--howto-dot);
    bottom: calc(-1 * var(--space-5, 1.5rem));
    width: 1px;
    height: auto;
    background: var(--howto-track);
    pointer-events: none;
  }

  .landing-howto-num {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }

  .landing-howto-title,
  .landing-howto-text {
    grid-column: 2;
  }
}

.landing-classes-card {
  border-color: #e5e5e5 !important;
  border-radius: 1rem;
  text-align: start;
  box-shadow: var(--box-shadow-lift, 0 10px 24px rgba(0, 0, 0, 0.1)) !important;
}

.landing-faq {
  border-radius: 0;
}

.landing-faq .accordion-item {
  margin-bottom: var(--hp-card-gap, var(--space-3));
  border-radius: var(--section-radius, 1rem);
}
.landing-faq .accordion-button {
  font-family: font-bold, "tahoma", sans-serif;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.6;
  padding: var(--hp-card-pad, var(--space-5));
}
.landing-faq .accordion-body {
  font-family: font-regular, "tahoma", sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
  color: #6f6b7d;
  vertical-align: middle;
  padding: 0 var(--hp-card-pad, var(--space-5)) var(--hp-card-pad, var(--space-5));
}

.landing-faq .accordion-header + .accordion-collapse .accordion-body {
  padding-top: 0;
  padding-bottom: var(--hp-card-pad, var(--space-5));
}

.landing-features .features-icon-wrapper {
  --bs-gutter-x: var(--hp-card-pad, var(--space-5));
  --bs-gutter-y: var(--hp-card-pad, var(--space-5));
}

.features-icon-description {
  line-height: 1.8;
  letter-spacing: 0;
  max-width: 22rem;
  margin-inline: auto;
}

.landing-features .feature-line-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-color: var(--feature-icon-tint);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.landing-features .feature-line-icon--sky {
  --feature-icon-tint: #7ba3c9;
  -webkit-mask-image: url("/img/front-pages/icons/laptop.png");
  mask-image: url("/img/front-pages/icons/laptop.png");
}
.landing-features .feature-line-icon--clay {
  --feature-icon-tint: #c879ba;
  -webkit-mask-image: url("/img/front-pages/icons/paper.png");
  mask-image: url("/img/front-pages/icons/paper.png");
}
.landing-features .feature-line-icon--sage {
  --feature-icon-tint: #7ebf9a;
  -webkit-mask-image: url("/img/front-pages/icons/check.png");
  mask-image: url("/img/front-pages/icons/check.png");
}
.landing-features .feature-line-icon--mist {
  --feature-icon-tint: #8a9bb8;
  -webkit-mask-image: url("/img/front-pages/icons/user.png");
  mask-image: url("/img/front-pages/icons/user.png");
}
.landing-features .feature-line-icon--sand {
  --feature-icon-tint: #c9b07a;
  border: 1px solid #000;
  -webkit-mask-image: url("/img/front-pages/icons/keyboard.png");
  mask-image: url("/img/front-pages/icons/keyboard.png");
}

.dropdown-item {
  font-size: 1rem !important;
  line-height: unset !important;
  cursor: pointer;
}

.origin, .destination, .starttimeselector {
  font-size: 1rem !important;
}

/* Do NOT set inset:unset — it breaks Bootstrap Popper and dumps the menu into layout
   (page “shrinks” vertically when destination list opens). */
.landing-hero .input-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.landing-hero .dropdown-menu.origin_location,
.landing-hero .dropdown-menu.destination_location {
  /* Mobile: match field. Desktop overrides below for a wider, readable panel. */
  width: 100%;
  min-width: 100% !important;
  max-width: 100%;
  max-height: min(42dvh, 280px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1080;
  border-radius: 0.85rem;
  padding: 0.35rem 0;
  box-shadow:
    0 0.5rem 1.25rem rgba(47, 43, 61, 0.12),
    0 0.125rem 0.35rem rgba(47, 43, 61, 0.06);
}

@media (min-width: 768px) {
  .landing-hero .dropdown-menu.origin_location,
  .landing-hero .dropdown-menu.destination_location {
    /* Wider + shorter panel so the open list reads as a usable sheet, not a thin column */
    width: max(100%, 22rem);
    min-width: max(100%, 22rem) !important;
    max-width: min(26rem, 42vw);
    max-height: min(40dvh, 18rem) !important;
  }
}

/* Custom scrollbar styling for better UX */
.landing-hero .dropdown-menu.origin_location::-webkit-scrollbar,
.landing-hero .dropdown-menu.destination_location::-webkit-scrollbar {
  width: 6px;
}

.landing-hero .dropdown-menu.origin_location::-webkit-scrollbar-track,
.landing-hero .dropdown-menu.destination_location::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.landing-hero .dropdown-menu.origin_location::-webkit-scrollbar-thumb,
.landing-hero .dropdown-menu.destination_location::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.landing-hero .dropdown-menu.origin_location::-webkit-scrollbar-thumb:hover,
.landing-hero .dropdown-menu.destination_location::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.landing-hero .dropdown-menu.origin_location,
.landing-hero .dropdown-menu.destination_location {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Kill horizontal page scroll on the homepage (mobile).
   Only on html/body — overflow-x on hero ancestors would clip city dropdowns. */
html:has(.landing-hero),
body:has(.landing-hero) {
  overflow-x: clip;
  max-width: 100%;
}

.landing-hero > .container {
  max-width: 100%;
}

.locationicon {
  position: unset !important;
  display: unset !important;
}

.inputcel {
  padding: 0 0.25rem !important;
}

@media (max-width: 767.98px) {
  .landing-hero #tripForm > .inputcel,
  .landing-hero #tripForm > .od-pair-col {
    padding-inline: 0 !important;
  }

  .landing-hero #tripForm > .col-12 + .col-12 {
    margin-top: 0.5rem;
  }

  .landing-hero #tripForm .form-text {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
  }
}

.od-pair-col {
  position: relative;
}

.od-pair {
  position: relative;
  align-items: flex-start;
}

/* Tight center gutter: swap sits close to both fields; date/CTA columns unchanged */
@media (min-width: 768px) {
  .landing-hero #tripForm .od-pair {
    --od-swap-gutter: 1rem;
  }

  .landing-hero #tripForm .od-pair > .inputcel:first-child {
    padding-inline-end: calc(var(--od-swap-gutter) / 2) !important;
  }

  .landing-hero #tripForm .od-pair > .inputcel:last-of-type {
    padding-inline-start: calc(var(--od-swap-gutter) / 2) !important;
  }
}

/* Quiet field-chrome control — matches hero form radius/border, not a CTA.
   Positioned against .od-pair-col (button is a sibling of .od-pair, not inside .row). */
.landing-hero .od-pair-col > .od-swap-btn,
.landing-hero .od-swap-btn,
.od-swap-btn {
  --od-swap-size: 1.85rem;
  position: absolute !important;
  left: 50%;
  top: 1.15rem;
  transform: translateX(-50%);
  z-index: 4;
  width: var(--od-swap-size) !important;
  max-width: var(--od-swap-size) !important;
  height: var(--od-swap-size) !important;
  flex: 0 0 var(--od-swap-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color, #d9dee3);
  background: var(--bs-paper-bg, #fff);
  color: var(--bs-secondary-color, #8592a3);
  box-shadow:
    0 0 0 2px var(--bs-paper-bg, #fff),
    0 1px 2px rgba(47, 43, 61, 0.06);
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pin to vertical center of the ~40px input row (not the helper text below) */
.landing-hero #tripForm .od-swap-btn {
  top: 0.25rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.landing-hero .od-swap-btn:hover,
.landing-hero .od-swap-btn:focus-visible,
.od-swap-btn:hover,
.od-swap-btn:focus-visible {
  color: var(--bs-primary);
  border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color, #d9dee3));
  background: color-mix(in srgb, var(--bs-primary) 8%, #fff);
  outline: none;
  box-shadow:
    0 0 0 2px var(--bs-paper-bg, #fff),
    0 2px 6px color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

.od-swap-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bs-primary) 45%, transparent);
  outline-offset: 2px;
}

.od-swap-btn:active {
  transform: translateX(-50%) scale(0.94);
}

.od-swap-btn.is-swapping .ti {
  animation: od-swap-spin 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.od-swap-btn .ti {
  font-size: 1rem;
  margin: 0;
  line-height: 1;
}

@keyframes od-swap-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .od-swap-btn,
  .od-swap-btn .ti {
    transition: none;
    animation: none !important;
  }
}

@media (min-width: 768px) {
  .landing-hero #tripForm .od-pair {
    --od-swap-gutter: 1rem;
  }

  .landing-hero .od-swap-btn,
  .landing-hero #tripForm .od-swap-btn {
    top: 0.25rem;
    --od-swap-size: 1.85rem;
    border-radius: 0.75rem;
  }
}

:root, [data-bs-theme=light] {
  --bs-border-radius: 1.0rem !important;
}

.card-header {
  border-radius: var(--bs-border-radius);
}


.landing-hero {
  background-color: #fff !important;
  background-image: none !important;
}
.input-icons i {
  position: absolute;
}

.input-icons {
  width: 100%;
  margin-bottom: 10px;
}

.icon {
  padding: 10px;
  min-width: 40px;
}

.input-container {
  position: relative;
  display: flex;
}

  .input-container i {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%); /* Center icon vertically */
  }

  .input-container input {
    width: 100%;
    border: 1px solid #ccc;
  }


@keyframes hero-gradient-animation {
  0% {
    --c-0: hsla(175, 83%, 69%, 1);
    --s-start-0: 3%;
    --s-end-0: 75%;
    --y-0: 78%;
    --x-0: 31%;
    --c-1: hsla(101, 68%, 100%, 1);
    --x-1: 88%;
    --y-1: 93%;
    --s-start-1: 3%;
    --s-end-1: 83%;
    --x-2: 99%;
    --y-2: 8%;
    --c-2: hsla(84, 89%, 82%, 1);
    --s-start-2: 5%;
    --s-end-2: 67%;
    --s-start-3: 8%;
    --s-end-3: 61%;
    --c-3: hsla(36, 68%, 82%, 1);
    --y-3: 0%;
    --x-3: 41%;
    --c-4: hsla(189, 63%, 89%, 1);
    --s-start-4: 16%;
    --s-end-4: 88%;
    --x-4: 19%;
    --y-4: 59%;
  }

  100% {
    --c-0: hsla(154, 53%, 78%, 1);
    --s-start-0: 8%;
    --s-end-0: 50%;
    --y-0: 62%;
    --x-0: 96%;
    --c-1: hsla(25, 80%, 79%, 1);
    --x-1: 11%;
    --y-1: 14%;
    --s-start-1: 14%;
    --s-end-1: 78%;
    --x-2: 34%;
    --y-2: 84%;
    --c-2: hsla(57, 72%, 56%, 1);
    --s-start-2: 9%;
    --s-end-2: 63%;
    --s-start-3: 17%;
    --s-end-3: 86%;
    --c-3: hsla(40, 91%, 79%, 1);
    --y-3: 21%;
    --x-3: 32%;
    --c-4: hsla(39, 72%, 66%, 1);
    --s-start-4: 18%;
    --s-end-4: 55%;
    --x-4: 88%;
    --y-4: 91%;
  }
}

@property --c-0 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(175, 83%, 69%, 1)
}

@property --s-start-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 3%
}

@property --s-end-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 75%
}

@property --y-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 78%
}

@property --x-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 31%
}

@property --c-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(101, 68%, 100%, 1)
}

@property --x-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 88%
}

@property --y-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 93%
}

@property --s-start-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 3%
}

@property --s-end-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 83%
}

@property --x-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 99%
}

@property --y-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 8%
}

@property --c-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(84, 89%, 82%, 1)
}

@property --s-start-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 5%
}

@property --s-end-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 67%
}

@property --s-start-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 8%
}

@property --s-end-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 61%
}

@property --c-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(36, 68%, 82%, 1)
}

@property --y-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%
}

@property --x-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 41%
}

@property --c-4 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(189, 63%, 89%, 1)
}

@property --s-start-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 16%
}


@property --s-end-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 88%
}

@property --x-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 19%
}

@property --y-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 59%
}

.landing-hero1 {
  background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%) !important;
  animation: none !important;
}

/* ── Contact photo frame (correct aspect, no stretch/mirror) ── */
.landing-contact .contact-img-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--section-radius, 1rem);
  background: #fff;
  padding: var(--hp-card-pad, var(--space-5));
}

.landing-contact .contact-img-frame {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #ecebf0;
}

.landing-contact .contact-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scaleX(-1);
}

.landing-contact .contact-img-meta {
  flex: 0 0 auto;
  padding-top: var(--space-4, 1rem);
}

.landing-contact .card .card-body {
  padding: var(--hp-card-pad, var(--space-5));
}

@media (min-width: 992px) {
  .landing-contact .contact-img-box {
    min-height: 100%;
  }

  .landing-contact .contact-img-frame {
    flex: 1 1 auto;
    min-height: 14rem;
    aspect-ratio: auto;
  }
}