/* Khairy Group. Coastal editorial: sea-washed light base, deep emerald, sunset gold.
   Layout uses logical properties throughout so Arabic (RTL) and English (LTR) share one stylesheet. */
:root{
  --shell:#F2F6F4; --foam:#FFFFFF; --ink:#0B2A29; --sea:#0D6B5F; --lagoon:#8FD9CB; --glass:#DDEBE6;
  --mute:#56706C; --sun:#E7B158; --line:rgba(11,42,41,.14);
  --garden:#E3EFE4; --water:#DCEEF0; --dusk:#0B2A29;
  --display:"Aref Ruqaa","Times New Roman",serif;
  --text:"Alexandria",system-ui,"Segoe UI",Tahoma,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.25rem,5vw,4.5rem);
  --gap:clamp(4.5rem,10vw,9.5rem);
  --top:76px;
  --bg:var(--shell);
  --k:1;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 1rem)}
body{margin:0;font-family:var(--text);font-weight:300;font-size:1.0625rem;line-height:1.85;color:var(--ink);background:var(--shell);-webkit-font-smoothing:antialiased}
html[lang=en] body{line-height:1.65}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.wrap{width:min(100% - 2*var(--pad),1320px);margin-inline:auto}
.skip{position:absolute;inset-inline-start:1rem;inset-block-start:-4rem;z-index:99;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:4px;text-decoration:none}
.skip:focus{inset-block-start:1rem}

