/* ============================================================
   DECHEM — public site styles
   Brand: deep blue #003B7A · orange #FF8A00 · white · light grey
   Mobile-first, accessible, RTL-aware
   ============================================================ */
:root {
  --blue: #003B7A;
  --blue-dark: #002a58;
  --blue-light: #e8f0f9;
  --orange: #FF8A00;
  --orange-dark: #e67a00;
  --grey-bg: #F5F7FA;
  --ink: #1c2b3a;
  --muted: #5b6b7b;
  --line: #dfe6ee;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(0, 59, 122, 0.10);
  --container: 1200px;
  --font: 'Montserrat', 'Arial', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--orange-dark); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 860px; }
/* Parked above the viewport, not at left:-9999px. In an RTL document an
   absolute box 9999px to the left is real scrollable width, and every Arabic
   page inherited a 10,000px document and a shifted viewport because of it. */
.skip-link { position: absolute; inset-inline-start: 0; top: -80px; background: var(--blue); color: #fff; padding: 10px 16px; z-index: 200; }
.skip-link:focus { top: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 40px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 24px; }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 6px; }
.nav-list a {
  display: block; padding: 10px 12px; font-weight: 600; font-size: 0.95rem;
  color: var(--ink); border-radius: 8px;
}
.nav-list a:hover { color: var(--blue); background: var(--blue-light); }
.nav-list a.is-active { color: var(--blue); background: var(--blue-light); }
.nav-actions { display: flex; align-items: center; }
.header-right { display: flex; align-items: center; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-weight: 700; font-size: 0.95rem;
  border: 2px solid transparent; border-radius: 8px; cursor: pointer;
  padding: 11px 22px; text-decoration: none; transition: all 0.15s ease;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-sample { background: var(--orange); color: #fff; }
.btn-sample:hover { background: var(--orange-dark); color: #fff; }
.btn-outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1eb75a; color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; border-radius: 10px; }
.btn-sm { padding: 7px 14px; font-size: 0.85rem; border-radius: 7px; }
.btn-sample-mobile { display: none; }

/* Language switch */
.lang-switch { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grey-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.lang-current:hover { border-color: var(--blue); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); list-style: none; margin: 0; padding: 6px;
  display: none; z-index: 120;
}
.lang-menu.is-open { display: block; }
.lang-menu a { display: block; padding: 8px 12px; border-radius: 6px; font-weight: 500; }
.lang-menu a:hover { background: var(--blue-light); }
.lang-menu a.is-current { color: var(--orange-dark); font-weight: 700; }

/* Mobile nav toggle */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 3px; background: var(--blue); border-radius: 2px; transition: 0.2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 60%, #1a5cab 100%); color: #fff; }
.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; padding: 64px 20px; }
.hero-kicker {
  display: inline-block; background: rgba(255, 138, 0, 0.18); color: #ffb45c;
  border: 1px solid rgba(255, 138, 0, 0.4); border-radius: 999px;
  padding: 6px 16px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  /* The strap line is long ("... WORLD-LEADING HYDROXY ACRYLIC MONOMER
     MANUFACTURER IN CHINA"). Let it wrap inside the pill instead of forcing
     one very wide line that would crowd the headline. */
  max-width: 100%; line-height: 1.45; border-radius: 18px;
}
.hero-title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; margin: 18px 0 14px; font-weight: 800; }
.hero-text { font-size: 1.05rem; opacity: 0.92; max-width: 60ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-media img { border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section-alt { background: var(--grey-bg); }
.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-kicker {
  display: inline-block; color: var(--orange-dark); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px;
}
.section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 12px; color: var(--blue); font-weight: 800; }
.section-text { color: var(--muted); font-size: 1rem; margin: 0; }
.muted { color: var(--muted); }

/* Page hero (inner pages) */
.page-hero { background: linear-gradient(135deg, var(--blue-dark), var(--blue)); color: #fff; padding: 44px 0 48px; }
.page-hero .page-title { color: #fff; }
.page-hero .page-intro { color: rgba(255, 255, 255, 0.92); max-width: 720px; }

/* ---------- Page header slogan ----------
   The About band was the one inner-page header with nothing under the
   heading: every other page prints its introduction there, About keeps
   its own in the body. One line of slogan fills that gap without adding
   to the band height — a hairline rule and a single capped line, so the
   band stays 320px in all seven languages. The rule is logical
   (inline-start) so it sits on the right in Arabic without a second rule. */
.page-hero-slogan {
  margin: 14px 0 0;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--orange);
  max-width: 640px;
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}
/* The proof line under the slogan: quieter, indented to the slogan's text
   (3px rule + 14px padding) so the two lines share one left edge. Trimmed to
   two lines — the band has a fixed height, and the longest translation
   (French) runs to three. */
.page-hero-slogan-sub {
  margin: 7px 0 0;
  padding-inline-start: 17px;
  max-width: 700px;
  font-size: clamp(0.82rem, 1.15vw, 0.9rem);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Uniform page header ----------
   The main pages all open on the same blue band, so the band is a fixed
   height and its contents are centred in it. Without this the band grew
   with the copy: a page with a long introduction came out at 412px and one
   with a title alone at 195px, and moving between pages felt like the
   page was being resized.

   The introduction is capped at three lines so a long one cannot push the
   band past its height. The text itself is unchanged — it is the display
   that is trimmed. */
.page-hero--uniform {
  height: 320px;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-hero--uniform .container { width: 100%; }
.page-hero--uniform .page-intro {
  margin-top: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: 10px 0; font-weight: 800; }
.breadcrumb { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb a { color: rgba(255, 255, 255, 0.9); }
.breadcrumb a:hover { color: #ffb45c; }
.breadcrumb span[aria-hidden] { opacity: 0.6; }

/* ---------- Page header photos ----------
   The products and about headers sit on a photograph with a gradient over
   it, so the white heading stays readable while the picture is still
   there. The base class carries the wash; each page brings its own
   picture, because the framing of the two is different. */
.page-hero-photo {
  position: relative;
  background-color: var(--blue-dark);
  background-repeat: no-repeat;
  background-size: cover;
}
.page-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 18, 44, 0.95) 0%,
    rgba(0, 22, 52, 0.90) 40%,
    rgba(0, 28, 64, 0.64) 66%,
    rgba(0, 32, 70, 0.48) 100%);
}
.page-hero-photo .container { position: relative; z-index: 1; }
.page-hero-photo--products {
  background-image: url("/assets/images/factory/products-hero-bg.webp?v=mw8osrdi");
  background-position: center 42%;
}
.page-hero-photo--about {
  background-image: url("/assets/images/factory/about-hero-bg.webp?v=mw8osrdi");
  background-position: center 40%;
}
.page-hero-photo--news {
  background-image: url("/assets/images/factory/news-hero-bg.webp?v=mw8osrdi");
  background-position: center 45%;
}
.page-hero-photo--request {
  background-image: url("/assets/images/factory/request-hero-bg.webp?v=mw8osrdi");
  background-position: center 45%;
}
.page-hero-photo--privacy {
  background-image: url("/assets/images/factory/privacy-hero-bg.webp?v=mw8osrdi");
  /* The banner is cut to the same shape as the band, so there is
     nothing to offset — the drums in the container sit where the crop
     put them. */
  background-position: center;
}
/* Right-to-left uses the same photographs flipped. The wash over the
   header is heaviest on the side the text sits, so a picture whose
   subject is on the right — the loaded container, the drums — would
   lose that subject under the darkest part of the wash. Flipping puts
   it on the light side. */
[dir="rtl"] .page-hero-photo--products {
  background-image: url("/assets/images/factory/products-hero-bg-rtl.webp?v=mw8osrdi");
}
[dir="rtl"] .page-hero-photo--about {
  background-image: url("/assets/images/factory/about-hero-bg-rtl.webp?v=mw8osrdi");
}
[dir="rtl"] .page-hero-photo--news {
  background-image: url("/assets/images/factory/news-hero-bg-rtl.webp?v=mw8osrdi");
}
[dir="rtl"] .page-hero-photo--request {
  background-image: url("/assets/images/factory/request-hero-bg-rtl.webp?v=mw8osrdi");
}
[dir="rtl"] .page-hero-photo--privacy {
  background-image: url("/assets/images/factory/privacy-hero-bg-rtl.webp?v=mw8osrdi");
}
[dir="rtl"] .page-hero-photo--contact {
  background-image: url("/assets/images/factory/contact-hero-bg-rtl.webp?v=mw8osrdi");
}
.page-hero-photo--contact {
  background-image: url("/assets/images/factory/contact-hero-bg.webp?v=mw8osrdi");
  background-position: center 55%;
}
[dir="rtl"] .page-hero-photo::before {
  background: linear-gradient(270deg,
    rgba(0, 18, 44, 0.95) 0%,
    rgba(0, 22, 52, 0.90) 40%,
    rgba(0, 28, 64, 0.64) 66%,
    rgba(0, 32, 70, 0.48) 100%);
}
@media (max-width: 860px) {
  /* The phone column is narrow, so the same paragraph runs to fourteen
     lines in Russian where it runs to four on a desktop. The band is
     taller here than on the desktop for that reason — it is still the
     same height on every page and in every language. */
  .page-hero--uniform {
    height: 380px;
  }
  .page-hero--uniform .page-intro {
    font-size: 0.9rem;
    line-height: 1.45;
    -webkit-line-clamp: 13;
    margin-top: 8px;
  }
  /* The slogan shares the line budget with the heading on a phone: the same
     size as the introduction above, and it is allowed to wrap to two lines
     inside the 380px band. */
  .page-hero-slogan {
    margin-top: 12px;
    padding-inline-start: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .page-hero-slogan-sub {
    margin-top: 10px;
    padding-inline-start: 15px;
    font-size: 0.8rem;
    line-height: 1.45;
  }
  /* The phone pictures are cut to the same square as the phone header,
     so there is nothing to offset. */
  .page-hero-photo--products {
    background-image: url("/assets/images/factory/products-hero-bg-mobile.webp?v=mw8osrdi");
    background-position: center;
  }
  .page-hero-photo--about {
    background-image: url("/assets/images/factory/about-hero-bg-mobile.webp?v=mw8osrdi");
    background-position: center;
  }
  .page-hero-photo--news {
    background-image: url("/assets/images/factory/news-hero-bg-mobile.webp?v=mw8osrdi");
    background-position: center;
  }
  .page-hero-photo--request {
    background-image: url("/assets/images/factory/request-hero-bg-mobile.webp?v=mw8osrdi");
    background-position: center;
  }
  .page-hero-photo--privacy {
    background-image: url("/assets/images/factory/privacy-hero-bg-mobile.webp?v=mw8osrdi");
    background-position: center;
  }
  .page-hero-photo--contact {
    background-image: url("/assets/images/factory/contact-hero-bg-mobile.webp?v=mw8osrdi");
    background-position: center;
  }
  [dir="rtl"] .page-hero-photo--products {
    background-image: url("/assets/images/factory/products-hero-bg-mobile-rtl.webp?v=mw8osrdi");
  }
  [dir="rtl"] .page-hero-photo--about {
    background-image: url("/assets/images/factory/about-hero-bg-mobile-rtl.webp?v=mw8osrdi");
  }
  [dir="rtl"] .page-hero-photo--news {
    background-image: url("/assets/images/factory/news-hero-bg-mobile-rtl.webp?v=mw8osrdi");
  }
  [dir="rtl"] .page-hero-photo--request {
    background-image: url("/assets/images/factory/request-hero-bg-mobile-rtl.webp?v=mw8osrdi");
  }
  [dir="rtl"] .page-hero-photo--privacy {
    background-image: url("/assets/images/factory/privacy-hero-bg-mobile-rtl.webp?v=mw8osrdi");
  }
  [dir="rtl"] .page-hero-photo--contact {
    background-image: url("/assets/images/factory/contact-hero-bg-mobile-rtl.webp?v=mw8osrdi");
  }
  /* The phone header is tall and the copy fills most of it, so the wash is
     lighter than on the desktop: the picture has to stay visible behind
     the text without the text losing its edge. */
  .page-hero-photo::before {
    background: linear-gradient(180deg,
      rgba(0, 18, 44, 0.90) 0%,
      rgba(0, 22, 52, 0.80) 45%,
      rgba(0, 28, 64, 0.58) 100%);
  }
}

/* ---------- Product cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.15s ease; }
.product-card:hover { transform: translateY(-4px); }
.product-card-link { color: inherit; display: block; }
.product-card-media { aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 18px; }
.product-card-title { margin: 0 0 4px; font-size: 1.08rem; color: var(--blue); }
.product-card-cas { margin: 0 0 8px; font-size: 0.82rem; color: var(--muted); font-family: monospace; }
.product-card-text { margin: 0 0 12px; font-size: 0.9rem; color: var(--muted); }
.product-card-cta { color: var(--orange-dark); font-weight: 700; font-size: 0.9rem; }

/* ---------- Icon / capability grids ---------- */
.icon-grid, .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.icon-cell, .cap-cell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.icon-cell-title, .cap-cell-title { margin: 0 0 8px; font-size: 1.02rem; color: var(--blue); }
.icon-cell-text, .cap-cell-text { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ---------- Process steps ---------- */
.process-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: step; }
.process-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: relative; }
.process-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; margin-bottom: 12px; }
.process-title { margin: 0 0 6px; font-size: 1rem; color: var(--blue); }
.process-text { margin: 0; font-size: 0.88rem; color: var(--muted); }
/* The sourcing process sits right after the packaging block, and both used
   to share the same grey, so the two read as one. A white band with a rule
   along the top separates them without introducing a third background
   colour — the inquiry block further down already uses the pale blue. */
.section-process {
  background: #fff;
  border-top: 1px solid var(--line);
}
.section-process .process-step {
  box-shadow: 0 4px 14px rgba(0, 59, 122, .07);
}
/* The FAQ follows the process block, and both are white, so the accordion
   would float on the same colour as the step cards above it. A pale grey
   band gives the page its alternating rhythm back. */
.section-faq { background: var(--grey-bg); }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.faq-q { cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--blue); list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; float: right; color: var(--orange); font-size: 1.2rem; }
.faq-item[open] .faq-q::after { content: '–'; }
.faq-a { padding: 0 20px 18px; color: var(--muted); }

/* ---------- Inquiry form ---------- */
.section-inquiry { background: var(--blue-light); }
.inquiry-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; }
.form-field label, .form-label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; color: var(--ink); }
.form-field input[type="text"], .form-field input[type="email"], .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 59, 122, 0.12); }
.form-field textarea { resize: vertical; }
.product-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.check-item:has(input:checked) { border-color: var(--blue); background: var(--blue-light); }
.check-item small { color: var(--muted); font-family: monospace; }
.form-note { font-size: 0.82rem; color: var(--muted); margin: 4px 0; }
.form-privacy { margin-bottom: 14px; }
.form-actions { margin-top: 6px; }
.form-error { color: #c0392b; font-weight: 700; margin-top: 10px; }
/* Same reasoning as .skip-link: clipped rather than pushed 9999px sideways,
   which an RTL document counts as scrollable width. */
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }

