/* ===== main.css ===== */


:root {
  
  --gold:        #B48938;
  --gold-2:      #9B7530;
  --gold-3:      #D8B670;
  --gold-glow:   #E5C77A;
  --gold-ink:    #835E22; /* AA-compliant gold for text on white (>=4.5:1) */
  --burgundy:    #8A2332;
  --burgundy-2:  #6E1A28;

  --ink:         #0E0D0A;
  --ink-2:       #2A251D;
  --muted:       #6B6358;
  --muted-2:     #95897A;
  --line:        #E8E2D5;
  --line-2:      #EFEAE0;

  --bg:          #ffffff;
  --soft:        #FAF7F0;
  --soft-2:      #F4EFE3;
  --cream:       #FBF7EE;

  --dark:        #15110A;
  --dark-2:      #1F1A12;
  --dark-3:      #2A2419;

  --white:       #ffffff;
  --danger:      #c63a3a;
  --success:     #1f8b6e;

  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;
  --radius-xl:   32px;

  --shadow-xs:   0 1px 2px rgba(31,26,18,.05);
  --shadow-sm:   0 2px 8px rgba(31,26,18,.06);
  --shadow:      0 10px 30px rgba(31,26,18,.10);
  --shadow-lg:   0 24px 60px rgba(31,26,18,.18);
  --shadow-xl:   0 40px 90px rgba(31,26,18,.25);
  --shadow-gold: 0 10px 30px rgba(180,137,56,.30);

  --container:   1220px;
  --container-narrow: 880px;
  --header-h:    140px;
  --header-h-mobile: 108px;

  --ease:        cubic-bezier(.2,.7,.3,1);
  --ease-out:    cubic-bezier(.2,.85,.3,1.05);

  
  --navy: var(--dark); --navy-2: var(--dark-2);
  --teal: var(--gold); --teal-2: var(--gold-2);
}

*,*::before,*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--bg);
}
body {
  margin: 0;
  font-family: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-weight: 400;
  font-size: 16px; line-height: 1.8; color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,svg,video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
a:hover { color: var(--gold-2); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: "Tajawal", "IBM Plex Sans Arabic", sans-serif;
  color: var(--ink);
  margin: 0 0 .6em;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 800;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; line-height: 1.12; letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 900; }
h3 { font-size: 1.25rem; font-weight: 800; }
p  { margin: 0 0 1em; }

::selection { background: var(--gold); color: #fff; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.narrow    { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.mt-4 { margin-top: 1.5rem; }
.mt-6 { margin-top: 2.5rem; }

.skip-link {
  position: absolute; top: -100px; right: 0; background: var(--ink); color: #fff; padding: 12px 20px; z-index: 1000;
}
.skip-link:focus { top: 0; }

.scroll-progress {
  position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--burgundy));
  transition: width .12s linear;
}

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
body { padding-top: var(--header-h); }
@media (max-width: 900px) {
  body { padding-top: var(--header-h-mobile); }
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  background: #ffffff;
}

.topbar {
  background: linear-gradient(90deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #d8c9a8; font-size: .82rem;
  border-bottom: 1px solid rgba(180,137,56,.20);
}
.topbar__row { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; padding: 10px 24px; }
.topbar__contact { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar__link { display: inline-flex; gap: 6px; align-items: center; color: #d8c9a8; }
.topbar__link svg { color: var(--gold-3); }
.topbar__link:hover { color: var(--gold-3); }
.topbar__certs { display: flex; gap: 8px; align-items: center; }
.cert { font-size: .78rem; color: #d8c9a8; }
.cert--badge {
  background: rgba(180,137,56,.14);
  border: 1px solid rgba(216,182,112,.30);
  padding: 4px 12px; border-radius: 999px;
  color: var(--gold-3); font-weight: 600;
  font-size: .72rem; letter-spacing: .03em;
}

.navbar__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
}
.brand { display: flex; gap: 14px; align-items: center; }
.brand__logo { width: auto; height: 56px; object-fit: contain; display: block; }
.brand__logo--footer { height: 60px; }
.brand__text strong {
  display: block;
  color: var(--ink);
  font-family: "Tajawal", sans-serif;
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.brand__text em {
  display: block; color: var(--gold-ink);
  font-style: normal; font-size: .76rem;
  font-weight: 500; margin-top: 2px;
  letter-spacing: .02em;
}

.primary-nav { display: flex; align-items: center; justify-content: center; gap: 28px; }
.primary-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.nav-link {
  display: inline-block; padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  position: relative;
}
.nav-link::after {
  content: ""; position: absolute;
  bottom: 4px; right: 16px; left: 16px;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s var(--ease);
  border-radius: 2px;
}
.nav-link:hover { color: var(--gold-ink); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--gold-ink); }

.nav-toggle {
  display: none; background: transparent; border: 0; padding: 10px; border-radius: 8px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: all .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; padding: 13px 24px;
  border-radius: 12px; border: 1px solid transparent;
  transition: all .25s var(--ease); cursor: pointer;
  font-family: inherit; font-size: .95rem;
  position: relative; overflow: hidden;
  letter-spacing: .01em;
}
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(180,137,56,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  transform: skewX(-20deg); transition: left .6s var(--ease-out);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(180,137,56,.45), inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff;
}
.btn--primary:hover::before { left: 130%; }

.btn--ghost {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover {
  background: #fff;
  border-color: var(--gold);
  color: var(--gold-2);
  transform: translateY(-2px);
}

.btn--burgundy { background: var(--burgundy); color: #fff; }
.btn--burgundy:hover { background: var(--burgundy-2); color: #fff; }

.bg-navy .btn--ghost,
.cta-band .btn--ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(216,182,112,.30);
  color: #fff;
}
.bg-navy .btn--ghost:hover,
.cta-band .btn--ghost:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--gold-3);
  color: var(--gold-3);
}

.hero {
  position: relative;
  padding: 120px 0 100px;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  min-height: 78vh;
  display: flex;
  align-items: center;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img,
.hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 38%;
  transform: scale(1.05);
  animation: heroPan 24s ease-in-out infinite alternate;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
  will-change: opacity;
}
.hero__video.is-active { opacity: 1; }
@keyframes heroPan {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.14); }
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  
  background:
    linear-gradient(180deg, rgba(15,17,10,.30) 0%, rgba(15,17,10,.45) 50%, rgba(15,17,10,.70) 100%),
    radial-gradient(700px 400px at 18% 80%, rgba(138,35,50,.20), transparent 60%);
}
.hero__title { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.hero__lead  { text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(216,182,112,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,182,112,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}

.hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  width: 100%;
  gap: 0;
}
.hero__copy {
  max-width: 920px;
  text-align: center;
  margin: 0 auto;
}
.hero__copy .eyebrow { margin-inline: auto; }
.hero__ctas { justify-content: center; }
.hero__stats { justify-content: center; flex-wrap: wrap; max-width: 760px; margin: 0 auto; }
.hero__stats li { align-items: center; text-align: center; }

.hero__sand {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 240px;
  background: radial-gradient(ellipse at 50% 100%, rgba(180,137,56,.30), rgba(180,137,56,.10) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero__card { display: none; }

/* ===== Premium animated hero background ===== */
.hero__media--premium {
  background:
    radial-gradient(130% 120% at 78% 12%, #321a22 0%, transparent 55%),
    radial-gradient(120% 120% at 10% 90%, #2a1620 0%, transparent 55%),
    linear-gradient(135deg, #14100c 0%, #1d1410 45%, #2a141c 100%);
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;
}
.hero__orb--1 {
  width: 480px; height: 480px;
  top: -130px; inset-inline-end: -70px;
  background: radial-gradient(circle, rgba(180,137,56,.55), transparent 70%);
}
.hero__orb--2 {
  width: 440px; height: 440px;
  bottom: -150px; inset-inline-start: -70px;
  background: radial-gradient(circle, rgba(138,35,50,.55), transparent 70%);
}
.hero__orb--3 {
  width: 340px; height: 340px;
  top: 38%; inset-inline-start: 42%;
  background: radial-gradient(circle, rgba(216,182,112,.32), transparent 70%);
}
.hero__sheen {
  position: absolute; inset: -25%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(216,182,112,.07) 55deg, transparent 130deg, transparent 360deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__orb--1 { animation: heroOrb1 19s ease-in-out infinite alternate; }
  .hero__orb--2 { animation: heroOrb2 23s ease-in-out infinite alternate; }
  .hero__orb--3 { animation: heroOrb3 27s ease-in-out infinite alternate; }
  .hero__sheen  { animation: heroSheen 36s linear infinite; }
}
@keyframes heroOrb1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-70px, 60px) scale(1.12); } }
@keyframes heroOrb2 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px, -50px) scale(1.1); } }
@keyframes heroOrb3 { from { transform: translate(0,0) scale(1); } to { transform: translate(40px, 40px) scale(1.18); } }
@keyframes heroSheen { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
  .hero__orb { filter: blur(56px); }
  .hero__orb--1 { width: 320px; height: 320px; }
  .hero__orb--2 { width: 300px; height: 300px; }
  .hero__orb--3 { width: 240px; height: 240px; }
}

/* ===== Hero skyline elements (enter from sides) ===== */
.hero__props {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero__sky {
  position: absolute;
  bottom: 0;
  opacity: 0;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.4));
}
.hero__sky svg { width: 100%; height: auto; display: block; }
.hero__sky--left  { left: 0;  width: clamp(280px, 34vw, 520px); }
.hero__sky--right { right: 0; width: clamp(250px, 30vw, 460px); }

@media (prefers-reduced-motion: no-preference) {
  .hero__sky--left  { animation: heroSkyInLeft 1.2s cubic-bezier(.22,.7,.25,1) .25s forwards; }
  .hero__sky--right { animation: heroSkyInRight 1.2s cubic-bezier(.22,.7,.25,1) .45s forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sky { opacity: .6; }
}
@keyframes heroSkyInLeft {
  from { opacity: 0; transform: translate(-90px, 60px); }
  to   { opacity: .62; transform: translate(0, 0); }
}
@keyframes heroSkyInRight {
  from { opacity: 0; transform: translate(90px, 60px); }
  to   { opacity: .62; transform: translate(0, 0); }
}
@media (max-width: 768px) {
  .hero__sky--left  { width: 46vw; }
  .hero__sky--right { width: 42vw; opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .hero__sky--left { animation-name: heroSkyInLeft; }
  }
}

/* hero top-corner accents */
.hero__corner {
  position: absolute;
  color: var(--gold-3);
  opacity: 0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
}
.hero__corner svg { width: 100%; height: 100%; display: block; }
.hero__corner--tl { top: 13%; left: 6%;  width: 64px; height: 64px; }
.hero__corner--tr { top: 14%; right: 6%; width: 68px; height: 68px; }
@media (prefers-reduced-motion: no-preference) {
  .hero__corner--tl { animation: heroCornerInLeft 1s cubic-bezier(.2,.7,.2,1) .55s forwards, heroPropBob 9s ease-in-out 1.6s infinite; }
  .hero__corner--tr { animation: heroCornerInRight 1s cubic-bezier(.2,.7,.2,1) .7s forwards, heroPropBob 10s ease-in-out 1.8s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__corner { opacity: .3; }
}
@keyframes heroCornerInLeft {
  from { opacity: 0; transform: translate(-80px, -30px) rotate(-6deg); }
  to   { opacity: .32; transform: translate(0,0) rotate(0); }
}
@keyframes heroCornerInRight {
  from { opacity: 0; transform: translate(80px, -30px) rotate(6deg); }
  to   { opacity: .32; transform: translate(0,0) rotate(0); }
}
@keyframes heroPropBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (max-width: 768px) {
  .hero__corner--tr { display: none; }
  .hero__corner--tl { width: 50px; height: 50px; top: 9%; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(180,137,56,.18);
  color: var(--gold-3);
  border: 1px solid rgba(216,182,112,.32);
  border-radius: 999px; padding: 7px 16px;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 18px;
  backdrop-filter: blur(6px);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px;
  background: var(--gold-3); border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-glow);
}

.section .eyebrow {
  background: rgba(180,137,56,.10);
  color: var(--gold-2);
  border-color: rgba(180,137,56,.20);
}
.section .eyebrow::before { background: var(--gold); box-shadow: 0 0 6px rgba(180,137,56,.5); }
.eyebrow--light { background: rgba(180,137,56,.20); color: var(--gold-3); border-color: rgba(216,182,112,.32); }

.hero__title {
  font-family: "Tajawal", sans-serif;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 700; line-height: 1.12;
  margin: 0 0 22px; color: #fff;
  letter-spacing: -.015em;
}
.hero__title .accent {
  color: var(--gold-3);
  display: inline-block; position: relative;
}
.hero__title .accent::after {
  content: ""; position: absolute;
  bottom: -2px; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px; opacity: .6;
}
.hero__lead {
  font-size: 1.12rem; color: #d8c9a8;
  max-width: 580px; margin-bottom: 32px;
  line-height: 1.85;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

.hero__stats {
  display: flex; gap: 36px; list-style: none; padding: 0; margin: 0;
  border-top: 1px solid rgba(216,182,112,.20); padding-top: 30px;
}
.hero__stats li {
  display: flex; flex-direction: column;
  position: relative;
}
.hero__stats li:not(:last-child)::after {
  content: ""; position: absolute;
  top: 5px; bottom: 5px; left: -18px;
  width: 1px; background: rgba(216,182,112,.20);
}
.hero__stats strong {
  font-family: "Tajawal", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--gold-3);
  line-height: 1.35; letter-spacing: -.02em;
  padding-top: 4px;
  overflow: visible;
}
.hero__stats span { font-size: .88rem; color: #b5a37c; margin-top: 8px; font-weight: 500; }

.hero__card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(216,182,112,.20);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.04) inset;
  position: relative;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.hero__card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(216,182,112,.45), rgba(138,35,50,.30) 50%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.hero__card-title { color: #fff; font-size: 1.35rem; margin: 0 0 6px; }
.hero__card-sub { color: #b5a37c; margin-bottom: 22px; font-size: .9rem; }
.hero__card-trust {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold-3); font-size: .82rem; margin-top: 12px;
}
.hero__card .field span { color: #d8c9a8; }
.hero__card .field input,
.hero__card .field select,
.hero__card .field textarea {
  background: rgba(255,255,255,.05);
  border-color: rgba(216,182,112,.20);
  color: #fff;
}
.hero__card .field input::placeholder { color: #95897a; }
.hero__card .field input:focus,
.hero__card .field select:focus {
  border-color: var(--gold-3);
  box-shadow: 0 0 0 3px rgba(216,182,112,.18);
  background: rgba(255,255,255,.08);
}
.hero__card .field select option { background: var(--dark); color: #fff; }

.field { display: block; margin-bottom: 16px; }
.field span { display: block; margin-bottom: 7px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit; color: var(--ink);
  transition: border .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(180,137,56,.14);
  background: #fffdf8;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); background: #fef6f6; }
.field .err { display: block; color: var(--danger); font-size: .82rem; font-style: normal; margin-top: 5px; }

.section { padding: 100px 0; position: relative; }
.section--tight { padding: 70px 0; }
.bg-soft { background: var(--soft); }
.bg-cream { background: var(--cream); }
.bg-navy { background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%); color: #e6dccb; position: relative; overflow: hidden; }
.bg-navy::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 400px at 80% 20%, rgba(180,137,56,.10), transparent 60%);
  pointer-events: none;
}
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy .section__head p { color: #c8b990; }

.section__head { margin-bottom: 56px; position: relative; }
.section__head .eyebrow { margin-bottom: 14px; }
.section__head h2 { margin: 0 0 14px; }
.section__head p { color: var(--muted); margin: 0; max-width: 720px; font-size: 1.05rem; }
.section__head--center { text-align: center; }
.section__head--center p { margin: 0 auto; }
.section__head--split { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.partners {
  padding: 50px 0;
  background: #fff;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  position: relative;
  z-index: 1;
}
.partners__label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--muted-2);
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 28px;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; gap: 80px;
  width: max-content;
  animation: marquee 35s linear infinite;
}
.marquee__track img {
  height: 60px; width: auto;
  transition: transform .3s var(--ease);
}
.marquee__track img:hover { transform: scale(1.06); }
/* RTL (default): scroll rightward — second copy fills from the left */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
/* LTR (English): scroll leftward — second copy fills from the right.
   Using +50% in LTR left an empty gap and made logos vanish off-screen. */
[dir="ltr"] .marquee__track { animation-name: marquee-ltr; }
@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display: flex; flex-direction: column;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(180,137,56,.30);
  box-shadow: var(--shadow-lg);
}
.service-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--soft);
}
.service-card__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.service-card:hover .service-card__image img { transform: scale(1.08); }
.service-card__image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,17,10,.55) 100%);
}
.service-card__icon-float {
  position: absolute;
  bottom: 16px; right: 16px; z-index: 2;
  width: 52px; height: 52px;
  background: var(--gold);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 6px 20px rgba(180,137,56,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.service-card:hover .service-card__icon-float {
  transform: scale(1.08) rotate(-4deg);
  background: var(--gold-2);
}
.service-card__icon-float svg { width: 26px; height: 26px; }
.service-card__num {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: "Tajawal", sans-serif;
  font-size: 2.6rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.service-card__body { padding: 22px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.service-card__body h2,
.service-card__body h3 {
  font-size: 1.2rem; margin: 0 0 10px;
  color: var(--ink);
}
.service-card__body p {
  color: var(--muted);
  margin: 0 0 16px;
  font-size: .95rem;
  flex: 1;
}
.service-card__more {
  font-weight: 600;
  color: var(--gold-2);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .25s var(--ease);
}
.service-card__more:hover { gap: 10px; color: var(--burgundy); }
.service-card__more::after {
  content: "←";
  display: inline-block;
  transition: transform .25s var(--ease);
}
.service-card__more:hover::after { transform: translateX(-4px); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.why-card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(180,137,56,.10), transparent 70%);
  transform: translate(40%,-40%);
  transition: transform .4s var(--ease);
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(180,137,56,.30);
  box-shadow: var(--shadow);
}
.why-card:hover::before { transform: translate(20%,-20%); }
.why-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(180,137,56,.16), rgba(180,137,56,.04));
  color: var(--gold-2);
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.why-card__icon svg { width: 28px; height: 28px; }
.why-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.why-card p { color: var(--muted); margin: 0; font-size: .94rem; }

/* ===== Connected process steps (stepper) ===== */
.why-grid--steps .why-card {
  text-align: center;
  overflow: visible;
}
.why-grid--steps .why-card::before { display: none; }
.why-grid--steps .why-card__icon {
  margin-inline: auto;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  box-shadow: 0 8px 18px rgba(180, 137, 56, .30), 0 0 0 7px #fff;
  position: relative;
  z-index: 2;
}
/* pulsing radar ring on each node — sequential to show the flow */
.why-grid--steps .why-card__icon::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .why-grid--steps .why-card__icon::after { animation: stepNodePulse 3.2s ease-out infinite; }
  .why-grid--steps .why-card:nth-child(1) .why-card__icon::after { animation-delay: 0s; }
  .why-grid--steps .why-card:nth-child(2) .why-card__icon::after { animation-delay: .35s; }
  .why-grid--steps .why-card:nth-child(3) .why-card__icon::after { animation-delay: .70s; }
  .why-grid--steps .why-card:nth-child(4) .why-card__icon::after { animation-delay: 1.05s; }
}
@keyframes stepNodePulse {
  0%   { transform: scale(.85); opacity: .7; }
  30%  { opacity: .35; }
  55%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes stepFlow {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (min-width: 1040px) {
  .why-grid--steps { grid-template-columns: repeat(4, 1fr); }
  /* connecting track behind the icon nodes */
  .why-grid--steps .why-card::after {
    content: "";
    position: absolute;
    top: 60px;
    inset-inline: -11px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg,
      rgba(180,137,56,.25) 0%,
      var(--gold) 30%,
      #fff6e6 50%,
      var(--burgundy) 70%,
      rgba(180,137,56,.25) 100%);
    background-size: 200% 100%;
    opacity: .9;
    transform: translateY(-50%);
    z-index: 0;
  }
  /* trim the outer ends so the line starts/ends at the first/last node */
  [dir="rtl"] .why-grid--steps .why-card:first-child::after { inset-inline-start: 50%; }
  [dir="rtl"] .why-grid--steps .why-card:last-child::after  { inset-inline-end: 50%; }
  [dir="ltr"] .why-grid--steps .why-card:first-child::after { inset-inline-start: 50%; }
  [dir="ltr"] .why-grid--steps .why-card:last-child::after  { inset-inline-end: 50%; }
  /* travelling light flowing along the track (sequential per segment) */
  @media (prefers-reduced-motion: no-preference) {
    .why-grid--steps .why-card::after { animation: stepFlow 3.2s linear infinite; }
    .why-grid--steps .why-card:nth-child(1)::after { animation-delay: .35s; }
    .why-grid--steps .why-card:nth-child(2)::after { animation-delay: .70s; }
    .why-grid--steps .why-card:nth-child(3)::after { animation-delay: 1.05s; }
    .why-grid--steps .why-card:nth-child(4)::after { animation-delay: 1.40s; }
  }
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.testimonial {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(216,182,112,.18);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 0;
  position: relative;
  backdrop-filter: blur(8px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.testimonial:hover {
  transform: translateY(-4px);
  border-color: rgba(216,182,112,.40);
  background: rgba(255,255,255,.07);
}
.testimonial::before {
  content: "“";
  position: absolute;
  top: 14px; right: 22px;
  font-size: 4rem;
  color: var(--gold);
  opacity: .5; line-height: 1;
  font-family: serif;
}
.testimonial blockquote {
  margin: 22px 0 22px; font-size: 1.04rem; line-height: 1.85;
  color: #f0e6d2;
}
.testimonial figcaption {
  display: flex; gap: 14px; align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(216,182,112,.16);
}
.testimonial figcaption strong {
  color: #fff; display: block;
  font-family: "Tajawal", sans-serif;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial figcaption div span { color: var(--gold-3); font-size: .85rem; display: block; margin-top: 2px; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.post-card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(180,137,56,.30);
}
.post-card__img {
  display: block;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--soft) 0%, var(--soft-2) 100%);
  overflow: hidden;
  position: relative;
}
.post-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.post-card:hover .post-card__img img { transform: scale(1.06); }
.post-card__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-2);
  font-family: "Tajawal", sans-serif;
  font-weight: 700; font-size: 1.5rem;
}
.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card__cat {
  display: inline-block;
  background: rgba(180,137,56,.10);
  color: var(--gold-2);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .74rem; font-weight: 600;
  align-self: flex-start;
  letter-spacing: .02em;
}
.post-card h2, .post-card h3 { font-size: 1.1rem; margin: 0; line-height: 1.4; }
.post-card h2 a, .post-card h3 a { color: var(--ink); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--gold-2); }
.post-card p { color: var(--muted); font-size: .92rem; margin: 0; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: .82rem; }

.pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 60px; }
.pagination__btn, .pagination__num {
  padding: 9px 16px; border: 1px solid var(--line);
  background: #fff; border-radius: 10px;
  color: var(--ink); font-weight: 600; font-size: .92rem;
  transition: all .2s var(--ease);
}
.pagination__btn:hover, .pagination__num:hover {
  background: var(--soft); color: var(--gold-2);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.pagination__num.is-current {
  background: var(--gold); color: #fff;
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.pagination__btn.is-disabled { opacity: .35; pointer-events: none; }
.pagination__dots { padding: 9px 4px; color: var(--muted-2); }
.pagination__info { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 16px; }

.faq { display: grid; gap: 12px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item:hover { border-color: var(--line); }
.faq__item[open] {
  border-color: rgba(180,137,56,.35);
  box-shadow: var(--shadow-sm);
}
.faq__item summary {
  padding: 18px 24px; cursor: pointer; font-weight: 600;
  color: var(--ink); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: "Tajawal", sans-serif;
  font-size: 1.02rem;
  user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex-shrink: 0;
  width: 28px; height: 28px;
  background: rgba(180,137,56,.10);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: background .25s var(--ease), transform .25s var(--ease);
  background-image:
    linear-gradient(var(--gold-2), var(--gold-2)),
    linear-gradient(var(--gold-2), var(--gold-2));
  background-position: center;
  background-size: 10px 2px, 2px 10px;
  background-repeat: no-repeat;
}
.faq__item[open] summary::after {
  background-size: 10px 2px, 0 0;
  transform: rotate(180deg);
}
.faq__item p { padding: 0 24px 22px; margin: 0; color: var(--muted); line-height: 1.85; }

.cta-band {
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.30) 45%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.30) 55%, transparent 70%),
    linear-gradient(135deg, #6E4A1F 0%, #B48938 45%, #D8AF55 100%);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(180,137,56,.40);
  border-bottom: 1px solid rgba(180,137,56,.40);
}
.cta-band h2 { color: #fff; text-shadow: 0 2px 8px rgba(31,26,18,.25); }
.cta-band p  { color: rgba(255,255,255,.92); }
.cta-band .btn--primary {
  background: #fff !important;
  color: var(--gold-ink) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 10px 28px rgba(31,26,18,.18);
}
.cta-band .btn--primary:hover {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .cta-band { animation: ctaSheen 7s ease-in-out infinite; }
  .cta-band h2 { animation: ctaTextShimmer 5s ease-in-out infinite; }
  .cta-band .btn--primary { animation: ctaBtnPulse 2.8s ease-in-out infinite; }
}
@keyframes ctaSheen {
  0%, 100% { background-position: 0% 0, 0 0; }
  50%      { background-position: 100% 0, 0 0; }
}
@keyframes ctaTextShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes ctaBtnPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 8px 22px rgba(180,137,56,.34); }
  50%      { transform: scale(1.035); box-shadow: 0 12px 34px rgba(180,137,56,.60); }
}
.cta-band::before {
  content: ""; position: absolute;
  top: -80px; left: -80px;
  width: 280px; height: 280px;
  background: var(--gold);
  opacity: .18;
  border-radius: 50%;
  filter: blur(70px);
}
.cta-band::after {
  content: ""; position: absolute;
  bottom: -50px; right: -50px;
  width: 200px; height: 200px;
  background: var(--gold-3);
  opacity: .12;
  border-radius: 50%;
  filter: blur(60px);
}
.cta-band__row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 30px;
  flex-wrap: wrap; position: relative;
}
.cta-band h2 { color: #fff; margin: 0 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.cta-band p { color: #e6dccb; margin: 0; font-size: 1.05rem; }
.cta-band .btn--primary {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #fff;
}
.cta-band .btn--primary:hover { transform: translateY(-2px); }

.page-hero {
  padding: 70px 0 50px;
  background: linear-gradient(180deg, var(--soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -100px; left: -100px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(180,137,56,.14), transparent 60%);
  pointer-events: none;
}
.page-hero h1 { margin: 12px 0 12px; }
.page-hero p { color: var(--muted); margin: 0; max-width: 700px; font-size: 1.05rem; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; color: var(--muted-2); font-size: .88rem; }
.breadcrumbs li + li::before { content: "/"; padding: 0 6px; color: var(--line); }
.breadcrumbs a { color: var(--gold-2); }
.breadcrumbs a:hover { color: var(--burgundy); }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: start; }
.info-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.info-card h3 { margin: 0 0 12px; }
.info-card h3.mt-6 {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-2);
}
.badges { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.badges li {
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 16px;
  font-weight: 600; color: var(--ink);
  font-size: .92rem;
}
.stats-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.stats-list li {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 14px;
  text-align: center;
  font-size: .82rem; color: var(--muted);
}
.stats-list strong {
  display: block;
  font-family: "Tajawal", sans-serif;
  font-size: 1.6rem;
  color: var(--gold-2);
  margin-bottom: 4px;
}
.bullet-list { padding: 0 1.2em; }
.bullet-list li { margin-bottom: 10px; }
.bullet-list strong { color: var(--gold-2); }

.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.trio__card {
  background: linear-gradient(180deg, #fff 0%, #fdfaf3 100%);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 40px 34px 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(31, 25, 16, .05);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.trio__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(180, 137, 56, .16);
  border-color: rgba(180, 137, 56, .32);
}
.trio__card::before {
  content: ""; position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--burgundy));
}
.trio__card::after {
  content: ""; position: absolute;
  top: -60px; inset-inline-start: -60px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(180,137,56,.10), transparent 70%);
  pointer-events: none;
}
.trio__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  margin-bottom: 22px;
  box-shadow: 0 10px 22px rgba(180, 137, 56, .30);
}
.trio__icon svg { width: 28px; height: 28px; }
.trio__card h2 { font-size: 1.3rem; margin-bottom: 14px; }
.trio__card p { color: var(--muted); line-height: 1.9; margin: 0; }
.trio__card ul { list-style: none; padding: 0; margin: 0; }
.trio__card li {
  position: relative;
  padding-inline-start: 26px;
  margin-bottom: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.trio__card li::before {
  content: ""; position: absolute;
  inset-inline-start: 2px; top: .5em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--gold), var(--burgundy));
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(180, 137, 56, .35);
}

