/* =========================================================================
   REDPOINT® — V3 layout layer
   Same tokens, same two type families, same Signal Red / Ink / Bone palette.
   What changes is composition: sections no longer share one skeleton, and
   every fold carries an image so the page stops reading as a wall of copy.
   Loaded after main.css + v2.css; those files are untouched.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ALIGNMENT REPAIRS (site-wide)
   ------------------------------------------------------------------------- */

/* 1a. Section-head label.
   The label was pushed down by a flat 0.7em, which is ~8px — far less than
   the H2's own cap offset, so it floated above the heading's cap line at
   every width. Deriving the offset from --fs-h2 keeps the two optically
   aligned as the heading scales. */
.sechead__label { padding-top: calc(var(--fs-h2) * 0.115); }
/* Heads whose right column opens with a label or a rule need no offset. */
.sechead--flush .sechead__label { padding-top: 0; }

/* 1b. Stat figures.
   "+" (0.42em) and word units like "Years" (0.26em) were baseline-aligned
   inside one flex row, so a two-word unit shunted the figure sideways and
   the caption below started at a different height in each column. The unit
   word now sits on its own line under the figure: four columns, one rhythm. */
.stat { display: flex; flex-direction: column; }
.stat__fig { flex-wrap: nowrap; align-items: baseline; }
.stat__unit--word {
  display: block;
  width: 100%;
  margin-left: 0;
  margin-top: 0.5rem;
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--signal);
}
/* Caption pinned to the bottom of the cell so every caption in the row
   starts on the same line, whether or not the figure carries a word unit. */
.stat__txt { margin-top: auto; padding-top: 0.9rem; }

/* 1c. Testimonials.
   The stepped 3-up (0 / 6rem / 12rem top offsets) read as three columns
   that had slipped out of register — the attribution rules landed at three
   unrelated heights. Tops now align and the rules are pushed to a common
   baseline, so the row scans as one band. */
@media (min-width: 900px) {
  .tstm > :nth-child(2),
  .tstm > :nth-child(3) { margin-top: 0; }
  .tstm figure { display: flex; flex-direction: column; height: 100%; }
  .tstm__by { margin-top: auto; }
}

/* 1d. Footer CTA.
   Heading and supporting copy were bottom-aligned, which left the paragraph
   hanging with no relationship to either the heading or the button. Both
   columns now hang from a shared rule at the top. */
.foot__cta { border-top: 1px solid var(--rule-inv); padding-top: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 980px) {
  .foot__cta { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
  .foot__cta > :last-child { padding-top: 0.5rem; }
}

/* 1e. Hero meta row — three labels on an even baseline instead of a
   free-flowing wrap, ruled off from the headline beneath. */
.hero__meta {
  gap: 0.75rem 2.5rem;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

/* -------------------------------------------------------------------------
   2. SECTION HEAD — label and action on one baseline
   Replaces the label-in-a-240px-column pattern. The heading starts at the
   page margin (no indent void), and the intro copy sits in a second column
   beside it rather than under a hanging indent.
   ------------------------------------------------------------------------- */
.shead {
  padding-top: clamp(0.9rem, 1.6vw, 1.25rem);
  border-top: 0;
}

.shead__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* Index figure ("04", "12") as the right-hand counterweight to the label. */
.shead__ix {
  font-family: var(--ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}
.ink-sec .shead__ix { color: rgba(245, 241, 236, 0.5); }

.shead__body {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: end;
}
@media (min-width: 940px) {
  .shead__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  /* A head with no intro copy keeps the heading on its own measure. */
  .shead__body--solo { grid-template-columns: minmax(0, 1fr); }
}
.shead__intro > p { max-width: 46ch; }
.shead__intro > p + p { margin-top: 1.1rem; }
.shead__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* -------------------------------------------------------------------------
   3. BAND — image one side, copy the other, direction alternating
   The workhorse. Every other fold flips, so consecutive sections cannot
   read as the same layout twice.
   ------------------------------------------------------------------------- */
.band {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Copy first in the source (it leads for a screen reader); the image is
     pulled to the left column on flipped bands. */
  .band--rev .band__media { order: -1; }
  .band--lean { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.band__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.band--tall .band__media { aspect-ratio: 4 / 4.6; }
.band--wide .band__media { aspect-ratio: 16 / 9; }

.band__media img,
.band__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.94) brightness(0.97);
  transition: transform 1s var(--ease), filter .8s var(--ease);
}
.band__media:hover img { transform: scale(1.03); filter: none; }

/* Route story: documentary climbing photography with the redpoint marker
   remaining as the sole graphic layer. */
.band__media--route { background: var(--ink); }
.band__media--route .band__route-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-position: center;
  filter: contrast(1.08) saturate(0.78) brightness(0.72);
}
.band__media--route:hover .band__route-photo {
  transform: scale(1.03);
  filter: contrast(1.1) saturate(0.88) brightness(0.8);
}

/* Caption strip along the bottom of the frame. */
.band__cap {
  position: absolute;
  z-index: 2;
  inset: auto 1.1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
  align-items: baseline;
  color: var(--bone);
}
.band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(35,35,35,.28) 0%, rgba(35,35,35,0) 34%, rgba(35,35,35,.72) 100%);
}
.band__media--route::after {
  background:
    linear-gradient(to bottom, rgba(35,35,35,.22) 0%, rgba(35,35,35,.04) 35%, rgba(35,35,35,.76) 100%);
}

