/* ============================================================
   Contact and inquiry pages (page-contact.php / page-request-a-quote.php / page-thank-you.php)
   Design source: design3.5.md v1.2 (§5 表单控件 / §7 区块规范)
   ============================================================ */

/* ---- Layout ---- */
.nz-form-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.nz-form__hero {
  padding: clamp(64px, 10vw, 120px) 0 clamp(72px, 11vw, 132px);
  background: var(--white);
}

.nz-form__hero--center {
  display: grid;
  align-items: center;
  min-height: clamp(400px, 56vh, 680px);
}

.nz-form__inner {
  max-width: 680px;
  margin: 0 auto;
}

.nz-form__hero--center .nz-form__inner {
  text-align: center;
}

/* ---- Head ---- */
.nz-form__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nz-form__eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--green);
}

.nz-form__title {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.nz-form__lead {
  margin: 0 0 0;
  color: var(--gray-text);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
}

/* ---- Thank You / stored-request receipt ---- */
.nz-form__rule {
  display: block;
  width: 26px;
  height: 3px;
  margin: 18px auto 20px;
  border-radius: 2px;
  background: var(--green);
}

.nz-form__receipt {
  max-width: 760px;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--gray-line);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.nz-form__receipt h1,
.nz-form__receipt h2 {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
}

.nz-form__receipt p:not(.nz-form__eyebrow) {
  margin: 0 0 10px;
  color: var(--gray-text);
  line-height: 1.65;
}

.nz-form__receipt-note {
  max-width: 760px;
  margin-top: 24px;
}

/* ---- Thank-you page layout ---- */
.nz-thanks {
  padding: clamp(48px, 9vw, 110px) 0 clamp(64px, 10vw, 128px);
}

.nz-thanks__wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

.nz-thanks__card {
  max-width: 100%;
  margin: 0 auto;
}

.nz-form__receipt p.nz-thanks__response {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--gray-line);
}

.nz-thanks__response strong {
  color: var(--blue);
  font-weight: 600;
}

.nz-thanks__backrow {
  margin-top: clamp(32px, 5vw, 48px);
  text-align: center;
}

.nz-thanks__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-button);
  background: var(--white);
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-color), box-shadow var(--transition-color);
}

.nz-thanks__back:hover {
  border-color: var(--green);
  box-shadow: var(--shadow);
}

.nz-thanks__back-arrow {
  display: inline-block;
  transition: transform var(--transition-color);
}

.nz-thanks__back:hover .nz-thanks__back-arrow {
  transform: translateX(-4px);
}

/* ---- Form grid ---- */
.nz-form {
  margin-top: 38px;
}

.nz-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
  margin-bottom: 16px;
}

.nz-form__field {
  margin-bottom: 14px;
}

.nz-form__field--wide {
  margin-bottom: 20px;
}

.nz-form__field label {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 600;
}

.nz-form__field input,
.nz-form__field textarea {
  width: 100%;
  padding: 0 14px;
  height: 48px;
  font-family: var(--font);
  font-size: 15.5px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: 4px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.nz-form__field textarea {
  height: auto;
  min-height: 108px;
  padding-top: 12px;
  resize: vertical;
}

.nz-form__field input:focus,
.nz-form__field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(78, 173, 91, 0.18);
}

.nz-form__field input::placeholder,
.nz-form__field textarea::placeholder {
  color: var(--gray-text);
  opacity: 0.5;
}

/* 必填标记 */
.nz-form__required {
  color: #D44848;
  font-size: inherit;
  vertical-align: baseline;
}

/* 字段下的小字：服务端校验失败时由 PHP 直接打印，邮箱格式提示由
   assets/js/form-validate.js 在离开输入框后填入 */
.nz-form__error {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #D44848;
  line-height: 1.3;
}

/* 没有文字的错误行不占位：实时提示在 JS 填入之前一直是空的 */
.nz-form__error:empty,
.nz-form__error[hidden] {
  display: none;
}

