/*
 * Home page v2 (page/template-home-v2.php). Scoped to #primary.mhome.
 */

.mhome {
	--hm-ink: #0b3a47;
	--hm-text: #34525b;
	--hm-muted: #5b7780;
	--hm-lagoon: #4bbcd7;
	--hm-deep: #1c7f99;
	--hm-foam: #eef8fb;
	--hm-line: #dcebef;
	--hm-coral: #d9343f;
	--hm-font: "Onest", "Segoe UI", Roboto, Arial, sans-serif;
	--hm-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 14'%3E%3Cpath d='M2 9C18 2 30 2 44 7.5S70 14 86 5' fill='none' stroke='%234bbcd7' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
#primary.mhome { width: 100%; margin: 0; padding: 0; float: none; font-family: var(--hm-font); color: var(--hm-text); }
#primary.mhome :is(h1, h2, h3, p, li, a, dt, dd, span, b, button, em) { font-family: var(--hm-font); }
#primary.mhome .mh-ico { width: 1em; height: 1em; flex: none; fill: currentColor; }
#primary.mhome .hm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
#primary.mhome ul { margin: 0; padding: 0; list-style: none; }
#primary.mhome li { margin: 0; padding: 0; list-style: none; background: none; }
#primary.mhome li::before { display: none; }

/* ---------- shared ---------- */
#primary.mhome .hm-eyebrow { margin: 0 0 14px; color: var(--hm-deep); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
#primary.mhome .hm-eyebrow--light { color: var(--hm-lagoon); }
#primary.mhome .hm-h2 { margin: 0; color: var(--hm-ink); font-size: clamp(28px, 3.2vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-transform: none; text-align: left; }
#primary.mhome .hm-h2--light { color: #fff; }
#primary.mhome .hm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#primary.mhome .hm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 54px; padding: 0 28px;
	border: 1.5px solid transparent; border-radius: 999px;
	font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
#primary.mhome .hm-btn:active { transform: translateY(1px); }
#primary.mhome .hm-btn:focus-visible,
#primary.mhome a:focus-visible,
#primary.mhome button:focus-visible { outline: 2px solid var(--hm-ink); outline-offset: 3px; }
#primary.mhome .hm-btn--ink { background: var(--hm-ink); color: #fff; }
#primary.mhome .hm-btn--ink:hover { background: var(--hm-deep); color: #fff; }
#primary.mhome .hm-btn--line { border-color: rgba(11, 58, 71, .25); background: rgba(255, 255, 255, .7); color: var(--hm-ink); }
#primary.mhome .hm-btn--line:hover { border-color: var(--hm-ink); background: #fff; color: var(--hm-ink); }

/* ---------- hero ---------- */
#primary.mhome .hm-hero {
	position: relative;
	padding: 56px 0 110px;
	background:
		radial-gradient(900px 420px at 80% 0%, rgba(75, 188, 215, .28), transparent 70%),
		radial-gradient(700px 360px at 0% 100%, rgba(75, 188, 215, .12), transparent 70%),
		var(--hm-foam);
	overflow: hidden;
}
#primary.mhome .hm-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
#primary.mhome .hm-title {
	position: relative;
	margin: 0 0 24px; padding: 0 0 30px;
	color: var(--hm-ink);
	font-size: clamp(40px, 5.2vw, 76px); font-weight: 600; line-height: 1.02; letter-spacing: -.03em;
	text-transform: none; text-align: left;
}
#primary.mhome .hm-title em { display: block; color: var(--hm-deep); font-style: normal; font-weight: 500; font-size: .62em; letter-spacing: -.015em; margin-top: .25em; }
#primary.mhome .hm-title::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 96px; height: 15px;
	background: var(--hm-squiggle) no-repeat center / contain;
}
#primary.mhome .hm-lead { max-width: 36em; margin: 0 0 30px; color: var(--hm-text); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; }
#primary.mhome .hm-trust { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 38px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(11, 58, 71, .12); }
#primary.mhome .hm-trust li, #primary.mhome .hm-trust a { display: flex; align-items: baseline; gap: 8px; color: var(--hm-muted); font-size: 14.5px; text-decoration: none; }
#primary.mhome .hm-trust b { color: var(--hm-ink); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
#primary.mhome .hm-trust a:hover span { color: var(--hm-ink); text-decoration: underline; }
#primary.mhome .hm-stars { color: #f2a93b; font-size: 20px; }

