/* ── Al-Mahfoza brand overrides ──────────────────── */
:root{
  --white-color:#FFFFFF;
  --gray-color:#3D444C;
}

/* ── SITE-WIDE TYPOGRAPHY — Open Sans for English, Tajawal for Arabic ──
   One stack for both directions: Open Sans has no Arabic glyphs, so every
   Arabic character falls through to Tajawal, while Latin letters, digits and
   emails stay in Open Sans — even when both scripts share a line.          */
:root{
  --font-site:'Open Sans','Tajawal',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*, *::before, *::after{ font-family:var(--font-site) !important; }

/* Logo text in header (text logo mode) */
.site-branding .logo-wrap{
  display:flex;flex-direction:column;gap:3px;
  text-decoration:none;
}
.site-branding .logo-en{
  font-size:1.3rem;letter-spacing:0.06em;font-weight:600;
  color:#fff;line-height:1;
}
.site-branding .logo-ar{
  font-size:11px;letter-spacing:0.12em;line-height:1.3;
  color:rgba(255,255,255,0.8);
}
/* Image logo */
.site-branding .logo-img{display:block;width:150px;height:auto}
.mobile-menu-section .site-branding .logo-img{width:120px}
@media (max-width:991px){ .site-branding .logo-img{width:120px} }

/* Footer logo */
.footer-logo-en{
  font-size:1.4rem;letter-spacing:0.06em;font-weight:600;
  color:#fff;display:block;margin-bottom:4px;
}
.footer-logo-ar{
  font-size:12px;letter-spacing:0.12em;line-height:1.4;
  color:rgba(255,255,255,0.75);
  display:block;margin-bottom:30px;
}
.footer-logo-img{display:block;width:170px;max-width:100%;height:auto;margin:-12px 0 30px}
@media (max-width:991px){ .footer-logo-img{width:140px} }

/* ── LANGUAGE SWITCHER ─────────────────────────── */
.lang-switcher{
  display:flex;align-items:center;gap:0;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:2px;
  overflow:hidden;
  flex-shrink:0;
}
.lang-switcher button{
  background:none;border:none;cursor:pointer;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  padding:6px 12px;
  line-height:1;
  transition:background 0.2s,color 0.2s;
}
.lang-switcher button.active{
  background:rgba(255,255,255,0.18);
  color:#fff;
}
.lang-switcher .sep{
  width:1px;height:14px;
  background:rgba(255,255,255,0.3);
  flex-shrink:0;
}

/* About Us page — the introduction sits in the content column, lined up with
   Vision & Mission below it (margin-inline-start, so it flips for Arabic). */
.about-us-row{ margin-bottom:100px; }
#about-us, #vision-mission{ scroll-margin-top:100px; }
@media only screen and (min-width: 768px){ .about-us-body{ margin-inline-start:25%; } }
.about-us-heading{ color:var(--white-color); margin-bottom:40px; }
.about-us-text{
  margin:0;
  padding-top:30px;
  border-top:1px solid #fff;
  max-width:900px;
  color:var(--white-color);
  font-size:22px;
  font-weight:300;
  line-height:1.55;
}
html[dir="rtl"] .about-us-text{ font-size:19px; line-height:1.9; }
@media only screen and (max-width: 991px){
  .about-us-row{ margin-bottom:70px; }
}
@media only screen and (max-width: 768px){
  .about-us-row{ margin-bottom:50px; }
  .about-us-text{ padding-top:20px; font-size:18px; }
  html[dir="rtl"] .about-us-text{ font-size:16px; }
}

/* Our Focus — a second row in the Methodology band: four areas, two by two. */
#our-methodology, .focus-row{ scroll-margin-top:100px; }
.focus-row{ margin-top:100px; }
.focus-row .list-holder .list-item{ margin-bottom:60px; }
.focus-row .list-holder .list-item .number{ font-size:80px; line-height:1; padding-top:20px; }
@media only screen and (max-width: 768px){
  .focus-row .list-holder .list-item{ margin-bottom:10px; }
}
@media only screen and (max-width: 991px){ .focus-row{ margin-top:70px; } }
@media only screen and (max-width: 768px){ .focus-row{ margin-top:50px; } }

/* RTL overrides — applied when html[dir=rtl] */
/* Arabic is a joined script: any letter-spacing pulls the letters of a word
   apart, so none of the site's tracking applies in Arabic. */
html[dir="rtl"] *{ letter-spacing:normal !important; }


/* Arabic isn't uppercased and the brand's bold face is Latin-only, so Arabic
   headings need their own size and weight to carry the same weight as English. */
html[dir="rtl"] .bold-sub-title{ font-size:clamp(20px, 1.2rem + 1vw, 30px); font-weight:700; line-height:1.5; }
html[dir="rtl"] .purpose-section .list-holder .list-item .info .title,
html[dir="rtl"] .what-we-do-overview-section .list-holder .list-item .info .title{ font-size:clamp(17px, 0.9rem + 0.4vw, 20px); font-weight:700; line-height:1.6; }
/* Arabic body text: a touch smaller, with the looser leading Arabic needs. */
html[dir="rtl"] .what-we-do-overview-section .list-holder .list-item .info .desc,
html[dir="rtl"] .purpose-section .list-holder .list-item .info .desc{
  font-size:14px;
  line-height:1.8;
}
html[dir="rtl"] .values-section .list-holder .list-item .info .desc{ line-height:1.8; }
html[dir="rtl"] .values-section .list-holder .list-item .info .title{
  flex-direction:row-reverse;
}
html[dir="rtl"] .site-footer .arrow-up{right:auto;left:40px}
html[dir="rtl"] header .inner .menu-holder ul li{margin-right:0;margin-left:90px}
html[dir="rtl"] header .inner .menu-holder ul li:last-child{margin-left:0}
html[dir="rtl"] .what-we-do-overview-section .number{text-align:left}
html[dir="rtl"] .form-holder input,
html[dir="rtl"] .form-holder textarea{
  padding-left:0;padding-right:15px;text-align:right;
}

/* ── BACKGROUND VIDEOS ─────────────────────────── */
.bg-video{
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.main-banner-item.img{position:relative;overflow:hidden;isolation:isolate}
.main-banner-item.img .bg-video{position:absolute;inset:0;z-index:0}
.main-banner-item.img::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.3));
}
/* Hero text sits on a light sandy photo — shadow keeps it readable on any frame */
.main-banner .main-banner-item-content h1,
.main-banner .main-banner-item-content h3{
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
/* clip-path keeps the fixed video inside its panel — same parallax feel as background-attachment:fixed */
.purpose-img{position:relative;overflow:hidden;clip-path:inset(0)}
.purpose-img .bg-video{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1}
@media (prefers-reduced-motion:reduce){.bg-video{display:none}}

/* Mobile lang switcher also visible */
.mobile-lang-switcher{
  display:flex;align-items:center;gap:0;
  border:1px solid #ddd;border-radius:2px;
  overflow:hidden;margin-top:30px;
}
.mobile-lang-switcher button{
  background:none;border:none;cursor:pointer;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:#888;padding:8px 16px;transition:background 0.2s,color 0.2s;
}
.mobile-lang-switcher button.active{background:#f0f0f0;color:#333}
.mobile-lang-switcher .sep{width:1px;background:#ddd;height:14px}

/* ═══ 0. HEADER SCRIM — nav text must never rely on the photo/video    ═══
   underneath for contrast. A permanent dark gradient sits behind the
   nav row on every page, hero or not, so white text always reads.   */
header.site-header{ position:absolute; inset-inline:0; top:0; }
header.site-header::before{
  content:"";position:absolute;inset:0 0 auto 0;height:190px;
  background:linear-gradient(to bottom, rgba(8,7,6,.60) 0%, rgba(8,7,6,.30) 55%, rgba(8,7,6,0) 100%);
  pointer-events:none;z-index:0;
}
header.site-header .container{ position:relative; z-index:1; }

/* ═══ 1. MAIN NAV — hover/current gets a solid pill, not just a color
   change, so contrast never depends on how bright the photo behind it
   happens to be (this was the "text and background mix up" bug).   ═══ */
header .inner .menu-holder #primary-menu > li > a{
  position:relative;display:inline-block;
  padding:7px 12px;border-radius:3px;
  color:rgba(255,255,255,.85);background:rgba(0,0,0,0);
  transition:color .2s ease, background-color .2s ease;
}
header .inner .menu-holder #primary-menu > li > a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;
  height:1px;background:#fff;
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
header .inner .menu-holder #primary-menu > li:hover > a,
header .inner .menu-holder #primary-menu > li.active > a,
header .inner .menu-holder #primary-menu > li.is-current > a,
header .inner .menu-holder #primary-menu > li.current-menu-item > a,
header .inner .menu-holder #primary-menu > li.current-menu-parent > a,
header .inner .menu-holder #primary-menu > li.current-menu-ancestor > a{
  color:#fff;background:rgba(10,8,6,.45);
}
header .inner .menu-holder #primary-menu > li:hover > a::after,
header .inner .menu-holder #primary-menu > li.active > a::after,
header .inner .menu-holder #primary-menu > li.is-current > a::after,
header .inner .menu-holder #primary-menu > li.current-menu-item > a::after,
header .inner .menu-holder #primary-menu > li.current-menu-parent > a::after,
header .inner .menu-holder #primary-menu > li.current-menu-ancestor > a::after{ transform:scaleX(1); }

/* ═══ 2. DROPDOWN — panel, hit-testing, readability ═══════════════ */
header .inner .menu-holder ul li .sub-menu{
  min-width:200px;padding:10px 18px 14px;margin-top:10px;
  background:rgba(22,18,15,.68);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
          backdrop-filter:blur(16px) saturate(120%);
  border:1px solid rgba(255,255,255,.12);border-radius:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease, visibility .28s;
}
header .inner .menu-holder ul li.active .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;
}
/* Invisible bridge over the margin-top gap, so moving the cursor from the
   parent link down into the panel never leaves the menu */
