/* ---------------------------------------------------------------------------
   Block: Image cards  (ported verbatim from live #bolt-recruit-cards,
   #bolt-contingent-cards and #bolt-retained-cards).

   Three live sections share one template part; each stylesheet is scoped by
   its own section id, so all three are carried here unchanged. Only edits:
   brand hexes swapped for the base.css tokens where the literal matched
   exactly, and the rules the <article> -> <a> markup change requires (see
   bottom of file).
   --------------------------------------------------------------------------- */

/* ==========================================================================
   #bolt-recruit-cards  -- RECRUITMENT SOLUTIONS (blue surface, pink accents)
   ========================================================================== */
/* ===== TOKENS / BASE (BLUE BACKGROUND, PINK ACCENTS) ===== */

#bolt-recruit-cards{

  --pink:var(--mp-pink);

  --blue:var(--mp-blue);

  --text:var(--mp-ink);

  --muted:#d7dbff;

  --outline:rgba(255,255,255,.22);

  --glassTop:rgba(255,255,255,.10);

  --glassBot:rgba(255,255,255,.05);

  --mx:50%; --my:50%;

  position:relative; isolation:isolate; overflow:hidden;

  color:var(--text);

  padding:90px 0;

  background: radial-gradient(130% 160% at 70% 0%, var(--blue) 0%, var(--mp-blue-dark) 65%, var(--mp-blue-deep) 100%);

}



/* Background lighting + moving sheen (matches your blue sections) */

#bolt-recruit-cards::before{

  content:""; position:absolute; inset:0; z-index:0;

  background:

    radial-gradient(780px 780px at 22% 38%, rgba(255,255,255,.08), transparent 60%),

    radial-gradient(640px 640px at 80% 72%, rgba(255,255,255,.06), transparent 65%);

  mix-blend-mode:screen; opacity:.5;

  animation:brcFloat 24s ease-in-out infinite alternate;

}

@keyframes brcFloat{

  0%{transform:translate(0,0) scale(1);}

  50%{transform:translate(-4%,3%) scale(1.05);}

  100%{transform:translate(4%,-3%) scale(1);}

}

#bolt-recruit-cards::after{

  content:""; position:absolute; inset:-10% -40%; z-index:0;

  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%);

  transform:skewX(-12deg);

  animation:brcSheen 7s linear infinite;

}

@keyframes brcSheen{

  0%{transform:translateX(-40%) skewX(-12deg);}

  100%{transform:translateX(40%)  skewX(-12deg);}

}



/* Mouse-follow glow */

#bolt-recruit-cards .brc-mouse{

  position:absolute; inset:0; pointer-events:none; z-index:1;

  background: radial-gradient(360px 360px at var(--mx) var(--my), rgba(255,255,255,.18) 0%, transparent 60%);

  filter: blur(50px);

}



/* Layout */

#bolt-recruit-cards .brc-inner{

  position:relative; z-index:2;

  max-width:1200px; margin:0 auto; padding:0 20px;

}

#bolt-recruit-cards .brc-copy{

  max-width:880px; margin:0 auto 26px; text-align:center;

}

#bolt-recruit-cards .brc-badge{

  display:inline-flex; align-items:center; gap:.75rem;

  padding:6px 14px; margin:0 0 10px;

  border:1px solid var(--pink);

  border-radius:999px;

  background:linear-gradient(90deg, rgba(208,36,121,.15), rgba(37,52,153,.15));

  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.28);

  color:var(--muted);

  font:12px/1 "Montserrat",sans-serif; letter-spacing:.14em; text-transform:uppercase;

}

#bolt-recruit-cards .brc-badge i{ color:#ffd166; font-style:normal; font-size:13px; }

#bolt-recruit-cards .brc-title,

#bolt-recruit-cards h3{

  font-family:"DM Serif Display",serif; font-weight:400; color:#fff;

}

#bolt-recruit-cards .brc-title{ font-size:40px; line-height:1.2; margin:0 0 10px; }

#bolt-recruit-cards .brc-sub{ font-family:"Montserrat",sans-serif; font-size:16px; opacity:.95; }



/* Grid */

#bolt-recruit-cards .brc-grid{

  margin-top:26px;

  display:grid !important;

  grid-template-columns:repeat(2, minmax(260px,1fr)) !important;

  gap:22px !important;

}

@media(max-width:720px){ #bolt-recruit-cards .brc-grid{ grid-template-columns:1fr !important; } }



/* Card (glassy) */

#bolt-recruit-cards .brc-card{

  position:relative;

  border:1px solid var(--outline);

  border-radius:14px;

  background:linear-gradient(180deg, var(--glassTop), var(--glassBot));

  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 10px 25px rgba(0,0,0,.3);

  backdrop-filter:blur(8px);

  padding:18px 18px 20px;

  opacity:0; transform:translateY(40px);

  transition:all .65s cubic-bezier(.16,.84,.44,1);

}