.nz-form__field input[type="email"].nz-input--invalid {
  border-color: #D44848;
  box-shadow: 0 0 0 3px rgba(212, 72, 72, 0.15);
}

/* 附件上传区域 */
.nz-form__file-wrap {
  position: relative;
  border: 1px dashed var(--gray-line);
  background: var(--gray-bg);
  border-radius: 4px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 180ms ease, background-color 180ms ease;
  cursor: pointer;
}

.nz-form__file-wrap:hover,
.nz-form__file-wrap:focus-within {
  border-color: var(--green);
  background: #ffffff;
}

.nz-form__file-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(27, 55, 112, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}

.nz-form__file-wrap:hover .nz-form__file-icon {
  background: rgba(78, 173, 91, 0.15);
  color: var(--green);
}

.nz-form__file-info {
  flex: 1;
  min-width: 0;
}

.nz-form__file-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.nz-form__file-hint {
  display: block;
  font-size: 12.5px;
  color: var(--gray-text);
  margin-top: 2px;
}

.nz-form__file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ---- Action buttons ---- */
.nz-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 4px;
}

.nz-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 32px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  font-size: 16.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--white);
  background: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.nz-form__btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.nz-form__btn:disabled,
.nz-form__btn[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.72;
}

.nz-form__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: nz-form-spin 700ms linear infinite;
}

.nz-form.is-submitting .nz-form__spinner {
  display: inline-block;
}

.nz-form__status {
  flex: 1 1 220px;
  margin: 0;
  color: var(--gray-text);
  font-size: 13px;
}

.nz-form__note {
  flex: 1 0 100%;
}

@keyframes nz-form-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nz-form__spinner { animation-duration: 1.4s; }
}

.nz-form__btn--outline {
  background: transparent;
  color: var(--blue);
}

.nz-form__btn--outline:hover {
  background: var(--gray-bg);
  color: var(--blue);
  border-color: var(--blue);
}

/* ---- Mobile ---- */
@media (max-width: 650px) {
  .nz-form__row {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
  }
}
/* ============================================================
   Contact Page Enhancements (Contact Channels, Info Cards & Office Hours)
   ============================================================ */
.contact-layout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 54px;
  align-items: start;
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-card, 12px);
  padding: 26px 28px;
  box-shadow: 0 4px 18px rgba(27, 55, 112, 0.05);
}

.contact-card h3 {
  font-size: 19px;
  margin-bottom: 14px;
  color: var(--blue);
}

.contact-card p {
  font-size: 14.5px;
  color: var(--gray-text);
  line-height: 1.6;
  margin-bottom: 16px;
}

.contact-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-card li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text);
}

.contact-card li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--blue);
}

.contact-card a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-card a:hover {
  color: var(--green);
}

/* 邮箱行现在是纯文本（.nz-copyable）：保留原来的蓝色加粗，让它仍然一眼能找到，
   但去掉下划线——它已经不是可以点开的链接了，单击只负责选中整串地址。 */
.contact-card .nz-copyable {
  color: var(--blue);
  font-weight: 600;
}

.contact-banner {
  background: var(--yellow-pale);
  border: 1px solid rgba(230, 185, 60, 0.5);
  border-radius: var(--radius-card, 12px);
  padding: 20px 24px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.contact-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-banner__icon svg {
  width: 22px;
  height: 22px;
}

.contact-banner__content h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--blue);
}

.contact-banner__content p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
}

.contact-visual-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-card, 12px);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(27, 55, 112, 0.05);
}

.contact-visual-card img {
  width: 100%;
  aspect-ratio: 540 / 300;
  object-fit: cover;
  display: block;
}

.contact-visual-card__cap {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--gray-text);
  border-top: 1px solid var(--gray-line);
}

