/* ---------- JOIN COMMUNITY: Section ---------- */
 .community-section {
     position: relative;
     margin: 4rem 24rem;
     padding: 3rem 2rem;
     border-radius: 228px;
     color: #eaf2ff;
     background: radial-gradient(800px 400px at 10% 0%, rgba(255, 121, 23, .10), transparent 60%), radial-gradient(800px 400px at 90% 100%, rgba(30, 144, 255, .16), transparent 60%), linear-gradient(135deg, #0a2540, #08131c 60%, #0a2540 100%);
     box-shadow: 0 24px 60px rgba(2, 6, 23, .35);
     overflow: visible;
     isolation: isolate;
 }

 /* subtle grid pattern */
 .community-section::after {
     content: "";
     position: absolute;
     inset: 0;
     background:
         linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 22px 22px,
         linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 22px 22px;
     mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, 0) 70%);
     pointer-events: none;
 }

 /* ---------- Headings ---------- */
 .community-title {
     font-size: clamp(1.8rem, 3.8vw, 3rem);
     margin: 0rem -6rem;
     letter-spacing: .3px;
     background: linear-gradient(180deg, #ffffff, #bfe1ff);
     background-clip: text;
     color: transparent;
     font-weight: 900;
     text-shadow: 0 8px 30px rgba(14, 165, 233, .25);
     position: relative;
     padding: 0rem 7rem;
     font-family: 'Norwester', sans-serif;
 }

 .community-title::after {
     content: "";
     display: block;
     height: 3px;
     width: 120px;
     margin-top: .6rem;
     border-radius: 3px;
     background: linear-gradient(90deg, #ff4e00, #1E90FF);
     box-shadow: 0 0 18px rgba(255, 121, 23, .45), 0 0 28px rgba(30, 144, 255, .35);
     font-family: 'Norwester', sans-serif;
 }

 .community-subtitle {
     margin: .4rem 0 1.6rem;
     color: #cfe5ff;
     max-width: 124ch;
     font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
     opacity: 6.95;
 }

 /* ---------- Grid ---------- */
 .community-grid {
     position: relative;
     display: grid;
     gap: 2rem;
     margin: 0rem -23rem;
 }

 /* ---------- Cards (glassy + gradient border) ---------- */
 .community-card {
     position: relative;
     border-radius: 230px;
     padding: 4.2rem;
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .18);

 }

 .community-card::before {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: inherit;
     padding: 1px;
     background: linear-gradient(135deg, #ff4e00, rgba(30, 144, 255, .9));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     opacity: .35;
     transition: opacity .25s ease;
 }

 .community-card::after {
     content: "";
     position: absolute;
     right: -40px;
     top: -40px;
     width: 160px;
     height: 160px;
     background: radial-gradient(circle, rgba(7, 7, 7, 0.35), transparent 60%);
     filter: blur(26px);
     z-index: 0;
     transition: transform .35s ease;
 }

 .community-card:hover {
     transform: perspective(900px) rotateX(2.2deg) rotateY(-2.2deg) translateY(-4px);
     box-shadow: 0 22px 48px rgba(14, 165, 233, .28);
 }

 .community-card:hover::before {
     opacity: .8
 }

 .community-card:hover::after {
     transform: translate(-10px, 10px)
 }

 .card-content {
     position: relative;
     z-index: 1;
 }

 .community-card h3 {
     margin: 0rem -7rem;
     font-size: 1rem;
     color: #000000;
     font-weight: 100;
     font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
 }

 .community-card h3 span {
     font-size: .82rem;
     margin-left: .35rem;
     color: #000000;
     background: rgba(30, 144, 255, .18);
     border: 1px solid rgba(30, 144, 255, .35);
     padding: .15rem .5rem;
     border-radius: 999px;
     font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
 }

 .community-card p {
     color: #000000;
     margin: 1rem -2rem;
     font-weight: 500;
     opacity: 26.95;
     font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
 }

 /* ---------- Buttons ---------- */

 .community-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
 }

 .community-btn.secondary {
     background: linear-gradient(135deg, #1E90FF, #60a7ff);
     color: #001018;
     box-shadow: 0 10px 24px rgba(7, 7, 7, 0.35);
 }

 .community-links {
     display: flex;
     gap: 10.6rem;
     flex-wrap: wrap;
 }

 /* ---------- Motion safety ---------- */
 @media (prefers-reduced-motion: reduce) {

     .community-card,
     .community-card::after,
     .community-btn {
         transition: none !important;
         transform: none !important;
     }
 }

 /* ---------------- RESPONSIVE ---------------- */
 @media (max-width: 950px) {
     .Joinhero {
         grid-template-columns: 1fr;
         text-align: center;
         padding: 4rem 1.5rem;
     }

     .Joinhero-text h1 {
         font-size: 1.6rem;
        padding: 0rem 0rem;
        width: 23rem;
     }
 }
 /* ========== COMMUNITY SECTION – MEDIA ONLY ========== */
@media (max-width: 1024px) {
    .community-section.container {
       padding: 0rem 0rem;
        text-align: center;
        margin: 10rem 0rem;
        width: 27rem;
        height: 58rem;
    }
  .community-title {
    font-size: 1.6rem;
        color: black;
        text-shadow: 0 8px 30px rgb(255 255 255 / 33%);
        margin: 0rem -28rem;
        font-weight: bolder;
  }

  .community-subtitle {
    color: black;
    max-width: 104%;
    margin: 2rem 0rem;
  }

  .community-grid {
            display: contents;
  }

  .community-card {                /* soften card spacing */
    padding:0rem 0rem;
    margin: 1rem 0rem;
  }

  .community-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.6rem;
  }

  .community-card p {
            font-size: 0.9rem;
        padding: 0rem 5rem;
        margin: 1rem -4rem;
  }

  .community-btn {
    font-size: 0.95rem;
    padding: 0.7rem 1.1rem;
  }
}

@media (max-width: 640px) {
  .community-grid {
    grid-template-columns: 1fr;    /* stack cards on mobile */
    gap: 1.1rem;
  }

    .community-title {
        font-size: 1.6rem;
        color: black;
        text-shadow: 0 8px 30px rgb(0 0 0);
        margin: 0rem -29rem;
    }
  .community-subtitle {
 font-size: 0.95rem;
        margin-bottom: 1.25rem;
        color: white;
        padding: 0rem 3rem;
  }

  .community-card {
    padding: 1.1rem;
  }

  .community-card h3 {
    font-size: 1.05rem;
    color: white;
  }

  .community-card p {
    font-size: 0.9rem;
    color: white;
  }

  .community-links {
    display: block;                 /* stack the two CTAs */
    
  }

  .community-btn,
  .community-btn.secondary {
    width: 51%;                   /* full-width buttons */
    text-align: center;
    margin: 0.5rem 2rem;
  }
}

@media (max-width: 420px) {
  .community-title { font-size: 1.45rem; }
  .community-subtitle { font-size: 0.9rem; }
  .community-card p { font-size: 0.88rem; }
}
/* ===== Kill horizontal overflow & clamp rogue widths ===== */
html, body {
  overflow-x: hidden;           /* band-aid to hide any residual overflow */
}

/* Make sure core containers never exceed the viewport */
.container,
.container-meet,
.wrap {
  max-width: min(1200px, 92%);
  margin-inline: auto;
}

/* Any wide grids/rows should never overflow */
.achievements-grid,
.genz-list,
.principles,
.connect-grid,
.footer-grid,
.footer-bottom,
.pete-container,
.timeline,
.NewsLettercontainer {
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* HERO (Meet Pete D) – remove hard width from wrapper if present */
.Meethero > div {
  width: auto !important;
  margin: 0 auto !important;
}

/* Footer: remove negative margins that push content outside the viewport */
.site-footer .footer-brand,
footer .footer-brand {
  margin: 0 !important;
}

/* Footer bottom bar: avoid fixed widths that overflow */
footer .footer-bottom {
  width: 100% !important;
}

/* Avoid 100vw traps (if used anywhere); prefer 100% */
[class*="fullwidth"],
.nav,
header,
footer,
section {
  max-width: 100%;
}

/* If any element is using 100vw, force it to respect the viewport */
*[style*="100vw"] {
  width: 100% !important;
  max-width: 100% !important;
}
/* Title + subtitle styling to match jc-card aesthetics */
.join-community .community-title{
  color: #fff;
  margin: 0 0 8px;
  font: 800 clamp(22px,3.2vw,34px)/1.15 "Roboto", system-ui, Arial;
  letter-spacing: .2px;
  position: relative;
}

/* Subtle neon underline that echoes the card ring */
.join-community .community-title::after{
  content:"";
  display:block;
  height: 4px;
  width: clamp(140px,20vw,260px);
  border-radius: 999px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--ring-1), var(--ring-2), var(--ring-3));
  background-size: 200% 100%;
  animation: title-sheen 6s linear infinite;
  box-shadow: 0 0 24px color-mix(in srgb, var(--ring-2) 35%, transparent);
}

/* Soft ambient glow behind the heading */
.join-community .community-title::before{
  content:"";
  position:absolute;
  inset: -30% -10% auto -10%;
  height: 120%;
  background: radial-gradient(50% 50% at 40% 40%,
              color-mix(in srgb, var(--ring-2) 20%, transparent) 0%,
              transparent 70%);
  filter: blur(34px);
  opacity: .28;
  pointer-events: none;
  z-index: 0;
}

@keyframes title-sheen{
  to { background-position: 200% 0; }
}

.join-community .community-subtitle{
  color: #b8c0cc;
  max-width: 920px;
  font-size: clamp(14px,1.8vw,18px);
  line-height: 1.6;
  margin: 8px 0 clamp(18px,2.8vw,30px);
}

/* Alignment options—pick one, default is left like the cards */
.join-community .community-title,
.join-community .community-subtitle{ text-align: left; }

/* If you prefer centered headings on small screens, keep this: */
@media (max-width: 680px){
  .join-community .community-title,
  .join-community .community-subtitle{ text-align: center; margin-left:auto; margin-right:auto; }
}
@media (prefers-reduced-motion: reduce){
  .join-community .community-title::after{ animation: none; }
}
.join-community{
    margin: 0rem 0rem;
}