/* ============================================================
   Tanzania Tech Media - Services archive page (corporate redesign)
   Loads with service-detail.css (shared .ttm-btn/.ttm-eyebrow/.ttm-container).
   ============================================================ */
.ttm-svcpage{ --ttm-ink:#111013; --ttm-muted:#5b605b; --ttm-line:#e7e9e2; --ttm-soft:#f6f8ef; }
:root{ --ttm-accent: var(--tp-theme-primary, #13DB31); }

/* hero */
.ttm-svcpage-hero{ position:relative; overflow:hidden; background:var(--ttm-soft); padding:175px 0 90px; text-align:center; border-bottom:1px solid var(--ttm-line); }
.ttm-svcpage-hero .ttm-shape{ position:absolute; pointer-events:none; }
.ttm-svcpage-hero .ttm-shape-1{ top:80px; left:-40px; color:var(--ttm-accent); opacity:.16; }
.ttm-svcpage-hero .ttm-shape-2{ bottom:-40px; right:-30px; color:#111013; opacity:.05; }
.ttm-svcpage-bc{ font-size:14px; color:var(--ttm-muted); margin-bottom:18px; }
.ttm-svcpage-bc a{ color:var(--ttm-muted); text-decoration:none; }
.ttm-svcpage-bc a:hover{ color:var(--ttm-accent); }
.ttm-svcpage-bc span+span::before{ content:"/"; margin:0 9px; color:#c2c6bb; }
.ttm-svcpage-hero .ttm-eyebrow{ justify-content:center; }
.ttm-svcpage-hero h1{ font-size:clamp(36px,5.5vw,60px); line-height:1.05; font-weight:700; color:var(--ttm-ink); margin:16px auto 18px; letter-spacing:-1px; max-width:900px; }
.ttm-svcpage-hero p{ font-size:19px; line-height:1.6; color:var(--ttm-muted); max-width:720px; margin:0 auto 32px; }
.ttm-svcpage-hero .ttm-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* grid */
.ttm-svcpage-grid-wrap{ background:#fff; padding:90px 0; }
.ttm-svcpage-head{ text-align:center; max-width:640px; margin:0 auto 50px; }
.ttm-svcpage-head .ttm-eyebrow{ justify-content:center; }
.ttm-svcpage-head h2{ font-size:clamp(28px,3.8vw,40px); font-weight:700; color:var(--ttm-ink); margin:14px 0 0; letter-spacing:-.5px; }
.ttm-svcpage-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ttm-svcpage-card{ display:block; text-decoration:none; border:1px solid var(--ttm-line); border-radius:20px; padding:34px 30px; background:#fff; transition:.25s ease; }
.ttm-svcpage-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -36px rgba(17,16,19,.3); border-color:transparent; }
.ttm-svcpage-ico{ width:58px; height:58px; border-radius:15px; background:var(--ttm-soft); display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition:.25s ease; }
.ttm-svcpage-ico svg{ width:28px; height:28px; color:var(--ttm-accent); }
.ttm-svcpage-card:hover .ttm-svcpage-ico{ background:var(--ttm-accent); }
.ttm-svcpage-card:hover .ttm-svcpage-ico svg{ color:#0a1f0d; }
.ttm-svcpage-card h3{ font-size:20px; font-weight:700; color:var(--ttm-ink); margin:0 0 10px; }
.ttm-svcpage-card p{ font-size:14.5px; line-height:1.65; color:var(--ttm-muted); margin:0 0 20px; }
.ttm-svcpage-more{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--ttm-ink); }
.ttm-svcpage-more svg{ width:14px; height:14px; color:var(--ttm-accent); transition:.2s ease; }
.ttm-svcpage-card:hover .ttm-svcpage-more svg{ transform:translateX(4px); }

/* different CTA - split (dark + green), boxed as the block before the footer */
.ttm-svcpage-cta{ position:relative; overflow:hidden; background:#111013; border-radius:30px; margin:30px 20px; }
.ttm-svcpage-cta .cta-grid{ display:grid; grid-template-columns:1.3fr 1fr; }
.ttm-svcpage-cta .cta-left{ padding:64px 56px; }
.ttm-svcpage-cta .cta-left .ttm-eyebrow{ color:#fff; }
.ttm-svcpage-cta .cta-left h2{ font-size:clamp(28px,3.6vw,40px); font-weight:700; color:#fff; margin:16px 0 16px; letter-spacing:-.5px; }
.ttm-svcpage-cta .cta-left p{ font-size:17px; line-height:1.6; color:#c4c8be; margin:0 0 28px; }
.ttm-svcpage-cta .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.ttm-svcpage-cta .cta-right{ background:var(--ttm-accent); padding:60px 48px; display:flex; flex-direction:column; justify-content:center; gap:22px; }
.ttm-svcpage-cta .cta-right .lbl{ font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#0a1f0d; opacity:.65; }
.ttm-svcpage-cta .cta-right a{ display:flex; align-items:center; gap:13px; color:#0a1f0d; text-decoration:none; font-weight:700; font-size:19px; line-height:1.2; }
.ttm-svcpage-cta .cta-right a svg{ width:22px; height:22px; flex:0 0 auto; }
.ttm-svcpage-cta .cta-right a:hover{ opacity:.75; }

@media (max-width:991px){
  .ttm-svcpage-grid{ grid-template-columns:1fr 1fr; }
  .ttm-svcpage-cta .cta-grid{ grid-template-columns:1fr; }
}
@media (max-width:575px){
  .ttm-svcpage-grid{ grid-template-columns:1fr; }
  .ttm-svcpage-cta{ margin:20px 12px; border-radius:18px; }
  .ttm-svcpage-cta .cta-left, .ttm-svcpage-cta .cta-right{ padding:40px 28px; }
}