/* =====================================================================
   Elite Cabz — Brass & Ivory
   Loaded after style.css. Re-skins the whole site by redefining the
   theme's own custom properties, then correcting the places that
   hardcode a colour. Delete the enqueue line in functions.php to revert.
   ===================================================================== */

:root {
  /* grounds */
  --black:      #F6F1E7;
  --dark:       #F6F1E7;
  --dark2:      #F1EADC;
  --dark3:      #EDE5D5;
  --mid:        #DED6C6;

  /* ink — anything the old theme painted white is now espresso */
  --white:      #1A1611;
  --off-white:  #4A4238;
  --light-grey: #4A4238;
  --grey:       #6E6455;

  /* brass */
  --gold:       #9A7233;
  --gold-light: #B4894A;
  --gold-dark:  #7C5A26;

  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Karla', system-ui, -apple-system, sans-serif;

  --shadow-gold: none;
  --shadow-card: none;
  --radius: 2px;

  --paper: #F6F1E7;
  --ink:   #1A1611;
  --rule:  #DED6C6;
}

html, body { background: var(--paper); color: var(--ink); }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }


/* --- rescue text the old theme hardcoded to white -------------------- */
[style*="color:#fff"], [style*="color: #fff"],
[style*="color:#ffffff"], [style*="color: #ffffff"],
[style*="rgba(255,255,255"], [style*="rgba(255, 255, 255"] {
  color: var(--ink) !important;
}
[style*="background:rgba(255,255,255"], [style*="background: rgba(255, 255, 255"] {
  background: transparent !important;
}

/* --- kill the dark-theme atmospherics ------------------------------- */
.page-loader { display: none !important; }
.hero-orb, .hero-grid, .hero-overlay { display: none !important; }
.hero-bg { background: var(--paper) !important; }
#hero { background: var(--paper) !important; }
#hero::before, #hero::after { display: none !important; }

/* --- typography ----------------------------------------------------- */
h1, h2, h3, .hero-title, .section-title, .stat-num, .pricing-price, .logo, .loader-logo {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
}
/* Newsreader reads calm and even at display size, so the big headline
   can carry a little more weight without turning heavy. */
h1, .hero-title, .bi-h1, .logo { font-weight: 600 !important; }
h1 em, h2 em, .hero-title em, .section-title em { font-style: italic; color: var(--gold) !important; }
p, li, label, input, select, textarea, .btn, .nav-links a, .mobile-nav a { font-family: var(--font-sans); }

.hero-title { line-height: 1.02 !important; text-wrap: balance; }
.hero-sub, .section-sub { color: var(--grey) !important; }

.label, .faq-eyebrow, .pricing-tier, .pricing-from {
  font-size: 9.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: var(--gold) !important;
}

.divider { background: var(--gold) !important; height: 1px !important; box-shadow: none !important; }

