:root{
  --ink:#0a0907;
  --ink-2:#121009;
  --char:#1a1610;
  --line:#2a241a;
  --cream:#f6f1e4;
  --cream-2:#ece4cf;
  --paper:#fbf8f0;
  --mute:#8a8475;
  --gold:#c9a24c;
  --gold-2:#b5832f;
  --gold-3:#e6c97a;
  --gold-deep:#7a5a20;
  --grad-gold: linear-gradient(135deg,#e6c97a 0%,#c9a24c 38%,#8a6a2a 72%,#c9a24c 100%);
  --grad-gold-flat: linear-gradient(180deg,#e6c97a 0%, #b5832f 100%);
  --serif:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Manrope", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:clip;position:relative;width:100%}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- shared ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
@media (max-width:720px){ .wrap{padding:0 22px} }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-2);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:28px;height:1px;background:var(--gold);display:inline-block;
}
.eyebrow.on-dark{color:var(--gold-3)}
.eyebrow.on-dark::before{background:var(--gold)}

.gold-text{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.h-display{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:.95;
}
.h-section{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(40px,5.2vw,76px);
  line-height:1;
  letter-spacing:-.01em;
}
.lede{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px,2vw,26px);
  line-height:1.45;
  color:#3b352a;
}
.lede.on-dark{ color:#d8d1bd }

.body-md{font-size:16px;line-height:1.7;color:#34302a}
.body-md.on-dark{color:#cfc8b6}
.small-caps{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  font-weight:600;font-size:14px;letter-spacing:.02em;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn .arr{width:14px;height:14px}
.btn-gold{
  background:var(--grad-gold-flat);
  color:#1a1308;
  box-shadow:0 1px 0 #f7e8c1 inset, 0 0 0 1px rgba(0,0,0,.08), 0 8px 24px -10px rgba(181,131,47,.55);
}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 1px 0 #f7e8c1 inset, 0 0 0 1px rgba(0,0,0,.1), 0 14px 30px -10px rgba(181,131,47,.7)}
.btn-ghost{
  color:var(--cream);
  border:1px solid rgba(230,201,122,.4);
}
.btn-ghost:hover{border-color:var(--gold-3);background:rgba(230,201,122,.06)}
.btn-ink{
  background:var(--ink);color:var(--cream);
  border:1px solid var(--ink);
}
.btn-ink:hover{background:#000}
.btn-line{
  color:var(--ink);border:1px solid #2b261a;
}
.btn-line:hover{background:var(--ink);color:var(--cream)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:rgba(251,248,240,.72);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.nav.is-dark{
  background:rgba(10,9,7,.6);
  border-bottom-color:rgba(230,201,122,.12);
  color:var(--cream);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;
}
.brand{
  display:inline-flex;align-items:center;
  height:46px;
  position:relative;z-index:60;
}
.brand img{
  height:100%;width:auto;display:block;
  mix-blend-mode:multiply;
  transition:filter .3s ease;
}
.nav.is-dark .brand img,
.nav.is-open .brand img{
  mix-blend-mode:screen;
  filter:brightness(1.1) contrast(1.05);
}
.nav-links{display:flex;gap:32px}
.nav-links a{
  font-size:13.5px;font-weight:500;color:inherit;opacity:.85;
  position:relative;padding:6px 0;
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:10px 18px;font-size:13px}
.menu-btn{display:none}
@media (max-width:980px){
  .nav-cta .btn{display:none}
  .menu-btn{
    display:inline-flex;align-items:center;gap:8px;font-size:13px;color:inherit;
    position:relative;z-index:60;
  }
  .menu-btn .bars{display:inline-block;width:22px;height:10px;position:relative}
  .menu-btn .bars::before,.menu-btn .bars::after{
    content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;
    transition:transform .3s ease, top .3s ease, bottom .3s ease;
  }
  .menu-btn .bars::before{top:0}
  .menu-btn .bars::after{bottom:0}

  /* mobile drawer */
  .nav-links{
    position:fixed;top:0;left:0;
    width:100%;max-width:100vw;
    height:100vh;height:100dvh;
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:0;padding:100px 28px 40px;
    background:radial-gradient(120% 80% at 80% 0%, #1e1809 0%, #0a0907 55%, #050402 100%);
    color:var(--cream);
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.7,0,.2,1), visibility 0s linear .4s;
    pointer-events:none;
    visibility:hidden;
    z-index:55;
  }
  .nav-links::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(60% 50% at 85% 15%, rgba(230,201,122,.16), transparent 60%),
      radial-gradient(50% 40% at 10% 90%, rgba(201,162,76,.10), transparent 60%);
  }
  .nav-links a{
    font-family:var(--serif);font-size:36px;font-weight:500;
    padding:18px 0;width:100%;opacity:1;
    border-bottom:1px solid rgba(230,201,122,.12);
    color:var(--cream);
    position:relative;
  }
  .nav-links a::before{
    content:counter(navitem,decimal-leading-zero);
    counter-increment:navitem;
    font-family:var(--mono);font-size:10px;letter-spacing:.25em;
    color:var(--gold-3);margin-right:14px;opacity:.7;font-weight:500;
    vertical-align:middle;
  }
  .nav-links{counter-reset:navitem}
  .nav-links a:hover::after{display:none}

  /* open state */
  .nav.is-open{background:transparent;border-bottom-color:transparent;color:var(--cream)}
  .nav.is-open .nav-links{
    transform:translateX(0);
    pointer-events:auto;
    visibility:visible;
    transition:transform .4s cubic-bezier(.7,0,.2,1), visibility 0s linear 0s;
  }
  .nav.is-open .menu-btn .bars::before{top:4.5px;transform:rotate(45deg)}
  .nav.is-open .menu-btn .bars::after{bottom:4.5px;transform:rotate(-45deg)}

  /* mobile WA CTA at bottom of drawer */
  .nav-links .mobile-cta{
    margin-top:32px;border-bottom:0;
    font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 22px;border-radius:999px;
    background:var(--grad-gold-flat);color:#1a1308;
    width:auto;
  }
  .nav-links .mobile-cta::before{display:none}

  body.menu-open{overflow:hidden}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:radial-gradient(120% 80% at 80% 0%, #1e1809 0%, #0a0907 55%, #050402 100%);
  color:var(--cream);
  padding:140px 0 90px;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 85% 15%, rgba(230,201,122,.16), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(201,162,76,.10), transparent 60%);
  pointer-events:none;
}
.hero::after{
  /* subtle film grain */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.7'/></svg>");
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;
}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:48px} }
.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(64px,9.5vw,150px);
  line-height:.88;
  letter-spacing:-.015em;
}
.hero h1 .pt{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-3);margin-bottom:26px;font-weight:500;
}
.hero h1 .emka{
  display:inline-block;
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.05em;
}
.hero h1 .logam{
  display:block;color:var(--cream);font-style:italic;font-weight:400;
  font-size:.55em;letter-spacing:.005em;margin-top:.05em;
}
.hero-rule{
  margin:38px 0 28px;height:1px;width:120px;background:var(--gold);
  position:relative;
}
.hero-rule::after{
  content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--gold);
}
.hero-sub{
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,28px);
  line-height:1.4;color:#e9e1c9;max-width:520px;
}
.hero-support{
  margin-top:22px;font-size:15px;line-height:1.65;color:#a8a08c;max-width:480px;
}
.hero-cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}

