:root{--forest:#123c32;--deep:#0b2b24;--green:#2f6b57;--sage:#8faf9d;--ivory:#f7f5ef;--paper:#fbfcfa;--ink:#1f2824;--muted:#65716b;--line:#dfe5e0;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);line-height:1.65;background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1160px,calc(100% - 40px));margin:auto}.topbar{background:var(--deep);color:#b9cbc2;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.topbar-inner{height:32px;display:flex;justify-content:space-between;align-items:center}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-bottom:1px solid rgba(18,60,50,.08)}.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:var(--forest)}.brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--forest);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em}.brand strong,.brand small{display:block;line-height:1.05}.brand strong{font-size:15px;letter-spacing:.1em}.brand small{font-size:8px;letter-spacing:.16em;margin-top:4px;color:var(--green)}.nav{display:flex;align-items:center;gap:23px;font-size:12px;font-weight:700}.nav a{color:#4f5b55}.nav a:hover,.nav .active{color:var(--forest)}.nav-cta{background:var(--forest)!important;color:#fff!important;padding:12px 16px}.menu-toggle{display:none;border:0;background:transparent;color:var(--forest);font-size:25px}.hero{background:var(--ivory);overflow:hidden}.hero-grid{min-height:680px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:60px}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--green);margin-bottom:18px}.hero h1{font-size:clamp(45px,6.1vw,78px);line-height:.99;letter-spacing:-.065em;color:var(--forest);margin:0 0 25px;max-width:780px}.hero h1 em{font-style:normal;color:var(--green)}.lead{font-size:17px;color:#59655f;max-width:650px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:31px 0 19px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:15px;padding:14px 19px;border:1px solid transparent;font-size:12px;font-weight:800;cursor:pointer}.btn-primary{background:var(--forest);color:#fff}.btn-primary:hover{background:#1b5043}.btn-ghost{border-color:#bac6bf;color:var(--forest)}.btn-light{background:#fff;color:var(--forest)}.micro-trust{font-size:11px;color:#69756f}.micro-trust span{color:var(--green);font-weight:900;margin-right:7px}.hero-art{position:relative;height:530px;display:grid;place-items:center}.grid-lines{position:absolute;inset:5% -10% 5% 10%;background:linear-gradient(rgba(18,60,50,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(18,60,50,.09) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent)}.art-panel{position:relative;width:390px;height:480px;background:linear-gradient(145deg,#1c5546,#092c24);color:#fff;padding:30px;box-shadow:0 35px 90px rgba(18,60,50,.2);overflow:hidden}.art-panel:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.13);border-radius:50%;right:-300px;bottom:-150px}.art-top,.art-bottom{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.18em;color:#c0d2ca;position:relative}.art-word{position:absolute;top:34%;left:30px;font-size:56px;line-height:.9;font-weight:800;letter-spacing:-.06em}.art-word i{font-style:normal;color:#91b9a5}.art-circle{position:absolute;right:42px;top:39%;width:74px;height:74px;border:1px solid rgba(255,255,255,.45);border-radius:50%}.art-circle:after{content:"";position:absolute;width:7px;height:7px;background:#9fc4b1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}.art-bottom{position:absolute;left:30px;right:30px;bottom:27px}.trust-strip{background:#fff;border-bottom:1px solid var(--line)}.trust-items{height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#65716b;font-size:9px;font-weight:800;letter-spacing:.12em;white-space:nowrap;overflow:hidden}.trust-items i{width:3px;height:3px;background:var(--sage);border-radius:50%;flex:0 0 auto}.section{padding:105px 0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:end}.section h2{font-size:clamp(35px,4.3vw,56px);line-height:1.03;letter-spacing:-.055em;color:var(--forest);margin:0}.large{font-size:20px;color:#4f5d56;margin:0 0 18px}.muted{color:var(--muted);font-size:14px}.metrics{margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metrics div{padding:23px 20px;border-right:1px solid var(--line)}.metrics div:last-child{border-right:0}.metrics b{display:block;color:var(--green);font-size:10px;letter-spacing:.15em;margin-bottom:18px}.metrics span{font-size:13px;font-weight:700}.services{background:var(--ivory)}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}.text-link{font-size:12px;font-weight:800;color:var(--forest)}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.service-card{background:#fff;padding:30px;min-height:300px;border:1px solid var(--line);position:relative;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.service-card:hover{transform:translateY(-4px);border-color:#aabbb2}.service-card.featured{background:var(--forest);color:#fff;border-color:var(--forest)}.card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;color:var(--green);font-weight:800}.featured .card-top{color:#9fc1b1}.service-card h3{font-size:28px;line-height:1.05;letter-spacing:-.04em;margin:70px 0 13px;color:var(--forest)}.featured h3{color:#fff}.service-card p{font-size:13px;color:var(--muted);max-width:470px;margin:0}.featured p{color:#bed0c7}.service-card strong{margin-top:auto;padding-top:25px;font-size:11px;color:var(--green)}.featured strong{color:#c0d7cc}.process{background:var(--paper)}.process>div>h2{max-width:700px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:52px;border-top:1px solid var(--line)}.process-grid>div{padding:28px 24px 0;border-right:1px solid var(--line)}.process-grid>div:last-child{border-right:0}.process-grid span{font-size:10px;color:var(--green);font-weight:800;letter-spacing:.15em}.process-grid h3{font-size:20px;margin:35px 0 8px;color:var(--forest)}.process-grid p{font-size:13px;color:var(--muted);margin:0}.statement{background:var(--forest);color:#fff;padding:105px 0}.statement-inner{max-width:900px;text-align:center}.statement h2{color:#fff;font-size:clamp(45px,6vw,75px);margin:0 0 20px}.statement p{color:#c4d5cc;max-width:600px;margin:0 auto 30px;font-size:16px}.statement .eyebrow{margin-bottom:20px}.statement.compact{padding:80px 0}.page-hero{background:var(--ivory);padding:110px 0 95px}.page-hero h1{font-size:clamp(45px,6vw,76px);line-height:1;letter-spacing:-.065em;color:var(--forest);max-width:900px;margin:0 0 24px}.page-hero p{font-size:19px;color:var(--muted);max-width:720px}.detail-section{padding-top:55px}.detail-card{display:grid;grid-template-columns:90px 1fr;gap:35px;padding:70px 0;border-top:1px solid var(--line)}.detail-number{font-size:11px;color:var(--green);font-weight:800;letter-spacing:.16em}.detail-label{font-size:9px;color:var(--green);letter-spacing:.18em;font-weight:800;margin-bottom:13px}.detail-card h2{font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.045em;color:var(--forest);margin:0 0 18px}.detail-card p{font-size:16px;color:var(--muted);max-width:750px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.tags span{font-size:10px;font-weight:700;border:1px solid var(--line);padding:8px 11px;color:#526059;background:#fff}.faq{background:var(--ivory)}.narrow{max-width:850px}.faq details{border-top:1px solid #ced7d1;padding:23px 0}.faq details:last-child{border-bottom:1px solid #ced7d1}.faq summary{cursor:pointer;font-size:14px;font-weight:800;color:var(--forest)}.faq details p{font-size:13px;color:var(--muted);margin-bottom:0}.contact{padding-top:80px}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.contact-copy h2{font-size:clamp(36px,4.5vw,56px);line-height:1.02;letter-spacing:-.055em;color:var(--forest);margin:0 0 20px}.contact-block{border-top:1px solid var(--line);padding:19px 0;display:flex;flex-direction:column;gap:3px}.contact-block b{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}.contact-block span{font-size:14px;color:#58645e}.contact-form{background:var(--ivory);padding:35px}.form-title{font-size:22px;font-weight:800;color:var(--forest);margin-bottom:25px}.contact-form label{display:block;font-size:11px;font-weight:800;color:var(--forest);margin-bottom:16px}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;border:1px solid #ccd5cf;background:#fff;padding:13px 14px;margin-top:7px;font:inherit;font-size:13px;color:var(--ink);outline:none;border-radius:0}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--green)}.full{width:100%}.form-note{font-size:10px;color:#77827c;margin:13px 0 0}.footer{background:#0a2721;color:#b6c8c0;padding:65px 0 0}.footer-main{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1.2fr;gap:40px}.footer-brand{color:#fff}.footer-desc{font-size:12px;margin-top:18px}.footer h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 17px}.footer a,.footer p{display:block;font-size:12px;color:#a7bbb2;margin:8px 0}.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:50px;padding:20px 0;display:flex;justify-content:space-between;font-size:10px;color:#778e84}.floating-wa{position:fixed;right:20px;bottom:20px;z-index:40;background:var(--forest);color:#fff;padding:13px 17px;box-shadow:0 12px 30px rgba(0,0,0,.18);font-size:11px;font-weight:800;letter-spacing:.01em}.floating-wa:hover{background:#1b5043}@media(max-width:900px){.nav{display:none;position:absolute;top:76px;left:14px;right:14px;background:#fff;border:1px solid var(--line);padding:10px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 20px 45px rgba(0,0,0,.09)}.nav.open{display:flex}.nav a{padding:11px}.menu-toggle{display:block}.hero-grid,.intro-grid,.contact-grid{grid-template-columns:1fr}.hero-grid{padding:75px 0;min-height:auto}.hero-art{height:430px}.art-panel{height:390px;width:330px}.metrics,.process-grid{grid-template-columns:1fr 1fr}.footer-main{grid-template-columns:1fr 1fr}.contact-grid{gap:55px}.trust-items{justify-content:flex-start}.trust-items i{margin-right:5px}}@media(max-width:560px){.container{width:calc(100% - 28px)}.topbar-inner span:last-child{display:none}.nav-wrap{height:68px}.nav{top:68px}.hero h1,.page-hero h1{font-size:43px}.hero-art{height:365px}.art-panel{height:330px;width:280px;padding:24px}.art-word{font-size:43px;left:24px}.art-top,.art-bottom{font-size:7px}.section{padding:75px 0}.intro-grid{gap:28px}.metrics,.service-grid,.process-grid,.footer-main{grid-template-columns:1fr}.metrics div{border-right:0;border-bottom:1px solid var(--line)}.metrics div:last-child{border-bottom:0}.section-head{align-items:flex-start;flex-direction:column;gap:20px}.service-card h3{font-size:25px;margin-top:50px}.detail-card{grid-template-columns:1fr;gap:10px;padding:45px 0}.detail-card h2{font-size:34px}.contact-form{padding:22px}.statement{padding:75px 0}.statement h2{font-size:45px}.copyright{flex-direction:column;gap:5px}.floating-wa{right:12px;bottom:12px}.floating-wa span{display:inline}.page-hero{padding:75px 0 60px}}
/* V3 brand logo */
.brand-logo{display:flex;align-items:center;width:178px;height:48px;overflow:hidden}
.brand-logo img{display:block;width:100%;height:auto;object-fit:contain;object-position:left center}
.footer .brand-logo{width:210px;height:58px;filter:brightness(0) invert(1)}
.footer a[href*="maps.app"]{color:#a7bbb2}
@media(max-width:560px){.brand-logo{width:155px;height:43px}.footer .brand-logo{width:190px;height:52px}}

/* V4 portfolio */
.portfolio-hero{padding-bottom:90px}.portfolio-section{background:#fff}.portfolio-intro{display:grid;grid-template-columns:1fr .85fr;gap:70px;align-items:end;margin-bottom:55px}.portfolio-intro h2{max-width:620px}.portfolio-photo{position:relative}.portfolio-photo img{display:block;width:100%;height:270px;object-fit:cover;object-position:center 44%}.photo-caption{position:absolute;left:0;bottom:0;background:rgba(10,39,33,.9);color:#fff;padding:9px 12px;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.filter{border:1px solid var(--line);background:#fff;color:#5e6a64;padding:9px 13px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.filter.active,.filter:hover{background:var(--forest);border-color:var(--forest);color:#fff}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.portfolio-card{border:1px solid var(--line);background:var(--paper);padding:25px;min-height:225px;display:flex;flex-direction:column}.portfolio-card>span{font-size:9px;letter-spacing:.14em;color:var(--green);font-weight:800}.portfolio-card h3{font-size:19px;line-height:1.18;letter-spacing:-.025em;color:var(--forest);margin:38px 0 12px}.portfolio-card p{font-size:12px;color:var(--muted);margin-top:auto}.portfolio-card.accent-card{background:var(--ivory)}.portfolio-note{display:grid;grid-template-columns:95px 1fr;gap:20px;border-top:1px solid var(--line);margin-top:45px;padding-top:20px}.portfolio-note span{font-size:9px;letter-spacing:.15em;color:var(--green);font-weight:800;text-transform:uppercase}.portfolio-note p{margin:0;color:var(--muted);font-size:12px;max-width:720px}@media(max-width:900px){.portfolio-intro{grid-template-columns:1fr;gap:35px}.portfolio-grid{grid-template-columns:1fr 1fr}.portfolio-photo img{height:260px}}@media(max-width:560px){.portfolio-grid{grid-template-columns:1fr}.portfolio-card{min-height:205px}.portfolio-note{grid-template-columns:1fr;gap:8px}.portfolio-photo img{height:220px}}

.footer .brand-logo img{filter:none}.footer .brand-logo{background:#fff;padding:4px 7px;height:48px;width:205px}.footer .brand-logo img{width:100%;height:100%;object-fit:contain}@media(max-width:560px){.footer .brand-logo{width:190px;height:45px}}

/* ===== V7 — fondasi bersama (font, topbar, header, footer, perbaikan) ===== */
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
:root{--sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--leaf:#b78244;--leaf-dark:#8a5a24;--mist:#eef3ef}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Topbar: info kontak yang berguna, bukan label dekoratif */
.topbar{font-size:12px;letter-spacing:0;text-transform:none;color:#c3d4cb}
.topbar-inner{height:38px;gap:24px}
.topbar a{color:#e3ece7}.topbar a:hover{text-decoration:underline}
.topbar-links{display:flex;gap:22px}

/* Header: simbol logo resmi + nama sebagai teks */





.nav-wrap{height:80px}
.nav{gap:30px;font-size:14px;font-weight:600}
.nav a{position:relative;padding:6px 0;color:#41504a}
.nav a.active{color:var(--forest)}
.nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--leaf)}

/* Judul: serif untuk kesan dokumen resmi, di semua halaman */
.page-hero h1,.section h2,.detail-card h2,.contact-copy h2,.statement h2{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;line-height:1.1}
.statement h2{line-height:1.1}                      /* perbaikan: jarak antarbaris terlalu renggang */
.page-hero h1{line-height:1.06}

/* Footer: logo lengkap versi terang (perbaikan: sebelumnya putih di atas putih) */
.footer-logo{display:block;width:210px;margin-bottom:16px}
.footer-logo img{display:block;width:100%;height:auto}
.footer a,.footer p{font-size:13px}

@media(max-width:900px){.nav{top:80px}}
@media(max-width:560px){.nav-wrap{height:68px}.nav{top:68px}.topbar-inner>span{display:none}.topbar-links{width:100%;justify-content:space-between;gap:10px}.topbar-links a:last-child{display:none}.footer-logo{width:180px}}

/* Palet seragam di semua halaman: krem lama diganti sage muda */
.page-hero,.faq,.contact-form{background:var(--mist)}
.faq h2{margin-bottom:34px}


/* ===== V7.1 ===== */
/* Logo header: logo resmi saja */
.brand-full{display:block;height:58px;width:auto}
@media(max-width:560px){.brand-full{height:48px}}

/* Menu Kontak dibedakan: tombol hijau, tebal */
.nav a.nav-cta{background:var(--forest);color:#fff!important;font-weight:700;padding:11px 22px;transition:background .2s}
.nav a.nav-cta:hover{background:#0b2b24}
.nav a.nav-cta:after{display:none}
@media(max-width:900px){.nav a.nav-cta{text-align:center;margin-top:8px}}

/* Tombol melayang dengan ikon WhatsApp */
.floating-wa{display:flex;align-items:center;gap:10px;background:#12804a;color:#fff;padding:13px 20px 13px 16px;font-size:14px;font-weight:700;box-shadow:0 10px 28px rgba(8,40,28,.28);transition:background .2s}
.floating-wa:hover{background:#0d6a3c}
.floating-wa .wa-ico{flex:0 0 auto}
@media(max-width:560px){.floating-wa{right:14px;bottom:14px;padding:12px 16px 12px 13px;font-size:13px}}
.btn .wa-ico{flex:0 0 auto}

/* Footer: logo kecil, kolom kiri hanya logo */
.footer-logo{width:110px;margin-bottom:0}
@media(min-width:901px){.footer-main{grid-template-columns:.9fr 1fr 1.2fr 1.5fr}}
@media(max-width:560px){.footer-logo{width:100px}}

/* Portfolio: filter berfungsi (atribut hidden sebelumnya kalah oleh display:flex) */
.portfolio-card[hidden]{display:none!important}
.filter{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:11px 18px}
.filter small{font-size:12px;font-weight:700;opacity:.65}
.filter.active small{opacity:.85}
.filters{flex-wrap:wrap}
.footer-main p{margin:0;padding:6px 0;line-height:1.5}.footer-main p a{display:inline;margin:0;padding:0}


/* ===== Footer kontak berikon (V87) ===== */
.ft-contact{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.footer .ft-contact a{display:flex;align-items:center;gap:12px;margin:0;padding:0;font-size:13px;line-height:1.4;color:#bcd0c6;transition:color .2s}
.ft-ico{flex:none;width:36px;height:36px;display:grid;place-items:center;color:#e3ece7;border:1px solid rgba(255,255,255,.24);transition:background .2s,border-color .2s,color .2s,transform .2s}
.footer .ft-contact a:hover{color:#fff}
.footer .ft-contact a:hover .ft-ico{background:var(--leaf);border-color:var(--leaf);color:#fff;transform:translateY(-2px)}
.ft-ico svg{display:block}