/* "Inside our facility" section (HTML Block "Inside our facility", Elementor) — dark, red accent.
   Hooked to CSS classes set on the block's containers and widgets.
   Every colour rule is deliberately weaker than the selectors Elementor writes
   for its own colour / background controls, so a colour picked in Elementor wins. */
.elementor .e-con.qst-fac {
  --qst-fa-ink: #f4f4f0;
  --qst-fa-dim: rgba(244,244,240,0.66);
  --qst-fa-line: rgba(244,244,240,0.14);
  --qst-fa-accent: #e0223f;      /* the site red, lifted a little so it reads on black */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  background-color: #0c0c0c;
  background-image: radial-gradient(60rem 30rem at 50% 0%, rgba(224,34,63,0.1), transparent 65%);
  color: var(--qst-fa-ink);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 3vw, 4rem);
}
.qst-fac .elementor-widget { margin: 0; width: 100%; }

/* head */
.elementor .e-con.qst-fac__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 5rem);
  width: 100%;
  padding: 0 0 clamp(2rem, 5vh, 3.4rem);
}
.elementor .e-con.qst-fac__headline { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; }
.qst-fac .qst-fac__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-fa-ink);
}
.qst-fac .qst-fac__eyebrow .elementor-heading-title::before { content: ""; width: 2.2rem; height: 3px; background: var(--qst-fa-accent); }
.qst-fac .qst-fac__title .elementor-heading-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 6.4vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--qst-fa-ink);
}
.qst-fac .qst-fac__mark {
  display: inline-block;
  padding: 0 0.16em;
  margin-top: 0.06em;
  line-height: 1.05;
  white-space: nowrap;
  color: #ffffff;
  background: var(--qst-fa-accent);
}
.qst-fac .qst-fac__intro,
.qst-fac .qst-fac__intro p {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  color: var(--qst-fa-dim);
}

/* the two panels */
.elementor .e-con.qst-fac__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  width: 100%;
  padding: 0;
}
.elementor .e-con.qst-fac__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: clamp(1.6rem, 2.8vw, 3rem);
  overflow: hidden;
  border: 1px solid var(--qst-fa-line);
  border-radius: 14px;
  background-color: #141414;
  background-image: linear-gradient(160deg, rgba(244,244,240,0.05), transparent 45%);
  transition: border-color .4s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.elementor .e-con.qst-fac__panel:hover { border-color: rgba(244,244,240,0.34); transform: translateY(-4px); }
.elementor .e-con.qst-fac__panel::after {            /* red sweep along the top edge (own ::after: Elementor owns ::before) */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--qst-fa-accent);
  transform: scaleX(0.14);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.elementor .e-con.qst-fac__panel:hover::after,
.elementor .e-con.qst-fac__panel.is-in::after { transform: scaleX(1); }

/* Both panels: a photo behind the figures, shown in grey tones (Workforce: inc/img/facility-workforce.webp,
   Machinery: inc/img/facility-machine.webp). It is clear on the right and fades away to nothing on the left,
   so the big figure stays on a plain panel.
   Strength: the last two alpha values of the gradient (lower = more photo). */
