/* ==========================================================
   ZEIN WEBSITE DEVELOPMENT
   Studio direction. Monochrome. Mobile first.
   Colour appears only on official contact marks.
   ========================================================== */

:root{
  --ink:#14100E;
  --ink2:#2A2522;
  --paper:#FBFAF8;
  --paper2:#F2F0EC;
  --line:#E0DDD7;
  --muted:#6E6A66;

  /* Paper grain strength. One number. Set to 0 to remove it entirely. */
  --grain:.26;

  --wa:#25D366;

  --wrap:1140px;
  --pad:26px;
  --r:2px;

  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
}

html[dir="rtl"]{
  --display:'Cairo','Archivo',sans-serif;
  --body:'Cairo','Archivo',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
  background:var(--paper);
}

/* Paper grain. Drawn by the browser, not a downloaded image, so it costs
   nothing and cannot fail to load. Sits behind everything, never over text. */
body::before{
  content:"";
  position:fixed;inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--body);
  font-variation-settings:'wdth' 100;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-bottom:76px; /* room for the sticky bar */
}

img,svg{max-width:100%;display:block;}

a{color:inherit;}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Hidden until focused. Never moved off canvas with a negative offset,
   because in a right to left document that offset becomes real scrollable
   width and blows the layout open in Blink. */
.skip{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip:focus{
  position:fixed;
  top:8px;inset-inline-start:8px;
  width:auto;height:auto;
  margin:0;padding:12px 18px;
  clip-path:none;
  background:var(--ink);color:var(--paper);
  z-index:200;
}

/* ---------- Type ---------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  font-variation-settings:'wdth' 112;
  letter-spacing:-.022em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3{
  font-variation-settings:normal;
  letter-spacing:0;
  line-height:1.3;
  font-weight:800;
}

h1{font-size:clamp(2.75rem,11.5vw,5.6rem);line-height:.99;letter-spacing:-.032em;}
h2{font-size:clamp(2.05rem,6.8vw,3.4rem);letter-spacing:-.026em;}
h3{font-size:1.06rem;letter-spacing:-.01em;line-height:1.3;}

p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

.lede{
  font-size:1.14rem;
  color:var(--muted);
  max-width:52ch;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:.685rem;
  font-weight:700;
  letter-spacing:.235em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 18px;
}
html[dir="rtl"] .eyebrow{letter-spacing:0;font-size:.8rem;}

.eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--ink);
}

.muted{color:var(--muted);}

/* ---------- Header ---------- */

.head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}

.head__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  height:66px;
}

.mark{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;
  flex:0 1 auto;min-width:0;
}

.mark__disc{
  flex:0 0 auto;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  display:grid;place-items:center;
  font-family:var(--display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.04em;
  font-variation-settings:'wdth' 112;
}

.mark__txt{min-width:0;}
.mark__name{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:.98rem;
  letter-spacing:.09em;
  line-height:1;
  font-variation-settings:'wdth' 112;
}
.mark__sub{
  display:block;
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--muted);
  line-height:1;
  margin-top:5px;
  white-space:nowrap;
}
html[dir="rtl"] .mark__sub{letter-spacing:0;font-size:.72rem;}

.nav{display:none;}

.lang{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1px solid var(--ink);
  border-radius:999px;
  overflow:hidden;
  background:var(--paper);
}
.lang button{
  appearance:none;border:0;cursor:pointer;
  background:transparent;color:var(--ink);
  font-family:var(--display);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  padding:8px 13px;
  min-height:38px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

/* ---------- Sections ---------- */

.sec{padding:66px 0;border-top:1px solid var(--line);}
.sec--flat{background:var(--paper2);}
.sec__head{margin-bottom:40px;max-width:44ch;}
.sec__head p{margin-top:14px;}

/* ---------- Buttons ---------- */

.btns{display:flex;flex-direction:column;gap:11px;margin-top:28px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;
  padding:15px 26px;
  border-radius:999px;
  border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);
  font-family:var(--display);
  font-size:.9rem;font-weight:700;letter-spacing:.03em;
  text-decoration:none;text-align:center;
  cursor:pointer;
  transition:transform .18s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}

