/* ==========================================================================
   Elementor Custom Fonts
   Source: Elementor > Custom Fonts (elementor_font: Inter #14, Plantin #17)
   ========================================================================== */

/* ---------- Inter ---------- */
@font-face {
	font-family: "Inter";
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Inter-Light.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Inter-ExtraBold.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Inter-Black.woff2") format("woff2");
}

/* ---------- Plantin ---------- */
@font-face {
	font-family: "Plantin";
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Plantin Light.woff2") format("woff2");
}
@font-face {
	font-family: "Plantin";
	font-weight: 300;
	font-style: italic;
	font-display: swap;
	src: url("../../../../uploads/ai-fonts/Plantin Light Italic.woff2") format("woff2");
}

/* ==========================================================================
   Design tokens  (from XD: DEVRON_1Marlborough_FULLWEBSITE_V4-0)
   ========================================================================== */
:root {
	/* --- Font families --- */
	--font-inter: "Inter", sans-serif;
	--font-plantin: "Plantin", serif;
	--font-heading: var(--font-plantin);
	--font-body: var(--font-inter);

	/* --- Font weights --- */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;
	--fw-black: 900;

	/* --- Colors --- */
	--color-white: #ffffff;
	--color-cream: #f2efea;   /* off-white nền chủ đạo */
	--color-ink: #1a1818;     /* text chính (gần đen) */
	--color-dark: #2e2e2e;    /* xám đậm */
	--color-gray: #6d6e71;    /* xám nhạt */
	--color-black: #000000;

	/* Semantic aliases */
	--color-bg: var(--color-cream);
	--color-text: var(--color-ink);
	--color-text-muted: var(--color-gray);
	--color-heading: var(--color-ink);

	/* --- Layout --- */
	--design-width: 1920px;   /* khung thiết kế gốc */
	--container-max: 1340px;  /* bề rộng nội dung chuẩn */
	--gutter: 30px;

	/* --- Type scale --- XD size minus 2px (site-wide rule) --- */
	--fs-display: 60px;  /* XD 70 -10 (>30px) */
	--fs-h1: 40px;       /* XD 50 -10 (>30px) */
	--fs-h2: 30px;       /* XD 40 -10 (>30px) */
	--fs-h3: 28px;       /* XD 30 -2 */
	--fs-lead: 16px;     /* XD 18 */
	--fs-base: 14px;     /* XD 16 */
	--fs-body: 12px;     /* XD 14 */
	--fs-sm: 10px;       /* XD 12 */
	--fs-xs: 8px;        /* XD 10 */

	/* --- Misc --- */
	--header-h-solid: 85px;   /* height of the solid (no-hero) header */

	--letter-spacing-wide: 0.08em;  /* các nhãn uppercase: MENU, SCROLL, INQUIRE */
	--line-height-body: 1.4;   /* client #68 + #85: one body leading site-wide, a touch more open */
	--line-height-heading: 1.2;

	/* --- Heading line-heights — unified to 1.2 (user rule) --- */
	--lh-h1: 1.2;
	--lh-h2: 1.2;
	--lh-h3: 1.2;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY (single source of truth — do NOT set font/size/line-height
   per widget in Elementor). Body copy = Plantin serif, line-height 1.2 site-wide.
   Headings use the --fs-* token scale below. Uppercase UI labels use .mb-label.
   ========================================================================== */
body {
	font-family: var(--font-plantin);
	font-size: var(--fs-lead);          /* 16px base body text */
	line-height: var(--line-height-body);
	color: var(--color-ink);
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
/* Elementor Text-editor + list widgets inherit the global body type */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
	font-family: var(--font-plantin);
	font-size: var(--fs-lead);
	line-height: var(--line-height-body);
	color: var(--color-ink);
}
.elementor-widget-heading .elementor-heading-title { line-height: 1.2; }

/* Shared uppercase label (CTA links, captions, form labels) — replaces the old
   per-widget Inter/uppercase/letter-spacing settings. Add class "mb-label". */
.mb-label,
.mb-label p,
.mb-label a,
.mb-label .elementor-heading-title {
	font-family: var(--font-inter);
	font-size: var(--fs-body);          /* 12px */
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-ink);
}

/* ==========================================================================
   Base typography — the DEFAULT for every h1/h2/h3 (and Elementor headings).
   Size = XD − 2px via the --fs-* tokens. Override a specific case in the
   element's own Style tab in the Elementor editor (per-widget CSS wins).
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--font-heading);
	font-weight: var(--fw-light);
	color: var(--color-heading);
	margin: 0;
}
h1, .elementor-widget-heading h1.elementor-heading-title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: var(--fs-lead); line-height: 1.3; }
h1 em, h2 em, h3 em, .elementor-heading-title em { font-style: italic; }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1200;   /* above the slide-menu panel so MENU/CLOSE stays clickable */
	padding: 30px 30px;
	color: var(--color-white);
	transition: background-color .5s ease, color .5s ease, padding .5s ease;
}
.site-header__inner {
	position: relative;                 /* centering context for the logo */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;                        /* header is full width (edge to edge) */
}

/* Pills (MENU + INQUIRE) — shared look.
   Over the hero: frosted light fill + dark ink text.
   When scrolled/menu-open: transparent fill + dark outline. */
.header-menu-toggle,
.header-inquire {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 30px;
	border: 1px solid transparent;
	border-radius: 40px;
	background: rgba(255,255,255,.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #2e2e2e;                       /* XD: Inter Regular 14 → 12 (-2px) / #2E2E2E */
	font-family: var(--font-inter);
	font-size: 12px;
	line-height: 1;                       /* same box height for <button> and <a> */
	font-weight: var(--fw-regular);
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease, opacity .4s ease;
}
.header-menu-toggle:hover,
.header-inquire:hover { background: var(--color-white); color: var(--color-ink); }
.header-menu-toggle__icon { font-size: 16px; font-weight: var(--fw-light); line-height: 1; }
.header-menu-toggle__state { display: inline-flex; align-items: center; gap: 8px; }
.header-menu-toggle__state--close { display: none; }
body.menu-open .header-menu-toggle__state--open  { display: none; }
body.menu-open .header-menu-toggle__state--close { display: inline-flex; }

/* Centered wordmark */
.site-header__logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: block;
}
/* One logo asset (dark artwork): inverted to white over the hero,
   shown in its natural dark form once the header goes light. */
.site-header__logo img {
	display: block;
	height: 33px;                              /* client #71: +25% */
	width: auto;
	filter: brightness(0) invert(1);          /* -> white */
	transition: filter .5s ease;
}

/* Text wordmark fallback (no uploaded logo) — inherits header colour */
.site-header__wordmark { display: block; text-align: center; color: inherit; line-height: 1; }
.site-header__wordmark .wm-name {
	display: block;
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 15px;
	letter-spacing: .34em;
	text-indent: .34em;
}
.site-header__wordmark .wm-sub {
	display: block;
	margin-top: 5px;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 7px;
	letter-spacing: .5em;
	text-indent: .5em;
	opacity: .85;
}

/* Sticky / scrolled state -> light background, dark content */
.site-header.is-scrolled,
.site-header.site-header--solid {
	background: var(--color-cream);
	color: var(--color-ink);
	padding-top: 18px;
	padding-bottom: 18px;
	box-shadow: 0 1px 0 rgba(26,24,24,.08);
}
.site-header.is-scrolled .header-menu-toggle,
.site-header.is-scrolled .header-inquire,
.site-header--solid .header-menu-toggle,
.site-header--solid .header-inquire {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: var(--color-ink);
	color: var(--color-ink);
}
.site-header.is-scrolled .header-menu-toggle:hover,
.site-header.is-scrolled .header-inquire:hover,
.site-header--solid .header-menu-toggle:hover,
.site-header--solid .header-inquire:hover { background: var(--color-ink); color: var(--color-cream); }
.site-header.is-scrolled .site-header__logo img,
.site-header--solid .site-header__logo img { filter: brightness(0); }  /* -> black */

/* Pages that open without a hero: the header is solid from the first paint, so
   the content has to start below it (the header is fixed). */
body.mb-no-hero #wrapper { padding-top: var(--header-h-solid); }

/* Menu-open -> header also switches to the light/cream treatment */
body.menu-open .site-header {
	background: var(--color-cream);
	color: var(--color-ink);
}
body.menu-open .site-header .header-menu-toggle,
body.menu-open .site-header .header-inquire {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: var(--color-ink);
	color: var(--color-ink);
}
body.menu-open .site-header .site-header__logo img { filter: brightness(0); }

/* ==========================================================================
   Slide-out menu
   ========================================================================== */
.slide-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: rgba(26,24,24,.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease;
}
body.menu-open .slide-menu-overlay { opacity: 1; pointer-events: auto; }

.slide-menu {
	position: fixed;
	top: 0;
	left: 0;                       /* opens from the LEFT (per design) */
	z-index: 1150;                 /* under the header (1200) so MENU/CLOSE stays on top */
	width: min(30vw, 360px);
	min-width: 360px;
	height: 100%;
	padding: 120px 30px 30px;
	background: var(--color-cream);
	color: var(--color-ink);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform .6s cubic-bezier(.28,0,.18,1);
	overflow-y: auto;
}
body.menu-open .slide-menu { transform: translateX(0); }
.slide-menu__inner { display: flex; flex-direction: column; flex: 1 1 auto; }

.slide-menu__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.slide-menu__list li { margin: 0; }
.slide-menu__list a {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: var(--fw-light);
	font-size: 16px;                 /* XD 20 → 18 (-2px) */
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-ink);
	padding: 12px 0;
}


/* bottom block: address + social */
.slide-menu__foot {
	margin-top: auto;
	padding-top: 26px;
	border-top: 1px solid rgba(26,24,24,.18);
	font-family: var(--font-body);
	display: flex;
	justify-content: space-between;
}
.slide-menu__address { margin-bottom: 20px; }
.slide-menu__address-label {
	display: block;
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	letter-spacing: .04em;
	margin-bottom: 4px;
}
.slide-menu__address p {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--color-dark);
}
.slide-menu__social ul {
	list-style: none;
	display: flex;
	gap: 12px;
	margin: 8px 0 0;
	padding: 0;
}
.slide-menu__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(26,24,24,.35);
	border-radius: 50%;
	color: var(--color-ink);
	font-size: 14px;
	transition: background-color .4s ease, color .4s ease;
}
.slide-menu__social a:hover { background: var(--color-ink); color: var(--color-cream); }

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer {
	background: var(--color-cream);
	color: var(--color-ink);
	padding: 80px var(--gutter) 30px;
	font-family: var(--font-body);
	border-top: 1px solid rgba(26,24,24,.14);
}
.site-footer__main {
	display: grid;
	/* brand fills the wide left gap; nav + contact cluster to the right (per XD) */
	grid-template-columns: 1fr auto auto auto;
	column-gap: clamp(40px, 93px, 93px);
	row-gap: 30px;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-bottom: 90px;
}

