@font-face {
  font-family: "SF UI Display";
  src: url('assets/fonts/SFUIDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF UI Display";
  src: url('assets/fonts/SFUIDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF UI Display";
  src: url('assets/fonts/SFUIDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF UI Display";
  src: url('assets/fonts/SFUIDisplay-Semibold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF UI Display";
  src: url('assets/fonts/SFUIDisplay-Semibold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #00041e;
  --bg-soft: #060c28;
  --card: #12172c;
  --card-2: #0a0e1f;
  --border: rgba(255,255,255,0.08);
  --blue: #1272ff;
  --blue-light: #5ec1ff;
  --purple: #4636ff;
  --white: #ffffff;
  --muted: #aab3cf;
  --radius: 18px;
  --font-sans: "SF UI Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

img { max-width: 100%; display: block; }

html { overflow-x: hidden; }

body {
  font-family: var(--font-sans);
  color: var(--white);
  line-height: 1.6;
  background: var(--bg) url('assets/page-bg.jpg') no-repeat top center;
  background-size: 100% 100%;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 640px) {
  .container { padding: 0 40px; }
}

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.2;
}

a { text-decoration: none; color: inherit; }

.grad-light {
  background: linear-gradient(90deg, #dceeff, #8ec9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-blue {
  background: linear-gradient(90deg, #bfe3ff, var(--blue-light) 40%, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons — liquid glass: translucent tint + specular highlight baked into
   the background layers (not a pseudo-element) so button text always
   paints on top without extra markup or stacking-context tricks. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 26px;
  border-radius: 40px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.15) 100%),
    linear-gradient(135deg, rgba(18,114,255,0.85), rgba(70,54,255,0.85));
  color: var(--white);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.55),
    inset 0 -4px 10px rgba(255,255,255,0.08),
    0 10px 24px rgba(18,114,255,0.3);
}

.btn-outline {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.1) 100%),
    rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--white);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -4px 10px rgba(255,255,255,0.05);
}
.btn-outline:hover {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.14) 100%),
    rgba(255,255,255,0.1);
}

.btn-sm { padding: 8px 20px; font-size: 13px; }
.btn-header { padding: 6px 18px; font-size: 13px; }
@media (min-width: 640px) { .btn-header { padding: 8px 26px; font-size: 15px; } }

/* Header — floats transparently over the hero so its artwork shows through;
   gains a solid, blurred backing once you scroll past the hero so nav stays
   legible over busier sections. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Higher than .nav-overlay's z-index (150): .site-header's own
     position:fixed + z-index creates a stacking context, so the drawer
     menu nested inside it (.main-nav, z-index: 200) only outranks the
     overlay *within that context* — against the overlay, which sits
     outside the header as a body-level sibling, it's this z-index that
     actually gets compared. Left too low, the overlay's dark scrim was
     rendering over the whole header, dimming the open menu with it. */
  z-index: 300;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.scrolled {
  background: rgba(0, 4, 30, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 16px;
}

.logo img { height: 62px; width: auto; }
@media (min-width: 960px) { .logo img { height: 82px; } }

.main-nav {
  display: flex;
  gap: 30px;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.main-nav a:hover { color: var(--white); }
.main-nav a.active { color: var(--white); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 960px) { .nav-toggle { display: none; } }

@media (max-width: 959px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(78vw, 320px);
    background: var(--bg-soft);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 90px 28px 28px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    box-shadow: -10px 0 40px rgba(0,0,0,0.5);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { font-size: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* No backdrop-filter here: stacking it with the header's own blur
     causes a stuck/over-strong blur glitch on iOS Safari. A plain
     dark scrim dims the page behind the drawer just as well. */
  background: rgba(0,4,20,0.75);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-overlay.open { display: block; opacity: 1; }
body.nav-locked { overflow: hidden; }

/* Hero — the header is fixed/transparent and overlays this section, so the
   hero itself keeps no top padding (letting .hero-car's top:0 align with the
   true top of the page); the header-clearance space lives on .hero-inner
   instead, so only the text column is pushed down, not the artwork. */
.hero {
  position: relative;
  padding-bottom: 8px;
}
@media (max-width: 959px) {
  .hero { overflow: hidden; }
}

/* Slowly drifting glow behind the hero content, for a bit of ambient life */
.hero-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 28% 32%, rgba(94, 193, 255, 0.5), transparent 70%),
    radial-gradient(40% 40% at 58% 55%, rgba(70, 54, 255, 0.45), transparent 70%);
  filter: blur(70px) hue-rotate(0deg);
  animation: glow-drift 12s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes glow-drift {
  0%   { transform: translate(0, 0) scale(1); filter: blur(60px) hue-rotate(0deg); }
  25%  { transform: translate(10%, -14%) scale(1.22); filter: blur(60px) hue-rotate(20deg); }
  50%  { transform: translate(-8%, 10%) scale(0.92); filter: blur(60px) hue-rotate(-15deg); }
  75%  { transform: translate(-14%, -8%) scale(1.15); filter: blur(60px) hue-rotate(10deg); }
  100% { transform: translate(0, 0) scale(1); filter: blur(60px) hue-rotate(0deg); }
}

/* Staggered fade/slide-up entrance for the hero heading, copy and buttons */
.hero-anim {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
  .hero-anim { animation: none; opacity: 1; transform: none; }
}

/* Scroll-reveal: cards/boxes fade + slide up the first time they enter the
   viewport. transition-delay is set per-element by JS (staggered within
   each parent) so rows/grids reveal left-to-right instead of all at once. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  padding-top: 104px;
  padding-bottom: 40px;
}

@media (min-width: 960px) {
  .hero-inner { padding-top: 130px; padding-bottom: 90px; }
  .hero-text { max-width: 730px; }
}

.hero-text h1 {
  font-size: 36px;
  line-height: 0.95;
  color: var(--white);
  margin-bottom: 20px;
}
@media (min-width: 640px) { .hero-text h1 { font-size: 58px; } }
@media (min-width: 960px) { .hero-text h1 { font-size: 76px; } }

.hero-text p {
  font-size: 16px;
  color: var(--white);
  max-width: 600px;
  margin-bottom: 28px;
}
@media (min-width: 640px) { .hero-text p { font-size: 18px; } }

.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-buttons .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .hero-buttons .btn { flex: 0 0 auto; } }

.hero-car { position: relative; display: none; }
.hero-car img { width: 100%; max-width: 780px; margin: 0 auto; display: block; }

@media (min-width: 960px) {
  .hero-car {
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 0;
    width: 56vw;
    max-width: 740px;
    height: calc(100% + 30px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .hero-car img {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    display: block;
  }
}

/* Twinkling stars scattered across the hero */
.hero-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-stars .star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.85);
  animation: star-twinkle ease-in-out infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stars .star { animation: none; opacity: 0.7; }
}

/* Feature strip */
.features-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 48px;
}
@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .features-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 64px; } }

