/* Readable slide layouts on narrow screens, in either language. */
.language-bar-name{min-width:0}
.project-topbar h2,.project-hero>div,.city-project>span{min-width:0}
.price-filters select{max-width:100%}
html[lang="en"] .slide,html[lang="en"] .project-main,html[lang="en"] .viewer-head{text-align:left}
html[lang="en"] .project-hero p{line-height:1.65}
html[lang="en"] .price-filters label{line-height:1.5}
html[lang="en"] .model-table th{line-height:1.4}

@media screen and (max-width:800px){
  #deck{display:block}
  .stage{width:100%;height:100%;transform:none;box-shadow:none}
  .slide,html[lang="en"] .slide{padding:88px 24px 134px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:smooth}
  .slide>*{flex-shrink:0}
  .slide.active{animation:none}
  .deck-head{inset:23px 24px auto}
  .deck-head .logo{width:165px;height:27px}
  .head-note{display:none}
  .deck-footer{inset:auto 0 0;padding:12px 22px 15px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:7px 12px;min-height:105px}
  .dark-slide .deck-footer{background:var(--navy)}
  .deck-footer .current-title{grid-column:1/-1;grid-row:1;font-size:13px;line-height:1.3}
  .controls{justify-content:flex-start;gap:8px}
  html[lang="en"] .controls{justify-content:flex-end}
  .icon-btn{min-width:40px;height:40px;font-size:23px}
  .slide-count{min-width:55px;font-size:14px}
  .tools{gap:10px;justify-content:flex-end}
  .tool{font-size:12px;min-height:40px;padding:4px 0}
  .side-projects{top:17px;bottom:auto;right:auto;left:24px;width:auto;max-width:145px;padding:8px 11px;border-radius:4px;font-size:12px;line-height:1.3;min-height:40px}
  .side-projects span,.side-projects br{display:none}
  html[lang="en"] .side-projects{right:24px;left:auto;border-radius:4px;font-size:12px}
  h1,html[lang="en"] h1{font-size:44px;line-height:1.15;letter-spacing:-.6px}
  h2,html[lang="en"] h2{font-size:30px;line-height:1.25;letter-spacing:-.4px;margin-bottom:16px}
  h3,html[lang="en"] .line-item h3{font-size:22px}
  .eyebrow,html[lang="en"] .eyebrow{font-size:12px;letter-spacing:.5px;margin-bottom:12px}
  .lead,html[lang="en"] .lead,.hero .lead,html[lang="en"] .hero .lead{font-size:18px;line-height:1.6;max-width:100%}
  .small{font-size:14px}
  .btn{font-size:16px;padding:12px 18px;min-height:44px}
  .hero .cover-photo,html[lang="en"] .hero .cover-photo{width:100%;height:100%;inset:0;opacity:.28}
  .hero:after,html[lang="en"] .hero:after{background:linear-gradient(180deg,#032e4d 0%,#032e4dcc 45%,#032e4d 100%)}
  .hero-copy{width:100%;padding-top:12px}
  .hero-meta{gap:28px;margin-top:24px;flex-wrap:wrap}
  .hero-meta strong{font-size:31px}.hero-meta span,html[lang="en"] .hero-meta span{font-size:14px}
  .image-credit,html[lang="en"] .image-credit{position:relative;inset:auto;margin-top:22px;align-self:flex-start;font-size:10px;max-width:100%}
  .city-list{grid-template-columns:1fr 1fr;gap:0 22px}
  .city-project{padding:17px 0;gap:10px}.city-project .thumb,.city-project .placeholder-thumb{width:70px;height:80px;flex-shrink:0}
  .city-project strong,html[lang="en"] .city-project strong{font-size:20px;line-height:1.3}
  .city-project .city{font-size:14px}.city-project .arrow{font-size:21px}
  .portfolio-summary{font-size:16px;margin-top:22px}
  .commissions{gap:26px;margin-top:10px}.commission-block{padding-top:18px}.big-num{font-size:62px;letter-spacing:-2px}
  .commission-block .money{font-size:19px}.commission-block p,html[lang="en"] .commission-block p{font-size:17px;margin-top:12px}
  .calc-row{flex-wrap:wrap;gap:16px;margin-top:24px}.calc-input{gap:10px}.calc-total{font-size:27px}
  .payment-foot{font-size:15px;gap:8px;flex-wrap:wrap}.payment-foot strong{font-size:26px}
  .range-hero{gap:18px;flex-wrap:wrap;padding:22px 0}.range-side strong{font-size:42px}.range-side span{font-size:15px}
  .slide[data-title="الأسعار"]>div[style]{flex-wrap:wrap}.slide[data-title="الأسعار"] label{font-size:17px!important}
  .support-layout{grid-template-columns:1fr;gap:24px;margin-top:14px}.support-number{font-size:84px;letter-spacing:-3px}
  .support-layout>div>p{font-size:21px!important}
  .support-copy,html[lang="en"] .support-copy{padding:0;border:0}.support-copy .support-row{padding:14px 0}
  .support-row h3,html[lang="en"] .support-row h3{font-size:21px}.support-row p,html[lang="en"] .support-row p{font-size:17px}
  .audiences{gap:30px;margin-top:20px}.audience-col h3,html[lang="en"] .audience-col h3{font-size:22px}
  .plain-list li,html[lang="en"] .plain-list li{font-size:18px}
  .journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:20px}.journey-step{padding-top:14px}
  .journey-step b{font-size:30px}.journey-step h3,html[lang="en"] .journey-step h3{font-size:20px;margin-top:10px}.journey-step p,html[lang="en"] .journey-step p{font-size:17px}
  .statement,html[lang="en"] .statement{font-size:20px;margin-top:28px;padding:8px 16px}
  .picture-half,html[lang="en"] .picture-half{width:100%;inset:0;opacity:.08}.picture-fade{display:none}
  .marketing-copy{width:100%}.marketing-copy .lead{font-size:18px!important}.marketing-copy .plain-list li,html[lang="en"] .marketing-copy .plain-list li{font-size:18px}
  .showhomes{gap:24px}.showhome{height:220px}.showhome figcaption{font-size:22px}
  .slide[data-title="زيارة المشروع"]>p:last-child{font-size:18px!important}
  .contact-cities{gap:10px;font-size:19px;flex-wrap:wrap;margin-top:20px;padding:16px 0}
  .list-lines{gap:0 24px}.list-lines .line-item{padding:18px 0;gap:12px}.line-item p,html[lang="en"] .line-item p{font-size:17px}
  .booking-options{gap:28px;margin-top:20px}.booking-option p{font-size:18px}.booking-option .option-num{font-size:40px}
  .benefits{gap:0 24px}.benefit h3,html[lang="en"] .benefit h3{font-size:21px}.benefit p,html[lang="en"] .benefit p{font-size:17px}
  .requirements li,html[lang="en"] .requirements li{font-size:19px;gap:15px;padding:18px 0}.requirements li:before{font-size:21px;width:28px}
  .closing{justify-content:flex-start}.closing h2,html[lang="en"] .closing h2{font-size:40px;max-width:100%;margin-top:18px}
  .closing .lead,html[lang="en"] .closing .lead{font-size:20px}.closing-mark,html[lang="en"] .closing-mark{font-size:160px;right:auto;left:24px;bottom:160px}
  .closing .small{font-size:15px}
  .viewer-head{flex-wrap:wrap}.viewer-head>div:last-child{flex-wrap:wrap}
}
@media screen and (max-width:520px){
  .slide,html[lang="en"] .slide{padding-inline:22px}
  .deck-head{inset-inline:22px}.deck-head .logo{width:145px;height:24px}
  .side-projects{left:22px;max-width:135px}html[lang="en"] .side-projects{right:22px;left:auto}
  h1,html[lang="en"] h1{font-size:39px}
  h2,html[lang="en"] h2{font-size:28px}
  .city-list,.commissions,.showhomes,.booking-options,.benefits,.list-lines{grid-template-columns:1fr}
  .city-project .thumb,.city-project .placeholder-thumb{width:80px;height:88px}
  .city-project strong,html[lang="en"] .city-project strong{font-size:23px}
  .audiences{flex-direction:column;gap:18px}.plain-list{margin-top:12px}
  .commissions{gap:24px}.commission-block{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  .commission-block .big-num{font-size:49px;margin:0}.commission-block .money{font-size:16px}.commission-block p{grid-column:1/-1}
  .range-side strong{font-size:34px}.range-hero{gap:14px}.range-divider{font-size:17px}
  .showhome{height:230px}.closing h2,html[lang="en"] .closing h2{font-size:35px}
  .project-topbar{gap:12px;align-items:flex-start}.project-topbar .btn{flex-shrink:0}
  .viewer-controls{flex-wrap:wrap}.viewer-controls select{max-width:115px}
}
@media screen and (max-width:360px){
  .deck-footer{padding-inline:14px;column-gap:8px}.tools{gap:7px}.tool{font-size:11px}.controls{gap:6px}.slide-count{min-width:45px}
  .deck-head .logo{width:125px}.journey{grid-template-columns:1fr}
}