.jx-hero { padding: 180px 0 120px; background-size: cover; background-position: center; position: relative; }
.jx-hero:before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.jx-hero .jx-hero-copy { position: relative; color: #fff; max-width: 760px; }
.jx-hero h1 { color: #fff; margin-bottom: 20px; }
.jx-hero p { font-size: 18px; line-height: 1.7em; margin-bottom: 25px; }
.jx-gray { background: #f5f7fa; }
.jx-gray .section-title-s2 h2,
.jx-gray .section-title-s2 p {
  color: #1f2530;
}

/* The base theme sets section-title-s2 text to white.
   Most JX sections use light backgrounds, so force readable contrast. */
.section-padding .section-title-s2 h2,
.section-padding .section-title-s2 p {
  color: #1f2530;
}
.jx-metric { background: #fff; border: 1px solid #e6e6e6; text-align: center; padding: 24px 10px; margin-bottom: 20px; }
.jx-metric h3 { margin: 0 0 8px; color: #c89f57; }
.jx-card { margin-bottom: 30px; }
.jx-card .inner {
  border: 1px solid #e6e6e6;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.jx-card .thumb { width: 100%; height: 210px; object-fit: cover; }
.jx-card .body {
  padding: 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.jx-card h3 { font-size: 20px; line-height: 1.4em; margin: 0 0 10px; }
.jx-card p { min-height: 66px; }
.jx-card h3,
.jx-card p {
  color: #1f2530;
}
.jx-card .body .theme-btn-s2 {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  box-sizing: border-box;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}
.jx-filter-group { margin-bottom: 30px; }
.jx-filter-group button { margin: 0 10px 10px 0; border: 1px solid #ddd; background: #fff; padding: 10px 16px; }
.jx-filter-group button.active { background: #c89f57; color: #fff; border-color: #c89f57; }
.jx-main-image { width: 100%; border: 1px solid #e6e6e6; margin-bottom: 20px; }
.jx-thumb { width: 100%; height: 110px; object-fit: cover; border: 1px solid #ddd; margin-bottom: 15px; cursor: pointer; }
.jx-rich p { margin-bottom: 12px; line-height: 1.8em; }
.jx-timeline { list-style: none; padding: 0; margin: 0; }
.jx-timeline li { background: #fff; border: 1px solid #e6e6e6; padding: 16px 18px; margin-bottom: 12px; }
.jx-contact-form textarea { height: 140px; width: 100%;}

.jx-about-intro {
  background: #ffffff;
}

.jx-about-copy .section-title-s2 h2 {
  color: #0f2438;
}

.jx-about-copy p {
  color: #2c3d4d;
  font-size: 20px;
  line-height: 1.95;
  margin-bottom: 18px;
}

/* Keep product/case cards aligned even when content heights differ */
#product-grid,
#case-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#product-grid > [class*="col-"],
#case-grid > [class*="col-"] {
  float: none;
  display: flex;
}

#product-grid .jx-card,
#case-grid .jx-card {
  width: 100%;
}

@media(max-width: 767px){ .jx-hero { padding: 130px 0 80px; } .jx-card .thumb { height: 180px; } }

@media (max-width: 991px) {
  .jx-about-copy p {
    font-size: 17px;
    line-height: 1.85;
  }
}