/* ==========================================================================
   MAYGI — Hebei MayGi Packaging Products Co., Ltd.
   Design system. Primary colours sampled from the company logo.
   ========================================================================== */

:root {
  /* brand — sampled from logo */
  --brand-900: #071c3f;
  --brand-800: #0c2b5e;
  --brand-700: #0d417f;
  --brand-600: #0b5aa6;
  --brand-500: #1a7ecb;
  --brand-400: #48a4dd;
  --brand-300: #96cdee;
  --brand-200: #c9e6f8;
  --brand-100: #e6f2fb;
  --brand-50: #f4fafe;

  --accent-700: #a80010;
  --accent-600: #c90013;
  --accent-500: #e00013;
  --accent-100: #fde8ea;

  --ink-900: #0d1626;
  --ink-700: #26324a;
  --ink-600: #44506b;
  --ink-500: #64708b;
  --ink-400: #8a94a8;
  --ink-300: #adb5c4;

  --line: #e2e8f1;
  --line-strong: #cfd8e5;
  --bg: #ffffff;
  --bg-soft: #f6f9fc;
  --bg-mist: #eef4fa;

  --ok-600: #0f7b52;
  --ok-100: #e6f6ef;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-ar: "Segoe UI", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic",
    Tahoma, system-ui, sans-serif;

  --shadow-xs: 0 1px 2px rgba(13, 22, 38, 0.06);
  --shadow-sm: 0 2px 8px rgba(13, 22, 38, 0.06);
  --shadow-md: 0 8px 24px rgba(13, 22, 38, 0.08);
  --shadow-lg: 0 18px 48px rgba(13, 22, 38, 0.12);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --wrap: 1200px;
  --header-h: 72px;
}

html[dir="rtl"] body {
  font-family: var(--font-ar);
}

/* Telephone numbers, e-mail addresses and URLs are left-to-right runs even
   inside RTL text — without this the bidi algorithm reorders the digit groups
   ("+86 133 1156 2486" renders as "2486 1156 133 86+"). */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="https://wa.me/"],
html[dir="rtl"] .info-list .v a,
html[dir="rtl"] .bidi-ltr,
html[dir="rtl"] .contact-action__v,
html[dir="rtl"] .brand-card__name,
html[dir="rtl"] .footer-contact a {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-600); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-500); }

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  color: var(--ink-900);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
h4 { font-size: 1.06rem; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
li { margin-bottom: .45rem; }

button { font: inherit; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* ------------------------------------------------------------- utilities */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(56px, 7vw, 104px) 0; }
.section--soft { background: var(--bg-soft); }
.section--mist { background: var(--bg-mist); }
.section--dark { background: var(--brand-900); color: var(--brand-200); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-600);
  background: var(--brand-100);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--brand-300); background: rgba(255, 255, 255, .1); }

.lead { font-size: 1.06rem; color: var(--ink-600); max-width: 70ch; }
.section--dark .lead { color: var(--brand-200); }

.section-head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }
.section-head.center { margin-inline: auto; }