.elementor .e-con.qst-fac__panel--people,
.elementor .e-con.qst-fac__panel--machines {
  background-image:
    linear-gradient(90deg, #141414 0%, #141414 30%, rgba(20,20,20,0.86) 55%, rgba(20,20,20,0.62) 100%),
    var(--qst-fa-photo);
  background-size: 100% 100%, cover;
  background-position: 0 0, var(--qst-fa-photo-pos, 70% 45%);
  background-repeat: no-repeat;
  background-blend-mode: normal, luminosity;
  background-origin: border-box;   /* both layers reach under the 1px border; otherwise the bare photo shows as a bright line on the edge */
  background-clip: border-box;
}
.elementor .e-con.qst-fac__panel--people { --qst-fa-photo: url("img/facility-workforce.webp"); --qst-fa-photo-pos: 60% 50%; }
.elementor .e-con.qst-fac__panel--machines { --qst-fa-photo: url("img/facility-machine.webp"); }

.qst-fac .qst-fac__label .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qst-fa-accent);
}
.qst-fac .qst-fac__label .elementor-heading-title::after {      /* line icon, right of the label */
  content: "";
  flex: none;
  width: clamp(2.4rem, 3.4vw, 3.4rem);
  aspect-ratio: 1;
  background: currentColor;
  opacity: 0.9;
  -webkit-mask: var(--qst-fa-icon) center / contain no-repeat;
          mask: var(--qst-fa-icon) center / contain no-repeat;
}
.qst-fac .qst-fac__panel--people { --qst-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='13' r='5.5'/%3E%3Cpath d='M13 38v-4a11 11 0 0 1 22 0v4'/%3E%3Ccircle cx='9' cy='18' r='3.8'/%3E%3Cpath d='M2.5 36v-2.5A6.5 6.5 0 0 1 11 27.3'/%3E%3Ccircle cx='39' cy='18' r='3.8'/%3E%3Cpath d='M45.5 36v-2.5A6.5 6.5 0 0 0 37 27.3'/%3E%3C/svg%3E"); }
.qst-fac .qst-fac__panel--machines { --qst-fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='28' r='5'/%3E%3Cpath d='M18 15v4M18 37v4M5 28h4M27 28h4M8.8 18.8l2.8 2.8M24.4 34.4l2.8 2.8M8.8 37.2l2.8-2.8M24.4 21.6l2.8-2.8'/%3E%3Ccircle cx='18' cy='28' r='9.5'/%3E%3Ccircle cx='36' cy='12' r='3'/%3E%3Ccircle cx='36' cy='12' r='6.5'/%3E%3Cpath d='M36 3v2.5M36 18.5V21M27 12h2.5M42.500 12H45M29.600 5.600l1.800 1.800M40.600 16.600l1.800 1.800M29.600 18.400l1.800-1.800M40.600 7.400l1.800-1.800'/%3E%3C/svg%3E"); }

.qst-fac .qst-fac__num .elementor-heading-title {
  margin: 0.12em 0 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(5.5rem, 10vw, 10rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--qst-fa-ink);
}
.qst-fac .qst-fac__caption .elementor-heading-title {
  margin: 0.5rem 0 0;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--qst-fa-ink);
}
.qst-fac .qst-fac__incl .elementor-heading-title {
  margin: clamp(1.3rem, 3vh, 2rem) 0 0;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(244,244,240,0.4);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qst-fa-dim);
}
.elementor .e-con.qst-fac__rows { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; }
.elementor .e-con.qst-fac__row {
  display: grid;
  grid-template-columns: clamp(3.4rem, 5vw, 5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0;
  width: 100%;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--qst-fa-line);
}
.elementor .e-con.qst-fac__row:last-child { border-bottom: 0; padding-bottom: 0; }
.qst-fac .qst-fac__row-num .elementor-heading-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.3vw, 2.3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--qst-fa-accent);
}
.qst-fac .qst-fac__row-label .elementor-heading-title {
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.15rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--qst-fa-ink);
}

/* wide screens: inside each panel the big figure sits on the left and its breakdown on the right,
   so the panel has no empty half (below 1200px the breakdown goes back under the figure) */
@media (min-width: 1201px) {
  .elementor .e-con.qst-fac__panel {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(1.6rem, 3vw, 3.4rem);
    align-items: start;
  }
  .elementor .e-con.qst-fac__panel > .qst-fac__label { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(1rem, 2.4vh, 1.8rem); }
  .elementor .e-con.qst-fac__panel > .qst-fac__num { grid-column: 1; grid-row: 2; align-self: end; }
  .elementor .e-con.qst-fac__panel > .qst-fac__caption { grid-column: 1; grid-row: 3; }
  .elementor .e-con.qst-fac__panel > .qst-fac__incl { grid-column: 2; grid-row: 2; align-self: start; }
  .elementor .e-con.qst-fac__panel > .e-con.qst-fac__rows { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: 2.1rem; }
  .qst-fac .qst-fac__num .elementor-heading-title { margin-top: 0; }
  .qst-fac .qst-fac__incl .elementor-heading-title { margin-top: 0.5rem; }
  .elementor .e-con.qst-fac__row { padding: 1rem 0; }
}

