/* services.css — Services page */

.page-hero { height:420px; }
.page-hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(13,27,42,.55) 0%, rgba(13,27,42,.9) 100%),
    url('images/towersfog.jpg') center/cover no-repeat;
}
.page-hero-content { position:relative; max-width:1200px; width:100%; margin:0 auto; }

.btn-design { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); text-decoration:none; font-weight:700; font-size:.9375rem; padding:.75rem 1.5rem; border-radius:8px; white-space:nowrap; transition:background .2s,transform .15s; }
.btn-design:hover { background:#00a896; transform:translateY(-1px); }

/* ── LAYOUT ── */
.services-body { max-width:1200px; margin:0 auto; padding:5rem 5vw; display:flex; gap:4rem; align-items:flex-start; }

.services-nav { flex-shrink:0; width:220px; position:sticky; top:88px; }
.services-nav p { font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin-bottom:.75rem; }
.services-nav ul { list-style:none; border-left:2px solid #e2e8f0; }
.services-nav ul li a { display:block; padding:.5rem 1rem; font-size:.875rem; color:var(--gray); text-decoration:none; border-left:2px solid transparent; margin-left:-2px; transition:color .2s,border-color .2s; }
.services-nav ul li a:hover, .services-nav ul li a.active { color:var(--teal); border-left-color:var(--teal); }

/* ── SERVICE SECTIONS ── */
.services-content { flex:1; min-width:0; }
.service-section { padding-top:5rem; margin-top:-5rem; }
.service-section:first-child { padding-top:0; margin-top:0; }
.service-section + .service-section { border-top:1px solid #e8edf2; margin-top:4rem; padding-top:4rem; }

.service-img { width:100%; border-radius:14px; overflow:hidden; margin-bottom:2rem; position:relative; }
.service-img img { width:100%; height:320px; object-fit:cover; display:block; }
.service-tag { position:absolute; top:16px; left:16px; background:var(--navy); color:var(--mist); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:100px; }

.service-section-label { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:.5rem; }
.service-section h2 { font-family:'Playfair Display',serif; font-size:clamp(1.5rem,3vw,2.25rem); color:var(--navy); line-height:1.2; margin-bottom:1rem; }
.service-section > p { font-size:1rem; color:var(--gray); max-width:680px; margin-bottom:2rem; }

.spec-callout { background:var(--navy); border-radius:14px; padding:1.75rem; display:flex; gap:2rem; margin:2rem 0; flex-wrap:wrap; }
.spec-item { flex:1; min-width:120px; text-align:center; }
.spec-item strong { display:block; font-family:'Playfair Display',serif; font-size:2rem; color:var(--mist); line-height:1; margin-bottom:4px; }
.spec-item span { font-size:.75rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; }

.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:.875rem; margin-bottom:2rem; }
.feature-item { display:flex; align-items:flex-start; gap:.625rem; font-size:.875rem; color:var(--navy); }
.feature-item::before { content:'✓'; flex-shrink:0; width:20px; height:20px; background:rgba(0,191,165,.12); color:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; line-height:20px; text-align:center; }

.photo-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1.5rem; }
.photo-strip img { width:100%; height:140px; object-fit:cover; border-radius:10px; display:block; transition:transform .3s; }
.photo-strip img:hover { transform:scale(1.03); }

.section-cta { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); text-decoration:none; font-weight:600; font-size:.9375rem; padding:.75rem 1.5rem; border-radius:8px; transition:background .2s,transform .15s; }
.section-cta:hover { background:#00a896; transform:translateY(-1px); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .services-body { flex-direction:column; gap:2rem; }
  .services-nav { width:100%; position:static; }
  .services-nav ul { border-left:none; display:flex; flex-wrap:wrap; gap:.25rem; }
  .services-nav ul li a { border-left:none; border-bottom:2px solid transparent; padding:.375rem .75rem; background:var(--light); border-radius:6px; }
  .services-nav ul li a:hover, .services-nav ul li a.active { border-bottom-color:var(--teal); }
  .feature-list { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .photo-strip { grid-template-columns:1fr 1fr; }
}