/* Attorneys. Boards: "Attorneys", "Attorneys mobile". */

/* ---------------------------------------------------------------------------
   The "on this page" jump list beside the hero
   --------------------------------------------------------------------------- */
/* The card sat short against a tall hero, leaving a band of empty space
   under it. It fills the column instead, which is how the board draws it. */
.onthispage {
  align-self: stretch;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-dark-2);
  border-radius: 8px;
  padding: clamp(20px, 2.1vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onthispage__h {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
}
.onthispage a {
  flex: 1;
  min-height: 76px;
  padding: 14px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
}
.onthispage a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.onthispage a > img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}
.onthispage__mono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--oxblood);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}
.onthispage a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.onthispage strong { font-size: 16px; font-weight: 700; }
.onthispage em { font-style: normal; font-size: 13px; color: var(--on-dark-2); }

/* ---------------------------------------------------------------------------
   Attorney profiles
   --------------------------------------------------------------------------- */
.profiles { margin-top: clamp(28px, 3.1vw, 44px); display: flex; flex-direction: column; gap: clamp(20px, 2.08vw, 30px); }
.profile {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  scroll-margin-top: 110px;
}
.profile__media { background: var(--oxblood); display: flex; align-items: center; justify-content: center; min-height: 340px; }
.profile__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.profile__mono {
  font-family: var(--cond);
  font-size: 72px;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: .04em;
}
.profile__body { padding: clamp(24px, 2.5vw, 36px); }
.profile__role { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.profile__bio { margin: 12px 0 0; font-size: clamp(16px, 1.25vw, 17px); line-height: 1.65; color: var(--body); max-width: 70ch; }
/* The board stacks each label over its value and runs two of those pairs
   across, rather than one long label column down the side. */
.profile__dl {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.2vw, 32px);
}
.profile__dl > div { padding-top: 12px; border-top: 1px solid var(--border); }
.profile__dl dt { border-top: 0; padding: 0; }
.profile__dl dt {
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.profile__dl dd {
  margin: 0 0 14px;
  padding: 4px 0 0;
  border-top: 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}
.profile__links { margin: 20px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; }
/* The board gives the bio its own red button and leaves the bar listing as
   a plain link beside it. */
.profile__bio-link {
  background: var(--red);
  color: #fff !important;
  border-radius: 4px;
  padding: 0 22px;
}
.profile__bio-link svg { stroke: #fff; }
.profile__bio-link:hover { background: var(--oxblood); }
.profile__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.profile__links a:hover { text-decoration: underline; }

.revrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* This board draws the two practices as plain columns on the page - no card
   around them - with each link as a full-width row. The about-us board uses
   the same data but shows pills inside a card, so all of this is scoped to
   --plain rather than changing .pracol itself. */
.twoprac--plain .pracol { background: transparent; border: 0; border-radius: 0; }
.twoprac--plain .pracol__b { padding: 0; gap: 10px; }
.pracrows { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.pracrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid #E3D5C4;
  border-radius: 6px;
  background: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.35;
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.pracrow svg { flex: none; }
.pracrow:hover { border-color: var(--red); transform: translateY(-1px); }

@media (max-width: 1180px) {
  .profile { grid-template-columns: minmax(0, 1fr); }
  .profile__media { min-height: 0; }
  .profile__media img { height: 420px; }
  .profile__dl { grid-template-columns: minmax(0, 1fr); }
  .profile__dl dd { border-top: 0; padding-top: 2px; }
}

@media (max-width: 760px) {
  /* The portrait is 582x728, so a fixed landscape box crops it - at 320px it
     cut Alex off at the hands. Keeping its own ratio on mobile shows the whole
     photo. The board sets 300px here, which crops too; this is a deliberate
     departure from it. Desktop still crops the sides, which a portrait takes
     without losing the subject. */
  .profile__media img { height: auto; aspect-ratio: 582 / 728; }
  .revrow--2 { grid-template-columns: minmax(0, 1fr); }
  .profile__mono { font-size: 56px; }
  .profile__media { min-height: 160px; }
}

/* ---------------------------------------------------------------------------
   Partner and of counsel - Figma comments #12 and #13.

   These four have a name, a role and at most one line of credential. The
   roster card the team bands use is built around a portrait, so wrapping that
   much text in one leaves a tall, mostly empty box, and four of them in the
   three-column grid orphans the fourth on a row of its own. A row each, two to
   a line, fits what they actually have. When the firm sends portraits and work
   histories these become full profiles alongside Alex and Adrian.
   --------------------------------------------------------------------------- */
.subhead { margin-top: clamp(40px, 4.2vw, 64px); }
.subhead h3 {
  margin: 6px 0 0; font-family: var(--cond); font-weight: 700;
  font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1;
  letter-spacing: .01em; text-transform: uppercase; color: var(--ink);
}

.lawyers {
  margin-top: clamp(20px, 2vw, 28px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 18px);
}
.lawyer {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 22px; min-width: 0;
  background: var(--cream-2); border: 1px solid var(--border); border-radius: 6px;
}
.lawyer__mono {
  flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--oxblood);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cond); font-size: 22px; font-weight: 700; color: var(--pink);
}
.lawyer__name {
  margin: 0; font-family: var(--cond); font-size: 24px; font-weight: 700;
  text-transform: uppercase; line-height: 1.1; color: var(--ink);
}
.lawyer__role {
  margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
}
.lawyer__bio { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--body); }

@media (max-width: 760px) {
  .lawyers { grid-template-columns: minmax(0, 1fr); }
}

/* Partner and of counsel are different standings at the firm. Run together as
   one list, a partner reads as the fourth name on a list of affiliates - so
   they are labelled and grouped, the partner first and on the wider row. */
.lawyers__label {
  margin: clamp(20px, 2vw, 28px) 0 10px; font-family: var(--cond);
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--body);
}
.lawyers--lead { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.lawyers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.lawyer--lead { padding: 24px 26px; }
.lawyer--lead .lawyer__mono { width: 68px; height: 68px; font-size: 26px; }
.lawyer--lead .lawyer__name { font-size: 30px; }

@media (max-width: 980px) {
  .lawyers--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lawyers--3 { grid-template-columns: minmax(0, 1fr); }
}