/* ==========================================================================
   Team Page — Editorial luxury refresh
   Navy + cobalt · zero brand-blue · serif hierarchy · three-column grid
   ========================================================================== */

/* Full-bleed gray-50 hero: the hero itself handles its own top spacing,
   so kill the main-content padding. Scoped under `body` to outrank the
   base rule `body:not(.header-transparent) .main-content { padding-top: ... }`. */
body .main-content:has(.team-page) {
  padding-top: 0;
  padding-bottom: 0;
}

.team-page {
  padding-bottom: 0;
}

/* ==========================================================================
   HERO — gray-50 editorial band
   ========================================================================== */
.team-hero {
  background: var(--white);
  /* Top padding accounts for the fixed header; bottom is visual rhythm */
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-8);
  text-align: center;
}

@media (min-width: 1024px) {
  .team-hero {
    padding: calc(var(--header-height) + var(--space-20)) 0 var(--space-20);
  }
}

.team-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
}

.team-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
  opacity: 0;
  transform: translateY(14px);
  animation: teamHeroRise 700ms var(--ease) 120ms forwards;
}

.team-hero-desc {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 640px;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  animation: teamHeroRise 700ms var(--ease) 260ms forwards;
}

@keyframes teamHeroRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   GROUP PHOTO — whole team, contained + natural aspect (never crop faces)
   ========================================================================== */
.team-group {
  background: var(--white);
  padding: var(--space-6) 0 0;
}
/* Full-bleed cinematic band. Crop is top/bottom only (dead ceiling + floor),
   so every person stays visible at any width. */
.team-group-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
}
@media (min-width: 768px) {
  .team-group-photo { aspect-ratio: 2 / 1; }
}
@media (min-width: 1024px) {
  .team-group { padding: var(--space-8) 0 0; }
}

/* ==========================================================================
   TEAM GRID — 3 cols desktop (bigger, more editorial than old 4-col)
   ========================================================================== */
.team-members {
  padding: var(--space-16) 0 var(--space-12);
  background: var(--white);
}

@media (min-width: 1024px) {
  .team-members { padding: var(--space-20) 0 var(--space-16); }
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12) var(--space-8);
  }
}

/* ==========================================================================
   MEMBER CARD — staggered rise-in on page load
   ========================================================================== */
.team-member {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: transparent;
  padding: 0;
  border: none;
  opacity: 0;
  transform: translateY(24px);
  animation: teamCardRise 700ms var(--ease) forwards;
  animation-delay: var(--stagger, 0ms);
  transition: transform 400ms var(--ease);
  will-change: transform;
}

/* Staggered entrance: each card fades+rises in 80ms after the previous */
.team-member:nth-child(1)  { --stagger:   0ms; }
.team-member:nth-child(2)  { --stagger:  90ms; }
.team-member:nth-child(3)  { --stagger: 180ms; }
.team-member:nth-child(4)  { --stagger: 270ms; }
.team-member:nth-child(5)  { --stagger: 360ms; }
.team-member:nth-child(6)  { --stagger: 450ms; }
.team-member:nth-child(7)  { --stagger: 540ms; }
.team-member:nth-child(8)  { --stagger: 630ms; }
.team-member:nth-child(9)  { --stagger: 720ms; }
.team-member:nth-child(10) { --stagger: 810ms; }
.team-member:nth-child(11) { --stagger: 900ms; }
.team-member:nth-child(12) { --stagger: 990ms; }

@keyframes teamCardRise {
  to { opacity: 1; transform: translateY(0); }
}

.team-member:hover {
  transform: translateY(-4px);
}

/* Portrait — 4:5 aspect (slight portrait, not too tall).
   Cards are capped by max-width on the grid so photos stay reasonable. */
.team-member-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-4);
  background: var(--gray-100);
  overflow: hidden;
  border-radius: var(--radius-none);
}

