/* Contact page (contact.html). Scoped under .contact so the rest of the site is untouched. */
.contact{--contact-space:clamp(88px,9vw,150px);--contact-ease:cubic-bezier(.23,1,.32,1);--contact-surface:#ece5da;--contact-muted:#6b5c51;--contact-dark:#2d221d;--contact-header:96px;background:var(--ivory);color:var(--espresso);overflow-x:clip}
.contact-wrap{width:88%;max-width:1320px;margin-inline:auto}
.contact h1,.contact h2,.contact h3{margin:0;font-family:var(--font-heading);font-weight:600;letter-spacing:-.01em}
.contact p{line-height:1.95}
.contact img{display:block}
.contact :focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.contact-page ::selection{background:var(--gold);color:var(--espresso)}

/* Shared pieces: headings with a short gold line, pill buttons. */
.contact-heading{display:flex;align-items:center;gap:22px;font-size:clamp(32px,3.2vw,50px);line-height:1.35}
.contact-heading:after{content:'';flex:none;width:56px;height:2px;background:var(--gold)}
.contact-heading--under{flex-direction:column;align-items:flex-start;gap:18px}
.contact-pill{display:inline-flex;align-items:center;gap:22px;min-height:52px;padding:0 26px;border:1px solid var(--espresso);border-radius:999px;background:var(--espresso);color:var(--ivory);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--contact-ease)}
.contact-pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--contact-ease)}
.contact-pill--light{background:var(--ivory);border-color:var(--ivory);color:var(--espresso)}
.contact-pill:active{transform:scale(.97)}

