/* ==========================================================================
   SDC Group — Global stylesheet  (sdc-global.css)
   "From Sun to Harvest" / من الشمس إلى السنبلة
   --------------------------------------------------------------------------
   • All design tokens live in :root below — change a colour or size here once.
   • Direction-aware: uses logical properties (margin-inline-start, inset-inline…)
     so the same rules work for Arabic (dir="rtl") and English (dir="ltr").
   • Contrast rules for the neon green (#0ed92e):
       - NEVER white text on green, NEVER green text on white/light surfaces.
       - Green = accent (glow, icon, line, data highlight) or a button fill
         with DEEP NAVY text (#0b1f45 on #0ed92e ≈ 8.6:1).
   • Sections are styled through CSS classes added in Divi
     (Advanced ▸ Attributes ▸ class). Class names are prefixed "sdc-".
   ========================================================================== */

/* -------------------------------------------------------------- 1. TOKENS */
:root {
  /* Brand colours */
  --sdc-blue: #3056aa;          /* primary — headings, links, primary buttons (6.9:1 on white) */
  --sdc-blue-600: #26468c;      /* hover / pressed */
  --sdc-blue-100: #e3eaf7;      /* tints */
  --sdc-green: #0ed92e;         /* accent — never as text on light, never under white text */
  --sdc-green-soft: rgba(14, 217, 46, .16);
  --sdc-green-glow: rgba(14, 217, 46, .45);
  --sdc-navy: #0b1f45;          /* dark sections + text on green */
  --sdc-navy-800: #102a5a;
  --sdc-navy-700: #18366e;
  --sdc-surface: #f5f8fc;       /* light surface */
  --sdc-white: #ffffff;
  --sdc-text: #1e2a3a;          /* body text (13.9:1 on white) */
  --sdc-text-muted: #4a5a70;    /* secondary text (7.0:1 on white) */
  --sdc-text-on-dark: #e8eef8;  /* body text on navy (14:1) */
  --sdc-muted-on-dark: #a9b8d3; /* secondary text on navy (8.1:1) */
  --sdc-line: #d6e0ee;          /* hairlines on light */
  --sdc-line-dark: rgba(169, 184, 211, .22); /* hairlines on navy */
  --sdc-sun: #ffb547;           /* sunrise warm accent (illustration only) */

  /* Typography — families */
  --sdc-font-head-ar: "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --sdc-font-body-ar: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  --sdc-font-head-en: "Manrope", "Inter", system-ui, sans-serif;
  --sdc-font-body-en: "Inter", "Manrope", system-ui, sans-serif;
  --sdc-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sdc-font-head: var(--sdc-font-head-en);
  --sdc-font-body: var(--sdc-font-body-en);

  /* Type scale — Major Third (×1.25), fluid between 360px and 1440px */
  --sdc-fs-xs: .8rem;                                      /* 12.8 */
  --sdc-fs-sm: .875rem;                                    /* 14   */
  --sdc-fs-base: 1rem;                                     /* 16   */
  --sdc-fs-md: 1.25rem;                                    /* 20   */
  --sdc-fs-lg: clamp(1.35rem, 1.2rem + .6vw, 1.563rem);    /* → 25 */
  --sdc-fs-xl: clamp(1.6rem, 1.35rem + 1vw, 1.953rem);     /* → 31 */
  --sdc-fs-2xl: clamp(1.95rem, 1.5rem + 1.6vw, 2.441rem);  /* → 39 */
  --sdc-fs-3xl: clamp(2.3rem, 1.6rem + 2.6vw, 3.052rem);   /* → 49 */
  --sdc-fs-4xl: clamp(2.6rem, 1.6rem + 3.8vw, 3.815rem);   /* → 61 */
  --sdc-fs-5xl: clamp(2.9rem, 1.5rem + 5.2vw, 4.768rem);   /* → 76 */
  --sdc-lh-tight: 1.15;
  --sdc-lh-body: 1.7;

  /* Spacing (4px base) */
  --sdc-space-1: .25rem;
  --sdc-space-2: .5rem;
  --sdc-space-3: .75rem;
  --sdc-space-4: 1rem;
  --sdc-space-5: 1.5rem;
  --sdc-space-6: 2rem;
  --sdc-space-7: 3rem;
  --sdc-space-8: 4rem;
  --sdc-space-9: 6rem;
  --sdc-space-10: 8rem;
  --sdc-section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --sdc-container: 1200px;
  --sdc-gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);

  /* Shape + depth */
  --sdc-radius-sm: 8px;
  --sdc-radius: 14px;
  --sdc-radius-lg: 24px;
  --sdc-radius-pill: 999px;
  --sdc-shadow-sm: 0 1px 2px rgba(11, 31, 69, .06), 0 2px 8px rgba(11, 31, 69, .06);
  --sdc-shadow: 0 10px 30px -10px rgba(11, 31, 69, .22);
  --sdc-shadow-lg: 0 30px 60px -20px rgba(11, 31, 69, .35);
  --sdc-glow: 0 0 0 1px rgba(14, 217, 46, .35), 0 0 32px rgba(14, 217, 46, .35);

  /* Motion */
  --sdc-ease: cubic-bezier(.22, .61, .36, 1);
  --sdc-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sdc-dur-fast: 160ms;
  --sdc-dur: 320ms;
  --sdc-dur-slow: 700ms;

  /* Direction helper: 1 in LTR, -1 in RTL (used for transforms/arrows) */
  --sdc-dir: 1;

  /* Focus ring */
  --sdc-focus: 0 0 0 3px var(--sdc-white), 0 0 0 6px var(--sdc-blue);
  --sdc-focus-dark: 0 0 0 3px var(--sdc-navy), 0 0 0 6px var(--sdc-green);
}

/* Arabic switches families + direction helper */
:root:lang(ar),
html[dir="rtl"] {
  --sdc-font-head: var(--sdc-font-head-ar);
  --sdc-font-body: var(--sdc-font-body-ar);
  --sdc-dir: -1;
}

/* -------------------------------------------------------------- 2. BASE
   Scoped to pages built with this design (body class `sdc-site`, added by functions.php / the mu-plugin)
   so legacy pages keep their own typography. :where() keeps the original (low) specificity. */
body:where(.sdc-site) {
  font-family: var(--sdc-font-body);
  font-size: var(--sdc-fs-base);
  line-height: var(--sdc-lh-body);
  color: var(--sdc-text);
  background: var(--sdc-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(body.sdc-site) :is(h1, h2, h3, h4, h5, h6),
.sdc-display {
  font-family: var(--sdc-font-head);
  font-weight: 800;
  line-height: var(--sdc-lh-tight);
  color: var(--sdc-blue);
  letter-spacing: -.015em;
  padding-bottom: 0;
}
:where(body.sdc-site):lang(ar) :is(h1, h2, h3, h4),
:lang(ar) .sdc-display { letter-spacing: 0; line-height: 1.3; }

:where(body.sdc-site) h1 { font-size: var(--sdc-fs-4xl); }
:where(body.sdc-site) h2 { font-size: var(--sdc-fs-3xl); }
:where(body.sdc-site) h3 { font-size: var(--sdc-fs-xl); }
:where(body.sdc-site) h4 { font-size: var(--sdc-fs-lg); }
:where(body.sdc-site) p { padding-bottom: 0; margin-block-end: var(--sdc-space-4); }
:where(body.sdc-site) p:last-child { margin-block-end: 0; }

:where(body.sdc-site) a { color: var(--sdc-blue); text-underline-offset: .2em; }
:where(body.sdc-site) a:hover { color: var(--sdc-blue-600); }

/* Dark sections flip the text colours */
.sdc-dark,
.sdc-dark p,
.sdc-dark li { color: var(--sdc-text-on-dark); }
.sdc-dark h1, .sdc-dark h2, .sdc-dark h3, .sdc-dark h4 { color: var(--sdc-white); }
.sdc-dark a:not(.et_pb_button):not(.sdc-btn) { color: var(--sdc-white); }

/* Monospace data figures (engineering-precision touch) */
.sdc-mono,
.sdc-figure { font-family: var(--sdc-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Visually hidden (screen-reader only) */
.sdc-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Focus — visible on every interactive element */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sdc-focus);
  border-radius: var(--sdc-radius-sm);
}
.sdc-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  box-shadow: var(--sdc-focus-dark);
}

/* Skip link (header template adds <a class="sdc-skip" href="#main">) */
.sdc-skip {
  position: absolute; inset-inline-start: var(--sdc-space-4); top: -100px; z-index: 100000;
  background: var(--sdc-navy); color: var(--sdc-white) !important; padding: .75rem 1.25rem;
  border-radius: var(--sdc-radius-sm); font-weight: 700; text-decoration: none;
}
.sdc-skip:focus { top: var(--sdc-space-4); }

/* -------------------------------------------------------------- 3. LAYOUT HELPERS */
.sdc-section { position: relative; padding-block: var(--sdc-section-y) !important; overflow: clip; }
.sdc-section--tight { padding-block: var(--sdc-space-8) !important; }
.sdc-surface { background-color: var(--sdc-surface) !important; }
.sdc-navy { background-color: var(--sdc-navy) !important; }

.sdc-section .et_pb_row,
.sdc-row { width: min(100% - 2 * var(--sdc-gutter), var(--sdc-container)) !important; max-width: none !important; }

.sdc-center { text-align: center; }
.sdc-center .sdc-lead { margin-inline: auto; }

/* Blueprint grid — thin engineering lines */
.sdc-grid-bg { position: relative; isolation: isolate; }
.sdc-grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(48, 86, 170, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(48, 86, 170, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
}
.sdc-dark.sdc-grid-bg::before {
  background-image:
    linear-gradient(to right, rgba(169, 184, 211, .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(169, 184, 211, .08) 1px, transparent 1px);
}

/* -------------------------------------------------------------- 4. TYPOGRAPHIC COMPONENTS */
.sdc-eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--sdc-blue);
  margin-block-end: var(--sdc-space-4);
}
:lang(ar) .sdc-eyebrow { font-family: var(--sdc-font-body-ar); letter-spacing: 0; font-size: var(--sdc-fs-sm); }
.sdc-eyebrow::before {
  content: ""; inline-size: 28px; block-size: 2px; background: var(--sdc-green);
  box-shadow: 0 0 10px var(--sdc-green-glow);
}
.sdc-dark .sdc-eyebrow { color: var(--sdc-green); } /* green text is fine on navy (8.6:1) */

.sdc-lead { font-size: var(--sdc-fs-md); line-height: 1.6; color: var(--sdc-text-muted); max-width: 62ch; }
.sdc-dark .sdc-lead { color: var(--sdc-muted-on-dark); }

/* Section heading block */
.sdc-head { margin-block-end: var(--sdc-space-7); }
.sdc-head h2 { margin-block-end: var(--sdc-space-4); }
.sdc-head--center { text-align: center; }
.sdc-head--center .sdc-lead { margin-inline: auto; }

/* Highlight span — green underline sweep (works on light & dark) */
.sdc-hl { position: relative; white-space: nowrap; }
.sdc-hl::after {
  content: ""; position: absolute; inset-inline: -.05em; bottom: .05em; block-size: .18em;
  background: var(--sdc-green); border-radius: 2px; z-index: -1; opacity: .85;
  transform-origin: var(--sdc-hl-origin, left); transform: scaleX(1);
}
[dir="rtl"] .sdc-hl::after { --sdc-hl-origin: right; }

/* -------------------------------------------------------------- 5. BUTTONS
   Apply the class to the Divi Button module (Advanced ▸ Attributes ▸ class).
   Selectors cover both the wrapper and the <a> because Divi may place the
   class on either element. */
.sdc-btn,
.sdc-btn .et_pb_button,
.et_pb_button.sdc-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--sdc-font-head) !important; font-weight: 800 !important;
  font-size: var(--sdc-fs-base) !important; line-height: 1.2 !important;
  padding: .95em 1.6em !important; border-radius: var(--sdc-radius-pill) !important;
  border: 2px solid transparent !important; text-decoration: none !important;
  transition: transform var(--sdc-dur-fast) var(--sdc-ease), box-shadow var(--sdc-dur) var(--sdc-ease),
              background-color var(--sdc-dur) var(--sdc-ease), color var(--sdc-dur) var(--sdc-ease);
  min-block-size: 48px; /* touch target */
}
.sdc-btn .et_pb_button::after, .et_pb_button.sdc-btn::after { display: none !important; } /* hide Divi arrow icon */
.sdc-btn .et_pb_button:hover, .et_pb_button.sdc-btn:hover { padding: .95em 1.6em !important; }

/* Arrow glyph that mirrors per direction: add <span class="sdc-arrow"></span> or use .sdc-btn--arrow */
.sdc-btn--arrow .et_pb_button::before, .et_pb_button.sdc-btn--arrow::before,
.sdc-arrow::before {
  content: "→"; display: inline-block; font-family: system-ui, sans-serif; order: 2;
  transform: scaleX(var(--sdc-dir)); transition: translate var(--sdc-dur) var(--sdc-ease);
  position: static !important; opacity: 1 !important; margin: 0 !important;
}
.sdc-btn--arrow .et_pb_button:hover::before, .et_pb_button.sdc-btn--arrow:hover::before { translate: calc(4px * var(--sdc-dir)) 0; }

/* Green fill — NAVY text only */
.sdc-btn--green .et_pb_button, .et_pb_button.sdc-btn--green, a.sdc-btn--green {
  background-color: var(--sdc-green) !important; color: var(--sdc-navy) !important;
  box-shadow: 0 8px 24px -8px var(--sdc-green-glow);
}
.sdc-btn--green .et_pb_button:hover, .et_pb_button.sdc-btn--green:hover, a.sdc-btn--green:hover {
  background-color: #34e64f !important; color: var(--sdc-navy) !important;
  transform: translateY(-2px); box-shadow: 0 14px 34px -10px var(--sdc-green-glow);
}

/* Blue fill — white text (6.9:1) */
.sdc-btn--blue .et_pb_button, .et_pb_button.sdc-btn--blue, a.sdc-btn--blue {
  background-color: var(--sdc-blue) !important; color: var(--sdc-white) !important;
}
.sdc-btn--blue .et_pb_button:hover, .et_pb_button.sdc-btn--blue:hover, a.sdc-btn--blue:hover {
  background-color: var(--sdc-blue-600) !important; transform: translateY(-2px);
}

