* {
    box-sizing: border-box;
  }

  @font-face {
    font-family: 'CanvaSans';
    src: url('../fonts/CanvaSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'CanvaSans';
    src: url('../fonts/CanvaSans-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
  }
  
  p {
    margin: 0 0 1rem 0; /* top right bottom left */
  }

  a:link {
    color: #1b7895; /* Unvisited link */
  }

  a:hover {
    color: #FF8210; /* Hover state (e.g. mouse over) */
  }

  .agent-name {
    font-family: 'CanvaSans', sans-serif;
    text-transform: uppercase;
    font-size: 4.5rem;
    color: #1B7895;
    text-align: left;
    line-height: 1; /* keeps line spacing tight */
    margin: 1rem auto;
    padding: 0;
    overflow: visible;        /* Allows content to overflow container */
  }

  .hidden {
    display: none;
  }

  .agent-long-name {
  font-family: 'CanvaSans', sans-serif;
  text-transform: uppercase;
  font-size: 4.2rem;
  color: #1B7895;
  text-align: left;
  line-height: 1;
  margin: 1rem auto;
  padding: 0;
  letter-spacing: -0.07em; /* <--- Add this line */
}
  
  .giuliana-name-side {
    font-family: 'CanvaSans', sans-serif;
    text-transform: uppercase;
    font-size: 4.5rem;
    color: #1B7895;
    text-align: left;
    line-height: 1; /* keeps line spacing tight */
    margin: 1rem auto;
    padding: 0;
    overflow: visible;        /* Allows content to overflow container */
  }

  .giuliana-name-top {
    font-family: 'CanvaSans', sans-serif;
    text-transform: uppercase;
    font-size: 4.5rem;
    color: #1B7895;
    text-align: left;
    line-height: 1; /* keeps line spacing tight */
    margin: 1rem auto;
    padding: 0;
    overflow: visible;        /* Allows content to overflow container */
    display: none;
  }

  .bio-text {
    font-size: 1rem;
    line-height: 1.25;
    text-align: justify;
    text-justify: inter-word;
    vertical-align: top;
    margin: 1rem auto;
    margin-top: .5rem; /* REMOVE the 6rem offset */
    padding: 0;
  }


  .left-top-box {
    width: 90%;
    height: auto;
    margin: 1rem auto;
    z-index: 10;
    position: relative; /* z-index works with positioned elements */
    border-radius: 8px;
    margin-left: 1rem; /* Adjust value as needed */

  }

  .right-top-box {
    width: 90%;
    margin: 1rem auto;
    z-index: 10;
    position: relative; /* z-index works with positioned elements */
    border-radius: 8px;
  }

  .left-top-box,
  .right-top-box {
    margin-top: 0; /* REMOVE the 6rem offset */
  }

  body {
    margin: 1rem;
    font-family: sans-serif;
    background: #f0efec;
  }

  /* Override nav-bar.css padding-top for agent pages */
  body:not(.logged-in) {
    padding-top: 0rem !important;
  }

  .page-container {
    display: flex;
    max-width: 100%;
    margin: 1rem;
    margin-top: 3rem; /* Override stacked margins for wider orientation */
    gap: 1rem;
    height: calc(100vh - 2rem); /* fill window, account for top/bottom margin */
  }
  
  .left-section {
    flex: 0 0 45%;
    padding: 2rem;
    border-radius: 8px;
  }
  
  .right-section {
    flex: 0 0 55%;
    padding: 2rem;
    border-radius: 8px;
    height: 100%;
  }

  .left-space {
    width: 90%;
    margin: 1rem auto;
    z-index: 10;
    position: relative; /* z-index works with positioned elements */
    border-radius: 8px;
    /* Height will be set by JavaScript - start hidden to prevent flash */
    height: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in;
  }
  
  .right-space {
    width: 90%;
    margin: 1rem auto;
    z-index: 10;
    position: relative; /* z-index works with positioned elements */
    border-radius: 8px;
  }

  .left-space,
  .right-space {
    /* Default height removed - left-space height set by JS */
  }
  
  /* Show left-space once height is calculated */
  .left-space.synced {
    opacity: 1;
  }
    
  .headshot-box {
    width: 30rem;
    height: 30rem;
    margin: 1rem auto;
    z-index: 10;
    border-radius: 50%;
    overflow: hidden; /* ensures circular crop works */
    display: flex;
    margin-left: 1rem; /* Adjust value as needed */
    position: relative;
    scale: 0.9;
    /* Hide until left-space is synced to prevent flash */
    opacity: 0;
    transition: opacity 0.2s ease-in;
  }
  
  /* Show headshot once left-space is synced */
  .left-space.synced ~ .headshot-box {
    opacity: 1;
  }
  
  .headshot-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  
  .circular-headshot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    object-fit: cover;
    filter: grayscale(100%);
    width: auto;
    
    max-width: none;
  }

  .right-author-box {
    width: 90%;
    margin: 1rem auto;
    margin-top: 4rem;
    z-index: 10;
    position: relative; /* z-index works with positioned elements */
    border-radius: 8px;
  }
  
  @media screen and (max-width: 1200px) {
    .page-container {
      flex-direction: column;
      align-items: center;
      margin-top: 7rem; /* REMOVE the 6rem offset */
    height: calc(100vh - 2rem); /* fill window, account for top/bottom margin */
  }

  .hidden {
    display: block;
  }
  
    .left-space {
      height: 0rem;
    }

    .left-section,
    .right-section {
      flex: auto;
      padding: 1rem;
    }

    .left-section {
      padding: 0.5rem 1rem;
    }

    .right-section {
      margin-top: -2rem;
    }

    .left-top-box {
      align-items: center;
    }

    .agent-name, 
    .agent-long-name,
    .giuliana-name-top {
      font-size: 3.75rem;
      align-items: center;
      text-align: center;
      margin: auto;
      letter-spacing: 0em; /* <--- Add this line */
    }
    .giuliana-name-side {
    display: none;
    }

    .giuliana-name-top {
      display: contents;
    }

    .agent-name, 
    .agent-long-name,
    .giuliana-name-top {
      font-size: 2.5rem;
      margin-top: 2rem;
    }
    
  .left-space,
  .right-space {
    display: none;
  }

    .bio-text {
      font-size: .8rem;
      line-height: 1.5;
      text-align: left;
      max-width: 350px;
      margin: auto;
      margin-top: -6rem;

    }
 
    .headshot-box {
      scale: 0.5;
      margin: auto; /* less top and bottom space */
      margin-top: -6rem;
    }

  }

  @media screen and (max-height: 720px) {
    .page-container {
      scale: .9;
    }
  }