/* ============================================================
   Home page — the reference layout for the rest of the site.
   Sections alternate white and light grey (§5 of DESIGN.md), the
   green stays a short rule, and blue carries the brand voice.
   The motion hooks (data-nz-reveal / data-nz-arrow) are declared
   here on the elements and animated by assets/css/motion.css,
   which owns every transition so nothing animates twice.
   ============================================================ */

.nz-home {
  /* Nothing on this page may widen the viewport (§13 of DESIGN.md). */
  overflow-x: clip;
}

/* ---- Section rhythm (§5: 72–96px desktop, 40–56px phone) ---- */
.nz-section {
  padding: 96px 0;
}

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

/* ---- The deep-blue band (§5) ----
   The selection block sits on the brand blue instead of another white or grey
   ground, so the page is not all light. Text turns white or the light blue the
   palette already reserves for deep-blue areas, and the green stays a short
   accent. A card that lands on the blue keeps its own white ground, so its
   reading pattern is the same as anywhere else on the page. Contrast: #B9C7E4
   on #1B3770 measures about 6.8:1 and white on #1B3770 about 11.5:1, so
   headings and body copy both pass AA. */
.nz-section--blue {
  background: var(--blue);
  color: var(--blue-soft);
}

.nz-section--blue h2,
.nz-section--blue h3 {
  color: var(--white);
}

.nz-section--blue p,
.nz-section--blue .section-heading__aside {
  color: var(--blue-soft);
}

/* The variants below describe whatever a blue band carries: a tab bar, its tags
   and any text link on the blue. The selection block uses none of them today. */

/* The tab bar's own rule has to stay visible on the blue. */
.nz-section--blue .nz-tablist {
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

.nz-section--blue .nz-tab {
  color: var(--blue-soft);
}

.nz-section--blue .nz-tab:hover,
.nz-section--blue .nz-tab[aria-selected="true"] {
  color: var(--white);
}

.nz-section--blue .nz-tab[aria-selected="true"]::after {
  background: var(--green);
}

/* The divider between the tabs is a grey hairline on white, so on the blue it
   has to come from the band's own light. */
.nz-section--blue .nz-tab + .nz-tab::before {
  background: var(--white);
  opacity: 0.4;
}

/* Tags become quiet translucent chips rather than white cards. */
.nz-section--blue .nz-tags li {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.nz-section--blue .text-link {
  color: var(--white);
}

/* The blue focus ring would disappear on a blue ground. */
.nz-section--blue .text-link:focus-visible,
.nz-section--blue .nz-tab:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* ---- The selection table on the blue band ----
   The table keeps its white card, the way the inquiry form does, so the two
   columns are read exactly as they are on any other ground; only the shadow
   lifts it off the blue, and the text inside keeps its own dark colour instead
   of inheriting the light one the band uses for running text. */
.nz-section--blue .nz-table-scroll {
  box-shadow: var(--shadow);
}

.nz-section--blue .nz-table td {
  color: var(--text);
}

@media (max-width: 900px) {
  .nz-section {
    padding: 68px 0;
  }
}

@media (max-width: 600px) {
  .nz-section {
    padding: 52px 0;
  }
}

/* The eyebrow labels a section head from its own line (§6.1). */
.nz-section-head > .eyebrow {
  margin-bottom: 16px;
}

/* The shared section head, tightened for the home page. */
.nz-home .section-heading {
  margin-bottom: 44px;
}

.nz-home .section-heading__copy h2 {
  margin-bottom: 0;
  max-width: 24ch;
}

@media (max-width: 940px) {
  .nz-home .section-heading {
    margin-bottom: 30px;
  }
}

/* ---- Hero: five columns of copy beside a seven-column panel (§5) ---- */
.nz-hero {
  padding: 58px 0 72px;
  background: var(--white);
}

/*
 * The text column is as tall as the panel beside it, and its last line is
 * anchored to that bottom edge, so the two columns end together instead of
 * leaving a hole under the copy (measured: 286px of empty column at 1600px
 * before this rule, and the principles now stand inside the column).
 */
.nz-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: stretch;
}

.nz-hero__copy {
  display: flex;
  flex-direction: column;
}

/* The panel keeps its own height: the image is never stretched or cropped to
   match the text, it is simply taller or shorter than the column. */
.nz-hero .nz-panel {
  align-self: start;
}

.nz-hero__title {
  max-width: 22ch;
  margin-bottom: 20px;
  text-wrap: balance;
}

.nz-hero__lead {
  max-width: 54ch;
  margin-bottom: 28px;
  color: var(--gray-text);
  font-size: 19px;
  line-height: 1.6;
}

.nz-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-bottom: 24px;
}