/* Blue outline */
.sdc-btn--outline .et_pb_button, .et_pb_button.sdc-btn--outline, a.sdc-btn--outline {
  background-color: transparent !important; color: var(--sdc-blue) !important;
  border-color: var(--sdc-blue) !important;
}
.sdc-btn--outline .et_pb_button:hover, .et_pb_button.sdc-btn--outline:hover, a.sdc-btn--outline:hover {
  background-color: var(--sdc-blue) !important; color: var(--sdc-white) !important;
}
/* Outline on dark backgrounds becomes white outline */
.sdc-dark .sdc-btn--outline .et_pb_button, .sdc-dark .et_pb_button.sdc-btn--outline, .sdc-dark a.sdc-btn--outline {
  color: var(--sdc-white) !important; border-color: rgba(255, 255, 255, .7) !important;
}
.sdc-dark .sdc-btn--outline .et_pb_button:hover, .sdc-dark .et_pb_button.sdc-btn--outline:hover, .sdc-dark a.sdc-btn--outline:hover {
  background-color: var(--sdc-white) !important; color: var(--sdc-navy) !important; border-color: var(--sdc-white) !important;
}

/* Keyboard focus must win over the buttons' glow/hover shadows (WCAG 2.4.7) */
.et_pb_button.sdc-btn:focus-visible, .sdc-btn .et_pb_button:focus-visible, a.sdc-btn:focus-visible,
.sdc-card:focus-within, .sdc-pcard:focus-within, .sdc-sector:focus-visible, .sdc-ccard:focus-visible {
  outline: none !important; box-shadow: var(--sdc-focus) !important;
}
.sdc-dark .et_pb_button.sdc-btn:focus-visible, .sdc-dark .sdc-btn .et_pb_button:focus-visible, .sdc-dark a.sdc-btn:focus-visible,
.sdc-ccard:focus-visible, .sdc-header .et_pb_button:focus-visible { box-shadow: var(--sdc-focus-dark) !important; }

/* Button group inside a column */
.sdc-btn-row { display: flex !important; flex-wrap: wrap; gap: var(--sdc-space-4); align-items: center; }
.sdc-btn-row > .et_pb_module { margin: 0 !important; }

/* -------------------------------------------------------------- 6. HERO */
.sdc-hero {
  position: relative; min-block-size: min(100svh, 980px); display: flex !important; align-items: center;
  background: radial-gradient(120% 90% at 50% 100%, #163a7a 0%, var(--sdc-navy) 55%, #050f24 100%) !important;
  color: var(--sdc-text-on-dark); overflow: clip; isolation: isolate;
  padding-block: calc(var(--sdc-space-10) + 40px) var(--sdc-space-9) !important; /* room for the transparent header */
}
.sdc-hero .et_pb_row { position: relative; z-index: 2; }
.sdc-hero h1 { color: var(--sdc-white); font-size: var(--sdc-fs-5xl); max-width: 15ch; margin-block-end: var(--sdc-space-5); }
:lang(ar) .sdc-hero h1 { max-width: 13ch; }
.sdc-hero .sdc-lead { color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-md); max-width: 52ch; }
.sdc-hero .sdc-hero__copy { max-width: 640px; }

/* Video hero (Kling-generated footage) — parallax handled in sdc-motion.js */
.sdc-vhero { position: absolute; inset: 0; overflow: hidden; background: #050f24 var(--poster, none) center / cover no-repeat; }
.sdc-vhero__video { position: absolute; inset: -6% 0 auto; inline-size: 100%; block-size: 112%; object-fit: cover; transform: scale(1.12); transform-origin: 50% 40%; will-change: transform; opacity: 0; transition: opacity 1.2s var(--sdc-ease); }
.sdc-vhero.is-playing .sdc-vhero__video, .sdc-vhero.is-static .sdc-vhero__video { opacity: 1; }
.sdc-vhero.is-static .sdc-vhero__video { transform: none; inset: 0; block-size: 100%; }
.sdc-vhero::after { /* cinematic grade: lifts the navy brand tone and keeps the copy side readable */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 15, 36, .55) 0%, rgba(5, 15, 36, 0) 30%, rgba(5, 15, 36, 0) 60%, rgba(5, 15, 36, .75) 100%);
}
.sdc-vhero__toggle {
  position: absolute; z-index: 3; inset-block-end: var(--sdc-space-5); inset-inline-end: var(--sdc-space-5); pointer-events: auto;
  inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(5, 15, 36, .45);
  color: var(--sdc-white); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); font-size: 14px;
}
.sdc-vhero__toggle:hover { border-color: var(--sdc-green); }
.sdc-vhero__toggle:focus-visible { outline: none; box-shadow: var(--sdc-focus-dark); }
.sdc-vhero__toggle .is-play { display: none; }
.sdc-vhero.is-paused .sdc-vhero__toggle .is-play { display: inline; }
.sdc-vhero.is-paused .sdc-vhero__toggle .is-pause { display: none; }
.sdc-scene-module:has(.sdc-vhero) { pointer-events: auto; }
.sdc-scene-module:has(.sdc-vhero) .sdc-vhero { pointer-events: none; }

/* Data ticker under hero copy */
.sdc-hero__data {
  display: flex; flex-wrap: wrap; gap: var(--sdc-space-6); margin-block-start: var(--sdc-space-7);
  padding-block-start: var(--sdc-space-5); border-block-start: 1px solid var(--sdc-line-dark);
  font-family: var(--sdc-font-mono); color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm);
}
.sdc-hero__data strong { display: block; color: var(--sdc-white); font-size: var(--sdc-fs-lg); font-weight: 600; }
.sdc-hero__data strong em { font-style: normal; color: var(--sdc-green); }

/* 3D mount — sits behind the hero copy. The Code module holding it gets class sdc-scene-module */
.sdc-scene-module { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; pointer-events: none; }
.sdc-scene { position: absolute; inset: 0; overflow: hidden; }
.sdc-scene canvas { display: block; inline-size: 100% !important; block-size: 100% !important; }
.sdc-scene__fallback {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: opacity var(--sdc-dur-slow) var(--sdc-ease);
}
.sdc-scene.is-live .sdc-scene__fallback { opacity: 0; }
/* Copy legibility veil (copy side follows reading direction) */
.sdc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(5, 15, 36, .85) 0%, rgba(5, 15, 36, .45) 45%, rgba(5, 15, 36, 0) 75%);
}
[dir="rtl"] .sdc-hero::after {
  background: linear-gradient(to left, rgba(5, 15, 36, .85) 0%, rgba(5, 15, 36, .45) 45%, rgba(5, 15, 36, 0) 75%);
}
.sdc-hero__scroll {
  position: absolute; inset-inline-start: 50%; bottom: var(--sdc-space-5); z-index: 2; translate: -50% 0;
  font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); color: var(--sdc-muted-on-dark);
  letter-spacing: .14em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
[dir="rtl"] .sdc-hero__scroll { translate: 50% 0; }
.sdc-hero__scroll::after {
  content: ""; inline-size: 1px; block-size: 40px; background: linear-gradient(var(--sdc-green), transparent);
  animation: sdc-scroll-cue 2s var(--sdc-ease) infinite;
}
@keyframes sdc-scroll-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* -------------------------------------------------------------- 7. TRUST BAR (placeholder container) */
.sdc-trust { border-block: 1px solid var(--sdc-line); background: var(--sdc-white); }
.sdc-trust__inner { display: flex; align-items: center; gap: var(--sdc-space-6); flex-wrap: wrap; }
.sdc-trust__label { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); color: var(--sdc-text-muted); text-transform: uppercase; letter-spacing: .12em; flex: 0 0 auto; }
:lang(ar) .sdc-trust__label { font-family: var(--sdc-font-body-ar); letter-spacing: 0; font-size: var(--sdc-fs-sm); }
.sdc-logo-slot {
  flex: 1 1 320px; min-block-size: 72px; display: grid; place-items: center;
  border: 1.5px dashed var(--sdc-line); border-radius: var(--sdc-radius); color: var(--sdc-text-muted);
  font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-sm); background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(48, 86, 170, .03) 10px 20px);
}

/* -------------------------------------------------------------- 8. STORY — pinned stages */
.sdc-story { background: var(--sdc-navy) !important; }
.sdc-story__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sdc-space-8); align-items: start; }
.sdc-story__visual {
  position: sticky; top: 12vh; block-size: 76vh; border-radius: var(--sdc-radius-lg); overflow: hidden;
  background: radial-gradient(80% 80% at 50% 30%, var(--sdc-navy-700), var(--sdc-navy) 75%);
  border: 1px solid var(--sdc-line-dark);
}
.sdc-story__visual svg { inline-size: 100%; block-size: 100%; }
.sdc-story__layer { opacity: 0; transition: opacity var(--sdc-dur-slow) var(--sdc-ease); }
.sdc-story__layer.is-active { opacity: 1; }
.sdc-story__steps { display: flex; flex-direction: column; }
.sdc-story__step { min-block-size: 76vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--sdc-space-7); }
/* inactive stages dim by colour only (muted-on-dark = 8.1:1 on navy) — never below AA */
.sdc-story__step:not(.is-active) h3, .sdc-story__step:not(.is-active) .sdc-story__metric { color: var(--sdc-muted-on-dark) !important; transition: color var(--sdc-dur); }
.sdc-story__step:not(.is-active) .sdc-story__num { color: var(--sdc-muted-on-dark); }
.sdc-story__num { font-family: var(--sdc-font-mono); color: var(--sdc-green); font-size: var(--sdc-fs-sm); letter-spacing: .14em; margin-block-end: var(--sdc-space-3); }
.sdc-story__step h3 { color: var(--sdc-white); font-size: var(--sdc-fs-2xl); margin-block-end: var(--sdc-space-4); }
.sdc-story__step p { color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-md); max-width: 46ch; }
.sdc-story__metric { margin-block-start: var(--sdc-space-5); font-family: var(--sdc-font-mono); color: var(--sdc-white); font-size: var(--sdc-fs-xl); }
.sdc-story__metric small { display: block; font-size: var(--sdc-fs-sm); color: var(--sdc-muted-on-dark); font-family: var(--sdc-font-body); }
.sdc-story__progress { position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 2px; background: var(--sdc-line-dark); }
.sdc-story__progress span { display: block; inline-size: 100%; block-size: var(--p, 0%); background: var(--sdc-green); box-shadow: 0 0 12px var(--sdc-green-glow); }
.sdc-story__steps { position: relative; padding-inline-start: var(--sdc-space-6); }

/* -------------------------------------------------------------- 9. CARDS (services) */
.sdc-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sdc-space-5); }
.sdc-cards > .et_pb_module, .sdc-cards > .et_pb_group { margin: 0 !important; inline-size: auto !important; }
.sdc-card {
  position: relative; background: var(--sdc-white); border: 1px solid var(--sdc-line); border-radius: var(--sdc-radius-lg);
  padding: var(--sdc-space-6) !important; block-size: 100%; transform-style: preserve-3d; will-change: transform;
  transition: box-shadow var(--sdc-dur) var(--sdc-ease), border-color var(--sdc-dur) var(--sdc-ease), transform var(--sdc-dur) var(--sdc-ease-out);
  overflow: hidden;
}
.sdc-card:hover, .sdc-card:focus-within { box-shadow: var(--sdc-shadow-lg); border-color: rgba(48, 86, 170, .35); }
.sdc-card::after { /* moving light on tilt */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--sdc-dur);
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(14, 217, 46, .12), transparent 40%);
}
.sdc-card:hover::after { opacity: 1; }
.sdc-card__icon {
  inline-size: 56px; block-size: 56px; border-radius: var(--sdc-radius); display: grid; place-items: center;
  background: var(--sdc-navy); color: var(--sdc-green); margin-block-end: var(--sdc-space-5);
}
.sdc-card__icon img { inline-size: 30px; block-size: 30px; object-fit: contain; }
.sdc-card h3 { font-size: var(--sdc-fs-lg); margin-block-end: var(--sdc-space-3); }
.sdc-card h3 a { color: inherit; text-decoration: none; }
.sdc-card h3 a::before { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.sdc-card p { color: var(--sdc-text-muted); }
.sdc-card__more { margin-block-start: var(--sdc-space-4); font-weight: 700; color: var(--sdc-blue); display: inline-flex; gap: .4em; }
.sdc-card__more::after { content: "→"; transform: scaleX(var(--sdc-dir)); display: inline-block; }

/* -------------------------------------------------------------- 10. CALCULATOR */
.sdc-calc {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border-radius: var(--sdc-radius-lg); overflow: hidden;
  box-shadow: var(--sdc-shadow-lg); background: var(--sdc-white); border: 1px solid var(--sdc-line);
}
.sdc-calc__form { padding: clamp(1.5rem, 1rem + 2vw, 3rem); display: grid; gap: var(--sdc-space-5); }
.sdc-calc__field label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; color: var(--sdc-text); margin-block-end: var(--sdc-space-2); font-size: var(--sdc-fs-sm); }
.sdc-calc__field output { font-family: var(--sdc-font-mono); color: var(--sdc-blue); font-weight: 600; }
.sdc-calc__field input[type="range"] { inline-size: 100%; accent-color: var(--sdc-blue); block-size: 28px; cursor: pointer; }
[dir="rtl"] .sdc-calc__field input[type="range"] { direction: rtl; }
.sdc-calc__field input[type="number"] {
  inline-size: 100%; padding: .75rem 1rem; border: 1.5px solid var(--sdc-line); border-radius: var(--sdc-radius-sm);
  font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-base); color: var(--sdc-text); background: var(--sdc-surface);
}
.sdc-calc__field input[type="number"]:focus-visible { border-color: var(--sdc-blue); }
.sdc-calc__hint { font-size: var(--sdc-fs-xs); color: var(--sdc-text-muted); margin-block-start: var(--sdc-space-1); }
.sdc-calc__out {
  background: var(--sdc-navy); color: var(--sdc-text-on-dark); padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  display: grid; gap: var(--sdc-space-4); align-content: start; position: relative; isolation: isolate;
}
.sdc-calc__out::before {
  content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -30%; inline-size: 70%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(circle, var(--sdc-green-glow), transparent 65%); filter: blur(10px); opacity: .55;
}
.sdc-calc__kpi { border-block-end: 1px solid var(--sdc-line-dark); padding-block-end: var(--sdc-space-4); }
.sdc-calc__kpi:last-of-type { border: 0; }
.sdc-calc__kpi span { display: block; font-size: var(--sdc-fs-sm); color: var(--sdc-muted-on-dark); }
.sdc-calc__kpi strong { display: block; font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-2xl); color: var(--sdc-white); font-weight: 600; line-height: 1.2; }
.sdc-calc__kpi--hero strong { color: var(--sdc-green); font-size: var(--sdc-fs-3xl); text-shadow: 0 0 24px var(--sdc-green-glow); }
.sdc-calc__bars { display: grid; gap: var(--sdc-space-2); margin-block: var(--sdc-space-2); }
.sdc-calc__bar { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: var(--sdc-space-3); font-size: var(--sdc-fs-xs); color: var(--sdc-muted-on-dark); }
.sdc-calc__bar i { display: block; block-size: 10px; border-radius: 5px; background: var(--sdc-muted-on-dark); inline-size: var(--w, 100%); transition: inline-size var(--sdc-dur-slow) var(--sdc-ease-out); }
.sdc-calc__bar--solar i { background: var(--sdc-green); box-shadow: 0 0 12px var(--sdc-green-glow); }
.sdc-calc__note { font-size: var(--sdc-fs-xs); color: var(--sdc-muted-on-dark); }
.sdc-calc__out .sdc-btn--green { justify-self: start; margin-block-start: var(--sdc-space-3); }

