/* ============================================================================
   an-leadership.css: the Leadership page (company/trust, sibling to
   About Us; no Schematic hero, no DWG). Rhythm: dark hero / paper headshot
   grid / white senior-team band / red CTA. Content is a verbatim pass-through
   from the live /leadership-team page (names, roles, one-line interest tags;
   the live site has NO paragraph bios, so none are invented) plus the React
   LeadershipTeam.tsx senior-team + CTA copy. Headshots are the approved
   red-backdrop set (560x560), rendered square so the grid reads as one
   branded unit.
   ========================================================================== */

/* ---- Hero (dark) ------------------------------------------------------------- */
.an-ld-hero {
  position: relative;
  background: var(--an-dark);
  color: #fff;
  padding: 148px 24px 72px;
  overflow: hidden;
}
.an-ld-hero__glow {
  position: absolute;
  top: -200px;
  right: -140px;
  width: 700px;
  height: 700px;
  border-radius: 999px;
  background: rgba(167, 37, 44, 0.12);
  filter: blur(150px);
  pointer-events: none;
}
.an-ld-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin-inline: auto;
}
.an-ld-hero__h1 {
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.an-ld-hero__h1 em { font-style: normal; color: var(--an-red-light); display: inline-block; }
.an-ld-hero__sub {
  margin-top: 20px;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
  line-height: 1.7;
}

/* ---- Roster grid (paper) ----------------------------------------------------- */
.an-ld-roster {
  background: var(--an-paper);
  padding: 80px 24px 96px;
}
.an-ld-roster__inner { max-width: 1240px; margin-inline: auto; }
.an-ld-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.an-ld-card {
  background: #fff;
  border: 1px solid var(--an-border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.4s var(--an-ease), box-shadow 0.4s var(--an-ease), border-color 0.4s var(--an-ease);
}
.an-ld-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 37, 44, 0.25);
  box-shadow: 0 24px 55px -26px rgba(20, 20, 20, 0.32);
}
.an-ld-card__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F2F2EF;
}
.an-ld-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--an-ease);
}
.an-ld-card:hover .an-ld-card__photo img { transform: scale(1.04); }
.an-ld-card__body { padding: 26px 26px 28px; }
.an-ld-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.an-ld-card__li {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: -2px;
  border-radius: 9px;
  color: var(--an-gray-5);
  background: #F5F5F2;
  transition: color 0.3s var(--an-ease), background 0.3s var(--an-ease), transform 0.3s var(--an-ease);
}
.an-ld-card__li:hover { color: var(--an-white); background: var(--an-red); transform: translateY(-2px); }
.an-ld-card__li svg { width: 18px; height: 18px; }
.an-ld-card__name {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--an-ink);
}
.an-ld-card__role {
  margin-top: 4px;
  font-weight: 800;
  font-size: 14px;
  color: var(--an-red);
}
.an-ld-card__tags {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--an-border);
  font-size: 13px;
  line-height: 1.65;
  color: var(--an-gray-3);
}
/* Broader-team panel: closes the roster as a deliberate titled note (rhymes
   with the leader cards: white, same hairline border + radius). */
.an-ld-team {
  margin-top: 48px;
  background: #fff;
  border: 1px solid var(--an-border);
  border-radius: 18px;
  padding: 32px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.an-ld-team__label .an-section-label { margin-bottom: 0; }
.an-ld-team__copy {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--an-gray-2);
  max-width: 760px;
}
.an-ld-team__copy strong { color: var(--an-red); font-weight: 700; }

