/* =============================================================
   BasmatDecor – site overrides
   Keep these minimal: the theme CSS handles the full layout.
   ============================================================= */

/* 1. The Webflow base .w-nav sets background:#ddd.
      The theme .navbar sets rgba(0,0,0,0) but has lower specificity
      when both classes are on the same element. Bump it up. */
.navbar.w-nav {
  background-color: transparent;
}

/* 1b. Public header — a deliberately architectural navigation treatment.
   A solid frame, clear active state, and a single action make the first
   impression feel as considered as the interiors we design. */
.header-section {
  position: relative;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid rgba(27, 35, 47, 0.12);
}

.top-bar-header-area {
  border-bottom: 4px solid var(--primary-color);
}

.navbar.w-nav {
  padding: 0;
}

.navbar.w-nav .container {
  position: relative;
  width: 100%;
  max-width: none;
  display: flex;
  min-height: 92px;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 0;
}

.brand.w-nav-brand {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin: 0;
  min-width: 280px;
  justify-content: center;
  padding: 0 28px;
  border-left: 1px solid rgba(27, 35, 47, 0.12);
  gap: 14px;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  width: 30px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 18px 18px 0 0;
  background: var(--primary-color);
}

.brand-mark::after {
  position: absolute;
  bottom: 0;
  right: 10px;
  width: 9px;
  height: 20px;
  border-radius: 9px 9px 0 0;
  background: #fff;
  content: "";
}

.brand-name {
  color: var(--secondary-color);
  font-family: 'Cairo', sans-serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.brand-name span:first-child {
  color: var(--secondary-color);
}

.site-nav-menu.w-nav-menu {
  display: flex;
  height: auto;
  align-items: stretch;
  margin: 0;
}

.site-nav-menu .nav-link {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  align-self: center;
  margin: 0 2px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--secondary-color);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.site-nav-menu .nav-link {
  position: relative;
}

.site-nav-menu .nav-link::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  background: var(--primary-color);
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .2s ease, transform .2s ease;
}

.site-nav-menu .nav-link:hover,
.site-nav-menu .nav-link:focus-visible,
.site-nav-menu .nav-link.w--current {
  color: var(--primary-color);
  background: #faf7f3;
}

.site-nav-menu .nav-link:hover::after,
.site-nav-menu .nav-link:focus-visible::after,
.site-nav-menu .nav-link.w--current::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-nav-menu .nav-link.last-child {
  padding-right: 14px;
}

.header-cta {
  position: absolute;
  inset-inline-end: 24px;
  top: 50%;
  display: inline-flex;
  width: 190px;
  min-width: 0;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 12px;
  background: #171717;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(23, 23, 23, 0.16);
  transform: translateY(-50%);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.header-cta-label {
  line-height: 1;
}

.header-cta-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  line-height: 1;
  transition: transform .2s ease, background-color .2s ease;
}

.header-cta-icon img {
  width: 15px;
  height: 15px;
}

.header-cta:hover,
.header-cta:focus-visible {
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 10px 22px rgba(194, 145, 91, 0.28);
  transform: translateY(calc(-50% - 2px));
}

.header-cta:hover .header-cta-icon,
.header-cta:focus-visible .header-cta-icon {
  background: rgba(255, 255, 255, 0.16);
  transform: translateX(-3px);
}

/* 2. Bootstrap scaffold leftovers – kill the 60px bottom margin
      that pushes sections away from the footer. */
body {
  margin-bottom: 0;
}

/* The theme tiles a vertical-hairline PNG behind the whole body. It
   leaks through every transparent gap as random stripes (around the
   project rail, between cards, next to the CTA) and reads as noise,
   not texture. Sections carry their own backgrounds; the page
   stays quiet. */
body {
  background-image: none;
}

/* Mirror the home-page hero photograph while keeping its Arabic content
   readable and unaffected. */
.hero-section {
  position: relative;
  overflow: hidden;
  background-image: none;
}

.hero-section::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--primary-color) url("/assets/basmat-decor/images/hero-area-image.jpg") 50% / cover;
  content: "";
  transform: scaleX(-1);
}

.hero-content-wrap {
  position: relative;
  z-index: 1;
}

/* 3. Dropdown list: hidden by default, shown when JS adds .w--open.
      The base Webflow CSS shows it via .w--nav-dropdown-open on the
      parent, but our custom JS only toggles .w--open on the list itself. */
.dropdown-list.w-dropdown-list {
  display: none;
}

.dropdown-list.w-dropdown-list.w--open {
  display: block;
}

/* 4. w-mod-js gate: the original inline script adds this class to <html>
      immediately. Our layout script does it too but after DOMContentLoaded.
      Pre-set the class to avoid a flash. We replicate this inline in _Layout. */

/* =============================================================
   5. Arabic-only (RTL) adjustments — the site renders dir="rtl".
   The theme CSS was generated from an LTR Webflow template, so these
   overrides flip its directional chrome: navbar floats, button arrow
   position, hard-coded left alignments and inline arrows.
   ============================================================= */

/* Webfont: Jost / DM Serif Display are latin-only, so Arabic glyphs fall
   back to the self-hosted Cairo (Arabic subset, see fonts.css). Cairo leads
   the stack to keep the whole Arabic site in one cohesive face. */
body {
  font-family: 'Cairo', 'Jost', 'Helvetica Neue', Helvetica, Ubuntu, 'Segoe UI', Verdana, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.hero-wrap-title, .intro-section-title, .section-title, .banner-title,
.call-to-action-title, .process-heading, .footer-widget-title,
.service-title, .about-heading, .blog-title, .project-title,
.member-name, .client-name, .count-number {
  font-family: 'Cairo', 'DM Serif Display', serif;
}

/* Navbar: logo on the right, menu/hamburger on the left (mirrored) */
.w-nav-brand { float: right; }
.w-nav-menu { float: left; }
.w-nav-button { float: left; }

/* Webflow internals hard-code text-align:left — flip them */
.w-nav-link, .w-dropdown, .w-dropdown-toggle, .w-dropdown-link,
.w-tab-link, .w-slide,
.testimonial-detail, .error-page-content, .error-page-subtitle {
  text-align: right;
}

/* CTA buttons: the arrow image sits on the left in RTL */
.button,
.button-colored {
  padding-left: 40px;
  padding-right: 15px;
  background-position: 15% 50%;
}

.button-large {
  padding-left: 45px;
  padding-right: 18px;
  background-position: 20% 50%;
}

/* Inline directional arrows read the other way in RTL */
.simple-link-icon,
.blog-single-link img,
.project-single-link img {
  transform: scaleX(-1);
}

/* Contact form submit: was right-aligned in LTR */
.contact-form-button-section.right-align {
  text-align: left;
}

/* =============================================================
   6. Public form feedback (Arabic-only forms)
   ============================================================= */
.public-alert {
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.7;
}

/* The validation summary renders an empty alert box before any errors exist. */
.public-alert:empty {
  display: none;
}

.public-alert-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.public-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #b91c1c;
}

/* =============================================================
   7. Loading feedback (site.js) — submit-button spinner and a
   skeleton overlay over a form while the server responds.
   ============================================================= */
form.is-pending {
  position: relative;
}

.form-pending-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.92);
}

.form-skeleton-field {
  height: 42px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #e9e9ef;
  animation: skeleton-pulse 1.8s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.spin {
  animation: spinner-rotate 0.7s linear infinite;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

button.is-busy,
input.is-busy {
  pointer-events: none;
  opacity: 0.85;
}

.busy-spinner {
  display: inline-flex;
  flex-shrink: 0;
  margin-inline-end: 8px;
}

.busy-spinner svg {
  width: 1.1em;
  height: 1.1em;
}

/* =============================================================
   8. Home hero — premium Egyptian finishing and interiors landing
   ============================================================= */
.hero-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr);
  min-height: 700px;
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 0 190px;
  background: #f7f1e9;
  align-items: stretch;
  direction: ltr;
  isolation: isolate;
}

.hero-section::before {
  display: none;
}

.hero-media {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-height: 700px;
  overflow: hidden;
  background: #ded6cb;
}

.hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
}

.hero-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(31, 37, 45, .22), transparent 38%, rgba(31, 37, 45, .04));
  content: "";
  pointer-events: none;
}

.hero-media-caption {
  position: absolute;
  right: 34px;
  bottom: 30px;
  z-index: 1;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(31, 37, 45, .42);
  color: #fff;
  direction: rtl;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
}

.hero-panel {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: clamp(56px, 7vw, 112px) clamp(34px, 6vw, 100px);
  border-left: 5px solid var(--primary-color);
  background: #f7f1e9;
  direction: rtl;
}

.hero-panel::before {
  position: absolute;
  top: 56px;
  right: 38px;
  width: 92px;
  height: 92px;
  border-top: 1px solid rgba(194, 145, 91, .45);
  border-right: 1px solid rgba(194, 145, 91, .45);
  content: "";
  pointer-events: none;
}

.hero-panel-inner {
  width: 100%;
  max-width: 650px;
  margin-inline: auto;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.hero-kicker span,
.hero-location span {
  display: inline-block;
  width: 30px;
  height: 3px;
  background: var(--primary-color);
}

.hero-wrap-title {
  max-width: 620px;
  margin: 0 0 22px;
  color: var(--secondary-color);
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.055em;
}

.hero-wrap-title span {
  display: block;
  color: var(--primary-color);
}

.hero-wrap-description {
  max-width: 570px;
  margin: 0 0 30px;
  color: #51565d;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.9;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.hero-primary-cta,
.hero-secondary-cta {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.hero-primary-cta {
  padding: 0 20px 0 14px;
  background: var(--secondary-color);
  color: #fff;
  box-shadow: 0 10px 22px rgba(31, 37, 45, .16);
}

.hero-primary-cta:hover,
.hero-primary-cta:focus-visible {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(194, 145, 91, .25);
}

.hero-action-arrow {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.hero-secondary-cta {
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 1px solid var(--primary-color);
  border-radius: 0;
  color: var(--secondary-color);
}

.hero-secondary-cta span {
  color: var(--primary-color);
  font-size: 20px;
}

.hero-secondary-cta:hover,
.hero-secondary-cta:focus-visible {
  color: var(--primary-color);
  transform: translateY(-2px);
}

.hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 37, 45, .14);
  color: #62666b;
  font-size: 12px;
  font-weight: 700;
}

.hero-proof-row span {
  padding-inline: 14px;
  border-inline-start: 1px solid rgba(31, 37, 45, .2);
}

.hero-proof-row span:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.hero-location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  color: #77736e;
  font-size: 12px;
  font-weight: 600;
}

.hero-location span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

@media screen and (max-width: 991px) {
  .hero-section {
    grid-template-columns: minmax(0, 1fr) minmax(370px, .9fr);
    min-height: 610px;
    border-radius: 0 0 0 120px;
  }

  .hero-media {
    min-height: 610px;
  }

  .hero-panel {
    padding: 52px 40px;
  }

  .hero-wrap-title {
    font-size: clamp(42px, 5.4vw, 62px);
  }

  .hero-proof-row span {
    margin-bottom: 8px;
  }
}

@media screen and (max-width: 767px) {
  .hero-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 0 0 0 70px;
    direction: rtl;
  }

  .hero-panel {
    order: 1;
    min-height: 0;
    padding: 54px 24px 46px;
    border-left: 0;
    border-bottom: 4px solid var(--primary-color);
  }

  .hero-panel::before {
    top: 28px;
    right: 24px;
    width: 60px;
    height: 60px;
  }

  .hero-media {
    order: 2;
    min-height: 330px;
    height: 330px;
  }

  .hero-media-caption {
    right: 18px;
    bottom: 18px;
  }

  .hero-kicker {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .hero-wrap-title {
    margin-bottom: 18px;
    font-size: clamp(40px, 11vw, 58px);
  }

  .hero-wrap-description {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.85;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .hero-primary-cta {
    width: 100%;
  }

  .hero-secondary-cta {
    align-self: flex-start;
  }

  .hero-proof-row {
    gap: 8px 0;
    margin-top: 30px;
    line-height: 1.7;
  }

  .hero-proof-row span {
    padding-inline: 9px;
  }

  .hero-location {
    line-height: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-primary-cta,
  .hero-secondary-cta {
    transition: none;
  }
}

/* 9. Home hero — restore the original full-bleed image composition.
   The copy sits over the photograph; there is no separate content block. */
.hero-section {
  display: block;
  min-height: clamp(640px, calc(100vh - 92px), 820px);
  border-radius: 0 0 0 190px;
  background: #ded6cb;
  direction: rtl;
}

.hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  min-height: 0;
  background: #ded6cb;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
}

.hero-media::after {
  background: linear-gradient(270deg,
    rgba(247, 241, 233, .98) 0%,
    rgba(247, 241, 233, .9) 27%,
    rgba(247, 241, 233, .48) 48%,
    rgba(31, 37, 45, .08) 76%,
    rgba(31, 37, 45, .16) 100%);
}

.hero-panel {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(61%, 780px);
  min-width: 0;
  align-items: center;
  padding: clamp(54px, 7vw, 106px) clamp(28px, 6vw, 92px);
  border: 0;
  background: transparent;
  direction: rtl;
}

.hero-panel::before {
  top: clamp(32px, 5vw, 66px);
  right: clamp(26px, 5vw, 72px);
  width: 86px;
  height: 86px;
  border-color: rgba(194, 145, 91, .55);
}

.hero-panel-inner {
  max-width: 640px;
  margin-inline: 0;
}

.hero-kicker {
  margin-bottom: 18px;
  font-size: 14px;
}

.hero-wrap-title {
  max-width: 630px;
  margin-bottom: 20px;
  color: #252c35;
  font-size: clamp(46px, 5.4vw, 76px);
  line-height: 1.12;
  text-shadow: 0 2px 18px rgba(247, 241, 233, .35);
}

.hero-wrap-description {
  max-width: 570px;
  margin-bottom: 28px;
  color: #3f464f;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.85;
}

.hero-proof-row {
  max-width: 570px;
  margin-top: 34px;
  padding-top: 16px;
  border-top-color: rgba(31, 37, 45, .2);
  color: #4e555d;
}

.hero-location {
  color: #62666b;
}

@media screen and (max-width: 991px) {
  .hero-section {
    min-height: 650px;
    border-radius: 0 0 0 120px;
  }

  .hero-panel {
    width: min(68%, 650px);
    padding: 54px 40px;
  }

  .hero-wrap-title {
    font-size: clamp(42px, 5.8vw, 62px);
  }
}

@media screen and (max-width: 767px) {
  .hero-section {
    min-height: 720px;
    border-radius: 0 0 0 70px;
  }

  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(247, 241, 233, .96) 0%,
      rgba(247, 241, 233, .86) 53%,
      rgba(31, 37, 45, .12) 100%);
  }

  .hero-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 720px;
    padding: 76px 24px 48px;
  }

  .hero-panel::before {
    top: 28px;
    right: 24px;
    width: 60px;
    height: 60px;
  }

  .hero-wrap-title {
    font-size: clamp(42px, 12vw, 58px);
  }

  .hero-wrap-description {
    font-size: 16px;
  }

  .hero-proof-row {
    margin-top: 28px;
  }
}

