/* ============================================================
   Nicety Machinery Design System
   Source of Truth: DESIGN.md v2.1 & 设计参考2.html
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  /* An in-page anchor has to land below the pinned stack, not under it. The blue
     bar (38px) and the header (80px) both stay on screen while the page scrolls,
     so every fragment jump — the skip link, the FAQ quick-nav — is offset here,
     once for the whole site, with a little air under the stack; the pages no
     longer carry an offset of their own. On a phone the blue bar is dropped (see
     the compact-header block further down), so only the header is cleared. */
  scroll-padding-top: 126px;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
}

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

h1, h2, h3, h4, p {
  margin-top: 0;
}

h1, h2, h3, h4 {
  color: var(--blue);
  letter-spacing: -0.035em;
}

/* DESIGN.md v2.1 §4 type scale: H1 52–60px (mobile 34–40), H2 30–36, H3 21–24.
   Weights stay inside the 500–600 range the same table defines. */
h1 {
  margin-bottom: 24px;
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1.12;
  font-weight: 600;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.25;
  font-weight: 500;
}

h3 {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
}

h4 {
  font-size: 16px;
  font-weight: 600;
}

p {
  color: var(--gray-text);
  margin-bottom: 1em;
}

/* Container */
.container {
  width: min(calc(100% - 80px), var(--container));
  margin-inline: auto;
}

@media (max-width: 1180px) {
  .container {
    width: min(calc(100% - 52px), var(--container));
  }
}

@media (max-width: 650px) {
  .container {
    width: min(calc(100% - 36px), var(--container));
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
  font-weight: 600;
}

.skip:focus {
  left: 0;
}

/* Section Spacing */
.section {
  padding: 108px 0;
}

.section--gray {
  background: var(--gray-bg);
}

.section--warm {
  background: var(--yellow-pale);
}

@media (max-width: 650px) {
  .section {
    padding: 76px 0;
  }
}

/* Eyebrow: 48px width, 3px height green bar */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 48px;
  height: 3px;
  content: "";
  background: var(--green);
}

.eyebrow--light {
  color: var(--white);
}

.eyebrow--light::before {
  background: var(--green);
}

/* Section Heading */
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 50px;
}

.section-heading__copy {
  max-width: 820px;
}

.section-heading__copy p {
  max-width: 680px;
  margin-bottom: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.section-heading__aside {
  max-width: 330px;
  padding-left: 18px;
  border-left: 3px solid var(--green);
  color: var(--gray-text);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 940px) {
  .section-heading {
    display: block;
    margin-bottom: 36px;
  }
  .section-heading__aside {
    margin-top: 20px;
  }
}

/* Buttons — DESIGN.md v2.1 §7.1: 48px high, 20–24px side padding, 4px radius,
   blue with white text, deep-green hover, no glow, no scaling. */
.button, .btn {
  display: inline-flex;
  min-height: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .text-link:focus-visible {
  /* §6/§7.1: a clear high-contrast blue outline, not a green tint. */
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.button--primary, .btn-primary {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.button--primary:hover, .btn-primary:hover {
  color: var(--white);
  background: var(--hover-green);
  border-color: var(--hover-green);
}

.button--secondary, .btn-secondary {
  color: var(--blue);
  background: var(--white);
  border-color: var(--blue);
}

.button--secondary:hover, .btn-secondary:hover {
  color: var(--blue);
  background: var(--gray-bg);
  border-color: var(--blue);
}

.button svg, .btn svg {
  width: 17px;
  height: 17px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 180ms ease;
}

.text-link:hover {
  text-decoration-thickness: 2px;
}

/* ---- Top utility bar (§7.3) ----
   The top line above the header: the business scope on the left, the address
   and the reading language on the right. It is a solid brand-blue band with
   pure white text, so the address is the first thing a buyer notices and reads
   as one whole piece of information; nothing on the bar is greyed out or faded.
   It scrolls away while the header stays, so the sticky bar keeps its full
   height and nothing jumps. This is the strong version of the light top line in
   DESIGN.md §7.3, asked for by the owner: white on #1B3770 measures about 11.5:1,
   so every line stays comfortably readable. */
.utility-bar {
  position: relative;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
}

/* The owner asked for the left-hand green accent of the footer here too, so the
   page opens with the same mark it closes with (§6.4). It is the footer's own
   14px and fills the bar's height, exactly as .site-footer::before fills the
   footer, so the two read as one system. The bar's text sits inside .container
   and clears the mark at every width. */
.utility-bar::before {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  content: "";
  background: var(--green);
}

/* §7.3, as the footer does it: the green edge stays attached to the left of the
   full-width bar and narrows to 6px below 768px, so the top and bottom accents
   keep the same weight on a phone. Decoration only: it never covers text. */
@media (max-width: 767px) {
  .utility-bar::before {
    width: 6px;
  }
}

.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  min-height: 38px;
  padding-block: 4px;
}

/* The business scope, at the left end: the one line on the bar that says what
   the company does. It deliberately stays at the bar's own weight — the owner
   asked for it not to be bold, so the letterspacing and the uppercase carry the
   line instead of its weight. Do not set a weight here. */
.utility-bar__line {
  color: var(--white);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.utility-bar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-left: auto;
}

/* 可复制的纯文本（.nz-copyable）：邮箱这类「信息」不做成 mailto 链接，
   因为页面无法兑现那次点击，而买家真正要做的是把它复制走。单击即选中
   整串内容，直接粘进自己的邮件客户端。页面顶栏、页脚、首页联系方式、
   联系我们页，以及记录字段里的邮箱输出，都挂这一个规则。 */
.nz-copyable {
  -webkit-user-select: all;
  user-select: all;
}

/* Plain text in the bar, not a control: buyers copy the address and write from
   their own mail client. The line icon and its "e-mail" label name what it is,
   and all three parts are pure white on the blue band, so the entry reads as one
   piece of information and never pretends to be a button or a link. */
.utility-mail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--white);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

.utility-mail__icon {
  flex: none;
  color: inherit;
}

/* The label says what follows; the address carries the weight. */
.utility-mail__label {
  font-weight: 500;
  letter-spacing: 0.04em;
}

.utility-mail__address {
  /* Normal weight on purpose, asked for by the owner: the address is information
     to read, not a headline, and the label in front of it is the lighter of the
     two so the address still reads as the value. */
  font-weight: 400;
}

.utility-bar__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--white);
}

