/* Homepage — availability badge, trusted logos, WTE, testimonials */

.jj-avail {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 1.25em;
}

.jj-avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  flex-shrink: 0;
  animation: jjpulse 2.5s ease-in-out infinite;
}

@keyframes jjpulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Hero USP pills — GSAP owns load animation (see jj-trusted-logos.js) */
.container.hero.home:not(.services) .usps > a {
  opacity: 0;
  transform: translate3d(45px, 0, 0);
}

.container.hero.home:not(.services) .usps > a.jj-usp-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .container.hero.home:not(.services) .usps > a {
    opacity: 1;
    transform: none;
  }
}

/* Trusted client logos (hero, above USP pills) */
.main-grid.usp.jj-trusted-grid {
  margin-bottom: 0 !important;
  padding-bottom: 2em;
}

@media screen and (min-width: 768px) {
  .main-grid.usp.jj-trusted-grid {
    margin-top: 0 !important;
  }
}

.main-grid.usp.jj-trusted-grid + .main-grid.usp {
  margin-top: 0 !important;
}

.jj-trusted-spacer {
  grid-area: span 1 / span 2 / span 1 / span 2;
  min-height: 0;
}

#w-node-jj-trusted-logos-49e5264b {
  grid-area: 1 / 3 / 2 / 5;
  justify-self: start;
  width: 100%;
  max-width: 44em;
}

.jj-trusted-logos-wrap {
  margin-bottom: 0;
}

.jj-trusted-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jj-trusted-logo {
  --jj-logo-h: 1.15rem;
  --jj-logo-w: 4.25rem;
  --jj-logo-scale: 1;
  width: var(--jj-logo-w);
  height: var(--jj-logo-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jj-trusted-logo[data-logo="politie"] {
  --jj-logo-w: 3.5rem;
  --jj-logo-scale: 1.05;
}

.jj-trusted-logo[data-logo="vu-amsterdam"] {
  --jj-logo-w: 3.5rem;
  --jj-logo-scale: 1.02;
}

.jj-trusted-logo[data-logo="amberscript"] {
  --jj-logo-w: 5.5rem;
  --jj-logo-scale: 0.88;
}

.jj-trusted-logo[data-logo="rainforest-alliance"] {
  --jj-logo-w: 5.75rem;
  --jj-logo-scale: 0.92;
}

.jj-trusted-logo[data-logo="pon"] {
  --jj-logo-w: 2.85rem;
  --jj-logo-scale: 0.9;
}

.jj-trusted-logo[data-logo="louwman"] {
  --jj-logo-w: 4.5rem;
}

.jj-trusted-logo[data-logo="candid"] {
  --jj-logo-w: 3.5rem;
}

.jj-trusted-logos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(var(--jj-logo-scale));
  opacity: 0;
  filter: grayscale(0%) saturate(100%);
  transition: none;
}

.jj-trusted-logos.is-muted img {
  opacity: 0.38;
  filter: grayscale(100%) saturate(0%);
  transition:
    opacity 0.45s ease,
    filter 0.55s ease;
}

.jj-trusted-logo:hover img {
  opacity: 1;
  filter: grayscale(0%) saturate(100%);
}

@media (prefers-reduced-motion: reduce) {
  .jj-trusted-logos img {
    opacity: 0.38;
    filter: grayscale(100%) saturate(0%);
  }
}

/* Tablet + mobile: keep logo bar in the right grid column (Webflow shrinks to 2 cols at 991px) */
@media screen and (max-width: 991px) {
  .main-grid.usp.jj-trusted-grid {
    display: grid !important;
    grid-template-columns: 0.5fr 0.75fr;
    column-gap: 0;
  }

  .jj-trusted-spacer {
    display: none;
  }

  #w-node-jj-trusted-logos-49e5264b {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: start;
    align-self: start;
    width: 100%;
    max-width: none;
  }

  .jj-trusted-logos {
    justify-content: flex-start;
    gap: 0.85rem 1.15rem;
  }

  .jj-trusted-logo {
    --jj-logo-h: 1rem;
  }

  .jj-trusted-logo[data-logo="amberscript"] {
    --jj-logo-w: 4.75rem;
  }

  .jj-trusted-logo[data-logo="rainforest-alliance"] {
    --jj-logo-w: 5rem;
  }
}

/* Tablet hero: logos → headline → intro/CTAs */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .container.hero.home:not(.services) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .container.hero.home:not(.services) > .main-grid.usp:not(.jj-trusted-grid) {
    display: none !important;
  }

  .container.hero.home:not(.services) > .main-grid.usp.jj-trusted-grid {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1.5em;
  }

  .container.hero.home:not(.services) #w-node-jj-trusted-logos-49e5264b {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none;
  }

  .container.hero.home:not(.services) > .main-grid:not(.usp) {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    width: 100%;
    flex: 0 0 auto;
  }

  .container.hero.home:not(.services)
    > .main-grid:not(.usp)
    > #w-node-_5bd873e6-f439-eea0-7193-e36080301436-49e5264b {
    order: 1;
    grid-area: auto !important;
    width: 100%;
  }

  .container.hero.home:not(.services)
    > .main-grid:not(.usp)
    > ._1st-col-max-width.top-margin-m {
    order: 2;
    max-width: 100% !important;
    width: 100%;
    margin-top: 0;
  }

  .container.hero.home:not(.services) #w-node-_5bd873e6-f439-eea0-7193-e36080301426-49e5264b,
  .container.hero.home:not(.services) #w-node-_5bd873e6-f439-eea0-7193-e36080301436-49e5264b {
    grid-area: auto !important;
  }
}

