/* Air There & Everywhere – shared styles
 *
 * This single stylesheet covers:
 * - Global tokens (colours, typography, spacing)
 * - Shell layout: header, footer, bottom nav
 * - Homepage sections (hero, feature cards, quick quote)
 * - Booking wizard
 * - Prices table + filters
 * - Offers page content blocks
 * - Pac-Van mini-game layout
 * - Login / customer portal / admin
 *
 * Visual behaviour is unchanged – this header just explains
 * what lives here so future tweaks are easier to find.
 */

:root{
  /* Brand */
  --ate-green:#0f2f1f;
  --ate-green-2:#143a27;
  --ate-gold:#d6c28b;
  /* Dark-mode default (requested) */
  --ate-cream:#0b1510;
  --ate-ink: rgba(247,245,239,.92);

  /* Clean system */
  --bg: #07120d;
  --bg-2: #0b1f15;

  --card: rgba(7,15,11,.74);
  --card2: rgba(7,15,11,.56);
  --border: rgba(214,194,139,.18);

  --text: rgba(247,245,239,.92);
  --muted: rgba(247,245,239,.72);
  --muted2: rgba(247,245,239,.60);

  --shadow: 0 18px 44px rgba(0,0,0,.38);
  --radius: 18px;
  --radius-sm: 14px;
  --pad: 16px;
  --pad-lg: 22px;
  --tap: 52px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Patch: hide legacy app-shell bottom nav (prevents huge unstyled SVG icons on some pages) */
.app-shell-bottomnav,
.app-shell-pad{
  display:none !important;
}

html,body{height:100%;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(900px 520px at 8% 0%, rgba(214,194,139,.22), transparent 60%),
              radial-gradient(900px 520px at 100% 12%, rgba(15,47,31,.10), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
  letter-spacing: -0.01em;
}

h1,h2,h3{
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  letter-spacing:-0.02em;
}

a{color:var(--ate-gold);}
a.btn, button.btn{letter-spacing:-0.01em;}

.card, .panel, .ate-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.field input, .field select, .field textarea{
  height: var(--tap);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.96);
  border:1px solid rgba(15,47,31,.16);
  color: var(--text);
}
.field input::placeholder, .field textarea::placeholder{color: rgba(11,15,13,.45);}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color: rgba(15,47,31,.42);
  box-shadow: 0 0 0 4px rgba(15,47,31,.10);
}


.btn{
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  transition: transform .08s var(--ease), filter .12s var(--ease), background .12s var(--ease);
}
.btn:active{transform: translateY(1px) scale(.99);}
.btn.primary{
  background: linear-gradient(180deg, var(--ate-green-2), var(--ate-green));
  color: var(--ate-cream);
  border: 1px solid rgba(15,47,31,.22);
  box-shadow: 0 12px 28px rgba(15,47,31,.18);
}
.btn.ghost{
  background: rgba(15,47,31,.06);
  border: 1px solid rgba(15,47,31,.14);
  color: var(--ate-green);
}

.bottom-nav{
  position: sticky;
  bottom: 0;
  background: rgba(247,245,239,.86);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(15,47,31,.10);
}
.bottom-nav a{
  color: rgba(255,255,255,.78);
}
.bottom-nav a.active{color: var(--ate-gold);}

.wiz-step{animation: fadeIn .22s var(--ease);}
@keyframes fadeIn{from{opacity:.0; transform: translateY(6px);}to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  .wiz-step{animation:none;}
  .btn{transition:none;}
}
.wiz-actions{
  position: sticky;
  bottom: 76px; /* above bottom nav */
  padding-top: 12px;
  margin-top: 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(5,15,11,.92) 40%);
  backdrop-filter: blur(10px);
}

.journey-summary{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,.85);
}
.journey-summary b{color: var(--ate-gold); font-weight:700;}
.journey-summary .item{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}


/* Professional typeface (fast, readable, trustworthy) */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  
  /* Typography */
  --font-heading: 'Inter Tight', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
/* v127 brand palette lock */
  --color-primary: #295B4A;    /* Herb green */
  --color-accent:  #E9DFC9;    /* Champagne / beige */
  --color-dark:    #12171C;    /* Dark slate */

  --color-primary-soft: #3B6F5C; /* Optional lighter green */
  --color-border-soft:  rgba(0, 0, 0, 0.06);

  /* Core brand colours */
  --green: #305443;          /* deep evergreen for accents */
  --beige: #F5EEDC;          /* warm card / button background */
  --dark: #040806;           /* deep green-black for dark sections */
  --accent: #B6F2C3;         /* herb-green highlight */

  /* Status and basics */
  --danger: #c54b4b;
  --radius: 14px;
  --shadow-soft: 0 16px 35px rgba(0,0,0,0.35);
  --text-main: #f7f7f7;
  --text-muted: #c8c8c8;
  --font-main: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);

  background-color: #040806;
  margin: 0;
  font-family: var(--font-main);
  color: var(--text-main);
}

.announcement-strip {
  background: linear-gradient(90deg, #254325, #7a5f2a);
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  padding: 6px 12px;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  position: relative;
  top: auto;
  z-index: 10;
  
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
}

.logo {
max-width:90px;
margin-bottom:12px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.brand-text h1 {
  margin: 0;
  font-size: 1.1rem;
}

.tagline {
  margin: 2px 0 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.header-contact {
  display: flex;
  gap: 6px;
}

.chip {
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.8rem;
  text-decoration: none;
  color: #fff;
}

.chip--whatsapp {
  background: #128c7e;
}

/* Hero */
.hero {
  padding: 18px 16px 24px;
  background: radial-gradient(circle at 10% 0, #305443 0, #102016 55%, #060d08 100%);
  border-radius: 0 0 18px 18px;
}

.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 20px;
}

.hero-text h2 {
  margin: 8px 0;
  font-size: 1.6rem;
}

.hero-text p {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.hero-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 8px;
}

.hero-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.83rem;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.hero-toggle-btn--active {
  background: var(--beige);
  color: #111;
}

.hero-image-wrapper {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.hero-image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sections */
.section {
  padding: 24px 16px;
  background: radial-gradient(circle at 10% 0, #305443 0, #102016 55%, #060d08 100%);
  color: #f7f0de;
}

.section h2 {
  /* Keep headings in normal flow (auto can cause odd stacking in some layouts) */
  margin-top: 0;
  margin-bottom: 12px;
}

.section--why,
.section--offers-teaser,
.section--prices,
.section--how {
  background: radial-gradient(circle at 10% 0, #305443 0, #102016 55%, #060d08 100%);
}

.grid-3 {
  display: grid;
  gap: 14px;
}

.card {
  background: radial-gradient(circle at top, rgba(182,242,195,0.08), rgba(6,12,8,0.96));
  border-radius: 18px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(182,242,195,0.22);
  box-shadow: 0 22px 40px rgba(0,0,0,0.85);
}

.card h3 {
  /* Keep headings in normal flow */
  margin-top: 0;
}

/* Customer portal (Account page) spacing — prevents section headings overlapping cards */
body[data-page="login"] .customer-area h2 {
  margin: 22px 0 12px;
  padding-left: 2px;
  position: relative;
}

body[data-page="login"] .customer-header {
  position: relative;
  z-index: 1;
}

body[data-page="login"] #customerBookings,
body[data-page="login"] #customerPastBookings,
body[data-page="login"] #customerStamps {
  margin-top: 6px;
}

/* Buttons */
.btn {
  border-radius: 999px;
  border: none;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary {
  background: var(--beige);
  color: #111;
}

.btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
}

.btn-ghost {
  background: transparent;
  color: var(--beige);
  border: 1px solid rgba(255,255,255,0.18);
}

.btn-block {
  width: 100%;
}

/* Calculator */
.calc-card {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 18px;
  background: radial-gradient(circle at top, rgba(182,242,195,0.08), rgba(6,12,8,0.96));
  border: 1px solid rgba(182,242,195,0.22);
  box-shadow: 0 22px 40px rgba(0,0,0,0.85);
  color: #F7F5EE;
}

.calc-card form {
  display: grid;
  gap: 8px;
}

.calc-card label {
  font-size: 0.8rem;
  display: grid;
  gap: 4px;
}

select,
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="number"] {
  border-radius: 999px;
  border: 1px solid rgba(182,242,195,0.55);
  padding: 7px 11px;
  background: rgba(4,11,8,0.96);
  color: #fdfdfd;
}

/* Match selects + textareas to input styling for readability */
select,
textarea {
  border-radius: 999px;
  border: 1px solid rgba(182,242,195,0.55);
  padding: 7px 11px;
  background: rgba(4,11,8,0.96);
  color: #fdfdfd;
}

/* Placeholder text colour */
input::placeholder,
textarea::placeholder {
  color: #a9b9b0;
  opacity: 1;
}

.calc-result {
  margin-top: 10px;
  font-size: 1.0rem;
}

.calc-price {
  margin: 0;
}

/* Tables */
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0rem;
}

.price-table th,
.price-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.price-table th {
  text-align: left;
  font-weight: 600;
}

/* Steps / lists */
.steps {
  padding-left: 18px;
  font-size: 0.9rem;
}

.tick-list {
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
}

.tick-list li::before {
  content: "✔";
  margin-right: 6px;
  color: var(--beige);
}

.small {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Booking wizard */
.booking-main {
  padding: 18px 16px 80px;
  padding-bottom: 90px;
}

.joe-intro {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.wizard {
  background: radial-gradient(circle at top, rgba(182,242,195,0.08), rgba(6,12,8,0.96));
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(182,242,195,0.22);
  box-shadow: 0 22px 40px rgba(0,0,0,0.85);
}

.wizard-step {
  display: grid;
  gap: 8px;
}

.wizard-buttons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.summary-card {
  margin-top: 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 14px;
}

.summary-card pre {
  white-space: pre-wrap;
  font-size: 1.0rem;
  background: rgba(0,0,0,0.6);
  padding: 8px;
  border-radius: 10px;
}

.summary-actions {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

/* Pacvan */
.pacvan-main {
  padding-bottom: 90px;
}

.pacvan-grid {
  margin: 16px auto;
  width: 220px;
  height: 220px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
  background: #060d08;
  border-radius: 12px;
  overflow: hidden;
}

.pacvan-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.pacvan-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pacvan-controls button {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.7);
  color: #fff;
}

.pacvan-status {
  text-align: center;
  margin-top: 8px;
}

/* Portal */
.customer-area,
.admin-area {
  margin-top: 16px;
}

.customer-card,
.admin-card {
  background: radial-gradient(circle at top, rgba(182,242,195,0.08), rgba(6,12,8,0.96));
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 1.0rem;
  border: 1px solid rgba(182,242,195,0.22);
  box-shadow: 0 18px 36px rgba(0,0,0,0.8);
}

.admin-search {
  width: 100%;
  margin-bottom: 10px;
}

.hidden {
  display: none;
}

/* Footer */
.site-footer {
  padding: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* Bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: rgba(0,0,0,0.95);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
  z-index: 20;
}

.bottom-nav__item {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bottom-nav__item--active {
  color: var(--beige);
}

.bottom-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}

.bottom-nav__icon svg {
  width: 22px;
  height: 22px;
}

.bottom-nav__label {
  font-size: 0.8rem;
  line-height: 1.2;
}



/* Responsive */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
  }
}


.section-inner {
  border-radius: 24px;
  padding: 18px;
  background: radial-gradient(circle at top left, rgba(217,198,163,0.12), rgba(0,0,0,0.9));
  border: 1px solid rgba(255,255,255,0.06);
}

.map-bg {
  background-image: url('assets/map-hoylake-moreton.png');
  background-size: 85%;
  background-position: top center;
  background-blend-mode: multiply;
}

.center {
  text-align: center;
  margin-top: 12px;
}

.promo-list {
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
}

.promo-list li {
  margin-bottom: 4px;
}


.section--offers-page {
  padding: 2.5rem 0;
  background: radial-gradient(circle at 10% 0, #305443 0, #102016 55%, #060d08 100%);
}

.offers-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .offers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.offers-card {
  border-radius: 20px;
  padding: 16px 18px;
  background: radial-gradient(circle at top left, rgba(182,242,195,0.14), rgba(6,12,8,0.96));
  border: 1px solid rgba(182,242,195,0.22);
  box-shadow: var(--shadow-soft);
}

.offers-card h2 {
  margin-top: auto;
  margin-bottom: 8px;
}

.offers-card--promos .promo-list li {
  margin-bottom: 6px;
}

.offers-card .small-print {
  margin-top: 10px;
  font-size: 0.8rem;
  opacity: 0.8;
}



/* Pac-Van win modal */
.pacvan-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
}

.pacvan-modal.is-visible {
  display: flex;
}

.pacvan-modal__inner {
  background: rgba(5,6,6,0.96);
  border-radius: 18px;
  padding: 18px 20px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  border: 1px solid rgba(217,198,163,0.8);
  box-shadow: 0 20px 45px rgba(0,0,0,0.7);
}

.pacvan-modal__inner h3 {
  margin-top: auto;
  margin-bottom: 8px;
}

.pacvan-modal__hint {
  font-size: 1.0rem;
  opacity: 0.8;
  margin-bottom: 12px;
}



.pacvan-cell--van {
  background: linear-gradient(135deg, rgba(91,122,91,0.9), rgba(5,6,6,0.95));
}

.pacvan-cell--fine {
  background: rgba(120,0,0,0.85);
}

.pacvan-cell--case {
  background: rgba(217,198,163,0.85);
}


/* Pac-Van modal */
.pacvan-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 16px;
}

.pacvan-modal-backdrop.is-visible {
  display: flex;
}

.pacvan-modal {
  background: rgba(5,6,6,0.98);
  border-radius: 22px;
  border: 1px solid rgba(245,210,127,0.75);
  box-shadow: 0 30px 70px rgba(0,0,0,0.85);
  max-width: 430px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pacvan-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #f6efe4;
  font-size: 14px;
}

.pacvan-modal-header span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pacvan-modal-body {
  background-color: #B6F2C3;
  background-image: url("assets/texture-green.png");
  background-size: 85%;
  
  flex: 1;
  min-height: 220px;
}

.pacvan-modal iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.pacvan-modal-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 600px) {
  .pacvan-modal {
    max-width: 100%;
    border-radius: 16px;
  }
}


/* From v21 build: pill buttons + Pac-Van layout */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-pill-outline {
  background: transparent;
  border-color: rgba(248,241,219,0.65);
  color: #f7f0dd;
}

.btn-pill-solid {
  background: radial-gradient(circle at 10% 0, #fff3bf, #c7994b);
  color: #311f08;
  border-color: #c7994b;
  box-shadow: 0 14px 30px rgba(0,0,0,0.6);
}


.pacvan-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  background: var(--dark);
  padding: 4px;
  border-radius: 0.6rem;
  margin-bottom: 0.75rem;
}

.pv-cell {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: 4px;
  background: #102016;
}

.pv-taxi {
  box-shadow: 0 0 10px rgba(255,215,0,0.75);
}

.pv-fine {
  background: #3b1010;
}

.pacvan-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.pacvan-controls .pv-row {
  display: flex;
  gap: 0.35rem;
}

.pacvan-controls button {
  min-width: 42px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(245,236,218,0.4);
  background: rgba(7,15,10,0.9);
  color: #f5ecda;
  font-size: 0.9rem;
  cursor: pointer;
}

.pacvan-controls button:active {
  transform: translateY(-7vh);
}

@media (max-width: 480px) {
  .pv-cell {
    width: 24px;
    height: 24px;
  }
}


.pv-brick {
  background: #060d08;
  opacity: 0.8;
}

.pacvan-controls button {
  min-width: 60px;
  min-height: 50px;
  font-size: 1.05rem;
}

.pv-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.pv-hidden {
  display: none;
}

.pv-modal-inner {
  max-width: 320px;
  width: 90%;
  background: radial-gradient(circle at top, rgba(182,242,195,0.08), rgba(6,12,8,0.97));
  border-radius: 1rem;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 22px 40px rgba(0,0,0,0.9);
}

.pv-modal-text {
  color: #f5ecda;
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 0.8rem;
  text-align: center;
}
.pv-modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
/* Pac-Van layout & background from v21 */
.section-deep {
  background: radial-gradient(circle at 10% 0, #305443 0, #102016 55%, #060d08 100%);
  color: #f7f0de;
}

.pacvan-layout {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.pacvan-panel {
  max-width: 420px;
  width: 100%;
  padding: 1rem 1.25rem 1.4rem;
  border-radius: 1.2rem;
  background: radial-gradient(circle at top, rgba(182,242,195,0.09), rgba(6,12,8,0.96));
  box-shadow: 0 22px 40px rgba(0,0,0,0.85);
}

.pacvan-stats {
  display: flex;
  justify-content: space-between;
  font-size: 1.0rem;
  margin: 0.5rem 0 0.6rem;
  color: #f5ecda;
}

/* Final Pac-Van grid sizing override */
.pacvan-grid {
  margin: 0.75rem auto;
  width: 280px;
  height: 280px;
}

@media (max-width: 480px) {
  .pacvan-grid {
    width: 252px;
    height: 252px;
  }
}


/* Image gallery section */
.section--gallery {
  background: rgba(4,11,8,0.96);
}

.section-intro {
  max-width: 620px;
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.photo-card {
  margin: 0;
  background: rgba(10,10,10,0.9);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 35px rgba(0,0,0,0.5);
}

.photo-card__image {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
}

.photo-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-card__caption {
  padding: 10px 12px 11px;
  font-size: 1.0rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .photo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Larger bottom nav icons + labels */
.bottom-nav__item span:first-child {
  font-size: 1.3rem;
  line-height: 1;
}

.bottom-nav__item span:last-child {
  font-size: 0.8rem;
}

.card, .box, .input-wrapper, .booking-panel, .price-card {
  background: linear-gradient(135deg, #F5EEDC 0%, #EFE6D2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* Pac-Van special background */

body[data-page="pacvan"] {
  background:
    radial-gradient(circle at top, rgba(0,0,0,0.85) 0, rgba(0,0,0,0.98) 55%),
    url('assets/pacvan-bg.png') center/cover fixed no-repeat;
}


/* Price tools (search + filter) */
.price-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.price-tools__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 1.0rem;
  color: var(--text-muted);
}

.price-tools__label input,
.price-tools__label select {
  max-width: 260px;
}


/* Quick Quote 2.0 – chips, airport cards, price bubble */
#quick-quote-card {
  margin-top: 16px;
}

.qq-group {
  margin-top: 10px;
}

.qq-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--text-muted);
}

/* District chips */
.qq-chip-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
}

.qq-chip-row::-webkit-scrollbar {
  display: none;
}

.qq-chip {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(182,242,195,0.4);
  font-size: 0.95rem;
  white-space: nowrap;
  background: rgba(4,11,8,0.96);
  color: #fdfdfd;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}

.qq-chip--active {
  background: rgba(182,242,195,0.18);
  border-color: rgba(182,242,195,0.9);
  transform: translateY(-7vh);
  box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}

/* Airport cards */
.qq-airport-cards {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 8px;
  margin-top: 4px;
}

@media (min-width: 640px) {
  .qq-airport-cards {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

.qq-airport-card {
  border-radius: 14px;
  padding: 8px 9px;
  border: 1px solid rgba(182,242,195,0.35);
  background: rgba(4,11,8,0.96);
  color: #fdfdfd;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

.qq-airport-card--active {
  background: radial-gradient(circle at top, rgba(182,242,195,0.14), rgba(6,12,8,1));
  border-color: rgba(182,242,195,0.9);
  box-shadow: 0 14px 26px rgba(0,0,0,0.9);
  transform: translateY(-7vh);
}

.qq-airport-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.qq-airport-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.qq-airport-note {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Vehicle toggle */
.qq-vehicle-toggle {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.qq-vehicle-option {
  flex: 1;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(182,242,195,0.4);
  background: rgba(4,11,8,0.96);
  color: #fdfdfd;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.08s ease, border-color 0.12s ease;
}

.qq-vehicle-option--active {
  background: rgba(182,242,195,0.18);
  border-color: rgba(182,242,195,0.9);
  transform: translateY(-7vh);
  box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}

/* Price bubble + CTA */
.qq-summary-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.qq-price-bubble {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(4,11,8,0.96);
  border: 1px solid rgba(182,242,195,0.6);
  box-shadow: 0 12px 26px rgba(0,0,0,0.9);
}

.qq-price-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.75;
}

.qq-price-main {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.qq-price-promo {
  font-size: 0.75rem;
  opacity: 0.9;
}

.qq-book-btn {
  padding-inline: 14px;
  white-space: nowrap;
}

/* Memory */
.qq-memory-block {
  margin-top: 10px;
  font-size: 0.95rem;
}

.qq-last-journey {
  opacity: 0.85;
  margin-bottom: 4px;
}

.qq-recent-searches-label {
  font-weight: 600;
  margin-bottom: 3px;
}

.qq-recent-searches-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qq-recent-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(182,242,195,0.4);
  cursor: pointer;
  font-size: 0.75rem;
  background: rgba(4,11,8,0.96);
  transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.1s ease;
}

.qq-recent-pill:hover {
  transform: translateY(-7vh);
  box-shadow: 0 8px 18px rgba(0,0,0,0.8);
}


/* More drawer (bottom sheet) */
.more-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
  z-index: 40;
}

.more-drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.more-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top, rgba(182,242,195,0.10), rgba(4,11,8,0.98));
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 40px rgba(0,0,0,0.9);
  padding: 10px 14px 18px;
  max-width: 640px;
  margin: 0 auto;
  transition: transform 0.22s ease-out;
  /* Hidden state: push fully off-screen */
  transform: translateY(110%);
}

.more-drawer-backdrop.is-visible .more-drawer {
  transform: translateY(0);
}

.more-drawer__handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.32);
  margin: 4px auto 10px;
}

.more-drawer__inner {
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

/* FAQ empty state should never show until the user filters/searches */
.faq-empty {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(182,242,195,0.22);
  color: rgba(255,255,255,0.82);
}
.faq-empty.is-visible { display: block; }

.more-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.more-drawer__title {
  font-size: 0.9rem;
  font-weight: 600;
}

.more-drawer__close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.more-drawer__grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 8px;
}

@media (min-width: 560px) {
  .more-drawer__grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.more-drawer__item {
  display: block;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(182,242,195,0.35);
  background: rgba(4,11,8,0.96);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.more-drawer__item:hover {
  transform: translateY(-7vh);
  box-shadow: 0 12px 24px rgba(0,0,0,0.9);
  border-color: rgba(182,242,195,0.9);
}

.more-drawer__eyebrow {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

.more-drawer__label {
  display: block;
  font-size: 0.9rem;
  margin-top: 1px;
}

/* Bottom nav tweaks for More button */
.bottom-nav__item--more {
  border-radius: 999px;
}


/* Quick quote select */
.qq-select, .qq-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(182,242,195,0.4);
  background: rgba(4,11,8,0.96);
  color: #fdfdfd;
  font-size: 1.0rem;
  outline: none;
}
.qq-select:focus {
  border-color: rgba(182,242,195,0.9);
  box-shadow: 0 0 0 1px rgba(182,242,195,0.6);
}


/* Customer area cards */
.customer-area .customer-card {
  margin-bottom: 8px;
}

.customer-card--past {
  opacity: 0.9;
}

.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
}

.badge--soft {
  background: rgba(182,242,195,0.18);
  border: 1px solid rgba(182,242,195,0.6);
}


/* Login / customer portal theming */
body[data-page="login"] {
  background: radial-gradient(circle at 10% 0, #254136 0, #09130d 55%, #050b06 100%);
}

body[data-page="login"] .section {
  padding-top: 120px;
  padding-bottom: 80px;
}

body[data-page="login"] .site-header {
  border-bottom: 1px solid rgba(182,242,195,0.2);
  margin-bottom: 6px;
}

body[data-page="login"] .brand-text h1 {
  font-size: 1.2rem;
}

body[data-page="login"] .brand-text p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Customer header card */
.customer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.customer-header__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(182,242,195,0.18);
  border: 1px solid rgba(182,242,195,0.7);
  font-weight: 700;
  font-size: 1rem;
}

.customer-header__greeting {
  font-size: 0.9rem;
  font-weight: 600;
}

.customer-header__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}


/* --- Customer login / portal DARK PREMIUM THEME --- */
body[data-page="login"] {
  background: radial-gradient(circle at 10% 0, #1b2d25 0%, #0c1712 60%, #050b06 100%) !important;
}

body[data-page="login"] .card {
  background: rgba(5, 12, 9, 0.92) !important;
  border: 1px solid rgba(182, 242, 195, 0.28) !important;
  color: #fdfdfd !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.85) !important;
  padding: 18px 18px 22px !important;
  backdrop-filter: blur(6px);
}

body[data-page="login"] h1,
body[data-page="login"] h2,
body[data-page="login"] label {
  color: #ffffff !important;
}

body[data-page="login"] p,
body[data-page="login"] small {
  color: rgba(249, 249, 249, 0.78) !important;
}

body[data-page="login"] input[type="tel"],
body[data-page="login"] input[type="text"] {
  background: #020804 !important;
  border: 1px solid rgba(182, 242, 195, 0.45) !important;
  color: #ffffff !important;
}

body[data-page="login"] .customer-header.card {
  background: rgba(6, 14, 10, 0.94) !important;
  border: 1px solid rgba(182,242,195,0.35) !important;
}

/* Subtle divider line below the page title */
body[data-page="login"] .section h1 {
  border-bottom: 1px solid rgba(182,242,195,0.18);
  padding-bottom: 6px;
  margin-bottom: 12px;
}


/* Bigger, clearer search + filter on Prices page */
body[data-page="prices"] #priceSearch,
body[data-page="prices"] #priceCategory {
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(182,242,195,0.45);
  background: rgba(4,11,8,0.96);
  color: #fdfdfd;
}

/* --- Prices page: high-contrast, mobile-readable surface --- */
body[data-page="prices"].prices-light {
  background: #f6f1e7 !important;
  color: #0f1b14;
}

body[data-page="prices"].prices-light .site-header {
  background: transparent;
}

body[data-page="prices"].prices-light .tagline,
body[data-page="prices"].prices-light .small {
  color: rgba(15, 27, 20, 0.78) !important;
}

body[data-page="prices"].prices-light h1,
body[data-page="prices"].prices-light h2,
body[data-page="prices"].prices-light h3,
body[data-page="prices"].prices-light p,
body[data-page="prices"].prices-light li {
  color: #0f1b14 !important;
}

body[data-page="prices"].prices-light .card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 27, 20, 0.10) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.10) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

