:root {
  --deep: #123c32;
  --ev: #1f6b57;
  --sage: #8eae9f;
  --ivory: #f7f8f4;
  --ink: #17211e;
  --lime: #c7ddb8;
  --line: rgba(18, 60, 50, 0.16);
  --f: "Plus Jakarta Sans", system-ui, sans-serif;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--f);
  background: var(--ivory);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
}
h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}
h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}
a {
  color: var(--ev);
}
:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 2000;
  background: #fff;
  padding: 0.5rem 1rem;
}
.container {
  max-width: 1240px;
}
.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ev);
}
.dark {
  background: var(--deep);
  color: #fff;
}
.dark p,
.dark li {
  color: #cfe0d7;
}
.dark .eyebrow {
  color: var(--lime);
}
.sec {
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.tint {
  background: #ecf0e8;
}
.lead2 {
  max-width: 42rem;
  color: #41524c;
}
/* buttons */
.btn-eh {
  display: inline-block;
  background: var(--ev);
  color: #fff;
  border: 1.5px solid var(--ev);
  border-radius: 999px;
  padding: 0.8rem 1.7rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.2s;
  will-change: transform;
}
.btn-eh:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--deep);
}
.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.light-ghost {
  background: transparent;
  color: var(--deep);
  border-color: var(--deep);
}
.lnk {
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  gap: 0.4rem;
}
.lnk span,
.arr {
  transition: transform 0.3s;
}
.lnk:hover span {
  transform: translateX(5px);
}
/* nav */
.eh-nav {
  padding: 1.1rem 0;
  transition:
    background 0.35s,
    padding 0.35s,
    backdrop-filter 0.35s;
}
.eh-nav.scrolled {
  background: rgba(18, 60, 50, 0.88);
  backdrop-filter: blur(14px);
  padding: 0.6rem 0;
}
.navbar-brand {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.navbar-brand span {
  color: var(--lime);
  margin-left: 0.3em;
}
.navbar-brand img {
  height: 2.6rem;
  width: auto;
}
.eh-nav .nav-link {
  color: #e6efe9;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0.85rem !important;
  position: relative;
}
.eh-nav .nav-link.active,
.eh-nav .nav-link:hover {
  color: #fff;
}
.eh-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.1rem;
  height: 2px;
  background: var(--lime);
}
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}
.navbar-toggler-icon {
  filter: invert(1);
}

