/* ---------------------------------------------------------------------------
   Service page body — ported verbatim from live #bolt-recruitment.
   Only change: literal hexes that match a base.css token exactly are swapped
   for that token (#253499, #0b1129, #090f26, #D02479, #ffffff). Every other
   value, including the #fff shorthands and #d7dbff / #ffd166, is left alone —
   the contract only authorises exact-literal swaps.
   --------------------------------------------------------------------------- */
#bolt-recruitment{
  --blue:var(--mp-blue);
  --ink:var(--mp-ink);
  --muted:#d7dbff;
  --accent:var(--mp-pink);
  --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(--ink);
  padding:70px 0 90px;
  background: radial-gradient(130% 160% at 70% 0%, var(--blue) 0%, var(--mp-blue-dark) 65%, var(--mp-blue-deep) 100%);
}

/* Background sheen of whole section */
#bolt-recruitment::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(760px 760px at 20% 35%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(600px 600px at 80% 70%, rgba(255,255,255,.06), transparent 65%);
  mix-blend-mode:screen; opacity:.55;
  animation:brFloat 23s ease-in-out infinite alternate;
}
#bolt-recruitment::after{
  content:""; position:absolute; inset:-12% -38%;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.09) 50%, transparent 60%);
  transform:skewX(-12deg);
  animation:brSheen 8s linear infinite;
}
@keyframes brFloat{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-3%,2%) scale(1.04);}
  100%{transform:translate(3%,-2%) scale(1);}
}
@keyframes brSheen{
  0%{transform:translateX(-40%) skewX(-12deg);}
  100%{transform:translateX(40%) skewX(-12deg);}
}

/* Mouse glow */
#bolt-recruitment .br-mouse{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(350px 350px at var(--mx) var(--my), rgba(255,255,255,.18) 0%, transparent 60%);
  filter:blur(50px);
}

/* Layout wrapper */
#bolt-recruitment .br-inner{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; padding:0 20px;
  font-family:"Montserrat",sans-serif;
}

/* Typography */
#bolt-recruitment h2,
#bolt-recruitment h3,
#bolt-recruitment h4{
  font-family:"DM Serif Display",serif;
  font-weight:400; color:#fff;
}

/* Body / Approach heading */
#bolt-recruitment .br-body-head{
  max-width:720px; margin:10px 0 26px;
}
#bolt-recruitment .br-body-head h2{
  font-size:30px; margin-bottom:10px;
}
#bolt-recruitment .br-body-head p{
  font-size:16px; line-height:1.8;
  color:#e3e5ff;
}

/* Audience glass boxes */
#bolt-recruitment .br-audience{
  margin-bottom:40px;
}
#bolt-recruitment .br-audience-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(240px,1fr));
  gap:22px;
}
#bolt-recruitment .br-audience-card{
  position:relative;
  display:block;
  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); -webkit-backdrop-filter:blur(8px);
  padding:0;
  min-height:120px;
  text-decoration:none;
  --rx:0deg; --ry:0deg;
  will-change:transform, box-shadow, border-color, filter;
  transform-style:preserve-3d;
  transform:translateY(0) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .18s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
#bolt-recruitment .br-audience-inner{
  border-radius:14px;
  padding:24px 22px;
}
#bolt-recruitment .br-audience-inner h3{
  font-size:22px; margin:0 0 8px; color:var(--mp-ink);
}
#bolt-recruitment .br-audience-inner p{
  font-size:15px; line-height:1.9;
  margin:0 0 8px;
  color:var(--mp-ink);
}
#bolt-recruitment .br-note{
  font-size:14px; color:#d7dbff;
}
#bolt-recruitment .br-link-label{
  display:inline-block;
  margin-top:2px;
  font-size:14px;
  color:#ffd9ff;
}

/* glossy overlays */
#bolt-recruitment .br-audience-card::before,
#bolt-recruitment .br-audience-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
  opacity:0; transition:opacity .28s ease;
}
#bolt-recruitment .br-audience-card::before{
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 18%);
}
#bolt-recruitment .br-audience-card::after{
  background: radial-gradient(260px 220px at 18% 10%, rgba(255,255,255,.10), transparent 60%);
  mix-blend-mode:screen;
}
#bolt-recruitment .br-audience-card:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,255,255,.35);
  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.18) inset;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  filter: saturate(1.02);
}
#bolt-recruitment .br-audience-card:hover::before,
#bolt-recruitment .br-audience-card:hover::after{
  opacity:1;
}

/* How We Work with larger centred image */
#bolt-recruitment .br-steps{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:30px; margin-top:10px; margin-bottom:36px;
}
#bolt-recruitment .br-steps-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
  gap:32px;
  align-items:center;
}
#bolt-recruitment .br-steps-left h3{
  font-size:22px; margin-bottom:18px;
}
#bolt-recruitment .br-step-list{
  list-style:none; margin:0; padding:0; position:relative;
}
#bolt-recruitment .br-step-list::before{
  content:""; position:absolute; left:10px; top:4px; bottom:4px;
  border-left:1px solid rgba(255,255,255,.18);
}
#bolt-recruitment .br-step{
  position:relative; padding-left:34px; margin-bottom:18px;
}
#bolt-recruitment .br-step::before{
  content:""; position:absolute; left:4px; top:4px;
  width:12px; height:12px; border-radius:999px;
  border:2px solid rgba(255,255,255,.8);
  background:radial-gradient(circle at 30% 30%, var(--mp-ink), rgba(255,255,255,.1));
}
#bolt-recruitment .br-step h4{
  font-size:17px; margin-bottom:4px;
}
#bolt-recruitment .br-step p{
  font-size:15px; line-height:1.8; margin:0;
  color:#e6e7ff;
}
#bolt-recruitment .br-steps-media{
  display:flex;
  justify-content:center;
}
#bolt-recruitment .br-steps-image-wrap{
  width:100%;
  max-width:520px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
}
#bolt-recruitment .br-steps-image-wrap img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* CTA – centred glass box linking to contact */
#bolt-recruitment .br-cta{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:0; padding-top:26px;
}
#bolt-recruitment .br-cta-card{
  max-width:760px;
  margin:0 auto;
}

/* Responsive */
@media (max-width:900px){
  #bolt-recruitment .br-audience-grid{
    grid-template-columns:1fr;
  }
  #bolt-recruitment .br-steps-layout{
    grid-template-columns:1fr;
  }
}
@media (max-width:520px){
  #bolt-recruitment .br-body-head h2{font-size:26px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #bolt-recruitment::before, #bolt-recruitment::after{
    animation:none;
  }
  #bolt-recruitment .br-mouse{
    display:none;
  }
}

/* The audience cards are <a> elements; live's kit sets the anchor font, so their
   copy renders in Plus Jakarta Sans, not Montserrat (which wraps an extra line). */
#bolt-recruitment a.br-audience-card { font-family: var(--mp-font-kit); }
/* Hello Elementor's heading reset gives this h3 an 8px top margin on live */
#bolt-recruitment .br-steps-left h3 { margin-top: .5rem; }