/**
 * MHS Network Tools — homepage.
 *
 * Two things live here. The first half tightens the scale of the existing
 * page: type sizes, section rhythm, card padding, radii, and the alignment
 * that makes a grid of cards read as a grid rather than a row of differently
 * shaped boxes. The second half styles the five blocks that replace the parts
 * of the page that were doing the least work.
 *
 * !important appears throughout the first half because Elementor writes
 * per-widget rules with higher specificity than a hand-written selector can
 * reach without it. That is a property of Elementor, not enthusiasm. The
 * second half needs almost none of it, because those blocks are ours.
 */

/* ==========================================================================
   PART ONE — the refinement layer
   ========================================================================== */

body.home {
	--mhs-h1: 52px;
	--mhs-h2: 34px;
	--mhs-h4: 17px;
	--mhs-lead: 17px;
	--mhs-body: 14.5px;
	--mhs-section-y: 64px;
	--mhs-hero-top: 158px;
	--mhs-card-pad: 24px 26px;
	--mhs-radius: 10px;
	--mhs-gap: 18px;
}

/* --- section rhythm: 125px top and bottom was most of an 8,000px page --- */

body.home .elementor-element-6b091f3,
body.home .elementor-element-d20604c,
body.home .elementor-element-ef37f17 {
	padding-top: var(--mhs-section-y) !important;
	padding-bottom: var(--mhs-section-y) !important;
}

body.home .elementor-element-7b8c51f {
	padding-top: var(--mhs-hero-top) !important;
}

body.home .elementor-widget-spacer .elementor-spacer-inner {
	height: 28px !important;
}

/* --- typography --- */

body.home .elementor-widget-sasi-heading h1,
body.home h1.sasi-heading__title {
	font-size: var(--mhs-h1) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.015em !important;
}

