.special-service-grid {
  display: grid;
  gap: 22px;
  margin-top: 56px;
}

.fly-focus,
.odourless-focus {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 42px;
  padding: 38px;
  border: 1px solid rgba(7, 92, 168, .18);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(7, 55, 99, .1);
  overflow: hidden;
}

.fly-focus {
  background: linear-gradient(135deg, #eef3f6, #fff);
}

.odourless-focus {
  background: linear-gradient(135deg, rgba(38, 139, 53, .1), #fff 62%);
}

.fly-bin-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 265px;
  border-radius: 24px;
  background: linear-gradient(145deg, #073763, #075ca8);
}

.dustbin {
  font-size: 112px;
  line-height: 1;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .25));
}

.bin-fly {
  position: absolute;
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .28));
}

.fly-one {
  animation: flyAroundOne 6s ease-in-out infinite;
}

.fly-two {
  animation: flyAroundTwo 7.3s ease-in-out -2s infinite;
}

.fly-three {
  animation: flyAroundThree 5.8s ease-in-out -3.4s infinite;
}

.odourless-icon {
  display: grid;
  place-items: center;
  min-height: 250px;
  border-radius: 24px;
  background: linear-gradient(145deg, #268b35, #075ca8);
  color: #fff;
  font-size: 108px;
  filter: drop-shadow(0 14px 20px rgba(7, 55, 99, .15));
}

.special-service-copy h2 {
  margin: 8px 0 14px;
  font-size: clamp(31px, 4vw, 48px);
}

.special-service-copy p,
.special-service-copy li {
  color: #53616e;
}

.special-service-copy ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  padding: 0;
  margin: 20px 0 24px;
  list-style: none;
}

.special-service-copy li::before {
  content: "✓";
  margin-right: 8px;
  color: #268b35;
  font-weight: 950;
}

.why-proshield {
  background: #eef3f6;
}

.why-proshield-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.why-proshield-card {
  padding: 25px;
  border: 1px solid rgba(7, 92, 168, .17);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(7, 55, 99, .06);
}

.why-proshield-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #075ca8;
  color: #fff;
  font-weight: 950;
}

.why-proshield-card h3 {
  margin: 15px 0 6px;
  color: #073763;
}

.why-proshield-card p {
  margin: 0;
  color: #53616e;
}

@keyframes flyAroundOne {
  0%, 100% { transform: translate(-82px, -58px) rotate(-15deg); }
  35% { transform: translate(72px, -80px) rotate(22deg); }
  70% { transform: translate(68px, 52px) rotate(-8deg); }
}

@keyframes flyAroundTwo {
  0%, 100% { transform: translate(78px, 38px) rotate(16deg); }
  40% { transform: translate(-70px, 62px) rotate(-20deg); }
  75% { transform: translate(-58px, -72px) rotate(9deg); }
}

@keyframes flyAroundThree {
  0%, 100% { transform: translate(12px, -88px) rotate(6deg); }
  45% { transform: translate(-88px, 8px) rotate(-18deg); }
  78% { transform: translate(80px, 4px) rotate(20deg); }
}

@media (max-width: 900px) {
  .fly-focus,
  .odourless-focus {
    grid-template-columns: 1fr;
  }

  .why-proshield-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .special-service-grid {
    margin-top: 38px;
  }

  .fly-focus,
  .odourless-focus {
    gap: 24px;
    padding: 21px;
    border-radius: 20px;
  }

  .fly-bin-visual,
  .odourless-icon {
    min-height: 210px;
  }

  .dustbin,
  .odourless-icon {
    font-size: 88px;
  }

  .special-service-copy ul,
  .why-proshield-grid {
    grid-template-columns: 1fr;
  }

  .special-service-copy .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bin-fly {
    animation: none;
  }

  .fly-one { transform: translate(-75px, -55px); }
  .fly-two { transform: translate(72px, 45px); }
  .fly-three { transform: translate(18px, -82px); }
}
