/* Msingi 2026 — shared editorial system for every internal page. */
:root {
    --mp-paper: #f4f1e9;
    --mp-paper-2: #ebe5da;
    --mp-ink: #1a1712;
    --mp-muted: #6f685e;
    --mp-wine: #8b191b;
    --mp-clay: #a54b3f;
    --mp-line: rgba(26, 23, 18, .14);
    --mp-serif: 'EB Garamond', Georgia, serif;
    --mp-sans: 'Open Sans', sans-serif;
    --mp-ease: cubic-bezier(.19, 1, .22, 1);
}

body:not(.page-home) { background: var(--mp-paper); color: var(--mp-ink); }
body:not(.page-home) #wrapper { background: var(--mp-paper); }
body:not(.page-home) section { position: relative; }

/* Full-bleed authentic project opener. */
body:not(.page-home) .page-banner {
    min-height: 100svh !important;
    display: flex;
    align-items: flex-end;
    padding: 0 0 clamp(64px, 10vh, 112px) !important;
    background-position: center;
    isolation: isolate;
    overflow: hidden;
    scroll-snap-align: start;
}
body:not(.page-home) .page-banner::before {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(12,9,6,.32) 0%, rgba(12,9,6,.06) 36%, rgba(12,9,6,.82) 100%),
        linear-gradient(90deg, rgba(12,9,6,.46), transparent 62%);
}
body:not(.page-home) .page-banner::after {
    content: "MSINGI / INTEGRATED ENGINEERING + DEVELOPMENT";
    position: absolute;
    right: clamp(22px, 4vw, 58px);
    bottom: 28px;
    color: rgba(255,255,255,.62);
    font: 600 9px/1 var(--mp-sans);
    letter-spacing: .3em;
}
body:not(.page-home) .page-banner h1 {
    max-width: 15ch;
    font: 400 clamp(44px, 6.2vw, 94px)/1.02 var(--mp-serif) !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
}
body:not(.page-home) .page-banner .subtitle {
    display: inline-flex;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

/* Each direct content section becomes a clean editorial chapter. */
body:not(.page-home) #wrapper > section:not(.page-banner) {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: clamp(70px, 10vh, 126px) !important;
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--mp-paper);
    color: var(--mp-ink);
}
body:not(.page-home) #wrapper > section:not(.page-banner):nth-of-type(odd) {
    background: var(--mp-paper-2);
}
body:not(.page-home) #wrapper > section > .container,
body:not(.page-home) #wrapper > section > .container-fluid { width: 100%; }

/* Replace the template's black slabs with warm, brand-led chapters. */
body:not(.page-home) #wrapper > section.bg-dark,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner) {
    background: #762023 !important;
    color: #fffaf2 !important;
}
body:not(.page-home) #wrapper > section.bg-dark h1,
body:not(.page-home) #wrapper > section.bg-dark h2,
body:not(.page-home) #wrapper > section.bg-dark h3,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner) h1,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner) h2,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner) h3 { color: #fffaf2 !important; }

body:not(.page-home) h2 {
    font-family: var(--mp-serif);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 66px);
    line-height: 1.05;
    letter-spacing: -.015em;
    text-wrap: balance;
}
body:not(.page-home) h3 { font-family: var(--mp-serif); font-weight: 400; }
body:not(.page-home) p { font-family: var(--mp-sans); font-weight: 300; line-height: 1.75; }
body:not(.page-home) .subtitle {
    color: var(--mp-wine) !important;
    font-family: var(--mp-sans);
}
body:not(.page-home) .section-dark .subtitle { color: #f1c9bd !important; }

/* Cards and project links: less template-like, more tactile. */
body:not(.page-home) .lux-card-light,
body:not(.page-home) .service-tile,
body:not(.page-home) .profile-card {
    border: 1px solid var(--mp-line);
    border-radius: 18px;
    background: rgba(255,255,255,.48);
    box-shadow: none;
    overflow: hidden;
    transition: transform .65s var(--mp-ease), box-shadow .65s var(--mp-ease), border-color .4s ease;
}
body:not(.page-home) .lux-card-light:hover,
body:not(.page-home) .service-tile:hover,
body:not(.page-home) .profile-card:hover {
    transform: translateY(-8px);
    border-color: rgba(139,25,27,.36);
    box-shadow: 0 28px 70px rgba(38,25,15,.13);
}
body:not(.page-home) .lux-gallery__item { border-radius: 16px; }
body:not(.page-home) .lux-gallery__item img { transition-duration: 1.4s; }
body:not(.page-home) .btn-main {
    border-radius: 999px;
    letter-spacing: .2em;
}

/* Spec bands are light glass strips unless they are the final wine CTA. */
body:not(.page-home) .no-top.no-bottom .faraji-stat,
body:not(.page-home) .no-top.no-bottom .de_count {
    border-color: rgba(255,255,255,.16) !important;
}

body:not(.page-home) footer {
    margin: 0 !important;
    background: #24181a !important;
    scroll-snap-align: start;
}
body:not(.page-home) .qualifier { position: fixed !important; }

@media (min-width: 992px) and (min-height: 721px) {
    html:not(.page-home) { scroll-snap-type: y proximity; }
}
@media (max-width: 991px), (max-height: 720px) {
    body:not(.page-home) #wrapper > section:not(.page-banner) {
        min-height: auto;
        overflow: visible;
    }
}
@media (max-width: 640px) {
    body:not(.page-home) .page-banner { min-height: 82svh !important; }
    body:not(.page-home) .page-banner::after { display: none; }
    body:not(.page-home) .page-banner h1 { font-size: clamp(36px, 11vw, 52px) !important; }
}

/* Remove template chrome: the top progress rule is enough orientation. */
.float-text,
.scrollbar-v { display: none !important; }

/* Editorial kicker, not a capsule. */
body:not(.page-home) .page-banner .subtitle {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 10px !important;
    letter-spacing: .32em !important;
}
body:not(.page-home) .page-banner .subtitle::before {
    content: "";
    width: 34px;
    height: 1px;
    background: #e3a7a2;
}

/* Image-preview cards keep the photograph dominant and readable. */
body:not(.page-home) .service-tile--image {
    min-height: clamp(390px, 48vw, 540px);
    border: 0 !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: none !important;
}
body:not(.page-home) .service-tile--image::after {
    background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(14,11,8,.24) 58%, rgba(14,11,8,.84) 100%) !important;
}
body:not(.page-home) .service-tile--image:hover::after {
    background: linear-gradient(180deg, transparent 0%, transparent 48%, rgba(14,11,8,.2) 66%, rgba(14,11,8,.78) 100%) !important;
}
body:not(.page-home) .service-tile--image:hover { background-size: 104% !important; }
body:not(.page-home) .service-tile--image .num {
    align-self: flex-start;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(255,255,255,.54);
    background: transparent !important;
}
body:not(.page-home) .profile-card__photo img { filter: none !important; opacity: 1 !important; }
body:not(.page-home) .profile-card::after,
body:not(.page-home) .profile-card__overlay {
    background: linear-gradient(180deg, transparent 24%, rgba(14,11,8,.82) 100%) !important;
}