/* Alerts */
.alert { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; font-size: 0.95rem; }
.alert-success { background: #e9f9ef; border: 1px solid #2ecc71; color: #1a7a44; }
.alert-error { background: #fdecea; border: 1px solid #e74c3c; color: #a93226; }

/* ---------- Markdown body ---------- */
.md-body { font-size: 1rem; color: var(--ink); }
.md-body h1, .md-body h2, .md-body h3 { color: var(--blue); margin: 1.4em 0 0.6em; }
.md-body p { margin: 0.7em 0; }
.md-body ul, .md-body ol { padding-left: 1.4em; }
.md-body blockquote { border-left: 4px solid var(--orange); margin: 1em 0; padding: 4px 16px; background: #fff7ec; border-radius: 0 8px 8px 0; color: #5a4632; }
.md-table { overflow-x: auto; }
.md-table table, .tech-table table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; font-size: 0.94rem; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.md-table th { background: var(--blue); color: #fff; font-weight: 700; }
.md-table tr:nth-child(even) td { background: var(--grey-bg); }
[dir="rtl"] .md-table th, [dir="rtl"] .md-table td { text-align: right; }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.news-card-link { color: inherit; display: block; }
.news-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--grey-bg); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: 20px; }
.news-date { font-size: 0.8rem; color: var(--orange-dark); font-weight: 700; text-transform: uppercase; }
.news-card-title { margin: 6px 0 10px; font-size: 1.15rem; color: var(--blue); }
.news-card-text { margin: 0 0 12px; color: var(--muted); font-size: 0.92rem; }
.news-card-cta { color: var(--orange-dark); font-weight: 700; font-size: 0.9rem; }
.article-cover { border-radius: var(--radius); margin-bottom: 24px; }
.article-excerpt { font-size: 1.05rem; }
.article-body { font-size: 1.02rem; }
.article-cta { background: var(--blue-light); border-radius: var(--radius); padding: 28px; margin-top: 36px; text-align: center; }
.article-cta h2 { color: var(--blue); margin: 0 0 8px; }
.article-nav { margin-top: 28px; }

/* ---------- Contact ---------- */
/* One dark panel against the white form. The page used to be four identical
   white boxes on the left and a form on the right, which gave the eye no
   order to read in. */
.contact-grid {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 40px;
  align-items: stretch;
}
.contact-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px 26px;
  border-radius: 14px;
  background: linear-gradient(158deg, #092038 0%, #0e3559 52%, #124a7d 100%);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 44px rgba(9, 32, 58, 0.22);
  position: relative;
  overflow: hidden;
}
/* A soft light in the corner keeps the panel from reading as a flat block. */
.contact-panel::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -110px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 31, 0.28), transparent 68%);
  pointer-events: none;
}
.contact-panel-title {
  color: #fff;
  font-size: 1.08rem;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.contact-rows { list-style: none; margin: 0; padding: 0; }
.contact-rows li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-rows li:last-child { border-bottom: 0; padding-bottom: 2px; }
.contact-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffab52;
}
.contact-icon svg { width: 17px; height: 17px; }
.contact-icon-sm {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  vertical-align: -6px;
  margin-inline-end: 8px;
}
.contact-icon-sm svg { width: 13px; height: 13px; }
.contact-row { display: block; min-width: 0; }
.contact-row-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}
.contact-row-note { text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.38); }
.contact-row-value {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-row-value:hover { color: #ffab52; }
.contact-panel-sep { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 18px 0; }
.contact-panel > .contact-panel-sep:last-of-type { margin-top: auto; }
.contact-panel-sub {
  color: #fff;
  font-size: 0.95rem;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.contact-panel-address {
  font-style: normal;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.55;
  margin: 0;
}
.contact-panel-entity {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 10px 0 0;
}
.contact-panel-cta { color: #fff; font-weight: 600; margin: 0 0 12px; line-height: 1.5; }
.contact-panel-hint {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 14px 0 0;
}
/* Phone numbers and addresses keep their own direction inside an RTL page:
   without isolation "+86 539 3389986" is reordered to "3389986 539 86+". */
a[href^="tel:"],
a[href^="mailto:"],
a[href*="wa.me"],
.contact-row-value,
[dir="rtl"] .contact-phone-role {
  direction: ltr;
  unicode-bidi: isolate;
}
/* The form column: a small kicker over the heading, and the gap before the
   form tightened — the heading used to float above a field of white. */
.contact-kicker {
  display: inline-block;
  color: var(--orange-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.contact-form .section-title { margin: 0 0 10px; }
.contact-form .section-text { margin: 0 0 22px; }

/* The panel is as tall as the form column and does not float on scroll:
   a sticky panel left a short column drifting past a much longer one. */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-panel { padding: 24px 20px 22px; }
}

/* ---------- Documents ---------- */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doc-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.doc-version, .doc-date { display: block; font-size: 0.82rem; color: var(--muted); }
.badge { display: inline-block; background: var(--grey-bg); border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 700; }
.badge-sample { background: #fff3e0; color: #b26a00; border: 1px solid #ffd591; }
.doc-missing { background: #fff7ec; border: 1px dashed var(--orange); border-radius: var(--radius); padding: 24px; text-align: center; }

/* ---------- About ---------- */
/* Profile: copy beside the photograph of the site entrance, with the photo
   stretched to the height of the text so neither column ends in a gap. */
.about-profile {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 38px;
  align-items: stretch;
}
.about-profile .md-body > :first-child { margin-top: 0; }
.about-profile .md-body > :last-child { margin-bottom: 0; }
.about-profile-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blue-dark);
  box-shadow: var(--shadow);
  min-height: 320px;
}
.about-profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Detail blocks: the photo-card grid from the home page (16:9 picture, white
   card, heading, body). Markdown headings inside the card are restyled to the
   card title size so all six read the same. */
.about-photo-cards { gap: 22px; }
/* A 16:9 frame letterboxes these plant and lab photographs. 4:3 gives the
   picture the top half of the card instead of two-fifths, and the text below
   is set one notch smaller so the card does not grow by the same amount. */
.about-photo-cards .icon-cell-media { aspect-ratio: 4 / 3; flex: 0 0 auto; }
/* A card never paints outside its own border, whatever the row maths do. */
.about-photo-cards .icon-cell { overflow: hidden; }
.about-photo-cards .icon-cell-body { padding: 16px 20px 20px; }
.about-photo-cards .md-body { font-size: 0.88rem; line-height: 1.55; }
.about-photo-cards .md-body h2 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  color: var(--blue);
}
.about-photo-cards .md-body p { margin: 0 0 6px; color: var(--muted); }
.about-photo-cards .md-body > :last-child { margin-bottom: 0; }
/* One card ends in an action instead of empty space: the capacity figures are
   pending, so the card offers to send the documents. The action is pinned to
   the bottom of its card, which keeps the row visually level even though the
   note above it is two lines and its neighbours run to nine. */
.about-photo-cards .icon-cell-body { display: flex; flex-direction: column; }
.about-photo-cards .product-card-cta {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  align-self: stretch;
}
/* At three columns the six cards form two rows; equal row tracks make all six
   the same height instead of two rows of their own height. Below three
   columns the rows carry very different amounts of text, and forcing equal
   heights there would leave the short cards mostly empty. */
/* Between a laptop and a desktop, three columns of this copy get too narrow:
   the paragraphs run to fourteen lines and the cards turn into columns of
   text. Two columns there, three from 1200px up. */
/* .icon-grid already sets three columns further down the file, so the column
   count here is written with the same class on the element to win the tie. */
.icon-grid.about-photo-cards { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 821px) and (max-width: 1200px) {
  .icon-grid.about-photo-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1025px) {
  /* minmax(max-content, 1fr), not a bare 1fr. A bare 1fr lets the row shrink
     to min-content, so a long paragraph was squeezed past the card border and
     painted over the next row. max-content as the floor keeps every card at
     the height of its own text while both rows stay equal. */
  .about-photo-cards { grid-auto-rows: minmax(max-content, 1fr); }
}

/* Certificates: six cards in one row, the same component the home page uses.
   The card titles here carry the CAS number or the standard name, so they run
   to three or four lines in a 180px column; the grid stretches the cards to a
   common height and the title takes the slack. */
/* Whole words only inside the certificate names (see the template helper). */
.nb { white-space: nowrap; }
.about-certs .section-title { margin: 0 0 22px; }
.cert-brochure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.cert-brochure:hover, .cert-brochure:focus-visible {
  border-color: var(--orange);
  box-shadow: 0 8px 24px rgba(0, 59, 122, 0.1);
}
.cert-brochure-title { font-weight: 700; color: var(--blue); font-size: 0.98rem; }
.cert-brochure-cta { color: var(--orange-dark); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.about-entity-note { margin-top: 22px; }
.video-wrap { max-width: 960px; margin: 20px auto 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.video-wrap video { width: 100%; display: block; }
/* The company video heads the page body now, so it runs the full container
   width instead of the narrow column it shared with nothing. */
.video-wrap--wide { max-width: none; margin: 22px 0 0; }
.about-video-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 28px; flex-wrap: wrap; }
.about-video-head .section-title { margin: 0; }
.about-video-head .section-text { margin: 0; font-size: 0.92rem; }

/* ---------- About: quick facts ----------
   Four numbers a buyer looks for on an About page, printed as a strip under
   the profile copy so the block does not end in an empty half-screen. They
   are stored per language in the page content, not hard-coded here. */
.about-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 34px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.about-fact { margin: 0; padding: 0 20px; border-inline-start: 1px solid var(--line); }
.about-fact:first-child { padding-inline-start: 0; border-inline-start: 0; }
.about-fact dt {
  font-size: 1.5rem; line-height: 1.1; font-weight: 800;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.about-fact dd { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.35; }


/* ---------- Home product cards (2026 layout) ---------- */
.pcard {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(4, 31, 74, 0.10);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pcard:hover { box-shadow: 0 16px 40px rgba(4, 31, 74, 0.18); transform: translateY(-3px); }
.pcard-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.pcard-media { aspect-ratio: 1400 / 1020; overflow: hidden; background: #eaf2fb; }
.pcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 20px 16px 18px; }
.pcard-code {
  margin: 0;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #0a2a63;
}
.pcard-rule { display: block; width: 42px; height: 4px; border-radius: 2px; background: var(--orange); margin: 10px 0 12px; }
.pcard-name { margin: 0 0 12px; font-size: 0.95rem; font-weight: 600; line-height: 1.45; letter-spacing: -0.005em; color: #0a2a63; white-space: nowrap; }
.pcard-cas {
  align-self: flex-start;
  margin: 0 0 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #e6eefb;
  color: #0a2a63;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.pcard-feats { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: auto 0 18px; padding: 0; }
.pcard-feats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 4px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.25;
  color: #16324f;
}
.pcard-feats li + li { border-inline-start: 1px solid var(--line); }
.pcard-feats svg { width: 26px; height: 26px; color: #0a2a63; }
.pcard-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding-inline-end: 40px;
  border-radius: 999px;
  background: #0a2a63;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
  transition: background 0.15s ease;
}
.pcard-cta svg { width: 18px; height: 18px; position: relative; z-index: 1; }
.pcard-cta > span { position: relative; z-index: 1; }
.pcard-cta::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 46px;
  background: var(--orange);
  border-start-start-radius: 100% 50%;
  border-end-start-radius: 100% 50%;
}
.pcard:hover .pcard-cta { background: #08214e; }
[dir="rtl"] .pcard-code { text-align: right; }

@media (max-width: 700px) {
  .pcard-code { font-size: 1.7rem; }
  .pcard-body { padding: 18px 16px 16px; }
  .pcard-cta { height: 48px; font-size: 0.95rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 0;
  background: linear-gradient(180deg, #06214a 0%, #0a2a5c 46%, #0b2f66 100%);
}
.footer-wave { position: absolute; inset-inline: 0; bottom: 0; height: 130px; pointer-events: none; z-index: 0; }
.footer-wave svg { display: block; width: 100%; height: 100%; }
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.55fr 1fr 1.15fr 1.35fr;
  gap: 0;
  padding: 54px 20px 46px;
}
.footer-col { padding: 0 30px; min-width: 0; }
.footer-col:first-child { padding-inline-start: 0; }
.footer-col:last-child { padding-inline-end: 0; }
.footer-col + .footer-col { border-inline-start: 1px solid rgba(255, 255, 255, 0.14); }

/* The footer sits on a dark blue background, so it uses the pre-recoloured
   logo (white wordmark, orange accent) instead of a CSS filter — a filter
   would flatten the orange accent to white as well. */
.footer-logo { height: 37px; width: auto; }

.footer-tagline {
  margin: 18px 0 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  max-width: 24em;
}
.footer-rule { display: block; width: 46px; height: 3px; margin: 18px 0 16px; border-radius: 2px; background: var(--orange); }

.footer-social { display: flex; flex-wrap: nowrap; align-items: center; gap: 11px; list-style: none; margin: 0 0 18px; padding: 0; }
.footer-social li { flex: 0 0 auto; margin: 0; }
.footer-social a { display: block; width: 26px; height: 26px; opacity: 0.92; transition: opacity 0.15s ease, transform 0.15s ease; }
.footer-social a:hover, .footer-social a:focus-visible { opacity: 1; transform: translateY(-2px); }
.footer-social img { display: block; width: 100%; height: 100%; }

.footer-disclaimer { font-size: 0.78rem; font-style: italic; line-height: 1.5; color: rgba(255, 255, 255, 0.55); margin: 0; max-width: 32em; }

.footer-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 2px 0 16px;
}
.footer-heading-icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--orange); }
.footer-heading-icon path, .footer-heading-icon circle, .footer-heading-icon rect { stroke: currentColor; }

.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-links li { font-size: 0.92rem; }
.footer-links li + li { border-top: 1px solid rgba(255, 255, 255, 0.13); }
.footer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.35;
  transition: color 0.15s ease;
}
.footer-links a > span { min-width: 0; }
.footer-links a:hover, .footer-links a:focus-visible { color: #fff; }
.footer-code { unicode-bidi: isolate; white-space: nowrap; }
.footer-chev { width: 7px; height: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.footer-links a:hover .footer-chev { opacity: 1; stroke: var(--orange); }
[dir="rtl"] .footer-chev { transform: scaleX(-1); }

.footer-contact li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.92rem; line-height: 1.45; margin-bottom: 12px; }
.footer-contact li:last-child { margin-bottom: 0; }
.footer-contact-icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--orange); }
.footer-contact a { color: rgba(255, 255, 255, 0.9); }
.footer-contact a:hover { color: #fff; text-decoration: underline; }
.footer-address { color: rgba(255, 255, 255, 0.82); }
.footer-phone-role { color: rgba(255, 255, 255, 0.55); font-size: 0.92em; white-space: nowrap; }

.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 18px 0;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-end: 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 138, 0, 0), var(--orange));
}
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.72); flex-wrap: wrap; }
.footer-bottom-inner p { margin: 0; }
.footer-site { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-sep { color: rgba(255, 255, 255, 0.4); }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 34px; padding: 44px 20px 38px; }
  .footer-col { padding: 0; }
  .footer-col + .footer-col { border-inline-start: 0; }
  .footer-col:nth-child(even) { border-inline-start: 1px solid rgba(255, 255, 255, 0.14); padding-inline-start: 28px; }
  .footer-col:nth-child(odd) { padding-inline-end: 28px; }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; row-gap: 30px; padding: 38px 18px 34px; }
  .footer-col { padding: 0 !important; }
  .footer-col + .footer-col { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 26px; border-inline-start: 0; }
  .footer-logo { height: 32px; }
  .footer-tagline { font-size: 0.96rem; margin-top: 14px; }
  .footer-social { flex-wrap: wrap; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-wave { height: 90px; }
  .footer-sep { display: none; }
  .footer-site { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ---------- 404 ---------- */
.section-404 { text-align: center; padding: 90px 0; }
.err-code { font-size: 5rem; font-weight: 800; color: var(--blue); margin: 0; line-height: 1; }

/* ---------- RTL ---------- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .nav-list, [dir="rtl"] .hero-ctas { padding-right: 0; }
[dir="rtl"] .faq-q::after { float: left; }
[dir="rtl"] .doc-item { flex-direction: row-reverse; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; padding: 44px 20px; }
  .icon-grid, .cap-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  /* The profile photo goes above the copy and keeps its own 16:9 frame, so
     the block does not run to a full screen before the cards start. */
  .about-profile { grid-template-columns: 1fr; gap: 24px; }
  .about-profile-photo { min-height: 0; aspect-ratio: 16 / 9; }
  /* Four facts side by side stop fitting well before the phone: two rows of
     two, without the vertical divider rules. */
  .about-facts { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .about-fact { padding-inline-start: 0; border-inline-start: 0; }
  .cert-list { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .main-nav {
    position: fixed; inset: 72px 0 auto 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 20px 20px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); transform: translateY(-130%); transition: transform 0.2s ease;
  }
  .main-nav.is-open { transform: translateY(0); }
  .nav-list { flex-direction: column; }
  .nav-list a { padding: 13px 12px; font-size: 1rem; }
  .nav-actions { padding-top: 8px; }
  .nav-toggle { display: flex; }
  .btn-sample-mobile { display: none; }
}
@media (max-width: 560px) {
  .about-fact dt { font-size: 1.3rem; }
  .form-row { grid-template-columns: 1fr; }
  .product-checks { grid-template-columns: 1fr; }
  .icon-grid, .cap-grid, .process-steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 44px 0; }
  .inquiry-form { padding: 20px; }
  .btn-lg { width: 100%; }
  .brand-logo { height: 34px; }
}

/* ---------- Video: click-to-play overlay (no autoplay) ---------- */
.video-wrap { position: relative; }
.video-play-btn {
  position: absolute; inset: 0; margin: auto;
  width: 96px; height: 96px; max-width: 30vw; max-height: 30vw;
  border: none; border-radius: 50%;
  background: rgba(0, 59, 122, 0.92);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: transform .18s ease, background .18s ease;
}
.video-play-btn:hover { transform: scale(1.06); background: #FF8A00; }
.video-play-btn:focus-visible { outline: 3px solid #FF8A00; outline-offset: 3px; }
.video-play-icon {
  width: 0; height: 0; margin-left: 8px;
  border-left: 22px solid currentColor;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.video-play-label {
  position: absolute; left: 50%; top: calc(50% + 58px);
  transform: translateX(-50%);
  white-space: nowrap; font-size: .9rem; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.video-play-btn.is-hidden { display: none; }

/* ---------- Click-to-play YouTube embed ----------
   The frame fills the box the cover image occupied, so the video takes over
   the same space and the page never scrolls. */
.video-embed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Utility ---------- */
.is-hidden { display: none !important; }

/* ============================================================
   RTL support (Arabic)
   The layout uses logical alignment wherever possible; these rules
   mirror the remaining physical properties.
   ============================================================ */
[dir="rtl"] .header-inner,
[dir="rtl"] .footer-grid,
[dir="rtl"] .hero-inner,
[dir="rtl"] .product-hero,
[dir="rtl"] .form-row,
[dir="rtl"] .doc-item,
[dir="rtl"] .breadcrumb,
[dir="rtl"] .lang-menu,
[dir="rtl"] .article-nav {
  direction: rtl;
}
[dir="rtl"] .nav-list { padding-right: 0; padding-left: 0; }
[dir="rtl"] .hero-copy { text-align: right; }
[dir="rtl"] .section-head { text-align: right; }
[dir="rtl"] .breadcrumb span[aria-hidden="true"] { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .product-meta { justify-content: flex-end; }
[dir="rtl"] .doc-version, [dir="rtl"] .doc-date { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .badge-sample { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .form-label, [dir="rtl"] .form-field label { text-align: right; }
[dir="rtl"] .inquiry-form input[type="text"],
[dir="rtl"] .inquiry-form input[type="email"],
[dir="rtl"] .inquiry-form input[type="tel"],
[dir="rtl"] .inquiry-form select,
[dir="rtl"] .inquiry-form textarea { text-align: right; }
[dir="rtl"] .check-item { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .process-num { text-align: right; }
[dir="rtl"] .news-date, [dir="rtl"] .product-hero-tagline { text-align: right; }
[dir="rtl"] .footer-contact li { text-align: right; }
[dir="rtl"] .footer-bottom-inner { flex-direction: row-reverse; }
[dir="rtl"] .md-body p, [dir="rtl"] .md-body li { text-align: right; }
[dir="rtl"] .md-body table th, [dir="rtl"] .md-body table td { text-align: right; }
[dir="rtl"] .btn svg, [dir="rtl"] .card-cta svg { transform: scaleX(-1); }
[dir="rtl"] .video-play-icon { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .video-play-label { left: auto; right: 50%; transform: translateX(50%); }
/* On a phone the video is only ~200px tall, so the label that hangs 58px
   below the play button lands on the native control bar. The circle alone
   is unambiguous at that size; the button keeps its aria-label. */
@media (max-width: 560px) {
  .video-play-label { display: none; }
  .video-play-btn { width: 68px; height: 68px; max-width: 22vw; max-height: 22vw; }
}

/* ---------- Hero buttons on the dark gradient ----------
   The outline button uses deep blue on white elsewhere, which disappears
   on the dark hero background. Inside the hero it becomes a white outline. */
.hero .btn-outline {
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.hero .btn-outline:hover {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
}
.hero .btn-primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.hero .btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff;
}

/* ---------- Product hero layout ----------
   The template uses .product-hero / .product-hero-copy / .product-hero-media
   but these were never defined, so the image collapsed to the left. */
.product-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}
.product-hero-tagline {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 6px;
  font-size: 0.95rem;
}
.product-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  list-style: none; margin: 16px 0 0; padding: 0;
  color: rgba(255, 255, 255, 0.9); font-size: 0.95rem;
}
.product-meta li strong { color: #fff; font-weight: 700; margin-inline-end: 4px; }
.product-hero-media img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
@media (max-width: 900px) {
  .product-hero { grid-template-columns: 1fr; gap: 26px; }
  .product-hero-media { max-width: 460px; }
}

/* ---------- Front-end blocks that had no rule yet ---------- */
.page-hero-article .page-intro { margin-bottom: 0; }
.products-doc-note {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: var(--blue-light);
  border-inline-start: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  color: #24405c;
  font-size: 0.95rem;
}
[dir="rtl"] .products-doc-note { border-radius: 8px 0 0 8px; }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.contact-info { display: grid; gap: 18px; }
.contact-block {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.contact-heading { margin: 0 0 10px; font-size: 1.02rem; color: var(--blue); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contact-list li { font-size: 0.96rem; }
.contact-address { font-style: normal; color: var(--ink); line-height: 1.7; }
.whatsapp-cta { margin: 0 0 12px; color: var(--ink); }
.contact-form { display: grid; gap: 18px; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 26px; }
}


/* ---------- Full-bleed hero with a photographic background ----------
   The aerial factory photo is bright (mean luminance ~147), so the copy needs
   a scrim. The gradient is deepest on the left, where the text sits, and
   clears towards the right so the plant stays visible. RTL mirrors it. */
.hero-photo {
  position: relative;
  isolation: isolate;
  background: var(--blue-dark);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
}
.hero-bg picture,
.hero-bg img { display: block; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; object-position: 65% 50%; }

/* Scrim: brand blue on the text side, transparent over the plant. */
.hero-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(0, 26, 56, .95) 0%,
      rgba(0, 34, 72, .88) 26%,
      rgba(0, 40, 84,  .62) 46%,
      rgba(0, 48, 96,  .28) 64%,
      rgba(0, 55, 108, .12) 100%),
    linear-gradient(to top, rgba(0, 22, 48, .55) 0%, rgba(0, 22, 48, 0) 45%);
}
[dir="rtl"] .hero-photo::before {
  background:
    linear-gradient(260deg,
      rgba(0, 26, 56, .95) 0%,
      rgba(0, 34, 72, .88) 26%,
      rgba(0, 40, 84, .62) 46%,
      rgba(0, 48, 96, .28) 64%,
      rgba(0, 55, 108, .12) 100%),
    linear-gradient(to top, rgba(0, 22, 48, .55) 0%, rgba(0, 22, 48, 0) 45%);
}
[dir="rtl"] .hero-bg img { object-position: 35% 50%; }

/* Single column: the photo becomes the backdrop, copy stacks on top. */
.hero-photo .hero-inner {
  grid-template-columns: 1fr;
  padding: 78px 20px;
  /* Keep the same 1200px measure as the header, otherwise the hero copy
     starts at the viewport edge while the logo above it starts at the
     container edge — the two would not line up. */
  max-width: var(--container);
  margin: 0 auto;
}
.hero-photo .hero-copy { max-width: 640px; }
.hero-photo .hero-title { text-shadow: 0 2px 14px rgba(0, 20, 45, .5); }
.hero-photo .hero-text { text-shadow: 0 1px 10px rgba(0, 20, 45, .45); }
.hero-photo .hero-kicker {
  background: rgba(255, 138, 0, .18);
  border: 1px solid rgba(255, 168, 80, .45);
}

@media (max-width: 900px) {
  /* On a narrow screen the scrim has to cover more of the frame, otherwise
     the text sits over the bright lawn. */
  .hero-photo::before {
    background: linear-gradient(180deg,
      rgba(0, 26, 56, .90) 0%,
      rgba(0, 32, 68, .82) 40%,
      rgba(0, 40, 84, .70) 100%);
  }
  [dir="rtl"] .hero-photo::before {
    background: linear-gradient(180deg,
      rgba(0, 26, 56, .90) 0%,
      rgba(0, 32, 68, .82) 40%,
      rgba(0, 40, 84, .70) 100%);
  }
  .hero-photo .hero-inner { padding: 56px 20px; }
}

/* ---------- Hero subtitle ----------
   The product codes sit on their own line under the headline, so a visitor
   can read the category first and the exact products second. */
.hero-subtitle {
  margin: 0 0 16px;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ffb45c;
  opacity: 0.95;
}
[dir="rtl"] .hero-subtitle { letter-spacing: 0; }

@media (max-width: 640px) {
  .hero-subtitle { font-size: 0.95rem; margin-bottom: 12px; }
}

/* ---------- Hero strap line alignment ----------
   The strap line sits in a pill whose 16px of left padding pushes the words
   16px right of the container edge, so they do not line up with the DECHEM
   wordmark in the header. Shift the whole pill left by that padding amount:
   the text then starts exactly on the logo's left edge, and the pill's
   border still sits inside the content column. */
.hero-photo .hero-kicker {
  margin-left: -16px;
}
[dir="rtl"] .hero-photo .hero-kicker {
  margin-left: 0;
  margin-right: -16px;
}

/* ---------- Application industries: photo cards ----------
   Each industry gets a photograph of the process it serves. The cards keep
   the existing white surface so the block still reads as one set. */
.icon-grid-photo { gap: 22px; }
.icon-grid-photo .icon-cell {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.icon-cell-media {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--blue-dark);
}
.icon-cell-media picture,
.icon-cell-media img {
  display: block;
  width: 100%;
  height: 100%;
}
.icon-cell-media img {
  object-fit: cover;
  transition: transform .45s ease;
}
.icon-cell:hover .icon-cell-media img { transform: scale(1.04); }
.icon-cell-body { padding: 18px 20px 20px; flex: 1; }
.icon-grid-photo .icon-cell-title { margin: 0 0 7px; }
.icon-grid-photo .icon-cell-text { margin: 0; }

@media (max-width: 640px) {
  .icon-grid-photo { gap: 16px; }
  .icon-cell-body { padding: 15px 16px 17px; }
  .icon-grid-photo .icon-cell-title { font-size: 0.98rem; }
  .icon-grid-photo .icon-cell-text { font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .icon-cell-media img { transition: none; }
  .icon-cell:hover .icon-cell-media img { transform: none; }
}

/* ============ Home sections 5-7: Factory Strengths / Certificates / Packaging ============ */
/* 5. Factory Strengths */
.section-factory .stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 36px;
}
.stat-cell {
  flex: 1 1 160px;
  background: #fff;
  border: 1px solid #e3e9f0;
  border-top: 4px solid #FF8A00;
  border-radius: 8px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 59, 122, 0.05);
}
.stat-value {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: #003B7A;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 0.86rem;
  color: #526579;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.feature-cell {
  margin: 0;
  background: #fff;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 59, 122, 0.05);
}
.feature-cell img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.feature-cell figcaption { padding: 20px 22px 22px; }
.feature-title { margin: 0 0 8px; font-size: 1.12rem; color: #003B7A; }
.feature-text { margin: 0; font-size: 0.93rem; color: #526579; }

/* 6. Global Certificates */
.section-certificates { background: #fff; }
.cert-grid {
  display: grid;
  /* All six certificates sit on one row: three REACH registrations first,
     then the three ISO management-system certificates. */
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 10px 16px;
  background: #fff;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.cert-card:hover, .cert-card:focus-visible {
  box-shadow: 0 8px 24px rgba(0, 59, 122, 0.14);
  transform: translateY(-2px);
  border-color: #FF8A00;
}
.cert-thumb-wrap {
  width: 100%;
  max-width: 158px;
  margin-bottom: 10px;
}
.cert-thumb {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #eef2f6;
  border-radius: 4px;
  background: #fff;
}
.cert-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #003B7A;
}
.cert-subtitle { font-size: 0.8rem; color: #526579; margin-top: 3px; line-height: 1.4; }
/* The ISO certificates carry the same gold ornamented frame as the REACH
   ones, painted onto the artwork; the two groups read as one set. */
.cert-card-reach .cert-thumb,
.cert-card-iso .cert-thumb { border-color: #e6d3a8; }

/* 7. Packaging & Global Shipping */
.section-packaging .pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.pkg-photo picture { display: block; }
.pkg-photo img {
  width: 100%;
  height: auto;
  display: block;
  /* The packaging photo is a 3:2 shot of the 200 kg drums, the IBC tote and
     the ISO tanks standing in front of the plant. Its own ratio is kept —
     cropping it would cut a container off. */
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 59, 122, 0.10);
}
.pkg-item {
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #fff;
  border-left: 4px solid #FF8A00;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 59, 122, 0.05);
}
.pkg-item-title { margin: 0 0 5px; font-size: 1.05rem; color: #003B7A; }
.pkg-item-text { margin: 0; font-size: 0.92rem; color: #526579; }
.pkg-note {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: #003B7A;
  background: #EAF1FB;
  border-radius: 6px;
  padding: 12px 16px;
}

/* RTL mirroring */
[dir="rtl"] .pkg-item { border-left: none; border-right: 4px solid #FF8A00; }

/* ---------- Certificates: one row of six on desktop ----------
   6 columns -> 3 columns -> 2 columns. The certificates are portrait
   documents, so the row breaks to three and then two rather than one,
   which keeps the block compact on a phone. */
@media (max-width: 1080px) {
  .cert-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cert-thumb-wrap { max-width: 200px; }
}
@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr; }
  /* Needs the .section-packaging prefix: the base rule
     `.section-packaging .pkg-grid` is more specific than a bare
     `.pkg-grid`, so without it the single-column override is ignored. */
  .section-packaging .pkg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stats-bar { gap: 10px; }
  .stat-cell { flex: 1 1 140px; padding: 16px 12px; }
  .stat-value { font-size: 1.35rem; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cert-card { padding: 12px 10px 16px; }
  .cert-thumb-wrap { max-width: 150px; }
  /* On a phone the photo keeps its own ratio; object-fit crops nothing
     because the box matches the picture. */
  .pkg-photo img { aspect-ratio: 1.5 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-card { transition: none; }
  .cert-card:hover, .cert-card:focus-visible { transform: none; }
}

/* ---------- Inquiry form: WhatsApp country code ----------
   The dialling code is shown as a fixed prefix inside the field. It is a
   separate element rather than part of the input value, so the customer can
   see where the code came from and the number itself stays editable. */
.wa-field {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wa-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 59, 122, 0.12);
}
.wa-field input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
}
.wa-field input[type="tel"]:focus { outline: none; box-shadow: none; }
.wa-dial {
  display: none;
  align-items: center;
  padding: 12px 0 12px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(11, 59, 122, 0.05);
  border-right: 1.5px solid var(--line);
  white-space: nowrap;
  user-select: none;
}
.wa-dial-on { display: flex; }
.wa-hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
[dir="rtl"] .wa-field input[type="tel"] { text-align: right; }
[dir="rtl"] .wa-dial {
  padding: 12px 14px 12px 0;
  border-right: 0;
  border-left: 1.5px solid var(--line);
}

/* ---------- Manufacturing & service capabilities: photo banner ----------
   The plant-and-port photograph used to fill the whole section as a
   background. It was the only dark band in the middle of the page and it
   cut the light, alternating rhythm of the home page in half. The picture
   now sits in its own rounded banner between the heading and the cards, so
   it is seen whole and the section reads like the ones around it. */
.cap-banner {
  margin: 0 0 30px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 59, 122, .12);
  background: var(--blue);
}
.cap-banner img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  /* The banner is cropped to the frame's own ratio, so the whole height of
     the scene stays in view — the tanks, the drums, the forklift and the
     port. The frame is only a touch narrower than the photograph, so the
     sides come off, not the top. */
  object-position: center 50%;
}

@media (max-width: 860px) {
  .cap-banner { margin-bottom: 22px; }
  .cap-banner img { height: 300px; object-position: center 50%; }
}

/* Home product cards: one column on phones (must stay last to win over the
   generic .product-grid breakpoint above). */
@media (max-width: 620px) {
  .product-grid.pcard-grid { grid-template-columns: 1fr; }
  .product-grid.pcard-grid .pcard-cta { font-size: 1rem; padding-inline-end: 44px; }
}

/* ---------- Home typography system ----------
   One kicker, one section title, one card title, one card copy size and one
   grey. Everything below overrides the per-component values that had drifted
   apart (card titles ranged 15.2–17.9px, copy ranged 12.8–16px, three
   different greys). */
.page-home .section { padding: 72px 0; }
.page-home .section-head { margin-bottom: 44px; }

.page-home .section-kicker {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 10px;
}
.page-home .section-title {
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue);
  margin: 0 0 14px;
}
.page-home .section-text { font-size: 1rem; line-height: 1.7; color: var(--muted); }

/* card titles */
.page-home .icon-cell-title,
.page-home .cap-cell-title,
.page-home .feature-title,
.page-home .cert-title,
.page-home .pkg-item-title,
.page-home .process-title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--blue);
}

/* card copy */
.page-home .icon-cell-text,
.page-home .cap-cell-text,
.page-home .feature-text,
.page-home .pkg-item-text,
.page-home .process-text {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--muted);
}
.page-home .cert-subtitle,
.page-home .stat-label,
.page-home .pkg-note {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

/* prose */
.page-home .faq-q { font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--blue); }
.page-home .faq-a { font-size: 1rem; line-height: 1.7; color: var(--muted); }

/* product card: use the brand palette, not bespoke blues */
.page-home .pcard-code { color: var(--blue); }
.page-home .pcard-name { color: var(--blue); letter-spacing: 0; }
.page-home .pcard-cas { color: var(--blue); background: var(--blue-light); }
.page-home .pcard-feats li { color: var(--ink); }
.page-home .pcard-feats svg { color: var(--blue); }
.page-home .pcard-cta { background: var(--blue); }
.page-home .pcard:hover .pcard-cta { background: var(--blue-dark); }

/* ---------- Home style pass (reference layout) ---------- */

/* section kicker with the flanking rules from the reference */
.page-home .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--orange-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.page-home .section-kicker::before,
.page-home .section-kicker::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.page-home .section-head { max-width: 760px; margin: 0 auto 46px; }

/* hero proof points */
.page-home .hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 20px 0 4px;
  padding: 0;
}
.page-home .hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.page-home .hero-points svg { width: 18px; height: 18px; color: var(--orange); flex: 0 0 auto; }

/* one card chrome for every card on the home page */
.page-home .icon-cell,
.page-home .cap-cell,
.page-home .feature-cell,
.page-home .cert-card,
.page-home .pkg-item,
.page-home .process-step {
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(4, 31, 74, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.page-home .icon-cell:hover,
.page-home .cap-cell:hover,
.page-home .cert-card:hover,
.page-home .process-step:hover {
  border-color: #d5e0ee;
  box-shadow: 0 12px 28px rgba(4, 31, 74, 0.10);
  transform: translateY(-2px);
}
.page-home .icon-cell { overflow: hidden; padding: 0; }
.page-home .icon-cell-body { padding: 20px 22px 22px; }
.page-home .cap-cell { padding: 24px; }
.page-home .process-step { padding: 22px; }
.page-home .pkg-item { padding: 18px 20px; }

/* packaging rows keep the orange edge from the reference */
.page-home .pkg-item { border-inline-start: 3px solid var(--orange); }

/* statistics bar cards */
.page-home .stat-cell {
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(4, 31, 74, 0.04);
}

@media (max-width: 700px) {
  .page-home .section-kicker::before,
  .page-home .section-kicker::after { width: 22px; }
  .page-home .hero-points { gap: 8px 18px; font-size: 0.9rem; }
}

/* certificate scans already carry their own frame — no second border */
.page-home .cert-thumb { border: 0; border-radius: 0; }

/* ---------- Products list card (code headline) ---------- */
.product-card-code {
  margin: 0 0 9px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--blue);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
[dir="rtl"] .product-card-code { text-align: right; }

.product-card-rule {
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--orange);
  margin: 0 0 12px;
}

.product-card-name {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--blue);
  white-space: nowrap;
}

.product-card-cas { font-family: inherit; }

/* four across only while the single-line names fit */
@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* one product per row on phones: the single-line names need the width */
@media (max-width: 620px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ---------- About page (reference layout) ---------- */
.page-about .section-title {
  font-size: clamp(1.55rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue);
}
.page-about .section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
  margin: 14px 0 0;
}

/* headline figures get the icon treatment from the reference */
.page-about .about-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.page-about .about-fact { padding: 22px 24px 20px; border-top: 1px solid var(--line); }
.page-about .about-fact + .about-fact { border-inline-start: 1px solid var(--line); }
.page-about .about-fact-icon { display: block; width: 22px; height: 22px; color: var(--blue); margin-bottom: 10px; }
.page-about .about-fact-icon svg { display: block; width: 100%; height: 100%; }
.page-about .about-fact dt { font-size: 1.32rem; font-weight: 800; color: var(--blue); line-height: 1.1; }
.page-about .about-fact dd { margin: 6px 0 0; font-size: 0.84rem; color: var(--muted); }

/* one card chrome, same as the home page */
.page-about .icon-cell {
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(4, 31, 74, 0.04);
  overflow: hidden;
  padding: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.page-about .icon-cell:hover {
  border-color: #d5e0ee;
  box-shadow: 0 12px 28px rgba(4, 31, 74, 0.10);
  transform: translateY(-2px);
}
.page-about .icon-cell-body { padding: 22px 22px 24px; }
.page-about .about-card-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
  color: var(--blue);
}
.page-about .about-card-icon svg { display: block; width: 100%; height: 100%; }
.page-about .icon-cell-body .md-body h2,
.page-about .icon-cell-body .md-body h3 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue);
}
.page-about .icon-cell-body .md-body p {
  margin: 0 0 10px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--muted);
}
.page-about .icon-cell-body .md-body p:last-child { margin-bottom: 0; }
.page-about .product-card-cta { display: inline-block; margin-top: 6px; }

@media (max-width: 900px) {
  .page-about .about-facts { grid-template-columns: repeat(2, 1fr); }
  .page-about .about-fact:nth-child(3) { border-inline-start: 0; }
}
@media (max-width: 560px) {
  .page-about .about-facts { grid-template-columns: 1fr; }
  .page-about .about-fact + .about-fact { border-inline-start: 0; }
}

/* About cards: one per row on phones so the copy stays readable */
@media (max-width: 700px) {
  .icon-grid.about-photo-cards { grid-template-columns: 1fr; }
}

/* ---------- About headline figures: full-width navy band ---------- */
.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: linear-gradient(90deg, #071f4a 0%, #0a2a63 55%, #0d3170 100%);
  margin: 44px calc(50% - 50vw) 0;
  padding: 0 max(20px, calc(50vw - 600px + 20px));
}
.page-about .about-fact {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 26px 10px 26px 0;
  border: 0;
  border-top: 0;
}
.page-about .about-fact-icon { grid-column: 1; grid-row: 1 / span 2; }
.page-about .about-fact dt { grid-column: 2; grid-row: 1; }
.page-about .about-fact dd { grid-column: 2; grid-row: 2; }
.page-about .about-fact + .about-fact { border-inline-start: 1px solid rgba(255, 255, 255, 0.14); padding-inline-start: 24px; }
.page-about .about-fact-icon {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  margin: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
}
.page-about .about-fact-icon svg { width: 22px; height: 22px; }
.page-about .about-fact dt { font-size: 1.28rem; font-weight: 800; color: #fff; line-height: 1.1; }
.page-about .about-fact dd { margin: 4px 0 0; font-size: 0.86rem; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 900px) {
  .page-about .about-facts { grid-template-columns: repeat(2, 1fr); padding-inline: 24px; }
  .page-about .about-fact:nth-child(3) { border-inline-start: 0; }
  .page-about .about-fact:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}
@media (max-width: 560px) {
  .page-about .about-facts { grid-template-columns: 1fr; }
  .page-about .about-fact { padding-inline-start: 0 !important; }
  .page-about .about-fact + .about-fact { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

/* ---------- Contact page deltas ---------- */
.page-contact .page-title::after {
  content: "";
  display: block;
  width: 46px; height: 4px;
  border-radius: 2px;
  background: var(--orange);
  margin-top: 16px;
}
.page-contact .contact-panel-title { position: relative; padding-bottom: 16px; }
.page-contact .contact-panel-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 46px; height: 3px;
  border-radius: 2px;
  background: var(--orange);
}
.page-contact .contact-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.page-contact .contact-icon svg { width: 19px; height: 19px; }
.page-contact .contact-icon-sm { width: 22px; height: 22px; border-radius: 6px; background: transparent; }
.page-contact .contact-icon-sm svg { width: 14px; height: 14px; }
.page-contact .contact-kicker { display: inline-flex; align-items: center; gap: 10px; }
.page-contact .contact-kicker::after {
  content: "";
  width: 40px; height: 2px;
  background: var(--orange);
}
.page-contact .inquiry-form button[type="submit"],
.page-contact .contact-form button[type="submit"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  padding-inline: 30px;
}
.page-contact .inquiry-form button[type="submit"]:hover,
.page-contact .contact-form button[type="submit"]:hover { background: var(--orange-dark); border-color: var(--orange-dark); }

.page-contact .contact-form button[type="submit"]::after {
  content: "\2192";
  margin-inline-start: 10px;
}

/* ---------- Products list polish ---------- */
.page-products .page-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--orange);
  margin-top: 16px;
}

.page-products .product-grid { gap: 24px; }

.page-products .product-card {
  border: 1px solid #e6ecf3;
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(4, 31, 74, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-products .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(4, 31, 74, 0.13);
}

.page-products .product-card-media { border-radius: 10px; margin: 10px 10px 0; overflow: hidden; }

.page-products .product-card-body { padding: 20px 22px 22px; }

.page-products .product-card-code { font-size: 2.2rem; margin-bottom: 10px; }

.page-products .product-card-name { font-size: 1rem; margin-bottom: 10px; }

.page-products .product-card-cas { font-size: 0.86rem; letter-spacing: 0.01em; margin-bottom: 12px; }

.page-products .product-card-text { font-size: 0.94rem; line-height: 1.65; margin-bottom: 16px; }

.page-products .product-card-cta { font-size: 0.95rem; }

/* the document note reads as an inline notice */
.page-products .products-doc-note,
.page-products .doc-note {
  background: #eef4fb;
  border: 1px solid #dfe9f5;
  border-inline-start: 3px solid var(--blue);
  border-radius: 12px;
  padding: 18px 22px;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .page-products .product-card-code { font-size: 1.9rem; }
  .page-products .product-card-body { padding: 16px 16px 18px; }
  .page-products .product-card-media { margin: 8px 8px 0; }
}

/* About cards: uniform height — content-sized rows and equal photo ratio */
.page-about .icon-grid.about-photo-cards { grid-auto-rows: 1fr; align-items: stretch; }
.page-about .icon-cell-media { aspect-ratio: 16 / 10; }
.page-about .icon-cell-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-about .icon-cell-body { padding: 20px 22px 20px; }
.page-about .icon-cell-body .md-body p { margin-bottom: 8px; }

/* ---------- News & Blog cards (reference layout) ---------- */
.page-news .page-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--orange);
  margin-top: 16px;
}

