/* ============================================================================
   LuTrade website stylesheet
   Art direction: Industrial-Editorial
       * Deep navy leads (carrying over the brand's existing 0B1F3F family), warm off-white ground, a single amber accent
       * Hairline rules instead of stacked rounded shadows; tabular figures throughout; numbered sections, like a technical document
       * Signatures: the port marquee beneath the hero + the 01/02/03 numbering running through the pages
     Type: Archivo (display) + IBM Plex Sans (body)
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand colours (taken from the existing corporate identity) */
  --navy-900: #071528;
  --navy-800: #0b1f3f;
  --navy-700: #12305c;
  --navy-600: #1b3a63;
  --navy-300: #7d93b8;

  --accent: #e0872b;
  --accent-strong: #c46f14;
  --accent-soft: rgba(224, 135, 43, 0.14);

  /* Neutrals: deliberately avoiding pure white and pure black */
  --paper: #fbfaf7;
  --paper-2: #f3f1ea;
  --surface: #ffffff;
  --ink: #12161c;
  --body-text: #3d4757;
  --muted: #79839a;

  --line: rgba(11, 31, 63, 0.12);
  --line-strong: rgba(11, 31, 63, 0.22);
  --line-inverse: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (modular, 1.25) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: 1.875rem;
  --fs-2xl: clamp(1.9rem, 3.4vw, 2.85rem);
  --fs-3xl: clamp(2.4rem, 5vw, 4.1rem);
  --fs-hero: clamp(2.9rem, 6.6vw, 5.4rem);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);

  --radius: 2px;
  --radius-lg: 4px;

  --shadow-1: 0 2px 10px rgba(7, 21, 40, 0.06);
  --shadow-2: 0 10px 34px rgba(7, 21, 40, 0.1);
  --shadow-3: 0 26px 70px rgba(7, 21, 40, 0.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 170ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  --header-h: 74px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

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

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

::selection { background: var(--accent); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: 12px 20px;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.16em;
}
.icon--after { margin-left: 0.5em; }
.icon--before { margin-right: 0.5em; }

/* ---------- 3. Top utility bar ---------- */
.utilbar {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.utilbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 38px;
  flex-wrap: wrap;
}
.utilbar__slogan {
  margin: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 顶部信息条：中国 / 巴西 各占一行（国旗 + 邮箱 + 电话），整块靠右。
   为什么竖排而不是并排：四个联系入口横排要 786px，加上左侧 slogan 就超出
   1240px 的内容宽度，条子会被挤成两行、高度翻倍。竖排后整块只要 373px，
   任何桌面宽度都单行。

   为什么整块做成网格：两行的邮箱串长短不一（Masone@… 比 correa@… 长），
   若每行各自 flex，电话列会被长短不一的邮箱推来推去，两行的电话就错开了。
   拆成一张三列网格（.utilbar__nat 用 display:contents 去掉外壳参与排布）后，
   列宽由两行共同决定，邮箱列与电话列天然纵向对齐。

   邮箱在前、电话在后：邮箱是首选联系方式（可留痕、可发资料），电话用于急事。 */
.utilbar__meta {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: end;
  column-gap: var(--sp-4);
  row-gap: 2px;
}
.utilbar__nat { display: contents; }
/* 国旗列固定宽度：两行国旗（中巴旗帜长宽比不同）各按自身宽度排，
   后面的邮箱列仍会错开半个身位。 */
.utilbar__natif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
}
.utilbar__natif .flag { height: 15px; }
/* 该国没填这个字段时占位，保证网格列不错位 */
.utilbar__gap { display: block; min-width: 1px; }
.utilbar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) ease-out;
}
.utilbar__link:hover { color: var(--accent); }

/* 语言切换（顶部条最右端）。做成两格分段控件而不是下拉菜单：
   只有两种语言时，另一种语言一眼可见、一次点击可达，不必先展开再选（少一次交互）。
   用发丝竖线与联系信息分开，和页脚、导航的分隔语言一致。 */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--line-inverse);
}
.langswitch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color var(--dur-fast) ease-out, background-color var(--dur-fast) ease-out;
}
.langswitch__item:hover { color: var(--accent); }
.langswitch__item.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
}

/* 内容宽 1240px、两侧留白各 5vw。窄到 1160px 以下时 slogan 会把
   信息条 + 语言切换挤到第二行，条子高度翻倍；到这个尺寸让出 slogan 换单行 ——
   品牌主张在首屏与页脚都已出现，不靠这一行。 */
