/* =========================================================
   MILO PAGE: HOME
   File: milo-page-home.css
   Layer: 04-pages
   Scope: Home page modules only

   Owns:
   - Hero
   - Credibility strip tuning
   - Case study section rhythm
   - Approach section rhythm and interaction polish
   - Systems section rhythm and media/card tuning
   - Who we work with spacing
   - CTA tuning

   Notes:
   - Assumes shared modules already exist
   - Scoped to .milo-page-home only
========================================================= */

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

  --milo-home-credibility-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-home-credibility-pad-bottom: var(--milo-pad-fluid-bottom-sm);

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

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

  --milo-home-systems-pad-top: var(--milo-pad-fluid-top-md);
  --milo-home-systems-pad-bottom: var(--milo-pad-fluid-bottom-sm);

  --milo-home-who-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-home-who-pad-bottom: var(--milo-pad-fluid-bottom-lg);
  /* #endregion Section padding */

  /* #region Grid spacing */
  --milo-home-approach-grid-column-gap: var(--milo-gap-fluid-lg);
  --milo-home-approach-grid-row-gap: var(--milo-gap-fluid-lg);

  --milo-home-systems-grid-column-gap: var(--milo-gap-fluid-xl);
  --milo-home-systems-grid-row-gap: var(--milo-gap-fluid-xl);
  /* #endregion Grid spacing */

  /* #region Text measures */
  --milo-home-hero-title-max: var(--milo-measure-18);
  --milo-home-hero-subline-max: var(--milo-measure-44);

  --milo-home-intro-title-max: var(--milo-measure-18);
  --milo-home-intro-subline-max: var(--milo-measure-38);

  --milo-home-card-title-max: var(--milo-measure-12);
  --milo-home-card-body-max: var(--milo-measure-38);
  /* #endregion Text measures */

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

  /* #region Hero */
  --milo-home-hero-min-height: min(750px, 80vh);
  --milo-home-hero-copy-gap: var(--milo-gap-fluid-sm);
  --milo-home-hero-inner-pad-top: var(--milo-pad-fluid-top-2xl);
  --milo-home-hero-actions-gap: var(--milo-gap-fluid-sm);

  /* Keep tokenized for easy swapping. Replace local dev URL when moving environments. */
  --milo-home-hero-background-image: url(https://miloagency:8890/wp-content/uploads/2026/02/2X5A7262-scaled.jpg);

  --milo-home-hero-left-field: linear-gradient(
    90deg,
    rgba(10, 10, 11, 0.54) 0%,
    rgba(10, 10, 11, 0.34) 26%,
    rgba(10, 10, 11, 0.16) 46%,
    rgba(10, 10, 11, 0.04) 60%,
    rgba(10, 10, 11, 0) 72%
  );

  --milo-home-hero-light-anchor: radial-gradient(
    760px 520px at 20% 38%,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.022) 34%,
    rgba(255, 255, 255, 0.008) 54%,
    rgba(255, 255, 255, 0) 72%
  );

  --milo-home-hero-overlay-strong: linear-gradient(
    180deg,
    rgba(10, 10, 11, 0.88) 0%,
    rgba(10, 10, 11, 0.62) 24%,
    rgba(10, 10, 11, 0.36) 48%,
    rgba(10, 10, 11, 0.18) 72%,
    rgba(10, 10, 11, 0.04) 100%
  );

  --milo-home-hero-overlay-stack:
    var(--milo-home-hero-left-field), var(--milo-home-hero-light-anchor),
    var(--milo-home-hero-overlay-strong), var(--milo-h-overlay-fade-bottom);

  --milo-home-hero-grid-columns-1024: minmax(0, 1fr);
  --milo-home-hero-aside-display-1024: none;
  /* #endregion Hero */

  /* #region Approach */
  --milo-pink-radial:
    radial-gradient(
      900px 320px at 50% 18%,
      var(--milo-glow-pink-strong),
      transparent 58%
    ),
    radial-gradient(
      640px 240px at 22% 38%,
      var(--milo-glow-wash-med),
      transparent 62%
    );

  --milo-home-approach-card-gap: var(--milo-gap-fluid-sm);
  --milo-home-approach-card-inset: -2px;
  --milo-home-approach-card-overlay-opacity-hover: var(--milo-o-15);
  --milo-home-approach-card-sheen: var(--milo-shadow-hairline-inset);

  --milo-home-approach-card-overlay-background: var(--milo-pink-radial);

  --milo-home-approach-card-overlay-rest-transform: translateY(6px) scale(0.986);
  --milo-home-approach-card-overlay-hover-transform: translateY(0) scale(1);

  --milo-home-approach-card-rule-bottom: -8px;
  --milo-home-approach-card-rule-width: 56px;
  --milo-home-approach-card-rule-width-hover: 104px;
  --milo-home-approach-card-rule-background: var(--milo-pink);
  --milo-home-approach-card-rule-background-hover: var(--milo-pink-strong);
  --milo-home-approach-card-rule-opacity: var(--milo-o-92);
  --milo-home-approach-card-rule-opacity-hover: var(--milo-o-100);

  --milo-home-approach-card-body-color: var(--milo-text-soft);
  --milo-home-approach-card-body-color-hover: var(--milo-text);
  --milo-home-approach-card-label-opacity: var(--milo-o-62);
  --milo-home-approach-card-label-opacity-hover: var(--milo-o-78);

  --milo-home-approach-grid-columns-mobile: 1fr;
  --milo-home-approach-grid-pad-right-1024: var(--milo-offset-2xl);
  --milo-home-approach-card-max-width-1024: 100%;
  --milo-home-approach-last-card-column-1024: 1 / -1;
  --milo-home-approach-last-card-column-mobile: auto;

  --milo-home-approach-transition-dur-fast: var(--milo-fast);
  --milo-home-approach-transition-dur-med: var(--milo-med);
  --milo-home-approach-transition-dur-slow: var(--milo-slow);
  --milo-home-approach-transition-ease: var(--milo-ease);

  --milo-home-approach-overlay-transition:
    opacity var(--milo-home-approach-transition-dur-med)
      var(--milo-home-approach-transition-ease),
    transform var(--milo-home-approach-transition-dur-med)
      var(--milo-home-approach-transition-ease);

  --milo-home-approach-sheen-transition: opacity
    var(--milo-home-approach-transition-dur-med)
    var(--milo-home-approach-transition-ease);

  --milo-home-approach-rule-transition:
    width var(--milo-home-approach-transition-dur-slow)
      var(--milo-home-approach-transition-ease),
    background var(--milo-home-approach-transition-dur-med)
      var(--milo-home-approach-transition-ease),
    opacity var(--milo-home-approach-transition-dur-fast)
      var(--milo-home-approach-transition-ease);
  /* #endregion Approach */

  /* #region Systems */
  --milo-home-systems-grid-ratio-a: 0.98fr;
  --milo-home-systems-grid-ratio-b: 1.02fr;
  --milo-home-systems-grid-columns-1024: minmax(0, 1fr);

  --milo-home-systems-card-max-width: 30rem;
  --milo-home-systems-card-padding: var(--milo-card-pad-balanced);
  --milo-home-systems-card-background: var(--milo-surface-tint-1);
  --milo-home-systems-card-gap: var(--milo-gap-fluid-sm);

  --milo-home-systems-rule-inset: 22px 0 28px 8px;
  --milo-home-systems-rule-background: var(--milo-pink-wash);
  --milo-home-systems-rule-opacity: var(--milo-o-90);

  --milo-home-systems-visual-saturate: 0.88;
  --milo-home-systems-visual-contrast: 0.95;
  --milo-home-systems-visual-opacity: 0.96;
  --milo-home-systems-visual-max-width: 540px;

  --milo-home-systems-media-max-width: 100%;
  --milo-home-systems-media-shadow:
    var(--milo-shadow-hairline-inset), var(--milo-shadow-media);
  --milo-home-systems-media-filter: saturate(
      var(--milo-home-systems-visual-saturate)
    )
    contrast(var(--milo-home-systems-visual-contrast));
  /* #endregion Systems */

  /* #region Page motion tuning */
  --milo-reveal-y: 18px;
  --milo-reveal-blur: 4px;
  --milo-reveal-dur: 540ms;
  --milo-reveal-dur-heading: 640ms;
  /* #endregion Page motion tuning */

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

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

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

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

  --milo-home-reveal-y-card: 10px;
  --milo-home-reveal-blur-card: 2.5px;

  --milo-home-reveal-y-credibility: 12px;
  --milo-home-reveal-blur-credibility: 2.5px;
  /* #endregion Reveal defaults */

  /* #region Reveal delays */
  --milo-home-delay-0: 0ms;
  --milo-home-delay-1: 60ms;
  --milo-home-delay-2: 80ms;
  --milo-home-delay-3: 100ms;
  --milo-home-delay-4: 140ms;
  --milo-home-delay-5: 160ms;
  --milo-home-delay-6: 200ms;
  --milo-home-delay-7: 220ms;
  --milo-home-delay-8: 280ms;
  --milo-home-delay-9: 300ms;
  /* #endregion Reveal delays */
}
/* #endregion 0) HOME PAGE TOKENS */

