/* ===================================================================
   Atomic Object 2026 Design System — Design Tokens
   Colors, typography, spacing, motion. Light mode only.
   Figma source of truth:
   https://www.figma.com/design/xe3CJ9EYiLDOqSZ2AHuDpo/2026-Atomic-Design-System
   =================================================================== */

/* ── DIN OT (self-hosted, licensed) ─────────────────────────────── */

@font-face {
  font-family: "DIN OT";
  src: url("../../fonts/DINOT-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN OT";
  src: url("../../fonts/DINOT.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN OT";
  src: url("../../fonts/DINOT-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN OT";
  src: url("../../fonts/DINOT-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   Typography tokens
   Source: Figma "2026 Atomic Design System" / Responsive Sizing
   Mobile-first / mobile-up. Tablet and Desktop redeclare only
   properties whose values actually change vs. the previous breakpoint.
   Desktop wraps numeric tokens in calc(* var(--ao-type-scale))
   so Desktop XL and Desktop XXL can scale all values via a single var.
   Line-heights are unitless ratios so they scale automatically.
   ============================================================= */

:root {
  --ao-type-scale: 1;
  --ao-type-font-family-default:
    "DIN OT", "din-ot", system-ui, -apple-system, sans-serif;
  --ao-type-font-family-serif:
    "Merriweather", Georgia, "Times New Roman", serif;
  --ao-type-font-family-mono:
    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-heading: var(--ao-type-font-family-default);
  --font-body: var(--ao-type-font-family-default);
  --font-serif: var(--ao-type-font-family-serif);
  --font-mono: var(--ao-type-font-family-mono);
}

/* ****************************************** */
/*   H1 Headings                              */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-h1-font-family: var(--ao-type-font-family-default);
  --ao-type-h1-font-size: 44px;
  --ao-type-h1-line-height: 1.227;
  --ao-type-h1-paragraph-spacing: 16px;
  --ao-type-h1-letter-spacing: -2px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-h1-font-size: 52px;
    --ao-type-h1-line-height: 1.192;
    --ao-type-h1-paragraph-spacing: 18px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-h1-font-size: calc(58px * var(--ao-type-scale));
    --ao-type-h1-line-height: 1.172;
    --ao-type-h1-paragraph-spacing: calc(20px * var(--ao-type-scale));
    --ao-type-h1-letter-spacing: calc(-2px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   H2 Headings                              */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-h2-font-family: var(--ao-type-font-family-default);
  --ao-type-h2-font-size: 32px;
  --ao-type-h2-line-height: 1.294;
  --ao-type-h2-paragraph-spacing: 14px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-h2-font-size: 38px;
    --ao-type-h2-line-height: 1.238;
    --ao-type-h2-paragraph-spacing: 16px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-h2-font-size: calc(44px * var(--ao-type-scale));
    --ao-type-h2-line-height: 1.24;
    --ao-type-h2-paragraph-spacing: calc(18px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   H3 Headings                              */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-h3-font-family: var(--ao-type-font-family-default);
  --ao-type-h3-font-size: 26px;
  --ao-type-h3-line-height: 1.308;
  --ao-type-h3-paragraph-spacing: 12px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-h3-font-size: 30px;
    --ao-type-h3-line-height: 1.267;
    --ao-type-h3-paragraph-spacing: 14px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-h3-font-size: calc(34px * var(--ao-type-scale));
    --ao-type-h3-line-height: 1.235;
    --ao-type-h3-paragraph-spacing: calc(16px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   H4 Headings                              */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-h4-font-family: var(--ao-type-font-family-default);
  --ao-type-h4-font-size: 20px;
  --ao-type-h4-line-height: 1.3;
  --ao-type-h4-paragraph-spacing: 10px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-h4-font-size: 22px;
    --ao-type-h4-line-height: 1.273;
    --ao-type-h4-paragraph-spacing: 12px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-h4-font-size: calc(26px * var(--ao-type-scale));
    --ao-type-h4-line-height: 1.231;
    --ao-type-h4-paragraph-spacing: calc(14px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   H5 Headings                              */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-h5-font-family: var(--ao-type-font-family-default);
  --ao-type-h5-font-size: 18px;
  --ao-type-h5-line-height: 1.222;
  --ao-type-h5-paragraph-spacing: 10px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-h5-paragraph-spacing: 12px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-h5-font-size: calc(20px * var(--ao-type-scale));
    --ao-type-h5-line-height: 1.2;
  }
}

/* ****************************************** */
/*   H6 Headings                              */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-h6-font-family: var(--ao-type-font-family-default);
  --ao-type-h6-font-size: 16px;
  --ao-type-h6-line-height: 1.125;
  --ao-type-h6-paragraph-spacing: 14px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-h6-paragraph-spacing: 16px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-h6-font-size: calc(18px * var(--ao-type-scale));
    --ao-type-h6-line-height: 1;
  }
}

/* ****************************************** */
/*   Eyebrow                                  */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-eyebrow-font-family: var(--ao-type-font-family-default);
  --ao-type-eyebrow-font-size: 16px;
  --ao-type-eyebrow-line-height: 1.125;
  --ao-type-eyebrow-paragraph-spacing: 10px;

  --ao-type-eyebrow-lg-font-family: var(--ao-type-font-family-default);
  --ao-type-eyebrow-lg-font-size: 20px;
  --ao-type-eyebrow-lg-line-height: 1.3;
  --ao-type-eyebrow-lg-paragraph-spacing: 12px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-eyebrow-lg-font-size: 22px;
    --ao-type-eyebrow-lg-line-height: 1.273;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-eyebrow-lg-font-size: calc(24px * var(--ao-type-scale));
    --ao-type-eyebrow-lg-line-height: 1.25;
  }
}

/* ****************************************** */
/*   Moodline                                 */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-moodline-font-family: var(--ao-type-font-family-serif);
  --ao-type-moodline-font-size: 28px;
  --ao-type-moodline-line-height: 1.286;
  --ao-type-moodline-paragraph-spacing: 16px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-moodline-font-size: 34px;
    --ao-type-moodline-line-height: 1.294;
    --ao-type-moodline-paragraph-spacing: 18px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-moodline-font-size: calc(42px * var(--ao-type-scale));
    --ao-type-moodline-line-height: 1.333;
    --ao-type-moodline-paragraph-spacing: calc(20px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   Body                                     */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-body-font-family: var(--ao-type-font-family-default);
  --ao-type-body-font-size: 16px;
  --ao-type-body-line-height: 1.125;
  --ao-type-body-paragraph-spacing: 16px;

  --ao-type-body-lg-font-family: var(--ao-type-font-family-default);
  --ao-type-body-lg-font-size: 18px;
  --ao-type-body-lg-line-height: 1.222;
  --ao-type-body-lg-paragraph-spacing: 16px;

  --ao-type-body-sm-font-family: var(--ao-type-font-family-default);
  --ao-type-body-sm-font-size: 14px;
  --ao-type-body-sm-line-height: 1.286;
  --ao-type-body-sm-paragraph-spacing: 14px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-body-font-size: 18px;
    --ao-type-body-line-height: 1.222;
    --ao-type-body-paragraph-spacing: 18px;

    --ao-type-body-lg-font-size: 20px;
    --ao-type-body-lg-line-height: 1.222;
    --ao-type-body-lg-paragraph-spacing: 20px;

    --ao-type-body-sm-font-size: 16px;
    --ao-type-body-sm-line-height: 1.222;
    --ao-type-body-sm-paragraph-spacing: 16px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-body-font-size: calc(20px * var(--ao-type-scale));
    --ao-type-body-line-height: 1.2;
    --ao-type-body-paragraph-spacing: calc(20px * var(--ao-type-scale));

    --ao-type-body-lg-font-size: calc(20px * var(--ao-type-scale));
    --ao-type-body-lg-line-height: 1.2;
    --ao-type-body-lg-paragraph-spacing: calc(24px * var(--ao-type-scale));

    --ao-type-body-sm-font-size: calc(18px * var(--ao-type-scale));
    --ao-type-body-sm-line-height: 1.2;
    --ao-type-body-sm-paragraph-spacing: calc(18px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   Text Medium (Text Link Lg)               */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-text-medium-font-family: var(--ao-type-font-family-default);
  --ao-type-text-medium-font-size: 22px;
  --ao-type-text-medium-line-height: 1.364;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-text-medium-font-size: 24px;
    --ao-type-text-medium-line-height: 1.333;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-text-medium-font-size: 28px;
    --ao-type-text-medium-line-height: 1.357;
  }
}

/* ****************************************** */
/*   Lead Paragraphs                          */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-lead-font-family: var(--ao-type-font-family-serif);
  --ao-type-lead-font-size: 18px;
  --ao-type-lead-line-height: 1.444;
  --ao-type-lead-paragraph-spacing: 16px;

  --ao-type-lead-serif-font-family: var(--ao-type-font-family-serif);
  --ao-type-lead-serif-font-size: 20px;
  --ao-type-lead-serif-line-height: 1.5;
  --ao-type-lead-serif-paragraph-spacing: 20px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-lead-font-size: 22px;
    --ao-type-lead-line-height: 1.364;
    --ao-type-lead-paragraph-spacing: 18px;

    --ao-type-lead-serif-font-size: 24px;
    --ao-type-lead-serif-line-height: 1.417;
    --ao-type-lead-serif-paragraph-spacing: 24px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-lead-font-size: calc(24px * var(--ao-type-scale));
    --ao-type-lead-line-height: 1.417;
    --ao-type-lead-paragraph-spacing: calc(20px * var(--ao-type-scale));

    --ao-type-lead-serif-font-size: calc(28px * var(--ao-type-scale));
    --ao-type-lead-serif-line-height: 1.429;
    --ao-type-lead-serif-paragraph-spacing: calc(30px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   Display Headings                         */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-display-font-family: var(--ao-type-font-family-default);
  --ao-type-display-font-size: 22px;
  --ao-type-display-line-height: 1.182;
  --ao-type-display-paragraph-spacing: 12px;

  --ao-type-display-lg-font-family: var(--ao-type-font-family-default);
  --ao-type-display-lg-font-size: 36px;
  --ao-type-display-lg-line-height: 1.278;
  --ao-type-display-lg-paragraph-spacing: 14px;

  --ao-type-display-xl-font-family: var(--ao-type-font-family-default);
  --ao-type-display-xl-font-size: 44px;
  --ao-type-display-xl-line-height: 1.227;
  --ao-type-display-xl-paragraph-spacing: 16px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-display-font-size: 24px;
    --ao-type-display-line-height: 1.167;

    --ao-type-display-lg-font-size: 44px;
    --ao-type-display-lg-line-height: 1.227;
    --ao-type-display-lg-paragraph-spacing: 16px;

    --ao-type-display-xl-font-size: 52px;
    --ao-type-display-xl-line-height: 1.192;
    --ao-type-display-xl-paragraph-spacing: 18px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-display-font-size: calc(26px * var(--ao-type-scale));
    --ao-type-display-line-height: 1.154;

    --ao-type-display-lg-font-size: calc(50px * var(--ao-type-scale));
    --ao-type-display-lg-line-height: 1.24;
    --ao-type-display-lg-paragraph-spacing: calc(18px * var(--ao-type-scale));

    --ao-type-display-xl-font-size: calc(60px * var(--ao-type-scale));
    --ao-type-display-xl-line-height: 1.2;
    --ao-type-display-xl-paragraph-spacing: calc(20px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   Quote                                    */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-quote-font-family: var(--ao-type-font-family-serif);
  --ao-type-quote-font-size: 22px;
  --ao-type-quote-line-height: 1.545;
  --ao-type-quote-paragraph-spacing: 24px;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-quote-font-size: 28px;
    --ao-type-quote-line-height: 1.571;
    --ao-type-quote-paragraph-spacing: 28px;
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-quote-font-size: calc(32px * var(--ao-type-scale));
    --ao-type-quote-line-height: 1.563;
    --ao-type-quote-paragraph-spacing: calc(32px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   List                                     */
/*   Base and large list tokens track body    */
/*   paragraph size and line-height at every  */
/*   breakpoint.                              */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-list-font-family: var(--ao-type-font-family-default);
  --ao-type-list-font-size: 16px;
  --ao-type-list-line-height: 1.125;
  --ao-type-list-paragraph-spacing: 10px;

  --ao-type-list-lg-font-family: var(--ao-type-font-family-default);
  --ao-type-list-lg-font-size: 18px;
  --ao-type-list-lg-line-height: 1.222;
  --ao-type-list-lg-paragraph-spacing: 16px;

  /* Fixed column for zero-padded ordered-list markers (01. 02. …). */
  --ao-ol-marker-width: 3rem;
}

/* === Tablet (Figma) === */
@media (min-width: 768px) {
  :root {
    --ao-type-list-font-size: 18px;
    --ao-type-list-line-height: 1.222;

    --ao-type-list-lg-font-size: calc(18px * var(--ao-type-scale));
    --ao-type-list-lg-line-height: 1.222;
    --ao-type-list-lg-paragraph-spacing: calc(18px * var(--ao-type-scale));
  }
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-list-font-size: 20px;
    --ao-type-list-line-height: 1.2;

    --ao-type-list-lg-font-size: calc(20px * var(--ao-type-scale));
    --ao-type-list-lg-line-height: 1.2;
    --ao-type-list-lg-paragraph-spacing: calc(24px * var(--ao-type-scale));
  }
}

/* ****************************************** */
/*   Accordion Label                          */
/* ****************************************** */

/* --- Mobile (Figma) --- */
:root {
  --ao-type-accordion-label-font-family: var(--ao-type-font-family-default);
  --ao-type-accordion-label-font-size: 20px;
  --ao-type-accordion-label-line-height: 1.4;
  --ao-type-accordion-label-paragraph-spacing: 12px;
}

/* === Desktop (Figma) === */
@media (min-width: 992px) {
  :root {
    --ao-type-accordion-label-font-size: calc(24px * var(--ao-type-scale));
    --ao-type-accordion-label-line-height: 1.417;
    --ao-type-accordion-label-paragraph-spacing: calc(
      14px * var(--ao-type-scale)
    );
  }
}

/* ****************************************** */
/*   Global Type Scale (XL / XXL)             */
/*   Single knob that scales every Desktop    */
/*   calc()-wrapped token at once.            */
/* ****************************************** */

/* === Desktop XL — 10% larger than Desktop === */
@media (min-width: 1280px) {
  :root {
    --ao-type-scale: 1.1;
  }
}

/* === Desktop XXL — 10% larger than Desktop XL (≈21% larger than Desktop) === */
@media (min-width: 1512px) {
  :root {
    --ao-type-scale: 1.21;
  }
}

:root {
  /* ── AO extended palette ──────────────────────────────────────── */
  --ao-heading-black: #2d2d2d;
  --ao-body-black: #4c4845;
  --ao-mid-grey: #757575;
  --ao-grey: #c3c3c3;
  --ao-light-grey: #f3f3f3;
  --ao-offwhite: #f9f9f9;
  --ao-white: #ffffff;

  /* Brand accents (decorative use — fills, borders, diagrams) */
  --ao-brand-red: #fd4d57;
  --ao-dark-red: #c43238;
  --ao-darkest-red: #93272b;
  --ao-light-red: #fecacd;

  --ao-brand-teal: #16cbc4;
  --ao-dark-teal: #417d86;
  --ao-darkest-teal: #285c62;
  --ao-light-teal: #b3e5e1;

  --ao-brand-blue: #68ccf4;
  --ao-dark-blue: #2a7c9d;
  --ao-darkest-blue: #226079;
  --ao-light-blue: #c1dfeb;

  --ao-brand-purple: #b26f9f;
  --ao-dark-purple: #a5488b;
  --ao-darkest-purple: #733662;
  --ao-light-purple: #e9d3e3;

  --ao-brand-gold: #dcad66;
  --ao-dark-gold: #8f7242;
  --ao-darkest-gold: #735a34;
  --ao-light-gold: #eacea3;

  /* ── Semantic colors ──────────────────────────────────────────── */
  --background: var(--ao-white);
  --foreground: var(--ao-body-black);
  --card: var(--ao-white);
  --card-foreground: var(--ao-body-black);
  --popover: var(--ao-white);
  --popover-foreground: var(--ao-body-black);
  --muted: #f7f7f7;
  --muted-foreground: #979797;
  --border: #e5e5e5;
  --input: #c3c3c3;
  --ring: var(--ao-brand-red);
  --primary: var(--ao-brand-red);
  --primary-foreground: var(--ao-white);
  --secondary: var(--ao-light-grey);
  --secondary-foreground: var(--ao-heading-black);
  --accent: var(--ao-light-teal);
  --accent-foreground: var(--ao-dark-teal);
  --destructive: var(--ao-dark-red);
  --destructive-foreground: var(--ao-white);
  --success: var(--ao-brand-teal);
  --warning: var(--ao-brand-gold);
  --info: var(--ao-brand-blue);

  /* ── Legacy token aliases (mapped to AO values) ───────────────── */
  /* Existing page CSS references these names; remapping them here
     re-skins every page to the AO palette without touching markup. */
  --ao-red: var(--primary);
  --ao-red-light: var(--ao-light-red);
  --ao-dark: var(--ao-heading-black);
  --ao-charcoal: var(--ao-body-black);
  --ao-gray: var(--ao-mid-grey);
  --ao-gray-light: var(--ao-light-grey);
  --ao-teal: var(--ao-dark-teal);
  --ao-teal-light: var(--ao-light-teal);
  --ao-blue: var(--ao-dark-blue);
  --ao-blue-light: var(--ao-light-blue);
  --ao-purple: var(--ao-dark-purple);
  --ao-purple-light: var(--ao-light-purple);
  --ao-amber: var(--ao-dark-gold);
  --ao-amber-light: var(--ao-light-gold);
}

:root {
  /* ── Radius ───────────────────────────────────────────────────── */
  /* AO 2026 is sharp — surfaces are crisp rectangles, no rounded corners. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;

  /* ── Layout ───────────────────────────────────────────────────── */
  /* Comfortable reading measure (~70 characters) for long-form prose. */
  --measure: 38rem;

  /* Light, soft elevation for cards and panels. */
  --card-shadow:
    0 1px 2px rgba(45, 45, 45, 0.05), 0 6px 16px rgba(45, 45, 45, 0.06);

  /* ── Spacing scale (AO named tokens, desktop) ─────────────────── */
  --spacing-tiny: 4px;
  --spacing-xxsmall: 8px;
  --spacing-xsmall: 16px;
  --spacing-small: 24px;
  --spacing-medium: 32px;
  --spacing-large: 48px;
  --spacing-xlarge: 64px;
  --spacing-xxlarge: 80px;
  --spacing-huge: 96px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1024px) {
  :root {
    --spacing-large: 40px;
    --spacing-xlarge: 56px;
    --spacing-xxlarge: 72px;
    --spacing-huge: 80px;
  }
}

@media (max-width: 768px) {
  :root {
    --spacing-xsmall: 12px;
    --spacing-small: 20px;
    --spacing-medium: 20px;
    --spacing-large: 26px;
    --spacing-xlarge: 40px;
    --spacing-xxlarge: 48px;
    --spacing-huge: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}