:root {
  --vrl-primary: #0b1e3a;
  --vrl-primary-soft: #16365c;
  --vrl-accent: #f5b301;
  --vrl-accent-soft: #ffd45c;
  --vrl-dark: #050a14;
  --vrl-light: #f6f7fb;
  --vrl-surface: #ffffff;
  --vrl-muted: #4a5568;
  --vrl-text: #101828;
  --vrl-text-invert: #f4f7ff;
  --vrl-line: #e2e6f0;
  --vrl-success: #1f9d55;
  --vrl-radius: 16px;
  --vrl-radius-lg: 28px;
  --vrl-shadow-sm: 0 6px 18px rgba(11, 30, 58, 0.08);
  --vrl-shadow-md: 0 18px 40px rgba(11, 30, 58, 0.14);
  --vrl-shadow-lg: 0 30px 70px rgba(11, 30, 58, 0.22);
  --vrl-transition: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --vrl-container: 1200px;
  --vrl-font: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--vrl-font);
  color: var(--vrl-text);
  background-color: var(--vrl-surface);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vrl-primary);
  line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p { color: var(--vrl-muted); }

a {
  color: var(--vrl-primary);
  text-decoration: none;
  transition: color var(--vrl-transition);
}

a:hover { color: var(--vrl-accent); }

img { max-width: 100%; height: auto; }

.vrl-container {
  width: 100%;
  max-width: var(--vrl-container);
  margin-inline: auto;
  padding-inline: 20px;
}

.vrl-section {
  padding: 96px 0;
  position: relative;
}

.vrl-section--tight { padding: 64px 0; }
.vrl-section--dark {
  background-color: var(--vrl-primary);
  color: var(--vrl-text-invert);
}
.vrl-section--dark h1,
.vrl-section--dark h2,
.vrl-section--dark h3 { color: var(--vrl-text-invert); }
.vrl-section--dark p { color: #c8d3ea; }

.vrl-section--light { background-color: var(--vrl-light); }

.vrl-section--photo {
  background-size: cover;
  background-position: center;
  color: var(--vrl-text-invert);
}
.vrl-section--photo h1,
.vrl-section--photo h2,
.vrl-section--photo h3 { color: var(--vrl-text-invert); }
.vrl-section--photo p { color: #dfe6f5; }

.vrl-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vrl-accent);
  margin-bottom: 16px;
}

.vrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--vrl-transition), background-color var(--vrl-transition), color var(--vrl-transition), border-color var(--vrl-transition);
  line-height: 1;
}

.vrl-btn--primary {
  background-color: var(--vrl-accent);
  color: var(--vrl-primary);
}
.vrl-btn--primary:hover {
  background-color: var(--vrl-accent-soft);
  color: var(--vrl-primary);
  transform: translateY(-2px);
}

.vrl-btn--ghost {
  background-color: transparent;
  color: var(--vrl-text-invert);
  border-color: rgba(255, 255, 255, 0.55);
}
.vrl-btn--ghost:hover {
  background-color: var(--vrl-text-invert);
  color: var(--vrl-primary);
  border-color: var(--vrl-text-invert);
}

.vrl-btn--dark {
  background-color: var(--vrl-primary);
  color: var(--vrl-text-invert);
}
.vrl-btn--dark:hover {
  background-color: var(--vrl-primary-soft);
  color: var(--vrl-text-invert);
  transform: translateY(-2px);
}

.vrl-card {
  background-color: var(--vrl-surface);
  border-radius: var(--vrl-radius);
  padding: 32px;
  box-shadow: var(--vrl-shadow-sm);
  border: 1px solid var(--vrl-line);
  height: 100%;
  transition: transform var(--vrl-transition), box-shadow var(--vrl-transition);
}
.vrl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vrl-shadow-md);
}

.vrl-card__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-color: var(--vrl-primary);
  color: var(--vrl-accent);
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.vrl-grid {
  display: grid;
  gap: 28px;
}
.vrl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vrl-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vrl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.vrl-counter {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--vrl-accent);
  line-height: 1;
}

