/* ── Sub-page shell (matches index h2 / body scale) ─────────────── */ .page-hero { padding: calc(var(--pad-y) * 0.85) 0 calc(var(--pad-y) * 0.25); } .page-hero-inner, .page-body-inner { max-width: 820px; } .page-body-inner { position: relative; padding-top: 26px; } .page-body-inner::before { content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--teal)); } .page-kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; margin: 0 0 22px; } .page-h1 { font-family: var(--sans); font-optical-sizing: auto; font-weight: 620; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.015em; line-height: 1.18; color: var(--page-text); margin: 0 0 20px; } .page-lede { font-family: var(--sans); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--page-text-secondary); max-width: 720px; margin: 0; } .page-body { padding: calc(var(--pad-y) * 0.32) 0 calc(var(--pad-y) * 0.62); } .page-p { font-family: var(--sans); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.72; color: var(--page-text-secondary); margin: 0 0 20px; text-align: left; } .page-p:last-child { margin-bottom: 0; } .page-sect { background: transparent !important; border: 0 !important; } /* ── Page tone variants (scoped to page content, not ) ───── Using --page-text / --page-text-secondary so we do NOT stomp the site-wide --text tokens the fixed nav panel relies on. */ .page-tone-warm { background: #f4f0e8; --page-text: #14171f; --page-text-secondary: rgba(20,23,31,0.72); } .page-tone-blue { background: #0d1a2e; --page-text: #ecf1fa; --page-text-secondary: rgba(236,241,250,0.75); } .page-tone-deep { background: #080a10; --page-text: #ecedf1; --page-text-secondary: rgba(236,237,241,0.75); } .page-tone-slate { background: #1a1f2b; --page-text: #ecedf1; --page-text-secondary: rgba(236,237,241,0.75); } /* ── Team grid ────────────────────────────────────────────────── */ .page-team { padding: calc(var(--pad-y) * 0.15) 0 calc(var(--pad-y) * 0.55); } .team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); max-width: 1000px; } .team-card { display: flex; flex-direction: column; } .team-card:nth-child(2) { margin-top: clamp(20px, 3vw, 34px); } .team-card:nth-child(3) { margin-top: clamp(8px, 1.2vw, 14px); } .team-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); margin-bottom: 20px; } .team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; transform: scale(1.001); transition: transform .6s cubic-bezier(.16,1,.3,1); } .team-card:hover .team-photo img { transform: scale(1.035); } @media (max-width: 760px) { .team-card:nth-child(2), .team-card:nth-child(3) { margin-top: 0; } } .team-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16,1,.3,1); } .team-card:hover .team-photo::after { transform: scaleX(1); } .team-name { font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--page-text); margin-bottom: 4px; } .team-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .team-bio { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--page-text-secondary); } @media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; gap: 32px; max-width: 360px; } } /* ── Why-this-team / Building-with-brokerages subsections ────────── */ .page-subsect { padding: calc(var(--pad-y) * 0.5) 0; border-top: 1px solid var(--border); } /* deep-navy override for a single subsection while the rest of the page stays cream — same custom-property trick the band system uses, scoped locally instead of on . Angle divider matches the homepage capabilities section: a cream wedge cut into the navy top edge. */ .tone-deep-navy { background: #080b11 !important; border-top: 0 !important; --page-text: #ecf1fa; --page-text-secondary: rgba(236,241,250,0.75); position: relative; overflow: hidden; } .tone-deep-navy::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 64px; background: #f4f0e8; clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 60% 100%, 0% 32%); pointer-events: none; } .page-subsect .page-kicker { margin-bottom: 18px; } .page-h2 { font-family: var(--sans); font-optical-sizing: auto; font-weight: 620; font-size: clamp(20px, 2.1vw, 26px); letter-spacing: -0.015em; line-height: 1.24; color: var(--page-text); margin: 0 0 18px; max-width: 26ch; } /* ── Sub-page nav stays legible over any tone ───────────────────── */ .page nav#nav { background: rgba(10,12,18,0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); } .page nav#nav .nav-link, .page nav#nav .logo-word { color: #ecedf1; } .page nav#nav .nav-link:hover { color: #fff; }