/* jj-site.css — rebuilt by scripts/build-jj-site-css.py */
/* Bump ?v= on <link href="/assets/css/jj-site.css?v=…"> when deploying. */


/* ========== Tokens & pills ========== */
/* Jesse Johnson — pill buttons (archived badge + stroke CTAs) */
:root {
  --jj-blue: #3035a2;
}

/* GSAP magnetic nudge — transform only; hover styles stay on the element */
.jj-btn-magnet {
  position: relative;
  will-change: transform;
}

/* —— Archived cases badge (next to section titles) —— */
.inner-title-wrapper.jj-title-with-pill {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.inner-title-wrapper.jj-title-with-pill .h2-test,
.inner-title-wrapper.jj-title-with-pill .passion,
.inner-title-wrapper.jj-title-with-pill h1,
.inner-title-wrapper.jj-title-with-pill h2 {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.jj-archived-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  align-self: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jj-blue);
  text-decoration: none;
  border: 1px solid var(--jj-blue);
  border-radius: 99px;
  padding: 0.6em 0.7em;
  overflow: hidden;
  background: transparent;
  line-height: 1;
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.jj-archived-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jj-blue);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.jj-archived-pill:hover::before,
.jj-archived-pill:focus-visible::before {
  transform: scaleX(1);
}

.jj-archived-pill:hover,
.jj-archived-pill:focus-visible {
  color: #fff;
  border-color: var(--jj-blue);
  box-shadow: 0 6px 20px rgba(48, 53, 162, 0.28);
}

.jj-archived-pill:focus-visible {
  outline: 2px solid var(--jj-blue);
  outline-offset: 3px;
}

.jj-archived-pill-label,
.jj-archived-pill-num {
  position: relative;
  z-index: 1;
}

.jj-archived-pill-num {
  font-size: 0.58em;
  font-weight: 700;
  line-height: 0;
  top: -0.35em;
  margin-left: 0.12em;
  color: var(--jj-blue);
  transition: color 0.35s ease;
}

.jj-archived-pill:hover .jj-archived-pill-num,
.jj-archived-pill:focus-visible .jj-archived-pill-num {
  color: #fff;
}

/* Archive pill — below featured grid, desktop cols 3–4 */
.main-grid:has(.jj-grid-3col) > .jj-cases-archive-row {
  grid-column: 3 / 5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.15em;
}

.jj-cases-archive-row .jj-archived-pill {
  font-size: calc(0.7rem + 2px);
  padding: 1em;
}