/* Project preview links reveal their imagery instead of behaving like color tiles. */
.page-homes #completed a.hover > img,
.page-communities #lifestyle a.hover > img {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1.001);
    transition: transform 1s var(--mp-ease), filter .5s ease;
}
.page-homes #completed a.hover:hover > img,
.page-communities #lifestyle a.hover:hover > img { transform: scale(1.045); filter: saturate(1.04) contrast(1.02) !important; }

/* Interactive visual stories shared by the homepage and project pages. */
.mp-story-slider,
.mp-project-reel {
    position: relative;
    overflow: hidden;
    outline: none;
}
.mp-story-slider__track,
.mp-project-reel.mp-slider-ready {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.mp-story-slider__track::-webkit-scrollbar,
.mp-project-reel.mp-slider-ready::-webkit-scrollbar { display: none; }
.mp-story-slider__slide,
.mp-project-reel.mp-slider-ready > * {
    position: relative;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    scroll-snap-align: start;
    overflow: hidden;
}
.mp-story-slider__slide img,
.mp-project-reel.mp-slider-ready .lux-gallery__item img {
    display: block;
    width: 100%;
    height: min(72svh, 760px);
    object-fit: cover;
    transition: transform 1.2s var(--mp-ease);
}
.mp-story-slider__slide:hover img { transform: scale(1.025); }
.mp-story-slider__slide > span {
    position: absolute;
    left: clamp(18px, 3vw, 38px);
    top: clamp(18px, 3vw, 34px);   /* top corner — the filmstrip thumbs own the bottom-left (Jul 24: captions were hidden behind them) */
    bottom: auto;
    z-index: 2;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(15,12,9,.46);
    backdrop-filter: blur(10px);
    color: #fff;
    font: 600 9px/1 var(--mp-sans);
    letter-spacing: .25em;
    text-transform: uppercase;
}
.mp-slider-controls {
    position: absolute;
    z-index: 6;
    right: clamp(16px, 3vw, 36px);
    bottom: clamp(16px, 3vw, 32px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 11px;
    border-radius: 999px;
    background: rgba(15,12,9,.62);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    color: #fff;
}
.mp-slider-controls button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    cursor: pointer;
    transition: background .3s ease, transform .3s ease;
}
.mp-slider-controls button:hover { background: var(--mp-wine); transform: scale(1.08); }
.mp-slider-progress { width: clamp(48px, 7vw, 92px); height: 2px; background: rgba(255,255,255,.22); }
.mp-slider-progress i { display: block; width: 0; height: 100%; background: #fff; transition: width .5s var(--mp-ease); }
.mp-slider-count { min-width: 48px; font: 500 10px/1 var(--mp-sans); letter-spacing: .16em; }
.mp-project-reel + .mp-slider-controls { position: absolute; }
.mp-community-progress { border-radius: 22px; box-shadow: 0 30px 80px rgba(35,24,14,.16); }

/* Each destination gets its own rhythm instead of one repeated template. */
.page-practice #wrapper > section:not(.page-banner):nth-of-type(even) .row.align-items-center,
.page-homes #wrapper > section:not(.page-banner) .row.align-items-center {
    gap: clamp(18px, 3vw, 44px);
}
.page-practice .service-tile { min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end; }
.page-practice #wrapper > section::after {
    content: attr(id);
    position: absolute;
    right: 2vw;
    bottom: -2vw;
    font: 400 clamp(70px, 12vw, 180px)/1 var(--mp-serif);
    color: rgba(139,25,27,.045);
    text-transform: uppercase;
    pointer-events: none;
}
.page-communities #family { background: linear-gradient(145deg, #eee7da, #f8f5ee) !important; }
.page-homes #completed .lux-card,
.page-homes #completed .profile-card { border-radius: 24px; }
.page-contact form,
.page-contact .contact-form {
    padding: clamp(24px, 4vw, 54px);
    border-radius: 24px;
    background: rgba(255,255,255,.58);
    border: 1px solid var(--mp-line);
    box-shadow: 0 28px 80px rgba(38,25,15,.1);
}
.page-project-faraji .page-banner,
.page-project-tatu .page-banner,
.page-project-thome .page-banner { background-attachment: fixed; }

@media (max-width: 767px) {
    .mp-story-slider__slide img,
    .mp-project-reel.mp-slider-ready .lux-gallery__item img { height: 62svh; }
    .mp-slider-progress { display: none; }
    .mp-slider-controls { left: 14px; right: 14px; justify-content: space-between; }
    .page-project-faraji .page-banner,
    .page-project-tatu .page-banner,
    .page-project-thome .page-banner { background-attachment: scroll; }
}

/* ============================================================
   ART-DIRECTED V3 — asymmetric, media-first, deliberately varied
   ============================================================ */
body:not(.page-home) #wrapper > section:not(.page-banner) {
    min-height: auto;
}

/* Content determines section height; only heroes and galleries own a viewport. */
body:not(.page-home) #wrapper > section:not(.page-banner):not(.p-0) {
    padding-block: clamp(68px, 8vw, 108px) !important;
}
body:not(.page-home) #wrapper > section.no-top.no-bottom {
    min-height: auto !important;
    padding-block: clamp(34px, 4vw, 56px) !important;
}
body:not(.page-home) #wrapper > section.p-0 {
    min-height: auto !important;
    padding: 0 !important;
}
body:not(.page-home) #wrapper > section.p-0:has(.mp-project-reel) {
    min-height: min(82svh, 860px) !important;
    display: block;
}
body:not(.page-home) #wrapper > section.text-center.section-dark {
    min-height: auto;
    padding-block: clamp(76px, 9vw, 124px) !important;
}
body:not(.page-home) #wrapper > section.bg-dark,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner) {
    background: var(--mp-paper-2) !important;
    color: var(--mp-ink) !important;
}
body:not(.page-home) #wrapper > section.bg-dark h1,
body:not(.page-home) #wrapper > section.bg-dark h2,
body:not(.page-home) #wrapper > section.bg-dark h3,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner) h1,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner) h2,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner) h3 { color: var(--mp-ink) !important; }
body:not(.page-home) #wrapper > section.text-center.section-dark {
    background:
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(135deg, #731f23, #942d2d) !important;
    color: #fff !important;
}
body:not(.page-home) #wrapper > section.text-center.section-dark h2,
body:not(.page-home) #wrapper > section.text-center.section-dark h3 { color: #fff !important; }

/* Eliminate the generic floating white card language. */
body:not(.page-home) .service-tile:not(.service-tile--image),
body:not(.page-home) .lux-card-light {
    border: 0;
    border-top: 1px solid var(--mp-line);
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-size: cover;
    padding-inline: 0;
    box-shadow: none;
}
body:not(.page-home) .service-tile:not(.service-tile--image):hover,
body:not(.page-home) .lux-card-light:hover {
    box-shadow: none;
    border-color: var(--mp-wine);
}

