/* Contact-only editorial layout; all form controls retain their original markup. */
body[data-page=contact] .page-title{padding-top:clamp(40px,4.3vw,62px);padding-bottom:44px}
body[data-page=contact] .page-intro{max-width:65ch}
body[data-page=contact] .contact-layout{grid-template-columns:minmax(0,30fr) minmax(0,64fr);gap:6%;align-items:start;padding-bottom:64px}
body[data-page=contact] .contact-studio{min-width:0}
body[data-page=contact] .contact-layout aside{background:transparent;color:var(--ink);padding:0;border:0}
body[data-page=contact] .contact-layout aside h3{font-size:26px!important;line-height:1.2;margin-bottom:22px}
body[data-page=contact] .contact-layout aside p{font-size:15px!important;line-height:1.8;margin-bottom:20px}
body[data-page=contact] .contact-layout aside p:last-child{margin-bottom:0}
body[data-page=contact] .contact-layout aside .footer-region{width:auto;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;font-size:12px!important;letter-spacing:0}
body[data-page=contact] form{min-width:0}
body[data-page=contact] form .form-note{font-size:14px!important;line-height:1.65;max-width:65ch;color:var(--brown);margin-bottom:24px}
body[data-page=contact] form label{font-size:14px;line-height:1.55;margin-bottom:24px}
body[data-page=contact] .form-grid{gap:22px 24px;margin-bottom:24px}
body[data-page=contact] .form-grid label{margin-bottom:0}
body[data-page=contact] :is(input,select,textarea){border-color:var(--color-stone);background:transparent;margin-top:8px;font-size:16px;line-height:1.5;min-width:0}
body[data-page=contact] :is(input:not([type=checkbox]),select){min-height:48px;width:100%}
body[data-page=contact] fieldset{padding-block:24px;margin-block:24px}
body[data-page=contact] legend{font-family:var(--sans);font-size:19px;line-height:1.4}
body[data-page=contact] .checkbox-grid{gap:8px 20px}
body[data-page=contact] .checkbox-grid label{margin:0;min-height:44px}
body[data-page=contact] .investment-section{margin-block:28px}
body[data-page=contact] #form-status:empty{display:none}
@media(max-width:1000px){
 body[data-page=contact] .contact-layout{grid-template-columns:minmax(0,1fr);gap:36px}
 body[data-page=contact] .contact-studio{display:block}
}
@media(max-width:650px){
 body[data-page=contact] .page-title{padding-block:36px 32px}
 body[data-page=contact] .contact-studio{display:block}
 body[data-page=contact] .form-grid{grid-template-columns:minmax(0,1fr)}
 body[data-page=contact] .checkbox-grid{gap:8px 12px}
 body[data-page=contact] .contact-layout{padding-bottom:44px}
}

body[data-page=contact] .contact-layout{padding-top:0}

body[data-page=contact] .investment-section{border-top:0}

body[data-page=contact] .investment-section .eyebrow::before{content:none;display:none}

