/**
 * CVWATER GROUP — planșe, schițe și animații SVG.
 */


/* ==========================================================
   Variabile
   ========================================================== */

:root {
  --cvw-blueprint-paper: #f6f5f1;
  --cvw-blueprint-line: #e4e2dc;
  --cvw-graphite: #2b2e33;
  --cvw-water: #2f7fc1;
  --cvw-wastewater: #8c7355;
}


/* ==========================================================
   Schițe SVG
   ========================================================== */

.schita {
  display: block;
  width: 100%;
  height: auto;
}

.schita text {
  font-family: var(--cvw-font-family);
}

.schita text.lbl {
  font-size: 15px;
  font-weight: 800;
  fill: var(--cvw-text);
}

.schita text.sub {
  font-size: 12.5px;
  font-weight: 400;
  fill: var(--cvw-text-2);
}

.schita text.nr {
  font-size: 12px;
  font-weight: 900;
  fill: #fff;
}

.schita .anim {
  transform-box: view-box;
}


/* ==========================================================
   Animație SVG — hero tehnic
   ========================================================== */

.ruleaza .h-bula1 {
  animation: h-bula1 2.8s ease-in infinite;
}

@keyframes h-bula1 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-79.2px);
    opacity: 0;
  }
}

.ruleaza .h-ac2 {
  animation: h-ac2 3.1s ease-in-out infinite alternate;
}

@keyframes h-ac2 {
  from {
    transform: rotate(-18deg);
  }

  to {
    transform: rotate(14deg);
  }
}

.ruleaza .h-ac3 {
  animation: h-ac3 3.1s ease-in-out infinite alternate;
}

@keyframes h-ac3 {
  from {
    transform: rotate(-18deg);
  }

  to {
    transform: rotate(14deg);
  }
}

.ruleaza .h-rot4 {
  animation: h-rot4 1.2s linear infinite;
}

@keyframes h-rot4 {
  to {
    transform: rotate(360deg);
  }
}

.ruleaza .h-flux5 {
  animation: h-flux5 8.76s linear infinite;
}

@keyframes h-flux5 {
  0% {
    transform: translate(0, 0);
  }

  12.23% {
    transform: translate(75px, 0);
  }

  75.86% {
    transform: translate(75px, -390px);
  }

  97.06% {
    transform: translate(205px, -390px);
  }

  100% {
    transform: translate(205px, -372px);
  }
}

.ruleaza .h-flux6 {
  animation: h-flux6 9.06s linear infinite;
}

@keyframes h-flux6 {
  0% {
    transform: translate(0, 0);
  }

  4.73% {
    transform: translate(0, 30px);
  }

  21.29% {
    transform: translate(105px, 30px);
  }

  82.49% {
    transform: translate(105px, -358px);
  }

  97.48% {
    transform: translate(200px, -358px);
  }

  100% {
    transform: translate(200px, -342px);
  }
}

.ruleaza .h-flux7 {
  animation: h-flux7 4.5s linear infinite;
}

@keyframes h-flux7 {
  0% {
    transform: translate(0, 0);
  }

  12.7% {
    transform: translate(0, 40px);
  }

  100% {
    transform: translate(275px, 40px);
  }
}


/* ==========================================================
   Animație SVG — epurare ape uzate
   ========================================================== */

.ruleaza .ep-val1 {
  animation: ep-val1 2.4s linear infinite;
}

@keyframes ep-val1 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .ep-rot2 {
  animation: ep-rot2 1.2s linear infinite;
}

@keyframes ep-rot2 {
  to {
    transform: rotate(360deg);
  }
}

.ruleaza .ep-rot3 {
  animation: ep-rot3 4s linear infinite;
}

@keyframes ep-rot3 {
  to {
    transform: rotate(360deg);
  }
}

.ruleaza .ep-val4 {
  animation: ep-val4 2.4s linear infinite;
}

@keyframes ep-val4 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .ep-rot5 {
  animation: ep-rot5 2.5s linear infinite;
}

@keyframes ep-rot5 {
  to {
    transform: rotate(360deg);
  }
}

.ruleaza .ep-val6 {
  animation: ep-val6 2.4s linear infinite;
}

@keyframes ep-val6 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .ep-bula7 {
  animation: ep-bula7 2.8s ease-in infinite;
}

@keyframes ep-bula7 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-140px);
    opacity: 0;
  }
}

