:root{
  --blue:#005BBB; --blue-dark:#004a98; --grey:#F5F5F5;
  --black:#111111; --text:#222; --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text)}

/* --- Standardized NAV (match other pages) --- */
.nav{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e7eaee;
  padding: 10px 16px;                 /* was 10px 20px */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Only affect the logo in the NAV, not the big hero circle */
.nav img.logo-round{
  height: 44px;                       /* match other pages */
  width: 44px;
  padding: 0;                         /* remove extra padding */
  border-radius: 50%;
  object-fit: cover;
}

/* Nav links (match other pages) */
.nav a{
  color: #0b1324;
  text-decoration: none;
  margin-left: 16px;
  font-weight: 600;
  font-size: 16px;                    /* consistent typography */
  line-height: 1;
}

/* Add this AFTER the two above */
.nav a.active {
  color: var(--blue);
  font-weight:700; /* optional: make it stand out more */
}

/* Large circular logo in hero */
.logo-hero {
  background:#fff;
  border-radius:50%;
  padding:12px;
  height:140px;
  margin-bottom:24px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.hero{
  position:relative;background:var(--blue);color:#fff;
  padding:80px 20px;text-align:center;overflow:hidden;
  min-height:70vh;display:flex;align-items:center;justify-content:center;flex-direction:column
}
.hero .container{max-width:1000px;margin:0 auto}
.hero h1{font-size:2rem;line-height:1.3;max-width:900px;margin:0 0 30px;min-height:3rem}

/* Buttons */
.btn{
  border-radius:999px;padding:14px 24px;font-weight:700;border:2px solid #fff;
  cursor:pointer;text-decoration:none;display:inline-block;transition:.2s;
}
.btn.white{background:#fff;color:var(--blue);}
.btn.white:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.15);}

/* CTA starts hidden; shows after typing finishes */
.cta{
  opacity:0;transform: translateY(8px);pointer-events:none;
  transition: opacity .5s ease, transform .5s ease;
}
.cta.show{
  opacity:1;transform:none;pointer-events:auto;
}

/* Blinking caret that stays permanently */
#teleprinter::after {
  content: "|";
  margin-left: 4px;
  color: #fff;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* === Sticky footer layout (drivers page only) === */
html, body { height: 100%; }

body.page-drivers {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page-drivers .hero {
  flex: 1 0 auto; /* main content grows */
}

body.page-drivers footer#contact {
  flex: 0 0 auto;
  margin-top: 0 !important;
}

/* === Drivers footer: match homepage (keep logo), compact & consistent === */
.page-drivers footer#contact{
  background:#fff;
  color:#243145;
  border-top:1px solid #eef2f6;
  padding:12px 0;
}

.page-drivers footer#contact .container{
  display:grid;
  justify-items:center;
  gap:6px;
  text-align:center;
}

.page-drivers footer#contact img.logo-round{
  height:44px; width:44px; border-radius:50%;
  margin:0 0 6px;
}

.page-drivers footer#contact p{
  margin:0;
  line-height:1.25;
}

.page-drivers footer#contact a{
  color:#243145; font-weight:600; text-decoration:none;
}
.page-drivers footer#contact a:hover{ color:var(--blue); }

/* --- Hamburger nav (shared) --- */
.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}

.nav{display:flex;align-items:center;gap:24px;padding:10px 16px;position:relative;background:#fff}
.logo-round{width:36px;height:36px}
.menu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.menu a{font-weight:600;text-decoration:none}
.menu a.active{color:var(--blue,#1f4fa1)}

.menu-toggle{
  display:none;background:none;border:0;font-size:28px;line-height:1;
  padding:6px 8px;cursor:pointer;border-radius:10px
}
.menu-toggle:focus-visible{outline:2px solid var(--blue,#1f4fa1);outline-offset:3px}

/* Mobile dropdown */
@media (max-width:768px){
  .nav{position:sticky;top:0;z-index:100}
  .menu-toggle{display:block}
  .menu{
    position:absolute;left:0;right:0;top:56px;display:none;flex-direction:column;gap:12px;
    padding:12px 16px;background:#fff;border-top:1px solid #eef2f6;box-shadow:0 10px 24px rgba(0,0,0,.06)
  }
  .menu.open{display:flex}
}