/* CYDXB slate petrol / orange palette; fixed image geometry retained. */
:root{--cydxb-orange:#ff8a24}
.logo span{color:var(--cydxb-orange)}
.search{background:var(--cydxb-orange)}
#tray button{background:var(--cydxb-orange);color:#172a3b}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d45b0a;outline-offset:3px}
.photo{height:215px;min-height:0;position:relative}
.photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.results-list .card{grid-template-columns:265px minmax(0,1fr);min-height:250px}
.results-list .photo{height:250px;min-height:0;max-height:250px;align-self:start}
.results-list .body{min-width:0;display:flex;flex-direction:column}
.results-list .cardbottom{margin-top:auto;padding-top:14px}
.area-image{width:100%;height:420px;object-fit:cover}
@media(max-width:1000px) and (min-width:761px){.results-list .card{grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:760px){.results-list .card{grid-template-columns:1fr;min-height:0}.results-list .photo,.photo{height:220px;min-height:0;max-height:220px;width:100%}.results-list .cardbottom{margin-top:16px}.area-image{height:260px}}

/* Blue palette from the live CYGURU.TRAVEL stylesheet. */
:root{--cydxb-primary:#123044;--cydxb-primary-dark:#050e19;--cydxb-primary-ink:#123044;--cydxb-soft:#edf2f5}
header{background:#0c1c2b}
.hero{background:linear-gradient(90deg,#050e19ed,#12304448),url('/assets/dubai-marina.webp') center 53%/cover}
.blue{background:var(--cydxb-primary);color:#fff}.blue:hover{background:var(--cydxb-primary-dark)}
.link,.crumb,.areanav,.map-options a{color:var(--cydxb-primary-ink)}
.chip.active{background:var(--cydxb-soft);color:var(--cydxb-primary-ink);border-color:var(--cydxb-primary)}
.match{background:var(--cydxb-soft)}.match .eyebrow,.areahead .eyebrow{color:var(--cydxb-primary-ink)!important}
.map-teaser{background:linear-gradient(130deg,#e0e9ef,#edf2f5)}.map-teaser>span{color:var(--cydxb-primary-ink)}
.map-options button.active{background:var(--cydxb-soft);border-color:var(--cydxb-primary);color:var(--cydxb-primary-ink)}
#tray{background:var(--cydxb-primary-dark)}
.secondary{border-color:var(--cydxb-primary);color:var(--cydxb-primary-ink)}
.checkpanel{background:var(--cydxb-soft)}.related a{background:var(--cydxb-soft);color:var(--cydxb-primary-ink)}
.footer{background:#edf2f5;color:#435768}

/* Gold symbol rotates around a vertical axis, independently of the wordmark. */
.logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;perspective:550px}
.logo>span:not(.brand-spin){margin-left:-9px}
.logo .brand-spin{display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;flex:0 0 44px;transform-style:preserve-3d;animation:cydxb-coin 7s linear infinite}
.logo .brand-spin img{display:block;width:44px;height:40px;object-fit:contain;backface-visibility:visible;filter:drop-shadow(0 1px 2px #0003)}
@keyframes cydxb-coin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@media(max-width:760px){.logo{gap:8px;font-size:27px}.logo>span:not(.brand-spin){margin-left:-7px}.logo .brand-spin{width:36px;height:34px;flex-basis:36px}.logo .brand-spin img{width:36px;height:34px}}
@media(prefers-reduced-motion:reduce){.logo .brand-spin{animation:none}}

@media(min-width:761px){.hero h1{white-space:nowrap;max-width:none;font-size:clamp(38px,5.2vw,64px)}}