/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-layout-tokens.css
   Layer: Structural Layout Tokens
   Version: 2.x

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s structural geometry:
   - breakpoint references
   - container widths
   - fluid inner widths
   - gutters
   - section rhythm
   - card interior spacing
   - gap and stack systems
   - grid geometry
   - text measures
   - module geometry constraints

   This is the structural token foundation of the system.

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Breakpoint reference tokens
   - Container max-width tiers
   - Inner width formulas
   - Gutters
   - Section vertical rhythm
   - Card interior spacing
   - Gap system
   - Stack rhythm
   - Text measures
   - Grid geometry defaults
   - Heading-group rule geometry
   - Logo geometry
   - Hero inset geometry
   - Breakpoint token overrides

   Does NOT own:
   - Colors
   - Elevation
   - Shadows
   - Motion
   - Radius
   - Opacity
   - Focus styles
   - Overlay or glass logic

   ARCHITECTURE
   ----------------------------------------------------------------
   - Geometry lives here
   - Aesthetic values live in milo-tokens.css
   - Components consume these tokens
   - Breakpoints modify tokens only

========================================================= */

/* #region 1) BREAKPOINT REFERENCES */
:root {
  --milo-bp-wide: 1200px;
  --milo-bp-tablet: 1024px;
  --milo-bp-mobile: 768px;
  --milo-bp-mobile-sm: 480px;
}
/* #endregion 1) BREAKPOINT REFERENCES */

/* #region 2) SPACING SCALE */
:root {
  --milo-space-0: 0px;
  --milo-space-2xs: 6px;
  --milo-space-xs: 10px;
  --milo-space-sm: 16px;
  --milo-space-md: 24px;
  --milo-space-lg: 40px;
  --milo-space-xl: 64px;
  --milo-space-2xl: 96px;
  --milo-space-3xl: 140px;
}
/* #endregion 2) SPACING SCALE */

/* #region 2) CONTAINER WIDTH SYSTEM */
:root {
  --milo-container-xs: 720px;
  --milo-container-sm: 860px;
  --milo-container-md: 980px;
  --milo-container-lg: 1120px;
  --milo-container-xl: 1240px;
  --milo-container-2xl: 1380px;

  --milo-inner-max: var(--milo-container-xl);
  --milo-inner-wide-max: var(--milo-container-2xl);
  --milo-inner-narrow-max: var(--milo-container-md);

  /* Reading-width bridge */
  --milo-inner-reading-max: var(--milo-container-sm);
}
/* #endregion 2) CONTAINER WIDTH SYSTEM */

/* #region 3) GUTTER SYSTEM + FLUID WIDTHS */
:root {
  --milo-gutter: 32px;
  --milo-gutter-tablet: 22px;
  --milo-gutter-mobile: 18px;
  --milo-gutter-tight: 16px;

  --milo-inner-fluid: min(
    var(--milo-inner-max),
    calc(100% - (var(--milo-gutter) * 2))
  );

  --milo-inner-wide-fluid: min(
    var(--milo-inner-wide-max),
    calc(100% - (var(--milo-gutter) * 2))
  );

  --milo-inner-narrow-fluid: min(
    var(--milo-inner-narrow-max),
    calc(100% - (var(--milo-gutter) * 2))
  );

  --milo-inner-reading-fluid: min(
    var(--milo-inner-reading-max),
    calc(100% - (var(--milo-gutter) * 2))
  );
}
/* #endregion 3) GUTTER SYSTEM + FLUID WIDTHS */