.lead { font-size: 1.15rem; color: var(--ink); line-height: 1.85; }

/* ===== CEO / Executive message ===== */
.ceo-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}
.ceo-portrait { position: sticky; top: 110px; text-align: center; }
.ceo-portrait__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--soft) 0%, #fff 100%);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 44px rgba(31, 25, 16, .12);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ceo-portrait__photo::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(180, 137, 56, .18);
  pointer-events: none;
}
.ceo-portrait__photo img { width: 100%; height: 100%; object-fit: cover; }
.ceo-portrait__placeholder { color: var(--gold-2); opacity: .45; }
.ceo-portrait__placeholder svg { width: 96px; height: 96px; }
.ceo-portrait__meta { margin-top: 20px; }
.ceo-portrait__meta strong { display: block; font-size: 1.15rem; color: var(--ink); }
.ceo-portrait__meta span { color: var(--gold-2); font-weight: 600; font-size: .9rem; }
.ceo-portrait__badges {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.ceo-portrait__badges li {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  color: var(--gold-2);
  background: rgba(180, 137, 56, .10);
  border: 1px solid rgba(180, 137, 56, .22);
  border-radius: 999px;
  padding: 5px 12px;
}
.ceo-letter {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fdfaf3 100%);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 48px 46px 42px;
  box-shadow: 0 10px 30px rgba(31, 25, 16, .05);
  overflow: hidden;
}
.ceo-letter::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0;
  height: 4px; background: linear-gradient(90deg, var(--gold), var(--burgundy));
}
.ceo-letter__quote {
  position: absolute; top: 6px; inset-inline-start: 30px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7rem; line-height: 1;
  color: rgba(180, 137, 56, .14);
  pointer-events: none; user-select: none;
}
.ceo-letter__salutation {
  font-size: 1.2rem; font-weight: 700; color: var(--ink);
  margin: 6px 0 20px;
}
.ceo-letter p { color: var(--muted); line-height: 2; margin: 0 0 16px; }
.ceo-letter__sign {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-weight: 700; color: var(--gold-2) !important;
}
@media (max-width: 860px) {
  .ceo-layout { grid-template-columns: 1fr; gap: 30px; }
  .ceo-portrait { position: static; max-width: 260px; margin: 0 auto; }
  .ceo-letter { padding: 34px 24px 30px; }
  .ceo-letter__quote { font-size: 5rem; }
}

/* ===== Home CEO message section ===== */
.ceo-home__grid {
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: 56px;
  align-items: center;
}
.ceo-home__photo { position: relative; }
.ceo-home__frame {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 64px rgba(0,0,0,.45);
  border: 1px solid rgba(216,182,112,.22);
}
.ceo-home__frame img,
.ceo-home__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ceo-home__placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2a2018 0%, #14100c 100%);
  color: var(--gold-3);
}
.ceo-home__placeholder svg { width: 96px; height: 96px; opacity: .5; }
.ceo-home__badge {
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  padding: 13px 30px;
  border-radius: 14px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 16px 34px rgba(180,137,56,.42);
}
.ceo-home__badge strong { display: block; font-size: 1.05rem; font-weight: 800; }
.ceo-home__badge span { font-size: .8rem; opacity: .92; }

.ceo-home__text .eyebrow { margin-bottom: 14px; }
.ceo-home__text h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 18px;
  background: linear-gradient(95deg, var(--gold-3) 0%, var(--gold) 45%, #E89DB0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 200% auto;
}
.ceo-home__salutation { color: var(--gold-3); font-weight: 700; font-size: 1.12rem; margin: 0 0 16px; }
.ceo-home__text p { color: rgba(255,255,255,.82); line-height: 1.95; margin: 0 0 14px; }
.ceo-home__cta {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
[dir="rtl"] .ceo-home__cta svg { transform: scaleX(-1); }

@media (max-width: 860px) {
  .ceo-home__grid { grid-template-columns: 1fr; gap: 50px; justify-items: center; text-align: center; }
  .ceo-home__photo { max-width: 320px; width: 100%; }
  .ceo-home__text { text-align: center; }
  .ceo-home__text .eyebrow,
  .ceo-home__salutation { display: block; }
}

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.contact-list li {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 14px; padding: 18px 22px;
  transition: border-color .25s var(--ease);
}
.contact-list li:hover { border-color: rgba(180,137,56,.30); }
.contact-list__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, rgba(180,137,56,.16), rgba(180,137,56,.04));
  color: var(--gold-2);
  border-radius: 12px;
  flex-shrink: 0;
}
.contact-list strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 2px; }
.contact-list a { color: var(--gold-2); font-weight: 600; }
.contact-list a:hover { color: var(--burgundy); }

.request-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.multistep {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}
.multistep__bar {
  display: flex; gap: 10px;
  list-style: none; padding: 0;
  margin: 0 0 32px;
}
.multistep__bar li {
  flex: 1; display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 12px;
  background: var(--soft); color: var(--muted);
  font-weight: 600; font-size: .92rem;
  border: 1.5px solid transparent;
  transition: all .25s var(--ease);
}
.multistep__bar li.is-active {
  background: rgba(180,137,56,.10);
  color: var(--gold-2);
  border-color: var(--gold);
}
.multistep__bar li.is-done {
  background: #e8f5f2;
  color: var(--success);
  border-color: #c4e6df;
}
.multistep__bar li::before {
  content: attr(data-step);
  display: inline-flex; width: 30px; height: 30px;
  border-radius: 50%; background: #fff;
  color: inherit; align-items: center; justify-content: center;
  font-weight: 700; font-family: "Tajawal", sans-serif;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
}
.multistep__step { display: none; border: 0; padding: 0; margin: 0; }
.multistep__step.is-active { display: block; }
.multistep__step legend {
  font-weight: 700; color: var(--ink);
  padding: 0; margin: 0 0 20px;
  font-size: 1.25rem;
  font-family: "Tajawal", sans-serif;
}
.multistep__actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 22px; }

.review { background: var(--soft); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; }
.review dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; }
.review dt { color: var(--muted); font-weight: 600; }
.review dd { margin: 0; color: var(--ink); }

.trust-panel {
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  overflow: hidden;
}
.trust-panel::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  opacity: .25;
  border-radius: 50%; filter: blur(40px);
}
.trust-panel h3 { color: #fff; margin: 0 0 18px; font-size: 1.1rem; position: relative; }
.trust-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; position: relative; }
.trust-list li { display: flex; gap: 12px; align-items: baseline; color: #e6dccb; font-size: .94rem; }
.trust-list strong {
  color: var(--gold-3);
  font-family: "Tajawal", sans-serif;
  font-weight: 700;
  min-width: 90px;
}
.trust-quote {
  background: rgba(255,255,255,.06);
  border-radius: 14px; padding: 18px;
  border-right: 3px solid var(--gold);
  position: relative;
}
.trust-quote svg { color: var(--gold-3); margin-bottom: 6px; }
.trust-quote p { margin: 0 0 8px; color: #f0e6d2; font-style: italic; line-height: 1.7; }
.trust-quote span { color: var(--gold-3); font-size: .85rem; font-weight: 600; }

.article__meta { display: flex; gap: 14px; align-items: center; margin: 18px 0 0; color: var(--muted); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  font-weight: 700; flex-shrink: 0;
  font-size: 1.05rem; line-height: 1;
  font-family: "Tajawal", sans-serif;
}
.avatar--lg { width: 56px; height: 56px; font-size: 1.3rem; }
.article__meta strong { display: block; color: var(--ink); font-size: .98rem; }
.article__meta small { color: var(--muted); font-size: .82rem; }

.article__body { padding-top: 50px; }
.article__grid { display: grid; grid-template-columns: 290px 1fr; gap: 50px; align-items: start; }

.toc {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
  font-size: .92rem;
}
.toc h2 {
  font-size: .82rem;
  margin: 0 0 14px;
  color: var(--gold-2);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
}
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 6px 0; }
.toc__h2 a { color: var(--ink-2); font-weight: 500; }
.toc__h3 { padding-right: 16px; }
.toc__h3 a { color: var(--muted); font-size: .86rem; }
.toc a {
  display: block; padding: 6px 10px;
  border-radius: 6px;
  border-right: 2px solid transparent;
  transition: all .2s var(--ease);
}
.toc a:hover { color: var(--gold-2); background: rgba(180,137,56,.06); }
.toc a.is-active {
  color: var(--gold-2);
  background: rgba(180,137,56,.10);
  border-right-color: var(--gold);
  font-weight: 600;
}

.prose { font-size: 1.06rem; line-height: 1.95; color: var(--ink-2); }
.prose h2 {
  margin: 40px 0 16px; padding-top: 16px;
  border-top: 2px solid var(--soft);
  font-size: 1.6rem;
  font-family: "Tajawal", sans-serif;
}
.prose h3 { margin: 30px 0 12px; font-size: 1.22rem; color: var(--ink); }
.prose h4 { margin: 22px 0 10px; font-size: 1.08rem; color: var(--ink); }
.prose p { margin: 0 0 1.2em; }
.prose ul, .prose ol { padding: 0 1.5em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--gold-2); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { color: var(--burgundy); }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: 22px 0; padding: 18px 22px;
  border-right: 3px solid var(--gold);
  background: var(--soft);
  border-radius: 0 12px 12px 0;
  color: var(--ink);
  font-style: italic;
  font-size: 1.04rem;
}
.prose img { border-radius: 12px; margin: 22px 0; }
.prose__cover { margin: 0 0 30px; }
.prose__cover img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.prose hr { border: 0; height: 1px; background: var(--line); margin: 36px 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 22px 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 12px 16px; text-align: right; }
.prose th { background: var(--soft); color: var(--ink); font-weight: 700; }

.share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 0; }
.share span { color: var(--muted); font-weight: 600; }
.share a {
  background: var(--soft);
  padding: 7px 16px; border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  color: var(--ink);
  transition: all .25s var(--ease);
}
.share a:hover { background: var(--gold); color: #fff; transform: translateY(-1px); }

.author-box {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--soft); border-radius: var(--radius-lg);
  padding: 28px; margin-top: 30px;
}
.author-box strong { display: block; color: var(--ink); margin-bottom: 6px; font-family: "Tajawal", sans-serif; }
.author-box p { margin: 0 0 12px; color: var(--muted); }

.thanks__check { margin: 0 auto 22px; }
.thanks p .btn { margin: 6px 6px 0; }

