@charset "utf-8";
/* Inter, self-hosted, so the tracking subdomain matches the main site's
   typography without depending on a theme or on Google Fonts. Only the
   weights actually used are shipped. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

/**
 * Meridian Cargo Tracking — front-end styles.
 *
 * Scoped under .mcg-* so it never fights the theme. All colour comes from two
 * custom properties set in Shipments → Settings (or per-widget in Elementor),
 * so rebranding does not require touching this file.
 */

.mcg-tracker,
.mcg-search,
.mcg-stats {
	--mcg-brand: #0b2033;
	--mcg-accent: #c8a54b;
	--mcg-ink: #0f1f2e;
	--mcg-body: #4a5c6d;
	--mcg-muted: #7b8b9a;
	--mcg-line: #e2e9ef;
	--mcg-panel: #ffffff;
	--mcg-paper: #f5f8fa;
	--mcg-good: #0f9d63;
	--mcg-warn: #c2760b;
	--mcg-bad: #d1344b;
	--mcg-radius: 14px;
	--mcg-shadow: 0 1px 2px rgba(11, 32, 51, .06), 0 12px 32px -12px rgba(11, 32, 51, .18);

	box-sizing: border-box;
	color: var(--mcg-body);
	font-size: 15px;
	line-height: 1.55;
}

.mcg-tracker *,
.mcg-tracker *::before,
.mcg-tracker *::after,
.mcg-search *,
.mcg-stats * {
	box-sizing: border-box;
}

.mcg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Search */

.mcg-search__row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	background: var(--mcg-panel);
	border: 1px solid var(--mcg-line);
	border-radius: calc(var(--mcg-radius) - 2px);
	padding: 7px 7px 7px 14px;
	box-shadow: var(--mcg-shadow);
	position: relative;
}

.mcg-search__row:focus-within {
	border-color: var(--mcg-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mcg-accent) 18%, transparent), var(--mcg-shadow);
}

.mcg-search__icon {
	display: flex;
	align-items: center;
	color: var(--mcg-muted);
	flex: 0 0 auto;
}

.mcg-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 16px;
	letter-spacing: .04em;
	color: var(--mcg-ink);
	padding: 10px 6px;
	text-transform: uppercase;
}

.mcg-search__input::placeholder {
	color: #a9b6c2;
	letter-spacing: .08em;
}

.mcg-search--dark .mcg-search__row {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .22);
	backdrop-filter: blur(6px);
}

.mcg-search--dark .mcg-search__input {
	color: #fff;
}

.mcg-search--dark .mcg-search__input::placeholder {
	color: rgba(255, 255, 255, .55);
}

.mcg-search--dark .mcg-search__icon {
	color: rgba(255, 255, 255, .7);
}

.mcg-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: calc(var(--mcg-radius) - 6px);
	padding: 12px 22px;
	font: inherit;
	font-weight: 650;
	letter-spacing: .01em;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .12s ease, filter .12s ease, background-color .12s ease;
	text-decoration: none;
}

.mcg-btn:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.mcg-btn:active {
	transform: translateY(0);
}

.mcg-btn--accent {
	background: var(--mcg-accent);
	color: #0b2033;
}

.mcg-btn--ghost {
	background: transparent;
	border: 1px solid var(--mcg-line);
	color: var(--mcg-ink);
	font-weight: 600;
	padding: 10px 16px;
}

.mcg-btn--ghost:hover {
	border-color: var(--mcg-accent);
	color: var(--mcg-brand);
}

.mcg-tracker__search {
	max-width: 720px;
	margin: 0 auto;
}

.mcg-tracker__hint {
	margin: 10px 2px 0;
	font-size: 13.5px;
	color: var(--mcg-muted);
	text-align: center;
}

/* ---------------------------------------------------------------- States */

.mcg-state {
	margin: 26px auto 0;
	max-width: 720px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--mcg-paper);
	border: 1px solid var(--mcg-line);
	color: var(--mcg-body);
	font-size: 14.5px;
	text-align: center;
}

/* Must beat the .mcg-state--busy display:flex below, or the hidden
   attribute is ignored and the spinner sits under the result. */
.mcg-state[hidden],
.mcg-result[hidden] {
	display: none !important;
}

.mcg-state--warn {
	background: #fff8ec;
	border-color: #f3dfba;
	color: #7a4d05;
}

