/* ============================================================
   who-we-are.css — WHO WE ARE page-specific styles.
   Shared chrome + hero + two-col + ready + our-loc + primitives in /site.css.
   ============================================================ */

.hero { height: 880px; }

/* ---- INTRO + LEADERSHIP TEAM ---- */
.intro { padding: 96px 0 0; text-align: center; }
.intro p { color: var(--ink-soft); font-size: 17px; line-height: 27px; max-width: 900px; margin: 0 auto; }

.team { padding: 60px 0 64px; }
.team .serif-title { text-align: center; margin-bottom: 48px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; }
/* cards share the grid's row tracks so every photo (and meta row) in a row sits
   level, however many lines the name/role wrap to. row-gap: 0 keeps the card's
   internal rhythm on its own margins instead of the grid's 40px band gap. */
@supports (grid-template-rows: subgrid) {
  .tcard { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
}
.tcard .tname { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.tcard .trole { font-size: 16px; color: var(--ink-soft); margin-bottom: 14px; }
.tcard img { width: 100%; aspect-ratio: 286 / 220; object-fit: cover; margin-bottom: 14px; }
.tmeta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; line-height: 17px; }
.tmeta .k { color: var(--cap); }
.tmeta .v { color: var(--ink); font-weight: 600; }

/* ---- FULL TEAM (WWA-01, R2-WWA-02) — every office's advisors as the SAME photo
   cards as the leadership grid above (.tcard/.team-grid), organised in per-city
   TABS. The tab bar is the shared .tabnav component (site.css); the panel
   show/hide contract below mirrors what-we-do.css / luxury-cruising.css
   (.travel) — keep the three in sync. The old cream name/role bubbles
   (.tb-group/.team-bubbles/.bubble) are gone with their markup. ---- */
.team-full { padding: 24px 0 44px; text-align: center; }
.team-full .serif-title { margin-bottom: 12px; }
.team-full-intro { color: var(--ink-soft); font-size: 16px; line-height: 25px; max-width: 720px; margin: 0 auto; }
.travel { padding: 56px 0 40px; display: none; }
.travel.is-active { display: block; }

/* ---- TEAM STORY (group photo + heading + text) ---- */
.story2 { padding: 56px 0 110px; }
.story2-grid { gap: 56px; align-items: center; }
.story2-media img { aspect-ratio: 612 / 446; }
.story2-text .serif-title { font-size: 40px; line-height: 50px; margin-bottom: 28px; }
/* HOME-06 rework2: the split remainder renders as plain paragraphs — one uniform
   body style under the serif statement (the old 17px .lead read as an odd offset). */
.story2-text p { color: var(--ink-soft); font-size: 15px; line-height: 24px; margin-bottom: 20px; max-width: 560px; }

/* ---- PARTNERS / AWARDS ---- */
.partners { padding: 92px 0 70px; text-align: center; }
.partners .serif-title { margin-bottom: 44px; }
.partner-logos { width: 100%; max-width: 1272px; margin: 0 auto 40px; display: block; }
.partners .p-lead { font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 16px; }
.partners .p-body { color: var(--ink-soft); font-size: 16px; line-height: 25px; max-width: 880px; margin: 0 auto 34px; }

/* R2-WWA-04: bottom trimmed 80→48 — the 'Recognised excellence' copy now follows as
   part of this block, so the seam matches the heading→grid rhythm, not a section gap. */
.awards { padding: 40px 0 48px; text-align: center; }
.awards .serif-title { margin-bottom: 48px; }
/* Real award badges (5), centred — not the 12 grey placeholder squares from the mockup. */
.awards-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 40px 56px;
}
.award { flex: 0 0 auto; }
.award img { height: 132px; width: auto; object-fit: contain; }
.award-ph { aspect-ratio: 1 / 1; background: #ededed; border-radius: 4px; }

/* The shared logo strip sits inside this page's white section. */
.partners .logos { padding: 8px 0 40px; }

/* ---- GOLDMAN STORY ---- */
.goldman { padding: 70px 0 30px; text-align: center; }
.goldman .serif-title { margin-bottom: 44px; }   /* GLOB-02: dropped the line-height:80px restatement of the old token */
.goldman-grid { gap: 56px; align-items: center; text-align: left; }
.goldman-text p { color: var(--ink-soft); font-size: 15px; line-height: 24px; margin-bottom: 22px; max-width: 540px; }
.goldman-links { display: flex; flex-direction: column; gap: 10px; }
.goldman-links a { font-size: 14px; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.goldman-media img { aspect-ratio: 596 / 360; object-fit: cover; }
.recognised { padding: 40px 0 80px; text-align: center; }
/* R2-WWA-04: the band sits directly under the Awards badges — drop its top padding so
   the lead reads as part of the Awards story (.awards' trimmed bottom padding is the
   whole seam). Two-class specificity also wins over the ≤900px padding shorthand. */
.awards + .recognised { padding-top: 0; }
.recognised .r-lead { font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 16px; }
.recognised .r-body { color: var(--ink-soft); font-size: 15px; line-height: 24px; max-width: 980px; margin: 0 auto 30px; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .awards-grid { gap: 32px 40px; }
  .award img { height: 108px; }
  .story2-grid, .goldman-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .awards-grid { gap: 26px 30px; }
  .award img { height: 88px; }
}

/* awards CTAs + the main site's four brand cards (sheet '4 column format') */
.awards-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.wwa-brands { padding: 84px 0; }

/* ============================================================
   GLOB-03 — MOBILE SECTION RHYTHM (who we are).
   No section here had a phone-scale padding override — the 40-110px
   desktop bands (story2's 110px bottom especially) carried straight onto
   phones. One rhythm ≤900px: standard sections 56-64px, seams between
   consecutive white sections ~32-48px, stacked photo↔copy gaps 32px.
   Additive only — desktop rules untouched.
   ============================================================ */
@media (max-width: 900px) {
  .intro { padding-top: 64px; }
  .team { padding: 48px 0 56px; }
  .team .serif-title { margin-bottom: 32px; }
  .team-full { padding: 8px 0 32px; }
  .travel { padding: 40px 0 24px; }   /* R2-WWA-02: city tab panels, matches WWD's ≤900px rhythm */
  .story2 { padding: 40px 0 64px; }
  .story2-grid { gap: 32px; }              /* stacked at ≤1024 but kept the 56px desktop gap */
  .partners { padding: 64px 0 48px; }
  .partners .serif-title { margin-bottom: 32px; }
  .awards { padding: 32px 0; }   /* R2-WWA-04: 32px seam to the recognised copy below */
  .awards .serif-title { margin-bottom: 32px; }
  .goldman { padding: 56px 0 24px; }
  .goldman .serif-title { margin-bottom: 32px; }
  .goldman-grid { gap: 32px; }
  .recognised { padding: 32px 0 64px; }
  .wwa-brands { padding: 64px 0; }
}
.wwa-brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1232px; margin: 0 auto; text-align: center; }
.wwa-brand h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.wwa-brand p { font-size: 15px; line-height: 23px; color: var(--ink-soft); margin-bottom: 20px; }
/* R2-WWA-06: the four descriptions run to different lengths (Brisbane's is the
   longest), so the buttons sat at four different heights inside cards the grid
   had already stretched to equal height. Column flex + margin-top:auto drops
   every "Discover More" onto one baseline; align-self keeps the shrink-to-fit
   centred pill (site.css still takes them full width ≤560px). */
.wwa-brand { display: flex; flex-direction: column; }
.wwa-brand .btn-outline { margin-top: auto; align-self: center; }
@media (max-width: 900px) { .wwa-brand-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wwa-brand-grid { grid-template-columns: 1fr; } }