.feature {
  display: flex;
  /* Column + centered, icon above heading above description: since the
     description comes last, its length only affects the box's bottom
     edge — it can never push the icon/heading out of line with a
     shorter row-mate the way centering a horizontal row did. */
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.feature:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); }

.feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-blue { color: #4fa6ff; }
.icon-green { color: #4ee08a; }
.icon-cyan { color: #5ec1ff; }
.icon-teal { color: #3fe0c8; }

.feature h3 { font-size: 15px; color: var(--blue-light); margin-bottom: 2px; }
.feature p { font-size: 13px; color: var(--muted); }

@media (max-width: 639px) {
  /* Compact squares, 2 rows of 2, with the sub text kept — no forced
     aspect-ratio (it would clip the text), just tight spacing. */
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 24px; }
  .feature {
    gap: 4px;
    padding: 10px 8px;
  }
  .feature-icon { width: 28px; height: 28px; border-radius: 7px; margin-bottom: 2px; }
  .feature-icon svg { width: 15px; height: 15px; }
  .feature h3 { font-size: 12px; margin-bottom: 0; line-height: 1.2; }
  .feature p { font-size: 10px; line-height: 1.25; }
}

/* Section heading */
.section-heading {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}
.section-heading h2 { font-size: 28px; color: var(--white); margin-bottom: 10px; }
@media (min-width: 640px) { .section-heading h2 { font-size: 36px; } }
.section-heading p { color: var(--white); font-size: 16px; margin-bottom: 20px; }
.section-heading-left { text-align: left; margin: 0; }

/* About */
.about {
  padding: 16px 0 60px;
  background: linear-gradient(var(--border), var(--border)) no-repeat center top / min(1320px, 100% - 40px) 1px;
}
@media (min-width: 640px) { .about { background-size: min(1320px, 100% - 80px) 1px; } }
@media (min-width: 960px) { .about { padding: 24px 0 90px; } }

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 56px;
}
@media (min-width: 960px) { .about-grid { grid-template-columns: 0.85fr 1.15fr; gap: 64px; } }

.about-photo {
  position: relative;
  padding: 8px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(94, 193, 255, 0.3) 0%, rgba(18, 114, 255, 0.12) 40%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02));
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 20px 60px rgba(18, 114, 255, 0.25),
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -6px 12px rgba(255,255,255,0.08);
}

.about-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.16) 100%);
  pointer-events: none;
}

.about-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 19px;
}

