/*!
 * luxe.css — Sydney Fixed Fare Taxi · light-luxury design system.
 *
 * Source of truth for the rebuild (Wave 1+). One stylesheet, one set of
 * tokens, one component library — used by every page generator and every
 * hand-edited static page. When the design needs to change, change it here.
 *
 * Aesthetic: cream/ivory ground + ink-black type + #C4A35E gold accent.
 * Type: Cormorant Garamond (display) + Montserrat (body).
 *
 * Differentiation from sibling brand Lux Move Chauffeurs (dark/gold):
 *   SFF Taxi = light luxury, editorial, cream + gold + Cormorant.
 *   Lux Move = dark luxury, black + gold + sans display.
 *
 * Sections:
 *   §1  Tokens (custom properties)
 *   §2  Reset + base
 *   §3  Typography
 *   §4  Layout
 *   §5  Buttons + links
 *   §6  Cards, tiles, sections
 *   §7  Form controls
 *   §8  Fare-pill, tag, eyebrow, stat
 *   §9  Header + footer
 *   §10 Motion + reveals
 *   §11 Utilities
 *   §12 Responsive
 */

/* =================================================================
   §1  TOKENS
   ================================================================= */
:root {
  /* — Colour: cream ground, ink type, gold accent — */
  --ground:     #FFFFFF;   /* primary cream — body background */
  --ground-2:   #F5F7FA;   /* deeper cream — alternating section bg */
  --surface:    #FFFFFF;   /* white card sitting on cream */
  --ink:        #0F1E3D;   /* deep ink — display + structural */
  --ink-2:      #2A3754;   /* body text */
  --ink-3:      #6B7591;   /* muted body, captions */
  --ink-soft:   #9AA3B5;   /* very muted, footnotes */
  --line:       #E4E8EF;   /* warm hairline on cream */
  --line-dark:  #CBD2DE;   /* stronger border for inputs / focus */
  --gold:       #C4A35E;   /* primary accent — per brand brief */
  --gold-2:     #9E8240;   /* gold hover/active */
  --gold-soft:  #F4ECDC;   /* gold-tinted soft fill for callouts */
  --success:    #1B7F4F;   /* confirmed states — use sparingly */
  --danger:     #B23A3A;   /* error — use sparingly */

  /* — Type — */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-caption: 12px;
  --fs-small:   13px;
  --fs-body:    16px;
  --fs-lede:    clamp(17px, 1.6vw, 19px);
  --fs-h3:      clamp(20px, 2.4vw, 24px);
  --fs-h2:      clamp(30px, 4.2vw, 44px);
  --fs-h1:      clamp(40px, 6.4vw, 72px);

  /* — Spacing scale — */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* — Radius — per brief: rounded 16px primary — */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;   /* primary — cards, buttons, hero card */
  --r-lg: 22px;   /* large surfaces, modals */
  --r-pill: 999px;

  /* — Shadow — minimal per brief — */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15, 30, 61, 0.04);
  --shadow-2: 0 8px 30px -8px rgba(15, 30, 61, 0.08);
  --shadow-3: 0 18px 48px -16px rgba(15, 30, 61, 0.12);

  /* — Motion — */
  --ease:   cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 150ms;
  --dur-2: 280ms;
  --dur-3: 600ms;

  /* — Layout — */
  --wrap-max: 1200px;
  --wrap-pad: clamp(20px, 4vw, 40px);

  /* — Header height (sticky offset) — */
  --header-h: 76px;
}

/* =================================================================
   §2  RESET + BASE
   ================================================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-body);
  background: var(--ground);
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--ground); }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* =================================================================
   §3  TYPOGRAPHY
   ================================================================= */
