/* Hallmark · focused contact-page content and wrapping correction · P5 H5 E5 S5 R5 V4 */
/* Contact page — generated by the conservative CSS/JS modular refactor. */

.page-hero--contact {background-image:
    linear-gradient(135deg, rgba(26, 74, 31, 0.90) 0%, rgba(45, 122, 53, 0.78) 100%),
    url("/assets/images/factory.jpg");
  background-image:
    linear-gradient(135deg, rgba(26, 74, 31, 0.90) 0%, rgba(45, 122, 53, 0.78) 100%),
    image-set(url("/assets/images/performance-optimized/factory.jpg.webp") type("image/webp") 1x, url("/assets/images/factory.jpg") type("image/jpeg") 1x);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;}

html[lang="zh-CN"] .page-hero--contact .page-hero-sub,
html[lang="zh"] .page-hero--contact .page-hero-sub {
  max-width: 46rem;
  min-width: 0;
  line-height: 1.75;
  letter-spacing: 0;
  overflow-wrap: normal;
  text-wrap: balance;
}

@media (min-width: 900px) {
  html[lang="zh-CN"] .page-hero--contact .page-hero-sub,
  html[lang="zh"] .page-hero--contact .page-hero-sub {
    white-space: nowrap;
  }
}

.contact-cards-bar {background: var(--white); padding: 0; border-bottom: 1px solid var(--border);}

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

.contact-card-item {padding: 28px 24px; text-align: center; border-right: 1px solid var(--border); transition: var(--transition);}

.contact-card-item:last-child {border-right: none;}

.contact-card-item:hover {background: var(--green-pale);}

.cc-icon {width: 52px; height: 52px; border-radius: 50%; background: var(--green-pale); color: var(--green-main); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 12px;}

.contact-card-item h4 {font-size: 0.9rem; font-weight: 700; margin-bottom: 6px;}

.cc-main {display: block; font-size: 1rem; font-weight: 700; color: var(--green-main); margin-bottom: 4px;}

.contact-card-item p {font-size: 0.8rem; color: var(--text-light);}

@media (max-width: 700px) {
.contact-cards-row {grid-template-columns: 1fr 1fr;}
}

.contact-main-grid {display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start;}

@media (max-width: 1000px) {
.contact-main-grid {grid-template-columns: 1fr;}
}

.contact-two-col {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;}

@media (max-width: 860px) {
.contact-two-col {grid-template-columns: 1fr;}
}

.contact-two-col-left,
.contact-two-col-right {min-width: 0;}

.contact-two-col-heading {font-family: var(--font-head);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--green-main);
  display: inline-block;
  line-height: 1.25;}

.contact-office-info {display: flex; flex-direction: column; min-width: 0;}

.contact-kv-list {display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px;}

.contact-kv-row {display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.5;}

.contact-kv-label {flex-shrink: 0;
  font-weight: 700;
  color: var(--text-dark);}

.contact-kv-dots {flex: 1;
  min-width: 16px;
  border-bottom: 1px dotted var(--border);
  height: 0;
  align-self: center;
  opacity: 0.85;}

.contact-kv-value {flex: 1 1 200px;
  min-width: 0;
  text-align: right;
  color: var(--text-mid);}

@media (max-width: 600px) {
.contact-kv-row {flex-wrap: wrap;}

.contact-kv-dots {display: none;}

.contact-kv-value {flex: 1 1 100%; text-align: left; margin-top: 4px;}
}

.contact-kv-value a {color: var(--green-main);
  text-decoration: underline;
  text-underline-offset: 2px;}

.contact-kv-value a:hover {color: var(--green-dark);}

.btn-contact-route {display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 14px 32px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  background: #f29924;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(242, 153, 36, 0.35);}

.btn-contact-route:hover {background: #e08815;
  color: var(--white);
  transform: translateY(-1px);}

.contact-two-col-right .map-container {border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 16px;}

.contact-two-col-right #map.leaflet-map {width: 100%;
  height: 340px;}

.contact-inquiry-section .contact-form-wrap {max-width: 900px; margin: 0 auto;}

.contact-form-wrap {background: var(--white); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow);}

.contact-form-header {margin-bottom: 28px;}

.contact-form-header h2 {font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; display: flex; align-items: center; gap: 10px;}

.contact-form-header h2 i {color: var(--green-main);}

.contact-form-header p {font-size: 0.9rem; color: var(--text-mid);}

.form-row-2 {display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}

@media (max-width: 600px) {
.form-row-2 {grid-template-columns: 1fr;}
}

.form-group {margin-bottom: 18px;}

.form-group label {display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-dark); margin-bottom: 6px;}

