/* =====================================================================
   iMetric Digital — tokens.css
   Brand v2 / "Living Metrics" editorial-bold (warm-charcoal ground)
   ---------------------------------------------------------------------
   COMPANION to theme.json. Holds what theme.json cannot express:
   full colour aliases, @font-face blocks, logical-property base resets,
   focus ring, RTL overrides, reduced-motion guard.

   theme.json emits --wp--preset--color--*, --wp--preset--font-size--*,
   --wp--preset--spacing--*, and --wp--custom--*. Aliases below mirror
   the spec names (--clr-*, --fs-*, --space-*) onto WP presets so
   component CSS can use them verbatim.

   v2 changes: warm-charcoal palette, Anton (display) + Poppins (body),
   no Geist, orange-left-spine, SOLID nav (no backdrop-filter).
   ===================================================================== */

:root {
  /* ---- Surface aliases -> WP presets ---- */
  --clr-canvas:        var(--wp--preset--color--canvas);         /* #1C1A1A */
  --clr-canvas-deep:   #1f1c1c;                                  /* gradient/vignette stop, ~canvas -3 L */
  --clr-white:         #fff;                                     /* logo-chip surfaces only */
  --clr-ground:        var(--wp--custom--ground);                /* #221F1F — default section bg */
  --clr-surface:       var(--wp--preset--color--surface);        /* #2A2727 */
  --clr-raised:        var(--wp--preset--color--raised);         /* #332F2F */
  --clr-overlay:       var(--wp--preset--color--overlay);        /* #3D3838 */
  --clr-scrim:         var(--wp--custom--scrim);

  /* ---- Text aliases ---- */
  --clr-text:          var(--wp--preset--color--text);           /* #F6F3F1 */
  --clr-text-2:        var(--wp--preset--color--text-2);         /* #D9D3D0 */
  --clr-text-muted:    var(--wp--preset--color--text-muted);     /* #A8A3A1 */
  --clr-text-disabled: var(--wp--preset--color--text-disabled);
  --clr-text-on-accent: var(--wp--preset--color--text-on-accent); /* #1C1A1A — NEVER white on orange */
  --clr-text-on-state: var(--wp--preset--color--text-on-state);

  /* ---- Orange scale aliases ---- */
  --clr-orange-50:  var(--wp--preset--color--orange-50);
  --clr-orange-100: var(--wp--preset--color--orange-100);
  --clr-orange-200: var(--wp--preset--color--orange-200);
  --clr-orange-300: var(--wp--preset--color--orange-300);
  --clr-orange-400: var(--wp--preset--color--orange-400);         /* #FFAD4D — hover/bright */
  --clr-orange-500: var(--wp--preset--color--orange-500);         /* #F79420 — BASE accent */
  --clr-orange-600: var(--wp--preset--color--orange-600);
  --clr-orange-700: var(--wp--preset--color--orange-700);         /* #D97A12 — deep/pressed */
  --clr-orange-800: var(--wp--preset--color--orange-800);
  --clr-orange-900: var(--wp--preset--color--orange-900);
  --clr-orange-bright: var(--wp--custom--orange-bright);          /* #FFAD4D */
  --clr-orange-deep:   var(--wp--custom--orange-deep);            /* #D97A12 */
  --clr-orange-glow:        var(--wp--custom--orange-glow);
  --clr-orange-glow-strong: var(--wp--custom--orange-glow-strong);

  /* ---- Hairlines (no WP preset for rgba) ---- */
  --clr-hairline:   var(--wp--custom--hairline);                  /* rgba(255,255,255,.10) */
  --clr-hairline-2: var(--wp--custom--hairline-2);                /* rgba(255,255,255,.06) */

  /* ---- Border / divider aliases ---- */
  --clr-divider:       var(--wp--preset--color--divider);
  --clr-border:        var(--wp--preset--color--border);
  --clr-border-strong: var(--wp--preset--color--border-strong);
  --clr-border-ui:     var(--wp--preset--color--border-ui);

  /* ---- Focus ring = orange-500 ---- */
  --clr-focus:         var(--wp--preset--color--orange-500);
  --focus-ring-width:  var(--wp--custom--focus--ring-width, 2px);
  --focus-ring-offset: var(--wp--custom--focus--ring-offset, 2px);

  /* ---- Semantic states + 12% alpha bgs ---- */
  --clr-success:      var(--wp--preset--color--success);
  --clr-warning:      var(--wp--preset--color--warning);
  --clr-error:        var(--wp--preset--color--error);
  --clr-info:         var(--wp--preset--color--info);
  --clr-success-bg:   var(--wp--custom--success-bg);
  --clr-warning-bg:   var(--wp--custom--warning-bg);
  --clr-error-bg:     var(--wp--custom--error-bg);
  --clr-info-bg:      var(--wp--custom--info-bg);

  /* ---- Nav surfaces ---- */
  --clr-nav-bg-resting:  var(--wp--custom--nav-bg-resting);   /* rgba(28,26,26,.95) — SOLID, no backdrop-filter */
  --clr-nav-bg-scrolled: var(--wp--custom--nav-bg-scrolled);  /* #221F1F solid */

  /* ---- Type scale aliases ---- */
  --fs-display: var(--wp--preset--font-size--display);
  /* Direct clamps — the WP-preset var chain resolved to 16px for h2 and collapsed
     section titles. These guarantee big, consistent headings across all sections. */
  --fs-h1:      clamp(2.4rem, 1.5rem + 3.5vw, 4.2rem);
  --fs-h2:      clamp(2rem, 1.3rem + 2.7vw, 3.4rem);
  --fs-h3:      clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --fs-h4:      var(--wp--preset--font-size--h4);
  --fs-h5:      var(--wp--preset--font-size--h5);
  --fs-h6:      var(--wp--preset--font-size--h6);
  --fs-body-lg: var(--wp--preset--font-size--body-lg);
  --fs-body:    var(--wp--preset--font-size--body);
  --fs-small:   var(--wp--preset--font-size--small);
  --fs-caption: var(--wp--preset--font-size--caption);
  --fs-eyebrow: var(--wp--preset--font-size--eyebrow);

  /* ---- Font family aliases ---- */
  --font-display: var(--wp--custom--font--display);  /* Anton */
  --font-latin:   var(--wp--custom--font--latin);    /* Poppins */
  --font-arabic:  var(--wp--custom--font--arabic);   /* IBM Plex Sans Arabic */
  --font-metric:  var(--wp--custom--font--metric);   /* Poppins (giant numbers) */

  /* ---- Spacing aliases ---- */
  --space-3xs: var(--wp--preset--spacing--3xs);
  --space-2xs: var(--wp--preset--spacing--2xs);
  --space-xs:  var(--wp--preset--spacing--xs);
  --space-sm:  var(--wp--preset--spacing--sm);
  --space-md:  var(--wp--preset--spacing--md);
  --space-lg:  var(--wp--preset--spacing--lg);
  --space-xl:  var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--2xl);
  --space-section-sm: var(--wp--preset--spacing--section-sm);
  --space-section:    var(--wp--preset--spacing--section);
  --space-section-lg: var(--wp--preset--spacing--section-lg);

  /* ---- Radius aliases ---- */
  --radius-xs:   var(--wp--custom--radii--xs);
  --radius-sm:   var(--wp--custom--radii--sm);
  --radius-md:   var(--wp--custom--radii--md);
  --radius-lg:   var(--wp--custom--radii--lg);   /* 14px — prototype standard */
  --radius-xl:   var(--wp--custom--radii--xl);
  --radius-pill: var(--wp--custom--radii--pill);

  /* ---- Containers ---- */
  --container-max:    var(--wp--custom--container--max);   /* 1240px */
  --container-wide:   var(--wp--custom--container--wide);
  --container-narrow: var(--wp--custom--container--narrow);
  --gutter:           var(--wp--custom--gutter);           /* clamp(1.3rem,.6rem+3vw,4rem) */

  /* ---- Orange left-spine ---- */
  --spine-width: var(--wp--custom--spine-width);           /* 6px */

  /* ---- Elevation (lifted-card recipe + glow) ---- */
  --elev-1:      var(--wp--custom--elevation--1);
  --elev-2:      var(--wp--custom--elevation--2);
  --elev-3:      var(--wp--custom--elevation--3);
  --lift:        var(--wp--custom--elevation--lift);
  --lift-hover:  var(--wp--custom--elevation--lift-hover);
  --glow-accent: var(--wp--custom--elevation--glow-accent);

  /* ---- Motion ---- */
  --dur-fast:    var(--wp--custom--duration--fast);
  --dur-base:    var(--wp--custom--duration--base);
  --dur-slow:    var(--wp--custom--duration--slow);
  --dur-reveal:  var(--wp--custom--duration--reveal);
  --ease-out:    var(--wp--custom--easing--out);
  --ease-in-out: var(--wp--custom--easing--in-out);
  --ease-emph:   var(--wp--custom--easing--emph);

  /* ---- Icon sizes ---- */
  --icon-sm: var(--wp--custom--icon--sm);
  --icon-md: var(--wp--custom--icon--md);
  --icon-lg: var(--wp--custom--icon--lg);
  --icon-xl: var(--wp--custom--icon--xl);
}