/* hero */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(120% 90% at 85% 10%, #1b5545 0, var(--deep) 60%);
}
.hero-home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 6rem;
}
.hero-s {
  padding: 10rem 0 5rem;
}
.hero p.lead {
  color: #cfe0d7;
  max-width: 40rem;
  font-size: 1.15rem;
}
.hero-line {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 60%;
  opacity: 0.55;
}
.hero-line path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 3.2s 0.3s ease forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent);
}
.ln {
  display: block;
  overflow: hidden;
}
.ln span {
  display: block;
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ln:nth-child(2) span {
  animation-delay: 0.15s;
  color: var(--lime);
}
@keyframes rise {
  from {
    transform: translateY(105%);
  }
}
.float {
  position: absolute;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(199, 221, 184, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  font-size: 0.85rem;
  color: var(--lime);
  transition: transform 0.2s ease-out;
  display: none;
}
@media (min-width: 992px) {
  .float {
    display: block;
  }
}
/* chip hero: posisi baru, titik warna per bidang, melayang pelan */
.f1{right:14%;top:22%}.f2{right:28%;top:40%}.f3{right:8%;top:62%}
.f4{right:3%;top:38%}.f5{right:26%;top:70%}.f6{right:12%;top:78%}
.float{white-space:nowrap;animation:bob 7s ease-in-out infinite}
.float::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.55rem;background:currentColor}
.k-f::before{background:var(--lime)}.k-p::before{background:var(--sage)}.k-t::before{background:#fff}
.f2{animation-delay:-1.5s}.f3{animation-delay:-3s}.f4{animation-delay:-4.5s}.f5{animation-delay:-2.2s}.f6{animation-delay:-5.5s}
@keyframes bob{50%{translate:0 -9px}}
@media(max-width:1199px){.f4,.f5,.f6{display:none}}
.stat b {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  display: block;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat small {
  color: #bcd2c8;
}
/* cards */
.card-eh {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.8rem;
  position: relative;
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.3s;
}
.card-eh:hover {
  border-color: var(--ev);
  background: #fff;
  transform: translateY(-4px);
  color: inherit;
}
.card-eh .ic {
  font-size: 1.8rem;
  color: var(--ev);
  display: inline-block;
  transition: transform 0.4s;
}
.card-eh:hover .ic {
  transform: translateY(-4px) rotate(-6deg);
}
.card-eh .arr {
  display: inline-block;
  opacity: 0;
  transform: translateX(-8px);
  color: var(--ev);
  font-weight: 700;
}
.card-eh:hover .arr {
  opacity: 1;
  transform: none;
}
.card-eh h3 {
  margin: 0.8rem 0 0.4rem;
  font-size: 1.35rem;
}
.card-eh p {
  margin: 0;
  color: #41524c;
  font-size: 0.97rem;
}
.g4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 991px) {
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .g4 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: -12px;
  }
  .g4 > * {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}
/* service tabs */
.svc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.svc-tab,
.filter-btn {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-weight: 600;
  color: var(--ink);
  transition: 0.25s;
}
.svc-tab.on,
.filter-btn.on,
.svc-tab:hover,
.filter-btn:hover {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}
.svc-pane {
  display: none;
}
.svc-pane.on {
  display: block;
  animation: fadein 0.5s;
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}
.svc-list {
  columns: 2;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.svc-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.svc-list li::before {
  content: "✓";
  color: var(--ev);
  margin-right: 0.7rem;
  font-weight: 700;
}
@media (max-width: 575px) {
  .svc-list {
    columns: 1;
  }
}
/* signature process */
.proc {
  height: 420vh;
  position: relative;
}
.proc-stick {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.steps {
  list-style: none;
  padding: 0 0 0 2rem;
  margin: 2.5rem 0 0;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.steps-fill {
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 2px;
  height: 0;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
}
.steps li {
  padding: 0.45rem 0;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  opacity: 0.4;
  transition: 0.4s;
}
.steps li.on {
  opacity: 1;
  color: var(--lime);
  transform: translateX(8px);
}
.steps li p {
  display: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1rem;
}
.viz-wrap {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 2rem;
}
.viz {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  height: 220px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.viz i {
  flex: 1;
  background: var(--sage);
  border-radius: 6px 6px 0 0;
  transition:
    height 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.5s;
}
.viz i.hl {
  background: var(--lime);
}
.viz-t b {
  font-size: 4rem;
  color: var(--lime);
  line-height: 1;
}
.viz-t {
  margin-top: 1.5rem;
  transition: opacity 0.3s;
}
@media (max-width: 991px) {
  .proc {
    height: auto;
  }
  .proc-stick {
    position: static;
    height: auto;
    padding: 4rem 0;
  }
  .viz-wrap {
    display: none;
  }
  .steps li {
    opacity: 1;
  }
  .steps li p {
    display: block;
  }
  .steps-fill {
    display: none;
  }
}
/* clients */
.logo {
  aspect-ratio: 3/2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
  color: var(--deep);
  /* filter: grayscale(1); */
  /* opacity: 0.65; */
  transition:
    filter 0.35s,
    opacity 0.35s,
    transform 0.35s;
}
.logo small {
  display: block;
  font-weight: 400;
  color: #5b6d66;
  font-size: 0.75rem;
}
.logo:hover {
  filter: none;
  opacity: 1;
}
.lg {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 991px) {
  .lg {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 575px) {
  .lg {
    grid-template-columns: repeat(2, 1fr);
  }
}
.fi {
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.fi.hide {
  display: none;
}
.fi.fade {
  opacity: 0;
  transform: scale(0.92);
}
.marq {
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.marq-t {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: mq 45s linear infinite;
}
.marq-t .logo {
  width: 210px;
  flex: none;
}
.marq:hover .marq-t,
.marq.paused .marq-t {
  animation-play-state: paused;
}
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
/* case + insight */
.case {
  display: block;
  text-decoration: none;
  color: inherit;
}
.case .im {
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ev), var(--deep));
  position: relative;
}
.case .im::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0 2px,
    transparent 2px 22px
  );
  transition: transform 0.7s;
}
.case:hover .im::after {
  transform: scale(1.15);
}
.case .badge-c {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  background: var(--lime);
  color: var(--deep);
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.case h3 {
  margin: 1rem 0 0.4rem;
}
.case:hover .lnk span {
  transform: translateX(6px);
}
.case p {
  color: #41524c;
}
.meta {
  font-size: 0.85rem;
  color: #5b6d66;
}
.ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
}
/* forms */
.form-control,
.form-select {
  border-radius: 10px;
  border: 1px solid #b9c7c0;
  padding: 0.8rem 1rem;
  background: #fff;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ev);
  box-shadow: 0 0 0 0.2rem rgba(31, 107, 87, 0.2);
}
.form-label {
  font-weight: 600;
}
.hp {
  position: absolute;
  left: -9999px;
}
/* cta + footer */
.cta {
  background: var(--deep);
  color: #fff;
  text-align: center;
}
.cta p {
  color: #cfe0d7;
}
.foot {
  background: #0d2d26;
  color: #b5cbc1;
  padding: 4.5rem 0 2rem;
  font-size: 0.95rem;
}
.foot a {
  color: #b5cbc1;
  text-decoration: none;
}
.foot a:hover {
  color: #fff;
}
.foot h4 {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0;
}
.foot ul {
  list-style: none;
  padding: 0;
}
.foot li {
  margin: 0.4rem 0;
}
.foot .big {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}
.foot .big img {
  height: 2.6rem;
  width: auto;
}
.crumb {
  font-size: 0.85rem;
  color: #a9c2b6;
  margin-bottom: 1rem;
}
.crumb a {
  color: #a9c2b6;
}
.rv {
  transition:
    opacity 0.8s,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .rv {
  opacity: 0;
  transform: translateY(22px);
}
.js .rv.in {
  opacity: 1;
  transform: none;
}
/* client logos: kotak seragam, logo di-contain, nama PT di bawah */
.logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem}
.logo img{width:100%;max-width:150px;height:56px;object-fit:contain;display:block}
.logo small{font-size:.76rem;line-height:1.3;font-weight:600;color:#41524c}
.logo.noimg small{font-size:.95rem;font-weight:700;color:var(--deep)}

/* timeline About */
.tl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:.55rem;height:2px;background:linear-gradient(90deg,var(--ev),var(--lime))}
.tl-i{position:relative;padding-top:2.2rem}
.tl-i::before{content:"";position:absolute;left:0;top:0;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--ivory);border:3px solid var(--ev);transition:background .3s,transform .3s}
.tl-i:hover::before,.tl-i.hl::before{background:var(--ev);transform:scale(1.2)}
.tl-y{display:block;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.03em;color:var(--deep);line-height:1}
.tl-y.w{font-size:1.3rem;padding-top:.5rem;color:var(--ev)}
.tl-i.hl .tl-y{color:var(--ev)}
.tl-i h3{font-size:1.05rem;margin:.7rem 0 .4rem;line-height:1.25}
.tl-i p{font-size:.93rem;color:#41524c;margin:0}
/* layanan: butir dengan penjelasan + kotak info */
.svc-d{columns:1}
.svc-d li{position:relative;padding:.85rem 0 .85rem 1.9rem}
.svc-d li::before{position:absolute;left:0;margin:0}
.svc-d b{display:block;font-weight:700}
.svc-d span{display:block;font-size:.93rem;line-height:1.5;color:#41524c}
.svc-h{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ev);font-weight:700;margin:1.8rem 0 .2rem}
.svc-act{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:1.6rem}
.svc-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.5rem;margin-top:1rem}
.svc-box h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ev);font-weight:700;margin-bottom:.5rem}
.svc-box p,.svc-box ul{margin:0;font-size:.95rem;color:#41524c}
.svc-box ul{padding-left:1.1rem}.svc-box li{margin:.3rem 0}

/* halaman teknologi bisnis */
.trow{padding:clamp(2rem,5vw,3.5rem) 0}
.trow+.trow{border-top:1px solid var(--line)}
.trow h3{margin:.4rem 0 .8rem}
.chips{margin-bottom:.4rem}
.chips span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.15rem .8rem;margin:0 .4rem .4rem 0;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--ev);background:#fff}
.stp{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.18)}
.stp b{color:var(--lime);font-size:1.8rem;display:block;line-height:1;margin-bottom:.6rem}
.stp h3{font-size:1.15rem;margin-bottom:.4rem}.stp p{font-size:.95rem;margin:0}
@media(max-width:991px){.stp{grid-template-columns:1fr 1fr}}
@media(max-width:575px){.stp{grid-template-columns:1fr}}
@media(max-width:991px){
  .tl{grid-template-columns:1fr;gap:2rem;padding-left:2rem}
  .tl::before{left:.55rem;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--ev),var(--lime))}
  .tl-i{padding-top:0}.tl-i::before{left:-2rem;top:.2rem}
}
/* kartu industri berfoto */
.ind{position:relative;display:block;min-height:290px;height:100%;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--ev),var(--deep))}
.ind.i2{background:linear-gradient(135deg,#2c7a64,#0d2d26)}.ind.i3{background:linear-gradient(135deg,#3b8470,#123c32)}
.ind.i4{background:linear-gradient(135deg,#17483b,#0a2019)}.ind.i5{background:linear-gradient(135deg,#4a8a73,#1a4a3d)}
.ind .ph{position:absolute;inset:0;transition:transform .7s}
.ind::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,60,50,.1) 20%,rgba(13,45,38,.92) 90%)}
.ind-t{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;z-index:1}
.ind-t h3{color:#fff;margin:0 0 .35rem;font-size:1.45rem}
.ind-t p{margin:0;color:#dbe8e1;font-size:.94rem;line-height:1.5}
.ind .arr{display:inline-block;margin-top:.7rem;color:var(--lime);font-weight:700;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.ind:hover .ph{transform:scale(1.07)}.ind:hover .arr{opacity:1;transform:none}
@media(hover:none){.ind .arr{opacity:1;transform:none}}

/* halaman legal */
.legal{max-width:46rem}
.legal h2{font-size:1.4rem;letter-spacing:-.01em;margin:2.5rem 0 .8rem}
.legal p,.legal li{color:#33443e}
.legal ul{padding-left:1.2rem}.legal li{margin:.35rem 0}
.legal mark{background:var(--lime);color:var(--deep);padding:0 .3rem;border-radius:4px}

/* ===== halaman legal: sidebar daftar isi ===== */
.legal-wrap {
  display: grid;
  grid-template-columns: 15rem minmax(0, 46rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.legal-nav {
  position: sticky;
  top: 6rem;                 /* sesuaikan tinggi navbar */
  align-self: start;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sage) transparent;
  padding-right: .5rem;
}
.legal-nav::-webkit-scrollbar { width: 4px; }
.legal-nav::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 4px; }

.legal-nav h2 {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ev);
  font-weight: 700;
  margin: 0 0 1rem;
  padding-left: 1rem;
}
.legal-nav-t { display: none; }   /* tombol hanya muncul di mobile */

.legal-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line);
  counter-reset: toc;
}
.legal-nav li { counter-increment: toc; }
.legal-nav a {
  position: relative;
  display: block;
  margin-left: -2px;               /* menimpa garis track */
  padding: .42rem .6rem .42rem 1rem;
  border-left: 2px solid transparent;
  font-size: .875rem;
  line-height: 1.4;
  color: #5b6d66;
  text-decoration: none;
  font-weight: 500;
  transition: color .25s, border-color .25s, background .25s;
}
.legal-nav a::before {
  content: counter(toc) ".";
  margin-right: .45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sage);
  transition: color .25s;
}
.legal-nav a:hover { color: var(--ev); border-left-color: var(--sage); }
.legal-nav a.on {
  color: var(--deep);
  font-weight: 700;
  border-left-color: var(--ev);
  background: linear-gradient(90deg, rgba(199, 221, 184, .38), transparent 88%);
}
.legal-nav a.on::before { color: var(--ev); }

/* judul tidak tertutup navbar saat diklik dari daftar isi */
.legal h2 { scroll-margin-top: 7rem; }

/* ===== mobile: nav jadi panel lipat ===== */
@media (max-width: 991px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .legal-nav {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .legal-nav h2 { display: none; }
  .legal-nav-t {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: var(--deep);
    cursor: pointer;
    text-align: left;
  }
  .legal-nav-t span { color: var(--ev); transition: transform .3s; }
  .legal-nav.open .legal-nav-t span { transform: rotate(180deg); }
  .legal-nav ol { display: none; border-left: 0; padding-bottom: .9rem; }
  .legal-nav.open ol { display: block; }
  .legal-nav a { margin-left: 0; border-left: 0; padding-left: .2rem; }
  .legal-nav a.on { background: none; }
}

/* ===== about: daftar bidang konsultasi ===== */
.bd-lead {
  max-width: 46rem;
  font-size: 1.05rem;
  color: #cfe0d7;
}

/* baris judul kolom (desktop) */
.bd-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: .85rem 0 .85rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lime);
}