/* ---- Senior-team band (white) ------------------------------------------------ */
.an-ld-senior {
  background: #fff;
  border-top: 1px solid var(--an-border);
  padding: 80px 24px 88px;
}
.an-ld-senior__inner {
  max-width: 1240px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.an-ld-senior__h2 {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--an-ink);
}
.an-ld-senior__h2 em { font-style: normal; color: var(--an-red); display: inline-block; }
.an-ld-senior__p {
  margin-top: 20px;
  max-width: 520px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--an-gray-3);
}
.an-ld-senior__h3 {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--an-ink);
}
.an-ld-senior__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 700;
  color: var(--an-red);
  transition: color 0.3s var(--an-ease);
}
.an-ld-senior__link:hover { color: var(--an-red-deep); }
.an-ld-senior__link svg { transition: transform 0.3s var(--an-ease); }
.an-ld-senior__link:hover svg { transform: translateX(4px); }

/* ---- CTA band (red, site-standard) ------------------------------------------- */
.an-ld-cta {
  position: relative;
  background: var(--an-red);
  padding: 88px 24px 72px;
  text-align: center;
  overflow: hidden;
}
.an-ld-cta__light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(255, 255, 255, 0.12), transparent 70%);
}
.an-ld-cta__dark {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 60%, var(--an-red-deep));
}
.an-ld-cta__inner { position: relative; z-index: 2; max-width: 700px; margin-inline: auto; }
.an-ld-cta__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 18px;
}
.an-ld-cta__h2 em { font-style: normal; color: rgba(255, 255, 255, 0.95); display: inline-block; }
.an-ld-cta__p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 34px;
}
.an-ld-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--an-red);
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.3s var(--an-ease), box-shadow 0.3s var(--an-ease);
}
.an-ld-cta__btn:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3); }

/* ---- Responsive -------------------------------------------------------------- */
@media (min-width: 640px) {
  .an-ld-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .an-ld-cta__h2 { font-size: 42px; }
}
@media (min-width: 1024px) {
  .an-ld-hero { padding-top: 176px; }
  .an-ld-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .an-ld-team { grid-template-columns: 220px 1fr; gap: 44px; align-items: center; padding: 38px 44px; }
  .an-ld-roster { padding: 96px 24px 104px; }
  .an-ld-senior { padding: 96px 24px 104px; }
  .an-ld-senior__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .an-ld-senior__right { padding-top: 6px; }
}

/* Mobile tap targets (audit SW-05): quiet text links measure ~22px tall at
   375; padding grows the hit area without changing the visual weight. */
@media (max-width: 767px) {
  .an-ld-senior__link { padding-block: 10px; }
}

/* ===========================================================================
   MOBILE UX PASS (2026-07-18). Mobile-breakpoint-gated; desktop untouched.
=========================================================================== */
@media (max-width: 767px) {
  /* LEADERS-M01: the 34x34 LinkedIn buttons up to a 44px hit area (svg stays
     18px so the visual weight barely changes). */
  .an-ld-card__li { width: 44px; height: 44px; border-radius: 11px; margin-top: -6px; }

  /* LEADERS-M02: reclaim ~132px of hero+roster dead padding so the first
     headshot's face crests the fold. */
  .an-ld-hero { padding-top: 116px; padding-bottom: 48px; }
  .an-ld-roster { padding-top: 48px; padding-bottom: 64px; }

  /* LEADERS-M03: tighten the ~176px roster-to-senior void. */
  .an-ld-senior { padding-top: 60px; }

  /* LEADERS-M04: the one-line interest bio is each card's only copy. */
  .an-ld-card__tags { font-size: 14px; }
}

/* LEADERS-M05: at the single-column width the roster is six back-to-back
   full-width square portraits; a 4/3 crop cuts ~80px per card. Faces sit
   upper-middle, so the object-position keeps them clear. */
@media (max-width: 639px) {
  .an-ld-card__photo { aspect-ratio: 4 / 3; }
  .an-ld-card__photo img { object-position: 50% 22%; }
}

/* ---- spec 004 addition: card detail links (hybrid — static cards linking to
   /team-member/{slug}). Photo link is aria-hidden/tabindex=-1 duplicate of the
   name link for pointer convenience. ---- */
.an-ld-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}