/*tayma-ls1*//* Tayma ready-rental page: buildings that are ready to move into, booked and paid online.
   One file for every ready-rental page (W Tower, Al Tay Gate, and every building after them).
   Each page only supplies window.PAGE: the buildings, their homes, rents and the booking amount. */
:root{--black:#0d0d0b;--paper:#f5f1e8;--paper-2:#fffdf6;--acid:#d9ff3f;--orange:#ff5a1f;--sky:#5ec5d8;--sun:#ffc93c;--pink:#ff8fa3;
  --muted:#a8a49b;--quiet:#6b665a;--line:#2a2a28;--card:#1a1a16;
  --display:Archivo,Arial,Helvetica,sans-serif;--label:Manrope,system-ui,sans-serif;--wordmark:Poppins,Archivo,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.2,.7,.3,1);--r-pill:999px;--r-card:26px;--r-soft:20px;--r-field:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--paper);font-family:var(--display);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.eyebrow{font:700 11px var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--acid)}
.ix{opacity:.55;margin-right:.8em}
.light .eyebrow{color:var(--quiet)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;border-radius:var(--r-pill);min-height:52px;padding:0 26px;font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap;background:var(--acid);color:var(--black);transition:transform .35s var(--spring)}
.btn:hover{transform:scale(1.04)}.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(245,241,232,.35)}
.btn.ink{background:var(--black);color:var(--paper)}
.btn.wa{background:#25d366;color:#06240f}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.tc{display:inline-block;font:800 10px var(--label);letter-spacing:.1em;text-transform:uppercase;background:#e9e3d3;color:var(--black);padding:3px 8px;border-radius:var(--r-pill);vertical-align:middle;margin-left:6px}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(13,13,11,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:68px}
.top .btn{margin-left:auto;min-height:42px;padding:0 18px;font-size:14px}

/* hero */
.hero{padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,70px)}
.hero h1{font-size:clamp(54px,10.5vw,170px);font-weight:900;letter-spacing:-.03em;line-height:.8;margin:18px 0 0}
.hero h1 span{color:var(--acid)}
.hero p{color:var(--muted);font-size:clamp(17px,1.6vw,20px);max-width:36em;margin:24px 0 30px}
.hero .row{display:flex;gap:10px;flex-wrap:wrap}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:clamp(36px,5vw,60px)}
.steps div{background:var(--card);border-radius:var(--r-soft);padding:16px 18px}
.steps b{display:block;font:800 11px var(--label);letter-spacing:.14em;color:var(--acid)}
.steps span{display:block;font-weight:800;font-size:17px;letter-spacing:-.02em;margin-top:6px;line-height:1.2}

/* ticker */
.ticker{background:var(--acid);color:var(--black);overflow:hidden;white-space:nowrap}
.ticker div{display:inline-flex;gap:40px;padding:12px 0;animation:tick 28s linear infinite;font:800 13px var(--label);letter-spacing:.08em;text-transform:uppercase}
.ticker span::before{content:"●";margin-right:12px;font-size:9px;vertical-align:2px}
@keyframes tick{to{transform:translateX(-50%)}}

