/* ==========================================================================
   PROCESS PAGE — the five-phase sheet
   ==========================================================================

   Built to the storyboard: a single full-viewport composition rather than a
   scrolling stack of sections. Left column carries the title and the call to
   action, right column carries the five phases in a row.

   The frame, corner ticks, masthead and glowing CTA box are not redefined here
   — they come from styles.css and brand-hero.css, because this page is the same
   drawing sheet the home page is and a second copy of that chrome would be a
   second thing to keep in step.

   SIZING — proportions first, with floors.

   Everything that carries the composition is a clamp() on vw: the gaps, the
   circles, the type. That is what makes the page hold its shape as the window
   changes, rather than reflowing into something that no longer resembles the
   board. The floors are the honest part — below roughly a small laptop, text
   would keep shrinking past the point of being readable, so it stops and the
   spacing tightens instead.

   The five-across row is a desktop composition and does not survive a phone.
   Below 900px it becomes a vertical list, which is deliberately plain: mobile
   has not been storyboarded yet, so this is a readable holding pattern rather
   than a guess at a design.
   --------------------------------------------------------------------------- */

.pp-body {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) 1.14fr;
  gap: clamp(28px, 4.5vw, 84px);
  align-items: center;
  padding: clamp(16px, 3vh, 44px) clamp(10px, 2vw, 40px) clamp(12px, 2.5vh, 36px);
}

/* ---- left column --------------------------------------------------------- */

.pp-left { max-width: 560px; }

.pp-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: clamp(10px, 1.6vh, 22px) 0 0;
  /* Three shadows doing three jobs, matching the home headline: a tight one for
     contact against the grid lines, a mid one for the drop, and a wide faint one
     for the ambient darkening a raised object casts. Navy rather than black —
     black greys the blue and reads as a bevel. */
  text-shadow:
    0 1px 0 rgba(1,15,40,.55),
    0 3px 10px rgba(1,15,40,.45),
    0 12px 38px rgba(1,15,40,.35);
}

/* The one italic on the page. It is a subtitle rather than a second heading, so
   it steps back in weight and forward in colour instead of competing. */
.pp-sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.3vw, 2.05rem);
  line-height: 1.24;
  color: #a8c4ea;
  margin: clamp(6px, 1.2vh, 16px) 0 0;
  text-shadow: 0 2px 8px rgba(1,15,40,.4);
}

/* The elevation, with its dimension lines drawn around it rather than baked in,
   so the drawing can be replaced without redrawing the annotation. */
.pp-figure {
  position: relative;
  margin: clamp(16px, 3vh, 40px) 0 0;
  padding: 0 0 0 clamp(26px, 3vw, 44px);
}
.pp-figure img { width: 100%; height: auto; display: block; opacity: .92; }

/* Empty-state box, shown only while no drawing has been supplied. Visible on
   purpose: a silently missing illustration looks like a broken image, and this
   says which asset is outstanding. */
.pp-figure.is-empty {
  min-height: clamp(150px, 22vh, 260px);
  border: 1px dashed var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white-55);
  padding: 20px;
}

/* Dimension lines. Horizontal runs under the drawing, vertical up its left
   side, each with a tick at both ends — the same drafting vocabulary as the
   home sheet's crop marks. */
.pp-dim { position: absolute; color: var(--white-55); font-family: var(--mono);
  font-size: clamp(.52rem, .72vw, .66rem); letter-spacing: .14em; }
.pp-dim::before { content: ""; position: absolute; background: rgba(255,255,255,.28); }
.pp-dim.w { left: clamp(26px,3vw,44px); right: 0; bottom: calc(-1 * clamp(14px,2vh,24px)); text-align: center; }
.pp-dim.w::before { left: 0; right: 0; height: 1px; top: 50%; }
.pp-dim.w span { position: relative; background: var(--navy-base); padding: 0 8px; }
.pp-dim.h { left: 0; top: 0; bottom: 0; width: clamp(20px,2.4vw,34px);
  display: flex; align-items: center; justify-content: center; }
.pp-dim.h::before { top: 0; bottom: 0; width: 1px; left: 50%; }
.pp-dim.h span { position: relative; background: var(--navy-base); padding: 8px 0; writing-mode: vertical-rl; transform: rotate(180deg); }

.pp-cta-row { margin: clamp(18px, 3.4vh, 44px) 0 0; }

/* ---- right column: the five phases --------------------------------------- */