/* Intro strip */
body[data-page="prices"].prices-light .pricing-intro {
  background: #ffffff;
  border: 1px solid rgba(15,27,20,0.10);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  margin-bottom: 14px;
}

body[data-page="prices"].prices-light .pricing-intro__lead {
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #0f1b14;
}

body[data-page="prices"].prices-light .pricing-intro__btn {
  appearance: none;
  border: 1px solid rgba(15,27,20,0.16);
  background: #0f1b14;
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
}

/* Airport cards */
body[data-page="prices"].prices-light .airport-card {
  background: #ffffff;
  border: 1px solid rgba(15,27,20,0.12);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
  opacity: 1;
}

body[data-page="prices"].prices-light .airport-card__name {
  font-weight: 800;
  color: #0f1b14;
}

body[data-page="prices"].prices-light .airport-card__code {
  background: rgba(182,242,195,0.35);
  border: 1px solid rgba(15,27,20,0.12);
  color: #0f1b14;
  font-weight: 800;
}

body[data-page="prices"].prices-light .airport-card__price {
  font-weight: 900;
  color: #0f1b14;
}

body[data-page="prices"].prices-light .airport-card__label {
  color: rgba(15,27,20,0.7);
  font-weight: 700;
}

/* Search + chips readable on light surface */
body[data-page="prices"].prices-light #priceSearch {
  background: #ffffff !important;
  color: #0f1b14 !important;
  border: 1px solid rgba(15,27,20,0.18) !important;
}

body[data-page="prices"].prices-light #priceSearch::placeholder {
  color: rgba(15,27,20,0.45) !important;
}

body[data-page="prices"].prices-light .price-chip {
  background: #ffffff;
  color: #0f1b14;
  border: 1px solid rgba(15,27,20,0.18);
}

body[data-page="prices"].prices-light .price-chip--active {
  background: #0f1b14;
  color: #ffffff;
  border-color: rgba(15,27,20,0.18);
}

/* Modal */
body[data-page="prices"].prices-light .pricing-modal {
  background: #ffffff;
  color: #0f1b14;
}

body[data-page="prices"].prices-light .pricing-modal__sub,
body[data-page="prices"].prices-light .pricing-details__content {
  color: rgba(15,27,20,0.78);
}

body[data-page="prices"].prices-light .pricing-details summary {
  color: #0f1b14;
}

/* Prices page components (layout + accessibility) */
body[data-page="prices"] .pricing-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="prices"] .pricing-intro__lead {
  flex: 1;
}

body[data-page="prices"] .pricing-intro__btn {
  white-space: nowrap;
}

body[data-page="prices"] .airport-cards__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

body[data-page="prices"] .airport-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-page="prices"] .airport-card {
  border-radius: 14px;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="prices"] .airport-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-page="prices"] .airport-card__code {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
}

body[data-page="prices"] .airport-card__prices {
  display: grid;
  gap: 6px;
  text-align: right;
}

body[data-page="prices"] .airport-card__label {
  font-size: 0.82rem;
  margin-right: 6px;
}

/* Pricing modal */
body[data-page="prices"] .pricing-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

body[data-page="prices"] .pricing-modal-backdrop.is-open {
  display: flex;
}

body[data-page="prices"] .pricing-modal {
  width: min(720px, 100%);
  border-radius: 18px;
  max-height: 82vh;
  overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  padding: 14px;
}

body[data-page="prices"] .pricing-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

body[data-page="prices"] .pricing-modal__title {
  font-weight: 900;
  font-size: 1.05rem;
}

body[data-page="prices"] .pricing-modal__close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

body[data-page="prices"] .pricing-rules {
  margin: 12px 0;
  padding-left: 18px;
}

body[data-page="prices"] .pricing-details {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
}

body[data-page="prices"] .pricing-details summary {
  cursor: pointer;
  font-weight: 800;
}

body[data-page="prices"] .pricing-details__content {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Prevent background scroll when modal open */
.no-scroll {
  overflow: hidden;
}

body[data-page="prices"] #priceSearch::placeholder {
  color: rgba(230, 230, 230, 0.75);
}

body[data-page="prices"] .price-tools__label span {
  font-size: 0.8rem;
}


/* Price chips & popular section */
body[data-page="prices"] .price-tools__label--chips {
  flex-direction: column;
  align-items: flex-start;
}

.price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  overflow-x: visible;
}

.price-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(182, 242, 195, 0.35);
  background: rgba(4, 11, 8, 0.9);
  color: #fdfdfd;
  font-size: 0.95rem;
  white-space: nowrap;
}

.price-chip__icon {
  font-size: 0.9rem;
}

.price-chip--active {
  background: linear-gradient(135deg, #b6f2c3, #f4e4c2);
  color: #02120a;
  border-color: rgba(255, 255, 255, 0.9);
}

body[data-page="prices"] .price-category-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.popular-prices {
  margin-bottom: 16px;
}

.popular-prices h2 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.popular-price-list table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.popular-price-list th,
.popular-price-list td {
  font-size: 0.8rem;
  padding: 4px 6px;
}


/* Make 'Popular from the Wirral' table more readable */
.popular-prices {
  background: rgba(4, 11, 8, 0.9);
  border: 1px solid rgba(244, 228, 194, 0.6);
}

.popular-prices h2,
.popular-prices p,
.popular-price-list th,
.popular-price-list td {
  color: #f4e4c2;
}

.popular-price-list th {
  font-weight: 600;
  border-bottom: 1px solid rgba(244, 228, 194, 0.4);
}

.popular-price-list td {
  border-bottom: 1px solid rgba(244, 228, 194, 0.12);
}


/* Make 'Popular from the Wirral' table more readable */
.popular-prices {
  background: rgba(4, 11, 8, 0.9);
  border: 1px solid rgba(244, 228, 194, 0.6);
}

.popular-prices h2,
.popular-prices p,
.popular-price-list th,
.popular-price-list td {
  color: #f4e4c2;
}

.popular-price-list th {
  font-weight: 600;
  border-bottom: 1px solid rgba(244, 228, 194, 0.4);
}

.popular-price-list td {
  border-bottom: 1px solid rgba(244, 228, 194, 0.12);
}


/* Global tidy: section spacing & headings */
.section {
  margin-bottom: 32px;
}

.section h2 {
  margin-bottom: 10px;
}

/* Make hero + quick quote feel like one block */
.hero {
  padding-bottom: 12px;
}

.hero .calc-card {
  margin-top: 8px;
}

/* Slightly softer card shadow + consistent radius */
.card {
  border-radius: 14px;
  box-shadow: 0 18px 32px rgba(0,0,0,0.65);
}


/* Readability tweak: make key tiles beige with dark text */
.section--why .card,
.section--offers-teaser .card {
  background: var(--beige);
  color: #111;
}

.section--why .card h3,
.section--why .card p,
.section--offers-teaser .card h3,
.section--offers-teaser .card p,
.section--offers-teaser .card a {
  color: #111;
}


/* === Why section: poster background + suitcase tiles === */
.section--why {
  padding-bottom: 200px;
  background-color: #000;

  position: relative;
  overflow: hidden;
  max-width: 780px;
  margin: 20px auto 26px;
  padding: 32px 14px 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.78), rgba(0,0,0,0.96)),
    url('assets/why-wirral-chooses-us.png');
    background-repeat: no-repeat;
  background-size: 85%;
  background-position: top center;
  background-color: #000;