/* #region 4) SECTION VERTICAL RHYTHM */
:root {
  --milo-section-pad: var(--milo-space-2xl, 96px);
  --milo-section-pad-none: var(--milo-space-0, 0px);
  --milo-section-pad-10: var(--milo-space-xs, 10px);
  --milo-section-pad-tight: var(--milo-space-xl, 64px);
  --milo-section-pad-loose: var(--milo-space-3xl, 140px);

  --milo-section-pad-tablet: 80px;
  --milo-section-pad-mobile: 64px;
  --milo-section-pad-tight-mobile: 52px;

  --milo-section-pad-fluid: clamp(72px, 6vw, var(--milo-section-pad));

  /* Small */
  --milo-pad-fluid-top-sm: clamp(54px, 6vw, 80px);
  --milo-pad-fluid-bottom-sm: clamp(42px, 5vw, 64px);

  /* Medium */
  --milo-pad-fluid-top-md: clamp(80px, 8vw, 112px);
  --milo-pad-fluid-bottom-md: clamp(88px, 9vw, 120px);

  /* Large */
  --milo-pad-fluid-top-lg: clamp(96px, 10vw, 136px);
  --milo-pad-fluid-bottom-lg: clamp(104px, 10vw, 144px);

  /* XL — hero / marquee */
  --milo-pad-fluid-top-xl: clamp(120px, 13vw, 168px);
  --milo-pad-fluid-bottom-xl: clamp(72px, 8vw, 108px);

  /* 2XL — hero / marquee */
  --milo-pad-fluid-top-2xl: clamp(144px, 14vw, 240px);
  --milo-pad-fluid-bottom-2xl: clamp(80px, 9vw, 120px);

  /* Symmetric shortcuts */
  --milo-pad-fluid-sm: var(--milo-pad-fluid-top-sm);
  --milo-pad-fluid-md: var(--milo-pad-fluid-top-md);
  --milo-pad-fluid-lg: var(--milo-pad-fluid-top-lg);
  --milo-pad-fluid-xl: var(--milo-pad-fluid-top-xl);
}
/* #endregion 4) SECTION VERTICAL RHYTHM */

/* #region 4.5) CARD INTERIOR SPACING */
:root {
  /* Base scale */
  --milo-card-pad-2xs: clamp(10px, 1.2vw, 14px);
  --milo-card-pad-xs: clamp(12px, 1.4vw, 18px);
  --milo-card-pad-sm: clamp(16px, 1.8vw, 22px);
  --milo-card-pad-md: clamp(20px, 2.2vw, 26px);
  --milo-card-pad-lg: clamp(24px, 2.8vw, 32px);
  --milo-card-pad-xl: clamp(28px, 3.4vw, 40px);
  --milo-card-pad-2xl: clamp(32px, 4vw, 48px);

  /* Semantic defaults */
  --milo-card-pad-default: var(--milo-card-pad-md);
  --milo-card-pad-compact: var(--milo-card-pad-sm);
  --milo-card-pad-featured: var(--milo-card-pad-lg);

  /* Back-compat aliases */
  --milo-card-pad: var(--milo-card-pad-default);
  --milo-card-pad-tight: var(--milo-card-pad-compact);
  --milo-card-pad-loose: var(--milo-card-pad-featured);

  /* Directional helpers */
  --milo-card-pad-block-xs: var(--milo-card-pad-xs);
  --milo-card-pad-block-sm: var(--milo-card-pad-sm);
  --milo-card-pad-block-md: var(--milo-card-pad-md);
  --milo-card-pad-block-lg: var(--milo-card-pad-lg);

  --milo-card-pad-inline-xs: var(--milo-card-pad-xs);
  --milo-card-pad-inline-sm: var(--milo-card-pad-sm);
  --milo-card-pad-inline-md: var(--milo-card-pad-md);
  --milo-card-pad-inline-lg: var(--milo-card-pad-lg);

  /* Optional editorial asymmetry helpers */
  --milo-card-pad-top-sm: var(--milo-card-pad-sm);
  --milo-card-pad-top-md: var(--milo-card-pad-md);
  --milo-card-pad-bottom-sm: var(--milo-card-pad-sm);
  --milo-card-pad-bottom-md: var(--milo-card-pad-md);
  --milo-card-pad-bottom-lg: var(--milo-card-pad-lg);

  /* Common patterns */
  --milo-card-pad-balanced: var(--milo-card-pad-block-md)
    var(--milo-card-pad-inline-lg);

  --milo-card-pad-editorial-tight: var(--milo-card-pad-block-sm)
    var(--milo-card-pad-inline-sm);

  --milo-card-pad-feature: var(--milo-card-pad-block-lg)
    var(--milo-card-pad-inline-md);

  --milo-card-pad-rail: var(--milo-card-pad-block-sm)
    var(--milo-card-pad-inline-xs);
}
/* #endregion 4.5) CARD INTERIOR SPACING */

