:root {
	--moss-blue: #0064A9;
	--moss-blue-dark: #00416F;
	--moss-navy: #14245c;
	--moss-navy-deep: #0f1d4a;
	--moss-orange: #f5a623;
	--moss-text: #1f2937;
}

/* ---------------- Typeface: Noto Sans + Noto Sans Thai ---------------- */
/* Self-hosted (assets/fonts/noto-sans, assets/fonts/noto-sans-thai) - no
   external font host, so the CSP's style-src/font-src doesn't need
   loosening for this.
   Confirmed 2026-09-25: Noto Sans on its own has no Thai glyphs (Latin/
   Greek/Cyrillic only) - Thai needs the separate Noto Sans Thai family.
   Both are declared here and listed together in body's font-family
   below; the browser uses Noto Sans for Latin characters and falls
   through to Noto Sans Thai for any character Noto Sans doesn't cover. */

@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-semibold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-bolditalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-extrabold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans/notosans-black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Noto Sans Thai";
	src: url("../fonts/noto-sans-thai/notosansthai-light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../fonts/noto-sans-thai/notosansthai-regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../fonts/noto-sans-thai/notosansthai-medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../fonts/noto-sans-thai/notosansthai-semibold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../fonts/noto-sans-thai/notosansthai-bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../fonts/noto-sans-thai/notosansthai-extrabold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../fonts/noto-sans-thai/notosansthai-black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

* { box-sizing: border-box; }

.moss-breadcrumb {
	font-size: 12.5px;
	color: #64748b;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.moss-breadcrumb a { color: #64748b; }
.moss-breadcrumb a:hover { color: var(--moss-blue); }

body {
	margin: 0;
	background: #fff;
	font-family: "Noto Sans", "Noto Sans Thai", -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	color: var(--moss-text);
}

a { color: inherit; text-decoration: none; }

.moss-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------------- Header ---------------- */

.moss-header {
	position: relative;
	/* The embedded map's own controls/markers on the Security & Insurance
	   page can sit at a high z-index by default - without a z-index of
	   our own here, an open dropdown or the mobile nav could render
	   BEHIND those once the page is scrolled far enough that the map
	   sits under the header (confirmed 2026-09-25, originally against
	   Leaflet's zoom controls and pins; same risk applies to the Google
	   Maps JS API's own controls after the 2026-10-03 switch). The header
	   comes first in the DOM, so at an EQUAL z-index the later map would
	   still win a stacking tie - needs to be strictly higher, not just
	   matching.
	*/
	z-index: 1100;
	border-bottom: 1px solid #e5e7eb;
	background: #fff;
}

.moss-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.moss-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.moss-logo-img {
	height: 40px;
	width: auto;
	display: block;
}

.moss-primary-nav ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.moss-primary-nav a {
	position: relative;
	display: inline-block;
	font-size: 14px;
	color: #1f2937;
	font-weight: 500;
	padding-bottom: 4px;
}
.moss-primary-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--moss-blue);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.moss-primary-nav a:hover { color: var(--moss-blue); }
.moss-primary-nav a:hover::after { transform: scaleX(1); }
.moss-primary-nav a.is-active,
.moss-primary-nav .current-menu-item > a {
	color: var(--moss-blue);
}
.moss-primary-nav a.is-active::after,
.moss-primary-nav .current-menu-item > a::after {
	transform: scaleX(1);
}

.moss-nav-item { position: relative; }

.moss-submenu-trigger {
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
	padding: 0 0 4px;
	margin: 0;
}
.moss-submenu-caret { display: none; }

.moss-submenu-panel[hidden] { display: none; }

.moss-submenu-panel {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	width: 420px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	padding: 20px 20px 12px;
	z-index: 120;
}

.moss-submenu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4px 16px;
}

.moss-submenu-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #0f172a;
}

