/* Homepage additions: service grid trim, maintenance band, checklist band,
   "Cum lucrăm cu tine". Tokens taken from the live Elementor build:
   Montserrat, brand #fd8649, ink #27272d, body 16/22.4. Everything here is
   prefixed `ect-` so it never collides with Elementor's ID-bound rules. */

/* The mirror only painted the first card's icon in brand colour because the
   other five were hidden. Now that all six show, they match. */
.elementor-3381 .elementor-element-2cb10d04 .elementor-icon {
  color: #fd8649;
  fill: #fd8649;
}

/* ─── maintenance band + "all services" link ──────────────────────────────── */

.elementor-3381 .ect-band,
.elementor-3381 .ect-allservices {
  flex: 0 0 100%;
  width: 100%;
  font-family: Montserrat, system-ui, sans-serif;
}

.elementor-3381 .ect-band {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 20px 0 0;
  padding: 26px 34px;
  border-radius: 15px 15px 15px 70px;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
  color: #27272d;
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.elementor-3381 .ect-band:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 20px 0 rgba(253, 134, 73, 0.69);
}

.elementor-3381 .ect-band__icon {
  flex: 0 0 auto;
  display: block;
  width: 52px;
  color: #fd8649;
  fill: #fd8649;
}

.elementor-3381 .ect-band__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.elementor-3381 .ect-band__text {
  flex: 1 1 auto;
  display: block;
}

.elementor-3381 .ect-band__title {
  display: block;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
}

.elementor-3381 .ect-band__desc {
  display: block;
  font-size: 16px;
  line-height: 22.4px;
  font-weight: 300;
}

.elementor-3381 .ect-band__cta {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  color: #fd8649;
  white-space: nowrap;
}

.elementor-3381 .ect-band__cta::after {
  content: ' →';
}

/* The theme's floating back-to-top button sits over the bottom-right corner of
   the viewport; keep the band's CTA out from under it on narrower screens. */
@media (min-width: 768px) and (max-width: 1200px) {
  .elementor-3381 .ect-band {
    padding-right: 90px;
  }
}

.elementor-3381 .ect-allservices {
  margin: 22px 0 0;
  text-align: center;
  font-size: 16px;
}

.elementor-3381 .ect-allservices a {
  color: #27272d;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(253, 134, 73, 0.6);
}

.elementor-3381 .ect-allservices a:hover {
  color: #fd8649;
}

@media (max-width: 767px) {
  .elementor-3381 .ect-band {
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px;
    border-radius: 15px 15px 15px 40px;
  }

  .elementor-3381 .ect-band__text {
    flex: 1 1 100%;
  }
}

/* ─── "Cum lucrăm cu tine" ────────────────────────────────────────────────── */

/* Subset to ASCII + Romanian only; the family is used for one decorative line.
   Source: Google Fonts, SIL Open Font License (see fonts/caveat-OFL.txt). */
@font-face {
  font-family: 'Caveat ECT';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/caveat-600.woff2') format('woff2');
}

/* No flat fill of its own. Every other block on the home page sits on white
   with one of the theme's blob sheets behind it, painted on an Elementor
   container's ::before; same trick here, by hand. */
.ect-process {
  position: relative;
  font-family: Montserrat, system-ui, sans-serif;
  color: #27272d;
  padding: 70px 0 84px;
}

/* BG-home-new4 carries the only real turquoise the theme owns (#e6f9fe; every
   other sheet washes out to #f2fcfe) and pairs it with lavender on the right,
   which is the arrangement this section wants. Sized rather than covered: the
   section is 1270px tall against a sheet cut for an 800px band, so cover would
   blow the blobs up to twice the size they are drawn at everywhere else. The
   width here keeps the turquoise at ~525px, same as it renders further up the
   page. Already loaded up there too, so it costs no request. */
.ect-process::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../uploads/2024/02/BG-home-new4.png');
  background-position: left -60px center;
  background-size: 1750px auto;
  background-repeat: no-repeat;
  pointer-events: none;
}