.utility-bar__lang-label {
  color: var(--white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The language in use is marked by weight and the short green rule the current
   navigation entry uses (§6.2), not by colour alone. */
.utility-bar__lang-current {
  font-weight: 600;
  letter-spacing: 0.1em;
}

.utility-bar__lang-current::after {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 3px;
  content: "";
  background: var(--green);
}

.utility-bar__langs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  list-style: none;
}

.utility-bar__lang-link {
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.utility-bar__lang-link:hover,
.utility-bar__lang-link:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.utility-bar__lang-link.is-active {
  color: var(--white);
  font-weight: 600;
}

/* Only reached when a multilingual plugin is active: its switcher arrives as
   its own markup, which only has to line up with the rest of the bar. */
.utility-bar__lang--plugin ul {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.utility-bar__lang--plugin a {
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.utility-bar__lang--plugin .current-lang a,
.utility-bar__lang--plugin a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* On the blue band the focus ring has to be white to stay visible. */
.utility-bar a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Social marks, at the right-hand end of the bar, in a fixed order: Facebook,
   YouTube, LinkedIn. Each mark sits in a square of its own so that it is already
   a comfortable target once its address is filled in, and it keeps the bar's own
   white instead of a channel colour, so the band stays one piece of brand blue.
   A mark whose address is not filled in yet is the same element without an href,
   so it is not a link and the keyboard never stops on it. */
.utility-social {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.utility-social__item {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  color: var(--white);
  transition: background-color 180ms ease;
}

.utility-social__icon {
  fill: currentColor;
}

/* Only a mark that really has an address answers the pointer: while a channel
   is still waiting for its address the icon does not pretend to be clickable. */
a.utility-social__item[href]:hover,
a.utility-social__item[href]:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

/* Between the phone layout and the widest screens the bar is the tightest, so
   the marks give back a little room here. */
@media (max-width: 900px) {
  .utility-social {
    padding-left: 14px;
  }
  .utility-social__item {
    width: 24px;
    height: 24px;
  }
}

/* Below the widest screens the bar keeps only what a buyer uses: the address,
   the marks and the language. The scope line is already in the hero of the home
   page, and it is the element that gives way, because the address, the marks and
   the language are the three things that have to stay on one line at every
   width — 880px is where those three plus the scope line stop fitting. */
@media (max-width: 880px) {
  .utility-bar__line {
    display: none;
  }
  .utility-bar__inner {
    min-height: 34px;
  }
  .utility-bar__right {
    gap: 6px 14px;
  }
  .utility-bar__lang {
    padding-left: 14px;
  }
  /* The language keeps its short code and drops the word in front of it. */
  .utility-bar__lang-label {
    display: none;
  }
  /* A phone has the labelled address, the marks and the language on one line,
     so the gap and the type tighten a little and the label keeps its word. */
  .utility-mail {
    gap: 6px;
    font-size: 12.5px;
  }
  .utility-social {
    gap: 0;
    padding-left: 12px;
  }
  .utility-social__item {
    width: 22px;
    height: 22px;
  }
}

/* On the narrowest phones the four items no longer fit side by side, so the
   "e-mail" word steps aside: the envelope icon and the address still say what
   the entry is, and the bar stays one line. */
@media (max-width: 460px) {
  .utility-bar__right {
    gap: 6px 10px;
  }
  .utility-mail__label {
    display: none;
  }
  .utility-social {
    padding-left: 10px;
  }
  .utility-social__item {
    width: 20px;
    height: 20px;
  }
}

/* Header & Nav. The section now starts one row higher than the header itself:
   the blue utility bar and the navigation bar are pinned together, so the stack
   comes first and the bar is styled inside it. The header's own design —
   DESIGN.md v2.1 §7.3 (white 80px bar, thin bottom rule with a short green accent
   at one end, blue brand and navigation, no glassy blur) and the header of
   nicety-landing-mockup.html (wordmark, 25px link gaps, green underline on the
   current item) — is realised further down, on .site-header. */

/* The pinned stack. The owner asked for the blue utility bar and the header to
   stay on screen together while the page scrolls, so the two rows are wrapped in
   .site-top (header.php) and the wrapper carries the positioning instead of the
   header alone. It measures itself: whatever height the bar happens to be — it
   wraps to two lines at some widths and is dropped entirely on a phone — the
   header follows it exactly, with no second height to keep in sync by hand.
   assets/wp-behaviors/behaviors.js (the built-in sticky-header behaviour, reused
   as it is) marks the block data-scrolled once the page has left the top, and
   the rule below answers with a soft shadow, so the stack reads as pinned rather
   than as the top of the page. The behaviour's own data-state is deliberately
   left unstyled: the owner asked for the stack to stay visible on the way down,
   not to hide on it. */
.site-top {
  position: sticky;
  z-index: 50;
  /* A logged-in editor carries WordPress's fixed admin bar at the very top of
     the viewport. A sticky stack pinned at 0 slides underneath it, and the top of
     the blue bar disappears behind it as soon as the page scrolls, so the offset
     follows the admin bar's own height: core publishes that height as a custom
     property. A visitor without the bar gets 0 and the plain stack. */
  top: var(--wp-admin--admin-bar--height, 0px);
  transition: box-shadow 200ms ease;
}

/* Installations whose WordPress predates the height property: the bar is 32px
   on desktop and 46px at 782px and below. */
body.admin-bar .site-top {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-top {
    top: var(--wp-admin--admin-bar--height, 46px);
  }
}

/* Pinned over content, the white bar needs to be told apart from the page; the
   shadow is drawn on the wrapper, so it runs along the bottom of whichever row
   is last, and it is lighter and tighter than the card shadow so the header
   never looks like a floating panel. */
.site-top[data-scrolled="true"] {
  box-shadow: var(--shadow-pinned);
}

@media (prefers-reduced-motion: reduce) {
  .site-top {
    transition: none;
  }
}

/* The header: white 80px bar, thin bottom rule, short green accent at one end
   (§7.3 and the mockup, above). Inside the stack it is an ordinary block, and it
   stays positioned, so the dropdown panels and the mobile menu keep hanging from
   it exactly as they did when it did the sticking itself. */
.site-header {
  position: relative;
  height: 80px;
  border-bottom: 1px solid var(--gray-line);
  background: var(--white);
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Short green accent on the header's bottom rule, at the right-hand end. */
.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 9%;
  height: 4px;
  content: "";
  background: var(--green);
}

@media (max-width: 1180px) {
  .site-header::after {
    width: 20%;
  }
}

.header-inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Wordmark: the typographic lockup from the reference, not a redrawn logo. */
.logo {
  display: inline-flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  color: var(--blue);
  line-height: 1;
  text-decoration: none;
}

.logo__word {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.065em;
  line-height: 1;
}

.logo__sub {
  margin-top: 7px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.27em;
  line-height: 1;
}

/* The picture comes from a square 2363×2363 artboard: the mark itself is one
   short horizontal band in the middle of the canvas, so sizing by the canvas
   height alone would leave the mark a few pixels tall and soft. The picture is
   therefore given the box the mark itself has — wide and short — and
   object-fit: cover crops the artboard's empty top and bottom, so the mark
   fills the box at its own width and full resolution. A tightly cropped export
   dropped in later fills the same box with nothing left to crop. */
.header-inner > .logo .logo__image {
  width: 236px;
  height: 60px;
  object-fit: cover;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: auto;
}

/* §7.3：导航保持品牌蓝（与 mockup 的“ink 默认、悬浮变蓝”不同，规范文字优先）；
   字号与字重取 §4 的 14–16px / 500–600。 */
.nav-link {
  position: relative;
  padding: 28px 0 25px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.nav-link::after {
  position: absolute;
  right: 100%;
  bottom: 17px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--green);
  transition: right 180ms ease;
}

.nav-link:hover::after, .nav-link.is-active::after, .nav-link[aria-current="page"]::after {
  right: 0;
}

.header-cta {
  height: 44px;
  min-height: 44px;
  margin-left: 24px;
  padding: 0 18px;
  font-size: 14px;
  white-space: nowrap;
}

/* The full bar — logo, seven entries, the search entry and the request button —
   needs about 1075px of viewport. Between that width and the compact header the
   two groups close up a little, which is invisible at this size and keeps the bar
   on one line: measured in the browser, 51px of horizontal overflow at 1024px
   before this rule, none after it. */
@media (min-width: 1000px) and (max-width: 1100px) {
  .header-inner {
    gap: 20px;
  }

  .main-nav {
    gap: 16px;
  }

  .header-cta {
    margin-left: 16px;
  }
}

@media (max-width: 999px) {
  .site-header {
    height: 74px;
  }
  .main-nav {
    display: none;
  }
  .header-cta {
    display: none;
  }
}

/* Footer — design3.5.md v1.2 §7：深蓝底 + 左侧通高绿竖条 + 深蓝叠暗底栏 */
.site-footer {
  position: relative;
  overflow: hidden;
  color: #DCE5F3;
  background: var(--blue);
  max-width: none;
  margin: 0;
  padding: 0;
}

/* v1.2：左侧点缀绿竖条固定 14px，自页脚顶边贯穿到底部 */
.site-footer::before {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  content: "";
  background: var(--green);
}

/* v1.2：Logo 上方的绿色短横装饰已移除，此处不再生成 */

.footer-main {
  padding: 56px 0 48px;
}

/* 四列：品牌（含询盘入口）｜Explore｜Support｜Contact。
   四个块必须各占一列。上一版只声明了三列，第四块 Contact 换行落到品牌下方，
   右侧空出一大片、页脚高度翻倍，这就是页脚又高又空的原因。 */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 56px;
}

.footer-brand .logo {
  margin-bottom: 18px;
  color: var(--white);
}

.footer-brand .logo__word,
.footer-brand .logo__sub {
  color: var(--white);
}

/* The navy lettering of the logo would sink into the footer blue, so the
   picture sits on a small white plate. The plate reads as a deliberate card,
   and the logo stays legible whether the PNG itself is transparent or white.
   It crops the artboard's empty band exactly as the header does; the box is a
   little taller because the plate's padding sits inside it. */
.footer-brand .logo__image {
  width: 208px;
  height: 60px;
  object-fit: cover;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--white);
}

/* The white footer mark sits directly on the footer blue: no plate, no
   padding, and the same artboard crop as the header, so the mark reads at the
   size the brand block needs instead of at the height of its empty canvas.
   While the white file is not uploaded the footer keeps the rule above and
   shows the blue logo on its plate. */
.footer-brand .logo__image--white {
  width: 208px;
  height: 52px;
  object-fit: cover;
  padding: 0;
  background: none;
}

.footer-brand p {
  max-width: 34ch;
  margin-bottom: 0;
  color: #AFC2E0;
  font-size: 14px;
  line-height: 1.62;
}

/* 品牌列补一个询盘入口：既补上这列的高度，也让页脚有一个明确去处。
   这一列在深蓝页脚上，所以用白底按钮与蓝字，与页脚其他文字区分开。 */
.footer-brand__cta {
  margin-top: 22px;
  color: var(--blue);
  background: var(--white);
  border-color: var(--white);
}

.footer-brand__cta:hover {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
}

/* §7.3：页脚列标题为白色，字号与字重取 §4 的 12–14px / 500–600。 */
.footer-title {
  margin: 0 0 16px;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  width: fit-content;
  color: #C9D6EC;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 联系方式逐行「小标签 + 值」对齐：邮箱与两个 WhatsApp 一眼能找到，
   标签用弱化色，值用白色，不再是一串等重的下划线链接。 */
.footer-contact {
  display: grid;
  gap: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
}

.footer-contact li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 3px 12px;
  align-items: baseline;
}

.footer-contact__label {
  color: #8DA4C5;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 邮箱是可复制的纯文本，不是 mailto 链接：不提供它兑现不了的点击，
   单击即选中整串地址，方便直接粘到自己的邮件客户端里。
   与页头顶栏 .utility-mail__address、信息页 .nz-inquiry__plain 同一做法。
   颜色与同一列里的厂区地址、Hours 取值一致（#C9D6EC，见下方
   .footer-contact p），不再用纯白把邮箱从这组信息里挑出来。 */
.footer-contact__plain {
  color: #C9D6EC;
  overflow-wrap: anywhere;
}

.footer-contact p {
  margin: 0;
  color: #C9D6EC;
  font-size: 13.5px;
}

/* 厂区地址：标签独占一行，地址用满整列宽度，长地址才不至于折成很多行。
   再收紧一档：字号降一级、行距压紧、标签与地址之间不留空行，
   完整门牌地址仍然全部显示，只是不再把页脚撑高。 */
.footer-contact__row--address {
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
}

.footer-contact__row--address p {
  font-size: 12px;
  line-height: 1.42;
  letter-spacing: 0.01em;
}

/* 两个厂区互为同一组地址，之间不再按行距隔开一整段。 */
.footer-contact__row--address + .footer-contact__row--address {
  margin-top: -4px;
}

/* 社媒标记：与顶栏同一组图标，放在联系方式下方。悬浮只给一层浅色底，
   不借用按钮的绿色整块背景（DESIGN.md §7），未填地址的标记也不响应指针。 */
.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.footer-social__item {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--white);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.footer-social__icon {
  fill: currentColor;
}

a.footer-social__item[href]:hover,
a.footer-social__item[href]:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 480px) {
  .footer-social {
    gap: 8px;
    margin-top: 16px;
  }
  .footer-social__item {
    width: 32px;
    height: 32px;
  }
}

/* 底栏：深蓝叠暗层 + 细分隔线 */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--blue-deep);
}

/* 底栏两行：第一行版权 + 政策链接，第二行 reCAPTCHA 声明 + 域名。
   原来四块挤在一行，换行时机不可控，读起来也乱。 */
.footer-bottom .container {
  display: grid;
  gap: 10px;
  padding-block: 20px;
  color: #A9BBD9;
  font-size: 12px;
}

.footer-bottom__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.footer-legal a {
  color: #C9D6EC;
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cookie settings is a button, so it takes the same colour as the policy
   links beside it instead of the container's quieter grey. */
.footer-legal .footer-legal__settings {
  color: #C9D6EC;
}

.footer-legal .footer-legal__settings:hover {
  color: var(--white);
}

.footer-recaptcha {
  font-size: 11.5px;
  color: #8DA4C5;
  line-height: 1.5;
}

.footer-recaptcha a {
  color: #C9D6EC;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-recaptcha a:hover {
  color: var(--white);
}

.footer-domain {
  color: #C9D6EC;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.footer-domain:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-brand p {
    max-width: 56ch;
  }
}

/* §7.3: the green edge stays attached to the left of the full-width footer and
   narrows to 6px below 768px. It is decoration only: it never covers text. */
@media (max-width: 767px) {
  .site-footer::before {
    width: 6px;
  }
}

@media (max-width: 680px) {
  .footer-main {
    padding: 40px 0 34px;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
  .footer-brand,
  .footer-col--contact {
    grid-column: 1 / -1;
  }
  /* Explore and Support sit side by side, so the two long link rows stay
     affordable on a phone; the type steps down one notch to keep the long
     labels on fewer lines. */
  .footer-links {
    gap: 9px;
  }
  .footer-links a {
    font-size: 13.5px;
  }
  /* 72px keeps the longest label (WHATSAPP) on one line, so the values stay
     aligned instead of jumping a line at the narrowest width. */
  .footer-contact li {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .footer-bottom .container {
    gap: 8px;
    padding-block: 16px;
  }
  .footer-bottom__row {
    justify-content: flex-start;
  }
}

/* Nav panels — the entries behind one primary navigation item.
   DESIGN.md v2.1 §7.3 / §7.6: panels open on hover and, for the keyboard, as
   soon as the entry or the panel itself holds focus; they stay blue-and-white
   with one short green rule and no glassy blur. A short list of pages is a
   plain dropdown; a content type opens a wider panel in which every entry
   carries the picture kept on its term, beside one featured record. */
.nav-item {
  position: relative;
}

.nav-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 180ms ease;
  vertical-align: middle;
}

.nav-item:hover .nav-arrow,
.nav-item:focus-within .nav-arrow {
  transform: rotate(180deg);
}

.nav-panel {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  padding: 22px 24px 18px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-top: 3px solid var(--green);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease;
}

/* The last entries sit at the right end of the bar, so their panel opens
   inwards instead of running off the viewport. */
.nav-item--end .nav-panel {
  left: auto;
  right: 0;
}

/* An entry that is not quite at the right end opens its panel inwards only
   below the width at which that panel would otherwise leave the viewport
   (measured: 98px of horizontal overflow at 1024px, none from 1200px up). */
@media (max-width: 1199px) {
  .nav-item--inner .nav-panel {
    left: auto;
    right: 0;
  }
}

.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-panel__inner {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

.nav-panel__inner--narrow {
  display: block;
}

.nav-panel__col {
  min-width: 216px;
  max-width: 330px;
}

/* Every panel's own list leads its panel (components/nav-panel.php): its entries
   are the places a visitor can go, so they wear the primary reading — 15px / 600 /
   var(--blue-deep) — while the note under an entry stays quiet (var(--gray-text)
   at 12.5px) and a record the panel points at is drawn as the detail of that list
   (.nav-panel__col--records and .nav-panel__col--featured, below). The desktop
   panel only: the mobile menu is a whole screen of entries carrying their
   pictures, where this weight would shout rather than lead. */
.nav-panel .nav-tile {
  color: var(--blue-deep);
}

.nav-panel .nav-tile__label {
  font-size: 15px;
  font-weight: 600;
}

/* The column a panel points at one record with (Case Studies): the record is the
   detail of the list beside it, so it is drawn as the same light card the record
   column uses, and the record's name is set the way a record's name is set there
   (.nav-feature__title, below). It keeps its picture: a case study is read from
   its project, and the card is where that photograph belongs. */
.nav-panel__col--featured {
  width: 272px;
  padding: 18px 16px;
  background: var(--gray-bg);
  border-radius: 8px;
}

/* The record column of a desktop panel (components/nav-panel.php). It is the
   second half of a pair: the list beside it leads with the entries, and this
   column follows with the names of the records that carry the entry the pointer
   or the keyboard focus is on, under the name of that entry — so it is drawn as
   the pair's second side, a light card inset in the panel, while the list stays
   white (.nav-panel__inner--records, below). Only one group of names is in flow
   at a time; the others are display:none, which is what keeps a keyboard tab out
   of a group nobody is reading.

   The column stays out of the flow until the script says it can keep it in step
   with the list: without JavaScript a column that cannot follow the pointer
   would show one category's machines under another category's name
   (assets/js/nav-preview.js adds the class). The list of entries is complete
   without it — every entry is a link to its own archive page. */
.nav-panel__col--records {
  display: none;
  width: 258px;
  padding: 18px 16px;
  background: var(--gray-bg);
  border-radius: 8px;
}

html.nz-nav-live .nav-panel__col--records {
  display: block;
}

/* The one list whose entries own a column beside them (Equipment). An entry wears
   the mark of the panel's own labels — the green bar, a pill, and an arrow that
   points at the column — and the entry with the mark is the entry the column
   belongs to. Both marks are always drawn, shown or not, so an entry never changes
   width or shifts when the pointer moves; they appear on the entry the pointer or
   the keyboard focus is on, and stay on the entry the column belongs to once the
   pointer has left the list (.is-current, put there by the markup first and by
   assets/js/nav-preview.js after that). How an entry itself reads is the panel's
   own reading (.nav-panel .nav-tile, above). */
.nav-panel__inner--records .nav-tile {
  position: relative;
  padding: 7px 8px 7px 15px;
}

.nav-panel__inner--records .nav-tile::before {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  content: "";
  background: var(--green);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 150ms ease, transform 150ms ease;
}

.nav-panel__inner--records .nav-tile::after {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
  content: "→";
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition: opacity 150ms ease;
}

.nav-panel__inner--records .nav-tile:hover,
.nav-panel__inner--records .nav-tile:focus-visible,
.nav-panel__inner--records .nav-tile.is-current {
  background: var(--gray-bg);
}

.nav-panel__inner--records .nav-tile:hover::before,
.nav-panel__inner--records .nav-tile:focus-visible::before,
.nav-panel__inner--records .nav-tile.is-current::before {
  opacity: 1;
  transform: scaleY(1);
}

.nav-panel__inner--records .nav-tile:hover::after,
.nav-panel__inner--records .nav-tile:focus-visible::after,
.nav-panel__inner--records .nav-tile.is-current::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel__inner--records .nav-tile::before,
  .nav-panel__inner--records .nav-tile::after {
    transition: none;
  }
}

.nav-records__group {
  display: none;
}

.nav-records__group.is-shown {
  display: block;
  animation: nz-nav-records-in 200ms ease both;
}

/* The name of the entry the names below belong to, and the link to that entry's
   own archive page — the complete list, which the column only opens. It carries
   the panel's own label beside its column: .nav-panel__title, uppercase with the
   green mark under it, so the right-hand column reads as part of the panel and
   not as a stray list. What is left here is only what a link needs on top of that
   label, and the name wraps rather than being cut short: an equipment category
   name is long, and the column is narrow. */
.nav-records__title {
  display: block;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.nav-records__title:hover {
  text-decoration: underline;
}

.nav-records__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A machine's name is the detail of the entry the pointer is on, so it sits one
   step under that entry: 14px, regular weight, var(--blue) — the blue the panel's
   own labels wear — on the column's card, and the name under the pointer lifts
   out of the card in white. The weight is left alone on hover on purpose: a
   hover that thickened the name would re-wrap it and move every name under it. */
.nav-records__link {
  display: block;
  padding: 6px 8px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  border-radius: 6px;
  overflow-wrap: anywhere;
  transition: background-color 150ms ease, color 150ms ease;
}

.nav-records__link:hover,
.nav-records__link:focus-visible {
  color: var(--blue-deep);
  background: var(--white);
  text-decoration: underline;
}

@keyframes nz-nav-records-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-records__group.is-shown {
    animation: none;
  }
}

.nav-panel__title {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-panel__title::after {
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 7px;
  content: "";
  background: var(--green);
}

.nav-tiles {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-tile {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 7px 8px;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
  transition: color 150ms ease, background-color 150ms ease;
}

.nav-tile:hover,
.nav-tile:focus-visible {
  color: var(--blue);
  background: var(--gray-bg);
}

.nav-tile__thumb {
  flex: 0 0 auto;
  display: block;
  width: 58px;
  height: 42px;
  overflow: hidden;
  background: var(--gray-bg);
  border-radius: 4px;
}

.nav-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-tile__body {
  display: block;
  min-width: 0;
}

.nav-tile__label {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
}

.nav-tile__note {
  display: block;
  margin-top: 2px;
  color: var(--gray-text);
  font-size: 12.5px;
  line-height: 1.4;
}

.nav-feature {
  display: block;
  color: var(--text);
  text-decoration: none;
}

.nav-feature__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gray-bg);
  border-radius: 6px;
}

.nav-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The name of the record the card points at: the same step as a name in the record
   column — 14px, regular weight, var(--blue) — because the card is the same kind
   of thing, a record the list beside it leads to and not an entry of that list. */
.nav-feature__title {
  display: block;
  margin-top: 10px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

.nav-feature:hover .nav-feature__title {
  color: var(--blue-deep);
  text-decoration: underline;
}

.nav-feature__text {
  display: block;
  margin-top: 5px;
  color: var(--gray-text);
  font-size: 13px;
  line-height: 1.5;
}

.nav-panel__foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-line);
}

.nav-panel__more {
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.nav-panel__more:hover {
  text-decoration: underline;
}

.nav-panel__more-mark {
  margin-left: 6px;
}

/* §6 / §7.1: one clear high-contrast blue outline for everything reachable by
   keyboard inside the navigation. */
.nav-tile:focus-visible,
.nav-feature:focus-visible,
.nav-records__title:focus-visible,
.nav-records__link:focus-visible,
.nav-panel__more:focus-visible,
.nav-mobile__summary:focus-visible,
.nav-mobile__sub-summary:focus-visible,
.nav-mobile__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Mobile menu — a native disclosure, so the navigation works without
   JavaScript and the entries stay the same as on the desktop bar. */
.nav-mobile {
  display: none;
}

@media (max-width: 999px) {
  /* The bar itself is replaced by the menu below the logo row. */
  .site-header .main-nav,
  .site-header .header-cta {
    display: none;
  }

  .nav-mobile {
    display: block;
    width: 100%;
  }

  .nav-mobile__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    color: var(--blue);
    font-size: 15px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: 8px;
  }

  .nav-mobile__summary::-webkit-details-marker {
    display: none;
  }

  .nav-mobile__summary::marker {
    content: "";
  }

  .nav-mobile__bars {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--blue);
    box-shadow: 0 -5px 0 var(--blue), 0 5px 0 var(--blue);
  }

  .nav-mobile__panel {
    max-height: calc(100vh - 170px);
    padding: 4px 0 20px;
    overflow-y: auto;
    border-bottom: 1px solid var(--gray-line);
  }

  .nav-mobile__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-mobile__link,
  .nav-mobile__sub-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 2px;
    color: var(--blue);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-line);
  }

  .nav-mobile__sub-summary::after {
    width: 9px;
    height: 9px;
    content: "";
    border-right: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(45deg);
    transition: transform 180ms ease;
  }

  .nav-mobile__sub[open] > .nav-mobile__sub-summary::after {
    transform: rotate(-135deg);
  }

  .nav-mobile__sub .nav-panel__inner {
    display: block;
    padding: 6px 0 14px;
  }

  .nav-mobile__sub .nav-panel__col {
    min-width: 0;
    max-width: none;
    padding: 0;
    border: none;
  }

  /* The featured record is a column of the desktop panel, where it is the card the
     panel's list points at; in the mobile menu it follows the same list in one
     column, so it goes back to being a block under a hairline. */
  .nav-mobile__sub .nav-panel__col--featured {
    width: auto;
    margin-top: 14px;
    padding: 14px 0 0;
    background: none;
    border-top: 1px solid var(--gray-line);
    border-radius: 0;
  }

  .nav-mobile__sub .nav-panel__title {
    margin-top: 12px;
  }

  .nav-mobile__sub .nav-feature__thumb {
    max-width: 320px;
  }

  .nav-mobile__sub .nav-panel__foot {
    margin-top: 12px;
  }

}

