/* ==========================================================================
   Mastel Hospitality - brand layer for page-builder sections
   Added 14 August 2026.  Gold #cbb473, ink #16161a, tint #f6f4f1.

   These styles attach to CSS classes set on page-builder elements, so every
   section stays fully editable in GoodLayers. Add the class to an element in
   the builder and it picks up the styling:

     mh-serif      display serif heading (no forced uppercase)
     mh-gl-hero    full-bleed image section with a directional dark scrim
     mh-gl-closing same, flat scrim, centred
     mh-gl-trust   light client-logo band
     mh-gl-logo    one logo cell
     mh-gl-split   two-column text and image section
     mh-gl-centre  centre the contents of a column
   ========================================================================== */

:root {
	--mh-gold: #cbb473;
	--mh-ink: #16161a;
	--mh-body: #5a5a5a;
	--mh-tint: #f6f4f1;
	--mh-display: "Teko", "Fira Sans", sans-serif;
	--mh-text: "Source Sans Pro", "Fira Sans", -apple-system, sans-serif;
}

/* --- display headings --------------------------------------------------
   Teko is condensed and sits small for its point size, so it needs a little
   more tracking and a tighter line-height than a normal sans.
   Both class names work: mh-display is the accurate one, mh-serif is kept
   so any section already carrying it continues to pick up the styling.
   -------------------------------------------------------------------- */

.mh-display .gdlr-core-title-item-title,
.mh-display .gdlr-core-title-item-title a,
.mh-serif .gdlr-core-title-item-title,
.mh-serif .gdlr-core-title-item-title a {
	font-family: var(--mh-display) !important;
	text-transform: none !important;
	font-weight: 500 !important;
	line-height: 1.04 !important;
	letter-spacing: .005em !important;
}

/* --- body text ---------------------------------------------------------- */

.mh-gl-hero, .mh-gl-closing, .mh-gl-split, .mh-gl-trust {
	font-family: var(--mh-text);
}
.mh-gl-hero .gdlr-core-text-box-item-content,
.mh-gl-closing .gdlr-core-text-box-item-content,
.mh-gl-split .gdlr-core-text-box-item-content,
.mh-gl-hero .gdlr-core-button-item a,
.mh-gl-closing .gdlr-core-button-item a,
.mh-gl-split .gdlr-core-button-item a,
.mh-gl-trust .gdlr-core-title-item-title,
.mh-gl-hero .gdlr-core-title-item-caption,
.mh-gl-split .gdlr-core-title-item-caption {
	font-family: var(--mh-text) !important;
}

/* --- hero and closing bands ------------------------------------------- */

.mh-gl-hero,
.mh-gl-closing { position: relative; }

.mh-gl-hero .gdlr-core-pbf-background-wrap:after,
.mh-gl-closing .gdlr-core-pbf-background-wrap:after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* directional scrim keeps the left-hand copy legible over the photograph */
.mh-gl-hero .gdlr-core-pbf-background-wrap:after {
	background: linear-gradient(90deg, rgba(10,10,12,.80) 0%, rgba(10,10,12,.55) 46%, rgba(10,10,12,.15) 100%);
}
.mh-gl-closing .gdlr-core-pbf-background-wrap:after {
	background: rgba(12,12,14,.78);
}
.mh-gl-hero .gdlr-core-pbf-wrapper-container,
.mh-gl-closing .gdlr-core-pbf-wrapper-container {
	position: relative;
	z-index: 2;
}

.mh-gl-hero .gdlr-core-text-box-item-content { max-width: 34em; }

/* --- client logo band -------------------------------------------------- */

/* NB: this column must NOT be made a flex container. The logos now live in a
   single gallery element, and flexing the column shrinks its content box to
   the width of the widest row instead of the full container. */