.site-footer {
  background: var(--dark);
  color: #e6dccb;
  padding: 80px 0 32px;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--gold), transparent 60%);
  opacity: .08; filter: blur(60px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 40px;
  position: relative;
}
.brand--footer { color: #fff; }
.brand--footer strong { color: #fff; }
.footer-about { color: #c8b990; font-size: .96rem; margin: 18px 0 20px; max-width: 340px; line-height: 1.85; }
.footer-certs { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-col h3 {
  color: var(--gold-3);
  font-size: 1.02rem;
  margin: 0 0 16px;
  font-family: "Tajawal", sans-serif;
  font-weight: 600;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a {
  color: #d8c9a8; font-size: .94rem;
  display: inline-block;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.footer-links a:hover { color: var(--gold-3); transform: translateX(-3px); }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: .92rem; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; color: #d8c9a8; }
.footer-contact li svg { flex-shrink: 0; margin-top: 4px; color: var(--gold-3); }
.footer-contact a { color: #e6dccb; }
.footer-contact a:hover { color: var(--gold-3); }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(180,137,56,.18);
  border-radius: 50%;
  color: var(--gold-3);
  transition: all .25s var(--ease);
}
.socials a:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}
.footer-bottom {
  border-top: 1px solid rgba(216,182,112,.14);
  padding-top: 24px; margin-top: 50px;
  display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: .85rem;
  color: #b5a37c;
  position: relative;
}
.footer-bottom p { margin: 0; }

.wa-fab {
  position: fixed;
  bottom: 24px; left: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(37,211,102,.55);
  z-index: 90;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-fab::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
.wa-fab:hover { transform: scale(1.08); color: #fff; box-shadow: 0 12px 36px rgba(37,211,102,.65); }
.to-top {
  position: fixed;
  bottom: 96px; left: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  border: 0;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); background: var(--gold-2); }

/* ===== Social dock (left, vertically centered) ===== */
.social-dock {
  position: fixed;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  z-index: 88;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.social-dock__toggle {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(180, 137, 56, .38);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.social-dock__toggle:hover { transform: scale(1.06); }
.social-dock__ico-close { display: none; }
.social-dock.is-open .social-dock__ico-open { display: none; }
.social-dock.is-open .social-dock__ico-close { display: block; }
.social-dock__list {
  list-style: none; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--soft);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(31, 25, 16, .10);
  max-height: 0; padding: 0 6px; opacity: 0;
  overflow: hidden; pointer-events: none;
  transform: scaleY(.7); transform-origin: top;
  transition: max-height .35s var(--ease), opacity .3s var(--ease), transform .3s var(--ease), padding .3s var(--ease);
}
.social-dock.is-open .social-dock__list {
  max-height: 360px; opacity: 1; padding: 8px 6px;
  pointer-events: auto; transform: scaleY(1);
}
.social-dock__list a {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line-2);
  color: var(--gold-2); font-weight: 800;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social-dock__list a:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }

/* ===== Request-valuation expanding fab (right, vertically centered) ===== */
.req-fab {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 88;
  display: flex; align-items: center; gap: 0;
  height: 54px;
  max-width: 54px;
  padding: 0;
  background: linear-gradient(135deg, var(--burgundy), var(--burgundy-2, #6c1f2e));
  color: #fff;
  border-radius: 999px 0 0 999px;
  box-shadow: 0 10px 26px rgba(108, 31, 46, .35);
  overflow: hidden;
  text-decoration: none;
  transition: max-width .4s var(--ease), padding .4s var(--ease), box-shadow .25s var(--ease);
}
.req-fab__icon {
  flex: 0 0 54px;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
}
.req-fab__text {
  white-space: nowrap;
  font-weight: 700; font-size: .95rem;
  opacity: 0;
  padding-inline-end: 4px;
  transition: opacity .3s var(--ease) .05s;
}
.req-fab:hover, .req-fab:focus-visible {
  max-width: 320px;
  padding-inline-end: 22px;
  box-shadow: 0 14px 34px rgba(108, 31, 46, .45);
}
.req-fab:hover .req-fab__text, .req-fab:focus-visible .req-fab__text { opacity: 1; }

@media (max-width: 768px) {
  .social-dock { left: 10px; gap: 8px; }
  .social-dock__toggle { width: 42px; height: 42px; }
  .req-fab { height: 48px; max-width: 48px; }
  .req-fab__icon { flex-basis: 48px; width: 48px; height: 48px; }
  /* on touch (no hover) keep request fab compact; tap opens /request */
}

@keyframes floatBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-anim { animation: floatBob 3.2s ease-in-out infinite; }
.float-anim--slow { animation: floatBob 5s ease-in-out infinite; }

@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp    { from { opacity: 0; transform: translate3d(0,  60px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown  { from { opacity: 0; transform: translate3d(0, -60px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-80px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(80px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn      { from { opacity: 0; transform: scale3d(.85,.85,.85); } to { opacity: 1; transform: none; } }
@keyframes zoomOutIn   { from { opacity: 0; transform: scale3d(1.18,1.18,1.18); } to { opacity: 1; transform: none; } }

@keyframes slideInLeftBig {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideInRightBig {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to   { opacity: 1; transform: none; }
}

.js [data-anim] {
  opacity: 0;
}
.js [data-anim].in-view {
  opacity: 1;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
.js [data-anim="up"].in-view       { animation-name: fadeInUp; }
.js [data-anim="down"].in-view     { animation-name: fadeInDown; }
.js [data-anim="left"].in-view     { animation-name: fadeInLeft; }
.js [data-anim="right"].in-view    { animation-name: fadeInRight; }
.js [data-anim="start"].in-view    { animation-name: fadeInLeft; }
.js [data-anim="end"].in-view      { animation-name: fadeInRight; }
[dir="rtl"].js [data-anim="start"].in-view { animation-name: fadeInRight; }
[dir="rtl"].js [data-anim="end"].in-view   { animation-name: fadeInLeft; }
.js [data-anim="zoom"].in-view     { animation-name: zoomIn; }
.js [data-anim="zoom-out"].in-view { animation-name: zoomOutIn; }
.js [data-anim="tilt"].in-view     { animation-name: fadeInUp; }
.js [data-anim="blur"].in-view     { animation-name: fadeIn; }
.js [data-anim="fade"].in-view     { animation-name: fadeIn; }
.js [data-anim="flip"].in-view     { animation-name: zoomIn; }
.js [data-anim="slide-left"].in-view  { animation-name: slideInLeftBig;  animation-duration: .9s; animation-timing-function: cubic-bezier(.25,.46,.45,.94); }
.js [data-anim="slide-right"].in-view { animation-name: slideInRightBig; animation-duration: .9s; animation-timing-function: cubic-bezier(.25,.46,.45,.94); }

.js [data-anim="slide-left"]  [data-anim],
.js [data-anim="slide-right"] [data-anim] {
  opacity: 1 !important;
  animation: none !important;
}
/* NOTE: the old rule that froze .stagger children inside slide sections
   was removed here — v3 (end of file) re-enables and choreographs them. */

.js [data-anim][data-delay="100"].in-view { animation-delay: .10s; }
.js [data-anim][data-delay="200"].in-view { animation-delay: .20s; }
.js [data-anim][data-delay="300"].in-view { animation-delay: .30s; }
.js [data-anim][data-delay="400"].in-view { animation-delay: .40s; }
.js [data-anim][data-delay="500"].in-view { animation-delay: .50s; }
.js [data-anim][data-delay="600"].in-view { animation-delay: .60s; }

.js .stagger > * {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
}
.js .stagger.dir-zoom > * { transform: scale(.88); }
.js .stagger.dir-left > * { transform: translateX(-60px); }
.js .stagger.dir-right > * { transform: translateX(60px); }
[dir="rtl"].js .stagger.dir-left > * { transform: translateX(60px); }
[dir="rtl"].js .stagger.dir-right > * { transform: translateX(-60px); }

.js .stagger.dir-zigzag > *:nth-child(odd)  { transform: translateX(-70px) translateY(20px); }
.js .stagger.dir-zigzag > *:nth-child(even) { transform: translateX(70px) translateY(20px); }
[dir="rtl"].js .stagger.dir-zigzag > *:nth-child(odd)  { transform: translateX(70px) translateY(20px); }
[dir="rtl"].js .stagger.dir-zigzag > *:nth-child(even) { transform: translateX(-70px) translateY(20px); }

.stagger.is-revealed > *:nth-child(1) { transition-delay:  80ms; opacity:1 !important; transform:none !important; }
.stagger.is-revealed > *:nth-child(2) { transition-delay: 180ms; opacity:1 !important; transform:none !important; }
.stagger.is-revealed > *:nth-child(3) { transition-delay: 280ms; opacity:1 !important; transform:none !important; }
.stagger.is-revealed > *:nth-child(4) { transition-delay: 380ms; opacity:1 !important; transform:none !important; }
.stagger.is-revealed > *:nth-child(5) { transition-delay: 480ms; opacity:1 !important; transform:none !important; }
.stagger.is-revealed > *:nth-child(6) { transition-delay: 580ms; opacity:1 !important; transform:none !important; }
.stagger.is-revealed > *:nth-child(7) { transition-delay: 680ms; opacity:1 !important; transform:none !important; }
.stagger.is-revealed > *:nth-child(8) { transition-delay: 780ms; opacity:1 !important; transform:none !important; }
.stagger.is-revealed > *:nth-child(n+9) { transition-delay: 880ms; opacity:1 !important; transform:none !important; }

.js .reveal,
.js .reveal-right,
.js .reveal-left,
.js .reveal-scale,
.js .reveal-fade {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
.js .reveal-right { transform: translateX(60px); }
.js .reveal-left  { transform: translateX(-60px); }
.js .reveal-scale { transform: scale(.88); }
.js .reveal-fade  { transform: none; }
.reveal.is-revealed,
.reveal-right.is-revealed,
.reveal-left.is-revealed,
.reveal-scale.is-revealed,
.reveal-fade.is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

.js .section:not([data-anim]):not(.no-anim),
.js .hero,
.js .partners,
.js .cta-band:not([data-anim]),
.js .page-hero:not([data-anim]) {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
/* Article body must be visible immediately — no fade-in (user reads top-down) */
.js .article,
.js .article__body,
.js .article .page-hero,
.js .article .section,
.js .article .prose {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
.section.in-view,
.hero.in-view,
.partners.in-view,
.cta-band.in-view,
.page-hero.in-view,
.article__body.in-view {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim],
  .js .reveal, .js .reveal-right, .js .reveal-left, .js .reveal-scale, .js .reveal-fade,
  .js .stagger > *,
  .js .section, .js .hero, .js .partners, .js .cta-band, .js .page-hero, .js .article__body {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 12px; padding: 4px 12px;
  border-radius: 999px;
  background: rgba(216,182,112,.10);
  border: 1px solid rgba(216,182,112,.30);
  color: var(--gold-3);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .03em;
  transition: all .2s var(--ease);
}
.lang-switch svg { flex-shrink: 0; }
.lang-switch:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold);
  z-index: 90;
  border: 0; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.chat-fab::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--gold);
  animation: pulse 2.4s var(--ease) infinite;
}
.chat-fab:hover { transform: scale(1.08); }
.chat-fab svg { width: 28px; height: 28px; }
.chat-fab__dot {
  position: absolute; top: 6px; right: 6px;
  width: 12px; height: 12px;
  background: var(--burgundy);
  border-radius: 50%; border: 2px solid #fff;
}

.chat-panel {
  position: fixed;
  bottom: 96px; right: 24px;
  width: 360px; max-width: calc(100vw - 48px);
  height: 520px; max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-xl);
  z-index: 95;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  animation: chatIn .25s var(--ease-out);
}
.chat-panel.is-open { display: flex; }
@keyframes chatIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-head {
  background: linear-gradient(135deg, var(--dark), var(--dark-2));
  color: #fff;
  padding: 18px 20px;
  display: flex; gap: 12px; align-items: center;
}
.chat-head__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold-3);
  box-shadow: 0 4px 12px rgba(180,137,56,.35);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.chat-head__avatar img {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
}
.chat-head strong {
  display: block; color: #fff;
  font-family: "Tajawal", sans-serif;
  font-size: 1rem;
}
.chat-head small {
  color: var(--gold-3); font-size: .76rem;
  display: flex; align-items: center; gap: 6px;
}
.chat-head small::before {
  content: ""; width: 6px; height: 6px;
  background: #1f8b6e; border-radius: 50%;
}
.chat-close {
  margin-inline-start: auto;
  background: rgba(255,255,255,.10); border: 0;
  width: 30px; height: 30px; border-radius: 50%;
  color: #fff; font-size: 1.1rem;
  cursor: pointer;
}
.chat-body {
  flex: 1; overflow-y: auto;
  padding: 18px;
  background: var(--soft);
}
.chat-msg {
  max-width: 80%; padding: 10px 14px;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 10px;
  animation: msgIn .3s var(--ease-out);
}
@keyframes msgIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.chat-msg.bot {
  background: #fff;
  border: 1px solid var(--line);
  margin-inline-end: auto;
  border-bottom-right-radius: 4px;
}
.chat-msg.user {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  margin-inline-start: auto;
  border-bottom-left-radius: 4px;
}
.chat-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.chat-quick button {
  background: #fff;
  border: 1px solid var(--gold);
  color: var(--gold-2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.chat-quick button:hover {
  background: var(--gold); color: #fff;
}
.chat-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
  display: flex; gap: 8px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.chat-foot input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit; color: var(--ink);
  font-size: .9rem;
  background: var(--soft);
  transition: border .2s var(--ease), background .2s var(--ease);
}
.chat-foot input:focus {
  outline: 0;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(180,137,56,.14);
}
.chat-foot button {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  border: 0;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.chat-foot button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(180,137,56,.35);
}

[dir="ltr"] .chat-fab { right: auto; left: 24px; }
[dir="ltr"] .chat-panel { right: auto; left: 24px; }
[dir="ltr"] .wa-fab { left: auto; right: 24px; }
[dir="ltr"] .to-top { left: auto; right: 28px; }

@media (max-width: 1024px) {
  :root { --header-h: 124px; }
  .hero { padding: 70px 0 90px; }
  .hero__grid { grid-template-columns: 1fr; gap: 50px; min-height: auto; }
  .two-col, .contact-grid, .request-layout { grid-template-columns: 1fr; }
  .article__grid { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 80px 0; }
}

@media (max-width: 740px) {
  :root { --header-h: var(--header-h-mobile); }
  .topbar__certs { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch;
    padding: 16px;
    gap: 4px;
    transform: translateY(-12px); opacity: 0;
    pointer-events: none;
    transition: all .25s var(--ease);
    box-shadow: var(--shadow);
  }
  .primary-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .nav-link { padding: 14px 16px; border-radius: 8px; font-size: 1rem; }
  .nav-link::after { display: none; }
  .nav-cta { width: 100%; text-align: center; margin-top: 8px; }
  .section { padding: 60px 0; }
  .hero { padding: 50px 0 70px; }
  .hero__stats { gap: 22px; flex-wrap: wrap; }
  .hero__stats li:not(:last-child)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .section__head--split { align-items: flex-start; }
  .section__head { margin-bottom: 36px; }
  .multistep { padding: 24px 18px; }
  .multistep__bar li span { display: none; }
  .multistep__bar li { padding: 12px; justify-content: center; }
  .stats-list { grid-template-columns: repeat(3, 1fr); }
  .cta-band__row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .topbar__contact { font-size: .76rem; gap: 12px; }
  .btn { padding: 12px 20px; font-size: .92rem; }
  .pagination__num { padding: 7px 12px; font-size: .85rem; }
  .testimonial { padding: 26px; }
}

@media print {
  .site-header, .site-footer, .wa-fab, .to-top, .cta-band, .share, .author-box, .toc, .breadcrumbs, .pagination, .scroll-progress { display: none !important; }
  .article__grid { grid-template-columns: 1fr; }
  body { background: #fff; color: #000; }
}

html[data-theme="marine"] {
  
  --gold:        #2D8A9D;   
  --gold-2:      #1F6E80;
  --gold-3:      #5BB8C8;
  --gold-glow:   #7DCFDF;
  --burgundy:    #F4A261;   
  --burgundy-2:  #E78A3F;

  --ink:         #0E1B2A;
  --ink-2:       #1F3346;
  --muted:       #5A6B7F;
  --muted-2:     #8896A5;
  --line:        #DDE5EC;
  --line-2:      #E8EEF3;

  --bg:          #ffffff;
  --soft:        #F1F5F8;
  --soft-2:      #E5ECF1;
  --cream:       #FAFCFD;

  --dark:        #0A1622;
  --dark-2:      #142839;
  --dark-3:      #1F3A52;

  --shadow-xs:   0 1px 2px rgba(10,22,34,.06);
  --shadow-sm:   0 2px 8px rgba(10,22,34,.08);
  --shadow:      0 10px 30px rgba(10,22,34,.12);
  --shadow-lg:   0 24px 60px rgba(10,22,34,.20);
  --shadow-xl:   0 40px 90px rgba(10,22,34,.28);
  --shadow-gold: 0 10px 30px rgba(45,138,157,.35);
}

html[data-theme="marine"] body,
html[data-theme="marine"] h1,
html[data-theme="marine"] h2,
html[data-theme="marine"] h3,
html[data-theme="marine"] h4,
html[data-theme="marine"] h5,
html[data-theme="marine"] .brand__text strong,
html[data-theme="marine"] .brand__text em,
html[data-theme="marine"] .hero__title,
html[data-theme="marine"] .nav-link,
html[data-theme="marine"] .btn,
html[data-theme="marine"] .post-card__placeholder,
html[data-theme="marine"] .multistep__step legend,
html[data-theme="marine"] .stat strong,
html[data-theme="marine"] .stats-list strong,
html[data-theme="marine"] .hero__stats strong,
html[data-theme="marine"] .faq__item summary,
html[data-theme="marine"] .author-box strong,
html[data-theme="marine"] .footer-col h4,
html[data-theme="marine"] .testimonial figcaption strong,
html[data-theme="marine"] .trust-list strong,
html[data-theme="marine"] .avatar,
html[data-theme="marine"] .toc h2 {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif !important;
}
html[data-theme="marine"] h1,
html[data-theme="marine"] h2,
html[data-theme="marine"] .hero__title {
  font-weight: 900;
  letter-spacing: -0.01em;
}
html[data-theme="marine"] h3, html[data-theme="marine"] h4, html[data-theme="marine"] h5 {
  font-weight: 800;
}
html[data-theme="marine"] body {
  font-weight: 400;
}

html[data-theme="marine"] .cta-band {
  background: linear-gradient(135deg, var(--dark) 0%, var(--gold-2) 100%);
}

html[data-theme="marine"] .hero::before {
  background:
    radial-gradient(800px 500px at 70% 30%, rgba(45,138,157,.30), transparent 60%),
    radial-gradient(700px 500px at 20% 90%, rgba(244,162,97,.22), transparent 60%),
    linear-gradient(180deg, rgba(10,22,34,.78) 0%, rgba(10,22,34,.88) 60%, rgba(10,22,34,.95) 100%);
}

html[data-theme="marine"] .service-card__icon-float {
  box-shadow: 0 6px 20px rgba(45,138,157,.5), inset 0 1px 0 rgba(255,255,255,.2);
}

html[data-theme="marine"] .chat-fab {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow: var(--shadow-gold);
}
html[data-theme="marine"] .chat-fab__dot {
  background: var(--burgundy);
}

.hero__media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  animation: heroKenBurns 11s ease-out forwards;
}
.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero__slide.is-active img {
  animation: heroKenBurns 11s ease-out;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.08) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2%, -1.5%); }
}

.hero__dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}
.hero__dot {
  width: 30px; height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.28);
  border: 0; padding: 0; cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}
.hero__dot:hover { background: rgba(255,255,255,.55); }
.hero__dot.is-active {
  background: var(--gold);
  width: 50px;
}

.hero__media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.theme-switch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 8px; padding: 4px 10px;
  border-radius: 999px;
  background: rgba(216,182,112,.10);
  border: 1px solid rgba(216,182,112,.30);
  color: var(--gold-3);
  font-size: .76rem; font-weight: 700;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.theme-switch svg { flex-shrink: 0; }
.theme-switch:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
html[data-theme="marine"] .theme-switch {
  background: rgba(91,184,200,.10);
  border-color: rgba(91,184,200,.30);
  color: var(--gold-3);
}
html[data-theme="marine"] .theme-switch:hover {
  background: var(--gold);
  color: #fff;
}

/* ============================================================
   PREMIUM SECTION ENTRANCE ANIMATIONS — v3
   Personality: PREMIUM (LottieFiles motion-design skill)
   - Signature easing: cubic-bezier(.4,0,.2,1)
   - Section container: gentle rise (small) so it never overpowers
   - Section CONTENT (.stagger cards): the star — clear cascade
     that now plays inside EVERY section, including slide ones
   - Stagger budget kept under 500ms (skill rule)
   ============================================================ */

:root { --ease-premium: cubic-bezier(.4, 0, .2, 1); }

/* 1) Softer keyframes for inline [data-anim] elements (hero, buttons…).
      Redefining the same names upgrades every variant at once. */
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translate3d(0, 42px, 0) scale(.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes fadeInDown {
  0%   { opacity: 0; transform: translate3d(0, -42px, 0) scale(.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes fadeInLeft {
  0%   { opacity: 0; transform: translate3d(-56px, 10px, 0) scale(.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes fadeInRight {
  0%   { opacity: 0; transform: translate3d(56px, 10px, 0) scale(.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes zoomIn {
  0%   { opacity: 0; transform: scale(.9) translateY(28px); }
  100% { opacity: 1; transform: none; }
}
@keyframes zoomOutIn {
  0%   { opacity: 0; transform: scale(1.14); }
  100% { opacity: 1; transform: none; }
}
.js [data-anim].in-view {
  animation-duration: 1.05s;
  animation-timing-function: var(--ease-premium);
  will-change: transform, opacity;
}

/* 2) SECTION CONTAINERS — uniform gentle rise.
      Override every section-level data-anim (incl. big slides) so the
      block settles calmly and the inner content cascade stays visible. */
@keyframes sectionRise {
  0%   { opacity: 0; transform: translate3d(0, 36px, 0) scale(.992); }
  100% { opacity: 1; transform: none; }
}
.js .section[data-anim].in-view,
.js .cta-band[data-anim].in-view,
.js .partners[data-anim].in-view {
  animation-name: sectionRise !important;
  animation-duration: 1s !important;
  animation-timing-function: var(--ease-premium) !important;
  animation-fill-mode: both !important;
}
.js .section:not([data-anim]):not(.no-anim),
.js .cta-band:not([data-anim]),
.js .page-hero:not([data-anim]) {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-premium),
              transform 1s var(--ease-premium);
  will-change: transform, opacity;
}

/* 3) CONTENT CASCADE — re-enable + tune .stagger in ALL sections.
      This overrides the old rule that froze content inside slide
      sections, so every grid/list now animates item-by-item. */
.js .stagger > *,
.js [data-anim="slide-left"]  .stagger > *,
.js [data-anim="slide-right"] .stagger > * {
  opacity: 0 !important;
  transform: translateY(28px) scale(.965);
  transition: opacity .8s var(--ease-premium),
              transform .8s var(--ease-premium);
  will-change: transform, opacity;
}
.js .stagger.dir-zoom  > * { transform: scale(.9); }
.js .stagger.dir-left  > * { transform: translateX(-44px) scale(.97); }
.js .stagger.dir-right > * { transform: translateX(44px)  scale(.97); }
[dir="rtl"].js .stagger.dir-left  > * { transform: translateX(44px)  scale(.97); }
[dir="rtl"].js .stagger.dir-right > * { transform: translateX(-44px) scale(.97); }

/* Reveal each child with a 70ms cascade — total spread capped <500ms */
.js .stagger.is-revealed > *,
.js [data-anim="slide-left"].in-view  .stagger > *,
.js [data-anim="slide-right"].in-view .stagger > * {
  opacity: 1 !important;
  transform: none !important;
}
.js .stagger.is-revealed > *:nth-child(1) { transition-delay: 100ms; }
.js .stagger.is-revealed > *:nth-child(2) { transition-delay: 220ms; }
.js .stagger.is-revealed > *:nth-child(3) { transition-delay: 340ms; }
.js .stagger.is-revealed > *:nth-child(4) { transition-delay: 460ms; }
.js .stagger.is-revealed > *:nth-child(5) { transition-delay: 580ms; }
.js .stagger.is-revealed > *:nth-child(6) { transition-delay: 700ms; }
.js .stagger.is-revealed > *:nth-child(7) { transition-delay: 800ms; }
.js .stagger.is-revealed > *:nth-child(n+8) { transition-delay: 880ms; }

/* 4) Choreographed header reveal: eyebrow -> title -> lead -> CTA.
      Tightened to a premium budget (no element waits past ~360ms). */
.js .section__head .eyebrow,
.js .section__head h2,
.js .section__head p,
.js .section__head .btn,
.js .section__head > div > .eyebrow,
.js .section__head > div > h2 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-premium),
              transform .8s var(--ease-premium);
}
.js .section.in-view .section__head .eyebrow,
.js .section.in-view .section__head > div > .eyebrow,
.js .cta-band.in-view .section__head .eyebrow,
.js .page-hero.in-view .section__head .eyebrow {
  opacity: 1; transform: none; transition-delay: .1s;
}
.js .section.in-view .section__head h2,
.js .section.in-view .section__head > div > h2,
.js .cta-band.in-view .section__head h2,
.js .page-hero.in-view .section__head h2 {
  opacity: 1; transform: none; transition-delay: .26s;
}
.js .section.in-view .section__head p,
.js .cta-band.in-view .section__head p,
.js .page-hero.in-view .section__head p {
  opacity: 1; transform: none; transition-delay: .42s;
}
.js .section.in-view .section__head .btn {
  opacity: 1; transform: none; transition-delay: .56s;
}

/* 5) Animated gold accent line beneath each section title */
.js .section__head h2 { position: relative; }
.js .section__head h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  inset-inline-start: 0;
  width: 56px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-glow));
  box-shadow: 0 0 12px rgba(180, 137, 56, .55);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .85s var(--ease-premium) .45s;
}
[dir="rtl"].js .section__head h2::after { transform-origin: right; }
.js .section__head--center h2::after { inset-inline-start: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; }
.js .section.in-view .section__head h2::after,
.js .cta-band.in-view .section__head h2::after,
.js .page-hero.in-view .section__head h2::after { transform: scaleX(1); }
.js .section.in-view .section__head--center h2::after { transform: translateX(-50%) scaleX(1); }

/* Eyebrow dot glow — subtle living detail on reveal */
@keyframes eyebrowGlow {
  0%, 100% { box-shadow: 0 0 8px var(--gold-glow); }
  50%      { box-shadow: 0 0 16px var(--gold-glow), 0 0 26px rgba(180,137,56,.5); }
}
.js .section.in-view .section__head .eyebrow::before {
  animation: eyebrowGlow 2.4s ease-in-out .8s 2;
}

/* 6) Respect reduced-motion — neutralize everything above */
@media (prefers-reduced-motion: reduce) {
  .js .section:not([data-anim]):not(.no-anim),
  .js .cta-band:not([data-anim]),
  .js .page-hero:not([data-anim]),
  .js .stagger > *,
  .js [data-anim="slide-left"] .stagger > *,
  .js [data-anim="slide-right"] .stagger > *,
  .js .section__head .eyebrow,
  .js .section__head h2,
  .js .section__head p,
  .js .section__head .btn,
  .js .section__head > div > .eyebrow,
  .js .section__head > div > h2 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .js .section__head h2::after { transform: scaleX(1) !important; transition: none !important; }
  .js .section__head--center h2::after { transform: translateX(-50%) scaleX(1) !important; }
  .js .section.in-view .section__head .eyebrow::before { animation: none !important; }
}

/* ============================================================
   CONTACT SECTION — premium redesign
   ============================================================ */
.contact-grid { gap: 56px; }

/* Column headings get a gold accent underline */
.contact-grid > div > h2 {
  position: relative;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  padding-bottom: 18px;
  margin: 0 0 28px;
}
.contact-grid > div > h2::after {
  content: "";
  position: absolute;
  bottom: 0; inset-inline-start: 0;
  width: 54px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-glow));
  box-shadow: 0 0 12px rgba(180, 137, 56, .5);
}

/* Contact method cards */
.contact-list { gap: 14px; }
.contact-list li {
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, #ffffff, #fdfbf6);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 10px rgba(31, 26, 18, .04);
  transition: transform .35s var(--ease-premium),
              box-shadow .35s var(--ease-premium),
              border-color .35s var(--ease-premium);
}
.contact-list li::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; inset-inline-end: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-glow));
  transform: scaleY(0);
  transition: transform .35s var(--ease-premium);
}
.contact-list li:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 137, 56, .35);
  box-shadow: 0 16px 38px rgba(180, 137, 56, .16);
}
.contact-list li:hover::before { transform: scaleY(1); }

.contact-list__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff;
  box-shadow: 0 8px 18px rgba(180, 137, 56, .32);
  transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
}
[dir="rtl"] .contact-list li:hover .contact-list__icon { transform: scale(1.08) rotate(4deg); }
.contact-list li:hover .contact-list__icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 12px 26px rgba(180, 137, 56, .45);
}
.contact-list strong {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.contact-list li > div > a,
.contact-list li > div { font-size: 1.06rem; }
.contact-list a {
  position: relative;
  color: var(--ink);
  font-weight: 700;
}
.contact-list a:hover { color: var(--gold-2); }

/* Message form as a premium panel */
.contact-form {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff, #fbf8f1);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 34px 32px;
  box-shadow: 0 22px 54px rgba(31, 26, 18, .08);
}
.contact-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-glow), var(--gold));
}
.contact-form .field { margin-bottom: 18px; }
.contact-form .field span { font-size: .82rem; color: var(--ink-2); }
.contact-form .field input,
.contact-form .field textarea {
  background: #faf8f2;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.contact-form .field input:focus,
.contact-form .field textarea:focus {
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(180, 137, 56, .14);
}
.contact-form .btn--primary {
  width: 100%;
  margin-top: 6px;
  padding: 15px 24px;
  font-size: 1.05rem;
  box-shadow: var(--shadow-gold);
  transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
.contact-form .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(180, 137, 56, .4);
}

/* Image fallback (applied by main.js when an <img> fails to load) */
.img-fallback {
  object-fit: contain !important;
  padding: 12% !important;
  background: var(--soft, #f5f5f5);
  opacity: .55;
}

/* ============================================================
   Cream palette overrides (testimonials + site footer)
   Same gradient as .ceo-home--cream for visual consistency.
   ============================================================ */

/* --- Testimonials section (was bg-navy, now cream) --- */
.testimonials-section.testimonials-section--cream {
  background: linear-gradient(180deg, #FBF7EE 0%, #F4ECDB 100%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.testimonials-section--cream::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 80% 20%, rgba(180,137,56,.08) 0%, transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(138,35,50,.05) 0%, transparent 65%);
  pointer-events: none;
}
.testimonials-section--cream > * { position: relative; z-index: 1; }
.testimonials-section--cream h2 { color: var(--ink); }
.testimonials-section--cream .section__head p { color: var(--muted); }
.testimonials-section--cream .testimonial {
  background: #ffffff;
  border: 1px solid rgba(180,137,56,.18);
  box-shadow: 0 12px 28px rgba(31,26,18,.06);
}
.testimonials-section--cream .testimonial blockquote { color: var(--ink); }
.testimonials-section--cream .testimonial figcaption strong { color: var(--ink); }
.testimonials-section--cream .testimonial figcaption span { color: var(--muted); }
.testimonials-section--cream .testimonial .avatar {
  background: linear-gradient(135deg, var(--gold) 0%, #8B6520 100%);
  color: #fff;
}
.testimonials-section--cream .testimonial::before {
  color: rgba(180,137,56,.45); /* the big decorative quote mark */
}

/* --- Footer cream override --- */
.site-footer {
  background: linear-gradient(180deg, #FBF7EE 0%, #F4ECDB 100%);
  color: var(--ink);
  border-top: 1px solid rgba(180,137,56,.20);
}
.site-footer::before {
  background: radial-gradient(circle, var(--gold), transparent 60%);
  opacity: .06;
}
.site-footer .brand--footer,
.site-footer .brand--footer strong { color: var(--ink); }
.site-footer .footer-about { color: var(--muted); }
.site-footer .footer-col h3 { color: var(--gold-ink); }
.site-footer .footer-links a { color: var(--ink); }
.site-footer .footer-links a:hover { color: var(--gold-ink); }
.site-footer .footer-contact li { color: var(--ink); }
.site-footer .footer-contact li svg { color: var(--gold-ink); }
.site-footer .footer-contact a { color: var(--ink); }
.site-footer .footer-contact a:hover { color: var(--gold-ink); }
.site-footer .socials a {
  background: rgba(180,137,56,.14);
  color: var(--gold-ink);
}
.site-footer .socials a:hover {
  background: var(--gold);
  color: #fff;
}
.site-footer .footer-bottom {
  border-top-color: rgba(180,137,56,.22);
  color: var(--muted);
}

/* Footer map band — keep contrast on cream */
.footer-map-band__eyebrow { color: var(--gold-ink); }
.footer-map-band__title { color: var(--ink); }
.footer-map-band__addr { color: var(--muted); }
.footer-map-band__link { color: var(--gold-ink); }

/* "نزع الملكية" / TAQEEM / IVSC / RICS trust pills on cream */
.site-footer .footer-certs span,
.site-footer .footer-certs a,
.site-footer .footer-certs .cert {
  background: rgba(180,137,56,.10);
  color: var(--gold-ink);
  border: 1px solid rgba(180,137,56,.30);
}

/* ============================================================
   Call FAB (sits ABOVE the WhatsApp FAB)
   ============================================================ */
.call-fab {
  position: fixed;
  bottom: 96px; left: 24px;       /* 60px wa-fab + 12px gap + 24px from edge */
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #8B6520 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(180,137,56,.50);
  z-index: 90;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.call-fab::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: pulse 2s var(--ease) infinite;
}
.call-fab:hover {
  transform: scale(1.08);
  color: #fff;
  box-shadow: 0 12px 36px rgba(180,137,56,.65);
}
[dir="ltr"] .call-fab { left: auto; right: 24px; }

/* Mobile — keep them comfortable and aligned */
@media (max-width: 540px) {
  .wa-fab  { bottom: 18px; left: 18px; width: 54px; height: 54px; }
  .call-fab { bottom: 84px; left: 18px; width: 54px; height: 54px; }
  [dir="ltr"] .wa-fab  { left: auto; right: 18px; }
  [dir="ltr"] .call-fab { left: auto; right: 18px; }
}

/* ============================================================
   Reduce the cream gap above the footer map band.
   The cta-band sits right above it — collapse its bottom rhythm.
   ============================================================ */
.cta-band { padding: 56px 0 36px; }
.cta-band + .site-footer .footer-map-band { padding-top: 14px; }

/* Pull the footer up — remove the 80px top padding pushing the map band down */
.site-footer { padding-top: 0; }
.cta-band { padding: 56px 0 28px; }
.cta-band + .site-footer .footer-map-band { padding-top: 16px; padding-bottom: 18px; }

/* The inner columns area (below the map band) keeps its own breathing room */
.site-footer .footer-grid { padding-top: 48px; }

/* ============================================================
   CTA-band readability fix — force solid white text, disable
   any background-clip / shimmer that's reducing contrast.
   ============================================================ */
.cta-band,
.cta-band h2,
.cta-band p,
.cta-band__row h2,
.cta-band__row p,
.cta-band__row div h2,
.cta-band__row div p {
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
.cta-band h2,
.cta-band__row > div > h2 {
  color: #ffffff !important;
  background: none !important;
  animation: none !important;
  opacity: 1 !important;
  text-shadow: 0 2px 6px rgba(31,26,18,.45), 0 0 22px rgba(31,26,18,.20) !important;
  font-weight: 900 !important;
}
.cta-band p,
.cta-band__row > div > p {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(31,26,18,.35) !important;
  font-weight: 500 !important;
}

/* Slightly stronger gold so the text contrast is comfortable on all screens */
.cta-band {
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.20) 45%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.20) 55%, transparent 70%),
    linear-gradient(135deg, #5C3D17 0%, #8E6B2A 35%, #B48938 70%, #C99A4A 100%) !important;
  background-size: 260% 100%, 100% 100% !important;
}

/* ============================================================
   Credentials section (CEO page — official certificates)
   ============================================================ */
.credentials-section {
  background: linear-gradient(180deg, #FBF7EE 0%, #ffffff 100%);
}
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.credential-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 22px;
  background: #ffffff;
  border: 1px solid rgba(180,137,56,.22);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(31,26,18,.06);
  color: var(--ink);
  text-decoration: none;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.credential-card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold) 0%, #8B6520 100%);
}
[dir="rtl"] .credential-card::before { inset: 0 0 0 auto; }
.credential-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(180,137,56,.20);
}
.credential-card__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(180,137,56,.12) 0%, rgba(180,137,56,.04) 100%);
  border-radius: 12px;
  color: var(--gold-ink);
}
.credential-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.credential-card__org {
  display: inline-block;
  width: max-content;
  font-size: .7rem;
  letter-spacing: .18em;
  font-weight: 800;
  color: var(--gold-ink);
  background: rgba(180,137,56,.10);
  border: 1px solid rgba(180,137,56,.28);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.credential-card__title {
  font-size: .98rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.credential-card__meta {
  font-size: .78rem;
  color: var(--muted);
}
.credential-card__action {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  transition: background .2s ease;
}
.credential-card:hover .credential-card__action { background: var(--ink); }

/* ============================================================
   Cert Gallery — elegant certificate previews (replaces simple
   PDF cards). Real document thumbnails inside framed cards.
   ============================================================ */
.cert-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.cert-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--ease);
}
.cert-card:hover { transform: translateY(-6px); }
.cert-card__frame {
  position: relative;
  margin: 0;
  background: linear-gradient(135deg, #FBF7EE 0%, #F4ECDB 100%);
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(180,137,56,.30);
  box-shadow: 0 22px 50px rgba(31,26,18,.16),
              0 6px 16px rgba(31,26,18,.08);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cert-card__frame::before {
  /* gold corner accents */
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(180,137,56,.35);
  border-radius: 8px;
}
.cert-card:hover .cert-card__frame {
  border-color: var(--gold);
  box-shadow: 0 32px 60px rgba(180,137,56,.28),
              0 10px 24px rgba(31,26,18,.10);
}
.cert-card__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 297 / 210; /* A4 landscape; falls back gracefully for portrait */
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  background: #fff;
  transition: transform .5s var(--ease);
}
.cert-card:hover .cert-card__frame img { transform: scale(1.025); }

/* Verified seal — top-left badge */
.cert-card__seal {
  position: absolute;
  top: 22px; right: 22px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold) 0%, #8B6520 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(180,137,56,.45);
  z-index: 2;
}
[dir="ltr"] .cert-card__seal { right: auto; left: 22px; }

/* "View" overlay button — bottom-right, appears on hover */
.cert-card__open {
  position: absolute;
  bottom: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(15, 17, 10, .85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 2;
}
[dir="ltr"] .cert-card__open { left: auto; right: 22px; }
.cert-card:hover .cert-card__open,
.cert-card:focus-visible .cert-card__open {
  opacity: 1;
  transform: translateY(0);
}

/* Caption */
.cert-card__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}
.cert-card__org {
  display: inline-block;
  width: max-content;
  font-size: .72rem;
  letter-spacing: .24em;
  font-weight: 800;
  color: var(--gold-ink);
  background: rgba(180,137,56,.10);
  border: 1px solid rgba(180,137,56,.30);
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.cert-card__title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.45;
}
.cert-card__org-full {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 500;
}

.credentials-section {
  background: linear-gradient(180deg, #ffffff 0%, #FBF7EE 100%);
  position: relative;
  overflow: hidden;
}
.credentials-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(180,137,56,.08), transparent 70%);
  pointer-events: none;
}
.credentials-section > * { position: relative; z-index: 1; }

@media (max-width: 540px) {
  .cert-gallery { gap: 24px; }
  .cert-card__seal { width: 32px; height: 32px; top: 18px; right: 18px; }
  [dir="ltr"] .cert-card__seal { right: auto; left: 18px; }
  .cert-card__title { font-size: 1rem; }
}

/* ============================================================
   Hero — fill the full mobile viewport so the next section
   doesn't peek under the fold (client request).
   ============================================================ */
@media (max-width: 980px) {
  .hero {
    min-height: 100svh !important; /* small viewport (handles mobile browser UI) */
    min-height: 100vh !important;  /* fallback */
    padding-top: 90px !important;
    padding-bottom: 40px !important;
    display: flex;
    align-items: center;
  }
  .hero .container { width: 100%; }
}

/* ============================================================
   IECC credit badge (footer — Powered by IECC)
   ============================================================ */
.iecc-credit-row {
  display: flex;
  justify-content: center;
  padding: 18px 0 8px;
  margin-top: 10px;
}
.iecc-credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  direction: rtl;
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: #0d0d0d;
  border: 1px solid rgba(192, 211, 40, .55);
  border-radius: 50px;
  padding: 9px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: .25s;
}
.iecc-credit-en {
  direction: ltr;
  font-family: 'Poppins', 'Tajawal', system-ui, sans-serif;
}
.iecc-credit:hover {
  background: #C0D328;
  border-color: #C0D328;
  color: #0d0d0d;
  transform: translateY(-2px);
}
.iecc-credit strong {
  color: #C0D328;
  font-weight: 800;
  transition: .25s;
}
.iecc-credit:hover strong { color: #0d0d0d; }
.iecc-credit-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C0D328;
  box-shadow: 0 0 0 4px rgba(192, 211, 40, .25);
  flex-shrink: 0;
}
.iecc-credit:hover .iecc-credit-dot {
  background: #0d0d0d;
  box-shadow: 0 0 0 4px rgba(13, 13, 13, .30);
}

/* ============================================================
   Exit popup — mobile fixes (close X must always be visible,
   tall content must scroll inside the card not behind the screen).
   ============================================================ */
.exit-popup-backdrop {
  padding: 12px !important; /* tighter so popup gets more room */
  overscroll-behavior: contain;
}
.exit-popup {
  max-height: calc(100dvh - 24px);   /* dynamic vh handles mobile browser UI */
  max-height: calc(100vh - 24px);    /* fallback */
  overflow-y: auto;                  /* scroll inside the card */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.exit-popup::-webkit-scrollbar { width: 6px; }
.exit-popup::-webkit-scrollbar-thumb {
  background: rgba(180,137,56,.35);
  border-radius: 3px;
}
/* Keep the close X visible while the user scrolls inside the popup */
.exit-popup__close {
  position: sticky !important;
  top: 8px;
  margin-bottom: -36px;          /* don't push content down */
  z-index: 5;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(31,26,18,.18);
}
[dir="rtl"] .exit-popup__close { align-self: flex-start; margin-left: -8px; }
[dir="ltr"] .exit-popup__close { align-self: flex-end;   margin-right: -8px; }

/* Tighten the popup on small phones */
@media (max-width: 540px) {
  .exit-popup {
    padding: 26px 22px 22px !important;
    border-radius: 18px !important;
  }
  .exit-popup h2 {
    font-size: 1.45rem !important;
    margin-bottom: 8px !important;
  }
  .exit-popup p { font-size: .9rem !important; margin-bottom: 16px !important; }
  .exit-popup__badge {
    font-size: .72rem !important;
    padding: 5px 12px !important;
    margin-bottom: 12px !important;
  }
  .exit-popup__benefits {
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    font-size: .88rem;
  }
  .exit-popup__benefits li { line-height: 1.5; }
  .exit-popup form input,
  .exit-popup form button { font-size: .95rem !important; }
  .exit-popup__small { font-size: .72rem !important; }
}

/* ============================================================
   MOBILE — Darker hero veil for legibility.
   On phones the gold heading was getting washed out against the
   warm Riyadh-skyline photo. Push the dark overlay much higher.
   ============================================================ */
@media (max-width: 740px) {
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(8, 4, 2, 0.65) 0%,
        rgba(8, 4, 2, 0.78) 55%,
        rgba(8, 4, 2, 0.88) 100%) !important;
  }
  /* Tone the colored decorations back so they don't lift the average tone */
  .hero .hero__media--premium { opacity: 0.30 !important; }
  .hero .hero__sand           { opacity: 0.25 !important; }
  .hero .hero__props          { opacity: 0.35 !important; }
  /* Slight text-shadow on the headline so the gold reads cleanly */
  .hero__title {
    text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 0 32px rgba(0,0,0,.35);
  }
  .hero__lead {
    color: rgba(255,255,255,.95) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
  }
}

/* ============================================================
   Language switch — refined chip (instead of plain text)
   ============================================================ */
.nav-lang,
.primary-nav .nav-lang {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(180, 137, 56, 0.10);
  border: 1px solid rgba(180, 137, 56, 0.32);
  color: var(--gold-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}
.nav-lang:hover {
  background: linear-gradient(135deg, var(--gold) 0%, #8B6520 100%);
  border-color: var(--gold);
  color: #ffffff;
  transform: translateY(-1px);
}
.nav-lang__globe {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.nav-lang__code {
  font-family: 'Inter', 'Tajawal', system-ui, sans-serif;
  letter-spacing: 0.10em;
}

/* On dark hero/navy backgrounds keep good contrast */
.bg-navy .nav-lang,
.site-header[data-sticky].is-scrolled .nav-lang {
  background: rgba(255,255,255,.06);
  border-color: rgba(216,182,112,.40);
  color: #f0d28d;
}

/* ============================================================
   Image performance — reserve space so images don't cause CLS,
   and let the browser progressively render heavy ones.
   ============================================================ */
.post-card__img,
.post-card__img img {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f5efe0 0%, #ece1c4 100%);
}
.post-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .35s ease;
}
.service-card__image,
.service-card__image img {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #f5efe0 0%, #ece1c4 100%);
}
.service-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Banner images on internal pages */
.ph-hero__bg img {
  aspect-ratio: 1792 / 448;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Fade-in any IMG smoothly when finished decoding (avoids the "snap-in" jank) */
img[decoding="async"] {
  background-color: rgba(180,137,56,.04);
}

/* ============================================================
   When chat is open — keep the bot/WhatsApp/call icons visible
   (slightly nudged up so the panel doesn't cover them on mobile).
   ============================================================ */
body.chat-is-open .chat-fab,
body.chat-is-open .wa-fab,
body.chat-is-open .call-fab {
  z-index: 96 !important;          /* above the chat panel (z-index: 95) */
}
body.chat-is-open .chat-fab {
  bottom: 16px !important;
  right: 16px !important;
  width: 48px !important;
  height: 48px !important;
}
body.chat-is-open .chat-fab svg { width: 22px; height: 22px; }
body.chat-is-open .chat-fab__dot { display: none; }
body.chat-is-open .chat-fab::after { display: none; }  /* kill pulse ring when open */

@media (max-width: 540px) {
  body.chat-is-open .wa-fab,
  body.chat-is-open .call-fab {
    /* Move them above the chat panel on small phones */
    bottom: auto !important;
    top: 76px !important;
    width: 44px !important;
    height: 44px !important;
  }
  body.chat-is-open .call-fab { top: 130px !important; }
  body.chat-is-open .wa-fab svg,
  body.chat-is-open .call-fab svg { width: 20px; height: 20px; }
}

/* ===== premium.css ===== */


.bg-3d {
  position: relative;
  isolation: isolate;
}
.bg-3d::before,
.bg-3d::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: .35;
}
.bg-3d::before {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  top: -100px; right: -120px;
  animation: float3d 14s ease-in-out infinite;
}
.bg-3d::after {
  width: 350px; height: 350px;
  background: radial-gradient(circle, var(--burgundy) 0%, transparent 70%);
  bottom: -100px; left: -100px;
  animation: float3d 18s ease-in-out infinite reverse;
  opacity: .20;
}
@keyframes float3d {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(40px, -30px) rotate(15deg) scale(1.08); }
  66%      { transform: translate(-30px, 40px) rotate(-10deg) scale(.95); }
}

.glow-ring {
  position: relative;
}
.glow-ring::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--gold), transparent 60%, var(--gold));
  z-index: -1;
  opacity: 0;
  filter: blur(14px);
  transition: opacity .4s var(--ease);
  animation: rotateGlow 6s linear infinite;
}
.glow-ring:hover::after { opacity: .6; }
@keyframes rotateGlow { to { transform: rotate(360deg); } }

