/* =========================================================
   Polymathic Group — "Who We Are" page
   Extends styles.css.
   ========================================================= */

/* ---------------------------------------------------------
   Areas of expertise
   The three groups use .prod-feature-groups--three from styles.css, the
   same flat treatment as the product pages' features. Only the offset from
   the intro copy is page-local.
   --------------------------------------------------------- */
.expertise {
    margin-top: var(--content-gap);
}

/* The label carries its own .eyebrow bottom margin, so the groups don't need
   the full offset they use when they follow a .section-intro. */
.expertise .prod-feature-groups {
    margin-top: 0.5rem;
}

/* The two sister firms, under the expertise groups. Links are underlined in
   brass like .text-link__label and end with the outside-link arrow
   (.icon-arrow--out in styles.css), which the underline doesn't reach. */
.affiliates {
    margin-top: var(--content-gap);
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.affiliates p:last-child {
    max-width: 68ch;
    color: var(--ink-soft);
}

.affiliates a {
    color: var(--navy-900);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--brass);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color var(--transition-fast);
}

.affiliates a:is(:hover, :focus-visible) {
    color: var(--brass);
}

/* ---------------------------------------------------------
   Principals
   --------------------------------------------------------- */
.principals {
  background: var(--paper-dim);
  padding: var(--section-space) 0;
}
.principal-grid {
  margin-top: var(--content-gap);
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

/* Letterhead cards. Each card opens with a navy head holding the seal, name
   and role over a gold rule, the way a firm's letterhead sits above the
   letter; the bio runs on white below. The navy heads give the pale band its
   dark anchors without turning the whole section dark, so the navy philosophy
   band that follows keeps its own weight. */
.principal-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 0 0 28px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.principal-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  background: var(--navy-900);
  border-bottom: 3px solid var(--gold);
}
/* The seal: the header monogram's ruled square (.brand__mark in styles.css),
   holding initials instead of the P. Same hairline and offset outer rule, same
   display optical size, so it reads as the firm's mark rather than an avatar. */
.principal-avatar {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  outline: 1px solid rgba(255, 255, 255, 0.18);
  outline-offset: 3px;
  color: #fff;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  line-height: 1;
  /* Same optical correction as .brand__mark: at wght 500 / opsz 72 the
     capitals' ink centre sits 0.1225em above the box centre, and flex centring
     halves the padding, so 0.245em on top moves the ink down that far. */
  padding-top: 0.245em;
}
.principal-card h3 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
}
.principal-card__role {
  margin-top: 4px;
  color: var(--gold);
  font: var(--label-font);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
/* :not() because this selector outranks .principal-card__role, which is also a
   <p>; without it the role line would take the bio's margins and colour. */
.principal-card p:not(.principal-card__role) {
  margin: 18px 28px 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.principal-card .principal-card__head + p {
  margin-top: 24px;
}

@media (min-width: 720px) {
  .principal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .principal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------
   Philosophy — quote treatment on the dark navy band
   --------------------------------------------------------- */
.philosophy {
  padding: var(--section-space) 0;
}
.quote-block {
  margin: 22px 0 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.25;
  color: #fff;
  border-left: 3px solid var(--gold);
  padding-left: 24px;
}
.philosophy__body {
  margin-top: 26px;
  max-width: 62ch;
  font-size: 1.05rem;
  color: #c7d2d8;
}
.philosophy__body + .philosophy__body {
  margin-top: 16px;
}

/* ---------------------------------------------------------
   How Polymathic Works — editorial copy treatment
   --------------------------------------------------------- */
#how-we-work .about__copy {
    position: relative;
    padding: 2px 0 2px 30px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

#how-we-work .about__copy::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--line);
    content: "";
}

#how-we-work .about__copy::after {
    position: absolute;
    top: 0;
    left: -1px;
    width: 3px;
    height: 52px;
    background: var(--brass);
    content: "";
}

@media (max-width: 899px) {
    #how-we-work .about__copy {
        margin-top: 2px;
        padding: 24px 0 0;
    }

    #how-we-work .about__copy::before {
        top: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    #how-we-work .about__copy::after {
        top: -1px;
        left: 0;
        width: 52px;
        height: 3px;
    }
}