/* -------------------------------------------------------------- 11. COUNTERS */
.sdc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--sdc-line-dark); border-radius: var(--sdc-radius-lg); overflow: hidden; }
.sdc-stat { padding: var(--sdc-space-6) var(--sdc-space-5); border-inline-end: 1px solid var(--sdc-line-dark); position: relative; }
.sdc-stat:last-child { border-inline-end: 0; }
.sdc-stat__num { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-4xl); color: var(--sdc-white); line-height: 1; font-weight: 600; display: flex; align-items: baseline; gap: .15em; }
.sdc-stat__num sup, .sdc-stat__num small { font-size: .38em; color: var(--sdc-green); font-weight: 600; vertical-align: baseline; }
.sdc-stat__label { margin-block-start: var(--sdc-space-3); color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); }
.sdc-stat::before { content: ""; position: absolute; inset-inline-start: var(--sdc-space-5); top: 0; inline-size: 32px; block-size: 2px; background: var(--sdc-green); box-shadow: 0 0 10px var(--sdc-green-glow); }
/* light variant */
.sdc-stats--light { border-color: var(--sdc-line); }
.sdc-stats--light .sdc-stat { border-color: var(--sdc-line); }
.sdc-stats--light .sdc-stat__num { color: var(--sdc-blue); }
.sdc-stats--light .sdc-stat__num sup, .sdc-stats--light .sdc-stat__num small { color: var(--sdc-navy); }
.sdc-stats--light .sdc-stat__label { color: var(--sdc-text-muted); }
.sdc-stats--light .sdc-stat::before { background: var(--sdc-blue); box-shadow: none; }

/* -------------------------------------------------------------- 12. SLIDER (featured projects) */
.sdc-slider { position: relative; }
.sdc-slider__track {
  display: flex !important; gap: var(--sdc-space-5); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-block: var(--sdc-space-2) var(--sdc-space-5); scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sdc-slider__track::-webkit-scrollbar { display: none; }
.sdc-slider__track > * { flex: 0 0 min(86%, 420px) !important; scroll-snap-align: start; margin: 0 !important; inline-size: auto !important; }
.sdc-slider__nav { display: flex; gap: var(--sdc-space-3); justify-content: flex-end; margin-block-start: var(--sdc-space-4); }
.sdc-slider__btn {
  inline-size: 52px; block-size: 52px; border-radius: 50%; border: 1.5px solid var(--sdc-line); background: var(--sdc-white);
  color: var(--sdc-blue); display: grid; place-items: center; cursor: pointer; font-size: 1.25rem;
  transition: background var(--sdc-dur) var(--sdc-ease), color var(--sdc-dur) var(--sdc-ease), border-color var(--sdc-dur);
}
.sdc-slider__btn:hover { background: var(--sdc-blue); color: var(--sdc-white); border-color: var(--sdc-blue); }
.sdc-slider__btn[disabled] { opacity: .4; cursor: default; }
.sdc-slider__btn span { display: inline-block; transform: scaleX(var(--sdc-dir)); } /* arrow mirrors in RTL */

.sdc-project-card {
  position: relative; border-radius: var(--sdc-radius-lg); overflow: hidden; background: var(--sdc-navy); color: var(--sdc-text-on-dark);
  aspect-ratio: 4 / 5; display: flex !important; flex-direction: column; justify-content: flex-end; isolation: isolate;
  padding: 0 !important;
}
.sdc-project-card .et_pb_image, .sdc-project-card__media { position: absolute !important; inset: 0; margin: 0 !important; z-index: -2; }
.sdc-project-card .et_pb_image img, .sdc-project-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.2s var(--sdc-ease-out); }
.sdc-project-card:hover img { transform: scale(1.06); }
.sdc-project-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(5, 15, 36, .95) 10%, rgba(5, 15, 36, .2) 65%, transparent); }
.sdc-project-card__body { padding: var(--sdc-space-6) !important; }
.sdc-project-card h3 { color: var(--sdc-white); font-size: var(--sdc-fs-lg); margin-block-end: var(--sdc-space-2); }
.sdc-project-card h3 a { color: inherit; text-decoration: none; }
.sdc-project-card h3 a::before { content: ""; position: absolute; inset: 0; }
.sdc-project-card__meta { display: flex; flex-wrap: wrap; gap: var(--sdc-space-3); font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); color: var(--sdc-muted-on-dark); }
.sdc-project-card__meta b { color: var(--sdc-green); font-weight: 600; }

/* -------------------------------------------------------------- 13. PROCESS TIMELINE (line draws on scroll) */
.sdc-process { position: relative; }
.sdc-process__line { position: absolute; inset-inline: 6%; top: 34px; block-size: 2px; pointer-events: none; }
.sdc-process__line svg { inline-size: 100%; block-size: 4px; overflow: visible; }
[dir="rtl"] .sdc-process__line svg { transform: scaleX(-1); } /* line draws right → left in Arabic */
.sdc-process__line path { stroke: var(--sdc-green); stroke-width: 2; fill: none; filter: drop-shadow(0 0 6px var(--sdc-green-glow)); }
.sdc-process__line .sdc-process__base { stroke: var(--sdc-line); filter: none; }
.sdc-process__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sdc-space-5); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.sdc-process__steps li { position: relative; padding: 0 !important; text-align: center; }
.sdc-process__dot {
  inline-size: 68px; block-size: 68px; margin: 0 auto var(--sdc-space-4); border-radius: 50%; display: grid; place-items: center;
  background: var(--sdc-white); border: 2px solid var(--sdc-line); font-family: var(--sdc-font-mono); font-weight: 600; color: var(--sdc-blue);
  position: relative; z-index: 1; transition: border-color var(--sdc-dur), box-shadow var(--sdc-dur), background var(--sdc-dur), color var(--sdc-dur);
}
.sdc-process__steps li.is-on .sdc-process__dot { border-color: var(--sdc-green); box-shadow: var(--sdc-glow); background: var(--sdc-navy); color: var(--sdc-green); }
.sdc-process__steps h3 { font-size: var(--sdc-fs-md); margin-block-end: var(--sdc-space-2); }
.sdc-process__steps p { font-size: var(--sdc-fs-sm); color: var(--sdc-text-muted); }

/* -------------------------------------------------------------- 14. TESTIMONIALS (Divi testimonial module + .sdc-quote) */
.sdc-quote.et_pb_testimonial, .sdc-quote {
  background: var(--sdc-white) !important; border: 1px solid var(--sdc-line) !important; border-radius: var(--sdc-radius-lg) !important;
  padding: var(--sdc-space-6) !important; box-shadow: var(--sdc-shadow-sm); block-size: 100%; position: relative;
}
.sdc-quote .et_pb_testimonial_description_inner { inline-size: 100% !important; }
.sdc-quote.et_pb_testimonial::before { /* replace Divi quote icon with a brand mark */
  content: "”" !important; font-family: Georgia, serif !important; position: absolute !important; top: 8px !important;
  inset-inline-end: 24px !important; inset-inline-start: auto !important; left: auto; translate: none !important; transform: none !important;
  font-size: 96px !important; line-height: 1 !important; color: var(--sdc-blue-100) !important; background: none !important;
  inline-size: auto !important; block-size: auto !important; border-radius: 0 !important;
}
.sdc-quote .et_pb_testimonial_content { font-size: var(--sdc-fs-md); color: var(--sdc-text); }
.sdc-quote .et_pb_testimonial_author { font-family: var(--sdc-font-head); color: var(--sdc-blue); font-weight: 800; margin-block-start: var(--sdc-space-5); }
.sdc-quote .et_pb_testimonial_meta { color: var(--sdc-text-muted); font-size: var(--sdc-fs-sm); }
.sdc-stars { color: #b7791f; letter-spacing: .1em; font-size: var(--sdc-fs-sm); } /* amber 4.6:1 on white */

/* -------------------------------------------------------------- 15. CTA BAND */
.sdc-cta {
  background: var(--sdc-navy) !important; position: relative; isolation: isolate; overflow: clip; text-align: center;
}
.sdc-cta::before {
  content: ""; position: absolute; inset-inline: 10%; top: 55%; block-size: 70%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 217, 46, .38), transparent); filter: blur(30px);
  animation: sdc-breathe 6s ease-in-out infinite;
}
.sdc-cta::after { content: ""; position: absolute; inset-inline: 0; top: 0; block-size: 1px; background: linear-gradient(90deg, transparent, var(--sdc-green), transparent); }
.sdc-cta h2 { color: var(--sdc-white); font-size: var(--sdc-fs-4xl); max-width: 20ch; margin-inline: auto; margin-block-end: var(--sdc-space-5); }
.sdc-cta .sdc-lead { margin-inline: auto; color: var(--sdc-muted-on-dark); margin-block-end: var(--sdc-space-6); }
.sdc-cta .sdc-btn-row { justify-content: center; }
@keyframes sdc-breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

/* -------------------------------------------------------------- 16. REVEAL (driven by sdc-motion.js) */
.sdc-js [data-sdc-reveal] { opacity: 0; transform: translateY(24px); }
.sdc-js [data-sdc-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--sdc-dur-slow) var(--sdc-ease-out), transform var(--sdc-dur-slow) var(--sdc-ease-out); }

/* SVG line-draw helper */
.sdc-draw path, .sdc-draw line, .sdc-draw polyline, .sdc-draw rect, .sdc-draw circle { vector-effect: non-scaling-stroke; }

/* -------------------------------------------------------------- 17. FLOATING WHATSAPP (site-wide, from footer template) */
.sdc-wa {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 9990; inline-size: 58px; block-size: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #25d366; color: var(--sdc-navy); box-shadow: 0 10px 30px -6px rgba(37, 211, 102, .6);
  transition: transform var(--sdc-dur) var(--sdc-ease);
}
.sdc-wa:hover { transform: scale(1.08); color: var(--sdc-navy); }
.sdc-wa svg { inline-size: 30px; block-size: 30px; fill: currentColor; }

/* -------------------------------------------------------------- 17b. DIVI STRUCTURE GLUE
   Maps the components above onto Divi's section › row › column › module wrappers. */
.sdc-hero { flex-direction: column; justify-content: center; align-items: center; }
.sdc-hero > .et_pb_row { margin-inline: auto; }
.sdc-hero .et_pb_row.sdc-hero__bg-row, .sdc-page-hero .et_pb_row.sdc-hero__bg-row,
.sdc-hero .sdc-hero__bg-row > .et_pb_column, .sdc-page-hero .sdc-hero__bg-row > .et_pb_column,
.sdc-hero .sdc-hero__bg-col, .sdc-page-hero .sdc-hero__bg-col { position: static !important; margin: 0 !important; padding: 0 !important; inline-size: 0 !important; block-size: 0; min-block-size: 0; }
[dir="rtl"] .sdc-scene__fallback { transform: scaleX(-1); } /* art sits opposite the copy */

.sdc-btn-row.et_pb_group, .et_pb_group.sdc-btn-row { flex-direction: row !important; margin-block: var(--sdc-space-6) 0 !important; }

.et_pb_row.sdc-story__wrap { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--sdc-space-8); align-items: stretch; }
.sdc-story__wrap > .et_pb_column { inline-size: auto !important; margin: 0 !important; }
.sdc-story__visual-mod { position: sticky !important; top: 12vh; margin: 0 !important; }
.sdc-story__visual { position: relative; top: auto; }
.sdc-story__steps.et_pb_column { position: relative; padding-inline-start: var(--sdc-space-6) !important; }
.sdc-story__progress-mod { position: absolute !important; inset-block: 0; inset-inline-start: 0; inline-size: 2px; margin: 0 !important; }
.sdc-story__progress { position: absolute; inset: 0; inline-size: 2px; }

.sdc-head-action.et_pb_column { display: flex !important; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: var(--sdc-space-4); }
.sdc-head-action .et_pb_module { margin: 0 !important; }

.sdc-cards.et_pb_column { inline-size: 100% !important; }
.sdc-card .et_pb_blurb { margin: 0 !important; }
.sdc-card .et_pb_blurb_content { max-inline-size: none !important; text-align: start; }
.sdc-card .et_pb_main_blurb_image { display: block; margin-block-end: var(--sdc-space-5) !important; inline-size: 100%; }
.sdc-card .et_pb_main_blurb_image img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--sdc-radius); }
.sdc-card .et_pb_module_header { font-size: var(--sdc-fs-lg) !important; margin-block-end: var(--sdc-space-3); }
.sdc-card .et_pb_module_header a { color: var(--sdc-blue); text-decoration: none; }
.sdc-card .et_pb_module_header a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.sdc-card .et_pb_blurb_description { color: var(--sdc-text-muted); }

.sdc-slider__track.et_pb_column { inline-size: 100% !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; }
.sdc-project-card .et_pb_module { margin: 0 !important; }
.sdc-project-card__body.et_pb_group { padding: var(--sdc-space-6) !important; }
.sdc-project-card .et_pb_module_header { color: var(--sdc-white) !important; font-size: var(--sdc-fs-lg) !important; }
.sdc-project-card .et_pb_module_header a { color: var(--sdc-white) !important; text-decoration: none; }
.sdc-project-card .et_pb_module_header a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.sdc-project-card .et_pb_blurb_content { text-align: start; max-inline-size: none !important; }
.sdc-project-card__meta { display: inline-flex; margin: 0 !important; color: var(--sdc-muted-on-dark) !important; font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); }
.sdc-project-card__meta b { color: var(--sdc-green); font-weight: 600; }

.sdc-process > .et_pb_code { position: static !important; margin: 0 !important; }
.sdc-process .et_pb_text ol { padding: 0 !important; list-style: none !important; }

/* hook classes: let card-wide link overlays anchor to the card itself */
.sdc-card__blurb, .sdc-project-card__title, .sdc-project-card__body.et_pb_group { position: static !important; }
.sdc-story__svg { display: block; inline-size: 100%; block-size: 100%; }
.sdc-story__visual-col { min-inline-size: 0; }
.sdc-process__draw { stroke-linecap: round; }
.sdc-testimonials > .et_pb_column { display: flex; }
.sdc-testimonials > .et_pb_column > .et_pb_module { flex: 1; }

