/* Final alignment pass: predictable blocks at every approved breakpoint. */
.why .split { align-items: center; }
.why .why-copy { width: 52%; }
.why .why-aside { width: 42%; margin: 0; }
.why-aside > .eyebrow { margin: 0 0 16px; color: var(--gold); }
.why .competence-strip {
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.22);
  gap: 8px;
}
.why .competence-strip span { display: grid; justify-items: center; min-width: 0; gap: 8px; }
.why .competence-strip .icon { margin: 0; }
.why .competence-strip b { font: 700 11px/1.2 var(--sans); white-space: nowrap; }

/* Service sequence numbers and labels never share a line. */
.service-card .card-num, .service-card .label { display: block; }
.service-card .card-num { margin: 0 0 5px; }
.service-card .label { min-height: 10px; }

/* Process numbers, arrows and copy have independent grid areas. */
.steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 12px; padding-right: 34px; }
.steps li > .icon { grid-column: 1; grid-row: 1; float: none; margin: 0; }
.steps li > div { grid-column: 2; grid-row: 1; min-width: 0; }
.steps li .card-num { display: block; margin: 0 0 4px; }
.steps li h3, .steps li p { overflow-wrap: anywhere; }
.steps li:not(:last-child)::after { right: 7px; top: 22px; }

/* On the home page, service photos need space to read as separate scenes. */
.service-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  border: 0;
  background: transparent;
}
.service-card { grid-column: span 3; border: 1px solid var(--line); background: var(--paper); }
.service-card:last-child { border: 1px solid var(--line); }
.service-card:nth-child(n + 5) { grid-column: span 4; }
.service-card:hover { background: #f3eee5; }

/* Benefits have the same full-width rhythm, without a single continuous border. */
.benefits .cards { gap: 16px; }
.benefits .cards article { border: 1px solid var(--line); }

/* Industries are a landscape of expertise, not a long checklist. */
.industries .cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  border: 0;
  background: transparent;
}
.industries .cards article {
  min-height: 108px;
  display: flex;
  align-items: flex-end;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  background: var(--paper);
}
.industries .cards article h3 { margin: 0; font-size: 22px; }

/* Direct contact details remain visible next to the request form. */
.direct-contacts { margin: 30px 0 26px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.direct-contacts .eyebrow { margin: 0 0 14px; }
.direct-contacts p { margin: 12px 0; display: grid; gap: 3px; }
.direct-contacts strong { color: var(--gold); font: 700 11px/1 var(--sans); letter-spacing: .7px; text-transform: uppercase; }
.direct-contacts span { font: 20px/1.2 var(--serif); color: #fff; }
.direct-contacts small { display: block; margin-top: 16px; color: #c2d0d5; line-height: 1.45; }
.direct-contacts code { color: var(--gold); }

@media (max-width: 820px) {
  .why .split { display: block; }
  .why .why-copy, .why .why-aside { width: auto; }
  .why .why-aside { margin-top: 42px; }
  .why .competence-strip { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; }
  .why .competence-strip b { font-size: 9px; white-space: normal; }
  .steps li { grid-template-columns: 34px minmax(0,1fr); padding-right: 36px; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card, .service-card:nth-child(n + 5) { grid-column: auto; }
  .benefits .cards { gap: 12px; }
  .industries .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .industries .cards article { min-height: 88px; padding: 18px 15px; }
  .industries .cards article h3 { font-size: 18px; }
  .direct-contacts span { font-size: 18px; }
}