.mcg-state--busy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.mcg-spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--mcg-line);
	border-top-color: var(--mcg-accent);
	animation: mcg-spin .7s linear infinite;
	flex: 0 0 auto;
}

@keyframes mcg-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.mcg-spinner { animation-duration: 2s; }
	.mcg-btn { transition: none; }
}

/* ---------------------------------------------------------------- Result */

.mcg-result {
	margin-top: 30px;
	animation: mcg-fade .35s ease both;
}

@keyframes mcg-fade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.mcg-card {
	background: var(--mcg-panel);
	border: 1px solid var(--mcg-line);
	border-radius: var(--mcg-radius);
	box-shadow: var(--mcg-shadow);
	overflow: hidden;
}

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

.mcg-head {
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--mcg-accent) 26%, transparent) 0%, transparent 55%),
		var(--mcg-brand);
	color: #fff;
	padding: 26px 28px 30px;
}

.mcg-head__top {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-start;
	justify-content: space-between;
}

.mcg-head__label {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	margin: 0 0 6px;
	font-weight: 600;
}

.mcg-head__number {
	margin: 0;
	font-size: clamp(22px, 3.4vw, 31px);
	font-weight: 700;
	letter-spacing: .05em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: #fff;
	line-height: 1.15;
}

.mcg-head__eta {
	text-align: right;
}

.mcg-head__eta-value {
	font-size: clamp(17px, 2.4vw, 21px);
	font-weight: 700;
	color: #fff;
	display: block;
}

.mcg-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	padding: 6px 13px 6px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 650;
	letter-spacing: .01em;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .2);
}

.mcg-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.mcg-badge--good { background: rgba(16, 185, 129, .2); border-color: rgba(16, 185, 129, .45); color: #6ee7b7; }
.mcg-badge--warn { background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .45); color: #fcd34d; }
.mcg-badge--bad  { background: rgba(244, 63, 94, .18); border-color: rgba(244, 63, 94, .45); color: #fda4af; }
.mcg-badge--info { background: rgba(255, 255, 255, .14); color: #e2f5f2; }

/* Progress -------------------------------------------------------------- */

.mcg-progress {
	margin-top: 26px;
}

.mcg-progress__rail {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	overflow: visible;
}

.mcg-progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mcg-accent), color-mix(in srgb, var(--mcg-accent) 55%, #ffffff));
	width: 0;
	transition: width 1s cubic-bezier(.22, .61, .36, 1);
}

.mcg-progress__steps {
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	gap: 6px;
}

.mcg-step {
	flex: 1 1 0;
	text-align: center;
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	position: relative;
	padding-top: 2px;
	font-weight: 600;
}

.mcg-step--done {
	color: rgba(255, 255, 255, .95);
}

.mcg-step__mark {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	margin: -22px auto 8px;
	background: var(--mcg-brand);
	border: 2px solid rgba(255, 255, 255, .35);
}

.mcg-step--done .mcg-step__mark {
	background: var(--mcg-accent);
	border-color: #fff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mcg-accent) 30%, transparent);
}

/* Facts ----------------------------------------------------------------- */

.mcg-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	border-top: 1px solid var(--mcg-line);
	background: var(--mcg-paper);
}

.mcg-fact {
	padding: 18px 22px;
	border-right: 1px solid var(--mcg-line);
	border-bottom: 1px solid var(--mcg-line);
}

.mcg-fact__k {
	display: block;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mcg-muted);
	font-weight: 700;
	margin-bottom: 5px;
}

.mcg-fact__v {
	display: block;
	font-size: 15.5px;
	font-weight: 650;
	color: var(--mcg-ink);
	overflow-wrap: anywhere;
}

/* Body layout ----------------------------------------------------------- */

.mcg-body {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 22px;
	padding: 24px;
	background: var(--mcg-panel);
}

@media (max-width: 860px) {
	.mcg-body { grid-template-columns: 1fr; }
	.mcg-head { padding: 22px 20px 26px; }
	.mcg-head__eta { text-align: left; }
}

.mcg-panel {
	border: 1px solid var(--mcg-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--mcg-panel);
}

.mcg-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	background: var(--mcg-paper);
	border-bottom: 1px solid var(--mcg-line);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--mcg-ink);
}

.mcg-panel__note {
	font-size: 11px;
	letter-spacing: .02em;
	text-transform: none;
	font-weight: 500;
	color: var(--mcg-muted);
}