/* --- header --------------------------------------------------------- */
#header {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#header.scrolled { background: var(--paper) !important; box-shadow: none !important; }
.logo { color: var(--ink) !important; letter-spacing: 0.08em; }
.logo span { color: var(--gold) !important; }
.nav-links a {
  color: #4A4238 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-links a:hover { color: var(--gold) !important; }
.nav-phone { color: var(--ink) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.nav-toggle span { background: var(--ink) !important; }
.mobile-nav { background: var(--paper) !important; border-top: 1px solid var(--rule); }
.mobile-nav a { color: var(--ink) !important; border-bottom: 1px solid var(--rule); }

/* --- buttons -------------------------------------------------------- */
.btn {
  border-radius: 2px !important;
  box-shadow: none !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 12px !important;
  transition: opacity .15s ease;
}
.btn:hover { transform: none !important; box-shadow: none !important; opacity: .86; }
.btn-gold, .nav-book {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
}
.btn-outline, .btn-whatsapp {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
}
.btn-outline:hover, .btn-whatsapp:hover { border-color: var(--gold) !important; }
.btn-dark { background: var(--ink) !important; color: var(--paper) !important; border: 1px solid var(--ink) !important; }

/* --- panels: no cards floating on cards ----------------------------- */
.why-card, .pricing-card, .booking-form-card, .book-option, .faq-item {
  background: transparent !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.why-card, .book-option, .booking-form-card, .pricing-card {
  border: 1px solid var(--rule) !important;
}
.why-card:hover, .book-option:hover, .pricing-card:hover {
  transform: none !important;
  border-color: var(--gold) !important;
  box-shadow: none !important;
}
.pricing-card.featured {
  border: 1px solid var(--ink) !important;
  border-left: 2px solid var(--gold) !important;
  transform: none !important;
}
.why-card h3, .pricing-card h3, .book-option h3, .booking-form-card h3 { color: var(--ink) !important; }
.why-card p, .pricing-card li, .book-option p { color: var(--grey) !important; }
.why-icon, .book-option-icon, .pricing-icon, .service-icon { filter: grayscale(1) opacity(.75); }

.pricing-price { color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.pricing-price sup { color: var(--gold) !important; }
.pricing-list li { border-bottom: 1px solid var(--rule) !important; }

/* --- service cards keep their photographs --------------------------- */
.service-card { border: 1px solid var(--rule) !important; overflow: hidden; }
.service-card img { filter: none; }
.service-card-overlay {
  background: linear-gradient(to top, rgba(26,22,17,.92) 0%, rgba(26,22,17,.62) 55%, rgba(26,22,17,0) 100%) !important;
}
.service-card-overlay h3, .service-card-overlay p { color: #F6F1E7 !important; }
.service-card-link { color: #C9A84C !important; }

/* --- forms ---------------------------------------------------------- */
.form-group label { color: var(--gold) !important; font-size: 9.5px !important; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  background: transparent !important;
  color: var(--ink) !important;
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-bottom-color: var(--ink) !important;
  outline: none;
  box-shadow: none !important;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #A79B87 !important; }
.terms-consent { color: var(--grey) !important; }
.terms-consent a { color: var(--gold) !important; }

/* --- marquee becomes a ruled band ----------------------------------- */
.marquee-section {
  background: var(--paper) !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.marquee-track span {
  color: var(--grey) !important;
  font-size: 10px !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}
.marquee-track span::after { color: var(--gold-light) !important; }

/* --- stats ---------------------------------------------------------- */
.hero-stats { border-top: 1px solid var(--rule); padding-top: 26px; }
.stat-num { color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--grey) !important; font-size: 9.5px !important; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }

.hero-badge {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  color: var(--gold) !important;
  border-radius: 2px !important;
  font-size: 9.5px !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}
.hero-badge-dot { background: var(--gold) !important; box-shadow: none !important; }

/* --- CTA band ------------------------------------------------------- */
.cta-band {
  background: var(--ink) !important;
  border: none !important;
}
.cta-band h2, .cta-band .section-title { color: var(--paper) !important; }
.cta-band .section-sub { color: rgba(246,241,231,.72) !important; }
.cta-band .label { color: var(--gold-light) !important; }
.cta-band .btn-gold { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--paper) !important; }
.cta-band .btn-outline, .cta-band .btn-whatsapp { color: var(--paper) !important; border-color: rgba(246,241,231,.34) !important; }

/* --- footer --------------------------------------------------------- */
#footer, footer {
  background: var(--paper) !important;
  border-top: 1px solid var(--ink) !important;
  color: var(--grey) !important;
}
#footer a, footer a { color: #4A4238 !important; }
#footer a:hover, footer a:hover { color: var(--gold) !important; }
#footer h3, #footer h4, footer h3, footer h4 { color: var(--ink) !important; font-family: var(--font-serif) !important; }

/* --- reviews -------------------------------------------------------- */
.ecz-review {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-left: 2px solid var(--gold) !important;
  border-radius: 2px;
  padding: 26px;
}
.ecz-review p { color: var(--ink) !important; }
.ecz-review .stars { color: var(--gold) !important; }
.ecz-review .who strong { color: var(--ink) !important; }
.ecz-review .avatar { background: var(--ink) !important; color: var(--paper) !important; }

/* --- reduced motion & focus ----------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- the brass "custom journey" card inside the services grid -------- */
.service-card[style*="var(--gold)"] { background: var(--gold) !important; }
.service-card[style*="var(--gold)"] h3,
.service-card[style*="var(--gold)"] p { color: #F6F1E7 !important; }
.service-card[style*="var(--gold)"] .btn-dark {
  background: #F6F1E7 !important; color: var(--ink) !important; border-color: #F6F1E7 !important;
}

/* --- decorative emoji do not belong in this typeface ---------------- */
.btn .emoji, .hero-btns .btn img.emoji, .nav-phone img.emoji { display: none; }

/* --- specificity corrections ---------------------------------------- */

/* .nav-links a was beating .nav-book, leaving the Book Now label
   espresso on espresso. */
.nav-links a.nav-book {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
}
.nav-links a.nav-book:hover { color: var(--paper) !important; opacity: .86; }

/* The footer set its own faded whites in the stylesheet rather than
   inline, so the rescue rule above could not reach them. */
#footer, #footer p, #footer li, #footer span, #footer div,
footer, footer p, footer li, footer span {
  color: var(--grey) !important;
}
#footer small, footer small,
#footer .footer-legal, footer .footer-legal,
#footer .footer-bottom, footer .footer-bottom,
#footer .footer-bottom *, footer .footer-bottom * {
  color: #6E6455 !important;
}
#footer a, footer a { color: #4A4238 !important; }
#footer a:hover, footer a:hover { color: var(--gold) !important; }
#footer strong, footer strong { color: var(--ink) !important; }

/* =====================================================================
   Brass & Ivory — homepage arrangement (bi-*)
   ===================================================================== */

.bi-hero { padding: 0 !important; min-height: 0 !important; display: block !important; }
.bi-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1px 480px;
  gap: 0;
  align-items: stretch;
  max-width: var(--max);
  margin: 0 auto;
}
.bi-hero-copy { padding: 64px 56px 64px 0; display: flex; flex-direction: column; gap: 32px; }
.bi-hero-rule { background: var(--ink); }
.bi-hero-calc { padding: 64px 0 64px 48px; display: flex; flex-direction: column; gap: 22px; }

.bi-h1 {
  font-size: clamp(38px, 5.2vw, 68px) !important;
  line-height: .96 !important;
  letter-spacing: -.015em;
  margin: 0 !important;
  text-wrap: balance;
}
.bi-sub { max-width: 48ch; font-size: 15.5px; line-height: 1.7; margin: 0 !important; }

.bi-marks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); max-width: 560px; }
.bi-marks li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-2, #4A4238);
}
.bi-marks .n, .bi-row .n {
  font-size: 9.5px; letter-spacing: .18em; font-weight: 600;
  color: var(--gold-light); flex-shrink: 0; width: 26px;
  font-variant-numeric: tabular-nums;
}

.bi-stats { display: flex; gap: 48px; flex-wrap: wrap; }
.bi-stats .big { display: block; font-family: var(--font-serif); font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.bi-stats .cap { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--grey); }

.bi-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.bi-hero-btns .btn { min-width: 150px; justify-content: center; }

.bi-fineprint { font-size: 12px; color: var(--grey); line-height: 1.6; margin: 0; }
.bi-fineprint a { color: var(--gold); }

/* --- ruled lists (fares, why) --------------------------------------- */
.bi-section { padding: 76px 0 !important; background: var(--paper) !important; }
.bi-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; max-width: 62ch; }
.bi-head .section-title { margin: 0 !important; }

