/* =============================================================================
   OnSiteSafety TrustID — Marketing Landing (Phase 3)
   Loads ONLY on the "trustid-home" page (inc/landing.php). Consumes the Field
   Document tokens/components from field-document.css; this file is layout only.
   Daylight first: paper is the default surface, carbon is used once (the gate).
   Borders over shadows; the single system shadow stays reserved for the card.
   All selectors are scoped under .oss-landing so nothing leaks to other pages.
   ========================================================================== */

/* ---- 0. Page shell: let our full-width sections reach the viewport edges ----
   The page is set to Kadence "Fullwidth + Unboxed" (post meta), so the content
   wrapper carries no max-width/box. We additionally neutralise any residual
   side padding so section backgrounds (carbon gate, final band) are edge-to-edge. */
.oss-landing .entry-content,
.oss-landing .entry-content-wrap,
.oss-landing .content-container,
.oss-landing .content-bg.entry-content-wrap {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.oss-landing .entry-content > * { margin-block: 0; }

/* ---- 1. Section rhythm + container -----------------------------------------
   Section rhythm 64px mobile -> 128px desktop (var(--space-section)). */
.oss-landing .oss-section {
  width: 100%;
  padding-block: var(--space-section);
  box-sizing: border-box;
}
.oss-landing .oss-container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

/* ---- 2. HERO (paper) -------------------------------------------------------- */
.oss-landing .oss-hero { padding-top: clamp(2.5rem, 6vw, 5rem); }
.oss-landing .oss-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.oss-landing .oss-hero__eyebrow { margin: 0 0 1rem; }
.oss-landing .oss-hero__title { margin: 0 0 1.1rem; }
.oss-landing .oss-hero__sub {
  margin: 0 0 1.75rem;
  color: var(--steel);
  max-width: 36ch;
}
.oss-landing .oss-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
}
.oss-landing .oss-hero__signin {
  font-weight: 600;
  color: var(--steel);
  background-image: linear-gradient(var(--brand), var(--brand));
}
.oss-landing .oss-hero__art {
  display: flex;
  justify-content: center;
}
.oss-landing .oss-hero__art .oss-trustid { width: 100%; }

/* ---- 3. TRUST STRIP (thin, mono, dotted separators) ------------------------ */
.oss-landing .oss-trust {
  padding-block: 1rem;
  background: var(--paper-sunk);
  border-block: 1px solid var(--hair-soft);
}
.oss-landing .oss-trust__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  color: var(--steel);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-align: center;
}
.oss-landing .oss-trust__sep { color: var(--hair); }

/* ---- 3b. FIELD PHOTO BAND (real brand photography, edge-to-edge) ----------- */
.oss-landing .oss-fieldband { padding-block: 0; }
.oss-landing .oss-fieldband__media { position: relative; }
.oss-landing .oss-fieldband__img {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 380px);
  object-fit: cover;
  object-position: center 32%;
  filter: saturate(1.02) contrast(1.02);
}
.oss-landing .oss-fieldband__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0.7rem clamp(1.25rem, 4vw, 2.5rem);
  color: var(--paper);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  background: linear-gradient(0deg, rgba(31, 41, 51, 0.74), rgba(31, 41, 51, 0));
}

/* ---- 4. HOW IT WORKS (numbered = a real sequence, not decoration) ---------- */
.oss-landing .oss-steps__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.oss-landing .oss-steps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  counter-reset: none;
}
.oss-landing .oss-step { margin: 0; }
.oss-landing .oss-step__num {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  color: var(--ink);
  font-size: 1rem;
  background: var(--paper);
}
.oss-landing .oss-step__title { margin: 0 0 0.45rem; }
.oss-landing .oss-step__body { margin: 0; color: var(--steel); }