.photo-badge {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 20px;
  background: rgba(6, 12, 40, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
}
.photo-badge strong { font-size: 14px; color: var(--white); }
.photo-badge span { font-size: 12px; color: var(--blue-light); }

.about-text h2 { font-size: 26px; margin-bottom: 20px; }
@media (min-width: 640px) { .about-text h2 { font-size: 34px; } }
.about-text p { color: var(--muted); margin-bottom: 16px; font-size: 15px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  text-align: center;
  padding-top: 44px;
}
@media (min-width: 640px) { .stats-row { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.stat-num {
  display: block;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #bfe3ff, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 640px) { .stat-num { font-size: 56px; } }

.stat-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.2px;
}
@media (min-width: 640px) { .stat-label { font-size: 15px; } }

/* Courses */
.courses-section {
  padding: 60px 0;
  background:
    linear-gradient(var(--border), var(--border)) no-repeat center top / min(1320px, 100% - 40px) 1px,
    linear-gradient(var(--border), var(--border)) no-repeat center bottom / min(1320px, 100% - 40px) 1px;
}
@media (min-width: 640px) {
  .courses-section {
    background-size: min(1320px, 100% - 80px) 1px, min(1320px, 100% - 80px) 1px;
  }
}
@media (min-width: 960px) { .courses-section { padding: 90px 0; } }

.courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}
@media (min-width: 960px) { .courses-grid { grid-template-columns: 0.8fr 1.2fr; gap: 50px; } }

.courses-sticky {
  position: relative;
  padding: 8px;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(94, 193, 255, 0.3) 0%, rgba(18, 114, 255, 0.12) 40%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02));
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 20px 60px rgba(18, 114, 255, 0.25),
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -6px 12px rgba(255,255,255,0.08);
}

.courses-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.16) 100%);
  pointer-events: none;
}

.courses-sticky img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) - 6px);
}

@media (min-width: 960px) {
  .courses-sticky { position: sticky; top: 110px; }
}

.courses-list { display: flex; flex-direction: column; gap: 24px; }

.course-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(94, 193, 255, 0.4) 0%, rgba(18, 114, 255, 0.16) 35%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(20, 42, 112, 0.5), rgba(6, 12, 40, 0.6));
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -6px 14px rgba(18, 114, 255, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -6px 14px rgba(18, 114, 255, 0.2),
    0 14px 34px rgba(0, 0, 0, 0.4);
}

.course-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(94, 193, 255, 0.1);
  color: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.course-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.course-card h3 { font-size: 19px; color: var(--blue-light); margin-bottom: 10px; }
.course-card p { font-size: 14px; color: var(--muted); margin-bottom: 18px; }

/* Your Driving Journey — a scroll-driven interactive map. The map + heading
   (.journey-sticky) pins near the top of the viewport for the whole section;
   the phase panel underneath changes as each tall .journey-trigger scrolls
   through view, tracked via IntersectionObserver (see the inline script). */
.journey-section {
  position: relative;
  padding: 60px 0 0;
}
@media (min-width: 960px) { .journey-section { padding-top: 90px; } }

.journey-sticky {
  position: sticky;
  top: 78px;
  z-index: 5;
  background: var(--bg);
  padding-bottom: 8px;
}
@media (min-width: 960px) { .journey-sticky { top: 98px; } }

.journey-head { text-align: center; max-width: 680px; margin: 0 auto 20px; }
.journey-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-light);
  margin-bottom: 10px;
}
.journey-head h2 { font-size: 26px; color: var(--white); margin-bottom: 8px; }
@media (min-width: 640px) { .journey-head h2 { font-size: 36px; } }
.journey-head p { color: var(--muted); font-size: 15px; }

/* Compact sticky header on phones: the eyebrow/heading/paragraph were
   eating close to half the viewport height, leaving too little room for
   the phase panel below and forcing it into an internal scroll that hid
   its own progress bar. Shrinking this frees that space back up. */
@media (max-width: 479px) {
  .journey-section { padding-top: 32px; }
  .journey-sticky { top: 62px; padding-bottom: 12px; }
  .journey-head { margin: 0 auto 14px; }
  .journey-eyebrow { font-size: 10px; margin-bottom: 6px; }
  .journey-head h2 { font-size: 19px; margin-bottom: 4px; }
  .journey-head p { font-size: 13px; }
}

/* Mobile: the "Phase N" label next to each circle was crowding the row —
   the number inside the circle already says which phase it is, so drop
   the label and just center the dot in its slot. */
@media (max-width: 639px) {
  .journey-node-label { display: none; }
  .journey-node { justify-content: center; gap: 0; }
}

/* Same problem, different cause: a wide-but-short viewport (a laptop at
   ~720-800px tall, or a phone in landscape) has plenty of horizontal room
   so the width-based breakpoint above never kicks in, but the sticky
   header still eats too much of the little vertical room there is. React
   to viewport height directly instead. */
@media (max-height: 760px) {
  .journey-section { padding-top: 32px; }
  .journey-sticky { top: 16px; padding-bottom: 10px; }
  .journey-head { margin: 0 auto 12px; }
  .journey-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .journey-head h2 { font-size: 20px; margin-bottom: 4px; }
  .journey-head p { display: none; }
  .journey-track { padding-top: 54px; }
  .journey-car { width: 44px; height: 44px; top: -8px; }
  .journey-node-dot { width: 24px; height: 24px; font-size: 11px; }
  .journey-node-label { font-size: 12px; }
  .journey-node-label small { font-size: 10px; }
}
@media (max-height: 760px) and (min-width: 960px) {
  .journey-sticky { top: 16px; }
}

