@font-face{font-family:Body;src:url(fonts/readex-pro-arabic-wght-normal.woff2) format("woff2-variations");font-weight:200 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Body;src:url(fonts/readex-pro-latin-wght-normal.woff2) format("woff2-variations");font-weight:200 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@view-transition{navigation:auto}
:root{--r:32px;--r-s:20px;--pad:clamp(20px,5vw,72px);--glass:color-mix(in srgb,var(--bg) 70%,transparent);--mut:color-mix(in srgb,var(--ink) 72%,var(--bg));--shadow:0 24px 60px -32px color-mix(in srgb,var(--ink) 40%,transparent)}
*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.8 Body,"Noto Sans Arabic",system-ui,sans-serif;overflow-x:clip}
h1,h2,h3{font-family:Disp,Body,serif;line-height:1.25;margin:0;font-weight:700;text-wrap:balance}h2{font-size:clamp(1.9rem,4.6vw,3.3rem);margin-bottom:clamp(24px,4vw,44px)}h3{font-size:1.2rem}
img{display:block;max-width:100%;height:auto}a{color:inherit}p{margin:0}.wrap{max-width:1180px;margin:auto;padding:0 var(--pad)}
section{padding:clamp(72px,10vw,128px) 0}.en{display:none}html[lang=en] .en{display:inline}html[lang=en] .ar{display:none}
:focus-visible{outline:3px solid var(--acc2);outline-offset:3px;border-radius:12px}.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;z-index:99}.skip:focus{top:12px}
/* nav: floating glass pill */
.nav{position:fixed;z-index:50;top:12px;inset-inline:12px;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border-radius:999px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 10px 40px -18px color-mix(in srgb,var(--ink) 45%,transparent);max-width:1100px;margin:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;min-width:0;min-height:48px}.bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.mono{flex:none;width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:var(--ink);color:var(--acc);font:700 1.15rem/1 Disp,serif;letter-spacing:-.02em}
.links{display:none;margin-inline-start:auto;gap:4px}.links a{text-decoration:none;padding:12px 16px;border-radius:999px;min-height:48px;display:inline-flex;align-items:center;transition:background .2s}.links a:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.status{font-size:.85rem;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);display:inline-flex;gap:8px;align-items:center;white-space:nowrap;margin-inline-start:auto}.status:before{content:"";width:8px;height:8px;border-radius:50%;background:#8a8a8a}.status.open:before{background:#16a34a}.status.closed:before{background:#dc2626}
.lang{min-width:48px;min-height:48px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);font:600 .9rem Body,sans-serif;cursor:pointer}
@media(min-width:960px){.links{display:flex}.nav .status{margin-inline-start:0}.nav{top:18px}}
/* button-in-button */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:6px 8px 6px 24px;padding-inline:24px 8px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600;font-size:1.05rem;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.btn .bi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--dark);transition:transform .35s cubic-bezier(.2,.8,.2,1)}html[dir=ltr] .btn .bi svg{transform:scaleX(-1)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.btn:hover .bi{transform:translateX(-4px)}html[dir=ltr] .btn:hover .bi{transform:translateX(4px)}.btn:active{transform:scale(.98)}
.btn.inv{background:var(--bg);color:var(--ink)}.btn.wide{width:100%;justify-content:space-between}
/* hero variants */
.hero{position:relative;padding:0}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:.95rem;font-weight:600;color:var(--acc2);margin-bottom:10px}
.hero h1{font-size:clamp(2.5rem,8.5vw,6rem);letter-spacing:-.01em;margin-bottom:14px}.lead{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--mut);max-width:34ch;margin-bottom:26px}.hr-rate{display:block;margin-top:8px;font-weight:600;color:var(--ink)}.hr-rate small{font-weight:400;color:var(--mut)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.h-full .hero{min-height:min(100svh,920px);display:flex;align-items:flex-end;color:#fff;background:var(--dark)}.h-full .hero-media{position:absolute;inset:0;overflow:hidden}.h-full .hero-media img{animation:kb 18s ease-out both}
.h-full .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,color-mix(in srgb,var(--dark) 92%,transparent) 88%)}
.h-full .hero-copy{padding:0 var(--pad) clamp(100px,14vh,120px);max-width:1180px;width:100%;margin:auto}.h-full .eyebrow{color:var(--acc)}.h-full .lead,.h-full .hr-rate,.h-full .hr-rate small{color:#fffffff0}.h-full .btn{background:var(--bg);color:var(--ink)}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.h-split .hero,.h-arch .hero{display:grid;gap:22px;padding:84px var(--pad) 0;max-width:1240px;margin:auto}
.h-split .hero-media,.h-arch .hero-media{order:-1;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-height:40svh}
.h-arch .hero-media{border-radius:999px 999px var(--r) var(--r);aspect-ratio:4/4.4}
.h-stack .hero{padding:118px var(--pad) 0;text-align:center;max-width:1240px;margin:auto}.h-stack .lead{margin-inline:auto}.h-stack .hero-media{display:block;margin-top:40px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:16/8}
@media(max-width:700px){.h-arch .hero-media{max-height:38svh;aspect-ratio:4/3.6}.h-stack .hero{padding-top:100px}.hero h1{font-size:clamp(2.2rem,10vw,3rem)}.lead{margin-bottom:18px}}
@media(min-width:900px){.h-split .hero,.h-arch .hero{grid-template-columns:1.05fr .95fr;align-items:center;min-height:min(100svh,900px);padding-top:110px;padding-bottom:40px}.h-split .hero-media,.h-arch .hero-media{order:2;max-height:76svh;aspect-ratio:4/5}}
/* scroll-driven reveal (CSS only, with fallback = visible) */
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* trust */
.trust{background:var(--soft)}.trust-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}.trust-head h2{margin:0}
.counters{display:flex;gap:clamp(18px,4vw,48px);margin:0}.counters dt{font-size:.9rem;color:var(--mut)}.counters dd{margin:0;font:700 clamp(2rem,5vw,3.2rem)/1 Disp,Body,serif}.counters b{font-variant-numeric:tabular-nums}
.reviews{list-style:none;margin:0;padding:0;display:grid;gap:16px}.rc figure{margin:0;height:100%;background:var(--bg);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.stars{color:#b7791f;letter-spacing:2px}.rc blockquote{margin:0;flex:1}.rc figcaption{display:flex;gap:12px;align-items:center}.rc figcaption img,.av{width:44px;height:44px;border-radius:50%;flex:none}.av{display:grid;place-items:center;background:var(--ink);color:var(--bg);font-weight:700}.rc small{display:block;color:var(--mut);font-size:.85rem}
.src{margin-top:24px}.src a,.lnk{display:inline-flex;min-height:48px;align-items:center;font-weight:600;text-underline-offset:5px}
@media(min-width:760px){.reviews{grid-template-columns:repeat(2,1fr)}}@media(min-width:1100px){.reviews{grid-template-columns:repeat(3,1fr)}}
.c-restaurant .trust,.c-gym .trust,.c-auto .trust{background:var(--dark);color:var(--bg)}.c-restaurant .counters dt,.c-gym .counters dt,.c-auto .counters dt{color:color-mix(in srgb,var(--bg) 75%,transparent)}
@media(max-width:759px){.c-restaurant .reviews,.c-cafe .reviews,.c-gym .reviews,.c-auto .reviews,.c-carwash .reviews{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad)}.reviews>li{scroll-snap-align:center}}
.c-salon .reviews{display:block;columns:1}@media(min-width:760px){.c-salon .reviews{columns:2}}@media(min-width:1100px){.c-salon .reviews{columns:3}}.c-salon .rc{break-inside:avoid;margin-bottom:16px}
/* offer: scannable list, layout per category */
.olist{list-style:none;padding:0;margin:0;display:grid;gap:0}.olist li{padding:22px 0;border-top:2px solid color-mix(in srgb,var(--ink) 10%,transparent);display:grid;gap:4px}.olist p{color:var(--mut)}
.tag{justify-self:start;font-size:.85rem;padding:4px 12px;border-radius:999px;background:var(--soft);color:var(--ink)}.tag.def,.def{background:transparent;color:var(--mut);font-size:.85rem;padding:0}
@media(min-width:800px){.olist{grid-template-columns:1fr 1fr;column-gap:56px}}
.c-restaurant .olist h3,.c-bakery .olist h3{font-size:1.6rem}.c-cafe .olist li,.c-clinic .olist li,.c-gym .olist li{border:0;background:var(--soft);border-radius:var(--r-s);padding:22px;margin:6px}
@media(min-width:800px){.c-clinic .olist,.c-gym .olist{grid-template-columns:repeat(3,1fr);column-gap:0}}
.note{margin-top:20px;font-weight:600}
/* why: broken bento */
.bento{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:1fr 1fr}.bento li{background:var(--soft);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:170px}
.bento .b1{grid-column:span 2;background:var(--ink);color:var(--bg)}.bento .b1 .def{color:color-mix(in srgb,var(--bg) 70%,transparent)}.wi{font-size:1.8rem}.bento p{font-size:1.15rem;font-weight:600}
.bento .bcta{grid-column:span 2;background:var(--acc);color:var(--dark)}
@media(min-width:900px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}.bento .b1{grid-column:span 2;grid-row:span 2}.bento .b2{grid-row:span 2}.bento .bcta{grid-column:span 2}.bento .b1 p{font-size:clamp(1.5rem,2.4vw,2.1rem)}}
/* full-bleed editorial */
.full{background:var(--dark);color:var(--bg)}.process ol{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:s}.process li{display:flex;align-items:center;gap:16px;font-size:1.25rem;font-weight:600;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--bg) 18%,transparent)}
.process li span{width:52px;height:52px;flex:none;border-radius:18px;display:grid;place-items:center;background:var(--acc);color:var(--dark);font:700 1.3rem Disp,sans-serif}.def-n{margin-top:18px;font-size:.85rem;color:color-mix(in srgb,var(--bg) 70%,transparent)}.lead2{font-size:1.3rem;max-width:40ch}
@media(min-width:900px){.process ol{grid-template-columns:repeat(4,1fr)}.process li{flex-direction:column;align-items:flex-start;border:0;border-top:1px solid color-mix(in srgb,var(--bg) 25%,transparent)}}
.quote{padding:clamp(80px,12vw,160px) var(--pad)}.quote blockquote{margin:auto;max-width:960px}.quote p{font:600 clamp(1.5rem,3.8vw,2.8rem)/1.5 Disp,Body,serif}.quote footer{margin-top:20px;color:var(--acc)}
/* gallery broken bento */
.gbento{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);grid-auto-rows:42vw;grid-auto-flow:dense}
.gbento li{border-radius:var(--r-s);overflow:hidden}.gb{all:unset;cursor:zoom-in;display:block;width:100%;height:100%}.gb:focus-visible{outline:3px solid var(--acc2)}.gb picture,.gb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.gb:hover img{transform:scale(1.05)}
.gbento .g1{grid-column:span 2;grid-row:span 2}.gbento .g4{grid-row:span 2}
@media(min-width:900px){.gbento{grid-template-columns:repeat(4,1fr);grid-auto-rows:230px}.gbento .g1{grid-column:span 2;grid-row:span 2}.gbento .g2{grid-row:span 2}.gbento .g5{grid-column:span 2}}
dialog{border:0;padding:0;background:transparent;max-width:min(94vw,1200px)}dialog::backdrop{background:#000d}dialog img{max-height:86vh;width:auto;border-radius:var(--r-s)}dialog .x{position:absolute;top:8px;inset-inline-end:8px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;font-size:1.6rem;cursor:pointer}
/* visit */
.vgrid{display:grid;gap:28px}@media(min-width:900px){.vgrid{grid-template-columns:.9fr 1.1fr;gap:56px}}
address{font-style:normal;font-size:1.1rem;margin-bottom:22px}address a{display:inline-flex;min-height:48px;align-items:center;font-weight:600}
.hrs{width:100%;border-collapse:collapse;background:var(--soft);border-radius:var(--r);overflow:hidden;margin-bottom:16px}.hrs caption{text-align:start;font-weight:700;padding:0 0 12px;display:flex;justify-content:space-between;align-items:center}.hrs caption .status{margin:0}
.hrs th,.hrs td{padding:12px 20px;text-align:start;font-weight:400}.hrs td{text-align:end;font-variant-numeric:tabular-nums}.hrs tr+tr>*{border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}.hrs tr.today{background:var(--ink);color:var(--bg);font-weight:600}
.map{min-height:380px;border-radius:var(--r);overflow:hidden;background:var(--soft);display:grid;place-items:center}.map iframe{width:100%;height:100%;min-height:380px;border:0}.mapbtn{min-height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);font:600 1rem Body,sans-serif;cursor:pointer}
/* faq */
.faq .wrap{max-width:860px}details{border-radius:var(--r-s);background:var(--soft);margin-bottom:10px}summary{cursor:pointer;list-style:none;padding:18px 22px;min-height:56px;font-weight:600;display:flex;justify-content:space-between;gap:12px;align-items:center}summary::-webkit-details-marker{display:none}summary:after{content:"+";font-size:1.5rem;transition:transform .25s}details[open] summary:after{transform:rotate(45deg)}details p{padding:0 22px 20px;color:var(--mut)}
/* final */
.final{text-align:center}.final h2{margin-bottom:8px}.final p{margin-bottom:28px;color:color-mix(in srgb,var(--bg) 78%,transparent)}.final .btn{background:var(--bg);color:var(--ink)}
.ftr{padding:40px 0 120px;font-size:.95rem}.ftr .small{margin-top:10px;font-size:.9rem;color:var(--mut)}.ftr a{display:inline-block;padding:12px 4px;min-height:48px}
.bar{position:fixed;z-index:40;inset:auto 12px max(12px,env(safe-area-inset-bottom));padding:6px;border-radius:999px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow)}
@media(min-width:900px){.bar{inset-inline:auto 24px;bottom:24px}.ftr{padding-bottom:48px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ---- v2.1 editorial type layer (Awwwards-style: dramatic display, tight leading, calm body) ---- */
:root{--fs-body:clamp(1.0625rem,.98rem + .35vw,1.1875rem)}
body{font-size:var(--fs-body);line-height:1.75;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;letter-spacing:0}
h1,h2,h3,.disp{font-family:Disp,"Readex",system-ui,sans-serif;font-kerning:normal;text-wrap:balance}
h1{font-size:clamp(3rem,1.6rem + 7vw,7.5rem)!important;line-height:1.08!important;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(2.25rem,1.4rem + 4.2vw,5rem);line-height:1.12;font-weight:700;letter-spacing:-.005em;margin-bottom:.5em}
h3{font-size:clamp(1.25rem,1rem + .9vw,1.6rem);line-height:1.35;font-weight:600}
:lang(en) h1,[lang=en] h1{letter-spacing:-.035em;line-height:.98!important}
p,li,dd{text-wrap:pretty}.lead{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.7;max-width:40ch}
.eyebrow{font-size:.95rem;font-weight:600;letter-spacing:.02em;opacity:.85}
.counters b{font-family:Disp;font-size:clamp(3rem,2rem + 5vw,6.5rem);line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
@media(min-width:900px){.bar{display:none!important}}
/* v2.2 references: staircase titles (Tengile MalaMala SOTD Oct 2026), 2-colour discipline (Tigermilk), giant type closer (Good Fortune) */
.stair span{display:block}.stair .s2{padding-inline-start:clamp(1.5rem,12vw,9rem)}
.hero-copy .stair~*{margin-inline-start:clamp(0rem,6vw,4.5rem)}
.final h2{font-size:clamp(3rem,1rem + 9vw,8.5rem);line-height:1.05;letter-spacing:-.01em}
.ahero h1 em{padding-inline-start:clamp(1.5rem,10vw,8rem)}.ahero .lead,.ahero .btn,.ahero .ph-note{margin-inline-start:clamp(0rem,5vw,4rem)}
h1.long{font-size:clamp(2.4rem,1.2rem + 4.8vw,5.5rem)!important;line-height:1.12!important}
.counters dd,.counters dd b,.counters dt{color:inherit}.trust .counters,.counters{color:var(--ink)}.stats-a .counters{color:var(--bg)}
