.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(223,230,239,.9)}
.nav-wrap{min-height:82px;display:flex;align-items:center;gap:26px;direction:ltr}
.site-logo{width:188px;flex:0 0 auto}
.site-logo img{width:100%;height:auto}
.main-nav{display:flex;align-items:center;gap:22px;margin:auto;direction:rtl}
.main-nav a{font-size:.9rem;font-weight:700;color:#33445c;position:relative;white-space:nowrap}
.main-nav a:after{content:"";position:absolute;right:0;bottom:-8px;width:0;height:2px;background:var(--orange);transition:.2s}
.main-nav a:hover,.main-nav a.active{color:var(--navy)}
.main-nav a:hover:after,.main-nav a.active:after{width:100%}
.header-actions{display:flex;gap:10px;direction:rtl}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-toggle span{width:22px;height:2px;background:var(--navy)}
.site-footer{background:var(--navy);color:#fff;padding-top:64px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:42px;padding-bottom:48px}
.footer-logo{width:210px;margin-bottom:16px}
.footer-grid p,.footer-grid a{color:rgba(255,255,255,.68);font-size:.9rem}
.footer-grid>div{display:flex;flex-direction:column;gap:9px}
.footer-grid h4{margin-bottom:6px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;text-align:center;color:rgba(255,255,255,.55);font-size:.85rem}
.site-header{transition:.25s}.site-header.scrolled{box-shadow:0 10px 30px rgba(7,31,67,.08)}.nav-wrap{min-height:78px}.site-logo{width:176px}.start-menu{position:relative}.start-menu-panel{position:absolute;top:calc(100% + 12px);right:0;width:310px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;z-index:20}.start-menu-panel.open{opacity:1;visibility:visible;transform:none}.start-menu-panel a{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:12px;border-radius:12px}.start-menu-panel a:hover{background:var(--soft)}.start-menu-panel a>span{display:flex;flex-direction:column}.start-menu-panel small{font-size:.72rem;color:var(--muted)}.footer-logo{width:165px;border-radius:16px;overflow:hidden}.footer-about strong{margin-bottom:2px}.footer-about p{max-width:360px}


/* =========================
   Sprint 8 — Global Footer
========================= */
.global-footer{background:var(--navy);color:#fff;padding-top:64px}
.global-footer-top{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:42px;padding-bottom:42px}
.global-footer-brand{display:flex;flex-direction:column;align-items:flex-start}
.global-footer-logo{width:250px;max-width:100%;display:block;margin-bottom:16px}
.global-footer-logo img{width:100%;height:auto;display:block}
.global-footer-brand>strong{font-size:1rem;margin-bottom:6px}
.global-footer-brand>p{max-width:440px;color:rgba(255,255,255,.67);font-size:.86rem}
.footer-socials{display:flex;gap:9px;margin-top:18px}
.footer-socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;transition:.2s}
.footer-socials a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)}
.global-footer-column{display:flex;flex-direction:column;gap:9px}
.global-footer-column h4{margin-bottom:5px}
.global-footer-column a{color:rgba(255,255,255,.68);font-size:.85rem}
.global-footer-column a:hover{color:#fff}
.footer-newsletter{border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:22px 0;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.footer-newsletter>div{display:flex;flex-direction:column}
.footer-newsletter>div>span{color:rgba(255,255,255,.58);font-size:.78rem}
.footer-newsletter form{display:flex;gap:8px}
.footer-newsletter input{width:min(340px,48vw);height:48px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:0 13px;outline:none}
.footer-newsletter input::placeholder{color:rgba(255,255,255,.5)}
.footer-newsletter input:focus{border-color:rgba(255,255,255,.55)}
.footer-newsletter>small{grid-column:1/-1;min-height:18px;font-size:.72rem}
.newsletter-success{color:#8fe1b7}
.newsletter-error{color:#ffaaa4}
.global-footer-bottom{padding:18px 0;display:flex;justify-content:space-between;gap:18px;color:rgba(255,255,255,.5);font-size:.76rem}

.ltr-phone{direction:ltr;unicode-bidi:isolate;display:inline-block;text-align:left}

/* =========================
   V12.1 — Header spacing fix
   Keep the main navigation close to the logo on desktop,
   while pushing account actions to the opposite side.
========================= */
@media (min-width: 901px) {
  .nav-wrap {
    gap: 18px;
  }

  .site-logo {
    width: 155px;
  }

  .main-nav {
    margin: 0;
  }

  .header-actions {
    margin-left: auto;
  }
}


/* =========================
   V12.2 — Structural header alignment fix
========================= */
@media (min-width: 861px) {
  .nav-wrap {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .brand-nav-group {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 0 1 auto;
  }

  .brand-nav-group .site-logo {
    width: 155px;
    flex: 0 0 155px;
  }

  .brand-nav-group .main-nav {
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 18px;
    width: auto;
    flex: 0 1 auto;
    direction: rtl;
  }

  .header-actions {
    margin-left: auto !important;
    flex: 0 0 auto;
  }
}

@media (max-width: 860px) {
  .brand-nav-group { display: contents; }
}


/* =========================
   V12.3 — Final RTL header structure and logo roles
   Header: light-background primary logo.
   Footer: navy-background white logo.
   Favicon remains the square symbol.
========================= */
@media (min-width: 861px) {
  .nav-wrap {
    direction: rtl !important;
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .brand-nav-group {
    direction: rtl !important;
    display: flex;
    align-items: center;
    gap: 10px !important;
    flex: 0 0 auto;
  }

  .brand-nav-group .site-logo {
    width: 176px !important;
    flex: 0 0 176px !important;
    margin: 0 !important;
  }

  .brand-nav-group .site-logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .brand-nav-group .main-nav {
    direction: rtl;
    margin: 0 !important;
    width: auto;
    flex: 0 0 auto;
    gap: 18px;
  }

  .header-actions {
    direction: rtl;
    margin-right: auto !important;
    margin-left: 0 !important;
    flex: 0 0 auto;
  }
}

.global-footer-logo {
  width: 280px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.global-footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* V12.4: keep international phone order LTR while aligning it with the RTL support column */
.global-footer-column .footer-phone-link{display:block;width:100%;text-align:right;direction:ltr;unicode-bidi:isolate;color:rgba(255,255,255,.68)}
.global-footer-column .footer-phone-link bdi{direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* =========================
   V12.5 — UI polish
   Add a comfortable desktop gap between the primary logo and navigation.
========================= */
@media (min-width: 861px) {
  .brand-nav-group {
    gap: 30px !important;
  }
}


/* =========================
   V12.6 — Header direction restoration
   Restore the original desktop order: logo left, menu beside it, actions right.
   Only add a modest 24px space between logo and navigation.
========================= */
@media (min-width: 861px) {
  .nav-wrap {
    direction: ltr !important;
    display: flex;
    align-items: center;
    gap: 0 !important;
  }

  .site-logo {
    width: 176px !important;
    flex: 0 0 176px !important;
    margin: 0 24px 0 0 !important;
    order: 1;
  }

  .main-nav {
    direction: rtl;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 22px;
    width: auto;
    flex: 0 0 auto;
    order: 2;
  }

  .header-actions {
    direction: rtl;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
    order: 3;
  }

  .menu-toggle { order: 4; }
}

/* =========================
   V12.7 — Centered desktop navigation
   Keep logo on the left and account actions on the right,
   while centering the navigation relative to the full header.
========================= */
@media (min-width: 861px) {
  .nav-wrap {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    column-gap: 24px !important;
  }

  .site-logo {
    grid-column: 1;
    justify-self: start;
    width: 176px !important;
    margin: 0 !important;
    order: initial;
  }

  .main-nav {
    grid-column: 2;
    justify-self: center;
    margin: 0 !important;
    width: max-content;
    direction: rtl;
    order: initial;
  }

  .header-actions {
    grid-column: 3;
    justify-self: end;
    margin: 0 !important;
    direction: rtl;
    order: initial;
  }
}


/* =========================
   V12.9 — Footer support and social icon clarity
   Preserve the existing footer columns, restore the support list,
   and use larger official-style SVG social icons.
========================= */
.footer-socials{gap:12px;margin-top:20px;flex-wrap:wrap}
.footer-socials a{width:46px;height:46px;flex:0 0 46px;border-width:1.5px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}
.footer-socials a svg{width:23px;height:23px;display:block;fill:currentColor;overflow:visible}
.footer-socials a[data-social="instagram"] svg,.footer-socials a[data-social="tiktok"] svg{width:25px;height:25px}
.footer-socials a:hover,.footer-socials a:focus-visible{background:var(--orange);border-color:var(--orange);transform:translateY(-3px) scale(1.06);box-shadow:0 8px 20px rgba(255,122,0,.22);outline:none}
.footer-socials a:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.28),0 8px 20px rgba(255,122,0,.22)}
@media(max-width:560px){.footer-socials{gap:10px}.footer-socials a{width:43px;height:43px;flex-basis:43px}.footer-socials a svg{width:22px;height:22px}.footer-socials a[data-social="instagram"] svg,.footer-socials a[data-social="tiktok"] svg{width:24px;height:24px}}


/* =========================
   V13 — Production UX, accessibility and performance polish
========================= */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(255,122,0,.5);
  outline-offset:3px;
}
.skip-link{
  position:fixed;inset-inline-start:16px;top:12px;z-index:3000;
  transform:translateY(-160%);background:#fff;color:var(--navy);
  padding:10px 16px;border-radius:10px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.18)
}
.skip-link:focus{transform:translateY(0)}
.back-to-top{
  position:fixed;inset-inline-end:22px;bottom:22px;z-index:1200;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--orange);color:#fff;
  font:800 1.25rem/1 Cairo,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease,box-shadow .2s ease
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.28)}
img{max-width:100%}
@media (hover:hover) and (pointer:fine){
  .card,.service-card,.feature-card,.faq-card,.directory-business-card{
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
  }
  .card:hover,.service-card:hover,.feature-card:hover,.faq-card:hover,.directory-business-card:hover{
    transform:translateY(-4px)
  }
}
@media(max-width:560px){
  .back-to-top{inset-inline-end:14px;bottom:14px;width:43px;height:43px}
  .btn,button,input,select,textarea{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}
@media(prefers-contrast:more){
  :where(a,button,input,select,textarea):focus-visible{outline-width:4px;outline-color:#ff7a00}
  .footer-socials a{border-color:rgba(255,255,255,.72)}
}