/* ==========================================================================
   AUTOBAHN MOTORS — tracyautobahnmotors.com
   AE Creative Studio
   ========================================================================== */

:root {
  /* Neutral black-and-grey base. The logo's blue and red are accents only:
     blue = information, red = action. Nothing else carries colour. */
  --black: #060607;          /* page base */
  --black-soft: #0e0f11;     /* raised surface */
  --gray-900: #16171a;       /* cards */
  --gray-800: #202226;       /* hairlines */
  --gray-700: #2e3036;       /* borders */
  --gray-500: #71747c;       /* muted text */
  --silver: #b7bac1;
  --silver-light: #dcdee2;
  --white: #f5f6f7;

  --blue: #4787ce;           /* logo light-blue segment */
  --blue-bright: #72aae6;
  --blue-deep: #0d1b4b;      /* logo navy segment */
  --blue-glow: rgba(71, 135, 206, 0.30);

  --red: #d80001;            /* logo red segment */
  --red-dark: #a00201;
  --red-glow: rgba(216, 0, 1, 0.38);

  /* Brushed-aluminium strip — echoes the logo's metal lettering */
  --metal: linear-gradient(100deg,
    #44474d 0%, #9ca0a8 18%, #eceef1 34%, #85898f 50%,
    #c6c9ce 66%, #65686e 84%, #36393e 100%);

  --font-display: 'Orbitron', 'Arial Black', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --nav-h: 76px;
  --skew: -6deg;
}

* { box-sizing: border-box; }

/* Root paints the same black as the body so no default canvas color can show
   at the viewport edges. Do NOT set overflow here — overflow-x on <html>
   forces overflow-y to compute to `auto`, making <html> its own scroll
   container and breaking sticky positioning. Clipping belongs on <body>. */
html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--silver-light);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 16px;
  letter-spacing: 0.5px;
  line-height: 1.12;
}

/* The skewed display face is the brand signature — headline-scale only. */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
  transform: skewX(var(--skew));
  transform-origin: left bottom;
}
.display.center { transform-origin: center bottom; }

p { color: var(--silver); margin: 0 0 16px; max-width: 68ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 11.5px;
  color: var(--blue);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--blue);
  display: inline-block;
}

.section { padding: 100px 0; position: relative; }
.section-tight { padding: 64px 0; }
.section-alt {
  background:
    linear-gradient(rgba(14,15,17,0.93), rgba(14,15,17,0.93)),
    url('../images/texture-carbon.jpg');
  background-size: cover;
  background-position: center;
}

/* Brushed-metal hairline used to open major sections */
.metal-rule {
  height: 2px;
  background: var(--metal);
  border: 0;
  margin: 0;
  opacity: 0.55;
}

.section-head { max-width: 660px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head p { margin-left: auto; margin-right: auto; }
.section-head.left { margin: 0 0 48px; text-align: left; }
.section-head.left p { margin-left: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  padding: 17px 32px;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-dark); box-shadow: 0 8px 24px var(--red-glow); }
.btn-outline { background: transparent; border-color: var(--gray-700); color: var(--white); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-bright); }
.btn-block { width: 100%; }
.btn-sm { padding: 11px 22px; font-size: 11.5px; }
.btn:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  min-height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(6,6,7,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Wider than the 1240px content column on purpose: the bar carries the
     logo, eight tabs, the switcher, the phone and the quote button, about
     1320px of content. At the old 1400px cap that left 84px of slack in the
     whole row, so the groups sat barely further apart than the tabs within
     them, and the bar read as cramped on any large screen. */
  max-width: 1680px;
  flex-wrap: nowrap;
  gap: 20px;
}

/* Three zones: logo hard left, tabs and switcher in the middle, phone and
   quote button hard right. The tabs never wrap — .nav-links stays nowrap
   and the whole bar drops to the hamburger before it would have to. */
.nav-left { flex: 0 0 auto; display: flex; align-items: center; }
.nav-mid  { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
            gap: 22px; min-width: 0; }
.nav-cta  { flex: 0 0 auto; }