/* ---------- type */
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance}
html[lang=ar] :is(h1,h2,h3){line-height:1.5}
html[lang=en] :is(h1,h2,h3){line-height:1.08;letter-spacing:-.012em}
h2{font-size:calc(var(--k)*clamp(2.2rem,4.8vw,4.2rem))}
:where(html[lang=en]) h2{font-size:calc(var(--k)*clamp(2rem,4.2vw,3.6rem))}
h3{font-size:calc(var(--k)*clamp(1.5rem,2.3vw,2rem))}
.lead{font-size:clamp(1.1rem,1.6vw,1.32rem);max-inline-size:44rem;color:var(--mute)}
.note{font-size:.9rem;color:var(--mute)}
.eyebrow{font-family:var(--text);font-weight:500;font-size:.95rem;color:var(--sea);display:flex;align-items:center;gap:.8rem;margin-block-end:1.1rem}
.eyebrow::before{content:"";flex:none;inline-size:2.2rem;block-size:1px;background:currentColor}
html[lang=en] .eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase}
.eyebrow--on{color:#fff}

/* ---------- buttons and links */
.btn{display:inline-flex;align-items:center;gap:.9rem;padding:.95rem 1.5rem;border-radius:999px;background:var(--sea);color:#fff;text-decoration:none;font-weight:400;font-size:1rem;line-height:1.2;border:1px solid var(--sea);transition:background .35s var(--ease),color .35s,border-color .35s}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.arw{flex:none;transition:transform .35s var(--ease)}
[dir=rtl] .arw{transform:scaleX(-1)}
.btn:hover .arw,.more:hover .arw,a:hover>.more .arw{transform:translateX(4px)}
[dir=rtl] .btn:hover .arw,[dir=rtl] .more:hover .arw,[dir=rtl] a:hover>.more .arw,[dir=rtl] a:hover .card__t .more .arw{transform:scaleX(-1) translateX(4px)}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:var(--lagoon);border-color:var(--lagoon);color:var(--ink)}
.btn--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--line{background:transparent;color:var(--sea);border-color:var(--sea)}
.btn--line:hover{background:var(--sea);color:#fff;border-color:var(--sea)}
.btn--sm{padding:.62rem 1.15rem;font-size:.92rem}
.btn--sm .arw{display:none}
.btn--lg{padding:1.1rem 1.8rem;font-size:1.05rem}
.btn--block{display:flex;justify-content:center}
.more{display:inline-flex;gap:.6rem;align-items:center;color:var(--sea);font-weight:500;text-decoration:none;border-block-end:1px solid currentColor;padding-block-end:.15rem;line-height:1.5}
.acts{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center}
.tag{display:inline-block;font-size:.72rem;font-weight:500;line-height:1.6;padding:.1rem .65rem;border-radius:99px;background:var(--sun);color:var(--ink);margin-inline:.5rem}

/* ---------- header */
.top{position:fixed;inset-block-start:0;inset-inline:0;z-index:40;background:rgba(242,246,244,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block-end:1px solid var(--line);transition:background .4s,color .4s,border-color .4s}
.top__in{display:flex;align-items:center;gap:2rem;block-size:var(--top)}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-size:calc(var(--k)*1.7rem);line-height:1;color:inherit;white-space:nowrap}
html[lang=en] .brand{font-size:calc(var(--k)*1.5rem)}
.mark{flex:none}
.nav{display:flex;gap:1.7rem;margin-inline-start:auto}
.nav a{text-decoration:none;font-size:.98rem;font-weight:400;position:relative;padding-block:.4rem;white-space:nowrap}
.nav a::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
[dir=rtl] .nav a::after{transform-origin:right}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.top__end{display:flex;align-items:center;gap:1.1rem}
.lang{font-size:.92rem;font-weight:400;text-decoration:none;padding:.5rem .2rem;border-block-end:1px solid transparent;white-space:nowrap}
.lang:hover{border-color:currentColor}
.burger{display:none;inline-size:44px;block-size:44px;position:relative}
.burger i{position:absolute;inset-inline:10px;block-size:1.5px;background:currentColor}
.burger i:first-child{inset-block-start:17px}
.burger i:last-child{inset-block-start:26px}
.js .top--over:not(.is-solid){background:transparent;border-color:transparent;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.js .top--over:not(.is-solid) .top__book{background:#fff;color:var(--ink);border-color:#fff}
@media (max-width:1120px){.nav{display:none}.burger{display:block}.top__in{gap:1rem}.top__end{margin-inline-start:auto}}
@media (max-width:560px){.top__book{display:none}.brand{font-size:calc(var(--k)*1.5rem)}}

.menu,.lb{border:0;padding:0;margin:0;inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none}
.menu{background:var(--ink);color:#fff}
.menu::backdrop,.lb::backdrop{background:rgba(7,31,30,.7)}
.menu__in{min-block-size:100%;display:flex;flex-direction:column;padding:5.5rem var(--pad) 2.5rem;gap:2rem}
.menu__x,.lb__x{position:absolute;inset-block-start:14px;inset-inline-end:14px;inline-size:48px;block-size:48px}
.menu__x i,.lb__x i{position:absolute;inset-inline:12px;inset-block-start:50%;block-size:1.5px;background:currentColor;transform:rotate(45deg)}
.menu__x i:last-child,.lb__x i:last-child{transform:rotate(-45deg)}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{font-family:var(--display);font-size:calc(var(--k)*clamp(1.9rem,7.5vw,2.8rem));line-height:1.5;text-decoration:none;padding-block:.3rem;border-block-end:1px solid rgba(255,255,255,.12)}
.menu__end{margin-block-start:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* ---------- hero */
.hero{position:relative;min-block-size:100svh;display:grid;align-items:end;color:#fff;background:var(--ink) var(--ph) center/cover no-repeat;overflow:clip;isolation:isolate}
@media (max-width:820px) and (orientation:portrait){.hero{background-image:var(--pv)}}
.hero__v,.phead__v{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity 1.4s}
.hero__v.is-on,.phead__v.is-on{opacity:1}
.hero__sc{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,42,41,.6) 0,rgba(11,42,41,.05) 26%,rgba(11,42,41,0) 42%,rgba(11,42,41,.86) 100%)}
.hero__c{padding-block:9rem clamp(4.5rem,10vh,7rem)}
.hero h1{font-size:calc(var(--k)*clamp(3.2rem,9vw,8.4rem));max-inline-size:13ch;text-shadow:0 2px 34px rgba(11,42,41,.4)}
html[lang=en] .hero h1{font-size:calc(var(--k)*clamp(3rem,8.2vw,7.4rem))}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.3rem);max-inline-size:34rem;margin-block:1.1rem 2.2rem;color:rgba(255,255,255,.93)}
html[lang=en] .hero__sub{margin-block-start:1.8rem}
.hero__now{position:absolute;inset-block-end:1.5rem;inset-inline-end:var(--pad);font-size:.8rem;display:flex;gap:.7rem;align-items:center;color:rgba(255,255,255,.82)}
.hero__now b{font-weight:500;color:#fff}
.hero__now span::after{content:"";display:inline-block;inline-size:1.6rem;block-size:1px;background:currentColor;margin-inline-start:.7rem;vertical-align:middle}
@media (max-width:760px){.hero__now{inset-inline:var(--pad) auto;inset-block-end:1rem}.hero__c{padding-block-end:4.2rem}}

/* ---------- sections */
.sec{padding-block:var(--gap)}
.sec--tight{padding-block:clamp(2.5rem,5vw,4.5rem)}
.sec--tint{background:var(--glass);--bg:var(--glass)}
.sec__h{margin-block-end:clamp(2rem,4vw,3.5rem);max-inline-size:54rem}
.sec__h .lead{margin-block-start:1rem}
.band{padding:0}
.honest{margin-block-start:1.8rem;padding:1rem 1.3rem;border-inline-start:2px solid var(--sun);background:var(--foam);max-inline-size:46rem;font-size:.98rem}

/* ---------- media: clip windows, panoramas, floor rail */
.win{inline-size:100%;max-inline-size:430px}
.win__f{position:relative;aspect-ratio:9/16;border-radius:5px;overflow:clip;background:var(--glass);box-shadow:0 34px 60px -34px rgba(11,42,41,.5)}
.win__f::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.35);border-radius:inherit;pointer-events:none}
.win video{inline-size:100%;block-size:100%;object-fit:cover}
.win figcaption,.pano figcaption{font-size:.86rem;color:var(--mute);padding-block-start:.75rem}
.win--s{max-inline-size:none;inline-size:clamp(190px,22vw,270px);flex:none}

.pano{position:relative}
.pano__s{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.pano__s::-webkit-scrollbar{display:none}
.pano img{inline-size:100%;block-size:auto}
.band .pano figcaption{inline-size:min(100% - 2*var(--pad),1320px);margin-inline:auto;padding-block-end:.4rem}
.pano--sea img,.pano--in img{border-radius:5px}
.pano__hint{display:none}
@media (max-width:820px){
  .pano--garden img{inline-size:auto;block-size:58svh;max-inline-size:none}
  .pano--sunset img{inline-size:auto;block-size:36svh;max-inline-size:none}
  .pano--in.pano--sunset img{inline-size:100%;block-size:auto}
  .pano__hint{display:inline-flex;position:absolute;inset-block-start:.8rem;inset-inline-start:var(--pad);background:rgba(11,42,41,.62);color:#fff;font-size:.78rem;line-height:1.5;padding:.3rem .75rem;border-radius:99px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
  .pano--in .pano__hint{display:none}
}

.rail{display:flex;flex-direction:column;position:relative}
.rail li{display:flex;align-items:center;gap:.6rem;block-size:2.5rem;font-size:.8rem;color:var(--mute);font-weight:500;white-space:nowrap}
.rail li::before{content:"";flex:none;inline-size:1.3rem;block-size:1px;background:currentColor;opacity:.5}
.rail li.is-on{color:var(--ink)}
.rail li.is-on::before{inline-size:2.3rem;block-size:2px;background:var(--sun);opacity:1}
.rail--mini{display:inline-flex;gap:3px}
.rail--mini li{block-size:auto;gap:0}
.rail--mini li span{display:none}
.rail--mini li::before{inline-size:18px;block-size:2px;opacity:.25}
.rail--mini li.is-on::before{inline-size:18px}

/* ---------- home: the view */
.view__g{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.view__t p:not(.eyebrow){margin-block-start:1rem;color:var(--mute)}
@media (max-width:900px){.view__g{grid-template-columns:1fr}}

/* ---------- home: choose your floor (signature) */
.floors{background:var(--garden);color:var(--ink);transition:background .9s var(--ease),color .9s var(--ease)}
.floors__g{display:grid;gap:2.5rem;padding-block:var(--gap)}
.rail--big{display:none}
.floor{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.floor + .floor{margin-block-start:clamp(3rem,7vw,5rem)}
.floor__lvl{font-weight:500;color:var(--sea);margin-block-end:.5rem;font-size:.95rem;transition:color .9s}
.floor__t h3{font-size:calc(var(--k)*clamp(2rem,4.6vw,4rem))}
.floor__t>p:not(.floor__lvl):not(.floor__links){margin-block-start:1rem;max-inline-size:30rem;color:var(--mute);transition:color .9s}
.floor__links{display:flex;gap:1.6rem;flex-wrap:wrap;margin-block-start:1.6rem}
@media (max-width:760px){.floor{grid-template-columns:1fr}.floor .win{max-inline-size:300px}}
@media (min-width:960px) and (min-height:620px) and (prefers-reduced-motion:no-preference){
  .js .floors{block-size:330vh}
  .js .floors[data-level="1"]{background:var(--water)}
  .js .floors[data-level="2"]{background:var(--dusk);color:#fff}
  .js .floors[data-level="2"] :is(.eyebrow,.floor__lvl,.more){color:var(--lagoon)}
  .js .floors[data-level="2"] .floor__t>p:not(.floor__lvl):not(.floor__links){color:rgba(255,255,255,.8)}
  .js .floors[data-level="2"] .rail li{color:rgba(255,255,255,.55)}
  .js .floors[data-level="2"] .rail li.is-on{color:#fff}
  .js .floors__stage{position:sticky;inset-block-start:0;block-size:100vh}
  .js .floors__g{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(2rem,4vw,4.5rem);row-gap:1.6rem;padding-block:calc(var(--top) + 1.6rem) 2.6rem;block-size:100%}
  .js .floors__head{grid-column:1/-1}
  .js .floors__head .eyebrow{margin-block-end:.4rem}
  .js .rail--big{display:flex;justify-content:space-between;padding-block:1.2rem;border-inline-start:1px solid currentColor;border-color:color-mix(in srgb,currentColor 25%,transparent)}
  .js .rail--big li{block-size:22px;line-height:22px;font-size:.86rem}
  .js .rail--big li::before{inline-size:1.6rem}
  .js .rail--big li.is-on::before{inline-size:1.6rem;block-size:1px;background:currentColor}
  .js .rail__dot{position:absolute;inset-inline-start:-6px;inline-size:11px;block-size:11px;border-radius:50%;background:var(--sun);inset-block-end:calc(1.2rem + 5.5px + var(--p,0)*(100% - 2.4rem - 22px));transition:inset-block-end .9s var(--ease);box-shadow:0 0 0 6px color-mix(in srgb,var(--sun) 25%,transparent)}
  .js .floors__list{position:relative;min-block-size:0}
  .js .floor{position:absolute;inset:0;margin:0;grid-template-columns:auto minmax(0,1fr);opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
  .js .floors{--wh:min(calc(100vh - 20rem),680px)}
  .js .floor{align-items:center}
  .js .floor .win{inline-size:calc(var(--wh)*.5625);max-inline-size:none}
  .js .floor .win__f{block-size:var(--wh)}
  .js .floor.is-on{opacity:1;visibility:visible;transition:opacity .7s var(--ease)}
  .js .floor__t{transform:translateY(20px);transition:transform 1s var(--ease)}
  .js .floor.is-on .floor__t{transform:none}
}

/* ---------- apartment cards (raised by floor on wide screens) */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.8rem);align-items:end}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:block;text-decoration:none;color:inherit}
.card__m{aspect-ratio:9/14;border-radius:5px;overflow:clip;background:var(--glass)}
.card__m video{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .card__m video{transform:scale(1.04)}
.card__t{padding-block-start:1.1rem}
.card__lvl{display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:var(--mute);font-weight:500}
.card h3{font-size:calc(var(--k)*clamp(1.7rem,2.4vw,2.2rem));margin-block:.25rem .1rem}
.card__t>p:not(.card__lvl){color:var(--mute);font-size:.98rem}
.card .more{margin-block-start:.9rem;font-size:.92rem}
@media (min-width:1000px){.card--l1{margin-block-end:3.5rem}.card--l2{margin-block-end:7rem}}
@media (max-width:999px){.cards,.cards--3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}}
@media (max-width:380px){.card .more{font-size:.85rem}}

/* ---------- around + coast strip */
.around__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,3rem);margin-block-end:clamp(3rem,6vw,5rem)}
.around__c{text-decoration:none;color:inherit;display:block}
.around__m{aspect-ratio:16/9;overflow:clip;border-radius:5px;margin-block-end:1.2rem;background:var(--glass)}
.around__m img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 38%;transition:transform 1.4s var(--ease)}
.around__c:hover img{transform:scale(1.04)}
.around__c>p{color:var(--mute);margin-block:.4rem 1rem;max-inline-size:34rem}
@media (max-width:700px){.around__g{grid-template-columns:1fr}}

.coast{display:flex;align-items:flex-start;gap:1rem;padding-block:1rem}
.coast__e{font-size:.78rem;color:var(--mute);font-weight:500;white-space:nowrap;line-height:11px;padding-block-start:0}
.coast ol{flex:1;display:flex;position:relative}
.coast ol::before{content:"";position:absolute;inset-inline:0;inset-block-start:5px;block-size:1px;background:var(--ink);opacity:.35}
.coast li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;flex:1;text-align:center;font-size:.88rem;line-height:1.5}
.coast li i{flex:none;inline-size:11px;block-size:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink);position:relative;z-index:1}
.coast li.is-here i{background:var(--sun);border-color:var(--sun);box-shadow:0 0 0 6px color-mix(in srgb,var(--sun) 28%,transparent)}
.coast li.is-here span{font-weight:500}
.coast li b{display:block;font-family:var(--display);font-weight:400;font-size:calc(var(--k)*1.3rem);color:var(--sea)}
.coast + .note{margin-block-start:.6rem}
@media (max-width:760px){
  .coast{flex-direction:column;gap:.7rem}
  html[lang=ar] .coast{direction:rtl}
  .coast ol{flex-direction:column;gap:1.05rem;align-self:stretch}
  .coast ol::before{inset-inline:5px auto;inset-block:6px;inline-size:1px;block-size:auto}
  .coast li{flex-direction:row;text-align:start;align-items:center}
  .coast__e{line-height:1.5}
}

/* ---------- call to action, footer, phone dock */
.cta{background:var(--ink);color:#fff;padding-block:clamp(4rem,9vw,8rem);position:relative}
.cta::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;background:linear-gradient(90deg,var(--sun),var(--lagoon))}
.cta__g{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:end}
.cta__a{display:flex;flex-wrap:wrap;gap:.8rem}
.cta h2{font-size:calc(var(--k)*clamp(2.6rem,6vw,5.4rem))}
.cta p{color:rgba(255,255,255,.82);max-inline-size:36rem;margin-block-start:1rem}
@media (max-width:800px){.cta__g{grid-template-columns:1fr}}

.foot{background:#071F1E;color:rgba(255,255,255,.78);padding-block:clamp(3rem,6vw,5rem) 2rem;font-size:.95rem}
.foot a{text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.5rem}
.foot__brand .brand{color:#fff;margin-block-end:1rem}
.foot__brand p{max-inline-size:22rem;margin-block-end:.8rem}
.foot__ct{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.foot__ct a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot__h{color:#fff;font-weight:500;margin-block-end:.8rem}
.foot__col li{margin-block:.35rem}
.foot__base{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;border-block-start:1px solid rgba(255,255,255,.12);margin-block-start:2.5rem;padding-block-start:1.4rem;font-size:.82rem;color:rgba(255,255,255,.62)}
@media (max-width:860px){.foot__top{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}

.dock{display:none}
@media (max-width:760px){
  .dock{display:flex;gap:.6rem;position:fixed;inset-inline:0;inset-block-end:0;z-index:30;padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));background:rgba(242,246,244,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block-start:1px solid var(--line);transition:transform .5s var(--ease)}
  .js .dock:not(.is-on){transform:translateY(110%)}
  .foot{padding-block-end:6.5rem}
}

/* ---------- inner page head */
.phead{padding-block:calc(var(--top) + clamp(3rem,7vw,6rem)) clamp(2rem,4vw,3.5rem)}
.phead h1{font-size:calc(var(--k)*clamp(2.6rem,6.4vw,5.6rem));max-inline-size:17ch}
html[lang=en] .phead h1{font-size:calc(var(--k)*clamp(2.4rem,5.6vw,4.8rem))}
.phead .lead{margin-block-start:1.2rem}
.crumbs{font-size:.84rem;color:var(--mute);display:flex;gap:.5rem;flex-wrap:wrap;margin-block-end:1.6rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-style:normal;opacity:.5}
.phead--film{position:relative;color:#fff;min-block-size:74svh;display:grid;align-items:end;isolation:isolate;overflow:clip;background:var(--ink) var(--ph) center/cover no-repeat}
.phead--film :is(.lead,.crumbs){color:rgba(255,255,255,.9)}

/* ---------- apartment page */
.unit{position:relative;padding-block:calc(var(--top) + clamp(2rem,5vw,4rem)) clamp(3rem,6vw,5rem);overflow:clip}
.unit__no{position:absolute;inset-block-start:calc(var(--top) - .06em);right:-.03em;direction:ltr;font-family:var(--text);font-weight:200;font-size:clamp(9rem,30vw,27rem);line-height:.82;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(13,107,95,.24);pointer-events:none;user-select:none}
[dir=rtl] .unit__no{right:auto;left:-.03em}
.unit__g{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.unit__m{display:flex;gap:1.2rem;align-items:flex-end}
.unit__m .win{inline-size:clamp(260px,29vw,390px)}
.unit h1{font-size:calc(var(--k)*clamp(2.6rem,5.6vw,5rem))}
.unit__k{display:block;font-family:var(--text);font-weight:500;font-size:1rem;color:var(--sea);margin-block-end:.4rem;letter-spacing:0;line-height:1.5}
.unit .lead{margin-block:1.2rem 1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:2rem}
.chips li{font-size:.88rem;line-height:1.5;padding:.35rem .9rem;border:1px solid var(--line);border-radius:99px;background:var(--foam)}
@media (max-width:860px){.unit__g{grid-template-columns:1fr}.unit__m .win{inline-size:100%;max-inline-size:none}.unit__m .win__f{aspect-ratio:1/1}.unit__no{font-size:clamp(8rem,44vw,16rem)}}

.facts{background:var(--foam)}
.facts__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.facts ul{columns:2;column-gap:3rem}
.facts li,.ticks li{display:flex;gap:.8rem;align-items:baseline}
.facts li{break-inside:avoid;padding-block:.85rem;border-block-end:1px solid var(--line)}
.facts li::before,.ticks li::before{content:"";flex:none;inline-size:6px;block-size:6px;border-radius:50%;background:var(--sun);transform:translateY(-3px)}
.facts .note{margin-block-start:1.2rem;max-inline-size:26rem}
@media (max-width:860px){.facts__g{grid-template-columns:1fr}}
@media (max-width:560px){.facts ul{columns:1}}

.story__r,.duo__r{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.story__r + .story__r,.duo__r + .duo__r{margin-block-start:clamp(3rem,8vw,7rem)}
.story__r:nth-child(even),.duo__r:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.story__r:nth-child(even) .win,.duo__r:nth-child(even) .win{order:2}
.story__r h3{font-size:calc(var(--k)*clamp(2rem,4vw,3.4rem))}
.story__r p{color:var(--mute);margin-block-start:1rem;max-inline-size:30rem}
@media (max-width:760px){
  .story__r,.duo__r,.story__r:nth-child(even),.duo__r:nth-child(even){grid-template-columns:1fr}
  .story__r:nth-child(even) .win,.duo__r:nth-child(even) .win{order:0}
  .story__r .win,.duo__r .win{max-inline-size:300px}
}
.walk .wrap{margin-block-end:0}
.walk__s{overflow-x:auto;padding-inline:var(--pad);padding-block-end:1.2rem;scrollbar-width:thin;scrollbar-color:var(--sea) transparent}
.walk__in{display:flex;gap:1.2rem;inline-size:max-content;margin-inline:auto}

/* ---------- gallery + lightbox */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:.7rem}
.ph{display:block;aspect-ratio:4/5;overflow:clip;border-radius:4px;background:var(--glass);cursor:zoom-in}
.ph img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ph:hover img{transform:scale(1.05)}
.ph[hidden]{display:none}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chipsbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:1.6rem}
.chip{padding:.5rem 1.1rem;line-height:1.5;border:1px solid var(--line);border-radius:99px;background:var(--foam);font-size:.92rem;transition:background .3s,color .3s}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gal__views{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:end}
@media (max-width:820px){.gal__views{grid-template-columns:1fr}}
.lb{background:rgba(7,31,30,.97);color:#fff}
.lb[open]{display:grid;place-items:center}
.lb figure{display:grid;justify-items:center;gap:.8rem;max-inline-size:92vw}
.lb img{max-block-size:84svh;max-inline-size:min(92vw,956px);inline-size:auto;block-size:auto;border-radius:4px}
.lb figcaption{font-size:.9rem;color:rgba(255,255,255,.8);text-align:center}
.lb__n{position:absolute;inset-block-start:50%;inline-size:52px;block-size:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;margin-block-start:-26px;background:rgba(7,31,30,.5)}
.lb__n--p{inset-inline-start:14px}
.lb__n--n{inset-inline-end:14px}
[dir=ltr] .lb__n--p .arw{transform:scaleX(-1)}
[dir=rtl] .lb__n--p .arw{transform:none}

/* ---------- apartments index, collections */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--foam)}
table{border-collapse:collapse;inline-size:100%;min-inline-size:560px}
th,td{text-align:start;padding:1rem 1.2rem;border-block-end:1px solid var(--line);font-weight:300}
thead th{font-size:.82rem;font-weight:500;color:var(--mute)}
tbody th{font-family:var(--display);font-size:calc(var(--k)*1.4rem);font-weight:400;line-height:1.4}
tbody th a{text-decoration:none;color:var(--sea)}
tbody th a:hover{text-decoration:underline}
tbody tr:last-child>*{border:0}
.by{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.by__c{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:1.5rem;align-items:center;background:var(--foam);border-radius:6px;overflow:clip;text-decoration:none;color:inherit;padding-inline-end:1.5rem}
.by__c img{inline-size:100%;block-size:100%;aspect-ratio:4/5;object-fit:cover}
.by__c h3{font-size:calc(var(--k)*clamp(1.5rem,2.2vw,2rem))}
.by__c p{color:var(--mute);font-size:.95rem;margin-block:.4rem .9rem}
.by__c>div{padding-block:1.2rem}
@media (max-width:900px){.by{grid-template-columns:1fr}}
@media (max-width:480px){.by__c{grid-template-columns:110px minmax(0,1fr);gap:1rem;padding-inline-end:1rem}}
.duo__r h2{font-size:calc(var(--k)*clamp(2.2rem,4.4vw,3.8rem))}
.duo__tag{font-family:var(--display);font-size:calc(var(--k)*1.5rem);line-height:1.5;color:var(--sea);margin-block:.1rem .9rem}
.duo__r>div>p:not(.eyebrow):not(.duo__tag){color:var(--mute);max-inline-size:34rem}
.ticks{margin-block:1.4rem 1.8rem;display:grid;gap:.5rem}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem)}
.trio>div{border-block-start:1px solid var(--ink);padding-block-start:1.2rem}
.trio p{color:var(--mute);margin-block-start:.5rem}
@media (max-width:760px){.trio{grid-template-columns:1fr}}

/* ---------- guides */
.guide__g{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(2rem,7vw,7rem);align-items:start}
.guide__m{position:sticky;inset-block-start:calc(var(--top) + 1.5rem)}
.chap{padding-block:1.8rem;border-block-start:1px solid var(--line);display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.4rem 2.5rem}
.chap:first-child{border-block-start:0;padding-block-start:0}
.chap h2{font-size:calc(var(--k)*clamp(1.6rem,2.4vw,2.1rem));grid-row:1/span 6}
html[lang=en] .chap h2{font-size:calc(var(--k)*clamp(1.5rem,2.2vw,1.9rem))}
.chap p{grid-column:2;max-inline-size:40rem}
.srcs{margin-block-start:2.5rem}
.srcs li{margin-block:.3rem;font-size:.9rem}
.srcs a{color:var(--sea)}
@media (max-width:1040px){.chap{grid-template-columns:1fr}.chap h2{grid-row:auto}.chap p{grid-column:1}}
@media (max-width:820px){.guide__g{grid-template-columns:1fr}.guide__m{position:static}.guide__m .win{max-inline-size:300px}}
.stop{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.stop + .stop{margin-block-start:clamp(3rem,7vw,6rem)}
.stop:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.stop:nth-child(even) .lv{order:2}
.lv{aspect-ratio:16/9;border-radius:5px;overflow:clip;background:var(--ink)}
.lv video{inline-size:100%;block-size:100%;object-fit:cover}
.stop h2{font-size:calc(var(--k)*clamp(1.9rem,3.6vw,3.2rem))}
html[lang=en] .stop h2{font-size:calc(var(--k)*clamp(1.8rem,3.2vw,2.8rem))}
.stop p{color:var(--mute);margin-block-start:.9rem;max-inline-size:28rem}
.stops .note{margin-block-start:clamp(2.5rem,5vw,4rem)}
.credit{font-size:.82rem;color:var(--mute);margin-block-start:.5rem}
@media (max-width:760px){.stop,.stop:nth-child(even){grid-template-columns:1fr}.stop:nth-child(even) .lv{order:0}}

/* ---------- booking, getting here, questions */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);counter-reset:s}
.steps li{counter-increment:s;border-block-start:1px solid var(--ink);padding-block-start:1.2rem}
.steps li::before{content:counter(s);font-family:var(--text);font-weight:200;font-size:3rem;line-height:1;color:var(--sea);display:block;margin-block-end:.8rem}
.steps p{color:var(--mute);margin-block-start:.4rem}
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-block-start:clamp(2.5rem,5vw,4rem)}
.pick{text-decoration:none;color:inherit;display:block}
.pick img{aspect-ratio:4/5;object-fit:cover;inline-size:100%;border-radius:4px;margin-block-end:.7rem}
.pick span{display:block;font-family:var(--display);font-size:calc(var(--k)*1.4rem);line-height:1.4}
.pick small{color:var(--mute);font-size:.86rem}
.book__g{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.book__g h2{font-size:calc(var(--k)*clamp(1.8rem,3vw,2.6rem));margin-block-end:1.2rem}
.book__c{background:var(--ink);color:#fff;padding:clamp(1.6rem,4vw,3rem);border-radius:8px}
@media (max-width:900px){.book__g{grid-template-columns:1fr}.book__s{position:static}}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.route{background:var(--foam);border-radius:6px;padding:clamp(1.3rem,3vw,2.2rem)}
.route p{color:var(--mute);margin-block-start:.5rem}
@media (max-width:700px){.routes{grid-template-columns:1fr}}
.faq__g{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:0 3rem;padding-block:2rem;border-block-start:1px solid var(--ink)}
.faq__g h2{font-size:calc(var(--k)*clamp(1.6rem,2.4vw,2.1rem));grid-row:1/span 20;overflow-wrap:break-word}
.qa{grid-column:2;border-block-end:1px solid var(--line)}
.qa:last-child{border-block-end:0}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding-block:1.1rem;font-weight:400;font-size:1.08rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;inline-size:14px;block-size:14px;position:relative}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;inset-inline:0;inset-block-start:6.5px;block-size:1.5px;background:var(--sea);transition:transform .35s var(--ease),opacity .35s}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0);opacity:0}
.qa>div{padding-block-end:1.3rem;color:var(--mute);max-inline-size:44rem}
@media (max-width:820px){.faq__g{grid-template-columns:1fr}.faq__g h2{grid-row:auto;margin-block-end:.4rem}.qa{grid-column:1}}

