/* VC4 blue version: the Customers page hero, set up like the reference site's customers.html (Dave's, block
   "logo-wall-hero"): the calm light hero with navy copy on the left and a tilted wall of customer logos drifting up
   and down on the right (tiles written by blue/hero-customers.js).
   The wall, tiles and chip are the reference's own styles (.cwall, .ccol, .ctrack, .ctile, .cchip), renamed b-cust-*,
   with its color tokens written out from assets/theme.css + assets/themes/s2c.css. Lato, the site font, stands in for
   the reference's Sora and JetBrains Mono. The wall's top offset loses the reference's 76px header, which sits outside
   the hero here. The drift runs whatever the OS motion setting (the reference's reduced-motion stop is left out). */

/* ---------- Hero copy on the light background: navy text, buttons keep their colors ---------- */
html[data-blue] .b-cust-hero .blog-eyebrow { color: #138E96 !important; }
html[data-blue] .b-cust-hero .blog-hero-desc { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-cust-hero .blog-hero-desc strong { color: #02263F; }
/* the white outline button would vanish on the light ground, so it takes navy text and outline */
html[data-blue] .b-cust-hero .hero-btn-ghost { color: #02263F; border-color: rgba(2, 38, 63, .35); background: rgba(255, 255, 255, .5); }
html[data-blue] .b-cust-hero .hero-btn-ghost:hover { border-color: #02263F; background: rgba(255, 255, 255, .8); }
/* the copy keeps to the left so the wall has room beside it (reference: .cu-hero .copy{max-width:500px}) */
html[data-blue] .b-cust-hero .b-cust-copy { max-width: 500px; position: relative; z-index: 2; }
/* room for the wall, as the reference gives its hero (.cu-hero{min-height:min(100svh,760px)}), less its 76px header, with the copy centered in it */
@media (min-width: 901px) { html[data-blue] .b-cust-hero { min-height: min(calc(100svh - 76px), 684px); justify-content: center; } }
@media (min-width: 901px) and (max-width: 1100px) { html[data-blue] .b-cust-hero .b-cust-copy { max-width: calc(54vw - 100px); } }

/* ---------- Logo wall ---------- */
.b-cust-wall { position: absolute; top: 24px; bottom: 28px; right: max(56px, calc((100vw - 1400px) / 2 + 56px)); width: min(44%, 600px); z-index: 1; perspective: 1600px; pointer-events: none; }
.b-cust-wall-in { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; transform: rotateY(-14deg) rotateX(6deg); transform-origin: 70% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.b-cust-col { overflow: hidden; min-width: 0; }
.b-cust-track { display: flex; flex-direction: column; gap: 14px; animation: bCustDrift var(--sp, 46s) linear infinite; }
.b-cust-col:nth-child(2) .b-cust-track { animation-direction: reverse; --sp: 54s; }
.b-cust-col:nth-child(3) .b-cust-track { --sp: 40s; }
@keyframes bCustDrift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
.b-cust-tile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; background: #FFFFFF; border: 1px solid #E3E7EE; box-shadow: 0 18px 36px -24px rgba(2, 38, 63, .4); }
.b-cust-tile img { position: absolute; left: 17%; top: 18%; width: 66%; height: 64%; max-width: none; object-fit: contain; }
/* square, full-bleed marks read far heavier than wordmarks, so they sit smaller */
.b-cust-tile img[src$="orange-logo.png"], .b-cust-tile img[src$="telekom-greece.png"] { transform: scale(.62); }
.b-cust-chip { position: absolute; left: -18px; bottom: 16%; z-index: 2; display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(2, 38, 63, .07); border-radius: 16px; padding: 12px 16px 12px 12px;
    box-shadow: 0 20px 40px -18px rgba(2, 38, 63, .4); }
.b-cust-chip .ok { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(19, 142, 150, .12); color: #138E96; }
.b-cust-chip small { display: block; font: 900 9.5px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #138E96; margin-bottom: 5px; }
.b-cust-chip b { font: 700 14px/1.2 'Lato', sans-serif; color: #02263F; letter-spacing: -.01em; }
@media (max-width: 1100px) { .b-cust-wall { width: 44%; right: 40px; } }
@media (max-width: 900px) {
    .b-cust-wall { position: relative; top: auto; right: auto; width: auto; max-width: 560px; height: 340px; margin: 72px auto 0; padding-inline: clamp(16px, 4vw, 40px); }
    /* the hero is a flex column here, so the box takes the full width itself (a block in the reference) */
    html[data-blue] .b-cust-wall { width: 100%; box-sizing: border-box; }
    .b-cust-wall-in { inset: 0 clamp(16px, 4vw, 40px); transform: rotateX(8deg); }
    .b-cust-chip { left: calc(clamp(16px, 4vw, 40px) + 8px); bottom: 22px; }
}
@media (max-width: 560px) {
    .b-cust-wall { height: 280px; margin-top: 60px; }
    .b-cust-wall-in { gap: 10px; }
    .b-cust-track { gap: 10px; }
    .b-cust-tile { border-radius: 12px; }
}