/* The middle group is centred in the space left between the logo and the
   buttons, which gives it equal air on both sides. Centring it on the true
   middle of the page instead looks worse here: the right-hand cluster is
   311px against the logo's 175px, so true centring pushes the gaps to
   243px on the left and 113px on the right and the switcher crowds the
   phone number. Equal gaps read as deliberate; the few pixels the tabs sit
   off the page's exact centre do not register against a left logo and a
   right-hand button. */
.brand { display: flex; align-items: center; flex-shrink: 0; padding: 10px 0; }
.brand img { height: 38px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 26px; flex-shrink: 0; flex-wrap: nowrap; white-space: nowrap; }
.nav-links a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--silver);
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
}

.nav-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Nothing in the nav row is allowed to shrink, so when the labels total more
   than the width available the row overflows and the rightmost item — the
   language switcher — slides off screen, leaving a visitor no way to switch
   back. Translated labels run longer than the English ones, but the English
   bar overflowed on mid-size laptops too. Below, the gaps and tracking
   tighten as the window narrows, and under 1180px the bar gives up and uses
   the hamburger, which always keeps the switcher reachable. */
/* Only the translated bars need tightening, and only where they would
   otherwise overflow: measured at the approved spacing, English needs
   1316px, Punjabi 1058 and Tagalog 1244, but Spanish needs 1364. Since the
   inline bar is hidden below 1340 anyway, English never needs squeezing —
   an earlier version tightened it too and the menu read as cramped. */
@media (max-width: 1560px) {
  html:not([lang="en"]) .nav-links { gap: 18px; }
  html:not([lang="en"]) .nav-links a { letter-spacing: 0.8px; }
}
.nav-phone {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--white);
  font-size: 13.5px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-phone svg { width: 16px; height: 16px; fill: var(--red); flex-shrink: 0; }
.nav-quote-btn { white-space: nowrap; padding: 11px 18px; font-size: 11.5px; }

.nav-toggle {
  display: none;
  width: 30px; height: 22px;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.nav-toggle span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--white); transition: all 0.25s ease;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--black-soft);
  border-bottom: 1px solid var(--gray-800);
  padding: 20px 24px 30px;
  transform: translateY(-120%);
  transition: transform 0.3s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nav-drawer.open { transform: translateY(0); }
.nav-drawer a {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 15px;
  color: var(--silver-light);
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-800);
}
.nav-drawer a.active { color: var(--red); }

/* ==========================================================================
   HOME HERO — video
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video,
.hero-media img.hero-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-media img.hero-fallback { display: none; }
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6,6,7,0.55) 0%, rgba(6,6,7,0) 26%,
    rgba(6,6,7,0.22) 55%, rgba(6,6,7,0.88) 88%, var(--black) 100%);
}
/* Logo reveal layered over the footage: the mark is a real element, so it can
   hold, lean and fly off independently of the video. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity 0.9s ease;
}
.hero-smoke { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-mark {
  position: absolute; left: 0; top: 0; z-index: 4;
  opacity: 0; pointer-events: none;
  will-change: transform, opacity, filter;
  transition: opacity 0.9s ease;
}
.hero-mark img { width: 100%; height: auto; display: block; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 24px 64px;
}
.hero-content h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.2vw, 62px);
  line-height: 1.02;
  letter-spacing: 0.5px;
  margin: 0 0 18px;
  max-width: 24ch;
  transform: skewX(var(--skew));
  transform-origin: left bottom;
  text-shadow: 0 6px 30px rgba(0,0,0,0.8);
}
.hero-content h1 em { font-style: normal; color: var(--red); }
.hero-content p.lead {
  max-width: 50ch;
  margin: 0 0 30px;
  font-size: 17px;
  color: var(--silver-light);
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 13px;
  color: var(--silver);
}
.hero-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.hero-meta span.item { display: inline-flex; align-items: center; gap: 9px; }

/* ==========================================================================
   PAGE HERO (interior pages)
   ========================================================================== */