@media (max-width: 980px) {
  .contact-layout-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============================================================
   Request a quote — rejected submission, progressive sections and the aside.
   The form itself posts to admin-post.php; these rules only lay out the parts
   the shared form styles do not cover yet (steps, disclosures, a select, the
   error notice, and the two-column quote page).
   ============================================================ */

/* ---- A rejected submission ----
   Both inquiry forms print one summary above the fields and one message under
   the field that failed. The summary reads as a compact notice rather than a
   headline, and a field's message is lifted out of the flow into a band the row
   already leaves below the control, so a message that appears fills that band
   instead of pushing the rest of the form down: the gap between two rows is the
   same with and without a message. Two 11px lines at 1.25 fit inside the 30px
   band, so a message that wraps is still clear of the next row's label. */
.nz-form__summary {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid #E2B4A0;
  border-left: 4px solid #C05621;
  border-radius: var(--radius);
  background: #FDF4EF;
  color: var(--text);
}

.nz-form__summary p {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.nz-form__summary ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.45;
}

.nz-form--quote .nz-form__row,
.nz-form--short .nz-form__row {
  margin-bottom: 0;
  gap: 0 22px;
}

.nz-form--quote .nz-form__field,
.nz-form--short .nz-form__field {
  position: relative;
  margin-bottom: 30px;
}

.nz-form--quote .nz-form__field > .nz-form__error,
.nz-form--short .nz-form__field > .nz-form__error {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.25;
}

/* Only the last line is lifted out of the flow. After a rejected submission PHP
   has already printed its message and form-validate.js may print its own after
   it, so the earlier line stays in the flow and the later one is laid out under
   it rather than on top of it. */
.nz-form--quote .nz-form__field > .nz-form__error:not(:last-of-type),
.nz-form--short .nz-form__field > .nz-form__error:not(:last-of-type) {
  position: static;
}

.nz-form__step {
  margin: 0;
  padding: 0;
  border: 0;
}

.nz-form__legend {
  padding: 0;
  color: var(--blue);
  font-size: 17px;
  font-weight: 600;
}

.nz-form__step-note {
  margin: 6px 0 18px;
  color: var(--gray-text);
  font-size: 13.5px;
}

/* A group label the sighted reader does not need: the card that holds the form
   already names it, so the legend is kept for assistive technology alone. */
.nz-form__legend--visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nz-form__more {
  margin-top: 8px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
}

.nz-form__more-summary {
  padding: 14px 18px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.nz-form__more-summary::-webkit-details-marker {
  display: none;
}

.nz-form__more-summary::after {
  float: right;
  content: "+";
  font-weight: 600;
}

.nz-form__more[open] > .nz-form__more-summary::after {
  content: "–";
}

.nz-form__more-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--gray-line);
}

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

.nz-form__context {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--green);
  background: var(--gray-bg);
  color: var(--text);
  font-size: 14px;
}

.nz-form__hint,
.nz-form__note {
  margin: 6px 0 0;
  color: var(--gray-text);
  font-size: 12.5px;
  line-height: 1.5;
}

.nz-form__note a {
  color: var(--blue);
}

.nz-form__field select {
  width: 100%;
  min-height: var(--button-height);
  padding: 0 12px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font: inherit;
}

.nz-form__field select:focus {
  border-color: var(--blue);
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.nz-form__field--error input,
.nz-form__field--error textarea,
.nz-form__field--error select {
  border-color: #C05621;
}

.nz-form__hp {
  position: absolute;
  left: -9999px;
}

/* ---- Quote page: form beside its explanation ---- */
.quote-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}

.quote-form-card {
  padding: 28px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.quote-card-commitment {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--tint);
  color: var(--blue-deep);
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 500;
}

.quote-aside__steps {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--gray-text);
  font-size: 14px;
}

.quote-aside__steps li {
  margin-bottom: 8px;
}

