/* =========================================================
   MILO PAGE: CONTACT
   File: milo-page-contact.css
   Layer: 04-pages
   Scope: Contact page modules only

   Owns:
   - Hero
   - Inquiry section layout
   - Form shell + Elementor form styling
   - Expectations cards
   - Direct contact section
   - Contact-page tuning for final CTA

   Notes:
   - Assumes global primitives and modules are already loaded
   - Scoped to .milo-page-contact only
   - Elementor form styling is intentionally scoped to:
     .milo-page-contact__form-shell
========================================================= */

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

  --milo-contact-inquiry-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-contact-inquiry-pad-bottom: var(--milo-pad-fluid-bottom-sm);

  --milo-contact-expectations-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-contact-expectations-pad-bottom: var(--milo-pad-fluid-bottom-md);

  --milo-contact-direct-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-contact-direct-pad-bottom: var(--milo-pad-fluid-bottom-sm);
  /* #endregion Section padding */

  /* #region Inquiry layout */
  --milo-contact-inquiry-grid-ratio-a: 0.85fr;
  --milo-contact-inquiry-grid-ratio-b: 1.15fr;
  --milo-contact-inquiry-grid-columns-1024: 1fr;
  --milo-contact-inquiry-grid-column-gap: var(--milo-gap-fluid-3xl);
  --milo-contact-inquiry-grid-row-gap: var(--milo-gap-fluid-3xl);
  /* #endregion Inquiry layout */

  /* #region Expectations layout */
  --milo-contact-expectations-grid-column-gap: var(--milo-gap-fluid-md);
  --milo-contact-expectations-grid-row-gap: var(--milo-gap-fluid-lg);
  --milo-contact-expectations-grid-columns-768: 1fr;
  --milo-contact-expectations-card-max-width-1024: 100%;
  /* #endregion Expectations layout */

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

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

  /* #region Form motion */
  --milo-contact-form-transition-duration: 180ms;
  --milo-contact-form-transition-ease: var(--milo-ease, ease);

  --milo-contact-form-field-transition:
    border-color var(--milo-contact-form-transition-duration)
      var(--milo-contact-form-transition-ease),
    background-color var(--milo-contact-form-transition-duration)
      var(--milo-contact-form-transition-ease),
    box-shadow var(--milo-contact-form-transition-duration)
      var(--milo-contact-form-transition-ease),
    transform var(--milo-contact-form-transition-duration)
      var(--milo-contact-form-transition-ease);

  --milo-contact-form-button-transition:
    transform var(--milo-contact-form-transition-duration)
      var(--milo-contact-form-transition-ease),
    box-shadow var(--milo-contact-form-transition-duration)
      var(--milo-contact-form-transition-ease),
    filter var(--milo-contact-form-transition-duration)
      var(--milo-contact-form-transition-ease);

  --milo-contact-form-button-hover-translate-y: -1px;
  /* #endregion Form motion */

  /* #region Contact form shell */
  --milo-contact-form-font-size: 1rem;
  --milo-contact-form-radius: var(--milo-radius-lg);
  --milo-contact-form-max-width: 600px;
  --milo-contact-form-padding: var(--milo-card-pad-md);
  --milo-contact-form-border-color: var(--milo-border-soft);

  --milo-contact-form-shadow:
    0 1px 0 var(--milo-shadow-highlight) inset,
    0 18px 40px var(--milo-shadow-ambient-strong);
  --milo-contact-form-background: var(--milo-surface-lift-grad-soft);
  /* #endregion Contact form shell */

  /* #region Contact form select */
  --milo-contact-form-dropdown-caret-color: var(--milo-off-white);
  --milo-contact-form-required-asterisk-color: var(--milo-pink-light);

  --milo-contact-form-select-padding-right: 54px;
  --milo-contact-form-caret-size: 10px;
  --milo-contact-form-caret-stroke: 1.5px;
  --milo-contact-form-caret-offset-right: var(--milo-offset-fluid-md);
  --milo-contact-form-caret-translate-y: -65%;
  /* #endregion Contact form select */

  /* #region Contact form labels */
  --milo-contact-form-label-font-weight: 500;
  --milo-contact-form-label-letter-spacing: 0.01em;
  --milo-contact-form-label-margin-bottom: var(--milo-offset-fluid-2xs);
  --milo-contact-form-label-font-size: 0.9rem;
  --milo-contact-form-label-color: var(--milo-text-muted);
  --milo-contact-form-label-line-height: 1.35;
  /* #endregion Contact form labels */

  /* #region Contact form inputs */
  --milo-contact-form-input-min-height: 52px;
  --milo-contact-form-input-line-height: 1.4;
  --milo-contact-form-input-padding: 0 var(--milo-card-pad-inline-sm);

  --milo-contact-form-textarea-min-height: 140px;
  --milo-contact-form-textarea-line-height: 1.6;
  --milo-contact-form-textarea-padding: var(--milo-card-pad-inline-sm)
    var(--milo-card-pad-inline-md);
  /* #endregion Contact form inputs */

  /* #region Contact form fields */
  --milo-contact-form-fields-gap: var(--milo-gap-xs);
  --milo-contact-form-field-radius: 18px;
  --milo-contact-form-field-text-color: var(--milo-text);
  --milo-contact-form-field-placeholder-color: var(--milo-text-muted);

  --milo-contact-form-field-border-color: var(--milo-border-field);
  --milo-contact-form-field-border-color-hover: var(--milo-border-field-hover);
  --milo-contact-form-field-border-color-focus: var(--milo-border-field-focus);

  --milo-contact-form-field-background: var(--milo-surface-field);

  --milo-contact-form-field-background-hover: var(--milo-surface-field-hover);

  --milo-contact-form-field-background-focus: var(--milo-surface-field-focus);

  --milo-contact-form-field-focus-shadow:
    0 0 0 3px var(--milo-shadow-highlight-pink),
    0 10px 28px var(--milo-shadow-ambient-strong);

  /* #endregion Contact form fields */

  /* #region Contact form validation */
  --milo-contact-form-validation-message-margin-top: 8px;
  --milo-contact-form-validation-message-color: #ffb4b4;
  --milo-contact-form-validation-message-font-size: 0.9rem;
  --milo-contact-form-validation-message-line-height: 1.45;

  --milo-contact-form-validation-state-margin-top: 14px;
  --milo-contact-form-validation-state-padding: 14px 16px;
  --milo-contact-form-validation-state-radius: 16px;
  --milo-contact-form-validation-state-font-size: 0.94rem;
  --milo-contact-form-validation-state-line-height: 1.5;

  --milo-contact-form-validation-success-border: var(
    --milo-validation-success-border
  );
  --milo-contact-form-validation-success-background: var(
    --milo-validation-success-background
  );
  --milo-contact-form-validation-success-color: var(
    --milo-validation-success-color
  );
  --milo-contact-form-validation-error-border: var(
    --milo-validation-error-border
  );
  --milo-contact-form-validation-error-background: var(
    --milo-validation-error-background
  );
  --milo-contact-form-validation-error-color: var(
    --milo-validation-error-color
  );
  --milo-contact-form-validation-error-shadow: var(
    --milo-validation-error-shadow
  );
  /* #endregion Contact form validation */

  /* #region Contact form button */
  --milo-contact-form-button-font-weight: 600;
  --milo-contact-form-button-letter-spacing: 0.01em;
  --milo-contact-form-button-min-height: 58px;
  --milo-contact-form-button-font-size: 0.98rem;
  --milo-contact-form-button-text-color: var(--milo-ink);
  --milo-contact-form-button-background: var(--milo-pink);

  --milo-contact-form-button-shadow:
    0 1px 0 var(--milo-shadow-highlight-bold) inset,
    0 16px 36px var(--milo-shadow-ambient);
  --milo-contact-form-button-shadow-hover:
    0 1px 0 var(--milo-shadow-highlight-bold-hover) inset,
    0 20px 40px var(--milo-shadow-ambient-strong);
  --milo-contact-form-button-shadow-focus:
    0 0 0 3px var(--milo-focus-ring-accent),
    0 20px 40px var(--milo-shadow-ambient-strong);

  --milo-contact-form-buttons-margin-top: var(--milo-offset-fluid-2xs);
  /* #endregion Contact form button */

  /* #region Direct contact */
  --milo-contact-direct-gap: var(--milo-gap-fluid-md);
  --milo-contact-direct-link-color: var(--milo-text);
  --milo-contact-direct-link-color-hover: var(--milo-pink);
  /* #endregion Direct contact */

  /* #region Expectations cards */
  --milo-contact-expectations-card-radius: var(--milo-radius-lg);
  --milo-contact-expectations-card-padding: var(--milo-card-pad-md)
    var(--milo-card-pad-lg);
  --milo-contact-expectations-card-shadow:
    0 1px 0 var(--milo-shadow-highlight) inset,
    0 10px 24px var(--milo-shadow-ambient);
  --milo-contact-expectations-card-background: var(
    --milo-surface-base-grad-soft
  );
  --milo-contact-expectations-card-border-color: var(--milo-border-soft);
  --milo-contact-expectations-card-body-color: var(--milo-text-soft);
  /* #endregion Expectations cards */

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

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

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

  --milo-contact-reveal-y-card: 12px;
  --milo-contact-reveal-blur-card: 3px;
  /* #endregion Reveal defaults */

  /* #region Reveal delays */
  --milo-contact-delay-0: 0ms;
  --milo-contact-delay-1: 20ms;
  --milo-contact-delay-2: 70ms;
  --milo-contact-delay-3: 80ms;
  --milo-contact-delay-4: 90ms;
  --milo-contact-delay-5: 140ms;
  --milo-contact-delay-6: 160ms;
  /* #endregion Reveal delays */
}
/* #endregion 0) CONTACT PAGE TOKENS */

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

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

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

