/* FOUNDERS-01. Supplied portraits sit beneath supplied suit artwork. */
#founders { --founder-ease: cubic-bezier(.2,0,0,1); scroll-margin-top: 120px; }
#architecture .founders-header { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 64px; margin-bottom: 48px; }
#architecture .founders-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font: 500 12px/20px var(--font-body); letter-spacing: .1em; color: #a9b7c7; }
#architecture .founders-eyebrow > span { width: 7px; height: 7px; border: 1px solid #8fb6f0; border-radius: 50%; }
#architecture #founders-title { font: 600 clamp(40px,4.2vw,60px)/1.12 var(--font-primary); letter-spacing: -.045em; }
#architecture #founders-title > span { color: #8fb6f0; }
#architecture .founders-intro { max-width: 380px; padding-bottom: 4px; }
#architecture .founders-intro > p:first-child { font: 400 18px/28px var(--font-body); color: #a9b7c7; }
#architecture .founders-hint { margin-top: 20px; color: #a9b7c7; font: 400 12px/20px var(--font-body); }
#architecture .founders-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
#architecture .founder-card { min-width: 0; }
#architecture .founder-media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4.25; padding: 0; overflow: hidden; isolation: isolate; appearance: none; border: 1px solid #334052; border-radius: 12px; background: #10151d; color: #f4f4f0; text-align: left; opacity: 1; cursor: default; transition: border-color 220ms var(--founder-ease); -webkit-tap-highlight-color: transparent; }
#architecture .founder-media:not(:disabled) { cursor: pointer; }
#architecture .founder-media::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg,rgba(7,10,16,.7),transparent 22%,transparent 73%,rgba(7,10,16,.8)); }
#architecture .founder-portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#architecture .founder-portrait[hidden] { display: none; }
#architecture .founder-portrait.is-suit-fallback { object-fit: contain; padding: 28px 12px 30px; }
#architecture .founder-suit { position: absolute; inset: 0; z-index: 1; display: block; opacity: 0; background: radial-gradient(ellipse at 50% 32%,#202b3a 0%,#121b27 48%,#0a1019 100%); transition: opacity 220ms var(--founder-ease); }
#architecture .founder-suit img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 28px 12px 30px; }
#architecture .is-ready .founder-suit { opacity: 1; }
#architecture .is-ready.is-revealed .founder-suit { opacity: 0; }
#architecture .is-revealed .founder-media { border-color: #8fb6f0; }
#architecture .founder-media:focus-visible { outline: 2px solid #8fb6f0; outline-offset: 5px; }
#architecture .founder-media-top { position: absolute; z-index: 3; inset: 16px 18px auto; display: flex; align-items: center; justify-content: space-between; pointer-events: none; font: 400 10px/16px var(--font-body); letter-spacing: .08em; color: #d4dfed; }
#architecture .founder-index { font: 400 11px/16px var(--font-mono); color: #8fb6f0; }
#architecture .founder-reveal-control { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: none; align-items: center; gap: 12px; height: 28px; font: 500 11px/16px var(--font-body); color: #f4f4f0; pointer-events: none; }
#architecture .is-ready .founder-reveal-control { display: flex; }
#architecture .founder-reveal-control svg { color: #8fb6f0; }
#architecture .founder-caption { padding: 24px 0 0; }
#architecture .founder-role { color: #a9b7c7; font: 400 11px/18px var(--font-body); letter-spacing: .035em; margin-bottom: 7px; }
#architecture .founder-name { font: 600 clamp(19px,1.7vw,24px)/1.4 var(--font-primary); letter-spacing: -.04em; }
#architecture .founder-focus { color: #8fb6f0; font: 500 12px/20px var(--font-body); margin-top: 7px; }
#architecture .founder-bio { color: #a9b7c7; font: 400 14px/23px var(--font-body); margin-top: 16px; max-width: 34ch; }
#architecture .founder-image-fallback { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; font: 500 20px/1.4 var(--font-primary); }
#architecture .founders-reduced .founder-suit, #architecture .founders-reduced .founder-reveal-control { display: none; }
@media (max-width: 1100px) {
  #architecture .founders-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 24px; }
  #architecture .founders-header { gap: 40px; }
  #architecture #founders-title { font-size: 44px; }
  #architecture .founder-media { aspect-ratio: 3 / 3.8; }
  #architecture .founder-name { font-size: 25px; }
}
@media (max-width: 800px) {
  #architecture .founders-header { display: block; margin-bottom: 36px; }
  #architecture .founders-intro { margin-top: 24px; max-width: 100%; }
  #architecture .founders-intro > p:first-child br { display: none; }
  #architecture .founders-hint { margin-top: 12px; }
  #architecture .founder-name { font-size: 22px; }
  #architecture .founder-media { aspect-ratio: 3 / 4.25; }
}
@media (max-width: 599px) {
  #founders { scroll-margin-top: 112px; }
  #architecture .founders-eyebrow { margin-bottom: 20px; }
  #architecture #founders-title { font-size: clamp(32px,9vw,43px); }
  #architecture .founders-intro > p:first-child { font-size: 16px; line-height: 26px; }
  #architecture .founders-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
  #architecture .founder-media { aspect-ratio: 3 / 3.9; }
  #architecture .founder-caption { padding-top: 20px; }
  #architecture .founder-name { font-size: 27px; }
  #architecture .founder-bio { max-width: 38ch; }
}
@media (prefers-reduced-motion: reduce) {
  #architecture .founder-suit, #architecture .founder-reveal-control { display: none; }
  #architecture .founder-media { transition: none; }
}
