.rbd-contact-page {
background: var(--rbd-stone-2);
}
.rbd-contact-hero {
position: relative;
overflow: hidden;
padding: clamp(72px, 8vw, 118px) 0;
background:
radial-gradient(circle at 86% 16%, rgba(233, 149, 44, 0.2), transparent 26%),
linear-gradient(135deg, #0b0d0e 0%, #1b1f20 58%, #111415 100%);
color: var(--rbd-white);
}
.rbd-contact-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.12;
background-image:
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(90deg, #000, transparent 82%);
pointer-events: none;
}
.rbd-contact-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
align-items: end;
gap: clamp(44px, 8vw, 110px);
}
.rbd-contact-hero h1 {
max-width: 760px;
margin-bottom: 22px;
color: var(--rbd-white);
font-size: clamp(3rem, 6vw, 5.7rem);
line-height: 0.98;
}
.rbd-contact-hero-copy > p:not(.rbd-eyebrow) {
max-width: 760px;
margin-bottom: 32px;
color: #d6dada;
font-size: clamp(1.05rem, 1.5vw, 1.24rem);
}
.rbd-contact-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.rbd-contact-hero-panel {
padding: 30px;
border-top: 4px solid var(--rbd-orange);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
backdrop-filter: blur(10px);
}
.rbd-contact-hero-panel-label {
display: block;
margin-bottom: 16px;
color: var(--rbd-orange);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.rbd-contact-hero-panel strong {
display: block;
margin-bottom: 12px;
color: var(--rbd-white);
font-size: 1.3rem;
line-height: 1.25;
}
.rbd-contact-hero-panel p {
margin: 0;
color: #c8cccd;
}
.rbd-contact-team-section {
padding: 92px 0 105px;
}
.rbd-contact-heading {
max-width: 850px;
}
.rbd-contact-heading p:not(.rbd-eyebrow) {
margin: 14px 0 0;
color: var(--rbd-muted);
font-size: 1.04rem;
}
.rbd-contact-team-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.rbd-contact-person-card {
min-width: 0;
display: flex;
overflow: hidden;
flex-direction: column;
border: 1px solid var(--rbd-border);
background: var(--rbd-white);
box-shadow: 0 10px 30px rgba(17, 20, 21, 0.06);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.rbd-contact-person-card:hover {
box-shadow: var(--rbd-shadow);
transform: translateY(-5px);
}
.rbd-contact-person-photo {
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
background: #d8d9d6;
}
.rbd-contact-person-photo::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 34%;
background: linear-gradient(transparent, rgba(10, 12, 13, 0.18));
pointer-events: none;
}
.rbd-contact-person-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 350ms ease;
}
.rbd-contact-person-card:hover img {
transform: scale(1.025);
}
.rbd-contact-person-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 24px;
border-top: 4px solid var(--rbd-orange);
}
.rbd-contact-person-role {
min-height: 1.3em;
margin: 0 0 8px;
color: var(--rbd-orange-dark);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.07em;
line-height: 1.3;
text-transform: uppercase;
}
.rbd-contact-person-card h3 {
margin-bottom: 18px;
font-size: 1.38rem;
line-height: 1.15;
}
.rbd-contact-person-links {
display: grid;
gap: 8px;
margin-top: auto;
}
.rbd-contact-person-links a {
display: flex;
min-width: 0;
align-items: center;
gap: 9px;
color: var(--rbd-charcoal);
font-size: 0.85rem;
font-weight: 700;
line-height: 1.35;
text-decoration: none;
overflow-wrap: anywhere;
}
.rbd-contact-person-links a:hover,
.rbd-contact-person-links a:focus-visible {
color: var(--rbd-orange-dark);
}
.rbd-contact-person-links span {
display: inline-grid;
width: 24px;
height: 24px;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
background: var(--rbd-stone);
color: var(--rbd-orange-dark);
font-size: 0.76rem;
font-weight: 900;
}
.rbd-contact-person-note {
margin: auto 0 0;
color: var(--rbd-muted);
font-size: 0.86rem;
}
.rbd-contact-info-section {
padding: 100px 0;
background: var(--rbd-stone);
}
.rbd-contact-info-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: stretch;
gap: clamp(40px, 7vw, 90px);
}
.rbd-contact-details > div:first-child > p:not(.rbd-eyebrow) {
color: var(--rbd-muted);
}
.rbd-contact-address {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 34px;
font-style: normal;
}
.rbd-contact-detail-card {
min-width: 0;
padding: 22px;
border: 1px solid var(--rbd-border);
background: var(--rbd-white);
}
.rbd-contact-detail-card > span {
display: block;
margin-bottom: 12px;
color: var(--rbd-orange-dark);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.rbd-contact-detail-card a,
.rbd-contact-detail-card p {
display: block;
margin: 0;
color: var(--rbd-charcoal);
font-size: 0.94rem;
font-weight: 700;
line-height: 1.6;
text-decoration: none;
overflow-wrap: anywhere;
}
.rbd-contact-detail-card a:hover,
.rbd-contact-detail-card a:focus-visible {
color: var(--rbd-orange-dark);
}
.rbd-contact-social-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.rbd-contact-social-links a {
display: inline-flex;
min-height: 42px;
align-items: center;
padding: 8px 15px;
border: 1px solid var(--rbd-charcoal);
color: var(--rbd-charcoal);
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.05em;
text-decoration: none;
text-transform: uppercase;
}
.rbd-contact-social-links a:hover,
.rbd-contact-social-links a:focus-visible {
border-color: var(--rbd-orange);
background: var(--rbd-orange);
color: var(--rbd-black);
}
.rbd-contact-map-wrap {
min-width: 0;
display: flex;
overflow: hidden;
flex-direction: column;
min-height: 650px;
border: 1px solid var(--rbd-border);
background: var(--rbd-white);
box-shadow: var(--rbd-shadow);
}
.rbd-contact-map {
width: 100%;
min-height: 570px;
flex: 1;
border: 0;
}
.rbd-contact-map-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 24px;
border-top: 1px solid var(--rbd-border);
}
.rbd-contact-map-footer strong,
.rbd-contact-map-footer span {
display: block;
}
.rbd-contact-map-footer span {
margin-top: 3px;
color: var(--rbd-muted);
font-size: 0.78rem;
}
.rbd-text-link {
color: var(--rbd-orange-dark);
font-size: 0.82rem;
font-weight: 900;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
@media (max-width: 1120px) {
.rbd-contact-team-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.rbd-contact-hero-grid,
.rbd-contact-info-grid {
grid-template-columns: 1fr;
}
.rbd-contact-hero-panel {
max-width: 680px;
}
.rbd-contact-team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rbd-contact-map-wrap {
min-height: 560px;
}
.rbd-contact-map {
min-height: 480px;
}
}
@media (max-width: 760px) {
.rbd-contact-hero {
padding: 62px 0 68px;
}
.rbd-contact-hero h1 {
font-size: clamp(2.7rem, 14vw, 4.2rem);
}
.rbd-contact-hero-actions {
align-items: stretch;
flex-direction: column;
}
.rbd-contact-hero-actions .rbd-button {
width: 100%;
}
.rbd-contact-team-section,
.rbd-contact-info-section {
padding: 68px 0;
}
.rbd-contact-team-grid,
.rbd-contact-address {
grid-template-columns: 1fr;
}
.rbd-contact-map-wrap {
min-height: 470px;
}
.rbd-contact-map {
min-height: 400px;
}
.rbd-contact-map-footer {
align-items: flex-start;
flex-direction: column;
}
}