/* ============================================================
   CEE [cee_services] — a homepage-flowing Services page:
   light animated intro, a clean "How it works" section, and
   (rendered separately) the living Kansas county map.
   Scoped under .cee-svc.
   ============================================================ */
.cee-svc, .cee-svc * { box-sizing: border-box; }
.cee-svc {
  --cee-blue: #6ca5d5;
  --cee-deep: #3d6f9e;
  --cee-ink: #1d3043;
  --cee-sky: #eef4fa;
  --cee-gold: #e8a13d;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--cee-ink);
  /* full-bleed even inside a builder container */
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  overflow-x: clip;
}
.cee-svc h2, .cee-svc h3 { font-family: 'Playfair Display', serif; margin: 0; line-height: 1.1; }
.cee-svc p { margin: 0; }

/* ---- Intro ---- */
.cee-svc-intro {
  text-align: center;
  padding: 64px 24px 52px;
  background:
    radial-gradient(900px 480px at 80% -25%, rgba(108,165,213,.20) 0%, transparent 60%),
    linear-gradient(180deg, var(--cee-sky) 0%, #fbfdff 100%);
}
.cee-svc-intro h2 {
  font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; max-width: 900px; margin: 0 auto;
  opacity: 0; animation: cee-svc-rise .8s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.cee-svc-intro h2 em { font-style: italic; color: var(--cee-deep); }
.cee-svc-intro p {
  font-size: 17px; color: #45617c; max-width: 620px; margin: 16px auto 0;
  opacity: 0; animation: cee-svc-rise .8s cubic-bezier(.2,.8,.2,1) .25s forwards;
}
@media (min-width: 760px) {
  .cee-svc-intro h2 { white-space: nowrap; }
}
@keyframes cee-svc-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---- How it works ---- */
.cee-svc-steps-wrap {
  padding: 30px 24px 96px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fd 100%);
}
.cee-svc-steps {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
}
.cee-svc-step {
  position: relative;
  background: #fff; border: 1px solid #e6eef7; border-radius: 20px; padding: 32px 30px;
  box-shadow: 0 22px 50px -34px rgba(29,48,67,.4);
  display: flex; gap: 20px; align-items: flex-start;
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.cee-svc-step.in { opacity: 1; transform: none; }
.cee-svc-steps .cee-svc-step:nth-child(1) { transition-delay: .00s; }
.cee-svc-steps .cee-svc-step:nth-child(2) { transition-delay: .10s; }
.cee-svc-steps .cee-svc-step:nth-child(3) { transition-delay: .20s; }
.cee-svc-steps .cee-svc-step:nth-child(4) { transition-delay: .30s; }

.cee-svc-ico {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cee-blue), var(--cee-deep));
  box-shadow: 0 12px 26px -12px rgba(61,111,158,.65);
}
.cee-svc-ico svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cee-svc-step:nth-child(4) .cee-svc-ico { background: linear-gradient(135deg, #f3b14e, var(--cee-gold)); box-shadow: 0 12px 26px -12px rgba(232,161,61,.6); }
.cee-svc-step h3 { font-size: 22px; color: var(--cee-ink); }
.cee-svc-step .cee-svc-num { font-family: 'Playfair Display', serif; color: var(--cee-blue); font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.cee-svc-step p { margin-top: 8px; color: #4d6680; font-size: 15.5px; line-height: 1.6; }

@media (max-width: 820px) {
  .cee-svc-steps { grid-template-columns: 1fr; }
  .cee-svc-intro { padding-top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .cee-svc-eyebrow, .cee-svc-intro h2, .cee-svc-intro p { opacity: 1 !important; animation: none !important; }
  .cee-svc-step { opacity: 1 !important; transform: none !important; transition: none !important; }
}