.mh-gl-logo .gdlr-core-gallery-list > *,
.mh-gl-logo .gdlr-core-media-image,
.mh-gl-logo .gdlr-core-image-item-wrap,
.mh-gl-logo .gdlr-core-image-item {
	border: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* --- two-column split sections ---------------------------------------- */

.mh-gl-split .gdlr-core-pbf-column { display: flex; align-items: center; }
.mh-gl-split .gdlr-core-image-item img { width: 100%; height: auto; display: block; }

/* the three benefit points inside the solutions column */
.mh-gl-split .gdlr-core-text-box-item-content p strong {
	display: block;
	font-family: var(--mh-text);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mh-ink);
	margin-bottom: 4px;
}
.mh-gl-split .gdlr-core-text-box-item-content p + p {
	border-top: 1px solid #e3dfd8;
	padding-top: 18px;
	margin-top: 18px;
}

/* --- centred content ---------------------------------------------------- */

.mh-gl-centre .gdlr-core-pbf-column-content,
.mh-gl-centre .gdlr-core-button-item { text-align: center; }

/* --- responsive --------------------------------------------------------- */

/* the cells flex, so only the height and the gutter need stepping down */
@media (max-width: 1260px) {
	.mh-gl-logo img { height: 74px !important; }
	.mh-gl-trust .gdlr-core-gallery-item-holder { gap: 20px; }
}

@media (max-width: 980px) {
	.mh-gl-split .gdlr-core-pbf-column { display: block; }
	.mh-gl-hero .gdlr-core-pbf-background-wrap:after { background: rgba(10,10,12,.68); }
}

/* --- client logo band: one row, spanning the full container -------------
   The theme lays a gallery out as floated columns, which wraps once there
   are more marks than the chosen column count. Overriding the holder to a
   single non-wrapping flex row spreads the logos evenly across the whole
   width instead, however many there are.

   The cells are flex-sized rather than fixed. That does NOT shrink the
   marks: each image is letterboxed by object-fit into an 86px-tall box, so
   every logo here is limited by its height, not its width, and the cell
   only has to stay wider than the widest rendered mark (146px, VILA VITA).
   ---------------------------------------------------------------------- */

.mh-gl-trust .gdlr-core-gallery-item,
.mh-gl-trust .gdlr-core-gallery-item-holder {
	width: 100% !important;
}
.mh-gl-trust .gdlr-core-gallery-item-holder {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
}
.mh-gl-trust .gdlr-core-gallery-column,
.mh-gl-trust .gdlr-core-gallery-list > * {
	flex: 1 1 0;
	min-width: 0;
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Several of these marks are supplied on a baked-in white canvas, which shows
   as a white tile on the tinted band. mix-blend-mode: multiply removes it,
   but multiply only sees backdrop painted in the same stacking context - and
   the band's colour comes from an absolutely positioned background wrapper,
   not from an ancestor of the image. Painting the tint on the cell itself
   puts it in the image's own backdrop, so the blend resolves correctly.
   Keep this colour identical to the section background. */
.mh-gl-trust .gdlr-core-gallery-column,
.mh-gl-trust .gdlr-core-gallery-list,
.mh-gl-trust .gdlr-core-gallery-list > a {
	background-color: var(--mh-tint);
}
.mh-gl-trust .mh-gl-logo img,
.mh-gl-logo img {
	display: block;
	/* the cell sets the width; height is what actually sizes the mark */
	width: 100% !important;
	height: 86px !important;
	max-width: none !important;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: grayscale(1) contrast(1.15);
	opacity: .78;
	transition: opacity .25s ease, filter .25s ease;
	border: 0 !important;
}
.mh-gl-logo img:hover { filter: grayscale(0) contrast(1); opacity: 1; }

/* --- statistics band ---------------------------------------------------- */

.mh-gl-stats .gdlr-core-pbf-column { text-align: center; }
.mh-gl-stat .gdlr-core-title-item-title { line-height: 1 !important; }
/* the certification cell uses a smaller figure, so pad it to sit on the same
   baseline as the numeric cells */
.mh-gl-stats .gdlr-core-pbf-column:last-child .mh-display .gdlr-core-title-item-title {
	padding-top: 14px;
}
.mh-gl-stats .gdlr-core-pbf-column + .gdlr-core-pbf-column {
	border-left: 1px solid rgba(255,255,255,.14);
}

/* --- generic section blocks --------------------------------------------- */

.mh-gl-solve, .mh-gl-why { padding-bottom: 30px; }
.mh-gl-solve .gdlr-core-title-item-title,
.mh-gl-why .gdlr-core-title-item-title { line-height: 1.15 !important; }

/* --- industries --------------------------------------------------------- */

/* --- industries: image tiles with the label set over the photograph ----- */

.mh-gl-ind .gdlr-core-pbf-column-content-margin {
	position: relative;
	overflow: hidden;
	margin: 0 !important;
}
.mh-gl-ind .gdlr-core-image-item { margin: 0 !important; padding: 0 !important; }
.mh-gl-ind .gdlr-core-image-item-wrap { border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.mh-gl-ind .gdlr-core-image-item img {
	display: block;
	width: 100% !important;
	height: 260px !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform .6s ease;
}
.mh-gl-ind:hover .gdlr-core-image-item img { transform: scale(1.05); }

/* light scrim for depth only - the label no longer relies on it */
.mh-gl-ind .gdlr-core-pbf-column-content-margin:after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,12,14,0) 55%, rgba(12,12,14,.28) 100%);
	pointer-events: none;
}

