.about-page .site-header { position: absolute; }
.about-page h1, .about-page h2, .about-page h3 { text-wrap: balance; }
.about-page p { text-wrap: pretty; }
.about-document { overflow: clip; }
.about-page .site-header a[aria-current="page"] { color: var(--amber); }
.about-hero { padding-top: 181px; padding-bottom: 83px; }
.about-page-label { color: #c9a174; font-size: 15px; margin-bottom: 32px; }
.about-page .about-hero h1 { font-size: clamp(61px, 7.2vw, 104px); font-weight: 500; line-height: 1.04; letter-spacing: -.052em; margin: 0; max-width: 1120px; }
.about-hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-top: 42px; }
.about-hero-bottom > p { color: #aaa; font-size: 20px; line-height: 1.8; max-width: 770px; }
.about-text-link { display: inline-flex; align-items: center; gap: 21px; color: #d7b48a; font-size: 14px; line-height: 1.6; width: fit-content; }
.about-text-link > span { flex-shrink: 0; font-size: 20px; line-height: 1; }
.about-text-link:hover { color: var(--amber); }
.about-hero-bottom .about-text-link { flex-shrink: 0; margin-bottom: 7px; }
.about-page h2 { font-size: clamp(35px, 3.6vw, 51px); font-weight: 500; line-height: 1.12; letter-spacing: -.043em; }
.about-origin { padding-top: 83px; padding-bottom: 79px; border-top: 1px solid #ffffff18; }
.about-section-intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }
.about-section-intro > div { max-width: 680px; }
.about-section-intro p { font-size: 17px; line-height: 1.85; color: #a5a5a5; }
.about-section-intro p + p { margin-top: 23px; }
.about-progression { margin: 72px 0 0; }
.about-progression figcaption { color: #b39a7c; font-size: 13px; margin-bottom: 25px; }
.about-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; }
.about-stages li { position: relative; padding: 51px 42px 0 0; }
.about-stages li::before { content: ''; height: 1px; position: absolute; top: 10px; left: 0; right: 0; background: #78532e; }
.about-stages li:last-child::before { background: linear-gradient(90deg, #78532e, #78532e00 94%); }
.about-stage-point { position: absolute; top: 4px; left: 0; width: 13px; height: 13px; border: 1px solid #cf954d; border-radius: 50%; background: #090909; }
.about-stage-point::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #e8a353; }
.about-stages li:last-child { padding-right: 0; }
.about-stages h3 { font-size: 23px; letter-spacing: -.6px; font-weight: 500; color: #e5d8c7; margin-bottom: 16px; }
.about-stages li > p { color: #969696; font-size: 15px; line-height: 1.8; max-width: 335px; }
.about-stage-vocabulary { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 25px; max-width: 325px; }
.about-stage-vocabulary > span { display: inline-block; font-size: 12px; color: #b19473; padding-bottom: 3px; border-bottom: 1px solid #473522; }
.about-origin-link { margin-top: 43px; }
.about-origin-link .about-text-link { font-size: 13px; }
.about-purpose { padding-block: 86px; background: #121212; border-block: 1px solid #ffffff0a; }
.about-purpose-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.about-section-label { font-size: 13px; color: #bd996e; margin-bottom: 21px; }
.about-purpose-copy > p { max-width: 670px; color: #a2a2a2; font-size: 17px; line-height: 1.85; }
.about-purpose-copy > p:first-child { color: #d3c5b4; font-size: 22px; line-height: 1.65; }
.about-purpose-copy > p + p { margin-top: 23px; }
.about-purpose-copy .about-text-link { margin-top: 26px; }
.about-organizations { padding-top: 93px; padding-bottom: 89px; }
.about-organizations-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 70px; margin-bottom: 53px; }
.about-organizations-heading > p { max-width: 465px; font-size: 16px; line-height: 1.8; color: #a1a1a1; }
.about-entities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid #6c4c2b6b; }
.about-entity { padding: 41px 65px 43px 0; }
.about-entity + .about-entity { border-left: 1px solid #ffffff14; padding-left: 65px; padding-right: 0; }
.about-entity h3 { font-size: clamp(28px, 3vw, 42px); line-height: 1.13; font-weight: 500; letter-spacing: -.04em; color: #e8d8c4; }
.about-entity > p:not(.about-section-label) { font-size: 16px; color: #a0a0a0; line-height: 1.85; max-width: 515px; margin-top: 25px; }
.about-entity .about-text-link { font-size: 13px; margin-top: 29px; }
.about-frameworks { padding-block: 7px 83px; }
.about-framework-list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.about-framework-list li { border-top: 1px solid #58412a; }
.about-framework-list a { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; padding: 24px 24px 16px 0; min-height: 151px; }
.about-framework-list a > span:first-child { font-size: 13px; color: #9a8265; }
.about-framework-list strong { font-size: 19px; line-height: 1.3; font-weight: 500; color: #d8d0c6; letter-spacing: -.3px; }
.about-framework-list a > span:last-child { color: #ae7b41; margin-top: auto; font-size: 21px; }
.about-framework-list a:hover strong, .about-framework-list a:hover > span:last-child { color: var(--amber); }
.about-invitation { display: flex; align-items: center; justify-content: space-between; gap: 75px; padding-block: 67px 85px; border-top: 1px solid #ffffff16; }
.about-invitation p { max-width: 610px; font-size: 17px; line-height: 1.8; color: #a0a0a0; margin-top: 25px; }
.about-invitation-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex-shrink: 0; }
.about-invitation-actions .button { padding: 15px 21px; font-size: 14px; gap: 26px; }
.about-invitation-actions .about-text-link { padding-left: 1px; }

@media (max-width: 1100px) {
  .about-hero { padding-top: 162px; }
  .about-hero-bottom { gap: 40px; }
  .about-hero-bottom > p { font-size: 18px; max-width: 680px; }
  .about-section-intro, .about-purpose-inner { gap: 55px; }
  .about-stages li { padding-right: 28px; }
  .about-stages h3 { font-size: 21px; }
  .about-entity { padding-right: 40px; }
  .about-entity + .about-entity { padding-left: 40px; }
  .about-framework-list strong { font-size: 17px; }
  .about-framework-list a { padding-right: 18px; }
}
@media (max-width: 800px) {
  .about-hero { padding-top: 141px; padding-bottom: 61px; }
  .about-page-label { margin-bottom: 28px; font-size: 14px; }
  .about-page .about-hero h1 { font-size: clamp(48px, 8.9vw, 72px); }
  .about-hero-bottom { display: block; margin-top: 30px; }
  .about-hero-bottom > p { max-width: 650px; font-size: 18px; }
  .about-hero-bottom .about-text-link { margin-top: 25px; margin-bottom: 0; }
  .about-origin { padding-block: 62px; }
  .about-section-intro, .about-purpose-inner { grid-template-columns: 1fr; gap: 29px; }
  .about-page h2 { font-size: 40px; }
  .about-section-intro p { font-size: 16px; }
  .about-progression { margin-top: 46px; }
  .about-stages { grid-template-columns: 1fr; }
  .about-stages li, .about-stages li:last-child { padding: 0 0 38px 34px; }
  .about-stages li:last-child { padding-bottom: 0; }
  .about-stages li::before { height: auto; width: 1px; left: 6px; top: 10px; bottom: -10px; right: auto; }
  .about-stages li:last-child::before { background: linear-gradient(#78532e, #78532e00); bottom: 0; }
  .about-stage-point { top: 9px; }
  .about-stages h3 { font-size: 23px; margin-bottom: 10px; }
  .about-stages li > p { max-width: 590px; }
  .about-stage-vocabulary { max-width: none; margin-top: 16px; }
  .about-origin-link { margin-top: 33px; padding-left: 34px; }
  .about-purpose { padding-block: 63px; }
  .about-purpose-copy > p:first-child { font-size: 21px; }
  .about-purpose-copy > p { font-size: 16px; }
  .about-organizations { padding-block: 63px 57px; }
  .about-organizations-heading { display: block; margin-bottom: 32px; }
  .about-organizations-heading > p { max-width: 630px; margin-top: 23px; }
  .about-entity { padding: 33px 27px 34px 0; }
  .about-entity + .about-entity { padding-left: 27px; }
  .about-entity h3 { font-size: 31px; }
  .about-entity > p:not(.about-section-label) { font-size: 15px; }
  .about-entity .about-text-link { gap: 14px; }
  .about-frameworks { padding-bottom: 54px; }
  .about-framework-list { margin-top: 32px; grid-template-columns: 1fr; }
  .about-framework-list li { border-color: #ffffff15; }
  .about-framework-list li:first-child { border-color: #58412a; }
  .about-framework-list li:last-child { border-bottom: 1px solid #ffffff15; }
  .about-framework-list a { display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; align-items: center; min-height: 0; padding: 21px 0; }
  .about-framework-list a > span:last-child { margin: 0; }
  .about-framework-list strong { font-size: 18px; }
  .about-invitation { gap: 40px; padding-block: 51px 66px; }
  .about-invitation p { font-size: 16px; }
}
@media (max-width: 580px) {
  .about-hero { padding-top: 128px; padding-bottom: 49px; }
  .about-page .about-hero h1 { font-size: clamp(43px, 9.6vw, 56px); letter-spacing: -.05em; }
  .about-hero-bottom > p { font-size: 17px; line-height: 1.8; }
  .about-text-link { font-size: 13px; gap: 15px; }
  .about-page h2 { font-size: 36px; }
  .about-origin { padding-block: 48px; }
  .about-entities { grid-template-columns: 1fr; }
  .about-entity, .about-entity + .about-entity { padding: 32px 0; border-left: 0; }
  .about-entity + .about-entity { border-top: 1px solid #ffffff15; }
  .about-entity h3 { font-size: 35px; }
  .about-entity > p:not(.about-section-label) { margin-top: 21px; }
  .about-entity .about-text-link { margin-top: 22px; }
  .about-section-label { font-size: 12px; margin-bottom: 18px; }
  .about-framework-list a { grid-template-columns: 72px 1fr auto; gap: 14px; }
  .about-framework-list strong { font-size: 17px; }
  .about-framework-list a > span:first-child { font-size: 12px; }
  .about-invitation { display: block; }
  .about-invitation-actions { margin-top: 29px; gap: 22px; }
}
@media (max-width: 350px) {
  .about-page .about-hero h1 { font-size: 38px; }
  .about-page h2 { font-size: 32px; }
  .about-entity h3 { font-size: 31px; }
  .about-framework-list a { grid-template-columns: 62px 1fr auto; gap: 11px; }
  .about-framework-list strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.about-page) { scroll-behavior: auto; }
  .about-page *, .about-page *::before, .about-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
