/* =========================================================
   LIMBEST – Swiss grid layer
   12 columns (desktop) · gutter 24px · margin = --pad
   ========================================================= */
:root { --gutter: 24px; }
@media (max-width: 600px) { :root { --gutter: 16px; } }

/* 需要“精确到栏”的区块:声明为 query container。
   里面的元素可以用 var(--col) = 1 栏的宽度。
   用法:left / width / margin 写成 calc(var(--col)*N + var(--gutter)*M) */
.hero__inner,
.about > .container,
.services > .container,
.industries > .container,
.knowledge > .container,
.experience__inner {
  container-type: inline-size;
  --w: 100cqw;
  --col: calc((var(--w) - 11 * var(--gutter)) / 12);
}
.why__stage {
  container-type: inline-size;
  --w: calc(100cqw - 2 * var(--pad));
  --col: calc((var(--w) - 11 * var(--gutter)) / 12);
}
.cta {
  container-type: inline-size;
  --w: min(100cqw - 2 * var(--pad), var(--max));
  --col: calc((var(--w) - 11 * var(--gutter)) / 12);
  --x0: calc((100cqw - var(--w)) / 2);   /* 内容区左边到屏幕左边的距离 */
}

/* ===== 对齐检查线:按键盘 G 显示/隐藏(上线前删掉) ===== */
.grid-overlay {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: none;
  width: 100%; margin-inline: auto;
  max-width: calc(var(--max) + var(--pad) * 2);
  padding-inline: var(--pad);
}
.grid-overlay.on { display: block; }
.grid-overlay div {
  height: 100%; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.grid-overlay span { background: rgba(213, 43, 48, .10); }
@media (max-width: 900px) {
  .grid-overlay div { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid-overlay span:nth-child(n+9) { display: none; }
}
@media (max-width: 600px) {
  .grid-overlay div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-overlay span:nth-child(n+5) { display: none; }
}