/* —— Stroke pill buttons (site-wide fill hover) —— */
a.button.stroke:not(.usp):not(.top.call) {
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

a.button.stroke:not(.usp):not(.top.call)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--jj-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

a.button.stroke:not(.usp):not(.top.call):hover::before,
a.button.stroke:not(.usp):not(.top.call):focus-visible::before {
  transform: scaleX(1);
}

a.button.stroke:not(.usp):not(.top.call) .link-text-wrapper {
  position: relative;
  z-index: 1;
}

a.button.stroke:not(.usp):not(.top.call):hover,
a.button.stroke:not(.usp):not(.top.call):focus-visible {
  border-color: var(--jj-blue);
  box-shadow: 0 6px 20px rgba(48, 53, 162, 0.28);
}

a.button.stroke:not(.usp):not(.top.call):hover .link-floating-text,
a.button.stroke:not(.usp):not(.top.call):focus-visible .link-floating-text {
  color: #fff !important;
  text-shadow: 0 15px 0 #fff !important;
}

/* White-outline pills (footer, dark sections) — not case CTA (blue fill there) */
a.button.stroke.white:not(.usp):not(.top.call):not(.cta-case-btn):not(.jj-stroke-cta-pill)::before {
  background: #fff;
}

a.button.stroke.white:not(.usp):not(.top.call):not(.cta-case-btn):not(.jj-stroke-cta-pill):hover,
a.button.stroke.white:not(.usp):not(.top.call):not(.cta-case-btn):not(.jj-stroke-cta-pill):focus-visible {
  border-color: #fff;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.12);
}

a.button.stroke.white:not(.usp):not(.top.call):not(.cta-case-btn):not(.jj-stroke-cta-pill):hover .link-floating-text,
a.button.stroke.white:not(.usp):not(.top.call):not(.cta-case-btn):not(.jj-stroke-cta-pill):focus-visible .link-floating-text {
  color: var(--jj-blue) !important;
  text-shadow: 0 15px 0 var(--jj-blue) !important;
}

/* White stroke pills — blue fill + white label (Get started, Passion, footer social) */
a.button.stroke.white.jj-stroke-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

a.button.stroke.white.jj-stroke-cta-pill::before {
  background: var(--jj-blue) !important;
}

a.button.stroke.white.jj-stroke-cta-pill:hover,
a.button.stroke.white.jj-stroke-cta-pill:focus-visible {
  border-color: var(--jj-blue) !important;
  box-shadow: 0 6px 20px rgba(48, 53, 162, 0.28) !important;
  background-color: transparent !important;
}

a.button.stroke.white.jj-stroke-cta-pill:hover .link-text-wrapper .link-floating-text,
a.button.stroke.white.jj-stroke-cta-pill:focus-visible .link-text-wrapper .link-floating-text,
a.button.stroke.white.jj-stroke-cta-pill:hover .link-floating-text.shadow-medium,
a.button.stroke.white.jj-stroke-cta-pill:focus-visible .link-floating-text.shadow-medium,
a.button.stroke.white.jj-stroke-cta-pill:hover .link-floating-text.shadow-medium-light,
a.button.stroke.white.jj-stroke-cta-pill:focus-visible .link-floating-text.shadow-medium-light {
  color: #fff !important;
  text-shadow: 0 15px 0 #fff !important;
}

a.button.stroke.white.jj-stroke-cta-pill .link-arrow {
  position: relative;
  z-index: 1;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0 !important;
  margin-top: 0;
  width: 12px;
  height: 12px;
  color: #fff;
  flex-shrink: 0;
  transition:
    max-width 0.3s ease 0.15s,
    opacity 0.3s ease 0.15s,
    margin-left 0.3s ease 0.15s,
    color 0.35s ease;
}

a.button.stroke.white.jj-stroke-cta-pill:hover .link-arrow,
a.button.stroke.white.jj-stroke-cta-pill:focus-visible .link-arrow {
  max-width: 20px;
  opacity: 1;
  margin-left: 0.55em !important;
  color: #fff !important;
}

a.button.stroke.white.jj-stroke-cta-pill .link-arrow svg,
a.button.stroke.white.jj-stroke-cta-pill .link-arrow svg path {
  fill: currentColor;
}

a.button.stroke.white.jj-stroke-cta-pill:hover .link-arrow svg,
a.button.stroke.white.jj-stroke-cta-pill:hover .link-arrow svg path,
a.button.stroke.white.jj-stroke-cta-pill:focus-visible .link-arrow svg,
a.button.stroke.white.jj-stroke-cta-pill:focus-visible .link-arrow svg path {
  fill: #fff !important;
}

/* —— Hover arrow reveal (hero + light-section stroke; keeps existing fill hover) —— */
a.jj-pill-with-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

a.jj-pill-with-arrow .link-arrow {
  position: relative;
  z-index: 1;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0 !important;
  margin-top: 0;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition:
    max-width 0.3s ease 0.15s,
    opacity 0.3s ease 0.15s,
    margin-left 0.3s ease 0.15s,
    color 0.35s ease;
}

a.jj-pill-with-arrow:hover .link-arrow,
a.jj-pill-with-arrow:focus-visible .link-arrow {
  max-width: 20px;
  opacity: 1;
  margin-left: 0.55em !important;
}

a.jj-pill-with-arrow .link-arrow svg,
a.jj-pill-with-arrow .link-arrow svg path {
  fill: currentColor;
}

/* Hero billboard — white arrow with label on hover */
a.button.stroke.top.jj-pill-with-arrow:hover .link-arrow,
a.button.stroke.top.jj-pill-with-arrow:focus-visible .link-arrow {
  color: #fff;
}

a.button.stroke.top.jj-pill-with-arrow:hover .link-arrow svg,
a.button.stroke.top.jj-pill-with-arrow:hover .link-arrow svg path,
a.button.stroke.top.jj-pill-with-arrow:focus-visible .link-arrow svg,
a.button.stroke.top.jj-pill-with-arrow:focus-visible .link-arrow svg path {
  fill: #fff !important;
}

/* Light sections — blue-fill stroke pills (e.g. More about me) */
a.button.stroke.jj-pill-with-arrow:not(.white):hover .link-arrow,
a.button.stroke.jj-pill-with-arrow:not(.white):focus-visible .link-arrow {
  color: #fff;
}

a.button.stroke.jj-pill-with-arrow:not(.white):hover .link-arrow svg,
a.button.stroke.jj-pill-with-arrow:not(.white):hover .link-arrow svg path,
a.button.stroke.jj-pill-with-arrow:not(.white):focus-visible .link-arrow svg,
a.button.stroke.jj-pill-with-arrow:not(.white):focus-visible .link-arrow svg path {
  fill: #fff !important;
}

@media screen and (max-width: 991px) {
  .main-grid:has(.jj-grid-3col) > .jj-cases-archive-row {
    grid-column: 1 / -1;
    margin-top: 0.5em;
  }
}

@media screen and (max-width: 767px) {
  .inner-title-wrapper.jj-title-with-pill {
    flex-wrap: wrap;
    row-gap: 0.65rem;
  }

  .jj-cases-archive-row .jj-archived-pill {
    font-size: 0.7rem;
    padding: 0.6em 0.7em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jj-archived-pill::before,
  a.button.stroke:not(.usp):not(.top.call)::before {
    transition: none;
  }

  .jj-archived-pill:hover::before,
  .jj-archived-pill:focus-visible::before,
  a.button.stroke:not(.usp):not(.top.call):hover::before,
  a.button.stroke:not(.usp):not(.top.call):focus-visible::before {
    transform: scaleX(1);
  }
}

/* ========== Lenis ========== */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:clip}.lenis.lenis-smooth iframe{pointer-events:none}

/* ========== Parallax off (temporary) ========== */
/* Temporary: disable scroll-linked parallax / reveal offsets sitewide */

.hero-scroll-trigger-animation {
  display: none !important;
  pointer-events: none !important;
}

[class*="animation-reveal"] {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

/* ========== Hero padding (homepage) ========== */
/**
 * Homepage hero padding only (.container.hero.home on public/index.html).
 * Not a site-wide breakpoint system — use Webflow’s 991px / 767px / 479px for everything else.
 *
 * padding-top tiers:
 *   1920px+     → 20em
 *   1501–1919px → 23em
 *   ≤1500px     → 21em
 */
@media screen and (min-width: 1920px) {
  .container.hero.home {
    padding-top: 20em;
    padding-bottom: 3.5em;
    overflow: visible;
  }
}

@media screen and (max-width: 1919px) {
  .container.hero.home {
    padding-top: 23em;
    padding-bottom: 3.5em;
    overflow: visible;
  }
}

@media screen and (max-width: 1500px) {
  .container.hero.home {
    padding-top: 21em;
  }
}

/* ========== Homepage sections (trusted, WTE, testimonials) ========== */
/* 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;
  }
}

/* ========== Featured / projects grid ========== */
/* Featured / projects — desktop bento on .main-grid; mobile overrides at bottom only */

.cases-wrapper:has(.jj-grid-3col),
.cases-wrapper:has(.jj-grid-3col) > .collection-list-wrapper-2,
.project-grid.categories.jj-grid-3col {
  display: contents;
}

.main-grid:has(.jj-grid-3col) {
  --jj-case-gap: 2em;
  column-gap: 0;
  row-gap: var(--jj-case-gap);
}

.project-grid.categories.jj-grid-3col > .project-item.categories:nth-child(1) {
  grid-column: 1 / 3;
  margin-right: var(--jj-case-gap);
  width: auto;
  min-height: 30em;
  height: 30em;
}

.project-grid.categories.jj-grid-3col > .project-item.categories:nth-child(2) {
  grid-column: 3 / 5;
  min-height: 30em;
  height: 30em;
}

.project-grid.categories.jj-grid-3col > .project-item.categories:nth-child(3) {
  grid-column: 1 / 2;
  margin-right: var(--jj-case-gap);
  width: auto;
  min-height: 20em;
  height: 20em;
}

.project-grid.categories.jj-grid-3col > .project-item.categories:nth-child(4) {
  grid-column: 2 / 3;
  margin-right: var(--jj-case-gap);
  width: auto;
  min-height: 20em;
  height: 20em;
}

.project-grid.categories.jj-grid-3col > .project-item.categories:nth-child(5) {
  grid-column: 3 / 4;
  margin-right: var(--jj-case-gap);
  width: auto;
  min-height: 20em;
  height: 20em;
}

.project-grid.categories.jj-grid-3col > .project-item.categories:nth-child(6) {
  grid-column: 4 / 5;
  min-height: 20em;
  height: 20em;
}

.project-grid.categories.jj-grid-3col > .project-item.categories {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
}

.project-grid.categories.jj-grid-3col > .project-item.categories:nth-child(2n) {
  flex: none;
}

.project-grid.categories .project-item.categories {
  overflow: hidden;
  border-radius: 1.5em;
}

.project-grid.categories .project-item.categories .project-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.project-link.jj-project-link--has-bg {
  background-image: none !important;
}

.project-link .jj-project-link-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 1.75s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
  pointer-events: none;
}

.project-link.jj-project-link--has-bg .project-top-info-wrapper {
  position: relative;
  z-index: 1;
}

.project-link.jj-project-link--has-bg .project-card-tags {
  position: absolute;
  bottom: 1.25em;
  left: 1.25em;
  right: auto;
  top: auto;
  z-index: 2;
}

/* Hover: shell shrink via Webflow IX; background image zooms in via CSS */
.project-grid.categories .project-item.categories .project-link {
  transform: none !important;
}

@media screen and (min-width: 992px) {
  .project-grid.categories .project-item.categories:hover .jj-project-link-bg {
    transform: scale(1.05);
  }

  .project-grid.categories.jj-grid-3col .project-item.categories:hover .jj-project-link-bg {
    transform: scale(1.055);
  }
}

.project-grid.categories .project-card-tags {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal {
  opacity: 0;
  translate: 0 28px;
}

.project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal.is-visible:nth-child(1) {
  transition-delay: 0.02s;
}
.project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal.is-visible:nth-child(2) {
  transition-delay: 0.08s;
}
.project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal.is-visible:nth-child(3) {
  transition-delay: 0.14s;
}
.project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal.is-visible:nth-child(4) {
  transition-delay: 0.2s;
}
.project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal.is-visible:nth-child(5) {
  transition-delay: 0.26s;
}
.project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal.is-visible:nth-child(6) {
  transition-delay: 0.32s;
}

/* Hide client name pill on hover/cards — logo left, year right */
.project-grid.categories .project-link > .project-top-info-wrapper > .project-additional-info {
  display: none !important;
}

/* First featured case — "New" badge (reveals with card, fades on hover) */
.project-link .jj-case-new-badge {
  position: absolute;
  top: 2em;
  right: 2em;
  z-index: 4;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.48em;
  padding: 0.46em 0.85em;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(19, 20, 23, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.96);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-link .jj-case-new-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.project-grid.categories.jj-grid-3col
  > .project-item.categories:first-child.jj-case-reveal.is-visible
  .jj-case-new-badge {
  animation: jj-case-new-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.project-grid.categories.jj-grid-3col
  > .project-item.categories:first-child.jj-case-reveal.is-visible
  .jj-case-new-badge::before {
  animation: jjpulse 2.5s ease-in-out 0.35s infinite;
}

.project-grid.categories .project-link:hover .jj-case-new-badge,
.project-grid.categories .project-link:focus-visible .jj-case-new-badge {
  opacity: 0 !important;
  transform: translate3d(0, -8px, 0) scale(0.94) !important;
  animation: none !important;
  transition-delay: 0s;
}

.project-grid.categories .project-link:hover .jj-case-new-badge::before,
.project-grid.categories .project-link:focus-visible .jj-case-new-badge::before {
  animation: none !important;
}

@keyframes jj-case-new-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media screen and (max-width: 991px) {
  .project-grid.categories.jj-grid-3col .project-link .jj-case-new-badge {
    top: 1.25em;
    right: 1.25em;
  }
}

@media screen and (max-width: 767px) {
  .project-grid.categories.jj-grid-3col .project-link .jj-case-new-badge {
    top: 1em;
    right: 1em;
    padding: 0.4em 0.72em;
    font-size: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-grid.categories.jj-grid-3col
    > .project-item.categories:first-child.jj-case-reveal.is-visible
    .jj-case-new-badge {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .project-grid.categories.jj-grid-3col
    > .project-item.categories:first-child.jj-case-reveal.is-visible
    .jj-case-new-badge::before {
    animation: none;
  }

  .project-grid.categories .project-link:hover .jj-case-new-badge,
  .project-grid.categories .project-link:focus-visible .jj-case-new-badge {
    transform: translate3d(0, -4px, 0) scale(0.98) !important;
  }
}

/* ── Mobile / tablet only (≤991px) — does not affect desktop ── */
@media screen and (max-width: 991px) {
  .cases-wrapper:has(.jj-grid-3col),
  .cases-wrapper:has(.jj-grid-3col) > .collection-list-wrapper-2 {
    display: block !important;
    grid-column: 1 / -1;
    width: 100%;
  }

  .main-grid .cases-wrapper {
    grid-column: 1 / -1;
    width: 100%;
  }

  .main-grid:has(.jj-grid-3col) {
    column-gap: 0;
    row-gap: var(--jj-case-gap);
  }

  .project-grid.categories.jj-grid-3col {
    --jj-card-inset: 5em;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row;
    row-gap: 1.25em;
    width: 100%;
  }

  .project-grid.categories.jj-grid-3col > .project-item.categories {
    grid-column: 1 / -1 !important;
    margin-right: 0 !important;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    aspect-ratio: 1 / 1;
    height: auto !important;
    min-height: 0 !important;
  }

  .project-grid.categories.jj-grid-3col .project-item.categories .project-link {
    position: relative;
    min-height: 100%;
    height: 100%;
    padding: var(--jj-card-inset) !important;
    box-sizing: border-box;
  }

  .project-grid.categories.jj-grid-3col .project-top-info-wrapper {
    position: absolute;
    top: var(--jj-card-inset);
    left: var(--jj-card-inset);
    right: var(--jj-card-inset);
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    width: auto;
    margin: 0;
    z-index: 2;
    pointer-events: none;
  }

  .project-grid.categories.jj-grid-3col
    .project-top-info-wrapper
    > .project-additional-info {
    display: none !important;
  }

  .project-grid.categories.jj-grid-3col
    .project-top-info-wrapper
    .project-top-info-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0 0 0 auto;
  }

  .project-grid.categories.jj-grid-3col .project-additional-info {
    display: block !important;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }

  .project-grid.categories.jj-grid-3col .project-link .image-5 {
    width: auto;
    height: auto;
    max-width: 42%;
    max-height: 2.75rem;
    object-fit: contain;
    display: block !important;
  }

  .project-grid.categories.jj-grid-3col .project-link .project-card-tags {
    position: absolute;
    bottom: var(--jj-card-inset);
    left: var(--jj-card-inset);
    right: auto;
    max-width: calc(100% - (var(--jj-card-inset) * 2));
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 2;
    margin: 0;
    padding: 0;
  }

  .project-grid.categories.jj-grid-3col .project-card-tags .tag.category {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: transparent;
  }

  .project-grid.categories .project-link .jj-project-link-bg {
    transform: scale(1);
    transition: none;
  }

  .project-grid.categories .project-item.categories:hover .jj-project-link-bg {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-grid.categories .project-item.categories,
  .project-grid.categories .project-item.categories .project-link,
  .project-link .jj-project-link-bg {
    transition: none;
  }

  .project-grid.categories .project-item.categories:hover,
  .project-grid.categories .project-item.categories:hover .project-link,
  .project-grid.categories .project-item.categories:hover .jj-project-link-bg {
    transform: none;
  }

  .project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal {
    opacity: 1;
    translate: none;
  }

  .project-grid.categories.jj-grid-3col > .project-item.categories.jj-case-reveal.is-visible {
    transition: none;
  }
}

@media screen and (max-width: 767px) {
  .project-grid.categories.jj-grid-3col {
    --jj-card-inset: 5em;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row;
    row-gap: 3.25em;
    width: 100%;
  }
}

/* ========== Archived cases grid ========== */
/* Archived cases page — 3 cards row 1, 4 cards row 2; fix footer escaping grid */
.jj-archived-cases-page #w-node-_67abd458-b589-710f-71aa-e671088ee6c7-112f2686 {
  display: none;
}

.jj-archived-cases-page .project-grid.categories.jj-archived-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  width: 100%;
}

.jj-archived-cases-page .project-grid.categories.jj-archived-grid > .project-item.categories {
  width: 100%;
  min-width: 0;
  height: 22em;
  min-height: 18em;
  flex: none;
}

.jj-archived-cases-page .project-grid.categories.jj-archived-grid > .project-item.categories:nth-child(2n) {
  flex: none;
}

/* Row 1: 3 equal cards */
.jj-archived-cases-page .project-grid.categories.jj-archived-grid > .project-item.categories:nth-child(-n + 3) {
  grid-column: span 4;
}

/* Row 2: 4 equal cards */
.jj-archived-cases-page .project-grid.categories.jj-archived-grid > .project-item.categories:nth-child(n + 4) {
  grid-column: span 3;
}

/* Hide client name pill — logo left, year right (all breakpoints) */
.jj-archived-cases-page
  .project-grid.categories.jj-archived-grid
  .project-link
  > .project-top-info-wrapper
  > .project-additional-info {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .jj-archived-cases-page .project-grid.categories.jj-archived-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jj-archived-cases-page .project-grid.categories.jj-archived-grid > .project-item.categories:nth-child(-n + 3),
  .jj-archived-cases-page .project-grid.categories.jj-archived-grid > .project-item.categories:nth-child(n + 4) {
    grid-column: span 1;
  }
}

@media screen and (max-width: 767px) {
  .jj-archived-cases-page .project-grid.categories.jj-archived-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .jj-archived-cases-page .project-grid.categories.jj-archived-grid > .project-item.categories:nth-child(-n + 3),
  .jj-archived-cases-page .project-grid.categories.jj-archived-grid > .project-item.categories:nth-child(n + 4) {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: none;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
  }

  .jj-archived-cases-page .project-grid.categories.jj-archived-grid .project-item.categories .project-link {
    position: relative;
    min-height: 100%;
    height: 100%;
    padding: 3.25em !important;
    box-sizing: border-box;
  }

  .jj-archived-cases-page .project-grid.categories.jj-archived-grid .project-top-info-wrapper {
    position: absolute;
    top: 3.25em;
    left: 3.25em;
    right: 3.25em;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75em;
    width: auto;
    margin: 0;
    z-index: 2;
    pointer-events: none;
  }

  .jj-archived-cases-page
    .project-grid.categories.jj-archived-grid
    .project-top-info-wrapper
    > .project-additional-info {
    display: none !important;
  }

  .jj-archived-cases-page
    .project-grid.categories.jj-archived-grid
    .project-top-info-wrapper
    .project-top-info-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0 0 0 auto;
  }

  .jj-archived-cases-page .project-grid.categories.jj-archived-grid .project-additional-info {
    display: block !important;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }

  .jj-archived-cases-page .project-grid.categories.jj-archived-grid .project-link .image-5 {
    width: auto;
    height: auto;
    max-width: 38%;
    max-height: 2.25rem;
    object-fit: contain;
    display: block !important;
  }

  .jj-archived-cases-page .project-grid.categories.jj-archived-grid .project-link .project-card-tags {
    position: absolute;
    bottom: 3.25em;
    left: 3.25em;
    right: auto;
    max-width: calc(100% - 6.5em);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 2;
    margin: 0;
    padding: 0;
  }

  .jj-archived-cases-page .project-grid.categories.jj-archived-grid .project-card-tags .tag.category {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: transparent;
    font-size: 0.65rem;
  }
}

/* ========== Case study content ========== */
/* Case study content blocks (Dunck, Idealis, etc.) — global, not scoped */

/* Override Webflow .case-img { height: 100% } — never stretch, always cover + center */
.case-images-wrapper img.case-img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 1.5em;
}

.case-img-group > .w-dyn-item,
.case-img-group > [role="listitem"] {
  overflow: hidden;
  border-radius: 1.5em;
  min-height: 0;
  aspect-ratio: 6 / 5;
}

.case-img-group img.case-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

.case-text-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3em;
  width: 100%;
  padding-top: 3em;
  padding-bottom: 3em;
}

.case-text-cols .paragraph + .paragraph {
  margin-top: 1.5em;
}

.case-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: center;
}