/* Map */
/* overflow-x: auto here forces overflow-y to auto too (per spec, an axis
   set to auto/scroll pulls a 'visible' partner axis along with it), which
   was clipping the top of .journey-car — it deliberately sits above the
   track's own box via a negative top offset. Padding this element enough
   to cover that negative offset (plus its glow's box-shadow spread) keeps
   the car within the padding box, so it isn't clipped by that auto axis. */
.journey-map { padding: 26px 0 4px; overflow-x: auto; }
.journey-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 560px;
  padding: 70px 20px 0;
}

.journey-line {
  position: absolute;
  top: 24px;
  left: 40px;
  right: 40px;
  height: 12px;
  border-radius: 6px;
  background: #3f4451;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.journey-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 12px, transparent 12px 26px);
}
.journey-line-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}

.journey-car {
  position: absolute;
  top: -14px;
  left: 0%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--card, #12162a);
  box-shadow: 0 0 0 6px rgba(18, 114, 255, 0.15), 0 8px 20px rgba(18, 114, 255, 0.4);
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
  overflow: hidden;
}
.journey-car img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.journey-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  flex: 1;
}

.journey-node-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 2px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.journey-node-label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.5;
  transition: color 0.3s ease;
}
.journey-node-label small { font-size: 14px; font-weight: 600; color: var(--muted); }

.journey-node.active .journey-node-dot,
.journey-node.done .journey-node-dot {
  color: var(--white);
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-color: transparent;
  box-shadow: 0 0 0 5px rgba(18, 114, 255, 0.18);
}
.journey-node.active .journey-node-label { color: var(--white); }
.journey-node.done .journey-node-label { color: var(--blue-light); }

.journey-flag {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--muted);
}

/* Compact mobile map: the desktop track needs 560px of breathing room for
   four full-size nodes, which forced horizontal scrolling (and cut the
   later phases + flag off-screen) on phone-width viewports. Shrinking the
   car, dots, labels and gaps here lets all four phases fit natively. */
@media (max-width: 479px) {
  .journey-map { overflow-x: visible; padding: 4px 0; }
  .journey-track { min-width: 0; gap: 2px; padding: 52px 2px 0; }
  .journey-line { left: 20px; right: 20px; top: 15px; height: 8px; }
  .journey-car { width: 38px; height: 38px; top: -4px; box-shadow: 0 0 0 4px rgba(18, 114, 255, 0.15), 0 6px 14px rgba(18, 114, 255, 0.4); }
  .journey-node { gap: 6px; }
  .journey-node-dot { width: 22px; height: 22px; font-size: 11px; border-width: 2px; }
  .journey-node-label { font-size: 10.5px; line-height: 1.3; }
  .journey-node-label small { font-size: 9px; }
  .journey-node.active .journey-node-dot, .journey-node.done .journey-node-dot { box-shadow: 0 0 0 3px rgba(18, 114, 255, 0.18); }
  .journey-flag { top: 10px; right: 4px; }
  .journey-flag svg { width: 16px; height: 16px; }
}

/* Scroller + panel */
/* Extra lead-in before the first phase card starts pinning/stacking: with
   no gap here, .journey-trigger[data-phase="1"] sits immediately after the
   sticky header in the flow, so it hits its sticky offset (and starts
   stacking) almost as soon as the section is scrolled into view — feeling
   like it kicks in "too early", low in the viewport. This padding buys
   normal scroll room before that transition begins. */
.journey-scroller { position: relative; padding-top: 22vh; }

.journey-section { --journey-offset: 320px; }

.journey-trigger {
  display: flex;
  /* flex-start (not center) so the panel sits flush against the sticky
     map above it once pinned, instead of floating in the middle of the
     min-height box with dead space above it. */
  align-items: flex-start;
  min-height: 30vh;
  padding: 6px 0;
  position: sticky;
  top: var(--journey-offset);
}
.journey-trigger > .container { width: 100%; }
@media (min-width: 960px) { .journey-trigger { min-height: 40vh; } }

.journey-trigger[data-phase="1"] { z-index: 1; }
.journey-trigger[data-phase="2"] { z-index: 2; }
.journey-trigger[data-phase="3"] { z-index: 3; }
.journey-trigger[data-phase="4"] { z-index: 4; }

.journey-panel {
  width: 100%;
  max-height: calc(100vh - var(--journey-offset) - 24px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px;
  transform: translateY(16px);
  transition: transform 0.5s ease;
  box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.45);
}
@media (min-width: 960px) { .journey-panel { padding: 34px 44px; } }
.journey-panel::-webkit-scrollbar { display: none; }

.journey-panel-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.journey-panel-body .journey-progress { margin-top: auto; }

/* Phase photo: desktop only (per phase — Phase1.jpg etc), sat beside the
   text. Not shown on mobile, where the panel is already tight for
   vertical space (see the max-height/short-viewport rules above). */