.page-hero {
  padding: calc(var(--nav-h) + 92px) 0 72px;
  background:
    linear-gradient(180deg, rgba(6,6,7,0.45), var(--black) 90%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 60px);
  border-bottom: 1px solid var(--gray-800);
  text-align: center;
}
.page-hero .eyebrow { justify-content: center; }
.page-hero .eyebrow::before { display: none; }
.page-hero h1 {
  font-size: clamp(34px, 5.6vw, 58px);
  margin-bottom: 12px;
  transform: skewX(var(--skew));
}
.page-hero p.lead { max-width: 58ch; margin: 0 auto; font-size: 17px; }
.breadcrumb {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--gray-500);
  text-transform: uppercase;
}
.breadcrumb a:hover { color: var(--blue-bright); }

/* ==========================================================================
   IMAGE PLACEHOLDER (until real shop photos are supplied)
   ========================================================================== */
.img-ph {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--gray-900) 0%, var(--black-soft) 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 2px, transparent 2px, transparent 14px);
  border: 1px solid var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-ph.wide { aspect-ratio: 16 / 9; }
.img-ph.square { aspect-ratio: 1 / 1; }
.img-ph.tall { aspect-ratio: 3 / 4; }
.img-ph-inner { text-align: center; padding: 20px; }
.img-ph-inner svg {
  width: 34px; height: 34px;
  fill: none; stroke: var(--gray-500); stroke-width: 1.4;
  margin: 0 auto 10px;
}
.img-ph-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.img-ph.has-photo { background: none; border: none; }
.img-ph.has-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   MARQUEE (brands serviced)
   ========================================================================== */
.marquee {
  border-top: 1px solid var(--gray-800);
  border-bottom: 1px solid var(--gray-800);
  padding: 30px 0;
  overflow: hidden;
  background: var(--black-soft);
}
.marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee 180s linear infinite;
}
.marquee-track img.marquee-logo {
  height: 38px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.marquee-track img.marquee-logo:hover { opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 40px; }
}

/* ==========================================================================
   GRIDS / CARDS
   ========================================================================== */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 4px;
  padding: 34px 28px;
  transition: border-color 0.25s ease;
}
.card:hover { border-color: var(--gray-700); }
.card .icon {
  width: 46px; height: 46px;
  margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--blue);
  border-radius: 50%;
}
.card .icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.6; }
.card h3 { font-size: 17px; margin-bottom: 10px; letter-spacing: 0.4px; }
.card p { font-size: 14.5px; margin-bottom: 0; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 48px);
  color: var(--white);
  line-height: 1;
}
.stat-num span { color: var(--blue); }
.stat-num .star { font-size: 0.55em; color: var(--blue); vertical-align: 0.22em; margin-left: 2px; }
.stat-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 10px;
}

/* Brand chips (services page strip) */
.brand-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.brand-chip {
  border: 1px solid var(--gray-700);
  padding: 12px 22px;
  border-radius: 2px;
  background: var(--gray-900);
  display: flex;
  align-items: center;
}
.brand-chip img.brand-chip-logo { height: 30px; width: auto; max-width: 96px; object-fit: contain; }

/* Testimonials */
.testi {
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-left: 3px solid var(--blue);
  padding: 30px 30px 26px;
  border-radius: 2px;
}
.testi p.quote { color: var(--silver-light); font-size: 15.5px; font-style: italic; margin-bottom: 18px; }
.testi-stars { color: var(--red); letter-spacing: 2px; margin-bottom: 12px; font-size: 14px; }
.testi-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.testi-veh { font-size: 12.5px; color: var(--gray-500); margin-top: 3px; }