.footer-wordmark span {
	font-family: var(--font-inter);
	font-weight: var(--fw-medium);
	font-size: 27px;
	letter-spacing: .22em;
	color: var(--color-ink);
	white-space: nowrap;
}
.footer-wordmark img { height: 23px; width: auto; }

/* footer nav menus — XD: Plantin MT Pro Light 18 / .1em / #1A1818 */
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin: 0 0 20px; }        /* XD pitch ≈ 54px for 18px text */
.footer-menu li:last-child { margin-bottom: 0; }
.footer-menu a {
	font-family: var(--font-plantin);
	font-weight: var(--fw-light);
	font-size: 16px;                 /* XD 18 → 16 (-2px) */
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-ink);
}


/* contact column — labels: Inter SemiBold 14 / #1A1818 · values: Inter 14 / #2E2E2E */
.footer-detail { margin-bottom: 24px; }
.footer-detail__label {
	display: block;
	font-weight: var(--fw-semibold);
	font-size: 12px;                 /* XD 14 → 12 (-2px) */
	letter-spacing: 0;
	color: var(--color-ink);
	margin-bottom: 5px;
}
.footer-detail__value {
	margin: 0;
	font-size: 14px;                 /* XD 14 → 12 (-2px) */
	line-height: 1.55;
	color: #2e2e2e;
}
.footer-detail__value a:hover { opacity: .6; }
.footer-socials {
	list-style: none;
	display: flex;
	gap: 12px;
	margin: 8px 0 0;
	padding: 0;
}
.footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(26,24,24,.4);
	border-radius: 50%;
	color: var(--color-ink);
	font-size: 14px;
	transition: background-color .4s ease, color .4s ease;
}
.footer-socials a:hover { background: var(--color-ink); color: var(--color-cream); }

/* bottom bar — columns mirror the main grid so items line up with the menu above */
.site-footer__bottom {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	column-gap: clamp(40px, 4.2vw, 70px);
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
}
.footer-partners  { grid-column: 1; }                                   /* under brand */
.footer-disclaimer{ grid-column: 2 / 4; justify-self: center; }         /* under nav block */
.footer-legal     { grid-column: 4; justify-self: end; }                /* under contact */
.footer-partners { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.footer-partner img { max-height: 34px; width: auto; }
.footer-disclaimer {
	margin: 0;
	font-size: 8px;                  /* XD 10 → 8 (-2px) */
	line-height: 1.7;
	color: #2e2e2e;
	text-align: left;
	max-width: 396px;
}
.footer-legal {
	display: flex;
	align-items: center;
	gap: 40px;
	justify-content: flex-end;
}
.footer-legal a {
	font-size: 8px;                  /* XD 10 → 8 (-2px) */
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-ink);
}
.footer-legal a:hover { opacity: .6; }
.footer-mark img { height: 88px; width: auto; }   /* XD: arch mark ≈ 90px, right edge aligns with contact */

/* Inquire button inside the slide menu — desktop hides it (it lives in the header) */
.slide-menu__inquire {
	display: none;
	align-items: center;
	justify-content: center;
	margin: 4px 0 28px;
	padding: 15px 24px;
	border: 1px solid var(--color-ink);
	border-radius: 40px;
	font-family: var(--font-inter);
	font-size: 12px;                 /* XD 14 → 12 (-2px) */
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--color-ink);
	transition: background-color .4s ease, color .4s ease;
}
.slide-menu__inquire:hover { background: var(--color-ink); color: var(--color-cream); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.site-header { padding: 20px 24px; }
	.site-footer { padding: 60px 26px 32px; }
	.site-footer__main { grid-template-columns: 1fr 1fr; gap: 34px 30px; padding-bottom: 50px; }
	.footer-col--brand { grid-column: 1 / -1; }
	.site-footer__bottom { grid-template-columns: 1fr; gap: 26px; text-align: center; justify-items: center; }
	.footer-partners { justify-content: center; }
	.footer-legal { justify-content: center; }
	.footer-disclaimer { text-align: center; max-width: none; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
	/* header: only MENU + logo; INQUIRE moves into the menu */
	.site-header { padding: 16px 20px; }
	.site-header__logo img { height: 25px; }
	.site-header__wordmark .wm-name { font-size: 14px; letter-spacing: .26em; text-indent: .26em; }
	.site-header__wordmark .wm-sub  { font-size: 8px; letter-spacing: .4em; text-indent: .4em; }
	.header-menu-toggle { padding: 10px 20px; font-size: 12px; }
	.header-inquire { display: none; }              /* hidden in header on mobile */

	/* menu: full width, tighter type */
	.slide-menu { width: 100%; min-width: 0; padding: 92px 26px 36px; }
	.slide-menu__inquire { display: inline-flex; }  /* revealed inside the menu */
	.slide-menu__list a { font-size: 17px; padding: 10px 0; }
	.slide-menu__foot { padding-top: 22px; }
	.slide-menu__address p { font-size: 13px; }

	/* footer: single column */
	.site-footer__main { grid-template-columns: 1fr; gap: 20px; }
	.footer-col--brand { grid-column: auto; }
	.footer-wordmark span { font-size: 22px; letter-spacing: .2em; }
	.footer-menu a { font-size: 16px; }
	.footer-detail__label, .footer-detail__value { font-size: 13px; }
	.footer-mark img { height: 46px; }
	.footer-menu li { margin-bottom: 10px; }
	.footer-partner img {max-height: 18px; }
	.footer-partners {gap:10px; justify-content: space-between; flex-wrap: wrap;width: 100%;margin-bottom: 20px;}
	.site-footer__bottom {
		display: block;
	}
	.footer-legal {
		justify-self: center;
		margin-top: 20px;
	}
}

/* ---- Mobile type scale (site-wide, synced down from the desktop XD scale) ---- */
@media (max-width: 767px) {
	:root {
		--fs-display: 34px;
		--fs-h1: 28px;
		--fs-h2: 22px;
		--fs-h3: 20px;
		--fs-lead: 15px;
		--lh-h1: 1.15;
		--lh-h2: 1.20;
		--lh-h3: 1.28;
	}
}

/* ==========================================================================
   Fixed-header offset
   The header is position:fixed, so it floats over the page. On the hero pages
   that is intentional (hero sits under the transparent header); everywhere
   else — and inside the Elementor editor — push the content down so the
   header does not cover the first element.
   ========================================================================== */
:root { --header-h: 88px; }

/* Elementor editor canvas: don't let the fixed header overlap the top section */
body.elementor-editor-active .site-header { position: absolute; }
body.elementor-editor-active #wrapper     { padding-top: var(--header-h); }

/* ==========================================================================
   1340px container utility (opt-in)
   Sections stay full-width; wrap inner content in .container to cap the grid.
   Elementor keeps its own width control — set Site Settings → Layout →
   Content Width = 1340 so BOXED containers match, while FULL-WIDTH
   sections/containers stay edge-to-edge.
   ========================================================================== */
.container{
	width: 100%;
	max-width: var(--container-max);   /* 1340px */
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ==========================================================================
   Home — custom Elementor widgets (.mb-*)
   STRUCTURE ONLY. All skin (typography, colour, spacing, sizing, alignment,
   columns, gap) is set per-widget in the Elementor Style tab (responsive),
   whose {{WRAPPER}} selectors outrank these rules.
   ========================================================================== */

/* Hero */
.mb-hero { position: relative; min-height: 100vh; background: #2a2a2a center/cover no-repeat; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.mb-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* bg_motion: slow drift/zoom of the photo (interim "some motion" until a video loop exists) */
.mb-hero__drift {
	position: absolute; inset: 0; z-index: 0; background: center/cover no-repeat;
	transform-origin: 60% 45%; will-change: transform;
	animation: mbHeroDrift 26s ease-in-out infinite alternate;
}
@keyframes mbHeroDrift {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.09) translate3d(-1.2%, -0.8%, 0); }
}
@media (prefers-reduced-motion: reduce) { .mb-hero__drift { animation: none; } }
.mb-hero::after { content: ""; position: absolute; inset: 0; background: rgba(20,18,18,.18); z-index: 1; }
.mb-hero__center, .mb-hero__bottom { position: relative; z-index: 2; }
.mb-hero__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 1; pointer-events: none; }   /* colour/height = widget controls */
.mb-hero__center { display: flex; flex-direction: column; align-items: center; }
.mb-hero__lockup { display: block; height: 150px; width: auto; }
.mb-hero__bottom { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.mb-hero__tagline { margin: 0 0 22px; }
/* SCROLL cue + vertical line beneath (per XD) */
.mb-hero__scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; }
.mb-hero__scroll::after { content: ""; width: 1px; height: 56px; background: currentColor; }

