/* ==========================================================================
   SOVEREIGN ADDRESS — Dubai & UAE investment desk
   unclekris.com/dubai  ·  design system
   --------------------------------------------------------------------------
   DELIBERATELY SEPARATE from the DMCI/Philippines side of unclekris.com.
   Different palette, different type, different nav, zero shared components.
   Nothing here should ever be imported by a PH page and vice-versa.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#06070A;            /* obsidian ground */
  --ink-2:#0B0E14;          /* raised panel */
  --ink-3:#121722;          /* card */
  --line:rgba(212,175,106,.20);
  --line-soft:rgba(255,255,255,.08);
  --gold:#D4AF6A;           /* desert gold — the accent */
  --gold-hi:#F0D9A8;        /* highlight edge */
  --gold-deep:#8C6B32;
  --sand:#E9E1D2;           /* warm off-white text */
  --sand-dim:#A9A192;
  --teal:#2E7D74;           /* oasis accent, used sparingly */
  --white:#FFFDF8;
  --ok:#5FBF8B;
  --shadow:0 30px 80px -30px rgba(0,0,0,.9);

  --serif:"Bodoni Moda","Didot","Playfair Display",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --rail:clamp(16px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--sand);
  font-family:var(--sans);font-size:16px;line-height:1.7;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#0a0a0a}

