/* ==========================================================================
   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: "IBM Plex Sans", "Inter", system-ui, sans-serif;   /* English headings: IBM Plex Sans, bold (700 — its heaviest weight) */
  --sdc-font-body-en: "Inter", 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 { list-style: none; margin: 0; 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); 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; mix-blend-mode: multiply; 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 QUICK ACTIONS (footer layout) — phones only
   Two floating round buttons at the bottom, on the end side (right in EN, left in AR): request a quote above, WhatsApp below.
   The links keep their text for screen readers; it is hidden visually (font-size 0) and an icon is shown instead. */
.sdc-mbar { display: none; }
@media (max-width: 767px) {
  .sdc-mbar { position: fixed; inset-inline-end: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 9991;
    display: flex; flex-direction: column; gap: 12px; padding: 0; background: none; border: 0; }
  .sdc-mbar a { position: relative; inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; padding: 0;
    font-size: 0 !important; line-height: 0; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(5, 15, 36, .55), 0 0 0 1px rgba(255, 255, 255, .25) inset;
    transition: transform .2s ease; -webkit-tap-highlight-color: transparent; }
  .sdc-mbar a:active { transform: scale(.94); }
  .sdc-mbar a span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sdc-mbar__primary { background: var(--sdc-blue); color: #fff !important; }
  .sdc-mbar__primary::before { content: ""; inline-size: 26px; block-size: 26px; background: currentColor;   /* quote / document icon */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat; }
  .sdc-mbar__wa { background: #25d366; color: #fff !important; }
  .sdc-mbar__wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); animation: sdc-wa-ping 2.6s ease-out infinite; }
  .sdc-mbar__wa svg { inline-size: 28px; block-size: 28px; fill: currentColor; }
  .sdc-mbar a:focus-visible { box-shadow: var(--sdc-focus-dark); outline: none; }
  body:has(.sdc-mbar) .sdc-wa { display: none; } /* the floating buttons already carry WhatsApp */
}
@keyframes sdc-wa-ping { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } }
@media (prefers-reduced-motion: reduce) { .sdc-mbar__wa::after { animation: none; } }
.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); }
}

/* -------------------------------------------------------------- 53. 3D DIORAMAS (scene-farm.js — dashboard engine + booth models) */
.sdc-3d { position: absolute; inset: 0; overflow: hidden; }
.sdc-3d .sdc-scene__fallback { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity .6s ease; }
.sdc-3d canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1s cubic-bezier(.22, 1, .36, 1); }
.sdc-3d.is-live canvas { opacity: 1; }
.sdc-3d__pin {
  position: absolute; z-index: 2; inline-size: 10px; block-size: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: var(--sdc-green); box-shadow: 0 0 0 3px rgba(11, 31, 69, .55); opacity: 0; transition: opacity .4s ease;
}
.sdc-3d.is-live .sdc-3d__pin { opacity: .95; }
.sdc-3d__pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--sdc-green); animation: sdc-pin 2.2s cubic-bezier(.22, 1, .36, 1) infinite; }
.sdc-3d__pin.is-active { background: var(--sdc-white); }
@keyframes sdc-pin { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.sdc-3d__tip {
  position: absolute; z-index: 3; translate: -50% calc(-100% - 16px); pointer-events: none; max-inline-size: 260px;
  padding: .7em .95em; border-radius: var(--sdc-radius); background: var(--sdc-white); color: var(--sdc-text);
  box-shadow: 0 14px 34px rgba(5, 15, 36, .35); opacity: 0; scale: .92; transition: opacity .2s ease, scale .25s cubic-bezier(.22, 1, .36, 1);
  font: 400 var(--sdc-fs-sm)/1.45 var(--sdc-font-body);
}
.sdc-3d__tip strong { display: block; font: 700 var(--sdc-fs-base)/1.25 var(--sdc-font-head); color: var(--sdc-navy); margin-block-end: .2em; }
.sdc-3d__tip strong::before { content: ""; display: inline-block; inline-size: .55em; block-size: .55em; margin-inline-end: .45em; border-radius: 50%; background: var(--sdc-green); vertical-align: middle; }
.sdc-3d__tip span { color: var(--sdc-text-muted); }
.sdc-3d__tip.is-on { opacity: 1; scale: 1; }
.sdc-story__visual > .sdc-3d { z-index: 3; }
.sdc-story__visual > .sdc-3d.is-live { background: radial-gradient(80% 80% at 50% 30%, var(--sdc-navy-700), var(--sdc-navy) 75%); }
@media (prefers-reduced-motion: reduce) { .sdc-3d canvas, .sdc-3d__tip, .sdc-3d__pin { display: none; } }
.sdc-reduced .sdc-3d canvas, .sdc-3d.is-static canvas, .sdc-3d.is-static .sdc-3d__pin { display: none; }
/* Inner heroes with a diorama: readable copy over the scene (veil on the copy side, stronger on tablets) */
.sdc-page-hero--iso::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(5, 15, 36, .82) 0%, rgba(5, 15, 36, .45) 40%, rgba(5, 15, 36, 0) 68%); }
[dir="rtl"] .sdc-page-hero--iso::after { background: linear-gradient(to left, rgba(5, 15, 36, .82) 0%, rgba(5, 15, 36, .45) 40%, rgba(5, 15, 36, 0) 68%); }
@media (max-width: 1099px) {
  .sdc-page-hero--iso::after, [dir="rtl"] .sdc-page-hero--iso::after { background: linear-gradient(to top, rgba(5, 15, 36, .9) 25%, rgba(5, 15, 36, .55) 70%, rgba(5, 15, 36, .3)); }
}

/* -------------------------------------------------------------- 54. HERO TOUR (scroll-locked cinematic steps — scene-farm.js) */
.sdc-tour { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sdc-tour__hint {
  position: absolute; inset-inline-start: 50%; bottom: var(--sdc-space-6); translate: -50% 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--sdc-white);
  font: 600 var(--sdc-fs-sm)/1.3 var(--sdc-font-body); text-shadow: 0 2px 10px rgba(5, 15, 36, .8); transition: opacity .5s ease, translate .5s ease;
}
[dir="rtl"] .sdc-tour__hint { translate: 50% 0; }
.sdc-tour__hint.is-off { opacity: 0; translate: -50% 10px; }
[dir="rtl"] .sdc-tour__hint.is-off { translate: 50% 10px; }
.sdc-tour__mouse { inline-size: 24px; block-size: 38px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 14px; position: relative; }
.sdc-tour__mouse::after { content: ""; position: absolute; inset-inline-start: 50%; top: 7px; inline-size: 4px; block-size: 8px; margin-inline-start: -2px; border-radius: 2px; background: var(--sdc-green); animation: sdc-wheel 1.6s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes sdc-wheel { from { translate: 0 0; opacity: 1; } to { translate: 0 12px; opacity: 0; } }
.sdc-tour__dots { position: absolute; inset-inline-end: var(--sdc-space-6); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 10px 7px; border-radius: 999px; background: rgba(5, 15, 36, .35); backdrop-filter: blur(4px); }
.sdc-tour__dots span { display: block; inline-size: 6px; block-size: 6px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background .4s ease, block-size .4s cubic-bezier(.22, 1, .36, 1); }
.sdc-tour__dots span.is-on { background: var(--sdc-green); }
.sdc-tour__dots span.is-on:last-of-type, .sdc-tour__dots span.is-on:not(:has(+ .is-on)) { block-size: 18px; border-radius: 3px; } /* current step = pill */
.sdc-tour__skip {
  position: absolute; inset-inline-end: var(--sdc-space-6); bottom: var(--sdc-space-6); pointer-events: auto; cursor: pointer;
  min-block-size: 44px; padding: .55em 1.1em; border-radius: var(--sdc-radius-pill); border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(5, 15, 36, .5); color: var(--sdc-white); font: 600 var(--sdc-fs-sm)/1 var(--sdc-font-body); backdrop-filter: blur(6px);
}
.sdc-tour__skip:hover { border-color: var(--sdc-green); }
.sdc-tour__skip:focus-visible { outline: none; box-shadow: var(--sdc-focus-dark); }
.sdc-tour__cta {
  position: absolute; inset-inline-end: 7%; bottom: 12%; inline-size: min(420px, 40%); pointer-events: auto;
  padding: var(--sdc-space-6); border-radius: var(--sdc-radius-lg); background: rgba(11, 31, 69, .78); backdrop-filter: blur(10px);
  border: 1px solid rgba(169, 184, 211, .25); box-shadow: 0 24px 60px rgba(5, 15, 36, .45);
  opacity: 0; translate: 0 18px; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1);
}
.sdc-tour__cta.is-on { opacity: 1; translate: 0 0; }
.sdc-tour__title { margin: 0 0 .35em; color: var(--sdc-white); font: 800 var(--sdc-fs-xl)/1.2 var(--sdc-font-head); }
.sdc-tour__text { margin: 0 0 var(--sdc-space-5); color: var(--sdc-text-on-dark); }
.sdc-tour__btns { display: flex; flex-wrap: wrap; gap: var(--sdc-space-3); }
.sdc-tour-on .sdc-hero__scroll { display: none; }
.sdc-3d__tip.is-tour { max-inline-size: 300px; }
.sdc-3d__tip.is-tour strong { font-size: var(--sdc-fs-lg); }

/* Hero copy: ONE soft shade behind the whole text block (title + lead + buttons + figures) instead of a full-width veil */
@media (min-width: 768px) {
  .sdc-hero--iso::after { display: none; }
  .sdc-hero--iso > .et_pb_row:not(.sdc-hero__bg-row) > .et_pb_column { position: relative; }
  .sdc-hero--iso > .et_pb_row:not(.sdc-hero__bg-row) > .et_pb_column::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none; inset-block: -14% -10%; inset-inline-start: -12%; inline-size: min(980px, 82%);
    background: radial-gradient(closest-side, rgba(5, 15, 36, .62), rgba(5, 15, 36, .38) 55%, rgba(5, 15, 36, 0));
  }
}