.bd {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bd-i {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.1rem) 0 clamp(1.5rem, 3vw, 2.1rem) 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  transition: background .35s;
}
/* garis aksen yang tumbuh saat hover */
.bd-i::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.bd-i:hover {
  background: linear-gradient(90deg, rgba(199, 221, 184, .07), transparent 72%);
}
.bd-i:hover::before { transform: scaleY(1); }

.bd-n {
  display: block;
  margin-bottom: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: var(--lime);
  transition: letter-spacing .35s;
}
.bd-i:hover .bd-n { letter-spacing: .26em; }

.bd-t h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: #fff;
}

.bd-s,
.bd-b { min-width: 0; }

.bd-s p,
.bd-b p {
  margin: 0;
  font-size: .97rem;
  line-height: 1.6;
}

.bd-s p { color: #cfe0d7; }

/* manfaat = payoff, jadi lebih terang + tanda centang */
.bd-b p {
  color: #eef4f0;
  padding-left: 1.35rem;
  position: relative;
}
.bd-b p::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--lime);
  font-weight: 700;
}

/* label kolom yang hanya muncul di mobile */
.bd-m { display: none; }

.bd-act {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ===== jendela aplikasi ===== */
.workspace {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(18, 60, 50, .5);
}

.ws-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem .95rem;
  background: #ecf0e8;
  border-bottom: 1px solid var(--line);
}
.ws-dots { display: flex; gap: .4rem; flex: none; }
.ws-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--sage); opacity: .75; }
.ws-url {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .8rem;
  font-size: .8rem;
  color: #5b6d66;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-live {
  flex: none;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--deep);
  background: var(--lime);
  border-radius: 999px;
  padding: .22rem .7rem;
}

