/* Approved baseline styles stay in base.css. This layer only refines behavior. */
:root{--motion-ease:cubic-bezier(.2,.65,.3,1);--motion-fast:180ms;--motion-hover:280ms;--motion-reveal:650ms}
.top{animation:headerArrival 650ms var(--motion-ease) both}
@keyframes headerArrival{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hero-enter{animation:heroArrival 1450ms var(--motion-ease) both}
@keyframes heroArrival{from{opacity:.65;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
.hero-photo img{transform:scale(1);will-change:auto}
.hero-inner{transition:none}
.hero-inner.changing{opacity:1;transform:none}
.hero-inner>.kicker,.hero-inner>h1,.hero-inner>.hero-copy,.hero-inner>div:last-child{animation:heroTextArrival 650ms var(--motion-ease) both}
.hero-inner>.kicker{animation-delay:80ms}.hero-inner>h1{animation-delay:170ms}.hero-inner>.hero-copy{animation-delay:260ms}.hero-inner>div:last-child{animation-delay:350ms}.hero-bottom{animation:heroTextArrival 650ms var(--motion-ease) 440ms both}
@keyframes heroTextArrival{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero h1{min-height:1.98em}.hero-copy{min-height:3.2em}
.hero-control{gap:16px}.slidebtn{position:relative;min-height:44px;border-color:#ffffff40}.slidebtn.active{border-color:#ffffff40}.slidebtn::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left}.slidebtn.active::before{transform:scaleX(var(--slide-progress,0))}.slidebtn:not(.active){color:#d1dbd3}
.hero-playback{display:grid;place-items:center;width:32px;min-height:44px;color:white;background:transparent;font-size:15px;flex-shrink:0}
.language-switch{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:11px;letter-spacing:1px}.language-switch button{min-height:44px;min-width:28px;padding:8px 2px;background:none;color:inherit;opacity:.7}.language-switch button[aria-pressed="true"]{opacity:1;color:var(--lime);text-decoration:underline;text-underline-offset:6px}.menu-top .language-switch{margin-left:auto;margin-right:24px}.navright{gap:18px}.desktopnav{gap:clamp(13px,1.8vw,26px)}
.desktopnav a::after{transition:width 220ms var(--motion-ease)}
.pill,.filter,.textlink{transition:background var(--motion-hover),color var(--motion-hover),border-color var(--motion-hover),transform var(--motion-fast)}
.pill .arrow,.textlink .arrow,.project-title>.arrow{transition:transform 250ms var(--motion-ease)}
.pill:active,.filter:active,.close:active{transform:scale(.985)}
.service .plus,.faq-plus{transition:transform 300ms var(--motion-ease)}
.service[open] .service-content,.faq-item[open] .faq-answer{animation:answerIn 320ms var(--motion-ease)}
@keyframes answerIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.expertise-visual{isolation:isolate}.expertise-visual img{transition:opacity 300ms var(--motion-ease),transform 700ms var(--motion-ease)}.expertise-visual.switching img{opacity:.2;transform:scale(1.01)}
.project-card{transition:transform 320ms var(--motion-ease)}.project-card img{transition:transform 650ms var(--motion-ease)}.project-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:#064832;opacity:0;transition:opacity 500ms var(--motion-ease)}.project-card .view-circle{z-index:1;transition:transform 280ms var(--motion-ease),color 280ms,background 280ms}.projectgrid{transition:opacity 320ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine){.project-card:hover{transform:translateY(-2px)}.project-card:hover img{transform:scale(1.03)}.project-card:hover .project-img::after{opacity:.07}.project-card:hover .view-circle{transform:translate(3px,-3px) scale(1.04);background:white}.pill:hover{transform:translateY(-1px)}}
.reveal-pending{opacity:0;transform:translateY(var(--reveal-y,20px))}.reveal-pending[data-reveal-kind="image"]{transform:scale(1.015)}.reveal-visible{opacity:1;transform:none;transition:opacity var(--motion-reveal) var(--motion-ease),transform var(--motion-reveal) var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}[data-reveal-kind="text"]{--reveal-y:12px}[data-reveal-kind="image"]{--motion-reveal:800ms}
.depth-image{translate:0 var(--depth-y,0px)}
dialog{transform-origin:center}dialog::backdrop{transition:none}.menu-links a{opacity:1;transform:none}
.sjut-art{background:#082e25}.sjut-art::before{display:none}.sjut-art .sjut-illustration{width:100%;height:100%;margin:0;object-fit:contain}.sjut-art strong{position:absolute;left:24px;top:18px;font-size:28px;letter-spacing:-1px}.sjut-art small{position:absolute;left:25px;top:49px;margin:0;font-size:9px;letter-spacing:2px}.sjut-city{transition:opacity 700ms var(--motion-ease)}.motion-ready .sjut-art:not(.is-drawn) .sjut-route{stroke-dasharray:1;stroke-dashoffset:1}.sjut-art.is-drawn .sjut-route{stroke-dasharray:1;stroke-dashoffset:0;animation:utilityDraw 1250ms var(--motion-ease) both}.sjut-art.is-drawn .secondary-route{animation-delay:130ms}.sjut-art.is-drawn .sjut-nodes circle{animation:nodeArrival 700ms var(--motion-ease) both}.sjut-art.is-drawn .sjut-nodes circle:nth-child(2){animation-delay:160ms}.sjut-art.is-drawn .sjut-nodes circle:nth-child(3){animation-delay:320ms}@keyframes utilityDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes nodeArrival{from{opacity:.25}to{opacity:1}}
.enquiry-fields select{max-width:100%}.detail-body{overflow-wrap:anywhere}.project-title h3{min-width:0}.hero-control{flex-shrink:0}.hero-caption{min-width:0}.navright>.language-switch{flex-shrink:0}
html[lang="id"] .hero h1{font-size:clamp(58px,6vw,96px);letter-spacing:-.045em}html[lang="id"] .hero-copy{max-width:500px}
@media(max-width:1250px){.desktopnav{gap:13px;font-size:11px}.navright{gap:12px}}
@media(max-width:1100px){.desktopnav{display:none}.navright{margin-left:auto}}
@media(max-width:760px){.hero-control{gap:9px}.slidebtn{min-width:32px}.hero-playback{width:25px}.hero-caption{max-width:140px;font-size:8px}.navright{gap:12px}.menu-top .language-switch{margin-right:16px}.language-switch{font-size:10px}.hero h1{overflow-wrap:normal;min-height:2.1em}.hero .kicker{letter-spacing:1.3px}.hero-inner{padding-bottom:140px}.hero-copy{min-height:4.8em}html[lang="id"] .hero h1{font-size:clamp(34px,9.5vw,58px)}html[lang="id"] .hero-copy{font-size:14px}.menu-links a{letter-spacing:-.8px}.service summary{overflow-wrap:anywhere}.detail-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-facts strong{overflow-wrap:anywhere}.depth-image{translate:none}}
@media(max-width:380px){.hero-caption{max-width:122px}.hero-control{gap:7px}.slidebtn{min-width:29px}.hero h1{font-size:46px}.contact-email{font-size:22px}.language-switch button{min-width:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;transform:none}.hero-photo,.hero-photo img,.hero-inner{transform:none!important;opacity:1!important}.depth-image{translate:none}.sjut-route{stroke-dashoffset:0!important}.sjut-city,.sjut-nodes circle{opacity:1!important}.slidebtn.active::before{transform:scaleX(1)}.project-card:hover,.project-card:hover img,.project-card:hover .view-circle{transform:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[data-count-to]{font-variant-numeric:tabular-nums}
@media(min-width:1101px){.depth-image{height:calc(100% + 28px);margin-top:-14px}}
@media(prefers-reduced-motion:reduce){.depth-image{height:100%;margin-top:0}}
.company-more .sectionhead{margin-top:24px}
.project-card{position:relative}.project-trigger{position:absolute;inset:0;z-index:2;background:transparent;width:100%;height:100%;padding:0;text-align:left}.project-card:focus-within{outline:3px solid #5b7f17;outline-offset:6px}
@media(min-width:761px) and (max-width:1100px){.hero h1{font-size:clamp(58px,7.5vw,85px)}}
@media(max-width:760px){.hero h1{font-size:clamp(40px,11vw,78px);min-height:3.1em}html[lang="id"] .hero h1{min-height:4.1em}.stat:last-child strong{font-size:clamp(21px,5.8vw,32px);letter-spacing:-.8px;overflow-wrap:anywhere}}
@media(max-width:380px){.hero h1{font-size:40px}}
.service-incoming{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none}.visual-caption{z-index:1}
.sjut-disclosure{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 94px);padding:5px 7px;font-size:9px;line-height:1.4;color:#e2eddf;background:#082e25e6}
.service summary:hover,.faq-item summary:hover,.service-enquiry:hover{color:#4a6d18}.service summary .num,.faq-number{color:#5b6f5e}
@media(hover:hover) and (pointer:fine){.sjut-illustration{transition:transform 650ms var(--motion-ease)}.project-card:hover .sjut-illustration{transform:scale(1.01)}}
@media(prefers-reduced-motion:reduce){.project-card:hover .sjut-illustration{transform:none}}
.slidebtn.active{color:var(--lime);font-weight:700}
@media(max-width:1100px){.depth-image{translate:none;height:100%;margin-top:0}}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:#52731c}
.top :focus-visible,.hero :focus-visible,.protection :focus-visible,.contact :focus-visible,.footer :focus-visible,.menu-dialog :focus-visible{outline-color:var(--lime)}
.enquiry-fields input,.enquiry-fields select,.enquiry-fields textarea{border-color:#7c8c7d}
.enquiry-fields input:focus,.enquiry-fields select:focus,.enquiry-fields textarea:focus{outline-color:#52731c}
/* Slightly darker auxiliary text on ivory surfaces; primary brand colors are unchanged. */
.expertise .muted,.expertise .service-content p,.company-more details p,.company-more .leaders span,.detail-facts small{color:#65706a}
.footprint-note,.location-list li span{color:#506a46}
html{scrollbar-gutter:stable}
@media(hover:none),(pointer:coarse){.project-card:hover,.project-card:hover img,.project-card:hover .view-circle,.company-photo:hover img,.pill:hover,.pill:hover .arrow,.textlink:hover .arrow,.project-card:hover .project-title>.arrow{transform:none}.project-img::after{opacity:0}.project-card:hover .view-circle{background:var(--lime)}}
@media(prefers-reduced-motion:reduce){.company-photo:hover img,.pill:hover,.pill:hover .arrow,.textlink:hover .arrow,.project-title>.arrow{transform:none}}