background-size: 85%;
  background-position: top center;
  border: 1px solid rgba(244, 228, 194, 0.35);
  box-shadow: 0 22px 46px rgba(0,0,0,0.9);
}

.section--why::before,
.section--why::after {
  content: none !important;
}

.section--why h2 {
  text-align: center;
  margin-bottom: 4px;
}

.section--why .section-intro {
  text-align: center;
  font-size: 0.82rem;
  margin-bottom: 12px;
  opacity: 0.95;
}

/* 6 suitcase tiles laid over the image */
.section--why .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 200px;
}

/* Suitcase look */
.info-tile {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(244, 228, 194, 0.6);
  background: rgba(0, 0, 0, 0.55);
  padding: 14px 11px 9px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.info-tile::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 28px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 2px solid rgba(244, 228, 194, 0.7);
  border-bottom: none;
}

.info-tile__head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-tile__icon {
  font-size: 1rem;
}

.info-tile__title {
  font-size: 0.84rem;
  font-weight: 600;
}

.info-tile__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.22s ease;
  margin-top: 4px;
}

.info-tile__body p {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #f4e4c2;
}

.info-tile--open {
  background: rgba(4, 11, 8, 0.92);
  border-color: rgba(182,242,195,0.95);
  transform: translateY(-7vh);
  box-shadow: 0 10px 26px rgba(0,0,0,0.9);
}

.info-tile--open .info-tile__body {
  max-height: 210px;
  opacity: 1;
}


/* --- Suitcase grid visual upgrade --- */

/* Poster panel tweaks */
.section--why {
  padding-bottom: 200px;
  background-color: #000;

  position: relative;
  overflow: hidden;
  max-width: 780px;
  margin: 22px auto 28px;
  padding: 30px 16px 22px;
  border-radius: 22px;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.80), rgba(0,0,0,0.96)),
    url('assets/why-wirral-chooses-us.png');
    background-repeat: no-repeat;
  background-size: 85%;
  background-position: top center;
  background-color: #000;
background-size: 85%;
  background-position: top center;
  border: 1px solid rgba(244, 228, 194, 0.45);
  box-shadow: 0 24px 50px rgba(0,0,0,0.95);
}

.section--why h2 {
  text-align: center;
  margin-bottom: 6px;
}

.section--why .section-intro {
  text-align: center;
  font-size: 0.84rem;
  margin-bottom: 14px;
  opacity: 0.96;
}

/* Grid */
.section--why .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 200px;
}

/* Suitcase base style */
.info-tile {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(244, 228, 194, 0.7);
  background: rgba(1, 6, 4, 0.85);
  padding: 14px 12px 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

/* Handle */
.info-tile::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 28px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 2px solid rgba(244, 228, 194, 0.8);
  border-bottom: none;
}

/* Little feet at the bottom */
.info-tile::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 999px;
  background: radial-gradient(circle at left, rgba(244,228,194,0.7) 0, transparent 60%),
              radial-gradient(circle at right, rgba(244,228,194,0.7) 0, transparent 60%);
  opacity: 0.65;
}

/* Icon chip */
.info-tile__icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: radial-gradient(circle at top left, rgba(244,228,194,0.95), rgba(182,242,195,0.25));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.info-tile__icon {
  font-size: 1.1rem;
}

/* Text inside tile */
.info-tile__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-tile__title {
  font-size: 0.86rem;
  font-weight: 600;
  color: #f4e4c2;
}

.info-tile__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.22s ease;
  margin-top: 4px;
}

.info-tile__body p {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #f4e4c2;
}

/* Open state */
.info-tile--open {
  background: radial-gradient(circle at top left, rgba(182,242,195,0.28), rgba(1, 6, 4, 0.98));
  border-color: rgba(182,242,195,0.95);
  transform: translateY(-7vh);
  box-shadow: 0 12px 30px rgba(0,0,0,0.95);
}

.info-tile--open .info-tile__body {
  max-height: 220px;
  opacity: 1;
}

/* Make sure colours don't fall back to link blue anywhere */
.section--why .info-tile * {
  color: #f4e4c2;
}
.section--why .info-tile__title {
  color: #f4e4c2;
}


/* === Brighten 'Why the Wirral chooses us' poster & enhance suitcase texture === */

/* Brighter background, more breathing room above cases */
.section--why {
  padding-bottom: 200px;
  background-color: #000;

  padding-top: clamp(260px, 80vw, 420px);
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.8)),
    url('assets/why-wirral-chooses-us.png');
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: top center;
  background-color: #000;
}

/* 3x2 grid layout for suitcases only */
.section--why .info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Textured suitcase look */
.section--why .info-tile {
  background:
    linear-gradient(145deg, rgba(12, 24, 18, 0.96), rgba(2, 7, 5, 0.98)),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0.2) 1px,
      rgba(0,0,0,0.2) 3px
    );
  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.7),
    0 10px 22px rgba(0,0,0,0.9);
}

/* Open suitcase: slightly brighter texture and stronger edge */
.section--why .info-tile--open {
  background:
    linear-gradient(140deg, rgba(40, 72, 54, 0.98), rgba(4, 11, 8, 0.99)),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.09) 0px,
      rgba(255,255,255,0.09) 1px,
      rgba(0,0,0,0.18) 1px,
      rgba(0,0,0,0.18) 3px
    );
  border-color: rgba(182,242,195,0.98);
}

/* Slightly smaller on very small screens so 3x2 still fits */
@media (max-width: 480px) {
  .section--why {
  padding-bottom: 200px;
  background-color: #000;

    padding-top: 120px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .section--why .info-grid {
    gap: 6px;
  }
  .section--why .info-tile {
    padding: 12px 8px 8px;
  }
  .section--why .info-tile__title {
    font-size: 0.8rem;
  }
  .section--why .info-tile__body p {
    font-size: 0.76rem;
  }
}

/* Enhanced suitcase realism */
.section--why .info-tile {
  background:
    linear-gradient(145deg, rgba(20, 40, 30, 0.98), rgba(5, 12, 8, 1)),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      rgba(0,0,0,0.25) 1px,
      rgba(0,0,0,0.25) 3px
    );
  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.85),
    0 14px 26px rgba(0,0,0,0.95);
}

.section--why .info-tile--open {
  background:
    linear-gradient(140deg, rgba(45, 90, 65, 1), rgba(6, 14, 10, 1)),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.14) 0px,
      rgba(255,255,255,0.14) 1px,
      rgba(0,0,0,0.22) 1px,
      rgba(0,0,0,0.22) 3px
    );
}


/* Fine-tune gap/texture for 'Why the Wirral chooses us' suitcases */
.section--why .info-tile {
  border-radius: 14px;
  border: 1px solid rgba(244, 228, 194, 0.7);
  background:
    linear-gradient(150deg, rgba(18, 34, 26, 0.98), rgba(4, 10, 7, 1)),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.12) 0px,
      rgba(255,255,255,0.12) 1px,
      rgba(0,0,0,0.26) 1px,
      rgba(0,0,0,0.26) 3px
    );
  background-blend-mode: soft-light;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.85),
    0 14px 26px rgba(0,0,0,0.95);
}

/* Slight edge highlight on top/left to fake light catching the case */
.section--why .info-tile::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-left: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(0,0,0,0.7);
  border-right: 1px solid rgba(0,0,0,0.7);
  pointer-events: none;
}

/* Preserve the existing suitcase 'feet' using a new pseudo-element */
.section--why .info-tile::before {
  /* handle stays as-is from earlier rules */
}

/* Open suitcase: brighter surface and stronger bevel */
.section--why .info-tile--open {
  background:
    linear-gradient(140deg, rgba(52, 96, 69, 1), rgba(6, 14, 10, 1)),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.16) 0px,
      rgba(255,255,255,0.16) 1px,
      rgba(0,0,0,0.24) 1px,
      rgba(0,0,0,0.24) 3px
    );
  background-blend-mode: soft-light;
}


/* Final tweak: ensure poster text ('WHY THE WIRRAL CHOOSES US') is visible above suitcases */
.section--why {
  padding-bottom: 200px;
  background-color: #000;

  /* show top of the image where the writing is */
  background-position: top center;
  /* responsive gap so text + van are visible before suitcases */
  padding-top: clamp(220px, 60vw, 340px);
  padding-bottom: 24px;
}


/* Make 'Why the Wirral chooses us' poster brighter and clearer */
.section--why {
  padding-bottom: 200px;
  background-color: #000;

  /* use raw image without dark overlay */
  background-image: url('assets/why-wirral-chooses-us.png');
  background-size: 85%;
  background-position: top center;
  /* brighten and add a touch of contrast */
  
}

/* Keep the heading readable over a brighter image */
.section--why h2,
.section--why .section-intro {
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}


/* FIXED BACKGROUND BRIGHTNESS WITHOUT AFFECTING CONTENT */
.section--why {
  padding-bottom: 200px;
  background-color: #000;

  position: relative;
  overflow: hidden;
}

.section--why::before {
  content: none;
}


.section--why > * {
  position: relative;
  z-index: 2;
}


/* Poster positioning v1: show heading + top of van before suitcases */
.section--why {
  padding-bottom: 200px;
  background-color: #000;

  padding-top: 120px;
  padding-bottom: 24px;
}


/* Move background image up by 500px */
.section--why::before {
  content: none;
}


.section--why::before {
  content: none;
}


.section--why::before {
  content: none;
}





/* Dashboard test quick quote card */
#quick-quote-card-dashboard.calc-card--dashboard {
  background: rgba(3,7,6,0.96);
  border: 1px solid rgba(182,242,195,0.35);
  box-shadow: 0 18px 45px rgba(0,0,0,0.8);
  margin-top: 16px;
}

.qq-dashboard-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.qq-dashboard-prices {
  margin-top: 14px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(0,0,0,0.9);
  border: 1px solid rgba(182,242,195,0.5);
  display: flex;
  gap: 10px;
}

.qq-price-card {
  flex: 1;
  text-align: center;
}

.qq-price-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(245,245,245,0.78);
  margin-bottom: 4px;
}

.qq-price-main {
  font-size: 1.4rem;
  font-weight: 700;
  color: #b6f2c3;
}

#quick-quote-card-dashboard .qq-book-btn {
  margin-top: 10px;
  width: 100%;
}

/* Dashboard-style selects */
#quick-quote-card-dashboard .qq-select, .qq-input {
  background: #111;
  border: 1px solid #4a6;
  border-radius: 6px;
  color: #f5f5f5;
  padding: 8px;
}

/* Steering wheel style quick quote */
#quick-quote-card-wheel.calc-card--wheel {
  background: radial-gradient(circle at center, rgba(0,0,0,0.95), rgba(0,0,0,1));
  border: 1px solid rgba(182,242,195,0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.85);
  margin-top: 16px;
}

.qq-wheel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.qq-wheel-inner {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 4px solid rgba(182,242,195,0.5);
  box-shadow: 0 0 40px rgba(182,242,195,0.25);
  padding: 16px;
  position: relative;
  background:
    radial-gradient(circle at top, rgba(182,242,195,0.18), transparent 60%),
    radial-gradient(circle at bottom, rgba(0,0,0,0.9), rgba(0,0,0,1));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Wheel rows */
.qq-wheel-row select {
  width: 100%;
}

/* Price panel inside wheel */
.qq-wheel-prices {
  margin-top: 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(182,242,195,0.5);
  display: flex;
  gap: 8px;
}

/* Reuse existing qq-price-card / label / main */
#quick-quote-card-wheel .qq-book-btn {
  margin-top: 12px;
  width: 100%;
}

/* Make selects in wheel feel like part of the wheel UI */
#quick-quote-card-wheel .qq-select, .qq-input {
  background: #050807;
  border: 1px solid #4a6;
  color: #f5f5f5;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.9rem;
}


/* === Cinematic hero background for quick quote === */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 10% 0, rgba(48, 84, 67, 0.7) 0, rgba(16, 32, 22, 0.9) 55%, rgba(6, 13, 8, 1) 100%),
    url("assets/cinematic-bg.png") center/cover no-repeat;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(0, 0, 0, 0.2), transparent 55%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.85));
  z-index: 0;
}

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

/* Hide the separate hero image so the quote widget and text sit over the cinematic background */
.hero-image-wrapper {
  display: none;
}


/* Static hero header image band */
.site-hero-header {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.site-hero-header img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hide old top header bar – new image acts as header */
.site-header {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* Global unified cinematic background */
body {
  background: #020806 url("assets/global-unified-bg.png") center top / cover fixed no-repeat;
}

/* Weaponised quick-quote wrapper */
.quote-weapon {
  position: relative;
  margin-top: 18px;
}
.quote-weapon-bg {
  position: absolute;
  inset: -18px -18px -26px -18px;
  background: radial-gradient(circle at top, rgba(182,242,195,0.08), rgba(2,8,6,0.96));
  opacity: 0.95;
  border-radius: 26px;
  pointer-events: none;
}
.quote-weapon-card {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.95);
  backdrop-filter: blur(14px);
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .quote-weapon {
    margin-top: 12px;
  }
  .quote-weapon-bg {
    inset: -14px -12px -20px -12px;
    border-radius: 22px;
  }
}


/* --- Status pill (availability) --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 20, 13, 0.92);
  border: 1px solid rgba(182, 242, 195, 0.3);
  font-size: 0.95rem;
  color: rgba(248, 250, 249, 0.9);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #64748b;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.6);
}

.status-pill--online .status-dot {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
}

.status-pill--away .status-dot {
  background: #f97316;
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.7);
}

/* --- Clickable card hover / tap feedback --- */
.card,
.qq-airport-card,
.qq-vehicle-option,
.offers-card,
.price-card {
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out;
}

.card:hover,
.qq-airport-card:hover,
.qq-vehicle-option:hover,
.offers-card:hover,
.price-card:hover {
  transform: translateY(-7vh);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
  border-color: rgba(244, 227, 160, 0.45);
}

/* --- WhatsApp floating button --- */
.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #22c55e, #065f46 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.9);
  z-index: 90;
  text-decoration: none;
}

.whatsapp-fab svg {
  width: 26px;
  height: 26px;
  fill: #e5fdf4;
}

.whatsapp-fab:active {
  transform: translateY(-7vh);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);
}

@media (max-width: 520px) {
  .whatsapp-fab {
    bottom: 82px;
    right: 14px;
    width: 48px;
    height: 48px;
  }
}

/* --- Subtle section fade for headings on load --- */
.section h2 {
  animation: sectionFadeUp 520ms ease-out 60ms both;
}

@keyframes sectionFadeUp {
  from {
    opacity: 0;
    transform: translateY(-7vh);
  }
  to {
    opacity: 1;
    transform: translateY(-7vh);
  }
}

/* Quick quote labels less shouty */
.qq-label {
  font-size: 0.8rem;
  opacity: 0.78;
}


/* Homepage intro split section */

.section--intro-split {
  padding: 2.5rem 1.5rem 1.5rem;
}

.intro-split {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 1.75rem;
  align-items: flex-start;
}

.intro-split__col--text h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 0.75rem;
}

.intro-split__col--text p {
  margin-bottom: 0.75rem;
}

.intro-split__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
}

.intro-split__list li {
  margin-bottom: 0.25rem;
}

.intro-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.intro-meta-card {
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: radial-gradient(circle at top left, rgba(182, 242, 195, 0.1), transparent),
              rgba(10, 20, 15, 0.95);
  border: 1px solid rgba(182, 242, 195, 0.45);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
  font-size: 0.9rem;
}

.intro-meta-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.intro-meta-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem 0;
}

.intro-meta-card li {
  margin-bottom: 0.25rem;
}

.intro-meta-card .small {
  opacity: 0.8;
  font-size: 0.8rem;
}