.sdc-calc fieldset { border: 0; margin: 0; min-inline-size: 0; }
.sdc-calc legend { padding: 0; }

/* Manifesto words (About) — unlit words keep AA contrast (#5f6f86 ≈ 5.2:1 on white) */
.sdc-word { color: #5f6f86; transition: color var(--sdc-dur) var(--sdc-ease); }
.sdc-word.is-lit { color: var(--sdc-blue); }

/* -------------------------------------------------------------- 20. INNER-PAGE HERO (Projects, Services, About, Contact) */
.sdc-page-hero {
  position: relative; isolation: isolate; overflow: clip;
  background: radial-gradient(120% 120% at 80% 0%, #163a7a 0%, var(--sdc-navy) 55%, #050f24 100%) !important;
  padding-block: calc(var(--sdc-space-10) + 40px) var(--sdc-space-8) !important;
}
[dir="rtl"] .sdc-page-hero { background: radial-gradient(120% 120% at 20% 0%, #163a7a 0%, var(--sdc-navy) 55%, #050f24 100%) !important; }
.sdc-page-hero h1 { color: var(--sdc-white); font-size: var(--sdc-fs-4xl); max-width: 18ch; margin-block-end: var(--sdc-space-4); }
.sdc-page-hero .sdc-lead { color: var(--sdc-muted-on-dark); }
.sdc-crumbs { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); color: var(--sdc-muted-on-dark); margin-block-end: var(--sdc-space-5); }
.sdc-crumbs a { color: var(--sdc-muted-on-dark) !important; text-decoration: none; }
.sdc-crumbs a:hover { color: var(--sdc-white) !important; }
.sdc-crumbs span[aria-hidden] { margin-inline: .5em; display: inline-block; transform: scaleX(var(--sdc-dir)); }
.sdc-summary { display: flex; flex-wrap: wrap; gap: var(--sdc-space-7); margin-block-start: var(--sdc-space-7); padding-block-start: var(--sdc-space-5); border-block-start: 1px solid var(--sdc-line-dark); }
.sdc-summary div { color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); }
.sdc-summary strong { display: block; font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-2xl); color: var(--sdc-white); font-weight: 600; line-height: 1.1; }
.sdc-summary strong small { color: var(--sdc-green); font-size: .5em; margin-inline-start: .2em; }

/* Blueprint lines that draw in (Services hero) */
.sdc-blueprint { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sdc-blueprint-mod { position: absolute !important; inset: 0; margin: 0 !important; z-index: 0; pointer-events: none; }
.sdc-page-hero > .et_pb_row:not(.sdc-hero__bg-row) { position: relative; z-index: 1; }
.sdc-blueprint svg { inline-size: 100%; block-size: 100%; }
.sdc-blueprint path, .sdc-blueprint line, .sdc-blueprint circle, .sdc-blueprint rect { fill: none; stroke: rgba(169, 184, 211, .28); stroke-width: 1; }
.sdc-blueprint .is-accent { stroke: var(--sdc-green); stroke-opacity: .8; filter: drop-shadow(0 0 4px var(--sdc-green-glow)); }
.sdc-blueprint .sdc-flow-dot { fill: var(--sdc-green); stroke: none; filter: drop-shadow(0 0 8px var(--sdc-green)); }
html:not(.sdc-anime-on) .sdc-flow-dot { display: none; }
.sdc-blueprint text { fill: var(--sdc-muted-on-dark); font-family: var(--sdc-font-mono); font-size: 11px; stroke: none; }

/* -------------------------------------------------------------- 21. SAUDI MAP */
.sdc-map { position: relative; border-radius: var(--sdc-radius-lg); background: radial-gradient(90% 90% at 60% 40%, var(--sdc-navy-800), var(--sdc-navy) 70%); border: 1px solid var(--sdc-line-dark); padding: clamp(1rem, .5rem + 2vw, 2.5rem); min-block-size: 280px; }
.sdc-map__svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.sdc-map__grat line { stroke: rgba(169, 184, 211, .08); stroke-width: 1; }
.sdc-map__land { fill: var(--sdc-navy-800); }
.sdc-map__outline { fill: none; stroke: #6f93df; stroke-width: 1.6; stroke-linejoin: round; }
.sdc-map__cities circle { fill: var(--sdc-muted-on-dark); }
.sdc-map__cities circle.is-hq { fill: var(--sdc-white); stroke: var(--sdc-green); stroke-width: 2; }
.sdc-map__cities text { fill: var(--sdc-muted-on-dark); font-size: 13px; font-family: var(--sdc-font-body); }
.sdc-map__cities text.is-hq { fill: var(--sdc-white); font-weight: 700; }
.sdc-map__pin { cursor: pointer; outline: none; }
.sdc-map__dot { fill: var(--sdc-green); transition: r var(--sdc-dur) var(--sdc-ease); }
.sdc-map__hit { fill: transparent; }
.sdc-map__pulse { fill: none; stroke: var(--sdc-green); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sdc-map.is-in .sdc-map__pulse { animation: sdc-pin-pulse 2.4s var(--sdc-ease) infinite; animation-delay: var(--d, 0ms); }
.sdc-map__pin:hover .sdc-map__dot, .sdc-map__pin:focus-visible .sdc-map__dot { r: 10; }
.sdc-map__pin:focus-visible .sdc-map__hit { stroke: var(--sdc-white); stroke-width: 3; }
@keyframes sdc-pin-pulse { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
.sdc-map__tip {
  position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 18px)); pointer-events: none;
  background: var(--sdc-white); color: var(--sdc-text); border-radius: var(--sdc-radius-sm); padding: .6rem .85rem;
  box-shadow: var(--sdc-shadow); min-inline-size: 160px; text-align: start;
}
.sdc-map__tip strong { display: block; color: var(--sdc-blue); font-family: var(--sdc-font-head); font-size: var(--sdc-fs-sm); }
.sdc-map__tip span { font-size: var(--sdc-fs-xs); color: var(--sdc-text-muted); }
.sdc-map__tip::after { content: ""; position: absolute; inset-inline-start: 50%; bottom: -6px; inline-size: 12px; block-size: 12px; background: var(--sdc-white); transform: translateX(-50%) rotate(45deg); }
[dir="rtl"] .sdc-map__tip::after { transform: translateX(50%) rotate(45deg); }
.sdc-map__legend { display: flex; gap: var(--sdc-space-5); flex-wrap: wrap; font-size: var(--sdc-fs-sm); color: var(--sdc-muted-on-dark); margin-block-start: var(--sdc-space-4); }
.sdc-map__legend i { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--sdc-green); box-shadow: 0 0 8px var(--sdc-green-glow); margin-inline-end: .5em; vertical-align: middle; }
.sdc-map__legend i.is-hq { background: var(--sdc-white); box-shadow: 0 0 0 2px var(--sdc-green); }
/* hidden Loop that feeds the pins — present for the map, invisible to everyone */
.sdc-map-source { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap; }
.sdc-pin-src, .sdc-pin-lat, .sdc-pin-lng, .sdc-pin-meta, .sdc-pin-title { margin: 0 !important; }

/* -------------------------------------------------------------- 22. FILTER BAR (Divi Post Filter styled as chips + dropdown) */
.sdc-filter { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sdc-space-5); margin-block-end: var(--sdc-space-6) !important; padding-block-end: var(--sdc-space-5); border-block-end: 1px solid var(--sdc-line); }
.sdc-filter label, .sdc-filter legend { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--sdc-text-muted); }
:lang(ar) .sdc-filter label, :lang(ar) .sdc-filter legend { font-family: var(--sdc-font-body-ar); letter-spacing: 0; text-transform: none; font-size: var(--sdc-fs-sm); }
/* radio options → chips */
.sdc-filter--chips input[type="radio"], .sdc-filter--chips input[type="checkbox"] { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.sdc-filter--chips input[type="radio"] + label, .sdc-filter--chips input[type="checkbox"] + label,
.sdc-chip {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: .55rem 1.1rem; border-radius: var(--sdc-radius-pill);
  border: 1.5px solid var(--sdc-line); background: var(--sdc-white); color: var(--sdc-text) !important; font-weight: 700; cursor: pointer;
  font-family: var(--sdc-font-head) !important; font-size: var(--sdc-fs-sm) !important; letter-spacing: 0 !important; text-transform: none !important;
  transition: background var(--sdc-dur) var(--sdc-ease), border-color var(--sdc-dur), color var(--sdc-dur);
}
.sdc-filter--chips input:checked + label, .sdc-chip[aria-pressed="true"] { background: var(--sdc-navy); border-color: var(--sdc-navy); color: var(--sdc-white) !important; box-shadow: inset 0 -3px 0 var(--sdc-green); }
.sdc-filter--chips input:focus-visible + label { box-shadow: var(--sdc-focus); }
.sdc-filter select {
  min-block-size: 48px; min-inline-size: 240px; padding-block: .6rem; padding-inline: 1rem 2.5rem; border-radius: var(--sdc-radius-sm);
  border: 1.5px solid var(--sdc-line); background-color: var(--sdc-white); color: var(--sdc-text); font: inherit; font-weight: 600;
}
.sdc-filter select:focus-visible { border-color: var(--sdc-blue); }

/* -------------------------------------------------------------- 23. PROJECT GRID CARD (archive) */
.sdc-grid-loop.et_pb_column { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sdc-space-5); inline-size: 100% !important; }
.sdc-grid-loop > * { margin: 0 !important; }
.sdc-pcard { position: relative; border-radius: var(--sdc-radius-lg); overflow: hidden; background: var(--sdc-white); border: 1px solid var(--sdc-line); transition: box-shadow var(--sdc-dur) var(--sdc-ease), transform var(--sdc-dur) var(--sdc-ease-out); }
.sdc-pcard:hover, .sdc-pcard:focus-within { box-shadow: var(--sdc-shadow-lg); transform: translateY(-4px); }
.sdc-pcard .et_pb_module { margin: 0 !important; }
.sdc-pcard .et_pb_image { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--sdc-navy-700), var(--sdc-navy)); overflow: hidden; }
.sdc-pcard .et_pb_image img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1s var(--sdc-ease-out); }
.sdc-pcard:hover .et_pb_image img { transform: scale(1.05); }
.sdc-pcard__body.et_pb_group { padding: var(--sdc-space-5) !important; gap: var(--sdc-space-2); position: static !important; }
.sdc-pcard__sector { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); color: var(--sdc-blue); text-transform: uppercase; letter-spacing: .08em; }
:lang(ar) .sdc-pcard__sector { font-family: var(--sdc-font-body-ar); letter-spacing: 0; }
.sdc-pcard__sector a { color: inherit !important; text-decoration: none; position: relative; z-index: 2; }
.sdc-pcard .et_pb_module_header { font-size: var(--sdc-fs-lg) !important; padding: 0 !important; }
.sdc-pcard .et_pb_module_header a { color: var(--sdc-text); text-decoration: none; }
.sdc-pcard .et_pb_module_header a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.sdc-pcard .et_pb_blurb, .sdc-pcard__title { position: static !important; }
.sdc-pcard .et_pb_blurb_content { max-inline-size: none !important; text-align: start; }
.sdc-pcard__facts { display: flex; flex-wrap: wrap; gap: var(--sdc-space-4); padding-block-start: var(--sdc-space-3); margin-block-start: var(--sdc-space-2); border-block-start: 1px dashed var(--sdc-line); }
.sdc-pcard__facts .et_pb_text { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-sm); color: var(--sdc-text-muted); }
.sdc-pcard__facts b { color: var(--sdc-navy); font-weight: 600; }