@media (max-width: 1160px) {
  .utilbar__slogan { display: none; }
  .utilbar__inner { justify-content: flex-end; }
}
@media (max-width: 640px) {
  /* 文字全收起来，只留国旗 + 两个图标，这是仍能读懂的紧凑形式 */
  .utilbar__link span { display: none; }
  .utilbar__gap { display: none; }
  .utilbar__meta { column-gap: 12px; }
  .langswitch { margin-left: 12px; padding-left: 12px; }
}

/* ---------- 4. Header & navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}
.site-header__brand { text-decoration: none; color: var(--navy-800); }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { display: block; height: 40px; width: auto; flex: none; }
.brand--inverse { color: #fff; }
.brand--sm .brand__mark { height: 32px; }

.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
  display: block;
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy-800);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.nav__link:hover { background: var(--paper-2); color: var(--navy-600); }
.nav__link.is-active { color: var(--accent-strong); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) ease-out, transform var(--dur-fast) ease-out, visibility var(--dur-fast);
}
.nav__item--has-menu:hover .nav__submenu,
.nav__item--has-menu:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__sublink {
  display: block;
  padding: 9px 12px;
  font-size: 0.9rem;
  color: var(--body-text);
  text-decoration: none;
}
.nav__sublink:hover { background: var(--paper-2); color: var(--navy-800); }

.navtoggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
}
.navtoggle__bars { display: grid; gap: 4px; width: 18px; }
.navtoggle__bars i {
  display: block;
  height: 2px;
  background: var(--navy-800);
  transition: transform var(--dur-fast) ease-out, opacity var(--dur-fast) ease-out;
}

@media (max-width: 1080px) {
  .navtoggle { display: inline-flex; }
  .site-header__cta { display: none; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: var(--navy-900);
    padding: calc(var(--header-h) + 40px) var(--gut) var(--sp-6);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  body.nav-open .navtoggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); background: #fff; }
  body.nav-open .navtoggle__bars i:nth-child(2) { opacity: 0; }
  body.nav-open .navtoggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: #fff; }
  body.nav-open .navtoggle { border-color: rgba(255, 255, 255, 0.32); position: relative; z-index: 96; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line-inverse); }
  .nav__link {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    padding: 18px 0;
  }
  .nav__link.is-active { color: var(--accent); }
  .nav__link.is-active::after { display: none; }
  .nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 12px 14px;
    min-width: 0;
  }
  .nav__sublink { color: rgba(255, 255, 255, 0.72); padding: 8px 0; font-size: 1rem; }
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out,
              border-color var(--dur-fast) ease-out, transform var(--dur-fast) ease-out;
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 1rem; }

.btn--accent { background: var(--accent); color: #1b1207; }
.btn--accent:hover { background: var(--accent-strong); color: #fff; }

.btn--solid { background: var(--navy-800); color: #fff; }
.btn--solid:hover { background: var(--navy-700); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--navy-800);
}
.btn--ghost:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.btn--onDark { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.btn--onDark:hover { background: #fff; color: var(--navy-800); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy-600);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}
.link-arrow:hover { color: var(--accent-strong); border-color: var(--accent); }
.link-arrow .icon { transition: transform var(--dur-fast) ease-out; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- 6. Generic sections ---------- */
.section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.section--tall { padding: clamp(80px, 12vw, 160px) 0; }
.section--muted { background: var(--paper-2); }
.section--navy { background: var(--navy-800); color: rgba(255, 255, 255, 0.76); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section__foot { margin-top: var(--sp-5); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.eyebrow__rule { display: block; width: 26px; height: 1px; background: currentColor; }
.eyebrow--inverse { color: var(--accent); }

.sechead { max-width: 760px; margin-bottom: var(--sp-6); position: relative; }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 8px;
}
.sechead__title { font-size: var(--fs-2xl); }
.sechead__intro { margin-top: var(--sp-3); color: var(--body-text); max-width: 62ch; }
.section--navy .sechead__intro { color: rgba(255, 255, 255, 0.72); }
.section--navy .sechead__index { color: var(--navy-300); }

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.pagehero {
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 78px);
  position: relative;
  overflow: hidden;
}
.pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 84px 84px;
  pointer-events: none;
}
.pagehero--image { background-image: linear-gradient(rgba(7, 21, 40, 0.9), rgba(7, 21, 40, 0.94)), var(--hero-image); background-size: cover; background-position: center; }
.pagehero__inner { position: relative; z-index: 1; }
.pagehero__title { color: #fff; font-size: var(--fs-3xl); margin-top: 6px; }
.pagehero__sub {
  margin-top: var(--sp-4);
  max-width: 68ch;
  font-size: var(--fs-md);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.74);
}

