:root {
  --green-950: #102f2d;
  --green-900: #164743;
  --green-800: #1d5b55;
  --green-700: #287068;
  --wheat: #c9963b;
  --wheat-light: #f0d7a5;
  --ink: #202727;
  --muted: #697170;
  --line: #dfe5e2;
  --surface: #f4f6f5;
  --white: #ffffff;
  --shadow: 0 14px 36px rgba(25, 47, 43, 0.11);
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
body.menu-open, body.search-open { overflow: hidden; }
[data-setting="contact_phone"] { visibility: hidden; }
html.settings-ready [data-setting="contact_phone"] { visibility: visible; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { color: inherit; }
.container-wide { width: 80%; max-width: none; margin-inline: auto; }

.section { padding: 92px 0; }
.section-muted { background: var(--surface); }
.section-dark { background: var(--green-900); color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.icon-button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.icon-button svg, .contact-icon svg, .footer-contact svg, .mobile-phone svg, .back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button {
  display: inline-flex;
  min-height: 46px;
  padding: 0 25px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--green-800); }
.button-primary:hover { background: var(--green-950); }
.button-light { color: var(--green-950); background: var(--white); }
.button-outline { color: var(--green-800); border-color: var(--green-700); background: transparent; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green-800); font-weight: 700; }
.text-link::after { content: "›"; font-size: 22px; line-height: 1; transition: transform .2s ease; }
.text-link:hover::after { transform: translateX(4px); }

.site-header { position: relative; z-index: 100; background: var(--white); box-shadow: 0 1px 0 rgba(17, 48, 45, .09); }
.header-top { display: flex; height: 82px; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-mark { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; background: var(--green-900); color: var(--white); position: relative; overflow: hidden; }
.brand-mark::after { content: ""; position: absolute; width: 9px; height: 58px; right: 7px; top: -5px; background: var(--wheat); transform: rotate(24deg); }
.brand-mark span { position: relative; z-index: 1; font-family: Georgia, serif; font-size: 17px; font-weight: 700; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { color: #111; font-size: 28px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.brand-copy small { color: var(--muted); font-family: Georgia, serif; font-size: 10px; line-height: 1.4; }
.header-contact { display: flex; align-items: center; gap: 11px; }
.header-contact .contact-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--white); background: var(--green-950); }
.header-contact span:last-child { display: flex; flex-direction: column; }
.header-contact small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.header-contact a { color: var(--green-950); font-family: Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.4; }
.nav-row { border-top: 1px solid #edf0ee; }
.nav-shell { display: flex; height: 60px; align-items: stretch; justify-content: space-between; }
.main-nav { display: flex; height: 100%; align-items: stretch; }
.nav-link { position: relative; display: flex; padding: 0 26px; align-items: center; color: #3c4544; font-size: 18px; font-weight: 400; }
.nav-link:first-child { padding-left: 8px; padding-right: 30px; }
.nav-link::after { content: ""; position: absolute; height: 3px; left: 26px; right: 26px; bottom: 0; background: var(--green-700); transform: scaleX(0); transition: transform .2s ease; }
.nav-link:first-child::after { left: 8px; right: 30px; }
.nav-link:hover { color: var(--green-800); }
.nav-link.is-active { color: var(--green-800); font-size: 20px; font-weight: 800; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.header-tools { display: flex; align-items: center; gap: 4px; }
.header-tools .icon-button { color: var(--green-950); }
.language-link { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--green-950); font-family: Georgia, serif; font-size: 12px; font-weight: 700; }
html[lang="en-US"] .brand-copy strong { max-width: 520px; white-space: normal; font-size: 21px; font-weight: 800; line-height: 1.2; }
html[lang="en-US"] .nav-link { padding-right: 20px; padding-left: 20px; }
html[lang="en-US"] .nav-link:first-child { padding-left: 8px; padding-right: 24px; }
html[lang="en-US"] .nav-link::after { left: 20px; right: 20px; }
html[lang="en-US"] .advantage-copy { min-height: 194px; }
.mobile-menu-toggle { display: none; }
.mobile-nav, .nav-backdrop { display: none; }
.search-panel { position: fixed; z-index: 120; inset: 0; display: grid; place-items: start center; padding-top: 150px; background: rgba(12, 32, 30, .94); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.search-open .search-panel { opacity: 1; visibility: visible; }
.search-form { display: grid; width: min(720px, calc(100% - 40px)); grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.search-form input { height: 54px; padding: 0 18px; border: 0; background: var(--white); outline: 0; }
.search-form .button { min-height: 54px; background: var(--wheat); color: var(--green-950); }
.search-form .icon-button { color: var(--white); }

.home-hero {
  height: calc(100vh - 190px);
  min-height: 480px;
  max-height: 680px;
  background: #8f6b35 url("../hero.jpg") center center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 35, 31, .9) 0%, rgba(7, 35, 31, .82) 48%, rgba(7, 35, 31, .52) 68%, rgba(7, 35, 31, .08) 100%);
  pointer-events: none;
}
.home-hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(21, 39, 31, .08); pointer-events: none; }
.hero-backgrounds { position: absolute; z-index: 0; inset: 0; }
.hero-background { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; transition: opacity .7s ease; }
.hero-background.is-active { opacity: 1; }
.hero-content { position: absolute; z-index: 2; left: 8%; top: 27%; width: 41%; color: var(--white); transition: opacity .25s ease, transform .25s ease; }
.home-hero.is-switching .hero-content { opacity: 0; transform: translateY(10px); }
.hero-eyebrow { display: inline-flex; min-height: 34px; padding: 5px 13px; align-items: center; border: 1px solid rgba(255, 255, 255, .25); background: rgba(12, 47, 43, .72); font-size: 13px; font-weight: 700; }
.hero-content h1 { max-width: 900px; margin: 16px 0 0; overflow-wrap: anywhere; font-size: 46px; line-height: 1.18; text-shadow: 0 2px 14px rgba(0, 0, 0, .32); }
.hero-content p { max-width: 680px; margin: 14px 0 0; color: rgba(255, 255, 255, .86); font-size: 17px; }
.hero-link { margin-top: 26px; background: var(--wheat); color: var(--green-950); }
.hero-link:hover, .hero-link:focus-visible { background: var(--green-950); color: var(--white); }
.hero-product { position: absolute; z-index: 2; left: 56%; top: 21%; width: 36%; pointer-events: none; }
.hero-product img { width: 100%; max-height: 460px; object-fit: contain; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .24)); }
.hero-content [hidden], .hero-product[hidden] { display: none; }
.hero-controls { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.hero-controls[hidden] { display: none; }
.hero-arrow { position: absolute; top: 50%; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, .44); border-radius: 50%; background: rgba(8, 38, 34, .58); color: var(--white); cursor: pointer; pointer-events: auto; transform: translateY(-50%); transition: background-color .2s ease, border-color .2s ease; }
.hero-arrow:hover, .hero-arrow:focus-visible { border-color: var(--wheat-light); background: var(--green-800); outline: none; }
.hero-arrow span { font-family: Georgia, serif; font-size: 34px; line-height: 1; transform: translateY(-2px); }
.hero-arrow-prev { left: 22px; }
.hero-arrow-next { right: 22px; }
.hero-dots { position: absolute; left: 50%; bottom: 20px; display: flex; min-height: 20px; align-items: center; gap: 8px; pointer-events: auto; transform: translateX(-50%); }
.hero-dot { width: 28px; height: 4px; padding: 0; border: 0; background: rgba(255, 255, 255, .48); cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.hero-dot.is-active { width: 44px; background: var(--wheat-light); }
.hero-dot:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.section-heading { margin: 0 auto 48px; text-align: center; }
.section-heading .eyebrow { display: block; margin-bottom: 7px; color: var(--green-800); font-family: Georgia, serif; font-size: 16px; font-weight: 700; text-transform: uppercase; }
.section-heading h1, .section-heading h2 { margin: 0; color: var(--green-950); font-size: 34px; line-height: 1.35; }
.section-heading p { max-width: 640px; margin: 12px auto 0; color: var(--muted); }
.section-dark .section-heading .eyebrow { color: var(--wheat-light); }
.section-dark .section-heading h2 { color: var(--white); }
.section-dark .section-heading p { color: rgba(255, 255, 255, .72); }

.advantage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.advantage-card { position: relative; overflow: hidden; background: var(--white); border-bottom: 3px solid var(--green-700); box-shadow: 0 8px 28px rgba(23, 58, 53, .07); }
.advantage-card[data-reveal] { transition: opacity .55s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.advantage-card::after { content: ""; position: absolute; height: 3px; left: 0; right: 0; bottom: 0; background: var(--wheat); transform: scaleX(0); transform-origin: center; transition: transform .3s ease; }
.advantage-card img { width: 100%; aspect-ratio: 1.64 / 1; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.advantage-copy { min-height: 174px; padding: 26px 22px 24px; text-align: center; transition: background-color .3s ease; }
.advantage-index { display: inline-grid; width: 36px; height: 36px; margin-bottom: 10px; place-items: center; color: var(--green-700); border: 1px solid var(--green-700); font-family: Georgia, serif; font-size: 13px; transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .3s ease; }
.advantage-copy h3 { margin: 0 0 5px; color: var(--green-900); font-size: 17px; transition: color .25s ease, transform .3s ease; }
.advantage-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

@media (hover: hover) and (pointer: fine) {
  .advantage-grid .advantage-card:hover { border-color: var(--wheat); box-shadow: 0 22px 46px rgba(20, 64, 58, .18); transform: translateY(-10px); }
  .advantage-card:hover::after { transform: scaleX(1); }
  .advantage-card:hover img { filter: saturate(1.08) contrast(1.03); transform: scale(1.055); }
  .advantage-card:hover .advantage-copy { background: #fbfcfc; }
  .advantage-card:hover .advantage-index { color: var(--white); border-color: var(--green-700); background: var(--green-700); transform: translateY(-3px); }
  .advantage-card:hover .advantage-copy h3 { color: var(--green-700); transform: translateY(-2px); }
}

.filter-tabs { display: flex; margin: 0 auto 45px; justify-content: center; flex-wrap: wrap; gap: 12px; }
.filter-button { min-width: 132px; height: 44px; padding: 0 20px; border: 1px solid var(--green-700); background: var(--white); color: var(--green-800); cursor: pointer; font-weight: 700; }
.filter-button:hover, .filter-button.is-active { color: var(--white); background: var(--green-800); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.product-card { position: relative; overflow: hidden; background: var(--white); border: 1px solid #e9ecea; transition: transform .22s ease, box-shadow .22s ease; }
.product-card[hidden] { display: none; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-image { display: block; aspect-ratio: 1.3 / 1; overflow: hidden; background: #fff; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-image img { transform: scale(1.035); }
.product-info { min-height: 112px; padding: 20px 22px; border-top: 4px solid var(--green-700); }
.product-info small { color: var(--wheat); font-size: 12px; font-weight: 700; }
.product-info h3 { margin: 2px 0 0; color: var(--green-950); font-size: 18px; }
.product-arrow { position: absolute; right: 18px; bottom: 22px; color: var(--green-700); font-size: 22px; }
.section-action { margin-top: 38px; text-align: center; }

.about-home-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 70px; align-items: center; }
.about-home-copy .section-heading { margin: 0 0 28px; text-align: left; }
.about-home-copy p { margin: 0 0 18px; color: rgba(255, 255, 255, .78); }
.about-home-copy .button { margin-top: 12px; }
.factory-frame { position: relative; padding: 14px 0 0 14px; }
.factory-frame::before { content: ""; position: absolute; left: 0; top: 0; width: 58%; height: 54%; border-left: 2px solid var(--wheat-light); border-top: 2px solid var(--wheat-light); }
.factory-frame img { position: relative; width: 100%; aspect-ratio: 1.45 / 1; object-fit: cover; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-top: 1px solid rgba(255, 255, 255, .2); }
.about-stat { padding: 20px 10px 0 0; }
.about-stat strong { display: block; color: var(--wheat-light); font-family: Georgia, serif; font-size: 30px; line-height: 1.2; }
.about-stat span { color: rgba(255, 255, 255, .68); font-size: 13px; }

.news-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.news-row { display: grid; min-height: 118px; grid-template-columns: 90px 1fr; align-items: center; border: 1px solid #e8ece9; background: var(--white); transition: border-color .2s ease, background-color .2s ease; }
.news-row:hover, .news-row.featured { background: var(--green-800); border-color: var(--green-800); color: var(--white); }
.news-date { padding: 0 16px; text-align: center; border-right: 1px solid #e5e9e7; }
.news-date strong { display: block; font-family: Georgia, serif; font-size: 28px; line-height: 1.2; }
.news-date small { color: var(--muted); font-size: 12px; }
.news-row:hover .news-date small, .news-row.featured .news-date small { color: rgba(255, 255, 255, .7); }
.news-summary { min-width: 0; padding: 16px 20px; }
.news-summary h3 { margin: 0 0 4px; overflow: hidden; font-size: 15px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.news-summary p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-row:hover .news-summary p, .news-row.featured .news-summary p { color: rgba(255, 255, 255, .74); }

.page-hero { position: relative; min-height: 300px; display: grid; place-items: center; color: var(--white); background: var(--green-950) url("../inner-banner.jpg") center / cover no-repeat; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: rgba(11, 52, 47, .76); }
.page-hero-content { position: relative; z-index: 1; text-align: center; }
.page-hero h1 { margin: 0; font-size: 40px; line-height: 1.3; }
.breadcrumb { display: flex; margin-top: 12px; justify-content: center; gap: 9px; color: rgba(255, 255, 255, .72); font-size: 14px; }
.breadcrumb a:hover { color: var(--white); }

.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.content-heading { margin-bottom: 26px; }
.content-heading .eyebrow { color: var(--wheat); font-family: Georgia, serif; font-size: 14px; font-weight: 700; }
.content-heading h2 { margin: 5px 0 0; color: var(--green-950); font-size: 31px; line-height: 1.45; }
.prose p { margin: 0 0 16px; color: #535d5b; }
.number-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 74px; padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.number-item { text-align: center; border-right: 1px solid var(--line); }
.number-item:last-child { border-right: 0; }
.number-item strong { display: block; color: var(--green-800); font-family: Georgia, serif; font-size: 36px; line-height: 1.25; }
.number-item span { color: var(--muted); font-size: 14px; }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: process; }
.process-item { position: relative; min-height: 210px; padding: 28px; border: 1px solid rgba(255, 255, 255, .2); border-right: 0; counter-increment: process; }
.process-item:last-child { border-right: 1px solid rgba(255, 255, 255, .2); }
.process-item::before { content: "0" counter(process); display: block; margin-bottom: 32px; color: var(--wheat-light); font-family: Georgia, serif; font-size: 28px; }
.process-item h3 { margin: 0 0 8px; font-size: 18px; }
.process-item p { margin: 0; color: rgba(255, 255, 255, .68); font-size: 14px; }

.catalog-toolbar { display: grid; grid-template-columns: 1fr 290px; gap: 28px; align-items: start; margin-bottom: 38px; }
.catalog-taxonomy { min-width: 0; }
.catalog-toolbar .filter-tabs { margin: 0; justify-content: flex-start; }
.catalog-subcategories { display: flex; min-height: 54px; margin-top: 14px; padding: 9px 12px; align-items: center; flex-wrap: wrap; gap: 8px; border-left: 3px solid var(--wheat); background: #f3f6f5; }
.catalog-subcategories[hidden] { display: none; }
.subcategory-button { min-width: 96px; height: 36px; padding: 0 16px; border: 1px solid transparent; background: transparent; color: #53615e; cursor: pointer; font-weight: 700; }
.subcategory-button:hover { border-color: #cad5d1; background: var(--white); color: var(--green-800); }
.subcategory-button.is-active { border-color: var(--green-700); background: var(--white); color: var(--green-800); box-shadow: inset 0 -2px 0 var(--green-700); }
.catalog-search { position: relative; }
.catalog-search input { width: 100%; height: 44px; padding: 0 44px 0 14px; border: 1px solid var(--line); outline: 0; }
.catalog-search input:focus { border-color: var(--green-700); }
.catalog-search svg { position: absolute; width: 18px; height: 18px; right: 14px; top: 13px; fill: none; stroke: var(--green-700); stroke-width: 2; }
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-grid .product-info { min-height: 124px; }
.catalog-empty { grid-column: 1 / -1; margin: 0; padding: 52px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); text-align: center; }
.catalog-loading { min-height: 180px; }
.catalog-error { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.catalog-retry { min-height: 38px; padding: 0 16px; border: 1px solid var(--green-800); background: var(--white); color: var(--green-800); cursor: pointer; font-weight: 700; }
.catalog-retry:hover { background: var(--green-800); color: var(--white); }
.catalog-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.catalog-pagination[hidden] { display: none; }
.pagination-button { min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line); background: var(--white); color: var(--green-800); cursor: pointer; font-weight: 700; }
.pagination-button:hover, .pagination-button.is-active { border-color: var(--green-800); background: var(--green-800); color: var(--white); }
.pagination-ellipsis { color: var(--muted); }
.catalog-note { margin-top: 48px; padding: 28px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--green-900); color: var(--white); }
.catalog-note h2 { margin: 0 0 4px; font-size: 20px; }
.catalog-note p { margin: 0; color: rgba(255, 255, 255, .7); }

/* Each API-backed product surface becomes visible as soon as its own request completes. */
html:not(.api-ready) [data-product-detail-section],
html:not(.api-ready) [data-product-description-section] { visibility: hidden; }
html:not(.i18n-ready) body { visibility: hidden; }

.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: start; }
.product-media { min-width: 0; }
.product-media-stage { position: relative; width: 100%; aspect-ratio: 1.15 / 1; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.gallery-main { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-main[hidden] { display: none; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.gallery-thumbs.has-video { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery-thumb { position: relative; min-width: 0; padding: 0; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.gallery-thumb:hover { border-color: var(--green-700); }
.gallery-thumb.is-active { border: 2px solid var(--green-700); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-video-thumb::after { position: absolute; inset: 0; content: ""; background: rgba(7, 35, 31, .48); }
.gallery-video-play { position: absolute; z-index: 1; width: 34px; height: 34px; left: 50%; top: 50%; border: 2px solid var(--white); border-radius: 50%; transform: translate(-50%, -62%); }
.gallery-video-play::after { position: absolute; left: 12px; top: 8px; width: 0; height: 0; content: ""; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--white); }
.gallery-video-label { position: absolute; z-index: 1; right: 4px; bottom: 4px; left: 4px; overflow: hidden; color: var(--white); font-size: 12px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.product-video-shell { width: 100%; height: 100%; overflow: hidden; background: #101313; }
.product-video-shell[hidden] { display: none; }
.product-video-shell video { display: block; width: 100%; height: 100%; object-fit: contain; background: #101313; }
.detail-kicker { color: var(--wheat); font-size: 14px; font-weight: 700; }
.detail-copy h1 { margin: 7px 0 12px; color: var(--green-950); font-size: 34px; line-height: 1.35; }
.detail-lead { margin: 0 0 25px; color: var(--muted); }
.detail-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.detail-points li { position: relative; padding: 12px 12px 12px 35px; background: var(--surface); font-size: 14px; }
.detail-points li::before { content: "✓"; position: absolute; left: 13px; color: var(--green-700); font-weight: 700; }
.detail-actions { display: flex; gap: 12px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 15px 18px; border: 1px solid var(--line); text-align: left; }
.spec-table th { width: 26%; background: var(--surface); color: var(--green-950); }

.news-list { display: grid; gap: 18px; }
.news-list-item { display: grid; grid-template-columns: 150px 260px 1fr; min-height: 190px; border: 1px solid var(--line); background: var(--white); transition: transform .2s ease, box-shadow .2s ease; }
.news-list-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.news-list-date { display: grid; padding: 26px; align-content: center; justify-items: center; color: var(--white); background: var(--green-800); }
.news-list-date strong { font-family: Georgia, serif; font-size: 42px; line-height: 1; }
.news-list-date span { margin-top: 8px; color: rgba(255,255,255,.7); font-size: 13px; }
.news-list-image { width: 100%; height: 100%; min-height: 188px; object-fit: cover; }
.news-list-copy { padding: 28px 34px; align-self: center; }
.news-list-copy small { color: var(--wheat); }
.news-list-copy h2 { margin: 4px 0 8px; color: var(--green-950); font-size: 20px; }
.news-list-copy p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.article { width: 80%; max-width: none; margin-inline: auto; }
.article-header { margin-bottom: 40px; padding-bottom: 26px; text-align: center; border-bottom: 1px solid var(--line); }
.article-header h1 { margin: 0 0 12px; color: var(--green-950); font-size: 34px; line-height: 1.45; }
.article-meta { display: flex; justify-content: center; gap: 22px; color: var(--muted); font-size: 13px; }
.article-body { color: #4f5957; }
.article-body p { margin: 0 0 20px; }
.article-body img { width: 100%; margin: 30px 0; }
.article-nav { display: flex; margin-top: 46px; padding-top: 24px; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); font-size: 14px; }

.contact-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; }
.contact-details { display: grid; gap: 0; margin-top: 28px; }
.contact-detail { display: grid; grid-template-columns: 48px 1fr; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-detail svg { width: 22px; height: 22px; margin-top: 3px; fill: none; stroke: var(--green-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-detail strong { display: block; color: var(--green-950); font-size: 14px; }
.contact-detail span, .contact-detail a { color: var(--muted); }
.inquiry-form { padding: 38px; background: var(--surface); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.form-field { display: grid; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: var(--green-950); font-size: 14px; font-weight: 700; }
.form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid #d6dcda; background: var(--white); outline: 0; }
.form-field input, .form-field select { height: 48px; padding: 0 14px; }
.form-field textarea { min-height: 130px; padding: 12px 14px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--green-700); }
.captcha-field { grid-column: 1 / -1; max-width: 430px; }
.captcha-control { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; align-items: stretch; }
.captcha-refresh { width: 132px; height: 48px; padding: 0; border: 1px solid #d6dcda; background: var(--white); cursor: pointer; }
.captcha-refresh:hover { border-color: var(--green-700); }
.captcha-refresh img { display: block; width: 132px; height: 46px; object-fit: cover; }
.captcha-refresh img[hidden] { display: none; }
.captcha-refresh img.is-loading { opacity: .45; }
.form-actions { display: flex; margin-top: 22px; align-items: center; gap: 18px; }
.form-status { margin: 0; color: var(--green-800); font-size: 14px; }
.inquiry-form button:disabled { cursor: wait; opacity: .65; transform: none; }
.network-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.network-map { position: relative; min-height: 420px; background: #dfe7e2; overflow: hidden; }
.network-map::before, .network-map::after { content: ""; position: absolute; inset: 0; }
.network-map::before { inset: 42px 8%; border: 2px solid #c2d1c9; transform: rotate(-7deg); box-shadow: 58px 36px 0 -1px #dfe7e2, 58px 36px 0 1px #c2d1c9, -46px 86px 0 -1px #dfe7e2, -46px 86px 0 1px #c2d1c9; }
.network-map::after { inset: 84px 20%; border: 2px solid rgba(31, 94, 84, .18); transform: rotate(12deg); }
.network-map-image { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.network-map.has-configured-image::before, .network-map.has-configured-image::after, .network-map.has-configured-image .map-pin { display: none; }
.map-pin { position: absolute; z-index: 2; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--white); background: var(--green-800); box-shadow: 0 0 0 7px rgba(36, 108, 97, .14); }
.map-pin.primary { width: 38px; height: 38px; left: 60%; top: 48%; background: var(--wheat); }
.map-pin.p1 { left: 36%; top: 33%; }.map-pin.p2 { left: 70%; top: 28%; }.map-pin.p3 { left: 43%; top: 67%; }.map-pin.p4 { left: 78%; top: 70%; }
.network-copy ul { margin: 22px 0 0; padding: 0; list-style: none; }
.network-copy li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.network-copy li strong { display: inline-block; min-width: 92px; color: var(--green-950); }

.friend-links-section { border-top: 1px solid var(--line); background: var(--white); }
.friend-links-inner { display: grid; min-height: 90px; padding-top: 20px; padding-bottom: 20px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 30px; }
.friend-links-title { margin: 0; padding-right: 30px; border-right: 1px solid var(--line); color: var(--green-950); font-size: 18px; line-height: 1.5; white-space: nowrap; }
.friend-links-list { display: flex; min-width: 0; flex-wrap: wrap; gap: 10px 28px; }
.friend-links-list a { color: var(--muted); font-size: 14px; line-height: 1.7; transition: color .2s ease; }
.friend-links-list a:hover, .friend-links-list a:focus-visible { color: var(--green-700); outline: none; }
.friend-links-empty { color: var(--muted); font-size: 14px; }

.site-footer { color: rgba(255, 255, 255, .72); background: #242727; }
.footer-main { display: grid; grid-template-columns: 1.5fr .7fr .8fr 1.2fr; gap: 65px; padding-top: 68px; padding-bottom: 62px; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.footer-brand .brand-mark { flex-basis: 42px; width: 42px; height: 42px; }
.footer-brand strong { font-size: 17px; }
.footer-about p { max-width: 380px; margin: 22px 0 0; font-size: 13px; line-height: 2; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-column h2 { position: relative; margin: 0 0 13px; padding-bottom: 12px; color: var(--white); font-size: 16px; }
.footer-column h2::after { content: ""; position: absolute; width: 40px; height: 2px; left: 0; bottom: 0; background: var(--wheat); }
.footer-column a, .footer-column > span { font-size: 13px; }
.footer-category-links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-category-links a, .footer-category-links > span { font-size: 13px; }
.footer-column a:hover { color: var(--white); }
.footer-contact a, .footer-contact > span { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.footer-contact svg { width: 16px; height: 16px; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); background: #1d1f1f; }
.footer-bottom .container-wide { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
.back-to-top { position: fixed; z-index: 90; width: 42px; height: 42px; right: 24px; bottom: 24px; display: grid; place-items: center; border: 0; color: var(--white); background: var(--green-700); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; cursor: pointer; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .container-wide { width: 80%; max-width: none; }
  .nav-link { padding-inline: 16px; font-size: 16px; }
  .nav-link.is-active { font-size: 17px; }
  .nav-link::after { left: 16px; right: 16px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advantage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: 1.3fr .7fr .8fr; gap: 42px; }
  .footer-contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-contact h2 { grid-column: 1 / -1; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .container-wide { width: calc(100% - 32px); }
  .section { padding: 68px 0; }
  .header-top { height: 68px; }
  .brand-mark { flex-basis: 40px; width: 40px; height: 40px; }
  .brand-copy strong { font-size: 17px; }
  html[lang="en-US"] .brand-copy strong { max-width: 360px; font-size: 16px; line-height: 1.15; }
  .brand-copy small { display: none; }
  .header-contact, .nav-row { display: none; }
  .mobile-menu-toggle { display: inline-grid; }
  .mobile-nav { position: fixed; z-index: 130; display: block; width: min(360px, 88vw); inset: 0 0 0 auto; padding: 0 24px 28px; background: var(--white); transform: translateX(100%); transition: transform .25s ease; }
  .menu-open .mobile-nav { transform: translateX(0); }
  .mobile-nav-head { display: flex; height: 68px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--green-950); font-weight: 700; }
  .mobile-nav nav { display: grid; padding-top: 12px; }
  .mobile-nav .nav-link { min-height: 52px; padding: 0; border-bottom: 1px solid var(--line); }
  .mobile-nav .nav-link::after { display: none; }
  .mobile-phone { display: flex; margin-top: 26px; align-items: center; gap: 12px; color: var(--green-800); font-weight: 700; }
  .nav-backdrop { position: fixed; z-index: 125; inset: 0; display: block; background: rgba(12, 27, 25, .58); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
  .menu-open .nav-backdrop { opacity: 1; visibility: visible; }
  .home-hero {
    --hero-mobile-media-height: clamp(168px, 43.75vw, 280px);
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: var(--hero-mobile-media-height);
    background: var(--green-950);
  }
  .hero-backgrounds {
    bottom: auto;
    height: var(--hero-mobile-media-height);
    background: #8f6b35 url("../hero-mobile.jpg") center / cover no-repeat;
  }
  .hero-background { background-position: center 50%; background-repeat: no-repeat; }
  .hero-background:nth-child(2) { background-position: 52% 56%; }
  .hero-background:nth-child(3) { background-position: 68% 54%; }
  .home-hero::before {
    bottom: auto;
    height: var(--hero-mobile-media-height);
    background: linear-gradient(180deg, rgba(7, 35, 31, .02) 54%, rgba(7, 35, 31, .34) 100%);
  }
  .home-hero::after { bottom: auto; height: var(--hero-mobile-media-height); }
  .hero-content {
    position: relative;
    left: auto !important;
    right: auto;
    top: auto !important;
    bottom: auto;
    width: auto !important;
    min-height: 270px;
    padding: 24px 48px 58px;
    background: linear-gradient(135deg, var(--green-950), #124b45);
  }
  .hero-eyebrow { min-height: 28px; padding: 3px 9px; font-size: 11px; }
  .hero-content h1 { margin-top: 10px; font-size: 27px; line-height: 1.3; }
  .hero-content p { margin-top: 6px; font-size: 13px; }
  .hero-link { min-height: 40px; margin-top: 16px; padding: 9px 18px; font-size: 13px; }
  .hero-product { display: none; }
  .hero-arrow { top: calc(var(--hero-mobile-media-height) / 2); width: 36px; height: 36px; }
  .hero-arrow-prev { left: 8px; }
  .hero-arrow-next { right: 8px; }
  .hero-arrow span { font-size: 28px; }
  .hero-dots { bottom: 18px; }
  .about-home-grid, .intro-grid, .product-detail-grid, .contact-layout, .network-grid { grid-template-columns: 1fr; gap: 42px; }
  .news-home-grid { grid-template-columns: 1fr; }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-item:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, .2); }
  .number-strip { grid-template-columns: repeat(2, 1fr); }
  .number-item { padding: 22px 10px; border-bottom: 1px solid var(--line); }
  .number-item:nth-child(2) { border-right: 0; }
  .number-item:nth-child(3), .number-item:nth-child(4) { border-bottom: 0; }
  .news-list-item { grid-template-columns: 110px 1fr; }
  .news-list-image { display: none; }
  .article { width: calc(100% - 32px); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .container-wide { width: calc(100% - 28px); }
  .section { padding: 56px 0; }
  .brand-copy strong { font-size: 15px; }
  html[lang="en-US"] .brand-copy strong { max-width: 220px; font-size: 13px; line-height: 1.15; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h1, .section-heading h2 { font-size: 28px; }
  .section-heading .eyebrow { font-size: 14px; }
  .home-hero { --hero-mobile-media-height: clamp(158px, 46vw, 210px); }
  .hero-content { min-height: 252px; padding: 22px 34px 56px; }
  .advantage-grid { grid-template-columns: 1fr; }
  .advantage-copy { min-height: 150px; }
  .filter-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filter-button { width: 100%; min-width: 0; padding: 0 8px; }
  .catalog-subcategories { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .subcategory-button { width: 100%; min-width: 0; padding: 0 8px; }
  .product-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-info, .catalog-grid .product-info { min-height: 96px; padding: 13px 12px; border-top-width: 3px; }
  .product-info h3 { font-size: 15px; }
  .product-arrow { display: none; }
  .about-stats { gap: 0; }
  .about-stat strong { font-size: 25px; }
  .news-row { grid-template-columns: 72px 1fr; }
  .news-date { padding: 0 8px; }
  .news-date strong { font-size: 24px; }
  .news-summary { padding: 14px; }
  .page-hero { min-height: 230px; }
  .page-hero h1 { font-size: 32px; }
  .content-heading h2 { font-size: 27px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-item { min-height: 170px; border-right: 1px solid rgba(255, 255, 255, .2); border-bottom: 0; }
  .process-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .catalog-note { align-items: flex-start; flex-direction: column; }
  .gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-thumbs.has-video { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .gallery-video-play { width: 28px; height: 28px; }
  .gallery-video-play::after { left: 10px; top: 6px; }
  .gallery-video-label { font-size: 10px; }
  .detail-copy h1 { font-size: 28px; }
  .detail-points { grid-template-columns: 1fr; }
  .detail-actions { flex-direction: column; }
  .spec-table th, .spec-table td { padding: 12px 10px; font-size: 13px; }
  .news-list-item { grid-template-columns: 78px 1fr; min-height: 170px; }
  .news-list-date { padding: 15px 8px; }
  .news-list-date strong { font-size: 32px; }
  .news-list-copy { padding: 19px; }
  .news-list-copy h2 { font-size: 17px; line-height: 1.5; }
  .news-list-copy p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .article-header h1 { font-size: 27px; }
  .article-meta { flex-wrap: wrap; gap: 6px 14px; }
  .article-nav { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .inquiry-form { padding: 26px 20px; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .network-map { min-height: 320px; }
  .friend-links-inner { min-height: 0; padding-top: 22px; padding-bottom: 24px; grid-template-columns: 1fr; gap: 14px; }
  .friend-links-title { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .friend-links-list { gap: 8px 20px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 38px 22px; padding-top: 52px; padding-bottom: 48px; }
  .footer-about, .footer-contact { grid-column: 1 / -1; }
  .footer-contact { display: flex; }
  .footer-bottom .container-wide { padding: 14px 0; align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; }
  .search-form { grid-template-columns: 1fr auto; }
  .search-form .button { grid-column: 1 / -1; grid-row: 2; }
  .search-form > .icon-button { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}