/* Shared multilingual layout V15. Header rules are owned exclusively by this file. */
:root { --site-content-width:1240px; --site-gutter:24px; --site-content:1240px; --header-height:89px; }
.wrap, header .nav, .guides-page, .article-layout,
main.home-page>.v5-hero .hero-service-links,
main.home-page>.scrollstory .storyitems, main.home-page>.seo-shell {
  width:min(var(--site-content-width),calc(100% - 2 * var(--site-gutter)))!important;
  max-width:var(--site-content-width)!important;
  margin-inline:auto!important;
}
header { position:sticky; top:0; z-index:100; width:100%; background:#fff; border-bottom:1px solid #e6eff2; }
header .nav { min-height:88px; padding-block:8px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
header .brand { order:0; }
header .menu { order:1; margin-left:auto; }
header .language-switch { order:2; display:flex; align-items:center; flex-shrink:0; gap:2px; padding-left:12px; border-left:1px solid var(--line); font-size:12px; line-height:1.4; }
header .language-switch a { display:grid; place-items:center; min-height:40px; padding:8px 6px; border-radius:7px; color:var(--muted); }
header .language-switch a[aria-current="page"] { background:#eaf7fa; color:#05677f; font-weight:800; }
header .language-switch a:hover { background:#f0f8f9; color:var(--navy); }
header .hamb { order:3; }
header .brand { display:flex; flex:0 0 225px; min-width:0; }
header .brandmark { display:block; width:225px; max-width:100%; height:auto; max-height:74px; object-fit:contain; }
header .menu { display:flex; align-items:center; justify-content:flex-end; gap:16px; font-size:13px; font-weight:700; min-width:0; }
header .menu>a { flex-shrink:0; white-space:nowrap; padding-block:10px; }
header .menu>a:hover { color:#007b99; }
header .menu>.btn { margin-left:36px; padding:13px 21px; }
header .menu>.btn:hover { color:#fff; }
header .hamb { display:none; background:transparent; border:1px solid #dbe7eb; border-radius:10px; color:var(--navy); width:44px; height:44px; font-size:24px; padding:0; }
header .menu .nav-icon { display:none; width:20px; height:20px; flex:0 0 20px; }
.bento { display:grid; grid-template-columns:repeat(3,4px); gap:3px; justify-content:center; align-content:center; }
.bento i { width:4px; height:4px; border-radius:1px; background:currentColor; }
header .hamb[aria-expanded="true"] .bento { display:none; }
header .hamb[aria-expanded="true"]::before, header .hamb[aria-expanded="true"]::after { content:""; position:absolute; left:11px; top:20px; width:20px; height:2px; border-radius:2px; background:currentColor; transform:rotate(45deg); }
header .hamb[aria-expanded="true"]::after { transform:rotate(-45deg); }
.back-to-top { width:48px; height:48px; padding:0; display:grid; place-items:center; }
.back-to-top .scroll-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.scroll-ring circle { fill:none; stroke-width:2.5; }
.scroll-ring .ring-track { stroke:#ffffff40; }
.scroll-ring .ring-progress { stroke:#4cdef1; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--scroll-progress,0)); }
.back-to-top .top-arrow { line-height:1; font-size:24px; }
main [id] { scroll-margin-top:calc(var(--header-height) + 20px); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid #0088a7; outline-offset:4px; }
main.home-page>.v5-hero .hero-inner { margin-left:max(var(--site-gutter),calc((100% - var(--site-content-width))/2)); }
.pagehero { padding:32px 0 36px!important; }
.pagehero h1 { font-size:clamp(32px,3.5vw,48px); }
.pagehero p { max-width:76ch!important; }
main.about-page .prose { max-width:100%!important; }
main.about-page .pagehero .about-summary,
main.about-page .prose .about-detail { max-width:100%!important; }
@media (min-width:1280px) {
  html[lang="zh-Hans-MY"] main.about-page .pagehero .about-summary { white-space:nowrap; }
  html[lang="zh-Hans-MY"] main.about-page .prose .about-detail { white-space:nowrap; font-size:12.5px; }
}
.about-page .prose>p:first-child { margin-top:0; }
.prose a, .footer a { overflow-wrap:anywhere; }
.guides-page>.seo-intro { max-width:76ch!important; }
.guides-page .seo-box { padding:25px 28px!important; border-radius:16px!important; background:#fff!important; gap:8px; }
.guides-page .seo-box h3 { font-size:19px!important; margin-bottom:6px!important; }
.guides-page .seo-box p { margin-bottom:12px!important; }
.article-body { max-width:76ch; }
.article-body>.seo-mini { font-size:13px; color:var(--muted); margin-block:0 14px; }
.article-body>h1 { font-size:clamp(28px,2.8vw,40px); line-height:1.4; margin-top:0; }
.article-body>.seo-crumb { margin-bottom:18px; }
.article-body .seo-cta h2 { color:#fff; }
.article-body .seo-cta p { color:#d8e8f4; }
.article-body section h2 { scroll-margin-top:calc(var(--header-height) + 20px); }
.article-sidebar { top:calc(var(--header-height) + 20px)!important; }
.mobile-toc { display:none; }
.design-credit { display:block; margin-top:8px; color:#b6cbd4; }
@media (max-width:1400px) and (min-width:1280px) {
  header .nav { gap:16px; }
  header .brand { flex-basis:185px; }
  header .brandmark { width:185px; }
  header .menu { gap:12px; font-size:12px; }
  header .menu>.btn { margin-left:28px; padding:11px 16px; }
}
@media (max-width:1279px) {
  :root { --header-height:77px; }
  header .nav { min-height:76px; gap:8px; }
  header .brand { flex-basis:205px; }
  header .brandmark { width:205px; }
  header .hamb { display:grid; place-items:center; position:relative; margin-left:0; flex:0 0 44px; }
  header .language-switch { margin-left:auto; border-left:0; padding-left:0; }
  header .menu { display:none; position:absolute; top:100%; left:0; right:0; max-height:calc(100dvh - 76px); overflow-y:auto; background:#fff; padding:16px var(--site-gutter) 24px; box-shadow:0 16px 25px #0829411f; flex-direction:column; align-items:stretch; gap:0; font-size:15px; }
  header .menu.open { display:flex; }
  header .menu>a { display:flex; align-items:center; gap:12px; padding:12px 10px; min-height:48px; }
  header .menu .nav-icon { display:block; color:#087b98; }
  header .menu>.btn { justify-content:center; gap:10px; margin:20px 0 0; padding:13px 20px; }
  header .menu>.btn .nav-icon { color:inherit; }
  .article-layout { grid-template-columns:1fr!important; gap:0!important; }
  .article-body { max-width:76ch; margin-inline:auto; }
  .article-sidebar { display:none; }
  .mobile-toc { display:block; margin:24px 0 32px; padding:16px 18px; background:#f5fafc; border:1px solid var(--line); border-radius:12px; }
  .mobile-toc summary { cursor:pointer; font-weight:700; min-height:28px; }
  .mobile-toc nav { margin-top:10px; }
  .mobile-toc nav a { display:block; padding:10px 0; font-size:15px; line-height:1.6; }
}
/* Latin text needs its own wrapping rhythm; retain the Chinese layout. */
html:not([lang="zh-Hans-MY"]) .hero h1 { letter-spacing:-.035em; }
html:not([lang="zh-Hans-MY"]) main.home-page>.v5-hero .hero-inner { padding-top:68px; }
html:not([lang="zh-Hans-MY"]) .v5-hero h1 { font-size:clamp(44px,4.7vw,68px); }
html:not([lang="zh-Hans-MY"]) .v5-hero .hero-lead { font-size:clamp(21px,2vw,27px); line-height:1.4; }
html:not([lang="zh-Hans-MY"]) .story-copy h3 { line-height:1.25; font-size:clamp(26px,2.4vw,33px); }
html:not([lang="zh-Hans-MY"]) .story-scene-label { font-size:clamp(34px,5vw,74px); }
html:not([lang="zh-Hans-MY"]) .quote h2 { font-size:clamp(27px,2.8vw,36px); }
html:not([lang="zh-Hans-MY"]) .article-body>h1 { line-height:1.25; }
html:not([lang="zh-Hans-MY"]) .footer .brand { flex-wrap:wrap; }
@media (max-width:690px) {
  header .language-switch { font-size:11px; gap:0; }
  header .language-switch a { padding-inline:5px; }
  html:not([lang="zh-Hans-MY"]) .v5-hero h1 { font-size:44px; }
  html:not([lang="zh-Hans-MY"]) main.home-page>.v5-hero .hero-inner { padding-top:44px; }
  html:not([lang="zh-Hans-MY"]) .hero-service-links span { font-size:12px; }
  html:not([lang="zh-Hans-MY"]) .article-body>h1 { font-size:29px; }
  html:not([lang="zh-Hans-MY"]) .prose p { font-size:16px; }
}
@media (max-width:690px) {
  :root { --site-gutter:16px; }
  header .brand { flex-basis:178px; }
  header .brandmark { width:178px; }
  .pagehero { padding:26px 0 30px!important; }
  .pagehero p { font-size:16px; line-height:1.8; }
  main:not(.home-page)>.section { padding:32px 0!important; }
  .article-body>h1 { font-size:28px; line-height:1.45; }
  .article-body>.seo-intro { padding:14px 16px; font-size:16px; line-height:1.85; }
  .guides-page>.seo-intro { font-size:16px!important; }
  .floating { right:16px; bottom:16px; padding:10px 14px; font-size:12px; }
  .back-to-top { bottom:78px; }
  .footer { padding-bottom:90px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { scroll-behavior:auto!important; }
}
@media (max-width:380px) {
  header .nav { gap:6px; }
  header .brand { flex-basis:128px; }
  header .brandmark { width:128px; }
}

/* V16 generated imagery: actual image elements, responsive sources, live text. */
main.home-page>.v5-hero .hero-photo { background:#153849; opacity:1; }
.home-page .hero-asset { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.home-page .hero-service-links img { object-position:center 40%; }
.home-page .cardimg { height:auto; aspect-ratio:16/9; background:#173c4c; isolation:isolate; }
.home-page .service-photo { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center 50%; z-index:0; }
.home-page .cardimg:after { z-index:1; background:linear-gradient(0deg,#041d31e8,transparent 75%); }
.home-page .cardimg strong { position:relative; z-index:2; }
.home-page .visualpanel { background:#163748; }
.home-page .why-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.home-page .visualpanel:after { z-index:1; }
.home-page .visualpanel span { z-index:2; }
main.home-page>.scrollstory .story-scene { background-image:linear-gradient(0deg,#06213b88,#06213b18),url('/assets/home-v16.webp')!important; }
main.home-page>.scrollstory .story-scene.scene-home { background-image:linear-gradient(0deg,#06213b88,#06213b18),url('/assets/home-v16.webp')!important; }
main.home-page>.scrollstory .story-scene.scene-stay { background-image:linear-gradient(0deg,#06213b88,#06213b18),url('/assets/airbnb-v16.webp')!important; }
main.home-page>.scrollstory .story-scene.scene-work { background-image:linear-gradient(0deg,#06213b88,#06213b18),url('/assets/office-v16.webp')!important; }
main.home-page>.scrollstory .story-scene.scene-industry { background-image:linear-gradient(0deg,#06213b88,#06213b18),url('/assets/industrial-v16.webp')!important; }
@media (max-width:850px) {
  .home-page .hero-asset { object-position:78% center; }
  .home-page .v5-hero:before { background:linear-gradient(90deg,#041e37f0 0%,#041e37ce 55%,#041e3760 100%); }
}

/* V16.1: restrained logo sheen and an inviting hero CTA. */
header .brand { position:relative; overflow:hidden; isolation:isolate; }
header .brand::after {
  content:""; position:absolute; z-index:1; pointer-events:none;
  top:-20%; bottom:-20%; left:0; width:35%;
  background:linear-gradient(90deg,transparent,#ffffffb8,transparent);
  transform:translateX(-180%) skewX(-18deg); opacity:0;
  animation:logo-sheen 8s ease-in-out 1s infinite;
}
@keyframes logo-sheen {
  0% { transform:translateX(-180%) skewX(-18deg); opacity:0; }
  3% { opacity:.85; }
  18% { transform:translateX(400%) skewX(-18deg); opacity:.85; }
  22%,100% { transform:translateX(400%) skewX(-18deg); opacity:0; }
}
.home-page .hero-cta-float { animation:hero-cta-float 3.2s ease-in-out infinite; }
@keyframes hero-cta-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
header .brand:hover::after, header .brand:focus-visible::after,
.home-page .hero-cta-float:hover, .home-page .hero-cta-float:focus-visible {
  animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce) {
  header .brand::after { animation:none!important; opacity:0; }
  .home-page .hero-cta-float { animation:none!important; transform:none!important; }
}