/* Career Path Africa public site — design system
 * Brand: orange (#ea6a1e) primary, brown (#6b4226) secondary, green (#8cc540) accent; Inter/Sora typography
 * Used by: KiboWeb public marketing pages (home, about, services,
 *          portfolio, contact, legal/*).
 * Published to: public/vendor/kiboweb/css/careerpath.css via:
 *     php artisan kiboweb:publish
 *
 * Conventions:
 *  - All public-marketing classes are namespaced with `kw-` (KiboWeb)
 *    so they don't collide with admin/user-area styles.
 *  - Custom properties live on :root so they can be overridden per-page
 *    or per-tenant by a single declaration block.
 *  - Mobile-first: base rules target small screens, then layered up.
 *  - No JS dependencies for layout. Interactive niceties live in
 *    careerpath.js (FAQ accordion, smooth-scroll, back-to-top, fade-in).
 */

/* ---------------------------------------------------------------------------
 * 1. Design tokens (CSS custom properties)
 * ------------------------------------------------------------------------ */
:root {
    /* Brand — orange primary, earthy brown secondary, fresh green accent.
       These alias KiboFrame's design tokens (variables.css) rather than
       redeclaring literals, so a rebrand is a single edit in that file.
       Fallbacks are the Career Path values, for the rare page that loads
       this stylesheet without the framework tokens. */
    --kw-primary:        var(--primary-color, #ea6a1e);        /* Orange */
    --kw-primary-dark:   var(--primary-dark-color, #cf5910);   /* Dark orange */
    --kw-primary-light:  var(--primary-light-color, #f08a4b);  /* Light orange */
    --kw-accent:         var(--accent-color, #8cc540);         /* Green — CTA / highlight */
    --kw-accent-dark:    var(--accent-dark-color, #5e8f1f);
    --kw-secondary:      var(--secondary-color, #6b4226);      /* Brown — supporting */
    --kw-gradient:       linear-gradient(135deg, var(--kw-primary-dark) 0%, var(--kw-primary-light) 100%);
    --kw-gradient-dark:  linear-gradient(135deg, var(--neutral-color, #4f3019) 0%, var(--secondary-color, #6b4226) 100%);
    --kw-gradient-accent: linear-gradient(135deg, var(--kw-accent) 0%, var(--kw-accent-dark) 100%);

    /* Surfaces */
    --kw-surface:        var(--surface-1, #ffffff);
    --kw-surface-alt:    var(--light-color, #fbf7f2);
    --kw-surface-muted:  var(--surface-2, #f8f5f1);
    --kw-surface-tint:   var(--primary-soft, #fdeee4);          /* orange-tint light */
    --kw-surface-dark:   var(--surface-inv, #4f3019);           /* deep brown */

    /* Text */
    --kw-text:           var(--text-dark, #2c3642);
    --kw-text-muted:     var(--text-default, #44505f);
    --kw-text-soft:      var(--text-secondary, #5b6675);
    --kw-text-faint:     var(--text-subtle, #98a2b3);
    --kw-text-on-brand:  var(--text-inverted, #ffffff);

    /* Borders / dividers */
    --kw-border:         var(--border-color, #e7e2db);
    --kw-border-strong:  var(--border-strong, #d5cec4);

    /* Status */
    --kw-success:        var(--success-color, #16a34a);
    --kw-success-soft:   var(--success-soft, #e7f7ec);
    --kw-warning:        var(--warning-color, #d97706);
    --kw-warning-soft:   var(--warning-soft, #fef3c7);
    --kw-danger:         var(--danger-color, #dc2626);
    --kw-danger-soft:    var(--danger-soft, #fee2e2);
    --kw-info:           var(--info-color, #0891b2);
    --kw-info-soft:      var(--info-soft, #e0f2fe);

    /* Typography */
    --kw-font-body:      'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kw-font-heading:   'Sora', 'Inter', system-ui, sans-serif;

    /* Type scale (responsive via clamp) */
    --kw-fs-h1:          clamp(2rem, 1.4rem + 3vw, 3.5rem);
    --kw-fs-h2:          clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
    --kw-fs-h3:          clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    --kw-fs-h4:          1.25rem;
    --kw-fs-lead:        clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    --kw-fs-body:        1rem;
    --kw-fs-small:       0.875rem;

    /* Spacing scale */
    --kw-space-1:        0.25rem;
    --kw-space-2:        0.5rem;
    --kw-space-3:        0.75rem;
    --kw-space-4:        1rem;
    --kw-space-5:        1.5rem;
    --kw-space-6:        2rem;
    --kw-space-7:        3rem;
    --kw-space-8:        4rem;
    --kw-space-9:        6rem;

    /* Radius */
    --kw-radius-sm:      4px;
    --kw-radius:         8px;
    --kw-radius-lg:      12px;
    --kw-radius-xl:      20px;
    --kw-radius-pill:    999px;

    /* Shadows */
    --kw-shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.06);
    --kw-shadow:         0 8px 20px rgba(0, 0, 0, 0.08);
    --kw-shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.12);
    --kw-shadow-brand:   0 8px 20px rgba(var(--primary-rgb, 234, 106, 30), 0.20);

    /* Layout */
    --kw-container-max:  1200px;
    --kw-container-px:   clamp(1rem, 4vw, 2rem);
    --kw-section-py:     clamp(3rem, 5vw, 5rem);

    /* Motion */
    --kw-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --kw-dur-fast:       150ms;
    --kw-dur:            300ms;

    /* ── Aliases for the ported public-page stylesheet ──────────────────
       The content sections below (section 15 onward) were ported from the
       `career` project, which used a shorter set of token names. They are
       mapped onto this project's tokens here rather than being renamed
       throughout the ported CSS, so future diffs against the source stay
       readable. */
    --kw-ink:            var(--neutral-color);
    --kw-ink-2:          var(--secondary-color);
    --kw-warm:           var(--primary-color);
    --kw-dark:           var(--text-strong);
    --kw-muted:          var(--text-default);
    --kw-subtle:         var(--text-subtle);
    --kw-surface-2:      var(--surface-2);
    --kw-card:           var(--surface-1);
    --kw-border-soft:    var(--border-soft);
    --kw-radius:         10px;
    --kw-focus:          0 0 0 3px rgba(var(--primary-rgb), 0.20);
}

/* ---------------------------------------------------------------------------
 * NOTE ON STRUCTURE
 *
 * The original Career Path Africa page system (hero, feature cards, pricing, testimonials,
 * FAQ, CTA banner, legal prose, contact, comparison, reveal utility and the
 * responsive refinements — former sections 1–20) was removed when the public
 * pages were replaced with the `career` project's design. It defined the same
 * class names as the ported stylesheet (.kw-hero, .kw-section, .kw-section-head,
 * .kw-cta, .kw-eyebrow, .kw-reveal …) and, being higher-specificity in places,
 * was overriding it — so the pages kept rendering with the old layout.
 *
 * What remains below is only what the retained /portfolio page needs (the
 * Stitch components, portfolio cards and dark page hero), followed by the
 * ported `career` stylesheet, which is now the single definition of the public
 * page system.
 * --------------------------------------------------------------------------- */

/* ============================================================================
 * STITCH COMPONENTS — shared utilities for the Stitch-style marketing pages.
 * These are loaded site-wide via careerpath.css; partial-specific styles still
 * live in @push('styles') blocks per partial.
 * ============================================================================ */

/* Eyebrow pill — small "category" tag above headlines */
.kw-stitch-pill {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: var(--kw-surface-tint);
    color: var(--kw-primary);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
}

/* Buttons — primary navy, ghost white, white, outline-white */
.kw-stitch-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.kw-stitch-btn:hover { transform: translateY(-1px); }
.kw-stitch-btn:active { transform: translateY(0); }

.kw-stitch-btn--primary { background: var(--kw-primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--ink-rgb), 0.18); }
.kw-stitch-btn--primary:hover { background: var(--kw-primary-light); color: #fff; box-shadow: 0 6px 16px rgba(var(--ink-rgb), 0.25); }

.kw-stitch-btn--ghost { background: #fff; color: var(--kw-primary); border-color: var(--kw-border); }
.kw-stitch-btn--ghost:hover { background: var(--kw-surface-alt); color: var(--kw-primary); }

.kw-stitch-btn--white { background: #fff; color: var(--kw-primary); }
.kw-stitch-btn--white:hover { background: var(--kw-surface-alt); color: var(--kw-primary); }

.kw-stitch-btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.kw-stitch-btn--outline-white:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Centered section heading (eyebrow + Sora h2 + lead) */
.kw-stitch-section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.kw-stitch-section-head__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 700;
    color: var(--kw-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 1rem 0 0.75rem;
}
.kw-stitch-section-head__lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--kw-text-muted);
    margin: 0;
}

/* Feature card (used in value-propositions, benefits/statistics, etc.) */
.kw-stitch-feature-card {
    background: #fff;
    border: 1px solid var(--kw-border);
    border-radius: 0.875rem;
    padding: 1.75rem;
    height: 100%;
    box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.kw-stitch-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(var(--ink-rgb), 0.10), 0 4px 10px -5px rgba(var(--ink-rgb), 0.06);
    border-color: var(--kw-border-strong);
}

.kw-stitch-feature-card__icon {
    width: 48px; height: 48px;
    border-radius: 0.625rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
    transition: transform 0.2s ease;
}
.kw-stitch-feature-card:hover .kw-stitch-feature-card__icon { transform: scale(1.08); }
.kw-stitch-feature-card__icon--primary   { background: var(--kw-surface-tint); color: var(--kw-primary); }
.kw-stitch-feature-card__icon--secondary { background: #dae2fd;                color: var(--kw-secondary); }
.kw-stitch-feature-card__icon--accent    { background: #f6ecd1;                color: var(--kw-accent-dark); }

.kw-stitch-feature-card__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--kw-primary);
    line-height: 1.3;
    margin: 0 0 0.5rem;
}
.kw-stitch-feature-card__body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--kw-text-muted);
    margin: 0;
}

/* Page hero (used for features, benefits, about, faq, pricing) — Stitch flat
   surface with subtle radial glow, centered title + lead, optional pills/stats below */
.kw-stitch-page-hero {
    padding: 5rem 0 3rem;
    background: var(--kw-surface);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.kw-stitch-page-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(var(--primary-rgb), 0.06) 0%, transparent 60%),
        radial-gradient(500px 300px at 50% 100%, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%);
}
.kw-stitch-page-hero > .container { position: relative; z-index: 1; }
.kw-stitch-page-hero__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
    font-weight: 700;
    color: var(--kw-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.kw-stitch-page-hero__lead {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    line-height: 1.6;
    color: var(--kw-text-muted);
    max-width: 640px;
    margin: 0 auto;
}
.kw-stitch-page-hero__accent { color: var(--kw-secondary); }

/* Pills row (used in features hero etc.) */
.kw-stitch-pill-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
    margin-top: 1.75rem;
}
.kw-stitch-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: #fff;
    border: 1px solid var(--kw-border);
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kw-text);
}
.kw-stitch-chip i { color: var(--kw-secondary); }

/* Section padding helpers */
.kw-stitch-section      { padding: 5rem 0; background: #fff; }
.kw-stitch-section--alt { padding: 5rem 0; background: var(--kw-surface); }

@media (max-width: 768px) {
    .kw-stitch-page-hero { padding: 3.5rem 0 2.5rem; }
    .kw-stitch-section, .kw-stitch-section--alt { padding: 3.5rem 0; }
}

/* ============================================================================
 * CONSOLIDATED PUBLIC COMPONENTS
 * Shared classes promoted out of per-page @push('styles') blocks so they are
 * defined once (cached, consistent) instead of duplicated across pages.
 * ============================================================================ */

/* Eyebrow — dark-section variant (white-tinted) */
.kw-eyebrow--light {
    background: rgba(255, 255, 255, 0.12);
    color: var(--kw-accent);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Dark page hero — Services, Portfolio, Contact */
.kw-page-hero {
    padding: clamp(3rem, 2rem + 4vw, 5rem) 0 clamp(2.5rem, 2rem + 3vw, 4rem);
    background: var(--kw-primary); color: #fff; position: relative; overflow: hidden; text-align: center;
}
.kw-page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(620px 300px at 100% 0%, rgba(var(--primary-rgb), 0.35) 0%, transparent 60%),
        radial-gradient(520px 260px at 0% 100%, rgba(var(--accent-rgb), 0.16) 0%, transparent 60%);
}
.kw-page-hero > .container { position: relative; z-index: 1; max-width: 820px; }
.kw-page-hero__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin: 0.75rem 0 1rem;
}
.kw-page-hero__lead { font-size: 1.1rem; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 auto; max-width: 640px; }

/* Portfolio / work card — Portfolio page + home teaser */
.kw-pf-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--kw-border);
    border-radius: 1rem; overflow: hidden;
    box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.05);
    transition: transform .2s var(--kw-ease), box-shadow .2s var(--kw-ease);
}
.kw-pf-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(var(--ink-rgb), 0.18); }
.kw-pf-card__media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--kw-primary) 0%, var(--kw-secondary) 100%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.92); font-size: 2.5rem; overflow: hidden;
}
.kw-pf-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.kw-pf-card__category {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--kw-secondary); margin-bottom: 0.5rem;
}
.kw-pf-card__title { font-family: 'Sora', 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--kw-primary); margin: 0 0 0.5rem; }
.kw-pf-card__summary { font-size: 0.92rem; line-height: 1.6; color: var(--kw-text-muted); margin: 0 0 1rem; flex-grow: 1; }
.kw-pf-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kw-pf-card__tag {
    font-size: 0.72rem; font-weight: 600; color: var(--kw-text-muted);
    background: var(--kw-surface-alt); border: 1px solid var(--kw-border);
    border-radius: 9999px; padding: 0.2rem 0.65rem;
}
.kw-pf-card__link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin-top: 1rem; font-size: 0.85rem; font-weight: 600;
    color: var(--kw-secondary); text-decoration: none; align-self: flex-start;
}
.kw-pf-card__link i { transition: transform .15s var(--kw-ease); }
.kw-pf-card__link:hover { color: var(--kw-primary); }
.kw-pf-card__link:hover i { transform: translate(2px, -2px); }

/* ---------------------------------------------------------------------------
   News band — wrapper for the embedded KiboBlog <x-post-listing> on the home
   page. The component brings its own card styles (kiboblog/css/post.css); all
   this band owns is the vertical rhythm and surface so the section sits on the
   same grid as the other home-page bands.
   --------------------------------------------------------------------------- */
.kw-news {
    padding-block: var(--kw-section-py);
    background: var(--kw-surface-alt);
}

/* ===========================================================================
 * 15. Public-page content sections — ported from the `career` project's
 *     kiboweb.css (hero, stats, sections, services, why-choose, industries,
 *     figures, footer, topbar, page heroes, CTA, blog/resource surfaces).
 *
 *     Both of the source file's :root blocks were dropped on import:
 *       - its --kw-* palette is aliased from this project's tokens above;
 *       - its "public-page token bridge" (which re-declared KiboFrame's
 *         --primary-color etc. for public pages only) is unnecessary here,
 *         because KiboFrame's variables.css already carries this palette
 *         globally.
 * ======================================================================== */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color: var(--kw-text);
    background: #fff;
}

#app,
#kw-main {
    flex: 1 0 auto;
}

#kw-main {
    background: #fff;
}

#kw-main h1,
#kw-main h2,
#kw-main h3,
#kw-main h4,
#kw-main h5,
#kw-main h6 {
    color: var(--kw-dark);
    letter-spacing: 0;
    text-wrap: balance;
}

#kw-main p,
#kw-main li {
    text-wrap: pretty;
}

#kw-main a {
    color: var(--kw-primary);
}

#kw-main a:hover {
    color: var(--kw-primary-dark);
}

#kw-main .btn {
    min-height: 44px;
    border-radius: var(--kw-radius);
    font-weight: 700;
    transition-property: transform, background-color, border-color, color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: ease-out;
}

#kw-main .btn:hover {
    transform: translateY(-1px);
}

#kw-main .btn:active {
    transform: translateY(0);
}

#kw-main .btn:focus-visible,
.kw-subnav__tab:focus-visible {
    outline: none;
    box-shadow: var(--kw-focus);
}

#kw-main .btn-outline-primary {
    color: var(--kw-primary);
    border-color: rgba(234, 106, 30, 0.35);
    background: #fff;
}