.ws-body { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); }

/* sidebar modul */
.ws-side {
  background: #fbfcfa;
  border-right: 1px solid var(--line);
  padding: 1.1rem .7rem;
  max-height: 36rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sage) transparent;
}
.ws-side-h {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ev);
  margin: 0 0 .5rem .6rem;
}
.ws-side-h + ul + .ws-side-h { margin-top: 1.2rem; }
.ws-side ul { list-style: none; margin: 0 0 .2rem; padding: 0; }

.ws-nav {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .6rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: #41524c;
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
}
.ws-nav::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  transition: background .25s, transform .25s;
}
.ws-nav:hover { background: rgba(18, 60, 50, .06); color: var(--deep); }
.ws-nav.on {
  background: #fff;
  color: var(--deep);
  box-shadow: 0 2px 10px -5px rgba(18, 60, 50, .4);
}
.ws-nav.on::before { background: var(--ev); transform: scale(1.35); }

/* panggung */
.ws-stage { padding: clamp(.5rem, 1.6vw, 1rem); background: #fbfcfa; }

.screen { position: relative; display: none; margin: 0; }
.screen.on { display: block; animation: fadein .45s both; }
.screen img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* ===== pin bernomor ===== */
.pins { position: absolute; inset: 0; pointer-events: none; }

.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--deep);
  font-family: var(--f);
  font-size: .7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0 4px rgba(199, 221, 184, .4);
  animation: pin-pulse 2.8s ease-in-out infinite;
  transition: transform .25s, box-shadow .25s;
}
.pin:hover,
.pin:focus-visible,
.pin.open {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 0 7px rgba(199, 221, 184, .45);
  animation-play-state: paused;
  outline: none;
}
@keyframes pin-pulse {
  50% { box-shadow: 0 0 0 10px rgba(199, 221, 184, .12); }
}

