/* Home page: rules specific to index.html. Shared components live in ../styles.css. */

/* --- A credential value stays whole --------------------------------------
   A hyphen is a line-break opportunity in its own right, so once the column
   narrows - and browser text size narrows every column in font-relative terms -
   "Z21-869-00S" breaks after one of its own hyphens and reads as two numbers.
   The span holds the value on one line while the hero eyebrow and the
   credential strip still wrap normally around it. Measured at 390 and 480 wide
   at 100%, 150% and 200% text size: the licence line and the ABN each fit their
   column whole, so nothing is pushed past the strip's or the seplist's edge.
   (Same rule and same reasoning in compliance.css, which carries the strip too.) */
.nowrap {
  white-space: nowrap;
}

.intro__lead,
.why__lead {
  margin-top: var(--s-6);
}

/* The hero eyebrow is plain `.seplist` markup now: the middot is drawn in the
   column gap by the shared mechanism and clipped at the list edge, so no
   separator can open or close a wrapped line. Nothing page-specific is needed. */

.services__more {
  margin-top: var(--s-8);
  color: var(--ink-soft);
}

.process__more {
  margin-top: var(--s-8);
  color: var(--ink-soft);
}

.sectors {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.sectors__chips {
  align-self: center;
}

/* Trusted by: the wordmark row is a full-width band of uniform slots drawn by
   `ul.wordmarks` in styles.css. Do not set columns, sizing or spacing on the
   list from here; the space above it belongs to the eyebrow. */
.trust__head .eyebrow {
  margin-bottom: var(--s-5);
}

/* --- Testimonials -----------------------------------------------------------
   The one quote recovered from the old site, then two sample slots the client
   will replace with real quotes they supply. The genuine quote leads and is the
   widest card; the samples keep the card and its split rule but sit on the
   section ground behind a dashed hairline, with muted mono labels, so they read
   as scaffolding rather than as something a client said. */
.testimonials {
  margin-top: var(--s-10);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: stretch;
}

.testimonial--primary .testimonial__quote {
  max-width: 46ch;
  font-size: clamp(1.25rem, 1.5vw, 1.4375rem);
}

.testimonial--sample {
  background: none;
  border-style: dashed;
}

/* a slot is not a thing to point at, so it does not lift or sharpen on hover */
.testimonial--sample:hover {
  transform: none;
  border-color: var(--line);
}

.testimonial__slot {
  display: block;
  margin-bottom: var(--s-5);
  color: var(--ink-soft);
}

.testimonial__sample {
  color: var(--ink-soft);
  font-size: var(--text-small);
  line-height: 1.6;
}

.testimonial--sample .testimonial__cite {
  margin-top: var(--s-6);
}

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

  .testimonial--primary {
    grid-column: 1 / -1;
  }
}

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

/* --- 404 --------------------------------------------------------------------
   404.html is the one page with no stylesheet of its own, so it borrows this
   file for its single rule. Everything below is guarded by `.notfound` on that
   page's <main> and cannot reach the home page. The action row sits inside the
   navy hero, under the lead, and matches the hero and CTA-band buttons
   elsewhere: a wrapping row on desktop, full-width stacked buttons on a phone. */
.notfound .page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-8);
}

@media (max-width: 480px) {
  .notfound .page-hero__actions .btn {
    flex: 1 1 100%;
  }
}