/* =========================================================
   PT MUDA JAYA MULTINIAGA
   ABOUT PAGE
   ========================================================= */


/* =========================================================
   01. ABOUT HERO
   ========================================================= */

.about-hero {
  position: relative;

  width: 100%;
  min-height: 600px;

  overflow: hidden;

  background-color: #050505;
  color: var(--color-white);
}


/* =========================================================
   HERO — BACKGROUND
   ========================================================= */

.about-hero__media {
  position: absolute;
  inset: 0;

  z-index: 0;

  overflow: hidden;
}

.about-hero__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center 50%;

  pointer-events: none;
}


/* =========================================================
   HERO — OVERLAY
   ========================================================= */

.about-hero__overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background: transparent;
}


/* =========================================================
   HERO — INNER
   ========================================================= */

.about-hero__inner {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 520px;

  padding-top: 82px;
  padding-bottom: 48px;
}


/* =========================================================
   HERO — TITLE
   ========================================================= */

.about-hero__title {
  align-self: center;

  margin-top: 12px;

  color: var(--color-white);

  font-size:
    clamp(
      3.6rem,
      6vw,
      5.4rem
    );

  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;

  text-align: center;
}


/* =========================================================
   HERO — STATISTICS
   ========================================================= */

.about-hero__stats {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  width: min(
    100%,
    860px
  );

  margin-inline: auto;
}


/* =========================================================
   HERO — STAT
   ========================================================= */

.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;

  text-align: center;
}

.about-stat__number {
  color: var(--color-white);

  font-size:
    clamp(
      3rem,
      4.6vw,
      4.6rem
    );

  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

.about-stat__label {
  color: rgba(255, 255, 255, 0.92);

  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
}

/* =========================================================
   02. ABOUT INTRODUCTION
   ========================================================= */

.about-intro {
  position: relative;

  width: 100%;

  padding:
    92px
    0
    108px;

  background-color: var(--color-white);
  color: var(--color-black);
}


/* =========================================================
   INTRO — LAYOUT
   ========================================================= */

.about-intro__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  align-items: start;

  gap: 110px;
}


/* =========================================================
   INTRO — LEFT
   ========================================================= */

.about-intro__left {
  display: flex;
  flex-direction: column;
}


/* =========================================================
   INTRO — TITLE
   ========================================================= */

.about-intro__title {
  max-width: 500px;

  color: var(--color-black);

  font-size:
    clamp(
      2.4rem,
      3.5vw,
      3.4rem
    );

  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;

  white-space: pre-line;
}


/* =========================================================
   INTRO — VALUES
   ========================================================= */

.about-intro__values {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 28px;

  max-width: 470px;

  margin-top: 48px;
}


/* =========================================================
   INTRO VALUE
   ========================================================= */

.about-intro-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* ICON */

.about-intro-value__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  margin-bottom: 14px;

  border-radius: 50%;

  background-color: #f5ead3;
}

.about-intro-value__icon img {
  width: 20px;
  height: 20px;

  object-fit: contain;
}


/* VALUE TITLE */

.about-intro-value h3 {
  color: var(--color-black);

  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}


/* VALUE DESCRIPTION */

.about-intro-value p {
  margin-top: 5px;

  color: var(--color-grey-500);

  font-size: 0.62rem;
  line-height: 1.5;
}


/* =========================================================
   INTRO — RIGHT
   ========================================================= */

.about-intro__right {
  display: flex;
  flex-direction: column;

  padding-top: 4px;
}


/* =========================================================
   INTRO — COPY
   ========================================================= */

.about-intro__copy {
  display: flex;
  flex-direction: column;

  gap: 28px;

  max-width: 510px;
}

.about-intro__copy p {
  color: var(--color-grey-500);

  font-size: 0.82rem;
  line-height: 1.75;
}


/* =========================================================
   INTRO — BUTTON
   ========================================================= */

.about-intro__button {
  align-self: flex-start;

  margin-top: 54px;
}

/* =========================================================
   03. VISION & MISSION
   ========================================================= */

.about-purpose {
  position: relative;

  width: 100%;

  padding:
    92px
    0
    112px;

  background-color: var(--color-white);
  color: var(--color-black);
}


/* =========================================================
   PURPOSE — LAYOUT
   ========================================================= */

