/* ==========================================================================
   FLYIN Mechanical & Electrical (Shanghai) Co., Ltd.
   Modern responsive stylesheet  —  v2.0
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Layout utilities
   4.  Typography helpers
   5.  Buttons
   6.  Topbar / Header / Navigation
   7.  Page hero & breadcrumb
   8.  Home hero
   9.  Stats band
   10. Cards (feature / category / product / office / value / media)
   11. Split sections
   12. Process timeline
   13. Specification table & checklists
   14. Gallery & lightbox
   15. Forms
   16. Pills / filters / search
   17. CTA band
   18. Footer & back-to-top
   19. Reveal animations
   20. Responsive
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* Brand — deep navy + fresh green, taken from the FLYIN logo */
  --navy-950: #060d24;
  --navy-900: #0b1638;
  --navy-800: #122152;
  --navy-700: #1a2e6e;
  --navy-600: #23408f;
  --blue-500: #2b62c4;
  --blue-400: #4a87e8;
  --blue-100: #dce7fa;
  --blue-50: #eef4fe;

  --green-600: #1c8a3e;
  --green-500: #25a24a;
  --green-400: #35c05f;
  --green-100: #d6f5e0;

  /* Neutrals */
  --ink-900: #101828;
  --ink-800: #1d2939;
  --ink-700: #344054;
  --ink-600: #475467;
  --ink-500: #667085;
  --ink-400: #98a2b3;
  --line: #e4e9f2;
  --line-soft: #eef1f7;
  --surface: #ffffff;
  --surface-soft: #f6f8fc;
  --surface-tint: #edf2fb;

  /* Effects */
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 22, 56, .06);
  --shadow-sm: 0 1px 2px rgba(11, 22, 56, .05), 0 3px 10px rgba(11, 22, 56, .05);
  --shadow-md: 0 6px 24px rgba(11, 22, 56, .09);
  --shadow-lg: 0 18px 46px rgba(11, 22, 56, .14);
  --shadow-xl: 0 32px 80px rgba(11, 22, 56, .20);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .32s;

  --maxw: 1200px;
  --gutter: 24px;
  --header-h: 74px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* 2. Reset & base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: var(--blue-500); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--navy-700); }

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

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.18rem, 1.02rem + .6vw, 1.45rem); }
h4 { font-size: 1.06rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .4rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

::selection { background: var(--blue-100); color: var(--navy-900); }

:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* skip link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  background: var(--navy-900);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* 3. Layout utilities ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 6vw, 104px); }
.section--tight { padding-block: clamp(40px, 4vw, 64px); }
.section--soft { background: var(--surface-soft); }
.section--tint { background: linear-gradient(180deg, var(--surface-tint), #f8fafd); }
.section--navy {
  background: radial-gradient(1200px 600px at 12% -10%, #1d3475 0%, transparent 60%),
              linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: #cdd8ee;
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: #c3cfe8; }
.section--navy a { color: #a8c4f5; }

.grid { display: grid; gap: clamp(18px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--aside { grid-template-columns: 1.35fr .65fr; }

/* inline callout band: text on the left, action on the right */
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.callout > *:first-child { flex: 1 1 360px; min-width: 0; }

/* plain, unstyled list used for contact details */
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.plain-list li { margin: 0; }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.75rem; }
.mb-4 { margin-bottom: 2.5rem; }

/* visually hidden but available to assistive technology */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* small uppercase label above a value */
.meta-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* 4. Typography helpers -------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-500), var(--blue-400));
}
.section--navy .eyebrow { color: var(--green-400); }

.lead { font-size: clamp(1.02rem, .95rem + .35vw, 1.16rem); color: var(--ink-600); }
.section--navy .lead { color: #c8d5ee; }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 3vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-bottom: 0; }

.muted { color: var(--ink-500); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.strong { font-weight: 700; color: var(--ink-900); }

.text-gradient {
  background: linear-gradient(100deg, var(--green-400), #7fd4ff 55%, #9fb8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 5. Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 650;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  --btn-bg: linear-gradient(135deg, var(--blue-500), var(--navy-700));
  --btn-fg: #fff;
  box-shadow: 0 8px 22px rgba(43, 98, 196, .28);
}
.btn--primary:hover { --btn-bg: linear-gradient(135deg, var(--blue-400), var(--navy-600)); color: #fff; }

.btn--green {
  --btn-bg: linear-gradient(135deg, var(--green-400), var(--green-600));
  --btn-fg: #fff;
  box-shadow: 0 8px 22px rgba(37, 162, 74, .28);
}
.btn--green:hover { color: #fff; }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--line);
  box-shadow: var(--shadow-xs);
  background: #fff;
}
.btn--outline:hover { --btn-bd: var(--blue-400); --btn-fg: var(--blue-500); color: var(--blue-500); }

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, .08);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .18); color: #fff; }

.btn--sm { padding: 11px 20px; font-size: .875rem; }
.btn--lg { padding: 17px 34px; font-size: 1rem; }
.btn--block { width: 100%; }

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

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 650;
  font-size: .92rem;
  color: var(--blue-500);
}
.btn-link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }
.section--navy .btn-link { color: #a8c4f5; }

/* 6. Topbar / Header / Navigation ---------------------------------------- */
.topbar {
  background: var(--navy-950);
  color: #9fb0d4;
  font-size: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar__item, .topbar__links { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.topbar a { color: #b9c8e6; transition: color var(--dur) var(--ease); }
.topbar a:hover { color: #fff; }
.topbar__ico { width: 15px; height: 15px; flex: none; color: var(--green-400); }
.topbar__dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.25); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, .96); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__logo { width: 92px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong {
  font-size: 1.02rem;
  letter-spacing: .16em;
  color: var(--navy-900);
  font-weight: 800;
}
.brand__text small { font-size: .68rem; color: var(--ink-500); letter-spacing: .01em; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }
.nav__link {
  position: relative;
  display: block;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--navy-800); background: var(--blue-50); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-500), var(--blue-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--navy-800); background: var(--blue-50); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { flex: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  padding: 0;
  flex: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-800);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(6, 13, 36, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 118;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* 7. Page hero & breadcrumb --------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 86px);
  background:
    radial-gradient(900px 420px at 88% -30%, rgba(53, 192, 95, .18), transparent 62%),
    radial-gradient(800px 420px at 5% 120%, rgba(74, 135, 232, .22), transparent 60%),
    linear-gradient(150deg, var(--navy-950), var(--navy-800) 60%, var(--navy-700));
  color: #c9d6ef;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(600px 300px at 70% 20%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(600px 300px at 70% 20%, #000, transparent 75%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 820px; }
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p { color: #becbe6; font-size: clamp(1rem, .95rem + .3vw, 1.12rem); margin: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: .82rem;
  color: #93a5c9;
}
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,.3); }
.breadcrumb a { color: #a8bde4; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }

/* 8. Home hero ----------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #dbe4f6;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(53, 192, 95, .20), transparent 62%),
    radial-gradient(820px 520px at 2% 108%, rgba(74, 135, 232, .26), transparent 62%),
    linear-gradient(155deg, var(--navy-950) 0%, var(--navy-800) 52%, var(--navy-700) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(760px 460px at 76% 14%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(760px 460px at 76% 14%, #000, transparent 78%);
  pointer-events: none;
}

/* 8b. Hero content column ----------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  padding-block: clamp(72px, 10vw, 152px);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 7px 15px 7px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .17);
  color: #d7e2f7;
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 22px;
}
.hero__badge i {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--green-400), var(--blue-400));
  box-shadow: 0 0 0 4px rgba(53, 192, 95, .16);
}
.hero h1 {
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -.025em;
}
.hero__sub {
  font-size: clamp(1.02rem, .96rem + .45vw, 1.22rem);
  color: #c3d0ea;
  max-width: 680px;
  margin-bottom: 34px;
}
.hero .btn-row { margin-bottom: 42px; }

.hero__values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  list-style: none;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero__value { display: flex; align-items: center; gap: 10px; font-weight: 650; color: #e5ecfa; font-size: .92rem; }
.hero__value svg { width: 20px; height: 20px; flex: none; color: var(--green-400); }

/* 8c. Hero grid + visual panel ------------------------------------------ */
.hero__grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(30px, 4vw, 68px);
  align-items: center;
  padding-block: clamp(60px, 8vw, 118px);
}
.hero__grid .hero__inner { padding-block: 0; }

.hero__panel { position: relative; }
.hero__panel-main {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: var(--shadow-xl);
}
.hero__panel-main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hero__panel-main figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 20px 16px;
  background: linear-gradient(180deg, transparent, rgba(6, 13, 36, .82));
  color: #fff;
  font-size: .86rem;
  font-weight: 650;
}
.hero__panel-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.hero__panel-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, .18);
  background: #fff;
}
.hero__float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}
.hero__float--tl { top: 22px; left: -22px; }
.hero__float--br { bottom: 118px; right: -18px; }
.hero__float strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy-800);
  line-height: 1.1;
}
.hero__float span { font-size: .76rem; font-weight: 650; color: var(--ink-500); }
.hero__float svg { width: 26px; height: 26px; color: var(--green-500); flex: none; }