.req {color: #e53935;}

.form-group input,
.form-group select,
.form-group textarea {width: 100%; padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: 6px; font-size: 0.9rem; font-family: inherit;
  color: var(--text-dark); background: var(--white); transition: var(--transition);
  outline: none;}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {border-color: var(--green-main); box-shadow: 0 0 0 3px rgba(45,122,53,0.1);}

.form-group textarea {resize: vertical; min-height: 120px;}

.form-err {display: block; font-size: 0.78rem; color: #e53935; margin-top: 4px; min-height: 16px;}

.form-secure {text-align: center; font-size: 0.78rem; color: var(--text-light); margin-top: 10px;}

.form-secure i {color: var(--green-main); margin-right: 4px;}

.form-group-check label {display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; font-weight: 400; color: var(--text-mid); cursor: pointer;}

.form-group-check input[type="checkbox"] {width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--green-main);}

.product-checkboxes {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;}

.checkbox-label {display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-mid); cursor: pointer;}

.checkbox-label input[type="checkbox"] {accent-color: var(--green-main);}

.subject-tabs {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;}

.stab {padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border); font-size: 0.82rem; font-weight: 600; color: var(--text-mid); background: var(--white); cursor: pointer; transition: var(--transition);}

.stab:hover {border-color: var(--green-main); color: var(--green-main);}

.stab.active {background: var(--green-main); border-color: var(--green-main); color: var(--white);}

.contact-info-card {background: var(--white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);}

.contact-info-card h3 {font-size: 1rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; color: var(--text-dark);}

.contact-info-card h3 i {color: var(--green-main);}

.company-info-list {display: flex; flex-direction: column; gap: 12px;}

.ci-item {display: flex; align-items: flex-start; gap: 12px;}

.ci-item > i {color: var(--green-main); margin-top: 3px; width: 16px; flex-shrink: 0;}

.ci-item strong {display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-dark);}

.ci-item span,
.ci-item a {font-size: 0.83rem; color: var(--text-mid);}

.ci-item a:hover {color: var(--green-main);}

.bm-list {display: flex; flex-direction: column; gap: 14px;}

.bm-item {display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-light); border-radius: var(--radius);}

.bm-avatar {width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; color: var(--white); flex-shrink: 0;}

.bm-info {flex: 1;}

.bm-info strong {display: block; font-size: 0.9rem; font-weight: 700;}

.bm-info span {font-size: 0.78rem; color: var(--text-light);}

.bm-contacts {display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap;}

.bm-contacts a {font-size: 0.78rem; color: var(--green-main); display: flex; align-items: center; gap: 4px;}

.bm-contacts a:hover {text-decoration: underline;}

.bm-status {font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 10px;}

.bm-status.online {background: #e8f5e9; color: #2e7d32;}

.map-title {font-size: 1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;}

.map-title i {color: var(--green-main);}

.map-container {border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);}

.map-actions {display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;}

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

.office-card {background: var(--white); border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: var(--shadow); border: 1px solid var(--border); transition: var(--transition);}

.office-card:hover {border-color: var(--green-main); transform: translateY(-4px);}

.office-flag {font-size: 2rem; margin-bottom: 10px;}

.office-card h4 {font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; color: var(--green-dark);}

.office-card p {display: flex; align-items: flex-start; gap: 8px; font-size: 0.83rem; color: var(--text-mid); margin-bottom: 8px; line-height: 1.5;}

.office-card p i {color: var(--green-main); margin-top: 2px; flex-shrink: 0;}

.office-card p a {color: var(--text-mid);}

.office-card p a:hover {color: var(--green-main);}

@media (max-width: 860px) {
.offices-grid {grid-template-columns: 1fr 1fr;}
}

.contact-faq {max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;}

.cfaq-item {background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden;}

.cfaq-q {width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-size: 0.95rem; font-weight: 600; color: var(--text-dark); text-align: left; background: none; border: none; cursor: pointer; transition: var(--transition);}

.cfaq-q:hover {color: var(--green-main); background: var(--green-pale);}

.cfaq-q[aria-expanded="true"] {color: var(--green-main); background: var(--green-pale);}

.cfaq-q i:first-child {color: var(--green-main); flex-shrink: 0;}

.cfaq-arrow {margin-left: auto; font-size: 0.75rem; transition: transform 0.3s ease;}

.cfaq-q[aria-expanded="true"] .cfaq-arrow {transform: rotate(180deg);}

.cfaq-a {max-height: 0; overflow: hidden; transition: max-height 0.35s ease;}

.cfaq-a.open {max-height: 300px;}

.cfaq-a p {padding: 0 20px 16px; font-size: 0.88rem; color: var(--text-mid); line-height: 1.75;}

.b2b-modal {position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;}

.b2b-modal[hidden] {display: none;}

.b2b-modal-overlay {position: absolute; inset: 0; background: rgba(0,0,0,0.6);}

.b2b-modal-box {position: relative; z-index: 1; background: var(--white); border-radius: var(--radius-lg); padding: 40px 32px; width: min(480px, 92vw); box-shadow: var(--shadow-lg);}

#map.leaflet-map {height: 320px; width: 100%; border-radius: var(--radius);}

.leaflet-popup-content-wrapper {border-radius: var(--radius);}

.leaflet-popup-content {font-family: inherit; font-size: 0.88rem;}