:root{
  --cream:#F3EBDC;
  --cream-deep:#EADFCB;
  --oxblood:#7A1A1C;
  --oxblood-dark:#5E1214;
  --ink:#4A1012;
  --head:"Anton","Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@font-face{font-family:"Anton";src:url("assets/fonts/anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("assets/fonts/montserrat.woff2") format("woff2");font-weight:100 900;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background:var(--cream);color:var(--oxblood);
  font-family:var(--body);font-size:1rem;line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0;text-wrap:pretty}
h1,h2,h3,.expect-list p{text-wrap:balance}

.skip{position:absolute;left:-999px;top:0;background:var(--oxblood);color:var(--cream);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--oxblood);outline-offset:4px;border-radius:4px}

/* top strip */
.strip{
  display:flex;justify-content:center;align-items:center;gap:.7rem;
  background:var(--oxblood);color:var(--cream);
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  padding:.6rem 1rem;
}
.strip .dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}

main{max-width:1120px;margin:0 auto;padding:0 1.25rem}

/* hero */
.hero{text-align:center;padding:2.25rem 0 3rem;position:relative}
.halaal{position:absolute;top:1rem;right:0;width:64px;height:64px;border-radius:50%;border:2px solid var(--oxblood);color:var(--oxblood);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--cream)}
.halaal::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid var(--oxblood);opacity:.45}
.halaal .ar{font-size:1rem;line-height:1;font-weight:700}
.halaal .en{font-family:var(--body);font-size:.5rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1}
@media(min-width:700px){.halaal{width:78px;height:78px}.halaal .ar{font-size:1.2rem}.halaal .en{font-size:.58rem}}
.logo img{width:min(78vw,340px);margin:0 auto}
.rule{display:flex;align-items:center;gap:.75rem;max-width:240px;margin:1.6rem auto 1.4rem}
.rule::before,.rule::after{content:"";flex:1;height:2px;background:var(--oxblood)}
.rule span{width:9px;height:9px;background:var(--oxblood);transform:rotate(45deg)}
.eyebrow{
  font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  margin-bottom:.4rem;
}
h1{
  font-family:var(--head);text-transform:uppercase;
  font-size:clamp(3.6rem,19vw,8.5rem);line-height:.95;letter-spacing:.01em;
}
h1 span{display:block}
.caption{
  max-width:34rem;margin:1.6rem auto 0;
  font-size:1.02rem;font-weight:500;color:var(--ink);
}
.caption strong{display:block;font-weight:800;color:var(--oxblood);letter-spacing:.02em;margin-bottom:.35rem;font-size:1.08rem}

/* what to expect */
.expect{border-top:2px solid var(--oxblood);padding:2.5rem 0 3rem}
.expect h2,.follow h2{
  font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(2rem,9vw,2.9rem);line-height:1.05;text-align:center;
}
.expect-list{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1rem}
.expect-list li{
  position:relative;text-align:center;
  border:2px solid var(--oxblood);border-radius:14px;
  padding:1.6rem 1.25rem 1.5rem;background:rgba(255,255,255,.22);
}
.num{
  display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--oxblood);color:var(--cream);
  font-family:var(--head);font-size:1.05rem;letter-spacing:.04em;margin-bottom:.8rem;
}
.expect-list h3{font-family:var(--head);text-transform:uppercase;font-size:1.45rem;letter-spacing:.03em;line-height:1.15}
.expect-list p{margin-top:.4rem;font-size:.93rem;font-weight:500;color:var(--ink)}

/* follow */
.follow{
  background:var(--oxblood);color:var(--cream);text-align:center;
  border-radius:18px;padding:2.4rem 1.25rem 2.1rem;margin-bottom:2.5rem;
}
.social{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;
  background:var(--cream);color:var(--oxblood);text-decoration:none;
  font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.85rem 1.6rem;border-radius:999px;min-height:48px;
  transition:transform .15s ease,background .15s ease;
}
.social:hover{transform:translateY(-1px);background:#fff8ec}
.social:focus-visible{outline-color:var(--cream)}
.placeholder-note{margin-top:.8rem;font-size:.75rem;letter-spacing:.06em;opacity:.8}

/* footer */
.footer{
  text-align:center;padding:1.5rem 1rem 2rem;border-top:2px solid var(--oxblood);
  max-width:1120px;margin:0 1.25rem;
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}

/* gentle entrance */
@media (prefers-reduced-motion:no-preference){
  .hero>*{animation:rise .7s ease both}
  .hero .rule{animation-delay:.1s}.hero .eyebrow{animation-delay:.18s}
  .hero h1{animation-delay:.24s}.hero .caption{animation-delay:.32s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* larger screens */
@media (min-width:760px){
  main{padding:0 2rem}
  .hero{padding:3.5rem 0 4rem}
  .logo img{width:400px}
  .caption{font-size:1.1rem}
  .expect{padding:3.5rem 0 4rem}
  .expect-list{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .follow{padding:3.2rem 2rem 2.8rem;margin-bottom:3.5rem}
  .footer{margin:0 2rem}
}
@media (min-width:1184px){.footer{margin:0 auto;max-width:1056px}}
.nw{white-space:nowrap}
@media (max-width:479px){.footer .nw{display:block}.footer .sep{display:none}}
@media (min-width:1100px){
  .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:4rem;text-align:left;padding:4.5rem 0 5rem}
  .hero .logo{grid-row:1/span 4}
  .logo img{width:100%;max-width:470px;margin:0 auto}
  .rule{margin:0 0 1.4rem;max-width:200px}
  .rule::before{display:none}
  .caption{margin:1.6rem 0 0}
  h1{font-size:8rem}
}