.team-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.04);
  filter: saturate(0.9);
  transition: transform 900ms var(--ease),
              filter 900ms var(--ease),
              opacity 600ms ease;
  animation: teamPhotoReveal 1200ms var(--ease) both;
  animation-delay: var(--stagger, 0ms);
}

@keyframes teamPhotoReveal {
  from { filter: saturate(0.6) brightness(1.05); transform: scale(1.08); }
  to   { filter: saturate(0.9) brightness(1);    transform: scale(1.04); }
}

.team-member:hover .team-member-photo img {
  transform: scale(1.08);
  filter: saturate(1);
}

/* Subtle gold bottom rule that draws in on hover (more futuristic than top) */
.team-member-photo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--cobalt) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 600ms var(--ease);
  z-index: 2;
}

.team-member:hover .team-member-photo::after {
  transform: scaleX(1);
}

.team-member-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-member-photo > .image-fallback {
  display: none;
}

.team-member-photo.is-image-failed > img {
  display: none;
}

.team-member-photo.is-image-failed > .image-fallback {
  display: flex;
}

.team-member-photo-placeholder svg {
  width: 56px;
  height: 56px;
  color: var(--gray-400);
}

/* Info */
.team-member-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-1);
}

.team-member-role {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin: 0;
}

.team-member-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
  transition: color var(--transition-fast);
}

.team-member:hover .team-member-name {
  color: var(--navy-light);
}

.team-member-license {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0;
}

/* Contact — stacked icon + text rows, compact */
.team-member-contact {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.team-member-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: color var(--transition-fast);
  word-break: break-word;
}

.team-member-action svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gray-500);
  transition: color var(--transition-fast);
}

.team-member-action:hover {
  color: var(--navy);
}

.team-member-action:hover svg {
  color: var(--cobalt);
}

/* ==========================================================================
   EDITORIAL PULLQUOTE — navy band with cobalt accent
   ========================================================================== */
.team-quote {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: var(--space-24) var(--space-6);
  overflow: hidden;
}

.team-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(43, 94, 212, 0.12), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(43, 94, 212, 0.08), transparent 60%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .team-quote { padding: var(--space-32) var(--space-6); }
}

.team-quote-inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

/* Scoped to the navy quote section so it doesn't override the footer's
   on-navy eyebrow. Cobalt on navy needs the brighter variant for AA. */
.team-quote .eyebrow--gold {
  color: var(--cobalt-bright);
}

.team-quote .eyebrow {
  display: inline-block;
  margin-bottom: var(--space-6);
}

.team-quote-text {
  position: relative;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.team-quote-text p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-style: normal; /* brand: no full-sentence italics; Playfair upright carries the pull-quote */
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
  margin: 0;
  letter-spacing: -0.01em;
}

.team-quote-mark {
  font-family: var(--font-display);
  position: absolute;
  top: -0.5em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4rem;
  line-height: 1;
  color: rgba(43, 94, 212, 0.45);
  pointer-events: none;
}

.team-quote-attribution {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-8);
}

/* ==========================================================================
   FINAL CTA — light, matches home + services pattern
   ========================================================================== */
.team-final-cta {
  padding: var(--space-24) 0;
  text-align: center;
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
  border-top: 1px solid var(--border);
}

.team-final-cta .eyebrow {
  color: var(--gray-500);
  margin-bottom: var(--space-3);
}

.team-final-cta-title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.015em;
}

.team-final-cta-body {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  max-width: 56ch;
  margin: 0 auto var(--space-8);
  line-height: 1.55;
}

.team-final-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ==========================================================================
   EMPTY STATE (no members yet)
   ========================================================================== */
.empty-state {
  text-align: center;
  padding: var(--space-24) var(--space-6);
  max-width: 520px;
  margin: 0 auto;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  color: var(--cobalt);
  margin-bottom: var(--space-6);
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

.empty-state-message {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   EYEBROW (declare inline so this page's stylesheet is self-contained)
   ========================================================================== */


/* Scroll reveal shared */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .team-member,
  .team-hero-title,
  .team-hero-desc,
  .team-member-photo img,
  .team-member-photo::after {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}