.ruleaza .ep-val8 {
  animation: ep-val8 2.4s linear infinite;
}

@keyframes ep-val8 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .ep-bula9 {
  animation: ep-bula9 2.8s ease-in infinite;
}

@keyframes ep-bula9 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-110px);
    opacity: 0;
  }
}

.ruleaza .ep-flux10 {
  animation: ep-flux10 5.29s linear infinite;
}

@keyframes ep-flux10 {
  0% {
    transform: translate(0, 0);
  }

  48.65% {
    transform: translate(0, -180px);
  }

  91.89% {
    transform: translate(160px, -180px);
  }

  100% {
    transform: translate(160px, -150px);
  }
}

.ruleaza .ep-flux11 {
  animation: ep-flux11 2.2s linear infinite;
}

@keyframes ep-flux11 {
  0% {
    transform: translate(0, 0);
  }

  42.11% {
    transform: translate(40px, 0);
  }

  52.63% {
    transform: translate(40px, -10px);
  }

  100% {
    transform: translate(85px, -10px);
  }
}

.ruleaza .ep-flux12 {
  animation: ep-flux12 3.29s linear infinite;
}

@keyframes ep-flux12 {
  0% {
    transform: translate(0, 0);
  }

  17.39% {
    transform: translate(40px, 0);
  }

  73.91% {
    transform: translate(40px, -130px);
  }

  100% {
    transform: translate(100px, -130px);
  }
}

.ruleaza .ep-flux13 {
  animation: ep-flux13 2.2s linear infinite;
}

@keyframes ep-flux13 {
  0% {
    transform: translate(0, 0);
  }

  47.62% {
    transform: translate(50px, 0);
  }

  57.14% {
    transform: translate(50px, 10px);
  }

  100% {
    transform: translate(95px, 10px);
  }
}

.ruleaza .ep-flux14 {
  animation: ep-flux14 6.4s linear infinite;
}

@keyframes ep-flux14 {
  0% {
    transform: translate(0, 0);
  }

  24.55% {
    transform: translate(0, -110px);
  }

  49.11% {
    transform: translate(110px, -110px);
  }

  93.3% {
    transform: translate(110px, 88px);
  }

  100% {
    transform: translate(140px, 88px);
  }
}

.ruleaza .ep-flux15 {
  animation: ep-flux15 4s linear infinite;
}

@keyframes ep-flux15 {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(0, 40px);
  }

  100% {
    transform: translate(160px, 40px);
  }
}


/* ==========================================================
   Animație SVG — potabilizare
   ========================================================== */

.ruleaza .po-rot1 {
  animation: po-rot1 1.2s linear infinite;
}

@keyframes po-rot1 {
  to {
    transform: rotate(360deg);
  }
}

.ruleaza .po-val2 {
  animation: po-val2 2.4s linear infinite;
}

@keyframes po-val2 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .po-sed3 {
  animation: po-sed3 3.6s ease-in infinite;
}

@keyframes po-sed3 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  15% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(60px);
    opacity: 0.2;
  }
}

.ruleaza .po-val4 {
  animation: po-val4 2.4s linear infinite;
}

@keyframes po-val4 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .po-rot5 {
  animation: po-rot5 3.2s linear infinite;
}

@keyframes po-rot5 {
  to {
    transform: rotate(360deg);
  }
}

.ruleaza .po-val6 {
  animation: po-val6 2.4s linear infinite;
}

@keyframes po-val6 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .po-sed7 {
  animation: po-sed7 3.6s ease-in infinite;
}

@keyframes po-sed7 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  15% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(110px);
    opacity: 0.2;
  }
}

.ruleaza .po-uv8 {
  animation: po-uv8 1.6s ease-in-out infinite alternate;
}

@keyframes po-uv8 {
  to {
    opacity: 0.85;
  }
}

.ruleaza .po-val9 {
  animation: po-val9 2.4s linear infinite;
}

@keyframes po-val9 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .po-flux10 {
  animation: po-flux10 2.2s linear infinite;
}

@keyframes po-flux10 {
  to {
    transform: translate(77px, 0);
  }
}

.ruleaza .po-flux11 {
  animation: po-flux11 4.24s linear infinite;
}

@keyframes po-flux11 {
  0% {
    transform: translate(0, 0);
  }

  42.76% {
    transform: translate(0, -127px);
  }

  83.16% {
    transform: translate(120px, -127px);
  }

  100% {
    transform: translate(120px, -77px);
  }
}

