.cg-contact-page > section {
position: relative;
isolation: isolate;
overflow: hidden;
--cg-contact-bg-shift: 0px;
--cg-contact-bg-rotate: 0deg;
--cg-contact-bg-shift-secondary: 0px;
--cg-contact-bg-rotate-secondary: 0deg;
}
.cg-contact-page .cg-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
color: #9a6f5d;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}
.cg-contact-page .cg-section-eyebrow::before {
content: "";
display: inline-block;
width: 26px;
height: 1px;
background: currentColor;
opacity: 0.48;
}
.cg-contact-page .cg-section-title {
margin: 0 0 18px;
color: var(--cg-color-text);
font-size: clamp(30px, 4vw, 50px);
line-height: 1.1;
letter-spacing: 0;
}
.cg-contact-page .cg-section-text {
color: var(--cg-color-muted);
font-size: 16px;
line-height: 1.8;
}
.cg-contact-page .cg-section-text p {
margin: 0 0 14px;
}
.cg-contact-page .cg-section-text p:last-child {
margin-bottom: 0;
}
.cg-contact-page > section > .container {
position: relative;
z-index: 2;
}
.cg-contact-page > section::before,
.cg-contact-page > section::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 1;
will-change: transform;
transition: transform 0.16s linear;
}
.cg-contact-page > section::before {
top: 8%;
right: -118px;
width: clamp(200px, 23vw, 320px);
height: clamp(200px, 23vw, 320px);
border: 1px solid rgba(183, 141, 121, 0.14);
border-radius: 999px;
background:
radial-gradient(
circle at center,
transparent 58%,
rgba(183, 141, 121, 0.14) 59% 60%,
transparent 61% 100%
),
repeating-linear-gradient(
35deg,
rgba(183, 141, 121, 0.08) 0 1px,
transparent 1px 14px
);
transform: translate3d(0, var(--cg-contact-bg-shift), 0)
rotate(var(--cg-contact-bg-rotate));
}
.cg-contact-page > section::after {
left: -106px;
bottom: 10%;
width: clamp(180px, 21vw, 290px);
height: clamp(180px, 21vw, 290px);
border: 1px solid rgba(127, 143, 115, 0.13);
border-radius: 28px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.2),
rgba(226, 233, 215, 0.12)
),
repeating-linear-gradient(
-30deg,
rgba(29, 29, 29, 0.04) 0 1px,
transparent 1px 12px
);
transform: translate3d(0, var(--cg-contact-bg-shift-secondary), 0)
rotate(var(--cg-contact-bg-rotate-secondary));
}
.cg-contact-page > section:nth-of-type(2n)::before {
left: -118px;
right: auto;
}
.cg-contact-page > section:nth-of-type(2n)::after {
right: -106px;
left: auto;
}
.cg-contact-hero {
background:
radial-gradient(circle at 12% 16%, rgba(216, 168, 142, 0.2) 0%, transparent 28%),
radial-gradient(circle at 82% 18%, rgba(127, 143, 115, 0.12) 0%, transparent 26%),
linear-gradient(180deg, #fcf7f3 0%, #fffdfb 100%);
}
.cg-contact-hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(34px, 5vw, 70px);
}
.cg-contact-hero__content {
max-width: 760px;
}
.cg-contact-hero__title {
margin: 0 0 20px;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.05;
letter-spacing: 0;
color: var(--cg-color-text);
}
.cg-contact-hero__text {
font-size: 17px;
line-height: 1.75;
color: var(--cg-color-muted);
}
.cg-contact-hero__text p:last-child {
margin-bottom: 0;
}
.cg-contact-hero__media {
position: relative;
}
.cg-contact-hero__image-wrap {
position: relative;
border-radius: 30px;
overflow: hidden;
background: #f3e7df;
border: 1px solid rgba(183, 141, 121, 0.16);
box-shadow: 0 26px 70px rgba(58, 47, 41, 0.13);
}
.cg-contact-hero__image-wrap::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
pointer-events: none;
}
.cg-contact-hero__img {
display: block;
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
transition: transform 0.6s ease;
}
.cg-contact-hero__image-wrap:hover .cg-contact-hero__img {
transform: scale(1.035);
}
.cg-contact-hero__placeholder {
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, #ead6c9 0%, #f7ede7 100%);
}
.cg-contact-info {
background:
linear-gradient(180deg, #fffdfb 0%, #fff7f1 100%);
}
.cg-contact-info__header {
max-width: 760px;
margin: 0 auto 44px;
text-align: center;
}
.cg-contact-info__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.cg-contact-info__card {
position: relative;
min-height: 100%;
padding: 34px 26px 30px;
border-radius: 26px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 247, 0.9));
border: 1px solid rgba(183, 141, 121, 0.14);
box-shadow: 0 18px 48px rgba(58, 47, 41, 0.06);
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
}
.cg-contact-info__card::before {
content: "";
display: block;
width: 42px;
height: 42px;
margin-bottom: 20px;
border-radius: 999px;
background:
radial-gradient(circle at 50% 50%, #9a6f5d 0 4px, transparent 5px),
rgba(217, 184, 167, 0.22);
}
.cg-contact-info__card:hover {
transition-delay: 0s !important;
transform: translateY(-6px);
border-color: rgba(183, 141, 121, 0.26);
box-shadow: 0 26px 70px rgba(58, 47, 41, 0.1);
}
.cg-contact-info__label {
margin-bottom: 10px;
font-size: 13px;
line-height: 1.4;
font-weight: 700;
text-transform: uppercase;
color: #9a6f5d;
}
.cg-contact-info__value {
color: var(--cg-color-text);
font-size: clamp(19px, 2.1vw, 24px);
line-height: 1.3;
font-weight: 650;
overflow-wrap: anywhere;
}
.cg-contact-info__value a {
color: inherit;
text-decoration: none;
}
.cg-contact-info__value a:hover {
color: #8e6554;
}
.cg-contact-form {
background: #fffdfb;
}
.cg-contact-form__grid {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: clamp(34px, 5vw, 64px);
align-items: start;
}
.cg-contact-form__content {
position: sticky;
top: 112px;
}
.cg-contact-form__box {
position: relative;
overflow: hidden;
padding: clamp(26px, 4vw, 38px);
border-radius: 30px;
background:
radial-gradient(circle at 100% 0%, rgba(216, 168, 142, 0.16) 0%, transparent 34%),
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 247, 0.92));
border: 1px solid rgba(183, 141, 121, 0.16);
box-shadow: 0 22px 60px rgba(58, 47, 41, 0.08);
}
.cg-contact-form__box::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(260px, 50%);
height: 4px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, #9f735f 0%, #d8a88e 100%);
transform: translateX(-50%);
}
.cg-contact-form__box form,
.cg-contact-form__box .wpcf7 {
position: relative;
z-index: 1;
margin-bottom: 0;
}
.cg-form,
.cg-contact-form__box form {
display: flex;
flex-direction: column;
gap: 16px;
}
.cg-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.cg-form__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.cg-form__field br,
.cg-form p br {
display: none;
}
.cg-form p {
margin: 0;
padding: 0;
}
.cg-form__label {
font-size: 13px;
font-weight: 700;
color: #7e6c62;
}
.cg-contact-form__box input[type="text"],
.cg-contact-form__box input[type="email"],
.cg-contact-form__box input[type="tel"],
.cg-contact-form__box textarea,
.cg-contact-form__box select,
.cg-form input,
.cg-form textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid rgba(183, 141, 121, 0.22);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
color: var(--cg-color-text);
font-size: 15px;
line-height: 1.45;
box-shadow: none;
transition:
border-color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.cg-contact-form__box input:focus,
.cg-contact-form__box textarea:focus,
.cg-contact-form__box select:focus,
.cg-form input:focus,
.cg-form textarea:focus {
outline: 0;
border-color: rgba(154, 111, 93, 0.55);
background: #fff;
box-shadow: 0 0 0 3px rgba(217, 184, 167, 0.22);
}
.cg-contact-form__box textarea,
.cg-form textarea {
min-height: 140px;
resize: vertical;
}
.cg-form__footer {
margin-top: 4px;
}
.cg-form .cg-button,
.cg-contact-form__box input[type="submit"] {
min-height: 48px;
padding: 13px 22px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
}
.wpcf7-not-valid-tip {
margin-top: 6px;
color: #a33a2e;
font-size: 13px;
}
.wpcf7-response-output {
margin: 10px 0 0 !important;
padding: 12px 14px !important;
border-radius: 16px;
font-size: 14px;
line-height: 1.45;
}
.cg-contact-extra {
background:
linear-gradient(180deg, #fffdfb 0%, #fcf7f3 100%);
}
.cg-contact-extra__box {
position: relative;
overflow: hidden;
max-width: 900px;
margin: 0 auto;
padding: clamp(34px, 5vw, 58px);
border-radius: 30px;
text-align: center;
background:
radial-gradient(circle at 16% 0%, rgba(217, 184, 167, 0.24) 0%, transparent 32%),
radial-gradient(circle at 84% 100%, rgba(127, 143, 115, 0.2) 0%, transparent 30%),
linear-gradient(135deg, #1f1a17 0%, #3a2f29 100%);
color: #fff;
box-shadow: 0 28px 80px rgba(31, 26, 23, 0.18);
}
.cg-contact-extra__box::before {
content: "";
position: absolute;
inset: 1px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: inherit;
pointer-events: none;
}
.cg-contact-extra__box > * {
position: relative;
z-index: 1;
}
.cg-contact-extra__title {
margin: 0 0 18px;
font-size: clamp(28px, 4vw, 48px);
line-height: 1.1;
letter-spacing: 0;
color: #fff;
}
.cg-contact-extra__text {
margin: 0 auto 24px;
max-width: 680px;
color: rgba(255, 255, 255, 0.78);
font-size: 17px;
line-height: 1.75;
}
.cg-contact-extra__text p:last-child {
margin-bottom: 0;
}
.cg-contact-extra .cg-button {
background: #fff;
color: var(--cg-color-text);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}
.cg-contact-extra .cg-button:hover {
background: #fcf7f3;
}
@media (max-width: 991px) {
.cg-contact-hero__grid,
.cg-contact-form__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.cg-contact-form__content {
position: static;
}
.cg-contact-info__grid {
grid-template-columns: repeat(2, 1fr);
}
.cg-contact-hero__img {
min-height: 360px;
}
}
@media (max-width: 767px) {
.cg-contact-page .cg-section-title {
font-size: clamp(28px, 9vw, 38px);
}
.cg-contact-page .cg-section-eyebrow {
font-size: 12px;
}
.cg-contact-hero__title {
font-size: clamp(34px, 11vw, 46px);
}
.cg-contact-hero__image-wrap {
border-radius: 24px;
}
.cg-contact-hero__img {
min-height: 300px;
}
.cg-contact-page > section::before {
right: -108px;
width: clamp(148px, 48vw, 210px);
height: clamp(148px, 48vw, 210px);
opacity: 0.58;
}
.cg-contact-page > section::after {
left: -98px;
width: clamp(126px, 42vw, 188px);
height: clamp(126px, 42vw, 188px);
opacity: 0.52;
}
.cg-contact-info__grid,
.cg-form__row {
grid-template-columns: 1fr;
}
.cg-contact-form__box,
.cg-contact-extra__box {
padding: 28px 20px;
}
}