/* September refinement: quieter panels, Malaysian palette, purposeful motion. */
.brand-lockup{display:inline-flex;align-items:center;gap:12px;min-width:0;color:#fff}
.topbar .logo.brand-lockup{padding:0 4px;background:none;border-radius:0;box-shadow:none;flex:0 0 auto}
.brand-monogram{display:inline-block;padding-right:12px;border-right:1px solid rgba(255,204,0,.55);font:29px/1.2 var(--serif);letter-spacing:-.08em;white-space:nowrap}
.topbar .logo>.brand-monogram{display:block;white-space:nowrap}
.brand-monogram em{font-style:normal;color:#f2ca63}
.brand-wordmark{display:grid;gap:1px;line-height:1.1;white-space:nowrap}
.brand-wordmark strong{font:17px/1.18 var(--serif);letter-spacing:-.025em}
.brand-wordmark small{color:#bfc9e2;font:500 8px/1.5 var(--sans);letter-spacing:.16em}
.topbar .brand-lockup:hover .brand-monogram em{color:#ffda7d}
.manager-panel>.brand-lockup{display:flex;width:max-content;max-width:100%;margin:0 0 27px;gap:10px}
.manager-panel .brand-monogram{font-size:27px}
.manager-panel .brand-wordmark strong{font-size:15px}
.manager-panel .brand-wordmark small{font-size:7px}
.principles-stage{
  background:radial-gradient(circle at 53% 48%,#152683 0%,#101b6e 35%,#0b125c 72%,#08104b 100%);
  isolation:isolate;
}
.principles-stage:before{
  opacity:.7;
  background:
    linear-gradient(90deg,transparent 0 49.9%,rgba(255,255,255,.11) 50%,transparent 50.1%),
    repeating-linear-gradient(0deg,transparent 0 94px,rgba(255,255,255,.055) 95px,transparent 96px),
    repeating-linear-gradient(90deg,transparent 0 124px,rgba(255,255,255,.045) 125px,transparent 126px);
  mask-image:radial-gradient(ellipse at center,#000 22%,transparent 78%);
}
.principles-stage:after{
  width:min(52vw,550px);height:min(52vw,550px);
  border:1px solid rgba(255,204,0,.17);
  box-shadow:0 0 0 82px rgba(255,255,255,.018),0 0 0 164px rgba(255,255,255,.012);
}
.principles-flag{display:none}
.principles-coordinate{position:absolute;right:35px;top:27px;color:#aab6e0;font-size:10px;letter-spacing:.15em;opacity:.8;z-index:3}
.principle{background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.055));border-color:rgba(255,255,255,.17);box-shadow:0 18px 48px rgba(2,6,47,.16)}
.principle:hover{box-shadow:0 28px 58px rgba(2,6,47,.28)}
.principle p{color:#cdd3ed}
.principles-stage.visible .p1{animation:principle-arrive .72s .05s both}
.principles-stage.visible .p2{animation:principle-arrive .72s .18s both}
.principles-stage.visible .p3{animation:principle-arrive .72s .31s both}
@keyframes principle-arrive{from{opacity:0;filter:blur(5px);translate:0 16px}to{opacity:1;filter:blur(0);translate:0 0}}

/* The selector is one continuous surface, with just one visual emphasis at a time. */
.direction-workspace{background:linear-gradient(145deg,#141d56,#10184b);border-color:rgba(255,255,255,.16);box-shadow:0 28px 64px rgba(0,3,34,.27)}
.direction-workspace .workspace-bar{padding:19px 27px;background:transparent;border-bottom:1px solid rgba(255,255,255,.12)}
.workspace-instruction{display:flex;align-items:center;gap:10px;color:#cdd4ee;font-size:13px;letter-spacing:0}
.workspace-instruction b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#bd1736;color:#fff;font-size:16px;font-weight:400}
.direction-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.12)}
.direction-tabs button,.direction-tabs button[aria-selected=true]{display:flex;align-items:center;gap:8px;min-height:58px;min-width:0;margin:0;padding:11px 10px;border:1px solid transparent;border-radius:12px;background:transparent;box-shadow:none;transform:none;color:#cbd2ee;text-align:left}
.direction-tabs button+button{border-left:1px solid transparent}
.direction-tabs button:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff;transform:none}
.direction-tabs button[aria-selected=true]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.direction-tabs button:after{display:none}
.direction-tabs button .tab-number,.direction-tabs button[aria-selected=true] .tab-number{display:inline;margin:0;color:#e8c864;font-size:11px;letter-spacing:.02em}
.direction-tabs button strong{font-size:13px;line-height:1.3;white-space:normal;font-weight:500}
.direction-tabs .tab-action,.direction-tabs button[aria-selected=true] .tab-action{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;margin-left:auto;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent;color:#fff;font:14px var(--sans);animation:none;overflow:visible}
.direction-tabs .tab-action:after,.direction-tabs button[aria-selected=true] .tab-action:after{content:none}
.direction-tabs button[aria-selected=true] .tab-action{background:#c8102e;border-color:#c8102e}
.direction-tabs button:hover .tab-action{background:#fff;border-color:#fff;color:#10215f}
.direction-body{grid-template-columns:minmax(0,1.8fr) minmax(260px,.72fr);gap:0;padding:27px 28px 30px}
.direction-panel{padding:10px 34px 8px 4px}
.direction-panel h3{font-size:clamp(28px,2.75vw,42px);line-height:1.22;margin:14px 0 16px}
.direction-panel>p{max-width:770px;font-size:15px;line-height:1.68}
.direction-panel ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 22px}
.direction-panel li{min-height:58px;margin:0;padding:0 12px 0 0;gap:10px;background:transparent;border:0;border-right:1px solid rgba(255,255,255,.12);border-radius:0;font-size:13px;line-height:1.45}
.direction-panel li:last-child{border:0}
.direction-panel li:before{border-color:rgba(255,204,0,.4);color:#f4ce5c}
.result-note{margin:0 0 17px;padding:12px 0 12px 17px;border-left:2px solid #c8102e;border-radius:0;background:transparent}
.result-note span{margin-bottom:5px;color:#e9c877}
.result-note strong{font-size:14px;line-height:1.5}
.direction-panel .button.primary{padding:14px 21px;font-size:12px;min-height:48px;background:#ffcc00;box-shadow:0 9px 23px rgba(255,204,0,.13)}
.manager-panel{align-self:stretch;padding:20px 8px 14px 30px;border:0;border-left:1px solid rgba(255,255,255,.14);border-radius:0;background:transparent;box-shadow:none}
.manager-panel>img{width:104px;margin:0 0 24px;padding:7px;border-radius:9px}
.manager-label{font-size:10px;letter-spacing:.14em;color:#f0c86d}
.manager-panel h3{font-size:clamp(24px,2vw,31px);line-height:1.28;margin:10px 0 15px}
.manager-panel>p{font-size:14px;line-height:1.7;color:#c1c9e7}
.migration-route{margin:30px 0 0;gap:8px;font-size:9px;white-space:nowrap;color:#cbd5f4}
.migration-route i{border-color:#dce5ff65}

/* Preserve the photographic first card; color the remaining services with the flag. */
.service-card:not(.feature){position:relative;isolation:isolate;overflow:hidden;transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s,border-color .38s}
.service-card:not(.feature):hover{transform:translateY(-8px);box-shadow:0 25px 58px rgba(8,17,54,.18)}
.service-card:not(.feature):before{content:'';position:absolute;z-index:-1;inset:0 0 auto;height:4px;background:var(--card-accent);transform-origin:left;transform:scaleX(.16);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.service-card:not(.feature):hover:before{transform:scaleX(1)}
.service-card:nth-child(2){--card-accent:#c8102e;background:linear-gradient(150deg,#fff,#fff9fa);border-color:#d7dce7}
.service-card:nth-child(2) .card-top span,.service-card:nth-child(2)>a b{color:#c8102e}
.service-card:nth-child(3){--card-accent:#ffcc00;background:linear-gradient(145deg,#071a65,#10166e 80%);border-color:#1a348f}
.service-document-line{display:inline-block;align-self:flex-start;margin-top:4px;padding:6px 0;border-top:1px solid rgba(255,204,0,.55);color:#e7c861;font-size:10px;letter-spacing:.14em}
.service-card:nth-child(4){--card-accent:#071a65;background:linear-gradient(150deg,#fffdf5,#fff5d8);border-color:#e6d8a8}
.service-card:nth-child(4) .card-top span,.service-card:nth-child(4)>a b{color:#ad102b}
.service-card:nth-child(5){--card-accent:#ffcc00;background:linear-gradient(145deg,#b20d2c,#8d1029);border-color:#a92643;color:#fff}
.service-card:nth-child(5) .card-top span,.service-card:nth-child(5)>a b{color:#ffdd69}
.service-card:nth-child(5) p,.service-card:nth-child(5) li{color:#ffe4e9}
.service-card:nth-child(5) .card-top i,.service-card:nth-child(5) li,.service-card:nth-child(5)>a{border-color:rgba(255,255,255,.3)}
.service-card:nth-child(3):after,.service-card:nth-child(5):after{content:'MY';position:absolute;right:28px;bottom:40px;font:58px var(--serif);letter-spacing:-.08em;color:rgba(255,255,255,.055);pointer-events:none}
.service-card:not(.feature)>a b{transition:transform .25s}
.service-card:not(.feature):hover>a b{transform:translate(3px,-3px)}

/* Reveal each card as the visitor reaches it, with a calm and short stagger. */
.service-grid .service-card.reveal{transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1),box-shadow .35s,border-color .35s}
.service-grid .service-card:nth-child(2){transition-delay:.06s}
.service-grid .service-card:nth-child(3){transition-delay:.12s}
.service-grid .service-card:nth-child(4){transition-delay:.18s}
.service-grid .service-card:nth-child(5){transition-delay:.24s}
.service-grid .service-card.reveal.visible:hover{transform:translateY(-8px)}
.section-label.reveal,.coverage-head.reveal,.services-head.reveal,.approach-head.reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}

@media(max-width:1100px){
  .direction-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .direction-body{grid-template-columns:1fr}
  .direction-panel{padding:14px 4px 24px}
  .manager-panel{display:grid;grid-template-columns:210px 1fr;align-items:start;gap:6px 18px;padding:22px 4px 4px;border:0;border-top:1px solid rgba(255,255,255,.14)}
  .manager-panel>.brand-lockup{grid-row:1/5;align-self:start;margin:0}
  .manager-panel h3{margin:4px 0}
  .manager-panel>p{grid-column:2;margin:0}
  .migration-route{grid-column:2;max-width:420px;margin:13px 0 0}
}
@media(max-width:650px){
  .principles-stage:after{width:300px;height:300px;opacity:.45}
  .principles-coordinate{position:relative;display:block;right:auto;top:auto;grid-column:1/-1;margin:4px 12px 12px;font-size:9px}
  .direction-workspace .workspace-bar{padding:16px}
  .workspace-instruction{font-size:12px}
  .direction-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:11px}
  .direction-tabs button,.direction-tabs button[aria-selected=true]{min-height:54px;padding:10px}
  .direction-tabs button:last-child{grid-column:auto}
  .direction-tabs button strong{font-size:12px}
  .direction-body{padding:14px 16px 20px}
  .direction-panel ol{grid-template-columns:1fr;gap:9px;margin:20px 0}
  .direction-panel li{min-height:0;padding:3px 0 10px;border-right:0;border-bottom:1px solid rgba(255,255,255,.11)}
  .direction-panel li:last-child{border:0}
  .manager-panel{display:block;padding-top:22px}
  .manager-panel>.brand-lockup{margin:0 0 16px}
  .manager-panel>p{margin:12px 0}
  .migration-route{margin:20px 0 0}
  .service-grid .service-card:nth-child(n){transition-delay:0s}
}
@media(max-width:650px){
  .topbar .logo.brand-lockup{padding:0 2px}
  .topbar .brand-monogram{font-size:24px;padding-right:9px}
  .topbar .brand-wordmark strong{font-size:14px}
  .topbar .brand-wordmark small{font-size:7px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){
  .principles-stage.visible .principle{animation:none!important}
  .service-card:not(.feature):before{transform:none}
  .service-grid .service-card.reveal,.section-label.reveal,.coverage-head.reveal,.services-head.reveal,.approach-head.reveal{transition:none!important}
}
.service-card{position:relative;cursor:pointer}
.service-card>a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2}
.service-card:focus-within{outline:3px solid #ffcc00;outline-offset:4px}
.contact .contact-intro{grid-column:1;grid-row:1}
.contact .direct-contacts{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-self:start;margin-top:-30px}
.contact .direct-contacts a{display:grid;gap:7px;padding:15px 18px;border:1px solid #ffffff33;border-radius:14px;color:#fff;text-decoration:none;background:#ffffff13;transition:transform .25s,border-color .25s,box-shadow .25s}
.contact .direct-contacts a:hover{transform:translateY(-3px);border-color:#d6aa35;box-shadow:0 12px 25px #17274414}
.contact .direct-contacts span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#e9bb68}
.contact .direct-contacts strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.contact .form{grid-column:2;grid-row:1/span 2}
@media(max-width:850px){.contact .contact-intro,.contact .direct-contacts,.contact .form{grid-column:1;grid-row:auto}.contact .direct-contacts{margin-top:0}}
@media(max-width:480px){.contact .direct-contacts{grid-template-columns:1fr}}
.hero-photo{background-image:url('kuala-lumpur-hero.png')}
.panorama-one{background-image:url('malaysia-panorama.jpg')}
.service-card.feature{background:linear-gradient(rgba(7,18,32,.31),rgba(7,18,32,.86)),url('kuala-lumpur-skyline.png') center/cover}
.confidence-photo{background-image:url('kuala-lumpur-skyline.png')}