/* The composed desktop header collapses to a compact, touch-friendly menu. */
@media screen and (max-width: 1100px) {
  .top-bar-header-area {
    border-bottom-width: 3px;
  }

  .navbar.w-nav .container {
    min-height: 76px;
    justify-content: space-between;
    padding-inline: 20px;
  }

  .brand.w-nav-brand {
    position: static;
    inset-block: auto;
    padding: 0;
    border-left: 0;
    min-width: 0;
    gap: 8px;
  }

  .brand-name {
    font-size: 22px;
  }

  .brand-mark {
    width: 22px;
    height: 27px;
  }

  .brand-mark::after {
    left: 7px;
    width: 7px;
    height: 14px;
  }

  .header-cta {
    display: none;
  }

  .navbar.w-nav .site-nav-menu {
    display: none;
  }

  .site-nav-toggle.w-nav-button {
    position: relative;
    inset: auto;
    display: flex !important;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-self: center;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    background: var(--secondary-color);
    color: #fff;
  }

  .site-nav-toggle.w-nav-button.w--open {
    background: var(--primary-color);
  }

  [data-nav-menu-open].site-nav-menu.w-nav-menu {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    min-width: 0;
    padding: 12px 20px 20px;
    border-top: 1px solid rgba(27, 35, 47, 0.1);
    background: #fff;
    box-shadow: 0 18px 28px rgba(27, 35, 47, 0.12);
  }

  [data-nav-menu-open].site-nav-menu .nav-link {
    display: flex;
    min-height: 54px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(27, 35, 47, 0.08);
    font-size: 16px;
  }

  [data-nav-menu-open].site-nav-menu .nav-link::after {
    right: 4px;
    left: auto;
    width: 24px;
  }

}

.site-nav-toggle .menu-icon {
  position: relative;
  display: block;
  width: 21px;
  height: 2px;
  background: currentColor;
  color: #fff;
  font-size: 0;
  line-height: 0;
  transition: background-color .2s ease;
}

.site-nav-toggle .menu-icon::before,
.site-nav-toggle .menu-icon::after {
  position: absolute;
  left: 0;
  width: 21px;
  height: 2px;
  background: currentColor;
  content: "";
  transition: top .2s ease, transform .2s ease;
}

.site-nav-toggle .menu-icon::before {
  top: -7px;
}

.site-nav-toggle .menu-icon::after {
  top: 7px;
}

.site-nav-toggle.w--open .menu-icon {
  background: transparent;
}

.site-nav-toggle.w--open .menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-nav-toggle.w--open .menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media screen and (max-width: 479px) {
  .navbar.w-nav .container {
    min-height: 68px;
  }

  .brand-name {
    font-size: 20px;
  }

  .brand-mark {
    width: 19px;
    height: 23px;
  }

  .site-nav-toggle.w-nav-button {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}

/* Keep the hero copy in a deliberate reading order over the single image. */
.hero-media::after {
  background: linear-gradient(270deg,
    rgba(255, 255, 255, .12) 0%,
    rgba(255, 255, 255, .04) 38%,
    transparent 64%,
    rgba(31, 37, 45, .08) 100%);
}

.hero-panel {
  width: min(74%, 1000px);
  padding-inline: clamp(36px, 5vw, 94px);
}

.hero-panel::before {
  display: none;
}

.hero-panel-inner {
  max-width: 850px;
}

.hero-kicker {
  margin-bottom: 24px;
  font-size: 16px;
}

.hero-wrap-title {
  max-width: 100%;
  margin-bottom: 26px;
  font-size: clamp(54px, 5.4vw, 88px);
  letter-spacing: -.025em;
  line-height: 1.36;
  text-wrap: balance;
}

.hero-wrap-title > span {
  display: block;
  color: #252c35;
  white-space: normal;
  text-wrap: balance;
}

.hero-wrap-title em {
  color: var(--primary-color);
  font-style: normal;
}

.hero-wrap-description {
  max-width: 760px;
  margin-bottom: 36px;
  font-size: clamp(19px, 1.45vw, 23px);
  line-height: 1.9;
}

.hero-actions {
  gap: 28px;
}

.hero-primary-cta,
.hero-secondary-cta {
  min-height: 66px;
  gap: 16px;
  font-size: 17px;
}

.hero-primary-cta {
  padding-inline: 26px 18px;
  border-radius: 13px;
}

.hero-action-arrow {
  width: 36px;
  height: 36px;
}

.hero-secondary-cta {
  min-height: 54px;
}

.hero-proof-row {
  max-width: 650px;
  margin-top: 28px;
  padding-top: 14px;
}

.hero-location {
  margin-top: 16px;
}

@media screen and (max-width: 991px) {
  .hero-panel {
    width: min(86%, 900px);
    padding-inline: clamp(28px, 4vw, 40px);
  }

  .hero-wrap-title {
    margin-bottom: 22px;
    font-size: clamp(42px, 5.4vw, 60px);
    line-height: 1.38;
  }
}

@media screen and (max-width: 767px) {
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .26) 0%,
      rgba(255, 255, 255, .1) 55%,
      transparent 100%);
  }

  .hero-panel {
    width: 100%;
    padding-inline: 24px;
  }

  .hero-kicker {
    margin-bottom: 18px;
    font-size: 14px;
  }

  .hero-wrap-title {
    margin-bottom: 22px;
    font-size: clamp(34px, 10vw, 54px);
    line-height: 1.38;
  }

  .hero-wrap-description {
    margin-bottom: 28px;
    font-size: clamp(18px, 4.7vw, 21px);
  }

  .hero-actions {
    gap: 16px;
  }

  .hero-primary-cta,
  .hero-secondary-cta {
    min-height: 60px;
    font-size: 16px;
  }

  .hero-proof-row {
    margin-top: 24px;
  }
}

/* Home services: retain the theme's quiet editorial strip and gold details. */
.service-section {
  padding: 0;
  background: #fff;
}

.service-grid-wrap {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  direction: rtl;
}

.service-item {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px clamp(24px, 3vw, 48px);
  border: 0;
  border-left: 1px solid rgba(37, 44, 53, .12);
  border-radius: 0;
  background: transparent;
  direction: rtl;
  text-align: center;
  box-shadow: none;
  transition: background-color .2s ease;
}

.service-item:last-child {
  border-left: 0;
}

.service-item:hover {
  background: var(--light-background);
}

.service-title {
  min-height: 1.4em;
  margin: 0 0 14px;
  color: var(--secondary-color);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
}

.service-content {
  max-width: 420px;
  min-height: 3.6em;
  margin: 0 auto;
  padding: 0;
  color: #51565d;
  font-size: 18px;
  line-height: 1.75;
}

.service-item .simple-link {
  justify-content: center;
  gap: 4px;
  margin-top: 20px;
  padding-top: 0;
  color: var(--secondary-color);
  text-decoration: none;
}

.service-item .simple-link-text {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 17px;
  font-weight: 600;
}

.service-item .simple-link-icon {
  padding-left: 5px;
  transition: transform .2s ease, opacity .2s ease;
}

.service-item .simple-link:hover {
  color: var(--primary-color);
}

.service-item .simple-link:hover .simple-link-icon {
  transform: translateX(-4px);
}

@media screen and (max-width: 991px) {
  .service-grid-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Left-column cells (even in RTL) close their row — no outer hairline. */
  .service-item:nth-child(even) {
    border-left: 0;
  }

  .service-item:nth-child(n + 3) {
    border-top: 1px solid rgba(37, 44, 53, .12);
  }

  /* Home strip has 3 items: the last one centers alone on a full row. */
  .home-services .service-item:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(37, 44, 53, .12);
  }
}

@media screen and (max-width: 767px) {
  .service-section {
    padding: 0;
  }

  .service-grid-wrap {
    grid-template-columns: 1fr;
  }

  .service-item {
    min-height: 0;
    padding: 34px 24px;
    border-left: 0;
    border-top: 1px solid rgba(37, 44, 53, .12);
  }

  .service-title {
    margin-bottom: 10px;
    font-size: 23px;
  }

  .service-content {
    min-height: 0;
    font-size: 17px;
  }

  .service-item:last-child {
    grid-column: auto;
  }
}

/* Home intro: clearer Egyptian copy, with the template's original open layout. */
.intro-section {
  padding: 96px 0;
}

.intro-grid-wrap {
  grid-column-gap: clamp(36px, 5vw, 76px);
}

.intro-content-wrap {
  max-width: 650px;
  padding-right: clamp(0px, 2vw, 28px);
  direction: rtl;
  text-align: right;
}

.intro-section-title {
  max-width: 590px;
  margin: 0;
  color: var(--secondary-color);
  font-size: clamp(40px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1.28;
}

.intro-section-title span {
  display: block;
}

.intro-content {
  max-width: 600px;
  margin: 0;
  padding: 18px 0 8px;
  color: #51565d;
  font-size: 19px;
  line-height: 1.9;
}

.intro-quick-link-wrap {
  width: fit-content;
  align-items: center;
  gap: 16px;
  margin: 14px 0 20px;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

.intro-quick-link-wrap:hover .call-link {
  color: var(--primary-color);
}

.intro-icon-wrap {
  width: 72px;
  min-width: 72px;
  height: 72px;
  min-height: 72px;
  margin: 0;
  background: var(--light-background);
}

.intro-icon-wrap img {
  width: 34px;
  height: 34px;
}

.intro-call-wrap {
  margin: 0;
}

.intro-call-wrap .call-link {
  display: block;
  color: var(--secondary-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  transition: color .2s ease;
}

.intro-call-wrap p {
  margin: 3px 0 0;
  color: #62666b;
  font-size: 16px;
  line-height: 1.7;
}

.intro-content-wrap > .button {
  min-height: 58px;
  margin: 0;
  padding: 16px 26px 16px 56px;
  background-position: left 22px center;
  border-radius: 16px;
  font-size: 17px;
}

.right-radius-image {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 991px) {
  .intro-content-wrap {
    padding-right: 0;
  }

  .right-radius-image {
    min-height: 440px;
  }
}

@media screen and (max-width: 767px) {
  .intro-section {
    padding: 64px 0;
  }

  .intro-content-wrap {
    padding-bottom: 30px;
  }

  .intro-section-title {
    font-size: clamp(34px, 8.5vw, 42px);
  }

  .intro-content {
    padding-top: 14px;
    font-size: 18px;
  }

  .intro-quick-link-wrap {
    flex-direction: row;
    align-items: center;
    margin: 14px 0 20px;
  }

  .intro-icon-wrap {
    margin: 0;
  }

  .right-radius-image {
    min-height: 360px;
    border-radius: 0 180px 0 72px;
  }
}

/* Home: refine the original client reviews without changing their purpose. */
.testimonial-section {
  padding: 56px 0;
}

.review-content-wrap {
  padding: 62px 54px 68px;
  border-radius: 58px;
}

.review-heading {
  margin: 0 auto 34px;
  text-align: center;
}

.review-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--primary-color);
  font-size: 15px;
  font-weight: 700;
}

.review-heading .section-title {
  margin: 0;
  padding: 0;
  color: var(--secondary-color);
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1.35;
}

.review-grid {
  gap: 20px;
}

.review-item {
  border: 1px solid rgba(207, 160, 112, .16);
  border-radius: 30px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.review-item:hover {
  border-color: rgba(207, 160, 112, .45);
  box-shadow: 0 12px 28px rgba(38, 43, 49, .06);
}

.review-detail {
  min-height: 250px;
  height: 100%;
  padding: 34px 28px 30px;
  border-radius: 30px;
  text-align: right;
}

.review-client-wrap {
  direction: rtl;
}

.review-client-wrap .client-detail {
  padding: 0 16px 0 0;
}

.review-detail .client-name {
  font-size: 23px;
}

.review-detail .client-location {
  font-size: 16px;
}

.review-detail .review-quote {
  margin: 0;
  padding-top: 24px;
  color: #3f454b;
  font-size: 19px;
  line-height: 1.8;
}

.client-brand-strip {
  padding: 25px 0;
  border-top: 1px solid rgba(207, 160, 112, .2);
  border-bottom: 1px solid rgba(207, 160, 112, .2);
  background: #faf8f5;
}

.client-brand-strip .client-gird-wrap {
  align-items: center;
  gap: 18px;
}

.client-brand-strip .client-image-wrap {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-brand-strip .client-image-wrap img {
  width: auto;
  max-width: min(100%, 190px);
  max-height: 66px;
  opacity: .78;
  transition: opacity .2s ease, transform .2s ease;
}

.client-brand-strip .client-image-wrap img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

@media screen and (max-width: 991px) {
  .review-content-wrap {
    padding: 52px 34px 56px;
  }

  .review-detail {
    min-height: 230px;
    padding: 28px 22px;
  }
}

@media screen and (max-width: 767px) {
  .testimonial-section {
    padding: 38px 0;
  }

  .review-content-wrap {
    padding: 40px 22px 28px;
    border-radius: 34px;
  }

  .review-heading {
    margin-bottom: 26px;
  }

  .review-heading .section-title {
    font-size: 30px;
  }

  .review-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .review-detail {
    min-height: 0;
    padding: 24px 22px;
  }

  .review-detail .review-quote {
    padding-top: 18px;
    font-size: 17px;
  }

  .client-brand-strip {
    padding: 15px 0;
  }

  .client-brand-strip .client-gird-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }

  .client-brand-strip .client-image-wrap {
    min-height: 64px;
  }

  .client-brand-strip .client-image-wrap:last-child {
    grid-column: 1 / -1;
  }

  .client-brand-strip .client-image-wrap img {
    max-width: min(100%, 150px);
    max-height: 54px;
  }
}

/* Home project showcase: keep the portfolio editorial and image-led. */
.project-listing-wrap.home-page-projects {
  padding: 72px 0 82px;
}

.home-projects-heading {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.home-projects-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--primary-color);
  font-size: 15px;
  font-weight: 700;
}

.home-projects-heading .section-title {
  margin: 0;
  padding-bottom: 12px;
  font-size: clamp(36px, 3.4vw, 46px);
  line-height: 1.3;
}

.home-projects-heading .section-title-content {
  max-width: 680px;
  margin: 0 auto;
  color: #565b61;
  font-size: 18px;
  line-height: 1.8;
}

.project-items.home-page-projects {
  padding-top: 40px;
}

.project-items.home-page-projects .w-dyn-items.w-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 30px;
  margin: 0;
}