/* #region 0.5) REVEAL CASCADE */

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

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

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

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

/* #region HERO */
.milo-page-home .milo-page-home__hero .milo-h1.milo-reveal {
  --milo-delay: var(--milo-home-delay-0);
}

.milo-page-home .milo-page-home__hero .milo-heading-subline.milo-reveal {
  --milo-delay: var(--milo-home-delay-1);
}

.milo-page-home
  .milo-page-home__hero
  .milo-page-home__hero-actions.milo-reveal {
  --milo-delay: var(--milo-home-delay-4);
  --milo-reveal-y: var(--milo-home-reveal-y-base);
  --milo-reveal-blur: var(--milo-home-reveal-blur-copy);
}
/* #endregion HERO */

/* #region CREDIBILITY */
.milo-page-home .milo-page-home__credibility .milo-reveal {
  --milo-reveal-y: var(--milo-home-reveal-y-credibility);
  --milo-reveal-blur: var(--milo-home-reveal-blur-credibility);
}

.milo-page-home .milo-page-home__credibility .milo-reveal:nth-of-type(1) {
  --milo-delay: var(--milo-home-delay-0);
}

.milo-page-home .milo-page-home__credibility .milo-reveal:nth-of-type(2) {
  --milo-delay: var(--milo-home-delay-2);
}