/* Intro */
.mb-intro { background: var(--color-cream); }
.mb-intro__inner { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.mb-intro__title { margin: 0; letter-spacing: -.01em; }
.mb-intro__title em, .mb-heading em { font-style: italic; }
.mb-intro__media { margin: 0 auto; }        /* gaps set by Style-tab controls */
.mb-intro__media img { display: block; width: 100%; height: auto; }
.mb-intro__text { margin: 0 auto; }

/* Index list (mb_index_list) — structure only; skin via its Style tab */
.mb-index { list-style: none; margin: 0; padding: 0; }
.mb-index__row { border-bottom: 1px solid rgba(26,24,24,.18); }
.mb-index__link { display: flex; align-items: center; justify-content: space-between; text-decoration: none; gap: 20px; }
.mb-index__label { letter-spacing: .06em; transition: color .4s ease; }
.mb-index__more { opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s ease; white-space: nowrap; }
.mb-index__row:hover .mb-index__more, .mb-index__row:focus-within .mb-index__more { opacity: 1; transform: none; }

/* Section-index section — native containers laid out via element ids */




/* ==========================================================================
   Inquire section (native Elementor container + Elementor Form)
   ========================================================================== */

#inquire .mb-heading { margin-bottom: 44px; }

/* Elementor Form — restyled to the XD:
   label sits BELOW the field as a caption (border/line above the text). */
.mb-form .elementor-form-fields-wrapper { row-gap: 16px; margin: 0 -12px; }
.mb-form .elementor-field-group {
	padding: 0 12px 20px;
	display: flex; flex-direction: column; align-items: stretch;
}
.mb-form .elementor-field-group > label {
	order: 2;                                   /* caption under the input */
	font-family: var(--font-plantin); font-weight: var(--fw-light);
	font-size: 16px; color: var(--color-ink); margin: 8px 0 0;
}
.mb-form .elementor-field-group .elementor-field,
.mb-form .elementor-field-group .elementor-select-wrapper { order: 1; }
.mb-form .elementor-mark-required,
.mb-form .elementor-mark-required::after,
.mb-form .elementor-field-required .elementor-field-label::after { color: inherit !important; }   /* Elementor paints the * red */
.mb-form .elementor-field-group .elementor-field,
.mb-form .elementor-field-group .elementor-select-wrapper select {
	background: transparent!important; border: 0; border-bottom: 1px solid rgba(26,24,24,.4);
	border-radius: 0; padding: 6px 0; height: auto;
	font-family: var(--font-inter); font-size: 14px; color: var(--color-ink);
	box-shadow: none; transition: border-color .3s ease;
}

.mb-form .elementor-field-group .elementor-select-wrapper select { border-bottom: none}

.mb-form .elementor-field-group .elementor-field:focus,
.mb-form .elementor-field-group .elementor-select-wrapper select:focus { border-bottom-color: var(--color-ink); outline: none; }
.mb-form .elementor-field-group .elementor-select-wrapper::before { color: var(--color-ink); }
.mb-form select.elementor-field option { color: var(--color-ink); }
/* placeholder-as-uppercase select prompt */
.mb-form .elementor-select-wrapper select:invalid { color: var(--color-gray); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }

/* consent checkbox */
.mb-form .elementor-field-type-acceptance .elementor-field-subgroup { align-items: flex-start; }
.mb-form .elementor-field-type-acceptance label,
.mb-form .elementor-field-type-acceptance .elementor-acceptance-label {
	font-family: var(--font-inter); font-weight: var(--fw-regular);
	font-size: 12px; line-height: 1.5; color: var(--color-ink); margin: 0;
}

/* submit — outlined pill like the design */
.mb-form .elementor-button {
	background: transparent; border: 1px solid var(--color-ink); border-radius: 40px;
	color: var(--color-ink)!important; font-family: var(--font-inter); font-size: 12px;
	letter-spacing: .12em; text-transform: uppercase; padding: 13px 40px;
	transition: background-color .4s ease, color .4s ease; margin-top: 14px;
}
.mb-form .elementor-button:hover { background: var(--color-ink); color: var(--color-cream)!important; }

@media (max-width: 900px) {
	.mb-form .elementor-field-group {
		padding-bottom:0px;
	}
	.mb-hero__lockup { height: 140px; }
}

/* ==========================================================================
   Hero title variant (inner pages)
   ========================================================================== */
.mb-hero__title { margin: 0; }
.mb-hero__title h1 { margin: 0; }
.mb-hero__title em, .mb-hero__title h1 em { font-style: italic; }
.mb-hero__subtitle { display: block; margin-bottom: 20px; letter-spacing: .08em; }
/* optional nav links inside the hero — can live in the Title OR Subtitle textarea
   (one <a> per line). Uppercase, stacked, underlined. */
.mb-hero__title a,
.mb-hero__subtitle a {
	display: inline-block; text-decoration: none; color: inherit;
	font-family: var(--font-inter); font-size: var(--fs-body); font-weight: 500;
	text-transform: uppercase; letter-spacing: .12em;
	padding-bottom: 7px; margin: 8px 0; border-bottom: 1px solid rgba(255,255,255,.55);
	transition: border-color .3s ease, opacity .3s ease;
}
.mb-hero__title a { margin-top: 0; }
.mb-hero__title a:hover,
.mb-hero__subtitle a:hover { border-bottom-color: #fff; opacity: .85; }
.mb-hero__tagline { max-width: 410px; margin-left: auto; margin-right: auto; }  /* constrain width per XD */
/* soft shadow so the small copy stays legible over bright/busy renders */
.mb-hero__title, .mb-hero__subtitle, .mb-hero__tagline, .mb-hero__scroll { text-shadow: 0 1px 14px rgba(0,0,0,.35); }

/* ==========================================================================
   The Vision — history timeline (mb_history)  [structure only]
   ========================================================================== */
.mb-history { position: relative; background: var(--color-cream); padding: 60px var(--gutter) 80px; overflow: hidden; }
.mb-history__year { text-align: center; position: relative; z-index: 2; }
.mb-history__year--top { margin-bottom: 40px; }
.mb-history__year--bottom { margin-top: 40px; }
/* single flow of alternating rows around a centre rail (order = repeater order) */
.mb-history { --mb-gap-l: 55px; --mb-gap-r: 12px; }
.mb-history__track { position: relative; max-width: var(--container-max); margin: 0 auto; }
.mb-history__rail { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; z-index: 0; }
.mb-history__progress { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: var(--mb-progress, 0%); }
.mb-history__rows { position: relative; z-index: 1; }
.mb-history__row { display: flex; }
.mb-history__row--left  { padding-right: calc(50% + var(--mb-gap-l)); }   /* item confined to left half + gap from rail */
.mb-history__row--right { padding-left:  calc(50% + var(--mb-gap-r)); }
.mb-history__item { max-width: 100%; }
.mb-history__media img { width: 100%; display: block; }
.mb-history__caption { margin-top: 12px; }
.mb-history__row--right .mb-history__caption { text-align: right; }
.mb-history__body p { margin: 0; }
/* paired image + text within one entry */
.mb-history__pair-media { flex: 1 1 auto; min-width: 0; }
.mb-history__pair-media img { width: 100%; display: block; }

/* scroll reveal (class added by script.js, so no-JS visitors see everything):
   each entry fades up, its photo wipes open from the bottom and settles from a
   slight zoom. */
.mb-reveal-on .mb-history__item { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.mb-reveal-on .mb-history__media { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.65,0,.2,1) .1s; }
.mb-reveal-on .mb-history__media img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.2,.7,.2,1) .1s; }
.mb-reveal-on .mb-history__item.is-in { opacity: 1; transform: none; }
.mb-reveal-on .mb-history__item.is-in .mb-history__media { clip-path: inset(0 0 0 0); }
.mb-reveal-on .mb-history__item.is-in .mb-history__media img { transform: none; }
.mb-reveal-on .mb-history__item.is-in .mb-history__caption,
.mb-reveal-on .mb-history__item.is-in .mb-history__body { animation: mbFadeIn .8s ease .45s both; }
@keyframes mbFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.mb-reveal-on .mb-history__item, .mb-reveal-on .mb-history__media, .mb-reveal-on .mb-history__media img { opacity: 1; transform: none; clip-path: none; transition: none; }
	.mb-reveal-on .mb-history__item .mb-history__caption, .mb-reveal-on .mb-history__item .mb-history__body { animation: none; }
}

/* Mobile: rail + progress bar move to the LEFT edge; every entry stacks on the
   RIGHT of the rail in a single column (image over text, never side by side).
   The widget emits inline width/justify/flex + absolute floats for the desktop
   staggered layout — those can't be re-expressed per-device natively, so they
   are overridden here with !important, scoped to mobile only. */
@media (max-width: 767px) {
	.mb-history { padding: 28px 10px 40px; }
	/* move the rail to the left; the progress bar is a child of the rail and keeps
	   its own centring, so it follows automatically (stays on the same axis). */
	.mb-history__rail { left: 4px; transform: none; }
	/* every row: full width, in normal flow, to the right of the rail */
	.mb-history__row--left,
	.mb-history__row--right  { padding-left: 26px; padding-right: 0; justify-content: flex-start !important; }
	.mb-history__item        { width: 100% !important; margin-top: 0 !important; margin-bottom: 28px !important; }
	.mb-history__item.is-abs { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; }
	/* image + body never in columns — stack them */
	.mb-history__pair             { flex-direction: column !important; gap: 14px !important; }
	.mb-history__pair .mb-history__body { flex: 0 0 100% !important; max-width: 100% !important; margin-top: 0 !important; padding: 0 !important; }
	.mb-history__caption,
	.mb-history__row--right .mb-history__caption { text-align: left; }
	/* year labels hug the line */
	.mb-history__year { text-align: left !important; padding-left: 26px; }
	.mb-history__year--top    { margin-bottom: 18px; }
	.mb-history__year--bottom { margin-top: 18px; }
}

/* ==========================================================================
   The Vision — native sections (element-id layout)
   ========================================================================== */
/* All flex layout / widths / gaps / centring for these sections are NATIVE
   Elementor container settings (flex_direction, flex_gap, child width, boxed
   content width) — no flex CSS here. Only the back-to-top link styling remains. */
/* Back-to-top: Elementor Button with SVG up-arrow icon stacked over the label.
   Native button offers no top icon position, so stack + size the SVG here. */
.mb-backtop .elementor-button { padding: 0!important; background: transparent!important; border: 0; box-shadow: none; }
.mb-backtop .elementor-button:hover { background: transparent!important; }
.mb-backtop .elementor-button-content-wrapper { flex-direction: column!important; gap: 8px!important; align-items: center!important; }
.mb-backtop .elementor-button-icon { margin: 0!important; }
.mb-backtop .elementor-button-icon svg { width: 20px!important; height: auto!important; display: block!important; }

/* Explore CTA (gallery / location): grayscale image -> colour on hover, and the
   outer chevron slides outward. Layout/border/padding are native container settings;
   only the parent-hover cross-child effects (native can't express them) live here. */
#v-cta-gallery, #v-cta-location,.ct-cta { text-decoration: none; cursor: pointer; }
#v-cta-gallery img, #v-cta-location img, .ct-cta img { filter: grayscale(1); transition: filter .5s ease; }
/* one frame for every explore card so left/right labels always line up, whatever the photo's ratio */
#v-cta-gallery .elementor-widget-image img, #v-cta-location .elementor-widget-image img, .ct-cta .elementor-widget-image img { width: 100%; aspect-ratio: 454 / 275; object-fit: cover; }
#v-cta-gallery:hover img, #v-cta-location:hover img, .ct-cta:hover img { filter: grayscale(0); }
#v-cta-gallery .mb-cta__arrow, #v-cta-location .mb-cta__arrow, .ct-cta .mb-cta__arrow { display: inline-flex; align-items: center; transition: transform .35s ease; }
#v-cta-gallery:hover .mb-cta__arrow { transform: translateX(-6px); }
#v-cta-location:hover .mb-cta__arrow { transform: translateX(6px); }
.ct-cta:hover .mb-cta__arrow { transform: translateX(6px); }
.ct-cta--left:hover .mb-cta__arrow { transform: translateX(-6px); }

/* ==========================================================================
   Amenities map (mb_amenities) — structure/skin the widget controls can't express.
   ========================================================================== */
