:root{--paper:#faf7f0;--ink:#161412;--red:#8a1c1c;--mute:#6b645a;--line:#d9cfbd;--tint:#f1ebdf;--white:#fffdf8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Serif",Georgia,serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
html[lang="ar"] body{font-family:"Noto Naskh Arabic","Noto Serif",serif;font-size:17.5px;line-height:1.9}
a{color:inherit}

/* language switching */
html[lang="ar"] .t-en, html[lang="en"] .t-ar{display:none}
.logo-ar{font-family:"Amiri",serif;font-weight:700}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(250,247,240,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.logo .logo-ar{font-size:30px;line-height:1.6}
.logo-en{font-family:"Noto Serif",serif;font-weight:700;letter-spacing:.22em;font-size:13px;color:var(--red)}
.nav{display:flex;align-items:center;gap:18px;font-size:15px}
.nav a{text-decoration:none}
.nav a:hover{color:var(--red)}
.nav-cta{color:var(--red);font-weight:700}
.lang{font:inherit;font-size:14px;background:none;border:1px solid var(--ink);padding:5px 12px;cursor:pointer;color:var(--ink)}
.lang:hover{background:var(--ink);color:var(--paper)}
.lang .t-en{font-family:"Noto Naskh Arabic",serif}
.lang .t-ar{font-family:"Noto Serif",serif}

/* hero */
.hero{padding:64px 0 72px}
.kicker{color:var(--red);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
html[lang="ar"] .kicker{letter-spacing:0;font-size:15px}
.brand{margin:0;font-weight:700;line-height:1.2}
.brand .logo-ar{font-size:clamp(84px,14vw,150px);line-height:1.6;display:inline-block;padding-top:.1em}
.brand-en{display:none}
html[lang="en"] .brand .logo-ar{display:none}
html[lang="en"] .brand-en{display:inline;font-family:"Noto Serif",serif;font-size:clamp(72px,12vw,128px);letter-spacing:-.01em;line-height:1}
.sub{font-size:20px;color:#3a352f;margin:4px 0 0}
.rule2{height:5px;background:var(--ink);margin:28px 0 32px;box-shadow:0 4px 0 var(--paper),0 7px 0 var(--red);max-width:100%}
.lede{font-size:clamp(26px,3.6vw,38px);line-height:1.3;margin:0 0 14px;font-weight:700}
html[lang="ar"] .lede{font-family:"Amiri",serif;line-height:1.6}
.intro{max-width:680px;color:#3a352f;font-size:18px;margin:0 0 28px}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:13px 28px;border:0;font:inherit;font-weight:700;cursor:pointer;transition:background .15s}
.btn:hover{background:#6e1515}

/* bands */
.band{background:var(--tint);border-top:3px solid var(--red);padding:48px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.grid3 p{margin:0;font-size:16px}
.sect{padding:72px 0}
.h2{font-size:clamp(26px,3.2vw,34px);margin:0 0 28px;line-height:1.3}
html[lang="ar"] .h2{font-family:"Amiri",serif;line-height:1.7}

.roles{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.role{padding:18px 16px 20px;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.role:nth-child(4n){border-inline-end:none}
.role b{font-size:17px}
.role > span{font-size:14.5px;color:#4a443d;line-height:1.55}
html[lang="ar"] .role > span{line-height:1.8}

.steps{margin-top:52px;background:var(--white);border:1px solid var(--line);padding:28px 30px}
.steps ol{margin:0;padding-inline-start:22px}
.steps li{margin-bottom:6px}
.steps li::marker{color:var(--red);font-weight:700}

/* form */
.formsect{background:var(--ink);color:var(--paper)}
.formsect .kicker{color:#e3b7b7}
.formnote{color:#cfc7b8;margin:-14px 0 26px}
.form{background:var(--paper);color:var(--ink);padding:32px;border-top:4px solid var(--red)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;border:0;padding:0;min-width:0}
.lab{font-weight:600;font-size:15px}
input[type=text],input[type=email],input[type=tel],select,textarea{font:inherit;font-size:16px;padding:11px 12px;border:1px solid #bfb4a2;background:var(--white);color:var(--ink);border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
textarea{resize:vertical}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:4px}
.checks label{display:flex;align-items:center;gap:10px;font-size:15.5px;cursor:pointer}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--red);flex:none}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#4a443d;margin:6px 0 22px;line-height:1.6}
.consent input{margin-top:5px}
.btn-full{width:100%;font-size:18px;padding:15px}
.err{display:none;color:var(--red);font-size:14px;margin-top:6px}
.err.show{display:block}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}

/* footer */
.foot{border-top:1px solid var(--line);padding:36px 0 44px}
.footgrid{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footbrand{display:flex;align-items:baseline;gap:10px}
.footbrand .logo-ar{font-size:36px;line-height:1.6}
.foot-en{font-weight:700;letter-spacing:.22em;font-size:13px;color:var(--red)}
.footmeta p{margin:0;font-size:14.5px;color:#4a443d}
.footmeta .small{font-size:13px;color:var(--mute)}

/* thanks page */
.thanks{min-height:70vh;display:flex;align-items:center;padding:60px 0}
.thanks .h2{margin-bottom:12px}

/* responsive */
@media (max-width:860px){
  .roles{grid-template-columns:1fr 1fr}
  .role:nth-child(4n){border-inline-end:1px solid var(--line)}
  .role:nth-child(2n){border-inline-end:none}
  .grid3{grid-template-columns:1fr;gap:22px}
}
@media (max-width:620px){
  body{font-size:16px}
  .nav a:not(.nav-cta){display:none}
  .row2,.checks{grid-template-columns:1fr}
  .form{padding:22px 16px}
  .hero{padding:40px 0 52px}
  .sect{padding:52px 0}
  .roles{grid-template-columns:1fr}
  .role{border-inline-end:none!important}
}