/* ==========================================================================
   05 WHY US / ABOUT — split. Two photographs on the left, one overlapping the
   other; argument and credential rows on the right. 2 images.
   ========================================================================== */

/* the grid breaks below reach for the viewport edge; the section clips them so
   the desktop scrollbar can never turn a deliberate hang into a scrollbar */
.whyus { background: var(--surface-alt); overflow: hidden; }

.whyus__inner {
  display: grid;
  gap: var(--space-stack);
  align-items: center;
}

/* --- the photo pair ----------------------------------------------------- */
.whyus__figs { position: relative; }

/* clip-path removes box-shadow outright. On the near-black ground the cast
   shadow was doing nothing anyway — the surface step and the bezel carry it. */
.whyus__fig-main {
  aspect-ratio: var(--ratio-tall);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
}
.whyus__fig-main::after { background: var(--chamfer-edge), var(--overlay-media); }

/* One page's main frame is a 3:2 exterior. The portrait crop threw away the
   car, the driveway and the sun the paragraph beside it argues about and left
   a headlight on a lawn, so that page states its own ratio rather than the
   component assuming every main frame is a portrait bay shot. */
.whyus--landscape .whyus__fig-main { aspect-ratio: var(--ratio-bleed); }

/* The sub frame overlaps the main frame's block-end inline-start corner, which
   is the corner every .chip owns. On a landscape main frame the chip is wide
   relative to the frame and the sub cut its last word off at 390, so here the
   chip reads from the block-start. From --bp-lg the frame is wide enough that
   nothing reaches the chip, and the stamp takes the block-start corner. */
.whyus--landscape .whyus__fig-main .chip {
  inset-block-start: var(--chip-offset);
  inset-block-end: auto;
}

.whyus__fig-sub {
  aspect-ratio: var(--ratio-card);
  width: 58%;
  border-radius: var(--radius-media);
  border: var(--border-width-bar) solid var(--surface-alt);
  clip-path: var(--chamfer-clip);
  margin-block-start: calc(var(--space-3xl) * -1);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--gutter) * -1);
  position: relative;
}

/* Narrow, the stamp is a block in the figures' own flow. Absolutely placed it
   landed on the same bottom-inline-start corner every .chip uses, so it covered
   the main frame's chip and hung past the viewport edge at 390. It only becomes
   an overlay once there is a column to overlay — see the --bp-lg block. */
.whyus__stamp {
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  width: max-content;
  max-width: 100%;
  margin-block-start: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-inset);
  background: var(--surface-accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-card);
}
.whyus__fig-sub::after { background: var(--chamfer-edge), var(--overlay-media); }

.whyus__stamp-fig {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-mono-tight);
}
.whyus__stamp-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-accent-muted);
}

/* --- the argument -------------------------------------------------------- */
.whyus__body { display: flex; flex-direction: column; gap: var(--space-md); }

.whyus__prose {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: var(--width-measure);
}

/* base.css strips link styling site-wide, so an in-prose link here renders as
   plain text. Same construction as .refusal__why a — one underline in accent
   ink, one colour change on hover. */
.whyus__prose a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-accent);
  text-underline-offset: var(--space-3xs);
  transition: color var(--dur-fast) var(--ease-state);
}
.whyus__prose a:hover { color: var(--text-primary); }

/* --- the readings ---------------------------------------------------------
   The block-02 prose column runs to about half the height of the photograph
   pair beside it, which left a bare quadrant the width of a card. These are
   the same figures the section already argues with, set as instrument rows so
   the column carries data to its foot instead of ground. */
.whyus__readings { display: grid; gap: var(--space-3xs); }

.whyus__reading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: baseline;
  padding-block: var(--space-2xs);
  background: var(--tick-rule-fine);
  background-position: bottom;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.whyus__reading-val {
  font-size: var(--text-spec);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-secondary);
}
.whyus__reading-val b { color: var(--text-accent); font-weight: var(--weight-medium); }

.whyus__rows { display: grid; gap: var(--space-xs); }

.whyus__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  --chamfer: var(--chamfer-sm);
  padding: var(--space-xs);
  border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-inset);
  clip-path: var(--chamfer-clip);
  background: var(--chamfer-edge), var(--surface-page);
  transition: border-color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-lift);
}
.whyus__row:hover { border-color: var(--border-accent-soft); transform: translate3d(var(--space-3xs), 0, 0); }