/* Between one column and the five/seven split the text needs more width: at
   six/six the heading holds fewer lines and the picture column grows taller, so
   the two columns still end close to each other. */
@media (min-width: 1025px) and (max-width: 1499px) {
  .nz-hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 48px;
  }
}

@media (max-width: 1024px) {
  .nz-hero {
    padding: 40px 0 48px;
  }
  .nz-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .nz-hero__lead {
    font-size: 18px;
  }
}

/* ---- The equipment panel of the hero: thin edge, blue top, caption ---- */
.nz-panel {
  margin: 0;
  border: 1px solid var(--gray-line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.nz-panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--gray-line);
  background: var(--gray-bg);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nz-panel__bar span:last-child {
  color: var(--gray-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

.nz-panel__media {
  background: var(--ph-bg);
}

.nz-panel__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border-top: 1px solid var(--gray-line);
}

.nz-panel__cap strong {
  display: block;
  color: var(--blue);
  font-size: 17px;
  font-weight: 600;
}

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

/* The round link of the panel: a clear target, no glow, no glow on hover. */
.nz-round {
  display: inline-flex;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  font-size: 17px;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.nz-round:hover,
.nz-round:focus-visible {
  border-color: var(--hover-green);
  background: var(--hover-green);
  color: var(--white);
}

/* ---- Three working principles under the hero ---- */
.nz-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

/* Stacked variant, used inside the hero's text column so the column carries
   three real statements instead of empty space under the buttons. */
.nz-principles--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 26px 0 24px;
}

.nz-principles--stack .nz-principle {
  padding-top: 12px;
  padding-bottom: 12px;
}

.nz-principles--stack .nz-principle__body strong {
  margin-bottom: 2px;
  font-size: 15px;
}

.nz-principles--stack .nz-principle__body p {
  font-size: 13.5px;
  line-height: 1.45;
}

.nz-principle {
  position: relative;
  display: flex;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-line);
}

/* The short green mark on the edge of a step (§6.4). */
.nz-principle::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 3px;
  content: "";
  background: var(--green);
}

/* Deep orange is kept for the few short numbers of this row only (§3.1). */
.nz-principle__num {
  flex: 0 0 auto;
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.nz-principle__body strong {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
}

.nz-principle__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 940px) {
  .nz-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 44px;
  }
}

@media (max-width: 560px) {
  .nz-principles {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* ---- Record cards: equipment, projects (§8 设备卡片) ---- */
.nz-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.nz-record-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: border-color 180ms ease, background-color 180ms ease;
}

/* Cards only change their edge or ground on hover, never float or scale (§8). */
.nz-record-card:hover,
.nz-record-card:focus-within {
  border-color: var(--blue);
}

.nz-record-card__media {
  position: relative;
  background: var(--ph-bg);
}

.nz-record-card__media img,
.nz-figure__media img,
.nz-media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The hero slot keeps the equipment ratio, 4:3 at 1200 × 900, so one supplied
   photograph serves both the banner and the equipment card. The concept and
   factory figures are wider: 3:2 at 1200 × 800. */
.nz-figure__media img {
  aspect-ratio: 3 / 2;
}

/* The equipment cards here show the same cut-out pictures as the archive cards,
   and the rule outranks the one above in this file: drawn whole, on white. */
img.nz-media__img--product {
  object-fit: contain;
  background: var(--white);
}

/* The size of a picture slot, printed on the picture as well as in its caption. */
.nz-record-card__slot {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 10px;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.nz-record-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 20px 22px 22px;
}

.nz-record-card__cat {
  margin: 0 0 8px;
  color: var(--gray-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nz-record-card__title {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.3;
}

.nz-record-card__title a {
  text-decoration: none;
}

.nz-record-card__title a:hover {
  color: var(--hover-green);
}

.nz-record-card__text {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
}

/* The one selection line a card may carry. */
.nz-record-card__spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: auto 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-line);
  font-size: 13.5px;
}

.nz-record-card__spec dt {
  color: var(--gray-text);
}

.nz-record-card__spec dd {
  margin: 0;
  color: var(--text);
}

.nz-record-card__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14.5px;
}

