/* ==========================================================================
   Pearl IMS — animation library used across the site
   ========================================================================== */

@keyframes pim-marquee-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes pim-scroll-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes pim-scroll-down{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@keyframes pim-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes pim-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pim-pop{ from{ transform:translateY(14px) scale(.97); opacity:0; } to{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes pim-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pim-rise-sm{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pim-scale-in{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
@keyframes pim-count-blur{ from{ opacity:0; filter:blur(4px); } to{ opacity:1; filter:blur(0); } }

/* Scroll-reveal: elements start hidden, JS (reveal.js) adds .is-visible via IntersectionObserver.
   Progressive enhancement — if JS is disabled, base opacity/transform is neutral (visible) via the
   no-js fallback below, so content is never hidden without a script running. */
.pim-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.pim-reveal.is-visible{ opacity:1; transform:translateY(0); }
.pim-reveal--sm{ transform:translateY(12px); }
.pim-reveal--scale{ transform:scale(.94); }
.pim-reveal--scale.is-visible{ transform:scale(1); }
.pim-reveal--delay-1{ transition-delay:.08s; }
.pim-reveal--delay-2{ transition-delay:.16s; }
.pim-reveal--delay-3{ transition-delay:.24s; }
.pim-reveal--delay-4{ transition-delay:.32s; }
.pim-reveal--delay-5{ transition-delay:.4s; }
.pim-reveal--delay-6{ transition-delay:.48s; }
html.no-js .pim-reveal, body.pim-no-reveal .pim-reveal{ opacity:1; transform:none; }

/* ==========================================================================
   Trusted-by logo wall
   Horizontal rows drifting in alternating directions at one uniform speed.
   Every tile is the same size and every logo is normalised into it, which is
   what makes a set of wildly inconsistent uploaded logos read as a tidy wall.
   ========================================================================== */
.pim-logowall{ position:relative; padding:72px 0 64px; background:var(--pim-surface-tint); border-bottom:1px solid var(--pim-border-3); overflow:hidden; }
.pim-logowall::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(900px 320px at 50% -10%, rgba(27,63,224,.07), transparent 70%); }
.pim-logowall__head{ position:relative; text-align:center; max-width:760px; margin:0 auto; }
.pim-logowall__title{ margin:14px 0 0; font-weight:800; font-size:clamp(24px,3vw,34px); line-height:1.15; letter-spacing:-.025em; color:var(--pim-text); }
.pim-logowall__meta{ margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; font-size:14px; color:var(--pim-text-muted); }
.pim-logowall__meta strong{ color:var(--pim-text); font-weight:700; font-variant-numeric:tabular-nums; }
.pim-logowall__dot{ color:var(--pim-border-2); }

/* City rail — a spotlight, not a gate. Nothing is hidden behind a click:
   "All cities" is the default and every logo stays on the wall. */
.pim-logowall__filters{ position:relative; margin:30px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:900px; }
html.no-js .pim-logowall__filters{ display:none; }
.pim-city-chip{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--pim-border); border-radius:999px; background:#fff; color:var(--pim-text-muted); font-size:13px; font-weight:600; line-height:1; transition:color .2s, border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.pim-city-chip:hover{ color:var(--pim-text); border-color:var(--pim-border-2); transform:translateY(-1px); box-shadow:var(--pim-shadow-sm); }
.pim-city-chip.is-active{ background:var(--pim-navy-2); border-color:var(--pim-navy-2); color:#fff; box-shadow:var(--pim-shadow-sm); }
.pim-city-chip__count{ font:600 11px/1 var(--pim-font-mono); padding:3px 6px; border-radius:999px; background:var(--pim-surface-tint); color:var(--pim-text-faint-2); }
.pim-city-chip.is-active .pim-city-chip__count{ background:rgba(255,255,255,.16); color:#fff; }
.pim-city-chip:focus-visible{ outline:2px solid var(--pim-blue); outline-offset:2px; }

.pim-logowall__wall{ position:relative; margin-top:34px; display:flex; flex-direction:column; gap:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.pim-logowall__row{ overflow:hidden; }
.pim-logowall__track{ display:flex; gap:16px; width:max-content; will-change:transform; }
.pim-logowall__track--left{ animation:pim-marquee-x var(--pim-wall-duration,60s) linear infinite; }
.pim-logowall__track--right{ animation:pim-marquee-x var(--pim-wall-duration,60s) linear infinite reverse; }
/* Hovering anywhere in a row freezes that row. Pausing only the hovered tile
   would be useless — it would keep sliding out from under the cursor before the
   name could be read. */
.pim-logowall__row:hover .pim-logowall__track,
.pim-logowall__track.is-paused{ animation-play-state:paused; }

/* One tile, one footprint. Logos are contained (never cropped, never
   stretched), desaturated at rest so 90 different brand palettes don't fight,
   and multiply-blended so the white box around an opaque JPEG logo disappears
   into the tile. */
.pim-logo{ position:relative; flex:none; width:172px; height:96px; border:1px solid var(--pim-border); border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(12,19,49,.04); overflow:hidden; transition:opacity .35s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s; }
.pim-logo__frame{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px 20px; }
.pim-logo__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.04); opacity:.62; transition:filter .3s ease, opacity .3s ease; }
.pim-logo__mono{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:13px; background:var(--pim-mono,#1B3FE0); color:#fff; font-weight:800; font-size:18px; letter-spacing:.02em; opacity:.72; transition:opacity .3s ease; }
.pim-logo__caption{ position:absolute; left:0; right:0; bottom:0; padding:9px 12px 10px; background:linear-gradient(180deg, rgba(12,19,49,0) 0%, rgba(12,19,49,.94) 45%); color:#fff; transform:translateY(101%); opacity:0; transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease; }
.pim-logo__name{ display:block; font-weight:700; font-size:11.5px; line-height:1.25; max-height:2.5em; overflow:hidden; }
.pim-logo__city{ display:block; margin-top:2px; font:600 10px/1 var(--pim-font-mono); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.66); }
.pim-logo:hover{ transform:translateY(-3px); border-color:var(--pim-border-2); box-shadow:var(--pim-shadow-md,0 12px 28px rgba(12,19,49,.12)); }
.pim-logo:hover .pim-logo__img{ filter:none; opacity:1; }
.pim-logo:hover .pim-logo__mono{ opacity:1; }
.pim-logo:hover .pim-logo__caption{ transform:translateY(0); opacity:1; }

/* City filter: logowall.js rebuilds the rows from the matching tiles, so the
   treatment above is unchanged — they keep drifting, and keep revealing their
   name on hover. When the matches fit the container there is nothing to scroll,
   so the wall sits still and centres them instead of leaving a gap at the wrap. */
.pim-logowall__wall.is-static{ -webkit-mask-image:none; mask-image:none; }
.pim-logowall__wall.is-static .pim-logowall__row{ overflow:visible; }
.pim-logowall__wall.is-static .pim-logowall__track{ width:100%; flex-wrap:wrap; justify-content:center; animation:none !important; transform:none !important; }

.pim-logowall__foot{ margin:24px 0 0; text-align:center; font-size:13px; color:var(--pim-text-faint-2); }

@media (max-width: 720px){
  .pim-logowall{ padding:56px 0 48px; }
  .pim-logo{ width:146px; height:84px; }
  .pim-logowall__wall{ gap:12px; }
  .pim-logowall__track{ gap:12px; }
  .pim-logowall__filters{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pim-logowall__filters::-webkit-scrollbar{ display:none; }
  .pim-city-chip{ flex:none; }
}

/* No motion: fall back to a static, wrapped wall rather than a frozen strip
   that would cut logos off mid-tile. */
@media (prefers-reduced-motion: reduce){
  .pim-logowall__wall{ -webkit-mask-image:none; mask-image:none; }
  .pim-logowall__row{ overflow:visible; }
  .pim-logowall__row:nth-child(n+3){ display:none; }
  .pim-logowall__track{ width:auto; flex-wrap:wrap; justify-content:center; animation:none !important; transform:none !important; }
  .pim-logo:nth-child(n+13){ display:none; }
  .pim-logo__img{ filter:none; opacity:.85; }
}

/* Counter number animation (stat bands) ----------------------------------- */
.pim-counter{ display:inline-block; font-variant-numeric:tabular-nums; }