.floating-shapes {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.floating-shape {
  position: absolute;
  border-radius: 50%;
  opacity: .4;
}
.floating-shape--diamond {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--gold), var(--gold-3));
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: 0 0 30px rgba(180,137,56,.6);
  animation: floatShape 8s ease-in-out infinite;
}
.floating-shape--ring {
  width: 80px; height: 80px;
  border: 2px solid rgba(216,182,112,.4);
  background: transparent;
  animation: floatShape 12s ease-in-out infinite -2s;
}
.floating-shape--dot {
  width: 8px; height: 8px;
  background: var(--gold-3);
  box-shadow: 0 0 12px var(--gold-glow);
  animation: floatShape 10s ease-in-out infinite -4s;
}
@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(20px, -30px) rotate(90deg); }
  50%      { transform: translate(-15px, -50px) rotate(180deg); }
  75%      { transform: translate(-30px, -20px) rotate(270deg); }
}

.shadow-3d-soft {
  box-shadow:
    0 1px 2px rgba(31,26,18,.04),
    0 4px 8px rgba(31,26,18,.06),
    0 16px 32px rgba(31,26,18,.08),
    0 32px 64px rgba(31,26,18,.10);
}

.mesh-bg {
  position: relative;
  background:
    radial-gradient(at 20% 30%, rgba(180,137,56,.12), transparent 50%),
    radial-gradient(at 80% 70%, rgba(138,35,50,.08), transparent 50%),
    radial-gradient(at 50% 10%, rgba(216,182,112,.10), transparent 50%);
}