/* A card whose record does not exist yet: the container is shown, the record
   is named as pending, and nothing is invented to fill the space. */
.nz-record-card--slot {
  border-style: dashed;
  border-color: var(--ph-border);
  background: var(--gray-bg);
}

.nz-record-card--slot .nz-record-card__title {
  color: var(--gray-text);
  font-size: 18px;
}

@media (max-width: 1024px) {
  .nz-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nz-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* The equipment overview row reads four to a row, twice: the owner shows eight
   picked machines there and asked for 4 × 2 rather than the default three. It is
   a modifier on the row, not a change to .nz-cards, because the projects row
   below lists three records and has to stay three wide. Tablet and phone drop to
   two and one column like every other card row. */
.nz-cards--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .nz-cards--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nz-cards--four {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* ---- A note beside the link that closes a section ---- */
.nz-footnote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-line);
}

.nz-footnote p {
  max-width: 62ch;
  margin: 0;
  color: var(--gray-text);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- The labelled container of a module whose records are missing ---- */
.nz-slot--block {
  display: grid;
  gap: 10px;
  padding: 30px 28px;
  border: 1px dashed var(--ph-border);
  border-radius: var(--radius);
  background: var(--white);
}

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

.nz-slot__text {
  max-width: 70ch;
  margin: 0;
  color: var(--gray-text);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Applications: the intro beside a tab switcher (§8) ---- */
.nz-apps {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
}

.nz-apps__intro {
  max-width: 46ch;
}

.nz-apps__intro p {
  margin-bottom: 0;
}

/* The four customer types are one row of tabs, and their names are long: the
   tab list's own column gap is tighter than the section's so the fourth tab
   stays beside the third rather than dropping to a second line. A narrow window
   still wraps, since a tab pushed off the edge would be a tab nobody sees. */
.nz-tablist {
  --nz-tab-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--nz-tab-gap);
  margin-bottom: 26px;
  border-bottom: 1px solid var(--gray-line);
}

.nz-tab {
  position: relative;
  padding: 12px 0 14px;
  border: 0;
  background: none;
  color: var(--gray-text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: color 180ms ease;
}

/* The current tab is marked by weight and by a green line (§6.2), drawn in. */
.nz-tab::after {
  position: absolute;
  right: 100%;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--green);
  transition: right 180ms ease;
}

.nz-tab[aria-selected="true"] {
  color: var(--blue);
  font-weight: 600;
}

.nz-tab[aria-selected="true"]::after {
  right: 0;
}

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

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

/* Side by side, the four customer types read as one long line of text, so a
   hairline stands in the gap between them and each name is a separate choice.
   It is drawn only where the row really is one row: once the row wraps, the
   line break separates the names by itself, and a divider before the first name
   of the second line would be a stray mark in the gutter. */
@media (min-width: 1500px) {
  .nz-tab + .nz-tab::before {
    position: absolute;
    top: 50%;
    left: calc(var(--nz-tab-gap) / -2);
    width: 1px;
    height: 22px;
    content: "";
    transform: translateY(-50%);
    background: var(--gray-text);
    opacity: 0.45;
  }
}

.nz-tabpanel {
  max-width: 64ch;
}

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

.nz-tabpanel__title {
  margin-bottom: 10px;
  font-size: 22px;
}

.nz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
}

