:root {
  --brand: #2062ae;
  --brand-dark: #052667;
  --ink: #181c24;
  --text: #3f4652;
  --muted: #6c757d;
  --surface: #fff;
  --soft: #f3f7fb;
  --border: #e4eaf3;
  --container: 108rem;
  --shadow: 0 0 8px rgb(24 28 36 / 10%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--surface);
  font-family: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

body.menu-open,
body.modal-open {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.2;
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 96px 0;
}

.section-soft {
  background: var(--soft);
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--brand);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-title {
  margin-bottom: 20px;
  font-size: clamp(30px, 3vw, 42px);
}

.section-copy {
  max-width: 760px;
  color: var(--muted);
}

.center {
  text-align: center;
}

.center .section-copy {
  margin-inline: auto;
}

.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  height: 80px;
  background: #fff;
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  height: 80px;
  align-items: center;
  gap: 36px;
}

.brand-logo {
  display: flex;
  width: 218px;
  height: 62px;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
}

.brand-logo img {
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.main-nav {
  display: flex;
  flex: 1;
  align-items: stretch;
  justify-content: flex-end;
}

.nav-list {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: stretch;
  gap: 40px;
  list-style: none;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link {
  position: relative;
  display: flex;
  height: 80px;
  align-items: center;
  color: var(--brand-dark);
  font-size: 15px;
  font-weight: 500;
}

.nav-link::after {
  position: absolute;
  right: 100%;
  bottom: 17px;
  left: 0;
  height: 2px;
  background: var(--brand);
  content: "";
  transition: right 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  right: 0;
}

.nav-caret {
  display: block;
  width: 10px;
  height: 6px;
  margin-left: 6px;
  flex: 0 0 10px;
  align-self: center;
  object-fit: contain;
}

.dropdown {
  position: absolute;
  top: 72px;
  left: -24px;
  width: 310px;
  padding: 12px 0;
  visibility: hidden;
  border-top: 3px solid var(--brand);
  background: #fff;
  box-shadow: 0 14px 36px rgb(5 38 103 / 15%);
  opacity: 0;
  transform: translateY(8px);
  transition: 0.25s ease;
}

.dropdown a {
  display: block;
  padding: 10px 24px;
  color: var(--text);
  font-size: 14px;
}

.dropdown a:hover {
  color: var(--brand);
  background: var(--soft);
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--brand-dark);
}

.header-search {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  font-size: 24px;
}

.mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: none;
}

.mobile-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--brand-dark);
}

.btn {
  display: inline-flex;
  min-height: 46px;
  padding: 10px 28px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  transition: 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.btn:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}

.btn-secondary {
  background: #fff;
  color: var(--brand);
}

.btn-secondary:hover {
  color: #fff;
}

.text-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  margin-top: -80px;
  overflow: hidden;
  background: var(--brand-dark);
}

.hero-swiper .swiper-wrapper {
  height: 100%;
}

.hero-slide {
  position: relative;
  height: 100%;
  opacity: 1;
}

.hero-slide::after {
  display: none;
}

.hero-slide img {
  position: absolute;
  inset: 0;
  height: 100vh;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  width: min(100%, var(--container));
  min-height: 100vh;
  padding-top: 20vh;
  padding-right: 12px;
  padding-left: 12px;
  align-items: flex-start;
  pointer-events: none;
}

.hero-copy {
  max-width: 780px;
  pointer-events: auto;
}

.hero-glass {
  padding: 10px 20px;
  border-radius: 8px;
  background: rgb(255 255 255 / 80%);
  backdrop-filter: blur(8px);
}

.hero-kicker {
  margin-bottom: 0;
  color: var(--brand);
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  line-height: 42px;
}

.hero-title {
  margin: 8px 0 0;
  color: rgb(5 38 103 / 70%);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.hero-copy .btn {
  min-width: 180px;
  min-height: 44px;
  margin-top: 60px;
  padding: 10px 20px;
  gap: 6px;
  border: 0;
  background: #fff;
  color: var(--brand);
  font-weight: 600;
  line-height: 24px;
}

.hero-copy .btn svg {
  flex: 0 0 7px;
}

.hero-copy .btn:hover {
  background: var(--brand-dark);
  color: #fff;
}

.hero-pagination.swiper-pagination {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 60px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hero-dot {
  display: flex;
  width: 28px;
  height: 28px;
  margin: 0 !important;
  padding: 5px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  background-clip: content-box;
  border: 1px solid transparent;
  opacity: 1;
  cursor: pointer;
  transition: all .6s;
  outline: none;
  opacity: 0.6;
}

.hero-dot.active {
  width: 28px;
  height: 28px;
  border: 1px solid #fff;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-swiper .swiper-wrapper {
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1500px) and (min-width: 768px) {
  .hero-title {
    font-size: 36px;
    line-height: 40px;
  }
}

@media (max-width: 1206px) {
  .hero {
    height: calc(100vh - 60px);
    min-height: calc(100vh - 60px);
    margin-top: 0;
  }

  .hero-content {
    min-height: calc(100vh - 60px);
  }

  .hero-slide img {
    height: calc(100vh - 60px);
  }
}

.product-showcase {
  padding: 115px 0 60px;
}

.category-tabs {
  display: flex;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--brand);
}

.category-tab {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100px;
  padding: 0 18px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  transition: background-color 180ms ease, color 180ms ease;
}

.category-tab .tab-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  line-height: 1;
}

.category-tab .tab-icon svg {
  display: block;
  max-width: 68px;
  max-height: 38px;
}

.category-tab:hover:not(.active) {
  background: #f6f9fc;
  color: var(--brand);
}

.category-tab:focus {
  outline: none;
}

.category-tab:focus-visible {
  z-index: 1;
  outline: 2px solid var(--brand);
  outline-offset: -4px;
}

.category-tab.active {
  background: var(--brand);
  color: #fff;
}

.category-tab.active .tab-icon {
  color: #fff;
}

.category-tab.active::after {
  position: absolute;
  right: 50%;
  bottom: -13px;
  border-right: 16px solid transparent;
  border-top: 13px solid var(--brand);
  border-left: 16px solid transparent;
  border-top-color: var(--brand);
  content: "";
  transform: translateX(50%);
}

.product-grid {
  display: grid;
  gap: 28px 48px;
  grid-template-columns: repeat(3, 1fr);
}

.home-product-panel[hidden] {
  display: none;
}

.product-card {
  display: block;
}

.product-card .media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--soft);
}

.product-card img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.5, 0, 0, 1);
}

.product-card:hover img {
  transform: scale(1.035);
}

.product-card h3 {
  margin: 22px 0 0;
  font-size: 17px;
  font-weight: 500;
}

.product-card p {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 991px) {
  .category-tabs {
    padding-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .category-tabs::-webkit-scrollbar {
    display: none;
  }

  .category-tab {
    min-width: 210px;
    min-height: 78px;
    padding: 0 10px;
    flex: 0 0 210px;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
  }

  .category-tab .tab-icon svg {
    width: 28px;
    max-height: 28px;
  }
}

.manufacturing {
  padding: 80px 0;
  background: var(--soft);
}

.manufacturing>.container {
  padding-inline: 12px;
}

.manufacturing-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.manufacturing-media {
  width: 62%;
  min-width: 0;
}

.factory-main {
  aspect-ratio: 1056 / 546;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.factory-main img {
  height: 100%;
  object-fit: cover;
}

.manufacturing-processes {
  display: flex;
  margin-top: 12px;
  gap: 12px;
}

.manufacturing-process {
  min-width: 0;
  flex: 1 1 0;
}

.manufacturing-process>figure {
  aspect-ratio: 344 / 263;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.manufacturing-process>figure img {
  height: 100%;
  object-fit: cover;
}

.process-info {
  display: flex;
  min-height: 77px;
  margin-top: 20px;
  align-items: flex-start;
  gap: 8px;
}

.process-icon {
  display: flex;
  width: 62px;
  height: 62px;
  margin-top: 10px;
  flex: 0 0 62px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e4effb;
  color: var(--brand);
}

.process-icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.process-info>div {
  min-width: 0;
  flex: 1 1 auto;
}

.process-info strong {
  display: block;
  color: var(--brand);
  font-size: 17px;
  font-weight: 700;
  line-height: 25.5px;
}

.process-info small {
  display: block;
  color: #666;
  font-size: 14px;
  line-height: 23.1px;
}

.manufacturing-copy {
  width: 34%;
  min-width: 0;
  margin-top: 105px;
}

.manufacturing-copy .eyebrow {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 27px;
}

.manufacturing-copy h2 {
  margin: 10px 0 0;
  color: var(--brand);
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
}

.manufacturing-intro {
  margin: 15px 0 0;
  color: #555;
  font-size: 16px;
  line-height: 26.4px;
}

.feature-list {
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: flex;
  padding: 0 0 12px;
  align-items: flex-start;
  gap: 15px;
  border-bottom: 1px solid #e7e7e7;
}

.feature-list li+li {
  margin-top: 12px;
}

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

.feature-check {
  display: flex;
  width: 50px;
  height: 50px;
  margin-top: 5px;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}

.feature-check svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.feature-list li>div {
  min-width: 0;
  flex: 1 1 auto;
}

.feature-list strong {
  display: block;
  color: var(--brand);
  font-size: 18px;
  font-weight: 600;
  line-height: 28.08px;
}

.feature-list li>div>span {
  display: block;
  margin-top: 5px;
  color: #444;
  font-size: 15px;
  line-height: 24.75px;
}

.cases {
  padding: 72px 0 84px;
  background: #eef6ff;
}

.proofs {
  display: flex;
  margin: 24px 0 42px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 55px;
  color: var(--muted);
}

.proofs span::before {
  display: inline-grid;
  width: 19px;
  height: 19px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  content: "✓";
  font-size: 12px;
  place-items: center;
}

.case-marquee {
  --case-marquee-gap: 24px;
  --case-marquee-width: max(100vw, 1200px);
  width: 100%;
  overflow: hidden;
}

.case-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--case-marquee-gap);
  animation: case-marquee 20s linear infinite;
  will-change: transform;
}

.case-marquee-group {
  display: grid;
  width: var(--case-marquee-width);
  flex: 0 0 var(--case-marquee-width);
  gap: var(--case-marquee-gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@keyframes case-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - var(--case-marquee-gap) / 2));
  }
}

.case-marquee:hover .case-marquee-track,
.case-marquee:focus-within .case-marquee-track {
  animation-play-state: paused;
}

.case-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.42 / 1;
}

.case-card img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.case-card:hover img {
  transform: scale(1.05);
}

.case-card .case-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgb(5 38 103 / 80%));
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.3s;
}

.case-card:hover .case-caption {
  opacity: 1;
}

.section-actions {
  display: flex;
  margin-top: 38px;
  justify-content: center;
  gap: 12px;
}

.company-section {
  padding: 96px 0;
}

.company-grid {
  display: grid;
  align-items: center;
  gap: 76px;
  grid-template-columns: 1fr 1fr;
}

.company-visual {
  position: relative;
}

.company-visual img {
  max-height: 600px;
  object-fit: contain;
}

.trust-grid {
  display: grid;
  margin-top: 34px;
  gap: 18px;
  grid-template-columns: repeat(2, 1fr);
}

.trust-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  color: var(--brand-dark);
  font-weight: 700;
}

.news {
  padding: 100px 0 120px;
}

.section-heading-row {
  display: flex;
  margin-bottom: 34px;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.featured-news {
  position: relative;
  min-height: 460px;
  overflow: hidden;
}

.featured-news>img {
  height: 460px;
  object-fit: cover;
}

.featured-news-card {
  position: absolute;
  top: 38px;
  right: 36px;
  bottom: 38px;
  width: min(470px, 43%);
  padding: 44px;
  background: #fff;
}

.featured-news-card h3 {
  font-size: 26px;
}

.news-meta {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.news-grid {
  display: grid;
  margin-top: 38px;
  gap: 36px;
  grid-template-columns: repeat(4, 1fr);
}

.news-card {
  border: 1px solid #eee;
}

.news-card img {
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
}

.news-card h3 {
  margin: 0;
  padding: 20px;
  font-size: 17px;
}

.home-video-section {
  width: 100%;
  margin: 0px auto 100px;
  padding: 0;
}

.home-video-list {
  display: flex;
  width: 100%;
  margin: 0;
  flex-wrap: wrap;
}

.home-video-item {
  width: 33.3333%;
  padding: 1px;
}

.home-video-item iframe {
  display: block;
  width: 100%;
  height: 315px;
  border: 0;
}

@media (max-width: 1279px) {
  .home-video-section {
    margin: 0 auto 80px;
  }
}

@media (max-width: 767px) {
  .home-video-section {
    margin: 0 auto 48px;
  }

  .home-video-item {
    width: 50%;
  }
}

.page-hero {
  position: relative;
  display: grid;
  min-height: 420px;
  background: var(--brand-dark);
  place-items: center;
  overflow: hidden;
}

.page-hero img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
}

.page-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(5 38 103 / 70%), rgb(5 38 103 / 22%));
  content: "";
}

.page-hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
}

.page-hero h1 {
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(38px, 5vw, 62px);
}

.breadcrumbs {
  font-size: 14px;
  opacity: 0.88;
}

.subnav {
  display: flex;
  margin: -28px auto 0;
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 950px);
  padding: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 35px rgb(5 38 103 / 12%);
  list-style: none;
}

.subnav a {
  display: block;
  padding: 18px 28px;
  color: var(--brand-dark);
  font-weight: 600;
}

.subnav a:hover,
.subnav a.active {
  background: var(--brand);
  color: #fff;
}

.cards-3,
.cards-4 {
  display: grid;
  gap: 32px;
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards-4 {
  grid-template-columns: repeat(4, 1fr);
}

.info-card {
  height: 100%;
  padding: 30px;
  border: 1px solid var(--border);
  background: #fff;
}

.info-card h3 {
  font-size: 22px;
}

.info-card p:last-child {
  margin-bottom: 0;
}

.icon-card .icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--brand);
  font-size: 26px;
  place-items: center;
}

.filter-bar {
  display: flex;
  margin: 30px 0 42px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.filter-chip {
  padding: 9px 18px;
  border: 1px solid var(--brand);
  border-radius: 99px;
  background: #fff;
  color: var(--brand);
}

.filter-chip.active,
.filter-chip:hover {
  background: var(--brand);
  color: #fff;
}

.archive-grid {
  display: grid;
  gap: 36px 30px;
  grid-template-columns: repeat(3, 1fr);
}

.archive-card {
  border: 1px solid var(--border);
  background: #fff;
}

.archive-card img {
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
}

.archive-card-body {
  padding: 24px;
}

.archive-card h3 {
  margin-bottom: 10px;
  font-size: 21px;
}

.archive-card p {
  color: var(--muted);
}

.archive-meta {
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 13px;
  text-transform: uppercase;
}

.split {
  display: grid;
  align-items: center;
  gap: 70px;
  grid-template-columns: 1fr 1fr;
}

.split.reverse .split-media {
  order: 2;
}

.split-media img {
  min-height: 440px;
  object-fit: cover;
}

.check-list {
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding: 8px 0 8px 30px;
}

.check-list li::before {
  position: absolute;
  left: 0;
  color: var(--brand);
  content: "●";
}

.stat-grid {
  display: grid;
  margin: 46px 0;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: 28px;
  background: var(--soft);
  text-align: center;
}

.stat strong {
  display: block;
  color: var(--brand);
  font-size: 38px;
}

.stat span {
  color: var(--muted);
}

.timeline {
  position: relative;
  max-width: 1000px;
  margin: 46px auto 0;
}

.timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--border);
  content: "";
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 54px 44px 0;
  text-align: right;
}

.timeline-item:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 44px 54px;
  text-align: left;
}

.timeline-item::after {
  position: absolute;
  top: 4px;
  right: -9px;
  width: 18px;
  height: 18px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
  content: "";
}

.timeline-item:nth-child(even)::after {
  right: auto;
  left: -9px;
}

.timeline-year {
  color: var(--brand);
  font-size: 24px;
  font-weight: 700;
}

.article-layout {
  display: grid;
  align-items: start;
  gap: 60px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.article-content {
  max-width: 900px;
}

.article-content h2 {
  margin-top: 48px;
  font-size: 31px;
}

.article-content h3 {
  margin-top: 32px;
  font-size: 23px;
}

.article-content p,
.article-content li {
  color: #4e5663;
}

.article-content img {
  margin: 32px 0;
}

.toc {
  position: sticky;
  top: 110px;
  padding: 26px;
  background: var(--soft);
}

.toc h3 {
  font-size: 18px;
}

.toc a {
  display: block;
  padding: 7px 0;
  color: var(--brand);
  font-size: 14px;
}

.accordion {
  max-width: 1040px;
  margin: 40px auto 0;
  border-top: 1px solid var(--border);
}

.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-button {
  display: flex;
  width: 100%;
  padding: 22px 6px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}

.accordion-button::after {
  color: var(--brand);
  content: "+";
  font-size: 26px;
}

.accordion-item.open .accordion-button::after {
  content: "−";
}

.accordion-panel {
  display: none;
  padding: 0 42px 24px 6px;
  color: var(--muted);
}

.accordion-item.open .accordion-panel {
  display: block;
}

.download-list {
  display: grid;
  gap: 14px;
}

.download-row {
  display: grid;
  padding: 18px 22px;
  align-items: center;
  border: 1px solid var(--border);
  grid-template-columns: 1.1fr 2fr auto;
  gap: 20px;
}

.download-row strong {
  color: var(--ink);
}

.download-row span {
  color: var(--muted);
}

.product-details-hero {
  position: relative;
}

.product-details-hero-media {
  position: relative;
  min-height: 460px;
  overflow: hidden;
}

.product-details-hero-media::after {
  position: absolute;
  inset: 0;
  background: rgb(5 38 103 / 64%);
  content: "";
}

.product-details-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
}

.product-details-hero-copy {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: min(100%, 680px);
  transform: translateY(-50%);
  color: #fff;
}

.product-details-hero-copy .breadcrumbs,
.product-details-hero-copy .breadcrumbs a {
  color: #eaf2fd;
}

.product-details-hero-copy h1 {
  margin: 12px 0 14px;
  color: #fff;
  font-size: clamp(40px, 5vw, 62px);
}

.product-details-hero-copy p {
  margin: 0;
  max-width: 680px;
  color: #f6f8fb;
  font-size: 18px;
  line-height: 28px;
}

.product-details-anchor-nav {
  margin-top: -28px;
}

.product-details-anchor-nav a {
  color: var(--brand-dark);
  text-align: center;
}

.product-details-anchor-nav a.active,
.product-details-anchor-nav a:hover {
  background: var(--brand);
  color: #fff;
}

.product-details-overview {
  display: grid;
  gap: 58px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 44%);
}

.product-details-copy p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.product-details-copy .section-title {
  max-width: 760px;
  margin-bottom: 18px;
}

.product-details-copy .check-list {
  margin-top: 20px;
  margin-bottom: 24px;
}

.product-details-gallery {
  display: grid;
  gap: 16px;
}

.product-details-gallery>figure {
  margin: 0;
}