/* ===== tooltip ===== */
.tip {
  position: absolute;
  bottom: calc(100% + .8rem);
  left: 50%;
  transform: translateX(calc(-50% + var(--shift, 0px))) translateY(5px);
  width: 15rem;
  max-width: 62vw;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: var(--deep);
  color: #eef4f0;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 16px 36px -16px rgba(13, 45, 38, .65);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(calc(-50% - var(--shift, 0px)));
  border: 7px solid transparent;
  border-top-color: var(--deep);
}
.tip b { display: block; color: #fff; font-size: .80rem; margin-bottom: .15rem; }

.pin:hover .tip,
.pin.open .tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-50% + var(--shift, 0px))) translateY(0);
}

/* flip ke bawah kalau ruang atas kurang */
.pin.tip-down .tip {
  bottom: auto;
  top: calc(100% + .8rem);
  transform: translateX(calc(-50% + var(--shift, 0px))) translateY(-5px);
}
.pin.tip-down .tip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--deep);
}
.pin.tip-down:hover .tip,
.pin.tip-down.open .tip {
  transform: translateX(calc(-50% + var(--shift, 0px))) translateY(0);
}

/* ===== keterangan pin di bawah jendela ===== */
.ws-caps {
  display: none;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem 2rem;
  counter-reset: cap;
}
.ws-caps.on { display: grid; animation: fadein .45s both; }
.ws-caps li {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  font-size: .94rem;
  color: #41524c;
}
.ws-caps i {
  counter-increment: cap;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--deep);
  color: var(--lime);
  font-size: .8rem;
  font-weight: 800;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.ws-caps i::before { content: counter(cap); }