/* the label sits on a white card overlapping the foot of the photograph,
   which reads far better than small white text laid over an image */
.mh-gl-ind .gdlr-core-title-item {
	position: absolute;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 2;
	margin: 0 !important;
	padding: 15px 10px 13px !important;
	background: #fff;
	box-shadow: 0 2px 14px rgba(12,12,14,.10);
	transition: background .28s ease, transform .28s ease;
}
.mh-gl-ind .gdlr-core-title-item-title {
	line-height: 1.15 !important;
	letter-spacing: .02em !important;
	transition: color .28s ease;
}
.mh-gl-ind:hover .gdlr-core-title-item { background: var(--mh-gold); transform: translateY(-2px); }
.mh-gl-ind:hover .gdlr-core-title-item-title { color: #fff !important; }

/* --- featured solution cards --------------------------------------------- */

/* NB: the theme puts our class ON the hover-box item itself, so this must be
   .mh-gl-cards directly rather than a descendant selector. */
/* Four across. With seven cards that leaves a row of three, which flex
   centres - grid cannot centre an incomplete final row, which is why this is
   not a grid. The float reset is what stops the theme collapsing the cards. */
.mh-gl-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}
.mh-gl-cards .gdlr-core-hover-box-column {
	display: flex;
	flex: 0 0 calc(25% - 13.5px);
	float: none !important;
	width: auto !important; padding: 0 !important; margin: 0 !important;
}
.mh-gl-cards .gdlr-core-hover-box { width: 100%; transition: border-color .25s ease, background-color .25s ease; }
.mh-gl-cards .gdlr-core-hover-box-title:before {
	content: ""; display: block; width: 24px; height: 2px;
	background: var(--mh-gold); margin-bottom: 14px;
}

@media (max-width: 980px) {
	.mh-gl-logo img { height: 62px !important; }
	.mh-gl-ind .gdlr-core-image-item img { height: 200px !important; }
	.mh-gl-ind .gdlr-core-title-item { left: 10px; right: 10px; bottom: 10px; padding: 12px 8px 10px !important; }
	.mh-gl-cards .gdlr-core-hover-box-column { flex: 0 0 calc(50% - 9px); }
	.mh-gl-stats .gdlr-core-pbf-column + .gdlr-core-pbf-column { border-left: 0; }
	.mh-gl-stat { padding-bottom: 26px; }
}

/* --- certification mark -------------------------------------------------
   Shown in full colour at its issued proportions. Accreditation bodies
   normally require the mark reproduced unaltered, so the greyscale and
   blend treatment applied to client logos deliberately does NOT apply here.
   ---------------------------------------------------------------------- */

