/* Generated by sites/_shared/make-theme.mjs. Edit there, not here. */
:root{--ink:#0f172a;--sea:#0369a1;--gold:#38bdf8;--display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--body:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body{font-family:var(--body)}
h1,h2,h3,h4,.logo{font-family:var(--display)}
h1,h2{letter-spacing:-.015em}
.btn-gold{background:var(--gold);color:#062033}
.logo .mark{background:linear-gradient(135deg,var(--ink),var(--sea))}
.ours{background:linear-gradient(135deg,rgba(15,23,42,1),rgba(15,23,42,.86)),url(/img/dubai-marina.webp) center/cover}

/* Hero: one real photo under a dark wash, so white text keeps 4.5:1 contrast. */
.hero{background:linear-gradient(100deg,rgba(15,23,42,.94) 0%,rgba(15,23,42,.82) 45%,rgba(15,23,42,.45) 100%),var(--hero-img,url(/img/dubai-marina.webp)) center/cover no-repeat}
.hero .wrap{padding-top:88px}
@media (max-width:700px){.hero{background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(15,23,42,.8)),var(--hero-img,url(/img/dubai-marina.webp)) center/cover no-repeat}.hero .wrap{padding-top:56px}}

/* Cards: a gentle lift on hover, pointer on anything clickable. */
a.card,.btn,summary{cursor:pointer}
.card,.btn{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,filter .2s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(15,23,42,.06),0 18px 40px rgba(15,23,42,.12);border-color:rgba(15,23,42,.18)}

/* Photo cards: the area's real home on top, text below. */
.card.photo-card{display:block;padding:0 0 22px;overflow:hidden}
.photo-card .ph{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;margin:0 0 16px;background:#e9eef3}
.photo-card>:not(.ph):not(.num){display:block;padding-left:22px;padding-right:22px}
.photo-card .num{display:inline-grid;margin:0 0 8px 22px}

/* Keyboard and accessibility. */
:focus-visible{outline:3px solid var(--sea);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.ours :focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}a.card:hover{transform:none}}