/* Vorienta brand system and shared responsive behaviour. */
:root {
  --navy: #0e3056;
  --navy-2: #082440;
  --blue: #1b5a91;
  --blue-dim: #124a7a;
  --blue-dark: #124a7a;
}

body,
body * {
  font-family: 'Inter', Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
nav.links > a,
nav.links button,
.solution-title,
.eco-link-title {
  font-family: 'Montserrat', 'Inter', Arial, sans-serif !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

[id] {
  scroll-margin-top: 92px;
}

#everyday-storage-card,
#industrial-storage-card,
#connected-technologies-card {
  scroll-margin-top: 92px;
}

@media (max-width: 1100px) {
  [id],
  #everyday-storage-card,
  #industrial-storage-card,
  #connected-technologies-card {
    scroll-margin-top: 82px;
  }
}

@media (max-width: 600px) {
  [id],
  #everyday-storage-card,
  #industrial-storage-card,
  #connected-technologies-card {
    scroll-margin-top: 74px;
  }
}

nav.links > a:not(.btn),
nav.links .has-dropdown > a,
nav.links .dropdown-wrap > .drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: 'Montserrat', 'Inter', Arial, sans-serif !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-decoration: none !important;
}

nav.links .has-dropdown > a::after,
nav.links .dropdown-wrap > .drop-trigger::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center;
  transition: transform .18s ease;
}

nav.links .has-dropdown.open > a::after,
nav.links .dropdown-wrap.open > .drop-trigger::after {
  transform: translateY(2px) rotate(225deg);
}

nav.links > a[href$="#contact"]:not(.btn) {
  display: none !important;
}

nav.links > a.nav-contact {
  display: inline-flex !important;
  flex: 0 0 auto;
  visibility: visible !important;
  opacity: 1 !important;
  background: var(--navy) !important;
  color: #fff !important;
}

nav.links > a.nav-contact:hover,
nav.links > a.nav-contact:focus-visible {
  background: var(--blue-dark) !important;
  color: #fff !important;
}

.lang-switch {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 8px 11px !important;
  border: 1px solid rgba(14, 48, 86, .22) !important;
  border-radius: 999px;
  color: var(--navy) !important;
  background: #fff !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  border-color: var(--blue-dark) !important;
  background: var(--soft) !important;
}

:lang(zh-Hans) body,
:lang(zh-Hans) button,
:lang(zh-Hans) input,
:lang(zh-Hans) textarea,
:lang(zh-Hans) select {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif !important;
}

:lang(zh-Hans) h1,
:lang(zh-Hans) h2,
:lang(zh-Hans) h3,
:lang(zh-Hans) h4 {
  font-family: Montserrat, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif !important;
  letter-spacing: 0 !important;
}

:lang(zh-Hans) .footer-fine::after {
  content: "翻译说明：本网站中文内容由智能翻译工具辅助编制，仅供参考。我们已尽合理努力确保内容准确；如中文与英文版本存在任何歧义、遗漏或差异，概以英文版本为准。对于任何翻译错误或由此造成的不便，我们深表歉意。";
  display: block;
  max-width: 920px;
  margin: 14px auto 0;
  color: #7a8aa3;
  font-size: .78rem;
  line-height: 1.65;
}

.contact-card {
  width: 100%;
  max-width: 400px;
  justify-self: end;
  padding: 22px !important;
  text-align: left;
}

.contact-card h3 {
  margin-bottom: 14px !important;
}

.contact-card .contact-row {
  gap: 7px;
  margin-bottom: 16px;
}

.contact-card .contact-actions {
  gap: 9px;
}

.contact-card .contact-method {
  display: grid !important;
  grid-template-columns: 28px auto;
  align-items: center;
  width: 100%;
  min-height: 46px;
  justify-content: center !important;
  gap: 10px;
  padding-inline: 18px;
  border: 0;
  cursor: pointer;
  font: 700 .94rem/1.2 Montserrat, Inter, Arial, sans-serif;
}

.contact-card .contact-icon {
  justify-self: center;
}

.contact-card .contact-method[href^="mailto:"] {
  background: #4a8bc2 !important;
  color: #fff !important;
}

.contact-card .contact-method[href^="mailto:"]:hover,
.contact-card .contact-method[href^="mailto:"]:focus-visible {
  background: #397cad !important;
}




.page-contact-button {
  display: grid !important;
  grid-template-columns: 24px auto;
  align-items: center;
  justify-content: center !important;
  gap: 10px !important;
  width: 230px;
  min-height: 52px;
  padding: 12px 20px !important;
  border: 0 !important;
  font: 700 .94rem/1.2 Montserrat, Inter, Arial, sans-serif !important;
  text-align: center;
}

.page-contact-button .contact-icon {
  justify-self: center;
}

.page-contact-button.btn-email {
  background: #4a8bc2 !important;
  color: #fff !important;
}

.page-contact-button.btn-email:hover,
.page-contact-button.btn-email:focus-visible {
  background: #397cad !important;
}




.contact-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.icon-email {
  width: 19px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.icon-email::before,
.icon-email::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 10px;
  height: 2px;
  background: currentColor;
}

.icon-email::before {
  left: 0;
  transform: rotate(34deg);
  transform-origin: left center;
}

.icon-email::after {
  right: 0;
  transform: rotate(-34deg);
  transform-origin: right center;
}




@media (max-width: 860px) {
  nav.links > a.lang-switch {
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
  }
}

.eyebrow {
  display: none !important;
}

@media (max-width: 1100px) {
  body.mobile-nav-open {
    overflow: hidden;
  }

  nav.links.open {
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    z-index: 1100;
  }
}

