.solutions-hero { position: relative; min-height: 380px; overflow: hidden; background: var(--color-charcoal); color: var(--color-white); }
.solutions-hero__backdrop { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(9 11 13 / 92%) 0%, rgb(9 11 13 / 67%) 48%, rgb(9 11 13 / 24%) 100%), url("../images/hero/solutions-hero.webp") center / cover no-repeat; }
.solutions-hero__inner { position: relative; display: flex; min-height: 380px; align-items: center; }
.solutions-hero__inner > div { max-width: 640px; }
.solutions-hero .eyebrow { margin-bottom: 1rem; }
.solutions-hero h1 { margin-bottom: 1.25rem; color: var(--color-white); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 900; letter-spacing: -.07em; line-height: .9; text-transform: uppercase; }
.solutions-hero p:last-child { color: #c0c3c4; }
.solution-areas { background: var(--color-white); }
.solution-areas__intro { margin-bottom: 3rem; }
.solution-areas__intro .eyebrow { margin-bottom: 1rem; }
.solution-areas__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.solution-area { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(200px, .85fr); min-height: 300px; border-bottom: 1px solid var(--color-border); }
.solution-area__media { position: relative; overflow: hidden; background: #292c2e; }
.solution-area__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg, #3b3f41, #1b1e20); color: rgb(255 255 255 / 50%); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.solution-area__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.solution-area:hover .solution-area__media img { transform: scale(1.04); } .solution-area__media img.is-missing { display: none; }
.solution-area__content { display: flex; flex-direction: column; justify-content: end; padding: 1.5rem; }
.solution-area h3 { margin-bottom: .8rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }
.solution-area p { color: var(--color-muted); font-size: .85rem; line-height: 1.55; }
.secondary-industries { display: flex; flex-wrap: wrap; gap: 0; margin-top: 3.5rem; border-block: 1px solid var(--color-border); }
.secondary-industries span { padding: 1.25rem 2rem; border-left: 1px solid var(--color-border); color: var(--color-muted); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.secondary-industries span:first-child { border-left: 0; }
.solutions-cta { background: var(--color-charcoal); color: var(--color-white); }
.solutions-cta__inner { display: flex; min-height: 300px; align-items: center; justify-content: space-between; gap: 2rem; }
.solutions-cta .eyebrow { margin-bottom: .8rem; }
.solutions-cta h2 { margin-bottom: .75rem; color: var(--color-white); font-size: clamp(2rem, 4vw, 3.75rem); }
.solutions-cta p:last-child { color: #afb2b4; }
@media (max-width: 992px) { .solution-area { grid-template-columns: 1fr; } .solution-area__media { min-height: 250px; } }
@media (max-width: 768px) { .solutions-hero, .solutions-hero__inner { min-height: 310px; } .solution-areas__grid { grid-template-columns: 1fr; } .solution-area { grid-template-columns: minmax(0, 1.1fr) minmax(170px, .9fr); min-height: 250px; } .solution-area__media { min-height: 0; } .secondary-industries { margin-top: 2.5rem; } .solutions-cta__inner { min-height: 280px; align-items: flex-start; flex-direction: column; justify-content: center; } }
@media (max-width: 480px) { .solution-area { grid-template-columns: 1fr; } .solution-area__media { min-height: 230px; } .secondary-industries span { width: 100%; border-top: 1px solid var(--color-border); border-left: 0; } .secondary-industries span:first-child { border-top: 0; } }