/* film grain + vignette: the single cheapest trick that makes flat dark
   backgrounds read as "photographed" instead of "CSS'd". */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.28'/></svg>");
  opacity:.05;mix-blend-mode:overlay;
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0 0 .5em;line-height:1.06}
h1{font-size:clamp(2.6rem,6.6vw,5.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.5rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.18}
p{margin:0 0 1.15em;color:#CFC7B8}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#DCD4C4;max-width:62ch}
.eyebrow{
  font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem;display:flex;
  align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:34px;height:1px;background:linear-gradient(270deg,var(--gold),transparent)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
em.g{font-style:italic;color:var(--gold-hi)}
.muted{color:var(--sand-dim)}
.small{font-size:.82rem;line-height:1.6}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1520px;margin:0 auto;padding-inline:var(--pad)}
section{position:relative;padding:clamp(72px,10vw,140px) 0}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* fixed 3-up: the property hero's price/yield/handover row must stay on one
   line — auto-fit reflows it 2+1, which reads as a layout bug */
.g3-tight{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.g3-tight .stat b{white-space:nowrap;font-size:clamp(1.2rem,2.3vw,2rem)!important}
@media(max-width:520px){.g3-tight{grid-template-columns:1fr 1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
/* The advisor row reads badly in two cramped columns: stack it sooner, and
   sit the portrait on the same baseline as the copy rather than centring it
   in a column of empty space. */
#advisor .split{align-items:center;column-gap:clamp(28px,4vw,64px)}
@media(max-width:1000px){
  #advisor .split{grid-template-columns:1fr;justify-items:center;text-align:left}
  #advisor .split > div:last-child{max-width:60ch}
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--rail);gap:20px;
  background:linear-gradient(180deg,rgba(6,7,10,.92),rgba(6,7,10,0));
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(6,7,10,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{width:34px;height:34px;flex:0 0 34px}
.brand-txt{line-height:1.1}
.brand-txt b{font-family:var(--serif);font-weight:500;font-size:1.02rem;letter-spacing:.02em;color:var(--white);display:block}
.brand-txt span{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.nav-links{display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.nav-links a{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#C6BEAF;padding:6px 0;position:relative;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .35s}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:10px}
@media(max-width:1180px){.nav-links{display:none}}

.fx{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.fx button{
  background:none;border:0;color:var(--sand-dim);font:500 .68rem/1 var(--sans);
  letter-spacing:.12em;padding:8px 11px;cursor:pointer;transition:.25s;
}
.fx button[aria-pressed="true"]{background:var(--gold);color:#0a0a0a}

/* burger */
.burger{display:none;background:none;border:1px solid var(--line);color:var(--sand);
  width:42px;height:38px;border-radius:4px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(max-width:1180px){.burger{display:flex}}
.drawer{
  position:fixed;inset:0;z-index:70;background:rgba(6,7,10,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);
}
.drawer.open{transform:translateY(0)}
.drawer a{font-family:var(--serif);font-size:clamp(1.6rem,6vw,2.6rem);padding:.28em 0;border-bottom:1px solid var(--line-soft)}
.drawer a:hover{color:var(--gold)}
.drawer .close{position:absolute;top:18px;right:var(--rail);background:none;border:1px solid var(--line);
  color:var(--sand);width:42px;height:38px;border-radius:4px;font-size:1.1rem;cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font:500 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  padding:16px 26px;border-radius:2px;border:1px solid var(--gold);
  background:var(--gold);color:#0B0B0B;cursor:pointer;transition:.35s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi);transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(212,175,106,.7)}
.btn.ghost{background:transparent;color:var(--sand);border-color:var(--line)}
.btn.ghost:hover{background:rgba(212,175,106,.08);border-color:var(--gold);color:var(--gold-hi);box-shadow:none}
.btn.sm{padding:11px 18px;font-size:.68rem}
.btn.wa{background:#25D366;border-color:#25D366;color:#062b12}
.btn.wa:hover{background:#38ef7d;border-color:#38ef7d}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(40px,8vh,90px);overflow:hidden}
#skyline{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero-fallback{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 60% 88%,rgba(212,175,106,.28),transparent 60%),
    linear-gradient(180deg,#05070C 0%,#0A0F1A 42%,#1A1408 78%,#2A1D0A 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* two scrims: one down the page, one across the left where the headline
     sits. The building render is bright and busy — without the second one the
     type competes with lit windows and stops being readable. */
  background:
    linear-gradient(180deg,rgba(6,7,10,.70) 0%,rgba(6,7,10,.10) 26%,rgba(6,7,10,.62) 68%,var(--ink) 100%),
    linear-gradient(90deg,rgba(6,7,10,.80) 0%,rgba(6,7,10,.45) 38%,rgba(6,7,10,0) 72%);
}
.hero-inner{position:relative;z-index:2;width:100%}
.hero h1{margin-bottom:.35em;text-wrap:balance}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln i{display:block;font-style:normal;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .ln:nth-child(2) i{animation-delay:.13s}
.hero h1 .ln:nth-child(3) i{animation-delay:.26s}
@keyframes rise{to{transform:translateY(0)}}
.hero .lede{animation:fade 1s ease .55s both}
.hero .btn-row{animation:fade 1s ease .75s both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.ticker{
  position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(6,7,10,.55);backdrop-filter:blur(8px);overflow:hidden;
}
.ticker-track{display:flex;gap:0;animation:slide 46s linear infinite;width:max-content}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:.7em;padding:13px 28px;border-right:1px solid var(--line-soft);white-space:nowrap;font-size:.76rem;letter-spacing:.08em}
.tick b{color:var(--gold);font-weight:600}
.tick .dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}

.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sand-dim);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue::after{content:"";width:1px;height:38px;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.55);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}.rv.d4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero h1 .ln i{animation:none;transform:none}
  .ticker-track{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- stat / figure blocks ---------- */
.stat{border-top:1px solid var(--line);padding-top:18px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.1rem,4.6vw,3.4rem);color:var(--white);line-height:1;margin-bottom:.28em}
.stat span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dim)}
.stat i{display:block;font-style:normal;font-size:.8rem;color:#9C947F;margin-top:.5em;line-height:1.5}

/* ---------- cards ---------- */
.card{
  position:relative;background:linear-gradient(160deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line-soft);border-radius:3px;padding:clamp(22px,3vw,34px);
  transition:border-color .45s,transform .45s,box-shadow .45s;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,rgba(212,175,106,.10),transparent 55%);opacity:0;transition:opacity .5s}
.card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow)}
.card:hover::before{opacity:1}

/* property card */
.pcard{display:flex;flex-direction:column;padding:0;text-decoration:none}
.pcard .massing{position:relative;aspect-ratio:4/3;background:
  radial-gradient(90% 70% at 50% 100%,rgba(212,175,106,.22),transparent 62%),
  linear-gradient(180deg,#080B12,#0E1220);border-bottom:1px solid var(--line-soft);overflow:hidden}
.pcard .massing canvas,.pcard .massing svg{position:absolute;inset:0;width:100%;height:100%}
.pcard .tagline{position:absolute;left:0;bottom:0;z-index:2;display:flex;gap:6px;padding:10px}
.chip{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);
  border-radius:999px;background:rgba(6,7,10,.72);color:var(--gold);backdrop-filter:blur(6px)}
.chip.plain{color:var(--sand-dim);border-color:var(--line-soft)}
.pcard .body{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;flex:1;gap:14px}
.pcard h3{margin:0}
.pcard .loc{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dim)}
.pcard .figs{display:grid;grid-template-columns:1fr auto;gap:10px;border-top:1px solid var(--line-soft);padding-top:14px;margin-top:auto}
.pcard .figs div span{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#8B8474;margin-bottom:5px}
.pcard .figs div b{font-family:var(--serif);font-size:clamp(1.02rem,1.35vw,1.28rem);color:var(--white);font-weight:400;white-space:nowrap}
.pcard .figs div b.y{color:var(--gold)}
.pcard .go{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.6em}
.pcard:hover .go{gap:1.1em}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:3px;background:var(--ink-2)}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:.9rem}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500;background:rgba(212,175,106,.04)}
td b{color:var(--white);font-weight:500}
tbody tr:hover{background:rgba(212,175,106,.04)}
tbody tr:last-child td{border-bottom:0}
.spec-table td:first-child{color:var(--sand-dim);width:38%;white-space:normal}
.spec-table td{white-space:normal}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dim);margin-bottom:8px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:2px;
  color:var(--white);font:300 .95rem/1.5 var(--sans);padding:14px 15px;transition:.3s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);background:rgba(212,175,106,.06)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23D4AF6A' stroke-width='1.4' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center}
.field-hidden{position:absolute;left:-9999px}
input[type=range]{-webkit-appearance:none;width:100%;height:2px;background:var(--line);border-radius:2px;padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:3px solid var(--ink);box-shadow:0 0 0 1px var(--gold)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid var(--ink)}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1.05fr);gap:clamp(20px,3vw,44px)}
@media(max-width:840px){.calc{grid-template-columns:1fr}}
.calc-out{background:linear-gradient(165deg,rgba(212,175,106,.10),rgba(6,7,10,.4));border:1px solid var(--line);
  border-radius:3px;padding:clamp(22px,3vw,32px);align-self:start;position:sticky;top:88px}
@media(max-width:840px){.calc-out{position:static}}
.out-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.out-row:last-child{border-bottom:0}
.out-row span{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sand-dim)}
.out-row b{font-family:var(--serif);font-size:1.5rem;color:var(--white);font-weight:400}
.out-row.hero-row b{font-size:clamp(1.9rem,4vw,2.6rem);color:var(--gold)}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.slider-head b{font-family:var(--serif);font-size:1.2rem;color:var(--gold);font-weight:400}

/* visa meter */
.meter{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:18px 0 10px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi));
  width:0;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.verdict{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:3px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.02);font-size:.92rem}
