/* ============================================================
   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 the factory photograph the record supplies. Colours and type come
   from tokens.css; the .eyebrow, .section-heading and .text-link 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);
}

/* White on navy, headings and copy alike: the soft blue the deep-blue bands
   carry elsewhere is too quiet at running-text size here, where the band is the
   page's one statement of who answers for the order, and the reader has to make
   out the sentence rather than the tint. The rules between the rows stay as they
   are — they are marks, not copy, and they keep the band from flattening into
   one white block. The green tick in each row is the band's one accent. */
.nz-ab-section--blue {
  background: var(--blue);
  color: var(--white);
}

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

/* site.css gives every paragraph the grey body colour, and a declaration on the
   element always beats the colour a section passes down, so the band's copy has
   to name its white where the headings do. */
.nz-ab-section--blue p {
  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;
}

/* ---- A section ground that carries one faint photograph (§5) ----
   How we work may be given a single picture of the materials the line runs on.
   It is a ground, not an image: a pseudo-element, so it never enters the reading
   order or the accessibility tree, and the section reads exactly the same
   without it. The whole picture is shown and centred — contain, not cover, so
   nothing is cropped away — and it is held lighter than the home page's
   applications band uses for the same job: 0.15 here against that band's 0.24,
   so it reads as a tint under the four principles rather than as a photograph
   behind the running text: the section stays white enough for --text to sit on,
   and the note keeps its own opaque ground wherever the picture is darkest. */
.nz-ab-section--veiled {
  position: relative;
  isolation: isolate;
}

/* Below the desktop breakpoint the section is one column of copy on a small
   screen, where a photograph laid under running text costs readability and
   bandwidth for no gain: the rule is not applied there, and a background-image
   that no rule names is never downloaded either. */
@media (min-width: 901px) {
  .nz-ab-section--veiled::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background-image: var(--nz-ab-ground);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.15;
    pointer-events: none;
  }
}

/* ---- Who we are: copy beside the factory photograph ---- */
.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;
}

/* The highlights under the lead paragraph: four one-line selling points, set
   tighter than the copy above them so the eye can take them in at once. The
   tick is the same green mark the responsibility band uses — a glyph, never a
   background for text. */
.nz-ab-points {
  max-width: 62ch;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.nz-ab-points__item {
  display: flex;
  gap: 12px;
  margin: 0 0 12px;
  line-height: 1.55;
}

.nz-ab-points__item:last-child {
  margin-bottom: 0;
}

.nz-ab-points__mark {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 15px;
}

.nz-ab-points + p {
  margin-top: 22px;
}

/* The photograph the owner uploads to the shared record: 4:3, so the column
   keeps one shape whatever ratio the supplied file has. A record without a
   photograph prints no media column at all. */
.nz-ab-photo {
  margin: 0;
  background: var(--ph-bg);
}

.nz-ab-photo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

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

/* With no factory photograph on the record the band is copy only: one column,
   no second track, no gap and no reserved height where the picture's column
   would have stood, so the copy takes the full width of the band. */
.nz-ab-intro--text {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ---- 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);
}

/* The tick is a mark, not copy, so it carries the brand green that tokens.css
   allows as a small accent — one glyph per row, tying the list to the green rule
   beside the band's eyebrow. (The green is never a background for text: white on
   it reaches only 2.8:1.) */
.nz-ab-band__mark {
  flex: 0 0 auto;
  color: var(--green);
  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;
}

/* The note under each title keeps a hair less than the title itself, so a row
   still reads title-then-detail now that the band carries white copy. */
.nz-ab-band__row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  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;
  }
}