.milo-page-contact .milo-page-contact__form-shell.milo-reveal,
.milo-page-contact .milo-page-contact__expectations-card.milo-reveal {
  --milo-reveal-y: var(--milo-contact-reveal-y-card);
  --milo-reveal-blur: var(--milo-contact-reveal-blur-card);
}
/* #endregion Motion defaults */

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

.milo-page-contact__hero .milo-page-contact__hero-title.milo-reveal,
.milo-page-contact__hero .milo-h1.milo-reveal {
  --milo-delay: var(--milo-contact-delay-2);
}

.milo-page-contact__hero .milo-page-contact__hero-subline.milo-reveal,
.milo-page-contact__hero .milo-heading-subline.milo-reveal {
  --milo-delay: var(--milo-contact-delay-5);
}
/* #endregion HERO */

/* #region INQUIRY */
.milo-page-contact__inquiry .milo-page-contact__inquiry-intro.milo-reveal {
  --milo-delay: var(--milo-contact-delay-0);
}

.milo-page-contact__form-shell.milo-reveal {
  --milo-delay: var(--milo-contact-delay-4);
}
/* #endregion INQUIRY */

/* #region EXPECTATIONS */
.milo-page-contact__expectations-intro.milo-reveal {
  --milo-delay: var(--milo-contact-delay-0);
}