/* right column visual */
.hero-vis{
  position:relative;height:520px;
}
@media (max-width:980px){ .hero-vis{height:420px} }
.ingot{
  position:absolute;
  border-radius:14px;
  background:
    linear-gradient(135deg, #f0d489 0%, #c9a24c 25%, #8a6a2a 55%, #c9a24c 78%, #e6c97a 100%);
  box-shadow:
    0 1px 0 #f7e8c1 inset,
    0 -1px 0 #5a3f10 inset,
    0 30px 80px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.2);
  overflow:hidden;
}
.ingot::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 30%, rgba(0,0,0,.25) 80%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 6px, rgba(0,0,0,.05) 6px 12px);
  mix-blend-mode:overlay;
}
.ingot .stamp{
  position:absolute;inset:14px;
  border:1px solid rgba(70,45,10,.55);
  border-radius:8px;
  display:flex;flex-direction:column;justify-content:space-between;padding:14px;
  color:#3a2a0c;
}
.ingot .stamp .lm{
  font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.ingot .stamp .lm small{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.3em;font-weight:500;margin-top:2px;color:#54400e}
.ingot .stamp .fg{
  font-family:var(--serif);font-weight:600;font-size:22px;line-height:1;letter-spacing:.04em;
}
.ingot .stamp .fg em{font-style:normal;display:block;font-size:11px;font-family:var(--mono);letter-spacing:.25em;font-weight:500;margin-top:6px;color:#5b430f}
.ingot .stamp .wt{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#5b430f}

.ing-1{ right:0; top:0; width:290px; height:430px; transform:rotate(7deg); }
.ing-2{ right:170px; top:90px; width:230px; height:340px; transform:rotate(-6deg); z-index:2;
  background:linear-gradient(135deg,#e6c87a 0%,#b5832f 60%,#8a6a2a 100%);}
.ing-3{ right:10px; bottom:-30px; width:200px; height:300px; transform:rotate(14deg);
  background:linear-gradient(135deg,#d8b766 0%,#9c7826 100%);}

.hero-bar{
  position:relative;z-index:3;margin-top:80px;
  border-top:1px solid rgba(230,201,122,.18);
  border-bottom:1px solid rgba(230,201,122,.18);
  padding:22px 0;
}
.hero-bar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.hb-item{display:flex;align-items:center;gap:14px;color:#bdb49b}
.hb-item b{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--cream)}
.hb-item .label{font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-3)}
.hb-sep{width:1px;height:30px;background:rgba(230,201,122,.2)}

/* ---------- section frame ---------- */
section.frame{padding:120px 0;position:relative}
@media (max-width:720px){ section.frame{padding:80px 0} }
.sec-head{
  display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:end;
  margin-bottom:64px;
}
@media (max-width:880px){ .sec-head{grid-template-columns:1fr;gap:24px} }
.sec-num{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:64px;
  color:var(--gold);line-height:1;
}
.sec-num small{display:block;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.3em;color:var(--gold-2);margin-bottom:8px}

/* ---------- about ---------- */
#tentang{background:var(--paper)}
.about{
  display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start;
}
@media (max-width:980px){ .about{grid-template-columns:1fr;gap:48px} }
.about-text p+p{margin-top:18px}
.about-pillars{
  margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid rgba(0,0,0,.1);
}
.pillar{
  padding:22px 24px 22px 0;border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;flex-direction:column;gap:4px;
}
.pillar:nth-child(odd){padding-right:24px;border-right:1px solid rgba(0,0,0,.08)}
.pillar:nth-child(even){padding-left:24px}
.pillar b{font-family:var(--serif);font-weight:600;font-size:38px;letter-spacing:-.01em;color:var(--ink)}
.pillar span{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

.about-card{
  position:relative;border-radius:6px;overflow:hidden;
  background:linear-gradient(160deg,#1a1610 0%, #0a0907 100%);
  color:var(--cream);
  aspect-ratio:4/5;
  padding:36px;
  display:flex;flex-direction:column;justify-content:space-between;
  isolation:isolate;
}
.about-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 50% at 90% 10%, rgba(230,201,122,.22), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(201,162,76,.14), transparent 60%);
}
.about-card .corner{
  position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--gold-3);
}
.about-card .lm-mono{
  z-index:2;font-family:var(--serif);font-weight:500;font-size:140px;line-height:.85;letter-spacing:-.02em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.about-card .lm-mono small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--gold-3);background:none;-webkit-text-fill-color:var(--gold-3);margin-top:8px}
.about-card .facts{z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid rgba(230,201,122,.2);padding-top:22px}
.about-card .facts div b{display:block;font-family:var(--serif);font-weight:500;font-size:22px;color:var(--cream);margin-bottom:2px}
.about-card .facts div span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-3)}

/* ---------- visi ---------- */
#visi{
  background:radial-gradient(80% 90% at 50% 0%, #1a1610 0%, #0a0907 60%, #050402 100%);
  color:var(--cream);
  padding:140px 0;
  position:relative;overflow:hidden;
}
#visi::before{
  content:"";position:absolute;left:-10%;top:50%;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(230,201,122,.10),transparent 60%);
  filter:blur(20px);
}
.visi-grid{
  display:grid;grid-template-columns:.4fr 1fr;gap:60px;align-items:start;position:relative;z-index:2;
}
@media (max-width:880px){ .visi-grid{grid-template-columns:1fr;gap:32px} }
.visi-mark{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(60px,8vw,120px);line-height:.9;color:var(--gold);
}
.visi-body h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.5vw,64px);line-height:1.08;letter-spacing:-.01em;
  color:var(--cream);max-width:980px;
}
.visi-body h2 em{
  font-style:italic;color:transparent;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
}
.visi-body p{
  margin-top:32px;font-size:16px;line-height:1.7;color:#bdb49b;max-width:600px;
}
.visi-meta{
  margin-top:48px;display:flex;flex-wrap:wrap;gap:14px 32px;
  border-top:1px solid rgba(230,201,122,.18);padding-top:24px;
}
.visi-meta span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-3)}
.visi-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- misi ---------- */
#misi{background:var(--paper)}
.misi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media (max-width:980px){ .misi-grid{grid-template-columns:1fr} }
.misi-card{
  position:relative;border:1px solid rgba(0,0,0,.1);border-radius:4px;
  padding:40px 32px 36px;background:#fff;
  display:flex;flex-direction:column;gap:18px;min-height:380px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  isolation:isolate;
}
.misi-card::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--grad-gold-flat);transition:width .5s ease;
}
.misi-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.25);border-color:transparent}
.misi-card:hover::before{width:100%}
.misi-num{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;color:var(--gold-2);
}
.misi-icon{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,#fbf3df,#ede0b5);
  border:1px solid #d8c184;color:#7a5a20;
}
.misi-card h3{
  font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.15;letter-spacing:-.005em;
  color:var(--ink);max-width:11ch;
}
.misi-card p{font-size:14.5px;line-height:1.7;color:#403a30}
.misi-card .tag{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--gold-2);text-transform:uppercase}

