/*
Home v4 polish layer. Loads last, so it may override anything below it.
Third client review, eleven points plus mobile centring. Reasons inline.
*/
/* ---------------------------------------------------- 4. HERO, CITY + DARKER
The hero drops Elementor's video for a Kampala city photograph with a slow
zoom. ::after carries the image, ::before the veil, so no builder setting
can drop either. The veil is deep enough that the header dissolves into it,
while the city stays readable right of centre. */
.ms-hero2 { background: var(--ms-deep); }
.ms-hero2::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url("/wp-content/uploads/ms-media/kampala-city-v2.webp");
background-size: cover;
background-position: center 38%;
transform-origin: 62% 40%;
}
@media (prefers-reduced-motion: no-preference) {
.ms-hero2::after { animation: ms-kenburns 26s ease-in-out infinite alternate; }
}
@keyframes ms-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
.ms-hero2::before {
z-index: 1;
background:
linear-gradient(90deg,
rgba(18, 36, 29, 0.985) 0%,
rgba(18, 36, 29, 0.93) 34%,
rgba(18, 36, 29, 0.66) 62%,
rgba(18, 36, 29, 0.30) 100%),
linear-gradient(rgba(31, 64, 52, 0.38), rgba(31, 64, 52, 0.38));
}
.ms-hero2 .elementor-background-video-container { display: none; }
/* Mini heroes follow: same city, same darker curve. */
.ms-hero-mini { background-image: url("/wp-content/uploads/ms-media/kampala-city-v2.webp"); background-position: center 40%; }
.ms-hero-mini::before {
background:
linear-gradient(90deg,
rgba(18, 36, 29, 0.98) 0%,
rgba(18, 36, 29, 0.90) 44%,
rgba(18, 36, 29, 0.55) 80%,
rgba(18, 36, 29, 0.32) 100%),
linear-gradient(rgba(31, 64, 52, 0.35), rgba(31, 64, 52, 0.35));
}
/* ------------------------------------ MOBILE HERO: centred, ranked, on fold
The heading must outrank the lede at a glance, everything centred, and the
whole hero inside the first screen with the panel closed. */
@media (max-width: 900px) {
.ms-hero2 { padding-top: 26px !important; padding-bottom: 30px !important; }
.ms-hero2 .ms-hero2-copy { text-align: center; align-items: center; }
.ms-hero2 .ms-hero2-copy .elementor-widget-heading .elementor-heading-title { text-align: center; }
.ms-hero2 h1 { font-size: 38px !important; line-height: 1.1 !important; }
.ms-hero2 .ms-lede { font-size: 13px; line-height: 1.45; color: rgba(244, 247, 243, 0.7); max-width: 32ch; margin-left: auto; margin-right: auto; }
.ms-hero2::after { background-image: url("/wp-content/uploads/ms-media/kampala-city-v2-md.webp"); }
.ms-hero2::before {
background:
linear-gradient(rgba(18, 36, 29, 0.94), rgba(18, 36, 29, 0.9)),
linear-gradient(rgba(31, 64, 52, 0.35), rgba(31, 64, 52, 0.35));
}
/* compact search: selects two-up, actions in one row, everything shorter */
.ms-hsearch.ms-hsearch-x { padding: 12px 12px 12px; }
.ms-hs-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.ms-hs-row .ms-hsearch-field:nth-child(3) { grid-column: 1 / -1; }
.ms-hs-row .ms-hs-more { grid-column: 1; width: 100%; }
.ms-hs-row .ms-hsearch-go { grid-column: 2; width: 100%; }
.ms-hsearch-field > span { font-size: 10px; margin-bottom: 2px; }
.ms-hsearch select { min-height: 40px; padding: 7px 10px; font-size: 13.5px; }
.ms-hsearch-go, .ms-hs-more { min-height: 40px; font-size: 13.5px; }
}
@media (max-width: 400px) { .ms-hero2 h1 { font-size: 33px !important; } }
/* ------------------------------------------------ 2. FILTER ICON BUTTON
The word becomes the universal sliders glyph. States are pinned with
enough specificity that Astra's global button hover cannot repaint them. */
.ms-hsearch .ms-hs-more,
.ms-hsearch .ms-hs-more:hover,
.ms-hsearch .ms-hs-more:focus,
.ms-hsearch .ms-hs-more:active {
background: var(--ms-white);
color: var(--ms-ink);
border: 1px solid var(--ms-border);
box-shadow: none;
}
.ms-hsearch .ms-hs-more {
width: 48px;
min-width: 48px;
padding: 0;
justify-content: center;
}
.ms-hsearch .ms-hs-more svg { width: 20px; height: 20px; }
.ms-hsearch .ms-hs-more::after { display: none; }
.ms-hsearch .ms-hs-more:hover { background: var(--ms-sage); color: var(--ms-forest); border-color: var(--ms-forest); }
.ms-hsearch .ms-hs-more:focus-visible { outline: 2px solid var(--ms-forest); outline-offset: 2px; }
.ms-hsearch .ms-hs-more[aria-expanded="true"] { background: var(--ms-forest); color: var(--ms-bone); border-color: var(--ms-forest); }
.ms-srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* --------------------------------------------- 3. DUOTONE ICON CHIPS
One treatment upgrades every band: a soft sage-to-white chip, forest
detailed stroke, a single brass accent inside the artwork itself. */
.ms-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: 0 0 auto;
border-radius: 14px;
background: linear-gradient(145deg, var(--ms-sage) 0%, #f0f5ef 60%, var(--ms-white) 100%);
border: 1px solid var(--ms-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
color: var(--ms-forest);
}
.ms-chip svg { width: 26px; height: 26px; }
.ms-on-dark .ms-chip {
background: linear-gradient(145deg, rgba(227, 235, 226, 0.16), rgba(227, 235, 226, 0.05));
border-color: rgba(227, 235, 226, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: var(--ms-sage);
}
/* retrofit: features, trust and type rings inherit the chip look */
.ms-feature-ico, .ms-trust-ico {
width: 52px; height: 52px; border-radius: 14px;
background: linear-gradient(145deg, var(--ms-sage) 0%, #f0f5ef 60%, var(--ms-white) 100%);
border: 1px solid var(--ms-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
color: var(--ms-forest);
}
.ms-trust-ico {
background: linear-gradient(145deg, rgba(227, 235, 226, 0.16), rgba(227, 235, 226, 0.05));
border-color: rgba(227, 235, 226, 0.22);
box-shadow: none;
color: var(--ms-brass);
}
.ms-feature-ico svg, .ms-trust-ico svg { width: 26px; height: 26px; }
.ms-type-ring { border-width: 1px; background: linear-gradient(160deg, rgba(227, 235, 226, 0.12), rgba(227, 235, 226, 0.02)); }
/* ------------------------------------------------- 1. PROOF CARDS
Replaces the basic checkmark list in Why this is different. */
.ms-proof { display: flex; flex-direction: column; }
.ms-proof-item { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; }
.ms-proof-item + .ms-proof-item { border-top: 1px solid var(--ms-border); }
.ms-proof-item h3 { font: 700 19px/1.3 var(--ms-font-head); color: var(--ms-ink); margin: 0 0 5px; }
.ms-proof-item p { font: 400 15px/1.6 var(--ms-font-body); color: var(--ms-muted); margin: 0; max-width: 52ch; }
/* -------------------------------------------------- 5. MARQUEE ROOM */
.ms-marquee-band-space { padding-top: 44px !important; padding-bottom: 48px !important; }
.ms-marquee-gap { margin-bottom: 34px !important; }
.ms-marquee-item { color: #7a857e; }
/* ---------------------------------------------- 7. CONTACT ON THE CITY
The gradient-and-grid experiment is retired; the band now sits on the
Kampala photograph under a duty veil, with white surfaces doing the work. */
.ms-contact-band { background: var(--ms-deep); position: relative; }
.ms-contact-band::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(18, 36, 29, 0.9), rgba(18, 36, 29, 0.84)),
url("/wp-content/uploads/ms-media/kampala-city-v2.webp");
background-size: auto, cover;
background-position: center, center 42%;
mask-image: none; -webkit-mask-image: none; opacity: 1;
}
.ms-contact-band .ms-eyebrow, .ms-contact-band .ms-eyebrow .elementor-heading-title { color: var(--ms-brass) !important; }
.ms-contact-band h2, .ms-contact-band .elementor-heading-title { color: var(--ms-bone); }
.ms-contact-band .ms-lede { color: rgba(244, 247, 243, 0.82); }
.ms-contact-band .ms-contact-row { border-color: rgba(244, 247, 243, 0.18); background: rgba(244, 247, 243, 0.06); backdrop-filter: blur(8px); }
.ms-contact-band .ms-contact-row b { color: rgba(244, 247, 243, 0.6); }
.ms-contact-band .ms-contact-row span { color: var(--ms-bone); }
.ms-contact-band .ms-contact-row:hover { border-color: var(--ms-brass); }
/* ------------------------------------------------ 8. UPCOMING CARDS v2 */
.ms-upcard { border-style: solid; padding: 0; overflow: hidden; gap: 0; }
.ms-upcard-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ms-upcard-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; }
.ms-upcard-tag { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
.ms-upcard { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ms-upcard:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(18,36,29,0.06), 0 8px 24px rgba(18,36,29,0.08); }
}
.ms-upgrid { grid-template-columns: repeat(3, 1fr); }
.ms-upgrid .ms-upcard:nth-child(n+4) { display: flex; }
@media (max-width: 1024px) { .ms-upgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ms-upgrid { grid-template-columns: 1fr; } }
/* -------------------------------------------------- 9. CALCULATOR UI */
.ms-mort-actions { display: flex; gap: 10px; align-items: center; }
.ms-mort-go {
flex: 1;
min-height: 46px;
border: 0;
border-radius: var(--ms-radius);
background: var(--ms-brass);
color: var(--ms-deep);
font: 700 15px/1 var(--ms-font-body);
cursor: pointer;
}
.ms-mort-go:hover { background: #dcb45f; }
.ms-mort-reset {
background: none; border: 0; padding: 8px 6px;
font: 600 13px/1 var(--ms-font-body); color: var(--ms-muted);
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.ms-mort-reset:hover { color: var(--ms-forest); }
.ms-mort-out { display: none; }
.ms-mort.is-calced .ms-mort-out { display: block; }
.ms-mort-f input::placeholder { color: #9aa59e; opacity: 1; }
.ms-mort-f input:focus-visible, .ms-mort-go:focus-visible, .ms-mort-reset:focus-visible { outline: 2px solid var(--ms-forest); outline-offset: 2px; }
/* -------------------------------------------- 10. STICKY LIGHT HEADER
Desktop only. bands.js adds body.ms-hdr-light past 24px of scroll and
swaps the logo file; everything here reacts to that class. */
@media (min-width: 1025px) {
header.xpro-theme-builder-header {
position: sticky;
top: 0;
z-index: 220;
}
nav.xpro-theme-builder-header-nav,
nav.xpro-theme-builder-header-nav [data-elementor-id="116"] > .e-con {
transition: background-color 0.3s ease;
}
body.ms-hdr-light nav.xpro-theme-builder-header-nav {
background: rgba(244, 247, 243, 0.85);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 1px 0 rgba(18, 36, 29, 0.08);
}
body.ms-hdr-light [data-elementor-id="116"],
body.ms-hdr-light [data-elementor-id="116"] .e-con { background-color: transparent !important; }
body.ms-hdr-light [data-elementor-id="116"] .xpro-elementor-nav-link,
body.ms-hdr-light [data-elementor-id="116"] .xpro-elementor-nav-link:visited { color: var(--ms-ink) !important; }
body.ms-hdr-light [data-elementor-id="116"] .xpro-elementor-nav-link:hover { color: var(--ms-forest) !important; }
body.ms-hdr-light [data-elementor-id="116"] .current-menu-item > .xpro-elementor-nav-link { color: var(--ms-forest) !important; }
}
/* -------------------------------------------------- 11. SWEEP */
.ms-eyebrow, .ms-eyebrow .elementor-heading-title { letter-spacing: 0.1em; }
.e-con[class*="ms-"] .ms-arrow:focus-visible { outline: 2px solid var(--ms-forest); outline-offset: 3px; border-radius: 4px; }
/* ============================================================ HOME REVISION PASS 1
Client review 7 Sep. Desktop hero: heading dominates, lede tightens, search
bar slimmer, veil darker, header transparent over the hero with bolder light
nav. Scoped to home and >=901/1025 so the mobile hero (its own pass) is left
untouched. */
/* Item 1: darker veil + a top scrim, so the dense city recedes and the nav stays
legible where the hero now bleeds up behind the transparent header. */
@media (min-width: 901px) {
.ms-hero2::before {
background:
linear-gradient(180deg, rgba(18, 36, 29, 0.80) 0, rgba(18, 36, 29, 0.34) 130px, rgba(18, 36, 29, 0) 260px),
linear-gradient(90deg,
rgba(18, 36, 29, 0.99) 0%,
rgba(18, 36, 29, 0.95) 34%,
rgba(18, 36, 29, 0.82) 62%,
rgba(18, 36, 29, 0.60) 100%),
linear-gradient(rgba(31, 64, 52, 0.42), rgba(31, 64, 52, 0.42));
}
.ms-hero2::after { background-position: center 30%; }
}
/* Item 3: the heading is the largest thing in the hero; the lede sits a step
below it in a tighter column; the search bar is slimmer. */
@media (min-width: 901px) {
.ms-hero2 h1 {
font-size: clamp(50px, 4.9vw, 74px) !important;
line-height: 1.04 !important;
letter-spacing: -0.02em;
}
.ms-hero2-copy { max-width: 760px; }
.ms-hero2 .ms-lede { max-width: 44ch; }
.ms-hero2 .ms-hsearch.ms-hsearch-x { padding: 14px 16px; }
.ms-hero2 .ms-hs-row { gap: 8px; }
.ms-hero2 .ms-hsearch select { min-height: 44px; padding: 8px 12px; }
.ms-hero2 .ms-hsearch-go, .ms-hero2 .ms-hs-more { min-height: 44px; }
.ms-hero2 .ms-hsearch-field > span { font-size: 10.5px; }
}
/* Item 1: transparent header over the hero on home. The header stays sticky; the
hero is pulled up under it so the photograph reads behind the nav. On scroll,
the existing .ms-hdr-light bone blur + ink links take over. */
@media (min-width: 1025px) {
body.home [data-elementor-id="116"],
body.home [data-elementor-id="116"] .e-con {
background-color: transparent !important;
}
body.home .ms-hero2 {
margin-top: -99px;
min-height: 100vh;
padding-top: 140px; padding-bottom: 64px;
}
body.home:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.home:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link:visited {
color: var(--ms-bone) !important;
font-weight: 600 !important;
}
body.home:not(.ms-hdr-light) [data-elementor-id="116"] .current-menu-item > .xpro-elementor-nav-link {
color: var(--ms-brass) !important;
}
}
/* HOME PASS 1b: fill the hero so the filter drops to the lower third (reference) */
@media (min-width: 1025px){
body.home .ms-hero2 > .elementor-element-h2heroi { flex-grow: 1 !important; }
body.home .elementor-element-h2heroi > .e-con-inner { flex-grow: 1; }
body.home .elementor-element-h2heroi > .e-con-inner > *:last-child { margin-top: auto !important; }
}
/* ============================================================ MOBILE HERO SEARCH
The inline three-field form collapses to a compact bar on phones and opens as
an exitable bottom sheet with custom, scroll-capped dropdowns (no OS picker).
Desktop keeps the inline native form untouched. */
.ms-hsearch-trigger, .ms-hsearch-head, .ms-csel { display: none; }
.ms-hsearch-backdrop[hidden] { display: none; }
body.ms-noscroll { overflow: hidden; }
@media (max-width: 900px) {
.ms-hsearch-trigger {
display: flex; align-items: center; gap: 10px; width: 100%;
min-height: 54px; padding: 7px 7px 7px 16px;
background: var(--ms-white); border: 1px solid var(--ms-border);
border-radius: var(--ms-radius); cursor: pointer;
}
.ms-hst-ico { display: inline-flex; color: var(--ms-forest); }
.ms-hst-ico svg { width: 20px; height: 20px; }
.ms-hst-txt { flex: 1; text-align: left; font: 500 15px/1.2 var(--ms-font-body); color: var(--ms-muted); }
.ms-hst-go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ms-radius); background: var(--ms-brass); color: var(--ms-deep); }
.ms-hst-go svg { width: 18px; height: 18px; }
.ms-hero2 .ms-hsearch.ms-hsearch-x {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
width: 100%; max-width: none; max-height: 88vh; overflow-y: auto;
padding: 0 16px 20px; border-radius: 18px 18px 0 0;
box-shadow: 0 -10px 40px rgba(18, 36, 29, 0.30);
transform: translateY(101%); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ms-hero2 .ms-hsearch.ms-hsearch-x.ms-sheet-open { transform: translateY(0); }
.ms-hsearch-backdrop { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(18, 36, 29, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ms-hsearch-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--ms-white); padding: 16px 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--ms-border); }
.ms-hsearch-title { font: 700 18px/1.2 var(--ms-font-head); color: var(--ms-ink); }
.ms-hsearch-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--ms-border); border-radius: 999px; background: var(--ms-white); color: var(--ms-ink); font-size: 15px; cursor: pointer; }
.ms-hero2 .ms-hs-row { display: block; }
.ms-hero2 .ms-hsearch-field { display: block; margin: 0 0 12px; }
.ms-hero2 .ms-hsearch-field > span { font-size: 11px; color: var(--ms-muted); }
.ms-hero2 .ms-hsearch-field > select { display: none; }
.ms-csel { display: block; position: relative; margin-top: 5px; }
.ms-csel-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 9px 14px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-white); color: var(--ms-ink); font: 500 15px/1.2 var(--ms-font-body); cursor: pointer; text-align: left; }
.ms-csel-btn:focus-visible { outline: 2px solid var(--ms-forest); outline-offset: 1px; }
.ms-csel-chev { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--ms-muted); border-bottom: 2px solid var(--ms-muted); transform: rotate(45deg); transition: transform 0.2s ease; }
.ms-csel.is-open .ms-csel-chev { transform: rotate(-135deg); }
.ms-csel-list { margin-top: 6px; max-height: 44vh; overflow-y: auto; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-white); }
.ms-csel-opt { display: block; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--ms-border); background: none; color: var(--ms-ink); font: 400 15px/1.3 var(--ms-font-body); text-align: left; cursor: pointer; }
.ms-csel-opt:last-child { border-bottom: 0; }
.ms-csel-opt[aria-selected="true"] { background: var(--ms-sage); color: var(--ms-forest); font-weight: 600; }
.ms-hero2 .ms-hs-more { display: none; }
.ms-hero2 .ms-hsearch-go { width: 100%; min-height: 50px; margin-top: 2px; }
.ms-hero2 .ms-hs-panel { display: none !important; }
}
/* Item 7: contact icons on the dark band. Call and Visit become hairline
circles with a bone glyph so they read; WhatsApp stays the one filled mark. */
.ms-contact-band .ms-contact-row .ms-ci:not(.ms-ci-wa) { background: transparent; border: 1px solid rgba(244, 247, 243, 0.28); color: var(--ms-bone); }
/* Item 8: one row of insights, then a link to the rest */
.ms-upmore { display: inline-block; margin-top: 26px; }
/* Item 5: on phones, drop the complementary split-band photos that only earn
their place beside desktop text. Cards, video and insights keep their imagery. */
@media (max-width: 767px) {
.elementor-element-h2ab img,
.elementor-element-h2tr img,
.ms-organic-a,
.ms-organic-b { display: none !important; }
}
/* =============================================== HOME PASS 2 (client review)
Items requested: hide Inside Mainstop + Why this is different, fix How we can
help alignment, slim service cards, clarify Our promise (Elementor-data),
and redesign the closing band + footer separator. */
/* Item 2: hide (do not remove) two sections on Home. */
body.home .elementor-element.elementor-element-h2ab,
body.home .elementor-element.elementor-element-h2vd { display: none !important; }
/* Item 4: How we can help alignment. The heading area was nested inside a two
column split with an extra 48px of padding, doubling its indent. Flatten it
to a single left aligned column so it sits on the same rail as everything
else. */
.elementor-element.elementor-element-h2svhead {
flex-direction: column !important;
padding: 0 !important;
align-items: stretch !important;
}
.elementor-element.elementor-element-h2svhl,
.elementor-element.elementor-element-h2svhr {
width: 100% !important;
max-width: 820px;
}
/* Item 5: slim service cards on How we can help. Property Management, Rentals
and Land now scan without a scroll task per card. */
.elementor-element-h2sv .ms-scard-body { padding: 18px 20px 12px; gap: 6px; }
.elementor-element-h2sv .ms-scard h3 { font-size: 18px; line-height: 1.25; }
.elementor-element-h2sv .ms-scard p { font-size: 14px; line-height: 1.55; }
.elementor-element-h2sv .ms-scard-img { aspect-ratio: 16 / 9; }
.elementor-element-h2sv .ms-scard-foot { padding: 12px 20px; }
.elementor-element-h2sv .ms-scard-foot .ms-arrow { font-size: 14px; }
@media (max-width: 900px) {
.elementor-element-h2sv .ms-scard-body { padding: 14px 16px 10px; }
}
/* Item 7: closing band. Kill the flat brass hairline, add a subtle dot canvas,
a soft brass anchor glow, more air to the footer, and a modern gradient seam
that fades the section into a fractionally darker footer ground. */
.ms-closing {
border-bottom: 0 !important;
position: relative;
padding-bottom: 128px !important;
background:
radial-gradient(circle at 1px 1px, rgba(244, 247, 243, 0.05) 1px, transparent 1.5px) 0 0 / 22px 22px,
var(--ms-deep) !important;
}
.ms-closing::before { display: none !important; }
.ms-closing::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 96px;
background:
radial-gradient(50% 100% at 50% 100%, rgba(210, 165, 72, 0.18) 0%, rgba(210, 165, 72, 0) 62%),
linear-gradient(180deg, rgba(18, 36, 29, 0) 0%, rgba(6, 15, 10, 0.55) 55%, rgba(6, 15, 10, 1) 100%);
pointer-events: none;
z-index: 1;
}
.ms-closing > * { position: relative; z-index: 2; }
/* Footer takes a slightly deeper ground so the seam feels intentional. */
#xpro-theme-builder-footer .elementor-element-419f1a7 { background-color: var(--ms-deep) !important; }
#xpro-theme-builder-footer .elementor-element-419f1a7 .e-con { background-color: transparent !important; }
/* Item 7 continued: WhatsApp CTA in the closing band. Never underlined; brass
pill on a dark ground. */
.ms-closing .ms-wa,
.ms-closing .ms-wa:hover,
.ms-closing .ms-wa:focus,
.ms-closing .ms-wa:visited { text-decoration: none !important; border-bottom: 0 !important; }
.ms-wa, .ms-wa:hover, .ms-wa:focus, .ms-wa:visited { text-decoration: none !important; }
/* Item 7 polish: brass hairline anchor at the seam, echoing the logo dot. */
.ms-closing::before {
display: block !important;
content: "";
position: absolute; left: 50%; transform: translateX(-50%);
bottom: 48px; z-index: 3;
width: 220px; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(210, 165, 72, 0.4) 30%, rgba(210, 165, 72, 0.85) 50%, rgba(210, 165, 72, 0.4) 70%, transparent 100%);
pointer-events: none;
inset: auto auto 48px 50%;
background-image: linear-gradient(90deg, transparent 0%, rgba(210, 165, 72, 0.4) 30%, rgba(210, 165, 72, 0.85) 50%, rgba(210, 165, 72, 0.4) 70%, transparent 100%);
background-size: 100% 1px;
mask-image: none; -webkit-mask-image: none;
opacity: 1;
}
/* =============================================== HOME PASS 3 (client review)
Item 3: hero content clusters vertically in the middle rather than pushing
the filter to the bottom of the viewport, so the gap under the subheading
never blows out on tall screens. */
@media (min-width: 1025px) {
body.home .elementor-element.elementor-element-h2heroi > .e-con-inner { justify-content: center !important; }
body.home .elementor-element.elementor-element-h2heroi > .e-con-inner > *:last-child { margin-top: 0 !important; }
body.home .ms-hero2 { padding-top: 156px !important; padding-bottom: 72px !important; }
body.home .elementor-element.elementor-element-h2heroi > .e-con-inner { gap: 32px !important; row-gap: 32px !important; }
}
@media (min-width: 1200px) and (min-height: 900px) {
body.home .elementor-element.elementor-element-h2heroi > .e-con-inner { gap: 48px !important; row-gap: 48px !important; }
}
/* Item 1: Our promise looks patched-in and flat. Compose the right-hand image
with a pill/organic crop, a brass hairline frame offset behind it, and a
brass corner dot that echoes the logo doorway. Layered depth per DESIGN.md. */
body.home .elementor-element.elementor-element-h2trr { position: relative; }
body.home .elementor-element.elementor-element-h2trr .elementor-widget-image { position: relative; }
body.home .elementor-element.elementor-element-h2trr .elementor-widget-image img {
border-radius: 260px 260px 20px 20px !important;
position: relative; z-index: 2;
}
body.home .elementor-element.elementor-element-h2trr .elementor-widget-image::before {
content: "";
position: absolute;
top: 22px; left: 22px; right: -22px; bottom: -22px;
border: 1px solid rgba(210, 165, 72, 0.55);
border-radius: 260px 260px 20px 20px;
z-index: 1; pointer-events: none;
}
body.home .elementor-element.elementor-element-h2trr .elementor-widget-image::after {
content: "";
position: absolute;
left: -12px; top: 22px;
width: 46px; height: 46px;
border-radius: 999px;
background: var(--ms-brass);
box-shadow: 0 0 0 6px rgba(210, 165, 72, 0.18);
z-index: 3;
}
/* A subtle sage tint panel behind the whole visual so it sits on more than air. */
body.home .elementor-element.elementor-element-h2trr::before {
content: "";
position: absolute;
top: -36px; left: -36px; right: -12px; bottom: 40px;
background: radial-gradient(60% 55% at 30% 40%, rgba(227, 235, 226, 0.10) 0%, rgba(227, 235, 226, 0) 70%);
z-index: 0; pointer-events: none;
}
/* On mobile the composed frame becomes noise; keep the pill crop, drop the extras. */
@media (max-width: 900px) {
body.home .elementor-element.elementor-element-h2trr .elementor-widget-image::before,
body.home .elementor-element.elementor-element-h2trr .elementor-widget-image::after,
body.home .elementor-element.elementor-element-h2trr::before { display: none; }
body.home .elementor-element.elementor-element-h2trr .elementor-widget-image img { border-radius: 200px 200px 16px 16px !important; }
}
/* =============================================== BROWSE BY TYPE (bento)
Nine types now (five real, four new). Grid becomes 3 x 4 on desktop with the
highest-count type as a 2 x 2 lead tile; new (0-count) types carry a brass
'New' corner chip and a soft muted body line. */
.ms-types { display: grid; grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 190px; grid-auto-flow: dense; gap: 14px; }
.ms-type {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
padding: 22px 16px;
border: 1px solid rgba(244, 247, 243, 0.14);
border-radius: var(--ms-radius-lg);
background: rgba(244, 247, 243, 0.02);
overflow: hidden;
}
.ms-type::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: radial-gradient(70% 60% at 50% 20%, rgba(210, 165, 72, 0.06), rgba(210, 165, 72, 0) 70%);
opacity: 0; transition: opacity 0.28s ease;
pointer-events: none;
}
.ms-type:hover { border-color: rgba(210, 165, 72, 0.5); background: rgba(244, 247, 243, 0.04); }
.ms-type:hover::before { opacity: 1; }
.ms-type > * { position: relative; z-index: 1; }
.ms-type-ring { width: 64px !important; height: 64px !important; }
.ms-type-ring svg { width: 26px !important; height: 26px !important; }
.ms-type.is-lead {
grid-column: span 2; grid-row: span 2;
padding: 44px 32px;
background:
radial-gradient(85% 80% at 30% 20%, rgba(210, 165, 72, 0.14) 0%, rgba(210, 165, 72, 0) 70%),
radial-gradient(60% 55% at 90% 100%, rgba(227, 235, 226, 0.08) 0%, rgba(227, 235, 226, 0) 70%),
rgba(244, 247, 243, 0.03);
border-color: rgba(244, 247, 243, 0.22);
align-items: flex-start;
text-align: left;
justify-content: space-between;
gap: 22px;
}
.ms-type.is-lead .ms-type-ring { width: 108px !important; height: 108px !important; border-color: rgba(244, 247, 243, 0.42); }
.ms-type.is-lead .ms-type-ring svg { width: 44px !important; height: 44px !important; }
.ms-type.is-lead .ms-type-name { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin-top: auto; }
.ms-type.is-lead .ms-type-count { font-size: 15px; color: rgba(244, 247, 243, 0.7); }
.ms-type.is-lead::after {
content: ""; position: absolute; right: 22px; bottom: 22px; z-index: 2;
width: 44px; height: 44px; border-radius: 999px;
background: var(--ms-brass);
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-size: 22px 22px; -webkit-mask-size: 22px 22px;
mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-position: center; -webkit-mask-position: center;
transition: transform 0.25s ease;
}
.ms-type.is-lead:hover::after { transform: translate(2px, -2px); }
.ms-type-chip {
position: absolute; top: 12px; right: 12px; z-index: 2;
font: 700 10px/1 var(--ms-font-body);
letter-spacing: 0.14em; text-transform: uppercase;
padding: 6px 10px; border-radius: 999px;
background: var(--ms-brass); color: var(--ms-deep);
}
.ms-type.is-empty .ms-type-count { color: rgba(244, 247, 243, 0.45); font-style: italic; }
@media (max-width: 900px) {
.ms-types { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 160px; }
.ms-type.is-lead { grid-column: span 2; grid-row: span 1; padding: 28px 22px; text-align: center; align-items: center; }
.ms-type.is-lead .ms-type-ring { width: 88px !important; height: 88px !important; }
.ms-type.is-lead .ms-type-name { font-size: 24px; margin-top: 0; }
.ms-type.is-lead::after { display: none; }
}
@media (max-width: 520px) {
.ms-types { grid-auto-rows: 140px; }
.ms-type { padding: 16px 10px; }
.ms-type-name { font-size: 15px !important; }
}
/* =============================================== BROWSE BY TYPE (pass 2)
Client review: drop the New chip in favour of a proper descriptor line under
each new type, tighten responsive so tablet and mobile are their own designs
rather than a shrunk desktop, and pin icon geometry so the ring can never be
stretched by a flex parent. */
/* Empty-type description reads as calm secondary info, not italic filler. */
.ms-type-chip { display: none !important; }
.ms-type.is-empty .ms-type-count { color: rgba(244, 247, 243, 0.62); font-style: normal; letter-spacing: 0.005em; }
/* Icon rings hold a strict 1:1 aspect and never shrink inside a flex tile. */
.ms-types .ms-type-ring { flex: 0 0 auto !important; aspect-ratio: 1 / 1 !important; }
.ms-types .ms-type-ring svg { flex: 0 0 auto !important; display: block; }
/* --- Tablet: 601-900px, three columns, no featured lead --- */
@media (min-width: 601px) and (max-width: 900px) {
.ms-types { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 168px !important; gap: 12px !important; }
.ms-type.is-lead { grid-column: auto !important; grid-row: auto !important; padding: 20px 14px !important; text-align: center !important; align-items: center !important; justify-content: center !important; background: rgba(244, 247, 243, 0.03) !important; }
.ms-type.is-lead .ms-type-ring { width: 60px !important; height: 60px !important; }
.ms-type.is-lead .ms-type-ring svg { width: 24px !important; height: 24px !important; }
.ms-type.is-lead .ms-type-name { font-size: 15px !important; margin-top: 0 !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.ms-type.is-lead .ms-type-count { font-size: 12px !important; }
.ms-type.is-lead::after { display: none !important; }
.ms-types .ms-type-ring { width: 60px !important; height: 60px !important; }
.ms-types .ms-type-ring svg { width: 24px !important; height: 24px !important; }
.ms-types .ms-type-name { font-size: 15px !important; }
.ms-types .ms-type-count { font-size: 12px !important; }
}
/* --- Mobile: <=600px, two columns, no featured lead, compact --- */
@media (max-width: 600px) {
.ms-types { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 152px !important; gap: 10px !important; }
.ms-type { padding: 16px 10px !important; gap: 8px !important; text-align: center !important; align-items: center !important; justify-content: center !important; }
.ms-type.is-lead { grid-column: auto !important; grid-row: auto !important; padding: 16px 10px !important; text-align: center !important; align-items: center !important; justify-content: center !important; background: rgba(244, 247, 243, 0.03) !important; }
.ms-type.is-lead .ms-type-name { font-size: 14px !important; margin-top: 0 !important; letter-spacing: 0 !important; }
.ms-type.is-lead::after { display: none !important; }
.ms-types .ms-type-ring { width: 54px !important; height: 54px !important; }
.ms-types .ms-type-ring svg { width: 22px !important; height: 22px !important; }
.ms-types .ms-type-name { font-size: 14px !important; }
.ms-types .ms-type-count { font-size: 11.5px !important; line-height: 1.35 !important; }
}
/* --- Very small: <=380px, tighter still --- */
@media (max-width: 380px) {
.ms-types { grid-auto-rows: 138px !important; gap: 8px !important; }
.ms-types .ms-type-ring { width: 46px !important; height: 46px !important; }
.ms-types .ms-type-ring svg { width: 20px !important; height: 20px !important; }
.ms-types .ms-type-name { font-size: 13px !important; }
.ms-types .ms-type-count { font-size: 11px !important; }
}
/* PASS 4 icon-specificity fix: the desktop .ms-type.is-lead .ms-type-ring rule
has higher specificity than the earlier .ms-types .ms-type-ring mobile rule,
so it kept the lead ring at ~108px and it overflowed the mobile tile. Match
the specificity here so the lead ring shrinks like every other ring. */
@media (min-width: 601px) and (max-width: 900px) {
.ms-type.is-lead .ms-type-ring { width: 60px !important; height: 60px !important; }
.ms-type.is-lead .ms-type-ring svg { width: 24px !important; height: 24px !important; }
}
@media (max-width: 600px) {
.ms-type.is-lead .ms-type-ring { width: 54px !important; height: 54px !important; }
.ms-type.is-lead .ms-type-ring svg { width: 22px !important; height: 22px !important; }
}
@media (max-width: 380px) {
.ms-type.is-lead .ms-type-ring { width: 46px !important; height: 46px !important; }
.ms-type.is-lead .ms-type-ring svg { width: 20px !important; height: 20px !important; }
}
/* Astra sets a:hover to var(--ast-global-color-1) inline (a dark forest),
which turns the .ms-type card title invisible on the dark section. Pin the
colours so hover keeps them legible and lifts the descriptor a shade. */
.ms-type:hover, .ms-type:hover:focus, .ms-type:hover:visited { color: var(--ms-bone) !important; }
.ms-type:hover .ms-type-name { color: var(--ms-bone) !important; }
.ms-type:hover .ms-type-count { color: rgba(244, 247, 243, 0.9) !important; }
/* Unify the descriptor colour now that every tile carries a benefit line. */
.ms-types .ms-type-count { color: rgba(244, 247, 243, 0.72) !important; font-style: normal !important; letter-spacing: 0.005em; }
.ms-type.is-lead .ms-type-count { color: rgba(244, 247, 243, 0.82) !important; }
/* ============================================================ SERVICES INDEX
Seven services, text-only cards in a 3-col grid on desktop. Each is a plain
choice tile that visualises the benefit; icons carry the visual anchor. */
.ms-svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ms-svctile {
position: relative;
display: flex; flex-direction: column; gap: 12px;
padding: 26px 24px 20px;
background: var(--ms-white);
border: 1px solid var(--ms-border);
border-radius: var(--ms-radius-lg);
text-decoration: none !important;
color: inherit;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ms-svctile:hover, .ms-svctile:focus, .ms-svctile:visited { color: inherit !important; }
.ms-svctile:hover {
transform: translateY(-3px);
box-shadow: 0 1px 2px rgba(18,36,29,0.06), 0 8px 24px rgba(18,36,29,0.08);
border-color: rgba(210, 165, 72, 0.4);
}
.ms-svctile-ico {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; aspect-ratio: 1 / 1;
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(145deg, var(--ms-sage) 0%, #f0f5ef 60%, var(--ms-white) 100%);
border: 1px solid var(--ms-border);
color: var(--ms-forest);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.ms-svctile-ico svg { width: 24px; height: 24px; display: block; flex: 0 0 auto; }
.ms-svctile-name { font: 700 20px/1.25 var(--ms-font-head); color: var(--ms-ink); margin: 4px 0 0; }
.ms-svctile:hover .ms-svctile-name { color: var(--ms-forest); }
.ms-svctile-benefit { font: 400 15px/1.55 var(--ms-font-body); color: var(--ms-muted); margin: 0; max-width: 36ch; }
.ms-svctile-cta {
margin-top: auto; padding-top: 16px;
border-top: 1px solid var(--ms-border);
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font: 600 14px/1 var(--ms-font-body); color: var(--ms-forest);
letter-spacing: 0.01em;
}
.ms-svctile-arrow { transition: transform 0.2s ease; font-size: 16px; line-height: 1; }
.ms-svctile:hover .ms-svctile-arrow { transform: translate(2px, -2px); }
@media (max-width: 1024px) { .ms-svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ms-svcgrid { grid-template-columns: 1fr; gap: 14px; } .ms-svctile { padding: 22px 20px; } }
/* SERVICE HERO PASS
The service pages share the home's transparent-header + dark-veiled hero
pattern: full-bleed background image on the right, deep forest gradient
concentrated on the left where the content sits. No boxed photo, no
frame-in-frame; the ground itself is the frame. Applies to Services index
(106), the six service sub-pages (193, 195, 197, 199, 201, 203) and the
Diaspora page (206). */
/* the hero surface itself */
.ms-hero-mini {
position: relative;
background-color: var(--ms-deep);
background-image: var(--ms-hero-img, url("/wp-content/uploads/ms-media/kampala-aerial.webp"));
background-size: cover;
background-position: 100% 32%;
overflow: hidden;
isolation: isolate;
}
.ms-hero-mini::before {
content: "";
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(18, 36, 29, 0.85) 0px, rgba(18, 36, 29, 0.4) 140px, rgba(18, 36, 29, 0) 280px),
linear-gradient(90deg,
rgba(18, 36, 29, 0.995) 0%,
rgba(18, 36, 29, 0.965) 30%,
rgba(18, 36, 29, 0.82) 55%,
rgba(18, 36, 29, 0.5) 78%,
rgba(18, 36, 29, 0.18) 100%),
linear-gradient(rgba(31, 64, 52, 0.35), rgba(31, 64, 52, 0.35));
pointer-events: none;
}
.ms-hero-mini > .e-con-inner,
.ms-hero-mini > .e-con { position: relative; z-index: 2; }
.ms-hero-mini-copy { position: relative; z-index: 2; max-width: 780px; }
/* Header goes transparent over the hero on every service page. */
@media (min-width: 1025px) {
body.page-id-106 [data-elementor-id="116"],
body.page-id-106 [data-elementor-id="116"] .e-con,
body.page-id-193 [data-elementor-id="116"],
body.page-id-193 [data-elementor-id="116"] .e-con,
body.page-id-195 [data-elementor-id="116"],
body.page-id-195 [data-elementor-id="116"] .e-con,
body.page-id-197 [data-elementor-id="116"],
body.page-id-197 [data-elementor-id="116"] .e-con,
body.page-id-199 [data-elementor-id="116"],
body.page-id-199 [data-elementor-id="116"] .e-con,
body.page-id-201 [data-elementor-id="116"],
body.page-id-201 [data-elementor-id="116"] .e-con,
body.page-id-203 [data-elementor-id="116"],
body.page-id-203 [data-elementor-id="116"] .e-con,
body.page-id-206 [data-elementor-id="116"],
body.page-id-206 [data-elementor-id="116"] .e-con {
background-color: transparent !important;
}
body.page-id-106 .ms-hero-mini,
body.page-id-193 .ms-hero-mini,
body.page-id-195 .ms-hero-mini,
body.page-id-197 .ms-hero-mini,
body.page-id-199 .ms-hero-mini,
body.page-id-201 .ms-hero-mini,
body.page-id-203 .ms-hero-mini,
body.page-id-206 .ms-hero-mini {
margin-top: -99px;
padding-top: 168px !important;
padding-bottom: 84px !important;
min-height: 520px;
}
body.page-id-106:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-193:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-195:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-197:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-199:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-201:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-203:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-206:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-106:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link:visited,
body.page-id-193:not(.ms-hdr-light) [data-elementor-id="116"] .xpro-elementor-nav-link:visited {
color: var(--ms-bone) !important;
font-weight: 600 !important;
}
body.page-id-106:not(.ms-hdr-light) [data-elementor-id="116"] .current-menu-item > .xpro-elementor-nav-link,
body.page-id-193:not(.ms-hdr-light) [data-elementor-id="116"] .current-menu-item > .xpro-elementor-nav-link {
color: var(--ms-brass) !important;
}
}
@media (max-width: 1024px) {
.ms-hero-mini { min-height: 380px; }
}
/* Breadcrumb reads on the dark ground: uppercase, spaced, brass on hover. */
.ms-hero-mini .rank-math-breadcrumb,
.ms-hero-mini .rank-math-breadcrumb a,
.ms-hero-mini .rank-math-breadcrumb span {
color: rgba(244, 247, 243, 0.72) !important;
font: 600 11.5px/1.4 var(--ms-font-body) !important;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none !important;
}
.ms-hero-mini .rank-math-breadcrumb a:hover { color: var(--ms-brass) !important; }
.ms-hero-mini .rank-math-breadcrumb .separator { opacity: 0.45; margin: 0 6px; }
/* Hero typography on service pages */
.ms-hero-mini h1,
.ms-hero-mini .elementor-heading-title { color: var(--ms-bone) !important; text-wrap: balance; }
.ms-hero-mini h1 {
font-size: clamp(36px, 4.4vw, 60px);
line-height: 1.06;
letter-spacing: -0.02em;
font-weight: 700;
}
.ms-hero-mini .ms-lede {
color: rgba(244, 247, 243, 0.86) !important;
max-width: 60ch;
font-size: 19px;
line-height: 1.55;
}
.ms-hero-mini .ms-eyebrow,
.ms-hero-mini .ms-eyebrow .elementor-heading-title { color: var(--ms-brass) !important; }
/* PM PAGE POLISH
Client review after service-hero rebuild. Four fixes:
- WhatsApp CTA hover pin (Astra a:hover was flipping the text dark)
- Hero shrink + breadcrumb nowrap so the crumb never wraps
- Boxed Other services sidebar with active state
- Feature grid replacing the flat what's-included list */
/* 2. WhatsApp CTA never turns dark on hover */
.ms-wa, .ms-wa:hover, .ms-wa:focus, .ms-wa:visited, .ms-wa:active { color: var(--ms-bone) !important; }
/* 3. Hero shrink for service pages */
@media (min-width: 1025px) {
body.page-id-106 .ms-hero-mini,
body.page-id-193 .ms-hero-mini,
body.page-id-195 .ms-hero-mini,
body.page-id-197 .ms-hero-mini,
body.page-id-199 .ms-hero-mini,
body.page-id-201 .ms-hero-mini,
body.page-id-203 .ms-hero-mini,
body.page-id-206 .ms-hero-mini {
margin-top: -99px;
padding-top: 128px !important;
padding-bottom: 48px !important;
min-height: 380px;
}
}
.ms-hero-mini-copy { max-width: 640px !important; }
/* Breadcrumb never wraps */
.ms-hero-mini .rank-math-breadcrumb {
white-space: nowrap;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.ms-hero-mini .rank-math-breadcrumb::-webkit-scrollbar { display: none; }
/* 1. Other services: boxed cards with a chevron and an active state */
.ms-otherserv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-top: 0 !important; }
.ms-otherserv li { border-bottom: 0 !important; }
.ms-otherserv-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 13px 16px;
background: var(--ms-white);
border: 1px solid var(--ms-border);
border-radius: var(--ms-radius);
color: var(--ms-ink) !important;
text-decoration: none !important;
font: 500 15px/1.3 var(--ms-font-body);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.ms-otherserv-item:hover { border-color: var(--ms-forest); color: var(--ms-forest) !important; }
.ms-otherserv-item .ms-otherserv-chev { color: var(--ms-muted); font-size: 22px; line-height: 1; transition: transform 0.2s ease, color 0.2s ease; }
.ms-otherserv-item:hover .ms-otherserv-chev { color: var(--ms-forest); transform: translateX(3px); }
.ms-otherserv-item.is-active {
background: var(--ms-deep) !important;
border-color: var(--ms-deep) !important;
color: var(--ms-bone) !important;
}
.ms-otherserv-item.is-active .ms-otherserv-chev { color: var(--ms-bone); }
.ms-otherserv-item.is-active:hover { background: var(--ms-forest) !important; color: var(--ms-bone) !important; }
.ms-otherserv-item.is-active:hover .ms-otherserv-chev { color: var(--ms-bone); }
/* 4. Feature grid: two columns of icon-title-body tiles */
.ms-featgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 6px; }
.ms-featgrid-tile {
display: flex; flex-direction: column; gap: 10px;
padding: 22px 20px 20px;
background: var(--ms-white);
border: 1px solid var(--ms-border);
border-radius: var(--ms-radius-lg);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.ms-featgrid-tile:hover {
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(18,36,29,0.05), 0 8px 24px rgba(18,36,29,0.06);
border-color: rgba(210, 165, 72, 0.4);
}
.ms-featgrid-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
flex: 0 0 auto; aspect-ratio: 1 / 1;
border-radius: 12px;
background: linear-gradient(140deg, var(--ms-sage) 0%, #f0f5ef 60%, var(--ms-white) 100%);
border: 1px solid var(--ms-border);
color: var(--ms-forest);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.ms-featgrid-ico svg { width: 22px; height: 22px; display: block; }
.ms-featgrid-h { font: 700 16px/1.3 var(--ms-font-head); color: var(--ms-ink); margin: 4px 0 0; }
.ms-featgrid-b { font: 400 14px/1.55 var(--ms-font-body); color: var(--ms-muted); margin: 0; max-width: 40ch; }
@media (max-width: 700px) { .ms-featgrid { grid-template-columns: 1fr; } }
/* SERVICE HERO COMPACT
Client: the hero was 797px because the 60px H1 wrapped to 4 lines (336px on
its own). Lowering min-height did nothing. Real fix: shrink the heading,
widen the column so it sits on ~2 lines, tighten spacing, drop the redundant
eyebrow (the breadcrumb already names the page), and make the WhatsApp CTA a
compact inline button. Target ~400px on desktop. */
@media (min-width: 1025px) {
body.page-id-106 .ms-hero-mini,
body.page-id-193 .ms-hero-mini,
body.page-id-195 .ms-hero-mini,
body.page-id-197 .ms-hero-mini,
body.page-id-199 .ms-hero-mini,
body.page-id-201 .ms-hero-mini,
body.page-id-203 .ms-hero-mini,
body.page-id-206 .ms-hero-mini {
padding-top: 116px !important;
padding-bottom: 40px !important;
min-height: 300px;
}
}
@media (max-width: 1024px) { .ms-hero-mini { min-height: 240px; } }
@media (max-width: 900px) {
.ms-hero-mini { padding-top: 92px !important; padding-bottom: 44px !important; }
}
.ms-hero-mini-copy { max-width: 820px !important; gap: 12px !important; row-gap: 12px !important; }
/* Redundant eyebrow off (breadcrumb already labels the page, like the reference) */
.ms-hero-mini .ms-eyebrow,
.ms-hero-mini .ms-eyebrow .elementor-heading-title { display: none !important; }
/* Heading shrinks so it sits on ~2 lines, not 4 */
.ms-hero-mini h1,
.ms-hero-mini h1.elementor-heading-title {
font-size: clamp(28px, 3vw, 42px) !important;
line-height: 1.08 !important;
letter-spacing: -0.015em !important;
}
.ms-hero-mini .ms-lede {
font-size: 17px !important;
line-height: 1.5 !important;
max-width: 54ch !important;
}
/* Compact inline WhatsApp CTA: auto width, left aligned, smaller */
.ms-hero-mini .ms-wa {
display: inline-flex !important;
width: auto !important;
align-self: flex-start !important;
padding: 11px 22px !important;
min-height: 44px !important;
font-size: 15px !important;
}
.ms-hero-mini .elementor-widget-shortcode:has(.ms-wa) { width: auto; }
/* SERVICE ICONS POP
The 44-52px sage-tinted squares with 1.6-1.8px green strokes read as small
marks in the text on both the services index and each service sub-page. Fix:
deep-forest disc, bone icon, thicker stroke, and a low-alpha brass halo that
grows on hover. Icons become landmarks without eating brass from the CTA. */
.ms-featgrid-ico,
.ms-svctile-ico {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
background: var(--ms-deep) !important;
background-image: radial-gradient(120% 120% at 30% 20%, #1F4034 0%, #12241D 60%) !important;
border: 1px solid rgba(210,165,72,0.28) !important;
color: var(--ms-bone) !important;
box-shadow: 0 6px 18px rgba(18,36,29,0.22), inset 0 -2px 6px rgba(0,0,0,0.28), 0 0 0 4px rgba(210,165,72,0.09) !important;
position: relative;
transition: box-shadow .25s ease, transform .25s ease;
}
.ms-featgrid-ico svg,
.ms-svctile-ico svg {
width: 28px !important;
height: 28px !important;
stroke-width: 2 !important;
color: var(--ms-bone) !important;
}
.ms-featgrid-tile:hover .ms-featgrid-ico,
.ms-svctile:hover .ms-svctile-ico {
box-shadow: 0 8px 22px rgba(18,36,29,0.28), inset 0 -2px 6px rgba(0,0,0,0.28), 0 0 0 6px rgba(210,165,72,0.22) !important;
transform: translateY(-1px);
}
/* SERVICES INDEX POLISH
The 7 tiles were reading as a text list because every card looked the same.
Add a small brass 01/02/... eyebrow (editorial, low-key) and give Property
Management the flagship look (deep forest ground, brass CTA), because it's
~90% of the business and deserves the eye first. */
.ms-svcgrid { counter-reset: msvc; }
.ms-svctile { counter-increment: msvc; }
.ms-svctile::before {
content: "0" counter(msvc);
position: absolute;
top: 20px; right: 22px;
font: 700 12px/1 var(--ms-font-head);
letter-spacing: 0.1em;
color: var(--ms-brass);
opacity: 0.85;
z-index: 1;
}
.ms-svctile:first-child {
background: var(--ms-deep) !important;
background-image: linear-gradient(160deg, #1F4034 0%, #12241D 100%) !important;
color: var(--ms-bone) !important;
border-color: #12241D !important;
}
.ms-svctile:first-child .ms-svctile-name,
.ms-svctile:first-child:hover .ms-svctile-name { color: var(--ms-bone) !important; }
.ms-svctile:first-child .ms-svctile-benefit { color: rgba(244,247,243,0.78) !important; }
.ms-svctile:first-child .ms-svctile-cta { color: var(--ms-brass) !important; border-top-color: rgba(244,247,243,0.15) !important; }
.ms-svctile:first-child .ms-svctile-arrow { color: var(--ms-brass) !important; }
.ms-svctile:first-child::before { color: var(--ms-brass) !important; opacity: 1; }
.ms-svctile:first-child .ms-svctile-ico {
box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 -2px 6px rgba(0,0,0,0.28), 0 0 0 4px rgba(210,165,72,0.3) !important;
border-color: rgba(210,165,72,0.5) !important;
}
/* SIDEBAR EMAIL + OTHERSERV FIX
1) Astra's default .entry-content ul rule was giving .ms-otherserv a left
indent so the tiles sat inset from the 'Talk to us' heading. Reset it
with !important.
2) Bump the tile inner padding so the label doesn't graze the border.
3) Style the Fluent Form (id 1, 'Service Enquiry') inside the sidebar so
it doesn't ship the plugin default look. Diaspora / office users who
prefer an official email now have a proper channel. */
.ms-otherserv,
ul.ms-otherserv,
.entry-content ul.ms-otherserv,
.elementor-widget .ms-otherserv {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.ms-otherserv li,
.entry-content ul.ms-otherserv li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ms-otherserv-item { padding: 14px 18px !important; }
.ms-otherserv-label { display: inline-block; }
.ms-svcform-h .elementor-heading-title,
.ms-svcform-h h4 {
font: 700 15px/1.3 var(--ms-font-head) !important;
color: var(--ms-ink) !important;
margin: 12px 0 4px !important;
letter-spacing: -0.005em;
}
.ms-svcform { margin-top: 0; }
.ms-svcform .fluentform,
.ms-svcform .frm-fluent-form { margin: 0; padding: 0; }
.ms-svcform .ff-el-form-control,
.ms-svcform input[type="text"],
.ms-svcform input[type="email"],
.ms-svcform textarea {
width: 100% !important;
padding: 11px 12px !important;
background: var(--ms-white) !important;
border: 1px solid var(--ms-border) !important;
border-radius: 8px !important;
font: 400 14px/1.45 var(--ms-font-body) !important;
color: var(--ms-ink) !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.ms-svcform input:focus,
.ms-svcform textarea:focus {
border-color: var(--ms-forest) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(31,64,52,0.12) !important;
}
.ms-svcform textarea { min-height: 88px !important; resize: vertical !important; line-height: 1.5 !important; }
.ms-svcform .ff-el-input--label,
.ms-svcform .ff-el-input--label label,
.ms-svcform .ff_t_container_label { display: none !important; }
.ms-svcform .ff-el-group,
.ms-svcform .ff-t-container { margin-bottom: 10px !important; }
.ms-svcform .ff-btn-submit,
.ms-svcform button[type="submit"],
.ms-svcform .ff-btn {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 100% !important;
padding: 12px 18px !important;
background: var(--ms-forest) !important;
color: var(--ms-bone) !important;
border: none !important;
border-radius: 8px !important;
font: 600 15px/1 var(--ms-font-body) !important;
text-transform: none !important;
letter-spacing: 0 !important;
cursor: pointer !important;
min-height: 44px !important;
transition: background 0.2s ease !important;
text-decoration: none !important;
}
.ms-svcform .ff-btn-submit:hover,
.ms-svcform button[type="submit"]:hover { background: var(--ms-deep) !important; }
.ms-svcform .ff-message-success,
.ms-svcform .ff_success { color: var(--ms-forest) !important; font: 500 13px/1.4 var(--ms-font-body) !important; }
.ms-svcform .ff-el-is-error .error,
.ms-svcform .ff-el-form-check-single .error { color: #b34c4c !important; font: 400 12px/1.3 var(--ms-font-body) !important; }
/* FAQ MULTI-PARAGRAPH
Some FAQ answers deserve real depth (land tenure being the obvious one).
The shortcode now splits the answer on blank lines and wraps each paragraph.
Add spacing between paragraphs so it reads like an editorial column, not a
solid wall of prose. */
.ms-faq-a p + p { margin-top: 14px !important; }
.ms-faq-a p { max-width: 78ch; line-height: 1.7 !important; }
.ms-faq-item[open] > summary { padding-bottom: 12px; }
/* STEPS CONNECTOR
Was: bare numbered list with a hairline between steps.
Now: dark-forest disc with brass number (matches the featgrid icon language),
plus a vertical connector line running between adjacent circles so the four
steps read as a single visual path, not four isolated items. The line is a
gradient forest -> forest-fade so it feels like a journey, and each step's
::before draws only the segment between it and the next circle. */
.ms-steps {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
counter-reset: none;
}
.ms-steps > li {
position: relative;
display: flex;
gap: 20px !important;
padding: 8px 0 28px !important;
border-bottom: 0 !important;
align-items: flex-start;
}
.ms-steps > li:last-child { padding-bottom: 4px !important; }
/* The connector: a vertical line from just below this circle to just above
the next circle. Not drawn on the last step. */
.ms-steps > li:not(:last-child)::before {
content: "";
position: absolute;
left: 16px;
top: 44px;
bottom: 12px;
width: 2px;
background: linear-gradient(180deg,
rgba(31, 64, 52, 0.55) 0%,
rgba(31, 64, 52, 0.55) 55%,
rgba(31, 64, 52, 0.22) 100%);
border-radius: 2px;
z-index: 0;
pointer-events: none;
}
/* The number circle: dark forest disc with a brass numeral inside, matching
the featgrid + services-index icon treatment. Sits above the line. */
.ms-steps > li > .ms-step-n {
position: relative;
z-index: 1;
flex: 0 0 auto;
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
background: var(--ms-deep) !important;
background-image: radial-gradient(120% 120% at 30% 20%, #1F4034 0%, #12241D 60%) !important;
color: var(--ms-brass) !important;
border: 1px solid rgba(210, 165, 72, 0.32) !important;
box-shadow: 0 4px 12px rgba(18, 36, 29, 0.24), inset 0 -1px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(210, 165, 72, 0.09) !important;
font: 700 15px/1 var(--ms-font-body) !important;
letter-spacing: 0.02em;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* The body typography: slightly larger, more editorial. */
.ms-steps > li > .ms-step-b {
display: flex;
flex-direction: column;
gap: 6px !important;
padding-top: 4px;
}
.ms-steps > li > .ms-step-b strong {
font: 700 17px/1.35 var(--ms-font-head) !important;
color: var(--ms-ink) !important;
letter-spacing: -0.005em;
}
.ms-steps > li > .ms-step-b span {
font: 400 16px/1.65 var(--ms-font-body) !important;
color: var(--ms-muted) !important;
max-width: 60ch;
}
/* STEPS CONNECTOR FIX
The per- connector stopped short of the next circle when the body text
made the row taller than expected. Switch to a container-level connector
that spans centre-of-first-circle to centre-of-last-circle. The dark discs
sit above (z-index 1) and punch through the line, giving the classic
connect-the-dots look regardless of row height. */
.ms-steps > li:not(:last-child)::before { content: none !important; }
.ms-steps { position: relative !important; }
.ms-steps::before {
content: "" !important;
position: absolute !important;
left: 16px !important;
top: 25px !important; /* padding-top 8 + circle-radius 17 = 25, mid of circle 1 */
bottom: 21px !important; /* last-child padding-bottom 4 + circle-radius 17 = 21, mid of circle N */
width: 2px !important;
background: linear-gradient(180deg, rgba(31,64,52,0.55) 0%, rgba(31,64,52,0.45) 50%, rgba(31,64,52,0.55) 100%) !important;
z-index: 0 !important;
pointer-events: none !important;
border-radius: 2px !important;
}
/* STEPS CONNECTOR FIX v2
Container-level line overshot because the LI is taller than the circle when
the body text wraps. Best approach: draw a segment on every LI except the
last, running from THIS circle's centre to the NEXT circle's centre. That's
top:25px (padding-top 8 + circle radius 17) and bottom:-25px (25px INTO the
next LI, matching padding-top 8 + radius 17). Works no matter how tall the
body text makes each row. */
.ms-steps::before { content: none !important; }
.ms-steps > li:not(:last-child)::before {
content: "" !important;
position: absolute !important;
left: 16px !important;
top: 25px !important;
bottom: -25px !important;
width: 2px !important;
background: linear-gradient(180deg, rgba(31,64,52,0.55) 0%, rgba(31,64,52,0.55) 100%) !important;
border-radius: 2px !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* LAYOUT + WEIGHT TWEAKS (off-plan header inheritance, nav + footer weight) */
/* Transparent header + hero-mini pattern catches every child of the Services
page automatically, so Off-Plan (and any future service page) inherits it. */
@media (min-width: 1025px) {
body.parent-pageid-106 [data-elementor-id="116"],
body.parent-pageid-106 [data-elementor-id="116"] .e-con,
body.parent-pageid-106 [data-elementor-id="116"] .e-con-inner {
background: transparent !important;
}
body.parent-pageid-106:not(.ms-hdr-light) [data-elementor-id="116"] .e-con a:not(.elementor-button) { color: var(--ms-bone) !important; }
body.parent-pageid-106 .ms-hero-mini { margin-top: -99px; }
body.parent-pageid-106 .ms-hero-mini {
padding-top: 116px !important;
padding-bottom: 40px !important;
min-height: 300px;
}
}
/* Header nav weight on non-home pages. */
body:not(.home) [data-elementor-id="116"] .e-con a,
body:not(.home) [data-elementor-id="116"] .e-con .menu-item > a,
body:not(.home) [data-elementor-id="116"] .e-con .elementor-nav-menu a {
font-weight: 600 !important;
}
/* Footer link and title weight (titles stay one step bolder than links). */
#xpro-theme-builder-footer a,
#xpro-theme-builder-footer li,
#xpro-theme-builder-footer p {
font-weight: 500 !important;
}
#xpro-theme-builder-footer .elementor-heading-title,
#xpro-theme-builder-footer h1,
#xpro-theme-builder-footer h2,
#xpro-theme-builder-footer h3,
#xpro-theme-builder-footer h4,
#xpro-theme-builder-footer h5,
#xpro-theme-builder-footer h6 {
font-weight: 700 !important;
letter-spacing: -0.005em;
}
/* SEO LANDING PAGES
Hand-built keyword pages opt in with post meta _ms_landing=1 -> body.ms-landing.
They share the service pages' transparent-header + compact hero. */
@media (min-width: 1025px) {
body.ms-landing:not(.ms-hdr-light) [data-elementor-id="116"],
body.ms-landing:not(.ms-hdr-light) [data-elementor-id="116"] .e-con,
body.ms-landing:not(.ms-hdr-light) [data-elementor-id="116"] .e-con-inner { background: transparent !important; }
body.ms-landing:not(.ms-hdr-light) [data-elementor-id="116"] .e-con a:not(.elementor-button) { color: var(--ms-bone) !important; }
body.ms-landing .ms-hero-mini { margin-top: -99px; }
body.ms-landing .ms-hero-mini { padding-top: 116px !important; padding-bottom: 40px !important; min-height: 300px; }
}
.ms-seeall { margin-top: 6px; }
.ms-seeall a { color: var(--ms-forest); text-decoration: none; font-weight: 600; }
.ms-seeall a:hover { color: var(--ms-deep); }
.ms-landing-cta .elementor-widget-shortcode { text-align: center; }
/* PRICE INDEX TABLES */
.ms-priceindex{ margin:8px 0; }
.ms-pi-block{ margin:0 0 28px; }
.ms-pi-h{ font-weight:700; margin:0 0 12px; }
.ms-pi-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ms-pi-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
.ms-pi-table thead th{ text-align:left; font-weight:700; color:var(--ms-bone); background:var(--ms-deep); padding:12px 14px; white-space:nowrap; }
.ms-pi-table thead th:first-child{ border-radius:8px 0 0 0; }
.ms-pi-table thead th:last-child{ border-radius:0 8px 0 0; }
.ms-pi-table td{ padding:12px 14px; border-bottom:1px solid var(--ms-border); color:var(--ms-ink); }
.ms-pi-table tbody tr:nth-child(even){ background:rgba(31,64,52,0.03); }
.ms-pi-med{ font-weight:700; color:var(--ms-forest); white-space:nowrap; }
.ms-pi-method{ font-size:13px; line-height:1.6; color:var(--ms-muted); margin:12px 0 0; max-width:80ch; }
.ms-demand{ margin:8px 0; max-width:640px; }
.ms-demand-row{ display:flex; align-items:center; gap:12px; padding:7px 0; }
.ms-demand-name{ flex:0 0 90px; font-weight:600; color:var(--ms-ink); font-size:15px; }
.ms-demand-bar{ flex:1 1 auto; height:12px; background:var(--ms-sage); border-radius:999px; overflow:hidden; }
.ms-demand-fill{ display:block; height:100%; background:linear-gradient(90deg,var(--ms-forest),var(--ms-brass)); border-radius:999px; }
.ms-demand-val{ flex:0 0 auto; font-weight:700; color:var(--ms-forest); font-size:14px; white-space:nowrap; }
/* LANDING CONTENT RAIL + CONTACT FIX */
@media (min-width:1025px){
body.ms-landing .ms-hero-mini-copy,
body.ms-landing .entry-content > .elementor > .e-con:not(.ms-hero-mini) > .e-con-inner{ max-width:1240px !important; margin-left:auto !important; margin-right:auto !important; padding-left:48px !important; padding-right:48px !important; box-sizing:border-box !important; }
body.ms-landing .ms-hero-mini-copy > .e-con-inner{ max-width:100% !important; }
body.ms-landing .ms-hero-mini h1, body.ms-landing .ms-hero-mini-copy .elementor-widget-text-editor{ max-width:720px; }
}
@media (max-width:1024px){
body.ms-landing .ms-hero-mini-copy,
body.ms-landing .entry-content > .elementor > .e-con:not(.ms-hero-mini) > .e-con-inner{ padding-left:24px !important; padding-right:24px !important; box-sizing:border-box; }
}
.ms-email{ display:inline-flex; align-items:center; gap:8px; color:var(--ms-forest); text-decoration:none !important; font-weight:600; }
.ms-email .ms-i{ width:18px; height:18px; flex:0 0 auto; }
.ms-email:hover{ color:var(--ms-deep); }
.ms-on-dark .ms-call, .ms-on-dark .ms-call *, .ms-on-dark .ms-email, .ms-on-dark .ms-email *,
.ms-landing-cta .ms-call, .ms-landing-cta .ms-call *, .ms-landing-cta .ms-email, .ms-landing-cta .ms-email *{ color:var(--ms-bone) !important; }
.ms-on-dark .ms-call:hover, .ms-on-dark .ms-email:hover, .ms-landing-cta .ms-call:hover, .ms-landing-cta .ms-email:hover{ color:var(--ms-brass) !important; }
.ms-on-dark .ms-call:hover *, .ms-on-dark .ms-email:hover *{ color:var(--ms-brass) !important; }
.ms-landing-cta .ms-call, .ms-landing-cta .ms-email{ margin-top:2px; }
/* LANDING RAIL FIX v2 - match header/footer 48px gutter + 1400 cap exactly */
@media (min-width:1025px){
body.ms-landing .ms-hero-mini{ padding-left:48px !important; padding-right:48px !important; }
body.ms-landing .ms-hero-mini-copy{ max-width:1400px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; }
body.ms-landing .entry-content > .elementor > .e-con:not(.ms-hero-mini){ padding-left:48px !important; padding-right:48px !important; }
body.ms-landing .entry-content > .elementor > .e-con:not(.ms-hero-mini) > .e-con-inner{ max-width:1400px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; }
body.ms-landing .ms-hero-mini h1, body.ms-landing .ms-hero-mini-copy .elementor-widget-text-editor{ max-width:720px; }
}
@media (max-width:1024px){
body.ms-landing .ms-hero-mini{ padding-left:24px !important; padding-right:24px !important; }
body.ms-landing .entry-content > .elementor > .e-con:not(.ms-hero-mini){ padding-left:24px !important; padding-right:24px !important; }
}
/* structured numbered points */
.ms-numbered{ list-style:none; counter-reset:msn; margin:10px 0 14px; padding:0; max-width:80ch; }
.ms-numbered li{ counter-increment:msn; position:relative; padding:2px 0 16px 46px; line-height:1.65; color:var(--ms-ink); }
.ms-numbered li:last-child{ padding-bottom:4px; }
.ms-numbered li::before{ content:counter(msn); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--ms-deep); background-image:radial-gradient(120% 120% at 30% 20%, #1F4034 0%, #12241D 60%); color:var(--ms-brass); border:1px solid rgba(210,165,72,0.3); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.ms-numbered li strong{ color:var(--ms-ink); }
/* MOBILE STICKY HEADER + LANDING STICKY LINKS */
@media (min-width:1025px){
body.ms-hdr-light.ms-landing [data-elementor-id="116"] .e-con a:not(.elementor-button),
body.ms-hdr-light.ms-landing [data-elementor-id="116"] .xpro-elementor-nav-link{ color: var(--ms-ink) !important; }
body.ms-hdr-light.ms-landing [data-elementor-id="116"] .xpro-elementor-nav-link:hover,
body.ms-hdr-light.ms-landing [data-elementor-id="116"] .current-menu-item > .xpro-elementor-nav-link{ color: var(--ms-forest) !important; }
}
@media (max-width:1024px){
header.xpro-theme-builder-header{ position: sticky !important; top: 0 !important; z-index: 999 !important; }
/* No backdrop-filter here: it makes the nav a containing block for the position:fixed
off-canvas drawer, which then adds its 320px to document width and scrolls sideways.
An opaque bar gives the same result with no containing block. */
body.ms-hdr-light nav.xpro-theme-builder-header-nav{ background: var(--ms-bone) !important; box-shadow: 0 1px 0 rgba(18,36,29,0.10); }
body.ms-hdr-light [data-elementor-id="116"], body.ms-hdr-light [data-elementor-id="116"] .e-con{ background-color: transparent !important; }
body.ms-hdr-light .xpro-elementor-horizontal-menu-toggler{ color: var(--ms-ink) !important; }
}
/* GREEN-ON-GREEN GUARD v1 */
/* Astra sets a:hover,a:focus{color:var(--ast-global-color-1)} and that token is #12241D,
so any link without its own state colour turns dark green. On a green ground that is invisible. */
/* body must not be a scroll container, or position:sticky can fail on mobile.
overflow-x:clip clips without creating one. Falls back to Astra hidden if unsupported. */
body{ overflow-x: clip; }
/* Solid green/dark buttons: light label in EVERY state. */
.ms-ab-wa, .ms-ab-wa:link, .ms-ab-wa:visited, .ms-ab-wa:hover, .ms-ab-wa:focus, .ms-ab-wa:focus-visible, .ms-ab-wa:active,
.ms-wa, .ms-wa:link, .ms-wa:visited, .ms-wa:hover, .ms-wa:focus, .ms-wa:focus-visible, .ms-wa:active,
.ms-gal-more, .ms-gal-more:link, .ms-gal-more:visited, .ms-gal-more:hover, .ms-gal-more:focus, .ms-gal-more:focus-visible, .ms-gal-more:active,
.ms-contact-row .ms-ci-wa, .ms-contact-row .ms-ci-wa:visited, .ms-contact-row .ms-ci-wa:hover, .ms-contact-row .ms-ci-wa:focus, .ms-contact-row .ms-ci-wa:active
{ color: var(--ms-bone) !important; }
/* Outlined Call button on the action bar keeps forest text on its light ground in every state. */
.ms-ab-call, .ms-ab-call:link, .ms-ab-call:visited, .ms-ab-call:hover, .ms-ab-call:focus, .ms-ab-call:focus-visible, .ms-ab-call:active
{ color: var(--ms-forest) !important; }
/* Submit buttons that darken on hover but never restated their text colour. */
.ms-search-form button, .ms-search-form button:hover, .ms-search-form button:focus, .ms-search-form button:active,
.ms-price-form button, .ms-price-form button:hover, .ms-price-form button:focus, .ms-price-form button:active,
.ms-svcform .ff-btn-submit, .ms-svcform .ff-btn-submit:hover, .ms-svcform .ff-btn-submit:focus, .ms-svcform .ff-btn-submit:active,
.ms-svcform button[type="submit"], .ms-svcform button[type="submit"]:hover, .ms-svcform button[type="submit"]:focus, .ms-svcform button[type="submit"]:active
{ color: var(--ms-bone) !important; }
/* Mobile drawer panel is #12241D, so its links must never take Astra green. */
@media (max-width:1024px){
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:visited,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:hover,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:focus,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:active
{ color: var(--ms-bone) !important; }
.xpro-elementor-horizontal-navbar-wrapper .ms-menu-cta > a.xpro-elementor-nav-link,
.xpro-elementor-horizontal-navbar-wrapper .ms-menu-cta > a.xpro-elementor-nav-link:hover,
.xpro-elementor-horizontal-navbar-wrapper .ms-menu-cta > a.xpro-elementor-nav-link:focus
{ color: var(--ms-deep) !important; }
}
/* DARK-GROUND LINK GUARD v1 */
/* The footer ground is #060F0A and dark bands are #12241D. Astra colours links
--ast-global-color-0 (#1F4034) normally and --ast-global-color-1 (#12241D) on hover,
so links there render green on green. Brass and outline buttons are excluded
because they carry their own dark-on-light treatment. */
footer#xpro-theme-builder-footer a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon),
footer#xpro-theme-builder-footer a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):link,
footer#xpro-theme-builder-footer a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited,
footer#xpro-theme-builder-footer a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
footer#xpro-theme-builder-footer a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
footer#xpro-theme-builder-footer a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
footer#xpro-theme-builder-footer a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active
{ color: var(--ms-bone) !important; }
/* Footer social icons stay muted at rest but brighten, never darken, on interaction. */
footer#xpro-theme-builder-footer a.elementor-social-icon:hover,
footer#xpro-theme-builder-footer a.elementor-social-icon:hover svg,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus svg,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus-visible,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus-visible svg,
footer#xpro-theme-builder-footer a.elementor-social-icon:active,
footer#xpro-theme-builder-footer a.elementor-social-icon:active svg
{ color: var(--ms-bone) !important; fill: var(--ms-bone) !important; }
/* Any link sitting on one of our dark bands. */
.ms-on-dark a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
.ms-on-dark a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
.ms-on-dark a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
.ms-on-dark a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active,
.ms-on-dark a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited,
.ms-hero2 a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
.ms-hero2 a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
.ms-hero2 a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
.ms-hero2 a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active,
.ms-hero2 a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited,
.ms-hero-mini a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
.ms-hero-mini a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
.ms-hero-mini a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
.ms-hero-mini a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active,
.ms-hero-mini a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited,
.ms-contact-band a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
.ms-contact-band a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
.ms-contact-band a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
.ms-contact-band a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active,
.ms-contact-band a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited,
.ms-promo a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
.ms-promo a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
.ms-promo a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
.ms-promo a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active,
.ms-promo a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited,
.ms-closing a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
.ms-closing a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
.ms-closing a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
.ms-closing a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active,
.ms-closing a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited,
.ms-landing-cta a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
.ms-landing-cta a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
.ms-landing-cta a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
.ms-landing-cta a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active,
.ms-landing-cta a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited,
.ms-video a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):hover,
.ms-video a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus,
.ms-video a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):focus-visible,
.ms-video a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):active,
.ms-video a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):visited
{ color: var(--ms-bone) !important; }
/* HEADER NAV STATE GUARD v1 */
/* Header nav links must never fall through to Astra a:focus (#12241D) on a dark header. */
[data-elementor-id="116"] .xpro-elementor-nav-link:focus,
[data-elementor-id="116"] .xpro-elementor-nav-link:focus-visible,
[data-elementor-id="116"] .xpro-elementor-nav-link:active,
[data-elementor-id="116"] .xpro-elementor-nav-link:visited
{ color: var(--ms-bone) !important; }
/* When the sticky bar is light, the same links go ink instead. */
/* Desktop only. On mobile these same links live in the DARK off-canvas drawer,
so forcing ink there would put dark green on dark green. */
@media (min-width:1025px){
body.ms-hdr-light [data-elementor-id="116"] .xpro-elementor-nav-link:focus,
body.ms-hdr-light [data-elementor-id="116"] .xpro-elementor-nav-link:focus-visible,
body.ms-hdr-light [data-elementor-id="116"] .xpro-elementor-nav-link:active,
body.ms-hdr-light [data-elementor-id="116"] .xpro-elementor-nav-link:visited
{ color: var(--ms-ink) !important; }
}
/* Mobile drawer links stay light in every state, scrolled or not. */
@media (max-width:1024px){
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link,
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:hover,
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:focus,
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:focus-visible,
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:active,
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link:visited
{ color: var(--ms-bone) !important; }
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .ms-menu-cta > a.xpro-elementor-nav-link,
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .ms-menu-cta > a.xpro-elementor-nav-link:focus,
body.ms-hdr-light .xpro-elementor-horizontal-navbar-wrapper .ms-menu-cta > a.xpro-elementor-nav-link:active
{ color: var(--ms-deep) !important; }
}
/* The brass Talk to us CTA keeps dark text on brass in every state, both header and drawer. */
[data-elementor-id="116"] .ms-menu-cta > a.xpro-elementor-nav-link,
[data-elementor-id="116"] .ms-menu-cta > a.xpro-elementor-nav-link:link,
[data-elementor-id="116"] .ms-menu-cta > a.xpro-elementor-nav-link:visited,
[data-elementor-id="116"] .ms-menu-cta > a.xpro-elementor-nav-link:hover,
[data-elementor-id="116"] .ms-menu-cta > a.xpro-elementor-nav-link:focus,
[data-elementor-id="116"] .ms-menu-cta > a.xpro-elementor-nav-link:focus-visible,
[data-elementor-id="116"] .ms-menu-cta > a.xpro-elementor-nav-link:active
{ color: var(--ms-deep) !important; }
/* GREEN GROUND GUARD v2 (components + base state) */
/* Every component whose own ground is forest or deep keeps a light label in all states. */
.ms-area-tile,
.ms-area-tile *:not(.ms-btn),
.ms-area-tile:link,
.ms-area-tile:link *:not(.ms-btn),
.ms-area-tile:visited,
.ms-area-tile:visited *:not(.ms-btn),
.ms-area-tile:hover,
.ms-area-tile:hover *:not(.ms-btn),
.ms-area-tile:focus,
.ms-area-tile:focus *:not(.ms-btn),
.ms-area-tile:focus-visible,
.ms-area-tile:focus-visible *:not(.ms-btn),
.ms-area-tile:active,
.ms-area-tile:active *:not(.ms-btn),
.ms-pagination .current,
.ms-pagination .current *:not(.ms-btn),
.ms-pagination .current:link,
.ms-pagination .current:link *:not(.ms-btn),
.ms-pagination .current:visited,
.ms-pagination .current:visited *:not(.ms-btn),
.ms-pagination .current:hover,
.ms-pagination .current:hover *:not(.ms-btn),
.ms-pagination .current:focus,
.ms-pagination .current:focus *:not(.ms-btn),
.ms-pagination .current:focus-visible,
.ms-pagination .current:focus-visible *:not(.ms-btn),
.ms-pagination .current:active,
.ms-pagination .current:active *:not(.ms-btn),
.ms-view-btn.is-on,
.ms-view-btn.is-on *:not(.ms-btn),
.ms-view-btn.is-on:link,
.ms-view-btn.is-on:link *:not(.ms-btn),
.ms-view-btn.is-on:visited,
.ms-view-btn.is-on:visited *:not(.ms-btn),
.ms-view-btn.is-on:hover,
.ms-view-btn.is-on:hover *:not(.ms-btn),
.ms-view-btn.is-on:focus,
.ms-view-btn.is-on:focus *:not(.ms-btn),
.ms-view-btn.is-on:focus-visible,
.ms-view-btn.is-on:focus-visible *:not(.ms-btn),
.ms-view-btn.is-on:active,
.ms-view-btn.is-on:active *:not(.ms-btn),
.ms-opt.is-on .ms-opt-box,
.ms-opt.is-on .ms-opt-box *:not(.ms-btn),
.ms-opt.is-on .ms-opt-box:link,
.ms-opt.is-on .ms-opt-box:link *:not(.ms-btn),
.ms-opt.is-on .ms-opt-box:visited,
.ms-opt.is-on .ms-opt-box:visited *:not(.ms-btn),
.ms-opt.is-on .ms-opt-box:hover,
.ms-opt.is-on .ms-opt-box:hover *:not(.ms-btn),
.ms-opt.is-on .ms-opt-box:focus,
.ms-opt.is-on .ms-opt-box:focus *:not(.ms-btn),
.ms-opt.is-on .ms-opt-box:focus-visible,
.ms-opt.is-on .ms-opt-box:focus-visible *:not(.ms-btn),
.ms-opt.is-on .ms-opt-box:active,
.ms-opt.is-on .ms-opt-box:active *:not(.ms-btn),
.ms-otherserv-item.is-active,
.ms-otherserv-item.is-active *:not(.ms-btn),
.ms-otherserv-item.is-active:link,
.ms-otherserv-item.is-active:link *:not(.ms-btn),
.ms-otherserv-item.is-active:visited,
.ms-otherserv-item.is-active:visited *:not(.ms-btn),
.ms-otherserv-item.is-active:hover,
.ms-otherserv-item.is-active:hover *:not(.ms-btn),
.ms-otherserv-item.is-active:focus,
.ms-otherserv-item.is-active:focus *:not(.ms-btn),
.ms-otherserv-item.is-active:focus-visible,
.ms-otherserv-item.is-active:focus-visible *:not(.ms-btn),
.ms-otherserv-item.is-active:active,
.ms-otherserv-item.is-active:active *:not(.ms-btn),
.ms-svctile:first-child,
.ms-svctile:first-child *:not(.ms-btn),
.ms-svctile:first-child:link,
.ms-svctile:first-child:link *:not(.ms-btn),
.ms-svctile:first-child:visited,
.ms-svctile:first-child:visited *:not(.ms-btn),
.ms-svctile:first-child:hover,
.ms-svctile:first-child:hover *:not(.ms-btn),
.ms-svctile:first-child:focus,
.ms-svctile:first-child:focus *:not(.ms-btn),
.ms-svctile:first-child:focus-visible,
.ms-svctile:first-child:focus-visible *:not(.ms-btn),
.ms-svctile:first-child:active,
.ms-svctile:first-child:active *:not(.ms-btn),
.ms-video-play,
.ms-video-play *:not(.ms-btn),
.ms-video-play:link,
.ms-video-play:link *:not(.ms-btn),
.ms-video-play:visited,
.ms-video-play:visited *:not(.ms-btn),
.ms-video-play:hover,
.ms-video-play:hover *:not(.ms-btn),
.ms-video-play:focus,
.ms-video-play:focus *:not(.ms-btn),
.ms-video-play:focus-visible,
.ms-video-play:focus-visible *:not(.ms-btn),
.ms-video-play:active,
.ms-video-play:active *:not(.ms-btn),
.ms-wa-primary,
.ms-wa-primary *:not(.ms-btn),
.ms-wa-primary:link,
.ms-wa-primary:link *:not(.ms-btn),
.ms-wa-primary:visited,
.ms-wa-primary:visited *:not(.ms-btn),
.ms-wa-primary:hover,
.ms-wa-primary:hover *:not(.ms-btn),
.ms-wa-primary:focus,
.ms-wa-primary:focus *:not(.ms-btn),
.ms-wa-primary:focus-visible,
.ms-wa-primary:focus-visible *:not(.ms-btn),
.ms-wa-primary:active,
.ms-wa-primary:active *:not(.ms-btn)
{ color: var(--ms-bone) !important; }
/* Dark bands: also cover the resting state, not just interaction. Brass and outline
buttons keep their own dark-on-light treatment. */
.ms-on-dark a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon),
.ms-on-dark a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):link,
.ms-on-dark .ms-crumb a,
.ms-hero2 a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon),
.ms-hero2 a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):link,
.ms-hero2 .ms-crumb a,
.ms-hero-mini a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon),
.ms-hero-mini a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):link,
.ms-hero-mini .ms-crumb a,
.ms-contact-band a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon),
.ms-contact-band a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):link,
.ms-contact-band .ms-crumb a,
.ms-promo a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon),
.ms-promo a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):link,
.ms-promo .ms-crumb a,
.ms-closing a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon),
.ms-closing a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):link,
.ms-closing .ms-crumb a,
.ms-landing-cta a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon),
.ms-landing-cta a:not(.ms-btn):not(.ms-btn-outline):not(.elementor-button):not(.elementor-social-icon):link,
.ms-landing-cta .ms-crumb a
{ color: var(--ms-bone) !important; }
/* LIVE INVISIBILITY FIXES (session 27) */
/* Mortgage Reset link. Astra button:hover/focus (0,1,1) paints Deep Forest
ground and the theme (0,1,0) loses. Pin every state. */
.ms-mort-reset, .ms-mort-reset:hover, .ms-mort-reset:focus,
.ms-mort-reset:focus-visible, .ms-mort-reset:active {
background: none !important;
background-color: transparent !important;
border-color: transparent !important;
color: var(--ms-forest) !important;
}
/* Mortgage Calculate. Same Astra hover/focus repaint erases brass ground. */
.ms-mort-go, .ms-mort-go:hover, .ms-mort-go:focus,
.ms-mort-go:focus-visible, .ms-mort-go:active {
background-color: var(--ms-brass) !important;
border-color: var(--ms-brass) !important;
color: var(--ms-deep) !important;
}
/* Mobile filter and search icon buttons. Same Astra repaint erases the icon. */
@media (max-width:1024px){
.ms-filters-open, .ms-filters-open:hover, .ms-filters-open:focus,
.ms-filters-open:focus-visible, .ms-filters-open:active,
.ms-open-search, .ms-open-search:hover, .ms-open-search:focus,
.ms-open-search:focus-visible, .ms-open-search:active {
background: var(--ms-white) !important;
background-color: var(--ms-white) !important;
color: var(--ms-ink) !important;
border-color: var(--ms-border) !important;
}
.ms-filters-open .ms-i, .ms-filters-open:hover .ms-i, .ms-filters-open:focus .ms-i,
.ms-filters-open:focus-visible .ms-i, .ms-filters-open:active .ms-i,
.ms-open-search .ms-i, .ms-open-search:hover .ms-i, .ms-open-search:focus .ms-i,
.ms-open-search:focus-visible .ms-i, .ms-open-search:active .ms-i {
color: var(--ms-forest) !important;
}
}
/* Footer social icons on hover: the earlier guard forced bone on the brass pill
(~2.1:1). Keep brass pill, darken the glyph. */
footer#xpro-theme-builder-footer a.elementor-social-icon:hover,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus-visible,
footer#xpro-theme-builder-footer a.elementor-social-icon:active {
background-color: var(--ms-brass) !important;
}
footer#xpro-theme-builder-footer a.elementor-social-icon:hover svg,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus svg,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus-visible svg,
footer#xpro-theme-builder-footer a.elementor-social-icon:active svg,
footer#xpro-theme-builder-footer a.elementor-social-icon:hover i,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus i,
footer#xpro-theme-builder-footer a.elementor-social-icon:focus-visible i,
footer#xpro-theme-builder-footer a.elementor-social-icon:active i {
fill: var(--ms-deep) !important;
color: var(--ms-deep) !important;
}
/* Header brass CTA: restate its own dark ink so container-wide link rules
cannot make it bone-on-brass. Belt and braces beyond the :not(.elementor-button) exclusions. */
[data-elementor-id="116"] a.elementor-button,
[data-elementor-id="116"] a.elementor-button:link,
[data-elementor-id="116"] a.elementor-button:visited,
[data-elementor-id="116"] a.elementor-button:hover,
[data-elementor-id="116"] a.elementor-button:focus,
[data-elementor-id="116"] a.elementor-button:focus-visible,
[data-elementor-id="116"] a.elementor-button:active
{ color: var(--ms-deep) !important; }
/* FOOTER 6-COLUMN FIT */
@media (min-width:1025px){
.elementor-element-d4bf35a > .e-con-inner{
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 16px !important;
align-items: flex-start !important;
}
.elementor-element-d4bf35a > .e-con-inner > .e-con:not(.elementor-element-15b0545){
flex: 0 1 auto !important;
width: auto !important;
max-width: none !important;
}
.elementor-element-d4bf35a > .e-con-inner > .elementor-element-15b0545{
flex: 0 0 235px !important;
width: 235px !important;
max-width: 235px !important;
}
footer#xpro-theme-builder-footer .elementor-widget-social-icons .elementor-grid{ column-gap:8px !important; row-gap:8px !important; }
}
/* Footer links: heavier weight for visibility on the dark ground. */
footer#xpro-theme-builder-footer .elementor-icon-list-text{ font-size:14px; line-height:1.75; font-weight:500 !important; }
/* FOOTER COMPANY LINK WRAP */
@media (min-width:1025px){
/* Wrap the one long Company label so its column width matches the others. */
.elementor-element-916ae69 .elementor-icon-list-text{ max-width:130px; white-space:normal; display:inline-block; }
}
/* FOOTER LOGO TEXT + STICKY NAV WEIGHT */
/* Footer brand-column strapline and location line at weight 500. */
.elementor-element-15b0545 .elementor-widget-text-editor,
.elementor-element-15b0545 .elementor-widget-text-editor p{ font-weight:500 !important; }
/* Keep the header nav link weight the same when the sticky (light) header engages
as it is at the top. These pages carry weight 600; without this the sticky state
dropped back to the 500 default. */
body.home [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-106 [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-193 [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-195 [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-197 [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-199 [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-201 [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-203 [data-elementor-id="116"] .xpro-elementor-nav-link,
body.page-id-206 [data-elementor-id="116"] .xpro-elementor-nav-link{ font-weight:600 !important; }
/* INSIGHTS ARTICLE */
body.ms-article .ms-article-hero h1, body.ms-article .ms-article-hero .xpro-post-title, body.ms-article .ms-article-hero .elementor-widget-xpro-post-title .elementor-widget-container{ color:var(--ms-bone) !important; max-width:820px; }
body.ms-article .ms-postmeta{ color:rgba(244,247,243,0.72) !important; font-size:14px; margin:10px 0 0; }
body.ms-article .ms-article-flow{ padding-top:44px; padding-bottom:8px; }
body.ms-article .ms-article-flow > .e-con-inner{ /* full rail via body.ms-landing rules */ }
body.ms-article .ms-article-flow p, body.ms-article .ms-article-flow li{ font-size:18px; line-height:1.8; color:var(--ms-ink); }
body.ms-article .ms-article-flow h2{ font-size:28px; line-height:1.25; margin:1.8em 0 0.5em; color:var(--ms-deep); }
body.ms-article .ms-article-flow h3{ font-size:21px; line-height:1.3; margin:1.5em 0 0.4em; color:var(--ms-deep); }
body.ms-article .ms-article-flow p{ margin:0 0 1.1em; }
body.ms-article .ms-article-flow ul, body.ms-article .ms-article-flow ol{ margin:0 0 1.2em 1.2em; }
body.ms-article .ms-article-flow li{ margin:0 0 0.5em; }
body.ms-article .ms-article-flow a{ color:var(--ms-forest); text-decoration:underline; text-underline-offset:2px; }
body.ms-article .ms-article-flow a:hover{ color:var(--ms-deep); }
body.ms-article .ms-article-flow blockquote{ border-left:3px solid var(--ms-brass); margin:1.6em 0; padding:2px 0 2px 20px; font-size:20px; line-height:1.6; color:var(--ms-deep); }
/* INTERACTIVE CHECKLIST */
.ms-checklist{ background:var(--ms-sage); border:1px solid var(--ms-border); border-radius:16px; padding:22px 24px; margin:1.9em 0; }
.ms-cl-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ms-cl-title{ margin:0 !important; font-size:19px !important; color:var(--ms-deep) !important; }
.ms-cl-tools{ display:flex; align-items:center; gap:10px; }
.ms-cl-progress{ font-size:13px; color:var(--ms-muted); font-weight:600; }
.ms-cl-print, .ms-cl-reset{ background:transparent; border:1px solid var(--ms-forest); color:var(--ms-forest); border-radius:999px; padding:5px 14px; font-size:13px; font-weight:600; cursor:pointer; line-height:1.2; }
.ms-cl-print:hover, .ms-cl-reset:hover, .ms-cl-print:focus, .ms-cl-reset:focus{ background:var(--ms-forest); color:var(--ms-bone); }
.ms-cl-list{ list-style:none !important; margin:0 !important; padding:0 !important; }
.ms-cl-item{ margin:0 0 2px !important; }
.ms-cl-item label{ display:flex; align-items:flex-start; gap:12px; padding:9px 12px; border-radius:10px; cursor:pointer; margin:0; }
.ms-cl-item label:hover{ background:rgba(255,255,255,0.6); }
.ms-cl-box{ margin:3px 0 0 !important; width:18px; height:18px; flex:0 0 auto; accent-color:var(--ms-forest); cursor:pointer; }
.ms-cl-text{ font-size:16px !important; line-height:1.6 !important; color:var(--ms-ink) !important; }
.ms-cl-box:checked ~ .ms-cl-text{ color:var(--ms-muted) !important; text-decoration:line-through; }
.ms-checklist.is-complete{ border-color:var(--ms-forest); background:#DCE6DC; }
@media print{ header.xpro-theme-builder-header, footer#xpro-theme-builder-footer, .ms-actionbar, .ms-landing-cta, .ms-cl-tools{ display:none !important; } .ms-checklist{ border:1px solid #999; background:#fff; } }
/* ARTICLE IMAGE SLOTS - branded, labelled placeholders the client replaces in Elementor */
body.ms-article .ms-imgslot{ margin:2.2em 0; position:relative; width:100%; aspect-ratio:16/9; max-height:440px; background:var(--ms-sage) !important; border:2px dashed var(--ms-border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
body.ms-article .ms-imgslot img[src*="placeholder"]{ opacity:0; position:absolute; inset:0; width:100%; height:100%; }
body.ms-article .ms-imgslot::before{ content:""; width:48px; height:48px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%235E6B63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center/contain; opacity:.9; }
body.ms-article .ms-imgslot::after{ content:none; color:var(--ms-muted); font-size:14px; font-weight:600; letter-spacing:.03em; }
body.ms-article .ms-imgslot:has(img:not([src*="placeholder"])){ aspect-ratio:auto; max-height:none; background:none !important; border:0; }
body.ms-article .ms-imgslot:has(img:not([src*="placeholder"]))::before, body.ms-article .ms-imgslot:has(img:not([src*="placeholder"]))::after{ content:none; }
body.ms-article .ms-imgslot img:not([src*="placeholder"]){ position:static; opacity:1; width:100%; height:auto; display:block; }
@media (max-width:600px){ body.ms-article .ms-imgslot{ aspect-ratio:16/9; max-height:none; border-radius:12px; } }
/* CTA band: dark ground so WhatsApp, phone and email read clearly (matches landing; set in Elementor too, this is a safety net). */
body.ms-article .ms-landing-cta{ background-color:var(--ms-deep); }
/* Comment submit: centred within the form column, not left-hugging. */
body.ms-article .form-submit{ text-align:center; }
/* ============ ARTICLE POLISH (Part A) ============ */
/* Hide the empty Astra post-title header that pushed the dark hero down 19px.
With it gone the hero sits flush behind the transparent sticky header,
exactly like the landing pages. */
body.ms-article .entry-header.ast-header-without-markup{ display:none !important; }
/* Pull the hero up by the real header height (set as --ms-hdr-h in bands.js),
so the hero top is 0 at every width without hard coding a per breakpoint value. */
body.ms-article .ms-hero-mini{ margin-top: calc( -1 * var(--ms-hdr-h, 99px) ); }
/* Breathing room between the dark hero and the first body content. */
body.ms-article .ms-article-flow{ padding-top:48px; }
@media (max-width:600px){ body.ms-article .ms-article-flow{ padding-top:32px; } }
/* ---- Comment area: centred column, brand styling, mobile first ---- */
body.ms-article #comments,
body.ms-article .comments-area,
body.ms-article #respond,
body.ms-article .comment-respond{ max-width:720px; margin-left:auto; margin-right:auto; }
body.ms-article .comment-respond .comment-reply-title{ font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; color:var(--ms-ink); margin-bottom:0.4em; }
body.ms-article .comment-form{ display:flex; flex-direction:column; gap:16px; }
body.ms-article .comment-form p{ margin:0; }
body.ms-article .comment-form label{ display:block; font-weight:600; color:var(--ms-ink); margin-bottom:6px; }
body.ms-article .comment-form input[type=text],
body.ms-article .comment-form input[type=email],
body.ms-article .comment-form input[type=url],
body.ms-article .comment-form textarea{ width:100%; box-sizing:border-box; font-family:inherit; font-size:16px; color:var(--ms-ink); background:var(--ms-white); border:1px solid var(--ms-border); border-radius:8px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
body.ms-article .comment-form textarea{ min-height:140px; resize:vertical; }
body.ms-article .comment-form input:focus,
body.ms-article .comment-form textarea:focus{ outline:none; border-color:var(--ms-forest); box-shadow:0 0 0 3px rgba(31,64,52,0.15); }
body.ms-article .comment-form .comment-form-cookies-consent{ display:flex; align-items:flex-start; gap:10px; }
body.ms-article .comment-form .comment-form-cookies-consent input{ width:auto; margin-top:3px; }
body.ms-article .comment-form .comment-form-cookies-consent label{ margin:0; font-weight:400; color:var(--ms-muted); }
body.ms-article .form-submit{ margin:0; }
body.ms-article .comment-form input#submit,
body.ms-article .comment-form .form-submit input[type=submit]{ -webkit-appearance:none; appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 28px; font-family:inherit; font-size:16px; font-weight:600; color:var(--ms-bone); background:var(--ms-forest); border:0; border-radius:8px; transition:background .15s ease, transform .05s ease; }
body.ms-article .comment-form input#submit:hover,
body.ms-article .comment-form .form-submit input[type=submit]:hover{ background:var(--ms-deep); }
body.ms-article .comment-form input#submit:active,
body.ms-article .comment-form .form-submit input[type=submit]:active{ transform:translateY(1px); }
/* Honeypot decoy: a real person never sees it, so it stays empty. */
.ms-cg-field{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
@media (max-width:600px){
body.ms-article .comment-form input#submit,
body.ms-article .comment-form .form-submit input[type=submit]{ width:100%; }
}
/* ARTICLE SPACING + MOBILE TYPE (Part A follow-up) */
body.ms-article .ms-landing-cta{ margin-top:64px; }
@media (max-width:600px){
body.ms-article .ms-landing-cta{ margin-top:40px; }
body.ms-article .ms-article-flow p, body.ms-article .ms-article-flow li, body.ms-article .ms-cl-text{ font-size:16px; line-height:1.62; }
body.ms-article .ms-article-flow h2{ font-size:22px; line-height:1.25; }
body.ms-article .ms-article-flow h3{ font-size:18px; }
}
/* FOOTER LINK LEGIBILITY: lift links + tagline a notch, still dimmer than the column headings. */
#xpro-theme-builder-footer .elementor-icon-list-text,
#xpro-theme-builder-footer .elementor-widget-text-editor,
#xpro-theme-builder-footer .elementor-widget-text-editor p{ color:rgba(244,247,243,0.86) !important; }
/* Checklist: Download PDF is the primary action. */
.ms-cl-pdf{ background:var(--ms-forest); border:1px solid var(--ms-forest); color:var(--ms-bone); border-radius:999px; padding:5px 14px; font-size:13px; font-weight:600; cursor:pointer; line-height:1.2; }
.ms-cl-pdf:hover, .ms-cl-pdf:focus{ background:var(--ms-deep); border-color:var(--ms-deep); color:var(--ms-bone); }
.ms-cl-pdf[disabled]{ opacity:.6; cursor:default; }