.case-split .case-img {
  width: 100%;
  height: 36em;
  object-fit: cover;
  object-position: center;
}

.case-split-text {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.case-split-text .paragraph + .paragraph {
  margin-top: 1.5em;
}

.pain-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
  padding-top: 0;
  padding-bottom: 3em;
}

.pain-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.pain-card-icon {
  width: 1.75em;
  height: 1.75em;
  color: var(--black);
  flex-shrink: 0;
}

.pain-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--black);
}

.pain-card-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--grey-60, #666);
  margin: 0;
}

.case-split-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.5em 0 1.25em;
  color: var(--black);
}

.case-challenge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 3em;
  row-gap: 0;
}

.case-challenge-header {
  grid-column: 1;
  grid-row: 1;
  padding-bottom: 1.5em;
}

.case-challenge-para1 {
  grid-column: 1;
  grid-row: 2;
}

.case-challenge-para2 {
  grid-column: 2;
  grid-row: 2;
}

@media screen and (min-width: 768px) {
  .pain-card {
    padding: 1.75em 1.5em;
  }

  .case-split {
    padding-top: 3em;
    padding-bottom: 3em;
  }

  .case-challenge {
    padding-top: 3em;
    padding-bottom: 2em;
  }
}

@media screen and (max-width: 767px) {
  .case-text-cols,
  .case-split {
    grid-template-columns: 1fr;
    gap: 2em;
  }

  .case-split .case-img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
  }

  .case-split--img-first-mobile {
    display: flex;
    flex-direction: column;
  }

  .case-split--img-first-mobile img {
    order: -1;
  }

  .pain-cards {
    grid-template-columns: 1fr;
  }

  .case-challenge {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5em;
  }

  .case-challenge-header,
  .case-challenge-para1,
  .case-challenge-para2 {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ========== Case CTA and testimonials ========== */
/* Case pages — testimonials + bottom CTA (matches homepage jj-testi grid) */

.case-testi-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  padding: 3.5em 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.case-testi-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin: 0;
}

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

