/* Shared Website design layer: Contact and Compact homepage use the same visual rhythm. */
.shell{width:min(1060px,calc(100% - 48px));margin:auto}
.contact-header{background:rgba(255,255,255,.96)}
.bar{height:56px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:.98rem;color:var(--blue);letter-spacing:-.03em}
.brand img{display:block;width:28px;height:28px;border-radius:8px}
.header-actions{gap:8px}
.back-link,.languages button{min-height:34px;border-radius:10px}
.contact-main{background:linear-gradient(135deg,#fff 0%,#f3f9ff 60%,#eaf7ff 100%)}
.contact-layout{grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);gap:46px;padding:26px 0;align-items:center}
.intro{align-self:center}
.intro h1{font-size:clamp(2.05rem,4.15vw,3.7rem);max-width:520px}
.lead{max-width:520px}
.conversation{max-width:520px;margin-top:18px}
.response-note{max-width:520px;margin-top:14px}
.form-card{border-radius:18px;box-shadow:0 16px 42px rgba(30,79,140,.10)}
.form-heading{padding:17px 19px 13px}
form{padding:16px 19px 17px;gap:10px}
.fields{gap:9px 11px}

/* Never display both language variants at the same time, regardless of viewport or cached base CSS. */
[hidden]{display:none!important}
html[lang="en"] .ar{display:none!important}
html[lang="ar"] .en{display:none!important}
html[lang="en"] .en{display:revert}
html[lang="ar"] .ar{display:revert}
html[lang="en"] p.en,html[lang="en"] h1.en,html[lang="en"] h2.en{display:block}
html[lang="ar"] p.ar,html[lang="ar"] h1.ar,html[lang="ar"] h2.ar{display:block}
html[lang="en"] span.en,html[lang="ar"] span.ar{display:inline}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

@media(max-width:899px){
  .shell{width:min(100% - 28px,1060px)}
  .contact-layout{grid-template-columns:minmax(0,.76fr) minmax(400px,1.24fr);gap:26px;padding:18px 0}
  .intro h1{font-size:clamp(1.65rem,4vw,2.65rem)}
}

@media(max-width:700px){
  .shell{width:min(100% - 20px,1060px)}
  .contact-viewport{grid-template-rows:50px minmax(0,1fr)}
  .bar{height:50px}
  .brand{font-size:.84rem}.brand img{width:25px;height:25px;border-radius:7px}
  .languages button{min-width:40px;min-height:38px;padding-inline:10px}
  .back-link{display:none}
  .contact-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:10px 0}
  .intro h1{font-size:1.38rem;line-height:1.12}
  .lead{margin-top:6px;font-size:.68rem;line-height:1.38}
  .conversation{margin-top:8px;gap:5px}
  .conversation div{padding:6px 7px}
  .response-note{margin-top:7px;font-size:.58rem;line-height:1.3}
  .copyright{display:none}
  .form-heading{padding:9px 11px 8px}
  .form-heading h2{font-size:.84rem}
  form{padding:9px 11px 10px;gap:6px}
  .fields{gap:5px 7px}
  label{font-size:.58rem}
  input,select,textarea{font-size:16px;padding:5px 7px}
  input,select{min-height:32px}
  textarea{min-height:56px;max-height:56px}
  .consent{font-size:.53rem;line-height:1.28}
  form button{min-height:32px;font-size:.63rem}
}

/* Accessibility fallback for very short mobile screens / virtual keyboards: preserve content and input usability. */
@media(max-width:700px) and (max-height:620px){
  html,body{height:auto;min-height:100%;overflow:auto}
  .contact-viewport{height:auto;min-height:100dvh;overflow:visible}
  .contact-main{overflow:visible}
  .contact-layout{height:auto;min-height:calc(100dvh - 50px);grid-template-rows:auto auto;padding:10px 0 18px}
  .form-card{overflow:visible}
}