/* Page-end banner (partials/cognativ/end-banner.hbs, Kevin 2026-11-08). One box like the home hero: 24px radius, site
   border and shadow, 16:9 from 981px; inside, the site ground with drifting translucent circles under a glass layer. */
.cv-end-banner-box {
    position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
    aspect-ratio: 8 / 3; padding: clamp(24px, 3vw, 48px); border-radius: 24px;
    border: 1px solid rgb(34 18 89 / 9%);
    background: linear-gradient(120deg, #ffffff 0%, #ece6fb 16%, #d2c5f3 34%, #f8f5fe 50%, #ddd1f7 68%, #bba9ec 86%, #ffffff 100%) 0 0 / 300% 300%;
    animation: cv-end-gradient 16s ease-in-out infinite alternate; /* white / purple, fills the whole box (Kevin 2026-11-08) */
    box-shadow: 0 1px 2px rgb(34 18 89 / 4%), 0 12px 32px rgb(34 18 89 / 6%);
}
.cv-end-banner-art { position: absolute; inset: 0; z-index: -2; }
/* The first banner background again (Kevin 2026-11-08, after trying seven colors and the aurora): four translucent lilac,
   green and mint circles, smaller for the 8:3 box, drifting at different speeds. Transform only. */
.cv-end-banner-art > span { position: absolute; border-radius: 50%; will-change: transform; animation: cv-end-drift 18s ease-in-out infinite alternate; }
.cv-end-banner-art > span:nth-child(1) { width: 62%; aspect-ratio: 1; left: -16%; top: -60%; background: rgb(206 203 246 / 50%); }
.cv-end-banner-art > span:nth-child(2) { width: 52%; aspect-ratio: 1; right: -12%; bottom: -80%; background: rgb(192 221 151 / 48%); animation-duration: 22s; animation-delay: -8s; }
.cv-end-banner-art > span:nth-child(3) { width: 34%; aspect-ratio: 1; right: -8%; top: -45%; background: rgb(159 225 203 / 48%); animation-duration: 15s; animation-delay: -4s; }
.cv-end-banner-art > span:nth-child(4) { width: 28%; aspect-ratio: 1; left: 30%; bottom: -55%; background: rgb(159 225 203 / 40%); animation-duration: 20s; animation-delay: -14s; }
@keyframes cv-end-drift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(12%, 10%) scale(1.08); }
    66% { transform: translate(-8%, 14%) scale(.94); }
    100% { transform: translate(6%, -10%) scale(1.04); }
}
/* Variant 10 "colored dots" (Kevin 2026-11-08: much less solid, integrated with the page): the bubbles show only
   through a dot grid (same 28px rhythm as the page), so dots light up in lilac, green and mint as the bubbles drift
   under them; a second copy of the bubbles, blurred at low opacity, adds a faint wash. A light sheen and white top
   edge keep the box readable, no heavy blur. */
