/* ============================================================
   DESIGN TOKEN SYSTEM — Brand → Alias → Mapped → Responsive
   ============================================================ */

/* --- COLLECTION 1: BRAND (raw hex values only) --- */
:root {
  /* Brand: Navy scale */
  --brand-navy-50:  #e8eff4;
  --brand-navy-100: #c2d4e0;
  --brand-navy-200: #97b5c9;
  --brand-navy-300: #6b96b2;
  --brand-navy-400: #4a7d9f;
  --brand-navy-500: #2a648c;
  --brand-navy-600: #1a4e72;
  --brand-navy-700: #0d3758;
  --brand-navy-800: #01334e;
  --brand-navy-900: #001e30;
  --brand-navy-950: #000f18;

  /* Brand: Orange scale */
  --brand-orange-50:  #fdf3ea;
  --brand-orange-100: #fae3c7;
  --brand-orange-200: #f5c88e;
  --brand-orange-300: #f0aa56;
  --brand-orange-400: #e17e29;
  --brand-orange-500: #c4641a;
  --brand-orange-600: #a34f10;
  --brand-orange-700: #7e3c09;
  --brand-orange-800: #5a2a04;
  --brand-orange-900: #3a1a00;

  /* Brand: Warm neutral scale */
  --brand-warm-50:  #fff8f3;
  --brand-warm-100: #faf2eb;
  --brand-warm-200: #f5e9df;
  --brand-warm-300: #eee7e0;
  --brand-warm-400: #e0d5ca;
  --brand-warm-500: #c2c7ce;
  --brand-warm-600: #9ba3ad;
  --brand-warm-700: #6b7280;
  --brand-warm-800: #42474d;
  --brand-warm-900: #1e1b17;

  /* Brand: White / Black */
  --brand-white: #ffffff;
  --brand-black: #000000;

  /* Brand: Typography font strings */
  --brand-font-display: 'Poppins', sans-serif;
  --brand-font-heading: 'Poppins', sans-serif;
  --brand-font-body:    'Poppins', sans-serif;

  /* Brand: Font weight strings */
  --brand-weight-regular:   400;
  --brand-weight-medium:    500;
  --brand-weight-semibold:  600;
  --brand-weight-bold:      700;
  --brand-weight-extrabold: 800;
}

/* --- COLLECTION 2: ALIAS (semantic meaning assigned here) --- */
:root {
  /* Primary = Navy */
  --alias-primary-subtle:   var(--brand-navy-50);
  --alias-primary-muted:    var(--brand-navy-200);
  --alias-primary-default:  var(--brand-navy-800);
  --alias-primary-strong:   var(--brand-navy-900);

  /* Information / Accent = Orange */
  --alias-accent-subtle:    var(--brand-orange-100);
  --alias-accent-muted:     var(--brand-orange-200);
  --alias-accent-default:   var(--brand-orange-400);
  --alias-accent-strong:    var(--brand-orange-500);

  /* Neutral Light = Warm scale */
  --alias-neutral-page:     var(--brand-warm-50);
  --alias-neutral-surface:  var(--brand-warm-100);
  --alias-neutral-raised:   var(--brand-warm-300);
  --alias-neutral-muted:    var(--brand-warm-700);
  --alias-neutral-subtle:   var(--brand-warm-500);

  /* Foundations */
  --alias-white: var(--brand-white);
  --alias-black: var(--brand-black);

  /* Typography aliases */
  --alias-font-display: var(--brand-font-display);
  --alias-font-heading: var(--brand-font-heading);
  --alias-font-body:    var(--brand-font-body);
}