#primary.mhome .hm-hero__media { position: relative; }
#primary.mhome .hm-hero__photo {
	position: relative; z-index: 1;
	aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: 260px 40px 260px 40px;
	box-shadow: 0 40px 80px -50px rgba(11, 58, 71, .7);
	background: #fff;
}
#primary.mhome .hm-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
#primary.mhome .hm-hero__line {
	position: absolute; z-index: 2; left: -12%; bottom: 12%;
	width: 124%; height: auto; pointer-events: none;
	fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .9;
	filter: drop-shadow(0 4px 10px rgba(11, 58, 71, .25));
}
#primary.mhome .hm-card {
	position: absolute; z-index: 3; left: -34px; bottom: -26px;
	width: 290px; padding: 18px 20px;
	border-radius: 22px; background: #fff;
	box-shadow: 0 24px 50px -24px rgba(11, 58, 71, .45);
}
#primary.mhome .hm-card .mf-hours { display: none; }
#primary.mhome .hm-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--hm-muted); font-size: 13.5px; font-weight: 500; }
#primary.mhome .hm-status[hidden] { display: none; }
#primary.mhome .hm-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa9ad; }
#primary.mhome .hm-status.is-open { color: #17724a; }
#primary.mhome .hm-status.is-open::before { background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, .18); }
#primary.mhome .hm-card__addr { margin: 0 0 6px; color: var(--hm-ink); font-size: 15px; font-weight: 500; line-height: 1.4; }
#primary.mhome .hm-card__tel { color: var(--hm-deep); font-size: 17px; font-weight: 600; text-decoration: none; }
#primary.mhome .hm-card__tel:hover { color: var(--hm-ink); }
#primary.mhome .hm-edge { position: absolute; left: 0; bottom: -1px; width: 100%; height: 40px; fill: #fff; }

/* ---------- services ---------- */
#primary.mhome .hm-services { padding: 70px 0 40px; }
#primary.mhome .hm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 34px; }
#primary.mhome .hm-filter { display: flex; flex-wrap: wrap; gap: 8px; }
#primary.mhome .hm-filter[hidden] { display: none; }
#primary.mhome .hm-filter button {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 42px; padding: 0 18px;
	border: 1px solid var(--hm-line); border-radius: 999px; background: #fff;
	color: var(--hm-ink); font-size: 15px; font-weight: 500; cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
#primary.mhome .hm-filter button span { color: var(--hm-muted); font-size: 13px; }
#primary.mhome .hm-filter button:hover { border-color: var(--hm-lagoon); }
#primary.mhome .hm-filter button[aria-selected="true"] { border-color: var(--hm-ink); background: var(--hm-ink); color: #fff; }
#primary.mhome .hm-filter button[aria-selected="true"] span { color: #a9dbe7; }

#primary.mhome .hm-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
#primary.mhome .hm-group {
	overflow: hidden;
	border: 1px solid var(--hm-line); border-radius: 28px; background: #fff;
	transition: box-shadow .3s ease, border-color .3s ease;
}
#primary.mhome .hm-group:hover { border-color: #c8e3ea; box-shadow: 0 30px 60px -44px rgba(11, 58, 71, .5); }
#primary.mhome .hm-group[hidden] { display: none; }
#primary.mhome .hm-group__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hm-foam); }
#primary.mhome .hm-group__img::after {
	/* S-curve lower edge of the photo — the brand's line of beauty */
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V14C70 0 140 0 200 10S330 26 400 8V26Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
#primary.mhome .hm-group__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
#primary.mhome .hm-group--face .hm-group__img img { object-position: 50% 30%; }
#primary.mhome .hm-group:hover .hm-group__img img { transform: scale(1.04); }
#primary.mhome .hm-group__body { padding: 20px 26px 22px; }
#primary.mhome .hm-group__title {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	margin: 0 0 10px; color: var(--hm-ink);
	font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-transform: none;
}
#primary.mhome .hm-group__title span { flex: none; min-width: 30px; padding: 3px 9px; border-radius: 999px; background: var(--hm-foam); color: var(--hm-deep); font-size: 13px; font-weight: 600; text-align: center; }
#primary.mhome .hm-list li + li { border-top: 1px solid var(--hm-line); }
#primary.mhome .hm-list a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 11px 0;
	color: var(--hm-text); font-size: 16px; line-height: 1.35; text-decoration: none;
	transition: color .2s, padding .2s;
}
#primary.mhome .hm-list a .mh-ico { font-size: 17px; color: var(--hm-lagoon); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
#primary.mhome .hm-list a:hover { color: var(--hm-ink); padding-left: 4px; }
#primary.mhome .hm-list a:hover .mh-ico { opacity: 1; transform: none; }

#primary.mhome .hm-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; margin-top: 30px; }
#primary.mhome .hm-more__link { display: inline-flex; align-items: center; gap: 8px; color: var(--hm-ink); font-size: 17px; font-weight: 600; text-decoration: none; }
#primary.mhome .hm-more__link .mh-ico { color: var(--hm-lagoon); transition: transform .2s; }
#primary.mhome .hm-more__link:hover .mh-ico { transform: translateX(4px); }
#primary.mhome .hm-more__link--muted { color: var(--hm-muted); font-size: 15px; font-weight: 500; }

