/**
 * Public site — load after styles.css + @stack('styles').
 * Figtree everywhere; Alike only on dual-tone heading spans (accent colour).
 */
:root {
	--tm-figtree: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tm-alike: "Alike", Georgia, serif;
	--tm-ui-sans: var(--default-font, var(--tm-figtree));

	--tm-label-fs: 13px;
	--tm-label-fw: 600;
	--tm-label-ls: 0.06em;

	--tm-menu-tab-fs: 12px;
	--tm-menu-tab-ls: 0.05em;

	--tm-menu-grid-label-fs: 13px;
	--tm-menu-grid-label-lh: 1.35;

	--tm-card-heading-fs: 18px;
	--tm-card-heading-lh: 1.3;
	--tm-card-heading-fw: 700;

	--tm-body-fs: 18px;
	--tm-body-lh: 1.6;

	--tm-muted-fs: 15.5px;
	--tm-muted-lh: 1.55;

	--tm-display-h1-fs: clamp(26px, 3.6vw, 46px);
	--tm-display-h2-fs: clamp(19px, 2.6vw, 30px);
	--tm-display-ls: 1px;
	--tm-stat-h2-fs: clamp(22px, 2.8vw, 34px);

	--tm-input-fs: 16px;
	--tm-form-label-fs: 14px;
	--tm-form-label-fw: 600;
	--tm-form-label-ls: 0.02em;

	--tm-form-section-heading-fs: 16px;
}

.mex-shell {
	font-size: var(--tm-body-fs);
}

/* —— Body copy —— */
.mex-shell p,
.mex-shell .about-detail-content p,
.mex-shell .service-item-content p,
.mex-shell .our-dish-content p,
.mex-shell .happy-customer-content p,
.mex-shell .cta-contact-content p,
.mex-shell .ingredients-list-content p,
.mex-shell .menu-item-content p,
.mex-shell .section-footer-text,
.mex-shell .section-footer-text p,
.mex-shell .ingredient-counter-content p,
.mex-shell .contact-info-item p {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-body-fs) !important;
	line-height: var(--tm-body-lh) !important;
	font-weight: 400;
}

.mex-shell .ingredient-counter-content p {
	min-height: 0;
}

.mex-shell .about-content-list ul li,
.mex-shell .about-us-content ul li {
	font-family: var(--tm-ui-sans);
	font-size: var(--tm-body-fs);
	line-height: var(--tm-body-lh);
}

.mex-shell .main-footer p,
.mex-shell .main-footer .footer-copyright-text {
	font-size: var(--tm-muted-fs) !important;
	line-height: var(--tm-muted-lh) !important;
}

.mex-shell .testimonial-content p,
.mex-shell .testimonial-box-content p {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-body-fs) !important;
	line-height: var(--tm-body-lh) !important;
	font-weight: 500;
}

.mex-shell .section-title p,
.mex-shell .hero-content .section-title p,
.mex-shell .page-header-box p {
	font-family: var(--tm-ui-sans);
	font-size: var(--tm-body-fs);
	line-height: var(--tm-body-lh);
}

/* —— Dual headings: Figtree (main) + Alike accent on <span> —— */
.mex-shell .section-title h1,
.mex-shell .hero-content .section-title h1,
.mex-shell .hero .section-title h1,
.mex-shell .page-header-box h1 {
	font-family: var(--tm-ui-sans) !important;
	color: var(--primary-color);
	letter-spacing: var(--tm-display-ls);
	font-size: var(--tm-display-h1-fs) !important;
	font-weight: 700;
}

.mex-shell .section-title h1 span,
.mex-shell .hero-content .section-title h1 span,
.mex-shell .hero .section-title h1 span,
.mex-shell .page-header-box h1 span {
	font-family: var(--tm-alike) !important;
	color: var(--accent-color);
	font-weight: 700 !important;
	letter-spacing: var(--tm-display-ls);
}

.mex-shell .section-title h2,
.mex-shell .hero-content .section-title h2,
.mex-shell .hero .section-title h2,
.mex-shell .page-header-box h2 {
	font-family: var(--tm-ui-sans) !important;
	color: var(--primary-color);
	letter-spacing: var(--tm-display-ls);
	font-size: var(--tm-display-h2-fs) !important;
	font-weight: 700;
}

.mex-shell .section-title h2 span,
.mex-shell .hero-content .section-title h2 span,
.mex-shell .hero .section-title h2 span,
.mex-shell .page-header-box h2 span {
	font-family: var(--tm-alike) !important;
	color: var(--accent-color);
	font-weight: 700 !important;
	letter-spacing: var(--tm-display-ls);
}

