/* Hallmark · shape: long document with a bench · genre: editorial · theme: custom (Ben's brand system, locked) · job: hire · idea: "the people and the years behind the name on the wall" · vibe: "institutional, calm, exact, quietly confident"
 * paper: #FFFFFF (brand) · accent: #256868 teal (brand) · display: Archivo · body: Open Sans · hero: Ben's tagline with his purpose beside it, then the Taurus reception with the sign · nav: the site bar shared with the homepage · footer: granite, four columns shared with the homepage · imagery: Ben's own photos (reception, five headshots, the awards table) · signature: the leadership bench, five names as the menu with one person on stage and the full bio opening beside a smaller photo · surface: absolute
 * axes: light/grotesk-heavy/cool · posture: restrained · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a story page; the reception photo and the bench carry it */
/* Hallmark · answered F19 · four weights (300 lede and years, 400 body, 600 and 700 heads), the same set as every Taurus page */
/* Hallmark · answered F15 · one 64px column gap below the hero; the bench uses 24px, one nesting level down */

/* ---------- shared bits ---------- */
.small-h { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 2vw, 30px); line-height: 1.32; letter-spacing: -.018em; color: var(--heading); max-width: 30em; text-wrap: pretty; }
.ph { overflow: hidden; background: var(--fieldstone); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 1. Page head ---------- */
.ab-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: end; }
.ab-head h1 { margin-bottom: var(--space-5); }
.purpose { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--taurus-teal); }
.office .ph { aspect-ratio: 21 / 8; }
.office img { object-position: 50% 46%; }

/* ---------- 2. Our Story ---------- */
.story { padding-block: var(--space-8) var(--space-7); }
.story h2 { margin-bottom: var(--space-6); }
.years { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.years li { display: grid; align-content: start; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.yr { font-family: var(--font-display); font-weight: 300; font-variation-settings: "wdth" 84; font-size: clamp(56px, 6.4vw, 104px); line-height: .9; letter-spacing: -.045em; color: var(--taurus-teal); font-variant-numeric: lining-nums; }
.years p { max-width: 28em; }

/* ---------- 3. Why Principal-Led Matters ---------- */
.principal { background: var(--surface-alt); color: var(--text); }
.pl-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); padding-block: var(--space-7); }
.pl-in h2 { max-width: 9em; }
.nw { white-space: nowrap; }
.pl-copy { display: grid; gap: var(--space-5); }
.principal .statement { color: var(--text); }
.principal .lede { color: var(--text-muted); }
.pl-end { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--on-deep-rule); }
.punch { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -.035em; color: var(--white); max-width: 13em; text-wrap: balance; }

/* ---------- 4. Leadership: names as the menu, one person on stage ---------- */
.lead { padding-block: var(--space-8) var(--space-7); }
.lead h2 { margin-bottom: var(--space-6); }
.bench { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.roster { display: grid; border-bottom: 1px solid var(--rule); }
.rn { position: relative; display: grid; gap: var(--space-1); justify-items: start; text-align: left; width: 100%; min-height: 52px; padding: var(--space-35) 0 var(--space-35) var(--space-4); border: 0; border-top: 1px solid var(--rule); background: none; color: var(--text-muted); font: inherit; cursor: pointer; transition: color .3s var(--ease); }
.rn::before { content: ""; position: absolute; left: 0; top: var(--space-35); bottom: var(--space-35); width: 3px; background: var(--taurus-teal); transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--ease); }
.rn b { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3vw, 46px); line-height: 1.02; letter-spacing: -.03em; overflow-wrap: break-word; min-width: 0; }
.rn span { font-size: 15px; line-height: 1.35; }
.rn b, .rn span { white-space: nowrap; }
.rn b, .rn span { opacity: .62; transition: opacity .3s var(--ease); }
.rn:hover b, .rn:hover span, .rn[aria-selected="true"] b, .rn[aria-selected="true"] span { opacity: 1; }
.rn:hover { color: var(--heading); }
.rn[aria-selected="true"] { color: var(--taurus-teal); }
.rn[aria-selected="true"]::before { transform: scaleY(1); }
.rn[aria-selected="true"] span { color: var(--taurus-teal); font-weight: 600; }
.rn:active { opacity: .75; }
.rn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; transition: none; }
.rn:disabled { opacity: .5; cursor: not-allowed; }