.product-details-gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.product-details-gallery figcaption,
.product-feature-media span {
  margin-top: 8px;
  color: #6f7784;
  font-size: 14px;
}

.product-details-thumb-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

.product-feature-grid {
  display: grid;
  margin-top: 40px;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-feature-item {
  display: grid;
  gap: 12px;
  min-height: 100%;
  padding: 26px 24px;
  border: 1px solid var(--border);
  background: #fff;
}

.product-feature-item h3 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
}

.product-feature-index {
  width: 34px;
  height: 34px;
  display: grid;
  color: #fff;
  font-weight: 700;
  place-items: center;
  background: var(--brand);
  border-radius: 50%;
}

.product-feature-item ul {
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  line-height: 1.7;
}

.product-feature-item li+li {
  margin-top: 8px;
}

.product-tech-grid,
.product-feature-panels-grid {
  display: grid;
  margin-top: 32px;
  gap: 26px;
}

.product-feature-panel,
.product-feature-panel-alt {
  display: grid;
  align-items: center;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--border);
  background: #fff;
}

.product-feature-panel {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.product-feature-panel-alt {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.product-feature-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-feature-media span {
  display: block;
}

.product-feature-body h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.25;
}

.product-feature-body p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.7;
}

.product-feature-body ul {
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  line-height: 1.7;
}

.product-feature-body li+li {
  margin-top: 6px;
}

.product-certificate-grid {
  margin-top: 34px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-certificate-grid figure {
  margin: 0;
}

.product-certificate-grid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-diagram {
  margin-top: 30px;
  padding: 24px 22px;
  border: 1px solid var(--border);
  background: #fff;
}

.product-diagram h3 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
}

.product-diagram img {
  width: min(100%, 860px);
  margin-top: 16px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.product-diagram p {
  margin: 14px 0 0;
  color: var(--muted);
}

.product-spec-table-wrap {
  margin-top: 34px;
  overflow-x: auto;
  background: #fff;
}

.product-spec-table-wrap table {
  width: 100%;
  min-width: 760px;
  margin: 0;
  border-collapse: collapse;
}

.product-spec-table-wrap th,
.product-spec-table-wrap td {
  padding: 14px 16px;
  border: 1px solid #dde2ea;
  vertical-align: top;
  text-align: left;
}

.product-spec-table-wrap th {
  width: 23%;
  color: var(--ink);
  background: #f7fbff;
}

.product-spec-table-wrap td {
  width: 27%;
  color: var(--muted);
}

.product-cta-wrap {
  margin-top: 28px;
  text-align: center;
}

.product-contact-banner {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 28px 34px;
  border: 1px solid var(--border);
  background: var(--soft);
  grid-template-columns: minmax(0, 1fr) auto;
}

.product-contact-banner .section-title {
  margin: 0 0 10px;
}

.product-contact-banner p {
  margin: 0;
  color: var(--muted);
}

.contact-grid {
  display: grid;
  gap: 56px;
  grid-template-columns: 0.75fr 1.25fr;
}

.contact-cards {
  display: grid;
  gap: 14px;
}

.contact-card {
  padding: 24px;
  background: var(--soft);
}

.contact-card strong {
  display: block;
  color: var(--brand);
}

.form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #cfd8e6;
  border-radius: 2px;
  background: #fff;
  color: var(--text);
}

.field textarea {
  min-height: 135px;
  resize: vertical;
}

.map-placeholder {
  display: grid;
  min-height: 300px;
  margin-top: 54px;
  background: #dce7f2;
  color: var(--brand-dark);
  font-weight: 700;
  place-items: center;
}

/* Contact page reference geometry. */
.contact-page {
  --contact-content-width: min(calc(100% - 48px), 1100px);
  padding: 0;
  background: #fff;
}

.contact-breadcrumb {
  width: var(--contact-content-width);
  margin-inline: auto;
  padding-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 24px;
}

.contact-breadcrumb a:hover {
  color: var(--brand);
}

.contact-page-heading {
  width: var(--contact-content-width);
  margin: 40px auto 0;
}

.contact-page-heading h1 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.contact-page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}

.contact-inquiry-form {
  width: var(--contact-content-width);
  margin: 6px auto 0;
  padding: 40px 40px 36px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.contact-form-intro {
  padding-bottom: 36px;
  border-bottom: 1px solid #e5e7eb;
}

.contact-form-intro .contact-kicker {
  display: flex;
  margin: 0 0 12px;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 16px;
}

.contact-form-intro .contact-kicker::before {
  width: 22px;
  height: 2px;
  background: var(--brand);
  content: "";
}

.contact-form-intro h2 {
  margin: 0 0 12px;
  color: #101828;
  font-size: 38px;
  font-weight: 700;
  line-height: 45.6px;
}

.contact-form-intro>p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 22px;
}

.contact-form-section {
  padding: 33px 0 40px;
  border-bottom: 1px solid #e5e7eb;
}

.contact-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-section-heading>span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid #cdddec;
  background: #f1f7fc;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  place-items: center;
}

.contact-section-heading h3 {
  margin: 0 0 1px;
  color: #101828;
  font-size: 20px;
  font-weight: 650;
  line-height: 27px;
}

.contact-section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 21px;
}

.contact-project-fields,
.contact-company-fields {
  margin-top: 29px;
}

.contact-project-fields {
  display: grid;
  gap: 23px;
}

