:root {
  --orange: #FF380F;
  --orange-hover: #e22f0a;
  --navy: #1F376B;
  --navy-dark: #1f2f57;
  --text-dark: #1b2a4a;
  --white: #ffffff;
}

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

html, body { height: 100%; }

html { height: 100%; overflow: hidden; } /* lock to viewport: no scrolling */

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color: var(--white);
  display: flex;
  flex-direction: column;
  height: 100vh;      /* fallback */
  height: 100svh;     /* fits within mobile browser chrome */
  overflow: hidden;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  display: flex;
  flex-shrink: 0; /* never compress the header */
  height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 0 4px 0 rgba(61, 74, 93, 0.08), 0 2px 4px 0 rgba(61, 74, 93, 0.12);
  position: relative;
  z-index: 10;
}

.logo { display: block; line-height: 0; }
.logo svg { height: 32px; width: auto; display: block; }

.lang-toggle {
  display: flex;
  width: 100px;
  padding: 4px;
  gap: 4px;
  align-items: flex-start;
  border: 1px solid #d5d9e0;
  border-radius: 8px;
}
.lang-toggle button {
  flex: 1 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 5px;
  background: var(--white);
  color: #151515;
  text-align: center;
  /* XSmall/Regular */
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px; /* 133.333% */
  letter-spacing: 0.25px;
  padding: 4px 8px;
  cursor: pointer;
}
.lang-toggle button.active {
  background: #eef1f6;
  color: #151515;
}

/* ---------- Hero ---------- */
.hero {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  background-color: #3a3f47;
  /* JPG fallback first, then high-res WebP via image-set for modern/Retina */
  background-image: url('assets/hero-truck.jpg');
  background-image: -webkit-image-set(url('assets/hero-truck@2x.webp') 1x);
  background-image: image-set(url('assets/hero-truck@2x.webp') 1x, url('assets/hero-truck.jpg') 1x);
  background-position: right 78%;
  background-size: cover; /* always fill the hero at any viewport size (no bars) */
  background-repeat: no-repeat;
  min-height: 0; /* allow the hero to shrink so the page fits the viewport */
  overflow: hidden;
}
/* Dark gradient overlay for text legibility */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,24,32,0.78) 0%, rgba(20,24,32,0.45) 45%, rgba(20,24,32,0.15) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.eyebrow {
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 35px; /* 145.833% */
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.headline {
  color: #FFF;
  /* Condensed fallback so it never flashes a wide heavy sans before the webfont loads */
  font-family: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  font-size: 80px;
  line-height: 64px; /* 80% */
  letter-spacing: -0.8px;
  margin-bottom: 24px;
  white-space: nowrap; /* keep the two designed lines from wrapping further */
}

.waitlist-title {
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 35px; /* 145.833% */
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.waitlist-sub {
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
  letter-spacing: 0;
  margin-bottom: 8px;
  white-space: nowrap; /* single line by design */
}

/* Wrapper shrinks to the subtext width so the form (and submit) align to "Quebec." */
.hero-cta {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

/* ---------- Form ---------- */
.signup-form {
  display: flex;
  gap: 12px;
  width: 100%;
}

.signup-form input[type="email"] {
  display: flex;
  flex: 1 0 0;
  align-self: stretch;
  align-items: center;
  border: 0;
  border-radius: 5px;
  padding: 8px 6px 8px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--white);
}
.signup-form input[type="email"]::placeholder {
  color: #8a93a3;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.signup-form button {
  display: flex;
  height: 52px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 5px;
  background: var(--orange);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 17px 24px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.signup-form button:hover { background: var(--orange-hover); }
.signup-form button:disabled { opacity: 0.7; cursor: default; }

/* Honeypot — hidden from humans */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hidden from view but available to screen readers (accessible labels, etc.) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-message {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  min-height: 20px;
}
.form-message.error { color: #ffd0c4; }
.form-message.success { color: #c7f3d0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  flex-shrink: 0; /* never compress / overflow the footer */
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 15px;
}
.footer-privacy { max-width: 60%; }
.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}
.footer-right a { color: var(--white); text-decoration: none; }
.social { display: inline-flex; gap: 10px; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.social svg { width: 26px; height: 26px; fill: var(--white); }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .site-header { padding: 0 16px; }
  .logo svg { height: 34px; }
  .lang-toggle { width: 100px; }
  .lang-toggle button { padding: 6px 8px; }

  .hero {
    /* Content top + bottom, portrait truck image filling the middle */
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    padding: 0;
    /* fill the space between header & footer; shrink if needed so the
       whole page fits the viewport (no scroll) */
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    background-image: url('assets/hero-truck-mobile.jpg');
    background-image: image-set(url('assets/hero-truck-mobile.webp') 1x, url('assets/hero-truck-mobile.jpg') 1x);
    background-size: cover;
    background-position: 42% 88%;
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(20,24,32,0.72) 0%, rgba(20,24,32,0.32) 26%, rgba(20,24,32,0.2) 52%, rgba(20,24,32,0.7) 78%, rgba(20,24,32,0.92) 100%);
  }
  .hero-content {
    flex: 1;
    min-width: 0; /* prevent flex children from forcing horizontal overflow */
    max-width: 100%;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /* Each block carries its own 16px padding (per Figma) */
  .hero-top {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }
  .hero-bottom {
    min-width: 0;
    max-width: 100%;
    padding: 16px;
  }
  /* Subtitle/Subtitle 20 */
  .eyebrow { font-size: 20px; line-height: 31px; margin-bottom: 0; }
  .headline {
    /* Fluid: caps at 64px (>=393px wide & tall enough); scales down by BOTH
       viewport width and height so it always fits without scrolling */
    font-size: clamp(30px, min(16.28vw, 8.4vh), 64px);
    line-height: 0.78; /* scales with font-size */
    letter-spacing: -0.64px;
    white-space: normal; /* allow wrapping on mobile */
    margin-bottom: 0;
    overflow-wrap: break-word;
  }
  .hero-cta { width: 100%; }
  /* Subtitle/Subtitle 20 */
  .waitlist-title { font-size: 20px; line-height: 31px; }
  /* Body/Body 16 */
  .waitlist-sub {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 12px;
    white-space: normal; /* allow wrapping on mobile */
  }

  .signup-form {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .signup-form input[type="email"] { padding: 16px; min-width: 0; width: 100%; }
  .signup-form button { width: 100%; height: 52px; padding: 16px; }

  .site-footer {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 16px;
  }
  .footer-privacy { max-width: 100%; }
  .footer-right {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 12px;
    white-space: normal;
  }
}

/* ---------- Short viewports: compact so the locked page still fits (no scroll) ---------- */
@media (max-width: 768px) and (max-height: 740px) {
  .hero-top { padding: 12px 16px; gap: 6px; }
  .hero-bottom { padding: 12px 16px; }
  .eyebrow { font-size: 16px; line-height: 21px; }
  .headline { font-size: clamp(22px, min(14.5vw, 6.6vh), 56px); }
  .waitlist-title { font-size: 18px; line-height: 24px; }
  .waitlist-sub { font-size: 14px; line-height: 19px; margin-bottom: 8px; }
  .signup-form { gap: 8px; }
  .signup-form input[type="email"] { padding: 12px 14px; }
  .signup-form button { height: 46px; padding: 12px; }

  .site-footer { gap: 8px; padding: 12px 16px; }
  .footer-privacy { font-size: 13px; }
  .footer-right { font-size: 13px; row-gap: 8px; }
  .social svg { width: 22px; height: 22px; }
}