/* Practice: six capabilities behave like an expanding architectural folio. */
@media (min-width: 992px) {
    .page-practice #wrapper > section:nth-of-type(3) .row.g-4 {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
    }
    .page-practice #wrapper > section:nth-of-type(3) .row.g-4 > * {
        flex: 1 1 0;
        width: auto;
        padding: 0;
        transition: flex .8s var(--mp-ease);
    }
    .page-practice #wrapper > section:nth-of-type(3) .row.g-4 > *:hover { flex: 2.6 1 0; }
    .page-practice .service-tile--image {
        min-height: 500px;
        border: 0;
        border-radius: 0;
        padding: 28px 20px;
    }
    .page-practice .service-tile--image p {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(16px);
        transition: max-height .6s var(--mp-ease), opacity .45s ease, transform .6s var(--mp-ease);
    }
    .page-practice .service-tile--image:hover p { max-height: 180px; opacity: 1; transform: none; }
}
.page-practice .row.align-items-center img {
    min-height: 54svh;
    object-fit: cover;
    clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 100%);
}

/* Communities: live development panels with text revealed over the work. */
.page-communities .mp-community-card {
    min-height: 460px;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 48px);
    justify-content: flex-end;
}
.page-communities .mp-community-card::before {
    background: linear-gradient(180deg, transparent 20%, rgba(16,12,9,.86) 100%);
}
.page-communities .mp-community-card h3 { font-size: clamp(34px, 4vw, 54px); color: #fff !important; }
.page-communities .mp-community-card p { max-width: 52ch; color: rgba(255,255,255,.72); }
.page-communities #lifestyle .container-fluid a { border-radius: 0 !important; }

/* Homes: two hero commissions, then a horizontal project index. */
@media (min-width: 992px) {
    .page-homes #completed > .container > .row.g-4.mb-5 > :first-child { width: 61%; }
    .page-homes #completed > .container > .row.g-4.mb-5 > :last-child { width: 39%; margin-top: 9%; }
    .page-homes #completed > .container > .row.g-4:last-child {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-bottom: 24px;
    }
    .page-homes #completed > .container > .row.g-4:last-child > * {
        flex: 0 0 min(38vw, 430px);
        scroll-snap-align: start;
    }
}
.page-homes #completed > .container > .row.g-4:last-child .service-tile {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Begin: the form is a calm editorial surface, not a boxed widget. */
.page-contact form,
.page-contact .contact-form {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
.page-contact .form-control {
    border: 0 !important;
    border-bottom: 1px solid rgba(26,23,18,.3) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 18px 2px !important;
    box-shadow: none !important;
}
.page-contact .form-control:focus { border-color: var(--mp-wine) !important; }
.page-contact iframe { filter: grayscale(1) contrast(.9); transition: filter .6s ease; }
.page-contact iframe:hover { filter: none; }

/* Project pages: image reel owns the viewport; details stay minimal. */
.page-project-faraji .mp-project-reel,
.page-project-tatu .mp-project-reel,
.page-project-thome .mp-project-reel { background: #ddd5c7; }
.page-project-faraji .mp-project-reel .lux-gallery__item,
.page-project-tatu .mp-project-reel .lux-gallery__item,
.page-project-thome .mp-project-reel .lux-gallery__item { border-radius: 0; }

@media (max-width: 991px) {
    body:not(.page-home) #wrapper > section:not(.page-banner) { min-height: auto; }
    .page-practice .row.align-items-center img { clip-path: none; min-height: 360px; }
}

/* Gallery filmstrip: visible sequence, active frame and next-frame peek. */
.mp-slider-thumbs {
    position: absolute;
    z-index: 7;
    left: clamp(16px, 3vw, 36px);
    bottom: clamp(16px, 3vw, 32px);
    display: flex;
    gap: 6px;
    max-width: min(52%, 560px);
    padding: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 2px;
    background: rgba(15,12,9,.48);
    backdrop-filter: blur(12px);
}
.mp-slider-thumbs::-webkit-scrollbar { display: none; }
.mp-slider-thumbs button {
    flex: 0 0 48px;
    width: 48px;
    height: 38px;
    padding: 0;
    border: 0;
    opacity: .5;
    background-color: #e8e1d6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: opacity .3s ease, transform .35s var(--mp-ease);
}
.mp-slider-thumbs button img { width: 100%; height: 100%; object-fit: contain; background: #e8e1d6; }
.mp-slider-thumbs button:hover { opacity: .85; transform: translateY(-3px); }
.mp-slider-thumbs button.is-active { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.mp-project-reel-shell { overflow: hidden; background: #ddd5c7; }

/* One footer treatment everywhere: light, calm and unmistakably Msingi. */
body footer.section-dark {
    margin: 0 !important;
    background: #eee8de !important;
    color: var(--mp-ink) !important;
    border-top: 1px solid rgba(26,23,18,.12);
}
body footer.section-dark h1,
body footer.section-dark h2,
body footer.section-dark h3,
body footer.section-dark h4,
body footer.section-dark p,
body footer.section-dark .fs-16 { color: var(--mp-ink) !important; }
body footer.section-dark .op-7 { opacity: .66; }
body footer.section-dark .id-color { color: var(--mp-wine) !important; }
body footer.section-dark .subfooter {
    background: #e5ded2 !important;
    color: var(--mp-ink) !important;
    border-top: 1px solid rgba(26,23,18,.1);
}
body footer.section-dark .social-icons a,
body footer.section-dark .social-icons i { color: var(--mp-ink) !important; }
@media (min-width: 992px) {
    .mp-project-reel-shell .mp-project-reel > * {
        flex-basis: 88% !important;
        max-width: 88% !important;
        margin-right: 10px;
    }
    .mp-project-reel-shell .mp-project-reel .lux-gallery__item img { height: 82svh; }
    .mp-project-reel-shell .mp-slider-thumbs {
        left: 22px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        flex-direction: column;
        max-width: 62px;
        max-height: 54svh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
@media (max-width: 767px) {
    .mp-slider-thumbs { max-width: calc(100% - 28px); right: 14px; bottom: 72px; }
    .mp-slider-thumbs button { flex-basis: 42px; width: 42px; height: 32px; }
}

/* Galleries stay inside the usable viewport beneath the navigation. */
.mp-project-reel-shell { position: relative; width: 100%; height: min(68svh, 680px); min-height: 440px; }
body:not(.page-home) #wrapper > section.p-0:has(.mp-project-reel) { min-height: auto !important; }
.mp-project-reel-shell .mp-project-reel,
.mp-project-reel-shell .mp-project-reel > *,
.mp-project-reel-shell .lux-gallery__item { height: 100%; }
.mp-project-reel-shell .mp-project-reel .lux-gallery__item img { height: 100% !important; max-height: none !important; object-fit: cover; }
.mp-community-progress { height: min(60svh, 610px); }
.mp-community-progress .mp-story-slider__track,
.mp-community-progress .mp-story-slider__slide,
.mp-community-progress img { height: 100% !important; }

/* About Msingi: balanced editorial sections and reliably legible image cards. */
.page-practice #wrapper > section::after { content: none !important; }
.page-practice #wrapper > section:not(.page-banner) {
    overflow: hidden;
}
.page-practice #wrapper > section:not(.page-banner) > .container {
    width: min(1180px, calc(100% - 40px));
}
.page-practice #wrapper > section:nth-of-type(2) .row,
.page-practice #building .row,
.page-practice #civil .row,
.page-practice #gated .row {
    align-items: stretch !important;
}
.page-practice #wrapper > section:nth-of-type(2) [class*="col-lg-"],
.page-practice #building [class*="col-lg-"],
.page-practice #civil [class*="col-lg-"],
.page-practice #gated [class*="col-lg-"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-practice .about-intro-media img,
.page-practice #building img,
.page-practice #civil img,
.page-practice #gated img {
    width: 100%;
    height: clamp(390px, 48vw, 590px);
    min-height: 0 !important;
    object-fit: cover;
    clip-path: none !important;
    border-radius: 18px;
}
.page-practice .service-tile--image {
    position: relative;
    isolation: isolate;
    min-height: 440px !important;
    padding: clamp(24px, 3vw, 38px) !important;
    border-radius: 16px !important;
    color: #fff !important;
}
.page-practice .service-tile--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10,8,7,.08) 0%, rgba(10,8,7,.42) 48%, rgba(10,8,7,.94) 100%) !important;
}
.page-practice .service-tile--image h3,
.page-practice .service-tile--image p,
.page-practice .service-tile--image .num {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.38);
}
.page-practice .service-tile--image p {
    max-width: 34ch;
    margin-bottom: 0;
    opacity: .9 !important;
}
.page-practice #credentials .profile-card {
    min-height: 540px;
}
.page-practice #credentials .profile-card::after,
.page-practice #credentials .profile-card__overlay {
    background: linear-gradient(180deg, rgba(10,8,7,.08) 10%, rgba(10,8,7,.94) 100%) !important;
}
.page-practice #credentials .profile-card__overlay,
.page-practice #credentials .profile-card__overlay * {
    color: #fff !important;
}
@media (min-width: 992px) {
    .page-practice #wrapper > section:nth-of-type(3) .row.g-4 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px !important;
    }
    .page-practice #wrapper > section:nth-of-type(3) .row.g-4 > * {
        width: auto !important;
        padding: 0 !important;
    }
    .page-practice #wrapper > section:nth-of-type(3) .row.g-4 > *:hover { flex: none; }
    .page-practice .service-tile--image p {
        max-height: none !important;
        opacity: .9 !important;
        overflow: visible !important;
        transform: none !important;
    }
}
@media (max-width: 767px) {
    .page-practice #wrapper > section:not(.page-banner) > .container { width: calc(100% - 28px); }
    .page-practice .service-tile--image { min-height: 390px !important; }
}

