/* ==========================================================================
   Chongshuo Electronics Technology Co., Limited — 深圳市重硕电子科技有限公司
   Corporate website design system.
   --------------------------------------------------------------------------
   Visual language: technical drawing / spec sheet.

   The site is for overseas PCB buyers who read numbers before they read
   marketing. So the layout borrows from engineering documents:
   hairline rules, tabular monospace numerals, corner registration marks on
   media, index numbering instead of decorative eyebrows, and left-aligned
   headings instead of centred ones.

   Two rules that override everything else:
     1. Images are never distorted. Every image sits in a declared frame
        (.media--photo / --product / --wide / --portrait) with an explicit
        object-fit. No HTML width/height attribute is allowed to fight CSS.
     2. Only verifiable facts appear as claims.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --navy-900: #050f24;
  --navy-800: #0b1c3a;
  --navy-700: #132c58;
  --navy-600: #1d4486;
  --navy-500: #2f61b5;
  --navy-100: #e4ecf7;
  --navy-50:  #f2f6fc;

  --red-700: #96000f;
  --red-600: #c70019;
  --red-500: #e0303a;
  --red-50:  #fdecee;

  /* Neutrals */
  --ink:      #0d1526;
  --ink-2:    #2a3648;
  --body:     #55606f;
  --muted:    #8b95a5;
  --paper:    #ffffff;
  --paper-2:  #f7f8fa;
  --mist:     #f2f4f7;
  --mist-2:   #e7ebf0;
  --line:     #e4e8ee;
  --line-2:   #cdd5df;

  /* Shape — sharper than a typical template; this is a technical document */
  --r-xs: 2px;
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Elevation — hairline borders carry the structure, shadows stay quiet */
  --sh-1: 0 1px 2px rgba(13, 21, 38, .05);
  --sh-2: 0 12px 30px -18px rgba(11, 28, 58, .30);
  --sh-3: 0 24px 54px -22px rgba(11, 28, 58, .40);
  --sh-red: 0 10px 26px -14px rgba(199, 0, 25, .60);

  /* Type */
  --font-display: "Archivo", "Inter", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;

  /* Layout */
  --header-h: 72px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--body);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

/* Images never distort: the frame decides the box, the image decides the fit. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
::selection { background: rgba(199, 0, 25, .12); color: var(--red-700); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.018em;
}
h1 { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -.028em; }
h2 { font-size: clamp(25px, 3.1vw, 38px); }
h3 { font-size: clamp(17px, 1.5vw, 20px); }
h4 { font-size: 15px; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--ink-2); font-weight: 600; }
code, .mono { font-family: var(--font-mono); font-size: .92em; font-variant-numeric: tabular-nums; }

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

/* ---------- Layout ---------- */
.container { width: min(1240px, 92%); margin-inline: auto; }
.container--wide { width: min(1480px, 95%); margin-inline: auto; }
.container--prose { width: min(820px, 92%); margin-inline: auto; }

.section { padding: clamp(60px, 7vw, 104px) 0; position: relative; }
.section--tight { padding: clamp(44px, 5vw, 72px) 0; }
.section--mist { background: var(--mist); }
.section--paper { background: var(--paper-2); }
.section--navy { background: var(--navy-800); color: rgba(255, 255, 255, .76); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy strong { color: #fff; }
.section--navy .sec-lead { color: rgba(255, 255, 255, .74); }
.section--navy .kicker { color: rgba(255, 255, 255, .5); }
.section--navy .sec-num { color: #ff7a8a; }
.section--navy .sec-head__meta { border-bottom-color: rgba(255, 255, 255, .16); }
.section--navy .rule { background: rgba(255, 255, 255, .14); }

/* Faint drafting grid — used sparingly on dark sections */
.section--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
}

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Section heading ---------- */
.sec-head { margin-bottom: clamp(30px, 3.6vw, 48px); }
.sec-head--center { margin-inline: auto; text-align: center; max-width: 780px; }
.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px 40px;
  align-items: end;
}
.sec-head--split > :first-child { grid-column: 1; }

/* A numbered index line replaces the decorative "eyebrow" of a stock template */
.sec-head__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.sec-head--center .sec-head__meta { justify-content: center; }
.sec-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--red-600);
  font-variant-numeric: tabular-nums;
}
.sec-num::after { content: "/"; margin-left: 10px; color: var(--line-2); }
.kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.sec-title { margin: 0; }
.sec-lead { margin-top: 16px; font-size: 16.5px; line-height: 1.78; max-width: 66ch; color: var(--body); }
.sec-head--center .sec-lead { margin-inline: auto; }

/* A single highlighted word, used sparingly */
.hl {
  background: linear-gradient(transparent 62%, rgba(199, 0, 25, .16) 62%);
  padding: 0 .04em;
}
.section--navy .hl { background: linear-gradient(transparent 62%, rgba(255, 122, 138, .28) 62%); }

.lead { font-size: 16.5px; line-height: 1.78; max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .012em;
  line-height: 1;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--red-600); color: #fff; box-shadow: var(--sh-red); }
.btn-primary:hover { background: var(--red-700); }

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

.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--navy-800); color: var(--navy-800); }

