/* How We Work — page-local layout variant.
   Enqueued by functions.php only on /customization/how-we-work/
   Class prefix: .hww-: colours, type and radii come from assets/css/tokens.css
   and the shared pattern vocabulary in style.css; nothing here restates either. */

/* ---------- 01 + 02 · the two flows, side by side (§01 + §02 of this page) ----
   One split, one block per flow: the panel outline is what makes two areas read
   as two, and it holds both block headings on the same eye-line instead of
   stacking them. The steps inside run the shared process-rows component at
   compact size and one column, so a step is a number, a title and one line in a
   narrow measure. Below 860px .split already drops to one column (style.css), so
   the two blocks sit one after the other and keep the same panel. */
.hww-flows{align-items:start}
.hww-block{min-width:0;padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
/* A block heading sits in a narrow column, so it takes the smaller heading size the
   site already uses where an h2 is not the page's own subject (.legal-sec h2). */
.hww-block .sec-head{margin-bottom:clamp(20px,2.2vw,28px)}
.hww-block .sec-head h2{font-size:clamp(20px,1.7vw,24px);line-height:1.22}
.hww-block .sec-head .lede{font-size:15px}
.hww-block .head-actions{margin-top:clamp(16px,1.8vw,22px)}
/* The second block is a link target of its own, so it takes the same offset the
   page's sections use under the sticky header. */
#development-flow{scroll-margin-top:96px}

/* ---------- 03 · Published terms: four boxes of one style --------------------
   One <dl> of four dt/dd pairs in a 2 × 2 grid, every box drawn the same way —
   the fourth term carried a fill of its own before, and the owner asked for the
   four to match: the difference between them is what each one says, not how it
   is painted. The boxes are white on the --off band, and a row's boxes share a
   height. Below 640px the grid is one column. */
.hww-terms{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,1.8vw,24px);margin:0}
.hww-terms__item{display:flex;flex-direction:column;min-width:0;
  padding:clamp(18px,2vw,24px);border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--white)}
.hww-terms__t{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.hww-terms__h{font-family:var(--display);font-size:16.5px;font-weight:600;line-height:1.3;
  color:var(--charcoal)}
.hww-terms__d{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.hww-terms__d p{margin:0}
.hww-terms__d .more{display:inline-block;margin-top:auto;padding-top:12px}
@media (max-width:640px){
  .hww-terms{grid-template-columns:1fr}
}

/* ---------- 04 · Request a Quote: the form beside its rail --------------------
   Same composition as the band the OEM page closes with, kept local to this page
   because that page's stylesheet is loaded only on that page. Each column of a
   split holds its own height, so the form is kept to the height of the rail
   beside it: less padding on the card, a shorter requirements box and a tighter
   field rhythm than the same component uses where it stands alone (§4.8 full
   form). The form takes the wider share of the band so its two-column field grid
   still fits; between 861 and 1024px the two columns are dropped instead, which
   is the honest layout once the form cannot stand beside the copy without either
   of them being squeezed. */
.hww-enquiry .enquiry-form{padding:clamp(18px,1.8vw,22px)}
.hww-enquiry .enquiry-form label{margin-bottom:5px}
.hww-enquiry .enquiry-form .field-grid{gap:16px 20px;margin-bottom:16px}
.hww-enquiry .enquiry-form textarea{min-height:92px}
.hww-enquiry .enquiry-form .form-foot{margin-top:20px;padding-top:18px;gap:12px}
@media (min-width:861px){
  .hww-rfq{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}
@media (min-width:861px) and (max-width:1024px){
  .hww-rfq{grid-template-columns:1fr}
}