/* Mega menu: text on the LEFT, photo on the RIGHT (Jul 24 review — swap
   so hovering the link list doesn't fight the imagery). */
.msingi-mega__inner { grid-template-columns: 1.4fr 1.1fr !important; }
.msingi-mega__list { grid-column: 1 !important; }
.msingi-mega__preview { grid-column: 2 !important; }

/* Mega-menu icons replace ambiguous index marks. */
.msingi-mega__num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    color: rgba(255,255,255,.78) !important;
    font-size: 15px !important;
}
.msingi-mega__link:hover .msingi-mega__num,
.msingi-mega__link.is-active .msingi-mega__num {
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.1);
    color: #fff !important;
}

/* Full editorial destinations used by the mega menu. */
.mp-editorial-hero::before {
    background: linear-gradient(90deg, rgba(15,11,9,.84) 0%, rgba(15,11,9,.42) 52%, rgba(15,11,9,.12) 100%) !important;
}
.mp-editorial-body img {
    height: min(64svh, 650px);
    object-fit: cover;
    border-radius: 20px;
}
.mp-editorial-facts {
    padding-block: clamp(48px, 6vw, 82px) !important;
    background: var(--mp-paper-2);
}
.mp-editorial-fact {
    height: 100%;
    padding: 26px 0;
    border-top: 1px solid var(--mp-line);
}
.mp-editorial-fact span {
    color: var(--mp-wine);
    font: 600 10px/1 var(--mp-sans);
    letter-spacing: .18em;
}
.mp-editorial-fact h3 { margin: 24px 0 0; }

/* About Msingi: architectural composition, controlled asymmetry and movement. */
.page-practice .about-hero {
    min-height: min(88svh, 900px) !important;
    background-position: center 44%;
}
.page-practice .about-hero::before {
    background:
        linear-gradient(90deg, rgba(12,9,8,.88) 0%, rgba(12,9,8,.48) 48%, rgba(12,9,8,.12) 76%),
        linear-gradient(180deg, transparent 58%, rgba(12,9,8,.55) 100%) !important;
}
.about-hero__grid {
    min-height: min(88svh, 900px);
    padding: 150px 0 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: end;
    gap: 70px;
}
.about-hero__copy h1 { font-size: clamp(56px, 8vw, 122px) !important; max-width: 9ch; }
.about-hero__index {
    border-top: 1px solid rgba(255,255,255,.5);
    color: #fff;
}
.about-hero__index > div {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255,255,255,.22);
}
.about-hero__index strong { font: 400 24px/1 var(--mp-serif); }
.about-hero__index span { font: 500 9px/1.4 var(--mp-sans); letter-spacing: .16em; text-transform: uppercase; opacity: .72; }

.page-practice .about-intro { padding-block: clamp(90px, 11vw, 150px) !important; }
.about-intro__copy { padding-right: clamp(10px, 4vw, 65px); }
.about-intro__copy h2 { font-size: clamp(42px, 5.2vw, 76px) !important; }
.about-intro-media { position: relative; display: block !important; padding-bottom: 76px; }
.about-intro-media__main { overflow: hidden; margin-left: 8%; }
.page-practice .about-intro-media__main img {
    height: min(64svh, 680px) !important;
    border-radius: 0 !important;
    transition: transform 1.1s var(--mp-ease);
}
.about-intro-media:hover .about-intro-media__main img { transform: scale(1.025); }
.about-intro-media__detail {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(43%, 290px);
    padding: 8px 8px 14px;
    background: var(--mp-paper);
    box-shadow: 0 24px 70px rgba(35,24,14,.18);
}
.page-practice .about-intro-media__detail img { height: 180px !important; min-height: 0 !important; border-radius: 0 !important; object-fit: cover; }
.about-intro-media__detail span { display: block; padding: 12px 8px 2px; font: 600 9px/1.4 var(--mp-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--mp-ink); }

