.contact-hero { min-height: 560px; color: #fff; display: flex; flex-direction: column; background: linear-gradient(90deg, rgba(7, 9, 8, .82), rgba(7, 9, 8, .42) 54%, rgba(7, 9, 8, .16)), url('assets/images/contact-hero.png') center / cover; }.contact-hero-content { width: min(1280px, calc(100% - 72px)); margin: auto auto 82px; }.contact-hero h1, .contact-main h2, .contact-note h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: -.025em; }.contact-hero h1 { max-width: 830px; margin: 0; font-size: clamp(55px, 7vw, 106px); line-height: .84; }.contact-hero h1 em { font-style: normal; color: #d9e37f; }.contact-hero-content > p:not(.eyebrow) { max-width: 550px; margin: 25px 0 0; line-height: 1.75; font-size: 15px; color: #d9d9d9; }
.contact-main { width: min(1280px, calc(100% - 72px)); margin: 0 auto; padding: 118px 0; display: grid; grid-template-columns: .85fr 1.15fr; gap: 110px; }.contact-main h2 { margin: 0; font-size: clamp(49px, 5vw, 78px); line-height: .87; }.contact-intro { max-width: 430px; margin: 26px 0 48px; color: #505050; font-size: 15px; line-height: 1.8; }.contact-list { border-top: 1px solid #cfcfc8; max-width: 450px; }.contact-list > * { min-height: 72px; padding: 16px 0; display: grid; gap: 5px; border-bottom: 1px solid #cfcfc8; }.contact-list span { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #777; }.contact-list strong { font-size: 14px; }.contact-list a { transition: color .2s; }.contact-list a:hover { color: #60701e; }
.contact-form { padding: clamp(30px, 4vw, 54px); background: #f2f2ef; }.form-heading h2 { margin: 0; font-size: 47px; line-height: .9; }.form-heading > p:last-child { max-width: 470px; margin: 14px 0 37px; font-size: 13px; line-height: 1.7; color: #5c5c5c; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 30px; }.form-grid label { display: grid; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.form-grid .full-width { grid-column: 1 / -1; }.form-grid input, .form-grid select, .form-grid textarea { width: 100%; border: 0; border-bottom: 1px solid #777; border-radius: 0; padding: 10px 0; color: #161616; font: 14px Manrope, sans-serif; background: transparent; outline: none; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: #111; }.form-grid textarea { resize: vertical; min-height: 90px; }.website-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }.consent { display: flex; align-items: flex-start; gap: 10px; margin: 29px 0 23px; font-size: 11px; line-height: 1.6; color: #5d5d5d; }.consent input { accent-color: #111; margin-top: 3px; }.contact-submit { border: 0; padding: 17px 22px; color: #fff; background: #111; font: 800 11px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .2s; }.contact-submit:hover { background: #3d3d37; transform: translateY(-2px); }.contact-submit:disabled { cursor: wait; opacity: .7; }.contact-submit span { margin-left: 18px; font-size: 17px; }.form-response { min-height: 18px; margin: 16px 0 0; font-size: 12px; font-weight: 700; color: #526117; }
.contact-note { padding: 94px max(36px, calc((100% - 1280px) / 2)); color: #fff; background: #151615; }.contact-note h2 { margin: 0; font-size: clamp(48px, 6vw, 82px); line-height: .86; }.contact-note a { display: inline-flex; gap: 15px; margin-top: 30px; padding: 14px 17px; border: 1px solid #909090; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.contact-note a:hover { color: #111; background: #fff; }
@media (max-width: 900px) { .contact-main { grid-template-columns: 1fr; gap: 58px; }.contact-hero-content { width: min(100% - 44px, 720px); }.contact-main { width: min(100% - 44px, 720px); }.contact-list { max-width: none; } }
@media (max-width: 560px) { .contact-hero { min-height: 520px; }.contact-hero-content { margin-bottom: 54px; }.contact-hero h1 { font-size: 59px; }.contact-hero-content > p:not(.eyebrow) { font-size: 13px; }.contact-main { padding: 78px 0; }.contact-main h2 { font-size: 59px; }.contact-intro { font-size: 13px; }.contact-form { padding: 28px 22px; }.form-grid { grid-template-columns: 1fr; gap: 22px; }.form-grid .full-width { grid-column: auto; }.contact-note { padding: 66px 22px; }.contact-note h2 { font-size: 57px; } }