/* ==================================================
   BIJJOU ADS
   Core Design System
================================================== */


/* ==================================================
   DESIGN TOKENS
================================================== */

:root {

	/* Brand */
	--color-obsidian: #0a0907;
	--color-gold: #d6a84b;
	--color-gold-light: #e8c66a;
	--color-champagne: #f2d98b;

	/* Surfaces */
	--color-ivory: #f8f6f1;
	--color-white: #ffffff;

	/* Text */
	--color-heading: #171612;
	--color-text: #696761;
	--color-muted: #8a877f;

	/* Borders */
	--color-border: rgba(23, 22, 18, 0.10);
	--color-border-gold: rgba(214, 168, 75, 0.28);

	/* Layout */
	--container-width: 1200px;
	--header-height: 78px;

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;

	/* Shadows */
	--shadow-soft:
		0 12px 40px rgba(10, 9, 7, 0.06);

	--shadow-button:
		0 10px 28px rgba(10, 9, 7, 0.15);
}


/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}


html {
	margin: 0;
	padding: 0;

	scroll-behavior: smooth;
}


body {
	margin: 0;
	padding: 0;

	background: var(--color-ivory);

	color: var(--color-text);

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	font-size: 16px;
	line-height: 1.6;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


body.menu-open {
	overflow: hidden;
}


img {
	display: block;

	max-width: 100%;
	height: auto;
}


a {
	color: inherit;
	text-decoration: none;
}


button,
input,
textarea,
select {
	font: inherit;
}


button {
	cursor: pointer;
}

/* ==================================================
   BIJJOU ADS HEADER
================================================== */

:root {
	--bijjou-black: #000000;
	--bijjou-gold: #d6a13f;
	--bijjou-gold-light: #e6bc67;

	--bijjou-white: #ffffff;

	--header-text: #d6d6d6;
	--header-muted: #9b9b9b;

	--header-border: rgba(214, 161, 63, 0.18);

	--container-width: 1200px;
	--header-height: 88px;
}


/* ==================================================
   HEADER
================================================== */

.site-header {
	position: sticky;

	top: 0;

	z-index: 1000;

	width: 100%;

	background: #000000;

	border-bottom:
		1px solid var(--header-border);
}


/* ==================================================
   HEADER CONTAINER
================================================== */

.header-container { 
	width: calc(100% - 64px); 
 
	max-width: var(--container-width); 
 
	height: var(--header-height); 
 
	margin: 0 auto; 
 
	display: flex; 
	align-items: center; 
 
	gap: 42px;

	position: relative;
}


/* ==================================================
   LOGO
================================================== */

.site-branding {
	display: flex;
	align-items: center;

	flex-shrink: 0;
}


.site-logo {
	display: flex;
	align-items: center;

	line-height: 0;
}


.site-logo img {
	display: block;

	width: auto;
	height: 70px;

	max-width: 190px;

	object-fit: contain;
}


/* ==================================================
   DESKTOP NAVIGATION
================================================== */

.desktop-navigation {
	position: absolute;

	left: 50%;

	transform: translateX(-50%);
}


.primary-menu {
	display: flex;
	align-items: center;

	gap: 34px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.primary-menu li {
	position: relative;

	margin: 0;
	padding: 0;

	list-style: none;
}


.primary-menu a {
	position: relative;

	height: var(--header-height);

	display: flex;
	align-items: center;

	color: var(--header-text);

	font-size: 14px;
	font-weight: 500;

	line-height: 1;

	white-space: nowrap;

	transition:
		color 180ms ease;
}


.primary-menu a:hover {
	color: var(--bijjou-gold);
}


/* Active navigation */

.primary-menu > li > a::after {
	content: "";

	position: absolute;

	left: 50%;
	bottom: 20px;

	width: 0;
	height: 2px;

	border-radius: 999px;

	background: var(--bijjou-gold);

	transform: translateX(-50%);

	transition:
		width 180ms ease;
}


.primary-menu > li > a:hover::after,
.primary-menu > .current-menu-item > a::after,
.primary-menu > .current_page_item > a::after {
	width: 22px;
}


.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--bijjou-white);

	font-weight: 600;
}


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

.header-actions {
	display: flex;
	align-items: center;

	flex-shrink: 0;

	margin-left: auto;
}


.header-cta {
	min-height: 46px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 9px;

	padding:
		0
		21px;

	border:
		1px solid #d6a13f;

	border-radius: 8px;

	background: #d6a13f;

	color: #000000;

	font-size: 14px;
	font-weight: 650;

	line-height: 1;

	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}


