/* ==========================================================================
   About us — page-specific styles (loaded AFTER style.css)
   ========================================================================== */

/* ---------- Environmental policy ----------
   Rendered as a 2-column parallax band (.split-band--left): photo on the right,
   the policy list on the left half. These styles lay the 6 points out as a
   vertical icon list within that half-width column. */
.environmental .eyebrow { margin-bottom: 26px; }
.env-grid { display: flex; flex-direction: column; gap: 20px; }
.env-item { display: flex; gap: 16px; align-items: flex-start; }
.env-ico {
  flex: 0 0 auto;
  color: var(--blue);
  line-height: 0;
  margin-top: 2px;
}
.env-ico svg { width: 24px; height: 24px; }
.env-item h4 { font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.env-item p { font-size: 14px; line-height: 1.4; margin: 0; }

/* ---------- How can we support you? ---------- */
/* space under "Our expertise in the retail sector:" before the cards */
.support-sub { margin-bottom: 25px; }

/* ==========================================================================
   Who we are — 2-column parallax (text left, building photo right)
   ========================================================================== */
.who-we-are .eyebrow { margin-bottom: 18px; }
.who-we-are .split-text p { font-size: 16px; line-height: 1.6; color: var(--body); }
/* push the HQ photo further to the right within its half-width window */
.who-we-are { background-position: right center; }
.about-lead { font-size: 20px !important; line-height: 1.45 !important; color: var(--ink) !important; }
/* (building photo now carries the Nu Mech fascia sign baked in — no CSS overlay needed) */

/* ==========================================================================
   Why Nu Mech (strengths grid + credentials)
   ========================================================================== */
.why-nm { background: var(--light); padding-block: 72px; }
.why-nm .eyebrow { margin-bottom: 32px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.why-card {
  background: var(--white);
  border: 1px solid #e4e9ef;
  padding: 30px 28px;
}
.why-ico { color: var(--blue); display: block; margin-bottom: 16px; }
.why-card h4 { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.why-card p { font-size: 15px; line-height: 1.55; color: var(--body); margin: 0; }

.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.cred {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid #d6e0ea;
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 25px;
}
.cred svg { flex: 0 0 auto; }

/* ==========================================================================
   FAQ (native <details> accordion)
   ========================================================================== */
.faq { background: var(--white); padding-block: 72px; }
.faq .eyebrow { margin-bottom: 24px; }
.faq-list { max-width: none; }
.faq-item { border-bottom: 1px solid #e4e9ef; }
.faq-item:first-child { border-top: 1px solid #e4e9ef; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 44px 22px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }   /* minus */
.faq-item summary:hover { color: var(--blue); }
.faq-a { padding: 0 44px 24px 0; }
.faq-a p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
  .about-lead { font-size: 19px !important; }
}