#kw-main .btn-outline-primary:hover {
    color: #fff;
    border-color: var(--kw-primary);
    background: var(--kw-primary);
}

/* Public header refinements while KiboWeb pages are active. */
.app-header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: rgba(220, 230, 240, 0.85);
    box-shadow: 0 1px 0 rgba(30, 39, 50, 0.04);
}

.app-header .nav-link {
    color: var(--kw-text) !important;
}

.app-header .nav-link::after {
    background: var(--kw-primary);
}

.app-header .nav-link:hover,
.app-header .nav-link.public-active,
.app-header .nav-link.active {
    color: var(--kw-primary) !important;
}

.app-header .btn-sm.rounded-pill.btn-primary,
.app-header .btn-sm.rounded-pill.btn-primary:hover {
    background: var(--kw-primary);
    border-color: var(--kw-primary);
    box-shadow: 0 8px 20px rgba(234, 106, 30, 0.22);
}

.app-header .btn-soft {
    color: var(--kw-ink);
    border: 1px solid var(--kw-border);
    background: #fff;
}

/* Shared scaffolding */
.kw-section {
    padding: clamp(4rem, 7vw, 6rem) 0;
}

.kw-section--alt {
    background:
        linear-gradient(180deg, #fff 0%, var(--kw-surface) 100%);
}

.kw-section--ink {
    background: var(--kw-ink);
    color: #fff;
}

.kw-section-head {
    max-width: 46rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.kw-section-head h2 {
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 800;
    line-height: 1.16;
    margin-bottom: 0;
}

.kw-section--ink .kw-section-head h2 {
    color: #fff;
}

.kw-section-head p {
    margin: 0.85rem auto 0;
    color: var(--kw-muted);
    font-size: 1.07rem;
    line-height: 1.7;
}

.kw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: var(--kw-primary);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kw-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kw-accent);
    box-shadow: 0 0 0 5px rgba(140, 197, 64, 0.12);
}