.btn svg{flex:0 0 auto;}

/* ---------- Hero ---------- */

.hero{padding:46px 0 60px;}
.hero h1{margin-bottom:22px;}
.hero .lede{font-size:1.1rem;}

/* ---------- Spine ----------
   A hairline down the start edge with a filled circle at every section.
   It fills in as you scroll. The nodes are drawn by script, so if the
   script never runs you are left with a plain hairline and nothing breaks.
   Only positive offsets are used here: a negative one would become real
   scrollable width in Arabic, which is what broke Android once already. */

main{position:relative;}
main > section{position:relative;z-index:1;}

.spine{
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
}
.spine__in{
  position:relative;
  height:100%;
  max-width:var(--wrap);
  margin-inline:auto;
}
.spine__track,
.spine__fill{
  position:absolute;
  inset-inline-start:9px;
  width:1px;
}
.spine__track{top:0;bottom:0;background:var(--line);}
.spine__fill{top:0;height:0;background:var(--ink);}

.spine__node{
  position:absolute;
  inset-inline-start:4px;
  width:11px;height:11px;
  margin-top:-5px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.spine__node.on{
  background:var(--ink);
  border-color:var(--ink);
  transform:scale(1.18);
}

@media (min-width:720px){
  .spine__track,.spine__fill{inset-inline-start:12px;}
  .spine__node{inset-inline-start:6px;width:13px;height:13px;margin-top:-6px;}
}

@media (prefers-reduced-motion:reduce){
  .spine__node{transition:none;}
}

/* ---------- Package finder ---------- */

.finder{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
  padding:26px 22px 24px;
  max-width:660px;
}

.finder__bar{
  height:2px;background:var(--line);
  margin-bottom:18px;
}
.finder__bar i{
  display:block;height:100%;background:var(--ink);
  transition:width .35s var(--ease);
}

.finder__step{
  font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;
}
html[dir="rtl"] .finder__step{letter-spacing:0;text-transform:none;font-size:.78rem;}

.finder__q{
  font-family:var(--display);
  font-variation-settings:'wdth' 108;
  font-size:1.38rem;font-weight:700;line-height:1.25;letter-spacing:-.015em;
  margin:0 0 20px;
}
html[dir="rtl"] .finder__q{font-variation-settings:normal;letter-spacing:0;line-height:1.5;}

.finder__opts{display:grid;gap:9px;}

.opt{
  display:flex;align-items:center;gap:13px;
  width:100%;min-height:58px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.35;
  text-align:start;cursor:pointer;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.opt:hover{border-color:var(--ink);transform:translateY(-1px);}
.opt::before{
  content:"";flex:0 0 auto;
  width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--line);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.opt:hover::before{border-color:var(--ink);background:var(--ink);}

.finder__back{
  margin-top:16px;padding:8px 0;
  background:none;border:0;
  font:inherit;font-size:.86rem;color:var(--muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.finder__back:hover{color:var(--ink);}

/* result */
.res__tag{
  font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
html[dir="rtl"] .res__tag{letter-spacing:0;text-transform:none;font-size:.78rem;}

.res__name{
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-size:clamp(1.9rem,7vw,2.5rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.05;margin:0;
}
html[dir="rtl"] .res__name{font-variation-settings:normal;letter-spacing:0;}

.res__price{
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-size:3rem;font-weight:700;letter-spacing:-.035em;
  line-height:1;margin:14px 0 4px;
}
.res__price small{font-size:1.4rem;vertical-align:.55em;}
.res__sub{font-size:.86rem;color:var(--muted);margin:0;}

.res__list{list-style:none;margin:22px 0;padding:0;display:grid;gap:11px;}
.res__list li{
  position:relative;padding-inline-start:26px;
  font-size:.93rem;line-height:1.5;
}
.res__list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.52em;
  width:8px;height:8px;border-radius:50%;background:var(--ink);
}
.res__list li.note{color:var(--muted);}
.res__list li.note::before{background:transparent;border:1.5px solid var(--line);}

.res__hr{border:0;border-top:1px solid var(--line);margin:20px 0;}
.res .btn{width:100%;}

/* ---------- Cards ---------- */

.grid{display:grid;gap:14px;}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 22px;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.card:hover{border-color:var(--ink);transform:translateY(-3px);}
.card h3{margin-bottom:9px;}
.card p{font-size:.94rem;color:var(--muted);}

.card__disc{
  width:38px;height:38px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;
  margin-bottom:18px;
}

/* ---------- Pricing ---------- */

.tier{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:28px 22px;
  display:flex;flex-direction:column;
  position:relative;
  transition:border-color .22s var(--ease);
}
.tier:hover{border-color:var(--ink);}

.tier--pick{border:2px solid var(--ink);}

.tier__tag{
  position:absolute;top:-1px;inset-inline-end:20px;
  transform:translateY(-50%);
  background:var(--ink);color:var(--paper);
  font-size:.6rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;
  padding:6px 13px;border-radius:999px;
  white-space:nowrap;
}
html[dir="rtl"] .tier__tag{letter-spacing:0;font-size:.72rem;text-transform:none;}

.tier__name{
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
html[dir="rtl"] .tier__name{letter-spacing:0;font-size:.85rem;text-transform:none;}

.tier__price{
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-size:3.3rem;font-weight:700;letter-spacing:-.035em;
  line-height:1;margin:12px 0 3px;
}
.tier__price small{font-size:1.5rem;vertical-align:.55em;font-weight:700;}

.tier__note{font-size:.8rem;color:var(--muted);font-weight:600;min-height:1.2em;}

.tier__line{border:0;border-top:1px solid var(--line);margin:20px 0;}

.tier ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;}
.tier li{
  position:relative;
  padding-inline-start:26px;
  font-size:.91rem;line-height:1.5;
}
.tier li::before{
  content:"";
  position:absolute;inset-inline-start:0;top:.52em;
  width:8px;height:8px;border-radius:50%;
  background:var(--ink);
}
.tier li.off{color:var(--muted);}
.tier li.off::before{background:transparent;border:1.5px solid var(--line);}

.tier .btn{margin-top:auto;width:100%;}

.terms{
  margin-top:26px;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px;
  background:var(--paper);
}
.terms h3{margin-bottom:16px;}
.terms ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.terms li{
  position:relative;padding-inline-start:22px;
  font-size:.89rem;color:var(--muted);line-height:1.55;
}
.terms li::before{
  content:"";position:absolute;inset-inline-start:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--ink);
}
.terms li b{color:var(--ink);font-weight:700;}

/* ---------- Questions ----------
   Built on the browser's own details element. No script, so it cannot
   fail, and search engines read the answers whether open or closed. */

.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}

.faq summary{
  list-style:none;
  cursor:pointer;
  padding:21px 0;
  display:flex;align-items:flex-start;gap:14px;
  font-family:var(--display);
  font-variation-settings:'wdth' 106;
  font-weight:700;font-size:1.04rem;line-height:1.35;letter-spacing:-.012em;
}
html[dir="rtl"] .faq summary{font-variation-settings:normal;letter-spacing:0;line-height:1.6;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::marker{content:"";}

.faq summary::before{
  content:"";
  flex:0 0 auto;
  width:10px;height:10px;
  margin-top:.5em;
  border-radius:50%;
  border:1.5px solid var(--ink);
  transition:background .22s var(--ease);
}
.faq details[open] summary::before{background:var(--ink);}
.faq summary:hover::before{background:var(--ink);}

.faq p{
  margin:0;
  padding:0 0 24px;
  padding-inline-start:24px;
  color:var(--muted);
  font-size:.96rem;
  max-width:60ch;
}

/* ---------- Work ---------- */

.work{
  display:block;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--paper);
  transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.work:hover{transform:translateY(-3px);border-color:var(--ink);}

.work__top{
  position:relative;
  aspect-ratio:16/10;
  padding:26px 22px;
  color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.work__top::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.34) 52%,rgba(0,0,0,.12) 100%);
}
.work__top > *{position:relative;z-index:1;}

.work__kick{
  font-size:.62rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;opacity:.82;
}
html[dir="rtl"] .work__kick{letter-spacing:0;font-size:.75rem;text-transform:none;}
.work__name{
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-size:1.72rem;font-weight:700;letter-spacing:-.025em;
  line-height:1.08;margin-top:7px;
}
html[dir="rtl"] .work__name{font-variation-settings:normal;letter-spacing:0;}

.work__foot{
  padding:16px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.83rem;color:var(--muted);
}
.work__foot b{
  font-weight:700;color:var(--ink);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;
}
html[dir="rtl"] .work__foot b{letter-spacing:0;text-transform:none;font-size:.85rem;}

/* ---------- About ---------- */

.about{max-width:60ch;}
.about p{margin-bottom:1.15em;}
.about strong{font-weight:700;}

/* ---------- Contact ---------- */

.contacts{display:grid;gap:12px;margin-top:8px;}

.contact{
  display:flex;align-items:center;gap:15px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  text-decoration:none;
  background:var(--paper);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.contact:hover{border-color:var(--ink);transform:translateY(-2px);}
.contact__ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;}
.contact__t{min-width:0;}
.contact__t b{
  display:block;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
html[dir="rtl"] .contact__t b{letter-spacing:0;text-transform:none;font-size:.78rem;}
.contact__t span{
  display:block;margin-top:3px;
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
html[dir="rtl"] .contact__t span{font-variation-settings:normal;}

/* ---------- Sticky bar ---------- */

.bar{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:110;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
}
.bar a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  min-height:52px;
  background:var(--wa);color:#fff;
  border-radius:999px;
  text-decoration:none;
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-weight:700;font-size:.94rem;letter-spacing:.02em;
  transition:filter .2s var(--ease);
}
.bar a:hover{filter:brightness(.94);}
html[dir="rtl"] .bar a{font-variation-settings:normal;}

/* ---------- Footer ---------- */

.foot{
  border-top:1px solid var(--line);
  padding:34px 0 30px;
  font-size:.82rem;color:var(--muted);
}
.foot__in{display:flex;flex-direction:column;gap:8px;}

/* ---------- Desktop ---------- */

@media (min-width:720px){
  body{font-size:17px;}
  .sec{padding:88px 0;}
  .grid--3{grid-template-columns:repeat(3,1fr);gap:16px;}
  .grid--2{grid-template-columns:repeat(2,1fr);gap:16px;}
  .btns{flex-direction:row;}
  .btn{min-width:210px;}
  .contacts{grid-template-columns:repeat(3,1fr);}
}

@media (min-width:960px){
  .nav{
    display:flex;align-items:center;gap:30px;
    margin-inline-start:auto;
  }
  .nav a{
    text-decoration:none;
    font-size:.76rem;font-weight:700;
    letter-spacing:.17em;text-transform:uppercase;
    padding:6px 0;
    border-bottom:1.5px solid transparent;
    transition:border-color .2s var(--ease);
  }
  .nav a:hover{border-bottom-color:var(--ink);}
  html[dir="rtl"] .nav a{letter-spacing:0;text-transform:none;font-size:.9rem;}

  .lang{margin-inline-start:26px;}

  .hero{padding:82px 0 92px;}
  .hero__in{max-width:20ch;}
  .hero__in .lede{max-width:46ch;}

  body{padding-bottom:0;}
  .bar{display:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}