/* The Muhrim Tours — palette taken from the logo */
:root{
  --kiswa:#0a0a0a;          /* Kaaba black */
  --gold:#FAAC1C;           /* logo saffron */
  --gold-deep:#A56A00;      /* gold for small text on white */
  --gold-soft:#FFF1D4;
  --sand:#F6E6CD;           /* the group flag */
  --marble:#F3F5F8;         /* Haram marble */
  --stone:#626262;          /* "TOURS" grey */
  --ink:#1c1c1c;
  --white:#fff;
  --wa:#25D366;
  --line:rgba(10,10,10,.12);

  --f-display:"Reem Kufi","Noto Kufi Arabic",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-img:22px; --r-sq:6px;
  --top-h:64px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 12px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
:lang(ar) body, html:lang(ar) body{--f-body:"Noto Kufi Arabic",system-ui,sans-serif;line-height:1.85}
html:lang(am) body{--f-body:"Noto Sans Ethiopic","Figtree",system-ui,sans-serif;--f-display:"Noto Sans Ethiopic","Reem Kufi",sans-serif;line-height:1.75}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
html:lang(am) h1,html:lang(am) h2,html:lang(am) h3{font-weight:800;letter-spacing:0;line-height:1.3}
html:lang(ar) h1,html:lang(ar) h2,html:lang(ar) h3{line-height:1.4;letter-spacing:0}
h2{font-size:clamp(1.8rem,1.2rem + 2.6vw,3rem);font-weight:700}
h3{font-size:1.3rem;font-weight:600}
p{margin:0 0 1em;max-width:62ch}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.narrow{width:min(780px,100% - 2.5rem)}
.sub{color:var(--stone);font-size:1.1rem;margin-bottom:2rem}
.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;inset-inline-start:1rem;top:-80px;background:var(--kiswa);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.7rem 1.35rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--gold);color:var(--kiswa);box-shadow:0 6px 0 -2px #d08c06}
.btn-gold:hover{background:#ffb935}
.btn-dark{background:var(--kiswa);color:#fff}
.btn-dark:hover{background:#262626}
.btn-line{border-color:var(--kiswa);color:var(--kiswa);background:transparent}
.btn-line:hover{background:var(--kiswa);color:#fff}
.btn-wa{background:var(--wa);color:#063d1c}
.btn-text{background:none;border:0;text-decoration:underline;text-underline-offset:4px;color:var(--stone);padding:.6rem .4rem;min-height:44px}
.round{width:46px;height:46px;border-radius:50%;border:2px solid var(--kiswa);background:#fff;display:grid;place-items:center}
.round:hover{background:var(--gold)}
html[dir=rtl] .round .i{transform:scaleX(-1)}

/* Header */
.top{position:sticky;top:0;z-index:40;height:var(--top-h);display:flex;align-items:center;gap:1rem;padding:0 max(1.25rem,env(safe-area-inset-left));background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-color:var(--line)}
.brand{direction:ltr;display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand-mark svg{width:34px;height:auto;display:block;fill:var(--kiswa)}
.brand-mark svg path:nth-child(2){fill:var(--gold)}
.brand-word{display:flex;flex-direction:column;line-height:1;font-family:"Figtree",sans-serif}
.brand-word b{font-size:.95rem;letter-spacing:.14em;font-weight:700}
.brand-word em{font-style:normal;color:var(--gold-deep)}
.brand-word small{font-size:.66rem;letter-spacing:.34em;color:var(--stone);margin-top:3px;font-weight:600}
.nav{display:none;gap:.2rem;margin-inline-start:auto}
.nav a{text-decoration:none;padding:.5rem .62rem;border-radius:999px;font-weight:500;font-size:.95rem;white-space:nowrap}
@media (max-width:1399px){.nav a[href="#included"],.nav a[href="#gallery"]{display:none}}
.nav a:hover,.nav a.active{background:var(--gold-soft)}
.lang{display:flex;background:var(--marble);border-radius:999px;padding:3px;margin-inline-start:auto;flex:none}
.lang button{border:0;background:none;min-height:36px;padding:0 .7rem;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--stone)}
.lang button[lang=ar]{font-family:"Noto Kufi Arabic",sans-serif}
.lang button[lang=am]{font-family:"Noto Sans Ethiopic",sans-serif}
.lang button[aria-pressed=true]{background:var(--kiswa);color:#fff}
.top-cta{display:none;min-height:42px;padding:.5rem 1.1rem}
@media (min-width:1080px){.nav{display:flex}.lang{margin-inline-start:.5rem}.top-cta{display:inline-flex}}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--marble) 100%);padding:1.5rem 0 3rem}
.kufic-bg{position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E9C98F' stroke-width='2'%3E%3Cpath d='M10 10h40v20H30v20h20v20H10zM70 10h40v60H90V30H70zM10 90h60v20H10zM90 90h20v20H90z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px;mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 70%)}
.hero-inner{position:relative;width:min(1180px,100% - 2.5rem);margin-inline:auto;display:grid;gap:1.5rem;justify-items:center;text-align:center}
.hero-art{position:relative;width:min(64vw,340px);aspect-ratio:1;display:grid;place-items:center}
.tawaf-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-track{fill:none;stroke:var(--gold);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:2 7}
.ring-inner{stroke-opacity:.2}
.ring-dots{transform-origin:200px 200px;animation:tawaf 26s linear infinite reverse}
.ring-dots.r2{animation-duration:38s}
.ring-dots circle{fill:var(--kiswa)}
.ring-dots circle.w{fill:#fff;stroke:#bbb;stroke-width:1}
.ring-dots circle.g{fill:var(--gold)}
@keyframes tawaf{to{transform:rotate(360deg)}}
.tawaf-ring{opacity:0;transition:opacity 1.2s .2s}
.logo-ready .tawaf-ring{opacity:1}
.logo-stage{width:56%;cursor:pointer;outline-offset:10px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18))}
.logo-mark{width:100%;height:auto;overflow:visible}
.logo-mark .lg-cap,.logo-mark .lg-body{fill:var(--kiswa)}
.logo-mark .lg-band{fill:var(--gold)}
/* logo build animation */
.logo-mark .lg-cap{transform:translateY(-60px);opacity:0}
.logo-mark .lg-band{clip-path:inset(0 100% 0 0);}
.logo-mark .lg-body{transform:translateY(40px);opacity:0}
.logo-mark .lg-shine{opacity:0}
.play .lg-cap{animation:capIn .7s cubic-bezier(.2,.9,.3,1.25) .15s forwards}
.play .lg-band{animation:bandIn .75s cubic-bezier(.6,0,.2,1) .7s forwards}
.play .lg-body{animation:bodyIn .6s cubic-bezier(.2,.9,.3,1.2) forwards;animation-delay:calc(1.25s + var(--i) * .11s)}
.play .lg-shine{animation:shine 5.5s ease-in-out 2.4s infinite}
@keyframes capIn{to{transform:none;opacity:1}}
@keyframes bandIn{to{clip-path:inset(0 0 0 0)}}
@keyframes bodyIn{to{transform:none;opacity:1}}
@keyframes shine{0%{opacity:1;transform:translateX(0)}35%{opacity:1;transform:translateX(560px)}36%,100%{opacity:0;transform:translateX(560px)}}
.logo-stage:hover .lg-body{animation-name:bodyIn,bob;animation-duration:.6s,.5s;animation-delay:0s,calc(var(--i) * .06s);animation-fill-mode:forwards,none}
@keyframes bob{50%{transform:translateY(-6px)}}

.hero-copy{display:grid;justify-items:center}
.hero-wordmark{direction:ltr;font:600 clamp(1.05rem,.8rem + 1vw,1.4rem)/1 "Figtree",sans-serif;letter-spacing:.3em;margin:0 0 1.1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.1em .5em;opacity:0;transform:translateY(8px);transition:opacity .6s 2s,transform .6s 2s}
.hero-wordmark .gold{color:var(--gold)}
.hero-wordmark small{flex-basis:100%;font-size:.62em;color:var(--stone);letter-spacing:.5em;margin-top:.5em}
.logo-ready .hero-wordmark{direction:ltr;opacity:1;transform:none}
.hero h1{font-size:clamp(2rem,1.2rem + 4vw,3.9rem);font-weight:700;max-width:16ch}
html:lang(am) .hero h1{font-size:clamp(1.8rem,1.1rem + 3.4vw,3.2rem);max-width:18ch}
.lead{font-size:1.15rem;color:#3d3d3d;margin-inline:auto}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin:.4rem 0 1.4rem;width:100%}
@media (max-width:560px){.hero-ctas .btn{width:100%;white-space:normal;text-align:center}}
.rating{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.25rem .5rem;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--stone)}
.stars{color:var(--gold);letter-spacing:.1em}
@media (min-width:900px){
  .hero{padding:3rem 0 5rem}
  .hero-inner{grid-template-columns:1.05fr 1fr;align-items:center;text-align:start;justify-items:start}
  .hero-art{order:2;width:min(100%,500px);justify-self:center}
  .hero-copy{justify-items:start}
  .hero-wordmark{direction:ltr;justify-content:flex-start}
  .lead{margin-inline:0}
  .hero-ctas{justify-content:flex-start}
}

/* Talbiyah band */
.band{direction:ltr;background:var(--gold);color:var(--kiswa);overflow:hidden;border-block:3px solid var(--kiswa);position:relative}
.band-track{display:flex;align-items:center;gap:1.4rem;width:max-content;padding:.85rem 0;animation:marq 42s linear infinite;font-family:"Reem Kufi",sans-serif;font-weight:600;font-size:1.15rem;white-space:nowrap}
.band-track span[lang=ar]{font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-size:1.3rem}
.band-track i{width:10px;height:10px;background:var(--kiswa);transform:rotate(45deg);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
html[dir=rtl] .band-track{animation-direction:reverse}

/* Photo strip */
.strip-sec{padding:4rem 0 2rem}
.head-row{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.head-row h2{margin:0}
.strip-ctrl{display:none;gap:.5rem}
@media (min-width:700px){.strip-ctrl{display:flex}}
.strip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(1.25rem,calc((100vw - 1180px)/2)) 1rem;scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip figure{margin:0;flex:0 0 min(78vw,400px);scroll-snap-align:center;position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:3/4;background:var(--marble)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);pointer-events:none;user-select:none}
.strip figure:hover img{transform:scale(1.05)}
.strip figcaption{position:absolute;inset:auto 0 0;padding:3rem 1.1rem 1rem;color:#fff;font-weight:600;font-size:1.05rem;background:linear-gradient(transparent,rgba(0,0,0,.72))}

/* Journey */
.journey{padding:4.5rem 0;background:var(--sand);position:relative}
.journey::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40h20V20h20V0M40 80V60h20V40h20' fill='none' stroke='%23d9b980' stroke-width='1.5'/%3E%3C/svg%3E")}
.journey .wrap{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.5rem}
.steps button{display:flex;flex-direction:column;align-items:center;gap:.35rem;border:0;background:rgba(255,255,255,.55);border-radius:14px;padding:.75rem .35rem;font-size:.78rem;font-weight:600;line-height:1.25;text-align:center;transition:background .25s}
.steps button b{width:34px;height:34px;display:grid;place-items:center;background:#fff;border:2px solid var(--kiswa);border-radius:var(--r-sq);font-family:"Reem Kufi",sans-serif;font-size:1rem;transition:background .25s,color .25s}
.steps button[aria-selected=true]{background:#fff;box-shadow:0 0 0 2px var(--kiswa)}
.steps button[aria-selected=true] b{background:var(--kiswa);color:var(--gold)}
.steps button.done b{background:var(--gold);border-color:var(--gold);color:var(--kiswa)}
@media (min-width:700px){.steps button{flex-direction:row;font-size:.95rem;padding:.8rem 1rem;text-align:start}}
.panel{display:grid;gap:1.5rem;background:#fff;border-radius:28px;padding:1.5rem;box-shadow:0 1px 0 var(--line);animation:panelIn .4s ease}
.panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}}
@media (min-width:860px){.panel{grid-template-columns:1fr 1fr;padding:2.5rem;align-items:center}}
.panel-art{display:grid;place-items:center;min-height:260px;background:var(--marble);border-radius:20px;padding:1.2rem;position:relative;overflow:hidden}
.counter{font-weight:700;font-size:1.1rem;margin:0 0 .6rem}
.pips{display:flex;gap:6px;margin-bottom:1.2rem}
.pips span{width:28px;height:10px;border-radius:3px;background:var(--line);transition:background .3s}
.pips span.on{background:var(--gold)}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.talbiyah{text-align:center;gap:.2rem;align-content:center}
.tb-ar{font-family:"Reem Kufi",sans-serif;font-size:clamp(1.9rem,1.2rem + 3vw,2.8rem);margin:0;max-width:none;line-height:1.5}
.tb-tr{font-weight:600;margin:0;max-width:none}
.tb-en{color:var(--stone);margin:0 0 1rem;max-width:none}
.cloths{display:flex;gap:10px;justify-content:center}
.cloths span{width:70px;height:46px;background:#fff;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.08);animation:cloth 4s ease-in-out infinite}
.cloths span+span{height:62px;animation-delay:-2s}
@keyframes cloth{50%{transform:translateY(-5px) rotate(-2deg)}}
.tawaf-sim,.sai-sim{width:100%;max-width:340px;height:auto;overflow:visible}
.sim-floor{fill:#fff}
.sim-track{fill:none;stroke:#cfd4db;stroke-width:2;stroke-dasharray:4 6}
.sim-trail{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round}
.sim-kaaba{fill:var(--kiswa)}
.sim-band{fill:var(--gold)}
.sim-stone{fill:#fff;stroke:var(--gold);stroke-width:2}
.sim-dot{fill:var(--gold);stroke:var(--kiswa);stroke-width:3}
.hill{fill:#d8c3a2}
.sai-path{stroke:#cfd4db;stroke-width:4;stroke-dasharray:6 6}
.sai-green{fill:#7ec77a;opacity:.8}
.sai-lbl{font:600 15px "Figtree",sans-serif;fill:var(--ink)}
html:lang(ar) .sai-lbl{font-family:"Noto Kufi Arabic",sans-serif}
html:lang(am) .sai-lbl{font-family:"Noto Sans Ethiopic",sans-serif}
.done-art{text-align:center;align-content:center}
.done-art .mini-logo svg{width:90px;fill:var(--kiswa);transition:transform .6s cubic-bezier(.2,.9,.3,1.4)}
.done-art .mini-logo svg path:nth-child(2){fill:var(--gold)}
.done-msg{font-family:var(--f-display);font-size:1.5rem;font-weight:700;margin:1rem 0 0;min-height:1.5em;max-width:none}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;left:50%;top:45%;width:10px;height:10px;background:var(--gold);transform:rotate(45deg);opacity:0}
.done-art.celebrate .mini-logo svg{transform:scale(1.25) rotate(-4deg)}
.done-art.celebrate .burst i{animation:burst 1.2s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(225deg)}}

/* Trips */
.trips{padding:4.5rem 0}
.trip-grid{display:grid;gap:1.2rem}
@media (min-width:900px){.trip-grid{grid-template-columns:1.25fr 1fr 1fr}}
.trip{border-radius:var(--r-img);overflow:hidden;background:var(--marble);display:flex;flex-direction:column;border:1px solid var(--line)}
.trip img{aspect-ratio:16/10;object-fit:cover;width:100%}
.trip-feature{background:var(--kiswa);color:#fff;border-color:var(--kiswa)}
.trip-feature p{color:#d0d0d0}
.trip-body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.trip-body h3{font-size:1.55rem}
.trip ul{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.55rem;flex:1}
.trip li{display:flex;gap:.6rem;align-items:flex-start}
.trip li::before{content:"";width:10px;height:10px;margin-top:.55em;background:var(--gold);transform:rotate(45deg);flex:none}
.trip .btn{align-self:flex-start}

/* Included */
.included{padding:4.5rem 0;background:var(--marble)}
.inc-layout{display:grid;gap:2rem}
.inc-photo img{border-radius:var(--r-img);aspect-ratio:4/5;object-fit:cover;width:100%;max-height:560px}
@media (min-width:900px){.inc-layout{grid-template-columns:.85fr 1.15fr;align-items:center}.inc-photo{position:sticky;top:90px}}
.inc-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.4rem}
@media (min-width:600px){.inc-list{grid-template-columns:1fr 1fr;gap:1.2rem 1.6rem}}
.inc-list li{display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.inc-list .i{width:44px;height:44px;padding:10px;background:var(--gold);border-radius:var(--r-sq);stroke-width:1.7}
.inc-list h3{font-size:1.1rem;margin-bottom:.25rem}
.inc-list p{margin:0;color:#474747;font-size:.98rem}

/* Gallery */
.gallery{padding:4.5rem 0}
.masonry{columns:2 160px;column-gap:.8rem}
@media (min-width:900px){.masonry{columns:4}}
.masonry button{display:block;width:100%;border:0;padding:0;margin:0 0 .8rem;border-radius:16px;overflow:hidden;background:var(--marble);break-inside:avoid}
.masonry img{width:100%;transition:transform .6s,filter .6s}
.masonry button:nth-child(3n+2) img{aspect-ratio:3/3.2;object-fit:cover}
.masonry button:hover img{transform:scale(1.04)}
.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,900px);max-height:92vh}
.lightbox::backdrop{background:rgba(0,0,0,.88)}
.lightbox img{max-height:88vh;width:auto;border-radius:14px;margin:auto}
.lb-close{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px}

/* Reviews */
.reviews{padding:3.5rem 0;background:var(--kiswa);color:#fff}
.rev{display:grid;gap:1rem;align-items:center}
@media (min-width:760px){.rev{grid-template-columns:auto 1fr;gap:3rem}}
.big-score{font:700 clamp(5rem,4rem + 6vw,9rem)/1 "Reem Kufi",sans-serif;color:var(--gold);margin:0}
.stars.lg{font-size:1.6rem;margin:0 0 .3rem}
.reviews p{color:#cfcfcf}
.reviews .btn-line{border-color:#fff;color:#fff}
.reviews .btn-line:hover{background:#fff;color:var(--kiswa)}

/* FAQ */
.faq{padding:4.5rem 0}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:1.15rem 0;font-weight:600;font-size:1.1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:14px;height:14px;border:solid var(--kiswa);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);transition:transform .25s;flex:none;margin-top:-6px}
details[open] summary::after{transform:rotate(-135deg);margin-top:6px}
details p{color:#444;padding-bottom:1.1rem;margin:0}

/* Contact */
.contact{padding:4.5rem 0 5.5rem;background:linear-gradient(var(--white),var(--sand))}
.con-layout{display:grid;gap:2rem}
@media (min-width:900px){.con-layout{grid-template-columns:1fr 1.1fr;align-items:start}}
dl{margin:1rem 0 1.6rem;display:grid;gap:1rem}
dt{font-size:.9rem;color:var(--stone);font-weight:600}
dd{margin:0;font-size:1.1rem;font-weight:500}
dd a{text-decoration:none;font-weight:700}
.open-now{font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem}
.open-now::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.open-now.is-open{color:#15803d}
.open-now.is-closed{color:#b45309}
.con-btns{display:flex;flex-wrap:wrap;gap:.6rem}
.con-map{display:grid;grid-template-columns:.8fr 1.2fr;gap:.8rem}
.con-office{border-radius:var(--r-img);aspect-ratio:3/4;object-fit:cover;width:100%;height:100%}
.con-map iframe{width:100%;height:100%;min-height:300px;border:0;border-radius:var(--r-img);background:var(--marble)}

/* Footer */
.foot{background:var(--kiswa);color:#bdbdbd;padding:2rem 0 calc(6.5rem + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.foot .brand-mark svg{fill:#fff;width:30px}
.foot p{margin:0;font-size:.95rem}
@media (min-width:1080px){.foot{padding-bottom:2rem}}

/* Bottom nav (mobile) */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:45;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.55rem .2rem .5rem;text-decoration:none;font-size:.72rem;font-weight:600;color:var(--stone);min-height:56px;justify-content:center}
.bottom-nav a.active{color:var(--kiswa)}
.bottom-nav a.active .i{stroke:var(--kiswa);background:var(--gold);border-radius:8px;padding:2px;width:26px;height:26px}
@media (min-width:1080px){.bottom-nav{display:none}}

/* WhatsApp float */
.wa-float{position:fixed;z-index:50;inset-inline-end:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
@media (min-width:1080px){.wa-float{bottom:24px;inset-inline-end:24px}}
.wa-fab{width:60px;height:60px;border-radius:50%;border:0;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.45);position:relative}
.wa-fab svg{width:32px;height:32px}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:ping 2.4s ease-out infinite}
.wa-fab[aria-expanded=true]::after{animation:none}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.wa-pop{width:min(88vw,330px);background:#fff;border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.2);padding:1rem;border-top:5px solid var(--wa);transform-origin:bottom right;animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
html[dir=rtl] .wa-pop{transform-origin:bottom left}
@keyframes pop{from{opacity:0;transform:scale(.85)}}
.wa-title{font-weight:700;margin:0 0 .6rem}
.wa-list{display:grid;gap:.45rem}
.wa-list a{display:block;text-decoration:none;background:#e9fbe9;border-radius:14px 14px 14px 4px;padding:.6rem .8rem;font-size:.95rem;line-height:1.4;transition:background .2s}
html[dir=rtl] .wa-list a{border-radius:14px 14px 4px 14px}
.wa-list a:hover{background:#d3f5d3}
.wa-own{display:block;margin-top:.7rem;font-size:.9rem;color:#128c4a;font-weight:600}

/* Shared: small heading above a section title */
.eyebrow{margin:0 0 .6rem;font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
html:lang(ar) .eyebrow,html:lang(am) .eyebrow{letter-spacing:0;font-size:.95rem}

/* Intro: the logo lockup assembles, then the mark glides into the hero */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#fff;transition:background-color .6s ease;
  animation:introAway .4s 4.5s forwards} /* safety net if the script never runs */
.intro::before{content:"";position:absolute;inset:0;opacity:.5;transition:opacity .4s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E9C98F' stroke-width='2'%3E%3Cpath d='M10 10h40v20H30v20h20v20H10zM70 10h40v60H90V30H70zM10 90h60v20H10zM90 90h20v20H90z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px;mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 60%);-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 60%)}
html:not(.js) .intro,.no-intro .intro{display:none}
@keyframes introAway{to{opacity:0;visibility:hidden}}
.intro-in{position:relative;display:grid;justify-items:center}
.intro-mark{width:min(36vw,176px);transition:transform .9s cubic-bezier(.65,0,.25,1);will-change:transform}
.intro-word{direction:ltr;margin:1.6rem 0 0;font:400 clamp(1.5rem,1rem + 2.4vw,2.4rem)/1 "Figtree",sans-serif;letter-spacing:.2em;display:flex;gap:.45em;transition:opacity .3s}
.intro-word span span{display:inline-block;opacity:0;transform:translateY(14px);animation:letterIn .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(1.05s + var(--i) * .055s)}
.iw-the{color:var(--kiswa)}
.iw-muhrim{color:var(--gold)}
.intro-tours{margin:.7rem 0 0;font:600 .8rem/1 "Figtree",sans-serif;letter-spacing:.7em;color:var(--stone);opacity:0;animation:letterIn .6s ease 1.65s forwards;transition:opacity .3s}
@keyframes letterIn{to{opacity:1;transform:none}}
.intro.leave{background-color:transparent;pointer-events:none}
.intro.leave::before,.intro.leave .intro-word,.intro.leave .intro-tours{opacity:0}
.intro-on .logo-stage{visibility:hidden}
/* the finished mark, with no build animation (after the intro hands over) */
.logo-mark.built .lg-cap,.logo-mark.built .lg-body{transform:none;opacity:1;animation:none}
.logo-mark.built .lg-band{clip-path:none;animation:none}
.logo-mark.built .lg-shine{animation:shine 5.5s ease-in-out 1.2s infinite}
.from-intro .hero-wordmark{transition-delay:.15s}

/* Reveal on scroll (only once the script has started, so nothing hides without it) */
[data-reveal]{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-ready [data-reveal]:not(.in){opacity:0;transform:translateY(22px)}

/* Journeys: a timeline of every trip */
.journeys{--cw:min(60vw,250px);--pad:clamp(10px,2.4vw,26px);--dir:1;padding:4.5rem 0 3.5rem;background:var(--marble);position:relative;overflow:hidden}
html[dir=rtl] .journeys{--dir:-1}
.journeys::before{content:"";position:absolute;inset:0 0 auto;height:320px;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E9C98F' stroke-width='2'%3E%3Cpath d='M10 10h40v20H30v20h20v20H10zM70 10h40v60H90V30H70zM10 90h60v20H10zM90 90h20v20H90z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
.jr-head{position:relative;display:grid;gap:1.2rem;margin-bottom:.8rem}
.jr-head h2{margin-bottom:.4rem}
.jr-head .sub{margin-bottom:0}
.jr-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.jr-years{display:flex;gap:.4rem;flex-wrap:wrap}
.jr-years button{border:1.5px solid var(--kiswa);background:#fff;border-radius:999px;min-height:40px;padding:0 1rem;font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.jr-years button[aria-pressed=true]{background:var(--kiswa);color:#fff}
.jr-years button:hover{background:var(--gold-soft)}
.jr-years button[aria-pressed=true]:hover{background:#262626}
.jr-arrows{display:none;gap:.5rem}
@media (min-width:700px){.jr-arrows{display:flex}}
@media (min-width:900px){.jr-head{grid-template-columns:1fr auto;align-items:end}.jr-tools{flex-direction:column;align-items:flex-end}}
.jr-track{position:relative;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;
  padding:1.6rem calc(50% - var(--cw)/2 - var(--pad)) 1rem}
.jr-track::-webkit-scrollbar{display:none}
.jr-track.drag{cursor:grabbing;scroll-snap-type:none}
.jr-track.drag .jr-card{pointer-events:none}
.jr-track:focus-visible{outline-offset:-3px}
.jr{--line-y:calc(18px + var(--cw) * 1.25 + 24px);position:relative;flex:0 0 calc(var(--cw) + var(--pad) * 2);padding-inline:var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center;scroll-snap-align:center}
/* the path: a dashed gold line through every stop */
.jr::before{content:"";position:absolute;top:var(--line-y);inset-inline:0;border-top:2px dashed rgba(165,106,0,.5)}
.jr:last-child::before{inset-inline-end:50%}
.jr-year{position:absolute;z-index:1;top:var(--line-y);inset-inline-start:0;transform:translate(calc(var(--dir) * -50%),-50%);background:var(--gold);color:var(--kiswa);font:800 .82rem/1 "Figtree",sans-serif;padding:.45rem .7rem;border-radius:999px;box-shadow:0 0 0 4px var(--marble)}
.jr:first-child .jr-year{transform:translate(0,-50%)}
.jr-card{position:relative;display:block;margin-top:18px;padding:0;border:0;background:none;border-radius:calc(var(--cw) / 2) calc(var(--cw) / 2) 12px 12px;transform:scale(.9);transition:transform .45s cubic-bezier(.2,.7,.2,1);-webkit-tap-highlight-color:transparent}
.jr-card::before{content:"";position:absolute;inset:-8px;border:1.5px solid var(--gold);border-radius:calc(var(--cw) / 2 + 8px) calc(var(--cw) / 2 + 8px) 16px 16px;opacity:0;transition:opacity .45s}
.jr-arch{display:block;width:var(--cw);aspect-ratio:4/5;overflow:hidden;border-radius:inherit;background:#e7dfcf;box-shadow:0 18px 34px -16px rgba(0,0,0,.45)}
.jr-arch img{width:100%;height:100%;object-fit:cover;object-position:center top;user-select:none;-webkit-user-drag:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.jr-card:hover .jr-arch img{transform:scale(1.04)}
/* round number as a small Kaaba (black with the gold band), sitting on the arch like a finial */
.jr-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-55%);min-width:40px;height:32px;padding:0 .5rem 5px;display:flex;align-items:flex-end;justify-content:center;border-radius:4px;
  background:linear-gradient(var(--kiswa) 0 28%,var(--gold) 28% 46%,var(--kiswa) 46%);color:#fff;font:700 .8rem/1 "Figtree",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.soon{position:absolute;z-index:1;bottom:12px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--kiswa);font-weight:700;font-size:.78rem;line-height:1;padding:.45rem .75rem;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.3);white-space:nowrap}
.jr-node{width:22px;height:22px;margin:13px 0 12px;fill:#fff;stroke:var(--gold-deep);stroke-width:1.6;position:relative;transition:fill .3s,transform .45s}
.jr-k{margin:.2rem 0 .15rem;color:var(--gold-deep);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
html:lang(am) .jr-k,html:lang(ar) .jr-k{letter-spacing:0;font-size:.9rem}
.jr-t{margin:0 0 .25rem;max-width:var(--cw);font-family:var(--f-display);font-weight:600;font-size:1.08rem;line-height:1.3}
.jr-d{margin:0;max-width:var(--cw);color:var(--stone);font-size:.9rem;line-height:1.45}
.jr-k,.jr-t,.jr-d{opacity:.55;transition:opacity .4s}
.jr.on .jr-card{transform:none}
.jr.on .jr-card::before{opacity:1}
.jr.on .jr-node{fill:var(--gold);stroke:var(--kiswa);transform:scale(1.25) rotate(22.5deg)}
.jr.on .jr-k,.jr.on .jr-t,.jr.on .jr-d{opacity:1}
.jr-progress{height:3px;margin-top:1.4rem;background:rgba(10,10,10,.1);border-radius:3px;overflow:hidden}
.jr-progress span{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
html[dir=rtl] .jr-progress span{transform-origin:right}

/* Viewer: one poster, uncropped, under a gold arch */
.viewer{width:100%;height:100%;max-width:100%;max-height:100%;margin:0;border:0;padding:0;color:#fff;overflow:hidden auto;
  background:radial-gradient(ellipse at 30% 40%,#2a2113 0,#0b0b0b 60%)}
.viewer::backdrop{background:rgba(0,0,0,.7)}
.vw-in{min-height:100%;display:grid;gap:2rem;align-content:center;justify-items:center;padding:5.5rem 1.25rem 2rem}
@media (min-width:900px){.vw-in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;padding:4rem max(3rem,calc((100vw - 1240px)/2))}}
.vw-stage{position:relative;margin:0;touch-action:pan-y;user-select:none}
.vw-stage::before{content:"";position:absolute;inset:-62px -16px -16px;border:1.5px solid rgba(250,172,28,.6);border-radius:50% 50% 18px 18px / 78px 78px 18px 18px;pointer-events:none}
.vw-stage img{position:relative;width:auto;max-width:100%;max-height:58vh;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.7);-webkit-user-drag:none;transition:filter .3s}
@media (min-width:900px){.vw-stage img{max-height:78vh}}
.vw-stage.soft img{filter:blur(4px)}
.vw-stage.swap img{animation:vwIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes vwIn{from{opacity:0;transform:translateY(12px) scale(.98)}}
.vw-info{width:100%;max-width:440px}
.vw-kicker{margin:0 0 .4rem;color:var(--gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
html:lang(am) .vw-kicker,html:lang(ar) .vw-kicker{letter-spacing:0;font-size:1rem}
.vw-info h3{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);font-weight:700}
.vw-meta{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.4rem;color:#d2d2d2}
.vw-meta li{display:flex;gap:.65rem;align-items:baseline}
.vw-meta li::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none;translate:0 -2px}
.vw-nav{display:flex;align-items:center;gap:1rem;margin-top:1.6rem}
.vw-count{font-variant-numeric:tabular-nums;color:#bdbdbd;min-width:3.5em;text-align:center}
.viewer .round{border-color:#fff;color:var(--kiswa)}
.viewer .round:disabled{opacity:.3;cursor:default;background:#fff}
.vw-close{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));inset-inline-end:14px;z-index:2}

/* About: founders and recognition */
.about{padding:5rem 0 4.5rem}
.ab-grid{display:grid;gap:2.6rem;align-items:center}
@media (min-width:900px){.ab-grid{grid-template-columns:.85fr 1.15fr;gap:4rem}}
.ab-photo{margin:0;position:relative;justify-self:center;width:min(100%,440px)}
.ab-photo::before{content:"";position:absolute;top:-10px;inset-inline:-10px;aspect-ratio:740/906;border:1.5px solid var(--gold);border-radius:50% 50% 24px 24px / 26% 26% 24px 24px;pointer-events:none}
.ab-photo img{width:100%;aspect-ratio:720/886;object-fit:cover;border-radius:50% 50% 16px 16px / 24% 24% 16px 16px;box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
.ab-photo figcaption{margin-top:1.1rem;text-align:center;color:var(--stone);font-size:.92rem}
.ab-lead{font-size:1.12rem;color:#3d3d3d}
.stats{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.stats li{border-top:3px solid var(--gold);padding-top:.9rem}
.stats b{display:block;font:700 clamp(2rem,1.3rem + 2.6vw,3.2rem)/1 var(--f-display);font-variant-numeric:tabular-nums;margin-bottom:.4rem}
.stats span{display:block;color:var(--stone);font-size:.92rem;line-height:1.35}
.recog{margin-top:4rem;display:grid;border-radius:24px;overflow:hidden;background:var(--kiswa);color:#fff;position:relative}
.recog::before{content:"";position:absolute;inset:0 0 auto;height:6px;z-index:1;background:repeating-linear-gradient(90deg,var(--gold) 0 18px,#c98705 18px 22px)}
@media (min-width:900px){.recog{grid-template-columns:1.1fr 1fr;align-items:stretch}}
.recog-photo{margin:0;display:grid;gap:3px;background:var(--kiswa)}
.recog-photo img{width:100%;height:100%;min-height:200px;object-fit:cover}
.recog-copy{padding:2.2rem 1.6rem 2.4rem;display:flex;flex-direction:column;justify-content:center}
@media (min-width:900px){.recog-copy{padding:3rem 3rem}}
.recog .eyebrow{color:var(--gold)}
.recog h3{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);font-weight:700}
.recog p{color:#d4d4d4;margin:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .logo-mark .lg-cap,.logo-mark .lg-body{transform:none;opacity:1}
  .logo-mark .lg-band{clip-path:none}
  .band-track{animation:none}
  .ring-dots{animation:none}
}