/* --- COLLECTION 3: MAPPED (component-consumable tokens) --- */
:root {
  /* Surface */
  --surface-page:          var(--alias-neutral-page);
  --surface-card:          var(--alias-white);
  --surface-card-warm:     var(--alias-neutral-surface);
  --surface-input:         var(--alias-neutral-raised);
  --surface-input-focus:   var(--alias-white);
  --surface-primary:       var(--alias-primary-default);
  --surface-accent:        var(--alias-accent-default);
  --surface-selected-card: var(--alias-neutral-surface);
  --surface-overlay-dark:  var(--alias-primary-strong);
  --surface-header:        rgba(255,255,255,0.92);
  --surface-utility:       var(--alias-primary-default);
  --surface-pill:          rgba(233,225,218,1);
  --surface-pill-active:   var(--alias-white);
  --surface-step-done:     var(--alias-primary-default);
  --surface-step-active:   var(--alias-accent-default);
  --surface-step-todo:     var(--alias-neutral-raised);

  /* Text */
  --text-hero:         var(--alias-primary-strong);
  --text-heading:      var(--alias-primary-strong);
  --text-body:         var(--brand-warm-800);
  --text-secondary:    var(--brand-warm-800);
  --text-placeholder:  rgba(66,71,77,0.4);
  --text-caption:      var(--brand-warm-700);
  --text-muted:        rgba(66,71,77,0.5);
  --text-on-primary:   var(--alias-white);
  --text-on-accent:    var(--alias-white);
  --text-on-dark:      var(--alias-white);
  --text-accent:       var(--alias-accent-default);
  --text-accent-label: var(--alias-accent-default);
  --text-primary-link: var(--alias-primary-default);
  --text-utility-bar:  var(--alias-white);
  --text-label:        var(--brand-warm-800);
  --text-label-upper:  var(--brand-warm-800);
  --text-price:        var(--alias-accent-default);
  --text-step-done:    var(--alias-white);
  --text-step-active:  var(--alias-white);
  --text-step-todo:    var(--brand-warm-700);

  /* Icon */
  --icon-default:  var(--brand-warm-800);
  --icon-muted:    var(--brand-warm-700);
  --icon-accent:   var(--alias-accent-default);
  --icon-on-dark:  var(--alias-white);
  --icon-on-warm:  var(--brand-warm-800);

  /* Border */
  --border-default:   rgba(194,199,206,0.3);
  --border-strong:    rgba(194,199,206,0.6);
  --border-focus:     var(--alias-primary-default);
  --border-selected:  var(--alias-accent-default);
  --border-card:      rgba(194,199,206,0.15);
  --border-section:   rgba(194,199,206,0.2);
  --border-input:     transparent;

  /* Component: Button tokens */
  --btn-primary-bg:        var(--surface-primary);
  --btn-primary-bg-hover:  var(--brand-navy-900);
  --btn-primary-text:      var(--text-on-primary);
  --btn-ghost-border:      var(--border-strong);
  --btn-ghost-text:        var(--text-heading);
  --btn-ghost-hover-bg:    var(--alias-neutral-surface);

  /* Component: Input tokens */
  --input-bg:             var(--surface-input);
  --input-bg-focus:       var(--surface-input-focus);
  --input-border:         var(--border-input);
  --input-border-focus:   var(--border-focus);
  --input-text:           var(--text-heading);
  --input-placeholder:    var(--text-placeholder);
  --input-label-color:    var(--text-label);
  --input-label-size:     11px;
  --input-label-weight:   700;
  --input-label-spacing:  0.08em;
  --input-height:         42px;
  --input-radius:         8px;
  --input-padding-x:      14px;
  --input-font-size:      14px;

  /* Component: Card tokens */
  --card-bg:         var(--surface-card);
  --card-bg-warm:    var(--surface-card-warm);
  --card-radius:     14px;
  --card-padding:    24px;
  --card-shadow:     0 20px 40px rgba(47,19,0,0.06);
  --card-border:     var(--border-card);

  /* Component: Progress tokens */
  --progress-track-bg:     var(--brand-warm-300);
  --progress-fill-start:   var(--brand-navy-900);
  --progress-fill-end:     var(--alias-accent-default);
  --progress-height:       6px;
  --progress-radius:       9999px;

  /* Component: Badge tokens */
  --badge-bg:      rgba(255,255,255,0.1);
  --badge-text:    var(--alias-white);
  --badge-radius:  4px;
}

/* --- COLLECTION 4: RESPONSIVE TYPOGRAPHY --- */
:root {
  /* Hero */
  --type-hero-size:    clamp(22px, 2.6vw, 28px);
  --type-hero-lh:      1.2;
  --type-hero-spacing: -0.03em;
  --type-hero-para-sp: 0;

  /* H1 */
  --type-h1-size:    24px;
  --type-h1-lh:      1.2;
  --type-h1-spacing: -0.02em;

  /* H2 */
  --type-h2-size:    18px;
  --type-h2-lh:      1.33;
  --type-h2-spacing: -0.01em;

  /* H3 */
  --type-h3-size:    16px;
  --type-h3-lh:      1.5;
  --type-h3-spacing: 0;

  /* H4 */
  --type-h4-size:    16px;
  --type-h4-lh:      1.5;

  /* H5 */
  --type-h5-size:    14px;
  --type-h5-lh:      1.43;

  /* H6 */
  --type-h6-size:    12px;
  --type-h6-lh:      1.33;

  /* Paragraph LG */
  --type-para-lg-size:    17px;
  --type-para-lg-lh:      1.65;
  --type-para-lg-para-sp: 0;

  /* Paragraph MD (base — min 16px for accessibility) */
  --type-para-md-size:    16px;  /* ACCESSIBILITY: min 16px, non-negotiable */
  --type-para-md-lh:      1.625;
  --type-para-md-para-sp: 0;

  /* Paragraph SM */
  --type-para-sm-size:    14px;
  --type-para-sm-lh:      1.57;
  --type-para-sm-para-sp: 0;

  /* Caption */
  --type-caption-size:    12px;
  --type-caption-lh:      1.33;
  --type-caption-spacing: 0.1em;

  /* Spacing scale */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;

  /* Radius scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
}

/* ============================================================
   BASE RESET & GLOBALS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--alias-font-body);
  font-size: var(--type-para-md-size);
  line-height: var(--type-para-md-lh);
  color: var(--text-body);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
input, select, button, textarea { font-family: inherit; }

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utility-bar {
  background: var(--surface-utility);
  padding: 8px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.utility-bar__contact {
  display: flex;
  align-items: center;
  gap: var(--sp-20);
}
.utility-bar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-caption-size);
  color: var(--text-utility-bar);
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-medium);
  text-decoration: none;
}
a.utility-bar__item:hover {
  color: var(--alias-white);
}
.utility-bar__item svg { width: 11px; height: 11px; fill: rgba(255,255,255,0.7); flex-shrink: 0; }
.utility-bar__links { display: flex; gap: var(--sp-20); }
.utility-bar__links a {
  font-size: var(--type-caption-size);
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-medium);
  transition: color .2s;
}
.utility-bar__links a:hover { color: var(--alias-white); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  background: var(--surface-header);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-card);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar__logo {
  font-family: var(--alias-font-heading);
  font-weight: var(--brand-weight-extrabold);
  font-size: 20px;
  color: var(--text-heading);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.navbar__logo span { color: var(--alias-accent-default); }
.navbar__nav { display: flex; gap: var(--sp-28); }
.navbar__nav a {
  font-size: var(--type-para-sm-size);
  font-weight: var(--brand-weight-semibold);
  color: var(--text-heading);
  text-decoration: none;
  transition: color .2s;
}
.navbar__nav a:hover { color: var(--alias-accent-default); }
.navbar__actions { display: flex; gap: var(--sp-12); align-items: center; }

/* Button components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  font-family: var(--alias-font-heading);
  font-weight: var(--brand-weight-bold);
  font-size: var(--type-para-sm-size);
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  border: none;
  line-height: 1;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--btn-ghost-border);
  color: var(--btn-ghost-text);
  padding: 9px 18px;
}
.btn--ghost:hover { background: var(--btn-ghost-hover-bg); }
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 10px 22px;
  box-shadow: 0 10px 24px rgba(1,51,78,0.18);
}
.btn--primary:hover { background: var(--btn-primary-bg-hover); }
.btn--primary-lg {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 14px 26px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  width: 100%;
  box-shadow: 0 20px 40px rgba(47,19,0,0.1);
}
.btn--primary-lg:hover { background: var(--btn-primary-bg-hover); }
.btn--ghost-sm {
  background: transparent;
  border: none;
  color: var(--text-body);
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--type-para-sm-size);
  cursor: pointer;
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-bold);
}
.btn--ghost-sm svg { width: 12px; height: 12px; fill: var(--text-body); }
.btn--ghost-sm:hover { color: var(--alias-accent-default); }
.btn--cta-round {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--alias-font-heading);
  font-weight: var(--brand-weight-bold);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(47,19,0,0.1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  white-space: nowrap;
}
.btn--cta-round:hover { background: var(--btn-primary-bg-hover); }
.btn--cta-round svg { width: 14px; height: 14px; fill: var(--alias-white); }

.field__optional {
  font-weight: var(--brand-weight-medium);
  font-size: 12px;
  color: var(--text-caption);
  text-transform: none;
}

.wizard-btn-primary {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 9999px;
  border: none;
  background: #01334e;
  color: #fff;
  font-family: var(--alias-font-heading);
  font-weight: var(--brand-weight-semibold);
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(1, 51, 78, 0.28);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.wizard-btn-primary:hover {
  background: #001e30;
  color: #fff;
  box-shadow: 0 8px 24px rgba(1, 51, 78, 0.32);
}
.wizard-btn-primary svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}
.wizard-btn-primary--success {
  background: #15803d;
  box-shadow: 0 6px 20px rgba(21, 128, 61, 0.28);
}
.wizard-btn-primary--success:hover {
  background: #166534;
  color: #fff;
}

.step-actions--wizard-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
  width: 100%;
}
.step-actions--wizard-footer .btn--ghost-sm {
  order: 1;
  justify-content: flex-start;
}
.step-actions--wizard-footer .wizard-btn-primary {
  order: 2;
}

/* ============================================================
   FORM SHELL / PAGE LAYOUT / VERTICAL STEPPER
   ============================================================ */
.form-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-20) var(--sp-32) var(--sp-64);
}