.vrl-figure {
  border-radius: var(--vrl-radius);
  overflow: hidden;
  box-shadow: var(--vrl-shadow-sm);
  background-color: var(--vrl-light);
}
.vrl-figure img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.vrl-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--vrl-radius-lg);
}

.vrl-slider__track {
  display: flex;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vrl-slider__slide {
  min-width: 100%;
  padding: 80px 60px;
  color: var(--vrl-text-invert);
  background-size: cover;
  background-position: center;
}

.vrl-slider__dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.vrl-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: rgba(11, 30, 58, 0.25);
  cursor: pointer;
  transition: background-color var(--vrl-transition), transform var(--vrl-transition);
}
.vrl-slider__dot.is-active {
  background-color: var(--vrl-accent);
  transform: scale(1.25);
}

.vrl-accordion__item {
  border: 1px solid var(--vrl-line);
  border-radius: var(--vrl-radius);
  margin-bottom: 14px;
  overflow: hidden;
  background-color: var(--vrl-surface);
}
.vrl-accordion__head {
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  background: none;
  border: none;
  font-weight: 700;
  color: var(--vrl-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
}
.vrl-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--vrl-transition);
  padding: 0 24px;
}
.vrl-accordion__body.is-open {
  max-height: 480px;
  padding-bottom: 20px;
}

.vrl-form {
  display: grid;
  gap: 18px;
}
.vrl-form__row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}
.vrl-form input,
.vrl-form select,
.vrl-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--vrl-line);
  background-color: var(--vrl-surface);
  color: var(--vrl-text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--vrl-transition), box-shadow var(--vrl-transition);
}
.vrl-form input:focus,
.vrl-form select:focus,
.vrl-form textarea:focus {
  outline: none;
  border-color: var(--vrl-accent);
  box-shadow: 0 0 0 4px rgba(245, 179, 1, 0.18);
}
.vrl-form textarea { min-height: 140px; resize: vertical; }

.vrl-form__error { color: #c0392b; font-size: 0.85rem; }

@media (max-width: 640px) {
  .vrl-form__row { grid-template-columns: 1fr; }
  .vrl-slider__slide { padding: 56px 24px; }
  .vrl-section { padding: 64px 0; }
}

.vrl-hero {
  padding: 140px 0 120px;
  background-size: cover;
  background-position: center;
  color: var(--vrl-text-invert);
}
.vrl-hero h1 { color: var(--vrl-text-invert); }
.vrl-hero p { color: #dbe4f6; max-width: 640px; }

.vrl-stat {
  text-align: center;
  padding: 24px;
  border-radius: var(--vrl-radius);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.vrl-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: rgba(245, 179, 1, 0.16);
  color: var(--vrl-primary);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vrl-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vrl-list li {
  padding-left: 32px;
  position: relative;
  margin-bottom: 12px;
  color: var(--vrl-muted);
}
.vrl-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--vrl-accent);
}

.vrl-cta {
  border-radius: var(--vrl-radius-lg);
  padding: 60px;
  background-size: cover;
  background-position: center;
  color: var(--vrl-text-invert);
  text-align: center;
}
.vrl-cta h2 { color: var(--vrl-text-invert); }

.vrl-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.vrl-partners img { height: 48px; width: auto; }

.vrl-testimonial {
  background-color: var(--vrl-surface);
  border-radius: var(--vrl-radius);
  padding: 32px;
  box-shadow: var(--vrl-shadow-sm);
  border-left: 4px solid var(--vrl-accent);
}
.vrl-testimonial__text { font-style: italic; color: var(--vrl-text); }
.vrl-testimonial__author { font-weight: 700; color: var(--vrl-primary); margin-top: 16px; }

.vrl-map {
  border-radius: var(--vrl-radius-lg);
  overflow: hidden;
  box-shadow: var(--vrl-shadow-md);
  line-height: 0;
}
.vrl-map iframe { width: 100%; height: 440px; border: 0; display: block; }

.vrl-footer {
  background-color: var(--vrl-dark);
  color: #b8c1d6;
  padding: 72px 0 32px;
}
.vrl-footer h4 { color: var(--vrl-text-invert); }
.vrl-footer a { color: #b8c1d6; }
.vrl-footer a:hover { color: var(--vrl-accent); }
.vrl-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 48px;
  padding-top: 24px;
  font-size: 0.9rem;
}

.vrl-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--vrl-surface);
  box-shadow: var(--vrl-shadow-sm);
}
.vrl-header__top {
  background-color: var(--vrl-primary);
  color: var(--vrl-text-invert);
  font-size: 0.85rem;
  padding: 8px 0;
}
.vrl-header__top a { color: var(--vrl-text-invert); }
.vrl-header__top a:hover { color: var(--vrl-accent); }
.vrl-header__nav { display: flex; gap: 28px; font-weight: 600; }
.vrl-header__burger {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--vrl-primary);
  cursor: pointer;
}