.project-items.home-page-projects .w-dyn-item.w-col.w-col-6 {
  width: auto;
  max-width: none;
  padding: 0;
}

.project-items.home-page-projects .w-dyn-item:first-child,
.project-items.home-page-projects .w-dyn-item:last-child {
  grid-column: 1 / -1;
}

.project-items.home-page-projects .project-item {
  margin: 0;
}

.project-items.home-page-projects .project-link-block {
  display: block;
  overflow: hidden;
  border-radius: 0 76px 0 0;
  background: var(--light-background);
}

.project-items.home-page-projects .project-listing-image {
  display: block;
  width: 100%;
  aspect-ratio: 1.48;
  object-fit: cover;
  transition: transform .45s ease;
}

.project-items.home-page-projects .w-dyn-item:first-child .project-listing-image,
.project-items.home-page-projects .w-dyn-item:last-child .project-listing-image {
  aspect-ratio: 2.15;
}

.project-items.home-page-projects .project-link-block:hover .project-listing-image {
  transform: scale(1.025);
}

.project-items.home-page-projects .project-listing-details {
  align-items: center;
  padding-top: 18px;
  direction: rtl;
}

.project-items.home-page-projects .project-title-wrap {
  min-width: 0;
  text-align: right;
}

.project-items.home-page-projects .project-title {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
}

.project-items.home-page-projects .project-category-link {
  display: inline-block;
  margin-top: 5px;
  color: #8c725d;
  font-size: 15px;
}

.project-items.home-page-projects .project-single-link {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  background-color: #f4efe9;
}

.project-items.home-page-projects .project-single-link img {
  width: 18px;
  height: 18px;
}

.home-projects-more {
  margin-top: 38px;
  text-align: center;
}

.home-projects-more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--primary-color);
  color: var(--secondary-color);
  font-size: 17px;
  font-weight: 700;
}

.home-projects-more a span {
  color: var(--primary-color);
  font-size: 22px;
  transition: transform .2s ease;
}

.home-projects-more a:hover span {
  transform: translateX(-4px);
}

/* Shared page-CTA banner: the home rail's dark closing banner reused on
   inner pages (services / projects) under the .page-call-* aliases. */
.home-call-to-action,
.page-call-to-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 62px clamp(34px, 6vw, 88px);
  border: 1px solid rgba(207, 160, 112, .24);
  border-radius: 54px;
  direction: rtl;
  text-align: right;
}

.home-call-copy,
.page-call-copy {
  max-width: 760px;
}

.home-call-eyebrow,
.page-call-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 700;
}

.home-call-eyebrow::before,
.page-call-eyebrow::before {
  width: 26px;
  height: 2px;
  background: var(--primary-color);
  content: "";
}

.home-call-to-action .call-to-action-title,
.page-call-to-action .call-to-action-title {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.35;
}

.home-call-to-action .call-to-action-content,
.page-call-to-action .call-to-action-content {
  max-width: 650px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 19px;
  line-height: 1.8;
}

.home-call-to-action .call-to-action-button,
.page-call-to-action .call-to-action-button {
  flex: 0 0 auto;
  margin: 0;
  padding: 18px 58px 18px 26px;
  border-radius: 15px;
  background-position: 88% center;
  font-size: 17px;
  white-space: nowrap;
}

.home-counter-section {
  margin: 28px 0 20px;
  background: #f4efea;
}

.home-counter-heading {
  padding-top: 36px;
  text-align: center;
}

.home-counter-heading span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #8c725d;
  font-size: 15px;
  font-weight: 700;
}

.home-counter-heading span::before,
.home-counter-heading span::after {
  width: 22px;
  height: 1px;
  background: var(--primary-color);
  content: "";
}

.home-counter-section .counter-grid-wrap {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 22px 0 52px;
  direction: rtl;
}

.home-counter-section .counter-item {
  display: flex;
  min-height: 176px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 0;
  border-left: 1px solid rgba(207, 160, 112, .58);
  font-family: inherit;
}

.home-counter-section .counter-item:last-child {
  border-left: 0;
}

.home-counter-section .count-number {
  margin: 0 0 6px;
  color: var(--secondary-color);
  font-family: Jost, sans-serif;
  font-size: clamp(60px, 6vw, 78px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.home-counter-section .counter-title {
  margin: 0;
  color: #50565d;
  font-size: 19px;
  line-height: 1.6;
}

.site-footer {
  padding-top: 54px;
  background: #fff;
}

.site-footer .footer-grid-wrap {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-bottom: 50px;
  direction: rtl;
}

.site-footer .footer-widget-wrap {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 12px 26px;
  border-left: 1px solid #e7e3df;
  text-align: center;
}

.site-footer .footer-widget-wrap:last-child {
  border-left: 0;
}

.footer-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  direction: rtl;
  text-decoration: none;
}

.footer-brand-name {
  color: var(--secondary-color);
  font-family: 'Cairo', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.3;
}

.footer-brand-mark {
  position: relative;
  width: 32px;
  height: 39px;
  flex: 0 0 auto;
  border-radius: 18px 18px 0 0;
  background: var(--primary-color);
}

.footer-brand-mark::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 9px;
  height: 20px;
  border-radius: 9px 9px 0 0;
  background: #f4efea;
  content: "";
}

.site-footer .footer-intro-content {
  max-width: 320px;
  margin: 0;
  color: #565b61;
  font-size: 16px;
  line-height: 1.8;
}

.site-footer .footer-widget-title {
  margin: 0 0 18px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(207, 160, 112, .58);
  color: var(--secondary-color);
  font-size: 23px;
  line-height: 1.5;
}

.site-footer .footer-menu-links-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.site-footer .footer-link {
  margin: 0;
  color: #454b52;
  font-size: 20px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.site-footer .footer-menu-links-wrap .footer-link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.site-footer .footer-menu-links-wrap .footer-link:hover,
.site-footer .footer-menu-links-wrap .footer-link:focus-visible {
  color: var(--secondary-color);
  text-decoration-color: var(--primary-color);
}

.site-footer .footer-address {
  max-width: 280px;
  margin: 0 0 16px;
  color: #565b61;
  font-size: 17px;
  line-height: 1.75;
}

.site-footer .footer-contact-email {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 17px;
  text-align: center;
}

.footer-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--secondary-color);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-contact-cta span {
  color: var(--primary-color);
  font-size: 22px;
  line-height: 1;
}

.footer-contact-cta:hover {
  color: var(--primary-color);
}

.site-footer .copyright-wrap {
  padding: 28px 20px;
  border-top-color: #e5e5e5;
  background: #fff;
}

.site-footer .copyright-content {
  color: #62666b;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .project-listing-wrap.home-page-projects {
    padding: 54px 0 62px;
  }

  .home-projects-heading .section-title {
    font-size: 34px;
  }

  .home-projects-heading .section-title-content {
    font-size: 16px;
  }

  .project-items.home-page-projects {
    padding-top: 28px;
  }

  .project-items.home-page-projects .w-dyn-items.w-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .project-items.home-page-projects .project-link-block {
    border-top-right-radius: 54px;
  }

  .project-items.home-page-projects .project-listing-details {
    flex-direction: row;
    align-items: center;
  }

  .project-items.home-page-projects .project-title {
    font-size: 21px;
  }

  .project-items.home-page-projects .project-single-link {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .home-call-to-action,
  .page-call-to-action {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 38px 26px;
    border-radius: 34px;
  }

  .home-call-to-action .call-to-action-title,
  .page-call-to-action .call-to-action-title {
    font-size: 32px;
  }

  .home-call-to-action .call-to-action-content,
  .page-call-to-action .call-to-action-content {
    font-size: 17px;
  }

  .home-counter-heading {
    padding-top: 28px;
  }

  .home-counter-section .counter-grid-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px 0 30px;
  }

  .home-counter-section .counter-item {
    min-height: 138px;
    padding: 10px 12px;
  }

  .home-counter-section .counter-item:nth-child(odd) {
    border-left: 1px solid rgba(207, 160, 112, .58);
  }

  .home-counter-section .counter-item:nth-child(even) {
    border-left: 0;
  }

  .home-counter-section .counter-item:nth-child(n + 3) {
    border-top: 1px solid rgba(207, 160, 112, .35);
  }

  .home-counter-section .count-number {
    font-size: 56px;
  }

  .home-counter-section .counter-title {
    font-size: 16px;
  }

  .site-footer {
    padding-top: 40px;
  }

  .site-footer .footer-grid-wrap {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 28px;
  }

  .site-footer .footer-widget-wrap {
    margin: 0;
    padding: 22px 10px;
    border-bottom: 1px solid #e7e3df;
    border-left: 0;
  }

  .site-footer .footer-widget-wrap:last-child {
    padding-bottom: 22px;
    border-bottom: 0;
  }

  .footer-brand-name {
    font-size: 26px;
  }
}

/* Home page responsive pass: preserve the editorial desktop composition while
   giving tablet cards room to breathe and tightening the long phone scroll. */
@media screen and (max-width: 1100px) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-grid .review-item:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - 10px);
    justify-self: center;
  }

  .service-item .simple-link,
  .project-items.home-page-projects .project-title-link,
  .home-projects-more a,
  .site-footer .footer-brand-lockup,
  .site-footer .footer-menu-links-wrap .footer-link,
  .site-footer .footer-contact-email,
  .site-footer .footer-contact-cta {
    min-height: 44px;
  }

  .blog-wrap.home-page-blog .blog-item > a.w-inline-block {
    display: flex;
    min-height: 44px;
    align-items: center;
  }

  .site-footer .footer-menu-links-wrap .footer-link {
    display: flex;
    align-items: center;
  }

  .site-footer .footer-contact-email,
  .site-footer .footer-contact-cta {
    display: inline-flex;
    align-items: center;
  }
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
  .hero-media::after {
    background: linear-gradient(270deg,
      rgba(247, 241, 233, .94) 0%,
      rgba(247, 241, 233, .84) 34%,
      rgba(247, 241, 233, .42) 61%,
      rgba(31, 37, 45, .06) 100%);
  }
}

@media screen and (max-width: 991px) {
  .client-brand-strip {
    padding: 18px 0;
  }

  .client-brand-strip .client-gird-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .client-brand-strip .client-image-wrap {
    min-height: 64px;
  }

  .client-brand-strip .client-image-wrap:last-child {
    grid-column: auto;
  }

  .service-item {
    min-height: 248px;
    padding: 30px 22px;
  }

  .intro-grid-wrap {
    grid-row-gap: 30px;
  }

  .right-radius-image {
    height: clamp(400px, 58vw, 520px);
    min-height: 0;
  }

  .home-counter-section .counter-grid-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-counter-section .counter-item:nth-child(odd) {
    border-left: 1px solid rgba(207, 160, 112, .58);
  }

  .home-counter-section .counter-item:nth-child(even) {
    border-left: 0;
  }

  .home-counter-section .counter-item:nth-child(n + 3) {
    border-top: 1px solid rgba(207, 160, 112, .35);
  }

  .blog-wrap.home-page-blog .w-dyn-items.w-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
  }

  .blog-wrap.home-page-blog .blog-collection-item.w-dyn-item.w-col {
    width: auto;
    max-width: none;
    min-width: 0;
    float: none;
    padding: 0;
  }

  .blog-wrap.home-page-blog .blog-collection-item.w-dyn-item.w-col:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .blog-wrap.home-page-blog .blog-collection-item.w-dyn-item.w-col:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .blog-wrap.home-page-blog .blog-collection-item.w-dyn-item.w-col:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(50% - 11px);
    justify-self: center;
  }

  .home-call-to-action,
  .page-call-to-action {
    gap: 24px;
    padding-inline: 32px;
  }

  .home-call-copy,
  .page-call-copy {
    min-width: 0;
    flex: 1 1 auto;
  }

  .home-call-to-action .call-to-action-button,
  .page-call-to-action .call-to-action-button {
    padding-inline: 48px 20px;
  }
}