.milo-page-contact__expectations
  .milo-page-contact__expectations-card.milo-reveal:nth-child(1) {
  --milo-delay: var(--milo-contact-delay-1);
}

.milo-page-contact__expectations
  .milo-page-contact__expectations-card.milo-reveal:nth-child(2) {
  --milo-delay: var(--milo-contact-delay-4);
}

.milo-page-contact__expectations
  .milo-page-contact__expectations-card.milo-reveal:nth-child(3) {
  --milo-delay: var(--milo-contact-delay-6);
}
/* #endregion EXPECTATIONS */

/* #region DIRECT */
.milo-page-contact__direct .milo-page-contact__direct-heading.milo-reveal,
.milo-page-contact__direct .milo-heading-group.milo-reveal {
  --milo-delay: var(--milo-contact-delay-0);
}
/* #endregion DIRECT */

/* #region CTA */
.milo-page-contact__cta-title.milo-reveal {
  --milo-delay: var(--milo-contact-delay-0);
}

.milo-page-contact__cta-subline.milo-reveal {
  --milo-delay: var(--milo-contact-delay-3);
}

.milo-page-contact__cta .milo-cta__btn.milo-reveal {
  --milo-delay: var(--milo-contact-delay-6);
}
/* #endregion CTA */

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

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

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

.milo-page-contact .milo-page-contact__inquiry-intro,
.milo-page-contact .milo-page-contact__expectations-intro {
  gap: var(--milo-contact-intro-gap);
  padding-bottom: var(--milo-contact-intro-margin-bottom);
}

.milo-page-contact .milo-page-contact__inquiry-title h2,
.milo-page-contact .milo-page-contact__expectations-title h2 {
  max-width: var(--milo-contact-intro-title-max);
}

.milo-page-contact .milo-page-contact__inquiry-subline p {
  max-width: var(--milo-contact-intro-subline-max);
}

.milo-page-contact .milo-page-contact__expectations-card-title h3 {
  max-width: var(--milo-contact-card-title-max);
}

.milo-page-contact .milo-page-contact__expectations-card-body p {
  max-width: var(--milo-contact-card-body-max);
}
/* #endregion 1) PAGE SHELL */