.value-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .87rem;
  font-weight: 650;
  color: #e3ebfa;
}
.value-chip svg { width: 18px; height: 18px; flex: none; color: var(--green-400); }

/* partner / certificate strip */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}
.logo-strip__item {
  flex: 1 1 210px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.logo-strip__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.logo-strip__item strong { color: var(--navy-800); font-size: .96rem; }
.logo-strip__item span { font-size: .82rem; color: var(--ink-500); }
.section--navy .logo-strip__item {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.section--navy .logo-strip__item strong { color: #fff; }
.section--navy .logo-strip__item span { color: #b0bfdd; }

/* simple definition list for facilities */
.fact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fact-list li {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.fact-list strong {
  display: block;
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--navy-800);
  line-height: 1.2;
}
.fact-list span { font-size: .82rem; color: var(--ink-500); }
.section--navy .fact-list li {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.section--navy .fact-list strong { color: #fff; }
.section--navy .fact-list span { color: #b0bfdd; }

/* 9. Stats band ---------------------------------------------------------- */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  margin-top: -1px;
}
.stat {
  background: #fff;
  padding: clamp(22px, 2.4vw, 34px);
  text-align: center;
}
.stat__num {
  display: block;
  font-size: clamp(1.85rem, 1.4rem + 1.7vw, 2.7rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--navy-800);
  background: linear-gradient(135deg, var(--navy-800), var(--blue-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat__label { margin-top: 8px; font-size: .85rem; font-weight: 600; color: var(--ink-500); }

/* 10. Cards -------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.2vw, 30px);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.card__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 18px;
  background: linear-gradient(140deg, var(--blue-50), var(--blue-100));
  color: var(--navy-700);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-600); margin-bottom: 0; }
.section--navy .card {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.section--navy .card:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .26); }
.section--navy .card p { color: #b9c7e4; }
.section--navy .card__icon { background: rgba(53, 192, 95, .16); color: var(--green-400); }

/* feature list card */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--green-100), var(--blue-100));
  color: var(--green-600);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h4 { margin-bottom: .3rem; }
.feature p { font-size: .92rem; color: var(--ink-600); margin: 0; }

/* product / category card */
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.cat-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  background: linear-gradient(140deg, var(--surface-tint), #fff);
  overflow: hidden;
}
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  transition: transform .5s var(--ease);
}
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(11, 22, 56, .82);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.cat-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--line-soft);
}
.cat-card__body h3 { font-size: 1.06rem; margin-bottom: .45rem; }
.cat-card__body p {
  font-size: .89rem;
  color: var(--ink-500);
  margin-bottom: 16px;
  flex: 1;
}
.cat-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .8rem;
  color: var(--ink-400);
  font-weight: 600;
}
.cat-card__meta .count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-500);
}
.cat-card__stretch { position: absolute; inset: 0; z-index: 3; }

/* office card */
.office {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-xs);
  height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.office:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.office__flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 12px;
}
.office h3 { font-size: 1.08rem; margin-bottom: .8rem; }
.office dl { margin: 0; display: grid; gap: 10px; }
.office dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.office__ico { width: 13px; height: 13px; flex: none; color: var(--green-600); }
.office dd { margin: 2px 0 0; font-size: .92rem; color: var(--ink-700); }
.office dd a { word-break: break-word; }

/* media card (image + caption) */
.media-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.media-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-card figcaption { padding: 14px 18px; font-size: .88rem; font-weight: 600; color: var(--ink-700); }
figure { margin: 0; }

/* 11. Split sections ----------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split--detail { grid-template-columns: 1.15fr .85fr; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
}
.split__media--frame { position: relative; }
.split__media--frame::before {
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 58%;
  height: 58%;
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, var(--blue-100), var(--green-100));
  z-index: 0;
}
.split__media--frame > * { position: relative; z-index: 1; }
.split__media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split__media-grid img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); aspect-ratio: 1/1; }
.split__media-grid img:first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  font-size: .95rem;
  color: var(--ink-700);
}
.check-list li::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c8a3e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.section--navy .check-list li { color: #c3cfe8; }
.section--navy .check-list li::before { background-color: rgba(53, 192, 95, .2); }

/* 12. Process timeline --------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step {
  position: relative;
  margin: 0;
  padding: 26px 24px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(140deg, var(--blue-500), var(--navy-700));
  box-shadow: 0 6px 16px rgba(43, 98, 196, .26);
}
.step h4 { font-size: 1rem; margin-bottom: .4rem; }
.step p { font-size: .89rem; color: var(--ink-500); margin: 0; }

/* vertical timeline */
.vtimeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 34px; }
.vtimeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--green-400), var(--blue-400), transparent);
}
.vtimeline li { position: relative; margin: 0 0 24px; }
.vtimeline li::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue-500);
  box-shadow: 0 0 0 4px rgba(43, 98, 196, .12);
}
.vtimeline li:last-child { margin-bottom: 0; }
.vtimeline strong { display: block; color: var(--ink-900); font-size: .98rem; }
.vtimeline span { font-size: .9rem; color: var(--ink-500); }