@media screen and (max-width: 767px) {
  .hero-section,
  .hero-panel {
    min-height: clamp(600px, calc(100svh - 68px), 680px);
  }

  .service-item {
    min-height: 0;
    padding: 25px 22px;
  }

  .intro-section {
    padding: 48px 0;
  }

  .intro-content-wrap {
    padding-bottom: 22px;
  }

  .right-radius-image {
    height: clamp(280px, 82vw, 350px);
  }

  .review-content-wrap {
    padding: 32px 16px 24px;
    border-radius: 30px;
  }

  .review-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .review-grid .review-item:nth-child(3) {
    grid-column: auto;
    width: auto;
  }

  .review-detail {
    padding: 22px 18px;
  }

  .client-brand-strip {
    padding: 14px 0;
  }

  .client-brand-strip .client-image-wrap {
    min-height: 56px;
  }

  .client-brand-strip .client-image-wrap img {
    max-width: min(100%, 125px);
    max-height: 48px;
  }

  .client-brand-strip .client-image-wrap:last-child {
    grid-column: auto;
  }

  .blog-section {
    padding-top: 62px;
    padding-bottom: 24px;
  }

  .blog-wrap.home-page-blog {
    padding-top: 30px;
  }

  .blog-wrap.home-page-blog .w-dyn-items.w-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .blog-wrap.home-page-blog .blog-collection-item.w-dyn-item.w-col,
  .blog-wrap.home-page-blog .blog-collection-item.w-dyn-item.w-col:nth-child(1),
  .blog-wrap.home-page-blog .blog-collection-item.w-dyn-item.w-col:nth-child(2),
  .blog-wrap.home-page-blog .blog-collection-item.w-dyn-item.w-col:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .blog-wrap.home-page-blog .blog-item {
    margin-bottom: 22px;
    padding: 14px 14px 22px;
    border-radius: 36px;
  }

  .blog-wrap.home-page-blog .blog-listing-image {
    width: 100%;
    aspect-ratio: 1.8;
    object-fit: cover;
    border-radius: 26px 26px 0 0;
  }

  .blog-wrap.home-page-blog .blog-title {
    margin: 9px 0 0;
    font-size: 21px;
  }

  .blog-wrap.home-page-blog .blog-single-link {
    width: 44px;
    height: 44px;
  }

  .call-to-action-section.home-call-to-action-section {
    padding: 36px 0;
  }

  .home-call-to-action,
  .page-call-to-action {
    align-items: stretch;
    gap: 18px;
    padding: 28px 22px;
    border-radius: 30px;
  }

  .home-call-to-action .call-to-action-title,
  .page-call-to-action .call-to-action-title {
    font-size: clamp(28px, 8vw, 32px);
  }

  .home-call-to-action .call-to-action-button,
  .page-call-to-action .call-to-action-button {
    width: 100%;
    min-height: 58px;
    justify-content: center;
    padding-inline: 48px 18px;
    white-space: normal;
  }
}

/* =============================================================
   10. Page heroes — shared foundation.
   Every inner page keeps the same voice (gold kicker, two-line
   title with a gold second line, shared CTA pair, breadcrumb on
   top of the copy stack) while the composition changes per page,
   so no two heroes read as copies of each other.
   ============================================================= */
.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero .hero-actions {
  margin-top: 2px;
}

/* Kicker — small gold label with a leading dash. */
.ph-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 700;
}

.ph-kicker::before {
  flex: 0 0 auto;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-color);
  content: "";
}

/* Two-line display title; the last line carries the gold accent. */
.ph-title {
  margin: 0 0 18px;
  color: var(--secondary-color);
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.3;
}

.ph-title span {
  display: block;
}

.ph-title span:last-child {
  color: var(--primary-color);
}

.ph-lede {
  max-width: 54ch;
  margin: 0 0 28px;
  color: #62666b;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 2;
}

/* Breadcrumb now leads the copy stack instead of dangling under it. */
.hero-crumb {
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  margin: 0 0 26px;
  color: #62666b;
  font-size: 13px;
  font-weight: 700;
}

.hero-crumb .breadcrumb-link {
  color: #62666b;
}

.hero-crumb .breadcrumb-link:hover {
  color: var(--primary-color);
}

.hero-crumb .breadcrumb-separator {
  color: var(--primary-color);
}

/* Subtle eight-point star lattice — the shared Egyptian motif.
   Used as a low-opacity wash behind light heroes. */
.ph-star-wash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23cda274' stroke-opacity='.55'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* -------------------------------------------------------------
   10a. Services hero — «فيلم الشغل».
   Compact copy row up top, then a full-width filmstrip of four
   real work photos (gypsum, paint, putty, tiles) with staggered
   offsets and pill captions — the services page leads with the
   actual trades, not a staged interior.
   ------------------------------------------------------------- */
.services-hero {
  padding: clamp(44px, 6.5vh, 76px) 0 0;
  background: #f7f1e9;
}

.services-hero::before {
  position: absolute;
  inset: 0 auto 30% 0;
  z-index: 0;
  width: 58%;
  height: 70%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23cda274' stroke-opacity='.4'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  opacity: .35;
  mask-image: radial-gradient(90% 90% at 22% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 90% at 22% 30%, #000 30%, transparent 78%);
  content: "";
}

.services-hero .container.w-container {
  position: relative;
  z-index: 1;
}

.services-hero-copy {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.services-hero .hero-crumb {
  justify-content: center;
}

.services-hero .ph-kicker {
  justify-content: center;
}

.services-hero .ph-kicker::after {
  flex: 0 0 auto;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-color);
  content: "";
}

.services-hero .ph-lede {
  max-width: 62ch;
  margin-inline: auto;
}

.services-hero .hero-actions {
  justify-content: center;
}

.services-hero-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(34px, 5vh, 56px);
  padding-top: clamp(24px, 3.5vh, 36px);
  border-top: 2px dashed rgba(205, 162, 116, .55);
}

.services-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 18px 38px rgba(41, 47, 54, .14);
}

.services-tile:nth-child(2) {
  margin-top: 26px;
}

.services-tile:nth-child(4) {
  margin-top: 26px;
}

.services-tile img {
  display: block;
  width: 100%;
  height: clamp(170px, 20vw, 250px);
  object-fit: cover;
}

.services-tile figcaption {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(41, 47, 54, .86);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.services-tile:nth-child(3) figcaption,
.services-tile:nth-child(1) figcaption {
  background: var(--primary-color);
}

@media (max-width: 991px) {
  .services-hero-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-tile:nth-child(2),
  .services-tile:nth-child(4) {
    margin-top: 0;
  }

  .services-tile:nth-child(3),
  .services-tile:nth-child(4) {
    margin-top: 14px;
  }
}

@media (max-width: 479px) {
  /* keep the stacked CTAs centered (the shared home-hero rule pins the
     secondary link to the start edge). */
  .services-hero .hero-secondary-cta {
    align-self: center;
  }

  .services-hero-strip {
    grid-template-columns: 1fr;
  }

  .services-tile {
    border-radius: 12px;
    margin-top: 0 !important;
  }

  .services-tile img {
    height: 150px;
  }
}

/* =============================================================
   11. Process section — كيف نعمل upgrade.
   Same idea as the original (numbered steps, alternating image rows)
   refined: outlined gold step numbers, offset gold blocks behind the
   signature-shaped photos, mirrored radii per row, Egyptian copy.
   ============================================================= */
.process-section {
  padding-top: 60px;
  padding-bottom: 50px;
}

.process-upgrade {
  padding: clamp(52px, 6vw, 88px) clamp(26px, 5vw, 88px);
  border-radius: clamp(28px, 4vw, 50px);
}

.process-head {
  max-width: 660px;
  margin: 0 auto clamp(42px, 5vw, 72px);
  text-align: center;
}

.process-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.process-kicker::before,
.process-kicker::after {
  width: 26px;
  height: 3px;
  background: var(--primary-color);
  content: "";
}

.process-title {
  margin: 14px 0 12px;
  color: var(--secondary-color);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.3;
}

.process-sub {
  margin: 0;
  color: #5f646b;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.85;
}

.process-upgrade .process-steps {
  display: grid;
  gap: clamp(46px, 5vw, 76px);
  padding-top: 0;
}

.process-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.5vw, 70px);
  align-items: center;
}

.process-step:nth-child(even) .process-step-media {
  order: 2;
}

.process-step:nth-child(even) .process-step-body {
  order: 1;
}

.process-step-media {
  position: relative;
  min-width: 0;
}

.process-step-media::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(205, 162, 116, .22);
  border-radius: 24px 120px 230px 24px;
  content: "";
  transform: translate(-14px, 14px);
  transition: transform .3s ease;
}

.process-step-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(250px, 26vw, 350px);
  border-radius: 24px 130px 24px 240px;
  box-shadow: 0 24px 48px rgba(31, 37, 45, .14);
  object-fit: cover;
  transition: transform .3s ease;
}

.process-step:hover .process-step-media img {
  transform: translateY(-6px);
}

.process-step:hover .process-step-media::before {
  transform: translate(-14px, 20px);
}

.process-step:nth-child(even) .process-step-media::before {
  border-radius: 120px 24px 24px 230px;
  transform: translate(14px, 14px);
}

.process-step:nth-child(even) .process-step-media img {
  border-radius: 130px 24px 240px 24px;
}

.process-step:nth-child(even):hover .process-step-media::before {
  transform: translate(14px, 20px);
}

.process-step-body {
  min-width: 0;
}

.process-step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.process-step-icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(194, 145, 91, .5);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 18px rgba(31, 37, 45, .08);
}

.process-step-icon img {
  width: 28px;
  height: 28px;
}

.process-step-num {
  color: rgba(194, 145, 91, .25);
  -webkit-text-stroke: 2.5px rgba(194, 145, 91, .55);
  font-size: clamp(64px, 6vw, 96px);
  font-weight: 800;
  line-height: 1;
}

.process-step-heading {
  margin: 0 0 12px;
  color: var(--secondary-color);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
}

.process-step-text {
  margin: 0;
  color: #5f646b;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.95;
}

@media screen and (max-width: 991px) {
  .process-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .process-step .process-step-media,
  .process-step:nth-child(even) .process-step-media {
    order: 1;
  }

  .process-step .process-step-body,
  .process-step:nth-child(even) .process-step-body {
    order: 2;
  }

  .process-step-media img {
    height: clamp(240px, 45vw, 340px);
  }

  .process-step-meta {
    justify-content: flex-start;
    gap: 22px;
  }
}

@media screen and (max-width: 767px) {
  .process-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .process-upgrade {
    padding: 40px 22px 48px;
  }

  .process-step-media img {
    height: clamp(210px, 58vw, 280px);
    border-radius: 20px 80px 20px 120px;
  }

  .process-step:nth-child(even) .process-step-media img {
    border-radius: 80px 20px 120px 20px;
  }

  .process-step-media::before {
    border-radius: 16px 70px 110px 16px;
    transform: translate(-8px, 10px);
  }

  .process-step:nth-child(even) .process-step-media::before {
    border-radius: 70px 16px 16px 110px;
    transform: translate(8px, 10px);
  }

  .process-step:hover .process-step-media::before {
    transform: translate(-8px, 10px);
  }

  .process-step:nth-child(even):hover .process-step-media::before {
    transform: translate(8px, 10px);
  }

  .process-step-num {
    font-size: 56px;
    -webkit-text-stroke: 2px rgba(194, 145, 91, .55);
  }
}

/* -------------------------------------------------------------
   12. Projects hero — «شقة الشغل» full-bleed dark showcase.
   The only photo-backdrop hero on the site: a real finished
   living room edge-to-edge, darkened with a deep gradient so the
   white copy sits on it bottom-start. Reads like a cover slide
   for the gallery that follows.
   ------------------------------------------------------------- */
.projects-hero {
  display: flex;
  align-items: flex-end;
  min-height: clamp(540px, 82vh, 720px);
  background: #23272c;
}

@supports (height: 100svh) {
  .projects-hero {
    min-height: clamp(520px, 78svh, 700px);
  }
}

.projects-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(24, 27, 32, .88) 0%, rgba(24, 27, 32, .38) 46%, rgba(24, 27, 32, .18) 100%),
    linear-gradient(-90deg, rgba(24, 27, 32, .55) 0%, rgba(24, 27, 32, 0) 55%);
  content: "";
}

.projects-hero .container.w-container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(40px, 7vh, 72px);
}

.projects-hero-copy {
  max-width: 640px;
  color: #fff;
}

/* On the dark backdrop the crumb and kicker switch to glass/gold. */
.projects-hero .hero-crumb {
  display: inline-flex;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .82);
}

.projects-hero .breadcrumb-link {
  color: rgba(255, 255, 255, .82);
}

.projects-hero .breadcrumb-link:hover {
  color: var(--primary-color);
}

.projects-hero .ph-title {
  color: #fff;
}

.projects-hero .ph-lede {
  color: rgba(255, 255, 255, .8);
}

/* The shared dark CTA disappears on the photo — flip it to gold. */
.projects-hero .hero-primary-cta {
  background: var(--primary-color);
  color: #23272c;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
}

.projects-hero .hero-primary-cta:hover,
.projects-hero .hero-primary-cta:focus-visible {
  background: #fff;
  color: #23272c;
}

.projects-hero .hero-action-arrow {
  border-color: rgba(35, 39, 44, .4);
}

.projects-hero .hero-secondary-cta {
  color: #fff;
}

.projects-hero .hero-secondary-cta span {
  color: var(--primary-color);
}

.projects-hero .hero-secondary-cta:hover,
.projects-hero .hero-secondary-cta:focus-visible {
  color: var(--primary-color);
}