.crumbs { margin-bottom: var(--sp-4); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.crumbs__list li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, 0.34); }
.crumbs a { color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: rgba(255, 255, 255, 0.9); }
/* Article breadcrumbs sit on a light ground */
.article .crumbs__list li + li::before { color: var(--line-strong); }
.article .crumbs a { color: var(--muted); }
.article .crumbs span[aria-current] { color: var(--navy-800); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.76);
  padding: clamp(72px, 11vw, 132px) 0 clamp(56px, 7vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
/* ---- Hero backdrop: a container vessel under way ----
   Three stacked layers, bottom to top:
     1 .hero__bg     still photograph — paints on the first frame and stays the
                     whole backdrop whenever the video cannot play
     2 .hero__video  looping muted video (the actual motion)
     3 .hero__scrim  directional wash, above the video, so headline contrast
                     never depends on how bright a particular frame happens to be
   Only one layer animates — the video. Running a CSS drift on the still as
   well would double the motion and burn GPU on pixels nobody can see. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("/img/hero-ship.jpg");
  background-size: cover;
  background-position: center 42%;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Deliberately directional. The headline sits in the left column, so the wash
     is heavy there and stays light across the right two thirds where the hull
     and the water are. An even scrim would keep the text readable but would
     flatten the motion into something that reads as a still. */
  background-image:
    linear-gradient(100deg,
      rgba(7, 21, 40, 0.88) 0%,
      rgba(7, 21, 40, 0.74) 34%,
      rgba(7, 21, 40, 0.28) 64%,
      rgba(7, 21, 40, 0.34) 100%),
    linear-gradient(to top,
      rgba(7, 21, 40, 0.86) 0%,
      rgba(7, 21, 40, 0.12) 46%,
      rgba(7, 21, 40, 0) 100%),
    radial-gradient(52rem 30rem at 80% -10%, rgba(30, 90, 168, 0.26), transparent 62%);
}

/* On narrow screens a portrait-cropped vessel image is used so the hull is never squashed */
@media (max-width: 760px) {
  .hero__bg { background-image:
      radial-gradient(30rem 22rem at 76% -6%, rgba(30, 90, 168, 0.34), transparent 62%),
      linear-gradient(rgba(7, 21, 40, 0.6), rgba(7, 21, 40, 0.9) 68%, rgba(7, 21, 40, 0.96)),
      url("/img/hero-ship-mobile.jpg");
    background-size: auto, auto, cover;
    background-position: center, center, 62% center;
  }
}
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner { position: relative; }

.hero__title {
  color: #fff;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 4px 0 var(--sp-5);
  max-width: 20ch;
}
.hero__accent { display: block; font-style: normal; color: var(--accent); }
.hero__sub {
  max-width: 66ch;
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: var(--sp-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: clamp(40px, 5vw, 64px); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  border-top: 1px solid var(--line-inverse);
  padding-top: var(--sp-5);
  max-width: 900px;
}
.hero__stats li { display: flex; flex-direction: column; gap: 6px; }
.hero__statNum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
.hero__statText { font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.66); }

