:root {
  --maeveport-about-us-statement-backdrop-shape-height: 8em;
  --maeveport-about-us-statement-angle-start: calc(50% + 13em);
  --maeveport-about-us-statement-angle-width: 15em;
  --maeveport-about-us-statement-angle-end: calc(
    var(--maeveport-about-us-statement-angle-start) +
      var(--maeveport-about-us-statement-angle-width)
  );
  --maeveport-about-us-statement-cursor-x: 50%;
  --maeveport-about-us-statement-cursor-y: 50%;
}

.maeveport-about-us-statement {
  position: relative;
  clip-path: polygon(
    0 var(--maeveport-about-us-statement-backdrop-shape-height),
    var(--maeveport-about-us-statement-angle-start)
      var(--maeveport-about-us-statement-backdrop-shape-height),
    var(--maeveport-about-us-statement-angle-end) 0,
    100% 0,
    100% 100%,
    0 100%
  );
  background-color: var(--primary); /* Fallback, actual gradient on backdrop */
  color: var(--grey-00);
  overflow: hidden; /* Ensures clip-path contains pseudo-elements or transformed children if any */
}

.maeveport-about-us-statement__backdrop-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--primary); /* Base color from user spec */
  background-image:
    radial-gradient(63% 54% at 91% 1%, #5fdfb490 1%, #ff000000 99%),
    radial-gradient(52% 107% at 53% 86%, #00d08a 0%, #009663ff 100%);
  background-size: 100% 100%;
}

.maeveport-about-us-statement__cursor-highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle at var(--maeveport-about-us-statement-cursor-x)
      var(--maeveport-about-us-statement-cursor-y),
    #009260 3%,
    #00926000 59%
  );
  filter: blur(10px);
  pointer-events: none;
  /* Ensure it's above the static backdrop but below content if not managed by z-index on parent */
  z-index: 1;
}

.maeveport-about-us-statement__content-grid {
  position: relative;
  z-index: 2; /* Ensures content is above backdrop elements */
  display: grid;
  grid-template-columns: 1fr 1fr; /* Reverted to 1fr 1fr */
  gap: 2rem; /* Adjust gap as needed */
  padding-top: calc(
    var(--maeveport-about-us-statement-backdrop-shape-height) + 4rem
  ); /* Ensure content clears the clip-path top */
  padding-bottom: 4rem; /* Example padding */
  min-height: 80vh; /* Increased from 50vh */
}

.maeveport-about-us-statement__text-column {
  /* Add padding-top for desktop view to align with heading */
  /* padding-top: 1rem; */ /* Removed as per user request */
}

.maeveport-about-us-statement__text-column p {
  font-size: var(--font-size-body-md);
  line-height: 1.7;
  margin: 0;
}

