/* =============================================================
   Elite Pearl Charter — primary navigation

   Size tiers
     < 480px      small phone
     480–767px    large phone
     768–1199px   tablet + small laptop   (drawer)
     >= 1200px    laptop / desktop        (horizontal bar)
     >= 1536px    large desktop

   Palette is monochrome: black grounds, white text, silver
   secondary. The accent is the white-to-silver gradient
   (--epc-gradient-title), not a colour.
   ============================================================= */

/* --- Accessibility helpers ---------------------------------- */

.epc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.epc-skip-link {
	position: absolute;
	top: -100px;
	left: var(--epc-gutter);
	z-index: calc(var(--epc-z-header) + 10);
	padding: 0.75rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--epc-black);
	background: var(--epc-white);
	border-radius: 0 0 6px 6px;
	text-decoration: none;
	transition: top var(--epc-speed) var(--epc-ease);
}

.epc-skip-link:focus {
	top: 0;
}

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

.epc-header {
	position: sticky;
	top: 0;
	z-index: var(--epc-z-header);
	background: var(--epc-black);
	border-bottom: 1px solid var(--epc-line);
	transition: box-shadow var(--epc-speed) var(--epc-ease),
		background-color var(--epc-speed) var(--epc-ease);
}

.epc-header.is-scrolled {
	background: rgb(0 0 0 / 92%);
	backdrop-filter: blur(10px);
	box-shadow: var(--epc-shadow-header);
}

.epc-header__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: var(--epc-container);
	min-height: var(--epc-header-h);
	margin-inline: auto;
	padding-inline: var(--epc-gutter);
}

@media (min-width: 1200px) {
	.epc-header__inner {
		gap: 1rem;
	}
}

/* --- Logo ---------------------------------------------------- */

.epc-header__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto;
	text-decoration: none;
	border-radius: 4px;
}

.epc-header__logo,
.epc-header__brand .custom-logo {
	display: block;
	width: auto;
	height: 36px;
	transition: height var(--epc-speed) var(--epc-ease);
}

@media (min-width: 480px) {
	.epc-header__logo,
	.epc-header__brand .custom-logo {
		height: 44px;
	}
}

@media (min-width: 768px) {
	.epc-header__logo,
	.epc-header__brand .custom-logo {
		height: 52px;
	}
}

@media (min-width: 1200px) {
	.epc-header__logo,
	.epc-header__brand .custom-logo {
		height: 60px;
	}

	.epc-header.is-scrolled .epc-header__logo,
	.epc-header.is-scrolled .custom-logo {
		height: 50px;
	}
}

@media (min-width: 1536px) {
	.epc-header__logo,
	.epc-header__brand .custom-logo {
		height: 66px;
	}
}

/* --- Navigation: shared -------------------------------------- */

.epc-nav__list,
.epc-nav__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-nav__link {
	display: block;
	font-family: var(--epc-font-sans);
	font-weight: 500;
	color: var(--epc-nav-idle);
	text-decoration: none;
	transition: color var(--epc-speed) var(--epc-ease);
}

.epc-nav__link:hover,
.epc-nav__link:focus-visible {
	color: var(--epc-white);
}

/* Active page — the visual counterpart to aria-current="page". */
.epc-nav__item.is-current > .epc-nav__link {
	color: var(--epc-white);
}

.epc-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--epc-silver);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--epc-speed) var(--epc-ease);
}

.epc-nav__item:hover > .epc-nav__toggle,
.epc-nav__item.is-open > .epc-nav__toggle {
	color: var(--epc-white);
}

.epc-nav__chevron {
	transition: transform var(--epc-speed) var(--epc-ease);
}

.epc-nav__item.is-open > .epc-nav__toggle .epc-nav__chevron {
	transform: rotate(180deg);
}

/* Visible keyboard focus everywhere in the header. */
.epc-header :focus-visible,
.epc-nav :focus-visible,
.epc-skip-link:focus-visible {
	outline: 2px solid var(--epc-white);
	outline-offset: 3px;
	border-radius: 3px;
}

/* =============================================================
   DRAWER (< 1200px) — phone, tablet and small laptop
   ============================================================= */