/* 13. Spec table & checklists ------------------------------------------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spec-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  color: var(--ink-900);
  padding: 0 0 10px;
}
.spec-table th, .spec-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.spec-table th {
  width: 38%;
  font-weight: 650;
  color: var(--navy-800);
  background: var(--surface-soft);
}
.spec-table td { color: var(--ink-700); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid var(--line);
  color: var(--navy-700);
  font-size: .83rem;
  font-weight: 650;
  margin: 0;
}
.pill--green { background: var(--green-100); border-color: #bce8cb; color: var(--green-600); }
.pill--outline { background: #fff; }
.section--navy .pill {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #d3def3;
}

/* 14. Gallery & lightbox ------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform .45s var(--ease);
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 22, 56, .5));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery__item:hover::after { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 13, 36, .93);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.lightbox__img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  background: #fff;
}
.lightbox__cap {
  margin-top: 16px;
  color: #d5def0;
  font-size: .9rem;
  font-weight: 600;
}
.lightbox__count { display: block; margin-top: 4px; color: #8fa2c6; font-size: .78rem; }
.lightbox__btn {
  position: absolute;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn--prev { left: clamp(8px, 2.5vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: clamp(8px, 2.5vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox__btn--close { top: clamp(12px, 2.5vw, 26px); right: clamp(12px, 2.5vw, 26px); }
.lightbox__btn--prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__btn--next:hover { transform: translateY(-50%) scale(1.06); }

/* 15. Forms -------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-700);
}
.field label .req { color: #d92d20; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: .95rem;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c9d3e5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(74, 135, 232, .16);
}
.field .hint { font-size: .78rem; color: var(--ink-400); }
.field--error input, .field--error textarea, .field--error select { border-color: #f04438; }
.field .error-msg { font-size: .78rem; color: #d92d20; display: none; }
.field--error .error-msg { display: block; }
.form__note { font-size: .82rem; color: var(--ink-500); }
.form-status {
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: .9rem;
  font-weight: 600;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--green-100); color: var(--green-600); border: 1px solid #bce8cb; }
.form-status--err { background: #fee4e2; color: #b42318; border: 1px solid #fecdca; }

/* 16. Search box --------------------------------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 28px;
}
.toolbar > .search-box:only-child { flex: 1 1 320px; max-width: 480px; }
.search-box { position: relative; flex: 0 1 300px; min-width: 220px; }
.search-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--ink-400);
  pointer-events: none;
}
.search-box input {
  font: inherit;
  font-size: .9rem;
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-900);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search-box input:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(74, 135, 232, .16);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink-500);
  background: var(--surface-soft);
}

/* 16b. Dual entry cards (sourcing division / factory) ------------------ */
.entry-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.entry-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-400);
}
.entry-card__eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-600);
}
.entry-card h3 { margin: 0; font-size: 1.32rem; color: var(--navy-900); }
.entry-card p { margin: 0; color: var(--ink-600); }
.entry-card__cta {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: var(--blue-500);
}
.entry-card__cta svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.entry-card:hover .entry-card__cta svg { transform: translateX(4px); }

/* 17. CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(34px, 4vw, 62px);
  background:
    radial-gradient(700px 320px at 92% 10%, rgba(53, 192, 95, .26), transparent 62%),
    linear-gradient(140deg, var(--navy-950), var(--navy-800) 58%, var(--navy-600));
  color: #cfdaf1;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { color: #c2cee8; margin: 0; }
.cta-band .eyebrow { color: var(--green-400); }
.cta-band .btn--ghost { --btn-fg: #fff; }

/* 18. Footer & back-to-top ---------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: #93a3c4;
  font-size: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.footer__grid {
  display: grid;
  /* Brand column is sized to the logo, then Products / Company / Contact
     share one even rhythm so the three headings land on a regular grid.
     Contact is given a little more room so the address and the phone
     line keep their shape. */
  grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 2.2vw, 36px);
  padding-block: clamp(46px, 5vw, 72px);
  align-items: start;
}
.footer__brand .brand__text strong { color: #fff; }
.footer__brand .brand__text small { color: #8296bb; }
.footer__brand p { margin: 16px 0 0; color: #8ea1c4; max-width: 34ch; }
.footer h3 {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul li { margin: 0; }
.footer a { color: #a3b4d6; transition: color var(--dur) var(--ease); }
.footer a:hover { color: #fff; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--green-400); }
.footer__contact a { word-break: break-word; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: #7b8cae;
}
.footer__badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.footer__badges span {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .74rem;
  color: #a3b4d6;
}

.to-top {
  position: fixed;
  right: clamp(16px, 2vw, 26px);
  bottom: clamp(16px, 2vw, 26px);
  z-index: 110;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--blue-500), var(--navy-700));
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }

/* 19. Reveal animations -------------------------------------------------- */
/* Gated behind .js: without JavaScript the content must stay visible, so the
   hidden starting state only applies once the script is known to be running. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: .08s; }
.js [data-reveal][data-delay="2"] { transition-delay: .16s; }
.js [data-reveal][data-delay="3"] { transition-delay: .24s; }
.js [data-reveal][data-delay="4"] { transition-delay: .32s; }
.js [data-reveal][data-delay="5"] { transition-delay: .4s; }

.js .img-fade { opacity: 0; transition: opacity .6s var(--ease); }
.js .img-fade.is-loaded { opacity: 1; }

/* 20. Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  /* --- footer: the brand moves onto its own full-width row while the three
         category columns stay side by side, so Products / Company / Contact
         keep their alignment -------------------------------------------- */
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }

  /* --- header: the original navigation labels need more room, so the menu
         becomes a drawer earlier than the rest of the layout ------------- */
  .brand__text small { display: none; }
  /* --- JavaScript available: off-canvas drawer ------------------------ */
  .js .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 86vw);
    margin: 0;
    padding: 88px 22px 32px;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-xl);
    transform: translateX(104%);
    transition: transform .36s var(--ease);
    overflow-y: auto;
    z-index: 119;
  }
  .js .nav.is-open { transform: none; }
  .js .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .js .nav__link {
    padding: 13px 16px;
    font-size: 1rem;
    border-radius: var(--radius-md);
  }
  .js .nav__link::after { display: none; }
  .js .nav__link[aria-current="page"] { background: var(--blue-50); }

  .js .nav-toggle { display: inline-flex; margin-left: auto; }

  .header__cta { display: none; }

  /* --- no JavaScript: wrap the links under the brand ----------------- */
  html:not(.js) .header__inner { flex-wrap: wrap; padding-bottom: 8px; }
  html:not(.js) .nav { width: 100%; margin: 0; }
  html:not(.js) .nav__list { flex-wrap: wrap; }
  html:not(.js) .nav__link { padding: 8px 12px; }
}

@media (max-width: 980px) {
  :root { --header-h: 66px; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--aside { grid-template-columns: minmax(0, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media--frame::before { display: none; }

  .hero__grid { grid-template-columns: 1fr; padding-block: clamp(54px, 8vw, 84px); }
  .hero__panel { max-width: 620px; }
  .hero__float--tl { left: 0; }
  .hero__float--br { right: 0; bottom: 108px; }

  .hero__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cta-band { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; }

  .topbar__links { display: none; }
  .topbar__inner { justify-content: center; min-height: 36px; }

  .brand__logo { width: 78px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .timeline--cols { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

  .hero__inner { padding-block: clamp(56px, 16vw, 92px); }
  .hero__grid .hero__inner { padding-block: 0; }
  .hero__float { display: none; }
  .hero .btn-row .btn { width: 100%; }

  .stats__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }

  .split__media-grid { grid-template-columns: 1fr; }
  .split__media-grid img:first-child { grid-row: auto; aspect-ratio: 4/3; }

  .spec-table th { width: 42%; padding: 11px 12px; font-size: .85rem; }
  .spec-table td { padding: 11px 12px; font-size: .85rem; }

  .toolbar { flex-direction: column; align-items: stretch; }
  .search-box { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .hero__values { grid-template-columns: 1fr; }
  .btn { padding: 13px 20px; }
}

/* Accessibility & print ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .img-fade { opacity: 1; }
}

@media print {
  .topbar, .site-header, .site-footer, .to-top, .nav, .lightbox, .cta-band__actions { display: none !important; }
  body { color: #000; background: #fff; }
  .page-hero, .hero, .section--navy { background: #fff !important; color: #000 !important; }
  .page-hero h1, .hero h1, .section--navy h2 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}

/* ======================================================================
   21. Components for the legacy-content layout
   ====================================================================== */

/* 21a. the hidden attribute has to beat display:flex / display:grid */
[hidden] { display: none !important; }

/* 21b. Home page: the two entry cards and the closing block */
.grid--entries { max-width: 940px; margin-inline: auto; }
.entry-card__img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--surface-tint);
}
.closing {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(22px, 3vw, 40px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-xs);
}
.closing__img {
  flex: none; width: 126px; height: 106px; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--line);
}
.closing__body { flex: 1 1 320px; }
.closing__body h2 { margin-bottom: .6rem; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.7rem); }
.closing__line { margin: 0 0 .35rem; font-size: 1rem; color: var(--ink-700); }
.closing__line strong {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-900); margin-right: .55rem;
}
.closing__ico { width: 16px; height: 16px; flex: none; color: var(--green-600); }