/* Two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split p { max-width: none; }

/* CTA banner */
.cta-banner {
  background: linear-gradient(120deg, rgba(71,135,206,0.13), transparent 62%), var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 6px;
  padding: 64px 48px;
  text-align: center;
}
.cta-banner .eyebrow { justify-content: center; }
.cta-banner h2 { font-size: clamp(26px, 3.8vw, 40px); }
.cta-banner p { max-width: 52ch; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- CTA with the particle mark beside it ----------------------------
   Homepage only. The mark sits on the section's own black rather than
   inside the card: on the card's lighter gradient the canvas reads as a
   pasted-on rectangle, and the points lose contrast. */
.cta-row {
  display: grid;
  /* The mark takes the larger share: it is the thing people stop and play
     with, and it needs clear space around it so shoved points stay on
     canvas instead of being clipped at the edge. */
  grid-template-columns: 1.22fr minmax(350px, 0.88fr);
  align-items: center;
  gap: 36px;
}
.cta-row .cta-banner {
  padding: 38px 40px;
  text-align: left;
}
.cta-row .cta-banner .eyebrow { justify-content: flex-start; }
.cta-row .cta-banner h2 { font-size: clamp(24px, 2.9vw, 34px); text-align: left; }
.cta-row .cta-banner p { max-width: 44ch; margin: 0 0 26px; }
/* The card is narrow here because the mark takes the room, so the two
   buttons stack rather than wrapping raggedly onto a second row. Matched
   widths make that read as a deliberate stack. */
.cta-row .cta-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 340px;
}

.cta-mark { position: relative; aspect-ratio: 4 / 3; max-width: 100%; }
.cta-mark canvas { display: block; width: 100%; height: 100%; }
.cta-mark .cta-mark-flat {
  /* the still mark, shown only when the canvas can't or shouldn't run */
  display: none;
  width: 100%; height: auto;
  opacity: 0.92;
}
.cta-mark.is-static canvas { display: none; }
.cta-mark.is-static .cta-mark-flat { display: block; }

@media (max-width: 1040px) and (min-width: 821px) {
  .cta-row { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 820px) {
  .cta-row { grid-template-columns: 1fr; gap: 24px; }
  .cta-row .cta-banner { padding: 34px 24px; text-align: center; }
  .cta-row .cta-banner .eyebrow { justify-content: center; }
  .cta-row .cta-actions { margin-left: auto; margin-right: auto; }
  .cta-row .cta-banner h2 { text-align: center; }
  .cta-row .cta-banner p { margin-left: auto; margin-right: auto; }
  .cta-mark { aspect-ratio: 5 / 4; max-width: 440px; margin: 0 auto; }
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--silver);
}
.field input, .field select, .field textarea {
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  color: var(--white);
  padding: 14px 16px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 13px; color: var(--gray-500); margin-top: -6px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success, .form-error {
  display: none;
  padding: 20px 24px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 15px;
  text-align: center;
  margin-bottom: 20px;
}
.form-success { background: rgba(71,135,206,0.10); border: 1px solid var(--blue); color: var(--white); }
.form-error { background: rgba(255,255,255,0.04); border: 1px solid var(--gray-700); color: var(--silver-light); }
.form-success.show, .form-error.show { display: block; }

.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  border: 1.5px dashed var(--gray-700);
  border-radius: 4px;
  background: var(--gray-900);
  padding: 30px 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.file-drop:hover { border-color: var(--blue); background: var(--black-soft); }
.file-drop svg { width: 28px; height: 28px; stroke: var(--blue); fill: none; stroke-width: 1.6; }
.file-drop-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}
.file-drop-note { font-size: 12.5px; color: var(--gray-500); }
.file-drop-name { font-size: 13.5px; color: var(--blue-bright); word-break: break-all; display: none; }
.file-drop.has-file { border-style: solid; border-color: var(--blue); background: var(--black-soft); }
.file-drop.has-file .file-drop-name { display: block; }
.file-drop input[type="file"] { display: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background:
    linear-gradient(rgba(14,15,17,0.95), rgba(14,15,17,0.95)),
    url('../images/texture-carbon.jpg');
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--gray-800);
  padding: 72px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 40px;
  margin-bottom: 50px;
}
.footer-logo { height: 42px; width: auto; margin-bottom: 18px; }
.footer h4 {
  font-size: 12.5px;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 20px;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 14px; color: var(--silver); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--blue-bright); }
.footer-links li { font-size: 14px; color: var(--silver); }
.footer-desc { font-size: 14px; color: var(--gray-500); max-width: 34ch; margin-bottom: 20px; }
.footer-social {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--gray-700);
  padding: 10px 18px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--silver-light);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-social:hover { border-color: var(--blue); color: var(--blue-bright); }
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--gray-800);
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--gray-500);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: var(--gray-500); }
.footer-bottom a:hover { color: var(--blue-bright); }