.reviews-section {
  background: linear-gradient(180deg, #fff 0%, var(--soft) 100%);
  position: relative; overflow: hidden;
}
.reviews-section .floating-shapes { z-index: 0; }
.reviews-section .container { position: relative; z-index: 1; }

.reviews-summary {
  text-align: center;
  margin-bottom: 40px;
  padding: 36px 32px;
  background: linear-gradient(135deg, #fff 0%, var(--soft) 100%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(31,26,18,.04), 0 4px 8px rgba(31,26,18,.06), 0 16px 32px rgba(31,26,18,.08), 0 32px 64px rgba(31,26,18,.10);
  max-width: 580px;
  margin-inline: auto;
  position: relative;
}
.reviews-summary::before {
  content: "";
  position: absolute; top: 0; right: 24px; left: 24px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 3px;
}
.reviews-summary__rating {
  font-family: "Tajawal", sans-serif;
  font-size: 4.2rem; font-weight: 900;
  line-height: 1; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reviews-summary__stars {
  font-size: 1.7rem;
  letter-spacing: .15em;
  color: var(--gold);
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(180,137,56,.30);
}
.reviews-summary__count {
  font-size: .95rem; color: var(--muted);
}
.reviews-summary__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(66,133,244,.10), rgba(234,67,53,.05));
  border: 1px solid rgba(66,133,244,.25);
  color: var(--ink);
  padding: 8px 16px; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  margin-top: 16px;
}
.reviews-summary__google {
  background: linear-gradient(90deg, #4285F4 0% 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75% 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display: flex; flex-direction: column; gap: 14px;
}
.review-card:hover {
  transform: translateY(-6px) perspective(1000px) rotateX(2deg);
  box-shadow: var(--shadow-lg);
  border-color: rgba(180,137,56,.30);
}
.review-card::before {
  content: "“";
  position: absolute;
  top: 14px; right: 22px;
  font-size: 4.5rem; line-height: 1;
  color: var(--gold);
  opacity: .18;
  font-family: serif;
}
.review-card__header {
  display: flex; gap: 14px; align-items: center;
}
.review-card__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(180,137,56,.35);
  flex-shrink: 0;
}
.review-card__author { font-weight: 800; color: var(--ink); font-size: 1rem; }
.review-card__date { font-size: .78rem; color: var(--muted); direction: ltr; }
.review-card__stars {
  font-size: 1.05rem;
  letter-spacing: .1em;
  color: var(--gold);
}
.review-card__text {
  color: var(--ink-2);
  line-height: 1.85;
  font-size: .96rem;
  margin: 0;
}
.review-card__source {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .76rem; color: var(--muted);
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.review-card__google {
  background: linear-gradient(90deg, #4285F4 0% 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75% 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.reviews-cta {
  display: flex; flex-wrap: wrap;
  gap: 14px; justify-content: center;
  margin-top: 40px;
}

.hero { perspective: 1200px; }
.hero__copy { transform-style: preserve-3d; }

.service-card {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.service-card:hover {
  transform: translateY(-8px) perspective(1000px) rotateY(-1.5deg) rotateX(1deg) scale(1.01);
}
.service-card__icon-float {
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.service-card:hover .service-card__icon-float {
  transform: translateZ(20px) scale(1.1) rotate(-6deg);
}

.why-card {
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.why-card:hover {
  transform: translateY(-6px) perspective(1000px) rotateX(2deg);
}
.why-card__icon {
  transition: transform .4s var(--ease);
}
.why-card:hover .why-card__icon {
  transform: scale(1.1) rotate(8deg);
}

.cert--badge {
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.cert--badge:hover {
  transform: translateY(-2px) scale(1.05);
}

.post-card {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.post-card:hover {
  transform: translateY(-6px) perspective(900px) rotateY(-1deg);
}

.btn--primary.btn--lg {
  position: relative;
}
.btn--primary.btn--lg::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  animation: btnPulse 2.5s ease-out infinite;
}
@keyframes btnPulse {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.12); opacity: 0; }
}

.hero__stats strong, .stat strong, .stats-list strong {
  background: linear-gradient(120deg, var(--gold-3) 0%, var(--gold) 30%, var(--gold-3) 60%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.marquee__track img {
  transition: filter .35s var(--ease), transform .35s var(--ease);
}
.marquee__track img:hover {
  filter: grayscale(0) opacity(1) drop-shadow(0 6px 20px rgba(180,137,56,.30));
  transform: scale(1.1);
}

.section__head h2 {
  position: relative;
  display: inline-block;
}
.section__head--center h2::after {
  content: "";
  position: absolute;
  bottom: -10px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--burgundy));
  border-radius: 3px;
  opacity: 0;
  transition: width .5s var(--ease), opacity .3s var(--ease);
}
.section.in-view .section__head--center h2::after { opacity: 1; width: 80px; }

.scroll-progress span {
  background: linear-gradient(90deg, var(--gold), var(--burgundy), var(--gold));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  box-shadow: 0 0 12px var(--gold);
}

.testimonial {
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.testimonial:hover {
  transform: translateY(-6px) perspective(1000px) rotateY(-1.5deg);
}

.cta-band::before { animation: float3d 16s ease-in-out infinite; }
.cta-band::after  { animation: float3d 22s ease-in-out infinite reverse; }

.section__head h2,
.page-hero h1,
.trio__card h2 {
  background: linear-gradient(95deg, var(--gold) 0%, var(--gold-2) 35%, var(--burgundy) 75%, var(--burgundy-2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% auto;
  display: inline-block;
  letter-spacing: -.015em;
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .section__head h2 { animation: gradientDrift 8s ease-in-out infinite; }
}
@keyframes gradientDrift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.section__head h2::before,
.page-hero h1::before {
  content: "";
  display: block;
  width: 56px; height: 3px;
  margin: 0 0 18px;
  background: linear-gradient(90deg, var(--gold), var(--burgundy));
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(180,137,56,.40);
}
.section__head--center h2::before {
  margin-left: auto; margin-right: auto;
}

.bg-navy .section__head h2,
.cta-band h2 {
  background: linear-gradient(95deg, var(--gold-3) 0%, var(--gold) 40%, #E89DB0 80%, #F5B7C4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% auto;
}

.hero__title {
  background: linear-gradient(95deg, #FFF 0%, var(--gold-3) 50%, #E89DB0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 4px 30px rgba(180,137,56,.25);
}
.hero__title .accent {
  background: linear-gradient(95deg, #E89DB0 0%, var(--burgundy) 60%, var(--burgundy-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================== PREMIUM 3D CARDS ============================== */
.services-grid,
.why-grid,
.post-grid,
.testimonials {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.service-card,
.why-card,
.post-card,
.testimonial {
  --rx: 0deg;
  --ry: 0deg;
  --tz: 0px;
  --mx: 50%;
  --my: 50%;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s cubic-bezier(.22,.61,.36,1),
    border-color .35s ease;
  will-change: transform;
  position: relative;
  isolation: isolate;
}

.service-card::after,
.why-card::after,
.post-card::after,
.testimonial::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(216,182,112,0) 0%,
    rgba(216,182,112,.65) 25%,
    rgba(138,35,50,.55) 55%,
    rgba(216,182,112,0) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 4;
}

.service-card .__shine,
.why-card .__shine,
.post-card .__shine,
.testimonial .__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(255,255,255,.18),
    rgba(255,255,255,.05) 25%,
    transparent 50%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 3;
}

.service-card:hover,
.why-card:hover,
.post-card:hover {
  --tz: 20px;
  box-shadow:
    0 30px 60px -20px rgba(15,17,10,.30),
    0 18px 40px -12px rgba(180,137,56,.28),
    0 0 0 1px rgba(216,182,112,.18);
  border-color: rgba(216,182,112,.40);
}

.testimonial:hover {
  --tz: 20px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.55),
    0 18px 40px -12px rgba(216,182,112,.25),
    0 0 0 1px rgba(216,182,112,.45);
  border-color: rgba(216,182,112,.55);
}

.service-card:hover::after,
.why-card:hover::after,
.post-card:hover::after,
.testimonial:hover::after {
  opacity: 1;
}

.service-card:hover .__shine,
.why-card:hover .__shine,
.post-card:hover .__shine,
.testimonial:hover .__shine {
  opacity: 1;
}

.service-card__image,
.post-card__img {
  transform: translateZ(40px);
}
.service-card__icon-float,
.why-card__icon {
  transform: translateZ(60px);
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.service-card:hover .service-card__icon-float {
  transform: translateZ(80px) scale(1.08) rotate(-4deg);
}
.service-card__body,
.post-card__body,
.why-card h3,
.why-card p,
.testimonial blockquote,
.testimonial figcaption {
  transform: translateZ(30px);
}

@media (hover: none), (pointer: coarse) {
  .service-card,
  .why-card,
  .post-card,
  .testimonial {
    transform: none !important;
  }
  .service-card .__shine,
  .why-card .__shine,
  .post-card .__shine,
  .testimonial .__shine { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .why-card,
  .post-card,
  .testimonial {
    transform: none !important;
    transition: box-shadow .25s ease !important;
  }
  .service-card .__shine,
  .why-card .__shine,
  .post-card .__shine,
  .testimonial .__shine { display: none; }
}

/* ===== responsive.css ===== */


html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.hero, .section, .partners, .cta-band, .page-hero,
.reviews-section, footer.site-footer {
  overflow-x: clip;
}
img, video, iframe { max-width: 100%; }

.floating-shape, .hero__blob, .bg-3d::before, .bg-3d::after {
  max-width: 90vw;
}

@media (max-width: 740px) {
  .post-carousel {
    display: flex !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px 16px 26px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .post-carousel::-webkit-scrollbar { display: none; }
  .post-carousel .post-card {
    flex: 0 0 85%;
    max-width: 340px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .post-carousel .post-card:first-child { margin-inline-start: 6px; }
  .post-carousel .post-card:last-child  { margin-inline-end:   6px; }

  
  .post-carousel.stagger > * {
    transform: none !important;
    opacity: 1 !important;
  }

  
  .post-carousel::after {
    content: "";
    flex: 0 0 8px;
  }
}

@media (max-width: 740px) {
  .post-carousel + .carousel-hint { display: block; }
}
.carousel-hint { display: none; }

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15,17,10,.55);
  backdrop-filter: blur(6px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 50%, var(--dark) 100%);
  color: #d8c9a8;
  z-index: 200;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.32,.72,.32,1.05);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 0;
  box-shadow: -8px 0 40px rgba(0,0,0,.45);
}
[dir="ltr"] .mobile-drawer {
  right: auto; left: 0;
  transform: translateX(-100%);
  box-shadow: 8px 0 40px rgba(0,0,0,.45);
}
.mobile-drawer.is-open {
  transform: translateX(0);
}
.mobile-drawer::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(400px 300px at 50% 0%, rgba(180,137,56,.18), transparent 60%),
    radial-gradient(400px 300px at 50% 100%, rgba(138,35,50,.12), transparent 60%);
  pointer-events: none;
}
.mobile-drawer > * { position: relative; z-index: 1; }

.mobile-drawer::-webkit-scrollbar { width: 6px; }
.mobile-drawer::-webkit-scrollbar-thumb { background: rgba(216,182,112,.30); border-radius: 6px; }

.mobile-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(216,182,112,.18);
}
.mobile-drawer__brand {
  display: flex; gap: 12px; align-items: center;
  color: #fff;
  flex: 1; min-width: 0;
}
.mobile-drawer__brand img {
  width: 52px; height: 52px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 6px 16px rgba(180,137,56,.30);
  flex-shrink: 0;
}
.mobile-drawer__brand strong {
  display: block; color: #fff;
  font-weight: 900; font-size: 1.05rem;
  line-height: 1.2; letter-spacing: -.01em;
}
.mobile-drawer__brand em {
  display: block; color: var(--gold-3);
  font-style: normal; font-size: .76rem;
  font-weight: 500; margin-top: 2px;
}
.mobile-drawer__close {
  background: rgba(216,182,112,.10);
  border: 1px solid rgba(216,182,112,.25);
  color: var(--gold-3);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.mobile-drawer__close:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  transform: rotate(90deg);
}

.mobile-drawer__nav {
  padding: 18px 16px 8px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.mobile-drawer__nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  color: #d8c9a8;
  border-radius: 12px;
  font-size: 1rem; font-weight: 600;
  transition: all .25s var(--ease);
  position: relative;
}
.mobile-drawer__nav a .dot {
  width: 6px; height: 6px;
  background: rgba(216,182,112,.40);
  border-radius: 50%;
  transition: all .25s var(--ease);
  flex-shrink: 0;
}
.mobile-drawer__nav a:hover {
  background: rgba(216,182,112,.10);
  color: #fff;
  padding-inline-start: 20px;
}
.mobile-drawer__nav a:hover .dot {
  background: var(--gold-3);
  box-shadow: 0 0 12px var(--gold-glow);
}
.mobile-drawer__nav a.is-active {
  background: linear-gradient(135deg, rgba(180,137,56,.25), rgba(180,137,56,.10));
  color: #fff;
  box-shadow: 0 4px 14px rgba(180,137,56,.25);
}
.mobile-drawer__nav a.is-active .dot {
  background: var(--gold-3);
  box-shadow: 0 0 14px var(--gold-glow);
  width: 8px; height: 8px;
}

.mobile-drawer__cta {
  padding: 18px 22px;
  display: grid; gap: 10px;
  border-top: 1px solid rgba(216,182,112,.18);
  margin-top: auto;
}
.mobile-drawer__cta .btn { width: 100%; padding: 14px; justify-content: center; }

.mobile-drawer__contact {
  padding: 14px 22px;
  display: grid; gap: 10px;
  border-top: 1px solid rgba(216,182,112,.10);
}
.mobile-drawer__contact a {
  display: inline-flex; gap: 10px; align-items: center;
  color: #d8c9a8; font-size: .92rem;
  padding: 8px 0;
  transition: color .2s var(--ease);
}
.mobile-drawer__contact a:hover { color: var(--gold-3); }
.mobile-drawer__contact a svg { color: var(--gold-3); }

.mobile-drawer__certs {
  padding: 14px 22px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border-top: 1px solid rgba(216,182,112,.10);
}
.mobile-drawer__certs .cert {
  color: #d8c9a8; font-size: .78rem;
}
.mobile-drawer__certs .cert--badge {
  background: rgba(180,137,56,.16);
  border: 1px solid rgba(216,182,112,.25);
  color: var(--gold-3);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
}

.mobile-drawer__bottom {
  padding: 14px 22px 22px;
  border-top: 1px solid rgba(216,182,112,.10);
  display: flex; justify-content: center;
}
.mobile-drawer__bottom .lang-switch {
  margin: 0; padding: 8px 22px;
  font-size: .88rem;
}

@media (max-width: 980px) {
  .primary-nav { display: none !important; }
  .nav-toggle  { display: inline-flex !important; flex-direction: column; }

  
  .navbar__row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px !important;
    gap: 12px;
  }

  
  .brand        { flex-shrink: 0; }
  .brand__logo  { height: 48px !important; width: auto; }
  .brand__text  { display: none; }     

  
  .nav-toggle {
    flex-shrink: 0;
    width: 44px; height: 44px;
    padding: 0 !important;
    background: #fff !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(31,26,18,.05) !important;
    justify-content: center !important;
    align-items: center !important;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  }
  .nav-toggle:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 4px 10px rgba(180,137,56,.15) !important;
  }
  .nav-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--gold), var(--burgundy)) !important;
    margin: 3px 0 !important;
    border-radius: 2px;
  }

  
  .topbar__contact { display: none; }
  .topbar__certs   { justify-content: center; flex: 1; gap: 6px; }
  .topbar__certs .cert:not(.cert--badge) { display: none; }
  .topbar__row { padding: 8px 16px; gap: 6px; }
  .topbar__certs .cert--badge { font-size: .68rem; padding: 3px 9px; }
  .lang-switch, .theme-switch { padding: 4px 10px; font-size: .72rem; }

  body.no-scroll { overflow: hidden; }
}

@media (min-width: 981px) {
  .nav-toggle { display: none !important; }
  .mobile-drawer, .drawer-overlay { display: none !important; }
}

@media (max-width: 980px) {
  .hero {
    min-height: auto !important;
    padding: 70px 0 80px !important;
  }
  .hero__copy { padding: 0 16px; }
  .hero__title { font-size: clamp(1.9rem, 6vw, 2.8rem) !important; }
  .hero__lead { font-size: 1rem !important; }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { flex: 1; min-width: 140px; }
  .hero__stats { gap: 18px !important; padding-top: 22px !important; }
  .hero__stats li:not(:last-child)::after { display: none; }
  .hero__stats strong { font-size: 1.5rem !important; }
  .hero__dots { bottom: 16px; }
  .hero__dot { width: 22px; }
  .hero__dot.is-active { width: 36px; }
}

@media (max-width: 540px) {
  .hero__ctas .btn { width: 100%; }
  .hero__stats { justify-content: space-between; width: 100%; gap: 12px; }
  .hero__stats li { flex: 1; min-width: 0; align-items: center; text-align: center; }
  .hero__stats span { font-size: .78rem; }
}

@media (max-width: 980px) {
  .section { padding: 60px 0; }
  .section__head { margin-bottom: 32px; }
  .section__head h2::before { width: 40px; height: 2px; margin-bottom: 12px; }
  .container { padding: 0 16px; }
}
@media (max-width: 540px) {
  .section { padding: 48px 0; }
  .page-hero { padding: 40px 0 28px; }
}

@media (max-width: 1100px) {
  .services-grid,
  .why-grid,
  .post-grid,
  .reviews-grid,
  .testimonials,
  .stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
@media (max-width: 740px) {
  .services-grid,
  .why-grid,
  .post-grid,
  .reviews-grid,
  .testimonials {
    grid-template-columns: 1fr;
  }
  .trio { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .two-col, .contact-grid, .request-layout, .article__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .trust-panel { position: static; }
  .toc { position: static; max-height: none; }
}

@media (max-width: 540px) {
  .service-card__body { padding: 18px 20px 22px; }
  .why-card, .post-card__body, .trio__card { padding: 22px 18px; }
  .testimonial, .review-card { padding: 22px 18px; }
  .info-card { padding: 22px; }
  .hero__card { padding: 22px; }
}

@media (max-width: 740px) {
  .field input, .field select, .field textarea {
    padding: 14px 16px;
    font-size: 16px; 
  }
  .multistep { padding: 22px 18px !important; }
  .multistep__bar { gap: 4px !important; }
  .multistep__bar li {
    padding: 10px 8px !important;
    font-size: .8rem !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: center !important;
  }
  .multistep__bar li span { font-size: .72rem; text-align: center; }
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .site-footer { padding: 50px 0 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 980px) {
  .article__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .toc { position: static; max-height: none; padding: 16px 18px; font-size: .88rem; }
  .toc h2 { font-size: .82rem; }
  .article__body { padding-top: 24px; }
  .prose { font-size: 1rem; line-height: 1.85; }
  .prose h2 { font-size: 1.3rem; margin: 26px 0 12px; }
  .prose h3 { font-size: 1.08rem; margin: 20px 0 10px; }
  .prose h4 { font-size: 1rem; }
}

@media (max-width: 740px) {
  
  .article__grid > .toc { display: none; }

  
  .article h1, .article h2, .article h3,
  .prose h2, .prose h3, .prose h4,
  .page-hero h1,
  .post-card h2 a, .post-card h3 a {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .prose p, .prose li { overflow-wrap: anywhere; }

  
  .prose img, .prose video, .prose iframe { max-width: 100%; height: auto; border-radius: 10px; }
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .88rem;
  }
  .prose pre {
    overflow-x: auto;
    font-size: .82rem;
  }

  
  .article__body .container { padding: 0 14px; }
  .prose__cover { margin-inline: -14px; border-radius: 0; }
  .prose__cover img { border-radius: 0; aspect-ratio: 16/10; }

  
  .article__meta { flex-wrap: wrap; gap: 10px; }
  .breadcrumbs ol { font-size: .8rem; }
  .breadcrumbs li + li::before { padding: 0 4px; }

  
  .share { gap: 8px; }
  .share a { padding: 6px 12px; font-size: .82rem; }

  
  .author-box { flex-direction: column; gap: 14px; text-align: center; padding: 22px 18px; }
  .author-box .avatar { margin: 0 auto; }
}

@media (max-width: 740px) {
  .cta-band__row { flex-direction: column; align-items: stretch; text-align: center; gap: 22px; }
  .cta-band__row .btn { align-self: center; }
}

@media (max-width: 740px) {
  .wa-fab, .chat-fab {
    width: 52px; height: 52px;
    bottom: 16px;
  }
  .wa-fab { left: 16px; }
  .chat-fab { right: 16px; }
  .to-top { bottom: 78px; left: 16px; width: 38px; height: 38px; }
  .chat-panel {
    bottom: 80px; right: 12px; left: 12px;
    width: auto; max-width: none;
    height: calc(100vh - 100px);
    max-height: 580px;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  :root {
    --container: 100%;
  }
  .container { max-width: 1024px; padding: 0 24px; }

  
  .nav-link { padding: 12px 18px; font-size: 1rem; }
  .btn { padding: 13px 24px; }

  
  .primary-nav { gap: 18px; }
  .primary-nav ul { gap: 0; }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  :root { --container: 1180px; }
  .hero__title { font-size: clamp(2.4rem, 4vw, 3.2rem); }
}

@media (min-width: 1441px) {
  :root { --container: 1320px; }
}

.exit-popup-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,17,10,.75);
  backdrop-filter: blur(10px);
  z-index: 250;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .3s var(--ease);
}
.exit-popup-backdrop.is-open { display: flex; }
.exit-popup {
  background: linear-gradient(180deg, #fff 0%, #faf7f0 100%);
  border-radius: 24px;
  max-width: 520px; width: 100%;
  padding: 40px 36px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
  animation: popupSlideUp .4s var(--ease-out);
}
.exit-popup::before {
  content: "";
  position: absolute;
  top: 0; right: 30px; left: 30px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--burgundy));
  border-radius: 4px;
}
@keyframes popupSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.exit-popup__close {
  position: absolute; top: 14px;
  background: var(--soft); border: 0;
  width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all .25s var(--ease);
}
[dir="rtl"] .exit-popup__close { left: 14px; }
[dir="ltr"] .exit-popup__close { right: 14px; }
.exit-popup__close:hover { background: var(--burgundy); color: #fff; transform: rotate(90deg); }
.exit-popup__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(180,137,56,.15), rgba(138,35,50,.10));
  color: var(--gold-2);
  padding: 8px 16px; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  margin-bottom: 18px;
  border: 1px solid rgba(180,137,56,.25);
}
.exit-popup h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 900;
  margin-bottom: 12px;
  background: linear-gradient(95deg, var(--gold), var(--burgundy));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.015em;
}
.exit-popup p { color: var(--muted); margin-bottom: 22px; font-size: .96rem; }
.exit-popup__benefits {
  display: grid; gap: 8px;
  margin: 0 0 22px;
  padding: 14px 18px;
  background: rgba(180,137,56,.08);
  border-radius: 12px;
  border: 1px solid rgba(180,137,56,.20);
}
.exit-popup__benefits li {
  list-style: none;
  display: flex; gap: 10px; align-items: center;
  color: var(--ink); font-size: .92rem;
}
.exit-popup__benefits li::before {
  content: "✓"; display: inline-flex;
  width: 22px; height: 22px;
  background: var(--gold); color: #fff;
  border-radius: 50%; align-items: center; justify-content: center;
  font-weight: 800; font-size: .8rem;
  flex-shrink: 0;
}
.exit-popup form { display: grid; gap: 12px; }
.exit-popup input {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px; font: inherit;
}
.exit-popup input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(180,137,56,.14); }
.exit-popup .btn { justify-content: center; padding: 13px; }
.exit-popup__small {
  text-align: center; font-size: .8rem;
  color: var(--muted); margin-top: 12px;
}

@media (max-width: 540px) {
  .exit-popup { padding: 28px 22px; }
  .exit-popup h2 { font-size: 1.4rem; }
}

/* ===== ph-hero.css ===== */
/* ========== Premium page hero (ph-hero) — used by about/services/contact ========== */
.ph-hero {
  position: relative;
  width: 100%;
  background: #1a0009;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(180, 137, 56, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 26vw, 440px);
}
.ph-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.ph-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Preserve the calligraphy logo on the LEFT side of every banner */
  object-position: 15% center;
  display: block;
}
.ph-hero__veil {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(26,0,9,.18) 0%, rgba(26,0,9,.55) 55%, rgba(26,0,9,.78) 100%),
    linear-gradient(180deg, rgba(26,0,9,.05) 0%, rgba(26,0,9,.45) 100%);
}
.ph-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: #fff;
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Breadcrumbs (centered, gold) */
.ph-hero__crumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; padding: 0; margin: 0 0 18px;
  font-size: .88rem;
  color: rgba(255,255,255,.85);
  justify-content: center;
}
.ph-hero__crumbs a { color: #e6c98a; text-decoration: none; transition: color .2s; }
.ph-hero__crumbs a:hover { color: #f6dca0; text-decoration: underline; }
.ph-hero__crumbs li + li::before {
  content: /; padding: 0 8px; color: rgba(230,201,138,.5);
}
.ph-hero__crumbs [aria-current=page] { color: #fff; }

/* Eyebrow pill */
.ph-hero__eyebrow {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e6c98a;
  padding: 6px 16px;
  border: 1px solid rgba(230,201,138,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  margin-bottom: 18px;
}

/* Big gold title — premium */
.ph-hero__title {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.6vw, 50px);
  font-weight: 800;
  line-height: 1.2;
  background: linear-gradient(180deg, #f6dca0 0%, #e6c98a 35%, #b48938 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e6c98a; /* fallback */
  text-shadow: 0 2px 22px rgba(0,0,0,.55);
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.6));
  max-width: 920px;
  letter-spacing: .2px;
}

/* Gold underline rule */
.ph-hero__rule {
  display: block;
  width: 96px; height: 3px;
  background: linear-gradient(90deg, transparent 0%, #b48938 20%, #e6c98a 50%, #b48938 80%, transparent 100%);
  border-radius: 3px;
  margin: 0 auto 18px;
  box-shadow: 0 0 22px rgba(230,201,138,.5);
}

/* Lead paragraph */
.ph-hero__lead {
  margin: 0 auto;
  max-width: 700px;
  color: rgba(255,255,255,.94);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.75;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .ph-hero { min-height: 320px; }
  .ph-hero__bg img { object-position: 22% center; }
  .ph-hero__inner { padding-top: 44px; padding-bottom: 44px; }
}

/* ===== Mobile: OVERLAY layout where banner = BACKGROUND, text sits ON TOP =====
   Image shows at its natural 4:1 aspect anchored to TOP of a TALLER container.
   The bottom portion of the container extends with a dark gradient that visually
   merges with the banner. Text is positioned ABSOLUTELY over the whole hero — it
   sits over the dark extension area (which IS part of the banner panel) and the
   image stays uncropped. */
@media (max-width: 640px) {
  .ph-hero {
    display: block !important;
    align-items: initial;
    justify-content: initial;
    position: relative;
    /* Tall enough to fit: banner image at top (~95px) + text overlay (~165px) */
    min-height: 200px !important;
    background: linear-gradient(180deg, #2a0e15 0%, #1a0009 100%);
    overflow: hidden;
    /* Pull the banner up UNDER the fixed header to eliminate the white
       body-bg strip. The header (white, position:fixed) sits on top.
       The visible part of the banner (below the header) is 200px tall. */
    margin-top: calc(-1 * var(--header-h-mobile, 108px)) !important;
    padding-top: var(--header-h-mobile, 108px) !important;
    min-height: calc(200px + var(--header-h-mobile, 108px)) !important;
  }
  /* Banner image fills the ENTIRE hero (top to bottom). The image's full
     height is preserved (no top/bottom crop); horizontal sides may crop
     because container aspect ≠ source aspect, but the wave/calligraphy/
     skyline content stays visually balanced. */
  .ph-hero__bg {
    position: absolute !important;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    overflow: hidden;
    display: block;
    background: #1a0009;
    z-index: 0;
  }
  .ph-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* fills full card, may crop sides */
    object-position: center center;
    display: block;
  }
  /* Veil fades the banner image into the dark text area for a smooth blend */
  .ph-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg,
        rgba(26, 0, 9, 0.15) 0%,
        rgba(26, 0, 9, 0.25) 25%,
        rgba(26, 0, 9, 0.55) 45%,
        rgba(26, 0, 9, 0.78) 65%,
        rgba(26, 0, 9, 0.90) 100%);
  }
  /* Text OVERLAY — fills the hero and centers content VERTICALLY.
     No borders, no card edges — clean, integrated with the banner. */
  .ph-hero__inner {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    inset: 0;
    z-index: 2;
    padding: 18px 18px;
    text-align: center;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    /* Vertical centering inside the hero */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Kill all decorative pseudo elements (gold stripes, inset frames) */
  .ph-hero__inner::before,
  .ph-hero__inner::after { display: none !important; }

  /* Hide breadcrumbs + eyebrow pill on mobile section heroes
     (per user request — keep only title + rule + lead in the card) */
  .ph-hero .ph-hero__crumbs,
  .ph-hero .ph-hero__eyebrow {
    display: none !important;
  }

  .ph-hero__title {
    font-size: clamp(19px, 5.4vw, 26px);
    line-height: 1.3;
    margin: 0 auto 10px;
    max-width: 100%;
    font-weight: 800;
    background: linear-gradient(180deg, #f6dca0 0%, #e6c98a 45%, #c79740 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #e6c98a; /* fallback */
    text-shadow: none;
    filter: none;
    letter-spacing: 0.1px;
  }

  .ph-hero__rule {
    width: 60px;
    height: 2px;
    margin: 0 auto 12px;
    background: linear-gradient(90deg, transparent 0%, #b48938 25%, #e6c98a 50%, #b48938 75%, transparent 100%);
    box-shadow: 0 0 12px rgba(230, 201, 138, 0.4);
  }

  .ph-hero__lead {
    font-size: 13px;
    line-height: 1.7;
    max-width: 100%;
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: none;
    /* On very short heroes we cap the lead to a couple of lines to avoid overflow */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ===== Very small phones ===== */
@media (max-width: 380px) {
  .ph-hero__inner { padding: 16px 14px 22px; }
  .ph-hero__title { font-size: 17px; line-height: 1.25; margin-bottom: 6px; }
  .ph-hero__rule { margin-bottom: 6px; }
  .ph-hero__lead  { font-size: 12px; line-height: 1.55; -webkit-line-clamp: 3; }
  .ph-hero__eyebrow { font-size: .6rem; padding: 3px 9px; margin-bottom: 6px; }
  .ph-hero__crumbs ol { margin-bottom: 6px; font-size: .7rem; }
}

/* Landscape phones — image takes most of the screen since it's 4:1 */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .ph-hero__bg { aspect-ratio: 1792 / 448; }
  .ph-hero__inner { padding: 12px 18px; }
}



/* ============================================================
   Mobile + Tablet: eliminate any white seam between fixed header
   and hero/banner. background-attachment:fixed is unreliable on
   mobile Safari/Chrome, so we use the most bulletproof method:
   pull the hero/banner UP by the header reserved height, then
   compensate with equal padding-top so the visible content still
   sits below the header.
   ============================================================ */
@media (max-width: 1024px) {
  .hero,
  .ph-hero {
    margin-top: calc(-1 * var(--header-h-mobile, 108px));
    padding-top: calc(var(--header-h-mobile, 108px) + 8px) !important;
  }
}

/* ============================================================
   Mobile + Tablet: disable scroll-reveal animations.
   The IntersectionObserver-based reveal made content invisible
   until scrolled — confusing on phones. Show everything from
   the first paint instead.
   ============================================================ */
@media (max-width: 980px) {
  .js [data-anim],
  .js [data-anim]:not(.in-view),
  .js [data-anim].in-view,
  .js .reveal, .js .reveal-right, .js .reveal-left,
  .js .reveal-scale, .js .reveal-fade,
  .js .stagger,
  .js .stagger > *,
  .js .stagger.is-revealed > *:nth-child(n),
  .js .section, .js .section.in-view,
  .js .partners, .js .partners.in-view,
  .js .cta-band, .js .cta-band.in-view,
  .js .page-hero, .js .page-hero.in-view,
  .js .article__body, .js .article__body.in-view {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  /* Keep ONLY the dropdown animation (it's a controlled UI animation) */
  .js .nav-more__list { animation: navMoreOpen 0.22s cubic-bezier(.22,.7,.25,1) !important; }
}

/* ============================================================
   Mobile: kill any white strip between fixed header and hero on
   non-ph-hero pages too (homepage and any other section). The
   approach above pulls the hero up, but if any tool overrides
   that, this is a safety net via body background.
   ============================================================ */
@media (max-width: 980px) {
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h-mobile, 108px);
    background: #1a0009;
    z-index: -1;
    pointer-events: none;
  }
}

/* ===== home-hero.css ===== */
/* ============================================================
   Homepage hero — real photo background + gold premium text
   Isolated file so main.css edits by other tools don't wipe it.
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Real photo as the hero background */
  background-color: #1a0009;
  background-image: url('/assets/img/banners/home-hero.jpg');
  background-image: -webkit-image-set(
    url('/assets/img/banners/home-hero.webp') type('image/webp') 1x
  );
  background-image: image-set(
    url('/assets/img/banners/home-hero.webp') type('image/webp') 1x
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Dark veil sits above the bg image but below the decorative + text layers
   so the existing orbs/sheen/buildings still float above it.
   Darker on the RIGHT side (where the Arabic copy sits). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(26, 0, 9, 0.18) 0%,
      rgba(26, 0, 9, 0.42) 40%,
      rgba(26, 0, 9, 0.68) 75%,
      rgba(26, 0, 9, 0.78) 100%),
    linear-gradient(180deg,
      rgba(26, 0, 9, 0.08) 0%,
      rgba(26, 0, 9, 0.32) 100%);
}
[dir="ltr"] .hero::before {
  background:
    linear-gradient(270deg,
      rgba(26, 0, 9, 0.18) 0%,
      rgba(26, 0, 9, 0.42) 40%,
      rgba(26, 0, 9, 0.68) 75%,
      rgba(26, 0, 9, 0.78) 100%),
    linear-gradient(180deg,
      rgba(26, 0, 9, 0.08) 0%,
      rgba(26, 0, 9, 0.32) 100%);
}

/* Make sure decorations (orbs, sheen, sand, SVG buildings, corner icons)
   stay visible ABOVE the veil. They are originally inset:0 absolute,
   we just lift them to z-index 1 explicitly. */
.hero .hero__media--premium,
.hero .hero__sand,
.hero .hero__props {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The premium media layer holds orbs/sheen. Slightly reduce its opacity so
   the photo behind reads through, but keep the floating motion. */
.hero .hero__media--premium {
  opacity: 0.55;
  mix-blend-mode: screen;
}
/* Sand and skyline SVGs sit at the bottom — tone them down too */
.hero .hero__sand   { opacity: 0.45; mix-blend-mode: screen; }
.hero .hero__props  { opacity: 0.55; }

/* Text grid on top of everything */
.hero .container,
.hero .hero__grid {
  position: relative;
  z-index: 2;
}

/* ===== Gold premium text — same family as the section page heroes ===== */

/* Eyebrow → gold pill matching .ph-hero__eyebrow */
.hero .hero__copy > .eyebrow,
.hero .hero__copy .eyebrow {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e6c98a;
  padding: 6px 16px;
  border: 1px solid rgba(230, 201, 138, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  margin-bottom: 18px;
}

/* Title → gold gradient matching .ph-hero__title.
   IMPORTANT: only ONE shadow source — combining text-shadow with filter:drop-shadow
   on the same element (and again on the .accent child) makes the text look
   doubled/uneven because filters stack on the child's rendered output. */
.hero .hero__title {
  background: linear-gradient(180deg, #f6dca0 0%, #e6c98a 35%, #b48938 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e6c98a; /* fallback */
  /* Single soft shadow via drop-shadow so it works with background-clip: text */
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
  text-shadow: none;
  line-height: 1.25;
}

/* Accent span inside the title — brighter / lighter gold, NO extra filter */
.hero .hero__title .accent {
  background: linear-gradient(180deg, #ffe9b0 0%, #f6dca0 50%, #d6a755 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffe9b0; /* fallback */
  filter: none;
  text-shadow: none;
}

/* Lead → white with shadow matching .ph-hero__lead.
   main.css gives .hero__lead a max-width:580px but no horizontal margins,
   so the block sits at the natural inline-start (right side in RTL) under
   the centered title. Force centering of both the block AND the text. */
.hero .hero__lead {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Same fix for the eyebrow (in case main.css positions it off-center) */
.hero .hero__copy .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

/* And for the CTAs row */
.hero .hero__ctas {
  justify-content: center;
}

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .hero {
    background-position: 70% center;
  }
}

/* ===== Mobile ===== */
@media (max-width: 720px) {
  .hero {
    background-image: url('/assets/img/banners/home-hero.jpg');
    background-image: -webkit-image-set(
      url('/assets/img/banners/home-hero-m.webp') type('image/webp') 1x
    );
    background-image: image-set(
      url('/assets/img/banners/home-hero-m.webp') type('image/webp') 1x
    );
    background-position: 72% center;
    /* main.css sets min-height: 78vh which on a 700px phone = 546px — way too tall.
       Drop the min-height and tighten the padding so the hero is compact but the
       title + lead + CTAs still fit comfortably. */
    min-height: 0;
    padding: 40px 0 44px;
  }
  /* Vertical veil on phones (text stacks vertically and likely sits below) */
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(26, 0, 9, 0.18) 0%,
        rgba(26, 0, 9, 0.52) 45%,
        rgba(26, 0, 9, 0.78) 100%);
  }
  [dir="ltr"] .hero::before {
    background:
      linear-gradient(180deg,
        rgba(26, 0, 9, 0.18) 0%,
        rgba(26, 0, 9, 0.52) 45%,
        rgba(26, 0, 9, 0.78) 100%);
  }
  /* On mobile, let the decorative animations run at FULL intensity (their
     intrinsic SVG/keyframe opacities are already conservative — 0.32-0.62).
     Previously we multiplied them by 0.35 which dropped them to ~0.11-0.22
     (basically invisible). Override main.css's display:none on .hero__corner--tr
     so both corner accents show on mobile too. */
  .hero .hero__media--premium { opacity: 1; }
  .hero .hero__sand           { opacity: 0.85; }
  .hero .hero__props          { opacity: 1; }
  .hero .hero__corner--tr     { display: block; width: 44px; height: 44px; top: 11%; }
  .hero .hero__sky--right     { opacity: .55; }
}

@media (max-width: 480px) {
  .hero {
    background-position: 78% center;
    padding: 32px 0 36px;
  }
}

@media (max-width: 380px) {
  .hero { padding: 28px 0 32px; }
}

/* ===== ceo.css ===== */
/* ============================================================
   CEO page — preserve full portrait (logo + face + body)
   Isolated file so main.css edits by other tools don't wipe it.
   ============================================================ */

/* Match the frame aspect-ratio to the actual photo (1696x1926 ≈ 22/25)
   so nothing needs cropping at all. */
.ceo-portrait__photo {
  aspect-ratio: 1202 / 1309;
}

/* And switch from cover (which crops) to contain (which fits the whole image).
   The portrait has a white-ish background so contain blends seamlessly with
   the existing soft-white gradient inside .ceo-portrait__photo. */
.ceo-portrait__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #fff;
}

/* ============================================================
   Homepage "كلمة المدير التنفيذي" section — same fix
   Frame was aspect 4:5 with object-fit:cover → cropped sides.
   Match the photo's natural ratio and use contain.
   ============================================================ */
.ceo-home__frame img,
.ceo-home__placeholder {
  aspect-ratio: 1202 / 1309;
  object-fit: contain;
  object-position: center center;
  background: #fff;
}

/* ============================================================
   CEO experience hours badge — shown on /ceo portrait and
   on the homepage CEO message section.
   ============================================================ */
.ceo-portrait__exp,
.ceo-home__exp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(180, 137, 56, .12) 0%, rgba(216, 182, 112, .06) 100%);
  border: 1px solid rgba(216, 182, 112, .35);
  border-radius: 14px;
  text-align: center;
}
.ceo-portrait__exp-value,
.ceo-home__exp-value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #e6c98a 0%, #b48938 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #b48938;
  letter-spacing: .5px;
}
.ceo-portrait__exp-label,
.ceo-home__exp-label {
  font-size: .82rem;
  color: #6b6358;
  font-weight: 600;
  letter-spacing: .04em;
}

/* On homepage (dark navy bg), use light colors */
.ceo-home .ceo-home__exp {
  background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(216, 182, 112, .08) 100%);
  border-color: rgba(216, 182, 112, .35);
}
.ceo-home .ceo-home__exp-label {
  color: rgba(255, 255, 255, .85);
}

