/* ===================================================
   Hong Kong Origins Investment Limited
   Main Stylesheet — English Version
=================================================== */

:root {
  --content-width: 75vw;
  /* legacy alias kept for existing var() references */
  --bs-screen-xxl: 75vw;
}

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

html {
  font-size: 16px;
  color: #000;
}

body {
  font-family: Arial, sans-serif;
  overflow-x: hidden;
  background-color: #F7F4EF;
}

li { list-style: none; }
a  { text-decoration: none; }
img { width: 100%; height: 100%; display: block; }

/* ============================================
   BACKGROUND
============================================ */
.background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 36vw;
  background-color: #F7F4EF;
  z-index: 0;
  pointer-events: none;
}

.background-left {
  width: 36vw;
  height: 36vw;
  background: #12371D;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ============================================
   HEADER
============================================ */
.header {
  position: relative;
  width: 100%; height: 5.15vw;
  font-size: 0.83vw;
  z-index: 200;
}

.header-all {
  width: var(--bs-screen-xxl);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  height: 2.83vw;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Logo placeholder — shown when no logo image is provided */
/* Logo image styles */
.header-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.header-logo-img {
  height: 2.5vw;
  max-height: 52px;
  min-height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-logo-img {
  height: 2.2vw;
  max-height: 46px;
  min-height: 28px;
  width: auto;
  object-fit: contain;
  margin-bottom: 0.8vw;
  display: block;
}

/* Keep placeholder style for fallback / other uses */
.header-logo-placeholder {
  width: 7.5vw;
  height: 2.5vw;
  border: 2px dashed #bfcfe8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-size: 0.62vw;
  color: #aab8cc;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0;
}

.header-menus {
  display: flex;
  align-items: center;
  margin: 0 1.58vw;
  height: 100%;
  font-family: Arial;
  font-weight: 700;
  gap: 0;
}

.header-menus li {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 0.75vw;
}

.header-menus > li > a,
.header-menus > li > .header-menu > a {
  color: #12371D;
  font-size: 0.73vw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-menus > li:hover > a,
.header-menus > li:hover > .header-menu > a {
  color: #B6843A;
}

.header-menus li:hover .header-menus__second {
  display: block;
}

.header-menus__second {
  display: none;
  width: max-content;
  position: absolute;
  top: 5vw; left: 0;
  background: #EEF4EF;
  box-shadow: 0 0 0.83vw rgba(12, 0, 5, 0.2);
  padding: 0.42vw 0;
  border-top: 4px solid #12371D;
  z-index: 300;
}

.header-menus__second > li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 1.25vw;
  width: 100%;
  min-height: 2.2vw;
  height: auto;
}

.header-menus__second > li > a {
  font-weight: 400;
  font-size: 0.71vw;
  color: #2D2D2D;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-menus__second > li:hover > a {
  color: #B6843A;
}

/* Search */
.header-search__all {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 0.83vw;
}

.header-search__all.open .header-search { display: flex; }

.header-search {
  display: none;
  border: 1.5px solid #ddd;
  width: 18vw; height: 2.92vw;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(18,55,29,.13);
  border-radius: 8px;
  padding: 4px 1.25vw;
  z-index: 300;
}

.header-search input {
  border: none; outline: none;
  background: transparent;
  color: #666; width: calc(100% - 1.25vw);
  font-size: 0.71vw; font-family: Arial;
}

.search-icon {
  color: #12371D; cursor: pointer; font-size: 0.96vw;
}

#header-menu__expand {
  display: none;
  font-size: 1.5vw;
  color: #12371D;
  cursor: pointer;
  margin-right: 0.83vw;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
}

/* ============================================
   BANNER SWIPER
============================================ */
.mySwiper {
  overflow: hidden;
  width: var(--content-width);
  aspect-ratio: 93 / 34;
  margin: 1.8vw auto 0;
  border-radius: 0.62vw;
}

.swiper-wrapper {
  position: relative; width: 100%; height: 100%;
}

.swiper-mySwiper {
  width: 100%; height: 100%;
  position: relative;
  background-image: url('../images/banner-1.webp');
  background-position: center;
  background-size: cover;
}

.swiper-mySwiper--2 {
  background-image: url('../images/banner-2.webp');
  background-position: center;
  background-size: cover;
}

/* White gradient mask on the right — improves text legibility */
.swiper-mySwiper::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 65%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.72) 30%,
    rgba(255, 255, 255, 0.92) 65%,
    rgba(255, 255, 255, 0.97) 100%
  );
  z-index: 1;
  border-radius: 0 0.62vw 0.62vw 0;
}

.swiper-content {
  position: relative;
  z-index: 2;
  margin-top: 4.17vw;
  margin-left: 50%;
  width: 48%;
  padding-right: 1.67vw;
}

.swiper-content__title {
  font-family: Arial;
  font-weight: 900;
  font-size: 2.17vw;
  color: #12371D;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 1vw;
}

.swiper-content__title em {
  font-style: normal;
  display: block;
  color: #12371D;
}

.swiper-content__p {
  margin-top: 0.58vw;
  width: 25.83vw;
}

.swiper-content__p p {
  font-family: Arial;
  font-weight: 400;
  font-size: 0.92vw;
  color: #2D2D2D;
  line-height: 1.38vw;
}

.swiper-content__button {
  margin-top: 1.17vw;
  width: 10vw; height: 2.92vw;
}

.swiper-content__button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  border: 2px solid #B6843A;
  font-family: Arial;
  font-weight: 700;
  font-size: 0.83vw;
  color: #B6843A;
  letter-spacing: 0.08em;
  transition: all 0.3s ease;
}

.swiper-content__button a:hover {
  background-color: #B6843A;
  color: #fff;
}

/* ============================================
   SECTION TITLE (content-titel)
============================================ */
.content-titel {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  padding: 7.67vw 0 0;
}

.content-titel__one {
  display: flex;
  justify-content: center;
}

.content-titel__one__all {
  text-align: center;
}

.content-titel__one__all span {
  font-family: Arial;
  font-weight: 400;
  font-size: 1.04vw;
  color: #12371D;
  line-height: 2.5vw;
  letter-spacing: 0.06em;
}

.content-titel__one__all div {
  font-family: Arial;
  font-weight: 800;
  font-size: 2.17vw;
  color: #12371D;
  line-height: 2.67vw;
  letter-spacing: 0.02em;
}