#bolt-recruit-cards .brc-card.in-view{ opacity:1; transform:translateY(0); }



/* Image (no overlay, 8px gap beneath) */

#bolt-recruit-cards .brc-img{

  width:100%; height:210px; object-fit:cover;

  border-radius:10px; display:block; margin:0 0 8px;

}



/* Hover: neutral white-ish polish */

#bolt-recruit-cards .brc-card:hover{

  transform:translateY(-4px) scale(1.01);

  border-color:rgba(255,255,255,.35);

  box-shadow:0 18px 45px rgba(255,255,255,.32), 0 2px 0 rgba(255,255,255,.18) inset;

  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));

}

#bolt-recruit-cards .brc-card h3{ font-size:22px; margin:4px 0 8px; }

#bolt-recruit-cards .brc-card p{ font-family:"Montserrat",sans-serif; font-size:15px; margin:0; color:#fff; }



/* Last card spans both columns */

#bolt-recruit-cards .brc-span-all{ grid-column:1 / -1; }



/* Layer safety */

#bolt-recruit-cards::before, #bolt-recruit-cards::after{ zindex:0 !important; }

#bolt-recruit-cards .brc-mouse{ z-index:1 !important; }

#bolt-recruit-cards .brc-inner{ z-index:2 !important; }



@media(max-width:720px){

  #bolt-recruit-cards .brc-title{ font-size:30px; line-height:1.15; }

  #bolt-recruit-cards .brc-sub{ font-size:15px; }

  #bolt-recruit-cards .brc-card h3{ font-size:20px; }

  #bolt-recruit-cards .brc-card p{ font-size:14px; line-height:1.7; }

}



@media (prefers-reduced-motion: reduce){

  #bolt-recruit-cards::before, #bolt-recruit-cards::after{ animation:none; }

  #bolt-recruit-cards .brc-mouse{ display:none; }

}

/* ==========================================================================
   #bolt-contingent-cards  -- CONTINGENT SEARCH (pink surface, blue accents)
   ========================================================================== */
/* ===== TOKENS / BASE (PINK BACKGROUND, BLUE ACCENTS) ===== */

#bolt-contingent-cards{

  --pink:var(--mp-pink);

  --blue:var(--mp-blue);

  --text:var(--mp-ink);

  --muted:#FFD7E8;

  --outline:rgba(255,255,255,.22);

  --glassTop:rgba(255,255,255,.10);

  --glassBot:rgba(255,255,255,.05);

  --mx:50%; --my:50%;

  position:relative; isolation:isolate; overflow:hidden;

  color:var(--text);

  padding:90px 0;

  background: radial-gradient(120% 160% at 70% 0%,

              #c9226b 0%, #a41858 50%, #6b0f38 100%);

}

#bolt-contingent-cards::before{

  content:""; position:absolute; inset:0; z-index:0;

  background:

    radial-gradient(780px 780px at 22% 38%, rgba(255,255,255,.08), transparent 60%),

    radial-gradient(640px 640px at 80% 72%, rgba(255,255,255,.06), transparent 65%);

  mix-blend-mode:screen; opacity:.5;

  animation:bccFloat 24s ease-in-out infinite alternate;

}

@keyframes bccFloat{

  0%{transform:translate(0,0) scale(1);}

  50%{transform:translate(-4%,3%) scale(1.05);}

  100%{transform:translate(4%,-3%) scale(1);}

}

#bolt-contingent-cards::after{

  content:""; position:absolute; inset:-10% -40%; z-index:0;

  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);

  transform:skewX(-12deg);

  animation:bccSheen 7s linear infinite;

}

@keyframes bccSheen{

  0%{transform:translateX(-40%) skewX(-12deg);}

  100%{transform:translateX(40%)  skewX(-12deg);}

}

#bolt-contingent-cards .bcc-mouse{

  position:absolute; inset:0; pointer-events:none; z-index:1;

  background: radial-gradient(360px 360px at var(--mx) var(--my), rgba(255,255,255,.18) 0%, transparent 60%);

  filter: blur(50px);

}

#bolt-contingent-cards .bcc-inner{

  position:relative; z-index:2;

  max-width:1200px; margin:0 auto; padding:0 20px;

}

#bolt-contingent-cards .bcc-copy{

  max-width:880px; margin:0 auto 26px; text-align:center;

}

#bolt-contingent-cards .bcc-badge{

  display:inline-flex; align-items:center; gap:.75rem;

  padding:6px 14px; margin:0 0 10px;

  border:1px solid var(--blue);

  border-radius:999px;

  background:linear-gradient(90deg, rgba(37,52,153,.15), rgba(208,36,121,.15));

  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.28);

  color:var(--muted);

  font:12px/1 "Montserrat",sans-serif; letter-spacing:.14em; text-transform:uppercase;

}

