/* Hero modern: Pendiri & Pilar */
.ph3{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:clamp(34px,5vw,64px) 0 clamp(100px,12vw,140px);background:#0d2b1d}
.ph3--pillars{background:#0b2238}
.ph3-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ph3-blob{position:absolute;border-radius:50%;filter:blur(70px);animation:ph3-drift 18s ease-in-out infinite}
.ph3--founder .ph3-b1{width:520px;height:520px;left:-140px;top:-180px;background:#2f9e5b;opacity:.45}
.ph3--founder .ph3-b2{width:440px;height:440px;right:-100px;bottom:-160px;background:#f6c453;opacity:.28;animation-delay:-6s}
.ph3--founder .ph3-b3{width:300px;height:300px;left:42%;top:-90px;background:#1d7a8c;opacity:.4;animation-delay:-11s}
.ph3--pillars .ph3-b1{width:520px;height:520px;left:-120px;bottom:-200px;background:#2b6a9c;opacity:.55}
.ph3--pillars .ph3-b2{width:420px;height:420px;right:-60px;top:-160px;background:#f6c453;opacity:.3;animation-delay:-6s}
.ph3--pillars .ph3-b3{width:300px;height:300px;left:40%;top:-100px;background:#2aa28a;opacity:.35;animation-delay:-11s}
.ph3-grid{position:absolute;inset:0;opacity:.07;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent);mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent)}
.ph3.has-photo .ph3-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,24,17,.92),rgba(8,24,17,.5)),var(--ph-photo) center/cover}
.ph3 .container{position:relative;z-index:3}
.ph3-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,64px)}
.ph3-copy>*{animation:ph2-up .7s cubic-bezier(.2,.7,.2,1) both}
.ph3-copy>*:nth-child(2){animation-delay:.07s}.ph3-copy>*:nth-child(3){animation-delay:.14s}.ph3-copy>*:nth-child(4){animation-delay:.21s}.ph3-copy>*:nth-child(5){animation-delay:.28s}
.ph3 h1{color:#fff;font-size:clamp(34px,5.4vw,66px);line-height:1.04;letter-spacing:-1.2px;margin:16px 0 14px;max-width:11em;text-wrap:balance}
.ph3 h1 em{font-style:normal;background:linear-gradient(100deg,#ffe59a,#f6c453 50%,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph3-desc{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.88);max-width:32em;margin:0}
.ph3-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.ph3 .ph2-crumb ol{margin-bottom:16px}
.ph3 .ph2-crumb li[aria-current]{color:#f6c453}
.ph3 .ph2-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* --- Pendiri: lengkungan berkaca --- */
.ph3-stage{position:relative;min-height:clamp(300px,36vw,420px)}
.ph3-arch{position:absolute;bottom:0;margin:0;width:clamp(112px,15vw,176px);border-radius:999px 999px 26px 26px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.35);box-shadow:0 30px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter:blur(10px);display:grid;place-items:center;animation:ph3-float 7s ease-in-out infinite;animation-delay:var(--d,0s)}
.ph3-arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph3-arch figcaption{position:absolute;left:8px;right:8px;bottom:10px;padding:6px 8px;border-radius:12px;background:rgba(10,30,20,.62);backdrop-filter:blur(6px);font-size:12px;font-weight:800;text-align:center;line-height:1.25}
.ph3-a1{left:2%;height:62%}
.ph3-a2{left:50%;transform:translateX(-50%);height:88%;z-index:2}
.ph3-a3{right:2%;height:50%}
.ph3-ini{font-family:var(--serif);font-size:clamp(34px,5vw,56px);font-weight:700;color:#ffe59a}
.ph3-leaf{width:46%;color:#ffe59a;opacity:.9}
.ph3-chip{position:absolute;z-index:4;padding:9px 16px;border-radius:999px;font-weight:800;font-size:13px;background:rgba(255,255,255,.92);color:#17432c;box-shadow:0 14px 30px rgba(0,0,0,.28);animation:ph3-float 6s ease-in-out infinite}
.ph3-c1{left:-2%;top:10%}
.ph3-c2{right:0;top:30%;animation-delay:-3s}
.ph3-a2.ph3-arch{animation-name:ph3-float-c}

/* --- Pilar: tiang naik --- */
.ph3-glow{position:absolute;left:50%;bottom:-10%;width:90%;height:70%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(246,196,83,.38),transparent);filter:blur(10px)}
.ph3-pils{position:absolute;left:0;right:0;bottom:14px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.6vw,18px);height:100%}
.ph3-pil{position:relative;flex:1 1 0;max-width:118px;height:var(--h);transform-origin:bottom;animation:ph3-rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.ph3-cap{position:absolute;left:-6px;right:-6px;top:-30px;height:34px;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,#ffe59a,#f6c453);box-shadow:0 -6px 24px rgba(246,196,83,.5)}
.ph3-shaft{position:absolute;inset:0;border-radius:6px 6px 4px 4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:16px 4px 0;text-align:center;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 2px,transparent 2px 14px),linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.ph3-shaft b{font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);color:#ffe59a;line-height:1}
.ph3-shaft i{font-style:normal;font-size:clamp(10.5px,1.1vw,13px);font-weight:800;letter-spacing:.3px;line-height:1.2;word-break:break-word;writing-mode:vertical-rl;transform:rotate(180deg);max-height:calc(var(--h) - 70px);overflow:hidden}
.ph3-floor{position:absolute;left:-4%;right:-4%;bottom:6px;height:10px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}

@keyframes ph3-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,22px)}}
@keyframes ph3-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ph3-float-c{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@keyframes ph3-rise{from{transform:scaleY(.05);opacity:0}to{transform:scaleY(1);opacity:1}}

@media (max-width:860px){
  .ph3-in{grid-template-columns:1fr}
  .ph3-stage{min-height:260px;order:2}
  .ph3--pillars .ph3-stage{min-height:300px}
  .ph3-shaft i{writing-mode:horizontal-tb;transform:none;max-height:none}
  .ph3-pil{max-width:none}
  .ph3-shaft i{font-size:10px}
}
@media (max-width:480px){.ph3-chip{font-size:11.5px;padding:7px 12px}.ph3-c1{left:0}}
@media (prefers-reduced-motion:reduce){.ph3-blob,.ph3-arch,.ph3-chip,.ph3-pil,.ph3-copy>*{animation:none!important}}

/* ===== Hero Pendiri v2 (editorial) ===== */
.ph3--founder{background:radial-gradient(90% 120% at 85% 20%,#1c5a3b 0%,#0d2b1d 60%,#081a12 100%)}
.ph3--founder .ph3-grid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 64 64'%3E%3Cpath d='M32 6l7 12 13-6-6 13 12 7-12 7 6 13-13-6-7 12-7-12-13 6 6-13-12-7 12-7-6-13 13 6Z' fill='none' stroke='%23f6c453' stroke-width='1'/%3E%3C/svg%3E");background-size:72px;opacity:.09}
.ph3--founder .ph3-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ph4-people{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.ph4-people li{display:flex;align-items:center;gap:11px;padding:7px 18px 7px 7px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.ph4-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#ffe59a,#f6c453);color:#17432c;font-family:var(--serif);font-weight:800;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.ph4-av img{width:100%;height:100%;object-fit:cover}
.ph4-nm{display:flex;flex-direction:column;line-height:1.2}
.ph4-nm b{font-size:14px}.ph4-nm small{font-size:12px;color:rgba(255,255,255,.72)}
.ph4-stage{position:relative;min-height:clamp(340px,40vw,470px);display:grid;place-items:center}
.ph4-word{position:absolute;left:50%;top:6%;transform:translateX(-50%);font-family:var(--serif);font-weight:800;font-size:clamp(70px,13vw,170px);letter-spacing:.04em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);white-space:nowrap}
.ph4-star{position:absolute;width:min(112%,540px);aspect-ratio:1;left:50%;top:50%;margin:calc(min(112%,540px)/-2) 0 0 calc(min(112%,540px)/-2);animation:ph4-spin 80s linear infinite;opacity:.8}
.ph4-arch{position:relative;width:clamp(210px,26vw,320px);aspect-ratio:3/4;padding:7px;border-radius:999px 999px 30px 30px;background:linear-gradient(160deg,#ffe59a,#f6c453 45%,#b8860b);box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 90px rgba(246,196,83,.25);animation:ph3-float 8s ease-in-out infinite}
.ph4-inner{position:absolute;inset:7px;border-radius:999px 999px 24px 24px;overflow:hidden;background:linear-gradient(170deg,#2f7a45,#0f3a25);display:grid;place-items:center}
.ph4-inner img{width:100%;height:100%;object-fit:cover}
.ph4-art{width:88%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}
.ph4-quote{position:absolute;left:0;bottom:8%;max-width:210px;padding:14px 18px 14px 16px;border-radius:20px;background:rgba(255,255,255,.95);color:#17432c;box-shadow:0 20px 40px rgba(0,0,0,.35);animation:ph3-float 6.5s ease-in-out infinite;animation-delay:-2s;display:grid;grid-template-columns:auto 1fr;column-gap:10px}
.ph4-quote b{grid-row:1/3;font-family:var(--serif);font-size:44px;line-height:.8;color:#d99a12}
.ph4-quote span{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.2}
.ph4-quote small{font-size:12px;color:#5b625c;font-weight:700}
.ph4-badge{position:absolute;right:2%;top:14%;padding:9px 16px;border-radius:999px;font-weight:800;font-size:13px;background:#f6c453;color:#3a2b00;box-shadow:0 14px 30px rgba(0,0,0,.3);animation:ph3-float 7s ease-in-out infinite;animation-delay:-4s}
@keyframes ph4-spin{to{transform:rotate(360deg)}}
@media (max-width:860px){
  .ph3--founder .ph3-in{grid-template-columns:1fr}
  .ph4-stage{min-height:340px;order:2}
  .ph4-quote{left:2%}
}
@media (prefers-reduced-motion:reduce){.ph4-star,.ph4-arch,.ph4-quote,.ph4-badge{animation:none!important}}

/* ===== Kartu profil pendiri (isi halaman) ===== */
.about-main .about-person:not(.is-letter){position:relative;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:start;
  background:linear-gradient(180deg,#fff,#fffdf6);border:1px solid var(--line);border-radius:32px;padding:clamp(24px,3.4vw,44px);margin-bottom:34px;box-shadow:0 26px 60px rgba(40,84,60,.1);overflow:hidden}
.about-main .about-person:not(.is-letter):nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(220px,300px)}
.about-main .about-person:not(.is-letter):nth-of-type(even) .about-person-photo{order:2}
.about-person-no{position:absolute;right:26px;top:6px;font-family:var(--serif);font-weight:800;font-size:clamp(70px,10vw,120px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(40,84,60,.14);pointer-events:none}
.about-main .about-person:not(.is-letter) .about-person-photo{position:relative;aspect-ratio:3/4;border-radius:999px 999px 26px 26px;padding:6px;background:linear-gradient(160deg,#ffe59a,#f6c453 50%,#b8860b);box-shadow:0 24px 50px rgba(184,134,11,.28);overflow:hidden}
.about-main .about-person:not(.is-letter) .about-person-photo img{border-radius:999px 999px 21px 21px;width:100%;height:100%;object-fit:cover}
.about-main .about-person:not(.is-letter) .about-initials{display:grid;place-items:center;width:100%;height:100%;border-radius:999px 999px 21px 21px;background:linear-gradient(170deg,#2f7a45,#0f3a25);color:#ffe59a;font-size:clamp(48px,7vw,72px)}
.about-main .about-person:not(.is-letter) h2{font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.6px;margin:0 0 12px;max-width:14em}
.about-main .about-person:not(.is-letter) .about-role{display:inline-block;margin:0 0 20px;padding:6px 16px;border-radius:999px;background:var(--green-l);color:var(--green-d);font-size:14px;font-weight:800}
.about-main .about-person:not(.is-letter) .about-prose{font-size:17px;line-height:1.8}
.about-main .about-person:not(.is-letter) .about-prose>p:first-child:first-letter{float:left;font-family:var(--serif);font-weight:800;font-size:3.4em;line-height:.85;margin:6px 10px 0 0;color:var(--green-d)}
.about-contrib{margin-top:26px;padding:20px 22px;border-radius:20px;background:linear-gradient(135deg,#eaf3df,#f6efd6);border-left:5px solid #d99a12}
.about-contrib h3{margin:0 0 10px!important;font-size:13px!important;letter-spacing:1.4px;text-transform:uppercase;color:var(--green-d);font-family:var(--sans)}
@media (max-width:760px){
  .about-main .about-person:not(.is-letter),.about-main .about-person:not(.is-letter):nth-of-type(even){grid-template-columns:1fr}
  .about-main .about-person:not(.is-letter):nth-of-type(even) .about-person-photo{order:0}
  .about-main .about-person:not(.is-letter) .about-person-photo{max-width:230px;margin-inline:auto}
}

/* ===== Hero Pendiri v3 — bersih, terang, profesional ===== */
.ph5{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#f6f1e1 0%,#fffdf7 100%);border-bottom:1px solid var(--line);padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,84px)}
.ph5-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(46% 60% at 92% 0%,rgba(63,138,74,.18),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(246,196,83,.2),transparent 70%)}
.ph5-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);gap:clamp(32px,6vw,84px);align-items:center}
.ph5 .ph2-crumb ol{margin:0 0 26px}
.ph5 .ph2-crumb a{color:var(--muted)}
.ph5 .ph2-crumb a:hover{color:var(--navy);text-decoration:underline}
.ph5 .ph2-crumb li[aria-current]{color:var(--navy)}
.ph5 .ph2-crumb li+li:before{color:var(--muted)}
.ph5-label{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--green-d)}
.ph5-label i{display:block;width:38px;height:2px;background:#d99a12}
.ph5 h1{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-1.8px;color:var(--navy-2);margin:18px 0 20px;text-wrap:balance}
.ph5 h1 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(246,196,83,.65) 62% 92%,transparent 92%);padding:0 .06em}
.ph5-desc{font-size:clamp(17px,1.7vw,20px);line-height:1.7;color:#4a514a;max-width:30em;margin:0}
.ph5-people{list-style:none;margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 14px}
.ph5-people li{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 22px rgba(40,84,60,.07)}
.ph5-av{width:46px;height:46px;border-radius:12px;overflow:hidden;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#2f7a45,#0f3a25);color:#ffe59a;font-family:var(--serif);font-weight:800}
.ph5-av img{width:100%;height:100%;object-fit:cover}
.ph5-nm{display:flex;flex-direction:column;line-height:1.25}
.ph5-nm b{font-size:15px;color:var(--navy-2)}
.ph5-nm small{font-size:12.5px;color:var(--muted)}
.ph5-media{position:relative;margin:0;justify-self:center;width:min(100%,430px)}
.ph5-media:before{content:"";position:absolute;inset:20px -20px -20px 20px;border:2px solid #d9b45a;border-radius:32px;z-index:0}
.ph5-frame{position:relative;z-index:1;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#1f6b42,#0c2e1e);box-shadow:0 36px 80px rgba(16,58,38,.28)}
.ph5-frame>img{width:100%;height:100%;object-fit:cover}
.ph5-brand{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#fff;
  background:radial-gradient(70% 55% at 50% 38%,rgba(255,255,255,.14),transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 6l7 12 13-6-6 13 12 7-12 7 6 13-13-6-7 12-7-12-13 6 6-13-12-7 12-7-6-13 13 6Z' fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1'/%3E%3C/svg%3E")}
.ph5-brand img{width:34%;height:auto;margin-bottom:14px}
.ph5-brand strong{font-family:var(--serif);font-size:clamp(24px,3vw,32px)}
.ph5-brand span{font-size:12px;font-weight:800;letter-spacing:4px;color:#f6c453}
.ph5-cap{position:absolute;z-index:2;left:-22px;bottom:34px;display:flex;flex-direction:column;padding:14px 22px 14px 18px;background:#fff;border-radius:16px;border-left:5px solid #d99a12;box-shadow:0 20px 44px rgba(0,0,0,.2);max-width:78%}
.ph5-cap b{font-family:var(--serif);font-size:18px;color:var(--navy-2);line-height:1.2}
.ph5-cap span{font-size:13px;color:var(--green-d);font-weight:700}
.ph5-copy>*{animation:ph2-up .7s cubic-bezier(.2,.7,.2,1) both}
.ph5-copy>*:nth-child(2){animation-delay:.06s}.ph5-copy>*:nth-child(3){animation-delay:.12s}.ph5-copy>*:nth-child(4){animation-delay:.18s}.ph5-copy>*:nth-child(5){animation-delay:.24s}
@media (max-width:900px){
  .ph5-in{grid-template-columns:1fr}
  .ph5-media{width:min(78%,340px);margin:10px auto 0}
  .ph5-media:before{inset:14px -12px -14px 14px}
  .ph5-cap{left:-10px}
}
@media (prefers-reduced-motion:reduce){.ph5-copy>*{animation:none!important}}