/* ==========================================================================
   MODAL (careers flyer)
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(6,6,7,0.85);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  background: var(--gray-900);
  border: 1px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal-box img { width: 100%; border-radius: 5px 5px 0 0; }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(6,6,7,0.75);
  border: 1px solid var(--gray-700);
  color: var(--white);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.modal-close:hover { border-color: var(--blue); color: var(--blue-bright); }

/* ==========================================================================
   MISC
   ========================================================================== */
.map-embed {
  border: 1px solid var(--gray-800);
  border-radius: 4px;
  overflow: hidden;
  filter: grayscale(0.45) contrast(1.08) invert(0.92);
}
.map-embed iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }

.badge-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--silver-light);
  border: 1px solid var(--gray-700); padding: 8px 16px; border-radius: 20px;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

.divider { height: 1px; background: var(--gray-800); margin: 60px 0; border: 0; }

.list-check { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.list-check li { display: flex; gap: 12px; font-size: 15px; color: var(--silver-light); align-items: flex-start; }
.list-check svg { width: 18px; height: 18px; stroke: var(--blue); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 3px; }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 11px 0; border-bottom: 1px solid var(--gray-800); font-size: 14.5px; }
.hours-table td:first-child {
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12.5px;
}
.hours-table td:last-child { text-align: right; color: var(--silver); }
.hours-table tr.today td, .hours-table tr.today td:first-child { color: var(--red); }

/* Sticky mobile call bar */
.mobile-call-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--red);
}
.mobile-call-bar a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 13px;
}

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-item { border-radius: 4px; overflow: hidden; border: 1px solid var(--gray-800); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 12px; }
  .nav-phone { display: none; }
}

.section-alt + .section { padding-top: 84px; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .section { padding: 80px 0; }
}

/* Phones: the portrait cut is letterboxed, so overlaying the copy on it crowds
   the logo and the headline. Stack instead — video band, then copy on black. */
@media (max-width: 860px) and (orientation: portrait) {
  .hero { display: block; min-height: 0; padding-top: var(--nav-h); }
  /* The portrait cut is a 16:9 frame letterboxed into 9:16, so a tall band
     just shows baked-in black bars. Size the band to that 16:9 strip
     (56.25vw) plus a small margin top and bottom — the bars become a thin
     frame instead of a dead gap above the headline. Padding-top on .hero
     clears the fixed nav so none of the band hides behind it. */
  .hero-media {
    position: relative; inset: auto;
    height: calc(56.25vw + 76px); min-height: 0;
  }
  /* Stacked copy sits on its own black, so the heavy bottom scrim that keeps
     overlaid text legible would only mute the cars. Keep a soft fade. */
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(6,6,7,0.45) 0%, rgba(6,6,7,0) 20%,
      rgba(6,6,7,0) 72%, rgba(6,6,7,0.9) 100%);
  }
  .hero-content { padding: 26px 24px 70px; }
  .hero-content h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .hero-content p.lead { font-size: 16px; }
}

/* Phone held sideways: 100svh is ~390px, which is shorter than the hero copy,
   so overflow:hidden was clipping the headline off the top. Let the hero size
   to its content there and scroll instead. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero { min-height: 0; }
  .hero-content { padding-top: calc(var(--nav-h) + 48px); }
  /* No clear band left between the nav and the headline, so the big lockup
     would land on top of the copy. The nav already carries the wordmark. */
  .hero-mark, .hero-smoke { display: none; }
}

/* Even tightened, the eight inline links plus the quote button and the
   language switcher need about 1340px. Below that the row used to overflow
   and push the switcher off screen, in English as well. So from here down
   the links move into the drawer, which the hamburger already opens at any
   width, while the quote button and the switcher stay on the bar. */
