/* Shared responsive enhancements. Main templates and content remain identical at every width. Legacy selectors are retained while their owning modules migrate. */
.h5-only,.responsive-title-background {
  display: none
}
/* Navigation uses the same 1100px transition as its behavior adapters. */
@media (max-width:1100px) {
  html body #siteHeader { --responsive-header-height:76px; --responsive-logo-width:142px; --responsive-header-gutter:24px; height:var(--responsive-header-height); min-height:var(--responsive-header-height); }
  html body #siteHeader .topbar { width:100%!important; height:var(--responsive-header-height); min-height:var(--responsive-header-height); padding:0 var(--responsive-header-gutter)!important; margin:0; gap:8px; }
  html body #siteHeader .brand { display:flex; align-items:center; width:var(--responsive-logo-width); min-width:0; flex:0 0 var(--responsive-logo-width); margin:0; padding:0; line-height:0; }
  html body #siteHeader .brand img { display:block; width:100%; height:auto; max-height:none; margin:0; object-fit:contain; object-position:left center; }
  html body #siteHeader .header-actions { gap:8px; }
  html body #siteHeader #mobileDrawer { --mobile-menu-top:var(--responsive-header-height); }

  html body .site-header .main-nav, html body .site-header .cloud-link, html body .site-header .header-cta { display:none; }
  html body .site-header .topbar { width:100%; padding-inline:24px; gap:12px; }
  html body .site-header .header-actions { margin-left:auto; }
  html body .site-header .menu-btn { display:block; width:44px; height:44px; }
  html body .site-header .mobile-drawer.open { display:block; transform:none; }
  html body .site-header .mobile-drawer { top:76px; max-height:calc(100dvh - 76px); overflow-y:auto; }
  html body .site-header .mobile-drawer a { white-space:normal; }
  /* One light palette for the complete drawer, including expanded groups. */
  html body #mobileDrawer { --mobile-menu-top:76px; position:fixed; inset:var(--mobile-menu-top) 0 0; height:calc(100dvh - var(--mobile-menu-top)); max-height:calc(100dvh - var(--mobile-menu-top)); padding:20px 24px max(28px,env(safe-area-inset-bottom)); background:#fff; color:#18334f; color-scheme:light; }
  html body #mobileDrawer :is(a,summary,h3) { color:#18334f; }
  html body #mobileDrawer .mobile-children { background:#f1f7fd; border-radius:10px; }
  html body #mobileDrawer :is(.mobile-group,.mobile-main,.mobile-solution-industry,.mobile-solution-common) { border-color:#d6e2ef; }
  html body #mobileDrawer .mobile-solution-links h4 { color:#48617c; }
  html body #mobileDrawer .mobile-solution-industry[open] > summary { color:#095fc7; }
  html body #mobileDrawer a:is(:hover,:focus-visible,[aria-current="page"]) { color:#095fc7; background:#e7f1ff; border-radius:6px; }
  /* Extend the link background around its label without moving the text inset. */
  html body #mobileDrawer .mobile-solution-links a { padding-inline:10px; margin-inline:-10px; min-width:0; overflow-wrap:anywhere; }
  html body #mobileDrawer .mobile-solution-common .mobile-solution-links { column-gap:28px; }
  html body #mobileDrawer :is(a,summary):focus-visible { outline:2px solid #095fc7; outline-offset:2px; }
  html body #mobileDrawer summary::marker { color:#48617c; }
  html body #mobileDrawer .solution-menu-badge { color:#bd3440; }
}
@media (max-width:767px) {
  html body #siteHeader { --responsive-header-height:60px; --responsive-logo-width:116px; --responsive-header-gutter:20px; }
}
@media(max-width:767px){
:root {
  --h5-ink: #102d4e;
  --h5-muted: #4d6885;
  --h5-primary: #086ddf;
  --h5-tint: #eff7ff;
  --h5-line: #dde8f4;
  --h5-gutter: 20px;
  scroll-padding-top: 76px
}
html body {
  font-size: 16px;
  line-height: 1.65;
  background: #fff;
  color: var(--h5-ink)
}
html body main {
  padding-top: 60px
}
html body main img,html body main video {
  max-width: 100%
}
html body .container,html body .pd-shell,html body .iot-shell,html body .se-shell {
  width: calc(100% - var(--h5-gutter)*2);
  max-width: none;
  margin-inline: auto
}
html body main h1 {
  overflow-wrap: anywhere
}
html body main h2 {
  letter-spacing: 0;
  overflow-wrap: anywhere
}
html body main h3 {
  overflow-wrap: anywhere
}
html body main p {
  max-width: 100%;
  text-wrap: pretty
}
html body main small,html body main figcaption {
  font-size: 14px;
  line-height: 1.55
}
html body main section {
  scroll-margin-top: 76px
}
html body main [hidden] {
  display: none!important
}
html body .site-header {
  height: 60px;
  min-height: 60px;
  background: #fff!important;
  border-bottom: 1px solid var(--h5-line);
  color: var(--h5-ink)
}
html body .site-header .topbar {
  height: 60px;
  min-height: 60px;
  padding: 0 var(--h5-gutter);
  gap: 8px
}
html body .site-header .brand {
  width: 116px;
  min-width: 0;
  flex: 0 0 116px
}
html body .site-header .brand img {
  content: url('/assets/home/h5-logo.png');
  width: 116px;
  height: auto
}
html body .site-header .main-nav,html body .site-header .cloud-link,html body .site-header .header-cta {
  display: none
}
html body .site-header .header-actions {
  margin-left: auto;
  gap: 8px
}
html body .site-header .language-switch {
  height: 44px;
  min-width: 44px;
  padding: 0 8px;
  border-color: var(--h5-line);
  color: var(--h5-ink);
  background: white
}
html body .site-header .menu-btn {
  display: flex;
  width: 44px;
  height: 44px;
  background: var(--h5-tint);
  border: 1px solid var(--h5-line);
  border-radius: 6px
}
html body .site-header .menu-btn span {
  background: var(--h5-ink)
}
html body .mobile-drawer {
  top: 60px;
  max-height: calc(100dvh - 60px);
  background: white;
  color: var(--h5-ink);
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain
}
html body .mobile-drawer a,html body .mobile-drawer summary {
  min-height: 44px;
  padding: 10px 0;
  color: var(--h5-ink);
  font-size: 16px;
  white-space: normal
}
html body .mobile-main {
  border-bottom: 1px solid var(--h5-line)
}
html body .mobile-children {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--h5-tint);
  padding: 8px 16px
}
html body .floating-contact,html body .contact-dock,html body .float-contact,html body #contactDock {
  display: none!important
}
.h5-only {
  display: block
}
.responsive-title-background {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  pointer-events: none
}
.responsive-title-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center
}
/* A single photographic title region, never a second full-height image block. */
html body :is(.pd-hero,.iot-hero,.page-hero,.se-hero,.solution-detail-hero,.case-pilot-hero) {
  position: relative;
  isolation: isolate;
  min-height: 280px;
  height: auto!important;
  padding: 36px 0!important;
  background: #061d38!important;
  color: white;
  overflow: hidden
}
html body :is(.pd-hero,.iot-hero,.page-hero,.se-hero,.solution-detail-hero,.case-pilot-hero)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(6,29,56,.95),rgba(6,29,56,.78) 54%,rgba(6,29,56,.25))
}
html body :is(.pd-hero-grid,.iot-hero-grid,.v12-page-hero-layout,.se-hero-content,.case-pilot-hero-grid) {
  display: block;
  position: relative;
  z-index: 2;
  min-height: 0;
  height: auto;
  gap: 0
}
html body :is(.pd-hero-copy,.iot-hero-copy,.page-hero-content,.se-hero-content,.case-pilot-hero-copy) {
  position: relative;
  z-index: 2;
  padding: 0;
  width: auto;
  max-width: none;
  transform: none;
  text-align: left
}
html body :is(.pd-hero,.iot-hero,.page-hero,.se-hero,.solution-detail-hero,.case-pilot-hero) :is(h1,h2,p,small,.eyebrow) {
  color: white!important;
  text-align: left;
  max-width: 100%;
  margin-top: 0
}
html body :is(.pd-hero,.iot-hero,.page-hero,.se-hero,.case-pilot-hero) h1 {
  margin-bottom: 12px
}
html body :is(.pd-hero,.iot-hero) h2 {
  margin: 0 0 12px
}
html body :is(.pd-hero,.iot-hero,.page-hero,.se-hero,.case-pilot-hero) p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 20px;
  opacity: 1
}
html body .pd-hero-actions,html body .iot-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px
}
html body :is(.pd-button,.iot-button,.page-hero-action,.se-hero-cta,.btn-primary) {
  min-height: 48px;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 16px;
  white-space: normal
}
html body :is(.pd-hero,.iot-hero) :is(.product-hero-mockup,.pd-hero-video,.iot-abstract-hero) {
  display: none
}
html body .v12-page-hero-media {
  margin: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  box-shadow: none
}
html body .v12-page-hero-media :is(picture,img) {
  display: block
}
html body .v12-page-hero-media video,html body .v12-page-hero-media figcaption {
  display: none
}
html body .page-hero:has(.responsive-title-background) .v12-page-hero-media {
  display: none
}
html body .se-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}
html body .case-pilot-hero .case-pilot-hero-media {
  display: none
}
html body :is(.section,.pd-section,.iot-section,.se-section) {
  margin: 0
}
html body :is(.section-heading-inline,.section-head,.pd-section-head,.se-section-head) {
  display: block;
  margin-bottom: 20px
}
html body :is(.section-heading-inline,.section-head,.pd-section-head,.se-section-head) p {
  text-align: left;
  margin-top: 12px
}
html body :is(.pd-feature-grid,.pd-value-grid,.pd-advantage-grid,.pd-audience-grid,.pd-highlight-grid,.pd-architecture-grid,.iot-feature-grid,.se-feature-grid,.se-capability-grid,.se-process-grid,.about-profile-grid,.about-team-layout,.about-business-grid,.star-v2-value-grid,.star-v2-enablement-grid,.star-v2-type-grid) {
  display: grid;
  grid-template-columns: minmax(0,1fr)!important;
  gap: 16px
}
html body main [class*='grid']>* {
  min-width: 0
}
html body :is(.pd-feature-card,.pd-value-card,.pd-advantage-card,.pd-audience-card,.iot-feature-card,.se-capability-card,.star-v2-enablement-card,.star-v2-type-card) {
  padding: 20px;
  border-radius: 8px;
  box-shadow: none
}
html body main :is(.pd-feature-row,.pd-highlight-row,.pd-showcase-row,.se-feature-row,.se-story-row,.se-process-row) {
  display: flex;
  flex-direction: column;
  gap: 20px
}
html body main :is(.pd-feature-row,.pd-highlight-row,.pd-showcase-row,.se-feature-row,.se-story-row,.se-process-row)>* {
  width: 100%;
  max-width: 100%;
  flex: auto
}
/* Catalogues: recognizable thumbnails and complete, wrapping labels. */
html body :is(.catalog-grid,.solution-list,.case-grid) {
  display: grid;
  grid-template-columns: minmax(0,1fr)!important;
  gap: 8px
}
html body :is(.catalog-card,.solution-list-card,.case-card) {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  align-items: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--h5-line);
  border-radius: 8px;
  background: white;
  box-shadow: none;
  min-height: 88px;
  overflow: hidden
}
html body :is(.catalog-image,.solution-list-media,.case-card-media) {
  width: 84px;
  height: 64px;
  aspect-ratio: 84/64;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  padding: 0
}
html body :is(.catalog-image,.solution-list-media,.case-card-media) :is(picture,img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}
html body :is(.catalog-image,.solution-list-media,.case-card-media)>span,html body .catalog-image .progress-status-legend {
  display: none
}
html body :is(.catalog-body,.solution-list-copy,.case-card>div) {
  padding: 0;
  min-width: 0
}
html body :is(.catalog-body,.solution-list-copy,.case-card) h3 {
  line-height: 1.5;
  white-space: normal;
  margin: 0 0 6px;
  -webkit-line-clamp: unset;
  overflow: visible
}
html body :is(.catalog-body,.solution-list-copy,.case-card) p {
  line-height: 1.6;
  margin: 0 0 8px;
  -webkit-line-clamp: unset;
  overflow: visible;
  display: block
}
html body :is(.catalog-body,.solution-list-copy)>small {
  font-size: 14px
}
html body .solution-list-tags {
  display: none
}
html body :is(.catalog-body,.solution-list-copy,.case-card)>b {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--h5-primary)
}
.h5-filter-label {
  display: block;
  font-size: 14px;
  margin: 0 0 8px
}
.h5-catalog-select {
  width: 100%;
  height: auto;
  min-height: 48px;
  font-size: 16px;
  color: var(--h5-ink);
  border: 1px solid var(--h5-line);
  border-radius: 6px;
  background: white;
  padding: 10px 12px;
  margin: 0 0 20px
}
.h5-catalog-more {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  border: 1px solid var(--h5-primary);
  border-radius: 6px;
  background: white;
  color: var(--h5-primary);
  font: inherit
}
.h5-catalog-count {
  font-size: 14px;
  color: var(--h5-muted);
  margin: 12px 0
}
html body .h5-filtered :is(.solution-catalog-nav,#caseFilters) {
  display: none
}
html body .h5-filtered .case-toolbar {
  position: static;
  top: auto;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent
}
/* Progressive disclosure retains all original contents and restores desktop DOM. */
.h5-fold {
  border: 1px solid var(--h5-line);
  border-radius: 8px;
  background: #fff;
  margin: 0 0 12px;
  color: var(--h5-ink)
}
.h5-fold>summary {
  padding: 16px;
  min-height: 56px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.h5-fold>summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: var(--h5-primary)
}
.h5-fold[open]>summary::after {
  content: '−'
}
.h5-fold>.h5-fold-body {
  padding: 0 16px 16px
}
.h5-fold-body>h3 {
  display: none
}
html body .about-hero-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 20px 0 0
}
html body .about-hero-value {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: white
}
html body .about-hero-value figure {
  display: none
}
html body .about-hero-value>div {
  padding: 0
}
html body .about-hero-value p {
  font-size: 14px!important;
  margin: 4px 0 10px!important
}
html body .about-history-section {
  background: #eff7ff;
  color: var(--h5-ink)
}
html body .about-history-landscape {
  display: none
}
html body .about-history-timeline {
  display: block;
  margin-top: 24px
}
html body .about-history-item {
  width: 100%;
  border-left: 2px solid #b6d7f3;
  padding: 0 0 28px 20px;
  min-height: 0
}
html body .about-history-item :is(time,h3,li) {
  color: var(--h5-ink)
}
html body .about-history-item time {
  font-size: 32px
}
html body .about-history-item h3 {
  max-width: none;
  margin: 10px 0
}
html body .about-history-item ul {
  font-size: 16px
}
html body .history-phrase,html body .star-nowrap {
  white-space: normal
}
html body .star-v2-collaboration-stage {
  display: block;
  width: calc(100% - 40px);
  margin-inline: auto;
  height: auto;
  min-height: 0
}
html body .star-v2-collaboration-panel {
  height: auto;
  min-height: 240px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  display: block
}
html body .star-v2-collaboration-panel :is(p,ul) {
  opacity: 1;
  transform: none;
  max-height: none
}
.h5-section-nav {
  display: flex;
  gap: 0;
  position: sticky;
  top: 60px;
  z-index: 5;
  background: white;
  border-bottom: 1px solid var(--h5-line);
  padding: 0 12px
}
.h5-section-nav a {
  flex: 1;
  padding: 14px 4px;
  min-height: 48px;
  text-align: center;
  font-size: 14px;
  color: var(--h5-ink)
}
.h5-content-section {
  padding: 28px 20px!important;
  background: white
}
.h5-content-section.h5-tint {
  background: var(--h5-tint)
}
.h5-content-section h2 {
  margin: 0 0 20px
}
.h5-content-section h3 {
  margin: 20px 0 10px
}
.h5-content-section figure {
  margin: 16px 0 20px
}
.h5-content-section figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px
}
.h5-content-section figcaption {
  margin: 8px 0;
  color: var(--h5-muted)
}
.h5-layer-stack {
  display: grid;
  gap: 8px
}
.h5-layer-stack article {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--h5-line);
  background: var(--h5-tint);
  border-radius: 8px
}
.h5-layer-stack small {
  color: var(--h5-primary)
}
.h5-layer-stack h3,.h5-layer-stack p {
  margin: 0
}
.h5-layer-stack p {
  font-size: 14px!important
}
.h5-engine-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px
}
.h5-engine-pair h3 {
  font-size: 16px
}
.h5-engine-pair p {
  font-size: 14px!important
}
.h5-source-types {
  flex-wrap: wrap;
  gap: 8px
}
.h5-source-types span,.h5-source-types button {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--h5-line);
  background: white;
  border-radius: 6px;
  color: var(--h5-ink)
}
.h5-source-types button[aria-pressed=true] {
  background: var(--h5-primary);
  color: white
}
.h5-content-section details {
  background: white;
  border: 1px solid var(--h5-line);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 0 16px
}
.h5-content-section summary {
  min-height: 52px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer
}
.h5-content-section details p {
  margin: 0 0 16px
}
.h5-content-section details a {
  display: block;
  min-height: 44px;
  padding: 10px 0;
  color: var(--h5-primary)
}
.h5-content-section .h5-note {
  font-size: 14px;
  color: var(--h5-muted)
}
.h5-demo-player {
  margin-top: 24px
}
.h5-demo-player label {
  display: block;
  margin-bottom: 8px
}
.h5-demo-player select {
  width: 100%;
  min-height: 48px;
  padding: 10px;
  font: inherit;
  background: white;
  border: 1px solid var(--h5-line);
  border-radius: 6px;
  color: var(--h5-ink)
}
.h5-video-stage {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 16/9;
  background: #061d38;
  border-radius: 8px;
  overflow: hidden
}
.h5-video-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain
}
.h5-video-stage button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  min-height: 48px;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: #086ddf;
  color: white;
  font: inherit;
  white-space: nowrap
}
.h5-connection,.h5-steps {
  padding-left: 24px
}
.h5-connection li,.h5-steps li {
  margin: 0 0 12px
}
.h5-strong-link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 16px;
  min-height: 48px;
  border-radius: 6px;
  background: var(--h5-primary);
  color: white;
  margin-top: 20px
}
/* Contact keeps original required fields and mail client workflow. */
html body .contact-expert-hero {
  min-height: 0
}
html body .contact-expert-background {
  height: 260px;
  inset: 0 0 auto
}
.contact-expert-overlay {
  display: none
}
html body .contact-expert-inner {
  width: 100%
}
html body .contact-expert-heading {
  position: relative;
  padding: 36px 20px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(90deg,rgba(6,29,56,.95),rgba(6,29,56,.4));
  color: white
}
html body .contact-expert-heading h1 {
  line-height: 1.3;
  color: white
}
html body .contact-inquiry-card {
  border: 1px solid var(--h5-line);
  border-radius: 8px;
  background: white;
  color: var(--h5-ink)
}
html body .contact-form-field {
  display: block;
  width: 100%;
  margin: 0 0 16px
}
html body .contact-form-field :is(input,select,textarea) {
  font-size: 16px;
  min-height: 48px;
  width: 100%;
  padding: 10px 12px;
  color: var(--h5-ink)
}
html body .contact-form-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 0
}
html body .contact-form-submit {
  width: 100%;
  min-height: 48px;
  background: var(--h5-primary);
  font-size: 16px;
  border-radius: 6px
}
html body .contact-service-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}
html body .contact-service-options label {
  min-height: 44px;
  font-size: 14px
}
html body .contact-office-stage {
  display: flex;
  flex-direction: column;
  height: auto
}
html body .contact-office-map {
  height: 220px;
  width: 100%;
  object-fit: cover
}
html body .contact-office-card {
  position: static;
  width: auto;
  margin: 20px;
  padding: 20px;
  background: white;
  transform: none;
  border: 1px solid var(--h5-line);
  border-radius: 8px;
  box-shadow: none
}
html body .contact-privacy-check {
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  min-height: 44px
}
html body .contact-privacy-check input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 3px
}
.h5-bottom-consult {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.98);
  border-top: 1px solid var(--h5-line)
}
.h5-bottom-consult a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--h5-primary);
  color: white;
  border-radius: 6px;
  font-size: 16px
}
html body .site-footer {
  padding-bottom: 100px
}
html body .site-footer [class*='grid'] {
  grid-template-columns: 1fr 1fr
}
html body :focus-visible {
  outline: 3px solid #086ddf;
  outline-offset: 3px
}
@media(max-width:359px){
:root {
  --h5-gutter: 16px
}
.h5-content-section {
  padding-inline: 16px!important
}
.h5-engine-pair {
  grid-template-columns: 1fr
}
.h5-content-section h2 {
  font-size: 24px
}}
@media(prefers-reduced-motion:reduce){
html body * {
  scroll-behavior: auto!important;
  animation: none!important;
  transition: none!important
}}
.v12-page-hero-media {
  z-index: 0!important
}
html body .case-card {
  display: block
}
html body .case-card>a {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  gap: 12px;
  padding: 0;
  height: auto
}
html body .case-card>a>div:last-child {
  padding: 0;
  min-width: 0
}
html body .case-card a h3 {
  font-size: 16px;
  line-height: 1.5
}
html body .case-card a p {
  font-size: 14px;
  line-height: 1.6
}
html body .case-card a b {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px
}
html body .ss-main {
  padding-top: 60px
}
html body .ss-hero {
  min-height: 280px;
  height: auto;
  padding: 36px 0;
  background: #061d38
}
html body .ss-container {
  width: calc(100% - 40px)
}
html body .ss-hero-inner {
  display: block;
  min-height: 0;
  padding: 0
}
html body .ss-hero-copy {
  width: auto;
  max-width: none
}
html body .ss-hero h1 {
  font-size: 32px;
  line-height: 1.25
}
html body .ss-hero h2 {
  font-size: 18px
}
html body .ss-hero p {
  font-size: 16px
}
html body .ss-hero-shade {
  background: linear-gradient(90deg,rgba(6,29,56,.95),rgba(6,29,56,.78) 54%,rgba(6,29,56,.25))
}
html body .ss-hero-media :is(picture,img) {
  width: 100%;
  height: 100%;
  object-fit: cover
}
html body .ss-hero-actions a {
  min-height: 48px;
  font-size: 16px
}
html body :is(.se-split,.se-shell.se-row,.se-workflow-steps,.pd-layer-grid,.pd-process,.pd-architecture-stages,.pd-product-advantages-grid,.pd-progress-feature-grid,.pd-feature-layout,.case-v027-overview-grid,.case-project-architecture,.case-v027-highlight) {
  display: grid;
  grid-template-columns: 1fr!important;
  gap: 20px
}
html body .se-section>.se-shell {
  display: flex;
  flex-direction: column;
  gap: 20px
}
html body .se-section>.se-shell>* {
  width: 100%;
  max-width: 100%
}
html body :is(.case-v027-overview,.case-v027-highlights) {
  padding: 32px 0
}
html body .case-v027-highlight-media {
  margin: 0
}
html body .case-v027-highlight-copy {
  padding: 0
}
html body .case-v027-highlight-list {
  gap: 24px
}
html body .case-breadcrumb {
  position: relative;
  z-index: 3;
  white-space: normal;
  margin: 0 0 16px
}
html body .pd-section-heading {
  text-align: left
}
html body .pd-section-heading p {
  font-size: 16px;
  text-align: left
}
.h5-menu summary {
  min-height: 48px;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600
}
.h5-menu details a {
  padding-left: 16px;
  font-size: 16px
}
html body .site-header .brand img {
  filter: none!important
}
html body .site-header .topbar {
  width: 100%!important;
  padding-inline: 20px!important
}
html body .floating-contact-dock {
  display: none!important
}
html body main .reveal {
  opacity: 1!important;
  transform: none!important
}
html body :is(.pd-hero,.iot-hero,.page-hero,.se-hero,.case-pilot-hero) {
  display: block!important;
  min-height: 280px!important;
  max-height: none!important
}
html body :is(.pd-hero-grid,.iot-hero-grid,.v12-page-hero-layout,.case-pilot-hero-grid) {
  min-height: 0!important;
  height: auto!important;
  padding: 0!important;
  display: block!important
}
html body .v12-page-hero-layout {
  position: static!important;
  z-index: auto!important
}
html body .v12-page-hero-media {
  position: absolute!important;
  inset: 0!important;
  height: 100%!important;
  max-height: none!important;
  aspect-ratio: auto!important;
  width: 100%!important;
  display: block!important;
  z-index: 0!important;
  transform: none!important
}
html body .v12-page-hero-media :is(picture,img) {
  width: 100%!important;
  height: 100%!important;
  object-fit: cover!important;
  transform: none!important
}
html body .page-hero-content {
  position: relative!important;
  z-index: 3!important;
  padding: 0!important;
  opacity: 1!important;
  transform: none!important
}
html body :is(.pd-hero-grid,.iot-hero-grid)>div:first-child {
  padding: 0!important
}
html body .pd-hero :is(.pd-hero-visual,.pd-hero-video),html body .iot-abstract-hero {
  display: none!important
}
html body .catalog-card,html body .solution-list-card {
  grid-template-columns: 84px minmax(0,1fr)!important;
  min-height: 88px!important;
  padding: 12px!important;
  gap: 12px!important
}
html body .solution-list-card>figure {
  grid-column:1;
  grid-row:1;
  width: 84px!important;
  height: 64px!important;
  min-height: 0!important;
  margin: 0!important;
  aspect-ratio: 84/64!important;
  border-radius: 6px!important;
  overflow: hidden
}
html body .solution-list-card>figure :is(picture,img) {
  display: block;
  width: 100%!important;
  height: 100%!important;
  object-fit: cover!important;
  margin:0!important
}
html body .solution-list-card>figure figcaption {
  display: none!important
}
html body .solution-list-copy {
  grid-column:2;
  grid-row:1;
  min-width:0;
  padding: 0!important
}
html body .solution-list-copy :is(h3,p) {
  margin-top: 0!important
}
html body .solution-list-copy p {
  font-size: 14px!important;
  line-height: 1.6!important
}
html body .h5-filtered :is(.solution-catalog-nav,.solution-catalog-tabs,#caseFilters) {
  display: none!important
}
html body .catalog-card :is(h3,p),html body .case-card a :is(h3,p) {
  min-height: 0!important;
  max-height: none!important
}
html body .contact-expert-hero {
  background: #eff7ff!important
}
html body .contact-expert-inner {
  max-width: none!important;
  padding: 0!important
}
html body .contact-office-card :is(h3,a,span) {
  color: var(--h5-ink)!important
}
html body .site-footer {
  padding: 0 20px 88px!important;
  background: #061d38
}
html body .footer-action {
  display: block;
  padding: 28px 0!important;
  margin: 0 auto!important
}
.footer-action h2 {
  font-size: 24px!important;
  line-height: 1.4!important
}
.footer-action p {
  font-size: 16px!important;
  line-height: 1.7!important
}
.footer-action-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  font-size: 16px!important
}
html body .footer-main {
  display: block!important;
  padding: 20px 0!important
}
.footer-main>.footer-nav-column,.footer-main>.footer-contact-card {
  display: none!important
}
.footer-social {
  max-width: 280px;
  margin: 0 auto
}
.footer-qr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}
.footer-legal {
  padding: 20px 0!important;
  display: block;
  font-size: 14px!important
}
.footer-legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center
}
html body .pd-cta {
  display: none!important
}
html body .contact-form-actions,.contact-form-field {
  max-width: 100%
}
.contact-form-submit {
  max-width: 100%
}
.contact-form-actions {
  width: auto!important
}
html body main h1 {
  font-size: 32px!important;
  line-height: 1.25!important;
  letter-spacing: 0!important
}
html body main h2 {
  font-size: 24px!important;
  line-height: 1.4!important
}
html body main h3 {
  font-size: 18px!important;
  line-height: 1.5!important
}
html body main p {
  font-size: 16px!important;
  line-height: 1.7!important
}
html body :is(.pd-hero,.iot-hero) h2 {
  font-size: 18px!important
}
html body :is(.pd-hero,.iot-hero,.page-hero,.se-hero,.case-pilot-hero)::after {
  display: block!important;
  opacity: 1!important;
  content: ''!important;
  inset: 0!important;
  z-index: 1!important;
  background: linear-gradient(90deg,rgba(6,29,56,.95),rgba(6,29,56,.78) 54%,rgba(6,29,56,.25))!important
}
html body :is(.section,.pd-section,.iot-section,.se-section) {
  padding: 28px 0!important
}
html body .catalog-card,html body .solution-list-card {
  grid-template-rows: auto!important;
  height: auto!important;
  max-width: none!important;
  align-content: start!important
}
html body :is(.catalog-body,.solution-list-copy,.case-card) h3 {
  font-size: 16px!important
}
html body :is(.catalog-body,.solution-list-copy,.case-card) p {
  font-size: 14px!important
}
html body.h5-filtered :is(.solution-catalog-nav,#caseFilters) {
  display: none!important
}
html body .solution-list-copy>div {
  display: none!important
}
html body .contact-direct-shell {
  padding: 0!important
}
html body .contact-expert-hero {
  padding: 0!important
}
html body .contact-inquiry-card {
  display: block!important;
  width: calc(100% - 40px)!important;
  max-width: calc(100% - 40px)!important;
  min-width: 0!important;
  margin: 20px!important;
  padding: 16px!important
}
html body .contact-form-grid {
  display: block!important
}
html body .contact-expert-heading {
  margin: 0!important
}
html body .h5-content-section .h5-note,html body .h5-layer-stack p,html body .h5-engine-pair p {
  font-size: 14px!important
}
html body .h5-product-guide {
  padding: 28px 20px!important
}
.h5-product-guide ol {
  list-style: none;
  margin: 0;
  padding: 0
}
.h5-product-guide li {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--h5-line);
  border-radius: 8px;
  background: var(--h5-tint)
}
.h5-product-guide li h3 {
  margin: 0 0 6px!important;
  font-size: 18px!important
}
.h5-product-guide li p {
  margin: 0;
  font-size: 14px!important
}
.h5-product-guide small {
  color: var(--h5-primary)
}
html body .iot-chapter {
  min-height: 0!important;
  padding: 28px 0!important;
  display: block!important
}
.iot-chapter-layout {
  display: flex!important;
  flex-direction: column!important;
  gap: 20px!important
}
.iot-chapter-layout>* {
  width: 100%!important
}
.iot-chapter-copy {
  order: 0!important
}
.iot-chapter-media {
  order: 1!important;
  border-radius: 8px!important;
  padding: 4px!important
}
.iot-chapter-copy ul {
  font-size: 16px!important
}
html body .h5-fold-body .star-v2-collaboration-panel {
  margin: 0;
  min-height: 260px;
  width: 100%;
  border-radius: 8px
}
.h5-connection {
  list-style: none;
  padding: 0
}
.h5-connection li {
  padding: 16px;
  background: white;
  border: 1px solid var(--h5-line);
  border-radius: 8px
}
html body .contact-expert-heading h1 {
  text-wrap: wrap;
  word-break: normal;
  overflow-wrap: normal;
  max-width: 100%
}
html body .catalog-section {
  padding-top: 24px!important
}
.catalog-body small {
  display: none!important
}
html body .catalog-body b {
  min-height: 32px;
  padding: 4px 0;
  font-size: 14px
}
html body .h5-fold-body .pd-progress-feature-copy h3 {
  display: none
}
html body[data-page] main h1 {
  font-size: 32px!important;
  line-height: 1.25!important
}
html body[data-page] main h2 {
  font-size: 24px!important;
  line-height: 1.4!important
}
html body[data-page] main h3 {
  font-size: 18px!important;
  line-height: 1.5!important
}
html body[data-page] main :is(.pd-hero,.iot-hero) h2 {
  font-size: 18px!important
}
html body[data-page] .solution-list-card {
  display: grid!important;
  grid-template-columns: 84px minmax(0,1fr)!important;
  grid-template-rows: auto!important
}
html body[data-page] .solution-list-copy h3,html body[data-page] .catalog-body h3,html body[data-page] .case-card h3 {
  font-size: 16px!important
}
html body[data-page] .solution-catalog-group {
  padding-top: 0!important;
  margin-top: 0!important
}
html body[data-page] .solution-catalog-shell {
  padding-top: 24px!important
}
.h5-catalog-select {
  margin-bottom: 0
}
html body .h5-case-video .case-pilot-hero-media {
  display: block!important;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  min-height: 0
}
.h5-case-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: contain
}
html body .contact-expert-heading h1 {
  font-size: 28px!important
}
html body[data-page=contact] .footer-action {
  display: none!important
}
html body .pd-final {
  display: none!important
}
html body .se-contact {
  padding: 28px 0!important
}
html body .se-contact+.site-footer .footer-action {
  display: none
}
.h5-play-recording {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: #086ddf;
  color: white;
  border: 0;
  border-radius: 6px;
  font: inherit;
  margin-top: 8px
}
.h5-play-recording[hidden] {
  display: none!important
}
html body[data-page=solutions] .solution-list-card {
  display: grid!important
}
.h5-source-types {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr
}
.h5-source-types button {
  font-size: 14px;
  white-space: normal
}
html body [hidden][hidden][hidden] {
  display: none!important
}
html body[data-page] .se-shell.se-hero-content {
  z-index: 3!important;
  width: calc(100% - 40px)!important;
  max-width: none!important;
  margin: 0 auto!important;
  padding: 0!important
}
html body[data-page] .se-hero h1 {
  white-space: normal!important;
  width: auto!important;
  max-width: 100%!important
}
.se-mining-title-part {
  display: block!important;
  white-space: normal!important
}
html body[data-page] .se-hero h2 {
  font-size: 18px!important
}
html body[data-page] main.solution-editorial {
  padding-top: 60px!important
}
html body .h5-about-values {
  padding: 0 20px 28px;
  background: #eff7ff
}
.h5-about-values .about-hero-values {
  display: grid!important;
  grid-template-columns: 1fr!important;
  width: 100%!important;
  margin: 0!important;
  gap: 12px!important;
  overflow: visible!important
}
html body .h5-about-values .about-hero-value {
  display: block!important;
  padding: 16px!important;
  margin: 0!important;
  width: 100%!important;
  min-width: 0!important;
  height: auto!important;
  min-height: 0!important;
  background: white!important;
  border: 1px solid var(--h5-line)!important;
  border-radius: 8px!important
}
html body .h5-about-values .about-hero-value>div {
  width: 100%!important;
  max-width: none!important;
  padding: 0!important
}
html body .h5-about-values .about-hero-value span {
  font-size: 16px!important;
  color: var(--h5-primary)!important
}
html body .h5-about-values .about-hero-value p {
  width: auto!important;
  max-width: none!important;
  white-space: normal!important;
  color: var(--h5-ink)!important;
  margin: 8px 0 0!important;
  font-size: 16px!important;
  line-height: 1.7!important
}
.h5-about-values br {
  display: none
}
html body .h5-fold-body :is(.se-capability-copy,.pd-progress-feature-copy) h3 {
  display: none!important
}
html body .se-capability-grid>.h5-fold {
  margin: 0!important
}
.h5-fold-body .se-capability-grid {
  gap: 8px!important
}
html body .page-hero:has(.responsive-title-background)::before {
  display: none!important
}
html body[data-page=about] .about-history-heading :is(h2,p) {
  color: var(--h5-ink)!important
}
html body[data-page] .section-heading-inline p {
  text-align: left!important
}
html[lang=en] body .h5-content-section :is(h2,h3,p,button,a),html[lang=en] body .pd-hero :is(h1,h2,p) {
  overflow-wrap: anywhere
}
html body .about-history-section::before,html body .about-history-section::after {
  display: none!important
}
html body .site-footer .footer-legal :is(p,span) {
  color: #aec3d8!important
}
html body .site-footer .footer-action p {
  color: #aec3d8!important
}
html body[data-page^=solution] main .se-contact {
  display: none!important
}
}