.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-40);
  align-items: flex-start;
}

.stepper-sidebar {
  position: sticky;
  top: var(--sp-24);
}
.form-main {
  min-width: 0;
}

.progress-wrap {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 16px);
  padding: var(--sp-20);
}
.progress-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}
.progress-label {
  font-size: var(--type-para-sm-size);
  font-weight: var(--brand-weight-bold);
  color: var(--text-heading);
  font-family: var(--alias-font-body);
}
.progress-step-counter {
  font-size: var(--type-caption-size);
  color: var(--text-caption);
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--type-caption-spacing);
}
.progress-bar-track {
  height: var(--progress-height);
  background: var(--progress-track-bg);
  border-radius: var(--progress-radius);
  overflow: hidden;
  margin-bottom: var(--sp-20);
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--progress-radius);
  background: linear-gradient(to right, var(--progress-fill-start), var(--progress-fill-end));
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
}

/* Vertical step list */
.step-dots--vertical {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.step-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-8) 0;
  cursor: pointer;
  transition: all .25s ease;
}
.step-row + .step-row::before {
  content: "";
  position: absolute;
  left: 15px;
  top: -12px;
  width: 2px;
  height: 20px;
  background: var(--border-default);
  z-index: 0;
}
.step-row.is-done + .step-row::before,
.step-row.is-active + .step-row::before {
  background: var(--alias-accent-default);
}
.step-row__label {
  font-size: var(--type-para-sm-size, 13px);
  color: var(--text-muted);
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-semibold);
  letter-spacing: 0.02em;
  transition: color .25s ease;
}
.step-row.is-active .step-row__label {
  color: var(--alias-accent-default);
  font-weight: var(--brand-weight-bold);
}
.step-row.is-done .step-row__label {
  color: var(--text-heading);
}
.step-row:hover .step-row__label {
  color: var(--text-heading);
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-caption-size);
  font-weight: var(--brand-weight-bold);
  font-family: var(--alias-font-body);
  transition: all .3s;
  cursor: pointer;
  letter-spacing: var(--type-caption-spacing);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.step-dot--done {
  background: var(--surface-step-done);
  color: var(--text-step-done);
}
.step-dot--active {
  background: var(--surface-step-active);
  color: var(--text-step-active);
  box-shadow: 0 4px 12px rgba(225,126,41,0.4);
}
.step-dot--todo {
  background: var(--surface-step-todo);
  color: var(--text-step-todo);
}

/* ============================================================
   STEP PANEL
   ============================================================ */
.step-panel { display: none; animation: stepIn .35s ease both; }
.step-panel.is-active { display: block; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-heading {
  margin-top: 0;
  margin-bottom: var(--sp-20);
}
.step-heading__eyebrow { display: none; }
.step-heading__title {
  font-family: var(--alias-font-display);
  font-size: var(--type-hero-size);
  font-weight: var(--brand-weight-extrabold);
  color: var(--text-hero);
  letter-spacing: var(--type-hero-spacing);
  line-height: var(--type-hero-lh);
}
.step-heading__title em {
  font-style: normal;
  color: var(--alias-accent-default);
}
.step-heading__sub {
  font-size: var(--type-para-sm-size);
  color: var(--text-caption);
  margin-top: var(--sp-6);
  font-family: var(--alias-font-body);
}

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
}
.card + .card { margin-top: var(--sp-20); }