.page-practice .about-capabilities {
    background: #7f2024 !important;
    color: #fff !important;
}
.page-practice .about-capabilities h2,
.page-practice .about-capabilities p { color: #fff !important; }
.about-capabilities__grid .service-tile--image { min-height: 480px !important; }
.about-capabilities__grid > *:nth-child(1),
.about-capabilities__grid > *:nth-child(6) { width: 50%; }
.about-capabilities__grid > *:nth-child(2),
.about-capabilities__grid > *:nth-child(3),
.about-capabilities__grid > *:nth-child(4),
.about-capabilities__grid > *:nth-child(5) { width: 25%; }
.about-capabilities__grid .service-tile--image {
    filter: saturate(.82);
    transition: transform .7s var(--mp-ease), filter .6s ease, background-size .8s var(--mp-ease);
}
.about-capabilities__grid .service-tile--image:hover { filter: saturate(1.06); transform: translateY(-7px); }

.page-practice .about-discipline { padding-block: clamp(78px, 10vw, 138px) !important; }
.page-practice .about-discipline:nth-of-type(odd) { background: #e9e1d4 !important; }
.about-discipline__media { position: relative; overflow: visible; }
.page-practice .about-discipline__media img {
    height: min(68svh, 680px) !important;
    border-radius: 0 !important;
    transition: transform .9s var(--mp-ease), clip-path .9s var(--mp-ease);
    clip-path: inset(0 7% 0 0) !important;
}
.page-practice .about-discipline--civil .about-discipline__media img { clip-path: inset(0 0 0 7%) !important; }
.about-discipline__media:hover img { transform: scale(.985); clip-path: inset(0) !important; }
.about-discipline__marker {
    position: absolute;
    right: 0;
    top: 32px;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    background: var(--mp-wine);
    color: #fff;
    font: 400 28px/1 var(--mp-serif);
}
.about-discipline--civil .about-discipline__marker { right: auto; left: 0; }
.about-discipline__copy { padding-inline: clamp(12px, 3vw, 50px); }
.about-discipline__copy h2 { font-size: clamp(40px, 4.7vw, 68px) !important; }
.about-discipline__copy p { max-width: 48ch; }

.page-practice .about-credentials { background: #191415 !important; color: #fff !important; }
.page-practice .about-credentials h2,
.page-practice .about-credentials p { color: #fff !important; }
.page-practice .about-credentials .profile-card { border-radius: 0 !important; }

@media (min-width: 992px) {
    .page-practice .about-capabilities .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    .page-practice .about-capabilities .row.g-4 > * { padding: 5px !important; flex: none !important; }
}
@media (max-width: 991px) {
    .about-hero__grid { grid-template-columns: 1fr; gap: 42px; padding-top: 130px; }
    .about-hero__index { width: min(100%, 430px); }
    .about-capabilities__grid > * { width: 50% !important; }
    .about-intro-media__main { margin-left: 0; }
}
@media (max-width: 575px) {
    .about-hero__grid { min-height: 82svh; padding-bottom: 42px; }
    .about-capabilities__grid > * { width: 100% !important; }
    .about-capabilities__grid .service-tile--image { min-height: 410px !important; }
    .about-intro-media { padding-bottom: 58px; }
    .about-intro-media__detail { width: 58%; }
    .page-practice .about-intro-media__detail img { height: 130px !important; }
    .about-discipline__marker { width: 62px; height: 62px; }
}

/* About layout correction: strict grids prevent wrapped columns and hanging space. */
.page-practice #wrapper > section.about-capabilities {
    background: #7f2024 !important;
    color: #fff !important;
}
.page-practice #wrapper > section.about-capabilities h2,
.page-practice #wrapper > section.about-capabilities h3,
.page-practice #wrapper > section.about-capabilities p { color: #fff !important; }
.page-practice #wrapper > section.about-capabilities .subtitle { color: #f3c8be !important; }

.page-practice #wrapper > section.about-discipline .row.align-items-center {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
}
.page-practice #wrapper > section.about-discipline .row.align-items-center > * {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}
.page-practice #wrapper > section.about-discipline .about-discipline__media { min-height: 580px; }
.page-practice #wrapper > section.about-discipline .about-discipline__media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 580px !important;
    clip-path: none !important;
}
.page-practice #wrapper > section.about-discipline .about-discipline__copy {
    min-height: 580px;
    padding: clamp(48px, 6vw, 92px) !important;
    justify-content: center;
    background: #f5f1e9;
}
.page-practice #wrapper > section.about-discipline--civil .row.align-items-center {
    grid-template-columns: minmax(340px, .85fr) minmax(0, 1.35fr);
}
.page-practice #wrapper > section.about-discipline--civil .about-discipline__media { grid-column: 2; grid-row: 1; }
.page-practice #wrapper > section.about-discipline--civil .about-discipline__copy { grid-column: 1; grid-row: 1; background: #e8dfd1; }
.page-practice #wrapper > section.about-discipline .about-discipline__marker { top: 28px; right: 28px; }
.page-practice #wrapper > section.about-discipline--civil .about-discipline__marker { left: 28px; right: auto; }
.page-practice #wrapper > section.about-discipline .about-discipline__copy h2 {
    max-width: 9ch;
    margin-bottom: 28px;
}
.page-practice #wrapper > section.about-discipline .about-discipline__copy p { font-size: 16px; }

.page-practice #wrapper > section.about-credentials {
    background: #191415 !important;
    color: #fff !important;
}
.page-practice #wrapper > section.about-credentials h2,
.page-practice #wrapper > section.about-credentials h3,
.page-practice #wrapper > section.about-credentials p { color: #fff !important; }
.page-practice #wrapper > section.about-credentials .subtitle { color: #f3c8be !important; }

.page-practice .about-intro > .container > .row {
    display: grid;
    grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
    align-items: center;
    gap: clamp(48px, 7vw, 110px);
    margin: 0;
}
.page-practice .about-intro > .container > .row > * { width: 100%; max-width: none; padding: 0; }
.page-practice .about-intro__copy p { font-size: 16px; max-width: 48ch; }
.page-practice .about-intro-media__main { margin-left: 0; }

@media (max-width: 991px) {
    .page-practice #wrapper > section.about-discipline .row.align-items-center,
    .page-practice #wrapper > section.about-discipline--civil .row.align-items-center,
    .page-practice .about-intro > .container > .row {
        grid-template-columns: 1fr !important;
    }
    .page-practice #wrapper > section.about-discipline--civil .about-discipline__media,
    .page-practice #wrapper > section.about-discipline--civil .about-discipline__copy {
        grid-column: 1;
    }
    .page-practice #wrapper > section.about-discipline--civil .about-discipline__media { grid-row: 1; }
    .page-practice #wrapper > section.about-discipline--civil .about-discipline__copy { grid-row: 2; }
    .page-practice #wrapper > section.about-discipline .about-discipline__media,
    .page-practice #wrapper > section.about-discipline .about-discipline__media img { min-height: 460px !important; }
    .page-practice #wrapper > section.about-discipline .about-discipline__copy { min-height: auto; }
}
@media (max-width: 575px) {
    .page-practice #wrapper > section.about-discipline .about-discipline__media,
    .page-practice #wrapper > section.about-discipline .about-discipline__media img { min-height: 340px !important; }
    .page-practice #wrapper > section.about-discipline .about-discipline__copy { padding: 44px 24px !important; }
}

