/* ============================================================
   Tanzania Tech Media - Brands (Portfolio) archive + detail
   Loads alongside service-detail.css (shared .ttm-btn, .ttm-eyebrow,
   .ttm-container, .ttm-content, .ttm-svc-cta primitives).
   ============================================================ */
.ttm-brand{ --ttm-ink:#111013; --ttm-muted:#5b605b; --ttm-line:#e7e9e2; --ttm-soft:#f6f8ef; }
:root{ --ttm-accent: var(--tp-theme-primary, #13DB31); }

/* ---------- Archive hero ---------- */
.ttm-brand-hero{ position:relative; overflow:hidden; background:var(--ttm-soft); padding:170px 0 80px; border-bottom:1px solid var(--ttm-line); }
.ttm-brand-hero .ttm-shape{ position:absolute; pointer-events:none; }
.ttm-brand-hero .ttm-shape-1{ top:90px; right:-30px; color:var(--ttm-accent); opacity:.16; }
.ttm-brand-hero .ttm-shape-2{ bottom:-40px; left:-30px; color:#111013; opacity:.05; }
.ttm-brand-hero-inner{ position:relative; z-index:2; max-width:760px; }
.ttm-brand-hero h1{ font-size:clamp(34px,5vw,56px); line-height:1.05; font-weight:700; color:var(--ttm-ink); margin:16px 0 18px; letter-spacing:-1px; }
.ttm-brand-hero p{ font-size:19px; line-height:1.6; color:var(--ttm-muted); margin:0; }

/* ---------- Flagship feature ---------- */
.ttm-flagship-wrap{ background:#fff; padding:70px 0 30px; }
.ttm-flagship{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; gap:0;
   border:1px solid var(--ttm-line); border-radius:24px; background:#fff; box-shadow:0 40px 80px -50px rgba(17,16,19,.4); }
.ttm-flagship-media{ position:relative; background:#0e1411; display:flex; flex-direction:column; justify-content:center; padding:50px; overflow:hidden; }
.ttm-flagship-media .ttm-shape{ position:absolute; right:-40px; bottom:-40px; color:var(--ttm-accent); opacity:.18; }
.ttm-flag-logo{ background:#fff; border-radius:16px; padding:26px 30px; display:inline-flex; align-self:flex-start; max-width:330px; box-shadow:0 20px 40px -24px rgba(0,0,0,.5); position:relative; }
.ttm-flag-logo img{ width:100%; height:auto; display:block; }
.ttm-flagship-body{ padding:50px; display:flex; flex-direction:column; justify-content:center; }
.ttm-flag-badge{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:color-mix(in srgb, var(--ttm-accent) 14%, transparent);
   color:#0a1f0d; font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:7px 14px; border-radius:50px; margin-bottom:18px; }
.ttm-flag-badge svg{ width:14px; height:14px; }
.ttm-flagship-body h2{ font-size:34px; font-weight:700; color:var(--ttm-ink); margin:0 0 8px; letter-spacing:-.5px; }
.ttm-flag-cat{ font-size:14px; font-weight:600; color:var(--ttm-accent); margin-bottom:16px; }
.ttm-flagship-body p{ font-size:16.5px; line-height:1.7; color:var(--ttm-muted); margin:0 0 26px; }
.ttm-flag-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Brand grid ---------- */
.ttm-brands-grid-wrap{ background:#fff; padding:50px 0 100px; }
.ttm-brands-head{ margin-bottom:40px; }
.ttm-brands-head h2{ font-size:clamp(26px,3.6vw,36px); font-weight:700; color:var(--ttm-ink); margin:12px 0 0; letter-spacing:-.5px; }
.ttm-brand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ttm-brand-card{ display:flex; flex-direction:column; border:1px solid var(--ttm-line); border-radius:20px; background:#fff; overflow:hidden; transition:.25s ease; }
.ttm-brand-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -36px rgba(17,16,19,.34); border-color:transparent; }
.ttm-brand-logo{ height:120px; display:flex; align-items:center; justify-content:center; padding:26px 30px; background:var(--ttm-soft); border-bottom:1px solid var(--ttm-line); }
.ttm-brand-logo img{ max-height:60px; max-width:80%; width:auto; height:auto; }
.ttm-brand-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.ttm-brand-cat{ font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ttm-accent); margin-bottom:8px; }
.ttm-brand-card h3{ font-size:21px; font-weight:700; color:var(--ttm-ink); margin:0 0 10px; }
.ttm-brand-card p{ font-size:14.5px; line-height:1.65; color:var(--ttm-muted); margin:0 0 20px; flex:1; }
.ttm-brand-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:18px; border-top:1px solid var(--ttm-line); }
.ttm-brand-link{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; color:var(--ttm-ink); text-decoration:none; }
.ttm-brand-link svg{ width:14px; height:14px; color:var(--ttm-accent); transition:.2s ease; }
.ttm-brand-card:hover .ttm-brand-link svg{ transform:translateX(4px); }
.ttm-brand-visit{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ttm-muted); text-decoration:none; }
.ttm-brand-visit:hover{ color:var(--ttm-accent); }
.ttm-brand-visit svg{ width:13px; height:13px; }

/* ---------- Archive: logo-focused grid ---------- */
.ttm-logos-wrap{ background:#fff; padding:60px 0 100px; }
.ttm-logos-head{ margin-bottom:38px; }
.ttm-logos-head h2{ font-size:clamp(24px,3.4vw,34px); font-weight:700; color:var(--ttm-ink); margin:10px 0 0; letter-spacing:-.5px; }
.ttm-logo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ttm-logo-tile{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
   border:1px solid var(--ttm-line); border-radius:18px; background:#fff; padding:38px 24px 26px; text-decoration:none; transition:.25s ease; }
.ttm-logo-tile:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -38px rgba(17,16,19,.32); border-color:transparent; }
.ttm-logo-canvas{ width:100%; height:96px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.ttm-logo-canvas img{ max-height:76px; max-width:175px; width:auto; height:auto; object-fit:contain; }
.ttm-logo-tile h3{ font-size:18px; font-weight:700; color:var(--ttm-ink); margin:0 0 4px; }
.ttm-logo-tile .ttm-logo-cat{ font-size:13px; color:var(--ttm-muted); }
.ttm-logo-flag{ position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:5px;
   background:color-mix(in srgb, var(--ttm-accent) 16%, transparent); color:#0a1f0d; font-size:11px; font-weight:700;
   letter-spacing:.5px; text-transform:uppercase; padding:5px 10px; border-radius:50px; }
.ttm-logo-flag svg{ width:11px; height:11px; }
@media (max-width:991px){ .ttm-logo-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ttm-logo-grid{ grid-template-columns:1fr; } }

/* ---------- Detail hero ---------- */
.ttm-bd-hero{ position:relative; overflow:hidden; background:var(--ttm-soft); padding:160px 0 70px; border-bottom:1px solid var(--ttm-line); }
.ttm-bd-hero .ttm-shape{ position:absolute; top:70px; right:-30px; color:var(--ttm-accent); opacity:.14; pointer-events:none; }
.ttm-bd-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 360px; gap:46px; align-items:center; }
.ttm-bd-logo{ display:flex; align-items:center; justify-content:center; }
.ttm-bd-logo img{ max-width:100%; max-height:160px; width:auto; height:auto; object-fit:contain; }
.ttm-bd-flag{ display:inline-flex; align-items:center; gap:7px; background:color-mix(in srgb, var(--ttm-accent) 14%, transparent); color:#0a1f0d;
   font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:7px 14px; border-radius:50px; margin-bottom:16px; }
.ttm-bd-flag svg{ width:14px; height:14px; }
.ttm-bd-cat{ font-size:14px; font-weight:600; color:var(--ttm-accent); margin-bottom:10px; }
.ttm-bd-hero h1{ font-size:clamp(32px,4.6vw,50px); line-height:1.05; font-weight:700; color:var(--ttm-ink); margin:0 0 16px; letter-spacing:-.5px; }
.ttm-bd-hero .ttm-bd-lead{ font-size:18px; line-height:1.6; color:var(--ttm-muted); max-width:620px; margin:0 0 28px; }
.ttm-bd-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Detail info strip ---------- */
.ttm-bd-stats{ background:#fff; border-bottom:1px solid var(--ttm-line); }
.ttm-bd-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.ttm-bd-stat{ padding:30px 24px; display:flex; gap:14px; align-items:center; border-right:1px solid var(--ttm-line); }
.ttm-bd-stat:last-child{ border-right:0; }
.ttm-bd-stat .ttm-bd-ico{ width:44px; height:44px; border-radius:11px; background:var(--ttm-soft); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ttm-bd-stat .ttm-bd-ico svg{ width:22px; height:22px; color:var(--ttm-accent); }
.ttm-bd-stat .ttm-bd-k{ font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--ttm-muted); }
.ttm-bd-stat .ttm-bd-v{ font-size:16px; font-weight:700; color:var(--ttm-ink); }

/* ---------- Detail main ---------- */
.ttm-bd-main{ background:#fff; padding:70px 0 100px; }
.ttm-bd-maingrid{ display:grid; grid-template-columns:1fr 360px; gap:50px; align-items:start; }

.ttm-access{ margin-top:34px; border:1px solid var(--ttm-line); border-left:4px solid var(--ttm-accent); border-radius:14px; background:var(--ttm-soft); padding:24px 26px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.ttm-access .ttm-access-ico{ width:46px; height:46px; border-radius:12px; background:#fff; border:1px solid var(--ttm-line); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ttm-access .ttm-access-ico svg{ width:24px; height:24px; color:var(--ttm-accent); }
.ttm-access-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ttm-access-text{ flex:1; min-width:200px; }

/* "How to access" block - clean, no surrounding box, centered */
.ttm-getit{ margin-top:40px; padding-top:30px; border-top:1px solid var(--ttm-line); text-align:center; }
.ttm-getit-title{ font-size:19px; font-weight:700; color:var(--ttm-ink); margin:0 0 18px; }

/* store badges - always side by side, equal width, brand-green pill, centered */
.ttm-store-badges{ display:flex; gap:12px; flex-wrap:nowrap; align-items:stretch; justify-content:center; max-width:430px; margin:0 auto; }
.ttm-badge-link{ flex:1 1 0; min-width:0; max-width:200px; display:flex; align-items:center; justify-content:center;
   background:var(--ttm-accent); border-radius:12px; box-sizing:border-box; padding:10px 16px; transition:transform .2s ease, opacity .2s ease; }
.ttm-badge-link:hover{ transform:translateY(-2px); opacity:.92; }
.ttm-badge-link img{ display:block; }
.ttm-badge-google img{ width:100%; height:auto; }
.ttm-badge-apple img{ width:100%; height:auto; }
.ttm-access-text strong{ display:block; color:var(--ttm-ink); font-size:16px; margin-bottom:3px; }
.ttm-access-text span{ font-size:14.5px; color:var(--ttm-muted); }

/* sidebar reuse */
.ttm-side{ position:sticky; top:100px; display:flex; flex-direction:column; gap:26px; }
.ttm-card{ border:1px solid var(--ttm-line); border-radius:18px; padding:26px; background:#fff; }
.ttm-card-title{ font-size:18px; font-weight:700; color:var(--ttm-ink); margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--ttm-line); }
.ttm-glance{ list-style:none; margin:0; padding:0; }
.ttm-glance li{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--ttm-line); font-size:14.5px; }
.ttm-glance li:last-child{ border-bottom:0; }
.ttm-glance .k{ color:var(--ttm-muted); }
.ttm-glance .v{ color:var(--ttm-ink); font-weight:600; text-align:right; }
.ttm-glance .v a{ color:var(--ttm-accent); text-decoration:none; }
.ttm-glance-brand{ display:none; }

.ttm-other-list{ list-style:none; margin:0; padding:0; }
.ttm-other-list li{ margin-bottom:10px; }
.ttm-other-list a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; text-decoration:none; background:var(--ttm-soft); transition:.2s ease; }
.ttm-other-list a:hover{ background:#fff; box-shadow:0 10px 24px -16px rgba(17,16,19,.4); }
.ttm-other-logo{ width:46px; height:40px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ttm-other-logo img{ max-width:46px; max-height:38px; width:auto; height:auto; object-fit:contain; }
.ttm-other-name{ font-weight:600; font-size:14.5px; color:var(--ttm-ink); }
.ttm-other-cat{ font-size:12px; color:var(--ttm-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
   .ttm-flagship{ grid-template-columns:1fr; }
   .ttm-flagship-media{ padding:40px; }
   .ttm-brand-grid{ grid-template-columns:1fr 1fr; }
   .ttm-bd-maingrid{ grid-template-columns:1fr; }
   .ttm-bd-hero{ padding:130px 0 50px; }
   .ttm-bd-grid{ grid-template-columns:1fr; }
   .ttm-bd-logo{ display:none; }
   .ttm-glance-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--ttm-line); }
   .ttm-glance-brand img{ width:48px; height:48px; object-fit:contain; border-radius:12px; flex:0 0 auto; }
   .ttm-glance-brand span{ font-size:18px; font-weight:700; color:var(--ttm-ink); }
   .ttm-side{ position:static; }
   .ttm-bd-stats-grid{ grid-template-columns:1fr 1fr; }
   .ttm-bd-stat:nth-child(2){ border-right:0; }
   .ttm-bd-stat{ border-bottom:1px solid var(--ttm-line); }
}
@media (max-width: 575px){
   .ttm-brand-grid, .ttm-bd-stats-grid{ grid-template-columns:1fr; }
   .ttm-bd-stat{ border-right:0; }
   .ttm-flagship-body, .ttm-flagship-media{ padding:30px; }
   .ttm-bd-logo img{ max-height:60px; }
}

/* ===== Brand detail: social links ===== */
.ttm-brand-social-wrap{ margin-top:28px; text-align:center; }
.ttm-brand-social-label{ display:block; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ttm-muted); margin-bottom:12px; }
.ttm-brand-social{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ttm-content a.ttm-brand-social-link{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--ttm-line); color:var(--ttm-ink); font-size:18px; text-decoration:none; transition:.22s ease; }
.ttm-content a.ttm-brand-social-link:hover{ background:var(--ttm-accent); border-color:var(--ttm-accent); color:#fff; text-decoration:none; transform:translateY(-2px); }

/* ===== Network landing (Brands archive) ===== */
.ttm-net-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

.ttm-net-stats{ background:#111013; }
.ttm-net-stats .ttm-container{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-top:56px; padding-bottom:56px; }
.ttm-net-stat{ text-align:center; }
.ttm-net-stat .num{ font-size:clamp(30px,4vw,48px); font-weight:800; color:#fff; letter-spacing:-1px; line-height:1; }
.ttm-net-stat .num span{ color:var(--ttm-accent); }
.ttm-net-stat .lbl{ margin-top:12px; font-size:14px; color:#b9beb2; font-weight:500; }

.ttm-net-section{ background:#fff; padding:90px 0; }
.ttm-net-section.alt{ background:var(--ttm-soft); border-top:1px solid var(--ttm-line); border-bottom:1px solid var(--ttm-line); }
.ttm-net-head{ text-align:center; max-width:680px; margin:0 auto 50px; }
.ttm-net-head .ttm-eyebrow{ justify-content:center; }
.ttm-net-head h2{ font-size:clamp(28px,3.8vw,42px); font-weight:700; color:var(--ttm-ink); margin:14px 0 14px; letter-spacing:-.5px; }
.ttm-net-head p{ font-size:17px; line-height:1.7; color:var(--ttm-muted); margin:0; }

@media (max-width:767px){
   .ttm-net-stats .ttm-container{ grid-template-columns:1fr 1fr; gap:28px; padding-top:44px; padding-bottom:44px; }
   .ttm-net-section{ padding:64px 0; }
}

/* ===== Network landing: worked-with logo marquee ===== */
.ttm-net-logos{ background:#fff; padding:0; }
.ttm-net-logos-label{ text-align:center; font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ttm-muted); margin:0 0 34px; }

/* anchor offset so #network-brands clears the fixed header (fallback path) */
#network-brands{ scroll-margin-top:100px; }