.mcg-panel__body { padding: 16px; }

/* Map ------------------------------------------------------------------- */

.mcg-map {
	width: 100%;
	min-height: 280px;
	background: #dfe8ee;
	z-index: 0;
}

.mcg-map .leaflet-container {
	font: inherit;
}

/* Leaflet paints a white box behind div icons by default. */
.mcg-divicon,
.mcg-map .leaflet-div-icon {
	background: transparent;
	border: 0;
}

.mcg-pin {
	display: block;
	width: 100%;
	height: 100%;
}

/* display:block matters — a bare span is inline, and width/height on an
   inline element are ignored, which collapses the pin to an empty oval. */
.mcg-pin__dot {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.mcg-pin--origin .mcg-pin__dot { background: #64748b; }
.mcg-pin--dest .mcg-pin__dot { background: var(--mcg-brand); }

.mcg-pin--live .mcg-pin__dot {
	background: var(--mcg-accent);
	position: relative;
}

.mcg-pin--live .mcg-pin__dot::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--mcg-accent);
	animation: mcg-ping 2s ease-out infinite;
}

@keyframes mcg-ping {
	0% { transform: scale(.6); opacity: .9; }
	100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mcg-pin--live .mcg-pin__dot::after { animation: none; opacity: .4; }
}

.mcg-maplegend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 11px 16px;
	border-top: 1px solid var(--mcg-line);
	font-size: 12.5px;
	color: var(--mcg-muted);
	background: var(--mcg-panel);
}

.mcg-maplegend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mcg-maplegend i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
}

/* Info cards ------------------------------------------------------------ */

.mcg-side {
	display: grid;
	gap: 18px;
	align-content: start;
}

.mcg-kv {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 7px 14px;
	font-size: 14px;
	margin: 0;
}

.mcg-kv dt {
	color: var(--mcg-muted);
	font-weight: 500;
}

.mcg-kv dd {
	margin: 0;
	color: var(--mcg-ink);
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.mcg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding: 16px;
	border-top: 1px solid var(--mcg-line);
	background: var(--mcg-paper);
}

/* Timeline -------------------------------------------------------------- */

.mcg-timeline {
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
}

.mcg-tl {
	position: relative;
	padding: 0 0 22px 30px;
}

.mcg-tl::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 16px;
	bottom: -6px;
	width: 2px;
	background: var(--mcg-line);
}

.mcg-tl:last-child { padding-bottom: 2px; }
.mcg-tl:last-child::before { display: none; }

.mcg-tl__mark {
	position: absolute;
	left: 0;
	top: 5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--mcg-line);
}

.mcg-tl--latest .mcg-tl__mark {
	border-color: var(--mcg-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mcg-accent) 18%, transparent);
}

.mcg-tl__status {
	font-weight: 700;
	color: var(--mcg-ink);
	font-size: 14.5px;
}

.mcg-tl__where {
	color: var(--mcg-body);
	font-size: 14px;
}

.mcg-tl__when {
	color: var(--mcg-muted);
	font-size: 12.5px;
	margin-top: 3px;
	font-variant-numeric: tabular-nums;
}

.mcg-tl__note {
	margin-top: 6px;
	font-size: 13px;
	color: var(--mcg-body);
	background: var(--mcg-paper);
	border-left: 3px solid var(--mcg-line);
	padding: 7px 11px;
	border-radius: 0 7px 7px 0;
}

.mcg-empty {
	color: var(--mcg-muted);
	font-size: 14px;
	margin: 0;
}

/* Stats ----------------------------------------------------------------- */

.mcg-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}

.mcg-stat {
	padding: 4px 6px;
}

.mcg-stat__value {
	display: block;
	font-size: clamp(24px, 3.6vw, 34px);
	font-weight: 750;
	color: var(--mcg-accent);
	line-height: 1.1;
	letter-spacing: -.01em;
}

.mcg-stat__label {
	display: block;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: currentColor;
	opacity: .72;
	margin-top: 5px;
	font-weight: 600;
}

/* On a dark section the inherited body colour drops to roughly 2:1 against
   the background, which is unreadable. Pass class="mcg-stats--dark". */
.mcg-stats--dark {
	color: rgba(255, 255, 255, .92);
}

.mcg-stats--dark .mcg-stat__label {
	color: rgba(255, 255, 255, .68);
	opacity: 1;
}

