/* ==========================================================================
   B VISUAL — pages.css
   Shared page-specific rules for Work, Services and About main content.
   No new font-size declarations — every size comes from applying
   .t-display/.t-head/.t-sub/.t-body/.t-micro in the markup. This file only
   sets colour, spacing, layout and decorative shape.
   No box-shadow. 0px radius on cards/covers, 10px on chips/ui, one pill
   reserved for the primary CTA only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page top — shared intro block for all three pages. Same motif as the
   Home hero (ambient purple field, nav clearance) so the pages read as one
   family, at a lighter weight since they are not the hero moment.
   -------------------------------------------------------------------------- */

.page-top {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--s10));
  padding-bottom: var(--s12);
  background-image: var(--surface-plum);
  /* clip, not hidden — hidden would make this a scroll container and stop
     the sticky services column from ever sticking. */
  overflow: clip;
}
@media (max-width: 720px) {
  .page-top { padding-top: calc(var(--nav-h) + var(--s6)); padding-bottom: var(--s8); }
}

.page-top__title { color: var(--paper); }

/* page-top already ends with its own generous bottom padding, so a following
   .section adding a FULL section's top padding on top of that (--section is
   96–176px) doubles the gap and reads as a layout hole. Reduced, not removed:
   at 0 the first line of content sat exactly on the plum/ink colour boundary
   with no clearance at all, which read as the text falling out of the panel.
   This is the space below the boundary, in the dark, and it has to be its own
   gap — the hero's padding sits above the line and does no work down here. */
.page-top + .section { padding-top: var(--s8); }


/* ==========================================================================
   SERVICES — sticky heading beside the scrolling list
   ========================================================================== */

.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s10);
  align-items: start;
}

/* The sticky column must stay shorter than the viewport or it can never
   settle; the display heading is already well under that, but cap it so a
   very short window degrades to normal flow rather than trapping content. */
.svc-layout__aside {
  /* Matches .svc-item's padding-block, so the lead sits level with the first
     row's title instead of floating a row-height above it. Both columns start
     at the same y; only the text inside them was out of step. */
  padding-top: var(--s7);
  max-height: calc(100vh - var(--nav-h) - var(--s10));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s5);
}
.svc-layout__lead { color: var(--bone); }
.svc-layout__cta { flex: none; }

@media (max-width: 1000px) {
  .svc-layout { grid-template-columns: 1fr; gap: var(--s6); }
  /* Sticky is pointless once stacked — the heading would cover the rows. */
  .svc-layout__aside { position: static !important; max-height: none; padding-top: 0; }
}

/* ==========================================================================
   SERVICES — full seven, staggered detail rows
   ========================================================================== */

.svc-detail { border-top: var(--hairline); }

.svc-item {
  display: flex;
  gap: var(--s6);
  align-items: flex-start;
  padding-block: var(--s7);
  border-bottom: var(--hairline);
}

