/* ── Services page content ── */
html, body { color: var(--text); background: var(--white); }
#content { padding: 94px 0 80px; }
.services-wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; width: 100%; }
.section-header { margin-bottom: 36px; max-width: 640px; }
.section-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; display: block; }
.section-title { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 14px; }
.section-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }

/* justify-content:center only actually affects an incomplete last row —
   a full row of columns already sums to 100% width regardless (4 cols ×
   25% each), so this has no visible effect there. It's here specifically
   so a trailing row of 1-3 cards (whatever's left over after however many
   services divide evenly into the grid) centers itself instead of sitting
   flush left with empty space to its right. */
.services-grid { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: -10px -10px 48px; justify-content: center; }
.services-grid > .col { padding: 10px; display: flex; align-items: stretch; }
.service-card { background: var(--white); border-radius: 12px; padding: 24px; border: 1px solid var(--border); transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s cubic-bezier(0.25,0.46,0.45,0.94), border-color 0.35s ease; position: relative; overflow: hidden; width: 100%; min-height: 200px; display: flex; flex-direction: column; }
.service-card::before { content: ''; position: absolute; inset: 0; background: rgba(232,137,28,0.10); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06); border-color: rgba(232,137,28,0.3); }
.service-card:hover::before { opacity: 1; }
.service-icon-wrap { width: 44px; height: 44px; background: var(--orange-lt); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; position: relative; overflow: hidden; }
.service-icon-wrap::after { content: ''; position: absolute; inset: 0; background: var(--orange); opacity: 0; transition: opacity 0.35s ease; border-radius: inherit; pointer-events: none; }
.service-card:hover .service-icon-wrap::after { opacity: 1; }
.service-icon-wrap svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s ease; position: relative; z-index: 1; }
.service-card:hover .service-icon-wrap svg { stroke: white; }
.service-title { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; min-height: 2.6em; }
.service-desc  { font-size: 0.78rem; color: var(--muted); line-height: 1.65; flex: 1; }

/* Why Choose Us strip — matches .service-card design exactly */
.why-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 56px; }
.why-card { background: var(--white); border-radius: 12px; padding: 24px; border: 1px solid var(--border); transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s cubic-bezier(0.25,0.46,0.45,0.94), border-color 0.35s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.why-card::before { content: ''; position: absolute; inset: 0; background: rgba(232,137,28,0.10); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06); border-color: rgba(232,137,28,0.3); }
.why-card:hover::before { opacity: 1; }
.why-icon { width: 44px; height: 44px; background: var(--orange-lt); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; position: relative; overflow: hidden; }
.why-icon::after { content: ''; position: absolute; inset: 0; background: var(--orange); opacity: 0; transition: opacity 0.35s ease; border-radius: inherit; pointer-events: none; }
.why-card:hover .why-icon::after { opacity: 1; }
.why-icon svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s ease; position: relative; z-index: 1; }
.why-card:hover .why-icon svg { stroke: white; }
.why-title { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.why-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.65; }

.services-cta { text-align: center; padding: 8px 0; }
.cta-note { font-size: 0.88rem; color: var(--muted); margin-bottom: 14px; }
.cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 32px; background: var(--orange); color: #fff; font-size: 0.92rem; font-weight: 600; border-radius: 8px; border: none; transition: opacity 0.25s ease, transform 0.25s ease; cursor: pointer; }
.cta-btn:hover { opacity: 0.9; transform: translateY(-2px); }
.cta-btn:focus-visible { outline: 2px solid var(--orange-dk); outline-offset: 2px; }

@media (max-width: 991.98px) {
  #content { padding: 94px 0 56px; }
  .services-wrap { padding: 0 24px; }
  .why-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .services-wrap { padding: 0 18px; }
  .section-title { font-size: 1.5rem; }
  .why-strip { grid-template-columns: 1fr; }
}