/* =========================================================
   宏钜 HUCEO — English Homepage Framework
   Design-to-code from Ardot canvas (khao-tech style reference)
   Strict visual match: layout / color / radius / spacing
   ========================================================= */

:root {
  --brand:       #0883DF;   /* r:0.031 g:0.514 b:0.875 */
  --navy:        #0A2A4A;   /* r:0.039 g:0.165 b:0.290 */
  --ink:         #1A1F2B;   /* r:0.102 g:0.122 b:0.169 */
  --body:        #3F4654;   /* r:0.247 g:0.275 b:0.329 */
  --muted:       #6B7280;   /* r:0.420 g:0.447 b:0.502 */
  --light:       #B9C6D6;   /* r:0.725 g:0.776 b:0.839 */
  --light-2:     #9CC6F0;   /* r:0.612 g:0.776 b:0.941 */
  --light-3:     #D6E4F5;   /* r:0.839 g:0.894 b:0.961 */
  --blue-soft:   #E6F2FC;   /* r:0.902 g:0.949 b:0.988 */
  --blue-line:   #4DA3F5;   /* r:0.302 g:0.639 b:0.961 */
  --bg-soft:     #F4F7FB;   /* r:0.957 g:0.969 b:0.984 */
  --line:        #E6EBF2;   /* r:0.902 g:0.922 b:0.949 */
  --white:       #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; }

body {
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;            /* base bumped +20% (16 -> 19.2) */
  line-height: 2;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- Public utility classes ---------- */
.w1600 { width: 1600px; max-width: 95%; margin: auto; }
.pdt80 { padding-top: 80px; padding-bottom: 80px; }

/* ---------- Full-width responsive layout (no scaling) ---------- */
/* content sits below the fixed header */
#stage { padding-top: 141px; }

/* =========================================================
   HEADER — two rows (utility bar + main bar)
   ========================================================= */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
  z-index: 1000;
}

/* ---- Row 1: utility bar ---- */
.top-bar { background: var(--brand);}
.top-bar-inner {
  height: 40px; display: flex; align-items: center;
  justify-content: space-between;
  font-size: 15.6px;
}
.tb-left { display: flex; align-items: center; gap: 24px; }
.tb-item {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--white); transition: color .15s ease;
}
.tb-item:hover { color: var(--white); }
.tb-item .ic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--white); }

.tb-right { display: flex; align-items: center; gap: 20px; }
.socials { display: flex; align-items: center; gap: 12px; }
.social {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.social svg { width: 18px; height: 18px; display: block; }
/*.social:hover { background: var(--brand); color: var(--white); }*/

/* ---- language dropdown (click to expand / collapse) ---- */
.lang-dropdown { position: relative; margin-left: 18px; }
.lang-current {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 20px; padding: 5px 12px; cursor: pointer;
  font-size: 15.6px; color: var(--ink); font-family: inherit;
  transition: border-color .15s ease;
}
.lang-current:hover { border-color: var(--brand); }
.lang-current .ic-globe { width: 18px; height: 18px; color: var(--brand); }
.lang-current .lang-label { font-weight: 600; }
.lang-current .caret { width: 12px; height: 12px; transition: transform .2s ease; }
.lang-dropdown.open .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: -20px;
  min-width: 130px; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(10,42,74,.14);
  padding: 6px; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: all .18s ease;
  z-index: 60;
}
.lang-dropdown.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-item {
  display: block; padding: 8px 12px; border-radius: 6px;
  font-size: 16px; color: var(--body); cursor: pointer;
  transition: background .15s ease, color .15s ease;text-align: center;
}
.lang-item:hover { background: var(--bg-soft); color: var(--brand); }
.lang-item.active { color: var(--brand); font-weight: 600; }

