/* =============================================================
   theme-lean.css — "Industrie & Lean" ambiance.
   Loaded on /lean/ pages AFTER theme-clean.css (which carries the
   shared light-universe components: .clean-hero, .sector-grid,
   .feature-list, .clean-badge, .clean-hero-card …). This file
   only re-tints them for an industrial feel under [data-theme="lean"].
   ============================================================= */

[data-theme="lean"] .clean-hero {
  background:
    linear-gradient(180deg, #ffffff 0%, #eceef1 100%);
}
[data-theme="lean"] .clean-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(84,79,75,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84,79,75,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%);
}
/* When a hero background image is used, replace the industrial grid
   with the grey readability veil (same as clean). */
[data-theme="lean"] .clean-hero.has-hero-img::after {
  background: linear-gradient(90deg, rgba(243,244,246,0.985) 0%, rgba(243,244,246,0.96) 44%, rgba(234,236,239,0.82) 68%, rgba(223,226,230,0.55) 100%);
  background-size: auto;
  -webkit-mask: none; mask: none;
}
@media (max-width: 860px) {
  [data-theme="lean"] .clean-hero.has-hero-img::after { background: rgba(243,244,246,0.93); }
}
[data-theme="lean"] .clean-hero-inner { position: relative; z-index: 1; }

/* filled accent icon squares — a more "industrial / 5S" look */
[data-theme="lean"] .sector-icon { background: var(--accent); border-color: var(--accent); color: #fff; }

/* solution deep-dive rows reuse .cap-row from site.css; nothing to add */