.milo-page-home .milo-page-home__credibility .milo-reveal:nth-of-type(3) {
  --milo-delay: var(--milo-home-delay-4);
}

.milo-page-home .milo-page-home__credibility .milo-reveal:nth-of-type(4) {
  --milo-delay: var(--milo-home-delay-6);
}
/* #endregion CREDIBILITY */

/* #region CASE STUDY */
.milo-page-home .milo-page-home__case-study .milo-reveal {
  --milo-delay: var(--milo-home-delay-0);
  --milo-reveal-y: var(--milo-home-reveal-y-credibility);
  --milo-reveal-blur: var(--milo-home-reveal-blur-credibility);
}
/* #endregion CASE STUDY */

/* #region APPROACH */
.milo-page-home .milo-page-home__approach .milo-heading-label.milo-reveal {
  --milo-delay: var(--milo-home-delay-0);
  --milo-reveal-y: var(--milo-home-reveal-y-label);
  --milo-reveal-blur: var(--milo-home-reveal-blur-label);
}

.milo-page-home .milo-page-home__approach .milo-h2.milo-reveal {
  --milo-delay: var(--milo-home-delay-1);
}

.milo-page-home .milo-page-home__approach .milo-heading-subline.milo-reveal {
  --milo-delay: var(--milo-home-delay-3);
}

.milo-page-home
  .milo-page-home__approach
  .milo-page-home__approach-card.milo-reveal:nth-of-type(1) {
  --milo-delay: var(--milo-home-delay-5);
}

.milo-page-home
  .milo-page-home__approach
  .milo-page-home__approach-card.milo-reveal:nth-of-type(2) {
  --milo-delay: var(--milo-home-delay-7);
}

.milo-page-home
  .milo-page-home__approach
  .milo-page-home__approach-card.milo-reveal:nth-of-type(3) {
  --milo-delay: var(--milo-home-delay-8);
}
/* #endregion APPROACH */

/* #region SYSTEMS */
.milo-page-home .milo-page-home__systems .milo-heading-group.milo-reveal {
  --milo-delay: var(--milo-home-delay-0);
}

.milo-page-home .milo-page-home__systems .milo-reveal:nth-of-type(2),
.milo-page-home .milo-page-home__systems .milo-reveal:nth-of-type(3),
.milo-page-home .milo-page-home__systems .milo-reveal:nth-of-type(4),
.milo-page-home .milo-page-home__systems .milo-reveal:nth-of-type(5) {
  --milo-reveal-y: var(--milo-home-reveal-y-card);
  --milo-reveal-blur: var(--milo-home-reveal-blur-card);
}

.milo-page-home .milo-page-home__systems .milo-reveal:nth-of-type(2) {
  --milo-delay: var(--milo-home-delay-3);
}