.btn-light { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .32); }
.btn-light:hover { background: #fff; color: var(--navy-800); border-color: #fff; }

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

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy-700);
  transition: gap .22s var(--ease), color .22s var(--ease);
}
.link-arrow svg { width: 13px; height: 13px; }
.link-arrow:hover { gap: 12px; color: var(--red-600); }
.section--navy .link-arrow { color: #fff; }
.section--navy .link-arrow:hover { color: #ff7a8a; }

/* ---------- Utility bar ---------- */
.topbar {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .64);
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 36px;
  padding: 5px 0;
}
.topbar__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { width: 13px; height: 13px; flex: none; color: #ff7a8a; }
.topbar__item a:hover { color: #fff; }
.topbar__cn { letter-spacing: .04em; }
.topbar__item--mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--sh-1); border-bottom-color: var(--line-2); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { width: 38px; height: 38px; flex: none; object-fit: contain; }
/* 后台上传的 Logo 图标：可能是白底 PNG，页脚是深色底，给它一块白底板当品牌徽章 */
.brand-mark--img { object-fit: contain; }
.footer-brand .brand-mark--img {
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 5px;
  box-sizing: border-box;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--navy-800);
  letter-spacing: .025em;
}
.brand-text small {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--red-600);
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__foot { display: flex; align-items: center; }
.nav__head, .nav__tel { display: none; }
.nav > a, .nav-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  transition: color .22s var(--ease);
}
.nav > a::after, .nav-item > a::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2px;
  background: var(--red-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav > a:hover, .nav-item > a:hover, .nav > a.active, .nav-item > a.active { color: var(--navy-800); }
.nav > a:hover::after, .nav-item > a:hover::after,
.nav > a.active::after, .nav-item > a.active::after { transform: scaleX(1); }
.nav .caret { width: 10px; height: 10px; transition: transform .22s var(--ease); }
.nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }

.nav__foot .nav-cta { padding: 12px 20px; }
.nav__foot .nav-cta::after { display: none; }
.nav__foot .nav-cta:hover { color: #fff; }
/* .nav > a sets a dark ink colour with higher specificity than .btn-primary,
   which would leave the header button as dark text on a red background. */
.nav .btn-primary, .nav .btn-primary:hover { color: #fff; }

.nav-item { position: relative; }
.submenu {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  min-width: 232px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover .submenu, .nav-item:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.submenu a:hover { background: var(--navy-50); color: var(--navy-800); }

.nav-cta { margin-left: 10px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform .26s var(--ease), opacity .18s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(86vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-900);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 15, 36, .74) 0%, rgba(5, 15, 36, .46) 30%, rgba(5, 15, 36, .93) 100%),
    linear-gradient(90deg, rgba(5, 15, 36, .84) 0%, rgba(5, 15, 36, .12) 58%);
}
.hero__inner {
  width: min(1240px, 92%);
  margin-inline: auto;
  padding: clamp(80px, 11vh, 140px) 0 clamp(28px, 3.6vw, 44px);
  color: #fff;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
  margin-bottom: 22px;
}
.hero__eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 0 4px rgba(224, 48, 58, .22);
}
.hero h1 { color: #fff; max-width: 18ch; }
.hero__sub {
  margin-top: 18px;
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.76;
  color: rgba(255, 255, 255, .8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero__facts {
  margin-top: clamp(34px, 4.4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .17);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.hero__fact-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  margin-bottom: 7px;
}
.hero__fact-v { font-size: 14.5px; font-weight: 600; color: #fff; line-height: 1.5; }
.hero__fact-v span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .58);
  margin-top: 3px;
}

/* ---------- Inner page hero ----------
   NOTE: the background image must be set on the .page-hero__bg child with an
   inline style. A url() inside a CSS custom property is resolved against
   css/style.css, not against the HTML document, so relative paths break. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-800);
  color: #fff;
  padding: clamp(48px, 6vw, 80px) 0 clamp(44px, 5.2vw, 72px);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: .8;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 15, 36, .92), rgba(5, 15, 36, .74));
}
.page-hero h1 { color: #fff; max-width: 21ch; }
.page-hero .lead { margin-top: 16px; color: rgba(255, 255, 255, .78); }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 20px;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: .45; }
.breadcrumb .cur { color: #fff; }

/* ---------- Media frames ----------
   Every image on the site lives inside one of these. The frame fixes the
   aspect ratio, the modifier fixes the fit. No image is ever stretched. */
.media { position: relative; overflow: hidden; background: var(--mist); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--photo { aspect-ratio: 16 / 9; }
.media--wide { aspect-ratio: 21 / 9; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
/* Product shots are white-background cutouts, pre-normalised to exactly 4:3
   by tools/prep-images.py. contain is kept rather than cover so a replacement
   photo with a different ratio still shows the whole board instead of being
   sliced. */
.media--product { aspect-ratio: 4 / 3; background: #fff; }
.media--product img { object-fit: contain; padding: 4%; }
.media--natural { height: auto; background: var(--mist); }
.media--natural img { height: auto; }

/* Corner registration marks — the PCB drawing motif */
.ticks::before, .ticks::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 1.5px solid var(--red-600);
  pointer-events: none;
  z-index: 3;
}
.ticks::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ticks::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.figcap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Capability / trust band ---------- */
.band {
  background: var(--navy-800);
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.band__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.band__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600;
  color: rgba(255, 255, 255, .86);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.band__item:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .06); }
.band__item svg { width: 13px; height: 13px; color: #ff7a8a; }

/* ---------- Fact / stat tiles ---------- */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.fact {
  background: #fff;
  padding: 26px 22px;
  transition: background .28s var(--ease);
}
.fact:hover { background: var(--navy-50); }
.fact__k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.fact__k svg { width: 14px; height: 14px; color: var(--red-600); }
.fact__v {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; color: var(--navy-800); line-height: 1.35;
}
.fact__v small {
  display: block; margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 400; color: var(--body); line-height: 1.6;
}
.section--navy .fact-grid { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); }
.section--navy .fact { background: var(--navy-800); }
.section--navy .fact:hover { background: var(--navy-700); }
.section--navy .fact__k { color: rgba(255, 255, 255, .5); }
.section--navy .fact__v { color: #fff; }
.section--navy .fact__v small { color: rgba(255, 255, 255, .72); }

/* ---------- Section heading action slot ---------- */
.sec-head__action { align-self: end; }
.sec-head--split .sec-head__action { grid-column: 2; grid-row: 1; }
@media (max-width: 960px) {
  .sec-head--split .sec-head__action { grid-column: 1; grid-row: auto; }
}

/* ---------- Split feature (image + text) ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4.4vw, 68px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__badge {
  position: absolute;
  right: -16px; bottom: -16px;
  background: var(--navy-800);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  font-family: var(--font-display);
  line-height: 1.25;
}
.split__badge b { display: block; font-size: 23px; font-weight: 800; color: #ff7a8a; font-variant-numeric: tabular-nums; }
.split__badge span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }

/* ---------- Check list ---------- */
.checklist { display: grid; gap: 15px; margin-top: 24px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .tick {
  width: 21px; height: 21px;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--red-50);
  color: var(--red-600);
  display: grid;
  place-items: center;
}
.checklist .tick svg { width: 11px; height: 11px; }
.checklist b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 15px; margin-bottom: 2px; }
.checklist span { font-size: 14.5px; line-height: 1.66; }

/* ---------- Spec sheet (label / value rows) ---------- */
.spec-sheet { border-top: 1px solid var(--line-2); }
.spec-sheet .row {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.66;
}
.spec-sheet .k {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: 3px;
}
.spec-sheet .v { color: var(--ink-2); }
.spec-sheet .v strong { color: var(--ink); }
.section--navy .spec-sheet { border-top-color: rgba(255, 255, 255, .2); }
.section--navy .spec-sheet .row { border-bottom-color: rgba(255, 255, 255, .12); }
.section--navy .spec-sheet .k { color: rgba(255, 255, 255, .45); }
.section--navy .spec-sheet .v { color: rgba(255, 255, 255, .82); }
.section--navy .spec-sheet .v strong { color: #fff; }

/* ---------- Numbered reasons ---------- */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.reason { background: #fff; padding: 28px 26px; transition: background .28s var(--ease); }
.reason:hover { background: var(--navy-50); }
.reason__n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--red-600);
  margin-bottom: 11px;
  font-variant-numeric: tabular-nums;
}
.reason h3 { font-size: 18px; margin-bottom: 8px; }
.reason p { font-size: 14.6px; line-height: 1.7; }

/* ---------- Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* ---------- Card ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.card:hover { border-color: var(--navy-600); box-shadow: var(--sh-2); }
a.card:hover { transform: translateY(-3px); }
.card__media { position: relative; }
.card__media img { transition: transform .6s var(--ease); }
a.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card__tag {
  display: inline-block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-600);
}
.card__body h3 { font-size: 17px; margin-bottom: 7px; }
.card__body p { font-size: 14px; line-height: 1.62; color: var(--body); margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: 14px; }

/* Compact card without a photo — for spec-ish links */
.card--plain { padding: 22px 24px; }
.card--plain h3 { font-size: 16px; margin-bottom: 6px; }
.card--plain p { font-size: 14px; }
.card__ico {
  width: 36px; height: 36px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--navy-50);
  color: var(--navy-700);
  display: grid;
  place-items: center;
  margin-bottom: 13px;
}
.card__ico svg { width: 18px; height: 18px; }

/* ---------- Index list (applications, directory style) ---------- */
.idx-list { border-top: 1px solid var(--line-2); }
.idx-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1.05fr) minmax(0, 1.35fr) auto;
  gap: 26px;
  align-items: center;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease), padding .25s var(--ease);
}
.idx-row:hover { background: var(--paper-2); padding-inline: 14px; }
.idx-row__n {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--red-600);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.idx-row__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.idx-row__title a:hover { color: var(--red-600); }
.idx-row__text { font-size: 14.4px; line-height: 1.66; margin: 0; }
.idx-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.idx-row__go { color: var(--muted); transition: transform .25s var(--ease), color .25s var(--ease); }
.idx-row__go svg { width: 17px; height: 17px; }
.idx-row:hover .idx-row__go { color: var(--red-600); transform: translateX(4px); }

