/* ==========================================================================
   /about/ (WU-11, Phase 2) — loaded only on this page (functions.php `andrewegner_de_assets()`).
   Reference-led (Drive REFERENCE-layout-variant-2.png → tonality, editorial asymmetry, rhythm,
   thin technical rules, GLOCK-dominant brand hierarchy). Reuses tokens from style.css (:root) and
   shared components from main.css (.container, .section, .eyebrow, .eyebrow-row, .cta-link,
   .arrow, .will-reveal).

   Tone (WU-11.1): the SAME deep black / graphite / off-white family as the homepage — no
   About-specific blue. Every surface, rule and fade below resolves to a homepage token from
   style.css (:root); the only accent is the site's established cyan (--color-accent-refraction),
   used in thin marks. Darkness, spacing, thin rules and the photography itself carry the northern
   tone; no navy washes, no blue ambient fields, no synthetic imagery, no orbit/HUD graphics.

   PHOTOGRAPHY: every colour treatment below is a non-destructive CSS filter or overlay on the
   exact approved photographs (derivatives are resize + encode only — see inc/about.php). Crop /
   reframe = object-fit + object-position. Product gold stays natural: no hue rotation anywhere,
   no tint over the jewellery or the GLOCK bezel.
   ========================================================================== */

.about-page {
	/* WU-11.1: every value below is a homepage token — the page reads black, not blue. */
	--about-panel: var(--color-bg-raised);
	--about-rule: var(--color-rule);
	--about-rule-strong: var(--color-rule-strong);
	--about-ice: var(--color-accent-refraction);
	--about-ice-dim: rgba(127, 216, 224, 0.55);
	--about-frost: var(--color-accent-silver);
	--about-swap: 520ms;

	position: relative;
	background: var(--color-bg);
	overflow-x: clip;
}

.about-page .section {
	border-top-color: var(--about-rule);
	position: relative;
}

.about-index {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	color: var(--color-fg-dim);
}

.about-section-index {
	position: absolute;
	top: clamp(1.5rem, 2.5vw, 2.25rem);
	right: var(--container-pad);
}

.about-page .container {
	position: relative;
}

/* Stronger-than-homepage-but-calmer-than-approach entrance (main.js adds .will-reveal to .section). */
[data-motion] .about-page .will-reveal {
	transform: translate3d(0, 24px, 0);
	transition-duration: 1000ms;
}

[data-motion] .about-page .will-reveal.is-revealed {
	transform: none;
}

/* ==========================================================================
   01 — Hero
   ========================================================================== */

.about-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(34rem, 88vh, 54rem);
	isolation: isolate;
}

.about-hero__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(60vw, 64rem);
	z-index: -1;
	overflow: hidden;
	/* The frame melts into the page on the left and bottom — no hard photo edge against the copy.
	   Same edge-dissolve language as the homepage About portrait (main.css .about__portrait img). */
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0%, #000 34%),
		linear-gradient(0deg, transparent 0%, #000 22%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0%, #000 34%),
		linear-gradient(0deg, transparent 0%, #000 22%);
	mask-composite: intersect;
}

.about-hero__picture,
.about-hero__picture img {
	display: block;
	width: 100%;
	height: 100%;
}

.about-hero__picture img {
	object-fit: cover;
	object-position: 55% 34%;
	/* WU-11.1: the homepage portrait, used exactly as the homepage uses it — delivered dark
	   editorial grade, no filter, no cool wash, no brightening. Only the crop differs. */
	transform: translate3d(0, calc(var(--about-parallax, 0) * 1px), 0) scale(1.04);
	transform-origin: 50% 40%;
}

/* WU-11.1: black integration only — the portrait's own dark background does the work, exactly as
   on the homepage. No colour wash, no navy falloff; pure black at the frame edges and under the
   sticky header. */
.about-hero__grade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 20%),
		radial-gradient(125% 95% at 45% 45%, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
}

.about-hero__inner {
	width: 100%;
	padding-block: clamp(4rem, 9vw, 8rem);
}

