/* =============================================================
   Section: Safety
   Maps to: template-parts/sections/section-safety.php
   ============================================================= */

.safety {
  background: var(--earth-deep, #2C1F18);
  color: var(--bone);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed photo background. Heavy dark+earth gradient overlay so
   the editorial type still wins. Same lane as the hero / workforce. */
.safety__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.safety__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(0.55) contrast(1.05) brightness(0.55);
}

.safety::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(11,11,12,0.78) 0%,
      rgba(44,31,24,0.82) 55%,
      rgba(11,11,12,0.92) 100%);
}

.safety::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../../img/textures/dirt-grit.svg");
  background-size: 480px 480px;
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Decorative semi-circle anchored bottom-right */
.safety__deco {
  position: absolute;
  right: -22vw;
  bottom: -22vw;
  width: 60vw;
  height: 60vw;
  pointer-events: none;
  color: var(--safety);
  opacity: 0.18;
  z-index: 0;
}

.safety__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}

@media (min-width: 980px) {
  .safety__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-9);
    align-items: start;
  }
}

.safety__statement {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.2vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-top: var(--s-5);
}

.safety__statement .accent { color: var(--safety); }
.safety__statement .stroke {
  -webkit-text-stroke: 1.5px var(--bone);
  color: transparent;
}

.safety__quote {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 2px solid var(--safety);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--bone);
}

.safety__quote cite {
  display: block;
  margin-top: var(--s-3);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--safety);
}

/* ---- Right: credentials stack ---- */
.safety__credentials {
  display: grid;
  gap: var(--s-5);
  border-left: 4px solid var(--safety);
  padding-left: var(--s-5);
}

.safety-cred {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(244,241,234,0.14);
}

.safety-cred:last-child { border-bottom: 0; padding-bottom: 0; }

.safety-cred__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bone);
}

.safety-cred__num--stroke {
  -webkit-text-stroke: 1.5px var(--safety);
  color: transparent;
}

.safety-cred__copy h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--safety);
  margin-bottom: 4px;
}

.safety-cred__copy p {
  font-size: 0.95rem;
  color: rgba(244,241,234,0.78);
  line-height: 1.5;
}