.svc-item__num {
  flex: none;
  width: 108px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.svc-item__body { flex: 1 1 auto; min-width: 0; }
.svc-item__name { color: var(--paper); }
.svc-item__promise { margin-top: var(--s2); color: var(--bone); max-width: 52ch; }

.svc-item__chips {
  margin-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 9px var(--s3);
  border: var(--hairline);
  border-radius: var(--r-ui);
  color: var(--bone);
}

/* Stagger — even rows shift right and pick up a faint ground tint, so
   the list reads as a deliberate zigzag rather than a flat repeat. */
.svc-item:nth-child(even) {
  background: var(--purple-08);
  margin-inline: calc(var(--s5) * -1);
  padding-inline: var(--s5);
}
.svc-item:nth-child(even) .svc-item__num { margin-top: var(--s3); }

@media (max-width: 720px) {
  .svc-item { flex-direction: column; gap: var(--s3); padding-block: var(--s5); }
  .svc-item__num { width: auto; }
  .svc-item:nth-child(even) { margin-inline: calc(var(--s3) * -1); padding-inline: var(--s3); }
  .svc-item:nth-child(even) .svc-item__num { margin-top: 0; }
}

/* ==========================================================================
   ABOUT — body copy + stats
   ========================================================================== */

.about-body { margin-top: var(--s8); max-width: var(--measure); }
.about-body p + p { margin-top: var(--s5); }
.about-body p { color: var(--bone); }

.about-stats {
  margin-top: var(--s12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--hairline);
}
@media (max-width: 720px) {
  .about-stats { grid-template-columns: 1fr; }
}

/* padding-left was 0, so every cell's content sat flush on its own left edge —
   and for cells 2 and 3 that edge IS the divider rule. The outer two stay flush
   to the page margins so the block still aligns with the text column above and
   the gutter to its right; only the inner edges, the ones that meet a rule, get
   cleared. Vertical padding raised too, so the figures are not crowded by the
   top and bottom hairlines. */
.about-stat {
  padding: var(--s7) var(--s6);
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}
.about-stats .about-stat:first-child { padding-left: 0; }
.about-stats .about-stat:last-child  { border-right: 0; padding-right: 0; }

@media (max-width: 720px) {
  /* One column: every cell is flush to the gutter, no vertical rules to clear. */
  .about-stat { border-right: 0; padding-inline: 0; }
}

.about-stat__num { color: var(--paper); }
/* `max-width: 26ch` resolved to 192px inside a 334px cell, forcing two-line
   wraps while leaving 142px of dead space beside them. The cell padding is the
   measure now; balance splits any label that still wraps into even lines
   instead of stranding one word. */
.about-stat__label {
  margin-top: var(--s3);
  color: var(--mute);
  text-wrap: balance;
}

/* ==========================================================================
   Global CTA band — self-contained here since these pages don't load
   home.css. Same structure/values as Home's closing band (M8).
   ========================================================================== */

.cta-band {
  border-top: var(--hairline);
  background-image: var(--surface-plum);
}
.cta-band__title { color: var(--paper); }
.cta-band__sub { margin-top: var(--s5); color: var(--bone); }
.cta-band__actions { margin-top: var(--s8); }

.client-card {
  flex: none;
  width: clamp(15rem, 26vw, 22rem);
  container-type: inline-size;   /* so the name can size to its own card */
  aspect-ratio: 4 / 5;
  border: var(--hairline);
  border-radius: var(--r-flat);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: var(--surface-plum);
  transition: border-color var(--d-ui) var(--e-out);
}
.client-card:hover { border-color: var(--purple); }
.client-card__num { color: var(--mute); }
/* Client names are set to the CARD, not the viewport. `.t-head` is sized for
   full-width headings and overflows a card as soon as a name carries a long
   word — "WILDFLOWER", "REMOVALS" — which pushed the text straight past the
   card edge. This stays fluid like the rest of the scale (t-display and
   t-head are already clamp-based); it is simply measured in cqw so it can
   never exceed the box that contains it. */
.client-card__name {
  color: var(--paper);
  font-size: clamp(1.15rem, 12.5cqw, 2.6rem);
  line-height: .94;
  letter-spacing: var(--tr-head);
  text-transform: uppercase;
  overflow-wrap: break-word;     /* last resort for an unusually long word */
}

@media (max-width: 720px) {
  .roster__head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .client-card { width: clamp(13rem, 68vw, 18rem); padding: var(--s4); }
}

/* ==========================================================================
   ABOUT — Meet Ben, origin, principles
   All three sit on the --ink canvas rather than the plum feature surface:
   design-system.md reserves --plum for deliberate blocks (page-top, CTA band,
   footer), and the page was carrying too much of it against too little
   content. --ink-lift raises the origin panel off the canvas without a shadow.
   ========================================================================== */

.about-ben__title { color: var(--paper); margin-top: var(--s4); max-width: 20ch; }

.about-ben__grid {
  margin-top: var(--s10);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--s6), 5vw, var(--s10));
  align-items: start;
}
@media (max-width: 900px) {
  .about-ben__grid { grid-template-columns: 1fr; gap: var(--s6); }
}

.about-ben__portrait { margin: 0; }
/* Holds the shape a real portrait will take, so dropping one in changes
   nothing about the layout. */
.about-ben__frame {
  aspect-ratio: 4 / 5;
  border: var(--hairline);
  border-radius: var(--r-flat);
  background: var(--ink-lift);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s5);
  text-align: center;
}
.about-ben__frame-note { color: var(--mute); max-width: 24ch; }
.about-ben__frame code {
  font-family: inherit;
  color: var(--bone);
  border-bottom: var(--hairline);
}

.about-ben__body > * + * { margin-top: var(--s5); }
.about-ben__body .t-sub  { color: var(--paper); }
.about-ben__body .t-body { color: var(--bone); max-width: var(--measure); }

/* --- origin ---------------------------------------------------------------
   A raised charcoal panel, not another plum block. */
.about-origin__inner {
  background: var(--ink-lift);
  border: var(--hairline);
  border-radius: var(--r-flat);
  padding: clamp(var(--s6), 5vw, var(--s10));
}
.about-origin__title { color: var(--paper); margin-top: var(--s4); }
.about-origin__body { margin-top: var(--s6); }
.about-origin__body > * + * { margin-top: var(--s5); }
.about-origin__body .t-sub  { color: var(--paper); max-width: var(--measure); }
.about-origin__body .t-body { color: var(--bone); max-width: var(--measure); }

/* --- principles ----------------------------------------------------------- */
.principles {
  margin-top: var(--s10);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--hairline);
}
@media (max-width: 1000px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .principles { grid-template-columns: 1fr; } }

.principle {
  padding: var(--s7) var(--s5);
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}
/* Outer edges stay flush with the page margins; only the inner edges, the ones
   that meet a rule, are padded off it — same treatment as .about-stat. */
.principles .principle:first-child { padding-left: 0; }
.principles .principle:last-child  { border-right: 0; padding-right: 0; }
@media (max-width: 1000px) {
  .principle { padding-inline: var(--s5); }
  .principles .principle:nth-child(odd)  { padding-left: 0; }
  .principles .principle:nth-child(even) { border-right: 0; padding-right: 0; }
}
@media (max-width: 620px) {
  .principle { border-right: 0; padding-inline: 0; }
}

.principle__num  { color: var(--mute); font-variant-numeric: tabular-nums; }
.principle__name { color: var(--paper); margin-top: var(--s3); }
.principle__text { color: var(--bone); margin-top: var(--s3); }