.card__section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-16);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--border-section);
}
.card__section-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card__section-icon--navy { background: var(--surface-primary); }
.card__section-icon--orange { background: var(--alias-accent-default); }
.card__section-icon svg { width: 14px; height: 14px; fill: var(--alias-white); }
.card__section-title {
  font-family: var(--alias-font-heading);
  font-size: 16px;
  font-weight: var(--brand-weight-bold);
  color: var(--text-heading);
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field-grid { display: grid; gap: var(--sp-16); }
.field-grid--2 { grid-template-columns: 1fr 1fr; }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.field__label {
  font-size: var(--input-label-size);
  font-weight: var(--input-label-weight);
  color: var(--input-label-color);
  letter-spacing: var(--input-label-spacing);
  text-transform: uppercase;
  font-family: var(--alias-font-body);
}
.field__hint {
  font-size: 10px;
  color: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-semibold);
  margin-top: var(--sp-4);
}
.field__hint--accent { color: var(--alias-accent-default); }

.form-input,
.form-select {
  height: var(--input-height);
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: 0 var(--input-padding-x);
  font-family: var(--alias-font-body);
  font-size: var(--input-font-size);
  color: var(--input-text);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder { color: var(--input-placeholder); }
.form-input:focus,
.form-select:focus {
  border-color: var(--input-border-focus);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(1,51,78,0.08);
}
.form-select {
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2342474d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.form-select option { background: var(--alias-white); color: var(--text-body); }

.input-with-icon { position: relative; }
.input-with-icon .form-input { padding-left: 38px; }
.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  fill: var(--icon-muted);
}

/* ============================================================
   TWO-COLUMN DEPARTURE / RETURN SPLIT
   ============================================================ */
.flight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.flight-col { padding: 0; }
.flight-col:first-child { padding-right: var(--sp-24); }
.flight-col:last-child {
  padding-left: var(--sp-24);
  border-left: 1px solid var(--border-section);
}
.flight-col__label {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-16);
}
.flight-col__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flight-col__icon--navy { background: var(--surface-primary); }
.flight-col__icon--orange { background: var(--alias-accent-default); }
.flight-col__icon svg { width: 14px; height: 14px; fill: var(--alias-white); }
.flight-col__title {
  font-family: var(--alias-font-heading);
  font-size: 15px;
  font-weight: var(--brand-weight-bold);
  color: var(--text-heading);
}

/* ============================================================
   OPTION CARDS (Parking type)
   ============================================================ */
.option-card {
  background: var(--surface-card-warm);
  border-radius: var(--radius-md);
  padding: var(--sp-16);
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: border-color .2s, background .2s;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.option-card:hover { border-color: rgba(225,126,41,0.35); }
.option-card.selected { border-color: var(--border-selected); }
.option-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.option-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-8);
}
.option-card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--alias-neutral-raised);
  font-size: 18px;
}
.option-card__price-block { text-align: right; }
.option-card__price {
  font-family: var(--alias-font-heading);
  font-size: 17px;
  font-weight: var(--brand-weight-extrabold);
  color: var(--text-heading);
}
.option-card__per {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--alias-font-body);
}
.option-card__name {
  font-family: var(--alias-font-heading);
  font-size: 15px;
  font-weight: var(--brand-weight-semibold);
  color: var(--text-heading);
  padding-top: var(--sp-8);
}
.option-card__desc {
  font-size: 13px;
  color: var(--text-caption);
  font-family: var(--alias-font-body);
  line-height: 1.5;
}

/* ============================================================
   ACCOUNT CARD (Step 4)
   ============================================================ */
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-20);
  align-items: start;
}
.account-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-card);
  box-shadow: var(--card-shadow);
  padding: var(--sp-24) var(--sp-20) var(--sp-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-16);
}
.account-card__title {
  font-family: var(--alias-font-heading);
  font-size: 20px;
  font-weight: var(--brand-weight-extrabold);
  color: var(--text-heading);
  letter-spacing: -0.01em;
}
.account-card__sub {
  font-size: 13px;
  color: var(--text-caption);
  max-width: 300px;
  line-height: 1.5;
}
.account-card form { width: 100%; }
.account-card .field-grid { text-align: left; }
.account-card__footer {
  font-size: 13px;
  color: var(--text-caption);
  display: flex;
  gap: 4px;
  justify-content: center;
}
.account-card__footer a {
  color: var(--alias-accent-default);
  font-weight: var(--brand-weight-bold);
  text-decoration: none;
}
.account-card__guest-link {
  color: var(--alias-accent-default);
  font-weight: var(--brand-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.account-card__guest-link:hover { color: var(--alias-accent-strong); }
.guest-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-card);
  box-shadow: var(--card-shadow);
  padding: var(--sp-24) var(--sp-20);
}
.guest-card__title {
  font-family: var(--alias-font-heading);
  font-size: 20px;
  font-weight: var(--brand-weight-extrabold);
  color: var(--text-heading);
  margin-bottom: var(--sp-6);
}
.guest-card__sub {
  font-size: 13px;
  color: var(--text-caption);
  margin-bottom: var(--sp-16);
  line-height: 1.5;
}
.password-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-8);
}
.password-row__forgot {
  font-size: var(--type-caption-size);
  color: var(--alias-accent-default);
  font-weight: var(--brand-weight-semibold);
  text-decoration: none;
  font-family: var(--alias-font-body);
}