.ruleaza .po-flux12 {
  animation: po-flux12 3s linear infinite;
}

@keyframes po-flux12 {
  0% {
    transform: translate(0, 0);
  }

  19.05% {
    transform: translate(40px, 0);
  }

  76.19% {
    transform: translate(40px, -120px);
  }

  100% {
    transform: translate(90px, -120px);
  }
}

.ruleaza .po-flux13 {
  animation: po-flux13 2.2s linear infinite;
}

@keyframes po-flux13 {
  0% {
    transform: translate(0, 0);
  }

  42.11% {
    transform: translate(40px, 0);
  }

  47.37% {
    transform: translate(40px, 5px);
  }

  100% {
    transform: translate(90px, 5px);
  }
}

.ruleaza .po-flux14 {
  animation: po-flux14 2.79s linear infinite;
}

@keyframes po-flux14 {
  0% {
    transform: translate(0, 0);
  }

  25.64% {
    transform: translate(50px, 0);
  }

  56.41% {
    transform: translate(50px, -60px);
  }

  94.87% {
    transform: translate(125px, -60px);
  }

  100% {
    transform: translate(125px, -50px);
  }
}

.ruleaza .po-flux15 {
  animation: po-flux15 4s linear infinite;
}

@keyframes po-flux15 {
  0% {
    transform: translate(0, 0);
  }

  7.14% {
    transform: translate(0, 20px);
  }

  32.14% {
    transform: translate(70px, 20px);
  }

  94.64% {
    transform: translate(70px, -155px);
  }

  100% {
    transform: translate(85px, -155px);
  }
}

.ruleaza .po-flux16 {
  animation: po-flux16 2.2s linear infinite;
}

@keyframes po-flux16 {
  0% {
    transform: translate(0, 0);
  }

  26.67% {
    transform: translate(20px, 0);
  }

  73.33% {
    transform: translate(20px, -35px);
  }

  100% {
    transform: translate(40px, -35px);
  }
}


/* ==========================================================
   Animație SVG — epurare industrială
   ========================================================== */

.ruleaza .in-val1 {
  animation: in-val1 2.4s linear infinite;
}

@keyframes in-val1 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .in-grebla2 {
  animation: in-grebla2 3s ease-in-out infinite;
}

@keyframes in-grebla2 {
  0%,
  10% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(-112px);
  }

  100% {
    transform: translateY(0);
  }
}

.ruleaza .in-bula3 {
  animation: in-bula3 2.8s ease-in infinite;
}

@keyframes in-bula3 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-110px);
    opacity: 0;
  }
}

.ruleaza .in-racleta4 {
  animation: in-racleta4 5s linear infinite;
}

@keyframes in-racleta4 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateX(246px);
    opacity: 0;
  }
}

.ruleaza .in-val5 {
  animation: in-val5 2.4s linear infinite;
}

@keyframes in-val5 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .in-bula6 {
  animation: in-bula6 2.8s ease-in infinite;
}

@keyframes in-bula6 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-140px);
    opacity: 0;
  }
}

.ruleaza .in-placi7 {
  animation: in-placi7 4s ease-in-out infinite alternate;
}

@keyframes in-placi7 {
  to {
    transform: translateX(-6px) scaleX(0.96);
  }
}

.ruleaza .in-flux8 {
  animation: in-flux8 2.57s linear infinite;
}

@keyframes in-flux8 {
  0% {
    transform: translate(0, 0);
  }

  22.22% {
    transform: translate(40px, 0);
  }

  72.22% {
    transform: translate(40px, -90px);
  }

  100% {
    transform: translate(90px, -90px);
  }
}

.ruleaza .in-flux9 {
  animation: in-flux9 2.2s linear infinite;
}

@keyframes in-flux9 {
  0% {
    transform: translate(0, 0);
  }

  30.77% {
    transform: translate(40px, 0);
  }

  61.54% {
    transform: translate(40px, -40px);
  }

  100% {
    transform: translate(90px, -40px);
  }
}

.ruleaza .in-flux10 {
  animation: in-flux10 2.79s linear infinite;
}

@keyframes in-flux10 {
  0% {
    transform: translate(0, 0);
  }

  17.95% {
    transform: translate(35px, 0);
  }

  74.36% {
    transform: translate(35px, -110px);
  }

  100% {
    transform: translate(85px, -110px);
  }
}

