/* About Us only. Loaded after site.css. */

/* ----------------------------------------------------------------- hero */

/*
 * The hero copy stops before the stats panel.
 *
 * .about-hero__stats is absolutely positioned over the slab, so it cannot push
 * anything and the copy has to clear it on its own. Above --page-max the
 * geometry is fixed: the inner column is 1240px with 32px of padding, and the
 * panel is 420px wide inset 32px from the column's right edge, leaving
 * 1240 - 32 - 32 - 420 = 756px before it.
 *
 * .page-hero__inner's track (--col) tops out at 800px, 44px more than fits, so
 * above about 2600px - where 16vw reaches that ceiling - the two body
 * paragraphs ran under the panel. Measured at 2800px: 16px and 33px past its
 * left edge.
 *
 * Same fault, same fix and same arithmetic as .assessors-hero__body, where the
 * panel is 400px rather than 420. 700px leaves a 56px gutter that holds at
 * every width above --page-max, because both sides are fixed there. Below it
 * the track is narrower and governs instead, which is why the panel's own
 * breakpoint needs nothing here.
 *
 * The comment this replaced said the diagonal was the real constraint and the
 * page measure was not. The diagonal was never the constraint: the panel is,
 * it sits well left of the diagonal, and nothing was checking it.
 */
.about-hero__lede,
.about-hero__body {
  max-width: calc(var(--page-max) - 484px - 56px);
  text-wrap: pretty;
}

.about-hero__body a {
  color: var(--text-link);
  text-decoration: underline;
}

/* Same 6px as the hero action row on /membership/, which
   this hero now matches: title, lede, then the button. */
/* ----------------------------------------------------------------- team */

/* ------------------------------------------------------------- letter --

   The portrait sits with the signature at the foot of the letter rather than
   floating beside the opening paragraphs, so the block reads the way a signed
   letter does: the words, a rule, then who wrote them.

   Nothing floats here any more, which takes a set of float problems off the
   page with it - the copy no longer has to be a block formatting context to
   avoid being squeezed into a column, and the rule above the signature no
   longer has to clear anything to avoid sliding under the photograph. */
.letter p + p {
  margin-top: 16px;
}

.letter .section__head {
  margin-bottom: 20px;
}

.letter__sign {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

.letter__portrait {
  flex: 0 0 auto;
  width: 90px;
  margin: 0;
}

.letter__portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.letter__who {
  display: grid;
  justify-items: start;
  gap: 2px;
}

/* Her signature, above the typed name it repeats.
   alt="" on purpose: the very next line says "Terri Davies" in text, so a
   screen reader announcing the image as well would read the name twice. */
.letter__signature {
  width: 180px;
  height: auto;
  margin-bottom: 8px;
}

.letter__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-heading);
}

.letter__role {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  .letter__portrait {
    width: 72px;
  }
}

/* ------------------------------------------------- hero stats panel */

/*
 * Sits over the charcoal slab on the right of the hero, not in the copy
 * column. Absolute against .page-hero, which is already a containing block for
 * the slab and the sliver.
 *
 * A white panel because the four figures have to read as data rather than as
 * more hero copy, and because the slab behind it runs charcoal to near-black
 * under the watermark - no ink holds against a moving gradient like that.
 *
 * Hidden below 1080, which is the width the slab itself stops being drawn at;
 * there is no charcoal left to sit on.
 */
.about-hero__stats {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: max(32px, calc((100% - var(--page-max)) / 2 + 32px));
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  width: min(420px, 34vw);
  padding: 28px 32px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}

.about-stat {
  display: grid;
  gap: 4px;
}

.about-stat__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}

.about-stat__label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  text-wrap: pretty;
}

@media (max-width: 1079px) {
  .about-hero__stats {
    display: none;
  }
}

/* --------------------------------------------------- MPA 360 Strong */

.strong-two {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* The gold rule is the quote's left edge rather than a mark above it, so the
   attribution and the quote share one vertical line. */
.strong-quote {
  margin: 0;
  padding-left: 28px;
  border-left: 3px solid var(--gold-500);
}

.strong-quote blockquote {
  margin: 0;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
  color: #fff;
  text-wrap: pretty;
}

.strong-quote figcaption {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.strong-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}

/* A hairline panel, not a filled card: on the navy band a lighter fill reads as
   a second surface and the section stops being one thing. */
.strong-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.strong-card__icon {
  font-size: 26px;
  color: var(--gold-500);
}

.strong-card__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* The full name under the abbreviation. Quieter than the label above it and
   than the copy below it, so the card reads label, name, description rather
   than as three equal lines. */
.strong-card__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.strong-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

@media (max-width: 1000px) {
  .strong-two {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .strong-cards {
    grid-template-columns: 1fr;
  }
}

/* A white plaque under each partner mark. The ACE logo is dark artwork (mean
   luma 90 measured off its own pixels) and the MPA banner is near-black, so
   neither survives on the navy band. The TPN mark joins them on white so the
   three read as one row of logos rather than one reversed and two boxed. */
.strong-card__plaque {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 62px;
  padding: 12px 16px;
  background: #fff;
  border-radius: var(--radius);
}

.strong-card__plaque img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 38px;
}