/* Tayma "Marhaba" pass: the label for projects sold to Arab nationals (replaces "For Arab nationals only").
   Bilingual parity after Wael Morcos: Marhaba and مرحبا at equal weight, joined by one acid diamond.
   Markup:  <span class="mh">KEY<span class="mh-t"><small>Homes for Arab nationals</small><span class="mh-p"><span class="mh-la">Marhaba</span><i></i><span class="mh-ar" lang="ar">مرحبا</span></span></span></span>
   Sizes:   .mh (hero), .mh.mh-sm (cards, rows). Set --mh-d on a parent to hold the unfold (e.g. until a hero intro has played). marhaba.js adds .mh-go when it scrolls into view; without it the pass shows finished. */
@font-face{font-family:"Tayma Marhaba";src:url(/assets/fonts/plex-arabic-marhaba.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+627-628,U+62D,U+631,U+645}
.mh{display:inline-flex;align-items:center;gap:12px;height:62px;padding:7px;border-radius:18px;background:#f5f1e8;color:#0d0d0b;overflow:hidden;max-width:460px;box-shadow:0 14px 34px -18px rgba(0,0,0,.8);vertical-align:middle;text-align:left}
.mh-k{width:48px;height:48px;flex:none;border-radius:13px;background:#0d0d0b;color:#d9ff3f;display:grid;place-items:center}
.mh-k svg{width:24px;height:24px;transform-origin:42% 58%}
.mh-t{display:flex;flex-direction:column;gap:3px;white-space:nowrap;padding-right:12px;min-width:0}
.mh-t small{font:700 10px/1 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b665a}
.mh-p{display:flex;align-items:center;gap:9px;height:26px}
.mh-la{font:900 22px/1 Archivo,Arial,sans-serif;letter-spacing:-.02em}
.mh-ar{font:700 22px/1 "Tayma Marhaba","IBM Plex Sans Arabic","Geeza Pro",sans-serif}
.mh-p i{width:7px;height:7px;border-radius:2px;background:#d9ff3f;box-shadow:0 0 0 2px #0d0d0b;transform:rotate(45deg);flex:none}
.mh-sm{height:40px;gap:8px;padding:4px;border-radius:12px;box-shadow:none}
.mh-sm .mh-k{width:32px;height:32px;border-radius:9px}.mh-sm .mh-k svg{width:17px;height:17px}
.mh-sm .mh-t{gap:2px;padding-right:9px}.mh-sm .mh-t small{font-size:8px;letter-spacing:.1em}
.mh-sm .mh-p{height:16px;gap:6px}.mh-sm .mh-la,.mh-sm .mh-ar{font-size:14px}.mh-sm .mh-p i{width:5px;height:5px;box-shadow:0 0 0 1.5px #0d0d0b}
@media(max-width:400px){.mh:not(.mh-sm){height:56px;gap:10px}.mh:not(.mh-sm) .mh-k{width:42px;height:42px}.mh:not(.mh-sm) .mh-k svg{width:21px;height:21px}.mh:not(.mh-sm) .mh-la,.mh:not(.mh-sm) .mh-ar{font-size:18px}.mh:not(.mh-sm) .mh-p{gap:7px}.mh:not(.mh-sm) .mh-t small{font-size:9px;letter-spacing:.1em}}
/* motion: the key pops and turns like a lock, the pass unfolds, Latin is revealed left-to-right and Arabic right-to-left, meeting at the diamond */
.mh.mh-a{max-width:62px}.mh-sm.mh-a{max-width:40px}
.mh.mh-a .mh-p .mh-la{clip-path:inset(0 100% 0 0)}.mh.mh-a .mh-p .mh-ar{clip-path:inset(0 0 0 100%)}.mh.mh-a .mh-p i{transform:rotate(45deg) scale(0)}.mh.mh-a .mh-t small{opacity:0}
.mh.mh-go{animation:mhOpen .9s cubic-bezier(.34,1.56,.64,1) calc(var(--mh-d,0s) + .45s) forwards}
.mh.mh-go .mh-k{animation:mhPop .55s cubic-bezier(.34,1.56,.64,1) var(--mh-d,0s) both}
.mh.mh-go .mh-k svg{animation:mhTurn .7s cubic-bezier(.34,1.56,.64,1) calc(var(--mh-d,0s) + .3s) both,mhJig 1s cubic-bezier(.34,1.56,.64,1) calc(var(--mh-d,0s) + 5s) 1}
.mh.mh-go .mh-la{animation:mhRev .7s cubic-bezier(.22,1,.36,1) calc(var(--mh-d,0s) + 1.05s) forwards}
.mh.mh-go .mh-ar{animation:mhRev .7s cubic-bezier(.22,1,.36,1) calc(var(--mh-d,0s) + 1.05s) forwards}
.mh.mh-go .mh-p i{animation:mhDia .5s cubic-bezier(.34,1.56,.64,1) calc(var(--mh-d,0s) + .9s) forwards}
.mh.mh-go .mh-t small{animation:mhUp .5s cubic-bezier(.22,1,.36,1) calc(var(--mh-d,0s) + 1.6s) both}
@keyframes mhOpen{to{max-width:460px}}
@keyframes mhPop{0%{transform:scale(0) rotate(-20deg)}100%{transform:none}}
@keyframes mhTurn{0%{transform:rotate(-90deg)}100%{transform:none}}
@keyframes mhJig{0%,100%{transform:none}40%{transform:rotate(-24deg)}70%{transform:rotate(8deg)}}
@keyframes mhRev{to{clip-path:inset(0 0 0 0)}}
@keyframes mhDia{to{transform:rotate(45deg) scale(1)}}
@keyframes mhUp{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mh.mh-a{max-width:460px}.mh.mh-a .mh-p .mh-la,.mh.mh-a .mh-p .mh-ar{clip-path:none}.mh.mh-a .mh-p i{transform:rotate(45deg)}.mh.mh-a .mh-t small{opacity:1}.mh.mh-go,.mh.mh-go *{animation:none!important}}
/* keep the pass colours wherever it sits (card styles often colour every span) */
.mh.mh,.mh.mh .mh-t,.mh.mh .mh-p{background:#f5f1e8;color:#0d0d0b}.mh.mh .mh-k{background:#0d0d0b;color:#d9ff3f}.mh.mh .mh-t small{background:none;color:#6b665a}.mh.mh .mh-la,.mh.mh .mh-ar{background:none;color:#0d0d0b;padding:0;border:0}