.ect-process__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
}

.ect-process__head {
  text-align: center;
}

.ect-process__eyebrow {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 22.4px;
  font-weight: 300;
  color: #fd8649;
}

/* The theme sets every section heading to 45/500 capitalize on desktop, 32 on
   tablet and 7.5vw below that. Same ladder here so this heading does not read
   as a different site. */
.ect-process__title {
  margin: 0;
  font-size: 7.5vw;
  line-height: 1.2;
  font-weight: 500;
  text-transform: capitalize;
  color: #27272d;
}

.ect-process__hl {
  display: inline-block;
  padding: 0.02em 0.16em 0.08em;
  border-radius: 15px;
  background: #fd8649;
}

.ect-process__lead {
  max-width: 640px;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}

.ect-process__chips {
  display: grid;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ect-process__chips li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
  font-size: 15px;
  line-height: 21px;
  font-weight: 300;
}

.ect-process__chips li::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fd8649;
}

/* Hand-drawn aside pointing at the chart. Decorative, so it only shows where
   there is room for it beside the centred header. */
.ect-process__scribble {
  display: none;
}

.ect-process__note {
  margin: 6px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 21px;
  font-weight: 300;
  color: rgba(39, 39, 45, 0.75);
}

/* ─── the chart ───────────────────────────────────────────────────────────── */

.ect-gantt {
  margin: 44px 0 24px;
}

.ect-gantt__phases {
  display: none;
}

.ect-gantt__steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ect-step;
}

/* Solid brand orange: the bars are the subject of the section, so they carry
   the colour instead of borrowing it from a title. No hairline any more, the
   fill separates them from the page on its own. */
.ect-step {
  position: relative;
  counter-increment: ect-step;
  padding: 19px 53px 21px 23px;
  border-radius: 15px 15px 15px 40px;
  background: #fd8649;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
}

.ect-step::after {
  content: counter(ect-step);
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #fd8649;
  font-size: 12px;
  font-weight: 600;
}

.ect-step__title {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: #fff;
}

/* 400 rather than the 300 used elsewhere: white on orange is a low-contrast
   pairing and hairline strokes are the first thing to disappear in it. */
.ect-step__body {
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  color: #fff;
}

@media (min-width: 600px) {
  .ect-process__chips {
    grid-template-columns: repeat(2, auto);
  }
}

@media (min-width: 768px) {
  .ect-process__title {
    font-size: 32px;
    line-height: 38.4px;
  }

  .ect-gantt__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 16px;
  }
}

/* Below this the five phase columns get too narrow to read, so the chart falls
   back to plain cards and the phase header disappears with it. 1025 is the
   theme's own desktop breakpoint. */
