/* Dar Lifta brand layer — shared by home, units and partners (tools/brand.py puts it on the pages).
   Same look as the business card: olive, gold, cream, a quiet pattern of small keys, Belleza + Aref Ruqaa. */
:root{--olive:#2B3720;--olive-2:#3B4B2D;--tone:#3B4B2D;--cream:#F1E8D2;--cream-2:#e6dcc1;--gold:#C9A14A;--gold-2:#d9bd80;--moss:#5d6438;
  --ease:cubic-bezier(.2,.8,.2,1)}

/* the key pattern (the card's "paper") — drifts very slowly */
.kp{position:relative;isolation:isolate}
.kp:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/brand/pattern.svg) 0 0/66px auto;opacity:.9}
@media (prefers-reduced-motion:no-preference){.kp:before{animation:dl-drift 90s linear infinite}}
@keyframes dl-drift{to{background-position:66px 87.54px}}

/* reveal on scroll (brand.js adds .rv, then .in) */
.dl-js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.dl-js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.dl-js .rv{opacity:1;transform:none;transition:none}}

/* gold shine that passes over a button now and then */
.shine{position:relative;overflow:hidden}
.shine:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-18deg)}
@media (prefers-reduced-motion:no-preference){.shine:after{animation:dl-shine 5.5s ease-in-out 2.4s infinite}}
@keyframes dl-shine{0%{left:-60%}18%,100%{left:130%}}

/* cards that lean toward the finger / mouse (brand.js) */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.tilt.on{transition:transform .08s linear}
.tilt .gloss{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),rgba(255,255,255,0) 55%)}
.tilt.on .gloss{opacity:1}

/* the key that drops in and swings until it settles */
@media (prefers-reduced-motion:no-preference){
  .dl-drop{animation:dl-drop 2.2s var(--ease) both;transform-origin:50% 8%}
}
@keyframes dl-drop{
  0%{opacity:0;transform:translateY(-70vh) rotate(-28deg)}
  35%{opacity:1;transform:translateY(0) rotate(16deg)}
  55%{transform:rotate(-9deg)}
  72%{transform:rotate(5deg)}
  86%{transform:rotate(-2deg)}
  100%{opacity:1;transform:none}}

/* words that rise in one after another (data-in="1..6") */
@media (prefers-reduced-motion:no-preference){
  .dl-js [data-in]{opacity:0;animation:dl-up 1s var(--ease) both}
  .dl-js [data-in="1"]{animation-delay:.9s}.dl-js [data-in="2"]{animation-delay:1.1s}.dl-js [data-in="3"]{animation-delay:1.3s}
  .dl-js [data-in="4"]{animation-delay:1.5s}.dl-js [data-in="5"]{animation-delay:1.7s}.dl-js [data-in="6"]{animation-delay:2.1s}
}
@keyframes dl-up{from{opacity:0;transform:translateY(16px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* letters of the English name spread out as they arrive */
@media (prefers-reduced-motion:no-preference){.dl-js .spread{animation:dl-spread 1.8s var(--ease) 1s both}}
@keyframes dl-spread{from{letter-spacing:.9em;opacity:0}to{opacity:1}}

/* "scroll" hint at the bottom of a hero */
.cue{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:22px;height:36px;margin-left:-11px;border:1.5px solid rgba(201,161,74,.6);border-radius:12px}
.cue:after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold)}
@media (prefers-reduced-motion:no-preference){.cue:after{animation:dl-cue 1.8s ease-in-out infinite}}
@keyframes dl-cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* the nav bar sits on the key pattern itself (no olive strip); it fills in once you scroll past the top */
[data-dl] .dln-sp{display:none}
[data-dl] .dln{transition:transform .3s ease,background .35s ease,-webkit-backdrop-filter .35s,backdrop-filter .35s}
[data-dl] .dln.dl-solid{background:rgba(43,55,32,.88)}

/* ───── units page ───── */
[data-dl=units] header{position:relative;isolation:isolate;overflow:hidden;padding:calc(56px + 40px + env(safe-area-inset-top,0px)) 16px 46px}
[data-dl=units] header:before{content:"";position:absolute;inset:0;z-index:-1;background:url(/brand/pattern.svg) 0 0/66px auto}
[data-dl=units] header:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 70% at 50% 50%,var(--olive) 30%,rgba(43,55,32,0) 100%)}
@media (prefers-reduced-motion:no-preference){[data-dl=units] header:before{animation:dl-drift 90s linear infinite}}
[data-dl=units] .home i{background:var(--olive) url(/brand/key-gold.svg) center/auto 70% no-repeat;border:1px solid rgba(201,161,74,.5)}
@media (prefers-reduced-motion:no-preference){[data-dl=units] .home i{animation:dl-drop 2.2s var(--ease) both;transform-origin:50% 0}}
[data-dl=units][lang=en] h1,[data-dl=units] [data-s=lt] h1{font-family:'Belleza',sans-serif;font-weight:400;letter-spacing:.08em}
[data-dl=units] .area{font-family:'Belleza','Tajawal',sans-serif;font-weight:400;font-size:20px;letter-spacing:.04em;color:var(--olive)}
[data-dl=units] [data-s=ar] .area{font-family:'Aref Ruqaa',serif;font-weight:700;font-size:24px;letter-spacing:0}
[data-dl=units] .card{transition:box-shadow .5s var(--ease)}
[data-dl=units] .card img{transition:transform 1.2s var(--ease)}
@media (hover:hover){[data-dl=units] .card:hover img{transform:scale(1.04)}[data-dl=units] .card:hover{box-shadow:0 18px 40px rgba(43,55,32,.32)}}
[data-dl=units] .contact{position:relative;isolation:isolate}
[data-dl=units] .contact:before{content:"";position:absolute;inset:0;z-index:-1;background:url(/brand/pattern.svg) 0 0/66px auto;opacity:.7}
[data-dl=units] .contact p{font-family:'Belleza','Tajawal',sans-serif;font-weight:400;font-size:22px;letter-spacing:.03em}
[data-dl=units] [data-s=ar] .contact p,[data-dl=units] [data-s=zh] .contact p{font-family:inherit;font-weight:700}
[data-dl=units] .citem.main{position:relative;overflow:hidden}