.moss-submenu-close {
	background: none;
	border: none;
	cursor: pointer;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
}
.moss-submenu-close:hover { color: #0f172a; }

.moss-primary-nav .moss-submenu-list {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.moss-submenu-list li + li { margin-top: 4px; }

.moss-submenu-list a {
	display: block;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 500;
	color: #1f2937;
}
.moss-submenu-list a::after { display: none; content: none; }
.moss-submenu-list a:hover { background: #f8fafc; }
.moss-submenu-list a.is-active {
	background: #eaf1ff;
	color: var(--moss-blue);
	font-weight: 700;
}

.moss-submenu-nested-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: none;
	border: none;
	text-align: left;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 500;
	font-family: inherit;
	color: #1f2937;
	cursor: pointer;
}
.moss-submenu-nested-trigger:hover { background: #f8fafc; }
.moss-submenu-nested-trigger.is-active { color: var(--moss-blue); font-weight: 700; }
.moss-submenu-nested-caret { flex-shrink: 0; color: #94a3b8; transition: transform 0.2s ease; }
.moss-submenu-nested.is-open .moss-submenu-nested-caret { transform: rotate(180deg); color: var(--moss-blue); }
.moss-submenu-nested.is-open .moss-submenu-nested-trigger { background: #f8fafc; border-radius: 10px 10px 0 0; }

.moss-primary-nav .moss-submenu-nested-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease;
}
.moss-submenu-nested.is-open .moss-submenu-nested-list {
	max-height: 200px;
	padding: 2px 6px 6px;
	background: #f8fafc;
	border-radius: 0 0 10px 10px;
}
.moss-submenu-nested-list li { position: relative; padding-left: 18px; line-height: 1; }
.moss-submenu-nested-list li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #cbd5e1;
	transform: translateY(-50%);
}
.moss-submenu-nested-list a {
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #475569;
}
.moss-submenu-nested-list a:hover { background: #eaf1ff; color: var(--moss-blue); }
.moss-submenu-nested-list a.is-active {
	background: #eaf1ff;
	color: var(--moss-blue);
	font-weight: 700;
}
.moss-submenu-nested-list li:has( a.is-active )::before { background: var(--moss-blue); }

.moss-header-search-lang { display: flex; align-items: center; gap: 16px; }
.moss-header-account { display: flex; align-items: center; }

.moss-icon-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: #475569;
	display: flex;
	align-items: center;
}

.moss-lang-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
}
.moss-lang-switch-option { display: inline-flex; align-items: center; gap: 5px; color: #94a3b8; }
.moss-lang-switch-option:hover { color: var(--moss-blue); }
.moss-lang-switch-option.is-active { color: var(--moss-text); }
.moss-lang-switch-option + .moss-lang-switch-option { position: relative; padding-left: 13px; }
.moss-lang-switch-option + .moss-lang-switch-option::before {
	content: "|";
	position: absolute;
	left: 0;
	color: #cbd5e1;
}
.moss-lang-switch-flag { display: inline-flex; flex: 0 0 auto; }
.moss-lang-switch-flag svg { display: block; width: 14px; height: 14px; border-radius: 50%; }

/* Mobile-only dropdown version of the switcher above (hidden on
   desktop - see the 900px breakpoint) - a real tap-to-open/close
   control (mgw-header.js) rather than two always-visible links. */
.moss-lang-dropdown { position: relative; display: none; }
.moss-lang-trigger {
	display: flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #475569;
}
.moss-lang-trigger-caret { transition: transform 0.15s ease; }
.moss-lang-trigger[aria-expanded="true"] .moss-lang-trigger-caret { transform: rotate(180deg); }
.moss-lang-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 60;
	min-width: 140px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 44px -12px rgba(15, 23, 42, 0.3), 0 2px 8px rgba(15, 23, 42, 0.08);
	padding: 6px 0;
}
.moss-lang-menu[hidden] { display: none; }
.moss-lang-menu-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 500;
	color: #334155;
}
.moss-lang-menu-option:hover { background: #f1f5f9; color: var(--moss-blue); }
.moss-lang-menu-option.is-active { background: #eaf1ff; color: var(--moss-blue); font-weight: 700; }

.moss-account-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #000;
	box-sizing: border-box;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.moss-account-btn svg { width: 16px; height: 16px; }

/* ---------------- Main ---------------- */

.moss-main { min-height: 50vh; padding: 40px 0; }

/* ---------------- Footer ---------------- */

.moss-footer {
	background: #00497B;
	color: #e2e8f0;
	margin-top: 40px;
}

.moss-footer-inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 0; }

.moss-footer-top { padding-bottom: 32px; }

.moss-footer-logo-img { display: block; width: 180px; margin-bottom: 14px; }
.moss-footer-logo-img svg { display: block; width: 100%; height: auto; }
.moss-footer-brand p { font-size: 13px; color: #cbd5e1; line-height: 1.6; margin: 0; }
.moss-footer-brand p.moss-footer-org-en,
.moss-footer-brand p.moss-footer-org-brand {
	font-size: 18px;
	font-weight: 700;
}
.moss-footer-brand p.moss-footer-org-en { color: #cbd5e1; margin-bottom: 2px; }
.moss-footer-brand p.moss-footer-org-brand { color: #fff; margin-bottom: 14px; }

.moss-footer-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	font-size: 12.5px;
	color: #cbd5e1;
	line-height: 1.6;
}
.moss-footer-contact-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	margin-top: 2px;
}
.moss-footer-contact-icon svg { display: block; max-width: 100%; height: auto; }
.moss-footer-contact-links { flex-wrap: wrap; column-gap: 28px; row-gap: 8px; }
.moss-footer-contact-links a { display: inline-flex; align-items: center; gap: 8px; color: #cbd5e1; font-size: 12.5px; }
.moss-footer-contact-links a:hover { color: #fff; }
.moss-footer-contact-links .moss-footer-contact-icon { margin-top: 0; }

.moss-footer-bottom {
	background: #0064A9;
}
.moss-footer-bottom-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 24px;
}
.moss-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	color: #cbd5e1;
	text-align: center;
}
.moss-footer-legal a { color: #cbd5e1; }
.moss-footer-legal a:hover { color: #fff; }
.moss-footer-legal-sep { color: rgba(255, 255, 255, 0.4); }

/* Chatbot styling now lives entirely in the mgw-chatbot plugin's own
   assets/css/mgw-chatbot.css - it owns the widget's markup, so it owns
   the widget's CSS too, rather than splitting it across the theme and
   a plugin. Removed 2026-09-18 when WPBot was replaced. */

/* ---------------- Hamburger menu (tablet / mobile) ---------------- */

.moss-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}
.moss-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: #1f2937;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.moss-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.moss-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.moss-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
	.moss-nav-toggle { display: flex; order: 1; margin-left: auto; }
	.moss-header-search-lang { order: 2; gap: 12px; }
	.moss-header-account { order: 3; }

	/* The plain two-link switcher is swapped for a real dropdown on
	   mobile (see .moss-lang-dropdown below) - collapsed to just the
	   current language's flag, opens on tap to reveal both choices. */
	.moss-lang-switch { display: none; }
	.moss-lang-dropdown { display: block; }

	.moss-header-inner { flex-wrap: nowrap; gap: 12px; }

	.moss-primary-nav {
		order: 4;
		flex-basis: 100%;
		display: none;
	}
	.moss-primary-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid #e5e7eb;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
		padding: 8px 24px 16px;
		z-index: 90;
	}
	.moss-primary-nav ul {
		flex-direction: column;
		gap: 4px;
	}
	.moss-primary-nav li a {
		display: block;
		padding: 12px 4px;
	}
	.moss-primary-nav a::after { display: none; }

	.moss-submenu-trigger {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		text-align: left;
		padding: 12px 4px;
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
	}
	.moss-submenu-caret {
		display: block;
		color: #94a3b8;
		transition: transform 0.2s ease;
	}
	.moss-submenu-trigger[aria-expanded="true"] .moss-submenu-caret {
		transform: rotate(180deg);
	}
	.moss-submenu-panel {
		position: static;
		width: auto;
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 0 0 4px 16px;
		margin: 0 0 4px;
	}
	.moss-submenu-header { display: none; }
	.moss-submenu-list a {
		font-size: 14px;
		padding: 10px 4px;
	}

	.moss-header { position: relative; }
}

/* ---------------- Logged-in account menu ---------------- */

.moss-account {
	position: relative;
	align-self: stretch;
	/* .moss-header-inner is padded 14px top and bottom. The blue block
	   has to bleed through that padding to fill the header edge to edge,
	   so cancel it here and let the trigger grow by the same amount. */
	margin-top: -14px;
	margin-bottom: -14px;
}

.moss-account-trigger {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 100%;
	/* 48px row + the 14px header padding cancelled above, top and bottom. */
	min-height: 76px;
	padding: 0 16px;
	background: var(--moss-blue);
	border: none;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}
.moss-account-trigger:hover { background: var(--moss-blue-dark); }

.moss-account-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--moss-blue);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}
.moss-account-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.moss-account-caret { flex-shrink: 0; transition: transform 0.2s ease; }
.moss-account.is-open .moss-account-caret { transform: rotate(180deg); }

