/* ==========================================================================
   Contact / Join Us - page-specific additions only.
   Everything else (buttons, facet cards, eyebrows, section rhythm, the .why__top
   two-column pattern, the .contact/.map components) is reused unchanged from main.css,
   the approved homepage's design system.
   ========================================================================== */

.section--page-intro{background:var(--bg);padding-top:clamp(120px,14vw,168px)}

/* .contact__list (main.css) is tuned for the homepage's light Contact section; on this page's
   dark intro it needs light-on-dark colours instead. Scoped here so the homepage is untouched. */
.contact__list--on-dark strong{color:var(--ivory)}
.contact__list--on-dark span{color:var(--muted)}
.contact__list--on-dark .icon{color:var(--champ)}
.contact__list--on-dark a:hover strong{color:var(--orchid)}
.section--enquiry{padding-top:clamp(56px,7vw,96px)}

/* Form + map share the homepage's .contact grid; the form needs a bit more room than the map. */
.contact--form{grid-template-columns:1.15fr .85fr;align-items:start}
@media (max-width:900px){.contact--form{grid-template-columns:1fr}}

.enquiry-card{background:#fff;padding:clamp(28px,4vw,48px)}
.enquiry-card__title{margin-top:6px}
.enquiry-card .section__intro{margin-bottom:28px}

/* ---------- Form ---------- */
.form{margin-top:4px}
.form__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form__field{margin-bottom:20px;display:flex;flex-direction:column;gap:8px}
.form__field label{font:500 .72rem/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.form__req{color:var(--violet)}
.form input[type=text],.form input[type=tel],.form input[type=email],.form select,.form textarea{
	appearance:none;-webkit-appearance:none;width:100%;padding:13px 14px;font:400 1rem/1.4 var(--ff-body);color:var(--ink);
	background:#fff;border:1px solid var(--line-ink);border-radius:0;transition:border-color .25s,box-shadow .25s}
.form select{cursor:pointer}
.form textarea{resize:vertical;min-height:104px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
	outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(94,58,212,.16)}
.form input:invalid:not(:placeholder-shown){box-shadow:none} /* don't shame the user before they submit */
.form__field.has-error input,.form__field.has-error select,.form__field.has-error textarea{border-color:#B3241C}
.form__err{display:block;min-height:0;font-size:.82rem;color:#B3241C}
.form__err:empty{display:none}

.form__consent{display:flex;align-items:flex-start;gap:12px;margin:8px 0 4px;cursor:pointer}
.form__consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--violet);cursor:pointer}
.form__consent span{font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.form__consent span a{color:var(--violet);text-decoration:underline}
.form__err--consent{margin-bottom:8px}

.form__submit{width:100%;margin-top:18px;position:relative}
.form__submit[disabled]{opacity:.6;cursor:progress}
.form__note{margin-top:14px;font-size:.8rem;color:var(--ink-soft);text-align:center}

.form__notice{padding:16px 18px;margin-bottom:22px;font-size:.95rem;line-height:1.5;border-left:3px solid}
.form__notice[hidden]{display:none}
.form__notice--success{background:rgba(94,58,212,.08);border-color:var(--violet);color:#3a2570}
.form__notice--error{background:rgba(179,36,28,.08);border-color:#B3241C;color:#7a1811}

.map__directions{margin-top:6px}

@media (max-width:640px){
	.form__row{grid-template-columns:1fr}
	.enquiry-card{padding:26px 20px}
}