.mk-contact-hero { position: relative; overflow: hidden; isolation: isolate; } .mk-contact-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(20,20,20,0.58), rgba(20,20,20,0.58)), var(--mk-hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } .mk-contact-hero > .mk-container { position: relative; z-index: 2; } .mk-contact-hero .mk-hero__bg--intelligence { display: none; } .mk-contact-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "intro form" "cards form"; gap: 24px 40px; align-items: start; width: 100%; margin-top: 0; } .mk-contact-hero__intro { grid-area: intro; padding-right: 90px; } .mk-contact-card--form { grid-area: form; } .mk-contact-hero__cards { grid-area: cards; align-self: start; padding-right: 90px; margin-top: 0; } .mk-contact-hero__actions, .mk-contact-form__actions { margin-top: 20px; } .mk-contact-card { background: var(--clr-surface); border: 1px solid rgba(255,255,255,0.10); box-shadow: var(--card-shadow); border-radius: 14px; overflow: hidden; padding: 30px; } .mk-contact-card__head { margin-bottom: 12px; } .mk-contact-card__title { font-family: var(--ff-heading); font-size: var(--type-card-title); line-height: 1.2; margin-bottom: 4px; color: var(--clr-text); } .mk-contact-card__sub { font-size: var(--type-p); line-height: var(--lh-base); color: var(--clr-text); opacity: 0.8; } .mk-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .mk-field--full { grid-column: 1 / -1; } .mk-contact-form__alert { margin: 0 0 18px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--clr-border, #d8d8d8); font-size: var(--type-meta); line-height: 1.5; } .mk-contact-form__alert--success { background: rgba(12, 120, 84, 0.08); border-color: rgba(12, 120, 84, 0.25); color: var(--clr-text); } .mk-contact-form__alert--error { background: rgba(153, 27, 27, 0.08); border-color: rgba(153, 27, 27, 0.25); color: var(--clr-text); } .mk-contact-form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .mk-contact-submit-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; } .mk-contact-submit-btn__label { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .mk-contact-submit-btn__spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: none; flex: 0 0 16px; animation: mkContactBtnSpin 0.7s linear infinite; } .mk-contact-submit-btn.is-loading { pointer-events: none; opacity: 0.9; } .mk-contact-submit-btn.is-loading .mk-contact-submit-btn__spinner { display: inline-block; } .mk-contact-submit-btn:disabled { pointer-events: none; opacity: 0.65; cursor: not-allowed; } @keyframes mkContactBtnSpin { to { transform: rotate(360deg); } } .mk-contact-direct-section { background: #f7f7f8; padding: 32px 0; } .mk-contact-details-title { color: var(--clr-text-dark); } .mk-contact-details-intro { margin-top: 8px; } .mk-contact-direct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .mk-contact-direct-card { display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; min-height: 100%; padding: 24px; border-radius: var(--radius-lg); border: 1px solid rgba(0,0,0,0.08); background: var(--clr-text); box-shadow: 0 10px 30px rgba(0,0,0,0.05); color: var(--clr-text-dark); } .mk-contact-direct-card__icon { font-size: 36px; color: var(--clr-primary); margin-bottom: 4px; } .mk-contact-direct-card__label { font-size: var(--type-meta); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(0,0,0,0.55); } .mk-contact-direct-card__value { font-family: var(--ff-heading); font-size: var(--type-subpage-title); line-height: 1.15; color: var(--clr-text-dark); } .mk-contact-direct-card__value a { color: var(--clr-primary); text-decoration: none; } .mk-contact-direct-card__value a:hover { text-decoration: underline; } .mk-contact-direct-card__meta { font-size: var(--type-p); line-height: var(--lh-base); color: rgba(0,0,0,0.70); max-width: 28ch; } .mk-contact-map-section { padding: 0; } .mk-contact-map-container { padding: 0; } .mk-contact-map-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .mk-map--fullbleed { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; } .mk-map--fullbleed iframe, .mk-map--fullbleed img { width: 100%; height: 400px; border: 0; border-radius: 0; display: block; } .mk-map--fullbleed img { object-fit: cover; object-position: top center; }