/* =========================================================================
   Ciano Meubles — "How It Works" (About)
   The band, the headline and the brass come from css/dband.css and
   css/tokens.css. This file is only the two things that are this section's
   own: the split, and the step marker.

   THE SPLIT. The headline, the stats and the CTA hold the left and stay put
   while the four steps run down the right. It is the layout the section
   already had; what changed is the skin around it. A row of four was tried
   and dropped: a process is a sequence, and a row asks to be read as a set.

   THE MARKER. Four small marks under each numeral, filling as you descend —
   so a step states how far through the process it is without a connecting
   line doing the work. Chosen over a continuous progress bar (reads as a UI
   widget next to type this quiet), a spine threading the numerals (handsome,
   but it is a second vertical rule beside the one the rail already has) and a
   plain "01 / 04" (accurate, but progress becomes a number you read rather
   than a length you see).

   Loaded by about.html and by every Services page that runs the section:
   services/index.html and the four service pages under it. commercial.html
   has no process section and does not load this or dband.css.
   ========================================================================= */

/* ---------------------------------------------------------------- split -- */

/* The band's headline block is centred and capped for a section that runs
   full width. Here it is a column, so it takes the column's width. */
.prc .dband-head {
  max-width: none;
  margin-bottom: 0;
}

.prc-inner {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 5vw, 92px);
  align-items: start;
}

/* The left column is shorter than the rail beside it, so it holds while the
   steps scroll past rather than leaving a tall empty gutter. */
.prc-left { position: sticky; top: clamp(90px, 12vh, 130px); }

/* ----------------------------------------------------- stats and CTA ---- */
/* Both come off the old section and have no equivalent in the home page's
   band, so they get a home of their own under the headline. */

.prc-tail {
  margin-top: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 30px);
}

.prc-stats {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 38px);
  flex-wrap: wrap;
}

.prc-stat { display: flex; flex-direction: column; gap: 6px; }

.prc-stat-num {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1;
  color: var(--x-brass);
}

/* The third stat is a word ("Designed"), not a numeral. At numeral size it
   outruns its column and unbalances the row — the same correction the home
   page's own stat row carries. */
.prc-stat:last-child .prc-stat-num {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.25;
}

.prc-stat-label {
  font-family: var(--x-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--x-paper-rgb), 0.55);
  max-width: 18ch;
  line-height: 1.7;
}

.prc-sep { width: 1px; align-self: stretch; background: rgba(var(--x-paper-rgb), 0.16); }

/* ----------------------------------------------------------------- rail -- */

.prc-rail { display: flex; flex-direction: column; }

/* Two columns: the marker, then the copy. The marker column is a fixed width
   so all four numerals line up down the page. */
.prc-step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 6vw, 88px) 1fr;
  gap: clamp(14px, 1.6vw, 26px);
  padding: clamp(20px, 2.6vw, 34px) 0;
}

/* There is no connector between steps, so this rule is what keeps four
   entries from running together into one block of text. Not above the first
   or below the last: those edges are the section's own air, and a line there
   closes the rail into a box. */
.prc-step + .prc-step { border-top: 1px solid rgba(var(--x-paper-rgb), 0.10); }

.prc-step-mark { display: flex; flex-direction: column; align-items: flex-start; }

.prc-step-num {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 2.6vw, 2.7rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--x-brass);
}

.prc-step-name {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.15;
  color: var(--x-paper);
  margin: 0 0 8px;
}

.prc-step-desc {
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.75;
  color: rgba(var(--x-paper-rgb), 0.68);
  margin: 0;
  max-width: 52ch;
}

/* --------------------------------------------------------------- meter --- */

.prc-step-meter { display: flex; gap: 4px; margin-top: 12px; }

.prc-step-meter i {
  display: block;
  width: 13px;
  height: 2px;
  background: rgba(var(--x-paper-rgb), 0.18);
}

/* How far along each step is, written off data-step rather than a per-step
   class, so renumbering or reordering the rail is a change to the markup's
   own numbering and nothing in here has to be touched to match. */
.prc-step[data-step="1"] .prc-step-meter i:nth-child(-n+1),
.prc-step[data-step="2"] .prc-step-meter i:nth-child(-n+2),
.prc-step[data-step="3"] .prc-step-meter i:nth-child(-n+3),
.prc-step[data-step="4"] .prc-step-meter i:nth-child(-n+4) { background: var(--x-brass); }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 1000px) {
  .prc-inner { grid-template-columns: 1fr; }
  /* Nothing to hold against once the rail is below rather than beside it. */
  .prc-left { position: static; }
}

@media (max-width: 680px) {
  .prc-step { grid-template-columns: clamp(52px, 14vw, 70px) 1fr; }
  .prc-sep { display: none; }
  .prc-stats { row-gap: 22px; }
}