/* ============================================================
   CHECKBOX ROW
   ============================================================ */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-16) 0;
}
.form-checkbox {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all .2s;
  position: relative;
}
.form-checkbox:checked {
  background: var(--surface-primary);
  border-color: var(--surface-primary);
}
.form-checkbox:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 3.5l3 3 5-5' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============================================================
   SUMMARY CARDS (Step 5 bento)
   ============================================================ */
.summary-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
}
.summary-bento-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: var(--sp-16);
  border: 1px solid var(--border-card);
  box-shadow: var(--card-shadow);
}
.summary-bento-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-12);
}
.summary-bento-card__top svg { width: 18px; height: 18px; fill: var(--icon-muted); }
.summary-bento-card__edit {
  font-size: var(--type-caption-size);
  color: var(--alias-primary-default);
  font-weight: var(--brand-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--type-caption-spacing);
  font-family: var(--alias-font-body);
  background: none;
  border: none;
  cursor: pointer;
}
.summary-bento-card__section {
  font-size: var(--type-caption-size);
  font-weight: var(--brand-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--type-caption-spacing);
  color: var(--text-caption);
  font-family: var(--alias-font-body);
  margin-bottom: var(--sp-4);
}
.summary-bento-card__main {
  font-family: var(--alias-font-heading);
  font-size: 15px;
  font-weight: var(--brand-weight-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-2);
}
.summary-bento-card__sub {
  font-size: 13px;
  color: var(--text-caption);
  font-family: var(--alias-font-body);
}

/* ============================================================
   PAYMENT SECTION
   ============================================================ */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-20);
  align-items: start;
}
.review-grid__sticky {
  position: sticky;
  top: 88px;
}
.payment-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-card);
  box-shadow: var(--card-shadow);
  padding: var(--sp-20);
}
.payment-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  margin-bottom: var(--sp-16);
}
.payment-card__header svg { width: 16px; height: 16px; fill: var(--icon-accent); }
.payment-card__title {
  font-family: var(--alias-font-heading);
  font-size: 16px;
  font-weight: var(--brand-weight-bold);
  color: var(--text-heading);
}

.payment-card--success-theme {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 8px 28px rgba(21, 128, 61, 0.08);
}
.payment-card--success-theme .payment-card__header--success svg {
  fill: #15803d;
}
.payment-card--success-theme .payment-card__title {
  color: #166534;
}
.payment-card__lead {
  margin: 0 0 var(--sp-16);
  font-size: 14px;
  line-height: 1.55;
  color: #166534;
  text-transform: none;
  font-weight: var(--brand-weight-medium);
}
.payment-card__fineprint {
  margin: var(--sp-12) 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #15803d;
  opacity: 0.9;
  text-transform: none;
  text-align: center;
}
.card-badges { display: flex; gap: 6px; margin-bottom: var(--sp-16); }
.card-badge {
  background: var(--surface-card-warm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: var(--brand-weight-bold);
  color: var(--text-caption);
  font-family: var(--alias-font-body);
  letter-spacing: 0.05em;
}

.booking-summary-card {
  background: var(--surface-card-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-16) var(--sp-20) var(--sp-20);
}
.booking-summary-card__title {
  font-family: var(--alias-font-heading);
  font-size: 16px;
  font-weight: var(--brand-weight-bold);
  color: var(--text-heading);
  margin-bottom: 14px;
}
.summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border-section);
  font-size: 13px;
}
.summary-line__label { color: var(--text-caption); font-family: var(--alias-font-body); }
.summary-line__val { font-weight: var(--brand-weight-bold); color: var(--text-heading); font-family: var(--alias-font-body); }
.summary-line__val--free { color: var(--alias-accent-default); }
.summary-total-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: var(--sp-16);
  margin-top: var(--sp-4);
}
.summary-total-row__label { font-size: 13px; color: var(--text-caption); font-family: var(--alias-font-body); }
.summary-total-row__label--sentence {
  font-size: 15px;
  font-weight: var(--brand-weight-bold);
  color: var(--text-heading);
  text-transform: none;
  letter-spacing: 0;
}
.summary-total-row__amount {
  font-family: var(--alias-font-heading);
  font-size: 22px;
  font-weight: var(--brand-weight-extrabold);
  color: var(--alias-accent-default);
  line-height: 1;
}
.summary-total-row__amount sup {
  font-size: 12px;
  vertical-align: super;
}
.summary-note {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--sp-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-semibold);
  line-height: 1.5;
}

/* ============================================================
   STEP ACTIONS
   ============================================================ */
.step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-20);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--border-section);
}
.step-actions--right { justify-content: flex-end; }

/* ============================================================
   SUCCESS SCREEN
   ============================================================ */
.success-screen {
  text-align: center;
  padding: var(--sp-48) var(--sp-24);
  max-width: 520px;
  margin: 0 auto;
}
.success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-16);
}
.success-icon svg { width: 26px; height: 26px; fill: var(--alias-white); }
.success-title {
  font-family: var(--alias-font-display);
  font-size: 24px;
  font-weight: var(--brand-weight-extrabold);
  color: var(--text-heading);
  margin-bottom: var(--sp-8);
}
.success-sub {
  font-size: 14px;
  color: var(--text-caption);
  line-height: 1.6;
  margin-bottom: var(--sp-24);
}
.confirmation-id {
  background: var(--surface-card-warm);
  border-radius: var(--radius-md);
  padding: var(--sp-20);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-32);
}
.confirmation-id__label {
  font-size: var(--type-caption-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-bold);
}
.confirmation-id__value {
  font-family: var(--alias-font-heading);
  font-size: 18px;
  font-weight: var(--brand-weight-extrabold);
  color: var(--alias-accent-default);
  letter-spacing: 0.05em;
}

