/* Lead statement — big emphasis statement (top) + supporting body (bottom) on one side, image on the other. */
.lead-statement__inner {
  position: relative;
  padding-block: var(--section-pad);
  align-items: stretch;
  overflow-x: hidden;
}

.lead-statement--reverse .lead-statement__statement {
  font-size: var(--text-h5);
  font-family: var(--font-display);
}

.lead-statement--reverse .lead-statement__body {
  font-size: var(--text-body-main);
  margin-bottom: var(--sp-lg);
}

.lead-statement--reverse .lead-statement__lead {
}

.lead-statement--reverse .lead-statement__media img {
  aspect-ratio: 1 / 1;
  filter: grayscale(100%);
}

.lead-statement--early .lead-statement__media {
  grid-column: 9 / -1;
}

#heritage .lead-statement__media {
  background-color: #d9d9d9;
}

.lead-statement--early .lead-statement__copy {
  grid-column: 1 / 8;
}

/* About page */
#people .lead-statement__statement {
  font-size: var(--text-h2);
  line-height: var(--lh-tight);
  font-family: var(--font-display);
}

#people .lead-statement__copy {
  justify-content: center;
}

#people .lead-statement__img {
  aspect-ratio: 4 / 3;
}

#people .lead-statement__media {
  grid-column: 4 / -1;
}

.lead-statement__copy {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3xl);
}

/* Overlay variant (custom_class "lead-statement--overlay") — copy floats vertically
   centred over the media, so a wide / full-bleed image can sit behind the statement.
   Default (no modifier) keeps the copy in normal flow beside the image. The About
   #people section uses the same treatment (its media spans 4 / -1 under the copy). */
.lead-statement--overlay .lead-statement__copy,
#people .lead-statement__copy {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lead-statement__lead .section-header__eyebrow {
  margin: 0 0 var(--sp-xs);
  font-weight: var(--fw-regular);
}
.lead-statement__statement {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  line-height: 1.22;
}
.lead-statement__statement p {
  margin: 0;
}

.lead-statement--early .lead-statement__body {
  font-size: var(--text-body-main);
  line-height: var(--lh-body);
  max-width: 100%;
}

.lead-statement--early .lead-statement__media {
  aspect-ratio: 494 / 620;
  align-self: flex-end;
}

.lead-statement__body {
  font-size: var(--text-body-main);
}
.lead-statement__body p {
  margin: 0 0 1em;
}
.lead-statement__body p:last-child {
  margin-bottom: 0;
}
.lead-statement__link {
  margin-bottom: var(--sp-md);
}
.lead-statement__media {
  grid-column: 8 / -1;
  align-self: stretch;
  position: relative; /* anchor for the optional in-media motif */
  /* aspect-ratio: 1133 / 749; */
}
.lead-statement__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.lead-statement__motif {
  position: absolute;
  top: 0;
  right: 0;
  --motif-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-skyline);
}

/* Frame 20998 (About Us, section_id "our-story") — white dot-motif row, bottom-right, per the "TTW New Design" Figma. */
#our-story .lead-statement__motif {
  top: auto;
  bottom: 0;
  right: var(--gutter);
  color: var(--color-white);
  --motif-size: clamp(3.5rem, 6vw, 6.25rem);
  z-index: 1;
}

.lead-statement--simple-section .lead-statement__copy {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
      gap: var(--grid-gap);
      align-items: start;
}
.lead-statement--simple-section .lead-statement__lead {
      display: contents; /* let eyebrow + statement sit directly on the grid */
}
.lead-statement--simple-section .lead-statement__lead .section-header__eyebrow,
.lead-statement--simple-section .lead-statement__statement {
      grid-column: 1 / 8;
}
.lead-statement--simple-section .lead-statement__foot {
      grid-column: 10 / -1;
      grid-row: 2;
}

.lead-statement--simple-section .lead-statement__foot .lead-statement__body {
      font-size: var(--text-body-main);
      line-height: var(--lh-body);
}


/* ACF "Inside image — top-right" placement: motif sits in the top-right of the image.
   Colour defaults to white; a chosen colour comes through as an inline style on the element. */
.lead-statement__motif--media {
  position: absolute;
  top: clamp(0.75rem, 1.5vw, 1.25rem);
  right: clamp(0.75rem, 1.5vw, 1.25rem);
  bottom: auto;
  left: auto;
  z-index: 1;
  --motif-size: clamp(2.5rem, 4.5vw, 4rem);
  color: var(--color-white);
}

/* Reverse modifier (image left, copy right) — via custom_class "lead-statement--reverse".
   Copy spans the full 12-col grid and becomes a nested 12-col grid (sharing row 1 with the
   image, which stays at 1/5) so the lead + foot sit on the real grid lines: lead 6/9, foot
   staggered right to 8/12. They overlap at column 8, so the foot naturally drops to row 2. */
.lead-statement--reverse .lead-statement__copy {
  grid-column: 1 / -1;
  grid-row: 1;
  order: 2;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
  gap: var(--grid-gap);
  align-content: space-between;
}
.lead-statement--reverse .lead-statement__media {
  grid-column: 1 / 5;
  grid-row: 1;
  order: 1;
}
.lead-statement--reverse .lead-statement__lead {
  grid-column: 6 / 10;
}
.lead-statement--reverse .lead-statement__foot {
  grid-column: 6 / -1;
  grid-row: 2;
}

/* Simple modifier (no image) — statement left (1/7), foot pushed right (10/-1),
   both on the 12-col grid. custom_class "lead-statement--simple". */
.lead-statement--simple .lead-statement__copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.lead-statement--simple .lead-statement__lead {
  display: contents; /* let eyebrow + statement sit directly on the grid */
}
.lead-statement--simple .lead-statement__lead .section-header__eyebrow,
.lead-statement--simple .lead-statement__statement {
  grid-column: 1 / 7;
}
.lead-statement--simple .lead-statement__foot {
  grid-column: 10 / -1;
}

