/* MOQ & Lead Time — assets/css/moq-lead-time.css
   Loaded only on /moq-lead-time/ (inc/routes.php -> zeroy_enqueue_page_style('moq-lead-time')).
   The page states decision rules and never figures, so nothing here is sized around a number.
   Mobile first; every colour, size and space comes from a var() token in tokens.css. */

/* --- 1. hero ------------------------------------------------------------ */
.moq-hero{padding-block:var(--section-y-tight) var(--section-y)}
.moq-hero h1{max-width:22ch}
.moq-hero .lead{max-width:62ch;margin-bottom:var(--space-5)}

/* --- section head shared by every band ---------------------------------- */
.moq-head{max-width:var(--wrap-narrow);margin-bottom:var(--space-6)}
.moq-head h2{max-width:32ch}
.moq-head .lead{margin-top:var(--space-2)}

/* --- 2. what decides an MOQ -------------------------------------------- */
.moq-drivers__cards .card h3,
.moq-routes__cards .card h3,
.moq-quote__cards .card h3,
.moq-lead__stages .card h3{margin-bottom:var(--space-2)}
.moq-drivers__cards .card p:last-child,
.moq-routes__cards .card p:last-child,
.moq-quote__cards .card p:last-child,
.moq-lead__stages .card p:last-child{margin-bottom:0}

/* --- 2b. two routes, two answers --------------------------------------- */
.moq-routes__title{max-width:30ch;margin-bottom:var(--space-5)}
.moq-routes__note{margin-top:var(--space-5)}

/* --- 3. lead time: where the answer is given in the order -------------- */
.moq-steps{counter-reset:moq-step;list-style:none;margin:0;padding:0;max-width:52rem;display:grid;gap:0}
.moq-steps__item{
  counter-increment:moq-step;
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  align-items:baseline;
  gap:var(--space-3);
  margin:0;
  padding-block:var(--space-3);
  border-bottom:var(--border-hair)}
.moq-steps__item::before{
  content:counter(moq-step,decimal-leading-zero);
  font-size:var(--fs-small);
  color:var(--c-ink-mute);
  font-variant-numeric:tabular-nums}
.moq-steps__item--answer{
  grid-template-columns:2.25rem minmax(0,1fr);
  align-items:center;
  margin-block:var(--space-2);
  padding:var(--space-3);
  background:var(--c-surface);
  border:var(--border-hair);
  border-radius:var(--r-sm)}
.moq-steps__item--answer::before{color:var(--c-accent-strong)}
.moq-steps__label{grid-column:2;font-weight:600}
.moq-steps__item--answer .chip{grid-column:2;justify-self:start;margin-top:var(--space-2)}
.moq-lead__stages{margin-top:var(--space-6)}
.moq-lead__note{margin-top:var(--space-5)}

/* --- 4. what a quotation depends on ------------------------------------ */
.moq-quote__cards{gap:var(--space-5)}

/* --- 5. what to send with an enquiry ----------------------------------- */
.moq-send__list{list-style:none;margin:0;padding:0;max-width:var(--measure);display:grid;gap:var(--space-3)}
.moq-send__list li{position:relative;margin:0;padding-left:1.25rem}
.moq-send__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--c-accent)}
.moq-send__note{margin-top:var(--space-5)}
.moq-send__actions{margin-top:var(--space-5)}

/* --- 6. closing call to action ----------------------------------------- */
.moq-cta__inner{display:grid;gap:var(--space-6);align-items:start}
.moq-cta__copy h2{max-width:28ch;margin-bottom:var(--space-4)}
.moq-cta__copy .lead{max-width:54ch}
.moq-cta__copy .btn-row{margin-top:var(--space-2)}
.moq-cta__ghost{border-color:var(--c-on-ink-line);color:var(--c-on-ink)}
.moq-cta__ghost:hover{border-color:var(--c-on-ink);color:var(--c-on-ink);background:var(--c-on-ink-line)}
.moq-cta__contact{border-top:1px solid var(--c-on-ink-line);padding-top:var(--space-5)}
.moq-cta__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-3);font-size:var(--fs-small)}
.moq-cta__line:last-child{margin-bottom:0}
.moq-cta__label{
  min-width:8rem;
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-on-ink-mute)}
.moq-cta__contact a{color:var(--c-on-ink)}

/* --- from 640px --------------------------------------------------------- */
@media (min-width:640px){
  .moq-steps__item{grid-template-columns:3rem minmax(0,1fr)}
  .moq-steps__item--answer{grid-template-columns:3rem minmax(0,1fr);padding:var(--space-4)}
  .moq-cta__line{flex-wrap:nowrap}
}

/* --- from 900px: two-column bands -------------------------------------- */
@media (min-width:900px){
  .moq-hero{padding-block:var(--section-y)}
  .moq-drivers__cards,
  .moq-routes__cards,
  .moq-quote__cards{gap:var(--space-6)}
  .moq-cta__inner{grid-template-columns:1.15fr .85fr;gap:var(--space-7)}
  .moq-cta__contact{border-top:0;padding-top:0}
  .moq-cta__contact a{text-decoration-color:var(--c-on-ink-line)}
}