.ruleaza .in-flux11 {
  animation: in-flux11 3.69s linear infinite;
}

@keyframes in-flux11 {
  0% {
    transform: translate(0, 0);
  }

  38.76% {
    transform: translate(100px, 0);
  }

  80.62% {
    transform: translate(100px, 108px);
  }

  100% {
    transform: translate(150px, 108px);
  }
}

.ruleaza .in-flux12 {
  animation: in-flux12 3.84s linear infinite;
}

@keyframes in-flux12 {
  0% {
    transform: translate(0, 0);
  }

  14.87% {
    transform: translate(40px, 0);
  }

  85.13% {
    transform: translate(40px, 189px);
  }

  100% {
    transform: translate(80px, 189px);
  }
}


/* ==========================================================
   Animație SVG — apă pentru procese industriale
   ========================================================== */

.ruleaza .tr-val1 {
  animation: tr-val1 2.4s linear infinite;
}

@keyframes tr-val1 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .tr-rot2 {
  animation: tr-rot2 1.2s linear infinite;
}

@keyframes tr-rot2 {
  to {
    transform: rotate(360deg);
  }
}

.ruleaza .tr-val3 {
  animation: tr-val3 2.4s linear infinite;
}

@keyframes tr-val3 {
  to {
    transform: translateX(24px);
  }
}

.ruleaza .tr-flux4 {
  animation: tr-flux4 5.03s linear infinite;
}

@keyframes tr-flux4 {
  0% {
    transform: translate(0, 0);
  }

  50.28% {
    transform: translate(0, -177px);
  }

  94.32% {
    transform: translate(155px, -177px);
  }

  100% {
    transform: translate(155px, -157px);
  }
}

.ruleaza .tr-flux5 {
  animation: tr-flux5 6s linear infinite;
}

@keyframes tr-flux5 {
  0% {
    transform: translate(0, 0);
  }

  4.76% {
    transform: translate(0, 20px);
  }

  22.62% {
    transform: translate(75px, 20px);
  }

  79.76% {
    transform: translate(75px, -220px);
  }

  97.62% {
    transform: translate(150px, -220px);
  }

  100% {
    transform: translate(150px, -210px);
  }
}

.ruleaza .tr-flux6 {
  animation: tr-flux6 6s linear infinite;
}

@keyframes tr-flux6 {
  0% {
    transform: translate(0, 0);
  }

  4.76% {
    transform: translate(0, 20px);
  }

  22.62% {
    transform: translate(75px, 20px);
  }

  79.76% {
    transform: translate(75px, -220px);
  }

  97.62% {
    transform: translate(150px, -220px);
  }

  100% {
    transform: translate(150px, -210px);
  }
}

.ruleaza .tr-flux7 {
  animation: tr-flux7 5.76s linear infinite;
}

@keyframes tr-flux7 {
  0% {
    transform: translate(0, 0);
  }

  7.44% {
    transform: translate(0, 30px);
  }

  45.91% {
    transform: translate(155px, 30px);
  }

  92.56% {
    transform: translate(155px, -158px);
  }

  100% {
    transform: translate(185px, -158px);
  }
}

.ruleaza .tr-flux8 {
  animation: tr-flux8 2.2s linear infinite;
}

@keyframes tr-flux8 {
  0% {
    transform: translate(0, 0);
  }

  45.45% {
    transform: translate(60px, 0);
  }

  62.12% {
    transform: translate(60px, -22px);
  }

  100% {
    transform: translate(110px, -22px);
  }
}


/* ==========================================================
   Animație SVG — fluxul lucrărilor
   ========================================================== */

.ruleaza .v1-bula1 {
  animation: v1-bula1 2.8s ease-in infinite;
}

@keyframes v1-bula1 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}

.ruleaza .v1-sed2 {
  animation: v1-sed2 3.6s ease-in infinite;
}

@keyframes v1-sed2 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  15% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(40px);
    opacity: 0.2;
  }
}

.ruleaza .v2-trasa1 {
  animation: v2-trasa1 4s ease-out infinite;
  animation-delay: 0s;
}

.ruleaza .v2-trasa2 {
  animation: v2-trasa2 4s ease-out infinite;
  animation-delay: 0.35s;
}

.ruleaza .v2-trasa3 {
  animation: v2-trasa3 4s ease-out infinite;
  animation-delay: 0.7s;
}

.ruleaza .v2-trasa4 {
  animation: v2-trasa4 4s ease-out infinite;
  animation-delay: 1.05s;
}