/* Buttons */
.kw-btn-accent {
    background: var(--kw-primary);
    border-color: var(--kw-primary);
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(234, 106, 30, 0.24);
}

.kw-btn-accent:hover,
.kw-btn-accent:focus {
    background: var(--kw-primary-dark);
    border-color: var(--kw-primary-dark);
    color: #fff !important;
    box-shadow: 0 16px 32px rgba(234, 106, 30, 0.28);
}

/* Hero */
.kw-cloudhero {
    --kwc-deep: var(--kw-ink);
    --kwc-mid: #5a3620;
    --kwc-accent: var(--kw-accent);
    --kwc-ink: rgba(255, 255, 255, 0.80);
    --kwc-cloud-fill: #5a3620;

    position: relative;
    overflow: hidden;
    min-height: calc(100svh - 88px);
    display: flex;
    align-items: center;
    padding: clamp(4.75rem, 8vw, 7rem) 0 9rem;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 22% 18%, rgba(140, 197, 64, 0.24), transparent 26rem),
        radial-gradient(circle at 82% 8%, rgba(234, 106, 30, 0.30), transparent 30rem),
        linear-gradient(145deg, var(--kwc-deep) 0%, var(--kwc-mid) 62%, #5a3620 100%);
    --bs-heading-color: #fff;
}

.kw-cloudhero::before {
    content: "";
    position: absolute;
    inset: auto 8% 5.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

.kw-cloudhero--compact {
    padding-top: 4.5rem;
    padding-bottom: 7.25rem;
}

.kw-cloudhero__inner {
    position: relative;
    z-index: 2;
    max-width: 50rem;
    margin: 0 auto;
}

.kw-cloudhero__clouds {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(64px, 9vw, 120px);
    display: block;
    pointer-events: none;
}

.kw-cloudhero__clouds path {
    fill: var(--kwc-cloud-fill);
}

.kw-cloudhero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kw-cloudhero__eyebrow::before,
.kw-cloudhero__eyebrow::after {
    content: "";
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.28);
}

.kw-cloudhero__title {
    color: #fff !important;
    font-size: clamp(2.35rem, 5vw, 4.35rem);
    font-weight: 850;
    line-height: 1.06;
    letter-spacing: 0;
    margin: 0 auto 1.25rem;
    max-width: 54rem;
}

.kw-hl {
    color: #fff;
    background: linear-gradient(180deg, transparent 58%, rgba(140, 197, 64, 0.34) 58%);
    border-radius: 0.15em;
    padding: 0 0.08em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.kw-cloudhero__lead {
    max-width: 41rem;
    margin: 0 auto;
    color: var(--kwc-ink);
    font-size: clamp(1.03rem, 1.7vw, 1.2rem);
    line-height: 1.75;
}

.kw-cloudhero__cta,
.kw-hero-cta {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.kw-cloudhero__cta .btn-outline-light,
.kw-hero-cta .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.05);
}

.kw-cloudhero__cta .btn-outline-light:hover,
.kw-hero-cta .btn-outline-light:hover {
    color: var(--kw-ink);
    border-color: #fff;
    background: #fff;
}

.kw-cloudhero__note {
    margin-top: 1.1rem;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.92rem;
}

/* Dashboard mockup */
.kw-mockup-band {
    position: relative;
    z-index: 3;
    margin-top: -5.5rem;
    padding-bottom: 1rem;
}

.kw-mockup {
    max-width: 64rem;
    margin: 3.5rem auto 0;
    overflow: hidden;
    border: 1px solid rgba(220, 230, 240, 0.95);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(30, 39, 50, 0.18);
    outline: 1px solid rgba(255, 255, 255, 0.9);
}

.kw-mockup-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--kw-border-soft);
    background: #fbf7f2;
}

.kw-mockup-bar span {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #cbd7e5;
}

.kw-mockup-bar span:first-child {
    background: #f3b453;
}

.kw-mockup-body {
    display: grid;
    grid-template-columns: 210px 1fr;
    min-height: 330px;
}

.kw-mockup-side {
    padding: 1.2rem;
    background: var(--kw-ink);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.87rem;
}

.kw-mockup-side .kw-ms-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    margin-bottom: 0.25rem;
}

.kw-mockup-side .kw-ms-item.is-active {
    background: rgba(140, 197, 64, 0.16);
    color: #fff;
    font-weight: 700;
}

.kw-mockup-main {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(180deg, #fff 0%, #faf7f3 100%);
}

.kw-mockup-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.kw-mockup-stat {
    padding: 1rem;
    border: 1px solid var(--kw-border-soft);
    border-radius: 8px;
    background: #fff;
}

.kw-mockup-stat .kw-ms-num {
    color: var(--kw-ink);
    font-size: 1.25rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.kw-mockup-stat .kw-ms-label {
    color: var(--kw-muted);
    font-size: 0.76rem;
}

.kw-mockup-row {
    height: 14px;
    border-radius: 999px;
    background: #e8eef5;
    margin-bottom: 0.7rem;
}

.kw-mockup-row.is-accent {
    width: 65%;
    background: linear-gradient(90deg, rgba(140, 197, 64, 0.28), rgba(234, 106, 30, 0.20));
}

/* Cards and content blocks */
.kw-card,
.kw-segment,
.kw-quote,
.kw-price {
    height: 100%;
    border: 1px solid var(--kw-border-soft);
    border-radius: var(--kw-radius);
    background: var(--kw-card);
    box-shadow: 0 1px 2px rgba(30, 39, 50, 0.03);
}

.kw-card,
.kw-segment,
.kw-quote {
    padding: 1.75rem;
    transition-property: transform, border-color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: ease-out;
}

.kw-card:hover,
.kw-segment:hover {
    transform: translateY(-3px);
    border-color: rgba(234, 106, 30, 0.22);
    box-shadow: var(--kw-shadow-sm);
}

.kw-card h3,
.kw-segment h3 {
    font-weight: 800;
}

.kw-card p,
.kw-segment p {
    color: var(--kw-muted);
    line-height: 1.68;
    margin-bottom: 0;
}

.kw-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    color: var(--kw-primary);
    background: rgba(234, 106, 30, 0.10);
    font-size: 1.28rem;
}

.kw-card-icon--accent,
.kw-segment .kw-card-icon {
    color: var(--kw-accent-dark);
    background: rgba(140, 197, 64, 0.13);
}

.kw-pillar {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 0;
}

.kw-pillar i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 8px;
    color: var(--kw-primary);
    background: rgba(234, 106, 30, 0.09);
    font-size: 1.15rem;
}

.kw-pillar h3 {
    margin-bottom: 0.25rem;
    font-size: 1.04rem;
    font-weight: 800;
}

.kw-pillar p {
    color: var(--kw-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* Workflow */
.kw-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.kw-flow-step {
    min-height: 166px;
    padding: 1.2rem 1rem;
    text-align: center;
    border: 1px solid var(--kw-border-soft);
    border-radius: var(--kw-radius);
    background: #fff;
}

.kw-flow-step .kw-flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    background: var(--kw-ink);
    color: #fff;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.kw-flow-step h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.kw-flow-step p {
    color: var(--kw-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.kw-flow-arrow {
    display: none;
}

/* Feature page flow illustration */
.kw-flow3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 3vw, 1.75rem);
    margin: 2.75rem auto 0.5rem;
    flex-wrap: wrap;
}

.kw-flow3__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    min-width: 5.5rem;
}

.kw-flow3__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 12px;
    color: #fff;
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.07);
}

