*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#17283d;background:#fff;font-family:"DM Sans",sans-serif}a{color:inherit;text-decoration:none}.header{height:76px;position:sticky;top:0;z-index:30;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 6.2%;box-shadow:0 2px 18px #0c24420b}.brand{display:flex;align-items:center;min-width:190px;width:190px}.brand img{display:block;width:100%;height:58px;object-fit:contain;object-position:left center}nav{display:flex;gap:26px}nav a{font-size:9px;font-weight:600;color:#28384c}nav a:hover{color:#bd8e3c}.head-actions{display:flex;align-items:center;gap:14px}.lang{position:relative}.lang>button{border:0;background:white;font-size:10px;color:#26364a;cursor:pointer}.lang>button i{color:#b58a40;margin-right:4px}.lang-menu{display:none;position:absolute;right:0;top:30px;min-width:180px;background:#fff;padding:7px;box-shadow:0 12px 35px #15283c25;border-radius:7px}.lang-menu.show{display:block}.lang-menu button{display:block;width:100%;border:0;background:#fff;text-align:left;padding:10px;font-size:11px;cursor:pointer}.lang-menu button:hover{background:#f4f1ea}.header-cta{background:#102944;color:white;padding:12px 17px;border-radius:3px;font-size:9px;font-weight:600}.hamb{display:none;border:0;background:none;font-size:23px;color:#152a40}.hero{min-height:540px;position:relative;display:flex;align-items:center;overflow:hidden;background:#e9eef2}.hero-photo{position:absolute;inset:0 0 0 35%;background:url("assets/jakarta-skyline-hero.webp") center 48%/cover}.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,#f7fafc 0%,#f7fafcf7 34%,#f7fafcdd 47%,#f7fafc45 67%,#10243a18 100%)}.hero-content{position:relative;z-index:2;width:58%;padding:70px 0 75px 6.3%}.eyebrow{font-size:8px;font-weight:700;letter-spacing:2.4px;color:#a7854a}.hero h1{font:600 clamp(38px,4.4vw,57px)/1.08 "Playfair Display";letter-spacing:-.7px;margin:18px 0 14px;max-width:690px}.hero h1 em,h2 em{font-style:normal;color:#b58b43}.hero-content>p{font-size:11px;line-height:1.8;color:#526174;max-width:500px}.hero-buttons{display:flex;gap:12px;margin-top:22px}.btn-primary,.btn-outline,.btn-gold{display:inline-block;padding:12px 17px;font-size:9px;font-weight:700;border-radius:3px}.btn-primary{background:#102944;color:#fff}.btn-outline{border:1px solid #9da8b3;color:#1a2b40}.hero-metrics{display:flex;gap:30px;margin-top:36px}.hero-metrics div{display:flex;flex-direction:column;gap:5px}.hero-metrics b{font:600 23px "Playfair Display";color:#142d49}.hero-metrics span{font-size:8px;color:#687588}.hero-caption{position:absolute;right:5%;bottom:18px;color:white;text-shadow:0 1px 5px #000;font-size:8px;letter-spacing:1.5px}.hero-caption span{color:#d5b26e}.trust{padding:22px 6.3% 25px;border-bottom:1px solid #edf0f2}.trust-title{text-align:center;font-size:8px;letter-spacing:2px;color:#a58b60;font-weight:700;margin-bottom:17px}.trust-items{display:flex;justify-content:space-between;gap:20px}.trust-items span{display:flex;align-items:center;gap:9px;color:#657286}.trust-items i{font-size:18px;color:#253d59}.trust-items b{font-size:8px;font-weight:500}
/* Selected client collaborations */
.client-section{padding:50px 6.3% 42px;background:#fff;border-top:1px solid #edf0f2;border-bottom:1px solid #edf0f2;overflow:hidden}
.client-heading{display:flex;align-items:end;justify-content:space-between;gap:34px;margin-bottom:27px}
.client-heading h2{font:600 clamp(25px,2.6vw,34px)/1.12 "Playfair Display";color:#10243d;margin:8px 0 0;max-width:510px}
.client-heading h2 em{color:#b18a49;font-style:normal}
.client-heading p{max-width:390px;margin:0;color:#687487;font-size:10px;line-height:1.8}
.client-marquee{position:relative;overflow:hidden;padding:5px 0 8px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.client-track{display:flex;align-items:stretch;gap:18px;width:max-content;animation:client-scroll 34s linear infinite}
.client-marquee:hover .client-track{animation-play-state:paused}
.client-item{width:245px;flex:0 0 245px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 18px 15px;border:1px solid #e9edf0;border-radius:5px;background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s}
.client-item:hover{border-color:#d5bd8d;transform:translateY(-3px);box-shadow:0 9px 22px #12294310}
.client-logo{height:66px;width:100%;display:flex;align-items:center;justify-content:center}
.client-logo img{display:block;max-width:100%;max-height:58px;width:auto;height:auto;object-fit:contain}.client-logo.mandela-logo{background:#10243d;border-radius:4px;padding:5px 14px}.client-logo.mandela-logo img{max-height:58px;max-width:92%}
.client-item span{font-size:9px;line-height:1.4;color:#667386;text-align:center;letter-spacing:.015em}
.client-footnote{margin-top:15px;text-align:right;color:#929ba5;font-size:8px;letter-spacing:.02em}
@keyframes client-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.client-track{animation:none}.client-marquee{overflow-x:auto;mask-image:none}}
@media(max-width:700px){.client-section{padding:38px 6% 32px}.client-heading{display:block;margin-bottom:19px}.client-heading p{margin-top:12px}.client-item{width:205px;flex-basis:205px;padding:15px}.client-footnote{text-align:left;line-height:1.5}}

.section{padding:68px 6.3%}.services{background:#fbfbfa}.section-top{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:26px}.gold-text{color:#b18a49}.section h2{font:600 clamp(29px,3vw,39px)/1.13 "Playfair Display";margin:9px 0 0}.section-top>p{max-width:390px;font-size:10px;line-height:1.8;color:#687487;margin:0}.service-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.service-card{border:1px solid #e9edf0;border-radius:5px;overflow:hidden;background:#fff;box-shadow:0 4px 16px #142b4509;transition:transform .25s,box-shadow .25s}.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px #142b4518}.card-photo{height:142px;background-size:cover;background-position:center}.photo-policy{background-image:url("https://images.pexels.com/photos/14248646/pexels-photo-14248646.jpeg?auto=compress&cs=tinysrgb&w=900&q=80")}.photo-relations{background-image:url("https://images.pexels.com/photos/35498205/pexels-photo-35498205.jpeg?auto=compress&cs=tinysrgb&w=900&q=80")}.photo-market{background-image:url("https://images.pexels.com/photos/2231742/pexels-photo-2231742.jpeg?auto=compress&cs=tinysrgb&w=900&q=80")}.photo-cross{background-image:url("https://images.pexels.com/photos/3848787/pexels-photo-3848787.jpeg?auto=compress&cs=tinysrgb&w=900&q=80")}.card-body{padding:15px 15px 17px;position:relative}.round-icon{width:34px;height:34px;border-radius:50%;background:#132c49;color:white;display:grid;place-items:center;margin-top:-32px;position:relative;border:3px solid white}.round-icon i{font-size:13px}.card-body h3{font:600 16px/1.2 "Playfair Display";margin:11px 0 8px;min-height:39px}.card-body p{font-size:9px;line-height:1.65;color:#697586;min-height:60px}.card-body>a,.insight-grid article>a{font-size:9px;color:#1c4c7a;font-weight:700}.sectors{padding-top:58px;padding-bottom:60px}.simple-link{font-size:9px;color:#1a4c7d;font-weight:700}.sector-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}.sector-tile{height:155px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;color:white;overflow:hidden;border-radius:4px;background-size:cover;background-position:center}.sector-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061a2ee8,transparent 75%);transition:background .2s}.sector-tile:hover:before{background:linear-gradient(0deg,#061a2ef5,#061a2e20)}.sector-tile span,.sector-tile b{position:relative}.sector-tile span{font-size:8px;color:#e2bd74}.sector-tile b{font-size:9px;line-height:1.3;margin-top:5px}.tile-digital{background-image:url("https://images.pexels.com/photos/35498205/pexels-photo-35498205.jpeg?auto=compress&cs=tinysrgb&w=700&q=80")}.tile-finance{background-image:url("https://images.pexels.com/photos/37454044/pexels-photo-37454044.jpeg?auto=compress&cs=tinysrgb&w=700&q=80")}.tile-energy{background-image:url("https://images.pexels.com/photos/14998735/pexels-photo-14998735.jpeg?auto=compress&cs=tinysrgb&w=700&q=80")}.tile-manufacturing{background-image:url("https://images.pexels.com/photos/2231742/pexels-photo-2231742.jpeg?auto=compress&cs=tinysrgb&w=700&q=80")}.tile-infra{background-image:url("https://images.pexels.com/photos/3848787/pexels-photo-3848787.jpeg?auto=compress&cs=tinysrgb&w=700&q=80")}.tile-health{background-image:url("https://images.pexels.com/photos/14248646/pexels-photo-14248646.jpeg?auto=compress&cs=tinysrgb&w=700&q=80")}.tile-agri{background-image:url("https://images.pexels.com/photos/12470942/pexels-photo-12470942.jpeg?auto=compress&cs=tinysrgb&w=700&q=80")}.tile-maritime{background-image:url("https://images.pexels.com/photos/3057963/pexels-photo-3057963.jpeg?auto=compress&cs=tinysrgb&w=700&q=80")}.approach{background:#faf9f6;padding-top:65px;padding-bottom:65px}.steps{display:grid;grid-template-columns:1fr 25px 1fr 25px 1fr 25px 1fr;gap:12px;margin-top:32px}.steps article{position:relative}.steps article>i{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:#fff;box-shadow:0 4px 18px #18314b12;color:#24609b;font-size:20px;margin-bottom:12px}.steps article>b{position:absolute;left:54px;top:15px;font-size:8px;color:#b58c49}.steps h3{font:600 15px "Playfair Display";margin:0 0 7px}.steps p{font-size:9px;line-height:1.7;color:#687588}.step-arrow{align-self:start;margin-top:18px;color:#bd984e}.regional{min-height:285px;display:grid;grid-template-columns:1fr 1fr;position:relative;background:#0c2743;color:#fff;overflow:hidden}.regional-copy{padding:48px 8% 42px 12%;position:relative;z-index:2}.regional-copy .eyebrow{color:#d7b775}.regional h2{font:600 33px/1.1 "Playfair Display";margin:12px 0}.regional-copy p{font-size:10px;line-height:1.8;color:#d0d9e2;max-width:430px}.btn-gold{background:#d4ae60;color:#10243b;margin-top:10px}.regional-photo{background:url("https://images.pexels.com/photos/12470942/pexels-photo-12470942.jpeg?auto=compress&cs=tinysrgb&w=1400&q=80") center/cover;min-height:285px}.regional-facts{position:absolute;right:5%;bottom:22px;background:#102c48e8;padding:13px 18px;display:flex;gap:22px;border:1px solid #ffffff28}.regional-facts div{display:grid;grid-template-columns:18px auto;column-gap:7px;align-items:center}.regional-facts i{grid-row:span 2;color:#e0bd75;font-size:13px}.regional-facts b{font:600 15px "Playfair Display"}.regional-facts span{font-size:7px;color:#c6d0d9}.insights{padding-top:60px;padding-bottom:65px}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.insight-grid article{border:1px solid #e9edf0;border-radius:4px;overflow:hidden;padding-bottom:14px}.insight-photo{height:145px;background-size:cover;background-position:center}.insight-1{background-image:url("https://images.pexels.com/photos/14248646/pexels-photo-14248646.jpeg?auto=compress&cs=tinysrgb&w=900&q=80")}.insight-2{background-image:url("https://images.pexels.com/photos/2231742/pexels-photo-2231742.jpeg?auto=compress&cs=tinysrgb&w=900&q=80")}.insight-3{background-image:url("https://images.pexels.com/photos/35498205/pexels-photo-35498205.jpeg?auto=compress&cs=tinysrgb&w=900&q=80")}.insight-grid article small,.insight-grid article h3,.insight-grid article p,.insight-grid article>a{margin-left:14px;margin-right:14px}.insight-grid article small{display:inline-block;margin-top:13px;font-size:7px;color:#286095;background:#edf4fa;padding:4px 6px}.insight-grid h3{font:600 16px/1.3 "Playfair Display";margin-top:8px;margin-bottom:6px}.insight-grid p{font-size:9px;line-height:1.7;color:#6b7787;min-height:32px}.contact-banner{position:relative;min-height:210px;display:flex;align-items:center;padding:38px 8%;color:white;background:#0d2946;overflow:hidden}.contact-banner-bg{position:absolute;inset:0;background:url("https://images.pexels.com/photos/37454044/pexels-photo-37454044.jpeg?auto=compress&cs=tinysrgb&w=1600&q=80") center/cover;opacity:.32}.contact-banner>div:last-child{position:relative;max-width:600px}.contact-banner .eyebrow{color:#d5b36e}.contact-banner h2{font:600 34px "Playfair Display";margin:9px 0}.contact-banner p{font-size:10px;color:#d4dce5;max-width:400px;line-height:1.7}.footer-main{padding:40px 6.3%;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:45px}.footer-brand p{max-width:280px;font-size:9px;line-height:1.7;color:#6c7888}.footer-main h4{font-size:10px;margin:8px 0 15px}.footer-main>div:not(:first-child){display:flex;flex-direction:column;gap:9px}.footer-main>div>a:not(.brand){font-size:8px;color:#687586}.social{display:flex;gap:12px}.social a{font-size:12px;font-weight:700;color:#173552}.footer-contact{display:flex;gap:25px;padding:14px 6.3%;border-top:1px solid #edf0f2;border-bottom:1px solid #edf0f2}.footer-contact span,.footer-contact a{font-size:8px;color:#657386}.footer-contact i{color:#b28b4b;margin-right:5px}.footer-bottom{padding:15px 6.3%;display:flex;justify-content:space-between;gap:12px;font-size:8px;color:#7a8592}.footer-bottom a{color:#657386}.footer-bottom>a:last-child{color:#a27c3d;text-decoration:underline}@media(max-width:1000px){nav{gap:13px}.service-cards{grid-template-columns:repeat(2,1fr)}.sector-strip{grid-template-columns:repeat(4,1fr)}.sector-tile{height:135px}.regional-facts{right:3%}.steps{gap:7px}.footer-main{gap:25px}}@media(max-width:700px){.header{height:68px;padding:0 5%}.brand{width:150px;min-width:150px}.brand img{width:100%;height:48px}.brand b{font-size:14px}nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:20px 6%;flex-direction:column;gap:18px;box-shadow:0 10px 20px #0001}nav.open{display:flex}.hamb{display:block}.header-cta{display:none}.hero{min-height:650px;align-items:flex-start}.hero-photo{inset:0;background-position:60% center}.hero-wash{background:linear-gradient(90deg,#ffffffef 0%,#ffffffe8 52%,#ffffff62 100%)}.hero-content{width:90%;padding:95px 0 80px 7%}.hero h1{font-size:42px}.hero-content>p{font-size:11px}.hero-metrics{gap:18px;flex-wrap:wrap}.hero-caption{font-size:7px}.trust-items{display:grid;grid-template-columns:1fr 1fr;gap:15px}.section{padding:48px 6%}.section-top{display:block}.section-top>p{margin-top:17px}.service-cards{grid-template-columns:1fr 1fr;gap:9px}.card-photo{height:110px}.card-body{padding:12px}.card-body h3{font-size:14px;min-height:0}.card-body p{font-size:8px;min-height:80px}.sector-strip{grid-template-columns:repeat(2,1fr)}.sector-tile{height:145px}.steps{grid-template-columns:1fr 1fr;gap:20px}.step-arrow{display:none}.regional{grid-template-columns:1fr}.regional-copy{padding:45px 7%}.regional-photo{min-height:200px}.regional-facts{position:relative;right:auto;bottom:auto;justify-content:space-around;gap:8px;padding:15px}.insight-grid{grid-template-columns:1fr}.insight-photo{height:170px}.footer-main{grid-template-columns:1fr 1fr;padding:35px 6%;gap:25px}.footer-brand{grid-column:1/-1}.footer-contact{flex-direction:column;gap:10px;padding:15px 6%}.footer-bottom{flex-wrap:wrap;line-height:1.6}.contact-banner{padding:40px 7%}}
/* Revised Jakarta hero and expanded collaboration strip */
.hero-photo{background-position:center 48%}
.client-track{animation-duration:52s}
.client-item{width:220px;flex-basis:220px;min-height:132px}
.client-logo{height:70px}
.client-logo img{max-width:94%;max-height:62px;object-fit:contain}
.client-logo.mandela-logo{background:#10243d;padding:6px 12px}
.client-logo.mandela-logo img{max-height:60px}
@media(max-width:700px){
 .hero{min-height:600px}
 .hero-photo{inset:0;background-position:58% center}
 .hero-wash{background:linear-gradient(90deg,#f7fafcf5 0%,#f7fafcdb 58%,#f7fafc58 100%)}
 .hero-content{width:92%;padding:65px 6% 85px}
 .hero h1{font-size:39px;max-width:540px}
 .hero-metrics{gap:18px;flex-wrap:wrap}
}


/* Readability refinement: more comfortable typography across desktop and mobile */
body { font-size: 16px; }
nav a { font-size: 14px; }
.header-cta, .lang button { font-size: 13px; }
.hero-content > p { font-size: 16px; line-height: 1.75; max-width: 590px; }
.hero .eyebrow, .eyebrow { font-size: 11px; letter-spacing: .12em; }
.hero-metrics span { font-size: 13px; }
.hero-caption { font-size: 10px; letter-spacing: .12em; }
.section-top > p { font-size: 15px; line-height: 1.75; }
.card-body h3 { font-size: 17px; line-height: 1.35; }
.card-body p { font-size: 13px; line-height: 1.65; }
.card-body a, .simple-link { font-size: 13px; }
.sector-tile, .sector-tile span { font-size: 14px; }
.approach p, .step p, .regional-copy p { font-size: 14px; line-height: 1.7; }
.regional-facts span, .regional-facts b { font-size: 13px; }
.insight-card h3 { font-size: 16px; line-height: 1.45; }
.insight-card p { font-size: 13px; line-height: 1.65; }
.contact-banner p { font-size: 15px; line-height: 1.75; }
.footer-brand p { font-size: 13px; line-height: 1.7; }
.footer-main h4 { font-size: 13px; }
.footer-main > div > a:not(.brand) { font-size: 12px; }
.footer-contact span, .footer-contact a { font-size: 12px; }
.footer-bottom { font-size: 11px; }
.ui-symbol { display:inline-block; font-style:normal; font-size:1.15em; line-height:1; vertical-align:middle; margin-right:5px; }
@media (max-width:700px) {
  nav a { font-size: 16px; }
  .hero-content > p { font-size: 15px; }
  .hero h1 { font-size: 40px; line-height: 1.08; }
  .hero-caption { font-size: 9px; }
  .card-body h3 { font-size: 16px; }
  .card-body p { font-size: 12px; min-height: 0; }
  .section-top > p { font-size: 14px; }
  .footer-brand p { font-size: 13px; }
}


/* Self-contained approach icons: no external icon-font dependency */
.steps article > .step-icon {
  display:grid; place-items:center; width:80px; height:80px; border-radius:50%;
  background:#fff; box-shadow:0 5px 22px #18314b12; color:#24609b;
  margin:0 0 14px; position:relative;
}
.steps article > .step-icon svg {
  display:block; width:27px; height:27px; fill:none; stroke:currentColor;
  stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round;
}
.steps article > b { left:96px; top:28px; font-size:13px; }
.steps h3 { font-size:17px; }
.steps p { font-size:14px; line-height:1.7; }
.step-arrow { margin-top:31px; font-size:23px; }
@media(max-width:700px) {
  .steps article > .step-icon { width:58px; height:58px; }
  .steps article > .step-icon svg { width:23px; height:23px; }
  .steps article > b { left:70px; top:19px; font-size:12px; }
  .steps h3 { font-size:16px; }
  .steps p { font-size:13px; }
}

/* Arabic interface direction and typography */
html[dir="rtl"] body { direction:rtl; }
body.rtl { text-align:right; }
body.rtl .header-inner, body.rtl .header-actions { direction:rtl; }
body.rtl nav { direction:rtl; }
body.rtl .section-top, body.rtl .client-heading { direction:rtl; }
body.rtl .steps { direction:rtl; }
body.rtl .steps article > b { left:auto; right:96px; }
body.rtl .step-arrow { transform:scaleX(-1); }
body.rtl .regional-copy { text-align:right; }
body.rtl .footer-main { direction:rtl; text-align:right; }
body.rtl .footer-bottom { direction:rtl; }
body.rtl .contact-banner { direction:rtl; text-align:right; }
body.rtl .lang-menu { right:auto; left:0; }
body.rtl .hero-content { text-align:right; }
body.rtl .hero-metrics { direction:rtl; }
body.rtl .hero-buttons { direction:rtl; }
body.rtl .card-body { text-align:right; }
body.rtl .insight-grid article { text-align:right; }
body.rtl .sector-strip { direction:rtl; }
body.rtl .footer-contact { text-align:right; }
@media(max-width:700px) {
  body.rtl nav { text-align:right; }
  body.rtl .steps { direction:rtl; }
}


/* HATTA loading screen */
.site-loader{position:fixed;inset:0;z-index:9999;background:#f8f7f3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;transition:opacity .55s ease,visibility .55s ease}
.site-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-emblem{width:88px;height:88px;position:relative;display:grid;place-items:center}
.loader-emblem img{width:53px;height:53px;object-fit:contain;position:relative;z-index:2;animation:hatta-breathe 1.8s ease-in-out infinite}
.loader-orbit{position:absolute;inset:0;border:2px solid #d9dfe5;border-top-color:#b58b43;border-right-color:#b58b43;border-radius:50%;animation:hatta-spin 1.1s linear infinite}
.loader-wordmark{font:700 15px/1.2 "DM Sans",sans-serif;letter-spacing:3px;color:#122b46;text-align:center}
.loader-wordmark span{display:block;font-size:8px;font-weight:600;letter-spacing:2.3px;color:#a98549;margin-top:5px}
.loader-track{width:116px;height:2px;background:#e2e5e8;overflow:hidden;margin-top:3px}
.loader-track span{display:block;width:42%;height:100%;background:#b58b43;animation:loader-progress 1.25s ease-in-out infinite}
@keyframes hatta-spin{to{transform:rotate(360deg)}}
@keyframes hatta-breathe{0%,100%{transform:scale(.94)}50%{transform:scale(1.05)}}
@keyframes loader-progress{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
/* Mouse-responsive hero visual: restrained parallax and warm spotlight */
.hero{isolation:isolate;--pointer-x:72%;--pointer-y:45%;--parallax-x:0px;--parallax-y:0px}
.hero-photo{transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.035);transition:transform .22s ease-out;will-change:transform}
.hero-pointer-glow{position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(360px circle at var(--pointer-x) var(--pointer-y),rgba(210,174,105,.18),transparent 72%);mix-blend-mode:soft-light;opacity:.9;transition:opacity .3s ease}
.hero:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 48%,transparent 62%);transform:translateX(-120%);animation:hero-sheen 9s ease-in-out infinite}
@keyframes hero-sheen{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
@media(hover:hover) and (pointer:fine){.hero:hover .hero-pointer-glow{opacity:1}}
@media(hover:none),(prefers-reduced-motion:reduce){.hero-photo{transform:none;transition:none}.hero:after{animation:none}.hero-pointer-glow{display:none}.loader-orbit,.loader-emblem img,.loader-track span{animation-duration:2.8s}}


/* Refined motion system: lively but restrained, with accessibility support */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * { animation: heroRise .85s cubic-bezier(.2,.75,.25,1) both; }
  .hero-content > *:nth-child(1) { animation-delay: .12s; }
  .hero-content > *:nth-child(2) { animation-delay: .22s; }
  .hero-content > *:nth-child(3) { animation-delay: .34s; }
  .hero-content > *:nth-child(4) { animation-delay: .46s; }
  .hero-content > *:nth-child(5) { animation-delay: .58s; }
  .hero-caption { animation: captionFade 1.2s .7s both; }
  .hero-photo { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1.2s ease; }
  .hero:hover .hero-photo { filter: saturate(1.08); }
  .btn-primary, .btn-outline { transition: transform .28s ease, box-shadow .28s ease, background .28s ease; }
  .btn-primary:hover, .btn-outline:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,36,60,.16); }
  .service-card, .sector-card, .insight-card, .approach-card, .step {
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .3s ease;
  }
  .service-card:hover, .sector-card:hover, .insight-card:hover, .approach-card:hover, .step:hover {
    transform: translateY(-7px); box-shadow: 0 18px 42px rgba(16,34,58,.10);
  }
  .service-card img, .insight-card img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .service-card:hover img, .insight-card:hover img { transform: scale(1.045); }
  .footer-main a, nav a { transition: color .25s ease, opacity .25s ease; }
  nav a::after { transition: width .28s ease; }
  .hero-metrics > div { animation: metricIn .65s ease both; }
  .hero-metrics > div:nth-child(2) { animation-delay: .12s; }
  .hero-metrics > div:nth-child(3) { animation-delay: .24s; }
  .scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
  .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
  .scroll-reveal[data-delay="1"] { transition-delay: .1s; }
  .scroll-reveal[data-delay="2"] { transition-delay: .2s; }
  .scroll-reveal[data-delay="3"] { transition-delay: .3s; }
}
@keyframes heroRise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes captionFade { from { opacity:0; letter-spacing:.24em; } to { opacity:1; letter-spacing:initial; } }
@keyframes metricIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* HATTA hero: supplied Jakarta tower photograph, full composition retained */
.hero-photo {
  background: #d9e2e9 !important;
  overflow: hidden;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: url("assets/jakarta-skyline-hero.webp") center 48% / cover no-repeat;
  filter: blur(18px);
  transform: scale(1.06);
  opacity: .58;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(100%, 54%);
  background: url("assets/jakarta-skyline-hero.webp") right center / auto 100% no-repeat;
  box-shadow: -35px 0 65px rgba(247,250,252,.12);
}
@media (max-width: 760px) {
  .hero-photo { left: 18% !important; opacity: .72; }
  .hero-photo::after { width: 74%; background-position: right center; }
}


/* RESPONSIVE FIX — prevent clipped navigation and hero content on tablet/mobile */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
img, svg, video {
  max-width: 100%;
}
.header {
  width: 100%;
  min-width: 0;
}
.header > *, .head-actions, .brand {
  min-width: 0;
}
.hero {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.hero-content {
  box-sizing: border-box;
  min-width: 0;
  max-width: 760px;
}
.hero h1, .hero-content > p {
  overflow-wrap: break-word;
  word-break: normal;
}
.hero-photo {
  left: 0 !important;
  right: 0 !important;
  width: 100%;
}
.hero-photo::after {
  width: 66%;
  background-position: center center;
  background-size: cover;
}

/* Tablet: collapse the full navigation before it can push the page sideways. */
@media (max-width: 1000px) {
  .header {
    height: 72px;
    padding: 0 5%;
    gap: 16px;
  }
  .brand {
    width: 170px;
    min-width: 150px;
    flex: 0 1 170px;
  }
  .brand img {
    height: 52px;
  }
  header nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px 6%;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 12px 24px rgba(10, 30, 50, .12);
    z-index: 50;
  }
  header nav.open {
    display: flex;
  }
  header nav a {
    font-size: 15px;
  }
  .hamb {
    display: block;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 8px;
    font-size: 23px;
    line-height: 1;
    color: #152a40;
    cursor: pointer;
  }
  .header-cta {
    display: none;
  }
  .head-actions {
    margin-left: auto;
    gap: 12px;
  }
  .hero {
    min-height: 620px;
    align-items: center;
  }
  .hero-content {
    width: min(100%, 760px);
    padding: 68px 6% 92px;
  }
  .hero h1 {
    max-width: 650px;
    font-size: clamp(38px, 5.2vw, 54px);
  }
  .hero-content > p {
    max-width: 540px;
    font-size: 15px;
  }
  .hero-metrics {
    gap: clamp(14px, 3vw, 28px);
    flex-wrap: wrap;
  }
  .hero-metrics span {
    font-size: 12px;
  }
  .hero-caption {
    right: 5%;
    bottom: 16px;
    max-width: 90%;
    text-align: right;
    font-size: 9px;
  }
}

/* Phones and narrow portrait viewports */
@media (max-width: 700px) {
  .header {
    height: 66px;
    padding: 0 18px;
  }
  .brand {
    width: 145px;
    min-width: 125px;
    flex: 0 1 145px;
  }
  .brand img {
    height: 44px;
  }
  header nav {
    top: 66px;
  }
  .head-actions {
    gap: 8px;
  }
  .lang > button {
    font-size: 13px;
  }
  .hero {
    min-height: 660px;
    align-items: flex-start;
  }
  .hero-photo {
    inset: 0 !important;
    opacity: .9;
  }
  .hero-photo::before {
    inset: -12px;
    opacity: .48;
  }
  .hero-photo::after {
    width: 100%;
    background-position: 62% center;
    background-size: cover;
    opacity: .78;
  }
  .hero-wash {
    background: linear-gradient(90deg, rgba(247,250,252,.97) 0%, rgba(247,250,252,.91) 58%, rgba(247,250,252,.48) 100%);
  }
  .hero-content {
    width: 100%;
    max-width: none;
    padding: 76px 22px 105px;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(35px, 9vw, 43px);
    line-height: 1.08;
    letter-spacing: -.5px;
  }
  .hero-content > p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.65;
  }
  .hero-buttons {
    flex-wrap: wrap;
  }
  .hero-metrics {
    gap: 14px 22px;
  }
  .hero-metrics > div {
    min-width: 95px;
  }
  .hero-metrics span {
    font-size: 11px;
  }
  .hero-caption {
    left: 20px;
    right: 20px;
    bottom: 15px;
    max-width: none;
    text-align: left;
    font-size: 8px;
    letter-spacing: .08em;
  }
}