/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-page-approach.css
   Layer: 04-pages
   Scope: Approach page only

   Owns:
   - Hero
   - Philosophy
   - Method
   - Process
   - Page-specific tuning for shared motion and card behavior

   Notes:
   - Assumes global hero, grid, stack, card, motion, and token layers exist
   - Keeps responsive easing at:
     * 1199.98px
     * 1024px
     * 767.98px
     * 479.98px
========================================================= */

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

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

  --milo-approach-method-pad-top: var(--milo-pad-fluid-top-md);
  --milo-approach-method-pad-bottom: var(--milo-pad-fluid-bottom-md);

  --milo-approach-process-pad-top: var(--milo-pad-fluid-top-lg);
  --milo-approach-process-pad-bottom: var(--milo-pad-fluid-bottom-lg);

  --milo-approach-case-study-pad-top: var(--milo-pad-fluid-top-md);
  --milo-approach-case-study-pad-bottom: var(--milo-pad-fluid-bottom-sm);

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

  /* #region Grid ratios */
  --milo-approach-philosophy-grid-ratio-a: 0.98fr;
  --milo-approach-philosophy-grid-ratio-b: 1.02fr;

  --milo-approach-process-grid-ratio-a: 0.92fr;
  --milo-approach-process-grid-ratio-b: 1.08fr;
  /* #endregion Grid ratios */

  /* #region Responsive grid columns */
  --milo-approach-method-grid-columns-1199: 1fr 1fr 1fr;
  --milo-approach-method-grid-columns-mobile: 1fr;
  /* #endregion Responsive grid columns */

  /* #region Responsive card widths */
  --milo-approach-method-card-width-1199: 100%;
  --milo-approach-method-last-card-column-1199: 1 / -2;
  --milo-approach-method-last-card-column-mobile: auto;
  --milo-approach-method-last-card-body-max-1199: calc(
    var(--milo-approach-card-body-max) + 4ch
  );
  --milo-approach-method-last-card-body-max-mobile: var(
    --milo-approach-card-body-max
  );

  --milo-approach-process-card-max-width: 95%;
  --milo-approach-process-card-max-width-mobile: 100%;
  /* #endregion Responsive card widths */

  /* #region Hover / interaction */
  --milo-approach-method-card-hover-translate-y: -1px;

  --milo-approach-process-card-hover-translate-y: -2px;
  --milo-approach-card-group-dim-opacity: 0.86;
  /* #endregion Hover / interaction */

  /* #region Philosophy */
  --milo-approach-philosophy-subline-indent-1024: var(--milo-indent-xs);
  --milo-approach-philosophy-aside-gap: var(--milo-stack-md);
  --milo-approach-philosophy-item-gap: var(--milo-stack-sm);
  --milo-approach-philosophy-card-rule: var(--milo-divider);
  --milo-approach-philosophy-card-rule-opacity: 0.6;
  --milo-approach-philosophy-item-body-indent: var(--milo-indent-sm);
  --milo-approach-philosophy-rule-top: 5px;
  --milo-approach-philosophy-rule-bottom: 3px;
  /* #endregion Philosophy */

  /* #region Method */
  --milo-approach-method-overlay-background: var(
    --milo-surface-base-to-shadow-grad
  );
  --milo-approach-method-card-rule: var(--milo-pink-wash);
  --milo-approach-method-card-body-indent: var(--milo-indent-xs);
  --milo-approach-method-card-radius: var(--milo-radius-lg);
  --milo-approach-method-card-background: var(--milo-surface-tint-1);
  --milo-approach-method-card-border: var(--milo-divider);
  --milo-approach-method-card-border-hover: var(--milo-border-highlight);

  --milo-approach-method-card-shadow: none;
  --milo-approach-method-card-shadow-hover: 0 18px 34px
    var(--milo-shadow-ambient);
  --milo-approach-method-card-padding: var(--milo-card-pad-sm)
    var(--milo-card-pad-md);
  /* #endregion Method */

  /* #region Process */
  --milo-approach-process-aside-gap: var(--milo-stack-sm);
  --milo-approach-process-aside-indent: 0px;
  --milo-approach-process-card-rule: var(--milo-pink-wash);
  --milo-approach-process-card-radius: var(--milo-radius-md);
  --milo-approach-process-card-border: var(--milo-border-soft);
  --milo-approach-process-card-shadow: var(--milo-elev-1);
  --milo-approach-process-card-shadow-hover: 0 22px 40px
    var(--milo-shadow-ambient-strong);
  --milo-approach-process-card-background: var(--milo-surface-base-grad-strong);
  --milo-approach-process-card-padding: var(--milo-card-pad-sm)
    var(--milo-card-pad-md);
  /* #endregion Process */

  /* #region Card transitions */
  --milo-approach-card-transition-duration-fast: 200ms;
  --milo-approach-card-transition-duration-med: 220ms;
  --milo-approach-card-transition-ease: var(--milo-ease, ease);

  --milo-approach-method-card-transition:
    border-color var(--milo-approach-card-transition-duration-fast)
      var(--milo-approach-card-transition-ease),
    box-shadow var(--milo-approach-card-transition-duration-fast)
      var(--milo-approach-card-transition-ease),
    transform var(--milo-approach-card-transition-duration-med)
      var(--milo-approach-card-transition-ease),
    opacity var(--milo-approach-card-transition-duration-fast)
      var(--milo-approach-card-transition-ease);

  --milo-approach-process-card-transition:
    transform var(--milo-approach-card-transition-duration-med)
      var(--milo-approach-card-transition-ease),
    box-shadow var(--milo-approach-card-transition-duration-med)
      var(--milo-approach-card-transition-ease),
    border-color var(--milo-approach-card-transition-duration-med)
      var(--milo-approach-card-transition-ease),
    opacity var(--milo-approach-card-transition-duration-fast)
      var(--milo-approach-card-transition-ease);
  /* #endregion Card transitions */

  /* #region Grid spacing */
  --milo-approach-philosophy-grid-column-gap: var(--milo-gap-fluid-sm);
  --milo-approach-philosophy-grid-row-gap: var(--milo-gap-fluid-2xl);

  --milo-approach-method-grid-column-gap: var(--milo-gap-fluid-md);
  --milo-approach-method-grid-row-gap: var(--milo-gap-fluid-lg);

  --milo-approach-process-grid-column-gap: var(--milo-gap-fluid-sm);
  --milo-approach-process-grid-row-gap: var(--milo-gap-fluid-2xl);
  /* #endregion Grid spacing */

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

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

  /* #region Card detail */
  --milo-approach-rule-width: 22px;
  --milo-approach-rule-offset: 10px;
  --milo-approach-rule-opacity: 0.85;
  --milo-approach-card-title-margin-bottom: var(--milo-offset-xs);
  --milo-approach-card-title-line-height: 1.05;
  --milo-approach-card-body-line-height: 1.5;
  /* #endregion Card detail */

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

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

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

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

  /* #region Reveal delays */
  --milo-approach-delay-0: 0ms;
  --milo-approach-delay-1: 50ms;
  --milo-approach-delay-2: 100ms;
  --milo-approach-delay-3: 140ms;
  --milo-approach-delay-4: 160ms;
  --milo-approach-delay-5: 200ms;
  --milo-approach-delay-6: 260ms;
  --milo-approach-delay-7: 320ms;
  /* #endregion Reveal delays */
}
/* #endregion 0) APPROACH PAGE TOKENS */