/* ───── partners page ───── */
[data-dl=owners] .hero-in{position:relative}
[data-dl=owners][lang] [lang=en] h1,[data-dl=owners] [lang=en] h2,[data-dl=owners] [lang=en] .stats b{font-family:'Belleza',sans-serif!important;font-weight:400!important;letter-spacing:.02em}
[data-dl=owners] .rec,[data-dl=owners] .contact{position:relative;isolation:isolate}
[data-dl=owners] .rec:before,[data-dl=owners] .contact:before{content:"";position:absolute;inset:0;z-index:-1;background:url(/brand/pattern.svg) 0 0/66px auto;opacity:.7}
@media (prefers-reduced-motion:no-preference){[data-dl=owners] .rec:before,[data-dl=owners] .contact:before{animation:dl-drift 90s linear infinite}}
[data-dl=owners] .stats b{font-size:34px}
[data-dl=owners] .list li{transition:background .4s var(--ease)}
[data-dl=owners] .hero .btn{position:relative;overflow:hidden}
[data-dl=owners] .pkey{position:absolute;top:-34px;inset-inline-end:22px;width:34px;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
@media (prefers-reduced-motion:no-preference){[data-dl=owners] .hero-pic{animation:dl-zoom 14s ease-out both}}
@keyframes dl-zoom{from{transform:scale(1.12)}to{transform:none}}
[data-dl=owners] .hero-pic{overflow:hidden}
[data-dl=owners] .list .n{font-family:'Belleza','Tajawal',sans-serif}

/* Brand Guide (31 Oct 2026): Belleza is the English (and Latin-language) brand font for every word, buttons included */
[data-dl] :is(.btn,.more,[data-f],.chip):not(:lang(ar)):not(:lang(zh)){font-family:'Belleza','Tajawal',sans-serif;font-weight:400;letter-spacing:.03em;font-synthesis:none}

/* footer: © years on a line of their own under the descriptor */
[data-dl] .cr{display:block;margin-top:8px;font-size:12px;opacity:.75;letter-spacing:.04em}

/* home area cards: the place chips stay on one line (brand.js shrinks them to fit if needed) */
[data-dl=home] .area .chips{flex-wrap:nowrap;overflow:hidden;gap:5px}
[data-dl=home] .area .chips i{flex:none;white-space:nowrap;font-size:12px;padding:5px 8px}
[data-dl=home] .area .chips i:not(:lang(ar)):not(:lang(zh)){font-family:'Belleza','Tajawal',sans-serif;font-weight:400;letter-spacing:.03em}