/* =====================================================================
   "Join Us" page. Scoped under .jup. The title band is the Contact Us
   .ct-band (css/contact-page.css) so both heroes have identical height.
   ===================================================================== */
.jup{
  --ju-blue:#0b3a7e;
  --ju-gold:#c9a24b;
  --ju-body:#33415a;
  --ju-line:#e3e8f0;
  --ct-gold:#c9a24b;       /* band gold line colour per Join Us spec (band geometry is shared) */
  --header-h:113px;
  background:#f6f8fb;
}
.jup *,.jup *::before,.jup *::after{box-sizing:border-box}

.ju-main{padding:48px 0 64px}
.ju-container{max-width:1100px;margin:0 auto;padding:0 24px}
.ju-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}

.ju-card{display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid var(--ju-line);border-radius:16px;padding:36px;box-shadow:0 10px 30px rgba(11,58,126,.08);transition:transform .3s ease,box-shadow .3s ease}
.ju-card__icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#183962;color:#fff;margin-bottom:20px}
.ju-card__title{margin:0;font-size:40px;font-weight:600;line-height:1.2em;color:var(--ju-blue)}   /* global H2 look at 40px */
.ju-card__line{display:block;width:34px;height:2px;background:var(--ju-gold);margin:12px 0 16px}
.ju-card__text{margin:0 0 28px;font-size:18px;line-height:1.65;color:var(--ju-body)}

.ju-btn{margin-top:auto;display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:999px;background:var(--ju-blue);color:#fff;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background-color .25s ease}
.ju-btn svg{flex:0 0 auto}
.ju-btn:hover{background:#d21f26;color:#fff}
.ju-btn:focus-visible{outline:2px solid var(--ju-gold);outline-offset:3px}

@media (hover:hover){
  .ju-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(11,58,126,.14)}
}
@media (max-width:760px){
  .ju-main{padding:32px 0 48px}
  .ju-grid{grid-template-columns:1fr;gap:24px}
  .ju-card{padding:28px}
}
/* keep the band the same height as Contact Us when its longer intro wraps to 3 lines */
@media (max-width:422px){
  .jup .ct-band__intro{min-height:calc(3 * 1.6 * 18px)}
}
@media (prefers-reduced-motion:reduce){
  .ju-card,.ju-btn{transition:none}
  .ju-card:hover{transform:none}
}