.mb,.mb-qs,.mb-ask{--mb-lime:#f9fdfb;--mb-ink-1:#26120d;--mb-ink-2:#553628;--mb-green:#13503a;--mb-crimson:#9e1b2a;--mb-crimson-hi:#b8243a;--mb-top:64px;color:var(--mb-ink-1);font-family:var(--k-text)}.mb{background:var(--k-lime);timeline-scope:--mb-c1, --mb-c2, --mb-c3, --mb-c4;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);display:grid;overflow-x:clip}.mb-mapcol{border-right:1.5px solid #26120d24;position:relative}.mb-map{top:var(--mb-top);height:calc(100svh - var(--mb-top));background:#f9fdfb;margin:0;position:sticky;overflow:hidden;container-type:size}.mb-canvas{aspect-ratio:1560/1300;width:max(100cqw,120cqh);transform:translate(-50%, -50%) scale(var(--mb-z,1)) translate(var(--mb-tx,0%), var(--mb-ty,0%));will-change:transform;transition:transform 1.4s cubic-bezier(.6,0,.2,1);position:absolute;top:50%;left:50%}.mb-canvas svg{width:100%;height:100%;display:block}.mb-cap{background:var(--mb-lime);color:var(--mb-ink-2);font:500 .78rem / 1.2 var(--k-text);white-space:nowrap;border-radius:999px;padding:6px 12px;position:absolute;bottom:44px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #26120d24}.mb-label text,.mb-city,.mb-city-en,.mb-lane{paint-order:stroke;stroke:#f9fdfb;stroke-linejoin:round}.mb-label-ar{font:500 30px var(--font-display);stroke-width:7px}.mb-label-en{font:600 19px var(--font-sans);letter-spacing:.03em;stroke-width:6px}.mb-label[data-tone=ink] text,.mb-north text,.mb-scale text{fill:#26120d}.mb-label[data-tone=green] text{fill:#13503a}.mb-label[data-tone=ox] text{fill:#4a0f17}.mb-label[data-tone=ox] .mb-label-ar{font-size:36px}.mb-label-exit .mb-label-en{font-size:26px}.mb-label-gate .mb-label-en{font-size:22px}.mb-city{font:600 104px var(--font-display);fill:#13503a;fill-opacity:.9;stroke:#ddf8ec;stroke-width:10px}.mb-city-en{font:600 26px var(--font-sans);fill:#13503a;stroke:#ddf8ec;stroke-width:6px}.mb-lane{font:600 18px var(--font-sans);fill:#26120d;stroke-width:6px}.mb-pin{transition:opacity .6s}.mb-pin-halo{fill:#efcd84;opacity:0;transition:opacity .3s}.mb:is([data-stop=c1],[data-stop=c2],[data-stop=c3],[data-stop=c4]) .mb-pin{opacity:.35}.mb[data-stop=c1] .mb-pin:is([data-at=chouara],[data-at=talaa],[data-at=andalus],[data-at=nokbi],[data-at=merinid],[data-at=jdid]),.mb[data-stop=c2] .mb-pin:is([data-at=west],[data-at=north],[data-at=south]),.mb[data-stop=c3] .mb-pin:is([data-at=west],[data-at=sw],[data-at=se]),.mb[data-stop=c4] .mb-pin[data-at=riad],.mb .mb-pin[data-hot]{opacity:1}.mb-pin[data-hot] .mb-pin-halo{opacity:.85}.mb-route path{stroke-dasharray:1 1;stroke-dashoffset:0}@keyframes mb-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.mb-stop[data-stop=c1]{view-timeline-name:--mb-c1}.mb-stop[data-stop=c2]{view-timeline-name:--mb-c2}.mb-stop[data-stop=c3]{view-timeline-name:--mb-c3}.mb-stop[data-stop=c4]{view-timeline-name:--mb-c4}@supports (animation-timeline:view()) and (timeline-scope:--a){@media (prefers-reduced-motion:no-preference){.mb-route path{animation:linear both mb-draw;animation-range:cover 12% cover 50%}.mb-route[data-ch=c1] path{animation-timeline:--mb-c1}.mb-route[data-ch=c2] path{animation-timeline:--mb-c2}.mb-route[data-ch=c3] path{animation-timeline:--mb-c3}.mb-route[data-ch=c4] path{animation-timeline:--mb-c4;animation-range:cover 10% cover 30%}}}.mb-chapters{min-width:0}.mb-stop{min-height:100svh;color:var(--mb-ink-1);position:relative}.mb-stop-body{padding:clamp(56px,12svh,120px) clamp(20px,4vw,64px) clamp(48px,8svh,96px)}.mb-stop[data-ground=lime]{background:oklch(99% .004 165)}.mb-stop[data-ground=saffron]{background:oklch(87% .12 88)}.mb-stop[data-ground=terracotta]{background:oklch(50% .13 40)}.mb-stop[data-ground=gebs]{background:oklch(40% .085 162)}.mb-stop:is([data-ground=terracotta],[data-ground=gebs]),.mb[data-wash][data-tone=dark] .mb-stop{--mb-ink-1:oklch(99% .004 165);--mb-ink-2:oklch(94% .025 20);--mb-green:oklch(88% .08 160)}.mb[data-wash] .mb-stop{background:0 0}.mb[data-wash][data-tone=light] .mb-stop{--mb-ink-1:#26120d;--mb-ink-2:#553628;--mb-green:#13503a}.mb-chapters{background:oklch(99% .004 165);transition:background-color .9s}.mb[data-stop=c2] .mb-chapters{background:oklch(87% .12 88)}.mb[data-wash][data-stop=c2] .mb-stop{--mb-ink-2:oklch(30% .05 50);--mb-green:oklch(36% .09 160)}.mb[data-stop=c3] .mb-chapters{background:oklch(50% .13 40)}.mb[data-stop=c4] .mb-chapters{background:oklch(40% .085 162)}.mb-card,.mb-post{--mb-ink-1:#26120d;--mb-ink-2:#553628;--mb-green:#13503a;color:#26120d}.mb-stop[data-ground=saffron]{--mb-ink-2:oklch(30% .05 50);--mb-green:oklch(36% .09 160)}.mb-stop-head{max-width:40rem;margin-bottom:clamp(24px,4svh,40px)}.mb-eyebrow{color:var(--mb-green);font:600 .8rem / 1.2 var(--k-text);align-items:center;gap:10px;margin:0;display:flex}.mb-eyebrow:before{content:"";clip-path:polygon(50% 0,61% 26%,85% 15%,74% 39%,100% 50%,74% 61%,85% 85%,61% 74%,50% 100%,39% 74%,15% 85%,26% 61%,0 50%,26% 39%,15% 15%,39% 26%);background:#c9973a;width:16px;height:16px;box-shadow:inset 0 0 0 2px #26120d}.mb-ar{color:var(--mb-green);font:500 clamp(2.4rem, 5.4vw, 4.4rem) / 1.05 var(--k-display);text-align:start;margin:10px 0 0}.mb-h2{color:var(--mb-ink-1);font:600 clamp(2rem, 4vw, 3.3rem) / 1.04 var(--k-display);text-wrap:balance;margin:6px 0 0}.mb-sub{max-width:60ch;color:var(--mb-ink-2);text-wrap:pretty;margin:12px 0 0;font-size:1.05rem;line-height:1.6}.mb-legend{gap:12px;margin:0;padding:0;list-style:none;display:grid}.mb-card{min-height:168px;color:var(--mb-ink-1);background:#fff;border-radius:14px;grid-template-columns:minmax(140px,42%) 1fr;align-items:start;text-decoration:none;transition:box-shadow .3s,transform .3s;display:grid;overflow:hidden;box-shadow:0 0 0 1.5px #26120d24,0 14px 30px -24px #26120d99}.mb-card:hover{box-shadow:0 0 0 2px var(--mb-green), 0 18px 34px -24px #26120db3;transform:translate(4px)}.mb-card:focus-visible{outline:3px solid var(--mb-green);outline-offset:3px}.mb-card-photo{aspect-ratio:3/4;background:#ddf8ec;display:block;position:relative;overflow:hidden}.mb-card-photo img{object-fit:cover;width:76%;height:90%;transition:transform .8s cubic-bezier(.2,.8,.2,1);position:absolute;inset:10% 12% 0}.mb-card:hover .mb-card-photo img,.mb-card:focus-visible .mb-card-photo img{transform:scale(1.07)}.mb-niche-frame{width:100%;height:100%;position:absolute;inset:0}.mb-card-go{color:var(--mb-crimson);margin-top:2px;font-size:.92rem;font-weight:600}.mb-card-go:after{content:" →"}.mb-card-text{align-content:start;gap:6px;padding:14px 18px 16px;display:grid}.mb-card-at{color:var(--mb-green);font:600 .76rem / 1.2 var(--k-text);flex-wrap:wrap;align-items:center;gap:4px 8px;display:flex}.mb-star{clip-path:polygon(50% 0,61% 26%,85% 15%,74% 39%,100% 50%,74% 61%,85% 85%,61% 74%,50% 100%,39% 74%,15% 85%,26% 61%,0 50%,26% 39%,15% 15%,39% 26%);background:#8d5f1b;width:12px;height:12px}.mb-card-ar{font:500 1.05rem / 1 var(--k-display);letter-spacing:0;text-transform:none}.mb-card-title{font:600 clamp(1.15rem, 1.6vw, 1.35rem) / 1.12 var(--k-display);text-wrap:balance}.mb-card-line{color:var(--mb-ink-2);font-size:.94rem;line-height:1.45}.mb-card-meta{color:var(--mb-crimson);font-size:.88rem;font-weight:600}.mb-gates{gap:clamp(28px,5svh,44px);display:grid}.mb-gate-h{font:600 1.25rem / 1.2 var(--k-display);flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;display:flex}.mb-gate-glyph{background:var(--mb-green);border:2.5px solid var(--mb-ink-1);border-radius:13px 13px 2px 2px;width:26px;height:30px;box-shadow:inset 0 0 0 4px #f9fdfb}.mb-gate-dir{color:var(--mb-ink-2);font:500 .95rem / 1 var(--k-text)}.mb-gate-h .mb-card-ar{color:var(--mb-green);font-size:1.3rem}.mb-post{background:#fff;border-radius:4px;margin:clamp(28px,5svh,48px) 0 0;padding:10px 10px 14px;transform:rotate(-1.2deg);box-shadow:0 22px 40px -26px #26120db3,0 0 0 1px #26120d1a}.mb-post img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}.mb-post figcaption{gap:4px;padding:12px 6px 0;display:grid}.mb-post-line{font:600 clamp(1.1rem, 2vw, 1.4rem) / 1.25 var(--k-display)}.mb-post-where{color:var(--mb-ink-2);font-size:.82rem}.mb-walk{gap:18px;margin:0;padding:0 0 0 30px;list-style:none;display:grid;position:relative}.mb-walk:before{content:"";border-left:3px dotted #8d5f1b;position:absolute;top:10px;bottom:10px;left:8px}.mb-walk-step{grid-template-columns:96px 1fr;align-items:start;gap:16px;display:grid;position:relative}.mb-walk-step:before{content:"";clip-path:polygon(50% 0,61% 26%,85% 15%,74% 39%,100% 50%,74% 61%,85% 85%,61% 74%,50% 100%,39% 74%,15% 85%,26% 61%,0 50%,26% 39%,15% 15%,39% 26%);background:#c9973a;width:20px;height:20px;position:absolute;top:6px;left:-30px}.mb-walk-photo{aspect-ratio:1;border-radius:10px;display:block;overflow:hidden;box-shadow:0 0 0 1.5px #26120d24}.mb-walk-photo img{object-fit:cover;width:100%;height:100%}.mb-walk-text{gap:4px;display:grid}.mb-walk-when{color:var(--mb-green);font:600 .78rem / 1.2 var(--k-text)}.mb-walk-h{font:600 1.35rem / 1.15 var(--k-display);margin:0}.mb-walk-body{color:var(--mb-ink-2);line-height:1.55}.mb-qs,.mb-ask{isolation:isolate;padding:clamp(56px,10svh,112px) clamp(16px,4vw,56px);position:relative;overflow:hidden}.mb-qs{background:var(--k-ivory)}.mb-lattice{z-index:-1;opacity:.55;width:100%;height:100%;position:absolute;inset:0}.mb-qs-inner,.mb-ask-inner{max-width:860px;margin:0 auto}.mb-qs-list{gap:10px;margin-top:clamp(20px,3svh,32px);display:grid}.mb-q{background:#fff;border-radius:12px;box-shadow:0 0 0 1.5px #26120d24}.mb-q summary{min-height:56px;font:600 clamp(1.05rem, 1.6vw, 1.2rem) / 1.25 var(--k-display);cursor:pointer;align-items:center;gap:12px;padding:12px 18px;list-style:none;display:flex}.mb-q summary::-webkit-details-marker{display:none}.mb-q summary:before{content:"";background:var(--mb-green);clip-path:polygon(50% 0,61% 26%,85% 15%,74% 39%,100% 50%,74% 61%,85% 85%,61% 74%,50% 100%,39% 74%,15% 85%,26% 61%,0 50%,26% 39%,15% 15%,39% 26%);flex:none;width:16px;height:16px}.mb-q[open] summary:before{background:var(--mb-crimson)}.mb-q summary:focus-visible{outline:3px solid var(--mb-green);outline-offset:2px;border-radius:12px}.mb-q p{color:var(--mb-ink-2);margin:0;padding:0 18px 18px 46px;line-height:1.6}.mb-ask-inner{background:#fff;border-radius:18px;padding:clamp(24px,4vw,48px);box-shadow:0 0 0 10px #13503a,0 0 0 12px #26120d,0 40px 70px -40px #26120db3}.mb-ask-steps{color:var(--mb-ink-2);margin:16px 0 0;padding-left:1.2rem;line-height:1.55}.mb-ask-steps li+li{margin-top:6px}.mb-ask-steps strong{color:var(--mb-ink-1)}.mb-btn{background:var(--mb-crimson);color:#fff;min-height:48px;font:600 1rem / 1 var(--k-text);border-radius:999px;justify-content:center;align-items:center;margin-top:20px;padding:0 1.5rem;text-decoration:none;display:inline-flex}.mb-btn:hover{background:var(--mb-crimson-hi)}.mb-btn:focus-visible{outline:3px solid var(--mb-green);outline-offset:3px}@media (width<=900px){.mb{display:block}.mb-mapcol{top:var(--mb-top);z-index:5;border-bottom:1.5px solid #26120d40;border-right:0;height:38svh;position:sticky;box-shadow:0 10px 24px -18px #26120d99}.mb-map{height:100%;position:relative;top:0}.mb-canvas{transform:translate(-50%, -50%) scale(var(--mb-zm,1)) translate(var(--mb-tx,0%), var(--mb-ty,0%))}.mb-cap{font-size:.7rem;bottom:8px}.mb-stop{min-height:0}.mb-stop-body{padding-top:40px}.mb-card{grid-template-columns:40% 1fr;min-height:150px}.mb-label,.mb-city,.mb-city-en,.mb-lane,.mb-scale,.mb-north text{display:none}.mb-label-gate{display:inline}.mb-label-gate .mb-label-ar{display:none}.mb-label-gate .mb-label-en{stroke-width:10px;font-size:46px}.mb:is([data-stop=c2],[data-stop=c3]) .mb-label-exit{display:inline}.mb-label-exit .mb-label-ar{display:none}.mb-label-exit .mb-label-en{stroke-width:10px;font-size:50px}.mb[data-stop=c1] .mb-stoplabel[data-for=c1],.mb[data-stop=c2] .mb-stoplabel[data-for=c2],.mb[data-stop=c3] .mb-stoplabel[data-for=c3],.mb[data-stop=c4] .mb-stoplabel[data-for=c4]{display:inline}.mb-card-text{gap:4px;padding:10px 12px 12px}.mb-card-title{font-size:1.08rem}.mb-card-line{font-size:.88rem}.mb-walk-step{grid-template-columns:72px 1fr}}@media (prefers-reduced-motion:reduce){.mb-canvas,.mb-card,.mb-pin,.mb-pin-halo{transition:none}.mb-card:hover{transform:none}}.mb-stoplabel{display:none}.mb-stoplabel .mb-label-ar{fill:#13503a;stroke-width:14px;font-size:92px}.mb-stoplabel .mb-label-en{fill:#26120d;stroke-width:12px;font-size:54px}.mb-stoplabel text{paint-order:stroke;stroke:#f9fdfb;stroke-linejoin:round}.mb-stoplabel[data-for=c4] .mb-label-ar{font-size:46px}.mb-stoplabel[data-for=c4] .mb-label-en{font-size:28px}.mb-door{overflow-anchor:none;position:relative}.mb-door-stage{--sg-p:.3;--mb-up:0;background:#f9fdfb;height:72svh;position:relative;overflow:hidden}.mb-door .sg-door{--sg-zoom:1.2;--sg-zoom-y:20%;background:#f9fdfb}.mb-door-plaque{z-index:2;color:#26120d;width:min(88%,26rem);transform:translate(-50%, calc(var(--mb-up) * (-100% - 70svh)));background:#f9fdfb;border-top:8px solid #13503a;border-radius:6px 6px 16px 16px;gap:4px;margin:0;padding:14px 18px 16px;display:grid;position:absolute;bottom:clamp(16px,5svh,40px);left:50%;box-shadow:0 0 0 1px #26120d1f,0 26px 50px -26px #26120d99}.mb-door-gate{font:600 1.25rem / 1.2 var(--k-display)}.mb-door-ar{color:#13503a;font:500 1.6rem / 1.1 var(--k-display)}.mb-door-where{color:#553628;font-size:.82rem}@keyframes mb-pass{0%{--sg-p:0}to{--sg-p:1}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.mb-door{view-timeline-name:--mb-door;height:190svh}.mb-door-stage{top:var(--mb-top);height:calc(100svh - var(--mb-top));--mb-up:clamp(0, (var(--sg-p) - .08) / .4, 1);animation:linear both mb-pass;animation-timeline:--mb-door;animation-range:contain;position:sticky}}}@media (width<=900px){.mb-door-stage{height:52svh}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (width<=900px){.mb-door-stage{top:calc(var(--mb-top) + 38svh);height:calc(100svh - var(--mb-top) - 38svh)}}}.mb-ask{background:oklch(43% .15 22)}.mb-ask .mb-lattice{opacity:.25}.mb-ask-ctas{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.mb-ask-ctas .mb-btn{margin-top:0}.mb-btn-quiet{color:#26120d;background:#fff;box-shadow:inset 0 0 0 1.5px #26120d59}.mb-btn-quiet:hover{background:#ddf8ec}@media (prefers-reduced-motion:reduce){.mb-card-photo img,.mb-chapters{transition:none}.mb-card:hover .mb-card-photo img{transform:none}}@media (width<=419px){.mb-card{grid-template-columns:1fr}.mb-card-photo{aspect-ratio:4/3}.mb-card-photo img{width:70%;height:88%;inset:12% 15% 0}.mb-card-text{padding:12px 16px 16px}.mb-card-title{font-size:1.2rem}}
