/* RAQMANA — contact page: a dark intro band, then the qualified-lead form on a
   light surface, with the direct details and the engagement path beside it. */

.page-contact { background-color: var(--rq-paper); }
.contact-hero { padding-bottom: clamp(88px, 9vw, 128px); background-color: var(--rq-night); }
.contact-hero-copy { max-width: 760px; margin-top: clamp(32px, 5vw, 64px); }

.contact-body { padding-top: 0; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
}

/* ---------------------------------------------------------------- Form */
.lead-form {
  --cut: var(--cut-l);
  --frame: var(--rq-line);
  position: relative;
  z-index: 2;
  margin-top: -64px;
  padding: clamp(22px, 4vw, 48px);
  background: var(--rq-white);
}
.form-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-bottom: var(--s-5); border-bottom: 1px solid var(--rq-line); }
.form-note { font-size: .875rem; color: var(--rq-ink-3); }
.req { color: #B42318; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; margin-top: var(--s-6); }
.field { display: grid; gap: 7px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .875rem; font-weight: 500; color: var(--rq-ink); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--rq-ink);
  background: var(--rq-white);
  border: 1px solid var(--rq-line-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232B2588' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field ::placeholder { color: #8C90AE; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #A6AACB; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rq-purple);
  box-shadow: 0 0 0 3px rgba(var(--rq-purple-rgb), .18);
}
.field [aria-invalid="true"] { border-color: #B42318; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .16); }
.field-hint { font-size: .8125rem; line-height: 1.45; color: var(--rq-ink-3); }
.field-hint:empty { display: none; }
.field-hint.is-warning { color: #8A4B00; }
.field-error { display: flex; gap: 6px; font-size: .8125rem; font-weight: 500; line-height: 1.45; color: #B42318; }
.field-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; font-size: .6875rem; color: var(--rq-white); background: #B42318; border-radius: 50%; }

.field--check { grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; }
.field--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rq-purple); }
.field--check label { font-weight: 400; line-height: 1.5; color: var(--rq-ink-2); }
.field--check .field-error { grid-column: 2; }

/* Honeypot: off-screen for people, visible to naive bots */
/* Honeypot: invisible and out of the way in both directions (an off-screen offset would widen an RTL page) */
.hp { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.turnstile-slot:empty { display: none; }
.turnstile-slot { margin-top: var(--s-5); }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rq-line); }
.form-status { font-size: .875rem; color: var(--rq-ink-2); }
.form-status:empty { display: none; }
/* reCAPTCHA v3: the floating badge is hidden, so Google's required notice sits under the button instead */
.recaptcha-note { margin-top: var(--s-4); font-size: .75rem; line-height: 1.5; color: var(--rq-ink-3); }
.recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.recaptcha-note a:hover { color: var(--rq-ink); }
.grecaptcha-badge { visibility: hidden !important; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.form-alert {
  margin-top: var(--s-4);
  padding: 14px 16px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--rq-ink);
  background: #FEF3F2;
  box-shadow: inset 3px 0 0 #B42318;
}
.form-alert a { color: var(--rq-purple); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Aside */
.contact-aside { display: grid; gap: var(--s-6); padding-top: var(--s-6); }
.aside-block { display: grid; gap: 14px; padding-top: var(--s-5); border-top: 1px solid var(--rq-line-strong); }
.aside-block > .meta { color: var(--rq-cyan-text); }
.contact-list--lg { gap: 12px; font-size: 1.0625rem; color: var(--rq-ink); }
.contact-list--lg .meta { display: block; margin-bottom: 2px; }
.contact-list--lg a { font-size: 1.25rem; font-weight: 400; color: var(--rq-purple); }
.contact-list--lg a:hover { color: var(--rq-cyan-text); }
.next-steps { display: grid; gap: 14px; counter-reset: step; }
.next-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: .9375rem; line-height: 1.5; color: var(--rq-ink-2); }
.next-steps .num { font-size: .8125rem; color: var(--rq-purple); padding-top: 2px; }
.next-steps strong { font-weight: 500; color: var(--rq-ink); }
.aside-note { font-size: .875rem; line-height: 1.55; color: var(--rq-ink-3); }

/* ---------------------------------------------------------------- Confirmation dialog */
.confirm-dialog {
  --cut: var(--cut-l);
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  color: var(--rq-ink);
  background: var(--rq-white);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.confirm-dialog::backdrop { background: rgba(var(--rq-night-rgb), .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.confirm-inner { display: grid; gap: 16px; padding: clamp(24px, 5vw, 40px); border-top: 3px solid var(--rq-cyan-text); }
.confirm-inner .eyebrow { color: var(--rq-cyan-text); }
.confirm-inner > p { color: var(--rq-ink-2); }
.next-steps--compact { gap: 8px; }
.next-steps--compact li { font-size: .875rem; }
.confirm-demo { padding: 10px 12px; font-size: .8125rem; color: var(--rq-ink-2); background: var(--rq-cyan-wash); }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.confirm-actions .btn--secondary { color: var(--rq-ink); box-shadow: inset 0 0 0 1px var(--rq-line-strong); }
.confirm-actions .btn--primary:focus-visible { outline-color: var(--rq-night); }
@media (prefers-reduced-motion: no-preference) {
  .confirm-dialog[open] { animation: rq-rise 420ms var(--ease) both; }
  .confirm-dialog[open]::backdrop { animation: rq-fade 300ms var(--ease) both; }
}
@keyframes rq-fade { from { opacity: 0; } }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); padding-top: 0; }
}
@media (max-width: 640px) {
  .lead-form { margin-top: -48px; }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .contact-aside { grid-template-columns: 1fr; }
  .form-foot .btn { flex: 1 1 100%; }
  .confirm-actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Arabic / right-to-left */
[dir="rtl"] .field select { background-position: left 14px center; }
/* E-mail and phone numbers are typed left-to-right */
[dir="rtl"] .field :is(input[type="email"], input[type="tel"]) { direction: ltr; text-align: right; }

/* ---------------------------------------------------------------- Round 2 (Oct 2026): the map */
/* Under the address in the contact column: 400px at most, 4:3, shrinks with the column on phones */
.map-frame { --cut: var(--cut-m); position: relative; width: 100%; max-width: 400px; aspect-ratio: 4 / 3; background: var(--rq-paper); }
.map-frame iframe { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border: 0; }

/* ---------------------------------------------------------------- Round 3 (Oct 2026): inquiry type, partnership fields, Find Us */
.inquiry { margin: 0; padding: 0; border: 0; min-width: 0; }
.inquiry legend { padding: 0; margin-bottom: 10px; font-size: .875rem; font-weight: 500; color: var(--rq-ink); }
.inquiry-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inquiry-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--rq-ink);
  background: var(--rq-white);
  box-shadow: inset 0 0 0 1px var(--rq-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.field .inquiry-option input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: none; border: 0; box-shadow: none; accent-color: var(--rq-purple); }
.inquiry-option:hover { box-shadow: inset 0 0 0 1px #A6AACB; }
.inquiry-option:has(input:checked) { background: var(--rq-cyan-wash); box-shadow: inset 0 0 0 1.5px var(--rq-cyan-text); }
.inquiry-option:has(input:focus-visible) { outline: 2px solid var(--rq-purple); outline-offset: 2px; }

/* Partnership details: open only for "Partnership" (always open without JavaScript) */
.partner-fields { display: grid; grid-template-rows: 1fr; }
.js .partner-fields:not(.is-open) { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.js .partner-fields.is-ready { transition: grid-template-rows var(--t-slow) var(--ease), opacity var(--t-med) var(--ease), visibility 0s linear var(--t-slow); }
.js .partner-fields.is-ready.is-open { transition: grid-template-rows var(--t-slow) var(--ease), opacity var(--t-med) var(--ease) 80ms, visibility 0s; }
.partner-fields-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
  min-height: 0;
  overflow: hidden;
}
.partner-fields.is-open .partner-fields-inner, .no-js .partner-fields-inner { padding: 18px 18px 20px; background: var(--rq-paper); box-shadow: inset 3px 0 0 var(--rq-cyan-text); }
[dir="rtl"] .partner-fields.is-open .partner-fields-inner, [dir="rtl"].no-js .partner-fields-inner { box-shadow: inset -3px 0 0 var(--rq-cyan-text); }
.partner-fields-note { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--rq-cyan-text); }
[dir="rtl"] .field input[type="url"] { direction: ltr; text-align: right; }

@media (max-width: 640px) {
  .inquiry-options, .partner-fields-inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .partner-fields.is-ready, .js .partner-fields.is-ready.is-open { transition: none; }
}
/* A closed details block takes no space: cancel the grid gap above it */
.js .partner-fields:not(.is-open) { margin-top: -22px; }
.js .partner-fields.is-ready { transition-property: grid-template-rows, opacity, visibility, margin; }
@media (max-width: 640px) { .js .partner-fields:not(.is-open) { margin-top: -18px; } }