/* =====================================================================
   @font-face — SELF-HOSTED (v2: Anton + Poppins; Geist removed)
   Latin-only subsets here. IBM Plex Sans Arabic for AR below.
   PRELOAD: Anton-400 for hero H1 LCP; Poppins-500 for body/UI.
   ===================================================================== */

/* ---- Anton (Display / headings — web stand-in for Impact) ---- */
@font-face {
  font-family: "Anton";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/anton/anton-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Poppins (Body / UI / giant metric numbers — all weights) ---- */
@font-face {
  font-family: "Poppins";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/poppins/poppins-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/poppins/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/poppins/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/poppins/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/poppins/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/poppins/poppins-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/poppins/poppins-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- IBM Plex Sans Arabic (keep — AR fallback for Anton/Poppins) ---- */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ibm-plex-arabic/ibm-plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ibm-plex-arabic/ibm-plex-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ibm-plex-arabic/ibm-plex-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ibm-plex-arabic/ibm-plex-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* =====================================================================
   LOGICAL-PROPERTY BASE RESETS (bilingual LTR/RTL)
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin-block: 0;
  margin-inline: 0;
  background-color: var(--clr-ground);  /* #221F1F — the client's warm ground */
  color: var(--clr-text);
  font-family: var(--font-latin);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Logical container utilities */
.container {
  width: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-inline-size: var(--container-wide); }
.container--narrow { max-inline-size: var(--container-narrow); }

/* Headings: Anton, uppercase, tight — see theme.json element styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  margin-block-start: 0;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

/* =====================================================================
   LINKS
   ===================================================================== */
a {
  color: var(--clr-orange-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--clr-orange-300); }

.prose a,
.im-article a {
  color: var(--clr-text);
  text-decoration: underline;
  text-decoration-color: var(--clr-text-muted);
  text-underline-offset: 0.18em;
}
.prose a:hover,
.im-article a:hover { text-decoration-color: var(--clr-text); }

/* =====================================================================
   ORANGE-SCALE STATE BEHAVIOURS — on-accent text ALWAYS near-black
   ===================================================================== */
.im-btn--primary,
.im-badge--metric,
.im-tab--active,
.im-pagination__item.is-active,
.im-switcher__seg.is-active {
  color: var(--clr-text-on-accent);
}
.im-btn--primary *,
.im-badge--metric *,
.im-tab--active *,
.im-pagination__item.is-active *,
.im-switcher__seg.is-active * {
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

.im-btn--primary {
  background-color: var(--clr-orange-500);
  border-radius: 9px;
  font-weight: 600;
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.im-btn--primary:hover {
  background-color: var(--clr-orange-400);
  box-shadow: var(--glow-accent);
}
.im-btn--primary:active {
  background-color: var(--clr-orange-700);
  transform: translateY(1px);
}
.im-btn--primary[disabled],
.im-btn--primary[aria-disabled="true"] {
  background-color: var(--clr-raised);
  color: var(--clr-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

/* Core button block (.wp-element-button): theme.json can only express physical
   padding (left/right), so set the inline padding here with a logical property.
   Keeps the rendered CSS free of physical padding-left/right. */
.wp-element-button {
  padding-inline: 1.3rem;
}

/* Outline button */
.im-btn--outline {
  background-color: transparent;
  color: var(--clr-text);
  border: 1px solid var(--clr-hairline);
  border-radius: 9px;
}
.im-btn--outline:hover {
  border-color: var(--clr-orange-500);
  color: var(--clr-orange-400);
}

/* Ghost button */
.im-btn--ghost {
  background-color: transparent;
  color: var(--clr-text);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
}
.im-btn--ghost:hover {
  border-color: var(--clr-orange-500);
  color: var(--clr-orange-400);
}

/* =====================================================================
   ORANGE FOCUS-VISIBLE RING — outline-based, unclippable
   ===================================================================== */
:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: var(--focus-ring-width) solid var(--clr-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

.im-btn--primary:focus-visible,
.im-tab--active:focus-visible,
.im-pagination__item.is-active:focus-visible,
.im-switcher__seg.is-active:focus-visible,
.im-badge--metric a:focus-visible {
  outline: var(--focus-ring-width) solid var(--clr-focus);
  outline-offset: var(--focus-ring-offset);
  box-shadow: inset 0 0 0 2px var(--clr-text-on-accent);
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
    outline-color: Highlight;
  }
}

/* =====================================================================
   FORM FIELDS
   ===================================================================== */
.im-field input,
.im-field select,
.im-field textarea {
  background-color: var(--clr-raised);
  border: 1px solid var(--clr-border-ui);
  color: var(--clr-text);
  border-radius: var(--radius-sm);
  min-block-size: 48px;
  padding-block: 0;
  padding-inline: var(--space-sm);
}
.im-field input::placeholder,
.im-field textarea::placeholder { color: var(--clr-text-muted); }
.im-field input:focus,
.im-field select:focus,
.im-field textarea:focus { border-color: var(--clr-orange-500); }
.im-field .is-error input,
.im-field input[aria-invalid="true"] {
  border-color: var(--clr-error);
  background-color: var(--clr-error-bg);
}

/* =====================================================================
   SEMANTIC-STATE CHIPS
   ===================================================================== */
.im-chip--success { background-color: var(--clr-success-bg); color: var(--clr-success); }
.im-chip--warning { background-color: var(--clr-warning-bg); color: var(--clr-warning); }
.im-chip--error   { background-color: var(--clr-error-bg);   color: var(--clr-error); }
.im-chip--info    { background-color: var(--clr-info-bg);    color: var(--clr-info); }

/* =====================================================================
   .metric — SIGNATURE UTILITY
   Giant orange numbers: Poppins 800/900, tabular, bidi-isolated.
   ALWAYS Poppins (Latin); never inherits --font-arabic or Anton.
   ===================================================================== */
.metric,
.stat-number {
  font-family: var(--font-metric);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--clr-orange-500);
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  direction: ltr;
  unicode-bidi: isolate;
}
.metric .delta { font-weight: 700; font-size: 0.7em; }
.metric .unit  { font-size: 0.6em; color: var(--clr-orange-400); }

.ltr-nums { direction: ltr; unicode-bidi: isolate; }

/* =====================================================================
   EYEBROW / KICKER
   Editorial kicker: "01 — WHO WE ARE" + trailing hairline.
   Poppins, not Anton (small UI label size, not headline).
   ===================================================================== */
.im-eyebrow,
.im-kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-latin);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-block-end: 1.1rem;
}
.im-eyebrow .im-kicker__n,
.im-kicker .n {
  color: var(--clr-orange-400); /* A11y fix 1: small bold kicker numbers — orange-400 for WCAG AA */
  font-weight: 700;
}
/* trailing hairline rule */
.im-kicker::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--clr-hairline-2);
}

/* Legacy eyebrow (no trailing line) — still honoured */
.im-eyebrow--plain {
  display: inline-block;
  color: var(--clr-orange-500);
  font-size: var(--fs-eyebrow, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-block-end: 0.75rem;
}

/* =====================================================================
   RTL / ARABIC OVERRIDES
   ===================================================================== */
[lang="ar"],
[dir="rtl"] {
  font-family: var(--font-arabic);
  letter-spacing: 0 !important;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-family: var(--font-arabic); /* Anton is Latin-only */
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none; /* Arabic has no uppercase */
  overflow-wrap: anywhere;
}
[dir="rtl"] .metric,
[dir="rtl"] .stat-number { letter-spacing: 0; }
[dir="rtl"] p,
[dir="rtl"] li { line-height: 1.85; }
[dir="rtl"] .im-eyebrow,
[dir="rtl"] .im-kicker,
[dir="rtl"] .im-caption,
[dir="rtl"] .im-label { line-height: 1.6; }
[dir="rtl"] .im-eyebrow,
[dir="rtl"] .im-kicker {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
[dir="rtl"] a { text-underline-offset: 0.25em; }
[dir="rtl"] .icon-directional { transform: scaleX(-1); }
/* WP block "justify left" keyword is physical — flip it in RTL so the footer brand
   column aligns to the inline-start (right) edge like the rest of the page. */
[dir="rtl"] .im-footer .is-content-justification-left { justify-content: flex-end; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}