/* ============================================================
   services.css
============================================================ */
#services {
  background: var(--off-white);
}

.services-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.services-intro-text {
  max-width: 400px;
  color: var(--grey-600);
  font-size: .94rem;
  line-height: 1.85;
  font-weight: 300;
}

/* ── GRID ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── CARD ── */
.service-card {
  background: var(--white);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--grey-200);
  transition: transform var(--trans-med), box-shadow var(--trans-med), border-color var(--trans-med);
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgba(30,64,175,.3);
  z-index: 2;
}

/* Animated top bar */
.service-card-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--royal), var(--royal-light));
  transition: width .5s var(--ease-expo);
}
.service-card:hover .service-card-bar { width: 100%; }

/* Photo */
.service-card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.service-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-expo), filter .6s;
  filter: saturate(.8);
}
.service-card:hover .service-card-img img {
  transform: scale(1.07);
  filter: saturate(1);
}
.service-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,22,40,.45) 0%, transparent 60%);
  transition: opacity .4s;
}
.service-card:hover .service-card-img-overlay { opacity: .6; }

/* Body */
.service-card-body {
  padding: 28px 26px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-num {
  font-family: var(--font-ui);
  font-size: .65rem;
  letter-spacing: .2em;
  color: var(--royal);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.service-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--navy);
  margin-bottom: 12px;
}
.service-desc {
  font-size: .85rem;
  color: var(--grey-600);
  line-height: 1.85;
  flex: 1;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  color: var(--royal);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-ui);
  transition: gap .25s, color .2s;
}
.service-card:hover .service-link { gap: 14px; color: var(--royal-mid); }