/* ====== Light "cream" variant for CEO home section ======
   Replaces the dark navy bg with a soft warm off-white.
   Applied via class: <section class="section ceo-home ceo-home--cream">
*/
.ceo-home.ceo-home--cream {
  background: linear-gradient(180deg, #FBF7EE 0%, #F4ECDB 100%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.ceo-home.ceo-home--cream::before {
  /* very subtle gold accent edge */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 80% 20%, rgba(180,137,56,.08) 0%, transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(138,35,50,.05) 0%, transparent 65%);
  pointer-events: none;
}
.ceo-home.ceo-home--cream > * { position: relative; z-index: 1; }
.ceo-home.ceo-home--cream h2 { color: var(--ink); }
.ceo-home.ceo-home--cream p { color: var(--ink); }
.ceo-home.ceo-home--cream .ceo-home__salutation { color: var(--gold-ink); font-weight: 700; }
.ceo-home.ceo-home--cream .eyebrow {
  background: rgba(180,137,56,.12);
  color: var(--gold-ink);
  border-color: rgba(180,137,56,.30);
}
.ceo-home.ceo-home--cream .ceo-home__badge {
  background: linear-gradient(135deg, #B48938 0%, #8B6520 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(180,137,56,.30);
}
.ceo-home.ceo-home--cream .ceo-home__badge strong,
.ceo-home.ceo-home--cream .ceo-home__badge span { color: #fff; }
.ceo-home.ceo-home--cream .ceo-home__exp {
  background: linear-gradient(135deg, #ffffff 0%, #FBF7EE 100%);
  border: 1px solid rgba(180,137,56,.30);
  box-shadow: 0 6px 18px rgba(31,26,18,.06);
}
.ceo-home.ceo-home--cream .ceo-home__exp-label { color: var(--muted); }
.ceo-home.ceo-home--cream .ceo-home__frame {
  background: #fff;
  box-shadow: 0 18px 50px rgba(31,26,18,.12);
}

/* ===== maps.css ===== */
/* ============================================================
   Google Maps styling — contact page big card + footer band
   Isolated file so other tools' edits to main.css don't wipe it.
   ============================================================ */

/* ===== Contact page premium map card ===== */
.section--map { padding-top: 60px; padding-bottom: 80px; }

.map-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #1a0009;
  box-shadow: 0 24px 60px rgba(31, 26, 18, 0.18), 0 1px 0 rgba(216, 182, 112, 0.18) inset;
  border: 1px solid rgba(216, 182, 112, 0.32);
  isolation: isolate;
}

.map-card__iframe {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: #1a0009;
}
.map-card__iframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(0.95);
  transition: filter 0.3s ease;
}
.map-card:hover .map-card__iframe iframe { filter: saturate(1); }

.map-card__overlay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 26px;
  background: linear-gradient(180deg, #1a0009 0%, #2a0e15 100%);
  border-top: 1px solid rgba(216, 182, 112, 0.25);
  color: #fff;
}

.map-card__info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.map-card__pin {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #b48938 0%, #e6c98a 100%);
  color: #1a0009;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(230, 201, 138, 0.4);
}
.map-card__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #e6c98a;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
}
.map-card__addr {
  display: block;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.map-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.map-card__actions .btn--sm {
  padding: 9px 16px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.map-card__actions .btn--ghost {
  color: #e6c98a;
  border: 1px solid rgba(216, 182, 112, 0.45);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.map-card__actions .btn--ghost:hover {
  background: rgba(216, 182, 112, 0.15);
  border-color: #e6c98a;
  color: #fff;
}

/* ===== CEO column on homepage — clean stack layout =====
   home.php wraps .ceo-home__photo and .ceo-home__exp in a
   .ceo-home__col flex column so the gold "المدير التنفيذي" badge
   (absolute, bottom:-22px of photo) doesn't collide with the dark
   "+61K ساعة خبرة" card that sits BELOW it. */
.ceo-home__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
.ceo-home__col .ceo-home__photo {
  width: 100%;
  max-width: 400px;
  position: relative;     /* keep badge positioning context */
  /* Reset any leftover padding from the old fix */
  padding-bottom: 0;
}
.ceo-home__col .ceo-home__exp {
  /* Sit clearly BELOW the badge that hangs -22px under the photo.
     Badge height ≈ 60px → top edge ≈ 38px below photo bottom.
     Add comfortable gap so the dark exp card never overlaps it. */
  margin-top: 60px;
  width: 100%;
  max-width: 300px;
  position: static;       /* override any prior absolute positioning */
  bottom: auto;
  left: auto;
  transform: none;
}

@media (max-width: 980px) {
  .ceo-home__col { max-width: 360px; margin: 0 auto; }
  .ceo-home__col .ceo-home__photo { max-width: 320px; }
  .ceo-home__col .ceo-home__exp { margin-top: 56px; }
}

@media (max-width: 640px) {
  .ceo-home__col .ceo-home__photo { max-width: 280px; }
  .ceo-home__col .ceo-home__exp {
    margin-top: 52px;
    max-width: 260px;
  }
}

/* ===== Footer map band — compact + refined =====
   Slim horizontal strip with a small thumbnail map.
   Hierarchy: text dominant, map is a refined accent (not the focus). */
.footer-map-band {
  background: linear-gradient(180deg, #FBF7EE 0%, #F4ECDB 100%);
  border-top: 1px solid rgba(180, 137, 56, 0.22);
  border-bottom: 1px solid rgba(180, 137, 56, 0.16);
  padding: 24px 0;
}
.footer-map-band__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Map is a small thumbnail on the side, not a full panel */
.footer-map-band__iframe {
  position: relative;
  flex: 0 0 220px;
  width: 220px;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(180, 137, 56, 0.32);
  box-shadow: 0 6px 18px rgba(31, 26, 18, 0.12);
  background: #ffffff;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.footer-map-band__iframe:hover {
  border-color: rgba(180, 137, 56, 0.6);
  transform: translateY(-1px);
}
.footer-map-band__iframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease;
}

/* Info column — takes remaining width, text-first layout */
.footer-map-band__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
}
.footer-map-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 700;
  margin-bottom: 2px;
  opacity: 1;
}
.footer-map-band__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b48938, #e6c98a);
  display: inline-block;
}
.footer-map-band__title {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.footer-map-band__addr {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Compact action row — primary button + ghost link */
.footer-map-band__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.footer-map-band__actions .btn--sm {
  padding: 7px 14px;
  font-size: 0.78rem;
  border-radius: 8px;
}
.footer-map-band__link {
  color: var(--gold-ink);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.2px;
}
.footer-map-band__link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .map-card__iframe { aspect-ratio: 16 / 10; }
  .map-card__overlay { padding: 16px 20px; gap: 16px; }
  .footer-map-band { padding: 16px 0; }
  .footer-map-band__inner { gap: 18px; }
  .footer-map-band__iframe { flex: 0 0 180px; width: 180px; height: 96px; }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .section--map { padding-top: 40px; padding-bottom: 50px; }
  .map-card { border-radius: 16px; }
  .map-card__iframe { aspect-ratio: 4 / 3; }
  .map-card__overlay {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 18px;
    gap: 14px;
  }
  .map-card__info { gap: 12px; }
  .map-card__pin { width: 38px; height: 38px; }
  .map-card__title { font-size: 0.98rem; }
  .map-card__addr  { font-size: 0.82rem; }
  .map-card__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .map-card__actions .btn--sm {
    justify-content: center;
    width: 100%;
  }

  /* Footer band stacks on phones: thumbnail map on top, text below */
  .footer-map-band { padding: 16px 0; }
  .footer-map-band__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .footer-map-band__iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 130px;
  }
  .footer-map-band__title { font-size: 0.96rem; }
  .footer-map-band__addr  { font-size: 0.78rem; }
  .footer-map-band__actions { margin-top: 4px; gap: 12px; }
  .footer-map-band__actions .btn--sm {
    padding: 8px 14px;
    font-size: 0.78rem;
  }
}