.mb-amen { position: relative; }
.mb-amen__hint { display:none}
.mb-amen__bar { display: flex; justify-content: flex-end; gap: 34px; padding: 0 4px 30px; }
.mb-amen__toggle { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; border-bottom: 1px solid rgba(26,24,24,.4); padding: 4px 2px; cursor: pointer; font: inherit; color: var(--color-ink); }
.mb-amen__chev { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform .3s ease; }
.mb-amen__toggle.is-open .mb-amen__chev { transform: rotate(-135deg); margin-top: 2px; }
.mb-amen__panel { position: absolute; z-index: 20; top: 42px; right: 4px; width: min(560px, 94%); background: var(--color-cream); border: 1px solid var(--color-ink); padding: 44px 40px 40px; box-shadow: 0 24px 70px rgba(0,0,0,.14); }
.mb-amen__panel--list { width: min(640px, 96%); }
.mb-amen__close { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--color-ink); }
.mb-amen__filterlist { display: flex; flex-direction: column; gap: 22px; }
.mb-amen__filteropt { display: flex; align-items: center; gap: 16px; cursor: pointer; letter-spacing: 1px; }
.mb-amen__filteropt input { width: 16px; height: 16px; accent-color: var(--color-ink); flex: none; }
.mb-amen__ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-ink); flex: none; }
.mb-amen__ico svg, .mb-amen__ico img { width: 100%; height: 100%; object-fit: contain; }
.mb-amen__listwrap { column-count: 2; column-gap: 44px; }
.mb-amen__group { break-inside: avoid; margin-bottom: 26px; }
.mb-amen__grouphd { display: flex; align-items: center; gap: 12px; font-family: var(--font-inter); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid rgba(26,24,24,.3); padding-bottom: 8px; margin: 0 0 12px; }
.mb-amen__grouplist { list-style: none; margin: 0; padding: 0; font-family: var(--font-inter); font-size: 12px; }
.mb-amen__grouplist li { padding: 4px 0; cursor: pointer; transition: color .2s ease; }
.mb-amen__grouplist .mb-amen__n { display: inline-block; width: 26px; color: var(--color-gray); transition: color .2s ease; }
.mb-amen__grouplist .mb-amen__lbl { transition: color .2s ease; }
.mb-amen__litem:hover .mb-amen__lbl { color: #c0748f; text-decoration: underline; text-underline-offset: 3px; }
.mb-amen__litem:hover .mb-amen__n { color: #c0748f; }
/* pin focused from the list */
.mb-amen__pin.is-focus { z-index: 9; box-shadow: 0 0 0 4px rgba(192,116,143,.55); animation: mb-amen-pulse 1.6s ease-out; }
@keyframes mb-amen-pulse { 0% { box-shadow: 0 0 0 0 rgba(192,116,143,.7); } 100% { box-shadow: 0 0 0 4px rgba(192,116,143,.55); } }
.mb-amen__pin.is-focus .mb-amen__num { opacity: 0; }
.mb-amen__pin.is-focus .mb-amen__icon { opacity: 1; }
.mb-amen__pin.is-focus .mb-amen__tip { display: inline-flex; }
.mb-amen__stagewrap { position: relative; }
.mb-amen__stage { position: relative; overflow: auto; overscroll-behavior: contain; background: #ece7de; cursor: grab; scrollbar-width: thin; scrollbar-color: rgba(26,24,24,.4) rgba(26,24,24,.08);
	/* Safari (#106): give the scroller its own clipped layer so the panned map can
	   never paint outside the frame */
	isolation: isolate; contain: paint; -webkit-transform: translateZ(0); transform: translateZ(0); }
/* Safari (#106): WebKit mis-places a scrolled overflow layer inside an element
   that is being moved with a transform — so the map fades in without sliding up */
.elementor-widget-mb_amenities.animated.fadeInUp { animation-name: mbAmenFade; }
@keyframes mbAmenFade { from { opacity: 0; } to { opacity: 1; } }
.mb-amen__stage.is-grabbing { cursor: grabbing; }
.mb-amen__stage::-webkit-scrollbar { width: 12px; height: 12px; }
.mb-amen__stage::-webkit-scrollbar-track { background: rgba(26,24,24,.08); }
.mb-amen__stage::-webkit-scrollbar-thumb { background: rgba(26,24,24,.4); border-radius: 8px; border: 3px solid rgba(236,231,222,1); background-clip: content-box; }
.mb-amen__stage::-webkit-scrollbar-thumb:hover { background: rgba(26,24,24,.6); background-clip: content-box; }
.mb-amen__canvas { position: relative; width: 100%; margin: 0 auto; }  /* centred while narrower than the stage (fit view) */
.mb-amen__map { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.mb-amen__zoom { position: absolute; top: 14px; right: 22px; z-index: 6; display: flex; gap: 8px; }
.mb-amen__zoom button { width: 30px; height: 30px; border: 1px solid rgba(26,24,24,.4); background: rgba(242,239,234,.92); cursor: pointer; font-size: 16px; line-height: 1; color: var(--color-ink); }
.mb-amen__hint { position: absolute; top: 18px; right: 92px; z-index: 6; font: 11px/1 var(--font-inter); letter-spacing: 1px; color: #c0748f; pointer-events: none; }
.mb-amen__pin { position: absolute; transform: translate(-50%,-50%); width: var(--amen-pin, 26px); height: var(--amen-pin, 26px); border-radius: 50%; background: var(--pin,#1a1818); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 3; }
.mb-amen__num { font: 600 max(9px, calc(var(--amen-pin, 26px) * .46))/1 var(--font-inter); }
.mb-amen__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.mb-amen__icon svg, .mb-amen__icon img { width: 62%; height: 62%; color: #fff; }
.mb-amen__pin:hover { z-index: 8; }
.mb-amen__pin:hover .mb-amen__num { opacity: 0; }
.mb-amen__pin:hover .mb-amen__icon { opacity: 1; }
.mb-amen__tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--color-cream); border: 1px solid rgba(26,24,24,.2); border-radius: 40px; padding: 6px 15px 6px 10px; display: none; align-items: center; gap: 8px; font: 600 11px/1 var(--font-inter); letter-spacing: 1px; text-transform: uppercase; color: var(--color-ink); box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.mb-amen__pin:hover .mb-amen__tip { display: inline-flex; }
.mb-amen__tipico { width: 16px; height: 16px; display: inline-flex; color: var(--color-ink); flex: none; }
.mb-amen__tipico svg, .mb-amen__tipico img { width: 100%; height: 100%; }
.mb-amen__pin.is-hidden { display: none; }
/* editor: show the FULL map with no fixed height / scroll, so every pin is
   visible and can be dragged without scrolling the stage */
.elementor-editor-active .mb-amen__stage {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
.elementor-editor-active .mb-amen__zoom,
.elementor-editor-active .mb-amen__hint { display: none !important; }  /* not needed while positioning */

/* editor: pins sit above Elementor's selection overlay and are freely draggable
   (our amen-editor.js blocks Elementor's own mousedown/drag on them) */
.elementor-editor-active .mb-amen__pin {
	cursor: move;
	box-shadow: 0 0 0 2px rgba(192,116,143,.6);
	pointer-events: auto !important;
	z-index: 9999 !important;
	touch-action: none;
}
@media (max-width: 767px) {
	.mb-amen__bar { gap: 20px; }
	.mb-amen__panel { padding: 40px 20px 24px; width: 96%; }
	.mb-amen__listwrap { column-count: 1; }
	.mb-amen__hint { display: none; }
}

/* The Location — Everyday Essentials montage (native containers). On mobile the
   staggered rows stack: drop the desktop top-margin offsets and go full width. */
@media (max-width: 767px) {
	#l-ess-montage .e-con { margin-top: 0 !important; }
	#l-ess-montage > .e-con-inner > .e-con > .e-con-inner > .e-con,
	#l-ess-montage > .e-con > .e-con-inner > .e-con { width: 100% !important; }
}

/* The Building — amenities name list, notes, centred lead, dark performance */
.bld-amlist { list-style: none; margin: 14px 0 0; padding: 0; font-family: var(--font-plantin); font-size: var(--fs-lead); }
.bld-amlist li { padding: 9px 0; border-top: 1px solid rgba(26,24,24,.15); cursor: pointer; transition: color .2s ease; }
.bld-amlist li:first-child { border-top: 0; }
.bld-amlist li:hover { color: #c0748f; }
.bld-note { font-family: var(--font-inter); font-size: 11px; letter-spacing: .5px; color: #c0748f; }
#bld-privacy .bld-lead { max-width: 620px; margin-inline: auto; }
#bld-performance, #bld-performance .elementor-heading-title, #bld-performance p,
#bld-performance a, #bld-performance li { color: #f2efea; }
#bld-performance .bld-note { color: rgba(242,239,234,.55); }
#bld-performance .bld-amlist li { border-top-color: rgba(242,239,234,.18); }

/* ==========================================================================
   Building Performance (mb_performance) — dark tab-like section
   ========================================================================== */
.mb-perf { background: #2e2e2e; color: #f2efea; padding: 60px 30px 70px; }
.mb-perf__inner { max-width: 1340px; margin: 0 auto; }
.mb-perf__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-bottom: 10px; }
.mb-perf__title { font-family: var(--font-plantin); font-size: var(--fs-lead); letter-spacing: 1px; margin: 0; color: #f2efea; }
.mb-perf__tabs { display: flex; gap: 40px; flex-wrap: wrap; }
.mb-perf__tab { background: none; border: 0; color: #f2efea; font-family: var(--font-inter); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; padding: 0 0 6px; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid transparent; }
.mb-perf__tab:hover { opacity: .8; }
.mb-perf__tab.is-open { border-bottom-color: #f2efea; }
.mb-perf__chev { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s ease; margin-top: -4px; }
.mb-perf__tab.is-open .mb-perf__chev { transform: rotate(-135deg); margin-top: 2px; }
.mb-perf__note { color: #c0748f; font-family: var(--font-inter); font-size: 11px; letter-spacing: .5px; margin-top: 12px; }
/* Default image + all panels are stacked in ONE grid cell: hidden ones stay in the layout
   (invisible) so the block always has the height of the tallest panel → no jump on tab switch */
.mb-perf__body { display: grid; margin-top: 44px; }
.mb-perf__body > * { grid-area: 1 / 1; }
/* right column is a fixed ~500px list pushed to the far right (design); the Silence panel is
   wider because of its 230px thumbnail gutter (230 + 500) */
.mb-perf__panel { display: grid; grid-template-columns: 560px minmax(0, 500px); justify-content: space-between; column-gap: 100px; align-items: start; }
.mb-perf__panel:has(.mb-perf__group--thumbs) { grid-template-columns: 560px minmax(0, 730px); }
/* SECURITY & PEACE OF MIND (3rd tab, data-cat="2"): the two groups sit side by side
   (PEACE OF MIND narrow left column, SECURITY right) and there is no footnote */
.mb-perf__panel[data-cat="2"] { grid-template-columns: 560px minmax(0, 760px); }
.mb-perf__panel[data-cat="2"] .mb-perf__lists { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 60px; align-items: start; }
.mb-perf__panel[data-cat="2"] .mb-perf__foot { display: none; }
.mb-perf__panel[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.mb-perf__default { text-align: left; display: flex; align-items: center; gap: 40px; }
.mb-perf__default[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
/* hint beside the building until a category is opened (hidden with the default image) */
.mb-perf__hint {
	flex: 1; margin: 40px 0 0; text-align: center;
	font-family: var(--font-plantin); font-style: italic; font-weight: 300;
	font-size: 22px; line-height: 1.3; color: rgba(242,239,234,.75);
}
.mb-perf__hint-arrow {
	display: block; width: 9px; height: 9px; margin: 0 auto 18px;
	border-top: 1px solid currentColor; border-left: 1px solid currentColor;
	transform: rotate(45deg); animation: mbHintUp 1.8s ease-in-out infinite;
}
@keyframes mbHintUp { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-6px) rotate(45deg); } }
@media (max-width: 1100px) {
	.mb-perf__default { flex-direction: column; align-items: flex-start; gap: 24px; }
	.mb-perf__hint { margin: 0; font-size: 18px; text-align: left; }
	.mb-perf__hint-arrow { margin-left: 0; }
}
.mb-perf__stage { position: relative; width: fit-content; }   /* box = image box, so pin/callout % map to the image */
/* Main image: identical box (size + left position) in the default view and every tab */
/* the stage box == the image box (the 40px gap is on the stage), so pin / callout / reveal % map onto the picture */
.mb-perf__stage { margin-top: 40px; }
.mb-perf__img, .mb-perf__default img { height: 500px; width: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; margin-top: 0; }
.mb-perf__default img { margin-top: 40px; }
.mb-perf__pin { position: absolute; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(242,239,234,.85); background: rgba(46,46,46,.35); display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-inter); color: #f2efea; }
.mb-perf__callout { position: absolute; transform: translateY(-50%); white-space: nowrap; }
.mb-perf__callout b { display: block; font-family: var(--font-plantin); font-weight: 300; font-size: 32px; line-height: 1.05; }
.mb-perf__callout em { display: block; font-style: normal; font-family: var(--font-plantin); font-size: 14px; line-height: 1.2; margin-top: 2px; }
/* Groups stack vertically (heading + list), like the design */
.mb-perf__lists { display: flex; flex-direction: column; gap: 40px; }
.mb-perf__group { width: 100%; }
.mb-perf__grouphd { font-family: var(--font-plantin); font-size: var(--fs-lead); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 6px; color: #f2efea; }
.mb-perf__list { list-style: none; margin: 0; padding: 0; }
.mb-perf__list li { display: flex; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(242,239,234,.18); font-family: var(--font-plantin); font-size: 14px; line-height: 1.2; }
.mb-perf__n { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(242,239,234,.6); display: inline-flex; align-items: center; justify-content: center; font: 500 12px/1 var(--font-inter); }
.mb-perf__n--empty { border: 0; }
.mb-perf__ico { flex: none; width: 30px; height: 30px; display: inline-flex; }
.mb-perf__ico img { width: 100%; height: 100%; object-fit: contain; }
/* Silence & Privacy: single list with a right-aligned heading and gutter thumbnails
   linked to numbered rows by a connector line */
.mb-perf__group--thumbs { flex: 1 1 100%; padding-left: 230px; position: relative; }
.mb-perf__group--thumbs .mb-perf__grouphd { text-align: right; margin-bottom: 18px; }
/* rows: vertically centred so the straight connector meets the number */
.mb-perf__group--thumbs .mb-perf__list li { position: relative; padding: 10px 0; min-height: 64px; align-items: center; }
.mb-perf__thumb { position: absolute; right: calc(100% + 122px); top: 50%; transform: translateY(-50%); width: 108px; z-index: 1; }
.mb-perf__thumb img { width: 100%; height: auto; display: block; }
.mb-perf__thumb::after { content: ""; position: absolute; left: 100%; top: 50%; width: 122px; border-top: 1px solid rgba(242,239,234,.3); }
/* bathroom stays aligned on item 6 (straight connector). The door (item 7, the last row) drops
   into the empty space below so it clears the bathroom above; its connector rises back to number 7. */
.mb-perf__group--thumbs .mb-perf__list li:nth-child(7) .mb-perf__thumb { transform: translateY(calc(-50% + 60px)); }
/* stepped connector: short stub out of the image, riser 40px clear of the image edge, then across to number 7 */
.mb-perf__group--thumbs .mb-perf__list li:nth-child(7) .mb-perf__thumb::before { content: ""; position: absolute; left: 100%; top: 50%; width: 40px; border-top: 1px solid rgba(242,239,234,.3); }
.mb-perf__group--thumbs .mb-perf__list li:nth-child(7) .mb-perf__thumb::after { left: calc(100% + 40px); width: 82px; top: auto; bottom: 50%; height: 60px; border-top: 1px solid rgba(242,239,234,.3); border-left: 1px solid rgba(242,239,234,.3); }
/* opening a tab: the building image wipes in, then pins / % callouts pop in one by
   one while the list rows slide in one after another (script.js sets --i + .is-anim) */
.mb-perf__panel.is-anim .mb-perf__img { animation: mbPerfWipe 1s cubic-bezier(.65,0,.2,1) both; }
/* captions appear strictly one after another: script.js gives each its step's delay
   (step n starts when step n-1 has finished). Captions baked into the PNG are uncovered
   by .mb-perf__mask boxes painted in the section colour, wiping away from the building. */
.mb-perf__panel.is-anim .mb-perf__pin { animation: mbPerfPop .55s cubic-bezier(.2,.9,.3,1.3) both; }
.mb-perf__panel.is-anim .mb-perf__callout { animation: mbPerfFade .6s ease both; }
.mb-perf__masks { position: absolute; inset: 0; pointer-events: none; }
.mb-perf__mask { position: absolute; background: var(--mb-perf-bg, #2e2e2e); opacity: 0; }
.mb-perf__panel.is-anim .mb-perf__mask { opacity: 1; animation: mbPerfUncoverL .6s cubic-bezier(.65,0,.35,1) both; }
.mb-perf__panel.is-anim .mb-perf__mask.is-right { animation-name: mbPerfUncoverR; }
@keyframes mbPerfUncoverL { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }   /* left captions: uncover from the building outwards */
@keyframes mbPerfUncoverR { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.mb-perf__panel.is-anim .mb-perf__grouphd,
.mb-perf__panel.is-anim .mb-perf__list li,
.mb-perf__panel.is-anim .mb-perf__foot { animation: mbPerfSlide .6s ease both; animation-delay: calc(.25s + var(--i, 0) * .09s); }
@keyframes mbPerfWipe  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mbPerfPop   { from { opacity: 0; transform: translate(-50%,-50%) scale(.4); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes mbPerfFade  { from { opacity: 0; transform: translateY(calc(-50% + 12px)); } to { opacity: 1; transform: translateY(-50%); } }
@keyframes mbPerfSlide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.mb-perf__panel.is-anim .mb-perf__mask { display: none; }
	.mb-perf__panel.is-anim .mb-perf__img, .mb-perf__panel.is-anim .mb-perf__pin, .mb-perf__panel.is-anim .mb-perf__callout,
	.mb-perf__panel.is-anim .mb-perf__grouphd, .mb-perf__panel.is-anim .mb-perf__list li, .mb-perf__panel.is-anim .mb-perf__foot { animation: none; }
}
.mb-perf__foot { color: rgba(242,239,234,.45); font-family: var(--font-inter); font-size: 10px; line-height: 1.4; margin: -12px 0 0; width: 100%; }
.mb-perf__lists:has(.mb-perf__group--thumbs) .mb-perf__foot { padding-left: 230px; }
@media (max-width: 1100px) { .mb-perf__panel { grid-template-columns: 1fr 1fr; gap: 40px; } .mb-perf__panel[data-cat="2"] .mb-perf__lists { grid-template-columns: 1fr; } .mb-perf__img, .mb-perf__default img { height: auto; width: 100%; } }
@media (max-width: 767px) { .mb-perf { padding: 40px 10px 48px; } .mb-perf__bar { flex-direction: column; align-items: flex-start; gap: 16px; } .mb-perf__panel, .mb-perf__panel:has(.mb-perf__group--thumbs), .mb-perf__panel[data-cat="2"] { grid-template-columns: 1fr; gap: 28px; } .mb-perf__tabs { gap: 14px; flex-direction: column; align-items: flex-start; } .mb-perf__tab { text-align: left; white-space: normal; }
  .mb-perf__body { margin-top: 28px; }
  .mb-perf__stage { width: 100%; }
  .mb-perf__img, .mb-perf__default img { width: 100%; max-width: 520px; height: auto; }
  .mb-perf__callout b { font-size: 22px; } .mb-perf__callout em { font-size: 12px; }
  .mb-perf__lists { gap: 28px; } .mb-perf__list li { padding: 12px 0; gap: 14px; }
  .mb-perf__group--thumbs { padding-left: 0; }
  .mb-perf__group--thumbs .mb-perf__grouphd { text-align: left; }
  .mb-perf__thumb, .mb-perf__group--thumbs .mb-perf__list li:nth-child(6) .mb-perf__thumb, .mb-perf__group--thumbs .mb-perf__list li:nth-child(7) .mb-perf__thumb { position: static; transform: none; width: 110px; margin: 0 0 10px 38px; }
  .mb-perf__thumb::after, .mb-perf__thumb::before { display: none; }
  .mb-perf__group--thumbs .mb-perf__list li { min-height: 0; }
  .mb-perf__lists:has(.mb-perf__group--thumbs) .mb-perf__foot { padding-left: 0; }
}

/* The Building — PowerPack Image Slider used as the amenities menu:
   big image + a clean text name list (thumb pagination restyled). */
.elementor-widget-pp-image-slider .pp-image-slider-thumb-pagination {
	display: block !important;
	grid-template-columns: none !important;
	grid-auto-columns: auto !important;
	gap: 0 !important;
	margin: 0 !important;
}
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	cursor: pointer;
}
.elementor-widget-pp-image-slider .pp-image-slider-thumb-image,
.elementor-widget-pp-image-slider .pp-image-slider-thumb-overlay { display: none !important; }
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item {
	padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
}
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap .pp-image-slider-content {
	position: static !important; inset: auto !important; transform: none !important;
	padding: 11px 2px !important; border-top: 1px solid rgba(26,24,24,.15);
	text-align: left !important; width: 100%;
}
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap:first-child .pp-image-slider-content { border-top: 0; }
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap .pp-image-slider-content,
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap .pp-image-slider-content * {
	font-family: var(--font-plantin) !important; font-size: var(--fs-lead) !important; font-weight: 300 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	opacity: 1; transition: color .25s ease;
}
/* caption colour: normal = muted grey, hover/active = ink (dark) */
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap .pp-image-slider-caption { color: rgba(0,0,0,.2) !important; }   /* client #90: 20% black */
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap:hover .pp-image-slider-caption,
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap.pp-active-slide .pp-image-slider-caption { color: var(--color-ink) !important; }
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap:hover .pp-image-slider-content .pp-image-slider-caption,
.elementor-widget-pp-image-slider .pp-image-slider-thumb-item-wrap.pp-active-slide .pp-image-slider-content .pp-image-slider-caption {
	color: var(--color-ink) !important; opacity: 1 !important;
}
/* hide the caption ON THE MAIN slide only (the name is shown in the thumb list) */
.elementor-widget-pp-image-slider .pp-swiper-slider > .swiper-wrapper .pp-image-slider-caption { display: none; }

/* main image = same height as the thumb-list column, centred, cover.
   Collapse the image side's intrinsic height (height:100% chain) so the list
   drives the row height; align-items:stretch then makes the image match it. */
.elementor-widget-pp-image-slider .pp-image-slider-container { align-items: stretch !important; }
.elementor-widget-pp-image-slider .pp-image-slider-wrap { position: relative; align-self: stretch; min-height: 0; }
.elementor-widget-pp-image-slider .pp-image-slider-box { position: absolute !important; inset: 0 !important; }
.elementor-widget-pp-image-slider .pp-image-slider.pp-swiper-slider,
.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-wrapper,
.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-slide,
.elementor-widget-pp-image-slider .pp-image-slider-image-wrap { height: 100% !important; min-height: 0 !important; }
/* keep aspect ratio: image is as tall as the list, width auto (not full width), centred */
.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-slide .pp-image-slider-image {
	height: 100% !important; min-height: 0 !important;
	display: flex !important; align-items: center; justify-content: center;
}
.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-slide .pp-image-slider-image img {
	height: 100% !important; width: auto !important; max-width: 100%; object-fit: contain;
	margin: 0 auto; display: block;
}
/* PowerPack puts .pp-image-slider-image on the <img> itself, so the flex/100% rule above
   stretched the photo to the box (client #54 "images look squished"). Fill the box and
   crop instead — never distort. */
.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-slide img.pp-image-slider-image {
	width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center;
}

/* Amenities slider on mobile: image stacks ABOVE the name list, natural height
   (undo the desktop "image = list height" absolute box). */
@media (max-width: 767px) {
	.elementor-widget-pp-image-slider .pp-image-slider-container { flex-direction: column !important; }
	.elementor-widget-pp-image-slider .pp-image-slider-wrap,
	.elementor-widget-pp-image-slider .pp-image-slider-thumb-pagination { width: 100% !important; flex: 0 0 auto !important; }
	.elementor-widget-pp-image-slider .pp-image-slider-box { position: static !important; }
	.elementor-widget-pp-image-slider .pp-image-slider.pp-swiper-slider,
	.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-wrapper,
	.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-slide,
	.elementor-widget-pp-image-slider .pp-image-slider-image-wrap,
	.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-slide .pp-image-slider-image { height: auto !important; }
	.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-slide .pp-image-slider-image img,
	.elementor-widget-pp-image-slider .pp-swiper-slider .swiper-slide img.pp-image-slider-image { width: 100% !important; height: auto !important; }
	.elementor-widget-pp-image-slider .pp-image-slider-thumb-pagination { margin-top: 20px; }
}

/* ALL sliders on mobile (.mb-slider = Image Carousel + PowerPack Image Slider, every page):
   one shared frame (4:3, full width), image cover + centred, click opens the lightbox
   (link_to=file / open_lightbox=yes set natively on each widget). */
@media (max-width: 767px) {
	.mb-slider .swiper-slide { height: auto !important; }
	.mb-slider figure.swiper-slide-inner { display: block; width: 100%; }
	.mb-slider .swiper-slide-image,
	.mb-slider .pp-swiper-slider .swiper-slide .pp-image-slider-image img {
		width: 100% !important; height: auto !important; max-height: none;
		aspect-ratio: 4 / 3; object-fit: cover; object-position: center; display: block;
	}
}

/* The Location — connectivity list (#l-seamlessly) */
.mb-connect { list-style: none; margin: 34px 0 0; padding: 0; }   /* breathing room under the intro paragraph (#110) */
.mb-connect li { padding: 14px 0; border-top: 1px solid rgba(26,24,24,.18); font-family: var(--font-plantin); }
.mb-connect li:last-child { border-bottom: 1px solid rgba(26,24,24,.18); }

/* ==========================================================================
   Native Image Carousel (.mb-carousel — every page). Slides share one height so
   the carousel never jumps between slides of different aspect ratios; the image is
   centred and scaled to fit (never stretched, never cropped); the caption sits
   flush-left under it. Height is the --mb-slide-h variable, overridable per widget.
   ========================================================================== */
/* every slide is the same height (--mb-slide-h); the image is centred inside it and
   scaled to fit (contain) so mixed aspect ratios never stretch or crop. */
.mb-carousel { --mb-slide-h: clamp(420px, calc(100vh - 150px), 960px); }   /* client #80 #89 #95 #97: as large as the window allows */
.mb-carousel .swiper-slide { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.mb-carousel figure.swiper-slide-inner { display: flex; flex-direction: column; width: 100%; max-width: 100%; margin: 0; }
.mb-carousel .swiper-slide-image {
	width: 100% !important; max-width: 100%; height: var(--mb-slide-h); margin: 0; display: block;
	object-fit: contain; object-position: center;
}
/* Slider caption (every page): XD spec Inter 14 → 12px (site −2px rule), uppercase,
   letter-spacing .05em, #2e2e2e, sitting flush-left under the image. */
.mb-carousel .elementor-image-carousel-caption {
	display: block; text-align: left; margin-top: 14px;
	font-family: var(--font-inter); font-size: var(--fs-body); font-weight: var(--fw-regular);
	line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: var(--color-dark);
}
/* on a dark section the caption flips to cream */
.mb-perf .mb-carousel .elementor-image-carousel-caption,
#bld-performance .mb-carousel .elementor-image-carousel-caption { color: rgba(242,239,234,.75); }

/* Present slider on mobile: slides auto-height (no empty gap under a short
   slide) and the arrows drop BELOW the caption, centred as a pair. Keyed to the
   .mb-carousel widget class so it holds wherever this slider is reused. */
@media (max-width: 767px) {
	.mb-carousel .swiper-slide { height: auto !important; }
	.mb-carousel .elementor-image-carousel-wrapper { position: relative; padding-bottom: 52px; }
	/* !important: Elementor's own carousel CSS loads after the theme and ties on
	   specificity, so it wins without it. Drop both arrows below the caption. */
	.mb-carousel .elementor-swiper-button { top: auto !important; bottom: 6px !important; margin: 0 !important; transform: none !important; }
	.mb-carousel .elementor-swiper-button-prev { left: calc(50% - 50px) !important; right: auto !important; }
	.mb-carousel .elementor-swiper-button-next { left: calc(50% + 6px) !important; right: auto !important; }
}

/* Explore 3-block nav on mobile: BACK TO TOP moves to the bottom. Targets the
   column that holds the .mb-backtop button via :has() (a widget class that
   survives template reuse), so it works on every page this block appears on. */
@media (max-width: 767px) {
	.e-con:has(.mb-backtop):not(:has(.e-con)) { order: 10; }
}

/* Contact page — the details column reuses the footer contact styles, which
   sit inside the Inter-typeset footer; give them the same family here. */
#contact-details .footer-detail,
#contact-details .footer-detail__label,
#contact-details .footer-detail__value,
#contact-details .footer-detail__value a,
#contact-details .footer-socials { font-family: var(--font-inter); }
/* beat the global .elementor-widget-text-editor p rule (0,2,0) */
#contact-details .elementor-widget-text-editor p.footer-detail__value {
	font-family: var(--font-inter);
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-dark);
	margin: 0;
}
#contact-details .footer-detail:last-child { margin-bottom: 0; }

/* ==========================================================================
   MB - CTA card (mb_cta): framed image → divider → label + VIEW MORE.
   Hover zooms the image inside its frame and slides the chevron out.
   Colours/zoom/padding are widget Style controls; this is structure only.
   ========================================================================== */
.mb-cta { display: block; text-decoration: none; color: inherit; }
.mb-cta__frame {
	display: block; overflow: hidden; width: 100%;
	border: 1px solid rgba(26,24,24,.14);
}
.mb-cta__frame img {
	width: 100%; height: 100%; display: block;
	object-fit: cover; object-position: center;
	transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.mb-cta__row {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	border-top: 1px solid rgba(26,24,24,.14); padding-top: 18px;
}
.mb-cta__label {
	font-family: var(--font-plantin); font-weight: var(--fw-light);
	font-size: var(--fs-base);            /* XD 18 − 2 */
	line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
}
.mb-cta__more {
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	font-family: var(--font-inter); font-weight: var(--fw-medium);
	font-size: var(--fs-body);            /* XD 14 − 2 */
	line-height: 1.2; letter-spacing: .05em; text-transform: uppercase;
}
/* chevron only on hover/focus */
.mb-cta__chev { opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.mb-cta:hover .mb-cta__chev, .mb-cta:focus-visible .mb-cta__chev { opacity: 1; transform: translateX(0); }
@media (max-width: 767px) {
	.mb-cta__row { padding-top: 14px; gap: 12px; }
	.mb-cta__chev { opacity: 1; transform: none; }   /* no hover on touch */
}

/* Native Image widget caption (gallery montages): same spec as the slider caption —
   XD Inter 14 → 12px, uppercase, flush-left under the image. */
.elementor-widget-image figure.wp-caption { margin: 0; }
.elementor-widget-image .widget-image-caption {
	display: block; text-align: left; margin-top: 14px;
	font-family: var(--font-inter); font-weight: var(--fw-regular);
	font-size: var(--fs-body); line-height: 1.2; letter-spacing: .05em;
	text-transform: uppercase; color: var(--color-dark); font-style: normal;
}

/* ==========================================================================
   MB - News block (mb_news): FEATURED / LATEST NEWS / VIDEOS / UPCOMING EVENTS.
   Structure only — colours + section padding are widget Style controls.
   ========================================================================== */
.mb-news { padding: 60px 0 90px; }
.mb-news__head { display: grid; grid-template-columns: 25.2% 1fr; gap: 30px; align-items: start;
	padding-bottom: 22px; border-bottom: 1px solid rgba(26,24,24,.14); margin-bottom: 30px; }
.mb-news__label { font-family: var(--font-plantin); font-weight: var(--fw-light); font-size: var(--fs-base);
	letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.mb-news__intro { max-width: 640px; margin: 0; }
.mb-news__empty { color: var(--color-text-muted); }

/* shared card bits */
.mb-news__figure { display: block; overflow: hidden; background: rgba(26,24,24,.06); }
.mb-news__figure img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
	transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.mb-news__figure:hover img { transform: scale(1.04); }
.mb-news__meta { display: flex; gap: 28px; margin: 18px 0 10px;
	font-family: var(--font-inter); font-size: var(--fs-base); letter-spacing: .04em; text-transform: uppercase;
	color: var(--color-text-muted); }
.mb-news__title { font-family: var(--font-plantin); font-weight: var(--fw-light); font-size: var(--fs-h2);
	line-height: 1.2; margin: 0 0 14px; }
.mb-news__title a { color: inherit; text-decoration: none; }
.mb-news__title a:hover { opacity: .7; }
.mb-news__title em { font-style: italic; }
.mb-news__text { margin: 0 0 24px; }

/* pill button */
.mb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px;
	border: 1px solid rgba(26,24,24,.3); border-radius: 40px; text-decoration: none; color: inherit;
	font-family: var(--font-inter); font-size: var(--fs-body); letter-spacing: .08em; text-transform: uppercase;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.mb-btn:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-cream); }
.mb-btn--sm { padding: 9px 22px; }

/* ---- FEATURED ---- */
/* a guaranteed gutter between photo and copy — on laptop widths the copy column
   used to run straight into the image (client: "need a border to avoid collision") */
.mb-news__feature { display: grid; grid-template-columns: 51.6% 1fr; column-gap: clamp(40px, 5vw, 80px); justify-content: space-between; align-items: start; }
.mb-news__feature .mb-news__figure { aspect-ratio: 3 / 2; }
.mb-news__feature .mb-news__body { max-width: 610px; justify-self: end; width: 100%; }
.mb-news__feature .mb-news__meta { margin-top: 0; }

/* ---- Single story page (single-mb_news.php) ---- */
.mb-article { background: var(--color-cream); padding: 50px var(--gutter) 0; }
.mb-article__inner { max-width: 860px; margin: 0 auto; }
.mb-article__back { display: inline-block; color: var(--color-ink); text-decoration: none; margin-bottom: 44px; }
.mb-article__back:hover { opacity: .6; }
.mb-article__meta { margin-top: 0; }
.mb-article__title { font-family: var(--font-plantin); font-weight: var(--fw-light); font-size: var(--fs-h1); line-height: 1.2; margin: 0 0 40px; }
.mb-article__title em { font-style: italic; }
.mb-article__figure { margin: 0 0 44px; }
.mb-article__figure img { width: 100%; height: auto; display: block; }
.mb-article__video { position: relative; aspect-ratio: 16 / 9; background: #000; margin: 0 0 44px; }
.mb-article__video iframe, .mb-article__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mb-article__body { font-size: var(--fs-lead); line-height: 1.6; max-width: 680px; }
.mb-article__body p { margin: 0 0 1.2em; }
.mb-article__body h2, .mb-article__body h3 { margin: 1.6em 0 .6em; }
.mb-article__body img { max-width: 100%; height: auto; }
.mb-article__body blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 1px solid var(--color-ink); font-style: italic; }
.mb-article__cta { margin: 36px 0 0; }
.mb-article__more { max-width: var(--container-max); margin: 90px auto 0; }
@media (max-width: 767px) {
	.mb-article { padding: 28px 10px 0; }
	.mb-article__back { margin-bottom: 28px; }
	.mb-article__title { margin-bottom: 26px; }
	.mb-article__figure, .mb-article__video { margin-bottom: 28px; }
	.mb-article__more { margin-top: 56px; }
}

/* ---- LATEST NEWS grid ---- */
.mb-news__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px 14px; }
.mb-news__card { display: flex; flex-direction: column; align-items: flex-start; }
.mb-news__card[hidden] { display: none; }
.mb-news__card .mb-news__figure { aspect-ratio: 4 / 5; width: 100%; }
.mb-news__card .mb-news__title { font-size: var(--fs-h3); }
.mb-news__card .mb-news__text { flex: 1; }

/* LOAD MORE */
.mb-news__more { display: flex; flex-direction: column; align-items: center; gap: 8px;
	width: 100%; margin: 30px 0 0; padding-top: 40px;
	background: none; border: 0; border-top: 1px solid rgba(26,24,24,.14); cursor: pointer; color: inherit;
	font-family: var(--font-inter); font-size: var(--fs-body); letter-spacing: .08em; text-transform: uppercase; }
.mb-news__more:hover { opacity: .65; }
/* display:flex above would otherwise beat the [hidden] attribute the JS sets
   once every item has been revealed */
.mb-news__more[hidden] { display: none !important; }

/* ---- VIDEOS ---- */
.mb-news__player { position: relative; display: grid; grid-template-columns: 51.6% 1fr;
	justify-content: space-between; align-items: center; }
.mb-news__stage { position: relative; aspect-ratio: 16 / 9; background: rgba(26,24,24,.08); overflow: hidden; }
.mb-news__stage img, .mb-news__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.mb-news__stage img { object-fit: cover; }
.mb-news__frame iframe, .mb-news__frame video { width: 100%; height: 100%; border: 0; display: block; }
.mb-news__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
	width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85);
	background: rgba(26,24,24,.18); cursor: pointer; transition: background-color .3s ease; }
.mb-news__play:hover { background: rgba(26,24,24,.4); }
.mb-news__play span { position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
	border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
/* fixed-width copy block, centred in its column so the arrows flank it evenly */
.mb-news__player .mb-news__body { width: min(100%, 520px); justify-self: center; }
/* arrows are centred on the PLAYER (not the text block): prev sits just right of the
   video, next on the container's right edge */
.mb-news__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
	background: none; border: 0; cursor: pointer; color: inherit; opacity: .55; transition: opacity .25s ease; }
.mb-news__nav:hover { opacity: 1; }
.mb-news__nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
	border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.mb-news__nav--prev { left: calc(51.6% + 12px); }
.mb-news__nav--prev::before { transform: translate(-40%,-50%) rotate(-135deg); }
.mb-news__nav--next { right: 0; }
.mb-news__nav--next::before { transform: translate(-60%,-50%) rotate(45deg); }

/* cross-fade when switching films */
.mb-news__stage img,
.mb-news__player .mb-news__body > :not(.mb-news__nav) { transition: opacity .3s ease; }
.mb-news__player.is-swap .mb-news__stage img,
.mb-news__player.is-swap .mb-news__body > :not(.mb-news__nav) { opacity: 0; }

/* one film only: no arrows, no filmstrip; letterbox bars stay dark */
.mb-news__player--single .mb-news__nav,
.mb-news__player--single + .mb-news__strip { display: none; }
.mb-news__frame { background: #1a1818; }

/* filmstrip */
.mb-news__strip { margin-top: 14px; }
.mb-news__stripinner { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.mb-news__stripinner::-webkit-scrollbar { display: none; }
.mb-news__thumb { position: relative; flex: 0 0 calc((100% - 5 * 14px) / 6); aspect-ratio: 16 / 10;
	padding: 0; border: 0; background: rgba(26,24,24,.08); cursor: pointer; overflow: hidden; }
.mb-news__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .75; transition: opacity .3s ease; }
.mb-news__thumb:hover img, .mb-news__thumb.is-active img { opacity: 1; }
.mb-news__playmini { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); }
.mb-news__playmini::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
	border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.mb-news__progress { height: 1px; background: rgba(26,24,24,.14); margin-top: 14px; }
.mb-news__progress i { display: block; height: 100%; width: 20%; background: var(--color-ink);
	transition: width .25s ease, margin-left .25s ease; }

/* ---- UPCOMING EVENTS ---- */
.mb-news__event { display: grid; grid-template-columns: 25.2% 1fr 29% 12%; align-items: center; gap: 20px;
	padding: 26px 30px; margin: 0 -30px; border-bottom: 1px solid rgba(26,24,24,.14); cursor: pointer;
	transition: background-color .3s ease; }
.mb-news__event[hidden] { display: none; }
.mb-news__event:hover { background: rgba(26,24,24,.05); }      /* hover state */
.mb-news__date { display: flex; flex-direction: column; align-items: center; width: 120px; }
.mb-news__date span { font-family: var(--font-inter); font-size: var(--fs-base); letter-spacing: .1em;
	text-transform: uppercase; color: var(--color-text-muted); }
.mb-news__date b { font-family: var(--font-plantin); font-weight: var(--fw-light); font-size: var(--fs-display); line-height: 1.05; }
.mb-news__etype { font-family: var(--font-inter); font-size: var(--fs-base); letter-spacing: .06em;
	text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 6px; }
.mb-news__event .mb-news__title { font-size: var(--fs-h2); margin: 0; }
.mb-news__ewhere { margin: 0; }
.mb-news__event .mb-btn { justify-self: end; }

/* ---- EVENT POPUP ---- */
.mb-news__modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
	padding: 30px; background: rgba(26,24,24,.55); }
.mb-news__modal[hidden] { display: none; }
.mb-news__dialog { position: relative; display: grid; grid-template-columns: 1fr 1fr;
	width: min(1100px, 100%); max-height: 88vh; overflow: auto; background: var(--color-cream); }
.mb-news__mimg { background: rgba(26,24,24,.08); }
.mb-news__mimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-news__mbody { padding: 56px 56px 48px; }
.mb-news__close { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; background: none;
	border: 0; cursor: pointer; color: var(--color-ink); }
.mb-news__close::before, .mb-news__close::after { content: ""; position: absolute; left: 50%; top: 50%;
	width: 15px; height: 1px; background: currentColor; }
.mb-news__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.mb-news__close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.mb-news__when { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0 26px; }
.mb-news__when dt { font-family: var(--font-inter); font-size: var(--fs-body); letter-spacing: .08em;
	text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; }
.mb-news__when dd { margin: 0; padding-bottom: 10px; border-bottom: 1px solid rgba(26,24,24,.2); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
	.mb-news__grid { grid-template-columns: repeat(2, 1fr); gap: 60px 14px; }
	.mb-news__feature, .mb-news__player { grid-template-columns: 1fr; gap: 30px; }
	.mb-news__feature .mb-news__body, .mb-news__player .mb-news__body { width: 100%; max-width: none; justify-self: stretch; }
	.mb-news__nav { transform: none; }
	.mb-news__nav--prev { left: auto; right: 46px; top: auto; bottom: -46px; }
	.mb-news__nav--next { right: 0; top: auto; bottom: -46px; }
	.mb-news__thumb { flex: 0 0 calc((100% - 3 * 14px) / 4); }
	.mb-news__event { grid-template-columns: 130px 1fr auto; }
	.mb-news__ewhere { grid-column: 2 / -1; }
}
@media (max-width: 767px) {
	.mb-news { padding: 40px 0 56px; }
	.mb-news__head { grid-template-columns: 1fr; gap: 12px; padding-bottom: 16px; margin-bottom: 22px; }
	.mb-news__grid { grid-template-columns: 1fr; gap: 56px; }
	.mb-news__card .mb-news__figure { aspect-ratio: 3 / 2; }
	.mb-news__thumb { flex: 0 0 60%; }
	.mb-news__event { grid-template-columns: 74px 1fr; gap: 6px 16px; padding: 22px 10px; margin: 0 -10px; }
	.mb-news__date { width: auto; align-items: flex-start; }
	.mb-news__date b { font-size: var(--fs-h1); }
	.mb-news__ewhere, .mb-news__event .mb-btn { grid-column: 2; justify-self: start; }
	.mb-news__event .mb-btn { margin-top: 12px; }
	.mb-news__dialog { grid-template-columns: 1fr; max-height: 92vh; }
	.mb-news__mimg { aspect-ratio: 4 / 3; }
	.mb-news__mbody { padding: 30px 20px 34px; }
	.mb-news__when { gap: 14px; margin: 22px 0 20px; }
}

/* ==========================================================================
   Privacy Policy (#pp-head / #pp-body / #pp-contact) — copy-only page, built
   from native containers. Only the bits native settings can't express.
   ========================================================================== */
/* section labels: XD Plantin 18 → 16px, uppercase */
.pp-label .elementor-heading-title {
	font-family: var(--font-plantin); font-weight: var(--fw-light);
	font-size: var(--fs-base); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
}
/* each section block: label, body, then breathing room before the next one */
#pp-body .elementor-widget-heading { margin-top: 64px; }
#pp-body > .e-con-inner > .e-con > .e-con-inner > .elementor-widget-heading:first-child,
#pp-body .e-con-inner > .elementor-widget-heading:first-child { margin-top: 0; }
#pp-body .elementor-widget-text-editor { margin-top: 18px; }
/* centred intro / contact copy sits in a narrow measure like the XD */
.pp-lead { max-width: 560px; margin-inline: auto; }
#pp-contact .pp-lead { max-width: 610px; }
.pp-email p { font-family: var(--font-inter); font-size: var(--fs-body); line-height: 1.7; }
.pp-email b { font-weight: var(--fw-semibold); }
.pp-email a { color: var(--color-text-muted); text-decoration: none; }
.pp-email a:hover { color: var(--color-ink); }
@media (max-width: 1024px) {
	#pp-body .elementor-widget-heading { margin-top: 48px; }
}
@media (max-width: 767px) {
	#pp-body .elementor-widget-heading { margin-top: 40px; }
	.pp-lead, #pp-contact .pp-lead { max-width: none; }
}

/* Entrance animations (Elementor fadeInUp, applied site-wide with a stagger):
   never let the reveal hide content from people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible { visibility: visible !important; animation: none !important; }
	.mb-cta__frame img, .mb-news__figure img { transition: none !important; }
}

/* ==========================================================================
   Header (slide-out) + footer menus: underline that wipes in on hover and
   stays put on the page you are currently on.
   ========================================================================== */
.slide-menu__list a,
.footer-menu a {
	position: relative;
	text-decoration: none;
	transition: color .35s ease;
}
.slide-menu__list a::after,
.footer-menu a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.slide-menu__list a:hover::after,
.slide-menu__list a:focus-visible::after,
.slide-menu__list .current-menu-item > a::after,
.slide-menu__list .current_page_item > a::after,
.slide-menu__list .current-menu-ancestor > a::after,
.footer-menu a:hover::after,
.footer-menu a:focus-visible::after,
.footer-menu .current-menu-item > a::after,
.footer-menu .current_page_item > a::after,
.footer-menu .current-menu-ancestor > a::after {
	transform: scaleX(1);
}
/* leaving the link, the underline retracts to the right — reads as a wipe-out */
.slide-menu__list a::after,
.footer-menu a::after { transform-origin: right center; }
.slide-menu__list a:hover::after,
.slide-menu__list a:focus-visible::after,
.footer-menu a:hover::after,
.footer-menu a:focus-visible::after { transform-origin: left center; }
/* the current page keeps its underline without animating on load */
.slide-menu__list .current-menu-item > a::after,
.slide-menu__list .current_page_item > a::after,
.footer-menu .current-menu-item > a::after,
.footer-menu .current_page_item > a::after { transform-origin: left center; transition: none; }

/* the old flat opacity fade is replaced by the underline */
.slide-menu__list a:hover,
.footer-menu a:hover { opacity: 1; color: var(--color-ink); }
.slide-menu__list a { padding-bottom: 12px; }
.footer-menu a { display: inline-block; padding-bottom: 4px; }
@media (prefers-reduced-motion: reduce) {
	.slide-menu__list a::after, .footer-menu a::after { transition: none; }
}

/* ==========================================================================
   The Residences — floors list lines up with the floors in the building image
   (client #57 "like the brochure"). The left column is as tall as the image
   (row = align-items:stretch), so each floor row is pinned by its bottom rule
   to the floor's base in the picture: 12 & 13 → 56 %, 11 → 72 %, 10 → 88 %.
   Desktop only — tablet/mobile keep the natural stacked list.
   ========================================================================== */
@media (min-width: 1025px) {
	#res-floors .elementor-element-823cd1c { position: relative; padding-bottom: 0 !important; }
	#res-floors .elementor-element-823cd1c > .e-con { position: absolute !important; left: 0; right: 0; margin: 0 !important; }
	#res-floors .elementor-element-59d6ffc { bottom: 44%; }
	#res-floors .elementor-element-bc87c0a { bottom: 28%; }
	#res-floors .elementor-element-4f0f452 { bottom: 12%; }
}

/* ==========================================================================
   Feedback round 3 (Markup #62–#102)
   ========================================================================== */

/* #66 #67 hero: title and the bottom copy never overlap on short windows.
   Rows: [header clearance / free] [title] [bottom copy]. The two outer rows share
   the free space equally, so the title stays centred until the bottom copy needs
   more room — then the title moves up instead of sliding under it. */
.mb-hero { display: grid; grid-template-rows: minmax(var(--header-h, 88px), 1fr) auto minmax(0, 1fr); justify-items: center; align-items: center; }
.mb-hero__center { grid-row: 2; padding: 24px 20px; }
.mb-hero__bottom { grid-row: 3; position: relative; align-self: end; width: 100%; padding-top: 32px; }

/* #78 #86 SCROLL: a soft bounce */
.mb-hero__scroll { animation: mbScrollBounce 2.4s ease-in-out infinite; }
@keyframes mbScrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* #88 hero nav links: a small down-arrow pops up beside the label on hover */
.mb-hero__title a::after,
.mb-hero__subtitle a::after {
	content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 10px; vertical-align: middle;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	opacity: 0; transform: translateY(-6px) rotate(45deg); transition: opacity .3s ease, transform .3s ease;
}
.mb-hero__title a:hover::after,
.mb-hero__subtitle a:hover::after { opacity: 1; transform: translateY(0) rotate(45deg); }

/* #81 carousel arrows: a drawn chevron — thin (1px) by default, thicker (2.5px) on hover.
   (the Elementor icon is a filled shape, so its weight can't be animated) */
.mb-carousel .elementor-swiper-button svg { display: none !important; }
.mb-carousel .elementor-swiper-button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-dark); }
.mb-carousel .elementor-swiper-button::before {
	content: ""; width: 14px; height: 14px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transition: border-width .2s ease, transform .2s ease;
}
.mb-carousel .elementor-swiper-button-prev::before { transform: translateX(3px) rotate(45deg); }
.mb-carousel .elementor-swiper-button-next::before { transform: translateX(-3px) rotate(-135deg); }
.mb-carousel .elementor-swiper-button:hover::before { border-width: 0 0 2.5px 2.5px; }
.mb-carousel .elementor-swiper-button-prev:hover::before { transform: translateX(0) rotate(45deg); }
.mb-carousel .elementor-swiper-button-next:hover::before { transform: translateX(0) rotate(-135deg); }
#bld-performance .mb-carousel .elementor-swiper-button, #res-penthouse .mb-carousel .elementor-swiper-button { color: #f2efea; }

/* arrows sit OUTSIDE the photos on desktop (script.js moves them out of the swiper, which clips) */
@media (min-width: 1025px) {
	.mb-carousel.mb-arrows-out { position: relative; padding-left: 64px !important; padding-right: 64px !important; box-sizing: border-box; }
	.mb-carousel.mb-arrows-out > .elementor-swiper-button { position: absolute; top: calc(var(--mb-slide-h) / 2); transform: translateY(-50%); margin: 0; z-index: 2; }
	.mb-carousel.mb-arrows-out > .elementor-swiper-button-prev { left: 8px; right: auto; }
	.mb-carousel.mb-arrows-out > .elementor-swiper-button-next { right: 8px; left: auto; }
}

/* #99 BACK TO GALLERY: an arrow pointing back slides in on hover */
[id^="gal"][id$="-head"] .mb-label a { display: inline-flex; align-items: center; transition: transform .3s ease; }
[id^="gal"][id$="-head"] .mb-label a::before {
	content: ""; width: 6px; height: 6px; margin-right: 0; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transform: rotate(45deg); opacity: 0; max-width: 0; transition: opacity .3s ease, margin .3s ease, max-width .3s ease;
}
[id^="gal"][id$="-head"] .mb-label a:hover::before { opacity: 1; max-width: 6px; margin-right: 10px; }

/* #100 BACK TO TOP: bolder label, the arrow shaft stretches upwards */
.mb-backtop .elementor-button-text { transition: font-weight .2s ease, letter-spacing .2s ease; }
.mb-backtop .elementor-button:hover .elementor-button-text { font-weight: 600; }
.mb-backtop .elementor-button-icon svg { transform-origin: 50% 100%; transition: transform .35s ease; }
.mb-backtop .elementor-button:hover .elementor-button-icon svg { transform: scaleY(1.45) translateY(-2px); }

/* #101 news: breathing room between the date/source line and the headline */
.mb-news__feature .mb-news__meta { margin-bottom: 22px; }
.mb-news__feature .mb-news__title { margin-top: 0; }

/* #102 video player: the embed always fills the 16:9 stage */
.mb-news__frame:not([hidden]) { display: block; }
.mb-news__frame iframe, .mb-news__frame video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }

/* #76 home 3×3 gallery: no hover state */
#inquire .elementor-widget-gallery .e-gallery-item,
#inquire .elementor-widget-gallery .e-gallery-image { transition: none !important; transform: none !important; cursor: default; }
#inquire .elementor-widget-gallery .elementor-gallery-item__overlay,
#inquire .elementor-widget-gallery .elementor-gallery-item__content { display: none !important; }

/* #74 home index: rows are toggles — the active row is dark and shows VIEW MORE */
.js-index-toggle .mb-index__label { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; text-decoration: none; }
.js-index-toggle .mb-index__row.is-active .mb-index__label { color: #1a1818 !important; }
.js-index-toggle .mb-index__more { text-decoration: none; color: inherit; }
.js-index-toggle .mb-index__row.is-active .mb-index__more { opacity: 1; transform: none; }
.mb-index-swap { transition: opacity .35s ease; }
.mb-index-swap.is-out { opacity: 0; }

/* #91 amenities list starts where the paragraph above starts (script.js sets --amen-list-x) */
@media (min-width: 1025px) {
	.elementor-widget-pp-image-slider.is-aligned .pp-image-slider-wrap { flex: 0 0 var(--amen-list-x) !important; width: var(--amen-list-x) !important; max-width: none !important; }
	.elementor-widget-pp-image-slider.is-aligned .pp-image-slider-thumb-pagination { flex: 1 1 auto !important; width: auto !important; max-width: none !important; padding-left: var(--amen-gap, 40px); }
}

/* building performance on mobile: stage hugs the image so the % positions still map */
@media (max-width: 767px) { .mb-perf__stage { width: fit-content; max-width: 100%; } }

/* #83 Vision: the large entrance render fits the browser window (full width, never taller than the screen) */
#v-credit .elementor-element-5500bbe img { width: 100%; height: auto; max-height: calc(100vh - var(--header-h-solid, 85px)); object-fit: cover; display: block; }

/* body copy inside the custom widgets follows the same leading */
.mb-hero__tagline, .mb-intro__text, .mb-history__body, .mb-news__text, .mb-article__body { line-height: var(--line-height-body) !important; }

/* #93 building never moves between tabs: every tab image + the default image share one
   790x760 canvas (building drawn at the same spot) and render at exactly the same box.
   (a generic `img { height:auto }` rule used to beat the 500px height, so each tab
   scaled differently) */
@media (min-width: 1101px) {
	.mb-perf .mb-perf__img,
	.mb-perf .mb-perf__default img { height: 500px !important; width: auto !important; max-width: none !important; }
	.mb-perf .mb-perf__stage { width: fit-content; }
}

/* Team sliders sit in a half-width column — keep their frame close to the photos' own ratio
   so the caption isn't pushed far below by the tall full-width slider height */
[id^="team-"] .mb-carousel { --mb-slide-h: min(46vw * .62, 560px); }