@media (max-width: 680px) {
  .hero__stats { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ---------- 8. Coverage marquee (signature) ---------- */
.marquee {
  display: flex;
  align-items: stretch;
  background: var(--navy-800);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.marquee__label {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  background: var(--accent);
  color: #1b1207;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__label::after { content: "▼"; font-size: 0.6em; }
.marquee__viewport { overflow: hidden; flex: 1; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; }
.marquee__item {
  padding: 15px 26px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: color var(--dur-fast) ease-out;
}
.marquee__item:hover { color: var(--accent); }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 680px) {
  .marquee__label { display: none; }
  .marquee__item { padding: 12px 18px; }
}

/* ---------- 9. Cards ---------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.card:hover::before { transform: scaleX(1); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.card__icon .icon { width: 22px; height: 22px; }
.card__title {
  font-size: var(--fs-md);
  margin-bottom: 10px;
  color: var(--navy-800);
}
.card__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.card__cat {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  margin-right: 10px;
}
.card__text { font-size: 0.9375rem; line-height: 1.68; color: var(--body-text); margin-bottom: var(--sp-4); }
.card__spec { font-size: var(--fs-sm); color: var(--muted); margin: -4px 0 10px; }
.card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-600);
}
.card:hover .card__more .icon { transform: translateX(3px); }
.card__more .icon { transition: transform var(--dur-fast) ease-out; }

.card__media {
  display: block;
  aspect-ratio: 16 / 10;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) var(--sp-4);
  background-image: var(--img);
  /* contain, not cover: catalogue photography must never be cropped, or the
     product is shown partially. The tiles sit on white because the source
     photography is shot on white, so the letterboxing reads as margin. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  position: relative;
}
.card__media--slim { aspect-ratio: 4 / 3; margin-bottom: var(--sp-4); }
.card__mediaFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--navy-300);
}
.card--industry { padding: 0; }
.card--industry .card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; }
/* 上面把行业卡片的内边距清零，是为了让图片贴到卡片边缘。
   但 .card__media 自带的负外边距（-40px -24px）是按普通卡片的 40/24px 内边距配的，
   内边距一旦为零，负边距就没有可抵消的对象，反而把图片推出卡片：
   横向每侧多出 24px（撑破网格，390 宽下整页横向溢出 3px），纵向顶上 40px（压到上一个区块）。
   零内边距的卡片里，图片占满自己那一格即可，间距交给 .card__body 的内边距。 */
.card--industry .card__media { margin: 0; }
.card--product { padding: var(--sp-4); }
/* .card__media 的上负边距是 -40px，对应普通卡片 40px 的上内边距。
   产品卡片的上内边距只有 24px，直接套用会顶着图片冒出卡片上沿 15px、盖住上边框。
   这里按产品卡片的实际内边距取值，让图片正好贴到卡片上沿。 */
.card--product .card__media { margin-top: calc(var(--sp-4) * -1); }
.card--news { padding: 0; }
.card__link { display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-4) var(--sp-4); height: 100%; text-decoration: none; color: inherit; }
.card--news .card__kicker { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.card--news time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 10. Splits / lead-ins ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.split__media {
  display: block;
  margin-top: var(--sp-5);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split__aside { position: static; }
}

.prose { max-width: 68ch; }
.prose--lg { max-width: 72ch; font-size: 1.0625rem; }
.prose p { margin-bottom: 1.15em; }
.prose h2 { font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.prose ul li { list-style: none; position: relative; margin-bottom: 8px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.68em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.prose ol { list-style: decimal; }
.prose ol li { margin-bottom: 8px; }
.prose blockquote {
  margin: var(--sp-5) 0;
  padding: 4px 0 4px var(--sp-4);
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--navy-800);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 1px 5px;
}
.prose--inverse { color: rgba(255, 255, 255, 0.76); }
.prose--inverse p { color: rgba(255, 255, 255, 0.76); }
/* Lead paragraph: inherits the page's ink colour so it stays readable on light
   sections. Dark sections opt in via .prose--inverse. */
.prose .lead { font-size: var(--fs-md); line-height: 1.66; color: var(--ink); }
.prose--inverse .lead { color: rgba(255, 255, 255, 0.86); }

.statlist { margin-top: var(--sp-5); border-top: 1px solid var(--line); }
.statlist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.statlist dt { font-size: var(--fs-sm); color: var(--muted); }
.statlist dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  color: var(--navy-800);
}

/* ---------- 11. List-style content ---------- */
.facts { display: grid; gap: var(--sp-4); }
.facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .facts--2, .facts--3 { grid-template-columns: 1fr; } }

.facts__item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--dur-fast) ease-out;
}
.facts__item:hover { border-color: var(--line-strong); }
.facts__num,
.facts__dot {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
  letter-spacing: 0.06em;
  padding-top: 5px;
}
.facts__dot { width: 8px; height: 8px; background: var(--accent); padding: 0; margin-top: 10px; }
.facts__title { font-size: 1.0625rem; margin-bottom: 6px; }
.facts__text { font-size: 0.9375rem; line-height: 1.66; color: var(--body-text); margin: 0; }
.section--navy .facts__item { background: rgba(255, 255, 255, 0.045); border-color: var(--line-inverse); }

