/* Ayamen R36.11 — Azure-reference runtime restoration and targeted UI stabilization.
   This file intentionally avoids changing landing animation frames or slider geometry. */

/* --------------------------------------------------------------------------
   Header: shorter, smaller brand, text-only CTA
   -------------------------------------------------------------------------- */
@media (min-width:980px){
  .header .header__content{height:84px;min-height:84px;padding-top:0;padding-bottom:0}
  .header-sticky-placeholder{height:84px}
  .header .header__logo img,
  .header .header__logo svg{width:clamp(165px,11vw,215px)!important;max-height:54px!important}
}
@media (max-width:979px){
  .header .header__content{height:60px;min-height:60px;padding-top:0;padding-bottom:0}
  .header-sticky-placeholder{height:60px}
  .header .header__logo img,
  .header .header__logo svg{width:clamp(126px,34vw,150px)!important;max-height:42px!important}
}
.header .group--header{gap:clamp(.65rem,1.2vw,1.25rem)}
.header .group--header > a.btn--primary,
.header .group--header > a.btn--primary.btn--clone{
  width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:inherit!important;
  -webkit-text-fill-color:currentColor!important
}
.header .group--header > a.btn--primary .btn__content{
  min-width:0!important;min-height:0!important;padding:0!important;gap:0!important
}
.header .group--header > a.btn--primary .btn__icon{display:none!important}
.header .group--header > a.btn--primary .btn__text{font-size:inherit;line-height:inherit;white-space:nowrap}
.header .group--header > a.btn--primary::before,
.header .group--header > a.btn--primary::after,
.header .group--header > a.btn--primary .btn__content::before,
.header .group--header > a.btn--primary .btn__content::after{display:none!important}

/* --------------------------------------------------------------------------
   Full-screen menu: one size system on every route and both languages
   -------------------------------------------------------------------------- */
.modal.menu .menu__top{align-items:center;min-height:clamp(2.75rem,4vw,4.5rem)}
.modal.menu .menu__logo{
  display:flex!important;align-items:center!important;width:clamp(150px,13vw,205px)!important;
  height:auto!important;max-height:58px!important;margin:0!important;transform:none!important
}
.modal.menu .menu__logo img,
.modal.menu .menu__logo svg{display:block;width:100%!important;height:auto!important;max-height:58px!important;object-fit:contain}
.modal.menu .menu__list{gap:clamp(1rem,2.2vh,1.75rem)!important}
.modal.menu .menu__list > a{
  font-size:clamp(2.75rem,4.35vw,5.25rem)!important;line-height:.96!important;
  margin:0!important;max-width:100%;white-space:normal
}
@media (max-width:979px){
  .modal.menu .menu__logo{width:clamp(132px,38vw,175px)!important;max-height:48px!important}
  .modal.menu .menu__logo img,.modal.menu .menu__logo svg{max-height:48px!important}
  .modal.menu .menu__list{gap:clamp(.8rem,2vh,1.25rem)!important}
  .modal.menu .menu__list > a{font-size:clamp(2.15rem,10.5vw,3.55rem)!important;line-height:1!important}
}

/* --------------------------------------------------------------------------
   Arabic typography: Camel for display text, readable sans for support copy
   -------------------------------------------------------------------------- */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .h1,
html[lang="ar"] .h2,
html[lang="ar"] .h3,
html[lang="ar"] .text-h1-lg,
html[lang="ar"] .text-h1-lim,
html[lang="ar"] .text-h2-lg,
html[lang="ar"] .text-h2-sm,
html[lang="ar"] .text-lead,
html[lang="ar"] .text-lead-xl,
html[lang="ar"] .l-exquisite-content__title,
html[lang="ar"] .l-exquisite-mob-card__content-title,
html[lang="ar"] .l-gallery__title,
html[lang="ar"] .l-choice__title,
html[lang="ar"] .l-services-mob-card__content-title,
html[lang="ar"] .l-spaces-title{
  font-family:var(--ayamen-ar-display)!important;font-style:normal!important;font-weight:500!important;
  letter-spacing:0!important;word-break:normal!important;overflow-wrap:normal!important
}
html[lang="ar"] p:not(.h1):not(.h2):not(.h3):not(.text-lead):not(.text-lead-xl),
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] .text-small,
html[lang="ar"] .text-tiny{
  font-family:var(--ayamen-ar-text)!important
}
html[lang="ar"] .modal.menu .menu__list > a{font-family:var(--ayamen-ar-display)!important}

/* --------------------------------------------------------------------------
   Landing: preserve every existing frame; only correct Arabic metrics/wrapping
   -------------------------------------------------------------------------- */
html[lang="ar"] body.ayamen-landing-r3 :is(
  .l-intro-section h1,
  .l-home__title,
  .l-exquisite-content__title,
  .l-spaces-title,
  #gallery .l-gallery__content h2,
  .l-choice__title,
  #services .l-services-gallery__title h2,
  #services .l-services-card__title h3,
  #contact h2
){text-wrap:balance;word-break:normal!important;overflow-wrap:normal!important}
html[lang="ar"] body.ayamen-landing-r3 .l-intro-section h1{line-height:1.04!important}
html[lang="ar"] body.ayamen-landing-r3 .l-home__title{line-height:1.02!important}
html[lang="ar"] body.ayamen-landing-r3 .l-exquisite-content__title,
html[lang="ar"] body.ayamen-landing-r3 #gallery .l-gallery__content h2,
html[lang="ar"] body.ayamen-landing-r3 .l-choice__title{line-height:1.04!important}
html[lang="ar"] body.ayamen-landing-r3 #services .l-services-gallery__title h2{line-height:.9!important}
html[lang="ar"] body.ayamen-landing-r3 #services .l-services-card__title h3{line-height:1.05!important}

/* The retained Arabic landing form heading was inheriting the natural-copy
   line-height (1.58), causing it to occupy several hundred pixels. */
html[lang="ar"] body.ayamen-landing-r3 #contact h2[data-ar-natural-text="true"]{
  width:min(100%,8ch);max-width:8ch;margin-inline-start:auto;margin-inline-end:0;
  line-height:1.02!important;overflow:visible!important
}
html[lang="ar"] body.ayamen-landing-r3 #contact .l-contact-form{
  direction:rtl;text-align:right;max-width:100%
}
html[lang="ar"] body.ayamen-landing-r3 #contact .form-footer{
  direction:rtl;align-items:center;gap:1.25rem
}
html[lang="ar"] body.ayamen-landing-r3 #contact .form-footer > p{margin-inline-end:0;max-width:28rem}
html[lang="ar"] body.ayamen-landing-r3 #contact .form-footer > button{margin-inline-start:auto!important;margin-inline-end:0!important}
@media (max-width:979px){
  html[lang="ar"] body.ayamen-landing-r3 #contact h2[data-ar-natural-text="true"]{width:100%;max-width:100%;margin:0;line-height:1.04!important}
  html[lang="ar"] body.ayamen-landing-r3 #contact .form-footer{align-items:stretch}
  html[lang="ar"] body.ayamen-landing-r3 #contact .form-footer > button{margin-inline-start:0!important;width:100%}
}

/* Keep titles inside the desktop slider panes without changing pane height,
   positioning, clipping or controller transforms. */
@media (min-width:980px){
  html[lang="ar"] body.ayamen-landing-r3 #exquisite .l-exquisite-content__title{max-width:9.5ch}
  html[lang="ar"] body.ayamen-landing-r3 #gallery .l-gallery__content h2{max-width:10ch}
  html[lang="ar"] body.ayamen-landing-r3 #choice .l-choice__title{max-width:8.5ch}
}
@media (min-width:1440px) and (max-height:800px){
  html[lang="ar"] body.ayamen-landing-r3 #exquisite .l-exquisite-content__title{font-size:3.65rem!important;line-height:1.02!important}
  html[lang="ar"] body.ayamen-landing-r3 #choice .l-choice__title{font-size:clamp(5rem,6.3vw,7.5rem)!important}
}
@media (max-width:567px){
  html[lang="ar"] body.ayamen-landing-r3 .l-intro-section h1{font-size:clamp(2.9rem,13.4vw,3.5rem)!important;line-height:1.05!important}
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-gallery__title h2{font-size:clamp(3.2rem,15vw,4.1rem)!important}
  html[lang="ar"] body.ayamen-landing-r3 #services .l-services-mob-card__content-title,
  html[lang="ar"] body.ayamen-landing-r3 #services .l-exquisite-mob-card__content-title{
    font-size:clamp(2rem,9.2vw,3rem)!important;line-height:1.06!important;max-width:100%!important
  }
}


/* Contact map component: the class belongs on the actual content section. */
.ayamen-contact-page #content.ayamen-contact-map-v3 .c-intro__inner{overflow:hidden}
.ayamen-contact-page #content.ayamen-contact-map-v3 h1,
.ayamen-contact-page #content.ayamen-contact-map-v3 .c-intro__button,
.ayamen-contact-page #content.ayamen-contact-map-v3 .c-intro__bottom{position:relative;z-index:2}

/* --------------------------------------------------------------------------
   Arabic Contact route: right-side heading/copy, left-side map, stable columns
   -------------------------------------------------------------------------- */
html[lang="ar"] .ayamen-contact-page .ayamen-contact-map-v3 .c-intro__inner{overflow:hidden}
html[lang="ar"] .ayamen-contact-page .ayamen-contact-map-v3 h1{
  width:min(48vw,7ch)!important;max-width:7ch!important;margin-left:auto!important;
  margin-right:clamp(2rem,6vw,7rem)!important;font-family:var(--ayamen-ar-display)!important;
  font-size:clamp(5rem,7.2vw,8.8rem)!important;line-height:.94!important;text-align:right!important
}
html[lang="ar"] .ayamen-contact-page .ayamen-contact-map-v3 .c-intro__button{
  width:max-content;margin-left:auto!important;margin-right:clamp(2rem,6vw,7rem)!important
}
html[lang="ar"] .ayamen-contact-page .ayamen-contact-map-v3 .c-intro__bottom{
  width:100%;margin-left:0!important;margin-right:0!important;direction:rtl
}
html[lang="ar"] .ayamen-contact-page .c-intro__contact{direction:rtl;width:100%;max-width:100%!important}
html[lang="ar"] .ayamen-contact-page .c-intro__contact > div{min-width:0;text-align:right}
html[lang="ar"] .ayamen-contact-page .c-intro__contact a[href^="tel:"],
html[lang="ar"] .ayamen-contact-page .c-intro__contact a[href^="mailto:"]{direction:ltr!important;text-align:right!important;unicode-bidi:isolate}
@media (max-width:979px){
  html[lang="ar"] .ayamen-contact-page .ayamen-contact-map-v3 h1{
    width:min(100%,8ch)!important;max-width:8ch!important;margin:0 1.25rem 1.5rem auto!important;
    font-size:clamp(3.7rem,16vw,6rem)!important;line-height:.98!important
  }
  html[lang="ar"] .ayamen-contact-page .ayamen-contact-map-v3 .c-intro__button{margin:0 1.25rem 2rem auto!important}
  html[lang="ar"] .ayamen-contact-page .c-intro__contact{flex-direction:column!important;gap:1.5rem}
  html[lang="ar"] .ayamen-contact-page .c-intro__contact > div{width:100%;padding:0!important}
}

/* Gallery arrows are removed from HTML. This is a defensive fallback for
   cached markup while retaining thumbnails, swipe and keyboard navigation. */
[data-project-detail] .pd-arrow.pd-prev,
[data-project-detail] .pd-arrow.pd-next{display:none!important}

/* Contact-map proportions use viewport units so the fluid root font size cannot
   collapse the intended text/map split on wide screens. */
@media (min-width:768px){
  .ayamen-contact-page #content.ayamen-contact-map-v3 .ayamen-contact-map-v3__embed{
    left:42vw!important;right:0!important
  }
  html[lang="ar"] .ayamen-contact-page #content.ayamen-contact-map-v3 .ayamen-contact-map-v3__embed{
    left:0!important;right:42vw!important
  }
}
@media (min-width:980px){
  html[lang="ar"] .ayamen-contact-page #content.ayamen-contact-map-v3 h1{
    width:min(48vw,9ch)!important;max-width:9ch!important;
    margin-left:auto!important;margin-right:clamp(6rem,7vw,14rem)!important;
    font-size:clamp(5.6rem,6.1vw,8.6rem)!important;line-height:.98!important
  }
  html[lang="ar"] .ayamen-contact-page #content.ayamen-contact-map-v3 .c-intro__button{
    margin-left:auto!important;margin-right:clamp(6rem,7vw,14rem)!important
  }
}
@media (max-width:767px){
  .ayamen-contact-page #content.ayamen-contact-map-v3 .c-intro__contact-right > .btn{display:none!important}
}