.ws-caps b { display: block; color: var(--ink); margin-bottom: .1rem; }
.ws-caps li.hl { background: rgba(199, 221, 184, .3); border-radius: 8px; }
.ws-caps li.hl i { background: var(--ev); color: #fff; }

/* ===== responsif ===== */
@media (max-width: 991px) {
  .ws-body { grid-template-columns: 1fr; }
  .ws-side {
    display: flex;
    gap: .5rem;
    max-height: none;
    overflow-x: auto;
    padding: .7rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .ws-side-h { display: none; }
  .ws-side ul { display: flex; gap: .5rem; margin: 0; }
  .ws-nav {
    width: auto;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--line);
    font-size: .85rem;
  }
  .ws-nav.on { background: var(--deep); color: #fff; border-color: var(--deep); }
  .ws-nav.on::before { background: var(--lime); }
  .ws-caps { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .ws-stage { padding: .4rem; }
  .ws-url { font-size: .72rem; }
  .pin { width: 1.6rem; height: 1.6rem; font-size: .74rem; }
}
@media (hover: none) {
  .tip { display: none; }         /* layar sentuh: pakai daftar keterangan */
  .pin { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pin, .screen.on, .ws-caps.on { animation: none; }
}

/* ===== responsif ===== */
@media (max-width: 991px) {
  .bd-head { display: none; }
  .bd-i {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.7rem 0 1.7rem 1.15rem;
  }
  .bd-m {
    display: block;
    margin-bottom: .4rem;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sage);
  }
  .bd-s p { padding-left: 0; }
}

/* mobile menu fix: offcanvas-lg needs its own vars; backdrop-filter would trap the fixed panel */
.offcanvas-lg {
  --bs-offcanvas-bg: var(--deep);
  --bs-offcanvas-color: #fff;
}
@media (max-width: 991.98px) {
  .eh-nav.scrolled {
    backdrop-filter: none;
    background: var(--deep);
  }
  .eh-nav .nav-link {
    font-size: 1.4rem;
    padding: 0.6rem 0 !important;
  }
  .eh-nav .nav-link.active::after {
    left: 0;
    right: auto;
    width: 2rem;
  }
  .eh-nav .btn-eh {
    margin-top: 1.2rem;
    text-align: center;
  }
  .offcanvas-lg .offcanvas-header {
    padding: 1.1rem 1rem;
  }
}
/* photography */
.ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ev), var(--deep));
  aspect-ratio: 4/3;
}
.pf.top {
  margin: -1.8rem -1.8rem 1.4rem;
  border-radius: 14px 14px 0 0;
  aspect-ratio: 16/9;
}
.hero-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%);
  mask-image: linear-gradient(90deg, transparent, #000 65%);
}
@media (max-width: 991px) {
  .hero-img {
    width: 100%;
    opacity: 0.2;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.case .im .ph {
  position: absolute;
  inset: 0;
  transition: transform 0.7s;
}
.case:hover .im .ph {
  transform: scale(1.08);
}
.card-eh .pf.top .ph {
  transition: transform 0.6s;
}
.card-eh:hover .pf.top .ph {
  transform: scale(1.06);
}
/* ===== keterangan jadi interaktif (nyambung dengan pin) ===== */
.ws-caps li {
  padding: .5rem .6rem;
  border-radius: 8px;
  cursor: default;
  transition: background .3s, box-shadow .3s;
}
.ws-caps li.hl {
  background: rgba(199, 221, 184, .38);
  box-shadow: inset 3px 0 0 var(--ev);
}
.ws-caps li.hl i {
  background: var(--ev);
  color: #fff;
  transform: scale(1.05);
}
.ws-caps i {
  transition: background .3s, color .3s, transform .3s;
}
/* daftar panjang: rapikan jarak antar item */
.ws-caps { gap: .6rem 2rem; }
.ws-caps li span { font-size: .93rem; }

/* pin yang sedang ditautkan dari daftar: beri cincin ekstra */
.pin.open {
  box-shadow: 0 0 0 7px rgba(199, 221, 184, .5);
}
.pin.open::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--ev);
  opacity: .55;
}