/* 21c. Products: plain link list, mirroring the legacy left-hand menu */
.prod-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: 10px;
}
.prod-links li { margin: 0; }
.prod-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: #fff;
  color: var(--ink-700); font-size: .93rem; font-weight: 600; text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.prod-links a::before { content: "\203B"; color: var(--green-600); font-weight: 700; }
.prod-links a:hover {
  border-color: var(--blue-400); color: var(--blue-500);
  box-shadow: var(--shadow-xs); transform: translateX(2px);
}
.prod-links a[aria-current="page"] {
  border-color: var(--blue-400); background: var(--surface-tint); color: var(--blue-500);
}

/* 21d. Projects: the legacy four-box flow with its own arrow graphics.
   The down arrow is inset from the right edge so it lands under the right
   column rather than hard against the container edge. Section 25 re-states
   this inset inline (no dashed connector shares it any more). */
.flow { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.flow__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 22px); align-items: stretch;
}
.flow__box { display: flex; align-items: center; }
.flow__box .check-list { gap: 10px; }
.flow__arrow { align-self: center; width: 75px; height: auto; opacity: .85; }
.flow__down {
  justify-self: end; width: 43px; height: auto; opacity: .85;
  margin-inline-end: clamp(0px, 6%, 90px);
}

/* 21e. Gallery carrying the legacy photograph captions */
.gallery__item { display: flex; flex-direction: column; aspect-ratio: auto; }
.gallery__item::after { content: none; }
.gallery__thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .45s var(--ease); }
.gallery__item:hover .gallery__thumb img { transform: scale(1.06); }
.gallery__thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(11, 22, 56, .22));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.gallery__item:hover .gallery__thumb::after { opacity: 1; }
.gallery__cap {
  display: block; padding: 10px 14px 13px; border-top: 1px solid var(--line-soft);
  font-size: .84rem; font-weight: 600; line-height: 1.4; color: var(--ink-600);
}

/* 21f. Longer bullet lists and the factory photographs */
.check-list--lg { gap: 16px; }
.check-list--lg li { font-size: clamp(1rem, .96rem + .3vw, 1.12rem); }
.factory-shot { margin: clamp(24px, 3vw, 40px) 0 0; }
.factory-shot img {
  width: 100%; height: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-xs);
}

/* 21g. Eyebrow on the dark page hero */
.page-hero .eyebrow { color: var(--green-400); }

/* 21h. Footer licence mark */
.footer__licence { display: inline-flex; align-items: center; }
.footer__licence img { max-height: 44px; width: auto; opacity: .9; }

/* 21i. Responsive for the components above */
@media (max-width: 900px) {
  .flow__row { grid-template-columns: minmax(0, 1fr); }
  .flow__arrow, .flow__down { display: none; }
}
@media (max-width: 600px) {
  .closing { flex-direction: column; align-items: flex-start; }
  .closing__img { width: 104px; height: 88px; }
}

/* ======================================================================
   22. Footer product list: one entry per line
   ----------------------------------------------------------------------
   The list deliberately falls back to the generic `.footer ul` rule
   (display: grid, gap: 9px) so the eight entries get exactly the same
   vertical rhythm as the Company / Contact columns next to them.
   ====================================================================== */
.footer ul.footer__cols { grid-template-columns: 1fr; }

/* ======================================================================
   23. Visual refresh v3 — "modern industrial precision"
   ----------------------------------------------------------------------
   Purely cosmetic layer. It introduces no markup and therefore no new
   copy: the only HTML change that pairs with this block is the modifier
   class `page-hero--home` on the home page hero.

   It is appended after every earlier rule, including the media queries,
   on purpose — so each override below wins on source order alone. All
   responsive overrides for this layer are collected in 23k, at the very
   end, for the same reason.
   ====================================================================== */

/* 23a. Extra tokens ------------------------------------------------------ */
:root {
  /* one page tint + white cards: the single change that lifts the whole
     site out of the flat "white on white" look ------------------------ */
  --page-bg: #f4f7fc;
  --hairline: rgba(11, 22, 56, .075);
  --hairline-strong: rgba(11, 22, 56, .14);

  --accent-grad: linear-gradient(100deg, var(--green-400), var(--blue-400));

  /* layered, slightly longer shadows read as depth instead of blur ---- */
  --shadow-card: 0 1px 2px rgba(11, 22, 56, .045), 0 10px 26px -14px rgba(11, 22, 56, .20);
  --shadow-card-hover: 0 2px 4px rgba(11, 22, 56, .05), 0 26px 54px -20px rgba(11, 22, 56, .30);

  --ring: 0 0 0 4px rgba(74, 135, 232, .16);
}