.header-cta svg {
	display: block;

	width: 17px;
	height: 17px;

	flex-shrink: 0;

	transition:
		transform 180ms ease;
}


.header-cta:hover {
	background: var(--bijjou-gold-light);

	border-color: var(--bijjou-gold-light);

	color: #000000;

	transform: translateY(-1px);

	box-shadow:
		0 10px 30px
		rgba(214, 161, 63, 0.22);
}


.header-cta:hover svg {
	transform: translateX(3px);
}


/* ==================================================
   MOBILE MENU BUTTON
================================================== */

.menu-toggle {
	display: none;

	width: 44px;
	height: 44px;

	margin-left: auto;
	padding: 0;

	border:
		1px solid rgba(255, 255, 255, 0.12);

	border-radius: 8px;

	background: transparent;

	align-items: center;
	justify-content: center;
	flex-direction: column;

	gap: 5px;

	color: var(--bijjou-white);

	cursor: pointer;

	transition:
		border-color 180ms ease,
		background-color 180ms ease;
}


.menu-toggle:hover {
	border-color:
		rgba(214, 161, 63, 0.5);

	background:
		rgba(214, 161, 63, 0.08);
}


.menu-toggle span {
	display: block;

	width: 22px;
	height: 2px;

	border-radius: 999px;

	background: currentColor;

	transition:
		transform 200ms ease,
		opacity 200ms ease;
}


.menu-toggle.is-active span:nth-child(1) {
	transform:
		translateY(7px)
		rotate(45deg);
}


.menu-toggle.is-active span:nth-child(2) {
	opacity: 0;
}


.menu-toggle.is-active span:nth-child(3) {
	transform:
		translateY(-7px)
		rotate(-45deg);
}


/* ==================================================
   MOBILE NAVIGATION
================================================== */

.mobile-navigation {
	display: none;
}


.mobile-navigation-inner {
	width: calc(100% - 40px);

	max-width: 600px;

	margin: 0 auto;

	padding:
		16px
		0
		28px;
}


.mobile-menu {
	margin: 0;
	padding: 0;

	list-style: none;
}


.mobile-menu li {
	margin: 0;
	padding: 0;

	list-style: none;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.10);
}


.mobile-menu a {
	min-height: 60px;

	display: flex;
	align-items: center;

	color: #d7d7d7;

	font-size: 16px;
	font-weight: 500;

	transition:
		color 180ms ease;
}


.mobile-menu a:hover,
.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a {
	color: var(--bijjou-gold);
}


.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a {
	font-weight: 650;
}


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

.mobile-navigation-cta {
	width: 100%;
	min-height: 52px;

	margin-top: 24px;

	display: flex;
	align-items: center;
	justify-content: center;

	gap: 9px;

	border-radius: 8px;

	background: #d6a13f;

	color: #000000;

	font-size: 15px;
	font-weight: 650;

	transition:
		background-color 180ms ease;
}


.mobile-navigation-cta:hover {
	background:
		var(--bijjou-gold-light);
}


.mobile-navigation-cta svg {
	display: block;

	width: 17px;
	height: 17px;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 900px) {

	:root {
		--header-height: 76px;
	}


	.header-container {
		width:
			calc(100% - 40px);
	}


	.site-logo img {
		height: 58px;

		max-width: 160px;
	}


	.desktop-navigation,
	.header-actions {
		display: none;
	}


	.menu-toggle {
		display: flex;
	}


	.mobile-navigation {
		position: fixed;

		top: var(--header-height);
		right: 0;
		left: 0;

		z-index: 999;

		display: block;

		height:
			calc(
				100dvh -
				var(--header-height)
			);

		background: #000000;

		border-top:
			1px solid var(--header-border);

		opacity: 0;
		visibility: hidden;

		transform:
			translateY(-8px);

		pointer-events: none;

		transition:
			opacity 200ms ease,
			visibility 200ms ease,
			transform 200ms ease;
	}


	.mobile-navigation.is-open {
		opacity: 1;
		visibility: visible;

		transform: translateY(0);

		pointer-events: auto;
	}

}


@media (max-width: 480px) {

	.header-container {
		width:
			calc(100% - 32px);
	}


	.site-logo img {
		height: 52px;

		max-width: 145px;
	}


	.mobile-navigation-inner {
		width:
			calc(100% - 32px);
	}

}


