/**
 * boa-local.css — BOA LOCAL
 *
 * Design direction per brief: modern, restrained, OS-grade. Explicitly avoids
 * heavy green, decorative serif, glassmorphism, gradient stacks and generic
 * directory-card aesthetics. Uses the existing BOA gold accent sparingly, on
 * a near-neutral dark surface, so it reads as a distinct product inside the
 * same brand rather than a different site.
 *
 * Mobile is the priority case: someone using this is usually standing in
 * Arusha on a phone, needing to call somebody.
 */

/* The global background video stays, as on every other page. The earlier
   problem was not the video — it was that the CONTENT areas were transparent,
   so unrelated safari frames showed between sections and the page read as
   broken. The fix is the same pattern page-arusha.php uses: let the video
   show behind the hero, then sit the reading content on an opaque surface. */
.bl,
.blp {
	background: transparent;
	position: relative;
	z-index: 1;
	--bl-bg: #0b0e0d;
	--bl-surface: #121615;
	--bl-surface-2: #171c1a;
	--bl-line: rgba(255, 255, 255, .09);
	--bl-line-strong: rgba(255, 255, 255, .16);
	--bl-ink: #f2f4f3;
	--bl-mute: rgba(242, 244, 243, .58);
	--bl-accent: #c9a24a;
	--bl-ok: #5f9e74;
	--bl-radius: 14px;
	font-family: 'Jost', system-ui, -apple-system, sans-serif;
	color: var(--bl-ink);
	font-weight: 300;
	line-height: 1.65;
}