@media (max-width: 1199.98px) {

	.epc-nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: calc(var(--epc-z-header) + 2);
		width: min(90vw, 340px);
		padding: calc(var(--epc-header-h) + 1.25rem) 1.25rem 2rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--epc-ink-950);
		box-shadow: var(--epc-shadow-menu);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 320ms var(--epc-ease), visibility 320ms var(--epc-ease);
	}

	@media (min-width: 480px) {
		.epc-nav {
			width: min(85vw, 380px);
			padding: calc(var(--epc-header-h) + 1.5rem) 1.5rem 2.5rem;
		}
	}

	@media (min-width: 768px) {
		.epc-nav {
			width: min(60vw, 420px);
			padding-inline: 2rem;
		}
	}

	body.epc-nav-open .epc-nav {
		transform: translateX(0);
		visibility: visible;
	}

	.epc-nav__item {
		border-bottom: 1px solid var(--epc-line-soft);
	}

	.epc-nav__item--depth-0 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.epc-nav__item--depth-0 > .epc-nav__link {
		flex: 1;
		padding: 0.9rem 0;
		font-size: 0.9375rem;
	}

	@media (min-width: 768px) {
		.epc-nav__item--depth-0 > .epc-nav__link {
			padding: 1rem 0;
			font-size: 1.0625rem;
		}
	}

	.epc-nav__toggle {
		width: 44px;
		height: 44px;
		margin-left: auto;
	}

	.epc-nav__chevron {
		width: 13px;
		height: 8px;
	}

	/*
	 * Accordion. Collapsed height is 0 but the markup stays in the DOM, so the
	 * submenu links are still crawlable.
	 *
	 * grid-auto-rows matters as much as grid-template-rows here. The grid is
	 * the <ul> and every <li> is its own grid item, so grid-template-rows: 0fr
	 * only ever collapsed the FIRST child; items two onward landed in implicit
	 * rows, which default to auto and kept their full height. A collapsed
	 * "Elite Services" was leaving 200px of invisible dead space in the drawer
	 * and "Promotions" 83px. Sizing the implicit rows too is what actually
	 * closes it.
	 *
	 * grid-auto-rows does not interpolate, so the panel now opens in one step
	 * rather than sliding; the chevron rotation carries the feedback. Worth the
	 * trade, since the version that animated only ever collapsed one row.
	 */
	.epc-nav__submenu {
		flex-basis: 100%;
		display: grid;
		grid-template-rows: 0fr;
		grid-auto-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows 300ms var(--epc-ease),
			grid-auto-rows 300ms var(--epc-ease),
			visibility 300ms var(--epc-ease);
	}

	.epc-nav__item.is-open > .epc-nav__submenu {
		grid-template-rows: 1fr;
		grid-auto-rows: 1fr;
		visibility: visible;
	}

	.epc-nav__submenu > * {
		min-height: 0;
		overflow: hidden;
	}

	.epc-nav__submenu .epc-nav__item {
		border-bottom: 0;
	}

	.epc-nav__submenu .epc-nav__link {
		padding: 0.65rem 0 0.65rem 1rem;
		font-size: 0.875rem;
		font-weight: 400;
		color: var(--epc-silver);
		border-left: 2px solid rgb(255 255 255 / 22%);
		transition: color var(--epc-speed) var(--epc-ease),
			border-left-color var(--epc-speed) var(--epc-ease);
	}

	.epc-nav__submenu .epc-nav__link:hover,
	.epc-nav__submenu .epc-nav__link:focus-visible,
	.epc-nav__submenu .epc-nav__item.is-current > .epc-nav__link {
		color: var(--epc-white);
		border-left-color: var(--epc-white);
	}

	.epc-nav__submenu .epc-nav__item:last-child .epc-nav__link {
		padding-bottom: 1rem;
	}

	/* Call + WhatsApp at the foot of the drawer, within thumb reach. */
	.epc-nav__contact {
		display: grid;
		gap: 0.6rem;
		margin-top: 1.75rem;
	}

	.epc-nav__cta {
		position: relative;
		display: block;
		padding: 0.9rem 1rem;
		font-size: 0.9375rem;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		border-radius: 8px;
		transition: color var(--epc-speed) var(--epc-ease),
			border-color var(--epc-speed) var(--epc-ease),
			transform var(--epc-speed) var(--epc-ease);
	}

	.epc-nav__cta--call {
		color: var(--epc-black);
		background: var(--epc-gradient-title);
	}

	.epc-nav__cta--whatsapp {
		color: var(--epc-white);
		background: transparent;
		border: 1px solid rgb(255 255 255 / 35%);
	}

	.epc-nav__cta--whatsapp:hover,
	.epc-nav__cta--whatsapp:focus-visible {
		border-color: var(--epc-white);
	}

	.epc-nav__cta:active {
		transform: translateY(1px);
	}

	.epc-nav-scrim {
		position: fixed;
		inset: 0;
		z-index: calc(var(--epc-z-header) + 1);
		background: rgb(0 0 0 / 65%);
		opacity: 0;
		pointer-events: none;
		transition: opacity 320ms var(--epc-ease);
	}

	body.epc-nav-open .epc-nav-scrim {
		opacity: 1;
		pointer-events: auto;
	}

	/*
	 * The drawer lives inside the sticky header, so its z-index is only ranked
	 * against the header's other children, never against the page. The header
	 * sits at --epc-z-header and the scrim one above it, so the scrim was
	 * painting straight over the drawer: the panel rendered rgb(3,4,5) against
	 * its declared rgb(11,12,16), which is exactly a 65% black wash. Raising
	 * the header above the scrim while the drawer is open is what actually
	 * puts the panel in front; the page behind still dims.
	 */
	body.epc-nav-open .epc-header {
		z-index: calc(var(--epc-z-header) + 2);
	}

	/*
	 * The burger already morphs to an X when open, but the drawer painted over
	 * it, leaving only the scrim and Escape as ways out. Raised above the panel
	 * so it works as the close control it was drawn to be.
	 */
	body.epc-nav-open .epc-burger {
		position: relative;
		z-index: calc(var(--epc-z-header) + 3);
	}

	/*
	 * Lifting the header also lifted the logo clear of the scrim, leaving it
	 * bright against a dimmed page. It is dimmed to match, so the only things
	 * the scrim does not touch are the drawer and the control that closes it.
	 *
	 * The call and WhatsApp buttons are targeted directly rather than their
	 * wrapper: the burger sits in that same wrapper, and fading the wrapper
	 * both dimmed the X and gave it a stacking context, which trapped its
	 * z-index and dropped it back behind the drawer.
	 */
	body.epc-nav-open .epc-header__brand,
	body.epc-nav-open .epc-header__actions .epc-btn {
		opacity: 0.35;
		transition: opacity 320ms var(--epc-ease);
	}

	/* Header buttons collapse to icon circles to save width. */
	.epc-header__actions .epc-btn__label {
		display: none;
	}
}