.band__body > * + * { margin-top: 1.15rem; }
.band__body .band__h { margin-bottom: 0.35rem; }
.band__body p { max-width: 44ch; color: var(--ink-80); }
.ink-sec .band__body p { color: rgba(245, 241, 236, 0.72); }
.band__body .btn { margin-top: clamp(1rem, 2vw, 1.75rem); }

/* A short ruled list of facts — replaces a paragraph where the content is
   really a set of discrete commitments. */
.band__facts { border-top: 1px solid var(--rule); margin-top: clamp(1.5rem, 3vw, 2rem); }
.ink-sec .band__facts { border-color: var(--rule-inv); }
.band__facts li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
}
.ink-sec .band__facts li { border-color: var(--rule-inv); }
.band__facts b {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--signal);
}

/* -------------------------------------------------------------------------
   4. FULL-BLEED BAND — image runs to the viewport edge on one side
   ------------------------------------------------------------------------- */
.bleed { overflow: hidden; }
.bleed__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) {
  .bleed__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Push the media past the wrap padding to the window edge. */
  .bleed__media { margin-right: calc(var(--pad) * -1); }
  .bleed--rev .bleed__media { order: -1; margin-right: 0; margin-left: calc(var(--pad) * -1); }
}
.bleed__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}
.bleed__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(.94); }

/* -------------------------------------------------------------------------
   5. IMAGE CARDS — the capability set, shown rather than listed
   ------------------------------------------------------------------------- */
.icards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
}
@media (min-width: 820px) { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.icard { display: flex; flex-direction: column; min-width: 0; }
.icard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.icard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(.92) brightness(.9);
  transition: transform 1s var(--ease), filter .8s var(--ease);
}
.icard:hover .icard__media img { transform: scale(1.04); filter: contrast(1.05) saturate(1) brightness(1); }
.icard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(35,35,35,.30) 0%, rgba(35,35,35,.02) 40%, rgba(35,35,35,.84) 100%);
}
.icard__n {
  position: absolute;
  z-index: 2;
  left: 1.15rem;
  top: 1rem;
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--signal);
}
.icard__ttl {
  position: absolute;
  z-index: 2;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 0.95rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--bone-hi);
}
.icard__txt {
  margin-top: 1.05rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-80);
}
.ink-sec .icard__txt { border-color: var(--rule-inv); color: rgba(245, 241, 236, 0.72); }

/* -------------------------------------------------------------------------
   6. FEATURE GRID — one lead project, two supporting
   ------------------------------------------------------------------------- */
.feature { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 1020px) {
  .feature { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; }
  /* Two equal rows that share the lead card's full height — no orphaned gap
     under the second frame. */
  .feature__side { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-rows: 1fr 1fr; }
  .feature__lead .pcard__box { height: 100%; }
  .feature__side .pcard { display: flex; }
  .feature__side .pcard__box { aspect-ratio: auto; height: 100%; width: 100%; }
}