body.home h2,
body.home .sasi-heading h2,
body.home .sasi-heading__title {
	font-size: var(--mhs-h2) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

body.home h4,
body.home .icon-box-title {
	font-size: var(--mhs-h4) !important;
	line-height: 1.35 !important;
}

body.home .elementor-element-7b8c51f .elementor-widget-text-editor,
body.home .elementor-element-7b8c51f .elementor-widget-text-editor p {
	font-size: var(--mhs-lead) !important;
	line-height: 1.6 !important;
}

body.home .sasi-icon-box__content p,
body.home .sasi-icon-box__content .icon-box-description {
	font-size: var(--mhs-body) !important;
	line-height: 1.62 !important;
}

/* --- eyebrow pills: five on one page, each 16px in a 42px lozenge --- */

body.home .sasi-heading__sub {
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 5px 11px !important;
	border-radius: 6px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	color: rgba(255, 255, 255, 0.8) !important;
	border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* --- service cards: tighter box, and every card fills its cell so the
       Read More buttons land on one baseline --- */

body.home .sasi-view-icon-stacked .sasi-icon-box {
	padding: var(--mhs-card-pad) !important;
	gap: 16px !important;
	border-radius: var(--mhs-radius) !important;
	height: 100% !important;
}

body.home .sasi-view-icon-stacked .elementor-widget-container {
	height: 100%;
}

body.home .sasi-icon-box__content {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	gap: 10px !important;
}

body.home .icon-box-btn {
	margin-top: auto !important;
	padding-top: 6px !important;
}

/* --- icons. The page uses these two ways and they want different sizes:
       a glyph sitting on a coloured disc, and a bare glyph with nothing
       behind it. Sizing both the same was the mistake — a bare 20px icon
       above a 17px heading reads as a speck. --- */

/* On a disc. The theme's padding was drawn for a much larger disc: at 44px
   it left an 11px hole, and the glyph — a flex item, so shrinkable — was
   squeezed to 9px wide against its own 20px. It went out that way. Centring
   the glyph rather than padding it keeps the two sizes independent. */
body.home .sasi-view-icon-stacked .sasi-icon-box__icon {
	width: 44px !important;
	height: 44px !important;
	flex: 0 0 44px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body.home .sasi-view-icon-stacked .sasi-icon-box__icon svg,
body.home .sasi-view-icon-stacked .sasi-icon-box__icon img,
body.home .sasi-view-icon-stacked .sasi-icon-box__icon i {
	width: 22px !important;
	height: 22px !important;
	font-size: 22px !important;
	flex: 0 0 auto !important;
}

/* Bare. No disc to lend it presence, and a whole band of white space around
   it, so it carries the weight itself. */
body.home .sasi-view-icon-default .sasi-icon-box__icon {
	width: auto !important;
	height: auto !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
}

body.home .sasi-view-icon-default .sasi-icon-box__icon svg,
body.home .sasi-view-icon-default .sasi-icon-box__icon img,
body.home .sasi-view-icon-default .sasi-icon-box__icon i {
	width: 30px !important;
	height: 30px !important;
	font-size: 30px !important;
	flex: 0 0 auto !important;
}

/* --- gutters. The column count is left exactly as Elementor set it. --- */

body.home .e-con.e-grid,
body.home .e-con-full.e-grid {
	gap: var(--mhs-gap) !important;
	align-items: stretch !important;
}

body.home .sasi-btn-small {
	font-size: 13px !important;
	padding: 9px 16px !important;
}

body.home .sasi-btn {
	font-size: 14px !important;
}

/* --- blog cards. The post title is an <h2>, so the section-heading size
       above catches it; it is a card title and wants card-title size. --- */

body.home .post-box.grid-box {
	border-radius: var(--mhs-radius) !important;
	padding: 8px !important;
}

body.home .post-box .entry-title,
body.home .post-box h2.entry-title {
	font-size: 17px !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
}

body.home .post-box .posted-in,
body.home .post-box .byline,
body.home .post-box .posted-on,
body.home .post-box .comment-num {
	font-size: 12px !important;
}

body.home .post-box .entry-summary,
body.home .post-box .entry-text p {
	font-size: 13.5px !important;
	line-height: 1.55 !important;
}

body.home .post-box .posted-in a {
	padding: 3px 9px !important;
	font-size: 11px !important;
	border-radius: 5px !important;
}

/* --- partner logos: one optical height, one treatment --- */

body.home .elementor-widget-image-carousel img {
	max-height: 34px !important;
	width: auto !important;
	object-fit: contain !important;
	opacity: 0.72 !important;
	filter: grayscale(1) !important;
	transition: opacity 0.2s, filter 0.2s !important;
}

body.home .elementor-widget-image-carousel img:hover {
	opacity: 1 !important;
	filter: grayscale(0) !important;
}

@media (max-width: 767px) {
	body.home {
		--mhs-h1: 34px;
		--mhs-h2: 26px;
		--mhs-section-y: 44px;
		--mhs-hero-top: 96px;
		--mhs-card-pad: 20px 20px;
	}
}

/* ==========================================================================
   PART TWO — the blocks
   --------------------------------------------------------------------------
   The blocks are built as ordinary Elementor containers and widgets, so
   Elementor owns their layout: padding, gaps, flex direction, backgrounds,
   borders, radii and typography all come from the element's own settings and
   are editable in the UI. Nothing here re-declares any of that, because a
   stylesheet fighting the editor is a stylesheet that makes the editor lie.

   What is left is the handful of things Elementor has no control for: an
   animation, an image that has to fill its box, a caption that has to sit on
   top of a photograph, and four drawings. Those are here.

   Every selector also works on the plugin's own shortcode markup, so the
   two ways of placing a block produce the same result.
   ========================================================================== */

.mhs-home {
	--hm-green: #8ed35a;
	--hm-green-deep: #6fbd3a;
	--hm-blue: #43baff;
	--hm-ix: #6fd0ff;
	--hm-carrier: #b58cf0;
	--hm-dim: #9aa7b8;
	--hm-faint: #6f7c8c;
	--hm-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   The status dot
   -------------------------------------------------------------------------- */

.mhs-hm-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hm-green-deep);
	display: inline-block;
	flex: 0 0 7px;
}

.mhs-hm-dot.is-live {
	animation: mhsHmPulse 2.2s ease-out infinite;
}

.mhs-hm-status.is-down .mhs-hm-dot {
	background: #f2545b;
}

@keyframes mhsHmPulse {
	0% { box-shadow: 0 0 0 0 rgba(111, 189, 58, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(111, 189, 58, 0); }
	100% { box-shadow: 0 0 0 0 rgba(111, 189, 58, 0); }
}

/* The dot sits in an HTML widget, which Elementor gives a block wrapper. */
.mhs-hm-dot-wrap,
.mhs-hm-dot-wrap .elementor-widget-container {
	display: flex;
	align-items: center;
	line-height: 0;
}

/* --------------------------------------------------------------------------
   The cycling word
   --------------------------------------------------------------------------
   vertical-align: top is what keeps it on the same baseline as the words
   beside it: the window and the words inside carry the same line-height as
   the heading, so aligning their tops aligns their baselines. Nudging it by
   hand looks right at one size and wrong at every other.
   -------------------------------------------------------------------------- */

/* One variable holds the line height, and the window, the words and the
   keyframes all read it. Someone changing the heading's line height in
   Elementor only has to change this to match, rather than discovering that
   the cycling word now sits half a line low. */
.mhs-hm-rot {
	--hm-rot-h: 1.06em;
	display: inline-block;
	overflow: hidden;
	height: var(--hm-rot-h);
	vertical-align: top;
}

.mhs-hm-rot-inner {
	display: block;
	animation: mhsHmRot 14s cubic-bezier(0.72, 0, 0.24, 1) infinite;
}

.mhs-hm-rot-inner span {
	display: block;
	height: var(--hm-rot-h);
	line-height: var(--hm-rot-h);
	color: var(--hm-green);
	white-space: nowrap;
}

@keyframes mhsHmRot {
	0%, 19% { transform: translateY(0); }
	25%, 44% { transform: translateY(calc(var(--hm-rot-h) * -1)); }
	50%, 69% { transform: translateY(calc(var(--hm-rot-h) * -2)); }
	75%, 94% { transform: translateY(calc(var(--hm-rot-h) * -3)); }
	100% { transform: translateY(0); }
}

/* The timing has to match however many words are actually in the heading,
   because someone will edit them. Counting the children is the only way to
   know: with three words and four steps, the last step lands on nothing. */

.mhs-hm-rot-inner:has(> span:nth-child(2):last-child),
.mhs-hm-h1[data-words="2"] .mhs-hm-rot-inner {
	animation-name: mhsHmRot2;
}

.mhs-hm-rot-inner:has(> span:nth-child(3):last-child),
.mhs-hm-h1[data-words="3"] .mhs-hm-rot-inner {
	animation-name: mhsHmRot3;
}

.mhs-hm-rot-inner:has(> span:only-child),
.mhs-hm-h1[data-words="1"] .mhs-hm-rot-inner {
	animation: none;
}

@keyframes mhsHmRot2 {
	0%, 42% { transform: translateY(0); }
	50%, 92% { transform: translateY(calc(var(--hm-rot-h) * -1)); }
	100% { transform: translateY(0); }
}

@keyframes mhsHmRot3 {
	0%, 26% { transform: translateY(0); }
	33%, 59% { transform: translateY(calc(var(--hm-rot-h) * -1)); }
	66%, 94% { transform: translateY(calc(var(--hm-rot-h) * -2)); }
	100% { transform: translateY(0); }
}

/* The headline must not wrap mid-line on desktop, or the cycling word jumps
   to its own row when a long one comes round. */
.mhs-hm-h1 .elementor-heading-title,
h1.mhs-hm-h1,
.mhs-hm-title h1 {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The live readout — entirely our own markup, so all of it is here
   -------------------------------------------------------------------------- */

.mhs-hm-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	padding: 13px 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.035);
	font-family: var(--hm-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.74);
}

.mhs-hm-strip[hidden] {
	display: none;
}

.mhs-hm-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--hm-green);
}