.about-hero__copy {
	max-width: 34rem;
}

.about-hero__eyebrow {
	margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.about-hero__title {
	display: flex;
	flex-direction: column;
	font-size: var(--text-h1-hero);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.about-hero__lede {
	display: grid;
	gap: 0.9em;
	margin-top: clamp(2rem, 3.5vw, 3rem);
	padding-top: clamp(1.25rem, 2vw, 1.75rem);
	border-top: 1px solid var(--about-rule-strong);
	max-width: 30rem;
	font-size: var(--text-body-lg);
	line-height: 1.6;
	color: var(--color-fg-muted);
}

.about-hero__lede p:last-child {
	color: var(--color-fg);
}

/* Thin technical meridian on the right edge (the reference's decorative column, without its
   synthetic landscape). */
.about-hero__meridian {
	position: absolute;
	top: clamp(1.5rem, 3vw, 2.5rem);
	bottom: clamp(1.5rem, 3vw, 2.5rem);
	right: var(--container-pad);
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--about-rule-strong) 20%, var(--about-rule-strong) 80%, transparent);
}

.about-hero__meridian .about-index {
	position: absolute;
	top: 0;
	right: 0.75rem;
}

/* ==========================================================================
   02 — One line of work, several disciplines
   ========================================================================== */

.about-disciplines__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: start;
}

.about-disciplines__heading {
	font-size: var(--text-h2);
	font-weight: 400;
	line-height: 1.06;
	max-width: 12ch;
	text-wrap: balance;
}

.about-disciplines__body {
	display: grid;
	gap: 1.1em;
	padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
	border-left: 1px solid var(--about-rule-strong);
	font-size: var(--text-body-lg);
	line-height: 1.7;
	color: var(--color-fg-muted);
	max-width: 44rem;
}

/* ==========================================================================
   03 — Operator / Architect / Builder
   ========================================================================== */

/* The first row's own rule is the section divider — no doubled line. */
.about-page .about-roles {
	border-top: 0;
	padding-top: clamp(1rem, 2vw, 2rem);
}

.about-role {
	position: relative;
	display: grid;
	grid-template-columns: 4rem minmax(0, 3.2fr) minmax(0, 8fr);
	gap: clamp(1rem, 3vw, 3rem);
	align-items: baseline;
	padding-block: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--about-rule);
}

.about-role__marker {
	position: absolute;
	left: 0;
	top: -1px;
	width: 0;
	height: 1px;
	background: var(--gradient-accent);
	transition: width 700ms var(--ease-editorial);
}

.about-role__num {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	color: var(--color-fg-dim);
	transition: color var(--motion-base) var(--ease-editorial);
}

.about-role__name {
	font-size: var(--text-h3);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
	font-weight: 400;
	color: var(--color-fg-muted);
	transition: color var(--motion-base) var(--ease-editorial);
}

.about-role__text {
	display: grid;
	gap: 1rem;
	max-width: 46rem;
}

.about-role__body {
	line-height: 1.7;
	color: var(--color-fg-muted);
}

.about-role__means {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
	line-height: 1.45;
	color: var(--about-frost);
}

/* Emphasis: the row crossing the viewport middle (about.js) or under the pointer. Text colours stay
   AA in both states — only the silver→white step and the marker change. */
.about-role.is-active .about-role__marker,
.about-role:hover .about-role__marker {
	width: clamp(4rem, 10vw, 9rem);
}

.about-role.is-active .about-role__name,
.about-role:hover .about-role__name {
	color: var(--color-fg);
}

.about-role.is-active .about-role__num,
.about-role:hover .about-role__num {
	color: var(--about-ice);
}

/* ==========================================================================
   04 — Brands (GLOCK Watches featured; BERING + Luis & Freya support)
   ========================================================================== */

.about-brands {
	padding-top: clamp(4.5rem, 8vw, 8rem);
}

.about-brands__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

.brand {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	background: var(--about-panel);
	border: 1px solid var(--about-rule);
	outline-offset: 4px;
	transition: border-color var(--motion-base) var(--ease-editorial);
}