/* #region 2) HERO */
.milo-page-contact__hero {
  --milo-section-pad-top: var(--milo-contact-hero-pad-top);
  --milo-section-pad-bottom: var(--milo-contact-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) INQUIRY LAYOUT */
.milo-page-contact__inquiry {
  --milo-section-pad-top: var(--milo-contact-inquiry-pad-top);
  --milo-section-pad-bottom: var(--milo-contact-inquiry-pad-bottom);

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

.milo-page-contact__inquiry-grid {
  --milo-grid-ratio-a: var(--milo-contact-inquiry-grid-ratio-a);
  --milo-grid-ratio-b: var(--milo-contact-inquiry-grid-ratio-b);
  align-items: start;
  column-gap: var(--milo-contact-inquiry-grid-column-gap);
  row-gap: var(--milo-contact-inquiry-grid-row-gap);
}

.milo-page-contact__form-column {
  justify-content: flex-start;
}
/* #endregion 3) INQUIRY LAYOUT */

/* #region 4) CONTACT FORM */

/* #region FORM SHELL */
.milo-page-contact__form-shell {
  width: 100%;
  max-width: var(--milo-contact-form-max-width);
  margin-left: auto;
  padding: var(--milo-contact-form-padding);
  border: 1px solid var(--milo-contact-form-border-color);
  border-radius: var(--milo-contact-form-radius);
  background: var(--milo-contact-form-background);
  box-shadow: var(--milo-contact-form-shadow);
}

.milo-page-contact__form-shell .milo-contact-form__form,
.milo-page-contact__form-shell .elementor-form {
  width: 100%;
}

.milo-page-contact__form-shell .elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--milo-contact-form-fields-gap);
}
/* #endregion FORM SHELL */

/* #region FIELD GROUPS */
.milo-page-contact__form-shell .elementor-field-group {
  margin: 0;
}

.milo-page-contact__form-shell .elementor-field-label {
  display: block;
  margin-bottom: var(--milo-contact-form-label-margin-bottom);
  color: var(--milo-contact-form-label-color);
  font-size: var(--milo-contact-form-label-font-size);
  line-height: var(--milo-contact-form-label-line-height);
  font-weight: var(--milo-contact-form-label-font-weight);
  letter-spacing: var(--milo-contact-form-label-letter-spacing);
}

.milo-page-contact__form-shell .elementor-field,
.milo-page-contact__form-shell .elementor-field-textual,
.milo-page-contact__form-shell textarea,
.milo-page-contact__form-shell select {
  width: 100%;
  border: 1px solid var(--milo-contact-form-field-border-color);
  border-radius: var(--milo-contact-form-field-radius);
  background: var(--milo-contact-form-field-background) !important;
  color: var(--milo-contact-form-field-text-color) !important;
  border-color: var(--milo-contact-form-field-border-color) !important;
  box-shadow: none !important;
  transition: var(--milo-contact-form-field-transition);
}
/* #endregion FIELD GROUPS */

/* #region INPUTS */
.milo-page-contact__form-shell input.elementor-field,
.milo-page-contact__form-shell input.elementor-field-textual,
.milo-page-contact__form-shell select.elementor-field-textual {
  min-height: var(--milo-contact-form-input-min-height);
  padding: var(--milo-contact-form-input-padding);
  font-size: var(--milo-contact-form-font-size);
  line-height: var(--milo-contact-form-input-line-height);
}

.milo-page-contact__form-shell textarea.elementor-field,
.milo-page-contact__form-shell textarea.elementor-field-textual {
  min-height: var(--milo-contact-form-textarea-min-height);
  padding: var(--milo-contact-form-textarea-padding);
  font-size: var(--milo-contact-form-font-size);
  line-height: var(--milo-contact-form-textarea-line-height);
  resize: vertical;
}

.milo-page-contact__form-shell input::placeholder,
.milo-page-contact__form-shell textarea::placeholder {
  color: var(--milo-contact-form-field-placeholder-color);
  opacity: 1;
}
/* #endregion INPUTS */

/* #region SELECT */
.milo-page-contact__form-shell .elementor-select-wrapper {
  position: relative;
}

.milo-page-contact__form-shell .elementor-select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--milo-contact-form-select-padding-right);
  cursor: pointer;
}