.nf{min-block-size:100svh;display:grid;align-items:center;background:var(--ink);color:#fff}
.nf h1{font-size:calc(var(--k)*clamp(2.6rem,7vw,5rem));margin-block-end:.6rem}
.nf .lead{color:rgba(255,255,255,.8);margin-block-end:2rem}
.nf .eyebrow{color:var(--lagoon)}
.nf .btn--line{color:#fff;border-color:rgba(255,255,255,.6)}

/* ---------- motion: quiet reveals, off when the visitor asks for less motion */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  .js .cards .rv:nth-child(2){transition-delay:.08s}
  .js .cards .rv:nth-child(3){transition-delay:.16s}
  .js .cards .rv:nth-child(4){transition-delay:.24s}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}html{scroll-behavior:auto}}

/* ---------- Arabic display font safety net: set by the head script when an engine misplaces the font's dots */
html.no-dots{--k:.78;--display:var(--text)}
html.no-dots :is(h1,h2,h3,.brand,.menu__nav a,.duo__tag,.pick span,tbody th,.coast li b){font-weight:300}
html.no-dots :is(h1,h2,h3){line-height:1.4}
html.no-dots .hero h1{font-weight:200}
html.no-dots .brand{font-weight:500}

/* ---------- availability: line, board, 12-month strip */
.avail{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;font-size:.95rem;font-weight:400;line-height:1.5;color:var(--ink)}
/* the dot belongs to the text so the two never wrap apart */
.avail i{display:none}
.avail span::before{content:"";display:inline-block;inline-size:9px;block-size:9px;border-radius:50%;background:var(--sun);margin-inline-end:.55rem}
.avail.is-now span::before{background:var(--sea)}
.avail b{font-weight:400;font-size:.82rem;padding:.12rem .7rem;border-radius:99px;background:var(--glass);color:var(--sea)}
.avail--s{font-size:.84rem;color:var(--mute);font-style:normal;margin-block-start:.5rem}
span.avail,em.avail{display:flex}
.unit .avail{margin-block-end:1.6rem}
.dock .btn--block{flex:1}
.dock__wa{flex:none;padding-inline:1.1rem}
.dock__wa .arw{display:none}
.tlkey{display:flex;gap:1.6rem;font-size:.84rem;color:var(--mute);margin-block-end:1rem}
.tlkey span{display:inline-flex;align-items:center;gap:.5rem}
.tlkey span::before{content:"";inline-size:26px;block-size:10px;border-radius:99px}
.tlkey__a::before{background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 6px);border:1px solid var(--ink)}
.tlkey__b::before{background:var(--lagoon)}
.avs{display:grid;gap:.8rem;margin-block-end:1.2rem}
.av{display:grid;grid-template-columns:84px minmax(0,17rem) minmax(0,1fr) auto;gap:1.2rem 1.6rem;align-items:center;background:var(--foam);border-radius:8px;padding:.9rem 1.2rem .9rem .9rem}
[dir=rtl] .av{padding:.9rem .9rem .9rem 1.2rem}
.av__m{display:block;aspect-ratio:1/1;border-radius:5px;overflow:clip;background:var(--glass)}
.av__m img{inline-size:100%;block-size:100%;object-fit:cover}
.av h3{font-size:calc(var(--k)*1.7rem)}
.av h3 a{text-decoration:none}
.av h3 a:hover{color:var(--sea)}
.av__t>p:not(.avail){font-size:.86rem;color:var(--mute);margin-block-end:.3rem}
.tl{min-inline-size:0}
.tl__bar{position:relative;block-size:12px;border-radius:99px;background:var(--lagoon);overflow:clip}
.tl__bar i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--glass) repeating-linear-gradient(135deg,rgba(11,42,41,.75) 0 2px,transparent 2px 6px);border-inline-end:2px solid var(--ink)}
.tl__m{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-block-start:.4rem;font-size:.7rem;color:var(--mute);line-height:1.4}
.tl__m li{white-space:nowrap;overflow:hidden}
.av__b .arw{display:none}
@media (max-width:1100px){
  .av{grid-template-columns:84px minmax(0,1fr) auto}
  .tl{grid-column:1/-1;grid-row:2}
}
@media (max-width:620px){
  .av{grid-template-columns:64px minmax(0,1fr);padding:.8rem}
  [dir=rtl] .av{padding:.8rem}
  .av__b{grid-column:1/-1;justify-content:center}
  .tl__m li:nth-child(even){visibility:hidden}
  html[lang=ar] .tl__m{font-size:.64rem}
}