.brand--featured {
	grid-row: 1 / span 2;
}

.brand--support .brand__media {
	aspect-ratio: 4 / 3.1;
}

.brand--featured .brand__media {
	height: 100%;
	min-height: 28rem;
}

.brand__media {
	position: relative;
	overflow: hidden;
}

.brand__img {
	position: absolute;
	inset: 0;
	display: block;
}

.brand__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		opacity var(--about-swap) cubic-bezier(0.4, 0, 0.2, 1),
		transform 900ms var(--ease-editorial),
		filter var(--motion-base) var(--ease-editorial);
}

.brand__img--alternate img {
	opacity: 0;
	transform: scale(1.035);
}

/* The alternate sits above the primary; the primary settles very slightly as it fades out. */
.brand__img--primary {
	z-index: 0;
}

.brand__img--alternate {
	z-index: 1;
}

/* Crossfade — fine pointer hover, and keyboard focus on any device. */
@media (hover: hover) and (pointer: fine) {
	.brand:hover .brand__img--alternate img {
		opacity: 1;
		transform: none;
	}

	.brand:hover .brand__img--primary img {
		transform: scale(1.02);
	}

	.brand:hover {
		border-color: var(--about-rule-strong);
	}
}

.brand:focus-visible .brand__img--alternate img {
	opacity: 1;
	transform: none;
}

.brand:focus-visible {
	border-color: var(--about-ice-dim);
}

/* Touch / no-hover: no hover dependency. The primary stays; the alternate is not rendered (so the
   lazy image is never fetched) unless the block takes keyboard focus. */
@media (hover: none), (pointer: coarse) {
	.brand:not(:focus-visible) .brand__img--alternate {
		display: none;
	}
}

/* Per-photograph reframing (non-destructive; pixels untouched). The exposure/saturation values are
   unchanged from WU-11 — WU-11.1 introduces no new grading; only the frames each photograph is
   reframed into changed (BERING is now the featured block, GLOCK a support block). */
.brand--glock .brand__img--primary img {
	object-position: 54% 50%;
	filter: saturate(0.9) brightness(0.9) contrast(1.04);
}

.brand--glock .brand__img--alternate img {
	/* Whole case in frame in the narrower support block. */
	object-position: 50% 52%;
	filter: saturate(0.52) brightness(0.8) contrast(1.06);
}

.brand--bering .brand__img--primary img {
	/* Featured block is near-square, like the photograph — face and watch both stay in frame. */
	object-position: 50% 42%;
	filter: saturate(0.82) brightness(0.86) contrast(1.04);
}

.brand--bering .brand__img--alternate img {
	object-position: 54% 50%;
	filter: saturate(0.85) brightness(0.8) contrast(1.06);
}

.brand--luis-freya .brand__img--primary img {
	object-position: 50% 30%;
	filter: brightness(0.94) contrast(1.04);
}

.brand--luis-freya .brand__img--alternate img {
	object-position: 50% 50%;
	filter: brightness(0.96);
}

/* Shared vignette + legibility falloff for the caption. Blue-black, never a colour wash over the
   products themselves. */
.brand__shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.35) 26%, transparent 48%),
		radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}

.brand__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1rem, 2vw, 1.75rem);
}

.brand__name {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	font-weight: 400;
	color: var(--color-fg);
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6);
}

