/* =========================================================================
   RESURE LUX — enquiry
   Loaded after main.css. A form page: no snap, no full-height sections.

   Fields are hairline-ruled rather than boxed, to stay in the same language as
   the search field in the bar. The one thing that is NOT quiet is an error —
   an error has to interrupt.
   ========================================================================= */

.eq-page { padding-top: calc(var(--masthead-h, 5.75rem) + clamp(1.5rem, 4vw, 3rem)); }

.eq-head { padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.eq-head h1 {
  margin-top: .5rem;
  font-size: clamp(1.75rem, 4.4vw, 3.5rem);
  font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
}
.eq-head p { margin-top: 1rem; max-width: 56ch; color: var(--on-bg-muted); font-size: var(--ms-small); }

/* --------------------------- the two columns --------------------------- */

.eq-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr;
  padding-bottom: clamp(3rem, 7vw, 6rem); }
@media (min-width: 940px) { .eq-layout { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/* ------------------------------- fields ------------------------------- */

.eq-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .eq-grid { grid-template-columns: 1fr 1fr; } }
.eq-field--wide { grid-column: 1 / -1; }

.eq-field { display: flex; flex-direction: column; gap: .5rem; }
.eq-field label {
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-bg-muted);
}
/* "Optional" is marked, not "required" — most fields here are required, so
   marking the exception is the shorter and less anxious label. */
.eq-field label span {
  font-family: var(--font-body);
  letter-spacing: .04em; text-transform: none;
  color: var(--on-bg-faint);
}

.eq-input {
  width: 100%;
  min-height: 48px;
  padding: .6rem .25rem;
  background: none;
  border: 0; border-bottom: 1px solid var(--outline-strong);
  color: var(--on-bg);
  font-size: var(--ms-body);
  transition: border-color var(--dur-md) var(--ease-out);
}
textarea.eq-input { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }
.eq-input::placeholder { color: rgba(185, 196, 226, .55); }
.eq-input:hover { border-bottom-color: rgba(185, 196, 226, .5); }
.eq-input:focus { outline: none; border-bottom-color: var(--accent); }

/* the native select arrow is the one control that will not take the theme */
select.eq-input {
  appearance: none; -webkit-appearance: none;
  padding-right: 2rem; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--on-bg-muted) 50%),
    linear-gradient(135deg, var(--on-bg-muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.eq-input option { background: var(--surface); color: var(--on-bg); }

/* ------------------------------- errors ------------------------------- */

.eq-input[aria-invalid='true'] { border-bottom-color: #ff8f8f; }
.eq-error {
  display: none;
  font-size: var(--ms-caption);
  color: #ff9a9a;
  letter-spacing: .02em;
}
.eq-error.is-on { display: block; }

/* The summary is what a screen reader lands on after a failed submit, so it
   carries the same wording as the inline messages — not a vague "check the
   form above". */
.eq-summary {
  display: none;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid rgba(255, 143, 143, .45);
  background: rgba(255, 143, 143, .07);
}
.eq-summary.is-on { display: block; }
.eq-summary h2 {
  font-size: var(--ms-body); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--font-display);
}
.eq-summary ul { margin-top: .75rem; display: grid; gap: .4rem; }
.eq-summary a {
  position: relative; display: inline-block;
  color: #ffb3b3; font-size: var(--ms-small);
}
/* Grown, not padded: 44px of target without pushing the list apart. */
.eq-summary a::after { content: ''; position: absolute; inset: -13px -8px; }

/* ------------------------------- consent ------------------------------- */

.eq-consent { display: flex; align-items: flex-start; gap: .85rem; }
.eq-consent input {
  flex: none;
  width: 24px; height: 24px; margin-top: 1px;   /* WCAG 2.2 target minimum */
  accent-color: var(--accent-fill);
  cursor: pointer;
}
.eq-consent label {
  font-family: var(--font-body);
  font-size: var(--ms-small); letter-spacing: 0; text-transform: none;
  color: var(--on-bg-muted); line-height: 1.6; cursor: pointer;
}

/* ------------------------------- actions ------------------------------- */

.eq-actions {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}
.eq-submit {
  min-height: 54px; padding-inline: 2.25rem;
  background: var(--accent-fill); color: var(--ci-paper);
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  transition: background var(--dur-sm) var(--ease-out);
}
.eq-submit:hover { background: var(--accent-fill-hi); box-shadow: var(--glow-accent); }
.eq-submit[disabled] { opacity: .55; cursor: not-allowed; }
.eq-note { font-size: var(--ms-caption); color: var(--on-bg-faint); max-width: 34ch; }

/* ------------------------------- success ------------------------------- */

.eq-done {
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--outline);
  background:
    radial-gradient(80% 160% at 12% 0%, rgba(74, 51, 99, .5) 0%, rgba(8, 6, 12, 0) 70%),
    var(--surface);
  box-shadow: var(--lift-2);
}
.eq-done h2 {
  font-size: clamp(1.35rem, 2.8vw, 2.25rem);
  font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
}
.eq-done p { margin-top: 1rem; max-width: 52ch; color: var(--on-bg-muted); font-size: var(--ms-small); }
.eq-done dl { margin-top: 1.75rem; display: grid; gap: 0; }
.eq-done dl > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: .75rem; border-bottom: 1px solid var(--outline);
  font-size: var(--ms-small);
}
.eq-done dl > div:first-child { border-top: 1px solid var(--outline); }
.eq-done dt { color: var(--on-bg-faint); font-family: var(--font-display);
  font-size: var(--ms-caption); letter-spacing: .16em; text-transform: uppercase; }
.eq-done dd { margin: 0; text-align: right; }

/* ------------------------------- the aside ------------------------------- */

.eq-aside { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.eq-card {
  border: 1px solid var(--outline);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  box-shadow: var(--lift-1);
  transition: border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out);
}
.eq-card:hover { border-color: var(--outline-strong); box-shadow: var(--lift-2); }
.eq-card h2 {
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--on-bg-muted);
}
.eq-card p, .eq-card address {
  margin-top: .85rem; font-style: normal;
  font-size: var(--ms-small); color: var(--on-bg-muted); line-height: 1.7;
}
.eq-card a, .eq-note a {
  position: relative; display: inline-block;
  color: var(--on-bg); text-decoration: none;
  border-bottom: 1px solid var(--outline-strong);
}
.eq-card a::after, .eq-note a::after { content: ''; position: absolute; inset: -14px -8px; }
.eq-card a:hover, .eq-note a:hover { border-bottom-color: var(--accent); }

[hidden] { display: none !important; }