/* =====================================================================
   Al-Ofoq Contracting & Finishing — Design System

   Palette is fixed by the brief and must not drift:
     #F5B301 gold (CTA / icons / accents)   #1B2A4E navy (text / headings)
     #FFFFFF base bg                        #F7F8FA alternating section bg
     #5A6478 secondary text                 hero overlay: black 20% -> 60%

   Layout uses CSS logical properties (padding-inline / inset-inline-start)
   so the Arabic (RTL) and English (LTR) builds run ONE rule set and stay
   pixel-identical rather than being mirrored by hand.
   ===================================================================== */

:root {
  /* ---- 1. Brand palette (exact) ----------------------------------- */
  --gold-500:#F5B301;   /* primary */
  --gold-600:#D99C00;   /* pressed / deeper fill */
  --gold-400:#FFC72C;   /* gradient top */
  --gold-100:#FEF3D3;   /* soft circle behind icons */
  --gold-50:#FFFAEC;
  --gold-ink:#8A6A00;   /* the only gold dark enough to be TEXT on white */

  --navy-900:#0F1A33;
  --navy-800:#1B2A4E;   /* headings + body text */
  --navy-700:#2A3A62;
  --navy-600:#3A4B75;
  --navy-500:#4C5D88;

  --gray-50:#F7F8FA;    /* alternating section background */
  --gray-100:#EEF0F5;
  --gray-200:#E5E8EE;   /* borders */
  --gray-300:#D3D8E2;

  /* ---- 2. Semantic roles (names kept stable for existing views) ---- */
  --color-bg:#FFFFFF;
  --color-surface-alt:var(--gray-50);
  --color-surface-card:#FFFFFF;
  --color-border:var(--gray-200);
  --color-border-strong:var(--gray-300);

  --color-text:var(--navy-800);
  --color-text-muted:#5A6478;   /* 6.4:1 on white */
  --color-text-subtle:#6B7488;  /* 5.0:1 on white */

  --color-primary:var(--navy-800);
  --color-primary-2:var(--navy-700);
  --color-primary-deep:var(--navy-900);

  /* Gold is an IDENTITY colour, not a text colour: #F5B301 on white is only
     1.8:1. Fills and icon plates use --color-accent; gold text on a light
     surface must use --color-accent-text, and anything sitting ON gold is
     navy (--color-on-gold, 8.9:1). */
  --color-accent:var(--gold-500);
  --color-accent-hover:var(--gold-600);
  --color-accent-text:var(--gold-ink);
  --color-on-gold:var(--navy-800);

  --color-on-dark:#FFFFFF;
  --color-on-dark-muted:#C2CADB;  /* 9.1:1 on navy-800 */

  --color-danger:#B3261E;
  --color-success:#2E7D32;

  /* ---- 3. Gradients ------------------------------------------------ */
  --gradient-brand:linear-gradient(155deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  --gradient-brand-warm:var(--gradient-brand);
  --gradient-gold:linear-gradient(145deg, var(--gold-400) 0%, var(--gold-500) 100%);
  --gradient-gold-bright:linear-gradient(145deg, #FFD65A 0%, var(--gold-400) 100%);
  /* 3–5% wash so adjacent sections never read as flat stacked blocks */
  --gradient-sand:linear-gradient(180deg, #FFFFFF 0%, var(--gray-50) 100%);
  --gradient-sand-soft:linear-gradient(180deg, var(--gray-50) 0%, #FFFFFF 100%);
  /* Hero / section photo scrim, per the brief: black 20% -> 60% */
  --overlay-photo:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.60) 100%);

  /* ---- 4. Layered shadows ----------------------------------------- */
  --shadow-xs:0 1px 2px rgba(27,42,78,.05);
  --shadow-sm:0 1px 2px rgba(27,42,78,.04), 0 2px 6px rgba(27,42,78,.06);
  --shadow-md:0 2px 4px rgba(27,42,78,.04), 0 8px 16px rgba(27,42,78,.08);
  --shadow-lg:0 4px 8px rgba(27,42,78,.04), 0 12px 24px rgba(27,42,78,.09), 0 24px 44px rgba(27,42,78,.07);
  --shadow-xl:0 8px 16px rgba(27,42,78,.06), 0 24px 48px rgba(27,42,78,.12), 0 44px 76px rgba(27,42,78,.09);
  --shadow-gold:0 6px 18px -4px rgba(245,179,1,.45);
  --shadow-gold-lg:0 12px 30px -6px rgba(245,179,1,.55);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.45);
  --shadow-hover:var(--shadow-lg);

  /* ---- 5. Typography ---------------------------------------------- */
  /* IBM Plex Sans Arabic + IBM Plex Sans share a designer and metrics, so AR
     and EN sit on the same grid. Real weights stop at 700 — asking for 800
     would make the browser synthesise a faux-bold. */
  --font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-h1:clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem);      /* 40 → 56 */
  --fs-h2:clamp(2rem, 1.75rem + 1.1vw, 2.25rem);      /* 32 → 36 */
  --fs-h3:clamp(1.375rem, 1.25rem + .5vw, 1.625rem);  /* 22 → 26 */
  --fs-h4:1.25rem;
  --fs-body:1.0625rem;   /* 17 */
  --fs-lg:1.125rem;      /* 18 */
  --fs-ui:0.9375rem;     /* 15 — buttons + nav */
  --fs-sm:0.9375rem;
  --fs-xs:0.8125rem;

  --lh-tight:1.2;
  --lh-snug:1.4;
  --lh-body:1.7;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* ---- 6. Spacing / radius / layout -------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:64px; --sp-10:80px;
  --sp-11:96px; --sp-12:120px; --sp-13:140px; --sp-14:160px;

  /* Buttons are near-square per the brief */
  --radius-btn:6px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:20px; --radius-2xl:26px; --radius-full:999px;

  --container-max:1312px;
  --pad-desktop:64px;
  --pad-mobile:24px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:260ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: var(--gold-500); color: var(--navy-800); }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