/* ---------- Process stepper ---------- */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 28px; }
.step {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--line);
}
.step::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--red-600);
}
.step__n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--red-600);
  margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 16.5px; margin-bottom: 6px; }
.step p { font-size: 14.2px; line-height: 1.66; margin: 0; }

/* ---------- Deliverables / docs ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.doc {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 20px 22px;
  background: #fff;
  transition: background .25s var(--ease);
}
.doc:hover { background: var(--navy-50); }
.doc__ico {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  background: var(--navy-50);
  color: var(--navy-700);
  display: grid; place-items: center;
}
.doc__ico svg { width: 17px; height: 17px; }
.doc b { display: block; font-family: var(--font-display); font-size: 14.5px; color: var(--ink); margin-bottom: 3px; }
.doc span { font-size: 13.4px; line-height: 1.6; }

/* ---------- Certificate slots ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cert {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  padding: 20px;
  color: var(--muted);
}
.cert svg { width: 26px; height: 26px; color: var(--line-2); }
.cert b { font-family: var(--font-display); font-size: 13.5px; color: var(--ink-2); }
.cert span { font-size: 11.5px; line-height: 1.5; }

/* ---------- News ---------- */
.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.news-card:hover { border-color: var(--navy-600); box-shadow: var(--sh-2); transform: translateY(-3px); }
.news-media { position: relative; }
.news-media img { transition: transform .6s var(--ease); }
.news-card:hover .news-media img { transform: scale(1.05); }
.news-media .tag {
  position: absolute; left: 0; top: 0;
  padding: 5px 11px;
  background: var(--red-600);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.news-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.news-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.news-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.news-body h3 { font-size: 17px; line-height: 1.4; margin-bottom: 9px; }
.news-body h3 a:hover { color: var(--red-600); }
.news-body p { font-size: 14px; line-height: 1.68; margin-bottom: 16px; }
.news-body .link-arrow { margin-top: auto; }

/* News list rows — editorial, not card-based.
   The thumbnail uses the same .media frames as the cards, so a white-
   background board is shown whole (contain) while a scene photo is
   cropped to the frame (cover). */
.news-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.news-row.hide-cat { display: none; }
.news-row__thumb { border-radius: var(--r-sm); overflow: hidden; background: var(--mist); }
.news-row__thumb .media { aspect-ratio: 4 / 3; }
.news-row__thumb .media--photo { aspect-ratio: 16 / 9; }
.news-row__thumb .media--product { background: #fff; }
.news-row__date {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.news-row__title { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.news-row__title a:hover { color: var(--red-600); }
.news-row__excerpt { font-size: 14.2px; line-height: 1.66; margin: 0; }

.filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.filter-tabs button,
.filter-tabs a {
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: all .22s var(--ease);
}
.filter-tabs button:hover,
.filter-tabs a:hover { border-color: var(--navy-700); color: var(--navy-800); }
.filter-tabs button.active,
.filter-tabs a.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.spec-table { min-width: 660px; font-size: 14.5px; }
.spec-table thead th {
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-align: left;
  padding: 13px 18px;
  white-space: nowrap;
}
.spec-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:nth-child(even) { background: var(--paper-2); }
.spec-table td:first-child { font-weight: 700; color: var(--navy-800); }
.spec-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Banner (full-bleed strip) ---------- */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
}
.banner__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.banner::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(5, 15, 36, .95) 8%, rgba(5, 15, 36, .55) 100%);
}
.banner__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  padding: clamp(44px, 5.4vw, 78px) 0;
}
.banner h2 { color: #fff; max-width: 24ch; }
.banner p { margin-top: 14px; color: rgba(255, 255, 255, .76); max-width: 54ch; }
.banner .btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--ink-2);
}
.form-field label span { color: var(--red-600); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 116px; line-height: 1.65; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(29, 68, 134, .12);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #a8b1c0; }
.form-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.form-hint { font-size: 12.5px; color: var(--muted); }
.form-status { margin-top: 14px; padding: 11px 15px; border-radius: var(--r-sm); font-size: 13.8px; display: none; }
.form-status.ok { display: block; background: #e9f7ef; color: #1a6b3c; border: 1px solid #b7e2c8; }
.form-status.err { display: block; background: var(--red-50); color: var(--red-700); border: 1px solid #f3c3c9; }
.form-note { margin-top: 16px; font-size: 12.8px; line-height: 1.7; color: var(--muted); }
.form-note a { color: var(--red-600); font-weight: 600; }

/* ---------- Info cards ---------- */
.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}
.info-card h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.info-card h3 .ico {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  background: var(--navy-50);
  color: var(--navy-700);
  display: grid; place-items: center;
}
.info-card h3 .ico svg { width: 17px; height: 17px; }
.info-rows { display: grid; gap: 13px; }
.info-rows .row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; font-size: 14.4px; line-height: 1.66; }
.info-rows .k {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding-top: 4px;
}
.info-rows .row a:hover { color: var(--red-600); }
.bank-table { display: grid; gap: 12px; }
.bank-table .row { display: grid; grid-template-columns: 134px minmax(0, 1fr); gap: 14px; font-size: 14.2px; line-height: 1.6; }
.bank-table .k {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding-top: 3px;
}
.bank-table .v { color: var(--ink-2); }
.bank-table .mono { font-family: var(--font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ---------- Location panel (self-contained, no external map dependency) ---------- */
.loc-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: stretch; }
.loc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.loc-card h3 { font-size: 18px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.loc-card .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------- Baidu Map ----------
   The map container is filled by the Baidu Map JS API (js/map.js). When no
   AK is configured the API is never requested and the address panel is
   shown instead. The panel is a sibling of the map container, not a child,
   because the Baidu API clears its container when it initialises. */
.loc-map-wrap {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--navy-50);
  min-height: 360px;
}
.loc-map {
  position: relative;
  width: 100%;
  min-height: 360px;
}
.loc-map__pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  text-align: center;
}
.loc-map__pin .dot {
  display: block;
  width: 15px; height: 15px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--red-600);
  box-shadow: 0 0 0 6px rgba(199, 0, 25, .16), 0 6px 14px -6px rgba(199, 0, 25, .9);
}
.loc-map__pin .lbl {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sh-2);
}
.loc-map__coord {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--muted);
  background: rgba(255, 255, 255, .84);
  padding: 4px 9px;
  border-radius: var(--r-xs);
}

