/* =========================================================
   MILO PAGE: ABOUT
   File: milo-page-about.css
   Layer: 04-pages
   Scope: About page modules only

   Owns:
   - Hero
   - Story
   - Philosophy
   - Difference
   - About-specific tuning for shared modules:
     * milo-who
     * milo-credibility
     * milo-cta

   Notes:
   - Assumes global milo-motion.css reveal system is active
   - Assumes shared modules load before this page file
   - Current DOM uses:
     * .milo-page-about__hero
     * .milo-page-about__story
     * .milo-page-about__philosophy
     * .milo-page-about__difference
     * .milo-about-difference__dek
========================================================= */

/* #region 0) ABOUT PAGE TOKENS */
.milo-page-about {
  /* #region Section padding */
  --milo-about-hero-pad-top: var(--milo-pad-fluid-top-lg);
  --milo-about-hero-pad-bottom: var(--milo-pad-fluid-bottom-lg);

  --milo-about-story-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-about-story-pad-bottom: var(--milo-pad-fluid-bottom-sm);

  --milo-about-philosophy-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-about-philosophy-pad-bottom: var(--milo-pad-fluid-bottom-md);

  --milo-about-difference-pad-top: var(--milo-pad-fluid-top-lg);
  --milo-about-difference-pad-bottom: var(--milo-pad-fluid-bottom-lg);

  --milo-about-who-pad-top: var(--milo-pad-fluid-top-md);
  --milo-about-who-pad-bottom: var(--milo-pad-fluid-bottom-md);

  --milo-about-credibility-pad-top: var(--milo-pad-fluid-top-md);
  --milo-about-credibility-pad-bottom: var(--milo-pad-fluid-bottom-md);
  /* #endregion Section padding */

  /* #region Grid layout */
  --milo-about-story-grid-ratio-a: 0.92fr;
  --milo-about-story-grid-ratio-b: 1.08fr;

  --milo-about-philosophy-grid-columns: repeat(3, minmax(0, 1fr));
  --milo-about-philosophy-grid-columns-1200: repeat(2, minmax(0, 1fr));
  --milo-about-philosophy-grid-columns-mobile: 1fr;

  --milo-about-difference-grid-ratio-a: 0.9fr;
  --milo-about-difference-grid-ratio-b: 1.1fr;
  /* #endregion Grid layout */

  /* #region Responsive card layout */
  --milo-about-philosophy-last-card-span: 1 / -1;
  --milo-about-philosophy-last-card-max-width: 100%;
  --milo-about-philosophy-last-card-margin-top-1200: clamp(-30px, -3vw, -50px);
  --milo-about-philosophy-last-card-margin-top-1024: clamp(-40px, -3vw, -60px);
  --milo-about-philosophy-last-card-margin-top-mobile: 0;

  --milo-about-philosophy-card-width-mobile: 100%;
  --milo-about-difference-card-max-width-1024: 100%;
  /* #endregion Responsive card layout */

  /* #region Story */
  --milo-about-story-media-shift-y: 14px;
  --milo-about-story-media-shift-y-1200: 10px;
  --milo-about-story-media-shift-y-1024: 0px;

  --milo-about-story-media-overlay-background: var(--milo-media-frame-overlay);
  --milo-about-story-media-overlay-opacity: 0.28;
  --milo-about-story-media-border-radius: 18px;
  --milo-about-story-media-aspect-ratio: 5 / 4;
  --milo-about-story-rule-background: var(--milo-divider-soft);
  --milo-about-story-rule-opacity: 0.9;
  --milo-about-story-rule-width: 56px;
  --milo-about-story-paragraph-gap: var(--milo-gap-fluid-lg);
  --milo-about-story-paragraph-indent: var(--milo-indent-xs);
  --milo-about-story-media-max-width: 540px;
  --milo-about-story-media-max-height: 450px;
  /* #endregion Story */

  /* #region Interaction */
  --milo-about-card-group-dim-opacity: 0.82;
  --milo-about-difference-card-hover-translate-y: -3px;
  /* #endregion Interaction */

  /* #region Grid spacing */
  --milo-about-story-grid-column-gap: var(--milo-gap-fluid-lg);
  --milo-about-story-grid-row-gap: var(--milo-gap-fluid-2xl);

  --milo-about-philosophy-grid-column-gap: var(--milo-gap-fluid-2xl);
  --milo-about-philosophy-grid-row-gap: var(--milo-gap-fluid-3xl);

  --milo-about-difference-grid-column-gap: var(--milo-gap-fluid-3xl);
  --milo-about-difference-grid-row-gap: var(--milo-gap-fluid-2xl);
  /* #endregion Grid spacing */

  /* #region Text measures */
  --milo-about-intro-title-max: var(--milo-measure-24);
  --milo-about-intro-subline-max: var(--milo-measure-38);
  --milo-about-card-title-max: var(--milo-measure-16);
  --milo-about-card-body-max: var(--milo-measure-44);
  /* #endregion Text measures */

  /* #region Intro spacing */
  --milo-about-intro-gap: var(--milo-gap-fluid-lg);
  --milo-about-intro-margin-bottom: var(--milo-offset-fluid-lg);
  /* #endregion Intro spacing */

  /* #region Card styling */
  --milo-about-card-label-letter-spacing: 0.2em;
  --milo-about-card-label-opacity: 0.52;
  --milo-about-card-padding: var(--milo-card-pad-md) var(--milo-card-pad-md)
    var(--milo-card-pad-sm);
  /* #endregion Card styling */

  /* #region Philosophy cards */
  --milo-about-philosophy-card-rule: var(--milo-divider);
  --milo-about-philosophy-card-rule-opacity: 0.6;
  --milo-about-philosophy-item-body-indent: var(--milo-indent-sm);
  --milo-about-philosophy-subline-indent-1024: var(--milo-indent-xs);
  /* #endregion Philosophy cards */

  /* #region Difference cards */
  --milo-about-difference-cards-gap: var(--milo-gap-fluid-md);
  --milo-about-difference-cards-max-width: 85%;
  --milo-about-difference-card-rule-top: 20px;
  --milo-about-difference-card-rule-left: 16px;
  --milo-about-difference-card-rule-height: 52px;
  --milo-about-difference-card-rule-background: var(--milo-divider);
  /* #endregion Difference cards */

  /* #region Reveal defaults */
  --milo-about-reveal-y-base: 10px;
  --milo-about-reveal-blur-base: 3px;

  --milo-about-reveal-y-copy: 8px;
  --milo-about-reveal-blur-copy: 2px;

  --milo-about-reveal-y-label: 6px;
  --milo-about-reveal-blur-label: 1.5px;

  --milo-about-reveal-y-media: 12px;
  --milo-about-reveal-blur-media: 3px;

  --milo-about-reveal-y-card: 10px;
  --milo-about-reveal-blur-card: 2.5px;
  /* #endregion Reveal defaults */

  /* #region Reveal delays */
  --milo-about-delay-0: 0ms;
  --milo-about-delay-1: 20ms;
  --milo-about-delay-2: 50ms;
  --milo-about-delay-3: 80ms;
  --milo-about-delay-4: 90ms;
  --milo-about-delay-5: 100ms;
  --milo-about-delay-6: 140ms;
  --milo-about-delay-7: 160ms;
  --milo-about-delay-8: 220ms;
  /* #endregion Reveal delays */
}
/* #endregion 0) ABOUT PAGE TOKENS */