/* ---------- booking request form */
.book__f h2{font-size:calc(var(--k)*clamp(2rem,3.4vw,3rem));margin-block-end:1.4rem}
.book__s{position:sticky;inset-block-start:calc(var(--top) + 1.5rem);display:grid;gap:1.6rem}
.book__s h3{font-size:calc(var(--k)*clamp(1.5rem,2vw,1.8rem));margin-block-end:.8rem}
.book__s .ticks{margin-block:0}
.book__c p{color:rgba(255,255,255,.82);margin-block-end:1.2rem}
.bk__tel{direction:ltr}
.bk__tel .arw{display:none}
.bk{display:grid;gap:1.3rem;background:var(--foam);border-radius:10px;padding:clamp(1.2rem,3.2vw,2.4rem);box-shadow:0 30px 60px -44px rgba(11,42,41,.45)}
.bk fieldset{border:0;padding:0;margin:0;min-inline-size:0}
.bk legend,.bk label>span{display:block;font-size:.86rem;font-weight:500;color:var(--mute);margin-block-end:.45rem;padding:0}
.bk__apts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.bk__apts legend{grid-column:1/-1}
.bk__apt{position:relative;display:block;cursor:pointer}
.bk__apt input{position:absolute;opacity:0;inset:0;inline-size:100%;block-size:100%;margin:0;cursor:pointer}
.bk label.bk__apt>span{display:block;block-size:100%;margin:0;padding:.9rem 1.1rem;font-size:1rem;font-weight:300;color:var(--ink);border:1px solid var(--line);border-radius:8px;transition:border-color .25s,background .25s,box-shadow .25s}
.bk__apt>span>b{display:block;font-family:var(--display);font-weight:400;font-size:calc(var(--k)*1.5rem);line-height:1.4}
.bk__apt small{display:block;font-size:.84rem;color:var(--mute)}
.bk__apt:hover>span{border-color:var(--sea)}
.bk__apt input:checked+span{border-color:var(--sea);background:#EAF4F1;box-shadow:inset 0 0 0 1px var(--sea)}
.bk__apt input:focus-visible+span{outline:2px solid var(--sun);outline-offset:3px}
.bk__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.bk__row--3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.6fr)}
.bk label{display:block;min-inline-size:0}
.bk input:not([type=radio]),.bk textarea{display:block;inline-size:100%;min-inline-size:0;font:inherit;font-size:1rem;color:var(--ink);background:var(--shell);border:1px solid var(--line);border-radius:6px;padding:.78rem .9rem;min-block-size:3rem;-webkit-appearance:none;appearance:none}
.bk input[dir=ltr]{text-align:start}
[dir=rtl] .bk input[dir=ltr]{text-align:end}
.bk textarea{resize:vertical;line-height:1.6}
.bk input:focus,.bk textarea:focus{outline:2px solid var(--sea);outline-offset:1px;border-color:var(--sea)}
.bk__sum{font-size:.95rem;color:var(--sea);font-weight:400;min-block-size:1.6em}
.bk__sum:empty{display:none}
.bk__trap{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bk__err{padding:.75rem 1rem;border-radius:6px;background:#FBEDE4;color:#7A2E0E;border-inline-start:3px solid #C2541F;font-weight:400}
.bk__fail{padding:1rem 1.1rem;border-radius:6px;background:var(--glass)}
.bk__fail p{margin-block-end:.8rem}
.bk button[disabled]{opacity:.6;cursor:progress}
.bk .btn--line .arw{display:none}
.bk__done{background:var(--foam);border-radius:10px;padding:clamp(1.4rem,3.2vw,2.4rem);border-block-start:3px solid var(--sea)}
.bk__done h3{font-size:calc(var(--k)*clamp(1.8rem,3vw,2.4rem));margin-block-end:.6rem}
.bk__recap{margin-block:1rem 1.4rem;padding:1rem 1.1rem;background:var(--shell);border-radius:6px;white-space:pre-line}
@media (max-width:620px){.bk__apts,.bk__row,.bk__row--3{grid-template-columns:1fr}.bk__row--3 label:last-child{max-inline-size:10rem}}