/* -------------------------------------------------------------- 24. SECTOR STRIP (Services) */
.sdc-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sdc-space-4); }
.sdc-sector {
  position: relative; display: flex; flex-direction: column; gap: var(--sdc-space-3); padding: var(--sdc-space-5); border-radius: var(--sdc-radius-lg);
  background: var(--sdc-white); border: 1px solid var(--sdc-line); color: var(--sdc-text) !important; text-decoration: none; min-block-size: 190px;
  transition: border-color var(--sdc-dur), box-shadow var(--sdc-dur), transform var(--sdc-dur) var(--sdc-ease-out);
}
.sdc-sector:hover, .sdc-sector:focus-visible { border-color: var(--sdc-blue); box-shadow: var(--sdc-shadow); transform: translateY(-3px); }
.sdc-sector svg { inline-size: 44px; block-size: 44px; stroke: var(--sdc-blue); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sdc-sector svg .is-accent { stroke: var(--sdc-navy); fill: var(--sdc-green); }
.sdc-sector strong { font-family: var(--sdc-font-head); font-size: var(--sdc-fs-lg); color: var(--sdc-blue); }
.sdc-sector span { font-size: var(--sdc-fs-sm); color: var(--sdc-text-muted); }
.sdc-sector::after { content: "↓"; position: absolute; inset-block-start: var(--sdc-space-5); inset-inline-end: var(--sdc-space-5); color: var(--sdc-blue); font-weight: 700; }

/* -------------------------------------------------------------- 25. 3D SYSTEM EXPLORER */
.sdc-explorer { border-radius: var(--sdc-radius-lg); overflow: hidden; background: var(--sdc-navy); border: 1px solid var(--sdc-line-dark); }
.sdc-explorer__tabs { display: flex; gap: 0; border-block-end: 1px solid var(--sdc-line-dark); overflow-x: auto; }
.sdc-explorer__tabs [role="tab"] {
  flex: 1 0 auto; min-block-size: 56px; padding: 1rem 1.5rem; background: transparent; border: 0; color: var(--sdc-muted-on-dark); cursor: pointer;
  font-family: var(--sdc-font-head); font-weight: 800; font-size: var(--sdc-fs-base); border-block-end: 3px solid transparent; transition: color var(--sdc-dur), border-color var(--sdc-dur);
}
.sdc-explorer__tabs [role="tab"]:hover { color: var(--sdc-white); }
.sdc-explorer__tabs [role="tab"][aria-selected="true"] { color: var(--sdc-white); border-block-end-color: var(--sdc-green); background: rgba(255, 255, 255, .03); }
.sdc-explorer__tabs [role="tab"]:focus-visible { box-shadow: inset 0 0 0 3px var(--sdc-green); border-radius: 0; }
.sdc-explorer__panel { display: grid; grid-template-columns: 1.6fr 1fr; min-block-size: 520px; }
.sdc-explorer__panel[hidden] { display: none; }
.sdc-explorer__stage { position: relative; min-block-size: 520px; background: radial-gradient(70% 70% at 50% 45%, #163a7a, var(--sdc-navy) 75%); }
.sdc-explorer__stage .sdc-scene { position: absolute; inset: 0; cursor: grab; }
.sdc-explorer__stage .sdc-scene:active { cursor: grabbing; }
.sdc-explorer__fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sdc-space-6); transition: opacity var(--sdc-dur-slow); }
.sdc-explorer__fallback svg { inline-size: 100%; max-block-size: 100%; }
.sdc-explorer__stage.has-3d .sdc-explorer__fallback { opacity: 0; pointer-events: none; }
.sdc-hotspots { position: absolute; inset: 0; pointer-events: none; }
.sdc-hotspot {
  position: absolute; pointer-events: auto; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .45em;
  padding: .35rem .75rem .35rem .4rem; border-radius: var(--sdc-radius-pill); border: 1px solid rgba(14, 217, 46, .6);
  background: rgba(11, 31, 69, .85); color: var(--sdc-white); font: 700 var(--sdc-fs-xs)/1.2 var(--sdc-font-head); cursor: pointer;
  backdrop-filter: blur(6px); white-space: nowrap; min-block-size: 44px; transition: background var(--sdc-dur), border-color var(--sdc-dur);
}
[dir="rtl"] .sdc-hotspot { padding: .35rem .4rem .35rem .75rem; }
.sdc-hotspot::before { content: ""; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--sdc-green); box-shadow: 0 0 0 4px rgba(14, 217, 46, .25), 0 0 14px var(--sdc-green-glow); flex: none; }
.sdc-hotspot:hover, .sdc-hotspot[aria-pressed="true"] { background: var(--sdc-green); color: var(--sdc-navy); border-color: var(--sdc-green); }
.sdc-hotspot:hover::before, .sdc-hotspot[aria-pressed="true"]::before { background: var(--sdc-navy); }
/* without 3D the hotspots become a numbered list over the schematic */
.sdc-explorer__stage:not(.has-3d) .sdc-hotspots { position: absolute; inset: auto var(--sdc-space-4) var(--sdc-space-4); display: flex; flex-wrap: wrap; gap: var(--sdc-space-2); }
.sdc-explorer__stage:not(.has-3d) .sdc-hotspot { position: static; transform: none; }
.sdc-explorer__side { padding: var(--sdc-space-6); display: flex; flex-direction: column; gap: var(--sdc-space-4); border-inline-start: 1px solid var(--sdc-line-dark); }
.sdc-explorer__side h3 { color: var(--sdc-white); font-size: var(--sdc-fs-xl); }
.sdc-explorer__side p { color: var(--sdc-muted-on-dark); }
.sdc-explorer__info { min-block-size: 5.5em; padding: var(--sdc-space-4); border-radius: var(--sdc-radius); background: rgba(255, 255, 255, .04); border: 1px dashed var(--sdc-line-dark); color: var(--sdc-text-on-dark) !important; }
.sdc-explorer__specs { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: var(--sdc-space-2); font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-sm); }
.sdc-explorer__specs li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; border-block-end: 1px solid var(--sdc-line-dark); color: var(--sdc-muted-on-dark); }
.sdc-explorer__specs b { color: var(--sdc-white); font-weight: 600; }
.sdc-explorer__hint { font-size: var(--sdc-fs-xs); color: var(--sdc-muted-on-dark); }

/* -------------------------------------------------------------- 26. STICKY SPLIT-SCROLL (Services list) */
.et_pb_row.sdc-split { display: grid !important; grid-template-columns: 1.1fr 1fr; gap: var(--sdc-space-8); align-items: start; }
.sdc-split > .et_pb_column { inline-size: auto !important; margin: 0 !important; }
.sdc-split__visual-col { position: sticky !important; top: 14vh; }
.sdc-split__visual { position: relative; border-radius: var(--sdc-radius-lg); overflow: hidden; aspect-ratio: 4 / 5; max-block-size: 72vh; background: linear-gradient(135deg, var(--sdc-navy-700), var(--sdc-navy)); }
.sdc-split__visual img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity 220ms var(--sdc-ease), transform 700ms var(--sdc-ease-out); }
.sdc-split__visual.is-swapping img { opacity: 0; transform: scale(1.03); }
.sdc-split__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 15, 36, .85), transparent 55%); }
.sdc-split__meta { position: absolute; inset-inline: var(--sdc-space-6); bottom: var(--sdc-space-6); z-index: 1; color: var(--sdc-white); }
.sdc-split__index { font-family: var(--sdc-font-mono); color: var(--sdc-green); font-size: var(--sdc-fs-sm); }
.sdc-split__caption { font-family: var(--sdc-font-head); font-weight: 800; font-size: var(--sdc-fs-xl); display: block; margin-block-start: var(--sdc-space-2); }
.sdc-split__list.et_pb_column { display: flex !important; flex-direction: column; }
.sdc-split__item { position: relative; padding-block: var(--sdc-space-7) !important; padding-inline-start: var(--sdc-space-6) !important; border-inline-start: 2px solid var(--sdc-line); transition: border-color var(--sdc-dur); margin: 0 !important; }
/* inactive items are de-emphasised by colour, not opacity, so text keeps AA contrast (#5f6f86 = 5.2:1) */
.sdc-split__item:not(.is-active):not(.is-match) .et_pb_module_header a { color: #5f6f86 !important; }
.sdc-split__item.is-active { border-inline-start-color: var(--sdc-green); }
.sdc-split__item.is-match { border-inline-start-color: var(--sdc-blue); }
.sdc-split__item.is-match .et_pb_module_header::after { content: ""; display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--sdc-green); margin-inline-start: .5em; vertical-align: middle; box-shadow: 0 0 10px var(--sdc-green-glow); }
.sdc-split__item .et_pb_module { margin: 0 !important; }
.sdc-split__blurb { position: static !important; }
.sdc-split__item .et_pb_image { display: none; } /* source for the sticky visual on desktop */
.sdc-split__item .et_pb_blurb_content { max-inline-size: none !important; text-align: start; }
.sdc-split__item .et_pb_module_header { font-size: var(--sdc-fs-2xl) !important; padding-block-end: var(--sdc-space-3) !important; }
.sdc-split__item .et_pb_module_header a { color: var(--sdc-blue); text-decoration: none; }
.sdc-split__item .et_pb_blurb_description { font-size: var(--sdc-fs-md); color: var(--sdc-text-muted); max-inline-size: 46ch; }
.sdc-split__more { margin-block-start: var(--sdc-space-4) !important; }
.sdc-split__more a, a.sdc-split__more, .sdc-split__more .et_pb_button, .et_pb_button.sdc-split__more {
  font-family: var(--sdc-font-head) !important; font-weight: 800 !important; font-size: var(--sdc-fs-base) !important; color: var(--sdc-blue) !important;
  text-decoration: none !important; display: inline-flex !important; gap: .4em; padding: .5rem 0 !important; border: 0 !important; background: none !important; min-block-size: 44px; align-items: center;
}
.sdc-split__more a::after, a.sdc-split__more::after, .sdc-split__more .et_pb_button::after, .et_pb_button.sdc-split__more::after {
  content: "→" !important; display: inline-block !important; position: static !important; opacity: 1 !important; margin: 0 !important;
  font-family: system-ui, sans-serif !important; transform: scaleX(var(--sdc-dir)); font-size: 1em !important; line-height: 1 !important;
}
.sdc-split__terms { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* -------------------------------------------------------------- 27. FAQ ACCORDION (Divi accordion module) */
.sdc-faq .et_pb_toggle { border: 0 !important; border-block-end: 1px solid var(--sdc-line) !important; background: transparent !important; padding: var(--sdc-space-5) 0 !important; margin: 0 !important; }
.sdc-faq .et_pb_toggle_title { font-family: var(--sdc-font-head); font-weight: 800; color: var(--sdc-blue) !important; font-size: var(--sdc-fs-md) !important; padding-inline-end: 2.5rem !important; padding-inline-start: 0 !important; }
.sdc-faq .et_pb_toggle_title::before { inset-inline-end: 0 !important; inset-inline-start: auto !important; color: var(--sdc-blue) !important; }
[dir="rtl"] .sdc-faq .et_pb_toggle_title::before { left: 0 !important; right: auto !important; }
.sdc-faq .et_pb_toggle_open .et_pb_toggle_title::before { color: var(--sdc-navy) !important; }
.sdc-faq .et_pb_toggle_content { color: var(--sdc-text-muted); padding-block-start: var(--sdc-space-3) !important; }
.sdc-faq-row.et_pb_row { max-inline-size: 860px !important; }

/* -------------------------------------------------------------- 28. STAGE-2 RESPONSIVE */
@media (max-width: 980px) {
  .sdc-grid-loop.et_pb_column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdc-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdc-explorer__panel { grid-template-columns: 1fr; }
  .sdc-explorer__side { border-inline-start: 0; border-block-start: 1px solid var(--sdc-line-dark); }
  .sdc-explorer__stage, .sdc-explorer__panel { min-block-size: 420px; }
  .et_pb_row.sdc-split { grid-template-columns: 1fr; }
  .sdc-split__visual-col { display: none !important; }
  .sdc-split__item .et_pb_image { display: block; border-radius: var(--sdc-radius); overflow: hidden; margin-block-end: var(--sdc-space-4) !important; aspect-ratio: 16 / 9; }
  .sdc-split__item .et_pb_image img { inline-size: 100%; block-size: 100%; object-fit: cover; }
}
@media (max-width: 767px) {
  .sdc-grid-loop.et_pb_column { grid-template-columns: 1fr; }
  .sdc-sectors { grid-template-columns: 1fr; }
  .sdc-filter select { min-inline-size: 100%; }
  .sdc-explorer__tabs [role="tab"] { padding-inline: 1rem; font-size: var(--sdc-fs-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .sdc-map__pulse { animation: none !important; }
}

/* -------------------------------------------------------------- 30. ABOUT — manifesto hero */
.sdc-manifesto-hero { background: var(--sdc-white) !important; padding-block: calc(var(--sdc-space-10) + 40px) var(--sdc-space-9) !important; }
.sdc-manifesto-hero .sdc-crumbs, .sdc-manifesto-hero .sdc-crumbs a { color: var(--sdc-text-muted) !important; }
.sdc-h1-small { font-size: var(--sdc-fs-md) !important; font-family: var(--sdc-font-mono) !important; color: var(--sdc-blue) !important; letter-spacing: .06em !important; text-transform: uppercase; display: flex; align-items: center; gap: .75em; margin-block-end: var(--sdc-space-6); font-weight: 600 !important; }
:lang(ar) .sdc-h1-small { font-family: var(--sdc-font-head-ar) !important; letter-spacing: 0 !important; font-weight: 800 !important; }
.sdc-h1-small::before { content: ""; inline-size: 40px; block-size: 2px; background: var(--sdc-green); box-shadow: 0 0 10px var(--sdc-green-glow); }
.sdc-manifesto { font-family: var(--sdc-font-head); font-weight: 800; font-size: var(--sdc-fs-4xl); line-height: 1.25; letter-spacing: -.02em; max-width: 24ch; margin: 0; }
:lang(ar) .sdc-manifesto { line-height: 1.5; letter-spacing: 0; max-width: 22ch; }
.sdc-manifesto-sign { margin-block-start: var(--sdc-space-7); display: flex; gap: var(--sdc-space-6); flex-wrap: wrap; font-family: var(--sdc-font-mono); color: var(--sdc-text-muted); font-size: var(--sdc-fs-sm); }
.sdc-manifesto-sign b { color: var(--sdc-navy); font-weight: 600; }

/* story + parallax image */
.sdc-parallax-frame { border-radius: var(--sdc-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; position: relative; box-shadow: var(--sdc-shadow-lg); }
.sdc-parallax-frame .et_pb_image_wrap, .sdc-parallax-frame img { display: block; inline-size: 100%; block-size: 118%; object-fit: cover; margin-block-start: -9%; }
.sdc-parallax-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .15); border-radius: inherit; pointer-events: none; }
.sdc-tagline { display: inline-flex; gap: .5em; align-items: center; font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-sm); color: var(--sdc-navy); background: var(--sdc-green-soft); border: 1px solid rgba(14, 217, 46, .45); padding: .35rem .8rem; border-radius: var(--sdc-radius-pill); }

/* vision & mission */
.sdc-vm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sdc-space-5); }
.sdc-vm article { padding: var(--sdc-space-7); border: 1px solid var(--sdc-line-dark); border-radius: var(--sdc-radius-lg); background: linear-gradient(160deg, rgba(48, 86, 170, .22), rgba(11, 31, 69, 0)); position: relative; overflow: hidden; }
.sdc-vm article::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: var(--sdc-space-7); inline-size: 48px; block-size: 3px; background: var(--sdc-green); box-shadow: 0 0 12px var(--sdc-green-glow); }
.sdc-vm h3 { color: var(--sdc-white); font-size: var(--sdc-fs-2xl); margin-block-end: var(--sdc-space-4); }
.sdc-vm p { color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-md); }
.sdc-2030 { margin-block-start: var(--sdc-space-6); display: grid; grid-template-columns: auto 1fr; gap: var(--sdc-space-5); align-items: center; padding: var(--sdc-space-5) var(--sdc-space-6); border-radius: var(--sdc-radius-lg); border: 1px dashed rgba(14, 217, 46, .5); }
.sdc-2030 strong { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-4xl); color: var(--sdc-green); line-height: 1; text-shadow: 0 0 24px var(--sdc-green-glow); }
.sdc-2030 p { color: var(--sdc-text-on-dark); margin: 0; }
.sdc-2030 small { display: block; color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-xs); margin-block-start: var(--sdc-space-2); }