.mhs-hm-stat b {
	font-weight: 500;
	color: rgba(255, 255, 255, 0.4);
	margin-right: 7px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
}

.mhs-hm-stat[hidden] {
	display: none;
}

.mhs-hm-tail {
	margin-left: auto;
	color: rgba(255, 255, 255, 0.34);
}

/* --------------------------------------------------------------------------
   The status pill — also our own markup
   -------------------------------------------------------------------------- */

.mhs-home .mhs-hm-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	font-family: var(--hm-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid rgba(111, 189, 58, 0.28);
	background: rgba(111, 189, 58, 0.09);
	color: var(--hm-green);
}

.mhs-home .mhs-hm-status.is-down {
	border-color: rgba(242, 84, 91, 0.3);
	background: rgba(242, 84, 91, 0.1);
	color: #f2545b;
}

.mhs-home a.mhs-hm-status:hover,
.mhs-home a.mhs-hm-status:focus-visible {
	border-color: rgba(111, 189, 58, 0.55);
	color: #a2de75;
}

/* --------------------------------------------------------------------------
   The photograph
   --------------------------------------------------------------------------
   Elementor sizes the container; these rules make the image fill it rather
   than sit in it at its own aspect ratio, and put the veil and the caption
   over the top. The veil is a pseudo-element so the page needs no extra
   widget for something nobody will ever want to edit.
   -------------------------------------------------------------------------- */

