@datrix-team-product/website-ds 0.1.1 → 0.2.1

package/dist/bricks-preview.css

@@ -0,0 +1,2344 @@
+/* bricks-preview.css — PREVIEW stylesheet for markup written with REAL Bricks Global Class names.
+ * Generated by scripts/build/bricks-preview.ts. Sources: data/bricks/global-classes.json (real
+ * exports) + the site’s REAL ACSS (packages/tokens/src/acss-live.json snapshot of automatic.css,
+ * automatic-bricks.css and the inline Bricks global variables captured from the live pages).
+ * Sections: :root variables (live values, site overrides applied) → ACSS base (html/body/
+ * typography, verbatim) → ACSS utilities (bg--*, btn--*, verbatim) → Global Class rules.
+ * Variables with no known value are UNDEFINED (never invented). DO NOT HAND-EDIT.
+ */
+
+:root {
+  --T1: clamp(5rem, 3.857rem + 3.571vw, 9rem);
+  --T2: clamp(4.2rem, 3.571rem + 1.964vw, 6.4rem);
+  --accent: #d636ff;
+  --black: #0f0f0f;
+  --black-trans-30: rgba(0, 0, 0, 0.3);
+  --container-gap: var(--space-48);
+  --content-gap: var(--space-m);
+  --fr-card-gap: var(--card-gap, var(--space-s));
+  --fr-content-gap: var(--space-m);
+  --fr-hero-padding: var(--section-space-xl);
+  --grid-1: repeat(1, minmax(0, 1fr));
+  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
+  --grid-2: repeat(2, minmax(0, 1fr));
+  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
+  --grid-4: repeat(4, minmax(0, 1fr));
+  --grid-gap: var(--space-l);
+  --gutter: clamp(2rem, calc(4.347826087vw + 0.4347826087rem), 6rem);
+  --h1: clamp(4rem, calc(0.8695652174vw + 3.6869565217rem), 4.8rem);
+  --h2: clamp(2.8rem, calc(0.8695652174vw + 2.4869565217rem), 3.6rem);
+  --h3: clamp(2.2rem, calc(0.652173913vw + 1.9652173913rem), 2.8rem);
+  --h4: clamp(1.8rem, calc(0.652173913vw + 1.5652173913rem), 2.4rem);
+  --neutral-dark: #3d3d3d;
+  --neutral-light: #d6d6d6;
+  --neutral-semi-dark: #636363;
+  --neutral-semi-light: #c7c7c7;
+  --primary: #053fbb;
+  --primary-trans-40: rgba(5, 63, 187, 0.4);
+  --primary-ultra-dark: #000f5c;
+  --pure-white: #FFFFFF;
+  --radius: 2rem;
+  --radius-circle: 50vw;
+  --radius-xs: 0.8888888889rem;
+  --secondary: #00b3ff;
+  --section-space-m: clamp(4.8rem, calc(4.5652173913vw + 3.1565217391rem), 9rem);
+  --section-space-xl: clamp(8.5290672rem, calc(12.7401443478vw + 3.9426152348rem), 20.25rem);
+  --space-48: clamp(2.8rem, calc(2.09vw + 2.15rem), 4.8rem);
+  --space-60: clamp(3.2rem, calc(3.65vw + 1.83rem), 6.0rem);
+  --space-80: clamp(4.0rem, calc(5.22vw + 2.05rem), 8.0rem);
+  --space-l: clamp(1.6rem, calc(0.52vw + 1.45rem), 2.0rem);
+  --space-m: clamp(1.2rem, calc(0.52vw + 1.05rem), 1.6rem);
+  --space-s: clamp(0.8rem, 0.8rem, 0.8rem);
+  --space-xl: clamp(1.8rem, calc(0.78vw + 1.58rem), 2.4rem);
+  --space-xs: clamp(0.4rem, 0.4rem, 0.4rem);
+  --space-xxl: clamp(2.4rem, calc(1.04vw + 2.11rem), 3.2rem);
+  --text-l: clamp(1.8rem, calc(0.2173913043vw + 1.7217391304rem), 2rem);
+  --text-light: var(--white);
+  --text-m: clamp(1.6rem, calc(0.2173913043vw + 1.5217391304rem), 1.8rem);
+  --text-s: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
+  --text-xl: clamp(2rem, calc(0.4347826087vw + 1.8434782609rem), 2.4rem);
+  --text-xs: clamp(1.2rem, calc(0.2173913043vw + 1.1217391304rem), 1.4rem);
+  --white: #F8F8F8;
+}
+@media (min-width: 1281px) {
+:root {
+    --gutter: 6rem;
+    --h1: 4.8rem;
+    --h2: 3.6rem;
+    --h3: 2.8rem;
+    --h4: 2.4rem;
+    --section-space-m: 9rem;
+    --section-space-xl: 20.25rem;
+    --space-l: 4.5rem;
+    --space-m: 3rem;
+    --space-s: 2rem;
+    --space-xl: 6.75rem;
+    --space-xs: 1.3333333333rem;
+    --space-xxl: 10.125rem;
+    --text-l: 2rem;
+    --text-m: 1.8rem;
+    --text-s: 1.6rem;
+    --text-xl: 2.4rem;
+    --text-xs: 1.4rem;
+}
+}
+/* ===== ACSS base (html / body / typography) — verbatim from the live stylesheet ===== */
+html {
+font-size: var(--root-font-size) !important;
+  scroll-behavior: smooth;
+}
+
+*, *::before, *::after {
+box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+  -webkit-animation-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      -webkit-animation-iteration-count: 1 !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+  }
+}
+
+body {
+  font-family: "Outfit";
+  font-weight: 300;
+}
+
+input, button, textarea, select {
+font: inherit;
+}
+
+body:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
+margin-block: 0;
+}
+/* ===== ACSS utilities (.bg--*, .btn--*) — verbatim ===== */
+.bg--primary {
+background-color: var(--primary);
+}
+
+.bg--primary-hover {
+background-color: var(--primary-hover);
+}
+
+.bg--primary-ultra-light {
+background-color: var(--primary-ultra-light);
+}
+
+.bg--primary-light {
+background-color: var(--primary-light);
+}
+
+.bg--primary-semi-light {
+background-color: var(--primary-semi-light);
+}
+
+.bg--primary-semi-dark {
+background-color: var(--primary-semi-dark);
+}
+
+.bg--primary-dark {
+background-color: var(--primary-dark);
+}
+
+.bg--primary-ultra-dark {
+background-color: var(--primary-ultra-dark);
+}
+
+.bg--primary-comp {
+background-color: var(--primary-comp);
+}
+
+.bg--primary-medium {
+background-color: var(--primary-medium);
+}
+
+.bg--primary-trans-10 {
+background-color: var(--primary-trans-10);
+}
+
+.bg--primary-trans-20 {
+background-color: var(--primary-trans-20);
+}
+
+.bg--primary-trans-30 {
+background-color: var(--primary-trans-30);
+}
+
+.bg--primary-trans-40 {
+background-color: var(--primary-trans-40);
+}
+
+.bg--primary-trans-50 {
+background-color: var(--primary-trans-50);
+}
+
+.bg--primary-trans-60 {
+background-color: var(--primary-trans-60);
+}
+
+.bg--primary-trans-70 {
+background-color: var(--primary-trans-70);
+}
+
+.bg--primary-trans-80 {
+background-color: var(--primary-trans-80);
+}
+
+.bg--primary-trans-90 {
+background-color: var(--primary-trans-90);
+}
+
+.bg--primary-light-trans-10 {
+background-color: var(--primary-light-trans-10);
+}
+
+.bg--primary-light-trans-20 {
+background-color: var(--primary-light-trans-20);
+}
+
+.bg--primary-light-trans-30 {
+background-color: var(--primary-light-trans-30);
+}
+
+.bg--primary-light-trans-40 {
+background-color: var(--primary-light-trans-40);
+}
+
+.bg--primary-light-trans-50 {
+background-color: var(--primary-light-trans-50);
+}
+
+.bg--primary-light-trans-60 {
+background-color: var(--primary-light-trans-60);
+}
+
+.bg--primary-light-trans-70 {
+background-color: var(--primary-light-trans-70);
+}
+
+.bg--primary-light-trans-80 {
+background-color: var(--primary-light-trans-80);
+}
+
+.bg--primary-light-trans-90 {
+background-color: var(--primary-light-trans-90);
+}
+
+.bg--primary-dark-trans-10 {
+background-color: var(--primary-dark-trans-10);
+}
+
+.bg--primary-dark-trans-20 {
+background-color: var(--primary-dark-trans-20);
+}
+
+.bg--primary-dark-trans-30 {
+background-color: var(--primary-dark-trans-30);
+}
+
+.bg--primary-dark-trans-40 {
+background-color: var(--primary-dark-trans-40);
+}
+
+.bg--primary-dark-trans-50 {
+background-color: var(--primary-dark-trans-50);
+}
+
+.bg--primary-dark-trans-60 {
+background-color: var(--primary-dark-trans-60);
+}
+
+.bg--primary-dark-trans-70 {
+background-color: var(--primary-dark-trans-70);
+}
+
+.bg--primary-dark-trans-80 {
+background-color: var(--primary-dark-trans-80);
+}
+
+.bg--primary-dark-trans-90 {
+background-color: var(--primary-dark-trans-90);
+}
+
+.bg--primary-ultra-dark-trans-10 {
+background-color: var(--primary-ultra-dark-trans-10);
+}
+
+.bg--primary-ultra-dark-trans-20 {
+background-color: var(--primary-ultra-dark-trans-20);
+}
+
+.bg--primary-ultra-dark-trans-30 {
+background-color: var(--primary-ultra-dark-trans-30);
+}
+
+.bg--primary-ultra-dark-trans-40 {
+background-color: var(--primary-ultra-dark-trans-40);
+}
+
+.bg--primary-ultra-dark-trans-50 {
+background-color: var(--primary-ultra-dark-trans-50);
+}
+
+.bg--primary-ultra-dark-trans-60 {
+background-color: var(--primary-ultra-dark-trans-60);
+}
+
+.bg--primary-ultra-dark-trans-70 {
+background-color: var(--primary-ultra-dark-trans-70);
+}
+
+.bg--primary-ultra-dark-trans-80 {
+background-color: var(--primary-ultra-dark-trans-80);
+}
+
+.bg--primary-ultra-dark-trans-90 {
+background-color: var(--primary-ultra-dark-trans-90);
+}
+
+.bg--secondary {
+background-color: var(--secondary);
+}
+
+.bg--secondary-hover {
+background-color: var(--secondary-hover);
+}
+
+.bg--secondary-ultra-light {
+background-color: var(--secondary-ultra-light);
+}
+
+.bg--secondary-light {
+background-color: var(--secondary-light);
+}
+
+.bg--secondary-semi-light {
+background-color: var(--secondary-semi-light);
+}
+
+.bg--secondary-semi-dark {
+background-color: var(--secondary-semi-dark);
+}
+
+.bg--secondary-dark {
+background-color: var(--secondary-dark);
+}
+
+.bg--secondary-ultra-dark {
+background-color: var(--secondary-ultra-dark);
+}
+
+.bg--secondary-comp {
+background-color: var(--secondary-comp);
+}
+
+.bg--secondary-medium {
+background-color: var(--secondary-medium);
+}
+
+.bg--secondary-trans-10 {
+background-color: var(--secondary-trans-10);
+}
+
+.bg--secondary-trans-20 {
+background-color: var(--secondary-trans-20);
+}
+
+.bg--secondary-trans-30 {
+background-color: var(--secondary-trans-30);
+}
+
+.bg--secondary-trans-40 {
+background-color: var(--secondary-trans-40);
+}
+
+.bg--secondary-trans-50 {
+background-color: var(--secondary-trans-50);
+}
+
+.bg--secondary-trans-60 {
+background-color: var(--secondary-trans-60);
+}
+
+.bg--secondary-trans-70 {
+background-color: var(--secondary-trans-70);
+}
+
+.bg--secondary-trans-80 {
+background-color: var(--secondary-trans-80);
+}
+
+.bg--secondary-trans-90 {
+background-color: var(--secondary-trans-90);
+}
+
+.bg--secondary-light-trans-10 {
+background-color: var(--secondary-light-trans-10);
+}
+
+.bg--secondary-light-trans-20 {
+background-color: var(--secondary-light-trans-20);
+}
+
+.bg--secondary-light-trans-30 {
+background-color: var(--secondary-light-trans-30);
+}
+
+.bg--secondary-light-trans-40 {
+background-color: var(--secondary-light-trans-40);
+}
+
+.bg--secondary-light-trans-50 {
+background-color: var(--secondary-light-trans-50);
+}
+
+.bg--secondary-light-trans-60 {
+background-color: var(--secondary-light-trans-60);
+}
+
+.bg--secondary-light-trans-70 {
+background-color: var(--secondary-light-trans-70);
+}
+
+.bg--secondary-light-trans-80 {
+background-color: var(--secondary-light-trans-80);
+}
+
+.bg--secondary-light-trans-90 {
+background-color: var(--secondary-light-trans-90);
+}
+
+.bg--secondary-dark-trans-10 {
+background-color: var(--secondary-dark-trans-10);
+}
+
+.bg--secondary-dark-trans-20 {
+background-color: var(--secondary-dark-trans-20);
+}
+
+.bg--secondary-dark-trans-30 {
+background-color: var(--secondary-dark-trans-30);
+}
+
+.bg--secondary-dark-trans-40 {
+background-color: var(--secondary-dark-trans-40);
+}
+
+.bg--secondary-dark-trans-50 {
+background-color: var(--secondary-dark-trans-50);
+}
+
+.bg--secondary-dark-trans-60 {
+background-color: var(--secondary-dark-trans-60);
+}
+
+.bg--secondary-dark-trans-70 {
+background-color: var(--secondary-dark-trans-70);
+}
+
+.bg--secondary-dark-trans-80 {
+background-color: var(--secondary-dark-trans-80);
+}
+
+.bg--secondary-dark-trans-90 {
+background-color: var(--secondary-dark-trans-90);
+}
+
+.bg--secondary-ultra-dark-trans-10 {
+background-color: var(--secondary-ultra-dark-trans-10);
+}
+
+.bg--secondary-ultra-dark-trans-20 {
+background-color: var(--secondary-ultra-dark-trans-20);
+}
+
+.bg--secondary-ultra-dark-trans-30 {
+background-color: var(--secondary-ultra-dark-trans-30);
+}
+
+.bg--secondary-ultra-dark-trans-40 {
+background-color: var(--secondary-ultra-dark-trans-40);
+}
+
+.bg--secondary-ultra-dark-trans-50 {
+background-color: var(--secondary-ultra-dark-trans-50);
+}
+
+.bg--secondary-ultra-dark-trans-60 {
+background-color: var(--secondary-ultra-dark-trans-60);
+}
+
+.bg--secondary-ultra-dark-trans-70 {
+background-color: var(--secondary-ultra-dark-trans-70);
+}
+
+.bg--secondary-ultra-dark-trans-80 {
+background-color: var(--secondary-ultra-dark-trans-80);
+}
+
+.bg--secondary-ultra-dark-trans-90 {
+background-color: var(--secondary-ultra-dark-trans-90);
+}
+
+.bg--accent {
+background-color: var(--accent);
+}
+
+.bg--accent-hover {
+background-color: var(--accent-hover);
+}
+
+.bg--accent-ultra-light {
+background-color: var(--accent-ultra-light);
+}
+
+.bg--accent-light {
+background-color: var(--accent-light);
+}
+
+.bg--accent-semi-light {
+background-color: var(--accent-semi-light);
+}
+
+.bg--accent-semi-dark {
+background-color: var(--accent-semi-dark);
+}
+
+.bg--accent-dark {
+background-color: var(--accent-dark);
+}
+
+.bg--accent-ultra-dark {
+background-color: var(--accent-ultra-dark);
+}
+
+.bg--accent-comp {
+background-color: var(--accent-comp);
+}
+
+.bg--accent-medium {
+background-color: var(--accent-medium);
+}
+
+.bg--neutral {
+background-color: var(--neutral);
+}
+
+.bg--neutral-hover {
+background-color: var(--neutral-hover);
+}
+
+.bg--neutral-ultra-light {
+background-color: var(--neutral-ultra-light);
+}
+
+.bg--neutral-light {
+background-color: var(--neutral-light);
+}
+
+.bg--neutral-semi-light {
+background-color: var(--neutral-semi-light);
+}
+
+.bg--neutral-semi-dark {
+background-color: var(--neutral-semi-dark);
+}
+
+.bg--neutral-dark {
+background-color: var(--neutral-dark);
+}
+
+.bg--neutral-ultra-dark {
+background-color: var(--neutral-ultra-dark);
+}
+
+.bg--neutral-comp {
+background-color: var(--neutral-comp);
+}
+
+.bg--neutral-medium {
+background-color: var(--neutral-medium);
+}
+
+.bg--neutral-trans-10 {
+background-color: var(--neutral-trans-10);
+}
+
+.bg--neutral-trans-20 {
+background-color: var(--neutral-trans-20);
+}
+
+.bg--neutral-trans-30 {
+background-color: var(--neutral-trans-30);
+}
+
+.bg--neutral-trans-40 {
+background-color: var(--neutral-trans-40);
+}
+
+.bg--neutral-trans-50 {
+background-color: var(--neutral-trans-50);
+}
+
+.bg--neutral-trans-60 {
+background-color: var(--neutral-trans-60);
+}
+
+.bg--neutral-trans-70 {
+background-color: var(--neutral-trans-70);
+}
+
+.bg--neutral-trans-80 {
+background-color: var(--neutral-trans-80);
+}
+
+.bg--neutral-trans-90 {
+background-color: var(--neutral-trans-90);
+}
+
+.bg--neutral-light-trans-10 {
+background-color: var(--neutral-light-trans-10);
+}
+
+.bg--neutral-light-trans-20 {
+background-color: var(--neutral-light-trans-20);
+}
+
+.bg--neutral-light-trans-30 {
+background-color: var(--neutral-light-trans-30);
+}
+
+.bg--neutral-light-trans-40 {
+background-color: var(--neutral-light-trans-40);
+}
+
+.bg--neutral-light-trans-50 {
+background-color: var(--neutral-light-trans-50);
+}
+
+.bg--neutral-light-trans-60 {
+background-color: var(--neutral-light-trans-60);
+}
+
+.bg--neutral-light-trans-70 {
+background-color: var(--neutral-light-trans-70);
+}
+
+.bg--neutral-light-trans-80 {
+background-color: var(--neutral-light-trans-80);
+}
+
+.bg--neutral-light-trans-90 {
+background-color: var(--neutral-light-trans-90);
+}
+
+.bg--white {
+background-color: var(--white);
+}
+
+.bg--black {
+background-color: var(--black);
+}
+
+.bg--white-trans-10 {
+background-color: var(--white-trans-10);
+}
+
+.bg--white-trans-20 {
+background-color: var(--white-trans-20);
+}
+
+.bg--white-trans-30 {
+background-color: var(--white-trans-30);
+}
+
+.bg--white-trans-40 {
+background-color: var(--white-trans-40);
+}
+
+.bg--white-trans-50 {
+background-color: var(--white-trans-50);
+}
+
+.bg--white-trans-60 {
+background-color: var(--white-trans-60);
+}
+
+.bg--white-trans-70 {
+background-color: var(--white-trans-70);
+}
+
+.bg--white-trans-80 {
+background-color: var(--white-trans-80);
+}
+
+.bg--white-trans-90 {
+background-color: var(--white-trans-90);
+}
+
+.bg--black-trans-10 {
+background-color: var(--black-trans-10);
+}
+
+.bg--black-trans-20 {
+background-color: var(--black-trans-20);
+}
+
+.bg--black-trans-30 {
+background-color: var(--black-trans-30);
+}
+
+.bg--black-trans-40 {
+background-color: var(--black-trans-40);
+}
+
+.bg--black-trans-50 {
+background-color: var(--black-trans-50);
+}
+
+.bg--black-trans-60 {
+background-color: var(--black-trans-60);
+}
+
+.bg--black-trans-70 {
+background-color: var(--black-trans-70);
+}
+
+.bg--black-trans-80 {
+background-color: var(--black-trans-80);
+}
+
+.bg--black-trans-90 {
+background-color: var(--black-trans-90);
+}
+
+.bg--danger {
+background-color: var(--danger);
+}
+
+.bg--danger-hover {
+background-color: var(--danger-hover);
+}
+
+.bg--danger-ultra-light {
+background-color: var(--danger-ultra-light);
+}
+
+.bg--danger-light {
+background-color: var(--danger-light);
+}
+
+.bg--danger-semi-light {
+background-color: var(--danger-semi-light);
+}
+
+.bg--danger-semi-dark {
+background-color: var(--danger-semi-dark);
+}
+
+.bg--danger-dark {
+background-color: var(--danger-dark);
+}
+
+.bg--danger-ultra-dark {
+background-color: var(--danger-ultra-dark);
+}
+
+.bg--danger-comp {
+background-color: var(--danger-comp);
+}
+
+.bg--danger-medium {
+background-color: var(--danger-medium);
+}
+
+.bg--success {
+background-color: var(--success);
+}
+
+.bg--success-hover {
+background-color: var(--success-hover);
+}
+
+.bg--success-ultra-light {
+background-color: var(--success-ultra-light);
+}
+
+.bg--success-light {
+background-color: var(--success-light);
+}
+
+.bg--success-semi-light {
+background-color: var(--success-semi-light);
+}
+
+.bg--success-semi-dark {
+background-color: var(--success-semi-dark);
+}
+
+.bg--success-dark {
+background-color: var(--success-dark);
+}
+
+.bg--success-ultra-dark {
+background-color: var(--success-ultra-dark);
+}
+
+.bg--success-comp {
+background-color: var(--success-comp);
+}
+
+.bg--success-medium {
+background-color: var(--success-medium);
+}
+
+.bg--ultra-light {
+background-color: var(--bg-ultra-light);
+}
+
+.bg--light {
+background-color: var(--bg-light);
+}
+
+.bg--dark {
+background-color: var(--bg-dark);
+}
+
+.bg--ultra-dark {
+background-color: var(--bg-ultra-dark);
+}
+
+.bg--ultra-light :where(h1, h2, h3, h4, h5, h6) {
+--heading-color: var(--bg-ultra-light-heading);
+  --h1-color: var(--bg-ultra-light-heading);
+  --h2-color: var(--bg-ultra-light-heading);
+  --h3-color: var(--bg-ultra-light-heading);
+  --h4-color: var(--bg-ultra-light-heading);
+  --h5-color: var(--bg-ultra-light-heading);
+  --h6-color: var(--bg-ultra-light-heading);
+  color: var(--bg-ultra-light-heading);
+}
+
+.bg--light :where(h1, h2, h3, h4, h5, h6) {
+--heading-color: var(--bg-light-heading);
+  --h1-color: var(--bg-light-heading);
+  --h2-color: var(--bg-light-heading);
+  --h3-color: var(--bg-light-heading);
+  --h4-color: var(--bg-light-heading);
+  --h5-color: var(--bg-light-heading);
+  --h6-color: var(--bg-light-heading);
+  color: var(--bg-light-heading);
+}
+
+.bg--dark :where(h1, h2, h3, h4, h5, h6), .texture-1 :where(h1, h2, h3, h4, h5, h6), .overlay-1 :where(h1, h2, h3, h4, h5, h6) {
+--heading-color: var(--bg-dark-heading);
+  --h1-color: var(--bg-dark-heading);
+  --h2-color: var(--bg-dark-heading);
+  --h3-color: var(--bg-dark-heading);
+  --h4-color: var(--bg-dark-heading);
+  --h5-color: var(--bg-dark-heading);
+  --h6-color: var(--bg-dark-heading);
+  color: var(--bg-dark-heading);
+}
+
+.bg--ultra-dark :where(h1, h2, h3, h4, h5, h6) {
+--heading-color: var(--bg-ultra-dark-heading);
+  --h1-color: var(--bg-ultra-dark-heading);
+  --h2-color: var(--bg-ultra-dark-heading);
+  --h3-color: var(--bg-ultra-dark-heading);
+  --h4-color: var(--bg-ultra-dark-heading);
+  --h5-color: var(--bg-ultra-dark-heading);
+  --h6-color: var(--bg-ultra-dark-heading);
+  color: var(--bg-ultra-dark-heading);
+}
+
+.bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {
+color: var(--bg-ultra-light-link);
+}
+
+.bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {
+color: var(--bg-ultra-light-link-hover);
+}
+
+.bg--light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {
+color: var(--bg-light-link);
+}
+
+.bg--light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {
+color: var(--bg-light-link-hover);
+}
+
+.bg--dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)), .texture-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)), .overlay-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {
+color: var(--bg-dark-link);
+}
+
+.bg--dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover, .texture-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover, .overlay-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {
+color: var(--bg-dark-link-hover);
+}
+
+.bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {
+color: var(--bg-ultra-dark-link);
+}
+
+.bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {
+color: var(--bg-ultra-dark-link-hover);
+}
+
+.bg--ultra-light [class*="btn--"] {
+--btn-background: var(--primary);
+  --btn-background-hover: var(--primary);
+  --btn-text-color: var(--white);
+  --btn-text-color-hover: var(--white);
+  --btn-border-color: var(--primary);
+  --btn-border-color-hover: var(--primary);
+  --focus-color: var(--danger);
+}
+
+.bg--ultra-light [class*="btn--"].btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--primary-hover);
+  --btn-text-color: var(--primary);
+  --btn-text-color-hover: var(--primary-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--primary);
+  --btn-border-color-hover: var(--primary-hover);
+  --focus-color: var(--danger);
+}
+
+.bg--light [class*="btn--"] {
+--btn-background: var(--primary);
+  --btn-background-hover: var(--primary);
+  --btn-text-color: var(--white);
+  --btn-text-color-hover: var(--white);
+  --btn-border-color: var(--primary);
+  --btn-border-color-hover: var(--primary);
+  --focus-color: var(--danger);
+}
+
+.bg--light [class*="btn--"].btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--primary-hover);
+  --btn-text-color: var(--primary);
+  --btn-text-color-hover: var(--primary-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--primary);
+  --btn-border-color-hover: var(--primary-hover);
+  --focus-color: var(--danger);
+}
+
+.bg--ultra-dark [class*="btn--"] {
+--btn-background: var(--accent);
+  --btn-background-hover: var(--accent-hover);
+  --btn-text-color: var(--white);
+  --btn-text-color-hover: var(--accent-ultra-light);
+  --btn-border-color: var(--accent);
+  --btn-border-color-hover: var(--accent-hover);
+  --focus-color: var(--accent-dark);
+}
+
+.btn--primary {
+--btn-background: var(--primary);
+  --btn-background-hover: var(--primary);
+  --btn-text-color: var(--white);
+  --btn-text-color-hover: var(--white);
+  --btn-border-color: var(--primary);
+  --btn-border-color-hover: var(--primary);
+  --focus-color: var(--danger);
+}
+
+.btn--primary-dark {
+--btn-background: var(--primary-dark);
+  --btn-background-hover: var(--primary-ultra-dark);
+  --btn-text-color: var(--primary-ultra-light);
+  --btn-text-color-hover: var(--primary-ultra-light);
+  --btn-border-color: var(--primary-dark);
+  --btn-border-color-hover: var(--primary-ultra-dark);
+  --focus-color: var(--primary-semi-dark);
+}
+
+.btn--primary-light {
+--btn-background: var(--primary-ultra-light);
+  --btn-background-hover: var(--primary-light);
+  --btn-text-color: var(--primary);
+  --btn-text-color-hover: var(--primary-ultra-dark);
+  --btn-border-color: var(--primary-ultra-light);
+  --btn-border-color-hover: var(--primary-light);
+  --focus-color: var(--primary-light);
+}
+
+.btn--primary.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--primary-hover);
+  --btn-text-color: var(--primary);
+  --btn-text-color-hover: var(--primary-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--primary);
+  --btn-border-color-hover: var(--primary-hover);
+  --focus-color: var(--danger);
+}
+
+.btn--primary-dark.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--primary-dark);
+  --btn-text-color: var(--primary-dark);
+  --btn-text-color-hover: var(--primary-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--primary-dark);
+  --btn-border-color-hover: var(--primary-dark);
+  --focus-color: var(--danger);
+}
+
+.btn--primary-light.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--primary-light);
+  --btn-text-color: var(--primary-light);
+  --btn-text-color-hover: var(--primary-dark);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--primary-light);
+  --btn-border-color-hover: var(--primary-light);
+  --focus-color: var(--danger);
+}
+
+.btn--secondary {
+--btn-background: var(--secondary);
+  --btn-background-hover: var(--secondary-hover);
+  --btn-text-color: var(--secondary-ultra-light);
+  --btn-text-color-hover: var(--secondary-ultra-light);
+  --btn-border-color: var(--secondary);
+  --btn-border-color-hover: var(--secondary-hover);
+  --focus-color: var(--secondary-dark);
+}
+
+.btn--secondary-dark {
+--btn-background: var(--secondary-dark);
+  --btn-background-hover: var(--secondary-ultra-dark);
+  --btn-text-color: var(--secondary-ultra-light);
+  --btn-text-color-hover: var(--secondary-ultra-light);
+  --btn-border-color: var(--secondary-dark);
+  --btn-border-color-hover: var(--secondary-ultra-dark);
+  --focus-color: var(--secondary-semi-dark);
+}
+
+.btn--secondary-light {
+--btn-background: var(--secondary-ultra-light);
+  --btn-background-hover: var(--secondary-light);
+  --btn-text-color: var(--secondary);
+  --btn-text-color-hover: var(--secondary-ultra-dark);
+  --btn-border-color: var(--secondary-ultra-light);
+  --btn-border-color-hover: var(--secondary-light);
+  --focus-color: var(--secondary-light);
+}
+
+.btn--secondary.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--secondary-hover);
+  --btn-text-color: var(--secondary);
+  --btn-text-color-hover: var(--secondary-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--secondary);
+  --btn-border-color-hover: var(--secondary-hover);
+  --focus-color: var(--secondary-dark);
+}
+
+.btn--secondary-dark.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--secondary-dark);
+  --btn-text-color: var(--secondary-dark);
+  --btn-text-color-hover: var(--secondary-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--secondary-dark);
+  --btn-border-color-hover: var(--secondary-dark);
+  --focus-color: var(--secondary-dark);
+}
+
+.btn--secondary-light.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--secondary-light);
+  --btn-text-color: var(--secondary-light);
+  --btn-text-color-hover: var(--secondary-dark);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--secondary-light);
+  --btn-border-color-hover: var(--secondary-light);
+  --focus-color: var(--secondary-dark);
+}
+
+.btn--tertiary {
+--btn-background: var(--tertiary);
+  --btn-background-hover: var(--tertiary-hover);
+  --btn-text-color: var(--tertiary-ultra-light);
+  --btn-text-color-hover: var(--tertiary-ultra-light);
+  --btn-border-color: var(--tertiary);
+  --btn-border-color-hover: var(--tertiary-hover);
+  --focus-color: var(--tertiary-light);
+}
+
+.btn--accent {
+--btn-background: var(--accent);
+  --btn-background-hover: var(--accent-hover);
+  --btn-text-color: var(--white);
+  --btn-text-color-hover: var(--accent-ultra-light);
+  --btn-border-color: var(--accent);
+  --btn-border-color-hover: var(--accent-hover);
+  --focus-color: var(--accent-dark);
+}
+
+.btn--accent-dark {
+--btn-background: var(--accent-dark);
+  --btn-background-hover: var(--accent-ultra-dark);
+  --btn-text-color: var(--accent-ultra-light);
+  --btn-text-color-hover: var(--accent-ultra-light);
+  --btn-border-color: var(--accent-dark);
+  --btn-border-color-hover: var(--accent-ultra-dark);
+  --focus-color: var(--accent-semi-dark);
+}
+
+.btn--accent-light {
+--btn-background: var(--accent-ultra-light);
+  --btn-background-hover: var(--accent-light);
+  --btn-text-color: var(--accent);
+  --btn-text-color-hover: var(--accent-ultra-dark);
+  --btn-border-color: var(--accent-ultra-light);
+  --btn-border-color-hover: var(--accent-light);
+  --focus-color: var(--accent-light);
+}
+
+.btn--base {
+--btn-background: var(--base);
+  --btn-background-hover: var(--base-hover);
+  --btn-text-color: var(--base-ultra-light);
+  --btn-text-color-hover: var(--base-ultra-light);
+  --btn-border-color: var(--base);
+  --btn-border-color-hover: var(--base-hover);
+  --focus-color: var(--base-dark);
+}
+
+.btn--base-dark {
+--btn-background: var(--base-ultra-dark);
+  --btn-background-hover: var(--base-ultra-dark);
+  --btn-text-color: var(--white);
+  --btn-text-color-hover: var(--base-ultra-light);
+  --btn-border-color: var(--base-ultra-dark);
+  --btn-border-color-hover: var(--base-ultra-dark);
+  --focus-color: var(--base-semi-dark);
+}
+
+.btn--base-light {
+--btn-background: var(--base-ultra-light);
+  --btn-background-hover: var(--base-light);
+  --btn-text-color: var(--base);
+  --btn-text-color-hover: var(--base-ultra-dark);
+  --btn-border-color: var(--base-ultra-light);
+  --btn-border-color-hover: var(--base-light);
+  --focus-color: var(--base-light);
+}
+
+.btn--neutral {
+--btn-background: var(--neutral);
+  --btn-background-hover: var(--neutral);
+  --btn-text-color: var(--neutral-ultra-light);
+  --btn-text-color-hover: var(--primary);
+  --btn-border-color: var(--neutral);
+  --btn-border-color-hover: var(--primary);
+  --focus-color: var(--danger);
+}
+
+.btn--neutral.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: transparent;
+  --btn-text-color: var(--neutral);
+  --btn-text-color-hover: var(--primary);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--neutral);
+  --btn-border-color-hover: var(--primary);
+  --focus-color: var(--neutral-semi-light);
+}
+
+.btn--neutral-light.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--neutral-light);
+  --btn-text-color: var(--neutral-light);
+  --btn-text-color-hover: var(--neutral-dark);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--neutral-light);
+  --btn-border-color-hover: var(--neutral-light);
+  --focus-color: var(--neutral-light);
+}
+
+.btn--warning {
+--btn-background: var(--warning);
+  --btn-background-hover: var(--warning-hover);
+  --btn-text-color: var(--warning-ultra-light);
+  --btn-text-color-hover: var(--warning-ultra-light);
+  --btn-border-color: var(--warning);
+  --btn-border-color-hover: var(--warning-hover);
+  --focus-color: var(--warning-light);
+}
+
+.btn--info {
+--btn-background: var(--info);
+  --btn-background-hover: var(--info-hover);
+  --btn-text-color: var(--info-ultra-light);
+  --btn-text-color-hover: var(--info-ultra-light);
+  --btn-border-color: var(--info);
+  --btn-border-color-hover: var(--info-hover);
+  --focus-color: var(--info-light);
+}
+
+.btn--danger {
+--btn-background: var(--danger);
+  --btn-background-hover: var(--danger-hover);
+  --btn-text-color: var(--danger-ultra-light);
+  --btn-text-color-hover: var(--danger-ultra-light);
+  --btn-border-color: var(--danger);
+  --btn-border-color-hover: var(--danger-hover);
+  --focus-color: var(--danger-light);
+}
+
+.btn--success {
+--btn-background: var(--success);
+  --btn-background-hover: var(--success-hover);
+  --btn-text-color: var(--success-ultra-light);
+  --btn-text-color-hover: var(--success-ultra-light);
+  --btn-border-color: var(--success);
+  --btn-border-color-hover: var(--success-hover);
+  --focus-color: var(--success-light);
+}
+
+.btn--action {
+--btn-background: var(--action);
+  --btn-background-hover: var(--action-hover);
+  --btn-text-color: var(--action-ultra-light);
+  --btn-text-color-hover: var(--action-ultra-light);
+  --btn-border-color: var(--action);
+  --btn-border-color-hover: var(--action-hover);
+  --focus-color: var(--action-dark);
+}
+
+.btn--action.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--action-hover);
+  --btn-text-color: var(--action);
+  --btn-text-color-hover: var(--action-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--action);
+  --btn-border-color-hover: var(--action-hover);
+  --focus-color: var(--action-dark);
+}
+
+.btn--shade {
+--btn-background: var(--shade);
+  --btn-background-hover: var(--shade-hover);
+  --btn-text-color: var(--shade-ultra-light);
+  --btn-text-color-hover: var(--shade-ultra-light);
+  --btn-border-color: var(--shade);
+  --btn-border-color-hover: var(--shade-hover);
+  --focus-color: var(--shade-light);
+}
+
+.btn--shade.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--shade-hover);
+  --btn-text-color: var(--shade);
+  --btn-text-color-hover: var(--shade-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--shade);
+  --btn-border-color-hover: var(--shade-hover);
+  --focus-color: var(--shade-light);
+}
+
+.btn--white {
+--btn-background: var(--white);
+  --btn-background-hover: var(--white);
+  --btn-text-color: var(--black);
+  --btn-text-color-hover: var(--black);
+  --btn-border-color: var(--white);
+  --btn-border-color-hover: var(--white);
+  --focus-color: var(--action);
+}
+
+.btn--white.btn--outline {
+--btn-background: transparent;
+  --btn-background-hover: var(--white-hover);
+  --btn-text-color: var(--shade-white);
+  --btn-text-color-hover: var(--action-ultra-light);
+  --btn-border-width: 0.1rem;
+  --btn-border-color: var(--white);
+  --btn-border-color-hover: var(--white-hover);
+  --focus-color: var(--action);
+}
+
+.btn--xs {
+font-size: var(--text-xs);
+}
+
+.btn--s {
+font-size: var(--text-s);
+}
+
+.btn--m {
+font-size: var(--text-m);
+}
+
+.btn--l {
+font-size: var(--text-l);
+}
+
+.btn--xl {
+font-size: var(--text-xl);
+}
+
+.btn--xxl {
+font-size: var(--text-xxl);
+}
+
+.btn--clear.btn--clear, .btn--none.btn--none {
+background: none;
+  border: none;
+}
+/* ===== Global Class rules ===== */
+.article-card {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fr-card-gap);
+  padding: var(--space-xl);
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--neutral-semi-light);
+  background-color: var(--pure-white);
+}
+
+@media (max-width: 767px) {
+.article-card {
+  flex-wrap: nowrap;
+}
+}
+
+.article-card__accent
+
+.article-card__accent {
+  order: -1;
+  color: var(--neutral-semi-dark);
+}
+
+.article-card__body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--content-gap);
+  height: auto;
+}
+
+.article-card__cta-wrappwer {
+  flex-direction: row;
+}
+
+@media (max-width: 478px) {
+.article-card__cta-wrappwer {
+  flex-direction: column;
+}
+}
+
+.article-card__description-text {
+  font-size: var(--text-m);
+  font-weight: 300;
+  color: var(--neutral-dark);
+}
+
+.article-card__heading {
+  font-size: var(--text-l);
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.article-card__heading-wrapper {
+  display: flex;
+  flex-direction: column;
+  row-gap: .5rem;
+  column-gap: .5rem;
+}
+
+.article-card__label {
+  color: var(--white);
+}
+
+.article-card__label-wrapper{
+border: 1px solid var(--pure-white, #F8F8F8);
+background: rgba(174, 203, 219, 0.50);
+}
+
+.article-card__label-wrapper {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  display: flex;
+  padding: .25rem 1rem .25rem 1rem;
+  border-radius: var(--radius-circle);
+}
+
+.article-card__media {
+  object-fit: cover;
+  width: 100%;
+  border-radius: var(--radius-xs);
+}
+
+.article-card__media-wrapper {
+  order: -1;
+  position: relative;
+}
+
+/* 
+
+To use this frame correctly, ensure the parent container is set to position relative. It's also advisable to add the following code to the parent container's CSS tab:
+
+.background {isolation: isolate;}
+
+*/
+
+.background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -2;
+}
+
+.background__image img {
+  height: 100%;
+}
+
+.background__image {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1;
+  height: 100%;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+.background__image-new img {
+  height: 100%;
+}
+
+.background__image-new {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1;
+  height: 100%;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+.background__overlay {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--black-trans-30);
+}
+
+.background__overlay-new {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--black-trans-30);
+}
+
+/* 
+
+To use this frame correctly, ensure the parent container is set to position relative. It's also advisable to add the following code to the parent container's CSS tab:
+
+.background-new {isolation: isolate;}
+
+*/
+
+.background-new {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -2;
+}
+
+.bg-gradient--hero-new::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  opacity: 0.8;
+  background: linear-gradient(90deg, 
+    var(--primary) 0%, 
+    var(--primary-trans-40) 35%, 
+    transparent 70%
+  );
+  pointer-events: none;
+}
+
+.btn--white.btn--outline svg{ 
+  stroke: var(--white);
+}
+
+.btn--white svg{ 
+  stroke: var(--black);
+}
+
+.chevron-codeblock-new {
+  width: fit-content;
+}
+
+.chevron-wrappper-new {
+  align-items: center;
+}
+
+@media (max-width: 991px) {
+.chevron-wrappper-new {
+  align-items: flex-start;
+}
+}
+
+.da-footer  * {
+  color: var(--white);
+}
+
+.da-footer {
+  padding: var(--space-60) var(--gutter) var(--space-60) var(--gutter);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--container-gap);
+  column-gap: var(--container-gap);
+}
+
+.da-footer__column-heading {
+  font-size: var(--text-m);
+  font-weight: 600;
+}
+
+.da-footer__content-wapper {
+  display: grid;
+  align-items: flex-start;
+  grid-template-columns: var(--grid-1-3);
+  gap: var(--container-gap);
+}
+
+@media (max-width: 991px) {
+.da-footer__content-wapper {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+}
+
+.da-footer__footer-card{
+  border-radius: 8px;
+border: 1px solid var(--White, #F8F8F8);
+background: var(--Gradient-footer, linear-gradient(135deg, rgba(180, 101, 198, 0.80) 0.12%, rgba(212, 19, 255, 0.50) 26.45%, #053FBB 83.92%));
+}
+
+.da-footer__footer-card {
+  padding: var(--space-xl);
+}
+
+.da-footer__footer-card-cta {
+	background: transparent;
+  border:none;
+}
+
+.da-footer__footer-card-cta:hover{
+  border-color: var(--accent)!important;
+}
+
+.da-footer__footer-card-cta {
+  padding-left: 0;
+}
+
+.da-footer__footer-card-heading {
+  font-size: var(--h3);
+  font-weight: 600;
+}
+
+.da-footer__inner {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.da-footer__li {
+  row-gap: px;
+  width: fit-content;
+}
+
+.da-footer__link {
+  font-size: var(--text-s);
+  padding: var(--space-xs);
+}
+
+.da-footer__logo-wrapper {
+  flex-direction: row;
+}
+
+.da-footer__meta-text {
+  font-size: var(--text-xs);
+}
+
+.da-footer__motto-text{
+  background: linear-gradient(127deg, rgba(241, 179, 255, 0.80) 6.92%, rgba(212, 19, 255, 0.50) 34.46%, #7895D3 86.62%);
+background-clip: text;
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+}
+
+.da-footer__motto-text {
+  font-size: var(--T1);
+  font-weight: 200;
+  text-transform: uppercase;
+}
+
+.da-footer__nav {
+  display: grid;
+  gap: var(--grid-gap);
+  grid-template-columns: var(--grid-4);
+}
+
+@media (max-width: 991px) {
+.da-footer__nav {
+  grid-template-columns: var(--grid-2);
+}
+}
+
+@media (max-width: 478px) {
+.da-footer__nav {
+  grid-template-columns: var(--grid-1);
+}
+}
+
+.da-footer__nav-column {
+  row-gap: var(--content-gap);
+}
+
+.da-footer__ul {list-style: none;}
+
+.da-footer__ul {
+  row-gap: calc(var(--fr-content-gap) * .5);
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.form-section__inner {
+  display: grid;
+  grid-template-columns: var(--grid-2-3);
+  gap: var(--space-80);
+}
+
+@media (max-width: 767px) {
+.form-section__inner {
+  grid-template-columns: var(--grid-1);
+}
+}
+
+.fr-hero {
+  row-gap: var(--container-gap);
+}
+
+.header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+
+.header__logo {
+  min-width: 15rem;
+}
+
+.header__logo--dark{
+  display: none;
+}
+
+.hero-center {
+  position: relative;
+  isolation: isolate;
+  padding-top: var(--fr-hero-padding);
+  padding-bottom: var(--fr-hero-padding);
+  justify-content: center;
+}
+
+.hero-center__content-wrapper {
+  row-gap: var(--content-gap);
+  align-items: center;
+  justify-content: center;
+  color: var(--text-light);
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 478px) {
+.hero-center__content-wrapper {
+  align-items: flex-start;
+}
+}
+
+.hero-center__heading {
+  font-size: var(--h1);
+  color: var(--text-light);
+}
+
+@media (max-width: 478px) {
+.hero-center__heading {
+  text-align: left;
+}
+}
+
+@media (max-width: 478px) {
+.hero-center__lede {
+  text-align: left;
+}
+}
+
+.hero-center__meta-wrapper {
+  justify-content: center;
+  align-items: center;
+}
+
+@media (max-width: 478px) {
+.hero-center__meta-wrapper {
+  justify-content: center;
+  flex-direction: column;
+}
+}
+
+.hero-padding-new {
+  padding-top: var(--fr-hero-padding);
+  padding-bottom: var(--fr-hero-padding);
+}
+
+.inner--neutral-light {
+  padding: var(--space-48);
+  border-radius: var(--radius);
+  row-gap: var(--space-xxl);
+  column-gap: var(--space-xxl);
+  background-color: var(--white);
+}
+
+.inner--primary--ultra-dark {
+  padding: var(--space-48) var(--space-60) var(--space-48) var(--space-60);
+  border-radius: var(--radius);
+  background-color: var(--primary-ultra-dark);
+}
+
+.inner--primary--ultra-dark-new {
+  padding: var(--space-48) var(--space-60) var(--space-48) var(--space-60);
+  border-radius: var(--radius);
+  background-color: var(--primary-ultra-dark);
+}
+
+.inner--primary-gradient {
+  padding: var(--space-80) var(--space-48) var(--space-80) var(--space-48);
+  border-radius: var(--radius);
+  row-gap: var(--space-xxl);
+  column-gap: var(--space-xxl);
+}
+
+.intro-comp[data-theme="light"] > *:not(a) {
+  color: var(--white);
+}
+
+/*If there is a button (slot)*/
+.intro-comp  button {
+  margin-block-start: var(--space-m);
+}
+
+/*Gap (vertical)*/
+.intro-comp[data-gap="space-xxl"]{
+  gap: var(--space-xxl);
+}
+
+@media(min-width: 769px){
+.intro-comp[data-alignment="isCenter"] {
+  align-items: center; 
+}
+
+.intro-comp[data-alignment="isCenter"] :is(.intro-comp__lede, .intro-comp__heading, .intro-comp__accent){
+  text-align: center;
+}
+  .intro-comp[data-alignment="isCenter"] .intro-comp__heading{
+    max-width: 25ch;
+  }
+  
+}
+
+.intro-comp {
+  row-gap: var(--content-gap);
+  column-gap: var(--content-gap);
+}
+
+.intro-comp__accent{
+  order:-1;
+}
+
+.intro-comp__accent[data-accent-color="primary"]{
+  color: var(--primary);
+}
+
+.intro-comp__accent {
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.intro-comp__heading[data-heading-size="t1"]{
+   font-size: var(--T1);
+}
+.intro-comp__heading[data-heading-size="t2"]{
+   font-size: var(--T2);
+}
+.intro-comp__heading[data-heading-size="h1"]{
+   font-size: var(--h1);
+}
+.intro-comp__heading[data-heading-size="h2"]{
+   font-size: var(--h2);
+}
+.intro-comp__heading[data-heading-weight="default"]{
+  font-weight: 200;
+}
+.intro-comp__heading[data-heading-weight="300"]{
+  font-weight: 300;
+}
+.intro-comp__heading[data-heading-weight="400"]{
+  font-weight: 400;
+}
+.intro-comp__heading[data-heading-weight="500"]{
+  font-weight: 500;
+}
+.intro-comp__heading[data-heading-weight="600"]{
+  font-weight: 600;
+}
+.intro-comp__heading[data-heading-weight="700"]{
+  font-weight: 700;
+}
+
+.intro-comp__heading {
+  color: var(--black);
+  text-align: left;
+}
+
+.intro-comp__lede{
+  text-wrap: balance;
+}
+.intro-comp__lede[data-lede-width="100%"]{
+  max-width: 100%;
+  text-wrap: auto;
+}
+
+.intro-comp__lede[data-lede-size="h3"]{
+  font-size: var(--h3);
+}
+.intro-comp__lede[data-lede-size="text-l"]{
+  font-size: var(--text-l);
+}
+.intro-comp__lede[data-lede-size="text-xl"]{
+  font-size: var(--text-xl);
+}
+
+.intro-comp__lede {
+  max-width: 70ch;
+}
+
+.landing-banner {
+  padding-top: var(--space-m);
+  padding-bottom: var(--space-m);
+  background-color: var(--primary);
+  position: relative;
+}
+
+@media (max-width: 478px) {
+.landing-banner {
+  padding-bottom: var(--section-space-xl);
+  display: flex;
+}
+}
+
+@media (max-width: 991px) {
+.landing-banner {
+  z-index: 99;
+}
+}
+
+.landing-banner__container {
+  flex-direction: row;
+  margin-top: 0!important;
+  align-items: center;
+  justify-content: space-around;
+}
+
+@media (max-width: 478px) {
+.landing-banner__container {
+  flex-direction: column;
+}
+}
+
+.landing-banner__icon {
+  translate: 0% -50%;
+  background: transparent;
+  border: none!important;
+  padding: 0px!Important;
+  width: auto!importan;
+}
+
+.landing-banner__icon:hover{
+  border: none!important;
+  color: transparent!important;
+}
+
+.landing-banner__icon {
+  position: absolute;
+  top: 50%;
+  right: var(--gutter);
+  color: transparent;
+}
+
+@media (max-width: 478px) {
+.landing-banner__icon {
+  right: auto;
+  top: auto;
+  bottom: var(--space-l);
+}
+}
+
+.landing-banner__text {
+  color: var(--white);
+}
+
+@media (max-width: 478px) {
+.landing-banner__text {
+  text-align: center;
+}
+}
+
+.list {
+  list-style-type: none;
+}
+
+.list--light > * {
+  color: var(--white);
+}
+
+
+
+.list {
+  row-gap: .5em;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.list__grid--2 {
+  display: grid;
+  grid-template-columns: var(--grid-2);
+  gap: var(--grid-gap);
+}
+
+@media (max-width: 767px) {
+.list__grid--2 {
+  grid-template-columns: var(--grid-1);
+}
+}
+
+.list__grid--4 {
+  display: grid;
+  grid-template-columns: var(--grid-4);
+  gap: var(--grid-gap);
+}
+
+@media (max-width: 991px) {
+.list__grid--4 {
+  grid-template-columns: var(--grid-2);
+}
+}
+
+@media (max-width: 767px) {
+.list__grid--4 {
+  grid-template-columns: var(--grid-1);
+}
+}
+
+.list__li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  gap: .5em;
+}
+
+.list__text {
+  font-size: var(--text-s);
+}
+
+@media (max-width: 991px) {
+.mm-inner {
+  grid-template-columns: var(--grid-2);
+}
+}
+
+@media (max-width: 478px) {
+.mm-inner {
+  grid-template-columns: var(--grid-1);
+}
+}
+
+.mm-inner__contact-card {
+  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  position: relative;
+}
+
+.mm-inner__contact-card-icon-wrapper {
+  justify-content: flex-end;
+}
+
+.mm-inner__contact-card-text {
+  font-size: var(--text-xs);
+  color: var(--white);
+}
+
+.mm-inner__contact-card-title {
+  font-size: var(--text-m);
+  font-weight: 600;
+  color: var(--white);
+}
+
+.mm-inner__heading {
+  font-size: var(--text-l);
+  font-weight: 600;
+  color: var(--primary);
+  text-transform: uppercase;
+}
+
+.mm-inner__heading-wrapper {
+  padding-bottom: var(--content-gap);
+  border-bottom: 1px solid var(--neutral-semi-dark);
+  width: fit;
+}
+
+.mm-inner__link-card {
+  column-gap: .5rem;
+  row-gap: .5rem;
+  padding: 0!important;
+  position: relative;
+}
+
+.mm-inner__link-card-text {
+  font-size: var(--text-xs);
+  color: var(--neutral-semi-dark);
+}
+
+.mm-inner__link-card-title {
+  font-size: var(--text-m);
+  font-weight: 600;
+  color: var(--neutral-dark);
+}
+
+.news-download-banner {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-xl);
+  border-radius: var(--radius);
+  border: 1px solid var(--neutral-semi-light);
+}
+
+.news-download-banner__content-wrapper {
+  row-gap: .5rem;
+  column-gap: .5rem;
+}
+
+.news-download-banner__text {
+  color: var(--black);
+}
+
+.news-download-banner__title {
+  font-weight: 600;
+  color: var(--black);
+}
+
+.newsletter__form-wrapper {
+  justify-content: center;
+}
+
+.newsletter__heading {
+  color: var(--white);
+}
+
+.newsletter__inner {
+  display: grid;
+  grid-template-columns: var(--grid-2);
+  gap: var(--space-80);
+  padding-right: calc(var(--space-xxl) * 4);
+  padding-left: calc(var(--space-xxl) * 4);
+}
+
+@media (max-width: 478px) {
+.newsletter__inner {
+  grid-template-columns: var(--grid-1);
+  gap: var(--space-xxl);
+  padding: var(--space-xxl);
+}
+}
+
+.newsletter__media {
+  max-height: 360;
+  max-width: 360;
+}
+
+.newsletter__text {
+  font-size: var(--text-l);
+  color: var(--white);
+}
+
+.overlay-gradient {
+  background: linear-gradient(90deg, rgba(5, 63, 187, 0.80) 0%, rgba(0, 179, 255, 0.80) 100%);
+}
+
+.popup-lead__close-icon {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+}
+
+.popup-lead__form-wrapper {
+  justify-content: center;
+}
+
+.popup-lead__heading {
+  color: var(--white);
+}
+
+.popup-lead__inner {
+  display: grid;
+  grid-template-columns: var(--grid-2);
+  gap: var(--space-80);
+  padding-right: calc(var(--space-xxl) * 4);
+  padding-left: calc(var(--space-xxl) * 4);
+  border: 5px solid var(--white);
+  position: relative;
+}
+
+@media (max-width: 478px) {
+.popup-lead__inner {
+  grid-template-columns: var(--grid-1);
+  gap: var(--space-xxl);
+  padding: var(--space-xxl);
+}
+}
+
+.popup-lead__media {
+  max-height: 360;
+  max-width: 360;
+}
+
+.pseudo-grid-bg-new::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background-image: url("/wp-content/uploads/2026/03/griglia-hero.svg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  pointer-events: none;
+}
+
+.rd-content  * {
+  color: var(--white);
+}
+
+.rd-content__col {
+  row-gap: var(--container-gap);
+}
+
+.rd-content-card__heading-wrapper {
+  padding-bottom: var(--content-gap);
+  border-bottom: 1px solid var(--white);
+}
+
+.rd-content-card__logo {
+  width: 18rem;
+  object-fit: contain;
+}
+
+.rd-hero {
+  position: relative;
+  align-items: flex-start;
+  isolation: isolate;
+  justify-content: center;
+  padding-top: var(--section-space-m);
+  padding-bottom: var(--section-space-m);
+}
+
+.rd-hero__accent {
+  order: -2;
+  font-size: var(--text-xs);
+  color: var(--neutral-light);
+  text-transform: uppercase;
+}
+
+@media (min-width: 992px) {
+  .rd-hero__content-wrapper[data-alignment="is-center"] .rd-hero__content-wrapper-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 100%;
+  }
+
+  .rd-hero__content-wrapper[data-alignment="is-center"] .rd-hero__content-wrapper-inner * {
+    text-align: center;
+    justify-content: center;
+  }
+
+  .rd-hero__content-wrapper[data-alignment="is-center"] .x-breadcrumbs_list {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.rd-hero__content-wrapper {
+  row-gap: var(--content-gap);
+  align-items: flex-start;
+  justify-content: flex-end;
+  position: relative;
+  z-index: 1;
+}
+
+.rd-hero__content-wrapper-inner[data-max-width="65ch"]{
+  max-width: 65ch;
+}
+
+.rd-hero__content-wrapper-inner {
+  max-width: 55ch;
+}
+
+p.rd-hero__heading{
+  font-weight: 200;
+  max-width: 15ch;
+}
+
+.rd-hero__heading {
+  font-size: var(--h1);
+  color: var(--white);
+}
+
+.rd-hero__lede {
+  font-size: var(--text-xl);
+  color: var(--white);
+  max-width: 45ch;
+}
+
+.rd-hero__subaccent {
+  order: -1;
+  font-size: var(--h3);
+  font-weight: 600;
+  color: var(--white);
+}
+
+.rd-use-case-card {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: var(--space-xl);
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--white);
+}
+
+.rd-use-case-card__content-wrapper {
+  justify-content: center;
+}
+
+.rd-use-case-card__number {
+  font-size: var(--T1);
+  font-weight: 200;
+}
+
+.section-boxed ~ .section-boxed {  
+  padding-block: 0 var(--container-gap);
+}
+
+.single-event-card {
+  padding: var(--space-xl);
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--neutral-semi-light);
+  color: var(--black);
+}
+
+@media (max-width: 478px) {
+.single-event-card__cta-wrapper {
+  align-items: flex-start;
+}
+}
+
+.single-event-card__date-wrapper {
+  padding: calc(var(--space-s) * 1.5);
+  background-color: var(--primary);
+  border-radius: .4rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+  color: var(--white);
+  align-items: center;
+}
+
+.single-event-card__day-text {
+  font-size: var(--h4);
+  text-align: center;
+}
+
+.single-event-card__footer {
+  order: -1;
+  flex-direction: row;
+}
+
+.single-event-card__meta-detail {
+  min-width: 25rem;
+}
+
+.single-event-card__meta-detail-text {
+  font-size: var(--text-s);
+  font-weight: 600;
+}
+
+.single-event-card__meta-detail-title {
+  font-size: var(--text-xs);
+}
+
+.single-event-card__meta-wrapper {
+  flex-direction: row;
+}
+
+.single-event-card__month-text {
+  font-size: var(--text-xs);
+}
+
+.site-breadcrumbs-wrapper {
+  order: -1;
+}
+/* 113/164 classes emitted; ACSS vars with no known value: --Gradient-footer, --White; skipped setting keys: _cssCustom×29, _aspectRatio×1, icon×6, _gridTemplateRows×1, _alignContentGrid×1, _gradient×1, _interactions×2, _background×2, homeIcon×1, separator×1, linkTypography×1, currentListTypography×1, separatorTypography×1, _alignSelf×1 */