/* About page: rules specific to about.html. Shared components live in ../styles.css.
   Flat single-class selectors; no !important. */


/* --- Page hero: the longest h1 on the site, so its measure is wider here ---- */

.about-hero .page-hero__inner {
  max-width: 58rem;
}

.about-hero .page-hero__title {
  max-width: 34ch;
}

.about-hero .page-hero__lead {
  max-width: 60ch;
}


/* --- Managing Director's message -----------------------------------------
   A signed letter, so it runs as one measured column of about 65 characters,
   centred in the narrow container. No photograph beside it: a portrait of
   anyone other than the signatory reads as the signatory. */

.letter {
  max-width: 36rem;
  margin-inline: auto;
}

.letter__title {
  margin-bottom: var(--s-8);
}

.letter__body > p {
  font-size: 1.125rem;
  line-height: 1.65;
}

.letter__body > p + p {
  margin-top: var(--s-5);
}

.letter__sign {
  display: grid;
  gap: var(--s-1);
  justify-items: start;
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.letter__name {
  font-weight: 600;
  color: var(--navy-700);
}

/* mono label: the element also carries class="mono" */
.letter__role {
  color: var(--ink-soft);
}

.letter__email {
  margin-top: var(--s-3);
  font-size: var(--text-small);
}


/* --- Mission and values -------------------------------------------------- */

/* mono label: the element also carries class="mono" */
.col-label {
  display: block;
  margin-bottom: var(--s-5);
  color: var(--ink-soft);
}

.mission__statement {
  max-width: 40ch;
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy-700);
}

.values {
  border-top: 1px solid var(--line);
}

.values__item {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--navy-700);
}

.values__quote {
  max-width: 52ch;
  margin-top: var(--s-8);
  color: var(--ink-soft);
}


/* --- How we work: one standard, then the six principles that serve it ----
   Excellence leads as a full-width panel built from the shared card (so it
   carries the split rule and nothing else); the six principles follow as
   shared pillars in a three-column grid. The primacy is type and scale, not
   a second shape. */

.principles__lead {
  margin-top: var(--s-6);
}

/* The panel is a shared `.card`, and a card is `overflow: hidden`, so anything
   inside it that cannot shrink is not merely overflowed, it is deleted from the
   page with no scrollbar to reach it and no change to `document.scrollWidth`.
   Both tracks therefore name their zero minimum: a bare `auto` or `1fr` track is
   floored at its content's min-content width, and the min-content width of this
   panel is one unbreakable word set at display size.
   `container-type` makes the panel the query container its title measures
   against (see `.standard__title`); it changes nothing about the layout. */
.standard {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-4) var(--s-12);
  background: var(--sky-100);
  border-color: transparent;
  container-type: inline-size;
}

/* mono label: the element also carries class="mono" */
.standard__label {
  grid-column: 1 / -1;
  color: var(--blue-700);
}

/* EXCELLENCE is one word with no break opportunity in it, so its width is a
   hard floor on the panel. The clamp's *minimum* is a rem, which is the one
   thing browser text size moves: at 200% the 3rem floor became 96px, the word
   set itself 442px wide inside a 212px panel, and the card clipped 230px of the
   word and squeezed the body column beside it to nothing. The `min()` ceiling
   ties the word to the panel it sits in (measured: the word runs about 4.6x its
   font size, so 20cqw always fits). At the default text size the cqw term is far
   above the clamp at 390, 480, 1024 and 1440, so the 100% rendering is
   unchanged; it only binds once the text is zoomed. The plain clamp is declared
   first as the fallback for a browser without container query units - there the
   `minmax(0, …)` tracks above still keep the text on the page.
   Do not put a rem floor back without a width-aware ceiling over it. */
.standard__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-size: min(clamp(3rem, 7vw, 5.5rem), 20cqw);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--navy-700);
}

.standard__text {
  max-width: 52ch;
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy-700);
}

/* the panel is not a link, so it does not answer to the card hover */
.standard:hover {
  transform: none;
  border-color: transparent;
}

.standard:hover::before {
  height: var(--rule-h);
}

.principles__list {
  margin-top: var(--s-12);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* --- Our people: standards as a spec sheet (shared .spec in styles.css) ----
   The officer photograph sits here, where the subject matches the copy. */

.people__lead {
  margin-top: var(--s-6);
}

.people__figure {
  margin-top: var(--s-8);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-900);
}

/* the file is already cropped to a wide band, so it is not cropped again */
.people__figure img {
  display: block;
  width: 100%;
  height: auto;
}


/* --- Management and governance ------------------------------------------- */

.gov__head {
  align-items: start;
}

.gov__sectors {
  margin-top: var(--s-6);
}

.gov__pillars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* --- Pointer to the compliance page --------------------------------------
   A quiet in-page summary, not a second credential strip: the licence,
   insurance and policy detail lives on compliance.html and this links there. */

.creds-section {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* the copy wraps inside its own column; the link keeps the right edge */
.creds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5) var(--s-10);
}

.creds__title {
  max-width: 28ch;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
}

.creds__text {
  max-width: 62ch;
  margin-top: var(--s-3);
  color: var(--ink-soft);
}


/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  /* minmax(0, 1fr), never a bare 1fr: the single track would otherwise be
     floored at the min-content width of EXCELLENCE and the card would clip it. */
  .standard {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .principles__list {
    margin-top: var(--s-10);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gov__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Every stacked track names its zero minimum. A bare 1fr is minmax(auto, 1fr),
   which floors the track at its content's min-content width, and at 150% and
   200% browser text size a long word in a pillar or a heading is wider than a
   phone column. */
@media (max-width: 768px) {
  .principles__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .gov__pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .creds {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

@media (max-width: 480px) {
  .standard {
    padding: var(--s-6);
  }

  .values__item {
    font-size: 1.625rem;
  }
}