/* =============================================================
   DESKTOP (>= 1200px) — horizontal bar with dropdown
   ============================================================= */

@media (min-width: 1200px) {

	.epc-nav {
		display: flex;
		align-items: center;
	}

	/*
	 * The gap has to clear the narrowest desktop case, not the roomiest.
	 * At exactly 1200px a vertical scrollbar leaves about 1185px of content
	 * width, and seven top level items at the old 1.4vw gap overran it by
	 * 16px. Tightened at the bottom of the range; the 1536px rule below
	 * restores the wider spacing where there is room for it.
	 */
	.epc-nav__list {
		display: flex;
		align-items: center;
		gap: clamp(0.7rem, 1.05vw, 1.5rem);
	}

	.epc-nav__item--depth-0 {
		position: relative;
		display: flex;
		align-items: center;
	}

	.epc-nav__item--depth-0 > .epc-nav__link {
		padding: 0.5rem 0;
		font-size: 0.8125rem;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	/* Signature gradient underline, growing from the left. */
	.epc-nav__item--depth-0 > .epc-nav__link::after {
		content: "";
		display: block;
		height: 2px;
		margin-top: 4px;
		background: var(--epc-gradient-title);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--epc-speed) var(--epc-ease);
	}

	.epc-nav__item--depth-0:hover > .epc-nav__link::after,
	.epc-nav__item--depth-0:focus-within > .epc-nav__link::after,
	.epc-nav__item--depth-0.is-current > .epc-nav__link::after {
		transform: scaleX(1);
	}

	.epc-nav__toggle {
		width: 20px;
		height: 20px;
		margin-left: 3px;
	}

	/* Dropdown panel. */
	.epc-nav__submenu {
		position: absolute;
		top: 100%;
		left: 50%;
		min-width: 250px;
		padding: 0.5rem 0;
		background: var(--epc-ink-950);
		border: 1px solid var(--epc-line);
		border-radius: 10px;
		box-shadow: var(--epc-shadow-menu);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 8px);
		transition: opacity var(--epc-speed) var(--epc-ease),
			transform var(--epc-speed) var(--epc-ease),
			visibility var(--epc-speed) var(--epc-ease);
	}

	/* Bridges the gap between the bar and the panel so hover does not drop. */
	.epc-nav__item--has-children::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 14px;
	}

	.epc-nav__item--has-children:hover > .epc-nav__submenu,
	.epc-nav__item--has-children:focus-within > .epc-nav__submenu,
	.epc-nav__item--has-children.is-open > .epc-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 12px);
	}

	.epc-nav__submenu .epc-nav__link {
		padding: 0.6rem 1.25rem;
		font-size: 0.8125rem;
		font-weight: 400;
		color: var(--epc-silver);
		white-space: nowrap;
		transition: color var(--epc-speed) var(--epc-ease),
			background-color var(--epc-speed) var(--epc-ease);
	}

	.epc-nav__submenu .epc-nav__link:hover,
	.epc-nav__submenu .epc-nav__link:focus-visible,
	.epc-nav__submenu .epc-nav__item.is-current > .epc-nav__link {
		color: var(--epc-white);
		background: var(--epc-wash);
	}

	/*
	 * Small active indicator on the current submenu item. The drawer already
	 * marks it with the left border below 1200px, so the dot is desktop only
	 * and the two never appear together. Space is reserved on every item so
	 * that the labels do not shift when the dot appears.
	 */
	.epc-nav__submenu .epc-nav__link {
		position: relative;
		padding-left: 1.85rem;
	}

	.epc-nav__submenu .epc-nav__item.is-current > .epc-nav__link::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 1.05rem;
		width: 5px;
		height: 5px;
		background: var(--epc-white);
		border-radius: 50%;
		transform: translateY(-50%);
		box-shadow: 0 0 0 3px rgb(255 255 255 / 14%);
	}

	/* Drawer-only pieces. */
	.epc-nav__contact,
	.epc-nav-scrim,
	.epc-burger {
		display: none !important;
	}
}

