/* ==========================================================================
   page-about.css — About page only.
   Loaded after css/styles.css. Nothing here may be relied on by other pages.
   Palette: cream field #f2f1ea, charcoal #252525, sage panels via .nicholii-sage,
   forest #2c3a2f icons on light, yellow #f9ffaa scarce and never an icon colour
   on a light surface. No keylines on buttons. Label pills keep their hairline.
   ========================================================================== */

/* --- Hero media: the video slot now carries a real photograph ------------- */
.about-hero_video.is-photo {
  overflow: hidden;
  height: 20.625rem;
}

.about-hero_video.is-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 05 Where this goes: full-width, centred, generous padding ------------ */
.section_where-this-goes {
  padding-top: var(--section-padding--large, var(--section-padding--medium));
  padding-bottom: var(--section-padding--large, var(--section-padding--medium));
}

.where-this-goes_master {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing--32);
  max-width: var(--width--10-columns);
  margin-left: auto;
  margin-right: auto;
}

.where-this-goes_master .heading-style-h3 {
  max-width: 26ch;
}

.where-this-goes_second {
  max-width: 62ch;
}

/* --- 07 Team: one editorial photo and one line, not a headshot grid ------- */
.section_our-team {
  padding-top: var(--section-padding--medium);
  padding-bottom: var(--section-padding--medium);
}

.our-team_master {
  display: flex;
  flex-flow: column;
  gap: var(--spacing--48);
}

.our-team_photo {
  border-radius: var(--radius-general-default);
  overflow: hidden;
  width: 100%;
  height: 34rem;
}

.our-team_photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 08 Values: media tile beside the value list -------------------------- */
.values_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: var(--layout-grid--gutter);
  grid-row-gap: var(--spacing--48);
  align-items: start;
}

.values_media {
  height: 38.25rem;
}

.values_list {
  display: flex;
  flex-flow: column;
  gap: var(--spacing--32);
}

.values_item {
  display: flex;
  flex-flow: column;
  gap: var(--spacing--8);
  padding-top: var(--spacing--32);
  border-top: 1px solid var(--color-tokens-borders-soft);
}

.values_item .combo-tabs_link_title {
  display: flex;
  align-items: center;
  gap: var(--spacing--12);
}

/* Forest icons on the light cream field. Never yellow here. */
.values_item .combo-tabs_icon-title {
  color: #2c3a2f;
}

/* Text placeholder for copy the client still owes. Reads like the asset
   placeholder so both kinds of gap are obvious in one scan. */
.nicholii-ph.is-copy {
  aspect-ratio: auto;
  align-items: flex-start;
  text-align: left;
  padding: 0.75rem 1rem;
  gap: 0.5rem;
}

/* --- 10 Recognised: award captions under each card ------------------------ */
.award_card.is-captioned {
  flex-flow: column;
  gap: var(--spacing--16);
  /* The card sits on the charcoal panel, which sets a light text colour.
     The card itself is near-white, so the caption must be re-inked. */
  color: #252525;
  max-width: 22rem;
}

.award_caption {
  display: flex;
  flex-flow: column;
  gap: 2px;
  text-align: center;
}

.award_caption .tone-subtle {
  color: rgba(37, 37, 37, 0.62);
}

/* --- Responsive ---------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .values_grid {
    grid-template-columns: 1fr;
  }

  .values_media {
    height: 26rem;
  }

  .our-team_photo {
    height: 24rem;
  }
}

@media screen and (max-width: 767px) {
  .about-hero_video.is-photo {
    width: 100%;
    height: 14rem;
  }

  .where-this-goes_master {
    text-align: left;
    align-items: flex-start;
  }

  .our-team_photo {
    height: 18rem;
  }

  .values_media {
    height: 22rem;
  }
}

/* Recognition: heading and awards sat stacked and left, leaving the right half
   of the charcoal panel empty. They now share the width, awards centred
   against the copy. -------------------------------------------------------- */
.nicholii-recog_split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--spacing--64, 4rem);
  align-items: center;
}
.nicholii-recog_split > .margin-bottom-medium { margin-bottom: 0; }
.nicholii-recog_split .heading-left.limit-medium { max-width: none; }
.nicholii-recog_split .logo-proof_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing--24, 1.5rem);
  margin: 0;
}
.nicholii-recog_split .award_card.is-captioned {
  max-width: none;
  height: 100%;
  justify-content: space-between;
  padding: var(--spacing--32) var(--spacing--24);
}
.nicholii-recog_split .award_logo { height: 5rem; }