.journey-panel-media { display: none; }
@media (min-width: 768px) {
  .journey-panel {
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
  }
  .journey-panel-media {
    display: block;
    flex: 0 0 260px;
    position: relative;
    padding: 7px;
    border-radius: 20px;
    overflow: hidden;
    /* Same framed-photo treatment as the Hall of Fame gallery tiles:
       a tinted glass border with an inset highlight around the image. */
    background:
      linear-gradient(135deg, rgba(94, 193, 255, 0.35) 0%, rgba(18, 114, 255, 0.14) 40%, rgba(255, 255, 255, 0) 65%),
      linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
    backdrop-filter: blur(18px) saturate(190%);
    -webkit-backdrop-filter: blur(18px) saturate(190%);
    border: 1px solid rgba(255,255,255,0.38);
    box-shadow:
      0 12px 34px rgba(0,0,0,0.5),
      inset 0 1px 1px rgba(255,255,255,0.65),
      inset 0 -6px 12px rgba(18, 114, 255, 0.1);
  }
  .journey-panel-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.18) 100%);
    pointer-events: none;
  }
  .journey-panel-media picture {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
  }
  .journey-panel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
  }
}
@media (min-width: 1100px) { .journey-panel-media { flex-basis: 320px; } }

.journey-trigger.active .journey-panel {
  transform: translateY(0);
}

.journey-panel-badge {
  position: relative;
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(18, 114, 255, 0.35), rgba(70, 54, 255, 0.35));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -12px 16px -8px rgba(0, 0, 0, 0.25), 0 8px 22px rgba(18, 114, 255, 0.22);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.journey-panel h3 { font-size: 24px; color: var(--white); margin-bottom: 8px; }
@media (min-width: 640px) { .journey-panel h3 { font-size: 28px; } }
.journey-panel-body > p { color: var(--muted); font-size: 15px; margin-bottom: 16px; }

.journey-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
  margin-bottom: 18px;
}
@media (min-width: 640px) { .journey-checklist { grid-template-columns: 1fr 1fr; } }

.journey-checklist ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.journey-checklist li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: var(--white);
}
.journey-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(18, 114, 255, 0.18);
  box-shadow: inset 0 0 0 1.5px var(--blue-light);
}
.journey-checklist li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--blue-light);
  border-bottom: 1.5px solid var(--blue-light);
  transform: rotate(-45deg);
}

.journey-progress { margin-bottom: 28px; }
.journey-progress-track {
  height: 8px;
  border-radius: 8px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 8px;
}
.journey-progress-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
}
.journey-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Compact panel content on phones: two-column checklist (instead of the
   default single column below 640px) plus tighter type/spacing keeps the
   whole card — badge through progress bar — short enough to fit the
   reduced viewport height without needing its own internal scrollbar. */
@media (max-width: 479px) {
  .journey-panel { padding: 18px; }
  .journey-panel-badge { padding: 5px 14px; font-size: 10.5px; margin-bottom: 10px; }
  .journey-panel h3 { font-size: 18px; margin-bottom: 8px; }
  .journey-panel-body > p { font-size: 12.5px; margin-bottom: 14px; }
  .journey-checklist { grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 14px; }
  .journey-checklist li { font-size: 11.5px; padding-left: 20px; }
  .journey-checklist li::before { width: 14px; height: 14px; }
  .journey-checklist li::after { left: 4px; top: 5px; width: 6px; height: 3px; }
  .journey-progress { margin-bottom: 4px; }
  .journey-progress-track { height: 6px; margin-bottom: 6px; }
  .journey-progress-labels { font-size: 9.5px; }
}

/* Same short-viewport-height fix as above, applied to the panel content. */
@media (max-height: 760px) {
  .journey-panel { padding: 22px 34px; }
  .journey-panel-badge { padding: 5px 14px; font-size: 10.5px; margin-bottom: 10px; }
  .journey-panel h3 { font-size: 20px; margin-bottom: 6px; }
  .journey-panel-body > p { font-size: 13px; margin-bottom: 12px; }
  .journey-checklist { grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-bottom: 12px; }
  .journey-checklist li { font-size: 12.5px; padding-left: 22px; }
  .journey-checklist li::before { width: 15px; height: 15px; }
  .journey-checklist li::after { left: 4.5px; top: 5.5px; }
  .journey-progress { margin-bottom: 4px; }
  .journey-progress-track { height: 6px; margin-bottom: 6px; }
}

.journey-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 50px;
}
@media (min-width: 960px) { .journey-scroll-hint { padding-bottom: 70px; } }

@media (prefers-reduced-motion: reduce) {
  .journey-line-fill, .journey-car, .journey-panel { transition: none; }
}

/* Reviews */
.reviews-section {
  padding: 60px 0;
  background: linear-gradient(var(--border), var(--border)) no-repeat center top / min(1320px, 100% - 40px) 1px;
}
@media (min-width: 640px) { .reviews-section { background-size: min(1320px, 100% - 80px) 1px; } }
@media (min-width: 960px) { .reviews-section { padding: 90px 0; } }

.review-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 32px;
}
@media (min-width: 640px) { .review-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .review-cards { grid-template-columns: repeat(4, 1fr); } }

