/* Statement band — big-serif statement on the 12-col grid (no display:block override).
   Two variants, switched by whether an eyebrow is present (:has):
   • eyebrow top-left + first-line indent — the Water "Who we are" intro;
   • dot-motif top-right, no indent       — the Alabaster "Our scale…" pull. */
.statement {
  padding-block: var(--section-pad);
  --em-color: var(--color-land);
  height: 100vh;
  background-color: var(--color-alabaster);
  display: flex;
  align-items: center;
  justify-content: center;
}

.statement--normal .statement, .statement--career .statement {
  height: auto;
}
/* Default fill is opaque alabaster so the band stays solid above the fixed reveal
   footer. When a colour is chosen in the ACF "Section background" field the section
   is wrapped in .section-bg--*; clear the fill there so the wrapper's colour shows. */
.section-bg .statement {
  background-color: transparent;
}
.section-bg--water .statement {
  --em-color: var(--color-skyline);
}

/* Stay on .container.grid; align everything to the top of the first row. */
.statement .container {
  align-items: start;
  row-gap: 0;
}

/* Dot-motif: top-right — shown only on the no-eyebrow (pull) variant. */
.statement__motif {
  grid-column: 10 / -1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}
.statement .container:has(.statement__eyebrow) .statement__motif {
  display: none;
}

/* Eyebrow: top-left, sitting in the first line's indent zone. */
.statement__eyebrow {
  grid-column: 2 / -1;
  grid-row: 1;
  align-self: start;
  margin: 0;
  opacity: 0.9;
}

/* Statement text — runs from col 3 to the right edge; serif display face. */
.statement__text {
  grid-column: 2 / 12;
  grid-row: 1;
  font-family: var(--font-display, serif);
  font-size: var(--text-h3, 70px);
  line-height: var(--lh-quote, 1.3);
}
.statement__text p {
  margin: 0;
}


.statement--normal .statement__text {
  grid-row: 2;
  margin-top: var(--sp-xl);
}

.statement--normal .dot-motif.statement__motif {
  grid-column: 11 / 12;
}

.statement--simple .statement__text {
  grid-column: 5 / 12;
  grid-row: 2;
  margin-top: var(--sp-xl);
}
/* Opt-in first-line indent — add custom_class "statement--indent" on the section
   row. Matches the design's "Who we are" intro where the statement starts inset
   past the eyebrow. text-indent only affects the first line by nature. */
.statement--indent .statement__text {
  text-indent: clamp(150px, 17vw, 300px);
  margin-top: calc(-1 * var(--sp-sm));
}
/* text-indent inherits into the word-reveal units (each an inline-block), which
   would indent every word individually. Reset it so only the first line indents. */
.statement--indent .statement__text .tr-unit {
  text-indent: 0;
}

/* Career */
.statement--career .statement__motif {
  grid-column: 11 / 11;
  grid-row: 1;
  --motif-size: clamp(60px, 6.5vw, 99px);
  width: var(--motif-size);
  height: var(--motif-size);
}

.statement--career .statement__text {
  grid-row: 2;
  margin-top: var(--sp-xl)
}

/* Link below the statement, aligned to the text column. */
.statement__link {
  grid-column: 2 / -1;
  grid-row: 2;
  justify-self: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.statement--fullwidth {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.statement--fullwidth .statement .statement__text {
  grid-column: 1 / -1;
}

@media (max-width: 1536px) {
  .statement--simple .statement__text {
    grid-column: 2 / 12;
  }

  .statement {
    height: auto;
    min-height: 50vh;
  }
}

@media (max-width: 1024px) {
  .statement {
    height: auto;
    min-height: 50vh;
  }
}

@media (max-width: 768px) {
  .statement__eyebrow,
  .statement__text,
  .statement__link {
    grid-column: 1 / -1;
  }
  .statement__motif {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .statement__text {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .statement--indent .statement__text {
    text-indent: clamp(80px, 22vw, 130px);
  }
}