/* Sudut Ruang tentang.css: halaman Tentang Kami v2 (t-). Dimuat hanya di /tentang-kami/. Token saja. */
.t-hero{min-height:clamp(520px,80svh,820px)}
.t-hero__title{max-width:13ch}
.t-hero__meta{list-style:none;padding:0}
.t-hero__cap{background:transparent}
.t-hero__cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sky)}
.t-no{font-variant-numeric:tabular-nums;color:var(--navy);margin-right:-2px}
.x-kicker--light .t-no{color:var(--white)}
.t-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:44px}
.t-head .x-body{margin-top:0;max-width:44ch}
.t-sub{margin:0 0 16px;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bright)}
.t-note{margin-top:20px;font-size:.9375rem;color:var(--ink-2);max-width:62ch}

/* 01 Manifesto */
.t-manifesto__line{max-width:15ch;font-size:clamp(1.75rem,6vw,5.4rem);line-height:.98}
.t-manifesto__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;margin-top:48px}
.t-defs{display:grid;gap:0 32px;margin-top:28px;border-top:1px solid var(--line)}
.t-defs > div{padding:18px 0;border-bottom:1px solid var(--line)}
.t-defs dt{font-size:1.125rem;font-weight:700;color:var(--navy)}
.t-defs dd{margin:6px 0 0;color:var(--ink-2)}
.t-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px;margin-top:44px}
@media (min-width:768px){.t-figures{grid-template-columns:auto auto minmax(0,1fr);gap:20px clamp(20px,3vw,44px)}}
.t-figure{display:grid;align-content:start;gap:8px}
.t-figure__num{font-size:clamp(2rem,5.4vw,4.6rem);font-weight:800;line-height:.9;letter-spacing:-.06em;color:var(--navy);font-variant-numeric:tabular-nums}
.t-figure:nth-child(2) .t-figure__num{color:var(--bright)}
.t-figure__lbl{max-width:20ch;font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.t-def{margin-top:36px;padding:20px 22px;border-radius:var(--r-lg2);background:var(--bg-soft);font-size:.9375rem;color:var(--ink-2)}
.t-collage{position:relative;min-height:clamp(440px,110vw,640px)}
.t-collage__item{position:absolute;margin:0;overflow:hidden;border-radius:var(--r-xl);background:var(--light);box-shadow:var(--shadow-navy)}
.t-collage__item img{width:100%;height:100%;object-fit:cover}
.t-collage__item--1{left:0;top:0;width:66%;height:62%}
.t-collage__item--2{right:0;top:24%;width:46%;height:46%;border:6px solid var(--white)}
.t-collage__item--3{left:14%;bottom:0;width:50%;height:34%}
.t-collage__badge{position:absolute;right:0;bottom:4%;max-width:200px;padding:16px 18px;border-radius:16px;background:var(--navy);color:var(--white);font-size:.6875rem;font-weight:700;letter-spacing:.14em;line-height:1.6;box-shadow:var(--shadow-navy)}
@media (min-width:1024px){.t-manifesto__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:80px;align-items:start}.t-collage{min-height:700px}}

/* 02 Positioning */
.t-pos__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.t-points{list-style:none;padding:0;counter-reset:p}
.t-points li{counter-increment:p;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid var(--line);font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:600;line-height:1.45;color:var(--navy)}
.t-points li::before{content:counter(p,decimal-leading-zero);font-size:.8125rem;font-weight:700;padding-top:.35em;color:var(--bright)}
.t-vision{margin-top:28px;padding:28px 24px;border-radius:var(--r-xl);background:var(--white);box-shadow:var(--shadow-navy)}
.t-vision__who{color:var(--ink-2)}
.t-vision__who strong{color:var(--navy)}
.t-vision__t{margin:22px 0 8px;padding-top:18px;border-top:1px solid var(--line);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bright)}
.t-vision p:last-child{font-size:1.125rem;line-height:1.6;color:var(--navy)}
@media (min-width:1024px){.t-pos__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:96px}.t-pos__head{position:sticky;top:calc(var(--header-h) + 32px);align-self:start}.t-vision{padding:36px}}