.grid { display: grid; gap: 26px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* Grid and flex children default to a minimum size of "auto", which means a
   wide child — an address line, a specification table — can force its column
   wider than the screen and push the whole page sideways. Letting them shrink
   keeps every column inside its container; anything genuinely too wide (the
   equipment table) then scrolls inside its own wrapper instead. */
.grid > *, .split > *, .split-media, .info-list li > div, .footer-grid > * { min-width: 0; }
.info-list .v { overflow-wrap: anywhere; }
.table-wrap { max-width: 100%; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .96rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  text-align: center;
  line-height: 1.3;
}
.btn--primary { background: var(--brand-600); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--accent-500); color: #fff; }
.btn--accent:hover { background: var(--accent-600); color: #fff; transform: translateY(-1px); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink-900); background: #fff; }
.btn--ghost:hover { border-color: var(--brand-500); color: var(--brand-600); }
.btn--onDark { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--onDark:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.btn--lg { padding: 16px 34px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ----------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand img { height: 48px; width: auto; flex: none; }
/* Wordmark lockup. The logo file is the mark on its own, so the brand name and
   the one-line descriptor live in HTML next to it — they stay crisp at any
   zoom, translate with the locale, and are readable by search engines. */
.brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand__name {
  font-size: 1.3rem; font-weight: 800; line-height: 1;
  letter-spacing: .1em; color: var(--brand-800);
}
.brand__tag {
  font-size: .68rem; line-height: 1; letter-spacing: .015em;
  color: var(--ink-500); white-space: nowrap;
}
.brand:hover .brand__name { color: var(--brand-600); }

.nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { margin: 0; position: relative; }
.nav a {
  display: block;
  position: relative;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
}
.nav a:hover { background: var(--brand-50); color: var(--brand-600); }
.nav a.is-active { color: var(--brand-600); background: var(--brand-100); }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* language switcher */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border: 1.5px solid var(--line-strong); background: #fff;
  border-radius: var(--r-md); cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ink-700);
}
.lang-btn:hover { border-color: var(--brand-400); color: var(--brand-600); }
.lang-btn svg { flex-shrink: 0; }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 190px;
  display: none; z-index: 80; max-height: 70vh; overflow-y: auto;
}
.lang.is-open .lang-menu { display: block; }
.lang-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-700); font-size: .92rem; font-weight: 500;
}
.lang-menu a:hover { background: var(--brand-50); color: var(--brand-600); }
.lang-menu a.is-active { background: var(--brand-100); color: var(--brand-700); font-weight: 700; }
.lang-menu .code { font-size: .74rem; color: var(--ink-400); letter-spacing: .06em; text-transform: uppercase; }

.burger {
  display: none; width: 44px; height: 44px; border: 1.5px solid var(--line-strong);
  background: #fff; border-radius: var(--r-md); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink-900); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; inset-inline-start: 0; width: 18px; height: 2px; background: var(--ink-900);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-800) 42%, var(--brand-700) 100%);
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 88% 12%, rgba(72, 164, 221, .30), transparent 70%),
    radial-gradient(closest-side at 6% 92%, rgba(224, 0, 19, .16), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(56px, 8vw, 104px); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero .lead { color: var(--brand-200); font-size: 1.12rem; margin-bottom: 30px; max-width: 56ch; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: #fff;
}
.hero-media {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .18); aspect-ratio: 4 / 3; background: var(--brand-800);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 46px; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-md); overflow: hidden;
}
.hero-stats .stat { background: rgba(7, 28, 63, .5); padding: 22px 18px; text-align: center; }
.hero-stats .num { font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 800; color: #fff; line-height: 1.1; }
.hero-stats .lbl { font-size: .82rem; color: var(--brand-200); margin-top: 6px; }

/* ------------------------------------------------------------- page hero */
.page-hero {
  background: linear-gradient(145deg, var(--brand-900), var(--brand-700));
  color: #fff; padding: clamp(44px, 6vw, 76px) 0;
}
.page-hero h1 { color: #fff; margin-bottom: 12px; }
.page-hero .lead { color: var(--brand-200); margin: 0; }

.crumbs { font-size: .85rem; color: var(--brand-300); margin-bottom: 14px; }
.crumbs a { color: var(--brand-300); }
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .6; margin-inline: 6px; }

/* ------------------------------------------------------------------ cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: all .2s ease; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
/* Product photographs are cut-outs on a white ground, so the card frames them
   square and lets the whole roll show instead of cropping it. */
.card-img { aspect-ratio: 1 / 1; background: #fff; overflow: hidden; border-bottom: 1px solid var(--line); }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .4s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: 8px; font-size: 1.16rem; }
.card-body p { color: var(--ink-600); font-size: .94rem; margin-bottom: 14px; }
.card-body .more { margin-top: auto; font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.card:hover .more { color: var(--brand-500); }

.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; height: 100%;
}
.feature .ico {
  width: 50px; height: 50px; border-radius: 13px; background: var(--brand-100);
  display: grid; place-items: center; margin-bottom: 18px; color: var(--brand-600);
}
.feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature p { font-size: .93rem; color: var(--ink-600); margin: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
.split--flip .split-media { order: 2; }
.split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; font-size: .96rem; }
.checklist li svg { flex-shrink: 0; margin-top: 4px; color: var(--ok-600); }
.checklist--onDark li svg { color: var(--brand-300); }

.pill-list { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; list-style: none; }
.pill-list li {
  margin: 0; background: var(--brand-50); border: 1px solid var(--brand-200);
  color: var(--brand-700); border-radius: 999px; padding: 6px 14px; font-size: .88rem; font-weight: 600;
}
.section--dark .pill-list li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }

/* ------------------------------------------------------------------ steps */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 92px 1fr; gap: 26px;
  padding: 26px 0; border-bottom: 1px dashed var(--line-strong);
}
.step:last-child { border-bottom: 0; }
.step-num {
  font-size: 1.9rem; font-weight: 800; color: var(--brand-200); line-height: 1;
  border-inline-end: 3px solid var(--brand-500); padding-inline-end: 20px; text-align: end;
}
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--ink-600); font-size: .95rem; }