@media screen and (max-width: 767px) {
  /* Hero mobile: headline → intro/CTAs → logos (undo Webflow row + 2-col layout) */
  .container.hero.home:not(.services) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Keep avail/USP row hidden; only the logo bar stays visible */
  .container.hero.home:not(.services) > .main-grid.usp:not(.jj-trusted-grid) {
    display: none !important;
  }

  .container.hero.home:not(.services) > .main-grid.usp.jj-trusted-grid {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 7em !important;
    margin-bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 0 !important;
  }

  .container.hero.home:not(.services) #w-node-jj-trusted-logos-49e5264b {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none;
  }

  .container.hero.home:not(.services) > .main-grid:not(.usp) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    width: 100%;
    flex: 0 0 auto;
    order: 1;
  }

  .container.hero.home:not(.services)
    > .main-grid:not(.usp)
    > #w-node-_5bd873e6-f439-eea0-7193-e36080301436-49e5264b {
    order: 1;
    grid-area: auto !important;
    width: 100%;
  }

  .container.hero.home:not(.services)
    > .main-grid:not(.usp)
    > ._1st-col-max-width.top-margin-m {
    order: 2;
    max-width: 100% !important;
    width: 100%;
    margin-top: 0;
  }

  .container.hero.home:not(.services) #w-node-_5bd873e6-f439-eea0-7193-e36080301426-49e5264b,
  .container.hero.home:not(.services) #w-node-_5bd873e6-f439-eea0-7193-e36080301436-49e5264b {
    grid-area: auto !important;
  }

  .jj-trusted-logos {
    justify-content: flex-start;
  }
}

/* What to expect */
.jj-wte-inner {
  padding: 3.5em 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin-top: 0 !important;
}

.jj-wte-label,
.jj-testi-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin: 0;
  padding-top: 0.2em;
}

.jj-section-right {
  grid-area: 1 / 3 / 2 / 5;
}

.jj-wte-inner .jj-section-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
  align-items: start;
}

.jj-wte-item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75em;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.jj-wte-num {
  font-size: 0.72rem;
  font-weight: 600;
  color: #bbb;
  padding-top: 0.2em;
}

.jj-wte-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.35em;
  color: #131417;
  line-height: 1.3;
}

.jj-wte-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5em;
  margin-bottom: 0.25em;
}

.jj-wte-body {
  font-size: 0.875rem;
  line-height: 1.72;
  color: rgba(0, 0, 0, 0.58);
  margin: 0;
}

/* Testimonials */
.jj-testi-inner {
  padding: 3.5em 0 1.75em;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin-top: 0 !important;
}

.jj-testi-item {
  padding: 1.75em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.jj-testi-item:first-child {
  padding-top: 0;
}

.jj-testi-pill {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(19, 20, 23, 0.2);
  border-radius: 99px;
  padding: 0.22em 0.6em;
  margin-bottom: 0.85em;
}

.jj-testi-pill img {
  height: 0.8em;
  width: auto;
  display: block;
  filter: brightness(0);
}

.jj-testi-quote {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--black);
  margin: 0 0 0.75em;
}

.jj-testi-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #131417;
  display: block;
  margin-bottom: 0.1em;
}

.jj-testi-role {
  font-size: 0.78rem;
  color: #999;
}

@media screen and (max-width: 991px) {
  .jj-section-right {
    grid-area: 1 / 2 / 2 / 3 !important;
  }

  .jj-wte-inner .jj-section-right {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* USP bars (div-block-9 _1st / mid) — tablet + mobile; Webflow hides until 767px */
@media screen and (max-width: 991px) {
  .div-block-9 {
    display: flex !important;
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    background-color: #e7e7e7;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 20px;
  }

  .div-block-9.mid {
    background-color: #2d2d2d;
  }

  .div-block-9._1st {
    margin-top: 5vh;
  }
}

/* iPad only — Webflow 991px forces black 7px USP text; 767px rules do not apply yet */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .div-block-9 .link-text-wrapper.usp,
  .div-block-9 .link-text-wrapper.usp._1st,
  .div-block-9 .link-text-wrapper.usp.white {
    display: flex !important;
    align-items: center;
    transform: none !important;
  }

  .div-block-9 .code-embed-2 {
    margin-right: 6px;
    flex-shrink: 0;
  }

  .div-block-9 .link-floating-text.shadow-medium.white.usp {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    text-shadow: none;
  }

  .div-block-9._1st .link-floating-text.shadow-medium.white.usp {
    color: var(--black, #131417);
  }

  .div-block-9.mid .link-text-wrapper.usp.white {
    color: var(--white, #fff);
  }

  .div-block-9.mid .link-floating-text.shadow-medium.white.usp {
    color: var(--white, #fff);
  }
}

@media screen and (max-width: 767px) {
  .jj-wte-inner {
    margin-top: 0 !important;
  }

  .jj-section-right {
    grid-area: auto !important;
    grid-column: 1 / -1;
  }

  .jj-wte,
  .jj-testi {
    padding: 2.5em 0;
  }
}