/* #region 0.5) ABOUT PAGE REVEAL CASCADE */

/* #region Motion defaults */
.milo-page-about .milo-reveal {
  --milo-delay: var(--milo-about-delay-0);
  --milo-reveal-y: var(--milo-about-reveal-y-base);
  --milo-reveal-blur: var(--milo-about-reveal-blur-base);
}

.milo-page-about .milo-h1.milo-reveal,
.milo-page-about .milo-h2.milo-reveal,
.milo-page-about .milo-h3.milo-reveal,
.milo-page-about .milo-h4.milo-reveal,
.milo-page-about .milo-heading-group.milo-reveal,
.milo-page-about .milo-body.milo-reveal,
.milo-page-about .elementor-widget-text-editor.milo-reveal,
.milo-page-about .milo-heading-subline.milo-reveal,
.milo-page-about .milo-about-difference__dek.milo-reveal {
  --milo-reveal-y: var(--milo-about-reveal-y-copy);
  --milo-reveal-blur: var(--milo-about-reveal-blur-copy);
}

.milo-page-about .milo-media-frame.milo-reveal,
.milo-page-about .milo-page-about__story-media.milo-reveal {
  --milo-reveal-y: var(--milo-about-reveal-y-media);
  --milo-reveal-blur: var(--milo-about-reveal-blur-media);
}