/* ---------- Baidu Map fallback ----------
   Shown until an AK is filled in js/config.js. The API is not requested at
   all in that state, so no broken frame and no failed request. */
.loc-map__fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 26px;
  text-align: center;
  background: var(--navy-50);
}
.loc-map__fallback[hidden] { display: none; }
.loc-map__fallback > svg {
  position: static;
  width: 30px; height: 30px;
  flex: none;
  color: var(--navy-600);
}
.loc-map__fallback b { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.loc-map__fallback p { font-size: 14px; line-height: 1.7; color: var(--body); max-width: 44ch; margin: 0; }

/* A faint drafting grid behind the map while the API loads */
.loc-map-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(27, 63, 122, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 63, 122, .06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* No AK configured — the grid is hidden behind the address panel */
.loc-map-wrap--nokey::before { display: none; }

/* The key was rejected — dim the empty frame so the panel reads clearly */
.loc-map-wrap--failed .loc-map { opacity: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .58); padding: clamp(48px, 5.6vw, 76px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1.3fr; gap: 42px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .brand-text strong { color: #fff; }
.footer-brand .brand-text small { color: #ff7a8a; }
.footer-brand p { font-size: 14px; line-height: 1.75; }
.footer-brand .cn-name { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; }
.footer-brand .cn-name strong { color: #fff; display: block; margin-bottom: 4px; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col li { font-size: 13.8px; line-height: 1.6; }
.footer-col a:hover { color: #ff7a8a; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: #ff7a8a; }
.footer-bottom { margin-top: clamp(40px, 4.6vw, 60px); border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bottom .inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px 0;
  font-size: 12.5px;
}

/* ---------- Floating contact + to top ---------- */
/* The label used to run vertically (writing-mode: vertical-rl). A rotated
   English word reads badly and the old tab looked like a sticker. It is a
   horizontal pill now: handset glyph on the left, CALL on the right, flush to
   the viewport edge so it never covers the content column. */
.float-contact {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px 13px 17px;
  background: var(--red-600);
  color: #fff;
  border-radius: 999px 0 0 999px;
  box-shadow: -8px 12px 28px -14px rgba(199, 0, 25, .9);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.float-contact:hover {
  background: var(--red-700);
  transform: translateY(-50%) translateX(-3px);
}
.float-contact svg { width: 18px; height: 18px; flex: none; display: block; }

.to-top {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--navy-800);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s, background .28s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--red-600); }
.to-top svg { width: 17px; height: 17px; }

/* ---------- Scroll reveal ----------
   Scoped to html.js so that content is never hidden when the script fails.
   The fallback timer in main.js reveals everything after 1.2s regardless. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: .07s; }
html.js .reveal[data-delay="2"] { transition-delay: .14s; }
html.js .reveal[data-delay="3"] { transition-delay: .21s; }
html.js .reveal[data-delay="4"] { transition-delay: .28s; }
html.js .reveal[data-delay="5"] { transition-delay: .35s; }
html.js .reveal[data-delay="6"] { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Accordion (FAQ / spec details) ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.accordion details + details { border-top: 1px solid var(--line); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  background: #fff;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  border-right: 2px solid var(--red-600);
  border-bottom: 2px solid var(--red-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.accordion summary:hover { background: var(--navy-50); color: var(--navy-800); }
.accordion .acc-body { padding: 0 20px 20px; background: #fff; font-size: 14.6px; line-height: 1.75; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--mist); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .55s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }

/* ---------- Callout ---------- */
.callout {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 19px 22px;
  background: var(--navy-50);
  border-left: 3px solid var(--navy-700);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14.4px;
  line-height: 1.7;
}
.callout--warn { background: var(--red-50); border-left-color: var(--red-600); }
.callout__ico { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--navy-700); }
.callout--warn .callout__ico { color: var(--red-600); }
.callout b { display: block; font-family: var(--font-display); color: var(--ink); margin-bottom: 3px; }
.callout p { margin: 0; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.chip--solid { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* ---------- Vertical timeline ---------- */
.timeline { display: grid; gap: 0; }
.tl-item { position: relative; padding: 0 0 32px 32px; border-left: 2px solid var(--line); }
.tl-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -8px; top: 4px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--red-600);
  box-shadow: 0 0 0 4px var(--paper);
}
.tl-item .tl-year {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--red-600); margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
.tl-item h3 { font-size: 16.5px; margin-bottom: 5px; }
.tl-item p { font-size: 14.4px; line-height: 1.68; margin: 0; }

/* ---------- Misc ---------- */
.note-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--navy-50);
  color: var(--navy-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.img-missing { background: var(--mist) linear-gradient(135deg, var(--mist-2), var(--mist)); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  :root { --header-h: 62px; }
  .burger { display: flex; }

  /* The drawer is a full-height panel under the header.
     A backdrop-filter on .site-header would make the header the containing
     block for fixed descendants, which would trap the drawer inside the
     62px header bar. The blur is invisible on a 96% opaque bar anyway. */
  .site-header { backdrop-filter: none; background: #fff; }

  /* ---------- the drawer ---------- */
  .nav {
    position: fixed;
    top: var(--nav-top, var(--header-h));
    left: 0; right: 0; bottom: 0;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--navy-900);
    color: #fff;
    box-shadow: 0 -18px 40px -22px rgba(5, 15, 36, .8);
    opacity: 0; visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: translateY(0); }

  /* A faint technical grid, echoing the hero backdrop. */
  .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 62%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 62%);
  }
  .nav__head, .nav__list, .nav__foot { position: relative; z-index: 1; }

  /* ---------- drawer header ---------- */
  .nav__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 6% 15px;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .nav__head-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #ff5f6d;
  }
  .nav__head-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .42);
  }

  /* ---------- numbered links ---------- */
  .nav__list {
    display: flex;
    flex-direction: column;
    /* the desktop rule sets align-items:center — in a column that would make
       every row shrink to its content width, which is what made the old
       menu's separator lines ragged */
    align-items: stretch;
    flex: 1 1 auto;
    justify-content: center;
    padding: 4px 6% 0;
    counter-reset: navi;
  }
  .nav__list > a, .nav__list > .nav-item { counter-increment: navi; }
  .nav__list > a::before,
  .nav__list > .nav-item > a::before {
    content: counter(navi, decimal-leading-zero);
    flex: none;
    width: 30px;
    padding-top: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: #ff5f6d;
  }
  .nav__list > a,
  .nav__list > .nav-item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
    transition: color .22s var(--ease);
  }
  .nav__list > a:hover,
  .nav__list > .nav-item > a:hover { color: #ff8089; }
  .nav__list > a.active,
  .nav__list > .nav-item > a.active { color: #ff5f6d; }
  .nav > a::after, .nav-item > a::after { display: none; }

  /* The chevron sits hard right, so the label never drifts around. */
  .nav__list .caret {
    width: 15px; height: 15px;
    flex: none;
    margin-left: auto;
    color: rgba(255, 255, 255, .45);
    transition: transform .26s var(--ease), color .22s var(--ease);
  }
  .nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }
  .nav-item.open > a .caret { transform: rotate(180deg); color: #ff5f6d; }

  /* ---------- accordion submenus ---------- */
  .nav-item > a { cursor: pointer; }
  .submenu {
    position: relative;
    /* the desktop rule hangs the panel under its parent with
       top: calc(100% + 9px) — that offset has to go, or the second level
       lands on top of the rows below it */
    top: auto; left: auto; right: auto;
    opacity: 0; visibility: hidden;
    max-height: 0;
    overflow: hidden;
    box-shadow: none; border: 0; border-radius: 0;
    background: rgba(255, 255, 255, .035);
    padding: 0 0 0 40px;
    margin: 0;
    min-width: 0;
    transition: max-height .3s var(--ease), opacity .24s var(--ease),
                visibility .24s, padding .3s var(--ease);
  }
  /* a thin rail marks the second level */
  .submenu::before {
    content: "";
    position: absolute;
    left: 30px; top: 6px; bottom: 6px;
    width: 1px;
    background: rgba(255, 255, 255, .16);
  }
  .nav-item.open .submenu {
    opacity: 1; visibility: visible;
    max-height: 460px;
    padding: 6px 0 10px 40px;
  }
  .submenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 6px 14px 6px 0;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .68);
    transition: color .2s var(--ease);
  }
  .submenu a::before {
    content: "";
    flex: none;
    width: 5px; height: 5px;
    background: #ff5f6d;
    opacity: .7;
  }
  .submenu a:hover { background: transparent; color: #fff; }

  /* ---------- drawer footer: phone + quote ----------
     Sticky to the bottom so the quote button is reachable even when a
     submenu pushes the list past the fold. */
  .nav__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 6% 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: #0a1428;
    box-shadow: 0 -14px 26px -18px rgba(0, 0, 0, .9);
  }
  .nav__tel {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
  }
  .nav__tel svg { width: 18px; height: 18px; flex: none; color: #ff5f6d; }
  .nav__tel span { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
  .nav__tel small {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
  }
  .nav__tel strong {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #fff;
  }
  .nav__foot .nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* The dim layer behind the open drawer. It sits under the header (z-index 100)
   so the logo and the close button stay bright. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(5, 15, 36, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
/* While the drawer is open the floating call tab and the back-to-top button
   would sit on top of it. */
body.nav-open .float-contact,
body.nav-open .to-top { opacity: 0; pointer-events: none; }

@media (max-width: 960px) {
  .topbar .container { justify-content: center; }
  .topbar__list { justify-content: center; gap: 14px; }
  .topbar__list .topbar__item--hide-sm { display: none; }
  .topbar__cn {
    max-width: 52vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero { min-height: auto; }
  .hero__inner { padding-top: clamp(60px, 11vw, 100px); }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split--reverse .split__media { order: 0; }
  .split__badge { right: 12px; bottom: -12px; padding: 12px 16px; }
  .loc-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-head--split { grid-template-columns: 1fr; }
  .banner__inner { flex-direction: column; align-items: flex-start; }

  /* Index rows stack on narrow screens */
  .idx-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px 16px;
    padding: 22px 2px;
  }
  .idx-row__text { grid-column: 2; }
  .idx-row__go { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  /* On a phone the floating pill would sit on top of the text column. A
     full-width bottom bar reads better and keeps a large tap target. */
  .float-contact {
    right: 0; left: 0; top: auto; bottom: 0;
    transform: none;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 0;
    font-size: 12px;
    box-shadow: 0 -6px 22px -12px rgba(199, 0, 25, .9);
  }
  .float-contact:hover { transform: none; }
  .to-top { right: 12px; bottom: 62px; }
  /* keep the last section clear of the fixed bar */
  .site-footer { padding-bottom: 54px; }
  .grid-3, .grid-2, .doc-grid, .stepper, .fact-grid, .cert-grid, .reasons, .grid-4 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-sheet .row { grid-template-columns: 1fr; gap: 2px; }
  .spec-sheet .k { padding-top: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-grid { grid-template-columns: 1fr; }
  .info-rows .row, .bank-table .row { grid-template-columns: 1fr; gap: 2px; }
  .news-row { grid-template-columns: 1fr; gap: 12px; }
  .news-row__thumb { max-width: 160px; }
  .spec-table { min-width: 0; font-size: 13.4px; }
  .spec-table thead th { padding: 10px 12px; font-size: 10.5px; }
  .spec-table td { padding: 10px 12px; }
  .hero__actions .btn { flex: 1 1 100%; }
  /* The utility bar wraps to three lines on a narrow phone and eats 85px of
     the screen. Keep it to one line: the company name and the phone number. */
  .topbar { font-size: 11.5px; }
  .topbar__item { white-space: nowrap; }
  .topbar__item--est { display: none; }
  .topbar__cn { max-width: 46vw; font-size: 11px; }
}


/* ==========================================================================
   HOME — image-forward blocks
   --------------------------------------------------------------------------
   The homepage was rebuilt as an image-led page: a rotating hero, an offset
   photo pair, a full-bleed application switcher, a capability wall and a
   person-led closing banner.

   Everything here follows the two rules stated at the top of this file:
     1. Images are never distorted — every photo sits in a declared frame or
        a background-size:cover box that matches its source ratio.
     2. Nothing on these blocks claims a number that is not verifiable.
   ========================================================================== */

/* ---------- Hero: rotating slides ---------- */
.hero--slider {
  display: block;
  min-height: min(88vh, 780px);
  height: min(88vh, 780px);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-900);
}
.hero--slider::after { content: none; }
.hero__track { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity .75s var(--ease), visibility .75s var(--ease);
}
/* The scrim belongs to the slide, not to the section: the section-level
   pseudo-element would paint over the copy that sits inside the track. */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 15, 36, .58) 0%, rgba(5, 15, 36, .28) 26%, rgba(5, 15, 36, .90) 100%),
    linear-gradient(90deg, rgba(5, 15, 36, .88) 0%, rgba(5, 15, 36, .18) 62%);
}
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero__slide .hero__bg { z-index: 0; }
.hero--slider .hero__inner {
  position: relative;
  z-index: 2;
  width: min(1240px, 92%);
  margin-inline: auto;
  padding: clamp(72px, 10vh, 130px) 0 clamp(96px, 11vh, 132px);
  color: #fff;
}
.hero--slider .hero__title {
  color: #fff;
  max-width: 19ch;
  font-size: clamp(30px, 4.4vw, 54px);
  letter-spacing: -.028em;
}
.hero--slider .hero__sub { max-width: 54ch; }
/* A ghost button is ink-on-transparent, so on the dark hero photo it turns
   into black text on a nearly invisible border. Inside the slider a ghost
   button is redrawn as a light outline instead. */
.hero--slider .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
}
.hero--slider .btn-ghost:hover {
  background: #fff;
  color: var(--navy-800);
  border-color: #fff;
}

