/* ==========================================================================
   Contact Form — gray section with two white cards (intro + Gravity Form).
   ========================================================================== */

.section.contactform {
    padding-top: 20px;
    padding-bottom: 40px;
    background: var(--color-background);
}

/* Gray panel wrapping the white cards */
.contactform-panel {
    background: var(--color-secondary);
    border-radius: var(--radius-sm);
    padding: clamp(20px, 3vw, 32px);
}

.contactform-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 24px;
    align-items: start;
}

.contactform-card {
    background: var(--color-background);
    border-radius: var(--radius-sm);
    padding: clamp(24px, 3vw, 40px);
}

/* ---- Left: intro -------------------------------------------------------- */
.contactform-heading { margin: 0 0 16px; max-width: 500px; color: var(--color-foreground); }
.contactform-body { color: var(--color-secondary-foreground); }
.contactform-body p { margin: 0 0 1em; }
.contactform-body p:last-child { margin-bottom: 0; }

.contactform-info-list {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.contactform-info {
    display: flex;
    align-items: center;
    gap: 16px;
}
.contactform-info-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: linear-gradient(
        104.6deg,
        var(--color-brand-secondary-blue) 30%,
        var(--color-brand-light-blue) 159%
    );
    color: var(--color-background);
}
.contactform-info-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    color: #ffffff; /* SVG paths use currentColor */
}
.contactform-info-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-navy);
    margin-bottom: 4px;
}
.contactform-info-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-navy);
}
.contactform-info-text a { color: inherit; text-decoration: none; }
.contactform-info-text a:hover { text-decoration: underline; }

/* ==========================================================================
   Right: Gravity Form overrides (scoped)
   ========================================================================== */
.contactform .gform_wrapper { margin: 0; }
.contactform .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.contactform .gform_wrapper .gfield { margin: 0; }

.contactform .gform_wrapper .gfield_label,
.contactform .gform_wrapper legend.gfield_label {
    font-family: var(--font-body);
    font-size: var(--text-label-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
    margin: 0 0 8px;
}
.contactform .gform_wrapper .gfield_required { color: var(--color-destructive); }

.contactform .gform_wrapper .ginput_container input[type="text"],
.contactform .gform_wrapper .ginput_container input[type="email"],
.contactform .gform_wrapper .ginput_container input[type="tel"],
.contactform .gform_wrapper .ginput_container input[type="number"],
.contactform .gform_wrapper .ginput_container input[type="url"],
.contactform .gform_wrapper .ginput_container select,
.contactform .gform_wrapper .ginput_container textarea {
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    padding: 12px 16px !important;
    font-family: var(--font-body);
    font-size: var(--text-paragraph-md) !important;
    font-weight: 300;
    line-height: 1.4 !important;
    color: var(--color-foreground) !important;
    background-color: var(--color-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transition: border-color var(--ease-default), box-shadow var(--ease-default);
}

/* Select — custom chevron, room for it, no clipping */
.contactform .gform_wrapper .ginput_container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1917' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}

/* Textarea — fixed, sensible height regardless of the form's row/size setting */
.contactform .gform_wrapper textarea,
.contactform .gform_wrapper textarea.small,
.contactform .gform_wrapper textarea.medium,
.contactform .gform_wrapper textarea.large {
    height: 120px !important;
    min-height: 120px !important;
    resize: vertical;
}

/* Hide the "* indicates required fields" legend */
.contactform .gform_wrapper .gform_required_legend { display: none !important; }
.contactform .gform_wrapper .ginput_container input::placeholder,
.contactform .gform_wrapper .ginput_container textarea::placeholder {
    color: var(--color-muted-foreground);
    font-size: 14px;
    opacity: 1;
}
.contactform .gform_wrapper .ginput_container input:focus,
.contactform .gform_wrapper .ginput_container select:focus,
.contactform .gform_wrapper .ginput_container textarea:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 1px var(--color-navy);
}

/* Validation */
.contactform .gform_wrapper .gfield_error .ginput_container input,
.contactform .gform_wrapper .gfield_error .ginput_container select,
.contactform .gform_wrapper .gfield_error .ginput_container textarea {
    border-color: var(--color-destructive);
}
.contactform .gform_wrapper .validation_message,
.contactform .gform_wrapper .gfield_validation_message {
    font-size: var(--text-paragraph-sm);
    color: var(--color-destructive);
    margin-top: 6px;
    background: none;
    border: 0;
    padding: 0;
}
.contactform .gform_wrapper .gform_validation_errors {
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

/* ---- Submit (Send pill with paper-plane) ------------------------------- */
.contactform .gform_footer { margin: 24px 0 0; padding: 0; }
.contactform .gform_wrapper .gform_footer input[type="submit"],
.contactform .gform_wrapper .gform_footer button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    width: auto;
    padding: 12px 52px 12px 24px !important;
    font-family: var(--font-body);
    font-size: var(--text-label-sm) !important;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff !important;
    background-color: var(--color-navy) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 24px center !important;
    background-size: 16px 16px !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer;
    transition: background-color var(--ease-default), transform var(--ease-fast);
}
.contactform .gform_wrapper .gform_footer input[type="submit"]:hover,
.contactform .gform_wrapper .gform_footer button:hover { background-color: var(--color-navy-dark) !important; }
.contactform .gform_wrapper .gform_footer input[type="submit"]:active,
.contactform .gform_wrapper .gform_footer button:active { transform: translateY(0) scale(0.98); }

.contactform .gform_confirmation_message {
    font-family: var(--font-body);
    font-size: var(--text-paragraph-md);
    color: var(--color-foreground);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .contactform-grid { grid-template-columns: 1fr; }
}