/* Roomier on large desktops. */
@media (min-width: 1536px) {
	.epc-nav__item--depth-0 > .epc-nav__link,
	.epc-nav__submenu .epc-nav__link {
		font-size: 0.875rem;
	}

	.epc-nav__list {
		gap: 1.75rem;
	}
}

/* =============================================================
   Header buttons — call + WhatsApp
   ============================================================= */

.epc-header__actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

@media (min-width: 480px) {
	.epc-header__actions {
		gap: 0.5rem;
	}
}

@media (min-width: 1200px) {
	.epc-header__actions {
		gap: 0.6rem;
		margin-left: clamp(0.75rem, 1.8vw, 1.75rem);
	}
}

.epc-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.7rem 1rem;
	overflow: hidden;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	/*
	 * Only genuinely animatable properties are listed. A gradient cannot be
	 * transitioned into a solid colour, so the hover fill is a separate layer
	 * (.epc-btn__fill) whose opacity is what actually animates.
	 */
	transition: color 260ms var(--epc-ease),
		box-shadow 260ms var(--epc-ease),
		transform 260ms var(--epc-ease);
}

/* The cross-fading hover layer. */
.epc-btn__fill {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 260ms var(--epc-ease);
	pointer-events: none;
}

/* Icon and label ride above the fill layer. */
.epc-btn__icon,
.epc-btn__label {
	position: relative;
	z-index: 1;
}

.epc-btn__icon {
	flex-shrink: 0;
}

.epc-btn:hover .epc-btn__fill,
.epc-btn:focus-visible .epc-btn__fill {
	opacity: 1;
}

.epc-btn:hover,
.epc-btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
}

.epc-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Primary — gradient fill, black label, fading to solid white on hover. */
.epc-btn--solid {
	color: var(--epc-black);
	background: var(--epc-gradient-title);
}

.epc-btn--solid .epc-btn__fill {
	background: var(--epc-white);
}

/*
 * Large size modifier, used by the hero and the CTA band. Lives here with the
 * component rather than in a section stylesheet, so any section can use it.
 */
.epc-btn--lg {
	padding: 1rem 1.6rem;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 10px;
}

@media (min-width: 768px) {
	.epc-btn--lg {
		padding: 1.1rem 2rem;
		font-size: 0.9375rem;
	}
}

/* Secondary — outlined, filling with the gradient on hover. */
.epc-btn--outline {
	color: var(--epc-white);
	background: transparent;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
}

.epc-btn--outline .epc-btn__fill {
	background: var(--epc-gradient-title);
}

