.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--navy);
  position: relative;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(23, 191, 209, .35);
}
.brand-mark i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(23, 191, 209, .45);
}
.brand-mark i:nth-child(1) { left: 8px; top: 9px; }
.brand-mark i:nth-child(2) { right: 7px; top: 15px; background: var(--green); }
.brand-mark i:nth-child(3) { left: 16px; bottom: 7px; background: var(--silver); }
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transform-origin: left center;
  left: 12px;
  top: 15px;
  width: 20px;
}
.brand-mark::before { transform: rotate(18deg); }
.brand-mark::after { transform: rotate(66deg); width: 18px; }

.official-logo-crop {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: block;
  background: #07182a;
  box-shadow: 0 4px 16px rgba(7, 24, 42, .18);
}
.official-logo-crop img {
  position: absolute;
  width: 128px;
  height: 128px;
  max-width: none;
  left: -38px;
  top: -27px;
  object-fit: cover;
}
.hero-logo-panel {
  min-height: 450px;
  display: grid;
  place-items: center;
}
.hero-logo-panel img {
  width: min(100%, 470px);
  height: auto;
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
}
@media (max-width: 820px) {
  .hero-logo-panel { min-height: auto; }
  .hero-logo-panel img { width: min(100%, 390px); }
}

.official-network-mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 14px;
  background: #07182a;
  box-shadow: 0 5px 18px rgba(7, 24, 42, .2);
}
.official-network-mark img { width: 100%; height: 100%; object-fit: contain; }
.hero-network {
  min-height: 480px;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}
.hero-network::before {
  content: "";
  position: absolute;
  inset: 10% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 191, 209, .14), transparent 68%);
  z-index: -1;
}
.hero-network > img {
  width: min(92%, 430px);
  height: 410px;
  object-fit: contain;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .42));
}
.network-caption {
  width: min(90%, 420px);
  margin-top: -32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(23, 191, 209, .38);
  border-radius: 14px;
  background: rgba(7, 24, 42, .78);
  backdrop-filter: blur(10px);
  color: #fff;
}
.network-caption span { color: #a9bbc7; font-size: .86rem; }
@media (max-width: 820px) {
  .hero-network { min-height: 410px; }
  .hero-network > img { height: 340px; }
}

.site-header {
  height: 120px;
}
.brand {
  gap: 0;
}
.brand .brand-logo {
  width: 80px;
  height: 80px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent;
}
.brand .brand-wordmark {
  width: 480px;
  height: 82px;
  margin-left: -2px;
  display: block;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}
.hero-integrated-logo {
  min-height: 510px;
  display: grid;
  place-items: center;
  position: relative;
}
.hero-integrated-logo > img {
  width: min(100%, 505px);
  max-height: 555px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 28px 75px rgba(0, 0, 0, .42);
}
@media (max-width: 820px) {
  .site-header { height: 110px; }
  .site-header nav { top: 110px; }
  .brand .brand-logo { width: 72px; height: 72px; }
  .brand .brand-wordmark { width: 420px; height: 70px; }
  .hero-integrated-logo { min-height: auto; }
  .hero-integrated-logo > img { width: min(100%, 430px); max-height: none; }
}
@media (max-width: 520px) {
  .site-header { height: 92px; padding-left: 18px; padding-right: 18px; }
  .site-header nav { top: 92px; }
  .brand { gap: 0; }
  .brand .brand-logo { width: 50px; height: 50px; }
  .brand .brand-wordmark { width: 260px; height: 48px; margin-left: -1px; }
}

/* Approved option B: emerald/teal lockup on a continuous navy header. */
#header { background: var(--navy); border-bottom: 1px solid rgba(216, 226, 232, .4); }
.site-header { background: var(--navy); color: #f1f6f8; }
.brand { flex: 0 1 auto; min-width: 0; }
.brand .brand-lockup { width: 340px; height: 102px; display: block; object-fit: contain; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: #65dfce; }
.site-header .button-small { background: #0aaea7; color: #fff; }
.site-header .menu-button { color: #65dfce; }
@media (max-width: 820px) {
  .brand .brand-lockup { width: 300px; height: 90px; }
  .site-header nav { background: var(--navy); border: 1px solid rgba(216, 226, 232, .3); }
}
@media (max-width: 520px) {
  .brand .brand-lockup { width: min(240px, calc(100vw - 110px)); height: 72px; }
}
/* Original supplied emblem with ANAK TIMUR as the primary company name. */
.brand-original-lockup { display: flex; align-items: center; gap: 12px; }
.brand .brand-original-emblem { width: 86px; height: 104px; display: block; object-fit: contain; flex: 0 0 auto; }
.brand-original-name { display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; line-height: 1; }
.brand-anak-timur { font-size: 34px; font-weight: 900; color: #f1f6f8; white-space: nowrap; }
.brand-mandiri { font-size: 25px; font-weight: 800; color: #22c6b4; margin-top: 4px; }
.brand-tagline { font-size: 11px; font-weight: 400; line-height: 1.4; color: #f1f6f8; border-top: 1px solid #22c6b4; padding-top: 5px; margin-top: 6px; white-space: nowrap; }
@media (max-width: 820px) {
  .brand .brand-original-emblem { width: 74px; height: 90px; }
  .brand-anak-timur { font-size: 30px; }
  .brand-mandiri { font-size: 22px; }
}
@media (max-width: 520px) {
  .brand-original-lockup { gap: 7px; }
  .brand .brand-original-emblem { width: 50px; height: 68px; }
  .brand .brand-anak-timur { font-size: clamp(17px, 5.5vw, 25px); }
  .brand .brand-mandiri { font-size: clamp(13px, 4vw, 18px); margin-top: 3px; }
  .brand .brand-tagline { font-size: clamp(6.5px, 1.9vw, 9px); margin-top: 4px; padding-top: 4px; }
}