.panel { padding: var(--sp-5); border: 1px solid var(--line); background: var(--surface); }
.panel--inverse { background: rgba(255, 255, 255, 0.05); border-color: var(--line-inverse); }
.panel__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.panel__title .icon { color: var(--accent); }
.panel__text { font-size: 0.9375rem; line-height: 1.72; color: inherit; }

/* Service line items */
.svclist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.svclist__item {
  display: grid;
  grid-template-columns: 70px minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.svclist__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent-strong);
  letter-spacing: 0.1em;
  padding-top: 4px;
}
.svclist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: 12px;
}
.svclist__title { font-size: var(--fs-xl); margin-bottom: 10px; }
.svclist__summary { font-size: 0.9375rem; color: var(--body-text); margin: 0; }
.svclist__body { font-size: 0.9375rem; }
@media (max-width: 900px) {
  .svclist__item { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-3); }
  .svclist__body { grid-column: 2; }
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.steps__item {
  padding: var(--sp-4);
  border-top: 2px solid var(--navy-800);
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steps__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 10px;
}
.steps__title { font-size: 1.0625rem; margin-bottom: 8px; }
.steps__text { font-size: 0.9375rem; line-height: 1.66; color: var(--body-text); margin: 0; }
/* 四步流程（产品详情页的「交付流程」）：默认三列会让第四步单独占一行 */
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps--4 { grid-template-columns: 1fr; } }

/* Network lists */
.netgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
@media (max-width: 760px) { .netgrid { grid-template-columns: 1fr; } }
.netgrid__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: var(--sp-3);
}
.section--navy .netgrid__label { color: var(--accent); border-color: var(--line-inverse); }
.netgrid__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
@media (max-width: 520px) { .netgrid__list { grid-template-columns: 1fr; } }
.netgrid__list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.section--navy .netgrid__list li { border-color: rgba(255, 255, 255, 0.08); }
.netgrid__list .icon { color: var(--accent); width: 15px; height: 15px; flex: none; }

/* Industry rows */
.indlist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.indrow {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
@media (max-width: 820px) { .indrow { grid-template-columns: 1fr; gap: var(--sp-4); } }
.indrow__media { display: block; }
.indrow__img {
  display: block;
  aspect-ratio: 4 / 3;
  background-image: var(--img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  border: 1px solid var(--line);
  transition: transform var(--dur-base) var(--ease);
}
.indrow:hover .indrow__img { transform: scale(1.015); }
.indrow__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 6px;
}
.indrow__title { font-size: var(--fs-xl); }
.indrow__title a { color: inherit; text-decoration: none; }
.indrow__title a:hover { color: var(--accent-strong); }
.indrow__tagline {
  margin: 6px 0 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--accent-strong);
}
.indrow__summary { font-size: 0.9375rem; line-height: 1.7; color: var(--body-text); }
.indrow__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Offices / partners */
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 640px) { .offices { grid-template-columns: 1fr; } }
.offices__card { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.offices__region { font-size: var(--fs-md); margin-bottom: 6px; }
.offices__cities { font-size: 0.9375rem; color: var(--body-text); margin: 0; }

.partners { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.partners__title { font-size: var(--fs-lg); margin-bottom: 8px; }
.partners__intro { max-width: 62ch; color: var(--body-text); font-size: 0.9375rem; }
.partners__list { display: grid; gap: 0; margin-top: var(--sp-3); }
.partners__item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
@media (max-width: 640px) { .partners__item { grid-template-columns: 1fr; gap: 4px; } }
.partners__name { font-family: var(--font-display); font-weight: 700; color: var(--navy-800); }
.partners__desc { color: var(--body-text); }

/* ---------- 12. FAQ ---------- */
.faq { max-width: 880px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy-800);
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-strong); }
.faq__mark { position: relative; width: 14px; height: 14px; flex: none; }
.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  background: var(--accent-strong);
  transition: transform var(--dur-base) var(--ease);
}
.faq__mark::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq__mark::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq__item[open] .faq__mark::after { transform: scaleY(0); }
.faq__a { padding: 0 0 22px; max-width: 72ch; font-size: 0.9375rem; line-height: 1.74; color: var(--body-text); }

