:root{
  --green:#226d4c;
  --green-2:#2a7a57;
  --green-d:#173f2d;
  --night:#10291e;
  --mint:#9ad09f;
  --mint-t:#d2efd3;
  --cream:#feedd9;
  --paper:#fff8ef;
  --sand:#ecd3bb;
  --ink:#16291f;
  --muted:#5d6b62;

  --ar:"Reem Kufi",sans-serif;
  --serif:"DM Serif Display",serif;
  --body:"IBM Plex Sans Arabic",sans-serif;

  --gut:clamp(16px,4vw,56px);
  --max:1200px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.8;overflow-x:clip}
html[lang="en"] body{line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
body.is-dialing{overflow:hidden}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:10px}

.btn{display:inline-block;border-radius:999px;text-decoration:none;font:700 16px/1 var(--body);transition:transform .25s var(--spring),background .2s,color .2s}
.btn>span{display:flex;align-items:center;justify-content:center;padding:17px 28px;white-space:nowrap}
.btn--green{background:var(--green);color:var(--cream)}
.btn--green:hover{transform:translateY(-2px);background:var(--green-d)}
.btn--line{box-shadow:inset 0 0 0 2px var(--green);color:var(--green)}
.btn--line:hover{background:var(--green);color:var(--cream)}

/* ---------- rotary dial button ---------- */
.phone{position:fixed;z-index:70;bottom:18px;inset-inline-start:18px;border:0;padding:0;background:none;cursor:pointer;display:grid;justify-items:center;gap:6px}
.phone__dial{position:relative;display:block;width:74px;height:74px;border-radius:50%;background:var(--green);box-shadow:0 14px 28px -10px rgba(16,41,30,.6),inset 0 0 0 3px var(--green-d);transition:transform .6s var(--spring)}
.phone__dial i{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--cream)}
.phone__dial i:nth-child(1){transform:rotate(-40deg) translate(25px)}
.phone__dial i:nth-child(2){transform:rotate(-70deg) translate(25px)}
.phone__dial i:nth-child(3){transform:rotate(-100deg) translate(25px)}
.phone__dial i:nth-child(4){transform:rotate(-130deg) translate(25px)}
.phone__dial i:nth-child(5){transform:rotate(-160deg) translate(25px)}
.phone__dial i:nth-child(6){transform:rotate(-190deg) translate(25px)}
.phone__dial i:nth-child(7){transform:rotate(-220deg) translate(25px)}
.phone__dial i:nth-child(8){transform:rotate(-250deg) translate(25px)}
.phone__dial i:nth-child(9){transform:rotate(-280deg) translate(25px)}
.phone__dial i:nth-child(10){transform:rotate(-310deg) translate(25px)}
.phone__dial b{position:absolute;inset:26px;border-radius:50%;background:var(--mint)}
.phone:hover .phone__dial{transform:rotate(40deg)}
.phone__lbl{background:var(--ink);color:var(--cream);font:600 12.5px/1 var(--body);padding:6px 11px;border-radius:999px}
.phone[aria-expanded="true"]{visibility:hidden}