/* Hero: copy and contact channels beside an arch-framed room. */
.contact-hero{position:relative;padding:calc(var(--contact-header) + clamp(40px,6vw,96px)) 0 var(--contact-space);overflow:hidden}
.contact-hero:before{content:'';position:absolute;z-index:0;inset:0 -10% 30% 45%;border-radius:0 0 0 60%;background:#f8f4ee;pointer-events:none}
.contact-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);align-items:center}
.contact-hero h1{font-size:clamp(40px,4.4vw,72px);line-height:1.25}
.contact-lead{margin:22px 0 0;font-size:17px;max-width:50ch;color:#4a3a31}
.contact-channels{margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);max-width:560px}
.contact-channel{display:flex;align-items:center;gap:20px;padding:20px 4px;border-bottom:1px solid var(--line);color:inherit;transition:background-color .25s ease}
.contact-channel-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--gold);border-radius:50%;color:var(--walnut);transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .3s var(--contact-ease)}
.contact-channel-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contact-channel-text{display:grid;gap:2px;flex:1;min-width:0}
.contact-channel-text small{font-size:13px;color:var(--contact-muted)}
.contact-channel-text strong{font-size:clamp(18px,1.5vw,22px);font-weight:600;line-height:1.5;justify-self:start}
.contact-channel-arrow{flex:none;width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--contact-ease),stroke .2s ease}
.contact-channel:active .contact-channel-icon{transform:scale(.94)}
.contact-arch{position:relative;margin:0;padding:16px;aspect-ratio:4/5;width:min(500px,100%);justify-self:center}
.contact-arch-frame{position:absolute;inset:0;border:1px solid #c9b392;border-radius:1000px 1000px 6px 6px;transition:transform .5s var(--contact-ease)}
.contact-arch-image{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:1000px 1000px 4px 4px}
.contact-arch-image img{width:100%;height:100%;object-fit:cover;object-position:52% 50%;transition:transform 1s var(--contact-ease)}

/* Consult: steps beside the form, on a soft surface. */
.contact-consult{padding-block:var(--contact-space);background:var(--contact-surface);scroll-margin-top:72px}
.contact-consult-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
.contact-consult-aside>p{margin:20px 0 0;font-size:17px;max-width:40ch}
.contact-steps{position:relative;display:grid;gap:34px;margin:44px 0 0;padding:0;list-style:none}
.contact-steps:before{content:'';position:absolute;top:22px;bottom:22px;right:21px;width:1px;background:#c9b392;transform-origin:top;transform:scaleY(var(--line,1))}
.contact-steps li{position:relative;display:flex;align-items:flex-start;gap:22px}
.contact-step-num{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;background:var(--contact-surface);color:var(--walnut);font-weight:600;font-size:17px}
.contact-steps h3{font-size:clamp(19px,1.5vw,22px);line-height:1.5}
.contact-steps p{margin:4px 0 0;font-size:15px;color:var(--contact-muted);max-width:36ch}
.contact-form{padding:clamp(28px,3.4vw,48px);border-radius:22px;background:var(--ivory);box-shadow:0 24px 60px rgba(48,36,31,.08)}
.contact-topics{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;border:0;min-width:0}
.contact-topics legend{float:right;width:100%;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--contact-muted)}
.contact-topic{position:relative;cursor:pointer}
.contact-topic input{position:absolute;opacity:0;pointer-events:none}
.contact-topic span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid #d6c7b1;border-radius:999px;font-size:15px;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--contact-ease)}
.contact-topic input:checked+span{background:var(--espresso);border-color:var(--espresso);color:var(--ivory)}
.contact-topic input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.contact-topic:active span{transform:scale(.96)}
.contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px}
.contact-field{position:relative;display:grid;gap:8px;align-content:start}
.contact-field--full{grid-column:1/-1}
.contact-field label{display:block;font-size:14px;font-weight:600}
.contact-optional{font-weight:400;color:var(--contact-muted)}
/* A gold line draws under the focused field. */
.contact-field input,.contact-field textarea{width:100%;padding:10px 2px;border:0;border-bottom:1px solid #cdbda6;border-radius:0;background:linear-gradient(var(--gold),var(--gold)) no-repeat right bottom/0 2px;color:var(--espresso);font:inherit;font-size:16px;transition:border-color .2s ease,background-size .35s var(--contact-ease)}
.contact-field input[dir=ltr]{text-align:right}
.contact-field textarea{resize:vertical;min-height:96px;line-height:1.8}
.contact-field input::placeholder{color:#a59686}
.contact-field input:focus,.contact-field textarea:focus{outline:0;border-color:var(--espresso);background-size:100% 2px}
.contact-error{display:block;height:0;overflow:hidden;font-size:13px;line-height:1.6;color:#9a3b2b;opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s var(--contact-ease)}
.contact-field.is-invalid input{border-color:#9a3b2b}
.contact-field.is-invalid .contact-error{height:auto;opacity:1;transform:none}
.contact-submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:34px}
.contact-note{margin:0;font-size:13px;color:var(--contact-muted)}
.contact-status{margin:0;font-size:15px;color:#3f5a3a}
.contact-status:not(:empty){margin-top:20px;padding:14px 18px;border-radius:12px;background:#e7ebdf;animation:contact-status .35s var(--contact-ease)}
@keyframes contact-status{from{opacity:0;transform:translateY(6px)}}

/* Showroom: a dark field with the room photograph and the visiting hours. */
.contact-showroom{padding-block:var(--contact-space);background:var(--contact-dark);color:var(--ivory)}
.contact-showroom-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);align-items:center}
.contact-showroom-photo{position:relative;margin:0;aspect-ratio:5/4;overflow:hidden;border-top-right-radius:clamp(120px,14vw,220px)}
.contact-showroom-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.contact-showroom .contact-heading{color:var(--ivory)}
.contact-showroom-copy>p{margin:22px 0 0;font-size:17px;color:#ddd2c4;max-width:46ch}
.contact-hours{display:block;margin:34px 0 0;padding:0;border-top:1px solid #5a4639}
.contact-hours div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #5a4639}
.contact-hours dt{font-size:15px;font-weight:400;color:#cbbba8}
.contact-hours dd{margin:0;font-size:15px;font-weight:600}
.contact-showroom .contact-pill{margin-top:36px}

/* FAQ: heading beside an accordion. */
.contact-faq{padding-block:var(--contact-space)}
.contact-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.contact-faq-list{border-top:1px solid var(--line)}
.contact-faq-list details{border-bottom:1px solid var(--line)}
.contact-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:clamp(17px,1.4vw,20px);font-weight:600;cursor:pointer;list-style:none;transition:color .2s ease}
.contact-faq-list summary::-webkit-details-marker{display:none}
.contact-faq-mark{position:relative;flex:none;width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;transition:background-color .25s ease,transform .3s var(--contact-ease)}
.contact-faq-mark:before,.contact-faq-mark:after{content:'';position:absolute;top:50%;left:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--walnut);transition:transform .3s var(--contact-ease),background-color .25s ease}
.contact-faq-mark:after{transform:rotate(90deg)}
details[open] .contact-faq-mark{background:var(--espresso);border-color:var(--espresso)}
details[open] .contact-faq-mark:before,details[open] .contact-faq-mark:after{background:var(--ivory)}
details[open] .contact-faq-mark:after{transform:rotate(0)}
.contact-faq-body p{margin:0;padding:0 0 26px;font-size:16px;color:var(--contact-muted);max-width:60ch}
details[open] .contact-faq-body{animation:contact-faq .3s var(--contact-ease)}
@keyframes contact-faq{from{opacity:0;transform:translateY(-6px)}}

/* Hover only where a real pointer hovers. */
@media(hover:hover) and (pointer:fine){
 .contact-pill:hover{background:var(--walnut);border-color:var(--walnut);color:var(--ivory)}
 .contact-pill--light:hover{background:var(--gold);border-color:var(--gold);color:var(--espresso)}
 .contact-pill:hover svg{transform:translateX(-4px)}
 .contact-channel:hover .contact-channel-icon{background:var(--espresso);border-color:var(--espresso);color:var(--ivory);transform:rotate(-8deg)}
 .contact-channel:hover .contact-channel-arrow{transform:translateX(-6px);stroke:var(--walnut)}
 .contact-arch:hover .contact-arch-image img{transform:scale(1.04)}
 .contact-arch:hover .contact-arch-frame{transform:translate(8px,8px)}
 .contact-topic:hover input:not(:checked)+span{border-color:var(--walnut)}
 .contact-faq-list summary:hover{color:var(--walnut)}
 .contact-faq-list summary:hover .contact-faq-mark{transform:scale(1.08)}
}

@media(max-width:991px){
 .contact-hero-grid,.contact-consult-grid,.contact-showroom-grid,.contact-faq-grid{grid-template-columns:1fr}
 .contact-hero:before{inset:40% -20% 0 20%}
 .contact-arch{width:min(420px,100%)}
 .contact-channels{max-width:none}
}
@media(max-width:767px){
 .contact{--contact-header:78px}
 .contact p{font-size:16px}
 .contact-hero h1{font-size:clamp(36px,10vw,48px)}
 .contact-heading{gap:16px}
 .contact-heading:after{width:40px}
 .contact-channel{gap:16px;padding:16px 2px}
 .contact-channel-icon{width:46px;height:46px}
 .contact-arch{width:min(340px,100%)}
 .contact-fields{grid-template-columns:1fr}
 .contact-form{padding:26px 20px;border-radius:18px}
 .contact-topic span{padding:0 16px;font-size:14px}
 .contact-showroom-photo{border-top-right-radius:110px}
 .contact-submit .contact-pill,.contact-showroom .contact-pill{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .contact *,.contact *:before,.contact *:after{transition-duration:.01ms!important;animation:none!important}
}