/* About us and Attorneys.
   Boards: "About Us", "About Us mobile", "Attorneys", "Attorneys mobile". */

.phero--about { background: var(--oxblood-deep); }
.phero--about .phero__photo { opacity: .22; }
.phero--about .phero__wash {
  background: linear-gradient(90deg, rgba(42, 8, 9, .6) 0%, rgba(42, 8, 9, .9) 44%, rgba(42, 8, 9, 1) 62%);
}

/* The portrait beside the hero copy */
.heroportrait {
  margin: 0;
  background: var(--cream);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
}
/* Same portrait, same problem as the service-page card: anchored at the top
   this 460px box shows about the top two thirds, so the headroom survives
   and he is cut at the chest. Dropping the crop to the subject keeps his
   face where the eye lands and loses the empty space instead of his suit. */
.heroportrait img {
  width: 100%; height: 460px; object-fit: cover;
  object-position: 50% 26%; display: block;
}
.heroportrait figcaption { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 2px; }
.heroportrait strong { font-family: var(--cond); font-size: 28px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.heroportrait span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/* ---------------------------------------------------------------------------
   Running copy
   --------------------------------------------------------------------------- */
.prose p { margin: 0 0 18px; font-size: clamp(16px, 1.32vw, 18px); line-height: 1.7; color: var(--body); max-width: 70ch; }
.prose p:last-child { margin-bottom: 0; }
.prose--wide p { max-width: 90ch; }

/* ---------------------------------------------------------------------------
   The name
   --------------------------------------------------------------------------- */
.thename { position: relative; overflow: hidden; }
.thename__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .85; }
.thename__mark { position: absolute; right: -60px; bottom: -40px; width: 420px; height: 420px; max-width: none; opacity: .3; }
.thename__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: clamp(28px, 4.17vw, 60px);
  align-items: start;
}
.thename__p { margin: 20px 0 0; max-width: 640px; font-size: clamp(16px, 1.32vw, 18px); line-height: 1.7; color: var(--on-dark-3); }
.promise { display: flex; flex-direction: column; gap: 18px; }
.promise__i {
  background: rgba(0, 0, 0, .25);
  border-left: 3px solid var(--red-bright);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
}
.promise__i strong { font-family: var(--cond); font-size: 24px; font-weight: 700; text-transform: uppercase; }
.promise__i span { font-size: 16px; line-height: 1.55; color: var(--on-dark-3); }

/* ---------------------------------------------------------------------------
   The team
   --------------------------------------------------------------------------- */
.people {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
/* The board draws this one dark, with the rooster bleeding off the top
   right corner and the heading in white - at both sizes. */
.person--staff {
  position: relative; background: #2A2021; border-color: #2A2021;
  justify-content: flex-end; padding: 28px;
}
.person--staff .gallo {
  position: absolute; right: -60px; top: -10px; width: 380px; height: 380px;
  opacity: .35; pointer-events: none;
}
.person--staff .person__body { position: relative; padding: 0; }
.person--staff .person__name { color: #fff; }
.person--staff .person__bio { color: var(--on-dark-3); }
.person--staff .person__more a { color: var(--pink); }
.person--staff .person__more a svg { stroke: var(--pink); }
.person__more { margin-top: 6px; }
.person__more a, .person__more .is-plain {
  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;
}
.person__more a:hover { text-decoration: underline; }
.person__more .is-plain { color: var(--muted); }
.people__more { margin: clamp(20px, 2.1vw, 28px) 0 0; }
.people__more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Talk to us your way
   --------------------------------------------------------------------------- */
.reachgrid {
  margin-top: clamp(24px, 2.5vw, 36px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.39vw, 20px);
}
.reachcard {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.reachcard:hover { border-color: var(--red); background: #fff; }
.reachcard svg { flex-shrink: 0; }
.reachcard span { display: flex; flex-direction: column; min-width: 0; }
.reachcard strong { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.reachcard em { font-style: normal; font-size: 16px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Offices and the city pills
   --------------------------------------------------------------------------- */
.citypills { margin-top: clamp(20px, 2.1vw, 28px); }
.citypills .pill { min-height: 48px; }
.offices {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.offices__note { margin: clamp(18px, 1.8vw, 24px) 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.office__hours { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------------------
   Google review cards
   --------------------------------------------------------------------------- */
.gcard {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 2.08vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gcard__top { display: flex; align-items: center; gap: 12px; }
.gcard__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--oxblood);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cond);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.gcard__name { font-size: 16px; font-weight: 700; }
.gcard__q { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.gcard__tags { margin: auto 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gcard__src { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.revrow + .revgrid__more { margin-top: clamp(20px, 2.1vw, 28px); }
.revgrid__more + .disclaimer { margin-top: 12px; }

@media (max-width: 1180px) {
  .thename__in { grid-template-columns: minmax(0, 1fr); }
  .people, .reachgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroportrait img { height: 380px; }
}

@media (max-width: 760px) {
  .reachgrid, .offices { grid-template-columns: minmax(0, 1fr); }
  /* The mobile board keeps the two attorneys side by side and runs the
     staff card full width underneath, rather than stacking all three. */
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .person--staff { grid-column: 1 / -1; min-height: 116px; padding: 18px; }
  .person--staff .gallo { right: -40px; top: -40px; width: 220px; height: 220px; }
  .person--staff .person__name { font-size: 24px; }
  /* The mobile board shortens the role to fit the narrow card, the same
     way the home page team cards do. */
  .person__rolemore { display: none; }
  /* The board's mobile card drops the uppercase, the tracking and the arrow
     and underlines it at 13px instead. The desktop treatment is 14px uppercase
     with .08em tracking, which is 40% wider and wrapped "Read Adrian's bio"
     onto a second line in a 167px card. The 44px target stays. */
  .people .person__more a, .people .person__more .is-plain {
    font-size: 13px; letter-spacing: 0; text-transform: none;
    text-decoration: underline; text-underline-offset: 3px; gap: 0;
  }
  .people .person__more a svg { display: none; }
  .heroportrait img { height: 320px; }
  .thename__mark { width: 300px; height: 300px; right: -110px; }
}

/* Below 290 the two cards are about 124px wide - a portrait, a name, a role
   and a link do not fit that, and "Read Adrian's bio" wrapped again. One
   column there, which is what every other grid on the page already does. */
@media (max-width: 289px) {
  .people { grid-template-columns: minmax(0, 1fr); }
}