.quote-aside .contact-card + .contact-card,
.quote-aside .nz-terms {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .quote-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Contact page — section layout
   Follows the landing-page reference: alternating white / light-grey
   sections, eyebrow + section headings and bordered cards. The form
   itself keeps the .nz-form styles above; these classes only place
   the sections, the channel card and the plant blocks.
   ============================================================ */

.nz-ct {
  /* Nothing on this page may widen the viewport. */
  overflow-x: clip;
}

.nz-ct-section {
  padding: 88px 0;
}

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

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

/* Optional WordPress editor body, printed above the sections. */
.nz-ct-extra {
  max-width: 78ch;
}

.nz-ct-extra > *:last-child {
  margin-bottom: 0;
}

/* ---- Send a message: one split card in the old site's manner ----
   The section is a single rounded card: the brand-blue info panel (title,
   channels, what happens next) sits beside the white form, so blue and white
   carry the contrast. The two halves are an even split — the blue panel and
   the white form each take half the card. Green stays a small accent per
   DESIGN.md: the eyebrow bar, the quote-link arrow, the next-steps markers, the
   focus rings. */
.nz-ct-msgcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.nz-ct-msginfo {
  display: flex;
  flex-direction: column;
  background: var(--blue);
  color: var(--white);
  padding: 46px 44px 42px;
}

.nz-ct-msginfo__head {
  margin-bottom: 30px;
}

.nz-ct-msginfo h2 {
  margin: 0 0 18px;
  color: var(--white);
  font-size: clamp(26px, 2.4vw, 33px);
  line-height: 1.16;
}

.nz-ct-msginfo p {
  color: var(--blue-soft);
  font-size: 15.5px;
  line-height: 1.65;
}

.nz-ct-msginfo p + p {
  margin-top: 12px;
}

.nz-ct-msginfo__lead {
  max-width: 46ch;
}

/* The way to the quotation form: an outlined white button; the green arrow is
   the accent, and on hover the button fills white with brand-blue text. */
.nz-ct-quote-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-button);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.nz-ct-quote-link .nz-arrow {
  color: var(--green);
}

.nz-ct-quote-link:hover,
.nz-ct-quote-link:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue);
}

.nz-ct-quote-link:hover .nz-arrow,
.nz-ct-quote-link:focus-visible .nz-arrow {
  color: var(--hover-green);
}

/* ---- The panel's lower half: channels beside what happens next ----
   The panel's width is split in two so its right half carries content instead
   of standing empty, and a hairline down the gutter turns the two lists into
   two labelled groups rather than one loose column. A vertical rule is the only
   structure either group gets: no second card, because a framed, tinted box
   inside the blue panel read as a widget pasted onto it. */