/* Tones ----------------------------------------------------------------- */

.mcg-tone-good { color: var(--mcg-good); }
.mcg-tone-warn { color: var(--mcg-warn); }
.mcg-tone-bad  { color: var(--mcg-bad); }

/* ------------------------------------------------ hold / delay notice */

.mcg-holdnote {
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1px solid;
	background: #FFF8EC;
	border-color: #F0DCB4;
}

.mcg-holdnote--bad { background: #FDF1F2; border-color: #F0C6CC; }
.mcg-holdnote--neutral { background: #F4F7F9; border-color: #DFE7ED; }

.mcg-holdnote__title {
	display: block;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7A5E14;
	margin-bottom: 4px;
}

.mcg-holdnote--bad .mcg-holdnote__title { color: #9A2230; }
.mcg-holdnote--neutral .mcg-holdnote__title { color: #4A5C6D; }

.mcg-holdnote__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #3C4A57;
	white-space: pre-line;
}


/* ==========================================================================
   Standalone tracking page.

   Deliberately mirrors the main website's header and footer — utility bar,
   white sticky header with the menu, four-column dark footer — so a customer
   who clicks "Track" from the main site does not feel handed to a different
   company. Everything is scoped under .mcg-standalone, so none of it can
   leak into a themed page if the standalone option is switched off.
   ========================================================================== */

body.mcg-standalone {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #4A5C6D;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.mcg-standalone * { box-sizing: border-box; }
.mcg-standalone img { max-width: 100%; height: auto; }

.mcgp-wrap {
	width: 100%;
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 48px);
}

/* ------------------------------------------------------- utility bar */

.mcgp-utility {
	background: #071726;
	color: rgba(255, 255, 255, .68);
	font-size: 12.8px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.mcgp-utility__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 26px;
	min-height: 42px;
	padding-block: 7px;
}

.mcgp-utility__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcgp-utility a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.mcgp-utility a:hover { color: #EBD79B; }
.mcgp-utility strong { color: rgba(255, 255, 255, .82); font-weight: 600; }

/* ------------------------------------------------------------ header */

.mcgp-header {
	position: sticky;
	top: 0;
	z-index: 60;
	isolation: isolate;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid #E2E9EF;
	flex: none;
}

.mcgp-header__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 82px;
	padding-block: 12px;
}

.mcgp-brand { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
.mcgp-brand img { height: 50px; width: auto; display: block; }

.mcgp-brand__text {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--mcg-brand, #0B2033);
}

.mcgp-nav { margin-left: auto; }

.mcgp-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcgp-nav a {
	display: block;
	padding: 10px 15px;
	border-radius: 999px;
	font-size: 14.6px;
	font-weight: 500;
	color: #0F1F2E;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}

.mcgp-nav a:hover { background: #F5F8FA; }

.mcgp-nav a.is-current {
	color: #7A5E14;
	font-weight: 650;
	background: rgba(200, 165, 75, .12);
}

.mcgp-cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid #E2E9EF;
	background: #fff;
	color: #0F1F2E;
	font-size: 13.8px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, border-color .18s ease;
}

.mcgp-cta:hover { background: #F5F8FA; border-color: #CBD8E2; }

.mcgp-toggle {
	display: none;
	flex: none;
	width: 46px;
	height: 46px;
	padding: 0;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid #E2E9EF;
	border-radius: 12px;
	cursor: pointer;
}

.mcgp-toggle span,
.mcgp-toggle span::before,
.mcgp-toggle span::after {
	display: block;
	width: 19px;
	height: 2px;
	background: #0F1F2E;
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

.mcgp-toggle span { position: relative; }
.mcgp-toggle span::before,
.mcgp-toggle span::after { content: ""; position: absolute; left: 0; }
.mcgp-toggle span::before { top: -6px; }
.mcgp-toggle span::after { top: 6px; }

.mcgp-toggle[aria-expanded="true"] span { background: transparent; }
.mcgp-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.mcgp-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------- main */

.mcgp-main { flex: 1 0 auto; padding-block: clamp(30px, 5vw, 58px) clamp(44px, 7vw, 84px); }
.mcgp-intro { max-width: 660px; margin-bottom: clamp(22px, 3vw, 34px); }

.mcgp-intro h1 {
	margin: 0 0 8px;
	font-size: clamp(1.8rem, 3.8vw, 2.6rem);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #0F1F2E;
}

.mcgp-intro p { margin: 0; font-size: 16.5px; color: #4A5C6D; }

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

.mcgp-footer {
	flex: none;
	background: #071726;
	color: rgba(255, 255, 255, .66);
	padding-block: clamp(40px, 6vw, 72px) 0;
	font-size: 14.4px;
}

.mcgp-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.4fr;
	gap: 28px clamp(28px, 4vw, 52px);
	padding-bottom: clamp(30px, 4vw, 46px);
}

.mcgp-footer__grid > * { min-width: 0; }

.mcgp-footer__name { margin: 0 0 8px; color: #fff; font-size: 16px; font-weight: 600; }
.mcgp-footer__line { margin: 0 0 8px; line-height: 1.6; color: rgba(255, 255, 255, .62); }

.mcgp-footer__h {
	margin: 0 0 16px;
	color: #fff;
	font-size: 11.6px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.mcgp-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mcgp-footer__list a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.mcgp-footer__list a:hover { color: #EBD79B; }

.mcgp-contact__k {
	display: block;
	font-size: 11.2px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 2px;
}

.mcgp-fraud {
	margin: 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 12.8px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .5);
}

.mcgp-fraud strong { color: rgba(255, 255, 255, .78); }

.mcgp-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 18px;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
}

.mcgp-bar p { margin: 0; }
.mcgp-bar a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.mcgp-bar a:hover { color: #EBD79B; }

/* --------------------------------------------------------- responsive */

@media (max-width: 1000px) {
	.mcgp-footer__grid { grid-template-columns: 1fr 1fr; }
	.mcgp-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.mcgp-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		padding: 14px clamp(20px, 5vw, 48px) 24px;
		background: #fff;
		border-bottom: 1px solid #E2E9EF;
		box-shadow: 0 20px 44px rgba(11, 32, 51, .14);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: transform .28s ease, opacity .22s ease, visibility .28s ease;
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
	}

	.mcgp-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
	.mcgp-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }

	.mcgp-nav a {
		padding: 14px 16px;
		border-radius: 12px;
		font-size: 16.5px;
		border-bottom: 1px solid #EEF3F7;
	}

	.mcgp-nav li:last-child a { border-bottom: 0; }
	.mcgp-toggle { display: inline-flex; margin-left: auto; }
	.mcgp-cta { display: none; }
	.mcgp-header__inner { min-height: 70px; }
	.mcgp-brand img { height: 42px; }
}

@media (max-width: 700px) {
	.mcgp-footer__grid { grid-template-columns: 1fr; }
	.mcgp-utility__inner { justify-content: center; text-align: center; }
	.mcgp-utility__list { justify-content: center; }
}

/* ==========================================================================
   2026 refresh — the ticket band, and a pass over the surfaces below it.

   Additive: every selector here already exists in the markup, so nothing
   above is removed and the page degrades to the previous styling if this
   block is ever dropped. Modern CSS is used where it earns its place —
   @property for a genuinely animatable gradient angle, color-mix() so the
   accent drives every tint from one value, container queries so the layout
   responds to the column it is in rather than the viewport, and
   scroll-driven reveals behind an @supports guard.
   ========================================================================== */

@property --mcg-sweep {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.mcg-card {
	--mcg-r: 20px;
	border-radius: var(--mcg-r);
	border-color: color-mix(in srgb, var(--mcg-brand) 10%, transparent);
	/* Layered rather than one flat drop: a tight contact shadow, a wide soft
	   one, and a hairline highlight along the top edge. */
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--mcg-brand) 8%, transparent),
		0 12px 28px -12px color-mix(in srgb, var(--mcg-brand) 22%, transparent),
		0 40px 80px -40px color-mix(in srgb, var(--mcg-brand) 30%, transparent);
	container-type: inline-size;
}

/* --------------------------------------------------------- the ticket band */

.mcg-ticket {
	position: relative;
	isolation: isolate;
	padding: 30px 30px 0;
	background:
		radial-gradient(90% 120% at 8% 0%,
			color-mix(in srgb, var(--mcg-accent) 20%, transparent) 0%, transparent 60%),
		radial-gradient(70% 100% at 100% 10%,
			color-mix(in srgb, #4da3ff 16%, transparent) 0%, transparent 55%),
		var(--mcg-brand);
	color: #fff;
	overflow: hidden;
}

/* A slow sweep of light across the band. Purely atmospheric, so it is the
   first thing to go when the visitor has asked for less motion. */
.mcg-ticket::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: -1;
	background: conic-gradient(from var(--mcg-sweep),
		transparent 0deg,
		color-mix(in srgb, var(--mcg-accent) 12%, transparent) 40deg,
		transparent 110deg,
		transparent 360deg);
	animation: mcg-sweep 18s linear infinite;
	pointer-events: none;
}

@keyframes mcg-sweep { to { --mcg-sweep: 360deg; } }

/* --- route ------------------------------------------------------------- */

.mcg-ticket__route {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(80px, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}

.mcg-ticket__port { min-width: 0; }
.mcg-ticket__port--to { text-align: right; }

.mcg-ticket__code {
	display: block;
	font-size: clamp(30px, 5.6cqi, 58px);
	font-weight: 750;
	line-height: .92;
	letter-spacing: -.02em;
	color: #fff;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.mcg-ticket__city {
	display: block;
	margin-top: 9px;
	font-size: 14px;
	font-weight: 600;
	color: color-mix(in srgb, #fff 92%, transparent);
}

.mcg-ticket__term {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: color-mix(in srgb, #fff 46%, transparent);
}

.mcg-ticket__arc {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mcg-accent);
	padding-bottom: 26px;
}

.mcg-ticket__line {
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: repeating-linear-gradient(to right,
		color-mix(in srgb, #fff 40%, transparent) 0 6px, transparent 6px 12px);
}

.mcg-ticket__dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mcg-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mcg-accent) 22%, transparent);
}

.mcg-ticket__plane {
	flex: none;
	/* Without this the inline SVG has no intrinsic size and expands to fill
	   its column — which is exactly what it did before this rule existed. */
	width: 30px;
	height: 30px;
	display: block;
	animation: mcg-cruise 5.5s ease-in-out infinite;
}

@keyframes mcg-cruise {
	0%, 100% { transform: translateX(-3px); }
	50%      { transform: translateX(3px); }
}

/* --- the scan strip ---------------------------------------------------- */

.mcg-ticket__scan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	margin: 26px -30px 0;
	padding: 18px 30px 20px;
	background: color-mix(in srgb, #fff 96%, var(--mcg-brand));
	color: var(--mcg-ink, #0b1622);
	/* The perforation: a dashed seam across the full width of the band. */
	border-top: 2px dashed color-mix(in srgb, var(--mcg-brand) 24%, transparent);
}

.mcg-ticket__barswrap { min-width: 0; }

.mcg-ticket__bars svg {
	display: block;
	width: 100%;
	/* The generator emits preserveAspectRatio="none", so height is free to be
	   set without shrinking module width — which is the only dimension a
	   scanner actually cares about. */
	height: 62px;
}

.mcg-ticket__barsno {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .3em;
	color: color-mix(in srgb, var(--mcg-brand) 78%, #fff);
}

.mcg-ticket__qrwrap { text-align: center; flex: none; }

.mcg-ticket__qr {
	padding: 7px;
	background: #fff;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--mcg-brand) 12%, transparent);
	line-height: 0;
}

.mcg-ticket__qr img, .mcg-ticket__qr canvas { display: block; width: 96px; height: 96px; }

.mcg-ticket__qrcap {
	display: block;
	margin-top: 7px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--mcg-brand) 52%, #fff);
}

/* The dark header continues straight out of the ticket band, so the two read
   as one hero rather than two stacked bars. */
.mcg-head { padding-top: 24px; }

/* ------------------------------------------------------------- surfaces */

.mcg-badge {
	backdrop-filter: blur(6px);
	border: 1px solid color-mix(in srgb, #fff 18%, transparent);
}

.mcg-fact {
	transition: background .18s ease;
}

.mcg-fact:hover { background: color-mix(in srgb, var(--mcg-accent) 7%, transparent); }

.mcg-panel {
	border-color: color-mix(in srgb, var(--mcg-brand) 9%, transparent);
	border-radius: 14px;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--mcg-brand) 5%, transparent);
}

.mcg-btn {
	transition: transform .15s cubic-bezier(.2, .9, .3, 1),
	            box-shadow .15s ease,
	            border-color .15s ease;
}

.mcg-btn:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--mcg-accent) 55%, transparent);
	box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--mcg-brand) 45%, transparent);
}

.mcg-btn:active { transform: translateY(0); }

/* --- the live node on the timeline ------------------------------------- */

.mcg-tl--latest .mcg-tl__mark {
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--mcg-accent) 60%, transparent);
	animation: mcg-pulse 2.4s ease-out infinite;
}

@keyframes mcg-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mcg-accent) 55%, transparent); }
	70%  { box-shadow: 0 0 0 11px color-mix(in srgb, var(--mcg-accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mcg-accent) 0%, transparent); }
}