/* ============================================================
   Phone-call button next to the Request CTA (desktop nav + mobile drawer)
   Small circular gold icon — tap-to-call the primary number.
   ============================================================ */
.nav-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #b48938 0%, #e6c98a 100%);
  color: #1a0009;
  text-decoration: none;
  border: 1px solid rgba(180, 137, 56, 0.5);
  box-shadow: 0 4px 14px rgba(180, 137, 56, 0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  margin-inline-start: 8px;
  position: relative;
}
.nav-call:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 22px rgba(180, 137, 56, 0.55);
  background: linear-gradient(135deg, #c79740 0%, #f0d28d 100%);
}
.nav-call:active {
  transform: translateY(0) scale(0.98);
}
.nav-call svg {
  display: block;
  pointer-events: none;
}

/* Subtle pulsing ring on desktop to draw attention */
.nav-call::before {
  content: ;
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(230, 201, 138, 0.55);
  opacity: 0;
  animation: navCallPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes navCallPulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  70%  { transform: scale(1.25); opacity: 0;   }
  100% { transform: scale(1.25); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .nav-call::before { animation: none; }
}

/* Mobile drawer row: keep request button taking most of the width with
   the phone button beside it as a fixed circle */
.mobile-drawer__cta-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
}
.mobile-drawer__cta-row .btn--block {
  flex: 1 1 auto;
  margin: 0;
}
.nav-call--mobile {
  width: 52px;
  height: 52px;
  align-self: stretch;
  margin-inline-start: 0;
}
.nav-call--mobile svg { width: 22px; height: 22px; }

/* ============================================================
   Request-valuation floating CTA (right side, vertically centered)
   Override main.css: keep the pill OPEN by default so the user
   sees 'طلب تقييم' on the button instead of just an icon.
   ============================================================ */
.req-fab.req-fab--always-open {
  /* Always-open width: comfortable pill that fits 'طلب تقييم' */
  max-width: 170px !important;
  height: 50px !important;
  padding-inline-end: 18px !important;
  padding-inline-start: 0 !important;
  gap: 4px !important;
  border-radius: 999px 0 0 999px;   /* flat on the right edge (anchored to viewport) */
  background: linear-gradient(135deg, #6E1A28 0%, #8A2332 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 10px 26px rgba(110, 26, 40, 0.42),
    0 0 0 1px rgba(180, 137, 56, 0.35) inset;
  transition:
    transform 0.28s cubic-bezier(.22,.7,.25,1),
    box-shadow 0.28s cubic-bezier(.22,.7,.25,1),
    background 0.3s ease !important;
}
[dir=ltr] .req-fab.req-fab--always-open {
  border-radius: 0 999px 999px 0;   /* anchored to left edge in LTR */
}

.req-fab.req-fab--always-open .req-fab__icon {
  flex: 0 0 50px !important;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f0d28d;          /* gold icon on burgundy */
  background: transparent;
}

.req-fab.req-fab--always-open .req-fab__text {
  opacity: 1 !important;
  color: #fff;
  font-weight: 800;
  font-size: 0.94rem;
  letter-spacing: 0.4px;
  white-space: nowrap;
  padding-inline-end: 0 !important;
}

.req-fab.req-fab--always-open:hover,
.req-fab.req-fab--always-open:focus-visible {
  transform: translateY(-50%) translateX(-3px);
  background: linear-gradient(135deg, #8A2332 0%, #b48938 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 16px 36px rgba(180, 137, 56, 0.40),
    0 0 0 1px rgba(216, 182, 112, 0.55) inset;
}
[dir=ltr] .req-fab.req-fab--always-open:hover,
[dir=ltr] .req-fab.req-fab--always-open:focus-visible {
  transform: translateY(-50%) translateX(3px);
}

/* Soft gold pulse around the icon to attract attention */
.req-fab.req-fab--always-open .req-fab__icon::before {
  content: ;
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid rgba(240, 210, 141, 0.55);
  opacity: 0;
  animation: reqFabPulse 2.6s ease-out infinite;
  pointer-events: none;
}
.req-fab.req-fab--always-open .req-fab__icon {
  position: relative;
}
@keyframes reqFabPulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  70%  { transform: scale(1.4);  opacity: 0;   }
  100% { transform: scale(1.4);  opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .req-fab.req-fab--always-open .req-fab__icon::before { animation: none; }
}

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .req-fab.req-fab--always-open {
    max-width: 150px !important;
    height: 46px !important;
    padding-inline-end: 14px !important;
  }
  .req-fab.req-fab--always-open .req-fab__icon {
    flex: 0 0 46px !important;
    width: 46px; height: 46px;
  }
  .req-fab.req-fab--always-open .req-fab__text {
    font-size: 0.88rem;
  }
}

/* ===== Mobile — keep visible but compact ===== */
@media (max-width: 640px) {
  .req-fab.req-fab--always-open {
    max-width: 130px !important;
    height: 44px !important;
    padding-inline-end: 12px !important;
  }
  .req-fab.req-fab--always-open .req-fab__icon {
    flex: 0 0 44px !important;
    width: 44px; height: 44px;
  }
  .req-fab.req-fab--always-open .req-fab__text {
    font-size: 0.82rem;
    letter-spacing: 0.2px;
  }
}

/* ============================================================
   Request-valuation FAB — STACKED + COMPACT variant
   Two words ('طلب' on top, 'تقييم' below) for the smallest
   possible footprint while staying readable.
   ============================================================ */
.req-fab.req-fab--stacked.req-fab--always-open {
  max-width: 88px !important;
  height: 56px !important;
  padding-inline-end: 14px !important;
  padding-inline-start: 14px !important;
  gap: 0 !important;
  justify-content: center !important;
}
/* Hide the document icon entirely — text only, shifted to the inline-end (right in RTL) */
.req-fab.req-fab--stacked.req-fab--always-open .req-fab__icon {
  display: none !important;
}
.req-fab.req-fab--stacked.req-fab--always-open .req-fab__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 !important;
  gap: 3px;
  width: 100%;
}
.req-fab.req-fab--stacked.req-fab--always-open .req-fab__word {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
  line-height: 1;
  text-align: center;
}

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .req-fab.req-fab--stacked.req-fab--always-open {
    max-width: 98px !important;
    height: 52px !important;
  }
  .req-fab.req-fab--stacked.req-fab--always-open .req-fab__icon {
    flex: 0 0 34px !important;
    width: 34px; height: 34px;
    margin-inline-start: 8px;
  }
  .req-fab.req-fab--stacked.req-fab--always-open .req-fab__icon svg {
    width: 16px; height: 16px;
  }
  .req-fab.req-fab--stacked.req-fab--always-open .req-fab__word {
    font-size: 0.76rem;
  }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .req-fab.req-fab--stacked.req-fab--always-open {
    max-width: 88px !important;
    height: 48px !important;
    padding-inline-end: 10px !important;
  }
  .req-fab.req-fab--stacked.req-fab--always-open .req-fab__icon {
    flex: 0 0 30px !important;
    width: 30px; height: 30px;
    margin-inline-start: 7px;
  }
  .req-fab.req-fab--stacked.req-fab--always-open .req-fab__icon svg {
    width: 14px; height: 14px;
  }
  .req-fab.req-fab--stacked.req-fab--always-open .req-fab__word {
    font-size: 0.72rem;
  }
  .req-fab.req-fab--stacked.req-fab--always-open .req-fab__text {
    gap: 2px;
  }
}

/* ===== trust-bar.css ===== */
/* ============================================================
   Homepage trust bar — 3 official accreditation cards
   (Ministry of Justice · Banks · Investment Funds)
   Isolated file so other tools' edits to main.css don't wipe it.
   ============================================================ */

.trust-bar {
  position: relative;
  padding: 70px 0 60px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(180, 137, 56, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #fbf7ee 0%, #ffffff 100%);
  border-top: 1px solid rgba(180, 137, 56, 0.12);
  border-bottom: 1px solid rgba(180, 137, 56, 0.10);
  isolation: isolate;
  overflow: hidden;
}

/* Subtle gold sheen behind the section */
.trust-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(216, 182, 112, 0.10) 0, transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(180, 137, 56, 0.08) 0, transparent 32%);
  pointer-events: none;
  z-index: 0;
}
.trust-bar > .container { position: relative; z-index: 1; }

/* ===== Section head ===== */
.trust-bar__head {
  text-align: center;
  margin-bottom: 36px;
}
.trust-bar__eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #b48938;
  font-weight: 700;
  padding: 6px 16px;
  border: 1px solid rgba(180, 137, 56, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  margin-bottom: 14px;
}
.trust-bar__title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  color: #1a0009;
  margin: 0 0 6px;
  line-height: 1.25;
  background: linear-gradient(180deg, #2a0e15 0%, #8a2332 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Grid ===== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* ===== Card ===== */
.trust-card {
  position: relative;
  padding: 28px 24px 26px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf7ee 100%);
  border: 1px solid rgba(180, 137, 56, 0.20);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 12px 30px rgba(31, 26, 18, 0.06);
  text-align: center;
  transition:
    transform 0.32s cubic-bezier(.22,.7,.25,1),
    box-shadow 0.32s cubic-bezier(.22,.7,.25,1),
    border-color 0.32s cubic-bezier(.22,.7,.25,1);
  overflow: hidden;
  isolation: isolate;
}

/* Gold top accent line */
.trust-card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #b48938 20%, #e6c98a 50%, #b48938 80%, transparent 100%);
  border-radius: 0 0 3px 3px;
  opacity: 0.9;
  transition: left 0.4s ease, right 0.4s ease, opacity 0.3s ease;
}
.trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 137, 56, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 48px rgba(180, 137, 56, 0.18);
}
.trust-card:hover::before {
  left: 0;
  right: 0;
  opacity: 1;
}

/* Icon disk */
.trust-card__icon {
  width: 64px; height: 64px;
  margin: 4px auto 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #1a0009;
  background:
    radial-gradient(circle at 30% 30%, #f0d28d 0%, #b48938 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 10px 24px rgba(180, 137, 56, 0.35);
  position: relative;
}
.trust-card__icon svg {
  width: 30px; height: 30px;
  display: block;
}

/* Chip badge above title */
.trust-card__chip {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #835e22;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(180, 137, 56, 0.10);
  border: 1px solid rgba(180, 137, 56, 0.30);
  margin-bottom: 10px;
}

.trust-card__title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #1a0009;
  margin: 0 0 8px;
  line-height: 1.3;
}
.trust-card__desc {
  font-size: 0.92rem;
  color: #4a3f33;
  margin: 0;
  line-height: 1.65;
}

/* ===== Wide tablets / small laptops — 2 columns ===== */
@media (max-width: 1100px) {
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ===== Tablet — single column ===== */
@media (max-width: 900px) {
  .trust-bar { padding: 54px 0 44px; }
  .trust-bar__head { margin-bottom: 28px; }
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
  }
  .trust-card { padding: 22px 22px 20px; }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .trust-bar { padding: 42px 0 34px; }
  .trust-bar__title { font-size: clamp(20px, 5.4vw, 26px); }
  .trust-card__icon { width: 56px; height: 56px; margin-bottom: 12px; }
  .trust-card__icon svg { width: 26px; height: 26px; }
  .trust-card__title { font-size: 1.08rem; }
  .trust-card__desc { font-size: 0.88rem; }
}

/* ===== nav-mobile.css ===== */
/* ============================================================
   Mobile + Tablet: single-row inline nav with dropdown
   - Logo BESIDE the nav (single row)
   - "المزيد" dropdown is a SIBLING of <ul> (not inside) so it
     doesn't get clipped by the ul's horizontal-scroll overflow.
   - Both call icon and "تقديم طلب" pill are visible side-by-side.
   - Uses native <details>/<summary> — no JS needed.
   - Isolated file so other tools' edits to main.css don't wipe it.
   ============================================================ */

/* Desktop (>980px): hide the mobile-only artefacts */
.nav-link--mobile-only { display: none; }
.nav-more { display: none; }
/* Desktop CTA shows text only, hide the small icon */
.nav-cta__icon { display: none; }

/* ============================================================
   Tablet + Mobile (≤ 980px) — single-row inline nav
   ============================================================ */
