/* Services grid + hotspot card (the #services section), matched to the supplied design.
   Font: Plus Jakarta Sans. Every rule is scoped to #services.ks. Sizes are in px because the site's root font size is 12px. */
#services.ks,#services.ks *{font-family:"Plus Jakarta Sans"!important}
#services.ks{
  --u:1px;
  --ks-ink:#0c1f4f;--ks-mute:#6a7590;--ks-lead:#3b4766;--ks-blue:#1b5be6;--ks-line:#e4eaf6;
  margin:0;padding:16px 24px 38px;background:#f5f8ff;border:0;border-radius:0;box-shadow:none;height:auto;min-height:0;
  color:var(--ks-ink);text-align:left;font-weight:500;line-height:1.5;
}
#services.ks *,#services.ks *::before,#services.ks *::after{box-sizing:border-box}
#services.ks h2,#services.ks h3,#services.ks p{margin:0}

/* Heading row */
#services.ks .ks-head{display:grid;grid-template-columns:41.2% minmax(0,1fr);align-items:start;margin-bottom:calc(28*var(--u))}
#services.ks .ks-title{grid-column:1;grid-row:1}
#services.ks .ks-eyebrow{font-size:calc(12.5*var(--u));line-height:calc(14*var(--u));font-weight:700;letter-spacing:.22em;word-spacing:.3em;text-transform:uppercase;color:var(--ks-ink);margin:0 0 calc(15*var(--u))}
#services.ks .ks-head h2 .ks-line{display:block}
#services.ks .ks-head h2{font-size:calc(40*var(--u));font-weight:800;line-height:1.15;letter-spacing:-.036em;color:var(--ks-ink)}
#services.ks .ks-lead{grid-column:2;grid-row:1;padding-top:calc(31*var(--u));max-width:calc(500*var(--u));font-size:calc(15.3*var(--u));line-height:calc(24*var(--u));color:var(--ks-lead);font-weight:400}

/* Body: cards + hotspot */
#services.ks .ks-body{display:grid;grid-template-columns:minmax(0,691fr) minmax(0,475fr);column-gap:calc(22*var(--u));align-items:stretch}
#services.ks .ks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(14*var(--u))}
#services.ks .ks-card{display:flex;gap:calc(13*var(--u));align-items:flex-start;padding:calc(18*var(--u)) calc(20*var(--u)) calc(24*var(--u)) calc(22*var(--u));border-radius:calc(16*var(--u));background:#fff;border:1px solid var(--ks-line);
  box-shadow:0 1px 3px rgba(20,40,90,.03);transition:box-shadow .25s ease,transform .25s ease}
#services.ks .ks-card:hover{transform:translateY(-2px);box-shadow:0 calc(10*var(--u)) calc(24*var(--u)) rgba(20,40,90,.09)}
#services.ks .ks-card>svg{flex:none;width:calc(28*var(--u));height:calc(28*var(--u));margin-top:3px;color:var(--ks-blue);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#services.ks .ks-card>div{min-width:0;flex:1}
#services.ks .ks-card h3{font-size:calc(14.7*var(--u));font-weight:700;line-height:calc(17*var(--u));letter-spacing:-.005em;color:var(--ks-ink);padding-top:3px}
#services.ks .ks-card p{margin-top:calc(6*var(--u));color:var(--ks-mute)}
#services.ks .ks-card button{display:inline-flex;align-items:center;gap:calc(7*var(--u));margin-top:calc(15*var(--u));padding:0;min-height:0;border:0;background:none;
  font-size:calc(13.4*var(--u));line-height:calc(18*var(--u));font-weight:700;color:var(--ks-blue);cursor:pointer;text-align:left}
#services.ks .ks-card button svg{width:calc(14*var(--u));height:calc(14*var(--u));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
#services.ks .ks-card button:hover svg{transform:translateX(3px)}
#services.ks .ks-card button:focus-visible,#services.ks .ks-cities button:focus-visible{outline:3px solid var(--ks-blue);outline-offset:3px;border-radius:calc(8*var(--u))}

