.about-hero {padding-bottom: 64px;}
.about-hero > .eyebrow {color: var(--accent); margin-bottom: 24px;}
.about-hero-grid {display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: end;}
.about-hero h1 {font-size: clamp(52px, 6vw, 86px); line-height: 1.03; letter-spacing: -.065em;}
.about-hero h1 em {font-style: normal; color: var(--accent);}
.about-introduction {padding-bottom: 6px;}
.about-introduction p {font-size: 18px; line-height: 1.8; color: var(--muted); margin-bottom: 20px;}
.about-introduction > a, .about-project-copy > a {display: inline-flex; gap: 24px; align-items: center; font-size: 15px; font-weight: 600; margin-top: 8px;}
.about-facts {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line); margin-top: 64px; padding-top: 25px;}
.about-facts dt {font-size: 10px; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px;}
.about-facts dd {font-size: 16px; margin: 0;}
.about-project {background: #e8ebe3; padding-block: 72px;}
.about-project-grid {display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 7%; align-items: center;}
.about-page h2 {font-size: clamp(32px, 3.2vw, 46px); line-height: 1.12; margin: 20px 0 24px;}
.about-project-copy p:not(.eyebrow) {font-size: 16px; line-height: 1.8; color: var(--muted); margin-bottom: 17px;}
.about-project-image {display: block; overflow: hidden; border: 1px solid #c5cdc4; border-radius: 7px; box-shadow: 0 25px 48px #17251e12; text-decoration: none; transition: box-shadow .2s;}
.about-project-image:hover {box-shadow: 0 25px 48px #17251e24;}
.about-browser-bar {display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #203d52; color: #e1edf3; padding: 13px 17px; font-size: 9px; letter-spacing: .08em;}
.about-browser-bar > span:first-child {font-size: 7px; letter-spacing: 3px;}
.about-browser-bar > span:last-child {font-size: 18px;}
.about-project-image img {display: block; width: 100%; height: auto;}
.about-approach {display: grid; grid-template-columns: .85fr 1.3fr; gap: 7%; padding-block: 88px;}
.about-principles {list-style: none; margin: 0; padding: 0;}
.about-principles li {display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 24px; padding-block: 28px; border-top: 1px solid var(--line);}
.about-principles li:first-child {padding-top: 0; border-top: 0;}
.about-principles li:last-child {padding-bottom: 0;}
.about-number {color: var(--accent); font-size: 12px; padding-top: 5px;}
.about-principles h3 {font-size: 24px; line-height: 1.2; margin-bottom: 15px;}
.about-principles p, .about-services p {font-size: 16px; color: var(--muted); line-height: 1.85;}
.about-principles a, .about-services a {color: var(--accent);}
.about-services {display: grid; grid-template-columns: .85fr 1.3fr; gap: 7%; padding-block: 64px; border-top: 1px solid var(--line);}
.about-services p + p {margin-top: 20px;}
.about-contact {display: grid; grid-template-columns: 1.4fr 1fr; gap: 7%; border-block: 1px solid var(--line); padding-block: 64px; margin-bottom: 64px;}
.about-contact p:not(.eyebrow) {font-size: 17px; color: var(--muted); max-width: 560px;}
.about-contact-actions {display: flex; flex-direction: column; gap: 15px; align-items: start; justify-content: center;}
.about-contact-actions > a:not(.button) {font-size: 15px; overflow-wrap: anywhere;}
.about-page .search-footer {border-top: 0; padding-top: 0;}
@media (max-width: 850px) {
  .about-hero-grid, .about-project-grid, .about-approach, .about-services, .about-contact {grid-template-columns: 1fr; gap: 34px;}
  .about-hero h1 {font-size: clamp(50px, 8vw, 76px);}
  .about-introduction {max-width: 640px;}
  .about-project-copy {max-width: 580px;}
  .about-project-image {max-width: 800px;}
  .about-approach, .about-services {padding-block: 56px;}
  .about-section-heading h2, .about-services h2 {margin-bottom: 0;}
}
@media (max-width: 560px) {
  .about-hero {padding-bottom: 40px;}
  .about-introduction p {font-size: 17px;}
  .about-facts {grid-template-columns: 1fr; gap: 19px; margin-top: 35px;}
  .about-facts > div {display: grid; grid-template-columns: 100px 1fr; gap: 20px; align-items: baseline;}
  .about-facts dt {margin: 0;}
  .about-facts dd {font-size: 14px;}
  .about-project {padding-block: 42px;}
  .about-principles li {grid-template-columns: 25px minmax(0, 1fr); gap: 13px;}
  .about-principles h3 {font-size: 23px;}
  .about-contact {padding-block: 44px; margin-bottom: 40px;}
}
@media (prefers-reduced-motion: reduce) {.about-project-image {transition: none;}}