/* About Us extras (24/09/2026).

   Recognition: the four tiles now use the client's Awards-folder logos, the
   same files as the homepage "Recognised for our commitment" band. The old
   WordPress images were wide photos with their own backgrounds and baked-in
   text, so they never looked like one set. These are small transparent marks.

   How they read as one set:
   - every tile is the same card (same padding, background, border, radius);
   - every logo sits in a fixed-height zone, so the captions start on one line;
   - each logo keeps the homepage's optical height (--h, set inline on the img)
     times one shared scale, so the tall Company of Good ribbon does not tower
     over the three landscape marks. */

.about-preview .about-awards{
  --award-s:1.45;          /* logo height = --h x this, in px */
  --award-zone:150px;      /* tallest logo (Company of Good, --h:100) fits */
  align-items:stretch;
  gap:1.5rem;
}

.about-preview .about-awards .about-award{
  box-sizing:border-box;
  width:100%;
  display:grid;
  grid-template-rows:var(--award-zone) auto;
  justify-items:center;
  align-content:start;
  gap:1.25rem;
  padding:1.75rem 1.25rem 1.6rem;
  background:#fff;
  border:1px solid rgba(85, 63, 99, .10);
  border-radius:20px;
}

.about-preview .about-awards .about-award img{
  align-self:center;
  width:auto;
  max-width:100%;
  height:calc(var(--h, 100) * var(--award-s) * 1px);
  object-fit:contain;
}

/* 24ch split "Company of Good 2026-2028" after the dash. */
.about-preview .about-awards .about-award-caption{
  max-width:28ch;
}

/* Tablets: about.css already drops to two columns at 1180px. Keep the cards
   from stretching too wide there. */
@media (max-width:1180px){
  .about-preview .about-awards{ max-width:760px; }
}

/* Phones: a 2 x 2 block instead of one long column of four cards. */
@media (max-width:600px){
  .about-preview .about-awards{
    --award-s:.9;
    --award-zone:92px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.75rem;
  }
  .about-preview .about-awards .about-award{
    gap:.9rem;
    padding:1.1rem .7rem 1rem;
    border-radius:16px;
  }
  .about-preview .about-awards .about-award-caption{
    font-size:.8rem;
    letter-spacing:.02em;
  }
  .about-preview .about-awards .about-award-caption span{
    font-size:.84rem;
  }
}

/* Hero display line (final audit 24/09/2026). motion.css makes the <em>
   inline-block for its fade-up, so the line broke before the colon and
   ": built for mums," started a new line. Inline keeps the colon with the
   phrase it belongs to; the fade still runs (opacity only). */
html body .about-preview .about-hero-display em{ display:inline; }

/* "Why mums choose BMB" cards: about.css capped the text at 42ch, which left
   the right third of each wide card empty on desktop. Let it use the card. */
.about-preview .about-pillars p{ max-width:64ch; }