/* ── Page Hero ───────────────────────────────── */
.contact-hero {
    position:relative;
    min-height: 90vh;
    background-color: var(--green-400);
    padding: clamp(72px, 10vw, 120px) clamp(24px, 5vw, 60px)
    clamp(56px, 7vw, 88px);
    text-align: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
}

.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
    to bottom,
    rgba(53, 64, 36, 0.08) 0%,
    rgba(44, 33, 16, 0.55) 60%,
    rgba(44, 33, 16, 0.82) 100%
);
}

.contact-hero::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
border-radius: 50%;
background: rgba(214, 230, 176, 0.05);
}

.contact-hero .eyebrow {
display: inline-block;
font-family: "Jost", sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cream-50);
margin-bottom: 16px;
position: relative;
}

.contact-hero h1 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(42px, 6vw, 70px);
font-weight: 300;
font-style: italic;
color: var(--cream-100);
line-height: 1.1;
margin-bottom: 18px;
position: relative;
}

.contact-hero p {
color: var(--cream-200);
font-size: 16px;
max-width: 440px;
margin: 0 auto;
line-height: 1.75;
position: relative;
}

.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}

.hero-scroll {
position: absolute;
bottom: clamp(24px, 4vw, 48px);
right: clamp(24px, 5vw, 60px);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: rgba(245, 235, 227, 0.5);
font-family: "Jost", sans-serif;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
z-index: 2;
}

.hero-scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(
    to bottom,
    rgba(245, 235, 227, 0.5),
    transparent
);
animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
0%,
100% {
    opacity: 0.4;
    transform: scaleY(1);
}
50% {
    opacity: 0.9;
    transform: scaleY(1.1);
}
}

/* ── Contact Grid ────────────────────────────── */
.contact-page-grid {
max-width: 1160px;
margin: 0 auto;
padding: clamp(64px, 9vw, 120px) clamp(24px, 5vw, 60px);
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 72px;
align-items: start;
}

/* ── Info Side ───────────────────────────────── */
.contact-info-panel h2 {
font-size: clamp(30px, 4vw, 44px);
font-weight: 300;
margin-bottom: 10px;
}

.contact-info-panel h2 em {
font-style: italic;
color: var(--green-300);
}

.contact-info-panel .sub {
color: var(--brown-50);
font-size: 15px;
margin-bottom: 48px;
line-height: 1.7;
}

.info-item {
display: flex;
gap: 16px;
margin-bottom: 28px;
align-items: flex-start;
}

.info-icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
background-color: var(--green-50);
border: 1px solid var(--cream-200);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 20px;
}

.info-item-text {
padding-top: 2px;
}

.info-item-label {
font-family: "Jost", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--green-200);
margin-bottom: 4px;
}

.info-item-value {
font-family: "Jost", sans-serif;
font-size: 15px;
font-weight: 300;
color: var(--brown-100);
line-height: 1.65;
}

.info-item-value a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}

.info-item-value a:hover {
color: var(--green-300);
}

address {
font-style: normal;
}

/* Divider */
.info-divider {
height: 1px;
background: var(--cream-200);
margin: 36px 0;
}

.info-note {
background: var(--green-50);
border: 1px solid var(--cream-200);
border-radius: 14px;
padding: 20px 22px;
font-size: 14px;
color: var(--brown-50);
line-height: 1.7;
}

.info-note strong {
color: var(--brown-100);
font-weight: 500;
}

/* ── Form Card ───────────────────────────────── */
.contact-form-card {
background: #fff;
border-radius: 24px;
padding: clamp(36px, 4vw, 56px);
box-shadow: 0 8px 48px rgba(53, 64, 36, 0.08);
border: 1px solid var(--cream-200);
}

.form-card-header {
margin-bottom: 36px;
}

.form-card-header h3 {
font-size: clamp(22px, 2.8vw, 30px);
font-weight: 400;
margin-bottom: 6px;
}

.form-card-header p {
font-size: 14px;
color: var(--brown-50);
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}

.form-group {
margin-bottom: 16px;
}

.form-group label {
display: block;
font-family: "Jost", sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--green-200);
margin-bottom: 7px;
}

.form-control {
width: 100%;
padding: 13px 16px;
font-family: "Jost", sans-serif;
font-size: 15px;
font-weight: 300;
color: var(--brown-100);
background-color: var(--cream-50);
border: 1.5px solid var(--cream-200);
border-radius: 10px;
transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
outline: none;
-webkit-appearance: none;
}

.form-control:focus {
border-color: var(--green-200);
box-shadow: 0 0 0 3px rgba(136, 144, 99, 0.12);
background: #fff;
}

.form-control::placeholder {
color: rgba(76, 61, 25, 0.3);
}

textarea.form-control {
resize: vertical;
min-height: 120px;
}

/* Service checkboxes */
.services-label {
font-family: "Jost", sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--green-200);
margin-bottom: 12px;
display: block;
}

.checkbox-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}

.checkbox-chip {
position: relative;
}

.checkbox-chip input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

.checkbox-chip label {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 50px;
border: 1.5px solid var(--cream-200);
background: var(--cream-50);
font-family: "Jost", sans-serif;
font-size: 13px;
font-weight: 400;
color: var(--brown-50);
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}

.checkbox-chip input:checked + label {
background: var(--green-400);
border-color: var(--green-400);
color: var(--cream-100);
}

.checkbox-chip label:hover {
border-color: var(--green-200);
color: var(--green-300);
}

.form-submit-row {
display: flex;
align-items: center;
gap: 20px;
margin-top: 8px;
}

.form-note {
font-size: 12px;
color: var(--brown-50);
opacity: 0.6;
line-height: 1.5;
}

.submit-btn {
flex-shrink: 0;
}

/* Success/error states */
.form-status {
display: none;
padding: 14px 18px;
border-radius: 10px;
font-size: 14px;
margin-top: 16px;
}

.form-status.success {
background: var(--green-50);
color: var(--green-300);
border: 1px solid var(--green-100);
}

.form-status.error {
background: #fff0f0;
color: #c0392b;
border: 1px solid #f5c6cb;
}

/* Responsive */
@media (max-width: 900px) {
.contact-page-grid {
    grid-template-columns: 1fr;
    gap: 48px;
}
.form-row {
    grid-template-columns: 1fr;
}
}