.case-testi-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

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

.case-testi-attr {
  font-size: 0.82rem;
  color: #888;
  margin: 0;
}

.case-testi-attr strong {
  color: #131417;
  font-weight: 600;
}

@media (max-width: 767px) {
  .case-testi-section {
    grid-template-columns: 1fr;
  }
}

/* Bottom CTA — black card, glow, stroke button */
.cta-case-section {
  background-color: var(--black);
  border-radius: 1.5em;
  padding: 3.5em 3em;
  position: relative;
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48, 53, 162, 0.45) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  top: 0;
  left: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.cta-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.cta-case-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
}

.cta-case-heading {
  font-family: Manrope, sans-serif;
  font-size: 4em;
  font-weight: 400;
  line-height: 1.1;
  color: var(--blacka);
  margin: 0;
}

.cta-case-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
}

.cta-case-row .paragraph {
  color: var(--white-50);
  flex: 1;
  min-width: 0;
}

.cta-case-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  flex-shrink: 0;
}

.cta-case-actions .cta-case-btn {
  position: relative;
}

.cta-case-btn {
  flex-shrink: 0;
  width: auto;
  align-self: auto;
}

.cta-case-section a.button.stroke.white:not(.usp):not(.top.call) {
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.cta-case-section a.button.stroke.white:not(.usp):not(.top.call)::before {
  background: var(--jj-blue);
}

.cta-case-section a.button.stroke.white:not(.usp):not(.top.call):hover,
.cta-case-section a.button.stroke.white:not(.usp):not(.top.call):focus-visible {
  border-color: var(--jj-blue) !important;
  box-shadow: 0 6px 20px rgba(48, 53, 162, 0.28);
  background-color: transparent !important;
}

.cta-case-section a.button.stroke.white:not(.usp):not(.top.call):hover .link-floating-text,
.cta-case-section a.button.stroke.white:not(.usp):not(.top.call):focus-visible .link-floating-text {
  color: #fff !important;
  text-shadow: 0 15px 0 #fff !important;
}

.cta-case-section .link-arrow {
  position: relative;
  z-index: 1;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  color: #fff;
  transition:
    max-width 0.3s ease 0.15s,
    opacity 0.3s ease 0.15s,
    margin-left 0.3s ease 0.15s;
}

.cta-case-section a.button.stroke.white:not(.usp):not(.top.call):hover .link-arrow,
.cta-case-section a.button.stroke.white:not(.usp):not(.top.call):focus-visible .link-arrow {
  max-width: 20px;
  opacity: 1;
  margin-left: 0.55em;
}

.cta-case-section a.button.stroke.white .link-arrow svg,
.cta-case-section a.button.stroke.white .link-arrow svg path {
  fill: currentColor;
}

@media (max-width: 767px) {
  .cta-case-section {
    margin-top: 2em;
    padding: 8em 9.5em;
    border-radius: 1.25em;
  }

  .cta-case-inner {
    gap: 5em;
  }

  .cta-case-heading {
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 100;
  }

  .cta-case-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2em;
  }

  .cta-case-actions {
    align-items: flex-start;
    width: auto;
  }

  .cta-case-actions .cta-case-btn {
    width: auto;
  }

  /* Touch — no hover; keep pill width and show white arrow */
  .cta-case-section a.button.stroke.white .link-arrow {
    width: 12px;
    height: 12px;
    max-width: 20px;
    opacity: 1;
    margin-left: 0.55em;
    color: #fff;
    flex-shrink: 0;
  }

  .cta-case-section a.button.stroke.white .link-arrow svg,
  .cta-case-section a.button.stroke.white .link-arrow svg path {
    fill: #fff;
  }
}