/* ============================================
   COMPANY INTRO — SERVICE CARDS (content-one)
============================================ */
.content-one {
  width: 100%;
  background-color: #F7F4EF;
  padding: 1.67vw 0 2.5vw;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.content-one__list {
  width: var(--bs-screen-xxl);
  display: flex;
  justify-content: space-between;
  margin: 1.67vw auto 0;
  gap: 0.83vw;
}

.content-one__list__item {
  flex: 1;
  background: #FFFFFF;
  border-radius: 0.5vw;
  padding: 2vw 1.17vw;
  transition: all 0.3s ease;
  border: 1px solid #fff;
}

.content-one__list__item:hover {
  border-color: #B6843A;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}

.content-one__list__icon {
  width: 2.92vw; height: 2.92vw;
  display: flex; align-items: center; justify-content: center;
  background: #EEF4EF;
  border-radius: 0.42vw;
  font-size: 1.25vw;
  color: #B6843A;
  margin-bottom: 0.67vw;
}

.content-one__list__item p {
  margin-top: 5px;
  font-family: Arial;
  font-weight: 700;
  font-size: 0.83vw;
  color: #12371D;
  line-height: 1.83vw;
  letter-spacing: 0.04em;
}

.content-one__list__item span {
  display: block;
  margin-top: 3px;
  font-family: Arial;
  font-weight: 400;
  font-size: 0.71vw;
  color: #7A8C7D;
  line-height: 1.17vw;
}

.content-one__list__item a {
  margin-top: 1.17vw;
  display: block;
  font-family: Arial;
  font-weight: 400;
  font-size: 0.71vw;
  color: #B6843A;
  line-height: 1.83vw;
  transition: color 0.2s, transform 0.2s;
}

.content-one__list__item a:hover {
  transform: scale(1.08);
  color: #9B6D2E;
}

/* ============================================
   STATS COUNTERS (content-two)
============================================ */
.content-two {
  width: 100%;
  overflow: hidden;
  padding: 2.5vw 0;
  position: relative;
  z-index: 2;
}

.content-two-number {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.content-two-number > li {
  width: 15.62vw;
  text-align: center;
}

.content-two-number > li > .num-title {
  font-family: Arial;
  font-weight: 800;
  font-size: 3.5vw;
  color: #12371D;
  line-height: 3.5vw;
}

.content-two-number > li > p {
  margin-top: 0.67vw;
  font-family: Arial;
  font-weight: 400;
  font-size: 0.79vw;
  color: #12371D;
  line-height: 1.83vw;
  letter-spacing: 0.06em;
}

/* ============================================
   CORE ADVANTAGES (content-three)
============================================ */
.content-three {
  position: relative;
  width: 100%;
  height: 32.69vw;
  margin-top: 3.33vw;
  overflow: hidden;
}

.content-three__left {
  position: absolute;
  left: 0; top: 7.29vw;
  width: 54.84%;
  min-width: calc(54.84vw - 18.75vw);
  height: 25.73vw;
  background: #12371D;
  padding: 3.83vw 0;
  z-index: 2;
}

.content-three__left__all {
  position: absolute;
  right: 0;
  width: calc(54.84vw - 18.75vw);
}

.content-three__left__all > .section-head {
  width: 26.67vw;
  font-family: Arial;
  font-weight: 900;
  font-size: 1.38vw;
  color: #FFFFFF;
  line-height: 1.92vw;
  text-transform: uppercase;
}

.content-three__left__all > p {
  display: block;
  margin-top: 1.25vw;
  width: 33.33vw;
  font-family: Arial;
  font-weight: 400;
  font-size: 0.88vw;
  color: #EEF4EF;
  line-height: 1.42vw;
}

.content-three__left__list {
  display: flex;
  justify-content: space-between;
  width: 35vw;
  margin-top: 1.83vw;
}

.content-three__left__ul { width: 16.67vw; }

.content-three__left__ul > li {
  display: block;
  height: 1.58vw;
  width: 100%;
  font-family: Arial;
  font-weight: 400;
  font-size: 0.88vw;
  line-height: 1.58vw;
}

.content-three__left__ul > li > a {
  display: block;
  color: #FFFFFF;
  transition: all 0.3s ease;
}

.content-three__left__ul > li:hover > a { transform: translateX(6px); }

.content-three__right {
  position: absolute;
  top: 0; left: 48.02%;
  width: 33.28vw; height: 33.03vw;
  overflow: hidden;
  border-radius: 0.42vw;
}

.content-three__right img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ============================================
   PRODUCT CATEGORIES (product-section)
============================================ */

.product-section {
  width: 100%;
  background-color: #F7F4EF;
  padding: 0 0 3.33vw;
  position: relative;
  z-index: 2;
}

.product-list {
  width: var(--bs-screen-xxl);
  display: flex;
  justify-content: space-between;
  margin: 1.67vw auto 0;
  gap: 1.25vw;
}

.product-list__item {
  flex: 1;
  background: #FFFFFF;
  border-radius: 0.5vw;
  overflow: hidden;
  border: 1px solid #E5E5E5;
  transition: all 0.3s ease;
}

.product-list__item:hover {
  border-color: #B6843A;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  transform: translateY(-4px);
}

.product-list__img {
  width: 100%; height: 10.83vw;
  overflow: hidden;
}

.product-list__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-list__item:hover .product-list__img img { transform: scale(1.06); }

.product-list__body {
  padding: 1.33vw 1.17vw 1.67vw;
}

.product-list__body .cat {
  display: inline-block;
  font-size: 0.6vw;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #B6843A;
  background: #F7F2EA;
  border-radius: 3px;
  padding: 3px 10px;
  margin-bottom: 0.5vw;
}

.product-list__body h3 {
  font-family: Arial;
  font-weight: 700;
  font-size: 1vw;
  color: #12371D;
  margin-bottom: 0.5vw;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-list__body p {
  font-size: 0.73vw;
  color: #7A8C7D;
  line-height: 1.38vw;
  margin-bottom: 0.83vw;
}

.product-list__tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.83vw;
}

.product-list__tags span {
  font-size: 0.6vw;
  color: #B6843A;
  background: #F7F2EA;
  border-radius: 3px;
  padding: 2px 8px;
}

.product-list__body a.more {
  font-family: Arial;
  font-size: 0.71vw;
  color: #B6843A;
  font-weight: 400;
  transition: all 0.3s;
}

.product-list__body a.more:hover { color: #12371D; transform: scale(1.05); display: inline-block; }

/* ============================================
   ABOUT SECTION / COMPANY INTRO (content-four)
============================================ */
.content-four {
  width: var(--bs-screen-xxl);
  min-height: 25vw;
  margin: 3.33vw auto 0;
  display: flex;
}

.content-four__left {
  width: 14.75vw;
  border-right: 1px solid #E5E5E5;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-right: 1.67vw;
}

.four-left__item {
  display: flex;
  flex-direction: column;
}

.four-left__item__number {
  display: flex;
  align-items: flex-end;
}

.four-left__item__number .num-title {
  font-family: Arial;
  font-weight: 800;
  font-size: 4.58vw;
  color: #12371D;
  line-height: 1;
}

.four-left__item__number span {
  padding-bottom: 0.67vw;
  padding-left: 6px;
  font-family: Arial;
  font-weight: 400;
  font-size: 0.92vw;
  color: #12371D;
  line-height: 1.83vw;
}

.four-left__item__years {
  font-family: Arial;
  font-weight: 400;
  font-size: 0.92vw;
  color: #12371D;
  line-height: 1.83vw;
}

.content-four__right {
  width: calc(100% - 14.75vw);
  padding-left: 3.75vw;
  padding-bottom: 2.5vw;
}

.content-four__title {
  font-family: Arial;
  font-weight: 800;
  font-size: 2.5vw;
  color: #12371D;
  line-height: 2.5vw;
}

.content-four__body {
  margin-top: 1.67vw;
  font-family: Arial;
  font-weight: 400;
  font-size: 0.92vw;
  color: #12371D;
  line-height: 1.83vw;
  letter-spacing: 0.03em;
  word-spacing: 3px;
}

.content-four__body p { margin-bottom: 0.83vw; }

/* ============================================
   CERTIFICATIONS
============================================ */
.cert-section {
  width: 100%;
  padding: 0 0 3.33vw;
  background: #F7F4EF;
  position: relative;
  z-index: 2;
}

.cert-list {
  width: var(--bs-screen-xxl);
  display: flex;
  justify-content: space-between;
  margin: 1.67vw auto 0;
  gap: 1.25vw;
}

.cert-list__item {
  flex: 1;
  background: #fff;
  border-radius: 0.5vw;
  padding: 2.08vw 1.25vw;
  text-align: center;
  border: 1px solid #E5E5E5;
  transition: all 0.3s ease;
}

.cert-list__item:hover {
  border-color: #B6843A;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

.cert-badge-text {
  font-family: Arial;
  font-weight: 900;
  font-size: 2vw;
  color: #12371D;
  line-height: 1;
  margin-bottom: 0.5vw;
}

.cert-list__item h4 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.83vw;
  color: #12371D;
  margin-bottom: 0.58vw;
  letter-spacing: 0.03em;
}

.cert-list__item p {
  font-size: 0.71vw;
  color: #7A8C7D;
  line-height: 1.33vw;
}

/* ── image-based cert cards ── */
.cert-list__item--img { text-align: left; padding: 0; overflow: hidden; }

.cert-img-wrap {
  width: 60%;
  max-width: 260px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
  border-radius: 0.4vw 0.4vw 0 0;
  background: #f0ece4;
}

.cert-img-wrap img {
  width: 100%; height: auto;
  object-fit: initial;
  transition: transform 0.4s ease;
}

.cert-list__item--img:hover .cert-img-wrap img { transform: scale(1.04); }

.cert-list__item--img h4,
.cert-list__item--img p {
  padding: 0 1.25vw;
}

.cert-list__item--img h4 { margin-top: 0.83vw; margin-bottom: 0.33vw; }
.cert-list__item--img p  { margin-bottom: 1vw; }

/* ============================================
   SERVICE PROCESS
============================================ */
.process-section {
  width: 100%;
  background: #F7F4EF;
  padding: 0 0 4.17vw;
  position: relative;
  z-index: 2;
}

.process-grid {
  width: var(--bs-screen-xxl);
  margin: 2.5vw auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pstep {
  padding: 2.33vw 2vw;
  background: transparent;
  border-bottom: 1px solid #E0DDD7;
  border-right: 1px solid #E0DDD7;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
}

.pstep:hover {
  background: #fff;
  box-shadow: 0 4px 18px rgba(18,55,29,0.09);
  z-index: 1;
}

/* last column: no right border */
.pstep:nth-child(3n) { border-right: none; }

/* second row: no bottom border */
.pstep--row2 { border-bottom: none; }


.pstep__num {
  font-family: Arial;
  font-weight: 900;
  font-size: 2.33vw;
  color: #12371D;
  line-height: 1;
  opacity: 0.18;
  letter-spacing: -0.02em;
  margin-bottom: 0.75vw;
}

.pstep__rule {
  width: 1.67vw;
  height: 2px;
  background: #12371D;
  margin-bottom: 0.83vw;
}

.pstep h4 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.75vw;
  color: #12371D;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5vw;
}

.pstep p {
  font-size: 0.68vw;
  color: #7A8C7D;
  line-height: 1.38vw;
}

/* ============================================
   CLIENTS / CASES
============================================ */
.clients-section {
  width: 100%;
  padding: 0 0 4.17vw;
  position: relative;
  z-index: 2;
}

/* Logo strip */
.clients-logos {
  width: var(--bs-screen-xxl);
  margin: 2.08vw auto 2.5vw;
  overflow: hidden;
}

.clients-logos .swiper {
  width: 100%;
}

.client-logo-item {
  height: 4.17vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 0.42vw;
  padding: 0.62vw 1.17vw;
  transition: all 0.3s;
}

.client-logo-item img {
  max-height: 2vw;
  width: auto;
  max-width: 6.67vw;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.55);
  transition: filter 0.3s;
}

.client-logo-item:hover {
  border-color: #B6843A;
  box-shadow: 0 2px 10px rgba(18,55,29,.12);
}

.client-logo-item:hover img {
  filter: grayscale(0%) opacity(1);
}

.client-logo-item--text {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 0.68vw;
  color: #7A8BA8;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Cases grid */
.cases-grid {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  display: flex;
  gap: 1.25vw;
}

.case-item {
  flex: 1;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 0.5vw;
  overflow: hidden;
  transition: all 0.3s ease;
}

.case-item:hover {
  border-color: #B6843A;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.case-item__img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.case-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.case-item:hover .case-item__img img { transform: scale(1.06); }

.case-item__body { padding: 1.17vw; }

.case-tag {
  display: inline-block;
  font-size: 0.58vw;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #B6843A;
  background: #F7F2EA;
  border-radius: 3px;
  padding: 2px 8px;
  margin-bottom: 0.42vw;
}

.case-item__body h4 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.79vw;
  color: #12371D;
  line-height: 1.25vw;
  margin-bottom: 0.42vw;
}

.case-item__body p {
  font-size: 0.68vw;
  color: #7A8C7D;
  line-height: 1.25vw;
}

/* ============================================
   NEWS / BLOGS (content-five)
============================================ */
.content-five {
  width: var(--bs-screen-xxl);
  margin: 3.33vw auto 3.33vw;
}

.content-five__title {
  font-family: Arial;
  font-weight: 400;
  font-size: 1.42vw;
  color: #12371D;
  line-height: 2.92vw;
}

.content-five__title span {
  font-size: 2.08vw;
  font-weight: 700;
}

.content-five__body {
  margin-top: 2.08vw;
}

.myMachinesSwiper {
  overflow: hidden;
}

.swiper-five {
  width: 19.17vw;
  height: 100%;
  border: 1px solid #E5E5E5;
  transition: all 0.3s ease;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  /* flex column so text area stretches and button stays at bottom */
  display: flex;
  flex-direction: column;
}

.swiper-five:hover {
  border-color: #B6843A;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}

.content-five__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}

.content-five__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.swiper-five:hover .content-five__img img { transform: scale(1.08); }

/* Both news and product carousels use 4:3 via the base rule above */

.content-five__test {
  padding: 1.33vw;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-five__test p {
  font-family: Arial;
  font-size: 0.68vw;
  color: #B6843A;
  line-height: 0.83vw;
}

.content-five__test div {
  margin-top: 0.67vw;
  font-family: Arial;
  font-weight: 700;
  font-size: 1.04vw;
  color: #12371D;
  line-height: 1.42vw;
  /* Title: max 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.83vw;
}

.content-five__test span {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.42vw;
  font-size: 0.71vw;
  color: #747474;
  line-height: 1.17vw;
  min-height: 4.67vw;
}

.content-five__test a {
  display: inline-block;
  margin-top: auto;
  padding-top: 0.8vw;
  font-family: Arial;
  font-size: 0.71vw;
  color: #B6843A;
  line-height: 1.67vw;
  transition: color 0.2s, transform 0.2s;
}

.content-five__test a:hover { color: #9B6D2E; transform: scale(1.08); }

/* Product carousel: no zoom on text / link */
.hpProductsSwiper .content-five__test a:hover { transform: none; }

/* ============================================
   CONTACT FORM (content-six)
============================================ */
.content-six {
  width: 100%;
  background-color: #12371D;
  padding: 2.92vw 0;
}

.content-six__body {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 3.33vw;
}

.six-body__left {
  width: 27.5vw;
}

.six-body__left__title {
  margin-bottom: 2.92vw;
}

.six-body__left__title p {
  font-family: Arial;
  font-size: 1.17vw;
  color: #FFFFFF;
  line-height: 2.08vw;
}

.six-body__left__title div {
  font-family: Arial;
  font-weight: 800;
  font-size: 2.17vw;
  color: #FFFFFF;
  line-height: 2.08vw;
  text-transform: uppercase;
}

.six-body__left__phone { margin-top: 1.67vw; }

.six-body__left__phone p {
  font-family: Arial;
  font-size: 1.08vw;
  color: #FFFFFF;
  line-height: 1.5vw;
  font-weight: 600;
}

.six-body__left__phone span {
  font-family: Arial;
  font-size: 0.79vw;
  color: rgba(255,255,255,0.75);
  line-height: 1.33vw;
}

.six-body__right { flex: 1; }

.six-body__right__item {
  margin-bottom: 1vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
}

.six-body__right__item input {
  flex: 1;
  height: 2.5vw;
  background: #FFFFFF;
  border-radius: 5px;
  border: none; outline: none;
  font-family: Arial;
  font-size: 0.79vw;
  color: #343434;
  padding: 0 0.83vw;
}

.six-body__right__item input::placeholder { color: #aaa; }

.six-body__right__item textarea {
  width: 100%; height: 7.5vw;
  background: #FFFFFF;
  border-radius: 5px;
  border: none; outline: none;
  padding: 0.83vw 1vw;
  font-family: Arial;
  font-size: 0.79vw;
  color: #343434;
  resize: vertical;
}

.six-body__right__item textarea::placeholder { color: #aaa; }

.submit {
  width: 100%; height: 3.17vw;
  background-color: #B6843A;
  border-radius: 5px;
  border: none;
  font-family: Arial;
  font-weight: 700;
  font-size: 0.92vw;
  color: #FFFFFF;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: background 0.3s;
}

.submit:hover { background-color: #9B6D2E; }

/* ============================================
   FOOTER
============================================ */
.footer {
  position: relative;
  width: 100%;
  background: #F7F4EF;
  overflow: hidden;
}

.footer-content {
  display: flex;
  width: var(--bs-screen-xxl);
  margin: 3.75vw auto 0;
  padding-bottom: 2.5vw;
  border-bottom: 1px solid #E5E5E5;
}

.footer-logo { width: 20vw; }

.footer-logo > img {
  margin-top: 0.42vw;
  height: 2.83vw;
  width: auto;
  object-fit: contain;
}

.logo-list {
  display: flex;
  gap: 0.83vw;
  margin-top: 1.67vw;
}

.logo-list img {
  width: 1vw; height: 1vw;
  cursor: pointer;
}

.logo-list img:hover { animation: tada 0.8s; }

@keyframes tada {
  from { transform: scale3d(1,1,1); }
  10%, 20% { transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-5deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,5deg); }
  40%, 60%, 80% { transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-5deg); }
  to { transform: scale3d(1,1,1); }
}

.footer-logo p {
  width: 18.33vw;
  font-family: Arial;
  font-size: 0.79vw;
  color: #3D5A41;
  line-height: 1.5vw;
  margin-top: 1.5vw;
}

.footer-right {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 20vw);
  padding-left: 3.33vw;
}

.footer-content_item h3 {
  font-family: Arial;
  font-weight: 900;
  font-size: 0.79vw;
  color: #12371D;
  line-height: 1vw;
  margin-bottom: 1.67vw;
  letter-spacing: 0.05em;
}

.footer-content_item > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}

.footer-content_item > ul > li > a {
  font-family: Arial;
  font-size: 0.71vw;
  color: #12371D;
  line-height: 1.67vw;
  transition: color 0.2s;
}

.footer-content_item > ul > li > a:hover { color: #B6843A; }

.footer-content_item .recent-post {
  font-family: Arial;
  font-size: 0.71vw;
  color: #12371D;
  line-height: 1.5vw;
}

.footer-content_item--contact {
  width: 35%;
  flex-shrink: 0;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.45vw;
}
.footer-contact-info p {
  font-family: Arial;
  font-size: 0.71vw;
  color: #12371D;
  line-height: 1.6;
  margin: 0;
}
.footer-contact-info a {
  color: #12371D;
  text-decoration: none;
  transition: color .2s;
}
.footer-contact-info a:hover { color: #B6843A; }
.fci-label {
  display: inline-block;
  min-width: 4.5em;
  color: #888;
  font-size: 0.9em;
}
.fci-label::after { content: ' /'; }

.copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.58vw;
  font-family: Arial;
  font-size: 0.75vw;
  color: #868686;
  padding: 0 calc((100% - var(--bs-screen-xxl)) / 2);
}

/* ============================================
   ABOUT PAGE HERO
============================================ */
.page-hero {
  width: 100%;
  height: max(540px, 28.125vw);
  background: linear-gradient(160deg, rgba(18,55,29,.82) 0%, rgba(18,55,29,.6) 100%),
              url('../images/about-quality.webp') center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding-bottom: 3.5vw;
  position: relative;
  z-index: 2;
}

.page-hero .page-hero__inner {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.83vw;
  color: rgba(255,255,255,.7);
  margin-bottom: 1vw;
}

.page-breadcrumb a {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  color: rgba(255,255,255,.7);
  transition: color 0.2s;
}

.page-breadcrumb a:hover { color: #fff; }

.page-breadcrumb__sep {
  font-size: 1em;
  opacity: .5;
}

.page-hero h1 {
  font-family: Arial;
  font-weight: 800;
  font-size: 3.33vw;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  margin: 0 0 0.5vw;
}

/* ============================================
   ABOUT — COMPANY INTRO
============================================ */
.about-intro-wrap {
  width: var(--bs-screen-xxl);
  margin: 3.33vw auto;
  display: flex;
  gap: 4.17vw;
  align-items: flex-start;
}

.about-intro-content { flex: 1; }

.about-intro-content h2 {
  font-family: Arial;
  font-weight: 800;
  font-size: 2vw;
  color: #12371D;
  text-transform: uppercase;
  margin-bottom: 1.25vw;
  line-height: 1.3;
}

.about-intro-content p {
  font-family: Arial;
  font-size: 0.88vw;
  color: #12371D;
  line-height: 1.83vw;
  margin-bottom: 0.83vw;
  letter-spacing: 0.02em;
  word-spacing: 3px;
}

.about-pillars {
  margin-top: 1.67vw;
  display: flex; gap: 0.83vw;
}

.pillar-card {
  flex: 1;
  background: #F7F4EF;
  border: 1px solid #E5E5E5;
  border-radius: 0.42vw;
  padding: 1.17vw 0.83vw;
  text-align: center;
  transition: all 0.3s;
}

.pillar-card:hover { border-color: #12371D; transform: translateY(-3px); }

.pillar-card i { font-size: 1.33vw; color: #B6843A; margin-bottom: 0.5vw; }
.pillar-card h4 { font-size: 0.71vw; font-weight: 700; color: #12371D; margin-bottom: 5px; text-transform: uppercase; }
.pillar-card p { font-size: 0.62vw; color: #7A8C7D; line-height: 1.17vw; }

.about-intro-media { width: 23.33vw; flex-shrink: 0; }
.about-intro-media img { width: 100%; border-radius: 0.5vw; object-fit: cover; box-shadow: 0 8px 30px rgba(0,0,0,.14); }

/* ============================================
   ABOUT — TEAM
============================================ */
.team-wrap {
  background: #F7F4EF;
  padding: 2.5vw 0 4.17vw;
}

.team-grid {
  width: var(--bs-screen-xxl);
  margin: 1.67vw auto 0;
  display: flex; gap: 1.25vw;
}

.team-card {
  flex: 1;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 0.5vw;
  overflow: hidden;
  transition: all 0.3s;
  text-align: center;
}

.team-card:hover {
  border-color: #B6843A;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.team-card__photo { height: 11.67vw; overflow: hidden; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.team-card:hover .team-card__photo img { transform: scale(1.05); }

.team-card__body { padding: 1.17vw; }
.team-card__body h4 { font-family: Arial; font-weight: 700; font-size: 0.83vw; color: #12371D; margin-bottom: 5px; }
.team-card__body .title { font-size: 0.68vw; color: #B6843A; font-weight: 600; margin-bottom: 0.5vw; letter-spacing: 0.04em; }
.team-card__body p { font-size: 0.67vw; color: #7A8C7D; line-height: 1.29vw; }

/* ============================================
   ABOUT — FACTORY
============================================ */
.factory-wrap {
  width: var(--bs-screen-xxl);
  margin: 3.33vw auto 4.17vw;
  display: flex;
  gap: 3.33vw;
  align-items: flex-start;
}

.factory-gallery {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.67vw;
}

.factory-gallery img {
  border-radius: 6px;
  object-fit: cover;
  aspect-ratio: 1;
  width: 100%;
  transition: all 0.3s;
}

.factory-gallery img:first-child {
  grid-column: span 2;
  aspect-ratio: 16/9;
}

.factory-gallery img:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,.12); }

.factory-content { width: 23.33vw; flex-shrink: 0; }

.factory-content h2 {
  font-family: Arial;
  font-weight: 800;
  font-size: 1.67vw;
  color: #12371D;
  text-transform: uppercase;
  margin-bottom: 1vw;
  line-height: 1.3;
}

.factory-content p {
  font-size: 0.83vw;
  color: #12371D;
  line-height: 1.58vw;
  margin-bottom: 1vw;
}

.factory-points { display: flex; flex-direction: column; gap: 0.83vw; margin-top: 1.25vw; }

.factory-point { display: flex; gap: 0.83vw; align-items: flex-start; }

.factory-point .icon {
  width: 2vw; height: 2vw; flex-shrink: 0;
  background: #EEF4EF;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #12371D; font-size: 0.75vw;
}

.factory-point strong { display: block; font-size: 0.75vw; color: #12371D; margin-bottom: 3px; }
.factory-point span { font-size: 0.67vw; color: #7A8C7D; line-height: 1.25vw; }

/* ============================================
   ABOUT PAGE — PAGE HERO SUBTITLE
============================================ */
.page-hero__sub {
  font-size: 0.96vw;
  color: rgba(255,255,255,.65);
  margin-top: 0;
  font-family: Arial;
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* ============================================
   ABOUT — COMPANY PROFILE (REDESIGN)
============================================ */
.ab-company-section { background: #fff; }

.ab-intro-wrap {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  padding: 3.33vw 0 4.17vw;
  display: flex;
  gap: 4.17vw;
  align-items: flex-start;
}

/* left: image block */
.ab-intro-media {
  width: 24vw;
  flex-shrink: 0;
  position: relative;
}

.ab-intro-media img {
  width: 100%;
  border-radius: 0.5vw;
  object-fit: cover;
  display: block;
  box-shadow: 0 12px 40px rgba(18,55,29,.18);
}

/* stat box removed — no overlay decorations on image */

/* right: content block */
.ab-intro-content { flex: 1; }

.ab-intro-tag {
  font-size: 0.67vw;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #B6843A;
  text-transform: uppercase;
  margin-bottom: 0.75vw;
}

.ab-intro-content h2 {
  font-family: Arial;
  font-weight: 800;
  font-size: 1.92vw;
  color: #12371D;
  text-transform: uppercase;
  margin-bottom: 1.25vw;
  line-height: 1.3;
}

.ab-intro-content > p {
  font-size: 0.83vw;
  color: #3D5A41;
  line-height: 1.8vw;
  margin-bottom: 0.83vw;
}

/* clean 3-col category list, separated by vertical rules */
.ab-intro-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5vw;
  margin-bottom: 1.67vw;
  padding-top: 1.25vw;
  border-top: 1px solid #E0DDD7;
}

.ab-intro-cat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 1vw;
  border-right: 1px solid #E0DDD7;
}

.ab-intro-cat:first-child { padding-left: 0; }
.ab-intro-cat:last-child  { border-right: none; }

.ab-intro-cat strong {
  font-size: 0.71vw;
  font-weight: 700;
  color: #12371D;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ab-intro-cat span {
  font-size: 0.63vw;
  color: #7A8C7D;
  line-height: 1.5;
}

.ab-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5vw;
  margin-top: 1.5vw;
  padding: 0.83vw 1.67vw;
  background: #12371D;
  color: #fff;
  font-family: Arial;
  font-weight: 700;
  font-size: 0.75vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0.25vw;
  transition: background 0.3s, transform 0.2s;
}

.ab-cta-btn:hover { background: #B6843A; transform: translateY(-2px); color: #fff; }

/* ============================================
   ABOUT — STATS BAR
============================================ */
.ab-stats-bar {
  background: #12371D;
  padding: 3vw 0;
}

.ab-stats-inner {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.ab-stat { text-align: center; }

.ab-stat__num {
  font-family: Arial;
  font-weight: 800;
  font-size: 3vw;
  color: #B6843A;
  line-height: 1;
}

.ab-stat__num sup {
  font-size: 1.25vw;
  vertical-align: super;
}

.ab-stat__label {
  font-size: 0.67vw;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5vw;
}

.ab-stat-divider {
  width: 1px;
  height: 3vw;
  background: rgba(255,255,255,.18);
}

/* ============================================
   ABOUT — MISSION · VISION · VALUES
============================================ */
.ab-mvv-section {
  background: #F7F4EF;
  padding-bottom: 4.17vw;
}

.ab-mvv-grid {
  width: var(--bs-screen-xxl);
  margin: 1.67vw auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25vw;
}

.ab-mvv-card {
  background: #fff;
  border-radius: 0.5vw;
  padding: 2.08vw 1.67vw;
  border: 1px solid #E5E5E5;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease;
  cursor: default;
}

.ab-mvv-card:hover {
  background: #12371D;
  border-color: #12371D;
  box-shadow: 0 8px 32px rgba(18,55,29,.22);
  transform: translateY(-5px);
}

.ab-mvv-card__icon {
  width: 2.5vw;
  height: 2.5vw;
  background: #EEF4EF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1vw;
  color: #12371D;
  margin-bottom: 1vw;
  transition: background 0.35s, color 0.35s;
}

.ab-mvv-card:hover .ab-mvv-card__icon { background: rgba(255,255,255,.12); color: #B6843A; }

.ab-mvv-card h3 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.83vw;
  color: #12371D;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.67vw;
  transition: color 0.35s;
}

.ab-mvv-card:hover h3 { color: #fff; }

.ab-mvv-card p {
  font-size: 0.75vw;
  color: #3D5A41;
  line-height: 1.5vw;
  transition: color 0.35s;
}

.ab-mvv-card:hover p { color: rgba(255,255,255,.75); }

.ab-values-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42vw;
}

.ab-values-list li {
  font-size: 0.75vw;
  color: #3D5A41;
  display: flex;
  align-items: center;
  gap: 0.42vw;
  transition: color 0.35s;
}

.ab-mvv-card:hover .ab-values-list li { color: rgba(255,255,255,.75); }

.ab-values-list li i { color: #B6843A; font-size: 0.83vw; }
.ab-mvv-card:hover .ab-values-list li i { color: #B6843A; }

/* ============================================
   ABOUT — WHY CHOOSE US
============================================ */
.ab-why-section {
  background: #fff;
  padding-bottom: 4.17vw;
}

.ab-why-grid {
  width: var(--bs-screen-xxl);
  margin: 1.67vw auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25vw;
}

.ab-why-card {
  background: #F7F4EF;
  border-radius: 0.5vw;
  padding: 1.67vw 1.25vw;
  border: 1px solid transparent;
  transition: all 0.3s;
}

.ab-why-card:hover {
  border-color: #B6843A;
  background: #fff;
  box-shadow: 0 4px 20px rgba(18,55,29,.08);
  transform: translateY(-3px);
}

.ab-why-card__icon {
  font-size: 1.5vw;
  color: #B6843A;
  margin-bottom: 0.83vw;
}

.ab-why-card h4 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.79vw;
  color: #12371D;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5vw;
}

.ab-why-card p {
  font-size: 0.71vw;
  color: #3D5A41;
  line-height: 1.42vw;
}

/* ============================================
   ABOUT — TEAM (REDESIGN)
============================================ */
.ab-team-section {
  background: #F7F4EF;
  padding-bottom: 4.17vw;
}

.ab-team-grid {
  width: var(--bs-screen-xxl);
  margin: 1.67vw auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25vw;
}

.ab-team-card {
  background: #fff;
  border-radius: 0.5vw;
  overflow: hidden;
  border: 1px solid #E5E5E5;
  transition: all 0.3s;
}

.ab-team-card:hover {
  border-color: #B6843A;
  box-shadow: 0 6px 24px rgba(18,55,29,.1);
  transform: translateY(-4px);
}

.ab-team-card__photo {
  height: 16vw;
  overflow: hidden;
}

.ab-team-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.ab-team-card:hover .ab-team-card__photo img { transform: scale(1.05); }

.ab-team-card__body {
  padding: 1.04vw 1.04vw 0.83vw;
  text-align: center;
}

.ab-team-card__body h4 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.83vw;
  color: #12371D;
  margin-bottom: 4px;
}

.ab-team-role {
  font-size: 0.67vw;
  color: #B6843A;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.5vw;
}

.ab-team-card__body p {
  font-size: 0.67vw;
  color: #7A8C7D;
  line-height: 1.3vw;
  margin-bottom: 0.67vw;
}

.ab-team-social {
  display: flex;
  justify-content: center;
  gap: 0.5vw;
}

.ab-team-social a {
  width: 1.5vw; height: 1.5vw;
  background: #EEF4EF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #12371D;
  font-size: 0.71vw;
  transition: background 0.3s, color 0.3s;
}

.ab-team-social a:hover { background: #B6843A; color: #fff; }

/* ============================================
   ABOUT — QUALITY ASSURANCE
============================================ */
.ab-quality-section {
  background: #fff;
}

/* Full-bleed left-right split */
.ab-quality-split {
  display: flex;
  min-height: 32vw;
}

.ab-quality-img {
  width: 46%;
  flex-shrink: 0;
  overflow: hidden;
}

.ab-quality-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s;
}

.ab-quality-img:hover img { transform: scale(1.03); }

.ab-quality-body {
  flex: 1;
  background: #12371D;
  padding: 5vw 4.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4vw;
}

.ab-quality-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B6843A;
}

.ab-quality-body h2 {
  font-family: Arial;
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 34px);
  color: #fff;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0;
}

.ab-quality-body > p {
  font-size: clamp(13px, 0.88vw, 16px);
  color: rgba(255,255,255,.75);
  line-height: 1.8;
  margin: 0;
}

.ab-quality-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.15);
}

.ab-quality-item {
  padding: 1.1vw 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.ab-quality-item strong {
  display: block;
  font-size: clamp(13px, 0.83vw, 15px);
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.ab-quality-item span {
  font-size: clamp(12px, 0.73vw, 14px);
  color: rgba(255,255,255,.65);
  line-height: 1.7;
}

.ab-quality-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5vw;
  font-size: clamp(12px, 0.8vw, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #B6843A;
  text-decoration: none;
  transition: gap .2s;
}

.ab-quality-link:hover { gap: 0.65rem; }

/* ============================================
   ABOUT — CTA BANNER
============================================ */
.ab-cta-banner {
  background: linear-gradient(135deg, #12371D 0%, #1e5a30 100%);
  padding: 4.17vw 0;
}

.ab-cta-banner__inner {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
}

.ab-cta-banner__text p {
  font-size: 0.75vw;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.5vw;
}

.ab-cta-banner__text h2 {
  font-family: Arial;
  font-weight: 800;
  font-size: 1.83vw;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
}

.ab-cta-banner__actions {
  display: flex;
  gap: 1vw;
  flex-shrink: 0;
}

.ab-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  height: 2.92vw;
  padding: 0 1.8vw;
  font-family: Arial;
  font-weight: 700;
  font-size: 0.75vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0.25vw;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s, transform .2s;
}
.ab-cta-banner__btn:active { transform: scale(0.97); }

.ab-cta-banner__btn--primary {
  background: #B6843A;
  color: #fff;
  border: 2px solid #B6843A;
  box-shadow: 0 2px 12px rgba(182,132,58,.35);
}
.ab-cta-banner__btn--primary:hover {
  background: #fff;
  color: #B6843A;
  border-color: #fff;
  box-shadow: 0 4px 20px rgba(255,255,255,.25);
}

.ab-cta-banner__btn--outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,.45);
  color: rgba(255,255,255,.85);
}
.ab-cta-banner__btn--outline:hover {
  background: #fff;
  border-color: #fff;
  color: #12371D;
  box-shadow: 0 4px 20px rgba(255,255,255,.2);
}

/* ============================================
   RESPONSIVE
   Breakpoints: 1024px (tablet) / 768px (mobile)
   Mirrors 锦柏欣 strategy — no JS rem scaling
============================================ */

/* ── mid-screen font floor: 1025px ~ 1800px ──
   Pure vw collapses at 1440px; px floors keep
   body copy and small labels readable.           */
@media screen and (min-width: 1025px) and (max-width: 1800px) {
  /* 0.73vw tier (14px@1920) → floor 13px */
  .content-titel__one__all span,
  .content-one__list__item span,
  .content-one__list__item a,
  .product-list__body p,
  .product-list__body a.more,
  .case-item__body p,
  .pstep p,
  .cert-list__item p,
  .content-five__test span,
  .footer-content_item > ul > li > a,
  .footer-logo p,
  .copyright,
  .page-breadcrumb,
  .pillar-card p,
  .team-card__body p,
  .factory-point span             { font-size: 13px; }

  /* 0.79vw tier (15px@1920) → floor 13px */
  .header-menus > li > a,
  .header-menus > li > .header-menu > a,
  .header-menus__second > li > a  { font-size: 13px; }

  /* 0.83vw tier (16px@1920) → floor 14px */
  .content-one__list__item p,
  .swiper-content__button a,
  .content-five__test p,
  .six-body__left__phone span,
  .footer-content_item .recent-post { font-size: 14px; }

  /* 0.92vw tier (17.7px@1920) → floor 15px */
  .swiper-content__p p,
  .content-four__body,
  .about-intro-content p,
  .factory-content p              { font-size: 15px; }

  /* 1.04vw tier (20px@1920) → floor 16px */
  .content-five__test div,
  .product-list__body h3,
  .case-item__body h4,
  .team-card__body h4             { font-size: 16px; }

  /* 2.17vw (banner title), 2.17vw (section heading) → floor 26px */
  .swiper-content__title          { font-size: 2.17vw; }
  .content-titel__one__all div    { font-size: 26px; }
}

/* ════════════════════════════════════════════
   1440 FIX  ≤ 1600px  (covers 1440px laptops)
   Supplements the ≤1800px block above.
   Covers all pages: index / about / certifications
   / contact / products / product-detail.
════════════════════════════════════════════ */
@media screen and (min-width: 1025px) and (max-width: 1600px) {

  /* ── Global ── */
  .header                                          { font-size: 14px; }
  .header-logo-placeholder                         { font-size: 13px; }
  .header-search input                             { font-size: 13px; }
  .page-hero__sub                                  { font-size: 15px; }
  .client-logo-item--text                          { font-size: 13px; }
  .submit                                          { font-size: 14px; }

  /* ── Index: stats / cards / process ── */
  .content-two-number > li > p                     { font-size: 13px; }
  .content-three__left__all > p                    { font-size: 14px; line-height: 1.65; }
  .content-three__left__ul > li                    { font-size: 14px; height: auto; line-height: 1.9; }
  .four-left__item__number span,
  .four-left__item__years                          { font-size: 14px; }
  .product-list__body .cat                         { font-size: 11px; }
  .product-list__tags span                         { font-size: 11px; }
  .cert-list__item h4                              { font-size: 14px; }
  .pstep h4                                        { font-size: 13px; }
  .case-tag                                        { font-size: 11px; }
  .six-body__right__item input,
  .six-body__right__item textarea                  { font-size: 13px; }
  .content-five__test a                            { font-size: 13px; }
  .footer-content_item h3                          { font-size: 13px; }
  .footer-contact-info p                           { font-size: 13px; }

  /* ── About page (.ab-* / .pillar-* / .team-* / .factory-*) ── */
  .pillar-card h4                                  { font-size: 13px; }
  .pillar-card p                                   { font-size: 13px; line-height: 1.65; }
  .team-card__body .title                          { font-size: 13px; }
  .team-card__body p                               { font-size: 13px; line-height: 1.65; }
  .factory-point .icon                             { font-size: 14px; }
  .factory-point strong                            { font-size: 13px; }
  .factory-point span                              { font-size: 13px; line-height: 1.65; }

  .ab-intro-tag                                    { font-size: 12px; }
  .ab-intro-content > p                            { font-size: 14px; line-height: 1.8; }
  .ab-intro-cat strong                             { font-size: 13px; }
  .ab-intro-cat span                               { font-size: 12px; }
  .ab-cta-btn                                      { font-size: 13px; }
  .ab-stat__label                                  { font-size: 13px; }
  .ab-mvv-card h3                                  { font-size: 15px; }
  .ab-mvv-card p                                   { font-size: 14px; line-height: 1.75; }
  .ab-values-list li                               { font-size: 14px; }
  .ab-why-card h4                                  { font-size: 14px; }
  .ab-why-card p                                   { font-size: 13px; line-height: 1.7; }
  .ab-team-card__body h4                           { font-size: 15px; }
  .ab-team-role                                    { font-size: 12px; }
  .ab-team-card__body p                            { font-size: 13px; line-height: 1.65; }
  .ab-team-social a                                { font-size: 13px; }
  .ab-values-list li i                             { font-size: 14px; }
  .ab-quality-eyebrow                              { font-size: 12px; }
  .ab-quality-item span                            { font-size: 13px; }
  .ab-quality-link                                 { font-size: 14px; }
  .ab-cta-banner__text p                           { font-size: 13px; }
  .ab-cta-banner__btn                              { font-size: 14px; }

  /* ── Certifications page (.ct-*) ── */
  .ct-intro-eyebrow                                { font-size: 12px; }
  .ct-intro-wrap > p                               { font-size: 14px; line-height: 1.8; }
  .ct-cert-card__tag                               { font-size: 11px; }
  .ct-cert-card__body h3                           { font-size: 14px; }
  .ct-cert-card__body p                            { font-size: 13px; line-height: 1.65; }
  .ct-standard-card h3                             { font-size: 14px; }
  .ct-standard-card p                              { font-size: 13px; line-height: 1.65; }
  .ct-process-content > p                          { font-size: 14px; line-height: 1.8; }
  .ct-process-step__num                            { font-size: 12px; }
  .ct-process-step strong                          { font-size: 13px; }
  .ct-process-step span                            { font-size: 13px; line-height: 1.65; }

  /* ── Contact page (.cn-*) ── */
  .cn-info-card h3                                 { font-size: 13px; }
  .cn-info-card p                                  { font-size: 13px; line-height: 1.65; }
  .cn-info-card__sub                               { font-size: 12px; }
  .cn-info-bar__item strong                        { font-size: 13px; }
  .cn-info-bar__item span                          { font-size: 13px; }
  .cn-info-bar__item a                             { font-size: 13px; }
  .cn-form-left > p                                { font-size: 14px; line-height: 1.8; }
  .cn-form-field label                             { font-size: 13px; }
  .cn-form-field input,
  .cn-form-field select                            { font-size: 13px; }
  .cn-form-field textarea                          { font-size: 13px; }
  .cn-submit-btn                                   { font-size: 14px; }
  .cn-quick-info__item > i                         { font-size: 14px; }
  .cn-quick-info__item strong                      { font-size: 13px; }
  .cn-quick-info__item span                        { font-size: 13px; line-height: 1.65; }
  .cn-locations h3                                 { font-size: 13px; }
  .cn-locations ul li                              { font-size: 13px; }
  .cn-locations ul li i                            { font-size: 12px; }

  /* ── Products page (.pt-*) ── */
  .pt-sidebar__title                               { font-size: 13px; }
  .pt-cat-count                                    { font-size: 12px; }
  .pt-sidebar__contact p                           { font-size: 13px; }
  .pt-sidebar__contact a                           { font-size: 13px; }
  .pt-card__body p                                 { font-size: 13px; line-height: 1.65; }
  .pt-card__link                                   { font-size: 13px; }

  /* ── Product Detail page (.pd-*) ── */
  .pd-breadcrumb-inner                             { font-size: 13px; }
  .pd-btn                                          { font-size: 14px; }
  .pd-related__head a                              { font-size: 13px; }
}

/* ════════════════════════════════════════════
   TABLET  ≤ 1024px
════════════════════════════════════════════ */
@media screen and (max-width: 1024px) {
  /* ── containers ── */
  :root {
    --content-width: 90vw;
    --bs-screen-xxl: 90vw;
  }

  /* ── header ── */
  .header { position: fixed; top: 0; z-index: 9999; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
  #header-menu__expand { display: block; }
  .header-search__all { display: none; }

  #header-menu__expand { font-size: 22px; padding: 4px 6px; }
  .header-menus {
    display: none;
    background-color: #12371D;
    position: fixed;
    top: 5.15vw; left: 0; right: 0;
    margin: 0;
    padding: 20px 28px;
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
  }
  .header-menus.open { display: flex; }
  .header-menus > li { width: 100%; padding: 10px 0; flex-direction: column; align-items: flex-start; height: auto; margin: 0; }
  .header-menus > li > a,
  .header-menus > li > .header-menu > a { color: #fff !important; font-size: 15px; }
  .header-menus__second { position: relative; top: 0; left: 14px; background: transparent; box-shadow: none; border-top: none; }
  .header-menus__second > li > a { color: rgba(255,255,255,.8) !important; }

  /* ── banner ── */
  .mySwiper { margin-top: 5.15vw; aspect-ratio: 16 / 7; }
  .swiper-content { margin-top: 4vw; margin-left: 50%; width: 48%; }
  .swiper-content__title { font-size: 28px; }

  /* ── background decoration ── */
  .background { height: 520px; }
  .background-left {
    width: 38vw; height: 38vw;
    background: #12371D;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  /* ── section titles ── */
  .content-titel__one__all span { font-size: 13px; }
  .content-titel__one__all div  { font-size: 26px; line-height: 1.3; }

  /* ── company intro cards (content-one) ── */
  .content-one__list { flex-wrap: wrap; gap: 14px; }
  .content-one__list__item { width: calc(50% - 7px); flex: none; }

  /* ── core advantages: full reset to prevent absolute-positioned overlap ── */
  .content-three {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 24px !important;
  }
  .content-three__left {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    flex-shrink: 0;
    padding: 36px 0 !important;
  }
  .content-three__left__all {
    position: relative !important;
    right: auto !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .content-three__left__all > .section-head { width: 100%; font-size: 20px; line-height: 1.3; }
  .content-three__left__all > p { width: 100%; font-size: 14px; line-height: 1.7; margin-top: 14px; }
  .content-three__left__list { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 20px; gap: 0; }
  .content-three__left__ul { width: 100%; }
  .content-three__left__ul > li { height: auto; font-size: 14px; line-height: 2.2; }
  .content-three__right {
    position: static !important;
    width: 100% !important;
    height: 260px !important;
    top: auto !important;
    left: auto !important;
    flex-shrink: 0;
    overflow: hidden;
  }

  /* ── about / stats (content-four) ── */
  .content-four { flex-direction: column; }
  .content-four__left {
    width: 100%; border-right: none; border-bottom: 1px solid #E5E5E5;
    flex-direction: row; justify-content: space-around; padding: 0 0 24px;
  }
  .content-four__right { padding-left: 0; padding-top: 24px; width: 100%; }
  .content-four__title { font-size: 28px; }

  /* ── products ── */
  .product-list { flex-wrap: wrap; gap: 14px; }
  .product-list__item { width: calc(50% - 7px); flex: none; }

  /* ── certifications ── */
  .cert-list { flex-wrap: wrap; gap: 14px; }
  .cert-list__item { width: calc(50% - 7px); flex: none; }

  /* ── process ── */
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .pstep:nth-child(3n) { border-right: 1px solid #E8EEF8; }
  .pstep:nth-child(2n) { border-right: none; }
  .pstep--row2 { border-bottom: 1px solid #E8EEF8; }
  .pstep:nth-child(n+5) { border-bottom: none; }

  /* ── cases grid ── */
  .cases-grid { flex-wrap: wrap; gap: 14px; }
  .case-item { width: calc(50% - 7px); flex: none; }

  /* ── contact form ── */
  .content-six__body { flex-direction: column; gap: 32px; }
  .six-body__left { width: 100%; }
  .six-body__right { width: 100%; }

  /* ── footer ── */
  .footer-content { flex-direction: column; width: 90%; }
  .footer-logo { width: 100%; }
  .footer-logo > img { height: 50px; margin-top: 0; }
  .footer-logo p { width: 100%; font-size: 13px; line-height: 1.6; margin-top: 14px; }
  .footer-right { width: 100%; padding-left: 0; margin-top: 32px; }
  .footer-content_item > ul { gap: 10px; }
  .footer-content_item h3 { margin-bottom: 14px; font-size: 13px; }
  .footer-contact-info p { font-size: 13px; }
  .copyright { height: auto; padding: 16px 24px; font-size: 13px; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

  /* ── about page (old) ── */
  .about-intro-wrap { flex-direction: column; gap: 32px; }
  .about-intro-media { width: 100%; }
  .about-intro-content h2 { font-size: 24px; }
  .factory-wrap { flex-direction: column; gap: 32px; }
  .factory-content { width: 100%; }
  .team-grid { flex-wrap: wrap; gap: 14px; }
  .team-card { width: calc(50% - 7px); flex: none; }
  .page-hero h1 { font-size: 36px; }
  .page-hero__sub { font-size: 15px; }
  .page-breadcrumb { font-size: 14px; }

  /* ── about page (redesign) — tablet ── */
  .page-hero { height: 360px !important; }
  .page-hero__sub { font-size: 13px; }
  .ab-intro-wrap { flex-direction: column; gap: 40px; }
  .ab-intro-media { width: 100%; }
  .ab-intro-content h2 { font-size: 26px; }
  .ab-intro-tag { font-size: 12px; }
  .ab-intro-content > p { font-size: 14px; line-height: 1.8; }
  .ab-intro-cats { gap: 0; }
  .ab-intro-cat strong { font-size: 13px; }
  .ab-intro-cat span { font-size: 12px; }
  .ab-cta-btn { font-size: 13px; padding: 12px 24px; }

  .ab-stats-inner { flex-wrap: wrap; gap: 24px; justify-content: center; }
  .ab-stat-divider { display: none; }
  .ab-stat__num { font-size: 40px; }
  .ab-stat__num sup { font-size: 18px; }
  .ab-stat__label { font-size: 12px; }

  .ab-mvv-grid { grid-template-columns: 1fr; gap: 14px; }
  .ab-mvv-card__icon { width: 40px; height: 40px; font-size: 18px; }
  .ab-mvv-card h3 { font-size: 15px; }
  .ab-mvv-card p { font-size: 14px; line-height: 1.7; }
  .ab-values-list li { font-size: 14px; }

  .ab-why-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ab-why-card__icon { font-size: 24px; }
  .ab-why-card h4 { font-size: 14px; }
  .ab-why-card p { font-size: 13px; line-height: 1.7; }

  .ab-team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ab-team-card__photo { height: 180px; }
  .ab-team-card__body h4 { font-size: 15px; }
  .ab-team-role { font-size: 12px; }
  .ab-team-card__body p { font-size: 13px; line-height: 1.6; }
  .ab-team-social a { width: 28px; height: 28px; font-size: 13px; }

  .ab-quality-split { flex-direction: column; min-height: unset; }
  .ab-quality-img { width: 100%; height: 52vw; }
  .ab-quality-body { padding: 40px 32px; gap: 20px; }
  .ab-quality-body h2 { font-size: 22px; }
  .ab-quality-body > p { font-size: 14px; }
  .ab-quality-item { padding: 14px 0; }
  .ab-quality-item strong { font-size: 14px; }
  .ab-quality-item span { font-size: 13px; }

  .ab-cta-banner__inner { flex-direction: column; gap: 24px; text-align: center; }
  .ab-cta-banner__text h2 { font-size: 24px; }
  .ab-cta-banner__text p { font-size: 12px; }
  .ab-cta-banner__actions { justify-content: center; }
  .ab-cta-banner__btn { height: 48px; font-size: 13px; }

  /* ── vw → px overrides for tablet (all sections) ── */
  .content-one__list__icon { width: 40px; height: 40px; font-size: 18px; border-radius: 8px; }
  .content-one__list__item { padding: 18px 14px; border-radius: 8px; }
  .content-one__list__item p { font-size: 14px; line-height: 1.5; }
  .content-one__list__item span { font-size: 13px; line-height: 1.6; }
  .content-one__list__item a { font-size: 13px; margin-top: 12px; }

  .content-two-number > li { width: auto; flex: 1; }
  .content-two-number > li > .num-title { font-size: 36px; line-height: 1; }
  .content-two-number > li > p { font-size: 12px; line-height: 1.4; margin-top: 6px; letter-spacing: 0.04em; }

  .content-three__left__all > p { font-size: 14px; line-height: 1.7; }
  .content-three__left__ul > li { height: auto; font-size: 14px; line-height: 2.2; }

  .four-left__item__number .num-title { font-size: 40px; }
  .four-left__item__number span { font-size: 14px; }
  .four-left__item__years { font-size: 13px; }
  .content-four__title { font-size: 26px; }
  .content-four__body { font-size: 14px; line-height: 1.7; word-spacing: 1px; }

  .case-tag { font-size: 11px; padding: 2px 7px; }
  .case-item__body h4 { font-size: 14px; line-height: 1.4; }
  .case-item__body p { font-size: 13px; line-height: 1.5; }
  .case-item__body { padding: 14px; }

  .content-five { margin: 32px auto; }
  .content-five__title { font-size: 14px; line-height: 1.5; }
  .content-five__title span { font-size: 20px; }
  .content-five__body { margin-top: 20px; }
  .swiper-five { border-radius: 8px; }
  .content-five__test { padding: 14px 16px 16px; }
  .content-five__test div { font-size: 15px; line-height: 1.4; margin-top: 6px; min-height: 0 !important; }
  .content-five__test span { font-size: 13px; line-height: 1.5; margin-top: 8px; min-height: 0 !important; }
  .content-five__test p { font-size: 12px; }
  .content-five__test a { font-size: 13px; margin-top: 12px; display: inline-block; font-weight: 700; }

  /* ── partner logos ── */
  .client-logo-item { height: 52px; border-radius: 6px; padding: 8px 14px; }
  .client-logo-item img { max-height: 28px; max-width: 90px; }

  /* ── certifications ── */
  .cert-list__item h4 { font-size: 14px; margin-bottom: 6px; }
  .cert-list__item p  { font-size: 13px; line-height: 1.55; }
  .cert-list__item--img h4, .cert-list__item--img p { padding: 0 14px; }
  .cert-list__item--img h4 { margin-top: 12px; margin-bottom: 4px; }
  /* cert image: show full document, no crop */
  .cert-img-wrap { height: auto; overflow: visible; border-radius: 6px 6px 0 0; }
  .cert-img-wrap img { height: auto; object-fit: initial; }
  .cert-list__item--img h4, .cert-list__item--img p { padding: 0 14px; }
  .cert-list__item--img h4 { margin-top: 12px; margin-bottom: 6px; font-size: 15px; }
  .cert-list__item--img p { margin-bottom: 14px; font-size: 13px; line-height: 1.6; }

  /* ── process steps ── */
  .pstep__num { font-size: 22px; }
  .pstep h4 { font-size: 14px; }
  .pstep p  { font-size: 13px; }
  .pstep { padding: 1.8vw 1.5vw; }
}

/* ════════════════════════════════════════════
   MOBILE  ≤ 768px
════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  /* ── containers ── */
  :root {
    --content-width: 92vw;
    --bs-screen-xxl: 92vw;
  }

  /* ── banner ── */
  .mySwiper { aspect-ratio: unset; height: 300px; border-radius: 0; }
  .swiper-mySwiper { background-color: #1a4a28; }
  /* hide the white right-side gradient; add a full dark overlay instead */
  .swiper-mySwiper::after { display: none; }
  .swiper-mySwiper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(18,55,29,0.78) 0%, rgba(18,55,29,0.45) 100%);
    z-index: 1;
    border-radius: 0;
  }
  .swiper-content { margin-top: 0; padding-top: 32px; margin-left: 5%; width: 90%; }
  .swiper-content__title { font-size: 22px; line-height: 1.3; color: #ffffff; }
  .swiper-content__title em { color: #F5D080; }
  .swiper-content__p { width: 100%; }
  .swiper-content__p p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.88); }
  .swiper-content__button { margin-top: 18px; width: 130px; height: 42px; }
  .swiper-content__button a { font-size: 12px; border-color: #F5D080; color: #F5D080; }
  .swiper-content__button a:hover { background-color: #F5D080; color: #12371D; border-color: #F5D080; }

  /* ── background decoration ── */
  .background { height: 420px; }
  .background-left {
    width: 220px; height: 220px;
    background: #12371D;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  /* ── header height & menu top ── */
  .header { height: 56px; }
  .header-menus { top: 56px; width: 100%; margin: 0; }
  #header-menu__expand { font-size: 22px; padding: 4px 6px; }
  .mySwiper { margin-top: 64px; }

  /* ── section titles ── */
  .content-titel { padding: 48px 0 0; }
  .content-titel__one__all span { font-size: 12px; }
  .content-titel__one__all div { font-size: 20px; line-height: 1.4; }

  /* ── company intro cards ── */
  .content-one__list { flex-direction: column; }
  .content-one__list__item { width: 100%; }
  .content-one__list__item p { font-size: 15px; }
  .content-one__list__item span { font-size: 13px; }
  .content-one__list__item a { font-size: 13px; }

  /* ── content-two stats bar ── */
  .content-two { padding: 20px 0; }
  .content-two-number { flex-wrap: wrap; gap: 10px 0; }
  .content-two-number > li { width: 50%; flex: none; text-align: center; }
  .content-two-number > li > .num-title { font-size: 28px; line-height: 1; }
  .content-two-number > li > p { font-size: 10px; line-height: 1.4; margin-top: 4px; letter-spacing: 0.04em; }

  /* ── stats (content-four): hide duplicate numbers on mobile ── */
  .content-four__left { display: none; }
  .content-four__right { padding-left: 0; padding-top: 0; width: 100%; }
  .content-four__title { font-size: 22px; }
  .content-four__body { font-size: 14px; line-height: 1.8; word-spacing: normal; }

  /* ── products ── */
  .product-list { flex-direction: column; }
  .product-list__item { width: 100%; }
  .product-list__body h3 { font-size: 16px; }
  .product-list__body p { font-size: 13px; }

  /* ── certifications ── */
  .cert-list { flex-direction: column; }
  .cert-list__item { width: 100%; }

  /* ── process: horizontal layout on mobile ── */
  .process-grid {
    grid-template-columns: 1fr;
    border: none;
    margin-top: 20px;
  }
  .pstep {
    display: grid !important;
    grid-template-columns: 50px 1fr;
    column-gap: 14px;
    padding: 18px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid #E0DDD7;
    border-top: none;
  }
  .pstep:last-child { border-bottom: none; }
  .pstep--row2 { border-bottom: 1px solid #E0DDD7; }
  .pstep:nth-child(n+6) { border-bottom: 1px solid #E0DDD7; }
  .pstep:last-child { border-bottom: none !important; }
  .pstep__num {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 30px !important;
    opacity: 0.22;
    line-height: 1;
    margin-bottom: 0;
    align-self: start;
    padding-top: 2px;
  }
  .pstep__rule { display: none !important; }
  .pstep h4 { grid-column: 2; grid-row: 1; font-size: 13px; margin-bottom: 5px; }
  .pstep p  { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1.65; }

  /* ── core advantages (content-three) ── */
  .content-three__left { padding: 28px 0 !important; }
  .content-three__left__all { width: 92% !important; }
  .content-three__left__all > .section-head { font-size: 17px; line-height: 1.3; }
  .content-three__left__all > p { font-size: 13px; line-height: 1.7; }
  .content-three__left__list { grid-template-columns: 1fr !important; margin-top: 14px; }
  .content-three__left__ul > li { font-size: 13px; line-height: 2; }
  .content-three__right { height: 220px !important; }

  /* ── partner logos ── */
  .clients-section { padding-bottom: 28px; }
  .clients-logos { width: 92%; margin: 12px auto 18px; }
  .client-logo-item { height: 46px; padding: 6px 10px; border-radius: 4px; }
  .client-logo-item img { max-height: 24px; max-width: 80px; }

  /* ── case items ── */
  .cases-grid { flex-direction: column; width: 92%; gap: 14px; }
  .case-item { width: 100%; border-radius: 8px; }
  .case-tag { font-size: 10px; padding: 2px 7px; }
  .case-item__body h4 { font-size: 14px; line-height: 1.4; }
  .case-item__body p { font-size: 12px; line-height: 1.55; }
  .case-item__body { padding: 14px; }

  /* ── news/products carousel ── */
  .content-five { width: 92%; margin: 28px auto 32px; }
  .content-five__title { font-size: 13px; line-height: 1.5; }
  .content-five__title span { font-size: 20px; display: block; margin-top: 2px; }
  .content-five__body { margin-top: 18px; }

  /* keep 4:3 image ratio on mobile */

  /* card layout */
  .swiper-five { border-radius: 8px; }
  /* product carousel wraps slides in <a> — make it flex too */
  .swiper-five > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
  .content-five__test { padding: 12px 14px 14px; }
  .content-five__test p { font-size: 11px; margin-bottom: 4px; }
  .content-five__test div {
    font-size: 14px; line-height: 1.4;
    margin-top: 4px;
    -webkit-line-clamp: 2; line-clamp: 2;
    min-height: 0 !important;
  }
  .content-five__test span {
    font-size: 12px; line-height: 1.5;
    margin-top: 6px;
    -webkit-line-clamp: 2; line-clamp: 2;
    min-height: 0 !important;
  }
  .content-five__test a {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-top: 10px;
  }

  /* ── contact form ── */
  .six-body__left__title div { font-size: 24px; }
  .six-body__left__title p  { font-size: 14px; }
  .six-body__left__phone p  { font-size: 16px; }

  /* ── footer ── */
  .footer-content { width: 92%; margin: 28px auto 0; padding-bottom: 24px; }
  .footer-logo > img { height: 44px; margin-top: 0; }
  .footer-logo p {
    font-size: 12px;
    line-height: 1.65;
    margin-top: 12px;
    width: 100%;
    color: #5a7060;
  }
  .footer-right { flex-direction: column; gap: 22px; }
  .footer-content_item h3 { font-size: 13px; margin-bottom: 12px; letter-spacing: 0.06em; }
  .footer-content_item > ul { gap: 8px; }
  .footer-content_item > ul > li > a { font-size: 13px; line-height: 1.5; }
  .footer-contact-info { gap: 8px; }
  .footer-contact-info p { font-size: 13px; line-height: 1.6; }
  .copyright {
    height: auto;
    padding: 14px 20px;
    font-size: 12px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1.6;
    text-align: center;
  }

  /* ── about (old) ── */
  .about-pillars { flex-wrap: wrap; }
  .pillar-card { width: calc(50% - 8px); flex: none; }
  .about-intro-content h2 { font-size: 20px; }
  .about-intro-content p  { font-size: 14px; line-height: 1.8; }
  .team-card { width: 100%; }
  .team-card__body h4 { font-size: 15px; }
  .page-hero { height: 140px; }
  .page-hero h1 { font-size: 22px; }
  .factory-content h2 { font-size: 20px; }
  .factory-content p  { font-size: 14px; }
  .factory-gallery { grid-template-columns: 1fr; }
  .factory-gallery img:first-child { grid-column: span 1; aspect-ratio: 16/9; }

  /* ── about (redesign) — mobile ── */

  /* page hero */
  .page-hero { height: auto !important; min-height: 280px; padding: 48px 0 40px !important; }
  .page-hero .page-hero__inner { width: 92%; }
  .page-hero h1 { font-size: 24px; margin-bottom: 6px; }
  .page-hero__sub { font-size: 12px; line-height: 1.6; }
  .page-breadcrumb { font-size: 12px; margin-bottom: 8px; }

  /* company profile intro */
  .ab-intro-wrap { flex-direction: column; gap: 20px; width: 92%; }
  .ab-intro-media { width: 100%; margin-bottom: 0; }
  .ab-intro-tag { font-size: 11px; }
  .ab-intro-content h2 { font-size: 19px; margin-bottom: 10px; }
  .ab-intro-content > p { font-size: 13px; line-height: 1.75; margin-bottom: 10px; }
  .ab-intro-cats { grid-template-columns: 1fr; gap: 12px; border-top: none; padding-top: 0; margin-top: 12px; }
  .ab-intro-cat { padding: 12px 0; border-right: none; border-bottom: 1px solid #E0DDD7; }
  .ab-intro-cat:last-child { border-bottom: none; }
  .ab-intro-cat strong { font-size: 12px; }
  .ab-intro-cat span { font-size: 12px; }
  .ab-cta-btn { font-size: 13px; padding: 10px 20px; margin-top: 16px; border-radius: 4px; }

  /* stats bar */
  .ab-stats-bar { padding: 24px 0; }
  .ab-stats-inner { width: 92%; flex-wrap: wrap; gap: 16px; justify-content: center; }
  .ab-stat { flex: 0 0 calc(50% - 12px); }
  .ab-stat-divider { display: none; }
  .ab-stat__num { font-size: 28px; }
  .ab-stat__num sup { font-size: 14px; }
  .ab-stat__label { font-size: 11px; margin-top: 4px; }

  /* mission / vision / values */
  .ab-mvv-section { padding-bottom: 28px; }
  .ab-mvv-grid { grid-template-columns: 1fr; gap: 12px; width: 92%; }
  .ab-mvv-card { padding: 20px 16px; border-radius: 8px; }
  .ab-mvv-card__icon { width: 36px; height: 36px; font-size: 16px; margin-bottom: 12px; }
  .ab-mvv-card h3 { font-size: 13px; margin-bottom: 8px; }
  .ab-mvv-card p { font-size: 13px; line-height: 1.65; }
  .ab-values-list { gap: 8px; }
  .ab-values-list li { font-size: 13px; gap: 6px; }
  .ab-values-list li i { font-size: 14px; }

  /* why choose us — single column, icon-left horizontal layout */
  .ab-why-section { padding-bottom: 28px; }
  .ab-why-grid { grid-template-columns: 1fr; gap: 10px; width: 92%; }
  .ab-why-card {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    padding: 16px;
    border-radius: 8px;
  }
  .ab-why-card__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 22px;
    margin-bottom: 0;
    align-self: start;
    padding-top: 2px;
  }
  .ab-why-card h4 { grid-column: 2; grid-row: 1; font-size: 13px; margin-bottom: 5px; }
  .ab-why-card p  { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1.65; }

  /* team — single column, photo-left horizontal layout */
  .ab-team-section { padding-bottom: 28px; }
  .ab-team-grid { grid-template-columns: 1fr; gap: 12px; width: 92%; }
  .ab-team-card {
    display: flex;
    align-items: stretch;
    border-radius: 8px;
  }
  .ab-team-card__photo {
    width: 110px;
    flex-shrink: 0;
    height: auto;
  }
  .ab-team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ab-team-card__body {
    flex: 1;
    padding: 14px 14px 12px;
    text-align: left;
  }
  .ab-team-card__body h4 { font-size: 14px; text-align: left; }
  .ab-team-role { font-size: 12px; margin-bottom: 6px; text-align: left; }
  .ab-team-card__body p { font-size: 12px; line-height: 1.6; text-align: left; margin-bottom: 0; }
  .ab-team-social { justify-content: flex-start; margin-top: 8px; }
  .ab-team-social a { width: 26px; height: 26px; font-size: 12px; }

  /* quality assurance */
  .ab-quality-split { flex-direction: column; min-height: unset; }
  .ab-quality-img {
    width: 100%;
    height: clamp(200px, 56vw, 280px);
    flex-shrink: 0;
  }
  .ab-quality-img img { object-position: center center; }
  .ab-quality-body { padding: 28px 20px 32px; gap: 16px; }
  .ab-quality-eyebrow { font-size: 11px; letter-spacing: 0.12em; }
  .ab-quality-body h2 { font-size: 20px; line-height: 1.25; }
  .ab-quality-body > p { font-size: 13px; line-height: 1.75; }
  .ab-quality-list { margin-top: 4px; }
  .ab-quality-item { padding: 14px 0; }
  .ab-quality-item strong { font-size: 13px; margin-bottom: 5px; }
  .ab-quality-item span { font-size: 12px; line-height: 1.65; }
  .ab-quality-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #B6843A;
    transition: background 0.2s;
  }
  .ab-quality-link:hover { background: rgba(255,255,255,.2); }

  /* CTA banner */
  .ab-cta-banner { padding: 36px 0; }
  .ab-cta-banner__inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    width: 88%;
    align-items: center;
  }
  .ab-cta-banner__text { width: 100%; }
  .ab-cta-banner__text p {
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
  }
  .ab-cta-banner__text h2 {
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: 0.02em;
  }
  .ab-cta-banner__actions { flex-direction: column; gap: 10px; width: 100%; }
  .ab-cta-banner__btn { width: 100%; font-size: 13px; height: 46px; border-radius: 4px; letter-spacing: 0.08em; }

  /* ── content-one spacing fixes ── */
  .content-one { padding: 20px 0 28px; }
  .content-one__list { gap: 12px; margin-top: 16px; }

  /* ── section title spacing ── */
  .content-titel { padding: 36px 0 0; }

  /* ── background decoration (hide on small screens) ── */
  .background-left { display: none; }
  .background { display: none; }
}

/* ============================================
   CERTIFICATIONS PAGE
============================================ */
.ct-intro-section {
  background: #fff;
  padding: 4.17vw 0 3.33vw;
}

.ct-intro-wrap {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  max-width: 54vw;
  text-align: center;
}

.ct-intro-eyebrow {
  font-size: 0.67vw;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #B6843A;
  text-transform: uppercase;
  margin-bottom: 0.75vw;
}

.ct-intro-wrap h2,
.ct-process-content h2 {
  font-family: Arial;
  font-weight: 800;
  font-size: 1.83vw;
  color: #12371D;
  text-transform: uppercase;
  margin-bottom: 1vw;
  line-height: 1.3;
}

.ct-intro-wrap > p {
  font-size: 0.83vw;
  color: #3D5A41;
  line-height: 1.8vw;
}

/* NMPA cert cards */
.ct-certs-section {
  background: #F7F4EF;
  padding-bottom: 4.17vw;
}

.ct-cert-grid {
  width: var(--bs-screen-xxl);
  margin: 1.67vw auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25vw;
  max-width: 860px;
}

.ct-cert-card {
  background: #fff;
  border-radius: 0.5vw;
  overflow: hidden;
  border: 1px solid #E5E5E5;
  transition: all 0.3s;
}

.ct-cert-card:hover {
  border-color: #B6843A;
  box-shadow: 0 6px 24px rgba(18,55,29,.1);
  transform: translateY(-4px);
}

.ct-cert-card__img {
  width: 62%;
  max-width: 260px;
  margin: 1.5vw auto 0;
  height: auto;
  overflow: hidden;
}

.ct-cert-card__img img {
  width: 100%; height: auto;
  object-fit: initial;
  transition: transform 0.4s;
}

.ct-cert-card:hover .ct-cert-card__img img { transform: scale(1.03); }

.ct-cert-card__body {
  padding: 1.25vw 1.25vw 1.5vw;
}

.ct-cert-card__tag {
  display: inline-block;
  font-size: 0.58vw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B6843A;
  background: rgba(182,132,58,.1);
  border-radius: 2px;
  padding: 3px 8px;
  margin-bottom: 0.5vw;
}

.ct-cert-card__body h3 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.83vw;
  color: #12371D;
  margin-bottom: 0.42vw;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ct-cert-card__body p {
  font-size: 0.71vw;
  color: #3D5A41;
  line-height: 1.42vw;
}

/* Regulatory standards grid */
.ct-standards-section {
  background: #fff;
  padding-bottom: 4.17vw;
}

.ct-standards-grid {
  width: var(--bs-screen-xxl);
  margin: 1.67vw auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25vw;
}

.ct-standard-card {
  background: #F7F4EF;
  border-radius: 0.5vw;
  padding: 1.67vw 1.25vw;
  border: 1px solid transparent;
  transition: all 0.3s;
}

.ct-standard-card:hover {
  border-color: #B6843A;
  background: #fff;
  box-shadow: 0 4px 20px rgba(18,55,29,.08);
  transform: translateY(-3px);
}

.ct-standard-card__icon {
  font-size: 1.5vw;
  color: #B6843A;
  margin-bottom: 0.83vw;
}

.ct-standard-card h3 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.79vw;
  color: #12371D;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5vw;
}

.ct-standard-card p {
  font-size: 0.71vw;
  color: #3D5A41;
  line-height: 1.42vw;
}

/* Compliance process section */
.ct-process-section {
  background: #F7F4EF;
  padding-bottom: 4.17vw;
}

.ct-process-wrap {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  padding-top: 1.67vw;
  display: flex;
  gap: 4.17vw;
  align-items: flex-start;
}

.ct-process-content { flex: 1; }

.ct-process-content > p {
  font-size: 0.83vw;
  color: #3D5A41;
  line-height: 1.8vw;
  margin-bottom: 1.67vw;
}

.ct-process-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25vw;
}

.ct-process-step {
  display: flex;
  gap: 1vw;
  align-items: flex-start;
}

.ct-process-step__num {
  flex-shrink: 0;
  width: 2vw;
  height: 2vw;
  background: #12371D;
  color: #B6843A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-weight: 800;
  font-size: 0.63vw;
}

.ct-process-step strong {
  display: block;
  font-size: 0.75vw;
  font-weight: 700;
  color: #12371D;
  margin-bottom: 3px;
}

.ct-process-step span {
  font-size: 0.67vw;
  color: #7A8C7D;
  line-height: 1.25vw;
}

.ct-process-media {
  width: 23.33vw;
  flex-shrink: 0;
}

.ct-process-media img {
  width: 100%;
  border-radius: 0.5vw;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 30px rgba(18,55,29,.12);
}

/* ============================================
   CONTACT PAGE
============================================ */
.cn-info-section {
  background: #12371D;
  padding: 3.33vw 0;
}

.cn-info-grid {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25vw;
}

.cn-info-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.5vw;
  padding: 1.67vw 1.5vw;
  transition: background 0.3s;
}

.cn-info-card:hover { background: rgba(255,255,255,.1); }

.cn-info-card--accent {
  background: rgba(182,132,58,.12);
  border-color: rgba(182,132,58,.35);
}

.cn-info-card__icon {
  font-size: 1.5vw;
  color: #B6843A;
  margin-bottom: 0.75vw;
}

.cn-info-card h3 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.79vw;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5vw;
}

.cn-info-card p {
  font-size: 0.79vw;
  color: rgba(255,255,255,.85);
  line-height: 1.5vw;
  margin-bottom: 3px;
}

.cn-info-card p a { color: #B6843A; }
.cn-info-card p a:hover { color: #D4A055; }

.cn-info-card__sub {
  font-size: 0.67vw !important;
  color: rgba(255,255,255,.5) !important;
}

/* clean info bar */
.cn-info-bar {
  background: #fff;
  border-bottom: 1px solid #E8E5DF;
}

.cn-info-bar__inner {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  padding: 2.5vw 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.cn-info-bar__item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.83vw;
  padding: 0 2vw;
}

.cn-info-bar__item:first-child { padding-left: 0; }
.cn-info-bar__item:last-child  { padding-right: 0; }

.cn-info-bar__item > i {
  font-size: 1.17vw;
  color: #B6843A;
  margin-top: 2px;
  flex-shrink: 0;
}

.cn-info-bar__item div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cn-info-bar__item strong {
  font-size: 0.67vw;
  font-weight: 700;
  color: #12371D;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cn-info-bar__item span {
  font-size: 0.71vw;
  color: #3D5A41;
  line-height: 1.5;
}

.cn-info-bar__item a {
  font-size: 0.71vw;
  color: #B6843A;
  transition: color 0.2s;
}

.cn-info-bar__item a:hover { color: #9B6D2E; }

.cn-info-bar__divider {
  width: 1px;
  height: 3vw;
  background: #E0DDD7;
  flex-shrink: 0;
}

/* Contact form section */
.cn-form-section {
  background: #fff;
  padding-bottom: 5vw;
}

.cn-form-wrap {
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  padding-top: 4.17vw;
  display: flex;
  gap: 4.17vw;
  align-items: flex-start;
}

.cn-form-left { flex: 1; }

.cn-form-left h2 {
  font-family: Arial;
  font-weight: 800;
  font-size: 1.67vw;
  color: #12371D;
  text-transform: uppercase;
  margin-bottom: 0.67vw;
  line-height: 1.3;
}

.cn-form-left > p {
  font-size: 0.83vw;
  color: #3D5A41;
  line-height: 1.8vw;
  margin-bottom: 1.67vw;
}

.cn-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vw;
  margin-bottom: 1vw;
}

.cn-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1vw;
}

.cn-form-field:last-child { margin-bottom: 0; }

.cn-form-field label {
  font-size: 0.71vw;
  font-weight: 600;
  color: #12371D;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cn-form-field label span { color: #B6843A; }

.cn-form-field input,
.cn-form-field select,
.cn-form-field textarea {
  width: 100%;
  padding: 0.67vw 0.83vw;
  border: 1px solid #D8D5CF;
  border-radius: 4px;
  font-size: 0.75vw;
  color: #12371D;
  background: #fff;
  transition: border-color 0.2s;
  font-family: Arial;
  outline: none;
}

.cn-form-field input::placeholder,
.cn-form-field textarea::placeholder { color: #aaa; }

.cn-form-field input:focus,
.cn-form-field select:focus,
.cn-form-field textarea:focus { border-color: #B6843A; }

.cn-form-field textarea { resize: vertical; min-height: 7vw; }

.cn-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5vw;
  margin-top: 1.25vw;
  padding: 0.83vw 2vw;
  background: #12371D;
  color: #fff;
  font-family: Arial;
  font-weight: 700;
  font-size: 0.75vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.cn-submit-btn:hover { background: #B6843A; transform: translateY(-2px); }

/* Right column */
.cn-form-right {
  width: 23.33vw;
  flex-shrink: 0;
}

.cn-form-right__img {
  width: 100%;
  border-radius: 0.5vw;
  overflow: hidden;
  margin-bottom: 1.67vw;
}

.cn-form-right__img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.cn-quick-info {
  background: #F7F4EF;
  border-radius: 0.5vw;
  padding: 1.25vw;
  margin-bottom: 1.25vw;
}

.cn-quick-info h3,
.cn-locations h3 {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.71vw;
  color: #12371D;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.83vw;
}

.cn-quick-info__item {
  display: flex;
  gap: 0.67vw;
  align-items: flex-start;
  margin-bottom: 0.67vw;
}

.cn-quick-info__item:last-child { margin-bottom: 0; }

.cn-quick-info__item > i {
  font-size: 0.83vw;
  color: #B6843A;
  margin-top: 2px;
  flex-shrink: 0;
}

.cn-quick-info__item strong {
  display: block;
  font-size: 0.67vw;
  color: #12371D;
  font-weight: 700;
  margin-bottom: 2px;
}

.cn-quick-info__item span {
  font-size: 0.63vw;
  color: #7A8C7D;
}

.cn-locations {
  background: #F7F4EF;
  border-radius: 0.5vw;
  padding: 1.25vw;
}

.cn-locations ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}

.cn-locations ul li {
  font-size: 0.67vw;
  color: #3D5A41;
  display: flex;
  align-items: center;
  gap: 0.42vw;
}

.cn-locations ul li i { color: #B6843A; font-size: 0.71vw; }

/* ════════════════════════════════════════════
   1440 FIX — PART 2  (NEW PAGES)
   Must come AFTER ct-* / cn-* / pt-* / pd-*
   base CSS so these overrides actually win.
════════════════════════════════════════════ */
@media screen and (min-width: 1025px) and (max-width: 1600px) {

  /* ── Certifications page ── */
  .ct-intro-eyebrow                               { font-size: 12px; }
  .ct-intro-wrap > p                              { font-size: 14px; line-height: 1.8; }
  .ct-cert-card__tag                              { font-size: 11px; }
  .ct-cert-card__body h3                          { font-size: 14px; }
  .ct-cert-card__body p                           { font-size: 13px; line-height: 1.65; }
  .ct-standard-card h3                            { font-size: 14px; }
  .ct-standard-card p                             { font-size: 13px; line-height: 1.65; }
  .ct-process-content > p                         { font-size: 14px; line-height: 1.8; }
  .ct-process-step__num                           { font-size: 12px; }
  .ct-process-step strong                         { font-size: 13px; }
  .ct-process-step span                           { font-size: 13px; line-height: 1.65; }

  /* ── Contact page ── */
  .cn-info-bar__item strong                       { font-size: 13px; }
  .cn-info-bar__item span                         { font-size: 13px; }
  .cn-info-bar__item a                            { font-size: 13px; }
  .cn-info-card h3                                { font-size: 13px; }
  .cn-info-card p                                 { font-size: 13px; line-height: 1.65; }
  .cn-info-card__sub                              { font-size: 12px; }
  .cn-form-left > p                               { font-size: 14px; line-height: 1.8; }
  .cn-form-field label                            { font-size: 13px; }
  .cn-form-field input,
  .cn-form-field select                           { font-size: 13px; }
  .cn-form-field textarea                         { font-size: 13px; }
  .cn-submit-btn                                  { font-size: 14px; }
  .cn-quick-info__item > i                        { font-size: 14px; }
  .cn-quick-info__item strong                     { font-size: 13px; }
  .cn-quick-info__item span                       { font-size: 13px; line-height: 1.65; }
  .cn-locations h3                                { font-size: 13px; }
  .cn-locations ul li                             { font-size: 13px; }
  .cn-locations ul li i                           { font-size: 12px; }

  /* ── Products page ── */
  .pt-sidebar__title                              { font-size: 13px; }
  .pt-cat-count                                   { font-size: 12px; }
  .pt-sidebar__contact p                          { font-size: 13px; }
  .pt-sidebar__contact a                          { font-size: 13px; }
  .pt-card__body p                                { font-size: 13px; line-height: 1.65; }
  .pt-card__link                                  { font-size: 13px; }

  /* ── Product Detail page ── */
  .pd-breadcrumb-inner                            { font-size: 13px; }
  .pd-btn                                         { font-size: 14px; }
  .pd-related__head a                             { font-size: 13px; }
}

/* ── Certifications + Contact responsive ── */
@media screen and (max-width: 1024px) {
  .ct-intro-wrap { max-width: 90vw; }
  .ct-intro-eyebrow { font-size: 12px; }
  .ct-intro-wrap h2, .ct-process-content h2 { font-size: 26px; }
  .ct-intro-wrap > p, .ct-process-content > p { font-size: 14px; line-height: 1.8; }

  .ct-cert-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ct-cert-card__img { width: 58%; max-width: 220px; margin: 16px auto 0; }
  .ct-cert-card__body h3 { font-size: 14px; }
  .ct-cert-card__body p { font-size: 13px; line-height: 1.7; }

  .ct-standards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ct-standard-card__icon { font-size: 24px; }
  .ct-standard-card h3 { font-size: 14px; }
  .ct-standard-card p { font-size: 13px; line-height: 1.7; }

  .ct-process-wrap { flex-direction: column; gap: 32px; }
  .ct-process-media { width: 100%; }
  .ct-process-step__num { width: 32px; height: 32px; font-size: 12px; }
  .ct-process-step strong { font-size: 14px; }
  .ct-process-step span { font-size: 13px; line-height: 1.7; }

  .cn-info-bar__inner { flex-wrap: wrap; gap: 20px; padding: 24px 0; }
  .cn-info-bar__item { padding: 0; min-width: calc(50% - 10px); }
  .cn-info-bar__divider { display: none; }
  .cn-info-bar__item > i { font-size: 18px; }
  .cn-info-bar__item strong { font-size: 12px; }
  .cn-info-bar__item span, .cn-info-bar__item a { font-size: 13px; }
  .cn-form-wrap { flex-direction: column; gap: 40px; }
  .cn-form-right { width: 100%; }
  .cn-form-left h2 { font-size: 22px; }
  .cn-form-left > p { font-size: 14px; line-height: 1.8; }
  .cn-form-field label { font-size: 13px; }
  .cn-form-field input,
  .cn-form-field select,
  .cn-form-field textarea { font-size: 14px; padding: 10px 14px; }
  .cn-submit-btn { font-size: 13px; padding: 13px 28px; }
  .cn-quick-info__item strong { font-size: 13px; }
  .cn-quick-info__item span, .cn-locations ul li { font-size: 12px; }
}

@media screen and (max-width: 768px) {

  /* ── certifications page ── */

  /* intro */
  .ct-intro-section { padding: 28px 0 24px; }
  .ct-intro-wrap { max-width: none; width: 92%; }
  .ct-intro-eyebrow { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 8px; }
  .ct-intro-wrap h2 { font-size: 20px; margin-bottom: 10px; }
  .ct-intro-wrap > p { font-size: 13px; line-height: 1.75; }

  /* NMPA cert cards */
  .ct-certs-section { padding-bottom: 28px; }
  .ct-cert-grid { grid-template-columns: 1fr 1fr; gap: 14px; width: 92%; }
  .ct-cert-card { border-radius: 8px; }
  .ct-cert-card__img { width: 70%; max-width: 180px; margin: 14px auto 0; height: auto; aspect-ratio: unset; }
  .ct-cert-card__body { padding: 14px; }
  .ct-cert-card__tag { font-size: 11px; margin-bottom: 6px; }
  .ct-cert-card__body h3 { font-size: 14px; margin-bottom: 6px; }
  .ct-cert-card__body p { font-size: 13px; line-height: 1.65; }

  /* standards grid — icon-left grid layout */
  .ct-standards-section { padding-bottom: 28px; }
  .ct-standards-grid { grid-template-columns: 1fr; gap: 10px; width: 92%; }
  .ct-standard-card {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    padding: 16px;
    border-radius: 8px;
  }
  .ct-standard-card__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 22px;
    margin-bottom: 0;
    align-self: start;
    padding-top: 2px;
  }
  .ct-standard-card h3 { grid-column: 2; grid-row: 1; font-size: 13px; margin-bottom: 5px; }
  .ct-standard-card p  { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1.65; }

  /* compliance process */
  .ct-process-section { padding-bottom: 28px; }
  .ct-process-wrap { flex-direction: column; gap: 24px; width: 92%; padding-top: 20px; }
  .ct-process-media { width: 100%; height: 200px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
  .ct-process-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
  .ct-process-content h2,
  .ct-intro-wrap h2 { font-size: 20px; }
  .ct-process-content > p { font-size: 13px; line-height: 1.75; margin-bottom: 16px; }
  .ct-process-steps { gap: 12px; }
  .ct-process-step { gap: 12px; }
  .ct-process-step__num { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
  .ct-process-step strong { font-size: 13px; margin-bottom: 3px; }
  .ct-process-step span { font-size: 12px; line-height: 1.6; }

  /* ── contact page — info bar ── */
  .cn-info-bar__inner {
    width: 92%;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .cn-info-bar__item {
    width: 100%;
    min-width: 100%;
    padding: 16px 0;
    gap: 12px;
    border-bottom: 1px solid #E8E5DF;
  }
  .cn-info-bar__item:last-child { border-bottom: none; }
  .cn-info-bar__item > i { font-size: 18px; }
  .cn-info-bar__item strong { font-size: 11px; }
  .cn-info-bar__item span,
  .cn-info-bar__item a { font-size: 13px; }
  .cn-info-bar__divider { display: none; }

  /* ── contact page — form section ── */
  .cn-form-section { padding-bottom: 32px; }
  .cn-form-wrap {
    flex-direction: column;
    gap: 28px;
    width: 92%;
    padding-top: 28px;
  }
  .cn-form-left h2 { font-size: 20px; margin-bottom: 8px; }
  .ct-intro-eyebrow { font-size: 11px; }
  .cn-form-left > p { font-size: 13px; line-height: 1.7; margin-bottom: 20px; }

  /* form fields */
  .cn-form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 14px; }
  .cn-form-field { margin-bottom: 14px; }
  .cn-form-field label { font-size: 12px; letter-spacing: 0.04em; }
  .cn-form-field input,
  .cn-form-field select,
  .cn-form-field textarea { font-size: 14px; padding: 11px 14px; border-radius: 4px; }
  .cn-form-field textarea { min-height: 120px; }
  .cn-submit-btn {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 14px 20px;
    margin-top: 6px;
    border-radius: 4px;
    letter-spacing: 0.08em;
  }

  /* right column — hide decorative image, keep quick info */
  .cn-form-right { width: 100%; }
  .cn-form-right__img { display: none; }
  .cn-quick-info {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 0;
  }
  .cn-quick-info h3 { font-size: 12px; margin-bottom: 12px; }
  .cn-quick-info__item { gap: 10px; margin-bottom: 10px; }
  .cn-quick-info__item > i { font-size: 16px; }
  .cn-quick-info__item strong { font-size: 13px; }
  .cn-quick-info__item span { font-size: 13px; line-height: 1.55; }
}

/* =====================================================
   PRODUCTS LIST PAGE — products.html
   ===================================================== */

/* Outer left-right layout */
.pt-layout {
  display: flex;
  align-items: flex-start;
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  padding: 3vw 0 5vw;
  gap: 0;
  background: #F7F4EF;
}

/* ── Sidebar ── */
.pt-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border-right: 1px solid #e8e0d6;
  align-self: flex-start;
}
.pt-sidebar__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #aaa;
  text-transform: uppercase;
  margin: 0;
  padding: 1.6rem 1.6rem 0.9rem;
  border-bottom: 1px solid #e8e0d6;
}
.pt-cat-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pt-cat-btn {
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  padding: 0.85rem 1.6rem;
  font-size: 0.92rem;
  color: #555;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
  font-weight: 500;
  line-height: 1.4;
  gap: 0;
}
.pt-cat-count {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: #bbb;
  transition: color .18s;
}
.pt-cat-btn:hover {
  background: #f7f4ef;
  color: #12371D;
  border-left-color: #e8e0d6;
}
.pt-cat-btn.active {
  background: #f7f4ef;
  color: #12371D;
  font-weight: 700;
  border-left-color: #B6843A;
}
.pt-cat-btn.active .pt-cat-count { color: #B6843A; }

/* Sidebar bottom contact line */
.pt-sidebar__contact {
  border-top: 1px solid #e8e0d6;
  padding: 1.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pt-sidebar__contact p {
  font-size: 0.8rem;
  color: #999;
  margin: 0;
}
.pt-sidebar__contact a {
  font-size: 0.85rem;
  font-weight: 700;
  color: #12371D;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap .2s, color .2s;
}
.pt-sidebar__contact a:hover { color: #B6843A; gap: 0.5rem; }

/* ── Main content ── */
.pt-main {
  flex: 1;
  min-width: 0;
  padding: 0 3rem 3rem;
}

/* Product Grid */
.pt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* Product Card */
.pt-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.pt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(18,55,29,.11);
}
.pt-card__img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.pt-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.pt-card:hover .pt-card__img img { transform: scale(1.05); }
.pt-card__body {
  padding: 1.1rem 1.1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.pt-card__body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #12371D;
  line-height: 1.35;
  margin: 0;
}
.pt-card__body p {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.65;
  flex: 1;
  margin: 0;
}
.pt-card__link {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: #12371D;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 3px;
  transition: background .2s, gap .2s;
  align-self: flex-start;
}
.pt-card:hover .pt-card__link { background: #0d2915; gap: 0.6rem; }

/* View Details link — related products & card footer */
.pt-card__enquire {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #12371D;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid #12371D;
  padding-bottom: 1px;
  transition: color .2s, gap .2s, border-color .2s;
}
.pt-card:hover .pt-card__enquire {
  color: #B6843A;
  border-color: #B6843A;
  gap: 0.55rem;
}

/* Smaller card variant for related products section */
.pt-card--sm .pt-card__img { aspect-ratio: 4 / 3; height: auto; }

/* Responsive — products page */
@media screen and (max-width: 1200px) {
  .pt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 1024px) {
  .pt-layout { flex-direction: column; }
  .pt-sidebar {
    width: 100%;
    position: static;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid #e8e0d6;
    align-self: auto;
  }
  .pt-sidebar__title { display: none; }
  .pt-cat-list { flex-direction: row; flex-wrap: wrap; padding: 0.75rem 1rem; gap: 0.5rem; }
  .pt-cat-btn {
    width: auto;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 0.55rem 1rem;
    font-size: 0.84rem;
    border-radius: 0;
  }
  .pt-cat-btn.active { border-left-color: transparent; border-bottom-color: #B6843A; }
  .pt-cat-btn:hover { border-left-color: transparent; }
  .pt-sidebar__contact { display: none; }
  .pt-main { padding: 1.5rem; }
}
@media screen and (max-width: 768px) {

  /* ── products page layout ── */
  .pt-layout { width: 100%; padding: 0 0 28px; }

  /* sidebar — horizontal scrollable tabs */
  .pt-sidebar {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid #e8e0d6;
  }
  .pt-sidebar__title { display: none; }
  .pt-sidebar__contact { display: none; }
  .pt-cat-list {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0 16px;
    gap: 4px;
    min-width: max-content;
  }
  .pt-cat-btn {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 0;
  }
  .pt-cat-btn.active {
    border-left-color: transparent;
    border-bottom-color: #B6843A;
    color: #12371D;
  }

  /* product grid */
  .pt-main { padding: 16px 16px 0; }
  .pt-grid { grid-template-columns: 1fr; gap: 14px; }

  /* product cards */
  .pt-card { border-radius: 8px; }
  .pt-card__body { padding: 14px 14px 12px; gap: 8px; }
  .pt-card__body h3 { font-size: 15px; line-height: 1.35; }
  .pt-card__body p  { font-size: 13px; line-height: 1.65; }
  .pt-card__link {
    font-size: 13px;
    padding: 9px 16px;
    align-self: flex-start;
    margin-top: 4px;
  }
}

/* =====================================================
   PRODUCT DETAIL PAGE — product-detail.html
   ===================================================== */

/* Breadcrumb bar */
.pd-breadcrumb-bar {
  background: #F7F4EF;
  border-bottom: 1px solid #e8e0d6;
  padding: 0.75rem 4vw;
}
.pd-breadcrumb-inner {
  max-width: var(--bs-screen-xxl);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #888;
}
.pd-breadcrumb-inner a {
  color: #555;
  text-decoration: none;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.pd-breadcrumb-inner a:hover { color: #12371D; }
.pd-breadcrumb-inner span { color: #B6843A; font-weight: 600; }
.pd-breadcrumb-inner i { color: #bbb; font-size: 1rem; }

/* ── Product Hero ── */
.pd-hero {
  padding: 4vw 4vw 3vw;
}
.pd-hero__inner {
  max-width: var(--bs-screen-xxl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: start;
}

/* Image Gallery */
.pd-gallery__main {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f2ed;
}
.pd-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.pd-gallery__main:hover img { transform: scale(1.03); }
.pd-gallery__thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.pd-thumb {
  width: calc(25% - 0.45rem);
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, opacity .2s;
  opacity: 0.7;
}
.pd-thumb:hover,
.pd-thumb.active {
  border-color: #B6843A;
  opacity: 1;
}

/* Product Info */
.pd-info { display: flex; flex-direction: column; gap: 1.25rem; }
.pd-info__title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 800;
  color: #12371D;
  line-height: 1.25;
  margin: 0;
}
.pd-info__desc {
  font-size: 0.93rem;
  line-height: 1.75;
  color: #555;
  margin: 0;
}
.pd-info__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.pd-info__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #333;
}
.pd-info__highlights li i { color: #12371D; font-size: 1.05rem; margin-top: 0.05rem; }
.pd-info__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 3px;
  text-decoration: none;
  transition: background .2s, color .2s, box-shadow .2s;
}
.pd-btn--primary {
  background: #12371D;
  color: #fff;
}
.pd-btn--primary:hover { background: #0d2915; box-shadow: 0 4px 14px rgba(18,55,29,.25); }
.pd-btn--outline {
  background: transparent;
  color: #12371D;
  border: 2px solid #12371D;
}
.pd-btn--outline:hover { background: #12371D; color: #fff; }
/* ── Tabs Section ── */
.pd-tabs-section {
  background: #F7F4EF;
  padding: 3vw 4vw 4vw;
}
.pd-tabs-section__inner { max-width: var(--bs-screen-xxl); margin: 0 auto; }
.pd-tabs {
  display: flex;
  border-bottom: 2px solid #e0d8cc;
  margin-bottom: 2.5rem;
  gap: 0;
}
.pd-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.85rem 1.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #777;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.pd-tab:hover { color: #12371D; }
.pd-tab.active { color: #12371D; border-bottom-color: #B6843A; }

.pd-tab-panel { display: none; }
.pd-tab-panel.active { display: block; }
.pd-tab-panel h2 { font-size: 1.4rem; color: #12371D; margin: 0 0 1.25rem; }
.pd-tab-panel h3 { font-size: 1.05rem; color: #12371D; margin: 1.5rem 0 0.65rem; }
.pd-tab-panel p { font-size: 0.9rem; line-height: 1.8; color: #555; margin: 0 0 0.75rem; }

/* Overview layout */
.pd-overview {
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: 4vw;
  align-items: start;
}
.pd-overview__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pd-overview__list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: #444;
}
.pd-overview__list li i { color: #B6843A; }
.pd-overview__img {
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.pd-overview__img img { width: 100%; height: 100%; object-fit: cover; }

/* Spec table */
.pd-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.pd-spec-table tr { border-bottom: 1px solid #e8e0d6; }
.pd-spec-table tr:last-child { border-bottom: none; }
.pd-spec-table th {
  width: 30%;
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  color: #888;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: top;
}
.pd-spec-table td {
  padding: 0.75rem 0;
  color: #333;
  line-height: 1.5;
}

/* Documents grid */
.pd-docs-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* ── Related Products ── */
.pd-related { background: #fff; padding: 3vw 4vw 4vw; }
.pd-related__inner { max-width: var(--bs-screen-xxl); margin: 0 auto; }
.pd-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
.pd-related__head h2 { font-size: 1.4rem; color: #12371D; margin: 0; }
.pd-related__head a {
  font-size: 0.82rem;
  font-weight: 700;
  color: #B6843A;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  letter-spacing: 0.03em;
  transition: gap .2s;
}
.pd-related__head a:hover { gap: 0.5rem; }
.pd-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Responsive — detail page */
@media screen and (max-width: 1024px) {
  .pd-hero { padding: 28px 20px 24px; }
  .pd-hero__inner { grid-template-columns: 1fr; gap: 24px; max-width: 100%; }
  .pd-gallery__main { aspect-ratio: 4 / 3; }
  .pd-info__meta { grid-template-columns: 1fr; }
  .pd-info__title { font-size: 22px; }
  .pd-tabs-section { padding: 24px 20px 32px; }
  .pd-tabs-section__inner { max-width: 100%; }
  .pd-overview { grid-template-columns: 1fr; }
  .pd-overview__img { max-width: 480px; }
  .pd-related { padding: 24px 20px 32px; }
  .pd-related__inner { max-width: 100%; }
  .pd-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {

  /* breadcrumb */
  .pd-breadcrumb-bar { padding: 10px 16px; }
  .pd-breadcrumb-inner { font-size: 12px; max-width: 100%; }

  /* product hero */
  .pd-hero { padding: 20px 16px 24px; }
  .pd-hero__inner { max-width: 100%; width: 100%; gap: 20px; }

  /* gallery */
  .pd-gallery__main { aspect-ratio: 4 / 3; border-radius: 8px; }
  .pd-gallery__thumbs { gap: 8px; margin-top: 10px; }
  .pd-thumb { border-radius: 4px; }

  /* product info */
  .pd-info { gap: 14px; }
  .pd-info__title { font-size: 20px; }
  .pd-info__desc { font-size: 13px; line-height: 1.75; }
  .pd-info__highlights { gap: 8px; }
  .pd-info__highlights li { font-size: 13px; gap: 8px; }
  .pd-info__highlights li i { font-size: 15px; }
  .pd-info__actions { flex-direction: column; gap: 10px; }
  .pd-btn { width: 100%; justify-content: center; font-size: 14px; padding: 12px 16px; border-radius: 4px; }

  /* tabs section */
  .pd-tabs-section { padding: 20px 16px 28px; }
  .pd-tabs-section__inner { max-width: 100%; }
  .pd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pd-tab { padding: 12px 14px; font-size: 13px; white-space: nowrap; }
  .pd-tab-panel h2 { font-size: 18px; margin-bottom: 14px; }
  .pd-tab-panel h3 { font-size: 15px; }
  .pd-tab-panel p { font-size: 13px; line-height: 1.75; }
  .pd-overview { grid-template-columns: 1fr; gap: 16px; }
  .pd-overview__img { max-width: 100%; }
  .pd-overview__list li { font-size: 13px; }
  /* scrollable table wrapper */
  .pd-spec-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid #e8e0d6;
  }
  .pd-spec-table thead { background: #f2ede6; }
  .pd-spec-table th {
    width: auto;
    font-size: 11px;
    padding: 10px 12px;
    white-space: nowrap;
    letter-spacing: 0.03em;
  }
  .pd-spec-table td {
    font-size: 12px;
    padding: 10px 12px;
    white-space: normal;
    min-width: 90px;
  }
  .pd-spec-table td:first-child { min-width: 130px; }
  .pd-spec-table td:last-child  { min-width: 150px; }
  /* fix vw inline font-size for caption paragraphs */
  .pd-tab-panel > p[style] { font-size: 12px !important; margin-bottom: 10px !important; margin-top: 10px !important; }

  /* related products */
  .pd-related { padding: 20px 16px 28px; }
  .pd-related__inner { max-width: 100%; }
  .pd-related__head { margin-bottom: 14px; }
  .pd-related__head h2 { font-size: 18px; }
  .pd-related__head a { font-size: 13px; }
  .pd-related__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   NEWS LIST PAGE  (.nw-*)
============================================================ */
.nw-layout {
  display: flex;
  align-items: flex-start;
  gap: 2.5vw;
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  padding: 3.5vw 0;
}

/* ── Sidebar ── */
.nw-sidebar {
  width: 17vw;
  min-width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
}

.nw-sidebar__section {
  margin-bottom: 2.2vw;
  padding-bottom: 2.2vw;
  border-bottom: 1px solid #E8E4DC;
}

.nw-sidebar__section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.nw-sidebar__title {
  font-size: 0.68vw;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #B6843A;
  text-transform: uppercase;
  margin-bottom: 1vw;
}

.nw-cat-list {
  list-style: none;
  padding: 0; margin: 0;
}

.nw-cat-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.55vw 0;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  padding-left: 0.6vw;
  font-size: 0.75vw;
  color: #4A5568;
  cursor: pointer;
  text-align: left;
  transition: color .2s, border-color .2s;
  font-family: Arial;
}

.nw-cat-btn:hover { color: #12371D; border-left-color: #B6843A; }
.nw-cat-btn.active { color: #12371D; font-weight: 700; border-left-color: #12371D; }

.nw-cat-count {
  font-size: 0.63vw;
  color: #9AA5B1;
  font-weight: 400;
}

/* Recent posts */
.nw-recent-list { list-style: none; padding: 0; margin: 0; }

.nw-recent-item {
  padding: 0.7vw 0;
  border-bottom: 1px solid #F0EDE7;
}
.nw-recent-item:last-child { border-bottom: none; }

.nw-recent-item a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
}

.nw-recent-date {
  font-size: 0.6vw;
  color: #B6843A;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.nw-recent-title {
  font-size: 0.71vw;
  color: #2D3748;
  line-height: 1.5;
  transition: color .2s;
}

.nw-recent-item a:hover .nw-recent-title { color: #12371D; }

/* Contact CTA */
.nw-sidebar__contact {
  background: #12371D;
  border-radius: 8px;
  padding: 1.3vw;
}

.nw-sidebar__contact p {
  font-size: 0.71vw;
  color: rgba(255,255,255,.75);
  margin-bottom: 0.7vw;
  line-height: 1.5;
}

.nw-sidebar__contact a {
  font-size: 0.71vw;
  font-weight: 700;
  color: #B6843A;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap .2s;
}

.nw-sidebar__contact a:hover { gap: 10px; }

/* ── Main grid ── */
.nw-main { flex: 1; min-width: 0; }

.nw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8vw;
}

/* ── News Card ── */
.nw-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .25s, transform .25s;
}

.nw-card:hover {
  box-shadow: 0 8px 32px rgba(18,55,29,.12);
  transform: translateY(-4px);
}

.nw-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.nw-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.nw-card:hover .nw-card__img img { transform: scale(1.04); }

.nw-card__cat {
  position: absolute;
  top: 12px; left: 12px;
  background: #12371D;
  color: #fff;
  font-size: 0.6vw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}

.nw-card__body {
  padding: 1.3vw 1.5vw;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  flex: 1;
}

.nw-card__meta {
  font-size: 0.63vw;
  color: #9AA5B1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nw-card__meta i { color: #B6843A; }

.nw-card__body h3 {
  font-family: Arial;
  font-size: 0.9vw;
  font-weight: 700;
  color: #12371D;
  line-height: 1.45;
  margin: 0;
}

.nw-card__body p {
  font-size: 0.75vw;
  color: #7A8C7D;
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.nw-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0.5vw;
  font-size: 0.71vw;
  font-weight: 700;
  color: #12371D;
  letter-spacing: 0.04em;
  transition: gap .2s, color .2s;
}

.nw-card:hover .nw-card__link { gap: 10px; color: #B6843A; }

/* ── Responsive ── */
@media screen and (max-width: 1024px) {
  .nw-layout { padding: 32px 24px; gap: 24px; flex-direction: column; }
  .nw-sidebar { width: 100%; position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .nw-sidebar__section { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .nw-sidebar__contact { display: none; }
  .nw-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .nw-cat-btn { font-size: 13px; padding: 7px 8px; }
  .nw-sidebar__title { font-size: 11px; }
  .nw-card__body h3 { font-size: 15px; }
  .nw-card__body p { font-size: 13px; }
  .nw-card__meta, .nw-card__link { font-size: 12px; }
  .nw-card__cat { font-size: 10px; }
}

@media screen and (max-width: 768px) {

  /* layout — full width, remove side padding (sidebar handles its own) */
  .nw-layout { width: 100%; padding: 0 0 32px; gap: 0; }

  /* sidebar — horizontal scrollable category tabs */
  .nw-sidebar {
    width: 100%;
    display: block;
    position: static;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #e8e0d6;
    padding: 0;
  }

  /* hide recent posts & contact CTA on mobile — keep only categories */
  .nw-sidebar__section:not(:first-child) { display: none; }

  /* categories as horizontal tab strip */
  .nw-sidebar__section:first-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .nw-sidebar__title { display: none; }
  .nw-cat-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0 16px;
    gap: 4px;
    min-width: max-content;
  }
  .nw-cat-btn {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 0;
  }
  .nw-cat-btn.active {
    border-left-color: transparent;
    border-bottom-color: #B6843A;
    color: #12371D;
  }
  .nw-cat-count { font-size: 11px; }

  /* main content */
  .nw-main { width: 100%; padding: 16px 16px 0; }
  .nw-grid { grid-template-columns: 1fr; gap: 14px; }

  /* news card */
  .nw-card { border-radius: 8px; }
  .nw-card__cat { font-size: 10px; padding: 3px 8px; }
  .nw-card__body { padding: 14px 14px 12px; gap: 8px; }
  .nw-card__meta { font-size: 11px; }
  .nw-card__body h3 { font-size: 15px; line-height: 1.4; }
  .nw-card__body p { font-size: 13px; line-height: 1.7; }
  .nw-card__link { font-size: 12px; margin-top: 4px; }

  /* sidebar recent posts font fix (in case visible via other means) */
  .nw-recent-date { font-size: 11px; }
  .nw-recent-title { font-size: 13px; }
}

/* ============================================================
   NEWS DETAIL PAGE  (.nd-*)
============================================================ */
.nd-wrap {
  display: flex;
  align-items: flex-start;
  gap: 2.5vw;
  width: var(--bs-screen-xxl);
  margin: 0 auto;
  padding: 3.5vw 0;
}

/* ── Article ── */
.nd-article {
  flex: 1;
  min-width: 0;
}

.nd-article__meta {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  margin-bottom: 1.5vw;
  flex-wrap: wrap;
}

.nd-article__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75vw;
  color: #7A8C7D;
}

.nd-article__meta i { color: #B6843A; }

.nd-article__hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 2vw;
}

.nd-article__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.nd-article__body {
  font-size: 0.88vw;
  color: #3D4A40;
  line-height: 1.9;
}

.nd-article__lead {
  font-size: 1.0vw !important;
  color: #12371D;
  font-weight: 500;
  line-height: 1.75 !important;
  border-left: 4px solid #B6843A;
  padding-left: 1.2vw;
  margin-bottom: 1.8vw;
}

.nd-article__body h2 {
  font-family: Arial;
  font-size: 1.2vw;
  font-weight: 800;
  color: #12371D;
  margin: 2vw 0 0.8vw;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nd-article__body p {
  margin-bottom: 1.2vw;
}

.nd-article__body ul {
  margin: 0.8vw 0 1.2vw 1.5vw;
}

.nd-article__body ul li {
  margin-bottom: 0.5vw;
  font-size: 0.88vw;
  color: #3D4A40;
  line-height: 1.75;
  list-style: disc;
}

.nd-article__body ul li::marker { color: #B6843A; }

.nd-article__body a {
  color: #12371D;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nd-article__body a:hover { color: #B6843A; }

.nd-article__quote {
  background: #F7F5F0;
  border-left: 4px solid #12371D;
  margin: 2vw 0;
  padding: 1.3vw 1.8vw;
  border-radius: 0 8px 8px 0;
  font-size: 0.96vw;
  color: #12371D;
  font-style: italic;
  line-height: 1.7;
}

/* Article Tags */
.nd-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2.5vw;
  padding-top: 1.5vw;
  border-top: 1px solid #E8E4DC;
}

.nd-article__tags span {
  padding: 5px 14px;
  background: #F7F5F0;
  border: 1px solid #E8E4DC;
  border-radius: 4px;
  font-size: 0.67vw;
  color: #4A5568;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Prev / Next nav */
.nd-article__nav {
  display: flex;
  gap: 1.2vw;
  margin-top: 2.5vw;
  padding-top: 1.8vw;
  border-top: 1px solid #E8E4DC;
}

.nd-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1.2vw 1.4vw;
  border: 1px solid #E8E4DC;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .2s, background .2s;
  min-width: 0;
}

.nd-nav-btn:hover {
  border-color: #12371D;
  background: #F7F5F0;
}

.nd-nav-btn--next { justify-content: flex-end; text-align: right; }

.nd-nav-btn i {
  font-size: 1.3vw;
  color: #B6843A;
  flex-shrink: 0;
}

.nd-nav-btn div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.nd-nav-btn span {
  font-size: 0.63vw;
  color: #9AA5B1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nd-nav-btn strong {
  font-size: 0.79vw;
  color: #12371D;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Sidebar ── */
.nd-sidebar {
  width: 20vw;
  min-width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
}

.nd-sidebar__section {
  margin-bottom: 2vw;
  padding-bottom: 2vw;
  border-bottom: 1px solid #E8E4DC;
}

.nd-sidebar__section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.nd-sidebar__title {
  font-size: 0.68vw;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #B6843A;
  text-transform: uppercase;
  margin-bottom: 1vw;
}

/* Related list */
.nd-related-list { list-style: none; padding: 0; margin: 0; }

.nd-related-item {
  padding: 0.9vw 0;
  border-bottom: 1px solid #F0EDE7;
}
.nd-related-item:last-child { border-bottom: none; }

.nd-related-item a {
  display: flex;
  gap: 0.9vw;
  text-decoration: none;
}

.nd-related-img {
  width: 5.5vw;
  min-width: 70px;
  height: 3.8vw;
  min-height: 50px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.nd-related-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.nd-related-item a:hover .nd-related-img img { transform: scale(1.06); }

.nd-related-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nd-related-cat {
  font-size: 0.58vw;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #B6843A;
  text-transform: uppercase;
}

.nd-related-title {
  font-size: 0.71vw;
  color: #2D3748;
  line-height: 1.45;
  transition: color .2s;
}

.nd-related-item a:hover .nd-related-title { color: #12371D; }

.nd-related-date {
  font-size: 0.6vw;
  color: #9AA5B1;
}

/* Category list in sidebar */
.nd-cat-list {
  list-style: none;
  padding: 0; margin: 0;
}

.nd-cat-list li { border-bottom: 1px solid #F0EDE7; }
.nd-cat-list li:last-child { border-bottom: none; }

.nd-cat-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55vw 0;
  font-size: 0.75vw;
  color: #4A5568;
  text-decoration: none;
  transition: color .2s;
}

.nd-cat-list a:hover { color: #12371D; }

.nd-cat-list span {
  font-size: 0.63vw;
  color: #9AA5B1;
}

/* Sidebar CTA */
.nd-sidebar__cta {
  background: #12371D;
  border-radius: 8px;
  padding: 1.5vw;
}

.nd-sidebar__cta p {
  font-size: 0.79vw;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
  margin-bottom: 1vw;
}

.nd-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.6vw 1.2vw;
  background: #B6843A;
  color: #fff;
  font-size: 0.71vw;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s, gap .2s;
}

.nd-cta-btn:hover { background: #9a6d2e; gap: 10px; }

/* ── Responsive ── */
@media screen and (max-width: 1024px) {
  .nd-wrap { padding: 32px 24px; gap: 32px; flex-direction: column; max-width: 100%; }
  .nd-sidebar { width: 100%; position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .nd-sidebar__section { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .nd-sidebar__cta { grid-column: span 2; }
  .nd-article__meta span, .nd-article__body, .nd-article__body ul li { font-size: 14px; }
  .nd-article__lead { font-size: 16px !important; }
  .nd-article__body h2 { font-size: 18px; }
  .nd-article__quote { font-size: 15px; }
  .nd-nav-btn strong { font-size: 14px; }
  .nd-nav-btn span { font-size: 11px; }
  .nd-nav-btn i { font-size: 20px; }
  .nd-nav-btn { padding: 14px 16px; gap: 12px; }
  .nd-sidebar__title { font-size: 11px; }
  .nd-related-title { font-size: 13px; }
  .nd-related-cat, .nd-related-date { font-size: 11px; }
  .nd-cat-list a { font-size: 13px; padding: 8px 0; }
  .nd-sidebar__cta p { font-size: 13px; }
  .nd-cta-btn { font-size: 13px; padding: 10px 18px; }
}

@media screen and (max-width: 768px) {

  /* layout */
  .nd-wrap { width: 100%; padding: 0 0 32px; gap: 0; }

  /* article */
  .nd-article { padding: 20px 16px 0; }
  .nd-article__meta { gap: 10px; margin-bottom: 14px; }
  .nd-article__meta span { font-size: 12px; }
  .nd-article__hero { border-radius: 8px; margin-bottom: 20px; }
  .nd-article__body { font-size: 14px; line-height: 1.85; }
  .nd-article__lead { font-size: 15px !important; padding-left: 12px; margin-bottom: 16px; }
  .nd-article__body h2 { font-size: 17px; margin: 24px 0 10px; }
  .nd-article__body h3 { font-size: 15px; }
  .nd-article__body p { margin-bottom: 14px; }
  .nd-article__body ul { padding-left: 18px; gap: 6px; }
  .nd-article__body ul li { font-size: 14px; }
  .nd-article__quote {
    font-size: 14px;
    padding: 14px 16px;
    margin: 20px 0;
    border-left-width: 3px;
  }

  /* prev/next nav */
  .nd-article__nav {
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    padding: 20px 0 0;
  }
  .nd-nav-btn { padding: 12px 14px; gap: 10px; border-radius: 6px; }
  .nd-nav-btn span { font-size: 11px; }
  .nd-nav-btn strong { font-size: 13px; }
  .nd-nav-btn i { font-size: 18px; }
  .nd-nav-btn--next { justify-content: flex-start; text-align: left; }

  /* sidebar — show only related articles, hide rest */
  .nd-sidebar {
    width: 100%;
    padding: 20px 16px 0;
    position: static;
    display: block;
    min-width: 0;
  }
  .nd-sidebar__section:not(:first-child) { display: none; }
  .nd-sidebar__section:first-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .nd-sidebar__title { font-size: 11px; margin-bottom: 12px; }
  .nd-related-item { padding: 10px 0; }
  .nd-related-img { width: 64px; height: 48px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
  .nd-related-img img { width: 100%; height: 100%; object-fit: cover; }
  .nd-related-cat { font-size: 10px; }
  .nd-related-title { font-size: 13px; line-height: 1.4; }
  .nd-related-date { font-size: 11px; }
}

/* ════════════════════════════════════════════
   1440 FIX — FINAL (PRODUCTS + PRODUCT DETAIL)
   Must be LAST — these base styles appear after
   all earlier media query fix blocks.
════════════════════════════════════════════ */
@media screen and (min-width: 1025px) and (max-width: 1600px) {

  /* ── Products sidebar & cards ── */
  .pt-sidebar__title                              { font-size: 13px !important; }
  .pt-cat-btn                                     { font-size: 13px; }
  .pt-cat-count                                   { font-size: 12px; }
  .pt-sidebar__contact p                          { font-size: 13px; }
  .pt-sidebar__contact a                          { font-size: 13px; }
  .pt-card__body h3                               { font-size: 15px; }
  .pt-card__body p                                { font-size: 13px; line-height: 1.65; }
  .pt-card__link                                  { font-size: 13px; }
  .pt-card--sm .pt-card__body h3                  { font-size: 14px; }
  .pt-cat-list                                    { font-size: 13px; }

  /* ── Product Detail ── */
  .pd-breadcrumb-inner                            { font-size: 13px; }
  .pd-breadcrumb-inner a,
  .pd-breadcrumb-inner span                       { font-size: 13px; }
  .pd-info__name                                  { font-size: 22px; }
  .pd-info__desc                                  { font-size: 13px; line-height: 1.75; }
  .pd-tab-btn                                     { font-size: 13px; }
  .pd-spec-table td,
  .pd-spec-table th                               { font-size: 13px; }
  .pd-tab-panel p,
  .pd-tab-panel li                                { font-size: 13px; line-height: 1.75; }
  .pd-btn                                         { font-size: 14px; }
  .pd-related__head h2                            { font-size: 20px; }
  .pd-related__head a                             { font-size: 13px; }
  .pt-card--sm .pt-card__body p                   { font-size: 13px; }

  /* ── News list (.nw-*) ── */
  .nw-sidebar__title                              { font-size: 11px; }
  .nw-cat-btn                                     { font-size: 13px; }
  .nw-cat-count                                   { font-size: 11px; }
  .nw-recent-date                                 { font-size: 11px; }
  .nw-recent-title                                { font-size: 13px; line-height: 1.55; }
  .nw-sidebar__contact p                          { font-size: 13px; }
  .nw-sidebar__contact a                          { font-size: 13px; }
  .nw-card__cat                                   { font-size: 11px; }
  .nw-card__meta                                  { font-size: 12px; }
  .nw-card__body h3                               { font-size: 15px; }
  .nw-card__body p                                { font-size: 13px; line-height: 1.7; }
  .nw-card__link                                  { font-size: 13px; }

  /* ── News detail (.nd-*) ── */
  .nd-sidebar__title                              { font-size: 11px; }
  .nd-article__meta span                          { font-size: 13px; }
  .nd-article__body                               { font-size: 14px; }
  .nd-article__lead                               { font-size: 16px !important; }
  .nd-article__body h2                            { font-size: 18px; }
  .nd-article__body ul li                         { font-size: 14px; }
  .nd-article__quote                              { font-size: 15px; }
  .nd-article__tags span                          { font-size: 11px; }
  .nd-nav-btn strong                              { font-size: 14px; }
  .nd-nav-btn span                                { font-size: 11px; }
  .nd-related-cat                                 { font-size: 11px; }
  .nd-related-title                               { font-size: 13px; }
  .nd-related-date                                { font-size: 11px; }
  .nd-cat-list a                                  { font-size: 13px; }
  .nd-cat-list span                               { font-size: 11px; }
  .nd-sidebar__cta p                              { font-size: 13px; }
  .nd-cta-btn                                     { font-size: 13px; }
}