.h1, h1.luxe, .display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-feature-settings: "lnum", "kern", "liga";
}
.h2, h2.luxe {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h3, h3.luxe {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.h4, h4.luxe {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 62ch;
}
.lede strong { color: var(--ink); font-weight: 600; }
.small-text { font-size: var(--fs-small); color: var(--ink-3); }
.caption { font-size: var(--fs-caption); color: var(--ink-soft); letter-spacing: 0.02em; }

/* Italicised display flourish — used sparingly in hero subheadings */
.h1 em, .h2 em { font-style: italic; color: var(--gold-2); font-weight: 400; }

/* =================================================================
   §4  LAYOUT
   ================================================================= */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}
.section {
  padding: clamp(48px, 8vw, 112px) 0;
  position: relative;
}
.section--alt { background: var(--ground-2); }
.section--ink { background: var(--ink); color: var(--ground); }
.section--ink .h1,
.section--ink .h2,
.section--ink .h3 { color: var(--ground); }
.section--ink .lede { color: rgba(255, 255, 255, 0.78); }
.section-head { max-width: 820px; margin: 0 auto var(--s-7); text-align: center; }
.section-head.left { text-align: left; margin: 0 0 var(--s-7); }
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head h2 { margin-bottom: var(--s-4); }
.divider {
  display: block; width: 56px; height: 1px;
  background: var(--gold);
  margin: var(--s-5) auto;
}
.divider.left { margin-left: 0; margin-right: 0; }

/* Two-column hero grid */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Generic responsive card grid */
.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--tight { gap: var(--s-4); }
.grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }

/* =================================================================
   §5  BUTTONS + LINKS
   ================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  padding: 16px 28px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--primary {
  background: var(--ink);
  color: var(--ground);
  border-color: var(--ink);
}
.btn--primary:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--ground); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-dark);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.btn--ghost-light {
  background: transparent;
  color: var(--ground);
  border-color: rgba(255,255,255,.4);
}
.btn--ghost-light:hover { border-color: var(--gold); color: var(--gold); }
.btn--small { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; justify-content: center; }
.btn .arr {
  display: inline-block;
  transition: transform var(--dur-1) var(--ease);
}
.btn:hover .arr { transform: translateX(3px); }

.link-underline {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color var(--dur-1) var(--ease);
}
.link-underline:hover { color: var(--gold-2); }

/* =================================================================
   §6  CARDS, TILES, SECTIONS
   ================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
}
.card--feature {
  padding: var(--s-7);
  box-shadow: var(--shadow-2);
}
.card--gold-edge {
  border-left: 3px solid var(--gold);
}

/* A tile is a linked card with hover lift — used for popular routes,
   vehicle classes, day-trip tiles. */
.tile {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
  position: relative;
  overflow: hidden;
}
.tile:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.tile .tag {
  align-self: flex-start;
  margin-bottom: var(--s-3);
}
.tile .tile-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: var(--s-2);
  letter-spacing: -0.005em;
}
.tile .tile-sub {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
  flex-grow: 1;
}
.tile .tile-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.tile .tile-foot .price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
}
.tile .tile-foot .price .from { font-size: 12px; color: var(--ink-3); margin-right: 6px; font-family: var(--font-body); font-weight: 500; }
.tile .tile-foot .price .cur { font-size: 14px; color: var(--ink-3); margin-right: 2px; font-family: var(--font-body); }
.tile .tile-foot .arr {
  color: var(--gold);
  transition: transform var(--dur-1) var(--ease);
}
.tile:hover .tile-foot .arr { transform: translate(3px, -3px); }

/* Numbered step tile (how-it-works) */
.step {
  display: flex; flex-direction: column;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.step .step-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: var(--s-3);
  line-height: 1;
}
.step h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.step p { font-size: 15px; color: var(--ink-3); }

/* =================================================================
   §7  FORM CONTROLS  (used by the fare calculator + funnel forms)
   ================================================================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.input, .select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
  min-height: 48px;  /* mobile tap target */
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 163, 94, 0.18);
}

/* =================================================================
   §8  FARE-PILL, TAG, EYEBROW, STAT
   ================================================================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 18px; height: 1px; background: var(--gold);
}
.eyebrow.bare::before { display: none; }

.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-2);
  background: var(--gold-soft);
  padding: 5px 10px;
  border-radius: var(--r-pill);
}
.tag--ink { background: var(--ink); color: var(--gold); }
.tag--neutral { background: var(--ground-2); color: var(--ink-3); }

/* Stat: big number + small label */
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .stat-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat .stat-val .gold { color: var(--gold); }
.stat .stat-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