/* #region 5) GAP + STACK SYSTEM */
:root {
  /* Fixed gap primitives */
  --milo-gap-2xs: var(--milo-space-2xs, 6px);
  --milo-gap-xs: var(--milo-space-xs, 10px);
  --milo-gap-sm: var(--milo-space-sm, 16px);
  --milo-gap-md: var(--milo-space-md, 24px);
  --milo-gap-lg: var(--milo-space-lg, 40px);
  --milo-gap-xl: var(--milo-space-xl, 64px);
  --milo-gap-2xl: var(--milo-space-2xl, 96px);

  /* Fluid gap primitives */
  --milo-gap-fluid-xs: clamp(12px, 1.4vw, 18px);
  --milo-gap-fluid-sm: clamp(16px, 1.8vw, 22px);
  --milo-gap-fluid-md: clamp(24px, 2.4vw, 32px);
  --milo-gap-fluid-lg: clamp(32px, 3vw, 48px);
  --milo-gap-fluid-xl: clamp(40px, 4vw, 64px);
  --milo-gap-fluid-2xl: clamp(48px, 5vw, 88px);
  --milo-gap-fluid-3xl: clamp(56px, 6vw, 104px);
  --milo-gap-fluid-4xl: clamp(72px, 8vw, 128px);

  /* Semantic aliases */
  --milo-gap-row: var(--milo-gap-xl);
  --milo-gap-grid: var(--milo-gutter);
  --milo-gap-logos: var(--milo-gap-md);

  --milo-stack: var(--milo-gap-md);
  --milo-stack-2xs: var(--milo-gap-2xs);
  --milo-stack-xs: var(--milo-gap-xs);
  --milo-stack-sm: var(--milo-gap-sm);
  --milo-stack-md: var(--milo-gap-md);
  --milo-stack-lg: var(--milo-gap-lg);
  --milo-stack-xl: var(--milo-gap-xl);
  --milo-stack-2xl: var(--milo-gap-2xl);

  --milo-stack-fluid-xs: var(--milo-gap-fluid-xs);
  --milo-stack-fluid-sm: var(--milo-gap-fluid-sm);
  --milo-stack-fluid-md: var(--milo-gap-fluid-md);
  --milo-stack-fluid-lg: var(--milo-gap-fluid-lg);
  --milo-stack-fluid-xl: var(--milo-gap-fluid-xl);
}
/* #endregion 5) GAP + STACK SYSTEM */

/* #region 6) GRID GEOMETRY */
:root {
  --milo-grid-min-sm: 220px;
  --milo-grid-min-md: 280px;
  --milo-grid-min-lg: 340px;
  --milo-grid-logo: 100px;

  --milo-grid-min: var(--milo-grid-min-md);

  --milo-grid-cols: 3;
  --milo-grid-cols-tablet: 2;
  --milo-grid-cols-mobile: 1;

  --milo-rail-col: var(--milo-grid-min-md);

  --milo-grid-ratio-a: 1.15fr;
  --milo-grid-ratio-b: 0.85fr;

  /* Semantic bridges */
  --milo-grid-min-card: var(--milo-grid-min-md);
  --milo-grid-min-feature: var(--milo-grid-min-lg);
  --milo-grid-min-rail: var(--milo-rail-col);
}
/* #endregion 6) GRID GEOMETRY */

/* #region 7) TEXT MEASURE SYSTEM */
:root {
  --milo-measure-8: 8ch;
  --milo-measure-9: 9ch;
  --milo-measure-10: 10ch;
  --milo-measure-12: 12ch;
  --milo-measure-14: 14ch;
  --milo-measure-16: 16ch;
  --milo-measure-18: 18ch;
  --milo-measure-20: 20ch;
  --milo-measure-24: 24ch;
  --milo-measure-28: 28ch;
  --milo-measure-30: 30ch;
  --milo-measure-32: 32ch;
  --milo-measure-34: 34ch;
  --milo-measure-38: 38ch;
  --milo-measure-40: 40ch;
  --milo-measure-44: 44ch;
  --milo-measure-48: 48ch;
  --milo-measure-52: 52ch;
  --milo-measure-56: 56ch;
  --milo-measure-60: 60ch;
  --milo-measure-72: 72ch;

  --milo-measure-head: var(--milo-measure-60);
  --milo-measure-body: var(--milo-measure-72);
  --milo-measure-dek: 58ch;

  /* Optional fluid editorial helpers */
  --milo-measure-head-fluid: clamp(18ch, 30vw, 32ch);
  --milo-measure-dek-fluid: clamp(32ch, 42vw, 58ch);
}
/* #endregion 7) TEXT MEASURE SYSTEM */