.milo-page-about .milo-page-about__philosophy-card.milo-reveal,
.milo-page-about .milo-page-about__difference-card.milo-reveal {
  --milo-reveal-y: var(--milo-about-reveal-y-card);
  --milo-reveal-blur: var(--milo-about-reveal-blur-card);
}
/* #endregion Motion defaults */

/* #region HERO */
.milo-page-about .milo-hero__label.milo-reveal {
  --milo-delay: var(--milo-about-delay-0);
  --milo-reveal-y: var(--milo-about-reveal-y-label);
  --milo-reveal-blur: var(--milo-about-reveal-blur-label);
}

.milo-page-about .milo-hero__title.milo-reveal {
  --milo-delay: var(--milo-about-delay-2);
}

.milo-page-about .milo-hero__subline.milo-reveal {
  --milo-delay: var(--milo-about-delay-5);
}
/* #endregion HERO */

/* #region STORY */
.milo-page-about .milo-page-about__story-label.milo-reveal {
  --milo-delay: var(--milo-about-delay-0);
  --milo-reveal-y: var(--milo-about-reveal-y-label);
  --milo-reveal-blur: var(--milo-about-reveal-blur-label);
}

.milo-page-about .milo-page-about__story-title.milo-reveal {
  --milo-delay: var(--milo-about-delay-2);
}

.milo-page-about .milo-page-about__story-subline.milo-reveal {
  --milo-delay: var(--milo-about-delay-5);
}

.milo-page-about .milo-page-about__story-media.milo-reveal {
  --milo-delay: var(--milo-about-delay-6);
}
/* #endregion STORY */

/* #region PHILOSOPHY */
.milo-page-about .milo-page-about__philosophy-label.milo-reveal {
  --milo-delay: var(--milo-about-delay-0);
  --milo-reveal-y: var(--milo-about-reveal-y-label);
  --milo-reveal-blur: var(--milo-about-reveal-blur-label);
}

.milo-page-about .milo-page-about__philosophy-title.milo-reveal {
  --milo-delay: var(--milo-about-delay-2);
}

.milo-page-about .milo-page-about__philosophy-subline.milo-reveal {
  --milo-delay: var(--milo-about-delay-5);
}

.milo-page-about
  .milo-page-about__philosophy-grid
  > .milo-page-about__philosophy-card.milo-reveal:nth-child(1) {
  --milo-delay: var(--milo-about-delay-1);
}

.milo-page-about
  .milo-page-about__philosophy-grid
  > .milo-page-about__philosophy-card.milo-reveal:nth-child(2) {
  --milo-delay: var(--milo-about-delay-3);
}

.milo-page-about
  .milo-page-about__philosophy-grid
  > .milo-page-about__philosophy-card.milo-reveal:nth-child(3) {
  --milo-delay: var(--milo-about-delay-6);
}
/* #endregion PHILOSOPHY */

/* #region DIFFERENCE */
.milo-page-about .milo-page-about__difference-label.milo-reveal {
  --milo-delay: var(--milo-about-delay-0);
  --milo-reveal-y: var(--milo-about-reveal-y-label);
  --milo-reveal-blur: var(--milo-about-reveal-blur-label);
}

