/* BONYEL BEATS — About Me (scoped) */
html:has(.bb-about),body:has(.bb-about){background:#000!important;color:#fff!important}
.bb-about{background:#000;color:#fff;font-family:Inter,Arial,sans-serif;padding:52px 22px 76px}.bb-about *{box-sizing:border-box}
.bb-about-wrap{width:min(1320px,100%);margin:0 auto}.bb-about-hero{display:grid;grid-template-columns:.96fr 1.04fr;gap:clamp(35px,5vw,78px);align-items:center;padding:20px 0 26px}
.bb-about-kicker{color:#4785ff;letter-spacing:.13em;font-size:12px;font-weight:800;display:block}.bb-about-intro h1{font-size:clamp(37px,3.6vw,58px);font-weight:850;line-height:1.12;letter-spacing:-.055em;margin:18px 0;color:#fff}
.bb-about-intro p{font-size:15px;line-height:1.75;color:#aeb9cb;margin:0 0 17px;max-width:570px}.bb-about-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.bb-about-tags span{border:1px solid #2b3d58;border-radius:40px;padding:11px 17px;font-size:10px;color:#e4eafa;font-weight:700}
/* Floating geometric specialties, intentionally no panel/background image */
.bb-about-visual{position:relative;width:100%;aspect-ratio:1.55/1;background:transparent;isolation:isolate;overflow:visible;touch-action:pan-y}
.bb-about-node{--move-x:0px;--move-y:0px;--tilt:0deg;position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:25%;aspect-ratio:1;color:#fff;font-size:clamp(9px,.8vw,12px);font-weight:800;letter-spacing:.025em;text-align:center;line-height:1.2;user-select:none;cursor:default;transform:translate3d(var(--move-x),var(--move-y),0) rotate(var(--tilt));transition:transform .45s cubic-bezier(.2,.75,.2,1),filter .3s ease;will-change:transform;filter:drop-shadow(0 12px 15px rgba(0,0,0,.3));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 20px rgba(255,255,255,.045);padding:10px}
.bb-about-node:hover{filter:brightness(1.22) drop-shadow(0 14px 20px rgba(0,0,0,.4))}
.bb-node-icon{font-size:clamp(24px,3vw,40px);font-weight:750;line-height:1}
.node-reggaeton{left:6%;top:4%;border-radius:50%;background:radial-gradient(circle at 25% 20%,#af304b,#4a0c22 65%,#180b13);--tilt:-12deg}
.node-trap{left:44%;top:0%;width:23%;border-radius:35% 45% 42% 35%;clip-path:polygon(50% 0%,100% 83%,90% 100%,10% 100%,0 83%);background:linear-gradient(145deg,#4a4655,#17151d 80%);--tilt:11deg}
.node-rnb{left:76%;top:18%;width:22%;border-radius:50%;background:radial-gradient(circle at 25% 20%,#6542b6,#241343 70%,#130b23);--tilt:8deg}
.node-afrobeat{left:6%;top:55%;width:24%;border-radius:50%;background:radial-gradient(circle at 25% 20%,#c57828,#68340e 70%,#24170b);--tilt:8deg}
.node-making{left:40%;top:51%;width:28%;border-radius:37% 48% 32% 43%;background:linear-gradient(145deg,#185ab5,#0b254f 65%,#091323);--tilt:-13deg}
.node-recording{left:76%;top:65%;width:23%;border-radius:42% 34% 47% 30%;clip-path:polygon(24% 0,76% 0,100% 25%,100% 75%,76% 100%,24% 100%,0 75%,0 25%);background:linear-gradient(140deg,#5c2a8b,#211033 75%);--tilt:13deg}
@media(hover:hover) and (pointer:fine){.bb-about-node{transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .25s}}
@media(prefers-reduced-motion:reduce){.bb-about-node{transition:none!important;transform:rotate(var(--tilt))!important;will-change:auto}}

.bb-about-services{border-top:1px solid #222b3a;padding-top:30px;margin-top:25px}.bb-about-section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:22px}.bb-about-section-head h2{font-size:clamp(27px,3vw,42px);letter-spacing:-.05em;margin:8px 0 0;color:#fff}.bb-about-section-head>p{color:#aeb9cb;font-size:13px;margin:0 0 5px}
.bb-about-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.bb-about-card{border:1px solid #263344;border-radius:14px;background:#070b10;padding:24px 21px;display:flex;align-items:center;gap:22px;min-height:135px}.bb-about-card-icon{width:58px;height:58px;flex:none;border-radius:13px;background:#0c1930;color:#4785ff;display:grid;place-items:center;font-size:33px;font-weight:700}.bb-about-card h3{font-size:17px;letter-spacing:-.025em;color:#fff;margin:0 0 8px;font-weight:750}.bb-about-card p{font-size:12px;line-height:1.65;color:#aeb9cb;margin:0}
.bb-about-cta{margin-top:26px;background:linear-gradient(105deg,#06112b,#071736 65%,#081b44);border:1px solid #2365fa;border-radius:14px;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:25px}.bb-about-cta h2{font-size:clamp(25px,3vw,37px);letter-spacing:-.045em;color:#fff;margin:9px 0 4px}.bb-about-cta p{color:#b4bfd3;font-size:13px;margin:0;line-height:1.6}.bb-about-cta a{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;min-width:184px;padding:17px 23px;background:#2266ff;border-radius:9px;color:#fff;text-decoration:none;font-size:12px;font-weight:800}.bb-about-cta a:hover{background:#1552da;color:#fff}
@media(max-width:900px){.bb-about-hero{grid-template-columns:1fr 1fr;gap:25px}.bb-about-intro h1{font-size:38px}.bb-about-cards{gap:12px}.bb-about-card{padding:17px 13px;gap:12px}.bb-about-card-icon{width:42px;height:42px;font-size:25px}.bb-about-card h3{font-size:14px}}
@media(max-width:700px){.bb-about{padding:35px 16px 55px}.bb-about-hero{grid-template-columns:1fr;gap:26px}.bb-about-intro h1{font-size:40px}.bb-about-visual{aspect-ratio:1.6/1}.bb-about-section-head{display:block}.bb-about-section-head>p{margin-top:10px}.bb-about-cards{grid-template-columns:1fr}.bb-about-card{min-height:100px;padding:18px}.bb-about-cta{padding:24px;align-items:stretch;flex-direction:column}.bb-about-cta a{align-self:flex-start}}

/* Photographic badges from the approved reference; each remains independently interactive. */
.bb-about-visual .bb-about-node{background-color:transparent!important;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;border:0!important;box-shadow:none!important;clip-path:none!important;padding:0!important;filter:drop-shadow(0 6px 9px rgba(0,0,0,.35));}
.bb-about-visual .bb-about-node > span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.bb-about-visual .bb-about-node:hover{filter:brightness(1.12) drop-shadow(0 8px 15px rgba(0,0,0,.4))!important}
.bb-about-visual .node-reggaeton{background-image:url("../images/about-nodes/reggaeton.webp")!important}
.bb-about-visual .node-trap{background-image:url("../images/about-nodes/trap.webp")!important}
.bb-about-visual .node-rnb{background-image:url("../images/about-nodes/rnb.webp")!important}
.bb-about-visual .node-afrobeat{background-image:url("../images/about-nodes/afrobeat.webp")!important}
.bb-about-visual .node-making{background-image:url("../images/about-nodes/making.webp")!important}
.bb-about-visual .node-recording{background-image:url("../images/about-nodes/recording.webp")!important}

/* Render node artwork as real image elements instead of CSS backgrounds.
   This avoids blank nodes when background-image declarations are overridden. */
.bb-about-visual .bb-about-node {background-image:none!important;overflow:visible!important;}
.bb-about-visual .bb-node-art {display:block!important;position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:contain;pointer-events:none;opacity:1!important;visibility:visible!important;max-width:none!important;filter:none!important;}
.bb-about-visual .bb-about-node > .bb-node-art {clip-path:none!important;}