/* ---- Row 2: main bar ---- */
.main-bar { background: var(--white); }
.main-bar-inner {
  height: 100px; display: flex; align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 21.6px;
}
.logo-text { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: .5px; }
.logo-img { height: 60px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 40px; }
.nav-item { position: relative; }
.nav-item > a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 18px; color: var(--ink); transition: color .15s ease;line-height: 100px;
}
.nav-item > a:hover { color: var(--brand); }
.nav-item > a.active { color: var(--brand); font-weight: 600; }
.nav-item .caret { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-item.has-dropdown:hover .caret,
.nav-item.has-dropdown.open .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 250px; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(10,42,74,.14);
  padding: 8px; opacity: 0; visibility: hidden;
  transition: all .18s ease; z-index: 50;
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a {
  display: block; padding: 10px 14px; border-radius: 6px;
  font-size: 16.8px; color: var(--body); transition: background .15s ease, color .15s ease;
}
.dropdown a:hover { background: var(--bg-soft); color: var(--brand); }

.main-actions { display: flex; align-items: center; gap: 14px; }
.search-btn {
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer; transition: all .15s ease;
}
.search-btn svg { width: 18px; height: 18px; }
.search-btn:hover { border-color: var(--brand); color: var(--brand); }
.quote-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 22px; border-radius: 6px;
  background: var(--brand); color: var(--white);
  font-size: 16px; font-weight: 600; cursor: pointer;line-height: 1.2;
  transition: background .15s ease;
}
.quote-btn:hover { background: #0a73c4; }

/* ---- Search overlay ---- */
.search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,42,74,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 18vh; opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-box {
  width: 640px; max-width: 90%; background: var(--white);
  border-radius: 12px; display: flex; align-items: center;
  padding: 6px 8px 6px 20px;
  box-shadow: 0 24px 60px rgba(10,42,74,.28);
  transform: translateY(-12px); transition: transform .2s ease;
}
.search-overlay.open .search-box { transform: translateY(0); }
.search-input {
  flex: 1; border: none; outline: none;
  font-size: 16px; color: var(--ink); font-family: inherit;
  padding: 14px 0; background: transparent;
  width: 100%;
  overflow: hidden;
}
.search-close {
  width: 40px; height: 40px; border-radius: 8px; border: none;
  background: var(--bg-soft); color: var(--muted);
  font-size: 28.8px; line-height: 1; cursor: pointer; transition: all .15s ease;
}
.search-close:hover { background: var(--line); color: var(--ink); }

/* =========================================================
   BANNER (Swiper carousel — image only, no text)
   (banner image paths are managed separately — do not edit)
   ========================================================= */
.banner { width: 100%; }
.banner-swiper { width: 100%; }
.banner-swiper .swiper-slide { width: 100%; height: 100%; }
.banner-swiper .swiper-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* prev / next arrows */
.banner-swiper .swiper-button-prev,
.banner-swiper .swiper-button-next {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--navy);
  transition: background .15s ease, color .15s ease;
}
.banner-swiper .swiper-button-prev:hover,
.banner-swiper .swiper-button-next:hover {
  background: var(--brand); color: var(--white);
}
.banner-swiper .swiper-button-prev::after,
.banner-swiper .swiper-button-next::after { font-size: 21.6px; font-weight: 700; }
.banner-swiper .swiper-button-prev { left: 24px; }
.banner-swiper .swiper-button-next { right: 24px; }
/* pagination dots */
.banner-swiper .swiper-pagination { bottom: 20px; }
.banner-swiper .swiper-pagination-bullet {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.6); opacity: 1;
  transition: width .2s ease, border-radius .2s ease, background .2s ease;
}
.banner-swiper .swiper-pagination-bullet-active {
  width: 28px; border-radius: 5px; background: var(--brand);
}

/* =========================================================
   SECTION TITLE BLOCK  (sy_bt pattern)
   ========================================================= */
