.about-intro {
  padding:5rem 3rem;
  max-width:none;
  margin:0
}

.about-intro .intro__body {
  max-width:780px;
  margin:2.5rem auto 0;
  padding:0 0 1rem;
  text-align:left;
  display:block
}

.about-intro .intro__lead {
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.55;
  color:var(--text);
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:1.6rem;
  text-wrap:pretty
}

.about-intro .intro__lead::first-letter {
  font-family:var(--display);
  font-weight:400;
  font-size:6.5rem;
  line-height:.85;
  float:left;
  padding:.45rem .65rem 0 0;
  color:var(--accent-strong)
}

.about-intro .intro__body p {
  font-size:1.08rem;
  line-height:1.75;
  color:var(--text-soft);
  margin-bottom:1.1rem;
  text-wrap:pretty
}

.intro__stats {
  max-width:780px;
  margin:2.5rem auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  background:var(--text);
  color:#fff
}

.intro__stats > div {
  padding:1.6rem 1.4rem;
  border-right:1px solid rgba(255,255,255,.12)
}

.intro__stats > div:last-child {
  border-right:none
}

.intro__stats strong {
  font-family:var(--display);
  font-weight:400;
  font-size:2.2rem;
  line-height:1;
  color:var(--accent);
  display:block;
  margin-bottom:.4rem;
  letter-spacing:.01em
}

.intro__stats span {
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--border-strong);
  line-height:1.4;
  display:block
}

@media(max-width:780px) {
  .about-intro {
    padding:3.5rem 1.2rem
  }
  .about-intro .intro__lead {
    font-size:1.2rem
  }
  .about-intro .intro__lead::first-letter {
    font-size:4.5rem
  }
  .intro__stats {
    grid-template-columns:1fr
  }
  .intro__stats > div {
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.12)
  }
  .intro__stats > div:last-child {
    border-bottom:none
  }
  .intro__stats strong {
    font-size:1.8rem
  }
}

/* Values */
.vals {
  padding:5rem 3rem;
  background:var(--bg-alt)
}

.vals-grid {
  max-width:980px;
  margin:2.5rem auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem
}

.val {
  background:#fff;
  border:1px solid rgba(44,64,67,.08);
  padding:1.8rem 1.7rem;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}

.val:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(44,64,67,.09);
  border-color:rgba(44,64,67,.16)
}

.val-head {
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:.9rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(44,64,67,.08)
}

.val-num {
  font-family:var(--display);
  font-weight:400;
  font-size:1.9rem;
  line-height:1;
  color:var(--accent-strong);
  letter-spacing:.005em;
  flex:0 0 auto
}

.val-title {
  font-family:var(--display);
  font-weight:400;
  font-size:1.25rem;
  line-height:1.15;
  letter-spacing:.005em;
  color:var(--text)
}

.val p {
  font-size:.98rem;
  line-height:1.65;
  color:var(--text-soft)
}

@media(max-width:780px) {
  .vals {
    padding:3.5rem 1.2rem
  }
  .vals-grid {
    grid-template-columns:1fr
  }
}

/* Team */
.team {
  padding:5rem 3rem
}

.team__grid {
  max-width:1280px;
  margin:2.5rem auto 0;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:3rem;
  align-items:start
}

.team__list {
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(44,64,67,.14)
}

.team-member {
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:1.1rem;
  align-items:center;
  padding:1rem .8rem;
  border-bottom:1px solid rgba(44,64,67,.12);
  cursor:pointer;
  background:transparent;
  text-align:left;
  color:inherit;
  width:100%;
  transition:background-color .25s ease,padding-left .25s ease
}

.team-member:hover {
  background:rgba(44,64,67,.03);
  padding-left:1.2rem
}

.team-member.is-active {
  background:var(--text);
  color:#fff;
  padding-left:1.2rem;
  border-color:var(--text)
}

.team-member.is-active + .team-member {
  border-top:1px solid var(--text)
}

.team-member.is-active .team-member__cat {
  color:var(--accent)
}

.team-member.is-active .team-member__arrow {
  color:var(--accent);
  opacity:1;
  transform:translateX(2px)
}

