/* Zimbabwe additions on top of home.css: clickable service areas, the
   Harare suburb map, payment strip, breadcrumbs and location-page bits. */

/* ── Service-area chips ── */
.area-groups { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; grid-template-columns: 1fr; }
@media (min-width: 640px) { .area-groups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .area-groups { grid-template-columns: repeat(3, 1fr); } }
.area-groups > div { background: #fff; padding: 20px 20px 18px; }
.area-groups h3 { font-size: 1.05rem; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.area-layout .area-groups { grid-template-columns: 1fr; }
@media (min-width: 560px) { .area-layout .area-groups { grid-template-columns: 1fr 1fr; } }
.chips a { white-space: nowrap; display: inline-block; padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: 14px; line-height: 1.2; text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s, color .15s; }
.chips a:hover, .chips a:focus-visible { border-color: var(--accent); background: #fff4ec; color: var(--accent-ink); }
.chips a.is-key { border-color: var(--ink); font-weight: 600; }
.chips a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.area-sub { margin: 40px 0 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.area-sub h3 { font-size: 1.3rem; }

/* ── Harare map: suburbs plotted from their coordinates ── */
.area-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .area-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.hmap { position: relative; background: var(--night); border-radius: 12px; overflow: hidden; }
.hmap svg { display: block; width: 100%; height: auto; }
.hmap .ring { fill: none; stroke: #2c2822; stroke-width: 1; stroke-dasharray: 3 5; }
.hmap .road { fill: none; stroke: #3a352d; stroke-width: 1.4; }
.hmap .cbd-label { font: 600 10px var(--mono); fill: #8a8378; letter-spacing: .08em; }
.hmap a { cursor: pointer; }
.hmap a text { font: 500 13px var(--sans); fill: #d8d2c7; paint-order: stroke; stroke: var(--night); stroke-width: 3px; transition: fill .15s; }
.hmap a circle { fill: var(--paper); transition: r .15s, fill .15s; }
.hmap a.t1 circle { fill: var(--accent); }
.hmap a:hover text, .hmap a:focus text { fill: #fff; }
.hmap a:hover circle, .hmap a:focus circle { fill: #fff; r: 7; }
.hmap a:focus { outline: none; }
.hmap a:focus-visible circle { stroke: #fff; stroke-width: 2; }
.hmap a[aria-current="page"] circle { fill: #fff; r: 8; }
.hmap .legend { position: absolute; left: 14px; bottom: 12px; font: 11px var(--mono); color: #8a8378; display: flex; gap: 14px; }
.hmap .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* ── Payment strip ── */
.pay-strip { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 14px; }
.pay-strip strong { margin-right: 6px; }
.pay-strip span { border: 1px solid var(--rule); background: #fff; border-radius: 6px; padding: 6px 12px; font-weight: 600; }

/* ── Breadcrumbs ── */
.crumbs { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 18px; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { margin: 0 8px; }

/* ── Location pages ── */
.loc-hero { background: var(--night); color: var(--paper); padding: 64px 0 56px; border-bottom: 0; }
.loc-hero .label { color: rgba(255,255,255,.65); }
.loc-hero h1 { margin-bottom: 18px; }
.loc-hero .lede { color: rgba(255,255,255,.8); }
.loc-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.loc-hero .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.loc-hero .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.loc-hero .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; }
.loc-body h2 { margin-bottom: 16px; }
.loc-body h3 { margin: 28px 0 8px; }
.loc-body ul { padding-left: 20px; }
.loc-body li { margin-bottom: 6px; }
.loc-facts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin: 28px 0; grid-template-columns: 1fr; }
@media (min-width: 640px) { .loc-facts { grid-template-columns: 1fr 1fr; } }
.loc-facts > div { background: #fff; padding: 18px 20px; }
.loc-facts dt { font: 12px var(--mono); color: var(--muted); margin-bottom: 4px; }
.loc-facts dd { margin: 0; font-size: 15px; }

/* ── Payment return page ── */
.pay-status { text-align: center; padding: 40px 0; }
.pay-status .big { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3rem); margin: 10px 0 14px; }
/* Axious Zimbabwe theme: "Click on Harare".
   Built around the logo (white cursor, orange circle, orange glow on black):
   a floating capsule header, an inset dark hero with the live Harare map,
   a moving strip of every area, bento service cards and a giant wordmark.
   Loaded after home.css and zw.css. */
:root {
  --paper: #f7f7f5; --paper-2: #efede9; --ink: #141414; --muted: #5d6066; --rule: #e6e4df;
  --accent: #ff6a00; --accent-ink: #c2410c; --tint: #fff1e6; --night: #0c0c0b; --night-2: #161513;
  --serif: 'Poppins', 'Inter', system-ui, sans-serif; --r: 999px; --wide: 1180px;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; }
h3 { font-weight: 600; }
.label { font: 600 12px var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
section { border-bottom: 0; }
#services, #faq, #reviews { background: #fff; }
.btn { border-radius: var(--r); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn-wa:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── floating capsule header ── */
.site-head { position: sticky; top: 12px; z-index: 30; background: none; border: 0; color: var(--ink); padding: 12px 12px 0; }
.site-head .wrap.head-pill { height: auto; min-height: 62px; padding: 8px 8px 8px 12px; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border: 1px solid var(--rule); border-radius: 999px; box-shadow: 0 14px 40px -24px rgba(0,0,0,.45); }
.site-head a:hover { color: var(--accent-ink); }
.site-head .nav-toggle { color: var(--ink); border-color: var(--rule); border-radius: 999px; padding: 8px 16px; }
.nav { gap: 2px; }
.site-head .nav a:not(.btn) { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; color: #3a3d42; }
.site-head .nav a:not(.btn)::after { display: none; }
.site-head .nav a:not(.btn):hover, .site-head .nav a[aria-current="page"] { background: var(--tint); color: var(--accent-ink); transform: none; }
.site-head .nav .btn { margin-left: 6px; background: var(--ink); border-color: var(--ink); color: #fff; }
.site-head .nav .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 760px) {
  .site-head .nav { top: calc(100% + 8px); left: 12px; right: 12px; background: #fff; border: 1px solid var(--rule); border-radius: 22px; padding: 10px 14px 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.35); }
  .site-head .nav a:not(.btn) { padding: 12px 10px; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .site-head .nav a:not(.btn):hover { transform: none; }
  .site-head .nav .btn { margin: 14px 0 0; }
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,106,0,.12), 0 8px 20px -6px rgba(255,106,0,.8); }
.brand span { display: flex; flex-direction: column; line-height: 1; }
.brand b { font: 700 21px var(--serif); letter-spacing: -0.03em; }
.brand small { font: 600 9px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.brand:hover { color: var(--ink); }
.brand-dark, .brand-dark:hover { color: #fff; }
.brand-dark small { color: rgba(255,255,255,.55); }

/* ── inset dark hero with the live map ── */
.hero2 { position: relative; margin: 12px; border-radius: 28px; background: var(--night); color: #fff; overflow: hidden; padding: 64px 0 56px; }
.hero2::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 90%); mask-image: linear-gradient(180deg, #000 20%, transparent 90%); pointer-events: none; }
.hero2-glow { position: absolute; width: 760px; height: 760px; right: -220px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,150,30,.55) 0%, rgba(255,106,0,.2) 38%, transparent 68%); pointer-events: none; }
.hero2-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hero2-in > * { min-width: 0; }
@media (min-width: 980px) { .hero2-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; } .hero2 { padding: 80px 0 72px; } }
.pill-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font: 500 13px var(--sans); color: rgba(255,255,255,.85); }
.pill-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,106,0,.7); animation: ping 2.2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,106,0,.7); } 70% { box-shadow: 0 0 0 10px rgba(255,106,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,0,0); } }
.hero2 h1 { margin: 22px 0 18px; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.04; color: #fff; }
.hl { color: var(--accent); }
.hero2 .lede { color: rgba(255,255,255,.72); font-size: 18px; }
.hero2 .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; }
.hero2 .btn { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 12px 30px -10px rgba(255,106,0,.75); }
.hero2 .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hero2 .btn-glass { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); box-shadow: none; }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: rgba(255,255,255,.6); }
.trust li::before { content: "✓"; color: var(--accent); margin-right: 7px; font-weight: 700; }
.hero2-map { background: var(--night-2); border: 1px solid #2a2825; border-radius: 22px; padding: 12px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,106,0,.06); }
.map-search { display: flex; align-items: center; gap: 10px; background: var(--night); border: 1px solid #2c2a27; border-radius: 999px; padding: 6px 6px 6px 16px; }
.map-search:focus-within { border-color: var(--accent); }
.map-search svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: #8a8378; stroke-width: 2; stroke-linecap: round; }
.map-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: 15px var(--sans); padding: 8px 0; }
.map-search input::placeholder { color: #7d776d; }
.hero2 .map-search .btn { padding: 10px 20px; box-shadow: none; }
.hero2-map .hmap { background: none; margin-top: 8px !important; }
.hmap a.t1 circle { filter: drop-shadow(0 0 5px rgba(255,106,0,.9)); }
.hmap.searching a { opacity: .22; transition: opacity .2s; }
.hmap.searching a.hit { opacity: 1; }
.hmap a.hit circle { fill: #fff; r: 8; }
.hmap a.hit text { fill: #fff; font-weight: 700; }
.map-hint { margin: 4px 0 2px; text-align: center; font-size: 12px; color: #8a8378; }

/* ── moving strip of areas ── */
.strip { margin: 0 12px; background: var(--accent); border-radius: 999px; overflow: hidden; padding: 13px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.strip-track { display: flex; width: max-content; animation: strip 90s linear infinite; }
.strip:hover .strip-track, .strip:focus-within .strip-track { animation-play-state: paused; }
.strip ul { display: flex; list-style: none; margin: 0; padding: 0; }
.strip li { display: flex; align-items: center; }
.strip li::after { content: "✦"; color: rgba(255,255,255,.55); font-size: 11px; }
.strip a { padding: 0 20px; font: 600 14px var(--serif); color: #fff; text-decoration: none; white-space: nowrap; }
.strip a:hover { color: var(--night); }
@keyframes strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .strip-track { animation: none; }
  .strip ul[aria-hidden] { display: none; }
  .pill-kicker i { animation: none; }
}

/* ── bento services ── */
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } .bx-web, .bx-pay { grid-column: span 2; } }
@media (min-width: 960px) { .bento { grid-template-columns: repeat(4, 1fr); } .bx-web { grid-column: span 2; grid-row: span 2; } .bx-pay { grid-column: span 2; } }
.bx { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: 22px; padding: 24px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.bx:hover { transform: translateY(-4px); border-color: #ffc9a3; box-shadow: 0 24px 44px -30px rgba(0,0,0,.4); }
.bx h3 { font-size: 1.1rem; }
.bx p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.svc-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--tint); display: grid; place-items: center; margin-bottom: 6px; flex: 0 0 auto; }
.svc-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-price { font: 600 14px var(--sans); color: var(--accent-ink); margin-top: auto; }
.bx-text { display: flex; flex-direction: column; gap: 8px; }

.bx-web { background: var(--night); border-color: var(--night); color: #fff; gap: 22px; }
.bx-web::before { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,0,.45), transparent 65%); }
.bx-web h3 { font-size: 1.5rem; }
.bx-web p { color: rgba(255,255,255,.7); max-width: 30em; }
.bx-web .svc-ic { background: rgba(255,106,0,.16); }
.bx-web .svc-price { color: #ffb27a; }
.mock-dev { position: relative; height: 250px; margin-top: auto; }
.m-browser { position: absolute; left: 0; right: 64px; top: 0; bottom: 14px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.m-bar { height: 28px; background: #efede9; display: flex; align-items: center; gap: 5px; padding: 0 12px; }
.m-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d6d1c8; }
.m-bar span { margin-left: 10px; font: 10px var(--sans); color: var(--muted); background: #fff; border-radius: 999px; padding: 2px 12px; }
.m-page { padding: 16px; }
.m-page b, .m-page s, .m-page u, .m-page em { display: block; border-radius: 6px; text-decoration: none; }
.m-page b { height: 10px; width: 38%; background: var(--accent); }
.m-page s { height: 8px; background: #e9e6e0; margin-top: 9px; }
.m-page s.short { width: 62%; }
.m-page u { height: 26px; width: 110px; background: var(--ink); margin-top: 14px; border-radius: 999px; }
.m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.m-cards em { height: 52px; background: #f5f3ef; border: 1px solid #ebe8e2; }
.m-phone { position: absolute; right: 0; bottom: 0; width: 112px; height: 220px; background: #fff; border: 5px solid #262422; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 50px -20px rgba(0,0,0,.9); }
.m-phone .m-page { padding: 12px 10px; }
.m-phone .m-page b { width: 60%; }
.m-phone .m-page u { width: 70px; height: 20px; }
.m-phone .m-page em { height: 60px; background: var(--tint); margin-top: 12px; }

.bx-pay { display: grid; gap: 18px; }
@media (min-width: 560px) { .bx-pay { grid-template-columns: 1fr 1fr; align-items: center; } }
.mock-pay { background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 16px; box-shadow: 0 18px 40px -30px rgba(0,0,0,.5); }
.m-methods { display: flex; flex-wrap: wrap; gap: 6px; }
.m-methods span { font: 600 12px var(--sans); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); }
.m-methods span:first-child { border-color: var(--accent); background: var(--tint); color: var(--accent-ink); }
.m-paybtn { margin-top: 12px; background: var(--accent); color: #fff; text-align: center; border-radius: 999px; padding: 10px; font: 600 14px var(--sans); }
.mock-pay small { display: block; text-align: center; color: var(--muted); font-size: 11px; margin-top: 8px; }

.mock-serp { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 10px; margin: 6px 0 4px; }
.m-q { font-size: 13px; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; color: var(--ink); }
.m-res { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 4px 4px 2px; }
.m-res .pin { flex: 0 0 18px; width: 18px; height: 18px; background: var(--accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 4px 10px -2px rgba(255,106,0,.7); }
.m-res b { font-size: 14px; display: block; }
.m-res small { font-size: 12px; color: var(--muted); }
.m-res i { color: #f5a623; font-style: normal; letter-spacing: 1px; }
.mock-chat { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.mock-chat p { margin: 0; font-size: 13px; padding: 8px 12px; border-radius: 14px; max-width: 88%; color: var(--ink); }
.mock-chat .in { background: #fff; border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.mock-chat .out { background: #dcf8c6; margin-left: auto; border-bottom-right-radius: 4px; }
.bx-sm p { font-size: 14px; }

/* ── other sections ── */
.tier { border-radius: 22px; }
.tier-pick { box-shadow: 0 34px 70px -34px rgba(255,106,0,.65), 0 0 0 1px rgba(255,106,0,.35); }
.area-groups, .loc-facts { border-radius: 18px; }
.area-layout.no-map { grid-template-columns: 1fr; }
@media (min-width: 960px) { .area-layout.no-map .area-groups { grid-template-columns: repeat(3, 1fr); } }
.chips a { background: #fff; }
.chips a.is-key { border-color: #ffc9a3; background: var(--tint); color: var(--accent-ink); }
.hmap { border-radius: 20px; }
.loc-hero { margin: 12px; border-radius: 28px; position: relative; overflow: hidden; }
.loc-hero::after { content: ""; position: absolute; width: 620px; height: 620px; right: -240px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,150,30,.45) 0%, rgba(255,106,0,.15) 40%, transparent 68%); pointer-events: none; }
.loc-hero > .wrap { position: relative; z-index: 1; }
.loc-hero .label { color: #ffb27a; }
.loc-hero .btn { box-shadow: 0 12px 30px -10px rgba(255,106,0,.75); }

/* ── dark footer: CTA line + giant wordmark ── */
.site-foot { background: var(--night); color: rgba(255,255,255,.62); padding-top: 56px; padding-bottom: 96px; margin: 12px; border-radius: 28px; overflow: hidden; }
.site-foot h4 { color: #fff; font-family: var(--serif); }
.site-foot a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-foot a:hover { color: #ffb27a; }
.site-foot .legal { border-top-color: rgba(255,255,255,.12); }
.foot-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-cta .label { color: #ffb27a; margin-bottom: 8px; }
.foot-cta h2 { color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.foot-cta p { margin: 6px 0 0; }
.foot-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-cta .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.foot-cta .btn-wa { background: var(--wa); border-color: var(--wa); }
.foot-brand p { margin: 14px 0 0; font-size: 14px; max-width: 30em; }
.site-foot .cols { grid-template-columns: 1fr 1fr; }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .site-foot .cols { grid-template-columns: 1.5fr repeat(4, 1fr); } .foot-brand { grid-column: auto; } }

/* ── UX fixes: anchors clear the floating header, consistent card sections ── */
section, [id] { scroll-margin-top: 104px; }
section { padding: 64px 0; }
@media (min-width: 760px) { section { padding: 88px 0; } }
.work-head { margin-bottom: 28px; }

/* work: screenshot cards */
.work-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.wk { position: relative; display: block; background: #fff; border: 1px solid var(--rule); border-radius: 20px; padding: 10px; text-decoration: none; color: var(--ink); transition: transform .25s, box-shadow .25s, border-color .25s; }
.wk:hover { transform: translateY(-4px); border-color: #ffc9a3; box-shadow: 0 24px 44px -30px rgba(0,0,0,.45); color: var(--ink); }
.wk-shot { display: block; border-radius: 12px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); }
.wk-bar { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; background: #efede9; }
.wk-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d6d1c8; }
.wk-bar em { margin-left: 8px; font: normal 10px var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .6s; }
.wk:hover .wk-shot img { transform: scale(1.03); }
.wk-meta { display: flex; flex-direction: column; padding: 12px 6px 4px; }
.wk-meta b { font: 600 16px var(--serif); }
.wk-meta small { font-size: 13px; color: var(--muted); }
.wk-go { position: absolute; right: 16px; bottom: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--muted); transition: background .2s, color .2s; }
.wk:hover .wk-go { background: var(--accent); color: #fff; }
.work-more { margin: 22px 0 0; font-size: 14px; color: var(--muted); }

/* process: three step cards */
.steps-row { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 820px) { .steps-row { grid-template-columns: repeat(3, 1fr); } }
.steps-row li { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 20px; padding: 24px; }
.steps-row li::before { display: none; }
.step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night); color: #fff; font: 700 16px var(--serif); margin-bottom: 16px; box-shadow: 0 0 0 5px var(--tint); }
.step-when { position: absolute; top: 28px; right: 24px; font: 600 12px var(--sans); color: var(--accent-ink); background: var(--tint); padding: 4px 10px; border-radius: 999px; }
.steps-row h3 { font-size: 1.15rem; margin-bottom: 6px; }
.steps-row p { margin: 0; color: var(--muted); font-size: 15px; }

/* reviews: cards */
.rev-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .rev-grid { grid-template-columns: repeat(3, 1fr); } }
.rev { margin: 0; display: flex; flex-direction: column; gap: 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding: 24px; }
.rev blockquote { margin: 0; padding: 0; border: 0; font: 500 16px/1.6 var(--sans); color: var(--ink); flex: 1; }
.rev-stars-sm { color: #f5a623; letter-spacing: 2px; font-size: 15px; }
.rev figcaption { display: flex; align-items: center; gap: 12px; }
.rev-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 15px var(--serif); }
.rev figcaption span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.rev figcaption b { font-size: 14px; }
.rev figcaption small { font-size: 12px; color: var(--muted); }

/* FAQ: heading on the left, questions on the right */
.faq-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; } .faq-side { position: sticky; top: 110px; } }
.faq-side p { margin: 14px 0 20px; }
.faq-layout .faq { margin-top: 0; border-top: 0; display: grid; gap: 10px; }
.faq-layout .faq details { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 0 20px; }
.faq-layout .faq details[open] { background: #fff; border-color: #ffc9a3; }
.faq-layout .faq summary { padding: 16px 32px 16px 0; font-weight: 600; }
.faq-layout .faq summary::after { top: 14px; }
.faq-layout .faq details p { margin: 0; padding: 0 0 16px; }

/* contact: one dark card, replaces the old contact block and footer CTA band */
.contact2 { padding-bottom: 24px; }
.contact-card { position: relative; overflow: hidden; display: grid; gap: 28px; background: var(--night); color: #fff; border-radius: 28px; padding: 32px 24px; }
@media (min-width: 900px) { .contact-card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 48px; align-items: center; } }
.contact-card::before { content: ""; position: absolute; width: 560px; height: 560px; left: -200px; bottom: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,20,.45), transparent 65%); pointer-events: none; }
.contact-card > * { position: relative; }
.cc-main .label { color: #ffb27a; }
.cc-main h2 { color: #fff; margin: 6px 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.cc-main .lede { color: rgba(255,255,255,.72); font-size: 17px; }
.cc-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contact-card .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.contact-card .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.contact-card .btn-glass { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); }
.cc-lines { margin: 0; display: grid; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; }
.cc-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--night-2); }
.cc-lines dt { font-size: 13px; color: rgba(255,255,255,.55); }
.cc-lines dd { margin: 0; text-align: right; font-size: 15px; overflow-wrap: anywhere; }
.cc-lines a { color: #fff; text-decoration: none; }
.cc-lines a:hover { color: #ffb27a; }

/* floating buttons: compact, and out of the way near the contact card and footer */
.float { right: 14px; bottom: 14px; gap: 8px; }
.float.away { opacity: 0 !important; pointer-events: none !important; transform: translateY(12px) !important; }
@media (max-width: 760px) { .float .f-book { display: none; } }
.site-foot { padding-top: 48px; }

.mega-word { margin: 40px 0 0; padding-top: .06em; text-align: center; font: 700 clamp(5rem, 24vw, 19rem)/1 var(--serif); letter-spacing: -0.07em; background: linear-gradient(180deg, #ff7a1a 0%, rgba(255,106,0,.35) 55%, rgba(255,106,0,0) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
@media (max-width: 560px) { .cc-lines > div { flex-direction: column; gap: 2px; } .cc-lines dd { text-align: left; } .contact-card { padding: 28px 20px; } }
/* Home UX fixes, loaded last. */

/* ── Harare map: readable labels, no overlap ── */
.hmap svg { overflow: visible; }
.hmap .ring { fill: none; stroke: #2a2723; stroke-width: 1; stroke-dasharray: 2 6; }
.hmap .ring-label { font: 10px var(--mono); fill: #5d574e; }
.hmap .cbd-core { fill: rgba(255,106,0,.07); stroke: rgba(255,106,0,.25); stroke-width: 1; }
.hmap a circle.hit-area, .hmap a:hover circle.hit-area, .hmap a:focus circle.hit-area { fill: transparent; r: 14; filter: none; stroke: none; }
.hmap a .dot { fill: #bdb6aa; transition: r .15s, fill .15s; }
.hmap a.t1 .dot { fill: var(--accent); filter: drop-shadow(0 0 5px rgba(255,106,0,.85)); }
.hmap a:hover .dot, .hmap a:focus-visible .dot, .hmap a.hit .dot { fill: #fff; r: 7; }
.hmap a text { font: 500 14px var(--sans); fill: #e9e4dc; paint-order: stroke; stroke: var(--night-2); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.hmap a.t1 text { font-weight: 600; font-size: 16px; }
.hmap a.t2 text { opacity: 0; transition: opacity .15s; }
.hmap a.t2:hover text, .hmap a.t2:focus-visible text, .hmap a.t2.hit text, .hmap a.t2[aria-current] text { opacity: 1; }
.hmap a:hover text, .hmap a.hit text { fill: #fff; }
.hmap .legend { position: static; padding: 2px 6px 0; }
.map-hint { margin-top: 2px; }

/* ── pricing notes: one tidy card instead of loose chips ── */
.price-notes { margin-top: 28px; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--rule); border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; }
@media (min-width: 860px) { .price-notes { grid-template-columns: 1.2fr 1fr .8fr; } }
.price-notes > div { background: #fff; padding: 22px 24px; }
.price-notes h3 { font-size: 1rem; margin-bottom: 12px; }
.price-notes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14.5px; }
.price-notes li { display: flex; gap: 10px; align-items: flex-start; }
.price-notes li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pay-chips span { font: 600 12.5px var(--sans); padding: 6px 11px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.price-notes .btn { margin-top: 12px; padding: 10px 18px; font-size: 14px; }

/* ── one round WhatsApp button instead of two pills ── */
.float .f-round { width: 56px; height: 56px; padding: 0; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(37,211,102,.8); }
.float .f-round svg { width: 28px; height: 28px; fill: #fff; }

/* ── hero photo fading into the dark panel ── */
.hero2-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; z-index: 0; }
.hero2-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero2-photo::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(12,12,11,.88) 16%, rgba(12,12,11,.45) 48%, rgba(12,12,11,.12) 100%),
    linear-gradient(0deg, var(--night) 0%, rgba(12,12,11,0) 38%),
    linear-gradient(180deg, rgba(12,12,11,.55) 0%, rgba(12,12,11,0) 28%); }
.hero2-photo-on .hero2-glow { opacity: .45; right: -320px; top: -360px; }
.hero2-photo-on .hero2-in { grid-template-columns: minmax(0, 1fr); }
.hero2-photo-on .hero2-copy { max-width: 600px; }
.hero2-photo-on { min-height: min(84vh, 720px); display: flex; align-items: center; }
.hero2-photo-on .hero2-in { width: 100%; }
.hero2-copy .map-search { margin: 0 0 18px; max-width: 520px; background: rgba(12,12,11,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.14); }
.hero2-copy .map-search:focus-within { border-color: var(--accent); }
.hero2-copy .ctas { margin-bottom: 18px; }
@media (max-width: 979px) {
  .hero2-photo { width: 100%; }
  .hero2-photo img { object-position: 70% 30%; }
  .hero2-photo::after { background: linear-gradient(180deg, rgba(12,12,11,.3) 0%, rgba(12,12,11,.72) 38%, var(--night) 80%); }
}
/* Leaflet service-area map, and removal of glows and decorative dots.
   Loaded last. */

/* ── real map ── */
.lmap { margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; }
.lmap-canvas { height: 420px; background: #eef0ee; position: relative; z-index: 0; }
@media (max-width: 760px) { .lmap-canvas { height: 340px; } }
.lmap-wait { display: grid; place-items: center; height: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.lmap-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 12px 16px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); }
.lmap-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule); }
.lmap-legend .k1 { background: var(--accent); }
.lmap-legend .k2 { background: #7d776d; }
.lmap-legend .k3 { background: var(--ink); }
.lmap-tip-txt { margin-left: auto; }
.leaflet-container { font: 14px var(--sans); }
.leaflet-tooltip.lmap-tip { font: 600 13px var(--sans); color: var(--ink); background: #fff; border: 0; border-radius: 8px; padding: 4px 9px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); }
.leaflet-popup.lmap-pop .leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup.lmap-pop .leaflet-popup-content { margin: 12px 14px; font: 14px/1.5 var(--sans); }
.leaflet-popup.lmap-pop a { color: var(--accent-ink); font-weight: 600; }
.leaflet-control-attribution { font-size: 10px; }
.area-layout { align-items: start; }

/* ── no glows, no decorative dots ── */
.hero2::before, .hero2-glow, .bx-web::before, .contact-card::before, .loc-hero::after { display: none !important; }
.brand img { box-shadow: none; }
.hero2 .btn, .loc-hero .btn { box-shadow: none; }
.tier-pick { box-shadow: 0 24px 50px -30px rgba(0,0,0,.45); }
.pill-kicker i { display: none; }
.m-bar i, .wk-bar i { display: none; }
.m-bar span, .wk-bar em { margin-left: 0; }
.m-res .pin { box-shadow: none; }
.float .f-round { box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }
.mega-word { background: none; color: #24221f; -webkit-background-clip: border-box; background-clip: border-box; }
.leaflet-tile-pane { filter: saturate(.55) contrast(.95); }

/* -- equal-height rows -- */
@media (min-width: 960px) {
  .area-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .area-layout .lmap { display: flex; flex-direction: column; height: 100%; }
  .area-layout .lmap-canvas { flex: 1 1 auto; height: auto; min-height: 380px; }
  .area-layout .area-groups { height: 100%; align-content: stretch; }
}
@media (min-width: 900px) {
  .tiers { align-items: stretch; }
  .tier-pick { padding-top: 32px; padding-bottom: 32px; }
}
.tier ul { flex: 1; }

/* -- header: logo only -- */
.site-head .brand span { display: none; }
.site-head .brand img { width: 44px; height: 44px; }
.area-layout .area-groups > div { padding: 16px 16px 14px; }
.area-layout .area-groups h3 { font-size: .95rem; margin-bottom: 10px; }
.area-layout .chips { gap: 6px; }
.area-layout .chips a { padding: 5px 11px; font-size: 13px; }
@media (min-width: 1140px) { .area-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .area-layout .area-groups { grid-template-columns: repeat(3, 1fr); } }

/* -- Custom websites card: real device mockup on a light card -- */
.bx-web { background: var(--paper); border-color: var(--rule); color: var(--ink); }
.bx-web p { color: var(--muted); }
.bx-web .svc-ic { background: var(--tint); }
.bx-web .svc-price { color: var(--accent-ink); }
.bx-mock { margin: auto 0 0; }
.bx-mock img { width: 100%; height: auto; display: block; }
.bx-mock figcaption { margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: right; }
.bx-mock a { color: inherit; }

/* -- reviews: Google button -- */
.rev-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.btn-google { gap: 10px; background: #fff; color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 8px 20px -14px rgba(0,0,0,.35); }
.btn-google:hover { background: #fff; color: var(--ink); border-color: #c9c4bb; }
.btn-google svg { width: 20px; height: 20px; flex: 0 0 20px; }
.rev-all { font-size: 14px; color: var(--muted); text-decoration: none; }
.rev-all:hover { color: var(--accent-ink); }

/* -- header: logo + one-line name in the footer wordmark style -- */
.site-head .brand { gap: 12px; }
.site-head .brand span { display: inline-flex; flex-direction: row; align-items: center; gap: .32em; line-height: 1; white-space: nowrap; }
.site-head .brand b, .site-head .brand small { font: 700 21px/1 var(--serif); letter-spacing: -0.05em; text-transform: none; color: var(--ink); margin: 0; }
@media (max-width: 380px) { .site-head .brand b, .site-head .brand small { font-size: 18px; } }
@media (min-width: 761px) and (max-width: 940px) { .site-head .brand small { display: none; } }
/* One screen per section on laptops and desktops.
   Menu links land each section exactly below the floating header, and every
   section is compacted so its content fits in the remaining screen height.
   Phones and very short windows keep normal scrolling. Loaded last. */

.ag-cities { grid-column: 1 / -1; }

@media (min-width: 960px) and (min-height: 540px) {
  :root { --head: 90px; }
  section, [id] { scroll-margin-top: var(--head); }
  main > section:not(.hero2):not(.loc-hero) { min-height: calc(100vh - var(--head)); display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
  main > section > .wrap { width: 100%; }
  .hero2 { min-height: calc(100vh - var(--head) - 12px); padding: 36px 0; }
  .contact2 { padding-bottom: 24px; }

  .work-head { margin-bottom: 16px; }
  section h2 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
  .work-head p { font-size: 14px; }
  .label { margin-bottom: 8px; }

  /* pricing */
  .tiers { gap: 16px; }
  .tier { padding: 18px 22px; }
  .tier h3 { font-size: 1.2rem; }
  .tier-for { display: none; }
  .tier-price { font-size: 2.4rem; margin-top: 8px; }
  .tier-per { margin: 4px 0 12px; }
  .tier .btn { margin-bottom: 12px; padding: 9px 16px; font-size: 14px; }
  .tier ul { padding-top: 12px; font-size: 13.5px; }
  .tier li { margin-bottom: 5px; gap: 8px; }
  .tier li svg { margin-top: 2px; }
  .tier-pick { padding-top: 18px; padding-bottom: 18px; }
  .tier-badge { top: -11px; }
  .price-notes { margin-top: 12px; }
  .price-notes > div { padding: 12px 16px; }
  .price-notes h3 { font-size: .9rem; margin-bottom: 6px; }
  .price-notes ul { grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 13px; }
  .pay-chips { margin-bottom: 4px; }
  .pay-chips span { padding: 4px 8px; font-size: 12px; }
  .price-notes .muted.small { margin: 0; font-size: 13px; }
  .price-notes .btn { margin-top: 6px; padding: 6px 14px; font-size: 13px; }

  /* services */
  .bento { gap: 12px; }
  .bx { padding: 16px 18px; gap: 6px; border-radius: 18px; }
  .bx h3 { font-size: 1rem; }
  .bx p { font-size: 13.5px; line-height: 1.45; }
  .svc-ic { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 2px; }
  .svc-ic svg { width: 18px; height: 18px; }
  .bx-web h3 { font-size: 1.25rem; }
  .bx-mock img { max-height: 230px; width: auto; max-width: 100%; margin: 0 auto; }
  .bx-mock figcaption { margin-top: 4px; }
  .bx-seo .svc-ic, .bx-wa .svc-ic { display: none; }
  .mock-pay { padding: 12px; }
  .m-paybtn { margin-top: 8px; padding: 8px; }
  .mock-serp, .mock-chat { margin: 2px 0; }
  .mock-chat p { padding: 6px 10px; font-size: 12.5px; }
  .bx-sm { flex-direction: row; align-items: center; gap: 10px; padding: 12px 16px; }
  .bx-sm .svc-ic { margin: 0; }
  .bx-sm h3 { font-size: .95rem; }
  .bx-sm p { display: none; }
  .bx-sm .svc-price { margin: 0 0 0 auto; font-size: 13px; }

  /* work */
  .work-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .wk { padding: 8px; border-radius: 16px; }
  .wk-bar { display: none; }
  .wk-shot img { aspect-ratio: 16 / 9; }
  .wk-meta { padding: 8px 4px 2px; }
  .wk-meta b { font-size: 14px; }
  .wk-meta small { font-size: 12px; }
  .wk-go { width: 26px; height: 26px; right: 12px; bottom: 12px; font-size: 13px; }
  .work-more { margin-top: 10px; font-size: 13px; }

  /* process + reviews */
  .steps-row li { padding: 20px; }
  .step-n { margin-bottom: 12px; }
  .rev { padding: 20px; gap: 10px; }
  .rev blockquote { font-size: 15px; }
  .rev-cta { margin-top: 16px; }

  /* areas */
  .area-layout .area-groups > div { padding: 11px 14px; }
  .area-layout .area-groups h3 { font-size: .85rem; margin-bottom: 6px; }
  .area-layout .chips { gap: 5px; }
  .area-layout .chips a { padding: 3px 9px; font-size: 12.5px; }
  .area-layout .lmap-canvas { min-height: 280px; }
  .lmap-legend { padding: 8px 14px; font-size: 12px; }

  /* FAQ */
  .faq-layout .faq { gap: 8px; }
  .faq-layout .faq summary { padding: 11px 30px 11px 0; font-size: 15px; }
  .faq-layout .faq summary::after { top: 9px; }
  .faq-side p { margin: 10px 0 14px; }

  /* contact */
  .contact-card { padding: 32px 40px; }
}

/* second pass: trim the sections that still overflowed at 1366x657 */
@media (min-width: 960px) and (min-height: 540px) {
  /* pricing: name and price on one line, notes as a compact strip */
  .tier { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-content: start; padding: 16px 20px; }
  .tier h3 { grid-column: 1; grid-row: 1; align-self: center; }
  .tier-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 2.2rem; align-self: center; }
  .tier-per { grid-column: 1; grid-row: 2; margin: 2px 0 0; font-size: 12px; }
  .tier .btn { grid-column: 1 / -1; margin: 12px 0 10px; }
  .tier ul { grid-column: 1 / -1; padding-top: 10px; font-size: 13px; }
  .tier li { margin-bottom: 4px; line-height: 1.4; }
  .tier-pick { padding-top: 16px; padding-bottom: 16px; }
  .price-notes { grid-template-columns: 1.5fr 1.1fr .9fr; }
  .price-notes > div { padding: 10px 14px; }
  .price-notes ul { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; }
  .price-notes li svg { width: 13px; height: 13px; flex-basis: 13px; }
  .price-notes .muted.small { font-size: 12.5px; }
  .pay-chips + .muted.small { display: none; }
  .price-notes .btn { padding: 0; border: 0; background: none; color: var(--accent-ink); font-weight: 600; margin-top: 4px; }

  /* services: shorter cards */
  .bx { padding: 14px 16px; }
  .bx-mock img { max-height: 165px; }
  .bx-mock figcaption { display: none; }
  .bx-pay { gap: 12px; }
  .mock-pay { padding: 10px; }
  .m-methods span { padding: 4px 8px; font-size: 11.5px; }
  .mock-pay small { margin-top: 4px; }
  .bx-seo h3, .bx-wa h3 { font-size: .95rem; }
  .mock-serp { padding: 8px; }
  .m-q { padding: 4px 10px; font-size: 12px; }
  .m-res { margin-top: 6px; }

  /* work: wider, shorter thumbnails */
  .wk-shot img { aspect-ratio: 2 / 1; }

  /* areas: tighter list, list gets more width */
  .area-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; }
  .area-layout .area-groups { grid-template-columns: repeat(3, 1fr); }
  .area-layout .area-groups > div { padding: 9px 12px; }
  .area-layout .area-groups h3 { margin-bottom: 5px; }
  .area-layout .chips { gap: 4px; }
  .area-layout .chips a { padding: 2px 8px; font-size: 12px; line-height: 1.45; }
}
@media (min-width: 960px) and (min-height: 540px) { main > section#services { padding: 14px 0; } .bento { gap: 10px; } }
@media (min-width: 960px) and (max-width: 1180px) and (min-height: 540px) {
  .tier ul { font-size: 12.5px; } .tier li { margin-bottom: 3px; } .tier .btn { margin: 10px 0 8px; }
  .area-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .area-layout .chips a { font-size: 11.5px; padding: 2px 7px; }
  .area-layout .area-groups > div { padding: 8px 10px; }
}

/* location pages: two-column body */
.loc-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .loc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .loc-side .loc-facts { margin-top: 0; } }
.loc-side h3:first-child { margin-top: 0; }
@media (min-width: 960px) and (min-height: 540px) { .loc-body h3 { margin: 18px 0 6px; } .loc-body p, .loc-body li { font-size: 15.5px; } .loc-body li { margin-bottom: 4px; } .loc-facts { margin: 0 0 16px; } .loc-facts > div { padding: 12px 16px; } .loc-facts dd { font-size: 14px; } }
@media (min-width: 960px) and (min-height: 540px) { #pricing .work-head p { display: none; } #pricing .work-head > div { width: 100%; } }
.legal-cols { max-width: 46em; }
@media (min-width: 960px) { .legal-cols { max-width: none; column-count: 2; column-gap: 56px; } .legal-cols h3 { break-after: avoid; margin-top: 0; padding-top: 14px; } .legal-cols p { break-inside: avoid; } }
@media (min-width: 960px) and (min-height: 540px) { .legal-cols p { font-size: 15px; margin-bottom: .7em; } .legal-cols h3 { font-size: 1.05rem; } }
/* snappier reveals so a section looks complete as soon as you land on it */
.anim .rv { transition-duration: .45s !important; transition-delay: calc(var(--i, 0) * 35ms) !important; }
/* Every card uses the hero panel's style: dark, with big rounded corners.
   Small "screens" inside cards (payment box, Google result, chat, map tiles)
   stay light so they still read as previews. Loaded last. */
:root { --card: #12110f; --card-2: #1b1a17; --card-line: #2b2825; --card-text: #f4f1ec; --card-muted: #a8a39b; --card-r: 28px; }

.bx, .tier, .wk, .steps-row li, .rev, .lmap,
.price-notes > div, .area-groups > div, .loc-facts > div, .faq-layout .faq details {
  background: var(--card); color: var(--card-text); border: 1px solid var(--card-line); border-radius: var(--card-r);
}
.bx h3, .tier h3, .steps-row h3, .price-notes h3, .area-groups h3, .wk-meta b, .rev figcaption b { color: #fff; }
.bx p, .tier-for, .tier-per, .steps-row p, .wk-meta small, .rev figcaption small, .price-notes .muted, .loc-facts dt { color: var(--card-muted); }
.bx:hover, .wk:hover { border-color: rgba(255,106,0,.55); }

/* grids that used 1px hairline gaps become separate rounded cards */
.price-notes, .area-groups, .loc-facts { background: none; border: 0; border-radius: 0; overflow: visible; gap: 10px; }
.price-notes > div, .area-groups > div, .loc-facts > div { border-radius: 24px; }

/* services */
.svc-ic, .bx-web .svc-ic { background: rgba(255,106,0,.16); }
.svc-price, .bx-web .svc-price { color: #ffb27a; }
.bx-web { background: var(--card); border-color: var(--card-line); color: var(--card-text); }
.bx-web p { color: var(--card-muted); }
.bx-mock figcaption, .bx-mock a { color: var(--card-muted); }
.mock-pay, .mock-serp { border-color: transparent; }

/* pricing */
.tier ul { border-top-color: rgba(255,255,255,.12); }
.tier li { color: #e6e1d9; }
.tier li.tier-plus { color: #fff; }
.tier .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.tier .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.tier-pick { background: var(--card-2); border: 1.5px solid var(--accent); }
.price-notes li { color: #e6e1d9; }
.pay-chips span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #f4f1ec; }
.price-notes .btn, .price-notes .btn-ghost { color: #ffb27a; }
.price-notes .btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); }

/* work */
.wk-shot { border-color: rgba(255,255,255,.08); border-radius: 18px; }
.wk-go { background: rgba(255,255,255,.08); color: #fff; }
.wk:hover { color: var(--card-text); }

/* process */
.step-n { background: #fff; color: var(--ink); box-shadow: 0 0 0 5px rgba(255,106,0,.2); }
.step-when { background: rgba(255,106,0,.16); color: #ffb27a; }

/* reviews */
.rev blockquote { color: var(--card-text); }

/* service areas */
.area-groups .chips a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #e9e4dc; }
.area-groups .chips a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.area-groups .chips a.is-key { background: rgba(255,106,0,.16); border-color: rgba(255,106,0,.4); color: #ffb27a; }
.area-groups .chips a[aria-current="page"] { background: #fff; border-color: #fff; color: var(--ink); }
.lmap { overflow: hidden; }
.lmap-legend { color: var(--card-muted); border-top-color: var(--card-line); }
.lmap-legend i { box-shadow: 0 0 0 1px var(--card-line); }
.lmap-canvas { border-radius: 0; }

/* FAQ */
.faq-layout .faq details { padding: 0 22px; }
.faq-layout .faq summary { color: #fff; }
.faq-layout .faq summary::after { color: #ffb27a; }
.faq-layout .faq details[open] { background: var(--card-2); border-color: rgba(255,106,0,.45); }
.faq-layout .faq details p { color: #c9c4bc; }
.faq-layout .faq details p a { color: #ffb27a; }

/* location pages */
.loc-facts dd { color: var(--card-text); }
.loc-side .chips a, .loc-main .chips a { background: #fff; }
@media (min-width: 960px) and (min-height: 540px) { .area-layout .area-groups { gap: 6px; } .area-layout .area-groups > div { border-radius: 20px; } }

/* -- pills: same dark glass style as the hero's "Web design studio in Harare" -- */
.tier-badge, .step-when, .area-groups .chips a.is-key {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.tier-badge { backdrop-filter: blur(8px); background: #1b1a17; }
.area-groups .chips a.is-key:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }

/* -- service icons on white -- */
.svc-ic, .bx-web .svc-ic { background: #fff; }

/* -- Custom websites card: light -- */
.bx-web { background: #f3f1ec; border-color: #e6e3dd; color: var(--ink); }
.bx-web h3 { color: var(--ink); }
.bx-web p, .bx-mock figcaption, .bx-mock a { color: var(--muted); }
.bx-web .svc-price { color: var(--accent-ink); }

/* -- Pesepay preview: dark glass checkout panel -- */
.mock-pay { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; box-shadow: none; padding: 14px; }
.m-methods span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #f4f1ec; border-radius: 999px; }
.m-methods span:first-child { background: rgba(255,106,0,.18); border-color: rgba(255,106,0,.5); color: #ffb27a; }
.m-paybtn { border-radius: 999px; }
.mock-pay small { color: var(--card-muted); }

/* -- Google result preview: dark glass search card -- */
.mock-serp { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; }
.m-q { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #f4f1ec; }
.m-res b { color: #fff; }
.m-res small { color: var(--card-muted); }

/* -- booking + quote dialogs: hero-style dark panel (they used the pill radius by mistake) -- */
dialog { border-radius: 28px; border: 1px solid var(--card-line); background: var(--card); color: var(--card-text); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; box-shadow: 0 40px 100px -30px rgba(0,0,0,.85); overflow: hidden; }
dialog::backdrop { background: rgba(8,8,7,.6); backdrop-filter: blur(4px); }
.dlg-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--card-line); }
.dlg-head h2 { color: #fff; font-size: 1.35rem; }
.dlg-head .label { color: #ffb27a; }
.dlg-x { color: #fff; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 22px; line-height: 1; }
.dlg-x:hover { background: rgba(255,255,255,.16); }
.dlg-body { padding: 18px 24px 22px; max-height: calc(100vh - 210px); }
.dlg-foot { padding: 14px 24px; border-top: 1px solid var(--card-line); }
.dlg-foot .total { color: #ffb27a; }
dialog .choice { border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #f4f1ec; }
dialog .choice:hover { border-color: rgba(255,106,0,.6); background: rgba(255,255,255,.08); }
dialog .choice[aria-pressed="true"] { border-color: var(--accent); background: rgba(255,106,0,.16); }
dialog .choice small, dialog .choice .p { color: var(--card-muted); }
dialog .row-chips .choice { border-radius: 999px; }
dialog .sub, dialog .muted { color: var(--card-muted); }
dialog .field { border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; }
dialog .field::placeholder { color: #8f8a82; }
dialog .field:focus { border-color: var(--accent); background: rgba(255,255,255,.08); }
dialog .box { border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--card-text); }
dialog .box dt { color: var(--card-muted); }
dialog .lines li { color: var(--card-muted); }
dialog .lines li.t { color: #fff; border-top-color: rgba(255,255,255,.14); }
dialog .estimate .big { color: #fff; }
dialog .linkbtn { color: var(--card-muted); }
dialog .linkbtn:hover { color: #fff; }
dialog .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
dialog .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
dialog .btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
dialog .err { color: #ff8a7a; }
dialog p[style*="var(--serif)"] { color: #fff; }
@media (max-width: 560px) { dialog { width: calc(100vw - 16px); border-radius: 24px; } .dlg-body { padding: 16px 18px 20px; } .dlg-head, .dlg-foot { padding-left: 18px; padding-right: 18px; } }
/* Reviews slider + "no orange text" rule. Loaded last.
   Orange is kept for buttons, borders, icons and underlines only. */

/* -- reviews carousel -- */
.rev-slider { position: relative; overflow: hidden; }
.rev-track { display: flex; column-gap: 16px; transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.rev-track .rev { flex: 0 0 100%; }
@media (min-width: 700px) { .rev-track .rev { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1000px) { .rev-track .rev { flex-basis: calc((100% - 32px) / 3); } }
.rev-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.rev-ctrl button[data-rev] { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--ink); font-size: 16px; cursor: pointer; }
.rev-ctrl button[data-rev]:hover { border-color: var(--ink); }
.rev-dots { display: flex; gap: 8px; }
.rev-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: #d6d2ca; cursor: pointer; transition: width .3s, background .3s; }
.rev-dots button[aria-current="true"] { width: 26px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .rev-track { transition: none; } }

/* -- no orange text -- */
:root { --accent-ink: #141414; }
.hl { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .09em; text-underline-offset: .12em; }
.hero .label, .loc-hero .label, .cc-main .label, .foot-cta .label, dialog .label, .dlg-head .label { color: rgba(255,255,255,.72); }
.svc-price, .svc-cta .svc-price, .bx-sm .svc-price { color: #fff; }
.bx-web .svc-price { color: var(--ink); }
.faq-layout .faq summary::after, .faq-layout .faq details p a { color: #fff; }
.dlg-foot .total { color: #fff; }
.price-notes .btn, .price-notes .btn-ghost { color: #fff; }
.m-methods span:first-child { color: #fff; }
.pay-chips span { color: #f4f1ec; }
.site-foot a:hover { color: #fff; }
.leaflet-popup.lmap-pop a { color: var(--ink); text-decoration: underline; }
.nav a:not(.btn):hover, .site-head .nav a[aria-current="page"] { color: var(--ink); }
.chips a.is-key { color: var(--ink); }
.area-groups .chips a.is-key { color: #fff; }
.tier li.tier-opt b { color: var(--ink); }
a:hover { color: inherit; }
.site-foot .socials { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* very small phones (≤ 360px) */
@media (max-width: 360px) {
  .site-head .brand small { display: none; }
  .site-head .wrap.head-pill { padding-left: 8px; }
  .site-head .nav-toggle { padding: 8px 12px; }
}
@media (max-width: 420px) {
  .chips a { white-space: normal; }
  .loc-hero .ctas .btn, .hero2 .ctas .btn { flex: 1 1 auto; justify-content: center; }
}
.ts-slot { display: flex; justify-content: center; padding: 0 20px; }
.ts-slot:empty { display: none; }

/* guides */
.guide-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.guide-card { text-decoration: none; min-height: 180px; }
.guide-card:hover { color: var(--card-text); }
.guide-sec .wrap { max-width: 760px; }
.guide-sec ul { padding-left: 20px; }
.guide-sec li { margin-bottom: 6px; }
.guide-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; font-weight: 600; }

/* compare packages dialog */
dialog.compare-dlg { width: min(860px, calc(100vw - 24px)); }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: -6px -4px 0; }
.cmp { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cmp th, .cmp td { padding: 10px 12px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.cmp tbody th { text-align: left; font-weight: 500; color: #e6e1d9; }
.cmp thead th { font: 700 15px var(--serif); color: #fff; position: sticky; top: 0; background: var(--card); }
.cmp td { color: #fff; font-weight: 600; }
.cmp .cmp-pick { background: rgba(255,106,0,.1); }
.cmp thead .cmp-pick { border-radius: 12px 12px 0 0; }
.cmp tfoot .cmp-pick { border-radius: 0 0 12px 12px; }
.cmp-y { color: #fff; font-size: 16px; }
.cmp-n { color: #6f6a62; }
.cmp tfoot td { border-bottom: 0; padding-top: 14px; }
.cmp tfoot .btn { padding: 8px 16px; font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* WhatsApp status bubble */
.float .f-wa{position:relative}

.f-wa .wa-status{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;background:#0f1115;color:#fff;font-weight:600;font-size:12px;line-height:1;padding:8px 11px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
.f-wa .wa-status.is-on::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#25d366;margin-right:6px;vertical-align:1px}
@media (max-width:480px){.f-wa .wa-status{font-size:11px;padding:7px 9px}}
.wk-zw{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:#0f1115;color:#fff;vertical-align:1px}
.mq-lines{list-style:none;padding:0;margin:14px auto 18px;max-width:520px;text-align:left}
.mq-lines li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.mq-lines .mq-tot{font-weight:700;border-bottom-width:2px}
/* Pesepay logo: white pill so the purple mark reads on dark and light cards */
.pp-by{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pp-logo{height:22px;width:auto;background:#fff;padding:4px 9px;border-radius:999px;box-sizing:content-box}

/* Light theme for the Pesepay, Local SEO and WhatsApp chatbot cards (matches Custom websites) */
.bento .bx-pay, .bento .bx-seo, .bento .bx-wa { background: #f3f1ec; border-color: #e6e3dd; color: #141414; }
.bento :is(.bx-pay, .bx-seo, .bx-wa) :is(h3, .svc-price, b, strong) { color: #141414; }
.bento :is(.bx-pay, .bx-seo, .bx-wa) p { color: #5d6066; }
.bento :is(.bx-pay, .bx-seo, .bx-wa) .mock-pay, .bento :is(.bx-pay, .bx-seo, .bx-wa) .mock-serp { background: #fff; border: 1px solid #e6e3dd; color: #141414; box-shadow: 0 10px 24px -18px rgba(0,0,0,.35); }
.bento .bx-pay .mock-pay small, .bento .bx-seo .mock-serp :is(small, span:not(.pin)) { color: #5d6066; }
.bento .bx-pay .m-methods span { background: #f3f1ec; border-color: #e6e3dd; color: #141414; }
.bento .bx-seo .m-q { background: #f3f1ec; border-color: #e6e3dd; color: #141414; }
.bento .bx-seo .m-res, .bento .bx-seo .m-res * { color: #141414; }
.bento .bx-wa .mock-chat p { color: #141414; }
.bento .bx-wa .mock-chat .in { background: #fff; border-color: #e6e3dd; }

/* Local SEO card: Google Business Profile image with a hero-style fade, in the card's light tone */
.bento .bx-seo.has-photo { position: relative; overflow: hidden; isolation: isolate; }
.bx-seo .bx-photo { position: absolute; inset: 0; z-index: -1; }
.bx-seo .bx-photo img { position: absolute; right: -8%; bottom: -6%; height: 108%; width: auto; max-width: none; }
.bx-seo .bx-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,241,236,.97) 0%, rgba(243,241,236,.85) 42%, rgba(243,241,236,.15) 100%), linear-gradient(0deg, rgba(243,241,236,.95) 0%, transparent 45%); }
.bx-seo.has-photo .svc-ic, .bx-seo.has-photo h3, .bx-seo.has-photo .svc-price { position: relative; max-width: 62%; }
.bx-seo.has-photo .svc-price { margin-top: auto; }

/* Guide banner photo with the home hero's overlay */
.loc-hero.has-photo { overflow: hidden; isolation: isolate; }
.loc-photo { position: absolute; inset: 0; z-index: -1; background: #fff; }
.loc-photo img { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); height: 120%; width: auto; max-width: none; }
.loc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,.93) 0%, rgba(10,9,8,.8) 50%, rgba(10,9,8,.35) 100%), linear-gradient(0deg, rgba(10,9,8,.75) 0%, transparent 45%); }
@media (max-width: 700px) { .loc-photo img { right: -30%; opacity: .7; } .loc-photo::after { background: rgba(10,9,8,.86); } }

/* Selected work: full-bleed screenshot with the hero's fading overlay, text on top */
.work-grid .wk { padding: 0; overflow: hidden; isolation: isolate; }
.work-grid .wk-shot { position: relative; border: 0; border-radius: 0; }
.work-grid .wk-shot img { aspect-ratio: 4 / 3; }
.work-grid .wk-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,.75) 0%, rgba(10,9,8,.45) 50%, rgba(10,9,8,.1) 100%), linear-gradient(0deg, rgba(10,9,8,.95) 0%, rgba(10,9,8,.6) 30%, transparent 62%); transition: opacity .3s; }
.work-grid .wk:hover .wk-shot::after { opacity: .8; }
.work-grid .wk-meta { position: absolute; left: 14px; right: 50px; bottom: 12px; padding: 0; z-index: 1; }
.work-grid .wk-meta small { color: rgba(244,241,236,.75); }
.work-grid .wk-go { z-index: 1; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.loc-photo.is-cover img { inset: 0; top: 0; right: 0; transform: none; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .loc-photo.is-cover img { right: 0; opacity: 1; } }
/* Show the whole photo (no zoom): full height, anchored right, dark fill behind the faded left side */
.loc-photo.is-cover { background: #0a0908; }
.loc-photo.is-cover img { left: auto; right: 0; width: auto; height: 100%; object-fit: contain; }
@media (max-width: 700px) { .loc-photo.is-cover img { width: 100%; height: 100%; object-fit: cover; } }
.loc-photo.is-cover img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%); }
@media (max-width: 700px) { .loc-photo.is-cover img { -webkit-mask-image: none; mask-image: none; } }

/* ── SA: rotating client-site photos inside the ZW hero card ── */
.hero2-slides .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero2-slides .slide.is-on { opacity: 1; }
.hero2-slides .slide img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.hero2 .show-cap { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; font-size: 13px; color: rgba(244,241,236,.7); }
.hero2 .show-cap a { color: #fff; }
.hero2 .show-cap .dots { display: flex; gap: 6px; }
.hero2 .hero-note { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 13px; color: rgba(244,241,236,.75); }
.hero2 .hero-note .stars { color: #ffb400; }

/* ── SA work list → ZW screenshot cards with the hero fade ── */
#proj-float { display: none !important; }
.proj-list.proj-flat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border: 0; }
.proj-list.proj-flat .proj { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); padding: 0; color: #fff; text-decoration: none; isolation: isolate; transition: transform .25s, border-color .25s; }
.proj-list.proj-flat .proj:hover { transform: translateY(-4px); border-color: rgba(255,106,0,.55); }
.proj-list.proj-flat .proj-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: -2; display: block; transition: transform .6s; }
.proj-list.proj-flat .proj:hover .proj-thumb { transform: scale(1.03); }
.proj-list.proj-flat .proj::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,9,8,.75) 0%, rgba(10,9,8,.45) 50%, rgba(10,9,8,.1) 100%), linear-gradient(0deg, rgba(10,9,8,.95) 0%, rgba(10,9,8,.6) 30%, transparent 62%); transition: opacity .3s; }
.proj-list.proj-flat .proj:hover::after { opacity: .8; }
.proj-list.proj-flat .proj-n { position: absolute; top: 12px; left: 14px; font-size: 11px; color: rgba(255,255,255,.7); }
.proj-list.proj-flat .proj-name { position: absolute; left: 14px; right: 50px; bottom: 30px; font: 600 15px/1.2 var(--serif, 'Poppins', sans-serif); color: #fff; }
.proj-list.proj-flat .proj-meta { position: absolute; left: 14px; right: 50px; bottom: 12px; font-size: 12px; color: rgba(244,241,236,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-list.proj-flat .proj-meta br, .proj-list.proj-flat .proj-loc { display: none; }
.proj-list.proj-flat .proj-go { position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; font-size: 13px; }
.proj-list.proj-flat .proj-new { font-style: normal; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #fff; color: #141414; vertical-align: 2px; margin-left: 4px; }
.proj-list.proj-flat .proj.is-off { display: none; }
.proj-list.proj-flat:not(.all):not(.filtered) .proj:nth-child(n+9) { display: none; }
@media (max-width: 900px) { .proj-list.proj-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .proj-list.proj-flat { grid-template-columns: 1fr; } }
.proj-list.proj-flat .proj-name, .proj-list.proj-flat .proj-meta { text-align: left; }

/* ── SA: hero-style pills and no orange text (as on the ZW site) ── */
.office-kicker { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; }
#subscription b, #subscription .subscr-price b, #office .office-price b { color: #fff !important; }
#office .office-kicker { background: #12110f !important; border-color: #12110f; }
#office .office-perk, #office .oplan { background: var(--card, #12110f) !important; border: 1px solid var(--card-line, #2b2825) !important; border-radius: 26px; color: var(--card-text, #f4f1ec); }
#office .office-perk *, #office .oplan h3, #office .oplan b, #office .oplan strong, #office .oplan .oplan-price { color: var(--card-text, #f4f1ec) !important; }
#office .office-perk p, #office .oplan p, #office .oplan li, #office .oplan small { color: var(--card-muted, #a8a39b) !important; }
#office .oplan .btn-ghost, #office .oplan a.btn:not(.btn-dark) { border-color: rgba(255,255,255,.3); }

/* ── SA: Office free-plan button readable on dark ── */
#office .oplan .btn-ghost, #office .oplan .btn:not([class*=btn-dark]) { color: #fff !important; }

/* ── SA reviews: dark rounded cards, 2 × 2 ── */
#faq .quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
#faq .quotes blockquote { margin: 0; padding: 22px 24px; background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); border-radius: 26px; color: var(--card-text, #f4f1ec); display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
#faq .quotes blockquote p { font: 500 15px/1.55 var(--sans, Inter, sans-serif); color: var(--card-text, #f4f1ec); margin: 0; }
#faq .quotes cite { font-style: normal; font-size: 12px; color: var(--card-muted, #a8a39b); }
#faq .rev-score { color: #141414; }
#faq .rev-stars, #faq .small-stars { color: #ffb400; }
#faq .rev-links a { color: #141414; }
@media (max-width: 760px) { #faq .quotes { grid-template-columns: 1fr; } }

/* ── SA areas: dark province cards with town pills ── */
#areas .areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; }
#areas .areas > div { background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825) !important; border-radius: 22px; padding: 16px 18px; }
#areas .areas h3 { color: var(--card-text, #f4f1ec); font-size: 15px; margin: 0 0 10px; }
#areas .areas p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0; color: transparent; }
#areas .areas a { font-size: 12px; font-weight: 600; color: #fff; text-decoration: none; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
#areas .areas a:hover { background: rgba(255,255,255,.16); }
@media (max-width: 760px) { #areas .areas { grid-template-columns: 1fr; } }

/* ── SA contact: one dark rounded card like the ZW contact block ── */
.contact > .wrap { background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); border-radius: 32px; padding: clamp(28px, 4vw, 48px); color: var(--card-text, #f4f1ec); max-width: 1180px; }
.contact > .wrap h2, .contact > .wrap .label { color: #fff; }
.contact > .wrap .lede { color: var(--card-muted, #a8a39b); }
.contact .contact-lines { border-color: rgba(255,255,255,.12); }
.contact .contact-lines li { border-color: rgba(255,255,255,.12) !important; color: var(--card-text, #f4f1ec); }
.contact .contact-lines span { color: var(--card-muted, #a8a39b); }
.contact .contact-lines a { color: #fff; }
.contact .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.contact .scribble svg { display: none; }
#areas .areas { background: transparent !important; }

/* ── SA about: site slider and facts as dark rounded cards ── */
#about .sitecard { background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); border-radius: 26px; overflow: hidden; }
#about .sitecard .sc-url { background: rgba(255,255,255,.08); color: rgba(244,241,236,.8); border-color: transparent; }
#about .sitecard .sc-cap, #about .sitecard .sc-cap * { color: var(--card-text, #f4f1ec); }
#about .sitecard .sc-cap button { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
#about .facts { background: transparent; gap: 10px; border: 0; }
#about .facts > div { background: var(--card, #12110f) !important; border: 1px solid var(--card-line, #2b2825); border-radius: 20px; }
#about .facts dt, #about .facts b { color: #fff; }
#about .facts dd, #about .facts span { color: var(--card-muted, #a8a39b); }
@media (max-width: 700px) { .hero2-slides .slide img { object-position: 50% 45%; } }

/* ── SA city pages: "why" and services lists as dark rounded cards ── */
.sa-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sa-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-cards li { background: var(--card, #12110f); border: 1px solid var(--card-line, #2b2825); border-radius: 22px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--card-line, #2b2825) !important; }
.sa-cards strong { font: 600 15px/1.3 var(--serif, Poppins, sans-serif); color: #fff; }
.sa-cards .desc { font-size: 13px; line-height: 1.55; color: var(--card-muted, #a8a39b); }
.sa-cards .price { order: 3; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: #fff; font-family: inherit; }
@media (max-width: 760px) { .sa-cards-3 { grid-template-columns: 1fr; } }
#areas .areas a[aria-current] { background: #fff; color: #141414; }
#why .sa-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { #why .sa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #why .sa-cards { grid-template-columns: 1fr; } }

/* Country switch in the footer (South Africa / Zimbabwe) */
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.foot-bottom .legal { margin: 0; }
.country-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.country-switch a { padding: 8px 16px; border-radius: 999px; font: 600 13px/1 var(--sans, Inter, sans-serif); color: rgba(244,241,236,.75) !important; text-decoration: none; transition: background .2s, color .2s; }
.country-switch a:hover { color: #fff !important; }
.country-switch a[aria-current] { background: #fff; color: #141414 !important; pointer-events: none; }
@media (max-width: 600px) { .foot-bottom { flex-direction: column; align-items: flex-start; } }

/* WCAG AA: white text on orange and WhatsApp green needs 4.5:1.
   #c94e00 = 4.59:1 (was #ff6a00, 2.87:1); #15803d = 5.02:1 (was #25d366, 1.98:1). Glows keep the brighter tint. */
:root { --accent: #c94e00; --wa: #15803d; }
.proj-filter button.on i { color: rgba(255,255,255,.75); }
#office .oplan .oplan-price span { color: var(--card-muted, #a8a39b) !important; }