/* Shared layouts for the independent environmental product pages */
.env-product-page { background: #fff; color: #17253b; }
.env-hero { position: relative; overflow: hidden; min-height: 610px; background: radial-gradient(circle at 85% 20%, rgba(21, 188, 141, .15), transparent 28%), linear-gradient(120deg, #041126, #061b37 60%, #082c43); color: #fff; }
.env-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(84, 150, 199, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(84, 150, 199, .045) 1px, transparent 1px); background-size: 60px 60px; content: ""; mask-image: linear-gradient(90deg,#000,transparent 96%); }
.env-hero-grid { position: relative; z-index: 1; display: grid; min-height: 610px; padding: 66px 0; align-items: center; grid-template-columns: .9fr 1.1fr; gap: 58px; }
.env-eyebrow { display: inline-flex; margin-bottom: 19px; align-items: center; gap: 10px; color: #56e1ba; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.env-eyebrow i { width: 26px; height: 2px; background: #2edbab; }
.env-hero-copy h1 { margin: 0; color: #fff; font-size: 46px; line-height: 1.28; letter-spacing: -.04em; }
.env-hero-copy .hero-lead { margin: 22px 0 0; color: #edf8ff; font-size: 19px; font-weight: 800; line-height: 1.65; }
.env-hero-copy .hero-description { margin: 14px 0 0; color: #a8bdd1; font-size: 14px; line-height: 1.95; }
.env-hero-copy .button-row { margin-top: 28px; }
.env-tags { display: flex; padding: 0; margin: 27px 0 0; flex-wrap: wrap; gap: 8px; list-style: none; }
.env-tags li { padding: 8px 11px; border: 1px solid rgba(137, 184, 219, .22); border-radius: 5px; background: rgba(17, 50, 84, .5); color: #bfd0df; font-size: 11px; }
.env-visual { position: relative; padding: 12px; border: 1px solid rgba(103, 177, 203, .25); border-radius: 20px; background: rgba(4, 24, 45, .82); box-shadow: 0 28px 60px rgba(0, 7, 20, .28); }
.env-visual img { display: block; width: 100%; height: 390px; border-radius: 13px; object-fit: cover; }
.env-visual figcaption { display: flex; padding: 12px 5px 2px; align-items: center; justify-content: space-between; color: #748da5; font-size: 9px; }
.env-visual figcaption span:first-child { color: #5ae1bb; font-weight: 800; letter-spacing: .08em; }
.hazard-page .env-hero { background: radial-gradient(circle at 84% 20%, rgba(227, 157, 50, .13), transparent 25%), linear-gradient(120deg,#041126,#071a35 58%,#143442); }
.hazard-page .env-eyebrow, .hazard-page .env-visual figcaption span:first-child { color: #ffd07b; }
.hazard-page .env-eyebrow i { background: #f0ad45; }
.hazard-page .env-hero-copy h1 { font-size: clamp(33px, 2.8vw, 38px); letter-spacing: -.055em; white-space: nowrap; }

.env-facts { border-bottom: 1px solid #dce5ec; background: #f7f9fb; }
.env-fact-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.env-fact { padding: 25px 30px; border-right: 1px solid #dce5ec; }
.env-fact:last-child { border-right: 0; }
.env-fact span { display: block; margin-bottom: 7px; color: #12a879; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.env-fact strong { color: #183653; font-size: 13px; line-height: 1.6; }
.hazard-page .env-fact span { color: #b77a1c; }
.env-product-page .section { padding: 92px 0; }
.env-section-muted { background: #f4f7fa; }

.env-intro-grid { display: grid; margin-top: 48px; grid-template-columns: .9fr 1.1fr; gap: 25px; }
.env-intro-copy { padding: 38px; border-top: 4px solid #18ba87; background: #071d38; color: #fff; }
.env-intro-copy h3 { margin: 0 0 18px; color: #fff; font-size: 26px; line-height: 1.45; }
.env-intro-copy p { margin: 0; color: #a8bbcd; font-size: 14px; line-height: 1.95; }
.env-intro-copy blockquote { padding: 18px 0 0; margin: 26px 0 0; border-top: 1px solid rgba(136,177,208,.17); color: #55dbb2; font-size: 12px; line-height: 1.8; }
.env-value-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.env-value-card { padding: 27px; border: 1px solid #dfe7ee; background: #fff; }
.env-value-card span { color: #13a879; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.env-value-card h3 { margin: 17px 0 9px; color: #153451; font-size: 17px; }
.env-value-card p { margin: 0; color: #687b8e; font-size: 12px; line-height: 1.8; }

.process-flow { display: grid; margin-top: 48px; grid-template-columns: repeat(5,1fr); gap: 12px; }
.process-step { position: relative; min-height: 175px; padding: 25px; border: 1px solid #dfe7ed; background: #fff; }
.process-step:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -18px; width: 23px; color: #19b886; font-size: 17px; content: "→"; transform: translateY(-50%); }
.process-step > span { color: #12a779; font-size: 9px; font-weight: 800; }
.process-step h3 { margin: 24px 0 10px; color: #13334f; font-size: 16px; }
.process-step p { margin: 0; color: #6a7d90; font-size: 11px; line-height: 1.75; }

.device-grid { display: grid; margin-top: 48px; grid-template-columns: repeat(3,1fr); gap: 16px; }
.device-card { position: relative; min-height: 335px; padding: 34px; overflow: hidden; border: 1px solid #dce5ec; background: #fff; box-shadow: 0 12px 34px rgba(15,55,88,.045); }
.device-card::after { position: absolute; right: -45px; bottom: -45px; width: 120px; height: 120px; border: 1px solid rgba(15,172,124,.15); border-radius: 50%; content: ""; }
.device-card > span { color: #b47a22; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.device-icon { display: flex; width: 62px; height: 62px; margin: 31px 0 22px; border: 1px solid rgba(218,155,57,.25); border-radius: 14px; align-items: center; justify-content: center; background: #fff7e8; color: #a66a13; font-size: 19px; font-weight: 800; }
.device-card h3 { margin: 0 0 12px; color: #183650; font-size: 20px; }
.device-card p { margin: 0; color: #66798c; font-size: 13px; line-height: 1.85; }
.device-card small { display: block; margin-top: 18px; color: #9a7c4e; font-size: 10px; }

.function-grid { display: grid; margin-top: 48px; grid-template-columns: repeat(3,1fr); gap: 14px; }
.function-card { padding: 29px; border: 1px solid #dfe7ee; background: #fff; }
.function-card span { display: flex; width: 42px; height: 42px; border-radius: 10px; align-items: center; justify-content: center; background: #e8f7f2; color: #11a678; font-size: 11px; font-weight: 800; }
.function-card h3 { margin: 19px 0 10px; color: #143451; font-size: 17px; }
.function-card p { margin: 0; color: #677b8f; font-size: 12px; line-height: 1.8; }

.module-grid { display: grid; margin-top: 48px; grid-template-columns: repeat(3,1fr); gap: 14px; }
.module-card { position: relative; min-height: 230px; padding: 30px; border: 1px solid #dfe7ee; background: #fff; }
.module-card > span { color: #11a879; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.module-card h3 { margin: 28px 0 11px; color: #12334f; font-size: 18px; }
.module-card p { margin: 0; color: #687b8e; font-size: 12px; line-height: 1.8; }
.module-card.featured { background: linear-gradient(145deg,#062b48,#07585e); }
.module-card.featured > span { color: #5be0ba; }
.module-card.featured h3 { color: #fff; }
.module-card.featured p { color: #abc2cc; }

.series-grid { display: grid; margin-top: 48px; grid-template-columns: repeat(3,1fr); gap: 16px; }
.series-card { min-height: 370px; padding: 36px; border: 1px solid #dce5ec; background: #fff; }
.series-card > span { color: #10a878; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.series-symbol { display: flex; width: 74px; height: 74px; margin: 34px 0 26px; border-radius: 50%; align-items: center; justify-content: center; background: #e7f7f1; color: #10a778; font-size: 20px; font-weight: 800; box-shadow: 0 0 0 12px #f4faf8; }
.series-card h3 { margin: 0 0 13px; color: #14334f; font-size: 20px; }
.series-card p { margin: 0; color: #65798d; font-size: 13px; line-height: 1.85; }
.series-card ul { padding: 0; margin: 22px 0 0; list-style: none; }
.series-card li { position: relative; padding: 7px 0 7px 16px; color: #536b80; font-size: 11px; }
.series-card li::before { position: absolute; top: 12px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #1ab98a; content: ""; }

.product-note { display: flex; padding: 23px 27px; margin-top: 34px; border-left: 4px solid #16b784; align-items: center; justify-content: space-between; background: #eef7f4; }
.product-note strong { color: #163650; font-size: 13px; }
.product-note span { color: #61788a; font-size: 12px; }
.hazard-page .product-note { border-left-color: #d69736; background: #fff8ec; }
.env-contact { background: #071a32; color: #fff; }
.env-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.env-contact h2 { margin: 13px 0 10px; color: #fff; font-size: 30px; }
.env-contact p { max-width: 760px; margin: 0; color: #a8bbcd; font-size: 13px; line-height: 1.85; }
.env-contact .button-row { flex-shrink: 0; }

@media (max-width:1280px) {
  .env-hero-grid { gap: 42px; }
  .env-hero-copy h1 { font-size: 39px; }
  .env-visual img { height: 345px; }
  .env-intro-grid { gap: 18px; }
  .env-product-page .section { padding: 82px 0; }
  .process-step { padding: 21px; }
  .device-card, .series-card { padding: 29px; }
}

/* Keep approved long environmental product names on one desktop line. */
.quiet-page .env-hero-copy h1,
.watershed-page .env-hero-copy h1 {
  white-space: nowrap;
}


/* Keep the quiet-community positioning statement on one desktop line. */
.quiet-page .quiet-positioning .section-heading h2 {
  font-size: 36px;
  letter-spacing: -.045em;
  white-space: nowrap;
}


/* Keep the watershed positioning statement on one desktop line. */
.watershed-page .watershed-positioning .section-heading h2 {
  font-size: 36px;
  letter-spacing: -.045em;
  white-space: nowrap;
}