.nz-tags li {
  padding: 5px 12px;
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-text);
  font-size: 13px;
}

/* The rest of the records the open tab covers. The tab names one customer type
   and one record carries the panel; a type that several of the newest
   applications serve keeps the others here, under that record, instead of on a
   second tab that would carry a name the bar already shows. A rule above the
   group is what says it is not part of the record above it.

   The group is a fixed height, and nothing about the records can change that:
   two entries at most (the loop in home-sections.php), one line each. A title
   that does not fit ends in an ellipsis rather than wrapping, so a long name
   adds no line; the whole name stays in the markup for a screen reader, and the
   record itself is one click away through the tab's own link or the archive. */
.nz-tabpanel__also {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-line);
}

.nz-tabpanel__also .eyebrow {
  margin-bottom: 14px;
}

.nz-tabpanel__also ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-tabpanel__also li {
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* One line per entry: the link may not grow past the column, the title inside it
   is the part that gives way, and the arrow stays at the end of the line. */
.nz-tabpanel__also .text-link {
  max-width: 100%;
}

.nz-tabpanel__also .nz-arrow {
  flex: none;
}

.nz-tabpanel__also-title {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nz-apps__more {
  margin: 22px 0 0;
}

@media (max-width: 1024px) {
  .nz-apps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ---- Solutions: the system figure beside its explanation. The copy is
   centred against the figure: a 588px figure next to a 459px text block left
   129px of empty column when both started at the top. ---- */
.nz-solutions {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}

.nz-figure {
  margin: 0;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.nz-figure__media {
  background: var(--ph-bg);
}

.nz-figure__cap {
  padding: 14px 18px;
  border-top: 1px solid var(--gray-line);
}

.nz-figure__tag {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.nz-solutions__copy h3 {
  margin-bottom: 12px;
}

.nz-scope {
  display: grid;
  gap: 18px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.nz-scope li {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-line);
}

.nz-scope__num {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.nz-scope strong {
  display: block;
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
}

.nz-scope p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .nz-solutions {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* ---- One named example of how process functions are arranged ---- */
.nz-flow {
  margin-top: 56px;
  padding: 26px 28px 22px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
}

.nz-flow__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 22px;
}

.nz-flow__label strong {
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
}

.nz-flow__label small {
  color: var(--gray-text);
  font-size: 12.5px;
}

.nz-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 46px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-flow__item {
  position: relative;
  padding-top: 18px;
  border-top: 1px solid var(--gray-line);
}

/* A short green mark on the step edge, and an arrow between two steps. */
.nz-flow__item::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 3px;
  content: "";
  background: var(--green);
}

.nz-flow__item + .nz-flow__item::after {
  position: absolute;
  top: 12px;
  left: -32px;
  color: var(--gray-text);
  content: "\2192";
}

.nz-flow__name {
  display: block;
  color: var(--blue);
  font-size: 17px;
  font-weight: 600;
}

.nz-flow__item small {
  display: block;
  margin-top: 4px;
  color: var(--gray-text);
  font-size: 12.5px;
  line-height: 1.45;
}

.nz-flow__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--gray-line);
  color: var(--gray-text);
  font-size: 13.5px;
  line-height: 1.6;
}

@media (max-width: 940px) {
  .nz-flow {
    padding: 22px 20px 18px;
  }
  .nz-flow__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 44px;
  }
}

@media (max-width: 560px) {
  .nz-flow__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .nz-flow__item + .nz-flow__item::after {
    display: none;
  }
}

/* ---- Technical block: the introduction beside a scrollable table (§8).
   The short introduction is centred against the table: at 1440px it is 143px
   tall against 365px, so starting both at the top left a 222px hole.
   The table is static, so centring costs nothing when it is read. ---- */
.nz-technical {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: center;
}

.nz-technical__title {
  margin-bottom: 12px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.25;
}

.nz-technical__intro p {
  margin-bottom: 0;
  max-width: 44ch;
}

.nz-table-hint {
  display: none;
  margin: 0 0 10px;
  color: var(--gray-text);
  font-size: 13px;
}

.nz-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
}

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

.nz-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.nz-table th,
.nz-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--gray-line);
  text-align: left;
  vertical-align: top;
}