/* #region 0.5) APPROACH REVEAL CASCADE */

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

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

.milo-page-approach .milo-card.milo-reveal,
.milo-page-approach .milo-page-approach__method-card.milo-reveal,
.milo-page-approach .milo-page-approach__process-card.milo-reveal,
.milo-page-approach .milo-page-approach__philosophy-item.milo-reveal {
  --milo-reveal-y: var(--milo-approach-reveal-y-card);
  --milo-reveal-blur: var(--milo-approach-reveal-blur-card);
}
/* #endregion Motion defaults */

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

.milo-page-approach .milo-page-approach__hero .milo-h1.milo-reveal {
  --milo-delay: var(--milo-approach-delay-1);
}

.milo-page-approach
  .milo-page-approach__hero
  .milo-heading-subline.milo-reveal {
  --milo-delay: var(--milo-approach-delay-2);
}

.milo-page-approach .milo-page-approach__hero .milo-hero-cta.milo-reveal {
  --milo-delay: var(--milo-approach-delay-4);
  --milo-reveal-y: var(--milo-approach-reveal-y-base);
  --milo-reveal-blur: var(--milo-approach-reveal-blur-copy);
}

.milo-page-approach .milo-page-approach__hero .milo-hero-link.milo-reveal {
  --milo-delay: var(--milo-approach-delay-5);
}
/* #endregion HERO */

