#jc-loader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}
#jc-loader.hidden {
  pointer-events: none;
}
.jc-loader-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .02em;
  color: #ccc;
  font-family: "Copy NN Borja Family", Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 5vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
  padding-left: .12em;
}
.jc-loader-char {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.jc-loader-char-space {
  width: .38em;
}
.jc-loader-line {
  width: min(260px, 55vw);
  height: 1px;
  background: rgba(17, 17, 17, .18);
  position: relative;
  overflow: hidden;
  transform-origin: left center;
}
.jc-loader-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #111;
  transform: scaleX(0);
  transform-origin: left center;
}
#jc-loader.is-animating .jc-loader-line::after {
  animation: none;
}
#jc-ink-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #jc-ink-canvas { display: none !important; }
}

/* Supplied animated preloader, recolored to black and white */
.jc-loader-video{display:block;width:clamp(150px,18vw,240px);height:auto;max-height:240px;object-fit:contain;transform-origin:center;will-change:transform,opacity}
@media (max-width:600px){.jc-loader-video{width:150px;max-height:150px}}

.hero h1{display:flex;justify-content:center;flex-wrap:nowrap}
.hero-letter{display:inline-block;transition:color .22s ease,transform .22s ease;cursor:default}
.hero-letter:not(.hero-space):hover{color:#8a8a8a;transform:translateY(-3px)}

/* Client name is intentionally stronger than campaign name */
.bootstrap-site .project-name span{font-size:19px!important;line-height:1.05;font-weight:800}
.bootstrap-site .project-name strong{font-size:13px!important;line-height:1.2;font-weight:500;margin-top:4px}

.about-stack{font-size:clamp(48px,6vw,96px)!important;line-height:.9!important;max-width:90%}
.about-stack span{white-space:normal}

.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:20px}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.radio-spot{margin:28px 0 0;padding-top:22px;border-top:1px solid rgba(0,0,0,.16)}
.radio-spot h2{font-size:20px;margin:0 0 10px}.radio-spot audio{width:100%}.radio-note{font-size:13px;opacity:.55}

/* Prevent child pages from adding effects that visually fight the parent panel */
html.sq-panel-open .cb-cursor{display:none!important}
.sq-project-frame{transform:translateZ(0);contain:layout paint style}