/* #region 8) LAYOUT CONSTANTS */
:root {
  --milo-divider-w: 1px;
  --milo-case-two-col-max: 1160px;

  --milo-inner-tight-offset: 8px;
  --milo-inner-tight-offset-tablet: 6px;
  --milo-inner-tight-offset-mobile: 4px;

  --milo-gutter-tight-offset: 8px;
  --milo-gutter-tight-offset-tablet: 6px;
  --milo-gutter-tight-offset-mobile: 4px;
}
/* #endregion 8) LAYOUT CONSTANTS */

/* #region 8.5) OFFSET + INDENT SYSTEM */
:root {
  /* FIXED STRUCTURAL OFFSETS */
  --milo-offset-2xs: var(--milo-space-2xs, 6px);
  --milo-offset-xs: var(--milo-space-xs, 10px);
  --milo-offset-sm: var(--milo-space-sm, 16px);
  --milo-offset-md: var(--milo-space-md, 24px);
  --milo-offset-lg: var(--milo-space-lg, 40px);
  --milo-offset-xl: var(--milo-space-xl, 64px);
  --milo-offset-2xl: var(--milo-space-2xl, 96px);

  /* FLUID STRUCTURAL OFFSETS  */
  --milo-offset-fluid-2xs: clamp(6px, 0.8vw, 10px);
  --milo-offset-fluid-xs: clamp(8px, 1.1vw, 14px);
  --milo-offset-fluid-sm: clamp(12px, 1.5vw, 18px);
  --milo-offset-fluid-md: clamp(16px, 2vw, 24px);
  --milo-offset-fluid-lg: clamp(24px, 2.8vw, 32px);
  --milo-offset-fluid-xl: clamp(32px, 3.6vw, 44px);
  --milo-offset-fluid-2xl: clamp(40px, 4.5vw, 56px);

  /* INDENT SYSTEM */
  --milo-indent-2xs: var(--milo-offset-2xs);
  --milo-indent-xs: var(--milo-offset-xs);
  --milo-indent-sm: var(--milo-offset-sm);
  --milo-indent-md: var(--milo-offset-md);
  --milo-indent-lg: var(--milo-offset-lg);

  --milo-indent-fluid-xs: var(--milo-offset-fluid-xs);
  --milo-indent-fluid-sm: var(--milo-offset-fluid-sm);
  --milo-indent-fluid-md: var(--milo-offset-fluid-md);
  --milo-indent-fluid-lg: var(--milo-offset-fluid-lg);

  /* AXIS HELPERS */
  --milo-offset-block-xs: var(--milo-offset-xs);
  --milo-offset-block-sm: var(--milo-offset-sm);
  --milo-offset-block-md: var(--milo-offset-md);
  --milo-offset-block-lg: var(--milo-offset-lg);

  --milo-offset-inline-2xs: var(--milo-offset-2xs);
  --milo-offset-inline-xs: var(--milo-offset-xs);
  --milo-offset-inline-sm: var(--milo-offset-sm);
  --milo-offset-inline-md: var(--milo-offset-md);
  --milo-offset-inline-lg: var(--milo-offset-lg);
  --milo-offset-inline-xl: var(--milo-offset-xl);

  /* SEMANTIC DEFAULTS */
  --milo-body-indent: var(--milo-indent-md);
  --milo-body-indent-tight: var(--milo-indent-sm);
  --milo-body-indent-loose: var(--milo-indent-lg);

  --milo-rule-offset: var(--milo-offset-sm);
  --milo-rule-offset-loose: var(--milo-offset-md);

  --milo-copy-nudge: var(--milo-offset-xs);
  --milo-copy-nudge-loose: var(--milo-offset-sm);

  --milo-media-inset: var(--milo-offset-md);
  --milo-media-inset-tight: var(--milo-offset-sm);

  --milo-rail-offset: var(--milo-indent-sm);
  --milo-rail-offset-loose: var(--milo-indent-md);
}
/* #endregion 8.5) OFFSET + INDENT SYSTEM */