.review-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(94, 193, 255, 0.4) 0%, rgba(18, 114, 255, 0.16) 35%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(20, 42, 112, 0.5), rgba(6, 12, 40, 0.6));
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -6px 14px rgba(18, 114, 255, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -6px 14px rgba(18, 114, 255, 0.2),
    0 14px 34px rgba(0, 0, 0, 0.4);
}
.review-card h3 { font-size: 18px; color: var(--blue-light); margin-bottom: 4px; }
.review-card .review-sub { font-size: 13px; color: var(--muted); }
.review-card hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.review-card p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.review-card .stars { color: var(--white); letter-spacing: 3px; }

.reviews-cta { text-align: center; }

/* Hall of Fame gallery */
.passes-section {
  padding: 60px 0;
  background: linear-gradient(var(--border), var(--border)) no-repeat center top / min(1320px, 100% - 40px) 1px;
}
@media (min-width: 640px) { .passes-section { background-size: min(1320px, 100% - 80px) 1px; } }
@media (min-width: 960px) { .passes-section { padding: 90px 0; } }

/* Full-bleed: this sits outside .container already, so it just needs to
   fill its parent section — no need for the 100vw/-50vw viewport-width
   hack, which overshoots by the scrollbar's width and causes a horizontal
   gap/overflow whenever the page is tall enough to show one. */
.gallery-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Vertical headroom so the hover lift (translateY + glow) on gallery
     items isn't clipped by this element's overflow:hidden, which is
     otherwise needed to mask the horizontal infinite-scroll edges. */
  padding: 14px 0;
  margin: -14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.marquee-track {
  /* Position is driven by JS (see the marquee script) via a plain
     transform, not a CSS animation — a CSS @keyframes animation driven by a
     custom property is exactly the combination Safari has long been buggy
     with on infinite loops (it can silently stick using a stale distance,
     or fail to resume after the layer is evicted), which is what caused the
     row to play part-way and then stop instead of looping. */
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-set {
  display: flex;
  gap: 14px;
  padding-right: 14px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  /* No auto-scroll on phones at all (see the JS: mobileStatic skips both
     cloning and the animation loop) — continuous transform animation over
     many cloned image tiles kept being unreliable on mobile Safari no
     matter how the timing/CSS was tuned. A plain swipeable strip has
     nothing to stutter or stall; a scroll listener (see wireLoopScroll)
     silently wraps the two copies of the set into a bounded loop instead
     of a hard stop. No scroll-snap: it fights the JS position correction
     used for that wrap (the two don't agree on where "the edge" is),
     which showed up as scrollLeft assignments landing somewhere the JS
     didn't expect — free scrolling avoids that interaction entirely. */
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; mask-image: none; -webkit-mask-image: none; }
  .marquee-track { will-change: auto; }
}

.gallery-item {
  flex: 0 0 clamp(140px, 23vw, 230px);
  aspect-ratio: 1 / 1;
  position: relative;
  padding: 7px;
  border-radius: 24px;
  overflow: hidden;
  /* No backdrop-filter here (dropped everywhere, not just on mobile):
     dozens of these tiles are on screen at once, cloned across both
     marquee rows and animating continuously via transform — that
     combination is a known WebKit compositing/stability trap. It isn't
     just a narrow-viewport problem: it was showing up on Safari on
     iOS (wider devices/landscape) and macOS too, not only small phones,
     so scope this to "all WebKit", not "all narrow screens". The tint/
     gradient/border below still gives the tiles their glass look. */
  background:
    linear-gradient(135deg, rgba(94, 193, 255, 0.35) 0%, rgba(18, 114, 255, 0.14) 40%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.38);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.5),
    inset 0 1px 1px rgba(255,255,255,0.65),
    inset 0 -6px 12px rgba(18, 114, 255, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.18) 100%);
  pointer-events: none;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.75),
    inset 0 -6px 10px rgba(255,255,255,0.12);
}

.gallery-item img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

/* Contact */
.contact-section {
  /* Bottom padding stays on mobile — where the connect column and the
     CTA banner box below it stack directly on top of each other, so it's
     the only thing keeping them apart. Desktop (2-column, the CTA banner
     is a distinct full-width block further down) wants that gap at 0. */
  padding: 60px 0 32px;
  background: linear-gradient(var(--border), var(--border)) no-repeat center top / min(1320px, 100% - 40px) 1px;
}
@media (min-width: 640px) { .contact-section { background-size: min(1320px, 100% - 80px) 1px; } }
@media (min-width: 960px) { .contact-section { padding: 90px 0 0; } }

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 960px) {
  /* align-items: start — the default (stretch) forced the much shorter
     "Connect with us" column to match the tall contact form's height,
     leaving a few hundred px of dead space below its content that read
     as a gap before the "Next Stop" banner further down the page. */
  .content-grid { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .contact-form-col { border-right: 1px solid var(--border); padding-right: 60px; }
}

.contact-form-col h2, .contact-connect-col h2 { font-size: 28px; margin-bottom: 8px; }
@media (min-width: 640px) { .contact-form-col h2, .contact-connect-col h2 { font-size: 34px; } }
.lead { color: var(--muted); margin-bottom: 24px; font-size: 15px; }

form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-submit { align-items: center; grid-template-columns: 1fr auto; }

@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
  .form-row-submit { grid-template-columns: 1fr; }
}