/* Term archive — the picture kept on the term, above the records that use it.
   The same picture is the entry image of the navigation panel. */
.nz-taxonomy-hero {
  max-width: 980px;
  margin: 0 0 36px;
}

.nz-taxonomy-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Mobile Sticky Bar */
.mobile-cta {
  display: none;
}

/* The persistent inquiry bar covers the whole compact-header range, so a phone
   and a small tablet always have exactly one fixed primary action. The space it
   takes at the end of the page is reserved by the footer rule further down. */
@media (max-width: 999px) {
  .mobile-cta {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--gray-line);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(27, 55, 112, 0.18);
  }
}

/* Closing quote band. It always sits directly above the blue footer, so it
   keeps a light ground with a hairline above it instead of forming a second
   blue slab with the footer. The blue is carried by the heading and the solid
   button, and the label keeps the green edge it has everywhere else
   (DESIGN.md v2.1 §3.1 蓝色集中在标题与按钮、§5 区段、§7.3 页脚). */
.quote-band {
  padding: 64px 0 68px;
  border-top: 1px solid var(--gray-line);
  background: var(--white);
}

.quote-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.quote-copy {
  max-width: 750px;
}

/* The label and the button keep the site's own treatment: the plain eyebrow
   (brand blue text with the green 48 x 3 bar) and the standard solid blue
   button, so nothing about this band needs its own colour vocabulary. */
