/* ==========================================================================
   GM CORE — Services module CSS.
   SELF-CONTAINED: the widget colours each card inline (seam + icon tile), and
   this file provides the card SHAPE so the widget looks correct even with no
   theme gm.css present. Brand tokens have literal fallbacks via var(--x, LIT).
   If gm.css IS present, values agree — no conflict.
   ========================================================================== */

/* Grid */
.gm-services-widget .svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1080px){.gm-services-widget .svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.gm-services-widget .svcs{grid-template-columns:1fr}}

/* The widget draws the seam inline as border-top; suppress gm.css's ::before
   pseudo-seam on widget cards so they don't double up. */
.gm-services-widget .svc::before{display:none}

/* Card shell — literal fallbacks so it works standalone */
.gm-services-widget .svc{
  background:#fff;
  border-radius:var(--r-lg,22px);
  padding:30px 26px;
  border:1px solid var(--border,#E1E7EE);
  box-shadow:var(--sh,0 4px 24px rgba(10,27,51,.07));
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);
}
.gm-services-widget .svc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg,0 18px 48px rgba(10,27,51,.14))}

.gm-services-widget .svc__ic{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
}
.gm-services-widget .svc__ic svg{width:25px;height:25px}

.gm-services-widget .svc__tag{
  display:inline-block;background:var(--grey,#F3F6F9);color:var(--muted,#63738A);
  font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill,100px);margin-bottom:12px;align-self:flex-start;
}
.gm-services-widget .svc h3{font-size:1.15rem;margin:0 0 10px;color:var(--navy,#0A1B33)}
.gm-services-widget .svc__d{font-size:.875rem;color:var(--muted,#63738A);line-height:1.7;margin-bottom:18px}

.gm-services-widget .svc__l{list-style:none;margin:0 0 20px;padding:0}
.gm-services-widget .svc__l li{
  font-size:.8125rem;color:var(--dark,#16202E);padding:6px 0 6px 24px;position:relative;line-height:1.5;
}
.gm-services-widget .svc__l li::before{
  content:"";position:absolute;left:0;top:7px;width:15px;height:15px;
  border-radius:50%;background:rgba(15,163,122,.13);
}
.gm-services-widget .svc__l li::after{
  content:"";position:absolute;left:4.5px;top:11px;width:6px;height:3.5px;
  border-left:1.7px solid var(--bar-4,#0FA37A);border-bottom:1.7px solid var(--bar-4,#0FA37A);
  transform:rotate(-45deg);
}
.gm-services-widget .svc__warn{
  margin-top:14px;background:#FEF3F2;border:1px solid #FECDCA;border-radius:10px;
  padding:11px 13px;font-size:.6875rem;line-height:1.55;color:#B42318;
}

/* Self-sufficient button base + fallbacks so buttons have the correct padding,
   shape and colours even without the theme's gm.css. */
.gm-services-widget .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 32px;border:2px solid transparent;border-radius:var(--r-pill,100px);
  font-size:.9375rem;font-weight:700;text-decoration:none;cursor:pointer;box-sizing:border-box;
  transition:transform .25s cubic-bezier(.4,0,.2,1),background .25s,border-color .25s,color .25s;
}
.gm-services-widget .btn--full{width:100%}
.gm-services-widget .btn--sm{padding:11px 22px;font-size:.8125rem}
.gm-services-widget .btn--out{
  background:transparent;color:var(--navy,#0A1B33);border:2px solid var(--border,#E1E7EE);
}
.gm-services-widget .btn--out:hover{border-color:var(--navy,#0A1B33);background:var(--navy,#0A1B33);color:#fff}

/* The button pushes to the card bottom so cards align */
.gm-services-widget .svc .btn{margin-top:auto}