/* VC4 blue version: the Customers page (blue/customers.html) in the Home style. Sections spaced like Home; the
   customer references rebuilt as a clean grid of white tiles divided by hairlines, the white and hairline language of
   the logo wall above them, in place of the timeline on the swirl picture; the last tile ("Will you be next?") fills
   the final row. */

/* ---------- Spacing as on Home: 56px, 48px on laptops, 40px on phones ---------- */
html[data-blue] body:has(.b-cust-hero) main > :is(section, div):not(.b-cust-hero):not(.sec-chev):not(.final-cta-wrap):not(.page-spacer):not(.hero-breadcrumb) { padding-top: 56px !important; padding-bottom: 56px !important; }
html[data-blue] body:has(.b-cust-hero) main > #customers { padding-bottom: 32px !important; }
html[data-blue] body:has(.b-cust-hero) main > .logo-wall { padding-top: 0 !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-cust-hero) main > :is(section, div):not(.b-cust-hero):not(.sec-chev):not(.final-cta-wrap):not(.page-spacer):not(.hero-breadcrumb) { padding-top: 48px !important; padding-bottom: 48px !important; }
    html[data-blue] body:has(.b-cust-hero) main > .logo-wall { padding-top: 0 !important; }
}
@media (max-width: 900px) { html[data-blue] body:has(.b-cust-hero) main > :is(section, div):not(.b-cust-hero):not(.sec-chev):not(.final-cta-wrap):not(.page-spacer):not(.hero-breadcrumb) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-cust-hero) main h2.b-h2 { margin-bottom: 22px !important; }

/* ---------- Customer references: the original timeline in the blue palette ----------
   A navy-to-teal gradient band, two columns of glass tiles, a large ghost year behind each tile, and the winding line
   (drawn by the page script) with glowing nodes; its colours flow along it, teal to light blue to orange. */