/* Desktop navigation: hoverable fly-outs with full-size click targets. */
@media (min-width: 1101px) {
  nav.links { display:flex!important; align-items:center; gap:6px; }
  nav.links > a:not(.btn),
  nav.links .has-dropdown > a,
  nav.links .dropdown-wrap > .drop-trigger {
    min-height:44px; padding:0 12px!important; white-space:nowrap;
  }
  nav.links .has-dropdown,
  nav.links .dropdown-wrap {
    position:relative; padding:0 0 12px!important; margin:0 0 -12px!important;
  }
  nav.links .dropdown {
    top:calc(100% + 8px)!important; left:50%!important; right:auto!important;
    width:310px; min-width:310px; transform:translateX(-50%)!important;
    padding:10px!important; overflow:visible!important;
  }
  nav.links .dropdown::before {
    content:''; position:absolute; left:0; right:0; top:-12px; height:12px;
  }
  nav.links .submenu {
    top:-10px!important; left:calc(100% + 8px)!important;
    width:290px; min-width:290px; transform:none!important;
  }
  nav.links .submenu-wrap:hover > .submenu,
  nav.links .submenu-wrap:focus-within > .submenu { display:block!important; }
  nav.links .submenu::before {
    content:''; position:absolute; top:0; bottom:0; left:-10px; width:10px;
  }
}

/* Mobile and tablet navigation: tap to expand and scroll inside the menu. */
@media (max-width: 1100px) {
  nav.links {
    position:fixed!important; top:78px!important; left:16px!important; right:16px!important;
    width:auto!important; display:none!important; flex-direction:column!important;
    align-items:stretch!important; gap:4px!important; padding:16px!important;
    border-radius:20px!important; background:#fff!important;
    box-shadow:0 16px 40px rgba(16,27,51,.16)!important;
  }
  nav.links.open { display:flex!important; }
  nav.links > a:not(.btn),
  nav.links .has-dropdown > a,
  nav.links .dropdown-wrap > .drop-trigger {
    width:100%; min-height:48px; justify-content:space-between;
    padding:12px 10px!important; text-align:left;
  }
  nav.links > a.btn { width:100%; min-height:48px; justify-content:center; }
  nav.links > a.lang-switch:not(.btn) {
    justify-content:center !important;
    text-align:center !important;
  }
  nav.links .has-dropdown,
  nav.links .dropdown-wrap { width:100%; padding:0!important; margin:0!important; }
  nav.links .dropdown {
    position:static!important; display:none!important; width:100%!important;
    min-width:0!important; transform:none!important; padding:4px 0 6px 10px!important;
    background:transparent!important; box-shadow:none!important;
  }
  nav.links .has-dropdown.open > .dropdown,
  nav.links .dropdown-wrap.open > .dropdown { display:block!important; }
  nav.links .dropdown > a,
  nav.links .submenu-trigger { min-height:48px; padding:10px 38px 10px 12px!important; }
  nav.links .submenu {
    position:static!important; display:none!important; width:100%!important;
    min-width:0!important; transform:none!important; padding:2px 0 6px 14px!important;
    background:transparent!important; box-shadow:none!important;
  }
  nav.links .submenu-wrap.open > .submenu { display:block!important; }
  nav.links .submenu-trigger::after {
    content:''!important; width:7px; height:7px;
    border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
    transform:translateY(-65%) rotate(45deg)!important; transition:transform .18s ease;
  }
  nav.links .submenu-wrap.open > .submenu-trigger::after {
    transform:translateY(-25%) rotate(225deg)!important;
  }
}

@media (max-width: 600px) {
  nav.links { top:68px!important; left:10px!important; right:10px!important; }
  nav.links.open {
    max-height:calc(100vh - 82px); max-height:calc(100dvh - 82px);
  }
}

/* Responsive section rhythm: keep transitions compact without crowding content. */
section:not(.hero):not(.page-hero) {
  padding-top:52px!important;
  padding-bottom:52px!important;
}

.page-hero {
  padding-bottom:36px!important;
}

.page-hero + section {
  padding-top:40px!important;
}

#thermo {
  padding-top:40px!important;
}

#about {
  padding-top:48px!important;
  padding-bottom:36px!important;
}

#about + #contact {
  padding-top:36px!important;
}

@media (max-width: 1100px) {
  section:not(.hero):not(.page-hero) {
    padding-top:44px!important;
    padding-bottom:44px!important;
  }
  .page-hero { padding-bottom:30px!important; }
  .page-hero + section,
  #thermo { padding-top:34px!important; }
  #about { padding-top:40px!important; padding-bottom:30px!important; }
  #about + #contact { padding-top:30px!important; }
}

@media (max-width: 600px) {
  section:not(.hero):not(.page-hero) {
    padding-top:34px!important;
    padding-bottom:34px!important;
  }
  .page-hero { padding-bottom:24px!important; }
  .page-hero + section,
  #thermo { padding-top:28px!important; }
  #about { padding-top:32px!important; padding-bottom:24px!important; }
  #about + #contact { padding-top:24px!important; }
}
/* Balanced page introductions: use the available desktop width without
   stretching body copy beyond a comfortable reading measure. */
.balanced-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.balanced-page-hero > :first-child {
  min-width: 0;
}

.hero-summary-panel {
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 20px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 14px 34px rgba(14, 48, 86, 0.06);
}

.hero-summary-panel h2,
.hero-summary-panel h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.3;
}

.hero-summary-panel p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
}

.hero-summary-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.hero-summary-list li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid #e7e9ee;
  color: #5b6570;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hero-summary-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.hero-summary-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1b5a91;
}

.hero-summary-panel .status-badge {
  margin-bottom: 14px;
}

.balanced-hero-note {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .balanced-page-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-summary-panel {
    padding: 22px;
  }
}
