/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * genre: playful · tone: warm and direct · theme: existing Carret identity
 * structure: short introduction, grouped enquiry form, parent signpost
 * nav: established N1b · footer: compact shared navigation
 * form fields and validation preserved; posts to the CRM API with Turnstile (CARR-5021, EVENTS-SPEC 8.4)
 * motion: action feedback only; no scroll reveals or decorative animation
 * responsive rules reviewed in source; browser review delegated to the owner
 */
@import url('/home.css');

.enquire-page {
  --color-field-border: #8b8881;
  --color-form-error: #a12712;
  --color-form-error-paper: #fff2ee;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
}
.enquire-page h1, .enquire-page h2 { font-family: var(--font-display); font-style: normal; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.enquire-page p { color: var(--color-muted); }
.enquire-page a:focus-visible, .enquire-page button:focus-visible, .eq-form input:focus-visible, .eq-form select:focus-visible, .eq-form textarea:focus-visible, .eq-form [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.enquire-page .hm-link { font-size: var(--text-sm); }
.enquire-page .hm-header nav a[aria-current]::after { display: none; }
.enquire-page .hm-header nav a[aria-current] { color: var(--color-accent); text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 2px; }

.eq-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'intro' 'form' 'parent'; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
.eq-intro { grid-area: intro; min-width: 0; }
.eq-intro h1 { font-size: clamp(2rem, 9.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.04em; }
.eq-intro h1 span { color: var(--color-accent); }
.eq-intro > p { max-width: 32ch; margin-top: var(--space-lg); font-size: var(--text-base); line-height: 1.65; }
.eq-form { grid-area: form; min-width: 0; padding: var(--space-lg) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); align-self: start; }
.eq-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.eq-form fieldset + fieldset { margin-top: var(--space-xl); }
.eq-form legend { max-width: 100%; padding: 0; margin-bottom: var(--space-lg); font: 700 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); }
.eq-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.eq-full { grid-column: 1 / -1; }
.eq-form .form-field label { margin-bottom: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5; }
.eq-form .form-field label > span { font-size: var(--text-sm); color: var(--color-muted); }
.eq-form .form-field input, .eq-form .form-field select, .eq-form .form-field textarea { width: 100%; min-width: 0; min-height: 52px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-field-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; caret-color: var(--color-accent); }
.eq-form .form-field input::placeholder, .eq-form .form-field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.eq-form .form-field textarea { min-height: 9rem; resize: vertical; }
.eq-form .form-field :is(input, select, textarea):focus { border-color: var(--color-accent); }
.eq-form .form-field :is(input, select, textarea):user-invalid { border-color: var(--color-form-error); }
.eq-form .form-field :is(input, select, textarea):disabled { opacity: 1; color: var(--color-muted); background: var(--color-wash); cursor: wait; }
.eq-submit-area { margin-top: var(--space-xl); }
.eq-form .eq-hint { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; }
.eq-form .eq-error { margin-top: var(--space-xs); color: var(--color-form-error); font-size: var(--text-sm); font-weight: 700; line-height: 1.5; }
.eq-form .form-field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-form-error); box-shadow: inset 0 0 0 1px var(--color-form-error); }
.eq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.eq-turnstile { min-height: 65px; margin-bottom: var(--space-lg); }
.eq-submit { display: flex; width: 100%; justify-content: center; border: 0; transition: background var(--dur-short) var(--ease-out); }
.eq-submit:disabled { opacity: .75; cursor: wait; transform: none; }
.eq-submit:disabled .icon { transform: none; }
.eq-submit:active:not(:disabled) { transform: translateY(1px); }
.eq-form .form-status { margin-top: var(--space-lg); padding: var(--space-md); background: var(--color-blue-soft); color: var(--color-blue-dark); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.6; }
.eq-form .form-status.is-error { background: var(--color-form-error-paper); color: var(--color-form-error); }
.eq-form .eq-privacy { margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.6; }
.eq-privacy a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .2em; }
.eq-parent { grid-area: parent; align-self: start; min-width: 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.eq-parent h2 { font-size: var(--text-md); line-height: 1.3; letter-spacing: -.02em; }
.eq-parent p { max-width: 35ch; margin-top: var(--space-sm); font-size: var(--text-base); line-height: 1.65; }
.eq-parent .hm-link { margin-top: var(--space-sm); }
.enquire-page .hm-footer { padding-block: 0 var(--space-lg); background: var(--color-paper); }

@media (hover: hover) and (pointer: fine) {
  .eq-submit:hover:not(:disabled) { background: var(--color-accent-deep); }
  .eq-form .form-field :is(input, select, textarea):hover:not(:disabled):not(:focus):not(:user-invalid):not([aria-invalid="true"]) { border-color: var(--color-muted); }
}
@media (min-width: 40rem) {
  .eq-intro h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
  .eq-form { padding: var(--space-xl); }
}
@media (min-width: 60rem) {
  .eq-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); grid-template-areas: 'intro form' 'parent form'; grid-template-rows: auto 1fr; column-gap: var(--space-2xl); row-gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
  .eq-intro { padding-top: var(--space-lg); }
  .eq-intro > p { font-size: 1.125rem; }
  .eq-parent { max-width: 35ch; }
}
@media (min-width: 80rem) {
  .eq-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .eq-submit { transition: none; }
  .eq-submit:active:not(:disabled) { transform: none; }
}