/* SERVICES 1 - GRID CARDS */
.services-1 { padding: 100px 5%; background: var(--white); }
.services-1 .header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.services-1 .eyebrow { font-size: 0.85rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 16px; }
.services-1 h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--gray-900); margin-bottom: 16px; }
.services-1 .subtitle { font-size: 1.1rem; color: var(--gray-600); line-height: 1.7; }
.services-1 .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }
.services-1 .card { background: var(--off-white); padding: 40px 32px; text-align: center; transition: all 0.4s ease; position: relative; overflow: hidden; }
.services-1 .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); transform: scaleX(0); transition: transform 0.4s ease; }
.services-1 .card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
.services-1 .card:hover::before { transform: scaleX(1); }
.services-1 .card-icon { width: 80px; height: 80px; background: var(--white); border: 2px solid var(--gray-200); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; transition: all 0.3s ease; }
.services-1 .card:hover .card-icon { background: var(--accent); border-color: var(--accent); }
.services-1 .card-icon svg { width: 36px; height: 36px; color: var(--accent); transition: color 0.3s ease; }
.services-1 .card:hover .card-icon svg { color: var(--white); }
.services-1 .card h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--gray-900); margin-bottom: 12px; }
.services-1 .card p { font-size: 0.95rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 20px; }
.services-1 .card-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: gap 0.3s ease; }
.services-1 .card-link:hover { gap: 12px; }
.services-1 .card-link svg { width: 16px; height: 16px; }
@media (max-width: 1024px) { .services-1 .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-1 .grid { grid-template-columns: 1fr; } }