.nz-table thead th {
  background: var(--gray-bg);
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
}

/* The label column is a row header, not a heading of its own. */
.nz-table tbody th {
  width: 36%;
  color: var(--blue);
  font-weight: 600;
}

.nz-table tbody tr:nth-child(even) {
  background: #FAFBFC;
}

.nz-table tbody tr:last-child th,
.nz-table tbody tr:last-child td {
  border-bottom: 0;
}

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

@media (max-width: 1024px) {
  .nz-technical {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .nz-table-hint {
    display: block;
  }
}

/* ---- Manufacturing and project evidence ---- */
.nz-evidence {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

.nz-evidence__copy h2 {
  margin-bottom: 14px;
}

.nz-evidence__copy > p {
  max-width: 46ch;
}

.nz-check {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 18px 0 0 0;
  margin-top: 18px;
  border-top: 1px solid var(--gray-line);
}

.nz-check__mark {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 15px;
  line-height: 1.4;
}

.nz-check strong {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
}

.nz-check p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}

/* One condition that has to be read before it applies (§10): a short deep-orange
   rule on a grey ground, used exactly once on the page. */
.nz-note-plain {
  margin: 24px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--gray-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .nz-evidence {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* ---- The four steps of a project ---- */
.nz-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-step {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--gray-line);
}

.nz-step::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 3px;
  content: "";
  background: var(--green);
}

.nz-step__num {
  display: block;
  margin-bottom: 10px;
  color: var(--gray-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.nz-step__title {
  margin-bottom: 8px;
  font-size: 18px;
}

.nz-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .nz-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (max-width: 560px) {
  .nz-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}

/* ---- Resources and the short FAQ of the home page ---- */
/* Two equal columns - the suggested pages and the short FAQ - under a section
   head, like every other module of the page. The 4fr/8fr split with a 193px
   introduction beside a 633px body left a 440px hole. */
.nz-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}

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

.nz-resources__label {
  margin-bottom: 16px;
  color: var(--blue);
  font-size: 16px;
  letter-spacing: 0;
}

.nz-reslist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gray-line);
}

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

.nz-reslist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 14px;
  color: var(--text);
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.nz-reslist__link:hover,
.nz-reslist__link:focus-visible {
  background: var(--white);
  color: var(--blue);
}

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

.nz-reslist__body small {
  display: block;
  color: var(--gray-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nz-reslist__body strong {
  display: block;
  margin-top: 4px;
  color: var(--blue);
  font-size: 16.5px;
  font-weight: 600;
}

/* Both column headings read at the level of the list label, and the FAQ keeps
   the disclosures' own borders so the two columns line up row for row. */
.nz-resources .nz-faq {
  margin-top: 0;
}

.nz-resources .nz-faq__title {
  margin-bottom: 16px;
  color: var(--blue);
  font-size: 16px;
  letter-spacing: 0;
}

/* The disclosure markup and its indicator are shared (site.css §FAQ); the home
   page only sets how much room the column leaves around them. */
.nz-resources .nz-faq__question {
  padding: 16px 0;
}

@media (max-width: 1024px) {
  .nz-resources {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
}

/* ---- Closing inquiry block: five fields and a file, on a light ground so it
   never runs into the blue footer as one long slab ---- */
.nz-inquiry {
  padding: 76px 0 80px;
  border-top: 1px solid var(--gray-line);
  background: var(--white);
}

/* The copy column is centred against the form panel, so the air above and
   below it is equal. Top-aligned, the panel left a hollow area under the
   copy that read as unbalanced. */
.nz-inquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}

.nz-inquiry h2 {
  margin-bottom: 14px;
}

.nz-inquiry__lead {
  max-width: 44ch;
  color: var(--gray-text);
  font-size: 17px;
  line-height: 1.6;
}

.nz-next {
  margin: 26px 0 22px;
  padding: 18px 20px;
  border: 1px solid var(--gray-line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--gray-bg);
}

.nz-next h3 {
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 16px;
  letter-spacing: 0;
}

.nz-next ul {
  margin: 0;
  padding-left: 20px;
  color: var(--gray-text);
  font-size: 15px;
  line-height: 1.55;
}

.nz-next li {
  margin-bottom: 6px;
}

.nz-next li:last-child {
  margin-bottom: 0;
}

/* Contact details under the copy: address and mailbox come from the shared
   site-information record, so they read the same as the footer and the
   structured data. A value that is empty simply does not appear. */
.nz-inquiry__contact {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--gray-line);
}

.nz-inquiry__contact h3 {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 16px;
  letter-spacing: 0;
}

.nz-inquiry__contact-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.nz-inquiry__contact-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 3px 16px;
}