.bl *, .blp * { box-sizing: border-box; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ── HERO ─────────────────────────────────────────────── */
.bl-hero { padding: clamp(4.5rem,11vh,7.5rem) clamp(1.1rem,5vw,3rem) clamp(2.5rem,5vw,3.5rem); }
.bl-hero__in { max-width: 720px; margin: 0 auto; text-align: center; }
.bl-hero__kick {
	display:inline-block; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
	color: var(--bl-accent); border:1px solid rgba(201,162,74,.35);
	border-radius:999px; padding:.35rem .85rem; margin-bottom:1.1rem;
}
.bl-hero__h1 {
	font-size: clamp(2.1rem,6vw,3.4rem); font-weight: 300; letter-spacing:-.02em;
	line-height:1.05; color:#fff; margin:0 0 .9rem;
}
.bl-hero__lede { font-size:clamp(.95rem,2vw,1.05rem); color:var(--bl-mute); margin:0 auto 2rem; max-width:56ch; }

.bl-search { display:flex; gap:.5rem; max-width:540px; margin:0 auto .9rem; }
.bl-search__input {
	flex:1; font-family:inherit; font-size:.95rem; color:var(--bl-ink);
	background:var(--bl-surface); border:1px solid var(--bl-line-strong);
	border-radius:10px; padding:.9rem 1.1rem; min-width:0;
}
.bl-search__input::placeholder { color:rgba(242,244,243,.4); }
.bl-search__input:focus { outline:none; border-color:var(--bl-accent); }
.bl-search__btn {
	font-family:inherit; font-size:.78rem; font-weight:600; letter-spacing:.06em;
	text-transform:uppercase; color:#12100a; background:var(--bl-accent);
	border:0; border-radius:10px; padding:.9rem 1.4rem; cursor:pointer;
}
.bl-hero__eg { font-size:.78rem; color:rgba(242,244,243,.4); margin:0 0 1rem; }
.bl-hero__eg span {
	display:inline-block; margin:0 .18rem; padding:.2rem .55rem;
	border:1px solid var(--bl-line); border-radius:6px;
}
.bl-hero__meta { font-size:.76rem; color:rgba(242,244,243,.38); margin:0; }

/* ── SECTIONS ─────────────────────────────────────────── */
.bl-sec { max-width:1180px; margin:0 auto; padding:clamp(2rem,4vw,3.2rem) clamp(1.1rem,5vw,3rem); }
.bl-sec__h2 { font-size:clamp(1.25rem,2.6vw,1.6rem); font-weight:400; color:#fff; margin:0 0 .5rem; letter-spacing:-.01em; }
.bl-sec__intro { font-size:.88rem; color:var(--bl-mute); margin:0 0 1.5rem; max-width:62ch; }
.bl-sec--cta { text-align:center; }

/* ── CATEGORY TILES ───────────────────────────────────── */
.bl-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.75rem; margin-top:1.3rem; }
.bl-cat {
	display:flex; flex-direction:column; gap:.3rem; padding:1.15rem 1.2rem;
	background:var(--bl-surface); border:1px solid var(--bl-line);
	border-radius:var(--bl-radius); text-decoration:none;
	transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.bl-cat:hover, .bl-cat:focus-visible {
	border-color:var(--bl-line-strong); background:var(--bl-surface-2); transform:translateY(-1px);
}
.bl-cat__label { font-size:1rem; font-weight:500; color:#fff; }
.bl-cat__blurb { font-size:.8rem; color:var(--bl-mute); line-height:1.5; }
.bl-cat__n { font-size:.7rem; color:var(--bl-accent); margin-top:.25rem; }

/* ── BUSINESS CARDS ───────────────────────────────────── */
.bl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.9rem; }
.bl-card {
	display:flex; flex-direction:column; background:var(--bl-surface);
	border:1px solid var(--bl-line); border-radius:var(--bl-radius);
	overflow:hidden; text-decoration:none;
	transition:border-color .18s ease, transform .18s ease;
}
.bl-card:hover, .bl-card:focus-visible { border-color:var(--bl-line-strong); transform:translateY(-2px); }
.bl-card__img {
	position:relative; display:block; aspect-ratio:16/10;
	background-size:cover; background-position:center; background-color:#1a201e;
}
.bl-card__badge {
	position:absolute; top:.6rem; left:.6rem; font-size:.62rem; font-weight:600;
	letter-spacing:.04em; color:#0a1410; background:var(--bl-ok);
	border-radius:6px; padding:.24rem .5rem;
}
.bl-card__body { display:flex; flex-direction:column; gap:.28rem; padding:.9rem 1rem 1.05rem; flex:1; }
.bl-card__cat { font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bl-accent); }
.bl-card__name { font-size:1rem; font-weight:500; color:#fff; line-height:1.3; }
.bl-card__desc { font-size:.8rem; color:var(--bl-mute); line-height:1.5; }
.bl-card__area { font-size:.72rem; color:rgba(242,244,243,.4); margin-top:auto; padding-top:.4rem; }

.bl-empty, .bl-building {
	background:var(--bl-surface); border:1px solid var(--bl-line);
	border-radius:var(--bl-radius); padding:1.6rem 1.5rem; color:var(--bl-mute); font-size:.9rem;
}
.bl-building h2 { font-size:1.2rem; font-weight:400; color:#fff; margin:0 0 .6rem; }
.bl-building p { margin:0 0 .8rem; }
.bl-empty a, .bl-building a { color:var(--bl-ok); text-decoration:none; }

.bl-btn {
	display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.06em;
	text-transform:uppercase; color:#0a1410; background:var(--bl-ok);
	border-radius:10px; padding:.9rem 1.6rem; text-decoration:none;
}

/* ═══ PROFILE ═════════════════════════════════════════ */

/* 38svh was half a phone screen of photo before any information. A directory
   listing is a reference page — the name, category and contact buttons should
   be reachable without scrolling. */
.blp-hero { position:relative; min-height:210px; display:flex; align-items:flex-end; overflow:hidden; }
/* No featured image: a translucent scrim over the global video rather than a
   flat panel, so the brand motion is visible behind the title. */
.blp-hero--plain { min-height:210px; padding-top:clamp(4.5rem,11vh,6.5rem); background:linear-gradient(180deg,rgba(11,14,13,.35) 0%,rgba(11,14,13,.88) 100%); }
.blp-hero__img { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.5); }
.blp-hero__sh { position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,14,13,.35),rgba(11,14,13,.97)); }
.blp-hero__in { position:relative; z-index:2; max-width:860px; margin:0 auto; width:100%; padding:0 clamp(1.1rem,5vw,3rem) clamp(1.6rem,4vw,2.4rem); }
.blp-bc { font-size:.72rem; color:rgba(242,244,243,.5); margin-bottom:.7rem; }
.blp-bc a { color:var(--bl-accent); text-decoration:none; }
.blp-title { font-size:clamp(1.8rem,4.5vw,2.7rem); font-weight:300; letter-spacing:-.02em; color:#fff; margin:0 0 .5rem; line-height:1.1; }
.blp-meta { display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:.8rem; color:var(--bl-mute); margin:0 0 .7rem; }
.blp-meta span::after { content:''; }
.blp-verified { display:inline-block; font-size:.74rem; margin:0; padding:.35rem .7rem; border-radius:7px; }
.blp-verified--verified { color:#0a1410; background:var(--bl-ok); }
.blp-verified--needs-update { color:var(--bl-ink); background:rgba(255,255,255,.08); border:1px solid var(--bl-line-strong); }
.blp-verified span { font-weight:400; opacity:.8; }

/* Actions — the most important element on mobile */
.blp-actions {
	position:sticky; top:0; z-index:20;
	display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
	padding:.85rem clamp(1.1rem,5vw,3rem);
	background:#0b0e0d; border-bottom:1px solid var(--bl-line);
	max-width:860px; margin:0 auto;
}
.blp-act {
	flex:0 0 auto; font-size:.78rem; font-weight:600; letter-spacing:.03em;
	border-radius:10px; padding:.75rem 1.15rem; text-decoration:none;
	border:1px solid var(--bl-line-strong); color:var(--bl-ink); white-space:nowrap;
}
.blp-act--whatsapp { background:var(--bl-ok); color:#0a1410; border-color:transparent; }
.blp-act--call { background:var(--bl-accent); color:#12100a; border-color:transparent; }

.blp-body { max-width:860px; margin:0 auto; padding:1.6rem clamp(1.1rem,5vw,3rem) 4rem; }
.blp-sec { padding:1.4rem 0; border-bottom:1px solid var(--bl-line); }
.blp-sec:last-of-type { border-bottom:0; }
.blp-sec h2 { font-size:1.08rem; font-weight:500; color:#fff; margin:0 0 .7rem; }
.blp-prose p { margin:0 0 .9rem; color:rgba(242,244,243,.82); }
.blp-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:0; list-style:none; }
.blp-tags li { font-size:.78rem; color:var(--bl-ink); background:var(--bl-surface); border:1px solid var(--bl-line); border-radius:8px; padding:.4rem .75rem; }
.blp-hours { white-space:pre-line; color:rgba(242,244,243,.82); margin:0; font-size:.9rem; }
.blp-facts { margin:0; }
.blp-facts div { display:flex; gap:.8rem; padding:.4rem 0; border-bottom:1px solid var(--bl-line); }
.blp-facts dt { flex:0 0 110px; font-size:.76rem; color:rgba(242,244,243,.45); margin:0; }
.blp-facts dd { margin:0; font-size:.86rem; color:var(--bl-ink); }
.blp-landmark { font-size:.85rem; color:var(--bl-mute); }
.blp-map { height:260px; border-radius:var(--bl-radius); overflow:hidden; margin:.9rem 0; border:1px solid var(--bl-line); }
.blp-dirlink { font-size:.82rem; color:var(--bl-ok); text-decoration:none; }
.blp-social { display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.blp-social a { font-size:.78rem; color:var(--bl-ink); background:var(--bl-surface); border:1px solid var(--bl-line); border-radius:8px; padding:.45rem .85rem; text-decoration:none; }
.blp-social a:hover { border-color:var(--bl-line-strong); }
.blp-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; }
.blp-gallery__item { display:block; border-radius:10px; overflow:hidden; border:1px solid var(--bl-line); aspect-ratio:4/3; }
.blp-gallery__item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.blp-gallery__item:hover img { transform:scale(1.04); }
.blp-tip { margin:0; padding:1rem 1.15rem; background:rgba(201,162,74,.08); border-left:3px solid var(--bl-accent); border-radius:0 10px 10px 0; font-size:.9rem; color:rgba(242,244,243,.85); }
.blp-tip strong { color:#fff; }
.blp-vernote { font-size:.78rem; color:rgba(242,244,243,.45); padding:.9rem 0; }
.blp-sec--cta { text-align:center; font-size:.9rem; color:var(--bl-mute); }
.blp-sec--cta a { color:var(--bl-ok); text-decoration:none; }

@media (max-width:600px) {
	.bl-search { flex-direction:column; }
	.bl-search__btn { width:100%; }
	.blp-actions { padding:.7rem 1.1rem; }
	.blp-act { padding:.8rem 1rem; font-size:.8rem; }
}

@media (prefers-reduced-motion:reduce) {
	.bl-cat, .bl-card { transition:none; }
}


/* Thin-listing fallback */
.blp-thin { color:var(--bl-mute); font-size:.92rem; margin:0 0 1rem; }

/* The body must not let the video through between sections either. */
/* Transparent — the background video shows through the whole profile. The
   readable surfaces are the CARDS, not the page. Frosted panels give contrast
   where text sits without dropping a slab of colour over the footage. */
.blp-body { background:transparent; position:relative; z-index:1; }
/* Landing page: hero is translucent (video visible), the listing sections
   below are opaque so cards stay readable. */
.bl-hero { position:relative; z-index:1; background:transparent; }
.bl-sec { position:relative; z-index:1; background:transparent; }

/* Products / services */
.blp-products { width:100%; border-collapse:collapse; font-size:.9rem; }
.blp-products th { text-align:left; font-weight:400; color:var(--bl-ink); padding:.6rem 0; border-bottom:1px solid var(--bl-line); }
.blp-products th small { display:block; font-size:.74rem; color:var(--bl-mute); font-weight:300; }
.blp-products td { text-align:right; color:var(--bl-accent); padding:.6rem 0; border-bottom:1px solid var(--bl-line); white-space:nowrap; }
.blp-pricenote { font-size:.74rem; color:rgba(242,244,243,.4); margin:.8rem 0 0; }
.blp-hnote { font-size:.8rem; color:var(--bl-mute); margin:.5rem 0 0; }


/* ── FROSTED SURFACES ──────────────────────────────────────────────
   Content sits on translucent frosted panels rather than an opaque page,
   so the video reads through the gaps while text stays legible. Kept to
   12px blur: heavier looks like a smear on mid-range Android, and this
   runs on top of a playing video, which is already GPU work. */

.blp-sec {
	background: rgba(18, 22, 21, .55);
	-webkit-backdrop-filter: blur(12px) saturate(1.15);
	backdrop-filter: blur(12px) saturate(1.15);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 14px;
	padding: 1.35rem 1.4rem;
	margin-bottom: .9rem;
}
.blp-sec:last-of-type { border-bottom: 1px solid rgba(255,255,255,.09); }
.blp-sec--cta { background: rgba(18,22,21,.4); }

.bl-card,
.bl-cat,
.bl-home__card {
	background: rgba(18, 22, 21, .58);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.blp-actions {
	background: rgba(11, 14, 13, .82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-radius: 0 0 14px 14px;
}

/* The connected block is a runtime component; frost it to match. */
.boa-connected {
	background: rgba(18, 22, 21, .5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	padding: 1.3rem 1.4rem;
	margin-top: .9rem;
}

/* Fallback: Firefox without backdrop-filter enabled gets a solid panel
   rather than unreadable text over moving video. */
@supports not (backdrop-filter: blur(1px)) {
	.blp-sec, .bl-card, .bl-cat, .bl-home__card, .boa-connected { background: rgba(14,18,17,.94); }
	.blp-actions { background: #0b0e0d; }
}

/* Motion + GPU cost is not worth it on reduced-motion or small screens. */
@media (max-width: 560px) {
	.blp-sec, .bl-card, .bl-cat, .bl-home__card, .boa-connected {
		-webkit-backdrop-filter: none; backdrop-filter: none;
		background: rgba(14, 18, 17, .93);
	}
}