/* ===========================================================================
   Logos — a thin, dark trust band. Sits flush under the hero: no top gap,
   no section padding worth the name. Height is FIXED (px only, no vh/vmin,
   no min-height, no aspect-ratio) and hard-capped with max-height so the
   band cannot grow when the viewport changes, at any width or height.
   The marks are dark-ink PNGs on transparent backgrounds; filter turns them
   into bright monocolour (white) silhouettes at high opacity so they read
   at a glance. The "embedded" feel comes from the textured ground and a
   light carve/emboss shadow on the marks themselves, not from fading them.
   Every selector is namespaced .lg-* and lives under .logos.
   =========================================================================== */

.logos{
 position:relative;
 z-index:2;
 overflow:hidden;
 isolation:isolate;
 background:
   repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),
   radial-gradient(ellipse 70% 140% at 50% -40%,#2b1c40 0%,transparent 60%),
   #1c1924;
 margin:0;
 padding:18px 5vw 22px;
 max-height:116px;
 text-align:center;
}

/* Grain so the band reads as a textured material — this is what carries the
   "embedding" effect, not the opacity of the logos. */
.lg-grain{
 position:absolute;
 inset:-2px;
 z-index:0;
 pointer-events:none;
 opacity:.6;
 mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
 background-size:140px 140px;
}

.lg-eyebrow{
 position:relative;
 z-index:1;
 margin:0 0 14px;
 color:#a99cc2;
 opacity:.6;
 font-family:ui-monospace,Menlo,monospace;
 font-size:10px;
 font-weight:600;
 letter-spacing:.16em;
 text-transform:uppercase;
}

.lg-marquee{
 position:relative;
 z-index:1;
 display:flex;
 width:100%;
 max-width:1500px;
 margin:0 auto;
 overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}

.lg-track{
 display:flex;
 flex-wrap:nowrap;
 align-items:center;
 flex:none;
 min-width:100%;
 margin:0;
 padding:0;
 list-style:none;
 gap:clamp(40px,5.5vw,80px);
 padding-right:clamp(40px,5.5vw,80px);
 animation:lg-scroll 48s linear infinite;
}
.lg-marquee:hover .lg-track{animation-play-state:paused}

.lg-item{
 flex:none;
 display:flex;
 align-items:center;
 justify-content:center;
 height:38px;
}
.lg-item img{
 height:20px;
 width:auto;
 max-width:none;
 object-fit:contain;
 /* Force the dark-ink mark to a clean white silhouette regardless of its
    original tint (monocolour), keep it bright enough to read at a glance,
    and add a light carve/emboss so it looks pressed into the surface
    rather than pasted on top of it. */
 filter:
   brightness(0) invert(1)
   drop-shadow(0 1px 1.5px rgba(0,0,0,.6))
   drop-shadow(0 -1px 0 rgba(255,255,255,.16));
 opacity:.86;
 transition:opacity .3s ease;
}
.lg-item-tall img{height:30px}
.lg-item:hover img{opacity:1}

@keyframes lg-scroll{to{transform:translateX(-100%)}}

@media(prefers-reduced-motion:reduce){
 .lg-track{animation:none}
 .lg-track[aria-hidden]{display:none}
}

@media(max-width:640px){
 .logos{padding:14px 5vw 16px;max-height:96px}
 .lg-eyebrow{margin-bottom:10px}
 .lg-item{height:30px}
 .lg-item img{height:16px}
 .lg-item-tall img{height:24px}
 .lg-track{gap:30px;padding-right:30px}
}