/* #region 9) MODULE GEOMETRY: HEADING GROUP */
:root {
  --milo-heading-rule-under-w: 44px;
  --milo-heading-rule-side-w: 36px;

  --milo-heading-rule-under-pad: 10px;
  --milo-heading-rule-side-gap: 12px;
  --milo-heading-rule-side-nudge: 2px;
}
/* #endregion 9) MODULE GEOMETRY: HEADING GROUP */

/* #region 10) MODULE GEOMETRY: LOGOS */
:root {
  --milo-logo-h: 50px;
  --milo-logo-h-featured: 72px;
  --milo-logo-h-client: 56px;
  --milo-logo-h-compact-featured: 56px;
  --milo-logo-h-compact-client: 48px;
}
/* #endregion 10) MODULE GEOMETRY: LOGOS */

/* #region 11) MODULE GEOMETRY: HERO */
:root {
  --milo-hero-inset-bottom: var(--milo-space-xl, 64px);
  --milo-hero-inset-bottom-tablet: var(--milo-space-lg, 40px);
  --milo-hero-inset-bottom-mobile: var(--milo-space-md, 24px);
}
/* #endregion 11) MODULE GEOMETRY: HERO */

/* #region 17) UI COMPATIBILITY GEOMETRY */
:root {
  --milo-lift-xs: 1px;
  --milo-lift-sm: 4px;
  --milo-lift-md: 4px;

  --milo-lift-neg-xs: -1px;
  --milo-lift-neg-sm: -2px;

  --milo-press-xs: 2px;
  --milo-shift-xs: 4px;

  --milo-underline-offset-body: -5px;
  --milo-underline-offset-nav: -10px;
  --milo-underline-offset-footer: -2px;

  --milo-outline-w: 2px;
  --milo-outline-offset: 4px;

  --milo-control-pad-y: 12px;
  --milo-control-pad-x: 22px;

  --milo-gap-stack-sm: var(--milo-space-xs);
  --milo-gap-inline-sm: var(--milo-space-xs);
  --milo-gap-inline-md: var(--milo-space-sm);

  --milo-header-h: 62px;
  --milo-header-h-tablet: 66px;
  --milo-header-h-mobile: 58px;

  --milo-header-pad-y: var(--milo-space-xs);
  --milo-header-pad-y-scrolled: var(--milo-space-2xs);

  --milo-header-h-scrolled: calc(
    var(--milo-header-h) -
      (2 * (var(--milo-header-pad-y) - var(--milo-header-pad-y-scrolled)))
  );

  --milo-header-h-scrolled-tablet: calc(
    var(--milo-header-h-tablet) -
      (2 * (var(--milo-header-pad-y) - var(--milo-header-pad-y-scrolled)))
  );

  --milo-header-h-scrolled-mobile: calc(
    var(--milo-header-h-mobile) -
      (2 * (var(--milo-header-pad-y) - var(--milo-header-pad-y-scrolled)))
  );
}
/* #endregion 17) UI COMPATIBILITY GEOMETRY */

