/* ==================================================================
       About page
       ------------------------------------------------------------------
       The page is built on the homepage's .about_company_section
       component, so the eyebrow, heading, copy, points, funfact and CTA
       treatments above are all inherited rather than restated. Only the
       pieces this page introduces that the component has no equivalent
       for are defined here.
       ================================================================== */

    /* The component paints every section #f7f7f7. Alternating keeps four
       stacked sections from reading as one continuous slab. */
    .about_company_section.about_section_light {
      background-color: #ffffff;
    }

    /* The founder credit: a portrait beside a name and role, sitting
       under the introduction copy. */
    .about_founder {
      display: flex;
      gap: 16px;
      margin-top: 32px;
      padding-top: 26px;
      align-items: center;
      border-top: 1px solid #dcdee2;
    }
    .about_founder_photo img {
      width: 76px;
      height: 76px;
      display: block;
      object-fit: cover;
      object-position: top center;
      border-radius: 50%;
      background-color: #eef0f3;
    }
    .about_founder_name {
      margin: 0 0 2px;
      font-size: 18px;
      line-height: 24px;
      font-weight: 700;
      color: #17191d;
      font-family: var(--bs-font-body);
    }
    .about_founder_role {
      margin: 0;
      font-size: 14px;
      line-height: 20px;
      color: #5a5f67;
    }

    /* Alternating headline-stat cards beside the introduction. */
    .about_highlights {
      display: grid;
      gap: 20px;
      margin: 0;
      padding: 0;
      list-style: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about_highlights li {
      /* min-height: 150px; */
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 10px;
      background-color: #ffffff;
      border: 1px solid #e2e4e8;
    }
    .about_highlights li:nth-child(2) {
      color: #fff;
      background-color: #003566;
      border-color: #003566;
    }
    .about_highlight_number {
      flex: 0 0 65px;
      width: 65px;
      height: 65px;
      display: grid;
      place-items: center;
      color: #fff;
      background-color: #003566;
      font-family: var(--bs-font-body);
      font-size: 26px;
      line-height: 1;
      font-weight: 700;
    }
    .about_highlights li:nth-child(2) .about_highlight_number {
      color: #003566;
      background-color: #fff;
    }
    .about_highlight_title {
      flex: 1 1 auto;
      margin: 7px 0 0;
      font-size: 17px;
      line-height: 24px;
      font-weight: 700;
      color: #17191d;
      text-transform: uppercase;
      font-family: var(--bs-font-body);
    }
    .about_highlights li:nth-child(2) .about_highlight_title {
      color: #fff;
    }

    /* Leadership portraits beside the philosophy copy. */
    .about_leaders {
      display: grid;
      gap: 20px;
      margin: 0;
      padding: 0;
      list-style: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about_leaders > li {
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-items: stretch;
    }
    .about_leaders img {
      width: 100%;
      height: 300px;
      display: block;
      object-fit: cover;
      object-position: top center;
      background-color: #eef0f3;
    }
    .about_leader_caption {
      margin: 12px 0 0;
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
      color: #34383f;
    }
    .about_leader_cta {
      width: 100%;
      min-height: 48px;
      margin-top: 16px;
      padding: 12px 14px;
      border-radius: 999px;
      -webkit-clip-path: none;
      clip-path: none;
      font-size: 12px;
      line-height: 18px;
      text-align: center;
    }
    .about_leader_cta:before {
      content: none;
    }

    /* The philosophy section leads on a pulled quote rather than a
       standfirst, so it needs the quotation styling the component's
       .about_subheading does not carry. */
    .about_pullquote {
      margin: 24px 0 18px;
      padding-left: 18px;
      border-left: 3px solid #003566;
      font-family: var(--bs-font-body);
      font-size: 20px;
      line-height: 30px;
      font-weight: 600;
      color: #1c2026;
    }

    /* The theme pulls .section_heading up with a -60px bottom margin so a
       following image tucks under it. That is right on the homepage, where
       an .image_widget follows the counters, but here buttons follow them
       and were landing 26px inside the blue box. */
    .about_company_section .section_heading:has(.funfact_wrapper) {
      margin-bottom: 0;
    }

    /* Three sibling calls to action; the component's .about_company_cta
       assumes a single button on its own line. */
    .about_cta_group {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 34px;
    }
    .about_cta_group .about_company_cta {
      margin-top: 0;
      font-size: 13px;
      padding: 13px 22px;
    }

    /* The closing guiding-principle quote. */
    .about_principle_section {
      background-color: #f7f7f7;
    }
    .about_principle_section .testimonial_item {
      background-color: #ffffff;
      border-color: #e2e4e8;
    }
    .about_principle_section .testimonial_item p {
      color: #34383f;
      font-size: 17px;
      line-height: 30px;
    }
    .about_principle_section .testimonial_item .admin_name {
      color: #17191d;
    }
    .about_principle_section .testimonial_item .title_text {
      color: #17191d;
    }

    @media (max-width: 991px) {
      .about_highlights,
      .about_leaders {
        grid-template-columns: 1fr;
      }
      .about_pullquote {
        font-size: 18px;
        line-height: 28px;
      }
    }
    @media (max-width: 575px) {
      .about_highlight_number {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
        font-size: 25px;
      }
    }

    .about_video_hero {
      position: relative;
      min-height: clamp(520px, calc(100vh - 130px), 720px);
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      background: #071628;
      isolation: isolate;
    }
    .about_video_hero video {
      position: absolute;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .about_video_hero:after {
      position: absolute;
      inset: 0;
      z-index: -1;
      content: "";
      background: linear-gradient(90deg, rgba(2, 15, 29, .9) 0%, rgba(2, 15, 29, .58) 52%, rgba(2, 15, 29, .2) 100%);
    }
    .about_video_hero_content {
      max-width: 1050px;
      padding: 90px 0 62px;
      color: #fff;
    }
    .about_video_hero .page_title {
      max-width: 900px;
      margin: 0 0 22px;
      color: #fff;
    }
    .about_video_hero_text {
      max-width: 880px;
      margin: 0;
      color: rgba(255, 255, 255, .84);
      font-size: 18px;
      line-height: 1.75;
    }
    @media (max-width: 767px) {
      .about_video_hero {
        min-height: 520px;
      }
      .about_video_hero_content {
        padding: 70px 0 42px;
      }
      .about_video_hero_text {
        font-size: 16px;
        line-height: 1.65;
      }
    }