/* =====================================================
GLOBAL
===================================================== */
.dk-contact-page {
--black:#111214;
--text:#222;
--muted:#6f6f6f;
--light:#f6f6f4;
--border:#e5e5e2;
width:100%;
background:#fff;
color:var(--text);
font-family:inherit;
}
.dk-contact-page * {
box-sizing:border-box;
}
.dk-contact-container {
width:100%;
max-width:1120px;
margin:0 auto;
padding-left:20px;
padding-right:20px;
}
.dk-contact-eyebrow {
margin-bottom:12px;
color:#8b8b8b;
font-size:10px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
}
/* =====================================================
HERO
===================================================== */
.dk-contact-hero {
padding:82px 0;
background:#111214;
color:#fff;
text-align:center;
}
.dk-contact-hero h1 {
margin:0 0 17px;
color:#fff;
font-size:clamp(40px,5vw,60px);
line-height:1.04;
font-weight:750;
letter-spacing:-1.5px;
}
.dk-contact-hero p {
max-width:720px;
margin:0 auto;
color:#b8b8b8;
font-size:15px;
line-height:1.7;
}
/* =====================================================
DETAILS
===================================================== */
.dk-contact-details {
padding:70px 0 58px;
}
.dk-contact-details__intro {
max-width:690px;
margin:0 auto 34px;
text-align:center;
}
.dk-contact-details__intro h2,
.dk-contact-form-intro h2,
.dk-contact-final h2 {
margin:0;
color:#111;
font-size:clamp(30px,4vw,42px);
line-height:1.08;
letter-spacing:-1px;
}
.dk-contact-details__intro p {
margin:12px auto 0;
color:#707070;
font-size:13px;
line-height:1.65;
}
.dk-contact-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.dk-contact-card {
min-height:225px;
padding:22px;
background:#f7f7f5;
border:1px solid var(--border);
border-radius:10px;
}
.dk-contact-card__icon {
width:35px;
height:35px;
margin-bottom:22px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #ccc;
border-radius:7px;
}
.dk-contact-card__icon svg {
width:18px;
height:18px;
fill:none;
stroke:#111;
stroke-width:1.7;
}
.dk-contact-card__label {
margin-bottom:7px;
color:#999;
font-size:9px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.dk-contact-card strong,
.dk-contact-card > a {
display:block;
margin:0 0 5px;
color:#111!important;
text-decoration:none!important;
font-size:13px;
font-weight:700;
}
.dk-contact-card p {
margin:7px 0 0;
color:#777;
font-size:10.5px;
line-height:1.55;
}
/* =====================================================
SERVICE STRIP
===================================================== */
.dk-contact-service {
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.dk-contact-service__item {
padding:25px 22px;
border-right:1px solid var(--border);
}
.dk-contact-service__item:last-child {
border-right:none;
}
.dk-contact-service__item > span {
display:block;
margin-bottom:13px;
color:#999;
font-size:9px;
font-weight:800;
}
.dk-contact-service__item strong {
display:block;
margin-bottom:6px;
color:#111;
font-size:13px;
}
.dk-contact-service__item p {
margin:0;
color:#747474;
font-size:10.5px;
line-height:1.55;
}
/* =====================================================
CONTACT FORM
===================================================== */
.dk-contact-form-section {
padding:72px 0;
}
.dk-contact-form-layout {
display:grid;
grid-template-columns:.75fr 1.25fr;
gap:65px;
}
.dk-contact-form-intro > p {
margin:15px 0 28px;
color:#6f6f6f;
font-size:13px;
line-height:1.7;
}
.dk-contact-tip {
padding:16px 0;
border-top:1px solid var(--border);
}
.dk-contact-tip:last-child {
border-bottom:1px solid var(--border);
}
.dk-contact-tip strong {
display:block;
margin-bottom:5px;
color:#111;
font-size:12px;
}
.dk-contact-tip p {
margin:0;
color:#737373;
font-size:10.5px;
line-height:1.6;
}
.dk-contact-tip a {
color:#111!important;
}
.dk-contact-form-wrap {
padding:32px;
background:#f6f6f4;
border:1px solid var(--border);
border-radius:11px;
}
.dk-contact-form-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}
.dk-contact-form label > span {
display:block;
margin-bottom:7px;
color:#333;
font-size:9px;
font-weight:800;
letter-spacing:.5px;
text-transform:uppercase;
}
.dk-contact-form input,
.dk-contact-form textarea,
.dk-contact-form select {
width:100%;
padding:13px 14px;
background:#fff;
border:1px solid #d9d9d5;
border-radius:5px;
color:#111;
font:inherit;
font-size:12px;
outline:none;
}
.dk-contact-form input:focus,
.dk-contact-form textarea:focus,
.dk-contact-form select:focus {
border-color:#777;
}
.dk-contact-form__subject {
display:block;
margin-top:18px;
}
.dk-contact-message {
display:block;
margin-top:18px;
}
.dk-contact-message small {
display:block;
margin:-2px 0 8px;
color:#888;
font-size:9.5px;
line-height:1.5;
}
.dk-contact-form textarea {
min-height:145px;
resize:vertical;
}
.dk-contact-submit {
width:100%;
min-height:50px;
margin-top:17px;
background:#111;
border:1px solid #111;
border-radius:5px;
color:#fff;
cursor:pointer;
font-size:10px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.dk-contact-submit:hover {
background:#292929;
}
/* =====================================================
FINAL CTA
===================================================== */
.dk-contact-final {
margin-bottom:58px;
padding:36px;
display:flex;
align-items:center;
justify-content:space-between;
gap:35px;
background:#111214;
border-radius:11px;
color:#fff;
}
.dk-contact-final h2 {
color:#fff;
font-size:28px;
}
.dk-contact-final p {
max-width:580px;
margin:9px 0 0;
color:#a7a7a7;
font-size:11px;
line-height:1.6;
}
.dk-contact-final__actions {
min-width:220px;
display:flex;
flex-direction:column;
gap:8px;
}
.dk-contact-final__primary,
.dk-contact-final__secondary {
min-height:45px;
padding:13px 16px;
display:flex;
align-items:center;
justify-content:center;
border-radius:5px;
text-decoration:none!important;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
text-transform:uppercase;
}
.dk-contact-final__primary {
background:#fff;
color:#111!important;
}
.dk-contact-final__secondary {
border:1px solid #555;
color:#fff!important;
}
/* =====================================================
TABLET
===================================================== */
@media(max-width:900px) {
.dk-contact-grid {
grid-template-columns:repeat(2,1fr);
}
.dk-contact-form-layout {
grid-template-columns:1fr;
gap:35px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:600px) {
.dk-contact-container {
padding-left:15px;
padding-right:15px;
}
.dk-contact-hero {
padding:62px 0;
}
.dk-contact-hero h1 {
font-size:38px;
}
.dk-contact-hero p {
font-size:13px;
}
.dk-contact-details {
padding:52px 0 45px;
}
.dk-contact-grid {
grid-template-columns:1fr;
}
.dk-contact-card {
min-height:auto;
}
.dk-contact-service {
grid-template-columns:1fr;
}
.dk-contact-service__item {
border-right:none;
border-bottom:1px solid var(--border);
}
.dk-contact-service__item:last-child {
border-bottom:none;
}
.dk-contact-form-section {
padding:55px 0;
}
.dk-contact-form-wrap {
padding:22px 16px;
}
.dk-contact-form-grid {
grid-template-columns:1fr;
}
.dk-contact-final {
margin-bottom:45px;
padding:28px 20px;
flex-direction:column;
align-items:flex-start;
}
.dk-contact-final__actions {
width:100%;
}
}