/* #region 12) BREAKPOINT TOKEN OVERRIDES */
@media (max-width: 1200px) {
  :root {
    --milo-gutter: 28px;
    --milo-gap-grid: var(--milo-gutter);

    --milo-pad-fluid-top-sm: clamp(48px, 5vw, 72px);
    --milo-pad-fluid-bottom-sm: clamp(36px, 4vw, 56px);
    --milo-pad-fluid-top-md: clamp(72px, 7vw, 104px);
    --milo-pad-fluid-bottom-md: clamp(76px, 8vw, 108px);
    --milo-pad-fluid-top-lg: clamp(88px, 9vw, 124px);
    --milo-pad-fluid-bottom-lg: clamp(92px, 9vw, 132px);
    --milo-pad-fluid-top-xl: clamp(104px, 11vw, 152px);
    --milo-pad-fluid-bottom-xl: clamp(64px, 7vw, 96px);
    --milo-pad-fluid-top-2xl: clamp(120px, 13vw, 168px);
    --milo-pad-fluid-bottom-2xl: clamp(72px, 8vw, 108px);

    --milo-gap-fluid-xs: clamp(12px, 1.3vw, 18px);
    --milo-gap-fluid-sm: clamp(15px, 1.6vw, 20px);
    --milo-gap-fluid-md: clamp(22px, 2.2vw, 30px);
    --milo-gap-fluid-lg: clamp(30px, 2.8vw, 44px);
    --milo-gap-fluid-xl: clamp(36px, 3.5vw, 56px);
    --milo-gap-fluid-2xl: clamp(44px, 4.5vw, 76px);
    --milo-gap-fluid-3xl: clamp(52px, 5.2vw, 92px);
    --milo-gap-fluid-4xl: clamp(64px, 6.5vw, 112px);

    --milo-card-pad-2xs: clamp(10px, 1.2vw, 14px);
    --milo-card-pad-xs: clamp(12px, 1.3vw, 16px);
    --milo-card-pad-sm: clamp(15px, 1.6vw, 20px);
    --milo-card-pad-md: clamp(18px, 2vw, 24px);
    --milo-card-pad-lg: clamp(22px, 2.6vw, 30px);
    --milo-card-pad-xl: clamp(26px, 3.2vw, 36px);
    --milo-card-pad-2xl: clamp(30px, 3.8vw, 44px);

    --milo-offset-fluid-2xs: clamp(6px, 0.8vw, 10px);
    --milo-offset-fluid-xs: clamp(8px, 1vw, 12px);
    --milo-offset-fluid-sm: clamp(11px, 1.4vw, 16px);
    --milo-offset-fluid-md: clamp(15px, 1.8vw, 22px);
    --milo-offset-fluid-lg: clamp(22px, 2.5vw, 30px);
    --milo-offset-fluid-xl: clamp(28px, 3.2vw, 40px);
    --milo-offset-fluid-2xl: clamp(36px, 4vw, 48px);

    --milo-section-pad-fluid: clamp(64px, 6vw, var(--milo-section-pad));

    --milo-logo-h-featured: 68px;
    --milo-logo-h-client: 54px;
  }
}

@media (max-width: 1024px) {
  :root {
    --milo-grid-min: var(--milo-grid-min-md);
    --milo-gutter: var(--milo-gutter-tablet);
    --milo-gap-grid: var(--milo-gutter);

    --milo-section-pad: var(--milo-section-pad-tablet);
    --milo-section-pad-fluid: clamp(64px, 6vw, var(--milo-section-pad));

    --milo-pad-fluid-top-sm: clamp(42px, 5vw, 64px);
    --milo-pad-fluid-bottom-sm: clamp(32px, 4vw, 48px);
    --milo-pad-fluid-top-md: clamp(64px, 7vw, 92px);
    --milo-pad-fluid-bottom-md: clamp(68px, 7vw, 96px);
    --milo-pad-fluid-top-lg: clamp(72px, 8vw, 108px);
    --milo-pad-fluid-bottom-lg: clamp(76px, 8vw, 112px);
    --milo-pad-fluid-top-xl: clamp(88px, 10vw, 128px);
    --milo-pad-fluid-bottom-xl: clamp(56px, 7vw, 84px);
    --milo-pad-fluid-top-2xl: clamp(96px, 11vw, 144px);
    --milo-pad-fluid-bottom-2xl: clamp(68px, 8vw, 108px);

    --milo-gap-fluid-xs: clamp(10px, 1.6vw, 16px);
    --milo-gap-fluid-sm: clamp(14px, 1.8vw, 18px);
    --milo-gap-fluid-md: clamp(18px, 2.2vw, 26px);
    --milo-gap-fluid-lg: clamp(24px, 2.8vw, 36px);
    --milo-gap-fluid-xl: clamp(32px, 3.4vw, 48px);
    --milo-gap-fluid-2xl: clamp(40px, 4.2vw, 64px);
    --milo-gap-fluid-3xl: clamp(48px, 5vw, 80px);
    --milo-gap-fluid-4xl: clamp(56px, 6vw, 96px);

    --milo-card-pad-2xs: clamp(8px, 1.4vw, 12px);
    --milo-card-pad-xs: clamp(10px, 1.6vw, 14px);
    --milo-card-pad-sm: clamp(14px, 1.8vw, 18px);
    --milo-card-pad-md: clamp(16px, 2vw, 22px);
    --milo-card-pad-lg: clamp(20px, 2.6vw, 28px);
    --milo-card-pad-xl: clamp(24px, 3vw, 34px);
    --milo-card-pad-2xl: clamp(28px, 3.6vw, 40px);

    --milo-offset-fluid-2xs: clamp(5px, 1vw, 8px);
    --milo-offset-fluid-xs: clamp(7px, 1.2vw, 10px);
    --milo-offset-fluid-sm: clamp(10px, 1.5vw, 14px);
    --milo-offset-fluid-md: clamp(14px, 1.8vw, 20px);
    --milo-offset-fluid-lg: clamp(18px, 2.3vw, 26px);
    --milo-offset-fluid-xl: clamp(24px, 2.8vw, 34px);
    --milo-offset-fluid-2xl: clamp(30px, 3.5vw, 44px);

    --milo-body-indent: var(--milo-indent-sm);
    --milo-body-indent-loose: var(--milo-indent-md);

    --milo-media-inset: var(--milo-offset-sm);
    --milo-rail-offset-loose: var(--milo-indent-sm);

    --milo-inner-tight-offset: var(--milo-inner-tight-offset-tablet);
    --milo-gutter-tight-offset: var(--milo-gutter-tight-offset-tablet);

    --milo-logo-h-featured: 64px;
    --milo-logo-h-client: 52px;
  }
}

