/* Durusi contact form, 2026. Loaded AFTER site-2026.css and only by the two
   contact pages. Tokens come from site-2026.css, nothing is redefined here.
   Logical properties throughout, so the Arabic page mirrors for free.
   Hairlines only: no shadows, no rounded corners, no cards. */

/* ---------- the two column frame: form beside the next steps ---------- */
.ct-layout{display:grid;gap:56px}
@media (min-width:1000px){
  .ct-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px}
}

/* ---------- the form ---------- */
.ct-form{display:grid;gap:24px;align-content:start}
.ct-head{display:grid;gap:14px}
.ct-row{display:grid;gap:24px}
@media (min-width:560px){.ct-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ct-field{display:grid;gap:9px}
.ct-field > label{
  font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;
  color:var(--muted-light); /* muted-light #4A5459 */
}
.ct-opt{
  margin-inline-start:8px;
  font-size:12px;font-weight:300;letter-spacing:0;text-transform:none;
  color:var(--muted-light);
}
html[lang=ar] .ct-field > label{letter-spacing:0}

.ct-input{
  width:100%;min-height:52px;
  padding-block:13px;padding-inline:16px;
  font-family:inherit;font-size:16px;font-weight:300;line-height:1.4;
  color:var(--forest);            /* forest #102718 */
  background:var(--white);        /* ivory/white #FFFFFF */
  border:1px solid rgba(16,39,24,.5); /* forest at 50%, 3.18:1 on white and 3.11:1 on the
     frost section behind it. Was var(--hair) at 12%, which measured 1.27:1 and left the
     field with no visible edge at all. WCAG 1.4.11, fixed 9 Sep 2026. */
  border-radius:0;
  transition:border-color .2s;
}
/* The placeholder was muted-light at .75, which paints #777F82 on white and measures
   4.09:1, under the 4.5:1 minimum for body text. At .82 it paints #6B7377 and measures
   4.85:1, still visibly lighter than the forest the visitor's own answer is set in. */
.ct-input::placeholder{color:var(--muted-light);opacity:.82}
.ct-input:hover{border-color:rgba(16,39,24,.3)} /* forest at 30% */
.ct-input:focus{border-color:var(--electric-ink)} /* electric-ink #017579 */
.ct-input:user-invalid{border-color:var(--magenta)} /* magenta/500 #FE019A, only after the visitor has left the field */
textarea.ct-input{min-height:auto;resize:vertical}

/* the caret on a select. background-position has no logical form, so the one
   [dir=rtl] rule below flips it, the same way site-2026.css flips its arrows. */
.ct-select{
  appearance:none;-webkit-appearance:none;
  padding-inline-end:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23102718' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:10px 6px;
}
[dir=rtl] .ct-select{
  padding-inline-end:16px;padding-inline-start:44px;
  background-position:left 16px center;
}

.ct-submit{margin-block-start:8px;justify-self:start}
@media (max-width:640px){.ct-submit{width:100%}}

.ct-fine{font-weight:300;font-size:14px;line-height:1.5;color:var(--muted-light)}

/* ---------- the inline link on a light ground ---------- */
.ct-link,.ct-fine a,.ct-alt a{
  color:var(--electric-ink); /* electric-ink #017579 */
  text-decoration:none;font-style:italic;
}
.ct-link:hover,.ct-fine a:hover,.ct-alt a:hover{text-decoration-thickness:2px}

/* ---------- what happens next ---------- */
.ct-side{align-self:start}
@media (min-width:1000px){.ct-side{position:sticky;inset-block-start:96px}}
.ct-side-h{
  margin-block-start:14px;
  font-weight:700;font-size:24px;line-height:1.15;text-transform:uppercase;
}
html[lang=ar] .ct-side-h{line-height:1.4}

.ct-steps{margin-block-start:30px;border-block-start:1px solid var(--hair)}
.ct-step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;
  padding-block:22px;border-block-end:1px solid var(--hair);
}
.ct-step .n{
  grid-row:span 2;padding-block-start:3px;
  font-size:14px;letter-spacing:2px;text-transform:uppercase;font-weight:500;
  color:var(--electric-ink);
}
html[lang=ar] .ct-step .n{letter-spacing:0}
.ct-step h3{font-weight:600;font-size:18px;line-height:1.2}
html[lang=ar] .ct-step h3{line-height:1.45}
.ct-step p{font-weight:300;font-size:16px;line-height:1.4;color:var(--muted-light)}

.ct-note{
  display:flex;align-items:center;gap:12px;
  margin-block-start:26px;
  font-weight:500;font-size:15px;line-height:1.35;
}
.ct-note svg{
  flex:none;width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  color:var(--electric-ink);
}
.ct-alt{margin-block-start:14px;font-weight:300;font-size:16px;line-height:1.55;color:var(--muted-light)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ct-input{transition:none}
}

/* Added 9 Sep 2026 from the accessibility audit. The form said nothing about which
   fields were required, and the phone format lived only in a title attribute that a
   screen reader may never read out. */
.ct-opt{font-weight:300;color:var(--muted-light);font-size:.86em;letter-spacing:0}
.ct-hint{margin-block-start:6px;font-size:13px;font-weight:300;color:var(--muted-light);line-height:1.35}