/* Quality checks section (HTML Block "Quality checks", Elementor).
   Hooked to CSS classes set on the block's containers and widgets.
   Every rule is deliberately weaker than the selectors Elementor writes for
   its own colour / background controls, so a colour picked in Elementor
   (section background, eyebrow, title lines, numbers, text) always wins. */
.elementor .e-con.qst-checks {
  --qst-ck-accent: #c8102e;   /* red */
  --qst-ck-ink: #0a0a0a;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  background: #eeefeb;
  color: var(--qst-ck-ink);
  padding: clamp(3rem, 9vh, 6.5rem) clamp(1.25rem, 3vw, 4rem);
}
.qst-checks .elementor-widget { margin: 0; width: 100%; }

/* photos */
.elementor .e-con.qst-checks__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 0.9rem);
  width: 100%;
  padding: 0;
}
.qst-checks .qst-checks__img { overflow: hidden; background: #dcddd7; }
.qst-checks .qst-checks__img img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.qst-checks .qst-checks__img:hover img { transform: scale(1.04); }
.qst-checks .qst-checks__img .widget-image-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f4f4f0;
  background: rgba(10,10,10,0.88);
}

/* second pair of photos: each lies exactly on top of one of the first two and is uncovered from the
   bottom up while the section scrolls. checks.js writes the progress (0..1) into --qst-ck-p1 / --qst-ck-p2. */
.elementor .e-con.qst-checks__media > .qst-checks__img { grid-row: 1; }
.elementor .e-con.qst-checks__media > .qst-checks__img:nth-child(1),
.elementor .e-con.qst-checks__media > .qst-checks__img--over-1 { grid-column: 1; }
.elementor .e-con.qst-checks__media > .qst-checks__img:nth-child(2),
.elementor .e-con.qst-checks__media > .qst-checks__img--over-2 { grid-column: 2; }
.qst-checks .qst-checks__img { position: relative; }
.qst-checks .qst-checks__img--over { z-index: 1; --p: 1; }
.qst-checks .qst-checks__img--over-1 { --p: var(--qst-ck-p1, 1); }
.qst-checks .qst-checks__img--over-2 { --p: var(--qst-ck-p2, 1); }
.qst-checks.qst-checks--js .qst-checks__img--over {
  clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0);
  will-change: clip-path;
}
.qst-checks.qst-checks--js .qst-checks__img--over img {          /* the photo settles as it is uncovered */
  transform: scale(calc(1.18 - var(--p) * 0.18));
  transform-origin: 50% 100%;
  transition: none;
}
.qst-checks.qst-checks--js .qst-checks__img--over::after {       /* red edge that leads the reveal */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc((1 - var(--p)) * 100%);
  height: 3px;
  background: var(--qst-ck-accent);
  opacity: calc(var(--p) * (1 - var(--p)) * 4);
}
/* desktop: while the photos change, the section stays on screen (checks.js makes its wrapper taller) */
.elementor .e-con.qst-checks.qst-checks--pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  align-content: center;
  padding-top: 6rem;          /* room for the sticky header */
  padding-bottom: 2rem;
}
.qst-checks.qst-checks--pin .qst-checks__img img { max-height: calc(100vh - 9rem); }   /* photos never taller than the screen */
/* Elementor editor: no stacking, so all four photos can be clicked and changed */
.elementor-editor-active .elementor .e-con.qst-checks__media > .qst-checks__img--over { grid-row: 2; }

/* copy */
.elementor .e-con.qst-checks__copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
}
.qst-checks .qst-checks__eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem;
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qst-ck-ink);
}
.qst-checks .qst-checks__eyebrow .elementor-heading-title::before {
  content: "";
  width: 2.2rem;
  height: 3px;
  background: var(--qst-ck-accent);
}
.qst-checks .qst-checks__title-1 .elementor-heading-title,
.qst-checks .qst-checks__title-2 .elementor-heading-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 6.4vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.qst-checks .qst-checks__title-1 .elementor-heading-title { color: var(--qst-ck-ink); }
.qst-checks .qst-checks__title-2 .elementor-heading-title {
  display: inline-block;
  padding: 0 0.16em;
  margin-top: 0.08em;
  color: #ffffff;
  background: var(--qst-ck-accent);
}
.qst-checks .qst-checks__intro,
.qst-checks .qst-checks__intro p {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  color: rgba(10,10,10,0.68);
}
.elementor .e-con.qst-checks .qst-checks__intro { margin: 1.4rem 0 clamp(1.6rem, 4vh, 2.8rem); max-width: 34rem; }

/* the six checks */
.elementor .e-con.qst-checks__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid rgba(10,10,10,0.16);
}
.elementor .e-con.qst-checks__row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 1rem 0;
  border-top: 1px solid rgba(10,10,10,0.16);
  transition: padding-left .3s cubic-bezier(.2,.7,.2,1);
}
.elementor .e-con.qst-checks__row:hover { padding-left: 0.6rem; }
.qst-checks .qst-checks__num .elementor-heading-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--qst-ck-accent);
}
.qst-checks .qst-checks__text,
.qst-checks .qst-checks__text p {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.4;
  color: rgba(10,10,10,0.92);
}
.qst-checks .qst-checks__note,
.qst-checks .qst-checks__note p {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: rgba(10,10,10,0.5);
}

@media (max-width: 900px) {
  .elementor .e-con.qst-checks { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .qst-checks .qst-checks__img img,
  .elementor .e-con.qst-checks__row { transition: none; }
  .qst-checks .qst-checks__img:hover img { transform: none; }
  .elementor .e-con.qst-checks__row:hover { padding-left: 0; }
}