.milo-page-contact__form-shell .elementor-select-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--milo-contact-form-caret-offset-right);
  width: var(--milo-contact-form-caret-size);
  height: var(--milo-contact-form-caret-size);
  border-right: var(--milo-contact-form-caret-stroke) solid
    var(--milo-contact-form-dropdown-caret-color);
  border-bottom: var(--milo-contact-form-caret-stroke) solid
    var(--milo-contact-form-dropdown-caret-color);
  transform: translateY(var(--milo-contact-form-caret-translate-y))
    rotate(45deg);
  pointer-events: none;
}

.milo-page-contact__form-shell
  .elementor-select-wrapper
  .select-caret-down-wrapper,
.milo-page-contact__form-shell .elementor-select-wrapper i {
  display: none;
}
/* #endregion SELECT */

/* #region HOVER / FOCUS / ACTIVE */
.milo-page-contact__form-shell input:hover,
.milo-page-contact__form-shell textarea:hover,
.milo-page-contact__form-shell select:hover {
  border-color: var(--milo-contact-form-field-border-color-hover) !important;
  background: var(--milo-contact-form-field-background-hover) !important;
}

.milo-page-contact__form-shell input:focus,
.milo-page-contact__form-shell textarea:focus,
.milo-page-contact__form-shell select:focus {
  outline: none;
  border-color: var(--milo-contact-form-field-border-color-focus) !important;
  background: var(--milo-contact-form-field-background-focus) !important;
  box-shadow: var(--milo-contact-form-field-focus-shadow) !important;
}

.milo-page-contact__form-shell
  .elementor-field-group.elementor-field-required
  .elementor-field-label::after {
  content: " *";
  color: var(--milo-contact-form-required-asterisk-color);
}
/* #endregion HOVER / FOCUS / ACTIVE */

/* #region BUTTON */
.milo-page-contact__form-shell .e-form__buttons {
  margin-top: var(--milo-contact-form-buttons-margin-top);
}

.milo-page-contact__form-shell .e-form__buttons .elementor-button {
  width: 100%;
  min-height: var(--milo-contact-form-button-min-height);
  border: 1px solid transparent;
  border-radius: var(--milo-radius-pill);
  color: var(--milo-contact-form-button-text-color) !important;
  background: var(--milo-contact-form-button-background);
  box-shadow: var(--milo-contact-form-button-shadow, none);
  transition: var(--milo-contact-form-button-transition);
}

.milo-page-contact__form-shell .e-form__buttons .elementor-button:hover {
  transform: translateY(var(--milo-contact-form-button-hover-translate-y));
  filter: brightness(1.02);
  box-shadow: var(--milo-contact-form-button-shadow-hover, none);
}

.milo-page-contact__form-shell .e-form__buttons .elementor-button:focus {
  outline: none;
  box-shadow: var(--milo-contact-form-button-shadow-focus, none);
}

.milo-page-contact__form-shell .e-form__buttons .elementor-button-text {
  font-size: var(--milo-contact-form-button-font-size);
  font-weight: var(--milo-contact-form-button-font-weight);
  letter-spacing: var(--milo-contact-form-button-letter-spacing);
}
/* #endregion BUTTON */

/* #region VALIDATION / MESSAGES */
.milo-page-contact__form-shell .elementor-field-group .elementor-message {
  margin-top: var(--milo-contact-form-validation-message-margin-top);
  color: var(--milo-contact-form-validation-message-color);
  font-size: var(--milo-contact-form-validation-message-font-size);
  line-height: var(--milo-contact-form-validation-message-line-height);
}

.milo-page-contact__form-shell
  .elementor-field-group.elementor-has-error
  .elementor-field,
.milo-page-contact__form-shell
  .elementor-field-group.elementor-has-error
  .elementor-field-textual,
.milo-page-contact__form-shell
  .elementor-field-group.elementor-has-error
  textarea,
.milo-page-contact__form-shell
  .elementor-field-group.elementor-has-error
  select {
  border-color: var(--milo-contact-form-validation-error-border) !important;
  box-shadow: var(--milo-contact-form-validation-error-shadow) !important;
}

.milo-page-contact__form-shell .elementor-message.elementor-message-success,
.milo-page-contact__form-shell .elementor-message.elementor-message-danger {
  margin-top: var(--milo-contact-form-validation-state-margin-top);
  padding: var(--milo-contact-form-validation-state-padding);
  border-radius: var(--milo-contact-form-validation-state-radius);
  font-size: var(--milo-contact-form-validation-state-font-size);
  line-height: var(--milo-contact-form-validation-state-line-height);
}

