/* ==========================================================================
   About: Who we are
   The "Who we are" quote and coloured number boxes. HTML: template-parts/about/who-we-are.php
   ========================================================================== */

/* Keep the decorative ring/glow from creating sideways scroll. */
.about-intro { overflow-x: clip; }
.about-intro .section-head { margin-bottom: 22px; }
.who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.who .section-head { margin-bottom: 20px; }
.who__lead { color: var(--muted); font-size: 1.06rem; line-height: 1.8; margin-bottom: 24px; }
.who__quote { position: relative; margin: 0 0 24px; padding: 24px 24px 20px 28px; border-radius: 22px; background: linear-gradient(140deg, rgba(124, 58, 237, .2), rgba(255, 255, 255, .03) 60%); border: 1px solid rgba(167, 139, 250, .3); }
.who__quote::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--grad); }
.who__quote-mark { position: absolute; top: -16px; right: 20px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--grad-btn); color: #fff; box-shadow: 0 0 0 5px var(--bg); }
.who__quote blockquote { margin: 0 0 16px; }
.who__quote blockquote p { margin: 0; color: #f1eefc; font-size: 1.04rem; font-style: italic; line-height: 1.7; }
.who__quote figcaption { display: flex; align-items: center; gap: 12px; }
.who__quote-logo .brand__logo { width: 38px; height: 38px; }
.who__quote strong { display: block; color: #fff; font-family: var(--font-display); font-size: .95rem; }
.who__quote small { color: var(--c-glow); font-size: .8rem; }
.who__chips { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.who__chips li {
	--c: #a78bfa;
	position: relative;
	display: flex; align-items: center; gap: 12px;
	padding: 14px 14px;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(150deg, color-mix(in srgb, var(--c) 14%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .015));
	border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
	transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.who__chips li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.who__chips li:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 18px 36px -20px var(--c); }
.who__chip-icon { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--c); color: #0b0620; box-shadow: 0 8px 20px -8px var(--c); transition: transform .4s var(--ease); }
.who__chips li:hover .who__chip-icon { transform: rotate(-8deg) scale(1.06); }
.who__chips strong { display: block; color: #fff; font-family: var(--font-display); font-size: .95rem; line-height: 1.25; }
.who__chips small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; margin-top: 2px; }

@media (max-width: 480px) {
	.who__chips { grid-template-columns: 1fr; }
}

.who__bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "clients happy" "projects years" "services services"; grid-template-rows: minmax(160px, 1fr) minmax(160px, 1fr) auto; gap: 14px; }
.bento--clients { grid-area: clients; }
.bento--happy { grid-area: happy; }
.bento--projects { grid-area: projects; }
.bento--years { grid-area: years; }
.bento--services { grid-area: services; }
.bento { --c: #a78bfa; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .015)); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); transition: transform .45s var(--ease), box-shadow .45s, border-color .3s; }
.bento:hover { transform: translateY(-5px); border-color: var(--c); box-shadow: 0 24px 48px -26px var(--c); }
.bento__icon { position: absolute; top: 18px; left: 20px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--c); color: #0b0620; }
.bento__num { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: #fff; }
.bento__num .counter { font-variant-numeric: tabular-nums; }
.bento__label { margin-top: 6px; color: color-mix(in srgb, var(--c) 45%, #fff); font-size: .86rem; font-weight: 500; }
.bento--clients { --c: #a78bfa; background: radial-gradient(120% 70% at 100% 0%, rgba(192, 38, 211, .45), transparent 60%), linear-gradient(160deg, #6d28d9, #3b0f8a 70%); border-color: transparent; box-shadow: 0 30px 60px -30px rgba(124, 58, 237, .9); }
.bento--clients .bento__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.bento--clients .bento__num { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.bento--clients .bento__label { color: rgba(255, 255, 255, .85); font-size: .86rem; }
.bento--clients .avatar-stack { position: absolute; top: 18px; right: 18px; margin: 0; }
.bento--clients .avatar-stack span { width: 32px; height: 32px; font-size: .62rem; margin-left: -8px; }
.bento--clients .avatar-stack span { border-color: #4c1d95; }
.bento--happy { --c: #34d399; justify-content: center; align-items: flex-start; padding-left: 108px; min-height: 140px; }
.bento__ring { position: absolute; left: 20px; top: 50%; width: 72px; height: 72px; margin-top: -36px; border-radius: 50%; background: conic-gradient(#34d399 calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.bento__ring i { position: absolute; inset: 8px; border-radius: 50%; background: #0f1a2a; }
.bento__ring::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: #34d399; font-size: 1.2rem; }
.bento--projects { --c: #22d3ee; }
.bento--projects, .bento--clients { padding-top: 70px; }
.bento__bars { position: absolute; right: 18px; top: 22px; display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.bento__bars i { width: 7px; height: var(--h); border-radius: 3px; background: linear-gradient(#22d3ee, rgba(34, 211, 238, .25)); }
.bento--years { --c: #f59e0b; }
.bento--projects, .bento--years { min-height: 132px; }
.bento--years .bento__icon { left: auto; right: 18px; }
.bento--years { padding-right: 70px; }
.bento--services { --c: #60a5fa; grid-column: 1 / -1; justify-content: flex-start; }
.bento__label--top { margin: 0 0 12px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.bento__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bento__chips a { --c: #a78bfa; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, #fff); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.bento__chips a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.bento__chips a:hover { color: #0b0620; background: var(--c); }
/* The bento services tile row needs auto height */
.who__bento > .bento--services { grid-row: auto; }

@media (max-width: 1024px) {
	.who__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
	.who__bento { grid-template-columns: 1fr 1fr; grid-template-areas: "clients clients" "happy happy" "projects years" "services services"; grid-auto-rows: auto; gap: 10px; }
	.bento--clients { grid-row: auto; grid-column: 1 / -1; }
	.bento--happy { grid-column: 1 / -1; }
	.bento { padding: 16px; }
	.bento__icon { top: 14px; left: 16px; width: 34px; height: 34px; }
	.bento--clients { min-height: 0; padding-top: 64px; }
	.bento--happy { padding-left: 104px; }
	.bento--years .bento__icon { left: 16px; right: auto; }
	.bento--years { padding-right: 16px; padding-top: 60px; }
	.bento--projects { padding-top: 60px; }
}