/* ============================================================
   SERVICES PAGE — MOBILE FIRST, NO HORIZONTAL SCROLL
   ============================================================ */

/* HERO */
.svc-hero { background: var(--green); padding: 52px 0 44px; width: 100%; overflow: hidden; }
.svc-hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 28px; }
.svc-hero-inner h1 { font-family: var(--font-serif); font-size: clamp(26px, 7vw, 52px); color: #fff; margin: 12px 0 10px; }
.svc-hero-inner p  { color: rgba(255,255,255,.75); font-size: 14.5px; }
.svc-hero-img { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; background: #fff; width: 100%; }
.svc-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.55); font-size: 13px; transition: color var(--transition); }
.back-link:hover { color: var(--yellow); }

/* STICKY TABS */
.svc-tabs { position: sticky; top: 64px; z-index: 900; background: var(--dark); display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 10px; gap: 2px; border-bottom: 2px solid rgba(255,255,255,.08); width: 100%; }
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tabs .tab { flex-shrink: 0; color: rgba(255,255,255,.6); font-size: 12px; font-weight: 600; padding: 11px 12px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--transition), border-color var(--transition); }
.svc-tabs .tab:hover, .svc-tabs .tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }

/* SERVICE BLOCKS */
.svc-block-inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.svc-block-text p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.section--dark .svc-block-text p { color: rgba(255,255,255,.75); }
.sub-list { display: flex; flex-direction: column; gap: 12px; }
.sub-item { display: flex; gap: 10px; align-items: flex-start; }
.sub-item > i { color: var(--yellow); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.sub-item > div strong { font-size: 14px; display: block; margin-bottom: 2px; }
.sub-item > div p { font-size: 13px; color: var(--muted); margin: 0; }
.sub-item.light > div strong { color: #fff; }
.sub-item.light > div p { color: rgba(255,255,255,.65); }
.svc-block-img { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: #eee; width: 100%; }
.svc-block-img img { width: 100%; height: 100%; object-fit: cover; }

/* BRANDS */
.brands-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.brands-grid span { background: rgba(7,48,77,.12); color: #07304d; font-weight: 800; font-size: 12px; padding: 7px 14px; border-radius: 50px; white-space: nowrap; }

/* AREAS */
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.area-card { background: #fff; border-radius: var(--radius-sm); padding: 12px 14px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); font-size: 13px; font-weight: 600; }
.area-card i { color: var(--pink); font-size: 14px; flex-shrink: 0; }

.section-head { text-align: center; margin-bottom: 32px; }

/* ── DESKTOP 900px+ ── */
@media (min-width: 900px) {
  .svc-hero { padding: 70px 0 60px; }
  .svc-hero-inner { flex-direction: row; align-items: center; gap: 52px; }
  .svc-hero-img { max-width: 520px; }
  .svc-block-inner { grid-template-columns: 1fr 1fr; gap: 56px; }
  .svc-block-inner.reverse { direction: rtl; }
  .svc-block-inner.reverse > * { direction: ltr; }
  .areas-grid { grid-template-columns: repeat(4, 1fr); }
  .svc-tabs .tab { padding: 13px 16px; font-size: 13px; }
}