#bolt-contingent-cards .bcc-badge i{ color:#ffd166; font-style:normal; font-size:13px; }

#bolt-contingent-cards .bcc-title,

#bolt-contingent-cards h3{

  font-family:"DM Serif Display",serif; font-weight:400; color:#fff;

}

#bolt-contingent-cards .bcc-title{ font-size:40px; line-height:1.2; margin:0 0 10px; }

#bolt-contingent-cards .bcc-sub{ font-family:"Montserrat",sans-serif; font-size:16px; opacity:.95; }

#bolt-contingent-cards .bcc-grid{

  margin-top:26px;

  display:grid !important;

  grid-template-columns:repeat(2, minmax(260px,1fr)) !important;

  gap:22px !important;

}

@media(max-width:720px){ #bolt-contingent-cards .bcc-grid{ grid-template-columns:1fr !important; } }

#bolt-contingent-cards .bcc-card{

  position:relative;

  border:1px solid var(--outline);

  border-radius:14px;

  background:linear-gradient(180deg, var(--glassTop), var(--glassBot));

  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 10px 25px rgba(0,0,0,.3);

  backdrop-filter:blur(8px);

  padding:18px 18px 20px;

  opacity:0; transform:translateY(40px);

  transition:all .65s cubic-bezier(.16,.84,.44,1);

}

#bolt-contingent-cards .bcc-card.in-view{ opacity:1; transform:translateY(0); }

#bolt-contingent-cards .bcc-img{

  width:100%; height:210px; object-fit:cover;

  border-radius:10px; display:block; margin:0 0 8px;

}

#bolt-contingent-cards .bcc-card:hover{

  transform:translateY(-4px) scale(1.01);

  border-color:rgba(255,255,255,.35);

  box-shadow:0 18px 45px rgba(255,255,255,.32), 0 2px 0 rgba(255,255,255,.18) inset;

  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));

}

#bolt-contingent-cards .bcc-card h3{ font-size:22px; margin:4px 0 8px; }

#bolt-contingent-cards .bcc-card p{ font-family:"Montserrat",sans-serif; font-size:15px; margin:0; color:#fff; }

#bolt-contingent-cards::before, #bolt-contingent-cards::after{ z-index:0 !important; }

#bolt-contingent-cards .bcc-mouse{ z-index:1 !important; }

#bolt-contingent-cards .bcc-inner{ z-index:2 !important; }

@media (prefers-reduced-motion: reduce){

  #bolt-contingent-cards::before, #bolt-contingent-cards::after{ animation:none; }

  #bolt-contingent-cards .bcc-mouse{ display:none; }

}

/* ==========================================================================
   #bolt-retained-cards  -- RETAINED SEARCH (blue surface, pink accents)
   ========================================================================== */
/* ===== TOKENS / BASE (BLUE BACKGROUND, PINK ACCENTS) ===== */

#bolt-retained-cards{

  --pink:var(--mp-pink);

  --blue:var(--mp-blue);

  --text:var(--mp-ink);

  --muted:#d7dbff;

  --outline:rgba(255,255,255,.22);

  --glassTop:rgba(255,255,255,.10);

  --glassBot:rgba(255,255,255,.05);

  --mx:50%; --my:50%;

  position:relative; isolation:isolate; overflow:hidden;

  color:var(--text);

  padding:90px 0;

  background: radial-gradient(130% 160% at 70% 0%,

              var(--blue) 0%, var(--mp-blue-dark) 65%, var(--mp-blue-deep) 100%);

}



/* Background lighting + moving sheen */

#bolt-retained-cards::before{

  content:""; position:absolute; inset:0; z-index:0;

  background:

    radial-gradient(780px 780px at 22% 38%, rgba(255,255,255,.08), transparent 60%),

    radial-gradient(640px 640px at 80% 72%, rgba(255,255,255,.06), transparent 65%);

  mix-blend-mode:screen; opacity:.5;

  animation:brc2Float 24s ease-in-out infinite alternate;

}

@keyframes brc2Float{

  0%{transform:translate(0,0) scale(1);}

  50%{transform:translate(-4%,3%) scale(1.05);}

  100%{transform:translate(4%,-3%) scale(1);}

}

#bolt-retained-cards::after{

  content:""; position:absolute; inset:-10% -40%; z-index:0;

  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);

  transform:skewX(-12deg);

  animation:brc2Sheen 7s linear infinite;

}

@keyframes brc2Sheen{

  0%{transform:translateX(-40%) skewX(-12deg);}

  100%{transform:translateX(40%)  skewX(-12deg);}

}



