*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --maroon: #800000;
    --almostwhite: #FADADD;
    --lightgrey: #f9f9f9;
  }
  body { font-family: 'Source Sans 3', sans-serif; background: var(--lightgrey); }
 
  .beyond-section {
    background-color: var(--lightgrey);
    padding: 2rem 1rem;         
  }
 
  #beyond {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78vh;
    background: #430000;
    overflow: hidden;
  }

  #beyond::before,
  #beyond::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  #beyond::before {
    background:
      linear-gradient(90deg, rgba(45,0,0,.92) 0%, rgba(70,0,0,.76) 36%, rgba(70,0,0,.22) 68%, rgba(45,0,0,.12) 100%),
      linear-gradient(to top, rgba(0,0,0,.38), transparent 45%);
    z-index: 1;
  }

  #beyond::after {
    inset: auto auto 3.5rem clamp(2rem, 5vw, 5rem);
    width: min(38vw, 460px);
    height: 5px;
    background: rgba(250,218,221,.65);
    border-radius: 999px;
    z-index: 2;
  }
 
  .text-content {
    position: relative;
    display: flex; flex-direction: column;
    justify-content: center;
    max-width: 680px;
    padding: clamp(5rem, 8vw, 7rem) clamp(2rem, 5vw, 5rem);   
    z-index: 2;
  }
 
  .text-content .line-beyond {
    font-family: 'Lato', sans-serif;
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 300;         
    color: rgba(250,218,221,.72);
    letter-spacing: -.02em;
    line-height: 1;
  }

  .text-content .line-field {
    font-family: 'Lato', sans-serif;
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 1.6rem;        
  }
 
  .text-content p {
    font-size: 1.06rem;
    line-height: 1.8;
    color: rgba(255,255,255,.84);
    max-width: 48ch;
    font-weight: 300;
  }
 
  .image-section {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .image-section img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 68% center;
    display: block;
  }
 
  @media (max-width: 768px) {
    #beyond {
      min-height: 76vh;
      align-items: flex-end;
    }
    #beyond::before {
      background: linear-gradient(to top, rgba(45,0,0,.96) 0%, rgba(70,0,0,.78) 48%, rgba(45,0,0,.24) 100%);
    }
    #beyond::after {
      left: 1.8rem;
      bottom: 2rem;
      width: 46vw;
    }
    .image-section {
      height: auto;
      min-height: 100%;
    }
    .text-content {
      padding: 5rem 1.8rem 5rem;
      text-align: left;
      min-height: auto;
    }
    .text-content p { max-width: 100%; }
  }