/* QASR ALARAEK v4.26 — homepage hero + cinematic Our Designs */

/* Hero */
body.home .q426-home-hero{
  position:relative;
  min-height:clamp(560px,76svh,780px);
  background:#160f0f;
  overflow:hidden;
  isolation:isolate;
}
body.home .q426-home-hero .hero-media,
body.home .q426-home-hero .hero-responsive-picture,
body.home .q426-home-hero .hero-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
body.home .q426-home-hero .hero-poster{
  object-fit:cover;
  object-position:center center;
  transform:scale(1.045);
  animation:q426HeroDrift 15s cubic-bezier(.2,.7,.2,1) both;
}
body.home .q426-home-hero .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:2;
}
body.home .q426-home-hero .hero-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  background:
    radial-gradient(circle at 50% 46%,rgba(0,0,0,.16) 0%,rgba(0,0,0,.33) 46%,rgba(0,0,0,.64) 100%),
    linear-gradient(180deg,rgba(17,10,9,.48) 0%,rgba(22,10,10,.43) 46%,rgba(17,8,7,.68) 100%),
    linear-gradient(90deg,rgba(59,29,30,.22),rgba(0,0,0,.08),rgba(59,29,30,.22));
}
body.home .q426-home-hero .q426-hero-copy{
  position:relative;
  z-index:4;
  min-height:clamp(560px,76svh,780px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:clamp(112px,12vw,160px);
  padding-bottom:70px;
}
body.home .q426-home-hero .q426-hero-copy h1{
  max-width:840px;
  margin:0 auto 18px!important;
  color:#fff!important;
  font-size:clamp(2.55rem,5vw,5.2rem)!important;
  line-height:1.08!important;
  font-weight:600!important;
  letter-spacing:-.035em!important;
  text-shadow:0 4px 32px rgba(0,0,0,.4);
  opacity:0;
  transform:translateY(30px) scale(.985);
  filter:blur(10px);
  animation:q426TitleReveal .92s cubic-bezier(.2,.78,.2,1) .12s forwards;
}
body.home .q426-home-hero .q426-hero-copy>p{
  max-width:650px!important;
  margin:0 auto!important;
  color:rgba(255,255,255,.9)!important;
  font-size:clamp(1rem,1.5vw,1.18rem)!important;
  line-height:1.95!important;
  text-shadow:0 3px 22px rgba(0,0,0,.38);
  opacity:0;
  transform:translateY(22px);
  filter:blur(7px);
  animation:q426CopyReveal .82s cubic-bezier(.2,.78,.2,1) .45s forwards;
}
body.home .q426-home-hero .hero-actions{
  margin-top:28px!important;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  opacity:0;
  transform:translateY(18px);
  animation:q426ActionsReveal .72s ease .76s forwards;
}
body.home .q426-home-hero .qasr-btn-light{
  background:#d6c6b7!important;
  color:#3b1d1e!important;
  border-color:#d6c6b7!important;
  box-shadow:0 12px 32px rgba(0,0,0,.14);
}
body.home .q426-home-hero .qasr-btn-light:hover{background:#fff!important;border-color:#fff!important}
body.home .q426-home-hero .qasr-btn-ghost{
  color:#fff!important;
  border-color:rgba(255,255,255,.6)!important;
  background:rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
body.home .q426-home-hero .qasr-btn-ghost:hover{background:#fff!important;color:#3b1d1e!important}

/* Home header overlays hero. Logo files/colors themselves are untouched. */
html body.home .site-header.qasr-header-v408.qasr-header-home:not(.is-scrolled){
  background:transparent!important;
  background-color:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.home .site-header.qasr-header-v408.qasr-header-home:not(.is-scrolled) .logo-white{display:block!important;opacity:1!important;visibility:visible!important}
html body.home .site-header.qasr-header-v408.qasr-header-home:not(.is-scrolled) .logo-dark{display:none!important;opacity:0!important;visibility:hidden!important}
html body.home .site-header.qasr-header-v408.qasr-header-home:not(.is-scrolled) .header-icon,
html body.home .site-header.qasr-header-v408.qasr-header-home:not(.is-scrolled) .menu-toggle,
html body.home .site-header.qasr-header-v408.qasr-header-home:not(.is-scrolled) .primary-nav,
html body.home .site-header.qasr-header-v408.qasr-header-home:not(.is-scrolled) .primary-nav a{color:#fff!important}

@keyframes q426HeroDrift{from{transform:scale(1.075)}to{transform:scale(1.025)}}
@keyframes q426TitleReveal{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes q426CopyReveal{to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes q426ActionsReveal{to{opacity:1;transform:translateY(0)}}

/* Keep the six custom-design categories directly after hero */
body.home .q421-home-bespoke{
  padding-top:64px!important;
  padding-bottom:56px!important;
  background:linear-gradient(180deg,#f7f2eb 0%,#faf7f2 100%)!important;
}
body.home .q421-home-bespoke h2{
  text-align:center;
  color:#3b1d1e;
  margin:0 auto 30px!important;
  font-size:clamp(1.85rem,3vw,2.75rem)!important;
}

/* Our Designs — one cinematic moving image at a time, no price */
.q426-home-designs{
  position:relative;
  padding:86px 0 96px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%,rgba(85,82,54,.11),transparent 34%),
    linear-gradient(180deg,#eee3d7 0%,#e9ddcf 100%);
  border-block:1px solid rgba(85,54,34,.12);
}
.q426-home-designs:before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  border:1px solid rgba(85,54,34,.08);
  border-radius:50%;
  inset:-230px auto auto -150px;
  pointer-events:none;
}
.q426-home-designs-head{
  max-width:790px;
  margin:0 auto 38px;
  text-align:center;
  position:relative;
  z-index:2;
}
.q426-home-designs-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:11px;
  color:#555236;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.q426-home-designs-kicker:before,.q426-home-designs-kicker:after{content:"";width:34px;height:1px;background:rgba(85,82,54,.38)}
.q426-home-designs-head h2{
  margin:0 0 11px;
  color:#3b1d1e;
  font-size:clamp(2.15rem,4.7vw,4.2rem);
  line-height:1.12;
  letter-spacing:-.025em;
}
.q426-home-designs-head p{margin:0;color:#6b5c52;line-height:1.9;font-size:1rem}
.q426-designs-stack{display:grid;gap:34px}
.q426-design-feature{position:relative;max-width:1220px;margin-inline:auto}
.q426-design-stage{
  position:relative;
  display:block;
  width:100%;
  height:clamp(400px,58vw,690px);
  overflow:hidden;
  border-radius:30px;
  background:#2a1a17;
  border:1px solid rgba(59,29,30,.14);
  box-shadow:0 26px 70px rgba(59,29,30,.14);
  text-decoration:none;
  isolation:isolate;
}
.q426-design-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transform:scale(1.035);
  animation:q426DesignSlide calc(var(--q426-count) * 5.6s) ease-in-out infinite;
  animation-delay:calc(var(--q426-index) * 5.6s);
  z-index:1;
}
.q426-design-slide img{width:100%;height:100%;object-fit:cover;display:block}
.q426-design-shade{
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(180deg,rgba(18,10,8,.05) 28%,rgba(18,10,8,.18) 62%,rgba(18,10,8,.62) 100%);
}
.q426-design-view{
  position:absolute;
  inset:auto 28px 26px auto;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 17px;
  border-radius:999px;
  color:#fff;
  background:rgba(59,29,30,.72);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:.86rem;
  font-weight:800;
  transition:transform .25s ease,background .25s ease;
}
.q426-design-view i{font-style:normal}
.q426-design-stage:hover .q426-design-view{transform:translateY(-2px);background:#3b1d1e}
.q426-design-caption{
  width:min(88%,900px);
  margin:-38px auto 0;
  position:relative;
  z-index:5;
  padding:25px 28px;
  border-radius:20px;
  background:rgba(248,243,237,.94);
  border:1px solid rgba(85,54,34,.12);
  box-shadow:0 18px 44px rgba(59,29,30,.09);
  text-align:center;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.q426-design-caption>span{display:block;color:#555236;font-size:.7rem;font-weight:800;letter-spacing:.13em;margin-bottom:7px}
.q426-design-caption h3{margin:0;color:#3b1d1e;font-size:clamp(1.45rem,2.6vw,2.2rem);line-height:1.3}
.q426-design-caption p{max-width:700px;margin:8px auto 0;color:#716158;line-height:1.8;font-size:.93rem}

@keyframes q426DesignSlide{
  0%{opacity:0;transform:scale(1.045)}
  4%{opacity:1}
  21%{opacity:1;transform:scale(1.005)}
  25%{opacity:0;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}

body.home .projects-section.q338-projects{padding-top:76px!important;padding-bottom:88px!important;background:#f8f3ed!important}
body.home .projects-section .section-heading{text-align:center;max-width:820px;margin-inline:auto}

@media(max-width:900px){
  body.home .q426-home-hero{min-height:620px}
  body.home .q426-home-hero .q426-hero-copy{min-height:620px;padding-top:120px}
  .q426-home-designs{padding:62px 0 72px}
  .q426-design-stage{height:clamp(360px,70vw,560px);border-radius:24px}
  .q426-design-caption{width:92%;margin-top:-30px;padding:21px 22px}
}

@media(max-width:767px){
  body.home .q426-home-hero{min-height:72svh;max-height:760px}
  body.home .q426-home-hero .hero-poster{object-position:50% 50%;transform:scale(1.08)}
  body.home .q426-home-hero .hero-overlay{
    background:linear-gradient(180deg,rgba(8,5,4,.48) 0%,rgba(8,5,4,.44) 42%,rgba(8,5,4,.72) 100%);
  }
  body.home .q426-home-hero .q426-hero-copy{min-height:72svh;max-height:760px;padding:118px 20px 46px}
  body.home .q426-home-hero .q426-hero-copy h1{font-size:clamp(2.1rem,10vw,3.15rem)!important;max-width:10ch!important;line-height:1.16!important;margin-bottom:14px!important}
  body.home .q426-home-hero .q426-hero-copy>p{font-size:.94rem!important;line-height:1.8!important;max-width:30ch!important}
  body.home .q426-home-hero .hero-actions{margin-top:22px!important;gap:8px!important}
  body.home .q421-home-bespoke{padding-top:46px!important;padding-bottom:42px!important}
  body.home .q421-home-bespoke h2{font-size:1.78rem!important;margin-bottom:22px!important}
  .q426-home-designs{padding:50px 0 58px}
  .q426-home-designs-head{margin-bottom:26px;padding-inline:9px}
  .q426-home-designs-head h2{font-size:2rem}
  .q426-home-designs-head p{font-size:.9rem;line-height:1.75}
  .q426-design-stage{height:58svh;min-height:390px;max-height:540px;border-radius:20px}
  .q426-design-view{inset:auto 14px 14px auto;padding:10px 13px;font-size:.78rem}
  .q426-design-caption{width:94%;margin-top:-24px;border-radius:17px;padding:18px}
  .q426-design-caption h3{font-size:1.4rem}
  .q426-design-caption p{font-size:.86rem}
  body.home .projects-section.q338-projects{padding-top:54px!important;padding-bottom:66px!important}
}

@media(prefers-reduced-motion:reduce){
  body.home .q426-home-hero .hero-poster,
  body.home .q426-home-hero .q426-hero-copy h1,
  body.home .q426-home-hero .q426-hero-copy>p,
  body.home .q426-home-hero .hero-actions{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
  .q426-design-slide{animation:none!important;opacity:0!important;transform:none!important}
  .q426-design-slide:first-child{opacity:1!important}
}


/* v4.28 — hero composition refinement requested 2026-09-30 */
@media(min-width:768px){
  /* Desktop only: keep image richer and reduce the heavy black veil. */
  body.home .q426-home-hero .hero-overlay{
    background:
      radial-gradient(circle at 50% 46%,rgba(0,0,0,.09) 0%,rgba(0,0,0,.20) 48%,rgba(0,0,0,.42) 100%),
      linear-gradient(180deg,rgba(17,10,9,.30) 0%,rgba(22,10,10,.24) 48%,rgba(17,8,7,.48) 100%),
      linear-gradient(90deg,rgba(59,29,30,.12),rgba(0,0,0,.03),rgba(59,29,30,.12));
  }
}

@media(max-width:767px){
  /* Let the Arabic title read naturally across the width instead of one word per line. */
  body.home .q426-home-hero .q426-hero-copy{
    justify-content:flex-start;
    padding-top:132px;
    padding-bottom:176px;
  }
  body.home .q426-home-hero .q426-hero-copy h1{
    width:min(94vw,560px)!important;
    max-width:none!important;
    font-size:clamp(2rem,8.7vw,2.75rem)!important;
    line-height:1.18!important;
    text-wrap:balance;
    margin:18px auto 14px!important;
  }
  body.home .q426-home-hero .q426-hero-copy>p{
    max-width:min(88vw,420px)!important;
  }
  /* Anchor the two CTAs low on the hero, directly above the floor area. */
  body.home .q426-home-hero .hero-actions{
    position:absolute;
    z-index:5;
    left:18px;
    right:18px;
    bottom:34px;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr;
    gap:9px!important;
  }
  body.home .q426-home-hero .hero-actions .qasr-btn{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0!important;
  }
}

/* v4.29 — mobile hero layout repair: prevent title/header collision and keep CTAs over the floor */
@media(max-width:767px){
  body.home .q426-home-hero{
    min-height:calc(100svh - 44px)!important;
    max-height:none!important;
  }
  body.home .q426-home-hero .q426-hero-copy{
    min-height:calc(100svh - 44px)!important;
    max-height:none!important;
    justify-content:flex-start!important;
    padding:196px 18px 150px!important;
  }
  body.home .q426-home-hero .q426-hero-copy h1{
    width:min(92vw,520px)!important;
    max-width:520px!important;
    margin:0 auto 12px!important;
    font-size:clamp(2rem,8.3vw,2.65rem)!important;
    line-height:1.14!important;
    letter-spacing:-.025em!important;
    text-wrap:balance!important;
  }
  body.home .q426-home-hero .q426-hero-copy>p{
    width:min(88vw,410px)!important;
    max-width:410px!important;
    margin:0 auto!important;
    font-size:clamp(.88rem,3.8vw,1rem)!important;
    line-height:1.75!important;
  }
  body.home .q426-home-hero .hero-actions{
    position:absolute!important;
    left:16px!important;
    right:16px!important;
    bottom:30px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:0!important;
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  body.home .q426-home-hero .hero-actions .qasr-btn{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:11px 10px!important;
    border-radius:999px!important;
    font-size:.78rem!important;
    white-space:nowrap!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}

@media(max-width:390px){
  body.home .q426-home-hero .q426-hero-copy{
    padding-top:188px!important;
  }
  body.home .q426-home-hero .q426-hero-copy h1{
    font-size:clamp(1.86rem,8vw,2.35rem)!important;
  }
  body.home .q426-home-hero .hero-actions{
    left:12px!important;
    right:12px!important;
    gap:8px!important;
  }
  body.home .q426-home-hero .hero-actions .qasr-btn{
    font-size:.72rem!important;
  }
}