/* Slide index + arrows */
.hero__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(22px, 3.4vw, 40px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hero__dots { display: flex; align-items: center; gap: 4px; counter-reset: slide; }
.hero__dot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, .46);
  transition: color .25s var(--ease);
  counter-increment: slide;
}
.hero__dot:hover { color: rgba(255, 255, 255, .8); }
.hero__dot-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.hero__dot-n::before { content: counter(slide, decimal-leading-zero); }
.hero__dot-bar {
  position: relative;
  display: block;
  width: 46px;
  height: 2px;
  background: rgba(255, 255, 255, .24);
  overflow: hidden;
}
.hero__dot-bar i { display: block; width: 0; height: 100%; background: var(--red-500); }
.hero__dot.is-active { color: #fff; }
.hero__dot.is-active .hero__dot-bar i { width: 100%; }
.hero__dot.is-active .hero__dot-bar { animation: heroFill var(--slider-delay, 6000ms) linear forwards; }
.hero--slider.is-paused .hero__dot.is-active .hero__dot-bar { animation-play-state: paused; }
@keyframes heroFill { from { width: 0; } to { width: 100%; } }

.hero__arrows { display: flex; gap: 8px; }
.hero__arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(5, 15, 36, .3);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.hero__arrow svg { width: 18px; height: 18px; }
.hero__arrow:hover { background: var(--red-600); border-color: var(--red-600); transform: translateY(-2px); }

/* ---------- Who we are: offset photo pair ---------- */
.why { padding-bottom: clamp(70px, 8vw, 118px); }
.why__text { min-width: 0; }
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(36px, 5vw, 78px);
  align-items: center;
}
.why__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 3vw, 38px);
  background: var(--line);
  border: 1px solid var(--line);
}
.why__fact { background: var(--paper); padding: 18px 20px 20px; }
.why__fact-k {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.why__fact-v {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
  color: var(--navy-800);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.why__fact-s { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--body); }
.why__action { margin-top: clamp(22px, 2.6vw, 32px); }

.why__media { position: relative; padding-bottom: clamp(26px, 3.4vw, 52px); }
.why__img { overflow: hidden; background: var(--mist); }
.why__img img { width: 100%; height: 100%; object-fit: cover; }
.why__img--main {
  position: relative;
  width: 68%;
  aspect-ratio: 3 / 4;
  box-shadow: var(--sh-2);
}
.why__img--sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  aspect-ratio: 16 / 10;
  border: 9px solid var(--paper);
  box-shadow: var(--sh-3);
}

