.site-header a { color: #fff; }
.site-header a:hover { opacity:.8; }
@media (max-width: 720px) {
  #primaryNav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
  }
}


/* === Mobile responsiveness fixes added by ChatGPT === */
@media screen and (max-width: 768px) {

  /* About Us hero text sizing / wrapping */
  .div-block-2 {
    font-size: 36px;
    line-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .div-block-3 {
    font-size: 16px;
    line-height: 22px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 90vw;
    margin-top: 24px;
    margin-bottom: 24px;
    color: #ffffff;
    text-align: center;           /* center horizontally */
    margin-left: auto;            /* ensure proper centering */
    margin-right: auto;
}

  /* allow gradient section to grow naturally instead of clipping text */
  .body-2 {
    background-image: linear-gradient(360deg, #000, #fff 80%);
  }

  /* Project list spacing / overlap fix */
  .text-block,
  .text-block-2,
  .text-block-3,
  .text-block-4,
  .text-block-7,
  .text-block-9,
  .text-block-10,
  .text-block-11,
  .text-block-12,
  .text-block-13,
  .text-block-14,
  .text-block-15,
  .text-block-16,
  .text-block-17,
  .text-block-18,
  .text-block-19,
  .text-block-20,
  .text-block-21,
  .text-block-22,
  .text-block-23,
  .text-block-24,
  .text-block-25,
  .text-block-26,
  .text-block-27 {
    margin-bottom: 1.25rem;
  }

  /* kill absolute positioning on headings that are stacking on each other */
  .text-block-29,
  .text-block-30 {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .text-block-31 {
    position: static !important;
    margin-bottom: 1.5rem;
    text-align: center;
  }
}


/* === Mobile refinements v4 === */
@media screen and (max-width: 768px) {

  /* ABOUT US page mobile handling */
  /* Gradient now: white (top) -> gray -> black (bottom),
     stretched so dark carries all the way through the body text */
  .body-2 {
    background-image: linear-gradient(
      180deg,
      #ffffff 0%,
      #d9d9d9 30%,
      #4a4a4a 60%,
      #000000 100%
    );
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* Paragraph body under ABOUT US heading */
  .div-block-3 {
    font-size: 16px;
    line-height: 22px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 90vw;
    margin-top: 24px;
    margin-bottom: 24px;
    color: #ffffff;
    text-align: center;           /* center horizontally */
    margin-left: auto;            /* ensure proper centering */
    margin-right: auto;
}

  /* Leave .div-block-2 (ABOUT US heading) alone per request */

  /* PROJECTS overlap fix: keep blocks in normal flow and add spacing */
  .text-block-28,
  .text-block-29,
  .text-block-30,
  .text-block-31,
  .text-block-32,
  .text-block-33 {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-bottom: 1.5rem;
    text-align: left;
  }

  /* restore tighter spacing elsewhere */
  .text-block,
  .text-block-2,
  .text-block-3,
  .text-block-4,
  .text-block-5,
  .text-block-6,
  .text-block-7,
  .text-block-8,
  .text-block-9,
  .text-block-10,
  .text-block-11,
  .text-block-12,
  .text-block-13,
  .text-block-14,
  .text-block-15,
  .text-block-16,
  .text-block-17,
  .text-block-18,
  .text-block-19,
  .text-block-20,
  .text-block-21,
  .text-block-22,
  .text-block-23,
  .text-block-24,
  .text-block-25,
  .text-block-26,
  .text-block-27 {
    margin-bottom: 0.5rem;
  }
}