.contact-page {
padding: 24px 0 64px;
}
.contact-page__hero {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
gap: 24px;
margin-bottom: 28px;
}
.contact-page__form-section {
display: block;
margin-bottom: 28px;
}
.contact-page__card {
padding: 32px;
background: #fff;
border: 1px solid #e3e8ee;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}
.contact-page__eyebrow {
margin: 0 0 12px;
color: #c2171e;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
}
.contact-page__title,
.contact-page__map-title {
margin: 0;
color: #0f172a;
line-height: 1.05;
}
.contact-page__title {
font-size: 44px;
}
.contact-page__map-title {
font-size: 28px;
margin-bottom: 14px;
}
.contact-page__content {
margin-top: 18px;
color: #334155;
font-size: 16px;
line-height: 1.7;
}
.contact-page__content p:last-child {
margin-bottom: 0;
}
.contact-page__map {
display: flex;
flex-direction: column;
}
.contact-page__map-iframe {
width: 100%;
height: 360px;
border: 0;
}
.contact-page__map p {
margin: 14px 0 0;
color: #334155;
font-size: 14px;
line-height: 1.6;
}
.contact-page__locations {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 20px;
}
.contact-page__location:first-child {
grid-column: 1 / -1;
}
.contact-page__location {
overflow: hidden;
border: 1px solid #e3e8ee;
background: #fff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.contact-page__location-map {
display: block;
width: 100%;
height: 220px;
border: 0;
}
.contact-page__location-body {
padding: 16px;
}
.contact-page__location-body strong {
display: block;
color: #0f172a;
font-size: 20px;
line-height: 1.1;
text-transform: uppercase;
}
.contact-page__location-body span {
display: block;
margin-top: 8px;
color: #334155;
font-size: 14px;
line-height: 1.6;
}
.contact-page__form-card .divider {
display: none;
}
.contact-page__form-card h3 {
margin: 0 0 8px;
color: #0f172a;
}
.contact-page__form-card .form-tip {
margin: 0 0 18px;
}
.contact-page__form-card form {
display: grid;
gap: 12px;
}
.contact-page__form-card .enquiryformx {
width: 100%;
}
.contact-page__form-card label {
color: #0f172a;
font-size: 14px;
font-weight: 600;
}
.contact-page__form-card .input-text,
.contact-page__form-card textarea {
display: block;
width: 100%;
max-width: none;
padding: 12px 14px;
border: 1px solid #cfd8e3;
background: #fff;
color: #0f172a;
font: inherit;
box-sizing: border-box;
}
.contact-page__form-card textarea {
min-height: 160px;
resize: vertical;
}
.contact-page__hear-about {
display: grid;
gap: 12px;
}
.contact-page__hear-about-title {
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #0f172a;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.contact-page__hear-about-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 14px;
}
.contact-page__hear-about-other {
display: none;
gap: 8px;
}
.contact-page__hear-about-other.is-visible {
display: grid;
}
.contact-page__hear-about-other-input {
min-height: 110px;
}
.contact-page__hear-about-option {
display: inline-grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 10px;
padding: 0;
border: 0;
background: transparent;
color: #0f172a;
font-size: 16px;
font-weight: 400;
line-height: 1.35;
cursor: pointer;
}
.contact-page__hear-about-option input {
width: auto;
height: auto;
margin: 0.25em 0 0;
flex: 0 0 auto;
appearance: auto;
-webkit-appearance: radio;
accent-color: #c2171e;
}
.contact-page__hear-about-option span {
display: block;
}
.contact-page__form-card .submitbuttonform {
justify-self: start;
margin-top: 2px !important;
}
.contact-page__details {
margin-bottom: 28px;
}
.contact-page__details-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 18px;
}
.contact-page__details-item {
padding: 20px;
border: 1px solid #e3e8ee;
background: #f7f9fb;
}
.contact-page__details-item h3 {
margin: 0 0 10px;
color: #0f172a;
font-size: 22px;
line-height: 1.1;
text-transform: uppercase;
}
.contact-page__details-item p {
margin: 0 0 8px;
color: #334155;
font-size: 15px;
line-height: 1.6;
}
.contact-page__details-item p:last-child {
margin-bottom: 0;
}
.contact-page__details-item a {
color: #c2171e;
text-decoration: none;
}
.contact-page__details-item a:hover,
.contact-page__details-item a:focus {
text-decoration: underline;
}
@media (max-width: 900px) {
.contact-page__hero,
.contact-page__form-section {
grid-template-columns: 1fr;
}
.contact-page__card {
padding: 22px;
}
.contact-page__title {
font-size: 34px;
}
.contact-page__map-iframe {
height: 280px;
}
.contact-page__location-map {
height: 200px;
}
.contact-page__locations {
grid-template-columns: 1fr;
}
.contact-page__location:first-child {
grid-column: auto;
}
.contact-page__details-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.contact-page__hear-about-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.contact-page__locations {
grid-template-columns: 1fr !important;
}
.contact-page__location:first-child {
grid-column: auto !important;
}
.contact-page__location {
width: 100%;
}
}