.vrl-service-card {
  background-color: var(--vrl-surface);
  border-radius: var(--vrl-radius);
  overflow: hidden;
  box-shadow: var(--vrl-shadow-sm);
  transition: transform var(--vrl-transition), box-shadow var(--vrl-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.vrl-service-card:hover { transform: translateY(-8px); box-shadow: var(--vrl-shadow-md); }
.vrl-service-card img { width: 100%; height: 220px; object-fit: cover; }
.vrl-service-card__body { padding: 26px; flex: 1; display: flex; flex-direction: column; }

.vrl-price-card {
  background-color: var(--vrl-surface);
  border-radius: var(--vrl-radius);
  padding: 40px 32px;
  border: 2px solid var(--vrl-line);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color var(--vrl-transition), transform var(--vrl-transition);
}
.vrl-price-card:hover { border-color: var(--vrl-accent); transform: translateY(-6px); }
.vrl-price-card--featured {
  border-color: var(--vrl-accent);
  box-shadow: var(--vrl-shadow-md);
  position: relative;
}
.vrl-price-card__value {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--vrl-primary);
  line-height: 1;
}

.vrl-process {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}
.vrl-process__step {
  position: relative;
  padding: 32px 24px 24px;
  border-radius: var(--vrl-radius);
  background-color: var(--vrl-surface);
  border: 1px solid var(--vrl-line);
}
.vrl-process__step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -22px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--vrl-accent);
  color: var(--vrl-primary);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.vrl-newsletter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.vrl-newsletter input {
  flex: 1;
  min-width: 220px;
  padding: 14px 16px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
}

.vrl-cookie {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1080;
  max-width: 720px;
  margin-inline: auto;
  background: linear-gradient(135deg, #0b1e3a 0%, #16365c 100%);
  color: var(--vrl-text-invert);
  border-radius: var(--vrl-radius-lg);
  padding: 26px 30px;
  box-shadow: var(--vrl-shadow-lg);
  border: 1px solid rgba(245, 179, 1, 0.35);
  display: grid;
  gap: 16px;
  font-size: 0.95rem;
}

.vrl-cookie__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--vrl-text-invert);
  margin: 0;
}

.vrl-cookie__title i {
  color: var(--vrl-accent);
  font-size: 1.3rem;
}

.vrl-cookie__text {
  color: #cfd8ec;
  margin: 0;
  line-height: 1.6;
}

.vrl-cookie__text a {
  color: var(--vrl-accent);
  font-weight: 600;
  text-decoration: underline;
}

.vrl-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.vrl-cookie__accept {
  background-color: var(--vrl-accent);
  color: var(--vrl-primary);
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--vrl-transition), transform var(--vrl-transition);
}

.vrl-cookie__accept:hover {
  background-color: var(--vrl-accent-soft);
  transform: translateY(-2px);
}