.kw-flow3__node--core .kw-flow3__icon {
    width: 5.2rem;
    height: 5.2rem;
    border: none;
    border-radius: 14px;
    color: var(--kw-ink);
    background: #fff;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

.kw-flow3__label {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.8rem;
    font-weight: 700;
}

.kw-flow3__link {
    position: relative;
    flex: 0 1 3.5rem;
    height: 0;
    align-self: flex-start;
    margin-top: 2rem;
    border-top: 2px solid rgba(255, 255, 255, 0.32);
}

.kw-flow3__link::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -6px;
    border-left: 7px solid rgba(255, 255, 255, 0.54);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.kw-subnav {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2.6rem;
}

.kw-subnav__tab {
    min-height: 40px;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--kw-radius);
    padding: 0.55rem 0.9rem;
    color: rgba(255, 255, 255, 0.70);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: ease-out;
}

.kw-subnav__tab:hover,
.kw-subnav__tab.is-active {
    color: #fff;
    border-color: rgba(140, 197, 64, 0.75);
    background: rgba(140, 197, 64, 0.16);
}

/* Supporting components */
.kw-stat {
    text-align: center;
}

.kw-stat .kw-stat-num {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.kw-stat .kw-stat-label {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.95rem;
}

.kw-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.kw-logos span {
    color: var(--kw-muted);
    font-size: 1.05rem;
    font-weight: 800;
}

.kw-quote-stars {
    color: var(--kw-warm);
    margin-bottom: 0.75rem;
}

.kw-quote blockquote {
    color: var(--kw-dark);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.kw-quote-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kw-quote-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: rgba(234, 106, 30, 0.10);
    color: var(--kw-primary);
    font-weight: 800;
}

.kw-quote-author strong {
    display: block;
    color: var(--kw-dark);
    font-size: 0.92rem;
}

.kw-quote-author small {
    color: var(--kw-muted);
}

.kw-price {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.kw-price--featured {
    border-color: rgba(234, 106, 30, 0.32);
    box-shadow: var(--kw-shadow-sm);
    position: relative;
}

.kw-price-badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: var(--kw-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kw-price h3 {
    font-weight: 800;
}

.kw-price-amount {
    color: var(--kw-dark);
    font-size: 2.5rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.kw-price-amount small {
    color: var(--kw-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

.kw-price-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    flex: 1 0 auto;
}

.kw-price-features li {
    padding: 0.42rem 0;
    color: var(--kw-text);
    font-size: 0.95rem;
}

.kw-price-features li i,
.kw-compare .bi-check-lg,
.kw-feature-list li i {
    color: var(--kw-accent-dark);
}

.kw-compare th,
.kw-compare td {
    vertical-align: middle;
}

.kw-compare thead th {
    background: var(--kw-ink);
    color: #fff;
    border-color: var(--kw-ink);
}

.kw-compare tbody th {
    color: var(--kw-dark);
    font-weight: 700;
}

.kw-compare .bi-dash {
    color: var(--kw-subtle);
}

.kw-segment ul {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--kw-muted);
    font-size: 0.92rem;
    line-height: 1.85;
}

.kw-feature-row h3 {
    font-weight: 800;
}

.kw-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kw-feature-list li {
    display: flex;
    gap: 0.6rem;
    padding: 0.45rem 0;
    color: var(--kw-text);
}

.kw-feature-list li i {
    margin-top: 0.2rem;
}

/* FAQ */
.kw-faq .accordion-item {
    overflow: hidden;
    border: 1px solid var(--kw-border-soft);
    border-radius: var(--kw-radius) !important;
    margin-bottom: 0.8rem;
    background: #fff;
}

.kw-faq .accordion-button {
    min-height: 58px;
    color: var(--kw-dark);
    font-weight: 750;
    background: #fff;
}

.kw-faq .accordion-button:not(.collapsed) {
    color: var(--kw-ink);
    background: #fbf7f2;
    box-shadow: inset 0 -1px 0 var(--kw-border-soft);
}

.kw-faq .accordion-button:focus {
    box-shadow: var(--kw-focus);
    border-color: var(--kw-border);
}

.kw-faq .accordion-body {
    line-height: 1.7;
}

/* CTA */
.kw-cta {
    padding: clamp(4rem, 7vw, 5.5rem) 0;
    color: #fff;
    background:
        radial-gradient(circle at 75% 0%, rgba(140, 197, 64, 0.18), transparent 24rem),
        linear-gradient(135deg, var(--kw-ink) 0%, #5a3620 100%);
}

.kw-cta h2 {
    color: #fff !important;
    font-weight: 850;
}

.kw-list {
    color: var(--kw-dark);
    line-height: 1.9;
}

/* Legal text pages */
.kw-section .col-lg-8 > h1:first-child {
    font-weight: 850;
}

.kw-section .col-lg-8 > h2 {
    color: var(--kw-ink);
    font-weight: 800;
}

.kw-section .col-lg-8 > p,
.kw-section .col-lg-8 > ul {
    color: var(--kw-text);
    line-height: 1.75;
}

/* Footer overrides for KiboWeb-loaded pages.
   Palette taken from the Career Path corporate site: dark ink background
   (#1e2732 = --kw-dark) with orange accents. */
.footer-section {
    background: var(--kw-dark);
}

.footer-section::before {
    background: var(--kw-primary);
}

.footer-title::after {
    background: var(--kw-primary);
}

.footer-links a:hover,
.footer-contact-list a:hover,
.footer-legal a:hover {
    color: var(--kw-primary);
}

.footer-contact-list li i {
    color: var(--kw-primary);
}

.social-link:hover {
    color: #fff;
    background: var(--kw-primary);
    border-color: var(--kw-primary);
}

@media (max-width: 991.98px) {
    .kw-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .app-header .navbar-collapse {
        margin-top: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--kw-border-soft);
        border-radius: var(--kw-radius);
        background: #fff;
        box-shadow: var(--kw-shadow-sm);
    }

    .app-header .guest-buttons {
        margin-top: 0.5rem;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .kw-section {
        padding: 3.5rem 0;
    }

    .kw-mockup-body {
        grid-template-columns: 1fr;
    }

    .kw-mockup-side {
        display: none;
    }

    .kw-mockup-stats {
        grid-template-columns: 1fr;
    }

    .kw-flow {
        grid-template-columns: 1fr;
    }

    .kw-flow-step {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .kw-cloudhero {
        padding-bottom: 6.5rem;
    }

    .kw-flow3__link {
        flex-basis: 2rem;
    }

    .kw-cloudhero__cta .btn,
    .kw-hero-cta .btn {
        width: 100%;
    }

    .kw-subnav {
        justify-content: stretch;
    }

    .kw-subnav__tab {
        flex: 1 1 100%;
    }
}

/* =====================================================================
   Career Path Africa — profile-specific components
   ===================================================================== */

/* Scroll reveal (progressive enhancement; visible by default) */
.kw-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .js .kw-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
    .js .kw-reveal.is-in { opacity: 1; transform: none; }
    .js .kw-reveal.d1 { transition-delay: .08s; }
    .js .kw-reveal.d2 { transition-delay: .16s; }
    .js .kw-reveal.d3 { transition-delay: .24s; }
}

/* Section title accents reused from the profile site */
.kw-title-accent { color: var(--kw-primary); }
.kw-underline { width: 66px; height: 4px; border-radius: 4px; background: var(--kw-primary); margin: 1rem auto 1.4rem; }
.kw-underline--start { margin-left: 0; }

.kw-eyebrow--light { color: rgba(255,255,255,.82); }
.kw-eyebrow--light::before { background: var(--kw-accent); }

/* Check / arrow lists */
.kw-checks, .kw-arrows { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.kw-checks li, .kw-arrows li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; color: var(--kw-muted); }
.kw-checks li i { color: var(--kw-accent-dark); font-size: 1.15rem; margin-top: .12rem; }
.kw-arrows li i { color: var(--kw-primary); font-size: 1.2rem; margin-top: .1rem; }

/* Stats band (brown) */
.kw-stats { background: var(--kw-ink-2); color: #fff; padding: clamp(2.5rem,5vw,3.5rem) 0; }
.kw-stats .kw-stat-num { color: #fff; }
.kw-stats .kw-stat-num span { color: var(--kw-accent); }
.kw-stats .kw-stat-label { color: rgba(255,255,255,.82); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; margin-top: .35rem; }
.kw-stats .kw-stat i { display: block; font-size: 1.5rem; color: var(--kw-primary); margin-bottom: .5rem; }

/* About visual block */
.kw-figure { position: relative; padding: 14px 0 30px 26px; }
.kw-figure__inner {
    position: relative; border-radius: 20px; min-height: 340px; overflow: hidden;
    display: grid; place-items: center; box-shadow: var(--kw-shadow);
    background: linear-gradient(150deg, var(--kw-primary) 0%, var(--kw-primary-dark) 45%, var(--kw-ink-2) 100%);
}
/* soft radial glow + subtle dot texture layered over the gradient */
.kw-figure__inner::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 78% 12%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
        radial-gradient(90% 80% at 12% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%);
}
.kw-figure__inner::after {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(140% 120% at 80% 10%, #000 0%, transparent 70%);
            mask-image: radial-gradient(140% 120% at 80% 10%, #000 0%, transparent 70%);
}
/* glass medallion holding the icon */
.kw-figure__medallion {
    position: relative; z-index: 1; width: 150px; height: 150px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.4);
    backdrop-filter: blur(2px);
}
.kw-figure__medallion::before {
    content: ""; position: absolute; inset: -18px; border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.35);
}
.kw-figure__medallion i { font-size: 4.6rem; color: #fff; line-height: 1; }
.kw-figure__badge {
    position: absolute; bottom: 6px; left: 0; z-index: 2; background: #fff; border-radius: 14px;
    box-shadow: var(--kw-shadow); padding: 1rem 1.5rem; text-align: left;
    border-left: 4px solid var(--kw-primary);
}
.kw-figure__badge strong { display: block; color: var(--kw-primary); font-size: 1.9rem; font-weight: 850; line-height: 1; letter-spacing: .02em; }
.kw-figure__badge small { display: block; margin-top: .35rem; color: var(--kw-muted); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; line-height: 1.5; }

/* Numbered service card */
.kw-service { position: relative; overflow: hidden; padding: 0; }
/* One media height for BOTH header variants (gradient+icon and photo), so a
   row that mixes the two keeps every card title on the same baseline. Change
   it here only — the image variant deliberately does not set its own height. */
.kw-service__top {
    height: 150px; display: grid; place-items: center; position: relative; color: #fff;
    background: linear-gradient(135deg, var(--kw-primary), var(--kw-ink-2));
}
.kw-service:nth-child(even) .kw-service__top { background: linear-gradient(135deg, var(--kw-ink-2), var(--kw-primary)); }
.kw-service__top i { font-size: 2.7rem; opacity: .95; }
/* Photo header — the image is a background, so it is always clipped to the
   150px box above and can never overflow onto the title/description below. */
.kw-service__top--img {
    background-color: var(--kw-ink-2);
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.kw-service__top--img::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 45%);
}
.kw-service__num {
    position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center; background: #fff; color: var(--kw-primary);
    font-weight: 850; box-shadow: var(--kw-shadow-sm); z-index: 2;
}
.kw-service__body { padding: 1.5rem; }
.kw-service__body h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: .55rem; }
.kw-service__body p { color: var(--kw-muted); font-size: .93rem; line-height: 1.65; margin: 0; }

/* Target markets */
.kw-market {
    display: flex; gap: 1.1rem; height: 100%; padding: 1.4rem;
    border: 1px solid var(--kw-border); border-radius: var(--kw-radius); background: #fff;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.kw-market:hover { transform: translateY(-4px); border-color: var(--kw-primary); box-shadow: var(--kw-shadow-sm); }
.kw-market__num {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center;
    font-weight: 850; font-size: 1.4rem; color: var(--kw-primary); background: rgba(234,106,30,.10);
}
.kw-market h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: .3rem; }
.kw-market p { color: var(--kw-muted); font-size: .9rem; line-height: 1.6; margin: 0; }

/* Core values */
.kw-value {
    position: relative; height: 100%; padding: 1.9rem 1.6rem;
    border: 1px solid var(--kw-border); border-radius: var(--kw-radius); background: #fff;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.kw-value::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: var(--kw-primary); transition: .3s; }
.kw-value:hover { transform: translateY(-5px); box-shadow: var(--kw-shadow-sm); border-color: transparent; }
.kw-value:hover::before { top: 0; bottom: 0; }
.kw-value__icon { width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; font-size: 1.45rem; margin-bottom: 1rem; color: var(--kw-primary); background: rgba(234,106,30,.12); transition: .3s; }
.kw-value:hover .kw-value__icon { background: var(--kw-primary); color: #fff; }
.kw-value h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .5rem; }
.kw-value p { color: var(--kw-muted); font-size: .92rem; line-height: 1.6; margin: 0; }

/* Director's message band (orange) */
.kw-director {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, var(--kw-primary), var(--kw-primary-dark));
}
.kw-director::before {
    content: "\201C"; position: absolute; font-family: Georgia, serif; font-size: 20rem; line-height: 1;
    top: -3.5rem; right: 2rem; color: rgba(255,255,255,.10); pointer-events: none;
}
/* Selector includes `.col-lg-8 p` so it outweighs the legal-text helper
   (.kw-section .col-lg-8 > p) that would otherwise dim these to --kw-text. */
.kw-director h2,
.kw-director .kw-eyebrow,
.kw-director p,
.kw-director .col-lg-8 p,
.kw-director .col-lg-8 strong { color: #fff; }
.kw-director__photo {
    width: 100%; max-width: 280px; aspect-ratio: 3/3.5; border-radius: 16px; margin: 0 auto;
    display: grid; place-items: center; color: #fff; border: 5px solid rgba(255,255,255,.25);
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(0,0,0,.12)), var(--kw-ink-2);
    box-shadow: var(--kw-shadow);
}
.kw-director__photo i { font-size: 5.5rem; opacity: .55; }
.kw-director__name { font-weight: 800; font-size: 1.25rem; margin-top: 1rem; }
.kw-director__role { opacity: .9; letter-spacing: .1em; font-size: .8rem; text-transform: uppercase; }

/* Mission / Vision */
.kw-mv { position: relative; overflow: hidden; height: 100%; padding: 2.4rem; border: 1px solid var(--kw-border); border-radius: 14px; background: #fff; box-shadow: var(--kw-shadow-sm); transition: transform .3s ease; }
.kw-mv::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--kw-primary); transform: scaleX(0); transform-origin: left; transition: .4s; }
.kw-mv:hover { transform: translateY(-6px); }
.kw-mv:hover::after { transform: scaleX(1); }
.kw-mv__icon { width: 62px; height: 62px; border-radius: 15px; display: grid; place-items: center; font-size: 1.7rem; color: #fff; margin-bottom: 1.1rem; }
.kw-mv--mission .kw-mv__icon { background: var(--kw-primary); }
.kw-mv--vision .kw-mv__icon { background: var(--kw-ink-2); }
.kw-mv h3 { font-weight: 800; margin-bottom: .6rem; }
.kw-mv p { color: var(--kw-muted); line-height: 1.7; margin: 0; }

/* Policies */
.kw-policy { height: 100%; padding: 2rem; background: #fff; border: 1px solid var(--kw-border); border-left: 5px solid var(--kw-primary); border-radius: var(--kw-radius); box-shadow: var(--kw-shadow-sm); }
.kw-policy i { font-size: 1.9rem; color: var(--kw-primary); margin-bottom: .8rem; display: block; }
.kw-policy h3 { font-weight: 800; margin-bottom: .6rem; }
.kw-policy p { color: var(--kw-muted); font-size: .94rem; line-height: 1.7; margin: 0; }

/* Clients / partners */
.kw-client {
    position: relative; overflow: hidden; height: 118px; display: grid; place-items: center; text-align: center;
    padding: 1.1rem; background: #fff; border: 1px solid var(--kw-border); border-radius: var(--kw-radius); transition: .3s;
}
.kw-client::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 32px; background: var(--kw-accent); clip-path: polygon(0 100%, 100% 100%, 0 0); opacity: .85; }
.kw-client:hover { transform: translateY(-5px); border-color: var(--kw-primary); box-shadow: var(--kw-shadow-sm); }
.kw-client strong { display: block; font-weight: 800; color: var(--kw-ink-2); font-size: 1.02rem; letter-spacing: .3px; }
.kw-client small { display: block; color: var(--kw-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; }

/* Why-us on brown */
.kw-why { background: var(--kw-ink-2); color: #fff; }
.kw-why .kw-section-head h2 { color: #fff; }
.kw-why .kw-section-head p { color: rgba(255,255,255,.85); }
.kw-whyitem { display: flex; gap: 1.1rem; height: 100%; padding: 1.5rem; border-radius: var(--kw-radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); transition: .3s; }
.kw-whyitem:hover { background: rgba(234,106,30,.20); border-color: var(--kw-primary); transform: translateY(-4px); }
.kw-whyitem__ic { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: var(--kw-primary); }
.kw-whyitem h3 { font-size: 1.02rem; font-weight: 800; color: #fff; margin-bottom: .35rem; }
.kw-whyitem p { color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.6; margin: 0; }

/* Contact info card */
.kw-contact-card { height: 100%; padding: 2.2rem; background: #fff; border: 1px solid var(--kw-border); border-radius: 14px; box-shadow: var(--kw-shadow-sm); }
.kw-contact-line { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.kw-contact-line .ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.25rem; color: var(--kw-primary); background: rgba(234,106,30,.12); }
.kw-contact-line h3 { font-size: .95rem; font-weight: 800; margin-bottom: .1rem; }
.kw-contact-line a, .kw-contact-line p { color: var(--kw-muted); font-size: .94rem; margin: 0; }
.kw-contact-line a:hover { color: var(--kw-primary); }
.kw-hours { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dashed var(--kw-border); font-size: .9rem; }
.kw-hours:last-child { border-bottom: 0; }
.kw-hours span:first-child { color: var(--kw-muted); }
.kw-hours span:last-child { font-weight: 700; }

/* =====================================================================
   Career Path Africa — top bar + light split hero (career design)
   ===================================================================== */

/* Top contact strip above the navbar */
.kw-topbar {
    background: #3a2416;            /* deep brown */
    color: #f3ede7;
    font-size: .85rem;
    padding: .5rem 0;
}
.kw-topbar a, .kw-topbar span { color: #f3ede7; text-decoration: none; }
.kw-topbar__info a, .kw-topbar__info span { margin-right: 1.4rem; display: inline-flex; align-items: center; gap: .4rem; }
.kw-topbar__info a:hover { color: var(--kw-accent); }
.kw-topbar__info i, .kw-topbar__social i { font-size: .95rem; }
.kw-topbar__social a { margin-left: .9rem; font-size: 1rem; }
.kw-topbar__social a:hover { color: var(--kw-accent); }

/* Light split hero (replaces the dark cloud hero on the landing page) */
.kw-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(234, 106, 30, .12), transparent 60%),
        linear-gradient(135deg, #fbf7f2 0%, #ffffff 55%);
}
.kw-hero::before {
    content: "";
    position: absolute; right: -140px; top: -140px; width: 520px; height: 520px;
    background: conic-gradient(from 180deg, var(--kw-primary), #f8a15c, var(--kw-primary));
    opacity: .10; border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%; filter: blur(4px);
    animation: kw-blob 18s ease-in-out infinite; pointer-events: none;
}
.kw-hero::after {
    content: ""; position: absolute; left: -120px; bottom: -120px; width: 360px; height: 360px;
    background: var(--kw-accent); opacity: .10; border-radius: 50%; pointer-events: none;
}
@keyframes kw-blob { 50% { border-radius: 54% 46% 40% 60% / 45% 55% 45% 55%; transform: rotate(30deg); } }
@media (prefers-reduced-motion: reduce) { .kw-hero::before { animation: none; } }

.kw-hero__inner { position: relative; z-index: 2; }

.kw-badge-pill {
    display: inline-flex; align-items: center; gap: .5rem; background: #fff;
    border: 1px solid var(--kw-border); padding: .45rem 1rem; border-radius: 50px;
    font-size: .85rem; font-weight: 600; color: var(--kw-ink-2);
    box-shadow: var(--kw-shadow-sm); margin-bottom: 1.4rem;
}
.kw-badge-pill i { color: var(--kw-accent-dark); }

.kw-hero__title {
    font-size: clamp(2.3rem, 5.2vw, 3.7rem); line-height: 1.08; font-weight: 800;
    color: var(--kw-dark); letter-spacing: -.02em; margin-bottom: 1.1rem;
}
.kw-hero__title .kw-accent { color: var(--kw-primary); }
.kw-hero__lead { color: var(--kw-muted); font-size: 1.15rem; line-height: 1.7; max-width: 560px; }
.kw-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.kw-hero__quote { margin-top: 1.5rem; color: var(--kw-muted); font-size: .95rem; }
.kw-hero__quote i { color: var(--kw-primary); }

/* Hero buttons — pill style from the career design */
.kw-hero .btn { border-radius: 50px; padding: .75rem 1.7rem; font-weight: 700; }
.kw-btn-brand { background: var(--kw-primary); border-color: var(--kw-primary); color: #fff; box-shadow: 0 8px 22px rgba(234,106,30,.32); }
.kw-btn-brand:hover, .kw-btn-brand:focus { background: var(--kw-primary-dark); border-color: var(--kw-primary-dark); color: #fff; box-shadow: 0 12px 28px rgba(234,106,30,.42); }
.kw-btn-outline { border: 2px solid var(--kw-primary); color: var(--kw-primary); background: transparent; }
.kw-btn-outline:hover, .kw-btn-outline:focus { background: var(--kw-primary); color: #fff; }

/* Right-hand visual: gradient photo card + floating stat cards */
.kw-hero__visual { position: relative; }
.kw-hero__photo {
    position: relative; z-index: 2; border-radius: 18px; overflow: hidden;
    aspect-ratio: 4 / 4.2; display: flex; flex-direction: column; padding: 1.75rem 2rem 2rem;
    box-shadow: var(--kw-shadow);
    background:
        radial-gradient(120% 80% at 78% 8%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
        linear-gradient(150deg, rgba(234,106,30,.95), rgba(107,66,38,.95)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39.5h40M39.5 0v40' stroke='%23ffffff' stroke-opacity='.08'/%3E%3C/svg%3E");
}
/* top pill */
.kw-hero__tag {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .02em;
    padding: .4rem .85rem; border-radius: 999px; backdrop-filter: blur(2px);
}
.kw-hero__tag i { color: var(--kw-accent); }
/* centered glass emblem fills the middle */
.kw-hero__emblem-wrap { flex: 1; display: grid; place-items: center; }
.kw-hero__emblem {
    position: relative; width: 138px; height: 138px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.4);
    backdrop-filter: blur(2px);
}
.kw-hero__emblem::before {
    content: ""; position: absolute; inset: -16px; border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.35);
}
.kw-hero__emblem i { font-size: 4.2rem; color: #fff; line-height: 1; }
.kw-hero__photo .kw-ov { color: #fff; }
.kw-hero__photo .kw-ov strong { display: block; font-size: 2rem; font-weight: 800; line-height: 1.1; }
.kw-hero__photo .kw-ov span { opacity: .85; }
.kw-hero__float {
    position: absolute; z-index: 3; background: #fff; border-radius: 12px;
    box-shadow: var(--kw-shadow-sm); padding: .85rem 1.05rem;
    display: flex; align-items: center; gap: .7rem;
}
.kw-hero__float i.ic { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; font-size: 1.2rem; color: #fff; }
.kw-hero__float small { display: block; color: var(--kw-muted); font-size: .72rem; }
.kw-hero__float strong { font-size: 1rem; color: var(--kw-dark); }
.kw-hero__float--one { top: 8%; left: -24px; }
.kw-hero__float--two { bottom: 10%; right: -18px; }

@media (max-width: 991.98px) {
    .kw-hero { text-align: center; padding-top: 3rem; }
    .kw-hero__lead { margin-left: auto; margin-right: auto; }
    .kw-hero__cta { justify-content: center; }
    .kw-hero__visual { margin-top: 2.5rem; max-width: 420px; margin-left: auto; margin-right: auto; }
    .kw-hero__float--one { left: 0; }
    .kw-hero__float--two { right: 0; }
}
@media (max-width: 575.98px) {
    .kw-hero__float { display: none; }
    .kw-hero .btn { width: 100%; }
}

/* =====================================================================
   Light page hero (interior pages) + feature-row refinements
   ===================================================================== */
.kw-pagehero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 6vw, 4.75rem) 0;
    background:
        radial-gradient(900px 420px at 82% -30%, rgba(234, 106, 30, .10), transparent 60%),
        linear-gradient(180deg, #fbf7f2 0%, #ffffff 100%);
    border-bottom: 1px solid var(--kw-border-soft);
}
.kw-pagehero__inner { position: relative; z-index: 2; max-width: 48rem; }
.kw-pagehero--center { text-align: center; }
.kw-pagehero--center .kw-pagehero__inner { margin: 0 auto; }
.kw-pagehero--center .kw-eyebrow { justify-content: center; }
.kw-pagehero--center .kw-pagehero__cta { justify-content: center; }
.kw-pagehero__title {
    font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; color: var(--kw-dark);
    letter-spacing: -.02em; line-height: 1.12; margin: .35rem 0 .85rem;
}
.kw-pagehero__title .kw-accent { color: var(--kw-primary); }
.kw-pagehero__lead { color: var(--kw-muted); font-size: 1.12rem; line-height: 1.7; margin: 0; }
.kw-pagehero--center .kw-pagehero__lead { max-width: 40rem; margin: 0 auto; }
.kw-pagehero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* Optional meta strip under the lead — used by project detail pages for
   dates, locations and funders. */
.kw-pagehero__meta {
    list-style: none; padding: 0; margin: 1.5rem 0 0;
    display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
    color: var(--kw-muted); font-size: .92rem;
}
.kw-pagehero--center .kw-pagehero__meta { justify-content: center; }
.kw-pagehero__meta i { color: var(--kw-primary); margin-right: .4rem; }

/* Back-link affordance above the title (article headers) */
.kw-pagehero > .container > .btn { margin-bottom: 1.25rem; }

/* Practice-area rows on the Services page */
.kw-feature-row .kw-feature-num {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    font-weight: 850; font-size: 1.15rem; color: var(--kw-primary); background: rgba(234,106,30,.12);
    margin-bottom: 1rem;
}
/* Supporting image for a practice area. Sits in its own column beside the
   feature list (see features.blade), so it shows the whole image at its natural
   proportions — no crop — and the grid gutters handle spacing. */
.kw-feature-figure {
    margin: 0; border-radius: var(--kw-radius); overflow: hidden;
    box-shadow: var(--kw-shadow-sm); background: var(--kw-ink-2);
}
.kw-feature-figure img {
    width: 100%; height: auto; display: block;
}

/* Blog / Resources: light search bar to match the light page heroes */
.kw-lightsearch .input-group {
    background: #fff; border: 1px solid var(--kw-border); border-radius: 50px;
    padding: .25rem; box-shadow: var(--kw-shadow-sm); overflow: hidden;
}
.kw-lightsearch .form-control {
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: var(--kw-dark); padding: .55rem .9rem;
}
.kw-lightsearch .input-group-text { background: transparent; border: none; color: var(--kw-muted); padding-left: 1rem; }
.kw-lightsearch .btn-search { background: var(--kw-primary); border: none; color: #fff; font-weight: 700; padding: .5rem 1.4rem; border-radius: 50px; }
.kw-lightsearch .btn-search:hover { background: var(--kw-primary-dark); color: #fff; }

/* Blog hero stat strip (light) */
.kw-blogstats { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.kw-blogstats li { text-align: center; min-width: 96px; }
.kw-blogstats span { display: block; font-size: 1.9rem; font-weight: 800; color: var(--kw-primary); line-height: 1.1; }
.kw-blogstats small { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--kw-muted); }

/* =====================================================================
   Career Path footer (4 columns) — kiboweb::partials.footer
   ===================================================================== */
.kw-footer { background: var(--kw-dark); color: #c9d0d9; padding: clamp(3rem,6vw,4.5rem) 0 0; }
.kw-footer h5 { color: #fff; font-weight: 800; font-size: 1.05rem; margin-bottom: 1.3rem; }

.kw-footer__logo { display: inline-flex; align-items: center; gap: .6rem; }
.kw-footer__logo svg { width: 42px; height: 42px; flex: 0 0 auto; }
.kw-footer__wordmark { line-height: 1; }
.kw-footer__wordmark strong { display: block; font-family: 'Poppins','Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: .5px; color: var(--kw-primary); }
.kw-footer__wordmark small { display: block; font-family: 'Poppins','Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: 3px; color: #fff; }

.kw-footer__desc { color: #aab3bd; line-height: 1.7; margin: 1.4rem 0 0; padding-right: 1rem; }

.kw-footer__social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.kw-footer__social a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; font-size: 1rem; transition: background .25s ease, transform .25s ease; }
.kw-footer__social a:hover { background: var(--kw-primary); transform: translateY(-3px); color: #fff; }

.kw-footer__links, .kw-footer__contact { list-style: none; padding: 0; margin: 0; }
.kw-footer__links li { margin-bottom: .72rem; }
.kw-footer__links a { color: #c9d0d9; display: inline-flex; align-items: center; gap: .5rem; font-size: .94rem; transition: color .2s ease; }
.kw-footer__links a i { color: var(--kw-primary); font-size: .72rem; }
.kw-footer__links a:hover { color: var(--kw-primary); }

.kw-footer__contact li { margin-bottom: .95rem; }
.kw-footer__contact a, .kw-footer__contact span { color: #c9d0d9; display: inline-flex; align-items: flex-start; gap: .6rem; font-size: .94rem; }
.kw-footer__contact i { color: var(--kw-primary); margin-top: .18rem; font-size: .95rem; }
.kw-footer__contact a:hover { color: var(--kw-primary); }

.kw-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 3rem; padding: 1.4rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .86rem; color: #aab3bd; }
.kw-footer__tagline { color: #8b95a1; }

@media (max-width: 575.98px) {
    .kw-footer__bottom { justify-content: center; text-align: center; }
}

/* Back-to-top button (orange, matches corporate design) */
#scrollTop {
    position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center; border: none; z-index: 1000; font-size: 1.2rem;
    background: var(--kw-primary); color: #fff; box-shadow: var(--kw-shadow-sm);
    opacity: 0; visibility: hidden; transform: translateY(12px); transition: .3s;
}
#scrollTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#scrollTop:hover { background: var(--kw-primary-dark); color: #fff; }

/* =====================================================================
   Blog / news listing (Career Path)
   ===================================================================== */
.kw-posts { display: flex; flex-direction: column; gap: 1.5rem; }
.kw-post {
    display: flex; gap: 1.3rem; background: #fff; border: 1px solid var(--kw-border);
    border-radius: 14px; overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kw-post:hover { transform: translateY(-3px); box-shadow: var(--kw-shadow-sm); border-color: var(--kw-primary); }
.kw-post__media {
    position: relative; flex: 0 0 190px; min-height: 158px; display: grid; place-items: center;
    text-decoration: none; color: rgba(255,255,255,.55);
    background: linear-gradient(150deg, var(--kw-primary), var(--kw-ink-2));
    background-size: cover; background-position: center;
}
.kw-post__media i { font-size: 2.4rem; }
.kw-post__cat {
    position: absolute; top: .7rem; left: .7rem; background: rgba(255,255,255,.93); color: var(--kw-ink-2);
    font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: .25rem .6rem; border-radius: 50px;
}
.kw-post__body { padding: 1.25rem 1.4rem 1.25rem 0; display: flex; flex-direction: column; flex: 1; }
.kw-post__meta { display: flex; gap: 1.1rem; font-size: .78rem; color: var(--kw-muted); margin-bottom: .5rem; }
.kw-post__meta i { color: var(--kw-primary); margin-right: .3rem; }
.kw-post__title { font-size: 1.15rem; font-weight: 800; margin: 0 0 .4rem; line-height: 1.3; }
.kw-post__title a { color: var(--kw-dark); text-decoration: none; }
.kw-post__title a:hover { color: var(--kw-primary); }
.kw-post__excerpt { color: var(--kw-muted); font-size: .92rem; line-height: 1.6; margin: 0 0 .85rem; }
.kw-post__more {
    margin-top: auto; align-self: flex-start; color: var(--kw-primary); font-weight: 700;
    font-size: .88rem; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.kw-post__more:hover { color: var(--kw-primary-dark); }
.kw-post__more i { transition: transform .2s ease; }
.kw-post:hover .kw-post__more i { transform: translateX(4px); }
@media (max-width: 575.98px) {
    .kw-post { flex-direction: column; }
    .kw-post__media { flex-basis: 170px; width: 100%; }
    .kw-post__body { padding: 1.25rem; }
}

/* Sidebar cards */
.kw-side { background: #fff; border: 1px solid var(--kw-border); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; }
.kw-side__title, .kw-side h3 { font-size: 1.05rem; font-weight: 800; color: var(--kw-dark); margin-bottom: 1rem; }
.kw-side__cats { list-style: none; padding: 0; margin: 0; }
.kw-side__cats li + li { border-top: 1px dashed var(--kw-border); }
.kw-side__cats a { display: flex; justify-content: space-between; align-items: center; padding: .62rem 0; color: var(--kw-text); font-size: .94rem; text-decoration: none; transition: color .2s ease; }
.kw-side__cats a:hover, .kw-side__cats a.is-active { color: var(--kw-primary); }
.kw-side__count { background: rgba(234,106,30,.10); color: var(--kw-primary); font-size: .72rem; font-weight: 800; padding: .1rem .55rem; border-radius: 50px; }
.kw-side__cats a.is-active .kw-side__count { background: var(--kw-primary); color: #fff; }
.kw-side--cta { background: linear-gradient(150deg, var(--kw-primary), var(--kw-primary-dark)); border: none; color: #fff; }
.kw-side--cta h3 { color: #fff; }
.kw-side--cta p { color: rgba(255,255,255,.9); font-size: .9rem; line-height: 1.6; margin-bottom: 1rem; }
.kw-side--cta .kw-btn-brand { background: #fff; color: var(--kw-primary); border-color: #fff; }
.kw-side--cta .kw-btn-brand:hover { background: rgba(255,255,255,.9); color: var(--kw-primary-dark); }

/* Empty state */
.kw-empty { text-align: center; padding: 3rem 1.5rem; background: var(--kw-surface); border-radius: 14px; }
.kw-empty i { font-size: 2.5rem; color: var(--kw-subtle); display: block; margin-bottom: .75rem; }

/* Pagination */
.kw-pagination .pagination { gap: .25rem; }
.kw-pagination .page-link { color: var(--kw-primary); border-radius: 8px; border-color: var(--kw-border); }
.kw-pagination .page-item.active .page-link { background: var(--kw-primary); border-color: var(--kw-primary); color: #fff; }
.kw-pagination .page-link:hover { background: var(--kw-surface); color: var(--kw-primary-dark); }

/* Sidebar: popular posts + tags */
.kw-side__posts { list-style: none; padding: 0; margin: 0; }
.kw-side__posts li + li { border-top: 1px dashed var(--kw-border); }
.kw-side__posts a { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 0; text-decoration: none; }
.kw-side__rank { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(234,106,30,.10); color: var(--kw-primary); font-weight: 800; font-size: .82rem; margin-top: .1rem; }
.kw-side__pt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.kw-side__pt-title { color: var(--kw-dark); font-weight: 700; font-size: .9rem; line-height: 1.35; transition: color .2s ease; }
.kw-side__posts a:hover .kw-side__pt-title { color: var(--kw-primary); }
.kw-side__pt-meta { color: var(--kw-muted); font-size: .74rem; }
.kw-side__pt-meta i { color: var(--kw-primary); }
.kw-side__dot { margin: 0 .15rem; }

.kw-side__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.kw-tag { display: inline-block; padding: .35rem .75rem; border-radius: 50px; background: var(--kw-surface); border: 1px solid var(--kw-border); color: var(--kw-muted); font-size: .8rem; font-weight: 600; text-decoration: none; transition: .2s ease; }
.kw-tag:hover { background: var(--kw-primary); border-color: var(--kw-primary); color: #fff; }

/* Home: Insights (latest posts) cards + Industry chips */
.kw-insight { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--kw-border); border-radius: 14px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.kw-insight:hover { transform: translateY(-4px); box-shadow: var(--kw-shadow-sm); border-color: var(--kw-primary); }
.kw-insight__media { position: relative; height: 172px; display: grid; place-items: center; text-decoration: none; color: rgba(255,255,255,.55); background: linear-gradient(150deg, var(--kw-primary), var(--kw-ink-2)); background-size: cover; background-position: center; }
.kw-insight__media i { font-size: 2.4rem; }
.kw-insight__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.kw-insight__title { font-size: 1.08rem; font-weight: 800; margin: .15rem 0 .5rem; line-height: 1.3; }
.kw-insight__title a { color: var(--kw-dark); text-decoration: none; }
.kw-insight__title a:hover { color: var(--kw-primary); }
.kw-insight__excerpt { color: var(--kw-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 .85rem; }
.kw-insight .kw-post__more { margin-top: auto; }

.kw-industry {
    display: flex; align-items: center; gap: .7rem; height: 100%; padding: 1rem 1.1rem;
    background: #fff; border: 1px solid var(--kw-border); border-radius: 12px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.kw-industry:hover { transform: translateY(-3px); border-color: var(--kw-primary); box-shadow: var(--kw-shadow-sm); }
.kw-industry i { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-size: 1.2rem; color: var(--kw-primary); background: rgba(234,106,30,.10); }
.kw-industry span { font-weight: 700; font-size: .9rem; color: var(--kw-dark); line-height: 1.25; }

/* Sidebar thumbnail (recent posts widget) */
.kw-side__thumb {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 9px; overflow: hidden;
    display: grid; place-items: center; color: rgba(255,255,255,.6); font-size: 1rem;
    background: linear-gradient(150deg, var(--kw-primary), var(--kw-ink-2));
    background-size: cover; background-position: center;
}
/* Logo fallback thumb — contain the wordmark on a soft panel (inline
   background-image supplies the logo) instead of an icon on a gradient. */
.kw-side__thumb--logo {
    background-color: var(--kw-surface-2, #faf6f2);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    background-origin: content-box; padding: 6px;
}

/* ===========================================================================
 * 16. Public-shell reconciliation.
 *
 *     This project's kiboframe::partials.public.top-nav ships its own
 *     `.utility-bar` (date + phone + socials + dashboard). The source site
 *     had no such bar — its contact strip is `.kw-topbar`, which this shell
 *     also renders. Left alone the two stack, giving the public pages two
 *     contact strips.
 *
 *     The nav partial is shared with other modules (Contact, Blog, Projects),
 *     so it is not edited here; this file is only loaded by
 *     kiboweb::templates.public, so hiding the duplicate is scoped to the
 *     KiboWeb pages and leaves every other public page untouched.
 * ======================================================================== */
.utility-bar { display: none !important; }

/* Public-page typography — the ported content CSS was authored against
   Plus Jakarta Sans; the font is loaded by kiboweb::templates.public. */
:root {
    --kw-font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --kw-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

#kw-main,
#app-content,
.kw-topbar,
.kw-footer {
    font-family: var(--kw-font-body);
}

/* The source site is a rounded system (10px); this project's admin shell is
   deliberately square (--border-radius: 0). Restore the rounded scale for the
   public pages only, so the warm brand does not sit on hard corners. */
#app-content .btn,
#app-content .card,
#app-content .form-control,
#app-content .form-select,
#app-content .input-group-text {
    border-radius: var(--kw-radius);
}

#app-content .btn.rounded-pill,
#app-content .kw-hero .btn {
    border-radius: 50px;
}

/* Signed-in session entry in the top strip (carried over from the framework's
   hidden .utility-bar — see section 16). */
.kw-topbar__dash {
    margin-left: 1.1rem;
    padding: .15rem .7rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}
.kw-topbar__dash:hover {
    background: var(--kw-primary);
    border-color: var(--kw-primary);
    color: #fff;
}

/* ===========================================================================
 * 17. Embedded KiboBlog widgets on marketing pages.
 *
 *     <x-recent-post-widget> ships markup (.sidebar-card, .sidebar-title,
 *     .recent-post*) that KiboBlog's post.css only partly styles — the card
 *     shell and title have no rules anywhere, so on the home page the widget
 *     rendered as a bare list beside the styled CTA card. These give it the
 *     same card treatment as .kw-side so the two columns read as a pair.
 * ======================================================================== */
.sidebar-card {
    background: #fff;
    border: 1px solid var(--kw-border);
    border-radius: 14px;
    padding: 1.5rem;
}

/* Full height ONLY in the home page's two-up row, where the widget is paired
   with a .h-100 CTA card and the row is align-items-stretch. It must not be on
   .sidebar-card itself: /news stacks three widgets in one flex-stretched
   column, so each would take the entire column height and the second and third
   would run off the bottom of the page and over the footer. */
.kw-blogwidget-col > .sidebar-card {
    height: 100%;
}

.sidebar-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--kw-dark);
    margin: 0 0 1.15rem;
}

/* Thumbnail fallback for posts with no featured image: the brand mark on a
   tinted tile. Selector is qualified with .recent-post-img to outrank
   `.recent-post-img img { object-fit: cover }` in post.css — `cover` is right
   for real photography but crops the edges off a logo. */
.recent-post-img img.news-image--placeholder {
    background: var(--kw-surface-tint);
    object-fit: contain;
    padding: 12px;
}

.recent-post-title a {
    color: var(--kw-dark);
    text-decoration: none;
    transition: color .2s ease;
}

.recent-post-title a:hover {
    color: var(--kw-primary);
}

.recent-post-date {
    color: var(--kw-text-soft);
    font-size: .8rem;
}

/* The CTA card sits beside the widget; match their heights so neither
   column floats in whitespace. */
.kw-side--cta {
    height: 100%;
}

/* Clear-search affordance inside the light search bar (kw-lightsearch).
   Sits beside .btn-search and only renders when a search is active. */
.kw-lightsearch .btn-search-clear {
    background: transparent;
    border: none;
    color: var(--kw-muted);
    padding: .5rem .9rem;
    border-radius: 50px;
}
.kw-lightsearch .btn-search-clear:hover {
    color: var(--kw-primary);
}