/* 23b. Base & display typography ---------------------------------------- */
@media screen {
  body { background: var(--page-bg); }
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
h2 { font-weight: 800; letter-spacing: -.028em; line-height: 1.16; }
h3 { font-weight: 700; letter-spacing: -.018em; }

.section-head h2 { letter-spacing: -.032em; }
.section-head .eyebrow { margin-bottom: 1rem; }

::selection { background: rgba(74, 135, 232, .22); color: var(--navy-900); }

:focus-visible { outline: 3px solid rgba(74, 135, 232, .85); outline-offset: 2px; }

/* slim themed scrollbar (pointer devices only) -------------------------- */
@media (min-width: 721px) and (pointer: fine) {
  html { scrollbar-color: rgba(11, 22, 56, .28) transparent; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: #eef2f9; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #bcc9de, #9dabc6);
    border: 3px solid #eef2f9;
    border-radius: var(--radius-pill);
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #93a6c4, #7889a8); }
}

/* 23c. Topbar / header --------------------------------------------------- */
.topbar {
  background: linear-gradient(90deg, var(--navy-950), var(--navy-900) 50%, var(--navy-950));
  border-bottom-color: rgba(53, 192, 95, .26);
}

.site-header { box-shadow: 0 1px 0 rgba(11, 22, 56, .05); }
.site-header.is-stuck {
  box-shadow: 0 14px 34px -18px rgba(11, 22, 56, .34), 0 1px 0 rgba(11, 22, 56, .05);
}
.nav__link[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(43, 98, 196, .16); }

/* 23d. Hero ------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(52px, 6.4vw, 104px);
  box-shadow: 0 22px 44px -34px rgba(6, 13, 36, .85);
  background:
    radial-gradient(1120px 540px at 84% -26%, rgba(53, 192, 95, .20), transparent 60%),
    radial-gradient(920px 480px at -6% 118%, rgba(74, 135, 232, .28), transparent 62%),
    radial-gradient(1400px 720px at 50% 132%, rgba(35, 64, 143, .48), transparent 72%),
    linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 58%, var(--navy-700) 100%);
}
/* light sheen + a gradient hairline along the bottom edge, so the dark
   band ends on a drawn line instead of a hard cut ---------------------- */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(53, 192, 95, .55) 18%,
      rgba(74, 135, 232, .55) 82%, transparent 100%) 0 100% / 100% 1px no-repeat,
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .055) 50%, transparent 58%),
    radial-gradient(560px 280px at 94% 112%, rgba(53, 192, 95, .18), transparent 72%);
}
.page-hero::after {
  mask-image: radial-gradient(680px 340px at 72% 18%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(680px 340px at 72% 18%, #000, transparent 76%);
}
.page-hero__inner { max-width: 880px; }
.page-hero h1 {
  font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.6rem);
  letter-spacing: -.035em;
  margin-bottom: .55rem;
}
.page-hero p {
  font-size: clamp(1.01rem, .95rem + .34vw, 1.16rem);
  color: #c3d0ea;
  max-width: 72ch;
}

/* eyebrow as a glass chip on the dark bands ----------------------------- */
.page-hero .eyebrow,
.hero .eyebrow,
.section--navy .eyebrow,
.cta-band .eyebrow {
  padding: 6px 15px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #d9e4f8;
  font-size: .71rem;
  letter-spacing: .18em;
}

.breadcrumb { font-size: .8rem; margin-bottom: 20px; }

/* home hero: taller, with a technical target-ring motif ----------------- */
.page-hero--home { padding-block: clamp(64px, 8vw, 130px); }
.page-hero--home .page-hero__inner { max-width: 920px; }
.page-hero--home h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); }
.page-hero--home::after {
  background-image:
    repeating-radial-gradient(circle at 86% 26%, rgba(255, 255, 255, .075) 0 1px, rgba(255, 255, 255, 0) 1px 62px),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: radial-gradient(940px 560px at 84% 24%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(940px 560px at 84% 24%, #000 0%, transparent 76%);
}

/* 23e. Section rhythm ---------------------------------------------------- */
.section--soft { background: linear-gradient(180deg, #e9eff9 0%, #f2f6fc 100%); }

/* 23f. Home: entry cards & closing block --------------------------------- */
.grid--entries { max-width: 900px; }

.entry-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-color: var(--hairline);
  box-shadow: var(--shadow-card);
}
.entry-card:hover {
  transform: translateY(-5px);
  border-color: rgba(74, 135, 232, .45);
  box-shadow: var(--shadow-card-hover);
}
.entry-card__img {
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 0;
  transition: transform .6s var(--ease);
}
.entry-card:hover .entry-card__img { transform: scale(1.035); }
/* keep the label above the zooming photograph */
.entry-card h3,
.entry-card__cta { position: relative; z-index: 1; }
.entry-card h3 {
  padding: 22px 26px 0;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  letter-spacing: -.022em;
}
.entry-card h3:last-child { padding-bottom: 26px; }
.entry-card__cta { padding: 10px 26px 26px; }

.closing {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-color: var(--hairline);
  box-shadow: var(--shadow-card);
  background:
    radial-gradient(620px 280px at 100% 0%, rgba(53, 192, 95, .07), transparent 62%),
    #fff;
}
.closing::before {
  content: "";
  position: absolute;
  left: clamp(26px, 3vw, 44px);
  right: clamp(26px, 3vw, 44px);
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-grad);
}
.closing__img {
  width: 132px;
  height: 110px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.closing__body h2 { letter-spacing: -.03em; }
.closing__line strong { color: var(--navy-800); }
.closing__ico { color: var(--green-500); }

/* 23g. Products page: catalogue cards ------------------------------------ */
.cat-card {
  border-radius: var(--radius-xl);
  border-color: var(--hairline);
  box-shadow: var(--shadow-card);
}
.cat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(74, 135, 232, .45);
  box-shadow: var(--shadow-card-hover);
}
.cat-card__media { background: radial-gradient(130% 105% at 50% 0%, #f1f6ff 0%, #ffffff 70%); }
.cat-card__media img { padding: 18px; }
.cat-card__body { padding: 22px 24px 24px; }
.cat-card__body h3 { letter-spacing: -.022em; }

/* an arrow badge that rises out of the photo corner on hover ------------ */
.cat-card__media::before {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, var(--green-500), var(--blue-500))
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center / 17px 17px no-repeat;
  box-shadow: 0 10px 22px -8px rgba(11, 22, 56, .6);
  opacity: 0;
  transform: translateY(10px) scale(.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.cat-card:hover .cat-card__media::before,
.cat-card:focus-within .cat-card__media::before { opacity: 1; transform: none; }

/* 23h. Product pages: photograph gallery & link list --------------------- */
.gallery { gap: clamp(14px, 1.6vw, 20px); }
.gallery__item {
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  box-shadow: var(--shadow-card);
}
.gallery__item:hover {
  transform: translateY(-5px);
  border-color: rgba(74, 135, 232, .42);
  box-shadow: var(--shadow-card-hover);
}
.gallery__thumb { background: radial-gradient(130% 100% at 50% 0%, #f2f7ff 0%, #ffffff 68%); }
.gallery__thumb img { padding: 12px; }
.gallery__item:hover .gallery__thumb img { transform: scale(1.055); }

/* "click to enlarge" affordance */
.gallery__item::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    rgba(11, 22, 56, .82)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6M11 8.2v5.6M8.2 11h5.6'/%3E%3C/svg%3E")
    center / 15px 15px no-repeat;
  box-shadow: 0 8px 18px -6px rgba(11, 22, 56, .5);
  opacity: 0;
  transform: scale(.75);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.gallery__item:hover::before,
.gallery__item:focus-visible::before { opacity: 1; transform: none; }

.gallery__cap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px 14px;
  border-top-color: var(--line-soft);
  color: var(--ink-600);
  font-weight: 600;
}
.gallery__cap::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-100);
}

.prod-links a {
  position: relative;
  overflow: hidden;
  padding: 14px 18px 14px 20px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* replace the legacy marker with an accent rail that grows out of the top */
.prod-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-grad);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur) var(--ease);
}
.prod-links a::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 16px;
  height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: .32;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.prod-links a:hover {
  transform: translateX(3px);
  border-color: rgba(74, 135, 232, .45);
  color: var(--blue-500);
  box-shadow: var(--shadow-sm);
}
.prod-links a:hover::before { transform: scaleY(1); }
.prod-links a:hover::after { opacity: 1; transform: translateX(3px); }
.prod-links a[aria-current="page"] {
  border-color: rgba(74, 135, 232, .45);
  background: var(--blue-50);
  color: var(--blue-500);
}
.prod-links a[aria-current="page"]::before { transform: scaleY(1); }
.prod-links a[aria-current="page"]::after { opacity: .85; }

/* 23i. Contact page: office cards ---------------------------------------- */
.office {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 28px;
  border-radius: var(--radius-xl);
  border-color: var(--hairline);
  box-shadow: var(--shadow-card);
}
.office::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent-grad);
  opacity: .9;
}
.office:hover {
  transform: translateY(-5px);
  border-color: rgba(74, 135, 232, .4);
  box-shadow: var(--shadow-card-hover);
}
.office h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.office dl { gap: 0; }
.office dl > div + div {
  border-top: 1px dashed var(--line-soft);
  padding-top: 11px;
  margin-top: 11px;
}
.office dd { color: var(--ink-700); }

/* 23j. Footer & floating controls ---------------------------------------- */
.site-footer {
  position: relative;
  border-top: 0;
  background:
    radial-gradient(920px 420px at 10% -10%, rgba(43, 98, 196, .22), transparent 62%),
    radial-gradient(740px 360px at 92% 2%, rgba(37, 162, 74, .14), transparent 64%),
    linear-gradient(180deg, #081026 0%, var(--navy-950) 55%, #050a1c 100%);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--green-500) 20%,
    var(--blue-500) 80%, transparent 100%);
  opacity: .8;
}
.footer h3 { position: relative; padding-bottom: 11px; }
.footer h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-grad);
}
.footer ul:not(.footer__contact) a {
  display: inline-block;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer ul:not(.footer__contact) a:hover { transform: translateX(3px); }

.to-top {
  background: linear-gradient(140deg, var(--green-500), var(--blue-500));
  box-shadow: 0 14px 30px -12px rgba(11, 22, 56, .6);
}
.to-top:hover { transform: translateY(-4px) scale(1.04); }

.btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 12px 26px -12px rgba(43, 98, 196, .85);
}
.btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 18px 34px -14px rgba(43, 98, 196, .9);
}
.search-box input { box-shadow: var(--shadow-xs); }
.search-box input:focus { box-shadow: var(--shadow-sm), var(--ring); }

