/* === Services Page === */

/* Services section - centered grid with equal side padding */
.u-section-services { background-image: none; }
.u-section-services .u-sheet-1 { min-height: 900px; padding-left: 30px; padding-right: 30px; }
.u-section-services .u-text-1 { font-size: 2.25rem; font-weight: 700; margin: 40px auto 10px; text-align:center }
.u-section-services .u-text-2 { width: 800px; max-width: 100%; margin: 0 auto 20px; color: #475569; text-align:center }
.u-section-services .badge-row { display:flex; flex-wrap: wrap; gap:8px; justify-content:center; margin-bottom: 24px; }
.u-section-services .badge { background: rgba(71,138,201,0.12); color: #478ac9; border: 1px solid rgba(71,138,201,.35); padding:6px 10px; border-radius:999px; font-size:14px }
.u-section-services .filters-card { max-width: 1100px; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:8px; margin: 0 auto; font-size:14px; font-weight:700;}
.u-section-services .filters-top { display:flex; gap:8px; align-items:center }
.u-section-services .filters-top .u-search { flex:1 }
.u-section-services .u-search input { width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:8px 8px; outline:none }
.u-section-services .u-search input:focus { border-color:#bcd7ef; box-shadow:0 0 0 3px rgba(71,138,201,.25) }
.u-section-services .clear-link { margin-left:auto; background:none; border:none; color:#37649b; font-weight:600; cursor:pointer }
.u-section-services .pill-row { display:flex; flex-wrap:wrap; gap:8px }
.u-section-services .pill { padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer }
.u-section-services .pill.active { background:#cce3ed; color:#fff; border-color:#478ac9; }
.u-section-services .grid { display:grid; grid-template-columns:1fr; gap:16px; margin:26px auto 56px; max-width:1100px }
@media (min-width:768px){ .u-section-services .grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .u-section-services .grid { grid-template-columns:repeat(3,1fr); } }
.u-section-services .card { background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:0 1px 2px rgba(2,8,23,.04) }
.u-section-services .card:hover { box-shadow:0 6px 24px rgba(2,8,23,.08) }
.u-section-services .card .emoji { font-size:22px }
.u-section-services .card-title { margin:0; color:#37649b; font-size:20px; font-weight:700 }
.u-section-services .card-sub { margin:6px 0 0; color:#475569; font-size:14px }
.u-section-services .meta { display:flex; gap:12px; color:#64748b; font-size:13px }
.u-section-services .deliverables-title { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#64748b }
.u-section-services .deliverables-list { margin:8px 0 0; padding:0 0 0 18px }
.u-section-services .price .muted { color:#64748b }
.u-section-services .price-text { color:#37649b }
.u-section-services .btn-row { display:flex; gap:8px }
.u-section-services .btn { border-radius:10px; padding:10px 12px; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px }
.u-section-services .btn.solid { background:#478ac9; color:#fff; border:1px solid #478ac9 }
.u-section-services .btn.solid:hover { background:#37649b }
.u-section-services .btn.outline { background:#fff; border:1px solid #e5e7eb; color:#0f172a }
.u-section-services .btn.outline:hover { background:#f8fafc }

/* Modal using <dialog> */
#svc-modal::backdrop{ background: rgba(0,0,0,.45); }
#svc-modal{ border:none; border-radius:16px; padding:0; max-width:720px; width:96% }
#svc-modal .modal-content{ background:#fff; border-radius:16px; border:1px solid #e5e7eb; padding:16px }
#svc-modal .modal-head{ display:flex; gap:10px; align-items:flex-start }
#svc-modal .modal-head .emoji{ font-size:24px }
#svc-modal .modal-head h3{ margin:0; color:#37649b }
#svc-modal .muted{ color:#64748b }
#svc-modal .modal-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:10px 0 }
@media(min-width:680px){ #svc-modal .modal-grid{ grid-template-columns: 1fr 1fr } }
#svc-modal .box{ border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fff }
#svc-modal .box-title{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#64748b; margin-bottom:6px }
#svc-modal .list{ margin:8px 0 0; padding-left:18px }
#svc-modal .modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px }
#svc-modal .close,.close2{ background:none; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; cursor:pointer }
#svc-modal .close:hover,.close2:hover{ background:#f1f5f9 }

/* === Distinct package accents: green → blue spectrum === */
:root{
  /* brand base (already used across site) */
  --brand-blue:#478ac9;

  /* 8 distinct accents, light→dark along green→blue */
  --pkg-1:#16a34a;  /* emerald */
  --pkg-2:#0d9488;  /* green-teal */
  --pkg-3:#0f766e;  /* teal */
  --pkg-4:#0284c7;  /* cyan/sky */
  --pkg-5:#478ac9;  /* site blue */
  --pkg-6:#2563eb;  /* blue */
  --pkg-7:#1e40af;  /* deep blue */
  --pkg-8:#1e3a8a;  /* navy */

  /* hover/darker mates for buttons */
  --pkg-1h:#15803d;
  --pkg-2h:#0f766e;
  --pkg-3h:#115e59;
  --pkg-4h:#0369a1;
  --pkg-5h:#2770b9;
  --pkg-6h:#1d4ed8;
  --pkg-7h:#1e3a8a;
  --pkg-8h:#172554;
}

/* keep filter card subtle so packages pop */
.u-section-services .filters-card{
  background: linear-gradient(180deg, rgba(71,138,201,.06), #fff 85%);
  border-color: rgba(71,138,201,.35);
  box-shadow: 0 8px 28px rgba(2,8,23,.06);
}

/* common card styling + colored spine */
.u-section-services .card{ position:relative; overflow:hidden; }
.u-section-services .card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; border-radius:18px 0 0 18px; background:var(--brand-blue);
}

/* tone classes per package */
.u-section-services .card.tone-1::before{ background:var(--pkg-1); }
.u-section-services .card.tone-2::before{ background:var(--pkg-2); }
.u-section-services .card.tone-3::before{ background:var(--pkg-3); }
.u-section-services .card.tone-4::before{ background:var(--pkg-4); }
.u-section-services .card.tone-5::before{ background:var(--pkg-5); }
.u-section-services .card.tone-6::before{ background:var(--pkg-6); }
.u-section-services .card.tone-7::before{ background:var(--pkg-7); }
.u-section-services .card.tone-8::before{ background:var(--pkg-8); }

/* titles adopt the card tone */
.u-section-services .card.tone-1 .card-title{ color:var(--pkg-1); }
.u-section-services .card.tone-2 .card-title{ color:var(--pkg-2); }
.u-section-services .card.tone-3 .card-title{ color:var(--pkg-3); }
.u-section-services .card.tone-4 .card-title{ color:var(--pkg-4); }
.u-section-services .card.tone-5 .card-title{ color:var(--pkg-5); }
.u-section-services .card.tone-6 .card-title{ color:var(--pkg-6); }
.u-section-services .card.tone-7 .card-title{ color:var(--pkg-7); }
.u-section-services .card.tone-8 .card-title{ color:var(--pkg-8); }

/* buttons match the tone (fallback = brand) */
.u-section-services .btn.solid{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff }
.u-section-services .btn.solid:hover{ background:#2770b9; border-color:#2770b9; }

.u-section-services .card.tone-1 .btn.solid{ background:var(--pkg-1); border-color:var(--pkg-1); }
.u-section-services .card.tone-2 .btn.solid{ background:var(--pkg-2); border-color:var(--pkg-2); }
.u-section-services .card.tone-3 .btn.solid{ background:var(--pkg-3); border-color:var(--pkg-3); }
.u-section-services .card.tone-4 .btn.solid{ background:var(--pkg-4); border-color:var(--pkg-4); }
.u-section-services .card.tone-5 .btn.solid{ background:var(--pkg-5); border-color:var(--pkg-5); }
.u-section-services .card.tone-6 .btn.solid{ background:var(--pkg-6); border-color:var(--pkg-6); }
.u-section-services .card.tone-7 .btn.solid{ background:var(--pkg-7); border-color:var(--pkg-7); }
.u-section-services .card.tone-8 .btn.solid{ background:var(--pkg-8); border-color:var(--pkg-8); }

.u-section-services .card.tone-1 .btn.solid:hover{ background:var(--pkg-1h); }
.u-section-services .card.tone-2 .btn.solid:hover{ background:var(--pkg-2h); }
.u-section-services .card.tone-3 .btn.solid:hover{ background:var(--pkg-3h); }
.u-section-services .card.tone-4 .btn.solid:hover{ background:var(--pkg-4h); }
.u-section-services .card.tone-5 .btn.solid:hover{ background:var(--pkg-5h); }
.u-section-services .card.tone-6 .btn.solid:hover{ background:var(--pkg-6h); }
.u-section-services .card.tone-7 .btn.solid:hover{ background:var(--pkg-7h); }
.u-section-services .card.tone-8 .btn.solid:hover{ background:var(--pkg-8h); }

.designed-by {
  font-size: 0.8rem;
  color: #64748b;
}
.designed-by:hover {
  color: #478ac9;
}