.nz-inquiry__contact-row dt {
  color: var(--gray-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nz-inquiry__contact-row dd {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

/* One plant per block, as stored in the shared record. */
.nz-inquiry__contact-row dd span {
  display: block;
}

.nz-inquiry__contact-row dd span + span {
  margin-top: 7px;
}

/* The mailbox is plain text, not a mailto link: nothing here is clickable, so
   it keeps the row's own colour and never offers a click it cannot honour. The
   one-click selection itself comes from the shared .nz-copyable rule. */
.nz-inquiry__contact-row dd .nz-inquiry__plain {
  color: var(--text);
}

@media (max-width: 560px) {
  .nz-inquiry__contact-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

.nz-inquiry__spares {
  margin: 0;
  color: var(--gray-text);
  font-size: 15px;
}

/* The short form: a white panel with a light grey head band. */
.nz-inquiry__form {
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.nz-inquiry__form-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-line);
  background: var(--gray-bg);
}

.nz-inquiry__form-title {
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 20px;
}

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

/* With no "how to fill this in" block above the fields, the first row opens the
   panel: the body keeps a little more air under the head band so the first label
   does not sit against it. */
.nz-inquiry__form-body {
  padding: 24px 24px 20px;
}

/* Compact rhythm for the short form only: two half rows, one message, one file.
   The quote page keeps the roomier spacing of page-form.css. */
.nz-inquiry__form-body .nz-form {
  margin-top: 0;
}

.nz-inquiry__form-body .nz-form__row {
  margin-bottom: 0;
}

.nz-inquiry__form-body .nz-form__field {
  margin-bottom: 12px;
}

.nz-inquiry__form-body .nz-form__field--wide {
  margin-bottom: 12px;
}

.nz-inquiry__form-body .nz-form__field textarea {
  min-height: 96px;
}

/* The attachment slot used to sit tighter here than on the quote page, so the
   panel did not tower over the copy column beside it. Without the "how to fill
   this in" block the panel is the shorter of the two, so the slot now shares the
   quote page's roomier padding and no longer needs an override. */

@media (max-width: 1024px) {
  .nz-inquiry {
    padding: 60px 0 64px;
  }
  .nz-inquiry__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

@media (max-width: 600px) {
  .nz-inquiry__form-head {
    padding: 16px 18px;
  }
  .nz-inquiry__form-body {
    padding: 18px 18px 16px;
  }
}

/* ---- The annotated picture slot (components/image-placeholder.php) ----
   The slot's base styles moved to assets/css/framework.css, where every
   template of the site can reach them; only the adjustments that belong to the
   home page's own cards, panels and figures stay here. */

/* A slot that sits inside a card or a panel keeps its own annotation row. */
.nz-panel__media .nz-ph__cap,
.nz-record-card__media .nz-ph__cap,
.nz-figure__media .nz-ph__cap {
  border-top: 0;
  background: transparent;
}