/* 23k. Responsive & print for this layer --------------------------------- */
@media (max-width: 980px) {
  .page-hero--home { padding-block: clamp(56px, 9vw, 96px); }
  .entry-card h3 { padding: 19px 22px 0; }
  .entry-card h3:last-child { padding-bottom: 22px; }
  .entry-card__cta { padding: 10px 22px 22px; }
  .office { padding: 26px 22px 24px; }
  .closing__img { width: 112px; height: 94px; }
}

@media (max-width: 720px) {
  .page-hero { padding-block: clamp(44px, 12vw, 76px); }
  .page-hero h1 { font-size: clamp(1.95rem, 1.4rem + 3.2vw, 2.7rem); }
  .page-hero--home h1 { font-size: clamp(2.05rem, 1.4rem + 4vw, 2.9rem); }
  .prod-links a { padding: 13px 16px 13px 18px; }
  .gallery__thumb img { padding: 10px; }
  .footer h3 { padding-bottom: 9px; }
}

@media print {
  body, .section--soft { background: #fff !important; }
  .page-hero, .site-footer { box-shadow: none !important; }
  .page-hero::before, .site-footer::before,
  .closing::before, .office::before,
  .cat-card__media::before, .gallery__item::before { content: none !important; }
}

/* ======================================================================
   24. Home hero slogan
   ----------------------------------------------------------------------
   The legacy home page carried the company positioning line inside the
   bitmap banner `top2.jpg` (772 x 50, a blue sky strip). It is rebuilt
   here as live text: it stays sharp at any pixel density, wraps instead
   of being cropped, and remains readable, selectable and searchable with
   no image and no JavaScript.

   The selector is written as `.page-hero .page-hero__slogan` on purpose:
   a bare `.page-hero__slogan` (0,1,0) would lose to the earlier
   `.page-hero p` rule (0,1,1) that sets the hero paragraph colour.
   ====================================================================== */
.page-hero .page-hero__slogan {
  display: inline-block;
  max-width: 100%;
  margin: .25rem 0 1.4rem;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(100deg, var(--green-500) 0%, #2f9ed6 52%, var(--blue-500) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 16px 34px -18px rgba(43, 98, 196, .95);
  color: #fff;
  font-size: clamp(.82rem, .68rem + .62vw, 1.04rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .11em;
  text-align: center;      /* no effect while it fits one line; centres the
                              lines once the pill wraps on narrow screens */
  text-transform: uppercase;
  text-wrap: balance;
}

@media (max-width: 720px) {
  .page-hero .page-hero__slogan {
    margin-bottom: 1.2rem;
    padding: 9px 16px;
    letter-spacing: .08em;
  }
}

@media (max-width: 420px) {
  .page-hero .page-hero__slogan { padding: 8px 13px; letter-spacing: .05em; }
}

/* print: backgrounds are not painted by default, so white text on the
   gradient plaque would disappear on paper — fall back to plain black --- */
@media print {
  .page-hero .page-hero__slogan {
    padding: 0;
    background: none !important;
    box-shadow: none !important;
    color: #000 !important;
  }
}

/* ======================================================================
   25. Projects page: rebuilt flow arrows
   ----------------------------------------------------------------------
   The legacy site drew the project flow with three GIFs from 2009
   (photo/project1.gif, project2.gif, project3.gif) — tiny 75x43 / 43x75
   bitmaps that render at 1:1, so they look soft and blurry on any modern
   display. They carried a beige plate and a gold 3-D bevel that clashes
   with the navy/green palette of this site.

   They are now inline SVG arrows (crisp at every DPR, themeable through
   currentColor, zero extra requests). All three share ONE geometry — same
   bar thickness, same head size — and differ only by rotation, so their
   visual weight is identical.

   DIRECTION IS NOT OPTIONAL — copy the legacy art exactly (it zig-zags):
     row 1: left -> right       (project1.gif, arrowhead right)
     drop : right side, downward (project2.gif, arrowhead down)
     row 2: right -> left        (project3.gif, arrowhead LEFT)
   Row 2 therefore points left; do not "correct" it to the right.

   There are deliberately NO dashed connectors (they were removed on
   request): the arrows alone carry the flow.

   The three .gif files are kept on disk: reverting is then a pure
   markup swap with no asset work.
   ====================================================================== */

.flow__arrow,
.flow__down {
  width: auto;               /* overrides the old fixed 75px / 43px */
  opacity: 1;                /* overrides the old .85 */
  color: var(--green-500);
  overflow: visible;
}
/* The three arrows must LOOK the same weight, so they are built from the
   same ink dimensions and only transposed:
       horizontal (viewBox 96x62): bar 22u, head span 54u, head len 36u, len 88u
       vertical   (viewBox 62x96): the same numbers with x/y swapped
   The two boxes are transposes of each other, so the horizontal arrow is
   sized by HEIGHT and the vertical one by WIDTH — both then scale by
   58/62 = 0.9355, giving an identical bar (20.58px), head span (50.5px) and
   head length (33.7px) on all three.
   Sizing the vertical arrow by height instead (58/96 = 0.604) would shrink
   its ink to 65% and make it look thin. And rotating the horizontal markup
   90deg with CSS does NOT work either: the box itself turns, so the head
   ends up spanning the full 58px instead of 50.5px and the arrow reads
   heavier than its neighbours. */
/* Halved on request (2026-09-23): the arrows were 58px tall / 89.8px long,
   which read as over-scaled next to the cards and forced a lot of whitespace
   into the flow. At half size the geometry ratios above are unchanged — only
   the scale factor moves from 58/62 to 29/62 — so the three arrows still
   match each other exactly (bar 10.3px, head span 25.3px, head len 16.9px). */
.flow__arrow { height: 29px; width: auto; align-self: center; }
/* Both dimensions are stated explicitly. `height: auto` cannot be used for
   the vertical arrow: .flow is a grid, and an auto-height grid item lets the
   row height and the item's own height feed back into each other, which CSS
   resolves to a collapsed ~19px (measured) instead of the intended 44.9px.
   Pinning the height removes the circularity. 44.9px = 29px x (96/62), i.e.
   the same scale factor the horizontal arrows use. */
.flow__down  { width: 29px; height: 44.9px; align-self: center; }

/* Alignment. The grid is one column of full-width rows, so the down arrow is
   positioned against the whole row, not against the right-hand card. The
   legacy rule inset it by clamp(0px, 6%, 90px), which at 1440px put its centre
   ~69px inside the right card's right edge and left it looking detached —
   worse now that the arrow is half the size.
   The down arrow marks the turn between the two rows, so it belongs on the
   same vertical line the horizontal arrows travel: the centre of the right
   card's column. That column's right edge sits at
       container right - (100% - card share of the row)
   and the centre is half a card in from there. Expressing it as a percentage
   of the row keeps it correct at every width without magic numbers. */
.flow__down {
  justify-self: end;
  /* Half the row's remaining slack plus a quarter of the right card, measured
     as ~22% of the row at 1440px — this parks the arrow's centre on the right
     card's centre line at every width, since both scale with the row. */
  margin-inline-end: 22%;
}

/* No dashed connectors: the arrows alone carry the flow. Everything below is
   deliberately absent — the ::before/::after dashes, the white discs that
   used to break them, and the `.flow` isolation that only existed to trap
   their negative z-index. Reinstating any of it requires all three parts. */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* The two rows meet through the down arrow, so its own height IS the vertical
   rhythm. Give it a small, even amount of air above and below (6px each)
   instead of the previous ~69px of stacked gap + arrow + gap, which read as
   a lot of dead space once the arrows were halved. */
.flow__row { margin-block: 6px; }

/* The arrow column is `auto`, so it is exactly as wide as the arrow + the row
   gap on each side. Halving the arrow shrank that column automatically, which
   is what pulls the two cards closer together. The row gap is trimmed to keep
   the arrows feeling attached to the cards rather than floating. */
.flow__row { gap: clamp(10px, 1.2vw, 16px); }

.flow__row,
.flow__down { position: relative; z-index: 0; }

/* The arrowhead nudges along the path — motion hints at direction, so the
   two rows must nudge OPPOSITE ways: row 1 travels right, row 2 travels
   left. Both rows use .flow__arrow, so they are told apart by position.
   (The down arrow sits between them, so row 2 is :last-child, not
   :nth-child(2) — target it that way to stay robust.)
   NOTE: `.flow__arrow` / `.flow__down` ARE the <svg> elements, so these
   rules must target them directly — a descendant selector like
   `.flow__down svg` never matches and would be silently dead. */
.flow__arrow,
.flow__down { transition: transform .3s var(--ease); }
.flow__row:first-child .flow__arrow:hover { transform: translateX(4px); }
.flow__row:last-child .flow__arrow:hover { transform: translateX(-4px); }
.flow__down:hover { transform: translateY(4px); }

@media (prefers-reduced-motion: reduce) {
  .flow__arrow,
  .flow__down { transition: none; }
}

@media print {
  .flow__arrow,
  .flow__down { color: #666 !important; }
}

/* ======================================================================
   26. Quality page: the quality policy panel
   ----------------------------------------------------------------------
   The policy used to be a 527x252 bitmap (Quality.PNG) whose text went
   blurry as soon as it was scaled, could not be selected or searched, and
   was invisible to screen readers. It is now real HTML, one <li> per
   clause, so it reflows on any screen, stays crisp at every DPR, and is
   announced and searchable.

   The wording is copied from that image verbatim, in both languages —
   do not paraphrase or reorder:
       FLYIN Quality Policy / 飞蓝质量方针
       Follow Customers' Requirement / 紧跟客户需求
       Ensure Personnel Involvement / 坚持全员参与
       Respect Total Quality / 贯彻全面质量
       Aim for Daily Improvement / 争取天天进步

   The little sun mark is inline SVG echoing the bitmap's hand-drawn icon,
   recoloured to the site's green rather than the image's flat blue, and
   the clause text pairs English with Chinese exactly as the original did.
   ====================================================================== */

.policy {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 2.4vw, 30px);
  overflow: hidden;
}

.policy__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  /* the green->blue rule mirrors .section--tint's divider so the panel
     reads as part of the same system rather than a pasted-in graphic */
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--green-500), var(--blue-400)) 1;
}