/* Fare-pill — used inline ("Parramatta → SYD T1, A$128 fixed") */
.fare-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--ink);
  color: var(--gold);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.fare-pill .from { color: rgba(196, 163, 94, .6); font-weight: 500; font-size: 12px; }

/* =================================================================
   §9  HEADER + FOOTER
   ================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--line);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--s-4) var(--wrap-pad);
  min-height: var(--header-h);
  gap: var(--s-6);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
.wordmark .brand-svg { height: 38px; width: auto; display: block; }
.wordmark-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--gold-2);
  margin-left: 6px;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) { .wordmark-tag { display: none; } }

nav.primary {
  display: flex; align-items: center; gap: var(--s-6);
  flex: 1; justify-content: center;
}
nav.primary a {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 8px 0;
  position: relative;
  transition: color var(--dur-1) var(--ease);
}
nav.primary a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
nav.primary a:hover { color: var(--ink); }
nav.primary a:hover::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding: var(--s-9) 0 var(--s-6);
  margin-top: var(--s-9);
}
.site-footer .grid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-6);
}
.site-footer h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-4);
}
.site-footer a {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 4px 0;
  font-size: 14px;
  transition: color var(--dur-1) var(--ease);
}
.site-footer a:hover { color: var(--gold); }
.site-footer .foot-brand-line {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ground);
  margin-bottom: var(--s-3);
}
.site-footer .bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer .bottom a { display: inline; color: rgba(255, 255, 255, 0.5); }
.site-footer .bottom a:hover { color: var(--gold); }

/* =================================================================
   §10 MOTION + REVEALS
   ================================================================= */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =================================================================
   §11 UTILITIES
   ================================================================= */
.stack > * + * { margin-top: var(--s-3); }
.stack-5 > * + * { margin-top: var(--s-5); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.center-text { text-align: center; }
.muted { color: var(--ink-3); }
.ink { color: var(--ink); }
.gold { color: var(--gold-2); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.no-underline { text-decoration: none; }
.full-width { width: 100%; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* =================================================================
   §12 RESPONSIVE
   ================================================================= */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .site-footer .grid { grid-template-columns: 1fr; }
  .site-footer .bottom { flex-direction: column; align-items: flex-start; }
  nav.primary { display: none; }
}

/* === BOOKING-FIRST HOMEPAGE — premium chauffeur widget (redesign 2026-05-31) === */

.hero--booking { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,5vw,64px); padding:clamp(28px,5vw,72px) 0 56px; align-items:center; }
@media (max-width:880px){ .hero--booking{ grid-template-columns:1fr; gap:28px; padding:20px 0 28px; } }

.hero-brand .trust-row{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:22px; }
.hero-brand .trust-row span{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); font-weight:500; }
.hero-call{ display:inline-block; margin-top:16px; font-size:13.5px; color:var(--ink-3); }
.hero-call a{ color:var(--ink); border-bottom:1px solid var(--gold); text-decoration:none; }

/* ---- Card ---- */
.form-card{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,#FFFDF9 0%, var(--ground) 60%);
  border:1px solid rgba(15,30,61,.09);
  border-radius:20px;
  padding:clamp(20px,4.5vw,30px);
  box-shadow:0 1px 1px rgba(15,30,61,.03), 0 22px 55px -30px rgba(15,30,61,.40);
  overflow:hidden;
}
.form-card, .form-card *{ box-sizing:border-box; }
.form-card::after{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); z-index:2; }
.form-card::before{ content:""; position:absolute; inset:0; background:url('https://res.cloudinary.com/dkvohw3k3/image/upload/f_auto,q_auto:good,w_780,h_900,c_fill,g_center/v1779106368/sff-taxi/hero-harbour-sunset.jpg') center/cover no-repeat; opacity:.055; z-index:0; pointer-events:none; }
.form-card > *{ position:relative; z-index:1; }

.form-step-label{ display:flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); margin-bottom:18px; }
.form-step-label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--gold-soft),transparent); }

