/* Liberty Law — Meet the team */
.lls-lead{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
  background:#fff;border:0;border-radius:18px;overflow:hidden;
  box-shadow:0 2px 6px rgba(18,18,20,.05),0 14px 34px rgba(18,18,20,.06);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.lls-lead__photo{display:block;aspect-ratio:38/45;background:var(--lls-mist);overflow:hidden}
.lls-lead__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.lls-lead__body{padding:clamp(1.75rem,3vw,2.5rem) clamp(1.75rem,3vw,3rem) clamp(1.75rem,3vw,2.5rem) 0}
.lls-lead__eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lls-red)}
.lls-lead h3{margin-top:.9rem;font-size:clamp(1.6rem,2.6vw,2.125rem);line-height:1.1;letter-spacing:-.02em}
.lls-lead h3 a{text-decoration:none;color:inherit}
.lls-lead h3 a:hover{color:var(--lls-red)}
/* Explicit classes on the prose, so a scope reset on `p` cannot outrank them. */
.lls-lead p.lls-lead__role{margin-top:.5rem;font-size:.9375rem;font-weight:600;color:var(--lls-body)}
.lls-lead p.lls-lead__bio{margin-top:1.25rem;font-size:1rem;line-height:1.75;max-width:52ch}
.lls-lead__facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem;list-style:none;padding:0}
.lls-lead__facts li{font-size:.8125rem;font-weight:500;color:var(--lls-ink);background:var(--lls-mist);border-radius:999px;padding:.5rem 1rem}

.lls-roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.25rem);margin-top:clamp(1rem,1.4vw,1.25rem);list-style:none;padding:0}
.lls-face{display:block;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:38/45;background:var(--lls-mist);text-decoration:none}
.lls-face img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.lls-face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(10,10,12,.88) 100%)}
a.lls-face:hover img,a.lls-face:focus-visible img{transform:scale(1.05)}
.lls-face__meta{position:absolute;left:.9rem;right:.9rem;bottom:.8rem;z-index:2}
/* No photograph yet: an initials tile in the directory's style, so the card still reads as a person. */
.lls-face__mono{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:18%;background:linear-gradient(160deg,#2a2a2f 0%,#121214 100%);color:rgba(255,255,255,.9);font-size:clamp(2.25rem,4vw,3rem);font-weight:700;letter-spacing:-.04em}
.lls-face__name{display:block;color:#fff;font-size:.9375rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.lls-face__role{display:block;margin-top:.2rem;font-size:.75rem;line-height:1.3;color:rgba(255,255,255,.78)}

@media (prefers-reduced-motion:reduce){.lls-face img{transition:none}}
/* These column counts are only the fallback — the widget's responsive "Roster
   columns" control writes `{{WRAPPER}} .lls-roster` at (0,2,0) and wins. They
   are pinned to Elementor's own breakpoints (1024 tablet, 767 mobile) so the
   two never disagree; on different breakpoints the rules here look like they
   apply and quietly do nothing. */
@media (max-width:1180px){.lls-roster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){.lls-roster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.lls-roster{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:900px){
  .lls-lead{grid-template-columns:minmax(0,1fr)}
  /* The portrait's own ratio, so `cover` crops nothing and the whole
     photograph is shown — forcing 16/10 here cut off the head and the chin of
     the one image on the page people actually look at. Capped and centred too,
     because stacked it would otherwise span the card: 959px tall on an 880px
     screen. The house headshots are all 560x663; the object-position is a
     safety net for a replacement that is not. */
  .lls-lead__photo{
    aspect-ratio:38/45;
    /* width:100% is required, not redundant: `margin-inline:auto` on a grid
       item switches its width from stretch to fit-content, and the image's
       own width:100% then has nothing to resolve against — the whole photo
       collapses to 0x0. */
    width:100%;
    max-width:min(360px,82vw);
    margin:clamp(1.5rem,4vw,2rem) auto 0;
    border-radius:14px;overflow:hidden;
  }
  .lls-lead__photo img{object-position:50% 20%}
  .lls-lead__body{padding:0 clamp(1.5rem,4vw,2.25rem) clamp(2rem,4vw,2.5rem)}
}

@media (max-width:640px){
  .lls-roster{gap:1.25rem .75rem}

  /* A roster card is only ~170px wide here, so a name laid over the photograph
     lands squarely on the face — and a two-line name covers it completely.
     Below this width the caption moves out from under the scrim and sits
     beneath the portrait as ink on mist, which also drops the contrast risk. */
  .lls-face{aspect-ratio:auto;overflow:visible;background:none;border-radius:0}
  .lls-face::after{content:none}
  .lls-team .lls-face img{
    width:100%;height:auto;aspect-ratio:38/45;object-fit:cover;
    border-radius:14px;background:var(--lls-line);
  }
  .lls-face__mono{position:relative;inset:auto;aspect-ratio:38/45;border-radius:14px;padding-bottom:0}
  .lls-face__meta{position:static;margin-top:.6rem}
  .lls-face__name{color:var(--lls-ink);font-size:.875rem}
  .lls-face__role{color:var(--lls-body);font-size:.75rem;margin-top:.15rem}
}