/* 03 Nilai (pita navy, daftar interaktif) */
.t-values{overflow:hidden}
.t-values__head{margin-bottom:48px}
.t-vals{list-style:none;padding:0;border-top:1px solid var(--line-dark)}
.t-val{border-bottom:1px solid var(--line-dark);transition:opacity .35s}
.t-val__h{margin:0}
.t-val__btn{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:72px;padding:16px 0;text-align:left;color:var(--white)}
.t-val__n{font-size:.8125rem;font-weight:600;color:var(--sky);font-variant-numeric:tabular-nums}
.t-val__name{font-size:clamp(1.75rem,5vw,4.2rem);font-weight:700;line-height:1.02;letter-spacing:-.045em;transition:transform .5s var(--ease-spring),color .3s}
.t-val__ic{position:relative;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(254,254,254,.3);transition:background .3s,transform .45s var(--ease-spring)}
.t-val__ic::before,.t-val__ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor}
.t-val__ic::after{transform:rotate(90deg);transition:transform .35s var(--ease-out)}
.t-val.is-open .t-val__name{color:var(--sky)}
.t-val.is-open .t-val__ic{background:var(--sky);color:var(--navy);transform:rotate(180deg)}
.t-val.is-open .t-val__ic::after{transform:none}
.t-val__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.t-val__body > div{overflow:hidden}
.t-val__body p{padding:0 0 24px 3.35rem;max-width:52ch;font-size:1.0625rem;color:var(--light)}
.t-val.is-open .t-val__body,html:not(.js) .t-val__body{grid-template-rows:1fr}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
	.t-val{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:40px}
	.t-val__btn{min-height:104px;padding:20px 0}
	.t-val__ic{display:none}
	.t-val__body,.t-val.is-open .t-val__body{display:block;opacity:0;transform:translateX(-16px);transition:opacity .35s,transform .5s var(--ease-out);visibility:hidden}
	.t-val__body p{padding:0;font-size:1.125rem}
	.t-val.is-open .t-val__body,html:not(.js) .t-val__body{opacity:1;transform:none;visibility:visible}
	.t-val.is-open .t-val__name{transform:translateX(14px)}
	.t-vals:hover .t-val:not(:hover){opacity:.45}
}

/* 04 Tim — Team Showcase: grid foto bertingkat + daftar nama yang saling menyorot (assets/js/team.js) */
.t-show{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-bottom:40px}
.t-show__grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-user-select:none;user-select:none}
.t-show__grid::-webkit-scrollbar{display:none}
.t-show__col{display:flex;flex-direction:column;gap:10px;flex:none}
.t-show__col--2{margin-top:48px}
.t-show__col--3{margin-top:22px}
.t-ph{position:relative;flex:none;width:112px;height:122px;border-radius:16px;overflow:hidden;background:var(--light);cursor:pointer;transition:opacity .5s var(--ease-out),transform .6s var(--ease-spring),background .5s var(--ease-out)}
.t-show__col--2 .t-ph{width:124px;height:134px}
.t-show__col--3 .t-ph{width:116px;height:127px}
.t-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.92) contrast(1.05);transition:filter .6s var(--ease-out)}
.t-ph__tone{position:absolute;inset:0;background:var(--navy);mix-blend-mode:multiply;opacity:0;pointer-events:none;transition:opacity .5s}
.t-ph--img .t-ph__tone{opacity:.25}
.t-ph__mono{display:grid;place-items:center;width:100%;height:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:600;letter-spacing:.12em;color:rgba(4,54,102,.42);transition:color .5s,transform .6s var(--ease-spring)}
.t-ph--lead{background:linear-gradient(160deg,var(--light),color-mix(in srgb,var(--light) 78%,var(--sky)))}
.t-ph__no{position:absolute;left:10px;bottom:8px;font-size:.625rem;letter-spacing:.14em;color:rgba(4,54,102,.45);transition:color .5s}
/* Corner Bracket: penanda foto aktif */
.t-ph__br{position:absolute;inset:8px;opacity:0;transform:scale(1.08);transition:opacity .45s var(--ease-out),transform .6s var(--ease-spring);pointer-events:none}
.t-ph__br i{position:absolute;width:12px;height:12px;border:0 solid var(--white)}
.t-ph__br i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
.t-ph__br i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
.t-ph__br i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.t-ph__br i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.t-ph.is-on{background:var(--navy);transform:translateY(-4px)}
.t-ph.is-on .t-ph__mono{color:var(--white);transform:scale(1.08)}
.t-ph.is-on .t-ph__no{color:var(--sky)}
.t-ph.is-on img{filter:none}
.t-ph.is-on .t-ph__tone{opacity:0}
.t-ph.is-on .t-ph__br{opacity:1;transform:none}
.t-show.has-active .t-ph:not(.is-on){opacity:.45}