.ruleaza .v2-trasa5 {
  animation: v2-trasa5 4s ease-out infinite;
  animation-delay: 1.4s;
}

.ruleaza .v2-trasa6 {
  animation: v2-trasa6 4s ease-out infinite;
  animation-delay: 1.75s;
}

@keyframes v2-trasa1 {
  0% {
    transform: scaleX(0);
  }

  40%,
  90% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@keyframes v2-trasa2 {
  0% {
    transform: scaleX(0);
  }

  40%,
  90% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@keyframes v2-trasa3 {
  0% {
    transform: scaleX(0);
  }

  40%,
  90% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@keyframes v2-trasa4 {
  0% {
    transform: scaleX(0);
  }

  40%,
  90% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@keyframes v2-trasa5 {
  0% {
    transform: scaleX(0);
  }

  40%,
  90% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@keyframes v2-trasa6 {
  0% {
    transform: scaleX(0);
  }

  40%,
  90% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

.ruleaza .v3-scanteie1 {
  animation: v3-scanteie1 0.7s steps(2) infinite;
}

@keyframes v3-scanteie1 {
  50% {
    opacity: 0;
  }
}

.ruleaza .v4-camion1 {
  animation: v4-camion1 3s ease-in-out infinite alternate;
}

@keyframes v4-camion1 {
  from {
    transform: translateX(-10px);
  }

  to {
    transform: translateX(10px);
  }
}

.ruleaza .v5-led1,
.ruleaza .v5-led2,
.ruleaza .v5-led3,
.ruleaza .v5-led4 {
  animation: v5-led 1.6s ease-in-out infinite alternate;
}

@keyframes v5-led {
  from {
    opacity: 0.25;
  }

  to {
    opacity: 1;
  }
}

.ruleaza .v6-cheie1 {
  animation: v6-cheie1 2.4s ease-in-out infinite alternate;
}

@keyframes v6-cheie1 {
  from {
    transform: rotate(-14deg);
  }

  to {
    transform: rotate(10deg);
  }
}

.ruleaza .v6-flux2 {
  animation: v6-flux2 2.86s linear infinite;
}

@keyframes v6-flux2 {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(200px, 0);
  }
}


/* ==========================================================
   Planșa de fundal
   ========================================================== */

.sf-cvw-blueprint {
  background-color: var(--cvw-blueprint-paper);
  background-image:
    linear-gradient(
      var(--cvw-blueprint-line) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--cvw-blueprint-line) 1px,
      transparent 1px
    );
  background-size: 32px 32px;
}


/* ==========================================================
   Hero cu schiță
   ========================================================== */

.sf-cvw-sketch-hero .sf-container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px;
  align-items: center;
  padding-block: 56px 40px;
}

.sf-cvw-sketch-hero h1 {
  max-width: 16ch;
  margin: 16px 0 18px;
  font-size: clamp(36px, 4.6vw, 60px);
}

.sf-cvw-sketch-hero h1 em {
  color: var(--cvw-red-dark);
  font-style: normal;
}

.sf-cvw-sketch-hero .sf-cvw-lead {
  max-width: 48ch;
  color: var(--cvw-text-2);
  font-size: clamp(17px, 1.5vw, 19px);
}

.sf-cvw-sketch-hero .sf-cvw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.sf-cvw-mini-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 800;
}

.sf-cvw-mini-steps span {
  display: inline-flex;
  align-items: center;
}

.sf-cvw-mini-steps span + span::before {
  content: "";
  width: 22px;
  height: 2px;
  margin: 0 10px;
  background: var(--cvw-red);
}

.sf-cvw-sketch-hero .sf-cvw-sketch-frame {
  padding: 8px;
  border: 1px solid var(--cvw-blueprint-line);
  border-radius: var(--cvw-radius);
  background: #fbfaf7;
}

.sf-cvw-sketch-hero .schita text.lbl {
  font-size: 19px;
}

.sf-cvw-sketch-hero .schita text.sub {
  font-size: 15px;
}


/* ==========================================================
   Procese
   ========================================================== */

.sf-cvw-processes .sf-cvw-tabs {
  margin-bottom: 0;
  border-bottom: 0;
}

.sf-cvw-processes .sf-cvw-tabs button {
  display: grid;
  gap: 2px;
  padding: 16px 20px 14px;
  text-align: left;
}

.sf-cvw-processes .sf-cvw-tabs button small {
  color: var(--cvw-text-2);
  font-size: 13px;
  font-weight: 600;
}

.sf-cvw-processes [role="tabpanel"]:focus,
.sf-cvw-processes [role="tabpanel"]:focus-visible {
  outline: 0;
  box-shadow: none;
}

.sf-cvw-diagram {
  padding: 12px 12px 4px;
  border: 1px solid var(--cvw-blueprint-line);
  border-radius:
    0
    var(--cvw-radius)
    var(--cvw-radius)
    var(--cvw-radius);
  background: #fbfaf7;
}

.sf-cvw-diagram-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sf-cvw-diagram-scroll .schita {
  min-width: 900px;
}

.sf-cvw-swipe-hint {
  display: none;
  margin: 10px 4px 0;
  color: var(--cvw-text-2);
  font-size: 14px;
}

.sf-cvw-process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
  counter-reset: cvw-process-step;
}

.sf-cvw-process-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
}