/* #region PHILOSOPHY */
.milo-page-approach
  .milo-page-approach__philosophy
  .milo-heading-group.milo-reveal {
  --milo-delay: var(--milo-approach-delay-0);
}

.milo-page-approach
  .milo-page-approach__philosophy
  .milo-page-approach__philosophy-item.milo-reveal:nth-of-type(1) {
  --milo-delay: var(--milo-approach-delay-3);
}

.milo-page-approach
  .milo-page-approach__philosophy
  .milo-page-approach__philosophy-item.milo-reveal:nth-of-type(2) {
  --milo-delay: var(--milo-approach-delay-5);
}

.milo-page-approach
  .milo-page-approach__philosophy
  .milo-page-approach__philosophy-item.milo-reveal:nth-of-type(3) {
  --milo-delay: var(--milo-approach-delay-6);
}
/* #endregion PHILOSOPHY */

/* #region METHOD */
.milo-page-approach
  .milo-page-approach__method
  .milo-heading-group.milo-reveal {
  --milo-delay: var(--milo-approach-delay-0);
}

.milo-page-approach
  .milo-page-approach__method
  .milo-page-approach__method-card.milo-reveal:nth-of-type(1) {
  --milo-delay: var(--milo-approach-delay-3);
}

.milo-page-approach
  .milo-page-approach__method
  .milo-page-approach__method-card.milo-reveal:nth-of-type(2) {
  --milo-delay: var(--milo-approach-delay-5);
}

.milo-page-approach
  .milo-page-approach__method
  .milo-page-approach__method-card.milo-reveal:nth-of-type(3) {
  --milo-delay: var(--milo-approach-delay-6);
}
/* #endregion METHOD */

/* #region PROCESS */
.milo-page-approach
  .milo-page-approach__process
  .milo-heading-group.milo-reveal {
  --milo-delay: var(--milo-approach-delay-0);
}

.milo-page-approach
  .milo-page-approach__process
  .milo-page-approach__process-aside
  .milo-page-approach__process-card.milo-reveal:nth-of-type(1) {
  --milo-delay: var(--milo-approach-delay-3);
}

.milo-page-approach
  .milo-page-approach__process
  .milo-page-approach__process-aside
  .milo-page-approach__process-card.milo-reveal:nth-of-type(2) {
  --milo-delay: var(--milo-approach-delay-5);
}

.milo-page-approach
  .milo-page-approach__process
  .milo-page-approach__process-aside
  .milo-page-approach__process-card.milo-reveal:nth-of-type(3) {
  --milo-delay: var(--milo-approach-delay-6);
}

.milo-page-approach
  .milo-page-approach__process
  .milo-page-approach__process-aside
  .milo-page-approach__process-card.milo-reveal:nth-of-type(4) {
  --milo-delay: var(--milo-approach-delay-7);
}
/* #endregion PROCESS */

/* #endregion 0.5) APPROACH REVEAL CASCADE */

/* #region 1) GLOBAL SECTION RHYTHM */
.milo-page-approach .milo-section {
  position: relative;
  overflow: clip;
}

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

.milo-page-approach .milo-page-approach__philosophy-intro,
.milo-page-approach .milo-page-approach__method-intro,
.milo-page-approach .milo-page-approach__process-intro {
  gap: var(--milo-approach-intro-gap);
  padding-bottom: var(--milo-approach-intro-margin-bottom);
}

.milo-page-approach__philosophy-title h2,
.milo-page-approach__method-title h2,
.milo-page-approach__process-title h2 {
  max-width: var(--milo-approach-intro-title-max);
}

.milo-page-approach__philosophy-subline p,
.milo-page-approach__method-subline p,
.milo-page-approach__process-subline p {
  max-width: var(--milo-approach-intro-subline-max);
}

.milo-page-approach__philosophy-item-title h3,
.milo-page-approach__method-card-title h3,
.milo-page-approach__process-card-title h3 {
  max-width: var(--milo-approach-card-title-max);
  margin-bottom: var(--milo-approach-card-title-margin-bottom);
  line-height: var(--milo-approach-card-title-line-height);
}

.milo-page-approach__philosophy-item-body p,
.milo-page-approach__method-card-body p,
.milo-page-approach__process-card-body p {
  max-width: var(--milo-approach-card-body-max);
  line-height: var(--milo-approach-card-body-line-height);
}
/* #endregion 1) GLOBAL SECTION RHYTHM */

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

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

