/* =============================================================================
   Contact / Booking page only. Form colors (--field/--error/--ok) are in site.css.
   ============================================================================= */

main{padding:clamp(52px,9vw,96px) 0 clamp(64px,10vw,110px)}
.intro{max-width:60ch;margin-bottom:clamp(38px,5vw,52px)}
.intro .kicker{display:block;margin-bottom:16px}
.intro h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:16px}
.intro p{color:var(--dim);font-size:1.05rem}
.intro p a{color:var(--brass-lt)}

.layout{display:grid;grid-template-columns:1fr 300px;gap:clamp(36px,5vw,64px);align-items:start}
@media(max-width:760px){.layout{grid-template-columns:1fr;gap:44px}}

/* form */
form{display:grid;gap:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400}
label .opt{color:var(--faint);letter-spacing:.06em}
input,select,textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:2px;
  color:var(--text);font-family:inherit;font-size:1rem;font-weight:300;padding:13px 14px}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23c9a86a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}
textarea{resize:vertical;min-height:130px;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 2px rgba(201,168,106,.22)}
.hp{position:absolute;left:-9999px}
button{justify-self:start;background:var(--brass);color:#181205;border:none;font-family:inherit;
  font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;padding:15px 34px;cursor:pointer;transition:background .16s ease}
button:hover{background:var(--brass-lt)}
button:disabled{opacity:.6;cursor:default}

#result{display:none;font-size:.94rem;padding:13px 16px;border-radius:2px;margin-top:2px}
#result.ok{display:block;color:var(--ok);border:1px solid rgba(143,201,162,.35);background:rgba(143,201,162,.08)}
#result.bad{display:block;color:var(--error);border:1px solid rgba(224,139,125,.35);background:rgba(224,139,125,.08)}

.thanks{display:none}
.thanks h2{font-size:1.7rem;margin-bottom:12px}
.thanks p{color:var(--dim);max-width:46ch}

.aside{border-left:1px solid var(--line-soft);padding-left:clamp(24px,3vw,36px)}
@media(max-width:760px){.aside{border-left:none;padding-left:0;border-top:1px solid var(--line-soft);padding-top:36px}}
.aside h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:400;margin-bottom:16px}
.aside p{color:var(--dim);font-size:.95rem;margin-bottom:20px}
.aside .line{display:block;color:var(--text);margin-bottom:6px}
.aside .sub{font-size:.82rem;color:var(--faint)}