/* ===== panel catatan ===== */
.ws-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.15rem 1.35rem;
  background: rgba(199, 221, 184, .3);
  border: 1px solid rgba(31, 107, 87, .2);
  border-left: 4px solid var(--ev);
  border-radius: 12px;
}
.ws-note-ic {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ev);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  flex: none;
}
.ws-note b {
  display: block;
  margin-bottom: .3rem;
  color: var(--deep);
  font-size: 1.02rem;
}
.ws-note p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: #33443e;
}
.ws-note a { font-weight: 600; }

/* ===== responsif ===== */
@media (max-width: 767px) {
  .ws-note { padding: 1rem; gap: .8rem; }
  .ws-note-ic { width: 1.5rem; height: 1.5rem; font-size: .85rem; }
}
/* ===== value: kolom kiri menempel saat daftar dibuka ===== */
.value-side { position: sticky; top: 6rem; }
.value-stat {
  display: flex;
  gap: 1.6rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.value-stat b {
  display: block;
  font-size: 1.5rem;
  color: var(--deep);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.value-stat small { color: #5b6d66; font-size: .8rem; }
@media (max-width: 991px) {
  .value-side { position: static; }
}

/* ===== ledger ===== */
.ledger { list-style: none; margin: 0; padding: 0; }

.lg-i { border-bottom: 1px solid var(--line); }
.lg-i:first-child { border-top: 1px solid var(--line); }

/* baris judul */
.lg-h {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  width: 100%;
  padding: 1.05rem 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: color .25s;
}
.lg-h:hover { color: var(--ev); }

.lg-n {
  flex: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--ev);
}
.lg-t {
  flex: none;
  max-width: 60%;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
/* garis putus-putus ala laporan keuangan */
.lg-d {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted rgba(18, 60, 50, .3);
  transform: translateY(-.3rem);
}
.lg-tag {
  flex: none;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ev);
  background: rgba(199, 221, 184, .5);
  border-radius: 999px;
  padding: .18rem .65rem;
}
.lg-x {
  flex: none;
  position: relative;
  width: .9rem;
  height: .9rem;
  transition: transform .35s;
}
.lg-x::before,
.lg-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ev);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .35s, opacity .35s;
}
.lg-x::before { transform: translateY(-50%); }
.lg-x::after { transform: translateY(-50%) rotate(90deg); }
.lg-i.on .lg-x { transform: rotate(180deg); }
.lg-i.on .lg-x::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

/* panel isi */
.lg-p {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
}
.lg-i.on .lg-p { grid-template-rows: 1fr; }
.lg-pi { overflow: hidden; }

.lg-c {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 1.4rem 2rem;
  padding: .3rem 0 1.7rem 2.9rem;
}
.lg-c h4 {
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ev);
  margin: 0 0 .5rem;
  font-weight: 700;
}
.lg-c p { margin: 0; font-size: .94rem; line-height: 1.6; color: #41524c; }
.lg-c ul { margin: 0; padding-left: 1.1rem; }
.lg-c li { font-size: .94rem; line-height: 1.6; color: #41524c; margin: .3rem 0; }
.lg-c > div:first-child p {
  color: var(--deep);
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
}

/* ===== responsif ===== */
@media (max-width: 1199px) {
  .lg-c { grid-template-columns: 1fr 1fr; padding-left: 2rem; }
  .lg-c > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .lg-h { flex-wrap: wrap; gap: .5rem .8rem; }
  .lg-t { max-width: none; flex: 1 1 auto; font-size: 1rem; }
  .lg-d { display: none; }
  .lg-c { grid-template-columns: 1fr; padding-left: 0; gap: 1.2rem; }
  .value-stat { gap: 1.1rem; }
  .value-stat b { font-size: 1.25rem; }
}

/* ===== hormati preferensi pengguna ===== */
@media (prefers-reduced-motion: reduce) {
  .lg-p { transition: none; }
  .lg-x, .lg-x::before, .lg-x::after { transition: none; }
}