.mex-shell .section-title h3,
.mex-shell .hero-content .section-title h3,
.mex-shell .hero .section-title h3 {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-label-fs) !important;
	font-weight: var(--tm-label-fw) !important;
	letter-spacing: var(--tm-label-ls) !important;
	line-height: 1.35;
	text-transform: uppercase;
}

/* —— Card / column titles (Figtree only) —— */
.mex-shell .about-detail-content h3,
.mex-shell .service-item-content h3,
.mex-shell .post-item-content h3,
.mex-shell .post-item-content h3 a,
.mex-shell .client-author-content h3,
.mex-shell .catering-card h3,
.mex-shell .catering-card h3.h5,
.mex-shell .contact-info-item h3,
.mex-shell .footer-block-title h3,
.mex-shell .our-dish-content h3,
.mex-shell .ingredients-list-content h3,
.mex-shell .cta-contact-content h3,
.mex-shell .author-content h3,
.mex-shell .team-content h3,
.mex-shell .team-content h3 a,
.mex-shell .catering-page h3.h4 {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-card-heading-fs) !important;
	line-height: var(--tm-card-heading-lh) !important;
	font-weight: var(--tm-card-heading-fw) !important;
	letter-spacing: 0.04em;
}

/* Stat / stories callout (not card grid size) */
.mex-shell .happy-customer-content h3 {
	font-family: var(--tm-ui-sans) !important;
	font-size: clamp(18px, 2.8vw, 26px) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: var(--tm-display-ls);
}

.mex-shell .company-experience-content h3 {
	font-family: var(--tm-ui-sans) !important;
	font-size: clamp(17px, 2.2vw, 20px) !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
	text-align: center;
	text-transform: none !important;
	letter-spacing: 0.04em;
}

/* Orange / stat badges: dual tone helpers */
.mex-shell .tm-dual-fig {
	font-family: var(--tm-ui-sans) !important;
	font-weight: 800 !important;
	color: var(--primary-color) !important;
	letter-spacing: var(--tm-display-ls);
}

.mex-shell .tm-dual-alike {
	font-family: var(--tm-alike) !important;
	font-weight: 700 !important;
	color: var(--accent-color) !important;
	letter-spacing: var(--tm-display-ls);
}

.mex-shell .tm-badge-sub {
	display: block;
	margin-top: 6px;
	font-family: var(--tm-ui-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92) !important;
}

/* —— Menu grid labels —— */
.mex-shell .special-menu-item-content {
	min-height: calc(var(--tm-menu-grid-label-fs) * var(--tm-menu-grid-label-lh) * 2.25);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	padding: 0 8px;
	box-sizing: border-box;
}

.mex-shell .special-menu-item-content h3,
.mex-shell .special-menu-item-content h3 a {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-menu-grid-label-fs) !important;
	font-weight: var(--tm-label-fw) !important;
	letter-spacing: var(--tm-label-ls) !important;
	text-transform: uppercase !important;
	line-height: var(--tm-menu-grid-label-lh) !important;
}

/* —— Stats row —— */
.mex-shell .ingredient-counter-content h2 {
	font-family: var(--tm-ui-sans) !important;
	color: var(--primary-color);
	font-size: var(--tm-stat-h2-fs) !important;
	letter-spacing: var(--tm-display-ls);
	font-weight: 700;
}

.mex-shell .ingredient-counter-content h2 span.counter {
	font-family: var(--tm-alike) !important;
	color: var(--accent-color);
	font-weight: 700;
}

.mex-shell .catering-card .small,
.mex-shell .catering-card p.small {
	font-size: var(--tm-muted-fs);
	line-height: var(--tm-muted-lh);
	font-family: var(--tm-ui-sans);
}

.mex-shell .catering-form-heading {
	font-size: var(--tm-form-section-heading-fs) !important;
	font-family: var(--tm-ui-sans) !important;
	line-height: 1.35 !important;
}

.mex-shell label.form-label,
.mex-shell .form-label,
.mex-shell .contact-form .form-label,
.mex-shell .reserve-table-form .form-label,
.mex-shell .catering-form-shell .form-label,
.mex-shell .catering-inquiry-form .form-label {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-form-label-fs) !important;
	font-weight: var(--tm-form-label-fw) !important;
	letter-spacing: var(--tm-form-label-ls);
}

.mex-shell .catering-form-shell .form-check-label {
	font-size: var(--tm-form-label-fs) !important;
	font-family: var(--tm-ui-sans) !important;
	line-height: 1.45 !important;
}