@media (max-width: 980px) {
  /* 1) Kill the hamburger & drawer entirely */
  .nav-toggle,
  .mobile-drawer,
  .mobile-drawer-backdrop {
    display: none !important;
  }

  /* 2) navbar grid: logo + nav (2 cols, 1 row) */
  .navbar__row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: "logo nav" !important;
    align-items: center;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .navbar__row > .brand        { grid-area: logo; min-width: 0; }
  .navbar__row > .primary-nav  { grid-area: nav; width: 100%; min-width: 0; }

  /* Smaller logo on mobile so more space for nav */
  .navbar__row .brand__logo { height: 38px !important; }
  .navbar__row .brand__text { display: none; }

  /* 3) primary-nav is the OUTER flex row, NOT scrollable.
        Order: [ scrolling ul ] [ المزيد ] [ call ] [ CTA pill ] */
  .primary-nav {
    display: flex !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow: visible !important;
    width: 100%;
    min-width: 0;
  }

  /* 4) Only the <ul> scrolls. Dropdown is a sibling so it's not clipped. */
  .primary-nav ul {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    padding: 2px 2px !important;
    margin: 0 !important;
    align-items: center;
    list-style: none;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  }
  .primary-nav ul::-webkit-scrollbar { display: none; }

  /* 5) Show mobile-only items, hide desktop-only ones */
  .nav-link--mobile-only,
  .nav-more.nav-link--mobile-only { display: list-item; }
  .nav-link--desktop-only { display: none !important; }

  /* The dropdown is now a flex child of primary-nav, not list item */
  .nav-more.nav-link--mobile-only {
    display: inline-block !important;
    position: relative;
    flex-shrink: 0;
  }

  /* 6) Pill styling — SMALLER on mobile so they don't overlap the logo */
  .primary-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(180, 137, 56, 0.08);
    border: 1px solid rgba(180, 137, 56, 0.22);
    color: #835e22;
    line-height: 1.2;
    cursor: pointer;
    transition:
      background 0.22s ease,
      color 0.22s ease,
      border-color 0.22s ease;
  }
  .primary-nav .nav-link:hover,
  .primary-nav .nav-link:focus-visible {
    background: rgba(180, 137, 56, 0.18);
    border-color: rgba(180, 137, 56, 0.4);
    color: #6e1a28;
  }
  .primary-nav .nav-link.is-active {
    background: linear-gradient(135deg, #b48938 0%, #e6c98a 100%);
    color: #1a0009;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(180, 137, 56, 0.32);
  }
  .primary-nav .nav-link::after { display: none !important; }

  /* Language switcher pill — globe icon + AR/EN code */
  .primary-nav .nav-lang {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(180, 137, 56, 0.08) !important;
    border: 1px solid rgba(180, 137, 56, 0.32) !important;
    color: #835e22 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-inline-start: 2px !important;
    flex-shrink: 0;
    flex-grow: 0;
    align-self: center;
    white-space: nowrap;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  }
  .primary-nav .nav-lang:hover,
  .primary-nav .nav-lang:focus-visible {
    background: linear-gradient(135deg, #b48938 0%, #e6c98a 100%) !important;
    color: #1a0009 !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(180, 137, 56, 0.32);
  }
  .primary-nav .nav-lang__globe {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }
  .primary-nav .nav-lang__code {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.4px;
  }

  /* 7) Call icon + CTA pill — pinned at the inline-end of the nav */
  .primary-nav .nav-call {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    margin-inline-start: 2px !important;
    flex-shrink: 0;
    align-self: center;
  }
  .primary-nav .nav-call svg { width: 14px; height: 14px; }
  .primary-nav .nav-call::before { inset: -2px; }

  /* CTA pill removed from the inline mobile nav (it's now inside the المزيد dropdown).
     Hide it completely on mobile/tablet. It still shows on desktop normally. */
  .primary-nav .nav-cta {
    display: none !important;
  }
  /* CTA pill — show the real text from PHP ('طلب تقييم عقاري'), no overrides */
  .primary-nav .nav-cta .nav-cta__icon { display: none !important; }
  .primary-nav .nav-cta .nav-cta__text {
    font-size: 0.78rem !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.1px;
    visibility: visible !important;
    position: static !important;
    width: auto; height: auto;
    padding: 0; margin: 0;
    overflow: visible;
    clip: auto;
    border: 0;
    white-space: nowrap;
  }

  /* ============================================================
     "المزيد" dropdown — native <details>/<summary>
     Now a sibling of <ul>, so the popup is NOT clipped.
     ============================================================ */
  .nav-more {
    position: relative;
  }
  .nav-more__summary {
    list-style: none;
    user-select: none;
  }
  .nav-more__summary::-webkit-details-marker { display: none; }
  .nav-more__summary::marker { content: ""; }

  .nav-more__chevron {
    transition: transform 0.22s ease;
  }
  .nav-more[open] .nav-more__chevron {
    transform: rotate(180deg);
  }
  .nav-more[open] .nav-more__summary {
    background: linear-gradient(135deg, #b48938 0%, #e6c98a 100%);
    color: #1a0009;
    border-color: transparent;
  }

  /* The popup card — drops DOWN as a polished VERTICAL menu list.
     Selector bumped to .primary-nav .nav-more .nav-more__list (3 classes)
     so it beats '.primary-nav ul { flex-direction: row !important }'
     which has only 2 classes and was winning by specificity. */
  .primary-nav .nav-more .nav-more__list,
  ul.nav-more__list {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-end: 0;
    width: 220px;
    background: linear-gradient(180deg, #ffffff 0%, #fbf7ee 100%);
    border: 1px solid rgba(180, 137, 56, 0.32);
    border-radius: 16px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 2px 0 rgba(180, 137, 56, 0.08) inset,
      0 18px 44px rgba(31, 26, 18, 0.22),
      0 6px 16px rgba(180, 137, 56, 0.10);
    padding: 8px !important;
    margin: 0 !important;
    list-style: none;
    z-index: 200;
    /* VERTICAL stack of menu items */
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1px !important;
    transform-origin: top right;
    animation: navMoreOpen 0.22s cubic-bezier(.22,.7,.25,1);
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  [dir="ltr"] .nav-more__list { transform-origin: top left; }

  /* Small triangle caret pointing up to the trigger */
  .nav-more__list::before {
    content: "";
    position: absolute;
    top: -6px;
    inset-inline-end: 14px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-top: 1px solid rgba(180, 137, 56, 0.32);
    border-inline-start: 1px solid rgba(180, 137, 56, 0.32);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
  }

  /* Gold accent strip at the top of the menu */
  .nav-more__list::after {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #b48938 25%, #e6c98a 50%, #b48938 75%, transparent 100%);
    border-radius: 0 0 2px 2px;
  }

  @keyframes navMoreOpen {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
  }

  .nav-more__list li {
    display: block !important;
    width: 100% !important;
    list-style: none !important;
  }

  /* Each menu item = full-width row inside the dropdown */
  .nav-more__list .nav-link {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    width: 100% !important;
    justify-content: flex-start;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    padding: 10px 14px !important;
    font-size: 0.86rem !important;
    color: #2A251D !important;
    font-weight: 600 !important;
    white-space: nowrap;
    transition: background 0.20s ease, color 0.20s ease, border-color 0.20s ease, padding 0.20s ease;
  }
  .nav-more__list .nav-link:hover,
  .nav-more__list .nav-link:focus-visible {
    background: rgba(180, 137, 56, 0.10) !important;
    color: #6e1a28 !important;
    border-color: rgba(180, 137, 56, 0.18) !important;
    padding-inline-start: 18px !important;
  }
  .nav-more__list .nav-link.is-active {
    background: linear-gradient(135deg, rgba(180, 137, 56, 0.18) 0%, rgba(216, 182, 112, 0.10) 100%) !important;
    color: #6e1a28 !important;
    border-color: rgba(180, 137, 56, 0.32) !important;
  }
  .nav-more__list .nav-link.is-active .nav-more__ico {
    color: #b48938;
  }

  /* Item icon — gold-tinted */
  .nav-more__ico {
    flex-shrink: 0;
    color: #835e22;
    width: 16px;
    height: 16px;
    transition: color 0.22s ease;
  }
  .nav-more__list .nav-link:hover .nav-more__ico { color: #6e1a28; }

  /* Horizontal divider line between sections */
  .nav-more__divider {
    height: 1px !important;
    width: auto !important;
    background: linear-gradient(90deg, transparent, rgba(180, 137, 56, 0.30), transparent);
    margin: 6px 8px !important;
    list-style: none;
    padding: 0 !important;
    display: block !important;
  }

  /* Highlighted CTA item inside the dropdown (تقديم طلب) — gold gradient pill */
  .nav-more__list .nav-more__cta {
    background: linear-gradient(135deg, #b48938 0%, #e6c98a 100%) !important;
    color: #1a0009 !important;
    border-color: transparent !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(180, 137, 56, 0.28);
  }
  .nav-more__list .nav-more__cta .nav-more__ico {
    color: #1a0009 !important;
  }
  .nav-more__list .nav-more__cta:hover,
  .nav-more__list .nav-more__cta:focus-visible {
    background: linear-gradient(135deg, #c79740 0%, #f0d28d 100%) !important;
    color: #1a0009 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(180, 137, 56, 0.40);
    padding-inline-start: 14px !important;  /* don't slide on hover, stays compact */
  }
}

/* ===== Very small phones (≤ 380px) ===== */
@media (max-width: 380px) {
  .navbar__row { padding: 8px 10px !important; gap: 6px !important; }
  .navbar__row .brand__logo { height: 34px !important; }
  .primary-nav ul { gap: 4px !important; padding: 2px 2px !important; }
  .primary-nav .nav-link {
    padding: 5px 9px !important;
    font-size: 0.7rem !important;
  }
  .primary-nav .nav-call,
  .primary-nav .nav-cta {
    height: 30px !important;
  }
  .primary-nav .nav-call { width: 30px !important; }
  .primary-nav .nav-call svg { width: 12px; height: 12px; }
  .primary-nav .nav-cta { padding: 0 10px !important; height: 30px !important; }
  .primary-nav .nav-cta .nav-cta__text { font-size: 0.7rem !important; }
}

/* ============================================================
   Mobile header v2 (client request)
   Layout: [logo: RIGHT] [call + اطلب تقييم: CENTER] [☰: LEFT]
   Side drawer (instead of dropdown from top).
   ============================================================ */
@media (max-width: 980px) {
  /* 1) Bring back the hamburger and side drawer */
  .nav-toggle {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(180, 137, 56, 0.25);
    background: rgba(180, 137, 56, 0.08);
    color: var(--ink);
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
  }
  .nav-toggle:hover { background: rgba(180, 137, 56, 0.16); transform: translateY(-1px); }
  .nav-toggle span { background: var(--ink); margin: 3px 0; }
  .mobile-drawer,
  .drawer-overlay { display: block !important; }

  /* 2) Hide the inline nav links — they live in the drawer now */
  .primary-nav > ul,
  .primary-nav .nav-more,
  .primary-nav .nav-lang {
    display: none !important;
  }

  /* 3) New 3-column grid: logo / CTAs / hamburger.
        Document is RTL, so the first area is visually on the RIGHT. */
  .navbar__row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "logo ctas toggle" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  .navbar__row > .brand       { grid-area: logo; justify-self: start; }
  .navbar__row > .primary-nav { grid-area: ctas; }
  .navbar__row > .nav-toggle  { grid-area: toggle; justify-self: end; }

  /* 4) primary-nav now only holds the call icon + Request CTA */
  .primary-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .primary-nav .nav-call { display: inline-flex !important; flex-shrink: 0; }
  .primary-nav .nav-cta  { display: inline-flex !important; flex-shrink: 1; min-width: 0; }
  .primary-nav .nav-cta .nav-cta__text {
    display: inline-block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Smaller phones — tighten further */
@media (max-width: 420px) {
  .navbar__row { padding: 8px 10px !important; gap: 6px !important; }
  .navbar__row .brand__logo { height: 34px !important; }
  .nav-toggle { width: 40px; height: 40px; }
  .primary-nav .nav-cta { padding: 8px 12px !important; font-size: .78rem !important; }
  .primary-nav .nav-call { width: 38px !important; height: 38px !important; }
}

/* ===== legal.css ===== */
/* ============================================================
   Legal pages typography — Privacy, Terms (premium look)
   Used by /privacy and /terms. Isolated file.
   ============================================================ */

/* Center & widen the legal article wrapper */
.section .container.narrow {
  max-width: 880px;
}

.legal {
  color: var(--ink-2);
  font-size: 1.025rem;
  line-height: 1.95;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

/* "Last updated" date — small gold pill */
.legal__updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--gold-ink);
  background: linear-gradient(180deg, #fff 0%, var(--soft) 100%);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 0 0 36px;
  letter-spacing: .2px;
  box-shadow: 0 1px 2px rgba(31,26,18,.04);
}
.legal__updated time { color: var(--ink-2); font-weight: 600; }

/* Section headings — bold ink with a gold accent rule underneath */
.legal h2 {
  position: relative;
  margin: 48px 0 18px;
  padding-bottom: 14px;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.35;
}
.legal h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-3) 50%, var(--gold) 100%);
  box-shadow: 0 0 14px rgba(216, 182, 112, 0.45);
}
[dir="ltr"] .legal h2::after { right: auto; left: 0; }

/* Sub headings */
.legal h3 {
  margin: 32px 0 12px;
  color: var(--ink-2);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.2px;
}

/* Body paragraphs */
.legal p {
  margin: 0 0 18px;
  color: var(--ink-2);
}

/* Lists — gold gem bullets / numbered chips */
.legal ul,
.legal ol {
  margin: 6px 0 26px;
  padding: 0;
  list-style: none;
}

.legal ul li,
.legal ol li {
  position: relative;
  padding-right: 28px;
  margin-bottom: 12px;
  color: var(--ink-2);
}
[dir="ltr"] .legal ul li,
[dir="ltr"] .legal ol li {
  padding-right: 0;
  padding-left: 28px;
}

/* Unordered list bullets — small gold gems */
.legal ul li::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-3) 0%, var(--gold) 60%, var(--gold-2) 100%);
  box-shadow: 0 0 8px rgba(216, 182, 112, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
[dir="ltr"] .legal ul li::before { right: auto; left: 4px; }

/* Ordered list numbers — small gold circle */
.legal ol {
  counter-reset: legal-ol;
}
.legal ol li {
  padding-right: 38px;
  margin-bottom: 14px;
}
[dir="ltr"] .legal ol li {
  padding-right: 0;
  padding-left: 38px;
}
.legal ol li::before {
  counter-increment: legal-ol;
  content: counter(legal-ol);
  position: absolute;
  right: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold-ink);
  background: linear-gradient(180deg, #fff 0%, var(--soft) 100%);
  border: 1px solid rgba(180, 137, 56, .35);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(180, 137, 56, .15);
}
[dir="ltr"] .legal ol li::before { right: auto; left: 0; }

/* Nested lists keep gem style but smaller */
.legal li > ul,
.legal li > ol {
  margin-top: 10px;
  margin-bottom: 6px;
}
.legal li > ul > li::before {
  width: 6px; height: 6px; top: 12px;
}

/* Inline elements */
.legal a {
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px dashed rgba(180, 137, 56, 0.5);
  transition: color .2s ease, border-color .2s ease;
}
.legal a:hover {
  color: var(--burgundy);
  border-bottom-style: solid;
  border-bottom-color: var(--burgundy);
}
.legal strong, .legal b { color: var(--ink); font-weight: 700; }
.legal em, .legal i { color: var(--ink-2); }

/* Blockquote — soft gold rail */
.legal blockquote {
  margin: 24px 0;
  padding: 18px 24px;
  background: var(--soft);
  border-right: 4px solid var(--gold);
  border-radius: 10px;
  color: var(--ink-2);
  font-style: italic;
  box-shadow: 0 1px 2px rgba(31, 26, 18, .04);
}
[dir="ltr"] .legal blockquote {
  border-right: 0;
  border-left: 4px solid var(--gold);
}

/* Tables (rare but possible in legal docs) */
.legal table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 22px 0 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.legal table th,
.legal table td {
  padding: 12px 16px;
  text-align: start;
  border-bottom: 1px solid var(--line);
}
.legal table th {
  background: var(--soft);
  color: var(--ink);
  font-weight: 700;
}
.legal table tr:last-child td { border-bottom: 0; }

/* Code blocks (rare) */
.legal code {
  background: var(--soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
  color: var(--burgundy);
}

/* Spacing between top of section and first h2 */
.legal > h2:first-of-type {
  margin-top: 8px;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 720px) {
  .legal {
    font-size: 0.985rem;
    line-height: 1.85;
  }
  .legal__updated {
    font-size: .78rem;
    padding: 6px 14px;
    margin-bottom: 26px;
  }
  .legal h2 {
    font-size: 1.25rem;
    margin: 36px 0 14px;
    padding-bottom: 12px;
  }
  .legal h2::after {
    width: 46px;
    height: 2px;
  }
  .legal h3 {
    font-size: 1.05rem;
    margin: 26px 0 10px;
  }
  .legal p { margin-bottom: 14px; }
  .legal ul li,
  .legal ol li {
    margin-bottom: 10px;
    padding-right: 24px;
  }
  [dir="ltr"] .legal ul li,
  [dir="ltr"] .legal ol li {
    padding-right: 0;
    padding-left: 24px;
  }
  .legal ol li { padding-right: 34px; }
  [dir="ltr"] .legal ol li { padding-left: 34px; }
  .legal ol li::before {
    width: 22px; height: 22px; font-size: .72rem;
  }
  .legal ul li::before {
    width: 7px; height: 7px; top: 12px;
  }
  .legal blockquote {
    padding: 14px 18px;
  }
}

/* ===== partners.css ===== */
/* ============================================================
   Partners marquee — unified logo sizes
   Each logo gets the same bounding box (W×H) so wide logos
   (like Alinma) and tall logos (like Enfath) end up visually
   balanced instead of one dominating the row.
   Isolated file.
   ============================================================ */

.marquee__track {
  align-items: center;
  gap: 56px;   /* a touch less than the original 80 since boxes are now padded */
}

.marquee__track img {
  /* Uniform bounding box — every logo lives inside the same frame */
  height: 56px;
  width: 170px;
  max-width: 170px;
  object-fit: contain;
  object-position: center center;

  /* Subtle visual unification so each logo reads at similar weight */
  opacity: 0.88;
  filter: saturate(0.92) contrast(0.96);

  /* Internal breathing room so logos don't crowd the edges */
  padding: 4px 0;
  box-sizing: border-box;

  transition:
    transform .3s var(--ease, ease),
    opacity   .3s ease,
    filter    .3s ease;
}

.marquee__track img:hover {
  transform: scale(1.05);
  opacity: 1;
  filter: saturate(1) contrast(1);
}

/* Tablet — slightly smaller box, tighter gap */
@media (max-width: 900px) {
  .marquee__track { gap: 44px; }
  .marquee__track img {
    height: 50px;
    width: 150px;
    max-width: 150px;
  }
}

/* Mobile — smaller again so 3-4 logos fit nicely in view */
@media (max-width: 600px) {
  .marquee__track { gap: 32px; }
  .marquee__track img {
    height: 44px;
    width: 130px;
    max-width: 130px;
  }
}

@media (max-width: 400px) {
  .marquee__track { gap: 24px; }
  .marquee__track img {
    height: 38px;
    width: 110px;
    max-width: 110px;
  }
}


/* ============================================================
   LCP fix — show the hero immediately, no opacity-0 wait.
   The IntersectionObserver still adds .is-revealed but the hero
   content already starts visible so the LCP paints right away.
   ============================================================ */
.js .hero [data-anim],
.js .hero__title,
.js .hero__lead,
.js .hero__copy,
.js .hero__ctas,
.js .hero__stats,
.js .hero .eyebrow {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
/* Skip the chrome of decorations from starting hidden too */
.hero,
.hero__media,
.hero__sand,
.hero__props,
.hero__grid,
.hero__copy {
  contain: layout style;
}

/* ============================================================
   Service landing pages — rich layout for /تقييم-عقاري-للبنوك/ etc.
   ============================================================ */
.lead-intro {
  font-size: 1.12rem;
  line-height: 1.9;
  color: var(--ink);
  font-weight: 500;
}
.prose-content p {
  font-size: 1.02rem;
  line-height: 2;
  margin: 0 0 18px;
  color: var(--ink);
}

/* Use-case grid (numbered cards) */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 36px;
  counter-reset: ucnum;
}
.usecase-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(180,137,56,.22);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 8px 22px rgba(31,26,18,.06);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  counter-increment: ucnum;
}
.usecase-card::before {
  content: counter(ucnum, decimal-leading-zero);
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(180,137,56,.28);
  line-height: 1;
}
.usecase-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 16px 36px rgba(180,137,56,.20);
}
.usecase-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  padding-inline-end: 38px;
}
.usecase-card p { color: var(--muted); line-height: 1.75; margin: 0; font-size: .95rem; }

/* Process steps */
.process-steps {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  gap: 18px;
}
.process-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: flex-start;
  background: #fff;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid rgba(180,137,56,.18);
  box-shadow: 0 6px 16px rgba(31,26,18,.05);
}
.process-steps__num {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, #8B6520 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  flex-shrink: 0;
}
.process-steps__item strong {
  font-size: 1.04rem;
  font-weight: 800;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.process-steps__item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: .94rem;
}

/* Advantage grid (checkmarks) */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.adv-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(180,137,56,.22);
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink);
}
.adv-card__check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f8b6e 0%, #0a6650 100%);
  color: #fff;
  font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(31,139,110,.30);
}

/* General helpers */
.text-center { text-align: center; }
.lead {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--ink);
  margin-top: 14px;
}

/* Service card — actions row (details + request) */
.service-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gold-ink);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: color .2s ease, transform .15s ease;
}
.service-card__more:hover {
  color: var(--burgundy);
  transform: translateX(-2px);
}
.service-card__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--gold) 0%, #8B6520 100%);
  color: #fff !important;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(180,137,56,.30);
  transition: transform .15s ease, box-shadow .2s ease;
}
.service-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(180,137,56,.40);
}

/* ============================================================
   Footer columns — vertical dividers between cols for cleaner layout
   ============================================================ */
.footer-grid {
  align-items: stretch;
}
.footer-grid > .footer-col {
  position: relative;
  padding: 0 26px;
}
/* Add a vertical divider on the LEFT of each col except the first one (RTL: visually on the LEFT means after) */
.footer-grid > .footer-col + .footer-col::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  /* In RTL, the column's start is on the right; we want the divider on the
     side that faces the PREVIOUS column. Use inset-inline-end for both directions. */
  inset-inline-end: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(180, 137, 56, 0.32) 18%,
    rgba(180, 137, 56, 0.42) 50%,
    rgba(180, 137, 56, 0.32) 82%,
    transparent 100%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .footer-grid > .footer-col {
    padding: 0 12px 22px;
  }
  /* On mobile/tablet, switch to horizontal dividers under each col */
  .footer-grid > .footer-col + .footer-col::before {
    top: auto;
    inset-inline-end: 12%;
    inset-inline-start: 12%;
    bottom: auto;
    /* draw a thin horizontal rule above each subsequent col */
    transform: translateY(-12px);
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(180, 137, 56, 0.34) 50%,
      transparent 100%);
  }
}

/* ============================================================
   Accreditations grid on /about (TAQEEM / RICS / IVSC)
   3 large branded cards with logo + name + description.
   ============================================================ */
.accreds-section .accreds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 14px;
}
.accred-card {
  background: linear-gradient(160deg, #ffffff 0%, #FBF7EE 100%);
  border: 1px solid rgba(180, 137, 56, 0.20);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(31, 26, 18, 0.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease;
}
.accred-card:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 137, 56, 0.45);
  box-shadow: 0 22px 48px rgba(31, 26, 18, 0.10);
}
.accred-card__logo {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.accred-card__logo img {
  max-height: 88px;
  max-width: 220px;
  object-fit: contain;
}
.accred-card__short {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B48938, #8B6520);
  color: #fff;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: .06em;
  box-shadow: 0 12px 26px rgba(180, 137, 56, 0.32);
}
.accred-card__name {
  font-size: 1.18rem;
  font-weight: 900;
  color: #1F1B14;
  margin: 0 0 12px;
  line-height: 1.4;
}
.accred-card__desc {
  font-size: .95rem;
  color: #6B6358;
  line-height: 1.85;
  margin: 0;
}
@media (max-width: 920px) {
  .accreds-section .accreds-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .accred-card {
    padding: 28px 22px;
  }
}

/* Center the hero stats row (Arabic suffix "ألف" replaces "K") */
.hero__stats--center {
  justify-content: center;
  text-align: center;
}
.hero__stats--center li {
  align-items: center;
  text-align: center;
}