/* =========================================================================
   PROCESS CARD ROW  (.pc-row / .pc-card)
   Shared component. DESIGN-BOOK 19 (built for managed-growth #timeline,
   2026-08-02) and 25 (adopted by enterprise-software #implementation,
   2026-08-03).

   Four steps standing side by side on one fixed-height stage, one open: the
   open step grows sideways into the row and the three closed ones give the
   width back, so the sequence reads as something you can see all of at once.
   Card anatomy, surface, border and shadow are the comparison-card language
   (DESIGN-BOOK 16.4): squared corners, 1px --line, white, 0 19px 42px
   rgba(7,16,48,.085), media header flush to the top edge, serif card headline
   at --fs-h3.

   The two hard constraints:
   1. The row height is fixed (--pc-h). Cards are centred inside it and the
      open one is taller, so no state change can move the page (DESIGN-BOOK 8).
   2. One type role per slot. The headline slot holds the step word when the
      card is closed and the claim when it is open -- same family, same size,
      same baseline, so the swap is a crossfade rather than a resize.

   It lives here rather than in a page stylesheet because two sections on two
   pages now run it, and the whole reason DESIGN-BOOK 19 measures what it does
   (0.00px layout shift, the off-viewport paint hides, the type ladder) is that
   those numbers hold in ONE place. Page-local business -- the section head,
   the artwork, the graphic inside .pc-media -- stays with the page.

   The section head is NOT here: managed-growth runs a two-column head with the
   CTA on the right (.pc-head*, mg.css) and enterprise-software runs the
   standard centred .section-head. Only the row is shared.

   Driven by assets/process-cards.js.
   ========================================================================= */

/* ---- the row ---- */
.pc-row {
  --pc-h: 520px;
  --pc-h-shut: 366px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--pc-h);
}
.pc-card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  height: var(--pc-h-shut);
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  /* Closed cards are recessed, the open one is lit. On a white page canvas a
     white card with a 1px grey border reads as a ghost outline, not as an
     object -- the reference composition gets this for free by sitting its
     white cards on a grey field, which the rails forbid here. */
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    flex-grow .9s var(--ease-out-quint),
    height .9s var(--ease-out-quint),
    background .5s var(--ease-micro),
    box-shadow .9s var(--ease-micro);
}
/* 1.82 : 1 -- at the 1088px text column that is a 393px open card against
   three 216px ones, which is the widest the closed cards can be squeezed
   before "Compound" at the headline size stops fitting on one line.

   .pc-card--wide opens wider than the rest, and it is the card carrying a CTA
   under its paragraph: the extra width buys the description a shorter wrap and
   pays for the CTA's line inside the row's fixed height, rather than making
   that one card taller and breaking the "nothing below moves" rule. It was
   `#pc-card-01` while one page ran the row; a class so the second page can put
   its CTA on whichever step owns one.
   --pc-grow and --pc-total travel together: the total is this card's grow plus
   the three closed ones, and the text-width lock further down divides by it. */
.pc-card {
  --pc-grow: 1.82;
  --pc-total: 4.82;
  --pc-media-h: 244px;
}
.pc-card--wide {
  --pc-grow: 2.24;
  --pc-total: 5.24;
}
.pc-card.on {
  flex-grow: var(--pc-grow);
  height: var(--pc-h);
  background: #fff;
  box-shadow: 0 19px 42px rgba(7, 16, 48, .085);
}
.pc-card:not(.on):hover {
  background: #FAFAFA;
}
.pc-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ---- the index: one numeral, two states ----
   It used to be a closed-state-only ghost that faded out and translated away
   while a separate mono stamp appeared on the artwork, so the step number was
   two elements handing over. It is now a single element that MORPHS: the giant
   ghost numeral travels down onto the artwork and lands as the white numeral,
   shrinking and changing colour on the way. Same node, so the digits are
   continuous rather than crossfaded, and the number exists once in the DOM. */
.pc-index {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 500;
  /* The display-word clamp exactly (DESIGN-BOOK 17.1) -- the giant numeral is
     the same role as #how's giant word, and the previous build of this section
     had already drifted to its own clamp(34px, 4.1vw, 58px). */
  font-size: clamp(38px, 4.3vw, 62px);
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(10, 16, 60, .13);
  text-shadow: 0 2px 12px rgba(3, 8, 35, 0);
  /* geometry on the card's own .9s curve so the numeral lands exactly as the
     artwork finishes opening; colour a touch faster so it is already white by
     the time it is over the art */
  transition:
    top .9s var(--ease-out-quint),
    left .9s var(--ease-out-quint),
    font-size .9s var(--ease-out-quint),
    color .6s var(--ease-micro),
    text-shadow .6s var(--ease-micro);
}
.pc-card:not(.on):hover .pc-index {
  color: rgba(10, 16, 60, .2);
}
/* The landed state: bottom-left of the artwork, on the same rail as the copy
   below it, set as the homepage's solution-card chip (Afical 18px/500 in white
   with a soft shadow -- `index.html #solutions .solution-chips span`). Derived
   from --pc-media-h so the numeral cannot drift off the artwork's foot if that
   height changes; 1.1em is its own line box at the landed size. */