/* -------------------------------------------------------------- 55. PINNED STORY (desktop ≥ 1024px — sdc-motion.js pinStory) */
.sdc-story.is-pinned { padding: 0 !important; }
.sdc-story__pin { position: sticky; top: 0; block-size: 100vh; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; padding-block: calc(var(--sdc-space-9) + 24px) var(--sdc-space-6); }
.sdc-story.is-pinned .sdc-story__pin > .et_pb_row:first-child { flex: none; margin-block-end: var(--sdc-space-6) !important; padding-block: 0 !important; }
.sdc-story.is-pinned .sdc-story__pin > .et_pb_row:first-child .sdc-lead { margin-block-end: 0; }
.sdc-story.is-pinned .et_pb_row.sdc-story__wrap { flex: 1 1 0; min-block-size: 0; overflow: hidden; padding-block: 0 !important; grid-template-rows: 100%; position: relative; }
.sdc-story.is-pinned .sdc-story__visual-mod { position: relative !important; top: 0; block-size: 100%; }
.sdc-story.is-pinned .sdc-story__visual-mod .et_pb_code_inner { block-size: 100%; }
.sdc-story.is-pinned .sdc-story__visual { position: relative; top: 0; block-size: 100%; }
.sdc-story.is-pinned .sdc-story__steps { align-self: start; will-change: transform; }
.sdc-story.is-pinned .sdc-story__step { min-block-size: var(--sdc-pin-view, 60vh); padding-block: var(--sdc-space-5); }
.sdc-story.is-pinned .sdc-story__cta { margin-block: 0 var(--sdc-space-6) !important; }
.sdc-story.is-pinned .sdc-story__steps > .sdc-story__step:nth-last-child(2) { min-block-size: calc(var(--sdc-pin-view, 60vh) - 110px); justify-content: flex-start; }
.sdc-story.is-pinned .sdc-story__wrap > .sdc-story__progress-mod { position: absolute !important; inset-block: var(--sdc-space-6); inset-inline-start: calc(50% + var(--sdc-space-8) / 2); margin: 0 !important; inline-size: 2px; }
/* soft fade where the sliding copy enters / leaves its window (copy side only — the 3D stays crisp) */
.sdc-story.is-pinned .sdc-story__wrap::before, .sdc-story.is-pinned .sdc-story__wrap::after {
  content: ""; position: absolute; z-index: 2; inset-inline: calc(50% + var(--sdc-space-8) / 2) 0; block-size: 72px; pointer-events: none;
}
.sdc-story.is-pinned .sdc-story__wrap::before { top: 0; background: linear-gradient(to bottom, var(--sdc-navy), rgba(11, 31, 69, 0)); }
.sdc-story.is-pinned .sdc-story__wrap::after { bottom: 0; background: linear-gradient(to top, var(--sdc-navy), rgba(11, 31, 69, 0)); }


/* -------------------------------------------------------------- 56. CALCULATOR RANGE (own track — theme CSS was hiding the native one) */
.sdc-calc__field input[type="range"] {
  -webkit-appearance: none !important; appearance: none !important; background: transparent !important; border: 0 !important;
  padding: 0 !important; margin: 0 !important; block-size: 28px !important; box-shadow: none !important; --fill: 50%;
}
.sdc-calc__field input[type="range"]::-webkit-slider-runnable-track {
  block-size: 6px; border-radius: 999px; background: linear-gradient(to right, var(--sdc-blue) var(--fill), var(--sdc-line) var(--fill));
}
[dir="rtl"] .sdc-calc__field input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--sdc-blue) var(--fill), var(--sdc-line) var(--fill)); }
.sdc-calc__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; inline-size: 22px; block-size: 22px; margin-block-start: -8px; border-radius: 50%;
  background: var(--sdc-blue); border: 3px solid var(--sdc-white); box-shadow: 0 2px 8px rgba(11, 31, 69, .35); transition: scale .2s ease;
}
.sdc-calc__field input[type="range"]:active::-webkit-slider-thumb { scale: 1.15; }
.sdc-calc__field input[type="range"]::-moz-range-track { block-size: 6px; border-radius: 999px; background: var(--sdc-line); }
.sdc-calc__field input[type="range"]::-moz-range-progress { block-size: 6px; border-radius: 999px; background: var(--sdc-blue); }
.sdc-calc__field input[type="range"]::-moz-range-thumb { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--sdc-blue); border: 3px solid var(--sdc-white); box-shadow: 0 2px 8px rgba(11, 31, 69, .35); }
.sdc-calc__field input[type="range"]:focus-visible { outline: none; }
.sdc-calc__field input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--sdc-focus); }
.sdc-calc__field input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--sdc-focus); }
.sdc-calc__field input[type="number"] { font-variant-numeric: lining-nums; }

/* -------------------------------------------------------------- 57. STORY SCENE CAROUSEL (farm → residential → industrial, slides left) */
.sdc-story__scenes { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.sdc-story__scenes:has(.is-live) { background: radial-gradient(80% 80% at 50% 30%, var(--sdc-navy-700), var(--sdc-navy) 75%); pointer-events: auto; }
.sdc-story__scenes > .sdc-3d { transition: transform 1s cubic-bezier(.65, 0, .35, 1), opacity 1s ease; transform: translateX(100%); opacity: 0; }
.sdc-story__scenes > .sdc-3d.is-active { transform: none; opacity: 1; }
.sdc-story__scenes > .sdc-3d.is-past { transform: translateX(-100%); opacity: 0; }
.sdc-story__scenes > .sdc-3d:first-child:not(.is-past):not(.is-next) { transform: none; opacity: 1; } /* before the first step activates */
@media (prefers-reduced-motion: reduce) { .sdc-story__scenes { display: none; } }

/* -------------------------------------------------------------- 58. PRODUCTS (home — a hero PV module drops in and shows its features; sdc-products.js) */
.sdc-products-sec { padding: 0 !important; color: var(--sdc-white);
  background: radial-gradient(70% 70% at 25% 65%, #0d131d 0%, #030406 70%) !important; }
[dir="rtl"] .sdc-products-sec { background: radial-gradient(70% 70% at 75% 65%, #0d131d 0%, #030406 70%) !important; }
.sdc-products-sec .et_pb_row { inline-size: 100% !important; max-inline-size: none !important; padding: 0 !important; }
.sdc-prod { position: relative; display: flex; align-items: center; padding: var(--sdc-section-y) var(--sdc-gutter); }
.sdc-prod__copy { inline-size: 100%; max-inline-size: 640px; margin-inline: auto; }
.sdc-prod h2 { color: var(--sdc-white); font-size: var(--sdc-fs-3xl); margin-block-end: var(--sdc-space-7); }
.sdc-prod__feats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sdc-space-6); }
.sdc-prod__feat { display: grid; grid-template-columns: 52px 1fr; column-gap: var(--sdc-space-4); align-items: start; padding: 0 !important; }
.sdc-prod__feat::before { content: none !important; }
.sdc-prod__mark { grid-row: span 2; inline-size: 52px; block-size: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .3); color: var(--sdc-green); background: rgba(255, 255, 255, .03); }
.sdc-prod__mark svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sdc-prod__feat h3 { color: var(--sdc-white); font-size: var(--sdc-fs-lg); margin: .55em 0 .3em; padding: 0; }
.sdc-prod__feat p { color: var(--sdc-muted-on-dark); margin: 0; padding: 0; }
/* live (desktop + motion): the section is exactly one screen; copy sits opposite the panel, revealed step by step */
.sdc-prod.is-live { min-block-size: 100vh; block-size: 100vh; padding-block: calc(var(--sdc-space-8) + 24px) var(--sdc-space-6); box-sizing: border-box; }
.sdc-prod.is-live .sdc-prod__copy { inline-size: min(440px, 34%); margin-inline: auto 6vw; }
.sdc-prod.is-live h2 { font-size: var(--sdc-fs-xl); margin-block-end: var(--sdc-space-5); }
.sdc-prod__sub { margin: calc(-1 * var(--sdc-space-5)) 0 var(--sdc-space-5); color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-md); }   /* optional line under a product's name */
.sdc-prod.is-live .sdc-prod__sub { margin-block: calc(-1 * var(--sdc-space-4)) var(--sdc-space-4); font-size: var(--sdc-fs-sm); }
.sdc-prod.is-live .sdc-prod__group--motor .sdc-prod__feats { gap: var(--sdc-space-3); }   /* seven features: a little tighter so they fit one screen */
.sdc-prod.is-live .sdc-prod__feats { gap: var(--sdc-space-4); }
.sdc-prod.is-live .sdc-prod__feat { grid-template-columns: 44px 1fr; }
.sdc-prod.is-live .sdc-prod__mark { inline-size: 44px; block-size: 44px; }
.sdc-prod.is-live .sdc-prod__feat h3 { font-size: var(--sdc-fs-md); margin-block-start: .45em; }
.sdc-prod.is-live .sdc-prod__feat p { font-size: var(--sdc-fs-sm); line-height: 1.55; }
.sdc-prod__group + .sdc-prod__group { margin-block-start: var(--sdc-section-y); }
/* live: the groups (panel · cables) share one spot in the column and take turns */
.sdc-prod.is-live .sdc-prod__copy { display: grid; align-items: center; }
.sdc-prod.is-live .sdc-prod__group { grid-area: 1 / 1; margin: 0; }
.sdc-prod.is-live .sdc-prod__head { opacity: 0; translate: 0 18px; transition: opacity .45s var(--sdc-ease-out), translate .6s var(--sdc-ease-out); }
.sdc-prod.is-live .sdc-prod__group.is-on .sdc-prod__head { opacity: 1; translate: 0 0; transition: opacity .5s var(--sdc-ease-out) .45s, translate .6s var(--sdc-ease-out) .45s; }
.sdc-prod.is-live .sdc-prod__group:not(.sdc-prod__group--panel).is-on .sdc-prod__head { transition-delay: .9s, .9s; }
.sdc-prod.is-live .sdc-prod__feat { opacity: 0; translate: 0 14px; transition: opacity .35s ease, translate .5s var(--sdc-ease-out); }
.sdc-prod.is-live .sdc-prod__feat.is-on { opacity: 1; translate: 0 0; transition: opacity .4s ease calc(var(--sdc-d, 0s) + .42s + var(--sdc-i, 0) * .32s), translate .5s var(--sdc-ease-out) calc(var(--sdc-d, 0s) + .42s + var(--sdc-i, 0) * .32s); }   /* after the product settles (--sdc-d), the features follow one another */
.sdc-prod-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; }
.sdc-prod.is-live .sdc-prod__copy { position: relative; z-index: 61; }   /* the feature texts stay above the 3D layer (and its shadows) */
.sdc-prod-layer.is-on { display: block; }
.sdc-prod-layer.is-lift { z-index: 10001; }   /* the panel's drop from the hero passes over the fixed header (z 9999) */
/* faint white halo between the black background and the product (the shadow is drawn onto it by the 3D scene);
   sdc-products.js centres and sizes it on each product's on-screen footprint */
