/*
  Home corrections, rounds one and two (7 September 2026).

  Round one: brass rules reading as underlines, underlined icons and cards,
  invisible eyebrows on dark, square corners, no seam before the footer.
  Round two: hero above the fold with a guaranteed left-weighted green veil,
  full-rail search with an expandable panel, staggered entrances, compact
  featured cards, real marquee logos, a reusable mini hero for inner pages,
  and the mortgage calculator. Reasons stay next to the rules.
*/

/* ---------------------------------------------------------------- 1. RULES */
.ms-hrule::after { display: none !important; }
.ms-rule-on::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	background: var(--ms-brass);
	margin-top: 18px;
	border-radius: 2px;
}

/* ---------------------------------------------------------- 2. UNDERLINES */
.ms-type, .ms-scard, .ms-card, .ms-contact-row, .ms-arrow, .ms-promo a,
.ms-area-tile, .ms-postcard, .ms-tab-more, .ms-btn, .ms-marquee a, .ms-upcard,
.ms-type *, .ms-scard *, .ms-contact-row *, .ms-arrow *, .ms-postcard * {
	text-decoration: none !important;
}

/* ------------------------------------------------------------ 3. EYEBROWS */
.ms-eyebrow,
.ms-eyebrow .elementor-heading-title {
	font-family: var(--ms-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ms-muted);
}
.ms-on-dark .ms-eyebrow, .ms-on-dark .ms-eyebrow .elementor-heading-title,
.ms-hero2 .ms-eyebrow, .ms-hero2 .ms-eyebrow .elementor-heading-title,
.ms-hero-mini .ms-eyebrow, .ms-hero-mini .ms-eyebrow .elementor-heading-title {
	color: var(--ms-brass) !important;
}
.ms-on-dark h1, .ms-on-dark h2, .ms-on-dark h3, .ms-on-dark .elementor-heading-title,
.ms-hero2 h1, .ms-hero2 .elementor-heading-title,
.ms-hero-mini h1, .ms-hero-mini .elementor-heading-title { color: var(--ms-bone); }
.ms-on-dark .ms-lede, .ms-hero2 .ms-lede, .ms-hero-mini .ms-lede { color: rgba(244, 247, 243, 0.85); }

/* ----------------------------------------------------------- 4. NO SQUARE */
.e-con img, .elementor-widget-image img, .ms-scard-img, .ms-video,
.ms-organic-a, .ms-organic-b { border-radius: var(--ms-radius-lg); }
.ms-organic-a { border-radius: 50%; }
.ms-organic-b { border-radius: 999px 999px var(--ms-radius-lg) var(--ms-radius-lg); }
.ms-scard-img img, .ms-postcard-img { border-radius: 0; }
.ms-scard { border-radius: var(--ms-radius-lg); overflow: hidden; }
.ms-hero2 img { border-radius: 0; }

/* ---------------------------------------------------------------- 5. HERO
   Everything above the fold, and the veil painted by CSS so no builder
   setting can silently drop it again. Dense forest on the left where the
   copy sits, thinning right so the footage reads. */
.ms-hero2 {
	position: relative;
	background-color: var(--ms-deep);
	min-height: calc(100vh - 84px);
	display: flex;
	align-items: center;
}
.ms-hero2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg,
			rgba(18, 36, 29, 0.96) 0%,
			rgba(18, 36, 29, 0.82) 34%,
			rgba(18, 36, 29, 0.46) 60%,
			rgba(18, 36, 29, 0.08) 88%),
		linear-gradient(rgba(31, 64, 52, 0.28), rgba(31, 64, 52, 0.28));
}
.ms-hero2 > .e-con-inner, .ms-hero2 > .e-con, .ms-hero2 .ms-hero2-copy { position: relative; z-index: 2; }
.ms-hero2 .elementor-background-video-container { z-index: 0; }
.ms-hero2-copy { max-width: 640px; }
.ms-hero2 h1 { text-wrap: balance; }
@media (max-width: 900px) {
	.ms-hero2 { min-height: 0; }
	.ms-hero2::before {
		background:
			linear-gradient(rgba(18, 36, 29, 0.9), rgba(18, 36, 29, 0.82)),
			linear-gradient(rgba(31, 64, 52, 0.25), rgba(31, 64, 52, 0.25));
	}
	.ms-hero2-copy { max-width: none; }
}

/* --------------------------------------------- 5b. SEARCH ROW AND PANEL
   One row across the full rail, with More filters expanding a panel inside
   the same card. The panel's groups come from the live filter config, so a
   group added in Properties > Filters appears here on its own. */