.bi-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.bi-row {
  display: flex; align-items: baseline; gap: 20px;
  padding: 20px 0 20px 14px;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
}
.bi-row:hover { border-left-color: var(--gold); }
.bi-row-main { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.bi-row-title { font-family: var(--font-serif); font-size: 22px; line-height: 1.1; }
.bi-row-sub { font-size: 13px; color: var(--grey); line-height: 1.55; }
.bi-row-price {
  font-family: var(--font-serif); font-size: 34px; line-height: 1;
  flex-shrink: 0; margin-left: auto; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bi-row-price sup { font-size: .5em; top: -.6em; color: var(--gold); }

/* --- services ------------------------------------------------------- */
.bi-services { margin-top: 40px !important; gap: 1px !important; background: var(--rule); }
.bi-service-cta {
  background: var(--gold) !important;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 48px;
}
.bi-service-cta h3 { color: #F6F1E7 !important; font-size: 24px; margin-bottom: 12px; }
.bi-service-cta p { color: rgba(246,241,231,.82) !important; margin-bottom: 24px; font-size: 14px; }
.bi-service-cta .btn-dark { background: #F6F1E7 !important; color: var(--ink) !important; border-color: #F6F1E7 !important; }

/* --- reviews -------------------------------------------------------- */
.bi-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ecz-review .stars { color: var(--gold); font-size: 15px; margin-bottom: 12px; letter-spacing: .12em; }
.ecz-review p { font-style: italic; margin: 0 0 20px; line-height: 1.7; }
.ecz-review .who { display: flex; align-items: center; gap: 12px; }
.ecz-review .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.bi-review-cta { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* --- areas ---------------------------------------------------------- */
.bi-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; max-width: 1080px; margin: 0 auto; }
.bi-areas > div { border-top: 1px solid var(--rule); padding-top: 16px; }
.bi-area-h { font-size: 9.5px !important; letter-spacing: .22em; text-transform: uppercase; font-weight: 600 !important; color: var(--gold) !important; margin-bottom: 12px; font-family: var(--font-sans) !important; }
.bi-areas p { line-height: 1.9; font-size: 13.5px; color: var(--ink-2, #4A4238); }
.bi-areas a { color: var(--ink-2, #4A4238) !important; text-decoration: underline; text-decoration-color: rgba(154,114,51,.35); text-underline-offset: 3px; }
.bi-areas a:hover { color: var(--gold) !important; }

/* --- faq ------------------------------------------------------------ */
.bi-faq-wrap { max-width: 880px; }
.bi-faqs { border-top: 1px solid var(--ink); }
.bi-faqs .faq-item { border-bottom: 1px solid var(--rule); padding: 24px 0; }
.bi-faqs .faq-item h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 400; color: var(--ink); margin: 0 0 8px; }
.bi-faqs .faq-item p { margin: 0; line-height: 1.75; color: var(--grey); font-size: 14.5px; }

/* --- the live calculator, dressed for this page --------------------- */
.bi-hero-calc .ecz-dirs { display: flex; border-bottom: 1px solid var(--ink); margin-bottom: 24px; }
.bi-hero-calc .ecz-dir {
  flex: 1 1 0; height: 50px; background: transparent; border: none; cursor: pointer;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: #A79B87;
}
.bi-hero-calc .ecz-dir + .ecz-dir { border-left: 1px solid var(--rule); }
.bi-hero-calc .ecz-dir.is-on { color: var(--ink); font-weight: 700; }
.bi-hero-calc .ecz-label { display: block; font-size: 9.5px !important; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--gold) !important; margin-bottom: 6px; }
.bi-hero-calc .ecz-input {
  width: 100%; height: 48px; background: transparent !important;
  border: none !important; border-bottom: 1px solid var(--rule) !important; border-radius: 0 !important;
  padding: 0 !important; color: var(--ink) !important;
  font-family: var(--font-serif); font-size: 24px;
}
.bi-hero-calc select.ecz-input { font-size: 18px; }
.bi-hero-calc .ecz-input:focus { outline: none; border-bottom-color: var(--ink) !important; }
.bi-hero-calc .ecz-row { display: flex; flex-direction: column; gap: 22px; }
.bi-hero-calc #ecz-go { width: 100%; margin-top: 22px; }
.bi-hero-calc #ecz-summary { font-size: 12.5px; color: var(--grey); margin: 18px 0 0; }
.bi-hero-calc #ecz-cars { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.bi-hero-calc #ecz-cars li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.bi-hero-calc .ecz-name { font-family: var(--font-serif); font-size: 18px; }
.bi-hero-calc .ecz-seats { font-size: 11.5px; color: var(--grey); }
.bi-hero-calc .ecz-price { font-family: var(--font-serif); font-size: 30px; color: var(--gold); font-variant-numeric: tabular-nums; }
.bi-hero-calc #ecz-msg { font-size: 12.5px; color: var(--grey); }

/* --- responsive ----------------------------------------------------- */
@media (max-width: 1040px) {
  .bi-hero-grid { grid-template-columns: 1fr; }
  .bi-hero-rule { display: none; }
  .bi-hero-copy { padding: 48px 0 40px; }
  .bi-hero-calc { padding: 32px 0 56px; border-top: 1px solid var(--ink); }
}
@media (max-width: 640px) {
  .bi-row { flex-wrap: wrap; }
  .bi-row-price { margin-left: 46px; font-size: 28px; }
  .bi-stats { gap: 30px; }
  .bi-section { padding: 52px 0 !important; }
}

/* =====================================================================
   The fare calculator, dressed for Brass & Ivory.
   It carries its own four custom properties, so redefining those does
   most of the work — and it does it on all 115 pages, not just home.
   No markup and no behaviour is touched.
   ===================================================================== */

.ecz-quote {
  --ecz-gold: #9A7233;
  --ecz-ink:  #F6F1E7;
  --ecz-line: #DED6C6;
  --ecz-dim:  #6E6455;
  background: transparent !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* labels — the pattern uses .ecz-label, the source uses .ecz-field > span */
.ecz-quote .ecz-label,
.ecz-quote .ecz-field > span {
  font-size: 9.5px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: var(--gold) !important;
  margin-bottom: 6px !important;
}

.ecz-quote input,
.ecz-quote select {
  background: transparent !important;
  color: var(--ink) !important;
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: 48px;
  font-family: var(--font-serif) !important;
  font-size: 23px !important;
}
.ecz-quote select { font-size: 18px !important; }
.ecz-quote input::placeholder { color: #A79B87 !important; }
.ecz-quote input:focus,
.ecz-quote select:focus { border-bottom-color: var(--ink) !important; outline: none; }

.ecz-quote .ecz-row { gap: 24px !important; }
.ecz-quote .ecz-field { flex: 1 1 100% !important; }

/* direction toggle — two halves of one ruled bar, not two pills */
.ecz-quote .ecz-dirs {
  display: flex !important;
  gap: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 26px !important;
}
.ecz-quote .ecz-dir {
  flex: 1 1 0 !important;
  height: 50px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #A79B87 !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  cursor: pointer;
}
.ecz-quote .ecz-dir + .ecz-dir { border-left: 1px solid var(--rule) !important; }
.ecz-quote .ecz-dir.is-on {
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -2px 0 var(--ink);
}

.ecz-quote .ecz-go {
  width: 100% !important;
  height: 54px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  margin-top: 26px !important;
}
.ecz-quote .ecz-go[disabled] { opacity: .35 !important; }

.ecz-quote .ecz-msg { color: var(--grey) !important; font-size: 12.5px !important; }
.ecz-quote .ecz-msg.is-bad { color: #8C2F1D !important; }
.ecz-quote .ecz-summary { color: var(--grey) !important; font-size: 12.5px !important; }
.ecz-quote .ecz-summary b { color: var(--ink) !important; font-weight: 600 !important; }

.ecz-quote .ecz-cars { border-top: 1px solid var(--ink) !important; margin-top: 16px !important; }
.ecz-quote .ecz-cars li {
  border-bottom: 1px solid var(--rule) !important;
  border-top: none !important;
  padding: 14px 0 !important;
  background: transparent !important;
}
.ecz-quote .ecz-cars .ecz-name { font-family: var(--font-serif) !important; font-size: 19px !important; color: var(--ink) !important; }
.ecz-quote .ecz-cars .ecz-seats { color: var(--grey) !important; font-size: 11.5px !important; }
.ecz-quote .ecz-cars .ecz-price {
  font-family: var(--font-serif) !important;
  font-size: 30px !important;
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums;
}
.ecz-quote .ecz-note { color: var(--grey) !important; font-size: 11.5px !important; }

/* --- the live pattern's own result classes -------------------------- */
.ecz-quote .ecz-results { background: transparent !important; border: none !important; padding: 0 !important; }
.ecz-quote .ecz-cars {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  border-top: 1px solid var(--ink) !important; margin-top: 14px !important; padding: 0 !important;
}
.ecz-quote .ecz-car {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 14px 0 14px 12px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 16px !important;
}
.ecz-quote .ecz-car:hover { border-left-color: var(--gold) !important; }
.ecz-quote .ecz-car-txt { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.ecz-quote .ecz-name  { font-family: var(--font-serif) !important; font-size: 19px !important; color: var(--ink) !important; }
.ecz-quote .ecz-seats { color: var(--grey) !important; font-size: 11.5px !important; }
.ecz-quote .ecz-price {
  font-family: var(--font-serif) !important; font-size: 30px !important;
  color: var(--gold) !important; font-variant-numeric: tabular-nums; flex-shrink: 0;
}

.ecz-quote .ecz-cta { display: flex !important; gap: 10px !important; margin-top: 18px !important; }
.ecz-quote .ecz-btn {
  flex: 1 1 0 !important;
  height: 48px !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  display: flex !important; align-items: center !important; justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.ecz-quote .ecz-btn-wa {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}
.ecz-quote .ecz-btn:hover { opacity: .88; }

/* =====================================================================
   Inner page banners.
   .page-hero painted itself with a hardcoded gradient instead of the
   colour variables, so the site-wide re-skin never reached it and every
   inner heading ended up espresso-on-black. It appears on nine
   templates: page, single, pricing, services, contact, driver, fleet,
   booking and booking-backup.
   ===================================================================== */

.page-hero {
  background: var(--paper) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ink) !important;
  color: var(--ink) !important;
  min-height: 0 !important;
  padding: 72px 0 56px !important;
  box-shadow: none !important;
}
.page-hero::before,
.page-hero::after { display: none !important; content: none !important; }

.page-hero h1,
.page-hero .page-title {
  color: var(--ink) !important;
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: clamp(34px, 5vw, 56px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.012em;
  margin: 0 0 14px !important;
  text-wrap: balance;
}
.page-hero h1 em, .page-hero .page-title em { color: var(--gold) !important; font-style: italic; }
.page-hero p, .page-hero .page-sub, .page-hero .section-sub { color: var(--grey) !important; }
.page-hero .label { color: var(--gold) !important; }

/* the buttons sitting in that band were dark on dark too */
.page-hero .btn-outline,
.page-hero .btn-whatsapp {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
}
.page-hero .btn-gold { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
.page-hero .btn-outline:hover, .page-hero .btn-whatsapp:hover { border-color: var(--gold) !important; }

/* the featured price card carried its own dark gradient as well */
.pricing-card.featured { background: transparent !important; background-image: none !important; }

/* breadcrumbs and scroll cue that assumed a dark ground */
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: var(--grey) !important; }
.page-hero .breadcrumb a:hover { color: var(--gold) !important; }
.scroll-line { background: linear-gradient(to bottom, var(--gold), transparent) !important; }

/* =====================================================================
   Homepage headline — Newsreader at 600 needs room to breathe.
   .96 line-height was set for Bodoni and left the four lines colliding.
   ===================================================================== */
.bi-h1 {
  font-size: clamp(32px, 4.4vw, 54px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em;
  max-width: 15ch;
}
.bi-h1 em { display: inline; }
.bi-hero-copy { gap: 28px; }
@media (max-width: 640px) {
  .bi-h1 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; max-width: none; }
}

/* --- headline: more air, fewer collisions --------------------------- */
.bi-h1 {
  font-size: clamp(31px, 4vw, 50px) !important;
  line-height: 1.16 !important;
  max-width: 16ch;
}
.bi-hero-grid { grid-template-columns: 1fr 1px 440px; }
.bi-hero-copy { padding-right: 64px; gap: 30px; }
.bi-hero-calc { padding-left: 44px; }
@media (max-width: 1040px) {
  .bi-hero-grid { grid-template-columns: 1fr; }
  .bi-hero-copy { padding-right: 0; }
  .bi-hero-calc { padding-left: 0; }
}

/* --- two things were too faint to read ------------------------------ */

/* the unselected half of the to/from toggle: it is still a control,
   so it has to be legible, not just present */
.ecz-quote .ecz-dir { color: #7E7263 !important; }
.ecz-quote .ecz-dir.is-on { color: var(--ink) !important; }

/* the 01 / 02 / 03 markers were sitting at light brass on ivory */
.bi-marks .n, .bi-row .n, .bi-list .n { color: var(--gold) !important; }

/* =====================================================================
   The last of the hardcoded whites.
   These were set in style.css rules (not inline), so the earlier rescue
   rule could not reach them. .service-card p is deliberately left alone
   — it sits on the dark photo gradient, where white is correct.
   ===================================================================== */

.breadcrumb, .breadcrumb span, .breadcrumb a { color: var(--grey) !important; }
.breadcrumb a:hover { color: var(--gold) !important; }

.t-text { color: var(--ink-2, #4A4238) !important; }

.footer-bottom p, .footer-bottom a { color: var(--grey) !important; }
.footer-bottom a:hover { color: var(--gold) !important; }

.licence {
  color: var(--muted, #6E6455) !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
}

.faq-section h2 {
  font-family: var(--font-serif) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}
.faq-section h3 { color: var(--ink) !important; }
.faq-section p  { color: var(--grey) !important; }
.faq-section .faq-item { border-color: var(--rule) !important; }

/* =====================================================================
   Two pages carry their own private stylesheets, written for the old
   dark theme. The contact page's styles live in the page content itself
   and use !important, so these selectors double the class to outrank
   them rather than fight at equal specificity.
   ===================================================================== */

/* --- /contact/ ------------------------------------------------------ */
.ec-ct-intro.ec-ct-intro { color: var(--grey) !important; border-left-color: var(--gold) !important; }
.ec-ct-card.ec-ct-card,
.ec-ct-detail-box.ec-ct-detail-box {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-top: 2px solid var(--gold) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.ec-ct-detail-box.ec-ct-detail-box { border-top: 1px solid var(--rule) !important; }
.ec-ct-card-label.ec-ct-card-label,
.ec-ct-detail-box h3 { color: var(--gold) !important; }
.ec-ct-card-value.ec-ct-card-value { color: var(--ink) !important; }
.ec-ct-card-note.ec-ct-card-note { color: var(--grey) !important; }
.ec-ct-detail-box p, .ec-ct-detail-box li, .ec-ct-detail-box span { color: var(--ink-2, #4A4238) !important; }

.ec-btn-outline.ec-btn-outline {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
}
.ec-btn-gold.ec-btn-gold,
.ec-btn-wa.ec-btn-wa {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 2px !important;
}
.ec-btn-outline.ec-btn-outline:hover { border-color: var(--gold) !important; }

/* --- /driver-application/ ------------------------------------------- */
.ecd { color: var(--ink-2, #4A4238) !important; }
.ecd h1, .ecd h2, .ecd h3, .ecd .ref .big {
  color: var(--ink) !important;
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
}
.ecd p, .ecd li { color: var(--ink-2, #4A4238) !important; }
.ecd .bx {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
}
.ecd table { border-collapse: collapse !important; }
.ecd th {
  color: var(--gold) !important;
  border-bottom: 1px solid var(--ink) !important;
  font-size: 9.5px !important;
  letter-spacing: .22em !important;
}
.ecd td {
  background: transparent !important;
  color: var(--ink-2, #4A4238) !important;
  border-top: 1px solid var(--rule) !important;
}
.ecd td:first-child { color: var(--ink) !important; font-weight: 700 !important; }
.ecd td:last-child {
  color: var(--gold) !important;
  font-family: var(--font-serif) !important;
  font-variant-numeric: tabular-nums;
}
.ecd .b2, .ecd a.b2 {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 2px !important;
}

/* --- /contact/ : the last three ------------------------------------- */
.ec-sec-label.ec-sec-label { color: var(--gold) !important; }
.ec-ct-cta.ec-ct-cta {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-left: 2px solid var(--gold) !important;
  border-radius: 2px !important;
}
.ec-ct-cta h2, .ec-ct-cta h3 {
  color: var(--ink) !important;
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
}
.ec-ct-cta p, .ec-ct-cta span { color: var(--grey) !important; }

/* =====================================================================
   Calculator spacing.
   The widget was built as a dark card: a 1px #2A2A2A box, padding for
   the card, and generous gaps sized for that box. On ivory the box
   became a visible rectangle and the gaps read as holes. This strips
   the card and sets an even rhythm instead.
   ===================================================================== */

.ecz-quote {
  border: none !important;
  box-shadow: none !important;
}

/* one consistent step between every stacked control */
.ecz-quote .ecz-form { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.ecz-quote .ecz-dirs { margin: 0 0 22px !important; }
.ecz-quote .ecz-row  { margin: 0 !important; gap: 20px !important; }
.ecz-quote .ecz-field { margin: 0 !important; }

/* label sits close to its own field, not floating between two */
.ecz-quote .ecz-label,
.ecz-quote .ecz-field > span { margin: 0 0 4px !important; line-height: 1.2 !important; }

/* the value text was sitting hard on the rule with a gap above it */
.ecz-quote input,
.ecz-quote select {
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 0 2px !important;
}
.ecz-quote select { height: 42px !important; }

.ecz-quote .ecz-go { margin: 22px 0 0 !important; }
.ecz-quote .ecz-msg:empty { display: none !important; }
.ecz-quote .ecz-msg { margin: 12px 0 0 !important; }
.ecz-quote .ecz-results:empty { display: none !important; }
.ecz-quote .ecz-summary { margin: 16px 0 0 !important; }
.ecz-quote .ecz-note { margin: 14px 0 0 !important; }

/* the widget sat flush against whatever followed it */
.ecz-quote { margin: 0 0 34px !important; }
.bi-hero-calc .ecz-quote { margin-bottom: 0 !important; }

/* =====================================================================
   Airport / Local tab bar.
   Wraps the existing widget rather than replacing it.
   ===================================================================== */
.ecz-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
}
.ecz-tab {
  flex: 1 1 0;
  height: 46px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #7E7263;
}
.ecz-tab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.ecz-tab:hover { color: var(--ink); }

/* the local panel reuses every airport class, so it inherits the styling */
.ecz-local .ecz-row { flex-direction: column !important; }

/* --- address autocomplete ------------------------------------------- */
.ecz-ac { position: relative; }
.ecz-ac__list {
  position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  margin: 0; padding: 0; list-style: none;
  max-height: 300px; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--ink); border-top: none;
  box-shadow: 0 12px 26px rgba(26,22,17,.10);
}
.ecz-ac__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
}
.ecz-ac__item:last-child { border-bottom: none; }
.ecz-ac__item:hover, .ecz-ac__item.is-active { background: #F1EADC; border-left-color: var(--gold); }
.ecz-ac__l1 { font-size: 14px; font-weight: 600; color: var(--ink); }
.ecz-ac__l2 { font-size: 11.5px; color: var(--grey); }
.ecz-ac__chosen { margin: 6px 0 0; font-size: 11.5px; color: var(--gold); line-height: 1.45; }

/* --- terminal picker ------------------------------------------------ */
.ecz-term { margin-top: 20px; }
.ecz-term-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ecz-term-chips .ecz-chip { height: 38px; padding: 0 13px; font-size: 12px; }
.ecz-term-note { color: var(--gold); font-weight: 600; }

/* =====================================================================
   Terminal chips — base appearance and, crucially, the selected state.
   Only the sizing made it into this file first time round, so a chip
   looked identical before and after you clicked it. It was registering
   the choice; it just never said so.
   ===================================================================== */
.ecz-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  color: var(--ink-2, #4A4238);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ecz-chip:hover { border-color: var(--gold); color: var(--ink); }
.ecz-chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.ecz-chip.is-on:hover { color: var(--paper); border-color: var(--ink); opacity: .9; }
.ecz-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* keep the row clear of the results panel and clickable in every context */
.ecz-term { position: relative; z-index: 3; margin-top: 20px; }
.ecz-term-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; pointer-events: auto; }

/* the hero clipped anything taller than itself once results appeared */
#hero.bi-hero { overflow: visible !important; }