form input, form select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
}
form input::placeholder { color: var(--muted); }
form input:focus, form select:focus { border-color: var(--blue); }

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}
.form-select option { background: var(--bg-soft); color: var(--white); }
.form-select option[value=""] { color: var(--muted); }

/* Practical Date is a plain text input (not a native <input type="date">)
   driven by a JS calendar panel below it — this guarantees it uses the exact
   same "form input, form select" sizing as every other field on every
   browser/device, and skips each platform's own (very inconsistent) native
   date picker UI entirely. */
.form-date { position: relative; width: 100%; }
.form-date input#practical_date { cursor: pointer; }

.form-date-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 280px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 40%), var(--bg-soft);
  backdrop-filter: blur(20px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 20px 40px rgba(0,0,0,0.45);
}
.form-date-panel.is-open { display: block; }

.form-date-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.form-date-panel-title { font-size: 14px; font-weight: 600; color: var(--white); }
.form-date-nav {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--white);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.form-date-nav:hover { background: rgba(255,255,255,0.12); }

.form-date-panel-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.form-date-dow {
  font-size: 10px;
  text-align: center;
  color: var(--muted);
  padding-bottom: 4px;
}
.form-date-day {
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.form-date-day:hover { background: rgba(255,255,255,0.1); }
.form-date-day.is-selected {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: var(--white);
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
}
.form-textarea::placeholder { color: var(--muted); }
.form-textarea:focus { border-color: var(--blue); }

.form-status {
  margin: 0;
  font-size: 14px;
  min-height: 0;
}
.form-status:empty { display: none; }
.form-status.is-success { color: #4ee08a; }
.form-status.is-error { color: #ff6b6b; }

.btn-full { width: 100%; justify-content: center; }

.connect-list { display: flex; flex-direction: column; gap: 18px; }
.connect-item { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--white); }
.connect-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--blue-light);
  color: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA banner */
.cta-section { padding: 0; }
@media (min-width: 960px) { .cta-section { padding: 0; } }

.cta-banner {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(94, 193, 255, 0.4) 0%, rgba(18, 114, 255, 0.16) 35%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(20, 42, 112, 0.5), rgba(6, 12, 40, 0.6));
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border-radius: 18px;
  padding: 20px;
  /* Text and logo side by side, not stacked — keeps the mobile card
     short instead of a tall single column. */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -8px 24px rgba(18, 114, 255, 0.22),
    0 20px 50px rgba(0, 0, 0, 0.4);
}
@media (min-width: 960px) {
  /* The desktop artwork already bakes in its own neon border and the car
     graphic on the right, so the CSS gradient/border/shadow treatment
     used for the plain fallback (mobile, and a slow-loading moment) is
     dropped in favour of the image — the grid gains a third, empty
     column purely to hold text/nav clear of the car painted into it. */
  .cta-banner {
    grid-template-columns: 1fr 1fr 0.9fr;
    /* Percentage, not a fixed px, so this stays clear of the neon border
       painted into the image at every width — the container's own size is
       locked to the image's aspect-ratio, so a % padding scales with it. */
    padding: 6% 4%;
    background: url('footerdesktop.png') center / cover no-repeat;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    aspect-ratio: 2048 / 768;
  }
}

.cta-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  background:
    radial-gradient(40% 40% at 25% 30%, rgba(94, 193, 255, 0.55), transparent 70%),
    radial-gradient(36% 36% at 78% 65%, rgba(70, 54, 255, 0.5), transparent 70%);
  filter: blur(50px);
  animation: glow-drift 12s ease-in-out infinite;
  will-change: transform, filter;
}

.cta-text, .cta-right { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .cta-glow { animation: none; }
}
@media (min-width: 960px) {
  /* The desktop artwork supplies its own lighting/glow. */
  .cta-glow { display: none; }
}

.cta-text h2 { font-size: 22px; line-height: 1.1; color: var(--white); }
@media (min-width: 480px) { .cta-text h2 { font-size: 28px; } }
@media (min-width: 640px) { .cta-text h2 { font-size: 36px; } }
@media (min-width: 960px) {
  /* Bigger type, same 1.05 leading ratio as before — a fixed px
     line-height here would end up shorter than the (bigger) font size
     and clip the text, so keep it relative instead: the line spacing
     stays exactly as tight relative to the letters as it was. */
  .cta-text h2 { font-size: 44px; line-height: 1.05; }
}

.cta-text p { display: none; color: rgba(255, 255, 255, 0.8); font-size: 15px; margin-top: 12px; max-width: 320px; }
@media (min-width: 960px) {
  .cta-text p { display: block; font-size: 15px; line-height: 1.4; margin-top: 8px; max-width: 280px; }
}