.milo-page-contact__form-shell .elementor-message.elementor-message-success {
  border: 1px solid var(--milo-contact-form-validation-success-border);
  background: var(--milo-contact-form-validation-success-background);
  color: var(--milo-contact-form-validation-success-color);
}

.milo-page-contact__form-shell .elementor-message.elementor-message-danger {
  border: 1px solid var(--milo-contact-form-validation-error-border);
  background: var(--milo-contact-form-validation-error-background);
  color: var(--milo-contact-form-validation-error-color);
}
/* #endregion VALIDATION / MESSAGES */

/* #endregion 4) CONTACT FORM */

/* #region 5) EXPECTATIONS */
.milo-page-contact__expectations {
  --milo-section-pad-top: var(--milo-contact-expectations-pad-top);
  --milo-section-pad-bottom: var(--milo-contact-expectations-pad-bottom);

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

.milo-page-contact__expectations-intro {
  margin-bottom: var(--milo-offset-fluid-md);
}

.milo-page-contact__expectations-grid {
  align-items: start;
  column-gap: var(--milo-contact-expectations-grid-column-gap);
  row-gap: var(--milo-contact-expectations-grid-row-gap);
}

.milo-page-contact__expectations-card {
  max-width: 100%;
  padding: var(--milo-contact-expectations-card-padding);
  border: 1px solid var(--milo-contact-expectations-card-border-color);
  border-radius: var(--milo-contact-expectations-card-radius);
  background: var(--milo-contact-expectations-card-background, transparent);
  box-shadow: var(--milo-contact-expectations-card-shadow, none);
}

.milo-page-contact__expectations-card-body p {
  color: var(--milo-contact-expectations-card-body-color);
}
/* #endregion 5) EXPECTATIONS */

/* #region 6) DIRECT CONTACT */
.milo-page-contact .milo-page-contact__direct {
  --milo-section-pad-top: var(--milo-contact-direct-pad-top);
  --milo-section-pad-bottom: var(--milo-contact-direct-pad-bottom);

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

.milo-page-contact .milo-page-contact__direct-heading {
  gap: var(--milo-contact-direct-gap);
}

.milo-page-contact .milo-page-contact__direct a,
.milo-page-contact .milo-page-contact__direct-link {
  text-decoration: none;
  color: var(--milo-contact-direct-link-color);
}

.milo-page-contact .milo-page-contact__direct a:hover,
.milo-page-contact .milo-page-contact__direct-link:hover {
  color: var(--milo-contact-direct-link-color-hover);
}
/* #endregion 6) DIRECT CONTACT */

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

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

    --milo-contact-form-max-width: 560px;
  }
}

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

    --milo-contact-form-radius: var(--milo-radius-md);
    --milo-contact-form-input-min-height: 52px;
    --milo-contact-form-textarea-min-height: 140px;
    --milo-contact-form-button-min-height: 52px;

    --milo-contact-form-font-size: 0.98rem;
    --milo-contact-form-button-font-size: 0.96rem;
    --milo-contact-form-label-font-size: 0.88rem;

    --milo-contact-expectations-card-radius: var(--milo-radius-md);
  }

  .milo-page-contact__inquiry-grid {
    grid-template-columns: var(--milo-contact-inquiry-grid-columns-1024);
  }

  .milo-page-contact__expectations-card {
    max-width: var(--milo-contact-expectations-card-max-width-1024);
  }
}

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

    --milo-contact-form-textarea-min-height: 132px;
  }

  .milo-page-contact__expectations-grid {
    grid-template-columns: var(--milo-contact-expectations-grid-columns-768);
  }
}

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

    --milo-contact-form-input-min-height: 50px;
    --milo-contact-form-textarea-min-height: 124px;
    --milo-contact-form-font-size: 0.96rem;
  }
}
/* #endregion 8) RESPONSIVE */

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

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

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

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

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

  .milo-page-contact .milo-reveal,
  .milo-page-contact .milo-page-contact__form-shell .elementor-field,
  .milo-page-contact .milo-page-contact__form-shell .elementor-field-textual,
  .milo-page-contact .milo-page-contact__form-shell textarea,
  .milo-page-contact .milo-page-contact__form-shell select,
  .milo-page-contact .milo-page-contact__form-shell .elementor-button,
  .milo-page-contact .milo-page-contact__expectations-card,
  .milo-page-contact .milo-cta {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .milo-page-contact__form-shell .e-form__buttons .elementor-button:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: var(--milo-contact-form-button-shadow, none) !important;
  }
}
/* #endregion 9) REDUCED MOTION */