@font-face{font-family:"DM Sans";src:url("assets/dm-sans-latin.woff2") format("woff2");font-style:normal;font-weight:100 1000;font-display:swap}
:root{--ink:#18231e;--dark:#17231e;--paper:#fafbf8;--white:#fff;--green:#bedb9b;--muted:#59615b;--line:#ced4cb;--edge:clamp(1.25rem,5.3vw,6rem);--content:1440px;--font:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:6rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit;text-decoration:none}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #357347;outline-offset:5px}.hero a:focus-visible,.site-header a:focus-visible,.site-header button:focus-visible,.project-hato a:focus-visible,.contact a:focus-visible{outline-color:var(--green)}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.04}p+p{margin-top:1.2rem}em{font-family:Georgia,"Times New Roman",serif;font-weight:400}button{cursor:pointer}.skip-link{position:fixed;top:1rem;left:1rem;z-index:100;padding:.75rem 1.25rem;background:var(--white);color:var(--ink);transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}[hidden]{display:none!important}
.site-header{height:100px;padding:0 var(--edge);display:flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--dark);color:var(--paper);position:relative;z-index:10;border-bottom:1px solid #3c473f}.wordmark{font-size:2rem;font-weight:600;letter-spacing:-.08em;line-height:1;white-space:nowrap}.wordmark span{color:var(--green)}.desktop-nav{display:flex;gap:2.25rem;margin-left:auto;margin-right:2rem}.desktop-nav a,.header-contact{font-size:.9375rem;position:relative;padding:.65rem 0}.desktop-nav a:after,.header-contact:after{content:"";position:absolute;bottom:.35rem;left:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .18s}.desktop-nav a:hover:after,.header-contact:hover:after{transform:scaleX(1)}.header-actions{display:flex;align-items:center;gap:2.1rem}.language-switch{display:flex;align-items:center;gap:.15rem;font-size:.8125rem}.language-switch button{border:0;background:none;min-width:36px;min-height:44px;padding:.5rem .35rem;color:#aeb9b1}.language-switch button[aria-pressed=true]{color:var(--white);text-decoration:underline;text-underline-offset:.45rem}.language-switch>span{color:#7d8980}.header-contact{border-bottom:1px solid #73856d}.menu-toggle{display:none;border:0;background:none;min-height:44px;padding:.5rem 0}.mobile-nav{position:absolute;left:0;right:0;top:100%;padding:1.5rem var(--edge) 2rem;background:var(--dark);border-bottom:1px solid #647360;box-shadow:0 18px 25px #0002}.mobile-nav a{display:block;padding:.8rem 0;font-size:1.4rem;border-top:1px solid #3c473f}
.hero{background:var(--dark);color:var(--paper);padding:2rem var(--edge) 1.5rem;position:relative}.hero-location{display:flex;justify-content:space-between;gap:1rem;color:#b4bfb6;font-size:.8125rem}.hero-index{font-variant-numeric:tabular-nums}.hero h1{font-size:clamp(4rem,9vw,9.75rem);line-height:.99;letter-spacing:-.065em;margin:3rem 0 3.5rem;max-width:1200px;font-weight:450}.hero-second{display:inline-block;margin-left:16.5%}.hero h1 em{display:inline-block;margin-left:39%;color:var(--green);letter-spacing:-.065em;line-height:1.07}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:3rem;margin:0 0 3.5rem}.hero-bottom p{font-size:clamp(1rem,1.5vw,1.3rem);max-width:470px;color:#d3d9d1;line-height:1.6}.round-link{display:flex;gap:2rem;align-items:center;font-size:.9375rem}.down-arrow{width:62px;height:62px;border:1px solid #6f816a;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;transition:background .18s,color .18s}.round-link:hover .down-arrow{background:var(--green);color:var(--ink)}.hero-footer{border-top:1px solid #3c473f;display:flex;justify-content:space-between;gap:1rem;padding-top:1.2rem;color:#b4bfb6;font-size:.8125rem}
.section-pad{padding:clamp(4rem,7.5vw,7.5rem) var(--edge)}.section-heading{display:grid;grid-template-columns:1fr 2.1fr;gap:3rem;margin-bottom:4rem}.section-label{display:flex;gap:1.15rem;align-items:baseline;font-size:.8125rem;line-height:1.5}.section-label>span:first-child{font-variant-numeric:tabular-nums;opacity:.7}.section-heading h2{font-size:clamp(2.5rem,4.4vw,4.75rem);letter-spacing:-.055em;max-width:810px}.section-intro{margin-top:1.6rem;max-width:570px;color:var(--muted);font-size:1.05rem}.project-feature{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:clamp(2rem,4vw,4.5rem);margin-bottom:4rem}.project-visual{min-width:0}.preview-button{position:relative;width:100%;display:block;padding:3rem 2.5rem 0;background:#e1e7e5;border:0;overflow:hidden;max-height:610px;aspect-ratio:1.12;text-align:left}.preview-button>img{width:100%;box-shadow:0 12px 28px #15231e18;transition:transform .3s;transform-origin:top center}.preview-button:hover>img{transform:translateY(-8px)}.preview-hint{position:absolute;bottom:1.4rem;left:1.4rem;background:var(--dark);color:white;padding:.5rem .85rem;font-size:.8125rem;box-shadow:0 2px 10px #0002}.image-caption{font-size:.75rem;color:var(--muted);margin-top:.7rem}.project-topline{display:flex;gap:1rem;font-size:.8125rem;align-items:center;color:var(--muted);margin-bottom:1.7rem}.project-number{font-variant-numeric:tabular-nums;padding-right:1rem;border-right:1px solid currentColor}.project-copy h3,.hato-copy h3{font-size:clamp(2.5rem,4vw,4.2rem);letter-spacing:-.06em;margin-bottom:1.6rem}.project-lead{font-size:1.375rem;line-height:1.3;letter-spacing:-.025em;max-width:400px}.project-copy>p:not(.project-lead),.hato-copy>p:not(.project-lead),.project-secondary article>p:not(.project-lead){font-size:1rem;color:var(--muted);line-height:1.75;margin-top:1.2rem}.project-tags{padding:0;margin:1.6rem 0 2rem;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.8125rem;color:var(--muted)}.project-tags li{border-bottom:1px solid var(--line);padding-bottom:.25rem}.text-link{display:inline-block;font-size:.9375rem;line-height:1.5;padding:.6rem 0;border-bottom:1px solid currentColor;text-underline-offset:.25rem;transition:opacity .15s}.text-link:hover{opacity:.7}.project-hato{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,7rem);padding:clamp(2rem,4.5vw,4.5rem);background:#213f32;color:var(--paper);margin-bottom:4rem}.project-hato .project-topline,.project-hato .hato-copy>p:not(.project-lead){color:#c8d5c9}.project-hato .text-link{margin-top:1.7rem}.hato-workflow{align-self:center;min-width:0}.hato-workflow>p{font-size:.8125rem;color:var(--green);margin-bottom:1.4rem}.hato-workflow ol{list-style:none;padding:0;margin:0 0 1.5rem}.hato-workflow li{display:flex;gap:1.8rem;align-items:center;padding:1.3rem 0;border-top:1px solid #59705e}.hato-workflow li:last-child{border-bottom:1px solid #59705e}.hato-workflow li>span{font-size:.75rem;color:var(--green);font-variant-numeric:tabular-nums}.hato-workflow strong{font-weight:400;font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:-.025em}.workflow-note{display:block;color:#c8d5c9;font-size:.8125rem;max-width:270px}.project-secondary{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,7rem)}.project-secondary article{border-top:1px solid var(--line);padding-top:1.4rem;min-width:0}.project-secondary h3{font-size:clamp(2rem,3vw,3rem);letter-spacing:-.045em;margin-bottom:1.4rem}.project-secondary .project-lead{max-width:440px}.project-secondary .text-link{margin-top:1.4rem}.work-footnote{margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:2.5rem;align-items:flex-start}.work-footnote p{font-size:.8125rem;color:var(--muted);max-width:590px}.work-footnote .text-link{white-space:nowrap;margin-top:-.5rem;font-size:.8125rem}
.approach{background:#e7eddf}.approach-heading{display:grid;grid-template-columns:1.8fr 1fr;gap:3rem;margin:3.5rem 0 3rem;align-items:end}.approach h2{font-size:clamp(2.6rem,4.8vw,5.2rem);letter-spacing:-.055em;line-height:1.08}.approach h2 em{letter-spacing:-.04em}.approach-heading>p{max-width:380px;color:#475548;font-size:1.025rem;margin-bottom:.35rem}.approach-list{margin-left:33%;border-top:1px solid #a7b49d}.approach-list details{border-bottom:1px solid #a7b49d}.approach-list summary{display:flex;align-items:center;gap:1.6rem;padding:1.6rem 0;list-style:none;cursor:pointer}.approach-list summary::-webkit-details-marker{display:none}.detail-number{font-size:.8125rem;color:#596452;font-variant-numeric:tabular-nums}.approach-list h3{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:450;letter-spacing:-.025em;line-height:1.3}.detail-toggle{margin-left:auto;flex-shrink:0;width:24px;height:24px;position:relative}.detail-toggle:before,.detail-toggle:after{content:"";position:absolute;left:5px;top:11px;width:14px;height:1px;background:var(--ink)}.detail-toggle:after{transform:rotate(90deg);transition:transform .15s}details[open] .detail-toggle:after{transform:rotate(0)}.detail-body{padding:0 3rem 1.7rem 3rem;color:#475548;max-width:760px;font-size:1rem;line-height:1.75}
.company .section-heading{margin-bottom:3.5rem}.company h2{white-space:pre-line}.company-content{display:grid;grid-template-columns:1fr 2.1fr;gap:3rem}.company-statement{padding-top:.5rem}.company-word{display:block;font-size:clamp(4rem,7vw,7.5rem);font-weight:500;letter-spacing:-.08em;line-height:.9}.company-word>span{color:#58783e}.company-statement>p{font-size:.8125rem;color:var(--muted);margin-top:1.7rem}.company-copy{max-width:720px}.company-intro{font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.5;letter-spacing:-.025em}.company-copy>p:not(.company-intro){color:var(--muted);line-height:1.8}.company-copy .text-link{margin-top:1.7rem}
.contact{background:var(--dark);color:var(--paper);padding-bottom:5rem}.contact-top{display:flex;justify-content:space-between;gap:2rem;color:#c4cdc4}.contact-top>span{font-size:.8125rem}.contact h2{font-size:clamp(3.1rem,7vw,7.75rem);letter-spacing:-.065em;line-height:1.08;margin:3.5rem 0}.contact h2 em{color:var(--green);margin-left:17%;letter-spacing:-.06em}.contact-bottom{display:flex;justify-content:space-between;align-items:end;gap:3rem}.contact-bottom p{max-width:390px;font-size:1rem;color:#c4cdc4}.email-link{font-size:clamp(1.25rem,2.5vw,2.75rem);letter-spacing:-.04em;border-bottom:1px solid #86967b;padding-bottom:.3rem;overflow-wrap:anywhere}.email-link:hover{color:var(--green)}.site-footer{padding:2rem var(--edge);background:var(--dark);color:#b4bfb6;display:flex;align-items:center;justify-content:space-between;gap:2rem;border-top:1px solid #3c473f;font-size:.8125rem}.site-footer .wordmark{font-size:1.5rem;color:var(--paper)}.site-footer>div{display:flex;gap:1.6rem}.site-footer a:not(.wordmark){padding:.5rem 0}.site-footer a:hover{color:var(--white)}
dialog{border:0;padding:1.5rem;max-width:min(1100px,94vw);max-height:92dvh;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#08120dde;backdrop-filter:blur(3px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:.5rem}.dialog-header h2{font-size:1.25rem;letter-spacing:-.02em;line-height:1.35}.dialog-close{border:1px solid var(--muted);background:transparent;padding:.5rem 1rem;min-height:44px}.dialog-close:hover{background:var(--ink);color:white}dialog>p{font-size:.8125rem;color:var(--muted);margin-bottom:1.2rem}dialog>img{width:100%;height:auto}.privacy-page{max-width:850px;min-height:65vh}.privacy-page h1{font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.05em;margin-bottom:2rem}.privacy-page h2{font-size:1.5rem;margin:2rem 0 1rem}.privacy-page p{color:var(--muted)}.privacy-page a{border-bottom:1px solid currentColor}.privacy-page .text-link{margin-top:2rem}
@media(min-width:1800px){.site-header,.hero,.section-pad,.site-footer{padding-left:max(var(--edge),calc((100vw - 1550px)/2));padding-right:max(var(--edge),calc((100vw - 1550px)/2))}}
@media(max-width:1050px){.desktop-nav{gap:1.5rem;margin-right:0}.header-actions{gap:1.3rem}.header-contact{display:none}.hero h1{font-size:clamp(4rem,10.5vw,7.5rem)}.section-heading,.company-content{grid-template-columns:1fr 2.3fr;gap:2rem}.project-feature{grid-template-columns:1.1fr 1fr;gap:2rem}.preview-button{padding:2rem 1.25rem 0;aspect-ratio:.78;max-height:600px}.project-hato{gap:2.5rem}.approach-heading{grid-template-columns:1.5fr 1fr;gap:2rem}.approach-list{margin-left:20%}.contact-bottom{align-items:start}.contact-bottom p{max-width:320px}.site-footer{gap:1.3rem}.site-footer>div{gap:1.2rem}}
@media(max-width:720px){html{scroll-padding-top:1.5rem}.site-header{height:80px;gap:1rem}.site-header .wordmark{font-size:1.75rem}.desktop-nav{display:none}.header-actions{gap:1.4rem}.menu-toggle{display:block;font-size:.875rem}.hero{padding-top:1.4rem}.hero-location{font-size:.75rem;max-width:100%}.hero-index{display:none}.hero h1{font-size:clamp(3.4rem,12vw,5.7rem);margin:3.2rem 0 2.6rem;line-height:1.05;letter-spacing:-.07em}.hero-second{margin-left:9%}.hero h1 em{margin-left:27%}.hero-bottom{display:block;margin-bottom:2.8rem}.hero-bottom p{font-size:1rem;max-width:400px}.round-link{justify-content:space-between;margin-top:2rem;gap:1rem}.down-arrow{width:48px;height:48px;font-size:1.4rem}.hero-footer{font-size:.6875rem;gap:1.1rem;align-items:start}.hero-footer span:first-child{max-width:180px}.hero-footer span:last-child{white-space:nowrap}.section-heading,.company-content{grid-template-columns:1fr;gap:1.7rem}.section-heading{margin-bottom:2.5rem}.section-heading h2{font-size:clamp(2.4rem,8vw,3.75rem)}.section-intro{font-size:1rem;margin-top:1.3rem}.project-feature{grid-template-columns:1fr;gap:1.8rem;margin-bottom:3rem}.preview-button{aspect-ratio:1.12;max-height:490px;padding:2rem 1.6rem 0}.project-copy h3,.hato-copy h3{font-size:2.8rem;margin-bottom:1.2rem}.project-topline{margin-bottom:1.3rem}.project-tags{margin:1.2rem 0 1rem}.project-hato{grid-template-columns:1fr;margin-bottom:3rem;padding:2rem 1.5rem;gap:2.5rem}.project-hato .text-link{margin-top:1rem}.hato-workflow li{padding:1rem 0}.hato-workflow strong{font-size:1.35rem}.workflow-note{max-width:none}.project-secondary{grid-template-columns:1fr;gap:2.5rem}.project-secondary h3{font-size:2.4rem}.project-secondary .text-link{margin-top:1rem}.work-footnote{display:block;margin-top:2.5rem}.work-footnote .text-link{margin-top:1rem}.approach-heading{grid-template-columns:1fr;gap:1.6rem;margin:2rem 0}.approach h2{font-size:clamp(2.4rem,8vw,3.7rem)}.approach-heading>p{max-width:100%;font-size:1rem}.approach-list{margin-left:0}.approach-list summary{gap:1rem;padding:1.3rem 0}.approach-list h3{font-size:1.25rem}.detail-body{padding:0 1rem 1.5rem 2.2rem;font-size:.9375rem}.company .section-heading{margin-bottom:2.5rem}.company-content{gap:2.3rem}.company-word{font-size:4.4rem;line-height:.85}.company-word br{display:none}.company-statement>p{margin-top:.8rem}.company-intro{font-size:1.35rem}.contact-top{display:block}.contact-top>span{display:block;margin-top:1.2rem}.contact h2{font-size:clamp(2.8rem,9vw,4.7rem);margin:2.5rem 0;line-height:1.1}.contact h2 em{display:inline-block;margin-left:0}.contact-bottom{display:block}.contact-bottom p{max-width:100%}.email-link{display:inline-block;font-size:clamp(1.3rem,5.3vw,2rem);margin-top:2rem}.contact{padding-bottom:3.5rem}.site-footer{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1rem}.site-footer>p{text-align:right}.site-footer>div{grid-column:1/-1;justify-content:space-between}.dialog-header h2{font-size:1rem}.dialog-close{font-size:.875rem;padding:.5rem .75rem}dialog{padding:1rem}.privacy-page h2{font-size:1.3rem}}
@media(max-width:360px){.header-actions{gap:.7rem}.site-header .wordmark{font-size:1.6rem}.hero h1{font-size:3.25rem}.hero h1 em{margin-left:22%}.hero-footer{display:block}.hero-footer span{display:block}.hero-footer span:last-child{margin-top:.3rem}.section-heading h2{font-size:2.25rem}.contact h2{font-size:2.7rem}}
.company-content>div{min-width:0}
@media(max-width:720px){.hero-footer{font-size:.75rem}html[lang=id] .hero h1 em{margin-left:12%;white-space:nowrap;font-size:.95em}}
@media(max-width:360px){.company-word{font-size:3.8rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.site-header,.preview-hint,.site-footer,.language-switch,.round-link,dialog{display:none!important}.hero,.contact,.project-hato{background:white;color:black}.hero h1 em,.contact h2 em{color:black}.section-pad,.hero{padding:2rem}.hero h1{font-size:4rem}.hero-second,.hero h1 em{margin-left:0}.hero p,.hero-footer,.contact p,.project-hato p{color:#333}.approach-list{margin-left:0}details .detail-body{display:block}.project-feature{break-inside:avoid}.project-visual{display:none}}