/* =============================================================
   theme-clean.css — "High-Purity / Clean" ambiance.
   Loaded only on /clean/ pages (after eripm.css + site.css).
   Clean-room feel: white, airy, generous whitespace, the brand
   red-orange accent kept. Clean-specific components below are
   only used on clean pages; a few shared overrides are scoped
   to [data-theme="clean"].
   ============================================================= */

/* a touch more air on clean sections */
[data-theme="clean"] section.sec { padding: 132px 0; }
[data-theme="clean"] .sec-lead { color: var(--fg-1); }

/* ---- Clean hero (light, not the dark image hero) ---- */
.clean-hero {
  position: relative;
  background:
    radial-gradient(1100px 420px at 78% -8%, var(--accent-soft) 0%, rgba(252,231,221,0) 60%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-3) 100%);
  border-bottom: 1px solid var(--border-1);
  overflow: hidden;
}
/* Optional hero background image with a white/grey gradient veil.
   Add class "has-hero-img" + inline --hero-img:url(...) on .clean-hero. */
.clean-hero.has-hero-img::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center right;
}
.clean-hero.has-hero-img::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  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%);
}
@media (max-width: 860px) {
  .clean-hero.has-hero-img::after { background: rgba(243,244,246,0.93); }
}
.clean-hero-inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  padding: 104px 32px 88px;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center;
}
.clean-hero h1 {
  font: 68px/1.04 var(--font-display);
  letter-spacing: -0.015em; font-weight: 500;
  color: var(--fg-strong); margin: 0 0 22px; max-width: 16ch;
}
.clean-hero h1 em { color: var(--accent); font-style: italic; }
.clean-hero-lead { font: var(--t-lead); color: var(--fg-1); max-width: 54ch; margin: 0 0 32px; }
.clean-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--accent); margin-bottom: 22px;
}
.clean-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--accent); }

/* promise pills */
.clean-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 36px; }
.clean-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border-1);
  border-radius: var(--radius-pill); padding: 10px 16px;
  font: var(--t-small); font-weight: 600; color: var(--fg-strong);
  box-shadow: var(--shadow-1);
}
.clean-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* hero side card — purity facts */
.clean-hero-card {
  background: #fff; border: 1px solid var(--border-1);
  border-radius: var(--radius-3); padding: 28px; box-shadow: var(--shadow-3);
}
.clean-hero-card h4 {
  font: 12px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 18px;
}
.clean-fact { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-1); }
.clean-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.clean-fact-num { font: 30px/1 var(--font-display); color: var(--fg-strong); font-weight: 500; min-width: 92px; }
.clean-fact-num span { font-size: 16px; color: var(--accent); }
.clean-fact-label { font: var(--t-small); color: var(--fg-2); }

/* compact sub-page header (no side card) */
.clean-hero.compact .clean-hero-inner { grid-template-columns: 1fr; padding: 84px 32px 64px; gap: 0; }
.clean-hero.compact h1 { font-size: 52px; }
.clean-hero.compact .clean-hero-lead { margin-bottom: 0; max-width: 64ch; }

@media (max-width: 980px) {
  .clean-hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 72px 24px 56px; }
  .clean-hero h1 { font-size: 44px; }
  .clean-hero.compact h1 { font-size: 40px; }
}
@media (max-width: 720px) {
  .clean-hero h1 { font-size: 34px; }
  .clean-hero-inner { padding: 56px 20px 44px; }
}

/* ---- Sector map ---- */
.sector-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border-1); border: 1px solid var(--border-1);
  margin-top: 56px;
}
.sector-cell {
  background: #fff; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px;
  min-height: 180px; text-decoration: none; color: inherit;
  transition: background var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.sector-cell:hover { background: var(--bg-3); transform: translateY(-3px); }
.sector-icon {
  width: 46px; height: 46px; border: 1.5px solid var(--accent); color: var(--accent);
  border-radius: var(--radius-2); display: inline-flex; align-items: center; justify-content: center;
}
.sector-cell h4 { font: var(--t-h4); font-weight: 700; color: var(--fg-strong); margin: 0; }
.sector-cell p { font: var(--t-small); color: var(--fg-2); margin: 0; }
@media (max-width: 860px) { .sector-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sector-grid { grid-template-columns: 1fr; } }

/* ---- Feature list (expertise / why-plastic) ---- */
.feature-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.feature-list li { position: relative; padding-left: 30px; font: var(--t-body); color: var(--fg-1); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px;
  background: var(--accent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}
@media (max-width: 720px) { .feature-list { grid-template-columns: 1fr; } }

/* traceability checkbox rows (clean contact) */
.field .check {
  display: flex; align-items: center; gap: 10px;
  font: var(--t-body); color: var(--fg-strong); text-transform: none; letter-spacing: 0;
  font-weight: 400; margin: 2px 0; cursor: pointer;
}
.field .check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.field input[type="file"] { padding: 10px; background: var(--bg-3); cursor: pointer; }

/* trust strip (certs) */
.trust-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.trust-tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-1); border-radius: var(--radius-2);
  padding: 8px 14px; font: var(--t-small); font-weight: 600; color: var(--fg-strong); background: #fff;
}
.trust-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }