.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.hero-photo{
  inset:0!important;
}

.hero-grid{
  justify-content:center!important;
}

.hero-brand-focus{
  width:100%!important;
  max-width:none!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center!important;
  margin-inline:auto;
  padding-inline:24px;
  position:relative;
  gap:22px;
}

.hero-primary-wordmark{
  display:none!important;
}

.hero-brand-focus::before{
  content:"";
  display:block;
  width:min(68vw,860px);
  aspect-ratio:699.01 / 122.57;
  max-width:100%;
  margin-inline:auto;
  background:linear-gradient(
    115deg,
    #6f4e1e 0%,
    #9d7130 16%,
    #d6b56d 34%,
    #fff0b7 49%,
    #d1ad60 63%,
    #b38237 78%,
    #70501f 100%
  );
  -webkit-mask:url('assets/ofair-wordmark.svg?v=20260909-ofair5') center / contain no-repeat;
  mask:url('assets/ofair-wordmark.svg?v=20260909-ofair5') center / contain no-repeat;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.3));
  pointer-events:none;
}

.hero-actions-centered{
  width:100%;
  justify-content:center;
  margin-top:0!important;
}

/* Every service card now uses imagery that depicts the service itself.
   We prefer Saudi residential context where practical, and neutral hands-only /
   technician close-ups elsewhere so no unrelated people or locations dominate. */
.services .service-card{
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}

/* 01 — إدارة اتحاد الملاك: Saudi residential building / owners-association context. */
.services .service-card:nth-child(1){
  background-image:url('https://images.pexels.com/photos/16840842/pexels-photo-16840842.jpeg?auto=compress&cs=tinysrgb&w=1400')!important;
  background-position:center 52%!important;
}

/* 02 — إدارة وتشغيل المرافق: residential lobby, elevator and common-area operations. */
.services .service-card:nth-child(2){
  background-image:url('https://images.pexels.com/photos/7031907/pexels-photo-7031907.jpeg?auto=compress&cs=tinysrgb&w=1400')!important;
  background-position:center 50%!important;
}

/* 03 — الصيانة الوقائية: technician carrying out planned AC/HVAC maintenance. */
.services .service-card:nth-child(3){
  background-image:url('https://images.pexels.com/photos/32588555/pexels-photo-32588555.jpeg?auto=compress&cs=tinysrgb&w=1400')!important;
  background-position:center 48%!important;
}

/* 04 — الصيانة الطارئة: close-up of an actual plumbing repair with a wrench. */
.services .service-card:nth-child(4){
  background-image:url('https://images.pexels.com/photos/32588548/pexels-photo-32588548.jpeg?auto=compress&cs=tinysrgb&w=1400')!important;
  background-position:center 48%!important;
}

/* 05 — إدارة العقود والموردين: real-estate agreement being signed, faces excluded. */
.services .service-card:nth-child(5){
  background-image:url('https://images.pexels.com/photos/8292838/pexels-photo-8292838.jpeg?auto=compress&cs=tinysrgb&w=1400')!important;
  background-position:center 54%!important;
}

/* 06 — المتابعة والتقارير: real-estate performance report, graphs and calculator. */
.services .service-card:nth-child(6){
  background-image:url('https://images.pexels.com/photos/8292894/pexels-photo-8292894.jpeg?auto=compress&cs=tinysrgb&w=1400')!important;
  background-position:center 50%!important;
}

.services .service-overlay{
  background:
    linear-gradient(180deg,rgba(8,17,29,.12) 0%,rgba(8,17,29,.30) 44%,rgba(8,17,29,.95) 88%),
    linear-gradient(90deg,rgba(8,17,29,.18),rgba(8,17,29,.03))!important;
}

@media (max-width:980px){
  .hero-brand-focus{
    padding-inline:18px;
    gap:20px;
  }
  .hero-brand-focus::before{
    width:min(78vw,720px);
  }
}

@media (max-width:640px){
  :root{--header-h:68px}

  .site-header{
    min-height:var(--header-h);
  }
  .nav-wrap{
    height:var(--header-h)!important;
  }
  .brand img{
    width:112px!important;
    height:44px!important;
  }

  .hero{
    min-height:auto!important;
    padding:var(--header-h) 0 14px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .hero-photo{
    inset:0!important;
  }
  .hero-video iframe{
    width:auto!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    transform:translate(-50%,-48%) scale(1.28)!important;
    transform-origin:center!important;
  }
  .hero-grid{
    width:100%!important;
    min-height:350px!important;
    padding:18px 14px 12px!important;
    align-items:center!important;
  }
  .hero-brand-focus{
    width:100%!important;
    padding:0!important;
    gap:14px!important;
  }
  .hero-brand-focus::before{
    width:min(88vw,520px);
    max-width:100%;
  }
  .hero-actions-centered{
    width:min(100%,520px)!important;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px!important;
    margin-top:0!important;
  }
  .hero-actions-centered .btn{
    width:100%!important;
    min-width:0!important;
    min-height:46px;
    padding:10px 9px!important;
    font-size:13px!important;
  }

  .hero-strip{
    position:relative!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin:0 auto 0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:15px!important;
  }
  .hero-strip .glass-stat{
    min-height:78px!important;
    padding:11px 10px!important;
    gap:9px!important;
    align-items:center!important;
  }
  .hero-strip .glass-stat:nth-child(odd){
    border-left:1px solid rgba(183,154,99,.14)!important;
  }
  .hero-strip .glass-stat:nth-child(1),
  .hero-strip .glass-stat:nth-child(2){
    border-bottom:1px solid rgba(183,154,99,.14)!important;
  }
  .hero-strip .glass-stat:nth-child(2),
  .hero-strip .glass-stat:nth-child(4){
    border-left:0!important;
  }
  .hero-strip .glass-stat strong{
    font-size:12px!important;
    line-height:1.45!important;
    white-space:normal!important;
  }
  .hero-strip .glass-stat>div>span{
    margin-top:2px;
    font-size:9px!important;
    line-height:1.5!important;
    white-space:normal!important;
  }
  .cap-number{
    flex:0 0 31px!important;
    width:31px!important;
    height:31px!important;
    font-size:9px!important;
  }

  .watermark-hero{
    width:250px!important;
    left:-92px!important;
    top:14%!important;
    opacity:.055!important;
  }

  .services .service-card{
    height:240px!important;
    min-height:240px!important;
  }
}

@media (max-width:430px){
  .container{
    width:calc(100% - 24px)!important;
  }
  .hero-grid{
    min-height:325px!important;
    padding:14px 12px 10px!important;
  }
  .hero-brand-focus::before{
    width:91vw;
  }
  .hero-actions-centered{
    width:100%!important;
  }
  .hero-video iframe{
    transform:translate(-50%,-47%) scale(1.38)!important;
  }
  .hero-strip{
    width:calc(100% - 24px)!important;
  }
  .hero-strip .glass-stat{
    min-height:76px!important;
    padding:10px 8px!important;
    gap:7px!important;
  }
  .hero-strip .glass-stat strong{
    font-size:11.5px!important;
  }
  .hero-strip .glass-stat>div>span{
    font-size:8.5px!important;
  }
  .cap-number{
    flex-basis:29px!important;
    width:29px!important;
    height:29px!important;
  }
}