/* Mouse-follow glow */

#bolt-retained-cards .brc2-mouse{

  position:absolute; inset:0; pointer-events:none; z-index:1;

  background: radial-gradient(360px 360px at var(--mx) var(--my), rgba(255,255,255,.18) 0%, transparent 60%);

  filter: blur(50px);

}



/* Layout */

#bolt-retained-cards .brc2-inner{

  position:relative; z-index:2;

  max-width:1200px; margin:0 auto; padding:0 20px;

}

#bolt-retained-cards .brc2-copy{

  max-width:880px; margin:0 auto 26px; text-align:center;

}



/* Badge + titles */

#bolt-retained-cards .brc2-badge{

  display:inline-flex; align-items:center; gap:.75rem;

  padding:6px 14px; margin:0 0 10px;

  border:1px solid var(--pink);

  border-radius:999px;

  background:linear-gradient(90deg, rgba(208,36,121,.15), rgba(37,52,153,.15));

  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.28);

  color:var(--muted);

  font:12px/1 "Montserrat",sans-serif; letter-spacing:.14em; text-transform:uppercase;

}

#bolt-retained-cards .brc2-badge i{ color:#ffd166; font-style:normal; font-size:13px; }



#bolt-retained-cards .brc2-title,

#bolt-retained-cards h3{

  font-family:"DM Serif Display",serif; font-weight:400; color:#fff;

}

#bolt-retained-cards .brc2-title{ font-size:40px; line-height:1.2; margin:0 0 10px; }

#bolt-retained-cards .brc2-sub{ font-family:"Montserrat",sans-serif; font-size:16px; opacity:.95; }



/* Grid 2–2 */

#bolt-retained-cards .brc2-grid{

  margin-top:26px;

  display:grid !important;

  grid-template-columns:repeat(2, minmax(260px,1fr)) !important;

  gap:22px !important;

}

@media(max-width:720px){ #bolt-retained-cards .brc2-grid{ grid-template-columns:1fr !important; } }



/* Card (glassy) */

#bolt-retained-cards .brc2-card{

  position:relative;

  border:1px solid var(--outline);

  border-radius:14px;

  background:linear-gradient(180deg, var(--glassTop), var(--glassBot));

  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 10px 25px rgba(0,0,0,.3);

  backdrop-filter:blur(8px);

  padding:18px 18px 20px;

  opacity:0; transform:translateY(40px);

  transition:all .65s cubic-bezier(.16,.84,.44,1);

}

#bolt-retained-cards .brc2-card.in-view{ opacity:1; transform:translateY(0); }



/* Image (no overlay, 8px gap beneath) */

#bolt-retained-cards .brc2-img{

  width:100%; height:210px; object-fit:cover;

  border-radius:10px; display:block; margin:0 0 8px;

}



/* Hover: neutral white-ish polish */

#bolt-retained-cards .brc2-card:hover{

  transform:translateY(-4px) scale(1.01);

  border-color:rgba(255,255,255,.35);

  box-shadow:0 18px 45px rgba(255,255,255,.32), 0 2px 0 rgba(255,255,255,.18) inset;

  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));

}

#bolt-retained-cards .brc2-card h3{ font-size:22px; margin:4px 0 8px; }

#bolt-retained-cards .brc2-card p{ font-family:"Montserrat",sans-serif; font-size:15px; margin:0; color:#fff; }



/* Layer safety */

#bolt-retained-cards::before, #bolt-retained-cards::after{ z-index:0 !important; }

#bolt-retained-cards .brc2-mouse{ z-index:1 !important; }

#bolt-retained-cards .brc2-inner{ z-index:2 !important; }



@media (prefers-reduced-motion: reduce){

  #bolt-retained-cards::before, #bolt-retained-cards::after{ animation:none; }

  #bolt-retained-cards .brc2-mouse{ display:none; }

}

/* ==========================================================================
   Port-only additions.
   The source cards were <article role="link" tabindex="0" onclick="...">, which
   is not keyboard-operable and carries an inline handler. Contract rule 8 makes
   them real <a>. base.css underlines every hovered/focused anchor, so the rules
   below restore the source's appearance. Nothing else was changed.
   ========================================================================== */
#bolt-recruit-cards .brc-card,
#bolt-contingent-cards .bcc-card,
#bolt-retained-cards .brc2-card{ color:inherit; text-decoration:none; }
#bolt-recruit-cards .brc-card:hover, #bolt-recruit-cards .brc-card:focus-visible,
#bolt-contingent-cards .bcc-card:hover, #bolt-contingent-cards .bcc-card:focus-visible,
#bolt-retained-cards .brc2-card:hover, #bolt-retained-cards .brc2-card:focus-visible{ text-decoration:none; }