.cta-right { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.cta-right .btn, .cta-right .cta-logo { align-self: center; }
@media (min-width: 960px) {
  /* Compacted: the logo/nav/button stack was tall enough to brush the
     banner's own edges (and the neon border baked into the image) at
     common desktop widths — this shrinks each piece so the whole block
     sits with real clearance inside the frame instead of just grazing it. */
  .cta-right { align-items: center; text-align: center; gap: 10px; }
}

.cta-logo { height: 48px; width: auto; }
@media (min-width: 480px) { .cta-logo { height: 64px; } }
@media (min-width: 640px) { .cta-logo { height: 80px; } }
@media (min-width: 960px) { .cta-logo { height: 96px; } }

.cta-nav { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.cta-nav a { font-size: 18px; color: rgba(255,255,255,0.85); font-family: var(--font-sans); font-weight: 500; }
@media (min-width: 640px) { .cta-nav a { font-size: 20px; } }
@media (min-width: 960px) { .cta-nav { gap: 14px; } .cta-nav a { font-size: 12.5px; } }
.cta-nav a:hover { color: var(--white); }

@media (min-width: 960px) { .cta-right .btn { padding: 8px 20px; font-size: 13px; } }

/* Footer */
.site-footer {
  padding: 24px 0;
  background: linear-gradient(var(--border), var(--border)) no-repeat center top / min(1320px, 100% - 40px) 1px;
}
@media (min-width: 640px) { .site-footer { background-size: min(1320px, 100% - 80px) 1px; } }
@media (min-width: 960px) { .site-footer { padding: 10px 0; } }
.footer-inner {
  display: flex;
  justify-content: center;
  text-align: center;
}

.footer-line {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.footer-line a { color: var(--muted); }
.footer-line a:hover { color: var(--white); }
.footer-sep { margin: 0 10px; color: rgba(255, 255, 255, 0.25); }

/* Areas We Cover */
.areas-section {
  padding: 24px 0;
  background: linear-gradient(var(--border), var(--border)) no-repeat center top / min(1320px, 100% - 40px) 1px;
}
@media (min-width: 640px) { .areas-section { background-size: min(1320px, 100% - 80px) 1px; } }
@media (min-width: 960px) { .areas-section { padding: 36px 0; } }

/* Matches .content-grid (the Contact section) exactly — both columns
   share one .container, so the text and the edge of the map line up
   with the same left/right bounds as the form above it. */
.areas-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "map" "note";
  gap: 40px;
  align-items: center;
}
.areas-copy { grid-area: copy; }
.areas-map { grid-area: map; }
.areas-note { grid-area: note; }
@media (min-width: 960px) {
  .areas-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "copy map" "note map";
    grid-template-rows: auto 1fr;
    gap: 0 60px;
    align-items: start;
  }
  .areas-map { align-self: center; }
}

.areas-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 12px 32px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.areas-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 15px;
}
.areas-list li svg { flex-shrink: 0; color: var(--blue-light); }

.areas-note {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.areas-note a { color: var(--blue-light); }

.areas-map {
  width: 100%;
}
@media (min-width: 960px) {
  .areas-map { display: flex; justify-content: center; }
  .areas-map picture, .areas-map img { max-width: 640px; }
}
.areas-map picture {
  display: block;
  width: 100%;
}
.areas-map img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 50px rgba(18, 114, 255, 0.25));
}

@media (max-width: 639px) {
  .areas-grid { gap: 14px; }
  .areas-list { display: none; }
  /* Break out of .container's 20px side padding so the image reads
     bigger — edge to edge is safe here since it's a fixed offset tied to
     the container's own known padding, not a viewport-width bleed trick. */
  .areas-map { display: flex; justify-content: center; width: calc(100% + 40px); margin: 0 -20px; }
}

/* Local FAQ */
.faq-section { padding: 60px 0; }
@media (min-width: 960px) { .faq-section { padding: 90px 0; } }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 32px auto 0;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 16px 20px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--white);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  float: right;
  color: var(--blue-light);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Legal pages (Privacy / Cookies policy) */
.legal-page { padding: 128px 0 80px; }
@media (min-width: 960px) { .legal-page { padding-top: 150px; } }

.legal-content { max-width: 820px; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-light);
  margin-bottom: 24px;
}
.legal-back:hover { color: var(--white); }

.legal-content h1 { font-size: 32px; margin-bottom: 8px; }
@media (min-width: 640px) { .legal-content h1 { font-size: 42px; } }

.legal-updated { color: var(--muted); font-size: 14px; margin-bottom: 32px; }

.legal-content h2 {
  font-size: 20px;
  color: var(--blue-light);
  margin-top: 36px;
  margin-bottom: 12px;
}

.legal-content p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }

.legal-content a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--white); }

.legal-content ul {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 14px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-table-wrap { overflow-x: auto; margin-bottom: 20px; }

.legal-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.legal-table th { color: var(--white); font-weight: 600; }

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 50px;
  background: #25d366;
  color: #07341f;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
}
.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.whatsapp-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .whatsapp-float { right: 16px; bottom: 16px; padding: 14px; }
  .whatsapp-text { display: none; }
}