:root{
  --bg:#F4F6F5;
  --surface:#FFFFFF;
  --ink:#0E1F1A;
  --body:#41544D;
  --muted:#6B7D76;
  --line:#E1E8E5;
  --primary:#116149;
  --primary-hover:#0C4C39;
  --primary-soft:#E6F1ED;
  --accent:#C77A16;
  --danger:#B8342A;

  --display:'Almarai', system-ui, sans-serif;
  --text:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --r:12px;
  --shadow:0 1px 2px rgba(14,31,26,.04), 0 14px 36px -14px rgba(14,31,26,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--text);
  font-size:16px;
  line-height:1.7;
  color:var(--body);
  background:var(--bg);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:32px 18px 40px;
}

.page{width:100%;max-width:560px}

/* ---------- Intro copy ---------- */
.intro{text-align:center;margin-bottom:26px}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;
  color:var(--primary);
  background:var(--primary-soft);
  padding:7px 15px;border-radius:99px;
  margin-bottom:18px;
}
h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(27px,6.4vw,40px);
  line-height:1.35;
  color:var(--ink);
  margin-bottom:12px;
  text-wrap:balance;
}
.service{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(17px,4vw,20px);
  color:var(--primary);
  padding-top:12px;
  margin-bottom:14px;
  border-top:2px solid var(--primary-soft);
}
.lede{
  font-size:16.5px;
  max-width:42ch;
  margin:0 auto;
}

/* ---------- Card ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:26px 22px 24px;
}
@media (min-width:560px){ .card{padding:32px 30px 28px} }

.card-head{margin-bottom:22px}
.card-head h2{
  font-family:var(--display);font-weight:800;font-size:20px;
  color:var(--ink);margin-bottom:5px;line-height:1.5;
}
.card-head p{font-size:14px;color:var(--muted)}

/* ---------- Fields ---------- */
.field{margin-bottom:16px}
label{
  display:block;
  font-size:14px;font-weight:600;color:var(--ink);
  margin-bottom:7px;
}

input,textarea{
  width:100%;
  font-family:var(--text);
  font-size:16px;
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  transition:border-color .18s ease, box-shadow .18s ease;
  appearance:none;
}
input{height:52px;padding:0 14px}
textarea{padding:12px 14px;min-height:96px;resize:vertical;line-height:1.7}
input::placeholder,textarea::placeholder{color:#9BA9A4}
input:hover,textarea:hover{border-color:#C7D3CE}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(17,97,73,.14);
}

/* digits stay LTR inside an RTL page */
#phone{direction:ltr;text-align:right}

/* error message block */
.msg{
  display:none;align-items:center;gap:6px;
  font-size:13.5px;color:var(--danger);margin-top:6px;
}
.hint{font-size:13px;color:var(--muted);margin-top:6px}

/* 1. server-side errors returned by lead.php */
.field.error input,.field.error textarea{border-color:var(--danger)}
.field.error .msg{display:flex}

/* 2. browser validation, only after the user has interacted */
input:user-invalid,textarea:user-invalid{border-color:var(--danger)}
input:user-invalid ~ .msg,textarea:user-invalid ~ .msg{display:flex}
input:user-invalid:focus,textarea:user-invalid:focus{box-shadow:0 0 0 4px rgba(184,52,42,.13)}

/* ---------- Button ---------- */
.btn{
  width:100%;height:56px;margin-top:16px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:17px;
  color:#fff;background:var(--primary);
  border:none;border-radius:var(--r);
  cursor:pointer;touch-action:manipulation;
  transition:background .18s ease, transform .12s ease;
}
.btn:hover{background:var(--primary-hover)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

.below{
  text-align:center;font-size:12.5px;color:var(--muted);line-height:1.7;
  margin-top:14px;display:flex;align-items:flex-start;justify-content:center;gap:6px;
}
.below svg{flex:0 0 auto;margin-top:4px}
.below a{color:var(--primary)}

/* honeypot */
.hp{position:absolute;right:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Alert (form-level error) ---------- */
.alert{
  display:flex;gap:9px;align-items:flex-start;
  background:#FBECEA;border:1px solid #F0CFCB;
  color:#8E2A22;border-radius:var(--r);
  padding:12px 14px;margin-bottom:18px;font-size:14px;line-height:1.6;
}
.alert svg{flex:0 0 auto;margin-top:4px}

/* ---------- Thanks page ---------- */
.done{text-align:center;padding:18px 4px 10px}
.done-icon{
  width:62px;height:62px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary);
  display:grid;place-items:center;margin:0 auto 18px;
}
.done h2{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);margin-bottom:8px;line-height:1.5}
.done p{font-size:15.5px;max-width:34ch;margin:0 auto}
.done .back{
  display:inline-block;margin-top:22px;font-size:14px;
  color:var(--primary);font-weight:600;text-decoration:none;
}
.done .back:hover{text-decoration:underline}

/* ---------- Trust row ---------- */
.trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;
  margin-top:22px;font-size:13.5px;color:var(--muted);
}
.trust span{display:flex;align-items:center;gap:7px}

footer{margin-top:26px;text-align:center;font-size:12.5px;color:var(--muted)}
footer a{color:var(--muted)}
.disclaimer{
  font-size:12.5px;line-height:1.65;color:var(--muted);
  max-width:46ch;margin:0 auto 12px;
  padding-top:16px;border-top:1px solid var(--line);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}