/* ------------------------------------------------------------------
   services.css - the Services page.

   Loads after base.css, modern.css and components.css. The header, buttons,
   eyebrows, the closing panel and the footer come from modern.css; the short
   hero, plan cards, steps and FAQ list from components.css. This file is the
   two groups of service cards and the notes under the build packages.

   The services come first, right under the short hero: the first row of cards
   is meant to be on screen without scrolling.
   ------------------------------------------------------------------ */

/* --- the two groups of service cards -------------------------------- */
.svc-group{padding:40px 0 6px}
.svc-group+.svc-group{padding:64px 0 84px}
.svc-group .section-head{margin-bottom:22px}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:26px 24px 24px;border:1px solid rgba(20,23,41,.07);border-radius:19px;background:#fff}
.svc-card:nth-child(4n+1){background:#eeebff}
.svc-card:nth-child(4n+2){background:#eaf9ee}
.svc-card:nth-child(4n+3){background:#edf2fc}
.svc-card:nth-child(4n+4){background:#fff0e6}
.modern .svc-card.reveal{transition:opacity .75s ease,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .25s}
.modern .svc-card.reveal.visible:hover{transform:translateY(-8px);border-color:#ccc1ed;box-shadow:0 23px 42px #20165f16}
.svc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.svc-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:#ffffffb0;color:#444272;font-size:18px;font-weight:800;line-height:1}
.svc-kicker{padding:6px 10px;border-radius:99px;background:#ffffffb8;color:#4f4496;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.svc-card h3{margin:22px 0 8px;color:#15192a;font-size:21px;font-weight:750;line-height:1.24;letter-spacing:-.045em}
.svc-card p{color:#566277;font-size:13.5px;line-height:1.7}
.svc-list{display:grid;gap:9px;margin:16px 0 0;padding:0;list-style:none}
.svc-list li{position:relative;padding-left:27px;color:#2c3550;font-size:13px;line-height:1.5}
.svc-list li:before{content:"\2713";position:absolute;left:0;top:0;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#ffffffc8;color:#6253b6;font-size:10px;font-weight:900;line-height:1}
.svc-foot{margin-top:auto;padding-top:24px}
.svc-link{display:inline-flex;gap:8px;padding-bottom:5px;border-bottom:1px solid #6e798a;color:#17192a;font-size:13px;font-weight:800;transition:color .25s,border-color .25s}
.svc-link:hover{color:#7a3c6e;border-color:#7a3c6e}

/* --- build packages: the cards are components.css, these are the notes --- */
.svc-packages{padding:84px 0 90px;border-block:1px solid #e8deed;background:#f1edf5}
.svc-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 0;padding:0;list-style:none}
.svc-notes li{position:relative;padding:20px 22px 20px 58px;border:1px solid #e6dfe9;border-radius:17px;background:#fff;color:#625b6a;font-size:12.5px;line-height:1.7}
.svc-notes li:before{content:"\2713";position:absolute;left:21px;top:20px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f4e7f5;color:#8f4f99;font-size:11px;font-weight:900;line-height:1}
.svc-notes a{display:inline-block;margin-left:4px;color:#83589c;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.svc-faq{display:grid;grid-template-columns:270px 1fr;gap:90px;margin-top:74px}
.svc-faq .sec-title{font-size:clamp(22px,2vw,26px)}

/* --- how a build moves, how a month runs ---------------------------- */
.svc-how{padding:84px 0 70px}
.svc-track+.svc-track{margin-top:80px}

/* --- closing panel (the panel is in modern.css, its row layout in components.css) --- */
.modern-services .section{padding-block:0 82px}

/* --- smaller screens ------------------------------------------------ */
@media(max-width:1180px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-faq{gap:45px}
}
@media(max-width:830px){
  .svc-notes{grid-template-columns:1fr}
  .svc-faq{grid-template-columns:1fr;gap:20px;margin-top:56px}
}
@media(max-width:700px){
  .svc-grid{grid-template-columns:1fr}
}
@media(max-width:570px){
  .svc-group{padding-top:36px}
  .svc-group+.svc-group{padding:56px 0 70px}
  .svc-packages{padding:62px 0 66px}
  .svc-how{padding:62px 0 54px}
  .svc-track+.svc-track{margin-top:60px}
  .modern-services .section{padding-bottom:55px}
}