/* Typography.
   These sites named fonts they never loaded, so everything fell back to the
   system UI face. Display face is used on headings and the brand lockup; body
   is Inter, whose metrics sit close to system-ui so existing line breaks and
   card heights do not move. */
:root{--font-display:'Sora',Impact,'Arial Narrow',sans-serif;
      --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
h1,h2,h3,.h1,.h2,.h3{font-family:var(--font-display);letter-spacing:-.01em}
h1,.h1{text-wrap:balance}
h2,.h2{text-wrap:balance}


/* Hero photograph.
   The hero was a plain gradient while the branded crew-and-van shot sat further
   down the page. Scrim over image, left-weighted so the headline keeps contrast.
   The flat colour is background-color, NOT another layer - an opaque layer above
   the image hides it. */
.hero{
  background-color:#0F0F12;
  background-image:
    linear-gradient(100deg, rgba(15,15,18,.95) 0%, rgba(15,15,18,.88) 38%, rgba(15,15,18,.55) 66%, rgba(15,15,18,.25) 100%),
    url('/assets/img/onpointgaragepa-technicians-van.webp');
  background-position: center left, center right;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 860px){
  .hero{
    background-image:
      linear-gradient(180deg, rgba(15,15,18,.90) 0%, rgba(15,15,18,.78) 50%, rgba(15,15,18,.94) 100%),
      url('/assets/img/onpointgaragepa-technicians-van.webp');
    background-position: center, center;
  }
}

/* Hero quote form.
   The page's own rules for this form are written as `.pa-hero-form-card.phf-f
   select` - a compound selector needing one element to carry both classes, which
   nothing does - so the fields fell back to browser defaults on the one element
   the page exists to make people use. Restated as plain descendant selectors. */
.phf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:520px){.phf-grid{grid-template-columns:1fr}}
.phf-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.phf-f.full{grid-column:1/-1}
.phf-f label{font-size:12px;font-weight:800;color:#374151;letter-spacing:.02em;text-transform:uppercase}
.phf-req{color:#CC2222}
.phf-f input[type=text],.phf-f input[type=tel],.phf-f input:not([type=checkbox]),.phf-f select{
  width:100%;box-sizing:border-box;padding:12px 13px;font:inherit;font-size:15px;color:#1A1A1A;
  background:#fff;border:1.5px solid #E5E7EB;border-radius:10px;appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.phf-f select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px;padding-right:34px}
.phf-f input::placeholder{color:#9CA3AF}
.phf-f input:focus,.phf-f select:focus{outline:none;border-color:#E85D00;box-shadow:0 0 0 3px rgba(232,93,0,.15)}
.phf-consent label{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:500;
  line-height:1.45;color:#4B5563;letter-spacing:0;text-transform:none}
.phf-consent input[type=checkbox]{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:#E85D00}
.phf-consent a{color:#E85D00;text-decoration:underline}
.phf-submit{display:block;width:100%;padding:16px 20px;margin-top:4px;border:0;border-radius:12px;
  background:#E85D00;color:#fff;font:inherit;font-size:16px;font-weight:800;letter-spacing:.02em;
  cursor:pointer;box-shadow:0 6px 18px rgba(232,93,0,.28);transition:background .15s ease,transform .1s ease}
.phf-submit:hover{background:#D25200}
.phf-submit:active{transform:translateY(1px)}
.phf-altcall{margin:12px 0 0;text-align:center;font-size:13.5px;color:#6B7280}
.phf-altcall a{color:#E85D00;font-weight:700;text-decoration:none}