@media (max-width: 1380px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  /* only the switcher is left in the middle column — keep it on the right,
     next to the hamburger, rather than floating in the centre */
  .nav-mid { justify-content: flex-end; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-phone { display: flex; }
  .nav-phone span.txt { display: none; }
  .nav-quote-btn { display: none; }
  .nav-toggle { display: block; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .form-grid { grid-template-columns: 1fr; }
  .mobile-call-bar { display: block; }
  body { padding-bottom: 58px; }
  .hero-content { padding-bottom: 96px; }
}

@media (max-width: 640px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .section { padding: 64px 0; }
  .cta-banner { padding: 44px 24px; }
  .brand img { height: 32px; }
  .hero-content h1 { max-width: 100%; }
}

/* Reveal — used on a small number of key sections only */
.reveal { transition: opacity 0.7s ease, transform 0.7s ease; }
html.js-reveal .reveal { opacity: 0; transform: translateY(20px); }
html.js-reveal .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, html.js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   REVIEWS MARQUEE — a continuous slow drift, same trick as the brand strip.
   JS clones the review set until the track is two identical halves, then the
   loop translates by exactly -50% so the seam never shows. Speed is set from
   the track's real width, so adding reviews makes the loop longer, not faster.
   ========================================================================== */
.reviews-marquee {
  overflow: hidden;
  padding: 4px 0 6px;
  /* bleed past the container so cards enter and leave at the window edge */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.reviews-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  padding-left: 24px;
  animation: rev-marquee var(--rev-dur, 90s) linear infinite;
}
.reviews-marquee.is-paused .reviews-track { animation-play-state: paused; }
.reviews-track > .testi {
  flex: 0 0 auto;
  width: clamp(270px, 25vw, 360px);
  margin: 0;
  /* cards stretch to the tallest in the row, so push the attribution to the
     bottom instead of leaving it floating under a short quote */
  display: flex;
  flex-direction: column;
}
.reviews-track > .testi .quote { flex: 1 0 auto; }
/* Travel is the exact distance to the start of the second copy — one set
   plus one gap. Translating by -50% instead would land half a gap short
   and show a jump at the wrap. */
@keyframes rev-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--rev-travel, 50%))); }
}

.rev-meta {
  margin-top: 26px;
  text-align: center;
  /* the base `p` rule caps paragraphs at 68ch, which left-anchors this one */
  max-width: none;
  font-size: 13.5px;
  color: var(--gray-500);
}
.rev-meta a { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; }
.rev-meta a:hover { color: var(--blue-bright); border-bottom-color: currentColor; }
.rev-meta .rev-score { color: var(--silver-light); font-weight: 600; }
.rev-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--gray-700); }

@media (prefers-reduced-motion: reduce) {
  .reviews-marquee { width: auto; margin: 0; overflow: visible; }
  .reviews-track {
    animation: none;
    width: auto;
    padding-left: 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rev-hint { display: none; }
}

/* ==========================================================================
   LANGUAGE SWITCHER
   Tracy households speaking another language at home: Spanish 18.8%,
   Punjabi 5.25%, Tagalog 3.62%. Sits in the nav beside the phone number.
   ========================================================================== */
.lang { position: relative; flex: 0 0 auto; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--gray-700);
  border-radius: 2px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--silver);
  padding: 9px 12px; transition: border-color .2s ease, color .2s ease;
}
.lang-btn:hover { border-color: var(--blue); color: var(--blue-bright); }
.lang-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lang-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang-btn i { font-style: normal; font-size: 9px; opacity: .7; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 164px; padding: 6px;
  background: var(--gray-900); border: 1px solid var(--gray-800);
  border-radius: 3px; box-shadow: 0 14px 34px rgba(0,0,0,.55);
  display: none; z-index: 1200;
}
.lang.open .lang-menu { display: block; }
.lang-menu a {
  display: block; padding: 9px 12px; border-radius: 2px;
  font-size: 13.5px; color: var(--silver); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lang-menu a:hover { background: var(--gray-800); color: var(--light); }
.lang-menu a[aria-current="true"] { color: var(--blue-bright); }
.lang-menu a[aria-current="true"]::after { content: ' \00b7'; }

@media (max-width: 860px) {
  .lang-btn { padding: 8px 9px; letter-spacing: .8px; }
  .lang-btn svg { width: 13px; height: 13px; }
}
@media (max-width: 400px) {
  .lang-btn span { display: none; }
}