h1, .hero-title { font-size: var(--fs-h1); }
h2, .section-title { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { margin: 0 0 var(--sp-4); line-height: var(--lh-body); }
p:last-child { margin-bottom: 0; }

.text-large { font-size: var(--fs-lg); line-height: var(--lh-body); }
.text-meta  { font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

/* Short gold rule under a major heading */
.heading-rule::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--gold-500);
  margin-top: var(--sp-4);
}
.heading-rule.text-center::after,
.text-center > .heading-rule::after { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-accent-text);
  margin-bottom: var(--sp-3);
}
[lang="en"] .eyebrow { text-transform: uppercase; letter-spacing: .12em; }
.section-dark .eyebrow, .hero-section .eyebrow { color: var(--gold-500); }

.stat-number {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 1.7rem + 2vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.text-gold { color: var(--color-accent-text); }

/* ---------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------- */
.custom-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-desktop);
}
@media (max-width: 992px) { .custom-container { padding-inline: var(--pad-mobile); } }

.section-padding { padding-block: var(--sp-12); }
@media (max-width: 992px) { .section-padding { padding-block: var(--sp-10); } }

.section-sand      { background: var(--color-surface-alt); }
.section-sand-soft { background: var(--gradient-sand); }
.section-dark {
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand);
  color: var(--color-on-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5 { color: var(--color-on-dark); }
.section-dark p { color: var(--color-on-dark-muted); }

/* ---------------------------------------------------------------------
   Photo backdrops — a real <img>/background when one exists, drawn
   artwork otherwise. Both carry the same dark scrim so text stays legible.
   --------------------------------------------------------------------- */
.photo-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.photo-bg > .photo-bg__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.photo-bg > .photo-bg__media img,
.photo-bg > .photo-bg__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-photo);
  pointer-events: none;
}
.photo-bg > *:not(.photo-bg__media) { position: relative; z-index: 2; }