.ms-hero2 .ms-hsearch { max-width: none; width: 100%; }
.ms-hsearch.ms-hsearch-x { display: block; padding: 14px 14px 12px; max-width: none; }
.ms-hs-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1.25fr auto auto;
	gap: 10px;
	align-items: end;
}
.ms-hs-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	background: var(--ms-white);
	color: var(--ms-ink);
	font: 600 14px/1 var(--ms-font-body);
	cursor: pointer;
	white-space: nowrap;
}
.ms-hs-more::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid var(--ms-muted);
	border-bottom: 2px solid var(--ms-muted);
	transform: rotate(45deg) translateY(-2px);
}
.ms-hs-more[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.ms-hs-more:hover { border-color: var(--ms-forest); color: var(--ms-forest); }
.ms-hs-panel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding-top: 12px;
	margin-top: 12px;
	border-top: 1px solid var(--ms-border);
}
.ms-hs-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.ms-hs-more::after { transition: transform 0.2s ease; }
}
@media (max-width: 900px) {
	.ms-hs-row { grid-template-columns: 1fr 1fr; }
	.ms-hs-row .ms-hsearch-go { grid-column: 2; }
	.ms-hs-panel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ms-hs-row { grid-template-columns: 1fr; }
	.ms-hs-row .ms-hsearch-go, .ms-hs-row .ms-hs-more { grid-column: 1; width: 100%; justify-content: center; }
	.ms-hs-panel { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- 5c. MINI HERO, INNER PAGES
   The same veil logic at archive and service page scale: a Kampala aerial
   behind, dense left, open right, compact height. */
.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: center 30%;
}
.ms-hero-mini::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			rgba(18, 36, 29, 0.95) 0%,
			rgba(18, 36, 29, 0.78) 42%,
			rgba(18, 36, 29, 0.3) 78%,
			rgba(18, 36, 29, 0.12) 100%),
		linear-gradient(rgba(31, 64, 52, 0.25), rgba(31, 64, 52, 0.25));
}
.ms-hero-mini > * { position: relative; }
@media (max-width: 900px) {
	.ms-hero-mini::before {
		background:
			linear-gradient(rgba(18, 36, 29, 0.9), rgba(18, 36, 29, 0.84)),
			linear-gradient(rgba(31, 64, 52, 0.25), rgba(31, 64, 52, 0.25));
	}
}

/* ------------------------------------------------------ 6. LOGO MARQUEE */
.ms-marquee-wrap { overflow: hidden; position: relative; }
.ms-marquee-wrap::before, .ms-marquee-wrap::after {
	content: "";
	position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.ms-marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--ms-bone), rgba(244,247,243,0)); }
.ms-marquee-wrap::after  { right: 0; background: linear-gradient(270deg, var(--ms-bone), rgba(244,247,243,0)); }
.ms-marquee { display: flex; width: max-content; }
.ms-marquee-track { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.ms-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	font: 600 15px/1.2 var(--ms-font-body);
	color: var(--ms-muted);
}
/* Grayscale at rest so three red heavy marks do not fight the page or each
   other; full colour on hover keeps recognition. */
.ms-marquee-item img {
	height: 40px;
	width: auto;
	display: block;
	border-radius: 0;
	filter: grayscale(1);
	opacity: 0.68;
}
@media (prefers-reduced-motion: no-preference) {
	.ms-marquee { animation: ms-marq 34s linear infinite; }
	.ms-marquee-wrap:hover .ms-marquee { animation-play-state: paused; }
	.ms-marquee-item img { transition: filter 0.25s ease, opacity 0.25s ease; }
}
.ms-marquee-item:hover img { filter: none; opacity: 1; }
@media (max-width: 700px) { .ms-marquee-item img { height: 28px; } .ms-marquee-track { gap: 40px; padding-right: 40px; } }
@keyframes ms-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ms-marquee-wrap { overflow-x: auto; } .ms-marquee { animation: none; } }