@media (max-width: 768px) {
  :root {
    --milo-grid-min: var(--milo-grid-min-sm);
    --milo-gutter: var(--milo-gutter-mobile);
    --milo-gap-grid: var(--milo-gutter);

    --milo-section-pad: var(--milo-section-pad-mobile);
    --milo-section-pad-tight: var(--milo-section-pad-tight-mobile);
    --milo-section-pad-fluid: clamp(52px, 8vw, var(--milo-section-pad));

    --milo-pad-fluid-top-sm: clamp(36px, 6vw, 52px);
    --milo-pad-fluid-bottom-sm: clamp(28px, 5vw, 40px);
    --milo-pad-fluid-top-md: clamp(48px, 7vw, 72px);
    --milo-pad-fluid-bottom-md: clamp(52px, 7vw, 76px);
    --milo-pad-fluid-top-lg: clamp(56px, 8vw, 84px);
    --milo-pad-fluid-bottom-lg: clamp(60px, 8vw, 88px);
    --milo-pad-fluid-top-xl: clamp(64px, 9vw, 96px);
    --milo-pad-fluid-bottom-xl: clamp(44px, 7vw, 68px);
    --milo-pad-fluid-top-2xl: clamp(76px, 10vw, 120px);
    --milo-pad-fluid-bottom-2xl: clamp(52px, 7vw, 88px);

    --milo-gap-fluid-xs: clamp(8px, 2vw, 14px);
    --milo-gap-fluid-sm: clamp(10px, 2.4vw, 16px);
    --milo-gap-fluid-md: clamp(14px, 2.8vw, 20px);
    --milo-gap-fluid-lg: clamp(18px, 3.2vw, 28px);
    --milo-gap-fluid-xl: clamp(24px, 4vw, 36px);
    --milo-gap-fluid-2xl: clamp(32px, 5vw, 48px);
    --milo-gap-fluid-3xl: clamp(40px, 6vw, 64px);
    --milo-gap-fluid-4xl: clamp(48px, 7vw, 80px);

    --milo-card-pad-2xs: clamp(6px, 2vw, 10px);
    --milo-card-pad-xs: clamp(8px, 2.2vw, 12px);
    --milo-card-pad-sm: clamp(10px, 2.6vw, 14px);
    --milo-card-pad-md: clamp(14px, 3vw, 18px);
    --milo-card-pad-lg: clamp(18px, 3.6vw, 24px);
    --milo-card-pad-xl: clamp(20px, 4vw, 28px);
    --milo-card-pad-2xl: clamp(24px, 4.6vw, 34px);

    --milo-offset-fluid-2xs: clamp(4px, 1.4vw, 6px);
    --milo-offset-fluid-xs: clamp(6px, 1.8vw, 8px);
    --milo-offset-fluid-sm: clamp(8px, 2.2vw, 12px);
    --milo-offset-fluid-md: clamp(10px, 2.6vw, 16px);
    --milo-offset-fluid-lg: clamp(14px, 3vw, 22px);
    --milo-offset-fluid-xl: clamp(18px, 3.8vw, 28px);
    --milo-offset-fluid-2xl: clamp(24px, 4.6vw, 34px);

    --milo-body-indent: var(--milo-indent-xs);
    --milo-body-indent-tight: var(--milo-indent-xs);
    --milo-body-indent-loose: var(--milo-indent-sm);

    --milo-rule-offset: var(--milo-offset-xs);
    --milo-rule-offset-loose: var(--milo-offset-sm);

    --milo-media-inset: var(--milo-offset-xs);
    --milo-media-inset-tight: var(--milo-offset-xs);

    --milo-rail-offset: var(--milo-indent-xs);
    --milo-rail-offset-loose: var(--milo-indent-sm);

    --milo-inner-tight-offset: var(--milo-inner-tight-offset-mobile);
    --milo-gutter-tight-offset: var(--milo-gutter-tight-offset-mobile);

    --milo-logo-h-featured: 56px;
    --milo-logo-h-client: 46px;
  }
}