.milo-page-about .milo-page-about__difference-title.milo-reveal {
  --milo-delay: var(--milo-about-delay-2);
}

.milo-page-about .milo-page-about__difference-subline.milo-reveal {
  --milo-delay: var(--milo-about-delay-5);
}

.milo-page-about
  .milo-page-about__difference-cards
  > .milo-page-about__difference-card.milo-reveal:nth-child(1) {
  --milo-delay: var(--milo-about-delay-1);
}

.milo-page-about
  .milo-page-about__difference-cards
  > .milo-page-about__difference-card.milo-reveal:nth-child(2) {
  --milo-delay: var(--milo-about-delay-4);
}

.milo-page-about
  .milo-page-about__difference-cards
  > .milo-page-about__difference-card.milo-reveal:nth-child(3) {
  --milo-delay: var(--milo-about-delay-7);
}
/* #endregion DIFFERENCE */

/* #region WHO */
.milo-page-about .milo-page-about__who .milo-reveal {
  --milo-delay: var(--milo-about-delay-0);
  --milo-reveal-y: var(--milo-about-reveal-y-media);
  --milo-reveal-blur: var(--milo-about-reveal-blur-card);
}
/* #endregion WHO */

/* #region CREDIBILITY */
.milo-page-about .milo-page-about__credibility .milo-reveal {
  --milo-delay: var(--milo-about-delay-0);
  --milo-reveal-y: var(--milo-about-reveal-y-copy);
  --milo-reveal-blur: var(--milo-about-reveal-blur-copy);
}
/* #endregion CREDIBILITY */

/* #region CTA */
.milo-page-about .milo-page-about__cta .milo-cta__head.milo-reveal {
  --milo-delay: var(--milo-about-delay-0);
  --milo-reveal-y: var(--milo-about-reveal-y-copy);
  --milo-reveal-blur: var(--milo-about-reveal-blur-copy);
}

.milo-page-about .milo-page-about__cta .milo-cta__subline.milo-reveal {
  --milo-delay: var(--milo-about-delay-3);
  --milo-reveal-y: var(--milo-about-reveal-y-copy);
  --milo-reveal-blur: var(--milo-about-reveal-blur-copy);
}

.milo-page-about .milo-page-about__cta .milo-cta__btn.milo-reveal {
  --milo-delay: var(--milo-about-delay-7);
  --milo-reveal-y: var(--milo-about-reveal-y-base);
  --milo-reveal-blur: var(--milo-about-reveal-blur-copy);
}

.milo-page-about
  .milo-page-about__cta
  .milo-cta__link.milo-reveal:last-of-type {
  --milo-delay: var(--milo-about-delay-8);
  --milo-reveal-y: var(--milo-about-reveal-y-copy);
  --milo-reveal-blur: var(--milo-about-reveal-blur-copy);
}
/* #endregion CTA */

/* #endregion 0.5) ABOUT PAGE REVEAL CASCADE */

/* #region 1) PAGE SHELL */
.milo-page-about .milo-section {
  position: relative;
  overflow: clip;
}

.milo-page-about .milo-inner {
  position: relative;
  z-index: 1;
}

.milo-page-about .milo-page-about__story-intro,
.milo-page-about .milo-page-about__philosophy-intro,
.milo-page-about .milo-page-about__difference-intro {
  gap: var(--milo-about-intro-gap);
  padding-bottom: var(--milo-about-intro-margin-bottom);
}

.milo-page-about .milo-page-about__story-title h2,
.milo-page-about .milo-page-about__philosophy-title h2,
.milo-page-about .milo-page-about__difference-title h2 {
  max-width: var(--milo-about-intro-title-max);
}

.milo-page-about .milo-page-about__story-subline p,
.milo-page-about .milo-page-about__philosophy-subline p,
.milo-page-about .milo-page-about__difference-subline p {
  max-width: var(--milo-about-intro-subline-max);
}

