/* ============================================================
   About page — section layout
   Follows the landing-page reference (nicety-landing-mockup.html):
   alternating white / light-grey sections, eyebrow + section
   headings, numbered working principles, a deep-blue responsibility
   band and labelled picture slots. Colours and type come from
   tokens.css; the .eyebrow, .section-heading, .text-link and .nz-ph
   patterns it reuses are global (site.css / framework.css).
   ============================================================ */

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

/* ---- Section rhythm (§5 of DESIGN.md) ---- */
.nz-ab-section {
  padding: 88px 0;
}

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

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

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

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

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

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

/* ---- Who we are: copy beside the factory picture slot ---- */
.nz-ab-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

.nz-ab-intro__copy h2 {
  margin-bottom: 18px;
}

.nz-ab-intro__copy p {
  max-width: 62ch;
}

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

/* ---- What we make: the range as a two-column bordered list ---- */
.nz-ab-range {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

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

.nz-ab-range__item p {
  margin: 0;
  color: var(--gray-text);
  font-size: 14.5px;
  line-height: 1.6;
}

/* The note that closes the range: bought-out parts and where the
   responsibility for the complete machine sits. */
.nz-ab-range-note {
  max-width: 78ch;
  margin: 32px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--gray-line);
  color: var(--gray-text);
  font-size: 15px;
  line-height: 1.65;
}

.nz-ab-range-note p {
  margin: 0 0 10px;
}

.nz-ab-range-note p:last-child {
  margin-bottom: 0;
}

/* ---- How we work: the four working principles ---- */
.nz-ab-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

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

.nz-ab-principle h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

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

/* One condition that must be read before it applies (§10 of DESIGN.md):
   the page's single deep-orange rule. */
.nz-ab-note {
  max-width: 78ch;
  margin: 36px 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-ab-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

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

/* ---- Responsibility band on the brand blue ---- */
.nz-ab-band {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

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

.nz-ab-band__copy p {
  max-width: 52ch;
}

.nz-ab-band__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-ab-band__row {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(185, 199, 228, 0.35);
}

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

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

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

.nz-ab-band .text-link {
  color: var(--white);
}

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

/* ---- Where our experience comes from ---- */
.nz-ab-exp {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

.nz-ab-exp__copy h2 {
  margin-bottom: 18px;
}

.nz-ab-exp__copy p {
  max-width: 62ch;
}

.nz-ab-exp__links h3 {
  margin-bottom: 16px;
  font-size: 18px;
}

.nz-ab-exp__link {
  display: flex;
}

.nz-ab-exp__link + .nz-ab-exp__link {
  margin-top: 14px;
}

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