.pcard__box {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.feature__lead .pcard__box { aspect-ratio: 4 / 4.5; }
.feature__side .pcard__box { aspect-ratio: 16 / 9; }
.pcard__box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(.94) brightness(.92);
  transition: transform 1s var(--ease), filter .8s var(--ease);
}
.pcard:hover .pcard__box img { transform: scale(1.035); filter: contrast(1.06) saturate(1) brightness(1); }
.pcard__box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(35,35,35,.34) 0%, rgba(35,35,35,.02) 38%, rgba(35,35,35,.82) 100%);
}
/* Place and year, top-right of the frame. */
.pcard__coord {
  position: absolute;
  z-index: 2;
  right: 1.1rem;
  top: 0.95rem;
  font-family: var(--ui);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 241, 236, 0.72);
}
/* Name and index sit over the frame, on one baseline. */
.pcard__over {
  position: absolute;
  z-index: 2;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  color: var(--bone-hi);
}
.pcard__over h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.feature__lead .pcard__over h3 { font-size: clamp(1.75rem, 3.2vw, 2.9rem); }

/* -------------------------------------------------------------------------
   7. PLACES — the two offices, shown side by side
   ------------------------------------------------------------------------- */
.places { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 820px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.place__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}
.place__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(.9) brightness(.94);
  transition: transform 1s var(--ease);
}
.place:hover .place__media img { transform: scale(1.03); }
.place__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(35,35,35,.2), rgba(35,35,35,.62));
}
.place__city {
  position: absolute;
  z-index: 2;
  left: 1.15rem;
  bottom: 0.9rem;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--bone-hi);
}
.place__clock {
  position: absolute;
  z-index: 2;
  right: 1.15rem;
  top: 0.9rem;
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(245, 241, 236, 0.9);
}
.place__body {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.ink-sec .place__body { border-color: var(--rule-inv); }
.place__role { font-size: var(--fs-sm); font-weight: 500; }
.place__txt { margin-top: 0.4rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); max-width: 34ch; }
.ink-sec .place__txt { color: rgba(245, 241, 236, 0.62); }

/* -------------------------------------------------------------------------
   8. HERO — a full-bleed Manchester aerial carrying the headline
   ------------------------------------------------------------------------- */
/* A quiet line of bone between the fixed nav and the top edge of the image.
   Without it the ink logo and routes sit straight on the photograph. */
.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  align-items: baseline;
  padding-bottom: clamp(.9rem, 2vw, 1.4rem);
}

/* Edge to edge: .hero carries no wrap of its own, so the stage is already the
   full viewport width. Height is capped in rem so the photograph does not
   become a letterbox on a tall desktop display. */
.hero__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(26rem, 68vh, 46rem);
  height: clamp(26rem, 68svh, 46rem);
  background: var(--ink);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Weighted low in the frame: the source has a flat overcast band across its
     top third, and holding the crop down trades it for the sunlit skyline the
     headline actually wants to sit against. */
  object-position: center 74%;
  /* The golden hour is the reason to use this frame — a flat grey wash over it
     reads as a stock photograph, so the warmth is left intact and the grade
     below does the darkening instead. */
  filter: saturate(1.05) contrast(1.08);
}

/* Two axes. The vertical grade sinks the base of the frame so the headline has
   a ground; the horizontal grade weights the type side without closing down the
   sunlit skyline on the right.
   The mid stops are set from a measurement, not by eye: the brightest source
   pixel under the h1 is an almost-white sunlit façade, and at the headline's
   top line (63% up the frame) the grade has to reach ~0.59 to keep bone above
   4.5:1 there. Slackening these stops drops that corner under the 3:1 floor. */
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(22, 20, 18, .94) 0%,
      rgba(22, 20, 18, .90) 25%,
      rgba(22, 20, 18, .80) 46%,
      rgba(22, 20, 18, .56) 66%,
      rgba(22, 20, 18, .24) 82%,
      rgba(22, 20, 18, .06) 93%,
      rgba(22, 20, 18, 0) 100%),
    linear-gradient(to right,
      rgba(22, 20, 18, .32) 0%,
      rgba(22, 20, 18, .12) 45%,
      rgba(22, 20, 18, 0) 88%);
}

.hero__over {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding-bottom: clamp(1.75rem, 3.6vw, 3.25rem);
  color: var(--bone-hi);
}

/* Grid rather than margins between the headline and the action row. .rvl carries
   a negative bottom margin so descenders clear its overflow clip, which makes a
   margin-based gap here depend on collapsing against that negative value. A grid
   item establishes its own formatting context, so the row gap is exactly what it
   says regardless of what the reveal wrapper does. */