.mhs-hm-photo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Elementor gives every widget position: relative, which would make the
   image widget the photograph's containing block rather than the frame
   around it — and that widget is only as tall as its contents, which for an
   absolutely positioned image is nothing at all. Taking the widget out of
   the positioning chain is what lets the image fill the frame. */
.mhs-hm-photo > .e-con-inner,
.mhs-hm-photo .elementor-widget-image,
.mhs-hm-photo .elementor-widget-image > .elementor-widget-container,
.mhs-hm-photo figure,
.mhs-hm-photo .mhs-hm-photo-img {
	position: static;
	height: 100%;
	margin: 0;
}

.mhs-hm-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 44% 50%;
	display: block;
}

.mhs-hm-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(5, 7, 10, 0.9) 0%, rgba(5, 7, 10, 0.06) 46%, rgba(5, 7, 10, 0.22) 100%);
}

.mhs-hm-photo-cap {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 18px;
	z-index: 2;
}

/* Elementor gives every container width: 100%, and a declared width beats
   left/right: the caption ends up a full frame wide starting 22px in, so the
   place name runs past the photograph's edge and gets clipped. Letting the
   width fall out of left/right is what keeps it inside. */
.mhs-hm-photo .mhs-hm-photo-cap {
	width: auto !important;
	max-width: none;
}

/* --------------------------------------------------------------------------
   The tiles
   --------------------------------------------------------------------------
   Elementor owns their padding, border and background. What it expresses
   awkwardly is "four across, wrapping sensibly", so that much is here: a
   flex basis wide enough that four fit on a desktop row and two fit on a
   tablet, without a media query guessing at the container's width.
   -------------------------------------------------------------------------- */

.mhs-hm-tiles > .e-con,
.mhs-hm-tiles > .elementor-element,
.mhs-hm-tiles > .mhs-hm-tile {
	flex: 1 1 240px;
	min-width: 0;
}

/* The specification pairs are the same case: two per row, always, however
   long the values are. A flex basis rather than a grid so the row still
   collapses to one column when the column itself is narrow. */

.mhs-hm-specs > .e-con,
.mhs-hm-specs > .elementor-element {
	flex: 0 0 calc(50% - 13px);
	min-width: 0;
}

@media (max-width: 480px) {
	.mhs-hm-specs > .e-con,
	.mhs-hm-specs > .elementor-element {
		flex-basis: 100%;
	}
}

/* A widget in a column container stretches to the full width by default,
   which turns a button into a banner. */

.mhs-hm-btn-wrap {
	align-self: flex-start;
	margin-top: auto;
}

.mhs-hm-status-wrap {
	align-self: flex-end;
}

@media (max-width: 767px) {
	.mhs-hm-status-wrap {
		align-self: flex-start;
	}
}

/* --------------------------------------------------------------------------
   The drawings
   -------------------------------------------------------------------------- */

.mhs-hm-art {
	width: 100%;
	height: 132px;
	display: block;
}

.mhs-hm-art-mono {
	font-family: var(--hm-mono);
	fill: #8b98a8;
}

.mhs-hm-art-faint { fill: var(--hm-faint); }