header .inner .menu-holder ul li .sub-menu::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-12px;height:12px;
}

/* ═══ 3. DROPDOWN ITEMS — transform + margin bugs ════════════════ */
header .inner .menu-holder ul .sub-menu li{
  margin-left:0 !important;margin-right:0 !important;
  white-space:nowrap;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
header .inner .menu-holder ul .sub-menu li:first-child{ border-top:0; }
header .inner .menu-holder ul li.active .sub-menu li{
  opacity:1;
  -webkit-transform:translateY(0);transform:translateY(0);
}
header .inner .menu-holder ul .sub-menu li a{
  display:block;color:rgba(255,255,255,.66);transition:color .2s ease;
}
header .inner .menu-holder ul .sub-menu li:hover > a{ color:#fff; }
header .inner .menu-holder ul .sub-menu li.current-menu-item,
header .inner .menu-holder ul .sub-menu li.is-current{ position:relative; }
header .inner .menu-holder ul .sub-menu li.current-menu-item > a,
header .inner .menu-holder ul .sub-menu li.is-current > a{ color:#fff; }
header .inner .menu-holder ul .sub-menu li.current-menu-item::before,
header .inner .menu-holder ul .sub-menu li.is-current::before{
  content:"";position:absolute;inset-inline-start:-18px;top:50%;
  margin-top:-7px;width:2px;height:14px;background:#fff;
}

/* ═══ 4. HERO — one motion source, not two ══════════════════════ */
.main-banner .main-banner-item.img{
  -webkit-animation:none;animation:none;
  -webkit-transition:none;transition:none;
}
.main-banner .bg-video{
  -webkit-transform:translateZ(0);transform:translateZ(0);
  will-change:transform;
}
.main-banner .bg-video.layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .8s linear;
}
.main-banner .bg-video.layer-b{ opacity:0; }
.main-banner .main-banner-item-content h1,
.main-banner .main-banner-item-content h3{
  -webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;
}

/* ═══ 5. MOBILE SIDE PANEL — transform instead of `right` ═══════ */
.mobile-menu-section{
  right:0 !important;
  width:min(465px, 88vw);
  -webkit-transform:translateX(100%);transform:translateX(100%);
  -webkit-transition:transform .5s cubic-bezier(.22,.61,.36,1);
          transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.mobile-menu-section.active{
  -webkit-transform:translateX(0);transform:translateX(0);
}
.mobile-menu-section li.current-menu-item > a,
.mobile-menu-section li.current-menu-parent > a,
.mobile-menu-section li.is-current > a{
  color:#1a1a1a;font-weight:600;position:relative;
}
.mobile-menu-section li.current-menu-item > a::before,
.mobile-menu-section li.is-current > a::before{
  content:"";position:absolute;inset-inline-start:-16px;top:50%;
  margin-top:-8px;width:2px;height:16px;background:#1a1a1a;
}

/* ═══ 6. ACCESSIBILITY ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ═══ 7. CONTACT PAGE — fill in gaps the theme template leaves ═══ */
.contact-us-section .container{ position:relative; }
.contact-us-section h1{ text-align:start; }

/* ═══ 8. HEADER & FOOTER — alignment and spacing fixes ═══════════ */
/* Header: keep logo, nav and switcher on one centred row; nothing collides on narrow phones */
header .inner .menu-holder{ gap:24px; }
header .inner .menu-holder .site-branding{ flex-shrink:0; }
header .inner .menu-holder .hamburger-menu-btn-container{ flex-shrink:0; }
@media (max-width:991px){
  header .inner .menu-holder{ gap:16px; }
  /* nav is hidden here: keep the switcher beside the menu button, not floating mid-bar */
  header .inner .menu-holder .lang-switcher{ margin-inline-start:auto; }
}
@media (max-width:340px){
  /* the switcher is also inside the mobile menu, so drop it from the crowded bar */
  header .inner .menu-holder .lang-switcher{ display:none; }
  header .inner .menu-holder .hamburger-menu-btn-container{ margin-inline-start:auto; }
}

/* Footer: columns share the row evenly, titles line up with the logo */
/* Columns sit side by side from the start edge (left in English, right in
   Arabic) with one even gap, each as wide as its content. */
.site-footer .footer-menu-holder{ gap:32px clamp(48px, 6vw, 110px); align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; }
.site-footer .footer-menu-holder > div{ flex:0 0 auto; width:auto !important; max-width:300px; min-width:0; }
.site-footer .footer-logo-en{ line-height:25px; }
.site-footer .footer-menu-holder .footer-col-4 .menu-item{ text-align:start; }
.site-footer .footer-menu-holder .footer-col-4 .menu-item a{ letter-spacing:3px; }
.site-footer .footer-bottom{ margin-top:90px; gap:12px 32px; align-items:baseline; }
.site-footer .footer-bottom .address p{ margin:0; }
.site-footer .footer-bottom .address .sep{ padding:0 10px; opacity:.6; }
/* keep the scroll-up button clear of the first row of links */
.site-footer .arrow-up{ top:28px; }
@media (max-width:991px){
  .site-footer .footer-menu-holder .footer-col-1,
  .site-footer .footer-menu-holder .footer-col-2,
  .site-footer .footer-menu-holder .footer-col-3,
  .site-footer .footer-menu-holder .footer-col-4 .menu-item{ text-align:start; }
  .site-footer .footer-bottom{ margin-top:40px; }
  .site-footer .footer-bottom .address{ line-height:1.6; }
  /* address and email on their own lines — no dangling separator */
  .site-footer .footer-bottom .address .sep{ display:none; }
  .site-footer .footer-bottom .address .email{ display:block; }
}

/* Mobile menu: arrows and indents follow the reading direction */
html[dir="rtl"] .mobile-menu-section ul li.add-arrow::before{ right:auto; left:0; transform:scaleX(-1); }
html[dir="rtl"] .mobile-menu-section ul li.active{ padding-left:0; padding-right:25px; }
html[dir="rtl"] .mobile-menu-section ul li.active::before{ left:auto; right:0; transform:none; }
html[dir="rtl"] .mobile-menu-section .back-to-main::before{ content:"→"; margin-right:0; margin-left:5px; }
.mobile-menu-section .mobile-sub-panel{ top:100px; }
.mobile-menu-section.show-sub .main-right-navigation.main-nav{
  opacity:0; visibility:hidden; transform:translateX(-100%);
}
html[dir="rtl"] .mobile-menu-section.show-sub .main-right-navigation.main-nav{ transform:translateX(100%); }
.mobile-menu-section .mobile-sub-panel.is-open{
  opacity:1; visibility:visible; transform:translateX(0);
}
html[dir="rtl"] .mobile-menu-section .mobile-sub-panel:not(.is-open){ transform:translateX(-100%); }
.mobile-menu-section .mobile-lang-switcher{ width:max-content; }

/* Contact form: label text is its own element so the language switch can't wipe the input */
.contact-us-section .form-holder label .label-text{ display:block; }

/* Value titles: the theme sizes every span in the title as the big number */
.values-section .list-holder .list-item .info .title span.value-name{ font-size:inherit; line-height:inherit; }


/* ═══ 10. OUR OFFICE — contact page ════════════════════════════ */
.office-section{
  position:relative; color:var(--white-color);
  padding:90px 0 100px; border-top:1px solid rgba(255,255,255,.18);
}
.office-section .office-row{ row-gap:40px; align-items:stretch; }
.office-section .bold-sub-title{ padding-bottom:10px; }
.office-section .office-tagline{
  font-size:26px; line-height:1.3; font-weight:300; margin:0 0 42px; max-width:340px;
}
.office-section .office-block{ padding-top:22px; border-top:1px solid rgba(255,255,255,.28); margin-bottom:30px; }
.office-section .office-block h2{
  font-size:13px; letter-spacing:3px; text-transform:uppercase; font-weight:400;
  margin:0 0 10px; opacity:.75;
}
.office-section .office-block p,
.office-section .office-contacts{ font-size:18px; line-height:1.6; margin:0; }
.office-section .office-contacts{ list-style:none; padding:0; }
.office-section .office-contacts a{ color:var(--white-color); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); transition:border-color .2s; }
.office-section .office-contacts a:hover{ border-color:#fff; }
.office-section .office-map{
  height:100%; min-height:420px; border:1px solid rgba(255,255,255,.25);
  padding:8px; background:rgba(0,0,0,.18);
}
.office-section .office-map iframe{
  display:block; width:100%; height:100%; min-height:402px; border:0;
  filter:saturate(.85) contrast(1.02);
}
@media (max-width:991px){
  .office-section{ padding:60px 0 70px; }
  .office-section .office-tagline{ font-size:22px; margin-bottom:28px; max-width:none; }
  .office-section .office-map, .office-section .office-map iframe{ min-height:320px; }
}

/* ═══ 11. FOOTER — office column ════════════════════════════════ */
.site-footer .footer-menu-holder .footer-col-office .footer-office-address{
  font-size:14px; font-weight:300; line-height:25px; margin:0 0 6px;
}
.site-footer .footer-menu-holder .footer-col-office ul li a{ text-transform:none; }
.site-footer .footer-menu-holder .footer-col-office .footer-directions{
  display:inline-block; margin-top:4px; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.45); line-height:20px;
}
.site-footer .footer-menu-holder .footer-col-office .footer-directions::after{ content:" ↗"; }
html[dir="rtl"] .site-footer .footer-menu-holder .footer-col-office .footer-directions::after{ content:" ↖"; }
@media (max-width:991px){
  .site-footer .footer-menu-holder .footer-col-office{ width:100%; padding-bottom:35px; text-align:start; }
}

/* ═══ 12. CUSTOM PAGES (admin → Pages) ══════════════════════════ */
.draft-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:999; text-align:center;
  background:#b8770b; color:#fff; font-size:13px; padding:8px 16px;
}
.page-hero, .page-hero .main-banner-item{ height:72vh; min-height:460px; }
.page-hero .main-banner-item.img{ -webkit-animation:none; animation:none; }
.page-hero .main-banner-item.img::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.3));
}
.page-hero.centered .main-banner-item-content{ top:56%; width:100%; padding:0 24px; }
.page-hero .main-banner-item-content h1{ max-width:900px; margin:auto; }
.page-hero .main-banner-item-content h3{ padding-top:28px; max-width:620px; }