.sf-cvw-process-steps li::before {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--cvw-red);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  counter-increment: cvw-process-step;
  content: counter(cvw-process-step);
}

.sf-cvw-process-steps b {
  display: block;
}

.sf-cvw-process-steps span {
  color: var(--cvw-text-2);
  font-size: 15.5px;
  line-height: 1.5;
}

.sf-cvw-process-product {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cvw-line);
}

.sf-cvw-process-product .sf-cvw-brand img {
  height: 20px;
}


/* ==========================================================
   Fluxul lucrărilor
   ========================================================== */

.sf-cvw-workflow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-cvw-workflow li {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-cvw-workflow .sf-cvw-vignette {
  border: 1px solid var(--cvw-blueprint-line);
  border-radius: var(--cvw-radius);
  background: #fbfaf7;
}

.sf-cvw-workflow .sf-cvw-step-label {
  color: var(--cvw-red-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.sf-cvw-workflow h3 {
  font-size: 18px;
}

.sf-cvw-workflow p {
  color: var(--cvw-text-2);
  font-size: 15px;
  line-height: 1.5;
}

.sf-cvw-rail {
  position: relative;
  height: 4px;
  margin: 0 0 26px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--cvw-blueprint-line);
}

.sf-cvw-rail i {
  position: absolute;
  inset: 0;
  display: block;
  transform: translateX(-100%);
}

.sf-cvw-rail i::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--cvw-red);
}

.is-cvw-running .sf-cvw-rail i,
.sf-cvw-rail.is-cvw-running i {
  animation: cvw-rail 7s linear infinite;
}

@keyframes cvw-rail {
  to {
    transform: translateX(0);
  }
}


/* ==========================================================
   Din desen în teren
   ========================================================== */

.sf-cvw-three-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sf-cvw-three-photos figure {
  display: grid;
  gap: 10px;
  align-content: start;
  margin: 0;
}

.sf-cvw-three-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--cvw-line);
  border-radius: var(--cvw-radius);
  background: #fff;
}

.sf-cvw-three-photos img.sf-cvw-drawing {
  padding: 6px;
  object-fit: contain;
}

.sf-cvw-three-photos figcaption {
  color: var(--cvw-text-2);
  font-size: 15px;
}

.sf-cvw-three-photos figcaption b {
  display: block;
  color: var(--cvw-text);
  font-size: 16px;
}

.sf-cvw-real-photo {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 0 auto;
}

.sf-cvw-real-photo img {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--cvw-line);
  border-radius: 4px;
}

.sf-cvw-real-photo figcaption {
  color: var(--cvw-text-2);
  font-size: 13px;
  line-height: 1.35;
}

.sf-cvw-real-photo b {
  display: block;
  color: var(--cvw-text);
  font-size: 14px;
}


/* ==========================================================
   Banda cu filmul
   ========================================================== */

.sf-cvw-film-band {
  position: relative;
  overflow: hidden;
  background: var(--cvw-charcoal);
  color: #fff;
}

.sf-cvw-film-band video,
.sf-cvw-film-band .sf-cvw-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.sf-cvw-film-band .sf-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: end;
  justify-content: space-between;
  padding-block: 96px;
}

.sf-cvw-film-band h2 {
  max-width: 20ch;
  font-size: clamp(28px, 3.4vw, 44px);
}

.sf-cvw-film-band p {
  max-width: 48ch;
  margin-top: 12px;
  color: var(--cvw-on-dark);
}