/* (retained in case the mark is ever shown as an image again) */
.mh-gl-cert .gdlr-core-image-item { margin-top: 30px; }
.mh-gl-cert .gdlr-core-image-item img {
	width: auto !important;
	height: 88px !important;
	max-width: none !important;
	filter: none !important;
	mix-blend-mode: normal !important;
	opacity: 1 !important;
	margin: 0 auto;
}
.mh-gl-cert .gdlr-core-image-item-wrap { border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.mh-gl-cert > .gdlr-core-pbf-column-content-margin { text-align: center; }

@media (max-width: 980px) {
	.mh-gl-cert .gdlr-core-image-item img { height: 70px !important; }
}

/* --- inner pages ---------------------------------------------------------
   The home page styling above is reused on inner pages. These few additions
   cover layouts the home page itself does not use.
   ---------------------------------------------------------------------- */

/* exactly five cards on one row (the home page carries seven, at four across) */
.mh-gl-cards-5 .gdlr-core-hover-box-column { flex: 0 0 calc(20% - 14.4px); }

/* --- side-by-side platform panels ---------------------------------------
   Used where a reader has to choose between two options, so the panels must
   be the same height whichever one carries more text. Flexing the row is what
   equalises them; the width:100% on the inner wrapper is required, because a
   flex child otherwise shrinks to its content and the panel goes narrow.
   ---------------------------------------------------------------------- */

.mh-gl-platforms .gdlr-core-pbf-wrapper-container {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.mh-gl-platforms .gdlr-core-pbf-column { float: none !important; display: flex; }
.mh-gl-platforms .gdlr-core-pbf-column-content-margin { width: 100%; }

/* NB: the theme applies a column's class directly to the content-margin
   element, so this must NOT be written as a descendant selector. */
.mh-gl-platform {
	background: #fff;
	border: 1px solid #e3dfd8;
	padding: 34px 32px 30px !important;
	margin: 0 !important;
}
.mh-gl-platform .gdlr-core-title-item-title:before {
	content: ""; display: block;
	width: 28px; height: 2px;
	background: var(--mh-gold);
	margin-bottom: 16px;
}
.mh-gl-platform ul { list-style: none; margin: 0 0 20px; padding: 0; }
.mh-gl-platform li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 11px;
	line-height: 1.5;
}
.mh-gl-platform li:before {
	content: ""; position: absolute;
	left: 0; top: .66em;
	width: 8px; height: 1px;
	background: var(--mh-gold);
}
.mh-gl-platform .mh-choose {
	border-top: 1px solid #e7e7e7;
	padding-top: 15px;
	margin-bottom: 0;
	font-weight: 600;
	color: var(--mh-ink);
}
/* the closing note below the two panels is a full-width row, not a panel */
.mh-gl-platform-note {
	background: none; border: 0; padding: 34px 0 0 !important;
}

@media (max-width: 860px) {
	.mh-gl-platforms .gdlr-core-pbf-column { width: 100% !important; }
	/* NB: the theme applies a column's class directly to the content-margin
   element, so this must NOT be written as a descendant selector. */
.mh-gl-platform { margin-bottom: 18px !important; }
}

/* a centred block of running text should not run the full 1400px, or the eye
   loses the line ends - roughly 68 characters is the comfortable maximum */
.mh-gl-measure .gdlr-core-text-box-item-content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.mh-gl-intro .gdlr-core-title-item-title { margin-left: auto; margin-right: auto; }

@media (max-width: 1180px) {
	.mh-gl-cards-5 .gdlr-core-hover-box-column { flex: 0 0 calc(33.333% - 12px); }
}
@media (max-width: 780px) {
	.mh-gl-cards-5 .gdlr-core-hover-box-column { flex: 0 0 calc(50% - 9px); }
}

/* --- logo band on a phone ------------------------------------------------
   Seven marks across a 375px screen leaves about 40px each, which is not
   legible, so this is the one place the row is allowed to wrap.
   ---------------------------------------------------------------------- */

@media (max-width: 760px) {
	.mh-gl-trust .gdlr-core-gallery-item-holder {
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px 18px;
	}
	.mh-gl-trust .gdlr-core-gallery-column { flex: 0 1 44%; }
	.mh-gl-logo img { height: 56px !important; }
}