.page-intro{ color:var(--white-color); padding:210px 0 70px; }
.page-intro h1{ font-size:44px; line-height:1.15; text-transform:uppercase; margin:0; max-width:900px; }
.page-intro .page-intro-sub{ font-size:20px; font-weight:300; line-height:1.5; margin:22px 0 0; max-width:680px; opacity:.9; }

.page-block{ color:var(--white-color); padding:90px 0; border-top:1px solid rgba(255,255,255,.14); }
.page-block .bold-sub-title{ margin-bottom:24px; }
.page-block-body{ font-size:18px; line-height:1.75; font-weight:300; }
.page-block-lead{ font-size:15px; line-height:1.7; opacity:.85; margin-bottom:24px; }
.page-block-heading{ font-size:32px; line-height:1.2; text-transform:uppercase; margin:0 0 20px; font-weight:400; }
.page-block-image{ border:1px solid rgba(255,255,255,.22); padding:8px; background:rgba(0,0,0,.15); }
.page-block-image img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.page-block-cards .list-item{ margin-bottom:30px; }
.page-block-cta{ text-align:center; }
.page-cta{ max-width:760px; margin:0 auto; }
.page-cta .page-block-body{ margin-bottom:6px; }
.page-button{
  display:inline-block; margin-top:28px; padding:14px 30px; border:1px solid var(--white-color);
  color:var(--white-color) !important; text-decoration:none; text-transform:uppercase;
  letter-spacing:3px; font-size:14px; transition:background .2s, color .2s;
}
.page-button:hover{ background:#fff; color:#1a1a1a !important; }
@media (max-width:991px){
  .page-intro{ padding:160px 0 50px; }
  .page-intro h1{ font-size:32px; }
  .page-block{ padding:60px 0; }
  .page-block-heading{ font-size:26px; }
}
/* Page cards: long titles wrap beside the number instead of colliding with it */
.page-block-cards .list-holder .list-item .info .title{ justify-content:flex-start; align-items:flex-start; gap:16px; }
.page-block-cards .list-holder .list-item .info .title span.value-name{ padding-top:8px; }

/* ═══ 13. CONTACT PAGE — banner, form, info cards ════════════════ */
/* The accent on icons, the checkbox, the SEND button and gold hovers. The
   real value comes from the footer colour, set on <body> by the layout;
   these are only the fallbacks. */
:root{ --gold:#B49A63; --gold-soft:rgba(180,154,99,.35); }

.contact-hero, .contact-hero .main-banner-item{ height:62vh; min-height:420px; }
.page-contact .contact-us-section.has-hero{ padding-top:90px; }
.contact-hero .main-banner-item-content h1{ animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both; }
.contact-hero .main-banner-item-content h3{ animation:heroRise .9s .18s cubic-bezier(.22,.61,.36,1) both; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

.contact-intro{ color:var(--white-color); opacity:.85; max-width:540px; margin-bottom:30px; font-size:17px; line-height:1.6; }

/* Form */
#contact-form .contact-form .hp-field{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#contact-form .contact-form .form-field{ margin-bottom:22px; }
#contact-form .contact-form .form-field > label{ display:block; margin-bottom:8px; }
#contact-form .contact-form .label-text{ color:var(--white-color); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; }
html[dir="rtl"] #contact-form .contact-form .label-text{ font-size:15px; }
/* Phone: country picker and number in one bordered row, always left to right.
   Scoped like the theme's own ".page-contact .form-holder select" rule, which
   would otherwise stretch the picker across the row. */
.page-contact .form-holder .phone-field{
  display:flex; align-items:stretch; margin:8px 0 14px;
  border:1px solid var(--white-color); border-radius:3px;
  background-color:rgba(0,0,0,.12);
}
.page-contact .form-holder .phone-field .phone-country-wrap{
  position:relative; flex:0 0 auto; width:110px; height:48px;
  border-right:1px solid rgba(255,255,255,.45);
}
.page-contact .form-holder .phone-field .phone-country{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; border:0; border-radius:0; padding:0; cursor:pointer;
}
.page-contact .form-holder .phone-field .phone-country-label{
  display:flex; align-items:center; height:48px; padding:0 12px;
  color:var(--white-color); font-size:16px; white-space:nowrap;
  pointer-events:none; direction:ltr;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 10px center/9px 6px;
}
.page-contact .form-holder .phone-field .phone-country-wrap:focus-within{ box-shadow:inset 0 0 0 1px var(--white-color); }
.page-contact .form-holder .phone-field .phone-country option{ color:#1a1a1a; }
.page-contact .form-holder .phone-field input[type=tel]{
  flex:1 1 auto; width:auto; min-width:0; height:48px; margin:0;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  color:var(--white-color) !important; padding:0 14px; font-size:16px; outline:none !important;
  /* The row is left-to-right in both languages, so the number starts next to
     the country code rather than drifting to the far side in Arabic. */
  text-align:left !important; direction:ltr;
}
.page-contact .form-holder .phone-field:focus-within{ box-shadow:inset 0 0 0 1px var(--white-color); }
.page-contact .form-holder .phone-field input[type=tel]:focus{ border:0 !important; }

#contact-form .contact-form input[type=text], #contact-form .contact-form input[type=email], #contact-form .contact-form textarea{
  display:block; width:100%; margin-top:0; background-color:rgba(0,0,0,.12) !important; color:var(--white-color);
  border:1px solid rgba(255,255,255,.55) !important; border-radius:0; padding:12px 15px; font-size:16px; outline:none !important;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
#contact-form .contact-form textarea{ min-height:150px; resize:vertical; }
#contact-form .contact-form input:hover, #contact-form .contact-form textarea:hover{ border-color:rgba(255,255,255,.85) !important; }
#contact-form .contact-form input[type=text]:focus, #contact-form .contact-form input[type=email]:focus, #contact-form .contact-form textarea:focus{
  border-color:var(--gold) !important; background-color:rgba(0,0,0,.2) !important;
  box-shadow:0 0 0 3px var(--gold-soft), 0 0 22px rgba(180,154,99,.25);
}
#contact-form .contact-form .form-field.has-error input, #contact-form .contact-form .form-field.has-error textarea{ border-color:#ffb4a6 !important; box-shadow:0 0 0 3px rgba(255,120,100,.25); }
#contact-form .contact-form .field-error{ min-height:0; margin:6px 0 0; color:#ffd2c8; font-size:13px; }
#contact-form .contact-form .field-error:empty{ display:none; }

#contact-form .contact-form .form-consent label{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; text-transform:none; }
#contact-form .contact-form .form-consent input[type=checkbox]{ flex:0 0 auto; width:18px; height:18px; margin-top:3px; accent-color:var(--gold); cursor:pointer; }
#contact-form .contact-form .form-consent .consent-text{ margin:0 !important; color:var(--white-color); opacity:.85; font-size:13px; line-height:1.6; }

/* Status message */
#contact-form .contact-form .form-status:not([data-state]){ display:none; }
#contact-form .contact-form .form-status{ margin-bottom:22px; padding:14px 16px; border:1px solid var(--gold); background:rgba(180,154,99,.14); color:#fff; font-size:15px; line-height:1.5; animation:heroRise .4s ease both; }
#contact-form .contact-form .form-status[data-state="error"]{ border-color:#ffb4a6; background:rgba(255,120,100,.14); }
#contact-form .contact-form .form-status[data-state="success"]{ border-inline-start:4px solid var(--gold); }

/* SEND button: gold fill + dark text on hover, with a light sweep */
#contact-form .contact-form .form-actions{ display:flex; justify-content:flex-end; }
#contact-form .contact-form .send-button{
  position:relative; overflow:hidden; cursor:pointer; min-width:160px;
  background-color:transparent !important; color:var(--white-color) !important; width:auto;
  border:1px solid var(--gold) !important; padding:14px 34px !important; margin:0 !important;
  font-size:14px; letter-spacing:4px; text-transform:uppercase;
  transition:background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .2s ease;
}
html[dir="rtl"] #contact-form .contact-form .send-button{ font-size:16px; float:none; }
#contact-form .contact-form .send-button::after{
  content:""; position:absolute; top:0; bottom:0; width:45%; inset-inline-start:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); pointer-events:none;
}
#contact-form .contact-form .send-button:hover, #contact-form .contact-form .send-button:focus-visible{
  background-color:var(--gold) !important; border-color:var(--gold) !important; color:#1f1a12 !important;
  box-shadow:0 0 0 4px rgba(180,154,99,.22), 0 8px 26px rgba(180,154,99,.35);
}
#contact-form .contact-form .send-button:hover::after{ animation:shimmer .9s ease; }
#contact-form .contact-form .send-button:active{ transform:translateY(1px); }
#contact-form .contact-form .send-button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@keyframes shimmer{ to{ inset-inline-start:130%; } }
#contact-form .contact-form.is-sending .send-button{ cursor:progress; opacity:.85; animation:pulseGold 1.2s ease-in-out infinite; }
@keyframes pulseGold{ 0%,100%{ box-shadow:0 0 0 0 rgba(180,154,99,.45); } 50%{ box-shadow:0 0 0 10px rgba(180,154,99,0); } }