.vrl-cookie__decline {
  background-color: transparent;
  color: var(--vrl-text-invert);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--vrl-transition), color var(--vrl-transition);
}

.vrl-cookie__decline:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 640px) {
  .vrl-cookie {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 22px;
  }
  .vrl-cookie__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .vrl-cookie__accept,
  .vrl-cookie__decline {
    width: 100%;
    text-align: center;
  }
}
/* ===== Contrast overrides (appended) ===== */
/* Photo/hero sections render over images; give them a solid dark backing
   so text contrast resolves correctly and remains correct visually. */
.vrl-hero,
.vrl-section--photo {
  background-color: var(--vrl-dark);
}

/* Accent gold is too light on white/light surfaces. Use a darker amber there. */
.vrl-eyebrow,
.vrl-counter {
  color: #8a5e00;
}

/* Keep the original bright accent on dark surfaces where it reads well. */
.vrl-hero .vrl-eyebrow,
.vrl-section--photo .vrl-eyebrow,
.vrl-section--dark .vrl-eyebrow,
.vrl-cta .vrl-eyebrow,
.vrl-hero .vrl-counter,
.vrl-section--photo .vrl-counter,
.vrl-section--dark .vrl-counter {
  color: var(--vrl-accent);
}

/* ===== Accessibility overrides: contrast fixes ===== */

/* Photo/hero sections paint a dark image; declare the solid base colour so
   text over imagery is measured against the dark backdrop, not page white. */
.vrl-hero,
.vrl-section--photo,
.vrl-cta {
  background-color: #050a14;
}

/* Gold #f5b301 is only ~1.85:1 on white/light surfaces. Use a deeper amber
   for eyebrows that sit on light backgrounds, keep the bright gold on dark. */
.vrl-eyebrow {
  color: #8c5a00;
}

.vrl-hero .vrl-eyebrow,
.vrl-section--dark .vrl-eyebrow,
.vrl-section--photo .vrl-eyebrow,
.vrl-cta .vrl-eyebrow {
  color: var(--vrl-accent);
}

/* Counters rendered inside white cards need the deeper amber as well. */
.vrl-card .vrl-counter {
  color: #8c5a00;
}

/* ===== Contrast / accessibility overrides (beginner-driver-course-k7) ===== */

/* Give the hero and photo sections a solid dark backdrop colour so light
   text sitting on them has a detectable, high-contrast background even when
   the background image is not rendered. */
.vrl-hero {
  background-color: #05101e;
}
.vrl-section--photo {
  background-color: #0a1424;
}

/* Eyebrow labels: use a darker amber on light/white surfaces so they pass
   contrast, while keeping the bright brand accent on dark surfaces. */
.vrl-eyebrow {
  color: #8a5e00;
}
.vrl-hero .vrl-eyebrow,
.vrl-section--dark .vrl-eyebrow,
.vrl-section--photo .vrl-eyebrow,
.vrl-cta .vrl-eyebrow {
  color: var(--vrl-accent);
}

/* Stat counters keep the bright accent on dark surfaces, but need a darker
   gold on white/light cards. */
.vrl-counter {
  color: #8a5e00;
}
.vrl-hero .vrl-counter,
.vrl-section--dark .vrl-counter,
.vrl-section--photo .vrl-counter,
.vrl-cta .vrl-counter {
  color: var(--vrl-accent);
}

/* Form labels sit inside a white card even when the parent section is dark,
   so they must use the dark body text colour. */
.vrl-form .form-label {
  color: var(--vrl-text);
}

/* ===== Contrast fix: service cards keep a white surface inside dark / photo sections =====
   Sections such as .vrl-section--dark force their h1/h2/h3 to the inverted (near-white)
   text colour. Service cards embedded in those sections still paint a white surface, so
   their headings must use the dark body colour instead or they become invisible. */
