* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: clamp(16px, 1vw, 24px);
  line-height: 1.6;
  background-color: #5A6772;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.banner {
  background-color: #3fa9f5;
  color: #ffffff;
  padding: clamp(12px, 0.8vw, 24px) clamp(16px, 1.1vw, 32px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.banner-left h1 {
  font-size: clamp(32px, 2.1vw, 48px);
}

.banner-right {
  display: flex;
  gap: clamp(8px, 0.5vw, 16px);
}

.nav-button {
  text-decoration: none;
  color: #ffffff;
  padding: clamp(8px, 0.5vw, 16px) clamp(16px, 1.1vw, 32px);
  border-radius: 8px;
  background-color: #1a75d2;
  font-size: clamp(16px, 1vw, 24px);
}

.nav-button:hover {
  background-color: #145ea8;
}

.contact-button {
  background-color: #1a75d2;
}

main.main-content {
  flex: 1 0 auto;
  padding: clamp(24px, 1.7vw, 48px) 0;
  max-width: 1920px;
  margin: 0 auto;
}

#projects {
  background-color: #5A6772;
  padding: clamp(24px, 1.7vw, 48px) clamp(32px, 2.2vw, 100px);
}

#projects h2,
.section h2,
.section h3 {
  font-size: clamp(24px, 2.5vw, 50px);
  padding-bottom: clamp(8px, 0.5vw, 16px);
  color: #3fa9f5;
}

#projects h2 {
  text-align: center;
  font-size: clamp(32px, 2.1vw, 48px);
  margin-top: clamp(16px, 1vw, 32px);
  margin-bottom: clamp(16px, 1vw, 32px);
}

.case-studies-container {
  display: flex;
  justify-content: space-between;
  gap: clamp(16px, 1.1vw, 50px);
  flex-wrap: nowrap;
  max-width: 1920px;
  margin: 0 auto;
}

.case-study {
  flex: 0 0 5.9vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.image-placeholder {
  width: 17.5vw;
  height: 17.5vw;
  background-color: #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: clamp(16px, 1vw, 24px);
  margin-bottom: clamp(8px, 0.5vw, 16px);
}

.case-study h3 {
  font-size: clamp(18px, 1.3vw, 28px);
  margin: clamp(4px, 0.3vw, 8px) 0;
  color: #3fa9f5;
}

.case-study p {
  font-size: clamp(16px, 1vw, 24px);
  color: #ffffff;
}

.responsive-header {
  text-align: center;
  font-size: clamp(2rem, 4vw, 8rem);
  padding-bottom: 1.5rem;
  color: #ffffff !important;
}

a {
  color: #ffffff;
}

.main-content a {
  color: #3fa9f5;
}

a:hover {
  text-decoration: underline;
}

footer.banner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: clamp(12px, 0.8vw, 24px) clamp(16px, 1.1vw, 32px);
  gap: clamp(8px, 1vw, 16px);
  text-align: center;
}

.contact-item {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
}

.contact-item:not(:last-child)::after {
  content: " |";
  margin-left: 0.25rem;
}

.case-study-link {
  text-decoration: none;
  color: inherit;
  flex: 0 0 calc((1920px - 4*50px)/3);
}

.case-study-link .case-study {
  cursor: pointer;
}

.section {
  margin-bottom: clamp(24px, 1.7vw, 48px);
}

.section p,
.section ul,
.bullet-container p {
  max-width: 1000px;
  margin: 0 auto clamp(8px, 0.5vw, 16px);
  text-align: left;
}

.graph-image {
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.image-container {
  display: flex;
  justify-content: center;
  margin: clamp(8px, 0.5vw, 16px) 0 clamp(16px, 1vw, 32px) 0;
}

.image-summary {
  max-width: 800px;
  margin: clamp(8px, 0.5vw, 16px) auto clamp(16px, 1vw, 32px) auto;
  font-size: clamp(16px, 1vw, 24px);
  text-align: center;
}

.footnote {
  font-size: clamp(12px, 0.7vw, 16px);
  color: #ffffff;
  margin-top: 0.2rem;
}

.banner-left a.home-link {
  text-decoration: none !important;
  color: inherit;
}

.home-link h1 {
  margin: 0;
}

/* ---------- Homepage case-study images: square and edge-to-edge (with padding) ---------- */
:root {
  --cs-gap: clamp(12px, 1.1vw, 24px);
  --cs-pad: clamp(16px, 2vw, 48px);
}

.case-studies-container {
  display: flex;
  gap: var(--cs-gap);
  padding: 0 var(--cs-pad);
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0 auto;
}

.case-study-link {
  text-decoration: none;
  color: inherit;
  display: block;
  box-sizing: border-box;
  flex: 1 1 calc((100% - (var(--cs-gap) * 2)) / 3);
  max-width: calc((100% - (var(--cs-gap) * 2)) / 3);
}

.case-study {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.case-study img,
.case-study .image-placeholder,
.case-study .clickable-image {
  width: clamp(200px, 17.5vw, 400px);  /* min 200px, 17.5vw, max 336px (~17.5vw of 1920px) */
  height: clamp(200px, 17.5vw, 400px); /* keep square */
  object-fit: cover;
  display: block;
  margin: 0 auto clamp(8px, 0.5vw, 16px);
  border-radius: 8px;
}



.case-study h3,
.case-study p {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/*Mobile*/
@media (max-width: 600px) {
  .section {
    padding-left: 1rem; 
    padding-right: 1rem;
    padding-top: 0rem;       /* keep top padding 0 */
    padding-bottom: 0rem;    /* keep bottom padding 0 */
    margin-bottom: 1.5rem;
  }

  #projects h2 {
    margin-top: 2rem; /* adjust as needed */
  }

  .banner-right {
    justify-content: center; /* center the nav buttons */
    width: 100%;             /* optional: take full width */
  }

  .section h2,
  .section h3 {
    font-size: 2rem;
    padding-bottom: 0.5rem;
  }

  .section p,
  .section ul,
  .bullet-container p {
    max-width: 100%;
    margin: 0 0 1rem 0;
    text-align: left;
    font-size: 16px;
  }

  .image-container {
    flex-direction: column;
    align-items: center;
    margin: 0 0 1rem 0;
    width: 100%;
  }

  .clickable-image,
  .graph-image {
    max-width: 100% !important;
    height: auto;
  }

  .image-summary {
    max-width: 100%;
    margin: 0 auto 1rem auto;
    font-size: 16px;
    text-align: center;
  }

  .case-studies-container {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    padding: 0 16px;
  }

  .case-study-link {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .case-study {
    width: 100%;
  }

  .case-study img,
  .case-study .image-placeholder,
  .case-study .clickable-image {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
  }

  .responsive-header {
    font-size: clamp(1.5rem, 5vw, 5rem);
  }

  .case-study h3 {
    font-size: 1.5rem;
  }

  .case-study p {
    font-size: 16px;
  }

  .contact-item {
    display: block;
    margin: 0.2rem 0;
  }

  .contact-item:not(:last-child)::after {
    content: "";         /* remove "|" */
  }
}