.page-tentang-kami .hero-about,
.page-tentang-kami .hero-about .hero-inner{min-height:clamp(200px,20vw,280px)}
.page-tentang-kami .hero-about .hero-inner{padding:32px 40px}
.page-tentang-kami .hero-about .hero-copy{width:53%;max-width:680px}
.page-tentang-kami .hero-about .hero-copy h1{max-width:670px;font-size:clamp(32px,3.5vw,50px);line-height:1.04;letter-spacing:-.055em;margin:15px 0}
.page-tentang-kami .hero-about .hero-copy h1:after{content:"";display:block;width:min(280px,70%);height:22px;margin:22px 0 0 clamp(0px,4vw,70px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 22'%3E%3Cpath d='M0 11h126M154 11h126' stroke='%23d39b30' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M140 2l9 9-9 9-9-9z' fill='%23fff' stroke='%23d39b30' stroke-width='2.5'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.page-tentang-kami .hero-about .hero-copy p,
.page-tentang-kami .hero-about .hero-copy>.actions,
.page-tentang-kami .hero-about .about-highlights{display:none}
.page-tentang-kami .hero-about .hero-art{position:absolute;inset:auto 0 0 auto;width:min(36%,500px);max-width:none;height:auto;aspect-ratio:1135/611;border-radius:0;transform:none;mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 14%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 14%);mask-composite:intersect;-webkit-mask-composite:source-in}
.page-tentang-kami .hero-about .hero-art>img{left:0;top:0;width:100%;height:100%;min-height:0;transform:none;object-fit:cover;object-position:40% 30%;animation:about-hero-zoom 18s ease-in-out infinite alternate}
.page-tentang-kami .hero-about .hero-light{background:linear-gradient(90deg,var(--cream) 0,var(--cream) 36%,color-mix(in srgb,var(--cream) 75%,transparent) 44%,transparent 58%)}
@keyframes about-hero-zoom{from{transform:scale(1)}to{transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){.page-tentang-kami .hero-about .hero-art>img{animation:none}}
.about-page{width:min(1280px,calc(100% - 48px));padding:32px 0 0}
.about-page .about-intro{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(200px,.5fr) minmax(0,1.7fr);align-items:center;gap:clamp(28px,4vw,56px);padding:clamp(34px,4vw,56px) clamp(28px,4vw,60px) clamp(54px,5vw,76px) clamp(20px,2.4vw,34px);border:1px solid #efe6cf;border-radius:30px;background:radial-gradient(ellipse 60% 70% at 70% 30%,#fff 0,transparent 70%),linear-gradient(160deg,#fdfaf2,#f8f1e1);box-shadow:0 14px 40px #6b5a2a12}
.about-page .about-intro:before{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;bottom:-68%;height:80%;border-top:3px solid #e3bd62;border-radius:50% 50% 0 0/38% 38% 0 0;background:linear-gradient(90deg,#005348,#0b7a5c 35%,#f8f1e1 55%,#0b7a5c 80%,#005348);opacity:.95;transform:rotate(-2deg)}
.about-page .about-intro:after{content:"";position:absolute;z-index:-1;top:-120px;right:-120px;width:300px;height:260px;border-bottom:3px solid #e3bd62;border-left:3px solid #e3bd62;border-radius:0 0 0 70%;background:linear-gradient(200deg,#005348,#0b7a5c)}
.about-intro-lantern{position:absolute;top:0;right:clamp(70px,9vw,130px);width:30px;height:118px;background:linear-gradient(#c99a3a,#c99a3a) 50% 0/2px 52px no-repeat;pointer-events:none}
.about-intro-lantern:after{content:"";position:absolute;left:0;bottom:0;width:30px;height:66px;border:2px solid #c99a3a;border-radius:9px 9px 6px 6px;background:radial-gradient(circle at 50% 55%,#fff7cf 0,#f8d478 38%,#d9a43f 100%);box-shadow:0 0 26px 8px #ffd77a66}
.about-intro-frame{position:relative;justify-self:start;width:min(100%,260px);padding:4px;border-radius:32px;background:linear-gradient(140deg,#f3d58a,#c99a3a 45%,#f6dfa0 70%,#c99a3a);box-shadow:0 18px 40px #2a4a2626,0 0 0 6px #fffaf0}
.about-page .about-intro-art{display:block;width:100%;max-height:none;border-radius:28px;filter:none}
.about-intro-copy{min-width:0;padding:4px 0}
.about-intro-copy h2{position:relative;margin:0 0 26px;padding-bottom:12px;font-size:clamp(34px,4.2vw,58px);font-weight:850;line-height:1.02;letter-spacing:-.045em;color:var(--deep)}
.about-intro-copy h2:after{content:"";position:absolute;left:0;bottom:-8px;width:min(230px,60%);height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 14'%3E%3Cpath d='M2 12C60 1 150-1 228 5' fill='none' stroke='%23d39b30' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.about-intro-copy>p{max-width:760px;margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--ink)}
.about-intro-copy blockquote{display:flex;align-items:center;gap:20px;margin:26px 0 0;padding:20px 26px;border:1px solid #d6eedf;border-radius:22px;background:linear-gradient(100deg,#e3f5ea,#eef9f2 70%,#e3f5ea);color:var(--ink);box-shadow:0 8px 22px #0b6a4a0d}
.about-quote-badge{position:relative;display:grid;place-items:center;flex:none;width:62px;height:62px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:linear-gradient(140deg,#f2d48a,#c99a3a)}
.about-quote-badge:before{content:"";position:absolute;inset:2px;clip-path:inherit;background:#fffbef}
.about-quote-badge .icon{position:relative;width:30px;height:30px;color:var(--green)}
.about-intro-copy blockquote p{margin:0;padding-left:20px;border-left:2px solid #d9b25a;font-size:clamp(14px,1.2vw,17px);font-style:italic;line-height:1.55}
.about-page .about-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:14px 18px;border:1px solid #eee6d2;border-radius:18px;background:#fffdf8d9;box-shadow:0 6px 18px #6b5a2a0d}
.about-page .about-stats>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.about-page .about-stats>div+div{padding-left:12px;border-left:1px solid #ecdcb4}
.about-page .about-stats strong{display:flex;align-items:center;gap:7px;font-size:clamp(16px,1.5vw,21px);color:var(--deep)}
.about-page .about-stats span{margin:0;font-size:12px;white-space:normal}
.about-page .about-stats .icon{width:19px;height:19px}
.about-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:27px}
.about-box{position:relative;overflow:hidden;padding:18px 22px 20px;border:1px solid #e8eee8;border-radius:20px;box-shadow:0 5px 16px #163c3410}
.about-box-vision{background:linear-gradient(130deg,#f3fbf5,#e5f6ec)}
.about-box-mission{background:linear-gradient(130deg,#fffdf5,#fff6df)}
.about-box-title{display:flex;align-items:center;gap:13px;margin:0 0 8px}
.about-box-title .icon-bubble{width:52px;height:52px;border-radius:15px}
.about-box-title h2{font-size:clamp(24px,2.6vw,34px);font-weight:800}
.about-box>p{padding-left:65px;font-size:14px;line-height:1.5;color:var(--ink)}
.about-box ol{list-style:none;counter-reset:about-mission;margin:7px 0 0;padding:0}
.about-box li{counter-increment:about-mission;display:flex;align-items:flex-start;gap:11px;margin:8px 0;color:var(--ink);font-size:13px;line-height:1.45}
.about-box li:before{content:counter(about-mission);display:grid;place-items:center;flex:none;width:24px;height:24px;margin-top:-2px;border-radius:50%;background:var(--green);color:white;font-size:12px;font-weight:750}
.about-values-title{display:flex;align-items:center;justify-content:center;gap:15px;margin:0 0 14px;font-size:18px}
.about-values-title:before,.about-values-title:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}
.about-values-title:after{transform:scaleX(-1)}
.about-values-title span{padding:7px 28px;border-radius:30px;background:linear-gradient(110deg,var(--green),var(--deep));color:#fff;white-space:nowrap;box-shadow:0 3px 10px #00534824}
.about-principles{margin-top:27px;padding:0}
.about-principle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:18px 12px;border:1px solid #e9eee9;border-radius:22px;background:#ffffffd9;box-shadow:0 8px 25px #163c340b}
.about-principle-grid article{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:13px;min-height:92px;padding:8px 18px;text-align:left;background:transparent;border:0;border-radius:0;box-shadow:none}
.about-principle-grid article+article{border-left:1px solid #e2b74c}
.about-principle-grid .icon-bubble{grid-row:1/3;width:58px;height:58px;align-self:center;box-shadow:0 4px 10px #0e49301c}
.about-principle-grid h3{align-self:end;margin:0 0 5px;font-size:16px;line-height:1.18}
.about-principle-grid p{align-self:start;margin:0;font-size:12px;line-height:1.4}
.about-cta{min-height:125px;gap:22px;margin-top:22px;margin-bottom:0;padding:22px 34px 22px 235px;border-radius:22px;background:linear-gradient(105deg,#00775e,#004b43 72%,#00614e);box-shadow:0 8px 22px #06483c20}
.about-cta h2{max-width:480px;font-size:clamp(22px,2.4vw,30px)}
.about-cta p{max-width:490px;font-size:12px}
.about-cta-art{width:210px;max-height:125px;mask-image:linear-gradient(90deg,#000 58%,transparent)}
.about-cta .btn{min-width:245px}
.about-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:13px max(calc((100vw - 1200px)/2),32px);background:var(--deep);color:#e5f4ed;font-size:11px}
.about-footer>a{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.about-footer .icon{width:18px;height:18px}
@media(max-width:900px){
    .about-page{width:min(100% - 40px,720px)}
    .about-page .about-intro{grid-template-columns:minmax(190px,.7fr) minmax(0,1.4fr);gap:26px;padding:30px 26px 56px}
    .about-intro-lantern{display:none}
    .about-page .about-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .about-page .about-stats>div:nth-child(odd){padding-left:0;border-left:0}
    .about-box{padding:16px}
    .about-box>p{padding-left:0}
    .about-principle-grid article{grid-template-columns:48px minmax(0,1fr);column-gap:10px;padding-inline:12px}
    .about-principle-grid .icon-bubble{width:46px;height:46px}
    .about-principle-grid h3{font-size:14px}
    .about-principle-grid p{font-size:11px}
    .about-cta{padding-left:190px}
    .about-cta-art{width:170px}
    .about-footer{padding-inline:20px}
}
@media(max-width:620px){
    body.page-tentang-kami .botanical-right{right:0}
    .page-tentang-kami .hero-about,.page-tentang-kami .hero-about .hero-inner{min-height:0}
    .page-tentang-kami .hero-about .hero-inner{align-items:flex-start;padding:34px 22px 0}
    .page-tentang-kami .hero-about .hero-copy{width:100%;max-width:none}
    .page-tentang-kami .hero-about .hero-copy h1{max-width:430px;font-size:clamp(38px,10vw,54px);margin:13px 0 23px}
    .page-tentang-kami .hero-about .hero-art{position:relative;inset:auto;width:100%;max-width:none;height:auto;aspect-ratio:1135/611;margin:0;mask-image:linear-gradient(0deg,#000 86%,transparent);-webkit-mask-image:linear-gradient(0deg,#000 86%,transparent);mask-composite:add;-webkit-mask-composite:source-over}
    .page-tentang-kami .hero-about .hero-art>img{object-position:left 34%}
    .page-tentang-kami .hero-about .hero-light{display:none}
    .about-page{width:calc(100% - 36px);padding-top:16px}
    .about-page .about-intro{grid-template-columns:1fr;gap:24px;padding:22px 16px 48px;border-radius:24px}
    .about-page .about-intro:after{width:180px;height:150px;top:-90px;right:-90px}
    .about-intro-frame{width:min(100%,300px);border-radius:26px}
    .about-page .about-intro-art{border-radius:22px}
    .about-intro-copy h2{font-size:34px;margin-bottom:20px}
    .about-intro-copy>p{font-size:15px}
    .about-intro-copy blockquote{gap:14px;margin-top:18px;padding:14px}
    .about-quote-badge{width:48px;height:48px}
    .about-quote-badge .icon{width:24px;height:24px}
    .about-intro-copy blockquote p{padding-left:14px;font-size:13.5px}
    .about-page .about-stats{padding:12px 14px}
    .about-pillars{grid-template-columns:1fr;gap:12px;margin-top:20px}
    .about-box-title .icon-bubble{width:46px;height:46px}
    .about-box-title h2{font-size:27px}
    .about-box>p{padding-left:58px}
    .about-box li{font-size:12px}
    .about-principles{margin-top:22px}
    .about-principle-grid{grid-template-columns:1fr;padding:8px 12px}
    .about-principle-grid article{grid-template-columns:52px minmax(0,1fr);min-height:75px;padding:10px 7px}
    .about-principle-grid article+article{border-left:0;border-top:1px solid #e2b74c}
    .about-principle-grid .icon-bubble{width:44px;height:44px}
    .about-principle-grid h3{font-size:15px}
    .about-principle-grid p{font-size:12px}
    .about-cta{align-items:flex-start;gap:15px;margin-top:17px;padding:22px 18px;border-radius:18px}
    .about-cta h2{font-size:24px}
    .about-cta p{font-size:12px}
    .about-cta-art{right:0;width:130px;opacity:.22}
    .about-cta .btn{width:100%;min-width:0}
    .about-footer{align-items:flex-start;flex-direction:column;gap:5px;padding:14px 20px 70px}
}