@media (max-width: 767px) {
  .projects-hero .container.w-container {
    padding-bottom: 44px;
  }

  .projects-hero::after {
    background: linear-gradient(0deg, rgba(24, 27, 32, .92) 0%, rgba(24, 27, 32, .5) 60%, rgba(24, 27, 32, .3) 100%);
  }
}

/* =============================================================
   12b. Projects proof strip — the hero's stats pulled out into
   their own hairline band between the hero and the gallery.
   ============================================================= */
.projects-proof {
  background: #fff;
  border-top: 1px solid rgba(194, 145, 91, .18);
  border-bottom: 1px solid rgba(194, 145, 91, .18);
  padding: 34px 0;
}

.projects-proof-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.projects-proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-inline: clamp(28px, 4.5vw, 72px);
}

.projects-proof-stat + .projects-proof-stat {
  border-inline-start: 1px solid rgba(194, 145, 91, .35);
}

.projects-proof-stat strong {
  color: var(--primary-color);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

.projects-proof-stat span {
  color: #6d6862;
  font-size: 14px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .projects-proof {
    padding: 26px 0;
  }

  .projects-proof-row {
    flex-direction: column;
    align-items: stretch;
  }

  .projects-proof-stat {
    padding-inline: 0;
    text-align: center;
  }

  .projects-proof-stat + .projects-proof-stat {
    margin-top: 18px;
    padding-top: 18px;
    border-inline-start: none;
    border-top: 1px solid rgba(194, 145, 91, .3);
  }

  .projects-proof-stat strong {
    font-size: 25px;
  }
}

/* =============================================================
   13. Projects gallery — «حائط الشغل» listing cards.
   Same card language as the home rail (arch-radius cover, hover
   zoom, gold arrow chip) lifted onto the public gallery, with the
   per-card info cut to a single meta line and the featured pin
   moved onto the photo as a gold ribbon.
   ============================================================= */
.projects-gallery {
  padding: 72px 0 82px;
}

.projects-gallery .w-dyn-items.w-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 32px;
  margin: 0;
}

/* The Webflow clearfix pseudos would otherwise become phantom grid
   items and push every other card one cell across (the home rail
   masks this with its full-width first/last spans). */
.projects-gallery .w-dyn-items.w-row::before,
.projects-gallery .w-dyn-items.w-row::after {
  content: none;
}

.projects-gallery .w-dyn-item.w-col.w-col-6 {
  width: auto;
  max-width: none;
  padding: 0;
}

.projects-gallery .project-item {
  margin: 0;
}

.projects-gallery .project-link-block {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0 76px 0 0;
  background: var(--light-background);
  box-shadow: 0 18px 40px rgba(31, 37, 45, .08);
  transition: box-shadow .3s ease;
}

.projects-gallery .project-link-block:hover {
  box-shadow: 0 26px 54px rgba(31, 37, 45, .14);
}

.projects-gallery .project-item-flag {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 1;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 10px 22px rgba(31, 37, 45, .18);
}

.projects-gallery .project-listing-image {
  display: block;
  width: 100%;
  aspect-ratio: 1.2;
  object-fit: cover;
  transition: transform .45s ease;
}

.projects-gallery .project-link-block:hover .project-listing-image {
  transform: scale(1.03);
}

.projects-gallery .project-listing-details {
  align-items: center;
  padding-top: 18px;
  direction: rtl;
}

.projects-gallery .project-title-wrap {
  min-width: 0;
  text-align: right;
}

.projects-gallery .project-title {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
}

.projects-gallery .project-item-meta {
  display: inline-block;
  margin-top: 6px;
  color: #8c725d;
  font-size: 15px;
  font-weight: 600;
}

.projects-gallery .project-single-link {
  width: 54px;
  height: 54px;
  min-width: 54px;
  background-color: #f4efe9;
  transition: background-color .25s ease;
}

.projects-gallery .project-single-link img {
  width: 18px;
  height: 18px;
  transition: filter .25s ease;
}

.projects-gallery .project-item:hover .project-single-link {
  background-color: var(--primary-color);
}

.projects-gallery .project-item:hover .project-single-link img {
  filter: brightness(0) invert(1);
}

.projects-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
}

.projects-pagination-label {
  color: #8a857f;
  font-size: 15px;
  font-weight: 600;
}

.projects-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 28px;
  border: 1.5px solid rgba(194, 145, 91, .5);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--secondary-color);
  font-size: 15px;
  font-weight: 700;
  transition: background-color .2s ease, color .2s ease;
}

.projects-pagination-btn:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.projects-empty {
  background: #fffdf8;
  border: 1.5px dashed rgba(194, 145, 91, .45);
  border-radius: 24px;
  padding: 64px 28px;
  text-align: center;
  color: #6d6862;
  font-size: 17px;
}

.projects-empty p {
  margin: 0;
}

.projects-empty-star {
  display: block;
  margin-bottom: 12px;
  color: var(--primary-color);
  font-size: 30px;
}

@media screen and (max-width: 1100px) {
  .projects-gallery .project-title-link {
    min-height: 44px;
  }
}

@media screen and (max-width: 991px) {
  .projects-gallery .project-title {
    font-size: 23px;
  }

  .projects-gallery .project-link-block {
    border-radius: 0 60px 0 0;
  }
}

@media screen and (max-width: 767px) {
  .projects-gallery {
    padding: 54px 0 62px;
  }

  .projects-gallery .w-dyn-items.w-row {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .projects-gallery .project-link-block {
    border-radius: 0 54px 0 0;
  }

  .projects-gallery .project-title {
    font-size: 21px;
  }

  .projects-gallery .project-item-meta {
    font-size: 14px;
  }

  .projects-gallery .project-single-link {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }

  .projects-gallery .project-item-flag {
    top: 12px;
    inset-inline-end: 12px;
    padding: 6px 12px;
    font-size: 11.5px;
  }
}

/* -------------------------------------------------------------
   14. About hero — «بصمتنا» identity hero.
   Editorial split: copy with a giant outlined «بصمتنا» ghost word
   and a stat-chips row, beside one tall Egyptian-arch photo
   (mashrabiya interior) with a white-framed work photo inset.
   ------------------------------------------------------------- */
.about-hero {
  background: #f7f1e9;
}

.about-hero::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 46%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23cda274' stroke-opacity='.4'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  opacity: .3;
  mask-image: radial-gradient(100% 100% at 0% 100%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 100% at 0% 100%, #000 20%, transparent 75%);
  content: "";
}

.about-hero .container.w-container {
  position: relative;
  z-index: 1;
  padding-top: clamp(44px, 6.5vh, 80px);
  padding-bottom: clamp(44px, 6.5vh, 80px);
}

/* Grid lives on a wrapper, not on .w-container itself — the Webflow
   clearfix pseudo-elements would otherwise become stray grid items. */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.about-hero-copy {
  position: relative;
}

.about-hero-ghost {
  position: absolute;
  top: -0.42em;
  inset-inline-end: -0.08em;
  z-index: 0;
  color: transparent;
  font-size: clamp(88px, 10.5vw, 168px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  -webkit-text-stroke: 1.5px rgba(205, 162, 116, .5);
  pointer-events: none;
  user-select: none;
}

.about-hero-copy > * {
  position: relative;
  z-index: 1;
}

.about-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.about-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid rgba(205, 162, 116, .55);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--secondary-color);
  font-size: 13px;
  font-weight: 700;
}

.about-chip b {
  color: var(--primary-color);
  font-size: 15px;
}

.about-hero-media {
  position: relative;
  min-height: 480px;
}

.about-hero-photo {
  display: block;
  width: min(440px, 88%);
  margin-inline-start: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 999px 999px 26px 26px;
  box-shadow: 0 34px 64px rgba(41, 47, 54, .2);
}

.about-hero-tag {
  position: absolute;
  top: 30px;
  inset-inline-start: 6%;
  z-index: 2;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(194, 145, 91, .4);
}

.about-hero-inset {
  position: absolute;
  bottom: 4%;
  inset-inline-start: 0;
  z-index: 2;
  width: min(250px, 56%);
  margin: 0;
  padding: 9px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(41, 47, 54, .22);
  transform: rotate(-2.2deg);
}

.about-hero-inset img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 991px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .about-hero-media {
    min-height: 0;
  }

  .about-hero-photo {
    margin-inline: auto;
  }

  .about-hero-tag {
    inset-inline-start: 12%;
  }

  .about-hero-inset {
    inset-inline-start: 6%;
  }
}

@media (max-width: 479px) {
  .about-hero-ghost {
    top: -0.2em;
    font-size: 76px;
    -webkit-text-stroke: 1px rgba(205, 162, 116, .5);
  }

  .about-hero-inset {
    width: 56%;
  }
}

/* =============================================================
   15. About page — story rows.
   The rows reuse the process-section grammar (§11): arch photos
   sitting on offset gold blocks, mirrored on the second row.
   ============================================================= */
.about-row-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.about-row-kicker span {
  width: 26px;
  height: 3px;
  background: var(--primary-color);
}

.about-figure {
  position: relative;
  margin: 0;
  min-width: 0;
}

.about-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(205, 162, 116, .22);
  border-radius: 24px 120px 230px 24px;
  transform: translate(-14px, 14px);
  transition: transform .3s ease;
}

.about-row-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(280px, 30vw, 400px);
  object-fit: cover;
  border-radius: 24px 130px 24px 240px;
  box-shadow: 0 24px 48px rgba(31, 37, 45, .14);
  transition: transform .3s ease;
}

.about-figure:hover .about-row-image {
  transform: translateY(-6px);
}

.about-figure:hover::before {
  transform: translate(-14px, 20px);
}

.about-figure-alt::before {
  border-radius: 120px 24px 24px 230px;
  transform: translate(14px, 14px);
}

.about-figure-alt .about-row-image {
  border-radius: 130px 24px 240px 24px;
}

.about-figure-alt:hover::before {
  transform: translate(14px, 20px);
}

@media screen and (max-width: 767px) {
  .about-row-image {
    height: 260px;
    border-radius: 18px 54px 18px 110px;
  }

  .about-figure::before {
    border-radius: 18px 50px 106px 18px;
    transform: translate(-10px, 12px);
  }

  .about-figure-alt::before {
    border-radius: 50px 18px 18px 106px;
    transform: translate(10px, 12px);
  }

  .about-figure-alt .about-row-image {
    border-radius: 54px 18px 110px 18px;
  }
}

/* =============================================================
   15.1 About page — «نبذة / رسالة / رؤية» message cards.
   Three data-driven messages (Overview / Mission / Vision) that
   sit right under the hero. Background, icon tile, title and long
   body copy follow the same editorial grammar as the story rows.
   ============================================================= */
.about-messages-section {
  padding-top: 40px;
  padding-bottom: 20px;
}

.about-messages-eyebrow {
  margin: 0 0 6px;
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.about-messages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}

.about-message-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 34px 40px;
  border: 1px solid rgba(205, 162, 116, .35);
  border-radius: 28px;
  background: var(--light-background);
  transition: transform .25s ease, box-shadow .25s ease;
}

.about-message-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 46px rgba(41, 47, 54, .12);
}

.about-message-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 14px 26px rgba(194, 145, 91, .35);
}

.about-message-icon svg {
  width: 26px;
  height: 26px;
}

.about-message-title {
  margin: 0;
  color: var(--secondary-color);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
}

.about-message-text {
  margin: 0;
  color: #565049;
  font-size: 16px;
  line-height: 1.9;
}

@media screen and (max-width: 991px) {
  .about-messages-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .about-messages-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   15.2 Team grids — three-member layout.
   About Us and People team sections show exactly three members, so
   force the (default 4-column) professionals grid to three columns.
   ============================================================= */
.professionals-grid.about-page-professionals,
.professionals-grid.people-team-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 991px) {
  .professionals-grid.about-page-professionals,
  .professionals-grid.people-team-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .professionals-grid.about-page-professionals,
  .professionals-grid.people-team-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   16. Project details hero — «غرفة العرض».
   Same grammar as section 12: copy anchored to the start edge and
   the project cover in the giant signature arch bleeding off the
   end edge. Everything except the title is data-driven and simply
   absent when the project has no location/area/dates/gallery —
   sparse data must still read as a complete hero. Reuses the
   shared hero CTA pair and the projects-hero / services-hero
   keyframes.
   ============================================================= */
.project-details-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, calc(100vh - 92px), 740px);
  background: #f7f1e9;
  border-radius: 0 0 0 190px;
  padding: clamp(48px, 6vh, 80px) 0;
  overflow: hidden;
}

@supports (height: 100svh) {
  .project-details-hero {
    min-height: clamp(520px, calc(100svh - 92px), 740px);
  }
}

.project-details-hero::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  z-index: 0;
  width: 46%;
  height: 100%;
  background: radial-gradient(120% 90% at 80% 24%, rgba(205, 162, 116, .18), transparent 62%);
  pointer-events: none;
}

.project-details-hero .container.w-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: clamp(28px, 5vw, 96px) 24px;
}

.project-details-hero-copy {
  position: relative;
  max-width: min(680px, 56%);
  min-width: 0;
}

.project-details-hero-copy::before {
  content: "";
  position: absolute;
  top: -30px;
  inset-inline-start: -46px;
  width: 86px;
  height: 86px;
  border-top: 3px solid rgba(194, 145, 91, .5);
  border-inline-start: 3px solid rgba(194, 145, 91, .5);
  pointer-events: none;
}

.project-details-hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.project-details-hero-kicker span {
  width: 30px;
  height: 3px;
  background: var(--primary-color);
}

.project-details-hero-title {
  margin: 0 0 20px;
  color: var(--secondary-color);
  font-size: clamp(38px, 4vw, 60px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.project-details-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}

.project-details-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(194, 145, 91, .45);
  border-radius: 999px;
  background: rgba(255, 253, 248, .9);
  color: #3f464f;
  font-size: 13px;
  font-weight: 700;
}