/* Only heading section */

.lead-statement--only-heading .lead-statement__copy {
  grid-column: 1 / 10;
}

/* Services variant (custom_class "lead-statement--services") — per the "Our Integrated
   Services" design: copy left (eyebrow + statement + link at top, body pinned to the
   bottom), a narrow secondary image mid-grid, the main image right, dot-motif strip
   bottom-right. Set motif placement to "Grid strip — bottom-right". */
.lead-statement--services .lead-statement__copy {
  grid-column: 1 / 5;
  justify-content: flex-start;
  gap: var(--sp-md);
}
.lead-statement--services .lead-statement__foot {
  display: contents; /* lift body + link onto the copy flex column so they can be ordered */
}
.lead-statement--services .lead-statement__lead { order: 0; }
.lead-statement--services .lead-statement__link { order: 1; }
.lead-statement--services .lead-statement__body {
  order: 2;
  margin-top: auto; /* pin body to the bottom of the column */
  max-width: none;
  font-size: var(--text-body-main);
  line-height: var(--lh-body);
}
.lead-statement--services .lead-statement__statement {
  font-size: var(--text-h5);
  line-height: var(--lh-snug);
  font-family: var(--font-display);
  /* font-weight: var(--fw-bold); */
}
.lead-statement--services .lead-statement__media {
  grid-column: 8 / -1;
  align-self: start;
  aspect-ratio: 1 / 1;
}
.lead-statement--services .lead-statement__media--secondary {
  grid-column: 6 / 9;
  align-self: end;
  aspect-ratio: 363 / 629;
  grid-row: 1;                  /* was 2 — no separate row means no empty row to leave a gap */
  position: absolute;           /* was relative — out of flow, so it reserves no height */
  transform: translateY(40%);   /* was -50% — keeps it centred on the copy baseline, same spot as before */
}
.lead-statement--services .lead-statement__media--secondary .lead-statement__img {
  aspect-ratio: 3 / 5;
  filter: grayscale(1); /* B/W treatment per the design */
}
/* Dot-motif row now lives inside .lead-statement__media (the main image), pinned to its
   bottom-left. 6 dots @ ~99px, fluid. */
.lead-statement--services .lead-statement__motif {
  top: auto;
  bottom: calc(-1 * var(--sp-sm));
  left: 0;
  right: auto;
  color: var(--color-skyline);
  --motif-size: clamp(3.5rem, 6vw, 6.1875rem);
  z-index: 1;
  transform: translateY(100%); /* lift the motif row up so it sits just inside the image */
}

.lead-statement--services .lead-statement__media--primary {
  --media-edge: clamp(16px, 2vw, 32px); /* gap from the viewport edge */
  position: absolute;
  grid-column: auto;
  top: var(--section-pad);
  left: auto;
  right: calc((var(--container-max) + 2 * var(--container-pad)) / 2 - 50vw + var(--media-edge));
  width: 35%; /* fluid; scales with viewport */
  max-width: 42.4375rem; /* 679px cap */
}

/* Primary media pinned top-right and bled OUT of the container, close to the viewport edge.
   right = half the container's overhang beyond the container box, minus 50vw, +a small gap:
   (container-full)/2 - 50vw pulls it to the viewport edge; --media-edge insets it back a touch. */
.lead-statement__inner .lead-statement__media--primary {
}
/* Let the primary media bleed past the container's clipped edge. */
.lead-statement__inner.lead-statement--services {
  overflow-x: visible;
}

@media (max-width: 900px) {
  .lead-statement__copy,
  .lead-statement--reverse .lead-statement__copy {
    grid-column: 1 / -1;
    gap: 2rem;
  }
  /* Undo the reverse desktop overlay: stack copy under the image, lead/foot full width. */
  .lead-statement--reverse .lead-statement__copy {
    grid-row: auto;
    grid-template-columns: 1fr;
    align-content: start;
  }
  .lead-statement--reverse .lead-statement__lead,
  .lead-statement--reverse .lead-statement__foot {
    grid-column: 1 / -1;
  }
  .lead-statement__media,
  .lead-statement--reverse .lead-statement__media {
    grid-column: 1 / -1;
    margin-top: 2rem;
  }
  .lead-statement--reverse .lead-statement__media {
    grid-row: auto;
  }
  .lead-statement--reverse .lead-statement__foot {
    max-width: none;
    margin-left: 0;
  }
  /* Simple: stack statement over foot full width. */
  .lead-statement--simple .lead-statement__lead .section-header__eyebrow,
  .lead-statement--simple .lead-statement__statement,
  .lead-statement--simple .lead-statement__foot,
  .lead-statement--simple-section .lead-statement__lead .section-header__eyebrow,
  .lead-statement--simple-section .lead-statement__statement,
  .lead-statement--simple-section .lead-statement__foot {
    grid-column: 1 / -1;
  }

  /* Services: stack copy over both images, full width. */
  .lead-statement--services .lead-statement__copy,
  .lead-statement--services .lead-statement__media,
  .lead-statement--services .lead-statement__media--secondary {
    grid-column: 1 / -1;
  }
  .lead-statement--services .lead-statement__body {
    margin-top: 0;
  }
  .lead-statement--services .lead-statement__media {
    margin-top: 2rem;
  }
  .lead-statement__inner .lead-statement__media--primary {
    position: static;
    width: auto;
  }
  .lead-statement--services .lead-statement__media--secondary {
    max-width: 65%;
    margin-top: 1rem;
    position: static;   /* back into flow when stacked */
    transform: none;
    grid-row: auto;
  }
}