/**
 * Floating UI refinements - 2026-11.
 *
 * 1. Hero slide navigation: the old control was a white glass tray holding two
 *    rounded rectangles with text arrows, sitting on top of the chat button.
 *    Replaced by two circular glass buttons over the photograph, a thin slide
 *    counter between them, gold hover, and a position clear of the assistant.
 * 2. EACOP countdown drawer: rebuilt as a dark glass sheet with the brand rule,
 *    tabular unit cells and a gold action, instead of the flat charcoal panel.
 * 3. UNOC Assistant: two expanding rings on a slow loop so the button reads as
 *    an invitation rather than a static dot.
 *
 * ASCII only: literal arrows in CSS were being served as mojibake.
 */

/* ------------------------------------------------------- hero slide nav --- */

/* The control used to float inside the photograph's red ring. The ring is
 * baked into each slide, so any fixed position inside it reads as an accident
 * and moves against the ring as slides change. It now sits on the copy grid -
 * one dark glass pill at the headline's left edge - so it belongs to the
 * composition, not the picture. Chevrons are SVG (crisp at any DPI) instead of
 * text glyphs with hard, aliased strokes. */

body.home #hero.unoc-home-simple-hero .simple-hero-nav,
body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-nav {
	position: static !important;
	display: flex !important;
	width: fit-content !important;
	margin: 26px 0 0 !important;
	align-items: center !important;
	gap: 2px !important;
	padding: 5px !important;
	border: 1px solid rgba(255, 255, 255, 0.26) !important;
	border-radius: 999px !important;
	background: rgba(16, 16, 18, 0.64) !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	backdrop-filter: blur(14px) saturate(130%) !important;
	-webkit-backdrop-filter: blur(14px) saturate(130%) !important;
	overflow: visible !important;
}

body.home #hero.unoc-home-simple-hero .simple-hero-arrow,
body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-arrow {
	display: grid !important;
	place-items: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer !important;
	transition: background 0.18s ease, color 0.18s ease !important;
}

body.home #hero.unoc-home-simple-hero .simple-hero-arrow svg,
body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-arrow svg {
	display: block;
	width: 17px;
	height: 17px;
	stroke: currentColor;
}

body.home #hero.unoc-home-simple-hero .simple-hero-arrow:hover,
body.home #hero.unoc-home-simple-hero .simple-hero-arrow:focus-visible,
body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-arrow:hover,
body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-arrow:focus-visible {
	background: #ffc808 !important;
	color: #1a191a !important;
	outline: 0;
}

body.home #hero.unoc-home-simple-hero .simple-hero-arrow:focus-visible,
body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-arrow:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px;
}

.simple-hero-count {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 0 10px 8px 8px;
	font-family: Poppins, Arial, sans-serif;
	line-height: 1;
	white-space: nowrap;
}

/* Progress tick: gold length tracks the current slide. */
.simple-hero-count::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 10px;
	bottom: 1px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		#ffc808 calc(var(--p, 0.33) * 100%),
		rgba(255, 255, 255, 0.22) calc(var(--p, 0.33) * 100%)
	);
}

.simple-hero-count b {
	font-size: 13px;
	font-weight: 700;
	color: #ffc808;
	font-variant-numeric: tabular-nums;
}

.simple-hero-count span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.78);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
	body.home #hero.unoc-home-simple-hero .simple-hero-nav,
	body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-nav {
		padding: 4px !important;
		/* The countdown tab is pinned to the lower left, so a left-aligned
		 * control would sit behind it. Centred keeps it clear and deliberate. */
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.home #hero.unoc-home-simple-hero .simple-hero-arrow,
	body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-arrow {
		width: 38px !important;
		height: 38px !important;
	}

	/* While the countdown drawer is open the assistant would sit on top of its
	 * action, so it steps aside on small screens. */
	body:has(.unoc-eacop-drawer:not([hidden])) #unocStickyChat {
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease;
	}
}

/* ------------------------------------------------------ EACOP ribbon tab --- */

/* The tab is the permanent face of the countdown, so it carries the design:
 * a frosted white pill instead of a solid red block, the day count in brand
 * red, and the guide's black/yellow/red rule stood on end as the divider
 * between the count and the vertical label. Light glass also sits better
 * against the photograph than a heavy red slab. */