/* #region 3) PHILOSOPHY */
.milo-page-approach .milo-page-approach__philosophy {
  --milo-section-pad-top: var(--milo-approach-philosophy-pad-top);
  --milo-section-pad-bottom: var(--milo-approach-philosophy-pad-bottom);

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

.milo-page-approach .milo-page-approach__philosophy-aside {
  gap: var(--milo-approach-philosophy-aside-gap);
}

.milo-page-approach .milo-page-approach__philosophy-grid {
  --milo-grid-ratio-a: var(--milo-approach-philosophy-grid-ratio-a);
  --milo-grid-ratio-b: var(--milo-approach-philosophy-grid-ratio-b);
  align-items: start;
  column-gap: var(--milo-approach-philosophy-grid-column-gap);
  row-gap: var(--milo-approach-philosophy-grid-row-gap);
}

.milo-page-approach .milo-page-approach__philosophy-item {
  position: relative;
  gap: var(--milo-approach-philosophy-item-gap);
}

.milo-page-approach .milo-page-approach__philosophy-item-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--milo-approach-philosophy-rule-top);
  bottom: var(--milo-approach-philosophy-rule-bottom);
  width: 1px;
  background: var(--milo-approach-philosophy-card-rule);
  opacity: var(--milo-approach-philosophy-card-rule-opacity);
}

.milo-page-approach .milo-page-approach__philosophy-item-body p {
  padding-left: var(--milo-approach-philosophy-item-body-indent);
}
/* #endregion 3) PHILOSOPHY */

/* #region 4) METHOD */
.milo-page-approach .milo-page-approach__method {
  --milo-section-pad-top: var(--milo-approach-method-pad-top);
  --milo-section-pad-bottom: var(--milo-approach-method-pad-bottom);

  --milo-section-bg: var(--milo-bg-lift);
  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-approach-method-overlay-background);
}

.milo-page-approach .milo-page-approach__method-grid {
  align-items: start;
  column-gap: var(--milo-approach-method-grid-column-gap);
  row-gap: var(--milo-approach-method-grid-row-gap);
}

.milo-page-approach .milo-page-approach__method-card {
  position: relative;
  width: 100%;
  height: auto;
  align-self: start;
  padding: var(--milo-approach-method-card-padding);
  background: var(--milo-approach-method-card-background);
  border: 1px solid var(--milo-approach-method-card-border);
  border-radius: var(--milo-approach-method-card-radius);
  box-shadow: var(--milo-approach-method-card-shadow);
  opacity: 0.94;
  transition: var(--milo-approach-method-card-transition);
}

.milo-page-approach .milo-page-approach__method-card:hover {
  transform: translateY(var(--milo-approach-method-card-hover-translate-y));
  box-shadow: var(--milo-approach-method-card-shadow-hover);
  border-color: var(--milo-approach-method-card-border-hover);
}

.milo-page-approach .milo-page-approach__method-card-label::after {
  content: "";
  display: block;
  width: var(--milo-approach-rule-width);
  height: 1px;
  margin-top: var(--milo-approach-rule-offset);
  background: var(--milo-approach-method-card-rule);
  opacity: var(--milo-approach-rule-opacity);
}

.milo-page-approach .milo-page-approach__method-card-body p {
  padding-left: var(--milo-approach-method-card-body-indent);
}
/* #endregion 4) METHOD */

/* #region 5) PROCESS */
.milo-page-approach .milo-page-approach__process {
  --milo-section-pad-top: var(--milo-approach-process-pad-top);
  --milo-section-pad-bottom: var(--milo-approach-process-pad-bottom);

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

.milo-page-approach .milo-page-approach__process-grid {
  --milo-grid-ratio-a: var(--milo-approach-process-grid-ratio-a);
  --milo-grid-ratio-b: var(--milo-approach-process-grid-ratio-b);
  align-items: start;
  column-gap: var(--milo-approach-process-grid-column-gap);
  row-gap: var(--milo-approach-process-grid-row-gap);
}

.milo-page-approach .milo-page-approach__process-aside {
  gap: var(--milo-approach-process-aside-gap);
  padding-left: var(--milo-approach-process-aside-indent);
}

.milo-page-approach .milo-page-approach__process-card {
  position: relative;
  width: 100%;
  max-width: var(--milo-approach-process-card-max-width);
  height: auto;
  align-self: start;
  padding: var(--milo-approach-process-card-padding);
  background: var(--milo-approach-process-card-background);
  border: 1px solid var(--milo-approach-process-card-border);
  border-radius: var(--milo-approach-process-card-radius);
  box-shadow: var(--milo-approach-process-card-shadow);
  transition: var(--milo-approach-process-card-transition);
}

.milo-page-approach .milo-page-approach__process-card:hover {
  transform: translateY(var(--milo-approach-process-card-hover-translate-y));
  box-shadow: var(--milo-approach-process-card-shadow-hover);
}

.milo-page-approach .milo-page-approach__process-card-label::after {
  content: "";
  display: block;
  width: var(--milo-approach-rule-width);
  height: 1px;
  margin-top: var(--milo-approach-rule-offset);
  background: var(--milo-approach-process-card-rule);
  opacity: var(--milo-approach-rule-opacity);
}
/* #endregion 5) PROCESS */

/* #region 6) CASE STUDY */
.milo-page-approach .milo-page-approach__case-study {
  --milo-section-pad-top: var(--milo-approach-case-study-pad-top);
  --milo-section-pad-bottom: var(--milo-approach-case-study-pad-bottom);

  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-section-surface-lift);
}
/* #endregion 6) CASE STUDY */

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

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