/* --- progress ---------------------------------------------------------- */

.mcg-progress__fill {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--mcg-accent) 70%, #fff) 0%,
		var(--mcg-accent) 100%);
	box-shadow: 0 0 14px -2px color-mix(in srgb, var(--mcg-accent) 70%, transparent);
	transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}

/* --- scroll-driven reveal ---------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mcg-tl, .mcg-side > .mcg-panel {
			animation: mcg-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 42%;
		}
		@keyframes mcg-rise {
			from { opacity: 0; transform: translateY(14px); }
			to   { opacity: 1; transform: none; }
		}
	}
}

/* --- container-driven layout ------------------------------------------- */

@container (max-width: 820px) {
	.mcg-body { grid-template-columns: 1fr; }
	.mcg-ticket { padding: 24px 20px 0; }
	.mcg-ticket__scan { margin-inline: -20px; padding-inline: 20px; }
}

@container (max-width: 560px) {
	.mcg-ticket__route { grid-template-columns: 1fr; gap: 4px; text-align: left; }
	.mcg-ticket__port--to { text-align: left; }
	.mcg-ticket__arc { padding: 6px 0; }
	.mcg-ticket__code { font-size: clamp(28px, 12cqi, 42px); }
	.mcg-ticket__scan { grid-template-columns: 1fr; justify-items: center; }
	.mcg-ticket__barswrap { width: 100%; }
}