/* Secure note */
.secure-note {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: var(--sp-12);
}
.secure-note svg { width: 12px; height: 12px; fill: var(--icon-muted); }
.secure-note span {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--alias-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--brand-weight-semibold);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--surface-primary);
  padding: var(--sp-56) var(--sp-40) var(--sp-32);
  margin-top: var(--sp-56);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--sp-48);
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: var(--sp-40);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo {
  font-family: var(--alias-font-heading);
  font-size: 18px;
  font-weight: var(--brand-weight-extrabold);
  color: var(--alias-white);
  margin-bottom: var(--sp-12);
}
.footer-logo span { color: var(--alias-accent-default); }
.footer-desc {
  font-size: var(--type-para-sm-size);
  color: rgba(148,163,184,1);
  line-height: 1.7;
  margin-bottom: var(--sp-20);
}
.footer-social { display: flex; gap: var(--sp-12); }
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.footer-social a:hover { background: rgba(255,255,255,0.2); }
.footer-social svg { width: 14px; height: 14px; fill: var(--alias-white); }
.footer-col-title {
  font-size: var(--type-h4-size);
  font-weight: var(--brand-weight-bold);
  color: var(--alias-white);
  margin-bottom: var(--sp-20);
  font-family: var(--alias-font-heading);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--sp-12); }
.footer-links a {
  font-size: var(--type-para-sm-size);
  color: rgba(148,163,184,1);
  text-decoration: none;
  font-family: var(--alias-font-body);
  transition: color .2s;
}
.footer-links a:hover { color: var(--alias-white); }
.footer-newsletter-desc {
  font-size: var(--type-para-sm-size);
  color: rgba(148,163,184,1);
  margin-bottom: var(--sp-16);
  line-height: 1.6;
}
.footer-email-row { display: flex; }
.footer-email-row input {
  flex: 1;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 0 14px;
  font-size: var(--type-para-sm-size);
  color: var(--alias-white);
  font-family: var(--alias-font-body);
  outline: none;
}
.footer-email-row input::placeholder { color: rgba(107,114,128,1); }
.footer-email-row button {
  background: var(--alias-accent-default);
  color: var(--alias-white);
  border: none;
  padding: 0 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--alias-font-heading);
  font-weight: var(--brand-weight-bold);
  font-size: var(--type-para-sm-size);
  cursor: pointer;
  transition: background .2s;
}
.footer-email-row button:hover { background: var(--alias-accent-strong); }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: var(--sp-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom span {
  font-size: var(--type-caption-size);
  color: rgba(100,116,139,1);
  font-family: var(--alias-font-body);
}
.footer-bottom-links { display: flex; gap: var(--sp-20); }
.footer-bottom-links a {
  font-size: var(--type-caption-size);
  color: rgba(100,116,139,1);
  text-decoration: none;
  font-family: var(--alias-font-body);
  font-weight: var(--brand-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   VALIDATION — error states + clickable step dots
   ============================================================ */
.field__error {
  display: none;
  margin-top: 4px;
  font-family: var(--alias-font-body);
  font-size: 11px;
  font-weight: var(--brand-weight-semibold);
  color: #dc2626;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.form-input.is-invalid,
.form-select.is-invalid {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}

/* Step dots — clickable affordance */
.step-dot {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.step-dot--done,
.step-dot--active {
  cursor: pointer;
}
.step-dot--done:hover,
.step-dot--active:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.step-dot--todo {
  cursor: not-allowed;
}

/* Required field asterisk */
.required-mark {
  color: #dc2626;
  font-weight: var(--brand-weight-bold);
  margin-left: 2px;
}

/* Checkbox-row — two-line stacked label + hint */
.checkbox-row {
  align-items: flex-start;
  padding: var(--sp-8) 0;
  cursor: pointer;
}
.checkbox-row__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.checkbox-row__label {
  font-family: var(--alias-font-heading);
  font-size: 14px;
  font-weight: var(--brand-weight-bold);
  color: var(--text-heading);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.checkbox-row__hint {
  font-family: var(--alias-font-body);
  font-size: 12.5px;
  font-weight: var(--brand-weight-regular);
  color: var(--text-caption);
  line-height: 1.5;
}

/* ============================================================
   RESPONSIVE LAYOUT
   Breakpoints:
     ≤ 1199px : Tablet landscape / small desktop
     ≤ 1023px : Tablet portrait
     ≤ 767px  : Mobile landscape
     ≤ 480px  : Mobile portrait
   ============================================================ */

/* -------- TABLET LANDSCAPE / SMALL DESKTOP (≤ 1199px) -------- */
@media (max-width: 1199px) {
  .form-shell {
    max-width: 100%;
    padding: var(--sp-20) var(--sp-24) var(--sp-48);
  }
  .page-layout {
    grid-template-columns: 210px 1fr;
    gap: var(--sp-28);
  }
  .navbar {
    padding: var(--sp-16) var(--sp-24);
  }
  .navbar__nav { gap: var(--sp-20); }
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--sp-28);
  }
  .review-grid {
    grid-template-columns: 1fr 360px;
  }
}

/* -------- TABLET PORTRAIT (≤ 1023px) -------- */
@media (max-width: 1023px) {
  /* Utility bar — hide the left contact block, keep right links */
  .utility-bar { padding: var(--sp-4) var(--sp-20); }
  .utility-bar__contact { display: none; }

  /* Navbar — hide center nav, keep logo + actions */
  .navbar__nav { display: none; }
  .navbar__actions .btn--ghost { display: none; }

  /* Form shell slimmer */
  .form-shell { padding: var(--sp-20) var(--sp-20) var(--sp-40); }

  /* Collapse sidebar: stack above form as a horizontal stepper */
  .page-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }
  .stepper-sidebar {
    position: static;
  }
  .progress-wrap { padding: var(--sp-16) var(--sp-20); }
  .step-dots--vertical {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--sp-8);
  }
  .step-row { flex-direction: column; padding: 0; gap: var(--sp-6); flex: 1; align-items: center; text-align: center; }
  .step-row__label { font-size: 11px; }
  .step-row + .step-row::before {
    left: auto;
    right: calc(50% + 20px);
    top: 14px;
    width: calc(100% - 40px);
    height: 2px;
  }

  /* Review step: stack, and put Payment FIRST, Summary + editable cards below */
  .review-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }
  .review-grid__sticky {
    position: static;
    order: 1;
  }
  .review-grid--stack > div:first-child {
    order: 2;
  }

  /* Account grid stacks */
  .account-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }
  .account-card {
    padding: var(--sp-20) var(--sp-20);
    gap: var(--sp-16);
  }
  .guest-card { padding: var(--sp-20) var(--sp-20); }

  /* Step 3 row — stack */
  .step3-row {
    grid-template-columns: 1fr !important;
  }

  /* Summary bento stays 2×2 here (looks fine at tablet width) */
  .summary-bento { gap: var(--sp-16); }

  /* Footer — 2 columns */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-32);
  }

  /* Step heading slightly smaller */
  .step-heading__title { font-size: clamp(20px, 3.4vw, 24px); }

  /* Inputs slightly shorter on tablet */
  :root { --input-height: 40px; --card-padding: 20px; }
}