/* #region 8) CTA */
.milo-page-approach .milo-page-approach__cta {
  --milo-section-bg: var(--milo-bg-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-approach__method-grid:hover .milo-page-approach__method-card,
  .milo-page-approach__process-aside:hover .milo-page-approach__process-card {
    opacity: var(--milo-approach-card-group-dim-opacity);
  }

  .milo-page-approach__method-grid:hover .milo-page-approach__method-card:hover,
  .milo-page-approach__process-aside:hover
    .milo-page-approach__process-card:hover {
    opacity: 1;
  }
}
/* #endregion 9) INTERACTION */

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

  .milo-page-approach .milo-page-approach__method-grid {
    grid-template-columns: var(--milo-approach-method-grid-columns-1199);
  }

  .milo-page-approach .milo-page-approach__method-card {
    width: var(--milo-approach-method-card-width-1199);
  }

  .milo-page-approach
    .milo-page-approach__method-grid
    > .milo-page-approach__method-card:last-child {
    grid-column: var(--milo-approach-method-last-card-column-1199);
  }

  .milo-page-approach
    .milo-page-approach__method-card:last-child
    .milo-page-approach__method-card-body
    p {
    max-width: var(--milo-approach-method-last-card-body-max-1199);
  }
}

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

    --milo-approach-method-card-body-indent: var(--milo-indent-2xs);
    --milo-approach-process-card-max-width: 85%;
  }

  .milo-page-approach .milo-page-approach__philosophy-subline p {
    padding-left: var(--milo-approach-philosophy-subline-indent-1024);
  }
}

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

    --milo-approach-process-aside-indent: var(--milo-indent-sm);
    --milo-approach-method-card-radius: var(--milo-radius-md);
    --milo-approach-process-card-max-width: var(
      --milo-approach-process-card-max-width-mobile
    );
  }

  .milo-page-approach .milo-page-approach__method-grid {
    grid-template-columns: var(--milo-approach-method-grid-columns-mobile);
  }

  .milo-page-approach
    .milo-page-approach__method-grid
    > .milo-page-approach__method-card:last-child {
    grid-column: var(--milo-approach-method-last-card-column-mobile);
  }

  .milo-page-approach
    .milo-page-approach__method-card:last-child
    .milo-page-approach__method-card-body
    p {
    max-width: var(--milo-approach-method-last-card-body-max-mobile);
  }
}

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

    --milo-approach-process-aside-indent: var(--milo-indent-xs);
    --milo-approach-method-card-body-indent: 0;
  }
}
/* #endregion 10) RESPONSIVE */

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

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

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

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

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

  .milo-page-approach .milo-reveal,
  .milo-page-approach .milo-page-approach__method-card,
  .milo-page-approach .milo-page-approach__process-card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .milo-page-approach .milo-page-approach__method-card:hover {
    transform: none !important;
    box-shadow: var(--milo-approach-method-card-shadow) !important;
  }

  .milo-page-approach .milo-page-approach__process-card:hover {
    transform: none !important;
    box-shadow: var(--milo-approach-process-card-shadow) !important;
  }

  .milo-page-approach__method-grid:hover .milo-page-approach__method-card,
  .milo-page-approach__process-aside:hover .milo-page-approach__process-card {
    opacity: 1 !important;
  }
}
/* #endregion 11) ACCESSIBILITY */