/* T96 — Homepage typography refinement + mobile logo lift.
   Scope is intentionally limited to the homepage hero only. */

/* Desktop: retain the live waterfall and existing composition, while giving the copy
   the same refined typographic language used on mobile. */
@media (min-width:921px){
  body.unified-header-home #home .main-logo{
    margin-bottom:16px !important;
  }

  body.unified-header-home #home .hero-kicker{
    width:auto !important;
    margin:0 auto 5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:13px !important;
    color:#fffaf2 !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(.92rem,1.05vw,1.08rem) !important;
    font-weight:500 !important;
    line-height:1.25 !important;
    letter-spacing:0 !important;
    text-shadow:0 4px 16px rgba(0,0,0,.88) !important;
  }

  body.unified-header-home #home .hero-kicker::before,
  body.unified-header-home #home .hero-kicker::after{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    flex:0 0 46px !important;
    background:linear-gradient(90deg,transparent,rgba(235,187,77,.82),transparent) !important;
  }

  body.unified-header-home #home .hero h1{
    width:auto !important;
    max-width:min(820px,66vw) !important;
    margin:0 auto 9px !important;
    padding:0 12px 4px !important;
    white-space:nowrap !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(2.85rem,4.15vw,4.28rem) !important;
    font-weight:900 !important;
    line-height:1.04 !important;
    letter-spacing:-.038em !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    background-image:linear-gradient(108deg,
      #b87815 0%,
      #e0a735 18%,
      #ffe18b 36%,
      #fff2b2 47%,
      #e7b44a 59%,
      #c8871b 78%,
      #f1c75e 100%) !important;
    background-size:225% 100% !important;
    animation:t77GoldSweep 7.2s ease-in-out infinite !important;
    text-shadow:none !important;
    filter:
      drop-shadow(0 7px 15px rgba(0,0,0,.72))
      drop-shadow(0 0 7px rgba(235,181,63,.14)) !important;
  }

  body.unified-header-home #home .hero-subtitle{
    max-width:650px !important;
    margin:0 auto !important;
    padding:0 14px !important;
    color:#fffaf3 !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(.96rem,1.12vw,1.10rem) !important;
    font-weight:500 !important;
    line-height:1.62 !important;
    letter-spacing:0 !important;
    text-shadow:0 4px 15px rgba(0,0,0,.90) !important;
  }

  body.unified-header-home #home .hero-ornament{
    width:132px !important;
    height:19px !important;
    margin-top:8px !important;
    opacity:.80 !important;
  }
}

/* Short desktop/laptop screens: keep the refined hierarchy without crowding cards. */
@media (min-width:921px) and (max-height:820px){
  body.unified-header-home #home .main-logo{
    margin-bottom:10px !important;
  }
  body.unified-header-home #home .hero-kicker{
    margin-bottom:3px !important;
    font-size:.90rem !important;
  }
  body.unified-header-home #home .hero-kicker::before,
  body.unified-header-home #home .hero-kicker::after{
    width:38px !important;
    flex-basis:38px !important;
  }
  body.unified-header-home #home .hero h1{
    font-size:clamp(2.55rem,3.75vw,3.62rem) !important;
    margin-bottom:6px !important;
  }
  body.unified-header-home #home .hero-subtitle{
    font-size:.94rem !important;
    line-height:1.48 !important;
  }
}

/* Mobile: lift only the logo so the bright architectural strip no longer hides
   the three stars. Copy and cards keep their T95 positions. */
@media (max-width:760px){
  #home .hero-logo-stage{
    transform:translateY(-18px) !important;
  }
  #home .main-logo{
    filter:
      drop-shadow(0 13px 24px rgba(0,0,0,.40))
      drop-shadow(0 0 8px rgba(2,12,25,.32)) !important;
  }
}

@media (max-width:760px) and (max-height:780px){
  #home .hero-logo-stage{
    transform:translateY(-13px) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.unified-header-home #home .hero h1{animation:none !important;}
}