/* ---------- why ---------- */
#primary.mhome .hm-why { position: relative; margin-top: 60px; padding: 110px 0; background: var(--hm-ink); color: #d7eef4; }
#primary.mhome .hm-why__edge { position: absolute; left: 0; width: 100%; height: 40px; fill: #fff; }
#primary.mhome .hm-why__edge--top { top: -1px; }
#primary.mhome .hm-why__edge--bottom { bottom: -1px; }
#primary.mhome .hm-why__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
#primary.mhome .hm-why__intro p { margin: 20px 0 24px; color: #cfe7ee; font-size: 17px; line-height: 1.65; }
#primary.mhome .hm-link-light { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; }
#primary.mhome .hm-link-light .mh-ico { color: var(--hm-lagoon); transition: transform .2s; }
#primary.mhome .hm-link-light:hover .mh-ico { transform: translateX(4px); }
#primary.mhome .hm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
#primary.mhome .hm-facts > div { padding: 26px 26px 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
#primary.mhome .hm-facts > div:nth-child(even) { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .14); }
#primary.mhome .hm-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
#primary.mhome .hm-facts dt { margin: 0 0 8px; color: var(--hm-lagoon); font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; }
#primary.mhome .hm-facts dd { margin: 0; color: #cfe7ee; font-size: 15px; line-height: 1.5; }

/* ---------- promo + booking ---------- */
#primary.mhome .hm-cta { padding: 70px 0 80px; }
#primary.mhome .hm-cta__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; }
#primary.mhome .hm-cta__grid > :only-child { grid-column: 1 / -1; }
#primary.mhome .hm-promo {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
	min-height: 240px; padding: 30px 32px;
	border-radius: 28px; background: var(--hm-coral); color: #fff; text-decoration: none;
	transition: transform .25s ease;
}
#primary.mhome .hm-promo::after {
	content: ""; position: absolute; right: -40px; bottom: -20px;
	width: 300px; height: 110px; opacity: .35;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120'%3E%3Cpath d='M6 90C60 20 110 18 160 60S260 110 314 30' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
#primary.mhome .hm-promo:hover { transform: translateY(-3px); color: #fff; }
#primary.mhome .hm-promo__tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
#primary.mhome .hm-promo__title { color: #fff; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
#primary.mhome .hm-promo__go { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 600; }
#primary.mhome .hm-book { padding: 34px 36px; border-radius: 28px; background: var(--hm-foam); }
#primary.mhome .hm-book p { max-width: 34em; margin: 14px 0 24px; color: var(--hm-text); font-size: 17px; line-height: 1.6; }

/* the booking block sits right above the footer wave */
.mhome-page .mf { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	#primary.mhome .hm-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#primary.mhome .hm-why__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 900px) {
	#primary.mhome .hm-hero__grid { grid-template-columns: 1fr; gap: 40px; }
	#primary.mhome .hm-hero__media { max-width: 520px; margin: 0 auto 30px; width: 100%; }
	#primary.mhome .hm-card { left: 0; }
	#primary.mhome .hm-cta__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	#primary.mhome .hm-wrap { padding: 0 16px; }
	#primary.mhome .hm-hero { padding: 34px 0 84px; }
	#primary.mhome .hm-actions .hm-btn { flex: 1 1 100%; }
	#primary.mhome .hm-trust { gap: 12px 22px; }
	#primary.mhome .hm-trust b { font-size: 22px; }
	#primary.mhome .hm-hero__photo { border-radius: 160px 28px 160px 28px; }
	#primary.mhome .hm-card { position: relative; left: auto; bottom: auto; width: auto; margin: -40px 16px 0; }
	#primary.mhome .hm-hero__media { margin-bottom: 0; }
	#primary.mhome .hm-services { padding: 50px 0 20px; }
	#primary.mhome .hm-groups { grid-template-columns: 1fr; }
	#primary.mhome .hm-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
	#primary.mhome .hm-filter button { flex: none; }
	#primary.mhome .hm-list a .mh-ico { opacity: 1; transform: none; }
	#primary.mhome .hm-why { padding: 80px 0; }
	#primary.mhome .hm-facts > div { padding: 20px 14px 20px 0; }
	#primary.mhome .hm-facts > div:nth-child(even) { padding-left: 14px; }
	#primary.mhome .hm-promo, #primary.mhome .hm-book { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	#primary.mhome * { transition: none !important; }
}
#primary.mhome .hm-list li[hidden] { display: none; }
#primary.mhome .hm-list__more {
	display: block; width: 100%; margin: 6px 0 0; min-height: 44px;
	border: 1px solid var(--hm-line); border-radius: 999px; background: var(--hm-foam);
	color: var(--hm-deep); font-size: 15px; font-weight: 600; cursor: pointer;
}
/* header.php wraps the home page in a .container with negative side margins (old tile layout) */
body.mhome-page #main > .container { width: auto; max-width: none; margin: 0; padding: 0; }