.whyus__row-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.whyus__row-desc {
  display: block;
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

@media (min-width: 900px) {
  /* the photographs take the narrow track whichever side they are on: in the
     wide one the pair runs half again the height of the prose beside it and
     opens a bare cell the size of a card */
  .whyus__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
  /* Which side the photographs are on is stated on the container as
     --figs-end, not detected with :has(). Firefox before 121 — the 115 ESR on
     managed desktops included — treats a rule containing :has() as invalid and
     drops it, and the four pages that put the pair in the END column would get
     the START-column track sizing: the photographs in the 7fr track, running
     half again the height of the prose beside them, opening exactly the bare
     cell this rule exists to close. */
  .whyus__inner--figs-end { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .whyus__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* GRID BREAK #1. calc(var(--gutter) * -1) alone only reached the container's
     own padding edge, which is why the break was invisible: the sub figure's
     right edge landed exactly on .wrap--wide's. The second term is the wrap's
     outer margin, so the object carries on to the viewport edge and the break
     is the gutter plus that margin wide.
     Which object breaks follows which side the photographs are on, because the
     sub figure sits at the pair's end edge and can only reach the outside of
     the page from the end column. From the start column the stamp does it. */
  .whyus__inner {
    /* gutter first, then as much of the wrap's own outer margin as there is,
       capped so the break never runs off the viewport and gets clipped */
    /* 100vw is the viewport INCLUDING the classic scrollbar, and <body> stops
       at --width-page, so the wrap's outer margin is measured from the
       narrower of the two. Uncapped, a 2,560px screen computed a 500px reach
       against a real 180px one and the object was cut off by the section's
       own clip. The remaining error is half a scrollbar, ~8px, and there is
       no CSS unit that reports the viewport without it. */
    --whyus-break: calc(var(--gutter) * -1 - max(0px, min(var(--space-3xl), (min(100vw, var(--width-page)) - var(--width-wide)) / 2)));
  }
  /* sits on the figure pair, not inside either media box — .media clips */
  .whyus__stamp {
    position: absolute;
    inset-block-end: var(--space-2xl);
    margin-block-start: 0;
  }
  .whyus__inner > .whyus__figs:last-child .whyus__fig-sub { margin-inline-end: var(--whyus-break); }
  .whyus__inner > .whyus__figs:first-child .whyus__stamp { inset-inline-start: var(--whyus-break); }
  /* From the end column the sub figure carries the break, so the stamp has no
     structural job out there: at --whyus-break it floated in the gutter between
     the prose and the photographs, touching neither. It moves onto the main
     frame's free corner instead — block-start, because every .chip already owns
     block-end-inline-start and the sub figure owns the bottom of the pair, and
     because that corner is on the frame whatever ratio the frame is cut to. */
  .whyus__inner > .whyus__figs:last-child .whyus__stamp {
    inset-block-start: var(--space-md);
    inset-block-end: auto;
    inset-inline-start: var(--space-md);
  }
  .whyus--landscape .whyus__fig-main .chip {
    inset-block-start: auto;
    inset-block-end: var(--chip-offset);
  }

  /* The prose column runs shorter than the photographs on two of the four
     pages and left ~280px of bare body column under the readout while the
     photographs carried on to the section foot. The column now fills the row
     and the readout is anchored to its foot, so the argument opens at the top
     of the photographs and the data closes level with their bottom edge. */
  .whyus__body { align-self: stretch; }
  .whyus__readings { margin-block-start: auto; }
}

/* --------------------------------------------------------------------------
   STACKED — one page in four runs block 02 on a different rhythm. Photographs
   full width across the top, the argument set in columns underneath, so the
   second block on the site is not the same split composition four times over.
   specs/020-service-pages.md, Block 02.
   -------------------------------------------------------------------------- */
.whyus--stacked .whyus__figs { display: grid; gap: var(--grid-gap); }
.whyus--stacked .whyus__fig-main { aspect-ratio: var(--ratio-card); }
.whyus--stacked .whyus__fig-sub {
  width: auto;
  border: 0;
  margin-block-start: 0;
  margin-inline: 0;
}

@media (min-width: 900px) {
  .whyus--stacked .whyus__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-stack); }
  /* A grid item that carries an aspect-ratio does not stretch, so the two
     frames only close on one bottom edge if the tracks are cut in the same
     proportion as the ratios: 9/8 of the width for 3:2 against 4:3 puts both
     photographs at exactly the same height at every viewport. */
  .whyus--stacked .whyus__figs { grid-template-columns: minmax(0, 9fr) minmax(0, 8fr); }
  .whyus--stacked .whyus__fig-main { aspect-ratio: var(--ratio-bleed); }
}

/* head under the band on the left, the two paragraphs set as two columns beside
   it, the readout closing the left column. Only from --bp-xl: three columns of
   a 950px page set the prose at 25 characters, so below that the argument stays
   a single measure under the band. */
@media (min-width: 1280px) {
  .whyus--stacked .whyus__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-3xl);
    row-gap: var(--space-stack);
    align-items: start;
  }
  .whyus--stacked .sec-head { grid-column: 1; grid-row: 1; margin-block-end: 0; }
  .whyus--stacked .whyus__prose { grid-row: 1; }
  .whyus--stacked .whyus__readings { grid-column: 1; grid-row: 2; margin-block-start: 0; }
}

/* --------------------------------------------------------------------------
   THE LANDSCAPE PAIR CARRIES THE READOUT. On the page that runs --landscape
   the figure pair is 555px tall against a 1036px argument, and .whyus__inner's
   centring split the difference into ~240px of ground above the frames and
   ~240px below — two voids the width of a card in the end column. The readings
   move out of the prose column into the figure column and close it, so the
   column carries data to the section foot instead of ground at both ends.
   -------------------------------------------------------------------------- */
.whyus--landscape .whyus__figs .whyus__readings { margin-block-start: var(--space-md); }

@media (min-width: 900px) {
  .whyus--landscape .whyus__figs {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  /* a stretched flex column would otherwise shrink the ratio-locked frames */
  .whyus--landscape .whyus__figs > * { flex: 0 0 auto; }
  .whyus--landscape .whyus__figs .whyus__readings { margin-block-start: auto; }
}