/* ------------------------------------------------------------------ table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
table.data th, table.data td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--line); }
table.data thead th {
  background: var(--brand-50); color: var(--brand-800); font-weight: 700;
  font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--brand-50); }
table.data td:first-child { font-weight: 600; color: var(--ink-900); }

/* Specification tables carry up to seven columns of model data. They keep their
   own wrapper so they scroll sideways on a phone instead of squashing, and the
   headings stay in sentence case because they are full labels, not tags. */
table.data--spec { min-width: 780px; }
table.data--spec th, table.data--spec td { padding: 11px 14px; white-space: nowrap; }
table.data--spec thead th { text-transform: none; letter-spacing: .01em; font-size: .86rem; }
table.data--spec td { font-variant-numeric: tabular-nums; }
table.data--spec td:first-child { color: var(--brand-700); }

/* ---------------------------------------------------------------- gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; position: relative; background: var(--bg-mist); cursor: zoom-in; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.gallery figure:hover img { transform: scale(1.06); }
/* Product detail gallery: cut-out shots, framed square on white. There are no
   captions here, so the overlay caption style below is left to the factory
   gallery only. */
.gallery--detail { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gallery--detail img { aspect-ratio: 1 / 1; object-fit: contain; padding: 18px; background: #fff; }

.gallery figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  background: linear-gradient(to top, rgba(7, 28, 63, .9), transparent);
  color: #fff; padding: 26px 16px 12px; font-size: .9rem; font-weight: 600;
}

.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; cursor: zoom-in; transition: all .2s ease;
}
.cert:hover { box-shadow: var(--shadow-md); border-color: var(--brand-200); transform: translateY(-3px); }
.cert img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; background: #fff; }
.cert figcaption { padding: 14px 16px 16px; }
.cert .t { font-weight: 700; font-size: .92rem; color: var(--ink-900); }
.cert .d { font-size: .8rem; color: var(--ink-400); margin-top: 4px; }

/* --------------------------------------------------- client track record */
/* The client list is evidence rather than inventory, so it gets a logo-wall
   grid: hairline cells holding a monogram badge and the brand name. Names are
   the clients' own — no invented wordmarks — and the monogram is derived from
   the name itself, so nothing has to be re-drawn per locale. */
