/* =========================================================================
   FleetOps Site — front-page sections.

   This stylesheet owns only the sections the plugin renders: hero, services,
   the work-order checklist, wiring, trust band, and the contact/request form.

   Design tokens, reset, nav, footer and buttons belong to the theme. Every
   var() here carries the Southern Repair fallback value, so the sections still
   render correctly if the plugin is used under a different theme.
   ========================================================================= */

/* ---------- hero ---------- */
.hero{position:relative;padding:84px 0 70px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 80% -10%,rgba(75,141,246,.10),transparent 55%),
    linear-gradient(180deg,var(--asphalt-2, #1a1f25),var(--asphalt, #14181c));
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--steel-line, #2f3a43) 1px,transparent 1px),linear-gradient(90deg,var(--steel-line, #2f3a43) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 75% 0%,#000 0%,transparent 60%);
          mask-image:radial-gradient(120% 90% at 75% 0%,#000 0%,transparent 60%);
}
.hero .wrap{position:relative;z-index:1}  .eyebrow .bar{width:34px;height:2px;background:var(--amber, #4b8df6)}
.hero h1{
  font-family:"Saira Condensed";font-weight:800;
  font-size:clamp(2.6rem,6vw,4.7rem);line-height:.94;letter-spacing:.005em;
  text-transform:uppercase;max-width:16ch;
}
.hero h1 .y{color:var(--amber, #4b8df6)}
.hero .strap{
  display:inline-block;margin-top:18px;
  font-family:"Saira Condensed";font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:.04em;color:var(--ink, #eef2f5);
  border-left:4px solid var(--amber, #4b8df6);padding-left:14px;
}
.hero .strap b{color:var(--amber, #4b8df6);font-weight:700}
.hero p.lead{
  margin-top:24px;max-width:54ch;font-size:1.12rem;color:var(--muted, #8f9ca7);line-height:1.7;
}
.hero p.lead strong{color:var(--ink, #eef2f5);font-weight:600}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* spec readout */
.readout{
  margin-top:46px;border:1px solid var(--steel-line, #2f3a43);border-radius:6px;
  background:rgba(15,18,22,.6);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.readout div{padding:18px 22px;border-right:1px solid var(--steel-line, #2f3a43)}
.readout div:last-child{border-right:none}
.readout .k{font-family:"JetBrains Mono";font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2, #6f7a84)}
.readout .v{font-family:"Saira Condensed";font-weight:700;font-size:1.7rem;line-height:1.1;margin-top:6px}
.readout .v small{color:var(--amber, #4b8df6);font-size:1.1rem}
@media(max-width:760px){
  .readout{grid-template-columns:1fr 1fr}
  .readout div:nth-child(2){border-right:none}
  .readout div:nth-child(1),.readout div:nth-child(2){border-bottom:1px solid var(--steel-line, #2f3a43)}
}


/* ---------- services grid ---------- */
.services{background:var(--asphalt-2, #1a1f25);border-top:1px solid var(--steel-line, #2f3a43);border-bottom:1px solid var(--steel-line, #2f3a43)}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:780px){.svc-grid{grid-template-columns:1fr}}
.svc{
  position:relative;background:var(--steel, #222a31);border:1px solid var(--steel-line, #2f3a43);border-radius:8px;
  padding:30px 30px 26px;overflow:hidden;
  transition:transform .25s var(--ease, cubic-bezier(.2,.7,.2,1)),border-color .25s,box-shadow .25s;
}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--amber, #4b8df6);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease, cubic-bezier(.2,.7,.2,1))}
.svc:hover{transform:translateY(-4px);border-color:#3a4751;box-shadow:0 22px 40px -26px rgba(0,0,0,.9)}
.svc:hover::before{transform:scaleY(1)}
.svc .num{font-family:"JetBrains Mono";font-size:.72rem;letter-spacing:.2em;color:var(--muted-2, #6f7a84)}
.svc h3{font-family:"Saira Condensed";font-weight:700;text-transform:uppercase;font-size:1.65rem;margin:10px 0 6px;letter-spacing:.02em}
.svc .tag{display:inline-block;font-family:"JetBrains Mono";font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber, #4b8df6);border:1px solid rgba(75,141,246,.4);border-radius:3px;padding:3px 8px;margin-bottom:14px}
.svc p{color:var(--muted, #8f9ca7);font-size:.98rem}
.svc ul{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.svc ul li{font-family:"JetBrains Mono";font-size:.72rem;color:var(--muted, #8f9ca7);background:rgba(15,18,22,.6);border:1px solid var(--steel-line, #2f3a43);border-radius:3px;padding:5px 9px}


/* ---------- full service / work order ---------- */
.worksheet{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.worksheet{grid-template-columns:1fr}}
.ws-col{border:1px solid var(--steel-line, #2f3a43);border-radius:8px;background:var(--steel, #222a31);overflow:hidden}
.ws-col header{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:20px 24px;background:#0f1216;border-bottom:1px solid var(--steel-line, #2f3a43);
}
.ws-col header h3{font-family:"Saira Condensed";font-weight:800;text-transform:uppercase;font-size:1.5rem;letter-spacing:.03em}
.ws-col header .stamp{font-family:"JetBrains Mono";font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber, #4b8df6);border:1px dashed rgba(75,141,246,.5);padding:4px 9px;border-radius:3px}
.ws-body{padding:10px 24px 24px}
.ws-row{padding:16px 0;border-bottom:1px solid var(--steel-line, #2f3a43)}
.ws-row:last-child{border-bottom:none}
.ws-row .rh{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.ws-row .check{width:18px;height:18px;border-radius:3px;background:rgba(57,192,122,.14);border:1px solid rgba(57,192,122,.5);display:grid;place-items:center;flex:none}
.ws-row .check svg{width:11px;height:11px;stroke:var(--ok, #39c07a);stroke-width:3;fill:none}
.ws-row .rh h4{font-family:"Saira Condensed";font-weight:700;text-transform:uppercase;font-size:1.12rem;letter-spacing:.02em}
.ws-row p{color:var(--muted, #8f9ca7);font-size:.92rem;padding-left:29px}
.ws-note{padding:18px 24px;background:rgba(209,35,42,.08);border-top:1px solid var(--steel-line, #2f3a43);font-size:.9rem;color:var(--muted, #8f9ca7)}
.ws-note b{color:var(--ink, #eef2f5);font-family:"Saira Condensed";text-transform:uppercase;letter-spacing:.04em}


/* ---------- trust band ---------- */
.trust{background:var(--asphalt-2, #1a1f25);border-top:1px solid var(--steel-line, #2f3a43);border-bottom:1px solid var(--steel-line, #2f3a43)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:820px){.trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.trust-grid{grid-template-columns:1fr}}
.trust-item{padding:28px;border:1px solid var(--steel-line, #2f3a43);border-radius:8px;background:var(--steel, #222a31)}
.trust-item .ico{width:42px;height:42px;border-radius:6px;background:rgba(75,141,246,.12);display:grid;place-items:center;margin-bottom:16px}
.trust-item .ico svg{width:22px;height:22px;stroke:var(--amber, #4b8df6);stroke-width:1.8;fill:none}
.trust-item h4{font-family:"Saira Condensed";font-weight:700;text-transform:uppercase;font-size:1.2rem;letter-spacing:.02em;margin-bottom:6px}
.trust-item p{color:var(--muted, #8f9ca7);font-size:.92rem}


/* ---------- contact ---------- */
.contact{position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 100% at 0% 0%,rgba(75,141,246,.08),transparent 50%)}
.contact .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
@media(max-width:880px){.contact .wrap{grid-template-columns:1fr;gap:36px}}
.contact h2{font-family:"Saira Condensed";font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4.5vw,3rem);line-height:.98}
.contact .lead{color:var(--muted, #8f9ca7);margin-top:16px;font-size:1.05rem;max-width:46ch}
.contact-lines{margin-top:30px;display:flex;flex-direction:column;gap:2px}
.cl{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--steel-line, #2f3a43)}
.cl .ico{width:38px;height:38px;flex:none;border-radius:6px;background:var(--steel, #222a31);border:1px solid var(--steel-line, #2f3a43);display:grid;place-items:center}
.cl .ico svg{width:18px;height:18px;stroke:var(--amber, #4b8df6);stroke-width:1.8;fill:none}
.cl .k{font-family:"JetBrains Mono";font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2, #6f7a84)}
.cl .v{font-family:"Saira Condensed";font-weight:600;font-size:1.25rem;letter-spacing:.02em}

form.quote{background:var(--steel, #222a31);border:1px solid var(--steel-line, #2f3a43);border-radius:10px;padding:30px}
form.quote .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){form.quote .frow{grid-template-columns:1fr}}
form.quote label{display:block;font-family:"JetBrains Mono";font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted, #8f9ca7);margin:14px 0 7px}
form.quote input,form.quote select,form.quote textarea{
  width:100%;background:var(--asphalt, #14181c);border:1px solid var(--steel-line, #2f3a43);border-radius:5px;
  color:var(--ink, #eef2f5);font-family:"Saira",sans-serif;font-size:.98rem;padding:12px 14px;
  transition:border-color .2s,box-shadow .2s;
}
form.quote input:focus,form.quote select:focus,form.quote textarea:focus{
  outline:none;border-color:var(--amber, #4b8df6);box-shadow:0 0 0 3px rgba(75,141,246,.14)
}
form.quote textarea{resize:vertical;min-height:90px}
form.quote .btn{width:100%;justify-content:center;margin-top:22px;padding:15px}
form.quote .fineprint{font-family:"JetBrains Mono";font-size:.66rem;color:var(--muted-2, #6f7a84);text-align:center;margin-top:14px;letter-spacing:.04em}


/* =========================================================================
   Request form — plugin-specific additions
   ========================================================================= */

/* Honeypot. Hidden from people without display:none, which some bots skip. */
.fltsite-hp{
  position:absolute !important;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.form-flash{
  margin-bottom:18px;padding:12px 14px;border-radius:8px;
  font-size:.92rem;line-height:1.5;
  border:1px solid var(--steel-line, #2f3a43);
}
.form-flash.is-ok{
  border-color:var(--ok, #39c07a);
  background:rgba(57,192,122,.1);
  color:var(--ok, #39c07a);
}
.form-flash.is-err{
  border-color:var(--tape-red, #d1232a);
  background:rgba(209,35,42,.1);
  color:#ff8f93;
}

form.quote input[aria-invalid="true"],
form.quote textarea[aria-invalid="true"],
form.quote select[aria-invalid="true"]{
  border-color:var(--tape-red, #d1232a);
}

form.quote .btn[disabled]{opacity:.65;cursor:progress}
form.quote .btn.is-sent{background:var(--ok, #39c07a);border-color:var(--ok, #39c07a)}

/* Standalone shortcode use, outside the dark contact section */
.fltsite-standalone-form{
  max-width:640px;margin:0 auto;
}
.fltsite-standalone-form h2{
  font-family:"Saira Condensed",sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:20px;
}

/* Single-column checklist when only one of the two columns is enabled */
.worksheet--single{grid-template-columns:minmax(0,1fr)}
.worksheet--single .ws-col{max-width:720px;margin:0 auto}

/* The drivetrain boundary note under the checklist */
.ws-note{
  margin-top:26px;text-align:center;
  font-size:.95rem;color:var(--muted, #8f9ca7);
  max-width:70ch;margin-left:auto;margin-right:auto;
}
.ws-note b{color:var(--amber, #4b8df6);font-weight:600}