/* Contact-only surfaces keep the surrounding MGM palette unchanged. */
#contact{--contact-surface:#f0ebe5;--contact-field:#faf7f3;--contact-border:#d4c7bc;--contact-muted:#655a52;padding-bottom:48px}
#contact .contact-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,6vw,80px);align-items:start}
#contact .contact-copy{padding-top:4px}
#contact .contact-copy>p{max-width:36ch;margin-top:24px}
#contact-form{--field-border:var(--contact-border);--line:#18151326;align-self:start;height:auto;min-height:0;padding:32px;border:1px solid var(--contact-border);border-radius:var(--card-radius);background:var(--contact-surface);color:var(--ink);color-scheme:light;box-shadow:0 8px 28px #00000014}
#contact-form>h3{margin:0 0 10px;font-size:26px;line-height:1.25;letter-spacing:-.035em}
#contact-form>.form-intro{margin:0 0 24px;color:var(--contact-muted);font-size:16px;line-height:1.55;max-width:42ch}
#contact-form .field-row{grid-template-columns:1fr 1fr;gap:16px}
#contact-form .field{margin-bottom:18px}
#contact-form .field label{margin-bottom:7px;font-weight:500}
#contact-form input,#contact-form textarea{background:var(--contact-field);border-color:var(--field-border);color:var(--ink);border-radius:var(--control-radius)}
#contact-form input::placeholder,#contact-form textarea::placeholder{color:#776a61;opacity:1}
#contact-form textarea{display:block;min-height:104px}
#contact-form .contact-budget-input{max-width:none;background:var(--contact-field);color:var(--contact-muted)}
#contact-form .contact-budget-input input{background:transparent;border:0}
#contact-form :is(.budget-feedback,.form-meta,.service-selection-count),#contact-form #service-choice-help{color:var(--contact-muted)}
#contact-form .budget-feedback{margin-top:7px;line-height:1.5}
#contact-form .service-field{margin-bottom:18px;border-color:var(--field-border);background:var(--contact-field)}
#contact-form .service-field summary{padding:12px 38px 12px 14px}
#contact-form .service-field summary:after{right:14px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:24px;height:24px;line-height:1;color:#9a3824}
#contact-form .service-field fieldset{padding:0 14px 14px}
#contact-form #service-choice-help{padding:0;margin-top:8px}
#contact-form .error{color:#a33825}
#contact-form [aria-invalid=true],#contact-form .contact-budget-input:has([aria-invalid=true]){border-color:#a33825}
#contact-form .inline-button{color:#9a3824}
#contact-form>.form-submit{min-height:52px;padding:13px 20px;justify-content:center;border-radius:var(--control-radius);transition:background-color .2s,border-color .2s,color .2s}
#contact-form>.form-submit:not(:disabled){background:var(--primary);border-color:var(--primary);color:var(--ink)}
#contact-form>.form-submit:not(:disabled):hover{background:#ff9c87;border-color:#ff9c87}
#contact-form>.form-submit:disabled,#contact-form>.form-submit:disabled:hover{background:#e3dcd4;border-color:#cdbfb3;color:#706157;cursor:not-allowed}
/* A ready form has the primary CTA; an incomplete form still offers accessible validation. */
#contact-form>.form-submit[data-ready="false"]:not(:disabled){background:#e3dcd4;border-color:#cdbfb3;color:#706157;cursor:pointer}
#contact-form[aria-busy="true"]>.form-submit:disabled{background:var(--primary);border-color:var(--primary);color:var(--ink);cursor:wait}
#contact-form>.form-status[hidden]{display:none}
#contact-form>.form-status{margin:0 0 20px;padding:12px 14px;background:var(--contact-field);border:1px solid var(--contact-border);border-left:3px solid var(--primary);border-radius:var(--control-radius);color:var(--ink);font-size:16px;line-height:1.5}
#contact-form>.form-status[data-state="success"]{border-color:#938274;border-left-color:var(--ink)}
#contact-form>.form-status[data-state="error"]{border-color:#b56e59;color:#833323}
/* Focus changes the existing field border, including the whole budget control. */
#contact-form :is(input:not([type]),input[type="text"],input[type="email"],input[type="number"],textarea):focus{outline:none;box-shadow:none;border-color:var(--primary)}
#contact-form .contact-budget-input:focus-within{border-color:var(--primary)}
#contact-form .contact-budget-input input:focus{border:0;outline:none;box-shadow:none}
#contact-form :is(summary,button,input[type="checkbox"]):focus-visible{outline:2px solid #9a3824;outline-offset:3px}
#contact .contact-whatsapp{margin-top:28px;padding:22px 0 0;border-top:1px solid var(--line);border-bottom:0;max-width:36ch}
#contact .contact-whatsapp>p{margin:0 0 10px;font-size:16px;color:var(--muted)}
#contact .contact-whatsapp .whatsapp-contact{width:auto;max-width:100%;min-height:44px;padding:10px 14px;gap:10px;justify-content:center;text-align:center;background:transparent;border:1px solid #ffffff40;border-radius:var(--control-radius);color:var(--paper);font-size:16px;line-height:1.5}
#contact .contact-whatsapp .whatsapp-contact:hover{background:#ffffff08;border-color:#ffffff70}
#contact .whatsapp-contact .whatsapp-icon{width:20px;height:20px;flex-shrink:0}
.contact-faq{padding:0 0 64px}
.contact-faq-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,6vw,80px);padding-top:32px;border-top:1px solid var(--line);align-items:start}
.contact-faq h2{font-size:clamp(24px,2.3vw,30px);line-height:1.25;letter-spacing:-.035em}
.contact-faq .compact-faq{max-width:none;margin:0}
.contact-faq details:first-child{border-top:0}
.contact-faq summary{min-height:48px;padding:14px 32px 14px 0;line-height:1.5}
.contact-faq summary:after{top:9px}
.contact-faq details p{padding-bottom:18px;max-width:60ch}
.contact-faq summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
@media(max-width:850px){
 #contact .contact-grid,.contact-faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 #contact .contact-copy>p{max-width:52ch}
 #contact-form{width:100%}
 .contact-faq-grid{gap:18px}
}
@media(max-width:600px){
 #contact{padding-bottom:36px}
 #contact-form{padding:24px 20px}
 #contact-form>h3{font-size:24px}
 #contact-form .field-row{grid-template-columns:1fr;gap:0}
 .contact-faq{padding-bottom:40px}
 .contact-faq-grid{padding-top:26px}
}
/* Validation stays reachable after browser autofill. */
@keyframes mgm-autofill{from{opacity:.999}to{opacity:1}}
#contact-form input:autofill{animation-name:mgm-autofill;animation-duration:.01s}
#contact-form input:-webkit-autofill{animation-name:mgm-autofill;animation-duration:.01s}
@media(prefers-reduced-motion:reduce){#contact-form>.form-submit{transition:none}}