/* The mobile header owns site navigation; keep the footer focused on contact. */
@media (max-width:820px) {
  html body .site-footer .footer-nav-column { display:none!important; }
  html body .site-footer .footer-action-copy h2 { white-space:normal; overflow-wrap:normal; letter-spacing:-.02em; text-align:center; }
  html body .site-footer .footer-title-phrase { display:inline-block; white-space:nowrap; }
  html body .site-footer .footer-action-buttons { margin-top:24px; }
}

/* Read editorial content directly and keep interface screenshots at their source ratio. */
@media (max-width:980px) {
  html body .solution-editorial .se-operation-image { width:100%; margin:0 0 16px; height:auto; min-height:0; aspect-ratio:auto; overflow:hidden; border-radius:8px; }
  html body .solution-editorial .se-operation-image img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; }
}
@media (max-width:767px) {
  html body .solution-editorial .se-capability-grid { gap:12px!important; }
  html body .solution-editorial .se-capability-grid > article { display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; padding:16px; min-height:0; border:1px solid #d6e3ee; border-radius:10px; background:#fff; }
  html body .solution-editorial .se-capability-grid > article > svg { width:24px; height:24px; margin:2px 0 0; }
  html body .solution-editorial .se-capability-copy h3 { margin:0 0 8px; font-size:17px!important; line-height:1.5; }
  html body .solution-editorial .se-capability-copy p { margin:0; font-size:14px!important; font-weight:400; line-height:1.8; }
  html body .solution-editorial .se-capability-grid > article:has(.se-operation-image) { display:block; padding:0 0 18px; overflow:hidden; }
  html body .solution-editorial .se-capability-grid > article:has(.se-operation-image) > svg { display:none; }
  html body .solution-editorial .se-capability-grid > article:has(.se-operation-image) .se-capability-copy { padding-inline:16px; }
  html body[data-id="smart-beam-yard"] #beam-challenges .se-workflow-steps { gap:12px; }
  html body[data-id="smart-beam-yard"] #beam-challenges .se-workflow-steps li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:6px 12px; padding:16px; min-height:0; border-radius:10px; }
  html body[data-id="smart-beam-yard"] #beam-challenges .se-step { grid-column:1; grid-row:1 / 3; font-size:22px; line-height:1.4; margin:0; }
  html body[data-id="smart-beam-yard"] #beam-challenges .se-workflow-steps h3 { grid-column:2; margin:0; font-size:17px!important; line-height:1.5; }
  html body[data-id="smart-beam-yard"] #beam-challenges .se-workflow-steps p { grid-column:2; margin:0; font-size:14px!important; line-height:1.8; }
  html body[data-id="smart-beam-yard"] #beam-challenges .se-flow-arrow { display:none; }
  /* Approved smart-site hero typography shared by every solution detail page. */
  html body[data-page="solution"] .se-hero-title-phrase { display:inline-block; white-space:nowrap; }
  html body[data-page="solution"] .se-partner-lockup { display:flex; align-items:center; gap:12px; margin:0 0 18px; }
  html body[data-page="solution"] .se-partner-lockup img { display:block; width:auto; height:24px; max-width:120px; object-fit:contain; }
  html body[data-page="solution"] .se-partner-lockup > span { font-size:18px; line-height:1; }

  html body[data-page="solution"] .solution-editorial .se-hero { padding-block:36px!important; }
  html body[data-page="solution"] .solution-editorial .se-hero h1 { font-size:28px!important; line-height:1.35!important; letter-spacing:0; text-wrap:balance; margin:0 0 22px!important; }
  html body[data-page="solution"] .solution-editorial .se-hero h2 { font-size:17px!important; font-weight:600; line-height:1.65!important; margin:0 0 14px!important; }
  html body[data-page="solution"] .solution-editorial .se-hero .se-hero-summary { font-size:14px!important; font-weight:400; line-height:1.9!important; margin:0 0 28px!important; }
  html body[data-page="solution"] .solution-editorial .se-hero .se-button { min-height:40px; padding:8px 16px; gap:12px; font-size:13px; line-height:24px; }
  html body[data-page="solution"] .solution-editorial .se-hero .se-button > span { font-size:16px; line-height:1; }
  html body[data-page="solution"] .solution-editorial .se-shell.se-hero-content { width:calc(100% - 56px)!important; margin-inline:auto!important; }
  html[lang="zh-CN"] body[data-page="solution"] .solution-editorial .se-hero-summary { text-align:justify; text-align-last:left; text-justify:inter-character; text-wrap:wrap; word-break:normal; overflow-wrap:break-word; line-break:strict; }
  html[lang="zh-CN"] body[data-page="solution"] .solution-editorial .se-hero-summary .semantic-word { display:inline; white-space:normal; }
}

/* Give the smart-site reading column consistent gutters and natural Chinese text flow. */
@media (max-width:767px) {
  html body[data-page="solution"][data-id="site"] .solution-editorial .se-shell { width:calc(100% - 56px)!important; margin-inline:auto!important; }
  html body[data-id="site"] .solution-editorial :is(.se-description,.se-points p,.se-capability-copy p,.se-workflow-steps p,.site-process-list p,.site-business-copy p) { font-size:15px!important; font-weight:400; line-height:1.85; margin-top:0; text-wrap:wrap; }
  html body[data-id="site"] .solution-editorial .se-points { width:100%; gap:24px; justify-items:stretch; }
  html body[data-id="site"] .solution-editorial .se-points li { width:100%; min-width:0; box-sizing:border-box; }
  html body[data-id="site"] .solution-editorial :is(.se-points,.site-process-list,.site-business-copy) h3 { font-size:17px!important; line-height:1.5; margin-bottom:8px; }
  html[lang="zh-CN"] body[data-id="site"] .solution-editorial p { text-align:justify; text-align-last:left; text-justify:inter-character; text-wrap:wrap; word-break:normal; overflow-wrap:break-word; line-break:strict; }
  html[lang="zh-CN"] body[data-id="site"] .solution-editorial p .semantic-word { display:inline; white-space:normal; }
}