.policy__title {
  margin: 0;
  font-size: clamp(1.12rem, 1rem + .5vw, 1.34rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--navy-800);
}

.policy__title-cn {
  margin: 0;
  font-size: clamp(1rem, .94rem + .35vw, 1.14rem);
  font-weight: 700;
  color: var(--green-600);
  letter-spacing: .04em;
}

.policy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  counter-reset: policy;
}

.policy__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* hairline separators between clauses, but never above the first one */
.policy__item + .policy__item { box-shadow: 0 -1px 0 var(--line-soft); }

.policy__item:hover {
  background: var(--surface-soft);
  box-shadow: none;
  transform: translateX(2px);
}

.policy__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  color: var(--green-600);
  background: var(--green-100);
}

.policy__mark svg { width: 17px; height: 17px; }

.policy__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.policy__en {
  font-size: clamp(.98rem, .93rem + .22vw, 1.06rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-800);
}

.policy__cn {
  font-size: clamp(.9rem, .86rem + .18vw, .98rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-500);
  letter-spacing: .02em;
}

/* The split media column is wider than the panel needs on very wide
   screens, so let the policy panel use the full column width. */
.split__media > .policy { width: 100%; }

@media (max-width: 720px) {
  /* stack the bilingual pair so neither line has to wrap awkwardly */
  .policy__text { display: grid; gap: 3px; }
  .policy__item { align-items: start; padding: 12px 8px; }
  .policy__mark { margin-top: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .policy__item { transition: none; }
  .policy__item:hover { transform: none; }
}

/* Backgrounds drop out in print and the green-on-green tint would vanish,
   so flatten the mark to a neutral outline that survives grayscale. */
@media print {
  .policy {
    box-shadow: none !important;
    background: #fff !important;
  }
  .policy__title { color: #000 !important; }
  .policy__title-cn { color: #333 !important; }
  .policy__mark { background: none !important; color: #333 !important; }
  .policy__en { color: #000 !important; }
  .policy__cn { color: #333 !important; }
}

/* 27. Quality page: balance the policy panel against the text column --------
   History worth keeping: this section first existed to force the panel to the
   text column's exact height (250px). It got there -- 251.5px, within 1.5px --
   but it paid for it with the panel's own breathing room: item padding was
   squeezed to 5px top and bottom and the gaps between clauses to zero. The
   result matched to the pixel and still read as unbalanced, because the two
   columns had opposite density. The left side is airy (18.56px text on a
   31.55px line, 12px between list rows); the right side was cramped. Equal
   height is not the same thing as equal weight.

   Matching 250px is also arithmetically hostile. A comfortable panel needs
   ~318px (20px panel padding, a 40px head, 4 items at 38px content + 10px
   padding each, 2px gaps). Forcing that into 250px can only be done by
   removing whitespace from a component that has none to spare.

   So the goal here is balance, not equality:
     - the panel gets back comfortable, symmetric padding on the same rhythm
       as the left column (it is the page's most emphatic element and should
       look deliberate, not squeezed);
     - the two columns are re-cut so neither is padded with dead space;
     - `.split` keeps `align-items: center`, so whatever height difference
       remains is shared evenly above and below rather than hanging off one
       end.

   No font-size is touched anywhere in this section. All six type sizes keep
   the values measured in section 26: the four English clauses, the four
   Chinese captions and both title lines. */
.split.quality-split { grid-template-columns: minmax(0, 1fr) 520px; }
.split.quality-split > .split__media > .policy { padding: 16px 20px; }
.split.quality-split > .split__media > .policy .policy__head {
  padding-bottom: 9px;
  margin-bottom: 2px;
}
.split.quality-split > .split__media > .policy .policy__list { gap: 1px; }
.split.quality-split > .split__media > .policy .policy__item {
  padding: 7px 12px;
}
/* The mark is trimmed a touch so it does not set the row height. */
.split.quality-split > .split__media > .policy .policy__mark {
  width: 28px;
  height: 28px;
}

/* Around 1100px the bilingual pairs stop fitting on one line and each clause
   wraps to two. That alone grew the panel from 252px to 310px and broke the
   row. Rather than let the type wrap, hold each pair on one line so every
   clause keeps the same single-row height and the panel stays predictable.
   `min-width: 0` is needed on the flex child or the pair cannot be held.

   The longest pair ("Follow Customers' Requirement" + 紧跟客户需求) needs about
   365px, so the panel must offer ~358px of text width for all four rows to
   stay uniform. At the 460px track used below that came up a few px short and
   that one row wrapped while the other three did not, which looked uneven --
   hence the 480px track here. */
.split.quality-split > .split__media > .policy .policy__text { min-width: 0; }
.split.quality-split > .split__media > .policy .policy__en,
.split.quality-split > .split__media > .policy .policy__cn {
  white-space: nowrap;
}

/* Below the stack point there is no second column to balance against, so the
   panel returns to generous spacing and the text is free to wrap again. */
@media (max-width: 1100px) {
  .split.quality-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  }
  .split.quality-split > .split__media > .policy .policy__item {
    padding-block: 6px;
  }
}
@media (max-width: 900px) {
  .split.quality-split { grid-template-columns: 1fr; }
  .split.quality-split > .split__media > .policy { padding: clamp(20px, 3vw, 30px); }
  .split.quality-split > .split__media > .policy .policy__list { gap: 6px; }
  .split.quality-split > .split__media > .policy .policy__item {
    padding: 13px 14px;
  }
}

/* 28. Logistics page: balance the photo against the text column -----------
   The photo is the first child of .split__media (the quality page's panel is
   not), so nothing here can leak onto another page.

   Two things had to be solved together, because fixing only the first is what
   left the page looking lopsided:

   1. HEIGHT. Matching the photo to the text column's height alone is not
      enough -- `.split` is `align-items: center`, which only aligns the two
      vertical midlines, it does not move any horizontal space. The photo is a
      grid item in a 1.05fr track, so as its width falls the track stays put
      and the leftover shows up as a dead gap: measured at 1440px, the photo
      covered 233.7px of a 575.1px track, stranding 341.4px of nothing (29.6%
      of the whole .split) between the photo and the text.

   2. WIDTH. The original `1.05fr .95fr` is a photo-heavy split meant for a
      full-bleed photo. Here the photo is deliberately smaller than the text
      block, so both the media track and the text track are given workable
      fixed-ish sizes instead of fractions. The text track is capped so the
      measure stays readable -- at 1fr it was measured at 861.8px at 1440px,
      which is well past a comfortable line length.

   The photo is sized from the text column's height, not the reverse. At the
   text width set below (520px) the four items occupy four lines and the block
   is 200.3px tall; the source is 902x833 with `aspect-ratio: 350/300` still
   applied, so height 200.3 needs width 200.3 x 1.1667 = 233.7px.

   All values are plain pixels rather than vw. A vw width is only correct at
   the exact viewport it was derived from: measured, it gave 174.4px at 1280px
   and 152.2px at 1120px against a text column still 200.3px there, because
   the list's font clamp has already topped out and stops tracking the
   viewport. Fixed pixels hold the match across the whole range.

   `aspect-ratio: 350/300` is left untouched and `object-fit` stays `cover`, so
   the photo renders exactly as before, just at a different scale. (As before,
   that does mean cover crops the 902x833 source about 7% a side to fill the
   1.1667 box -- pre-existing, left as-is per the earlier decision.) */
.split.logistics-split {
  grid-template-columns: min(233.7px, 21vw) minmax(0, 520px);
  gap: clamp(24px, 3vw, 44px);
  justify-content: start;
  align-items: start;
}
/* The photo is fluid everywhere, so there is never a step change in its size.
   `100%` of its own track means it shrinks smoothly with the viewport; above
   the width where the track is at its 233.7px cap the track stops growing
   (it is capped by min()), so the photo settles at 233.7px and holds.

   Two breakpoints were tried before this and both produced a visible jump --
   the photo snapped 233.7px -> 555.8px, and then 233.7px -> 594.6px with a
   corrected threshold. The reason is that a `--window-size` of N yields a
   clientWidth of roughly N-41, so any threshold chosen by eye lands in the
   wrong place, and the exact width where the two columns stop fitting also
   depends on the gap clamp. A fluid track removes the question. */
.split.logistics-split > .split__media > img:first-child { width: 100%; }
@media (max-width: 1030px) {
  .split.logistics-split {
    grid-template-columns: min(233.7px, 21vw) minmax(0, 1fr);
    justify-content: stretch;
  }
}
/* .split collapses to a single column at 980px. From there the photo is no
   longer beside the text, so it returns to full width. This must use 980
   (the real collapse point) and not a later value such as 860 -- at 860 the
   photo was left stuck at its small fixed width above the text. */
@media (max-width: 980px) {
  .split.logistics-split { grid-template-columns: 1fr; }
  .split.logistics-split > .split__media > img:first-child { width: 100%; }
}

/* 29. Factory page: the "combined solutions" diagram ------------------------
   This element used to be index4.PNG, a 527x99 bitmap. `.factory-shot img`
   (section 21f) gives it `width: 100%`, so on a 1152px column it was blown up
   to 1152x216.5 -- a 2.19x upscale of an already heavily compressed file,
   which is why it read as blurry. It is now inline SVG.

   The SVG keeps `viewBox="0 0 527 99"`, i.e. the source bitmap's own pixel
   grid, so every coordinate below is the measured coordinate in the original
   artwork and the rendered geometry is unchanged: `width: 100%` scales the
   viewBox exactly as the <img> did.

   `height: auto` is paired with an explicit `aspect-ratio` because a replaced
   element with `height: auto` does not derive its height from a viewBox in
   every engine; the ratio makes the box height unconditional.

   The border / radius / shadow repeat section 21f rather than editing it, and
   the white fill is drawn in the SVG itself, so the element is a white card
   with the same 1px hairline and 16px radius it had as a bitmap.

   The `img-fade` class is intentionally dropped: it existed to fade the
   bitmap in once it had downloaded, and inline SVG has nothing to wait for.
   The parent <figure> already carries `data-reveal` for the entrance. */
.factory-shot > .factory-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 527 / 99;
  /* The artwork's own sans, not `--font-sans`. The original labels are Arial
     at 16px (12pt) -- the cap height measures 11.5 units, i.e. 11.5/0.716 =
     16.06px, and the right-hand wordmark measures the same. Arial is also
     13-18% wider than the Segoe UI that `--font-sans` resolves to on Windows:
     measured, "Close-related partner manufacturers" comes out 257 units in
     Arial 16 against the original's 254, but only 224.9 in Segoe UI 14. Using
     the site stack would leave the dotted boxes visibly slacker than in the
     source. On systems without Arial the fallbacks are metric-compatible
     (Liberation Sans, Arimo), so the widths still hold. */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;              /* user units: 16px in the 527x99 viewBox */
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
/* Every string in the SVG also carries a `textLength` pinned to the width it
   has in the original artwork. That is not a CSS concern, but it is what keeps
   the dotted boxes at their exact proportions if the font that actually
   resolves is not metric-compatible. Note the value is the ADVANCE width, not
   the ink width: it runs about 3-4 units wider than the visible glyphs, so
   pinning to a measured ink width comes out visibly narrow. */

/* The two dotted source boxes: 3px round dots on a 6px pitch, which is the
   pattern measured off the original (3px dot, 3px gap). */
.factory-map__box {
  fill: none;
  stroke: #00ff00;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 6;
  stroke-dashoffset: 3;
}

/* Source labels and the outcome wordmark. */
.factory-map__label { fill: #0000ff; }
.factory-map__outcome { fill: #0000ff; }

/* The converging arrows. */
.factory-map__arrow { fill: #333399; }

/* The smiley: a stroked ring, two filled eyes and a stroked smile, all in the
   olive green sampled off the original. The mouth is deliberately `fill: none`
   -- a filled open quadratic would paint the area under the curve. */
.factory-map__ring {
  fill: none;
  stroke: #667929;
  stroke-width: 4;
}
.factory-map__eyes { fill: #667929; }
.factory-map__mouth {
  fill: none;
  stroke: #667929;
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* Under a phone the 14-unit type in a 527-unit viewBox scales down with the
   whole drawing, so nothing here needs a breakpoint -- the diagram is a fixed
   aspect ratio and stays legible at every width. */