.solvents-page,
.solvents-page main {
  background: #010607;
}

.solvents-hero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: #010607;
}

.solvents-hero__media,
.solvents-hero__shade,
.solvents-hero__mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.solvents-hero__media {
  z-index: -4;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  animation: solventsHeroDrift 20s ease-in-out infinite alternate;
}

.solvents-hero__shade {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(1,5,6,.99), rgba(1,5,6,.92) 31%, rgba(1,5,6,.48) 52%, rgba(1,5,6,.03) 79%),
    linear-gradient(180deg, rgba(1,5,6,.62), transparent 28%, transparent 62%, #010607 100%);
}

.solvents-hero__mist {
  z-index: -2;
  left: 51%;
  width: 48%;
  background: radial-gradient(ellipse, rgba(41,218,208,.13), transparent 69%);
  filter: blur(38px);
  animation: solventsMist 8s ease-in-out infinite alternate;
}

.solvents-hero__content {
  display: flex;
  align-items: center;
  min-height: 568px;
  padding: 28px clamp(42px,6.1vw,88px) 74px;
}

.solvents-hero__content > div {
  position: relative;
  max-width: 590px;
  padding-left: 28px;
}

.solvents-hero__content > div::before {
  position: absolute;
  top: -16px;
  bottom: -16px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, #5bddd7 14%, #5bddd7 84%, transparent);
  content: "";
}

.solvents-hero__eyebrow,
.portfolio__eyebrow {
  margin: 0;
  color: var(--teal-bright);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.solvents-hero h1 {
  margin: 42px 0 18px;
  color: var(--white);
  font-size: clamp(2.85rem,4.1vw,3.8rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}

.solvents-hero h1 em {
  display: block;
  margin-top: 8px;
  color: var(--teal-bright);
  font-style: normal;
}

.solvents-hero__tagline {
  margin: 0;
  color: #c2cecf;
  font-size: .94rem;
  line-height: 1.75;
}

.solvents-hero__button {
  width: 220px;
  margin-top: 30px;
}

.solvents-hero__meta {
  position: absolute;
  bottom: 34px;
  left: clamp(42px,6.1vw,88px);
  margin: 0;
  color: rgba(202,215,216,.47);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.solvents-portfolio {
  position: relative;
  overflow: hidden;
  padding: 92px clamp(42px,6.1vw,88px) 120px;
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 34% at 12% 28%, rgba(28,185,180,.075), transparent 74%),
    radial-gradient(ellipse 42% 32% at 88% 72%, rgba(28,185,180,.05), transparent 76%),
    linear-gradient(180deg,#010607,#02090a 50%,#010607);
}

.solvents-portfolio::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(28deg, transparent 49.5%, rgba(60,220,213,.035) 50%, transparent 50.5%),
    linear-gradient(151deg, transparent 49.5%, rgba(60,220,213,.026) 50%, transparent 50.5%),
    radial-gradient(circle, rgba(70,235,226,.28) 0 1px, transparent 1.8px);
  background-position: 0 0, 0 0, 0 0;
  background-size: 190px 160px, 220px 180px, 94px 94px;
  opacity: .34;
  content: "";
  mask-image: linear-gradient(180deg,transparent,#000 15%,#000 84%,transparent);
}

.portfolio__head,
.solvent-grid {
  width: min(100%,1280px);
  margin-right: auto;
  margin-left: auto;
}

.portfolio__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 34px;
}

.portfolio__head h2 {
  margin: 12px 0 0;
  font-size: clamp(1.75rem,2.3vw,2.25rem);
  font-weight: 500;
  letter-spacing: -.03em;
}

.portfolio__count {
  margin: 0;
  color: #829294;
  font-size: .7rem;
  letter-spacing: .14em;
}

.solvent-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.solvent-card {
  position: relative;
  display: flex;
  min-height: 410px;
  overflow: hidden;
  flex-direction: column;
  padding: 34px 32px 30px;
  border: 1px solid rgba(92,229,221,.25);
  border-radius: 13px;
  background:
    linear-gradient(135deg,rgba(31,72,75,.31),rgba(7,18,20,.72) 48%,rgba(2,8,10,.94)),
    rgba(4,12,14,.86);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 22px 50px rgba(0,0,0,.28);
  transition: transform .32s cubic-bezier(.2,.75,.2,1),border-color .32s,background-color .32s,box-shadow .32s;
}

.solvent-card::before {
  position: absolute;
  top: 0;
  left: 22px;
  width: 105px;
  height: 2px;
  background: linear-gradient(90deg,#72fff3,transparent);
  content: "";
  opacity: .7;
}

.solvent-card::after {
  position: absolute;
  top: -55%;
  left: -35%;
  width: 48%;
  height: 210%;
  background: linear-gradient(90deg,transparent,rgba(155,255,249,.075),transparent);
  content: "";
  opacity: 0;
  transform: rotate(16deg);
  transition: left .7s ease,opacity .25s;
}

.solvent-card:hover,
.solvent-card:focus-visible {
  border-color: rgba(95,241,232,.63);
  background-color: rgba(18,80,79,.18);
  box-shadow: inset 0 1px rgba(255,255,255,.07),0 24px 64px rgba(0,0,0,.42),0 0 34px rgba(41,214,204,.09);
  transform: translateY(-6px);
  outline: none;
}

.solvent-card:hover::after,
.solvent-card:focus-visible::after { left: 102%; opacity: 1; }

.solvent-card__category {
  margin: 0;
  color: #aebbbc;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.solvent-card__formula {
  margin: 30px 0 20px;
  color: #39e2d7;
  font-size: 2.05rem;
  font-weight: 400;
}

.solvent-card__line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,rgba(51,225,214,.72),rgba(51,225,214,.08));
}

.solvent-card h3 {
  margin: 28px 0 8px;
  color: #f3f7f7;
  font-size: 1.24rem;
  font-weight: 700;
  transition: color .25s;
}

.solvent-card:hover h3,
.solvent-card:focus-visible h3 { color: var(--teal-bright); }

.solvent-card__cas {
  margin: 0;
  color: #4fd8d0;
  font-size: .72rem;
}

.solvent-card__copy {
  margin: 22px 0 30px;
  color: #b8c3c4;
  font-size: .82rem;
  line-height: 1.72;
}

.solvent-card__link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  color: #47ddd4;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.solvent-card__link svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform .25s;
}

