: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-statement-border-angle-1: 0deg;
  --maeveport-statement-border-angle-2: 180deg;
}

.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: #1c1c1c; /* Changed from var(--primary) and explicitly set */
  color: var(--grey-00);
  overflow: hidden; /* Ensures clip-path contains pseudo-elements or transformed children if any */
}

.maeveport-about-us-statement__content-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(
    var(--maeveport-about-us-statement-backdrop-shape-height) + 4rem
  );
  padding-bottom: 4rem;
  min-height: 80vh;
}

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

.maeveport-about-us-statement__title-border-wrapper {
  position: relative;
  display: inline-block;
  padding: 2.5rem 6rem;
  border-radius: 100%;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 0;
}

.maeveport-about-us-statement__title-border-wrapper::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 100%;
  pointer-events: none;
  z-index: 0;
  background-size: 100% 100%;
  background-position: 0 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border: 0.15rem solid transparent;
  padding: 0;
  background-image: conic-gradient(
    from var(--maeveport-statement-border-angle-1) at 50% 50%,
    #12aa72 0deg,
    #12aa72 8deg,
    transparent 12deg,
    transparent 360deg
  );
}

.maeveport-about-us-statement__title-border-wrapper::after {
  content: '';
  position: absolute;
  left: -2.5rem;
  right: -2.5rem;
  top: -2.5rem;
  bottom: -2.5rem;
  border-radius: 100%;
  pointer-events: none;
  z-index: 0;
  background-size: 100% 100%;
  background-position: 0 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border: 0.15rem solid transparent;
  background-image: conic-gradient(
    from var(--maeveport-statement-border-angle-2) at 50% 50%,
    #12aa72 0deg,
    #12aa72 8deg,
    transparent 12deg,
    transparent 360deg
  );
}

.maeveport-about-us-statement__title {
  position: relative;
  z-index: 1;
  background: transparent;
  font-family: 'Henderson BCG Sans', sans-serif;
  font-size: var(--font-size-heading-xl);
  line-height: 1.4;
  font-weight: 300;
  margin: 3rem 0;
  max-width: 40ch;
  text-align: center;
}

/* 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: 991.98px) {
  /* Tablet */
  .maeveport-about-us-statement__content-grid {
    padding-top: calc(var(--tablet-backdrop-shape-height) + 4rem);
    min-height: 50vh;
  }

  .maeveport-about-us-statement__title {
    font-size: var(--font-size-heading-lg);
    max-width: 50ch;
  }

  .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__title {
    font-size: var(--font-size-heading-md);
    max-width: 95vw;
    text-align: center;
    margin: 2rem 0;
  }
  .maeveport-about-us-statement__title-border-wrapper {
    padding: 1.2rem 1.2rem;
  }

  .maeveport-about-us-statement__title-border-wrapper::before,
  .maeveport-about-us-statement__title-border-wrapper::after {
    background-image: none;
    border: none;
  }

  .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
    );
    padding-bottom: 5rem;
    min-height: auto;
  }
}