.hapo-about-vm{position:relative;box-sizing:border-box;min-width:0;isolation:isolate;overflow:hidden;background:#f8faf9;color:#fff;font-family:"Manrope",sans-serif}
.hapo-about-vm *{box-sizing:border-box}
.hapo-about-vm--width-full{width:auto;margin-inline:calc(50% - 50vw)}
.hapo-about-vm--width-container{width:100%;margin-inline:0}
.hapo-about-vm__background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1}
.hapo-about-vm__inner{position:relative;width:min(100%,1920px);height:clamp(650px,52.083vw,1000px);margin-inline:auto}
.hapo-about-vm__card{position:absolute;z-index:1;width:24.17%;min-height:32.4%;padding:74px 34px 28px;border-radius:11px;background:linear-gradient(105deg,#08bd70 0%,#008535 100%);box-shadow:0 12px 24px rgba(0,76,39,.08);text-align:center}
.hapo-about-vm__card--vision{left:12.66%;top:26.3%}
.hapo-about-vm__card--mission{right:11.61%;top:34.1%}
.hapo-about-vm__icon{position:absolute;left:50%;top:-100px;display:grid;place-items:center;width:158px;height:158px;border-radius:50%;background:#fff;box-shadow:0 7px 22px rgba(0,0,0,.08);transform:translateX(-50%)}
.hapo-about-vm__icon-image{display:block;width:82px;height:82px;object-fit:contain}
.hapo-about-vm__card h2,.hapo-about-vm__card h3{margin:0;color:#fff;font-size:40px;font-weight:800;line-height:1.2;text-transform:uppercase}
.hapo-about-vm__card h2::after,.hapo-about-vm__card h3::after{display:block;width:80px;height:3px;margin:17px auto 24px;background:rgba(255,255,255,.54);content:""}
.hapo-about-vm__card p{margin:0;color:#fff;font-size:20px;font-weight:500;line-height:1.5}
.hapo-about-vm__card strong{color:#00ed55;font-weight:700}
.hapo-about-vm__portrait{position:absolute;z-index:2;bottom:0;left:50%;display:block;width:37.7%;height:auto;max-height:95%;object-fit:contain;object-position:bottom;transform:translateX(-50%);pointer-events:none}
@media(max-width:1200px){.hapo-about-vm__inner{height:740px}.hapo-about-vm__card{width:34%;padding:70px 18px 25px}.hapo-about-vm__card--vision{left:4%;top:30%}.hapo-about-vm__card--mission{right:4%;top:40%}.hapo-about-vm__card h2,.hapo-about-vm__card h3{font-size:30px}.hapo-about-vm__card p{font-size:16px}.hapo-about-vm__portrait{width:53%;max-height:91%}.hapo-about-vm__icon{width:120px;height:120px;top:-75px}.hapo-about-vm__icon-image{width:68px;height:68px}}
@media(max-width:700px){.hapo-about-vm__inner{display:flex;flex-direction:column;gap:64px;height:auto;min-height:0;padding:300px 16px 56px}.hapo-about-vm__background{object-position:center}.hapo-about-vm__portrait{top:8px;bottom:auto;left:50%;width:auto;height:365px;max-height:none;z-index:1}.hapo-about-vm__card{position:relative;top:auto;left:auto;right:auto;width:100%;min-height:0;padding:63px 20px 28px;z-index:2}.hapo-about-vm__card--mission{top:auto;right:auto}.hapo-about-vm__icon{top:-46px;width:92px;height:92px}.hapo-about-vm__icon-image{width:55px;height:55px}.hapo-about-vm__card h2,.hapo-about-vm__card h3{font-size:28px}.hapo-about-vm__card h2::after,.hapo-about-vm__card h3::after{margin:13px auto 18px}.hapo-about-vm__card p{font-size:16px;line-height:1.5}}

/* Mobile, from the supplied 375px About-page design (2026-10-20): Mission card first, then
   Vision, then the portrait standing on the section bottom; 88px icon overlapping each card. */
@media(max-width:700px){
.hapo-about-vm__inner{gap:97px;padding:109px 16px 0}
.hapo-about-vm__card--mission{order:1}
.hapo-about-vm__card--vision{order:2}
.hapo-about-vm__portrait{position:static;order:3;align-self:center;width:auto;height:370px;margin-top:-69px;transform:none}
.hapo-about-vm__card{padding:38px 20px 12px;border-radius:10px}
.hapo-about-vm__icon{top:-69px;width:88px;height:88px}
.hapo-about-vm__icon-image{width:52px;height:52px}
.hapo-about-vm__card h2,.hapo-about-vm__card h3{font-size:21px;line-height:1.2}
.hapo-about-vm__card h2::after,.hapo-about-vm__card h3::after{width:80px;height:3px;margin:11px auto 14px}
.hapo-about-vm__card p{font-size:16px;line-height:21px}
}