@media screen and (max-width: 991px) {
  .nicholii-recog_split { grid-template-columns: minmax(0, 1fr); gap: var(--spacing--40, 2.5rem); }
  .nicholii-recog_split .award_logo { height: 4rem; }
}
@media screen and (max-width: 600px) {
  .nicholii-recog_split .logo-proof_row { grid-template-columns: minmax(0, 1fr); }
}

/* Mission split: tall media panel against a charcoal content panel, 8px apart.
   Replaces the heading-over-two-columns treatment that read as filler. ------ */
.nicholii-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  min-height: min(78vh, 660px);
}
.nicholii-split_media {
  border-radius: var(--radius-general-default);
  overflow: hidden;
  background-color: var(--color-base-lift-dark);
}
.nicholii-split_media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nicholii-split_panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing--40, 2.5rem);
  padding: var(--spacing--48, 3rem);
  border-radius: var(--radius-general-default);
  background-color: var(--color-base-base-dark-100);
  color: rgba(247, 247, 245, 0.88);
}
.nicholii-split_mark { width: 34px; height: 34px; color: var(--color-base-accent-primary); flex: none; }
.nicholii-split_body { display: flex; flex-direction: column; gap: var(--spacing--20, 1.25rem); }
.nicholii-split_h2 {
  margin: 0;
  font-size: clamp(2.1rem, 3.1vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--color-base-base-light-100);
}
.nicholii-split_lead { margin: 0; font-size: 1.125rem; line-height: 1.5; color: rgba(247, 247, 245, 0.78); }
.nicholii-split_note { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(247, 247, 245, 0.56); }

.nicholii-split_foot { display: flex; align-items: center; }
.nicholii-split_cta {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .8125rem 1.375rem;
  border-radius: 999px;
  background-color: var(--color-base-accent-primary);
  color: #252525;
  font-weight: 500;
  text-decoration: none;
  transition: transform .25s ease;
}
.nicholii-split_cta:hover { transform: translateY(-2px); }
.nicholii-split_cta-icon { width: 14px; height: 14px; display: block; }

@media screen and (max-width: 991px) {
  .nicholii-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .nicholii-split_media { aspect-ratio: 4 / 3; }
  .nicholii-split_panel { padding: var(--spacing--32, 2rem); gap: var(--spacing--32, 2rem); }
}

/* Hero: the bridging paragraph moved up between the two headlines (client
   feedback item 27), so the bottom row now carries only the CTA. Centre it
   with the rest of the column, and keep the paragraph to a readable measure. */
.about-hero_top .about-hero_left {
  max-width: 46rem;
  text-align: center;
}
.about-hero_bottom { justify-content: center; }

/* Recognition: no plates here either (client feedback item 4). The white cards
   are gone, so the marks sit straight on the charcoal panel and the captions go
   back to the panel's own light text. Sized to match the footer strip. */
.nicholii-recog_split .award_card,
.nicholii-recog_split .award_card.is-captioned {
  background-color: transparent;
  padding: 0;
  color: inherit;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: none;
}
/* The two marks are different shapes, so each gets its own size but they share
   a band, which keeps the captions on one line rather than stepping. */
.nicholii-recog_split .award_card { gap: var(--spacing--16); }
.nicholii-recog_split .award_logo { height: 64px; width: auto; align-self: flex-start; }
.nicholii-recog_split .award_card:nth-child(2) .award_logo { height: 78px; }
.nicholii-recog_split .award_card { min-height: 0; }
.nicholii-recog_split .award_card > img { object-fit: contain; object-position: left center; }
/* The marks share a band so the captions line up, without forcing both to the
   same height: the band lives on the row, not on the image. */
.nicholii-recog_split .logo-proof_row > .award_card { display: grid; grid-template-rows: 78px auto; }
.nicholii-recog_split .logo-proof_row { align-items: start; gap: var(--spacing--40, 2.5rem); }

/* The captions were coloured for a white card. With the card gone they sit on
   the charcoal panel, where the placing line was dark ink on dark and vanished. */
.nicholii-recog_split .award_caption .text-size-small { color: var(--color-base-base-light-100); }
.nicholii-recog_split .award_caption .tone-subtle { color: rgba(247, 247, 245, 0.72); }
/* Captions align with the mark above them, not centred under it. */
.nicholii-recog_split .award_caption { align-items: flex-start; text-align: left; }