html[data-blue] .b-refs { position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(1100px 620px at 88% 8%, rgba(19, 142, 150, .38), transparent 60%),
                radial-gradient(900px 600px at 6% 92%, rgba(63, 193, 201, .18), transparent 62%),
                linear-gradient(165deg, #011628 0%, #02263F 38%, #0B3D5C 72%, #0B5258 100%) !important; }
html[data-blue] .b-refs::before, html[data-blue] .b-refs::after { display: none !important; }
html[data-blue] .b-refs .blog-eyebrow { color: #3FC1C9 !important; }
html[data-blue] .b-refs .b-h2 { color: #fff !important; }
html[data-blue] .b-refs .b-h2 em { background: linear-gradient(100deg, #3FC1C9 10%, #ADDDF6 95%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
html[data-blue] .b-refs .ref-intro { color: rgba(220, 236, 246, .86) !important; }
html[data-blue] .b-refs .b-mbtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 13px 24px; border: 1px solid rgba(173, 221, 246, .45); border-radius: 999px;
    background: transparent !important; color: #fff !important; font: 800 14px/1 'Lato', sans-serif; cursor: pointer; transition: background .25s ease, border-color .25s ease; }
html[data-blue] .b-refs .b-mbtn:hover { background: rgba(63, 193, 201, .16) !important; border-color: #3FC1C9; }
html[data-blue] .b-refs .b-mbtn .ti { color: #3FC1C9; }

/* two columns with a gutter for the line to weave through */
html[data-blue] .b-refs .ref-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px 88px !important; position: relative; z-index: 0;
    padding: 50px 44px 26px !important; margin-top: 8px; background: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
html[data-blue] .b-refs .ref-grid > svg.ref-path { display: block !important; position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; overflow: visible; pointer-events: none;
    filter: drop-shadow(0 0 7px rgba(63, 193, 201, .55)); }
html[data-blue] .b-refs .ref-path .ref-line { fill: none; stroke: url(#refGrad); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
html[data-blue] .b-refs .ref-path .ref-node { fill: #3FC1C9; transform-box: fill-box; transform-origin: center; animation: refCore 3.2s ease-in-out infinite; }
html[data-blue] .b-refs .ref-path .ref-halo { fill: none; stroke: #3FC1C9; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: refHalo 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }
html[data-blue] .b-refs .ref-path .ref-node:nth-of-type(3n) { fill: #EB552C; }
html[data-blue] .b-refs .ref-path .ref-halo:nth-of-type(3n) { stroke: #EB552C; }
@keyframes refCore { 0%, 100% { transform: scale(.88); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes refHalo { 0% { transform: scale(.45); opacity: .75; stroke-width: 3; } 65%, 100% { transform: scale(2.6); opacity: 0; stroke-width: 1; } }

/* glass tiles */
html[data-blue] .b-refs .ref-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 30px 24px !important; margin: 0 !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #fff; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
html[data-blue] .b-refs .ref-card::after { content: none !important; display: none !important; }
html[data-blue] .b-refs .ref-card::before { content: '' !important; display: block !important; position: absolute; inset: 0; z-index: -1; border-radius: 22px;
    background: rgba(2, 38, 63, .55); border: 1px solid rgba(173, 221, 246, .2);
    backdrop-filter: blur(22px) saturate(.8); -webkit-backdrop-filter: blur(22px) saturate(.8);
    box-shadow: 0 18px 44px rgba(1, 14, 26, .42), inset 0 1px 0 rgba(255, 255, 255, .12); transition: border-color .3s ease, background .3s ease; }
html[data-blue] .b-refs .ref-card:hover { transform: translateY(-6px) !important; background: none !important; }
html[data-blue] .b-refs .ref-card:hover::before { border-color: rgba(63, 193, 201, .6); background: rgba(2, 38, 63, .45); }
html[data-blue] .b-refs .ref-top { display: block; margin-bottom: 6px; }
html[data-blue] .b-refs .ref-name { font: 800 18px/1.25 'Lato', sans-serif !important; letter-spacing: -.015em; color: #fff !important; }
/* the large ghost year behind the tile, alternating sides */
html[data-blue] .b-refs .ref-year, html[data-blue] .b-refs .ref-card:nth-child(even) .ref-year { position: absolute !important; top: -36px; right: 22px; left: auto; z-index: -2; pointer-events: none;
    font: 900 clamp(2rem, 3.3vw, 3rem)/1 'Lato', sans-serif !important; letter-spacing: -.02em; opacity: 1 !important; transform: none !important;
    color: rgba(63, 193, 201, .3) !important; -webkit-text-stroke: 2px rgba(173, 221, 246, .28) !important; paint-order: stroke fill; transition: color .3s ease; }
html[data-blue] .b-refs .ref-card:nth-child(even) .ref-year { right: auto; left: 22px; }
html[data-blue] .b-refs .ref-card:hover .ref-year { color: rgba(63, 193, 201, .55) !important; }
html[data-blue] .b-refs .ref-meta { font: 900 10px/1.4 'Lato', sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: #3FC1C9 !important; margin-bottom: 12px; }
html[data-blue] .b-refs .ref-desc { font: 400 14.5px/1.6 'Lato', sans-serif !important; color: rgba(220, 236, 246, .86) !important; margin: 0 !important; }
/* technologies as one quiet dotted line, as on the original */
html[data-blue] .b-refs .ref-tags { display: block !important; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(173, 221, 246, .16); font: 400 12px/1.8 'Lato', sans-serif; color: rgba(173, 221, 246, .72); }
html[data-blue] .b-refs .ref-tag { display: inline !important; background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; font: inherit !important; color: inherit !important; white-space: normal; }
html[data-blue] .b-refs .ref-tag:not(:last-child)::after { content: '\00a0\00b7\00a0'; color: rgba(173, 221, 246, .35); }
/* the closing tile */
html[data-blue] .b-refs .ref-card.ref-next { text-decoration: none; justify-content: center; gap: 10px; }
html[data-blue] .b-refs .ref-card.ref-next::before { background: linear-gradient(150deg, rgba(19, 142, 150, .55), rgba(2, 38, 63, .7)); border-color: rgba(63, 193, 201, .5); }
html[data-blue] .ref-next-k { font: 900 10.5px/1 'Lato', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3FC1C9; }
html[data-blue] .ref-next-h { font: 800 30px/1.08 'Lato', sans-serif; letter-spacing: -.035em; color: #fff; }
html[data-blue] .ref-next-h em { font-style: normal; background: linear-gradient(100deg, #3FC1C9 10%, #ADDDF6 95%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
html[data-blue] .ref-next-p { font: 400 14.5px/1.6 'Lato', sans-serif; color: rgba(220, 236, 246, .85); }
html[data-blue] .ref-next-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 800 13.5px/1 'Lato', sans-serif; color: #fff; }
html[data-blue] .ref-next-go .ti { color: #3FC1C9; transition: transform .3s ease; }
html[data-blue] .ref-next:hover .ref-next-go .ti { transform: translateX(4px); }
@media (max-width: 980px) {
    html[data-blue] .b-refs .ref-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; padding: 40px 0 20px 30px !important; }
    html[data-blue] .b-refs .ref-year, html[data-blue] .b-refs .ref-card:nth-child(even) .ref-year { top: -28px; right: 16px; left: auto; font-size: 2.1rem !important; }
}
/* customer quotes as on Home: a white section, navy heading, Lato quotes in white cards with a hairline border */
html[data-blue] body:has(.b-cust-hero) #testimonials { background: #fff !important; background-image: none !important; }
html[data-blue] body:has(.b-cust-hero) #testimonials::before, html[data-blue] body:has(.b-cust-hero) #testimonials::after,
html[data-blue] body:has(.b-cust-hero) #testimonials .quotes-bg { display: none !important; }
html[data-blue] body:has(.b-cust-hero) #testimonials .blog-eyebrow { color: #138E96 !important; }
html[data-blue] body:has(.b-cust-hero) #testimonials .q-card { background: #fff !important; border: 1px solid #E3E7EE !important; box-shadow: 0 18px 40px -28px rgba(2, 38, 63, .35) !important; }
html[data-blue] body:has(.b-cust-hero) #testimonials .q-text { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 300 !important; color: #02263F !important; }
html[data-blue] body:has(.b-cust-hero) #testimonials .q-mark { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 900 !important; }
/* Customer logo tiles, as on the reference site: a rounded white tile with the logo in colour on top, a hairline,
   and the name below; rows of eight, the last tile is the "Will you be next?" welcome tile */
html[data-blue] .b-logo-tiles { background: #fff; padding: 8px 0 72px; }
html[data-blue] .b-lt-grid { list-style: none; margin: 0 auto; padding: 0 40px; max-width: 1360px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
html[data-blue] .b-lt { display: flex; flex-direction: column; background: #fff; border: 1px solid #E3E7EE; border-radius: 22px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
html[data-blue] .b-lt:hover { border-color: rgba(19, 142, 150, .45); box-shadow: 0 14px 30px -18px rgba(2, 38, 63, .35); transform: translateY(-2px); }
html[data-blue] .b-lt-logo { height: 118px; display: flex; align-items: center; justify-content: center; padding: 18px 22px; border-bottom: 1px solid #E3E7EE; }
html[data-blue] .b-lt-logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
html[data-blue] .b-lt-name { padding: 16px 20px 20px; font: 700 16px/1.25 'Lato', sans-serif; color: #02263F; }
/* the welcome tile */
html[data-blue] .b-lt-next { background: linear-gradient(150deg, #02263F 0%, #0B5258 60%, #138E96 100%); border-color: transparent; }
html[data-blue] .b-lt-next a { display: flex; flex-direction: column; height: 100%; color: #fff; text-decoration: none; }
html[data-blue] .b-lt-next .b-lt-logo { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; border-bottom-color: rgba(255, 255, 255, .18); }
html[data-blue] .b-lt-k { font: 900 10px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #3FC1C9; }
html[data-blue] .b-lt-q { font: 800 20px/1.15 'Lato', sans-serif; color: #fff; }
html[data-blue] .b-lt-q em { font-style: normal; background: linear-gradient(90deg, #3FC1C9, #ADDDF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-blue] .b-lt-next .b-lt-name { color: #fff; font-size: 14px; flex: 1; }
html[data-blue] .b-lt-next:hover .b-lt-name { color: #EB552C; }
@media (max-width: 1280px) { html[data-blue] .b-lt-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 980px) { html[data-blue] .b-lt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0 24px; } }
@media (max-width: 600px) { html[data-blue] .b-lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 16px; } html[data-blue] .b-lt-logo { height: 96px; } html[data-blue] .b-lt-name { font-size: 14px; padding: 12px 14px 16px; } }
html[data-blue] .b-lt-next .b-lt-logo { padding: 14px 16px; gap: 7px; }
html[data-blue] .b-lt-k { font-size: 8.5px; letter-spacing: .1em; line-height: 1.3; }
html[data-blue] .b-lt-q { font-size: 17px; }
html[data-blue] .b-lt-next .b-lt-name { font-size: 13px; padding: 16px 16px 18px; }
/* the original page's #references rules outrank the ones above, so the node colours and years are restated at that weight */
html[data-blue] #references .ref-path .ref-node { fill: #3FC1C9; }
html[data-blue] #references .ref-path .ref-halo { stroke: #3FC1C9; }
html[data-blue] #references .ref-path .ref-node:nth-of-type(4n), html[data-blue] #references .ref-path .ref-halo:nth-of-type(4n) { fill: #EB552C; }
html[data-blue] #references .ref-path .ref-halo:nth-of-type(4n) { fill: none; stroke: #EB552C; }
html[data-blue] #references .ref-path { filter: drop-shadow(0 0 7px rgba(63, 193, 201, .55)); }
html[data-blue] #references .ref-year { color: rgba(63, 193, 201, .42) !important; -webkit-text-stroke: 2px rgba(173, 221, 246, .36) !important; }
html[data-blue] #references .ref-card:hover .ref-year { color: rgba(63, 193, 201, .65) !important; }
html[data-blue] #references .ref-tag { white-space: normal !important; } html[data-blue] #references .ref-tags { overflow-wrap: anywhere; }
html[data-blue] #references .ref-next .ref-next-k { color: #fff; opacity: .85; } html[data-blue] #references .ref-next .ref-next-h em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #02263F; } html[data-blue] #references .ref-next .ref-next-go .ti { color: #fff; }