.brand--featured .brand__name {
	font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

/* WU-11.1 (third pass): official brand marks, served at their own proportions and scaled to a
   common OPTICAL weight — never to one raw pixel width. They are restrained card identifiers, so
   the photograph stays the dominant element; none is allowed to read as a headline. Clear space
   comes from the caption padding, which never drops below 1rem. */
.brand__name--mark {
	line-height: 0;
}

.brand__logo {
	display: block;
	/* Both axes are reset, so whichever one a brand rule sets, the other follows the mark's own
	   ratio instead of falling back to the width/height attributes. */
	width: auto;
	height: auto;
	filter: drop-shadow(0 1px 18px rgba(0, 0, 0, 0.6));
}

/* BERING: an extremely wide wordmark (10.87 : 1), so width is the binding constraint — capped at
   175px it lands ~16px tall, which is the restrained end of André's range once the mark's real
   proportions are respected. Going to 18–22px tall would need 196–239px of width. */
.brand--bering .brand__logo {
	width: clamp(8rem, 6rem + 5.5vw, 10.9375rem); /* 128px → 175px */
	max-width: 175px;
}

/* GLOCK: a compact stacked lockup (1.52 : 1) — sized by height; its width never approaches the
   125px cap. */
.brand--glock .brand__logo {
	height: clamp(1.5rem, 1.3rem + 0.45vw, 1.625rem); /* 24px → 26px */
	max-width: 125px;
}

/* Luis & Freya: the wordmark with the winged mark above it (3.63 : 1) — sized by height so its
   optical weight matches the other two rather than its raw width. */
.brand--luis-freya .brand__logo {
	height: clamp(1.125rem, 1rem + 0.35vw, 1.25rem); /* 18px → 20px */
	max-width: 170px;
}

/* Two thin ticks — which photograph is showing. Decorative (both images carry their own alt). */
.brand__pager {
	display: inline-flex;
	gap: 5px;
	padding-bottom: 0.5em;
}

.brand__pager span {
	display: block;
	width: 18px;
	height: 1px;
	background: var(--color-fg-dim);
	transition: background var(--motion-base) var(--ease-editorial);
}

.brand__pager span:first-child {
	background: var(--about-ice);
}

.brand:focus-visible .brand__pager span:first-child {
	background: var(--color-fg-dim);
}

.brand:focus-visible .brand__pager span:last-child {
	background: var(--about-ice);
}

@media (hover: hover) and (pointer: fine) {
	.brand:hover .brand__pager span:first-child {
		background: var(--color-fg-dim);
	}

	.brand:hover .brand__pager span:last-child {
		background: var(--about-ice);
	}
}

@media (hover: none), (pointer: coarse) {
	.brand__pager {
		display: none;
	}
}

/* ==========================================================================
   05 — How I think about AI
   ========================================================================== */

.about-thinking {
	overflow: hidden;
}

/* WU-11.1: the former blue ambient field is gone. What remains is a graphite lift in the same
   family as --color-bg-raised, so the panels below sit on a surface rather than a colour. */
.about-thinking__field {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.022));
}

.about-thinking__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(2rem, 5vw, 6rem);
	row-gap: clamp(2.5rem, 4vw, 4rem);
}

.about-thinking__heading {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent-silver);
	padding-top: 0.9rem;
}

.about-thinking__text {
	display: grid;
	gap: clamp(1.25rem, 2vw, 1.75rem);
}

.about-thinking__statement {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	line-height: 1.06;
	max-width: 16ch;
	text-wrap: balance;
}

.about-thinking__body {
	font-size: var(--text-body-lg);
	line-height: 1.7;
	color: var(--color-fg-muted);
	max-width: 42rem;
}

.about-thinking__panels {
	grid-column: 2;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

.about-panel {
	padding: clamp(1.25rem, 2vw, 1.75rem);
	border: 1px solid var(--about-rule);
	background: var(--color-bg-raised);
	line-height: 1.7;
	color: var(--color-fg-muted);
}

.about-panel__label {
	display: block;
	margin-bottom: 0.9rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--about-rule);
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-fg-dim);
}

.about-panel--under .about-panel__label {
	color: var(--about-ice);
}

.about-panel--under {
	border-color: var(--about-rule-strong);
	color: var(--color-fg);
}

/* ==========================================================================
   06 — In numbers that are true
   ========================================================================== */

.about-numbers__head {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.about-numbers__heading {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	line-height: 1.4;
}

.about-numbers__index {
	margin-left: auto;
}

.about-numbers__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-block: 1px solid var(--about-rule);
}

.about-numbers__list li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 2rem);
	border-left: 1px solid var(--about-rule);
}