.milo-page-home .milo-page-home__systems .milo-reveal:nth-of-type(3) {
  --milo-delay: var(--milo-home-delay-5);
}

.milo-page-home .milo-page-home__systems .milo-reveal:nth-of-type(4) {
  --milo-delay: var(--milo-home-delay-7);
}

.milo-page-home .milo-page-home__systems .milo-reveal:nth-of-type(5) {
  --milo-delay: var(--milo-home-delay-9);
}
/* #endregion SYSTEMS */

/* #region WHO */
.milo-page-home .milo-page-home__who .milo-reveal {
  --milo-delay: var(--milo-home-delay-0);
  --milo-reveal-y: var(--milo-home-reveal-y-credibility);
  --milo-reveal-blur: var(--milo-home-reveal-blur-credibility);
}
/* #endregion WHO */

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

.milo-page-home .milo-page-home__cta .milo-cta__subline.milo-reveal {
  --milo-delay: var(--milo-home-delay-2);
  --milo-reveal-y: var(--milo-home-reveal-y-copy);
  --milo-reveal-blur: var(--milo-home-reveal-blur-copy);
}

.milo-page-home .milo-page-home__cta .milo-cta__btn.milo-reveal {
  --milo-delay: var(--milo-home-delay-5);
  --milo-reveal-y: var(--milo-home-reveal-y-base);
  --milo-reveal-blur: var(--milo-home-reveal-blur-copy);
}

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

/* #endregion 0.5) REVEAL CASCADE */

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

.milo-page-home .milo-inner {
  position: relative;
  z-index: 2;
}

.milo-page-home .milo-page-home__approach-intro,
.milo-page-home .milo-page-home__systems-intro {
  gap: var(--milo-home-intro-gap);
  padding-bottom: var(--milo-home-intro-margin-bottom);
}

.milo-page-home .milo-hero__title h1 {
  max-width: var(--milo-home-hero-title-max);
}

.milo-page-home .milo-hero__subline p {
  max-width: var(--milo-home-hero-subline-max);
}

.milo-page-home .milo-page-home__approach-title h2,
.milo-page-home .milo-page-home__systems-title h2 {
  max-width: var(--milo-home-intro-title-max);
}

.milo-page-home .milo-page-home__approach-subline p,
.milo-page-home .milo-page-home__systems-subline p {
  max-width: var(--milo-home-intro-subline-max);
}

.milo-page-home .milo-page-home__approach-card-title h3,
.milo-page-home .milo-page-home__systems-card-title h3 {
  max-width: var(--milo-home-card-title-max);
}

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

/* #region 2) HERO */
.milo-page-home .milo-page-home__hero {
  min-height: var(--milo-home-hero-min-height);
  --milo-section-pad-top: var(--milo-home-hero-pad-top);
  --milo-section-pad-bottom: var(--milo-home-hero-pad-bottom);

  --milo-hero-overlay: var(--milo-home-hero-overlay-stack);
  --milo-hero-image: var(--milo-home-hero-background-image);
}

.milo-page-home .milo-page-home__hero .milo-heading-group {
  row-gap: var(--milo-home-hero-copy-gap);
}

.milo-page-home .milo-page-home__hero .milo-hero__actions {
  gap: var(--milo-home-hero-actions-gap);
}

.milo-page-home .milo-page-home__hero .milo-inner {
  padding-top: var(--milo-home-hero-inner-pad-top);
}
/* #endregion 2) HERO */

/* #region 3) CREDIBILITY */
.milo-page-home .milo-page-home__credibility {
  --milo-section-pad-top: var(--milo-home-credibility-pad-top);
  --milo-section-pad-bottom: var(--milo-home-credibility-pad-bottom);
}
/* #endregion 3) CREDIBILITY */