.pc-card.on .pc-index {
  top: calc(var(--pc-media-h) - 22px - 1.1em);
  left: 28px;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(3, 8, 35, .32);
}

/* ---- the artwork, open state only ----
   Flush to the card's top edge and squared, like #compare's media header, so
   the band art is cut by the card frame rather than floated inside it. */
.pc-media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 0;
  overflow: hidden;
  background: #061640;
  opacity: 0;
  transition: height .9s var(--ease-out-quint), opacity .7s var(--ease-micro);
}
.pc-card.on .pc-media {
  height: var(--pc-media-h);
  opacity: 1;
}
/* Cropped from the top, not the centre. These are square sources in a 392x244
   window, so the crop is a real art-direction choice, and it is the one that
   puts a dark band under the stamp on all four: measured white-on-art contrast
   is 12.1 / 6.7 / 6.7 / 11.4 : 1 from the top against 11.4 / 5.3 / 6.0 / 3.0
   from the centre, where two of the four fall under the 5.7:1 floor every
   stamp on the site clears (DESIGN-BOOK 16.3) and the warm step 04 lands its
   stamp on bare orange at 3.0:1. */
.pc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---- copy, anchored to the card foot in both states ---- */
.pc-body {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: 0 24px 26px;
  transition: padding .9s var(--ease-out-quint);
}
.pc-card.on .pc-body {
  padding: 0 28px 30px;
}
.pc-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  transition: color .5s var(--ease-micro);
}
.pc-card.on .pc-kicker {
  color: var(--blue);
}
/* The kicker's `01 /` prefix and the rules that revealed it are gone: the step
   number now lives once, as the white numeral on the artwork, so the eyebrow
   carries only the phase ("Iteration"). That also retires the max-width
   collapse that used to hand the index over from the ghost numeral. */

/* One headline slot, two occupants. Both are taken out of flow and hung from
   the slot's bottom edge, so the word a closed card shows and the claim an
   open one shows share a baseline. Out of flow is the point: in flow, the
   claim was still being laid out at the *closed* card's 216px, wrapping to
   four lines and pushing the slot -- and with it the kicker above -- to a
   different height on every card. The slot is now exactly two lines, always.
   The claim also fades in only after the card has finished widening, so it is
   never seen reflowing through the intermediate widths. */
.pc-title {
  position: relative;
  /* The clip box, and the reason the handover is safe. Whichever occupant is
     not showing is PARKED BELOW this box, not merely faded: opacity and
     visibility are both ignored on Chrome's off-viewport raster path, so a
     full-page screenshot (DevTools capture, print, scroll-capture extensions)
     rendered all three closed cards with their claim ghosted straight through
     the step word. Geometry is the one hide that path honours -- the same
     reason the closed cards' artwork and paragraph, which are clipped by
     height and by 0fr, never leaked. Verified by diffing an in-viewport
     capture against a full-page capture of the same pixels.
     6px of padding widens the clip below the text so the descenders of
     "Strategy" and "Compound" are not shaved; the occupants sit on bottom:6px,
     so nothing moves. */
  overflow: hidden;
  margin-top: 12px;
  padding-bottom: 6px;
  min-height: calc(2 * 1.06em + 6px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.06;
  letter-spacing: -.01em;
}
/* Family and weight repeated on the children: see the note on .pc-kicker --
   inheriting them from .pc-title loses to site.css's `span` rule. */
.pc-title > span {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  font-family: var(--serif);
  font-weight: 500;
}
/* visibility, not opacity alone. An opacity-0 layer is still painted on some
   compositing paths -- a full-page capture rendered all three closed cards
   with their claim ghosted straight through the step word -- and it stays in
   the accessibility tree at full size, so every card announced both its word
   and its claim. `transition: visibility 0s <fade duration>` flips it only
   once the fade has finished, so the crossfade is unchanged. */
/* -400px parks a five-line claim entirely below a two-line box. bottom is
   switched with a 0s transition rather than animated, so the visual handover
   is still the crossfade the timings above describe. */
.pc-title .pc-w {
  color: rgba(10, 10, 10, .58);
  transition: opacity .45s var(--ease-micro) .26s, bottom 0s, color .5s var(--ease-micro);
}
.pc-card:not(.on):hover .pc-title .pc-w {
  color: var(--ink);
}
.pc-title .pc-c {
  bottom: -400px;
  opacity: 0;
  color: var(--ink);
  transition: opacity .22s var(--ease-micro), bottom 0s .22s;
}
.pc-card.on .pc-title .pc-w {
  bottom: -400px;
  opacity: 0;
  transition: opacity .22s var(--ease-micro), bottom 0s .22s;
}
.pc-card.on .pc-title .pc-c {
  bottom: 6px;
  opacity: 1;
  transition: opacity .5s var(--ease-micro) .3s, bottom 0s .3s;
}

/* 0fr -> 1fr, so the paragraph is revealed by the card growing rather than by
   a height keyframe that would have to know the text. */
.pc-more {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition:
    grid-template-rows .9s var(--ease-out-quint),
    margin-top .9s var(--ease-out-quint),
    opacity .5s var(--ease-micro);
}
/* any single child, not just .pc-desc: step 01 wraps its description and its
   CTA in one .pc-mi so the 0fr -> 1fr collapse still animates exactly one row */
.pc-more > * {
  min-height: 0;
  overflow: hidden;
}
.pc-mi {
  display: block;
}

/* The step CTA is the site's arrow link (DESIGN-BOOK 14.3: no rule under the
   label, the arrow is the affordance), in blue and on its own line under the
   paragraph. Named -step- deliberately: .pc-cta is already the section head's
   link, and reusing it here recoloured that one. */
.pc-step-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
}
.pc-step-cta svg {
  transition: transform .2s var(--ease-micro);
}
.pc-step-cta:hover svg {
  transform: translateX(3px);
}
.pc-step-cta:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.pc-card.on .pc-more {
  grid-template-rows: 1fr;
  margin-top: 16px;
  opacity: 1;
  transition:
    grid-template-rows .9s var(--ease-out-quint),
    margin-top .9s var(--ease-out-quint),
    opacity .5s var(--ease-micro) .3s;
}
.pc-desc {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* 2px track on the card foot: rests, then fills perfectly linearly, then the
   next step takes over. Squared cards, so it can run the full width. */
.pc-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(10, 16, 60, .07);
}
.pc-bar b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- the text does not re-wrap while the card is widening ----
   The claim and the paragraph were laid out against whatever width the card
   happened to have mid-transition, so opening a step showed the headline as
   two lines and then snapping to one, and the paragraph gaining a line as the
   neighbouring card gave its width back. .pc-title's own note already asked
   for this ("never seen reflowing through the intermediate widths") and tried
   to buy it with a 0.3s fade delay, but the width runs for 0.9s, so the fade
   finished while the card was still growing.

   Fixed at the root instead of by re-timing: both occupants are laid out at
   the OPEN card's inner width from the start and simply clipped by the card's
   overflow while it is narrow, so their line count never changes. The row is
   the container, so the open width is derived rather than typed:
     free space  = 100cqw - 3 gaps
     open card   = free space x 1.82 / (1.82 + 1 + 1 + 1)
     inner       = open card - 2 x 28px of .pc-card.on .pc-body padding
   Scoped above 1080px because below it every card is open and equal-width, so
   there is no widening to protect against and the ratio would be wrong. */