.title-block { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.title-block h2 { font-size: 40px; font-weight: 700; color: var(--ink); text-align: center;line-height: 1.4; }
.title-block p  { font-size: 18px; font-weight: 400; color: var(--muted); text-align: center;line-height: 1.6; }

/* =========================================================
   SECTION SHELL — full-bleed background, 1600px centered content
   ========================================================= */
.about-section      { background: var(--white); }
.products-section   { background: var(--bg-soft); }
.divisions-section  { background: var(--white); }
.why-section        { background: url(../img/why-section.jpg) center center / cover no-repeat; }
.process-section    { background: var(--bg-soft); }
.equipment-section  { background: var(--white); }
.inquiry-section    { background: var(--bg-soft); }

/* vertical rhythm + inner 1600 container for content sections */
.about-section > .w1600,
.products-section > .w1600,
.divisions-section > .w1600,
.why-section > .w1600,
.process-section > .w1600,
.equipment-section > .w1600,
.inquiry-section > .w1600 {
  display: flex; flex-direction: column; gap: 44px;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-row { display: flex; align-items: center; gap: 48px; flex-direction: row-reverse;}
.about-text { display: flex; flex-direction: column; gap: 18px; width: 48%; }
.about-text p { font-size: 18px; font-weight: 400; color: var(--body); line-height: 2; }
.learn-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 600; color: var(--brand); cursor: pointer;
}
.learn-more svg { width: 16px; height: 16px; }
.about-image { flex: 1; border-radius: 12px; min-width: 0; overflow: hidden; }
.about-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   PRODUCTS
   ========================================================= */
.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.product-card {
  width: auto; background: var(--white);
  border-radius: 12px; border: 1px solid var(--line);
  overflow: hidden;
}
.product-card .card-img { width: 100%; overflow: hidden; }
.product-card .card-img img { width: 100%; height: auto; display: block; }
.product-card .card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.product-card .card-title { font-size: 20.4px; font-weight: 600; color: var(--ink); }
.product-card .card-desc  { font-size: 16.8px; font-weight: 400; color: var(--muted); line-height: 26.4px; }
.product-card .card-learn { font-size: 16.8px; font-weight: 600; color: var(--brand); }

/* =========================================================
   DIVISIONS
   ========================================================= */
.division-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.division-card {
  width: auto; padding: 24px; border-radius: 12px;
  background: var(--bg-soft);
  display: flex; flex-direction: column; gap: 14px;
}
.div-icon {
  width: 50px; height: 50px; border-radius: 10px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
}
.div-icon svg { width: 30px; height: 30px; }
.division-card .div-title { font-size: 20.4px; font-weight: 600; color: var(--ink); }
.division-card .div-desc  { font-size: 16.8px; font-weight: 400; color: var(--muted); line-height: 26.4px; }

/* =========================================================
   WHY CHOOSE (dark band)
   ========================================================= */
.why-section .title-block h2 { color: var(--white); }
.why-section .title-block p  { color: var(--light-2); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.why-card {
  width: auto; padding: 24px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 16px;
}
.why-check { width: 28px; height: 28px; flex: 0 0 28px; }
.why-check svg { width: 28px; height: 28px; }
.why-text { display: flex; flex-direction: column; gap: 6px; }
.why-text .why-title { font-size: 20.4px; font-weight: 600; color: var(--white); }
.why-text .why-desc  { font-size: 16.8px; font-weight: 400; color: var(--light); line-height: 26.4px; }

/* =========================================================
   PROCESS
   ========================================================= */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.process-step { width: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.process-num {
  width: 48px; height: 48px; border-radius: 24px;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: var(--white);
}
.process-step .step-title { font-size: 21.6px; font-weight: 600; color: var(--ink); }
.process-step .step-desc  { font-size: 16.8px; font-weight: 400; color: var(--muted); line-height: 26.4px; }

/* =========================================================
   EQUIPMENT
   ========================================================= */
.equipment-swiper { position: relative; width: 100%; }
.equipment-swiper .swiper-slide { height: auto; }
.equipment-swiper .equip { width: 100%;border-radius: 12px; overflow: hidden; }
.equipment-swiper .equip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equipment-swiper .equip-name {
  margin-top: 12px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* prev / next arrows */
.equipment-swiper .swiper-button-prev,
.equipment-swiper .swiper-button-next {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--brand);
  border: 1px solid var(--line);
  top: 50%;
  margin-top: -22px; /* -half of arrow height, overrides Swiper's default */
  transition: background .15s ease, color .15s ease;
}
.equipment-swiper .swiper-button-prev:hover,
.equipment-swiper .swiper-button-next:hover {
  background: var(--brand); color: var(--white);
}
.equipment-swiper .swiper-button-prev::after,
.equipment-swiper .swiper-button-next::after { font-size: 19.2px; font-weight: 700; }
.equipment-swiper .swiper-button-prev { left: 12px; }
.equipment-swiper .swiper-button-next { right: 12px; }

/* =========================================================
   INQUIRY / 询盘  (left: contact info, right: form)
   ========================================================= */
.inquiry-row { display: flex; gap: 48px; align-items: stretch; }
.inquiry-info { width: 360px; flex: 0 0 360px; display: flex; flex-direction: column; gap: 22px; }
.inquiry-info .info-title { font-size: 21.6px; font-weight: 600; color: var(--ink); }
.info-item { display: flex; gap: 14px; align-items: flex-start; }
.info-item .ic {
  width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; color: var(--brand);
}
.info-text { display: flex; flex-direction: column; gap: 3px; }
.info-label { font-size: 15.6px; color: var(--muted); }
.info-value { font-size: 18px; font-weight: 500; color: var(--ink); line-height: 26.4px; }

.inquiry-form {
  flex: 1; min-width: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.form-row { display: flex; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.form-field label { font-size: 15.6px; color: var(--muted); }
.form-field input,
.form-field textarea {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font-size: 16.8px; color: var(--ink);
  font-family: inherit; background: var(--white);
  outline: none; transition: border-color .15s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #AEB6C2; }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--brand); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-submit {
  align-self: flex-start; padding: 13px 32px; border-radius: 6px;
  background: var(--brand); color: var(--white);
  font-size: 18px; font-weight: 600; border: none; cursor: pointer;
  transition: background .15s ease;
}
.form-submit:hover { background: #0a73c4; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--navy); display: flex; flex-direction: column; }
.footer-top {
  display: flex; justify-content: space-between;
  padding: 56px 0 40px;
}
.brand-col { width: 20%; display: flex; flex-direction: column; gap: 14px; }
.brand-logo {}
.brand-logo img{display: block;height: 60px;}
.brand-tag  { font-size: 18px; font-weight: 400; color: var(--light-2); }
.brand-desc { font-size: 16px; font-weight: 400; color: var(--light); line-height: 1.6; }

.footer-col { width: 20%; display: flex; flex-direction: column; gap: 10px; }
.footer-col.contact { width: 30%; }
.footer-col h4 { font-size: 20px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.footer-col a, .footer-col span {
  font-size: 16px; font-weight: 400; color: var(--light);
  transition: color .15s ease;line-height: 2;
}
.footer-col a:hover { color: var(--white); }

.footer-divider { width: 100%; height: 1px; background: rgba(255,255,255,.10); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 0;
}
.footer-bottom .copyright { font-size: 16px; font-weight: 400; color: var(--light); }
.footer-lang { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.footer-lang .zh { font-size: 16px; font-weight: 400; color: var(--light); }
.footer-lang .en { font-size: 16px; font-weight: 700; color: var(--blue-line); }

/* =========================================================
   PLACEHOLDER (gray image stand-in, per design spec)
   ========================================================= */
.ph {
  background: linear-gradient(135deg, #EEF1F5 0%, #E2E7EE 100%);
  display: flex; align-items: center; justify-content: center;
  color: #9AA4B2; font-size: 15.6px; letter-spacing: 1px;
  text-transform: uppercase; position: relative; overflow: hidden;
}
.ph::after { content: attr(data-label); }

/* =========================================================
   RESPONSIVE — full-width, reflow at breakpoints
   ========================================================= */
@media (max-width: 1380px) {
  .nav { gap: 18px; }
}

/* ---- Tablet: keep 2-col grids, stack footer into rows ---- */
@media (max-width: 1200px) {
  .product-grid    { grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .division-grid   { grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .why-grid        { grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .process-steps   { grid-template-columns: repeat(2, 1fr);}
}

/* ---- Small tablet ---- */
@media (max-width: 992px) {
  .about-row       { flex-direction: column; align-items: stretch; }
  .about-text      { width: 100%; }
  .about-image     { height: 300px; }
  .inquiry-row     { flex-direction: column; }
  .inquiry-info    { width: 100%; flex: none; }

  .footer-top      { flex-wrap: wrap; gap: 30px; }
  .brand-col       { width: 100%; }
  .footer-col      { width: calc(50% - 15px); }
  .footer-col.contact { width: 100%; }
}

/* ---- Mobile: shrink fixed header, nav scrolls horizontally ---- */
@media (max-width: 768px) {
  #stage          { padding-top: 64px; }   /* matches shrunk fixed header height */
  .top-bar        { display: none; }

  .main-bar-inner { height: 64px;gap: 12px; }
  .logo-img       { height: 44px; }

  .nav {
    flex: 1 1 auto; min-width: 0;
    gap: 22px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item > a   { line-height: 64px; font-size: 17px; }

  .main-actions   { flex: 0 0 auto; gap: 10px; }
  .search-btn     { width: 36px; height: 36px; }
  .search-btn svg { width: 16px; height: 16px; }
  .quote-btn      { padding: 8px 14px; font-size: 14px; }

  .division-grid,
  .why-grid,
  .process-steps  { grid-template-columns: 1fr; }


  .about-image    { height: 240px; }

  .about-section, .products-section, .divisions-section,
  .why-section, .process-section, .equipment-section, .inquiry-section {
    padding-top: 30px; padding-bottom: 30px;
  }

}

/* ---- Small phones ---- */
@media (max-width: 480px) {


  .about-image    { height: 200px; }

  .product-card .card-body { padding: 14px; }
  .process-num    { width: 30px; height: 30px; font-size: 14px; }

  .inquiry-form   { padding: 18px; }
  .form-row       { flex-direction: column; gap: 14px; }

  .footer-col     { width: 100%; }
}

/* =========================================================
   INNER PAGES — shared shell (page banner, breadcrumb, layouts)
   Appended for sub-pages; does not affect the homepage.
   ========================================================= */
.page-banner {
  background: linear-gradient(120deg, var(--navy) 0%, #0c3055 55%, var(--brand) 130%);
  color: var(--white);
  padding: 70px 0;
  position: relative;
}
.page-banner > .w1600 { display: flex; flex-direction: column; gap: 16px; position: relative;z-index: 1;}
.page-eyebrow { font-size: 16px; color: var(--light-2); letter-spacing: 2.5px; text-transform: uppercase; }
.page-title { font-size: 46px; font-weight: 700; color: var(--white); line-height: 1.25; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; color: rgba(255,255,255,.72); }
.breadcrumb a { color: rgba(255,255,255,.72); transition: color .15s ease; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep { color: rgba(255,255,255,.4); }
.breadcrumb .current { color: var(--light-2); font-weight: 600; }

/* inner content section */
.inner-section { background: var(--white); }
.inner-section.alt { background: var(--bg-soft); }
.inner-section > .w1600 { display: flex; flex-direction: column; gap: 40px; }

/* section heading (left aligned) */
.sec-head { display: flex; flex-direction: column; gap: 10px; }
.sec-head h2 { font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.sec-head p { font-size: 17px; color: var(--muted); line-height: 1.7; }

.lead { font-size: 19.2px; line-height: 2; color: var(--body); }

/* two-column split */
.split { display: flex; align-items: center; gap: 56px; }
.split.reverse { flex-direction: row-reverse; }
.split .split-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.split .split-media { flex: 1; min-width: 0; }
.split .split-media img { width: 100%; object-fit: cover; border-radius: 12px; display: block; }
.split .split-text .quote-btn { align-self: flex-start; }

/* stats */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-item { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 30px 24px; text-align: center; }
.stat-num { font-size: 38px; font-weight: 700; color: var(--brand); line-height: 1.15; }
.stat-label { font-size: 16.8px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* value cards */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.value-card .vc-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; }
.value-card .vc-icon svg { width: 30px; height: 30px; }
.value-card .vc-title { font-size: 21.6px; font-weight: 600; color: var(--ink); }
.value-card .vc-desc { font-size: 16.8px; color: var(--muted); line-height: 26.4px; }

/* jobs */
.job-list { display: flex; flex-direction: column; gap: 16px; }
.job-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px; transition: border-color .15s ease, box-shadow .15s ease; }
.job-item:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(10,42,74,.08); }
.job-main { display: flex; flex-direction: column; gap: 6px; }
.job-title { font-size: 19.2px; font-weight: 600; color: var(--ink); }
.job-meta { font-size: 15.6px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }
.job-apply { flex: 0 0 auto; padding: 10px 22px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 16px; font-weight: 600; }

/* org chart */
.org { display: flex; flex-direction: column; align-items: center; }

/* series grid (product center) */
.series-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.series-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: border-color .15s ease, box-shadow .15s ease; }
.series-card:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(10,42,74,.08); }
.series-card .sc-no { font-size: 16px; font-weight: 700; color: var(--brand); }
.series-card .sc-title { font-size: 21.6px; font-weight: 600; color: var(--ink); }
.series-card .sc-desc { font-size: 16.8px; color: var(--muted); line-height: 26.4px; }
.series-card .sc-link { font-size: 16.8px; font-weight: 600; color: var(--brand); margin-top: 4px; }

/* product detail grid */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prod-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.prod-card .pc-media { width: 100%; }
.prod-card .pc-media .ph { width: 100%;}
.prod-card .pc-media img { width: 100%;object-fit: cover; display: block; }
.prod-card .pc-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.prod-card .pc-title { font-size: 19.2px; font-weight: 600; color: var(--ink); }
.prod-card .pc-desc { font-size: 16px; color: var(--muted); line-height: 25px; }
.prod-card .pc-series { align-self: flex-start; font-size: 13.2px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--brand); background: rgba(8,131,223,.10); padding: 3px 11px; border-radius: 20px; }
.prod-card .pc-link { margin-top: 2px; font-size: 15.6px; font-weight: 600; color: var(--brand); text-decoration: none; }
.prod-card .pc-link:hover { text-decoration: underline; }

/* product filter bar (products.html) */
.prod-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.pf-btn { font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 9px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: all .2s ease; }
.pf-btn:hover { border-color: var(--brand); color: var(--brand); }
.pf-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* applications */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.app-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.app-card .ac-no { font-size: 16px; font-weight: 700; color: var(--brand); }
.app-card .ac-title { font-size: 21.6px; font-weight: 600; color: var(--ink); }
.app-card .ac-desc { font-size: 16.8px; color: var(--muted); line-height: 26.4px; }
.app-card .ac-top { display: flex; align-items: center; justify-content: space-between; }
.app-card .ac-icon { width: 58px; height: 58px; border-radius: 14px; background: rgba(8,131,223,.10); display: flex; align-items: center; justify-content: center; color: var(--brand); transition: background .2s ease, color .2s ease; }
.app-card .ac-icon svg { width: 30px; height: 30px; }
.app-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(10,42,74,.10); border-color: rgba(8,131,223,.35); }
.app-card:hover .ac-icon { background: var(--brand); color: #fff; }

/* news */
.news-list { display: flex; flex-direction: column; gap: 20px; }
.news-card { display: flex; gap: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 22px; align-items: stretch; transition: border-color .15s ease, box-shadow .15s ease; }
.news-card:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(10,42,74,.08); }
.news-card .nc-datebox { flex: 0 0 120px; align-self: stretch; background: var(--navy); color: #fff; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.news-card .nc-day { font-size: 40px; font-weight: 700; line-height: 1; }
.news-card .nc-month { font-size: 14px; letter-spacing: .6px; opacity: .85; }
.news-card .nc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.news-card .nc-cat { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--brand); background: rgba(8,131,223,.10); padding: 4px 12px; border-radius: 20px; }
.news-card .nc-title { font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.news-card .nc-excerpt { font-size: 16.8px; color: var(--muted); line-height: 26.4px; }
.news-card .nc-more { font-size: 16.8px; font-weight: 600; color: var(--brand); margin-top: 2px; }

/* article */
.article { display: flex; flex-direction: column; gap: 24px; }
.article .art-hero .ph { width: 100%; height: 360px; border-radius: 12px; }
.article .art-meta { display: flex; gap: 16px; font-size: 15.6px; color: var(--muted); flex-wrap: wrap; }
.article .art-meta .tag { color: var(--brand); font-weight: 600; }
.article .art-body { display: flex; flex-direction: column; gap: 18px; }
.article .art-body p { font-size: 18px; line-height: 2; color: var(--body); }
.article .art-body h3 { font-size: 24px; font-weight: 700; color: var(--ink); margin-top: 12px; }

/* contact */
.contact-grid { display: flex; gap: 48px; align-items: flex-start; }
.contact-grid .cg-info { width: 360px; flex: 0 0 360px; display: flex; flex-direction: column; gap: 22px; }
.contact-grid .cg-form { flex: 1;width: 100%;overflow: hidden; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.company-block { margin-top: 48px; display: flex; flex-direction: column; gap: 28px; }
.company-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.co-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.co-card:hover { border-color: var(--brand); box-shadow: 0 10px 28px rgba(10,42,74,.08); }
.co-card .co-name { font-size: 21.6px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-card .co-tag { font-size: 13px; font-weight: 500; color: var(--brand); background: rgba(8,131,223,.10); padding: 3px 10px; border-radius: 20px; }
.co-card .co-rows { display: flex; flex-direction: column; gap: 12px; }
.co-card .co-row { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.6; }
.co-card .co-label { flex: 0 0 84px; color: var(--muted); font-weight: 600; }
.co-card .co-value { flex: 1; min-width: 0; color: var(--ink); }

/* CTA band */
.cta-band { background: var(--brand); border-radius: 16px; padding: 46px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band .cta-text { color: #fff; display: flex; flex-direction: column; gap: 8px; }
.cta-band .cta-title { font-size: 26.4px; font-weight: 700; }
.cta-band .cta-sub { font-size: 17px; color: rgba(255,255,255,.85); }
.cta-band .cta-btn { flex: 0 0 auto; padding: 14px 32px; border-radius: 8px; background: #fff; color: var(--brand); font-size: 17px; font-weight: 700; }

/* inner-page responsive */
@media (max-width: 1200px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .value-grid, .series-grid, .app-grid, .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .split { gap: 36px; }
}
@media (max-width: 992px) {
  .contact-grid { flex-direction: column; }
  .contact-grid .cg-info { width: 100%; flex: none; }
  .news-card { flex-direction: column; }
  .news-card .nc-datebox { flex: none; width: 100%; flex-direction: row; gap: 12px; padding: 14px 20px; }
  .news-card .nc-day { font-size: 30px; }
}
@media (max-width: 768px) {
  .page-banner { padding: 48px 0; }
  .page-title { font-size: 30px; }
  .page-eyebrow { font-size: 14px; }
  .split, .split.reverse { flex-direction: column; align-items: stretch; }
  .split .split-media .ph { height: 240px; }
  .stat-row, .value-grid, .series-grid, .app-grid { grid-template-columns: 1fr; }
  .company-cards { grid-template-columns: 1fr; }
  .sec-head h2 { font-size: 26px; }
  .cta-band { padding: 32px 24px; }
  .cta-band .cta-title { font-size: 22px; }
}
@media (max-width: 480px) {
  .job-item { flex-direction: column; align-items: flex-start; }
  .article .art-hero .ph { height: 220px; }
}

/* ===== Equipment click-to-zoom (about5.html) ===== */
.prod-card a.pc-media { display: block; }
.equip-zoom { cursor: zoom-in; position: relative; overflow: hidden; }
.equip-zoom::after {
  content: "";
  position: absolute; right: 12px; bottom: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10,42,74,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3Cpath d='M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;
  opacity: 0; transform: scale(.85); transition: .2s ease;
}
.equip-zoom:hover::after { opacity: 1; transform: scale(1); }

.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8,16,28,.93);
  display: none; align-items: center; justify-content: center;
  padding: 48px;
}
.lightbox.open { display: flex; }
.lightbox .lb-img { max-width: 90vw; max-height: 84vh; border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.lightbox .lb-cap { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: #fff; font-size: 19.2px; letter-spacing: .02em; }
.lightbox .lb-close { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 28px; line-height: 46px; text-align: center; cursor: pointer; transition: .2s; }
.lightbox .lb-close:hover { background: rgba(255,255,255,.26); }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 54px; text-align: center; cursor: pointer; user-select: none; transition: .2s; }
.lightbox .lb-prev { left: 26px; }
.lightbox .lb-next { right: 26px; }
.lightbox .lb-nav:hover { background: rgba(255,255,255,.26); }
@media (max-width: 768px) {
  .lightbox { padding: 20px; }
  .lightbox .lb-nav { width: 44px; height: 44px; line-height: 44px; font-size: 20px; }
  .lightbox .lb-prev { left: 10px; }
  .lightbox .lb-next { right: 10px; }
}

/* ===== Pagination (shared: news / products / about5) ===== */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination .pg-btn, .pagination .pg-num {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink);
  font-size: 16px; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer; transition: .18s ease;
}
.pagination .pg-num.is-active,
.pagination .pg-btn:hover,
.pagination .pg-num:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pagination .pg-btn:disabled:hover { background: var(--white); border-color: var(--line); color: var(--ink); }
.pagination .pg-dots { color: var(--muted); padding: 0 4px; user-select: none; }
@media (max-width: 480px) {
  .pagination { gap: 6px; margin-top: 28px; }
  .pagination .pg-btn, .pagination .pg-num { min-width: 38px; height: 38px; padding: 0 10px; font-size: 15px; }
}

/* =========================================================
   TABLET / MOBILE NAV — hamburger drawer (≤1199px, fixes horizontal-scroll nav)
   ========================================================= */
.nav-toggle { display: none; }

/* =========================================================
   SPLIT MEDIA SWIPER — product multi-image carousel (products-1.html)
   ========================================================= */
.split-media .split-swiper { position: relative; width: 100%; }
.split-media .split-swiper .swiper-slide img { width: 100%; object-fit: cover; border-radius: 12px; display: block; }
/* prev / next arrows */
.split-media .split-swiper .swiper-button-prev,
.split-media .split-swiper .swiper-button-next {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--brand);
  border: 1px solid var(--line);
  top: 50%; margin-top: -22px; /* override Swiper default */
  transition: background .15s ease, color .15s ease;
}
.split-media .split-swiper .swiper-button-prev:hover,
.split-media .split-swiper .swiper-button-next:hover { background: var(--brand); color: var(--white); }
.split-media .split-swiper .swiper-button-prev::after,
.split-media .split-swiper .swiper-button-next::after { font-size: 19.2px; font-weight: 700; }
.split-media .split-swiper .swiper-button-prev { left: 12px; }
.split-media .split-swiper .swiper-button-next { right: 12px; }
/* single image: hide nav buttons entirely */
.split-media .split-swiper.is-single .swiper-button-prev,
.split-media .split-swiper.is-single .swiper-button-next { display: none; }

@media (max-width: 1199px) {
  .site-header { z-index: 1200; }

  /* compact header for tablet + mobile so the drawer aligns right below it */
  #stage { padding-top: 64px; }
  .top-bar { display: none; }
  .main-bar-inner { height: 64px; gap: 12px; }
  .logo-img { height: 44px; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--white); cursor: pointer; flex: 0 0 auto;
  }
  .nav-toggle span {
    display: block; width: 20px; height: 2px; margin: 0 auto;
    background: var(--ink); border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: fixed; top: 64px; right: 0;
    width: min(82%, 340px); height: calc(100vh - 64px);
    flex: none; flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 0; overflow-y: auto; overflow-x: hidden;
    background: var(--white);
    box-shadow: -12px 0 40px rgba(10,42,74,.18);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1150;
  }
  body.nav-open .nav { transform: translateX(0); }

  .nav-item { width: 100%; }
  .nav-item > a {
    justify-content: space-between; line-height: 1.4;
    padding: 15px 20px; font-size: 17px; width: 100%;
    border-bottom: 1px solid var(--line);
  }

  .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; background: var(--bg-soft); border: none; border-radius: 0;
    box-shadow: none; padding: 0 0 8px; display: none;
  }
  .nav-item.has-dropdown.open .dropdown { display: block; }
  /* neutralize the desktop hover/open translateX(-50%) that shoves the accordion off to the side */
  .nav-item.has-dropdown:hover .dropdown,
  .nav-item.has-dropdown.open .dropdown { transform: none; }
  .dropdown a {
    padding: 12px 36px; font-size: 15.6px;
    border-bottom: 1px solid rgba(230,235,242,.6);
  }

  body.nav-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(10,42,74,.45); z-index: 1100;
  }
  body.nav-open { overflow: hidden; }

  .form-row { flex-direction: column; gap: 18px; }
  .form-field { width: 100%; }

  .co-card .co-row { flex-direction: column; gap: 4px; }
  .co-card .co-label { flex: none; }

  .footer-top { gap: 20px; }
  .footer-col, .footer-col.contact { width: 100%; }
  .banner-swiper .swiper-button-prev,.banner-swiper .swiper-button-next {width: 36px;height: 36px;}
  .banner-swiper .swiper-button-prev::after, .banner-swiper .swiper-button-next::after{font-size: 14px;}
  .banner-swiper .swiper-pagination-bullet{width: 6px;height: 6px;}
  .banner-swiper .swiper-pagination-bullet-active{width: 20px;}
  .title-block    { gap: 5px; }
  .title-block h2{font-size: 20px;}
  .title-block p  { font-size: 14px; }
  .about-section > .w1600, .products-section > .w1600, .divisions-section > .w1600, .why-section > .w1600, .process-section > .w1600, .equipment-section > .w1600, .inquiry-section > .w1600{gap: 20px;}
  .about-text p{font-size: 14px;}
  .learn-more{font-size: 14px;}
  .learn-more svg{width: 14px;height: 14px;}
  .about-row{gap: 20px;}
  .product-card .card-title{font-size: 16px;line-height: 1.6;}
  .product-card .card-desc{font-size: 14px;line-height: 24px;}
  .product-card .card-learn{font-size: 14px;}
  .division-card .div-title{font-size: 16px;}
  .division-card .div-desc{font-size: 14px;line-height: 24px;}
  .division-card{gap: 5px;}
  .why-text .why-title{font-size: 16px;}
  .why-text .why-desc{font-size: 14px;line-height: 24px;}
  .process-step{gap: 5px;}
  .process-step .step-title{font-size: 16px;}
  .process-step .step-desc{font-size: 14px;line-height: 24px;}
  .equipment-swiper .swiper-button-prev, .equipment-swiper .swiper-button-next{width: 36px;height: 36px;}
  .equipment-swiper .swiper-button-prev::after, .equipment-swiper .swiper-button-next::after{font-size: 14px;}
  .equipment-swiper .equip-name{font-size: 14px;margin-top: 5px;}
  .inquiry-info .info-title{font-size: 18px;}
  .info-label{font-size: 14px;}
  .info-value{font-size: 16px;}
  .inquiry-row{gap: 20px;}
  .form-field label{font-size: 14px;}
  .form-field input, .form-field textarea{font-size: 14px;}
  .form-submit{font-size: 14px;}
  .footer-col:nth-child(2),.footer-col:nth-child(3){display: none;}
  .brand-col{width: 40%;}
  .footer-col.contact{width: 60%;}
  .page-title{font-size: 20px;}
  .page-banner > .w1600{gap: 8px;}
  .breadcrumb{gap: 5px;font-size: 12px;}
  .page-banner{padding: 40px 0;}
  .pdt80{padding-top: 30px;padding-bottom: 30px;}
  .sec-head h2{font-size: 20px;}
  .sec-head p{font-size: 14px;}
  body{font-size: 14px;}
  .inner-section > .w1600{gap: 20px;}
  .stat-row{gap: 10px;}
  .stat-num{font-size: 30px;}
  .stat-label{font-size: 14px;}
  .cta-band .cta-title{font-size: 20px;}
  .cta-band .cta-sub{font-size: 14px;}
  .cta-band .cta-btn{font-size: 14px;padding: 5px 20px;}
  .value-card{gap: 5px;padding: 20px;}
  .value-card .vc-title{font-size: 16px;}
  .value-card .vc-desc{font-size: 14px;line-height: 24px;}
  .job-title{font-size: 16px;}
  .job-meta{font-size: 14px;}
  .job-apply{font-size: 14px;padding: 5px 20px;}
  .prod-card .pc-title{font-size: 14px;}
  .prod-card .pc-body{padding: 10px;}
  .prod-grid{gap: 10px;}
  .pagination{margin-top: 20px;}
  .pf-btn{font-size: 14px;padding: 5px 14px;}
  .prod-filter{gap: 5px;margin-bottom: 14px;}
  .prod-card .pc-series{font-size: 12px;letter-spacing: 0px;font-weight: normal;border-radius: 5px;line-height: 20px;}
  .prod-card .pc-desc{font-size: 14px;}
  .prod-card .pc-link{font-size: 14px;}
  .split-media .split-swiper .swiper-button-prev, .split-media .split-swiper .swiper-button-next{width: 36px;height: 36px;}
  .split-media .split-swiper .swiper-button-prev::after, .split-media .split-swiper .swiper-button-next::after{font-size: 14px;}
  .app-card{padding: 20px;gap: 5px;}
  .app-card .ac-title{font-size: 16px;}
  .app-card .ac-desc{font-size: 14px;line-height: 24px;}
  .app-grid{gap: 10px;}
  .article .art-meta{font-size: 14px;gap: 10px;}
  .article h2{font-size: 20px!important;}
  .article .art-body p{font-size: 14px;}
  .article .art-body h3{font-size: 16px;}
  .info-title{font-size: 16px;}
  .contact-grid .cg-form{padding: 20px;}
  .contact-grid{gap: 20px;}
  .company-block{margin-top: 20px;gap: 20px;}
  .co-card{padding: 20px;gap: 10px;}
  .co-card .co-name{font-size: 18px;}
  .company-cards{gap: 10px;}
}

@media (max-width: 768px) {
  .split-media .split-swiper .swiper-button-prev { left: 8px; }
  .split-media .split-swiper .swiper-button-next { right: 8px; }
  .brand-col{display: none;}
  .footer-top{padding: 30px 0 20px;}
  .footer-col.contact{width: 100%;}
  .footer-col h4{font-size: 18px;}
  .footer-col a, .footer-col span{font-size: 14px;}
  .footer-bottom .copyright{font-size: 14px;}
  .news-card .nc-title{font-size: 16px;}
  .news-card .nc-excerpt{font-size: 14px;line-height: 24px;}
  .news-card .nc-more{font-size: 14px;}
}

/* ---- Search overlay: confirm button ---- */
.search-go {
  flex-shrink: 0; margin-left: 14px; height: 40px; padding: 0 20px;
  border: none; border-radius: 8px; cursor: pointer;
  background: var(--brand); color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 500; letter-spacing: .02em;
  transition: all .15s ease;
  margin-right: 10px;
}
.search-go:hover { background: #0773c2; }
@media (max-width: 768px) {
  .search-go { height: 42px; padding: 0 20px; font-size: 16px; margin-left: 10px; }
}

/* ---- Language switch (inside mobile drawer nav, two pill buttons) ---- */
.lang-drawer { display: none; }
@media (max-width: 1199px) {
  .lang-drawer { display: flex; padding: 20px 20px; border-top: 1px solid var(--line); }
  .lang-drawer .lang-btn {
    display: inline-block; width: 49%; margin-right: 2%;
    font-size: 16.8px; line-height: 42px; text-align: center;
    color: var(--ink); background: var(--white);
    border: 1px solid var(--line); border-radius: 6px;
    transition: all .15s ease;
  }
  .lang-drawer .lang-btn:nth-child(2n) { margin-right: 0; }
  .lang-drawer .lang-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
}