/* Hotspot card */
#services.ks .ks-hot{position:relative;isolation:isolate;overflow:hidden;border-radius:calc(28*var(--u));
  background:linear-gradient(135deg,#eaf1ff 0%,#dbe7ff 60%,#d2e2ff 100%);border:1px solid #dbe6fb;box-shadow:0 calc(14*var(--u)) calc(34*var(--u)) rgba(30,70,150,.09)}
#services.ks .ks-hot-art{position:absolute;top:calc(11*var(--u));right:0;bottom:0;width:40%;z-index:-1;pointer-events:none}
#services.ks .ks-hot-art img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
#services.ks .ks-hot-copy{position:relative;padding:calc(32*var(--u)) calc(26*var(--u)) calc(26*var(--u))}
#services.ks .ks-hot .ks-eyebrow{font-size:calc(11.5*var(--u));letter-spacing:.22em;word-spacing:.3em;margin:0 0 calc(9*var(--u))}
#services.ks .ks-hot h3{max-width:calc(235*var(--u));font-size:calc(30*var(--u));font-weight:800;line-height:1.167;letter-spacing:-.035em;color:var(--ks-ink)}
#services.ks .ks-hot-text{max-width:calc(245*var(--u));margin-top:calc(13*var(--u));font-size:calc(14.3*var(--u));line-height:calc(22*var(--u));color:var(--ks-lead);font-weight:400}
#services.ks .ks-cities{display:flex;flex-wrap:wrap;gap:calc(9*var(--u));margin-top:calc(16*var(--u))}
#services.ks .ks-cities button{height:calc(40*var(--u));padding:0 calc(15*var(--u));border:1px solid #2a55c8;border-radius:calc(12*var(--u));background:#fff;color:var(--ks-ink);font-size:calc(13.5*var(--u));font-weight:500;cursor:pointer;
  transition:background .2s ease,color .2s ease}
#services.ks .ks-cities button:hover{background:var(--ks-blue);border-color:var(--ks-blue);color:#fff}
#services.ks .ks-hot-foot[hidden]{display:none}

/* Shared type scale (see type-scale.css) */
#services.ks .ks-eyebrow,#services.ks .ks-hot .ks-eyebrow{font-size:var(--fs-label);line-height:16px}
#services.ks .ks-head h2{font-size:var(--fs-h2);line-height:1.12}
#services.ks .ks-lead{font-size:var(--fs-body);line-height:1.6}
#services.ks .ks-card h3{font-size:var(--fs-body);line-height:1.25}
#services.ks .ks-card p{font-size:var(--fs-small);line-height:1.5}
#services.ks .ks-card button{font-size:var(--fs-small);line-height:1.3}
#services.ks .ks-hot h3{font-size:var(--fs-h3);line-height:1.17}
#services.ks .ks-hot-text{font-size:var(--fs-body);line-height:1.55}
#services.ks .ks-cities button{font-size:var(--fs-small)}

@media (max-width:1099px){
  #services.ks .ks-head{grid-template-columns:minmax(0,1fr)}
  #services.ks .ks-lead{grid-column:1;grid-row:2;padding-top:12px}
  #services.ks .ks-body{grid-template-columns:minmax(0,1fr);row-gap:22px}
  #services.ks .ks-head h2 .ks-line{display:inline}
  #services.ks .ks-hot-art{width:38%}
  #services.ks .ks-hot-copy{padding-bottom:34px}
}
@media (max-width:760px){
  #services.ks .ks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  #services.ks{padding:16px 16px 30px}
  #services.ks .ks-head h2 .ks-line{display:block}
  #services.ks .ks-hot-art{position:relative;top:0;width:100%;height:170px;z-index:0}
  #services.ks .ks-hot-art img{object-position:center 35%}
  #services.ks .ks-hot{display:flex;flex-direction:column}
  #services.ks .ks-hot h3,#services.ks .ks-hot-text{max-width:none}
}
@media (max-width:440px){
  #services.ks .ks-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  #services.ks .ks-card,#services.ks .ks-cities button,#services.ks .ks-card button svg{transition:none}
}