.about-numbers__list li:first-child {
	border-left: 0;
	padding-left: 0;
}

.about-numbers__figure,
.about-numbers__statement {
	font-family: var(--font-display);
	font-size: var(--text-kpi);
	line-height: 1.15;
	color: var(--color-fg);
}

.about-numbers__statement {
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.about-numbers__detail {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-fg-muted);
}

/* ==========================================================================
   CTA
   ========================================================================== */

.about-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: end;
}

.about-cta__lede {
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
	line-height: 1.12;
	max-width: 20ch;
	text-wrap: balance;
}

.about-cta__actions {
	display: grid;
	gap: clamp(1.5rem, 2.5vw, 2rem);
	justify-items: start;
}

.about-cta__secondary a {
	font-size: 0.9375rem;
	color: var(--color-fg-muted);
	border-bottom: 1px solid var(--about-rule-strong);
	padding-bottom: 0.2em;
	transition: color var(--motion-fast) var(--ease-editorial), border-color var(--motion-fast) var(--ease-editorial);
}

.about-cta__secondary a:hover,
.about-cta__secondary a:focus-visible {
	color: var(--color-fg);
	border-color: var(--about-ice);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet — GLOCK stays first and largest (full width); the support blocks follow side by side. */
@media (max-width: 1024px) {
	.about-hero {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.about-hero__media {
		position: relative;
		inset: auto;
		width: 100%;
		/* Square like the original (face → watch fully in frame); on short/wide tablets the height
		   is capped and the crop falls on the plain studio backdrop at the sides. */
		aspect-ratio: 1 / 1;
		max-height: 78vh;
		-webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%);
		mask-image: linear-gradient(0deg, transparent 0%, #000 30%);
	}

	.about-hero__picture img {
		object-position: 55% 30%;
	}

	.about-hero__inner {
		margin-top: clamp(-7rem, -12vw, -4rem);
		padding-top: 0;
	}

	.about-hero__copy {
		max-width: 38rem;
	}

	.about-hero__meridian {
		display: none;
	}

	.about-brands__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.brand--featured {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	.brand--featured .brand__media {
		height: auto;
		min-height: 0;
		/* Square: the featured BERING photograph is square, so nothing is cropped away. */
		aspect-ratio: 1 / 1;
		max-height: 80vh;
	}

	.about-thinking__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-thinking__panels {
		grid-column: auto;
	}

	.about-numbers__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-numbers__list li:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.about-numbers__list li:nth-child(n + 3) {
		border-top: 1px solid var(--about-rule);
	}

	.about-cta__inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 860px) {
	.about-disciplines__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-disciplines__heading {
		max-width: 16ch;
	}

	.about-role {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		row-gap: 1rem;
	}

	.about-role__text {
		grid-column: 2;
	}
}

/* Mobile — one natural stack: GLOCK → BERING → Luis & Freya. */
@media (max-width: 640px) {
	.about-hero__inner {
		margin-top: -3.5rem;
		padding-bottom: 3.5rem;
	}

	.about-brands__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.brand--featured .brand__media {
		aspect-ratio: 1 / 1;
	}

	.brand--support .brand__media {
		aspect-ratio: 4 / 3.3;
	}

	.about-thinking__panels {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-numbers__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-numbers__list li {
		border-left: 0;
		padding-left: 0;
	}

	.about-numbers__list li + li {
		border-top: 1px solid var(--about-rule);
	}

	.about-section-index {
		top: 1.25rem;
	}
}

/* ==========================================================================
   Reduced motion — the same page, fully static. The image swap on hover/focus stays available
   but is instant (no crossfade, no scale); no parallax, no marker travel.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.brand__img img,
	.about-role__marker,
	.about-role__name,
	.about-role__num,
	.brand__pager span {
		transition: none !important;
	}

	.brand__img--alternate img,
	.brand:hover .brand__img--primary img {
		transform: none !important;
	}

	.about-hero__picture img {
		transform: scale(1.04) !important;
	}
}