:root {
  --bg: #e1eaf0;
  --pad: clamp(12px, 2vw, 28px);
  --gap: clamp(12px, 2vw, 28px);
  --card-min: 220px;
  --card-min-featured: 320px;
}

.container {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.section {
  margin-top: var(--gap);
}

/* HERO */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--bg);
}

.hero-left {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 0.7);
}

.hero-left h1 {
  font-size: 1.1rem;
  font-weight: 700;
}

.hero-left p {
  font-size: 0.95rem;
  line-height: 1.45;
}

.hero-buttons {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) * 0.75);
  padding-bottom: calc(var(--pad) * 0.25);
  justify-content: space-between;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.1em;
  border: 1px solid #777;
  text-decoration: none;
  color: #111;
  background: transparent;
  white-space: nowrap;
  font-size: 0.9rem;
}

.button:hover {
  background: rgba(0, 0, 0, 0.06);
}

.hero-right {
  overflow: hidden;
  min-height: clamp(180px, 25vw, 340px);
}

.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-right {
    min-height: clamp(180px, 40vw, 320px);
  }
  .hero-buttons {
    justify-content: center;
  }
}

/* INTRO / TEAM */
.team-section {
  padding: var(--pad) 0;
}

.team-intro {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gap);
}

.team-intro p {
  max-width: 120ch;
  text-align: center;
  line-height: 1.6;
  font-size: 0.95rem;
}

.meet-team-title {
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 800;
  margin: var(--gap) 0;
  text-align: center;
}

.responsive-img {
  width: 80%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* BOARD */
.board {
  background: var(--bg);
  padding: calc(var(--pad) * 1.4) var(--pad);
}

.board h2 {
  text-align: center;
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: var(--gap);
}

.board-title {
  text-align: center;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  margin: var(--gap) 0;
}

.board-featured {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min-featured)), 1fr));
  margin-bottom: var(--gap);
}

.board-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  align-items: stretch;
}

.board-grid .profile-card {
  flex: 0 1 calc(25% - (var(--gap) * 0.75));
  width: auto;
}

.board-grid .profile-info {
  flex: 1;
}

@media (max-width: 1100px) {
  .board-grid .profile-card { flex: 0 1 calc(50% - (var(--gap) * 0.5)); }
}

@media (max-width: 650px) {
  .board-grid .profile-card { flex: 0 1 100%; }
}

/* CARD */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.6em;
}

.profile-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ddd;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-info {
  width: 100%;
  background: #fff;
  margin-top: 0.8em;
  padding: 0.9em 1em;
  text-align: center;
}

.profile-info p {
  font-size: 0.68rem;
  line-height: 1.35;
  margin-bottom: 0.5em;
  word-break: break-word;
}