.contact-company-fields {
  display: grid;
  gap: 23px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-field {
  display: grid;
  gap: 8px;
}

.contact-field-wide {
  grid-column: 1 / -1;
}

.contact-field label {
  color: #101828;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.contact-field label em,
.contact-form-submit em {
  color: #d64a4a;
  font-style: normal;
}

.contact-field input,
.contact-field select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  outline: 0;
  background-color: #fff;
  color: #4c5564;
  font-size: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.contact-field select {
  padding-right: 46px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7b8490 50%),
    linear-gradient(135deg, #7b8490 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 25px,
    calc(100% - 14px) 25px;
  background-repeat: no-repeat;
  background-size:
    5px 5px,
    5px 5px;
}

.contact-field input::placeholder {
  color: #98a2b3;
}

.contact-field input:focus,
.contact-field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgb(32 98 174 / 10%);
}

.contact-form-submit {
  display: flex;
  padding-top: 31px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.contact-form-submit p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.contact-form-submit button,
.contact-form-submit input[type="submit"] {
  width: 250px;
  height: 58px;
  flex: 0 0 auto;
  border: 1px solid var(--brand);
  border-radius: 0;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  transition:
    background 0.35s ease,
    border-color 0.35s ease;
}

.contact-form-submit button:hover,
.contact-form-submit input[type="submit"]:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}

.contact-form-submit button:disabled,
.contact-form-submit input[type="submit"]:disabled {
  cursor: default;
  opacity: 0.8;
}

.contact-map {
  width: 100%;
  height: 560px;
  margin: 60px auto 0;
  overflow: hidden;
  background: #dce7f2;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Resources page — measured from the reference layout. */
.resources-page {
  background: #fff;
}

.resources-hero {
  position: relative;
  height: 680px;
  overflow: hidden;
  background: #263642;
  color: #fff;
}

.resources-hero>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.resources-hero-shade {
  position: absolute;
  inset: 0;
  background: rgb(8 19 33 / 28%);
}

.resources-hero-inner {
  position: absolute;
  inset: 0;
  width: calc(100% - 24px);
  max-width: var(--container);
  margin-inline: auto;
}

.resources-breadcrumb {
  position: absolute;
  top: 14px;
  left: 0;
  font-size: 14px;
  line-height: 24px;
}

.resources-breadcrumb a:hover {
  text-decoration: underline;
}

.resources-hero-copy {
  position: absolute;
  top: 237px;
  left: 0;
  width: 600px;
  max-width: 54%;
}

.resources-hero-copy h1 {
  margin: 0 0 24px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.resources-hero-copy p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.resources-body {
  margin: 50px 0 80px;
}

.resources-layout {
  display: grid;
  width: calc(100% - 24px);
  max-width: var(--container);
  margin-inline: auto;
  align-items: start;
  gap: 20px;
  grid-template-columns: 396px minmax(0, 1fr);
}

.resources-side {
  position: sticky;
  top: 100px;
  padding: 30px 40px 20px;
  background: #f7f7f7;
}

.resources-side a {
  display: flex;
  min-height: 60px;
  align-items: center;
  border-bottom: 1px solid #e7e7e7;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.resources-side a:hover {
  color: var(--brand);
}

.resources-main {
  min-width: 0;
}

.resources-main h2 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

.resources-copy {
  margin-top: 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}

.resources-copy p {
  margin: 0;
}

.resources-benefits ul {
  margin: 26px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 24px;
}

.resources-products {
  margin-top: 38px;
}

.resource-products-swiper {
  width: 100%;
  margin-top: 24px;
  padding: 10px 10px 33px;
  overflow: hidden;
}

.resource-product-card {
  height: auto;
  display: block;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 10px rgb(24 28 36 / 10%);
}

.resource-product-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.resource-product-card>div {
  min-height: 152px;
  padding: 24px 30px;
  text-align: center;
}

.resource-product-card span {
  display: block;
  color: var(--brand);
  font-size: 16px;
  line-height: 24px;
}

.resource-product-card h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.resource-products-swiper .swiper-pagination-progressbar {
  top: auto;
  bottom: 0;
  height: 2px;
  background: #e4e7ea;
}

.resource-products-swiper .swiper-pagination-progressbar-fill {
  background: var(--brand);
}

.resources-cases {
  margin-top: 40px;
}

.resources-case-grid {
  display: grid;
  margin-top: 24px;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resources-case-grid button {
  height: 255px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #eef2f5;
  cursor: zoom-in;
}

.resources-case-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.resources-case-grid button:hover img {
  transform: scale(1.035);
}

.resources-contact-note {
  min-height: 138px;
  margin-top: 40px;
  padding: 30px 30px 28px;
  border-left: 3px solid var(--brand);
  background: #e3f5fe;
}

.resources-contact-note strong {
  display: block;
  color: var(--brand);
  font-size: 24px;
  font-style: italic;
  font-weight: 600;
  line-height: 32px;
}

.resources-contact-note a {
  display: inline-flex;
  margin-top: 14px;
  align-items: center;
  gap: 6px;
  color: var(--brand);
}

.resources-contact-note a span {
  text-decoration: underline;
}

.resource-lightbox {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: flex;
  padding: 48px;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  background: rgb(5 23 50 / 84%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}

.resource-lightbox.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.resource-lightbox img {
  display: block;
  width: min(86vw, 1100px);
  height: auto;
  max-height: calc(100dvh - 96px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 48px rgb(0 0 0 / 28%));
  transform: scale(.97);
  transition: transform .28s ease;
}

.resource-lightbox.open img {
  transform: none;
}

.resource-lightbox button {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  background: rgb(5 38 103 / 60%);
  color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.resource-lightbox button:hover,
.resource-lightbox button:focus-visible {
  border-color: #fff;
  background: rgb(5 38 103 / 92%);
}

.resource-lightbox button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.resource-lightbox button svg {
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
}

body.resource-lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .resource-lightbox,
  .resource-lightbox img {
    transition: none;
  }
}

/* FAQ page — measured from the reference layout. */
.faq-reference-page {
  background: #fff;
}

/* Blog page — measured from the reference layout. */
.blog-reference-page {
  background: #fff;
}

.blog-reference-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  background: #1e3040;
  color: #fff;
}

.blog-reference-hero>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-reference-hero-inner {
  position: absolute;
  inset: 0;
  width: calc(100% - 24px);
  max-width: var(--container);
  margin-inline: auto;
}

.blog-reference-breadcrumb {
  position: absolute;
  top: 14px;
  left: 0;
  font-size: 14px;
  line-height: 24px;
}

.blog-reference-breadcrumb a:hover {
  text-decoration: underline;
}

.blog-reference-hero-copy {
  position: absolute;
  top: 190px;
  left: 0;
  width: 600px;
  max-width: 54%;
}

.blog-reference-hero-copy h1 {
  margin: 0 0 24px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.blog-reference-hero-copy p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.blog-reference-body {
  margin: 50px 0 80px;
}

.blog-reference-list {
  width: calc(100% - 24px);
  max-width: var(--container);
  margin-inline: auto;
  border-top: 1px solid #ddd;
}

.blog-reference-item {
  display: flex;
  padding: 40px 0;
  align-items: stretch;
  justify-content: space-between;
  gap: 80px;
  border-bottom: 1px solid #ddd;
}

.blog-reference-text {
  width: min(100%, 24rem);
  min-width: 0;
}

.blog-reference-date {
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 14px;
  text-transform: uppercase;
}

.blog-reference-title {
  margin: 0;
  overflow: visible;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.34;
  font-weight: 700;
  display: block;
  min-height: 0;
}

.blog-reference-title-link {
  display: inline-flex;
  margin-top: 16px;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-size: 16px;
  font-weight: 600;
}

.blog-reference-title-link span {
  margin-top: 2px;
  font-size: 16px;
}

.blog-reference-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.blog-reference-tags a {
  display: inline-flex;
  border-bottom: 1px solid var(--brand);
  color: #5f6980;
  font-size: 14px;
}

.blog-reference-tags a:hover {
  color: var(--brand);
}

.blog-reference-media {
  width: min(40rem, 100%);
  height: 22.5rem;
  overflow: hidden;
}

.blog-reference-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-reference-pagination {
  display: flex;
  margin: 14px 0 0;
  align-items: center;
  gap: 16px;
  color: var(--brand);
}

.blog-reference-pagination-link {
  color: var(--brand);
  font-size: 16px;
}

.blog-reference-pagination-link.active {
  border-bottom: 2px solid var(--brand-dark);
  color: var(--brand-dark);
  font-weight: 700;
}

.faq-reference-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  background: #00669c;
  color: #fff;
}

.faq-reference-hero>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.faq-reference-hero-inner {
  position: absolute;
  inset: 0;
  width: calc(100% - 24px);
  max-width: var(--container);
  margin-inline: auto;
}

.faq-reference-breadcrumb {
  position: absolute;
  top: 14px;
  left: 0;
  font-size: 14px;
  line-height: 24px;
}

.faq-reference-breadcrumb a:hover {
  text-decoration: underline;
}

.faq-reference-hero-copy {
  position: absolute;
  top: 115px;
  left: 0;
  width: 600px;
  max-width: 54%;
}

.faq-reference-hero-copy h1 {
  margin: 0 0 24px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.faq-reference-hero-copy p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.faq-reference-body {
  margin: 50px 0 80px;
}

.faq-reference-layout {
  display: grid;
  width: calc(100% - 24px);
  max-width: var(--container);
  margin-inline: auto;
  align-items: stretch;
  gap: 20px;
  grid-template-columns: 396px minmax(0, 1fr);
}

.faq-reference-side {
  min-width: 0;
}

.faq-reference-side nav {
  position: sticky;
  top: 100px;
  display: flex;
  padding: 40px;
  flex-direction: column;
  gap: 16px;
  background: #f8f8f8;
}

.faq-reference-side a {
  display: block;
  min-height: 44px;
  border-bottom: 1px solid #e5e5e5;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.faq-reference-side a.active,
.faq-reference-side a:hover {
  color: var(--brand);
}

.faq-reference-accordion {
  min-width: 0;
}

.faq-reference-item {
  padding: 20px;
  border: 0;
  /* background: #fff; */
  transition: box-shadow 0.25s ease;
}

.faq-reference-item.open {
  box-shadow: 0 0 20px rgb(24 28 36 / 10%);
}

.faq-reference-button {
  display: grid;
  width: 100%;
  min-height: 28px;
  padding: 0;
  align-items: start;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  column-gap: 36px;
  line-height: 28px;
  text-align: left;
}

.faq-reference-button::after {
  display: block;
  width: 13px;
  height: 13px;
  margin: 4px 3px 0 auto;
  border-right: 3px solid #65717b;
  border-bottom: 3px solid #65717b;
  color: transparent;
  content: "";
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.faq-reference-item.open .faq-reference-button::after {
  border-color: var(--brand);
  content: "";
  transform: translateY(5px) rotate(225deg);
}

.faq-reference-number {
  color: var(--brand);
}

.faq-reference-question {
  color: var(--ink);
}

.faq-reference-panel {
  display: none;
  margin: 10px 56px 0;
  padding: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}

.faq-reference-item.open .faq-reference-panel {
  display: block;
}

.faq-reference-panel a {
  color: var(--brand);
}

.faq-reference-panel a:hover {
  text-decoration: underline;
}

/* Download page — measured from the reference layout. */
.download-reference-page {
  background: #fff;
}

.download-reference-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  background: #263642;
  color: #fff;
}

.download-reference-hero::after {
  position: absolute;
  inset: 0;
  background: rgb(7 22 36 / 12%);
  content: "";
}

.download-reference-hero>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.download-reference-hero-inner {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  width: calc(100% - 24px);
  max-width: var(--container);
  margin-inline: auto;
  align-items: center;
}

.download-reference-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.download-reference-body {
  margin: 50px 0 80px;
}

.download-reference-layout {
  display: grid;
  width: calc(100% - 24px);
  max-width: var(--container);
  margin-inline: auto;
  align-items: stretch;
  gap: 20px;
  grid-template-columns: 396px minmax(0, 1fr);
}

.download-reference-side {
  min-width: 0;
}

.download-reference-side nav {
  position: sticky;
  top: 100px;
  display: flex;
  padding: 40px;
  flex-direction: column;
  gap: 16px;
  background: #f8f8f8;
}

.download-reference-side a {
  display: block;
  min-height: 44px;
  border-bottom: 1px solid #e5e5e5;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.download-reference-side a.active,
.download-reference-side a:hover {
  color: var(--brand);
}

.download-reference-main {
  min-width: 0;
}

.download-reference-panel {
  display: grid;
  gap: 20px;
}

.download-reference-panel[hidden] {
  display: none;
}

.download-reference-card {
  display: flex;
  min-height: 144px;
  padding: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 12px;
  color: var(--muted);
  box-shadow: 0 0 0 1px #eee;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.download-reference-card:hover {
  box-shadow:
    0 0 0 1px var(--brand),
    0 8px 24px rgb(24 28 36 / 8%);
  transform: translateY(-1px);
}

.download-reference-file {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 20px;
}

.download-reference-icon-desktop {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

.download-reference-icon-mobile {
  display: none;
}

.download-reference-copy {
  display: block;
  min-width: 0;
}

.download-reference-meta {
  display: block;
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}

.download-reference-type {
  margin-right: 20px;
  color: var(--brand);
}

.download-reference-copy strong {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.download-reference-button {
  display: grid;
  width: 200px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  place-items: center;
}

.download-reference-mobile-action {
  display: none;
}

.download-reference-pagination {
  display: flex;
  height: 39px;
  margin-top: 40px;
  align-items: flex-start;
  gap: 10px;
}

.download-reference-pagination button {
  width: 29px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.download-reference-pagination button.active {
  height: 39px;
  border-bottom: 3px solid var(--brand-dark);
  color: var(--brand-dark);
}

.site-footer {
  padding: 70px 0 26px;
  background: var(--brand-dark);
  color: rgb(255 255 255 / 58%);
}

.footer-grid {
  display: flex;
  gap: 60px;
}

.footer-mission {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.site-footer h3 {
  margin-bottom: 24px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin: 0 0 13px;
}

.footer-links a:hover {
  color: #fff;
}

.socials {
  display: flex;
  margin-top: 30px;
  gap: 12px;
}

.socials a {
  display: grid;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  place-items: center;
}

.footer-contact p {
  margin-bottom: 12px;
}

.footer-contact .btn {
  margin-top: 18px;
}

.footer-bottom {
  display: flex;
  margin-top: 56px;
  padding-top: 24px;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 14px;
}

.inquiry-modal {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: none;
  padding: 24px;
  align-items: center;
  justify-content: center;
  background: rgb(5 23 50 / 74%);
}

.inquiry-modal.open {
  display: flex;
}

.modal-panel {
  position: relative;
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  padding: 44px;
  overflow-y: auto;
  background: #fff;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--soft);
  color: var(--ink);
  font-size: 24px;
}

.modal-steps {
  display: grid;
  margin: 28px 0;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
}

.modal-step {
  padding: 18px;
  border-left: 3px solid var(--brand);
  background: var(--soft);
}

.modal-step span {
  display: block;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

/* Commercial and industrial category page */
.commercial-page {
  color: #4f647b;
  font-size: 16px;
  line-height: 1.4;
}

.commercial-wrap {
  width: calc(100% - 200px);
  max-width: 1712px;
  margin-inline: auto;
}

.commercial-hero {
  height: 400px;
  background: #fafafa;
}

.commercial-hero-inner {
  display: flex;
  height: 100%;
  align-items: center;
}

.commercial-hero h1 {
  width: 600px;
  min-width: 0;
  margin: 0;
  color: #181c24;
  font-size: 40px;
  line-height: 48px;
  transform: translateY(-12px);
}

.commercial-products {
  padding-top: 100px;
}

.commercial-product-grid {
  display: grid;
  width: calc(100% - 200px);
  max-width: 1712px;
  margin-inline: auto;
  gap: 40px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commercial-product-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 10px rgb(24 28 36 / 10%);
  transition: transform .25s ease, box-shadow .25s ease;
}

.commercial-product-card:hover {
  box-shadow: 0 8px 24px rgb(24 28 36 / 16%);
  transform: translateY(-3px);
}

.commercial-product-card>img {
  display: block;
  min-width: 0;
  width: 100%;
  height: auto;
}

.commercial-product-copy {
  min-height: 100px;
  padding: 24px 40px;
  text-align: center;
}

.commercial-product-copy span {
  display: block;
  margin-bottom: 2px;
  color: var(--brand);
  font-size: 16px;
}

.commercial-product-copy h2 {
  margin: 0;
  color: #181c24;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.pd-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.pd-summary-actions .btn-outline {
  background: transparent;
  color: #2062ae;
  box-shadow: inset 0 0 0 1px currentColor;
}

.contact-template-form {
  padding: 72px 0;
}

.commercial-section-title {
  margin: 0;
  color: #181c24;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.commercial-customization {
  padding-top: 100px;
  text-align: center;
}

.commercial-customization-panel {
  display: flex;
  min-height: 546px;
  margin-top: 40px;
  padding: 80px 74px 134px;
  justify-content: space-between;
  gap: 64px;
  border-radius: 120px;
  background: #f8f8f8;
}

.commercial-customization-item {
  width: 320px;
  flex: 1 1 0;
  text-align: center;
}

.commercial-customization-item h3 {
  margin: 0;
  color: #181c24;
  font-size: 24px;
  line-height: 32px;
}

.commercial-customization-icon {
  display: grid;
  width: 180px;
  height: 180px;
  margin: 24px auto;
  border-radius: 50%;
  background: rgb(32 98 174 / 5%);
  place-items: center;
}

.commercial-customization-icon img {
  width: 103px;
  height: 88px;
  object-fit: contain;
}

.commercial-customization-item p {
  margin: 0;
  color: #4f647b;
  line-height: 24px;
}

.commercial-quote {
  display: flex;
  min-height: 100px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 30px;
  border: 0;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}

.commercial-quote:hover {
  background: var(--brand-dark);
}

.commercial-quote-overlap {
  position: relative;
  width: 880px;
  max-width: calc(100% - 160px);
  margin: -46px auto 0;
}

.commercial-mail-icon {
  font-size: 28px;
  line-height: 1;
}

.commercial-stories {
  margin-top: 100px;
  padding: 100px 0 0;
  background: linear-gradient(#e0f2ff 0%, #fff 100%);
}

.commercial-stories-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.commercial-stories-heading a {
  color: var(--brand);
  font-size: 20px;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.commercial-story-grid {
  display: grid;
  margin-top: 40px;
  gap: 40px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commercial-story-grid button {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.commercial-story-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .3s ease;
}

.commercial-story-grid button:hover img {
  transform: scale(1.03);
}

.commercial-article {
  padding-top: 100px;
  background: linear-gradient(#e0f2ff 0%, #fff 100%);
}

.commercial-article-intro {
  margin-top: 24px;
  color: #4f647b;
}

.commercial-article-intro p {
  margin: 0 0 8px;
}

.commercial-advantage-layout {
  display: grid;
  margin-top: 24px;
  gap: 100px;
  grid-template-columns: minmax(0, 1fr) 620px;
  align-items: start;
}

.commercial-advantage-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.commercial-advantage-copy h3 {
  margin: 0 0 24px;
  color: #181c24;
  font-size: 24px;
  line-height: 32px;
}

.commercial-advantage-copy p {
  margin: 0 0 24px;
}

.commercial-advantage-copy strong {
  display: block;
  margin-bottom: 8px;
  color: #181c24;
}

.commercial-advantage-copy ul,
.commercial-faq .accordion-panel ul {
  margin: 0;
  padding-left: 20px;
}

.commercial-article-quote {
  width: 100%;
  margin-top: 24px;
}

.commercial-faq-section {
  padding: 100px 0;
}

.commercial-faq {
  max-width: none;
  margin: 40px 0 0;
  border-left: 1px solid #e4eaf3;
  border-top: 0;
}

.commercial-faq .accordion-item {
  border-bottom: 0;
}

.commercial-faq .accordion-button {
  display: flex;
  width: 100%;
  min-height: 92px;
  padding: 28px 20px;
  align-items: center;
  gap: 36px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #181c24;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  text-align: left;
}

.commercial-faq .accordion-button::after {
  position: static;
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex: 0 0 14px;
  border-right: 3px solid #6c757d;
  border-bottom: 3px solid #6c757d;
  content: "";
  transform: rotate(45deg) translateY(-3px);
}

.commercial-faq .accordion-item.open .accordion-button::after {
  content: "";
  transform: rotate(225deg) translateY(-1px);
}

.commercial-faq-number {
  flex: 0 0 22px;
  color: var(--brand);
  font-weight: 600;
}

.commercial-faq .accordion-panel {
  max-width: 1100px;
  padding: 0 20px 28px 78px;
  color: #4f647b;
  font-size: 16px;
  line-height: 24px;
}

.commercial-faq .accordion-panel p {
  margin: 0 0 8px;
}

.commercial-mobile-actions {
  display: none;
}

@media (max-width: 767px) {

  body:has(.commercial-page) .site-header,
  body:has(.commercial-page) .header-inner {
    height: 60px;
  }

  body:has(.commercial-page) .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  body:has(.commercial-page) .brand-logo {
    width: 125px;
    height: 42px;
  }

  body:has(.commercial-page) .main-nav {
    top: 60px;
  }

  .commercial-wrap,
  .commercial-product-grid {
    width: calc(100% - 24px);
  }

  .commercial-hero {
    height: 400px;
  }

  .commercial-hero h1 {
    width: 100%;
    font-size: 30px;
    line-height: 36px;
  }

  .commercial-products {
    padding-top: 48px;
  }

  .commercial-product-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .commercial-product-copy {
    min-height: 52px;
    padding: 10px 20px;
  }

  .commercial-product-card:last-child .commercial-product-copy {
    min-height: 72px;
  }

  .commercial-product-copy h2 {
    font-size: 16px;
    line-height: 22px;
  }

  .commercial-product-copy span {
    font-size: 14px;
    line-height: 20px;
  }

  .commercial-section-title {
    font-size: 30px;
    line-height: 36px;
  }

  .commercial-customization {
    padding-top: 40px;
  }

  .commercial-customization-panel {
    display: block;
    min-height: 786px;
    margin-top: 32px;
    padding: 40px 74px 100px;
    border-radius: 8px;
  }

  .commercial-customization-item {
    width: auto;
    margin-bottom: 24px;
  }

  .commercial-customization-item:last-child {
    margin-bottom: 0;
  }

  .commercial-customization-item h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .commercial-customization-icon {
    width: 90px;
    height: 90px;
    margin: 12px auto;
  }

  .commercial-customization-icon img {
    width: 52px;
    height: 52px;
  }

  .commercial-customization-item p {
    font-size: 14px;
    line-height: 20px;
  }

  .commercial-quote {
    min-height: 132px;
    padding: 20px 18px;
    flex-direction: column;
    font-size: 18px;
    line-height: 28px;
  }

  .commercial-quote-overlap {
    width: 293px;
    max-width: calc(100% - 48px);
    margin-top: -40px;
  }

  .commercial-mail-icon {
    font-size: 26px;
  }

  .commercial-stories {
    margin-top: 80px;
    padding-top: 48px;
  }

  .commercial-stories-heading {
    display: block;
  }

  .commercial-stories-heading a {
    display: inline-block;
    margin-top: 4px;
    font-size: 16px;
  }

  .commercial-story-grid {
    margin-top: 32px;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commercial-article {
    padding-top: 72px;
  }

  .commercial-article-intro {
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
  }

  .commercial-article-intro p {
    margin-bottom: 8px;
  }

  .commercial-advantage-layout {
    display: flex;
    margin-top: 24px;
    flex-direction: column;
    gap: 32px;
  }

  .commercial-advantage-copy {
    order: 1;
    font-size: 14px;
    line-height: 20px;
  }

  .commercial-advantage-image {
    order: 2;
  }

  .commercial-advantage-copy h3 {
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 24px;
  }

  .commercial-advantage-copy p {
    margin-bottom: 16px;
  }

  .commercial-article-quote {
    margin-top: 24px;
  }

  .commercial-faq-section {
    padding: 48px 0 72px;
  }

  .commercial-faq {
    margin-top: 24px;
  }

  .commercial-faq .accordion-button {
    min-height: 92px;
    padding: 24px 16px;
    gap: 26px;
    font-size: 16px;
    line-height: 24px;
  }

  .commercial-faq .accordion-panel {
    padding: 0 16px 24px 64px;
    font-size: 14px;
    line-height: 20px;
  }

  .commercial-mobile-actions {
    position: fixed;
    z-index: 1001;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    height: 58px;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #e4eaf3;
    background: #fff;
  }

  .commercial-mobile-actions>* {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-right: 1px solid #e4eaf3;
    background: #fff;
    color: #6c757d;
    font-size: 11px;
  }

  .commercial-mobile-actions>*:last-child {
    border-right: 0;
  }

  .commercial-mobile-actions span {
    color: var(--brand);
    font-size: 18px;
  }

  body:has(.commercial-page) .site-footer {
    padding-top: 52px;
    padding-bottom: 98px;
  }

  body:has(.commercial-page) .footer-grid {
    gap: 34px;
  }

  body:has(.commercial-page) .footer-grid>div:nth-child(2) .footer-links,
  body:has(.commercial-page) .footer-grid>div:nth-child(3) .footer-links {
    display: none;
  }

  body:has(.commercial-page) .footer-grid>div:nth-child(2),
  body:has(.commercial-page) .footer-grid>div:nth-child(3) {
    min-height: 28px;
  }

  body:has(.commercial-page) .site-footer h3 {
    margin-bottom: 0;
  }

  body:has(.commercial-page) .footer-contact h3 {
    margin-bottom: 24px;
  }
}

@media (max-width: 1280px) {
  .nav-list {
    gap: 24px;
  }

  .brand-logo {
    width: 180px;
  }

  .manufacturing-grid {
    gap: 0;
  }

  .factory-main img {
    height: 100%;
  }
}

@media (max-width: 1024px) {

  html,
  body {
    overflow-x: clip;
  }

  .mobile-toggle {
    display: block;
    margin-left: auto;
  }

  .main-nav {
    position: fixed;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 22px 24px;
    overflow-y: auto;
    visibility: hidden;
    background: #fff;
    opacity: 0;
    transform: translateX(100%);
    transition: 0.3s ease;
  }

  body:not(.menu-open) .main-nav {
    display: none;
  }

  body.menu-open .main-nav {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav-list {
    display: block;
  }

  .nav-link {
    height: auto;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-link::after {
    display: none;
  }

  .nav-item {
    display: block;
  }

  .dropdown {
    position: static;
    display: block;
    width: auto;
    padding: 0 0 10px 16px;
    visibility: visible;
    border: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  .header-actions {
    display: none;
  }

  .manufacturing-grid,
  .company-grid,
  .split,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .manufacturing-grid {
    flex-direction: column;
    gap: 48px;
  }

  .manufacturing-media,
  .manufacturing-copy {
    width: 100%;
  }

  .manufacturing-copy {
    margin-top: 0;
  }

  .split.reverse .split-media {
    order: initial;
  }

  .factory-main img {
    height: 100%;
  }

  .product-grid,
  .archive-grid,
  .cards-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-details-overview {
    gap: 42px;
    grid-template-columns: 1fr;
  }

  .product-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-feature-panel,
  .product-feature-panel-alt {
    grid-template-columns: 1fr 1fr;
  }

  .product-certificate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-diagram img {
    width: 100%;
    max-width: 900px;
  }

  .product-contact-banner {
    grid-template-columns: 1fr;
  }

  .cards-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    flex-wrap: wrap;
  }

  .article-layout {
    grid-template-columns: 1fr;
  }

  .toc {
    position: static;
  }

  .resources-layout {
    grid-template-columns: 31% minmax(0, 1fr);
  }

  .faq-reference-layout {
    grid-template-columns: 31% minmax(0, 1fr);
  }

  .download-reference-layout {
    grid-template-columns: 31% minmax(0, 1fr);
  }

  .blog-reference-list {
    width: calc(100% - 22px);
  }

  .blog-reference-item {
    gap: 36px;
  }

  .blog-reference-hero-copy {
    width: min(100%, 54%);
  }

  .blog-reference-media {
    width: min(34rem, 100%);
    height: 18.5rem;
  }

  .blog-reference-title {
    font-size: 32px;
  }

  .resources-side {
    padding-inline: 28px;
  }

  .resources-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-details-hero-copy {
    width: min(100%, 560px);
  }

  .product-details-hero-copy h1 {
    font-size: 48px;
  }

  .product-details-hero-copy p {
    max-width: 590px;
    font-size: 17px;
  }
}

@media (max-width: 767px) {
  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .section {
    padding: 68px 0;
  }

  .site-header,
  .header-inner {
    height: 60px;
  }

  .main-nav {
    top: 60px;
  }

  .brand-logo {
    width: 165px;
    height: 58px;
  }

  .main-nav {
    top: 70px;
  }

  .hero,
  .hero-content {
    height: 75vh;
    min-height: 75vh;
  }

  .hero-content {
    padding-top: 20vh;
  }

  .hero-glass {
    padding: 10px 20px;
  }

  .hero-title {
    font-size: 30px;
    line-height: 36px;
  }

  .hero-copy .btn {
    min-width: 0;
    margin-top: 60px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .hero-pagination.swiper-pagination {
    bottom: 20px;
    gap: 8px;
  }

  .category-tabs {
    display: flex;
    padding-bottom: 12px;
    overflow-x: auto;
  }

  .category-tab {
    min-width: 210px;
    min-height: 78px;
    padding: 0 10px;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
  }

  .category-tab .tab-icon svg {
    width: 28px;
    max-height: 28px;
  }

  .product-grid,
  .archive-grid,
  .cards-3,
  .cards-4,
  .news-grid,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .product-showcase {
    padding: 68px 0;
  }

  .factory-main img {
    height: 100%;
  }

  .manufacturing-processes {
    flex-direction: column;
  }

  .manufacturing-process>figure {
    aspect-ratio: 4 / 3;
  }

  .manufacturing-copy h2 {
    font-size: 32px;
    line-height: 38px;
  }

  .feature-check {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .case-card .case-caption {
    display: none;
  }

  .proofs {
    display: grid;
    justify-content: start;
    gap: 12px;
  }

  .company-grid {
    gap: 34px;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .featured-news {
    min-height: auto;
  }

  .featured-news>img {
    height: 280px;
  }

  .featured-news-card {
    position: static;
    width: 100%;
    padding: 28px;
    border: 1px solid var(--border);
  }

  .page-hero {
    min-height: 320px;
  }

  .product-details-hero-media {
    min-height: 340px;
  }

  .product-details-hero-media img {
    min-height: 340px;
  }

  .product-details-hero-copy {
    top: 52px;
    transform: none;
    width: 100%;
  }

  .product-details-hero-copy h1 {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.2;
  }

  .product-details-hero-copy p {
    max-width: 100%;
    font-size: 15px;
    line-height: 22px;
  }

  .product-details-anchor-nav {
    margin-top: -18px;
    width: calc(100% - 24px);
  }

  .product-details-anchor-nav a {
    white-space: nowrap;
    min-width: 120px;
  }

  .product-details-overview {
    gap: 32px;
  }

  .product-details-copy .section-title,
  .product-details-copy .section-copy {
    margin-bottom: 10px;
    font-size: 34px;
    line-height: 42px;
  }

  .product-details-thumb-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .product-feature-grid,
  .product-tech-grid,
  .product-feature-panels-grid,
  .product-certificate-grid {
    margin-top: 26px;
    gap: 16px;
    grid-template-columns: 1fr;
  }

  .product-feature-panel,
  .product-feature-panel-alt,
  .product-contact-banner {
    grid-template-columns: 1fr;
  }

  .product-feature-item h3 {
    font-size: 22px;
  }

  .product-feature-body h3 {
    font-size: 24px;
  }

  .product-spec-table-wrap table {
    min-width: 680px;
  }

  .subnav {
    overflow-x: auto;
  }

  .subnav a {
    white-space: nowrap;
  }

  .timeline::before {
    left: 9px;
  }

  .timeline-item,
  .timeline-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 38px 42px;
    text-align: left;
  }

  .timeline-item::after,
  .timeline-item:nth-child(even)::after {
    right: auto;
    left: 0;
  }

  .download-row {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field.full {
    grid-column: auto;
  }

  .footer-grid {
    flex-direction: column;
  }

  .footer-bottom {
    display: block;
  }

  .footer-bottom a {
    display: inline-block;
    margin-top: 12px;
  }

  .section-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section-actions .btn {
    width: 100%;
  }

  .modal-panel {
    padding: 32px 20px;
  }

  .modal-steps {
    grid-template-columns: 1fr;
  }

  .contact-breadcrumb {
    padding-top: 14px;
  }

  .contact-page-heading {
    margin-top: 30px;
  }

  .contact-page-heading h1 {
    margin-bottom: 12px;
    font-size: 32px;
    line-height: 40px;
  }

  .contact-inquiry-form {
    margin-top: 4px;
    padding: 28px 20px;
  }

  .contact-form-intro h2 {
    font-size: 30px;
    line-height: 36px;
  }

  .contact-form-section {
    padding: 30px 0;
  }

  .contact-company-fields {
    grid-template-columns: 1fr;
  }

  .contact-field-wide {
    grid-column: auto;
  }

  .contact-form-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-form-submit button {
    width: 100%;
  }

  .contact-map {
    width: 100%;
    height: 360px;
    margin-top: 24px;
  }

  body:has(.resources-page) .site-header,
  body:has(.resources-page) .header-inner {
    height: 58px;
  }

  body:has(.resources-page) .brand-logo {
    width: 125px;
    height: 42px;
  }

  body:has(.resources-page) .main-nav {
    top: 58px;
  }

  body:has(.resources-page) .mobile-toggle {
    width: 36px;
    height: 36px;
    padding: 8px;
  }

  .resources-hero {
    width: calc(100% - 22px);
    height: 406px;
    margin-inline: 11px;
  }

  .resources-hero-inner {
    width: 100%;
  }

  .resources-breadcrumb {
    top: 14px;
    left: 11px;
    font-size: 14px;
  }

  .resources-hero-copy {
    top: 106px;
    left: 0;
    width: 100%;
    max-width: none;
  }

  .resources-hero-copy h1 {
    margin-bottom: 28px;
    font-size: 32px;
    line-height: 40px;
  }

  .resources-hero-copy p {
    width: calc(100% - 18px);
    margin-inline: auto;
    font-size: 14px;
    line-height: 19px;
    text-align: center;
  }

  .resources-body {
    margin: 36px 0 48px;
  }

  .resources-layout {
    display: block;
    width: calc(100% - 22px);
  }

  .resources-side {
    display: none;
  }

  .resources-main h2 {
    font-size: 22px;
    line-height: 27px;
  }

  .resources-copy {
    margin-top: 14px;
    font-size: 15px;
    line-height: 19px;
  }

  .resources-benefits ul {
    margin-top: 20px;
    padding-left: 19px;
    font-size: 14px;
    line-height: 19px;
  }

  .resources-products {
    margin-top: 32px;
  }

  .resource-products-swiper {
    margin-top: 18px;
    padding: 10px 10px 27px;
  }

  .resource-product-card>div {
    min-height: 104px;
    padding: 18px 16px;
  }

  .resource-product-card span {
    font-size: 14px;
    line-height: 20px;
  }

  .resource-product-card h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .resources-cases {
    margin-top: 26px;
  }

  .resources-case-grid {
    margin-top: 12px;
    grid-template-columns: 1fr;
  }

  .resources-case-grid button {
    height: auto;
    aspect-ratio: 320 / 240;
  }

  .resources-contact-note {
    min-height: 122px;
    margin-top: 24px;
    padding: 22px 20px;
  }

  .resources-contact-note strong {
    font-size: 20px;
    line-height: 27px;
  }

  .resource-lightbox {
    padding: 64px 16px 24px;
  }

  .resource-lightbox img {
    width: calc(100vw - 32px);
    height: auto;
    max-height: calc(100dvh - 88px);
  }

  body:has(.faq-reference-page) .site-header,
  body:has(.faq-reference-page) .header-inner {
    height: 60px;
  }

  body:has(.faq-reference-page) .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  body:has(.faq-reference-page) .brand-logo {
    width: 125px;
    height: 42px;
  }

  body:has(.faq-reference-page) .main-nav {
    top: 60px;
  }

  body:has(.faq-reference-page) .mobile-toggle {
    width: 36px;
    height: 36px;
    padding: 8px;
    margin-left: 0;
  }

  body:has(.faq-reference-page) .header-actions {
    display: flex;
    margin-left: auto;
    gap: 0;
  }

  body:has(.faq-reference-page) .header-search {
    width: 34px;
    height: 34px;
    border: 1px solid #aeb5bc;
    border-radius: 50%;
    font-size: 21px;
  }

  .faq-reference-hero {
    height: 422px;
    aspect-ratio: auto;
  }

  .faq-reference-hero-inner {
    width: calc(100% - 24px);
  }

  .faq-reference-breadcrumb {
    top: 14px;
    font-size: 14px;
    line-height: 24px;
  }

  .faq-reference-hero-copy {
    top: 121px;
    width: 100%;
    max-width: none;
  }

  .faq-reference-hero-copy h1 {
    margin-bottom: 24px;
    font-size: 30px;
    line-height: 36px;
  }

  .faq-reference-hero-copy p {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .faq-reference-body {
    margin: 40px 0 50px;
  }

  .faq-reference-layout {
    display: block;
    width: calc(100% - 24px);
  }

  .faq-reference-side {
    display: none;
  }

  .faq-reference-button {
    font-size: 18px;
    grid-template-columns: 14px minmax(0, 1fr) 20px;
    line-height: 24px;
  }

  .faq-reference-panel {
    margin: 10px 56px 0 50px;
    font-size: 14px;
    line-height: 20px;
  }

  body:has(.download-reference-page) .site-header,
  body:has(.download-reference-page) .header-inner {
    height: 60px;
  }

  body:has(.download-reference-page) .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  body:has(.download-reference-page) .brand-logo {
    width: 125px;
    height: 42px;
  }

  body:has(.download-reference-page) .main-nav {
    top: 60px;
  }

  body:has(.download-reference-page) .mobile-toggle {
    width: 36px;
    height: 36px;
    padding: 8px;
    margin-left: 0;
  }

  body:has(.download-reference-page) .header-actions {
    display: flex;
    margin-left: auto;
    gap: 0;
  }

  body:has(.download-reference-page) .header-search {
    width: 34px;
    height: 34px;
    border: 1px solid #aeb5bc;
    border-radius: 50%;
    font-size: 21px;
  }

  .download-reference-hero {
    height: 422px;
    aspect-ratio: auto;
  }

  .download-reference-hero-inner {
    width: calc(100% - 24px);
  }

  .download-reference-hero h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .download-reference-body {
    margin: 40px 0 50px;
  }

  .download-reference-layout {
    display: block;
    width: calc(100% - 24px);
  }

  .download-reference-side {
    display: none;
  }

  .download-reference-panel {
    gap: 10px;
  }

  .download-reference-card {
    min-height: 125px;
    padding: 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .download-reference-file {
    width: 100%;
    gap: 10px;
  }

  .download-reference-copy {
    width: 100%;
  }

  .download-reference-icon-desktop {
    display: none;
  }

  .download-reference-icon-mobile {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 14px;
    vertical-align: middle;
  }

  .download-reference-meta {
    font-size: 14px;
    line-height: 20px;
  }

  .download-reference-type {
    margin-right: 16px;
  }

  .download-reference-copy strong {
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
  }

  [data-download-page="1"] .download-reference-card:nth-child(4) {
    min-height: 165px;
  }

  .download-reference-button {
    display: none;
  }

  .download-reference-mobile-action {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  .download-reference-mobile-action::before {
    content: "⇩";
    font-size: 14px;
    line-height: 1;
  }

  .download-reference-pagination {
    margin-top: 30px;
    justify-content: center;
  }

  .download-reference-pagination button {
    width: 24px;
    height: 32px;
    font-size: 14px;
    line-height: 20px;
  }

  .download-reference-pagination button.active {
    height: 35px;
  }

  body:has(.blog-reference-page) .site-header,
  body:has(.blog-reference-page) .header-inner {
    height: 60px;
  }

  body:has(.blog-reference-page) .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  body:has(.blog-reference-page) .brand-logo {
    width: 125px;
    height: 42px;
  }

  body:has(.blog-reference-page) .main-nav {
    top: 60px;
  }

  body:has(.blog-reference-page) .mobile-toggle {
    width: 36px;
    height: 36px;
    padding: 8px;
    margin-left: 0;
  }

  body:has(.blog-reference-page) .header-actions {
    display: flex;
    margin-left: auto;
    gap: 0;
  }

  body:has(.blog-reference-page) .header-search {
    width: 34px;
    height: 34px;
    border: 1px solid #aeb5bc;
    border-radius: 50%;
    font-size: 21px;
  }

  .blog-reference-hero {
    height: 422px;
    aspect-ratio: auto;
  }

  .blog-reference-hero-inner {
    width: calc(100% - 24px);
  }

  .blog-reference-breadcrumb {
    left: 0;
    font-size: 14px;
    line-height: 24px;
  }

  .blog-reference-hero-copy {
    top: 121px;
    width: 100%;
    max-width: none;
  }

  .blog-reference-hero-copy h1 {
    margin-bottom: 24px;
    font-size: 30px;
    line-height: 36px;
  }

  .blog-reference-hero-copy p {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .blog-reference-body {
    margin: 40px 0 50px;
  }

  .blog-reference-list {
    width: calc(100% - 24px);
  }

  .blog-reference-item {
    display: flex;
    flex-direction: column-reverse;
    gap: 14px;
  }

  .blog-reference-text {
    width: 100%;
  }

  .blog-reference-title {
    font-size: 28px;
    line-height: 1.32;
  }

  .blog-reference-media {
    width: 100%;
    height: auto;
  }

  .blog-reference-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .blog-reference-pagination {
    margin-top: 24px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-marquee {
    overflow-x: auto;
  }

  .case-marquee-track {
    animation: none;
  }

  .case-marquee-group[aria-hidden="true"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* CAIMEN article detail layout */
.article-reference-page {
  background: #fff;
}

body:has(.article-reference-page) {
  overflow-x: hidden;
}

.article-breadcrumb {
  padding-top: 18px;
  color: #9aa0a8;
  font-size: 14px;
  line-height: 24px;
}

.article-breadcrumb a {
  color: #9aa0a8;
}

.article-breadcrumb span {
  margin: 0 4px;
}

.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
  padding-top: 58px;
  padding-bottom: 88px;
}

.article-main-column {
  min-width: 0;
}

.article-main-column>h1 {
  margin: 0;
  max-width: 1224px;
  color: #181c24;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 18px 0;
  border-top: 1px solid #e4eaf3;
  border-bottom: 1px solid #e4eaf3;
  color: #6c757d;
  font-size: 16px;
}

.share-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.share-links a {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
}

.share-links a:nth-child(1) {
  background: #3b5998
}

.share-links a:nth-child(2) {
  background: #00aced
}

.share-links a:nth-child(3) {
  background: #007bb5
}

.article-toc {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 12px;
  background: #f0eef2;
  color: #3f4652;
  font-size: 16px;
  line-height: 24px;
}

.article-toc strong {
  padding: 0 0 0;
  font-weight: 400;
}

.article-toc a {
  position: relative;
  padding-right: 28px;
  color: #3f4652;
}

.article-toc a::after {
  position: absolute;
  right: 8px;
  content: '›';
  font-size: 23px;
  line-height: 20px;
}

.article-content {
  max-width: none;
  color: #6c757d;
  font-size: 16px;
  line-height: 24px;
}

.article-content p {
  margin: 0 0 20px;
  color: #6c757d;
}

.article-content h2 {
  margin: 30px 0 18px;
  color: #181c24;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
}

.article-content h3 {
  margin: 26px 0 14px;
  color: #181c24;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

.article-content a {
  color: #3f4652;
  font-weight: 700;
  text-decoration: underline;
}

.article-content figure {
  margin: 16px 40px;
}

.article-content figure img {
  width: 100%;
  height: auto;
  margin: 0;
}

.article-content table {
  width: 100%;
  margin: 10px 0 20px;
  border-collapse: collapse;
  color: #6c757d;
  font-size: 15px;
  line-height: 20px;
}

.article-content th, .article-content td {
  padding: 4px;
  border: 1px solid #9a9a9a;
  text-align: left;
  vertical-align: top;
}

.article-content th {
  color: #6c757d;
  font-weight: 700;
}

.article-table-scroll {
  width: 100%;
  max-width: 100%;
  margin: 10px 0 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.article-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: #2062ae #e4eaf3;
}

.article-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.article-table-scroll::-webkit-scrollbar-track {
  background: #e4eaf3;
}

.article-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #2062ae;
}

.article-table-scroll table {
  margin: 0;
}

.article-toc-group {
  display: grid;
  gap: 4px;
}

.article-toc-link {
  position: relative;
  padding-right: 28px;
  color: #3f4652;
}

.article-toc-link::after {
  position: absolute;
  right: 8px;
  content: '›';
  font-size: 23px;
  line-height: 20px;
}

.article-toc-sublist {
  display: grid;
  gap: 3px;
  margin: 0 0 4px 20px;
  padding: 0;
  list-style: none;
}

.article-toc-sublist a {
  padding-right: 28px;
  color: #6c757d;
  font-size: .92em;
}

.article-sidebar {
  padding-top: 3px;
}

.recent-posts {
  padding: 18px 28px 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(24 28 36 / 12%);
}

.recent-posts h3 {
  margin: 0 0 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4eaf3;
  color: #3f4652;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

.recent-posts a {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid #e4eaf3;
  color: #3f4652;
  font-size: 15px;
  line-height: 20px;
}

.recent-posts a:last-child {
  border-bottom: 0;
}

.recent-posts img {
  width: 120px;
  height: 70px;
  object-fit: cover;
}

.recent-posts small {
  display: block;
  margin-top: 12px;
  color: #6c757d;
  font-size: 14px;
  line-height: 20px;
}

.article-neighbor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 34px;
  padding: 18px 24px;
  border: 1px solid #e4eaf3;
  color: #6c757d;
  font-size: 15px;
  line-height: 22px;
}

.article-neighbor-link {
  display: flex;
  min-width: 0;
  padding: 5px 0;
  align-items: center;
  gap: 9px;
  color: inherit;
  transition: color .2s ease;
}

.article-neighbor-link>span:not(.article-neighbor-icon) {
  min-width: 0;
}

.article-neighbor-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid #d6dfeb;
  color: var(--brand);
  place-items: center;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.article-neighbor-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-neighbor-link:hover,
.article-neighbor-link:focus-visible {
  color: var(--brand);
}

.article-neighbor-link:hover .article-neighbor-icon,
.article-neighbor-link:focus-visible .article-neighbor-icon {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.article-neighbor-prev:hover .article-neighbor-icon,
.article-neighbor-prev:focus-visible .article-neighbor-icon {
  transform: translateX(-4px);
}

.article-neighbor-next:hover .article-neighbor-icon,
.article-neighbor-next:focus-visible .article-neighbor-icon {
  transform: translateX(4px);
}

.article-neighbor-link:active .article-neighbor-icon {
  transform: scale(.9);
}

.article-neighbor-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(32 98 174 / 32%);
  outline-offset: 4px;
}

.article-neighbor a:last-child {
  justify-content: flex-end;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .article-neighbor-link,
  .article-neighbor-icon {
    transition: none;
  }
}

.article-inquiry {
  margin-top: 42px;
}

.article-inquiry>h2 {
  margin: 0 0 20px;
  color: #181c24;
  font-size: 32px;
  line-height: 40px;
}

.article-form-panel {
  margin-left: 64px;
  padding: 38px 40px 34px;
  border: 1px solid #e4eaf3;
}

.article-form-panel .eyebrow {
  margin: 0 0 8px;
  color: #2062ae;
  font-size: 13px;
  letter-spacing: .08em;
}

.article-form-panel h3 {
  margin: 0 0 8px;
  color: #181c24;
  font-size: 30px;
  line-height: 38px;
}

.article-form-panel>p:not(.eyebrow) {
  margin-bottom: 26px;
  color: #6c757d;
  font-size: 14px;
}

.article-form-panel .form-grid {
  gap: 20px;
}

.article-form-panel .field {
  gap: 6px;
}

.article-form-panel .field label {
  font-size: 14px;
  font-weight: 700;
}

.article-form-panel input, .article-form-panel select {
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  color: #6c757d;
  background: #fff;
}

.article-form-submit {
  display: flex;
  grid-column: 1/-1;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 26px;
  border-top: 1px solid #e4eaf3;
}

.article-form-submit small {
  color: #6c757d;
  font-size: 13px;
}

.article-form-submit .btn {
  min-width: 250px;
  border-radius: 0;
}

@media (max-width:1024px) {
  .article-shell {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 36px
  }

  .article-sidebar {
    order: -1
  }

  .recent-posts {
    max-width: none
  }

  .article-form-panel {
    margin-left: 0
  }
}

@media (max-width:767px) {
  .article-breadcrumb {
    padding-top: 14px;
    font-size: 13px
  }

  .article-shell {
    width: calc(100% - 32px);
    padding-top: 28px;
    padding-bottom: 56px
  }

  .article-main-column>h1 {
    font-size: 30px;
    line-height: 36px
  }

  .article-meta {
    align-items: flex-start;
    flex-direction: column;
    font-size: 14px
  }

  .article-toc {
    font-size: 14px;
    line-height: 20px
  }

  .article-content {
    font-size: 15px;
    line-height: 22px
  }

  .article-content h2 {
    font-size: 24px;
    line-height: 30px
  }

  .article-content h3 {
    font-size: 18px;
    line-height: 24px
  }

  .article-content figure {
    margin: 16px 0
  }

  .article-table-scroll {
    margin: 10px 0 20px;
    padding-bottom: 6px
  }

  .article-content table {
    width: max-content;
    min-width: 680px;
    font-size: 12px;
    line-height: 16px
  }

  .article-neighbor {
    grid-template-columns: 1fr;
    padding: 14px 16px
  }

  .article-neighbor a:last-child {
    justify-content: flex-start;
    text-align: left
  }

  .article-inquiry>h2 {
    font-size: 28px;
    line-height: 34px
  }

  .article-form-panel {
    padding: 26px 20px
  }

  .article-form-panel h3 {
    font-size: 25px;
    line-height: 32px
  }

  .article-form-panel .form-grid {
    grid-template-columns: 1fr
  }

  .article-form-submit {
    align-items: stretch;
    flex-direction: column;
    gap: 18px
  }

  .article-form-submit .btn {
    width: 100%;
    min-width: 0
  }
}

/* CAIMEN Water Cube project detail layout */
.project-detail-page .article-shell {
  width: min(calc(100% - 48px), 106.5rem);
  grid-template-columns: minmax(0, 1224px) 420px;
  gap: 60px;
}

body:has(.project-detail-page) .article-breadcrumb {
  width: min(calc(100% - 48px), 106.5rem);
}

.project-detail-page .article-meta {
  margin-top: 20px;
  padding: 18px 0;
}

.project-detail-page .share-links a {
  gap: 5px;
  min-height: 32px;
  padding: 4px 12px;
  font-size: 16px;
  line-height: 24px;
}

.project-detail-page .share-links svg {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  fill: currentColor;
}

.project-toc-bar {
  min-height: 24px;
  margin-bottom: 16px;
  padding: 0 2px;
  color: #6c757d;
  background: #f0eef2;
  font-size: 16px;
  line-height: 24px;
}

.project-article-content {
  padding-bottom: 30px;
  border-bottom: 1px solid #343a40;
}

.project-article-content .project-lead-image {
  width: 720px;
  max-width: calc(100% - 80px);
  margin: 16px 40px;
}

.project-article-content .project-lead-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-article-content strong {
  color: #6c757d;
  font-weight: 700;
}

.project-article-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #343a40;
}

.project-article-section:first-of-type {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

.project-article-section h3 {
  margin: 0 0 18px;
  font-size: 18.72px;
  line-height: 28.08px;
  font-weight: 600;
}

.project-article-section p:last-child,
.project-article-section ul:last-child,
.project-article-section ol:last-child {
  margin-bottom: 0;
}

.project-article-content ul,
.project-article-content ol {
  margin: 0 0 20px;
  padding-left: 40px;
}

.project-article-content li {
  margin: 0;
}

.project-feature-list {
  list-style-position: outside;
}

.project-article-cta p {
  margin-bottom: 0;
}

.project-detail-page .recent-posts {
  padding: 28px 28px 22px;
  box-shadow: 0 10px 28px rgb(24 28 36 / 12%);
}

.project-detail-page .recent-posts h3 {
  color: #181c24;
  font-size: 20px;
  line-height: 28px;
}

.project-detail-page .recent-posts a {
  grid-template-columns: 120px minmax(0, 1fr);
}

.project-detail-page .recent-posts span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-detail-page .recent-posts small {
  display: block;
  -webkit-line-clamp: initial;
}

.project-detail-page .article-neighbor {
  margin-top: 34px;
}

.project-detail-page .article-form-panel {
  width: calc(100% - 124px);
  margin-inline: 62px;
  padding: 40px;
}

.project-detail-page .article-form-panel h3 {
  font-size: 38px;
  line-height: 45.6px;
}

.project-detail-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 32px 0;
  border: 0;
  border-top: 1px solid #e4eaf3;
}

.project-detail-form fieldset:first-child {
  margin-top: 8px;
}

.project-form-legend {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 16px;
  width: 100%;
  margin: 0 0 28px;
  padding: 0;
  color: #101828;
}

.project-form-legend span {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: 1 / span 2;
  border: 1px solid #c8d8eb;
  color: #2062ae;
  background: #f5f9fd;
  font-size: 12px;
  line-height: 1;
  place-items: center;
}

.project-form-legend b {
  font-size: 20px;
  line-height: 27px;
  font-weight: 650;
}

.project-form-legend small {
  color: #6c757d;
  font-size: 14px;
  line-height: 20px;
}

.project-detail-form .project-form-grid {
  gap: 24px;
}

.project-detail-form .field {
  gap: 6px;
}

.project-detail-form .field label {
  font-size: 14px;
  font-weight: 700;
}

.project-detail-form input,
.project-detail-form select {
  min-width: 0;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  color: #6c757d;
  background: #fff;
}

@media (max-width: 1200px) {
  .project-detail-page .article-shell {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 36px;
  }

  .project-detail-page .article-form-panel {
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 1024px) {
  .project-detail-page .article-shell {
    display: block;
  }

  .project-detail-page .article-sidebar {
    display: none;
  }
}

@media (max-width: 767px) {
  .project-detail-page .article-shell {
    width: min(calc(100% - 32px), 34rem);
  }

  body:has(.project-detail-page) .article-breadcrumb {
    width: min(calc(100% - 32px), 34rem);
  }

  .project-detail-page .article-main-column>h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .project-detail-page .share-links a {
    font-size: 13px;
    line-height: 18px;
  }

  .project-article-content .project-lead-image {
    width: 100%;
    max-width: none;
    margin: 16px 0;
  }

  .project-article-content ul,
  .project-article-content ol {
    padding-left: 22px;
  }

  .project-detail-page .article-form-panel {
    padding: 26px 20px;
  }

  .project-detail-page .article-form-panel h3 {
    font-size: 25px;
    line-height: 32px;
  }

  .project-form-legend {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
  }

  .project-form-legend b {
    font-size: 18px;
    line-height: 24px;
  }

  .project-detail-form .project-form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* CAIMEN project listing layout */
.projects-reference-page {
  background: #fff;
}

.projects-reference {
  width: min(calc(100% - 48px), 106.5rem);
  padding: 100px 0 108px;
}

.projects-reference>h1 {
  margin: 0 0 44px;
  color: #181c24;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.project-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.project-feature+.project-feature {
  margin-top: 20px;
}

.project-feature figure {
  min-width: 0;
  margin: 0;
}

.project-feature figure img {
  display: block;
  width: 100%;
  height: auto;
}

.project-feature-copy {
  display: flex;
  min-width: 0;
  padding: 0 68px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transform: translateY(8px);
}

.project-feature-copy h2 {
  margin: 0 0 6px;
  color: #181c24;
  font-size: 28px;
  font-weight: 600;
  line-height: 42px;
}

.project-feature-copy p {
  margin: 0;
  color: #6c757d;
  font-size: 16px;
  line-height: 24px;
}

.project-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  padding: 13px 20px;
  background: #1d5ca7;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  transition: background-color 160ms ease;
}

.project-more:hover,
.project-more:focus-visible {
  background: #052667;
}

.project-feature-reverse figure {
  order: 2;
}

.project-feature-reverse .project-feature-copy {
  order: 1;
}

.project-more-all {
  margin-top: 50px;
}

@media (max-width: 767px) {

  body:has(.projects-reference-page) .site-header,
  body:has(.projects-reference-page) .header-inner {
    height: 60px;
  }

  body:has(.projects-reference-page) .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  body:has(.projects-reference-page) .brand-logo {
    width: 125px;
    height: 42px;
  }

  body:has(.projects-reference-page) .main-nav {
    top: 60px;
  }

  body:has(.projects-reference-page) .header-actions {
    display: flex;
    margin-left: auto;
    gap: 0;
  }

  body:has(.projects-reference-page) .header-search {
    width: 34px;
    height: 34px;
    border: 1px solid #aeb5bc;
    border-radius: 50%;
    font-size: 21px;
  }

  body:has(.projects-reference-page) .mobile-toggle {
    width: 36px;
    height: 36px;
    margin-left: 0;
    padding: 8px;
  }

  .projects-reference {
    width: calc(100% - 24px);
    padding: 48px 0 56px;
  }

  .projects-reference>h1 {
    margin-bottom: 28px;
    font-size: 30px;
    line-height: 36px;
  }

  .project-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-feature+.project-feature {
    margin-top: 36px;
  }

  .project-feature-copy {
    padding: 28px 0 0;
    transform: none;
  }

  .project-feature-copy h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .project-feature-copy p {
    font-size: 15px;
    line-height: 22px;
  }

  .project-more {
    margin-top: 28px;
  }

  .project-feature-reverse .project-feature-copy {
    order: 1;
  }

  .project-feature-reverse figure {
    order: 2;
    margin-top: 28px;
  }

  .project-more-all {
    margin-top: 40px;
  }
}

/* CAIMEN projects archive layout */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.projects-list-page {
  background: #fff;
}

.projects-list {
  width: min(calc(100% - 48px), 106.5rem);
  margin: 0 auto;
  padding: 70px 0 103px;
  transform: translateX(3.5px);
}

.projects-category-nav {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}

.projects-category-nav::-webkit-scrollbar {
  display: none;
}

.projects-category-nav a {
  position: relative;
  flex: 0 0 auto;
  padding-bottom: 6px;
  color: #6c757d;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  white-space: nowrap;
}

.projects-category-nav a.active {
  color: #2062ae;
  font-weight: 600;
}

.projects-category-nav a.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #2062ae;
  content: "";
}

.projects-card-grid {
  display: grid;
  margin-top: 43px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 40px;
}

.project-card {
  min-width: 0;
}

.project-card>a:first-child {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

.project-card-image {
  width: min(100%, 440px);
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 220ms ease;
}

.project-card:hover .project-card-image {
  transform: scale(1.05);
}

.project-card-title {
  display: block;
  max-width: 100%;
  margin-top: 16px;
  overflow: visible;
  color: #181c24;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.project-card-title:hover,
.project-card-title:focus-visible {
  color: #1d5ca7;
}

.projects-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  color: #2062ae;
}

.projects-pagination>* {
  display: block;
  min-width: 30px;
  padding: 6px 10px;
  color: #2062ae;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
}

.projects-pagination .current,
.projects-pagination .ellipsis {
  position: relative;
}

.projects-pagination .current::after,
.projects-pagination .ellipsis::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  background: #052667;
  content: "";
}

.projects-pagination .ellipsis::after {
  left: 9px;
  right: 9px;
}

.projects-pagination .next {
  min-width: 38px;
  padding-inline: 10px;
  color: #6c757d;
  font-size: 34px;
  font-weight: 400;
  line-height: 28px;
}

@media (max-width: 1199px) {
  .projects-card-grid {
    gap: 20px;
  }

  .project-card-image {
    width: 100%;
  }
}

@media (max-width: 767px) {

  body:has(.projects-list-page) .site-header,
  body:has(.projects-list-page) .header-inner {
    height: 60px;
  }

  body:has(.projects-list-page) .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  body:has(.projects-list-page) .brand-logo {
    width: 125px;
    height: 42px;
  }

  body:has(.projects-list-page) .main-nav {
    top: 60px;
  }

  body:has(.projects-list-page) .header-actions {
    display: flex;
    margin-left: auto;
    gap: 0;
  }

  body:has(.projects-list-page) .header-search {
    width: 34px;
    height: 34px;
    border: 1px solid #aeb5bc;
    border-radius: 50%;
    font-size: 21px;
  }

  body:has(.projects-list-page) .mobile-toggle {
    width: 36px;
    height: 36px;
    margin-left: 0;
    padding: 8px;
  }

  .projects-list {
    width: calc(100% - 24px);
    padding: 36px 0 50px;
    transform: none;
  }

  .projects-category-nav {
    min-height: 44px;
    justify-content: flex-start;
    gap: 40px;
  }

  .projects-category-nav a {
    font-size: 14px;
    line-height: 20px;
  }

  .projects-card-grid {
    margin-top: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .project-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .project-card-title {
    margin-top: 16px;
    font-size: 18px;
    line-height: 28px;
  }

  .projects-pagination {
    margin-top: 36px;
  }

  .projects-pagination>* {
    min-width: 24px;
    padding-inline: 7px;
    font-size: 16px;
    line-height: 24px;
  }

  .projects-pagination .current::after,
  .projects-pagination .ellipsis::after {
    right: 7px;
    left: 7px;
  }
}

/* CAIMEN about page layout */
.about-reference-page {
  overflow-x: clip;
  overflow-y: visible;
  background: #fff;
}

.about-wide {
  width: min(calc(100% - 48px), 106.5rem);
  margin-inline: auto;
}

.about-hero {
  position: relative;
  height: 597.5px;
  overflow: hidden;
  color: #fff;
}

.about-hero>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero::after {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 7%);
  content: "";
}

.about-hero-copy {
  position: absolute;
  z-index: 1;
  top: 168px;
  left: max(24px, calc((100% - 106.5rem) / 2));
  width: 610px;
}

.about-hero-copy h1 {
  margin: 0 0 24px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.about-hero-copy p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.about-subnav {
  position: sticky;
  z-index: 900;
  top: 80px;
  height: 80px;
  border-bottom: 1px solid #eee;
  background: #fff;
  box-shadow: 0 2px 8px rgb(24 28 36 / 6%);
}

.about-subnav .about-wide {
  display: flex;
  height: 100%;
  align-items: stretch;
  gap: 80px;
  overflow-x: auto;
  scrollbar-width: none;
}

.about-subnav .about-wide::-webkit-scrollbar {
  display: none;
}

.about-subnav a {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: #181c24;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
}

.about-subnav a.active {
  color: #2062ae;
}

.about-subnav a.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #2062ae;
  content: "";
}

.about-content {
  margin-top: 100px;
  margin-bottom: 100px;
  color: #6c757d;
  font-size: 16px;
  line-height: 24px;
}

.about-content h2 {
  color: #6c757d;
  font-weight: 400;
}

.about-brand-story h2 {
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 30px;
}

.about-brand-story p {
  margin: 0;
}

.about-technology {
  display: grid;
  margin-top: 72px;
  grid-template-columns: 632px 670px;
  gap: 62px;
  align-items: start;
}

.about-achievements {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  gap: 38px 32px;
}

.about-achievements figure {
  width: 300px;
  margin: 0;
  text-align: center;
}

.about-achievements figure:nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}

.about-achievements figure:nth-child(3) {
  grid-row: 1;
  grid-column: 2;
}

.about-achievements img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

.about-achievements figcaption {
  padding-top: 20px;
  line-height: 24px;
}

.about-technology-copy h2 {
  margin: 0 0 32px;
  padding-bottom: 28px;
  border-bottom: 2px solid #1d5ca7;
  font-size: 24px;
  line-height: 24px;
}

.about-technology-copy p {
  margin: 0 0 28px;
}

.about-advantages {
  margin-top: 114px;
  text-align: center;
}

.about-advantages>h2,
.about-honor>h2,
.about-culture>h2,
.about-gallery-section>h2 {
  margin: 0 auto;
  font-size: 30px;
  line-height: 60px;
  text-align: center;
}

.about-advantages>h2 {
  width: 300px;
  border-bottom: 3px solid #1d5ca7;
}

.about-section-intro {
  margin: 20px 0 16px;
  color: rgb(51 51 51 / 81%);
  text-align: center;
}

.about-advantage-grid {
  display: grid;
  margin-inline: -30px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px;
}

.about-advantage-grid article {
  position: relative;
  height: 360px;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
}

.about-advantage-grid img {
  width: 100%;
  height: 100%;
  background: #286bb4;
  object-fit: cover;
}

.about-advantage-grid article>div {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-advantage-grid h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 23px;
  font-weight: 400;
  line-height: 23px;
}

.about-advantage-grid p {
  margin: 0;
  color: #fff;
  line-height: 20px;
}

.about-standards {
  margin-top: 38px;
}

.about-standards h2 {
  margin: 0 0 18px;
  color: #181c24;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
}

.about-standards ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-standards li {
  margin-bottom: 4px;
  padding: 9px 12px;
  background: #f3f3f3;
  color: #3f4652;
  line-height: 20px;
}

.about-standards li::before {
  margin-right: 12px;
  content: "✓";
}

.about-honor {
  position: relative;
  margin-top: 64px;
}

.about-honor>h2 {
  font-size: 27px;
  line-height: 27px;
}

.about-certificates {
  height: 330px;
  margin: 30px 52px 0;
  overflow: hidden;
}

.about-certificates .swiper-wrapper {
  align-items: stretch;
}

.about-certificates .swiper-slide {
  display: flex;
  height: 330px;
  margin: 0;
  align-items: center;
  justify-content: center;
}

.about-certificates img {
  width: 100%;
  height: 330px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.about-cert-arrow {
  position: absolute;
  z-index: 3;
  top: 190px;
  display: flex;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #aaa;
  color: #fff;
  transition: background-color .2s ease, opacity .2s ease;
}

.about-cert-arrow svg {
  width: 12px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-cert-arrow:hover {
  background: #2062ae;
}

.about-cert-arrow:focus-visible {
  outline: 3px solid rgb(32 98 174 / 35%);
  outline-offset: 3px;
}

.about-cert-arrow.swiper-button-disabled {
  opacity: .35;
  cursor: not-allowed;
}

.about-cert-arrow.previous {
  left: 10px;
}

.about-cert-arrow.next {
  right: 10px;
}

.about-culture {
  margin-top: 68px;
}

.about-culture-grid {
  display: grid;
  margin-top: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 360px;
  gap: 20px 30px;
}

.about-culture-grid article {
  position: relative;
  height: 360px;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
}

.about-culture-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-culture-grid article::after {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 12%);
  content: "";
}

.about-culture-grid article>div {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  padding: 28px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-culture-grid h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 27px;
  font-weight: 400;
  line-height: 27px;
}

.about-culture-grid p {
  margin: 0 0 12px;
  color: #fff;
  line-height: 20px;
}

.culture-values {
  grid-column: 1 / 3;
  grid-row: 1;
}

.culture-vision {
  grid-column: 1;
  grid-row: 2;
}

.culture-mission {
  grid-column: 2;
  grid-row: 2;
}

.culture-forward {
  grid-column: 3 / 5;
  grid-row: 1;
}

.about-view-more {
  display: table;
  margin: 76px auto 0;
  padding: 13px 20px;
  background: #1d5ca7;
  color: #fff;
  font-size: 18px;
  line-height: 23px;
}

.about-gallery-section {
  margin-top: 70px;
}

.about-gallery {
  display: grid;
  margin-top: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.about-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.about-finding {
  margin-top: 48px;
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #f8f8f8;
  box-shadow: 0 1px 3px rgb(24 28 36 / 8%);
}

.about-finding h2 {
  margin: 0 0 28px;
  color: #3f4652;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.about-finding p {
  margin: 0 0 22px;
}

.about-finding p:last-child {
  margin-bottom: 0;
}

.about-finding a {
  color: #2062ae;
}

/* CAIMEN OEM services page layout */
.oem-reference-page {
  color: #6c757d;
}

.oem-hero {
  position: relative;
  height: 597.5px;
  overflow: hidden;
  color: #fff;
}

.oem-hero>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oem-hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.oem-hero-copy>div {
  width: 600px;
}

.oem-hero-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.oem-hero-copy p {
  margin: 24px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.oem-content {
  margin-top: 100px;
  margin-bottom: 100px;
  padding-top: 10px;
  font-size: 16px;
  line-height: 24px;
}

.oem-content>h2,
.oem-advantages>h2 {
  margin: 0;
  color: #6c757d;
  font-size: 27px;
  font-weight: 400;
  line-height: 27px;
}

.oem-intro {
  margin-top: 30px;
}

.oem-intro p {
  margin: 0;
}

.oem-manufacturing {
  position: relative;
  height: 300px;
  margin-top: 60px;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.oem-manufacturing::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgb(32 98 174 / 74%);
  content: "";
}

.oem-manufacturing>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oem-manufacturing>div {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  padding: 28px 90px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.oem-manufacturing h3 {
  margin: 0;
  color: #fff;
  font-size: 27px;
  font-weight: 400;
  line-height: 27px;
}

.oem-manufacturing p {
  margin: 6px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.oem-manufacturing p+p {
  margin-top: 0;
}

.oem-advantages {
  margin-top: 70px;
}

.oem-advantages>h2 {
  text-align: center;
}

.oem-advantage-grid {
  display: grid;
  margin-top: 40px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.oem-advantage-grid article {
  min-width: 0;
  min-height: 383px;
  text-align: center;
}

.oem-advantage-grid img {
  display: block;
  width: 320px;
  height: 200px;
  margin-inline: auto;
  object-fit: cover;
}

.oem-advantage-grid h3 {
  margin: 16px 0 6px;
  color: #181c24;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
}

.oem-advantage-grid p {
  margin: 0;
  color: #6c757d;
}

.oem-contact-note {
  display: flex;
  min-height: 275px;
  margin-top: 58px;
  padding: 50px 0;
  border: 3px dashed #6c757d;
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.oem-contact-note p {
  margin: 0;
  color: #6c757d;
  font-size: 24px;
  font-style: italic;
  line-height: 38.4px;
}

.oem-contact-note a {
  color: #2062ae;
}

/* CAIMEN company history page layout */
.history-reference-page {
  color: #6c757d;
}

.history-hero {
  position: relative;
  height: 597.5px;
  overflow: hidden;
  color: #fff;
}

.history-hero>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.history-hero-copy>div {
  width: 600px;
}

.history-hero-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.history-hero-copy p {
  margin: 24px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.history-content {
  margin-top: 100px;
  margin-bottom: 100px;
  color: #6c757d;
  font-size: 16px;
  line-height: 24px;
}

.history-founder {
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
}

.history-founder figure {
  margin: 0;
}

.history-founder img {
  width: 100%;
  height: auto;
}

.history-founder>p {
  margin: 0;
  padding: 0 8%;
}

.history-heading {
  margin-top: 50px;
  padding: 10px 0;
  text-align: center;
}

.history-heading h2 {
  margin: 0;
  color: #181c24;
  font-size: 27px;
  font-weight: 700;
  line-height: 27px;
  text-align: left;
}

.history-heading>span {
  display: block;
  width: 300px;
  margin: 21px auto 0;
  border-top: 3px solid #5d7feb;
}

.history-heading p {
  margin: 12px 0 0;
  color: rgb(0 0 0 / 53%);
  font-size: 16px;
  line-height: 22px;
}

.history-timeline {
  position: relative;
  margin-top: 40px;
  padding: 10px 0;
}

.history-timeline::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 6px;
  border-radius: 999px;
  background: #d2d2d2;
  content: "";
  transform: translateX(-50%);
}

.history-event {
  position: relative;
  width: 50%;
}

.history-event:not(:last-child) {
  margin-bottom: 100px;
}

.history-event:nth-child(odd) {
  left: 0;
  padding-right: 70px;
}

.history-event:nth-child(even) {
  left: 50%;
  padding-left: 70px;
}

.history-card {
  position: relative;
  padding: 30px;
  border: 1px solid #f6f7fb;
  border-radius: 5px;
  background: #f9f9f9;
  box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
}

.history-card::before {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px;
  content: "";
  transform: translateY(-50%);
}

.history-event:nth-child(odd) .history-card::before {
  right: -30px;
  border-color: transparent transparent transparent #f9f9f9;
}

.history-event:nth-child(even) .history-card::before {
  left: -30px;
  border-color: transparent #f9f9f9 transparent transparent;
}

.history-card p {
  margin: 0 0 10px;
  color: #6c757d;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.history-event:nth-child(7) .history-card p {
  margin-bottom: 0;
}

.history-card-title {
  display: block;
  margin-bottom: 10px;
}

.history-node {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #36609c;
  color: #fff;
  font-size: 0;
  place-items: center;
  transform: translateY(-50%);
}

.history-node::before {
  width: 16px;
  height: 14px;
  border: 2px solid currentcolor;
  border-radius: 2px;
  background:
    linear-gradient(currentcolor, currentcolor) 0 4px / 100% 2px no-repeat,
    linear-gradient(currentcolor, currentcolor) 3px -2px / 2px 4px no-repeat,
    linear-gradient(currentcolor, currentcolor) 9px -2px / 2px 4px no-repeat;
  content: "";
}

.history-event:nth-child(odd) .history-node {
  right: -24px;
}

.history-event:nth-child(even) .history-node {
  left: -24px;
}

.history-event time {
  position: absolute;
  top: 50%;
  width: 100%;
  color: #6c757d;
  font-size: 16px;
  line-height: 24px;
  transform: translateY(-50%);
}

.history-event:nth-child(odd) time {
  left: 100%;
  padding-left: 70px;
  text-align: left;
}

.history-event:nth-child(even) time {
  right: 100%;
  padding-right: 70px;
  text-align: right;
}

/* CAIMEN group members page layout */
.group-reference-page {
  color: #6c757d;
}

.group-hero {
  position: relative;
  height: 597.5px;
  overflow: hidden;
  color: #fff;
}

.group-hero>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.group-hero-copy>div {
  width: 600px;
}

.group-hero-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.group-hero-copy p {
  margin: 24px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.group-content {
  margin-top: 100px;
  margin-bottom: 100px;
  color: #6c757d;
  font-size: 16px;
  line-height: 24px;
}

.group-row {
  margin-bottom: 50px;
  padding: 70px 0;
  border-radius: 20px;
  background: #fafafa;
  box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
}

.group-row-inner {
  display: flex;
  width: 1140px;
  max-width: 100%;
  margin-inline: auto;
  align-items: center;
}

.group-image {
  display: flex;
  margin: 0;
  padding-inline: 15px;
  flex: 0 0 44.69%;
  justify-content: center;
}

.group-image img {
  width: 480px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.group-copy {
  display: flex;
  min-width: 0;
  padding-inline: 15px;
  flex: 0 0 55.31%;
  flex-direction: column;
  align-items: stretch;
}

.group-copy h2 {
  margin: 20px 0 0;
  color: #6c757d;
  font-size: 22px;
  font-weight: 400;
  line-height: 33px;
  text-align: center;
}

.group-copy p {
  margin: 20px 0 0;
  color: #6c757d;
  font-size: 16px;
  line-height: 24px;
}

.group-view-more {
  align-self: center;
  margin-top: 31px;
  padding: 12.672px 23.328px;
  border-radius: 9999px;
  background: #32373c;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.group-row-second .group-image {
  flex-basis: 45.68%;
}

.group-row-second .group-copy {
  height: 264.34375px;
  padding-top: 20px;
  flex-basis: 54.32%;
}

.group-row-second .group-copy h2 {
  margin: 16px 0 0;
  color: #181c24;
  font-weight: 700;
}

.group-row-second .group-copy p {
  margin-top: 26px;
}

.group-row-second .group-view-more {
  margin-top: 72px;
}

@media (max-width: 1440px) {
  .history-event:not(:last-child) {
      margin-bottom: 80px;
  }
}

@media (max-width: 991px) {
  .history-event:not(:last-child) {
      margin-bottom: 60px;
  }
}

@media (max-width: 767px) {

  body:has(.about-reference-page) .site-header,
  body:has(.about-reference-page) .header-inner {
    height: 60px;
  }

  body:has(.about-reference-page) .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  body:has(.about-reference-page) .brand-logo {
    width: 125px;
    height: 42px;
  }

  body:has(.about-reference-page) .main-nav {
    top: 60px;
  }

  body:has(.about-reference-page) .header-actions {
    display: flex;
    margin-left: auto;
    gap: 0;
  }

  body:has(.about-reference-page) .header-search {
    width: 34px;
    height: 34px;
    border: 1px solid #aeb5bc;
    border-radius: 50%;
    font-size: 21px;
  }

  body:has(.about-reference-page) .mobile-toggle {
    width: 36px;
    height: 36px;
    margin-left: 0;
    padding: 8px;
  }

  .about-wide {
    width: calc(100% - 24px);
  }

  .about-hero {
    height: 422px;
  }

  .about-hero>img {
    object-position: center center;
  }

  .about-hero::after {
    background: rgb(0 0 0 / 22%);
  }

  .about-hero-copy {
    top: 28px;
    left: 12px;
    width: calc(100% - 24px);
    text-align: center;
  }

  .about-hero-copy h1 {
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 36px;
  }

  .about-hero-copy p {
    font-size: 14px;
    line-height: 20px;
  }

  .about-subnav {
    height: 80px;
  }

  .about-subnav {
    top: 60px;
  }

  .about-subnav .about-wide {
    gap: 58px;
  }

  .about-subnav a {
    font-size: 12px;
    line-height: 18px;
  }

  .about-content {
    margin-top: 48px;
    margin-bottom: 48px;
    font-size: 14px;
    line-height: 20px;
  }

  .about-brand-story h2 {
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 30px;
  }

  .about-brand-story p {
    margin-bottom: 0;
  }

  .about-technology {
    display: block;
    margin-top: 38px;
  }

  .about-achievements {
    display: block;
  }

  .about-achievements figure,
  .about-achievements img {
    width: 100%;
  }

  .about-achievements figure {
    margin-bottom: 40px;
  }

  .about-achievements img {
    height: 300px;
    object-fit: fill;
  }

  .about-achievements figcaption {
    padding-top: 14px;
    font-size: 14px;
    line-height: 20px;
  }

  .about-technology-copy {
    margin: 42px 0 0 0px;
  }

  .about-technology-copy h2 {
    margin-bottom: 30px;
    padding-bottom: 28px;
    font-size: 17px;
    line-height: 26px;
  }

  .about-technology-copy p {
    margin-bottom: 28px;
  }

  .about-advantages {
    margin-top: 66px;
  }

  .about-advantages>h2 {
    position: relative;
    width: 100%;
    border-bottom: 0;
    font-size: 30px;
    line-height: 60px;
  }

  .about-advantages>h2::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #1d5ca7;
    content: "";
    transform: translateX(-50%);
  }

  .about-section-intro {
    margin: 38px -2px 36px;
    line-height: 18px;
  }

  .about-section-intro br {
    display: none;
  }

  .about-advantage-grid {
    display: block;
    margin-inline: 0;
  }

  .about-advantage-grid article {
    height: 250px;
    margin-bottom: 20px;
    border-radius: 16px;
    overflow: visible;
  }

  .about-advantage-grid img {
    height: 100%;
    border-radius: 16px;
  }

  .about-advantage-grid article>div {
    height: 100%;
    padding: 24px;
  }

  .about-advantage-grid h3 {
    font-size: 20px;
    line-height: 20px;
  }

  .about-advantage-grid p {
    font-size: 12px;
    line-height: 16px;
  }

  .about-standards {
    margin-top: 38px;
  }

  .about-standards h2 {
    font-size: 18px;
    line-height: 20px;
  }

  .about-standards li {
    padding: 10px 8px;
    font-size: 11px;
    line-height: 15px;
  }

  .about-standards li::before {
    margin-right: 7px;
  }

  .about-honor {
    margin-top: 62px;
  }

  .about-honor>h2 {
    font-size: 27px;
    line-height: 27px;
  }

  .about-certificates {
    height: 330px;
    margin: 30px 50px 0;
  }

  .about-certificates .swiper-slide,
  .about-certificates img {
    height: 330px;
  }

  .about-cert-arrow {
    top: 190px;
    width: 44px;
    height: 44px;
  }

  .about-cert-arrow.previous {
    left: 0;
  }

  .about-cert-arrow.next {
    right: 0;
  }

  .about-culture {
    margin-top: 64px;
  }

  .about-culture>h2 {
    font-size: 30px;
    line-height: 30px;
  }

  .about-culture-grid {
    display: block;
    margin: 30px 0px 0;
  }

  .about-culture-grid article {
    height: 360px;
    margin-top: 16px;
    border-radius: 16px;
  }

  .about-culture-grid article:first-child {
    margin-top: 0;
  }

  .about-culture-grid h3 {
    font-size: 24px;
    line-height: 24px;
  }

  .about-culture-grid p {
    font-size: 12px;
    line-height: 16px;
  }

  .culture-forward>div {
    padding: 18px 28px !important;
  }

  .about-view-more {
    margin-top: 32px;
    padding: 11px 18px;
    font-size: 14px;
    line-height: 20px;
  }

  .about-gallery-section {
    margin-top: 70px;
  }

  .about-gallery-section>h2 {
    font-size: 30px;
    line-height: 30px;
  }

  .about-gallery {
    margin-top: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .about-gallery img {
    aspect-ratio: 4 / 3;
  }

  .about-finding {
    margin-top: 48px;
    padding: 28px 18px;
  }

  .about-finding h2 {
    margin-bottom: 26px;
    font-size: 13px;
    line-height: 18px;
  }

  .about-finding p {
    margin-bottom: 24px;
  }

  .oem-hero {
    height: 422px;
  }

  .oem-hero-copy {
    text-align: center;
  }

  .oem-hero-copy>div {
    width: 100%;
  }

  .oem-hero-copy h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .oem-hero-copy p {
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
  }

  .oem-content {
    margin-top: 48px;
    margin-bottom: 48px;
    padding-top: 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .oem-content>h2 {
    font-size: 27px;
    line-height: 27px;
  }

  .oem-intro {
    margin-top: 30px;
  }

  .oem-manufacturing {
    height: 300px;
    margin-top: 60px;
  }

  .oem-manufacturing>div {
    padding: 24px 26px;
  }

  .oem-manufacturing h3 {
    font-size: 27px;
    line-height: 27px;
  }

  .oem-manufacturing p {
    font-size: 18px;
    line-height: 21px;
  }

  .oem-advantages {
    margin-top: 70px;
  }

  .oem-advantages>h2 {
    font-size: 27px;
    line-height: 27px;
  }

  .oem-advantage-grid {
    display: flex;
    margin-top: 40px;
    flex-direction: column;
    gap: 28px;
  }

  .oem-advantage-grid article {
    min-height: 339px;
  }

  .oem-advantage-grid img {
    width: 320px;
    height: 200px;
  }

  .oem-advantage-grid h3 {
    margin: 16px 0 6px;
    font-size: 24px;
    line-height: 1.25;
  }

  .oem-advantage-grid p {
    font-size: 14px;
    line-height: 20px;
  }

  .oem-contact-note {
    min-height: 376px;
    margin-top: 54px;
    padding: 50px 6px;
  }

  .oem-contact-note p {
    font-size: 21px;
    line-height: 33.6px;
  }

  .history-hero {
    height: 422px;
  }

  .history-hero-copy {
    text-align: center;
  }

  .history-hero-copy>div {
    width: 100%;
  }

  .history-hero-copy h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .history-hero-copy p {
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
  }

  .history-content {
    margin-top: 48px;
    margin-bottom: 48px;
    font-size: 14px;
    line-height: 20px;
  }

  .history-founder {
    display: block;
  }

  .history-founder>p {
    padding: 0 0%;
    margin-top: 14px;
  }

  .history-heading {
    margin-top: 50px;
  }

  .history-heading h2 {
    font-size: 27px;
    line-height: 27px;
  }

  .history-heading>span {
    max-width: 85%;
    margin-top: 28px;
  }

  .history-heading p {
    margin-top: 22px;
    font-size: 16px;
    line-height: 22px;
  }

  .history-timeline {
    margin-top: 20px;
    margin-left: 20px;
  }

  .history-timeline::before {
    left: 0;
    transform: none;
  }

  .history-event,
  .history-event:nth-child(odd),
  .history-event:nth-child(even) {
    left: 0;
    width: 100%;
    padding: 0 0 0 40px;
  }

  .history-event:not(:last-child) {
      margin-bottom: 40px;
  }


  .history-card {
    padding: 20px;
  }

  .history-card p {
    font-size: 14px;
    line-height: 20px;
  }

  .history-event:nth-child(odd) .history-card::before,
  .history-event:nth-child(even) .history-card::before {
    right: auto;
    left: -30px;
    border-color: transparent #f9f9f9 transparent transparent;
  }

  .history-event:nth-child(odd) .history-node,
  .history-event:nth-child(even) .history-node {
    right: auto;
    left: -20px;
    margin-top: -24px;
  }

  .history-event time,
  .history-event:nth-child(odd) time,
  .history-event:nth-child(even) time {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: auto;
    margin-top: 10px;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    transform: none;
  }

  .group-hero {
    height: 422px;
  }

  .group-hero-copy {
    text-align: center;
  }

  .group-hero-copy>div {
    width: 100%;
  }

  .group-hero-copy h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .group-hero-copy p {
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
  }

  .group-content {
    margin-top: 48px;
    margin-bottom: 48px;
    font-size: 14px;
    line-height: 20px;
  }

  .group-row {
    padding: 20px 0 10px;
  }

  .group-row-inner {
    display: block;
    width: 100%;
    padding-inline: 0;
  }

  .group-image,
  .group-row-second .group-image {
    width: 100%;
    padding-inline: 15px;
  }

  .group-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .group-copy,
  .group-row-second .group-copy {
    width: 100%;
    height: auto;
    padding-top: 0;
    padding-inline: 15px;
  }

  .group-copy h2,
  .group-row-second .group-copy h2 {
    margin: 20px 0 0;
    color: #6c757d;
    font-size: 22px;
    font-weight: 400;
    line-height: 20px;
  }

  .group-copy p,
  .group-row-second .group-copy p {
    margin-top: 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .group-view-more {
    margin-top: 31px;
    padding: 11.338px 20.662px;
    font-size: 14px;
    line-height: 20px;
  }

  .group-row-second {
    margin-top: 20px;
    padding-bottom: 20px;
  }

  .group-row-second .group-copy h2 {
    margin-top: 36px;
    color: #181c24;
    font-weight: 700;
  }

  .group-row-second .group-copy p {
    margin-top: 26px;
  }

  .group-row-second .group-view-more {
    margin-top: 72px;
  }

  body:has(.about-reference-page) .site-footer {
    padding-top: 52px;
    padding-bottom: 98px;
  }

  body:has(.about-reference-page) .footer-grid>div:nth-child(2) .footer-links,
  body:has(.about-reference-page) .footer-grid>div:nth-child(3) .footer-links {
    display: none;
  }

  body:has(.about-reference-page) .footer-grid {
    gap: 34px;
  }

  body:has(.about-reference-page) .footer-grid>div:nth-child(2),
  body:has(.about-reference-page) .footer-grid>div:nth-child(3) {
    min-height: 28px;
  }

  body:has(.about-reference-page) .site-footer h3 {
    margin-bottom: 0;
  }

  body:has(.about-reference-page) .footer-contact h3 {
    margin-bottom: 24px;
  }
}

/* Product detail page — CAIMEN reference layout */
body:has(.pd-page) {
  overflow-x: clip;
}

.pd-page {
  overflow-x: clip;
  color: #6c757d;
  font-family: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.pd-container {
  width: min(calc(100% - 24px), 108rem);
  margin-inline: auto;
}

.pd-showcase {
  padding: 32px 0 80px;
  background: linear-gradient(115deg, #effcff 0%, #e9f8fc 55%, #f4fbfd 100%);
}

.pd-breadcrumbs {
  display: flex;
  margin-bottom: 38px;
  gap: 6px;
  align-items: center;
  color: #6c757d;
  font-size: 12px;
}

.pd-breadcrumbs a:hover {
  color: #2062ae;
}

.pd-showcase h1 {
  margin: 0 0 12px;
  color: #181c24;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.pd-lead {
  margin: 0;
  color: #6c757d;
  font-size: 16px;
  line-height: 24px;
}

.pd-product-intro {
  display: grid;
  margin-top: 32px;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pd-main-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #eef2f5;
}

.pd-main-gallery .swiper-wrapper,
.pd-main-gallery .swiper-slide {
  height: 100%;
}

.pd-main-slide {
  margin: 0;
}

.pd-main-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-slide-count {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  padding: 7px 11px;
  color: #fff;
  background: rgb(24 28 36 / 62%);
  font-size: 14px;
  line-height: 1;
}

.pd-gallery-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 50px;
  height: 70px;
  padding: 0;
  border: 0;
  color: rgb(255 255 255 / 74%);
  background: transparent;
  font-size: 58px;
  font-weight: 200;
  line-height: 1;
  transform: translateY(-50%);
  place-items: center;
}

.pd-gallery-prev {
  left: 10px;
}

.pd-gallery-next {
  right: 10px;
}

.pd-gallery-arrow.swiper-button-disabled {
  opacity: .35;
}

.pd-product-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.pd-thumbnails {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 208px;
  padding-top: 14px;
  overflow: hidden;
}

.pd-thumbnails .swiper-wrapper {
  align-items: flex-start;
}

.pd-thumb {
  width: 200px !important;
  height: auto;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid transparent;
  background: #fff;
}

.pd-thumb.swiper-slide-thumb-active {
  border-color: #8aaacb;
  box-shadow: 0 0 0 2px #fff;
}

.pd-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.pd-summary-copy {
  margin-top: 12px;
  color: #6c757d;
}

.pd-summary-copy p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.48;
}

.pd-summary-copy strong {
  color: #181c24;
}

.pd-quote-btn {
  display: flex;
  min-height: 54px;
  margin-top: auto;
  padding: 12px 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid #2062ae;
  border-radius: 999px;
  color: #fff;
  background: #2062ae;
  font-weight: 600;
  transition: .3s ease;
}

.pd-quote-btn:hover {
  background: #052667;
  border-color: #052667;
}

.pd-style-grid {
  display: grid;
  margin-top: 90px;
  gap: 28px 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pd-style-card {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 12px rgb(24 28 36 / 9%);
}

.pd-style-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.pd-style-card figcaption {
  display: flex;
  min-height: 70px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  color: #181c24;
  text-align: center;
  font-size: 15px;
  line-height: 22px;
}

.pd-details {
  padding: 0 0 60px;
  background: #fff;
}

.pd-anchor-nav {
  position: sticky;
  z-index: 900;
  top: 80px;
  display: flex;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  padding: 28px max(12px, calc((100vw - 1728px) / 2));
  gap: 44px;
  align-items: center;
  overflow-x: auto;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  box-shadow: 0 5px 12px rgb(24 28 36 / 7%);
  scrollbar-width: none;
}

.pd-anchor-nav::-webkit-scrollbar {
  display: none;
}

.pd-anchor-nav a {
  position: relative;
  flex: 0 0 auto;
  color: #181c24;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  transition: color 180ms ease;
}

.pd-anchor-nav a::after {
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 0;
  height: 3px;
  background: #2062ae;
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.pd-anchor-nav a:hover,
.pd-anchor-nav a:focus-visible,
.pd-anchor-nav a.is-active,
.pd-anchor-nav a[aria-current="location"] {
  color: #2062ae;
}

.pd-anchor-nav a.is-active::after,
.pd-anchor-nav a[aria-current="location"]::after {
  transform: scaleX(1);
}

.pd-anchor-nav a:focus-visible {
  border-radius: 2px;
  outline: 2px solid #2062ae;
  outline-offset: 6px;
}

.pd-content-block>h2,
.pd-certificate-block>h2,
.pd-specification-block>h2 {
  margin: 0 0 18px;
  color: #181c24;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

.pd-content-block,
.pd-certificate-block,
.pd-specification-block,
.pd-contact-section {
  scroll-margin-top: 186px;
}

.pd-content-block>p {
  margin-bottom: 26px;
}

.pd-content-block .pd-feature-heading {
  margin-top: 26px;
  font-size: 28px;
  font-weight: 600;
}

.pd-feature-copy h3 {
  margin: 22px 0 8px;
  color: #181c24;
  font-size: 24px;
  line-height: 1.35;
}

.pd-feature-copy p,
.pd-feature-copy li,
.pd-tech-copy li,
.pd-safety-row p,
.pd-smart-row p {
  color: #6c757d;
  font-size: 16px;
  line-height: 1.5;
}

.pd-feature-copy ul,
.pd-tech-copy ul {
  margin: 0;
  padding-left: 18px;
}

.pd-feature-copy li+li,
.pd-tech-copy li+li {
  margin-top: 5px;
}

.pd-two-col {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pd-two-col figure {
  margin: 0;
}

.pd-tech-images {
  margin-top: 64px;
}

.pd-tech-images img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.pd-tech-copy {
  margin-top: 54px;
  align-items: start;
}

.pd-tech-copy h4,
.pd-safety-row h4,
.pd-smart-row h4 {
  margin: 0 0 10px;
  color: #181c24;
  font-size: 21px;
  line-height: 1.35;
}

.pd-safety-row {
  margin-top: 72px;
  align-items: center;
}

.pd-safety-row img {
  width: 100%;
  height: auto;
}

.pd-safety-row>div p {
  margin: 0 0 30px;
}

.pd-smart-row {
  margin-top: 70px;
  align-items: center;
}

.pd-smart-row img {
  width: 100%;
  height: auto;
}

.pd-smart-row h4 {
  margin-top: 18px;
}

.pd-smart-row h4:first-child {
  margin-top: 0;
}

.pd-smart-row p {
  margin: 0;
}

.pd-certificate-block {
  padding-top: 96px;
}

.pd-certificates {
  display: flex;
  min-height: 390px;
  margin-bottom: 72px;
  gap: 20px;
  align-items: flex-start;
}

.pd-certificates figure {
  width: 260px;
  height: 382px;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pd-certificates img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

.pd-diagram {
  width: 100%;
  margin-top: 20px;
  height: auto;
}

.pd-diagram-note {
  margin: 28px 0 0;
  color: #6c757d;
  font-size: 14px;
}

.pd-specification-block {
  padding-top: 64px;
}

.pd-specification-block>h3 {
  margin: 0 0 34px;
  color: #181c24;
  font-size: 24px;
  font-weight: 500;
}

.pd-spec-table-wrap {
  overflow-x: auto;
}

.pd-spec-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;
}

.pd-spec-table th,
.pd-spec-table td {
  padding: 10px 18px;
  border: 1px solid #e2e5e9;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
}

.pd-spec-table th {
  width: 20%;
  color: #181c24;
  background: #f5f6f7;
  font-weight: 700;
}

.pd-spec-table td {
  width: 30%;
  color: #6c757d;
  text-align: center;
}

.pd-contact-section {
  padding-top: 94px;
}

.pd-contact-section>h2 {
  margin: 0 0 30px;
  color: #181c24;
  font-size: 32px;
}

.pd-inquiry-card {
  width: min(100%, 1020px);
  margin-inline: auto;
  padding: 40px;
  border: 1px solid #dfe3e8;
  background: #fff;
}

.pd-form-eyebrow {
  position: relative;
  margin: 0 0 8px;
  padding-left: 26px;
  color: #2062ae;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.pd-form-eyebrow::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  background: #2062ae;
  content: "";
}

.pd-inquiry-card>h2 {
  margin: 0 0 12px;
  color: #101828;
  font-size: 38px;
  line-height: 1.2;
}

.pd-form-intro {
  margin: 0;
  color: #7a8390;
}

.pd-inquiry-form fieldset {
  margin: 38px 0 0;
  padding: 34px 0 0;
  border: 0;
  border-top: 1px solid #eaecf0;
}

.pd-inquiry-form legend {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
}

.pd-inquiry-form legend span {
  display: grid;
  width: 42px;
  height: 42px;
  color: #2062ae;
  background: #eef7ff;
  font-size: 13px;
  grid-row: 1 / 3;
  place-items: center;
}

.pd-inquiry-form legend b {
  color: #101828;
  font-size: 20px;
}

.pd-inquiry-form legend small {
  color: #7a8390;
}

.pd-field {
  margin-top: 26px;
}

.pd-field label {
  display: block;
  margin-bottom: 8px;
  color: #101828;
  font-size: 14px;
  font-weight: 600;
}

.pd-field .wpcf7-form-control-wrap,
.project-detail-form .field .wpcf7-form-control-wrap,
.article-form-panel .field .wpcf7-form-control-wrap,
.contact-field .wpcf7-form-control-wrap {
  display: block;
}

.pd-field input,
.pd-field select,
.pd-field textarea {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  color: #475467;
  background: #fff;
  outline: none;
}

.pd-field input:focus,
.pd-field select:focus,
.pd-field textarea:focus {
  border-color: #2062ae;
}

.pd-field textarea {
  min-height: 120px;
  padding-top: 14px;
}

.pd-form-grid {
  display: grid;
  gap: 0 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pd-field-full {
  grid-column: 1 / -1;
}

.pd-form-footer {
  display: flex;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid #eaecf0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pd-form-footer small {
  color: #7a8390;
}

.pd-submit-btn {
  min-width: 250px;
  height: 58px;
  padding: 0 28px;
  border: 1px solid #2062ae;
  border-radius: 0;
  color: #fff;
  background: #2062ae;
  font-weight: 600;
}

.pd-submit-btn:hover {
  background: #052667;
  border-color: #052667;
}

.pd-related-section {
  padding: 80px 0;
  background: #ebecf0;
}

.pd-related-section h2 {
  margin: 0 0 52px;
  color: #181c24;
  text-align: center;
  font-size: 40px;
  line-height: 1.2;
}

.pd-related-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pd-related-card {
  display: flex;
  min-width: 0;
  padding-bottom: 28px;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgb(24 28 36 / 8%);
}

.pd-related-image {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.pd-related-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease;
}

.pd-related-hover {
  opacity: 0;
}

.pd-related-card:hover .pd-related-hover {
  opacity: 1;
}

.pd-related-model {
  margin-bottom: 5px;
  color: #2062ae;
  font-size: 14px;
}

.pd-related-card strong {
  color: #181c24;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 1023px) {
  .pd-product-intro {
    grid-template-columns: 1fr 1fr;
  }

  .pd-thumbnails {
    min-height: 130px;
  }

  .pd-thumb {
    width: 120px;
  }

  .pd-summary-copy p {
    font-size: 13px;
  }

  .pd-style-grid {
    gap: 20px;
  }

  .pd-anchor-nav {
    padding-block: 24px;
  }

  .pd-anchor-nav a {
    font-size: 24px;
  }

  .pd-feature-copy h3 {
    font-size: 22px;
  }

  .pd-tech-copy h4, .pd-safety-row h4, .pd-smart-row h4 {
    font-size: 19px;
  }

  .pd-feature-copy p, .pd-feature-copy li, .pd-tech-copy li, .pd-safety-row p, .pd-smart-row p {
    font-size: 15px;
  }

  .pd-certificates figure {
    width: 220px;
    height: 325px;
  }
}

@media (max-width: 767px) {
  .pd-page {
    font-size: 14px;
    line-height: 1.45;
  }

  .pd-container {
    width: min(calc(100% - 24px), 108rem);
  }

  .pd-showcase {
    padding: 24px 0 48px;
  }

  .pd-breadcrumbs {
    margin-bottom: 26px;
    font-size: 11px;
  }

  .pd-showcase h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .pd-lead {
    font-size: 14px;
    line-height: 20px;
  }

  .pd-product-intro {
    margin-top: 24px;
    grid-template-columns: 1fr;
  }

  .pd-product-summary {
    gap: 16px;
  }

  .pd-thumbnails {
    min-height: auto;
    padding-top: 0;
  }

  .pd-thumb {
    width: 92px;
  }

  .pd-summary-copy {
    margin-top: 0;
  }

  .pd-summary-copy p {
    font-size: 14px;
    line-height: 1.5;
  }

  .pd-quote-btn {
    min-height: 48px;
    margin-top: 4px;
  }

  .pd-style-grid {
    margin-top: 44px;
    gap: 16px;
    grid-template-columns: 1fr;
  }

  .pd-style-card figcaption {
    min-height: 58px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .pd-anchor-nav {
    top: 60px;
    padding: 20px 12px;
    gap: 26px;
  }

  .pd-anchor-nav a {
    font-size: 20px;
  }

  .pd-content-block,
  .pd-certificate-block,
  .pd-specification-block,
  .pd-contact-section {
    scroll-margin-top: 140px;
  }

  .pd-content-block>h2,
  .pd-certificate-block>h2,
  .pd-specification-block>h2 {
    font-size: 26px;
  }

  .pd-content-block .pd-feature-heading {
    font-size: 24px;
  }

  .pd-feature-copy h3 {
    margin-top: 20px;
    font-size: 20px;
  }

  .pd-feature-copy p, .pd-feature-copy li, .pd-tech-copy li, .pd-safety-row p, .pd-smart-row p {
    font-size: 14px;
  }

  .pd-two-col {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .pd-tech-images {
    margin-top: 42px;
  }

  .pd-tech-copy {
    margin-top: 26px;
  }

  .pd-safety-row, .pd-smart-row {
    margin-top: 46px;
  }

  .pd-safety-row>div:nth-child(3) {
    order: 4;
  }

  .pd-safety-row>figure:nth-child(4) {
    order: 3;
  }

  .pd-certificate-block {
    padding-top: 64px;
  }

  .pd-certificates {
    min-height: auto;
    margin-bottom: 50px;
    gap: 10px;
  }

  .pd-certificates figure {
    width: calc((100% - 20px) / 3);
    height: 170px;
  }

  .pd-diagram-note {
    margin-top: 18px;
    font-size: 12px;
  }

  .pd-specification-block {
    padding-top: 50px;
  }

  .pd-specification-block>h3 {
    font-size: 21px;
  }

  .pd-contact-section {
    padding-top: 64px;
  }

  .pd-contact-section>h2 {
    font-size: 27px;
  }

  .pd-inquiry-card {
    padding: 24px 18px;
  }

  .pd-inquiry-card>h2 {
    font-size: 28px;
  }

  .pd-inquiry-form fieldset {
    margin-top: 28px;
    padding-top: 26px;
  }

  .pd-inquiry-form legend b {
    font-size: 17px;
  }

  .pd-form-grid {
    grid-template-columns: 1fr;
  }

  .pd-field-full {
    grid-column: auto;
  }

  .pd-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .pd-submit-btn {
    width: 100%;
    min-width: 0;
  }

  .pd-related-section {
    padding: 54px 0;
  }

  .pd-related-section h2 {
    margin-bottom: 32px;
    font-size: 32px;
  }

  .pd-related-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


#features {
  padding-top: 60px;
}

@media (prefers-reduced-motion: reduce) {

  .pd-anchor-nav a,
  .pd-anchor-nav a::after {
    transition: none;
  }
}

/* Global footer — measured from the CAIMEN reference at 1904 × 901. */
body .site-footer.site-footer {
  padding: 0;
  background: #052667;
  color: rgb(255 255 255 / 40%);
  font-size: 18px;
  line-height: 27px;
}

body .site-footer.site-footer>.container {
  width: min(calc(100% - 176px), 108rem);
  padding-inline: 12px;
}

body .site-footer .footer-grid {
  display: flex;
  min-height: 386px;
  padding: 40px 0 34px;
  gap: 0;
  align-items: stretch;
  justify-content: space-between;
}

body .site-footer .footer-grid>div {
  min-width: 0;
}

body .site-footer .footer-grid>div:nth-child(1) {
  flex: 0 0 360px;
  margin-right: 86px;
}

body .site-footer .footer-grid>div:nth-child(2) {
  flex: 0 0 280px;
}

body .site-footer .footer-grid>div:nth-child(3) {
  flex: 0 0 280px;
}

body .site-footer .footer-grid>div:nth-child(4) {
  flex: 0 0 360px;
}

body .site-footer .footer-mission {
  min-height: 200px;
  margin: 0;
  padding: 0 0 40px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

body .site-footer .socials {
  display: flex;
  margin: 20px 0 0;
  gap: 16px;
}

body .site-footer .socials a {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 0;
  background-color: transparent;
  opacity: .4;
  transition: opacity .25s ease;
}

body .site-footer .socials svg {
  display: block;
  width: 30px;
  height: 30px;
}

body .site-footer .socials a:hover,
body .site-footer .socials a:focus-visible {
  opacity: 1;
}

body .site-footer h3 {
  margin: 0 0 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

body .site-footer .footer-section-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
}

body .site-footer .footer-toggle-icon {
  display: none;
}

body .site-footer .footer-links {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}

body .site-footer .footer-links li {
  margin: 0;
}

body .site-footer .footer-links a,
body .site-footer .footer-contact p,
body .site-footer .footer-bottom,
body .site-footer .footer-bottom a {
  color: rgb(255 255 255 / 40%);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

body .site-footer .footer-links a:hover,
body .site-footer .footer-bottom a:hover {
  color: #fff;
}

body .site-footer .footer-contact p {
  position: relative;
  display: flex;
  min-height: 27px;
  margin: 0 0 12px;
  padding-left: 40px;
  align-items: flex-start;
}

body .site-footer .footer-contact p::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

body .site-footer .footer-contact p>span {
  display: block;
  color: rgb(255 255 255 / 40%);
  font-size: 18px;
  line-height: 27px;
}

body .site-footer .footer-contact p:nth-of-type(1)::before {
  background-image: url("../icons/footer-whatsapp.svg");
}

body .site-footer .footer-contact p:nth-of-type(2)::before {
  background-image: url("../icons/footer-email.svg");
}

body .site-footer .footer-contact p:nth-of-type(3)::before {
  background-image: url("../icons/footer-location.svg");
}

body .site-footer .footer-contact p:nth-of-type(3) {
  min-height: 108px;
}

body .site-footer .footer-contact .btn {
  display: inline-flex;
  width: 168px;
  min-width: 168px;
  max-width: 100%;
  height: 49px;
  margin: 4px 0 0;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: #2062ae;
  box-shadow: none;
  color: #fff;
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  line-height: 27px;
  white-space: nowrap;
}

body .site-footer .footer-contact .footer-contact-button-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #fff;
}

body .site-footer .footer-contact .btn span {
  display: block;
  flex: 0 0 auto;
  color: #fff;
  white-space: nowrap;
}

body .site-footer .footer-contact .btn:hover {
  background: #174f91;
}

body .site-footer .footer-bottom {
  display: flex;
  min-height: 92px;
  margin: 0;
  padding: 24px 0 40px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

@media (min-width: 1200px) and (max-width: 1800px) {
  body .site-footer.site-footer>.container {
    width: calc(100% - 48px);
  }

  body .site-footer .footer-grid {
    gap: 40px;
  }

  body .site-footer .footer-grid>div:nth-child(1) {
    flex: 1.2 1 0;
    margin-right: 0;
  }

  body .site-footer .footer-grid>div:nth-child(2) {
    flex: .9 1 0;
  }

  body .site-footer .footer-grid>div:nth-child(3) {
    flex: .75 1 0;
  }

  body .site-footer .footer-grid>div:nth-child(4) {
    flex: 1.2 1 0;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body .site-footer.site-footer>.container {
    width: calc(100% - 48px);
  }

  body .site-footer .footer-grid {
    min-height: 0;
    flex-wrap: wrap;
    gap: 48px 56px;
  }

  body .site-footer .footer-grid>div:nth-child(n) {
    flex: 0 0 calc((100% - 56px) / 2);
    margin-right: 0;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .about-technology {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }

  .about-achievements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .about-achievements figure,
  .about-achievements img {
    width: 100%;
    height: auto;
  }

  .about-achievements img {
    aspect-ratio: 1;
  }

  .about-advantage-grid {
    margin-inline: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 767px) {
  body .site-footer.site-footer>.container {
    width: 100%;
    padding-inline: 12px;
  }

  body .site-footer .footer-grid {
    display: flex;
    min-height: 751px;
    padding: 40px 0 34px;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 20px;
  }

  body .site-footer .footer-grid>div:nth-child(n) {
    width: auto;
    flex: 0 0 auto;
    margin-right: 0;
  }

  body .site-footer .footer-grid>div:first-child {
    margin-bottom: 20px;
  }

  body .site-footer .footer-mission {
    min-height: 193px;
    padding: 40px 0;
    font-size: 18px;
    line-height: 28px;
  }

  body .site-footer h3 {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
  }

  body .site-footer .footer-grid>div:nth-child(2) h3,
  body .site-footer .footer-grid>div:nth-child(3) h3 {
    display: block;
  }

  body .site-footer .footer-section-toggle {
    display: flex;
    min-height: 28px;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    cursor: pointer;
  }

  body .site-footer .footer-toggle-icon {
    display: block;
    width: 12px;
    height: 8px;
    flex: 0 0 12px;
    color: rgb(255 255 255 / 70%);
    transition: transform .22s ease;
  }

  body .site-footer .footer-section-open .footer-toggle-icon {
    transform: rotate(180deg);
  }

  body .site-footer .footer-grid>div:nth-child(2) .footer-links,
  body .site-footer .footer-grid>div:nth-child(3) .footer-links {
    display: none;
  }

  body .site-footer .footer-grid>div.footer-section-open .footer-links {
    display: flex;
    margin-top: 16px;
  }

  body .site-footer .footer-contact {
    margin-top: 0;
  }

  body .site-footer .footer-contact h3 {
    margin-bottom: 20px;
  }

  body .site-footer .footer-contact p {
    min-height: 24px;
    margin-bottom: 12px;
    padding-left: 40px;
  }

  body .site-footer .footer-contact p>span {
    font-size: 18px;
    line-height: 20px;
  }

  body .site-footer .footer-contact p:nth-of-type(3) {
    min-height: 100px;
  }

  body .site-footer .footer-contact .btn {
    width: 168px;
    min-width: 168px;
    height: 49px;
    margin-top: 4px;
    padding: 10px 20px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  body .site-footer .footer-bottom {
    display: flex;
    min-height: 165px;
    margin: 0;
    padding: 24px 0 40px;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 19px;
  }

  body .site-footer .footer-bottom a {
    margin: 0;
  }
}

/* Global header navigation — measured from the CAIMEN reference. */
html {
  scroll-padding-top: 80px;
}

body {
  padding-top: 80px;
}

body .site-header.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  box-shadow: 0 0 5px rgb(24 28 36 / 10%);
}

body .site-header .header-inner {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 200px);
  max-width: none;
  height: 80px;
  margin-inline: auto;
  padding: 0;
  align-items: center;
  gap: 0;
}

body .site-header .brand-logo {
  display: flex;
  width: 218px;
  height: 62px;
  flex: 0 0 218px;
  align-items: center;
}

body .site-header .brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

body .site-header .main-nav {
  display: flex;
  flex: 0 0 auto;
  /* margin-left: 157px; */
  align-items: stretch;
}

body .site-header .nav-list {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: stretch;
  gap: 60px;
  list-style: none;
}

body .site-header .nav-item {
  position: relative;
  display: flex;
  height: 80px;
  align-items: center;
}

body .site-header .nav-link {
  position: relative;
  display: flex;
  height: 80px;
  padding: 0;
  align-items: center;
  color: #2062ae;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

body .site-header .nav-link::after {
  position: absolute;
  right: 100%;
  bottom: 17px;
  left: 0;
  display: block;
  height: 2px;
  background: #2062ae;
  content: "";
  transition: right .3s ease;
}

body .site-header .nav-link:hover::after,
body .site-header .nav-link:focus-visible::after,
body .site-header .nav-link.active::after {
  right: 0;
}

body .site-header .nav-caret {
  display: block;
  width: 10px;
  height: 6px;
  margin: 0 0 0 4px;
  flex: 0 0 10px;
  align-self: center;
  object-fit: contain;
}

body .site-header .header-actions {
  display: flex;
  /* margin-right: auto; */
  margin-left: 60px;
  align-items: center;
}

body .site-header .header-search {
  display: flex;
  width: 38px;
  height: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

body .site-header .header-search img {
  display: block;
  width: 20px;
  height: 20px;
}

body .site-header .mobile-toggle {
  display: none;
}

body .site-header .nav-item:nth-child(3)>.dropdown {
  display: none !important;
}

body .site-header .nav-item:nth-child(2)>.dropdown {
  position: absolute;
  z-index: 20;
  top: 80px;
  left: -111px;
  display: block;
  width: 322px;
  padding: 0;
  visibility: hidden;
  border: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  background: #f8f8f8;
  box-shadow: 0 10px 22px rgb(24 28 36 / 10%);
  opacity: 0;
  transform: none;
  transition: opacity .2s ease, visibility .2s ease;
}

body .site-header .nav-item:nth-child(2)>.dropdown>a {
  display: flex;
  min-height: 82px;
  padding: 16px 20px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #2062ae;
  background: #f8f8f8;
  color: #181c24;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

body .site-header .nav-item:nth-child(2)>.dropdown>a:last-child {
  border-bottom: 0;
}

body .site-header .nav-item:nth-child(2)>.dropdown>a::before {
  width: 68px;
  height: 38px;
  flex: 0 0 68px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

body .site-header .nav-item:nth-child(2)>.dropdown>a:nth-child(1)::before {
  background-image: url("../icons/header-category-commercial.svg");
}

body .site-header .nav-item:nth-child(2)>.dropdown>a:nth-child(2)::before {
  background-image: url("../icons/header-category-residential.svg");
}

body .site-header .nav-item:nth-child(2)>.dropdown>a:nth-child(3)::before {
  background-image: url("../icons/header-category-parking.svg");
}

body .site-header .nav-item:nth-child(2)>.dropdown>a:nth-child(4)::before {
  background-image: url("../icons/header-category-traffic.svg");
}

body .site-header .nav-item:nth-child(2)>.dropdown>a:nth-child(5)::before {
  background-image: url("../icons/header-category-pedestrian.svg");
}

body .site-header .nav-item:nth-child(2):hover>.dropdown,
body .site-header .nav-item:nth-child(2):focus-within>.dropdown {
  visibility: visible;
  opacity: 1;
}

body .site-header .nav-item:nth-child(6)>.dropdown {
  position: absolute;
  z-index: 20;
  top: 80px;
  left: 0;
  display: block;
  width: 112px;
  padding: 0;
  visibility: hidden;
  border: 0;
  background: #fff;
  box-shadow: 0 8px 18px rgb(24 28 36 / 10%);
  opacity: 0;
  transform: none;
  transition: opacity .2s ease, visibility .2s ease;
}

body .site-header .nav-item:nth-child(6)>.dropdown>a {
  display: flex;
  min-height: 54px;
  padding: 15px 20px;
  align-items: center;
  background: #fff;
  color: #2062ae;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
}

body .site-header .nav-item:nth-child(6):hover>.dropdown,
body .site-header .nav-item:nth-child(6):focus-within>.dropdown {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 1600px) and (min-width: 1207px) {
  body .site-header .header-inner {
    width: calc(100% - 100px);
  }

  body .site-header .brand-logo {
    width: 190px;
    flex-basis: 190px;
  }

  body .site-header .main-nav {
    margin-left: auto;
  }

  body .site-header .nav-list {
    gap: 40px;
  }

  body .site-header .header-actions {
    margin-right: 0;
    margin-left: 30px;
  }

  body .site-header .nav-item:nth-child(2)>.dropdown {
    left: -88px;
  }
}

@media (max-width: 1360px) and (min-width: 1207px) {
  body .site-header .brand-logo {
    width: 180px;
    flex-basis: 180px;
  }

  body .site-header .nav-list {
    gap: 20px;
  }

  body .site-header .header-actions {
    margin-left: 20px;
  }
}

@media (max-width: 1206px) {
  html {
    scroll-padding-top: 60px;
  }

  body {
    padding-top: 60px;
  }

  body .site-header.site-header,
  body .site-header .header-inner {
    height: 60px;
  }

  body .site-header .header-inner {
    width: 100%;
    margin: 0;
    padding: 0 12px;
  }

  body .site-header .brand-logo {
    width: 165px;
    height: 58px;
    flex: 0 0 165px;
  }

  body .site-header .header-actions {
    display: flex;
    margin-right: 0;
    margin-left: auto;
  }

  body .site-header .header-search {
    width: 34px;
    height: 34px;
    border: 1px solid #b7b7b7;
    border-radius: 50%;
  }

  body .site-header .header-search img {
    width: 16px;
    height: 16px;
  }

  body .site-header .mobile-toggle {
    position: relative;
    z-index: 1003;
    display: block;
    width: 32px;
    height: 44px;
    margin: 0 0 0 8px;
    padding: 10px 8px;
    border: 0;
    background: transparent;
  }

  body .site-header .mobile-toggle:focus,
  body .site-header .mobile-toggle:focus-visible,
  body .site-header .nav-link:focus,
  body .site-header .nav-link:focus-visible {
    outline: 0;
  }

  body .site-header .mobile-toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    margin: 4px 0;
    background: #181c24;
    transition: transform .25s ease, opacity .2s ease;
  }

  body .site-header .main-nav {
    position: fixed;
    z-index: 1002;
    inset: 0;
    display: none;
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 92px 0 24px;
    overflow-y: auto;
    visibility: hidden;
    background: #fff;
    opacity: 0;
    transform: translateX(100%);
    transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
  }

  body.menu-open .site-header .main-nav {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  body.menu-open .site-header .brand-logo,
  body.menu-open .site-header .header-actions {
    visibility: hidden;
  }

  body.menu-open .site-header .mobile-toggle {
    position: fixed;
    top: 36px;
    right: 10px;
    margin: 0;
  }

  body.menu-open .site-header .mobile-toggle span {
    position: absolute;
    top: 21px;
    left: 7px;
    width: 20px;
    margin: 0;
  }

  body.menu-open .site-header .mobile-toggle span:nth-child(1) {
    transform: rotate(45deg);
  }

  body.menu-open .site-header .mobile-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .site-header .mobile-toggle span:nth-child(3) {
    transform: rotate(-45deg);
  }

  body .site-header .nav-list {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e5e5e5;
  }

  body .site-header .nav-item {
    display: block;
    width: 100%;
    height: auto;
  }

  body .site-header .nav-link {
    display: flex;
    width: 100%;
    height: 62px;
    padding: 0 20px;
    justify-content: flex-start;
    border-bottom: 1px solid #e5e5e5;
    color: #181c24;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  body .site-header .nav-link.active {
    color: #2062ae;
  }

  body .site-header .nav-link::after {
    display: none;
  }

  body .site-header .nav-item:is(:nth-child(2), :nth-child(6))>.nav-link {
    justify-content: space-between;
  }

  body .site-header .nav-item:is(:nth-child(2), :nth-child(6)) .nav-caret {
    width: 10px;
    height: 6px;
    margin-left: auto;
    transform: rotate(-90deg);
    transition: transform .2s ease;
  }

  body .site-header .nav-item:is(:nth-child(2), :nth-child(6)).submenu-open .nav-caret {
    transform: rotate(0);
  }

  body .site-header .nav-item:is(:nth-child(2), :nth-child(6))>.dropdown {
    position: static;
    display: none;
    width: 100%;
    padding: 0;
    visibility: visible;
    border: 0;
    box-shadow: none;
    opacity: 1;
  }

  body .site-header .nav-item:is(:nth-child(2), :nth-child(6)).submenu-open>.dropdown {
    display: block;
  }

  body .site-header .nav-item:is(:nth-child(2), :nth-child(6))>.dropdown>a {
    min-height: 68px;
    padding: 10px 20px 10px 32px;
    border-bottom-color: #e5e5e5;
    font-size: 14px;
    line-height: 20px;
  }

  body .site-header .nav-item:nth-child(2)>.dropdown>a::before {
    width: 48px;
    height: 27px;
    flex-basis: 48px;
  }

  body .site-header .nav-item:nth-child(3)>.dropdown {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body .site-header .brand-logo {
    width: 150px;
    flex-basis: 150px;
  }
}

/* Unified vertical rhythm for mobile page sections */
@media (max-width: 767px) {
  :root {
    --mobile-section-space: 60px;
  }

  .section,
  .product-showcase,
  .manufacturing,
  .cases,
  .news,
  .commercial-products,
  .commercial-customization,
  .commercial-article,
  .commercial-faq-section,
  .pd-related-section {
    padding-top: var(--mobile-section-space);
    padding-bottom: var(--mobile-section-space);
  }

  .home-video-section {
    margin-top: 0;
    margin-bottom: var(--mobile-section-space);
  }

  .resources-body,
  .faq-reference-body,
  .download-reference-body,
  .blog-reference-body,
  .about-content,
  .oem-content,
  .history-content,
  .group-content {
    margin-top: var(--mobile-section-space);
    margin-bottom: var(--mobile-section-space);
  }

  .about-technology,
  .about-advantages,
  .about-standards,
  .about-honor,
  .about-culture,
  .about-gallery-section,
  .about-finding,
  .oem-manufacturing,
  .oem-advantages,
  .resources-products,
  .resources-cases,
  .article-inquiry {
    margin-top: var(--mobile-section-space);
  }

  .commercial-stories {
    margin-top: var(--mobile-section-space);
    padding-top: var(--mobile-section-space);
  }

  .article-shell,
  .projects-reference,
  .projects-list,
  .pd-showcase {
    padding-top: var(--mobile-section-space);
    padding-bottom: var(--mobile-section-space);
  }

  .pd-certificate-block,
  .pd-specification-block,
  .pd-contact-section {
    padding-top: var(--mobile-section-space);
  }
}

/* Responsive typography, wrapping, and viewport-safety refinements */
@media (max-width: 1199px) {
  main,
  main section,
  main article,
  main figure,
  main form,
  main fieldset,
  main :where(.container, .about-wide, .commercial-wrap) {
    min-width: 0;
    max-width: 100%;
  }

  main :where(h1, h2, h3, h4, p, li, a, label, legend, figcaption) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  main :where(img, picture, video, iframe, svg, canvas) {
    max-width: 100%;
  }

  main :where(input, select, textarea, button) {
    min-width: 0;
    max-width: 100%;
  }

  main .btn {
    max-width: 100%;
    white-space: normal;
  }

  .pd-spec-table-wrap,
  .article-table-scroll {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --tablet-section-space: 72px;
    --tablet-page-title: clamp(36px, 5vw, 42px);
    --tablet-section-title: clamp(28px, 4vw, 34px);
    --tablet-card-title: clamp(20px, 2.8vw, 24px);
  }

  main h1 {
    font-size: var(--tablet-page-title);
    line-height: 1.18;
  }

  main h2 {
    font-size: var(--tablet-section-title);
    line-height: 1.25;
  }

  main h3 {
    font-size: var(--tablet-card-title);
    line-height: 1.35;
  }

  .blog-reference-title {
    font-size: 28px;
    line-height: 1.32;
  }

  .project-card-title {
    font-size: 22px;
    line-height: 1.4;
  }

  .commercial-product-copy h2 {
    font-size: 20px;
    line-height: 1.4;
  }

  .about-technology {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .about-achievements {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .about-achievements figure,
  .about-achievements img {
    width: 100%;
    height: auto;
  }

  .about-achievements img {
    aspect-ratio: 1;
  }

  .about-achievements figure:nth-child(2),
  .about-achievements figure:nth-child(3) {
    grid-row: auto;
    grid-column: auto;
  }

  .about-advantage-grid {
    margin-inline: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .about-culture-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 340px;
    gap: 20px;
  }

  .about-culture-grid :where(.culture-values, .culture-vision, .culture-mission, .culture-forward) {
    grid-row: auto;
    grid-column: auto;
  }

  .commercial-wrap,
  .commercial-product-grid {
    width: calc(100% - 48px);
  }

  .commercial-product-grid,
  .commercial-story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .commercial-customization-panel {
    display: grid;
    min-height: 0;
    padding: 56px 40px 92px;
    border-radius: 56px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 28px;
  }

  .commercial-customization-item {
    width: auto;
    min-width: 0;
  }

  .commercial-advantage-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .section,
  .product-showcase,
  .manufacturing,
  .cases,
  .news,
  .commercial-products,
  .commercial-customization,
  .commercial-article,
  .commercial-faq-section,
  .pd-related-section {
    padding-top: var(--tablet-section-space);
    padding-bottom: var(--tablet-section-space);
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-page-title: clamp(30px, 8.6vw, 34px);
    --mobile-section-title: clamp(26px, 7.4vw, 30px);
    --mobile-card-title: clamp(18px, 5.4vw, 22px);
  }

  main h1 {
    font-size: var(--mobile-page-title);
    line-height: 1.18;
  }

  main h2 {
    font-size: var(--mobile-section-title);
    line-height: 1.28;
  }

  main h3 {
    font-size: var(--mobile-card-title);
    line-height: 1.35;
  }

  .blog-reference-title {
    font-size: 25px;
    line-height: 1.34;
  }

  .project-card-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .commercial-product-copy h2 {
    font-size: 18px;
    line-height: 1.4;
  }

  .about-standards h2,
  .about-finding h2 {
    font-size: 20px;
    line-height: 1.4;
  }

  .about-advantages > h2,
  .about-honor > h2,
  .about-culture > h2,
  .about-gallery-section > h2 {
    width: auto;
    line-height: 1.28;
  }

  .about-technology-copy h2 {
    font-size: 24px;
    line-height: 1.3;
  }

  .home-video-item {
    min-width: 0;
  }

  .pd-anchor-nav a,
  .about-subnav a,
  .projects-category-nav a {
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 560px) {
  .home-video-item {
    width: 100%;
  }

  .home-video-item iframe {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Full-screen site search — measured from the CAIMEN reference */
body.search-open {
  overflow: hidden;
}

.site-search-overlay {
  position: fixed;
  z-index: 4000;
  inset: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 50%);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  transition: opacity .24s ease, visibility .24s ease;
}

.site-search-overlay.search-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.site-search-dialog {
  width: min(100%, 576px);
  transform: translateY(10px) scale(.985);
  transition: transform .28s ease;
}

.site-search-overlay.search-open .site-search-dialog {
  transform: none;
}

.site-search-form {
  width: 100%;
  margin: 0;
}

.site-search-field {
  display: flex;
  height: 69px;
  margin-inline: 12px;
  padding: 12px 16px;
  overflow: hidden;
  align-items: center;
  border-radius: 999px;
  background: #fff;
}

.site-search-input {
  width: 100%;
  min-width: 0;
  height: 45px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #e1e4e8;
  border-radius: 0;
  outline: 0;
  background: #fff;
  color: #181c24;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
}

.site-search-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.site-search-input::-webkit-search-cancel-button {
  margin-right: 8px;
}

.site-search-submit {
  display: grid;
  width: 40px;
  height: 40px;
  margin-left: 0;
  padding: 0;
  flex: 0 0 40px;
  border: 0;
  border-radius: 50%;
  background: #2062ae;
  color: #fff;
  cursor: pointer;
  place-items: center;
  transition: background-color .2s ease;
}

.site-search-submit:hover,
.site-search-submit:focus-visible {
  background: #174f91;
}

.site-search-submit:focus-visible {
  outline: 3px solid rgb(255 255 255 / 70%);
  outline-offset: 2px;
}

.site-search-submit svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .site-search-overlay,
  .site-search-dialog {
    transition: none;
  }
}