.verdict.ok{border-color:rgba(95,191,139,.5);background:rgba(95,191,139,.08);color:#BFF0D5}
.verdict.no{color:#D9CFBB}

/* qty stepper */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-soft);border-radius:2px;overflow:hidden}
.qty button{width:34px;height:34px;background:rgba(255,255,255,.03);border:0;color:var(--gold);font-size:1rem;cursor:pointer;transition:.25s}
.qty button:hover{background:var(--gold);color:#0a0a0a}
.qty b{min-width:34px;text-align:center;font-family:var(--serif);font-size:1.05rem;color:var(--white);font-weight:400}

/* ---------- timeline / steps ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step-row{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);
  padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line-soft);align-items:start}
.step-row::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--gold);opacity:.55;line-height:1}
.step-row h3{margin-bottom:.4em}
.step-row p{margin:0;max-width:62ch}

/* payment plan bar */
.plan-bar{display:flex;height:44px;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:18px 0 10px}
.plan-seg{display:flex;align-items:center;justify-content:center;font-size:.72rem;letter-spacing:.1em;
  border-right:1px solid rgba(6,7,10,.5);color:#0B0B0B;font-weight:600}
.plan-seg:last-child{border-right:0}
.plan-seg.a{background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.plan-seg.b{background:rgba(212,175,106,.28);color:var(--sand)}
.plan-seg.c{background:rgba(212,175,106,.10);color:var(--sand-dim)}
.plan-key{display:flex;flex-wrap:wrap;gap:16px;font-size:.76rem;color:var(--sand-dim)}
.plan-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px}

/* ---------- portrait / advisor ---------- */
/* ---------- the advisor plate ------------------------------------------------
   The portrait is the ORIGINAL studio photograph, unaltered. An earlier version
   cut him out of his backdrop and the background removal ate 25,000 pixels of
   his white shirt, because shirt and backdrop sat at the same brightness. There
   is no reliable way to separate those two by luminance, so the photo is not
   masked at all any more — it is framed instead, like a plate in a magazine.
   Nothing here touches the image itself; the frame does the work. */
.portrait{
  position:relative;max-width:520px;margin-inline:auto;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:#0B0E14;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.92);
}
.portrait picture{display:block}
.portrait img{width:100%;height:auto;display:block}
/* a whisper of vignette on the outer edge only — it seats the bright plate
   against the obsidian page without darkening his face or his shirt */
.portrait picture::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  box-shadow:inset 0 0 70px 18px rgba(8,10,16,.30);
}
.portrait figcaption{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 20px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0C1017,#080B11);
}
.portrait figcaption b{
  font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--white);letter-spacing:.01em;
}
.portrait figcaption span{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.creds{display:grid;gap:2px;margin:24px 0 0;padding:0;list-style:none}
.creds li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:.94rem;color:#CFC7B8}
.creds li::before{content:"";flex:0 0 6px;height:6px;margin-top:.55em;background:var(--gold);transform:rotate(45deg)}

/* ---------- quote ---------- */
.quote{border-left:2px solid var(--gold);padding:6px 0 6px clamp(20px,3vw,34px);margin:0 0 1.6em;
  font-family:var(--serif);font-size:clamp(1.2rem,2.3vw,1.7rem);line-height:1.42;color:var(--white)}
.quote cite{display:block;font-family:var(--sans);font-size:.72rem;font-style:normal;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-top:1em}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line-soft)}
summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.35rem);color:var(--white)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.4rem;font-family:var(--sans);font-weight:200;transition:.3s}
details[open] summary::after{content:"–"}
details p{padding:0 44px 22px 0;margin:0;max-width:82ch}
details+details{margin-top:0}