@media (max-width: 800px) {
  .intro-split {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Quick Quote v3 – What will I pay widget */

.qq3-widget {
  margin-top: 0.05rem;
  padding-top: 0.10rem;
  border-top: 1px solid rgba(182, 242, 195, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.qq3-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.qq3-row--top {
  align-items: flex-end;
}

.qq3-field {
  flex: 1 1 140px;
  min-width: 0;
}

.qq3-row--prices {
  justify-content: space-between;
}

.qq3-price-card {
  flex: 1 1 140px;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 14px;
  background: radial-gradient(circle at top left, rgba(182, 242, 195, 0.16), transparent),
              rgba(6, 14, 10, 0.96);
  border: 1px solid rgba(182, 242, 195, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.qq3-price-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.qq3-price-card strong {
  font-size: 1.6rem;
}


.qq3-price-main {
  font-size: 1.6rem;
  font-weight: 600;
}

.qq3-note {
  margin: 0.25rem 0 0.2rem;
}

@media (max-width: 720px) {
  .qq3-row--top {
    flex-direction: column;
    align-items: stretch;
  }
}

.section--calc { padding: 0.35rem 0.65rem 0.35rem; }


.stamp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 4px;
}

.btn-primary--small,
.btn-ghost--small {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}


.admin-stamp-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.btn-ghost--tiny {
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
}


.admin-stamp-log {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(182,242,195,0.18);
  max-height: 220px;
  overflow-y: auto;
  font-size: 0.78rem;
  opacity: 0.9;
}

.admin-stamp-log-entry {
  margin-bottom: 4px;
}


.savings-box {
  margin-top: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  background: radial-gradient(circle at top, rgba(182,242,195,0.06), rgba(6,12,8,0.95));
  border: 1px solid rgba(182,242,195,0.18);
}

.savings-box__title {
  margin: 0 0 4px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}

.savings-box__list {
  margin: 4px 0 0;
  padding-left: 16px;
}


/* Global modal system */
#global-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

#global-modal.is-open {
  display: block;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
}

.modal-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  max-width: 420px;
  width: calc(100% - 2rem);
  background: #050806;
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text-main);
}

.modal-dialog h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.modal-dialog p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.modal-actions .btn,
.modal-actions .btn-primary,
.modal-actions .btn-ghost {
  font-size: 0.9rem;
}


/* Frequent Flyer Savings card */
.savings-card {
  margin-top: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at top left, rgba(182, 242, 195, 0.10), rgba(4, 8, 6, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-soft);
}

.savings-card__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.savings-card__amount {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
}

.savings-card__amount strong {
  color: var(--accent);
  font-size: 1.1rem;
}

.savings-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
}

.savings-card__stat {
  flex: 1 1 110px;
  font-size: 0.85rem;
}

.savings-card__stat .label {
  display: block;
  color: var(--text-muted);
}

.savings-card__stat .value {
  display: block;
  font-weight: 600;
}

.savings-card__foot {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}


/* Compact quick quote layout */
.qq3-widget--compact {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.qq3-widget--compact .qq3-row--top {
  gap: 0.5rem;
}

.qq3-widget--compact .qq3-field {
  flex: 1 1 0;
}

.qq3-price-grid {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(circle at top left,
              rgba(7,18,13,0.96),
              rgba(2,5,4,0.98));
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
}

.qq3-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 64px) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0.55rem;
  align-items: center;
}

.qq3-grid-row + .qq3-grid-row {
  margin-top: 0.15rem;
}

.qq3-grid-row--head {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}

.qq3-grid-head {
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qq3-grid-label {
  font-weight: 600;
}

.qq3-grid-val {
  text-align: right;
  font-weight: 600;
}

.qq3-promo-line {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

#quick-quote-card {
  margin-top: 0.75rem;
}


/* === Global compact mode (Extreme C) === */

/* Base font + headings slightly smaller */
body {
  font-size: 14px;
}

h1 {
  font-size: 1.65rem;
  margin-bottom: 0.4rem;
}

h2 {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

/* Sections closer together */
.section {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Cards tighter */
.card,
.calc-card,
.offers-card,
.customer-card,
.panel,
.loyalty-card,
.portal-card {
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.6rem;
}

/* Forms + fields */
label,
.qq-label,
.form-label {
  font-size: 0.8rem;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}

/* Buttons */
.btn,
.btn-primary,
.btn-ghost {
  padding: 0.38rem 0.9rem;
  font-size: 0.82rem;
  border-radius: 999px;
}

/* Bottom nav + footer slimmer */
.bottom-nav {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.bottom-nav__label {
  font-size: 0.68rem;
}

.site-footer {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.8rem;
}

/* Lists and paragraphs – reduce vertical gaps */
p {
  margin-top: 0.25rem;
  margin-bottom: 0.35rem;
}

ul,
ol {
  margin-top: 0.25rem;
  margin-bottom: 0.35rem;
}

/* Modals slightly tighter */
.modal,
.atw-modal {
  padding: 0.9rem 1rem;
}

.atw-modal__title {
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.atw-modal__body {
  font-size: 0.9rem;
}

/* Login / portal layout */
.login-card,
.portal-header,
.portal-section {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Offers grid spacing */
.offers-grid {
  gap: 14px;
}


/* === Info page layout === */

.section--info-hero {
  padding-top: 1.1rem;
}

.info-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.info-hero__copy h2 {
  margin-bottom: 0.35rem;
}

.info-hero__copy .small {
  max-width: 420px;
}

.info-hero__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.info-pill {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(182,242,195,0.45);
  background: radial-gradient(circle at top left,
              rgba(182,242,195,0.08),
              rgba(8,18,13,0.98));
  font-size: 0.78rem;
  display: flex;
  gap: 0.4rem;
}

.info-pill__label {
  opacity: 0.8;
}

.info-pill__value {
  font-weight: 600;
}

.info-hero__image img {
  max-width: 220px;
  border-radius: 18px;
  display: block;
}

/* Steps */

.section--info-steps h2 {
  margin-bottom: 0.5rem;
}

.info-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}

.info-step {
  position: relative;
  padding-top: 0.75rem;
}

.info-step__badge {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(182,242,195,0.55);
}

/* Included / feature grid */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.6rem;
}

.info-feature h3 {
  margin-bottom: 0.2rem;
}

/* Pricing band */

.info-pricing {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

.info-pricing__copy {
  flex: 1 1 220px;
}

.info-pricing__card {
  flex: 0 0 260px;
}

/* Fit grid */

.info-grid--fit {
  margin-top: 0.4rem;
}

/* CTA */

.info-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
}

.info-cta__copy {
  flex: 1 1 220px;
}

.info-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Responsive tweaks */

@media (max-width: 720px) {
  .info-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-hero__image img {
    max-width: 100%;
  }

  .info-pricing {
    flex-direction: column;
  }
}


/* Hero header video styling */
.site-hero-header video {
  display: block;
  width: 100%;
  height: auto;
}


/* Pac-Van teaser video styling */
.pacvan-teaser__video {
  width: 100%;
  max-height: 420px;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}


/* HEADER VIDEO CROPPED HEIGHT */
.site-hero-header {
  width: 100%;
  height: 70vh;
  overflow: hidden;
  position: relative;
}

.site-hero-header video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transform: translateY(-7vh);
}


/* Announcement strip pinned to top over header */
.announcement-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* Add padding so header sits below strip */
.site-hero-header {
  padding-top: 40px;
  position: relative;
}


/* Quote widget video background */
.calc-card.quote-widget {
  position: relative;
  overflow: hidden;
}

.calc-card.quote-widget .qw-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.65);
}

.calc-card.quote-widget .qw-content {
  position: relative;
  z-index: 2;
  padding: 16px;
  backdrop-filter: blur(6px);
}


/* v128 – global layout + containers */
main {
  width: 100%;
}

/* Constrain content width inside generic sections */
.section > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Constrain hero content width to match sections */
.hero-content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
}

/* v146 – booking helpers */
#bookingWizard .dropoff-other input{ margin-top: 8px; }

/* v149 – booking helpers */
#bookingWizard small{ font-size: 0.85em; }

/* v157 wizard */
.booking-wrap{max-width:720px;margin:0 auto;padding:18px 14px 40px;}
.booking-sub{opacity:.85;margin:0 0 14px;}
.wizard-step{border-radius:14px;padding:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);box-shadow:0 18px 40px rgba(0,0,0,.35);}
.wizard-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;}
.wizard-bar{height:100%;width:12%;background:rgba(220,210,180,.85);border-radius:999px;}
.wizard-q{font-weight:800;margin:10px 0 0;}
.wizard-buttons,.summary-actions{display:flex;gap:12px;margin-top:12px;}
.wizard-buttons .btn,.summary-actions .btn{flex:1 1 auto;min-height:44px;}
.choice-row{display:flex;gap:10px;margin:10px 0 8px;}
.choice-btn{flex:1 1 auto;min-height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:inherit;font-weight:800;}
.choice-btn--active{background:rgba(48,84,67,.9);}
#bookingWizard label{display:block;margin:10px 0;}
#bookingWizard input,#bookingWizard select,#bookingWizard textarea{width:100%;min-height:44px;border-radius:10px;background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.14);color:#fff;padding:10px 12px;}
#bookingWizard select option{color:#111;}
.booking-summary{margin-top:16px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);}
.tiny-note{opacity:.75;font-size:.9em;margin:10px 0 0;}
@media (max-width:520px){.wizard-buttons,.summary-actions{flex-direction:column;}}


/* Booking page – avoid WhatsApp FAB overlap */
body[data-page="booking"] .booking-wrap{ padding-bottom: 130px; }
body[data-page="booking"] .whatsapp-fab{ bottom: 120px; }
/* Booking page – force normal text behaviour for address fields (iOS) */
body[data-page="booking"] #pickupAddress,
body[data-page="booking"] #destAddress{
  -webkit-text-security: none;
  letter-spacing: normal;
  text-transform: none;
}



/* Quick Quote 4.0 – Places inputs + Car/MPV output */
.qq4-widget { margin-top: 10px; display: grid; gap: 10px; }
.qq4-field { display: grid; gap: 6px; }
.qq4-results { margin-top: 6px; display: grid; gap: 10px; }
.qq4-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qq4-price { border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); border-radius: 14px; padding: 12px; }
.qq4-price-label { font-size: 0.85rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.06em; }
.qq4-price-value { font-size: 1.7rem; font-weight: 800; margin-top: 6px; }
.qq4-meta { font-size: 0.95rem; opacity: 0.9; }
.qq4-min { font-size: 0.92rem; line-height: 1.35; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.25); border-radius: 14px; padding: 10px 12px; }
.qq4-savings summary { cursor: pointer; font-weight: 700; }
.qq4-savings ul { margin: 8px 0 0 18px; }
.qq4-note { margin-top: 6px; font-size: 0.9rem; opacity: 0.85; }
.qq4-error { font-size: 0.95rem; border: 1px solid rgba(255,120,120,0.35); background: rgba(255,0,0,0.12); border-radius: 14px; padding: 10px 12px; }
@media (max-width: 420px) { .qq4-prices { grid-template-columns: 1fr; } }


/* --- Accounts page (customer hub) spacing fix --- */
body[data-page="login"] .account-section{
  margin-top: 30px;
}

body[data-page="login"] .section-title{
  position: relative;
  display: block;
  clear: both;
  margin: 0 0 12px 0;
  padding-left: 2px;
  line-height: 1.2;
  z-index: 2;
}

/* Give cards more breathing room so headings never visually collide */
body[data-page="login"] .customer-card{
  margin-bottom: 16px;
}

/* Mobile safety net */
@media (max-width: 768px){
  body[data-page="login"] .section-title{
    transform: none !important;
    top: auto !important;
  }
}

/* Info page — partner section */
.section--info-partner .partner-card{
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
}
.section--info-partner .partner-card__copy{flex:1; min-width:0;}
.section--info-partner .partner-card__logo{margin:0; width:180px; flex:0 0 180px; text-align:center;}
.section--info-partner .partner-card__logo img{width:100%; height:auto; display:block; border-radius:12px;}
.section--info-partner .muted{opacity:.75;}
@media (max-width: 640px){
  .section--info-partner .partner-card{flex-direction:column;}
  .section--info-partner .partner-card__logo{width:200px; max-width:70%;}
}


/* === About / Info page readability: remove beige card wash (Step 1) === */
body[data-page="about"] .card:not(.partner-card){
  background: linear-gradient(180deg, rgba(7,12,10,0.92), rgba(7,12,10,0.78));
  border: 1px solid rgba(182,242,195,0.14);
  box-shadow: 0 18px 34px rgba(0,0,0,0.78);
}
/* Keep partner card as the only beige-accent card on About page */
body[data-page="about"] .partner-card{
  /* Make the partner card feel part of the dark UI, with a subtle warm accent */
  background: radial-gradient(circle at top, rgba(245,238,220,0.10), rgba(6,12,8,0.96));
  border: 1px solid rgba(245,238,220,0.18);
  box-shadow: 0 22px 40px rgba(0,0,0,0.85);
}
body[data-page="about"] .partner-card a{
  color: rgba(182,242,195,0.95);
  text-decoration-color: rgba(182,242,195,0.55);
}
body[data-page="about"] .partner-card a:hover{
  text-decoration-color: rgba(182,242,195,0.95);
}
body[data-page="about"] .section--info-partner .partner-card__logo{
  padding: 10px;
  border-radius: 14px;
  background: rgba(245,238,220,0.08);
  border: 1px solid rgba(245,238,220,0.16);
}
body[data-page="about"] .section--info-partner .partner-card__logo img{
  background: rgba(255,255,255,0.92);
  padding: 8px;
  border-radius: 12px;
}
body[data-page="about"] .section--info-partner .partner-card__logo .muted{
  opacity: 0.75;
}



/* INFO PAGE CTAS */
body[data-page="about"] .info-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
body[data-page="about"] .info-ctas .btn{padding:10px 14px}


h1,h2,h3,.hero-title,.section-title{font-family:var(--font-heading); letter-spacing:-0.02em;}


/* ---------------------------
   Simplified UX (v10.2)
   One-action-per-page
--------------------------- */
body.simplified{
  animation: atePageIn 180ms ease-out;
}
@media (prefers-reduced-motion: reduce){
  body.simplified{animation:none;}
}
@keyframes atePageIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

.simplified-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(4,8,6,0.85);
  backdrop-filter: blur(10px);
}

.simplified-main{
  padding-bottom: 150px; /* bottom nav + safe area */
}

.simplified-hero{
  padding-top: 28px;
}
.simplified-hero__content{
  padding: 0 16px;
}
.hero-title{
  font-size: clamp(28px, 5vw, 44px);
  margin: 0 0 6px 0;
}
.hero-sub{
  margin: 0 0 18px 0;
  color: var(--text-muted);
}

.btn-block{display:block;width:100%; text-align:center;}
.microcopy{margin-top:10px; font-size:14px; color: var(--text-muted); text-align:center;}
.micro-links a{color: var(--color-accent); text-decoration:none;}
.micro-links a:hover{text-decoration:underline;}

.trust-bullets{
  margin-top: 16px;
  display:grid;
  gap:10px;
  grid-template-columns: 1fr;
}
.trust-bullet{
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 14px;
}

.pricing-simple{
  margin-top: 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
}
.pricing-simple summary{cursor:pointer; font-weight:600;}
.pricing-simple ul{margin:10px 0 0 18px;}
.pricing-simple li{margin:8px 0; color: var(--text-main);}

.step-cue{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  font-size:13px;
  color: var(--text-muted);
  margin-bottom:10px;
}

/* Make bottom nav calmer + hide extra items site-wide */
.bottom-nav__item[href*="offers.html"],
.bottom-nav__item[href*="about.html"],
.bottom-nav__item[href*="prices.html"]{display:none;}

