/* Diamond Detailing V2 — compact mobile intro and clear card animations. */
@media (max-width: 680px) {
  .v2-brand-hero.hero {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    align-items: initial;
  }
  .v2-brand-hero-inner {
    min-height: 0 !important;
    align-content: start;
    gap: 4px;
    padding-block: 8px 12px;
  }
  .v2-brand-hero-identity { gap: 2px; }
  .v2-brand-diamond-stage {
    width: clamp(88px, 24vw, 98px);
    height: clamp(88px, 24vw, 98px);
  }
  .v2-brand-hero .v2-home-kicker { margin-bottom: 5px; }
  .v2-brand-hero-copy h1 {
    font-size: clamp(28px, 7.5vw, 32px);
    line-height: 1.03;
  }
  .v2-brand-hero .v2-home-intro {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.36;
  }
}

/* Replace the before/after colour wipe with a recognisable service selector. */
.v2-card-effect-configurator::before {
  inset: 0 auto 0 -35%;
  width: 24%;
  height: auto;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.08) 35%, rgba(247,222,172,.48) 52%, rgba(255,255,255,.07) 69%, transparent);
  transform: translate3d(-170%, 0, 0) skewX(-14deg);
  animation: v2-configurator-scan-v29 7.8s 1.8s cubic-bezier(.3,.55,.25,1) infinite;
}
.v2-configurator-options {
  position: absolute;
  z-index: 4;
  top: 45%;
  right: clamp(14px, 5%, 32px);
  display: flex;
  gap: clamp(5px, 1vw, 9px);
  transform: translateY(-50%);
}
.v2-configurator-options .v2-configurator-option {
  position: relative;
  display: grid;
  width: clamp(34px, 4.2vw, 45px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(246,225,183,.78);
  border-radius: 50%;
  background: rgba(14,16,14,.63);
  box-shadow: 0 5px 18px rgba(0,0,0,.22), inset 0 0 18px rgba(250,233,195,.08);
  color: #fbf3df;
  opacity: 1;
  animation: v2-configurator-select-v29 5.4s ease-in-out infinite;
}
.v2-configurator-options .v2-configurator-option:nth-child(2) { animation-delay: 1.35s; }
.v2-configurator-options .v2-configurator-option:nth-child(3) { animation-delay: 2.7s; }
.v2-configurator-option svg { width: 47%; height: 47%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v2-configurator-option::after {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: #c79b50;
  color: #14130f;
  content: "✓";
  font: 800 9px/1 var(--sans);
  opacity: 0;
  transform: scale(.55);
  animation: v2-configurator-check-v29 5.4s ease-in-out infinite;
}
.v2-configurator-option:nth-child(2)::after { animation-delay: 1.35s; }
.v2-configurator-option:nth-child(3)::after { animation-delay: 2.7s; }
@keyframes v2-configurator-scan-v29 {
  0%, 17% { transform: translate3d(-170%,0,0) skewX(-14deg); opacity: 0; }
  24% { opacity: .9; }
  43%, 100% { transform: translate3d(570%,0,0) skewX(-14deg); opacity: 0; }
}
@keyframes v2-configurator-select-v29 {
  0%, 12%, 59%, 100% { border-color: rgba(246,225,183,.78); background: rgba(14,16,14,.63); color: #fbf3df; box-shadow: 0 5px 18px rgba(0,0,0,.22), inset 0 0 18px rgba(250,233,195,.08); transform: scale(1); }
  24%, 43% { border-color: #f3d79d; background: rgba(190,145,67,.92); color: #16140f; box-shadow: 0 0 24px rgba(239,205,135,.54); transform: scale(1.08); }
}
@keyframes v2-configurator-check-v29 {
  0%, 18%, 55%, 100% { opacity: 0; transform: scale(.55); }
  26%, 43% { opacity: 1; transform: scale(1); }
}

/* Distinct individual water drops, without the previous bubble/line treatment. */
.v2-card-effect.v2-card-effect-selfwash::before { display: none; }
.v2-card-effect.v2-card-effect-selfwash i {
  position: absolute;
  top: -18px;
  bottom: auto;
  width: 9px;
  height: 15px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%, 63% 19%, 78% 39%, 90% 56%, 95% 70%, 89% 83%, 78% 93%, 64% 99%, 50% 100%, 36% 99%, 22% 93%, 11% 83%, 5% 70%, 10% 56%, 22% 39%, 37% 19%);
  background: linear-gradient(145deg, rgba(255,255,255,.96) 0%, rgba(218,242,250,.88) 34%, rgba(135,194,211,.56) 72%, rgba(237,249,253,.8) 100%);
  box-shadow: 0 0 12px rgba(205,239,249,.42);
  opacity: 0;
  transform: translate3d(0,0,0);
  animation: v2-water-drop-fall-v29 4.5s ease-in infinite;
}
.v2-card-effect.v2-card-effect-selfwash i::after {
  top: 3px;
  left: 2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.98);
}
.v2-card-effect.v2-card-effect-selfwash i:nth-child(1) { left: 18%; width: 8px; height: 13px; animation-delay: .3s; }
.v2-card-effect.v2-card-effect-selfwash i:nth-child(2) { left: 36%; width: 6px; height: 10px; animation-delay: 2s; animation-duration: 4.8s; }
.v2-card-effect.v2-card-effect-selfwash i:nth-child(3) { left: 55%; width: 11px; height: 18px; animation-delay: 1.1s; animation-duration: 5.2s; }
.v2-card-effect.v2-card-effect-selfwash i:nth-child(4) { left: 72%; width: 7px; height: 12px; animation-delay: 2.9s; animation-duration: 4.7s; }
.v2-card-effect.v2-card-effect-selfwash i:nth-child(5) { left: 89%; width: 9px; height: 15px; animation-delay: 1.7s; animation-duration: 5.1s; }
.v2-card-effect.v2-card-effect-selfwash i:nth-child(6) { left: 46%; width: 5px; height: 9px; animation-delay: 3.6s; animation-duration: 4.6s; }
@keyframes v2-water-drop-fall-v29 {
  0% { opacity: 0; transform: translate3d(0,-3px,0) scale(.7); }
  14% { opacity: .92; }
  67% { opacity: .88; }
  86% { opacity: .35; transform: translate3d(4px,205px,0) scale(.88); }
  100% { opacity: 0; transform: translate3d(4px,230px,0) scale(.65); }
}
@media (max-width: 680px) {
  .v2-card-effect.v2-card-effect-selfwash i { top: -14px; }
  @keyframes v2-water-drop-fall-v29 {
    0% { opacity: 0; transform: translate3d(0,-3px,0) scale(.7); }
    14% { opacity: .92; }
    67% { opacity: .88; }
    86% { opacity: .35; transform: translate3d(4px,160px,0) scale(.88); }
    100% { opacity: 0; transform: translate3d(4px,180px,0) scale(.65); }
  }
  .v2-configurator-options { top: 47%; right: 7%; gap: 5px; }
  .v2-configurator-options .v2-configurator-option { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-card-effect-configurator::before { animation: none; opacity: 0; }
  .v2-configurator-options .v2-configurator-option { animation: none; opacity: 1; }
  .v2-configurator-option::after { animation: none; opacity: 0; }
  .v2-card-effect.v2-card-effect-selfwash i { animation: none; opacity: .8; }
}