.page-news .news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.page-news .news-card {
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(4, 31, 74, 0.06);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-news .news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(4, 31, 74, 0.12);
}
.page-news .news-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }

.page-news .news-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-light); }
.page-news .news-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.page-news .news-date {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(4, 31, 74, 0.12);
}
.page-news .news-date svg { width: 14px; height: 14px; }

.page-news .news-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }

.page-news .news-tag {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fdf1dd;
  color: #9a5b00;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-news .news-card-title {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--blue);
}
.page-news .news-card-text {
  margin: 0 0 16px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-news .news-card-cta {
  margin-top: auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--orange);
}

@media (max-width: 820px) {
  .page-news .news-grid { grid-template-columns: 1fr; gap: 20px; }
  .page-news .news-card-title { font-size: 1.05rem; }
}

/* ---------- Inner-page banner: one format everywhere ----------
   English inner pages already shared the 320px band, the 38.4px H1 and the
   16px intro; only the orange rule under the heading was applied per page
   (products, contact, news) and missing on the rest. */
.page-hero .page-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--orange);
  margin-top: 14px;
}
/* About already carries an orange rule beside its slogan — no second one. */
.page-about .page-hero .page-title::after { display: none; }

.page-hero--uniform .page-title { margin: 8px 0 0; }
.page-hero--uniform .page-intro { margin-top: 14px; max-width: 780px; }