@media (min-width: 1025px) {
  .ect-process__title {
    font-size: 45px;
    line-height: 54px;
  }

  .ect-process__lead {
    font-size: 18px;
    line-height: 27px;
  }

  .ect-process__chips li {
    font-size: 16px;
    line-height: 22.4px;
  }

  .ect-gantt__phases {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ect-gantt__phases li {
    margin-right: 6px;
    padding: 9px 8px;
    border-radius: 15px;
    background: #fff1e7;
    text-align: center;
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
  }

  /* Column gap stays at 0 so the lane rules below land exactly on the 20%
     boundaries; the cards keep their distance with margin-right instead. */
  .ect-gantt__steps {
    position: relative;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: min-content;
    gap: 18px 0;
    padding: 18px 0 48px;
  }

  .ect-gantt__steps::before {
    content: '';
    position: absolute;
    inset: 0;
    border-right: 1px solid rgba(39, 39, 45, 0.1);
    background-image: repeating-linear-gradient(
      to right,
      rgba(39, 39, 45, 0.1) 0 1px,
      transparent 1px 20%
    );
    pointer-events: none;
  }

  .ect-step {
    z-index: 1;
    margin-right: 6px;
    padding: 17px 47px 19px 21px;
  }

  /* Gantt choreography: each bar starts where the previous phase hands over.
     Adding or removing a step means re-cutting these six rules. */
  .ect-step:nth-child(1) {
    grid-row: 1;
    grid-column: 1 / span 1;
  }

  .ect-step:nth-child(2) {
    grid-row: 2;
    grid-column: 2 / span 2;
    /* Overlaps step 1 the way parallel tasks do on a real chart. Safe only
       because the two never share a column. Grid still keeps the full row gap
       below, so step 3 cannot ride up into step 2. */
    margin-top: -68px;
  }

  .ect-step:nth-child(3) {
    grid-row: 3;
    grid-column: 3 / span 1;
  }

  .ect-step:nth-child(4) {
    grid-row: 3;
    grid-column: 4 / span 1;
  }

  .ect-step:nth-child(5) {
    grid-row: 4;
    grid-column: 4 / span 1;
  }

  .ect-step:nth-child(6) {
    grid-row: 4;
    grid-column: 5 / span 1;
  }
}

@media (min-width: 1100px) {
  .ect-process__scribble {
    display: block;
    position: absolute;
    top: 210px;
    right: 20px;
    width: 168px;
    margin: 0;
    font-family: 'Caveat ECT', 'Segoe Script', cursive;
    font-size: 23px;
    line-height: 1.15;
    font-weight: 600;
    color: #27272d;
    transform: rotate(-7deg);
  }

  .ect-process__arrow {
    display: block;
    width: 78px;
    height: auto;
    margin: 2px 0 0 10px;
  }
}

@media (max-width: 767px) {
  .ect-process {
    padding: 50px 0 60px;
  }

  .ect-gantt {
    margin-top: 36px;
  }
}

/* ─── checklist band ──────────────────────────────────────────────────────── */
/* ProjectOne composition: brand-orange card, white tasks and cream speech bubbles. */

.ect-checklist {
  position: relative;
  padding: 48px 0 64px;
  background: #fff;
  color: #27272d;
  font-family: Montserrat, system-ui, sans-serif;
}

.ect-checklist__shell {
  width: calc(100% - 128px);
  max-width: 1312px;
  margin: 0 auto;
}

.ect-checklist__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
  min-height: 480px;
  padding: 0 32px 0 64px;
  overflow: hidden;
  border: 1px solid #fd8649;
  border-radius: 24px;
  background: #fd8649;
}

.ect-checklist__board {
  min-width: 0;
  height: 480px;
}

.ect-checklist__stage {
  height: 100%;
  overflow: hidden;
}

.ect-checklist__track {
  display: flow-root;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: ect-checklist-scroll 42s linear infinite;
}

