/* hero-page */
/* ==========================================================================
   Page Hero — gradient band (surface-gradient has-mark), glass card + photo.
   ========================================================================== */

.m-hero-page{padding-block:clamp(40px, 4vw, 56px)}
.m-hero-page__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gap);align-items:stretch}
.m-hero-page__card{
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(320px, 28.5vw, 410px);
  padding:clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 32px);
}
.m-hero-page__title{color:var(--white)}
.m-hero-page__lead{margin:1.5rem 0 0;max-width:34ch}
.m-hero-page__lead:empty{display:none}
.m-hero-page__media{aspect-ratio:544 / 410;background:rgba(255,255,255,.1)}

@media (max-width: 820px){
  .m-hero-page__grid{grid-template-columns:minmax(0, 1fr)}
  .m-hero-page__card{min-height:0}
  .m-hero-page__media{aspect-ratio:16 / 10}
}

/* section-nav */
/* ==========================================================================
   Section Nav — equal-width tab row linking the pages of a section: grey tabs,
   the current page's tab brand blue. Scrolls sideways on narrow screens, with
   the current tab scrolled into view (section-nav.js).
   ========================================================================== */

.m-section-nav{padding-top:clamp(20px, 2vw, 28px)}
.m-section-nav + .module{padding-top:clamp(32px, 4vw, 56px)}
.m-section-nav__list{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content, 1fr);gap:2px;
  margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;border-radius:8px;
}
.m-section-nav__list::-webkit-scrollbar{display:none}
.m-section-nav__link{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.25rem;
  background:var(--grey-50);color:var(--ink-strong);font-size:var(--step-body);font-weight:500;
  white-space:nowrap;transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
a.m-section-nav__link:hover{background:var(--grey-100)}
.m-section-nav__link.is-active,
.m-section-nav__link.is-active:hover{background:var(--brand);color:var(--white)}

@media (prefers-reduced-motion: reduce){
  .m-section-nav__link{transition:none}
}

/* team-grid */
/* ==========================================================================
   Team Grid — heading block, then .grid-3 of .grey-card people cards:
   photo (black and white, ~3:2), name, blue role, remit, a blue hairline,
   then years (blue) over areas of experience.
   ========================================================================== */

.m-team-grid__head{margin-bottom:clamp(20px, 2.2vw, 32px)}
.m-team-grid__eyebrow{margin:0 0 .25rem;font-weight:400}
.m-team-grid__eyebrow:empty{display:none}
.m-team-grid__intro{margin:.75rem 0 0;max-width:70ch}
.m-team-grid__intro:empty{display:none}

.m-team-grid__grid{margin:0;padding:0;list-style:none}
.m-team-grid__card{display:flex;flex-direction:column}
.m-team-grid__photo{aspect-ratio:200 / 139;margin-bottom:1.5rem;background:#c4c4c4}
.m-team-grid__img{filter:grayscale(1)}
.m-team-grid__name{margin:0}
.m-team-grid__role{margin:.25rem 0 0;color:var(--brand);font-size:var(--step-lead)}
.m-team-grid__bio{margin:1.25rem 0 0;line-height:1.5}
.m-team-grid__experience{
  margin:1.25rem 0 0;padding-top:1.25rem;border-top:1px solid var(--brand);
  line-height:1.5;
}
.m-team-grid__years{display:block;color:var(--brand);font-size:var(--step-lead);margin-bottom:.1rem}
.m-team-grid__empty{color:var(--ink-muted)}