/* About: capacity card checklist + 3x2 certificate grid */
.page-about .about-card-title {
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue);
}
.page-about .about-capacity-list { list-style: none; margin: 0 0 16px; padding: 0; }
.page-about .about-capacity-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.4;
}
.page-about .about-capacity-list svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--orange); }
.page-about .about-capacity-list em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 0.9em; }

.page-about .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1180px; }
.page-about .cert-grid .cert-thumb { width: 100%; height: auto; }

@media (max-width: 900px) {
  .page-about .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page-about .cert-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact panel refinements (reference) ---------- */
.page-contact .contact-panel-title {
  position: relative;
  padding-inline-start: 16px;
  padding-bottom: 0;
}
.page-contact .contact-panel-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--orange);
}
.page-contact .contact-panel-title::after { display: none; }

.page-contact .contact-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: var(--orange);
}
.page-contact .contact-icon svg { width: 20px; height: 20px; }
.page-contact .contact-icon-sm {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: transparent;
  color: var(--orange);
}
.page-contact .contact-icon-sm svg { width: 16px; height: 16px; }

.page-contact .contact-panel-cta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.page-contact .contact-panel-cta p { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.page-contact .contact-icon-headset {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  color: var(--orange);
}
.page-contact .contact-icon-headset svg { width: 26px; height: 26px; }

.page-contact .btn-whatsapp::after { content: "\2192"; margin-inline-start: 10px; }

/* About cards: compact pass */
.page-about .icon-cell-media { aspect-ratio: 16 / 9; }
.page-about .icon-cell-body { padding: 20px 24px 22px; }
.page-about .icon-cell-body .md-body h2,
.page-about .icon-cell-body .md-body h3 { font-size: 0.98rem; margin-bottom: 8px; }
.page-about .icon-cell-body .md-body p { font-size: 0.92rem; line-height: 1.62; margin-bottom: 8px; }
.page-about .icon-cell-body .md-body p:last-child { margin-bottom: 0; }

/* capacity checklist: tighter rhythm, CTA sits on the card floor */
.page-about .about-capacity-list { margin: 0 0 14px; }
.page-about .about-capacity-list li { padding: 4px 0; font-size: 0.95rem; }
.page-about .icon-cell-body > .product-card-cta,
.page-about .icon-cell-body > .pcard-cta { margin-top: auto; }
.page-about .icon-cell-body { display: flex; flex-direction: column; }

/* ---------- Request Sample: framed form card ---------- */
.page-request .section-inquiry {
  background:
    radial-gradient(1200px 400px at 8% 20%, rgba(0, 59, 122, 0.05), transparent 60%),
    radial-gradient(900px 380px at 92% 70%, rgba(0, 59, 122, 0.05), transparent 60%),
    linear-gradient(180deg, #eef4fb 0%, #e9f1fa 100%);
}
.page-request .container-narrow { max-width: 1080px; }

.page-request .sample-card {
  background: #fff;
  border: 1px solid #e3eaf4;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(4, 31, 74, 0.10);
  padding: 30px 34px 34px;
}
.page-request .sample-card-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid #e8eef6;
  flex-wrap: wrap;
}
.page-request .sample-card-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fdf0e2;
  color: var(--orange);
}
.page-request .sample-card-icon svg { width: 26px; height: 26px; }
.page-request .sample-card-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blue);
}
.page-request .sample-card-sep {
  width: 1px;
  height: 34px;
  background: #e3eaf4;
  flex: 0 0 auto;
}
.page-request .sample-card-sub {
  margin: 0;
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.55;
}

