/* Product Development — page-local layout variant.
   Enqueued by functions.php only on /customization/product-development/
   Class prefix: .pd-: colours, type and radii come from assets/css/tokens.css
   and the shared pattern vocabulary in style.css; nothing here restates either.

   This page's own skeleton is: the eight stage cards, four to a row (.pd-stages),
   the commercial conditions that close band 01 (.pd-comm), the two-input media
   cards (.pd-inputs), the two development routes as panels that put their words
   above their photograph (.pd-route), and the closing form band (.pd-rfq /
   .pd-enquiry). The gated rail (.pd-rail), the four-frame detail strip
   (.pd-detail) and the comparison table (.pd-compare) are gone. */

/* ---------- 01 · The eight stages, four to a row -----------------------------
   Each stage carries its own photograph and its own line of copy. Four cards
   while there is room for four, three while there is room for three, and the
   card body is tightened so four of them still hold their words at 1440px. The
   cards are not links, so the shared card lift is off. All eight are the same
   shape and the same tone as the cards elsewhere on the site: the three stages
   that turn on a customer approval are not marked differently. */
.pd-stages{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.5vw,22px);margin:0;padding:0;list-style:none}
.pd-stages .mcard:hover{border-color:var(--line)}
.pd-stages .mcard:hover .ph img{transform:none}
.pd-stage .mcard__b{gap:7px;padding:clamp(15px,1.4vw,20px)}
.pd-stage h3{font-size:clamp(15.5px,1.15vw,17px);line-height:1.4}
.pd-stage .mcard__b>p:not(.mcard__i){font-size:13.5px;line-height:1.55}
@media (max-width:1199px){.pd-stages{grid-template-columns:repeat(3,1fr)}
  .pd-stage h3{font-size:17px}
  .pd-stage .mcard__b>p:not(.mcard__i){font-size:14px}}
@media (max-width:899px){.pd-stages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:559px){.pd-stages{grid-template-columns:1fr}}

/* ---------- 01 · The commercial conditions, as the band's closing note -------
   Shared block-note; only its distance from the stage cards, the chips' rhythm
   and the sentence's line length are local. */
.pd-comm{margin-top:clamp(30px,3.6vw,48px)}
.pd-comm .strip{margin:14px 0 0}
.pd-comm .note{margin:12px 0 0;max-width:82ch}
.pd-comm .strip li{background:var(--white)}

/* ---------- 02 · The two inputs as media cards -------------------------------
   Photograph first, words under it, framed like the cards the rest of the site
   uses. The cards are not links and must not read like one: the shared card lift
   is switched off for this band too. */
.pd-inputs .mcard:hover{border-color:var(--line)}
.pd-inputs .mcard:hover .ph img{transform:none}

/* ---------- 03 · The two routes: words first, photograph under them ----------
   Deliberately not the shape band 02 uses. The panel is a ground closed by the
   photograph at its foot, and the only edge it carries is the rule across its
   top — neutral for the product that already exists, accent for the new body
   mold, which is this page's own route. The words and the way onward sit above
   the photograph, so the two routes are read as two statements. */
.pd-route{display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:var(--white);border-radius:var(--r);border-top:3px solid var(--line-2)}
.pd-route__b{display:flex;flex:1 1 auto;flex-direction:column;gap:12px;
  padding:clamp(22px,2.4vw,32px)}
.pd-route__b h3{margin:0}
.pd-route__b>p:not(.kicker){margin:0;font-size:15px;line-height:1.65;color:var(--muted);
  max-width:58ch}
.pd-route__f{margin-top:auto;padding-top:14px}
.pd-route__m .fig{gap:0}
.pd-route__m .ph{border:0;border-top:1px solid var(--line);border-radius:0}
.pd-route--new{background:var(--accent-t);border-top-color:var(--accent)}
.pd-route--new .kicker{color:var(--accent)}
.pd-route--new .pd-route__m .ph{border-top-color:#C6D8E7}

/* ---------- 04 · Request a Quote: the form beside its rail -------------------
   The band is white, so the form takes the off-white ground the band used to
   carry: the panel is what tells the visitor where to type, and the white fields
   inside it stay the brightest thing in the band. The card is given more air
   than the same component uses elsewhere — wider padding, a taller gap between
   rows and fields, and the label sitting further above its input — because it is
   read beside a column of prose rather than on its own. 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. */
/* The panel is measured against the words beside it: the left column ends at its
   WhatsApp button, so the panel is kept to about that height — vertical padding
   and the air inside the fields come down, while the side padding that keeps the
   fields off the panel edge stays. */
.pd-enquiry .enquiry-form{background:var(--off);border-color:var(--line-2);
  padding:clamp(18px,1.6vw,20px) clamp(24px,2.2vw,28px)}
.pd-enquiry .enquiry-form label{margin-bottom:5px}
.pd-enquiry .enquiry-form .field-grid{gap:13px 22px;margin-bottom:10px}
.pd-enquiry .enquiry-form .field-hint{margin-top:6px}
.pd-enquiry .enquiry-form input[type=text],.pd-enquiry .enquiry-form input[type=email],
.pd-enquiry .enquiry-form input[type=tel],.pd-enquiry .enquiry-form textarea{padding:9px 14px}
.pd-enquiry .enquiry-form textarea{min-height:50px}
.pd-enquiry .enquiry-form .form-foot{margin-top:12px;padding-top:12px;gap:9px}
.pd-enquiry .enquiry-form .form-foot .btn{padding:12px 22px}
/* The two halves are meant to read as one row: an even split, and the words on the
   left stay stretched to the row so the WhatsApp button closes level with the foot
   of the form instead of leaving a hole beneath it. */
@media (min-width:861px){
  .pd-rfq{grid-template-columns:1fr 1fr}
}
@media (min-width:1025px){
  .pd-rfq{align-items:stretch}
  .pd-rfq > div:first-child{display:flex;flex-direction:column}
  .pd-rfq > div:first-child .head-actions--tight{margin-top:auto}
}
@media (min-width:861px) and (max-width:1024px){
  .pd-rfq{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pd-enquiry .enquiry-form .field-grid{gap:13px 0;margin-bottom:13px}
}