/* values */
.sdc-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sdc-space-5); }
.sdc-value { padding: var(--sdc-space-6); border-radius: var(--sdc-radius-lg); background: var(--sdc-white); border: 1px solid var(--sdc-line); transition: box-shadow var(--sdc-dur), transform var(--sdc-dur) var(--sdc-ease-out); }
.sdc-value:hover { box-shadow: var(--sdc-shadow); transform: translateY(-3px); }
.sdc-value svg { inline-size: 56px; block-size: 56px; margin-block-end: var(--sdc-space-5); fill: none; stroke: var(--sdc-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sdc-value svg .is-accent { stroke: var(--sdc-navy); fill: var(--sdc-green); }
.sdc-value h3 { font-size: var(--sdc-fs-lg); margin-block-end: var(--sdc-space-3); }
.sdc-value p { color: var(--sdc-text-muted); }

/* horizontal-scroll timeline */
.sdc-hscroll { position: relative; overflow-x: auto; scroll-snap-type: x proximity; padding-block: var(--sdc-space-5); } /* usable without JS / motion */
.sdc-hscroll__rail { display: flex; gap: var(--sdc-space-5); inline-size: max-content; padding-inline: var(--sdc-gutter); will-change: transform; position: relative; }
.sdc-hscroll__rail::before { content: ""; position: absolute; inset-inline: 0; top: 46px; block-size: 2px; background: linear-gradient(90deg, var(--sdc-green), var(--sdc-blue)); opacity: .6; }
[dir="rtl"] .sdc-hscroll__rail::before { background: linear-gradient(-90deg, var(--sdc-green), var(--sdc-blue)); }
.sdc-milestone { position: relative; inline-size: min(78vw, 340px); padding-block-start: 80px; }
.sdc-milestone::before { content: ""; position: absolute; top: 36px; inset-inline-start: 0; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--sdc-navy); border: 3px solid var(--sdc-green); box-shadow: 0 0 14px var(--sdc-green-glow); }
.sdc-milestone time { position: absolute; top: 0; inset-inline-start: 0; font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-lg); color: var(--sdc-green); font-weight: 600; }
.sdc-milestone h3 { color: var(--sdc-white); font-size: var(--sdc-fs-lg); margin-block-end: var(--sdc-space-2); }
.sdc-milestone p { color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); }
.sdc-hscroll.is-static { overflow-x: auto; scroll-snap-type: x proximity; }
.sdc-hscroll.is-static .sdc-milestone { scroll-snap-align: start; }
.sdc-hscroll__hint { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); color: var(--sdc-muted-on-dark); }

.sdc-section .et_pb_row.sdc-row-bleed { inline-size: 100% !important; max-inline-size: none !important; padding-inline: 0 !important; }
.sdc-map__pin.is-static { cursor: default; }

/* numbers + mini map */
.sdc-numbers-map { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sdc-space-7); align-items: center; }
.sdc-stats--stack { grid-template-columns: repeat(2, 1fr); }
.sdc-map[data-mini] { min-block-size: 0; padding: var(--sdc-space-4); }

/* GM message */
.sdc-gm-photo { border-radius: var(--sdc-radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sdc-shadow-lg); position: relative; }
.sdc-gm-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sdc-gm-photo::after { content: ""; position: absolute; inset-inline-end: -1px; inset-block-end: -1px; inline-size: 40%; block-size: 6px; background: var(--sdc-green); }
.sdc-pullquote { font-family: var(--sdc-font-head); font-weight: 800; font-size: var(--sdc-fs-2xl); line-height: 1.35; color: var(--sdc-blue); margin: 0 0 var(--sdc-space-6); padding: 0 !important; border: 0 !important; position: relative; }
.sdc-pullquote::before { content: "“"; position: absolute; inset-block-start: -.45em; inset-inline-start: -.1em; font-size: 4em; line-height: 1; color: var(--sdc-blue-100); font-family: Georgia, serif; z-index: -1; }
:lang(ar) .sdc-pullquote::before { content: "”"; }
.sdc-gm-letter p { color: var(--sdc-text-muted); }
.sdc-signature { margin-block-start: var(--sdc-space-6); padding-block-start: var(--sdc-space-5); border-block-start: 1px solid var(--sdc-line); display: grid; gap: .25rem; }
.sdc-signature__mark { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: var(--sdc-fs-2xl); color: var(--sdc-navy); line-height: 1; }
:lang(ar) .sdc-signature__mark { font-family: var(--sdc-font-head-ar); font-weight: 500; font-style: italic; }
.sdc-signature strong { color: var(--sdc-text); font-family: var(--sdc-font-head); }
.sdc-signature span { font-size: var(--sdc-fs-sm); color: var(--sdc-text-muted); }

/* certification placeholder grid */
.sdc-certs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sdc-space-4); }
.sdc-cert { aspect-ratio: 1; display: grid; place-items: center; text-align: center; padding: var(--sdc-space-3); border: 1.5px dashed var(--sdc-line); border-radius: var(--sdc-radius); font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xs); color: var(--sdc-text-muted); background: var(--sdc-white); }

/* HQ */
.sdc-hq-img { border-radius: var(--sdc-radius-lg); overflow: hidden; aspect-ratio: 16 / 10; }
.sdc-hq-img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sdc-address { font-style: normal; color: var(--sdc-text-muted); margin-block: var(--sdc-space-4); }
.sdc-address b { color: var(--sdc-navy); }

/* -------------------------------------------------------------- 31. CONTACT */
.sdc-quote-wrap.et_pb_row { display: grid !important; grid-template-columns: 1.6fr 1fr; gap: var(--sdc-space-7); align-items: start; }
.sdc-quote-wrap > .et_pb_column { inline-size: auto !important; margin: 0 !important; }
.sdc-quote-card { background: var(--sdc-white); border: 1px solid var(--sdc-line); border-radius: var(--sdc-radius-lg); padding: clamp(1.25rem, .75rem + 2vw, 2.75rem) !important; box-shadow: var(--sdc-shadow-lg); }
.sdc-next { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: var(--sdc-space-5); counter-reset: n; }
.sdc-next li { display: grid; grid-template-columns: 44px 1fr; gap: var(--sdc-space-4); align-items: start; padding: 0 !important; }
.sdc-next li::before { counter-increment: n; content: counter(n, decimal-leading-zero); inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sdc-navy); color: var(--sdc-green); font-family: var(--sdc-font-mono); font-weight: 600; font-size: var(--sdc-fs-sm); }
.sdc-next h3 { font-size: var(--sdc-fs-md); margin-block-end: var(--sdc-space-1); }
.sdc-next p { color: var(--sdc-text-muted); font-size: var(--sdc-fs-sm); }
.sdc-side-sticky.et_pb_column { position: sticky !important; top: 120px; }

.sdc-contact-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sdc-space-4); }
.sdc-ccard {
  position: relative; display: flex; flex-direction: column; gap: var(--sdc-space-2); padding: var(--sdc-space-6); border-radius: var(--sdc-radius-lg);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--sdc-line-dark); color: var(--sdc-text-on-dark) !important; text-decoration: none; overflow: hidden; isolation: isolate;
  transition: border-color var(--sdc-dur), transform var(--sdc-dur) var(--sdc-ease-out);
}
.sdc-ccard::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -40%; inline-size: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--sdc-green-glow), transparent 65%); opacity: 0; transition: opacity var(--sdc-dur); z-index: -1; }
.sdc-ccard:hover, .sdc-ccard:focus-visible { border-color: rgba(14, 217, 46, .6); transform: translateY(-3px); }
.sdc-ccard:hover::before, .sdc-ccard:focus-visible::before { opacity: 1; }
.sdc-ccard svg { inline-size: 32px; block-size: 32px; fill: none; stroke: var(--sdc-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-block-end: var(--sdc-space-3); }
.sdc-ccard span { font-size: var(--sdc-fs-sm); color: var(--sdc-muted-on-dark); }
.sdc-ccard strong { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-md); color: var(--sdc-white); font-weight: 600; direction: ltr; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere; }
:lang(ar) .sdc-ccard strong.is-text { font-family: var(--sdc-font-body-ar); direction: rtl; }
[dir="rtl"] .sdc-ccard strong { text-align: right; } /* LTR numbers still sit on the reading-start side in Arabic */

.sdc-mapcard { position: relative; border-radius: var(--sdc-radius-lg); overflow: hidden; min-block-size: 460px; background: var(--sdc-navy); }
.sdc-mapcard iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; filter: grayscale(1) invert(.92) hue-rotate(185deg) saturate(2.2) brightness(.82) contrast(.92); }
.sdc-mapcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 31, 69, .25), rgba(11, 31, 69, .05)); mix-blend-mode: multiply; }
.sdc-mapcard__pin { position: absolute; inset-inline-start: 50%; top: 50%; translate: -50% -100%; pointer-events: none; z-index: 2; inline-size: 26px; block-size: 26px; border-radius: 50% 50% 50% 0; background: var(--sdc-green); transform: rotate(-45deg); box-shadow: 0 0 0 6px rgba(14, 217, 46, .2), 0 0 24px var(--sdc-green-glow); }
[dir="rtl"] .sdc-mapcard__pin { translate: 50% -100%; }
.sdc-mapcard__panel { position: absolute; z-index: 3; inset-block-end: var(--sdc-space-5); inset-inline-start: var(--sdc-space-5); max-inline-size: 340px; padding: var(--sdc-space-5); border-radius: var(--sdc-radius); background: rgba(11, 31, 69, .92); border: 1px solid var(--sdc-line-dark); backdrop-filter: blur(6px); color: var(--sdc-text-on-dark); }
.sdc-h3 { font-size: var(--sdc-fs-xl) !important; margin-block-end: var(--sdc-space-5); }
.sdc-mapcard__panel h3, .sdc-mapcard__panel .sdc-h3 { color: var(--sdc-white); font-size: var(--sdc-fs-lg); margin-block-end: var(--sdc-space-3); }
.sdc-hours { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: .35rem; font-size: var(--sdc-fs-sm); }
.sdc-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0 !important; color: var(--sdc-muted-on-dark); }
.sdc-hours b { font-family: var(--sdc-font-mono); color: var(--sdc-white); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.sdc-hours .is-closed b { color: var(--sdc-muted-on-dark); }
.sdc-mapcard__panel a { color: var(--sdc-green) !important; font-weight: 700; display: inline-block; margin-block-start: var(--sdc-space-3); }

@media (max-width: 980px) {
  .sdc-vm, .sdc-numbers-map { grid-template-columns: 1fr; }
  .sdc-values, .sdc-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdc-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sdc-quote-wrap.et_pb_row { grid-template-columns: 1fr; }
  .sdc-side-sticky.et_pb_column { position: static !important; }
}
@media (max-width: 767px) {
  .sdc-values, .sdc-contact-cards { grid-template-columns: 1fr; }
  .sdc-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdc-2030 { grid-template-columns: 1fr; }
  .sdc-mapcard__panel { position: relative; inset: auto; max-inline-size: none; margin: 280px var(--sdc-space-3) var(--sdc-space-3); }
  .sdc-mapcard { min-block-size: 0; }
  .sdc-mapcard iframe { block-size: 300px; }
}

/* -------------------------------------------------------------- 40. SINGLE PROJECT (Theme Builder) */
.sdc-proj-hero { min-block-size: min(88svh, 860px); display: flex !important; flex-direction: column; justify-content: flex-end; padding-block: calc(var(--sdc-space-10) + 40px) var(--sdc-space-8) !important; }
.sdc-proj-hero h1 { color: var(--sdc-white); font-size: var(--sdc-fs-4xl); max-width: 20ch; margin-block: var(--sdc-space-3) var(--sdc-space-5); }
.sdc-proj-hero .sdc-terms a, .sdc-terms a { color: var(--sdc-green) !important; text-decoration: none; font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-sm); text-transform: uppercase; letter-spacing: .1em; }
:lang(ar) .sdc-terms a { font-family: var(--sdc-font-body-ar); letter-spacing: 0; }
.sdc-kpis.et_pb_group { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--sdc-line-dark); border-radius: var(--sdc-radius-lg); overflow: hidden; background: rgba(5, 15, 36, .55); backdrop-filter: blur(8px); margin-block-start: var(--sdc-space-6) !important; }
.sdc-kpis > .et_pb_module { margin: 0 !important; padding: var(--sdc-space-5) !important; border-inline-end: 1px solid var(--sdc-line-dark); }
.sdc-kpis > .et_pb_module:last-child { border-inline-end: 0; }
.sdc-kpi strong { display: block; font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-2xl); color: var(--sdc-white); font-weight: 600; line-height: 1.1; }
.sdc-kpi .sdc-kpi__label { display: block; color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); margin-block-start: var(--sdc-space-1); }
.sdc-kpi small { color: var(--sdc-green); font-size: .55em; margin-inline-start: .25em; }
.sdc-facts.et_pb_group { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: var(--sdc-space-6); margin-block-start: var(--sdc-space-5) !important; }
.sdc-facts > .et_pb_module { margin: 0 !important; }
.sdc-fact { color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); }
.sdc-fact b { display: block; color: var(--sdc-white); font-family: var(--sdc-font-head); font-size: var(--sdc-fs-base); }

.sdc-csr.et_pb_row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sdc-space-5); }
.sdc-csr > .et_pb_column { inline-size: auto !important; margin: 0 !important; }
.sdc-csr-card { block-size: 100%; padding: var(--sdc-space-6) !important; border-radius: var(--sdc-radius-lg); background: var(--sdc-white); border: 1px solid var(--sdc-line); position: relative; }
.sdc-csr-card::before { content: attr(data-step); position: absolute; inset-block-start: var(--sdc-space-5); inset-inline-end: var(--sdc-space-5); font-family: var(--sdc-font-mono); color: var(--sdc-blue-100); font-size: var(--sdc-fs-3xl); line-height: 1; font-weight: 600; }
.sdc-csr-card h2 { font-size: var(--sdc-fs-xl); margin-block-end: var(--sdc-space-4); }
.sdc-csr-card--results { background: var(--sdc-navy); border-color: var(--sdc-navy); }
.sdc-csr-card--results h2 { color: var(--sdc-white); }
.sdc-csr-card--results, .sdc-csr-card--results p { color: var(--sdc-text-on-dark); }
.sdc-csr-card--results::before { color: rgba(14, 217, 46, .35); }

