:root{
  --about-max:1600px;
  --about-side:80px;
  --about-radius:26px;
  --about-title:38px;
  --about-copy:22px;
  --about-small:22px;
}

.about-page{
  background:#fff;
}

.about-page .inner{
  width:100%;
  max-width:var(--about-max);
  margin:0 auto;
  padding:0 var(--about-side);
}

.about-top{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(0deg, rgba(31,21,72,.86), rgba(31,21,72,.86)),
    url("../assets/sebastian-pichler-bAQH53VquTc-unsplash.jpg") center/cover no-repeat;
}

.about-top::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events:none;
}

.about-top .inner{
  position:relative;
  z-index:1;
  padding-top:180px;
  padding-bottom:112px;
}

.hero-copy{
  max-width:980px;
}

.hero-copy h1{
  margin:0 0 18px;
  font-size:38px;
  line-height:1.16;
  color:var(--gold);
  font-weight:700;
  padding-top: 32px;
}

.hero-tagline{
  margin:0 0 28px;
  font-size:22px;
  line-height:1.28;
  color:#fff;
}

.hero-copy p,
.perspective p{
  margin:0 0 20px;
  max-width:1040px;
  font-size:var(--about-copy);
  line-height:1.68;
  color:rgba(255,255,255,.96);
}

.perspective{
  margin-top:150px;
  max-width:1180px;
}

.perspective h2{
    color: #E4CE8E; 
    font-size: 38px; 
}

.values-title{
  font-size: 38px;
}

.practice-title,
.team h2,
.begin-clarity h2{
  margin:0 0 24px;
  font-size:var(--about-title);
  line-height:1.22;
  font-weight:700;
}

.values-wrap{
  margin-top:130px;
}

.values-title{
  margin-bottom:34px;
  text-align:center;
  color:#fff;
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:28px 32px;
  justify-content:center;
}

.value-card{
  grid-column:span 2;
  min-height:100px;
  max-width:500px;
  border-radius:var(--about-radius);
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 42px rgba(7,5,18,.20);
  transition:transform .35s ease, box-shadow .35s ease;
}

.value-card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 28px 52px rgba(7,5,18,.24);
}

.value-card.is-centered-row:nth-child(4){
  grid-column:2 / span 2;
}

.value-card.is-centered-row:nth-child(5){
  grid-column:4 / span 2;
}

.value-media{
  height:180px;
  overflow:hidden;
}

.value-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s ease;
}

.value-card:hover .value-media img{
  transform:scale(1.08);
}

.value-body{
  padding:15px 20px;
}

.value-body h3{
  margin:0 0 14px;
  color:var(--blue);
  font-size:22px;
  line-height:1.18;
}

.value-body p{
  margin:0;
  color:var(--blue);
  font-size:var(--about-copy);
  line-height:1.52;
}

.about-practice,
.team,
.begin-clarity,
.footer{
  position:relative;
}

.about-practice{
  background:#fff;
  overflow:hidden;
  padding:118px 0 82px;
}

.about-practice .inner{
  max-width:none;
  padding:0 100px;
}

.about-practice::before,
.team::before{
  content:"pca";
  position:absolute;
  inset:auto 0 auto 0;
  top:118px;
  font-size:420px;
  line-height:1;
  font-weight:700;
  letter-spacing:-16px;
  text-align:center;
  color:rgba(31,21,72,.03);
  pointer-events:none;
  user-select:none;
}

.practice-title{
  margin-bottom:42px;
  text-align:center;
  color:var(--blue);
}

.switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
}

.firm-btn{
  width:462px;
  min-height:204px;
  padding:24px 26px 24px;
  border:none;
  border-radius:30px;
  background:#6b618d;
  color:#fff;
  box-shadow:0 18px 34px rgba(31,21,72,.14);
  transition:transform .32s ease, box-shadow .32s ease, background .32s ease;
  cursor:pointer;
}

.firm-btn:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 24px 40px rgba(31,21,72,.20);
}

.firm-btn.is-active{
  background:var(--blue);
}

.firm-btn-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:102px;
}

.firm-btn-logo{
  width:235px;
  height:auto;
  display:block;
}

.firm-btn-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:8px;
  color:var(--gold);
  font-size:28px;
  font-weight:600;
}

.caret-tri{
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:10px solid var(--gold);
  transition:transform .28s ease;
}

.firm-btn.is-active .caret-tri{
  transform:rotate(180deg);
}

.firm-cards{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:30px; /* jarak antar box kuning */
  transition:opacity .28s ease, transform .28s ease;
}

