/* Custom Lace Development — assets/css/custom-lace-development.css
   Loaded only on /custom-lace-development/ by inc/routes.php
   (zeroy_enqueue_page_style('custom-lace-development'), which depends on 'zeroy-site', so these rules
   follow style.css and tokens.css). No other page of the theme uses anything in this file.

   Every colour, size, space and radius is a var() token from assets/css/tokens.css: no colour
   literals, no font declarations, no :root edits, no !important, no JS, no animation library.
   Mobile first: one column by default, columns from 48em.

   The sections this file is responsible for, in page order:
     1. .cld-hero            opening band: copy beside the list of ways a development starts
     2. .cld-first           search before development: the archive card, the new-development card
     3. .cld-steps           the five steps from a reference to a pattern the machines can run
                             (the band itself carries .cld-steps-section as its hook)
     4. .cld-quote           what the price is built from, what a quotation states, the fee note
     5. .cld-brief           what we need from the customer before development starts
     6. .cld-order           technical completion, sample confirmation and the purchase order
     7. .cld-handling        confidentiality, exclusivity and who works on the development
     8. .cld-cta             dark closing band: copy, buttons, contact lines

   .section, .wrap, .stack, .grid, .split, .card, .card--quiet, .btn, .btn-row, .eyebrow, .lead,
   .meta and .rule-accent come from style.css and are not redefined here: the .cld-* selectors below
   only add what is specific to this page. */

/* --- 1. hero ------------------------------------------------------------ */
/* Page-scoped padding only; .section itself is untouched. */
.cld-hero{padding-block:var(--section-y-tight) var(--section-y)}
.cld-hero__grid{display:grid;gap:var(--space-6);align-items:start}
.cld-hero__copy h1{max-width:26ch}
.cld-hero__copy .lead{max-width:56ch}
.cld-hero__copy .btn-row{margin-bottom:0}
.cld-hero__panel h2{
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  margin-bottom:var(--space-3)}
.cld-hero__note{margin:0}

/* The list of triggers is a plain checklist of short lines, not prose: the marker is a hairline
   rule drawn from the accent token, so no glyph font and no image is needed. */
.cld-inputs{
  list-style:none;
  margin:0 0 var(--space-4);
  padding:0;
  max-width:none;
  display:grid;
  gap:var(--space-2)}
.cld-inputs li{
  position:relative;
  padding-left:var(--space-5);
  font-size:var(--fs-small);
  color:var(--c-ink-soft)}
.cld-inputs li::before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:var(--space-3);
  height:1px;
  background:var(--c-accent)}

/* --- section head shared by the body bands ------------------------------ */
.cld-head{max-width:var(--wrap-narrow);margin-bottom:var(--space-6)}
.cld-head h2{max-width:34ch}
.cld-head .lead{margin-top:var(--space-2)}

/* --- 2. search before development --------------------------------------- */
.cld-first__cards .card h3{margin-bottom:var(--space-2)}
.cld-first__cards .card p:last-child{margin-bottom:0}
.cld-first__note{
  margin-top:var(--space-5);
  margin-bottom:0;
  max-width:var(--wrap-narrow)}

/* --- 3. the five steps -------------------------------------------------- */
/* A numbered list, auto-fit into two columns once there is room for them. The number is drawn in
   the accent token; every step keeps its own rule above it so the sequence reads as a sequence. */
.cld-steps{
  list-style:none;
  margin:0;
  padding:0;
  max-width:none;
  counter-reset:cld-step;
  display:grid;
  gap:var(--space-5)}
.cld-step{
  counter-increment:cld-step;
  display:grid;
  grid-template-columns:2.5rem minmax(0,1fr);
  gap:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--c-line-strong)}
.cld-step::before{
  content:counter(cld-step,decimal-leading-zero);
  grid-column:1;
  font-size:var(--fs-small);
  letter-spacing:var(--ls-eyebrow);
  color:var(--c-accent-strong)}
/* Step headings label one short paragraph each, so they stay small. */
.cld-step h3{
  grid-column:2;
  font-size:var(--fs-h4);
  letter-spacing:normal;
  margin:0 0 var(--space-2)}
.cld-step p{
  grid-column:2;
  margin:0;
  color:var(--c-ink-soft)}

