/* ==========================================================================
   RIA Advisory — LEADERSHIP  ·  2026-08-20

   The hero is NOT styled here — it reuses the approved product hero
   (.pd-hero / .pd-hero__grid / .pd-hero__shot) from product-detail.css,
   which this page loads. Same stylesheet, so it cannot drift.

   Namespace: ld-  .

   PHOTO SIZING NOTE: 15 of the 18 headshots are 500×500 originals, but three
   (Rama Thirumalaiswamy, Pam Glanvill, Michelle Boggie) exist only as 240×240
   on the client's server. Cards therefore render the photo near 250px so the
   small three are barely upscaled.

   EVERY leader — the founder included — uses the same card. An earlier build
   gave him a separate feature block; the client asked for one consistent
   treatment, so that block and its CSS are gone.

   CLIENT RULES: rounded SQUARES, never circles — including the headshots;
   linear gradients only; no "01/02" numbering.
   HOUSE RULES: clamp()/calc() need SPACES around +/- ; grid/flex children
   that hold text need min-width: 0 .
   ========================================================================== */

/* Tighter than the shared .section, which pads up to 6.5rem top AND bottom.
   MUST be written as `.r3 .x` — the shared rule is `.r3 .section` (0,2,0) and
   a bare `.ld-team` (0,1,0) loses to it, so the override silently did nothing
   and the band still measured 98px of padding at each end. */
.r3 .ld-team, .r3 .ld-cta { padding-block: clamp(2rem, 1.5rem + 1.6vw, 3rem); }

.ld-eyebrow { display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.ld-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--orange); }

.ld-hero .pd-hero__shot { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 45%; }
@media (max-width: 1040px) { .ld-hero .pd-hero__shot { aspect-ratio: 16 / 10; } }

.ld-team { background: var(--white); }

/* ==========================================================================
   LEADER CARDS
   ========================================================================== */
/* ONE grid for all eighteen — no category headings, no carousel.
   The column counts below are DIVISORS OF 18 (6 / 3 / 2 / 1) on purpose: at
   every breakpoint the last row fills exactly, so there is never the block of
   white space beside a straggler that the carousel was introduced to avoid.
   Six across also lands each card near 210px, so the three 240px headshots
   are never upscaled at all. */
.ld-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.8rem, .6rem + .8vw, 1.2rem); }
.ld-grid > * { min-width: 0; }

.ld-card { display: flex; flex-direction: column; min-width: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11,24,48,.04);
  transform: translateY(0); will-change: transform;
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s ease, border-color .3s ease; }
.ld-card:hover { transform: translateY(-6px); border-color: var(--sky);
  box-shadow: 0 28px 52px -32px rgba(11,24,48,.45); }

/* Rounded SQUARE headshot, never a circle. 1:1 with object-fit so the three
   non-square-cropped shots still sit consistently. */
.ld-card__ph { position: relative; aspect-ratio: 1; overflow: hidden;
  background: linear-gradient(150deg, #EAF3FB 0%, #DCE9F7 100%);
  display: grid; place-items: center; }
/* object-position: center — NOT a top-weighted value. These are already
   tight square headshots, so nudging the focal point upward cropped the tops
   of heads (Sameer Khetarpal, Benicio Suarez). Centre is correct here. */
.ld-card__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.ld-card:hover .ld-card__ph img { transform: scale(1.05); }
/* Fallback monogram if a headshot is ever missing. */
.ld-card__mono { font-family: var(--font-mono, monospace); font-size: 1.6rem;
  font-weight: 500; letter-spacing: .06em; color: var(--navy); opacity: .55; }

.ld-card__b { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
  padding: .95rem 1rem 1.05rem; }
.ld-card__c { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  margin-bottom: .45rem; padding: .2rem .55rem; border-radius: 7px;
  background: var(--sky-tint, #F1F7FC); border: 1px solid rgba(29,65,121,.14);
  font-size: .7rem; font-weight: 600; color: var(--navy); }
.ld-card__c i { font-size: .62rem; color: var(--sky); }
.ld-card__n { margin: 0; font-size: 1rem; letter-spacing: -.018em; line-height: 1.25;
  color: var(--ink); }
.ld-card__r { margin: .35rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--slate); }
/* margin-top:auto keeps every LinkedIn link on the same baseline whether the
   title runs one line or three. */
.ld-card__li { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  margin-top: auto; padding-top: .85rem;
  font-size: .8rem; font-weight: 600; color: var(--navy);
  transition: color .22s ease; }
.ld-card__li i { font-size: .8rem; color: var(--sky); transition: color .22s ease; }
.ld-card__li:hover { color: var(--orange-600, var(--orange)); }
.ld-card__li:hover i { color: var(--orange); }

/* Only divisors of 18, so the grid is always exactly full:
   6 → 3 rows · 3 → 6 rows · 2 → 9 rows · 1 → 18 rows.
   Deliberately NOT 5 or 4 — those leave 3 and 2 empty cells. */
@media (max-width: 1180px) { .ld-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ld-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .ld-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   CTA
   ========================================================================== */
.ld-cta { background: var(--white); }
.ld-cta__panel { position: relative; overflow: hidden; text-align: center; border-radius: 26px;
  padding: clamp(2rem, 1.6rem + 2.6vw, 3.6rem) clamp(1.4rem, 1rem + 3.4vw, 4.5rem);
  border: 1px solid rgba(247,148,31,.3);
  background:
    linear-gradient(134deg, rgba(247,148,31,.26) 0%, rgba(247,148,31,.1) 34%, rgba(255,255,255,.6) 62%, rgba(77,159,215,.16) 100%),
    linear-gradient(180deg, #FFFCF7 0%, #FFFFFF 100%);
  box-shadow: 0 40px 80px -60px rgba(11,24,48,.5); }
.ld-cta__panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--orange) 0%, #f7b45f 34%, var(--sky) 78%, transparent 100%); }
.ld-cta__lbl { font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--navy); }
.ld-cta__panel h2 { font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.3rem); line-height: 1.12;
  letter-spacing: -.03em; margin: .9rem auto .8rem; max-width: 22ch; }
.ld-cta__panel > p { color: var(--slate); font-size: 1rem; line-height: 1.66;
  max-width: 58ch; margin-inline: auto; }
.ld-cta__btns { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap;
  margin-top: clamp(1.3rem, 1rem + 1.2vw, 2rem); }