/* =========================================================================== ARX DESIGN SYSTEM — single source of truth for the custom-built sections. Define tokens ONCE here; every section aliases these (never hard-code values). One accent (red) used sparingly + calm neutrals. 8px spacing rhythm. Loaded once in ; the faithful Webflow sections keep the live CSS. =========================================================================== */ :root{ /* --- color: ONE accent (red) + its tints, then neutrals --- */ --arx-red:#DD1313; /* the accent — use sparingly */ --arx-red-bright:#ff4d4d; /* accent tint for dark backgrounds */ --arx-red-deep:#b91111; /* hover/pressed */ --arx-ink:#16161a; /* primary text */ --arx-mut:#6e6e78; /* secondary text */ --arx-line:#e9e9ec; /* hairline borders */ --arx-bg:#f7f7f8; /* panel / soft surface */ --arx-bg-2:#f4f4f5; /* alt soft surface */ --arx-white:#fff; --arx-green:#15803d; /* success TEXT — AA-safe on light */ --arx-green-icon:#21a049; /* success icon/graphic fill */ /* --- type: Bio Sans (body, inherited) + Questrial (display) --- */ --arx-font:"Bio Sans",sans-serif; --arx-font-display:"Questrial","Bio Sans",sans-serif; --arx-fs-eyebrow:13px; /* uppercase label */ --arx-fs-sm:12.5px; --arx-fs-body:15px; --arx-fs-lead:clamp(16px,1.8vw,19px); --arx-fs-h3:clamp(18px,2.2vw,24px); --arx-fs-stat:clamp(26px,3.4vw,38px); --arx-fs-display:clamp(32px,5vw,60px); --arx-tracking-eyebrow:.16em; /* --- spacing: 8px rhythm --- */ --arx-s1:4px; --arx-s2:8px; --arx-s3:12px; --arx-s4:16px; --arx-s5:24px; --arx-s6:32px; --arx-s7:48px; --arx-s8:64px; /* --- radius --- */ --arx-r-sm:12px; --arx-r:16px; --arx-r-md:18px; --arx-r-lg:20px; --arx-pill:999px; /* --- elevation (sparing) --- */ --arx-sh-1:0 12px 30px -20px rgba(0,0,0,.30); /* subtle lift */ --arx-sh-2:0 18px 40px -24px rgba(0,0,0,.40); /* card hover */ --arx-sh-pop:0 14px 30px -10px rgba(221,19,19,.55); /* accent CTA */ /* --- motion --- */ --arx-ease:cubic-bezier(.2,.7,.2,1); --arx-dur:.55s; } /* Shared reveal-on-scroll primitive (sections add .in when visible). */ .arx-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--arx-dur) ease,transform var(--arx-dur) ease} .arx-reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.arx-reveal{opacity:1;transform:none;transition:none}} /* anchored sections land below the fixed header */ [id]{scroll-margin-top:88px}