.team-member__photo {
  width:64px;
  height:64px;
  object-fit:cover;
  background:var(--text);
  filter:grayscale(.25) contrast(1.05);
  transition:filter .25s
}

.team-member.is-active .team-member__photo {
  filter:grayscale(0) contrast(1.05)
}

.team-member__body {
  min-width:0;
  line-height:1.3;
  display:flex;
  flex-direction:column;
  gap:.25rem
}

.team-member__name {
  font-family:var(--display);
  font-weight:400;
  font-size:1.1rem;
  letter-spacing:.005em;
  line-height:1.05
}

.team-member__cat {
  font-family:var(--sans);
  font-size:.55rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:700;
  transition:color .25s
}

.team-member__arrow {
  font-family:var(--display);
  font-size:1.05rem;
  color:rgba(44,64,67,.3);
  opacity:0;
  transition:opacity .25s,transform .25s,color .25s;
  line-height:1
}

.team-member:hover .team-member__arrow {
  opacity:.7
}

.team__detail {
  background:#fff;
  border:1px solid rgba(44,64,67,.08);
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:0;
  min-height:520px;
  animation:fadein .35s ease
}

@keyframes fadein {
  from {
    opacity:0;
    transform:translateY(4px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

.team-detail__img {
  position:relative;
  background:var(--text);
  overflow:hidden
}

.team-detail__img img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(.15) contrast(1.05);
  min-height:100%
}

.team-detail__cat {
  position:absolute;
  top:1rem;
  left:1rem;
  font-family:var(--sans);
  font-size:.55rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  background:var(--accent);
  color:var(--text);
  padding:.45rem .75rem;
  line-height:1
}

.team-detail__body {
  padding:2.2rem 2.2rem;
  border-left:3px solid var(--accent);
  display:flex;
  flex-direction:column;
  min-height:0
}

.team-detail__role {
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:700;
  margin-bottom:.8rem
}

.team-detail__name {
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.8rem,2.8vw,2.4rem);
  line-height:1.1;
  letter-spacing:.005em;
  color:var(--text);
  margin-bottom:.4rem
}

.team-detail__city {
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:1.4rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid rgba(44,64,67,.12)
}

.team-detail__bio {
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.65;
  color:var(--text-soft);
  margin-bottom:1.6rem;
  flex:1;
  text-wrap:pretty
}

/* On desktop the card is a fixed-height two-column layout, so a long bio
   scrolls inside itself instead of stretching the whole card. Understated
   always-visible scrollbar matching the lead form (small, transparent track). */
@media(min-width:1001px) {
  .team__detail {
    height:520px;
    /* Force the single grid row to fill (and be capped by) the fixed height.
       Without this the auto row sizes to the full bio and overflows the card,
       so the bio never scrolls. minmax(0,1fr) lets the row shrink to 520px. */
    grid-template-rows:minmax(0,1fr)
  }
  .team-detail__bio {
    min-height:0;
    /* scroll (not auto) so the bar is always rendered, never fades out */
    overflow-y:scroll;
    padding-right:.6rem
  }
  /* NB: intentionally NO scrollbar-width/scrollbar-color here — when those
     standard props are set, Chrome 121+ uses the standard (overlay, fading)
     scrollbar and ignores ::-webkit-scrollbar. Relying only on the WebKit
     pseudo-elements below keeps the bar persistent (appearance:none + a solid
     thumb with a hairline shadow forces a non-overlay bar that never fades). */
  .team-detail__bio::-webkit-scrollbar {
    -webkit-appearance:none;
    width:6px
  }
  .team-detail__bio::-webkit-scrollbar-thumb {
    border-radius:4px;
    background:rgba(44,64,67,.45);
    box-shadow:0 0 1px rgba(255,255,255,.5)
  }
  .team-detail__bio::-webkit-scrollbar-thumb:hover {
    background:rgba(44,64,67,.6)
  }
}

.team-detail__foot {
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px solid rgba(44,64,67,.1);
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap
}

.team-detail__foot .lbl {
  font-family:var(--sans);
  font-size:.55rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:700;
  margin-right:.3rem
}

.team-detail__foot a {
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-alt);
  color:var(--text);
  transition:all .2s
}