/* before / after slider */
.sdc-ba.et_pb_group { position: relative; display: block !important; border-radius: var(--sdc-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--sdc-navy); user-select: none; }
.sdc-ba > .et_pb_module { margin: 0 !important; }
.sdc-ba .et_pb_image, .sdc-ba .et_pb_image_wrap { display: block; inline-size: 100%; block-size: 100%; }
.sdc-ba img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sdc-ba__before { position: relative; block-size: 100%; }
.sdc-ba.is-ready .sdc-ba__after { position: absolute !important; inset: 0; z-index: 1; }
.sdc-ba__handle { position: absolute; z-index: 2; inset-block: 0; inset-inline-start: var(--ba, 50%); inline-size: 3px; translate: -50% 0; background: var(--sdc-white); box-shadow: 0 0 0 1px rgba(11, 31, 69, .3), 0 0 18px var(--sdc-green-glow); pointer-events: none; }
[dir="rtl"] .sdc-ba__handle { translate: 50% 0; }
.sdc-ba__handle::after { content: "⟷"; position: absolute; top: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: 52px; block-size: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sdc-green); color: var(--sdc-navy); font-weight: 800; font-size: 1.25rem; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .4); }
[dir="rtl"] .sdc-ba__handle::after { translate: 50% -50%; }
.sdc-ba__range { position: absolute; inset: 0; z-index: 3; inline-size: 100%; block-size: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.sdc-ba__range:focus-visible + * , .sdc-ba:focus-within .sdc-ba__handle::after { box-shadow: 0 0 0 4px var(--sdc-white), 0 0 0 7px var(--sdc-blue); }
.sdc-ba__tags { position: absolute; z-index: 2; inset-inline: var(--sdc-space-4); top: var(--sdc-space-4); display: flex; justify-content: space-between; pointer-events: none; }
.sdc-ba__tags b { background: rgba(11, 31, 69, .85); color: var(--sdc-white); font-size: var(--sdc-fs-xs); font-family: var(--sdc-font-mono); padding: .3rem .7rem; border-radius: var(--sdc-radius-pill); }

/* diesel vs solar */
.sdc-dvs.et_pb_group { padding: clamp(1.5rem, 1rem + 2vw, 3rem) !important; border-radius: var(--sdc-radius-lg); background: var(--sdc-navy); position: relative; overflow: hidden; isolation: isolate; gap: var(--sdc-space-5); }
.sdc-dvs::before { content: ""; position: absolute; inset-block-end: -40%; inset-inline-end: -20%; inline-size: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(14, 217, 46, .3), transparent 65%); z-index: -1; }
.sdc-dvs > .et_pb_module { margin: 0 !important; }
.sdc-dvs__row { display: grid; grid-template-columns: 7rem 1fr auto; gap: var(--sdc-space-4); align-items: center; color: var(--sdc-muted-on-dark); }
.sdc-dvs__label { font-weight: 700; color: var(--sdc-text-on-dark); }
.sdc-dvs__bar { display: block; block-size: 18px; border-radius: 9px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.sdc-dvs__bar i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: #8a9ab2; transition: inline-size 1.4s var(--sdc-ease-out); }
.sdc-dvs.is-in .sdc-dvs__bar i { inline-size: var(--w, 0); }
.sdc-dvs__row--solar .sdc-dvs__bar i { background: var(--sdc-green); box-shadow: 0 0 14px var(--sdc-green-glow); }
.sdc-dvs__val { font-family: var(--sdc-font-mono); color: var(--sdc-white); font-size: var(--sdc-fs-lg); font-weight: 600; }
.sdc-dvs__summary { display: flex; flex-wrap: wrap; gap: var(--sdc-space-7); padding-block-start: var(--sdc-space-5); border-block-start: 1px solid var(--sdc-line-dark); }
.sdc-dvs__summary div { color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); }
.sdc-dvs__summary strong { display: block; font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-3xl); color: var(--sdc-green); font-weight: 600; text-shadow: 0 0 20px var(--sdc-green-glow); }

/* equipment, gallery, testimonial */
.sdc-equip { padding: var(--sdc-space-6) !important; border-radius: var(--sdc-radius-lg); border: 1px dashed var(--sdc-line); background: var(--sdc-white); font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-sm); color: var(--sdc-text); white-space: pre-line; }
.sdc-spec { display: inline-flex; flex-direction: column; padding: var(--sdc-space-4) var(--sdc-space-5); border-radius: var(--sdc-radius); background: var(--sdc-surface); border: 1px solid var(--sdc-line); }
.sdc-spec strong { font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-xl); color: var(--sdc-blue); }
.sdc-spec span { font-size: var(--sdc-fs-sm); color: var(--sdc-text-muted); }
.sdc-specs.et_pb_group { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: var(--sdc-space-4); margin-block-start: var(--sdc-space-4) !important; }
.sdc-specs > .et_pb_module { margin: 0 !important; }
.sdc-gallery.et_pb_column { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sdc-space-4); }
.sdc-gallery > .et_pb_module { margin: 0 !important; border-radius: var(--sdc-radius); overflow: hidden; aspect-ratio: 4 / 3; }
.sdc-gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .8s var(--sdc-ease-out); }
.sdc-gallery a:hover img, .sdc-gallery a:focus-visible img { transform: scale(1.05); }
.sdc-ptesti { text-align: center; max-width: 820px; margin-inline: auto; }
.sdc-ptesti blockquote { margin: 0; padding: 0 !important; border: 0 !important; font-family: var(--sdc-font-head); font-weight: 800; font-size: var(--sdc-fs-2xl); color: var(--sdc-white); line-height: 1.4; }

/* -------------------------------------------------------------- 41. SINGLE SERVICE (Theme Builder) */
.sdc-svc-icon img { inline-size: 64px; block-size: 64px; object-fit: contain; padding: 12px; border-radius: var(--sdc-radius); background: rgba(255, 255, 255, .06); border: 1px solid var(--sdc-line-dark); }
.sdc-includes ul { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sdc-space-3) var(--sdc-space-6); }
.sdc-includes li { position: relative; padding-inline-start: 2rem !important; padding-block: .5rem; border-block-end: 1px solid var(--sdc-line); font-weight: 600; }
.sdc-includes li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75rem; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--sdc-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%230ed92e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.sdc-benefits.et_pb_column { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sdc-space-5); }
.sdc-benefit.et_pb_group { padding: var(--sdc-space-6) !important; border-radius: var(--sdc-radius-lg); background: var(--sdc-white); border: 1px solid var(--sdc-line); margin: 0 !important; position: relative; overflow: hidden; }
.sdc-benefit.et_pb_group::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 3px; background: linear-gradient(90deg, var(--sdc-blue), var(--sdc-green)); }
.sdc-benefit .et_pb_module { margin: 0 !important; }
.sdc-benefit h3 { font-size: var(--sdc-fs-lg); margin-block-end: var(--sdc-space-2); }
.sdc-benefit p { color: var(--sdc-text-muted); }
.sdc-chips a, .sdc-chips span.sdc-chip-static { display: inline-flex; padding: .45rem 1rem; margin: 0 .5rem .5rem 0; margin-inline: 0 .5rem; border-radius: var(--sdc-radius-pill); border: 1.5px solid var(--sdc-line); color: var(--sdc-navy) !important; font-weight: 700; text-decoration: none; background: var(--sdc-white); }
.sdc-chips a:hover { border-color: var(--sdc-blue); color: var(--sdc-blue) !important; }
.sdc-steps.et_pb_column { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sdc-space-4); counter-reset: s; }
.sdc-step.et_pb_group { margin: 0 !important; padding-block-start: 72px !important; position: relative; counter-increment: s; }
.sdc-step.et_pb_group::before { content: counter(s, decimal-leading-zero); position: absolute; top: 0; inset-inline-start: 0; inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--sdc-navy); color: var(--sdc-green); font-family: var(--sdc-font-mono); font-weight: 600; box-shadow: var(--sdc-glow); }
.sdc-step.et_pb_group::after { content: ""; position: absolute; top: 28px; inset-inline-start: 64px; inset-inline-end: -16px; block-size: 2px; background: linear-gradient(90deg, var(--sdc-green), var(--sdc-line)); }
[dir="rtl"] .sdc-step.et_pb_group::after { background: linear-gradient(-90deg, var(--sdc-green), var(--sdc-line)); }
.sdc-step.et_pb_group:last-child::after { display: none; }
.sdc-step .et_pb_module { margin: 0 !important; }
.sdc-step h3 { font-size: var(--sdc-fs-md); margin-block-end: var(--sdc-space-2); }
.sdc-step p { color: var(--sdc-text-muted); font-size: var(--sdc-fs-sm); }

/* -------------------------------------------------------------- 42. HEADER (Theme Builder global) */
.sdc-header.et_pb_section { position: fixed !important; inset-inline: 0; top: 0; z-index: 9999; padding: 0 !important; background: transparent !important; transition: background-color var(--sdc-dur) var(--sdc-ease), box-shadow var(--sdc-dur), backdrop-filter var(--sdc-dur); }
body.admin-bar .sdc-header.et_pb_section { top: 32px; }
.sdc-header .et_pb_row { display: flex !important; align-items: center; gap: var(--sdc-space-5); padding-block: var(--sdc-space-4) !important; transition: padding var(--sdc-dur); }
.sdc-header .et_pb_column { margin: 0 !important; inline-size: auto !important; }
.sdc-header__menu.et_pb_column { flex: 1 1 auto; }
.sdc-header__actions.et_pb_column { display: flex !important; flex-direction: row !important; align-items: center; gap: var(--sdc-space-4); flex: 0 0 auto; }
.sdc-header__actions .et_pb_module { margin: 0 !important; }
.sdc-header .et_pb_menu, .sdc-header .et_pb_menu__wrap { background: transparent !important; }
.sdc-header .et_pb_menu .et-menu > li > a, .sdc-header .et_mobile_menu a { font-family: var(--sdc-font-head) !important; font-weight: 700 !important; font-size: var(--sdc-fs-base) !important; color: var(--sdc-white) !important; padding-block: 1.1rem !important; }
.sdc-header .et_pb_menu .et-menu > li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--sdc-green); }
.sdc-header .et_pb_menu .et-menu > li > a:hover { opacity: 1; color: var(--sdc-green) !important; }
.sdc-header .mobile_menu_bar::before { color: var(--sdc-white) !important; }
.sdc-header .et_pb_menu__logo img { max-block-size: 52px; inline-size: auto; transition: max-block-size var(--sdc-dur); }
.sdc-header .sub-menu { background: var(--sdc-navy) !important; border-block-start: 2px solid var(--sdc-green) !important; border-radius: 0 0 var(--sdc-radius-sm) var(--sdc-radius-sm); }
.sdc-header .sub-menu a { color: var(--sdc-text-on-dark) !important; }
.sdc-header.is-solid, .sdc-header.is-on-light { background: rgba(11, 31, 69, .94) !important; backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .45); }
.sdc-header.is-solid .et_pb_row { padding-block: var(--sdc-space-2) !important; }
.sdc-header.is-solid .et_pb_menu__logo img { max-block-size: 42px; }
.sdc-lang { font-family: var(--sdc-font-head); font-weight: 800; }
.sdc-lang a, .sdc-lang .wpml-ls-link { color: var(--sdc-white) !important; text-decoration: none; padding: .45rem .8rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--sdc-radius-pill); display: inline-flex; min-block-size: 40px; align-items: center; }
.sdc-lang a:hover { border-color: var(--sdc-green); color: var(--sdc-green) !important; }
.sdc-lang .wpml-ls, .sdc-lang ul { padding: 0 !important; margin: 0; list-style: none; display: flex; gap: .5rem; }
.sdc-lang .wpml-ls-current-language { display: none; } /* show only the OTHER language */
.sdc-header .sdc-btn .et_pb_button, .sdc-header .et_pb_button.sdc-btn { padding: .7em 1.2em !important; min-block-size: 44px; font-size: var(--sdc-fs-sm) !important; }

/* -------------------------------------------------------------- 43. FOOTER (Theme Builder global) */
.sdc-footer.et_pb_section { background: var(--sdc-navy) !important; color: var(--sdc-text-on-dark); padding-block: var(--sdc-space-9) 0 !important; position: relative; overflow: clip; }
.sdc-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; block-size: 1px; background: linear-gradient(90deg, transparent, var(--sdc-green), transparent); }
.sdc-footer .et_pb_row { gap: var(--sdc-space-6); }
.sdc-footer h2 { color: var(--sdc-white); font-size: var(--sdc-fs-md) !important; margin-block-end: var(--sdc-space-4); font-family: var(--sdc-font-head); }
.sdc-footer p, .sdc-footer li { color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); }
.sdc-footer ul { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .55rem; }
.sdc-footer a:not(.sdc-wa) { color: var(--sdc-text-on-dark) !important; text-decoration: none; }
.sdc-footer a:not(.sdc-wa):hover { color: var(--sdc-green) !important; }
.sdc-footer__logo img { max-inline-size: 200px; margin-block-end: var(--sdc-space-4); }
.sdc-footer__contact li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start; }
.sdc-footer__contact svg { inline-size: 18px; block-size: 18px; fill: none; stroke: var(--sdc-green); stroke-width: 1.8; margin-block-start: .2rem; }
.sdc-footer__contact .is-ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--sdc-font-mono); }
.sdc-social { display: flex !important; gap: .5rem; margin-block-start: var(--sdc-space-4) !important; }
.sdc-social a { inline-size: 42px; block-size: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--sdc-line-dark); }
.sdc-social a:hover { border-color: var(--sdc-green); background: rgba(14, 217, 46, .1); }
.sdc-social svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.sdc-footer__bottom.et_pb_row { border-block-start: 1px solid var(--sdc-line-dark); margin-block-start: var(--sdc-space-7) !important; padding-block: var(--sdc-space-5) !important; }
.sdc-footer__bottom p { font-size: var(--sdc-fs-xs); text-align: center; }

@media (max-width: 980px) {
  .sdc-kpis.et_pb_group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdc-kpis > .et_pb_module { border-block-end: 1px solid var(--sdc-line-dark); }
  .sdc-csr.et_pb_row, .sdc-includes ul { grid-template-columns: 1fr; }
  .sdc-benefits.et_pb_column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdc-steps.et_pb_column { grid-template-columns: 1fr; }
  .sdc-step.et_pb_group { padding-block-start: 0 !important; padding-inline-start: 76px !important; min-block-size: 64px; }
  .sdc-step.et_pb_group::after { display: none; }
  .sdc-gallery.et_pb_column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdc-header__actions .sdc-btn { display: none !important; }
}
@media (max-width: 767px) {
  .sdc-benefits.et_pb_column, .sdc-gallery.et_pb_column { grid-template-columns: 1fr; }
  .sdc-dvs__row { grid-template-columns: 1fr auto; }
  .sdc-dvs__bar { grid-column: 1 / -1; grid-row: 2; }
  body.admin-bar .sdc-header.et_pb_section { top: 0; }
}

/* -------------------------------------------------------------- 49. DIVI CODE-MODULE WRAPPER FIX
   Divi gives .et_pb_code_inner `position: relative` (0 px tall when its child is absolute), which would trap
   absolutely-positioned layers. For our layer modules the inner wrapper must not be the positioning box. */
.sdc-scene-module .et_pb_code_inner,
.sdc-blueprint-mod .et_pb_code_inner,
.sdc-story__progress-mod .et_pb_code_inner,
.sdc-process > .et_pb_code .et_pb_code_inner { position: static !important; }

/* -------------------------------------------------------------- 50. ANIME.JS LAYER (sdc-anime.js)
   Nothing is hidden by CSS except the hero headline for the first frames (sdc-anime-pending,
   set in <head> and always cleared by a fail-safe) — so pages stay readable without JS. */
