.about-page {max-width:1120px; margin:0 auto; padding:75px 28px 100px;}
.about-hero {max-width:900px; margin:0 auto 75px; text-align:center;}
.about-hero .section-eyebrow {display:inline-block; margin-bottom:14px;}
.about-hero h1 {margin:0 0 25px; font-family:Georgia,"Times New Roman",serif; font-size:58px; font-weight:700; line-height:1.02; letter-spacing:-1.5px; color:#111;}
.about-hero h1 span {display:block;}
.about-hero-green {color:#28723d;}
.about-hero p {max-width:720px; margin:0 auto; color:#4f5b53; font-size:20px; line-height:1.65;}
.about-story {display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:65px; align-items:center; margin-bottom:75px;}
.about-story-copy h2 {margin:7px 0 20px; font-family:Georgia,"Times New Roman",serif; font-size:38px; line-height:1.12; color:#203c26;}
.about-story-copy p {margin:0 0 17px; color:#59605b; font-size:16px; line-height:1.75;}
.about-callout {background:#ebece4; border:1px solid #ddded5; border-radius:16px; padding:42px;}
.about-callout-label {margin-bottom:12px; color:#5b7a62; font-size:11px; font-weight:800; letter-spacing:2px;}
.about-callout-big {margin-bottom:16px; font-family:Georgia,"Times New Roman",serif; font-size:36px; font-weight:700; line-height:1.08; color:#28723d;}
.about-callout p {margin:0; color:#566058; font-size:16px; line-height:1.65;}
.about-principles {display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:80px;}
.about-principle {background:#fff; border:1px solid #dddcd5; border-radius:12px; padding:32px 28px; box-shadow:0 4px 18px rgba(32,60,38,.05);}
.about-number {display:block; margin-bottom:18px; color:#719078; font-size:12px; font-weight:800; letter-spacing:2px;}
.about-principle h3 {margin:0 0 12px; font-family:Georgia,"Times New Roman",serif; font-size:23px; color:#203c26;}
.about-principle p {margin:0; color:#626862; font-size:15px; line-height:1.65;}
.about-vision {max-width:850px; margin:0 auto; padding:55px 40px; text-align:center; background:#f1f0ea; border-radius:16px;}
.about-vision h2 {margin:8px 0 22px; font-family:Georgia,"Times New Roman",serif; font-size:40px; line-height:1.08; color:#111;}
.about-vision h2 span {display:block;}
.about-vision p {max-width:700px; margin:0 auto 12px; color:#59605b; font-size:17px; line-height:1.7;}


@media (max-width:850px) {
.about-page {padding:50px 20px 70px;}
.about-hero {margin-bottom:50px;}
.about-hero h1 {font-size:44px;}
.about-story {grid-template-columns:1fr; gap:35px; margin-bottom:50px;}
.about-principles {grid-template-columns:1fr; gap:14px; margin-bottom:50px;}
.about-vision {padding:40px 25px;}
}

@media (max-width:520px) {
.about-hero h1 {font-size:35px;}
.about-hero p {font-size:18px;}
.about-story-copy h2 {font-size:32px;}
.about-callout {padding:30px 24px;}
.about-callout-big {font-size:31px;}
.about-vision h2 {font-size:32px;}
}