@media (max-width: 480px) {
  :root {
    --milo-gutter: 16px;
    --milo-gap-grid: var(--milo-gutter);

    --milo-section-pad: 56px;
    --milo-section-pad-tight: 44px;
    --milo-section-pad-fluid: clamp(40px, 9vw, var(--milo-section-pad));

    --milo-pad-fluid-top-sm: clamp(28px, 7vw, 40px);
    --milo-pad-fluid-bottom-sm: clamp(22px, 6vw, 32px);
    --milo-pad-fluid-top-md: clamp(40px, 8vw, 60px);
    --milo-pad-fluid-bottom-md: clamp(44px, 8vw, 64px);
    --milo-pad-fluid-top-lg: clamp(48px, 9vw, 72px);
    --milo-pad-fluid-bottom-lg: clamp(52px, 9vw, 76px);
    --milo-pad-fluid-top-xl: clamp(52px, 10vw, 80px);
    --milo-pad-fluid-bottom-xl: clamp(36px, 8vw, 56px);
    --milo-pad-fluid-top-2xl: clamp(64px, 11vw, 96px);
    --milo-pad-fluid-bottom-2xl: clamp(44px, 8vw, 64px);

    --milo-gap-fluid-xs: clamp(6px, 2.2vw, 12px);
    --milo-gap-fluid-sm: clamp(8px, 2.6vw, 14px);
    --milo-gap-fluid-md: clamp(12px, 3vw, 18px);
    --milo-gap-fluid-lg: clamp(16px, 3.6vw, 24px);
    --milo-gap-fluid-xl: clamp(20px, 4.2vw, 30px);
    --milo-gap-fluid-2xl: clamp(28px, 5vw, 40px);
    --milo-gap-fluid-3xl: clamp(32px, 5.8vw, 52px);
    --milo-gap-fluid-4xl: clamp(40px, 6.6vw, 64px);

    --milo-card-pad-2xs: clamp(6px, 2.2vw, 8px);
    --milo-card-pad-xs: clamp(6px, 2.4vw, 10px);
    --milo-card-pad-sm: clamp(8px, 2.8vw, 12px);
    --milo-card-pad-md: clamp(10px, 3.2vw, 14px);
    --milo-card-pad-lg: clamp(14px, 3.8vw, 18px);
    --milo-card-pad-xl: clamp(16px, 4.2vw, 22px);
    --milo-card-pad-2xl: clamp(20px, 4.8vw, 28px);

    --milo-offset-fluid-2xs: clamp(3px, 1.6vw, 5px);
    --milo-offset-fluid-xs: clamp(4px, 2vw, 6px);
    --milo-offset-fluid-sm: clamp(6px, 2.4vw, 10px);
    --milo-offset-fluid-md: clamp(8px, 2.8vw, 12px);
    --milo-offset-fluid-lg: clamp(10px, 3.2vw, 16px);
    --milo-offset-fluid-xl: clamp(14px, 3.8vw, 22px);
    --milo-offset-fluid-2xl: clamp(18px, 4.4vw, 28px);

    --milo-copy-nudge: var(--milo-offset-2xs);
    --milo-copy-nudge-loose: var(--milo-offset-xs);

    --milo-rule-offset: var(--milo-offset-2xs);
    --milo-rule-offset-loose: var(--milo-offset-xs);

    --milo-logo-h-featured: 48px;
    --milo-logo-h-client: 40px;
  }
}
/* #endregion 12) BREAKPOINT TOKEN OVERRIDES */