.mex-shell .contact-form .form-control,
.mex-shell .reserve-table-form .form-control,
.mex-shell .catering-form-shell .form-control,
.mex-shell .catering-form-shell .form-select {
	font-size: var(--tm-input-fs) !important;
}

/* Tight native <select> so OS dropdown rows are not stretched (Chrome/Edge). */
.mex-shell .page-contact-us .contact-form select.contact-topic-select.form-select {
	line-height: 1.35 !important;
	min-height: 0 !important;
	height: auto !important;
	padding-top: 0.625rem !important;
	padding-bottom: 0.625rem !important;
}

/* —— Header nav pills —— */
.mex-shell .main-menu .navbar-nav.mr-auto {
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.mex-shell .main-menu .navbar-nav > .nav-item > a.nav-link {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-label-fs) !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	line-height: 1.25 !important;
	padding: 10px 18px !important;
	border-radius: 999px;
	border: 1px solid transparent;
	text-transform: capitalize;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mex-shell .main-menu .navbar-nav > .nav-item > a.nav-link:hover,
.mex-shell .main-menu .navbar-nav > .nav-item > a.nav-link:focus {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
}

.mex-shell header.main-header .header-sticky.active .main-menu .navbar-nav > .nav-item > a.nav-link:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* —— Home menu tabs: single dark pill, gold dot separators (template style) —— */
.mex-shell .home-menu-tabs-pill {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 7px 14px 7px 18px;
	box-sizing: border-box;
	background: #29756a;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.mex-shell .home-menu-tabs-pill .home-menu-tabs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

.mex-shell .home-menu-tabs-pill .home-menu-tabs li {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
}

/* Gold separator dot between tabs */
.mex-shell .home-menu-tabs-pill .home-menu-tabs li:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(50%, -50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #b89a6a;
	pointer-events: none;
	z-index: 1;
}

.mex-shell .home-menu-tabs-pill .home-menu-tabs a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	padding: 10px 6px;
	border: none !important;
	background: transparent !important;
	border-radius: 0;
	font-family: var(--tm-ui-sans) !important;
	font-size: clamp(10px, 1.9vw, 13px) !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: capitalize;
	text-align: center;
	line-height: 1.25;
	hyphens: auto;
	overflow-wrap: anywhere;
	color: rgba(255, 255, 255, 0.78) !important;
	opacity: 1 !important;
	transition: color 0.2s ease, font-weight 0.15s ease;
}

.mex-shell .home-menu-tabs-pill .home-menu-tabs a:hover {
	color: rgba(255, 255, 255, 0.95) !important;
	background: transparent !important;
}

.mex-shell .home-menu-tabs-pill .home-menu-tabs a.active {
	color: #fff !important;
	font-weight: 700 !important;
}

.mex-shell .home-menu-panel {
	display: none;
}

.mex-shell .home-menu-panel.active {
	display: block;
}

/* —— 3-up rows: equal-height columns, no horizontal scroll —— */
.mex-shell .about-detail-box {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

.mex-shell .about-detail-item {
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	align-items: flex-start !important;
}

.mex-shell .about-detail-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.mex-shell .about-detail-content p {
	margin-top: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(var(--tm-body-fs) * var(--tm-body-lh) * 2);
	max-height: calc(var(--tm-body-fs) * var(--tm-body-lh) * 2);
}

.mex-shell .ingredients-list-content h3 {
	min-height: 2.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Stats row: four equal columns, no scroll */
.mex-shell .ingredient-counter-list {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	width: 100%;
}

.mex-shell .ingredient-counter-item {
	width: 100% !important;
	min-width: 0;
}

@media (max-width: 991px) {
	.mex-shell .about-detail-box {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.mex-shell .ingredient-counter-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 20px !important;
		overflow: visible !important;
	}

	.mex-shell .our-ingredients-list {
		flex-wrap: wrap !important;
		overflow: visible !important;
		justify-content: center;
	}

	.mex-shell .ingredients-list-item {
		width: calc(33.33% - 20px) !important;
		flex: 1 1 200px !important;
		max-width: 100% !important;
	}
}

@media (max-width: 575px) {
	.mex-shell .ingredient-counter-list {
		grid-template-columns: 1fr !important;
	}
}

/* —— Service windows: 3 equal cards —— */
.mex-shell .tm-service-windows {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.mex-shell .tm-service-windows li {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 16px 14px !important;
	min-height: 6.25rem;
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
}

.mex-shell .tm-service-windows__label {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-label-fs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tm-label-ls) !important;
	text-transform: uppercase;
	color: var(--text-color) !important;
}

.mex-shell .tm-service-windows li span.tm-service-windows__desc {
	width: 100% !important;
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-body-fs) !important;
	line-height: var(--tm-body-lh) !important;
	font-weight: 400 !important;
	color: var(--primary-color) !important;
	text-transform: none !important;
	min-height: calc(var(--tm-body-fs) * var(--tm-body-lh) * 2);
}

.mex-shell .tm-service-windows-title {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-card-heading-fs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tm-display-ls);
	text-transform: uppercase;
	margin-bottom: 16px !important;
}

.mex-shell .tm-service-windows-title .tm-sw-fig {
	color: var(--primary-color);
}

.mex-shell .tm-service-windows-title .tm-sw-alike {
	font-family: var(--tm-alike) !important;
	color: var(--accent-color);
	font-weight: 700;
}

@media (max-width: 767px) {
	.mex-shell .tm-service-windows {
		grid-template-columns: 1fr;
	}
}

.mex-shell .slicknav_nav a,
.mex-shell .slicknav_nav .slicknav_row {
	font-family: var(--tm-ui-sans) !important;
	font-size: var(--tm-body-fs) !important;
	font-weight: 500;
}

/* —— List bullets: template-style (no default disc) —— */
.mex-shell .about-content-list ul li {
	position: relative;
	padding-left: 28px !important;
	margin-bottom: 12px;
}

/* Checkmark bullets: about + daily-offer only (crave-list dots are separate below) */
.mex-shell .about-content-list ul li::before{
	content: "\2713" !important;
	font-family: var(--tm-ui-sans) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	border-radius: 50%;
	background: #ffd203 !important;
	color: #111 !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.6em !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	box-sizing: border-box;
}
.mex-shell .daily-offer-list ul li::before {
	content: "\2713" !important;
	font-family: var(--tm-ui-sans) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	border-radius: 50%;
	background: #ffd203 !important;
	color: #111 !important;
	position: absolute !important;
	left: -5px !important;
	top: 2px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	box-sizing: border-box;
}
/* Tonight's crave list (orange card): dot is li::before, absolute + first-line top */
body.mex-shell .delicious-burger-list ul li {
	position: relative !important;
	display: block !important;
	padding-left: 16px !important;
	margin-bottom: 0.5rem !important;
}

body.mex-shell .delicious-burger-list ul li:last-child {
	margin-bottom: 0 !important;
}

body.mex-shell .delicious-burger-list ul li::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	width: 6px !important;
	height: 6px !important;
	min-width: 6px !important;
	/* first line: half line-height minus half dot (6px) */
	top: 4px !important;
	
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--accent-color) !important;
	background-image: none !important;
	color: transparent !important;
	font-family: inherit !important;
	font-size: 0 !important;
	font-weight: 400 !important;
	line-height: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Specials column: vertical rhythm via list gap (avoids margin collapse / media overrides) */