.texture-dots::after,
.texture-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.texture-dots::after {
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.texture-grid::after {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn-primary-custom,
.btn-secondary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 15px 30px;
  border-radius: var(--radius-btn);
  font-family: var(--font-family);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

/* Solid gold fill, navy label — 8.9:1 */
.btn-primary-custom {
  border: none;
  color: var(--color-on-gold);
  background: var(--gold-500);
  box-shadow: var(--shadow-gold), var(--shadow-inset-top);
}
.btn-primary-custom:hover,
.btn-primary-custom:focus-visible {
  color: var(--color-on-gold);
  background: var(--gold-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-lg), var(--shadow-inset-top);
}
.btn-primary-custom:active { transform: translateY(0); box-shadow: var(--shadow-gold); }

.btn-secondary-custom {
  background-color: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary-custom:hover,
.btn-secondary-custom:focus-visible {
  color: var(--color-primary);
  border-color: var(--gold-500);
  background-color: var(--gold-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-secondary-custom.on-dark {
  color: var(--color-on-dark);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}
.btn-secondary-custom.on-dark:hover {
  color: var(--color-on-dark);
  background: rgba(255,255,255,.12);
  border-color: var(--gold-500);
}

.btn-sm-custom { padding: 10px 20px; font-size: var(--fs-xs); }
.btn-lg-custom { padding: 18px 38px; font-size: var(--fs-body); }

/* Directional glyphs mirror with the script. */
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-arrow-left::before,
[dir="rtl"] .bi-chevron-right::before,
[dir="rtl"] .bi-chevron-left::before,
[dir="rtl"] .bi-arrow-right-short::before,
[dir="rtl"] .bi-arrow-left-short::before {
  display: inline-block;
  transform: scaleX(-1);
}

/* Text link that grows a gold disc around its arrow on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.link-arrow i {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  background: var(--gold-100);
  color: var(--color-on-gold);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.link-arrow:hover { color: var(--color-primary); }
.link-arrow:hover i { background: var(--gold-500); transform: translateX(2px); }
[dir="rtl"] .link-arrow:hover i { transform: translateX(-2px); }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card-custom {
  position: relative;
  height: 100%;
  padding: var(--sp-6);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card-custom:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-300);
}
.card-surface-alt { background-color: var(--color-surface-alt); border-color: transparent; }
.card-feature { padding: var(--sp-7); }
@media (max-width: 768px) { .card-feature { padding: var(--sp-5); } }

/* Cards that float over a photo section */
.card-float {
  background: #FFFFFF;
  border: none;
  box-shadow: var(--shadow-xl);
}

/* Glass card for dark backdrops */
.glass-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
  color: var(--color-on-dark);
  padding: var(--sp-6);
  height: 100%;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245,179,1,.5);
  box-shadow: 0 16px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.24);
}
.glass-card p { color: var(--color-on-dark-muted); }

/* ---------------------------------------------------------------------
   Icon plates — solid gold fill, navy glyph (never a hollow outline)
   --------------------------------------------------------------------- */
.icon-3d {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  font-size: 27px;
  line-height: 1;
  color: var(--color-on-gold);
  background: var(--gradient-gold);
  box-shadow:
    0 10px 20px -6px rgba(245,179,1,.5),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 6px rgba(140,106,0,.18);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  flex-shrink: 0;
}
.icon-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 48%);
  pointer-events: none;
}
.icon-3d > i, .icon-3d > svg { position: relative; z-index: 1; }

/* Soft variant: gold glyph on a pale disc, fills gold on card hover */
.icon-3d-soft {
  background: var(--gold-100);
  color: var(--gold-ink);
  box-shadow: none;
}
.icon-3d-soft::after { display: none; }
.card-custom:hover .icon-3d-soft { background: var(--gold-500); color: var(--color-on-gold); box-shadow: var(--shadow-gold); }

.icon-3d-navy {
  background: linear-gradient(145deg, var(--navy-600) 0%, var(--navy-900) 100%);
  color: var(--gold-500);
  box-shadow: 0 10px 20px -6px rgba(15,26,51,.5), inset 0 1px 0 rgba(255,255,255,.14);
}
.icon-3d-glass {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--gold-500);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.icon-3d-glass::after { display: none; }
.icon-3d-sm { width: 48px; height: 48px; border-radius: 13px; font-size: 20px; }
.icon-3d-lg { width: 78px; height: 78px; border-radius: 22px; font-size: 33px; }

