
/* Override Framer grid → single-row carousel */
.framer-bW7uD .framer-9uv7q3,
.framer-bW7uD.framer-v-1decmf4 .framer-9uv7q3,
.framer-bW7uD.framer-v-11eg4xx .framer-9uv7q3 {
  display: block !important;
  /* Visual height matches the scaled track (220 × 0.7 = 154). The track's
     layout box stays 220 tall so every per-logo hover-top rule remains
     valid in unscaled coordinates; only the visual paint shrinks. */
  height: 154px !important;
  overflow: hidden !important;
  grid-template-rows: unset !important;
  grid-template-columns: unset !important;
  grid-auto-rows: unset !important;
  gap: 0 !important;
}
.ias-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;                /* tightened from 24px */
  width: max-content;
  height: 220px;            /* internal layout height — unchanged */
  will-change: transform;
  transform-origin: 0 0;    /* anchor scale at top-left so visual track
                               fills the 154 container starting from top */
  transform: scale(0.7);    /* 30% scale-down stays on the track (no
                               per-frame rewrite — the rAF now writes
                               translateX onto each .ias-cell instead).  */
}
.ias-cell {
  flex: none;
  width: 280px;
  height: 220px;
  position: relative;
  will-change: transform;
}
/* Card containers (.framer-XXX-container, .framer-e3v-container) fill
   the cell. Framer's existing inline transform (perspective + scroll-
   reveal translateY) is preserved — we set translateX on the parent
   cell, not on the container, so the two transforms compose cleanly. */
.ias-cell > div {
  width: 100% !important;
  height: 100% !important;
  position: relative;
}

/* ════════════════════════════════════════════════════════════
   E3 Venture card — exact replica of the other logos' hover
   ────────────────────────────────────────────────────────────
   The other six cards are React-managed. On hover, Framer
   renders four corner brackets (#fdc93c, 32×32, 12px rounded
   outer corner) and a Rubik 24px name label below the mark,
   and shifts the inner image up by 24px (top: 86 → 62).

   The E3 card is NOT in React's tree, so all those elements
   must be in the DOM permanently and hidden until hover. The
   rules below provide that visibility gating without changing
   any of the structural CSS that already exists for the React
   cards.
   ════════════════════════════════════════════════════════════ */

/* Resting state — corner brackets and name label hidden.
   Transitions match the inline `transition: transform 0.4s
   cubic-bezier(0.34, 1.4, 0.64, 1)` that framer-motion sets
   on the inner image of the React cards, so timing is identical. */
.framer-e3v-container .framer-e3v-corner,
.framer-e3v-container .framer-e3v-label {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* SVG color — sampled brand gray at rest, original orange on hover. */
.framer-e3v-container .framer-e3v-img {
  color: #5f5f5f;
  transition: color 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Hover state — both :hover (native) and .hover (added by
   wireE3Hover for clones, and on real hover via JS for the
   original, since framer-motion isn't managing this card). */
.framer-e3v-container a.framer-e3v-anchor:hover .framer-e3v-corner,
.framer-e3v-container a.framer-e3v-anchor.hover  .framer-e3v-corner,
.framer-e3v-container a.framer-e3v-anchor:hover .framer-e3v-label,
.framer-e3v-container a.framer-e3v-anchor.hover  .framer-e3v-label {
  opacity: 1;
}
.framer-e3v-container a.framer-e3v-anchor:hover .framer-e3v-img,
.framer-e3v-container a.framer-e3v-anchor.hover  .framer-e3v-img {
  color: #F5A623; /* original E3 brand orange */
}

/* ════════════════════════════════════════════════════════════
   Carousel clones — parity with the React-managed originals
   ────────────────────────────────────────────────────────────
   The clone loop in initCarousel uses cloneNode(true) which
   copies the REST-state DOM. Framer's React only renders the
   four corner brackets and the name <h3> when its hover variant
   is active, so clones never inherit them.

   `decorateClone()` injects those elements at clone time. The
   rules below hide them by default and reveal them when the
   anchor receives `.hover` (added by wireCloneHover on real
   pointer hover). The inner-image position transitions are
   re-declared on clones because framer-motion is the one that
   normally animates them; without that runtime the CSS `top`
   rule would snap instantly without these declarations.
   ════════════════════════════════════════════════════════════ */

/* Hide injected decorations at rest; fade in on hover */
.ias-clone-corner,
.ias-clone-label {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ias-clone a.framer-6bJpZ.hover .ias-clone-corner,
.ias-clone a.framer-6bJpZ.hover .ias-clone-label {
  opacity: 1;
}

/* Smooth the inner-image lift when .hover toggles. Targets every
   per-logo inner class — each card's CSS hover rule changes some
   subset of top/left/width, so all four properties get a
   transition (transform included for the centering cards below).
   Originals are excluded (framer-motion owns their animation);
   only clones and the E3 card need this. */
.ias-clone .framer-1bzum7w,
.ias-clone .framer-1xp4jsn,
.ias-clone .framer-2sb9oy,
.ias-clone .framer-1ddlph6,
.ias-clone .framer-cnw5f1,
.ias-clone .framer-1efo66n,
.framer-e3v-container .framer-1ddlph6 {
  transition: top       0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
              left      0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
              width     0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
              transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

/* Per-card hover transform overrides — copy framer-motion's
   exact settled hover state for each inner element so the clone
   ends up pixel-identical to the original on hover.

   These values were captured by hovering each original card in
   the live page and reading inner.style.transform after the
   framer-motion animation settled (>1s into hover):

     Inframodern : translate3d(-0.0848, 16.4512, 0) scale(1.16462, 1)
                   — the scale(1.16,1) keeps the CSS-shrunk 23% box
                     visually at its rest 75px width
     Radix       : translateX(-50%) translate3d(0, 16.4512, 0)
                   — horizontal centering preserved + lift
     Rayyan      : translate3d(0, 19.5996, 0)
     DealApp     : translate3d(0, 16.8008, 0)
     BuildNow    : translateX(-50%) translate3d(0, 28.001, 0)
     Envoy       : translate3d(0, 16.8008, 0)
*/
.ias-clone a.framer-6bJpZ.hover .framer-1bzum7w {
  transform: translate3d(-0.0848px, 16.4512px, 0) scale(1.16462, 1) !important;
}
.ias-clone a.framer-6bJpZ.hover .framer-1xp4jsn {
  transform: translateX(-50%) translate3d(0, 16.4512px, 0) !important;
}
.ias-clone a.framer-6bJpZ.hover .framer-2sb9oy {
  transform: translate3d(0, 19.5996px, 0) !important;
}
.ias-clone a.framer-6bJpZ.hover .framer-1ddlph6 {
  transform: translate3d(0, 16.8008px, 0) !important;
}
.ias-clone a.framer-6bJpZ.hover .framer-cnw5f1 {
  transform: translateX(-50%) translate3d(0, 28.001px, 0) !important;
}
.ias-clone a.framer-6bJpZ.hover .framer-1efo66n {
  transform: translate3d(0, 16.8008px, 0) !important;
}

.framer-toyo3y > div::before,
.framer-toyo3y > div .ias-xs-pill-bubble-layer {
  display: none !important;
}