body.mex-shell .daily-offer-list ul {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.35rem !important;
	row-gap: 1.35rem !important;
}

body.mex-shell .daily-offer-list ul li {
	padding-left: 18px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}



/* —— Short body copy: max two lines in key home blocks —— */
.mex-shell .our-dish-content p,
.mex-shell .about-us-content .section-title > p,
.mex-shell .our-ingredients-content .section-title > p,
.mex-shell .daily-offer-content .section-title > p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mex-shell .ingredient-counter-content p {
	min-height: calc(var(--tm-body-fs) * var(--tm-body-lh) * 2);
	text-wrap: balance;
}

.mex-shell .about-detail-item .icon-box {
	border-color: rgba(196, 160, 98, 0.88) !important;
}

/* —— Buttons: 3px 6px hard offset shadow; colour = lighter tint of each fill —— */
.mex-shell a.btn-default,
.mex-shell button.btn-default,
.mex-shell .btn-default {
	box-shadow: 3px 6px 0 0 #d8d6cd;
}

.mex-shell a.btn-default.btn-highlighted,
.mex-shell button.btn-default.btn-highlighted,
.mex-shell .btn-default.btn-highlighted {
	box-shadow: 3px 6px 0 0 #e4e4e4;
}

@supports (color: color-mix(in srgb, white 50%, black)) {
	.mex-shell a.btn-default:not(.btn-highlighted),
	.mex-shell button.btn-default:not(.btn-highlighted),
	.mex-shell .btn-default:not(.btn-highlighted) {
		box-shadow: 3px 6px 0 0 color-mix(in srgb, var(--accent-color) 38%, #ffffff);
	}

	.mex-shell a.btn-default.btn-highlighted,
	.mex-shell button.btn-default.btn-highlighted,
	.mex-shell .btn-default.btn-highlighted {
		box-shadow: 3px 6px 0 0 color-mix(in srgb, var(--primary-color) 52%, #c6c6c6);
	}
}

/* Hover: shadow tint shifts (lighter / toward accent on highlighted, which picks accent on hover) */
.mex-shell a.btn-default:not(.btn-highlighted):hover,
.mex-shell button.btn-default:not(.btn-highlighted):hover,
.mex-shell .btn-default:not(.btn-highlighted):hover {
	box-shadow: 3px 6px 0 0 #efeee9;
}

.mex-shell a.btn-default.btn-highlighted:hover,
.mex-shell button.btn-default.btn-highlighted:hover,
.mex-shell .btn-default.btn-highlighted:hover {
	box-shadow: 3px 6px 0 0 #dcd8cc;
}

@supports (color: color-mix(in srgb, white 50%, black)) {
	.mex-shell a.btn-default:not(.btn-highlighted):hover,
	.mex-shell button.btn-default:not(.btn-highlighted):hover,
	.mex-shell .btn-default:not(.btn-highlighted):hover {
		box-shadow: 3px 6px 0 0 color-mix(in srgb, var(--accent-color) 22%, #ffffff);
	}

	.mex-shell a.btn-default.btn-highlighted:hover,
	.mex-shell button.btn-default.btn-highlighted:hover,
	.mex-shell .btn-default.btn-highlighted:hover {
		box-shadow: 3px 6px 0 0 color-mix(in srgb, var(--accent-color) 36%, #ffffff);
	}
}

/* —— Home: hashtag ticker under hero (accent bar, black Alike type) —— */
.tm-hashtag-ticker {
	background: var(--accent-color);
	color: #000000;
	border-block: 1px solid color-mix(in srgb, #000000 14%, var(--accent-color));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent),
		inset 0 -1px 0 color-mix(in srgb, #000000 10%, transparent);
}

.tm-hashtag-ticker__viewport {
	overflow: hidden;
	padding-block: 0.72rem;
	mask-image: linear-gradient(to right, transparent, #000 1.25%, #000 98.75%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 1.25%, #000 98.75%, transparent);
}

.tm-hashtag-ticker__marquee {
	display: flex;
	width: max-content;
	animation: tm-hashtag-ticker-scroll 78s linear infinite;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}

.tm-hashtag-ticker:hover .tm-hashtag-ticker__marquee {
	animation-play-state: paused;
}

.tm-hashtag-ticker__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.12rem;
	padding-inline-end: 2.25rem;
	font-family: var(--tm-alike);
	font-size: clamp(1rem, 1.5vw, 1.28rem);
	font-weight: 700;
	letter-spacing: 0.055em;
	font-feature-settings: "kern" 1;
	-webkit-font-smoothing: antialiased;
	text-transform: none;
	white-space: nowrap;
}

.tm-hashtag-ticker__item {
	display: inline-block;
	padding-inline: 0.12rem;
	text-shadow:
		0 1px 0 color-mix(in srgb, #ffffff 72%, transparent),
		0 -0.5px 0 color-mix(in srgb, #000000 12%, transparent);
}

.tm-hashtag-ticker__sep {
	display: inline-block;
	width: 0.28rem;
	height: 0.28rem;
	margin-inline: 0.48rem;
	border-radius: 50%;
	background: #000000;
	opacity: 0.5;
	vertical-align: middle;
	flex-shrink: 0;
	box-shadow: 0 0.5px 0 color-mix(in srgb, #ffffff 45%, transparent);
}

@keyframes tm-hashtag-ticker-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.tm-footer-disclaimer {
	margin-top: 0.75rem;
	font-size: 0.72rem;
	line-height: 1.45;
	color: rgba(248, 246, 242, 0.65);
	max-width: 36rem;
}

/* Hero main image: banner GIF/PNG inside pill frame */
.mex-shell .hero-image img[src*="banner/"] {
	object-fit: cover;
	object-position: center;
}

@media (prefers-reduced-motion: reduce) {
	.tm-hashtag-ticker__marquee {
		animation: none;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		max-width: 100%;
		padding-block: 0.35rem;
	}

	.tm-hashtag-ticker__group[aria-hidden="true"] {
		display: none;
	}

	.tm-hashtag-ticker__group {
		flex-wrap: wrap;
		justify-content: center;
		white-space: normal;
		row-gap: 0.35rem;
		padding-inline-end: 0;
	}
}