/* Legacy case intro columns */
.case-desc-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  column-gap: 3em;
  row-gap: 1.5em;
  margin-top: 1.5em;
}

@media (max-width: 767px) {
  .case-desc-columns {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    row-gap: 1em;
  }
}

/* ========== Case pages mobile spacing ========== */
/* Case study pages — mobile spacing between content blocks */

@media screen and (max-width: 767px) {
  .case-images-wrapper > .case-img-group {
    margin-bottom: 2.5em;
  }

  .case-images-wrapper > .case-img + .case-challenge,
  .case-images-wrapper > .case-img-group + .case-challenge {
    padding-top: 2.75em;
  }

  .case-challenge {
    padding-bottom: 2.25em;
  }

  .case-challenge + .pain-cards {
    padding-top: 0.25em;
  }

  .pain-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3em !important;
    padding-top: 2.25em;
    padding-bottom: 2.75em;
  }

  .pain-card {
    padding: 5em !important;
    gap: 3em;
  }

  .pain-card-icon,
  .pain-card svg.pain-card-icon {
    min-width: 1.8rem;
    min-height: 1.8rem;
    flex-shrink: 0;
  }

  .pain-cards + .case-split {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }

  .case-split + .case-split {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }

  .case-split {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }

  .case-split.case-split--img-first-mobile {
    padding-bottom: 2.75em;
  }

  .case-split + .case-testi-section,
  .case-split.case-split--img-first-mobile + .case-testi-section {
    margin-top: 2.5em;
  }
}