/* ---------- bidang ---------- */
#layanan{background:#f1ece0;position:relative;overflow:hidden}
#layanan::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size:80px 80px;opacity:.6;
}
.biz-list{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.12)}
.biz-row{
  display:grid;grid-template-columns:80px 1fr 1.4fr 200px;gap:32px;align-items:center;
  padding:36px 0;border-bottom:1px solid rgba(0,0,0,.12);
  transition:padding .3s ease, background .3s ease;
  position:relative;
}
.biz-row::after{
  content:"";position:absolute;left:-100vw;right:-100vw;top:0;bottom:0;background:#1a1610;z-index:-1;opacity:0;transition:opacity .35s ease;
}
.biz-row:hover{padding-left:24px;color:var(--cream)}
.biz-row:hover::after{opacity:1}
.biz-row:hover .biz-num,.biz-row:hover .biz-kbli b{color:var(--gold-3)}
.biz-row:hover .biz-desc,.biz-row:hover .biz-kbli span{color:#cfc8b6}
.biz-row:hover .biz-name{color:var(--cream)}
.biz-row:hover .biz-cta{border-color:var(--gold);color:var(--gold-3)}
@media (max-width:880px){ .biz-row{grid-template-columns:1fr;gap:14px;padding:28px 0} .biz-row:hover{padding-left:0} }
.biz-num{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:42px;color:var(--gold-2);line-height:1;
}
.biz-name{
  font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.005em;color:var(--ink);
}
.biz-desc{font-size:14.5px;line-height:1.65;color:#3b352a}
.biz-kbli{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);text-align:right}
.biz-kbli span{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--mute)}
.biz-kbli b{font-size:22px;font-weight:500;color:var(--ink);letter-spacing:.05em}
@media (max-width:880px){ .biz-kbli{text-align:left} }
.biz-cta{display:none}