.page-request .inquiry-form .form-grid { gap: 18px 26px; }

@media (max-width: 700px) {
  .page-request .sample-card { padding: 22px 18px 24px; border-radius: 14px; }
  .page-request .sample-card-title { font-size: 1.25rem; }
  .page-request .sample-card-sep { display: none; }
  .page-request .sample-card-sub { flex-basis: 100%; font-size: 0.92rem; }
}

.page-request .sample-card .inquiry-form {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.page-request .sample-card button[type="submit"],
.page-request .sample-card .btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  padding-inline: 30px;
}
.page-request .sample-card button[type="submit"]:hover,
.page-request .sample-card .btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}
.page-request .sample-card button[type="submit"]::after {
  content: "\2192";
  margin-inline-start: 10px;
}

/* ---------- VR Tour nav item (external) ---------- */
.nav-list a.nav-external {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.nav-list a.nav-external svg { width: 12px; height: 12px; opacity: 0.6; }
.nav-list a.nav-external:hover svg { opacity: 1; }

/* six items in the bar: never let a label wrap, and buy back room on
   narrower desktops (the hamburger only appears at 1024px and below). */
.nav-list > li > a { white-space: nowrap; }
.btn-sample { white-space: nowrap; }
.nav-list a.nav-external { white-space: nowrap; }
@media (max-width: 1240px) {
  .nav-list { gap: 4px; }
  .nav-list a { font-size: 0.86rem; padding: 10px 9px; }
  .btn-sample { padding: 11px 16px; font-size: 0.86rem; }
}

/* Certificates: match the detail cards above (equal rows, larger preview) */
.page-about .cert-grid { grid-auto-rows: 1fr; align-items: stretch; }
.page-about .cert-card { height: 100%; justify-content: flex-start; }
.page-about .cert-thumb-wrap { max-width: 294px; }
.page-about .cert-card .cert-title { margin-top: 4px; }

@media (max-width: 900px) {
  .page-about .cert-thumb-wrap { max-width: 240px; }
}
@media (max-width: 560px) {
  .page-about .cert-thumb-wrap { max-width: 220px; }
}

/* ---------- Contact layout pass (reference sheet) ---------- */
.page-contact .section { padding: 56px 0 72px; }

.page-contact .contact-grid {
  grid-template-columns: 0.92fr 1.08fr;
  gap: 44px;
  align-items: stretch;
}

/* left panel */
.page-contact .contact-panel {
  padding: 30px 30px 28px;
  border-radius: 14px;
}
.page-contact .contact-panel-title {
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
}
.page-contact .contact-rows { margin: 0; }
.page-contact .contact-rows li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.page-contact .contact-rows li:first-child { border-top: 0; padding-top: 4px; }
.page-contact .contact-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-contact .contact-row-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.page-contact .contact-row-note { letter-spacing: 0.02em; text-transform: none; font-weight: 600; }
.page-contact .contact-row-value {
  font-size: 1.06rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  letter-spacing: 0.005em;
}

.page-contact .contact-panel-sep { margin: 20px 0; }
.page-contact .contact-panel-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
}
.page-contact .contact-panel-address {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  font-style: normal;
}
.page-contact .contact-panel-entity {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

/* heads-up + button */
.page-contact .contact-panel-cta { margin-bottom: 16px; }
.page-contact .contact-panel-cta p { font-size: 0.98rem; font-weight: 400; color: rgba(255, 255, 255, 0.85); line-height: 1.5; }
.page-contact .contact-panel-cta p strong { display: block; font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: 2px; }

.page-contact .btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  background: #25d366;
  color: #0b3d20;
  font-size: 1rem;
  font-weight: 700;
}
.page-contact .btn-whatsapp:hover { background: #1fbe5b; }
.page-contact .contact-panel-hint { margin: 14px 0 0; font-size: 0.72rem; line-height: 1.5; color: rgba(255, 255, 255, 0.45); }

/* right column */
.page-contact .contact-kicker { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--orange-dark); }
.page-contact .contact-form .section-title { font-size: 2rem; margin: 6px 0 0; }
.page-contact .contact-form .section-text { margin: 14px 0 22px; }
.page-contact .contact-form .section-text p { margin: 0; font-size: 0.98rem; line-height: 1.7; color: var(--muted); }

