/* =========================================================
   ABOUT PAGE
   ========================================================= */


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero {
  background: var(--aegean);
  color: var(--ink);
}

.about-hero .page-kicker {
  margin: 0 0 18px;

  color: var(--midnight);

  font-size: .78rem;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-hero .display {
  color: var(--midnight);
}

.about-hero .lead {
  color: var(--ink);
}


/* =========================================================
   FOUNDER
   ========================================================= */

.about-founder {
  background: var(--canvas);
  color: var(--ink);
}

.about-founder .founder-split {
  gap: 60px;
}

.about-founder .founder-copy {
  max-width: 720px;
}

.about-founder .founder-copy .heading {
  margin-top: 0;
  color: var(--midnight);
}

.about-founder .founder-copy p {
  color: var(--ink);
}

.about-founder .founder-copy p + p {
  margin-top: 1.15rem;
}

.about-founder .founder-title {
  color: var(--midnight);
}


/* Founder photograph */

.about-founder .founder-portrait {
  background: var(--paper);
  border: 0;
}

.about-founder .founder-portrait img {
  background: var(--paper);

  filter: none;
  mix-blend-mode: normal;
}

/* The photograph is not an interactive element */

.about-founder .founder-portrait:hover img {
  transform: none;
}


/* Inner photograph border */

.about-founder .founder-portrait::after {
  border-color: var(--midnight);
  box-shadow: none;
}


/* Nearly three decades label */

.about-founder .founder-caption span {
  background: var(--aegean);
  color: var(--midnight);
}


/* Photograph caption */

.about-founder .founder-caption-copy {
  width: 100%;
  max-width: 100%;

  color: var(--paper);

  text-wrap: balance;
}


/* =========================================================
   PRINCIPLES
   ========================================================= */

.about-principles {
  background: var(--midnight);
  color: var(--paper);
}

.about-principles .principles-heading {
  margin-top: 0;
  color: var(--paper);
}


/* Principle cards */

.about-principles .card {
  background: var(--paper);
  border-color: rgba(140, 222, 242, .52);
  color: var(--ink);
}

.about-principles .card-number {
  display: block;

  margin-bottom: 18px;

  color: var(--teal);

  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .08em;
}

.about-principles .card h3 {
  margin: 0 0 14px;
  color: var(--midnight);
}

.about-principles .card p {
  color: var(--ink);
}


/* Cards are informational rather than interactive */

.about-principles .card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(140, 222, 242, .52);
}


/* =========================================================
   FIRM
   ========================================================= */

.about-firm {
  background: var(--canvas);
  color: var(--ink);
}

.about-firm .about-firm-copy .heading {
  margin-top: 0;
  color: var(--midnight);
}

.about-firm .about-firm-copy .lead {
  color: var(--ink);
}

.about-firm .page-kicker {
  margin-bottom: 14px;
  color: var(--teal);
}


/* Supporting visual */

.about-firm .visual-block {
  background:
    linear-gradient(
      135deg,
      var(--midnight) 0%,
      var(--teal) 50%,
      var(--highlight) 100%
    );

  border: 1px solid rgba(1, 136, 159, .3);

  box-shadow:
    0 22px 60px rgba(15, 77, 92, .2),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}


/* Circular lines */

.about-firm .visual-block::before,
.about-firm .visual-block::after {
  display: none;
}

/* Editorial advisory image */

.about-firm .advisory-image {
  aspect-ratio: 1.08;
  min-height: 0;
  margin: 0;
  background: #111;
}

.about-firm .advisory-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-firm .advisory-image-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  z-index: 2;

  padding: 22px 24px;

  background: rgba(255, 255, 255, .94);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

.advisory-image-label,
.advisory-image-card small {
  display: block;

  color: #4d4d4d;

  font-size: .72rem;
  font-weight: var(--weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.advisory-image-label {
  margin-bottom: 8px;
}

.advisory-image-card strong {
  display: block;

  color: var(--midnight);

  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.2;
}

.advisory-image-card p {
  margin: 9px 0 12px;

  color: #303030;

  font-size: .92rem;
  line-height: 1.5;
}


/* Connect with us */

.about-firm .btn--primary {
  background: var(--midnight);
  border-color: var(--midnight);
  color: var(--paper);
}

.about-firm .btn--primary:hover,
.about-firm .btn--primary:focus-visible {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--paper);

  transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .about-founder .founder-split {
    gap: 44px;
  }

  .about-founder .founder-copy {
    max-width: none;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .about-hero .page-kicker {
    margin-bottom: 12px;

    font-size: .68rem;
    letter-spacing: .075em;
  }

  .about-founder .founder-caption {
    right: 24px;
    bottom: 24px;
    left: 24px;

    min-width: 0;
    padding: 0;

    background: transparent;
  }


  /* Nearly three decades */

  .about-founder .founder-caption span {
    display: block;

    width: fit-content;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 5px 7px;

    background: var(--aegean);
    color: var(--midnight);

    font-size: .52rem;
    line-height: 1.2;
    letter-spacing: .035em;

    white-space: nowrap;
  }


  /* Enterprise transformation caption */

  .about-founder .founder-caption-copy {
    display: block;

    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    background: transparent;
    color: var(--paper);

    font-size: clamp(.68rem, 3.3vw, .8rem);
    line-height: 1.3;

    overflow-wrap: break-word;
    white-space: normal;
    text-wrap: pretty;
  }

  .about-principles .card-number {
    margin-bottom: 14px;
    font-size: .95rem;
  }

  /*
    The HTML order ensures that the explanation appears
    first and the supporting visual appears below it.
  */

  .about-firm .visual-block {
    margin-top: 4px;
  }

  .about-firm .advisory-image {
    aspect-ratio: 1;
  }

  .about-firm .advisory-image-card {
    right: 16px;
    bottom: 16px;
    left: 16px;

    padding: 16px 18px;
  }

  .advisory-image-card strong {
    font-size: 1.08rem;
  }

  .advisory-image-card p {
    font-size: .84rem;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {
  .about-founder .founder-caption {
    right: 22px;
    bottom: 22px;
    left: 22px;
  }

  .about-founder .founder-caption span {
    max-width: 100%;

    font-size: .49rem;
    letter-spacing: .025em;

    white-space: normal;
  }

  .about-founder .founder-caption-copy {
    font-size: .68rem;
    line-height: 1.26;
  }
}