/* Final header CTA lock: all route-specific button skins are intentionally
   removed so Request Details / Contact reads like the neighbouring nav text. */
.header .group--header > a.btn--primary,
.header .group--header > a.btn--primary.btn--clone,
body:has(.ayp-index) .header .group--header > a.btn--primary,
body:has([data-project-detail]) .header .group--header > a.btn--primary,
body.ayamen-projects-route .header .group--header > a.btn--primary,
body.ayamen-projects-v14 .header .group--header > a.btn--primary{
  background:none!important;background-color:transparent!important;background-image:none!important;
  border:0!important;border-color:transparent!important;box-shadow:none!important
}

/* The wide menu logo uses dark-blue lettering. On the dark mobile menu surface,
   render the complete mark in white so the wordmark cannot disappear. */
@media (max-width:979px){
  .modal.menu .menu__logo img{filter:brightness(0) invert(1)!important}
}
@media (max-width:979px){
  .modal.menu .menu__logo .ayamen-brand-svg{color:#fff!important}
}
@media (max-width:979px){
  .modal.menu .menu__top .btn--square.js-modal-close{
    color:#fff!important;border-color:rgba(255,255,255,.55)!important
  }
}

/* R36.11 — restore the reference responsive visibility contract.
   The accumulated desktop Services overrides used display:flex/grid!important,
   which overrode the original is-hidden--sm-down utility and rendered the
   desktop slider on top of the phone card list. */
@media (max-width:567px) and (max-aspect-ratio:13/9),
       (max-width:667px) and (min-aspect-ratio:13/9),
       (max-width:979px) and (max-height:415px) and (min-aspect-ratio:13/9){
  html body.ayamen-landing-r3 #services .l-services-card.is-hidden--sm-down{
    display:none!important;
  }
}


/* R52 — Arabic layout containment without changing controller geometry. */
html[lang="ar"] :where(main h1,main h2,main h3){max-inline-size:100%;word-break:normal;overflow-wrap:normal;text-wrap:balance}
html[lang="ar"] :where(a[href^="tel:"],a[href^="mailto:"],input[type="tel"],input[type="email"],.ltr,.text-ltr,bdi[dir="ltr"]){direction:ltr!important;unicode-bidi:isolate!important;text-align:left}
html[lang="ar"] body.ayamen-landing-r3 #contact h2[data-ar-natural-text="true"]{font-size:clamp(4.8rem,6.25vw,7.8rem)!important;line-height:1.02!important;max-width:8ch!important;margin-block:0 clamp(2rem,4vw,4rem)!important}
html[lang="ar"] body.ayamen-landing-r3 #contact .form-control{min-width:0}
html[lang="ar"] body.ayamen-landing-r3 #contact .form-label{inset-inline-start:auto;inset-inline-end:0;text-align:right}
html[lang="ar"] .ayamen-contact-page #content.ayamen-contact-map-v3 h1{overflow-wrap:normal!important;word-break:normal!important;text-wrap:balance;max-inline-size:8ch!important}
html[lang="ar"] .ayr-project :where(.ayr-hero h1,.ayr-story__band h2,.ayr-gallery__head h2,.ayr-units__head h2,.ayr-commitments h2,.ayr-related h2){max-width:100%;line-height:1.08!important;text-wrap:balance}
html[lang="ar"] .ayr-about__facts,html[lang="ar"] .ayr-unit__specs,html[lang="ar"] .ayr-commitments__grid{text-align:right}
@media(max-width:979px){html[lang="ar"] body.ayamen-landing-r3 #contact h2[data-ar-natural-text="true"]{font-size:clamp(3.25rem,13.5vw,5.1rem)!important;max-width:100%!important;margin:0 0 2rem!important}html[lang="ar"] .ayamen-contact-page #content.ayamen-contact-map-v3 h1{font-size:clamp(3.3rem,14vw,5.3rem)!important;line-height:1.04!important;max-width:8ch!important}}