/* ---- 5. WHO IT'S FOR (two columns) ----------------------------------------- */
.oss-landing .oss-audience__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
.oss-landing .oss-audience__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.oss-landing .oss-audience__photo {
  display: block;
  width: 100%;
  height: clamp(150px, 22vw, 200px);
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-card);
  margin: 0 0 0.25rem;
}
.oss-landing .oss-audience__col .oss-label { margin: 0; }
.oss-landing .oss-audience__body { margin: 0; }
.oss-landing .oss-audience__link {
  margin-top: auto;
  font-weight: 700;
  color: var(--brand-text);
}

/* ---- 6. ISSUER-AGNOSTIC ----------------------------------------------------- */
.oss-landing .oss-issuer__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.oss-landing .oss-issuer__copy h2 { margin: 0 0 0.9rem; }
.oss-landing .oss-issuer__body { margin: 0; color: var(--steel); max-width: 46ch; }
.oss-landing .oss-issuer__stack { display: grid; gap: 0.6rem; }
.oss-landing .oss-cred {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper-sunk);
  border: 1px solid var(--hair-soft);
  border-radius: var(--radius-card);
}
.oss-landing .oss-cred__main { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.oss-landing .oss-cred__name { font-weight: 600; color: var(--ink); }
/* Safety-credential icons: monochrome ink glyphs via CSS mask (matches staging;
   decorative, so masked rather than <img> — no broken-image fallback, aria-hidden). */
.oss-landing .oss-cred__ic {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  background: var(--ink);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.oss-landing .oss-cred__ic--helmet   { -webkit-mask-image: url(../img/icons/helmet.svg);        mask-image: url(../img/icons/helmet.svg); }
.oss-landing .oss-cred__ic--caution  { -webkit-mask-image: url(../img/icons/caution-sign.svg);  mask-image: url(../img/icons/caution-sign.svg); }
.oss-landing .oss-cred__ic--firstaid { -webkit-mask-image: url(../img/icons/defibrillator.svg); mask-image: url(../img/icons/defibrillator.svg); }
.oss-landing .oss-cred__ic--confined { -webkit-mask-image: url(../img/icons/gas-mask.svg);       mask-image: url(../img/icons/gas-mask.svg); }

/* ---- 7. THE GATE (carbon inversion — the one deliberate dark moment) -------- */
.oss-landing .oss-gate { color: var(--paper); }
.oss-landing .oss-gate__inner { max-width: 760px; }
.oss-landing .oss-gate__eyebrow { margin: 0 0 0.9rem; color: var(--brand); }
.oss-landing .oss-gate h2 { margin: 0 0 1rem; }
.oss-landing .oss-gate__body {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

/* ---- 8. TRAINING (small promo) --------------------------------------------- */
.oss-landing .oss-training {
  padding-block: clamp(2rem, 4vw, 3rem);
  background: var(--paper-sunk);
  border-top: 1px solid var(--hair-soft);
}
.oss-landing .oss-training__inner { text-align: center; }
.oss-landing .oss-training__body { margin: 0; color: var(--steel); }

/* ---- 9. FINAL CTA (subtle brand band) -------------------------------------- */
.oss-landing .oss-final {
  background:
    linear-gradient(0deg, rgba(255, 162, 18, 0.06), rgba(255, 162, 18, 0.06)),
    var(--paper);
  border-top: 2px solid var(--brand);
}
.oss-landing .oss-final__inner { text-align: center; }
.oss-landing .oss-final__title { margin: 0 0 1.5rem; }
.oss-landing .oss-final__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  justify-content: center;
}

/* ---- 10. Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .oss-landing .oss-hero__grid { grid-template-columns: 1fr; }
  .oss-landing .oss-hero__sub { max-width: 52ch; }
  .oss-landing .oss-hero__art { justify-content: flex-start; }
  .oss-landing .oss-issuer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .oss-landing .oss-steps__grid { grid-template-columns: 1fr; }
  .oss-landing .oss-audience__grid { grid-template-columns: 1fr; }
}