/* buildings */
.bld{background:var(--paper);color:var(--black);padding:clamp(56px,8vw,100px) 0}
.bld h2,.book h2,.faq h2{font-size:clamp(40px,6.4vw,92px);font-weight:900;letter-spacing:-.025em;line-height:.86;margin:14px 0 30px}
.bld h2 em,.faq h2 em{font-style:normal;color:var(--orange)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.bc{background:var(--paper-2);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;border:1.5px solid transparent;transition:transform .4s var(--spring),border-color .2s}
.bc:hover{transform:translateY(-3px);border-color:var(--black)}
.bc .ph{position:relative;aspect-ratio:16/10;background:var(--black) center/cover;display:grid;place-items:center}
.bc .ph .soon{position:absolute;left:14px;top:14px;background:var(--acid);color:var(--black);font:800 11px var(--label);letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill)}
.bc .ph .ph-none{font:700 12px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bc .ph .ph-name{position:absolute;left:18px;bottom:16px;color:var(--paper);font-size:clamp(34px,4vw,54px);font-weight:900;letter-spacing:-.025em;line-height:.9}
.bc .in{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.bc .area{font:700 11px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.bc .from{display:flex;align-items:baseline;gap:8px}
.bc .from small{font:700 11px var(--label);letter-spacing:.1em;color:var(--quiet)}
.bc .from b{font-size:34px;font-weight:900;letter-spacing:-.025em;line-height:1}
.bc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bc li{font:700 12.5px var(--label);background:#efeadd;border-radius:var(--r-pill);padding:6px 11px}
.bc .btn{margin-top:auto;align-self:flex-start}

/* booking */
.book{background:var(--black);padding:clamp(56px,8vw,100px) 0}
.book h2 em{font-style:normal;color:var(--acid)}
.bk{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);gap:clamp(18px,3vw,36px);align-items:start}
.panel{background:var(--card);border-radius:var(--r-card);padding:clamp(20px,2.6vw,30px)}
.st-h{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.st-h i{font:800 12px var(--label);font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--acid);color:var(--black);flex:none}
.st-h b{font-size:20px;font-weight:900;letter-spacing:-.01em}
.st{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.st:last-child{border:0;margin:0;padding:0}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.opt{text-align:left;border:1.5px solid #2c2c26;background:#121210;border-radius:18px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:transform .35s var(--spring),border-color .2s,background .2s}
.opt:hover{transform:translateY(-2px);border-color:#4a4a40}
.opt b{font-size:17px;font-weight:900;letter-spacing:-.01em}
.opt span{font:600 12.5px var(--label);color:var(--muted)}
.opt[aria-pressed="true"]{background:var(--acid);border-color:var(--acid);color:var(--black)}.opt[aria-pressed="true"] span{color:#3d3a33}
.opt:disabled{opacity:.4;cursor:not-allowed;transform:none}
.chq{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#121210;border-radius:var(--r-pill);padding:4px}
.chq button{border:0;background:none;border-radius:var(--r-pill);min-height:42px;font-weight:800;cursor:pointer;color:var(--muted)}
.chq button[aria-pressed="true"]{background:var(--paper);color:var(--black)}
.f{display:grid;gap:6px;font:700 10.5px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.f input{background:#121210;border:1.5px solid #2c2c26;border-radius:var(--r-field);padding:13px 14px;font:600 16px var(--display);letter-spacing:0;text-transform:none;color:var(--paper);outline:none;width:100%}
.f input:focus{border-color:var(--acid)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.err{color:#ff9a7a;font:600 14px var(--label);margin:10px 0 0;min-height:1em}
.sum{position:sticky;top:90px;background:var(--paper);color:var(--black);border-radius:var(--r-card);padding:clamp(20px,2.6vw,30px)}
.sum .eyebrow{color:var(--quiet)}
.sum h3{margin:8px 0 14px;font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1}
.sum dl{margin:0;display:grid;gap:0}
.sum dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #e3ddcf;font-size:15px}
.sum dt{color:var(--quiet)}.sum dd{margin:0;font-weight:800;text-align:right}
.sum .due{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:16px 0}
.sum .due small{font:700 11px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.sum .due b{font-size:40px;font-weight:900;letter-spacing:-.025em;line-height:1}
.sum .btn{width:100%}
.sum .fine{font-size:12px;color:var(--quiet);margin:12px 0 0;line-height:1.5}
.pay{margin-top:14px;background:var(--black);color:var(--paper);border-radius:20px;padding:16px;display:grid;gap:10px}
.pay p{margin:0;font-size:14px;color:var(--muted)}
.pay b{color:var(--paper)}

/* faq + footer */
.faq{background:var(--paper);color:var(--black);padding:clamp(56px,8vw,100px) 0}
.faq details{border-top:1px solid #e3ddcf;padding:18px 0}
.faq summary{cursor:pointer;font-weight:800;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-weight:900}.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:#3d3a33;max-width:52em}
footer{background:#080807;color:var(--muted);padding:44px 0 90px;font-size:12.5px}
footer p{max-width:70em;margin:10px 0 0;line-height:1.6}
.mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;display:none}
.mbar .btn{width:100%}
@media(max-width:900px){.bk{grid-template-columns:1fr}.sum{position:relative;top:0}.steps{grid-template-columns:1fr 1fr}.mbar{display:block}.fg{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}