@charset "utf-8";
/* Naireen · services.css — #services */

/* ---------- services ---------- */
.svc-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:44px}
.svc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.card{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:clamp(22px,2.6vw,32px); backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px);
  transition:border-color .4s, transform .4s cubic-bezier(.16,1,.3,1), background .4s;
  display:flex; flex-direction:column; gap:14px;
}
.card:hover{border-color:rgba(214,174,91,.45); transform:translateY(-4px)}
.card .kic{font-family:var(--f-ui); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:8px}
.card p{margin:0; color:#B6B1A6; font-size:15.5px; line-height:1.85}
.card h3{color:var(--ivory)}
.ul{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px}
.ul li{position:relative; padding-inline-start:22px; font-size:14.5px; line-height:1.7; color:#CFCABE}
.ul li::before{content:"✦"; position:absolute; inset-inline-start:0; top:1px; color:var(--gold); font-size:11px; opacity:.85}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:6px}
.chip{font-family:var(--f-ui); font-size:11px; letter-spacing:.05em; color:var(--mist); border:1px solid var(--line); border-radius:999px; padding:5px 11px}
.fit{font-size:13px; color:var(--stone); border-top:1px solid var(--line-soft); padding-top:14px; margin:4px 0 0}
.fit b{color:var(--mist); font-weight:500}

.also{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft)}
.also-k{font-family:var(--f-ui); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold)}
.also-i{font-size:14px; color:var(--mist); border:1px solid var(--line); border-radius:999px; padding:7px 14px}

/* ---------- service card marks ---------- */
.card-head{display:flex; align-items:center; gap:12px}
.card-ic{width:38px; height:38px; flex:0 0 auto; border:1px solid rgba(214,174,91,.35); border-radius:11px;
  display:grid; place-items:center; color:var(--gold); background:rgba(214,174,91,.06)}
.card-ic svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.card .kic{margin:0}