.card-custom:hover .icon-3d:not(.icon-3d-soft),
.glass-card:hover .icon-3d { transform: translateY(-3px) scale(1.04); }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-control-custom, .form-select-custom {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background-color: #FFFFFF;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--fs-ui);
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.form-control-custom::placeholder { color: var(--color-text-subtle); }
.form-control-custom:focus, .form-select-custom:focus {
  border-color: var(--gold-500);
  outline: none;
  box-shadow: 0 0 0 4px rgba(245,179,1,.2);
}
.form-label-custom {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.invalid-feedback { color: var(--color-danger); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.is-invalid-custom { border-color: var(--color-danger) !important; }

/* ---------------------------------------------------------------------
   Header — thin social strip + white sticky bar that blurs on scroll
   --------------------------------------------------------------------- */
.topbar {
  background: var(--gray-50);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.topbar a { color: var(--navy-800); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.topbar a:hover { color: var(--color-accent-text); }
.topbar-social {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  color: var(--navy-800);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.topbar-social:hover { background: var(--gold-500); color: var(--navy-800); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  background-color: rgba(255,255,255,.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 4px 20px rgba(27,42,78,.09);
}
.site-header .nav-link-custom {
  position: relative;
  text-decoration: none;
  color: var(--navy-800);
  font-weight: var(--fw-medium);
  font-size: var(--fs-ui);
  padding-block: var(--sp-2);
  transition: color var(--dur) var(--ease-out);
}
.site-header .nav-link-custom::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--gold-500);
  transition: width var(--dur) var(--ease-out);
}
.site-header .nav-link-custom:hover::after,
.site-header .nav-link-custom.active::after { width: 100%; }
.site-header .nav-link-custom.active { font-weight: var(--fw-bold); }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--gold-500);
  color: var(--navy-800);
  font-size: 21px;
  box-shadow: var(--shadow-gold);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-on-dark);
  padding-block: var(--sp-13) var(--sp-12);
  background: var(--gradient-brand);
}
.hero-section h1 { color: #FFFFFF; }
.hero-section p  { color: rgba(255,255,255,.9); }
.hero-section .heading-rule::after { background: var(--gold-500); }

.hero-cards { margin-top: calc(var(--sp-10) * -1); position: relative; z-index: 5; }

/* ---------------------------------------------------------------------
   Bento services grid
   --------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: var(--sp-5);
}
.bento-item { grid-column: span 2; grid-row: span 1; }
.bento-item.bento-large  { grid-column: span 3; grid-row: span 2; }
.bento-item.bento-medium { grid-column: span 3; grid-row: span 1; }
.bento-item .card-custom { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-4); overflow: hidden; }
@media (max-width: 992px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .bento-item, .bento-item.bento-large, .bento-item.bento-medium { grid-column: span 2; grid-row: auto; }
  .bento-item .card-custom { min-height: 210px; }
}

/* ---------------------------------------------------------------------
   Stats row
   --------------------------------------------------------------------- */
.stat-col { position: relative; }
.stat-col + .stat-col::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: var(--color-border);
}
@media (max-width: 768px) { .stat-col + .stat-col::before { display: none; } }

/* ---------------------------------------------------------------------
   Stepper
   --------------------------------------------------------------------- */
.stepper-horizontal { display: flex; justify-content: space-between; gap: var(--sp-3); position: relative; }
.stepper-horizontal::before {
  content: "";
  position: absolute;
  top: 27px;
  inset-inline: 6%;
  height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--navy-500) 60%, var(--gray-300) 100%);
  opacity: .6;
  z-index: 0;
}
[dir="rtl"] .stepper-horizontal::before {
  background: linear-gradient(270deg, var(--gold-500) 0%, var(--navy-500) 60%, var(--gray-300) 100%);
}
.step-item {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.step-circle {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  background: linear-gradient(145deg, var(--navy-500), var(--navy-700));
  border: none;
  box-shadow: 0 8px 16px -5px rgba(27,42,78,.4), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  flex-shrink: 0;
}
.step-item:hover .step-circle { transform: translateY(-3px); }
.step-item.completed .step-circle { background: linear-gradient(145deg, var(--navy-600), var(--navy-900)); }
.step-item.active .step-circle {
  background: var(--gradient-gold);
  color: var(--color-on-gold);
  box-shadow: var(--shadow-gold-lg), var(--shadow-inset-top);
}
.step-title { font-weight: var(--fw-bold); font-size: var(--fs-ui); color: var(--color-text); }
.step-desc  { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-snug); }
.section-dark .step-title { color: var(--color-on-dark); }
.section-dark .step-desc { color: var(--color-on-dark-muted); }