/* --- 4. how a development is priced ------------------------------------- */
.cld-quote__cards .card h3{margin-bottom:var(--space-3)}
/* The two lists are attribute words, not sentences: they tile instead of running as a column. */
.cld-quote__list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:var(--space-2) var(--space-4)}
.cld-quote__list li{
  font-size:var(--fs-small);
  color:var(--c-ink-soft);
  border-top:var(--border-hair);
  padding-top:var(--space-2)}
.cld-quote__note{
  margin-top:var(--space-6);
  max-width:var(--wrap-narrow);
  border-top:var(--border-hair);
  padding-top:var(--space-5)}
.cld-quote__note p:last-child{margin-bottom:0}

/* --- 5. what we need from the customer ---------------------------------- */
/* Auto-fit: the column count follows the room instead of being fixed. */
.cld-brief__list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:var(--space-5)}
.cld-brief__item{
  padding-top:var(--space-4);
  border-top:1px solid var(--c-line-strong)}
.cld-brief__item h3{
  font-size:var(--fs-h4);
  letter-spacing:normal;
  margin-bottom:var(--space-2)}
.cld-brief__item p{margin-bottom:0;color:var(--c-ink-soft)}
.cld-brief__item .meta{margin-top:var(--space-3)}
.cld-brief__note{
  margin-top:var(--space-6);
  margin-bottom:0;
  max-width:var(--wrap-narrow)}

/* --- 6. three moments that are not the same ----------------------------- */
.cld-order__cards .card h3{margin-bottom:var(--space-2)}
.cld-order__cards .card p:last-child{margin-bottom:0}
.cld-order__note{
  margin-top:var(--space-6);
  margin-bottom:0;
  max-width:var(--wrap-narrow);
  border-top:var(--border-hair);
  padding-top:var(--space-5)}

/* --- 7. confidentiality and who does the work --------------------------- */
/* .split centres its columns; here the tall copy and the short card both start at the top. */
.cld-handling__body{align-items:start}
.cld-handling__card h3{max-width:24ch;margin-bottom:var(--space-3)}
.cld-handling__card p:last-child{margin-bottom:0}
.cld-handling__card .meta{margin-top:var(--space-4)}

/* --- 8. closing call to action ------------------------------------------ */
.cld-cta__inner{display:grid;gap:var(--space-6);align-items:start}
.cld-cta__copy h2{max-width:30ch;margin-bottom:var(--space-4)}
.cld-cta__copy .lead{max-width:54ch;margin-bottom:var(--space-5)}
.cld-cta__copy .btn-row{margin-bottom:0}
/* The global .btn--ghost border and hover colours are tuned for light backgrounds; on the
   .section--ink surface they would leave the label dark on dark. This button alone therefore takes
   the light-on-dark tokens tokens.css already defines: --c-on-ink for the label,
   --c-on-ink-line for the border and for the hover wash. */
.cld-cta__ghost{border-color:var(--c-on-ink-line);color:var(--c-on-ink)}
.cld-cta__ghost:hover{border-color:var(--c-on-ink);color:var(--c-on-ink);background:var(--c-on-ink-line)}
.cld-cta__contact{border-top:1px solid var(--c-on-ink-line);padding-top:var(--space-5)}
.cld-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)}
.cld-cta__line:last-child{margin-bottom:0}
.cld-cta__label{
  min-width:8rem;
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-on-ink-mute)}
.cld-cta__contact a{color:var(--c-on-ink)}

/* --- from 48em: the opening band becomes two columns -------------------- */
@media (min-width:48em){
  .cld-hero{padding-block:var(--section-y)}
  .cld-hero__grid{grid-template-columns:1.1fr .9fr;gap:var(--space-7)}
  .cld-steps{gap:var(--space-6)}
  .cld-cta__line{flex-wrap:nowrap}
}

/* --- from 62em: room for two columns of steps and a wider closing band --- */
@media (min-width:62em){
  .cld-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-6) var(--space-7)}
  .cld-quote__cards{gap:var(--space-6)}
  .cld-brief__list{gap:var(--space-6)}
  .cld-cta__inner{grid-template-columns:1.15fr .85fr;gap:var(--space-7)}
  .cld-cta__contact{border-top:0;padding-top:0}
  .cld-cta__contact a{text-decoration-color:var(--c-on-ink-line)}
}