/* ==========================================================
   Echipamente pe aplicații
   ========================================================== */

.sf-cvw-product-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.sf-cvw-product-columns > div {
  padding: 22px;
  border: 1px solid var(--cvw-line);
  border-radius: var(--cvw-radius);
  background: #fff;
}

.sf-cvw-product-columns h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 18px;
}

.sf-cvw-product-columns ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-cvw-product-columns a {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid var(--cvw-line);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
}

.sf-cvw-product-columns a:hover {
  color: var(--cvw-red-dark);
}

.sf-cvw-product-columns a img {
  flex: none;
  width: auto;
  height: 15px;
  margin-top: 4px;
  opacity: 0.85;
}


/* ==========================================================
   Grup compact
   ========================================================== */

.sf-cvw-group-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--cvw-line);
  border-radius: var(--cvw-radius);
  background: var(--cvw-line);
}

.sf-cvw-group-strip > a {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 24px;
  background: #fff;
  text-decoration: none;
}

.sf-cvw-group-strip img {
  flex: none;
  width: auto;
  height: 44px;
}

.sf-cvw-group-strip b {
  display: block;
}

.sf-cvw-group-strip span {
  color: var(--cvw-text-2);
  font-size: 15px;
}


/* ==========================================================
   Tabletă
   ========================================================== */

