/* ============================================================
   [webtap_about] — modernized About body. Dark + gold, matches brand.
   All selectors scoped under .webtap-about to avoid collisions.
   Fonts inherit from the site for consistency.
   ============================================================ */

.webtap-about {
	--wta-surface: #16161b;
	--wta-surface-2: #1d1d28;
	--wta-bg-2: #101015;
	--wta-line: rgba(255, 255, 255, .08);
	--wta-fg: #f5f5f7;
	--wta-muted: #9b9ba6;
	--wta-gold: #e8a33c;
	--wta-gold-soft: rgba(232, 163, 60, .12);

	display: flex;
	flex-direction: column;
	gap: clamp(46px, 7vw, 84px);
	max-width: 1120px;
	margin-inline: auto;
	color: var(--wta-fg);
}
.webtap-about *, .webtap-about *::before, .webtap-about *::after { box-sizing: border-box; }

.webtap-about .wta-eyebrow { margin: 0 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wta-gold); }
.webtap-about .wta-h2 { margin: 0; font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.04; text-transform: uppercase; letter-spacing: .01em; color: var(--wta-fg); }
.webtap-about .wta-h3 { margin: 14px 0 8px; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .01em; color: var(--wta-fg); }
.webtap-about .wta-p { margin: 14px 0 0; color: #c9c9d1; line-height: 1.65; }

/* Intro (centered under the page's ABOUT US title) */
.webtap-about .wta-intro { text-align: center; }
.webtap-about .wta-lead { margin: 0 auto; max-width: 60ch; font-size: clamp(1.05rem, 2.3vw, 1.3rem); line-height: 1.5; color: #d7d7dd; }
.webtap-about .wta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.webtap-about .wta-chip { font-size: .8rem; font-weight: 600; color: var(--wta-fg); background: var(--wta-surface); border: 1px solid var(--wta-line); padding: 7px 14px; border-radius: 999px; }
.webtap-about .wta-chip b { color: var(--wta-gold); font-weight: 700; }

/* Who we are */
.webtap-about .wta-who { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; }
.webtap-about .wta-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.webtap-about .wta-stat { background: linear-gradient(180deg, var(--wta-surface), var(--wta-bg-2)); border: 1px solid var(--wta-line); border-radius: 16px; padding: 22px; }
.webtap-about .wta-n { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.3rem); color: var(--wta-gold); line-height: 1; }
.webtap-about .wta-l { margin-top: 8px; font-size: .86rem; color: var(--wta-muted); }

/* Card grids */
.webtap-about .wta-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 24px); margin-top: 26px; }
.webtap-about .wta-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.2vw, 24px); margin-top: 26px; }
.webtap-about .wta-card { background: var(--wta-surface); border: 1px solid var(--wta-line); border-radius: 18px; padding: 26px; transition: transform .25s ease, border-color .25s ease; }
.webtap-about .wta-card:hover { transform: translateY(-4px); border-color: rgba(232, 163, 60, .4); }
.webtap-about .wta-card .wta-cardp { margin: 0; color: var(--wta-muted); font-size: .96rem; line-height: 1.55; }
.webtap-about .wta-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--wta-gold-soft); border: 1px solid rgba(232, 163, 60, .25); }
.webtap-about .wta-ico svg { width: 22px; height: 22px; stroke: var(--wta-gold); fill: none; stroke-width: 1.8; }
.webtap-about .wta-vnum { font-weight: 800; font-size: 1rem; color: var(--wta-gold); letter-spacing: .08em; }

/* Mission */
.webtap-about .wta-mission { background: linear-gradient(180deg, var(--wta-surface), var(--wta-bg-2)); border: 1px solid var(--wta-line); border-left: 3px solid var(--wta-gold); border-radius: 20px; padding: clamp(26px, 4vw, 46px); }
.webtap-about .wta-big { margin: 14px 0 0; font-size: clamp(1.25rem, 3vw, 1.85rem); font-weight: 600; line-height: 1.4; color: var(--wta-fg); max-width: 40ch; }
.webtap-about .wta-sub { margin: 18px 0 0; color: var(--wta-muted); max-width: 64ch; line-height: 1.65; }

/* Team */
.webtap-about .wta-team-section > .wta-eyebrow,
.webtap-about .wta-team-section > .wta-h2 { text-align: center; }
.webtap-about .wta-team { display: grid; grid-template-columns: minmax(0, 640px); justify-content: center; gap: clamp(18px, 3vw, 28px); margin-top: 26px; }
.webtap-about .wta-member { display: flex; align-items: center; gap: 22px; background: var(--wta-surface); border: 1px solid var(--wta-line); border-radius: 20px; padding: 24px; transition: transform .25s ease, border-color .25s ease; }
.webtap-about .wta-member:hover { transform: translateY(-4px); border-color: rgba(232, 163, 60, .4); }
.webtap-about .wta-shot { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(232, 163, 60, .55); }
.webtap-about .wta-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.webtap-about .wta-mono { display: grid; place-items: center; border-color: rgba(232, 163, 60, .4); background: radial-gradient(circle at 50% 35%, rgba(232, 163, 60, .22), var(--wta-surface-2)); }
.webtap-about .wta-mono span { font-weight: 800; font-size: 2.1rem; color: var(--wta-gold); letter-spacing: .04em; }
.webtap-about .wta-name { margin: 0; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; color: var(--wta-fg); }
.webtap-about .wta-role { margin: 6px 0 0; color: var(--wta-gold); font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.webtap-about .wta-bio { margin: 11px 0 0; color: var(--wta-muted); font-size: .92rem; line-height: 1.55; }
.webtap-about .wta-team-note { margin: 24px auto 0; max-width: 50ch; text-align: center; color: var(--wta-muted); font-size: .98rem; line-height: 1.55; }

/* CTA */
.webtap-about .wta-cta { text-align: center; background: linear-gradient(180deg, var(--wta-surface), var(--wta-bg-2)); border: 1px solid var(--wta-line); border-radius: 24px; padding: clamp(34px, 6vw, 60px) clamp(20px, 4vw, 48px); }
.webtap-about .wta-cta .wta-h2 { margin: 0 auto; max-width: 30ch; text-wrap: balance; }
.webtap-about .wta-accent { color: var(--wta-gold); }
.webtap-about .wta-ctap { margin: 16px auto 0; max-width: 50ch; color: var(--wta-muted); }
.webtap-about .wta-btn { display: inline-block; margin-top: 24px; font-weight: 700; font-size: 1rem; color: #15120a; background: var(--wta-gold); padding: 14px 28px; border-radius: 12px; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.webtap-about .wta-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

@media (max-width: 860px) {
	.webtap-about .wta-who { grid-template-columns: 1fr; }
	.webtap-about .wta-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.webtap-about .wta-grid2, .webtap-about .wta-team { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .webtap-about * { transition: none !important; } }
.webtap-about a:focus-visible, .webtap-about .wta-btn:focus-visible { outline: 2px solid var(--wta-gold); outline-offset: 3px; border-radius: 8px; }