/* ===========================================================================
   Premium theme layer — "Skyline".
   Loaded after site.css. Every value still resolves from the CMS colour /
   font / radius variables, so the client can restyle the whole thing from
   Dashboard → Appearance without touching this file.
   =========================================================================== */

:root{
  --ink: var(--secondary);
  --edge: color-mix(in srgb, var(--text) 14%, transparent);
  --veil: color-mix(in srgb, var(--text) 6%, transparent);
  --glow: color-mix(in srgb, var(--primary) 55%, transparent);
  --shell: color-mix(in srgb, var(--bg) 82%, transparent);
  --rise: cubic-bezier(.22,.61,.36,1);
  --sweep: cubic-bezier(.65,0,.35,1);
}

/* ---------------------------------------------------------------- typography */
body{letter-spacing:-0.006em}
h1,h2,h3,h4{letter-spacing:-0.028em;color:var(--text)}
h1{font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.98;font-weight:700}
h2{font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.05}
h3{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.25}

.eyebrow{
  position:relative;padding-inline-start:2.6rem;letter-spacing:.22em;
  font-size:.7rem;font-weight:600;color:var(--muted);opacity:.9;margin-bottom:1.4rem;
}
.eyebrow::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;width:1.9rem;height:1px;
  background:var(--primary);transform-origin:left center;
}
.rtl .eyebrow::before{transform-origin:right center}

.section-sub,.hero-sub,.lead{color:var(--muted);text-wrap:pretty}
.section-head{margin-bottom:3rem}

/* A quiet index number on major sections — set custom_class "numbered" */
.section.numbered > .container,
.section.numbered > .wide{position:relative}
.section.numbered .section-head::after{
  content:attr(data-index);position:absolute;top:0;inset-inline-end:0;
  font-family:var(--font-heading);font-size:.78rem;letter-spacing:.2em;
  color:var(--muted);opacity:.55;
}

/* --------------------------------------------------------------- the header */
.site-header{
  border-bottom:1px solid transparent;background:transparent;
  transition:background .4s var(--rise), border-color .4s var(--rise), backdrop-filter .4s;
}
.site-header.is-stuck{
  background:var(--shell);border-bottom-color:var(--edge);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
}
.header-inner{height:84px}
.brand-text{letter-spacing:-.03em}
.main-nav a{
  position:relative;font-size:.88rem;font-weight:500;letter-spacing:.01em;
  color:var(--text);opacity:.78;transition:opacity .25s;
}
.main-nav a:hover{opacity:1}
.main-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--primary);transform:scaleX(0);transform-origin:right center;
  transition:transform .4s var(--sweep);
}
.main-nav a:hover::after{transform:scaleX(1);transform-origin:left center}
.nav-highlight{color:var(--primary)!important;opacity:1!important}
.nav-toggle span{background:var(--text)}
.lang-switch{border-color:var(--edge)}
.currency-select{background:transparent;color:var(--text);border:1px solid var(--edge);
  border-radius:999px;padding:.34rem .7rem;font-size:.8rem}

/* --------------------------------------------------------------- buttons */
.btn{
  border-radius:999px;letter-spacing:.01em;font-weight:600;
  transition:background .3s var(--rise), color .3s var(--rise),
             border-color .3s var(--rise), transform .3s var(--rise);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{box-shadow:0 10px 30px -12px var(--glow)}
.btn-ghost{border-color:var(--edge);color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:var(--veil)}
.btn-lg{padding:1.02rem 2.2rem}
.btn-row{gap:1rem;margin-top:2.2rem}

/* --------------------------------------------------------------- the hero */
.sec-hero{overflow:hidden;isolation:isolate}
.sec-hero.bg-dark,.sec-hero.bg-image{background-color:var(--secondary)}
.sec-hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-1;
  background:
    radial-gradient(60% 55% at 22% 8%,  color-mix(in srgb,var(--primary) 30%,transparent), transparent 70%),
    radial-gradient(50% 50% at 88% 78%, color-mix(in srgb,var(--accent)  22%,transparent), transparent 72%);
  opacity:.9;pointer-events:none;
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-3%,2.5%,0) scale(1.08)}
}
/* faint architectural grid behind the hero */
.sec-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right, color-mix(in srgb,currentColor 7%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,currentColor 7%,transparent) 1px, transparent 1px);
  background-size:clamp(90px,9vw,150px) clamp(90px,9vw,150px);
  mask-image:radial-gradient(75% 65% at 50% 40%,#000,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 65% at 50% 40%,#000,transparent 100%);
}
.sec-hero .hero-title{max-width:16ch;text-wrap:balance}
.sec-hero .text-center .hero-title,
.sec-hero .text-center .hero-sub{margin-inline:auto}
.sec-hero .text-right .hero-title,
.sec-hero .text-right .hero-sub{margin-inline-start:auto}
.hero-sub{font-size:clamp(1rem,1.35vw,1.2rem);max-width:54ch;line-height:1.65}

/* word-by-word entrance, built by premium.js */
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero-title .w > i{
  display:inline-block;font-style:inherit;transform:translateY(110%);
  transition:transform .95s var(--rise);transition-delay:var(--d,0ms);
}
.hero-title.lit .w > i{transform:none}