.sdc-anime-pending .sdc-hero .sdc-a-split h1,
.sdc-anime-pending .sdc-page-hero .sdc-a-split h1 { opacity: 0; }
/* splitText word masks: keep descenders and Arabic diacritics inside the clip */
.sdc-a-split h1 > span, .sdc-a-split h2 > span, .sdc-a-split h3 > span { padding-block: .08em; margin-block: -.08em; }

/* Photo hero — multi-depth parallax layers */
.sdc-phero { position: absolute; inset: 0; overflow: hidden; background: #050f24; }
.sdc-phero__img { position: absolute; inset: -12% 0 auto; inline-size: 100%; block-size: 124%; object-fit: cover; object-position: center 40%; }
/* sun opposite the copy: mirror via the independent `rotate` property so anime.js' inline transform can't override it */
html:not([dir="rtl"]) .sdc-phero__img { rotate: y 180deg; }
.sdc-phero__img { animation: sdc-kenburns 24s ease-in-out infinite alternate; }
@keyframes sdc-kenburns { from { scale: 1; } to { scale: 1.06; } }
.sdc-phero__glow {
  position: absolute; inset-block-start: 4%; inset-inline-end: 8%; inline-size: 42vmax; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 140, .55) 0%, rgba(255, 181, 71, .22) 30%, rgba(255, 140, 40, 0) 65%);
  mix-blend-mode: screen; animation: sdc-glow 7s ease-in-out infinite;
}
@keyframes sdc-glow { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
.sdc-phero__rays { position: absolute; inset-block-start: -30%; inset-inline-end: -10%; inline-size: 90vmax; block-size: 90vmax; pointer-events: none; mix-blend-mode: screen; opacity: .35; animation: sdc-rays 40s linear infinite; }
.sdc-phero__rays path { stroke: rgba(255, 220, 160, .55); stroke-width: 26; stroke-linecap: round; filter: blur(14px); }
@keyframes sdc-rays { to { rotate: 8deg; } }
.sdc-phero__dust { position: absolute; inset: 0; pointer-events: none; }
.sdc-phero__dust i { position: absolute; inset-inline-start: var(--x); top: var(--y); inline-size: var(--s); block-size: var(--s); border-radius: 50%; background: rgba(255, 226, 168, .85); box-shadow: 0 0 8px rgba(255, 200, 120, .9); animation: sdc-dust var(--d) ease-in-out infinite alternate; opacity: .7; }
@keyframes sdc-dust { from { translate: 0 0; opacity: .25; } to { translate: calc(14px * var(--sdc-dir)) -26px; opacity: .9; } }
.sdc-hero::after { background: linear-gradient(to right, rgba(5, 15, 36, .88) 0%, rgba(5, 15, 36, .55) 42%, rgba(5, 15, 36, .1) 75%); }
[dir="rtl"] .sdc-hero::after { background: linear-gradient(to left, rgba(5, 15, 36, .88) 0%, rgba(5, 15, 36, .55) 42%, rgba(5, 15, 36, .1) 75%); }
.sdc-hero > .et_pb_row:not(.sdc-hero__bg-row) .et_pb_module { margin-block-end: 0 !important; }

/* Story — real photos crossfade above the illustration, glyph morphs sun → drop → wheat */
.sdc-story__photos { position: absolute; inset: 0; }
.sdc-story__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--sdc-ease), scale 6s var(--sdc-ease); scale: 1.06; }
.sdc-story__photo.is-active { opacity: 1; scale: 1; }
.sdc-story__photos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 15, 36, .7), rgba(5, 15, 36, 0) 55%); pointer-events: none; }
.sdc-story__glyph { position: absolute; z-index: 2; inset-block-end: var(--sdc-space-5); inset-inline-start: var(--sdc-space-5); inline-size: 92px; block-size: 92px; padding: 14px; border-radius: 50%;
  background: rgba(11, 31, 69, .72); border: 1px solid rgba(14, 217, 46, .5); backdrop-filter: blur(8px); box-shadow: 0 0 30px rgba(14, 217, 46, .25); }
.sdc-story__shape { fill: var(--sdc-green); filter: drop-shadow(0 0 8px var(--sdc-green-glow)); }
.sdc-story__src { display: none; }

/* Logo marquee (trust bar) */
.sdc-marquee { flex: 1 1 320px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sdc-marquee__track { display: flex; gap: var(--sdc-space-6); list-style: none; margin: 0; padding: 0 !important; inline-size: max-content; }
.sdc-marquee__item { flex: none; min-inline-size: 150px; block-size: 64px; display: grid; place-items: center; padding: 0 var(--sdc-space-4) !important;
  border: 1.5px dashed var(--sdc-line); border-radius: var(--sdc-radius); color: var(--sdc-text-muted); font-family: var(--sdc-font-mono); font-size: var(--sdc-fs-sm); }
.sdc-marquee__item img { max-block-size: 44px; inline-size: auto; filter: grayscale(1); opacity: .75; transition: filter var(--sdc-dur), opacity var(--sdc-dur); }
.sdc-marquee__item:hover img { filter: none; opacity: 1; }

/* Reading progress bar (single project / service) */
.sdc-progress { position: fixed; inset-inline: 0; top: 0; z-index: 10000; block-size: 3px; background: linear-gradient(90deg, var(--sdc-blue), var(--sdc-green)); transform-origin: left center; scale: 0 1; pointer-events: none; box-shadow: 0 0 10px var(--sdc-green-glow); }
[dir="rtl"] .sdc-progress { transform-origin: right center; background: linear-gradient(-90deg, var(--sdc-blue), var(--sdc-green)); }
body.admin-bar .sdc-progress { top: 32px; }

/* Horizontal scroll (anime.js, sticky stage) */
.sdc-hscroll.is-pinned { overflow: visible; padding: 0; scroll-snap-type: none; }
.sdc-hscroll__stage { position: sticky; top: 0; block-size: 100vh; display: flex; align-items: center; overflow: hidden; }

/* tilt + magnetic need transform room */
.sdc-a-tilt { will-change: transform; }
.sdc-a-magnetic .et_pb_button, .et_pb_button.sdc-a-magnetic { will-change: transform; }

@media (max-width: 767px) {
  .sdc-phero__rays, .sdc-phero__dust { display: none; }
  .sdc-hero::after, [dir="rtl"] .sdc-hero::after { background: linear-gradient(to top, rgba(5, 15, 36, .94) 30%, rgba(5, 15, 36, .78) 65%, rgba(5, 15, 36, .62)); } /* copy spans the full width on phones → darker veil keeps 4.5:1 over the bright sky */
  .sdc-story__glyph { inline-size: 72px; block-size: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .sdc-phero__img, .sdc-phero__glow, .sdc-phero__rays, .sdc-phero__dust i { animation: none !important; }
  .sdc-progress { display: none; }
}

/* -------------------------------------------------------------- 18. RESPONSIVE */
@media (max-width: 980px) {
  .sdc-story__wrap, .et_pb_row.sdc-story__wrap { grid-template-columns: 1fr; }
  .sdc-story__visual { position: relative; top: 0; block-size: 46vh; }
  .sdc-story__visual-mod { position: relative !important; top: 0; }
  .sdc-head-action.et_pb_column { align-items: flex-start; }
  .sdc-story__step { min-block-size: auto; }
  .sdc-calc { grid-template-columns: 1fr; }
  .sdc-stats { grid-template-columns: repeat(2, 1fr); }
  .sdc-stat:nth-child(2n) { border-inline-end: 0; }
  .sdc-stat:nth-child(-n+2) { border-block-end: 1px solid var(--sdc-line-dark); }
  .sdc-process__steps { grid-template-columns: 1fr; gap: var(--sdc-space-6); text-align: start; }
  .sdc-process__steps li { display: grid; grid-template-columns: 68px 1fr; gap: var(--sdc-space-4); text-align: start; }
  .sdc-process__dot { margin: 0; }
  .sdc-process__line { inset-inline-start: 34px; inset-inline-end: auto; top: 34px; bottom: 34px; inline-size: 2px; block-size: auto; }
  .sdc-process__line svg { display: none; }
  .sdc-process__line { background: linear-gradient(var(--sdc-green), var(--sdc-line)); }
}
@media (max-width: 767px) {
  .sdc-hero { min-block-size: 92svh; padding-block: calc(var(--sdc-space-9) + 20px) var(--sdc-space-8) !important; }
  .sdc-hero::after,
  [dir="rtl"] .sdc-hero::after { background: linear-gradient(to top, rgba(5, 15, 36, .94) 30%, rgba(5, 15, 36, .6) 70%, rgba(5, 15, 36, .35)); }
  .sdc-stat__num { font-size: var(--sdc-fs-3xl); }
  .sdc-btn-row { flex-direction: column; align-items: stretch; }
  .sdc-btn-row .et_pb_button { inline-size: 100%; }
  .sdc-hero__scroll { display: none; }
}

/* -------------------------------------------------------------- 19. REDUCED MOTION — everything static & fully readable */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .sdc-js [data-sdc-reveal] { opacity: 1 !important; transform: none !important; }
  .sdc-story__step { min-block-size: auto; }
  .sdc-story__visual { position: relative; top: 0; }
  .sdc-story__layer { opacity: 1; }
  .sdc-story__layer + .sdc-story__layer { opacity: 0; } /* show first stage art only */
  .sdc-card { transform: none !important; }
  .sdc-scene canvas { display: none; }
  .sdc-scene__fallback { opacity: 1 !important; }
}
/* Toggled by JS when the visitor prefers reduced motion (covers browsers that ignore the media query in JS-driven styles) */
.sdc-reduced .sdc-scene canvas { display: none; }

/* Print */
@media print {
  .sdc-scene-module, .sdc-wa, .sdc-hero__scroll, .sdc-slider__nav { display: none !important; }
  .sdc-hero, .sdc-story, .sdc-cta, .sdc-navy { background: #fff !important; color: #000 !important; }
}

/* -------------------------------------------------------------- 51. ISOMETRIC WEBGL DIORAMAS (scene-iso.js) */
.sdc-iso { position: absolute; inset: 0; overflow: hidden; }
.sdc-iso .sdc-scene__fallback { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity .6s ease; }
.sdc-iso canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .9s cubic-bezier(.22, 1, .36, 1); }
.sdc-iso.is-live canvas { opacity: 1; }
.sdc-iso__tip {
  position: absolute; z-index: 2; translate: -50% -100%; pointer-events: none; white-space: nowrap;
  padding: .45em .8em; border-radius: 999px; font: 600 var(--sdc-fs-sm)/1.2 var(--sdc-font-body);
  color: var(--sdc-navy); background: var(--sdc-white); box-shadow: 0 8px 24px rgba(5, 15, 36, .35);
  opacity: 0; scale: .9; transition: opacity .2s ease, scale .25s cubic-bezier(.22, 1, .36, 1);
}
.sdc-iso__tip::before { content: ""; display: inline-block; inline-size: .55em; block-size: .55em; margin-inline-end: .5em; border-radius: 50%; background: var(--sdc-green); }
.sdc-iso__tip.is-on { opacity: 1; scale: 1; }
/* Hero: navy dusk backdrop behind the floating diorama (the photo stays as the static / mobile fallback) */
.sdc-hero--iso { background: radial-gradient(120% 90% at 50% 0%, var(--sdc-navy-700), var(--sdc-navy) 62%) !important; }
/* Story: sticky diorama beside the steps */
.sdc-story__iso { position: relative; block-size: min(78vh, 640px); border-radius: var(--sdc-radius-lg); overflow: hidden;
  background: radial-gradient(100% 80% at 50% 10%, var(--sdc-navy-700), var(--sdc-navy)); }
/* Card / section diorama (Services, Projects, About) */
.sdc-iso-card { position: relative; block-size: clamp(320px, 52vw, 560px); border-radius: var(--sdc-radius-lg); overflow: hidden;
  background: radial-gradient(100% 80% at 50% 10%, var(--sdc-navy-700), var(--sdc-navy)); }
@media (prefers-reduced-motion: reduce) { .sdc-iso canvas, .sdc-iso__tip { display: none; } }
.sdc-reduced .sdc-iso canvas, .sdc-iso.is-static canvas { display: none; }
/* Home hero: photo fallback inside the iso mount keeps the old framing until WebGL takes over */
.sdc-iso .sdc-phero__img { inset: -12% 0 auto; block-size: 124%; }
/* Inner-page heroes with a diorama: taller stage, copy keeps its column */
.sdc-page-hero--iso { min-block-size: min(86vh, 780px); display: flex; flex-direction: column; justify-content: center; }
.sdc-page-hero--iso .sdc-scene__fallback > * { position: absolute; inset: 0; }
/* Story: the diorama overlays the SVG/photo stages; those stay as the fallback */
.sdc-story__visual > .sdc-iso { z-index: 3; }
.sdc-story__visual > .sdc-iso.is-live { background: radial-gradient(80% 80% at 50% 30%, var(--sdc-navy-700), var(--sdc-navy) 75%); }
.sdc-story__cta { margin-block-start: var(--sdc-space-6) !important; }

/* -------------------------------------------------------------- 52. MOBILE CTA BAR (footer layout) — phones only */
.sdc-mbar { display: none; }
@media (max-width: 767px) {
  .sdc-mbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 9991; display: flex; gap: var(--sdc-space-2);
    padding: var(--sdc-space-2) var(--sdc-space-3) calc(var(--sdc-space-2) + env(safe-area-inset-bottom));
    background: rgba(11, 31, 69, .96); backdrop-filter: blur(8px); border-block-start: 1px solid var(--sdc-line-dark);
  }
  .sdc-mbar a { min-block-size: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    border-radius: var(--sdc-radius-pill); font-weight: 700; text-decoration: none; font-size: var(--sdc-fs-base); }
  .sdc-mbar__primary { flex: 1; background: var(--sdc-green); color: var(--sdc-navy) !important; }
  .sdc-mbar__wa { padding-inline: 1.1em; background: #25d366; color: var(--sdc-navy) !important; }
  .sdc-mbar__wa svg { inline-size: 22px; block-size: 22px; fill: currentColor; }
  .sdc-mbar a:focus-visible { box-shadow: var(--sdc-focus-dark); outline: none; }
  body.sdc-site { padding-block-end: calc(64px + env(safe-area-inset-bottom)); }
  body:has(.sdc-mbar) .sdc-wa { display: none; } /* the bar already carries WhatsApp */
}
.sdc-page-hero--iso .sdc-lead { max-inline-size: 36rem; }
@media (min-width: 1100px) { /* keep the copy on its half — the diorama owns the other half */
  .sdc-page-hero--iso > .et_pb_row:not(.sdc-hero__bg-row) .et_pb_module { max-inline-size: 48%; }
  .sdc-page-hero--iso h1 { font-size: var(--sdc-fs-3xl); }
}