/* ========== Mobile testimonials ========== */
/* Mobile testimonials — homepage (.jj-testi-*) and case pages (.case-testi-*) */

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

  .case-testi-section {
    padding-top: 3.5em;
    padding-bottom: 3em;
  }

  .case-testi-section > div,
  .jj-testi-inner .jj-section-right {
    display: flex;
    flex-direction: column;
    gap: 3.75em;
  }

  .case-testi-section .case-testi-item,
  .jj-testi-inner .jj-testi-item {
    margin-bottom: 0;
    padding-bottom: 3.75em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }

  .case-testi-section .case-testi-item:last-child,
  .jj-testi-inner .jj-testi-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .case-testi-section .jj-testi-pill,
  .jj-testi-inner .jj-testi-pill {
    padding: 1.5em 3em;
    margin-bottom: 2.35em;
  }

  .case-testi-section .jj-testi-pill img,
  .jj-testi-inner .jj-testi-pill img {
    height: 1.35rem;
    width: auto;
    max-height: none;
  }
}

/* ========== Mobile homepage WTE ========== */
/* Homepage — tablet/mobile spacing */

@media screen and (max-width: 991px) {
  .section.services {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .jj-wte-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75em;
    padding: 4.5em !important;
    display: flex;
    flex-direction: column;
    gap: 2.5em 1em !important;
  }

  .jj-wte-inner .jj-section-right {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3.25em !important;
    align-items: start;
  }
}