.bottom-nav{
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Hide “Ways to save” / gamification teasers inside quote widget on public pages */
body.simplified .qq4-savings,
body.simplified #qq3-promo-line{display:none !important;}

/* Booking wizard: reduce visual noise */
body.simplified .bk-progress{display:none;}
body.simplified .booking-hero p{color: var(--text-muted);}

body.simplified .whatsapp-fab{width:52px;height:52px;opacity:0.92;}

/* ================================
   My ATE (portal) readability fixes
   ================================ */
body[data-page="myate"]{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(15,47,31,0.55), rgba(7,14,10,1) 55%), #070e0a;
  color: #f2f4f2;
}
body[data-page="myate"] .site-header{
  background: rgba(7,14,10,0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
body[data-page="myate"] .tagline,
body[data-page="myate"] .small{
  color: rgba(242,244,242,0.78);
}
body[data-page="myate"] .card{
  background: rgba(15,47,31,0.55);
  border: 1px solid rgba(214,194,139,0.20);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body[data-page="myate"] label{color:#f2f4f2;}
body[data-page="myate"] input,
body[data-page="myate"] select,
body[data-page="myate"] textarea{
  background: rgba(255,255,255,0.10);
  color: #f2f4f2;
  border: 1px solid rgba(255,255,255,0.16);
}
body[data-page="myate"] input::placeholder{color: rgba(242,244,242,0.65);}
body[data-page="myate"] .btn.btn-ghost{
  border-color: rgba(255,255,255,0.18);
  color: #f2f4f2;
}
body[data-page="myate"] .btn.btn-ghost:hover{
  background: rgba(255,255,255,0.08);
}

.trust-strip{margin:12px 0 0; font-size:12px; color: rgba(255,255,255,.78); display:flex; gap:8px; flex-wrap:wrap;}


/* === App-like shell upgrades (v13.3) === */
html, body { height: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  padding-bottom: calc(var(--bottom-nav-h, 74px) + env(safe-area-inset-bottom));
}
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid rgba(240, 204, 140, 0.85); outline-offset: 2px; }

/* Safe-area support */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav, .tabbar {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Subtle screen transition */
@media (prefers-reduced-motion: no-preference) {
  .screen-enter { animation: ateFadeIn 180ms ease-out both; }
  @keyframes ateFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}

/* iOS "Add to Home Screen" helper banner */
.a2hs-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--bottom-nav-h, 74px) + env(safe-area-inset-bottom));
  z-index: 9999;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 12px 12px;
}
.a2hs-banner h4 { margin: 0 0 6px; font-size: 14px; }
.a2hs-banner p { margin: 0; font-size: 13px; opacity: 0.9; }
.a2hs-banner .row { display:flex; gap:10px; align-items:center; justify-content:space-between; }
.a2hs-banner .x { appearance:none; border:0; background: rgba(0,0,0,0.25); color:#fff; width:32px; height:32px; border-radius:10px; font-size:18px; }


:root{--bottom-nav-h:74px;}


/* Bottom app navigation (consistent across pages) */
.app-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(15,47,31,.92);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  z-index: 80;
}
.app-nav .nav-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(255,255,255,.86);
  font-weight: 680;
  font-size: 12px;
}
.app-nav .nav-ico{ font-size: 18px; line-height: 1; }
/* Tray icon polish */
.app-nav .nav-item .nav-ico{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.app-nav .nav-item.is-on .nav-ico{
  background: rgba(214,194,139,.14);
  border-color: rgba(214,194,139,.22);
  box-shadow: 0 0 0 1px rgba(214,194,139,.10) inset, 0 8px 18px rgba(0,0,0,.22);
}
.app-nav .nav-item svg{
  opacity: .92;
  transform: translateY(0.5px);
}
.app-nav .nav-item.is-on svg{
  opacity: 1;
}
.app-nav .nav-item.is-on{
  background: rgba(214,194,139,.16);
  color: rgba(255,255,255,.96);
  border: 1px solid rgba(214,194,139,.22);
}

/* Ensure content isn't hidden behind bottom nav */
.app-shell{ padding-bottom: calc(150px + env(safe-area-inset-bottom)); }


/* PWA install hint banner */
.ate-install{
  position:fixed; left:0; right:0; bottom:0;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  background:rgba(15,47,31,.92);
  backdrop-filter:saturate(180%) blur(10px);
  z-index:9999;
  border-top:1px solid rgba(255,255,255,.10);
}
.ate-install__inner{max-width:980px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;}
.ate-install__title{font-weight:700;letter-spacing:.2px}
.ate-install__msg{opacity:.9;font-size:.92rem;line-height:1.25;margin-top:2px}
.ate-install__actions{display:flex;gap:10px;flex-shrink:0;align-items:center}
@media (max-width:520px){
  .ate-install__inner{flex-direction:column;align-items:stretch}
  .ate-install__actions{justify-content:flex-end}
}



/* =========================
   App Nav (consistent)
========================= */
.app-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  display:flex;
  justify-content:space-around;
  gap:6px;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:rgba(15,47,31,.92);
  border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  z-index:999;
}
.app-nav .nav-item{
  flex:1;
  max-width:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-decoration:none;
  color:#fff;
  font-size:12px;
  line-height:1.1;
  padding:8px 6px;
  border-radius:14px;
  opacity:.92;
  -webkit-tap-highlight-color: transparent;
}
.app-nav .nav-item .nav-ico{
  display:block;
  color:rgba(255,255,255,.95);
}
.app-nav .nav-item.is-on{
  opacity:1;
  background:rgba(214,194,139,.22);
  border:1px solid rgba(214,194,139,.35);
}
body{ padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

/* Compact mode: hide icons when scrolling */
body.nav-compact .app-nav .nav-ico{ display:none; }
body.nav-compact .app-nav{ padding-top:8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
body.nav-compact .app-nav .nav-item{ gap:0; padding:10px 6px; }

/* =========================
   Login spacing fixes
========================= */
.card form.stack{
  display:grid;
  gap:12px;
}
.card form.stack label{
  display:grid;
  gap:6px;
}
.card form.stack input{
  width:100%;
}
.card form.stack .btn{
  width:100%;
}

/* =========================
   My ATE dashboard polish
========================= */
.quick-actions{display:flex;gap:10px;flex-wrap:wrap}
.quick-actions .btn{flex:1 1 140px}

.mini-stack{display:grid;gap:12px}

.mini-card{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px 14px;
}
.mini-card.mini-next{
  border-color: rgba(214,194,139,.35);
  background: rgba(214,194,139,.10);
}
.mini-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.mini-main{min-width:220px;flex:1 1 220px}
.mini-right{flex:0 0 auto;display:flex;align-items:flex-start;gap:10px}
.mini-title{font-weight:700;letter-spacing:.2px}

/* ============================
   ATE Entry Gate (PWA intro)
   ============================ */
#ateEntryGate{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ateEntryGate.ate-gate--hide{ opacity: 0; pointer-events: none; transition: opacity .22s ease; }
#ateEntryGate .ate-gate__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}
#ateEntryGate .ate-gate__panel{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: #081a12;
}
#ateEntryGate .ate-gate__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: contrast(1.05) saturate(1.05);
}
#ateEntryGate .ate-gate__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom)) 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
}
#ateEntryGate .ate-gate__brand{
  font-size: 18px;
  font-weight: 680;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
#ateEntryGate .ate-gate__tag{
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
}
#ateEntryGate .ate-gate__ctaRow{
  display:flex;
  gap:10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
#ateEntryGate .ate-gate__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 650;
  font-size: 13.5px;
  min-width: 132px;
}
#ateEntryGate .ate-gate__btn--primary{
  background: rgba(231, 222, 205, .95);
  border-color: rgba(231, 222, 205, .95);
  color: rgba(12, 28, 22, .95);
}
#ateEntryGate .ate-gate__btn:active{ transform: translateY(1px); }
#ateEntryGate .ate-gate__skip{
  margin-top: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 600;
}
@media (max-width: 380px){
  #ateEntryGate .ate-gate__video{ height: 210px; }
  #ateEntryGate .ate-gate__btn{ min-width: 0; flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce){
  #ateEntryGate.ate-gate--hide{ transition: none; }
  #ateEntryGate .ate-gate__btn:active{ transform:none; }
}


/* Body lock when entry gate open */
body.ate-gate-open{ overflow: hidden; height: 100vh; }

/* === v13.4.9 Readability hotfix (Home quote widget + header) === */
.quote-card{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(214,194,139,.22) !important;
}
.quote-card label{color: rgba(255,255,255,.88) !important;}
.quote-card .estimate{color: var(--ate-gold) !important; font-weight:800;}
.quote-card .tiny{color: rgba(255,255,255,.70) !important;}

/* Make input pills readable on dark glass */
.quote-card input, .quote-card select{
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
.quote-card input::placeholder{color: rgba(255,255,255,.58) !important;}

/* Ensure top header text is high contrast */
.app-top h2{color: rgba(255,255,255,.95) !important;}
.app-top .subtle{color: rgba(255,255,255,.72) !important;}

/* Prevent any accidental beige overrides bleeding into cards */
.card{background: var(--card) !important;}

/* ===== Home dashboard additions ===== */
.how {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}
.how li {
  margin: 6px 0;
}


/* =========================
   Home hero video (v13.5+)
   ========================= */
.home-hero{
  position: relative;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  min-height: 220px;
  background: #07150f;
}

.home-hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(0.66);
  filter: saturate(1.05) contrast(1.05);
}

.home-hero-overlay{
  position:relative;
  z-index:2;
  padding: clamp(110px, 16vh, 180px) 16px 22px;
  min-height: 220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background: linear-gradient(180deg,
    rgba(6,12,9,0.25) 0%,
    rgba(6,12,9,0.35) 30%,
    rgba(6,12,9,0.72) 100%);
}

.home-hero-title{
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.home-hero-sub{
  margin: 6px 0 0 0;
  color: var(--text-muted);
  max-width: 26ch;
}

.home-hero-ctas{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.home-hero-ctas .hero-btn{
  padding: 14px 14px;
  font-size: 1.02rem;
  border-radius: 16px;
  text-align:center;
}

.home-hero-ctas .hero-btn.whatsapp{
  grid-column: 1 / -1;
}

.home-hero-trust{
  margin-top: 10px;
  font-size: .86rem;
  color: rgba(255,255,255,.86);
}

.partner-row{
  display:flex;
  gap: 12px;
  align-items:center;
}

.partner-logo{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.partner-copy{
  min-width: 0;
}

@media (max-width: 420px){
  .home-hero-title{ font-size: 1.85rem; }
}


.btn.whatsapp{
  background: rgba(18,140,126,.22);
  border: 1px solid rgba(18,140,126,.55);
  color: rgba(255,255,255,.95);
}
.btn.whatsapp:hover{ filter: brightness(1.05); }


/* === Proof ribbon (Everywhere Out & Somewhere In) === */
.proof-ribbon{
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  
  z-index: 1;
  background: rgba(7, 36, 24, 0.92);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  backdrop-filter: blur(10px);
}
.proof-ribbon__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
}
.proof-ribbon__title{
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(212,175,55,0.95);
  white-space: nowrap;
}
.proof-ribbon__msg{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  opacity: .95;
}
.proof-ribbon__link{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.proof-ribbon__link:active{ opacity:.8; }

/* === Info drawer === */
.info-drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9998;
}
.info-drawer-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
.info-drawer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  background: rgba(10, 42, 29, 0.98);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-top: 1px solid rgba(212,175,55,0.35);
  transform: translateY(105%);
  transition: transform .22s ease;
  z-index: 9999;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  color: rgba(255,255,255,0.92);
}
.info-drawer.is-open{ transform: translateY(0); }
.info-drawer__handle{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  margin: 10px auto 6px;
}
.info-drawer__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 14px 6px;
}
.info-drawer__title{
  font-size: 18px;
  font-weight: 800;
}
.info-drawer__subtitle{
  font-size: 12px;
  opacity: .78;
  margin-top: 2px;
}
.info-drawer__close{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  border-radius: 12px;
  padding: 8px 10px;
}
.info-drawer__content{
  padding: 10px 14px 16px;
  overflow:auto;
}
.info-drawer__section{
  margin-top: 14px;
}
.info-drawer__sectionTitle{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  margin-bottom: 10px;
}
.info-drawer__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.info-card{
  display:block;
  text-decoration:none;
  border: 1px solid rgba(212,175,55,0.25);
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  color: rgba(255,255,255,0.92);
}
.info-card__title{ font-weight: 800; margin-bottom: 4px; }
.info-card__desc{ font-size: 12px; opacity: .8; line-height: 1.25; }
.info-drawer__text{
  font-size: 13px;
  opacity: .9;
  line-height: 1.35;
}

body.info-drawer-open{ overflow:hidden; }


/* Quick Quote progressive stage */
.qq-stage2 .qq-stage2__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.qq-stage2 .field label{
  display:block;
  font-size:12px;
  opacity:.78;
  margin-bottom:6px;
}
.qq-stage2 input, .qq-stage2 select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
}

.proof-ribbon{
  margin-bottom: 10px; padding-top: env(safe-area-inset-top); }

.home-hero-top{ margin-top: 10px; }

/* Hero spacing tweak */
@media (max-width: 420px){
  .home-hero{ min-height: 220px; }
  .home-hero-overlay{ min-height: 220px; padding-top: clamp(110px, 16vh, 180px); }
}

.proof-ribbon--after-hero{ margin-top: 0; }

/* Space above hero for future image/header */
.hero-gap{
  height: 0px;
}
@media (max-width: 420px){
  .hero-gap{
  height: 0px;
}
}


/* Hero readability: reduce clash with video text/logo */
.home-hero{
  position: relative;
  overflow: hidden;
}
.home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Darken top/center where headline sits */
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.40) 22%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.00) 85%);
  z-index: 1;
}
.home-hero-overlay{
  position: relative;
  z-index: 2;
}
.home-hero video{
  object-position: 85% 0%;
}


/* Strong fix: isolate headline from video artwork/text */
.home-hero-top{
  display:inline-block;
  max-width: 92%;
  padding: 10px 12px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.home-hero-title, .home-hero-sub{
  text-shadow: 0 2px 20px rgba(0,0,0,0.95);
}
.home-hero video{
  transform: scale(0.66);
  object-position: 85% 0%;
  filter: contrast(1.05) saturate(0.95);
}

/* Extra blank space before hero content (user requested) */
.hero-top-spacer{
  height: 0px;
}
@media (max-width: 420px){
  .hero-top-spacer{
  height: 0px;
}
}


/* Nuke background text clash: soften the video layer behind hero */
.home-hero video{
  filter: brightness(0.35) blur(2px) contrast(1.05) saturate(0.9);
}

/* Home hero still image (replaces video) */
.home-hero-still{
  position:absolute;
  inset:0;
  background-image: image-set(url("assets/hero_still.webp") type("image/webp"), url("assets/hero_still.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(0.66);
  filter: brightness(0.55) contrast(1.05) saturate(0.95);
}


/* Hero still image header */
.home-hero-media-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 85% 0%;
  transform: scale(0.66);
}


/* Header still image above hero */
/* Plain hero (no background media) */
.home-hero--plain{
  background: transparent;
  min-height: auto;
}
.home-hero--plain::after{ display:none; }


.home-hero-top{
  background: rgba(0,0,0,0.0) !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}


/* Simple hero (no background banner) */
.hero--simple{background: transparent !important; min-height:auto !important; padding: 18px 16px 8px !important;}
.hero--simple:before,.hero--simple:after{display:none !important;}
.hero--simple .hero__inner{max-width: 720px; margin: 0 auto;}
.hero--simple h1{font-size: 34px; line-height:1.1; margin: 10px 0 6px;}
.hero--simple .sub{opacity:.9; margin:0 0 14px;}
.hero--simple .heroCtas{display:flex; gap:10px; flex-wrap:wrap;}
.hero--simple .heroMeta{margin-top:10px; font-size:14px; opacity:.85;}


/* Home intro (no hero background) */
.home-intro{
  padding: 22px 16px 6px;
}
.home-intro-top{
  margin-bottom: 14px;
}
.home-intro .home-hero-title{
  margin: 0 0 6px 0;
}
.home-intro .home-hero-sub{
  margin: 0;
  opacity: .9;
}




/* Video hero (responsive ratio-safe) */
.video-hero{
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;  /* wide cinematic */
  height: auto;
  max-height: 280px;
  min-height: 220px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
}
.video-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;      /* keep it filling without stretching */
  object-position: 85% 0%;
}
.video-hero__scrim{
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.00) 100%);
}

/* Small screens: slightly taller so it doesn't feel like a thin strip */
@media (max-width: 420px){
  .video-hero{
    aspect-ratio: 16 / 9;
    max-height: 260px;
    min-height: 220px;
  }
}


/* Re-centering: keep content in a consistent centered column */
:root{ --app-max: 520px; }

main{ max-width: var(--app-max); margin-left:auto; margin-right:auto; }

/* Center the hero cluster */
.home-intro{ max-width: var(--app-max); margin: 0 auto; }
.home-intro-top{ text-align: center; }
.home-intro .home-hero-title,
.home-intro .home-hero-sub{ text-align: center; }

.home-hero-ctas{ max-width: 480px; margin: 14px auto 10px; }
.home-hero-trust{ text-align: center; }

/* Center sections/cards */
.card, .section, .home-section{ max-width: var(--app-max); margin-left:auto; margin-right:auto; }

/* Ensure bottom nav doesn't cover content */
body{ padding-bottom: 90px; }


/* Video hero: match app column width + shorter */
.video-hero{
  max-width: var(--app-max);
  margin-left: auto;
  margin-right: auto;
  border-radius: 18px;
  margin-top: 12px;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  min-height: 220px;
}
.video-hero__video{
  border-radius: 18px;
}
.video-hero__scrim{
  border-radius: 18px;
}
@media (max-width: 420px){
  .video-hero{
    max-height: 200px;
    min-height: 220px;
  }
}