/* Interactive capability ledger. */
.page-practice #wrapper > section.about-capabilities {
    background: #742126 !important;
    padding-block: clamp(82px, 9vw, 132px) !important;
}
.about-ledger { border-top: 1px solid rgba(255,255,255,.3); }
.about-ledger details { border-bottom: 1px solid rgba(255,255,255,.24); }
.about-ledger summary {
    min-height: 92px;
    display: grid;
    grid-template-columns: 58px minmax(220px, .8fr) 1fr 28px;
    align-items: center;
    gap: 22px;
    list-style: none;
    cursor: pointer;
    color: #fff;
}
.about-ledger summary::-webkit-details-marker { display: none; }
.about-ledger summary::after { content: "+"; font: 300 28px/1 var(--mp-sans); text-align: right; transition: transform .35s ease; }
.about-ledger details[open] summary::after { transform: rotate(45deg); }
.about-ledger summary span { font: 600 9px/1 var(--mp-sans); letter-spacing: .16em; opacity: .58; }
.about-ledger summary strong { font: 400 clamp(24px, 2.5vw, 38px)/1.05 var(--mp-serif); }
.about-ledger summary em { font: 500 10px/1.4 var(--mp-sans); letter-spacing: .15em; text-transform: uppercase; opacity: .68; font-style: normal; }
.about-ledger__reveal {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) minmax(240px, .65fr);
    gap: clamp(30px, 5vw, 74px);
    align-items: end;
    padding: 0 0 38px 80px;
}
.about-ledger__image {
    min-height: 330px;
    background-image: var(--ledger-image);
    background-size: cover;
    background-position: center;
    animation: ledgerReveal .65s var(--mp-ease) both;
}
.about-ledger__reveal p { max-width: 38ch; margin: 0 0 8px; font-size: 16px; color: rgba(255,255,255,.82) !important; }
@keyframes ledgerReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* The three disciplines are full compositions, not cards floating in whitespace. */
.page-practice #wrapper > section.about-discipline { padding: 0 !important; }
.page-practice #wrapper > section.about-discipline > .container { width: 100% !important; max-width: none !important; padding: 0 !important; }
.page-practice #wrapper > section.about-discipline .about-discipline__media,
.page-practice #wrapper > section.about-discipline .about-discipline__copy { min-height: min(76svh, 760px); }
.page-practice #wrapper > section.about-discipline .about-discipline__media img { min-height: min(76svh, 760px) !important; }

@media (max-width: 767px) {
    .about-ledger summary { grid-template-columns: 36px 1fr 24px; min-height: 82px; gap: 12px; }
    .about-ledger summary em { display: none; }
    .about-ledger__reveal { grid-template-columns: 1fr; padding: 0 0 28px 48px; gap: 18px; }
    .about-ledger__image { min-height: 240px; }
}

/* Final About palette: independent of legacy light and dark utilities. */
body.page-practice #wrapper section.about-capabilities {
    background-color: #7d2025 !important;
    background-image: linear-gradient(135deg, #711b20 0%, #942d30 100%) !important;
    color: #fff !important;
}
body.page-practice #wrapper section.about-capabilities .container,
body.page-practice #wrapper section.about-capabilities h2,
body.page-practice #wrapper section.about-capabilities h3,
body.page-practice #wrapper section.about-capabilities p,
body.page-practice #wrapper section.about-capabilities strong,
body.page-practice #wrapper section.about-capabilities em,
body.page-practice #wrapper section.about-capabilities span { color: #fff !important; }
body.page-practice #wrapper section.about-capabilities .subtitle { color: #f2c7bd !important; }
body.page-practice #wrapper section.about-capabilities .op-7 { opacity: .78 !important; }

body.page-practice #wrapper section.about-discipline .about-discipline__copy {
    background: #f2ede4 !important;
    color: #181514 !important;
}
body.page-practice #wrapper section.about-discipline--civil .about-discipline__copy { background: #e7ddcf !important; }
body.page-practice #wrapper section.about-discipline .about-discipline__copy h2,
body.page-practice #wrapper section.about-discipline .about-discipline__copy h3,
body.page-practice #wrapper section.about-discipline .about-discipline__copy p { color: #181514 !important; }
body.page-practice #wrapper section.about-discipline .about-discipline__copy .subtitle { color: #8b191b !important; }
body.page-practice #wrapper section.about-discipline .about-discipline__copy .op-7 { color: #4e4943 !important; opacity: 1 !important; }

body.page-practice #wrapper section.about-credentials {
    background-color: #4f171a !important;
    background-image: linear-gradient(145deg, #431315, #6f2024) !important;
    color: #fff !important;
    padding-block: clamp(82px, 9vw, 132px) !important;
}
body.page-practice #wrapper section.about-credentials h2,
body.page-practice #wrapper section.about-credentials h3,
body.page-practice #wrapper section.about-credentials p,
body.page-practice #wrapper section.about-credentials .profile-card__overlay,
body.page-practice #wrapper section.about-credentials .profile-card__overlay * { color: #fff !important; }
body.page-practice #wrapper section.about-credentials .subtitle,
body.page-practice #wrapper section.about-credentials .profile-card__role { color: #f2c7bd !important; }
body.page-practice #wrapper section.about-credentials .op-7 { opacity: .8 !important; }

.page-practice .about-intro-media { padding-bottom: 0 !important; }
.page-practice .about-intro-media__main { height: min(66svh, 680px); }
.page-practice .about-intro-media__main img { width: 100%; height: 100% !important; object-fit: cover; }

@media (max-width: 991px) {
    body.page-practice #wrapper section.about-capabilities,
    body.page-practice #wrapper section.about-credentials { padding-block: 72px !important; }
    .page-practice .about-intro-media__main { height: 480px; }
}
@media (max-width: 575px) {
    .page-practice .about-intro-media__main { height: 340px; }
}

/* Converted dark sections: the template's light-on-dark text must become
   ink-on-paper everywhere, not just headings. */
body:not(.page-home) #wrapper > section.bg-dark p,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner):not(.text-center) p,
body:not(.page-home) #wrapper > section.bg-dark .text-light,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner):not(.text-center) .text-light {
    color: var(--mp-ink) !important;
}
body:not(.page-home) #wrapper > section.bg-dark .op-7,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner):not(.text-center) .op-7 {
    color: var(--mp-muted) !important;
    opacity: 1 !important;
}
body:not(.page-home) #wrapper > section.bg-dark .subtitle,
body:not(.page-home) #wrapper > section.section-dark:not(.page-banner):not(.text-center) .subtitle {
    color: var(--mp-wine) !important;
}
/* ...but text sitting on top of a photograph stays white and readable. */
body:not(.page-home) #wrapper > section a.hover .text-light,
body:not(.page-home) #wrapper > section a.hover h2,
body:not(.page-home) #wrapper > section a.hover p,
body:not(.page-home) #wrapper > section a.hover .subtitle {
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
body:not(.page-home) #wrapper > section a.hover .op-9 { opacity: 1 !important; }