/* ---------- 13. Call to action ---------- */
.cta {
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(48px, 6vw, 76px) 0;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(38rem 26rem at 88% 50%, rgba(224, 135, 43, 0.2), transparent 62%);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.cta__title { color: #fff; font-size: var(--fs-2xl); max-width: 24ch; }
.cta__body { margin-top: 12px; max-width: 56ch; color: rgba(255, 255, 255, 0.7); font-size: 0.9375rem; }

.quote { text-align: center; }
.quote__text {
  margin: 0 auto;
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.34;
  color: #fff;
  letter-spacing: -0.02em;
}
.quote__text::before { content: "\201C"; color: var(--accent); }
.quote__text::after { content: "\201D"; color: var(--accent); }

/* ---------- 14. Articles ---------- */
.article__wrap { max-width: 860px; margin-inline: auto; }
.article__head { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.article__title { font-size: var(--fs-3xl); }
.article__lede {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  line-height: 1.66;
  color: var(--body-text);
}
.article__foot { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.pager__link { font-weight: 600; text-decoration: none; font-size: var(--fs-sm); }
.pager__status { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }

.empty { padding: var(--sp-6) 0; color: var(--muted); text-align: center; }

/* ---------- 15. Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.contact__h2 { font-size: var(--fs-xl); margin-bottom: 8px; }
.contact__h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 6px; }
.contact__note { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-4); }
.contact__hours { display: flex; align-items: center; gap: 9px; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }

.form { margin-top: var(--sp-4); }
.form__row { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .form__row--2 { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: var(--sp-3); }
.field__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-800); margin-bottom: 6px; }
.field__label em { color: var(--accent-strong); font-style: normal; }
.field__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
}
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__input--area { min-height: 140px; resize: vertical; line-height: 1.66; }
.field__hint { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.form__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); }
.form__privacy { font-size: var(--fs-xs); color: var(--muted); max-width: 46ch; margin: 0; }

.alert { padding: 14px 18px; border-left: 3px solid; font-size: 0.9375rem; margin-bottom: var(--sp-4); }
.alert--ok { background: rgba(31, 122, 79, 0.08); border-color: #1f7a4f; color: #175c3b; }
.alert--err { background: rgba(178, 58, 44, 0.08); border-color: #b23a2c; color: #8d2d22; }

.contactlist { display: grid; gap: 0; }
.contactlist li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.contactlist .icon { color: var(--accent-strong); margin-top: 4px; flex: none; }
.contactlist strong { display: block; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.contactlist a { color: var(--navy-600); text-decoration: none; }
.contactlist a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---- Country-grouped contact details: contact-page variant ---- */
.ccards { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.ccard {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-4);
}
.ccard__country {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy-800);
  margin-bottom: 6px;
}
.ccard__country .flag { height: 17px; }
.contactlist--flush li:first-child { padding-top: 4px; }
.contactlist--flush li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- 16. 404 ---------- */
.notfound { text-align: center; max-width: 720px; margin-inline: auto; }
.notfound__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 16vw, 9rem);
  line-height: 0.9;
  color: var(--paper-2);
  margin: 0 0 var(--sp-3);
  font-weight: 500;
}
.notfound__title { font-size: var(--fs-2xl); }
.notfound__text { margin-top: var(--sp-3); color: var(--body-text); }
.notfound__actions { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.notfound__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.notfound__nav a { font-size: var(--fs-sm); text-decoration: none; color: var(--muted); }
.notfound__nav a:hover { color: var(--accent-strong); }

/* ---------- 17. Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.62); padding-top: clamp(48px, 6vw, 76px); font-size: 0.9375rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: var(--sp-6);
}
@media (max-width: 980px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__about { margin-top: var(--sp-3); max-width: 46ch; line-height: 1.7; }
.site-footer__values { margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--accent); }
.site-footer__title {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--sp-3);
  font-weight: 500;
}
.site-footer__list { display: grid; gap: 9px; }
.site-footer__list a { color: rgba(255, 255, 255, 0.74); text-decoration: none; }
.site-footer__list a:hover { color: var(--accent); }
.site-footer__list--plain li { display: flex; align-items: center; gap: 9px; }
.site-footer__list--plain .icon { color: var(--accent); flex: none; width: 15px; height: 15px; }

/* ---- Country flag chip (inline SVG; emoji would break on Windows) ---- */
.flag {
  display: inline-block;
  height: 14px;
  width: auto;
  flex: none;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(125, 140, 165, 0.45);
  vertical-align: -1px;
}

/* ---- Country-grouped contact details: footer variant ---- */
.cfoot + .cfoot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cfoot__country {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
}
.cfoot__addr { align-items: flex-start; }
.cfoot__addr .icon { margin-top: 3px; }
.site-footer__key {
  display: inline-block;
  min-width: 48px;
  color: rgba(255, 255, 255, 0.42);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.44);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; gap: var(--sp-4); }
.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:hover { color: var(--accent); }

/* ---------- 18. Flagship products / product gallery / specification table ---------- */

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

/* Flagship cards: four "one object, one image" cards inside the dark section */
.fcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-inverse);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-fast) ease-out,
              background-color var(--dur-fast) ease-out;
}
.fcard:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 135, 43, 0.55);
  background: rgba(255, 255, 255, 0.08);
}
.fcard__media {
  display: block;
  aspect-ratio: 4 / 3;
  background-image: var(--img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  transition: transform var(--dur-slow) var(--ease);
}
.fcard:hover .fcard__media { transform: scale(1.05); }
.fcard__body { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4); }
.fcard__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.fcard__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.fcard__spec { font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.66); }
.fcard__more {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}