/* ========== Mobile passion overlay ========== */
/* Passion Projects section — mobile gradient overlay */

@media screen and (max-width: 767px) {
  .div-block-2 {
    filter: blur(20px);
    background-image: linear-gradient(#00000080, #00000080);
    width: 100%;
    height: 4%;
    display: block;
    position: absolute;
    opacity: 51%;
  }
}

/* ========== Passion Instagram grid ========== */
/* Passion page — Instagram grid (Behold JSON feed) */

.jj-instagram-section {
  margin-top: clamp(4.5em, 8vw, 6.5em);
  padding-top: clamp(3em, 5vw, 4.5em);
  border-top: 1px solid rgba(19, 20, 23, 0.08);
}

.jj-instagram-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em 1.5em;
  margin-bottom: 2em;
}

.jj-instagram-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.jj-instagram-follow {
  font-size: 0.875rem;
  text-decoration: none;
}

.jj-instagram-follow:hover {
  text-decoration: underline;
}

.jj-instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5em;
}

.jj-instagram-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 1.5em;
  overflow: hidden;
  background: rgba(19, 20, 23, 0.06);
}

.jj-instagram-trigger {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.jj-instagram-trigger:focus-visible {
  outline: 2px solid #131417;
  outline-offset: 3px;
}

/* Video modal */
body.jj-instagram-modal-open {
  overflow: hidden;
}

.jj-instagram-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
}

.jj-instagram-modal[hidden] {
  display: none;
}

.jj-instagram-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 20, 23, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.jj-instagram-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  max-height: calc(100vh - 3em);
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.jj-instagram-modal-close {
  position: absolute;
  top: -0.25em;
  right: -0.25em;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  padding: 0.65rem;
  color: #131417;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transform: translate(35%, -35%);
}

.jj-instagram-modal-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.jj-instagram-modal-media {
  border-radius: 1.25em;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.jj-instagram-modal-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 720px);
  object-fit: contain;
  background: #000;
}

.jj-instagram-modal-fallback {
  margin: 0;
  padding: 3em 1.5em;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
}

.jj-instagram-modal-caption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: pre-line;
}

.jj-instagram-modal-caption[hidden] {
  display: none;
}