/* --- motion preferences ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.mcg-ticket::before,
	.mcg-ticket__plane,
	.mcg-tl--latest .mcg-tl__mark { animation: none; }
	.mcg-progress__fill { transition: none; }
	.mcg-btn { transition: none; }
}

/* --- print ------------------------------------------------------------- */

@media print {
	.mcg-ticket::before, .mcg-ticket__plane { animation: none; }
	.mcg-ticket, .mcg-ticket__scan {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* The status badge is now the left-hand anchor of the header, so it carries
   more weight than it did as a label under the number. */
.mcg-head__top .mcg-badge {
	margin-top: 4px;
	font-size: 15px;
	padding: 9px 16px;
}

/* The scan strip only needs enough height to be obviously scannable. */
.mcg-ticket__scan { padding-block: 15px 16px; }
.mcg-ticket__bars svg { height: 54px; }

/* The five step labels are wider than a phone can give them. Below this the
   text was overflowing its track and "Delivered" was being clipped by the
   card edge. Shrink, allow a second line, and let the two outer labels hang
   to their own edges instead of centring past them. */
@container (max-width: 560px) {
	.mcg-progress__steps { gap: 2px; }

	.mcg-step {
		min-width: 0;
		font-size: 8.5px;
		letter-spacing: .02em;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	.mcg-step:first-child { text-align: left; }
	.mcg-step:last-child { text-align: right; }
	.mcg-step:first-child .mcg-step__mark { margin-left: 0; }
	.mcg-step:last-child .mcg-step__mark { margin-right: 0; }
}

/* The route reads top-to-bottom on a phone, so the connector should too. */
@container (max-width: 560px) {
	.mcg-ticket__arc {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		padding: 8px 0 8px 15px;
	}
	.mcg-ticket__line { width: 2px; flex: 0 0 18px; height: auto;
		background: repeating-linear-gradient(to bottom,
			color-mix(in srgb, #fff 40%, transparent) 0 5px, transparent 5px 10px); }
	.mcg-ticket__plane { transform: rotate(180deg); width: 24px; height: 24px; animation: none; }
}

/* Nothing above the scan strip when there is no route, so the seam would be
   a dashed line against the very top of the card. Drop it and close the gap. */
.mcg-ticket--noroute { padding-top: 0; }
.mcg-ticket--noroute .mcg-ticket__scan { margin-top: 0; border-top: 0; }