.nz-ct-foot {
  display: grid;
  /* The channels hold short values, the sentences need the room. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0;
  align-items: start;
  /* The heading block above already carries the 30px that puts the rule where
     it sat before, so the space above it is not doubled. */
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.nz-ct-foot > * {
  padding-top: 26px;
}

.nz-ct-channels {
  margin: 0;
  padding-right: 34px;
}

.nz-ct-next {
  padding-left: 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/* Both groups are peers: one heading size, one text size, the same top edge. */
.nz-ct-channels h3,
.nz-ct-next h3 {
  margin-bottom: 14px;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
}

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

.nz-ct-channel-list > div {
  display: grid;
  gap: 2px;
}

.nz-ct-channel-list dt {
  color: var(--blue-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nz-ct-channel-list dd {
  margin: 0;
  color: var(--white);
  font-size: 15px;
}

.nz-ct-channel-list dd a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nz-ct-channel-list dd a:hover {
  color: var(--blue-soft);
}

/* 邮箱与 WhatsApp 是可复制的纯文本：白色加粗，单击选中整串。 */
.nz-ct-channel-list .nz-copyable {
  color: var(--white);
  font-weight: 600;
}

/* What happens next: the same three lines the home-page inquiry card shows,
   carried in the panel's own terms. On blue the sentences take the same white
   as the channel values beside them, and each line is marked by the site green
   — the one accent the panel already uses for its eyebrow bar and its quote
   link, so the marker reads as part of the same system. */
.nz-ct-next ul {
  margin: 0;
  padding-left: 18px;
  color: var(--white);
  font-size: 15px;
  line-height: 1.55;
  list-style: none;
}

.nz-ct-next li {
  position: relative;
  margin-bottom: 8px;
}

/* Drawn rather than left to the browser, so the disc can carry the green while
   it sits exactly where the stock marker sat. */
.nz-ct-next li::before {
  position: absolute;
  top: 0.6em;
  left: -11px;
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: var(--green);
}

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

/* The white side of the card: the form card loses its own frame, the panel
   carries it, and a short green bar ties the form title to the accents. */
.nz-ct-msgform {
  background: var(--white);
  padding: 46px 44px 42px;
}

.nz-ct-msgform .contact-card {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.nz-ct-msgform .contact-card h3::after {
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 10px;
  content: "";
  background: var(--green);
}

/* Error lines inside this card. `.contact-card p` beats the shared
   .nz-form__error on specificity, which is how the e-mail message came out in
   the body grey and larger than the label above it. The line is also lifted out
   of the flow and set into the space the field already leaves below it, so a
   message occupies that space instead of adding to it: the blank gap between
   two rows is the same with and without an error. Two lines of 11.5px inside
   the 30px band below a field, so the widest message still fits. */
.nz-ct-msgform .nz-form__field {
  position: relative;
}

.nz-ct-msgform .nz-form__field > .nz-form__error {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin: 2px 0 0;
  color: #D44848;
  font-size: 11.5px;
  line-height: 1.2;
}

/* Only the last line is lifted out. After a rejected submission PHP has already
   printed its message and form-validate.js may print its own after it, so the
   earlier line stays in the flow and the later one is laid out under it rather
   than on top of it. */
.nz-ct-msgform .nz-form__field > .nz-form__error:not(:last-of-type) {
  position: static;
}

/* The two-column rows keep their spacing under each field from now on: the band
   the error line is set into is the same 30px the row used to add (14 below the
   field + 16 below the row), and 0 + 30px in the stacked single-column layout,
   so the visible rhythm of the form does not change. */
.nz-ct-msgform .nz-form__row {
  margin-bottom: 0;
  gap: 0 22px;
}

.nz-ct-msgform .nz-form__row > .nz-form__field {
  margin-bottom: 30px;
}

/* ---- Book opening: the card is a two-page spread, so it opens like one ----
   The blue page turns on the spine at its right edge and the white page on the
   spine at its left edge. Both start folded back over the gutter and settle
   flat: the foreshortening, the perspective on the card and the two gradients
   along the gutter are the whole effect. Each page carries its own outer
   corner rounding and clip in place of the card's, so a turning page is never
   cut off mid-motion; at rest the spread is the same flat card as before.
   Only while <html> has .nz-motion, so with JS off or reduced motion the two
   pages stay flat and nothing is hidden. Below 1025px the same card stacks:
   no two pages, no turn. */
@media (min-width: 1025px) {
  .nz-ct-msgcard {
    overflow: visible;
    perspective: 2800px;
    perspective-origin: 50% 42%;
  }

  .nz-ct-msginfo,
  .nz-ct-msgform {
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
  }

  .nz-ct-msginfo {
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    transform-origin: 100% 50%;
  }

  .nz-ct-msgform {
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    transform-origin: 0 50%;
  }

  /* The gutter shade: the fold darkens the page while it is still lifted and
     fades as the page flattens, which is what makes the turn read as paper. */
  html.nz-motion .nz-ct-msgcard > .nz-ct-msginfo::after,
  html.nz-motion .nz-ct-msgcard > .nz-ct-msgform::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    transition: opacity 780ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--nz-delay, 0ms);
  }

  html.nz-motion .nz-ct-msgcard > .nz-ct-msginfo::after {
    background: linear-gradient(to left, rgba(5, 18, 44, 0.44), rgba(5, 18, 44, 0) 62%);
  }

  html.nz-motion .nz-ct-msgcard > .nz-ct-msgform::after {
    background: linear-gradient(to right, rgba(5, 18, 44, 0.22), rgba(5, 18, 44, 0) 62%);
  }

  html.nz-motion .nz-ct-msgcard > .nz-ct-msginfo[data-nz-reveal="book"].is-in::after,
  html.nz-motion .nz-ct-msgcard > .nz-ct-msgform[data-nz-reveal="book"].is-in::after {
    opacity: 0;
  }

  /* The turn: slower and softer than the site's 540ms reveal, so the pages
     settle like paper instead of snapping. The white page follows the blue one
     by the group's own stagger (--nz-delay). */
  html.nz-motion .nz-ct-msgcard > .nz-ct-msginfo[data-nz-reveal="book"],
  html.nz-motion .nz-ct-msgcard > .nz-ct-msgform[data-nz-reveal="book"] {
    transition:
      opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--nz-delay, 0ms),
      transform 920ms cubic-bezier(0.28, 0.66, 0.2, 1) var(--nz-delay, 0ms);
  }

  html.nz-motion .nz-ct-msgcard > .nz-ct-msginfo[data-nz-reveal="book"]:not(.is-in) {
    transform: rotateY(46deg);
  }

  html.nz-motion .nz-ct-msgcard > .nz-ct-msgform[data-nz-reveal="book"]:not(.is-in) {
    transform: rotateY(-46deg);
  }
}

/* On a phone the card stacks: title and lead first, then the form, and the
   contact details follow below it. display:contents lets the panel's children
   order around the form; each carries its own surface. */
@media (max-width: 1024px) {
  .nz-ct-msgcard {
    display: flex;
    flex-direction: column;
  }

  .nz-ct-msginfo {
    display: contents;
  }

  .nz-ct-msginfo__head {
    order: 1;
    margin-bottom: 0;
    padding: 34px 26px 30px;
    background: var(--blue);
  }

  .nz-ct-msgform {
    order: 2;
    padding: 34px 26px 36px;
  }

  /* Stacked, the two groups follow the form and sit on white: one column, the
     vertical rule becomes a horizontal one between the groups, and the rules
     turn to the page grey. */
  .nz-ct-foot {
    order: 3;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 26px;
    padding: 26px 0 34px;
    border-top: 1px solid var(--gray-line);
  }

  .nz-ct-foot > * {
    padding-top: 0;
  }

  .nz-ct-channels {
    padding-right: 0;
  }

  .nz-ct-next {
    margin-top: 24px;
    padding: 24px 0 0;
    border-top: 1px solid var(--gray-line);
    border-left: 0;
  }

  .nz-ct-channels h3,
  .nz-ct-next h3 {
    color: var(--blue);
  }

  .nz-ct-channel-list dt {
    color: var(--gray-text);
  }

  .nz-ct-channel-list dd,
  .nz-ct-channel-list dd a,
  .nz-ct-channel-list .nz-copyable {
    color: var(--blue);
  }

  /* Stacked on white the sentences cannot stay white; the green markers keep. */
  .nz-ct-next ul {
    color: var(--gray-text);
  }
}

@media (max-width: 760px) {
  .nz-ct-msginfo__head {
    padding: 30px 20px 26px;
  }

  .nz-ct-msgform {
    padding: 30px 20px 32px;
  }

  .nz-ct-foot {
    margin: 0 20px;
  }
}

/* The legal entity name above the plants. */
.nz-ct-company {
  margin: 0 0 24px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 600;
}

/* ---- Where we are: the plants of the legal entity ---- */
.nz-ct-plants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.nz-ct-plant strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nz-ct-plant p {
  max-width: 46ch;
  margin: 0;
  line-height: 1.65;
}

/* Map link and the public channels under the plants. */
.nz-ct-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  align-items: center;
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--gray-line);
}