/* ---------------------------------------------------------------------------
   Block: Our Services — "Precision Placements, Profound Results"
   Ported verbatim from live #bolt-services-final (home 102357, html widget #c8c7f2d).
   The two source <style> blocks are concatenated in source order (the second one
   deliberately overrides the card transform — do not reorder). Only exact-match
   brand hexes were swapped for base.css tokens. Source has no Google Fonts import.
   --------------------------------------------------------------------------- */
/* ===== BRAND TOKENS ===== */
#bolt-services-final{
  --pink:var(--mp-pink);
  --blue:var(--mp-blue);
  --ink:var(--mp-ink);
  --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; overflow:hidden; isolation:isolate;
  min-height:100vh; display:flex; align-items:center;
  color:var(--text) !important;
  background: radial-gradient(130% 160% at 70% 0%, var(--blue) 0%, var(--mp-blue-dark) 65%, var(--mp-blue-deep) 100%);
  border-radius:0;
}

/* ===== BACKGROUND ANIMS ===== */
#bolt-services-final::before{
  content:""; position:absolute; inset: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; z-index:0;
  animation:bsFloat 24s ease-in-out infinite alternate;
}
@keyframes bsFloat{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-4%,3%) scale(1.05);}
  100%{transform:translate(4%,-3%) scale(1);}
}
#bolt-services-final::after{
  content:""; position:absolute; inset:-10% -40%;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%);
  transform:skewX(-12deg); z-index:0;
  animation:bsSheen 7s linear infinite;
}
@keyframes bsSheen{
  0%{transform:translateX(-40%) skewX(-12deg);}
  100%{transform:translateX(40%)  skewX(-12deg);}
}

/* ===== MOUSE GLOW ===== */
#bolt-services-final .bs-final-mouse{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(360px 360px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18) 0%, transparent 60%);
  filter:blur(50px);
}

/* ===== LAYOUT ===== */
#bolt-services-final .bs-final-inner{
  position:relative; z-index:2 !important;
  max-width:1200px; margin:0 auto; padding:80px 20px;
  display:grid; gap:40px; grid-template-columns:1fr !important;
}

/* TABLET: keep it 2 columns but slightly tighter so it feels natural */
@media (min-width:768px) and (max-width:1023px){
  #bolt-services-final{ min-height:auto; }
  #bolt-services-final .bs-final-inner{
    grid-template-columns:5fr 6fr !important;
    align-items:center;
    gap:28px;
    padding:70px 20px;
  }
  #bolt-services-final .bs-final-title{ font-size:38px; }
  #bolt-services-final .bs-final-grid{ gap:18px !important; }
  #bolt-services-final .bs-final-card{ padding:20px 20px; }
  #bolt-services-final .bs-final-card h3{ font-size:22px; }
}

/* DESKTOP */
@media(min-width:1024px){
  #bolt-services-final .bs-final-inner{
    grid-template-columns:5fr 6fr !important; align-items:center;
  }
}

#bolt-services-final .bs-final-left{ max-width:620px; }
#bolt-services-final .bs-final-right{ width:100%; display:block !important; }

/* ===== BADGE ===== */
#bolt-services-final .bs-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-family:"Montserrat",sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  position:relative; overflow:hidden;
}
#bolt-services-final .bs-badge::after{
  content:""; position:absolute; inset:-40% -60%;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);
  transform:skewX(-20deg);
  animation:badgeSheen 4.5s linear infinite;
}
@keyframes badgeSheen{0%{transform:translateX(-40%) skewX(-20deg);}100%{transform:translateX(40%) skewX(-20deg);} }
#bolt-services-final .bs-badge i{ color:#ffd166; font-style:normal; font-size:13px; }
#bolt-services-final .bs-badge em{ font-style:normal; }

/* ===== TYPE ===== */
#bolt-services-final h1,
#bolt-services-final h2,
#bolt-services-final h3,
#bolt-services-final .bs-final-title{
  font-family:"DM Serif Display", serif !important;
  font-weight:400 !important;
  color:var(--mp-ink) !important;
  letter-spacing:0 !important;
}
#bolt-services-final .bs-final-title{
  font-size:42px; line-height:1.12; margin:0 0 16px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
@media(max-width:520px){ #bolt-services-final .bs-final-title{ font-size:36px; } }
#bolt-services-final .bs-final-sub{
  font-family:"Montserrat",sans-serif;
  font-size:16px; line-height:1.8; margin:0 0 28px; color:var(--mp-ink) !important;
}