/* Still hero (replaces video hero) */
.still-hero{
  background: rgba(0,0,0,0.55);
  position: relative;
  max-width: var(--app-max);
  margin: 12px auto 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  min-height: 220px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
}
.still-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 85% 0%;
}
.still-hero__scrim{
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.12) 55%,
    rgba(0,0,0,0.00) 100%);
}
@media (max-width: 420px){
  .still-hero{
  background: rgba(0,0,0,0.55);
    max-height: 200px;
    min-height: 220px;
  }
}


/* Structural fix: visual header only, content starts below */
.still-hero{
  background: rgba(0,0,0,0.55); margin-bottom: 20px; }

.home-intro{
  max-width: var(--app-max);
  margin: 0 auto 12px;
  text-align: center;
}
.home-hero-title{ margin: 6px 0 4px; }
.home-hero-sub{ margin: 0 0 12px; opacity:.9; }
.home-hero-ctas{ max-width: 480px; margin: 0 auto 10px; }
.home-hero-trust{ font-size: .9em; opacity:.85; margin-bottom: 10px; }

.card, .section, .home-section{
  max-width: var(--app-max);
  margin-left:auto;
  margin-right:auto;
}


/* Still hero sizing: half-height */
.still-hero{
  background: rgba(0,0,0,0.55);
  max-height: 120px !important;
  min-height: 90px !important;
  aspect-ratio: 21 / 9 !important;
}
@media (max-width: 420px){
  .still-hero{
  background: rgba(0,0,0,0.55);
    max-height: 110px !important;
    min-height: 85px !important;
    aspect-ratio: 21 / 9 !important;
  }
}


/* Header: half the height */
.still-hero{
  background: rgba(0,0,0,0.55);
  max-height: 70px !important;
  min-height: 55px !important;
}
@media (max-width: 420px){
  .still-hero{
  background: rgba(0,0,0,0.55);
    max-height: 65px !important;
    min-height: 50px !important;
  }
}


/* Header width: match app column */
.still-hero{
  background: rgba(0,0,0,0.55);
  width: calc(100% - 24px) !important;
  max-width: var(--app-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.still-hero__img{
  width: 100% !important;
  height: 100% !important;
}


/* Video header inside column */
.still-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 85% 0%;
}

/* Static hero (no video) */
.static-hero{
  display:flex;
  align-items:center;
  justify-content:center;
}
.static-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 40%, rgba(182,242,195,0.18) 0%, rgba(0,0,0,0.00) 55%),
              linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
}
.static-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.static-hero__logo{
  width:116px;
  height:116px;
  border-radius:50%;
  border:2px solid rgba(182,242,195,0.90);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  background:#ffffff;
}
@media (min-width: 720px){
  .static-hero__logo{ width:128px; height:128px; }
}


/* Video header: slight zoom out */
.still-hero__video{
  transform: scale(0.66);
  transform-origin: 50% 0%;
}

/* Video header: letterbox backdrop when zoomed out */
.still-hero{ background: rgba(0,0,0,0.70) !important; }

/* Header visible ratio: 3:2 (taller) */
.still-hero{
  aspect-ratio: 3 / 2 !important;
}


/* FORCE header to be taller (3:2) by removing old height clamps */
.still-hero{
  aspect-ratio: 3 / 2 !important;
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
}
/* Give it a sensible tall presence without going huge */
.still-hero{
  width: calc(100% - 24px) !important;
  max-width: var(--app-max) !important;
}
@media (max-width: 420px){
  .still-hero{
    /* ensure it's visibly taller on phones */
    min-height: 220px !important;
  }
}
@media (min-width: 421px){
  .still-hero{
    min-height: 220px !important;
  }
}


/* Google Places Autocomplete dropdown - keep above fixed nav & cards */
.pac-container{z-index:99999!important;}
.pac-container .pac-item{font-size:14px;}


/* Quote widget: vehicle pick tiles */
.qq4-pick{ cursor:pointer; position:relative; }
.qq4-pick:active{ transform: translateY(1px); }
.qq4-pick-cta{ font-size:12px; opacity:.8; margin-top:6px; }
.qq4-pick.is-selected{
  outline: 2px solid rgba(212, 175, 55, .95);
  box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}
.qq4-pick.is-selected .qq4-pick-cta{
  opacity:1;
  font-weight:700;
}
.qq4-pick.is-selected::after{
  content:"Selected";
  position:absolute;
  top:10px;
  right:10px;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(212,175,55,.95);
  color:#0b0f0e;
  font-weight:800;
}


/* POLISH PASS: Quote & Book */
.page-subtitle{ max-width: var(--app-max); margin: -6px auto 14px; text-align:center; opacity:.85; }

.qq4-stepper{
  display:flex; gap:8px; justify-content:center; align-items:center;
  font-size:12px; opacity:.85; margin-bottom:12px;
}
.qq4-stepper span{
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.08);
}
.qq4-stepper span.on{
  background: rgba(212,175,55,.95);
  color:#0b0f0e;
  font-weight:800;
}

/* Make location inputs feel app-like */
#qq4-widget .field label{ font-size:12px; opacity:.8; margin-bottom:6px; }
#qq4-widget input[type="text"]{
  font-size:16px;
  padding:14px 14px;
  border-radius:14px;
}
#qq4-widget .grid-2{ display:grid; grid-template-columns: 1fr; gap:12px; }

/* Vehicle tiles - make them look like selectable cards */
.qq4-results{ gap:12px; }
.qq4-pick{
  padding:14px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
}
.qq4-price-value{
  font-size: 28px;
  letter-spacing: -0.02em;
}
.qq4-price-label{ font-size: 13px; opacity:.9; font-weight:800; }
.qq4-pick-cta{ margin-top:8px; font-size:12px; opacity:.75; }
.qq4-pick.is-selected{
  outline: 2px solid rgba(212, 175, 55, .98);
  background: rgba(212,175,55,.10);
}

/* Continue button */
#qq4-continue{ border-radius:16px; padding:14px 16px; font-size:16px; }

/* Hide booking wizard until continue is pressed */
#bookingWizardMount.is-hidden{ display:none; }

/* Places dropdown always visible above nav */
.pac-container{ z-index: 9999999 !important; }


/* ENTRY GATE */
.gate-body{ margin:0; background:#000; }
.gate{ position:relative; height:100vh; width:100vw; overflow:hidden; }
.gate-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0%; filter:saturate(1.05) contrast(1.05); }
.gate-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; gap:12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.80) 75%, rgba(0,0,0,0.92) 100%);
}
.gate-title{ font-size:22px; font-weight:900; letter-spacing:-0.02em; }
.gate-sub{ opacity:.86; margin-top:4px; }
.gate-cta{ width:100%; padding:14px 16px; border-radius:16px; font-size:16px; }
.gate-skip{ color: rgba(255,255,255,.75); text-align:center; font-size:13px; text-decoration:none; }

/* 2-UP WIZARD */
.wizard-shell{ max-width: var(--app-max); margin: 0 auto; }
.wiz-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.wiz-title{ font-weight:900; letter-spacing:-0.02em; }
.wiz-progress{ font-size:12px; opacity:.8; background: rgba(255,255,255,.08); padding:6px 10px; border-radius:999px; }
.wiz-panel h2{ margin:0 0 12px; }
.two-up{ display:grid; grid-template-columns: 1fr; gap:12px; }
.field input, .field select{ padding:14px 14px; border-radius:14px; font-size:16px; }
.choice-row{ display:flex; gap:10px; }
.choice{
  flex:1; padding:14px 12px; border-radius:16px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  color: #fff; font-weight:800;
}
.choice.is-selected{ outline:2px solid rgba(212,175,55,.98); background: rgba(212,175,55,.12); }
.wiz-nav{ display:flex; gap:10px; margin-top:14px; }
.wiz-nav .btn{ flex:1; border-radius:16px; padding:14px 16px; font-size:16px; }

.wiz-step{ display:none; }
.wiz-step.is-active{ display:block; }

.price-picks{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.price-tile{
  padding:14px 14px; border-radius:16px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
}
.price-tile.is-selected{ outline:2px solid rgba(212,175,55,.98); background: rgba(212,175,55,.12); }
.pt-label{ font-weight:900; opacity:.92; }
.pt-price{ font-size:28px; font-weight:900; letter-spacing:-0.02em; margin-top:8px; }
.pt-sub{ font-size:12px; opacity:.75; margin-top:8px; }

/* Places dropdown */
.pac-container{ z-index: 9999999 !important; }


/* MAGIC POLISH: app feel */
body{ background: radial-gradient(1200px 800px at 50% -10%, rgba(212,175,55,.14), rgba(0,0,0,0) 55%), var(--bg); }
.card{ box-shadow: 0 14px 38px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); }
.wiz-step{ animation: wizIn .22s ease-out; }
@keyframes wizIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform: translateY(0);} }
.field input::placeholder{ opacity:.55; }
.price-tile{ transition: transform .08s ease, box-shadow .12s ease, background .12s ease; }
.price-tile:active{ transform: translateY(1px); }
.choice{ transition: transform .08s ease, background .12s ease; }
.choice:active{ transform: translateY(1px); }



/* =========================
   PRO THEME PACK v13.13.0
   Aesthetic-only overhaul
   ========================= */

:root{
  --bg: #071A16;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.74);
  --muted2: rgba(255,255,255,.58);
  --gold: rgba(212,175,55,.98);
  --goldWash: rgba(212,175,55,.14);
  --shadow: 0 18px 44px rgba(0,0,0,.58);
  --shadow2: 0 10px 28px rgba(0,0,0,.46);

  --r-card: 20px;
  --r-input: 16px;
  --r-pill: 999px;

  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;

  --fs-0: 12px;
  --fs-1: 14px;
  --fs-2: 16px;
  --fs-3: 18px;
  --fs-4: 22px;
  --fs-5: 28px;
}

html, body{
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 50% -10%, var(--goldWash), rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at 85% 10%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  font-size: var(--fs-2);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

h1,h2,h3{
  letter-spacing: -0.02em;
  line-height: 1.18;
}

h1{ font-size: var(--fs-5); font-weight: 900; }
h2{ font-size: var(--fs-4); font-weight: 900; }
h3{ font-size: var(--fs-3); font-weight: 800; }

.muted{ color: var(--muted); }
small, .small{ font-size: var(--fs-0); color: var(--muted2); }

a{ color: rgba(255,255,255,.9); }
a:hover{ opacity:.92; }

.card{
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

hr, .divider{
  border: none;
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: var(--s-4) 0;
}

/* Buttons */
.btn{
  border-radius: var(--r-input);
  padding: 14px 16px;
  font-size: var(--fs-2);
  font-weight: 850;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.btn.primary{
  background: var(--gold);
  color: #0b0f0e;
  border: 0;
  box-shadow: 0 10px 24px rgba(212,175,55,.18);
}
.btn.primary:active{ transform: translateY(1px); }
.btn.primary:hover{ filter: brightness(1.02); }

.btn.ghost, .btn.secondary{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: rgba(255,255,255,.92);
}
.btn.ghost:hover, .btn.secondary:hover{ background: rgba(255,255,255,.08); }
.btn.ghost:active, .btn.secondary:active{ transform: translateY(1px); }

.btn:disabled{
  opacity: .55;
  filter: grayscale(.2);
  transform: none !important;
}

/* Inputs */
.field label{
  font-size: var(--fs-0);
  font-weight: 680;
  color: var(--muted);
  margin-bottom: 6px;
}

.field input, .field select, .field textarea{
  border-radius: var(--r-input);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.94);
  padding: 14px 14px;
  font-size: var(--fs-2);
  outline: none;
}

.field input::placeholder{ color: rgba(255,255,255,.50); }

.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 0 0 4px rgba(212,175,55,.16);
}

/* Wizard */
.wizard-shell{
  max-width: var(--app-max);
  margin: 0 auto;
}

.wiz-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.wiz-title{
  font-weight: 950;
  font-size: var(--fs-3);
}

.wiz-progress{
  font-size: var(--fs-0);
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: var(--r-pill);
}

.wiz-panel h2{
  margin: 0 0 var(--s-3);
}

.two-up{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

.choice-row{ display:flex; gap: var(--s-2); }

.choice{
  flex:1;
  padding: 14px 12px;
  border-radius: var(--r-card);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.94);
  font-weight: 900;
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease;
}
.choice:active{ transform: translateY(1px); }
.choice.is-selected{
  outline: 2px solid rgba(212,175,55,.90);
  background: rgba(212,175,55,.10);
  box-shadow: 0 10px 22px rgba(212,175,55,.10);
}

.wiz-nav{
  display:flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom));
  padding-top: var(--s-2);
  background: linear-gradient(180deg, rgba(7,26,22,0), rgba(7,26,22,.88) 28%, rgba(7,26,22,.96));
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.wiz-nav .btn{ flex:1; }

/* Price tiles */
.price-picks{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.price-tile{
  border-radius: var(--r-card);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px 14px;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  box-shadow: var(--shadow2);
}
.price-tile:active{ transform: translateY(1px); }
.price-tile.is-selected{
  outline: 2px solid rgba(212,175,55,.90);
  border-color: rgba(212,175,55,.55);
  background: rgba(212,175,55,.10);
}
.pt-label{ font-weight: 950; color: rgba(255,255,255,.92); }
.pt-price{ font-size: 30px; font-weight: 950; letter-spacing: -0.02em; margin-top: 10px; }
.pt-sub{ font-size: var(--fs-0); color: rgba(255,255,255,.68); margin-top: 10px; }

/* Entry gate polish */
.gate-video{
  filter: saturate(1.08) contrast(1.08);
  transform: scale(1.02);
}
.gate-overlay{
  padding: 26px;
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.72) 68%, rgba(0,0,0,.92) 100%);
}
.gate-title{
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.03em;
}
.gate-sub{ color: rgba(255,255,255,.82); }
.gate-cta{
  border-radius: var(--r-card);
  padding: 14px 16px;
}
.gate-skip{
  opacity:.78;
  margin-bottom: calc(env(safe-area-inset-bottom) + 6px);
}

/* Bottom nav polish */
.bottom-nav{
  background: rgba(6,16,14,.88);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.bottom-nav a{
  border-radius: 14px;
  padding: 10px 10px;
}
.bottom-nav a.active{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.bottom-nav a.active .label{
  color: rgba(255,255,255,.96);
  font-weight: 900;
}

/* Places dropdown always on top */
.pac-container{ z-index: 9999999 !important; }

/* Motion */
.wiz-step{ animation: proStepIn .22s ease-out; }
@keyframes proStepIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform: translateY(0);} }


/* Big Polish additions */
.review-strip{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  padding: 8px 2px 2px;
  scroll-snap-type: x mandatory;
}
.review-strip::-webkit-scrollbar{ display:none; }
.review-shot{
  width: 78%;
  max-width: 360px;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.46);
  scroll-snap-align: start;
}
.still-hero{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  margin-bottom: 18px;
}
.still-hero__video{
  width:100%;
  height:auto;
  display:block;
  object-fit: cover;
  object-position: top;
}
.home-hero-ctas{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}
.home-hero-trust{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-align:center;
}
@media(min-width: 520px){
  .home-hero-ctas{ grid-template-columns: 1fr 1fr 1fr; }
  .review-shot{ width: 320px; }
}

/* v13.14.1 bundle polish */
.wiz-rail{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  margin: 10px 0 10px;
}
.wiz-bar{
  height:100%;
  width: 12%;
  border-radius: 999px;
  background: rgba(212,175,55,.92);
  box-shadow: 0 10px 22px rgba(212,175,55,.18);
  transition: width .22s ease;
}
.wiz-crumbs{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  margin-bottom: 12px;
}
.crumb{ padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
.crumb.is-active{ color: rgba(255,255,255,.94); border-color: rgba(212,175,55,.42); background: rgba(212,175,55,.12); font-weight: 900; }
.crumb-sep{ opacity:.45; }

.wiz-summary{
  padding: 14px 14px;
  margin-bottom: 14px;
}
.sum-row{ display:flex; gap: 12px; align-items:flex-start; justify-content:space-between; }
.sum-k{ font-size: 12px; color: rgba(255,255,255,.62); font-weight: 800; min-width: 64px; }
.sum-v{ font-size: 14px; color: rgba(255,255,255,.92); font-weight: 850; text-align:right; }

.pt-price.is-loading{
  position: relative;
  color: rgba(255,255,255,.38);
}
.pt-price.is-loading::after{
  content:'';
  position:absolute;
  left:0; top:50%;
  transform: translateY(-50%);
  width: 100%;
  height: 18px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  background-size: 220% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 220% 0; }
}

.next-list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.86);
}
.next-list li{ margin: 10px 0; }


