:root { --contact-black: #202020; --contact-pink: #fa2851; --contact-yellow: #ffc107; --contact-paper: #f5f6f9; --contact-muted: #77777f; }
.v2-contact-page { background: #fff; }
.v2-contact-page main { overflow: hidden; }
.v2-contact-hero { background: var(--contact-paper); min-height: 650px; overflow: hidden; padding: 185px 0 100px; position: relative; }
.v2-contact-shape { display: block; pointer-events: none; position: absolute; transform: rotate(45deg); }
.v2-contact-shape-yellow { background: var(--contact-yellow); border-radius: 80px; height: 690px; right: -480px; top: -330px; width: 690px; }
.v2-contact-shape-pink { background: var(--contact-pink); border-radius: 42px; bottom: -210px; height: 340px; left: 48%; width: 340px; }
.v2-contact-ghost { color: #ececef; font: 900 430px/.8 "Raleway", sans-serif; left: -55px; pointer-events: none; position: absolute; top: 190px; }
.v2-contact-back { align-items: center; color: var(--contact-black); display: inline-flex; font: 700 11px/1 "Raleway", sans-serif; gap: 8px; letter-spacing: .09em; margin-bottom: 48px; position: relative; text-transform: uppercase; }
.v2-contact-back:hover { color: var(--contact-pink); }
.v2-contact-eyebrow { background: var(--contact-yellow); color: var(--contact-black); display: table; font: 700 11px/1 "Raleway", sans-serif; letter-spacing: .12em; margin-bottom: 19px; padding: 11px 15px; text-transform: uppercase; }
.v2-contact-hero h1 { color: var(--contact-black); font: 700 clamp(54px, 6vw, 80px)/.94 "Raleway", sans-serif; letter-spacing: -.055em; margin: 0 0 22px; }
.v2-contact-hero h1 span { color: var(--contact-pink); }
.v2-contact-hero .col-lg-8 > p { color: var(--contact-muted); font: 400 15px/1.7 "Roboto", sans-serif; margin: 0; max-width: 590px; }
.v2-contact-hero-note { align-items: center; background: #fff; box-shadow: 0 18px 45px rgba(32,32,32,.1); display: grid; gap: 18px; grid-template-columns: 58px 1fr; margin: 0 5% 5px 15px; min-height: 125px; padding: 20px 22px; position: relative; }
.v2-contact-hero-note::after { background: var(--contact-pink); bottom: 0; content: ""; height: 6px; left: 0; position: absolute; width: 80px; }
.v2-contact-hero-note > span { color: #e1e1e5; font: 900 45px/1 "Raleway", sans-serif; }
.v2-contact-hero-note > div { display: flex; flex-direction: column; }
.v2-contact-hero-note small { color: var(--contact-pink); font: 700 8px/1 "Raleway", sans-serif; letter-spacing: .1em; margin-bottom: 7px; text-transform: uppercase; }
.v2-contact-hero-note strong { color: var(--contact-black); font: 700 16px/1.35 "Raleway", sans-serif; }

.v2-contact-body { background: #fff; overflow: hidden; padding: 90px 0 125px; position: relative; }
.v2-contact-body > .container { z-index: 2; }
.v2-contact-body-shape { pointer-events: none; position: absolute; transform: rotate(45deg); }
.v2-contact-body-black { background: var(--contact-black); border-radius: 48px; height: 470px; left: -415px; top: 570px; width: 470px; }
.v2-contact-body-yellow { background: var(--contact-yellow); border-radius: 55px; bottom: -330px; height: 540px; right: -455px; width: 540px; }
.v2-contact-section-heading { align-items: end; border-bottom: 3px solid var(--contact-black); display: flex; justify-content: space-between; margin-bottom: 27px; padding: 0 3px 20px; }
.v2-contact-section-heading p { color: var(--contact-pink); font: 700 10px/1 "Raleway", sans-serif; letter-spacing: .12em; margin: 0 0 7px; text-transform: uppercase; }
.v2-contact-section-heading h2 { color: var(--contact-black); font: 700 29px/1.2 "Raleway", sans-serif; margin: 0; }
.v2-contact-section-heading > span { background: var(--contact-yellow); color: var(--contact-black); font: 700 9px/1 "Raleway", sans-serif; letter-spacing: .08em; padding: 9px 11px; text-transform: uppercase; }
.v2-contact-channels { display: grid; gap: 17px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 65px; }
.v2-contact-channel { border: 1px solid #e4e4e8; min-height: 235px; overflow: hidden; padding: 27px 24px 23px; position: relative; transition: box-shadow .25s ease, transform .25s ease; }
.v2-contact-channel:hover { box-shadow: 0 18px 44px rgba(32,32,32,.1); transform: translateY(-4px); }
.v2-contact-channel::after { background: var(--contact-yellow); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; transition: width .25s ease; width: 55px; }
.v2-contact-channel:hover::after { background: var(--contact-pink); width: 100%; }
.v2-contact-channel-index { color: #efeff2; font: 900 77px/1 "Raleway", sans-serif; position: absolute; right: 9px; top: 10px; }
.v2-contact-channel-icon { align-items: center; display: flex; height: 54px; justify-content: center; margin-bottom: 21px; position: relative; width: 58px; }
.v2-contact-channel-icon img { max-height: 54px; max-width: 58px; object-fit: contain; }
.v2-contact-channel h3 { color: var(--contact-black); font: 700 16px/1.35 "Raleway", sans-serif; margin: 0 0 9px; position: relative; }
.v2-contact-channel p { color: #7c7c83; font: 400 10px/1.55 "Roboto", sans-serif; margin: 2px 0; overflow-wrap: anywhere; position: relative; }

.v2-contact-workspace { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); margin-top: 5px; }
.v2-contact-visual { background: var(--contact-black); background-position: center; background-size: cover; color: #fff; display: flex; flex-direction: column; min-height: 670px; overflow: hidden; padding: 48px 42px 40px; position: relative; }
.v2-contact-visual::before { background: var(--contact-yellow); content: ""; height: 8px; left: 0; position: absolute; top: 0; width: 120px; }
.v2-contact-visual-number { color: rgba(255,255,255,.08); font: 900 115px/1 "Raleway", sans-serif; position: absolute; right: 20px; top: 28px; }
.v2-contact-visual > div:not(.v2-contact-visual-mark) { margin-top: auto; position: relative; z-index: 2; }
.v2-contact-visual p { color: var(--contact-yellow); font: 700 9px/1 "Raleway", sans-serif; letter-spacing: .12em; margin: 0 0 12px; text-transform: uppercase; }
.v2-contact-visual h2 { color: #fff; font: 700 clamp(33px, 3.2vw, 47px)/1.03 "Raleway", sans-serif; letter-spacing: -.04em; margin: 0 0 19px; }
.v2-contact-visual h2 span { color: var(--contact-pink); }
.v2-contact-visual small { color: #b6b6bc; display: block; font: 400 11px/1.7 "Roboto", sans-serif; max-width: 330px; }
.v2-contact-visual-mark { color: #2b2b2b; font: 900 310px/.8 "Raleway", sans-serif; left: -28px; pointer-events: none; position: absolute; top: 110px; transform: rotate(-7deg); }
.v2-contact-visual.has-image .v2-contact-visual-mark { color: rgba(255,255,255,.08); }
.v2-contact-form-panel { border: 1px solid #e2e2e6; border-left: 0; padding: 47px 45px 43px; }
.v2-contact-form-heading { margin-bottom: 31px; }
.v2-contact-form-heading p { color: var(--contact-pink); font: 700 9px/1 "Raleway", sans-serif; letter-spacing: .12em; margin: 0 0 8px; text-transform: uppercase; }
.v2-contact-form-heading h2 { color: var(--contact-black); font: 700 29px/1.2 "Raleway", sans-serif; margin: 0 0 7px; }
.v2-contact-form-heading > span { color: #898990; font: 400 11px/1.5 "Roboto", sans-serif; }
.v2-contact-alert { align-items: center; background: #fff0f3; border-left: 5px solid var(--contact-pink); color: #a91734; display: flex; gap: 12px; margin-bottom: 23px; padding: 15px 17px; }
.v2-contact-alert > i { font-size: 23px; }
.v2-contact-alert > div { display: flex; flex-direction: column; }
.v2-contact-alert strong { font: 700 11px/1.4 "Raleway", sans-serif; }
.v2-contact-alert span { font: 400 10px/1.5 "Roboto", sans-serif; }
.v2-contact-form-grid { display: grid; gap: 21px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 22px; }
.v2-contact-full { grid-column: 1 / -1; }
.v2-contact-field { margin: 0; min-width: 0; }
.v2-contact-field > label, .v2-contact-message-label > label { color: #424248; display: block; font: 700 10px/1 "Raleway", sans-serif; margin: 0 0 9px; }
.v2-contact-field > div:not(.v2-contact-textarea):not(.v2-contact-message-label) { align-items: center; border: 1px solid #dedee3; display: flex; min-height: 55px; position: relative; transition: border-color .2s ease, box-shadow .2s ease; width: 100%; }
.v2-contact-field > div:not(.v2-contact-message-label):focus-within { border-color: var(--contact-black); box-shadow: 4px 4px 0 var(--contact-yellow); }
.v2-contact-field > div > i { color: var(--contact-pink); flex: 0 0 auto; font-size: 19px; margin-left: 16px; }
.v2-contact-field input { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--contact-black); flex: 1 1 0; font: 400 12px/1 "Roboto", sans-serif; height: auto; margin: 0; min-width: 0; outline: 0; padding: 18px 14px; width: 0; }
.v2-contact-field input::placeholder, .v2-contact-field textarea::placeholder { color: #aaaab0; }
.v2-contact-message-label { align-items: center; display: flex; justify-content: space-between; }
.v2-contact-message-label > span { color: #9a9aa0; font: 500 8px/1 "Roboto", sans-serif; }
.v2-contact-message-label > span b { color: var(--contact-pink); }
.v2-contact-textarea { border: 1px solid #dedee3; transition: border-color .2s ease, box-shadow .2s ease; }
.v2-contact-textarea textarea { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--contact-black); display: block; font: 400 12px/1.65 "Roboto", sans-serif; margin: 0; min-height: 145px; outline: 0; padding: 16px; resize: vertical; width: 100%; }
.v2-contact-field > small { color: #bd1939; display: block; font: 500 9px/1.45 "Roboto", sans-serif; margin-top: 6px; }
.v2-contact-submit { align-items: center; background: var(--contact-pink); border: 1px solid var(--contact-pink); border-radius: 0; box-shadow: none; color: #fff; cursor: pointer; display: inline-flex; font: 700 10px/1 "Raleway", sans-serif; gap: 55px; justify-content: space-between; margin: 0; min-width: 215px; padding: 16px 18px; }
.v2-contact-submit:hover { background: var(--contact-black); border-color: var(--contact-black); }
.v2-contact-submit i { font-size: 17px; transition: transform .2s ease; }
.v2-contact-submit:hover i { transform: translateX(4px); }

.v2-contact-map-section { margin-top: 75px; }
.v2-contact-map-heading { align-items: center; border-bottom: 3px solid var(--contact-black); display: flex; gap: 17px; margin-bottom: 25px; padding-bottom: 18px; }
.v2-contact-map-heading > span { color: #dedee2; font: 900 42px/1 "Raleway", sans-serif; }
.v2-contact-map-heading p { color: var(--contact-pink); font: 700 8px/1 "Raleway", sans-serif; letter-spacing: .1em; margin: 0 0 5px; text-transform: uppercase; }
.v2-contact-map-heading h2 { color: var(--contact-black); font: 700 25px/1.2 "Raleway", sans-serif; margin: 0; }
.v2-contact-map { border: 1px solid #e2e2e6; height: 480px; padding: 10px; position: relative; }
.v2-contact-map::before { background: var(--contact-yellow); content: ""; height: 75px; left: -10px; position: absolute; top: -10px; width: 10px; }
.v2-contact-map iframe { border: 0; height: 100%; width: 100%; }
@media (max-width: 1199.98px) {
    .v2-contact-visual { padding-left: 32px; padding-right: 32px; }
    .v2-contact-form-panel { padding-left: 35px; padding-right: 35px; }
}
@media (max-width: 991.98px) {
    .v2-contact-hero { min-height: auto; padding: 155px 0 85px; }
    .v2-contact-hero-note { margin: 35px 0 0; max-width: 360px; }
    .v2-contact-body { padding: 65px 0 95px; }
    .v2-contact-workspace { grid-template-columns: 1fr; }
    .v2-contact-visual { min-height: 440px; }
    .v2-contact-form-panel { border-left: 1px solid #e2e2e6; }
}
@media (max-width: 767.98px) {
    .v2-contact-hero { padding: 130px 0 70px; }
    .v2-contact-shape, .v2-contact-ghost, .v2-contact-body-shape { display: none; }
    .v2-contact-body { padding: 45px 0 75px; }
    .v2-contact-channels { margin-bottom: 45px; }
    .v2-contact-form-panel { padding: 38px 25px 34px; }
    .v2-contact-form-grid { grid-template-columns: 1fr; }
    .v2-contact-full { grid-column: auto; }
    .v2-contact-map-section { margin-top: 55px; }
    .v2-contact-map { height: 390px; }
}
@media (max-width: 480px) {
    .v2-contact-section-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
    .v2-contact-visual { min-height: 390px; padding: 36px 24px 30px; }
    .v2-contact-visual-mark { font-size: 240px; }
    .v2-contact-form-panel { padding-left: 19px; padding-right: 19px; }
    .v2-contact-submit { width: 100%; }
}