/* Gallery-count badge on category cards */
.card__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(11, 31, 63, 0.84);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.card--linked { text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease), border-color var(--dur-fast) ease-out; }
.card--linked:hover { transform: translateY(-3px); border-color: var(--accent); }
.card--linked .card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-strong);
}

/* Product detail */
.split--product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split--product { grid-template-columns: 1fr; } }
.product__cover {
  display: block;
  width: 100%;
  height: auto;
  /* the box takes the photograph's own proportion (--ar is emitted from the
     real file), so nothing is letterboxed away and no part of the machine is
     cropped. Capped at 520px so nothing is scaled beyond its native pixels. */
  aspect-ratio: var(--ar, 4 / 3);
  max-height: 520px;
  object-fit: contain;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.product__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.spectable { margin: var(--sp-5) 0 0; border-top: 1px solid var(--line); }
.spectable__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: var(--sp-4);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.spectable dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.spectable dd { margin: 0; font-size: 0.9375rem; color: var(--ink); }
.spectable dd a { color: var(--navy-600); text-decoration: none; }
.spectable dd a:hover { color: var(--accent-strong); text-decoration: underline; }
@media (max-width: 560px) { .spectable__row { grid-template-columns: 1fr; gap: 4px; } }

/* Product gallery */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-start;
}
/* Uniform height, natural width. The catalogue ranges from 3.5:1 equipment
   shots to 0.5:1 riser photographs; a shared square would squeeze one into a
   thin bar and the other into a thin column, which is what made products look
   half-shown. Matching the height instead keeps every machine whole and at a
   predictable scale, with --ar reserving the right box before the file loads. */
.gallery__item {
  margin: 0;
  flex: 0 0 auto;
  height: 300px;
  aspect-ratio: var(--ar, 1);
  max-width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
/* Each frame is a link to the full-size file, so a tall subject that has to be
   drawn small to share a row with a wide one can still be inspected properly. */
.gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform var(--dur-slow) var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); }

@media (max-width: 700px) {
  .gallery { gap: var(--sp-2); }
  .gallery__item { height: 212px; }
}

/* ---------- 19. Entrance animations ---------- */
/* Entrance animations. Elements are hidden only when JS is available (<html class="js">), so a script failure never leaves content invisible */
.reveal { transition-delay: var(--d, 0ms); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--d, 0ms);
}
/* Hero choreography: 3-6 groups, 90ms apart */
.hero__inner > .reveal:nth-child(1) { --d: 0ms; }
.hero__inner > .reveal:nth-child(2) { --d: 90ms; }
.hero__inner > .reveal:nth-child(3) { --d: 180ms; }
.hero__inner > .reveal:nth-child(4) { --d: 270ms; }
.hero__inner > .reveal:nth-child(5) { --d: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  .card:hover, .indrow:hover .indrow__img { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 20. Print ---------- */
@media print {
  .utilbar, .site-header, .site-footer, .cta, .marquee, .navtoggle { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .pagehero, .hero, .section--navy { background: #fff !important; color: #000 !important; }
  .pagehero__title, .hero__title, .sechead__title { color: #000 !important; }
  .section { padding: 16pt 0; }
}