/* ===== CTA ===== */
#bolt-services-final .bs-final-cta{
  display:inline-block;
  background:linear-gradient(90deg, var(--pink), var(--blue));
  color:#fff !important; text-decoration:none !important;
  font-family:"Montserrat",sans-serif; font-weight:600;
  padding:12px 30px; border-radius:10px;
  box-shadow:0 8px 18px rgba(37,52,153,.35);
  transition:transform .22s ease, box-shadow .28s ease, filter .2s ease;
}
#bolt-services-final .bs-final-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(208,36,121,.45);
  filter:brightness(1.05);
}

/* ===== CARDS ===== */
#bolt-services-final .bs-final-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(240px,1fr)) !important;
  gap:22px !important;
}
@media(max-width:720px){
  #bolt-services-final .bs-final-grid{ grid-template-columns:1fr !important; }
}
@supports not (display: grid){
  #bolt-services-final .bs-final-grid{
    display:flex !important; flex-wrap:wrap; gap:22px;
  }
  #bolt-services-final .bs-final-card{ flex:1 1 calc(50% - 22px); }
  @media(max-width:720px){ #bolt-services-final .bs-final-card{ flex-basis:100%; } }
}

#bolt-services-final .bs-final-card{
  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:24px 22px;
  min-height:120px;
  opacity:0; transform:translateY(40px);
  transition:all .65s cubic-bezier(.16,.84,.44,1);
  text-decoration:none !important;
}
#bolt-services-final .bs-final-card.in-view{ opacity:1; transform:translateY(0); }

/* desktop hover (kept same look) */
#bolt-services-final .bs-final-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);
}

/* titles inside cards */
#bolt-services-final .bs-final-card h3{
  font-size:25px; margin:0 0 8px; color:var(--mp-ink) !important;
}
#bolt-services-final .bs-final-card p{
  font-family:"Montserrat",sans-serif; font-size:15px; margin:0; color:var(--mp-ink) !important;
}

/* ENSURE WHITE TEXT */
#bolt-services-final a{ color:var(--mp-ink) !important; }

/* ===== MOBILE POLISH (same style, just more natural) ===== */
@media (max-width: 900px){
  #bolt-services-final{ min-height:auto; }
  #bolt-services-final .bs-final-inner{ padding:70px 20px; gap:28px; }
}
@media (max-width: 720px){
  #bolt-services-final .bs-final-left{ max-width:720px; margin:0 auto; text-align:center; }
  #bolt-services-final .bs-badge{ margin:0 auto 10px; }
  #bolt-services-final .bs-final-title{ font-size:30px; line-height:1.15; margin:0 0 12px; }
  #bolt-services-final .bs-final-sub{ font-size:15px; line-height:1.7; margin:0 0 18px; }

  #bolt-services-final .bs-final-grid{ gap:14px !important; }
  #bolt-services-final .bs-final-card{ padding:18px 18px; min-height:0; border-radius:16px; }
  #bolt-services-final .bs-final-card h3{ font-size:20px; }
  #bolt-services-final .bs-final-card p{ font-size:14px; line-height:1.65; margin:0; }

  #bolt-services-final .bs-final-card:hover{ transform: translateY(-3px) scale(1.01); }
}
@media (max-width: 420px){
  #bolt-services-final .bs-final-title{ font-size:28px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #bolt-services-final::before,#bolt-services-final::after{ animation:none; }
  #bolt-services-final .bs-final-mouse{ display:none; }
}
/* keep your reflective inner highlight exactly, but prevent double-hover conflicts */
#bolt-services-final .bs-final-card{
  position: relative;
  will-change: transform, box-shadow, border-color, filter;
  transform-style: preserve-3d;
}
#bolt-services-final .bs-final-card::before,
#bolt-services-final .bs-final-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
  opacity:0; transition:opacity .28s ease;
}
#bolt-services-final .bs-final-card::before{
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 18%);
}
#bolt-services-final .bs-final-card::after{
  background: radial-gradient(260px 220px at 18% 10%, rgba(255,255,255,.10), transparent 60%);
  mix-blend-mode:screen;
}
#bolt-services-final .bs-final-card:hover::before,
#bolt-services-final .bs-final-card:hover::after{
  opacity:1;
}
#bolt-services-final .bs-final-card{
  --rx: 0deg; --ry: 0deg;
  transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