/* Smart YouTube player: avoids Error 153 when portfolio is opened via file:// */
.youtube-smart{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;display:grid;place-items:center}
.youtube-smart iframe,.youtube-smart__poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.youtube-smart__poster{object-fit:cover;display:block;opacity:.9}
.youtube-smart__overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.28));text-decoration:none;color:#fff;cursor:pointer}
.youtube-smart__play{width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.65);display:grid;place-items:center;box-shadow:0 8px 28px rgba(0,0,0,.28);transition:transform .25s ease,background .25s ease}
.youtube-smart__play:before{content:"";display:block;margin-left:5px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #fff}
.youtube-smart__overlay:hover .youtube-smart__play{transform:scale(1.08);background:rgba(0,0,0,.86)}
.youtube-smart__hint{position:absolute;left:18px;bottom:16px;font-size:12px;letter-spacing:.02em;color:#fff;background:rgba(0,0,0,.58);padding:7px 10px;border-radius:999px}

/* Karim Kazan hero: curated per-letter hover palette */
.hero h1 .hero-letter:not(.hero-space){
  transition:color .25s ease, transform .30s cubic-bezier(.22,1,.36,1);
}
.hero h1 .hero-letter:not(.hero-space):hover{
  transform:translateY(-4px);
}
.hero h1 .hero-letter:nth-child(1):hover{color:#F04438;} /* K */
.hero h1 .hero-letter:nth-child(2):hover{color:#F04438;} /* a */
.hero h1 .hero-letter:nth-child(3):hover{color:#F04438;} /* r */
.hero h1 .hero-letter:nth-child(4):hover{color:#F04438;} /* i */
.hero h1 .hero-letter:nth-child(5):hover{color:#F04438;} /* m */
.hero h1 .hero-letter:nth-child(7):hover{color:#F04438;} /* K */
.hero h1 .hero-letter:nth-child(8):hover{color:#F04438;} /* a */
.hero h1 .hero-letter:nth-child(9):hover{color:#F04438;} /* z */
.hero h1 .hero-letter:nth-child(10):hover{color:#F04438;} /* a */
.hero h1 .hero-letter:nth-child(11):hover{color:#F04438;} /* n */

/* ==========================================================
   KARIM KAZAN — REFINED GSAP TEXT LENS CURSOR
   ========================================================== */
@media (hover:hover) and (pointer:fine) {
  /* Never hide the native cursor globally.
     It is hidden only while our custom dot/lens is actively visible. */
  body.ravex-cursor-enabled {
    cursor: default;
  }

  body.ravex-cursor-enabled.kk-custom-cursor-active {
    cursor: none;
  }

  body.ravex-cursor-enabled.kk-custom-cursor-active p,
  body.ravex-cursor-enabled.kk-custom-cursor-active h1,
  body.ravex-cursor-enabled.kk-custom-cursor-active h2,
  body.ravex-cursor-enabled.kk-custom-cursor-active h3,
  body.ravex-cursor-enabled.kk-custom-cursor-active h4,
  body.ravex-cursor-enabled.kk-custom-cursor-active h5,
  body.ravex-cursor-enabled.kk-custom-cursor-active h6,
  body.ravex-cursor-enabled.kk-custom-cursor-active li,
  body.ravex-cursor-enabled.kk-custom-cursor-active blockquote,
  body.ravex-cursor-enabled.kk-custom-cursor-active .brand,
  body.ravex-cursor-enabled.kk-custom-cursor-active .desc,
  body.ravex-cursor-enabled.kk-custom-cursor-active .bio-lead,
  body.ravex-cursor-enabled.kk-custom-cursor-active .about-stack span,
  body.ravex-cursor-enabled.kk-custom-cursor-active .career-highlights {
    cursor: none !important;
  }

  /* Keep native hand / text-entry behaviour on anything clickable or editable. */
  body.ravex-cursor-enabled a,
  body.ravex-cursor-enabled button,
  body.ravex-cursor-enabled [role="button"],
  body.ravex-cursor-enabled input,
  body.ravex-cursor-enabled textarea,
  body.ravex-cursor-enabled select,
  body.ravex-cursor-enabled label,
  body.ravex-cursor-enabled summary,
  body.ravex-cursor-enabled nav a,
  body.ravex-cursor-enabled .mobile-side-nav a {
    cursor: pointer !important;
  }

  body.ravex-cursor-enabled input,
  body.ravex-cursor-enabled textarea {
    cursor: text !important;
  }

  .kk-invert-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    transform-origin: center center;
    will-change: transform, width, height, opacity;
  }

  /* No custom cursor over the Karim Kazan hero name. Native arrow + colour hover only. */
  body.ravex-cursor-enabled .hero h1,
  body.ravex-cursor-enabled .hero h1 .hero-letter {

  }

  /* Index hero keeps the curated letter colours and never becomes an invert lens. */
  .hero h1 .hero-letter:not(.hero-space) {
    transition: color .25s ease, transform .30s cubic-bezier(.22,1,.36,1) !important;
    transform: none;
  }
  .hero h1 .hero-letter:nth-child(1):hover{color:#F04438 !important;transform:translateY(-4px);} /* K */
  .hero h1 .hero-letter:nth-child(2):hover{color:#F04438 !important;transform:translateY(-4px);} /* a */
  .hero h1 .hero-letter:nth-child(3):hover{color:#F04438 !important;transform:translateY(-4px);} /* r */
  .hero h1 .hero-letter:nth-child(4):hover{color:#F04438 !important;transform:translateY(-4px);} /* i */
  .hero h1 .hero-letter:nth-child(5):hover{color:#F04438 !important;transform:translateY(-4px);} /* m */
  .hero h1 .hero-letter:nth-child(7):hover{color:#F04438 !important;transform:translateY(-4px);} /* K */
  .hero h1 .hero-letter:nth-child(8):hover{color:#F04438 !important;transform:translateY(-4px);} /* a */
  .hero h1 .hero-letter:nth-child(9):hover{color:#F04438 !important;transform:translateY(-4px);} /* z */
  .hero h1 .hero-letter:nth-child(10):hover{color:#F04438 !important;transform:translateY(-4px);} /* a */
  .hero h1 .hero-letter:nth-child(11):hover{color:#F04438 !important;transform:translateY(-4px);} /* n */

  /* Media keeps its own visual treatment. Never invert photos/video. */
  img, video, iframe, canvas, svg,
  .project-media, .detail-media, .hero-video {
    isolation: isolate;
  }
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  .kk-invert-cursor { display:none !important; }
}

/* Media areas use the normal arrow and never show the custom difference cursor. */
@media (hover:hover) and (pointer:fine) {
  body.ravex-cursor-enabled img,
  body.ravex-cursor-enabled video,
  body.ravex-cursor-enabled iframe,
  body.ravex-cursor-enabled canvas,
  body.ravex-cursor-enabled svg,
  body.ravex-cursor-enabled picture,
  body.ravex-cursor-enabled figure,
  body.ravex-cursor-enabled .detail-media,
  body.ravex-cursor-enabled .hero-video {

  }

  /* Preserve the dedicated gallery interaction. */
  body.ravex-cursor-enabled .project-media,
  body.ravex-cursor-enabled .project-media * {
    cursor: none !important;
  }
}

/* Absolute hero-name cursor kill switch.
   The custom round cursor must never appear over "Karim Kazan". */
@media (hover:hover) and (pointer:fine) {
  body.kk-hero-cursor-blocked .kk-invert-cursor {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  body.ravex-cursor-enabled.kk-hero-cursor-blocked .hero h1,
  body.ravex-cursor-enabled.kk-hero-cursor-blocked .hero h1 * {

  }
}

/* FINAL CURSOR SAFETY OVERRIDES — inner media must always show native arrow */
@media (hover:hover) and (pointer:fine) {
  body.ravex-cursor-enabled .detail-media,
  body.ravex-cursor-enabled .detail-media *,
  body.ravex-cursor-enabled img:not(.project-media img),
  body.ravex-cursor-enabled video:not(.project-media video),
  body.ravex-cursor-enabled iframe,
  body.ravex-cursor-enabled .hero-video,
  body.ravex-cursor-enabled .hero-video * {

  }

  body.ravex-cursor-enabled .hero h1,
  body.ravex-cursor-enabled .hero h1 * {

  }

  body.ravex-cursor-enabled nav a,
  body.ravex-cursor-enabled .mobile-side-nav a,
  body.ravex-cursor-enabled a:not(.project-media),
  body.ravex-cursor-enabled button,
  body.ravex-cursor-enabled [role="button"] {
    cursor: pointer !important;
  }
}


/* 2026-08-14 ROOT CURSOR FIX
   Project detail pages must never lose the native pointer when the custom lens is hidden. */
@media (hover:hover) and (pointer:fine) {
  body.ravex-cursor-enabled:has(.project-detail):not(.kk-custom-cursor-active) {

  }
  body.ravex-cursor-enabled:has(.project-detail):not(.kk-custom-cursor-active) .project-detail,
  body.ravex-cursor-enabled:has(.project-detail):not(.kk-custom-cursor-active) .project-detail *:not(a):not(button):not([role="button"]):not(input):not(textarea):not(select) {
    cursor: default;
  }
  body.ravex-cursor-enabled:has(.project-detail) .detail-media,
  body.ravex-cursor-enabled:has(.project-detail) .detail-media *,
  body.ravex-cursor-enabled:has(.project-detail) img,
  body.ravex-cursor-enabled:has(.project-detail) video,
  body.ravex-cursor-enabled:has(.project-detail) iframe {

  }
  body.ravex-cursor-enabled:has(.project-detail) a,
  body.ravex-cursor-enabled:has(.project-detail) button,
  body.ravex-cursor-enabled:has(.project-detail) [role="button"] {
    cursor: pointer !important;
  }
}

/* 2026-08-14 INNER PAGE BLACK CURSOR
   Force a visible black cursor on project-detail pages, independent of OS cursor colour. */
@media (hover:hover) and (pointer:fine) {
  body.ravex-cursor-enabled:has(.project-detail),
  body.ravex-cursor-enabled:has(.project-detail) .project-detail,
  body.ravex-cursor-enabled:has(.project-detail) .detail-media,
  body.ravex-cursor-enabled:has(.project-detail) .detail-media *,
  body.ravex-cursor-enabled:has(.project-detail) img,
  body.ravex-cursor-enabled:has(.project-detail) video,
  body.ravex-cursor-enabled:has(.project-detail) iframe,
  body.ravex-cursor-enabled:has(.project-detail) canvas,
  body.ravex-cursor-enabled:has(.project-detail) figure,
  body.ravex-cursor-enabled:has(.project-detail) picture {
    cursor: url('../images/cursor-arrow-black.svg') 4 3, default !important;
  }

  body.ravex-cursor-enabled:has(.project-detail) a,
  body.ravex-cursor-enabled:has(.project-detail) button,
  body.ravex-cursor-enabled:has(.project-detail) [role="button"],
  body.ravex-cursor-enabled:has(.project-detail) summary {
    cursor: url('../images/cursor-hand-black.svg') 11 5, pointer !important;
  }

  /* When the GSAP text lens is active, remove the arrow only on that text. */
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active p,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active h1,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active h2,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active h3,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active h4,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active h5,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active h6,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active .brand,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active .desc,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active li,
  body.ravex-cursor-enabled:has(.project-detail).kk-custom-cursor-active blockquote {
    cursor: none !important;
  }
}

/* ==========================================================
   2026-08-14 VIDEO-VERIFIED INNER PAGE CURSOR FIX
   One cursor system on project-detail pages. No native/custom handoff.
   ========================================================== */
@media (hover:hover) and (pointer:fine) {
  body.kk-inner-page {
    cursor: none !important;
  }
  body.kk-inner-page .project-detail,
  body.kk-inner-page .project-detail *:not(iframe) {
    cursor: none !important;
  }

  body.kk-inner-page iframe {

  }

  body.kk-inner-page .kk-invert-cursor {
    display: block !important;
    opacity: 1;
    visibility: visible;
    width: 26px;
    height: 26px;
    border-radius: 0;
    background: transparent url('../images/cursor-arrow-black.svg') center/26px 26px no-repeat;
    mix-blend-mode: normal;
    transform-origin: 4px 3px;
  }

  body.kk-inner-page .kk-invert-cursor.kk-cursor-text {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
  }

  body.kk-inner-page .kk-invert-cursor.kk-cursor-link {
    width: 30px;
    height: 30px;
    border-radius: 0;
    background: transparent url('../images/cursor-hand-black.svg') center/30px 30px no-repeat;
    mix-blend-mode: normal;
  }

  body.kk-inner-page .kk-invert-cursor.kk-cursor-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* ==========================================================
   2026-08-14 CLEAN INNER-PAGE CURSOR MODEL
   Native black SVG cursor by default. GSAP lens ONLY on readable text.
   Media is always above the lens, so it can never be inverted by overlap.
   ========================================================== */
@media (hover:hover) and (pointer:fine) {
  body.kk-inner-page,
  body.kk-inner-page .project-detail,
  body.kk-inner-page .project-detail * {
    cursor: url('../images/cursor-arrow-black.svg') 4 3, default !important;
  }

  body.kk-inner-page a,
  body.kk-inner-page button,
  body.kk-inner-page [role="button"],
  body.kk-inner-page summary {
    cursor: url('../images/cursor-hand-black.svg') 11 5, pointer !important;
  }

  /* The lens is not a permanent cursor on inner pages. */
  body.kk-inner-page .kk-invert-cursor {
    display: block !important;
    width: 118px !important;
    height: 118px !important;
    border-radius: 50% !important;
    background: #fff !important;
    mix-blend-mode: difference !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 9000 !important;
    pointer-events: none !important;
  }

  body.kk-inner-page.kk-text-lens-active .kk-invert-cursor {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide the native arrow only on the actual readable text under the pointer. */
  body.kk-inner-page.kk-text-lens-active .kk-lens-target {
    cursor: none !important;
  }

  /* Media and embeds are always above the blend lens. */
  body.kk-inner-page .detail-media,
  body.kk-inner-page .detail-media img,
  body.kk-inner-page .detail-media video,
  body.kk-inner-page .detail-media iframe,
  body.kk-inner-page .detail-media canvas,
  body.kk-inner-page .detail-media svg,
  body.kk-inner-page img,
  body.kk-inner-page video,
  body.kk-inner-page iframe,
  body.kk-inner-page figure,
  body.kk-inner-page picture,
  body.kk-inner-page .youtube-smart {
    position: relative;
    z-index: 10000 !important;
    isolation: isolate;
    cursor: url('../images/cursor-arrow-black.svg') 4 3, default !important;
  }
}

/* ==========================================================
   2026-09-12 — RED BALL CURSOR + PROJECT IMAGE COLOUR SHIFT
   ========================================================== */
@media (hover:hover) and (pointer:fine) {
  /* Home cursor is a clean red ball by default. */
  body:not(.kk-inner-page) .kk-invert-cursor {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #F04438 !important;
    background-image: none !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
    transition: background-color .18s ease, width .22s ease, height .22s ease, opacity .12s ease !important;
  }

  /* Over project imagery the ball switches to a high-contrast image mode. */
  body:not(.kk-inner-page) .kk-invert-cursor.kk-cursor-image {
    width: 22px !important;
    height: 22px !important;
    background: #fff !important;
    mix-blend-mode: difference !important;
  }

  /* The project image itself uses only the main custom cursor. */
  body.ravex-cursor-enabled .project-media,
  body.ravex-cursor-enabled .project-media * {
    cursor: none !important;
  }
}


/* ==========================================================
   2026-09-12 — UNIFIED RED BALL CURSOR EVERYWHERE
   Only one custom cursor on desktop/fine-pointer devices.
   ========================================================== */
@media (hover:hover) and (pointer:fine) {
  body.kk-red-ball-cursor-ready,
  body.kk-red-ball-cursor-ready * {
    cursor: none !important;
  }

  body.kk-red-ball-cursor-ready .kk-invert-cursor {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #F04438 !important;
    background-image: none !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
    border: 0 !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
    opacity: 0;
    visibility: hidden;
    display: block !important;
    transform: translate3d(-9999px,-9999px,0) translate(-50%,-50%);
    transform-origin: center center !important;
    will-change: transform, opacity;
    transition: opacity .12s ease !important;
  }

  body.kk-red-ball-cursor-ready a,
  body.kk-red-ball-cursor-ready button,
  body.kk-red-ball-cursor-ready input,
  body.kk-red-ball-cursor-ready textarea,
  body.kk-red-ball-cursor-ready select,
  body.kk-red-ball-cursor-ready label,
  body.kk-red-ball-cursor-ready summary,
  body.kk-red-ball-cursor-ready iframe,
  body.kk-red-ball-cursor-ready video,
  body.kk-red-ball-cursor-ready img,
  body.kk-red-ball-cursor-ready svg,
  body.kk-red-ball-cursor-ready canvas,
  body.kk-red-ball-cursor-ready .project-media,
  body.kk-red-ball-cursor-ready .project-media *,
  body.kk-red-ball-cursor-ready .detail-media,
  body.kk-red-ball-cursor-ready .detail-media *,
  body.kk-red-ball-cursor-ready .hero h1,
  body.kk-red-ball-cursor-ready .hero h1 * {
    cursor: none !important;
  }
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  body.kk-red-ball-cursor-ready,
  body.kk-red-ball-cursor-ready * {
    cursor: auto !important;
  }

  .kk-invert-cursor {
    display: none !important;
  }
}

/* ==========================================================
   2026-09-12 — PROJECT SCROLL REVEAL
   ========================================================== */
.project-card .project-media {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.project-card .project-media img,
.project-card .project-media video {
  backface-visibility: hidden;
}

@media (max-width: 767px) {
  .project-card .project-media {
    border-radius: 16px;
  }
}


/* ==========================================================
   2026-09-13 — FINAL CURSOR + MEDIA HOVER OVERRIDE
   One cursor only. Red ball everywhere, contrast mode on media.
   No cursor whatsoever during the preloader.
   ========================================================== */
@media (hover:hover) and (pointer:fine) {
  html:not(.kk-touch),
  html:not(.kk-touch) body,
  body.kk-red-ball-cursor-ready,
  body.kk-red-ball-cursor-ready * {
    cursor: none !important;
  }

  #jc-loader,
  #jc-loader * {
    cursor: none !important;
  }

  #jc-loader ~ .kk-invert-cursor,
  body:has(#jc-loader:not(.hidden)) .kk-invert-cursor {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.kk-red-ball-cursor-ready .kk-invert-cursor {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #F04438 !important;
    background-image: none !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
    opacity: 0;
    visibility: hidden;
    transform-origin: center center !important;
    transition: width .24s cubic-bezier(.22,1,.36,1), height .24s cubic-bezier(.22,1,.36,1), background-color .18s ease, opacity .12s ease !important;
  }

  body.kk-red-ball-cursor-ready .kk-invert-cursor.kk-on-media {
    width: 24px !important;
    height: 24px !important;
    background: #fff !important;
    mix-blend-mode: difference !important;
  }

  body.kk-red-ball-cursor-ready .kk-invert-cursor.kk-cursor-down {
    width: 14px !important;
    height: 14px !important;
  }

  /* Retire every previous cursor implementation completely. */
  .cb-cursor,
  .gsap-invert-cursor,
  [class*="cursor-dot"],
  [class*="cursor-circle"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Framer-like restrained hover response on project imagery. */
  .project-media {
    overflow: hidden !important;
  }

  .project-media > img,
  .project-media > video,
  .project-media picture > img {
    transform: translate3d(var(--kk-hover-x, 0px), var(--kk-hover-y, 0px), 0) scale(1) !important;
    transition: transform .65s cubic-bezier(.22,1,.36,1), filter .35s ease !important;
    will-change: transform;
  }

  .project-media.kk-media-hover > img,
  .project-media.kk-media-hover > video,
  .project-media.kk-media-hover picture > img {
    transform: translate3d(var(--kk-hover-x, 0px), var(--kk-hover-y, 0px), 0) scale(1.035) !important;
  }
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  .project-media > img,
  .project-media > video,
  .project-media picture > img {
    transform: none !important;
  }
}




/* ==========================================================
   ABSOLUTE FINAL CURSOR FIX
   RED BALL ONLY — HOME + ALL INNER PAGES
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  html,
  body,
  body *,
  body.kk-inner-page,
  body.kk-inner-page *,
  body.ravex-cursor-enabled,
  body.ravex-cursor-enabled *,
  body.kk-red-ball-cursor-ready,
  body.kk-red-ball-cursor-ready * {
    cursor: none !important;
  }

  a,
  a *,
  button,
  button *,
  input,
  textarea,
  select,
  label,
  summary,
  img,
  video,
  iframe,
  canvas,
  svg,
  picture,
  figure,
  .project-detail,
  .project-detail *,
  .detail-media,
  .detail-media *,
  .project-media,
  .project-media * {
    cursor: none !important;
  }

  .kk-invert-cursor {
    display: block !important;

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 18px !important;
    height: 18px !important;

    border-radius: 50% !important;

    background: #F04438 !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    mix-blend-mode: normal !important;

    pointer-events: none !important;

    z-index: 2147483647 !important;
  }
}


/* ==========================================================
   FINAL INNER-PAGE CURSOR OVERRIDE — 2026-09-14
   Keep only the same red round cursor used on index.html.
   ========================================================== */
@media (hover: hover) and (pointer: fine) {
  html body.bootstrap-site.kk-red-ball-cursor-ready:has(.project-detail),
  html body.bootstrap-site.kk-red-ball-cursor-ready:has(.project-detail) *,
  html body.bootstrap-site.ravex-cursor-enabled:has(.project-detail),
  html body.bootstrap-site.ravex-cursor-enabled:has(.project-detail) * {
    cursor: none !important;
  }

  html body.bootstrap-site:has(.project-detail) .kk-invert-cursor {
    display: block !important;
    position: fixed !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #F04438 !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
  }
}