/* ---------- Applications: full-bleed switcher ---------- */
.apps-intro { padding-bottom: clamp(24px, 3vw, 42px); }
.apps {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: min(78vh, 660px);
  background: var(--navy-900);
}
.apps__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.apps__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.apps__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.apps__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 15, 36, .93) 0%, rgba(5, 15, 36, .70) 34%, rgba(5, 15, 36, .22) 66%, rgba(5, 15, 36, .50) 100%),
    linear-gradient(0deg, rgba(5, 15, 36, .55) 0%, rgba(5, 15, 36, 0) 46%);
}
/* .container already sets the width; an explicit 100% here would push the
   card past the left edge of the viewport. */
.apps__inner { position: relative; z-index: 2; }
.apps__card {
  position: relative;
  width: min(420px, 100%);
  margin-bottom: clamp(38px, 6vw, 74px);
  padding: clamp(24px, 2.8vw, 34px);
  color: #fff;
  background: var(--red-600);
  border-radius: var(--r-lg) 44px var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-red);
  overflow: hidden;
}
.apps__card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M12 12h38v38h34V38h24'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='84' cy='50' r='2.4'/%3E%3Ccircle cx='50' cy='50' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 118px 118px;
}
.apps__card > * { position: relative; }
.apps__card-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.apps__card-title { color: #fff; margin-top: 10px; font-size: clamp(21px, 2.2vw, 27px); }
.apps__card-text { margin-top: 10px; font-size: 14.5px; line-height: 1.66; color: rgba(255, 255, 255, .9); }
.apps__card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.apps__card-tags span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, .92);
}
.apps__card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 18px;
  background: #fff;
  color: var(--red-700);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.apps__card-more svg { width: 15px; height: 15px; }