.quote-copy h2 {
  margin-bottom: 12px;
  color: var(--blue);
}

.quote-copy p {
  margin-bottom: 0;
  color: var(--gray-text);
  font-size: 1.05rem;
}

@media (max-width: 940px) {
  .quote-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .quote-band .button {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .quote-band {
    padding: 52px 0 56px;
  }
}

/* Neutral Gray Placeholder Block */
.ph-box {
  background: var(--ph-bg);
  border: 1px dashed var(--ph-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: var(--gray-text);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ph-box svg {
  width: 36px;
  height: 36px;
  opacity: 0.65;
}

.ph-box .ph-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   reCAPTCHA v3 — hide floating badge, add textual attribution in footer
   Google allows hiding the badge when attribution is shown elsewhere.
   ============================================================ */
.grecaptcha-badge {
  visibility: hidden;
  opacity: 0;
  transition: none;
}

/* ============================================================
   Header search (§17.2) — a native disclosure that submits the same
   plain `s` request as the results page, so it works without JavaScript.
   The panel of `.nz-search-form` is re-laid out here because the shared
   framework rules assume a wide, in-page form.
   ============================================================ */
.header-search {
  position: relative;
  margin-left: 24px;
}

.header-search__toggle {
  display: inline-flex;
  padding: 10px 0;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.header-search__toggle::-webkit-details-marker {
  display: none;
}

.header-search__toggle::after {
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.header-search[open] > .header-search__toggle::after {
  transform: rotate(225deg);
}

/* Two classes on purpose: framework.css loads after this file and carries the
   wide, in-page layout of `.nz-search-form`, so the panel has to out-specify it. */
.nz-search-form.header-search__panel {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  margin-bottom: 0;
}

.header-search__field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--gray-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nz-search-form .header-search__row input[type="search"] {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
}

.nz-search-form .header-search__row .button {
  height: 42px;
  min-height: 42px;
}

.header-search__toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 999px) {
  /* The bar is replaced by the mobile menu, so the entry sits at the row end. */
  .header-search {
    margin-right: 0;
    margin-left: auto;
  }
}
/* ============================================================
   Measurement consent notice
   Shown until the visitor chooses; the notice itself is inert
   markup until its script runs, so [hidden] has to win over the
   layout. It is a card floating over the page, not a strip along
   the bottom edge: a full-width bar down there reads as part of
   the footer (the footer owns the blue slab, DESIGN.md v2.1 §5)
   and the choice was easy to scroll past.
   On a wide screen the card sits centered in the viewport — plainly
   in view, the owner's placement choice to lift the consent rate,
   with both answers equally prominent — and becomes the full-width
   bottom sheet on a narrow one, where width is available and height
   is not. A floating panel is what the design system allows a soft
   shadow for (§8). The owner asked for the card to carry more of
   the brand colors: the title sits in a full-bleed brand-blue band
   with the 48 x 3 green eyebrow mark under it, a 3px green rule
   leads the top edge, and the two answers stay ordinary buttons of
   the same size — a solid blue primary and an outlined deep-green
   secondary — so declining the measurement stays exactly as
   visible as accepting it.
   ============================================================ */
.nz-consent {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 95;
  width: 460px;
  max-width: calc(100vw - 48px);
  /* Horizontally centered at mid-height: translate(-50%, -50%) centers the
     card, and the entrance keyframes end on the same offset so the resting
     position and the animation agree (reduced-motion keeps this transform).
     Both answers stay equally reachable, so the placement nudges neither. */
  transform: translate(-50%, -50%);
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(21, 44, 91, 0.26);
  animation: nz-consent-rise 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.nz-consent::before {
  display: block;
  height: 3px;
  border-radius: 6px 6px 0 0;
  /* The 3px rule along the top edge now leads with the brand green, sitting
     on the blue title band: both colors carry the card. */
  background: var(--green);
  content: "";
  transform-origin: left center;
  animation: nz-consent-rule 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Full-bleed brand-blue band behind the title; the green bar under the
   title is the same 48 x 3 mark the section eyebrows use, shown on dark. */
.nz-consent__head {
  padding: 16px 24px 15px;
  background: var(--blue);
  border-radius: 6px 6px 0 0;
}

.nz-consent__head .nz-consent__title {
  margin: 0;
  color: var(--white);
  font-size: 19px;
}

.nz-consent__head .nz-consent__title::after {
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 9px;
  background: var(--green);
  content: "";
}

.nz-consent[hidden] {
  display: none;
}

.nz-consent__inner {
  display: grid;
  gap: 16px;
  padding: 18px 24px 22px;
}

.nz-consent__copy {
  min-width: 0;
}

.nz-consent__title {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.nz-consent__text {
  margin: 0;
  color: var(--gray-text);
  font-size: 15px;
  line-height: 1.6;
}

.nz-consent__text a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  transition: color var(--transition-color, 180ms ease);
}

/* Hover joins the site's small green accent: blue link, deep green on hover. */
.nz-consent__text a:hover,
.nz-consent__text a:focus-visible {
  color: var(--hover-green);
}

.nz-consent__choice {
  display: grid;
  gap: 10px;
}

/* One row, two equal buttons: neither answer is the easier one to reach. The
   accept label is a whole sentence and the base .button is nowrap at a fixed
   48px height, so inside this bar the two answers keep their equal width and
   grow to the same height together, instead of one label spilling over its
   border and into the other button. */
.nz-consent__actions {
  display: flex;
  gap: 10px;
}

.nz-consent__actions .button {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  min-height: 48px;
  padding: 9px 14px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

/* Both answers keep equal weight: accept takes the brand green and drops a
   clearly visible shade on hover; decline stays white with blue text and
   gains only a faint blue-tinted white on hover, so neither answer shouts
   over the other. */
.nz-consent__actions .button--primary {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: var(--white);
}

.nz-consent__actions .button--primary:hover,
.nz-consent__actions .button--primary:focus-visible {
  /* #215029 is a second plainly visible step below the previous hover
     (#2A6633), keeping the same darkening rhythm from #337D3E. */
  border-color: #215029;
  background: #215029;
  color: var(--white);
}

.nz-consent__actions .button--secondary {
  border-color: var(--blue);
  background: var(--white);
  color: var(--blue);
}

.nz-consent__actions .button--secondary:hover,
.nz-consent__actions .button--secondary:focus-visible {
  border-color: var(--blue);
  /* A hint of brand blue over the white — a shade difference, not a fill. */
  background: rgba(27, 55, 112, 0.07);
  color: var(--blue);
}

.nz-consent__note {
  margin: 0;
  color: var(--gray-text);
  font-size: 13px;
  line-height: 1.5;
}

/* The card rises into place and its top rule draws itself, the same
   restrained vocabulary the section reveals use (motion.css). */
@keyframes nz-consent-rise {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 18px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* The bottom sheet rises from the bottom edge instead. */
@keyframes nz-consent-rise-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes nz-consent-rule {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nz-consent,
  .nz-consent::before {
    animation: none !important;
  }
}

/* Narrow screen: the notice becomes the sheet along the bottom edge. */
@media (max-width: 999px) {
  .nz-consent {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    border-radius: 0;
    transform: none;
    box-shadow: 0 -14px 36px rgba(21, 44, 91, 0.24);
    animation-name: nz-consent-rise-up;
  }

  .nz-consent::before {
    border-radius: 0;
  }

  .nz-consent__inner {
    width: min(calc(100% - 40px), 720px);
    margin-inline: auto;
    gap: 14px;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .nz-consent__head {
    padding: 14px 20px 13px;
  }

  .nz-consent__head .nz-consent__title {
    font-size: 18px;
  }

  .nz-consent__text {
    font-size: 14px;
    line-height: 1.55;
  }

  .nz-consent__note {
    font-size: 12px;
  }
}

/* The two choices share one row while there is room for both; below that
   they stack rather than shrink to an unreadable width. */
@media (max-width: 480px) {
  .nz-consent__actions {
    flex-wrap: wrap;
  }

  .nz-consent__actions .button {
    flex: 1 1 140px;
  }
}

.footer-legal__settings {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   FAQ: one question per disclosure button, answers read from the
   shared rules. Shared by the FAQ page and the home page, so the
   indicator and the focus outline are written once.
   ============================================================ */
.nz-faq {
  margin-top: var(--space-section);
}

.nz-faq__title {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 30px;
  color: var(--blue);
}

.nz-faq__list {
  border-top: 1px solid var(--gray-line);
}

.nz-faq__item {
  border-bottom: 1px solid var(--gray-line);
}

.nz-faq__question {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.nz-faq__question:hover {
  color: var(--blue);
}

.nz-faq__question:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* The one indicator both templates show; it turns as the answer opens, so the
   open state is not carried by colour alone. */
.nz-faq__icon {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  transition: transform 180ms ease;
}

.nz-faq__question[aria-expanded="true"] .nz-faq__icon {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nz-faq__icon {
    transition: none;
  }
}

.nz-faq__answer {
  padding-bottom: 16px;
  font-size: 15px;
  line-height: 24px;
  color: var(--gray-text);
}

.nz-faq__answer p {
  margin: 0 0 10px;
}

.nz-faq__answer p:last-child {
  margin-bottom: 0;
}

.nz-faq__answer a {
  color: var(--blue);
  font-weight: 600;
}

/* On a narrow screen the notice is a sheet across the bottom of the viewport and
   its own measured height is written to --nz-consent-h. Anything pinned to that
   same edge is lifted clear of it while the choice is still open, so the mobile
   inquiry bar and the chat button stay reachable instead of hiding behind it
   (§12.1 of the site plan; the sheet's room is reserved further down, with the
   mobile CTA). The card on a wide screen sits at the lower left, clear of both,
   and leaves the page's own layout alone. */
@media (max-width: 999px) {
  body.nz-consent-open .wa__popup_chat_box {
    transform: translateY(calc(-1 * var(--nz-consent-h, 0px)));
  }
}


/* ============================================================
   Compact mobile navigation and the single persistent inquiry action.
   The chat widget is left entirely to its own plugin: this theme neither
   positions nor hides it.
   ============================================================ */
@media (max-width: 999px) {
  /* Keep the phone header to the brand and one menu control. Search moves into
     the menu; the persistent inquiry action remains at the viewport bottom. */
  .utility-bar {
    display: none;
  }

  /* With the blue bar gone, an anchor only has to clear the header. */
  html {
    scroll-padding-top: 76px;
  }

  .site-header {
    height: 64px;
  }

  .header-inner {
    gap: 14px;
  }

  .header-inner > .logo .logo__word {
    font-size: 25px;
  }

  .header-inner > .logo .logo__sub {
    margin-top: 5px;
    font-size: 7.5px;
  }

  .header-inner > .logo .logo__image {
    width: 176px;
    height: 44px;
  }

  .header-search {
    display: none;
  }

  .nav-mobile {
    width: auto;
    margin-left: auto;
  }

  .nav-mobile__root {
    position: static;
  }

  .nav-mobile__summary {
    width: auto;
    min-height: 44px;
    padding: 9px 12px;
    border-color: transparent;
    border-radius: var(--radius);
  }

  .nav-mobile__root[open] > .nav-mobile__summary {
    border-color: var(--gray-line);
    background: var(--gray-bg);
  }

  .nav-mobile__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - 64px - var(--wp-admin--admin-bar--height, 0px));
    max-height: calc(100dvh - 64px - var(--wp-admin--admin-bar--height, 0px));
    padding: 8px max(18px, calc((100vw - var(--container)) / 2)) 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--gray-line);
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .nav-mobile .nz-search-form.nav-mobile__search {
    display: block;
    max-width: none;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--gray-line);
  }

  .nav-mobile__search .header-search__row {
    flex-wrap: nowrap;
  }

  .nav-mobile__search .header-search__row input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-mobile__search .button {
    flex: 0 0 auto;
  }

  body .nz-home .nz-hero {
    padding-top: 32px;
  }

  body .nz-page-head,
  body .nz-collection,
  body .nz-single {
    padding-top: 36px;
  }
}

@media (max-width: 430px) {
  .nav-mobile__panel {
    padding-right: 18px;
    padding-left: 18px;
  }

  .nav-mobile__search .header-search__row {
    align-items: stretch;
    flex-direction: column;
  }

  .nav-mobile__search .button {
    width: 100%;
  }
}

/* The footer entry is the only continuously fixed primary CTA on phones and
   small tablets. The footer carries the safety distance the bar needs, so the
   last paragraph, link or form control is never hidden behind it. */
@media (max-width: 999px) {
  body {
    --nz-mobile-cta-h: 76px;
    padding-bottom: var(--nz-consent-h, 0px) !important;
  }

  .site-footer {
    margin-bottom: calc(var(--nz-mobile-cta-h) + env(safe-area-inset-bottom, 0px));
  }

  .mobile-cta {
    min-height: var(--nz-mobile-cta-h);
    align-items: center;
    bottom: var(--nz-consent-h, 0px);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    transform: none !important;
  }

  .mobile-cta > .button {
    width: 100%;
    min-width: 0;
  }
}