/* Extracted from page-services.php so it is cached once instead of being re-sent
   inside the HTML on every page view. Enqueued by
   lumoria_enqueue_template_styles() in functions.php. */

    #lumSvcSec, #lumSvcSec * { box-sizing: border-box; }
    #lumSvcSec {
      --lum-gold: #44BDA1;
      --lum-ink: #1D1235;
      --lum-sub: var(--text-muted);
      --lum-card-bg: rgba(29,18,53,.05);
      --lum-radius: 20px;
      font-family: var(--font-primary);
      max-width: 1500px;
      margin: 0 auto;
      padding: 56px 24px 80px;
    }

    /* ---------------- HEADER ---------------- */
    #lumSvcSec .lum-svc-head {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 48px;
    }
    #lumSvcSec .lum-svc-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(68,189,161,0.4);
      border-radius: 999px;
      padding: 8px 20px;
      font-size: 13px;
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-eyebrow);
      text-transform: uppercase;
      color: var(--lum-gold);
      margin-bottom: 20px;
    }
    #lumSvcSec .lum-svc-title {
      font-family: var(--font-primary);
      font-weight: var(--fw-heading);
      font-size: var(--text-h2);
      line-height: 1.15;
      color: var(--lum-ink);
      margin: 0;
  letter-spacing: var(--ls-h2);
}

    /* ---------------- GRID ---------------- */
    #lumSvcSec .lum-svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

    #lumSvcSec .lum-svc-card {
      position: relative;
      border-radius: var(--lum-radius);
      background: var(--lum-card-bg);
      padding: 36px 32px 34px;
      overflow: hidden;
      isolation: isolate;
    }

    #lumSvcSec .lum-svc-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.45s ease;
    }
    #lumSvcSec .lum-svc-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(68,189,161,0.75) 0%, rgba(68,189,161,0.88) 100%);
    }
    #lumSvcSec .lum-svc-card:hover .lum-svc-bg {
      opacity: 1;
    }

    #lumSvcSec .lum-svc-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 26px;
    }

    #lumSvcSec .lum-svc-icon {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.35s ease;
    }
    #lumSvcSec .lum-svc-card:hover .lum-svc-icon {
      background: rgba(255,255,255,0.2);
    }
    #lumSvcSec .lum-svc-icon svg {
      width: 32px;
      height: 32px;
      stroke: var(--lum-ink);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.35s ease;
    }
    #lumSvcSec .lum-svc-card:hover .lum-svc-icon svg {
      stroke: #fff;
    }

    #lumSvcSec .lum-svc-card-title {
      position: relative;
      z-index: 1;
      font-family: var(--font-primary);
      font-weight: var(--fw-semibold);
      font-size: var(--text-xl);
      line-height: var(--lh-snug);
      color: var(--lum-ink);
      margin: 0;
      transition: color 0.35s ease;
    }
    #lumSvcSec .lum-svc-card:hover .lum-svc-card-title {
      color: #fff;
    }

    #lumSvcSec .lum-svc-divider {
      position: relative;
      z-index: 1;
      border: none;
      border-top: 1px solid rgba(29,18,53,0.12);
      margin: 0 0 26px;
      transition: border-color 0.35s ease;
    }
    #lumSvcSec .lum-svc-card:hover .lum-svc-divider {
      border-top-color: rgba(255,255,255,0.4);
    }

    #lumSvcSec .lum-svc-desc {
      position: relative;
      z-index: 1;
      font-size: 15px;
      line-height: 1.6;
      color: var(--lum-sub);
      margin: 0 0 24px;
      transition: color 0.35s ease;
    }
    #lumSvcSec .lum-svc-card:hover .lum-svc-desc {
      color: rgba(255,255,255,0.92);
    }

    #lumSvcSec .lum-svc-link {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: var(--text-sm);
      font-weight: var(--fw-semibold);
      color: var(--lum-ink);
      text-decoration: none;
      transition: color 0.35s ease;
  line-height: 1;
}
    #lumSvcSec .lum-svc-card:hover .lum-svc-link {
      color: #fff;
    }

    #lumSvcSec .lum-svc-link-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--lum-ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.35s ease;
    }
    #lumSvcSec .lum-svc-link-circle svg {
      width: 14px; height: 14px;
      stroke: #fff;
      stroke-width: 2.2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.35s ease;
    }
    #lumSvcSec .lum-svc-card:hover .lum-svc-link-circle {
      background: #ffffff;
    }
    #lumSvcSec .lum-svc-card:hover .lum-svc-link-circle svg {
      stroke: var(--lum-gold);
    }

    #lumSvcSec .lum-svc-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 60px 24px;
      color: var(--lum-sub);
      font-size: 16px;
    }

    /* ---------------- RESPONSIVE ---------------- */
    @media (max-width: 1100px) {
      #lumSvcSec .lum-svc-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      #lumSvcSec { padding: 40px 16px 60px; }
      #lumSvcSec .lum-svc-head { margin-bottom: 32px; }
      #lumSvcSec .lum-svc-grid { grid-template-columns: 1fr; gap: 18px; }
      #lumSvcSec .lum-svc-card { padding: 30px 26px 32px; }
      #lumSvcSec .lum-svc-icon { width: 64px; height: 64px; }
      #lumSvcSec .lum-svc-icon svg { width: 26px; height: 26px; }
      #lumSvcSec .lum-svc-card-title { }
    }