.sdc-prod-halo { position: absolute; inset: 0 auto auto 0; inline-size: 84vmin; block-size: 84vmin; margin: -42vmin 0 0 -42vmin; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .17), rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .055) 72%, rgba(255, 255, 255, 0)); will-change: transform; }
.sdc-prod-layer canvas, .sdc-prod-layer svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.sdc-prod-layer path { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.25; transition: opacity .3s ease; }
.sdc-prod-dot { position: absolute; inset: 0 auto auto 0; inline-size: 10px; block-size: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .9); opacity: 0; transition: opacity .3s ease; }
.sdc-prod-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); animation: sdc-blink 1.5s ease-out infinite; }
@keyframes sdc-blink { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* -------------------------------------------------------------- 59. SERVICES (home — icon + name cards → list + detail panel; assets/sdc-services.js) */
.sdc-svc-sec { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(180deg, #f6f9fd 0%, #eef3fa 100%) !important; }
.sdc-svc-sec::before {   /* slow aurora of brand colours */
  content: ""; position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none; filter: blur(60px); opacity: .9;
  background: radial-gradient(38% 42% at 18% 22%, rgba(14, 217, 46, .14), transparent 70%),
              radial-gradient(40% 46% at 82% 30%, rgba(48, 86, 170, .18), transparent 70%),
              radial-gradient(36% 40% at 55% 92%, rgba(255, 181, 71, .12), transparent 70%);
  animation: sdc-aurora 22s ease-in-out infinite alternate;
}
.sdc-svc-sec::after {    /* faint engineering grid, fading out at the edges */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(11, 31, 69, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 31, 69, .05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 65% at 50% 45%, #000 30%, transparent 85%); mask-image: radial-gradient(70% 65% at 50% 45%, #000 30%, transparent 85%);
}
@keyframes sdc-aurora { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } }

/* grid of compact cards */
.sdc-svc-grid.et_pb_column { inline-size: 100% !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: clamp(.75rem, .5rem + .8vw, 1.25rem); align-items: stretch; }
.sdc-svc-grid > .et_pb_code { display: none !important; }
.sdc-svc-grid > .et_pb_module, .sdc-svc-grid > .et_pb_group { margin: 0 !important; inline-size: auto !important; }
.sdc-svc-card {
  position: relative; cursor: pointer; border-radius: 12px; padding: 1.6rem 1rem 1.35rem !important; text-align: center;
  background: rgba(255, 255, 255, .78); border: 1px solid var(--sdc-line); backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(11, 31, 69, .05), 0 10px 24px -18px rgba(11, 31, 69, .35);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
.sdc-svc-card .et_pb_blurb, .sdc-svc-card .et_pb_blurb_content, .sdc-svc-card .et_pb_blurb_container { margin: 0 !important; max-inline-size: none !important; padding: 0 !important; text-align: inherit; }
.sdc-svc-card .et_pb_main_blurb_image, .sdc-svc-card .et_pb_blurb_description, .sdc-svc-card .sdc-svc-card__more, .sdc-svc-card .et_pb_button_module_wrapper { display: none !important; }   /* photo, text and link feed the panel only */
/* Divi 5 sets the blurb container to a left-aligned flex column per module — the card decides alignment instead */
.sdc-svc-card .et_pb_blurb_container { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.sdc-svc-card .et_pb_module_header { text-align: center !important; inline-size: 100%; }
.sdc-svc-icon { display: grid; place-items: center; inline-size: 64px; block-size: 64px; margin: 0 auto .9rem; border-radius: 14px; color: var(--sdc-blue);
  background: linear-gradient(145deg, rgba(48, 86, 170, .1), rgba(14, 217, 46, .12)); transition: background .35s ease, color .35s ease; }
.sdc-svc-icon svg { inline-size: 40px; block-size: 40px; overflow: visible; }
.sdc-svc-card .et_pb_module_header { margin: 0 !important; padding: 0 !important; font: 700 var(--sdc-fs-base)/1.35 var(--sdc-font-head) !important; color: var(--sdc-navy) !important; }
.sdc-svc-card .et_pb_module_header a { color: inherit !important; text-decoration: none; }
.sdc-svc-card .et_pb_module_header a::before { content: ""; position: absolute; inset: 0; }   /* whole card is the target */
.sdc-svc-card:hover { transform: translateY(-4px); border-color: rgba(14, 217, 46, .55); background-color: #fff; box-shadow: 0 2px 4px rgba(11, 31, 69, .05), 0 18px 34px -20px rgba(11, 31, 69, .45); }
.sdc-svc-card:hover .sdc-svc-icon, .sdc-svc-card.is-active .sdc-svc-icon { color: var(--sdc-navy); background: linear-gradient(145deg, rgba(14, 217, 46, .28), rgba(14, 217, 46, .12)); }
.sdc-svc-card:focus-visible, .sdc-svc-card:has(a:focus-visible) { outline: 3px solid var(--sdc-green); outline-offset: 3px; }

/* animated icons: a gentle loop always, a livelier one on hover / active */
.sdc-svc-icon .i-drop { animation: sdc-i-drop 2.4s ease-in infinite; transform-box: fill-box; transform-origin: 50% 0; }
.sdc-svc-icon .i-arc { stroke-dasharray: 44; animation: sdc-i-draw 3.2s ease-in-out infinite; }
.sdc-svc-icon .i-wheel { stroke-dasharray: 4 2.6; animation: sdc-i-spin 1.6s linear infinite; transform-box: fill-box; transform-origin: center; }
.sdc-svc-icon .i-bob { animation: sdc-i-bob 1.6s ease-in-out infinite; }
.sdc-svc-icon .i-wrench { animation: sdc-i-turn 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 80%; }
.sdc-svc-icon .i-bar { animation: sdc-i-fill 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.sdc-svc-icon .i-b2 { animation-delay: .25s; } .sdc-svc-icon .i-b3 { animation-delay: .5s; }
.sdc-svc-icon .i-ray { animation: sdc-i-glow 1.8s ease-in-out infinite; color: var(--sdc-sun); stroke: var(--sdc-sun); }
.sdc-svc-icon .i-gear { animation: sdc-i-spin 9s linear infinite; transform-box: view-box; transform-origin: 24px 24px; }
.sdc-svc-icon .i-drop, .sdc-svc-icon .i-bar { stroke: #1f9e3a; }
.sdc-svc-card:hover .sdc-svc-icon *, .sdc-svc-card.is-active .sdc-svc-icon * { animation-duration: .9s; }
.sdc-svc-card:hover .sdc-svc-icon .i-gear, .sdc-svc-card.is-active .sdc-svc-icon .i-gear { animation-duration: 3s; }
@keyframes sdc-i-drop { 0% { transform: translateY(-5px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
@keyframes sdc-i-draw { 0% { stroke-dashoffset: 44; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes sdc-i-spin { to { transform: rotate(360deg); } }
@keyframes sdc-i-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes sdc-i-turn { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-22deg); } }
@keyframes sdc-i-fill { 0%, 100% { transform: scaleY(.25); opacity: .45; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes sdc-i-glow { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* reveal: cards rise in one after another (armed by JS only) */
.sdc-svc-sec.is-armed:not(.is-spy) .sdc-svc-card:not(.is-in) { opacity: 0; transform: translateY(24px); }
.sdc-svc-sec.is-armed .sdc-svc-card.is-in { transition: opacity .6s ease calc(var(--i, 0) * 80ms), transform .7s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 80ms), box-shadow .35s ease, border-color .35s ease, background-color .35s ease; }
.sdc-svc-sec.is-armed .sdc-svc-card.is-in:hover { transition-delay: 0s; }

/* ---- list + detail panel (after a click): list on the start side (left EN, right AR), panel beside it */
.sdc-svc-back { display: inline-flex; align-items: center; gap: .5rem; margin-block-end: var(--sdc-space-4); padding: .55rem 1rem; min-block-size: 44px; border-radius: 999px;
  border: 1px solid var(--sdc-line); background: rgba(255, 255, 255, .8); color: var(--sdc-blue); font: 600 var(--sdc-fs-sm)/1 var(--sdc-font-body); cursor: pointer; }
.sdc-svc-back:hover { border-color: var(--sdc-blue); }
.sdc-svc-back:focus-visible { outline: 3px solid var(--sdc-green); outline-offset: 3px; }
.sdc-svc-back[hidden] { display: none; }
.sdc-svc-sec.is-spy .sdc-svc-back { grid-column: 1; justify-self: start; margin-block-end: .4rem; }
.sdc-svc-sec.is-spy .sdc-svc-grid.et_pb_column { grid-template-columns: minmax(230px, 31%) minmax(0, 1fr); column-gap: clamp(1.25rem, 1rem + 2vw, 3rem); row-gap: .5rem; align-items: start; }
.sdc-svc-sec.is-spy .sdc-svc-card { grid-column: 1; display: block; text-align: start; padding: .7rem .9rem !important; border-radius: 10px; background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.sdc-svc-sec.is-spy .sdc-svc-card .et_pb_blurb_container { flex-direction: row !important; align-items: center !important; justify-content: flex-start; gap: .85rem; text-align: start !important; }
.sdc-svc-sec.is-spy .sdc-svc-card .et_pb_module_header { text-align: start !important; inline-size: auto; }
.sdc-svc-sec.is-spy .sdc-svc-icon { inline-size: 44px; block-size: 44px; margin: 0; flex: none; border-radius: 10px; }
.sdc-svc-sec.is-spy .sdc-svc-icon svg { inline-size: 28px; block-size: 28px; }
.sdc-svc-sec.is-spy .sdc-svc-card .et_pb_module_header { font-size: var(--sdc-fs-base) !important; color: var(--sdc-text-muted) !important; }
.sdc-svc-sec.is-spy .sdc-svc-card:hover { transform: none; background: rgba(255, 255, 255, .6); border-color: var(--sdc-line); box-shadow: none; }
.sdc-svc-sec.is-spy .sdc-svc-card.is-active { background: #fff; border-color: var(--sdc-line); box-shadow: 0 10px 24px -16px rgba(11, 31, 69, .4); }
.sdc-svc-sec.is-spy .sdc-svc-card.is-active .et_pb_module_header { color: var(--sdc-navy) !important; }
.sdc-svc-sec.is-spy .sdc-svc-card.is-active::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: -1px; inline-size: 4px; border-radius: 4px; background: var(--sdc-green); box-shadow: 0 0 12px var(--sdc-green-glow); }
.sdc-svc-sec.is-spy .sdc-svc-card:focus-visible { outline-offset: 1px; }
.sdc-svc-panel { grid-column: 2; grid-row: 1 / span 20; position: sticky; inset-block-start: 110px; display: grid; gap: var(--sdc-space-5);
  padding: clamp(1rem, .6rem + 1vw, 1.5rem); border-radius: 14px; background: #fff; border: 1px solid var(--sdc-line); box-shadow: 0 24px 50px -30px rgba(11, 31, 69, .45); }
.sdc-svc-panel[hidden] { display: none; }
.sdc-svc-panel__media { overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9; background: var(--sdc-navy); }
.sdc-svc-panel__media[hidden] { display: none; }
.sdc-svc-panel__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sdc-svc-panel__title { margin: 0 0 .4em; color: var(--sdc-navy); font-size: var(--sdc-fs-xl); }
.sdc-svc-panel__text { margin: 0 0 var(--sdc-space-5); color: var(--sdc-text-muted); max-inline-size: 60ch; }
.sdc-svc-panel.is-swap .sdc-svc-panel__media img { animation: sdc-svc-img .7s cubic-bezier(.22, 1, .36, 1); }
.sdc-svc-panel.is-swap .sdc-svc-panel__body { animation: sdc-svc-body .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes sdc-svc-img { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes sdc-svc-body { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* tablets / phones: grid of 2–3; in list mode the services become a swipeable row above the panel */
@media (max-width: 767px) {
  .sdc-svc-grid.et_pb_column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* list mode: the services wrap in two columns of compact chips, the panel follows below */
  .sdc-svc-sec.is-spy .sdc-svc-grid.et_pb_column { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .4rem; column-gap: .4rem; }
  .sdc-svc-sec.is-spy .sdc-svc-card { grid-column: auto; padding: .55rem .6rem !important; }
  .sdc-svc-sec.is-spy .sdc-svc-icon { inline-size: 36px; block-size: 36px; }
  .sdc-svc-sec.is-spy .sdc-svc-card .et_pb_module_header { font-size: var(--sdc-fs-sm) !important; }
  .sdc-svc-sec.is-spy .sdc-svc-panel { grid-column: 1 / -1; grid-row: auto; position: static; margin-block-start: .5rem; }
  .sdc-svc-sec.is-spy .sdc-svc-back { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .sdc-svc-sec::before { animation: none; }
  .sdc-svc-icon *, .sdc-svc-panel * { animation: none !important; }
  .sdc-svc-card { transition: none !important; }
}


/* -------------------------------------------------------------- 60. SDC IN NUMBERS — BENTO (home; neon-blue frames, animated drawings) */
.sdc-bento { --neon: #3db8ff; --neon-soft: rgba(61, 184, 255, .45); --neon-glow: rgba(61, 184, 255, .35);
  position: relative; padding: clamp(1rem, .6rem + 1.4vw, 1.75rem); border-radius: 22px; background: rgba(5, 15, 36, .45); border: 1px solid var(--sdc-line-dark); }
.sdc-bento__title { margin: 0 0 var(--sdc-space-5); color: var(--sdc-white); font-size: var(--sdc-fs-3xl) !important; }   /* same size as the other section headings */
.sdc-bento__grid { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr 1fr; grid-template-rows: auto auto auto; gap: clamp(.65rem, .4rem + .7vw, 1rem); }
.sdc-bento .sdc-tile--water { grid-column: 1 / span 2; grid-row: 3; min-block-size: 230px; }
.sdc-bento .sdc-tile--heat { grid-column: 3 / span 2; grid-row: 3; min-block-size: 230px; }
.sdc-tile { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(1rem, .8rem + .6vw, 1.4rem); border-radius: 16px; min-block-size: 150px;
  background: linear-gradient(160deg, rgba(24, 54, 110, .55), rgba(11, 31, 69, .75)); border: 1px solid var(--neon-soft);
  box-shadow: 0 0 0 1px rgba(61, 184, 255, .08), 0 0 22px -6px var(--neon-glow), inset 0 0 26px -12px var(--neon-glow); }
.sdc-tile--mw { grid-column: 1 / span 2; grid-row: 1 / span 2; min-block-size: 330px; display: flex; flex-direction: column; }
.sdc-tile--hp { grid-column: 3; grid-row: 1; } .sdc-tile--projects { grid-column: 4; grid-row: 1; }
.sdc-tile--summer { grid-column: 3; grid-row: 2; } .sdc-tile--winter { grid-column: 4; grid-row: 2; }
/* neon trace running round the frame */
@property --sdc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sdc-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--sdc-a), transparent 0 72%, rgba(61, 184, 255, .95) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sdc-trace 6s linear infinite; animation-delay: calc(var(--i, 0) * -1.2s); opacity: .9; }
@keyframes sdc-trace { to { --sdc-a: 360deg; } }
.sdc-tile__label { margin: 0; color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); line-height: 1.35; max-inline-size: 22ch; }
.sdc-tile__num { margin: .45rem 0 0; display: flex; align-items: baseline; gap: .2em; color: var(--sdc-white); font: 600 var(--sdc-fs-3xl)/1 var(--sdc-font-mono); direction: ltr; justify-content: flex-start; }
[dir="rtl"] .sdc-tile__num { justify-content: flex-end; }
.sdc-tile__num small { font-size: .4em; color: var(--neon); text-shadow: 0 0 12px var(--neon-glow); font-weight: 700; }
.sdc-tile--mw .sdc-tile__num { font-size: clamp(3rem, 2rem + 3.5vw, 5rem); text-shadow: 0 0 28px rgba(61, 184, 255, .3); }
.sdc-tile__note { margin: .6rem 0 0; color: var(--sdc-muted-on-dark); font-size: var(--sdc-fs-sm); }
.sdc-tile__chip { position: absolute; inset-block-end: .85rem; inset-inline-start: 1rem; margin: 0; padding: .2rem .6rem; border-radius: 999px; font: 700 var(--sdc-fs-xs)/1.4 var(--sdc-font-body);
  color: var(--sdc-white); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
/* big tile: rising neon line */
.sdc-tile__plot { position: relative; margin-block-start: auto; block-size: 46%; min-block-size: 130px; direction: ltr; }   /* time runs left → right in both languages */
.sdc-tile__chart { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.sdc-tile__grid path { stroke: rgba(169, 184, 211, .12); stroke-width: 1; stroke-dasharray: 4 6; fill: none; vector-effect: non-scaling-stroke; }
.sdc-tile__line { fill: none; stroke: var(--neon); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--neon)) drop-shadow(0 0 14px rgba(61, 184, 255, .6));
  stroke-dasharray: 1; stroke-dashoffset: 0; }
.sdc-tile__area { opacity: 1; }
.sdc-tile__dot { position: absolute; inset-inline-start: 97%; inset-block-start: 15.3%; inline-size: 14px; block-size: 14px; margin: -7px 0 0 -7px; border-radius: 50%;   /* the line's end (388, 26 of 400 × 170) */
  background: #fff; border: 3px solid var(--neon); box-shadow: 0 0 10px var(--neon), 0 0 22px rgba(61, 184, 255, .6); animation: sdc-dot 1.8s ease-in-out infinite; }
@keyframes sdc-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
/* pump gauge */
.sdc-tile__gauge { position: absolute; inset-block-end: .7rem; inset-inline-end: .8rem; inline-size: 44%; max-inline-size: 120px; overflow: visible; }
.sdc-g-track, .sdc-g-fill { fill: none; stroke-width: 7; stroke-linecap: round; }
.sdc-g-track { stroke: rgba(169, 184, 211, .15); }
.sdc-g-fill { stroke: var(--neon); stroke-dasharray: 1; stroke-dashoffset: .12; filter: drop-shadow(0 0 5px var(--neon)); }
.sdc-g-needle path { stroke: #fff; stroke-width: 3; stroke-linecap: round; } .sdc-g-needle circle { fill: #fff; }
.sdc-g-needle { transform-box: view-box; transform-origin: 60px 60px; transform: rotate(68deg); }
/* projects: bars */
.sdc-tile__bars { position: absolute; inset-inline: 1rem; inset-block-end: .9rem; block-size: 42px; display: flex; align-items: flex-end; gap: 5px; direction: ltr; }
.sdc-tile__bars span { flex: 1; block-size: calc(var(--h) * 1%); border-radius: 3px 3px 1px 1px; background: linear-gradient(to top, rgba(61, 184, 255, .25), var(--neon)); box-shadow: 0 0 10px -2px var(--neon-glow); transform-origin: bottom; }
/* summer: sun with turning, breathing rays */
.sdc-tile--summer { background: linear-gradient(160deg, rgba(255, 181, 71, .16), rgba(11, 31, 69, .8) 60%); }
.sdc-tile__sun { position: absolute; inset-block-end: .4rem; inset-inline-end: .5rem; inline-size: 74px; overflow: visible; }
.sdc-sun-core { fill: #ffd27a; filter: drop-shadow(0 0 10px rgba(255, 181, 71, .9)); }
.sdc-sun-rays { stroke: #ffb547; stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 32px 32px; animation: sdc-sun 14s linear infinite; }
.sdc-sun-rays path { animation: sdc-ray 2.4s ease-in-out infinite; }   /* each ray keeps its own rotate(… 32 32) */
.sdc-sun-rays path:nth-child(2n) { animation-delay: -1.2s; }
@keyframes sdc-sun { to { transform: rotate(360deg); } }
@keyframes sdc-ray { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* winter: drifting clouds, frost, light snow */
.sdc-tile--winter { background: linear-gradient(160deg, rgba(160, 200, 255, .14), rgba(11, 31, 69, .8) 60%); }
.sdc-tile__wx { position: absolute; inset-block-end: .2rem; inset-inline-end: .2rem; inline-size: 120px; overflow: visible; }
.sdc-cloud { fill: rgba(225, 236, 252, .9); }
.sdc-cloud--b { fill: rgba(190, 210, 240, .7); }
.sdc-cloud--a { animation: sdc-drift 7s ease-in-out infinite alternate; } .sdc-cloud--b { animation: sdc-drift 9s ease-in-out infinite alternate-reverse; }
@keyframes sdc-drift { from { transform: translateX(-5px); } to { transform: translateX(6px); } }
.sdc-frost { stroke: #bfe6ff; stroke-width: 2.2; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 5px rgba(140, 210, 255, .9)); transform-box: fill-box; transform-origin: center; animation: sdc-sun 12s linear infinite; }
.sdc-flake { fill: #e8f4ff; opacity: 0; animation: sdc-snow 2.8s linear infinite; animation-delay: var(--d); }
@keyframes sdc-snow { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(22px); opacity: 0; } }
/* entrance (armed by JS): tiles rise in turn, then the drawings play */
/* entrances: one tile after another, each its own way — no fades, no slides (clip-path, 3D, light) */
.sdc-bento.is-armed .sdc-tile:not(.is-on) { clip-path: inset(50% 50% 50% 50%); }
.sdc-tile { --ox: 82%; } [dir="rtl"] .sdc-tile { --ox: 18%; }   /* where the drawing sits: the openings start there */
.sdc-bento.is-armed .sdc-tile--mw.is-on { animation: sdc-in-crt .95s steps(1, end) 0s 1 both, sdc-in-crt-shape .95s cubic-bezier(.7, 0, .2, 1) both; }
.sdc-bento.is-armed .sdc-tile--hp.is-on { animation: sdc-in-iris .8s cubic-bezier(.65, 0, .25, 1) both; }
.sdc-bento.is-armed .sdc-tile--projects.is-on { animation: sdc-in-blinds .85s cubic-bezier(.55, 0, .3, 1) both; }
.sdc-bento.is-armed .sdc-tile--summer.is-on { animation: sdc-in-sunrise .9s cubic-bezier(.6, 0, .25, 1) both; }
.sdc-bento.is-armed .sdc-tile--winter.is-on { animation: sdc-in-flip .95s cubic-bezier(.3, 1.35, .5, 1) both; transform-origin: 50% 50%; backface-visibility: hidden; }
.sdc-bento.is-armed .sdc-tile--water.is-on { animation: sdc-in-rise .9s cubic-bezier(.45, 0, .2, 1) both; }
.sdc-bento.is-armed .sdc-tile--heat.is-on { animation: sdc-in-flare .95s cubic-bezier(.6, 0, .2, 1) both; }
/* CRT power-on: a hot line across the middle, it opens to full height, then the tube flickers and settles */
@keyframes sdc-in-crt-shape {
  0% { clip-path: inset(49.4% 50% 49.4% 50% round 16px); } 30% { clip-path: inset(49.4% 0 49.4% 0 round 16px); }
  62%, 100% { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes sdc-in-crt { 0% { filter: brightness(4) saturate(.4); } 62% { filter: brightness(1.8); } 70% { filter: brightness(.5); } 76% { filter: brightness(1.4); } 82% { filter: brightness(.8); } 88%, 100% { filter: none; } }
/* iris: opens out of the gauge */
@keyframes sdc-in-iris { 0% { clip-path: circle(0% at var(--ox) 82%); filter: brightness(2.2); } 100% { clip-path: circle(150% at var(--ox) 82%); filter: none; } }
/* venetian blinds: eight slats turn open */
@property --sdc-bl { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes sdc-in-blinds { 0% { --sdc-bl: 0%; clip-path: inset(0 round 16px); } 100% { --sdc-bl: 100%; clip-path: inset(0 round 16px); } }
.sdc-bento.is-armed .sdc-tile--projects.is-on { -webkit-mask-image: linear-gradient(to bottom, #000 var(--sdc-bl), transparent var(--sdc-bl)); mask-image: linear-gradient(to bottom, #000 var(--sdc-bl), transparent var(--sdc-bl));
  -webkit-mask-size: 100% 12.5%; mask-size: 100% 12.5%; -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; }
.sdc-bento.is-armed .sdc-tile--projects.is-live { -webkit-mask-image: none; mask-image: none; }
/* sunrise: a dome of warm light rises from where the sun sits */
@keyframes sdc-in-sunrise { 0% { clip-path: circle(0% at var(--ox) 100%); filter: brightness(2) sepia(.6); } 100% { clip-path: circle(165% at var(--ox) 100%); filter: none; } }
/* winter: the card turns in from edge-on, overshoots a hair and settles, like a frozen panel swinging round */
@keyframes sdc-in-flip { 0% { clip-path: inset(0 round 16px); transform: perspective(800px) rotateY(-92deg); filter: brightness(1.8) hue-rotate(10deg); }
  100% { clip-path: inset(0 round 16px); transform: perspective(800px) rotateY(0deg); filter: none; } }
/* water: the tile surfaces from the bottom up, a bright waterline leading */
@keyframes sdc-in-rise { 0% { clip-path: inset(100% 0 0 0 round 16px); box-shadow: inset 0 3px 0 0 #bfe9ff; } 100% { clip-path: inset(0 0 0 0 round 16px); } }
/* heat: a solar flare bursts out of the sun, over-exposed, then cools to normal */
@keyframes sdc-in-flare { 0% { clip-path: circle(0% at var(--ox) 50%); filter: brightness(3.2) saturate(1.6); } 55% { filter: brightness(1.8) saturate(1.3); }
  100% { clip-path: circle(160% at var(--ox) 50%); filter: none; } }
.sdc-bento.is-armed .sdc-tile__line { stroke-dashoffset: 1; }
.sdc-bento.is-armed .sdc-tile.is-live .sdc-tile__line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .35, 1) .35s; }
.sdc-bento.is-armed .sdc-tile__area { opacity: 0; }
.sdc-bento.is-armed .sdc-tile.is-live .sdc-tile__area { opacity: 1; transition: opacity 1.4s ease 1.3s; }
/* MW line → electric arc: once drawn, three jittering strands crackle over it and a bright pulse runs along it */
.sdc-tile__spark { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .12s linear; }
.sdc-tile__spark--a { stroke: #e9f8ff; stroke-width: 1.6; filter: drop-shadow(0 0 4px #9fe0ff) drop-shadow(0 0 10px var(--neon)); }
.sdc-tile__spark--b { stroke: #7fd4ff; stroke-width: 1.1; filter: drop-shadow(0 0 6px var(--neon)); }
.sdc-tile__spark--c { stroke: #5fc4ff; stroke-width: .8; }
.sdc-tile__pulse { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: .05 .95; stroke-dashoffset: 1; opacity: 0;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--neon)); }
.sdc-tile--mw.is-arc .sdc-tile__line { stroke-width: 2; opacity: .55; animation: sdc-arc-glow 1.6s ease-in-out infinite; }
.sdc-tile--mw.is-arc .sdc-tile__pulse { opacity: 1; animation: sdc-arc-run 2.4s linear infinite; }
@keyframes sdc-arc-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sdc-arc-glow { 0%, 100% { filter: drop-shadow(0 0 6px var(--neon)) drop-shadow(0 0 14px rgba(61, 184, 255, .6)); } 50% { filter: drop-shadow(0 0 10px var(--neon)) drop-shadow(0 0 26px rgba(61, 184, 255, .9)); } }
.sdc-bento.is-armed .sdc-tile__dot { opacity: 0; } .sdc-bento.is-armed .sdc-tile.is-live .sdc-tile__dot { opacity: 1; transition: opacity .4s ease 2.4s; }
.sdc-bento.is-armed .sdc-g-fill { stroke-dashoffset: 1; }
.sdc-bento.is-armed .sdc-tile.is-live .sdc-g-fill { stroke-dashoffset: .12; transition: stroke-dashoffset 1.8s cubic-bezier(.22, 1, .36, 1) .5s; }
.sdc-bento.is-armed .sdc-g-needle { transform: rotate(-90deg); }
.sdc-bento.is-armed .sdc-tile.is-live .sdc-g-needle { transform: rotate(68deg); transition: transform 1.8s cubic-bezier(.34, 1.3, .64, 1) .5s; }
.sdc-bento.is-armed .sdc-tile__bars span { transform: scaleY(0); }
.sdc-bento.is-armed .sdc-tile.is-live .sdc-tile__bars span { transform: none; transition: transform .7s cubic-bezier(.34, 1.4, .64, 1) calc(.5s + var(--d) * 70ms); }
@media (max-width: 1023px) {
  .sdc-bento__grid { grid-template-columns: 1fr 1fr; }
  .sdc-tile--mw { grid-column: 1 / -1; grid-row: auto; min-block-size: 280px; }
  .sdc-tile--hp, .sdc-tile--projects, .sdc-tile--summer, .sdc-tile--winter { grid-column: auto; grid-row: auto; }
}
/* Arabic: the mono face has no Arabic letters and tracking breaks the joins */
[dir="rtl"] .sdc-tile__num small { font-family: var(--sdc-font-body); font-size: .36em; }
@media (max-width: 599px) {   /* narrow tiles: room for the number above the drawing */
  .sdc-tile:not(.sdc-tile--mw) { min-block-size: 200px; }
  .sdc-tile__num { font-size: var(--sdc-fs-2xl); }
  .sdc-tile__sun { inline-size: 52px; } .sdc-tile__wx { inline-size: 92px; } .sdc-tile__gauge { inline-size: 54%; }
  .sdc-tile__bars { block-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .sdc-tile::before, .sdc-tile__dot, .sdc-sun-rays, .sdc-sun-rays path, .sdc-cloud, .sdc-frost, .sdc-flake { animation: none !important; }
  .sdc-flake { opacity: .7; }
}


/* water tile: a stream pours without stopping; the bottom fills to a third, then the surface just rolls with the pour */
@property --sdc-wl { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.sdc-water { --sdc-wl: 0%; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sdc-tile.is-live .sdc-water, .sdc-bento:not(.is-armed) .sdc-water { --sdc-wl: 33%; transition: --sdc-wl 2.6s cubic-bezier(.33, .1, .25, 1) 1.1s; }
.sdc-water__stream { position: absolute; inset-block-start: 0; inset-block-end: calc(var(--sdc-wl) - 6px); inset-inline-end: 22%; inline-size: 16px; border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(180deg, rgba(230, 248, 255, .95) 0 6px, rgba(61, 184, 255, .85) 6px 18px, rgba(140, 220, 255, .9) 18px 26px);
  background-size: 100% 52px; box-shadow: 0 0 14px rgba(61, 184, 255, .7), 0 0 30px rgba(61, 184, 255, .35);
  animation: sdc-pour .5s linear infinite, sdc-stream-w 1.3s ease-in-out infinite; transform-origin: top; }
.sdc-bento.is-armed .sdc-water__stream { transform: scaleY(0); }
.sdc-tile.is-live .sdc-water__stream { transform: none; transition: transform .9s cubic-bezier(.55, 0, .9, .45) .5s; }   /* falls like water: accelerating */
@keyframes sdc-pour { to { background-position-y: 52px; } }
@keyframes sdc-stream-w { 0%, 100% { inline-size: 16px; } 50% { inline-size: 13px; } }
.sdc-water__splash { position: absolute; inset-block-end: calc(var(--sdc-wl) - 8px); inset-inline-end: calc(22% - 22px); inline-size: 60px; block-size: 16px; border-radius: 50%;
  border: 2px solid rgba(220, 245, 255, .8); box-shadow: 0 0 12px rgba(61, 184, 255, .8); animation: sdc-splash 1s ease-out infinite; opacity: 0; }
.sdc-bento.is-armed .sdc-tile:not(.is-live) .sdc-water__splash { animation: none; }
.sdc-tile.is-live .sdc-water__splash { animation-delay: 1.4s; }
@keyframes sdc-splash { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
.sdc-water__body { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--sdc-wl); overflow: visible;
  background: linear-gradient(180deg, rgba(61, 184, 255, .55), rgba(24, 80, 160, .85)); box-shadow: inset 0 10px 24px -12px rgba(255, 255, 255, .5); }
.sdc-water__wave { position: absolute; inset-inline-start: 0; inset-block-end: calc(100% - 1px); inline-size: 200%; block-size: 16px; }
.sdc-water__wave--back path { fill: rgba(61, 184, 255, .4); } .sdc-water__wave--front path { fill: rgba(61, 184, 255, .58); }
.sdc-water__wave--back { animation: sdc-wave 3.2s linear infinite, sdc-wave-h 1.1s ease-in-out infinite; }
.sdc-water__wave--front { animation: sdc-wave 2.1s linear infinite reverse, sdc-wave-h 0.9s ease-in-out infinite; }
@keyframes sdc-wave { to { transform: translateX(-50%); } }
@keyframes sdc-wave-h { 0%, 100% { block-size: 12px; } 50% { block-size: 20px; } }   /* the pour keeps the surface rolling */
[dir="rtl"] .sdc-water__wave { inset-inline-start: auto; inset-inline-end: 0; }
[dir="rtl"] .sdc-water__wave--back { animation-direction: reverse, normal; } [dir="rtl"] .sdc-water__wave--front { animation-direction: normal, normal; }
.sdc-water__bubble { position: absolute; inset-inline-start: var(--x); inset-block-end: 0; inline-size: 5px; block-size: 5px; border-radius: 50%; border: 1px solid rgba(230, 248, 255, .7); opacity: 0;
  animation: sdc-bubble 2.6s ease-in infinite; animation-delay: var(--d); }
@keyframes sdc-bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-46px); opacity: 0; } }
.sdc-tile--water .sdc-tile__label, .sdc-tile--water .sdc-tile__num { position: relative; z-index: 1; }
/* heat tile: 70 with a drawn degree ring, a big glowing sun, a shimmer of heat */
.sdc-tile--heat { background: radial-gradient(90% 120% at 85% 50%, rgba(255, 138, 31, .28), rgba(11, 31, 69, .85) 60%); }
.sdc-tile--heat .sdc-tile__num { gap: 0; }
.sdc-deg { display: inline-block; align-self: flex-start; inline-size: .2em; block-size: .2em; margin-block-start: .06em; margin-inline: .05em .02em; border: .05em solid currentColor; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 181, 71, .6); }
.sdc-tile--heat .sdc-tile__num { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); }
.sdc-tile--heat .sdc-tile__num small { color: #ffb547; text-shadow: 0 0 12px rgba(255, 181, 71, .6); }
.sdc-bigsun { position: absolute; inset-block: -18%; inset-inline-end: -6%; block-size: 136%; aspect-ratio: 1; z-index: -1; overflow: visible; }
.sdc-bigsun__halo { animation: sdc-halo 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sdc-bigsun__rays path { fill: #ffb547; }
.sdc-bigsun__rays { transform-box: view-box; transform-origin: 100px 100px; animation: sdc-sun 30s linear infinite; filter: drop-shadow(0 0 8px rgba(255, 181, 71, .9)); }
.sdc-bigsun__core { filter: drop-shadow(0 0 18px rgba(255, 196, 80, .95)) drop-shadow(0 0 40px rgba(255, 138, 31, .7)); animation: sdc-core 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sdc-halo { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes sdc-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.sdc-heat { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 200, 120, .06) 7px 9px); animation: sdc-shimmer 2.2s ease-in-out infinite; }
@keyframes sdc-shimmer { 0%, 100% { transform: translateY(0) skewX(0deg); } 50% { transform: translateY(-4px) skewX(-2deg); } }
[dir="rtl"] .sdc-bigsun { inset-inline-end: -6%; }
@media (max-width: 1023px) { .sdc-bento .sdc-tile--water, .sdc-bento .sdc-tile--heat { grid-column: 1 / -1; grid-row: auto; } }
@media (prefers-reduced-motion: reduce) {
  .sdc-tile { animation: none !important; clip-path: none !important; }
  .sdc-water__stream, .sdc-water__splash, .sdc-water__wave, .sdc-water__bubble, .sdc-bigsun__halo, .sdc-bigsun__rays, .sdc-bigsun__core, .sdc-heat, .sdc-tile__pulse, .sdc-tile__line { animation: none !important; }
  .sdc-water { --sdc-wl: 33%; }
}

/* the bento is built from Divi modules: Group .sdc-bento › Heading .sdc-bento__title + Group .sdc-bento__grid › Group .sdc-tile
   (Text .sdc-tile__chip / __label / __num / __note + Code .sdc-tile__art with the drawing). Wrappers step aside for the layout. */
.sdc-bento.et_pb_group, .sdc-bento .sdc-tile.et_pb_group { display: block !important; }
.sdc-bento .sdc-bento__grid.et_pb_group { display: grid !important; }
.sdc-bento .sdc-tile--mw.et_pb_group { display: flex !important; }
.sdc-bento .et_pb_module { margin: 0 !important; }
.sdc-bento > .sdc-bento__title.et_pb_module { margin-block-end: var(--sdc-space-5) !important; }
.sdc-bento__title h2 { margin: 0; }
.sdc-bento .sdc-tile__num.et_pb_module { margin-block-start: .45rem !important; display: block; }
.sdc-bento .sdc-tile__note.et_pb_module { margin-block-start: .6rem !important; }
.sdc-bento .sdc-tile__chip.et_pb_module { position: absolute; }
.sdc-bento .sdc-tile__plot.et_pb_module { margin-block-start: auto !important; }   /* the chart sits at the bottom of the big tile */
.sdc-tile .et_pb_text p { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-shadow: inherit; }
.sdc-tile__num.et_pb_module p { display: flex; align-items: baseline; gap: .2em; justify-content: flex-start; direction: ltr; }
[dir="rtl"] .sdc-tile__num.et_pb_module p { justify-content: flex-end; }
.sdc-tile--heat .sdc-tile__num.et_pb_module p { gap: 0; }
.sdc-tile__art:not(.sdc-tile__plot), .sdc-tile__art .et_pb_code_inner { position: static; }   /* drawings position on the tile */
.sdc-tile__art .et_pb_code_inner { display: contents; }
.sdc-bento__grid > .sdc-tile:nth-child(2) { --i: 1; } .sdc-bento__grid > .sdc-tile:nth-child(3) { --i: 2; } .sdc-bento__grid > .sdc-tile:nth-child(4) { --i: 3; }
.sdc-bento__grid > .sdc-tile:nth-child(5) { --i: 4; } .sdc-bento__grid > .sdc-tile:nth-child(6) { --i: 5; } .sdc-bento__grid > .sdc-tile:nth-child(7) { --i: 6; }
.sdc-tile__bars span:nth-child(1) { --h: 28; --d: 0; } .sdc-tile__bars span:nth-child(2) { --h: 36; --d: 1; }
.sdc-tile__bars span:nth-child(3) { --h: 32; --d: 2; } .sdc-tile__bars span:nth-child(4) { --h: 48; --d: 3; }
.sdc-tile__bars span:nth-child(5) { --h: 44; --d: 4; } .sdc-tile__bars span:nth-child(6) { --h: 60; --d: 5; }
.sdc-tile__bars span:nth-child(7) { --h: 56; --d: 6; } .sdc-tile__bars span:nth-child(8) { --h: 74; --d: 7; }
.sdc-tile__bars span:nth-child(9) { --h: 88; --d: 8; } .sdc-tile__bars span:nth-child(10) { --h: 100; --d: 9; }
.sdc-flake:nth-of-type(1) { --d: 0s; } .sdc-flake:nth-of-type(2) { --d: 0.6s; } .sdc-flake:nth-of-type(3) { --d: 1.2s; } .sdc-flake:nth-of-type(4) { --d: 0.3s; } .sdc-flake:nth-of-type(5) { --d: 0.9s; } 
.sdc-water__bubble:nth-child(1) { --x: 18%; --d: 0s; } .sdc-water__bubble:nth-child(2) { --x: 34%; --d: 1.1s; } .sdc-water__bubble:nth-child(3) { --x: 52%; --d: 0.5s; } .sdc-water__bubble:nth-child(4) { --x: 66%; --d: 1.6s; } .sdc-water__bubble:nth-child(5) { --x: 80%; --d: 0.8s; } 

/* -------------------------------------------------------------- 61. FEATURED PROJECTS (home) — tighter corners, pointer effects, dotted wave
   Scoped to #featured-projects so the projects archive keeps its own cards. sdc-motion.js "projects" sets the pointer variables. */
#featured-projects { position: relative; overflow: hidden;
  background: url(img/dot-wave.svg) no-repeat right -40px bottom -30px / min(640px, 55vw) auto, var(--sdc-white) !important; }   /* light grey dotted wave, bottom-right corner */
/* bento mosaic: the newest project is the big tile on the start side (left in EN, right in AR — the grid follows the page direction) */
.sdc-pgrid.et_pb_column { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(200px, 19vw, 280px)); gap: 14px; inline-size: 100% !important; }
.sdc-pgrid > .sdc-project-card { aspect-ratio: auto !important; block-size: 100%; margin: 0 !important; inline-size: auto !important; }
.sdc-pgrid > .sdc-project-card:first-child { grid-column: span 2; grid-row: span 2; }
.sdc-pgrid > .sdc-project-card:nth-child(n+6) { display: none !important; }   /* the mosaic holds five */
.sdc-pgrid > .sdc-project-card:first-child h3, .sdc-pgrid > .sdc-project-card:first-child .et_pb_module_header { font-size: var(--sdc-fs-2xl) !important; }
.sdc-pgrid > .sdc-project-card:not(:first-child) .sdc-project-card__body { padding: var(--sdc-space-4) !important; }
.sdc-pgrid > .sdc-project-card:not(:first-child) h3, .sdc-pgrid > .sdc-project-card:not(:first-child) .et_pb_module_header { font-size: var(--sdc-fs-md) !important; }
@media (max-width: 980px) {   /* tablet: the big tile across the top, the four below in pairs */
  .sdc-pgrid.et_pb_column { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(260px, 50vw, 380px) repeat(2, 210px); }
  .sdc-pgrid > .sdc-project-card:first-child { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 560px) {   /* phone: one per row */
  .sdc-pgrid.et_pb_column { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
  .sdc-pgrid > .sdc-project-card { block-size: 220px; }
  .sdc-pgrid > .sdc-project-card:first-child { grid-column: auto; grid-row: auto; block-size: 300px; } }
#featured-projects .sdc-project-card { border-radius: 10px; isolation: isolate; transform-style: preserve-3d; will-change: transform;
  transform: perspective(1000px) rotateX(var(--sdc-ry, 0deg)) rotateY(var(--sdc-rx, 0deg)) translateZ(0);
  transition: transform .5s var(--sdc-ease-out), box-shadow .5s var(--sdc-ease-out), filter .4s ease; }
#featured-projects .sdc-project-card.is-hover { transition: transform .12s linear, box-shadow .4s var(--sdc-ease-out), filter .4s ease;
  box-shadow: 0 24px 50px -18px rgba(5, 15, 36, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
/* the photo drifts against the pointer (depth) */
#featured-projects .sdc-project-card img { transform: scale(1.1) translate(calc(var(--sdc-px, 0) * -14px), calc(var(--sdc-py, 0) * -10px)); transition: transform .9s var(--sdc-ease-out); }
#featured-projects .sdc-project-card.is-hover img { transform: scale(1.14) translate(calc(var(--sdc-px, 0) * -14px), calc(var(--sdc-py, 0) * -10px)); transition: transform .25s linear; }
/* spotlight that follows the pointer */
#featured-projects .sdc-project-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--sdc-mx, 50%) var(--sdc-my, 50%), rgba(255, 255, 255, .2), rgba(120, 200, 255, .08) 35%, transparent 60%); mix-blend-mode: screen; }
#featured-projects .sdc-project-card.is-hover::after { opacity: 1; }
/* the copy lifts a little on hover */
#featured-projects .sdc-project-card__body { transition: translate .5s var(--sdc-ease-out); }
#featured-projects .sdc-project-card__meta b { color: #2fb2f5 !important; }   /* kWp figure: the same sky blue */
#featured-projects .sdc-project-card.is-hover .sdc-project-card__body { translate: 0 -6px; }
/* "view" chip: appears in the corner and leans toward the pointer (magnetic) */
.sdc-pc-go { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 2; inline-size: 46px; block-size: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #2fb2f5; color: var(--sdc-navy); pointer-events: none; opacity: 0; scale: .4; rotate: -45deg;   /* sky blue, as in the work steps */
  translate: calc(var(--sdc-px, 0) * 8px) calc(var(--sdc-py, 0) * 8px);
  transition: opacity .3s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1), rotate .45s var(--sdc-ease-out), translate .2s linear; }
.sdc-pc-go svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .sdc-pc-go svg { transform: scaleX(-1); }
#featured-projects .sdc-project-card.is-hover .sdc-pc-go { opacity: 1; scale: 1; rotate: 0deg; }
/* the others step back while one is in focus */
#featured-projects .sdc-pgrid:has(.is-hover) .sdc-project-card:not(.is-hover) { filter: saturate(.55) brightness(.78); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  #featured-projects .sdc-project-card, #featured-projects .sdc-project-card img { transform: none !important; }
  #featured-projects .sdc-project-card::after, .sdc-pc-go { display: none; }
}

/* -------------------------------------------------------------- 62. HOW WE WORK — SNAKE PATH (home)
   A dashed road (svg, 1200 × 220 user units = 220px tall, stretched to the width) winds through five stops at 10/30/50/70/90 %.
   High stops: text above the icon; low stops: text below. sdc-motion.js initSnake moves the dot and lights the steps. */
.sdc-snake { --top: 150px; --sky: #2fb2f5; --sky-glow: rgba(47, 178, 245, .55);   /* sky blue, like the numbers section's neon */
  position: relative; block-size: calc(var(--top) + 220px + 150px); margin-block-start: var(--sdc-space-5); }
.sdc-snake__svg { position: absolute; inset-inline: 0; inset-block-start: var(--top); inline-size: 100%; block-size: 220px; overflow: visible; }
[dir="rtl"] .sdc-snake__svg { transform: scaleX(-1); }   /* the road starts on the right in Arabic */
.sdc-snake__base { fill: none; stroke: #c3cbd6; stroke-width: 2.5; stroke-dasharray: 9 9; stroke-linecap: round; }
.sdc-snake__draw { fill: none; stroke: var(--sky); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--sky-glow)); }
.sdc-snake__dot, .sdc-snake__pulse { position: absolute; z-index: 2; inline-size: 18px; block-size: 18px; margin: -9px 0 0; margin-inline-start: -9px; border-radius: 50%; pointer-events: none;
  inset-inline-start: var(--dx, 0%); inset-block-start: calc(var(--top) + var(--dy, 40px)); }
.sdc-snake__dot { background: #fff; border: 4px solid var(--sky); box-shadow: 0 0 0 6px rgba(47, 178, 245, .18), 0 0 18px var(--sky-glow); }
.sdc-snake__pulse { inline-size: 10px; block-size: 10px; margin: -5px 0 0; margin-inline-start: -5px; background: var(--sky); box-shadow: 0 0 12px var(--sky); opacity: 0; }
.sdc-snake.is-done .sdc-snake__pulse { opacity: 1; }
.sdc-snake__steps { list-style: none; margin: 0 !important; padding: 0 !important; }
.sdc-snake__step { position: absolute; inline-size: 19%; inset-inline-start: calc(var(--x) - 9.5%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sdc-space-3); padding: 0 !important; }
.sdc-snake__step::before { content: none !important; }
.sdc-snake__step.is-high { inset-block-end: calc(100% - var(--top) - 40px - 36px); flex-direction: column-reverse; }   /* text above, icon on the road */
.sdc-snake__step:not(.is-high) { inset-block-start: calc(var(--top) + 180px - 36px); }                              /* icon on the road, text below */
.sdc-snake__icon { position: relative; flex: none; inline-size: 72px; block-size: 72px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: var(--sdc-white); border: 2px solid var(--sdc-line); color: var(--sdc-blue);
  transition: border-color .5s ease, box-shadow .5s ease, background .5s ease, color .5s ease, scale .5s cubic-bezier(.34, 1.56, .64, 1); }
.sdc-snake__icon svg { position: absolute; inline-size: 32px; block-size: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sdc-snake__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--sdc-ease-out) .15s; }
.sdc-snake__step.is-on .sdc-snake__icon { border-color: var(--sky); background: var(--sdc-navy); color: var(--sky); scale: 1.06;
  box-shadow: 0 0 0 7px rgba(47, 178, 245, .14), 0 10px 26px -8px rgba(5, 15, 36, .45); }
.sdc-snake__step.is-on .sdc-snake__icon svg * { stroke-dashoffset: 0; }
.sdc-snake__num { font: 600 var(--sdc-fs-xs)/1 var(--sdc-font-mono); color: #1690d4; letter-spacing: .12em; }
.sdc-snake__text h3 { font-size: var(--sdc-fs-md); margin: var(--sdc-space-1) 0 var(--sdc-space-1); padding: 0; }
.sdc-snake__text p { font-size: var(--sdc-fs-sm); color: var(--sdc-text-muted); margin: 0; padding: 0; line-height: 1.5; }
.sdc-snake__text { opacity: .55; translate: 0 6px; transition: opacity .6s ease, translate .6s var(--sdc-ease-out); }
.sdc-snake__step.is-on .sdc-snake__text { opacity: 1; translate: 0 0; }
@media (max-width: 980px) {   /* phones / tablets: a vertical line, steps stacked */
  .sdc-snake { block-size: auto; }
  .sdc-snake__svg, .sdc-snake__dot, .sdc-snake__pulse { display: none; }
  .sdc-snake__steps { position: relative; display: grid; gap: var(--sdc-space-6); }
  .sdc-snake__steps::before { content: ""; position: absolute; inset-block: 36px; inset-inline-start: 35px; inline-size: 2px; background: repeating-linear-gradient(#c3cbd6 0 9px, transparent 9px 18px); }
  .sdc-snake__step, .sdc-snake__step.is-high, .sdc-snake__step:not(.is-high) { position: relative; inset: auto; inline-size: auto; flex-direction: row; align-items: flex-start; text-align: start; gap: var(--sdc-space-4); }
  .sdc-snake__text { padding-block-start: var(--sdc-space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .sdc-snake__icon svg *, .sdc-snake__text, .sdc-snake__icon { transition: none !important; }
}
/* the snake is built from Divi modules: Group .sdc-snake › Code .sdc-snake__road + Group .sdc-snake__steps › Group .sdc-snake__step
   (Code .sdc-snake__icon + Group .sdc-snake__text). The wrappers step aside so the road, dot and steps position on .sdc-snake. */
.sdc-snake.et_pb_group { display: block !important; }
.sdc-snake .et_pb_module { margin: 0 !important; }
.sdc-snake .sdc-snake__road, .sdc-snake .sdc-snake__road .et_pb_code_inner, .sdc-snake .sdc-snake__steps { position: static; }
.sdc-snake .sdc-snake__steps.et_pb_group, .sdc-snake .sdc-snake__text.et_pb_group { display: block !important; }
.sdc-snake .sdc-snake__step.et_pb_group { display: flex !important; position: absolute; }
.sdc-snake .sdc-snake__step.is-high { flex-direction: column-reverse; }
.sdc-snake .sdc-snake__step:nth-child(1) { --x: 10%; } .sdc-snake .sdc-snake__step:nth-child(2) { --x: 30%; }
.sdc-snake .sdc-snake__step:nth-child(3) { --x: 50%; } .sdc-snake .sdc-snake__step:nth-child(4) { --x: 70%; }
.sdc-snake .sdc-snake__step:nth-child(5) { --x: 90%; }
.sdc-snake__icon .et_pb_code_inner { display: contents; }
.sdc-snake__num.et_pb_module p { display: inline; font: inherit; color: inherit; letter-spacing: inherit; }
.sdc-snake__num.et_pb_module .et_pb_text_inner::before { content: "\200b"; font: 400 1rem/1.7 var(--sdc-font-body); letter-spacing: 0; }   /* the line box the old inline number sat in */
@media (max-width: 980px) {
  .sdc-snake .sdc-snake__steps { position: relative; }
  .sdc-snake .sdc-snake__steps.et_pb_group { display: grid !important; }
  .sdc-snake .sdc-snake__step.et_pb_group, .sdc-snake .sdc-snake__step.is-high { position: relative; flex-direction: row; }
}

/* partner logos are square JPGs with white margins: give them room (the white blends into the bar) */
#partners .sdc-marquee__item { block-size: 104px; min-inline-size: 0; padding: 0 !important; border: 0; }   /* no placeholder frame */
#partners .sdc-marquee__item img { max-block-size: none; block-size: 100px; inline-size: 100px; object-fit: contain; }

/* -------------------------------------------------------------- 63. PRODUCTS on phones / tablets (< 1024px, or no WebGL / reduced motion)
   No 3D stage there: each product becomes a card (still render of its model + name + features as compact chips),
   the cards swipe sideways with scroll-snap and the next one peeks in. */
.sdc-prod__img, .sdc-prod__eyebrow { display: none; }
.sdc-prod:not(.is-live) { flex-direction: column; align-items: stretch; }
.sdc-prod:not(.is-live) .sdc-prod__eyebrow { display: flex; padding-inline: var(--sdc-gutter); margin-block-end: var(--sdc-space-4); }
.sdc-prod:not(.is-live) { padding-inline: 0; }
.sdc-prod:not(.is-live) .sdc-prod__copy { max-inline-size: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px var(--sdc-gutter) 18px; scroll-padding-inline: var(--sdc-gutter); scrollbar-width: none; }
.sdc-prod:not(.is-live) .sdc-prod__copy::-webkit-scrollbar { display: none; }
.sdc-prod:not(.is-live) .sdc-prod__group { flex: 0 0 min(86%, 420px); scroll-snap-align: start; margin: 0 !important; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #0d1626, #070b12 70%); border: 1px solid rgba(255, 255, 255, .08); padding: 0 0 var(--sdc-space-5); }
.sdc-prod:not(.is-live) .sdc-prod__img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 720 / 560; object-fit: contain; padding: var(--sdc-space-4) var(--sdc-space-4) 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 60%, transparent); }
.sdc-prod:not(.is-live) .sdc-prod__head { padding: var(--sdc-space-3) var(--sdc-space-5) 0; }
.sdc-prod:not(.is-live) .sdc-prod__head .sdc-eyebrow { display: none; }
.sdc-prod:not(.is-live) h2 { font-size: var(--sdc-fs-xl); margin-block-end: var(--sdc-space-2); }
.sdc-prod:not(.is-live) .sdc-prod__sub { margin: 0 0 var(--sdc-space-2); font-size: var(--sdc-fs-sm); }
.sdc-prod:not(.is-live) .sdc-prod__feats { padding: var(--sdc-space-2) var(--sdc-space-5) 0 !important; gap: var(--sdc-space-2); }
.sdc-prod:not(.is-live) .sdc-prod__feat { grid-template-columns: 30px 1fr; column-gap: var(--sdc-space-3); align-items: center; }
.sdc-prod:not(.is-live) .sdc-prod__mark { inline-size: 30px; block-size: 30px; grid-row: auto; }
.sdc-prod:not(.is-live) .sdc-prod__mark svg { inline-size: 16px; block-size: 16px; }
.sdc-prod:not(.is-live) .sdc-prod__feat h3 { font-size: var(--sdc-fs-sm); margin: 0; }
.sdc-prod:not(.is-live) .sdc-prod__feat p { display: none; }   /* the descriptions stay on desktop; on a phone the card shows the headline of each feature */
/* the stage is built from Divi modules: Group .sdc-prod › Text eyebrow + Group .sdc-prod__copy › Group .sdc-prod__group--<key>
   (Code .sdc-prod__art + Group .sdc-prod__head + Group .sdc-prod__feats › Group .sdc-prod__feat: Code .sdc-prod__mark + Heading + Text).
   The wrappers take the layout of the elements they replace. */
.sdc-prod.et_pb_group { display: flex !important; }
.sdc-prod .sdc-prod__group.et_pb_group, .sdc-prod .sdc-prod__head.et_pb_group { display: block !important; }
.sdc-prod .sdc-prod__feats.et_pb_group, .sdc-prod .sdc-prod__feat.et_pb_group { display: grid !important; }
.sdc-prod.is-live .sdc-prod__copy.et_pb_group { display: grid !important; }
.sdc-prod:not(.is-live) .sdc-prod__copy.et_pb_group { display: flex !important; }
.sdc-prod .et_pb_module:not(.sdc-prod__group):not(.sdc-prod__sub):not(.sdc-eyebrow):not(.sdc-prod__copy) { margin-block: 0 !important; margin-inline: 0; }
.sdc-prod .sdc-prod__group.et_pb_module { margin: 0 !important; }
.sdc-prod .sdc-eyebrow.et_pb_module { margin: 0 0 var(--sdc-space-4) !important; }
.sdc-prod .sdc-prod__sub.et_pb_module { margin: calc(-1 * var(--sdc-space-5)) 0 var(--sdc-space-5) !important; }
.sdc-prod.is-live .sdc-prod__sub.et_pb_module { margin-block: calc(-1 * var(--sdc-space-4)) var(--sdc-space-4) !important; }
.sdc-prod:not(.is-live) .sdc-prod__sub.et_pb_module { margin: 0 0 var(--sdc-space-2) !important; }
.sdc-prod .sdc-prod__eyebrow.et_pb_module { display: none; }   /* the stage eyebrow is for the phone cards only */
.sdc-prod:not(.is-live) .sdc-prod__eyebrow.et_pb_module { display: block; padding-inline: var(--sdc-gutter); }
.sdc-prod .sdc-prod__eyebrow.et_pb_module p { display: flex; }
.sdc-prod .sdc-prod__eyebrow.et_pb_module .et_pb_text_inner::before { content: none; }
.sdc-prod__mark .et_pb_code_inner { display: contents; }
.sdc-prod__art .et_pb_code_inner { position: static; }

/* the story glyph (sun → drop → wheat) keeps its badge size — `.sdc-story__visual svg` would otherwise stretch it over the whole picture */
.sdc-story__visual svg.sdc-story__glyph { inline-size: 92px; block-size: 92px; }
@media (max-width: 980px) { .sdc-story__visual svg.sdc-story__glyph { inline-size: 72px; block-size: 72px; } }
/* phones: the 70°C tile is narrower — the sun sits further out so the label and number stay clear */
@media (max-width: 767px) { .sdc-bigsun, [dir="rtl"] .sdc-bigsun { inset-block: 6%; block-size: 88%; inset-inline-end: -22%; } }

/* phones with the light 3D hero (scene-farm LITE): room for the island under the copy, and the dark veil stops above it */
@media (max-width: 767px) {
  .sdc-hero.sdc-hero--iso:has(#sdc-3d-hero.is-live) { padding-block-end: 400px !important; }
  .sdc-hero.sdc-hero--iso:has(#sdc-3d-hero.is-live)::after { background: linear-gradient(to bottom, rgba(5, 15, 36, .9) 0%, rgba(5, 15, 36, .78) calc(100% - 470px), rgba(5, 15, 36, 0) calc(100% - 360px)); }
}

/* -------------------------------------------------------------- 64. HEADINGS AS DIVI MODULES (home)
   Section heading = Group .sdc-head › Text .sdc-eyebrow + Heading + Text .sdc-lead; hero h1, CTA and story steps likewise.
   Font, size, colour and alignment come from each module's Design settings (same values as the classes above);
   these rules only keep the spacing / line / widths the single text module had. */
.sdc-eyebrow.et_pb_module { display: block; }   /* the module stays a block; its paragraph carries the eyebrow look, as before */
.sdc-eyebrow.et_pb_module::before { content: none; }
.sdc-eyebrow.et_pb_module p { display: inline-flex; align-items: center; gap: .6em; margin: 0; }
.sdc-eyebrow.et_pb_module p::before { content: ""; inline-size: 28px; block-size: 2px; background: var(--sdc-green); box-shadow: 0 0 10px var(--sdc-green-glow); }
.sdc-head.et_pb_group { display: block !important; }   /* Divi groups are flex + gap by default; the heading keeps plain block flow */
.sdc-head > .et_pb_module { margin: 0 !important; }
.sdc-head > .sdc-eyebrow.et_pb_module { margin-block-end: var(--sdc-space-4) !important; }
:is(.sdc-eyebrow, .sdc-lead).et_pb_module :is(.et_pb_text_inner, p) { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; }
.sdc-story__step.et_pb_group { display: flex !important; flex-direction: column; }
.sdc-story__step > .et_pb_module { margin: 0 !important; }
.sdc-story__step .sdc-story__num { margin-block-end: var(--sdc-space-3); }
/* the old single text module gave the eyebrow line a body-size line box (16px / 1.7) — keep that height */
.sdc-eyebrow.et_pb_module .et_pb_text_inner::before { content: "\200b"; font: 400 1rem/1.7 var(--sdc-font-body); letter-spacing: 0; text-transform: none; }
.sdc-hero .sdc-lead.et_pb_module { max-inline-size: min(52ch, 640px); }
.sdc-cta .sdc-lead.et_pb_module { inline-size: 100%; }
/* page heroes (inner pages): breadcrumb · eyebrow · title · lead are separate modules now — no default module gaps */
.sdc-page-hero > .et_pb_row:not(.sdc-hero__bg-row) .et_pb_module { margin-block-end: 0 !important; }
.sdc-page-hero > .et_pb_row:not(.sdc-hero__bg-row) .sdc-eyebrow.et_pb_module { margin-block-end: var(--sdc-space-4) !important; }
/* modules that used to share one text module (inner pages, templates, footer): Group .sdc-flow keeps the old block flow */
.sdc-flow.et_pb_group { display: block !important; }
.sdc-flow > .et_pb_module { margin: 0 !important; }
.sdc-flow > .sdc-eyebrow.et_pb_module { margin-block-end: var(--sdc-space-4) !important; }
.sdc-flow > .sdc-h3.et_pb_module { margin-block-end: var(--sdc-space-5) !important; }
/* about: the small mono title — line + text on the module, type from the module settings */
.sdc-flow > .sdc-h1-small.et_pb_module { margin-block-end: var(--sdc-space-6) !important; }
.sdc-h1-small.et_pb_module h1 { margin: 0; }
.sdc-flow > .sdc-h3.et_pb_module :is(h1, h2, h3) { margin-block-end: 0; }   /* the module carries the gap */
/* the projects heading's side column lost an empty init module (scripts now start from classes): keep the gap it made on tablets / phones */
@media (max-width: 980px) { #featured-projects .sdc-head-action.et_pb_column:not(:has(> .et_pb_code)) { padding-block-start: var(--sdc-space-4); } }
p.sdc-map__legend:last-child { margin-block-end: var(--sdc-space-4); }   /* it used to sit before the (now removed) init script */
/* partner strip from Divi modules: Group .sdc-trust__inner › Text .sdc-trust__label + Group .sdc-marquee › Group .sdc-marquee__track › Image .sdc-marquee__item */
.sdc-trust__inner.et_pb_group { display: flex !important; }
.sdc-trust .sdc-marquee.et_pb_group { display: block !important; }
.sdc-trust .sdc-marquee__track.et_pb_group { display: flex !important; }
.sdc-trust .sdc-marquee__item.et_pb_module { display: grid !important; }
.sdc-trust .et_pb_module { margin: 0 !important; }
.sdc-trust__label.et_pb_module p { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.sdc-marquee__item .et_pb_image_wrap { display: block; line-height: 0; }
.sdc-trust .sdc-trust__label.et_pb_module { margin-block-end: var(--sdc-space-4) !important; }   /* the old label paragraph kept its bottom margin */

/* -------------------------------------------------------------- 65. PERFORMANCE
   Sections off screen: endless CSS animations pause (sdc-motion.js initOffscreen toggles the class). */
.sdc-offscreen, .sdc-offscreen *, .sdc-offscreen *::before, .sdc-offscreen *::after { animation-play-state: paused !important; }
/* hidden performance meter (?sdc-perf in the URL) */
.sdc-perf { position: fixed; inset-block-end: 8px; inset-inline-start: 8px; z-index: 100000; margin: 0; padding: 8px 10px; border-radius: 8px;
  background: rgba(5, 15, 36, .88); color: #9fe0ff; font: 11px/1.45 var(--sdc-font-mono); white-space: pre; pointer-events: none; direction: ltr; text-align: start; }