:root {
--vv-green:      #203731;
--vv-green-deep: #07130D;
--vv-gold:       #FFB612;
--vv-gold-dim:   rgba(255, 182, 18, .18);
--vv-cream:      #F8F5EE;
--vv-text:       #1A1A1A;
--vv-muted:      #3D3D3D;
--vv-card-bg:    #FFFFFF;
--vv-border:     rgba(32, 55, 49, .08);
--vv-radius:     10px;
--vv-transition: .25s ease;
} .gbpvv-page {
background: var(--vv-cream);
} .gbpvv-hero {
position: relative;
min-height: 82vh;
display: flex;
align-items: flex-start;
overflow: hidden;
background: var(--vv-green-deep);
color: #fff;
}
@media (max-width: 768px) { .gbpvv-hero { min-height: 65vh; } }
.gbpvv-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.gbpvv-hero__overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 55% 30%, rgba(32,55,49,.7) 0%, #07130D 65%),
linear-gradient(to top, rgba(2,6,3,.98) 0%, rgba(2,6,3,.45) 55%, transparent 100%);
}
.gbpvv-hero__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 30%;
opacity: .28;
}
.gbpvv-hero__lines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent 79px,
rgba(255,182,18,.03) 80px
);
}
.gbpvv-hero__g-watermark {
position: absolute;
right: -3%;
bottom: -5%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: clamp(16rem, 34vw, 40rem);
line-height: 1;
color: rgba(255,182,18,.04);
pointer-events: none;
user-select: none;
}
.gbpvv-hero__grain {
position: absolute;
inset: 0;
opacity: .03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
}
.gbpvv-hero__inner {
position: relative;
z-index: 2;
padding-top: clamp(120px, 18vh, 200px);
padding-bottom: clamp(60px, 8vh, 80px);
}
.gbpvv-hero__content {
max-width: 620px;
}
.gbpvv-hero__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-size: .78rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--vv-gold);
margin-bottom: 18px;
padding: 4px 12px;
border: 1px solid var(--vv-gold-dim);
border-radius: 2px;
}
.gbpvv-hero__title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2.8rem, 6.5vw, 5.5rem);
font-weight: 800;
text-transform: uppercase;
line-height: .95;
letter-spacing: -.01em;
color: #fff;
margin: 0 0 8px;
}
.gbpvv-hero__title-accent {
display: block;
color: var(--vv-gold);
}
.gbpvv-hero__divider {
width: 56px;
height: 3px;
background: linear-gradient(90deg, var(--vv-gold), transparent);
margin: 22px 0;
}
.gbpvv-hero__desc {
font-family: 'Inter', sans-serif;
font-size: clamp(.9rem, 1.4vw, 1.0625rem);
font-weight: 400;
line-height: 1.75;
color: #FFFFFF;
max-width: 480px;
margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.gbpvv-hero__stats {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.gbpvv-hero__stat {
display: flex;
flex-direction: column;
gap: 3px;
}
.gbpvv-hero__stat-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
color: var(--vv-gold);
line-height: 1;
}
.gbpvv-hero__stat-label {
font-family: 'Inter', sans-serif;
font-size: .72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.90);
}
.gbpvv-hero__stat-divider {
width: 1px;
height: 36px;
background: rgba(255,182,18,.2);
flex-shrink: 0;
}
.gbpvv-hero__scroll {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: rgba(255,182,18,.45);
z-index: 2;
animation: vv-bounce 2s ease-in-out infinite;
}
.gbpvv-hero__scroll span {
display: block;
width: 1px;
height: 22px;
background: linear-gradient(to bottom, transparent, rgba(255,182,18,.4));
}
@keyframes vv-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50%       { transform: translateX(-50%) translateY(5px); }
}
@media (max-width: 480px) {
.gbpvv-hero__inner { padding-block: 60px 52px; }
.gbpvv-hero__stats { gap: 20px; }
} .gbpvv-profiles {
padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 104px);
background: var(--vv-cream);
} .gbpvv-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 32px;
}
.gbpvv-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--vv-card-bg);
border: 1px solid var(--vv-border);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
text-align: left;
padding: 0;
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.gbpvv-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(7,19,13,.12);
border-color: rgba(255,182,18,.4);
}
.gbpvv-card--active {
border-color: var(--vv-gold);
box-shadow: 0 8px 32px rgba(7,19,13,.10), 0 0 0 1px var(--vv-gold);
}
.gbpvv-card--active:hover {
transform: translateY(-2px);
} .gbpvv-card__photo-wrap {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #E8E4DC;
}
.gbpvv-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform .4s ease;
}
.gbpvv-card:hover .gbpvv-card__photo {
transform: scale(1.04);
}
.gbpvv-card__photo-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(7,19,13,.55) 0%,
rgba(7,19,13,.12) 45%,
transparent 70%
);
} .gbpvv-card__info {
display: flex;
flex-direction: column;
gap: 4px;
padding: 18px 20px 20px;
flex: 1;
}
.gbpvv-card__name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.25rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--vv-green);
line-height: 1;
}
.gbpvv-card__nick {
font-family: 'Inter', sans-serif;
font-size: .85rem;
font-weight: 500;
font-style: italic;
color: #8A6200;
line-height: 1;
}
.gbpvv-card__role {
font-family: 'Inter', sans-serif;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--vv-muted);
margin-top: 2px;
line-height: 1.3;
} .gbpvv-card__indicator {
display: block;
height: 3px;
background: transparent;
transition: background .24s ease;
}
.gbpvv-card--active .gbpvv-card__indicator {
background: var(--vv-gold);
} .gbpvv-detail {
background: var(--vv-card-bg);
border: 1px solid rgba(32,55,49,.10);
border-top: 3px solid var(--vv-gold);
border-radius: 14px;
overflow: hidden;
}
.gbpvv-detail--active {
animation: vv-detail-in .35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vv-detail-in {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: translateY(0); }
}
.gbpvv-detail__inner {
padding: clamp(28px, 4vw, 48px);
} .gbpvv-detail__header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid var(--vv-border);
}
.gbpvv-detail__title-group {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.gbpvv-detail__name {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.01em;
line-height: 1;
color: var(--vv-green);
margin: 0;
}
.gbpvv-detail__nick {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
font-weight: 500;
font-style: italic;
color: #8A6200;
}
.gbpvv-detail__badge {
display: inline-flex;
align-items: center;
height: fit-content;
padding: 5px 14px;
border-radius: 100px;
background: rgba(255,182,18,.10);
border: 1px solid rgba(255,182,18,.35);
font-family: 'Inter', sans-serif;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #8A6200;
flex-shrink: 0;
} .gbpvv-detail__body {
display: grid;
grid-template-columns: 1fr 300px;
gap: clamp(28px, 4vw, 56px);
align-items: start;
} .gbpvv-detail__bio p {
font-family: 'Inter', sans-serif;
font-size: 1rem;
line-height: 1.82;
color: var(--vv-text);
margin: 0 0 16px;
}
.gbpvv-detail__bio p:last-child {
margin-bottom: 0;
} .gbpvv-detail__facts {
display: flex;
flex-direction: column;
gap: 10px;
}
.gbpvv-detail__fact {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--vv-cream);
border: 1px solid var(--vv-border);
border-radius: var(--vv-radius);
}
.gbpvv-detail__fact-icon {
flex-shrink: 0;
color: var(--vv-gold);
margin-top: 2px;
}
.gbpvv-detail__fact-val {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
color: var(--vv-green);
line-height: 1.2;
letter-spacing: .01em;
}
.gbpvv-detail__fact-lbl {
display: block;
font-family: 'Inter', sans-serif;
font-size: .72rem;
font-weight: 500;
color: var(--vv-muted);
margin-top: 2px;
} .gbpvv-noro-stats {
grid-column: 1 / -1;
margin-top: 28px;
padding: 28px 24px 24px;
background: linear-gradient(135deg, #0A1F14 0%, #203731 45%, #102B1A 100%);
border: 1px solid rgba(255,182,18,.18);
border-radius: var(--vv-radius);
}
.gbpvv-noro-stats__label {
font-family: 'Inter', sans-serif;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--vv-gold);
margin: 0 0 16px;
}
.gbpvv-noro-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.gbpvv-noro-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 10px;
border-radius: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
text-align: center;
}
.gbpvv-noro-stat--highlight {
background: rgba(255,182,18,.12);
border-color: rgba(255,182,18,.3);
}
.gbpvv-noro-stat__num {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
font-weight: 800;
color: var(--vv-gold);
line-height: 1;
}
.gbpvv-noro-stat--highlight .gbpvv-noro-stat__num {
color: #fff;
}
.gbpvv-noro-stat__desc {
font-family: 'Inter', sans-serif;
font-size: .68rem;
font-weight: 500;
color: rgba(255,255,255,.90);
line-height: 1.35;
} .gbpvv-detail > .gbpvv-noro-stats {
margin: 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px);
border-radius: var(--vv-radius);
} @media (max-width: 900px) {
.gbpvv-cards {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.gbpvv-detail__body {
grid-template-columns: 1fr;
}
.gbpvv-detail__facts {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.gbpvv-noro-stats__grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 680px) {
.gbpvv-cards {
grid-template-columns: 1fr;
gap: 12px;
}
.gbpvv-card__photo-wrap {
aspect-ratio: auto; }
.gbpvv-card__photo {
height: auto; object-fit: contain;
object-position: center;
}
.gbpvv-card__info {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
padding: 14px 16px;
}
.gbpvv-card__nick {
order: 3;
flex-basis: 100%;
margin-top: -2px;
}
.gbpvv-card__role {
order: 2;
}
.gbpvv-detail__facts {
grid-template-columns: 1fr;
}
.gbpvv-noro-stats__grid {
grid-template-columns: repeat(2, 1fr);
}
.gbpvv-detail__header {
flex-direction: column;
}
}