/* Pro Bundle v13.14.2 */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.chip{
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 850;
  font-size: 13px;
}
.chip:active{ transform: translateY(1px); }

.req-block{ margin-top: 10px; }
.req-title{ font-weight: 900; font-size: 13px; color: rgba(255,255,255,.80); margin: 8px 0 10px; }
.req-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.req-chip{
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 850;
  font-size: 13px;
}
.req-chip.is-selected{
  outline: 2px solid rgba(212,175,55,.92);
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.55);
}
.review-card .row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.review-card .row:last-child{ border-bottom:0; }
.review-card .k{ color: rgba(255,255,255,.70); font-size: 12px; font-weight: 800; }
.review-card .v{ color: rgba(255,255,255,.94); font-weight: 900; text-align:right; }
.review-card .pill{ display:inline-block; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size:12px; font-weight:900; }

.proof-tiles{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 14px 0 4px;
}
.proof-tile{
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.proof-tile .pt{
  font-weight: 950;
  letter-spacing: .2px;
}
.proof-tile .ps{
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  font-weight: 680;
  font-size: 13px;
}
@media(min-width:520px){
  .proof-tiles{ grid-template-columns: 1fr 1fr 1fr; }
}

.tiny-footer-trust{
  margin: 18px auto 90px;
  max-width: var(--app-max);
  text-align:center;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

.reviews-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 90px;
}
.review-card{ padding: 14px; }
.review-card__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 10px;
}
.review-card__name{ font-weight: 900; }
.review-card__stars{ opacity:.85; letter-spacing:.06em; }
.review-card__img{
  width:100%;
  height:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}
@media(min-width: 760px){
  .reviews-grid{ grid-template-columns: 1fr 1fr; }
}


/* Bite 5: icon consistency */
.app-nav .nav-ico{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.app-nav svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Bite 5: helper cues */
.helper-hint{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
  border-radius: 14px;
}
.helper-hint strong{ color: rgba(255,255,255,.92); }

/* Bite 7: hardening / UX */
.btn:focus-visible, .chip:focus-visible, .nav-item:focus-visible{
  outline: 2px solid rgba(255,255,255,.40);
  outline-offset: 3px;
}


/* Bite 8: Bigger font for readability */
:root{
  --base-font: 17px;
  --h1: 26px;
  --h2: 20px;
  --h3: 18px;
  --label: 14px;
}
html{ font-size: var(--base-font); }
body{ font-size: 1rem; line-height: 1.45; }
h1{ font-size: var(--h1); }
h2{ font-size: var(--h2); }
h3{ font-size: var(--h3); }

.field label{ font-size: var(--label); }
.field input, .field select, .field textarea{
  font-size: 16px; /* iOS zoom-safe */
}
.btn{
  font-size: 16px;
}
.app-nav .nav-label{
  font-size: 12.5px;
  font-weight: 900;
}
.subtle, .muted{ font-size: 0.95rem; }
.wiz-title{ font-size: 19px; }
.wiz-crumbs{ font-size: 13px; }
.helper-hint{ font-size: 14px; }

/* Portal completed summary modal */
@media print{
  .app-nav, #completedModal button, #logoutBtn, #waSupport{ display:none !important; }
  #completedModal{ position:static !important; inset:auto !important; background:none !important; padding:0 !important; }
}


/* --- Text reviews (cards) --- */
.review-strip--text{
  display:flex;
  gap:14px;
  overflow:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.review-strip--text::-webkit-scrollbar{height:8px}
.review-strip--text::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(255,255,255,0.12)}
.review-text-card{
  flex:0 0 280px;
  scroll-snap-align:start;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(0,0,0,0.28);
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
  padding:14px 14px 12px;
}
.review-text-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.review-text-name{
  font-weight:700;
  letter-spacing:0.2px;
}
.review-text-stars{
  font-size:12px;
  opacity:0.85;
}
.review-text-quote p{
  margin:0 0 8px;
  font-size:14px;
  line-height:1.35;
  opacity:0.92;
}
.review-text-quote p:last-child{margin-bottom:0}

.reviews-grid--text{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:14px;
}
@media(min-width:720px){
  .reviews-grid--text{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:1050px){
  .reviews-grid--text{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.reviews-grid--text .review-text-card{
  flex:auto;
}

/* --- Home: Example prices --- */
.ex-price-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px){
  .ex-price-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.ex-price{
  appearance:none;
  width:100%;
  text-align:left;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 14px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.ex-price:active{ transform: scale(.99); }
.ex-price:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }

.ex-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}

.ex-route{
  font-weight: 850;
  letter-spacing: .2px;
  font-size: 14px;
  line-height: 1.2;
}

.ex-tag{
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(15,47,31,.55);
  border: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}

.ex-prices{
  font-size: 14px;
  opacity: .96;
}

.ex-prices b{ font-weight: 900; }
.ex-prices .dot{ opacity: .55; padding: 0 6px; }

.ex-cta{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 850;
  opacity: .88;
}


/* Custom Places suggestion list fallback (keeps suggestions visible even if Google's pac-container fails) */
.atw-suggest-list{
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,10,12,0.92);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.atw-suggest-item{
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.92);
  font: inherit;
  cursor: pointer;
}
.atw-suggest-item:hover,
.atw-suggest-item:focus{
  outline: none;
  background: rgba(255,215,120,0.10);
}


/* =========================================================
   Executive Light Skin (B) — visual-only reskin
   Goal: premium, calm, editorial spacing + herb-green / parchment palette.
   No behavioural/logic changes.
   ========================================================= */

:root{
  /* Core canvas */
  --bg: #F7F5EF;                 /* warm off-white */
  --card: rgba(255,255,255,.78); /* soft paper card */
  --card2: rgba(245,238,220,.82);/* warm beige panel */
  --border: rgba(15,47,31,.14);  /* green-tinted border */
  --text: rgba(11,15,13,.92);    /* charcoal */
  --muted: rgba(11,15,13,.62);

  /* Brand palette */
  --ate-green:#0f2f1f;
  --ate-green-2:#143a27;
  --ate-gold:#d6c28b;
  --ate-cream:#F7F5EF;
  --ate-ink:#0b0f0d;

  /* Typography + rhythm */
  --radius: 14px;
  --shadow-soft: 0 18px 45px rgba(15,47,31,.14);
}

/* Canvas */
html, body{background: var(--bg) !important;}
body{
  color: var(--text) !important;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(214,194,139,.20), transparent 60%),
    radial-gradient(900px 520px at 100% 20%, rgba(15,47,31,.14), transparent 55%),
    linear-gradient(180deg, #F7F5EF 0%, #F3EFE4 100%) !important;
}

/* Links */
a{color: var(--ate-green); text-underline-offset: 3px;}
a:hover{color: var(--ate-green-2);}

/* Header */
.site-header{
  background: rgba(247,245,239,.70);
  border-bottom: 1px solid rgba(15,47,31,.12) !important;
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px);
}
.brand-text h1{letter-spacing: -0.2px;}
.tagline{color: var(--muted) !important;}

/* Main wrapper: more editorial breathing space */
.simplified-main{
  padding-bottom: 110px; /* room above bottom nav */
}

/* HERO: cinematic block */
.hero.simplified-hero{
  min-height: 70vh;
  padding: 0;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(214,194,139,.22), transparent 55%),
    radial-gradient(900px 520px at 88% 12%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, #0f2f1f 0%, #163a28 40%, #F5EEDC 100%);
  border-bottom: 1px solid rgba(15,47,31,.10);
}

/* Hero content wrapper */
.simplified-hero__content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 16px 36px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: start;
}

/* On smaller screens: stack */
@media (max-width: 980px){
  .simplified-hero__content{grid-template-columns: 1fr; padding-top: 44px;}
}

/* Hero title/sub title */
.hero-title{
  font-size: clamp(34px, 4.4vw, 64px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.6px;
  color: rgba(247,245,239,.98) !important;
  margin: 0 0 14px !important;
  font-weight: 600 !important;
}
.hero-sub{
  font-size: clamp(16px, 1.5vw, 20px) !important;
  line-height: 1.7 !important;
  color: rgba(247,245,239,.82) !important;
  margin: 0 0 26px !important;
  max-width: 52ch;
}

/* Quote widget card becomes “paper on cinematic” */
.calc-card.quote-widget{
  background: rgba(247,245,239,.92) !important;
  border: 1px solid rgba(15,47,31,.14) !important;
  box-shadow: 0 22px 55px rgba(15,47,31,.18) !important;
  border-radius: 16px !important;
}

/* Quote widget typography */
.qw-content h3{
  font-size: 18px !important;
  letter-spacing: -0.2px;
  color: rgba(11,15,13,.88) !important;
  margin-bottom: 14px !important;
}
.qq-label{
  font-size: 13px !important;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: rgba(11,15,13,.60) !important;
}
.qq-input{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,47,31,.14) !important;
  color: rgba(11,15,13,.92) !important;
  border-radius: 12px !important;
  padding: 14px 14px !important;
  font-size: 16px !important;
}
.qq-input::placeholder{color: rgba(11,15,13,.46);}