.team-detail__foot a:hover {
  background:var(--text);
  color:var(--accent)
}

.team-detail__foot svg {
  width:15px;
  height:15px
}

.team-detail__num {
  margin-left:auto;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:700
}

@media(max-width:1000px) {
  .team__grid {
    grid-template-columns:1fr;
    gap:2rem
  }
  .team__detail {
    grid-template-columns:1fr;
    min-height:auto
  }
  /* Detail card inlined between guides on mobile — a little breathing room. */
  .team__list .team__detail {
    margin:.4rem 0 1.4rem
  }
  /* Small gap above the guide when the page scrolls to it on tap. */
  .team-member {
    scroll-margin-top:1rem
  }
  .team-detail__img {
    aspect-ratio:16/9
  }
  .team-detail__body {
    border-left:none;
    border-top:3px solid var(--accent)
  }
}

@media(max-width:560px) {
  .team {
    padding:3.5rem 1.2rem
  }
  .team-member {
    grid-template-columns:48px 1fr auto;
    gap:.85rem;
    padding:.85rem .6rem
  }
  .team-member__photo {
    width:48px;
    height:48px
  }
  .team-member__name {
    font-size:1rem
  }
  .team-detail__body {
    padding:1.6rem 1.4rem
  }
}

/* Founder letter */
.letter__wrap {
  background:var(--bg-alt);
  border-top:1px solid rgba(44,64,67,.08);
  border-bottom:1px solid rgba(44,64,67,.08)
}

.letter {
  max-width:780px;
  margin:0 auto;
  padding:5rem 3rem
}

.letter__eyebrow {
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:700;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.7rem
}

.letter__eyebrow::before {
  content:'';
  display:inline-block;
  width:24px;
  height:1px;
  background:var(--accent-strong)
}

.letter h2 {
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.8rem);
  line-height:1.05;
  letter-spacing:.005em;
  margin-bottom:2rem;
  max-width:20ch;
  text-wrap:balance
}

.letter__lead {
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.55;
  color:var(--text);
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:1.8rem;
  text-wrap:pretty
}

.letter__lead::first-letter {
  font-family:var(--display);
  font-weight:400;
  font-size:5.5rem;
  line-height:.85;
  float:left;
  padding:.4rem .55rem 0 0;
  color:var(--accent-strong)
}

.letter p {
  font-size:1.08rem;
  line-height:1.75;
  margin-bottom:1.2rem;
  color:var(--text-soft);
  text-wrap:pretty
}

.letter p strong {
  color:var(--text);
  font-weight:600
}

.letter__pq {
  margin:2.6rem 0;
  padding:1.4rem 0 1.4rem 1.8rem;
  border-left:4px solid var(--accent)
}

.letter__pq blockquote {
  font-family:var(--display);
  font-weight:400;
  font-size:1.6rem;
  line-height:1.2;
  letter-spacing:.005em;
  color:var(--text);
  max-width:32ch;
  text-wrap:balance
}

.letter__sign {
  margin-top:2.8rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(44,64,67,.18);
  display:flex;
  align-items:center;
  gap:1rem
}

.letter__sign img {
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  filter:grayscale(.3) contrast(1.05)
}

.letter__sign-meta {
  line-height:1.3
}

.letter__sign-meta .role {
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:700;
  margin-bottom:.2rem
}

.letter__sign-meta strong {
  font-family:var(--display);
  font-weight:400;
  font-size:1.15rem;
  letter-spacing:.005em
}

.letter__sign-meta span {
  display:block;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
  margin-top:.2rem
}

.endmark {
  display:inline-block;
  width:14px;
  height:14px;
  background:var(--accent);
  vertical-align:middle;
  margin-left:.4rem
}

@media(max-width:780px) {
  .letter {
    padding:3rem 1.2rem
  }
  .letter__lead {
    font-size:1.15rem
  }
  .letter__lead::first-letter {
    font-size:4rem
  }
}