/* ---------- legalitas ---------- */
#legalitas{
  background:linear-gradient(180deg,#0a0907 0%, #1a1610 100%);
  color:var(--cream);
}
.legal-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center;
}
@media (max-width:980px){ .legal-grid{grid-template-columns:1fr;gap:48px} }
.legal-cert{
  position:relative;border:1px solid rgba(230,201,122,.3);border-radius:6px;
  padding:48px 40px;background:rgba(255,255,255,.02);
  overflow:hidden;
}
.legal-cert::before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(230,201,122,.12);border-radius:3px;pointer-events:none;
}
.legal-seal{
  position:absolute;top:-30px;right:-30px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,201,122,.25),transparent 60%);
}
.legal-cert .head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:24px;border-bottom:1px solid rgba(230,201,122,.18);
}
.legal-cert .head b{font-family:var(--serif);font-weight:500;font-size:22px}
.legal-cert .head span{
  font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--gold-3);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.legal-cert .head span::before{content:"";width:6px;height:6px;border-radius:50%;background:#5fd49b;box-shadow:0 0 0 3px rgba(95,212,155,.18)}
.legal-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:22px 0;border-bottom:1px dashed rgba(230,201,122,.18);
}
.legal-row:last-of-type{border-bottom:0}
.legal-row .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#a8a08c}
.legal-row .v{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:.02em}
.legal-row .v.mono{font-family:var(--mono);font-weight:500;font-size:20px;letter-spacing:.18em;color:var(--gold-3)}
.legal-foot{
  margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:#7a7461;text-transform:uppercase;
}
.legal-foot .dot{width:4px;height:4px;background:var(--gold);border-radius:50%}