/* scroll cue */
.scroll-cue{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  width:1px;height:54px;background:linear-gradient(currentColor,transparent);opacity:.45;
}
.scroll-cue::after{
  content:"";position:absolute;top:0;left:-1px;width:3px;height:14px;border-radius:2px;
  background:var(--primary);animation:cue 2.4s var(--sweep) infinite;
}
@keyframes cue{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:40px;opacity:0}}

/* --------------------------------------------------------------- reveals */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--rise), transform .9s var(--rise);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-title .w > i{transform:none;transition:none}
  .sec-hero::before{animation:none}
  .scroll-cue::after{animation:none}
}

/* --------------------------------------------------------------- cards */
.card,.feature-card,.dev-card,.quote-card,.faq-item,.panel{
  border-color:var(--edge);background:var(--surface);
}
.card{border-radius:calc(var(--radius) + 6px);box-shadow:none}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -32px rgba(0,0,0,.55);border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.card-media{aspect-ratio:3/2.2}
.card-media img{transition:transform 1.1s var(--rise);will-change:transform}
.card:hover .card-media img{transform:scale(1.07)}
.card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--secondary) 55%,transparent),transparent 55%);
  opacity:.75;
}
.card-body{padding:1.5rem 1.4rem 1.6rem;gap:.5rem}
.card-body h3 a{color:var(--text)}
.card-eyebrow{letter-spacing:.14em;font-size:.68rem;opacity:.75}
.card-price{font-family:var(--font-heading);font-size:1.15rem}
.card-link{position:relative;color:var(--primary);display:inline-block;
  transition:transform .35s var(--rise)}
.card:hover .card-link{transform:translateX(5px)}
.rtl .card:hover .card-link{transform:translateX(-5px)}
.badge{border-radius:4px;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem;backdrop-filter:blur(6px)}
.badge-status{background:color-mix(in srgb,var(--secondary) 70%,transparent)}

.feature-card{padding:2.2rem 1.8rem;border-radius:calc(var(--radius) + 6px);transition:.4s var(--rise)}
.feature-card:hover{border-color:color-mix(in srgb,var(--primary) 45%,transparent);transform:translateY(-4px)}
.feature-icon{font-size:1.7rem;opacity:.95}

.dev-card{border-radius:calc(var(--radius) + 6px);padding:2rem 1.2rem}
.dev-card h3{color:var(--text)}
.dev-initial{background:var(--veil);color:var(--primary)}

.city-card{
  min-height:260px;border-radius:calc(var(--radius) + 6px);overflow:hidden;
  justify-content:flex-end;padding:1.6rem;transition:.5s var(--rise);
}
.city-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent 62%);
}
.city-card > *{position:relative;z-index:1}
.city-card:hover{opacity:1;transform:translateY(-5px)}
.city-name{font-size:1.25rem;letter-spacing:-.02em}

/* --------------------------------------------------------------- stats */
.stats-grid{gap:2.4rem}
.stat-value{font-size:clamp(2.6rem,5.2vw,4.2rem);letter-spacing:-.045em;font-weight:700}
.stat-label{font-weight:500;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.bg-primary .stat-label{opacity:.9}

/* --------------------------------------------------------------- logos marquee */
.logo-strip{gap:3.5rem;flex-wrap:nowrap}
.logo-strip.marquee{display:block;overflow:hidden;width:100%;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;gap:3.5rem;width:max-content;
  animation:slide 38s linear infinite}
.logo-strip.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.logo-strip img{filter:grayscale(1) brightness(1.6);opacity:.55}
.logo-text{white-space:nowrap;font-size:1.05rem;letter-spacing:.02em;opacity:.7}

/* --------------------------------------------------------------- faq / quotes */
.faq-item{border-radius:calc(var(--radius) + 2px);background:transparent;border-color:var(--edge);margin-bottom:.9rem}
.faq-item summary{padding:1.3rem 1.5rem;font-size:1.02rem;transition:color .3s}
.faq-item summary:hover{color:var(--primary)}
.faq-item[open]{background:var(--surface)}
.faq-body{padding:0 1.5rem 1.4rem;line-height:1.7}
.quote-card{padding:2.2rem;border-radius:calc(var(--radius) + 6px);font-size:1.05rem;line-height:1.65}
.quote-card::before{content:"”";display:block;font-family:var(--font-heading);font-size:3.4rem;
  line-height:.6;color:var(--primary);opacity:.55;margin-bottom:.6rem}

/* --------------------------------------------------------------- split / cta */
.split{gap:clamp(2.5rem,6vw,6rem)}
.split-media img{border-radius:calc(var(--radius) + 8px)}
.sec-cta,.section.bg-primary,.section.bg-dark{position:relative;overflow:hidden}
.cta-inner{gap:3rem}
.cta-inner h2{max-width:20ch;margin-bottom:.4rem}

/* --------------------------------------------------------------- search card */
.search-card{
  border-radius:999px;padding:.55rem .55rem .55rem 1.6rem;background:var(--surface);
  border-color:var(--edge);box-shadow:0 30px 70px -40px rgba(0,0,0,.65);
}
.search-card .btn{border-radius:999px;padding-inline:2rem}
.search-field input,.search-field select,.field{
  background:transparent;border-color:transparent;border-inline-end:1px solid var(--edge);
  border-radius:0;padding-inline-start:0;
}
.search-field label{font-size:.68rem;letter-spacing:.14em;opacity:.7}
@media(max-width:1024px){
  .search-card{border-radius:calc(var(--radius) + 8px);padding:1.4rem}
  .search-field input,.search-field select,.field{border:1px solid var(--edge);
    border-radius:calc(var(--radius) - 4px);padding-inline-start:.85rem}
}
.pull-up{margin-top:-44px}

/* --------------------------------------------------------------- banners */
.page-banner{background:var(--surface);padding:clamp(5rem,9vw,8rem) 0 clamp(3rem,5vw,4.5rem)}
.page-banner h1{max-width:18ch}
.detail-hero{padding:clamp(6rem,10vw,9rem) 0 clamp(3rem,5vw,4rem);position:relative;isolation:isolate}
.detail-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,color-mix(in srgb,var(--secondary) 92%,transparent),color-mix(in srgb,var(--secondary) 55%,transparent))}
.crumbs{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}

