/* Intro layout (text + side card) */
.join-intro{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.5rem;
  margin: 2rem auto 2.5rem;
}
.join-main, .join-side{ align-self: start; }
.join-intro .cta-row{ margin-top: .75rem; }
@media (max-width: 900px){
  .join-intro{ grid-template-columns: 1fr; }
}

/* Openings: role groups and cards */
.openings{ margin: 1rem auto 3rem; }
.role-group{ margin: 2rem 0; }
.role-group__title{
  font-size: 1.5rem;
  color: var(--accent);
  margin: 0 0 .75rem;
}
.role-card{
  background:#fff;
  border:1px solid #eee;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  margin: .75rem 0;
}
.role-title{
  margin: 0 0 .35rem;
  font-weight: 700;
}
.role-bullets{
  margin: 0;
  padding-left: 1.25rem;
}
.role-bullets li{ margin: .35rem 0; }

.section-title {
text-align: center;
font-size: 2rem;
}
/* Intro layout (text + side card) */
.join-intro{
  display:grid;
  grid-template-columns: 1.2fr .8fr; /* main + sidebar */
  gap:1.5rem;
  margin:2rem auto 2.5rem;
}
.join-main, .join-side{ align-self:start; }

/* Fix breakpoint: stack on smaller screens, not at 2000px :) */
@media (max-width: 900px){
  .join-intro{ grid-template-columns:1fr; }
}

/* Info card + sticky sidebar */
.info-card{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:1rem 1.25rem; box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.sticky{ position:sticky; top:84px; }

/* Buttons (re-use site tokens if you have them) */
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border:2px solid var(--accent); color:var(--accent);
  background:#fff; border-radius:10px; font-weight:700; text-decoration:none;
}
.btn:hover{ background:var(--accent); color:#fff; }

/* Openings: groups in tidy columns */
.role-group{ margin:2rem 0; }
.role-group__title{ font-size:1.5rem; color:var(--accent); margin:0 0 .75rem; }

.role-group__list{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 900px){ .role-group__list{ grid-template-columns:1fr; } }

.role-card{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:1rem 1.25rem; box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.role-title{ margin:0 0 .35rem; font-weight:700; }
.role-meta{ font-size:.9rem; color:#555; margin:.25rem 0 .5rem; }
.role-bullets{ margin:0; padding-left:1.25rem; }
.role-bullets li{ margin:.35rem 0; }

/* Little checklist style for the sidebar */
.checklist{ list-style:none; padding:0; margin:.5rem 0 0; }
.checklist li{ padding-left:1.2rem; position:relative; margin:.25rem 0; }
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; line-height:1; color:var(--accent);
}

/* Center hero title */
.section-title{ text-align:center; font-size:2rem; }

  .hero-about { background: var(--surface, #f8f3f2); padding: 2.25rem 0; text-align: center; }
    .section-title { text-align: center; font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem); margin: 0 0 .35rem; }
    .hero-sub { color: #5a5553; max-width: 700px; margin: 0 auto; }