.about-company { color: #28302c; background: var(--soft); }
.about-shell { width: min(1060px, calc(100% - 64px)); margin: 0 auto; }
.about-intro { padding: 104px 0 76px; text-align: center; }
.about-intro h1 { margin: 0 0 28px; color: #222a26; font-size: 46px; font-weight: 500; line-height: 1.2; }
.about-intro h1 span { color: #25b447; }
.about-intro p { max-width: 880px; margin: 0 auto 30px; color: #8b928f; font-size: 16px; line-height: 2; }
.about-office { display: block; width: 100%; margin: 46px auto 0; border-radius: 8px; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mission-grid article { min-height: 106px; padding: 24px 30px; background: #fff; border-radius: 8px; box-shadow: 0 5px 20px rgba(25, 46, 36, .08); text-align: left; }
.mission-grid h2 { margin: 0 0 10px; color: #303733; font-size: 20px; }
.mission-grid p { margin: 0; color: #6B7280; font-size: 16px; }
.about-principles { padding: 0 0 108px; }
.about-section-title { margin: 0 0 52px; color: #111827; font-size: 46px; font-weight: 500; text-align: center; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
.principle-grid article { text-align: center; }
.principle-grid img { display: block; width: 100%; max-width: 190px; margin: 0 auto 20px; border-radius: 8px; }
.principle-grid h3 { margin: 0 0 10px; color: #111827; font-size: 20px; }
.principle-grid p { max-width: 253px; margin: 0 auto; color: #6B7280; font-size: 14px; line-height: 1.7; }
.about-values { padding: 66px 0 95px; background: #fff; }
.values-grid { display: grid; grid-template-columns: 390px 1fr; gap: 110px; align-items: center; }
.team-map { display: block; width: 100%; max-width: 315px; margin: 0 auto; }
.values-copy { align-self: start; }
.values-copy h2 { margin: 0 0 16px; font-size: 27px; font-weight: 500; }
.values-copy > p { margin: 0 0 24px; color: #89918d; font-size: 12px; }
.value-list { display: grid; gap: 9px; }
.value-list > div { background: transparent; }
.value-title { display: flex; height: 40px; align-items: center; padding: 0 17px; background: var(--soft); border-radius: 8px; transition: background-color .18s, box-shadow .18s; }
.value-list > div:hover .value-title { background: #fff; box-shadow: 0 5px 15px rgba(25, 46, 36, .08); }
.value-list img { width: 18px; height: 18px; margin-right: 14px; object-fit: contain; }
.value-list img.value-hover { display: none; }
.value-list span { color: #3d4641; font-size: 12px; font-weight: 600; transition: color .18s; }
.value-list > div:hover img.value-default { display: none; }
.value-list > div:hover img.value-hover { display: block; }
.value-list > div:hover span { color: #30b043; }
.value-list p { display: none; margin: 0; padding: 10px 17px 2px; color: #737d77; font-size: 12px; line-height: 1.55; }
.value-list > div:hover p { display: block; }
.about-story { padding: 70px 0 90px; background: var(--soft); }
.story-grid { display: grid; grid-template-columns: 230px 1fr; gap: 44px; }
.story-grid h2 { margin-top: -12px; font-size: 46px; font-weight: 500; }
.story-copy h3 { margin: 0 0 16px; font-size: 20px; }
.story-copy > p { margin: 0 0 20px; color: #87908b; font-size: 16px; line-height: 1.8; }
.story-years { display: flex; justify-content: space-between; color: #9da5a1; font-size: 11px; }
.story-years button { padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit;  font-size: 16px;}
.story-years button:hover, .story-years button.active { color: #25b64a; }
.story-line { height: 1px; margin: 13px 0 22px; background: #d9dfdc; }
.story-copy .story-panel .story-event-body{
    color: #4B5563;
    font-size: 16px;
    margin-bottom: 20px;
}
.story-copy .story-panel .story-event-body .story-event-title { font-weight: 500; }
.story-copy .story-panel .story-event-body .story-event-copy { font-weight: 400;  }

.about-cta { padding: 72px 0 102px; background: #fff; }
.about-cta-inner { width: min(1060px, calc(100% - 64px)); min-height: 276px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px; color: #fff; background: #21b448 url("../assets/cases/experience-background.png") center / cover no-repeat; border-radius: 10px; text-align: center; }
.about-cta h2 { margin: 0 0 15px; font-size: 40px; font-weight: 700; }
.about-cta p { margin: 0 0 26px; color: rgba(255,255,255,.88); font-size: 13px; }
.about-cta a { display: inline-flex; width: 180px; height: 56px; align-items: center; justify-content: center; color: #fff; background: #050807; border-radius: 999px; font-size: 24px; font-weight: 700; text-decoration: none; }
@media (max-width: 800px) { .about-story,.about-values, .about-cta { padding: 30px 0;}
    .about-shell, .about-cta-inner { width: min(100% - 40px, 620px); }
    .values-grid { grid-template-columns: 1fr; gap: 40px; } .team-map { max-width: 270px; } .story-grid { grid-template-columns: 1fr; gap: 25px; } }
@media (max-width: 720px) {  .about-shell, .about-cta-inner { width: min(100% - 18px, 620px); }
    .about-intro { padding: 64px 0 55px; }
    .about-intro h1 { font-size: 22px; font-weight: 500;}
    .about-intro p { font-size: 14px; font-weight: 400; text-align: center; } .about-office { margin-top: 30px; } .about-mission { padding-bottom: 70px; } .mission-grid, .principle-grid { grid-template-columns: 1fr; gap: 18px; }
    .about-section-title { margin-bottom: 34px; font-size: 30px; }
    .about-principles { padding-bottom: 70px; } .about-values { padding: 50px 0 70px; } .about-cta { padding: 50px 0 70px; } .about-cta-inner { min-height: 235px; padding: 25px 18px; } .about-cta h2 { font-size: 27px; } .about-cta p { font-size: 12px; line-height: 1.7; }
    .story-years { gap: 0; }
    .story-years button { font-size: 12px;}
    .mission-grid h2{
        font-size: 16px;
        font-weight: 400;
        color: #111827;
    }
    .mission-grid p, .story-copy > p, .story-years, .story-event-title, .story-event-copy{
        font-size: 14px;
        font-weight: 400;
    }
}