/* Decorative catalog surfaces; shared geometry, two application themes. */
body[data-catalog-theme] {
  --catalog-paper: #f4f6ef;
  --catalog-header: #edf2e3;
  --catalog-art: url('catalog-fields.svg');
  background: var(--catalog-paper);
}
body[data-catalog-theme="formulations"] {
  --catalog-paper: #f1f5f2;
  --catalog-header: #e9f0eb;
  --catalog-art: url('catalog-dispersion.svg');
}
body[data-catalog-theme] > .hero {
  isolation: isolate;
  background: var(--catalog-header);
  border-bottom: 0;
}
/* Match the homepage Service heading, label and supporting copy. */
body[data-catalog-theme] > .hero .eyebrow {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .1em;
  color: #064e04;
  margin-bottom: 20px;
}
body[data-catalog-theme] > .hero h1 {
  font-family: 'Poppins','Inter',-apple-system,sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -1.2px;
  color: #14140f;
  margin: 0;
}
body[data-catalog-theme] > .hero p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  max-width: 560px;
  margin: 18px auto 0;
}
@media (max-width: 640px) {
  body[data-catalog-theme] > .hero h1 { font-size: 30px; letter-spacing: -.8px; }
}
body[data-catalog-theme] > .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--catalog-art) center bottom / cover no-repeat;
  pointer-events: none;
}
body[data-catalog-theme] > .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, transparent 62%, var(--catalog-paper) 100%),
    linear-gradient(to right, transparent 12%, var(--catalog-header) 38%, var(--catalog-header) 62%, transparent 88%);
  pointer-events: none;
}
body[data-catalog-theme] > .hero > .curve { display: none; }
body[data-catalog-theme] > .hero p { color: #6e6e64; }
@media (max-width: 760px) {
  body[data-catalog-theme] > .hero::before {
    background-size: auto 100%;
    opacity: .55;
  }
}
@media print {
  body[data-catalog-theme] { background: #fff; }
  body[data-catalog-theme] > .hero { background: #fff; }
  body[data-catalog-theme] > .hero::before,
  body[data-catalog-theme] > .hero::after { display: none; }
}