/* -------- MOBILE LANDSCAPE (≤ 767px) -------- */
@media (max-width: 767px) {
  /* Hide utility bar completely to save vertical space */
  .utility-bar { display: none; }

  .navbar {
    padding: var(--sp-12) var(--sp-16);
  }
  .navbar__logo { font-size: 20px; }
  .navbar__actions .btn--primary { padding: 8px 16px; font-size: 13px; }

  .form-shell { padding: var(--sp-20) var(--sp-16) var(--sp-32); }

  /* Progress bar — compact */
  .progress-wrap { padding: var(--sp-14) var(--sp-16); }
  .progress-meta { margin-bottom: var(--sp-8); }
  .step-dot { width: 28px; height: 28px; font-size: 11px; }
  .step-row__label { font-size: 10px; }
  .step-row + .step-row::before { top: 13px; }

  /* Headings */
  .step-heading { margin-bottom: var(--sp-16); }
  .step-heading__eyebrow { font-size: 10px; }
  .step-heading__title { font-size: clamp(20px, 5vw, 24px); line-height: 1.2; }
  .step-heading__sub { font-size: 13px; }

  /* Cards — tighter padding */
  .card {
    padding: var(--sp-16) 14px;
    border-radius: var(--radius-md);
  }

  /* Inputs a hair larger for finger tap on mobile */
  :root { --input-height: 42px; --card-padding: 16px; }
  .form-input, .form-select { font-size: 15px; }

  /* Flight grid — stack departure & return */
  .flight-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }
  .flight-col:first-child { padding-right: 0; padding-bottom: var(--sp-20); border-bottom: 1px solid var(--border-section); }
  .flight-col:last-child { padding-left: 0; padding-top: var(--sp-20); border-left: none; }

  /* All 2-column field grids collapse */
  .field-grid--2 { grid-template-columns: 1fr; }

  /* Summary bento — stack to single column */
  .summary-bento {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }
  .summary-bento-card { padding: var(--sp-20) var(--sp-20) var(--sp-16); }

  /* Booking summary card — slimmer padding */
  .booking-summary-card { padding: var(--sp-20) var(--sp-20) var(--sp-24); }

  /* Step actions — stack buttons vertically on tight screens */
  .step-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--sp-12);
    margin-top: var(--sp-20);
    padding-top: var(--sp-16);
  }
  .step-actions .btn--cta-round { width: 100%; justify-content: center; }
  .step-actions .btn--ghost-sm { justify-content: center; }

  /* Account cards — tighter */
  .account-card {
    padding: var(--sp-24) var(--sp-20);
    text-align: left;
    align-items: stretch;
  }
  .account-card__title, .guest-card__title { font-size: 18px; text-align: center; }
  .account-card__sub, .guest-card__sub { text-align: center; max-width: 100%; font-size: 13px; }
  .guest-card { padding: var(--sp-20) var(--sp-16); }

  /* Payment card — tighter */
  .payment-card { padding: var(--sp-20) var(--sp-16); }
  .payment-card__title { font-size: 16px; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-24);
    padding: var(--sp-32) var(--sp-20);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--sp-8);
    text-align: center;
    padding: var(--sp-16) var(--sp-20);
  }

  /* Success screen */
  .success-screen { padding: var(--sp-40) var(--sp-16); }

  /* Wash summary card — keep icon but tighten */
  #washSummaryCard { padding: var(--sp-12) var(--sp-16) !important; gap: var(--sp-12) !important; }
}