.milo-page-about .milo-page-about__philosophy-card-label,
.milo-page-about .milo-page-about__difference-card-label {
  opacity: var(--milo-about-card-label-opacity);
  letter-spacing: var(--milo-about-card-label-letter-spacing);
}

.milo-page-about .milo-page-about__philosophy-card-title h3,
.milo-page-about .milo-page-about__difference-card-title h3 {
  max-width: var(--milo-about-card-title-max);
}

.milo-page-about .milo-page-about__philosophy-card-body p,
.milo-page-about .milo-page-about__difference-card-body p {
  max-width: var(--milo-about-card-body-max);
}
/* #endregion 1) PAGE SHELL */

/* #region 2) HERO */
.milo-page-about .milo-page-about__hero {
  --milo-section-pad-top: var(--milo-about-hero-pad-top);
  --milo-section-pad-bottom: var(--milo-about-hero-pad-bottom);

  --milo-section-bg: var(--milo-bg-hero);
  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-section-surface-hero);
}
/* #endregion 2) HERO */

/* #region 3) STORY */
.milo-page-about .milo-page-about__story {
  --milo-section-pad-top: var(--milo-about-story-pad-top);
  --milo-section-pad-bottom: var(--milo-about-story-pad-bottom);
  --milo-section-bg: var(--milo-bg-base);
}

.milo-page-about .milo-page-about__story-grid {
  --milo-grid-ratio-a: var(--milo-about-story-grid-ratio-a);
  --milo-grid-ratio-b: var(--milo-about-story-grid-ratio-b);
  align-items: center;
  column-gap: var(--milo-about-story-grid-column-gap);
  row-gap: var(--milo-about-story-grid-row-gap);
}

.milo-page-about .milo-page-about__story-subline p + p {
  padding-top: var(--milo-about-story-paragraph-gap);
  padding-left: var(--milo-about-story-paragraph-indent);
}

.milo-page-about .milo-page-about__story-lead::after {
  content: "";
  display: block;
  width: var(--milo-about-story-rule-width);
  height: 1px;
  background: var(--milo-about-story-rule-background);
  opacity: var(--milo-about-story-rule-opacity);
}

.milo-page-about .milo-page-about__story-media {
  max-width: var(--milo-about-story-media-max-width);
  transform: translateY(var(--milo-about-story-media-shift-y));
}

.milo-page-about .milo-page-about__story-media img {
  aspect-ratio: var(--milo-about-story-media-aspect-ratio);
  border-radius: var(--milo-about-story-media-border-radius);
}

.milo-page-about .milo-page-about__story-media::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--milo-about-story-media-overlay-background);
  opacity: var(--milo-about-story-media-overlay-opacity);
}
/* #endregion 3) STORY */