/* Info cards */
.contact-cards{ display:flex; flex-direction:column; gap:16px; margin-top:4px; }
.contact-card{
  position:relative; display:flex; gap:18px; align-items:flex-start;
  padding:22px 22px 20px; color:var(--white-color);
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.1);
  transition:border-color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.contact-card::before{
  content:""; position:absolute; top:-1px; bottom:-1px; inset-inline-start:-1px; width:3px;
  background:var(--gold); transform:scaleY(0); transform-origin:center; transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.contact-card:hover{ border-color:rgba(180,154,99,.55); background:rgba(0,0,0,.18); transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.contact-card:hover::before{ transform:scaleY(1); }
.contact-card-icon{
  flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  /* The ring is a touch stronger than the icon, which is the footer colour
     and sits at about 2:1 against the section behind it. */
  border:1px solid color-mix(in srgb, var(--gold) 60%, transparent); color:var(--gold); transition:background-color .3s ease, color .3s ease;
}
.contact-card-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.contact-card:hover .contact-card-icon{ background:var(--gold); color:#1f1a12; }
.contact-card-body{ min-width:0; }
.contact-card h2{ font-size:15px; letter-spacing:2.5px; text-transform:uppercase; font-weight:400; margin:0 0 8px; opacity:.8; }
html[dir="rtl"] .contact-card h2{ font-size:16px; }
.contact-card p{ font-size:18px; line-height:1.55; margin:0; overflow-wrap:anywhere; }
.contact-card a{ color:var(--white-color); text-decoration:none; background-image:linear-gradient(var(--gold),var(--gold)); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s ease, color .2s; }
html[dir="rtl"] .contact-card a{ background-position:100% 100%; }
.contact-card a:hover{ color:var(--gold); background-size:100% 1px; }

/* Gold accents elsewhere */
.office-section .office-contacts a:hover{ border-color:var(--gold); color:var(--gold); }
.page-button:hover{ background:var(--gold) !important; border-color:var(--gold); color:#1f1a12 !important; }

@media (max-width:991px){
  .contact-cards{ margin-top:36px; }
  #contact-form .contact-form .form-actions{ justify-content:stretch; }
  #contact-form .contact-form .send-button{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .contact-card, .contact-card:hover{ transform:none; }
  #contact-form .contact-form .send-button::after{ display:none; }
}


/* ═══ 14. PERFORMANCE — lightweight backgrounds ════════════════════
   The original texture was an 11 MB, 3979px JPEG and the footer a 480 KB PNG.
   These resized copies look the same (grain checked) at ~2% of the weight. */
.brown-concrete-texture,
.page-contact .contact-us-section{
  background-image:url("../images/opt/texture-1920.jpg") !important;
}
/* Footer colours come from Admin → Footer (inline --footer-bg / --footer-ink on
   the <footer>). Lines take the text colour at reduced strength; icons and the
   one-colour logo are darkened or whitened to match the text. */
.site-footer{ background:var(--footer-bg, #B49A63) !important; color:var(--footer-ink, #2B2118); }
.site-footer a, .site-footer p, .site-footer span, .site-footer li,
.site-footer .title, .site-footer .footer-menu-holder .title{ color:var(--footer-ink, #2B2118) !important; }
.site-footer *{ border-color:color-mix(in srgb, var(--footer-ink, #2B2118) 45%, transparent) !important; }
.site-footer.ink-dark .arrow-up, .site-footer.ink-dark .footer-logo-img.is-tinted{ filter:brightness(0); opacity:.8; }
.site-footer.ink-light .arrow-up, .site-footer.ink-light .footer-logo-img.is-tinted{ filter:brightness(0) invert(1); opacity:.9; }
.site-footer a:hover{ opacity:.7; }
.site-footer .footer-social{ display:flex; gap:18px; margin:0; padding:0; list-style:none; }
.site-footer .footer-social a{ display:block; line-height:0; }
@media (max-width:1200px){
  .brown-concrete-texture,
  .page-contact .contact-us-section{
    background-image:url("../images/opt/texture-1200.jpg") !important;
  }
}


/* Every content band — home, About Us, Contact and admin-made pages — is one
   solid colour set in Admin → Colours (so the texture image is never loaded). */
.brown-concrete-texture,
.page-contact .contact-us-section{ background:var(--band-bg, #556B2F) !important; }
@media (max-width:991px){ .site-footer .footer-bottom .footer-social{ margin:18px 0 6px; } }

/* Privacy policy page */
.privacy-body{ color:var(--white-color); padding:20px 0 90px; }
.privacy-section{ padding:34px 0; border-top:1px solid rgba(255,255,255,.22); }
.privacy-section:first-child{ border-top:0; padding-top:10px; }
.privacy-heading{ display:flex; gap:14px; align-items:baseline; font-size:22px; font-weight:400; margin:0 0 14px; }
.privacy-number{ font-size:15px; opacity:.6; }
.privacy-text{ font-size:17px; line-height:1.85; font-weight:300; margin:0; max-width:820px; }
.privacy-updated, .privacy-footnote{ font-size:14px; opacity:.75; margin:26px 0 0; }
html[dir="rtl"] .privacy-text{ font-size:16px; line-height:2; }
@media (max-width:768px){
  .privacy-body{ padding-bottom:60px; }
  .privacy-heading{ font-size:19px; }
  .privacy-text{ font-size:16px; }
}

/* The policy link inside the consent line — the browser default blue is
   unreadable on the section colour. */
#contact-form .contact-form .consent-text a{
  color:var(--white-color); text-decoration:underline; text-underline-offset:3px;
}
#contact-form .contact-form .consent-text a:hover{ opacity:.8; }

/* Footer column headings — OVERVIEW / OUR OFFICE / CONTACT US — carry more
   weight than the links under them, in both languages. */
.site-footer .footer-menu-holder .title,
.site-footer .footer-menu-holder .footer-col-4 .menu-item a{ font-weight:600; }