@media (max-width: 1080px) {

  .sf-cvw-sketch-hero .sf-container {
    grid-template-columns: 1fr;
  }

  .sf-cvw-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 32px;
  }

  .sf-cvw-product-columns {
    grid-template-columns: 1fr 1fr;
  }

  .sf-cvw-process-steps {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================================
   Mobil
   ========================================================== */

@media (max-width: 760px) {

  .sf-cvw-sketch-hero .sf-container {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 36px 24px;
  }

  .sf-cvw-swipe-hint {
    display: block;
  }

  .sf-cvw-process-steps,
  .sf-cvw-product-columns,
  .sf-cvw-group-strip,
  .sf-cvw-three-photos {
    grid-template-columns: 1fr;
  }

  .sf-cvw-workflow {
    grid-template-columns: 1fr 1fr;
    gap: 22px 14px;
  }

  .sf-cvw-rail {
    display: none;
  }

  .sf-cvw-processes .sf-cvw-tabs button {
    padding: 12px;
  }

  .sf-cvw-processes .sf-cvw-tabs button small {
    display: none;
  }

  .sf-cvw-film-band .sf-container {
    padding-block: 64px;
  }

  .sf-cvw-real-photo {
    margin-left: 0;
  }
}


/* ==========================================================
   Reducerea mișcării
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .schita .anim {
    animation: none !important;
  }

  .sf-cvw-rail i {
    animation: none !important;
    transform: none;
  }
}

/* Reset complet pentru stilurile de focus aplicate taburilor de WordPress/browser */
.sf-cvw-processes .sf-cvw-tabs button {
  border: 0 !important;
  border-bottom: 4px solid transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.sf-cvw-processes .sf-cvw-tabs button:hover,
.sf-cvw-processes .sf-cvw-tabs button:focus,
.sf-cvw-processes .sf-cvw-tabs button:focus-visible,
.sf-cvw-processes .sf-cvw-tabs button:active {
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.sf-cvw-processes .sf-cvw-tabs button[aria-selected="true"] {
  border-bottom-color: var(--cvw-red) !important;
  color: var(--cvw-text);
}

/* ---------- tab-uri procese: scroll orizontal ---------- */

.sf-cvw-processes [data-cvw-tabs] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sf-cvw-processes .sf-cvw-tabs {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  gap: 0;

  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 0 7px;

  overflow-x: auto !important;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin !important;
  scrollbar-color: var(--cvw-red) var(--cvw-line);

  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/*
 * Tab-urile nu se comprimă.
 * Dacă nu încap, containerul devine scrollabil.
 */
.sf-cvw-processes .sf-cvw-tabs button {
  display: grid;
  flex: 0 0 320px !important;

  width: 320px;
  min-width: 320px;
  max-width: 320px;
  min-height: 76px;

  box-sizing: border-box;
  align-content: center;

  margin: 0;
  padding: 16px 20px 14px;

  white-space: normal !important;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;

  line-height: 1.25;
  text-align: left;

  scroll-snap-align: start;
}

/* Titlul tab-ului */
.sf-cvw-processes .sf-cvw-tabs button > span,
.sf-cvw-processes .sf-cvw-tabs button > strong {
  display: block;
  max-width: 100%;
  white-space: normal;
}

/* Subtitlul tab-ului */
.sf-cvw-processes .sf-cvw-tabs button small {
  display: block;
  max-width: 100%;
  margin-top: 2px;

  color: var(--cvw-text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
}

/* Scrollbar */
.sf-cvw-processes .sf-cvw-tabs::-webkit-scrollbar {
  display: block;
  height: 5px;
}

.sf-cvw-processes .sf-cvw-tabs::-webkit-scrollbar-track {
  background: var(--cvw-line);
  border-radius: 999px;
}

.sf-cvw-processes .sf-cvw-tabs::-webkit-scrollbar-thumb {
  background: var(--cvw-red);
  border-radius: 999px;
}

/* ---------- mobil ---------- */

@media (max-width: 760px) {

  .sf-cvw-processes .sf-cvw-tabs button {
    flex-basis: 270px !important;

    width: 270px;
    min-width: 270px;
    max-width: 270px;
    min-height: 68px;

    padding: 12px 16px;
  }

  .sf-cvw-processes .sf-cvw-tabs button small {
    display: block;
  }
}

/* ==========================================================
   Corecție finală — tab-uri procese responsive
   ========================================================== */

.sf-cvw-processes [data-cvw-tabs] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sf-cvw-processes .sf-cvw-tabs {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  gap: 0;

  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 0 7px;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin !important;
  scrollbar-color: var(--cvw-red) var(--cvw-line);

  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/*
 * Fiecare tab își ia lățimea după conținut.
 * Titlurile nu se rup pe două rânduri.
 */
.sf-cvw-processes .sf-cvw-tabs button {
  display: grid !important;
  flex: 0 0 auto !important;

  width: max-content !important;
  min-width: 290px !important;
  max-width: none !important;
  min-height: 76px;

  box-sizing: border-box;
  align-content: center;
  gap: 2px;

  margin: 0;
  padding: 16px 28px 14px;

  overflow: visible !important;
  border: 0 !important;
  border-bottom: 4px solid transparent !important;
  outline: 0 !important;
  background: transparent;
  box-shadow: none !important;

  color: inherit;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap !important;

  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}

.sf-cvw-processes .sf-cvw-tabs button:hover,
.sf-cvw-processes .sf-cvw-tabs button:focus,
.sf-cvw-processes .sf-cvw-tabs button:focus-visible,
.sf-cvw-processes .sf-cvw-tabs button:active {
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.sf-cvw-processes .sf-cvw-tabs button[aria-selected="true"] {
  border-bottom-color: var(--cvw-red) !important;
  color: var(--cvw-text);
}

/* Titlul tab-ului */
.sf-cvw-processes .sf-cvw-tabs button > span,
.sf-cvw-processes .sf-cvw-tabs button > strong {
  display: block;
  width: max-content;
  max-width: none;
  white-space: nowrap !important;
}

/* Subtitlul tab-ului */
.sf-cvw-processes .sf-cvw-tabs button small {
  display: block !important;
  width: max-content;
  max-width: none;
  margin-top: 2px;

  color: var(--cvw-text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap !important;
}

/* Scrollbar tab-uri */
.sf-cvw-processes .sf-cvw-tabs::-webkit-scrollbar {
  display: block;
  height: 5px;
}

.sf-cvw-processes .sf-cvw-tabs::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--cvw-line);
}

.sf-cvw-processes .sf-cvw-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--cvw-red);
}

/* Panourile nu primesc outline la schimbarea tab-ului */
.sf-cvw-processes [role="tabpanel"]:focus,
.sf-cvw-processes [role="tabpanel"]:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   Corecție tab-uri — mobil
   ========================================================== */

@media (max-width: 760px) {

  .sf-cvw-processes .sf-cvw-tabs button {
    flex: 0 0 auto !important;

    width: max-content !important;
    min-width: 260px !important;
    max-width: none !important;
    min-height: 68px;

    padding: 12px 20px;
    white-space: nowrap !important;
  }

  .sf-cvw-processes .sf-cvw-tabs button > span,
  .sf-cvw-processes .sf-cvw-tabs button > strong,
  .sf-cvw-processes .sf-cvw-tabs button small {
    width: max-content;
    max-width: none;
    white-space: nowrap !important;
  }
}