/* ------------------------------------------------------------- 7. CONTACT */
.ms-contact-band {
	position: relative;
	background:
		radial-gradient(120% 90% at 88% 8%, rgba(210,165,72,0.16) 0%, rgba(210,165,72,0) 58%),
		radial-gradient(110% 80% at 4% 96%, rgba(31,64,52,0.14) 0%, rgba(31,64,52,0) 62%),
		var(--ms-bone);
}
.ms-contact-band::before {
	content: "";
	position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(var(--ms-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--ms-border) 1px, transparent 1px);
	background-size: 64px 64px;
	opacity: 0.28;
	-webkit-mask-image: radial-gradient(80% 65% at 50% 40%, #000 0%, transparent 78%);
	mask-image: radial-gradient(80% 65% at 50% 40%, #000 0%, transparent 78%);
}
.ms-contact-band > * { position: relative; z-index: 1; }

/* -------------------------------------------------------- 8. CLOSING SEAM */
.ms-closing { border-bottom: 3px solid var(--ms-brass); }
.ms-closing .ms-lede { max-width: 54ch; }

/* ----------------------------------------------------------- 9. FACTS */
.ms-fact-n { font-size: 40px; }
@media (max-width: 700px) { .ms-fact-n { font-size: 32px; } .ms-facts { gap: 30px; } }

/* ------------------------------------------- 10. FEATURED, COMPACT CARDS
   Two rows of three must scan without a scrolling task per card: shorter
   image, tighter body, smaller price and title, and the tabs centred. */
.ms-tabs .ms-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ms-tabs-nav.ms-tabs-center { justify-content: center; }
.ms-tabs .ms-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.ms-tabs .ms-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ms-tabs .ms-card-body { padding: 14px 16px 12px; gap: 4px; }
.ms-tabs .ms-price { font-size: 18px; }
.ms-tabs .ms-card-title { font-size: 15px; }
.ms-tabs .ms-card-where, .ms-tabs .ms-card-specs { font-size: 12.5px; }
@media (max-width: 1024px) { .ms-tabs .ms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .ms-tabs .ms-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.ms-tabs .ms-card-body { padding: 10px 11px 10px; }
	.ms-tabs .ms-price { font-size: 15px; }
	.ms-tabs .ms-card-title { font-size: 13px; }
}

/* ------------------------------------------------- 11. INSIGHTS UPCOMING */
.ms-upgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ms-upcard {
	display: flex; flex-direction: column; gap: 10px;
	padding: 22px 22px 20px;
	background: var(--ms-white);
	border: 1px dashed var(--ms-border);
	border-radius: var(--ms-radius-lg);
}
.ms-upcard-tag {
	align-self: flex-start;
	font: 600 11px/1 var(--ms-font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ms-forest);
	background: var(--ms-sage);
	padding: 6px 10px;
	border-radius: var(--ms-radius-pill);
}
.ms-upcard h3 { font: 700 18px/1.3 var(--ms-font-head); color: var(--ms-ink); margin: 0; }
.ms-upcard p { font: 400 14px/1.55 var(--ms-font-body); color: var(--ms-muted); margin: 0; }
@media (max-width: 900px) { .ms-upgrid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- 12. MORTGAGE TOOL */
.ms-mort { display: flex; flex-direction: column; gap: 12px; }
.ms-mort-f { display: flex; flex-direction: column; gap: 5px; }
.ms-mort-f > span { font: 600 11px/1 var(--ms-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-muted); }
.ms-mort-f input, .ms-mort-f select {
	min-height: 44px; padding: 8px 12px;
	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); width: 100%;
}
.ms-mort-f input:focus, .ms-mort-f select:focus { outline: 2px solid var(--ms-forest); outline-offset: 1px; }
.ms-mort-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-mort-out {
	margin-top: 2px; padding: 14px 16px;
	background: var(--ms-sage); border-radius: var(--ms-radius);
}
.ms-mort-out b { display: block; font: 700 22px/1.2 var(--ms-font-body); color: var(--ms-ink); }
.ms-mort-out span { font: 400 12.5px/1.45 var(--ms-font-body); color: var(--ms-muted); }
.ms-mort-note { font: 400 12px/1.5 var(--ms-font-body); color: var(--ms-muted); margin: 0; }

/* ------------------------------------------------------------- 13. MOTION
   Fail safe unchanged: hidden states only under .ms-js. Stagger children
   are handed incremental delays by bands.js. */
@media (prefers-reduced-motion: no-preference) {
	.ms-js .ms-rise, .ms-js .ms-fade, .ms-js .ms-settle { will-change: transform, opacity; }
	.ms-js .ms-rise   { opacity: 0; transform: translateY(44px) scale(0.97); }
	.ms-js .ms-fade   { opacity: 0; transform: translateY(14px); }
	.ms-js .ms-settle { opacity: 0; transform: translateY(26px); }
	.ms-js .ms-rise.is-in, .ms-js .ms-fade.is-in, .ms-js .ms-settle.is-in {
		opacity: 1; transform: none;
		transition:
			opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: var(--ms-d, 0s);
		will-change: auto;
	}
	.ms-js .ms-stagger > * { opacity: 0; transform: translateY(30px); }
	.ms-js .ms-stagger > .is-in {
		opacity: 1; transform: none;
		transition:
			opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: var(--ms-d, 0s);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ms-rise, .ms-fade, .ms-settle, .ms-stagger > * { opacity: 1 !important; transform: none !important; }
}