.page-contact .contact-form .inquiry-form {
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #fff;
  padding: 26px 26px 24px;
  box-shadow: 0 10px 30px rgba(4, 31, 74, 0.05);
}
.page-contact .contact-form .form-grid { gap: 18px 24px; }
.page-contact .contact-form label { font-size: 0.88rem; font-weight: 700; color: var(--blue); }
.page-contact .contact-form input,
.page-contact .contact-form select,
.page-contact .contact-form textarea {
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid #dfe6f0;
  background: #f8fafd;
  font-size: 0.95rem;
}
.page-contact .contact-form textarea { min-height: 120px; }
.page-contact .contact-form button[type="submit"] { min-height: 50px; border-radius: 10px; font-size: 1rem; }

@media (max-width: 900px) {
  .page-contact .contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .page-contact .contact-form .section-title { font-size: 1.7rem; }
  .page-contact .contact-form .inquiry-form { padding: 20px 18px; }
}

/* contact panel watermark + tighter heads-up block */
.page-contact .contact-panel-cta p strong + br { display: none; }
.page-contact .contact-panel-cta p strong { margin-bottom: 4px; }
.page-contact .contact-panel-cta p { font-size: 0.98rem; }

/* contact panel watermark: the plant silhouette from the reference */
.page-contact .contact-panel::after {
  content: "";
  position: absolute;
  inset-inline-end: -6px;
  bottom: -6px;
  width: 66%;
  height: 42%;
  background: url("/assets/images/factory/factory-6.webp") center bottom / cover no-repeat;
  opacity: 0.07;
  filter: grayscale(1) blur(2px) brightness(1.15);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0) 85%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0) 85%);
  pointer-events: none;
  border-end-end-radius: 14px;
}
.page-contact .contact-panel > * { position: relative; z-index: 1; }

/* social tap targets: 36px hit area around the 26px artwork */
.footer-social { gap: 6px; }
.footer-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.footer-social img { width: 26px; height: 26px; }

/* breadcrumb tap area: keep the visual line height, widen the hit box */
.breadcrumb a {
  display: inline-block;
  padding: 7px 3px;
  margin: -7px -3px;
}