/* Photo-overlay community cards: guarantee legibility on any photo. */
.mp-community-card { isolation: isolate; }
.mp-community-card::before {
    background: linear-gradient(180deg, rgba(16, 12, 9, 0.05) 0%, rgba(16, 12, 9, 0.45) 45%, rgba(16, 12, 9, 0.92) 100%) !important;
}
.page-communities .mp-community-card h3,
.page-communities .mp-community-card p,
.page-communities .mp-community-card .num {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.page-communities .mp-community-card p { opacity: .95 !important; }

@media (max-width: 767px) {
    /* Wide feature banners become taller, readable cards on phones. */
    .page-communities #lifestyle a.hover img { aspect-ratio: 4 / 3.4 !important; }
    .page-communities #lifestyle a.hover .p-30 { padding: 18px !important; }
    .page-communities #lifestyle a.hover h2 { font-size: 24px !important; }
    .page-communities #lifestyle a.hover p { font-size: 13px !important; }
    .page-communities #lifestyle a.hover .btn-main { display: none; }
    .mp-community-card { min-height: 400px !important; }
}

/* Form flash — a proper success / error card. */
.mp-flash {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 26px;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid rgba(26, 23, 18, .12);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(38, 25, 15, .1);
    animation: mpFlashIn .6s var(--mp-ease) both;
}
@keyframes mpFlashIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mp-flash__icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2e7d4f;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.mp-flash strong {
    display: block;
    font: 400 19px/1.3 var(--mp-serif);
    color: var(--mp-ink);
    margin-bottom: 4px;
}
.mp-flash p { margin: 0; font: 300 14px/1.65 var(--mp-sans); color: var(--mp-muted); }
.mp-flash--error .mp-flash__icon { background: var(--mp-wine); }

/* Compact editorial enquiry action — not a chat widget. */
body .qualifier-trigger {
    position: fixed !important; right: clamp(16px, 2vw, 28px) !important; bottom: clamp(16px, 2vw, 28px) !important; left: auto !important;
    min-width: 0 !important; width: auto !important; height: 52px !important; padding: 5px 5px 5px 20px !important; gap: 18px !important;
    border: 1px solid rgba(26,23,18,.18) !important; border-radius: 2px !important;
    background: rgba(248,245,238,.92) !important; color: var(--mp-ink) !important;
    box-shadow: 0 12px 34px rgba(25,17,12,.14) !important; backdrop-filter: blur(14px) !important; overflow: hidden;
}
body .qualifier-trigger::before,
body .qualifier-trigger::after,
body .qualifier-trigger__avatar { display: none !important; }
body .qualifier-trigger__copy { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; opacity: 1 !important; transform: none !important; }
body .qualifier-trigger__lead { color: var(--mp-ink) !important; font: 600 10px/1.2 var(--mp-sans) !important; letter-spacing: .18em !important; text-transform: uppercase; }
body .qualifier-trigger__sub { display: block !important; color: var(--mp-muted) !important; font: 400 9px/1.2 var(--mp-sans) !important; letter-spacing: .04em !important; text-transform: none !important; }
body .qualifier-trigger__sub::before { display: none !important; }
body .qualifier-trigger__arrow {
    position: static !important; display: grid !important; place-items: center; width: 40px !important; height: 40px !important;
    border: 0 !important; border-radius: 0 !important; background: var(--mp-wine) !important; color: #fff !important;
    opacity: 1 !important; transform: none !important; transition: background .35s ease, transform .35s var(--mp-ease) !important;
}
body .qualifier-trigger:hover { transform: translateY(-3px) !important; background: #fff !important; }
body .qualifier-trigger:hover .qualifier-trigger__arrow { transform: rotate(8deg) !important; background: var(--mp-ink) !important; }
@media (max-width: 640px) {
    .mp-project-reel-shell { height: min(62svh, 560px); min-height: 360px; }
    .mp-community-progress { height: min(54svh, 500px); }
    body .qualifier-trigger { height: 46px !important; padding: 4px 4px 4px 14px !important; }
    body .qualifier-trigger__sub { display: none !important; }
    body .qualifier-trigger__arrow { width: 36px !important; height: 36px !important; }
}

/* ============================================================
   v20 — Jul 27 round: msingi pattern motif, wine-surface
   contrast, editorial page upgrade, project page repairs.
   ============================================================ */

/* ---- 1. THE MSINGI PATTERN, used as a recurring signature ---- */

/* Footer: the tiled wordmark fading in from the top-right corner. */
body footer.section-dark { position: relative; overflow: hidden; }
body footer.section-dark::before {
    content: "";
    position: absolute;
    top: -24px; right: -30px;
    width: 460px; height: 210px;
    background: url('/images/msingi-pattern.png') repeat;
    background-size: auto 54px;
    opacity: .10;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,.9) 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,.9) 0%, transparent 72%);
}
body footer.section-dark > .container,
body footer.section-dark .subfooter { position: relative; z-index: 1; }

/* Wine CTA chapters: the pattern in warm ivory, rising from the bottom-left. */
body:not(.page-home) #wrapper > section.text-center.section-dark {
    position: relative;
    overflow: hidden;
}
body:not(.page-home) #wrapper > section.text-center.section-dark::after {
    content: "";
    position: absolute;
    bottom: -28px; left: -30px;
    width: 500px; height: 230px;
    background: url('/images/msingi-pattern.png') repeat;
    background-size: auto 58px;
    filter: invert(1);
    opacity: .09;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at bottom left, rgba(0,0,0,.9) 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at bottom left, rgba(0,0,0,.9) 0%, transparent 72%);
}
body:not(.page-home) #wrapper > section.text-center.section-dark > .container { position: relative; z-index: 1; }

/* Photo heroes: flip the (previously invisible) ink pattern to ivory. */
body:not(.page-home) .page-banner::after {
    filter: invert(1);
    opacity: .13;
    width: 340px; height: 340px;
    background-size: auto 62px;
}

/* About page wine surfaces get the same ivory signature. */
body.page-practice #wrapper section.about-credentials,
body.page-practice #wrapper section.about-capabilities { position: relative; overflow: hidden; }
body.page-practice #wrapper section.about-credentials::before,
body.page-practice #wrapper section.about-capabilities::before {
    content: "";
    position: absolute;
    bottom: -28px; right: -30px;
    width: 440px; height: 200px;
    background: url('/images/msingi-pattern.png') repeat;
    background-size: auto 54px;
    filter: invert(1);
    opacity: .08;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse at bottom right, rgba(0,0,0,.9) 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at bottom right, rgba(0,0,0,.9) 0%, transparent 72%);
}
body.page-practice #wrapper section.about-credentials > .container,
body.page-practice #wrapper section.about-capabilities > .container { position: relative; z-index: 1; }

/* Editorial facts band: a faint ink echo along the right edge. */
.mp-editorial-facts { position: relative; overflow: hidden; }
.mp-editorial-facts::after {
    content: "";
    position: absolute;
    inset-block: 0; right: -20px;
    width: 320px;
    background: url('/images/msingi-pattern.png') repeat;
    background-size: auto 50px;
    opacity: .05;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.9) 0%, transparent 85%);
    mask-image: linear-gradient(270deg, rgba(0,0,0,.9) 0%, transparent 85%);
}
.mp-editorial-facts > .container { position: relative; z-index: 1; }

/* ---- 2. GREY-ON-WINE IS BANNED: warm ivory on every wine surface ---- */

body:not(.page-home) #wrapper > section.text-center.section-dark p,
body:not(.page-home) #wrapper > section.text-center.section-dark .op-7,
body:not(.page-home) #wrapper > section.text-center.section-dark .text-light {
    color: #f9ece0 !important;
    opacity: 1 !important;
}
body:not(.page-home) #wrapper > section.text-center.section-dark .subtitle {
    color: #f6cfc2 !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 7px 14px;
    opacity: 1 !important;
}
body.page-practice #wrapper section.about-credentials .op-7,
body.page-practice #wrapper section.about-capabilities .op-7 {
    color: #f9ece0 !important;
    opacity: 1 !important;
}