.track { background: linear-gradient(165deg, var(--brand-900) 0%, var(--brand-800) 52%, var(--brand-900) 100%); }
.track .section-head h2 { color: #fff; }
/* One panel, hairlines drawn per cell rather than by a 1px grid gap: with 13
   clients the last row is never full, and a gap-coloured grid would leave the
   empty cells looking like holes in the wall. */
.brand-wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(9, 26, 52, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md); overflow: hidden;
}
.brand-card {
  margin: 0; padding: 22px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: inset -1px -1px 0 0 rgba(255, 255, 255, .12);
  transition: background .22s ease;
}
.brand-card:hover { background: rgba(26, 126, 203, .22); }
.brand-card__mark {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 800; font-size: .92rem; letter-spacing: .04em; color: #fff;
  background: linear-gradient(145deg, var(--brand-500), var(--brand-700));
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.brand-card__name { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3; }

.lightbox {
  position: fixed; inset: 0; background: rgba(6, 14, 28, .9); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 30px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 88vh; width: auto; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.lightbox-close {
  position: absolute; top: 22px; inset-inline-end: 26px; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* -------------------------------------------------------------------- faq */
.faq-list { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
details.faq {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0; overflow: hidden;
}
details.faq[open] { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
details.faq summary {
  list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 700;
  color: var(--ink-900); font-size: 1rem; position: relative;
}
html[dir="rtl"] details.faq summary { padding: 18px 22px 18px 56px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; inset-inline-end: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--brand-500); font-weight: 400;
}
details.faq[open] summary::after { content: "\2013"; }
details.faq .faq-body { padding: 0 22px 20px; color: var(--ink-600); font-size: .95rem; }
details.faq .faq-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink-700); }
.field .req { color: var(--accent-500); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; padding: 12px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: #fff; color: var(--ink-900); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.field textarea { resize: vertical; min-height: 128px; }
.form-note { font-size: .84rem; color: var(--ink-400); margin-top: 14px; }

/* Inquiry form submission state (cloud-backed) */
.form-status {
  margin: 0; padding: 12px 15px; border-radius: var(--r-sm);
  font-size: .9rem; line-height: 1.55; border: 1.5px solid transparent;
}
.form-status--pending { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.form-status--ok { background: var(--ok-100); border-color: #b8e3cd; color: var(--ok-600); }
.form-status--error { background: var(--accent-100); border-color: #f4c4c9; color: var(--accent-700); }
.form-status-link { color: inherit; font-weight: 600; text-decoration: underline; }
.btn:disabled { opacity: .68; cursor: progress; }

/* Contact channels — each row is a direct action, not a link to a form. */
.contact-actions { display: grid; gap: 12px; margin-top: 22px; }
.contact-action {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: #fff; color: var(--ink-900); text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.contact-action:hover, .contact-action:focus-visible {
  border-color: var(--brand-500); box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.contact-action__ico {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-600);
}
.contact-action__txt { display: grid; gap: 1px; min-width: 0; }
.contact-action__k { font-weight: 700; font-size: .95rem; line-height: 1.35; }
.contact-action__v { font-size: .84rem; color: var(--ink-500); overflow-wrap: anywhere; }
.contact-action > svg:last-child { margin-inline-start: auto; color: var(--ink-300); flex: none; }
html[dir="rtl"] .contact-action > svg:last-child { transform: scaleX(-1); }
.contact-action--wa .contact-action__ico { background: #e4f8ed; color: #12a150; }

.qr-card {
  margin-top: 22px; text-align: center;
}
.qr-card img {
  width: 100%; max-width: 220px; border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.qr-card figcaption {
  margin-top: 10px; font-weight: 700; color: var(--ink-700); font-size: .95rem;
}

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.info-list .ico {
  width: 42px; height: 42px; border-radius: 11px; background: var(--brand-100);
  display: grid; place-items: center; flex-shrink: 0; color: var(--brand-600);
}
.info-list .k { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); font-weight: 700; }
.info-list .v { font-weight: 600; color: var(--ink-900); font-size: .96rem; word-break: break-word; }
.info-list .v a { font-weight: 600; }

/* ----------------------------------------------------------------- banner */
.cta-band {
  background: linear-gradient(120deg, var(--brand-800), var(--brand-600));
  color: #fff; border-radius: var(--r-xl); padding: clamp(32px, 4.5vw, 56px);
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: var(--brand-200); margin: 0; max-width: 60ch; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--brand-900); color: var(--brand-300); font-size: .92rem; padding-top: 62px; }
.site-footer h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; }
.site-footer a { color: var(--brand-300); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.footer-brand img { height: 42px; margin-bottom: 18px; }
.footer-brand p { color: var(--brand-300); font-size: .9rem; line-height: 1.7; }
.footer-contact li { display: flex; gap: 10px; font-size: .9rem; }
.footer-contact svg { flex-shrink: 0; margin-top: 4px; color: var(--brand-400); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem;
}

/* --------------------------------------------------------------- floating */
.to-top {
  position: fixed; inset-inline-end: 22px; bottom: 22px; width: 46px; height: 46px;
  border-radius: 50%; background: var(--brand-600); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transition: all .25s ease; z-index: 70;
}
.to-top.is-visible { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------- responsive */

/* Desktop header, two rows. The eight navigation labels are translated into
   eight languages, and the measured widths run from 679 px (Chinese) to
   1,092 px (Russian) — no single row can hold every translation beside the
   lockup and the action buttons inside a 1,200 px container, and letting the
   row squeeze the nav only makes its nowrap items overlap the buttons. So the
   navigation always gets a band of its own that spans the container, centred,
   under the lockup / actions row; every language then renders identically. */
@media (min-width: 1248px) {
  .site-header .wrap { min-height: var(--header-h); gap: 18px; row-gap: 0; flex-wrap: wrap; }
  .nav {
    order: 3;
    flex: 1 1 100%;
    margin-top: 2px;
    border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, var(--bg-soft), #fff);
    box-shadow: inset 0 1px 0 #fff;
  }
  .nav > ul { gap: 2px; justify-content: center; }
  .nav a { padding: 11px 14px; font-size: .92rem; border-radius: 0; }
  .nav a:hover { background: transparent; color: var(--brand-600); }
  .nav a.is-active { background: transparent; color: var(--brand-700); }
  .nav a.is-active::after {
    content: ""; position: absolute; inset-inline: 13px; bottom: 6px; height: 2px;
    border-radius: 2px; background: var(--accent-500);
  }
}

/* Compact header: the navigation becomes a panel that drops out from under the
   sticky header. Anchoring it to the header rather than to the viewport keeps
   the logo, the language button and the close button visible and clickable
   while the menu is open. */
@media (max-width: 1247px) {
  .site-header .wrap { gap: 14px; }
  .brand img { height: 46px; }
  .brand { gap: 11px; }
  .brand__name { font-size: 1.24rem; }
  .brand__tag { font-size: .68rem; }
  .burger { display: flex; }
  .nav {
    position: absolute; top: 100%; inset-inline: auto 0;
    width: min(340px, 86vw); max-height: calc(100vh - 130px);
    background: #fff; margin: 0; padding: 14px 20px 24px;
    border: 1px solid var(--line); border-top: 0;
    border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md);
    box-shadow: var(--shadow-lg); overflow-y: auto; z-index: 65;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
  .burger[aria-expanded="true"] { background: var(--brand-50); border-color: var(--brand-400); }
  .burger[aria-expanded="true"] span { background: transparent; }
  .burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
  .burger span, .burger span::before, .burger span::after { transition: top .2s ease, transform .2s ease, background .2s ease; }
}

/* When the nav collapses into the burger menu, actions stay pinned to the
   right edge because the nav is removed from the flex flow. */
@media (max-width: 980px) {
  .header-actions { margin-inline-start: auto; }
}

@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-wall { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 16 / 10; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split-media { order: 0; }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .cta-band { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .wrap { padding-inline: 18px; }
  .site-header .wrap { gap: 10px; }
  .brand img { height: 34px; }
  .brand { gap: 9px; }
  .brand__name { font-size: 1.1rem; letter-spacing: .08em; }
  .brand__tag { display: none; }
  .header-actions { gap: 8px; }
  .header-actions .btn { display: none; }
  .lang-btn { padding: 9px 10px; font-size: .86rem; gap: 5px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step-num { text-align: start; border-inline-end: 0; border-inline-start: 3px solid var(--brand-500); padding-inline: 12px 0; font-size: 1.4rem; }
  .form-grid { grid-template-columns: 1fr; }
  .brand-wall { grid-template-columns: repeat(2, 1fr); }
  .brand-card { padding: 15px 13px; gap: 10px; }
  .brand-card__mark { width: 34px; height: 34px; border-radius: 10px; font-size: .82rem; }
  .brand-card__name { font-size: .84rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* Very small phones: shrink the mark and the language button further so the
   header row still fits without a horizontal overflow. */
@media (max-width: 400px) {
  .site-header .wrap { gap: 8px; }
  .brand img { height: 30px; }
  .brand__name { font-size: .96rem; letter-spacing: .05em; }
  .lang-btn { padding: 8px 9px; font-size: .8rem; gap: 4px; }
  .lang-btn svg:last-child { display: none; }
  .header-actions { gap: 6px; }
}

@media print {
  .site-header, .to-top, .cta-band, .lang { display: none; }
}