.dial{position:fixed;inset:0;z-index:80;overflow:auto;background:conic-gradient(var(--green) 0 25%,var(--cream) 0 50%,var(--green) 0 75%,var(--cream) 0) 0 0/28px 28px repeat-x,conic-gradient(var(--green) 0 25%,var(--cream) 0 50%,var(--green) 0 75%,var(--cream) 0) 0 100%/28px 28px repeat-x,var(--cream)}
.dial[hidden]{display:none}
.dial__stage{--d:min(84vw,78vh,560px);min-height:100%;display:grid;place-items:center;align-content:center;gap:18px;padding:60px 16px 40px;animation:ring .5s var(--spring)}
@keyframes ring{from{opacity:0;transform:scale(.9) rotate(-8deg)}}
.dial__hint{font:600 clamp(20px,2.4vw,28px)/1.6 var(--ar);color:var(--green);text-align:center}
html[lang="en"] .dial__hint{font:italic 400 clamp(22px,2.4vw,30px)/1.3 var(--serif)}
.dial__disc{position:relative;width:var(--d);height:var(--d);border-radius:50%;background:var(--green);box-shadow:0 30px 60px -30px rgba(16,41,30,.7),inset 0 0 0 calc(var(--d)*.02) var(--green-d)}
.dial__ring{position:absolute;inset:0;transition:transform .55s cubic-bezier(.3,.1,.3,1)}
.hole{--ang:calc(-50deg - var(--a)*50deg);position:absolute;top:50%;left:50%;width:calc(var(--d)*.22);height:calc(var(--d)*.22);margin:calc(var(--d)*-.11);border-radius:50%;background:var(--cream);color:var(--green-d);text-decoration:none;display:grid;place-items:center;text-align:center;transform:rotate(var(--ang)) translate(calc(var(--d)*.345)) rotate(calc(var(--ang)*-1));box-shadow:inset 0 5px 10px rgba(16,41,30,.25);transition:background .2s,color .2s}
.hole span{display:block;font:700 clamp(13px,calc(var(--d)*.034),18px)/1.3 var(--body);padding:4px}
.hole:hover{background:var(--mint)}
.hole--call{background:var(--mint)}
.hole--call:hover{background:var(--paper)}
.dial__center{position:absolute;inset:32%;border-radius:50%;background:var(--cream);display:grid;place-items:center;align-content:center;gap:6px;box-shadow:0 0 0 calc(var(--d)*.012) var(--mint)}
.dial__center img{width:62%;height:auto}
.lang{border:0;padding:0;border-radius:999px;background:var(--green);color:var(--cream);cursor:pointer}
.lang>span{display:block;padding:8px 14px;font:700 13.5px/1 var(--body)}
.dial__stop{position:absolute;top:50%;left:50%;width:calc(var(--d)*.2);height:calc(var(--d)*.035);margin-top:calc(var(--d)*-.0175);border-radius:99px;background:#d9c2a6;transform:rotate(80deg) translate(calc(var(--d)*.4));transform-origin:0 50%;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.dial__x{position:fixed;top:26px;inset-inline-end:26px;width:48px;height:48px;border:0;padding:0;border-radius:50%;background:var(--green);color:var(--cream);cursor:pointer}
.dial__x span{display:block;font:500 30px/48px var(--body)}

/* ---------- shared ---------- */
section{position:relative;padding:clamp(80px,10vw,140px) var(--gut)}
.head{max-width:var(--max);margin:0 auto clamp(30px,4vw,54px)}
.head--c{text-align:center}
.head__k{font:600 15px/1.4 var(--body);color:var(--green);margin-bottom:12px;letter-spacing:.02em}
.title{font:700 clamp(36px,5vw,70px)/1.45 var(--ar);color:var(--ink)}
.title em{display:inline-block;font-style:normal;color:var(--green);line-height:1.45}
.title--light{color:var(--cream)}
.title--light em{color:var(--mint)}
html[lang="en"] .title{font:400 clamp(38px,5.2vw,74px)/1.1 var(--serif)}
html[lang="en"] .title em{font-style:italic;line-height:1.1}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:center;padding-inline:max(var(--gut),calc((100% - var(--max))/2));background:var(--cream);overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;background:conic-gradient(var(--green) 0 25%,transparent 0 50%,var(--green) 0 75%,transparent 0) 0 0/28px 28px}
.hero__logo{width:clamp(120px,12vw,170px);height:auto;margin-bottom:18px}
.hero__title{font:700 clamp(52px,7vw,108px)/1.35 var(--ar);color:var(--ink)}
.hero__title em{display:inline-block;font-style:normal;color:var(--green);line-height:1.35}
html[lang="en"] .hero__title{font:400 clamp(56px,7.4vw,116px)/1.02 var(--serif)}
html[lang="en"] .hero__title em{font-style:italic;line-height:1.05}
.hero__sub{font-size:clamp(17px,1.4vw,20px);max-width:26em;margin:18px 0 28px;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__now{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.now{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border-radius:999px;padding:8px 14px;font:600 14px/1.4 var(--body);box-shadow:inset 0 0 0 1.5px #e8d3b8}
.now::before{content:"";width:9px;height:9px;border-radius:50%;background:#b9a996;flex:none}
.now.is-on::before{background:var(--green);box-shadow:0 0 0 4px rgba(34,109,76,.18)}

.hero__art{position:relative;height:min(78vh,620px)}
.stamp{position:absolute;width:min(62%,340px);aspect-ratio:3/4;padding:14px;background:var(--paper);box-shadow:0 26px 40px -20px rgba(16,41,30,.45);-webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 6px,#0000 96%,#000) -7px -7px/20px 20px round;mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 6px,#0000 96%,#000) -7px -7px/20px 20px round;transition:transform .6s var(--spring)}
.stamp img{width:100%;height:calc(100% - 34px);object-fit:cover}
.stamp figcaption{height:34px;display:flex;align-items:flex-end;justify-content:space-between;font:italic 400 20px/1 var(--serif);color:var(--green)}
.stamp figcaption::after{content:"QAR";font:600 11px/1.6 var(--body);letter-spacing:.1em;color:var(--muted)}
.stamp--a{inset-inline-start:22%;top:14%;transform:rotate(-4deg);z-index:3}
.stamp--b{inset-inline-start:2%;top:2%;transform:rotate(-12deg);z-index:2}
.stamp--c{inset-inline-start:44%;top:30%;transform:rotate(9deg);z-index:1}
.hero__art:hover .stamp--a{transform:rotate(0) translateY(-8px)}
.hero__art:hover .stamp--b{transform:rotate(-16deg) translateX(-18px)}
[dir="rtl"] .hero__art:hover .stamp--b{transform:rotate(-16deg) translateX(18px)}
.hero__art:hover .stamp--c{transform:rotate(14deg) translateX(18px)}
[dir="rtl"] .hero__art:hover .stamp--c{transform:rotate(14deg) translateX(-18px)}

/* ---------- menu ---------- */
.menu{background:var(--green);color:var(--cream)}
.menu .head__k{color:var(--mint-t)}
.boxes .head__k{color:var(--green-d)}
.tabs{max-width:var(--max);margin:0 auto 30px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tab{border:0;padding:0;background:none;color:var(--cream);cursor:pointer;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--mint),inset 0 0 0 5px var(--green),inset 0 0 0 6.5px var(--mint);transition:background .2s,color .2s}
.tab>span{display:flex;align-items:baseline;gap:10px;padding:13px 22px}
.tab b{font:700 21px/1.4 var(--ar)}
.tab i{font:italic 400 17px/1 var(--serif);color:var(--mint-t)}
html[lang="en"] .tab b{font:400 21px/1.2 var(--serif)}
.tab:hover{background:var(--green-2)}
.tab[aria-selected="true"]{background:var(--cream);color:var(--green-d);box-shadow:inset 0 0 0 1.5px var(--cream),inset 0 0 0 5px var(--cream),inset 0 0 0 6.5px var(--green)}
.tab[aria-selected="true"] i{color:var(--green)}
.panel{max-width:var(--max);margin:0 auto}
.wrapsw{display:flex;justify-content:center;margin-bottom:22px}
.wrapsw[hidden]{display:none}
.seg{display:inline-flex;background:var(--green-d);border-radius:999px;padding:5px}
.seg__b{border:0;padding:0;background:none;border-radius:999px;cursor:pointer;color:var(--cream);transition:background .2s,color .2s}
.seg__b>span,.seg__b{font:600 15.5px/1 var(--body)}
.seg__b{padding:12px 20px}
.seg__b small{font-size:12.5px;opacity:.85}
.seg__b[aria-checked="true"]{background:var(--mint);color:var(--green-d)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{display:grid;grid-template-rows:auto 1fr;background:var(--paper);color:var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 22px 40px -26px rgba(0,0,0,.6);animation:up .5s var(--spring) both}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
.card__img{position:relative;aspect-ratio:4/3;background:var(--night);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .25s}
.card:hover .card__img img{transform:scale(1.05)}
.card__img--none{display:grid;place-items:center;background:var(--green-d)}
.card__img--none span{font:700 42px/1.4 var(--ar);color:var(--mint);opacity:.5}
.card__tag{position:absolute;top:12px;inset-inline-start:12px;background:var(--mint);color:var(--green-d);font:700 12.5px/1 var(--body);padding:7px 10px;border-radius:999px}
.card__body{display:grid;gap:4px;align-content:start;padding:18px 18px 18px}
.card__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card__name{font:700 23px/1.45 var(--ar)}
html[lang="en"] .card__name{font:400 23px/1.2 var(--serif)}
.card__alt{font:italic 400 16px/1.3 var(--serif);color:var(--green)}
html[lang="en"] .card__alt{font:600 14px/1.4 var(--body);font-style:normal}
.card__desc{font-size:14.5px;line-height:1.7;color:var(--muted)}
.pr{white-space:nowrap;color:var(--green)}
.pr b{font:400 28px/1 var(--serif)}
.pr small{font:600 12.5px/1 var(--body);margin-inline-start:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chips span{font:600 12.5px/1 var(--body);background:var(--cream);border-radius:999px;padding:7px 10px}
.extras{margin-top:22px;text-align:center;font:600 15px/1.7 var(--body);color:var(--cream)}
.extras b{color:var(--mint-t);font-weight:700}
.menu__note{max-width:var(--max);margin:18px auto 0;text-align:center;font:500 14px/1.6 var(--body);color:var(--mint-t)}

/* ---------- boxes ---------- */
.boxes{background:var(--sand)}
.box-row{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bx{grid-column:span 2;background:var(--paper);border-radius:24px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 22px 40px -28px rgba(16,41,30,.55)}
.bx:nth-child(1){grid-column:span 3}
.bx:nth-child(2){grid-column:span 3}
.bx__img{aspect-ratio:4/3;background:var(--night);overflow:hidden}
.bx:nth-child(-n+2) .bx__img{aspect-ratio:16/10}
.bx__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bx:hover .bx__img img{transform:scale(1.04)}
.bx__body{padding:18px 20px 20px;display:grid;gap:4px;align-content:start}
.bx__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bx__name{font:700 25px/1.45 var(--ar)}
html[lang="en"] .bx__name{font:400 25px/1.2 var(--serif)}
.bx__desc{font-size:14.5px;line-height:1.7;color:var(--muted)}
.bx .pr b{font-size:32px}
.bx__badge{justify-self:start;background:var(--green);color:var(--cream);font:700 12.5px/1 var(--body);padding:7px 11px;border-radius:999px;margin-bottom:4px}

/* ---------- outing ---------- */
.outing{background:var(--paper)}
.posts{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.post{padding:14px 14px 0;background:#fff;box-shadow:0 22px 40px -26px rgba(16,41,30,.5);-webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 6px,#0000 96%,#000) -7px -7px/20px 20px round;mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 6px,#0000 96%,#000) -7px -7px/20px 20px round;padding-bottom:14px;transition:transform .5s var(--spring)}
.post:nth-child(3n+1){transform:rotate(-2deg)}
.post:nth-child(3n+2){transform:rotate(1.5deg) translateY(24px)}
.post:nth-child(3n){transform:rotate(-1deg)}
.post:hover{transform:rotate(0) scale(1.02)}
.post img{width:100%;aspect-ratio:4/5;object-fit:cover}
.post figcaption{padding:12px 4px 4px;font:600 15px/1.6 var(--body);color:var(--ink);background:#fff}

/* ---------- branches ---------- */
.branches{background:var(--cream)}
.signs{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,30px)}
.sign{background:var(--paper);border-radius:220px 220px 26px 26px;padding:clamp(34px,4vw,50px) 26px 26px;text-align:center;display:grid;justify-items:center;gap:6px;box-shadow:inset 0 0 0 2px #e8d3b8,0 26px 40px -30px rgba(16,41,30,.5)}
.sign__logo{width:110px;height:auto;margin-bottom:6px}
.sign__name{font:700 34px/1.45 var(--ar);color:var(--green-d)}
html[lang="en"] .sign__name{font:400 34px/1.2 var(--serif)}
.sign__hours{font:600 16px/1.6 var(--body);color:var(--ink)}
.sign .now{margin:6px 0 10px}
.sign__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sign__acts a{text-decoration:none;border-radius:999px;font:700 15px/1 var(--body);padding:13px 18px}
.sign__tel{background:var(--green);color:var(--cream)}
.sign__tel bdi{font-family:var(--body);letter-spacing:.03em}
.sign__map{box-shadow:inset 0 0 0 2px var(--green);color:var(--green)}
.sign__acts a:hover{transform:translateY(-1px)}

/* ---------- footer ---------- */
.foot{background:var(--green);color:var(--cream);text-align:center;padding:clamp(60px,8vw,100px) var(--gut) 34px;display:grid;justify-items:center;gap:18px}
.foot__logo{width:150px;height:auto}
.foot__line{font:700 clamp(24px,2.8vw,36px)/1.5 var(--ar)}
html[lang="en"] .foot__line{font:italic 400 clamp(26px,3vw,40px)/1.2 var(--serif)}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.foot__links a{text-decoration:none;font:600 15px/1 var(--body);padding:12px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(254,237,217,.5)}
.foot__links a:hover{background:var(--cream);color:var(--green-d)}
.foot__credit{font-size:13.5px;color:var(--mint-t)}
.foot__credit a{text-decoration:none;font-weight:700;color:var(--cream)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .box-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx,.bx:nth-child(1),.bx:nth-child(2){grid-column:span 1}
  .bx:nth-child(5){grid-column:span 2}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post:nth-child(n){transform:rotate(-1deg)}
  .post:nth-child(2n){transform:rotate(1.5deg) translateY(20px)}
}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:60px;padding-bottom:90px}
  .hero__art{height:min(110vw,520px);max-width:520px;width:100%;justify-self:center}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero__cta .btn{flex:1 1 auto}
  .stamp{width:58%;padding:10px}
  .stamp--a{inset-inline-start:20%}
  .stamp--b{inset-inline-start:3%}
  .stamp--c{inset-inline-start:38%}
  .signs{grid-template-columns:minmax(0,1fr)}
  .box-row{grid-template-columns:minmax(0,1fr)}
  .bx:nth-child(5){grid-column:span 1}
  .posts{grid-template-columns:minmax(0,1fr)}
  .post:nth-child(n){transform:rotate(-1deg)}
  .tab>span{padding:11px 16px}
  .card{grid-template-rows:none;grid-template-columns:118px minmax(0,1fr)}
  .card__img{aspect-ratio:auto;height:100%;min-height:128px}
  .card__body{padding:12px 14px}
  .card__top{flex-direction:column;align-items:flex-start;gap:2px}
  .card__name{font-size:20px}
  .pr b{font-size:24px}
  .card__desc{font-size:13.5px;line-height:1.6}
  .tab b{font-size:18px}
  .phone__dial{width:66px;height:66px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}