.jj-instagram-modal-external {
  align-self: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.jj-instagram-modal-external:hover {
  color: #fff;
  text-decoration: underline;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jj-instagram-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transition: transform 1.75s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

@media screen and (min-width: 992px) {
  .jj-instagram-item:hover .jj-instagram-image {
    transform: scale(1.05);
  }
}

.jj-instagram-reel-badge {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  background: rgba(19, 20, 23, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.jj-instagram-reel-badge svg {
  width: 0.95rem;
  height: 0.95rem;
}

.jj-instagram-grid.is-loading {
  min-height: 12em;
}

.jj-instagram-grid.is-empty,
.jj-instagram-grid.is-error {
  display: none;
}

@media screen and (max-width: 991px) {
  .jj-instagram-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25em;
  }

  .jj-instagram-section {
    margin-top: 3.5em;
    padding-top: 2.5em;
  }
}

@media screen and (max-width: 479px) {
  .jj-instagram-grid {
    grid-template-columns: 1fr;
  }

  .jj-instagram-item {
    border-radius: 1.25em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jj-instagram-image {
    transition: none;
  }

  .jj-instagram-item:hover .jj-instagram-image {
    transform: none;
  }
}

/* ========== Passion FlickMatch section ========== */
/* Passion page — FlickMatch (mood-based movie picker) */

.jj-flickmatch-section {
  --jj-flickmatch-pad-x: clamp(1.25rem, 4vw, 3.5rem);
  width: 100vw;
  max-width: 100vw;
  margin-top: clamp(4.5em, 8vw, 6.5em);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: clamp(3em, 5vw, 4.5em);
  padding-bottom: clamp(1em, 2vw, 1.5em);
  padding-left: var(--jj-flickmatch-pad-x);
  padding-right: var(--jj-flickmatch-pad-x);
  border-top: 1px solid rgba(19, 20, 23, 0.08);
  box-sizing: border-box;
}

.jj-flickmatch-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2em, 3.5vw, 3.5em);
  align-items: start;
  width: 100%;
  max-width: none;
}

.jj-flickmatch-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  max-width: 26em;
  padding-top: 0.35em;
}

.jj-flickmatch-eyebrow {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(19, 20, 23, 0.55);
}

.jj-flickmatch-title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.jj-flickmatch-lede {
  margin: 0;
  color: rgba(19, 20, 23, 0.72);
  line-height: 1.65;
}

.jj-flickmatch-features {
  margin: 0.25em 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

.jj-flickmatch-features li {
  position: relative;
  padding-left: 1.15em;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(19, 20, 23, 0.78);
}

.jj-flickmatch-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: rgba(19, 20, 23, 0.28);
}

.jj-flickmatch-open {
  align-self: flex-start;
  margin-top: 0.35em;
}

.jj-flickmatch-device-col {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: calc(-1 * var(--jj-flickmatch-pad-x));
  padding: clamp(3em, 6vw, 5em) clamp(1.25em, 3vw, 2.5em);
  background: linear-gradient(
    180deg,
    rgba(19, 20, 23, 0.03) 0%,
    rgba(19, 20, 23, 0.07) 100%
  );
}

.jj-flickmatch-embed-wrap {
  position: relative;
  width: min(20.5rem, 100%);
  margin: 0 auto;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.jj-flickmatch-try-hint {
  position: absolute;
  top: 1.15em;
  left: 1.15em;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.38rem 0.72rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(19, 20, 23, 0.78);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(19, 20, 23, 0.1);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(19, 20, 23, 0.1);
  pointer-events: none;
  animation: jj-flickmatch-hint-float 2.6s ease-in-out infinite;
}

.jj-flickmatch-try-hint-arrow {
  display: inline-flex;
  width: 0.8rem;
  height: 0.8rem;
  color: rgba(19, 20, 23, 0.62);
  animation: jj-flickmatch-hint-point 1.35s ease-in-out infinite;
}

@keyframes jj-flickmatch-hint-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes jj-flickmatch-hint-point {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(2px, 3px);
  }
}

.jj-flickmatch-device-frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.7rem;
  border-radius: 2.85rem;
  background: linear-gradient(160deg, #3a3a40 0%, #121216 42%, #08080a 100%);
  box-shadow:
    0 28px 72px rgba(19, 20, 23, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.jj-flickmatch-embed-chrome--desktop {
  display: none;
}

.jj-flickmatch-phone-bar {
  display: flex;
  justify-content: center;
  padding: 0.15rem 0 0.65rem;
}

.jj-flickmatch-phone-notch {
  width: 34%;
  min-width: 5.5rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #050506;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.jj-flickmatch-phone-screen {
  min-height: 0;
  border-radius: 2.15rem;
  overflow: hidden;
  background: #0c0c0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.jj-flickmatch-embed {
  display: block;
  width: 100%;
  height: clamp(34rem, 58vh, 42rem);
  border: 0;
  background: #0c0c0f;
}

.jj-flickmatch-phone-home {
  display: block;
  width: 32%;
  height: 0.3rem;
  margin: 0.75rem auto 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.container.inner-hero.passion .youtube-block {
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .jj-flickmatch-inner {
    gap: 2.25em;
  }

  .jj-flickmatch-device-col {
    position: sticky;
    top: 1.5em;
    align-self: start;
    border-radius: 20px;
    overflow: hidden;
    padding: 2em 1.5em;
  }

  .jj-flickmatch-embed-wrap {
    width: min(36rem, 100%);
  }

  .jj-flickmatch-try-hint {
    top: 1.35em;
    left: 1.35em;
  }

  .jj-flickmatch-phone-bar {
    display: none;
  }

  .jj-flickmatch-phone-home {
    display: block;
    width: 22%;
    height: 0.28rem;
    margin: 0.55rem auto 0.05rem;
    background: rgba(255, 255, 255, 0.2);
  }

  .jj-flickmatch-device-frame {
    position: relative;
    padding: 0.9rem;
    border-radius: 1.4rem;
    background: linear-gradient(
      165deg,
      #4d4d54 0%,
      #2a2a30 22%,
      #151518 72%,
      #08080a 100%
    );
    box-shadow:
      0 28px 64px rgba(19, 20, 23, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  }

  .jj-flickmatch-device-frame::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 50%;
    z-index: 2;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: #141419;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  .jj-flickmatch-phone-screen {
    border-radius: 0.55rem;
    position: relative;
  }

  .jj-flickmatch-embed {
    height: clamp(26rem, 42vh, 32rem);
  }
}

@media screen and (max-width: 991px) {
  .jj-flickmatch-inner {
    grid-template-columns: 1fr;
    gap: 2.75em;
  }

  .jj-flickmatch-copy {
    max-width: none;
  }

  .jj-flickmatch-device-col {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(3em, 8vw, 4.5em) clamp(1em, 4vw, 1.5em);
  }

  .jj-flickmatch-embed-wrap {
    width: min(20rem, 88vw);
  }

  .jj-flickmatch-embed {
    height: clamp(36rem, 118vw, 42rem);
  }
}

@media screen and (max-width: 479px) {
  .jj-flickmatch-section {
    --jj-flickmatch-pad-x: 1rem;
    margin-top: 3.5em;
    padding-top: 2.5em;
  }

  .jj-flickmatch-device-col {
    padding-top: clamp(2.75em, 7vw, 3.5em);
    padding-bottom: clamp(2.75em, 7vw, 3.5em);
  }

  .jj-flickmatch-embed-wrap {
    width: min(18.75rem, 86vw);
  }

  .jj-flickmatch-embed {
    height: clamp(34rem, 112vw, 40rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jj-flickmatch-try-hint,
  .jj-flickmatch-try-hint-arrow {
    animation: none;
  }
}