/* #region 4) CASE STUDY */
.milo-page-home .milo-page-home__case-study {
  --milo-section-pad-top: var(--milo-home-case-study-pad-top);
  --milo-section-pad-bottom: var(--milo-home-case-study-pad-bottom);

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

/* #region 5) APPROACH */
.milo-page-home .milo-page-home__approach {
  --milo-section-pad-top: var(--milo-home-approach-pad-top);
  --milo-section-pad-bottom: var(--milo-home-approach-pad-bottom);

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

.milo-page-home .milo-page-home__approach-grid {
  column-gap: var(--milo-home-approach-grid-column-gap);
  row-gap: var(--milo-home-approach-grid-row-gap);
}

.milo-page-home .milo-page-home__approach-card {
  gap: var(--milo-home-approach-card-gap);
}

.milo-page-home .milo-page-home__approach-card::before {
  content: "";
  position: absolute;
  inset: var(--milo-home-approach-card-inset);
  pointer-events: none;
  border-radius: calc(var(--milo-card-radius) + 2px);
  background: var(--milo-home-approach-card-overlay-background);
  opacity: 0;
  transform: var(--milo-home-approach-card-overlay-rest-transform);
  transition: var(--milo-home-approach-overlay-transition);
}

.milo-page-home .milo-page-home__approach-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--milo-card-radius);
  box-shadow: var(--milo-home-approach-card-sheen);
  opacity: 0;
  transition: var(--milo-home-approach-sheen-transition);
}

.milo-page-home .milo-page-home__approach-card:hover::before,
.milo-page-home .milo-page-home__approach-card:focus-within::before {
  opacity: var(--milo-home-approach-card-overlay-opacity-hover);
  transform: var(--milo-home-approach-card-overlay-hover-transform);
}

.milo-page-home .milo-page-home__approach-card:hover::after,
.milo-page-home .milo-page-home__approach-card:focus-within::after {
  opacity: var(--milo-home-approach-card-overlay-opacity-hover);
}

.milo-page-home
  .milo-page-home__approach-card-title
  .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--milo-home-approach-card-rule-bottom);
  width: var(--milo-home-approach-card-rule-width);
  height: 1px;
  background: var(--milo-home-approach-card-rule-background);
  opacity: var(--milo-home-approach-card-rule-opacity);
  transition: var(--milo-home-approach-rule-transition);
}

.milo-page-home
  .milo-page-home__approach-card:hover
  .milo-page-home__approach-card-label,
.milo-page-home
  .milo-page-home__approach-card:focus-within
  .milo-page-home__approach-card-label {
  opacity: var(--milo-home-approach-card-label-opacity-hover);
}

.milo-page-home
  .milo-page-home__approach-card:hover
  .milo-page-home__approach-card-body,
.milo-page-home
  .milo-page-home__approach-card:focus-within
  .milo-page-home__approach-card-body {
  color: var(--milo-home-approach-card-body-color-hover) !important;
}

.milo-page-home
  .milo-page-home__approach-card:hover
  .milo-page-home__approach-card-title
  .elementor-heading-title::after,
.milo-page-home
  .milo-page-home__approach-card:focus-within
  .milo-page-home__approach-card-title
  .elementor-heading-title::after {
  width: var(--milo-home-approach-card-rule-width-hover);
  background: var(--milo-home-approach-card-rule-background-hover);
  opacity: var(--milo-home-approach-card-rule-opacity-hover);
}
/* #endregion 5) APPROACH */

/* #region 6) SYSTEMS */
.milo-page-home .milo-page-home__systems {
  --milo-section-pad-top: var(--milo-home-systems-pad-top);
  --milo-section-pad-bottom: var(--milo-home-systems-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-section-surface-lift);
}

.milo-page-home .milo-page-home__systems-wrap {
  --milo-grid-ratio-a: var(--milo-home-systems-grid-ratio-a);
  --milo-grid-ratio-b: var(--milo-home-systems-grid-ratio-b);
  align-items: start;
  column-gap: var(--milo-home-systems-grid-column-gap);
  row-gap: var(--milo-home-systems-grid-row-gap);
}

.milo-page-home .milo-page-home__systems-left {
  gap: var(--milo-home-systems-card-gap);
}

.milo-page-home .milo-page-home__systems-card {
  overflow: hidden;
  max-width: var(--milo-home-systems-card-max-width);
  padding: var(--milo-home-systems-card-padding);
  background: var(--milo-home-systems-card-background);
}

.milo-page-home .milo-page-home__systems-card::before {
  content: "";
  position: absolute;
  inset: var(--milo-home-systems-rule-inset);
  width: 2px;
  background: var(--milo-home-systems-rule-background);
  border-radius: var(--milo-radius-2xs);
  pointer-events: none;
  opacity: var(--milo-home-systems-rule-opacity);
}

.milo-page-home .milo-page-home__systems-visual {
  max-width: var(--milo-home-systems-visual-max-width);
}