.about-purpose__inner {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-items: start;

  gap: 120px;
}


/* =========================================================
   PURPOSE — COLUMN
   ========================================================= */

.about-purpose__column {
  display: flex;
  flex-direction: column;
}


/* =========================================================
   PURPOSE — TITLE
   ========================================================= */

.about-purpose__title {
  color: var(--color-black);

  font-size:
    clamp(
      2.5rem,
      3.6vw,
      3.65rem
    );

  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}


/* =========================================================
   PURPOSE — VISION
   ========================================================= */

.about-purpose__vision {
  max-width: 470px;

  margin-top: 48px;

  color: var(--color-grey-500);

  font-size: 0.82rem;
  line-height: 1.75;
}


/* =========================================================
   PURPOSE — MISSION
   ========================================================= */

.about-purpose__mission {
  display: flex;
  flex-direction: column;

  gap: 24px;

  max-width: 520px;

  margin-top: 48px;
  padding: 0;

  list-style: none;
}

.about-purpose__mission li {
  position: relative;

  padding-left: 18px;

  color: var(--color-grey-500);

  font-size: 0.82rem;
  line-height: 1.7;
}


/* CUSTOM BULLET */

.about-purpose__mission li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.72em;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background-color: var(--color-black);

  transform: translateY(-50%);
}

/* =========================================================
   04. OUR LEADERSHIP
   ========================================================= */

.about-leadership {
  position: relative;

  width: 100%;
  min-height: 560px;

  padding:
    76px
    0
    82px;

  overflow: hidden;

  background-color: #050505;
  color: var(--color-white);
}


/* =========================================================
   LEADERSHIP — LAYOUT
   ========================================================= */

.about-leadership__inner {
  position: relative;

  display: grid;

  grid-template-columns:
    240px
    minmax(0, 1fr);

  align-items: center;

  column-gap: 64px;

  min-height: 400px;
}

/* =========================================================
   LEADERSHIP — HEADING
   ========================================================= */

.about-leadership__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  min-height: 390px;
}

/* =========================================================
   LEADERSHIP — TITLE
   ========================================================= */

.about-leadership__title {
  color: var(--color-white);

  font-size:
    clamp(
      3.8rem,
      5.4vw,
      5.2rem
    );

  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;

  white-space: pre-line;
}


/* =========================================================
   LEADERSHIP — ACCORDION
   ========================================================= */

.leadership-accordion {
  position: relative;

  display: flex;
  align-items: stretch;

  gap: 14px;

  width: max-content;

  padding-top: 52px;

  justify-self: end;
}

/* =========================================================
   LEADERSHIP — GOLD LINE
   ========================================================= */

.leadership-accordion::before {
  content: "";

  position: absolute;

  top: 0;
  left: 88px;
  right: 0;

  height: 1px;

  background-color:
    rgba(167, 139, 79, 0.95);

  transform:
    scaleX(
      var(
        --leadership-line-scale,
        1
      )
    );

  transform-origin:
    left center;
}

/* =========================================================
   LEADERSHIP — NEXT BUTTON
   ========================================================= */

.about-leadership__next {
  position: absolute;

  left: -34px;
  bottom: 92px;

  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 68px;
  height: 68px;

  border: 0;

  background-color: var(--color-gold);
  color: #111111;

  font-size: 1.2rem;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 320ms var(--ease-standard),
    transform 320ms var(--ease-standard);
}

.about-leadership__next:hover {
  background-color: var(--color-gold-soft);

  transform: translateX(3px);
}


/* =========================================================
   LEADERSHIP — CARD
   ========================================================= */

.leadership-card {
  position: relative;

  flex:
    0
    0
    145px;

  height: 390px;

  overflow: hidden;

  border-radius: 18px;

  background-color: #151515;

  cursor: pointer;

  isolation: isolate;
}

/* ACTIVE CARD */

.leadership-card.is-active {
  flex-basis: 320px;
}

/* =========================================================
   LEADERSHIP — IMAGE
   ========================================================= */

.leadership-card__image {
  position: absolute;
  inset: 0;

  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;
}


/* INACTIVE IMAGE */

.leadership-card:not(.is-active)
.leadership-card__image {
  transform: scale(1.045);

  filter: brightness(0.72);
}


/* ACTIVE IMAGE */