.cv-end-banner-art:not(.cv-end-banner-art--wash) {
    -webkit-mask: radial-gradient(circle, #000 1.6px, transparent 2.1px) 0 0 / 14px 14px;
    mask: radial-gradient(circle, #000 1.6px, transparent 2.1px) 0 0 / 14px 14px;
}
.cv-end-banner-art:not(.cv-end-banner-art--wash) > span { filter: saturate(2.2) brightness(.82); }
.cv-end-banner-art--wash { opacity: .28; filter: blur(30px); }
.cv-end-banner-box::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(135deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 4%) 60%, rgb(255 255 255 / 10%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%);
}
.cv-end-banner-content { display: grid; justify-items: center; gap: 0; width: 100%; text-align: center; } /* full section width (Kevin) */
.cv-end-banner-content > .cv-v1-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px; }
.cv-end-banner-content > h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1.15; color: var(--cv-content-title-color, #221259); text-wrap: balance; }
.cv-end-banner-content > p:not(.cv-v1-tags) { margin: 16px 0 0; max-width: 100%; font-size: 18px; text-wrap: balance; line-height: 1.6; color: var(--cv-muted, #5c5374); }
.cv-end-banner-content > .cv-v1-text-link { margin-top: 24px; color: var(--cv-content-title-color, #221259); }
.cv-end-banner-mark { position: absolute; right: 17px; bottom: 17px; line-height: 0; }
.cv-end-banner-mark img { width: 40px; height: 40px; }
@media (max-width: 980px) {
    .cv-end-banner-box { aspect-ratio: auto; padding: 56px 24px 72px; }
    .cv-end-banner-content > p:not(.cv-v1-tags) { font-size: 16px; }
    /* Tall phone box: bigger circles so the color still reaches the content. */
    .cv-end-banner-art > span:nth-child(1) { width: 100%; left: -45%; top: -18%; }
    .cv-end-banner-art > span:nth-child(2) { width: 95%; right: -45%; bottom: -20%; }
    .cv-end-banner-art > span:nth-child(3) { width: 60%; right: -25%; top: -10%; }
    .cv-end-banner-art > span:nth-child(4) { width: 55%; left: -15%; bottom: -15%; }
}
@media (prefers-reduced-motion: reduce) { .cv-end-banner-art > span { animation: none; } }

@keyframes cv-end-gradient { 0% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } 100% { background-position: 40% 0%; } }
@media (prefers-reduced-motion: reduce) { .cv-end-banner-box { animation: none; } }

/* Hero-style closing banner (Kevin 2026-11-08): replaces the light gradient. Dark violet ground, the connecting-people
   poster/video inverted to light nodes on dark and tinted violet, the hero glass frame (violet veil 14% -> 32%, 30% white
   border, white top edge), white copy; badges keep the site style (Kevin). Video fades in once playing (data-video-ready). */
.cv-end-banner-box--hero:not(#cv-row) {
    background: linear-gradient(135deg, #2b1f63, #1d1446 60%, #2f2270); animation: none; border-color: rgb(255 255 255 / 18%);
    box-shadow: 0 18px 44px rgb(34 18 89 / 18%);
}
.cv-end-banner-box--hero > :is(.cv-end-banner-art, .cv-end-banner-video) {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
    filter: invert(1) hue-rotate(180deg) saturate(1.4) brightness(.9); mix-blend-mode: screen; opacity: .55;
}
.cv-end-banner-box--hero > .cv-end-banner-video { opacity: 0; transition: opacity .8s ease; }
.cv-end-banner-box--hero[data-video-ready] > .cv-end-banner-video { opacity: .55; }
.cv-end-banner-box--hero[data-video-ready] > .cv-end-banner-art { opacity: 0; }
.cv-end-banner-box--hero::after {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(180deg, rgb(24 13 64 / 14%), rgb(24 13 64 / 32%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%);
}
.cv-end-banner-box--hero .cv-end-banner-content > :is(h2, p:not(.cv-v1-tags), .cv-v1-text-link) { color: #fff; }
.cv-end-banner-box--hero .cv-end-banner-content > p:not(.cv-v1-tags) { color: rgb(255 255 255 / 86%); }
.cv-end-banner-box--hero .cv-end-banner-content > h2 { -webkit-text-stroke-color: #fff; }
:root:root body:not(#cv-body) .cv-end-banner-box--hero .cv-v1-text-link:not(#cv-row) { color: #fff; }
:root:root body:not(#cv-body) .cv-end-banner-box--hero .cv-v1-text-link:not(#cv-row) svg { color: #fff; stroke: currentColor; }
/* Same badges as the rest of the site (Kevin): on the dark box they get the light base they have on white cards. */
:root:root body:not(#cv-body) .cv-end-banner-box--hero .cv-v1-tags > .cv-badge-icon:not(#cv-row) {
    background: linear-gradient(180deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 8%)), color-mix(in srgb, currentColor 5%, #f8f9fb);
}
/* Type scale = the home hero (Kevin 2026-11-08: the banner text was larger than the hero's): title ~37px at 1440
   like the hero H1, 18px lead, 16px CTA; phone sizes follow the hero phone rule. */
:root:root body:not(#cv-body) .cv-end-banner-content > h2:not(#cv-row) { font-size: clamp(28px, 2.57vw, 37px); line-height: 1.15; }
:root:root body:not(#cv-body) .cv-end-banner-content > .cv-v1-text-link:not(#cv-row) { font-size: 16px; line-height: 1.5; }
@media (max-width: 700px) { :root:root body:not(#cv-body) .cv-end-banner-content > h2:not(#cv-row) { font-size: clamp(25px, 7.2vw, 30px); } }