.legal-copy h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.4vw,56px);line-height:1.05;letter-spacing:-.01em;color:var(--cream);
}
.legal-copy h2 em{font-style:italic;color:transparent;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text}
.legal-copy p{margin-top:24px;color:#bdb49b;line-height:1.7;font-size:16px;max-width:520px}
.legal-badges{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.lbadge{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;
  border:1px solid rgba(230,201,122,.3);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3);
}
.lbadge svg{width:14px;height:14px}

/* ---------- contact ---------- */
#kontak{background:var(--paper)}
.contact-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:stretch;
}
@media (max-width:980px){ .contact-grid{grid-template-columns:1fr} }
.contact-card{
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:40px;
  display:flex;flex-direction:column;gap:18px;
}
.contact-card h3{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1.1;letter-spacing:-.01em}
.contact-card .lead{color:#403a30;font-size:15.5px;line-height:1.65}
.ci-list{display:flex;flex-direction:column;margin-top:6px}
.ci{
  display:grid;grid-template-columns:32px 1fr;gap:18px;align-items:start;
  padding:18px 0;border-top:1px solid rgba(0,0,0,.08);
}
.ci .ico{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,#fbf3df,#ede0b5);color:#7a5a20;border:1px solid #d8c184;
}
.ci .ico svg{width:14px;height:14px}
.ci .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.ci .v{font-size:15.5px;line-height:1.55;color:var(--ink);margin-top:4px;font-weight:500}
.ci .v.serif{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:.01em}
.contact-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.contact-map{
  position:relative;border-radius:6px;overflow:hidden;border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(160deg,#1a1610 0%, #0a0907 100%);min-height:520px;
  isolation:isolate;color:var(--cream);
}
.contact-map::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(circle, rgba(230,201,122,.18) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(230,201,122,.08) 1px, transparent 1.5px);
  background-size:42px 42px, 21px 21px;
  background-position:0 0, 10px 10px;
  opacity:.55;
}
.contact-map::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 100%);
}
.map-roads{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}
.map-pin{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-100%);z-index:3;
  text-align:center;
}
.map-pin .dot{
  width:18px;height:18px;border-radius:50%;background:var(--grad-gold-flat);
  margin:0 auto;box-shadow:0 0 0 6px rgba(230,201,122,.18),0 0 0 14px rgba(230,201,122,.08);
  position:relative;
}
.map-pin .dot::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  width:1px;height:46px;background:linear-gradient(180deg,var(--gold),transparent);
}
.map-pin .label{
  margin-top:60px;font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--gold-3);text-transform:uppercase;
}
.map-meta{
  position:absolute;left:24px;right:24px;bottom:24px;z-index:3;
  display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;
}
.map-meta .where{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.25;max-width:280px;color:var(--cream);
}
.map-meta .coord{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-align:right;color:var(--gold-3);text-transform:uppercase;line-height:1.7;
}
.map-chip{
  position:absolute;left:24px;top:24px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;
  background:rgba(10,9,7,.6);border:1px solid rgba(230,201,122,.3);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--gold-3);text-transform:uppercase;
}
.map-chip .blink{width:6px;height:6px;border-radius:50%;background:#5fd49b;box-shadow:0 0 0 3px rgba(95,212,155,.18);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(95,212,155,.18)}50%{box-shadow:0 0 0 7px rgba(95,212,155,.06)}}

/* ---------- footer ---------- */
footer.foot{
  background:#050402;color:#cfc8b6;padding:80px 0 28px;border-top:1px solid rgba(230,201,122,.14);
  position:relative;overflow:hidden;
}
footer.foot::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:80%;max-width:1200px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:48px;border-bottom:1px solid rgba(230,201,122,.14);
}
@media (max-width:880px){ .foot-grid{grid-template-columns:1fr 1fr;gap:32px} }
.foot-brand h4{
  font-family:var(--serif);font-weight:500;font-size:36px;letter-spacing:-.005em;color:var(--cream);
}
.foot-brand h4 em{font-style:italic;color:transparent;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text}
.foot-brand p{margin-top:16px;font-size:14px;line-height:1.7;color:#9d9684;max-width:380px}
.foot-col h6{
  font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-3);margin-bottom:18px;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a,.foot-col li{font-size:14px;color:#bdb49b;transition:color .2s ease}
.foot-col a:hover{color:var(--gold-3)}
.foot-bottom{
  margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#7a7461;
}
.foot-bottom .stamp{display:flex;align-items:center;gap:10px}
.foot-bottom .stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- reveal anim ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- mobile overflow & responsiveness fixes ---------- */
@media (max-width:720px){
  /* hero */
  .hero{padding:120px 0 60px}
  .hero-vis{height:380px}
  .hero-bar{margin-top:48px}
  .hero-bar-inner{gap:14px 18px}
  .hb-item{gap:10px}
  .hb-item b{font-size:16px}
  .hb-item .label{font-size:9px;letter-spacing:.2em}
  .hb-sep{display:none}

  /* about */
  .about-pillars{grid-template-columns:1fr}
  .pillar,
  .pillar:nth-child(odd),
  .pillar:nth-child(even){
    padding:18px 0;border-right:0;
  }
  .pillar b{font-size:30px}
  .about-card{padding:28px;aspect-ratio:auto;min-height:380px}
  .about-card .lm-mono{font-size:clamp(80px,22vw,140px)}

  /* sections */
  section.frame{padding:72px 0}
  .sec-num{font-size:48px}

  /* misi */
  .misi-card{padding:32px 24px 28px;min-height:auto}
  .misi-card h3{font-size:26px}

  /* layanan */
  .biz-row{padding:24px 0;gap:10px}
  .biz-num{font-size:34px}

  /* legalitas — NIB number was overflowing */
  .legal-cert{padding:32px 22px}
  .legal-row{
    flex-direction:column;align-items:flex-start;gap:6px;
    padding:18px 0;
  }
  .legal-row .v{font-size:20px;word-break:break-word}
  .legal-row .v.mono{font-size:15px;letter-spacing:.12em}
  .legal-cert .head b{font-size:18px}
  .legal-cert .head span{font-size:9px}
  .legal-foot{font-size:9px;gap:10px}

  /* contact */
  .contact-card{padding:28px 22px}
  .contact-card h3{font-size:28px}
  .ci .v{font-size:14.5px;word-break:break-word}
  .ci .v.serif{font-size:19px}
  .contact-map{min-height:380px}
  .map-meta{left:18px;right:18px;bottom:18px;gap:12px}
  .map-meta .where{font-size:18px;max-width:none}
  .map-meta .coord{font-size:9px}
  .map-chip{left:18px;top:18px;font-size:9px}

  /* footer */
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .foot-brand p{max-width:none}
  .foot-bottom{font-size:9px}
}

/* very narrow phones */
@media (max-width:380px){
  .wrap{padding:0 18px}
  .hero h1{font-size:54px}
  .hero-vis{height:320px}
  .ing-1{width:230px;height:340px}
  .ing-2{right:130px;top:70px;width:180px;height:270px}
  .ing-3{width:160px;height:240px}
  .h-section{font-size:34px}
}