/* ==================================================
   PREMIUM SITE FOOTER
================================================== */

.site-footer {
	position: relative;
	overflow: hidden;

	background: #000000;
	color: #ffffff;

	border-top:
		1px solid
		rgba(214, 161, 63, 0.22);
}


/* Gold atmosphere */

.site-footer::before {
	content: "";

	position: absolute;

	top: -360px;
	left: -280px;

	width: 720px;
	height: 720px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.11) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


.site-footer::after {
	content: "";

	position: absolute;

	right: -280px;
	bottom: -380px;

	width: 680px;
	height: 680px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.06) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


/* ==================================================
   CONTAINER
================================================== */

.site-footer-container {
	position: relative;
	z-index: 1;

	width: calc(100% - 64px);

	max-width:
		var(
			--container-width,
			1200px
		);

	margin: 0 auto;
}


/* ==================================================
   MAIN FOOTER
================================================== */

.site-footer-main {
	display: grid;

	grid-template-columns:
		minmax(270px, 0.9fr)
		minmax(0, 1.7fr);

	gap:
		clamp(
			70px,
			9vw,
			140px
		);

	padding:
		84px
		0
		72px;
}


/* ==================================================
   BRAND
================================================== */

.footer-brand {
	max-width: 350px;
}


.footer-logo {
	display: inline-flex;

	width: 190px;

	text-decoration: none;
}


.footer-logo img {
	display: block;

	width: 100%;
	height: auto;

	object-fit: contain;
}


/* Description */

.footer-brand-description {
	max-width: 320px;

	margin:
		25px
		0
		0;

	color: #96928a;

	font-size: 14px;

	line-height: 1.75;
}


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

.footer-main-cta {
	display: inline-flex;
	align-items: center;

	gap: 10px;

	margin-top: 27px;

	color: #d6a13f;

	font-size: 14px;
	font-weight: 650;

	line-height: 1;

	text-decoration: none;

	transition:
		color 180ms ease;
}


.footer-main-cta svg {
	flex-shrink: 0;

	transition:
		transform 180ms ease;
}


.footer-main-cta:hover {
	color: #ffffff;
}


.footer-main-cta:hover svg {
	transform: translateX(4px);
}


/* ==================================================
   NAVIGATION
================================================== */

.footer-navigation {
	display: grid;

	grid-template-columns:
		0.72fr
		1.35fr
		1fr;

	gap:
		clamp(
			38px,
			5vw,
			72px
		);
}


/* ==================================================
   FOOTER COLUMNS
================================================== */

.footer-column h2 {
	margin:
		0
		0
		24px;

	color: #ffffff;

	font-size: 12px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.11em;

	text-transform: uppercase;
}


.footer-column ul {
	display: grid;

	gap: 14px;

	margin: 0;

	padding: 0;

	list-style: none;
}


.footer-column li {
	margin: 0;
	padding: 0;
}


.footer-column ul a {
	display: inline-block;

	color: #97938b;

	font-size: 14px;

	line-height: 1.5;

	text-decoration: none;

	transition:
		color 180ms ease,
		transform 180ms ease;
}


.footer-column ul a:hover {
	color: #d6a13f;

	transform: translateX(3px);
}


/* ==================================================
   START HERE
================================================== */

.footer-column-contact {
	max-width: 270px;
}


.footer-contact-description {
	margin: 0;

	color: #8f8b84;

	font-size: 13px;

	line-height: 1.72;
}


.footer-contact-action {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	margin-top: 20px;

	padding-bottom: 5px;

	border-bottom:
		1px solid
		rgba(214, 161, 63, 0.55);

	color: #ffffff;

	font-size: 13px;
	font-weight: 650;

	line-height: 1.4;

	text-decoration: none;

	transition:
		color 180ms ease,
		border-color 180ms ease;
}


.footer-contact-action svg {
	flex-shrink: 0;

	color: #d6a13f;

	transition:
		transform 180ms ease;
}


.footer-contact-action:hover {
	color: #d6a13f;

	border-color: #d6a13f;
}


.footer-contact-action:hover svg {
	transform: translateX(3px);
}


/* ==================================================
   BUSINESS / LEGAL IDENTITY
================================================== */

.footer-business-identity {
	padding:
		22px
		0;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.10);

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.10);
}


.footer-business-identity-line {
	display: flex;
	align-items: center;

	gap: 10px;
}