/* ---- Address journey ---- */
.addrs{ position:relative; margin-bottom:14px; }
.addr-input{ display:flex; align-items:center; gap:13px; padding:15px 16px; background:#fff; border:1px solid var(--line); border-radius:13px; margin-bottom:9px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.addr-input:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.addr-input .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.addr-input.is-pickup .dot{ background:var(--gold); box-shadow:0 0 0 4px rgba(196,163,94,.16); }
.addr-input.is-dropoff .dot{ background:var(--ink); border-radius:2px; box-shadow:0 0 0 4px rgba(15,30,61,.06); }
.addr-input input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:var(--font-body); font-size:15px; color:var(--ink); }
.addr-input input::placeholder{ color:var(--ink-3); }
.addrs .addr-input.is-pickup::after{ content:""; position:absolute; left:20px; bottom:-5px; height:5px; border-left:2px dotted var(--line-dark); }

.field--error{ border-color:#C0392B !important; box-shadow:0 0 0 3px rgba(192,57,43,.08) !important; }
.field-error-msg{ color:#C0392B; font-size:12px; margin:-4px 2px 10px; }

/* ---- Now / Later segmented ---- */
.dt-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:14px 0 12px; padding:4px; background:var(--ground-2); border-radius:12px; }
.dt-toggle button{ padding:10px; border:0; border-radius:9px; background:transparent; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink-3); cursor:pointer; transition:all .18s var(--ease); }
.dt-toggle button.is-active{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,30,61,.13); }
.dt-when{ margin-bottom:12px; }
.dt-when input{ width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:#fff; font-family:var(--font-body); font-size:14px; color:var(--ink); }
.dt-when input:focus{ outline:0; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }

/* ---- Steppers ---- */
.stepper-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.stepper{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:13px; }
.stepper button{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line-dark); background:var(--ground); color:var(--ink); font-size:17px; line-height:1; cursor:pointer; transition:all .15s var(--ease); display:grid; place-items:center; }
.stepper button:hover{ border-color:var(--gold); color:var(--gold-2); }
.stepper > span{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; }
.stepper .stepper-val{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink); line-height:1; }
.stepper .stepper-label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* ---- Vehicle ---- */
.vehicle-row{ display:flex; align-items:center; gap:10px; padding:13px 15px; background:#fff; border:1px solid var(--line); border-radius:13px; margin-bottom:8px; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); }
.vehicle-row [data-veh-why]{ font-weight:500; }
.vehicle-row .why{ margin-left:auto; flex:0 0 auto; font-size:12px; font-weight:600; color:var(--gold-2); background:none; border:0; cursor:pointer; border-bottom:1px solid var(--gold-soft); }
.vehicle-expander{ margin-bottom:14px; }
.vehicle-expander summary{ list-style:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-3); padding:9px 4px; text-align:center; }
.vehicle-expander summary::-webkit-details-marker{ display:none; }
.vehicle-expander summary::after{ content:"  ›"; display:inline-block; transform:rotate(90deg); transition:transform .2s var(--ease); }
.vehicle-expander[open] summary::after{ transform:rotate(-90deg); }
.vehicle-options{ display:grid; gap:8px; padding:4px 0 2px; }
.vehicle-option{ display:flex; align-items:center; gap:12px; padding:13px 15px; background:#fff; border:1px solid var(--line); border-radius:13px; cursor:pointer; text-align:left; width:100%; font-family:var(--font-body); transition:all .15s var(--ease); }
.vehicle-option:hover{ border-color:var(--line-dark); }
.vehicle-option > span:first-child{ font-weight:600; font-size:14px; color:var(--ink); }
.vehicle-option .pax-cap{ font-size:11.5px; color:var(--ink-3); }
.vehicle-option .price{ margin-left:auto; font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ink); }
.vehicle-option.is-selected{ border-color:var(--gold); background:linear-gradient(180deg,#fff,var(--gold-soft)); box-shadow:0 0 0 2px var(--gold-soft); }
.vehicle-option.is-disabled{ opacity:.4; cursor:not-allowed; }

/* ---- Contact ---- */
.bf-contact{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.bf-contact .addr-input{ margin-bottom:0; }
@media (max-width:520px){ .bf-contact{ grid-template-columns:1fr; } }

/* ---- Lock badge ---- */
.lock-badge{ display:flex; align-items:center; gap:9px; padding:12px 15px; background:var(--gold-soft); border:1px solid rgba(196,163,94,.35); border-radius:12px; font-size:12.5px; font-weight:500; color:#6E5520; margin-bottom:16px; }

/* ---- CTA ---- */
.cta--gold{ width:100%; padding:16px; border:0; border-radius:13px; background:linear-gradient(180deg,#D6B06B,var(--gold) 52%,var(--gold-2)); color:#231807; font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:.01em; cursor:pointer; box-shadow:0 8px 22px -10px rgba(168,133,63,.75); transition:transform .12s var(--ease), box-shadow .2s var(--ease); }
.cta--gold:hover{ transform:translateY(-1px); box-shadow:0 12px 30px -10px rgba(168,133,63,.85); }
.cta--gold:active{ transform:translateY(0); }
.cta-microcopy{ font-size:11.5px; line-height:1.5; color:var(--ink-3); text-align:center; margin-top:11px; }

/* ---- Fare reveal ---- */
.bf-result{ margin-top:16px; padding:18px; border:1px solid var(--gold); border-radius:14px; background:linear-gradient(180deg,#fff,var(--gold-soft)); text-align:center; animation:bfReveal .42s var(--ease-out); }
@keyframes bfReveal{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.bf-result .bf-fare{ font-family:var(--font-display); font-size:42px; font-weight:600; line-height:1; color:var(--ink); }
.bf-result .bf-detail{ font-size:12px; color:var(--ink-3); margin-top:8px; }

/* ---- Popular strip ---- */
.popular-strip{ padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:12.5px; color:var(--ink-2); }
.popular-strip a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold); }

@media (max-width:380px){
  .stepper .stepper-label{ font-size:9px; }
  .stepper button{ width:26px; height:26px; font-size:15px; }
  .stepper .stepper-val{ font-size:18px; }
}

/* === Compact vehicle-class cards (mobile-tight, eye-catchy) 2026-05-31 === */
.veh-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:760px){ .veh-grid{ grid-template-columns:1fr; gap:10px; } }
.veh-mini{ position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; }
.veh-mini--featured{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft); }
.veh-mini-ribbon{ position:absolute; top:-10px; right:14px; background:var(--gold); color:#fff; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.veh-mini .tag{ font-size:10px; letter-spacing:.12em; }
.veh-mini-name{ font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--ink); margin:9px 0 1px; line-height:1.1; }
.veh-mini-eg{ font-size:12.5px; font-style:italic; color:var(--ink-3); margin-bottom:9px; }
.veh-mini-line{ font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:0 0 10px; }
.veh-mini-spec{ font-size:12.5px; color:var(--ink-3); }
.veh-mini-spec strong{ color:var(--ink-2); font-weight:600; }
.veh-upgrade-note{ margin:18px 0 0; padding:13px 16px; background:var(--gold-soft); border:1px solid rgba(196,163,94,.35); border-radius:12px; font-size:13px; line-height:1.55; color:#6E5520; }
.veh-upgrade-note strong{ color:var(--gold-2); }

/* Mobile form-first (operator-approved 2026-05-31): on phones the booking
   form sits above the tagline/trust copy. Desktop two-column unchanged. */
@media (max-width:880px){
  .hero--booking > .form-card{ order:1; }
  .hero--booking > .hero-brand{ order:2; }
}

/* Booking form: manual suburb + destination <select>s (Silver Service pattern)
   + clearly-visible card border (operator 2026-05-31). */
.form-card{ border:1.5px solid #D4DAE6; }
.addr-input select{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:22px;
}
.addr-input.is-suburb .dot{ opacity:.6; }
.addr-input.is-suburb::after, .addr-input.is-dropoff::after{
  content:""; position:absolute; right:18px; top:50%;
  width:7px; height:7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}