.vrl-section--dark .vrl-service-card__body h1,
.vrl-section--dark .vrl-service-card__body h2,
.vrl-section--dark .vrl-service-card__body h3,
.vrl-section--photo .vrl-service-card__body h1,
.vrl-section--photo .vrl-service-card__body h2,
.vrl-section--photo .vrl-service-card__body h3,
.vrl-service-card__body h1,
.vrl-service-card__body h2,
.vrl-service-card__body h3 {
  color: var(--vrl-primary);
}

/* ===== Blog page: card heading contrast over dark/photo sections ===== */
/* Service cards always render on a white surface, so their headings must use
   the dark brand text colour even when an ancestor section is dark or photo
   (which forces headings to the light invert colour). */
.vrl-section--dark .vrl-service-card__body h3,
.vrl-section--dark .vrl-service-card__body h2,
.vrl-section--dark .vrl-service-card__body h4,
.vrl-section--photo .vrl-service-card__body h3,
.vrl-section--photo .vrl-service-card__body h2,
.vrl-section--photo .vrl-service-card__body h4,
.vrl-service-card__body h3,
.vrl-service-card__body h2,
.vrl-service-card__body h4 {
  color: var(--vrl-primary);
}
/* Keep the inner link in those white cards readable too. */
.vrl-section--dark .vrl-service-card__body h3 a,
.vrl-section--photo .vrl-service-card__body h3 a,
.vrl-service-card__body h3 a {
  color: var(--vrl-primary);
}

/* ===== Contrast fix: hero badge (Highway Confidence Refresher) =====
   The .vrl-badge is a dark navy pill on a semi-transparent gold over a dark
   hero backdrop, so its default dark text (--vrl-primary) fails contrast.
   Inside the dark hero, use light text and a stronger gold backdrop. */
.vrl-hero .vrl-badge {
  background-color: rgba(245, 179, 1, 0.9);
  color: #0b1e3a;
}
.vrl-hero .vrl-card .vrl-badge {
  background-color: var(--vrl-accent);
  color: #0b1e3a;
}

/* ===== Contrast fixes: homepage ===== */

/* Accordion answers always render inside a white accordion item, even when the
   enclosing section is dark. The dark-section rule forces paragraphs to a light
   colour (#c8d3ea), which lands on the white item and drops to ~1.5:1. Force the
   body text back to the dark brand text colour. */
.vrl-accordion__body p,
.vrl-section--dark .vrl-accordion__body p,
.vrl-section--photo .vrl-accordion__body p {
  color: var(--vrl-text);
}

/* Cookie banner paints its panel with a background-image gradient and no solid
   background-color, so automated checks resolve the underlying page white and
   report every label as low contrast. Declare the solid panel colour so the
   light text is measured against the dark navy surface it visually sits on. */
.vrl-cookie {
  background-color: #0b1e3a;
}

/* ===== Contrast fix: highlighted "Four-Module Bundle" card on the price page =====
   This card sits inside a dark section but keeps dark navy / dark body text while
   its translucent gold overlay resolves to a dark surface (approx. #2c3332).
   Recolour the text so it reads against that dark backdrop. */
.vrl-refresher-featured h3,
.vrl-refresher-featured .vrl-list li {
  color: var(--vrl-text-invert) !important;
}
.vrl-refresher-featured > p,
.vrl-refresher-featured .vrl-list li {
  color: #dbe4f6 !important;
}
.vrl-refresher-featured .vrl-price-card__value {
  color: var(--vrl-accent) !important;
}

/* ===== Contrast fix: service card body text inside photo/dark sections =====
   .vrl-section--photo forces all paragraphs to the light #dfe6f5 colour, but
   service cards still paint a white surface, so their descriptions drop to
   ~1.25:1. Force the dark body text colour for card paragraphs. */
.vrl-section--photo .vrl-service-card__body p,
.vrl-section--dark .vrl-service-card__body p,
.vrl-service-card__body p {
  color: var(--vrl-text);
}