/* Understated studio information; the form remains one uninterrupted grid item. */
body[data-page=contact] .contact-layout aside h3{font-size:25px!important;margin-bottom:28px}
body[data-page=contact] .contact-detail{border-top:1px solid var(--color-stone);padding-block:20px}
body[data-page=contact] .contact-detail p{margin-bottom:0}
body[data-page=contact] .contact-detail .contact-label{font-size:11px!important;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;color:var(--brown);margin-bottom:10px}
body[data-page=contact] .contact-layout aside a:hover{text-decoration-color:var(--gold);color:var(--olive)}
body[data-page=contact] .contact-layout aside a:focus-visible{outline-color:var(--olive)}
@media(min-width:1001px){body[data-page=contact] #inquiry-form{grid-column:2;grid-row:1}}

body[data-page=contact] #main .contact-detail .contact-label{font-size:12px!important}

/* Contact readability refinement; form controls and validation are unchanged. */
body[data-page=contact] #inquiry-form label{font-size:16px;line-height:1.55}
body[data-page=contact] #inquiry-form :is(input,select,textarea){font-size:16px}
body[data-page=contact] #inquiry-form legend,body[data-page=contact] #inquiry-form .investment-section .eyebrow{font-size:18px!important;line-height:1.4}
body[data-page=contact] #inquiry-form ::placeholder{color:var(--color-walnut,#765B46);opacity:1}
body[data-page=contact] .contact-detail:first-child{padding-top:14px}

/* Quiet service-area illustration, confined to the contact information column. */
body[data-page=contact] .contact-area-illustration{margin:24px 0 0;width:100%;max-width:360px}
body[data-page=contact] .contact-area-illustration img{display:block;width:100%;height:auto;aspect-ratio:4/3}
@media(max-width:1000px){body[data-page=contact] .contact-area-illustration{max-width:300px}}
@media(max-width:650px){body[data-page=contact] .contact-area-illustration{max-width:260px;margin-top:20px}}

/* Place studio inquiries and map to the right of the complete questionnaire. */
@media(min-width:851px){
 body[data-page=contact] #main .contact-layout{grid-template-columns:minmax(0,64fr) minmax(0,30fr)}
 body[data-page=contact] #main .contact-layout>aside{grid-column:2;grid-row:1}
 body[data-page=contact] #main .contact-layout>form{grid-column:1;grid-row:1}
}

/* Ten percent smaller Contact page heading. */
body[data-page=contact] #main .page-title h1{font-size:calc(var(--type-page-h1) * .9)!important}

/* Map leads the contact-information column. */
body[data-page=contact] #main .contact-area-illustration{margin-top:0;margin-bottom:28px}

/* Refined contact composition without changing form controls or handling. */
@media(min-width:851px){
 body[data-page=contact] #main .contact-layout>.contact-studio{grid-column:2;grid-row:1;align-self:start}
}
body[data-page=contact] #main .contact-area-illustration{width:100%;max-width:none;margin:0 0 28px;aspect-ratio:auto}
body[data-page=contact] #main .contact-area-illustration img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border:0}
body[data-page=contact] #main .checkbox-grid{row-gap:4px}
body[data-page=contact] #main .checkbox-grid label{min-height:38px}
body[data-page=contact] #main .investment-section{margin-top:32px}

/* Slightly lighter Contact content surface; shared header and footer untouched. */
body[data-page=contact] #main{background:#F6F3ED}
body[data-page=contact] #main .page-title,
body[data-page=contact] #main .contact-layout{background:#F6F3ED}

body[data-page=contact] #main .contact-info-heading{margin:0 0 18px;font-size:18px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--color-espresso-brand)}

/* Match investment guidance to the form label size. */
body[data-page=contact] #main #inquiry-form .investment-note{font-size:16px!important}

body[data-page=contact] #main #inquiry-form .spaces-question{font-size:17px!important}

body[data-page=contact] #main #inquiry-form .spaces-fieldset{border-top:0}

/* Consistent questionnaire typography; intro and contact column stay unchanged. */
body[data-page=contact] #main #inquiry-form,
body[data-page=contact] #main #inquiry-form :is(label,input,select,textarea,legend,p,li,button,a){font-size:17px!important}

/* Fifteen percent shallower controls in the opening form fields. */
body[data-page=contact] #main #inquiry-form>.form-grid input,
body[data-page=contact] #main #inquiry-form>label>select#project-type{height:41.61px;min-height:41.61px;padding-block:7.055px}

/* Retain updated control sizing while restoring earlier page and form spacing. */
body[data-page=contact] #main #inquiry-form .form-grid label[for=area]{grid-column:1/-1}
body[data-page=contact] #main #inquiry-form :is(input:not([type=checkbox]),select){height:46px;min-height:46px;padding-block:9.25px;margin-top:8px}
body[data-page=contact] #main #inquiry-form textarea:not(#email-preview){min-height:80px;height:80px;padding-block:9px;margin-top:8px;resize:vertical;overflow-y:hidden}
body[data-page=contact] #main #inquiry-form textarea[rows="4"]{height:100px;min-height:100px}

/* Five percent tighter Contact spacing; retain text and control sizes. */
body[data-page=contact] #main .page-title{padding-bottom:41.8px}
body[data-page=contact] #main .contact-layout{padding-bottom:60.8px}
body[data-page=contact] #main #inquiry-form label{margin-bottom:22.8px}
body[data-page=contact] #main #inquiry-form .form-grid{row-gap:20.9px;margin-bottom:22.8px}
body[data-page=contact] #main #inquiry-form .form-grid label,
body[data-page=contact] #main #inquiry-form .checkbox-grid label{margin-bottom:0}
body[data-page=contact] #main #inquiry-form fieldset{padding-block:22.8px;margin-block:22.8px}
body[data-page=contact] #main #inquiry-form .form-note{margin-bottom:22.8px}
body[data-page=contact] #main .checkbox-grid{row-gap:3.8px}
body[data-page=contact] #main .investment-section{margin-top:30.4px;margin-bottom:26.6px}
body[data-page=contact] #main .contact-area-illustration{margin-bottom:26.6px}
body[data-page=contact] #main .contact-detail{padding-block:19px}
body[data-page=contact] #main .contact-info-heading{margin-bottom:17.1px}
@media(max-width:650px){
 body[data-page=contact] #main .page-title{padding-bottom:30.4px}
 body[data-page=contact] #main .contact-layout{padding-bottom:41.8px}
}

/* Compact required spaces response, using the existing auto-growing textareas. */
body[data-page=contact] #main #inquiry-form #spaces{width:100%;height:72px;min-height:72px}

/* Understated guidance, distinct from labels and entered responses. */
body[data-page=contact] #main #inquiry-form input::placeholder,
body[data-page=contact] #main #inquiry-form textarea::placeholder{font-family:inherit;font-size:15px!important;font-weight:400;color:#8C8983;opacity:1}

/* Pair square footage and service type in the existing basic-information grid. */
body[data-page=contact] #main #inquiry-form .form-grid label[for=area]{grid-column:auto}

/* Align the contact image with the opening input boxes. */
@media(min-width:851px){body[data-page=contact] #main .contact-layout>.contact-studio{padding-top:34.35px}}

/* Secondary investment guidance beneath the unchanged section heading. */
body[data-page=contact] #main #inquiry-form .investment-section .investment-note{font-size:15.5px!important;line-height:1.55;margin-bottom:22px}

/* Match the site's army-green inquiry buttons. */
body[data-page=contact] #main #inquiry-form>button[type=submit]{background:#4B5335;border-color:#4B5335;color:var(--color-ivory)}
body[data-page=contact] #main #inquiry-form>button[type=submit]:hover{background:var(--color-espresso-brand);border-color:var(--color-espresso-brand);color:var(--color-ivory)}

/* Slightly smaller Contact introductory sentence. */
body[data-page=contact] #main .page-title .page-intro{font-size:calc(var(--type-body) * .9025)!important}

/* Ten percent more compact opening form controls. */
body[data-page=contact] #main #inquiry-form .form-grid :is(input,select){height:41.4px;min-height:41.4px;padding-block:6.95px}

/* Match the final budget dropdown to the opening controls. */
body[data-page=contact] #main #inquiry-form select#investment{height:41.4px;min-height:41.4px;padding-block:6.95px}

/* Match dropdown selections and options to the 17px question labels. */
body[data-page=contact] #main #inquiry-form :is(select#project-type,select#investment),
body[data-page=contact] #main #inquiry-form :is(select#project-type,select#investment) option{font-size:17px!important;font-family:inherit}

/* Match the shared Start a Project button typography. */
body[data-page=contact] #main #inquiry-form>button[type=submit]{font-family:var(--sans);font-size:14px!important;font-weight:400;line-height:1.4}

/* Slightly quieter form and contact-column typography. */
body[data-page=contact] #main #inquiry-form :is(label,input,select,textarea,legend,p,li,a){font-size:16px!important}
body[data-page=contact] #main #inquiry-form .spaces-question{font-size:16px!important}
body[data-page=contact] #main #inquiry-form .investment-section .investment-note{font-size:14.75px!important}
body[data-page=contact] #main .contact-layout aside p{font-size:14px!important}
body[data-page=contact] #main .contact-layout aside .contact-label{font-size:11.4px!important}
body[data-page=contact] #main .contact-layout aside .contact-info-heading{font-size:17px!important}
body[data-page=contact] #main #inquiry-form :is(select#project-type,select#investment),
body[data-page=contact] #main #inquiry-form :is(select#project-type,select#investment) option{font-size:16px!important}

/* Uniform 14px labels and details for studio contact information. */
body[data-page=contact] #main .contact-layout aside .contact-detail p,
body[data-page=contact] #main .contact-layout aside .contact-detail .contact-label,
body[data-page=contact] #main .contact-layout aside .contact-detail a{font-size:14px!important}

/* Bring the introductory sentence slightly closer to the heading. */
body[data-page=contact] #main .page-title h1{margin-bottom:22px}

/* Tighter heading group with more breathing room before the form. */
body[data-page=contact] #main .page-title h1{margin-bottom:16px}
body[data-page=contact] #main .page-title{padding-bottom:54px}
@media(max-width:650px){body[data-page=contact] #main .page-title{padding-bottom:42px}}