@media (min-width: 1081px) {
  .pc-row {
    container-type: inline-size;
  }

  .pc-card {
    --pc-open-inner: calc((100cqw - 48px) * var(--pc-grow) / var(--pc-total) - 56px);
  }

  .pc-title > span {
    right: auto;
    width: var(--pc-open-inner);
  }

  .pc-desc {
    width: var(--pc-open-inner);
  }
}

/* ---- below 1080px there is no room to squeeze three cards down, so the row
   stops being interactive and every card is simply open. Same anatomy, laid
   out two up and then one up. ---- */
@media (max-width: 1080px) {
  .pc-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    height: auto;
    gap: clamp(14px, 1.6vw, 20px);
  }
  .pc-card,
  .pc-card.on,
  .pc-card:not(.on):hover {
    height: auto;
    flex: none;
    cursor: default;
    background: #fff;
    box-shadow: 0 19px 42px rgba(7, 16, 48, .085);
  }
  /* Every card is open here, so the numeral is simply already landed: it keeps
     its artwork position instead of being hidden, which is what it was when a
     separate stamp carried the number on this breakpoint. No transition,
     because nothing opens or closes. */
  .pc-index {
    display: block;
    top: calc(var(--pc-media-h) - 20px - 1.1em);
    left: 24px;
    font-size: 17px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(3, 8, 35, .32);
    transition: none;
  }
  .pc-card {
    --pc-media-h: clamp(180px, 22vw, 228px);
  }
  .pc-media,
  .pc-card.on .pc-media {
    height: var(--pc-media-h);
    opacity: 1;
  }
  .pc-body,
  .pc-card.on .pc-body {
    padding: 24px 24px 28px;
  }
  .pc-kicker {
    color: var(--blue);
  }
  /* Back into flow: with nothing open and nothing closed there is no slot to
     share, so the claim sets the title height itself. */
  .pc-title {
    overflow: visible;
    padding-bottom: 0;
    min-height: 0;
  }
  .pc-title > span {
    position: static;
  }
  .pc-title .pc-w {
    display: none;
  }
  .pc-title .pc-c,
  .pc-card.on .pc-title .pc-c {
    bottom: auto;
    opacity: 1;
    transition: none;
  }
  .pc-more,
  .pc-card.on .pc-more {
    grid-template-rows: 1fr;
    margin-top: 14px;
    opacity: 1;
  }
  .pc-bar {
    display: none;
  }
}
@media (max-width: 700px) {
  .pc-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reduced motion keeps the open card open and drops the fill entirely: the
   script never starts, so the row is a static composition. */
@media (prefers-reduced-motion: reduce) {
  .pc-card,
  .pc-media,
  .pc-more,
  .pc-title > span,
  .pc-index {
    transition: none;
  }
  .pc-bar b {
    display: none;
  }
}