.hero__over > .wrap {
  display: grid;
  gap: clamp(1.4rem, 2.8vw, 2.25rem);
}

/* Two lines of display type over a photograph need a little less scale than
   the same lines on bare bone — 9vw against --fs-mega's 10.4vw. */
.site-v2 .hero__h1 {
  font-size: clamp(2.4rem, 9vw, 9.5rem);
  max-width: 20ch;
  /* Edge definition only — the grade carries the contrast. A wider blur than
     this reads as a glow and softens the display weight. */
  text-shadow: 0 1px 16px rgba(16, 14, 12, .3);
}

/* The lead and CTA form one compact, left-aligned action block. Stacking them
   preserves the natural reading order and stops the button floating between
   the supporting copy and the far edge of a wide photograph. */
.hero__act {
  display: flex;
  flex-direction: column;
  gap: clamp(.9rem, 1.4vw, 1.15rem);
  align-items: flex-start;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.34;
  letter-spacing: -.01em;
  max-width: 30ch;
  color: rgba(245, 241, 236, .88);
}

/* The argument returns to the cream ground. Label left, measure right — the
   same two-column head the sections below the hero use. */
.hero__note {
  display: grid;
  gap: .85rem;
  margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
}
.hero__note p { max-width: 62ch; color: var(--slate); }