.t-show__list{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.t-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;transition:opacity .35s var(--ease-out)}
.t-show.has-active .t-row:not(.is-on){opacity:.42}
.t-row__line{width:12px;height:2px;margin-top:14px;background:rgba(4,54,102,.25);transition:width .4s var(--ease-spring),background .3s}
.t-row.is-on .t-row__line{width:24px;background:var(--sky)}
.t-row__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0}
.t-row__name{padding:0;border:0;background:none;font:inherit;font-size:clamp(1.125rem,1.6vw,1.375rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--navy);text-align:left;cursor:pointer;transition:transform .45s var(--ease-spring)}
.t-row.is-on .t-row__name{transform:translateX(4px)}
.t-row__name:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:4px}
.t-row__no{font-size:.625rem;letter-spacing:.16em;color:rgba(4,93,147,.6)}
.t-row__tag{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--light);font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.t-row__role{margin:6px 0 0;font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bright)}
.t-row__focus{margin:6px 0 0;max-width:46ch;font-size:.9375rem;color:var(--ink-2)}
@media (min-width:640px){.t-show__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}}
@media (min-width:1024px){
	.t-show{grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:start}
	.t-show__grid{overflow:visible;padding:0}
	.t-show__col,.t-show__grid{gap:14px}
	.t-show__col--2{margin-top:72px}
	.t-show__col--3{margin-top:34px}
	.t-ph{width:156px;height:168px;border-radius:20px}
	.t-show__col--2 .t-ph{width:172px;height:184px}
	.t-show__col--3 .t-ph{width:162px;height:174px}
	.t-ph__mono{font-size:2rem}
	.t-show__list{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:6px}
}
@media (min-width:1280px){.t-show__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px}}
@media (prefers-reduced-motion:reduce){.t-ph,.t-ph__mono,.t-ph__br,.t-row,.t-row__line,.t-row__name{transition:none}}

/* 05 Rekam jejak */
.t-track__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.t-base{display:grid;gap:4px;margin:28px 0 0;padding-top:20px;border-top:1px solid var(--navy)}
.t-base__v{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.05em;color:var(--navy)}
.t-base__l{font-size:.875rem;color:var(--ink-2)}
.t-track__head .x-pill{margin-top:28px}
.t-ledger{list-style:none;padding:0}
.t-ledger li{display:grid;gap:4px;padding:18px 4px;border-bottom:1px solid var(--line);transition:background .3s,padding .4s var(--ease-out)}
.t-ledger li:hover{background:var(--white);padding-inline:16px}
.t-ledger__name{font-weight:700;color:var(--navy)}
.t-ledger__meta{font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:var(--bright);font-variant-numeric:tabular-nums}
.t-ledger__scope{font-size:.9375rem;color:var(--ink-2)}
@media (min-width:768px){.t-ledger li{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:4px 24px}.t-ledger__scope{grid-column:1/-1}}
@media (min-width:1024px){.t-track__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px}.t-track__head{position:sticky;top:calc(var(--header-h) + 32px);align-self:start}}

/* 06 Cara kerja */
.t-steps{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px}
.t-steps li{display:grid;gap:14px;align-content:start;padding:24px 0 28px;border-bottom:1px solid var(--line)}
.t-steps__n{font-size:3.4rem;font-weight:800;line-height:.85;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--bright)}
.t-steps p{color:var(--ink);font-weight:500}
.t-legal{display:grid;gap:8px;margin-top:40px;padding:24px;border-radius:var(--r-lg2);background:var(--bg-soft)}
.t-legal__t{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bright)}
.t-legal p{color:var(--ink-2);max-width:72ch}
@media (min-width:768px){.t-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.t-steps{grid-template-columns:repeat(4,minmax(0,1fr))}.t-steps li{border-bottom:0;padding-bottom:0}.t-legal{grid-template-columns:minmax(0,3fr) minmax(0,9fr);align-items:baseline;gap:32px;padding:28px 32px}}

/* Penutup brand berlatar foto */
.t-close{position:relative;display:flex;align-items:flex-end;min-height:clamp(520px,82svh,820px);padding-block:96px 64px;color:var(--white);background:radial-gradient(120% 90% at 85% 0%,var(--royal) 0%,var(--navy) 62%);overflow:hidden;isolation:isolate}
.t-close__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.t-close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,54,102,.96) 0%,rgba(4,54,102,.72) 45%,rgba(4,54,102,.35) 100%)}
.t-close__line{max-width:22ch;font-size:clamp(2rem,4.6vw,4.4rem);font-weight:800;line-height:1.04;letter-spacing:-.045em;color:var(--white);text-wrap:balance}
.t-close__note{margin-top:22px;max-width:52ch;color:var(--light)}
@media (min-width:1024px){.t-close{padding-bottom:96px}}
@media (prefers-reduced-motion:reduce){.t-val__name,.t-val__body{transition:none!important}}
@media print{.t-close__actions,.t-collage{display:none!important}.t-val__body{display:block!important;visibility:visible!important;opacity:1!important}}