/* Bauhaus cards: the flat geometric language of the Velar Instagram, used on the site */
.f-ink { fill: var(--graphite); } .f-sig { fill: var(--signal); } .f-steel { fill: var(--steel); } .f-steel2 { fill: var(--steel-2); }
.f-slate { fill: var(--slate); } .f-g3 { fill: var(--graphite-3); } .f-mist { fill: var(--mist); } .f-paper { fill: var(--paper); }

.mani__tiles.bh-grid { height: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bh { background: var(--steel); color: var(--graphite); padding: clamp(14px, min(1.4vw, 20.16px), 20px); display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: transform .5s var(--ease); }
.bh:hover { transform: translateY(-6px); }
.bh__top, .bh__foot { display: flex; justify-content: space-between; gap: 10px; font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.bh__foot { margin-top: auto; color: var(--slate); }
.bh__t { margin: 0; font-weight: 500; font-size: clamp(1.35rem, min(1.9vw, 27.36px), 1.9rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; min-height: 2.1em; }
.bh__art { position: relative; aspect-ratio: 29 / 20; border-radius: 10px; overflow: hidden; background: var(--graphite); }
.bh__art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bh__cap { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--slate); }

/* identity: the V breathes, shapes drift */
.bh-v { transform-origin: 145px 100px; animation: bhV 5s var(--ease) infinite; }
@keyframes bhV { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.bh-spin { transform-origin: 0 0; animation: bhSpin 8s linear infinite; }
@keyframes bhSpin { to { transform: rotate(360deg); } }
.bh-bob { animation: bhBob 2.8s ease-in-out infinite; }
@keyframes bhBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* websites: squares turn into orange circles as units sell */
.bh-board { background: var(--graphite); display: grid; place-items: center; }
.bh-cells { position: absolute; inset: 9% 6%; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(5, 1fr); gap: 6%; gap: clamp(4px, min(.6vw, 8.64px), 9px); }
.bh-cells i { background: var(--steel); border-radius: 3px; transition: border-radius .7s var(--ease), background .7s var(--ease), transform .7s var(--ease); }
.bh-cells i.o { background: var(--signal); border-radius: 50%; }
.bh-cells i.ping { transform: scale(.7); }

/* advertising: target pulses, dots blink in turn */
.bh-pulse { transform-origin: 145px 100px; animation: bhPulse 2.4s var(--ease) infinite; }
@keyframes bhPulse { 0%, 100% { transform: scale(.94); } 40% { transform: scale(1.04); } }
.bh-dots circle { animation: bhBlink 2.4s steps(1) infinite; }
.bh-dots circle:nth-child(2) { animation-delay: .4s; } .bh-dots circle:nth-child(3) { animation-delay: .8s; }
.bh-dots circle:nth-child(4) { animation-delay: 1.2s; } .bh-dots circle:nth-child(5) { animation-delay: 1.6s; } .bh-dots circle:nth-child(6) { animation-delay: 2s; }
@keyframes bhBlink { 0% { opacity: 1; } 50% { opacity: .25; } }

/* crm: a lead drops through the funnel and lights the next slot */
.bh-drop { fill: var(--signal); animation: bhDrop 1.8s cubic-bezier(.5, 0, .7, 1) infinite; }
@keyframes bhDrop { 0% { transform: translateY(-110px); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
.bh-leads circle { fill: rgba(227, 231, 237, .35); animation: bhLead 10.8s steps(1) infinite; }
.bh-leads circle:nth-child(1) { animation-delay: 0s; } .bh-leads circle:nth-child(2) { animation-delay: 1.8s; } .bh-leads circle:nth-child(3) { animation-delay: 3.6s; }
.bh-leads circle:nth-child(4) { animation-delay: 5.4s; } .bh-leads circle:nth-child(5) { animation-delay: 7.2s; } .bh-leads circle:nth-child(6) { animation-delay: 9s; }
@keyframes bhLead { 0% { fill: rgba(227, 231, 237, .35); } 15% { fill: #fff; } }

/* why-us art */
.why__art.bh-art { width: 100%; margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; position: relative; }
.why__art.bh-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.why h3 { margin-top: 28px !important; padding-top: 0; }
.why { min-height: 0; }
.bh-w { fill: var(--steel); transition: fill .6s var(--ease); }
.bh-w.is-o { fill: var(--signal); }
.bh-bars rect { transform-box: fill-box; transform-origin: bottom; animation: bhGrow 3s var(--ease) infinite alternate; }
.bh-bars rect:nth-child(2) { animation-delay: .2s; } .bh-bars rect:nth-child(3) { animation-delay: .4s; } .bh-bars rect:nth-child(4) { animation-delay: .6s; }
@keyframes bhGrow { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.bh-hop { animation: bhBob 1.6s ease-in-out infinite; }
.bh-sw1, .bh-sw2 { transition: rx .6s; animation: bhRx 3s ease-in-out infinite alternate; }
.bh-sw2 { animation-delay: 1.5s; }
@keyframes bhRx { from { rx: 9px; } to { rx: 2px; } }
.bh-key { transform-box: fill-box; transform-origin: 50% 15%; animation: bhKey 3.2s ease-in-out infinite; }
@keyframes bhKey { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.bh-sweep { fill: none; stroke: var(--signal); stroke-width: 66; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 120px 90px; animation: bhSweep 6s linear infinite; }
@keyframes bhSweep { to { stroke-dasharray: 100 0; } }

@media (max-width: 1100px) { .mani__tiles.bh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mani__tiles.bh-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bh *, .bh-art * { animation: none !important; } }