/* v1.6.5: keep the selected blueprint homepage intact while giving every
   inner route a deliberate, readable material palette. */

body[data-site-mode="blueprint"] .section-light,
body[data-site-mode="blueprint"] .section-soft {
  color: #183650;
  background-image: linear-gradient(rgba(27, 83, 118, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 83, 118, .045) 1px, transparent 1px);
  background-size: 56px 56px;
}
body[data-site-mode="blueprint"] .section-light { background-color: #eef4f6 !important; }
body[data-site-mode="blueprint"] .section-soft { background-color: #e5eff0 !important; }

.site-breadcrumb { padding-top: 72px; color: #587184; background: #e9f1f3; border-bottom: 1px solid rgba(22, 71, 96, .16); }
.site-breadcrumb > .page-width { display: flex; align-items: center; gap: 9px; min-height: 46px; overflow: hidden; font-size: 11px; white-space: nowrap; }
.site-breadcrumb a { color: #087f92; font-weight: 700; }
.site-breadcrumb span[aria-current="page"] { overflow: hidden; text-overflow: ellipsis; }
.article-connections { padding: 82px 0; }
.article-connections > .page-width { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); gap: 80px; align-items: end; }
.article-connections h2 { margin: 14px 0 15px; color: #f5fbff; font-size: clamp(36px, 4vw, 58px); line-height: 1.05; }
.article-connections p { max-width: 560px; margin: 0; color: rgba(237, 247, 251, .66); line-height: 1.8; }
.article-connection-links { display: grid; border-top: 1px solid rgba(111, 224, 211, .26); }
.article-connection-links a { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; padding: 20px 2px; border-bottom: 1px solid rgba(111, 224, 211, .26); }
.article-connection-links a span { color: #6fe0d3; font-size: 10px; font-weight: 800; }
.article-connection-links a strong { color: #f4faff !important; }
.article-connection-links a b { color: #6fe0d3; }

@media (max-width: 840px) {
  .site-breadcrumb { padding-top: 73px; }
}

@media (max-width: 820px) {
  .article-connections > .page-width { grid-template-columns: 1fr; gap: 38px; }
}

@media (max-width: 520px) {
  .site-breadcrumb > .page-width { min-height: 42px; }
  .article-connections { padding: 68px 0; }
  .article-connection-links a { grid-template-columns: 72px 1fr auto; }
}
body[data-site-mode="blueprint"] .section-light :is(h2, h3, h4, strong),
body[data-site-mode="blueprint"] .section-soft :is(h2, h3, h4, strong) { color: #16344e !important; }
body[data-site-mode="blueprint"] .section-light :is(p, li, small),
body[data-site-mode="blueprint"] .section-soft :is(p, li, small) { color: #526d80; }
body[data-site-mode="blueprint"] .section-light .section-kicker,
body[data-site-mode="blueprint"] .section-soft .section-kicker { color: #087f92 !important; }

body[data-page="/system"] .service-delivery { background-color: #e8f1f3 !important; }
body[data-page="/system"] .service-scenarios-final { background-color: #f1f4ee !important; }
body[data-page="/interactive"] .service-delivery { background-color: #e6f0ec !important; }
body[data-page="/interactive"] .service-scenarios-final { background-color: #f2eee5 !important; }
body[data-page="/animation"] .animation-brief { background-color: #f1ece4 !important; }
body[data-page="/animation"] .section-soft { background-color: #e8eef2 !important; }
body[data-page="/cases"] .cases-intro { background-color: #edf3ef !important; }
body[data-page="/cases"] #case-library { background-color: #dce9ee !important; }
body[data-page="/insights"] .insights-editorial-intro { background-color: #f2eee6 !important; }
body[data-page="/insights"] #insight-library { background-color: #e4eeee !important; }
body[data-page="/aboutus"] .section-light { background-color: #edf1f0 !important; }
body[data-page="/aboutus"] .section-soft { background-color: #e9f0eb !important; }
body[data-page^="/digitaltwin/"] .industry-brief { background-color: #e8f0f2 !important; }
body[data-page^="/digitaltwin/"] .industry-materials { background-color: #f1eee8 !important; }

/* Keep the AI page a restrained workbench rather than a pale generic section. */
body[data-page="/ai"] .ai-lab {
  position: relative;
  overflow: hidden;
  color: #e5f4f8;
  background-color: #0b2941 !important;
  background-image: linear-gradient(rgba(105, 210, 220, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 210, 220, .06) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
}
body[data-page="/ai"] .ai-lab > .page-width { position: relative; z-index: 1; }
body[data-page="/ai"] .ai-lab-particles { opacity: .36; }
body[data-page="/ai"] .ai-lab :is(h2, h3, strong) { color: #eefbfc !important; }
body[data-page="/ai"] .ai-lab :is(p, small) { color: rgba(224, 244, 246, .7) !important; }
body[data-page="/ai"] .ai-lab .section-kicker,
body[data-page="/ai"] .ai-lab .demo-badge { color: #83e0d8 !important; }
body[data-page="/ai"] .ai-lab .ai-console { border-color: rgba(122, 222, 218, .32); background: rgba(7, 34, 54, .88); box-shadow: 18px 18px 0 rgba(58, 154, 164, .14); }

/* Industry pages retain one operating structure but speak in their own colors. */
body[data-page="/digitaltwin/campus"] .distinct-hero-industry { background-color: #0d3d4c; }
body[data-page="/digitaltwin/industrial"] .distinct-hero-industry { background-color: #303945; }
body[data-page="/digitaltwin/tourism"] .distinct-hero-industry { background-color: #294b45; }
body[data-page="/digitaltwin/agriculture"] .distinct-hero-industry { background-color: #3f5037; }
body[data-page="/digitaltwin/city"] .distinct-hero-industry { background-color: #293b68; }
body[data-page="/digitaltwin/other"] .distinct-hero-industry { background-color: #44355b; }
body[data-page^="/digitaltwin/"] .distinct-hero-industry .distinct-industry-media img { filter: saturate(.82) contrast(1.05); }
body[data-page="/digitaltwin/industrial"] .distinct-hero-industry .distinct-industry-media img { filter: saturate(.55) sepia(.1) contrast(1.11); }
body[data-page="/digitaltwin/tourism"] .distinct-hero-industry .distinct-industry-media img { filter: saturate(.9) brightness(.94) contrast(1.04); }
body[data-page="/digitaltwin/agriculture"] .distinct-hero-industry .distinct-industry-media img { filter: saturate(.72) hue-rotate(8deg) contrast(1.03); }

/* Image-led evidence sections replace pale generic cards with a clearer project-reading rhythm. */
.case-highlights { position: relative; overflow: hidden; padding: 112px 0 126px; color: #eaf8ff; background: #071d38; background-image: linear-gradient(rgba(99, 209, 231, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 209, 231, .055) 1px, transparent 1px); background-size: 56px 56px; }
.case-highlights::after { position: absolute; top: -160px; right: 8%; width: 540px; height: 540px; border: 1px solid rgba(104, 221, 214, .14); border-radius: 50%; box-shadow: 0 0 0 38px rgba(104, 221, 214, .025), 0 0 0 104px rgba(104, 221, 214, .012); content: ""; pointer-events: none; }
.case-highlights > .page-width { position: relative; z-index: 1; }
.case-highlights-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); gap: 64px; align-items: end; margin-bottom: 42px; padding-bottom: 26px; border-bottom: 1px solid rgba(119, 218, 241, .22); }
.case-highlights-heading h2 { max-width: 690px; margin: 0; color: #f2fbff; font-size: clamp(38px, 4.3vw, 64px); line-height: 1.08; }
.case-highlights-heading h2 em { color: #72deda; font-style: normal; }
.case-highlights-heading > p { max-width: 440px; margin: 0; color: rgba(224, 242, 248, .68); font-size: 15px; line-height: 1.85; }
.case-highlights .section-kicker { color: #7bdceb; }
.case-highlights-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); gap: 22px; }
.case-highlight-lead, .case-highlight-stack > a { display: block; overflow: hidden; color: #effaff; border: 1px solid rgba(112, 220, 238, .25); background: rgba(8, 37, 65, .72); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.case-highlight-lead:hover, .case-highlight-lead:focus-visible, .case-highlight-stack > a:hover, .case-highlight-stack > a:focus-visible { border-color: rgba(119, 227, 221, .72); box-shadow: 0 20px 44px rgba(0, 9, 27, .32); transform: translateY(-5px); outline: none; }
.case-highlight-image { position: relative; height: 390px; overflow: hidden; background: #0c2a4b; }
.case-highlight-image::after, .case-highlight-stack > a > div::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(5, 23, 44, .84), transparent 58%); pointer-events: none; }
.case-highlight-image img, .case-highlight-stack > a > div img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.07); transition: transform .55s ease, filter .55s ease; }
.case-highlight-lead:hover img, .case-highlight-stack > a:hover img { filter: saturate(1.04) contrast(1.05); transform: scale(1.045); }
.case-highlight-image span { position: absolute; right: 18px; bottom: 17px; z-index: 1; color: #d9fbf5; font: 700 10px/1.2 Consolas, monospace; letter-spacing: .08em; }
.case-highlight-copy { padding: 28px 30px 30px; }
.case-highlight-copy small, .case-highlight-stack small { color: #79ddd7; font: 700 10px/1.2 Consolas, monospace; letter-spacing: .08em; }
.case-highlight-copy h3 { max-width: 590px; margin: 16px 0 11px; color: #f2fbff; font-size: 28px; line-height: 1.3; }
.case-highlight-copy p { max-width: 680px; margin: 0; color: rgba(226, 242, 248, .7); font-size: 14px; line-height: 1.82; }
.case-highlight-copy b, .case-highlight-stack b { display: inline-block; margin-top: 20px; color: #88e4da; font-size: 13px; }
.case-highlight-copy i { font-size: 18px; font-style: normal; }
.case-highlight-stack { display: grid; gap: 22px; }
.case-highlight-stack > a { display: grid; grid-template-columns: 190px 1fr; min-height: 196px; }
.case-highlight-stack > a > div { position: relative; overflow: hidden; background: #0c2a4b; }
.case-highlight-stack > a > div span { position: absolute; top: 15px; left: 16px; z-index: 1; color: #8ce7dc; font: 700 11px/1 Consolas, monospace; }
.case-highlight-stack section { padding: 22px 22px 20px; }
.case-highlight-stack h3 { margin: 11px 0 7px; color: #f2fbff; font-size: 19px; line-height: 1.32; }
.case-highlight-stack p { margin: 0; color: rgba(226, 242, 248, .65); font-size: 12px; line-height: 1.65; }
.case-highlight-stack b { margin-top: 12px; font-size: 11px; }

.service-evidence { position: relative; overflow: hidden; padding: 106px 0; color: #e9f8ff; background: #082440; }
.service-evidence-system { background: #072846; background-image: linear-gradient(rgba(109, 214, 235, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 214, 235, .06) 1px, transparent 1px); background-size: 54px 54px; }
.service-evidence-interactive { background: #0a393a; background-image: linear-gradient(rgba(118, 225, 212, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 225, 212, .06) 1px, transparent 1px); background-size: 54px 54px; }
.service-evidence-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); gap: 58px; align-items: end; margin-bottom: 38px; padding-bottom: 25px; border-bottom: 1px solid rgba(131, 222, 232, .22); }
.service-evidence-heading .section-kicker { color: #7fe0da; }
.service-evidence-heading h2 { max-width: 670px; margin: 0; color: #f0fbff; font-size: clamp(34px, 3.5vw, 54px); line-height: 1.14; }
.service-evidence-heading > p { margin: 0; color: rgba(224, 244, 248, .68); font-size: 14px; line-height: 1.82; }
.service-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.service-evidence-grid > a { display: grid; grid-template-columns: minmax(220px, .83fr) minmax(0, 1.17fr); min-height: 274px; overflow: hidden; color: #eafaff; border: 1px solid rgba(130, 223, 231, .26); background: rgba(6, 31, 55, .7); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.service-evidence-interactive .service-evidence-grid > a { border-color: rgba(127, 224, 210, .28); background: rgba(6, 43, 44, .72); }
.service-evidence-grid > a:hover, .service-evidence-grid > a:focus-visible { border-color: #83e5dc; box-shadow: 0 20px 42px rgba(0, 10, 23, .28); transform: translateY(-4px); outline: none; }
.service-evidence-image { position: relative; overflow: hidden; background: #0a2c4d; }
.service-evidence-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(3, 20, 37, .62), transparent 62%); }
.service-evidence-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.07); transition: transform .5s ease, filter .5s ease; }
.service-evidence-grid > a:hover .service-evidence-image img { filter: saturate(1.03) contrast(1.04); transform: scale(1.045); }
.service-evidence-image span { position: absolute; top: 15px; left: 16px; z-index: 1; color: #8ce8df; font: 700 11px/1 Consolas, monospace; }
.service-evidence-grid > a > div:last-child { padding: 26px 25px 23px; }
.service-evidence-grid small { color: #80ded6; font: 700 10px/1.2 Consolas, monospace; letter-spacing: .06em; }
.service-evidence-grid h3 { margin: 13px 0 9px; color: #effbff; font-size: 20px; line-height: 1.3; }
.service-evidence-grid p { margin: 0; color: rgba(226, 245, 249, .66); font-size: 12px; line-height: 1.75; }
.service-evidence-grid b { display: inline-block; margin-top: 15px; color: #8ce7dc; font-size: 12px; }

body[data-site-mode="blueprint"] .section-light :is(.service-card, .application-card, .mode-card, .benefit-grid article, .capability-card, .principle-grid article, .scenario-grid article, .animation-card, .case-card, .insight-card, .use-card, .ai-capability-card, .module-grid article, .deliverable-row > div, .about-facts-grid article, .about-scope-grid article, .about-capability-grid article),
body[data-site-mode="blueprint"] .section-soft :is(.service-card, .application-card, .mode-card, .benefit-grid article, .capability-card, .principle-grid article, .scenario-grid article, .animation-card, .case-card, .insight-card, .use-card, .ai-capability-card, .module-grid article, .deliverable-row > div, .about-facts-grid article, .about-scope-grid article, .about-capability-grid article) {
  color: #173651;
  border-color: rgba(28, 72, 96, .16) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 16px 40px rgba(30, 65, 86, .06);
}

/* System development is a product workbench, not a generic campaign hero. */
.distinct-hero-system { position: relative; overflow: hidden; color: #153651; background: linear-gradient(90deg, rgba(232, 241, 243, .98) 0 58%, rgba(201, 221, 229, .82) 58% 100%), #e8f1f3; }
.distinct-hero-system > .page-width,
.distinct-hero-interactive > .page-width { position: relative; z-index: 1; }
.distinct-hero-system .service-hero-particles { opacity: .34; }
.system-hero-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); gap: 74px; align-items: center; min-height: 720px; padding-top: 118px; padding-bottom: 72px; }
.system-hero-copy h1 { max-width: 630px; margin: 0; color: #16354f; font-size: clamp(48px, 5.1vw, 78px); line-height: 1.06; }
.system-hero-copy .section-kicker { color: #087f92; }
.system-hero-copy .distinct-service-type { color: #1d7185; }
.system-hero-copy .distinct-hero-lead { max-width: 600px; color: #587085; }
.system-hero-copy .button-outline { color: #173651; border-color: rgba(23, 54, 81, .32); background: rgba(255,255,255,.45); }
.system-hero-proof { display: flex; flex-wrap: wrap; gap: 0; margin-top: 42px; border-top: 1px solid rgba(23, 54, 81, .18); }
.system-hero-proof span { padding: 14px 20px 0 0; color: #60778a; font-size: 12px; font-weight: 800; }
.system-workbench { position: relative; overflow: hidden; min-height: 496px; border: 1px solid rgba(22, 78, 105, .28); background: #f8fbfb; box-shadow: 24px 24px 0 rgba(43, 117, 142, .14); }
.system-workbench-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 0 20px; color: #356277; border-bottom: 1px solid rgba(22, 78, 105, .16); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.system-workbench-bar b { color: #087f92; font-size: 9px; }
.system-workbench-media { position: absolute; inset: 52px 0 0; }
.system-workbench-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(4, 31, 54, .08), rgba(4, 31, 54, .48)); }
.system-workbench-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) contrast(1.04); }
.system-workbench-rail { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 62%; margin: 34px 0 0 30px; border: 1px solid rgba(159, 225, 237, .44); background: rgba(159, 225, 237, .26); }
.system-workbench-rail div { display: flex; gap: 11px; min-height: 57px; padding: 16px; color: #eafaff; background: rgba(8, 42, 64, .8); }
.system-workbench-rail span { color: #72d5dd; font-size: 10px; font-weight: 900; }
.system-workbench-rail strong { color: #effbfc; font-size: 13px; }
.system-workbench-note { position: absolute; right: 26px; bottom: 24px; z-index: 1; display: grid; gap: 5px; max-width: 280px; padding: 15px 17px; color: #d8f8f5; border-left: 2px solid #65d5cf; background: rgba(7, 36, 60, .84); }
.system-workbench-note span { color: #73d8d0; font-size: 10px; font-weight: 900; }
.system-workbench-note strong { color: #effeff; font-size: 13px; line-height: 1.5; }

/* Immersive work uses a cinematic media composition and plain-language labels. */
.distinct-hero-interactive { position: relative; overflow: hidden; color: #effbf8; background: #0a373a; }
.distinct-hero-interactive .service-hero-particles { opacity: .46; }
.immersive-hero-grid { display: grid; grid-template-columns: minmax(480px, 1.05fr) minmax(0, .95fr); gap: 88px; align-items: center; min-height: 720px; padding-top: 118px; padding-bottom: 72px; }
.immersive-hero-media { position: relative; min-height: 514px; padding: 26px 0 0 26px; }
.immersive-hero-media::before { position: absolute; inset: 0 42px 38px 0; border: 1px solid rgba(119, 221, 207, .36); content: ""; }
.immersive-hero-image { position: relative; z-index: 1; height: 450px; overflow: hidden; }
.immersive-hero-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(6, 36, 39, .78), transparent 58%); }
.immersive-hero-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); }
.immersive-hero-caption { position: absolute; right: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; width: 58%; padding: 17px 20px; border-left: 2px solid #69d7cb; background: rgba(7, 42, 45, .92); }
.immersive-hero-caption span { color: #85dcd4; font-size: 10px; font-weight: 900; }
.immersive-hero-caption strong { color: #effdf9; font-size: 15px; }
.immersive-hero-steps { position: absolute; bottom: 54px; left: 46px; z-index: 2; display: flex; gap: 19px; color: rgba(233, 253, 247, .72); font-size: 10px; font-weight: 800; }
.immersive-hero-copy { padding-top: 16px; }
.immersive-hero-copy .section-kicker { color: #82ded5; }
.immersive-hero-copy h1 { max-width: 610px; margin: 0; color: #f0fdf9; font-size: clamp(48px, 5.1vw, 78px); line-height: 1.06; }
.immersive-hero-copy .distinct-service-type { color: #81ddd0; }
.immersive-hero-copy .distinct-hero-lead { max-width: 570px; color: rgba(232, 252, 246, .7); }
.immersive-hero-copy .button-outline { color: #f0fdf9; border-color: rgba(197, 247, 238, .36); background: transparent; }
.immersive-hero-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; border-top: 1px solid rgba(154, 231, 220, .24); }
.immersive-hero-list div { display: flex; gap: 12px; padding: 15px 10px 0 0; }
.immersive-hero-list span { color: #7edbd0; font-size: 10px; font-weight: 900; }
.immersive-hero-list strong { color: rgba(240, 253, 249, .8); font-size: 12px; line-height: 1.45; }

/* Cases get more room for real project visuals and a lighter editorial rhythm. */
body[data-page="/cases"] .case-library-editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
body[data-page="/cases"] .case-card { display: grid; grid-template-rows: minmax(220px, 1fr) auto; min-height: 438px; overflow: hidden; color: #173651; border-color: rgba(24, 70, 96, .18) !important; background: rgba(250, 252, 252, .9) !important; box-shadow: none; }
body[data-page="/cases"] .case-image { min-height: 220px; background: #183b51; }
body[data-page="/cases"] .case-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.03); transition: transform .45s ease, filter .45s ease; }
body[data-page="/cases"] .case-card:hover .case-image img { filter: saturate(1.02) contrast(1.04); transform: scale(1.035); }
body[data-page="/cases"] .case-body { position: relative; min-height: 218px; padding: 23px 25px 26px; background: #f8fbfa; }
body[data-page="/cases"] .case-body .case-label { color: #087f92; font-size: 11px; font-weight: 900; }
body[data-page="/cases"] .case-body h3 { max-width: 90%; margin: 15px 0 10px; color: #173651 !important; font-size: 22px; line-height: 1.32; }
body[data-page="/cases"] .case-body p { max-width: 94%; margin: 0; color: #607687 !important; font-size: 14px; line-height: 1.75; }
body[data-page="/cases"] .case-body .card-arrow { position: absolute; right: 24px; bottom: 23px; color: #087f92; font-size: 22px; }
body[data-page="/cases"] .case-card:nth-child(3n + 2) .case-body { background: #edf5f3; }
body[data-page="/cases"] .case-card:nth-child(3n) .case-body { background: #f2efe8; }

@media (max-width: 1050px) {
  .system-hero-grid, .immersive-hero-grid { grid-template-columns: 1fr; gap: 46px; min-height: 0; }
  .system-workbench, .immersive-hero-media { max-width: 760px; width: 100%; }
  .immersive-hero-media { margin-left: auto; }
  .case-highlights-layout { grid-template-columns: 1fr; }
  .case-highlight-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-highlight-stack > a { grid-template-columns: 1fr; }
  .case-highlight-stack > a > div { min-height: 170px; }
  .service-evidence-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .system-hero-grid, .immersive-hero-grid { padding-top: 116px; padding-bottom: 52px; }
  .system-hero-copy h1, .immersive-hero-copy h1 { font-size: clamp(42px, 12vw, 58px); }
  .system-workbench { min-height: 410px; box-shadow: 12px 14px 0 rgba(43, 117, 142, .12); }
  .system-workbench-rail { width: calc(100% - 34px); margin: 20px 17px 0; }
  .system-workbench-note { right: 17px; bottom: 17px; max-width: 230px; }
  .immersive-hero-media { min-height: 398px; padding: 16px 0 0 16px; }
  .immersive-hero-media::before { inset: 0 22px 28px 0; }
  .immersive-hero-image { height: 345px; }
  .immersive-hero-caption { width: 72%; }
  .immersive-hero-steps { left: 30px; bottom: 42px; gap: 11px; }
  .immersive-hero-list { grid-template-columns: 1fr; gap: 0; }
  .case-highlights, .service-evidence { padding: 72px 0; }
  .case-highlights-heading, .service-evidence-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 26px; }
  .case-highlight-image { height: 270px; }
  .case-highlight-copy { padding: 22px 19px 23px; }
  .case-highlight-copy h3 { font-size: 24px; }
  .case-highlight-stack { grid-template-columns: 1fr; gap: 14px; }
  .case-highlight-stack > a { grid-template-columns: 130px 1fr; min-height: 154px; }
  .case-highlight-stack > a > div { min-height: 0; }
  .case-highlight-stack section { padding: 17px 16px; }
  .case-highlight-stack p { display: none; }
  .service-evidence-grid > a { grid-template-columns: 1fr; }
  .service-evidence-image { min-height: 210px; }
  body[data-page="/cases"] .case-library-editorial { grid-template-columns: 1fr; }
  body[data-page="/cases"] .case-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { body[data-page="/cases"] .case-image img { transition: none; } }

/* v1.7.1: resolve the archive's mixed 12-column/3-column cascade so the
   final row remains intentional at desktop widths instead of leaving a hole. */
@media (min-width: 1051px) {
  body[data-page="/cases"] .case-library-editorial .case-card {
    grid-column: auto !important;
  }
  body[data-page="/cases"] .case-library-editorial .case-card:first-child {
    grid-column: span 2 !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    grid-template-rows: 1fr;
  }
  body[data-page="/cases"] .case-library-editorial .case-card:first-child .case-image {
    height: 100%;
    min-height: 438px;
  }
  body[data-page="/cases"] .case-library-editorial .case-card:nth-last-child(2) {
    grid-column: span 2 !important;
  }
  body[data-page="/cases"] .case-library-editorial .case-card:last-child {
    grid-column: span 1 !important;
  }
}

/* Copy-length guardrails: keep long Chinese headings readable without
   turning desktop heroes into four or five stacked lines. */
.distinct-hero :is(h1, h2),
.archive-hero h1,
.experience-hero h1,
.contact-hero h1,
.article-hero h1,
.section-heading h2,
.intro-grid h2,
.cta-band h2 {
  max-width: 100%;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.system-hero-copy,
.immersive-hero-copy,
.distinct-hero-twin-copy,
.archive-hero-grid > div,
.article-hero-copy { min-width: 0; }

.system-hero-copy h1 {
  max-width: 560px;
  font-size: clamp(46px, 4.35vw, 68px);
  line-height: 1.08;
}

.immersive-hero-copy h1 {
  font-size: clamp(46px, 4.55vw, 70px);
  line-height: 1.08;
}

.distinct-ai-copy h1 {
  max-width: 690px;
  font-size: clamp(48px, 4.8vw, 70px);
  line-height: 1.06;
}

.distinct-ai-copy h1 > span { display: block; }

@media (min-width: 1051px) {
  body[data-page="/cases"] .archive-hero h1 {
    font-size: clamp(52px, 3.8vw, 60px);
    line-height: 1.08;
  }
}

@media (max-width: 1050px) {
  .system-hero-copy h1,
  .immersive-hero-copy h1 { max-width: 720px; font-size: clamp(46px, 7vw, 66px); }
}

@media (max-width: 760px) {
  .system-hero-copy h1,
  .immersive-hero-copy h1 { max-width: 100%; font-size: clamp(36px, 10.6vw, 44px); line-height: 1.14; }
  .system-hero-copy .distinct-service-type,
  .immersive-hero-copy .distinct-service-type { max-width: 100%; line-height: 1.55; }
}

body[data-page="/contact"] .contact-chat-backup {
  min-height: 0;
  padding: 4px 2px;
  color: rgba(225, 240, 255, .68) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px;
}
body[data-page="/contact"] .contact-chat-backup:hover,
body[data-page="/contact"] .contact-chat-backup:focus-visible {
  color: #79d8ff !important;
  transform: none;
}

/* v1.6.3 visual refinement: restore contrast where the shared cascade made
   readable content look disabled, and give the mobile homepage a shorter,
   more intentional path into its twin-sphere stage. */
body[data-page="/ai"] .ai-principles {
  color: #183650 !important;
  background-color: #e2efed !important;
  background-image: linear-gradient(rgba(24, 121, 126, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 121, 126, .08) 1px, transparent 1px), radial-gradient(circle at 82% 20%, rgba(78, 190, 181, .18), transparent 25%) !important;
  background-size: 42px 42px, 42px 42px, 100% 100% !important;
}
body[data-page="/ai"] .ai-principles h2 { color: #17324d !important; }
body[data-page="/ai"] .ai-principles .intro-lead { color: #526d80 !important; }
body[data-page="/ai"] .ai-principles .section-kicker { color: #087f92 !important; }

body[data-page="/system"] .system-hero-copy .button-outline {
  color: #173651 !important;
  border-color: rgba(23, 54, 81, .32) !important;
  background: rgba(255, 255, 255, .48) !important;
}
body[data-page="/system"] .system-hero-copy .button-outline:hover {
  color: #0d2b44 !important;
  border-color: rgba(23, 54, 81, .5) !important;
  background: rgba(255, 255, 255, .78) !important;
}

body[data-page="/contact"] .inquiry-form {
  color: #eaf5ff !important;
  border-color: rgba(121, 216, 255, .28) !important;
  background: #0c2b50 !important;
  box-shadow: 18px 18px 0 rgba(33, 104, 144, .12) !important;
}
body[data-page="/contact"] .inquiry-form .form-heading h2 { color: #f2f8ff !important; }
body[data-page="/contact"] .inquiry-form .form-heading p,
body[data-page="/contact"] .inquiry-form label,
body[data-page="/contact"] .inquiry-form .form-consent { color: rgba(225, 240, 255, .72) !important; }
body[data-page="/contact"] .inquiry-form input,
body[data-page="/contact"] .inquiry-form select,
body[data-page="/contact"] .inquiry-form textarea {
  color: #eaf5ff !important;
  border-color: rgba(121, 216, 255, .26) !important;
  background: rgba(3, 20, 45, .82) !important;
}
body[data-page="/contact"] .inquiry-form input::placeholder,
body[data-page="/contact"] .inquiry-form textarea::placeholder { color: rgba(225, 240, 255, .46) !important; }
body[data-page="/contact"] .inquiry-form .form-status { color: rgba(225, 240, 255, .72); }

@media (max-width: 600px) {
  body[data-site-mode="home"] .blueprint-shell,
  body[data-site-mode="blueprint"] .blueprint-shell { min-height: 980px; padding-top: 80px; }
  body[data-site-mode="home"] .blueprint-copy,
  body[data-site-mode="blueprint"] .blueprint-copy { padding-top: 27px; padding-bottom: 15px; }
  body[data-site-mode="home"] .blueprint-copy .button-row,
  body[data-site-mode="blueprint"] .blueprint-copy .button-row { margin-top: 24px; gap: 10px; }
  body[data-site-mode="home"] .blueprint-primary-actions .button,
  body[data-site-mode="blueprint"] .blueprint-primary-actions .button { min-height: 54px; padding-top: 9px; padding-bottom: 9px; }
  body[data-site-mode="home"] .blueprint-proof,
  body[data-site-mode="blueprint"] .blueprint-proof { margin-top: 25px; }
  body[data-site-mode="home"] .blueprint-map,
  body[data-site-mode="blueprint"] .blueprint-map { min-height: 340px; }
  body[data-site-mode="home"] .blueprint-stage,
  body[data-site-mode="blueprint"] .blueprint-stage { top: 70px; }
}

/* v1.6.5 inner-page differentiation: the homepage keeps its deep-blue
   blueprint language, while the reading and archive pages regain their
   own material palettes. This keeps the shared structure but removes the
   one-color wall that made every route feel like the same template. */
body[data-page="/digitaltwin"] .distinct-hero-twin {
  color: #17324d !important;
  background-color: #e8f1f4 !important;
  background-image: linear-gradient(rgba(24, 93, 126, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 93, 126, .08) 1px, transparent 1px), radial-gradient(circle at 86% 18%, rgba(77, 175, 196, .2), transparent 28%) !important;
  background-size: 52px 52px, 52px 52px, 100% 100% !important;
}
body[data-page="/digitaltwin"] .distinct-hero-twin-copy h1 {
  color: #17324d !important;
  text-shadow: none !important;
}
body[data-page="/digitaltwin"] .distinct-hero-twin-copy h1 em { color: #087f92 !important; }
body[data-page="/digitaltwin"] .distinct-hero-twin .distinct-hero-lead { color: #526d80 !important; }
body[data-page="/digitaltwin"] .distinct-hero-twin .section-kicker { color: #087f92 !important; }
body[data-page="/digitaltwin"] .distinct-hero-twin .hero-proof-row {
  color: #60778a !important;
  border-color: rgba(23, 54, 81, .2) !important;
}
body[data-page="/digitaltwin"] .distinct-hero-twin .hero-proof-row strong { color: #087f92 !important; }
body[data-page="/digitaltwin"] .distinct-hero-twin .button-outline {
  color: #173651 !important;
  border-color: rgba(23, 54, 81, .32) !important;
  background: rgba(255, 255, 255, .48) !important;
}
body[data-page="/digitaltwin"] .distinct-hero-twin-caption {
  color: #60778a !important;
  border-color: rgba(23, 54, 81, .22) !important;
}
body[data-page="/digitaltwin"] .distinct-hero-twin-caption strong { color: #087f92 !important; }

body[data-page="/cases"] .archive-hero,
body[data-page="/insights"] .archive-hero,
body[data-page="/faq"] .archive-hero {
  color: #17324d !important;
  background-color: #eef4f7 !important;
  background-image: linear-gradient(rgba(31, 105, 161, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 105, 161, .075) 1px, transparent 1px), radial-gradient(circle at 88% 18%, rgba(85, 180, 209, .14), transparent 27%) !important;
  background-size: 52px 52px, 52px 52px, 100% 100% !important;
}
body[data-page="/insights"] .archive-hero { background-color: #f1f0e9 !important; }
body[data-page="/faq"] .archive-hero { background-color: #eaf2f1 !important; }
body[data-page="/cases"] .archive-hero h1,
body[data-page="/insights"] .archive-hero h1,
body[data-page="/faq"] .archive-hero h1 {
  color: #17324d !important;
  text-shadow: none !important;
}
body[data-page="/cases"] .archive-hero h1 em { color: #3568c7 !important; }
body[data-page="/insights"] .archive-hero h1 em,
body[data-page="/faq"] .archive-hero h1 em { color: #2d8a7a !important; }
body[data-page="/cases"] .archive-hero p:not(.section-kicker),
body[data-page="/insights"] .archive-hero p:not(.section-kicker),
body[data-page="/faq"] .archive-hero p:not(.section-kicker) { color: #607186 !important; }
body[data-page="/cases"] .archive-hero .section-kicker { color: #3568c7 !important; }
body[data-page="/insights"] .archive-hero .section-kicker,
body[data-page="/faq"] .archive-hero .section-kicker { color: #2d8a7a !important; }
body[data-page="/cases"] .archive-hero .button-outline,
body[data-page="/insights"] .archive-hero .button-outline,
body[data-page="/faq"] .archive-hero .button-outline {
  color: #17324d !important;
  border-color: rgba(23, 50, 77, .28) !important;
  background: rgba(255, 255, 255, .52) !important;
}
body[data-page="/cases"] .archive-hero .button-outline:hover,
body[data-page="/insights"] .archive-hero .button-outline:hover,
body[data-page="/faq"] .archive-hero .button-outline:hover {
  color: #fff !important;
  border-color: #17324d !important;
  background: #17324d !important;
}
body[data-page="/cases"] .archive-hero-collage { border-color: rgba(23, 50, 77, .24) !important; }
body[data-page="/insights"] .insights-hero-feature {
  border-color: rgba(45, 138, 122, .26) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 18px 18px 0 rgba(45, 138, 122, .1) !important;
}
body[data-page="/insights"] .insights-hero-feature h2 { color: #173b36 !important; }
body[data-page="/insights"] .insights-hero-feature > span,
body[data-page="/insights"] .insights-hero-feature a { color: #2d8a7a !important; }
body[data-page="/insights"] .insights-hero-feature > div { background: #dbe7df !important; }
body[data-page="/faq"] .faq-hero-index {
  border-color: rgba(45, 138, 122, .26) !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 18px 18px 0 rgba(45, 138, 122, .1) !important;
}
body[data-page="/faq"] .faq-hero-index > span,
body[data-page="/faq"] .faq-hero-index strong { color: #2d8a7a !important; }
body[data-page="/faq"] .faq-hero-index b { color: #173b43 !important; }
body[data-page="/faq"] .faq-hero-index small { color: #66818a !important; }
body[data-page="/faq"] .faq-hero-index > span,
body[data-page="/faq"] .faq-hero-index > div { border-color: rgba(45, 138, 122, .16) !important; }

/* The selected homepage uses section rails as real layout elements. Keep
   their labels separated and readable instead of letting inline spans run
   into each other at the first scroll boundary. */
.blueprint-pro-page .blueprint-section-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(121, 216, 255, .22);
  color: rgba(219, 238, 255, .66);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.4;
}
.blueprint-pro-page .blueprint-section-line > span,
.blueprint-pro-page .blueprint-section-line > a { display: block; min-width: 0; }
.blueprint-pro-page .blueprint-section-line > span:first-child,
.blueprint-pro-page .blueprint-section-line > a { color: #79d8ff; }
.blueprint-pro-page .blueprint-section-line > span:last-child { color: rgba(219, 238, 255, .52); text-align: right; }
.blueprint-pro-page .blueprint-system .blueprint-section-line,
.blueprint-pro-page .blueprint-applications .blueprint-section-line,
.blueprint-pro-page .blueprint-playbook .blueprint-section-line,
.blueprint-pro-page .blueprint-contact-panel .blueprint-section-line {
  color: #536d83;
  border-bottom-color: rgba(35, 107, 223, .2);
}
.blueprint-pro-page .blueprint-system .blueprint-section-line > span:first-child,
.blueprint-pro-page .blueprint-system .blueprint-section-line > a,
.blueprint-pro-page .blueprint-applications .blueprint-section-line > span:first-child,
.blueprint-pro-page .blueprint-applications .blueprint-section-line > a,
.blueprint-pro-page .blueprint-playbook .blueprint-section-line > span:first-child,
.blueprint-pro-page .blueprint-playbook .blueprint-section-line > a,
.blueprint-pro-page .blueprint-contact-panel .blueprint-section-line > span:first-child,
.blueprint-pro-page .blueprint-contact-panel .blueprint-section-line > a { color: #236bdf; }
.blueprint-pro-page .blueprint-system .blueprint-section-line > span:last-child,
.blueprint-pro-page .blueprint-applications .blueprint-section-line > span:last-child,
.blueprint-pro-page .blueprint-playbook .blueprint-section-line > span:last-child,
.blueprint-pro-page .blueprint-contact-panel .blueprint-section-line > span:last-child { color: #688096; }

@media (max-width: 600px) {
  .blueprint-pro-page .blueprint-section-line {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 28px;
  }
  .blueprint-pro-page .blueprint-section-line > span:last-child { margin-left: auto; }
}

/* Semantic display-line rhythm.
   Hero headlines are authored as two complete ideas. Keep those phrases intact
   on desktop, then let them reflow naturally on narrow screens. */
.hero-headline .headline-line,
.display-headline .headline-line {
  display: block;
  width: fit-content;
  max-width: 100%;
}

@media (min-width: 761px) {
  .hero-headline .headline-line,
  .display-headline .headline-line { white-space: nowrap; }
}

.display-headline { text-wrap: initial; }

.blueprint-pro-page .blueprint-ai-heading h2,
.blueprint-pro-page .blueprint-architecture-copy h2 {
  font-size: clamp(44px, 4.25vw, 64px);
  line-height: 1.08;
}

body[data-page="/digitaltwin"] .hero-headline .headline-accent,
body[data-page^="/digitaltwin/"] .hero-headline .headline-accent,
body[data-page="/system"] .hero-headline .headline-accent,
body[data-page="/aboutus"] .hero-headline .headline-accent { color: #087f92; }
body[data-page="/interactive"] .hero-headline .headline-accent { color: #81ddd0; }
body[data-page="/animation"] .hero-headline .headline-accent { color: #f0a13d; }
body[data-page="/ai"] .hero-headline .headline-accent,
body[data-page="/contact"] .hero-headline .headline-accent { color: #79d8ff; }
body[data-page="/cases"] .hero-headline .headline-accent { color: #3568c7; }
body[data-page="/insights"] .hero-headline .headline-accent,
body[data-page="/faq"] .hero-headline .headline-accent { color: #2d8a7a; }
body[data-page="/experience"] .hero-headline .headline-accent { color: #7bd5cf; }

body[data-page="/digitaltwin"] .distinct-hero-twin-copy h1,
body[data-page="/system"] .system-hero-copy h1,
body[data-page="/interactive"] .immersive-hero-copy h1,
body[data-page="/aboutus"] .distinct-about-copy h1,
body[data-page="/ai"] .distinct-ai-copy h1,
body[data-page^="/digitaltwin/"] .distinct-industry-copy h1,
body[data-page="/cases"] .archive-hero h1,
body[data-page="/insights"] .archive-hero h1,
body[data-page="/faq"] .archive-hero h1,
body[data-page="/experience"] .experience-hero h1,
body[data-page="/contact"] .contact-hero-copy h1 {
  max-width: 680px;
  font-size: clamp(50px, 4.25vw, 64px);
  line-height: 1.08;
  letter-spacing: -.025em;
  overflow-wrap: normal;
  word-break: normal;
}

body[data-page="/animation"] .distinct-animation-content h1 {
  max-width: 760px;
  font-size: clamp(54px, 5vw, 72px);
  line-height: 1.06;
  letter-spacing: -.025em;
}

body[data-page^="/insights/"] .article-hero-copy h1 {
  max-width: 760px;
  font-size: clamp(42px, 3.8vw, 58px);
  line-height: 1.14;
  letter-spacing: -.018em;
  text-wrap: balance;
  overflow-wrap: normal;
}

.blueprint-pro-page .blueprint-section-head h2,
.blueprint-pro-page .blueprint-ai-heading h2,
.blueprint-pro-page .blueprint-architecture-copy h2,
.blueprint-pro-page .blueprint-contact-panel h2,
.blueprint-pro-page .blueprint-trust-panel h3 {
  max-width: 780px;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 760px) {
  .hero-headline .headline-line,
  .display-headline .headline-line {
    width: auto;
    white-space: normal;
  }
  body[data-page="/digitaltwin"] .distinct-hero-twin-copy h1,
  body[data-page="/system"] .system-hero-copy h1,
  body[data-page="/interactive"] .immersive-hero-copy h1,
  body[data-page="/aboutus"] .distinct-about-copy h1,
  body[data-page="/ai"] .distinct-ai-copy h1,
  body[data-page^="/digitaltwin/"] .distinct-industry-copy h1,
  body[data-page="/cases"] .archive-hero h1,
  body[data-page="/insights"] .archive-hero h1,
  body[data-page="/faq"] .archive-hero h1,
  body[data-page="/experience"] .experience-hero h1,
  body[data-page="/contact"] .contact-hero-copy h1,
  body[data-page="/animation"] .distinct-animation-content h1 {
    max-width: 100%;
    font-size: clamp(32px, 9.2vw, 38px);
    line-height: 1.13;
    letter-spacing: -.02em;
    overflow-wrap: normal;
    word-break: normal;
  }
  body[data-page^="/insights/"] .article-hero-copy h1 {
    font-size: clamp(34px, 9vw, 40px);
    line-height: 1.16;
  }
}
/* AR / VR / MR selection guide sits on a dark comparison rail. These scoped
   colors must win over the generic light-section heading rules in this file. */
body[data-page="/interactive"] .immersive-selection-guide > div h3,
body[data-page="/interactive"] .immersive-selection-guide article h4 {
  color: #f5ffff !important;
}
body[data-page="/interactive"] .immersive-selection-guide > div p,
body[data-page="/interactive"] .immersive-selection-guide article p {
  color: rgba(232, 248, 247, .72) !important;
}