.footer-business-dot {
	width: 6px;
	height: 6px;

	flex: 0 0 6px;

	border-radius: 50%;

	background: #d6a13f;

	box-shadow:
		0 0 14px
		rgba(214, 161, 63, 0.45);
}


.footer-business-identity p {
	margin: 0;

	color: #77736d;

	font-size: 12px;

	line-height: 1.6;
}


.footer-business-identity strong {
	color: #bcb8b0;

	font-weight: 650;
}


/* ==================================================
   FOOTER BOTTOM
================================================== */

.site-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;

	padding:
		25px
		0
		30px;
}


/* ==================================================
   COPYRIGHT
================================================== */

.footer-copyright p {
	margin: 0;

	color: #68655f;

	font-size: 12px;

	line-height: 1.5;
}


/* ==================================================
   LEGAL NAVIGATION
================================================== */

.footer-legal {
	display: flex;
	align-items: center;

	gap: 22px;

	flex-wrap: wrap;
}


.footer-legal a {
	color: #77736c;

	font-size: 12px;

	line-height: 1.5;

	text-decoration: none;

	transition:
		color 180ms ease;
}


.footer-legal a:hover {
	color: #d6a13f;
}


/* ==================================================
   BACK TO TOP
================================================== */

.footer-back-top {
	display: inline-flex;
	align-items: center;

	gap: 7px;
}


.footer-back-top svg {
	flex-shrink: 0;

	transition:
		transform 180ms ease;
}


.footer-back-top:hover svg {
	transform: translateY(-3px);
}


/* ==================================================
   ACCESSIBILITY
================================================== */

.footer-logo:focus-visible,
.footer-main-cta:focus-visible,
.footer-column a:focus-visible,
.footer-contact-action:focus-visible,
.footer-legal a:focus-visible {
	outline:
		2px solid
		#d6a13f;

	outline-offset: 5px;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

	.site-footer-main {
		grid-template-columns: 1fr;

		gap: 58px;
	}


	.footer-brand {
		max-width: 520px;
	}


	.footer-brand-description {
		max-width: 480px;
	}


	.footer-navigation {
		grid-template-columns:
			0.75fr
			1.25fr
			1fr;
	}

}


/* ==================================================
   SMALL TABLET
================================================== */