@media (min-width: 900px) {
  .hero__note {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
  .hero__note .label { padding-top: .55em; }
}

/* A taller stage keeps the compact action block off the bottom edge of the
   photograph on narrow screens. */
@media (max-width: 720px) {
  .hero__stage {
    height: clamp(29rem, 76vh, 40rem);
    height: clamp(29rem, 76svh, 40rem);
  }
  .hero__act { gap: 1.1rem; }
  .hero__lead { max-width: 26ch; }

  /* The grade has to be re-tuned, not reused, at this width. Cover is
     height-constrained in a portrait frame, so the whole source height is in
     shot — sky across the top, city along the bottom — and the type block sits
     at ~37% up instead of the ~63% it occupies on a landscape crop. Under the
     desktop stops that puts the entire city in the .56–.94 band and renders it
     as a black mass. These stops compress the dark ground into the bottom
     45% the type actually needs and open the frame above it. */
  .hero__stage::after {
    background:
      linear-gradient(to top,
        rgba(22, 20, 18, .93) 0%,
        rgba(22, 20, 18, .88) 18%,
        rgba(22, 20, 18, .76) 34%,
        rgba(22, 20, 18, .50) 48%,
        rgba(22, 20, 18, .28) 62%,
        rgba(22, 20, 18, .12) 78%,
        rgba(22, 20, 18, .04) 100%),
      /* A 390px frame is narrow enough that a strong left grade just dims the
         whole photograph, so this stays light. */
      linear-gradient(to right,
        rgba(22, 20, 18, .18) 0%,
        rgba(22, 20, 18, .06) 45%,
        rgba(22, 20, 18, 0) 80%);
  }
}

/* Marquee frames were 4:5 and 400px wide, which made the hero 1500px tall
   before a visitor reached any content. Landscape crops, shorter strip. */
.hero .marquee { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.marquee .frame { width: clamp(240px, 24vw, 360px); }
.marquee .frame__box { aspect-ratio: 16 / 11; }

/* A long scheme name ("One Clapham Junction") wrapped to two lines and ran
   under the partner label beside it. Give the name the room it needs and let
   the partner drop to its own line rather than overlap. */
.marquee .frame__tag { flex-wrap: wrap; row-gap: 0.25rem; }
.marquee .frame__tag .label:first-child { flex: 1 1 100%; }
.marquee .frame__tag .label:last-child { color: rgba(245, 241, 236, 0.45); }

/* Numbers band sits beside an image, so the stats stay two-up rather than
   stretching to four narrow columns. */
@media (min-width: 900px) {
  .stats--2col { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   9. UTILITIES
   ------------------------------------------------------------------------- */
/* A quieter background than bone for a band that needs to separate from the
   folds either side without going to full ink. */
.putty-sec { background: var(--putty); }
.putty-sec .wcard { border-color: rgba(35, 35, 35, 0.16); }

.stack-sm > * + * { margin-top: 0.9rem; }
.stack > * + * { margin-top: 1.25rem; }

/* Section that butts straight onto the one above it — no doubled padding. */
.section--flush-top { padding-top: 0; }

/* About — a wider editorial headline balances the full hero canvas. */
.about-story__headline {
  max-width: none;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  font-size: clamp(3rem, 5.8vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

/* Balance the story copy with a location-relevant property image. */
.about-story__media .frame__media img {
  object-position: center;
}
.about-story__media .frame__box { aspect-ratio: 4 / 3; }
.about-story__media .frame__media::after {
  background: linear-gradient(
    to bottom,
    rgba(35, 35, 35, 0.28) 0%,
    rgba(35, 35, 35, 0.02) 42%,
    rgba(35, 35, 35, 0.22) 100%
  );
}

/* -------------------------------------------------------------------------
   10. RULE EDIT — reserve horizontal lines for functional lists and data
   ------------------------------------------------------------------------- */

/* Page framing, image captions and editorial cards already have enough
   separation through spacing, scale and background contrast. */
.site-v2 .phead__row,
.site-v2 .marquee,
.site-v2 .frame__cap,
.site-v2 .pillar,
.site-v2 .stat,
.site-v2 .tstm__by,
.site-v2 .icard__txt,
.site-v2 .place__body,
.site-v2 .project-v2,
.site-v2 .project-v2--hero,
.site-v2 .catalogue-v2__section + .catalogue-v2__section,
.site-v2 .legal h2,
.site-v2 .foot__cta {
  border-top: 0;
}

.site-v2 .phead__row,
.site-v2 .marquee {
  border-bottom: 0;
}

.site-v2 .phead__row { padding-bottom: 0; }

.site-v2 .frame__cap,
.site-v2 .tstm__by,
.site-v2 .icard__txt,
.site-v2 .place__body,
.site-v2 .project-v2,
.site-v2 .project-v2--hero,
.site-v2 .legal h2 { padding-top: 0; }

/* Long process/principle lists become quiet surface blocks. FAQ, timelines,
   tables, form fields and the portfolio index keep their useful dividers. */
.site-v2 .values {
  border-top: 0;
  gap: 0.6rem;
}
.site-v2 .value {
  border-bottom: 0;
  border-radius: 4px;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  background: rgba(228, 221, 209, 0.34);
}
.site-v2 .ink-sec .value { background: rgba(245, 241, 236, 0.055); }
.site-v2 .putty-sec .value { background: rgba(245, 241, 236, 0.42); }
.site-v2 .legal h2 { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* -------------------------------------------------------------------------
   11. ABOUT — editorial beliefs + typographic office field
   ------------------------------------------------------------------------- */

.about-beliefs { background: var(--putty); }
.about-beliefs__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
}
.about-beliefs__head {
  display: block;
}
.about-beliefs__media {
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bone-hi);
}
.about-beliefs__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about-beliefs__list {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.about-belief {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: 5px;
  background: rgba(251, 249, 245, 0.62);
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.about-belief:hover {
  background: var(--bone-hi);
  transform: translateX(0.4rem);
}
.about-belief__n {
  padding-top: 0.35rem;
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--signal);
}
.about-belief h2 {
  max-width: none;
  font-size: clamp(1.55rem, 2.25vw, 2.35rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.about-belief p {
  max-width: 48ch;
  margin-top: 0.85rem;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--ink-80);
}

.about-offices {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #232323;
}
.about-offices__layout {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding-top: clamp(1.5rem, 5vw, 3rem);
  padding-bottom: 0;
}
.about-offices__head {
  display: grid;
  gap: 0.75rem;
}
.about-offices__head p {
  max-width: 24ch;
  font-size: clamp(1.1rem, 3.8vw, 1.75rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.045em;
}
.about-offices__cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, 2vw, 1.25rem);
}
.about-offices__cities li {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
  font-size: clamp(1rem, 3.2vw, 1.6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.065em;
}
.about-offices__cities li span {
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--signal);
}
.about-offices__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #232323;
}
.about-offices__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(27, 27, 27, 0.99) 0%,
    rgba(27, 27, 27, 0.94) 38%,
    rgba(27, 27, 27, 0.64) 68%,
    rgba(27, 27, 27, 0) 100%
  );
}
.about-offices__visual {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: saturate(0.96) contrast(1.02);
}

@media (min-width: 900px) {
  .about-beliefs__layout {
    grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
    grid-template-areas:
      ". head"
      "media list";
    column-gap: clamp(3rem, 7vw, 7rem);
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
  }
  .about-beliefs__head {
    grid-area: head;
    padding-left: 0;
  }
  .about-beliefs__media {
    grid-area: media;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
  .about-beliefs__list { grid-area: list; }

  .about-offices__layout {
    grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr);
    gap: 0;
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
    padding-top: clamp(3rem, 5vw, 5rem);
  }
  .about-offices__head { gap: 1.5rem; }
  .about-offices__head p { font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
  .about-offices__cities { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .about-offices__cities li {
    gap: clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(1.75rem, 3.2vw, 3.25rem);
  }
  .about-offices__cities li span {
    width: 0.55rem;
    height: 0.55rem;
  }
}

@media (min-width: 1280px) {
  .about-belief h2 { white-space: nowrap; }
}

@media (max-width: 560px) {
  .about-belief { grid-template-columns: 1fr; }
  .about-belief__n { padding-top: 0; }
  .about-offices__layout { padding-top: clamp(1.15rem, 5vw, 1.75rem); }
  .about-offices__head p { font-size: clamp(1rem, 5vw, 1.25rem); }
  .about-offices__cities li { font-size: clamp(0.9rem, 4.6vw, 1.15rem); }
  .about-offices__media::before { height: 48%; }
}

/* -------------------------------------------------------------------------
   12. TESTIMONIALS — the fold carries a photograph
   The quotes previously sat on bare bone, running straight on from The
   Numbers with no top padding of their own. Backing them with a photograph
   of a room asking questions gives the fold its own ground. Six long quotes
   cannot compete with a busy scene, though, so the picture is pushed almost
   all the way under: desaturated into the Ink/Bone palette, pre-darkened so
   the screen and window highlights cannot blow out behind type, and graded
   back under a heavy ink wash. It reads as texture and depth, not as a
   scene — legible first, atmospheric second.
   ------------------------------------------------------------------------- */
.tstm-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* .section--flush-top zeroed this so the fold could share bone with the
     section above. A dark band is its own object and needs the air back. */
  padding-top: var(--sec-y);
}

/* Pseudo-element rather than an <img>: this is atmosphere, not content, and
   there is nothing here for a screen reader to announce. Mobile gets the
   portrait crop — a landscape frame at `cover` on a tall column throws away
   everything but a strip of the middle. */
.tstm-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/testimonials/audience-question-mobile.jpg");
  background-size: cover;
  background-position: 50% 40%;
  /* Strip the room's greens and blues so the picture stays inside the two
     brand colours instead of opening a third colour story. */
  filter: grayscale(0.92) contrast(1.08) brightness(0.72);
}

/* The wash. One radial so the exposure is predictable: lightest behind the
   section head, closing to near-flat Ink at the edges — which is also how it
   hands off to the footer below, with no seam between two dark blocks. */
.tstm-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    112% 82% at 50% 24%,
    rgba(35, 35, 35, 0.62) 0%,
    rgba(35, 35, 35, 0.88) 62%,
    rgba(35, 35, 35, 0.95) 100%
  );
}

/* Content sits above both layers. Negative z-index would already put them
   behind in-flow children; this makes it explicit and survives any later
   positioning inside the fold. */
.tstm-sec > .wrap { position: relative; z-index: 1; }

@media (min-width: 700px) {
  .tstm-sec::before {
    background-image: url("../img/testimonials/audience-question.jpg");
    background-position: 50% 46%;
  }
}

/* The attribution rule at rgba(bone,.16) all but vanishes over a photograph
   the way it does not over flat ink — the name needs to stay pinned to its
   quote, so it is lifted for this fold only. */
.tstm-sec .tstm__by,
.tstm-sec .tstm-group__label { border-color: rgba(245, 241, 236, 0.26); }

/* Where a browser cannot composite the filter cheaply — and for anyone who
   has asked for less — the fold falls back to the flat ink band it would
   otherwise have been. */
@media (prefers-reduced-transparency: reduce) {
  .tstm-sec::before { display: none; }
  .tstm-sec::after { background: var(--ink); }
}