.stage { display: grid; }
.pp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 var(--space-5); align-content: start; }
.pf { grid-row: 1 / span 6; overflow: hidden; background: var(--fieldstone); aspect-ratio: 4 / 5; }
.pf img { width: 100%; height: 100%; object-fit: cover; }
.pn { font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.role { font-size: 15px; line-height: 1.4; color: var(--taurus-teal); font-weight: 600; margin-top: var(--space-1); }
.short { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-top: var(--space-5); align-self: start; font-size: 16px; line-height: 1.55; color: var(--text); }
.short li { padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.more { justify-self: start; align-self: end; font: inherit; font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.2; min-height: 44px; padding: var(--space-2) 0; margin-top: var(--space-4); border: 0; background: none; color: var(--link); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; cursor: pointer; transition: color .2s var(--ease), opacity .15s ease; }
.more:hover { color: var(--taurus-teal); text-decoration-thickness: 2px; }
.more:active { opacity: .7; }
.more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; transition: none; }
.more:disabled { opacity: .5; cursor: not-allowed; }

/* With the script: the panels share one spot and cross-fade; without it, each person is listed in turn. */
.bench:not(.ready) .roster { display: none; }
.bench:not(.ready) { grid-template-columns: minmax(0, 1fr); }
.bench:not(.ready) .stage { gap: var(--space-7); }
.bench.ready .pp { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s .35s; }
.bench.ready .pp.on { visibility: visible; opacity: 1; transition: opacity .45s var(--ease) .05s, visibility 0s; }
.motion .bench.ready .pp .pf img { transform: scale(1.04); transition: transform 1.1s var(--ease); }
.motion .bench.ready .pp.on .pf img { transform: none; }
.motion .bench.ready .pp > :not(.pf):not(.full) { transform: translateY(10px); transition: transform .6s var(--ease); }
.motion .bench.ready .pp.on > :not(.pf):not(.full) { transform: none; }

/* The full bio: the photo shrinks to the corner and the bio takes the space beside it */
.full { display: grid; gap: var(--space-4); font-size: 17px; line-height: 1.7; grid-column: 1 / -1; margin-top: var(--space-5); }
.full p { max-width: 36em; }
.full .roles { list-style: none; padding: 0; display: grid; gap: var(--space-1); font-size: 15px; color: var(--text-muted); }
.bench.ready .full { display: none; }
.bench.ready .pp.open .full { display: grid; grid-column: 2; margin-top: 0; }
.bench.ready .pp.open .short { display: none; }
.bench.ready .pp.open { grid-template-columns: 9.5em minmax(0, 1fr); gap: 0 var(--space-6); }
.bench.ready .pp.open .pf { grid-row: 1 / span 6; aspect-ratio: 4 / 5; margin: 0; position: sticky; top: var(--space-7); align-self: start; }
.bench.ready .pp.open .more { grid-column: 2; }
.pf.flip { transform-origin: 0 0; }
.motion .bench.ready .pp.open .full { animation: full-in .6s var(--ease) .12s backwards; }
@keyframes full-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- 5. Who We Serve ---------- */
.serve { background: var(--fieldstone); }
.serve-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); padding-block: var(--space-7); }
/* We work with the industry's best: client logos, one muted colour, full colour on hover (as the homepage tenant logos) */
.clients { grid-column: 1 / -1; padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.clients-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; color: var(--heading); text-align: center; }
.client-logos { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5) var(--space-6); }
.client-logos li { display: grid; place-items: center; height: 64px; }
.client-logos img { width: auto; height: 40px; max-width: 200px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .4s, opacity .4s; }
.client-logos li:hover img { filter: none; opacity: 1; }
.who { list-style: none; padding: 0; border-bottom: 1px solid var(--rule); }
.who li { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-top: 1px solid var(--rule); }
.who b { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.025em; color: var(--heading); }
.who span { color: var(--text-muted); max-width: 32em; }

/* ---------- 6. Industry and Community ---------- */
.community { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-6); align-items: start; padding-block: var(--space-8); }
.com-ph .ph { aspect-ratio: 3 / 2; }
.com-ph figcaption { margin-top: var(--space-25); font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.com-copy h2 { margin-bottom: var(--space-4); max-width: 8em; }
.com-lede { margin-bottom: var(--space-5); max-width: 30em; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; font-weight: 300; color: var(--text); }
.orgs { list-style: none; padding: 0; border-bottom: 1px solid var(--rule); }
.orgs li { padding-block: var(--space-25); border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.45; }

/* ---------- Responsive ---------- */
@media (min-width: 1101px) {
  .ab-head { padding-bottom: var(--space-6); }
}
@media (min-width: 901px) {
  .bench.ready .pn, .bench.ready .pp > .role { display: none; }
  .bench.ready .short { margin-top: 0; }
  .bench.ready .short li:first-child { padding-top: 0; border-top: 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .pp { grid-template-columns: minmax(0, 1fr); }
  .pf { grid-row: auto; margin-bottom: var(--space-5); aspect-ratio: 4 / 3.6; }
  .bench.ready .short li:first-child { padding-top: var(--space-3); border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  .ab-head, .pl-in, .serve-in, .community { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .client-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .client-logos img { height: 32px; max-width: 100%; }
  .client-logos li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .office .ph { aspect-ratio: 3 / 2; }
  .years { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .years li { grid-template-columns: 7.5em minmax(0, 1fr); align-items: baseline; }
  .yr { font-size: 48px; }
  .bench { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .roster { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: 0; gap: var(--space-2); }
  .roster::-webkit-scrollbar { display: none; }
  .rn { scroll-snap-align: start; border: 1px solid var(--rule); padding: var(--space-25) var(--space-35); min-height: 48px; align-content: center; }
  .rn::before { top: auto; bottom: -1px; left: -1px; right: -1px; width: auto; height: 3px; transform: scaleX(0); transform-origin: 0 50%; }
  .rn[aria-selected="true"]::before { transform: scaleX(1); }
  .rn b { font-size: 19px; letter-spacing: -.015em; }
  .rn span { display: none; }
  .pp { grid-template-columns: minmax(0, 1fr); }
  .pf { max-width: none; aspect-ratio: 4 / 4.4; }
  .bench.ready .pp.open { grid-template-columns: 5.5em minmax(0, 1fr); gap: 0 var(--space-4); }
  .bench.ready .pp.open .pn { align-self: end; }
  .bench.ready .pp.open > .role { align-self: start; }
  .bench.ready .pp.open .pf { grid-row: 1 / span 2; position: static; }
  .bench.ready .pp.open .full, .bench.ready .pp.open .more { grid-column: 1 / -1; }
  .bench.ready .pp.open .full { margin-top: var(--space-5); font-size: 16px; }
  .story, .lead { padding-block: var(--space-7) var(--space-6); }
  .community { padding-block: var(--space-7); }
}
@media (max-width: 640px) {
  .years li { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rn, .rn::before, .rn b, .rn span, .more, .bench.ready .pp, .bench.ready .pp.on { transition: none; }
}