/* Services listing page styles */
.card-img { background: var(--bg); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); text-decoration: none; color: inherit; }
.card-img:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
.card-img img { width: 100%; height: 240px; object-fit: cover; }
.card-img__content { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; }
.card-img__content h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 1rem; font-weight: 400; }
.card-img__content p { font-size: 0.9rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 1.5rem; flex-grow: 1; }
.card-img__link { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.2s var(--ease); margin-top: auto; }
.card-img:hover .card-img__link { gap: 0.7rem; }

.card-img--cta { border-color: var(--navy); }
.card-img--cta .card-img__content { background: var(--navy); justify-content: center; padding: 3rem 2rem; }
.card-img--cta .card-img__content h3 { color: #fff; }
.card-img--cta .card-img__content p { color: rgba(255,255,255,0.6); }
.card-img--cta .card-img__link { color: var(--accent); }

.hero__badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero__badges .badge-pill { border-color: var(--border); color: var(--text-muted); }

.guidance-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; background: var(--border); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; margin-top: 3rem; }
.guidance-strip__item { background: var(--bg-warm); padding: 2rem 2.5rem; }
.guidance-strip__label { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; }
.guidance-strip__item p { margin: 0; font-size: 0.93rem; line-height: 1.7; color: var(--text-muted); }
.guidance-strip__item a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.guidance-strip__item a:hover { color: var(--accent); }

.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }

@media (max-width: 860px) {
  .grid-4 { grid-template-columns: 1fr; }
  .guidance-strip { grid-template-columns: 1fr; }
}