/* -------- MOBILE PORTRAIT (≤ 480px) -------- */
@media (max-width: 480px) {
  .form-shell { padding: var(--sp-16) var(--sp-12) var(--sp-28); }

  /* Navbar — hide primary CTA to keep nav clean */
  .navbar { padding: var(--sp-8) var(--sp-12); }
  .navbar__actions .btn--primary { display: none; }

  /* Progress */
  .progress-step-counter { font-size: 11px; }
  .progress-label { font-size: 12px; }
  .step-dots--vertical { gap: 4px; }
  .step-dot { width: 24px; height: 24px; font-size: 10px; }
  .step-row__label { display: none; }
  .step-row.is-active .step-row__label { display: inline; font-size: 10px; }
  .step-row + .step-row::before { top: 11px; }

  /* Headings */
  .step-heading__title { font-size: clamp(18px, 5.5vw, 22px); }
  .step-heading__sub { font-size: 12px; }

  /* Cards */
  .card {
    padding: var(--sp-16) var(--sp-12);
    border-radius: var(--radius-md);
  }
  .card__section-label {
    gap: var(--sp-8);
    padding-bottom: var(--sp-10);
    margin-bottom: var(--sp-12);
  }
  .card__section-icon { width: 28px; height: 28px; }
  .card__section-icon svg { width: 12px; height: 12px; }
  .card__section-title { font-size: 14px; }

  /* Form inputs — keep 16px font to avoid iOS zoom */
  :root { --input-height: 42px; }
  .form-input, .form-select { font-size: 16px; }

  /* Flight col label smaller */
  .flight-col__title { font-size: 13px; }
  .flight-col__icon { width: 26px; height: 26px; }
  .flight-col__icon svg { width: 12px; height: 12px; }

  /* Option card (parking per day) tighter */
  .option-card { padding: var(--sp-12); }
  .option-card__price { font-size: 16px; }
  .option-card__name { font-size: 14px; padding-top: var(--sp-6); }
  .option-card__desc { font-size: 12px; }

  /* Summary bento tighter */
  .summary-bento-card { padding: var(--sp-12); }
  .summary-bento-card__main { font-size: 14px; }
  .summary-bento-card__sub { font-size: 12px; }

  /* Booking summary */
  .booking-summary-card { padding: var(--sp-12); }
  .booking-summary-card__title { font-size: 15px; margin-bottom: var(--sp-8); }
  .summary-line { padding: var(--sp-6) 0; font-size: 12px; }
  .summary-total-row__amount { font-size: 20px; }

  /* Account/Guest/Payment */
  .account-card, .guest-card, .payment-card {
    padding: var(--sp-16) var(--sp-12);
  }
  .account-card__title, .guest-card__title { font-size: 17px; }
  .account-card__sub, .guest-card__sub { font-size: 12px; }
  .payment-card__title { font-size: 15px; }

  /* Buttons */
  .btn--primary-lg { padding: 12px 16px; font-size: 14px; }
  .btn--cta-round { padding: 10px 20px; font-size: 13px; }

  /* Success screen */
  .success-screen__title { font-size: 24px; }
  .success-screen__sub { font-size: 13px; }
  .conf-id__number { font-size: 22px; letter-spacing: 0.08em; }

  /* Footer */
  .footer-grid { padding: var(--sp-24) var(--sp-16); }
  .footer-desc { font-size: 13px; }
  .footer-newsletter-desc { font-size: 13px; }

  /* Wash summary card even tighter */
  #washSummaryCard { padding: var(--sp-10) var(--sp-12) !important; }
  #washSummaryIcon { width: 36px !important; height: 36px !important; }
  #washSummaryIcon svg { width: 20px !important; height: 20px !important; }
  #washSummaryName { font-size: 15px !important; }
  #washSummaryPrice { font-size: 15px !important; }
  #washSummaryDesc { font-size: 12px !important; }
}

/* -------- LANDSCAPE ORIENTATION TWEAKS (phones) -------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  /* Tighten vertical rhythm so the form doesn't feel endless in landscape */
  .form-shell { padding-top: var(--sp-12); padding-bottom: var(--sp-24); }
  .step-heading { margin-bottom: var(--sp-16); }
  .utility-bar { display: none; }
  .progress-wrap { padding: var(--sp-10) var(--sp-14); }
  /* Re-enable 2-column grids in wider landscape so we use horizontal room */
  .field-grid--2 { grid-template-columns: 1fr 1fr; }
  .flight-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
}

/* ============================================================
   Booking form only (reservations/create — <main class="zal-booking-form">)
   Primary actions: wide rectangle, subtle radius (~10px), navy ~#102A43, soft shadow
   Does not affect login/register/admin that also load parking-form.css
   ============================================================ */
.zal-booking-form {
  --zal-booking-btn-radius: 10px;
  --zal-booking-btn-navy: #102a43;
  --zal-booking-btn-navy-hover: #0d2438;
  --zal-booking-btn-shadow: 0 4px 14px rgba(16, 42, 67, 0.22);
  --zal-booking-btn-shadow-hover: 0 6px 18px rgba(16, 42, 67, 0.28);
}

.zal-booking-form .wizard-btn-primary {
  border-radius: var(--zal-booking-btn-radius);
  background: var(--zal-booking-btn-navy);
  box-shadow: var(--zal-booking-btn-shadow);
}
.zal-booking-form .wizard-btn-primary:hover {
  background: var(--zal-booking-btn-navy-hover);
  box-shadow: var(--zal-booking-btn-shadow-hover);
}
.zal-booking-form .wizard-btn-primary--success {
  border-radius: var(--zal-booking-btn-radius);
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.22);
}
.zal-booking-form .wizard-btn-primary--success:hover {
  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.28);
}

.zal-booking-form .btn--primary,
.zal-booking-form .btn--primary-lg {
  border-radius: var(--zal-booking-btn-radius);
  background: var(--zal-booking-btn-navy);
  box-shadow: var(--zal-booking-btn-shadow);
}
.zal-booking-form .btn--primary:hover,
.zal-booking-form .btn--primary-lg:hover {
  background: var(--zal-booking-btn-navy-hover);
  box-shadow: var(--zal-booking-btn-shadow-hover);
}

.zal-booking-form .btn--cta-round {
  border-radius: var(--zal-booking-btn-radius);
  background: var(--zal-booking-btn-navy);
  box-shadow: var(--zal-booking-btn-shadow);
}
.zal-booking-form .btn--cta-round:hover {
  background: var(--zal-booking-btn-navy-hover);
  box-shadow: var(--zal-booking-btn-shadow-hover);
}