.apps__card-more:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

.apps__rail-wrap {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.apps__rail {
  pointer-events: auto;
  /* the right padding keeps the rail clear of the fixed CALL tab */
  padding: 22px clamp(66px, 5.4vw, 104px) 22px clamp(18px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apps__rail-item {
  text-align: left;
  padding: 7px 0 7px 16px;
  border-left: 2px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .66);
  font-size: 15px;
  font-weight: 600;
  transition: color .25s var(--ease), border-color .25s var(--ease), padding-left .25s var(--ease);
}
.apps__rail-item:hover { color: #fff; }
.apps__rail-item.is-active { color: #fff; border-left-color: var(--red-500); padding-left: 24px; }

/* ---------- Capability wall ---------- */
.cap-wall { padding-top: clamp(60px, 7vw, 104px); }
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.cap-cell {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cap-cell:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.cap-cell__media { aspect-ratio: 4 / 3; }
.cap-cell__body { padding: 15px 17px 19px; }
.cap-cell__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cap-cell__head h3 { font-size: 15.5px; letter-spacing: -.01em; }
.cap-cell__go { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: var(--red-500); transition: transform .3s var(--ease); }
.cap-cell__go svg { width: 16px; height: 16px; }
.cap-cell:hover .cap-cell__go { transform: translateX(3px); }
.cap-cell__spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
}
.cap-cell__spec .k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.cap-cell__spec .v { color: var(--ink-2); }
.cap-cell__spec .v.mono { font-family: var(--font-mono); font-size: 11.5px; }

/* The eighth tile closes the grid and points at the full specification. */
.cap-cell--more {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: rgba(255, 255, 255, .74);
}
.cap-cell--more:hover { border-color: var(--navy-700); }
.cap-cell--more .cap-cell__more-k {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.cap-cell--more .cap-cell__more-t { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: #fff; line-height: 1.25; }
.cap-cell--more .cap-cell__more-go { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff; }
.cap-cell--more .cap-cell__more-go svg { width: 16px; height: 16px; color: var(--red-500); }

/* ---------- Deliverables ---------- */
.deliverables {
  margin-top: clamp(48px, 5.6vw, 80px);
  padding-top: clamp(34px, 4.2vw, 56px);
  border-top: 1px solid var(--line);
}
.deliverables__head { margin-bottom: clamp(22px, 2.6vw, 34px); }

/* ---------- Closing CTA: person banner ---------- */
.cta-person { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); }
.cta-person__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: 74% 50%;
}
.cta-person::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(5, 15, 36, .97) 0%, rgba(5, 15, 36, .92) 32%, rgba(5, 15, 36, .58) 62%, rgba(5, 15, 36, .18) 100%);
}
.cta-person__inner { position: relative; padding: clamp(54px, 6.6vw, 92px) 0 clamp(62px, 7.4vw, 104px); }
.cta-person__text { max-width: 540px; }
.cta-person__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 14px;
}
.cta-person h2 { color: #fff; max-width: 18ch; }
.cta-person p { margin-top: 14px; color: rgba(255, 255, 255, .78); max-width: 46ch; }
.cta-person .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cta-person__circuit {
  position: absolute;
  left: max(14px, 3%);
  bottom: 0;
  width: 180px;
  color: rgba(255, 255, 255, .14);
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .why__grid { grid-template-columns: 1fr; }
  .why__media { max-width: 560px; }
  .why__img--main { width: 74%; }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps { height: auto; }
  /* On a phone the slides stack: the photograph stays visible above the card. */
  .apps__slide { position: relative; inset: auto; min-height: 540px; opacity: 1; visibility: visible; display: none; }
  .apps__slide.is-active { display: flex; }
  .apps__card { width: 100%; margin-bottom: 0; }
  .apps__rail-wrap {
    position: relative;
    inset: auto;
    align-items: stretch;
    background: var(--navy-900);
    padding: 14px 0 18px;
  }
  .apps__rail {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 0 6%;
    width: 100%;
  }
  .apps__rail-item {
    border-left: 0;
    border-bottom: 2px solid rgba(255, 255, 255, .22);
    padding: 6px 0;
    font-size: 14px;
  }
  .apps__rail-item.is-active { border-left: 0; border-bottom-color: var(--red-500); padding-left: 0; }
}
@media (max-width: 640px) {
  .hero--slider { min-height: 74vh; height: 74vh; }
  .hero--slider .hero__inner { padding: 56px 0 clamp(104px, 15vh, 132px); }
  .hero__arrows { display: none; }
  .hero__dot { padding: 8px 6px; }
  .hero__dot-bar { width: 30px; }
  .why__facts { grid-template-columns: 1fr; }
  .why__img--main { width: 82%; }
  .why__img--sub { width: 62%; border-width: 7px; }
  .cap-grid { grid-template-columns: 1fr; }
  .apps__card { border-radius: var(--r-lg) 30px var(--r-lg) var(--r-lg); margin-bottom: 26px; }
  .apps__rail-item { font-size: 13px; }
  .cta-person__bg { background-position: 68% 50%; }
  .cta-person__circuit { display: none; }
}