.unoc-eacop-countdown .unoc-eacop-ribbon {
	-webkit-text-fill-color: currentColor !important;
	width: 96px !important;
	height: 300px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	padding: 26px 6px 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.85) !important;
	border-left: 0 !important;
	border-radius: 0 32px 32px 0 !important;
	background-color: rgba(255, 255, 255, 0.74) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
	color: #414042 !important;
	box-shadow: 0 16px 38px rgba(24, 24, 26, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(18px) saturate(145%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(145%) !important;
	cursor: pointer !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.unoc-eacop-countdown .unoc-eacop-ribbon:hover,
.unoc-eacop-countdown .unoc-eacop-ribbon:focus-visible {
	transform: translateX(3px);
	background-color: rgba(255, 255, 255, 0.88) !important;
	box-shadow: 0 22px 46px rgba(24, 24, 26, 0.28), inset 0 1px 0 #fff !important;
	outline: 0;
}

.unoc-eacop-countdown .unoc-eacop-ribbon:focus-visible {
	outline: 2px solid #e10032 !important;
	outline-offset: -5px;
}

/* The droplet badge is dropped: the reference stack is number, unit, rule,
 * label. The icon stays in the markup for other uses but not in this tab. */
.unoc-eacop-countdown .unoc-eacop-ribbon-icon {
	display: none !important;
}

.unoc-eacop-countdown .unoc-eacop-ribbon-days {
	-webkit-text-fill-color: currentColor !important;
	flex: 0 0 auto;
	margin: 0 !important;
	color: #e10032 !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 0.92 !important;
	letter-spacing: -0.03em !important;
	font-variant-numeric: tabular-nums;
}

.unoc-eacop-countdown .unoc-eacop-ribbon-unit {
	-webkit-text-fill-color: currentColor !important;
	flex: 0 0 auto;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: #c4002c !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0.22em !important;
}

/* Brand rule, stood on end. */
.unoc-eacop-countdown .unoc-eacop-ribbon-rule {
	flex: 0 0 auto;
	width: 2px;
	height: 52px;
	margin: 16px 0 14px;
	border-radius: 2px;
	background: linear-gradient(180deg, #1a191a 0 33%, #ffc808 33% 66%, #e10032 66% 100%);
}

.unoc-eacop-countdown .unoc-eacop-ribbon-label {
	-webkit-text-fill-color: currentColor !important;
	flex: 0 1 auto;
	margin: 0 !important;
	color: #414042 !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.2em !important;
	writing-mode: vertical-rl !important;
	transform: rotate(180deg) !important;
}

.unoc-eacop-countdown .unoc-eacop-ribbon-arrow {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 auto;
	width: 24px !important;
	height: 24px !important;
	margin: auto 0 0 !important;
	border-radius: 999px !important;
	background: rgba(65, 64, 66, 0.08) !important;
	color: #414042 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}

.unoc-eacop-countdown .unoc-eacop-ribbon-arrow::before {
	content: "" !important;
	width: 6px !important;
	height: 6px !important;
	border-top: 2px solid currentColor !important;
	border-right: 2px solid currentColor !important;
	transform: rotate(45deg) translate(-1px, 1px);
	transition: transform 0.2s ease !important;
}

.unoc-eacop-countdown .unoc-eacop-ribbon[aria-expanded="true"] .unoc-eacop-ribbon-arrow::before {
	transform: rotate(-135deg) translate(-1px, 1px);
}

.unoc-eacop-countdown .unoc-eacop-ribbon:hover .unoc-eacop-ribbon-arrow {
	background: #e10032 !important;
	color: #fff !important;
}

/* Dismiss: quiet, inside the pill, dark on light. */
.unoc-eacop-countdown .unoc-eacop-dismiss {
	top: 10px !important;
	left: auto !important;
	right: 9px !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(65, 64, 66, 0.1) !important;
	color: rgba(65, 64, 66, 0.72) !important;
	font-size: 13px !important;
	line-height: 1 !important;
	opacity: 0.8;
	transition: opacity 0.15s ease, background 0.15s ease !important;
}

.unoc-eacop-countdown .unoc-eacop-dismiss:hover,
.unoc-eacop-countdown .unoc-eacop-dismiss:focus-visible {
	opacity: 1;
	background: rgba(65, 64, 66, 0.24) !important;
	color: #1a191a !important;
	outline: 2px solid rgba(65, 64, 66, 0.5) !important;
	outline-offset: 1px;
}

/* ------------------------------------------------------- EACOP drawer --- */

.unoc-eacop-countdown .unoc-eacop-drawer {
	padding: 24px 22px 20px !important;
	left: 96px !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-left: 0 !important;
	border-radius: 0 18px 18px 0 !important;
	background-color: #1c1c1e !important;
	background-image: linear-gradient(160deg, rgba(38, 38, 41, 0.97), rgba(18, 18, 20, 0.98)) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.46) !important;
	backdrop-filter: blur(16px) saturate(130%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(130%) !important;
	overflow: hidden !important;
}

.unoc-eacop-countdown .unoc-eacop-drawer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, #000 0 33%, #ffc808 33% 66%, #e10032 66% 100%);
}

.unoc-eacop-countdown .unoc-eacop-drawer > div {
	position: relative;
	z-index: 1;
}

.unoc-eacop-countdown .unoc-eacop-drawer small {
	color: #ffc808 !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 9.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
	line-height: 1.2 !important;
}

.unoc-eacop-countdown .unoc-eacop-drawer h2 {
	margin: 10px 0 8px !important;
	color: #fff !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 23px !important;
	font-weight: 600 !important;
	line-height: 1.16 !important;
	letter-spacing: -0.01em !important;
}

.unoc-eacop-countdown .unoc-eacop-message {
	margin: 0 0 16px !important;
	color: rgba(255, 255, 255, 0.76) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}

.unoc-eacop-countdown .unoc-eacop-units {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 8px !important;
	margin: 0 0 14px !important;
}

.unoc-eacop-countdown .unoc-eacop-units > span {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 5px !important;
	min-width: 0 !important;
	padding: 11px 10px 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

.unoc-eacop-countdown .unoc-eacop-units > span > b {
	color: #fff !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 23px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em !important;
}

.unoc-eacop-countdown .unoc-eacop-units > span > small {
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: 8.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
}

.unoc-eacop-countdown .unoc-eacop-supporting {
	margin: 0 0 14px !important;
	color: rgba(255, 255, 255, 0.56) !important;
	font-size: 11.5px !important;
	line-height: 1.4 !important;
}

.unoc-eacop-countdown .unoc-eacop-cta {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	height: 44px !important;
	padding: 0 16px !important;
	border-radius: 10px !important;
	background: #ffc808 !important;
	color: #1a191a !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

.unoc-eacop-countdown .unoc-eacop-cta:hover,
.unoc-eacop-countdown .unoc-eacop-cta:focus-visible {
	background: #fff !important;
	color: #1a191a !important;
	outline: 0;
}

.unoc-eacop-countdown .unoc-eacop-cta span {
	font-size: 15px !important;
	line-height: 1 !important;
}

@media (max-width: 680px) {
	/* A 300px tab eats a phone screen; trim it and tighten the stack. */
	.unoc-eacop-countdown .unoc-eacop-ribbon {
		height: 262px !important;
		padding: 20px 6px 12px !important;
	}

	.unoc-eacop-countdown .unoc-eacop-ribbon-days {
		font-size: 26px !important;
	}

	.unoc-eacop-countdown .unoc-eacop-ribbon-unit {
		font-size: 8.5px !important;
	}

	.unoc-eacop-countdown .unoc-eacop-ribbon-rule {
		height: 34px !important;
		margin: 11px 0 10px !important;
	}

	.unoc-eacop-countdown .unoc-eacop-ribbon-label {
		font-size: 8.5px !important;
		letter-spacing: 0.16em !important;
	}

	.unoc-eacop-countdown .unoc-eacop-ribbon-arrow {
		width: 22px !important;
		height: 22px !important;
	}

	.unoc-eacop-countdown .unoc-eacop-dismiss {
		top: 8px !important;
		right: 8px !important;
	}

	.unoc-eacop-countdown .unoc-eacop-drawer {
		width: calc(100vw - 106px) !important;
		padding: 20px 16px 16px !important;
	}

	.unoc-eacop-countdown .unoc-eacop-drawer h2 {
		font-size: 20px !important;
	}

	.unoc-eacop-countdown .unoc-eacop-units > span > b {
		font-size: 20px !important;
	}
}

/* -------------------------------------------------- assistant call to action --- */

#unocStickyChat #chatToggle {
	position: relative !important;
	overflow: visible !important;
	animation: unocChatPulse 3.5s ease-in-out infinite !important;
}

#unocStickyChat #chatToggle::before,
#unocStickyChat #chatToggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 200, 8, 0.9);
	pointer-events: none;
	animation: unocChatWave 3s cubic-bezier(0.25, 0.1, 0.35, 1) infinite;
}

#unocStickyChat #chatToggle::after {
	border-color: rgba(225, 0, 50, 0.75);
	animation-delay: 1.5s;
}

@keyframes unocChatWave {
	0% {
		transform: scale(1);
		opacity: 0.85;
	}
	65% {
		transform: scale(2.35);
		opacity: 0;
	}
	100% {
		transform: scale(2.35);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home #hero.unoc-home-simple-hero .simple-hero-arrow,
	body.home .unoc-compact-native .unoc-home-simple-hero .simple-hero-arrow {
		transition: none !important;
	}

	#unocStickyChat #chatToggle,
	#unocStickyChat #chatToggle::before,
	#unocStickyChat #chatToggle::after {
		animation: none !important;
	}

	#unocStickyChat #chatToggle::before,
	#unocStickyChat #chatToggle::after {
		display: none !important;
	}
}