/* Ayamen R81 responsive foundation — shared, component-scoped rules. */
:root{
  --ay-page-gutter:clamp(18px,4.2vw,72px);
  --ay-readable:72rem;
  --ay-header-h:clamp(68px,7.5vw,96px);
  --ay-safe-vh:100svh;
  --ay-section-space:clamp(64px,9vw,150px);
}
html{scroll-padding-top:var(--ay-header-h)}
body{min-inline-size:320px}
main,section,header,footer,nav,article,aside,div{min-inline-size:0}
img,svg,video,canvas{max-inline-size:100%}
picture,img{display:block}
:is(p,li,dd,dt,.text,.text-default){text-wrap:pretty}
:is(h1,h2,h3,h4,.h1,.h2,.h3,.h4){text-wrap:balance}
:is(a,button,input,select,textarea){min-inline-size:0}
[dir="ltr"] :is(a[href^="mailto:"],a[href^="tel:"]){overflow-wrap:anywhere}

/* Header/menu safety */
.header__content{min-height:var(--ay-header-h);padding-inline:var(--ay-page-gutter)}
.header__logo,.header__logo-link{max-inline-size:min(190px,34vw)}
.header__logo img,.header__logo svg{inline-size:100%;block-size:auto}
.modal--menu .modal__scroller{max-block-size:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}

/* Content and typography safety */
.text p, .article-content p, .ayr-story__copy p, .ayr-about__top p, .ayc-contact-office__card p{max-inline-size:var(--ay-readable)}
.email,[href^="mailto:"],[href^="tel:"],bdi{unicode-bidi:isolate}

/* About projects use the original Azure stickySlider/projectsSlider CSS and controller. */

/* Project listing and local horizontal controls stay local. */
.ayr-local-nav, .ayr-residence-tabs, .projects-filter{max-inline-size:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
.ayr-local-nav::-webkit-scrollbar,.ayr-residence-tabs::-webkit-scrollbar,.projects-filter::-webkit-scrollbar{display:none}
.ayr-local-nav>*,.ayr-residence-tabs>*{flex-shrink:0}

/* Grid/card resilience */
.projects-grid, .news-grid, .ayr-related__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.projects-grid>*,.news-grid>*,.ayr-related__grid>*{min-width:0}

/* Project detail content grows with Arabic and compact screens. */
@media (max-width:979px){
  .ayr-essentials__panel,.ayr-unit-panel,.ayr-story,.ayr-about{height:auto!important;min-height:0!important}
  .ayr-hero__facts,.ayr-about__facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:520px){
  .ayr-hero__facts,.ayr-about__facts{grid-template-columns:1fr!important}
}

/* Contact map and office composition */
.ayc-contact-office{min-height:min(100svh,920px)}
.ayc-contact-office__map{min-height:440px}
@media (max-width:767px){
  .ayc-contact-office{min-height:auto}
  .ayc-contact-office__inner{min-height:auto!important}
  .ayc-contact-office__map{position:relative!important;inset:auto!important;inline-size:100%!important;block-size:55svh;min-height:380px;order:2}
  .ayc-contact-office__inner{padding-inline:var(--ay-page-gutter)!important}
}







@media (max-width:767px){






}

/* Arabic: connected shaping, generous line boxes, logical alignment. */
html[lang="ar"] body{font-kerning:normal}
html[lang="ar"] :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4){letter-spacing:0!important;line-height:1.12!important;text-align:start}
html[lang="ar"] :is(p,li,dd,dt,label,button,a,.text-default){letter-spacing:0!important;line-height:1.75}
html[lang="ar"] .ayc-contact-office__card{text-align:start}
html[lang="ar"] .ab-project__content{direction:rtl;text-align:right}
html[lang="ar"] :is([href^="mailto:"],[href^="tel:"],bdi,.ayr-stat__value){direction:ltr;unicode-bidi:isolate}

/* Short landscape screens: avoid trapping users in oversized cinematic sections. */
@media (max-height:520px) and (orientation:landscape){
  .modal--menu .modal__content{min-height:auto}
  .intro__content,.ayr-hero,.ayc-contact-office{min-height:100svh;height:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}