:root{--i:#10110f;--p:#f1f1eb;--a:#caff18;--l:#c9cac2;--x:clamp(20px,4vw,64px);--f:"DM Sans","Noto Sans JP",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--p);color:var(--i);font-family:var(--f)}
a{color:inherit;text-decoration:none}
.progress{position:fixed;z-index:20;top:0;height:3px;background:var(--a);width:0}
header{height:82px;padding:0 var(--x);display:flex;align-items:center;justify-content:space-between;position:absolute;inset:0 0 auto;z-index:10;color:#fff;border-bottom:1px solid #42433e}
.logo{font-weight:700;font-size:22px}
.logo span{color:var(--a);margin:0 5px}
header nav{display:flex;gap:35px;font-size:10px;letter-spacing:.16em}
.header-cta{font-size:10px;letter-spacing:.13em;border:1px solid;padding:12px 16px}
.hero{min-height:100svh;background:var(--i);color:#fff;padding:135px var(--x) 38px;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#262721 1px,transparent 1px),linear-gradient(90deg,#262721 1px,transparent 1px);background-size:9vw 9vw}
.coordinates{position:absolute;right:var(--x);top:120px;font-size:10px;letter-spacing:.15em;color:#85867f}
.route{position:absolute;width:58vw;height:58vw;border:1px solid #51534c;border-radius:50%;right:-24vw;bottom:-24vw}
.route:before{content:"";position:absolute;width:100vw;height:1px;background:var(--a);top:15%;right:8%;transform:rotate(-28deg)}
.eyebrow,.label{margin:0;font-size:10px;letter-spacing:.17em;font-weight:600}
.hero h1{position:relative;align-self:center;font-size:clamp(63px,10.2vw,157px);line-height:.91;letter-spacing:-.07em;font-weight:500;margin:5vh 0}
.hero h1 em{font-style:normal;color:var(--a)}
.hero-foot{position:relative;border-top:1px solid #454640;padding-top:22px;display:flex;align-items:end;justify-content:space-between;font-size:12px}
.hero-foot p{margin:0}
.button{display:flex;gap:45px;background:var(--a);color:var(--i);padding:18px 20px;font-weight:600}
.intro,.deliver,.flow{padding:clamp(90px,13vw,185px) var(--x);display:grid;grid-template-columns:25% 1fr;border-bottom:1px solid var(--l)}
.intro h2,.deliver h2,.flow h2{font-size:clamp(46px,6.8vw,104px);letter-spacing:-.065em;line-height:1.02;font-weight:500;margin:0 0 60px}
.intro div>p{max-width:770px;margin-left:auto;font-size:clamp(17px,1.8vw,25px);line-height:1.9}
.why,.test,.fit,.faq{padding:clamp(90px,11vw,160px) var(--x)}
.why,.fit{background:var(--a)}
.section-head{display:grid;grid-template-columns:25% 1fr;margin-bottom:70px}
.section-head h2{margin:0;font-size:clamp(45px,6.3vw,94px);line-height:1.03;letter-spacing:-.06em;font-weight:500}
.gap-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid}
.gap-grid article{padding:30px;border-right:1px solid}
.gap-grid b,.test li span{font-size:10px;letter-spacing:.15em}
.gap-grid h3{font-size:clamp(30px,3vw,45px);font-weight:500;margin:75px 0 22px}
.gap-grid p,.test li p{font-size:14px;line-height:1.8}
.test{background:var(--i);color:#fff}
.test ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #555}
.test li{padding:30px 25px;border-right:1px solid #555}
.test h3{font-size:24px;font-weight:500;margin:90px 0 20px}
.test li p{color:#aaa}
.deliver ul{list-style:none;padding:0;margin:0;border-top:1px solid}
.deliver li{border-bottom:1px solid;padding:24px 0;font-size:clamp(17px,2vw,26px)}
.deliver li span{display:inline-block;width:75px;font-size:10px}
.fit-list{margin-left:25%;border-top:1px solid}
.fit-list p{font-size:clamp(19px,2.4vw,34px);margin:0;padding:25px 0;border-bottom:1px solid}
.fit-list p:before{content:"→";display:inline-block;width:55px}
.flow ol{list-style:none;margin:0;padding:0;border-top:1px solid}
.flow li{display:grid;grid-template-columns:100px 1fr;padding:22px 0;border-bottom:1px solid;font-size:20px}
.flow li b{font-size:10px}
.faq{background:#dedfd7}
.faq details{margin-left:25%;border-top:1px solid}
.faq details:last-child{border-bottom:1px solid}
.faq summary{list-style:none;cursor:pointer;padding:25px 0;display:flex;justify-content:space-between;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq details p{max-width:720px;line-height:1.8;color:#51534d}
.contact{background:var(--i);color:#fff;padding:clamp(90px,11vw,150px) var(--x);display:grid;grid-template-columns:40% 1fr;gap:7vw}
.contact h2{font-size:clamp(48px,6.3vw,94px);line-height:.95;letter-spacing:-.065em;font-weight:500;margin:45px 0}
.contact>div>p:last-child{color:#aaa;line-height:1.8}
.form-shell{background:#fff;min-height:720px}
.form-shell iframe{border:0;width:100%;height:720px;display:block}
footer{background:var(--a);padding:45px var(--x);display:flex;align-items:end;justify-content:space-between}
footer p,footer>a:last-child{font-size:9px;letter-spacing:.14em}
.reveal{opacity:0;transform:translateY(24px);transition:.7s}
.reveal.visible{opacity:1;transform:none}
@media(max-width:760px){header{height:70px}
header nav{display:none}
.header-cta{font-size:9px}
.hero{padding-top:110px}
.hero h1{font-size:18vw}
.hero-foot{display:grid;gap:22px}
.button{justify-content:space-between}
.intro,.deliver,.flow{grid-template-columns:1fr;gap:45px}
.section-head{grid-template-columns:1fr;gap:35px}
.gap-grid,.test ol{grid-template-columns:1fr}
.gap-grid article,.test li{padding:25px 0;border-right:0;border-bottom:1px solid}
.gap-grid h3,.test h3{margin:35px 0 15px}
.fit-list,.faq details{margin-left:0}
.contact{grid-template-columns:1fr}
.form-shell,.form-shell iframe{min-height:760px;height:760px}
footer{align-items:flex-start;flex-direction:column;gap:30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.reveal{transition:none}
}

/* Malaysia palette: rainforest, equatorial sun, and route blue */
:root{--i:#073b36;--p:#f4ecde;--a:#2f6df6;--sun:#f4c84b;--l:#c8c0b4}
.progress{background:var(--sun)}
header{border-bottom-color:rgba(255,255,255,.25)}
.logo span,.hero h1 em{color:var(--sun)}
.hero:before{background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px)}
.coordinates{color:#83aaa5}
.route{border-color:#4a7772}
.route:before{height:2px}
.button{background:var(--sun)}
.why{background:#bfd8ff}
.fit{background:var(--sun)}
footer{color:#fff}