/* Nyumba hub: restrained editorial treatment based on the stored UI reference. */
:root { --nyumba: #58e38d; --nyumba-soft: #a6eec3; --nyumba-ink: #030504; --nyumba-paper: #f4f2eb; }

.nyumba-page { background: var(--nyumba-ink); }
.nyumba-page .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(3,5,4,.95); backdrop-filter: blur(12px); }
.nyumba-page .nav { min-height: 76px; }
.nyumba-page .brand { min-width: 235px; }
.nyumba-page .brand-mark.nyumba { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: #042412; background: var(--nyumba); box-shadow: none; filter: none; font-size: 1rem; font-weight: 900; }
.nyumba-page .brand-copy small { color: var(--nyumba-soft); letter-spacing: .13em; }
.nyumba-page .nav-links { gap: 31px; }
.nyumba-page .nav-links a { color: #cecfcb; }
.nyumba-page .nav-links a::after { background: var(--nyumba); }
.nyumba-page .nav-links a:hover, .nyumba-page .nav-links a.active { color: var(--nyumba-soft); }
.nyumba-page .nav-cta { min-height: 42px; padding: 0 17px; border-color: rgba(166,238,195,.56); border-radius: 5px; color: #f5f5ef; background: transparent; }
.nyumba-page .nav-cta:hover { border-color: var(--nyumba-soft); color: #06140c; background: var(--nyumba-soft); }

.nyumba-page .hero { min-height: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 87% 45%, rgba(43,159,91,.16), transparent 25rem), var(--nyumba-ink); }
.nyumba-page .hero::before { display: none; }
.nyumba-page .hero-grid { min-height: 622px; grid-template-columns: minmax(0, .86fr) minmax(470px, 1fr); gap: clamp(46px, 6vw, 94px); align-items: center; padding-block: 88px; }
.nyumba-page .eyebrow { color: var(--nyumba); }
.nyumba-page h1 { max-width: 10ch; margin: 0; color: var(--nyumba-paper); font-size: clamp(3.6rem, 5.15vw, 5.35rem); line-height: .96; letter-spacing: -.073em; }
.nyumba-page .hero-copy .hero-copy { max-width: 55ch; margin: 26px 0 0; color: #bcc3bd; font-size: 1.02rem; line-height: 1.75; }
.nyumba-page .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.nyumba-page .btn { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 5px; box-shadow: none; }
.nyumba-page .btn-primary { color: #080b09; border-color: var(--nyumba-paper); background: var(--nyumba-paper); }
.nyumba-page .btn-primary:hover { color: #080b09; border-color: #fff; background: #fff; transform: translateY(-1px); }
.nyumba-page .btn-secondary { color: #f2f2ed; border-color: rgba(244,242,235,.55); background: transparent; }
.nyumba-page .btn-secondary:hover { border-color: var(--nyumba-paper); color: #090b09; background: var(--nyumba-paper); }
.nyumba-page .hero-meta { margin: 19px 0 0; color: #9ea6a0; font-size: .88rem; }
.nyumba-page .hero-meta a { color: #e6e7e1; text-decoration: underline; text-decoration-color: rgba(166,238,195,.75); text-underline-offset: 4px; }
.nyumba-page .hero-meta a:hover { color: var(--nyumba-soft); }

.hero-photo { margin: 0; overflow: hidden; border: 1px solid rgba(244,242,235,.25); border-radius: 5px; background: #101713; box-shadow: 0 28px 68px rgba(0,0,0,.34); }
.hero-photo img { display: block; width: 100%; height: 510px; object-fit: cover; object-position: 66% center; }
.hero-photo figcaption { margin-top: 11px; color: #89918b; font-size: .75rem; letter-spacing: .015em; }

.nyumba-page section { padding: 74px 0; }
.nyumba-page .business-preview-section { padding-top: 50px; }
.nyumba-page .preview-spotlight { display: grid; grid-template-columns: minmax(0, .83fr) minmax(380px, 1.17fr); gap: clamp(42px, 7vw, 112px); align-items: end; padding: 48px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
.nyumba-page .preview-copy h2 { margin: 14px 0 15px; color: var(--nyumba-paper); font-size: clamp(2.55rem, 3.5vw, 3.75rem); line-height: .98; letter-spacing: -.065em; }
.nyumba-page .preview-copy p { max-width: 48ch; margin: 0; color: #b6bdb7; line-height: 1.72; }
.nyumba-page .preview-text-link { display: inline-flex; gap: 7px; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid var(--nyumba-soft); color: var(--nyumba-paper); font-weight: 760; }
.nyumba-page .preview-text-link:hover { color: var(--nyumba-soft); }
.preview-route { min-height: 228px; padding: 30px 34px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(244,242,235,.18); border-radius: 5px; background: #0a0d0b; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.preview-route:hover { border-color: rgba(166,238,195,.68); background: #0c120e; transform: translateY(-2px); }
.route-label { color: var(--nyumba-soft); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.preview-route strong { max-width: 18ch; margin-top: 14px; color: var(--nyumba-paper); font-size: clamp(1.58rem, 2.25vw, 2.18rem); line-height: 1.02; letter-spacing: -.05em; }
.preview-route p { max-width: 48ch; margin: 16px 0 0; color: #aab1ab; font-size: .86rem; line-height: 1.6; }
.route-url { margin-top: 25px; color: #e6e9e4; font-size: .78rem; font-weight: 750; }
.route-url b { margin-left: 6px; color: var(--nyumba-soft); font-size: 1rem; }

.nyumba-page .panel, .nyumba-page .quote { border-radius: 6px; }
.nyumba-page .panel { padding: 43px; background: #090d0c; }
.nyumba-page .quote { background: #55db89; }
.nyumba-page .quote .btn-dark { color: #f8fffa; background: #07120b; }
.nyumba-page .section-head h2, .nyumba-page .panel h2, .nyumba-page .quote h2 { color: var(--nyumba-paper); }
.nyumba-page .quote h2 { color: #041208; }
.nyumba-page .link-grid a { border-radius: 5px; }
.nyumba-page .link-grid a:hover { color: var(--nyumba-soft); border-color: rgba(88,227,141,.48); background: rgba(88,227,141,.07); }
.nyumba-page footer { border-top: 1px solid rgba(255,255,255,.1); }
.nyumba-page .footer-row a { color: var(--nyumba-soft); }

@media (max-width: 1100px) {
  .nyumba-page .nav-links { gap: 19px; }
  .nyumba-page .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr); gap: 44px; }
  .nyumba-page .preview-spotlight { grid-template-columns: 1fr; gap: 36px; }
  .preview-route { max-width: 680px; }
}
@media (max-width: 980px) {
  .nyumba-page .site-header { position: relative; }
  .nyumba-page .nav { display: flex; justify-content: space-between; min-height: 70px; }
  .nyumba-page .nav-links, .nyumba-page .nav-cta { display: none; }
  .nyumba-page .brand { min-width: 0; }
  .nyumba-page .hero-grid { min-height: 0; grid-template-columns: 1fr; padding-block: 68px 58px; }
  .nyumba-page h1 { max-width: 12ch; }
  .hero-photo { max-width: 760px; }
  .nyumba-page .business-preview-section { padding-top: 0; }
}
@media (max-width: 620px) {
  .nyumba-page .container { width: min(100% - 32px, var(--max)); }
  .nyumba-page .brand-copy strong { font-size: .95rem; }
  .nyumba-page .brand-copy small { font-size: .47rem; }
  .nyumba-page .hero-grid { padding-block: 53px 50px; }
  .nyumba-page h1 { font-size: clamp(3.15rem, 15vw, 4.25rem); }
  .nyumba-page .hero-copy .hero-copy { font-size: .96rem; }
  .nyumba-page .hero-actions .btn { width: 100%; }
  .nyumba-page .hero-meta { line-height: 1.55; }
  .hero-photo img { height: 370px; object-position: 69% center; }
  .nyumba-page section { padding: 54px 0; }
  .nyumba-page .preview-spotlight, .nyumba-page .panel { padding: 31px 0 0; }
  .nyumba-page .panel { padding: 28px 21px; }
  .nyumba-page .preview-copy h2 { font-size: clamp(2.5rem, 13vw, 3.35rem); }
  .preview-route { min-height: 224px; padding: 25px 23px; }
  .nyumba-page .split { gap: 15px; }
}