/* --- Quick Picks (Wirral + airports) --- */
.ate-picks{ margin-top:10px; }
.ate-picks[aria-hidden="true"]{ display:none; }
.ate-picks__grid{ display:flex; flex-wrap:wrap; gap:8px; }
.ate-pick{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  color: rgba(0,0,0,.78);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.ate-pick:hover{ background: rgba(255,255,255,.70); }
.ate-pick:active{ transform: translateY(1px); }

/* Prices display */
.qq4-price{
  background: rgba(245,238,220,.80) !important;
  border: 1px solid rgba(15,47,31,.10) !important;
  border-radius: 14px !important;
}
.qq4-price-label{color: rgba(11,15,13,.60) !important;}
.qq4-price-value{color: rgba(11,15,13,.92) !important; letter-spacing: -0.3px;}

/* CTA block under widget */
.simplified-cta{
  margin-top: 18px !important;
}
.btn-primary{
  background: var(--ate-green) !important;
  color: rgba(247,245,239,.98) !important;
  border: 1px solid rgba(15,47,31,.12) !important;
  box-shadow: 0 14px 32px rgba(15,47,31,.18) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.btn-primary:hover{background: var(--ate-green-2) !important;}
.microcopy{color: rgba(247,245,239,.72) !important;}
.micro-links a{color: rgba(247,245,239,.86) !important;}

/* Trust strip (reusing existing bullets as the strip) */
.trust-bullets{
  margin-top: 26px !important;
  background: rgba(15,47,31,.92);
  border: 1px solid rgba(214,194,139,.22);
  border-radius: 16px;
  padding: 18px 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.trust-bullet{
  color: rgba(247,245,239,.92) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
}
@media (max-width: 980px){
  .trust-bullets{grid-template-columns: 1fr; }
}

/* Bottom nav: light paper dock */
.bottom-nav{
  background: rgba(247,245,239,.86) !important;
  border-top: 1px solid rgba(15,47,31,.12) !important;
  backdrop-filter: blur(12px);
}
.bottom-nav__item{color: rgba(11,15,13,.70) !important;}
.bottom-nav__item--active{color: var(--ate-green) !important;}
.bottom-nav__icon{color: currentColor !important;}

/* Generic cards/panels across site */
.card, .panel, .box, .calc-card, .booking-card, .wizard-card, .price-card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

/* Headings across pages */
h1,h2,h3{letter-spacing: -0.35px;}
p{line-height: 1.75;}


/* =========================================================
   Clean aesthetic upgrade (light executive) – vNEXT
   Goal: reduce "moody" feel, increase whitespace + clarity,
   keep ATE herb-green + gold accents.
   ========================================================= */

/* Light paper base for all normal pages (keep intro gate dark) */
body:not(.gate-body){
  --paper:#F7F5EF;
  --ink:#1C1F1D;
  --ink2: rgba(28,31,29,.70);
  --ate-green:#0f2f1f;
  --ate-green-2:#143a27;
  --ate-gold:#d6c28b;

  --bg: var(--paper);
  --text: rgba(28,31,29,.92);
  --muted: rgba(28,31,29,.72);
  --muted2: rgba(28,31,29,.58);
  --border: rgba(15,47,31,.12);
  --card: rgba(255,255,255,.76);
  --card2: rgba(255,255,255,.88);
  --shadow: 0 14px 40px rgba(0,0,0,.10);

  background: radial-gradient(900px 500px at 10% 0%, rgba(214,194,139,.18), transparent 60%),
              radial-gradient(900px 500px at 100% 20%, rgba(15,47,31,.10), transparent 55%),
              linear-gradient(180deg, #fbfaf6 0%, #f6f2e7 100%);
  color: var(--text);
}

/* Header + top nav: cleaner, less glassy */
body:not(.gate-body) header,
body:not(.gate-body) .topbar,
body:not(.gate-body) .site-header{
  background: rgba(247,245,239,.86) !important;
  border-bottom: 1px solid rgba(15,47,31,.12) !important;
  backdrop-filter: blur(10px);
}

/* Links & accents */
body:not(.gate-body) a{ color: var(--ate-green); }
body:not(.gate-body) a:hover{ color: var(--ate-green-2); }

/* Buttons: make primary feel premium but calm */
body:not(.gate-body) .btn.primary,
body:not(.gate-body) .btn--primary{
  background: linear-gradient(180deg, rgba(15,47,31,1), rgba(10,33,22,1)) !important;
  color: #F7F5EF !important;
  border: 1px solid rgba(15,47,31,.22) !important;
  box-shadow: 0 10px 22px rgba(15,47,31,.14);
}
body:not(.gate-body) .btn.ghost,
body:not(.gate-body) .btn--ghost{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(15,47,31,.12) !important;
  color: rgba(28,31,29,.86) !important;
}

/* Cards/panels: less neon, more paper */
body:not(.gate-body) .card,
body:not(.gate-body) .panel,
body:not(.gate-body) .ate-card,
body:not(.gate-body) .box,
body:not(.gate-body) .calc-card,
body:not(.gate-body) .price-card,
body:not(.gate-body) .booking-card,
body:not(.gate-body) .wizard-card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(8px);
}

/* Inputs: bigger, cleaner */
body:not(.gate-body) input,
body:not(.gate-body) select,
body:not(.gate-body) textarea{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,47,31,.16) !important;
  color: rgba(28,31,29,.92) !important;
}
body:not(.gate-body) input::placeholder,
body:not(.gate-body) textarea::placeholder{ color: rgba(28,31,29,.45) !important; }
body:not(.gate-body) input:focus,
body:not(.gate-body) select:focus,
body:not(.gate-body) textarea:focus{
  border-color: rgba(15,47,31,.40) !important;
  box-shadow: 0 0 0 4px rgba(15,47,31,.09) !important;
}

/* Typography: clearer hierarchy */
body:not(.gate-body) h1, body:not(.gate-body) h2, body:not(.gate-body) h3{ color: var(--ate-green) !important; }
body:not(.gate-body) p{ color: rgba(28,31,29,.84) !important; }

/* Reduce heavy white-on-dark remnants */
body:not(.gate-body) .muted,
body:not(.gate-body) .subtle,
body:not(.gate-body) .help{ color: var(--muted) !important; }

/* Bottom nav already uses paper dock – ensure icons/labels match */
body:not(.gate-body) .bottom-nav__item{ color: rgba(28,31,29,.72) !important; }
body:not(.gate-body) .bottom-nav__item--active{ color: var(--ate-green) !important; }

/* Tables (prices etc.): lighten stripes */
body:not(.gate-body) table,
body:not(.gate-body) .table{
  background: rgba(255,255,255,.66) !important;
  border-color: rgba(15,47,31,.12) !important;
}
body:not(.gate-body) th{ color: rgba(28,31,29,.86) !important; }
body:not(.gate-body) td{ color: rgba(28,31,29,.80) !important; }

/* =========================================================
   CLEAN AESTHETIC OVERHAUL (global)
   - One consistent herb-green + cream palette
   - Removes the moody/dark treatment site-wide
   ========================================================= */

body{
  background: radial-gradient(900px 520px at 8% 0%, rgba(214,194,139,.22), transparent 60%),
              radial-gradient(900px 520px at 100% 18%, rgba(15,47,31,.10), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) !important;
  color: var(--text) !important;
}

/* Header / nav */
.site-header, .simplified-header, .topbar{
  background: rgba(247,245,239,.86) !important;
  border-bottom: 1px solid rgba(15,47,31,.10) !important;
  backdrop-filter: blur(10px);
}
.site-header a, .topbar a{ color: rgba(15,47,31,.88) !important; }
.site-header a:hover, .topbar a:hover{ color: var(--ate-green) !important; }

/* Surfaces */
.card, .panel, .ate-card, .hero-card, .feature-card, .pricing-card, .quote-card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Text */
h1,h2,h3{ color: var(--ate-green) !important; }
small, .muted, .subtle, .hint{ color: var(--muted) !important; }

/* Inputs */
input, select, textarea{
  background: rgba(255,255,255,.96) !important;
  color: rgba(11,15,13,.92) !important;
  border: 1px solid rgba(15,47,31,.16) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(15,47,31,.42) !important;
  box-shadow: 0 0 0 4px rgba(15,47,31,.10) !important;
}

/* Buttons */
.btn.primary, button.primary, .btn--primary{
  background: linear-gradient(180deg, var(--ate-green-2), var(--ate-green)) !important;
  color: var(--ate-cream) !important;
  border: 1px solid rgba(15,47,31,.22) !important;
  box-shadow: 0 12px 28px rgba(15,47,31,.18) !important;
}
.btn.ghost, button.ghost, .btn--ghost{
  background: rgba(15,47,31,.06) !important;
  color: var(--ate-green) !important;
  border: 1px solid rgba(15,47,31,.14) !important;
  box-shadow: none !important;
}

/* Bottom nav */
.bottom-nav, .app-nav{
  background: rgba(247,245,239,.86) !important;
  border-top: 1px solid rgba(15,47,31,.10) !important;
  backdrop-filter: blur(10px);
}
.bottom-nav a, .app-nav a{ color: rgba(11,15,13,.70) !important; }
.bottom-nav a.active, .app-nav a.is-active{ color: var(--ate-green) !important; }

/* Footer */
.footer, footer{
  background: transparent !important;
  border-top: 1px solid rgba(15,47,31,.10) !important;
  color: var(--muted) !important;
}

/* ==========================================================
   POLISH OVERRIDES v3 (Sharper, calmer, more premium)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap');

:root{
  /* Single scheme palette */
  --ate-bg: #fbf7ee;          /* warm cream */
  --ate-surface: #fffdf8;     /* paper */
  --ate-ink: #0f172a;         /* slate-900 */
  --ate-muted: #475569;       /* slate-600 */
  --ate-border: rgba(15,23,42,.10);
  --ate-green: #1f4d3a;       /* herb green */
  --ate-green-2: #2b6b4f;
  --ate-gold: #c7a23a;

  /* Type */
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head: 'Inter Tight', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Layout + shape */
  --app-max: 860px;           /* desktop width, still compact */
  --radius-1: 12px;
  --radius-2: 16px;
  --radius-3: 22px;

  /* Shadows (subtle) */
  --shadow-1: 0 8px 18px rgba(15,23,42,.08);
  --shadow-2: 0 18px 40px rgba(15,23,42,.10);
}

html, body{
  font-family: var(--font-body) !important;
  color: var(--ate-ink) !important;
  background: var(--ate-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,.h1,.h2,.h3{
  font-family: var(--font-head) !important;
  letter-spacing: -0.02em;
}

p,li,small, .muted{
  color: var(--ate-muted) !important;
  line-height: 1.55;
}

/* Keep content tidy on desktop */
.container, .wrap, .page, main{
  max-width: var(--app-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Global surfaces */
.card, .panel, .box, .section-card, .quote-card, .pricing-card, .review-card, .tile{
  background: var(--ate-surface) !important;
  border: 1px solid var(--ate-border) !important;
  border-radius: var(--radius-2) !important;
  box-shadow: var(--shadow-1) !important;
}

/* Buttons */
.btn, button, .button, a.btn{
  border-radius: var(--radius-2) !important;
  font-weight: 600;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.btn.primary, .btn-primary, button.primary, .button.primary{
  background: var(--ate-green) !important;
  color: #fff !important;
  border: 1px solid rgba(31,77,58,.55) !important;
  box-shadow: 0 10px 22px rgba(31,77,58,.18) !important;
}

.btn.primary:hover, .btn-primary:hover, button.primary:hover, .button.primary:hover{
  background: var(--ate-green-2) !important;
  box-shadow: 0 14px 28px rgba(31,77,58,.22) !important;
}

.btn.ghost, .btn-ghost, .btn-secondary, button.ghost{
  background: rgba(255,255,255,.72) !important;
  color: var(--ate-ink) !important;
  border: 1px solid var(--ate-border) !important;
}

.btn:active, button:active{ transform: translateY(1px) scale(.99); }

/* Inputs */
input, select, textarea{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  border-radius: var(--radius-1) !important;
  padding: 14px 14px !important;
  line-height: 1.2;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(31,77,58,.55) !important;
  box-shadow: 0 0 0 4px rgba(31,77,58,.14) !important;
}

label{ font-weight: 600; color: var(--ate-ink) !important; }

/* Wizard polish (Book2) */
.progress, .progressbar, .stepper{
  background: rgba(15,23,42,.06) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.progress .bar, .progressbar .bar, .stepper .fill{
  background: linear-gradient(90deg, var(--ate-green), var(--ate-green-2)) !important;
}

.step__error, .error-box, .notice.error{
  background: rgba(199,162,58,.10) !important;
  border: 1px solid rgba(199,162,58,.32) !important;
  color: var(--ate-ink) !important;
  border-radius: var(--radius-2) !important;
}

/* Nav cleanup */
.nav, header, .top-nav{
  background: rgba(251,247,238,.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ate-border) !important;
}

.bottom-nav, .bottom-tabs{
  background: rgba(255,253,248,.92) !important;
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ate-border) !important;
}

/* Remove any leftover heavy effects */
.glow, .neon, .glass, .frost{ box-shadow:none !important; filter:none !important; }

/* Better spacing rhythm */
section{ padding-top: 22px; padding-bottom: 22px; }

/* Tighten headings + avoid huge gaps */
h1{ margin-bottom: 10px !important; }
h2{ margin-bottom: 10px !important; }
h3{ margin-bottom: 8px !important; }


/* ==========================================================
   POLISH OVERRIDES v4 (Micro-detail pass)
   ========================================================== */
:root{
  --ate-fs-body: 16px;
  --ate-fs-small: 13px;
  --ate-fs-h1: 34px;
  --ate-fs-h2: 24px;
  --ate-fs-h3: 18px;
}

body{ font-size: var(--ate-fs-body) !important; }
small, .small, .hint, .helper{ font-size: var(--ate-fs-small) !important; }

h1{ font-size: var(--ate-fs-h1) !important; line-height: 1.15; }
h2{ font-size: var(--ate-fs-h2) !important; line-height: 1.2; }
h3{ font-size: var(--ate-fs-h3) !important; line-height: 1.25; }

@media (min-width: 900px){
  :root{ --ate-fs-body: 17px; --ate-fs-h1: 38px; --ate-fs-h2: 26px; }
}

/* Button sizing consistency */
.btn, button, .button, a.btn{ padding: 12px 16px !important; }
.btn.btn-block, .btn-block{ width: 100%; }

/* Softer card hover (desktop) */
@media (hover:hover){
  .card:hover, .panel:hover, .pricing-card:hover, .tile:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2) !important; }
}

/* Links: calmer, consistent */
a{ color: var(--ate-green) !important; text-underline-offset: 3px; }
a:hover{ color: var(--ate-green-2) !important; }

/* Dividers */
hr, .divider{ border-color: var(--ate-border) !important; opacity: 1 !important; }

/* Tables / price rows */
table{ border-collapse: separate; border-spacing: 0; }
tr{ background: transparent; }

/* Reduce any remaining gradient text */
.gradient-text, .gold-text{
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ==========================================================
   THEME OVERRIDES v5 (Green background + Gold accents)
   Single consistent design system across every page.
   ========================================================== */
:root{
  /* Core palette */
  --ate-green:#0f2f1f;
  --ate-green-2:#143a27;
  --ate-green-3:#071a16;
  --ate-gold:#d6c28b;
  --ate-gold-2:#bfa765;
  --ate-cream:#f7f5ef;

  /* System tokens */
  --bg: var(--ate-green-3);
  --bg-2: #0b241f;
  --text: rgba(247,245,239,.94);
  --muted: rgba(247,245,239,.72);
  --muted2: rgba(247,245,239,.58);

  --paper: rgba(255,255,255,.06);
  --paper-2: rgba(255,255,255,.045);
  --ate-border: rgba(214,194,139,.18);
  --ate-border-2: rgba(255,255,255,.08);

  --shadow: 0 18px 46px rgba(0,0,0,.38);
  --shadow-2: 0 10px 26px rgba(0,0,0,.32);
  --radius: 18px;
  --radius-sm: 14px;
  --tap: 52px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

html, body{ background: var(--bg) !important; }
body{
  color: var(--text) !important;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(214,194,139,.14), rgba(0,0,0,0) 55%),
    radial-gradient(1000px 700px at 110% 10%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) !important;
}

/* Typography + hierarchy */
h1,h2,h3{ color: var(--ate-cream) !important; }
p,li,span,div{ color: inherit; }

/* Links */
a{ color: var(--ate-gold) !important; }
a:hover{ color: var(--ate-gold-2) !important; }

/* Surfaces */
.card, .panel, .ate-card, .tile, .pricing-card, .quote-card, .faq-item, .review-card{
  background: var(--paper) !important;
  border: 1px solid var(--ate-border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
}

/* Headers / nav */
header, .header, .topbar{
  background: rgba(7,26,22,.72) !important;
  border-bottom: 1px solid rgba(214,194,139,.16) !important;
  backdrop-filter: blur(12px);
}

.bottom-nav{
  background: rgba(7,26,22,.88) !important;
  border-top: 1px solid rgba(214,194,139,.16) !important;
}
.bottom-nav a{ color: rgba(247,245,239,.72) !important; }
.bottom-nav a.active{ color: var(--ate-gold) !important; }

/* Inputs */
input, select, textarea{
  color: var(--ate-cream) !important;
}
.field input, .field select, .field textarea,
input[type="text"], input[type="tel"], input[type="number"], input[type="email"], input[type="date"], input[type="time"], textarea, select{
  min-height: var(--tap);
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(214,194,139,.22) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder{ color: rgba(247,245,239,.52) !important; }
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(214,194,139,.55) !important;
  box-shadow: 0 0 0 4px rgba(214,194,139,.14) !important;
}

/* Buttons */
.btn.primary, button.primary, .primary.btn{
  background: linear-gradient(180deg, var(--ate-gold), var(--ate-gold-2)) !important;
  color: var(--ate-green-3) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
}
.btn.primary:hover{ filter: brightness(1.03) !important; }

.btn.ghost, .btn.secondary, button.ghost, .ghost.btn{
  background: rgba(255,255,255,.06) !important;
  color: var(--ate-gold) !important;
  border: 1px solid rgba(214,194,139,.22) !important;
}

/* Chips / badges */
.badge, .pill, .chip{
  background: rgba(214,194,139,.12) !important;
  border: 1px solid rgba(214,194,139,.22) !important;
  color: var(--ate-cream) !important;
}

/* Quiet dividers */
hr, .divider{ border-color: rgba(214,194,139,.14) !important; }

/* Reduce 'mashed together' feel: unify section spacing */
section{ padding-top: 26px !important; padding-bottom: 26px !important; }

/* Ensure any legacy light backgrounds are neutralised */
.bg-light, .light, .paper, .surface-light{
  background: transparent !important;
}



/* === Polish v4: unified Book2 surface + Account header === */
.account-head{
  background: var(--ate-surface, #f6f0e6);
  border: 1px solid var(--ate-border, rgba(15,47,31,.18));
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.account-head__title{font-size: 28px; line-height:1.1; margin:0 0 6px; font-weight:800; letter-spacing:-0.02em;}
.account-head__sub{margin:0 0 10px; color: var(--ate-muted, rgba(0,0,0,.7)); font-weight:600;}
.account-head__meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px;}
.pill{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ate-border, rgba(15,47,31,.18));
  background: rgba(255,255,255,.55);
  font-size: 12.5px;
  font-weight: 700;
}
.account-head__actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.bonus-club .btn{white-space:nowrap;}

.price-grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap:8px 10px;
  align-items:center;
}
.price-grid__head{font-weight:800; color: var(--ate-ink,#0b1c13); opacity:.9}
.price-grid__row{font-weight:700}
.price-grid__cell{
  text-align:right;
  font-weight:900;
  letter-spacing:-0.01em;
}
.clean-list{padding-left:18px}
.clean-list li{margin:6px 0}

.trust-line{margin:10px 0 0; font-weight:800; letter-spacing:-0.01em; color: rgba(255,255,255,.92);}

/* V14 Hero Badge Upgrade */
.hero img, .hero-logo, .logo-hero {
    max-width:130px !important;
    width:130px !important;
    margin-top:10px !important;
    margin-bottom:8px !important;
}

.hero {
    padding-top:10px !important;
    padding-bottom:10px !important;
}


/* V15 Hero Badge Full-Bleed */
.hero img, .hero-logo, .logo-hero {
  width: 170px !important;
  max-width: 170px !important;
  height: auto !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.hero {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* If a wrapper is adding a circular plate/ring, neutralise it */
.hero .logo-wrap, .hero .logo-circle, .hero .badge, .hero .badge-ring {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}



/* V15 Full-bleed Hero Badge */
.hero img, .hero-logo, .logo-hero {
  width: 170px !important;
  max-width: 170px !important;
  height: auto !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.38) !important;
}
.hero {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* =============================
   Uniform page titles (site-wide)
   ============================= */
main h1,
.page h1,
.page-head h1,
.hero h1,
.hero-card h1,
.card h1,
.asap-h1,
.h1,
.section-title,
.step__title{
  font-size: clamp(32px, 6.2vw, 46px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px !important;
}
main h2,
.page h2,
.card h2{
  margin: 0 0 10px !important;
  letter-spacing: -0.01em;
}
.page-head p,
.hero p,
.hero-card p,
.page > p,
main h1 + p,
main h1 + .sub,
.page h1 + p,
.card h1 + p{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  opacity: .92;
}
.kicker,
.page-kicker,
.hero-kicker,
.tagline,
.eyebrow{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
}

a.back,
.back a,
.backlink,
.backlink a{
  color: rgba(255,255,255,.78) !important;
  text-decoration: none;
}
a.back:hover,
.back a:hover,
.backlink:hover,
.backlink a:hover{
  text-decoration: underline;
}

/* PATCH: booking page label contrast */
body[data-page="booking3"] .q__label,
body[data-page="booking3"] .q__help{
  color:#27483b !important;
  opacity:1 !important;
  -webkit-text-fill-color:#27483b !important;
}


/* PATCH: booking form readability + kill ASAP */
#btnASAPFill,
#btnAsap,
.asap,
.asap-btn,
.asap-cta,
[data-asap],
[data-action="asap"],
button[aria-label="ASAP"],
button[title="ASAP"]{
  display:none !important;
}

body[data-page="booking3"] .q__label,
body[data-page="booking3"] .q label,
body[data-page="booking3"] .q-title,
body[data-page="booking3"] .question-label,
body[data-page="booking3"] .form-label,
body[data-page="booking3"] .field-label,
body[data-page="booking3"] [class*="label"],
body[data-page="booking3"] [class*="question"]{
  color:#27483b !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
  -webkit-text-fill-color:#27483b !important;
}

body[data-page="booking3"] .q__help,
body[data-page="booking3"] .step__sub,
body[data-page="booking3"] .field-help,
body[data-page="booking3"] .hint,
body[data-page="booking3"] [class*="help"]{
  color:#5f7269 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#5f7269 !important;
}

body[data-page="booking3"] input,
body[data-page="booking3"] textarea,
body[data-page="booking3"] select{
  color:#0f2f1f !important;
  -webkit-text-fill-color:#0f2f1f !important;
  background:#fff !important;
}

body[data-page="booking3"] input::placeholder,
body[data-page="booking3"] textarea::placeholder{
  color:rgba(15,47,31,.45) !important;
  -webkit-text-fill-color:rgba(15,47,31,.45) !important;
}

body[data-page="booking3"] .step__title,
body[data-page="booking3"] h1,
body[data-page="booking3"] h2,
body[data-page="booking3"] h3{
  color:#0f2f1f !important;
  -webkit-text-fill-color:#0f2f1f !important;
}



/* Contrast safety patch for selected states */
.choice.is-selected,
.price-tile.is-selected,
.req-chip.is-selected{
  color:#1b241f;
}
.choice.is-selected .pt-label,
.choice.is-selected .pt-price,
.choice.is-selected .pt-sub,
.price-tile.is-selected .pt-label,
.price-tile.is-selected .pt-price,
.price-tile.is-selected .pt-sub,
.req-chip.is-selected{
  color:#1b241f !important;
}
.choice.is-selected .muted,
.price-tile.is-selected .muted{
  color:rgba(27,36,31,.72) !important;
}