.solvent-card:hover .solvent-card__link svg { transform: translateX(4px); }

.js .solvent-card {
  opacity: 0;
  transform: translateY(24px);
}

.js .solvent-card.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1),border-color .32s,box-shadow .32s;
}

@keyframes solventsHeroDrift { from { transform: scale(1.02); } to { transform: scale(1.055) translateX(-.35%); } }
@keyframes solventsMist { from { opacity: .45; transform: translateX(-1%); } to { opacity: .78; transform: translateX(1.5%); } }

@media (max-width:1040px) {
  .solvent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .solvents-hero { min-height: 610px; }
  .solvents-hero__content { min-height: 528px; padding: 44px 24px 80px; }
  .solvents-hero__content > div { padding-left: 20px; }
  .solvents-hero__media { object-position: 63% center; opacity: .72; }
  .solvents-hero__shade { background: linear-gradient(90deg,rgba(1,5,6,.98),rgba(1,5,6,.75) 68%,rgba(1,5,6,.18)),linear-gradient(180deg,rgba(1,5,6,.58),transparent 32%,#010607 100%); }
  .solvents-hero__meta { right: 24px; bottom: 27px; left: 24px; line-height: 1.6; }
  .solvents-portfolio { padding: 76px 24px 88px; }
  .portfolio__head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .solvent-grid { grid-template-columns: 1fr; }
  .solvent-card { min-height: 380px; }
}

@media (prefers-reduced-motion:reduce) {
  .solvents-hero__media,
  .solvents-hero__mist { animation:none; }
  .js .solvent-card { opacity:1; transform:none; }
}

@media (max-width:620px) {
  .solvents-hero { min-height: 570px; }
  .solvents-hero__content { min-height: 500px; padding: 48px 22px 72px; }
  .solvents-hero__content > div { max-width: 100%; padding-left: 16px; }
  .solvents-hero h1 { margin: 37px 0 16px; font-size: clamp(2rem,10vw,2.65rem); line-height: 1.02; }
  .solvents-hero__tagline { font-size: .86rem; line-height: 1.68; }
  .solvents-hero__button { width: 100%; max-width: 230px; }
  .solvents-hero__meta { display: none; }
  .solvents-portfolio { padding: 68px 18px 82px; }
  .portfolio__head { margin-bottom: 28px; }
  .portfolio__head h2 { font-size: clamp(1.65rem,8vw,2.05rem); }
  .solvent-grid { gap: 18px; }
  .solvent-card { min-height: 0; padding: 28px 24px; }
  .solvent-card__formula { margin: 24px 0 17px; font-size: 1.72rem; }
  .solvent-card h3 { margin-top: 23px; font-size: 1.12rem; }
  .solvent-card__copy { margin: 18px 0 25px; }
}