@media (max-width: 992px) {
  .stepper-horizontal { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .stepper-horizontal::before,
  [dir="rtl"] .stepper-horizontal::before {
    inset-inline-start: 27px; inset-inline-end: auto;
    top: 0; bottom: 0; width: 3px; height: auto;
    background: linear-gradient(180deg, var(--gold-500) 0%, var(--navy-500) 60%, var(--gray-300) 100%);
  }
  .step-item { flex-direction: row; text-align: start; width: 100%; align-items: flex-start; }
}

.stepper-vertical { display: flex; flex-direction: column; }
.stepper-vertical .step-item { flex-direction: row; align-items: flex-start; text-align: start; padding-bottom: var(--sp-6); position: relative; }
.stepper-vertical .step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px; bottom: 0;
  inset-inline-start: 21px;
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
}
.stepper-vertical .step-circle { width: 44px; height: 44px; font-size: var(--fs-ui); }
.stepper-vertical .step-text { padding-inline-start: var(--sp-5); flex: 1; }

/* ---------------------------------------------------------------------
   Media tiles & project cards
   --------------------------------------------------------------------- */
.img-tile {
  position: relative;
  width: 100%; height: 100%;
  min-height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 600ms var(--ease-out);
}
.img-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-tile svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile-brand  { background: var(--gradient-brand); color: #FFFFFF; }
.tile-accent { background: linear-gradient(155deg, var(--navy-600) 0%, var(--navy-800) 100%); color: var(--gold-500); }
.tile-deep   { background: linear-gradient(155deg, var(--navy-700) 0%, var(--navy-900) 100%); color: var(--gold-500); }
.tile-alt    { background: linear-gradient(155deg, var(--navy-500) 0%, var(--navy-700) 100%); color: var(--gold-500); }

.media-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  display: block;
  text-decoration: none;
  color: inherit;
}
.media-card:hover { box-shadow: var(--shadow-xl); }
.media-card:hover .img-tile { transform: scale(1.03); }
/* gold rule pinned to the bottom edge of every project image */
.media-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 5px;
  background: var(--gold-500);
  z-index: 5;
}
.media-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 42%, rgba(0,0,0,0) 75%);
  opacity: .85;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.media-card:hover .media-card__overlay { opacity: 1; }
.media-card__caption {
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-5);
  color: #FFFFFF;
  transform: translateY(10px);
  transition: transform var(--dur) var(--ease-out);
}
.media-card:hover .media-card__caption { transform: translateY(0); }
.media-card__caption h3, .media-card__caption h4 { color: #FFFFFF; margin-bottom: var(--sp-1); }
.media-card__meta {
  color: var(--gold-500);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--dur) var(--ease-out), max-height var(--dur) var(--ease-out);
}
.media-card:hover .media-card__meta { opacity: 1; max-height: 60px; }