.project-details-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.project-details-hero-breadcrumb {
  flex-wrap: wrap;
  row-gap: 4px;
  justify-content: flex-start;
  margin-top: 22px;
  color: #8a857f;
  font-size: 12.5px;
}

.project-details-hero-breadcrumb .breadcrumb-link {
  color: #6d6862;
}

.project-details-hero-breadcrumb .breadcrumb-link:hover {
  color: var(--primary-color);
}

.project-details-hero-media {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 1;
  width: min(45vw, 740px);
  height: 100%;
}

.project-details-hero-arch-back {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 40%;
  height: 56%;
  border-radius: 26px clamp(90px, 9vw, 150px) clamp(90px, 9vw, 150px) 26px;
  overflow: hidden;
  box-shadow: 0 26px 55px rgba(31, 37, 45, .2);
}

.project-details-hero-arch-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-details-hero-arch-main {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: min(78%, 560px);
  height: 100%;
}

.project-details-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 26px clamp(150px, 16vw, 250px) clamp(150px, 16vw, 250px) 26px;
  box-shadow: 0 34px 70px rgba(31, 37, 45, .18);
}

.project-details-hero-tag {
  position: absolute;
  top: clamp(22px, 4vh, 36px);
  inset-inline-end: clamp(20px, 3vw, 44px);
  max-width: min(78%, 440px);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(31, 37, 45, .45);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  backdrop-filter: blur(4px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-details-hero-exp {
  position: absolute;
  top: clamp(52px, 9vh, 88px);
  inset-inline-start: clamp(40px, 4.6vw, 84px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(194, 145, 91, .65);
  border-radius: 50%;
  background: rgba(255, 253, 248, .92);
  backdrop-filter: blur(4px);
  color: var(--secondary-color);
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 14px 30px rgba(31, 37, 45, .14);
}

.project-details-hero-exp strong {
  color: var(--primary-color);
  font-size: 22px;
}

.project-details-hero-exp small {
  font-size: 11.5px;
  font-weight: 700;
}

/* Without a cover the copy owns the whole stage. */
.project-details-hero.no-media .project-details-hero-copy {
  max-width: 760px;
}

@media (prefers-reduced-motion: no-preference) {
  .project-details-hero-copy > * {
    animation: projects-hero-rise .55s ease both;
  }

  .project-details-hero-copy > :nth-child(2) { animation-delay: .07s; }
  .project-details-hero-copy > :nth-child(3) { animation-delay: .14s; }
  .project-details-hero-copy > :nth-child(4) { animation-delay: .21s; }
  .project-details-hero-copy > :nth-child(5) { animation-delay: .28s; }

  .project-details-hero-photo {
    animation: projects-hero-photo .7s ease both, services-hero-drift 16s ease-in-out 1.2s infinite alternate;
  }

  .project-details-hero-arch-back {
    animation: projects-hero-back-rise .6s ease .4s both;
  }

  .project-details-hero-tag,
  .project-details-hero-exp {
    animation: projects-hero-rise .55s ease .62s both;
  }
}

@media screen and (max-width: 1200px) {
  .project-details-hero-copy {
    max-width: min(580px, 55%);
  }

  .project-details-hero-copy::before {
    inset-inline-start: -30px;
  }
}

@media screen and (max-width: 991px) {
  .project-details-hero {
    display: block;
    min-height: 0;
    padding: clamp(48px, 7vh, 72px) 0 56px;
    border-radius: 0 0 0 120px;
  }

  .project-details-hero-copy {
    max-width: 640px;
  }

  .project-details-hero-media {
    position: relative;
    inset-inline-end: auto;
    width: 100%;
    height: clamp(320px, 52vw, 460px);
    margin-top: 38px;
  }

  .project-details-hero-photo {
    border-radius: 26px clamp(90px, 13vw, 150px) clamp(90px, 13vw, 150px) 26px;
  }

  .project-details-hero-exp {
    top: 22px;
    inset-inline-start: 22px;
  }
}

@media screen and (max-width: 767px) {
  .project-details-hero {
    padding: 40px 0 52px;
    border-radius: 0 0 0 70px;
  }

  .project-details-hero .container.w-container {
    padding-inline: 20px;
  }

  .project-details-hero-copy::before {
    display: none;
  }

  .project-details-hero-kicker {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .project-details-hero-title {
    margin-bottom: 18px;
    font-size: clamp(32px, 9vw, 44px);
  }

  .project-details-hero-meta {
    margin-bottom: 24px;
  }

  .project-details-hero-breadcrumb {
    margin-top: 18px;
  }

  .project-details-hero-media {
    height: 320px;
    margin-top: 30px;
  }

  .project-details-hero-photo {
    border-radius: 20px 70px 70px 20px;
  }

  .project-details-hero-tag {
    top: 14px;
    inset-inline-end: 14px;
    max-width: 70%;
  }

  .project-details-hero-exp {
    top: 14px;
    inset-inline-start: 14px;
    width: 84px;
    height: 84px;
  }

  .project-details-hero-exp strong {
    font-size: 18px;
  }

  .project-details-hero-arch-back {
    display: none;
  }
}

/* =============================================================
   17. Project details body — facts, story, gallery, quotes.
   The hero (§16) shows the cover, so nothing repeats it. Below:
   a hairline facts strip under the hero (§12b grammar), the
   description as an editorial measure, the gallery as arch
   figures with a native <dialog> lightbox and قبل/أثناء/بعد role
   badges, testimonial cards, and the related rail reusing the
   §13 listing-card identity. Conditional sections render only
   when the project actually has data.
   ============================================================= */
.project-details-facts {
  background: #fff;
  border-block: 1px solid rgba(194, 145, 91, .18);
  padding: 26px 0;
}

.project-details-facts-row {
  display: flex;
  flex-wrap: wrap;
}

.project-details-fact {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  text-align: center;
}

.project-details-fact + .project-details-fact {
  border-inline-start: 1px solid rgba(194, 145, 91, .35);
}

.project-details-fact-label {
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.project-details-fact-value {
  color: var(--secondary-color);
  font-size: 16.5px;
  font-weight: 800;
}

.project-details-story {
  padding: clamp(56px, 8vh, 88px) 0;
  background: #fff;
}

.project-details-story-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.project-details-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.project-details-kicker span {
  width: 26px;
  height: 3px;
  background: var(--primary-color);
}

.project-details-section-title {
  margin: 0 0 24px;
  color: var(--secondary-color);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.project-details-story-text {
  margin: 0;
  color: #3f464f;
  font-size: 17.5px;
  line-height: 2;
  white-space: pre-line;
  text-align: start;
}

.project-details-gallery {
  background: #f7f1e9;
  padding: clamp(56px, 8vh, 88px) 0;
}

.project-details-gallery .project-details-section-title {
  text-align: center;
}

.project-details-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-top: 8px;
}

.project-details-gallery-item {
  margin: 0;
}

.project-details-gallery-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}

.project-details-gallery-trigger img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 76px 0 0;
  box-shadow: 0 24px 48px rgba(31, 37, 45, .14);
  transition: transform .3s ease;
}

.project-details-gallery-trigger:hover img {
  transform: translateY(-6px);
}

.project-details-gallery-badge {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 8px 18px rgba(31, 37, 45, .18);
}

.project-details-gallery-caption {
  margin-top: 14px;
  text-align: center;
  color: #6d6862;
  font-size: 14px;
}

.project-details-lightbox {
  width: fit-content;
  height: fit-content;
  max-width: min(92vw, 1080px);
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.project-details-lightbox::backdrop {
  background: rgba(31, 37, 45, .78);
  backdrop-filter: blur(3px);
}

.project-details-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .35);
  background: #fff;
}

.project-details-lightbox-caption {
  margin: 14px 0 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.project-details-lightbox-caption:empty {
  display: none;
}

.project-details-lightbox-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(31, 37, 45, .55);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

body.media-lightbox-open {
  overflow: hidden;
}

.project-details-quotes {
  padding: clamp(56px, 8vh, 88px) 0;
  background: #fff;
}

.project-details-quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 8px;
}

.project-details-quote {
  margin: 0;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid rgba(194, 145, 91, .4);
  border-radius: 18px 54px 18px 18px;
  box-shadow: 0 14px 30px rgba(31, 37, 45, .06);
}

.project-details-quote-icon {
  width: 44px;
  height: auto;
  margin-bottom: 14px;
}

.project-details-quote-text {
  margin: 0 0 16px;
  color: #3f464f;
  font-size: 15.5px;
  line-height: 1.95;
}

.project-details-quote-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-details-quote-author strong {
  color: var(--secondary-color);
  font-size: 15px;
}

.project-details-quote-author span {
  color: #8a857f;
  font-size: 12.5px;
  font-weight: 700;
}

.project-details-related .project-details-section-title {
  text-align: center;
  margin-bottom: 34px;
}

.project-details-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

@media (prefers-reduced-motion: no-preference) {
  .project-details-lightbox[open] {
    animation: project-details-lightbox-in .25s ease;
  }
}

@keyframes project-details-lightbox-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media screen and (max-width: 991px) {
  .project-details-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .project-details-facts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .project-details-fact + .project-details-fact {
    border-inline-start: 0;
  }

  .project-details-story-text {
    font-size: 16px;
  }

  .project-details-gallery-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .project-details-related-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* -------------------------------------------------------------
   18. People hero — «ناصية الشغلانة» work-portrait collage.
   Copy beside a collage of two real shots: an Egyptian craftsman
   portrait plus a tilted polaroid of on-site work with a gold
   tape label — people-first, not interiors-first.
   ------------------------------------------------------------- */
.people-hero {
  background: #f7f1e9;
}

.people-hero::before {
  position: absolute;
  inset: auto 0 0 auto;
  z-index: 0;
  width: 52%;
  height: 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23cda274' stroke-opacity='.4'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  opacity: .3;
  mask-image: radial-gradient(100% 100% at 100% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 20%, transparent 75%);
  content: "";
}

.people-hero .container.w-container {
  position: relative;
  z-index: 1;
  padding-top: clamp(44px, 6.5vh, 80px);
  padding-bottom: clamp(44px, 6.5vh, 80px);
}

.people-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.people-hero-media {
  position: relative;
  min-height: 480px;
}

.people-hero-photo {
  display: block;
  width: min(420px, 86%);
  margin-inline-start: auto;
  aspect-ratio: 4 / 4.7;
  object-fit: cover;
  object-position: 32% 50%;
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(41, 47, 54, .2);
}

.people-hero-tape {
  position: absolute;
  top: 22px;
  inset-inline-start: 4%;
  z-index: 3;
  padding: 9px 18px;
  border-radius: 6px;
  background: var(--primary-color);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(194, 145, 91, .38);
  transform: rotate(-2.4deg);
}

.people-hero-polaroid {
  position: absolute;
  bottom: 3%;
  inset-inline-start: 0;
  z-index: 2;
  width: min(236px, 54%);
  margin: 0;
  padding: 9px 9px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 44px rgba(41, 47, 54, .22);
  transform: rotate(2.6deg);
}

.people-hero-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 9px;
}

.people-hero-polaroid figcaption {
  padding-top: 9px;
  color: var(--secondary-color);
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 991px) {
  .people-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .people-hero-media {
    min-height: 0;
  }

  .people-hero-photo {
    margin-inline: auto;
  }

  .people-hero-polaroid {
    inset-inline-start: 8%;
  }
}

@media (max-width: 479px) {
  .people-hero-polaroid {
    width: 52%;
  }
}

/* -------------------------------------------------------------
   19. Blogs hero — «غلاف مجلة» editorial cover.
   Paper-white backdrop, copy with category chips, and a tilted
   magazine-style featured-article card with a gold tab.
   ------------------------------------------------------------- */
.blogs-hero {
  background: #fff;
  border-bottom: 1px solid rgba(41, 47, 54, .07);
}

.blogs-hero::before {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  width: 40%;
  height: 70%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23cda274' stroke-opacity='.4'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  opacity: .26;
  mask-image: radial-gradient(100% 100% at 0% 0%, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(100% 100% at 0% 0%, #000 15%, transparent 70%);
  content: "";
}

.blogs-hero .container.w-container {
  position: relative;
  z-index: 1;
  padding-top: clamp(44px, 6.5vh, 84px);
  padding-bottom: clamp(44px, 6.5vh, 84px);
}

.blogs-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.blogs-hero-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.blogs-hero-cats a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid rgba(205, 162, 116, .55);
  border-radius: 999px;
  color: var(--secondary-color);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.blogs-hero-cats a:hover,
.blogs-hero-cats a:focus-visible {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}

.blogs-hero-feature {
  position: relative;
  margin: 0;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(41, 47, 54, .08);
  box-shadow: 0 30px 60px rgba(41, 47, 54, .12);
  transform: rotate(-1.4deg);
  overflow: hidden;
}

.blogs-hero-feature::before {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 2;
  padding: 8px 16px;
  border-radius: 0 0 12px 0;
  background: var(--primary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  content: "✦ مقال الأسبوع";
}

.blogs-hero-feature-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.blogs-hero-feature-body {
  padding: 20px 22px 22px;
}

.blogs-hero-feature-body h3 {
  margin: 0 0 8px;
  color: var(--secondary-color);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.6;
}

.blogs-hero-feature-meta {
  margin: 0;
  color: #62666b;
  font-size: 13px;
  font-weight: 700;
}

.blogs-hero-feature-meta .dot {
  padding: 0 8px;
  color: var(--primary-color);
}

@media (max-width: 991px) {
  .blogs-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .blogs-hero-feature {
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 479px) {
  .blogs-hero-feature {
    transform: none;
  }
}

/* -------------------------------------------------------------
   20. Faq hero — «استيكرات الأسئلة» typographic hero.
   No photo at all: the questions themselves decorate the hero as
   floating chat-bubble chips around a giant ghost question mark.
   ------------------------------------------------------------- */
.faq-hero {
  background: #f7f1e9;
}

.faq-hero-ghost {
  position: absolute;
  top: 44%;
  inset-inline-end: -3%;
  z-index: 0;
  color: rgba(205, 162, 116, .17);
  font-size: clamp(200px, 26vw, 320px);
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

.faq-hero .container.w-container {
  position: relative;
  z-index: 1;
  padding-top: clamp(48px, 7vh, 88px);
  padding-bottom: clamp(48px, 7vh, 88px);
}

.faq-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.faq-hero-q {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 13px 20px;
  border: 1px solid rgba(205, 162, 116, .55);
  border-radius: 18px 18px 18px 4px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(41, 47, 54, .1);
  color: var(--secondary-color);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

/* Bubbles live in the free end-side zone of the container (left in
   RTL), scattered at staggered heights like chat stickers. */
.faq-hero-q.q1 {
  top: 12%;
  inset-inline-end: 0;
  transform: rotate(1.6deg);
}

.faq-hero-q.q2 {
  top: 34%;
  inset-inline-end: 15%;
  border-radius: 18px 18px 4px 18px;
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
  transform: rotate(-1.4deg);
}

.faq-hero-q.q3 {
  top: 58%;
  inset-inline-end: 2%;
  transform: rotate(1deg);
}

.faq-hero-q.q4 {
  top: 80%;
  inset-inline-end: 13%;
  border-radius: 18px 18px 4px 18px;
  transform: rotate(-1.8deg);
}

@media (max-width: 991px) {
  .faq-hero-q {
    display: none;
  }

  .faq-hero-ghost {
    inset-inline-end: auto;
    inset-inline-start: -6%;
    font-size: 200px;
  }
}

/* -------------------------------------------------------------
   21. Contact hero — «طابور البداية» action hero.
   Compact, centered, photo-free: two big action cards (message /
   phone) with a trust-chip row, on a soft gold radial glow.
   ------------------------------------------------------------- */
.contact-hero {
  padding: clamp(48px, 7.5vh, 88px) 0;
  background:
    radial-gradient(72% 110% at 50% 0%, rgba(205, 162, 116, .16), transparent 68%),
    #f7f1e9;
}

.contact-hero .hero-crumb {
  justify-content: center;
}

.contact-hero .ph-kicker {
  justify-content: center;
}

.contact-hero .ph-kicker::after {
  flex: 0 0 auto;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-color);
  content: "";
}

.contact-hero-copy {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.contact-hero .ph-lede {
  margin-inline: auto;
}

.contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 10px;
}

.contact-action-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
  padding: 16px 22px;
  border: 1px solid rgba(41, 47, 54, .08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(41, 47, 54, .1);
  text-align: start;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-action-card:hover,
.contact-action-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px rgba(41, 47, 54, .14);
}

.contact-action-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(205, 162, 116, .18);
  color: var(--primary-color);
}

.contact-action-card strong {
  display: block;
  color: var(--secondary-color);
  font-size: 15.5px;
  font-weight: 800;
}

.contact-action-card small {
  display: block;
  margin-top: 2px;
  color: #62666b;
  font-size: 12.5px;
  font-weight: 700;
}

.contact-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}

.contact-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary-color);
  font-size: 13px;
  font-weight: 700;
}

.contact-hero-trust span::before {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 11px;
  content: "✓";
}

@media (max-width: 479px) {
  .contact-action-card {
    width: 100%;
  }
}


/* =============================================================
   18b. People / Blogs / Faq / Contact — shared page sections.
   Restored non-hero styles that used to live inside the old hero
   blocks: values strips, team grid, blog listing cards, faq
   accordions and the contact form.
   ============================================================= */

.people-values
{
background: #fff;
  border-top: 1px solid rgba(194, 145, 91, .18);
  border-bottom: 1px solid rgba(194, 145, 91, .18);
  padding: 34px 0;
}

.people-values-row
{
display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.people-values-item
{
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-inline: 14px;
  text-align: center;
}

.people-values-item + .people-values-item
{
border-inline-start: 1px solid rgba(194, 145, 91, .35);
}

.contact-values .people-values-row
{
grid-template-columns: repeat(3, 1fr);
}

.people-values-item strong
{
color: var(--primary-color);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.people-values-item span
{
color: #6d6862;
  font-size: 14px;
  font-weight: 700;
}

@media screen and (max-width: 991px) {
  .people-values-row, .contact-values .people-values-row
  {
  grid-template-columns: repeat(2, 1fr);
      row-gap: 26px;
  }
  
  .people-values-item + .people-values-item
  {
  border-inline-start: none;
  }
  
  .people-values-item:nth-child(even)
  {
  border-inline-start: 1px solid rgba(194, 145, 91, .35);
  }
}

@media screen and (max-width: 767px) {
  .people-values
  {
  padding: 26px 0;
  }
  
  .people-values-row, .contact-values .people-values-row
  {
  grid-template-columns: 1fr;
      row-gap: 0;
  }
  
  .people-values-item
  {
  padding-inline: 0;
  }
  
  .people-values-item:nth-child(even)
  {
  border-inline-start: none;
  }
  
  .people-values-item + .people-values-item
  {
  margin-top: 0;
      padding-top: 18px;
      border-inline-start: none;
      border-top: 1px solid rgba(194, 145, 91, .3);
  }
  
  .people-values-item strong
  {
  font-size: 23px;
  }
}

.professionals-section.people-team
{
padding-top: 100px;
  padding-bottom: 100px;
  background: #fff;
}

.people-team-wrap
{
padding-top: 54px;
}

.people-team-grid
{
grid-template-columns: repeat(3, 1fr);
  gap: 56px 34px;
}

.people-team-grid .professionals-image
{
border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(31, 37, 45, .12);
  transition: box-shadow .35s ease;
}

.people-team-grid .professionals-listing-image
{
transition: transform .5s ease;
}

.people-team-grid .professionals-item
{
transition: transform .35s ease;
}

.people-team-grid .professionals-item:hover
{
transform: translateY(-8px);
}

.people-team-grid .professionals-item:hover .professionals-image
{
box-shadow: 0 24px 46px rgba(31, 37, 45, .18);
}

.people-team-grid .professionals-item:hover .professionals-listing-image
{
transform: scale(1.05);
}

.people-team-grid .professional-social-link
{
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-inline: 3px;
  padding: 0;
  border-radius: 50%;
  background: rgba(194, 145, 91, .12);
  transition: background .25s ease, transform .25s ease;
}

.people-team-grid .professional-social-link:hover
{
background: rgba(194, 145, 91, .3);
  transform: translateY(-2px);
}

.people-team-grid .member-social-wrap
{
padding-bottom: 8px;
}

@media screen and (max-width: 991px) {
  .people-team-wrap
  {
  padding-top: 44px;
  }
  
  .people-team-grid
  {
  grid-template-columns: repeat(2, 1fr);
      gap: 44px 26px;
  }
}

@media screen and (max-width: 479px) {
  .professionals-section.people-team
  {
  padding-top: 70px;
      padding-bottom: 70px;
  }
  
  .people-team-grid
  {
  grid-template-columns: 1fr;
      gap: 40px;
  }
}

.blog-section.blogs-upgrade
{
padding-top: 100px;
  padding-bottom: 100px;
}

.blogs-upgrade .section-title-wrap
{
margin-bottom: 0;
}

.blogs-wrap-upgrade
{
padding-top: 54px;
}

.blogs-upgrade .blog-item
{
border: 1px solid rgba(194, 145, 91, .22);
  border-radius: 26px;
  padding: 16px 16px 22px;
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, background-color .2s ease;
}

.blogs-upgrade .blog-item:hover
{
background: #fff;
  transform: translateY(-8px);
  box-shadow: 0 24px 46px rgba(31, 37, 45, .14);
}

.blogs-upgrade .blog-image-wrap
{
border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(31, 37, 45, .1);
}

.blogs-upgrade .blog-listing-image
{
border-radius: 0;
  transition: transform .5s ease;
}

.blogs-upgrade .blog-item:hover .blog-listing-image
{
transform: scale(1.05);
}

.blogs-upgrade .blog-category
{
position: absolute;
  bottom: 16px;
  inset-inline-start: 16px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .95);
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 800;
}

.blogs-upgrade .blog-title
{
margin-top: 20px;
  font-size: 21px;
  line-height: 1.6;
}

.blogs-upgrade .blog-item:hover .blog-title
{
color: var(--primary-color);
}

.blogs-upgrade .blog-item-meta
{
margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(194, 145, 91, .18);
}

.blogs-upgrade .blog-date
{
color: #8a857f;
  font-size: 13.5px;
  font-weight: 700;
}

.blogs-upgrade .blog-single-link
{
width: 44px;
  height: 44px;
  border: 1px solid rgba(194, 145, 91, .45);
  background: transparent;
  transition: background .25s ease;
}

.blogs-upgrade .blog-single-link:hover
{
background: rgba(194, 145, 91, .14);
}

@media screen and (max-width: 767px) {
  .blog-section.blogs-upgrade
  {
  padding-top: 70px;
      padding-bottom: 70px;
  }
  
  .blogs-wrap-upgrade
  {
  padding-top: 40px;
  }
}

.faq-section.faq-upgrade
{
padding-top: 100px;
  padding-bottom: 100px;
}

.faq-upgrade .faq-accordion-content > .section-title
{
margin-bottom: 30px;
}

.faq-upgrade .accordion-item
{
border: 1px solid rgba(194, 145, 91, .25);
  border-bottom: 1px solid rgba(194, 145, 91, .25);
  border-radius: 18px;
  padding: 0 20px;
  margin-bottom: 16px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.faq-upgrade .accordion-item:hover
{
border-color: rgba(194, 145, 91, .55);
}

.faq-upgrade .accordion-item.w--open
{
border-color: var(--primary-color);
  box-shadow: 0 14px 30px rgba(31, 37, 45, .08);
}

.faq-upgrade .accordion-toggle
{
height: auto;
  min-height: 64px;
  padding-top: 14px;
  padding-bottom: 14px;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.faq-upgrade .accordion-icon
{
display: none;
}

.faq-upgrade .accordion-toggle::after
{
content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-inline-start: auto;
  border-inline-start: 2.5px solid var(--primary-color);
  border-bottom: 2.5px solid var(--primary-color);
  transform: rotate(45deg);
  transition: transform .25s ease;
}

.faq-upgrade .accordion-item.w--open .accordion-toggle::after
{
transform: rotate(225deg);
}

.faq-upgrade .dropdown-question
{
font-family: 'Cairo', sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
  padding-inline-end: 18px;
}

.faq-upgrade .accordion-list
{
display: none;
  padding-top: 0;
}

.faq-upgrade .accordion-item.w--open .accordion-list
{
display: block;
}

.faq-upgrade .accordion-list .faq-content-wrap
{
padding: 0 0 18px;
  color: #51565d;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.9;
}

.faq-upgrade .faq-image
{
box-shadow: 0 26px 55px rgba(31, 37, 45, .14);
}

@media screen and (max-width: 767px) {
  .faq-section.faq-upgrade
  {
  padding-top: 70px;
      padding-bottom: 70px;
  }
  
  .faq-upgrade .accordion-item
  {
  padding: 0 16px;
  }
  
  .faq-upgrade .dropdown-question
  {
  font-size: 16px;
  }
  
  .faq-upgrade .accordion-list .faq-content-wrap
  {
  padding: 0 0 16px;
      font-size: 15px;
  }
}

.contact-page-form.contact-upgrade
{
padding-top: 100px;
  padding-bottom: 110px;
}

.contact-upgrade .public-alert
{
margin-bottom: 30px;
}

.contact-upgrade .public-alert
{
display: block;
}

.contact-upgrade .public-alert.validation-summary-valid
{
display: none;
}

.contact-upgrade .section-title-wrap
{
margin-bottom: 56px;
}

.contact-upgrade .contact-page-grid
{
align-items: start;
  gap: 60px 44px;
}

.contact-upgrade .form-block
{
background: #fff;
  border: 1px solid rgba(194, 145, 91, .25);
  border-radius: 26px;
  padding: 34px 30px;
  box-shadow: 0 24px 46px rgba(31, 37, 45, .08);
}

.contact-upgrade .form-input-field
{
height: 58px;
  border: 1px solid rgba(31, 37, 45, .16);
  border-radius: 14px;
  background: #fdfbf7;
  padding: 0 18px;
  margin-bottom: 16px;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-upgrade .form-input-field:focus, .contact-upgrade .form-input-field:focus-visible
{
border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(194, 145, 91, .16);
  outline: none;
}

.contact-upgrade select.form-input-field
{
padding-inline-start: 14px;
}

.contact-upgrade .form-input-field.text-area
{
height: auto;
  min-height: 150px;
  padding: 14px 18px;
}

.contact-upgrade .input-block
{
margin-bottom: 0;
}

.contact-upgrade .contact-detail-item
{
display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 15px 18px;
  border: 1px solid rgba(194, 145, 91, .22);
  border-radius: 18px;
  background: #fff;
  transition: transform .3s ease, border-color .25s ease, box-shadow .3s ease;
}

.contact-upgrade .contact-detail-item:hover
{
transform: translateY(-3px);
  border-color: rgba(194, 145, 91, .5);
  box-shadow: 0 14px 30px rgba(31, 37, 45, .08);
}

.contact-upgrade .contact-icon-wrap
{
display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(194, 145, 91, .12);
}

.contact-upgrade .contact-icon-wrap img
{
width: 20px;
  height: 20px;
  object-fit: contain;
}

.contact-upgrade .contact-link
{
color: var(--secondary-color);
  font-size: 15.5px;
  font-weight: 700;
}

.contact-upgrade .contact-link:hover
{
color: var(--primary-color);
}

.contact-upgrade .contact-social-wrap
{
display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.contact-upgrade .contact-social-link
{
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(194, 145, 91, .12);
  transition: background .25s ease, transform .25s ease;
}

.contact-upgrade .contact-social-link:hover
{
background: rgba(194, 145, 91, .3);
  transform: translateY(-2px);
}

@media screen and (max-width: 767px) {
  .contact-page-form.contact-upgrade
  {
  padding-top: 70px;
      padding-bottom: 80px;
  }
  
  .contact-upgrade .section-title-wrap
  {
  margin-bottom: 40px;
  }
  
  .contact-upgrade .form-block
  {
  padding: 24px 18px;
      border-radius: 20px;
  }
}

/* =============================================================
   22. Floating WhatsApp button — rendered by _Layout.cshtml so it
   sits on every public page. Anchored to the start-side bottom
   corner (right on this RTL site), keeps the recognisable
   WhatsApp green with the brand's soft shadow language.
   ============================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  inset-inline-start: 22px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .35);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #1eb857;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, .45);
}

@media (prefers-reduced-motion: no-preference) {
  .whatsapp-float {
    animation: services-hero-rise .55s ease .8s both;
  }
}

@media screen and (max-width: 767px) {
  .whatsapp-float {
    bottom: 16px;
    inset-inline-start: 16px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 25px;
    height: 25px;
  }
}

/* =============================================================
   23. Smart navbar — the header is fixed to the top and slides
   away while the visitor scrolls down, sliding back the moment
   they scroll up. Its measured height is mirrored into
   --header-h by site.js so the page offsets the fixed bar
   without hard-coding the per-breakpoint height.
   ============================================================= */
.header-section {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
}

body {
  padding-top: var(--header-h, 97px);
}

.header-section.nav-hidden {
  transform: translateY(-102%);
}

@media (prefers-reduced-motion: no-preference) {
  .header-section {
    transition: transform .3s ease;
  }
}

/* Anchored targets (e.g. the contact form) must not land under
   the fixed bar. */
[id] {
  scroll-margin-top: calc(var(--header-h, 97px) + 16px);
}

/* =============================================================
   24. Blog article page — reading-first layout for /blogs/{slug}.
   ============================================================= */
.blog-article-header {
  padding: clamp(40px, 6vh, 72px) 0 0;
  background: #f7f1e9;
}

.blog-article-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.blog-article-head .hero-crumb {
  justify-content: center;
}

.blog-article-category {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 8px 16px;
  border: 1px solid rgba(205, 162, 116, .55);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 800;
}

.blog-article-meta {
  margin: 0 0 8px;
  color: #62666b;
  font-size: 13.5px;
  font-weight: 700;
}

.blog-article-cover {
  max-width: 980px;
  margin: clamp(28px, 4vh, 44px) auto 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(41, 47, 54, .16);
}

.blog-article-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-article-body {
  padding: clamp(40px, 6vh, 64px) 0 clamp(48px, 7vh, 80px);
  background: #fff;
}

.blog-article-content {
  max-width: 760px;
  margin-inline: auto;
  color: #4d5053;
  font-size: 17px;
  line-height: 2;
}

.blog-article-content h2 {
  margin: 38px 0 14px;
  color: var(--secondary-color);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.5;
}

.blog-article-content p {
  margin: 0 0 18px;
}

.blog-article-cta {
  max-width: 760px;
  margin: 44px auto 0;
  padding: 28px 30px;
  border: 1px solid rgba(205, 162, 116, .4);
  border-radius: 20px;
  background: #f7f1e9;
  text-align: center;
}

.blog-article-cta strong {
  display: block;
  margin-bottom: 6px;
  color: var(--secondary-color);
  font-size: 20px;
  font-weight: 800;
}

.blog-article-cta p {
  margin: 0 0 18px;
  color: #62666b;
  font-size: 15px;
  font-weight: 600;
}

.blog-article-related {
  max-width: 980px;
  margin: 56px auto 0;
}

.blog-article-related-title {
  margin: 0 0 20px;
  color: var(--secondary-color);
  font-size: 22px;
  font-weight: 800;
}

.blog-article-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.blog-article-related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid rgba(41, 47, 54, .09);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(41, 47, 54, .07);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.blog-article-related-card:hover,
.blog-article-related-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(41, 47, 54, .11);
}

.blog-article-related-cat {
  color: var(--primary-color);
  font-size: 12.5px;
  font-weight: 800;
}

.blog-article-related-card h3 {
  margin: 0;
  color: var(--secondary-color);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
}

.blog-article-related-meta {
  color: #62666b;
  font-size: 12.5px;
  font-weight: 700;
}

.blog-reading-time {
  color: #9a9ea3;
  font-weight: 600;
}

@media (max-width: 767px) {
  .blog-article-related-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   25. Privacy page — simple readable document layout.
   ============================================================= */
.privacy-page {
  padding: clamp(44px, 6vh, 76px) 0 clamp(56px, 8vh, 88px);
  background: #fff;
}

.privacy-page h1 {
  margin: 0 0 6px;
  color: var(--secondary-color);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
}

.privacy-updated {
  margin: 0 0 26px;
  color: var(--primary-color);
  font-size: 13.5px;
  font-weight: 700;
}

.privacy-page h2 {
  margin: 30px 0 10px;
  color: var(--secondary-color);
  font-size: 20px;
  font-weight: 800;
}

.privacy-page p {
  margin: 0 0 14px;
  color: #4d5053;
  font-size: 16px;
  line-height: 2;
}

.privacy-page a {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}

.privacy-page a:hover {
  text-decoration: underline;
}

/* =============================================================
   26. Home polish pass — upgrades to every section below the hero.
   The stock-logo wall becomes an honest craft ticker; services get
   editorial ordinals; the intro gains a proof list, a real phone
   link and an image badge; testimonials drop the stock western
   headshots for monograms with stars and project scope; project
   cards get location/year meta and a hover pill; counters become
   believable; blog cards lose their 2021 dates for read times;
   the CTA banner carries trust chips and a WhatsApp line.
   ============================================================= */

/* --- Craft ticker (replaces the client-logo wall) --- */
.craft-ticker {
  overflow: hidden;
  padding: 15px 0;
  border-top: 1px solid rgba(207, 160, 112, .22);
  border-bottom: 1px solid rgba(207, 160, 112, .22);
  background: #faf8f5;
}

.craft-ticker-track {
  display: flex;
  width: max-content;
  direction: rtl;
  animation: craft-ticker-scroll 42s linear infinite;
}

.craft-ticker:hover .craft-ticker-track {
  animation-play-state: paused;
}

.craft-ticker-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.craft-ticker-item {
  padding-inline: 30px;
  color: #7c6a55;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.craft-ticker-sep {
  color: var(--primary-color);
  font-size: 11px;
  opacity: .85;
}

@keyframes craft-ticker-scroll {
  to { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .craft-ticker-track {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .craft-ticker-group[aria-hidden="true"] {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .craft-ticker {
    padding: 12px 0;
  }

  .craft-ticker-item {
    padding-inline: 20px;
    font-size: 14px;
  }
}

/* --- Services: editorial ordinals (shared by home strip + services menu) --- */
.service-ordinal {
  display: block;
  margin-bottom: 8px;
  color: transparent;
  font-family: 'Cairo', sans-serif;
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  -webkit-text-stroke: 1.5px rgba(194, 145, 91, .5);
  transition: color .25s ease, -webkit-text-stroke-color .25s ease;
}

.service-item:hover .service-ordinal {
  color: var(--primary-color);
  -webkit-text-stroke-color: var(--primary-color);
}

/* --- Services page menu: section head + scope chips --- */
.services-menu-head {
  max-width: 720px;
  margin: 0 auto 10px;
  padding-top: clamp(48px, 6vw, 72px);
  text-align: center;
}

.services-menu-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.services-menu-kicker::before,
.services-menu-kicker::after {
  width: 26px;
  height: 3px;
  background: var(--primary-color);
  content: "";
}

.services-menu-title {
  margin: 14px 0 10px;
  color: var(--secondary-color);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}

.services-menu-sub {
  margin: 0 auto;
  max-width: 560px;
  color: #5f646b;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.85;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 320px;
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
}

.service-tags li {
  padding: 5px 13px;
  border: 1px solid rgba(207, 160, 112, .38);
  border-radius: 999px;
  color: #8c725d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* The projects gallery sits right under the proof strip — drop the
   extra top padding the services menu needs. */
.gallery-head.services-menu-head {
  padding-top: 0;
  margin-bottom: clamp(30px, 4vw, 44px);
}

/* --- Intro: proof list, phone link, image badge --- */
.intro-proof-list {
  max-width: 560px;
  margin: 4px 0 26px;
  padding: 0;
  list-style: none;
}

.intro-proof-list li {
  display: flex;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(205, 162, 116, .45);
  color: #3f454b;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
}

.intro-proof-list li::before {
  flex: 0 0 auto;
  margin-inline-end: 12px;
  color: var(--primary-color);
  content: "✦";
  font-size: 12px;
}

.intro-call-wrap p {
  color: var(--secondary-color);
  font-weight: 700;
}

.intro-media {
  position: relative;
  margin: 0;
  min-width: 0;
}

.intro-media-badge {
  position: absolute;
  bottom: 34px;
  inset-inline-end: -18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 24px;
  border: 1px solid rgba(207, 160, 112, .4);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(31, 37, 45, .12);
  text-align: center;
}

.intro-media-badge-num {
  color: var(--primary-color);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;
}

.intro-media-badge-text {
  color: #62666b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .intro-media-badge {
    bottom: 16px;
    inset-inline-end: 12px;
    padding: 12px 18px;
  }

  .intro-media-badge-num {
    font-size: 18px;
  }

  .intro-media-badge-text {
    font-size: 12px;
  }

  .intro-proof-list li {
    font-size: 16px;
  }
}

/* --- Testimonials: monograms, stars, project scope --- */
.review-monogram {
  display: inline-flex;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(207, 160, 112, .55);
  border-radius: 50%;
  background: var(--light-background);
  color: var(--primary-color);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.review-stars {
  margin-top: 14px;
  color: var(--primary-color);
  font-size: 15px;
  letter-spacing: 3px;
  line-height: 1;
}

.review-detail .client-location {
  font-size: 14.5px;
  font-weight: 600;
}

@media screen and (max-width: 767px) {
  .review-monogram {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    font-size: 22px;
  }

  .review-stars {
    margin-top: 10px;
    font-size: 13px;
  }
}

/* --- Projects: location/year meta + hover pill --- */
.project-items.home-page-projects .project-link-block {
  position: relative;
}

.project-items.home-page-projects .project-meta-line {
  display: block;
  margin-top: 2px;
  color: #9a938b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.project-hover-pill {
  position: absolute;
  bottom: 18px;
  inset-inline-start: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(41, 47, 54, .88);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

.project-link-block:hover .project-hover-pill,
.project-link-block:focus-visible .project-hover-pill {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .project-hover-pill {
    transition: none;
  }
}

@media screen and (max-width: 767px) {
  .project-items.home-page-projects .project-meta-line {
    font-size: 13px;
  }

  .project-hover-pill {
    display: none;
  }
}

/* --- Counters: believable numbers in the site face --- */
.home-counter-sub {
  display: block;
  margin: 8px 0 0;
  color: #6b6f74;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}

.home-counter-section .count-number {
  direction: ltr;
  font-family: 'Cairo', sans-serif;
  font-size: clamp(52px, 5vw, 68px);
  font-weight: 800;
}

.count-plus {
  margin-inline-start: 3px;
  color: var(--primary-color);
  font-size: .6em;
  font-weight: 800;
}

/* --- Blogs: read time, hover lift, all-articles link --- */
.blog-wrap.home-page-blog .blog-item {
  transition: background-color .2s, transform .25s ease, box-shadow .25s ease;
}

.blog-wrap.home-page-blog .blog-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(38, 43, 49, .08);
}

.blog-wrap.home-page-blog .blog-date {
  color: #8c725d;
  font-weight: 700;
}

.home-blogs-more {
  margin-top: 26px;
  text-align: center;
}

.home-blogs-more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--primary-color);
  color: var(--secondary-color);
  font-size: 17px;
  font-weight: 700;
}

.home-blogs-more a span {
  color: var(--primary-color);
  font-size: 22px;
  transition: transform .2s ease;
}

.home-blogs-more a:hover span {
  transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .blog-wrap.home-page-blog .blog-item,
  .home-blogs-more a span {
    transition: none;
  }
}

/* --- CTA banner: star-wash texture, trust chips, WhatsApp line --- */
.home-call-to-action,
.page-call-to-action {
  overflow: hidden;
  isolation: isolate;
}

.home-call-to-action::before,
.page-call-to-action::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23cda274' stroke-opacity='.5'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  opacity: .07;
  content: "";
}

.home-call-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.home-call-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.home-call-trust li::before {
  color: var(--primary-color);
  content: "✦";
  font-size: 11px;
}

.home-call-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.home-call-whatsapp {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .75);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.home-call-whatsapp:hover,
.home-call-whatsapp:focus-visible {
  border-bottom-color: var(--primary-color);
  color: #fff;
}

@media screen and (max-width: 767px) {
  .home-call-trust {
    gap: 6px 18px;
  }

  .home-call-trust li {
    font-size: 14px;
  }

  .home-call-whatsapp {
    font-size: 14px;
  }

  /* Full-width mobile CTA: the centered label collides with the 88%-positioned
     arrow glyph — pin the arrow to the far end edge instead. */
  .home-call-to-action .call-to-action-button,
  .page-call-to-action .call-to-action-button {
    background-position: 4% center;
    padding-inline-end: 46px;
  }
}