.leadership-card.is-active
.leadership-card__image {
  transform: scale(1);

  filter: brightness(1);
}


/* =========================================================
   LEADERSHIP — IMAGE OVERLAY
   ========================================================= */

.leadership-card__overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 48%,
      rgba(0, 0, 0, 0.76) 100%
    );
}


/* =========================================================
   LEADERSHIP — ACTIVE CONTENT
   ========================================================= */

.leadership-card__active-content {
  position: absolute;

  left: 50%;
  bottom: 26px;

  z-index: 2;

  width: calc(100% - 52px);
  padding: 0;

  text-align: center;

  opacity: 0;

  transform:
    translate(-50%, 12px);
}

.leadership-card.is-active
.leadership-card__active-content {
  opacity: 1;

  transform:
    translate(-50%, 0);
}

.leadership-card__active-content h3 {
  margin: 0;

  color: var(--color-white);

  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.25;
}

.leadership-card__active-content p {
  margin-top: 6px;
  margin-bottom: 0;

  color:
    rgba(255, 255, 255, 0.92);

  font-size: 0.72rem;
  line-height: 1.35;
}


/* =========================================================
   LEADERSHIP — COLLAPSED CONTENT
   ========================================================= */

.leadership-card__collapsed-content {
  position: absolute;

  left: 16px;
  bottom: 24px;

  z-index: 2;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  opacity: 1;
}


/* HIDE COLLAPSED NAME ON ACTIVE CARD */

.leadership-card.is-active
.leadership-card__collapsed-content {
  opacity: 0;
}


/* COLLAPSED NAME */

.leadership-card__collapsed-content h3 {
  color: var(--color-white);

  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.2;

  white-space: nowrap;
}


/*
  Position/title is intentionally hidden when collapsed.
  It appears only after the card becomes active.
*/

.leadership-card__collapsed-content p {
  display: none;
}

/* =========================================================
   ABOUT PAGE — SHARED FOOTER FALLBACK
   ========================================================= */

.site-footer {
  position: relative;

  width: 100%;

  padding:
    72px
    0
    34px;

  background-color: #1d1b19;
  color: var(--color-white);
}


/* =========================================================
   FOOTER — TOP
   ========================================================= */

.site-footer__top {
  display: grid;

  grid-template-columns:
    minmax(250px, 1.35fr)
    0.65fr
    0.9fr
    0.9fr;

  align-items: start;

  gap: 70px;
}


/* BRAND */

.site-footer__brand {
  max-width: 285px;
}

.site-footer__logo {
  display: block;

  width: 180px;
}

.site-footer__brand p {
  max-width: 250px;

  margin-top: 34px;

  color:
    rgba(255, 255, 255, 0.9);

  font-size: 0.72rem;
  line-height: 1.7;
}


/* =========================================================
   FOOTER — COLUMNS
   ========================================================= */

.site-footer__column h3 {
  margin-bottom: 28px;

  color: var(--color-gold);

  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
}

.site-footer__links,
.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 12px;
}

.site-footer__links a,
.site-footer__links span,
.site-footer__contact a,
.site-footer__contact span {
  color:
    rgba(255, 255, 255, 0.92);

  font-size: 0.62rem;
  line-height: 1.45;
}

.site-footer__links a,
.site-footer__contact a {
  transition:
    color 260ms var(--ease-standard),
    transform 260ms var(--ease-standard);
}

.site-footer__links a:hover,
.site-footer__contact a:hover {
  color: var(--color-gold);

  transform:
    translateX(3px);
}


/* =========================================================
   FOOTER — DIVIDER
   ========================================================= */

.site-footer__divider {
  width: 100%;
  height: 1px;

  margin:
    72px
    0
    34px;

  background-color:
    rgba(167, 139, 79, 0.5);
}


/* =========================================================
   FOOTER — BOTTOM
   ========================================================= */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.site-footer__bottom p,
.site-footer__legal a {
  color:
    rgba(255, 255, 255, 0.86);

  font-size: 0.56rem;
  line-height: 1.4;
}

.site-footer__legal {
  display: flex;
  align-items: center;

  gap: 26px;
}

.site-footer__legal a {
  transition:
    color 260ms var(--ease-standard);
}

.site-footer__legal a:hover {
  color: var(--color-gold);
}