.ect-checklist__track li {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  margin: 0 0 2px;
  padding: 12px 16px;
  border: 1px solid #f5ddce;
  border-radius: 5px;
  background: #fff;
  color: #27272d;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}

.ect-checklist__track li::before {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1px solid #776b64;
  border-radius: 2px;
}

.ect-checklist__track li::after {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 4px;
  margin-left: auto;
  background-image: radial-gradient(circle, #776b64 1.4px, transparent 1.6px);
  background-size: 4.6px 4px;
  background-repeat: repeat-x;
}

.ect-checklist__copy {
  position: relative;
  min-width: 0;
  padding: 96px 0;
}

.ect-checklist__eyebrow {
  margin: 0 0 20px;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

.ect-checklist__title {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-transform: none;
  text-wrap: pretty;
}

.ect-checklist__hl {
  color: inherit;
}

.ect-checklist__quotes {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.ect-checklist__quotes li {
  position: absolute;
  width: max-content;
  max-width: 290px;
  margin: 0;
  padding: 4px 11px;
  border-radius: 24px;
  background: #fff5ed;
  color: #27272d;
  filter: drop-shadow(0 3px 6px rgba(100, 48, 25, 0.16));
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  opacity: 0;
  transform-origin: 22px 100%;
  animation: ect-bubble 12s ease-in-out infinite both;
}

.ect-checklist__quotes li::after {
  content: '';
  position: absolute;
  left: 15px;
  bottom: -6px;
  width: 11px;
  height: 9px;
  background: #fff5ed;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ect-checklist__quotes li:nth-child(1) {
  top: 9%;
  left: 17%;
  --r: -8deg;
  animation-delay: -0.8s;
}

.ect-checklist__quotes li:nth-child(2) {
  right: 11%;
  bottom: 9%;
  --r: -5deg;
  animation-delay: -4.8s;
}

.ect-checklist__quotes li:nth-child(3) {
  top: 44%;
  left: 7%;
  --r: 2deg;
  animation-delay: -8.8s;
}

.ect-checklist__quotes li:nth-child(4) {
  right: 3%;
  bottom: 18%;
  --r: 7deg;
  animation-delay: -10.8s;
}

.ect-checklist__quotes li:nth-child(5) {
  top: 13%;
  right: 5%;
  --r: 4deg;
  animation-delay: -2.8s;
}

.ect-checklist__quotes li:nth-child(6) {
  bottom: 22%;
  left: 22%;
  --r: -3deg;
  animation-delay: -6.8s;
}

@keyframes ect-checklist-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes ect-bubble {
  0%, 3% {
    opacity: 0;
    transform: scale(0) rotate(var(--r, 0deg));
  }
  7% {
    opacity: 1;
    transform: scale(1.08) rotate(var(--r, 0deg));
  }
  10%, 34% {
    opacity: 1;
    transform: scale(1) rotate(var(--r, 0deg));
  }
  40%, 100% {
    opacity: 0;
    transform: scale(0) rotate(var(--r, 0deg));
  }
}

@media (max-width: 1024px) {
  .ect-checklist__shell {
    width: calc(100% - 48px);
  }

  .ect-checklist__panel {
    gap: 40px;
    padding: 0 24px;
  }

  .ect-checklist__title {
    font-size: 32px;
  }

  .ect-checklist__quotes li {
    max-width: 240px;
    font-size: 12px;
  }

  .ect-checklist__quotes li:nth-child(6) {
    left: 13%;
  }
}

@media (max-width: 767px) {
  .ect-checklist {
    padding: 40px 0 48px;
  }

  .ect-checklist__shell {
    width: 100%;
    max-width: none;
  }

  .ect-checklist__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 28px 18px 0;
  }

  .ect-checklist__copy {
    grid-row: 1;
    padding: 0;
  }

  .ect-checklist__eyebrow {
    margin-bottom: 12px;
    font-size: 15px;
  }

  .ect-checklist__title {
    font-size: clamp(28px, 7.7vw, 36px);
    line-height: 1.2;
  }

  .ect-checklist__board {
    grid-area: 2 / 1;
    height: 504px;
  }

  /* Share the list's grid cell so bubbles never cover the mobile heading. */
  .ect-checklist__quotes {
    position: relative;
    grid-area: 2 / 1;
    align-self: stretch;
    inset: auto;
  }

  .ect-checklist__quotes li {
    max-width: min(260px, 85%);
    font-size: 12px;
  }

  .ect-checklist__quotes li:nth-child(1) {
    top: 12%;
    left: auto;
    right: 1%;
  }

  .ect-checklist__quotes li:nth-child(2) {
    right: 3%;
    bottom: 17%;
  }

  .ect-checklist__quotes li:nth-child(3) {
    top: 42%;
    left: 3%;
  }

  .ect-checklist__quotes li:nth-child(4) {
    right: 4%;
    bottom: 37%;
  }

  .ect-checklist__quotes li:nth-child(5) {
    top: 29%;
    right: auto;
    left: 2%;
  }

  .ect-checklist__quotes li:nth-child(6) {
    bottom: 7%;
    left: 3%;
  }
}

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

  .ect-checklist__quotes li {
    animation: none;
    opacity: 0;
  }

  .ect-checklist__quotes li:nth-child(1),
  .ect-checklist__quotes li:nth-child(2) {
    opacity: 1;
    transform: rotate(var(--r, 0deg));
  }
}