/* ---------- band / cta ---------- */
.band{background:linear-gradient(150deg,#120D04,#06070A 55%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-gold{background:linear-gradient(140deg,rgba(212,175,106,.16),rgba(6,7,10,.2));border-block:1px solid var(--line)}

/* ---------- footer ---------- */
footer{background:#04050708;border-top:1px solid var(--line);padding:clamp(50px,7vw,80px) 0 30px;font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,50px)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a:hover{color:var(--gold)}
.legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-soft);color:#7E7768;font-size:.76rem;line-height:1.7}

/* ---------- floating whatsapp ---------- */
.wa-fab{
  position:fixed;right:18px;bottom:18px;z-index:55;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 12px 34px -8px rgba(37,211,102,.6);
  transition:transform .3s;
}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:28px;height:28px;fill:#052b14}

/* ---------- misc ---------- */
.notice{border:1px solid var(--line);background:rgba(212,175,106,.05);border-radius:3px;padding:18px 20px;font-size:.86rem;color:#C5BDAE}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.crumbs{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-dim);margin-bottom:18px}
.crumbs a:hover{color:var(--gold)}
.page-head{padding-top:clamp(120px,15vh,180px)}
.two-col-text{columns:2;column-gap:clamp(24px,4vw,54px)}
@media(max-width:760px){.two-col-text{columns:1}}
.center{text-align:center}
.mx{margin-inline:auto}

/* ---------- phone ----------------------------------------------------------
   Most of the primary audience — overseas Filipinos in the Gulf — arrives on a
   phone, usually from a WhatsApp or Facebook link. This block is not an
   afterthought: the nav has to fit, the hero has to stay legible over the
   skyline, and the WhatsApp button must never collide with anything. */
@media(max-width:640px){
  .nav{padding:10px 14px;gap:10px}
  .nav-cta .btn{display:none}            /* the drawer carries the CTA instead */
  .fx button{padding:7px 9px;font-size:.62rem}
  .brand-mark{width:28px;height:28px;flex-basis:28px}
  .brand-txt b{font-size:.88rem}
  .brand-txt span{font-size:.5rem;letter-spacing:.22em}
  .scroll-cue{display:none}              /* it collided with the second CTA */
  .hero::after{
    background:linear-gradient(180deg,rgba(6,7,10,.80) 0%,rgba(6,7,10,.30) 22%,rgba(6,7,10,.72) 58%,var(--ink) 100%);
  }
  .hero .btn-row .btn{width:100%}
  .wa-fab{width:52px;height:52px;right:14px;bottom:14px}
  .out-row{flex-wrap:wrap}
  .step-row{grid-template-columns:1fr;gap:8px}
  .step-row::before{font-size:1.4rem}
  th,td{padding:12px 13px}
  .plan-seg{font-size:.6rem}
}
/* the share button installs bottom-left; keep it clear of the WhatsApp FAB */
@media(max-width:400px){ .hero h1{font-size:2.35rem} }

/* Short viewports — laptop windows and landscape phones. The hero is 100svh,
   so on a 500px-tall window the scroll cue lands on top of the second CTA. */
@media(max-height:820px),(max-width:1100px){ .scroll-cue{display:none} }


/* ---------- real developer imagery -------------------------------------------
   Everything visual on this site is now an actual render from the developer of
   that building. Nothing is stock, nothing is procedurally generated. These
   rules exist to make photographs sit correctly under the type. */
.hero-img{position:absolute;inset:0;z-index:0;display:block}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
@media(max-aspect-ratio:1/1){.hero-img img{object-position:center 30%}}
.hero-credit{
  position:absolute;right:var(--rail);bottom:16px;z-index:3;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,225,210,.5);
}
@media(max-width:860px){.hero-credit{left:var(--rail);right:auto;bottom:8px;font-size:.55rem}}

/* the card image sits in the same box the elevation drawing used */
.pcard .massing picture{position:absolute;inset:0;display:block}
.pcard .massing img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .massing img{transform:scale(1.045)}
.pcard .massing::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,10,.10) 0%,rgba(6,7,10,0) 35%,rgba(6,7,10,.72) 100%);
}
.img-credit{
  position:absolute;right:9px;top:9px;z-index:2;
  font-size:.52rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,253,248,.62);background:rgba(6,7,10,.42);backdrop-filter:blur(4px);
  padding:4px 7px;border-radius:2px;
}
/* property-page hero image */
.shot{position:relative;border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;background:#0B0E14}
.shot img{width:100%;height:auto;display:block}
.shot .img-credit{right:auto;left:9px;bottom:9px;top:auto}
.shot-note{font-size:.78rem;color:var(--sand-dim);margin-top:12px;line-height:1.6}

/* ==========================================================================
   THE GALLERY — a pinned, full-bleed sequence
   --------------------------------------------------------------------------
   The section is N screens tall. The stage inside it is sticky, so the picture
   holds still while the page scrolls past, and each screen of scroll advances
   one frame. It is the closest a website gets to walking somebody through a
   building: one image at a time, full width, with a line of copy that says
   what they are looking at.

   Degrades honestly: without JS the frames stack as a normal vertical gallery
   (see the <noscript> block each gallery ships with).
   ========================================================================== */
.gal{position:relative;background:#04050A}
.gal-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.gal-frames{position:absolute;inset:0}
.gal-frame{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 1s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.gal-frame.on{opacity:1}
.gal-frame picture,.gal-frame img{position:absolute;inset:0;width:100%;height:100%;display:block}
.gal-frame img{
  object-fit:cover;transform:scale(1.06);
  transition:transform 7s cubic-bezier(.2,.5,.3,1);
}
.gal-frame.on img{transform:scale(1)}
/* the scrim: type has to stay readable over a bright pool render */
.gal-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,5,10,.72) 0%,rgba(4,5,10,0) 26%,rgba(4,5,10,0) 52%,rgba(4,5,10,.88) 100%),
    linear-gradient(90deg,rgba(4,5,10,.60) 0%,rgba(4,5,10,0) 46%);
}
.gal-meta{
  position:relative;z-index:2;width:100%;
  padding:0 var(--rail) clamp(34px,7vh,70px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.gal-text{max-width:38ch}
.gal-count{
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin:0 0 14px;font-variant-numeric:tabular-nums;
}
.gal-count b{font-weight:500;color:var(--gold-hi)}
.gal-cap{
  font-family:var(--serif);font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1.06;
  color:var(--white);margin:0 0 .32em;text-wrap:balance;
}
.gal-sub{font-size:.95rem;color:#CFC7B8;margin:0;max-width:44ch}
.gal-credit{
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,225,210,.45);white-space:nowrap;
}
/* the rail: a scrubbable index of the set, and the only chrome on screen */
.gal-rail{
  position:absolute;right:var(--rail);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:10px;
}
.gal-rail button{
  width:2px;height:26px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(233,225,210,.22);transition:background .4s,height .4s;
}
.gal-rail button.on{background:var(--gold);height:40px}
.gal-rail button:hover{background:var(--gold-hi)}
.gal-track{pointer-events:none}
@media(max-width:760px){
  .gal-meta{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:clamp(28px,5vh,48px)}
  .gal-rail{right:10px;gap:7px}
  .gal-rail button{height:18px}
  .gal-rail button.on{height:28px}
  .gal-sub{font-size:.88rem}
}
@media(prefers-reduced-motion:reduce){
  .gal-frame,.gal-frame img{transition:none}
  .gal-frame img{transform:none}
}