/* #region 4) PHILOSOPHY */
.milo-page-about .milo-page-about__philosophy {
  --milo-section-pad-top: var(--milo-about-philosophy-pad-top);
  --milo-section-pad-bottom: var(--milo-about-philosophy-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
}

.milo-page-about .milo-page-about__philosophy-grid {
  grid-template-columns: var(--milo-about-philosophy-grid-columns);
  align-items: start;
  column-gap: var(--milo-about-philosophy-grid-column-gap);
  row-gap: var(--milo-about-philosophy-grid-row-gap);
}

.milo-page-about .milo-page-about__philosophy-card {
  width: 100%;
  padding: var(--milo-about-card-padding);
}
/* #endregion 4) PHILOSOPHY */

/* #region 5) DIFFERENCE */
.milo-page-about .milo-page-about__difference {
  --milo-section-pad-top: var(--milo-about-difference-pad-top);
  --milo-section-pad-bottom: var(--milo-about-difference-pad-bottom);
  --milo-section-bg: var(--milo-bg-lift);
}

.milo-page-about .milo-page-about__difference-grid {
  --milo-grid-ratio-a: var(--milo-about-difference-grid-ratio-a);
  --milo-grid-ratio-b: var(--milo-about-difference-grid-ratio-b);
  align-items: start;
  column-gap: var(--milo-about-difference-grid-column-gap);
  row-gap: var(--milo-about-difference-grid-row-gap);
}

.milo-page-about .milo-page-about__difference-cards {
  max-width: var(--milo-about-difference-cards-max-width);
  gap: var(--milo-about-difference-cards-gap);
}

.milo-page-about .milo-page-about__difference-card {
  width: 100%;
  padding: var(--milo-about-card-padding);
}

.milo-page-about .milo-page-about__difference-card::before {
  content: "";
  position: absolute;
  top: var(--milo-about-difference-card-rule-top);
  left: var(--milo-about-difference-card-rule-left);
  width: 1px;
  height: var(--milo-about-difference-card-rule-height);
  background: var(--milo-about-difference-card-rule-background);
}
/* #endregion 5) DIFFERENCE */

/* #region 6) WHO */
.milo-page-about .milo-page-about__who {
  --milo-section-pad-top: var(--milo-about-who-pad-top);
  --milo-section-pad-bottom: var(--milo-about-who-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
}
/* #endregion 6) WHO */

/* #region 7) CREDIBILITY */
.milo-page-about .milo-page-about__credibility {
  --milo-section-pad-top: var(--milo-about-credibility-pad-top);
  --milo-section-pad-bottom: var(--milo-about-credibility-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
}
/* #endregion 7) CREDIBILITY */

/* #region 8) CTA */
.milo-page-about .milo-page-about__cta {
  --milo-section-bg: var(--milo-section-surface-cta);
  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-section-light-cta);
}
/* #endregion 8) CTA */

/* #region 9) INTERACTION */
@media (hover: hover) and (pointer: fine) {
  .milo-page-about
    .milo-page-about__philosophy-grid:hover
    .milo-page-about__philosophy-card,
  .milo-page-about
    .milo-page-about__difference-cards:hover
    .milo-page-about__difference-card {
    opacity: var(--milo-about-card-group-dim-opacity);
  }

  .milo-page-about .milo-page-about__philosophy-card:hover,
  .milo-page-about .milo-page-about__difference-card:hover {
    opacity: 1;
  }

  .milo-page-about .milo-page-about__difference-card:hover {
    transform: translateY(var(--milo-about-difference-card-hover-translate-y));
  }
}
/* #endregion 8) INTERACTION */

/* #region 10) RESPONSIVE */
@media (max-width: 1199.98px) {
  .milo-page-about {
    --milo-about-intro-title-max: var(--milo-measure-24);
    --milo-about-intro-subline-max: var(--milo-measure-40);
    --milo-about-card-title-max: var(--milo-measure-20);
    --milo-about-card-body-max: var(--milo-measure-32);

    --milo-about-story-media-max-width: 500px;
    --milo-about-story-media-shift-y: var(
      --milo-about-story-media-shift-y-1200
    );

    --milo-about-difference-cards-max-width: 92%;

    --milo-about-difference-card-rule-top: 18px;
    --milo-about-difference-card-rule-left: 14px;
    --milo-about-difference-card-rule-height: 48px;

    --milo-about-story-paragraph-indent: var(--milo-indent-2xs);

    --milo-about-philosophy-grid-columns: var(
      --milo-about-philosophy-grid-columns-1200
    );

    --milo-about-philosophy-last-card-margin-top: var(
      --milo-about-philosophy-last-card-margin-top-1200
    );
  }

  .milo-page-about
    .milo-page-about__philosophy-grid
    > .milo-page-about__philosophy-card:last-child {
    grid-column: var(--milo-about-philosophy-last-card-span);
    max-width: var(--milo-about-philosophy-last-card-max-width);
    margin-top: var(--milo-about-philosophy-last-card-margin-top);
  }
}

@media (max-width: 1024px) {
  .milo-page-about {
    --milo-about-intro-title-max: var(--milo-measure-20);
    --milo-about-intro-subline-max: var(--milo-measure-34);
    --milo-about-card-title-max: var(--milo-measure-20);
    --milo-about-card-body-max: var(--milo-measure-32);

    --milo-about-difference-cards-max-width: 100%;

    --milo-about-difference-card-rule-top: 18px;
    --milo-about-difference-card-rule-left: 14px;
    --milo-about-difference-card-rule-height: 46px;

    --milo-about-story-paragraph-gap: var(--milo-gap-fluid-md);
    --milo-about-story-paragraph-indent: 0;
    --milo-about-story-media-max-width: 100%;

    --milo-about-story-media-shift-y: var(
      --milo-about-story-media-shift-y-1024
    );
    --milo-about-philosophy-last-card-margin-top: var(
      --milo-about-philosophy-last-card-margin-top-1024
    );
  }

  .milo-page-about .milo-page-about__difference-card {
    max-width: var(--milo-about-difference-card-max-width-1024);
  }
}

@media (max-width: 767.98px) {
  .milo-page-about {
    --milo-about-intro-title-max: var(--milo-measure-24);
    --milo-about-intro-subline-max: var(--milo-measure-38);
    --milo-about-card-title-max: var(--milo-measure-20);
    --milo-about-card-body-max: var(--milo-measure-38);

    --milo-about-story-rule-width: 44px;

    --milo-about-difference-card-rule-top: 18px;
    --milo-about-difference-card-rule-left: 12px;
    --milo-about-difference-card-rule-height: 44px;

    --milo-about-philosophy-grid-columns: var(
      --milo-about-philosophy-grid-columns-mobile
    );

    --milo-about-philosophy-last-card-margin-top: var(
      --milo-about-philosophy-last-card-margin-top-mobile
    );
  }

  .milo-page-about .milo-page-about__philosophy-card {
    width: var(--milo-about-philosophy-card-width-mobile);
  }

  .milo-page-about .milo-page-about__difference-card:hover {
    transform: none;
  }
}

@media (max-width: 479.98px) {
  .milo-page-about {
    --milo-about-intro-title-max: var(--milo-measure-14);
    --milo-about-intro-subline-max: 90%;
    --milo-about-card-title-max: var(--milo-measure-14);
    --milo-about-card-body-max: var(--milo-measure-28);

    --milo-about-story-rule-width: 36px;
    --milo-about-card-label-letter-spacing: 0.16em;

    --milo-about-difference-card-rule-top: 16px;
    --milo-about-difference-card-rule-left: 10px;
    --milo-about-difference-card-rule-height: 38px;

    --milo-about-story-paragraph-gap: var(--milo-gap-fluid-sm);
  }
}
/* #endregion 9) RESPONSIVE */

/* #region 11) ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  .milo-page-about {
    --milo-about-reveal-y-base: 0px;
    --milo-about-reveal-blur-base: 0px;

    --milo-about-reveal-y-copy: 0px;
    --milo-about-reveal-blur-copy: 0px;

    --milo-about-reveal-y-label: 0px;
    --milo-about-reveal-blur-label: 0px;

    --milo-about-reveal-y-media: 0px;
    --milo-about-reveal-blur-media: 0px;

    --milo-about-reveal-y-card: 0px;
    --milo-about-reveal-blur-card: 0px;

    --milo-about-delay-0: 0ms;
    --milo-about-delay-1: 0ms;
    --milo-about-delay-2: 0ms;
    --milo-about-delay-3: 0ms;
    --milo-about-delay-4: 0ms;
    --milo-about-delay-5: 0ms;
    --milo-about-delay-6: 0ms;
    --milo-about-delay-7: 0ms;
    --milo-about-delay-8: 0ms;
  }

  .milo-page-about .milo-page-about__difference-card,
  .milo-page-about .milo-page-about__story-media,
  .milo-page-about .milo-card,
  .milo-page-about .milo-media-frame,
  .milo-page-about .milo-reveal {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .milo-page-about
    .milo-page-about__philosophy-grid:hover
    .milo-page-about__philosophy-card,
  .milo-page-about
    .milo-page-about__difference-cards:hover
    .milo-page-about__difference-card {
    opacity: 1 !important;
  }
}
/* #endregion 10) ACCESSIBILITY */