:root {
  /* The whole site is a single fixed black/orange look now -- there's no
     color picker and no light/dark switch for the public site or the
     office (admin) pages. Only techs get a light/dark switch, and it's
     self-contained inside tech.html (a small extra <style> block there
     overrides --surface/--surface-alt/--text/--gray/--border when a tech
     picks "Light"). --dark and --accent never change, in any case --
     the black header/sidebar/footer chrome and the orange brand color
     are constant everywhere. */
  --dark: #0d0d0d;        /* true black -- header, sidebar, footer, contact bar */
  --surface: #1a1a1a;     /* card / panel / form / input background */
  --surface-alt: #141414; /* secondary section background */
  --text: #f3f4f6;        /* body text, and text placed on dark backgrounds */
  --gray: #9ca3af;        /* muted / secondary text */
  --border: #2e2e2e;      /* borders and dividers */
  --accent: #ff6a00;
  --accent-dark: #e65c00;
}

/* A tech's own light/dark switch for their page (tech.html "My Account"
   only -- see setUiTheme() there). Explicit "dark" values match the
   defaults above 1:1; it exists so both states are spelled out here
   rather than one being "whatever :root happens to say". The public site
   and the office (admin) pages never set data-theme, so they're
   unaffected. */
html[data-theme="dark"] {
  --surface: #1a1a1a;
  --surface-alt: #141414;
  --text: #f3f4f6;
  --gray: #9ca3af;
  --border: #2e2e2e;
}

html[data-theme="light"] {
  --surface: #ffffff;
  --surface-alt: #f3f4f6;
  --text: #0d0d0d;
  --gray: #6b7280;
  --border: #e5e7eb;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--dark);
  line-height: 1.6;
}

.site-header {
  background: var(--dark);
  color: var(--text);
  padding: 22px 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.logo {
  font-weight: 800;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
}

.logo img {
  display: block;
  height: 56px;
  width: auto;
}

.footer-mark {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 auto 10px;
}

nav a {
  color: var(--text);
  text-decoration: none;
  margin-left: 20px;
  font-size: 0.95rem;
}

.hero {
  min-height: 650px;
  padding: 90px 8%;
  display: flex;
  align-items: center;
  color: var(--text);
  background:
    linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)),
    url("images/hero.avif");
  background-size: cover;
  background-position: center;
}

.hero-content {
  max-width: 760px;
}

.eyebrow {
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.05;
  margin-bottom: 20px;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

h3 {
  margin-bottom: 10px;
}

.hero-text,
.section-text {
  max-width: 680px;
  font-size: 1.15rem;
  color: var(--gray);
  margin-bottom: 28px;
}

.section-text {
  color: var(--gray);
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 10px;
  padding: 14px 22px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
}

.primary {
  background: var(--accent);
  color: #ffffff;
}

.primary:hover {
  background: var(--accent-dark);
}

/* Deliberately a plain white pill (not --surface) -- it's the one place on
   the page meant to read as a light, high-contrast tap target against the
   dark hero, the same way a light CTA reads on any dark UI. */
.secondary {
  background: #ffffff;
  color: var(--dark);
  margin-left: 10px;
}

/* Optional partner banner (e.g. a friend's business), toggled via .env --
   see PARTNER_BANNER_* in .env and #partnerBanner in index.html. Kept
   visually distinct from the site's own sections around it (soft neutral
   background, outlined accent button) so it reads as a spotlight/referral
   rather than one of this site's own claims. */
.partner-banner {
  background: var(--surface-alt);
  padding: 20px 8%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.partner-banner-text {
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.partner-banner-btn {
  margin-left: 0;
  padding: 10px 18px;
  font-size: 0.9rem;
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.partner-banner-btn:hover {
  background: var(--accent);
  color: #ffffff;
}

.trust-bar {
  background: var(--accent);
  color: #ffffff;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  font-weight: 800;
}

.trust-bar div {
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,0.35);
}

.section {
  padding: 80px 8%;
}

.light {
  background: var(--surface-alt);
}

.card-grid,
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.card,
.price-card {
  background: var(--surface);
  padding: 26px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.card p,
.price-card p {
  color: var(--gray);
}

.price {
  color: var(--accent) !important;
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.warranty-box {
  background: var(--dark);
  color: var(--text);
  border-radius: 22px;
  padding: 45px;
  border: 1px solid var(--border);
}

.warranty-box p {
  max-width: 780px;
  color: var(--gray);
}

/* Services now features a single primary service (Oil Change) plus a
   callout for everything else, so its grid no longer needs to fill
   exactly 4 columns -- auto-fit keeps cards evenly sized instead of
   leaving a stretched empty column on wide screens. */
#services .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.additional-services {
  margin-top: 28px;
  padding: 24px 26px;
  background: var(--surface-alt);
  border-radius: 16px;
  border: 1px dashed var(--border);
}

.additional-services h3 {
  margin-bottom: 8px;
}

.additional-services p {
  color: var(--gray);
  margin-bottom: 0;
}

.service-highlight {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 106, 0, 0.14);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
}

.service-highlight-check {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
}

.service-highlight-label {
  font-weight: 800;
  font-size: 1.05rem;
}

.request-form {
  background: var(--surface);
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  max-width: 850px;
  margin-top: 28px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

input,
select,
textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  min-height: 130px;
  /* Vertical-only resize -- unrestricted (the default) lets a textarea be
     dragged wider than its container, which overflows the layout on
     narrow/mobile screens. */
  resize: vertical;
}

/* Native <select> arrows render inconsistently (or not at all) across
   browsers and don't match the site's look, so we draw our own chevron and
   turn off the native one. Selects that override padding for a tighter
   layout (e.g. admin's .status-select) need to redeclare padding-right
   themselves so the arrow has room and doesn't sit on top of the text. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 7px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.2);
}

.consent-note {
  margin: 18px 0 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray);
}

.consent-note a {
  color: inherit;
  text-decoration: underline;
}

#formMessage {
  margin-top: 12px;
  font-weight: 800;
}

footer {
  background: var(--dark);
  color: var(--text);
  text-align: center;
  padding: 30px 8%;
}

@media (max-width: 900px) {
  .card-grid,
  .pricing-grid,
  .trust-bar {
    grid-template-columns: 1fr;
  }

  /* Stacked to one column above, so the dividers between trust-bar items
     need to run along the bottom instead of the right, and the last item
     shouldn't have a dangling border under it. */
  .trust-bar div {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.35);
  }

  .trust-bar div:last-child {
    border-bottom: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  nav a {
    margin-left: 0;
    margin-right: 14px;
  }

  .secondary {
    margin-left: 0;
    margin-top: 10px;
  }
}
.service-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin-bottom: 14px;
}

.service-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0;
}

