/* Page art for Who We Are, Health & Safety, Sustainability, Research Contribution and inSIGHT (2026-11-08) */
.art-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center;
  min-height: min(46vw, 760px); padding: clamp(3.5rem, 7vw, 6rem) 0 calc(clamp(3.5rem, 6vw, 5rem) + 28px);
  background: #08140c; color: var(--color-text-light); }
.art-hero > .container { position: relative; z-index: 2; width: 100%; }
.art-bg { position: absolute; inset: 0; z-index: 0; }
.art-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.art-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,20,12,.78) 0%, rgba(8,20,12,.66) 30%, rgba(8,20,12,.32) 50%, rgba(8,20,12,.04) 64%, transparent 100%),
              linear-gradient(180deg, rgba(8,20,12,.5), transparent 24%); }
@media (max-width: 1500px) {
  .art-hero::after { background: linear-gradient(90deg, rgba(8,20,12,.9) 0%, rgba(8,20,12,.8) 34%, rgba(8,20,12,.4) 52%, rgba(8,20,12,.05) 64%, transparent 100%),
                                 linear-gradient(180deg, rgba(8,20,12,.5), transparent 24%); } }
.art-copy { max-width: 46rem; }
.art-eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #d3fa99; }
.art-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.art-hero h1 { margin: 1.1rem 0 0; max-width: 15em; font-size: clamp(2.2rem, 3.4vw, 3.1rem); font-weight: 300; line-height: 1.06; letter-spacing: -.035em; color: #fff; }
.art-lede { margin-top: 1.3rem; max-width: 34rem; font-size: 1.06rem; line-height: 1.6; color: rgba(248,247,242,.82); }
.art-proof { margin-top: 1.6rem; padding-top: 1.2rem; max-width: 34rem; border-top: 1px solid rgba(248,247,242,.16); font-size: .86rem; color: rgba(248,247,242,.66); }
.art-hero + section { position: relative; z-index: 3; margin-top: -28px; border-radius: 28px 28px 0 0; }
.art-tw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.art-tw circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: artst var(--t, 6s) ease-in-out var(--d, 0s) infinite; }
@keyframes artst { 0%, 62%, 100% { opacity: 0; transform: scale(.6); } 72% { opacity: 1; transform: scale(1); } 77% { opacity: .45; } 83% { opacity: .9; } 92% { opacity: .2; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .art-tw { display: none; } }
@media (max-width: 760px) {
  .art-hero { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
  .art-bg { position: relative; order: 2; margin-top: 2rem; aspect-ratio: 16 / 10; }
  .art-hero::after { background: linear-gradient(180deg, #08140c 0%, rgba(8,20,12,.9) 45%, transparent 62%); }
  .art-hero + section { margin-top: -20px; border-radius: 20px 20px 0 0; }
  .art-tw { display: none; }
}
.art-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg, 16px); }
.art-fig { position: relative; }
.art-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(2rem, 4vw, 3rem); }
.art-team-card { display: flex; flex-direction: column; text-decoration: none; color: var(--color-text-dark); }
.art-team-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg, 16px); background: var(--color-green-light); }
.art-team-name { margin-top: .9rem; font-weight: 500; font-size: 1rem; }
.art-team-title { margin-top: .2rem; font-size: .88rem; color: var(--color-text-muted); }
@media (max-width: 760px) { .art-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.art-ins-lead { max-width: 1100px; margin: clamp(2.4rem, 5vw, 3.6rem) auto -1.4rem; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted); text-align: center; }
.art-ins-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); max-width: 1100px; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; }
.art-ins { margin: 0; }
.art-ins img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg, 16px); }
.art-ins figcaption { margin-top: .7rem; font-size: .86rem; color: var(--color-text-muted); }
@media (max-width: 760px) { .art-ins-row { grid-template-columns: 1fr; } }
.art-band { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #08140c;
  min-height: min(44vw, 640px); display: flex; align-items: flex-end; padding: clamp(3rem, 6vw, 5rem) 0; }
.art-band-bg { position: absolute; inset: 0; z-index: 0; }
.art-band-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-band::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8,20,12,.86) 0%, rgba(8,20,12,.62) 38%, rgba(8,20,12,.1) 68%, transparent 100%); }
.art-band > .container { position: relative; z-index: 2; width: 100%; }
.art-band + section { position: relative; z-index: 3; margin-top: calc(-1 * var(--radius-xl, 32px)); }   /* a rounded section below a band sits over the picture, so its corners show the band, not the page */
.art-band-copy { max-width: 36rem; }
.art-band h2 { margin: 1rem 0 0; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 300; line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.art-band p { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.6; color: rgba(248,247,242,.86); }
.art-band .art-band-src { font-size: .8rem; color: rgba(248,247,242,.6); }
.art-band .art-band-src a { color: inherit; }
@media (max-width: 760px) { .art-band { flex-direction: column; align-items: stretch; padding-top: 0; min-height: 0; }
  .art-band-bg { position: relative; aspect-ratio: 16 / 10; margin-bottom: 1.5rem; }
  .art-band::after { background: linear-gradient(180deg, transparent 0%, transparent 40%, #08140c 62%); } }
.art-hero.light { background: #f8f7f2; color: var(--color-text-dark); flex-direction: column; align-items: stretch; min-height: 0;
  padding: clamp(3rem, 6vw, 5rem) 0 calc(clamp(1.5rem, 3vw, 2.5rem) + 28px); }
.art-hero.light::after { display: none; }
.art-hero.light .art-bg { position: relative; inset: auto; order: 2; width: min(100% - 32px, 1500px); margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; aspect-ratio: 21 / 9; }
.art-hero.light .art-bg img { object-fit: contain; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect; }
.art-hero.light .art-tw { display: none; }
.art-hero.light .art-copy { max-width: 60rem; }
.art-hero.light h1 { color: var(--color-text-dark); max-width: 22em; }
.art-hero.light h1 span { color: #3d6b3d !important; }
.art-hero.light .art-eyebrow { color: #3d6b3d; }
.art-hero.light .art-lede { color: var(--color-text-muted); max-width: 44rem; }
.art-hero.light .art-proof { color: var(--color-text-muted); border-top-color: rgba(26,60,26,.14); }
.art-hero.light + section { margin-top: 0; border-radius: 0; }
.art-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.art-step { margin: 0; }
.art-step .art-img, .ri-card .art-img { aspect-ratio: 4 / 3; background: #f8f7f2; }
.art-step figcaption { margin-top: 1.1rem; }
.art-step-n { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--color-green-dark); color: #fff; font-size: .8rem; font-weight: 600; }
.art-step h3 { margin: .7rem 0 0; font-size: 1.25rem; font-weight: 400; letter-spacing: -.015em; color: var(--color-text-dark); }
.art-step p { margin: .4rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--color-text-muted); }
.ri-card > .art-fig { margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-lg); }
.ri-card > .art-fig .art-img { border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; }
@media (max-width: 760px) { .art-steps-grid { grid-template-columns: 1fr; } }

/* styles.css collapses .research-grid to one 780px column on greendrains.com (.prod) because its placeholder was hidden there;
   a grid that now holds a real picture keeps the side-by-side layout it has everywhere else */
.prod .research-grid:has(> .research-grid-image > .art-fig) { max-width: 1100px; }
@media (min-width: 1024px) { .prod .research-grid:has(> .research-grid-image > .art-fig) { grid-template-columns: 1fr 1fr !important; } }