.moss-section-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #14245c;
	margin: 0 0 24px;
}
.moss-center { text-align: center; }
.moss-right { display: flex; justify-content: flex-end; margin-top: 18px; }

/* .moss-reveal's CSS moved to the global mgw-theme.css (confirmed
   2026-09-28), since the Insurance/Security pages now use it too -
   its JS trigger lives in the new global assets/js/mgw-reveal.js. */

.moss-placeholder-img {
	background-size: cover;
	background-position: center;
}
.moss-ph-1 { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.moss-ph-2 { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.moss-ph-3 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.moss-ph-4 { background: linear-gradient(135deg, #0e7490, #38bdf8); }

/* ---- Section 1: Hero + Service ---- */

.moss-hero {
	position: relative;
	height: 420px;
	/* Fallback color while the video loads / if it fails - was the only
	   background before the real banner video was wired in 2026-09-18. */
	background: linear-gradient(135deg, #0f1d4a 0%, #1e3a8a 55%, #0064A9 100%);
	overflow: hidden;
}
.moss-hero-media { position: absolute; inset: 0; }
.moss-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Multi-video banner: horizontal scroll-snap does the swipe/drag
   itself (native touch + trackpad support, no JS needed for that
   part) - the JS in mgw-home.js only handles the prev/next buttons,
   the dot indicators, and pausing off-screen videos. */
.moss-hero-slider { position: absolute; inset: 0; }
.moss-hero-track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.moss-hero-track::-webkit-scrollbar { display: none; }
.moss-hero-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.moss-hero-slide .moss-hero-video { position: absolute; }

.moss-hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.45);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.moss-hero-nav:hover { background: rgba(15, 23, 42, 0.7); }
.moss-hero-nav-prev { left: 16px; }
.moss-hero-nav-next { right: 16px; }

.moss-hero-dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 8px;
}
.moss-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	padding: 0;
	cursor: pointer;
}
.moss-hero-dot.is-active { background: #fff; width: 22px; border-radius: 4px; }

@media (max-width: 700px) {
	.moss-hero-nav { display: none; }
}

.moss-service { padding: 48px 0; }

.moss-service-search {
	max-width: 640px;
	margin: 0 auto 32px;
	display: flex;
	align-items: center;
	border: 1px solid #d7dee8;
	border-radius: 999px;
	overflow: hidden;
	height: 44px;
}
.moss-service-search input {
	flex: 1;
	border: none;
	outline: none;
	padding: 0 20px;
	font-size: 13px;
	height: 100%;
	box-sizing: border-box;
}
.moss-service-search button {
	background: none;
	border: none;
	padding: 0 18px;
	height: 100%;
	color: #94a3b8;
	cursor: pointer;
}

.moss-service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: start;
}

.moss-service-card {
	border: 1px solid #cddaf5;
	border-radius: 10px;
	overflow: hidden;
}
.moss-service-card-head {
	background: linear-gradient(135deg, var(--moss-blue) 0%, var(--moss-blue-dark) 100%);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.moss-icon-mask {
	display: block;
	flex-shrink: 0;
	background-color: #fff;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}
.moss-quick-visa .moss-icon-mask { background-color: #FCD1D1; }
.moss-service-card ul { list-style: none; margin: 0; padding: 0; }
.moss-service-card li:not(:last-child) { border-bottom: 1px solid #cddaf5; }
.moss-service-card li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 14px;
	font-size: 12.5px;
	color: var(--moss-blue);
}
.moss-service-card li a:hover { background: #f1f5f9; }
.moss-service-card li a span { color: var(--moss-blue); }

/* ---- Section 2: Quick access + Directory ---- */

/* Full-bleed #F3FAFF band, confirmed 2026-09-18 - same pattern as the
   Directory/News&Tips/Cities&Calendar sections: color on the <section>
   itself so it spans the full viewport width. */
.moss-quick-access { padding: 8px 0 48px; background: #F3FAFF; }

/* Quick Access — flat blue/white theme, confirmed 2026-09-18 (replaces the
   old 3-card per-card-colored-gradient design; now exactly 2 cards, same
   blue for both, matching the rest of the site's --moss-blue accent).
   .moss-quick-band used to carry its own #E3F0FA rounded background - now
   redundant since .moss-quick-access itself is the colored band, so it's
   just a plain spacing wrapper. Confirmed 2026-09-18: vertical padding
   only - horizontal padding was double-indenting QUICK ACCESS past where
   every other section's heading/content lines up, since .moss-container
   (the parent) already applies its own 0 24px. */
.moss-quick-band {
	padding: 32px 0 36px;
}
.moss-quick-title { margin: 0 0 20px; }

.moss-quick-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.moss-quick-card {
	background: #FFFFFF;
	border-radius: 14px;
	padding: 22px;
	color: #1f2937;
	border: none;
	/* Confirmed 2026-09-18: X 0, Y 4, Blur 4, Spread 0, #000000 10% -
	   note the blur is 4 here, not the 10 used on Directory/News cards. */
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.moss-quick-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.moss-quick-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--moss-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.moss-quick-icon .moss-icon-mask { background-color: #fff; }
.moss-quick-card h3 { font-size: 16px; margin: 0; letter-spacing: 0.5px; color: var(--moss-blue); }
.moss-quick-card p { font-size: 12.5px; margin: 0 0 12px; color: #4b5563; }
.moss-quick-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.moss-quick-card ul li {
	font-size: 12px;
	padding-left: 24px;
	position: relative;
	color: #1f2937;
}
.moss-quick-card ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid var(--moss-blue);
	background: transparent;
	color: var(--moss-blue);
	font-size: 9px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.moss-quick-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	color: var(--moss-blue) !important;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--moss-blue);
	text-decoration: none;
}

/* Directory — flat card grid, confirmed 2026-09-18 (replaces the old
   radial-wheel/plane layout below, which is now dead: no .moss-directory-band/
   -wheel/-item/-dot/-label markup is emitted by front-page.php any more) */
.moss-directory-flat { padding: 40px 0; }
.moss-directory-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
/* Photo fills the full height of its half of the card, edge-to-edge, no
   padding around it - confirmed 2026-09-18 (was a small 64px thumbnail
   with margin before; that's wrong, per the reference mockup). */
.moss-directory-card {
	display: flex;
	align-items: stretch;
	background: #FFFFFF;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	height: 130px;
	/* Confirmed 2026-09-18: X 0, Y 4, Blur 10, Spread 0, #000000 10% */
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}
.moss-directory-card-thumb {
	width: 42%;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
}
.moss-directory-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	padding: 0 18px;
}
.moss-directory-card-body strong { font-size: 15px; color: #002957; }

.moss-btn-lg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 45px;
	padding: 0;
	font-size: 16px;
	box-sizing: border-box;
}


/* Base "View all" pill — .moss-btn-lg above sets the size, this sets the
   look. Added 2026-09-18: it was missing entirely, so every plain
   .moss-btn.moss-btn-pill.moss-btn-lg (News & Tips, MICE Cities/Calendar
   before their -gold override) rendered as unstyled link text instead of
   a button. Default here is the solid blue pill from the mockup; -light/
   -gold below still override background+color for the dark banner cards. */
.moss-btn {
	text-decoration: none;
	font-weight: 700;
	border-radius: 999px;
	background: var(--moss-blue);
	color: #fff !important;
}
.moss-btn-light {
	background: rgba(255, 255, 255, 0.95);
	color: #14245c !important;
}
.moss-btn-gold {
	background: linear-gradient(90deg, #f5a623, #fbbf24);
	color: #1f2937 !important;
}

/* ---- Section 3: News & Tips / Cities / Calendar ---- */

/* Bottom padding was 8px, confirmed 2026-09-18 too tight against the
   MICE Data Widgets band right below it. */
.moss-news-tips { padding: 48px 0 56px; }

.moss-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.moss-news-card {
	background: #FFFFFF;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	/* Confirmed 2026-09-18: X 0, Y 4, Blur 10, Spread 0, #000000 10% -
	   same treatment as the Directory cards. */
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}
.moss-news-thumb {
	display: block;
	height: 210px;
	position: relative;
}
.moss-news-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #fff;
	color: #1f2937;
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 999px;
}
.moss-news-body { display: flex; gap: 16px; padding: 18px; }
.moss-news-date {
	flex-shrink: 0;
	width: 56px;
	text-align: center;
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.moss-news-date em { font-style: normal; font-size: 12px; color: #1e50c8; }
.moss-news-date strong { font-size: 30px; color: #dc2626; }
.moss-news-date small { font-size: 12px; color: #64748b; }
.moss-news-title { font-size: 13.5px; color: #1f2937; margin: 0 0 10px; line-height: 1.5; font-weight: 500; }
.moss-news-loc { font-size: 12px; color: #64748b; margin: 0; }

/* Full-bleed band behind both cards, confirmed 2026-09-18 - background goes
   on the <section> itself (naturally full viewport width) while the grid
   inside stays constrained by .moss-container, so the color spans edge to
   edge without widening the cards themselves. */
.moss-split-section { padding: 40px 0; background: #F3FAFF; }
/* Confirmed 2026-09-18: the "MICE CITIES" / "MICE CALENDAR" label above
   each card is 24px here specifically (not changing the shared 20px
   .moss-section-title default used by every other section's heading). */
.moss-split-section .moss-section-title { font-size: 24px; }
.moss-split-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	align-items: start;
}

.moss-calendar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 340px;
	border-radius: 14px;
	padding: 24px 32px 32px;
	background-color: #0f1d4a;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-decoration: none;
}
.moss-calendar-card::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Reference photo confirmed 2026-09-18: top is nearly bare (photo shows
	   through clearly), darkening progressively to a near-solid #001421 at
	   the bottom. A flat `opacity` on this element can't do that - it fades
	   the WHOLE gradient equally, top and bottom alike - so the alpha has
	   to live in each color stop instead (rgba per stop), same #0064A9/
	   #001421 hex, no separate opacity property any more. */
	background: linear-gradient(180deg,
		rgba(0, 100, 169, 0) 0%,
		rgba(0, 100, 169, 0.35) 20%,
		rgba(0, 20, 33, 0.92) 100%);
}
.moss-calendar-card > * { position: relative; z-index: 1; }
.moss-calendar-card h3 {
	color: #fbbf24;
	font-size: 42px;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1;
	margin: 0 0 14px;
}
.moss-calendar-card p {
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 18px;
	max-width: 380px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ---- Section 4: Data Widgets ---- */

/* Full-bleed band behind the dark banner, confirmed 2026-09-18 - same
   treatment as .moss-split-section: background on the <section> itself
   (full viewport width) while .moss-container-widgets keeps the banner's
   own max-width. */
.moss-data-widgets { padding: 40px 0 60px; background: #F3FAFF; }

/* Was 1288px, confirmed 2026-09-18 - made this section noticeably wider
   than Directory/News&Tips/etc, which all use the standard .moss-container
   at 1200px. Match it so every section's content lines up the same width. */
.moss-container-widgets { max-width: 1200px; }

.moss-data-widgets-banner {
	background-color: #0b1330;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 14px;
	width: 100%;
	height: 240px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.moss-data-widgets-banner h2 {
	background: linear-gradient(90deg, #f5a623, #fbbf24);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 26px;
	margin: 0 0 10px;
}
.moss-data-widgets-banner p {
	color: #cbd5e1;
	font-size: 13px;
	max-width: 520px;
	margin: 0;
	line-height: 1.6;
}

/* Was flush against the footer below it - .moss-partners-section had no
   padding at all, confirmed 2026-09-18. */
.moss-partners-section { padding: 24px 0 48px; }
.moss-partner-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}
/* No circle/badge any more, confirmed 2026-09-18 - just the bare logo at a
   consistent height, width following each logo's own aspect ratio. */
.moss-partner-logo {
	height: 46px;
	display: flex;
	align-items: center;
}
.moss-partner-logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

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

@media (max-width: 900px) {
	.moss-service-grid { grid-template-columns: repeat(2, 1fr); }
	.moss-quick-grid { grid-template-columns: 1fr; }
	.moss-news-grid { grid-template-columns: 1fr; }
	.moss-split-grid { grid-template-columns: 1fr; }
	.moss-directory-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.moss-service-grid { grid-template-columns: 1fr; }
	.moss-directory-grid { grid-template-columns: 1fr; }
}

/* ---- Announcement popup ---- */

.moss-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.6);
	padding: 24px;
}
.moss-popup-overlay[hidden] { display: none; }

.moss-popup-dialog {
	position: relative;
	max-width: 420px;
	width: 100%;
	max-height: 85vh;
	overflow: visible;
	border-radius: 8px;
	background: #fff;
	padding: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.moss-popup-dialog > a,
.moss-popup-dialog > .moss-popup-image {
	display: block;
	max-height: calc(85vh - 24px);
	overflow: auto;
	border-radius: 4px;
}

.moss-popup-image { display: block; width: 100%; height: auto; border-radius: 4px; }

.moss-popup-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: #0f172a;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	z-index: 1;
}
.moss-popup-close:hover { color: var(--moss-blue); }