.maeveport-about-us-statement__title-column {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.maeveport-about-us-statement__title {
  font-family:
    'Henderson BCG Sans', sans-serif; /* Assuming Henderson is loaded globally */
  font-size: var(
    --font-size-heading-xl
  ); /* Reduced from --font-size-display-sm */
  line-height: 1.4; /* Increased from 1.2 */
  font-weight: 300; /* Reduced from 400 */
  margin: 0;
  max-width: 20ch; /* Reduced from 25ch */
}

/* Styles for GSAP SplitText (lines will be display:block and position:relative) */
.maeveport-about-us-statement__title > div {
  overflow: hidden; /* To clip the text during animation */
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .maeveport-about-us-statement__title {
    margin-bottom: 5rem;
  }
}

@media (max-width: 991.98px) {
  /* Tablet */
  .maeveport-about-us-statement__content-grid {
    /* grid-template-columns: 1fr; */ /* Removed to keep side-by-side layout from desktop */
    padding-top: calc(
      var(--tablet-backdrop-shape-height) + 4rem
        /* Now uses tablet-specific height and increased additive */
    );
    min-height: 50vh; /* Reduced from 60vh */
  }

  .maeveport-about-us-statement__text-column p {
    margin-bottom: 5rem;
  }

  .maeveport-about-us-statement__text-column {
    /* margin-bottom: 2rem; */ /* Removed as columns are no longer stacked */
    /* padding-top: 0; */ /* Removed to inherit desktop padding-top for alignment */
  }

  .maeveport-about-us-statement__title {
    font-size: var(
      --font-size-heading-lg
    ); /* Adjust for tablet, was --font-size-heading-xl */
    max-width: 30ch; /* Adjusted from none */
  }

  .maeveport-about-us-statement {
    /* Define specific clip-path variables for tablets */
    --tablet-backdrop-shape-height: 6.8em;
    --tablet-angle-start-offset: 14.5vw;
    --tablet-angle-width-value: 16.8vw;

    /* Override the clip-path directly for tablets */
    clip-path: polygon(
      0 var(--tablet-backdrop-shape-height),
      calc(50% + var(--tablet-angle-start-offset))
        var(--tablet-backdrop-shape-height),
      calc(
          50% + var(--tablet-angle-start-offset) +
            var(--tablet-angle-width-value)
        )
        0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
}

/* iPad Pro specific adjustments */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .maeveport-about-us-statement__content-grid {
    min-height: 50vh; /* Reduced from 60vh */
    /* Add specific padding-top for iPad Pro */
    padding-top: calc(var(--ipad-pro-backdrop-shape-height) + 3rem);
  }

  .maeveport-about-us-statement {
    /* Define specific clip-path variables for iPad Pro */
    --ipad-pro-backdrop-shape-height: 8.9em;
    --ipad-pro-angle-start-offset: 14.5vw; /* Consistent with tablet */
    --ipad-pro-angle-width-value: 16.8vw; /* Consistent with tablet */

    /* Override the clip-path directly for iPad Pro */
    clip-path: polygon(
      0 var(--ipad-pro-backdrop-shape-height),
      calc(50% + var(--ipad-pro-angle-start-offset))
        var(--ipad-pro-backdrop-shape-height),
      calc(
          50% + var(--ipad-pro-angle-start-offset) +
            var(--ipad-pro-angle-width-value)
        )
        0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
}

@media (max-width: 820px) {
  /* Mobile & iPad Mini */
  .maeveport-about-us-statement__text-column {
    display: none; /* Hide paragraph on mobile as per reference */
    /* padding-top is already 0 from tablet styles if inherited, or can be explicitly set if needed */
  }

  .maeveport-about-us-statement__title {
    font-size: var(--font-size-heading-md);
    max-width: 25ch;
    text-align: left;
  }

  .maeveport-about-us-statement {
    --maeveport-about-us-statement-backdrop-shape-height: 4.375em; /* Approx 70px (70/16) */
    /* Define simple offsets for mobile, calculations will happen directly in clip-path polygon */
    --mobile-angle-start-offset: 7vw; /* Approx 30.1px on iPhone 14 Pro Max */
    --mobile-angle-width-value: 17vw; /* Approx 70px on iPhone 14 Pro Max */

    /* Override the clip-path directly for mobile with simpler variable substitution */
    clip-path: polygon(
      0 var(--maeveport-about-us-statement-backdrop-shape-height),
      calc(50% + var(--mobile-angle-start-offset))
        var(--maeveport-about-us-statement-backdrop-shape-height),
      calc(
          50% + var(--mobile-angle-start-offset) +
            var(--mobile-angle-width-value)
        )
        0,
      100% 0,
      100% 100%,
      0 100%
    );
  }

  .maeveport-about-us-statement__content-grid {
    padding-top: calc(
      var(--maeveport-about-us-statement-backdrop-shape-height) + 3rem
        /* Increased additive part */
    );
    padding-bottom: 5rem;
    min-height: auto;
    grid-template-columns: 1fr;
  }
}