@media (max-width: 800px) {

	.site-footer-container {
		width:
			calc(100% - 40px);
	}


	.footer-navigation {
		grid-template-columns:
			1fr
			1fr;

		row-gap: 48px;
	}


	.footer-column-contact {
		grid-column:
			1
			/
			-1;

		max-width: 500px;
	}


	.site-footer-bottom {
		align-items: flex-start;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

	.site-footer-container {
		width:
			calc(100% - 32px);
	}


	.site-footer-main {
		padding:
			64px
			0
			52px;

		gap: 46px;
	}


	.footer-logo {
		width: 170px;
	}


	.footer-brand-description {
		margin-top: 20px;

		font-size: 14px;
	}


	.footer-navigation {
		grid-template-columns: 1fr;

		gap: 38px;
	}


	.footer-column-contact {
		grid-column: auto;
	}


	.footer-column h2 {
		margin-bottom: 19px;
	}


	.footer-column ul {
		gap: 12px;
	}


	.footer-business-identity {
		padding:
			20px
			0;
	}


	.footer-business-identity-line {
		align-items: flex-start;
	}


	.footer-business-dot {
		margin-top: 6px;
	}


	.site-footer-bottom {
		flex-direction: column;

		align-items: flex-start;

		gap: 18px;

		padding:
			23px
			0
			28px;
	}


	.footer-legal {
		width: 100%;

		gap:
			12px
			20px;
	}


	.footer-back-top {
		margin-left: auto;
	}

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 400px) {

	.footer-logo {
		width: 155px;
	}


	.footer-back-top {
		width: 100%;

		margin-left: 0;

		margin-top: 4px;
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.footer-main-cta,
	.footer-main-cta svg,
	.footer-column a,
	.footer-contact-action,
	.footer-contact-action svg,
	.footer-legal a,
	.footer-back-top svg {
		transition: none;
	}

}

/* ==================================================
   404 PAGE
================================================== */

.error-page {
    min-height: calc(100vh - var(--header-height, 88px));
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(214, 161, 63, 0.11),
            transparent 32%
        ),
        #f8f6f1;
    color: #000000;
}

.error-section {
    position: relative;
    min-height: calc(100vh - var(--header-height, 88px));
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(90px, 10vw, 150px) 0;
}

.error-section::before {
    content: "404";
    position: absolute;
    top: 50%;
    right: -0.04em;
    transform: translateY(-50%);
    font-size: clamp(220px, 34vw, 620px);
    font-weight: 800;
    line-height: 0.72;
    letter-spacing: -0.08em;
    color: rgba(0, 0, 0, 0.025);
    pointer-events: none;
    user-select: none;
}

.error-container {
    position: relative;
    z-index: 2;
    width: calc(100% - clamp(48px, 10vw, 180px));
    max-width: 1440px;
    margin-inline: auto;
}

.error-code {
    margin: 0 0 26px;
    font-size: clamp(82px, 10vw, 150px);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.07em;
    color: #d6a13f;
}

.error-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.error-eyebrow::before {
    content: "";
    width: 38px;
    height: 1px;
    background: #d6a13f;
}

.error-title {
    max-width: 920px;
    margin: 0;
    font-size: clamp(42px, 5.8vw, 86px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
    color: #000000;
}

.error-description {
    max-width: 680px;
    margin: 34px 0 0;
    color: #6f6c66;
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 400;
    line-height: 1.75;
}

.error-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 44px;
}

.error-primary-action,
.error-secondary-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 28px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.error-primary-action {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

.error-primary-action:hover {
    background: #d6a13f;
    border-color: #d6a13f;
    color: #000000;
    transform: translateY(-2px);
}

.error-secondary-action {
    background: transparent;
    color: #000000;
    border-color: rgba(0, 0, 0, 0.22);
}

.error-secondary-action:hover {
    background: #ffffff;
    border-color: #000000;
    color: #000000;
    transform: translateY(-2px);
}

.error-primary-action:focus-visible,
.error-secondary-action:focus-visible,
.error-support a:focus-visible {
    outline: 3px solid rgba(214, 161, 63, 0.45);
    outline-offset: 4px;
}

.error-support {
    margin: 32px 0 0;
    color: #8f8c86;
    font-size: 14px;
    line-height: 1.7;
}

.error-support a {
    position: relative;
    color: #000000;
    font-weight: 600;
    text-decoration: none;
}

.error-support a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: #d6a13f;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 180ms ease;
}

.error-support a:hover::after {
    transform: scaleX(0.45);
}


/* ==================================================
   404 PAGE — TABLET
================================================== */

@media (max-width: 900px) {

    .error-page,
    .error-section {
        min-height: calc(100vh - var(--header-height, 76px));
    }

    .error-section {
        padding: 90px 0;
    }

    .error-container {
        width: calc(100% - 48px);
    }

    .error-section::before {
        top: 35%;
        right: -0.08em;
        font-size: clamp(220px, 55vw, 420px);
    }

    .error-title {
        max-width: 720px;
    }

    .error-description {
        max-width: 620px;
    }
}


/* ==================================================
   404 PAGE — MOBILE
================================================== */

@media (max-width: 600px) {

    .error-section {
        align-items: flex-start;
        padding: 76px 0 84px;
    }

    .error-container {
        width: calc(100% - 36px);
    }

    .error-code {
        margin-bottom: 22px;
        font-size: clamp(70px, 24vw, 104px);
    }

    .error-eyebrow {
        gap: 10px;
        margin-bottom: 22px;
        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .error-eyebrow::before {
        width: 26px;
    }

    .error-title {
        font-size: clamp(38px, 12vw, 58px);
        line-height: 1;
        letter-spacing: -0.05em;
    }

    .error-description {
        margin-top: 26px;
        font-size: 16px;
        line-height: 1.7;
    }

    .error-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 36px;
    }

    .error-primary-action,
    .error-secondary-action {
        width: 100%;
        min-height: 54px;
    }

    .error-support {
        margin-top: 28px;
    }

    .error-section::before {
        top: auto;
        right: -0.08em;
        bottom: 28px;
        transform: none;
        font-size: 72vw;
        opacity: 0.75;
    }
}


/* ==================================================
   404 PAGE — SMALL MOBILE
================================================== */

@media (max-width: 400px) {

    .error-container {
        width: calc(100% - 28px);
    }

    .error-section {
        padding-top: 64px;
    }

    .error-title {
        font-size: 36px;
    }
}


/* ==================================================
   404 PAGE — REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .error-primary-action,
    .error-secondary-action,
    .error-support a::after {
        transition: none;
    }

    .error-primary-action:hover,
    .error-secondary-action:hover {
        transform: none;
    }
}