.about-hero { background: #23382f; color: #fff; overflow: hidden; }
.about-hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: center; padding-block: 68px 78px; }
.about-hero-copy .eyebrow { color: #e7aa82; }
.about-hero h1 { font-size: clamp(46px,5.2vw,76px); line-height: 1.06; letter-spacing: -.05em; margin: 25px 0 30px; text-wrap: balance; }
.about-hero .intro { color: #d9e5da; max-width: 570px; }
.about-hero .button { margin-top: 34px; }
.about-portrait { position: relative; margin: 0; width: 100%; max-width: 440px; justify-self: end; border-radius: 120px 18px 18px 18px; overflow: hidden; background: #d4dbce; box-shadow: 18px 18px 0 #ffffff0c; }
.about-portrait > img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 35%; }
.about-portrait figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 70px 30px 30px; background: linear-gradient(transparent,#14231feb); display: grid; gap: 5px; }
.about-portrait strong { font-size: 26px; }
.about-portrait span { font-size: 14px; color: #e1e9dd; }
.about-story-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.about-story h2 { max-width: 540px; margin-top: 22px; }
.about-story-copy .intro { font-size: 26px; line-height: 1.45; color: #2e4937; }
.about-story-copy > p + p { margin-top: 24px; color: var(--muted); }
.about-principles { background: #f0f3e8; }
.about-principle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.about-principle-grid article { background: #fff; border: 1px solid #d6dfcc; border-radius: 15px; padding: 34px; }
.about-principle-grid article:nth-child(2) { background: #294638; color: #fff; }
.about-number { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid #94a387; border-radius: 50%; font-size: 12px; }
.about-principle-grid h3 { font-size: 28px; line-height: 1.2; letter-spacing: -.03em; margin: 35px 0 20px; }
.about-principle-grid p { font-size: 15px; color: #5a6552; }
.about-principle-grid article:nth-child(2) p { color: #d9e4d5; }
.about-founder-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 80px; align-items: center; }
.about-founder-mark { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 310px; border: 1px solid #d6decd; border-radius: 50%; aspect-ratio: 1; background: radial-gradient(circle,#fff 52%,#f1f4ec 52.5%,#f1f4ec 69%,#fff 69.5%); }
.about-founder-mark span { font-size: 26px; font-weight: 650; margin-top: 12px; letter-spacing: -.04em; }
.about-founder h2 { margin: 22px 0 26px; }
.about-founder .intro { font-size: 18px; color: var(--muted); }
.about-credentials { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0; }
.about-credentials span { padding: 9px 14px; border-radius: 8px; background: #f1f4eb; border: 1px solid #dce4d1; font-size: 13px; }
.about-process { background: #f8f7f3; }
.about-process-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; list-style: none; padding: 0; counter-reset: process; }
.about-process-list li { counter-increment: process; border-top: 1px solid #bfc9b4; padding-top: 24px; }
.about-process-list li::before { content: '0' counter(process); color: #9c4c24; font-size: 13px; }
.about-process-list h3 { font-size: 24px; margin: 22px 0 16px; }
.about-process-list p { font-size: 15px; color: var(--muted); }
.about-contact { background: #23382f; color: #fff; }
.about-contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center; }
.about-contact h2 { margin: 22px 0; }
.about-contact .intro { color: #d4e0d3; }
.about-contact .button { margin-top: 28px; }
.about-company { padding: 36px; border: 1px solid #779079; border-radius: 14px; min-width: 0; }
.about-company h3 { font-size: 29px; margin: 24px 0 12px; }
.about-company > p:not(.eyebrow) { font-size: 14px; color: #d4e0d3; }
.about-company a { display: block; padding-block: 10px; font-size: 15px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 5px; }
.home-about-teaser { display: grid; grid-template-columns: 210px minmax(0,1fr) auto; align-items: center; gap: 45px; }
.home-about-teaser > img { width: 210px; height: 210px; object-fit: cover; object-position: center 30%; border-radius: 20px; }
.home-about-teaser h2 { font-size: clamp(30px,3vw,43px); margin: 16px 0; }
.home-about-teaser .intro { font-size: 17px; max-width: 540px; }
@media (max-width: 1050px) {
 .about-hero-layout,.about-story-layout { gap: 40px; }
 .about-principle-grid { gap: 16px; }
 .about-principle-grid article { padding: 25px; }
 .about-founder-layout { gap: 40px; }
 .about-founder-mark { min-height: 0; }
 .about-process-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .about-contact-layout { gap: 40px; }
 .home-about-teaser { grid-template-columns: 180px minmax(0,1fr); gap: 30px; }
 .home-about-teaser > img { width: 180px; height: 180px; grid-row: span 2; }
 .home-about-teaser > .button { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
 .about-hero-layout { grid-template-columns: 1fr; padding-block: 42px 54px; gap: 40px; }
 .about-hero h1 { font-size: clamp(38px,9.5vw,60px); }
 .about-portrait { max-width: 380px; justify-self: center; border-top-left-radius: 85px; }
 .about-story-layout,.about-principle-grid,.about-founder-layout,.about-contact-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .about-story-copy .intro { font-size: 23px; }
 .about-principle-grid h3 { margin-top: 24px; }
 .about-founder-mark { width: 200px; justify-self: center; }
 .about-founder-mark img { width: 70px; height: 70px; }
 .about-founder-mark span { font-size: 20px; }
 .about-company { padding: 24px; }
 .about-process-list { grid-template-columns: minmax(0,1fr); gap: 26px; }
 .home-about-teaser { grid-template-columns: minmax(0,1fr); gap: 25px; }
 .home-about-teaser > img { grid-row: auto; width: 150px; height: 150px; }
 .home-about-teaser > .button { grid-column: auto; }
}