/* About page. Linked last so it wins over the shared critical CSS.
   Team regions are three equal columns. People stack under the pill.
   The principles band uses a shorter row. */

.tregions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  width: 100%;
}
.tregions > .tregion + .tregion { margin-top: 0; }
.tregion h3 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--meadow);
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left;
}
.tgrid {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 18px 0 0;
  padding: 0;
}
.tperson {
  border-top: 1px solid #d9d5cd;
  padding: 14px 0 16px;
}
.tperson .tn {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
}
.tperson .tr {
  margin-top: 4px;
  font-size: .9rem;
  color: #4a5048;
}

@media (min-width: 768px) {
  .tregions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 32px;
  }
}

.about-lead { padding-bottom: clamp(56px, 6vw, 88px); }

/* Full-width stats band: deep brand green, refined light dotted world map with gold office markers. */
.decade-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, #122a0e 0%, #2b4c14 52%, #1d3b11 100%);
  color: #fff;
}
.decade-map {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
}
.decade-map img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: .2;
}
.decade-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 72px;
  padding-bottom: 72px;
}
.decade-band h2 {
  margin: 0;
  max-width: none;
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: clamp(23px, calc(19px + 0.9vw), 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.decade-sub {
  margin: 14px 0 0;
  max-width: 34rem;
  color: #e6dfc9;
  font-size: 1rem;
  line-height: 1.5;
}
.decade-stats {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
}
.decade-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 108px;
  margin: 0;
  padding: 22px 18px;
  border-radius: 10px;
  background: #23400f;
  border: 1px solid rgba(211, 174, 109, .3);
}
.decade-fig {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #d9b877;
}
.decade-label {
  margin: 0;
  font-size: .98rem;
  line-height: 1.35;
  color: #e9e2cd;
}
@media (min-width: 800px) {
  .decade-in { padding-top: 88px; padding-bottom: 88px; }
  .decade-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
  }
  .decade-stats li { min-height: 148px; padding: 30px 24px; }
}

.band.has-hollow h2 {
  margin-bottom: 28px;
}
.band.has-hollow .row {
  padding-top: 26px;
  padding-bottom: 26px;
}

/* How we work: sticky stacking cards. Each step pins under the header at an
   incremental top offset, so the next card slides up over the previous one;
   covered cards scale down and dim slightly via --hw-p (0..1, set from
   about.html scroll JS). Single card style — no alternating stripes. */
#how-we-work .how-list{display:grid;gap:16px;width:100%;max-width:none;margin-top:44px;padding:0;list-style:none}
#how-we-work .how-step{position:sticky;top:calc(112px + var(--hw-i,0)*14px)}
#how-we-work .how-step:nth-child(1){--hw-i:0}
#how-we-work .how-step:nth-child(2){--hw-i:1}
#how-we-work .how-step:nth-child(3){--hw-i:2}
#how-we-work .how-step:nth-child(4){--hw-i:3}
#how-we-work .how-step:nth-child(5){--hw-i:4}
#how-we-work .how-step:nth-child(6){--hw-i:5}
#how-we-work .how-step:nth-child(7){--hw-i:6}
#how-we-work .how-card{display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.1fr);column-gap:32px;align-items:baseline;box-sizing:border-box;padding:30px 36px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 -16px 34px rgba(13,23,5,.10),0 1px 4px rgba(13,23,5,.06);transform-origin:top center;transform:scale(calc(1 - var(--hw-p,0)*.045));filter:brightness(calc(1 - var(--hw-p,0)*.06))}
#how-we-work .how-card .num{font-family:'Fraunces',Georgia,serif;font-size:22px;line-height:1.28;color:var(--meadow)}
#how-we-work .how-card h3{margin:0;color:var(--ink)}
#how-we-work .how-card .body-s{margin:0;color:var(--ink-2)}
@media(max-width:900px){
  #how-we-work .how-list{gap:12px;margin-top:32px}
  #how-we-work .how-step{top:calc(96px + var(--hw-i,0)*11px)}
  #how-we-work .how-card{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"num title" "body body";column-gap:14px;row-gap:8px;align-items:start;padding:20px 22px;border-radius:14px}
  #how-we-work .how-card .num{grid-area:num;font-size:18px}
  #how-we-work .how-card h3{grid-area:title}
  #how-we-work .how-card .body-s{grid-area:body}
}
@media(prefers-reduced-motion:reduce){
  #how-we-work .how-card{transform:none;filter:none}
}

.pass-band{position:relative;isolation:isolate;overflow:hidden;background:#f4efe4;color:var(--ink)}
.pass-band-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding-top:64px;padding-bottom:32px}
.pass-band h2{margin:0;color:#2f4e0b;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(28px,calc(23.3px + 1.143vw),44px);line-height:1.05;letter-spacing:-.02em;max-width:11em}
.pass-band-copy p{margin:14px 0 0;max-width:28rem;color:#3c4038;font-size:1.05rem;line-height:1.5}
.pass-band .btn{margin-top:22px;background:transparent;color:#2f4e0b;border:1px solid #2f4e0b}
.pass-band .btn:hover{background:#2f4e0b;color:#fff}
.pass-band-photo{width:100%}
.pass-band .ph-img{aspect-ratio:6/5;background:#e7dcc8}
.pass-band .ph-img img{object-position:50% 42%}
.pass-band .ph-img:hover img{transform:none}
.pass-credit{margin:10px 0 0;font-size:.75rem;color:#6d675c}
.pass-credit a{text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){
  .pass-band-in{flex-direction:row;align-items:center;justify-content:space-between;gap:64px;padding-top:88px;padding-bottom:44px}
  .pass-band-copy{max-width:34rem;flex:1 1 auto}
  .pass-band-photo{width:min(46%,480px);flex:none}
}