:root{--ink:#18221f;--paper:#f7f5ef;--lime:#d8ef48;--muted:#64706a;--line:#d9dcd3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;font-size:16px;line-height:1.55}.site-header{height:82px;padding:0 clamp(24px,6vw,96px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(247,245,239,.94);backdrop-filter:blur(10px);z-index:3}.brand{color:var(--ink);display:flex;gap:8px;align-items:center;text-decoration:none;font-weight:700;font-size:21px;letter-spacing:-1.5px}.brand-mark{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--lime);font-family:"Playfair Display",serif;font-size:20px}.brand-dot{color:#a8c11e}nav{display:flex;gap:28px}nav a{color:var(--ink);text-decoration:none;font-size:14px}.header-cta{background:var(--ink);color:white;text-decoration:none;padding:11px 17px;border-radius:99px;font-size:14px}.hero,.intro,.services,.values,.portfolio,.contact{padding-left:clamp(24px,8vw,128px);padding-right:clamp(24px,8vw,128px)}.hero{min-height:620px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:50px;padding-top:64px;padding-bottom:64px}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:700;color:#72831b;margin:0 0 18px}.hero h1,h2{font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:-2.5px;line-height:1.02;margin:0}.hero h1{font-size:clamp(48px,6.4vw,88px);max-width:760px}.hero h1 em{color:#6a7c0a;font-weight:600}.hero-text{max-width:525px;color:#4f5a55;font-size:18px;margin:27px 0}.actions{display:flex;gap:18px;align-items:center}.button{font-weight:600;text-decoration:none}.button-primary{padding:15px 22px;border-radius:4px;background:var(--ink);color:#fff}.button-primary span{margin-left:24px;color:var(--lime);font-size:21px}.button-plain{color:var(--ink);border-bottom:1px solid var(--ink)}.hero-art{background:#cedc77;min-height:430px;position:relative;overflow:hidden;border-radius:2px;padding:37px;display:flex;flex-direction:column;justify-content:center;color:#1c2a1e}.hero-art p{font-size:clamp(42px,5vw,70px);font-weight:700;line-height:.83;letter-spacing:-4px;margin:0;position:relative;z-index:1}.hero-art p span{font-family:"Playfair Display",serif;font-style:italic;font-weight:600}.hero-art small{position:absolute;bottom:30px;letter-spacing:1px;font-size:10px;font-weight:700}.orb{position:absolute;border-radius:50%;border:1px solid rgba(24,34,31,.22)}.orb-one{width:430px;height:430px;right:-120px;top:-130px}.orb-two{width:300px;height:300px;right:-55px;top:-65px}.orb-three{width:180px;height:180px;right:10px;top:0}.intro{padding-top:112px;padding-bottom:100px;border-top:1px solid var(--line)}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.intro h2,.section-lead h2,.values h2,.portfolio h2,.contact h2{font-size:clamp(34px,4vw,57px)}.intro-grid p{color:#46524c;margin:0 0 18px;max-width:540px}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:72px;padding-top:25px;gap:20px}.stats div{display:flex;gap:15px;align-items:baseline}.stats strong{font-size:25px;letter-spacing:-1px}.stats span{font-size:13px;color:var(--muted);line-height:1.35}.services{background:var(--ink);color:#f7f5ef;padding-top:110px;padding-bottom:110px}.services .eyebrow{color:var(--lime)}.section-lead{max-width:680px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:62px;border-top:1px solid #44504a;border-left:1px solid #44504a}.service-grid article{min-height:220px;padding:26px;border-right:1px solid #44504a;border-bottom:1px solid #44504a}.service-grid span{color:var(--lime);font-size:12px}.service-grid h3{font-family:"Playfair Display",serif;font-size:25px;line-height:1.1;margin:35px 0 12px}.service-grid p{color:#bdc5bf;font-size:14px;margin:0}.service-contact{background:var(--lime);display:flex;flex-direction:column;justify-content:center}.service-contact p{color:var(--ink)!important;font-size:18px!important}.service-contact a{color:var(--ink);font-weight:700;margin-top:25px}.values{padding-top:116px;padding-bottom:116px;display:grid;grid-template-columns:.85fr 1.15fr;gap:95px}.value-list{border-top:1px solid var(--line)}.value-list>div{display:grid;grid-template-columns:55px 1fr;gap:13px;border-bottom:1px solid var(--line);padding:20px 0}.value-list strong{font-size:12px;color:#87933e}.value-list span{display:flex;gap:12px;color:var(--muted);font-size:14px}.value-list b{min-width:110px;color:var(--ink)}.portfolio{background:#e9e6dc;padding-top:105px;padding-bottom:105px}.portfolio-head{display:flex;align-items:end;justify-content:space-between;gap:40px}.portfolio-head p{max-width:310px;color:var(--muted)}.portfolio-placeholder{height:300px;margin-top:50px;background:#b5bfaf;display:grid;place-items:center;text-align:center;padding:25px;background-image:linear-gradient(135deg,rgba(255,255,255,.16) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.16) 75%,transparent 75%);background-size:24px 24px}.portfolio-placeholder span{font-weight:700;letter-spacing:2px;font-size:13px}.portfolio-placeholder p{max-width:350px;margin:0;color:#3f4b45;font-size:14px}.contact{padding-top:115px;padding-bottom:105px}.contact h2{font-size:clamp(46px,5vw,74px)}.contact-grid{display:flex;justify-content:space-between;gap:28px;margin-top:63px;padding-top:24px;border-top:1px solid var(--line)}.contact-grid div{display:flex;flex-direction:column;gap:5px}.contact-grid a{display:block;color:var(--ink);font-size:18px;text-decoration:none}.contact-grid small{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-bottom:9px}footer{padding:28px clamp(24px,8vw,128px);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}@media(max-width:760px){.site-header{height:68px}nav{display:none}.header-cta{padding:9px 13px}.hero{grid-template-columns:1fr;min-height:auto;padding-top:65px}.hero-art{min-height:330px}.intro-grid,.values{grid-template-columns:1fr;gap:35px}.stats{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr}.portfolio-head,.contact-grid{display:block}.portfolio-head p{margin-top:20px}.contact-grid>div{margin-top:25px}footer{gap:18px;align-items:flex-start;flex-direction:column}}
/* =========================
   MOBILE MENU
========================= */

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .25s ease;
}

/* Mobile */
@media (max-width: 760px) {

  .site-header {
    height: 68px;
    padding-left: 20px;
    padding-right: 14px;
  }

  .site-header nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 12px 20px 20px;
    flex-direction: column;
    gap: 0;
  }

  .site-header nav.is-open {
    display: flex;
  }

  .site-header nav a {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
  }

  .site-header nav a:last-child {
    border-bottom: 0;
  }

  .menu-toggle {
    display: flex;
  }

  .header-cta {
    margin-left: auto;
    margin-right: 6px;
    padding: 9px 13px;
  }

  /* Animasi hamburger menjadi X */

  .menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}