/* ============================================================
   Service pages — /auto-repair, /check-engine, /diesel-repair, /fleet
   Loads on top of pages.css and guides.css. Only the pieces those two
   do not already provide live here.
   ============================================================ */

/* ---- hero ------------------------------------------------------------- */
/* .pagehead supplies the teal band and the H1. This adds the promise list
   and the button row beneath it. */
.svchero__trust{
  list-style:none;margin:1.6rem 0 0;padding:1.3rem 0 0;
  border-top:2px solid rgba(164,205,213,.3);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.4rem;
  max-width:52rem;
}
.svchero__trust li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:1rem;line-height:1.4;font-weight:700;color:var(--cream);
}
.svchero__trust .ico{width:19px;height:19px;flex:none;margin-top:.15rem;fill:var(--blue)}
.svchero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin:1.8rem 0 0}
.svchero__hours{margin:1.1rem 0 0;font-size:.92rem;color:rgba(254,248,232,.92)}

/* ---- what we work on -------------------------------------------------- */
.svcwork{background:var(--cream);color:var(--teal);padding-block:clamp(2.5rem,6vw,4.5rem)}
.svclist{
  list-style:none;margin:0 0 1.5rem;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 2rem;
}
.svclist li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:1.04rem;line-height:1.5;color:rgba(2,43,56,.9);
}
.svclist li .ico{width:20px;height:20px;flex:none;margin-top:.2rem;fill:var(--red)}
.svclist strong{color:var(--teal);font-weight:700}

/* the two services the ads name get their own block so nobody has to hunt */
.svcpair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem;margin:2rem 0 0;
}
.svcpair > div{
  background:rgba(164,205,213,.3);border-radius:18px;
  padding:clamp(1.2rem,3vw,1.7rem);
}
.svcpair h3{
  font-family:var(--display);font-weight:700;font-style:oblique;
  text-transform:uppercase;font-size:1.15rem;letter-spacing:.01em;
  margin:0 0 .6rem;color:var(--teal);
}
.svcpair p{margin:0;font-size:1rem;line-height:1.6;color:rgba(2,43,56,.9)}

/* ---- the running offer (check-engine page only) ----------------------- */
/* Delete this block, its section and service.css's .offerblock rules when
   the promotion ends on 19 November 2026. */
.offerband{background:var(--ink);color:var(--cream);padding-block:clamp(2.5rem,6vw,4.25rem)}
.offerflag{
  display:inline-block;margin:0 0 1.1rem;padding:.4rem .85rem;
  background:var(--red);color:var(--cream);border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.offerband h2{
  font-family:var(--display);font-weight:700;font-style:oblique;
  font-size:clamp(1.5rem,4vw,2.4rem);line-height:1.05;letter-spacing:.005em;
  text-transform:uppercase;margin:0 0 1rem;color:var(--cream);max-width:24ch;
}
.offerband > .shell > p{max-width:60ch;font-size:1.05rem;line-height:1.7;color:rgba(254,248,232,.9)}
.offerlist{
  list-style:none;margin:1.6rem 0 1.9rem;padding:1.3rem 0 0;
  border-top:2px solid rgba(164,205,213,.3);display:grid;gap:.75rem;max-width:60rem;
}
.offerlist li{display:flex;align-items:flex-start;gap:.7rem;font-size:1.03rem;line-height:1.45;color:var(--cream)}
.offerlist .ico{width:20px;height:20px;flex:none;margin-top:.18rem;fill:var(--blue)}
.offerfine{
  margin:1.5rem 0 0;max-width:68ch;
  font-size:.82rem;line-height:1.6;color:rgba(254,248,232,.72);
}

/* ---- address / hours strip -------------------------------------------- */
.svcwhere{background:var(--cream);color:var(--teal);padding-block:clamp(2.2rem,5vw,3.5rem)}
.svcwhere__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.svcwhere h3{
  font-family:var(--display);font-weight:700;font-style:oblique;
  text-transform:uppercase;font-size:.9rem;letter-spacing:.09em;
  margin:0 0 .6rem;color:rgba(2,43,56,.6);
}
.svcwhere p,.svcwhere li{font-size:1.02rem;line-height:1.6;color:var(--teal);margin:0}
.svcwhere ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.svcwhere a{color:var(--red);text-decoration:none;font-weight:700}
.svcwhere a:hover{text-decoration:underline}

/* ---- form band -------------------------------------------------------- */
.svcform{background:var(--teal);color:var(--cream);padding-block:clamp(2.5rem,6vw,4.5rem)}
.svcform__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.svcform h2{
  font-family:var(--display);font-weight:700;font-style:oblique;
  font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.05;letter-spacing:.005em;
  text-transform:uppercase;margin:0 0 1rem;color:var(--cream);
}
.svcform__aside p{font-size:1.03rem;line-height:1.65;color:rgba(254,248,232,.9)}
.svcform__pts{list-style:none;margin:1.5rem 0 1.9rem;padding:0;display:grid;gap:.7rem}
.svcform__pts li{display:flex;align-items:flex-start;gap:.65rem;font-size:1rem;line-height:1.5;color:rgba(254,248,232,.92)}
.svcform__pts .ico{width:19px;height:19px;flex:none;margin-top:.2rem;fill:var(--blue)}
.svcform__call{border-top:1px solid rgba(164,205,213,.28);padding-top:1.5rem}
.svcform__call p{margin:0 0 .9rem}
.svcform__call p b{color:var(--cream)}

/* a checkbox group inside the dark form, for the fleet make-up question */
.checkgroup{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.2rem;
  margin:.1rem 0 0;padding:.9rem 1rem;
  border:1px solid rgba(164,205,213,.3);border-radius:12px;
}
.checkgroup label{
  display:flex;align-items:center;gap:.55rem;
  font-size:.95rem;font-weight:400;color:rgba(254,248,232,.92);margin:0;cursor:pointer;
}
.checkgroup input{width:17px;height:17px;flex:none;accent-color:var(--red);margin:0}

/* ---- responsive ------------------------------------------------------- */
@media (max-width:860px){
  .svcform__grid{grid-template-columns:1fr;gap:2.25rem}
  .svcwhere__grid{grid-template-columns:1fr;gap:1.4rem}
  .svcpair{grid-template-columns:1fr}
}
@media (max-width:620px){
  .svchero__trust{grid-template-columns:1fr}
  .svclist{grid-template-columns:1fr;gap:.8rem}
  .checkgroup{grid-template-columns:1fr}
}