/* 04-gallery-strip-statement-about.css — the home statement and about grid.
   Filename retained to preserve the cascade order and cached page links. */

/* STATEMENT — the words alone, on the page's own ground. It used to sit on a
   --bg-raised band, which made it the one section announcing itself with a
   second colour; the line is emphatic enough without a box around it. Keeps
   only its doubled vertical space, the same as the hero. */
.statement {
  padding: calc(var(--section-space) * 2) var(--gutter);
  text-align: center;
}
.statement-text {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--text-display);
  line-height: 0.9;
  letter-spacing: -0.03em;
  max-width: 1400px;
  margin: 0 auto;
}
.statement-text .statement-accent {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}
.statement-foot {
  margin-top: var(--block-space);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* ===========================================================
   ABOUT GRID (about / services pages)
   NO horizontal padding — parent .section already provides it.
   =========================================================== */
.text-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
}
.text-columns p {
  font-size: var(--text-body-large);
  margin-bottom: var(--item-space);
}
.text-columns dl { font-family: var(--sans); }
.text-columns dt {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: var(--item-space);
  margin-bottom: var(--tight-space);
}
.text-columns dt:first-child { margin-top: 0; }
.text-columns dd {
  font-family: var(--sans);
  font-size: var(--text-body-large);
}