/* Jump Start Vehicles — global entry point. Imports first, then the few
   rules that cannot live in an inline style attribute. */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/borders.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

/* ── Scroll ───────────────────────────────────────────────────────────────
   Each division block is exactly 100dvh with its caption at the bottom, so
   the page is a deck. `proximity` lets a panel settle at the top when you
   land near a boundary, while leaving you free to stop anywhere inside one.
   `mandatory` would be scroll-jacking, which BRIEF.md rules out.          */
@media (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  .jsv-snap{scroll-snap-align:start;scroll-snap-stop:normal}
}

/* ── Enquiry form ─────────────────────────────────────────────────────────
   Lives in the footer on every page. Plain POST to /contact.php, so it works
   with JavaScript disabled.                                                */
.jsv-form{display:grid;gap:13px;align-content:start;color-scheme:dark}
.jsv-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.jsv-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.jsv-field label{font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2)}
.jsv-field input,.jsv-field select,.jsv-field textarea{
  font-family:inherit;font-size:15px;line-height:1.4;color:var(--paper);
  background:rgba(242,244,246,.05);border:1px solid rgba(242,244,246,.18);
  border-radius:2px;padding:11px 13px;width:100%;
  transition:border-color var(--dur-fast) var(--ease-out)}
.jsv-field textarea{min-height:92px;resize:vertical}
.jsv-field input::placeholder,.jsv-field textarea::placeholder{color:#6E7B87}
.jsv-field input:hover,.jsv-field select:hover,.jsv-field textarea:hover{
  border-color:rgba(242,244,246,.32)}
.jsv-field input:focus-visible,.jsv-field select:focus-visible,
.jsv-field textarea:focus-visible{outline:none;border-color:var(--volt);
  box-shadow:var(--ring-focus)}
.jsv-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.jsv-send{font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-on-volt);background:var(--volt);
  border:0;padding:14px 26px;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out)}
.jsv-send:hover{background:var(--volt-deep)}
.jsv-note{font-size:13px;color:var(--muted-2)}
/* shown only when contact.php sends someone back with ?sent=<reason> */
.jsv-msg{margin:0;font-size:14px;line-height:1.5;color:var(--warn);
  border-left:2px solid var(--warn);padding:9px 0 9px 13px}
.jsv-msg[hidden]{display:none}
/* off-screen honeypot: a real person never fills this in */
.jsv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:820px){
  .jsv-foot-top{grid-template-columns:1fr}
  .jsv-row{grid-template-columns:1fr}
}

/* ── Responsive layer ─────────────────────────────────────────────────────
   The page layout lives in inline `style` attributes, which a stylesheet
   cannot override without `!important`. The inline strings are generated,
   so they are byte-identical everywhere and safe to match on. Every
   selector below targets an exact generated string — nothing is guessed.

   Do not "tidy" these into shorter substrings. `[style*="44px"]` would also
   match `grid-template-columns:44px 1fr` (the numbered lists) and pad them.

   Desktop composition above 820px is untouched.                            */

@media (max-width:820px){

  /* 1 ── Header: was a 3-column grid whose centre column held a wrapping
     6-link nav. At 390px it wrapped to six rows and grew the bar to 234px,
     overlapping the logo. Now two rows: logo + CTA, then the nav as a
     single non-wrapping scrollable strip.                                  */
  header[data-header]{
    grid-template-columns:1fr auto!important;
    row-gap:8px!important;
    padding:10px 20px!important;
  }
  header[data-header]>a[aria-label]{grid-column:1;grid-row:1}
  header[data-header]>a.jh2{grid-column:2;grid-row:1}
  header[data-header] img[data-logo]{height:38px!important}
  header[data-header]>a.jh2{padding:10px 14px!important;font-size:11px!important}
  header[data-header]>nav{
    grid-column:1/-1;grid-row:2;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    column-gap:18px!important;
    font-size:11px!important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  header[data-header]>nav::-webkit-scrollbar{display:none}
  header[data-header]>nav a{white-space:nowrap;padding-bottom:2px!important}

  /* 2 ── Collapse every generated two- and three-column grid to one column. */
  [style*="minmax(0,1.1fr) minmax(0,1fr)"],
  [style*="minmax(0,1fr) minmax(0,1.1fr)"],
  [style*="minmax(0,1fr) minmax(0,1.05fr)"],
  [style*="minmax(0,1.15fr) minmax(0,1fr)"],
  [style*="minmax(0,1.35fr) minmax(0,1fr)"],
  [style*="repeat(2,minmax(0,1fr))"],
  [style*="repeat(3,minmax(0,1fr))"]{
    grid-template-columns:1fr!important;
  }

  /* 3 ── Side gutters: 44px is 11% of a 390px viewport on each side and is
     the main cause of the horizontal overflow. Each exact generated
     padding string is reduced individually.                                */
  [style*="padding:129px 44px 44px"]{padding:104px 20px 32px!important}
  [style*="padding:clamp(64px,9vw,128px) 44px"]{padding:clamp(44px,9vw,72px) 20px!important}
  [style*="padding:clamp(56px,7vw,96px) 44px"]{padding:clamp(40px,7vw,64px) 20px!important}
  [style*="padding:clamp(48px,6vw,72px) 44px 40px"]{padding:clamp(36px,6vw,56px) 20px 32px!important}
  [style*="padding:150px 44px"]{padding:112px 20px 40px!important}
  [style*="padding:20px 44px"]{padding:14px 20px!important}
  [style*="padding:30px 44px"]{padding:22px 20px!important}
  [style*="padding:32px 44px"]{padding:24px 20px!important}
  [style*="padding:16px 44px 20px"]{padding:14px 20px 18px!important}
  [style*="min-height:100dvh"][style*="padding:44px"]{padding:24px 20px!important}

  /* 4 ── Display type. The clamps already scale, but the hero lines are
     wrapped in overflow:hidden spans for the rise animation, so a long
     unbreakable word was being clipped rather than wrapped.                */
  h1[data-hero-line]{
    font-size:clamp(2rem,8.5vw,3rem)!important;
    letter-spacing:-.03em!important;
    hyphens:auto;
  }
  h1[data-hero-line] span{overflow:visible!important}

  /* 5 ── Nothing may exceed the viewport. */
  img,picture,video,svg,table{max-width:100%}
}

/* Very small phones: the longest single words ("ELECTRIFIED.", "Ambulances")
   still set the minimum width, so step the display type down once more.     */
@media (max-width:400px){
  h1[data-hero-line]{font-size:clamp(1.75rem,8vw,2.4rem)!important}
  header[data-header]>nav{column-gap:15px!important;font-size:10.5px!important}
}