/* facts strip under the panels (capacity, year established, ...): any number of cells */
.elementor .e-con.qst-fac__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  width: 100%;
  padding: 0;
  margin-top: clamp(0.9rem, 1.6vw, 1.6rem);
  border: 1px solid var(--qst-fa-line);
  border-radius: 14px;
  overflow: hidden;
}
.elementor .e-con.qst-fac__fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: 0.25rem;
  width: 100%;
  padding: clamp(1.2rem, 2.2vw, 2rem) clamp(1.6rem, 2.8vw, 3rem);
}
.elementor .e-con.qst-fac__fact + .e-con.qst-fac__fact { border-left: 1px solid var(--qst-fa-line); }
.elementor .e-con.qst-fac__fact .elementor-widget { width: auto; }
.elementor .e-con.qst-fac__fact .qst-fac__fact-num { grid-row: 1 / span 2; }
.qst-fac .qst-fac__fact-num .elementor-heading-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(3.2rem, 5.6vw, 5.6rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--qst-fa-accent);
}
.qst-fac .qst-fac__fact-label .elementor-heading-title {
  margin: 0;
  align-self: end;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qst-fa-ink);
}
.qst-fac .qst-fac__fact-text,
.qst-fac .qst-fac__fact-text p {
  margin: 0;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.5;
  color: var(--qst-fa-dim);
}

/* closing row: text + two buttons */
.elementor .e-con.qst-fac__foot {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  width: 100%;
  padding: clamp(1.4rem, 3.4vh, 2.2rem) 0 0;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  border-top: 1px solid var(--qst-fa-line);
}
.elementor .e-con.qst-fac__foot .qst-fac__foot-text { width: auto; flex: 1 1 22rem; }
.qst-fac .qst-fac__foot-text,
.qst-fac .qst-fac__foot-text p {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.5;
  color: var(--qst-fa-ink);
}
.elementor .e-con.qst-fac__btns { display: flex; flex-flow: row wrap; gap: 0.8rem; width: auto; padding: 0; }
.elementor .e-con.qst-fac__btns .qst-fac__btn { width: auto; }
.qst-fac .qst-fac__btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.qst-fac .qst-fac__btn--solid .elementor-button { color: #ffffff; background-color: var(--qst-fa-accent); }
.qst-fac .qst-fac__btn--solid .elementor-button::after { content: "→"; font-size: 1.2em; line-height: 1; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.qst-fac .qst-fac__btn--solid .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 14px 40px -10px rgba(224,34,63,0.7); }
.qst-fac .qst-fac__btn--solid .elementor-button:hover::after { transform: translateX(5px); }
.qst-fac .qst-fac__btn--ghost .elementor-button { color: var(--qst-fa-ink); background-color: transparent; border-color: rgba(244,244,240,0.4); }
.qst-fac .qst-fac__btn--ghost .elementor-button:hover { color: #0a0a0a; background-color: var(--qst-fa-ink); border-color: var(--qst-fa-ink); }
.qst-fac .qst-fac__btn .elementor-button:focus-visible { outline: 2px solid var(--qst-fa-ink); outline-offset: 3px; }

/* reveal (only when facility.js is running) */
.qst-fac.qst-fac--js .qst-fac__head,
.qst-fac.qst-fac--js .qst-fac__panel,
.qst-fac.qst-fac--js .qst-fac__row,
.qst-fac.qst-fac--js .qst-fac__facts,
.qst-fac.qst-fac--js .qst-fac__foot { opacity: 0; translate: 0 26px; }
.qst-fac.qst-fac--js .is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 110ms),
              translate .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 110ms),
              border-color .4s, transform .4s cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 800px) {
  .elementor .e-con.qst-fac__head { grid-template-columns: 1fr; align-items: start; }
  .elementor .e-con.qst-fac__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .elementor .e-con.qst-fac__fact + .e-con.qst-fac__fact { border-left: 0; border-top: 1px solid var(--qst-fa-line); }
}
@media (max-width: 560px) {
  .elementor .e-con.qst-fac__btns, .elementor .e-con.qst-fac__btns .qst-fac__btn { width: 100%; }
  .qst-fac .qst-fac__btn .elementor-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .qst-fac .qst-fac__btn .elementor-button, .qst-fac .qst-fac__btn .elementor-button::after { transition: none; }
  .qst-fac .qst-fac__btn .elementor-button:hover { transform: none; }
  .elementor .e-con.qst-fac__panel,
  .elementor .e-con.qst-fac__panel::after { transition: none; }
  .elementor .e-con.qst-fac__panel:hover { transform: none; }
}