/* Category tag on news cards */
.tag-soft {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  background: var(--gold-100);
  color: var(--gold-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* Client logo grid */
.logo-cell {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: var(--navy-600);
  font-weight: var(--fw-bold);
  text-align: center;
  transition: all var(--dur) var(--ease-out);
}
.logo-cell:hover { border-color: var(--gold-500); box-shadow: var(--shadow-md); color: var(--navy-800); }

/* ---------------------------------------------------------------------
   Avatars
   --------------------------------------------------------------------- */
.avatar-circle {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--color-on-gold);
  background: var(--gradient-gold);
  box-shadow: 0 6px 16px -4px rgba(245,179,1,.45);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-circle > img { width: 100%; height: 100%; object-fit: cover; }
.avatar-circle.avatar-lg { width: 88px; height: 88px; font-size: 28px; }

/* ---------------------------------------------------------------------
   Footer & CTA
   --------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--color-on-dark);
}
.site-footer h4, .site-footer h5 { color: #FFFFFF; }
.site-footer p, .site-footer li { color: var(--color-on-dark-muted); }
.site-footer a { color: var(--color-on-dark-muted); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.site-footer a:hover { color: var(--gold-500); }
.social-dot {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #FFFFFF;
  transition: all var(--dur) var(--ease-out);
}
.social-dot:hover { background: var(--gold-500); border-color: transparent; color: var(--navy-800); transform: translateY(-2px); }

.cta-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background: var(--gradient-brand);
  color: var(--color-on-dark);
  padding: var(--sp-11) var(--sp-9);
  box-shadow: var(--shadow-xl);
}
.cta-banner h2 { color: #FFFFFF; }
.cta-banner p { color: var(--color-on-dark-muted); }
.cta-banner > * { position: relative; z-index: 2; }
@media (max-width: 768px) { .cta-banner { padding: var(--sp-8) var(--sp-5); } }

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */
.badge-custom {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--gray-50);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.badge-custom.status-new, .badge-custom.status-pending, .badge-custom.status-planning { background: var(--gold-100); color: var(--gold-ink); border-color: transparent; }
.badge-custom.status-in_progress, .badge-custom.status-confirmed, .badge-custom.status-contacted, .badge-custom.status-site_visit { background: rgba(27,42,78,.09); color: var(--navy-800); border-color: transparent; }
.badge-custom.status-completed, .badge-custom.status-accepted, .badge-custom.status-resolved, .badge-custom.status-quoted { background: rgba(46,125,50,.13); color: var(--color-success); border-color: transparent; }
.badge-custom.status-rejected, .badge-custom.status-cancelled, .badge-custom.status-on_hold { background: rgba(179,38,30,.11); color: var(--color-danger); border-color: transparent; }

.divider-line { height: 1px; background: var(--color-border); border: none; margin: 0; }

/* ---------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1.active { transition-delay: 80ms; }
.reveal-delay-2.active { transition-delay: 160ms; }
.reveal-delay-3.active { transition-delay: 240ms; }
.reveal-delay-4.active { transition-delay: 320ms; }
.reveal-delay-5.active { transition-delay: 400ms; }

/* ---------------------------------------------------------------------
   Quote wizard
   --------------------------------------------------------------------- */
.wizard-progress { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.wizard-progress-step { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--gray-200); transition: background var(--dur) var(--ease-out); }
.wizard-progress-step.done { background: var(--gold-500); }
.wizard-option {
  height: 100%;
  padding: var(--sp-5);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.wizard-option:hover { border-color: var(--gold-500); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.wizard-option.selected,
.wizard-option input:checked ~ .wizard-option-body {
  border-color: var(--gold-500);
  background: var(--gold-50);
  box-shadow: var(--shadow-gold);
}

/* ---------------------------------------------------------------------
   Admin
   --------------------------------------------------------------------- */
.table-custom { width: 100%; border-collapse: collapse; }
.table-custom th {
  text-align: start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-subtle);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1.5px solid var(--color-border-strong);
  white-space: nowrap;
}
[lang="en"] .table-custom th { text-transform: uppercase; letter-spacing: .06em; }
.table-custom td { padding: var(--sp-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; font-size: var(--fs-ui); }
.table-custom tr:hover td { background: var(--gray-50); }

.admin-sidebar {
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--color-on-dark-muted);
  min-height: 100vh;
}
.admin-sidebar a {
  display: block;
  padding: 11px 18px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-on-dark-muted);
  text-decoration: none;
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  transition: all var(--dur) var(--ease-out);
}
.admin-sidebar a:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
.admin-sidebar a.active {
  background: rgba(245,179,1,.16);
  color: var(--gold-500);
  font-weight: var(--fw-bold);
  box-shadow: inset 2px 0 0 var(--gold-500);
}
[dir="rtl"] .admin-sidebar a.active { box-shadow: inset -2px 0 0 var(--gold-500); }

/* ---------------------------------------------------------------------
   Mobile — same identity, lighter effects
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .glass-card, .icon-3d-glass { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .card-custom:hover, .media-card:hover, .glass-card:hover { transform: none; }
  .hero-section { padding-block: var(--sp-10); }
  .hero-cards { margin-top: var(--sp-6); }
  .icon-3d { width: 56px; height: 56px; border-radius: 15px; font-size: 23px; }
  .btn-primary-custom, .btn-secondary-custom { padding: 14px 24px; }
  .section-padding { padding-block: var(--sp-9); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card { background: rgba(27,42,78,.92); }
  .site-header.is-scrolled { background-color: #FFFFFF; }
}