.mhs-hm-art-track { fill: #1d3550; }
.mhs-hm-art-bar { fill: var(--hm-blue); opacity: 0.85; }
.mhs-hm-art-tick { stroke: var(--hm-green-deep); }
.mhs-hm-art-rule { stroke: #ffffff; stroke-opacity: 0.08; }

.mhs-hm-art-core { stroke: var(--hm-blue); stroke-opacity: 0.5; stroke-width: 1.6; stroke-linecap: round; }

.mhs-hm-art-flow {
	stroke: var(--hm-green);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 4 8;
	animation: mhsHmFlow 3.2s linear infinite;
}

.mhs-hm-art-ixline { stroke: var(--hm-ix); stroke-opacity: 0.34; stroke-width: 1; }
.mhs-hm-art-ix { fill: var(--hm-ix); }
.mhs-hm-art-pop { fill: var(--hm-blue); }
.mhs-hm-art-owned { fill: var(--hm-green); }

.mhs-hm-art-rack { stroke: #ffffff; stroke-opacity: 0.22; }
.mhs-hm-art-slot { fill: var(--hm-blue); opacity: 0.5; }

.mhs-hm-art-feed-a,
.mhs-hm-art-feed-b {
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 5 7;
	animation: mhsHmDash 2.4s linear infinite;
}

.mhs-hm-art-feed-a { stroke: var(--hm-green); }
.mhs-hm-art-feed-b { stroke: var(--hm-ix); }

.mhs-hm-art-pipe { stroke: #ffffff; stroke-opacity: 0.14; stroke-width: 10; }

.mhs-hm-art-loop {
	stroke: var(--hm-ix);
	stroke-width: 2.4;
	stroke-dasharray: 4 8;
	animation: mhsHmFlow 3.2s linear infinite;
}

.mhs-hm-art-solar { stroke: var(--hm-green); stroke-width: 1.6; stroke-linecap: round; }

@keyframes mhsHmFlow { to { stroke-dashoffset: -60; } }
@keyframes mhsHmDash { to { stroke-dashoffset: -28; } }

/* --------------------------------------------------------------------------
   The BSI rail
   -------------------------------------------------------------------------- */

.mhs-hm-trust-mark,
.mhs-hm-trust-mark .elementor-widget-container {
	flex-shrink: 0;
	line-height: 0;
}

/* An Elementor widget in a container is full width by default. Combined with
   the flex-shrink: 0 above, the mark claimed the whole rail and squeezed the
   sentence beside it to nothing — at 768px the line wrapped to one character
   per row and a 70px rail became 1,829px tall. The mark should take the width
   of the image and no more.

   !important because the rule being overridden is
   ".e-con > .e-con-inner > .elementor-widget" when the container is boxed and
   ".e-con > .elementor-widget" when it is full — three classes or two. A
   plain selector here beats one and loses to the other, so the layout would
   hold until someone flipped Width from full to boxed in the editor and then
   quietly collapse. Staff are meant to be able to touch these. */
.mhs-hm-trust .mhs-hm-trust-mark {
	width: auto !important;
	flex: 0 0 auto;
}

.mhs-hm-trust-mark img {
	display: block;
	opacity: 0.92;
}

.mhs-home .mhs-hm-trust-text {
	flex-grow: 1;
}

.mhs-home .mhs-hm-trust-link a {
	color: inherit;
	text-decoration: none;
}

.mhs-home .mhs-hm-trust-link a:hover,
.mhs-home .mhs-hm-trust-link a:focus-visible {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------------
   Elementor's own responsive settings cover the containers. These are the
   two things it cannot reach into.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.mhs-hm-h1 .elementor-heading-title,
	h1.mhs-hm-h1,
	.mhs-hm-title h1 {
		white-space: normal;
	}

	/* A little more air between the lines at phone size, and the window
	   follows so the cycling word stays on the baseline. */
	.mhs-hm-rot {
		--hm-rot-h: 1.14em;
	}

	.mhs-hm-strip {
		gap: 9px 20px;
		font-size: 11.5px;
	}

	.mhs-hm-tail {
		margin-left: 0;
		width: 100%;
	}

	.mhs-hm-photo-cap {
		left: 16px;
		right: 16px;
		bottom: 14px;
	}

	/* Stacked at phone width, the photograph no longer draws its height from
	   the row beside it, and the photograph itself is absolutely positioned,
	   so it contributes none of its own — the frame collapses to nothing.
	   Measured at 360px: the frame was 330 wide and 0 tall. */
	.mhs-hm-facility .mhs-hm-photo {
		min-height: 230px;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion — every bit of movement here is decoration, so all of it
   goes when the visitor has asked for that.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mhs-hm-rot-inner,
	.mhs-hm-dot.is-live,
	.mhs-hm-art-flow,
	.mhs-hm-art-loop,
	.mhs-hm-art-feed-a,
	.mhs-hm-art-feed-b {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   The shortcode fallback
   --------------------------------------------------------------------------
   When a block is placed with its shortcode instead of the Elementor
   template, Elementor is not supplying the layout, so these rules do. They
   are scoped to the shortcode markup and never touch the template version.
   -------------------------------------------------------------------------- */

.mhs-hm-facility:not(.e-con) {
	display: flex;
	gap: 44px;
	align-items: stretch;
}

.mhs-hm-facility:not(.e-con) .mhs-hm-photo {
	flex: 1 1 58%;
	min-height: 380px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.09);
}

.mhs-hm-facility:not(.e-con) .mhs-hm-facility-body {
	flex: 1 1 42%;
	display: flex;
	flex-direction: column;
}

.mhs-hm-facility:not(.e-con) .mhs-hm-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 26px;
	padding-top: 24px;
	margin-bottom: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mhs-hm-facility:not(.e-con) .mhs-hm-photo-cap {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--hm-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ffffff;
}

.mhs-hm-facility:not(.e-con) .mhs-hm-photo-place {
	font-size: 10.5px;
	color: var(--hm-dim);
	text-align: right;
}

.mhs-hm-facility:not(.e-con) .mhs-hm-spec-value {
	display: block;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #ffffff;
}

.mhs-hm-facility:not(.e-con) .mhs-hm-spec-value.is-accent { color: var(--hm-green); }

.mhs-hm-facility:not(.e-con) .mhs-hm-spec-label {
	display: block;
	font-family: var(--hm-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hm-faint);
	margin-top: 5px;
}

.mhs-hm-facility:not(.e-con) .mhs-hm-btn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #05070a;
	background: var(--hm-green);
	padding: 12px 20px;
	border-radius: 9px;
	text-decoration: none;
}

.mhs-hm-title:not(.e-con) .mhs-hm-eyebrow,
.mhs-hm-why:not(.e-con) .mhs-hm-eyebrow,
.mhs-hm-facility:not(.e-con) .mhs-hm-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	font-family: var(--hm-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.mhs-hm-title:not(.e-con) .mhs-hm-h1 {
	margin: 0;
	font-size: 56px;
	line-height: 1.06;
	letter-spacing: -0.035em;
	font-weight: 700;
	color: #ffffff;
}

.mhs-hm-why:not(.e-con) .mhs-hm-h2,
.mhs-hm-facility:not(.e-con) .mhs-hm-h2 {
	margin: 0 0 16px;
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: #ffffff;
}

.mhs-hm-facility:not(.e-con) .mhs-hm-lede {
	margin: 0 0 24px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--hm-dim);
}

.mhs-hm-why:not(.e-con) .mhs-hm-why-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 28px;
}

.mhs-hm-why:not(.e-con) .mhs-hm-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: stretch;
}

.mhs-hm-why:not(.e-con) .mhs-hm-tile {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.035);
}

.mhs-hm-why:not(.e-con) .mhs-hm-tile-index {
	font-family: var(--hm-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hm-faint);
}

.mhs-hm-why:not(.e-con) .mhs-hm-tile h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

.mhs-hm-why:not(.e-con) .mhs-hm-tile p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hm-dim);
}

.mhs-hm-why:not(.e-con) .mhs-hm-tile-stat {
	margin-top: auto;
	font-family: var(--hm-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hm-green);
}

.mhs-hm-trust:not(.e-con) {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.035);
}

.mhs-hm-trust:not(.e-con) .mhs-hm-trust-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--hm-dim);
}

.mhs-hm-trust:not(.e-con) .mhs-hm-trust-mark {
	height: 38px;
	width: auto;
}

.mhs-hm-trust:not(.e-con) .mhs-hm-trust-link {
	font-family: var(--hm-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hm-blue);
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.mhs-hm-facility:not(.e-con) {
		flex-direction: column;
		gap: 26px;
	}

	.mhs-hm-facility:not(.e-con) .mhs-hm-photo {
		min-height: 280px;
	}

	.mhs-hm-why:not(.e-con) .mhs-hm-why-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
}

@media (max-width: 767px) {
	.mhs-hm-title:not(.e-con) .mhs-hm-h1 { font-size: 34px; }
	.mhs-hm-why:not(.e-con) .mhs-hm-h2,
	.mhs-hm-facility:not(.e-con) .mhs-hm-h2 { font-size: 26px; }

	.mhs-hm-trust:not(.e-con) {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}