/* --------------------------------------------------------------- footer */
.site-footer{margin-top:0;border-top:1px solid var(--edge)}
.footer-grid{padding:clamp(3.5rem,6vw,5.5rem) 20px 3rem}
.footer-col h4{font-size:.72rem;letter-spacing:.18em;opacity:.65}
.footer-col a{opacity:.8;transition:opacity .25s,padding-inline-start .3s var(--rise)}
.footer-col a:hover{opacity:1;padding-inline-start:.28rem}
.footer-brand{font-size:1.6rem;letter-spacing:-.03em}
.footer-bottom{font-size:.8rem;letter-spacing:.04em;opacity:.7}

/* --------------------------------------------------------------- misc */
::selection{background:var(--primary);color:#fff}
/* Section padding stays under CMS control (inline styles from the dashboard),
   so nothing here overrides it. */
.grid{gap:1.8rem}
@media(max-width:768px){
  .sec-hero{min-height:auto}
  .eyebrow{padding-inline-start:0}
  .eyebrow::before{display:none}
  .section.numbered .section-head::after{display:none}
}


/* ---------------------------------------------------------- dark-safe text
   site.css paints several elements in --secondary (the deep brand colour).
   On a dark palette that is the page background, so re-point them at --text.
   On a light palette --text is the normal body colour, so nothing changes
   visually and both directions keep working. */
.brand-text,.header-phone,.main-nav a,.card-body h3 a,.dev-card h3,
.filters label,.enquiry-form label,.faq-item summary,.panel h2,
.section-title,.stat-label{color:var(--text)}
.card-body h3 a:hover{color:var(--primary)}
.page-banner{border-bottom:1px solid var(--edge)}
.spec-grid li,.amenity-list li{background:var(--veil)}
.data-table th{background:var(--veil);color:var(--muted)}
.data-table th,.data-table td{border-bottom-color:var(--edge)}
.flash-info,.flash-warning{background:var(--surface);border-color:var(--edge)}
.placeholder{background:var(--veil);color:var(--muted)}
.ac-item,.ac-list{background:var(--surface);color:var(--text);border-color:var(--edge)}
/* a heading block whose fields are all empty should not reserve space */
.section-head:not(:has(*)){display:none;margin:0}
.sec-logos .section-head{margin-bottom:2.2rem}

/* mobile header: the account / browse buttons live in the drawer instead,
   otherwise the header row pushes the page sideways on small screens */
@media(max-width:768px){
  .header-actions .browse-btn,
  .header-actions .account-btn,
  .header-actions .currency-select{display:none}
  .header-inner{height:66px;gap:.75rem}
  .main-nav{inset-block-start:66px}
  .nav-mobile-extra{display:block;width:100%}
  .nav-mobile-extra > a{padding:.75rem 0;display:block;border-bottom:1px solid var(--edge)}
}
@media(min-width:769px){.nav-mobile-extra{display:none}}

/* ===========================================================================
   Brand plate — oversized wordmark hanging over the hero that shrinks up into
   the header bar as you scroll. --bp ("brand progress") runs 0 (expanded, at
   the top of the page) to 1 (collapsed into the header) and is written by
   premium.js on every scroll frame. The plate only exists on pages whose first
   section is a hero; `has-hero` is set server-side so there is no flash.
   =========================================================================== */
:root{
  --bp:0;
  --plate-drop:132px;   /* how far below the header bar the plate hangs */
  --plate-grow:3.1rem;  /* extra wordmark size while expanded */
  --plate-px:2.4rem;    /* extra horizontal padding while expanded */
  --plate-py:1.5rem;    /* extra vertical padding while expanded */
  --plate-track:.3em;   /* letter tracking while expanded */
  --plate-bg:var(--text);
  --plate-bg:color-mix(in srgb, var(--text) 97%, var(--bg));
  --plate-ink:var(--bg);
  --plate-ink:color-mix(in srgb, var(--bg) 94%, var(--text));
}
/* with scripting off the plate can never shrink, so start it collapsed */
@media (scripting: none){ body.has-hero{--bp:1} }

.brand-block{display:flex;align-items:center;flex-shrink:0}
.brand-cue{display:none}

body.has-hero .header-inner{position:relative}
body.has-hero .brand-block{
  /* out of flow: the plate grows over the hero without pushing the nav around */
  position:absolute;inset-inline-start:20px;top:50%;z-index:2;
  transform:translate3d(0, calc(-50% + (1 - var(--bp)) * var(--plate-drop)), 0);
  will-change:transform;
}
body.has-hero .brand{
  background:var(--plate-bg);
  padding:calc(.34rem + (1 - var(--bp)) * var(--plate-py))
          calc(.85rem + (1 - var(--bp)) * var(--plate-px));
  border-radius:calc(var(--radius) * var(--bp));
  box-shadow:0 24px 60px -30px rgba(0,0,0,calc(.7 * (1 - var(--bp))));
}
body.has-hero .brand-text{
  color:var(--plate-ink);
  font-weight:400;
  font-size:calc(1.35rem + (1 - var(--bp)) * var(--plate-grow));
  letter-spacing:calc(-.02em + (1 - var(--bp)) * var(--plate-track));
  line-height:1.08;
  /* the tracking adds space after the last letter — pull it back so the
     wordmark stays optically centred on the plate */
  margin-inline-end:calc((1 - var(--bp)) * -1 * var(--plate-track));
  /* A long site name must wrap rather than run off the screen: the plate is
     absolutely positioned, so an unbreakable line would widen the whole page. */
  white-space:normal;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
/* hard ceiling so the plate can never be wider than the viewport */
body.has-hero .brand-block{max-width:calc(100vw - 40px)}
body.has-hero .brand{max-width:100%}
body.has-hero .brand-logo{
  height:calc(var(--logo-height) + (1 - var(--bp)) * 52px);
}

/* the round chevron that sits at the plate's edge and fades as it collapses */
body.has-hero .brand-cue{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;border:0;padding:0;background:none;cursor:pointer;
  width:calc((1 - var(--bp)) * 46px);height:46px;
  margin-inline-start:calc((1 - var(--bp)) * 1.1rem);
  opacity:calc(1 - var(--bp));
}
body.has-hero .brand-cue span{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  background:var(--plate-bg);position:relative;display:block;
  transform:scale(calc(1 - var(--bp)));transition:background .3s var(--rise)}
body.has-hero .brand-cue span::after{
  content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-inline-end:2px solid var(--plate-ink);border-bottom:2px solid var(--plate-ink);
  transform:translateY(-3px) rotate(45deg);
}
body.has-hero .brand-cue:hover span{background:var(--primary)}

@media(max-width:1024px){
  :root{--plate-drop:92px;--plate-grow:1.7rem;--plate-px:1.5rem;--plate-py:1rem;
        --plate-track:.22em}
}
@media(max-width:768px){
  /* a long site name wraps here, so the plate hangs only just below the bar
     and keeps clear of the hero text underneath it */
  :root{--plate-drop:18px;--plate-grow:.55rem;--plate-px:.7rem;--plate-py:.45rem;
        --plate-track:.16em}
  body.has-hero .brand-cue{display:none}
}
/* Arabic is a joined script — letter tracking would break the ligatures */
.rtl.has-hero .brand-text{letter-spacing:normal;margin-inline-end:0}

/* ===========================================================================
   Mobile & overflow fixes.
   A CSS grid item defaults to min-width:auto, so a single wide table or image
   inside a column stretched the whole page sideways on phones. Letting the
   columns shrink lets the scroll wrappers do their job instead.
   =========================================================================== */
.detail-layout{grid-template-columns:minmax(0,1fr) 360px}
.listing-layout{grid-template-columns:280px minmax(0,1fr)}
@media(max-width:1024px){
  .detail-layout,.listing-layout{grid-template-columns:minmax(0,1fr)}
}
.detail-layout > *,.listing-layout > *,.detail-main > *,.split > *,
.grid > *,.panel > *,.card-body > *{min-width:0}
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{min-width:460px}
.rich img,.rich table,.rich iframe{max-width:100%}
.rich{overflow-wrap:anywhere}

@media(max-width:768px){
  /* nothing on a phone should need horizontal scrolling except a wide table */
  .panel,.filters,.map-embed{overflow-x:auto}
  .hero-facts{gap:1rem}
  .spec-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .amenity-list{grid-template-columns:1fr 1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .listing-toolbar{flex-direction:column;align-items:flex-start;gap:.6rem}
  .btn{min-height:44px}          /* comfortable tap target */
  .btn-sm{min-height:36px}
}

/* ===========================================================================
   Section background video.
   Set a section's "Video url" to a YouTube/Vimeo link or an uploaded .mp4 and
   it plays behind that section, muted and looping. The tint on top keeps the
   text readable and is the section's own overlay-opacity setting.
   =========================================================================== */
.sec-video-bg{
  position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  /* No background colour: when the video cannot play (phones usually refuse to
     autoplay an embed) this layer must be invisible so the section falls back
     to its own background image or the theme's hero treatment. */
}
.sec-video-bg .sec-video-el{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:0;pointer-events:none;
}
.sec-video-bg video.sec-video-el{width:100%;height:100%;object-fit:cover}
/* an iframe keeps its 16:9 shape, so size it to cover the section instead.
   The extra scale pushes YouTube's title/channel strip outside the frame. */
.sec-video-bg iframe.sec-video-el,
.sec-video-bg .sec-video-yt{
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  transform:translate(-50%,-50%) scale(var(--video-zoom,1.35));
}
/* The player stays hidden until it reports that it is actually playing, so
   nobody sees the poster frame or YouTube's play button. Deliberately no
   transition here: a transition that is created while the tab is hidden gets
   parked at time zero and would hold the video invisible for good. */
.sec-video-bg iframe.sec-video-yt{opacity:0}
.sec-video-bg.is-playing iframe.sec-video-yt{opacity:1}
.sec-video-bg video.sec-video-el{transform:translate(-50%,-50%)}
.sec-video-tint{position:absolute;inset:0;background:#000;display:none}
.sec-video-bg.is-playing .sec-video-tint,
.sec-video-bg[style*="background-image"] .sec-video-tint,
.sec-video-bg:has(video) .sec-video-tint{display:block}
/* content sits above the video layer */
.section > .sec-content{position:relative;z-index:1}
.sec-hero:has(.sec-video-bg.is-playing)::before,
.sec-hero:has(.sec-video-bg.is-playing)::after{display:none}

@media (prefers-reduced-motion:reduce){
  /* leave the poster / background image showing instead of playing anything */
  .sec-video-bg .sec-video-el{display:none}
}

/* ===========================================================================
   Developer cards.
   Logos arrive in every shape and size, so each one sits in a fixed-ratio
   "well" and is contained inside it — wordmarks, square icons and awkward
   crops all line up. A developer with no logo gets a monogram instead of a
   stretched or borrowed image.
   =========================================================================== */
.dev-card{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:1.5rem 1.2rem 1.35rem;text-align:center;
  border:1px solid var(--edge);border-radius:calc(var(--radius) + 6px);
  background:var(--surface);
  transition:transform .35s var(--rise), border-color .35s var(--rise),
             box-shadow .35s var(--rise);
}
.dev-card:hover{
  text-decoration:none;transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--primary) 45%,transparent);
  box-shadow:0 22px 44px -28px rgba(0,0,0,.55);
}
.dev-logo{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:150px;aspect-ratio:5/3;margin-bottom:.5rem;
  padding:.7rem;border-radius:calc(var(--radius) - 2px);overflow:hidden;
  background:color-mix(in srgb,var(--text) 6%,transparent);
}
.dev-card .dev-logo img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;margin:0;
  transition:transform .5s var(--rise);
}
.dev-card:hover .dev-logo img{transform:scale(1.05)}
.dev-monogram{
  font-family:var(--font-heading);font-weight:700;font-size:1.55rem;
  letter-spacing:.06em;color:var(--primary);line-height:1;
}
.dev-name{
  font-family:var(--font-heading);font-weight:600;font-size:1.02rem;
  color:var(--text);line-height:1.3;letter-spacing:-.01em;
}
.dev-verified{
  display:inline-flex;align-items:center;gap:.32rem;
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#16a34a;
}
.dev-verified svg{width:14px;height:14px;flex:0 0 14px}
.dev-meta{font-size:.82rem;color:var(--muted)}

@media(max-width:768px){
  .dev-card{padding:1.1rem .8rem 1rem}
  .dev-logo{max-width:110px;padding:.5rem}
  .dev-name{font-size:.95rem}
}

/* ===========================================================================
   Detail-page sidebar.
   The enquiry panel was position:sticky while the map sat below it as a plain
   sibling, so scrolling slid the map underneath the pinned panel and it
   disappeared behind it. The whole column sticks instead, and only scrolls
   inside itself when it is taller than the viewport — so the map, brochure and
   WhatsApp buttons all stay reachable while the enquiry form stays in view.
   =========================================================================== */
.detail-side{display:flex;flex-direction:column;gap:1.4rem}
@media(min-width:1025px){
  .detail-side{
    position:sticky;top:90px;align-self:start;
    max-height:calc(100vh - 110px);
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-gutter:stable;
  }
  /* the inner panel must not pin as well, or it overlaps its own siblings */
  .detail-side .panel.sticky{position:static;top:auto}
}
.detail-side .map-frame{height:240px}

/* ===========================================================================
   Phone header.
   The brand plate is a desktop flourish: at phone width it spanned the whole
   bar and sat on top of the language switch and the menu button, so neither
   could be tapped. On phones the brand is just the badge in the bar, and the
   language switch moves into the menu where there is room for it.
   =========================================================================== */
@media(max-width:768px){
  :root{--plate-drop:0px;--plate-grow:0rem;--plate-px:.55rem;--plate-py:.3rem;--plate-track:0em}
  body.has-hero .brand-block{position:static;transform:none;max-width:none}
  body.has-hero .brand{border-radius:calc(var(--radius) - 2px)}
  .header-actions .lang-switch{display:none}   /* it lives in the menu instead */
  .nav-toggle{position:relative;z-index:3}

  /* the bar goes solid while the menu is open, so the hero cannot show through */
  .site-header:has(.main-nav.open){background:var(--bg);border-bottom-color:var(--edge)}

  .nav-lang-row{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.9rem 0;border-bottom:1px solid var(--edge);
  }
  .nav-lang-label{
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;color:var(--muted);
  }
  .nav-lang-row .lang-switch{flex:0 0 auto}
  .nav-lang-row .lang-switch a{padding:.5rem 1.1rem;font-size:.9rem;min-height:40px;
    display:flex;align-items:center}
}
@media(min-width:769px){.nav-lang-row{display:none}}

/* ------------------------------------------------------------------
   Developer & project detail — countries, facts, video
   ------------------------------------------------------------------ */
.country-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.country-chips li{margin:0}
.country-chips a{display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .85rem;border-radius:999px;text-decoration:none;
  border:1px solid var(--pm-line,rgba(0,0,0,.12));
  background:color-mix(in srgb, var(--color-primary,#1d4ed8) 5%, transparent);
  color:inherit;font-size:.92rem;line-height:1.2;transition:.18s ease}
.country-chips a:hover{border-color:var(--color-primary,#1d4ed8);
  background:color-mix(in srgb, var(--color-primary,#1d4ed8) 12%, transparent)}
.country-chips .cc{font-size:.68rem;font-weight:700;letter-spacing:.08em;
  padding:.15rem .4rem;border-radius:5px;background:var(--color-primary,#1d4ed8);color:#fff}

.fact-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.fact-list li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding-bottom:.6rem;border-bottom:1px solid var(--pm-line,rgba(0,0,0,.08))}
.fact-list li:last-child{border-bottom:0;padding-bottom:0}
.fact-list span{opacity:.65;font-size:.85rem}
.fact-list strong{text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}
.fact-list a{color:inherit}

.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;
  overflow:hidden;background:#000}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;object-fit:cover}

.contact-list .hq{opacity:.75;font-size:.9rem;line-height:1.45}
.dev-countries{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin:.1rem 0 .15rem}
.dev-countries span{font-size:.7rem;letter-spacing:.02em;padding:.15rem .5rem;border-radius:999px;
  background:color-mix(in srgb, currentColor 8%, transparent);opacity:.8;white-space:nowrap}

/* Photographer credit. Small, always legible, never in the way. */
.photo-credit{display:block;margin-top:.3rem;font-size:.68rem;line-height:1.35;
  letter-spacing:.01em;opacity:.62;font-weight:400}
.photo-credit a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.photo-credit a:hover{opacity:1;border-bottom-color:currentColor}
.detail-hero .photo-credit{margin-top:.9rem;opacity:.5;color:#fff}
.gallery-caption .photo-credit{opacity:.75}
.unit-hero-link{display:block}

/* ------------------------------------------------------------------
   Search bar, Airbnb-style.

   One pill of segments. Hovering or focusing a segment lifts it to white
   and drops the whole bar behind it to grey, so the active cell reads as
   a raised button rather than a highlighted box. The dividers either side
   of the live cell disappear, which is the detail that sells it.
   ------------------------------------------------------------------ */
.ab-search{
  --ab-ink:#222;
  --ab-sub:#6f6f6f;
  --ab-line:rgba(0,0,0,.13);
  position:relative;display:flex;align-items:stretch;gap:0;
  padding:.35rem;border-radius:999px;background:#fff;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 3px 12px rgba(0,0,0,.07), 0 18px 46px -18px rgba(0,0,0,.28);
  transition:background .22s ease, box-shadow .22s ease;
}
.ab-search:focus-within{box-shadow:0 3px 12px rgba(0,0,0,.09), 0 24px 56px -18px rgba(0,0,0,.34)}
/* The bar recedes so the live cell can come forward. */
.ab-search:has(.ab-cell:hover),.ab-search:has(.ab-cell:focus-within){background:#ebebeb}

.ab-cell{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:.8rem 1.5rem;border-radius:999px;cursor:pointer;
  background:transparent;transition:background .22s ease, box-shadow .22s ease;
}
.ab-cell:hover{background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.10)}
.ab-cell:focus-within{background:#fff;box-shadow:0 3px 16px rgba(0,0,0,.18)}

/* Hairline dividers, hidden either side of whichever cell is live. */
.ab-cell + .ab-cell::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;
  width:1px;height:2rem;background:var(--ab-line);transition:opacity .18s ease;
}
.ab-cell:hover::before,.ab-cell:hover + .ab-cell::before,
.ab-cell:focus-within::before,.ab-cell:focus-within + .ab-cell::before{opacity:0}

.ab-lab{
  font-size:.7rem;font-weight:700;line-height:1;letter-spacing:.005em;
  color:var(--ab-ink);white-space:nowrap;
}
.ab-in{
  all:unset;display:block;width:100%;font:inherit;font-size:.92rem;line-height:1.3;
  color:var(--ab-ink);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ab-in::placeholder{color:var(--ab-sub);opacity:1}
.ab-in::-webkit-outer-spin-button,.ab-in::-webkit-inner-spin-button{appearance:none;margin:0}
.ab-in[type="number"]{-moz-appearance:textfield}
/* A select with its native arrow stripped still has to look openable. */
.ab-pick{padding-inline-end:2.3rem}
.ab-pick::after{
  content:"";position:absolute;inset-inline-end:1.35rem;top:calc(50% + .28rem);
  width:.5rem;height:.5rem;border-right:1.6px solid var(--ab-sub);
  border-bottom:1.6px solid var(--ab-sub);rotate:45deg;translate:0 -50%;
  pointer-events:none;transition:border-color .2s ease;
}
.ab-pick:hover::after,.ab-pick:focus-within::after{border-color:var(--ab-ink)}
.rtl .ab-pick::after{rotate:-45deg}

.ab-go{
  flex:0 0 auto;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  height:3rem;padding-inline:.85rem;margin-inline-start:.2rem;
  border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;font:inherit;font-size:.95rem;font-weight:600;
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--primary) 80%, transparent);
  transition:filter .2s ease, box-shadow .22s ease, padding .28s var(--rise);
}
.ab-go:hover{filter:brightness(1.07);box-shadow:0 10px 26px -8px color-mix(in srgb, var(--primary) 85%, transparent)}
.ab-go svg{width:1.15rem;height:1.15rem;flex:0 0 auto;display:block}
/* The label unfurls once someone is actually filling the form in. */
.ab-go-text{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .28s var(--rise), opacity .2s ease;
}
.ab-search:focus-within .ab-go{padding-inline:1.15rem}
.ab-search:focus-within .ab-go-text{max-width:7rem;opacity:1}

/* Sitting over a hero, the bar keeps its own light surface. */
.pull-up .ab-search{box-shadow:0 3px 12px rgba(0,0,0,.09), 0 28px 60px -20px rgba(0,0,0,.45)}

@media (max-width:900px){
  .ab-search{flex-direction:column;border-radius:1.75rem;padding:.45rem;gap:.1rem}
  .ab-cell{padding:.8rem 1.15rem;border-radius:1.4rem}
  .ab-cell + .ab-cell::before{
    inset-inline:1.15rem;inset-block-start:0;top:0;translate:none;
    width:auto;height:1px;
  }
  .ab-pick::after{inset-inline-end:1.15rem}
  .ab-go{width:100%;height:3.1rem;margin:.35rem 0 0;padding-inline:1.15rem}
  .ab-go-text{max-width:7rem;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .ab-search,.ab-cell,.ab-go,.ab-go-text,.ab-cell::before{transition:none}
}

/* ---- Search suggestions panel ------------------------------------ */
.ab-cell{--ab-panel-w:22rem}
.ab-panel{
  position:absolute;z-index:60;inset-inline-start:0;top:calc(100% + .7rem);
  width:max(var(--ab-panel-w), 100%);max-width:min(26rem, 92vw);
  background:#fff;border-radius:1.5rem;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 28px rgba(0,0,0,.12), 0 28px 64px -24px rgba(0,0,0,.4);
  padding:.9rem .5rem .6rem;cursor:default;
  animation:ab-drop .18s var(--rise) both;
}
@keyframes ab-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ab-panel{animation:none}}
/* The last cells would overflow the bar, so they hang from the right. */
.ab-cell:nth-last-child(2) .ab-panel,
.ab-cell:nth-last-child(3) .ab-panel{inset-inline-start:auto;inset-inline-end:0}

.ab-panel-head{
  margin:0 0 .5rem;padding-inline:1rem;
  font-size:.78rem;font-weight:600;color:#6f6f6f;letter-spacing:.01em;
}
.ab-list{list-style:none;margin:0;padding:0;max-height:min(24rem,60vh);overflow-y:auto}
.ab-opt{
  display:flex;align-items:center;gap:.9rem;width:100%;
  padding:.6rem 1rem;border:0;border-radius:1rem;background:transparent;
  font:inherit;text-align:start;cursor:pointer;color:#222;
  transition:background .14s ease;
}
.ab-opt:hover,.ab-opt.is-active{background:#f3f3f3}
.ab-ico{
  flex:0 0 auto;display:grid;place-items:center;width:2.9rem;height:2.9rem;
  border-radius:.8rem;background:#f1f1f1;color:#4a4a4a;
}
.ab-ico-g{width:1.35rem;height:1.35rem}
.ab-opt-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ab-opt-t{font-size:.94rem;font-weight:500;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-opt-s{font-size:.82rem;color:#6f6f6f;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-empty{padding:.7rem 1rem 1rem;color:#6f6f6f;font-size:.9rem}

/* A cell with its panel open stays lifted. */
.ab-cell.is-open{background:#fff;box-shadow:0 3px 16px rgba(0,0,0,.18)}
.ab-cell.is-open::before,.ab-cell.is-open + .ab-cell::before{opacity:0}
.ab-search:has(.ab-cell.is-open){background:#ebebeb}

/* The select is kept for submitting; the button in front of it is what
   people actually see and click. */
.ab-hidden-control{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ab-face{
  all:unset;display:block;width:100%;font:inherit;font-size:.92rem;line-height:1.3;
  color:#6f6f6f;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ab-face.is-set{color:#222}

@media (max-width:900px){
  .ab-panel{position:static;width:auto;max-width:none;box-shadow:none;border:0;
    padding:.4rem 0 0;animation:none;background:transparent}
  .ab-list{max-height:14rem}
  .ab-opt{padding-inline:.4rem}
  .ab-ico{width:2.4rem;height:2.4rem}
}

/* A section with an open panel must not clip it, and must sit above the
   section that follows. Set from search.js so it works without :has(). */
.section.ab-unclip{overflow:visible;z-index:30}

/* ---- Stats band ---------------------------------------------------
   A flat slab of brand orange with the labels painted in the dark text
   colour (from the dark-safe block above) read as muddy brown on orange.
   The fill gets a little depth, the labels get proper contrast, and the
   figures are separated by hairlines instead of by guesswork.           */
.sec-stats.bg-primary{
  background:radial-gradient(120% 140% at 50% -20%,
             #c05a12 0%, var(--primary) 46%, #8f3e08 100%);
}
.sec-stats .stats-grid{gap:0}
.sec-stats .stat{position:relative;padding:.5rem 1.6rem;text-align:center}
.sec-stats .stat + .stat::before{
  content:"";position:absolute;inset-block:.2rem;inset-inline-start:0;
  width:1px;background:var(--edge);
}
.sec-stats.bg-primary .stat + .stat::before,
.sec-stats.bg-dark .stat + .stat::before{background:rgba(255,255,255,.22)}
.sec-stats.bg-primary .stat-value,
.sec-stats.bg-dark .stat-value{color:#fff}
.sec-stats.bg-primary .stat-label{color:rgba(255,255,255,.82);opacity:1}
.sec-stats.bg-dark .stat-label{color:rgba(255,255,255,.62);opacity:1}
.sec-stats .stat-value{font-size:clamp(2.4rem,4.6vw,3.6rem)}
.sec-stats .stat-label{font-size:.74rem;letter-spacing:.16em;margin-top:.7rem}
/* The grid drops to two columns at 1024 and one at 768, so the dividers
   have to follow it — otherwise a vertical hairline floats at the start of
   the second row. */
@media (max-width:1024px){
  .sec-stats .stat:nth-child(odd)::before{display:none}
}
@media (max-width:768px){
  .sec-stats .stat{padding-block:1.4rem}
  .sec-stats .stat:nth-child(odd)::before{display:block}
  .sec-stats .stat + .stat::before{inset-block:auto;inset-inline:1.6rem;
    top:0;width:auto;height:1px}
}

/* ---- The pill on a listing page ----------------------------------
   Over the hero it floats; on an index it is the top of the content,
   so it needs air before the results begin.                          */
.unit-search{margin-bottom:1.9rem}
@media (max-width:900px){.unit-search{margin-bottom:1.4rem}}

/* ---- The wordmark plate on every page ------------------------------
   Over a hero the plate starts large and collapses as you scroll (the
   body.has-hero rules above). Elsewhere there is no hero to grow over,
   so it simply sits in that collapsed form: same badge, no animation,
   and the header reads as one design across the site.                 */
.brand{
  background:var(--plate-bg);
  padding:.34rem .85rem;
  border-radius:var(--radius);
}
.brand-text{color:var(--plate-ink);font-weight:400;letter-spacing:-.02em}
@media (max-width:768px){
  .brand{padding:.3rem .55rem;border-radius:calc(var(--radius) - 2px)}
}

/* ---- Phone tab bar -------------------------------------------------
   Five destinations pinned within thumb reach. Hidden entirely above
   the phone breakpoint, where the header nav already shows them all.  */
.tabbar{display:none}
@media (max-width:768px){
  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset-inline:0;bottom:0;z-index:80;
    /* it passes over the dark footer, so it has to hold its own surface */
    background:color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter:saturate(170%) blur(16px);
    -webkit-backdrop-filter:saturate(170%) blur(16px);
    border-top:1px solid var(--edge);
    box-shadow:0 -6px 22px -14px rgba(0,0,0,.5);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.24rem;padding:.6rem .25rem .55rem;min-height:3.6rem;
    color:var(--muted);text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:color .18s ease;
  }
  .tab svg{width:1.45rem;height:1.45rem;flex:0 0 auto;display:block}
  .tab span{
    font-size:.65rem;font-weight:600;letter-spacing:.005em;line-height:1;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .tab.is-on{color:var(--primary)}
  .tab:active{opacity:.6}

  /* the footer must not end underneath the bar */
  .site-footer{padding-bottom:calc(4.7rem + env(safe-area-inset-bottom))}
}
/* An open menu covers the screen; a bar floating over it just gets in
   the way. */
@media (max-width:768px){
  body:has(.main-nav.open) .tabbar{display:none}
}