/* Spec strips (project facts): labels must actually read on paper. */
body:not(.page-home) .service-tile:not(.service-tile--image) .num {
    color: var(--mp-wine) !important;
}
body:not(.page-home) .service-tile:not(.service-tile--image) .op-6 {
    opacity: 1 !important;
    color: var(--mp-muted) !important;
}

/* ---- 3. EDITORIAL PAGES: gallery strip + delivery ledger ---- */

.mp-editorial-gallery {
    padding-block: clamp(48px, 6vw, 88px) !important;
}
.mp-editorial-gallery .lux-gallery__item { display: block; }
.mp-editorial-gallery img {
    width: 100%;
    height: clamp(230px, 26vw, 380px);
    object-fit: cover;
    border-radius: 16px;
}
.mp-editorial-gallery__caption {
    margin-top: 12px;
    color: var(--mp-muted);
    font: 400 12px/1.5 var(--mp-sans);
    letter-spacing: .04em;
}

.mp-editorial-ledger {
    padding-block: clamp(56px, 7vw, 104px) !important;
}
.mp-ledger { border-top: 1px solid var(--mp-line); }
.mp-ledger__row {
    display: grid;
    grid-template-columns: 52px 1.3fr 1fr 1.4fr 30px;
    gap: 18px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--mp-line);
    color: var(--mp-ink);
    text-decoration: none;
    transition: background .35s ease, padding-left .35s var(--mp-ease);
}
a.mp-ledger__row:hover {
    background: rgba(139, 25, 27, .045);
    padding-left: 10px;
    color: var(--mp-ink);
}
.mp-ledger__num {
    color: var(--mp-wine);
    font: 600 11px/1 var(--mp-sans);
    letter-spacing: .14em;
}
.mp-ledger__name { font: 400 clamp(17px, 1.6vw, 21px)/1.25 var(--mp-serif); }
.mp-ledger__loc, .mp-ledger__scope {
    color: var(--mp-muted);
    font: 300 13px/1.5 var(--mp-sans);
}
.mp-ledger__go { color: var(--mp-wine); font-size: 15px; }
@media (max-width: 767px) {
    .mp-ledger__row { grid-template-columns: 40px 1fr 24px; row-gap: 4px; }
    .mp-ledger__num { grid-row: 1; }
    .mp-ledger__name { grid-column: 2; }
    .mp-ledger__loc { grid-column: 2; }
    .mp-ledger__scope { grid-column: 2; }
    .mp-ledger__go { grid-row: 1; grid-column: 3; }
}

/* ---- 4. PROJECT REEL: tidy the thumbnail rail ---- */

.mp-slider-thumbs button {
    border-radius: 8px;
    background-color: transparent;
}
.mp-slider-thumbs button img { object-fit: cover; background: #ddd5c7; }
@media (min-width: 992px) {
    .mp-project-reel-shell .mp-slider-thumbs {
        left: 18px;
        max-width: 58px;
        gap: 8px;
        padding: 8px;
        border-radius: 12px;
        background: rgba(20, 15, 11, .35);
        backdrop-filter: blur(6px);
    }
    .mp-project-reel-shell .mp-slider-thumbs button { aspect-ratio: 4 / 3; }
}
@media (max-width: 991px) {
    .mp-slider-thumbs { display: none !important; }
}

/* ===== v21 — Jul 28 feedback: footer breathing room ===== */
body footer.section-dark .row.g-4 { margin-top: 26px; }
body footer.section-dark .spacer-double { height: 70px; }

/* ===== v22 — Jul 28: layered mega menu (parent categories > projects) ===== */
.msingi-mega__group { border-bottom: 1px solid rgba(26, 23, 18, 0.08); }
.msingi-mega__link--parent { position: relative; }
.msingi-mega__chev {
    margin-left: auto;
    align-self: center;
    font: 400 22px/1 var(--mp-serif);
    color: var(--mp-wine);
    transition: transform 0.35s var(--mp-ease);
}
.msingi-mega__group:hover .msingi-mega__chev,
.msingi-mega__group:focus-within .msingi-mega__chev { transform: rotate(90deg); }
.msingi-mega__sub {
    max-height: 0;
    overflow: hidden;
    padding-left: 48px;
    transition: max-height 0.55s var(--mp-ease);
}
.msingi-mega__group:hover .msingi-mega__sub,
.msingi-mega__group:focus-within .msingi-mega__sub { max-height: 360px; }
.msingi-mega__link--child { padding-block: 8px !important; }
.msingi-mega__link--child .msingi-mega__name { font-size: 15px !important; }
.msingi-mega__link--child .msingi-mega__loc { font-size: 10px !important; }
.msingi-mega__sub .msingi-mega__link--child:first-child { padding-top: 2px !important; }
.msingi-mega__sub .msingi-mega__link--child:last-child { padding-bottom: 16px !important; }
.msingi-mega__all { border-bottom: 0 !important; }
.msingi-mega__all .msingi-mega__name {
    color: var(--mp-wine) !important;
    font: 600 12px/1 var(--mp-sans) !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Layered list stacks vertically — parent rows full width, children indented. */
.msingi-mega__list { display: flex !important; flex-direction: column; gap: 0 !important; }
.msingi-mega__group { width: 100%; }
.msingi-mega__group .msingi-mega__link--parent { width: 100%; display: flex; }
.msingi-mega__sub { padding-left: 26px; }
.msingi-mega__sub .msingi-mega__link--child { width: 100%; display: flex; border-bottom: 0 !important; }
.msingi-mega__link--child .msingi-mega__name,
.msingi-mega__link--child .msingi-mega__loc { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
.msingi-mega__all { margin-top: 6px; }
.msingi-mega__all .msingi-mega__name { color: #f6cfc2 !important; }

/* ===== v23 — menu carets: template wants FontAwesome 4 (not shipped); draw them in CSS ===== */
#mainmenu > li.has-child:after {
    content: "" !important;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 9px;
    padding-left: 0 !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    top: -2px;
}
header.smaller.scroll-light #mainmenu li.has-child:after,
.header-light #mainmenu li.has-child:after {
    border-color: rgba(0, 0, 0, 0.55) !important;
    color: transparent !important;
}
@media (max-width: 993px) {
    #mainmenu > li.menu-item-has-children > a.menu-item:after {
        content: "" !important;
        font-family: inherit !important;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        top: 6px !important;
        right: 4px !important;
    }
}

/* ============ v24 · one brand font pair everywhere ============ */
/* Master override of the template's font variables (defined on * in the bundle,
   so this must also be on * and load after app.min.css). */
*{
    --body-font: 'Open Sans', Helvetica, Arial, sans-serif;
    --heading-font: 'EB Garamond', Georgia, serif;
    --title-font: 'Open Sans', Helvetica, Arial, sans-serif;
    --main-font: 'Open Sans', Helvetica, Arial, sans-serif;
    --btn-font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    --mainmenu-font: 'Open Sans', Helvetica, Arial, sans-serif;
}
/* Rules in the bundle that hardcode a family instead of using a variable */
.msingi-quote,
.profile-card__quote,
.team-card__quote,
.profile-card__monogram,
.faraji-pop__title{
    font-family: 'EB Garamond', Georgia, serif;
}