.firm-card{
  min-height:210px; /* optional, supaya isi lebih lega */
  padding:30px 24px 24px; /* ruang dalam box */
  border-radius:16px;
  background:var(--gold);
  box-shadow:0 14px 26px rgba(31,21,72,.10);
  opacity:0;
  transform:translateY(14px);
  transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.firm-card .t{
  margin:0 0 16px;
  color:var(--blue);
  font-size:20px; /* ukuran judul */
  line-height:1.2;
  font-weight:700;
}

.firm-card .d{
  margin:0;
  color:var(--blue);
  font-size:16px; /* ukuran deskripsi */
  line-height:1.5;
}

.about-banner{
  position:relative;
  z-index:1;
  margin-top:38px;
  text-align:center;
  color:#585363;
  font-size:var(--about-copy);
  line-height:1.45;
}

.team{
  background:#fff;
  overflow:hidden;
  padding:92px 0 96px;
}

.team::before{
  top:16px;
}

.team[hidden],
.team.is-hidden{
  display:none;
}

.team h2{
  margin-bottom:24px;
  color:var(--blue);
  text-align:center;
}

.team .lead,
.team .sub{
  width:1200px;
  margin:0 auto;
  text-align:center;
  color:var(--blue);
}

.team .lead{
  font-size:var(--about-copy);
  line-height:1.5;
}

.team .sub{
  margin-top:52px;
  font-size:22px;
  line-height:1.45;
  color:#504a5e;
}

.team-grid{
  margin-top:72px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:36px 44px;
}

.team-card{
  min-height:340px;
  padding:42px 42px 36px;
  border-radius:20px;
  background:#f4f4f4;
  box-shadow:0 10px 22px rgba(12,10,24,.06);
  transition:transform .32s ease, box-shadow .32s ease;
}

.team-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 20px 34px rgba(12,10,24,.10);
}

.team-card.is-single-last{
  grid-column:1 / -1;
  width:700px;
  justify-self:center;
}

.team-card[hidden]{
  display:none !important;
}

.team-card .name{
  margin:0 0 10px;
  color:var(--blue);
  font-size:36px;
  line-height:1.15;
}

.team-card .role{
  margin:0 0 28px;
  color:var(--blue);
  font-size:22px;
  line-height:1.3;
  font-weight:500;
}

.team-card .desc{
  margin:0;
  color:#302b42;
  font-size:21px;
  line-height:1.55;
}

.team-card .read{
  display:inline-block;
  margin-top:30px;
  color:#5f5f5f;
  font-size:22px;
  font-weight:500;
  transition:color .24s ease, transform .24s ease;
}

.team-card .read:hover{
  color:var(--blue);
  transform:translateX(4px);
}

.begin-clarity{
  background:#fff;
  padding:28px 0 0;
}

.begin-clarity .inner{
  padding-bottom:74px;
  text-align:center;
}

.begin-clarity h2{
  margin-bottom:12px;
  color:var(--blue);
}

.begin-clarity p{
  width:1120px;
  margin:0 auto;
  color:#4b4559;
  font-size:var(--about-copy);
  line-height:1.5;
}

.begin-clarity .assess{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
  padding:20px 48px;
  border-radius:999px;
  background:var(--blue);
  color:var(--gold);
  font-size:26px;
  font-weight:700;
}

.begin-clarity .assess .arrow{
  width:26px;
  height:26px;
  filter:invert(84%) sepia(26%) saturate(498%) hue-rotate(349deg) brightness(95%) contrast(92%);
}

.begin-clarity .assess.btn-cta::before{
  background:rgba(228,206,142,.22);
}

.clarity-closing{
  margin-top:86px;
  color:var(--blue);
  font-size:40px;
  line-height:1.18;
  font-weight:500;
}

.about-next-step{
  background:var(--gold);
  padding:62px 0 76px;
}

.about-next-step .inner{
  width:100%;
  max-width:var(--about-max);
  margin:0 auto;
  padding:0 var(--about-side);
}

.about-next-step h3{
  margin:0 0 16px;
  color:var(--blue);
  font-size:42px;
  line-height:1.12;
}

.about-next-step p{
  width:980px;
  margin:0 0 42px;
  color:#363041;
  font-size:var(--about-copy);
  line-height:1.55;
}

.about-next-step .subscribe{
  width:840px;
  height:74px;
  border-radius:0;
  background:transparent;
  padding:0;
  gap:0;
  box-shadow:none;
}

.about-next-step .subscribe input{
  flex:1;
  height:60px;
  border:none;
  border-radius:0;
  padding:0 24px;
  background:#fff;
  font-size:26px;
}

.about-next-step .subscribe button{
  height:60px;
  min-width:218px;
  border:none;
  border-radius:0;
  background:var(--blue);
  color:#fff;
  font-size:22px;
  font-weight:700;
  font-family: "IBM Plex Sans";
}

.about-next-step .subscribe button.btn-cta::before{
  background:rgba(228,206,142,.22);
}

.footer{
  padding:48px 0 0;
}

.footer .inner{
  max-width:1600px;
  margin:0 auto;
  padding:0 80px 20px;
  display:flex;
  gap:80px;
  align-items:flex-start;
}

.footer .brand-row img:first-child{
  height:140px;
}

.footer .contact,
.footer-bottom{
  font-size:18px;
}

.footer .col h4{
  font-size:30px;
}

.footer .links{
  font-size:16px;
}

.nav .nav-dropbtn,
.nav ul,
.btn-contact{
  font-size:22px;
}

@media (prefers-reduced-motion: reduce){
  .value-card,
  .value-media img,
  .firm-btn,
  .firm-card,
  .team-card,
  .team-card .read,
  .caret-tri{
    transition:none !important;
  }
}