.epc-btn--outline:hover,
.epc-btn--outline:focus-visible {
	color: var(--epc-black);
	box-shadow: inset 0 0 0 1px transparent, 0 6px 18px rgb(0 0 0 / 45%);
}

/*
 * Sizing below is header-specific — scoped to .epc-header__actions so the
 * .epc-btn component itself stays reusable elsewhere (the hero uses it at full
 * size). Without this scope every .epc-btn on the site would collapse into a
 * 38px circle under 1200px.
 */

/* Icon-only circles below the desktop breakpoint. */
@media (max-width: 1199.98px) {
	.epc-header__actions .epc-btn {
		width: 38px;
		height: 38px;
		padding: 0;
		border-radius: 50%;
	}

	@media (min-width: 480px) {
		.epc-header__actions .epc-btn {
			width: 42px;
			height: 42px;
		}
	}
}

@media (min-width: 1200px) {
	.epc-header__actions .epc-btn {
		padding: 0.7rem 1rem;
	}

	.epc-header__actions .epc-btn--outline {
		padding-inline: 0.9rem;
	}
}

@media (min-width: 1536px) {
	.epc-header__actions .epc-btn {
		font-size: 0.875rem;
		padding: 0.8rem 1.2rem;
	}
}

/* --- Burger --------------------------------------------------- */

.epc-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

@media (min-width: 480px) {
	.epc-burger {
		width: 44px;
		height: 44px;
	}
}

.epc-burger__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

@media (min-width: 480px) {
	.epc-burger__bars {
		width: 24px;
	}
}

.epc-burger__bars span {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	background: var(--epc-white);
	border-radius: 2px;
	transition: transform 260ms var(--epc-ease),
		opacity 160ms var(--epc-ease),
		top 260ms var(--epc-ease);
}

.epc-burger__bars span:nth-child(1) { top: 0; }
.epc-burger__bars span:nth-child(2) { top: 7px; }
.epc-burger__bars span:nth-child(3) { top: 14px; }

/* Morph to an X while open. */
.epc-burger[aria-expanded="true"] .epc-burger__bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.epc-burger[aria-expanded="true"] .epc-burger__bars span:nth-child(2) {
	opacity: 0;
}

.epc-burger[aria-expanded="true"] .epc-burger__bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* --- Page body ------------------------------------------------ */

body.epc-nav-open {
	overflow: hidden;
}

/* --- Reduced motion ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.epc-header,
	.epc-nav,
	.epc-nav__submenu,
	.epc-nav__link,
	.epc-nav__chevron,
	.epc-nav__toggle,
	.epc-nav__cta,
	.epc-nav-scrim,
	.epc-burger__bars span,
	.epc-header__logo,
	.epc-skip-link,
	.epc-btn,
	.epc-btn__fill {
		transition-duration: 0.01ms !important;
	}

	.epc-btn:hover,
	.epc-btn:focus-visible {
		transform: none;
	}
}

/* =============================================================
   Live offer marker

   A small green dot beside the offers link, with a ring that
   pulses outward. The only colour on an otherwise monochrome
   site, which is the point: it has to read as a status, not as
   decoration.
   ============================================================= */

.epc-nav__live {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 0.45rem;
	/* Sits with the text rather than on the baseline. */
	vertical-align: 0.05em;
	flex: none;
}

.epc-nav__live-dot {
	position: absolute;
	inset: 0;
	background: var(--epc-live);
	border-radius: 50%;
	box-shadow: 0 0 6px rgb(47 208 122 / 65%);
}

/*
 * The wave. A second ring scales out and fades, on its own element so the dot
 * itself stays put and crisp. transform and opacity only, so it runs on the
 * compositor and never reflows the menu.
 */
.epc-nav__live::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--epc-live);
	border-radius: 50%;
	opacity: 0.75;
	animation: epc-live-pulse 2s var(--epc-ease) infinite;
	pointer-events: none;
}

@keyframes epc-live-pulse {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}

	70% {
		transform: scale(2.8);
		opacity: 0;
	}

	100% {
		transform: scale(2.8);
		opacity: 0;
	}
}

/* The drawer puts the dot at the end of a full width row. */
@media (max-width: 1199.98px) {
	.epc-nav__submenu .epc-nav__link {
		display: flex;
		align-items: center;
	}

	.epc-nav__live {
		margin-left: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.epc-nav__live::after {
		animation: none;
		/* Without the pulse, a static ring still reads as a halo. */
		opacity: 0.28;
		transform: scale(2);
	}
}