.service-checkbox input {
  width: auto;
  margin: 0;
}

@media (max-width: 900px) {
  .service-checkboxes {
    grid-template-columns: 1fr;
  }
}

.calendar-picker {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
  background: var(--surface);
  max-width: 320px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 0.85rem;
}

.calendar-header button {
  background: var(--surface-alt);
  border: none;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}

.calendar-header button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.62rem;
  color: var(--gray);
  font-weight: 700;
  margin-bottom: 4px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 7px;
  background: var(--surface-alt);
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--text);
  padding: 0;
}

.cal-empty {
  background: transparent;
  cursor: default;
}

.cal-disabled {
  background: transparent;
  color: #4b5563;
  cursor: not-allowed;
}

.cal-available:hover {
  background: rgba(255, 106, 0, 0.22);
}

.cal-selected {
  background: var(--accent);
  color: #ffffff;
}

.zip-note {
  font-size: 0.85rem;
  margin: -6px 0 12px;
}

#calSelectedLabel {
  font-size: 0.78rem;
  margin-top: 6px;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .calendar-picker {
    max-width: 280px;
  }

  .calendar-header {
    font-size: 0.8rem;
  }

  /* Bigger tap target for the prev/next month arrows -- 24px was too small
     to reliably tap on a phone. */
  .calendar-header button {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .cal-day {
    font-size: 0.68rem;
  }
}

.contact-bar {
  background: var(--dark);
  color: var(--gray);
  padding: 8px 8%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  font-size: 0.85rem;
  font-weight: 700;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}

.contact-bar a {
  color: var(--gray);
  text-decoration: none;
}

.contact-bar a:hover {
  color: var(--accent);
}

.contact-bar .license-chip {
  color: var(--gray);
  font-weight: 600;
}

.service-area-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 24px;
  margin-top: 24px;
  max-width: 900px;
}

.service-area-list li {
  color: var(--gray);
  font-weight: 700;
}

.service-area-note {
  margin-top: 18px;
  color: var(--gray);
  font-size: 0.92rem;
  max-width: 680px;
}

footer .footer-contact {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--gray);
}

footer .footer-contact a {
  color: var(--gray);
  text-decoration: none;
}

footer .footer-contact a:hover {
  color: var(--accent);
}

footer .footer-links {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

footer .footer-links a {
  color: var(--gray);
  text-decoration: underline;
  font-size: 0.88rem;
}

@media (max-width: 900px) {
  .contact-bar {
    justify-content: center;
    text-align: center;
  }

  .service-area-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Very small phones (most iPhones/Androids in portrait) -- trim the
   generous desktop padding so content isn't squeezed into a narrow column
   with huge top/bottom whitespace. */
@media (max-width: 480px) {
  .site-header {
    padding: 16px 6%;
  }

  .logo img {
    height: 44px;
  }

  .hero {
    min-height: 0;
    padding: 60px 6%;
  }

  .section {
    padding: 50px 6%;
  }

  .contact-bar {
    padding: 20px 6%;
  }

  footer {
    padding: 24px 6%;
  }
}

.footer-legal { font-size: 0.8rem; opacity: 0.8; margin: 8px auto 0; max-width: 760px; line-height: 1.5; }

/* Hidden spam trap on the request form: people never see or fill it, but
   simple bots that fill every field do. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Fleet section (homepage) -- the inquiry form stays hidden until the
   "Request Fleet Pricing" button is pressed. */
#fleets .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fleet-cta {
  margin-top: 28px;
}

.fleet-form {
  margin-top: 22px;
}

.fleet-form[hidden] {
  display: none;
}

.fleet-form textarea {
  min-height: 90px;
}

.fleet-message {
  margin-top: 12px;
  font-weight: 800;
}