.hero-section {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-global-sm);
    /* padding-bottom:var(--spacing-section-vertical-lg); */
    padding-top: 0;
    /* Height constrained to viewport minus fixed header (6rem) */
    height: calc(100svh - 6rem);
    max-height: calc(100svh - 6rem);
    width: 100%;
    position: relative;
    overflow: visible;
    overflow-x: clip;
    box-sizing: border-box;
  }

  /* Background gradient container that bleeds into sections below.
     z-index: 1 places it above adjacent sections' backgrounds in the
     parent stacking context (no stacking context on .hero-section). */
  .hero-background-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250%;
    height: 250%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
  }

  /* SVG gradient fills the container */
  .hero-background-gradient .hero-gradient-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
    min-height: 0; /* Allow flex child to shrink */
    max-height: 100%; /* Constrain to parent height */
    position: relative;
    z-index: 2;
  }

  .hero-frame {
    display: grid;
    grid-template-rows: 1fr; /* Ensure grid fills available height */
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0; /* Allow flex child to shrink */
    max-height: 100%; /* Constrain to parent height */
    box-sizing: border-box;
    overflow: hidden; /* Prevent content overflow */
    z-index: 0; /* Create stacking context */
  }

  .hero-media-shape {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-height: 0; /* Allow grid item to shrink */
    position: relative;
    overflow: visible; /* Allow debug SVG to be visible */
    z-index: 0;
  }

  .hero-media-shape svg {
    position: absolute;
    width: 0;
    height: 0;
  }

  /* Smooth transition for clip path on resize */
  #hero-clip path {
    transition: d 0.1s ease-out;
  }

  .hero-media-bg {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    clip-path: url(#hero-clip);
  }

  /* Fallback for browsers without clip-path support */
  .no-clippath .hero-media-bg {
    border-radius: 48px;
    clip-path: none;
  }

  /* IE11 fallback - simple rounded corners */
  @supports not (clip-path: url(#test)) {
    .hero-media-bg {
      border-radius: 48px;
    }
  }

  .hero-content {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    justify-self: start;
    align-self: end;
    width: fit-content;
    padding: var(--spacing-card-padding-md);
    max-width: 50%;
    max-height: 100%; /* Constrain to frame height */
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 1;
  }

  .hero-text-section {
    display: flex;
    flex-direction: column;
  }

  .hero-heading {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-heading-xl);
    line-height: var(--line-height-heading);
    letter-spacing: -0.08rem;
    margin: 0;
    color: var(--color-white);
  }

  .hero-description {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-body);
    margin: 0;
    color: var(--color-white);
  }

  /* Mobile description wrapper - hidden on desktop */
  .hero-description-wrapper {
    display: none;
    width: 100%;
    max-width: 87rem;
  }

  .hero-description-wrapper .hero-description {
    max-width: 100%;
  }

  /* Responsive styles */
  @media (max-width: 1024px) {
    .hero-section {
      /* Match desktop: viewport minus fixed header (6rem) */
      height: calc(100svh - 6rem);
      max-height: calc(100svh - 6rem);
      padding: var(--section-padding-global);
      padding-top: 0;
    }

    .hero-heading {
      font-size: 2.25rem;
      letter-spacing: -0.045rem;
    }

    .hero-description {
      font-size: 1rem;
    }

    .hero-content {
      width: auto;
      padding-top: 1rem;
      padding-right: 1rem;
      padding-bottom: 0;
      padding-left: 1rem;
      max-width: 75%;
    }

    /* Hide paragraph inside hero-content on mobile */
    .hero-content .hero-description {
      display: none;
    }

    /* Show paragraph wrapper on mobile */
    .hero-description-wrapper {
      display: block;
      padding-top: 1rem;
      padding-left: 1rem;
      flex-shrink: 0;
      /* Constrain to remaining space within hero-section */
      max-height: calc(100% - 2rem);
      overflow: hidden;
    }

    .hero-text-section {
      gap: 1rem;
    }

    .hero-text-section :is(h1, h2, h3, h4, h5, h6) {
      margin-top: 0;
      margin-bottom: 0;
      line-height: 1.2;
    }
  }

  @media (max-width: 767px) {
    .hero-content {
      padding-top: 1rem;
      padding-bottom: 0;
      padding-left: 0;
      max-width: 77%;
    }

    .hero-heading {
      font-size: 1.75rem;
      letter-spacing: -0.035rem;
    }

    .hero-description {
      font-size: 0.875rem;
    }

    .hero-description-wrapper {
      max-height: calc(100% - 2rem);
      padding-left: 0;
    }

    /* Mobile fallback border radius */
    .no-clippath .hero-media-bg {
      border-radius: 18px;
    }

    @supports not (clip-path: url(#test)) {
      .hero-media-bg {
        border-radius: 18px;
      }
    }
  }