/* dropdown panel */
.moss-account-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 60;
	min-width: 250px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 44px -12px rgba(15, 23, 42, 0.3), 0 2px 8px rgba(15, 23, 42, 0.08);
	padding: 18px 0 10px;
}
.moss-account-menu[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.moss-account-menu:not([hidden]) { animation: moss-account-pop 0.16s ease-out; }
	@keyframes moss-account-pop {
		from { opacity: 0; transform: translateY(-5px); }
		to   { opacity: 1; transform: none; }
	}
}

.moss-account-menu-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 0 22px 14px;
}
.moss-account-menu-name {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	word-break: break-word;
}
.moss-account-close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: none;
	color: var(--moss-blue);
	cursor: pointer;
}
.moss-account-close:hover { color: var(--moss-blue-dark); }

.moss-account-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.moss-account-list a {
	display: block;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	text-decoration: none;
}
.moss-account-list a:hover { background: #f1f5f9; color: var(--moss-blue); }
.moss-account-list a.is-active {
	background: #cfe7fb;
	color: var(--moss-blue);
	font-weight: 600;
}

@media (max-width: 900px) {
	.moss-account-name { display: none; }
	.moss-account-trigger { padding: 0 10px; }
	.moss-account-menu { right: -8px; min-width: 220px; }
}

/* ---------------- 404 ---------------- */

/* ---------------- sticky footer ---------------- */

/* Short pages (404, thin content) used to leave the footer floating in the
   middle with blank space under it. body becomes the column, main takes the
   slack, and the footer is pushed to the bottom of the viewport at minimum.
   The chatbot button is position:fixed so it stays out of this flow. */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body > main {
	flex: 1 0 auto;
}
.moss-footer {
	margin-top: auto;
}

/* The 404 has very little content, so centre it in the space it is given
   rather than leaving it pinned to the top of a tall empty area. */
.moss-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 0 60px;
}

.moss-404-inner { max-width: 560px; text-align: center; }

.moss-404-code {
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var(--moss-blue);
	letter-spacing: 0.04em;
	margin: 0 0 14px;
	opacity: 0.25;
}
.moss-404-title {
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 10px;
	text-wrap: balance;
}
.moss-404-lead {
	font-size: 13.5px;
	line-height: 1.8;
	color: #64748b;
	margin: 0 0 26px;
}

.moss-404-actions { margin-bottom: 0; }
.moss-404-home {
	display: inline-block;
	background: var(--moss-blue);
	color: #fff;
	border-radius: 999px;
	padding: 11px 28px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.moss-404-home:hover { background: var(--moss-blue-dark); color: #fff; }

/* ---- Scroll reveal (fade + slide-up as a section enters view) ----
   Global (not page-specific) since 2026-09-28 - first built for the
   Home page, now also used on the Insurance/Security pages. Trigger
   JS lives in assets/js/mgw-reveal.js, enqueued site-wide alongside
   this stylesheet. */
.moss-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.moss-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.moss-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}