.milo-page-home .milo-page-home__systems-visual .milo-media-frame {
  max-width: var(--milo-home-systems-media-max-width);
  overflow: hidden;
  margin: auto;
  opacity: var(--milo-home-systems-visual-opacity);
  filter: var(--milo-home-systems-media-filter);
  box-shadow: var(--milo-home-systems-media-shadow);
}
/* #endregion 6) SYSTEMS */

/* #region 7) WHO */
.milo-page-home .milo-page-home__who {
  --milo-section-pad-top: var(--milo-home-who-pad-top);
  --milo-section-pad-bottom: var(--milo-home-who-pad-bottom);

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

/* #region 8) CTA */
.milo-page-home .milo-page-home__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) RESPONSIVE */
@media (max-width: 1199.98px) {
  .milo-page-home {
    --milo-home-hero-title-max: var(--milo-measure-14);
    --milo-home-hero-subline-max: var(--milo-measure-44);
    --milo-home-intro-title-max: var(--milo-measure-24);
    --milo-home-intro-subline-max: var(--milo-measure-40);
    --milo-home-card-title-max: var(--milo-measure-20);
    --milo-home-card-body-max: var(--milo-measure-32);

    --milo-home-hero-min-height: min(820px, 90svh);
    --milo-home-systems-visual-max-width: 500px;
  }
}

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

    --milo-home-hero-min-height: min(720px, 88svh);

    --milo-home-systems-media-max-width: 80%;
    --milo-home-systems-card-max-width: 40rem;
    --milo-home-systems-visual-max-width: none;
  }

  .milo-page-home .milo-page-home__hero-grid {
    grid-template-columns: var(--milo-home-hero-grid-columns-1024);
  }

  .milo-page-home .milo-page-home__hero .milo-grid__aside {
    display: var(--milo-home-hero-aside-display-1024);
  }

  .milo-page-home .milo-page-home__systems-wrap {
    grid-template-columns: var(--milo-home-systems-grid-columns-1024);
  }

  .milo-page-home .milo-page-home__approach-grid {
    padding-right: var(--milo-home-approach-grid-pad-right-1024);
  }

  .milo-page-home .milo-page-home__approach-card {
    max-width: var(--milo-home-approach-card-max-width-1024);
  }

  .milo-page-home .milo-page-home__approach-card:last-child {
    grid-column: var(--milo-home-approach-last-card-column-1024);
  }
}

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

    --milo-home-hero-min-height: min(575px, 80svh);

    --milo-home-approach-card-rule-width: 44px;
    --milo-home-approach-card-inset: calc(var(--milo-space-md) * -0.5);

    --milo-home-systems-media-max-width: 85%;
    --milo-home-systems-card-max-width: 30rem;
  }

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

  .milo-page-home .milo-page-home__approach-card:last-child {
    grid-column: var(--milo-home-approach-last-card-column-mobile);
  }
}

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

    --milo-home-hero-min-height: min(500px, 70svh);

    --milo-home-approach-card-rule-width: 36px;
    --milo-home-systems-rule-inset: 18px 0 18px 12px;
    --milo-home-systems-media-max-width: 100%;
  }
}
/* #endregion 9) RESPONSIVE */

/* #region 10) TOUCH / REDUCED HOVER */
@media (hover: none) and (pointer: coarse) {
  .milo-page-home .milo-page-home__approach-card::before,
  .milo-page-home .milo-page-home__approach-card::after {
    opacity: 0 !important;
    transform: none !important;
  }

  .milo-page-home
    .milo-page-home__approach-card-title
    .elementor-heading-title::after {
    width: var(--milo-home-approach-card-rule-width);
  }
}
/* #endregion 10) TOUCH / REDUCED HOVER */

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

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

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

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

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

    --milo-home-reveal-y-credibility: 0px;
    --milo-home-reveal-blur-credibility: 0px;

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

  .milo-page-home .milo-reveal,
  .milo-page-home .milo-page-home__approach-card,
  .milo-page-home .milo-page-home__approach-card *,
  .milo-page-home .milo-media-frame,
  .milo-page-home .milo-card,
  .milo-page-home .milo-cta,
  .milo-page-home .milo-credibility {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .milo-page-home .milo-page-home__approach-card::before,
  .milo-page-home .milo-page-home__approach-card::after {
    opacity: 0 !important;
    transform: none !important;
  }

  .milo-page-home
    .milo-page-home__approach-card-title
    .elementor-heading-title::after {
    width: var(--milo-home-approach-card-rule-width);
  }
}
/* #endregion 11) REDUCED MOTION */