.pp-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1.1vw, 18px);
  align-items: start;
}

.pp-step { position: relative; text-align: center; }

.pp-step .n {
  font-family: var(--mono);
  font-size: clamp(.72rem, 1.05vw, .95rem);
  letter-spacing: .18em;
  color: var(--white-70);
  margin: 0 0 clamp(6px, 1vh, 12px);
}

/* A short stem from the number down to the circle, so the two read as one
   annotated object rather than a label floating above a disc. */
.pp-step .n::after {
  content: ""; display: block; margin: clamp(5px,.8vh,9px) auto 0;
  width: 1px; height: clamp(7px, 1.1vh, 13px);
  background: rgba(255,255,255,.3);
}

.pp-disc {
  width: clamp(52px, 6.6vw, 96px);
  height: clamp(52px, 6.6vw, 96px);
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pp-disc svg {
  width: clamp(22px, 2.9vw, 42px);
  height: clamp(22px, 2.9vw, 42px);
  stroke: #fff; fill: none;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}

/* The connector between phases. Drawn on the step rather than between them so
   there is no extra element per gap, and suppressed on the last one — an arrow
   pointing out of the final phase would imply a sixth. */
.pp-step:not(:last-child) .pp-disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + clamp(26px, 3.3vw, 48px) + clamp(4px, .7vw, 10px));
  width: calc(100% - clamp(52px, 6.6vw, 96px) - clamp(8px, 1.4vw, 20px));
  height: 1px;
  background: rgba(255,255,255,.34);
}
.pp-step:not(:last-child) .pp-disc::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(2px, .5vw, 8px));
  width: 5px; height: 5px;
  border-top: 1px solid rgba(255,255,255,.5);
  border-right: 1px solid rgba(255,255,255,.5);
  transform: translate(-100%, -50%) rotate(45deg);
}
/* The arrow sits against the disc, which is the positioned reference for both
   pseudo-elements above. */
.pp-step .pp-disc { position: relative; }

.pp-step h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.78rem, 1.15vw, 1.08rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin: clamp(10px, 1.8vh, 22px) 0 clamp(6px, 1vh, 12px);
}

.pp-step p {
  font-family: var(--sans);
  font-size: clamp(.72rem, .95vw, .93rem);
  line-height: 1.55;
  color: var(--white-70);
  margin: 0 auto;
  max-width: 20ch;
}

/* ---- the baseline strip -------------------------------------------------- */

.pp-base {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 54px);
  font-family: var(--mono);
  font-size: clamp(.56rem, .74vw, .7rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white-55);
  padding: clamp(6px, 1.4vh, 18px) clamp(10px, 2vw, 40px) 0;
}
.pp-base a { color: inherit; }
.pp-base a:hover { color: var(--white); }

/* ---- below the composition ----------------------------------------------- */

/* Mobile is a holding pattern, not a design. The five-across row cannot survive
   phone width — at 390px each phase gets about 70px, which turns the circles
   into fingernails and the captions into noise — so it becomes a plain vertical
   list. Readable, honest, and easy to replace once mobile is storyboarded. */
@media (max-width: 900px) {
  .pp-body {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vh, 48px);
    align-items: start;
    padding-top: clamp(20px, 4vh, 40px);
  }
  .pp-left { max-width: none; }
  .pp-steps { grid-template-columns: 1fr; gap: clamp(22px, 4vh, 36px); }
  .pp-step { display: grid; grid-template-columns: auto 1fr; gap: 16px; text-align: left; align-items: start; }
  .pp-step .n { grid-column: 1; margin: 0; }
  .pp-step .n::after { display: none; }
  .pp-disc { grid-column: 1; grid-row: 2; margin: 8px 0 0; width: 54px; height: 54px; }
  .pp-disc svg { width: 24px; height: 24px; }
  /* No connectors in the stack — a horizontal arrow between vertically stacked
     items points nowhere. */
  .pp-step .pp-disc::before, .pp-step .pp-disc::after { display: none; }
  .pp-step h3 { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .pp-step p { grid-column: 2; grid-row: 2; max-width: none; margin: 6px 0 0; }
  .pp-base { flex-direction: column; gap: 8px; text-align: center; padding-top: 22px; }
}

/* Print, and anyone who asked the browser to stop moving things. The page is a
   drawing; none of it depends on motion to be understood. */
@media (prefers-reduced-motion: reduce) {
  .pp-disc, .pp-step { transition: none !important; animation: none !important; }
}