/* Apex's own masthead: a standalone monogram and one calm group of links.
   The film and the following introduction still share one continuous stage. */

:root {
	--film-frame: clamp(14px, 2.25vw, 40px);
	--film-radius: 14px;
	--film-inset: clamp(24px, 2.25vw, 40px);

	--nav-dock-top: 12px;
	--nav-edge: calc(var(--film-frame) + clamp(8px, 1.5vw, 24px));

	--nav-surface: rgba(245, 244, 240, 0.58);
	--nav-ink: #000000;
}

body {
	background: #fff;
}

html {
	scroll-padding-top: 100px;
}

/* =========================================================
   NOTICE
   ========================================================= */

.site-notice {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 36px;

	margin: 8px var(--film-frame);
	padding: 8px 16px;

	border: 1px solid #11111140;
	border-radius: 6px;

	background: #fff;

	color: #111111;

	text-align: center;
}

.site-notice p {
	margin: 0;

	font:
		500 0.75rem/1.5 Arial,
		sans-serif;

	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* =========================================================
   MAIN / HERO
   ========================================================= */

main#top {
	padding-top: 0;
}

.hero-stage {
	margin-inline: var(--film-frame);

	border-radius: var(--film-radius);
}

.hero-backdrop {
	border-radius: inherit;
}

.hero-stage .hero {
	--hero-inset: var(--film-inset);

	min-height: calc(100svh - 64px);

	border-radius: 14px 14px 0 0;
}

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

.hero__nav {
	--nav-top: 56px;

	inset: var(--nav-top) var(--nav-edge) auto;

	width: auto;
	max-width: none;

	min-height: 82px;

	margin: 0;

	padding: 12px var(--film-inset) !important;

	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;

	gap: 40px;

	border: 0;
	border-radius: 12px;

	background: transparent;

	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);

	box-shadow: none;

	transition:
		background-color 320ms ease,
		backdrop-filter 320ms ease,
		-webkit-backdrop-filter 320ms ease;
}

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

.hero__nav .hero__logo {
	grid-column: 1;
	grid-row: 1;

	display: block;

	min-height: 0;

	width: 42px;

	margin: 0;

	color: #fff;

	transition: color 320ms ease;
}

.hero__brand-mark {
    display: block;
    width: 150%;
    aspect-ratio: 1 / 1;

    background: url("https://apexbergen.no/wp-content/uploads/2020/03/Site-Logo.png") center / contain no-repeat;

    -webkit-mask: none;
    mask: none;
	filter: brightness(0); 
}

/* =========================================================
   NAV LINKS
   ========================================================= */

.hero__nav-actions,
.hero__nav-links {
	display: flex;

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

	gap: clamp(24px, 2.6vw, 44px);
}

.hero__nav .hero__nav-link,
.hero__menu-toggle {
	display: inline-flex;

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

	min-height: 44px;

	color: #fff;

	font:
		600 0.9375rem/1.3 Arial,
		sans-serif;

	letter-spacing: 0;
	text-transform: none;

	text-shadow: none;

	transition:
		color 320ms ease,
		background-color 220ms ease,
		border-color 220ms ease,
		opacity 220ms ease,
		transform 220ms ease;
}

.hero__nav-link::after {
	bottom: 5px;
	height: 1px;
}

/* =========================================================
   CONTACT
   ========================================================= */

.hero__nav .hero__contact {
	min-width: 110px;

	padding: 10px 24px;

	border: 1px solid #ffffffa6;
	border-radius: 999px !important;
}

.hero__nav .hero__contact::after {
	display: none;
}

.hero__nav .hero__contact:hover {
	background: #ffffff1f;

	border-color: #fff;
}

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

.hero__menu-toggle {
	display: none;

	padding: 8px 0;

	border: 0;

	background: none;

	cursor: pointer;
}

/* =========================================================
   SCROLLED / OPEN NAV
   ========================================================= */

.hero__nav.is-scrolled,
.hero__nav.is-menu-open,
.hero__nav:focus-within {
	background: var(--nav-surface);

	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);

	border: 0;

	box-shadow: none;
}

.hero__nav:is(.is-scrolled, .is-menu-open, :focus-within)
	:is(a, .hero__menu-toggle) {
	color: var(--nav-ink);
}

.hero__nav:is(.is-scrolled, .is-menu-open, :focus-within) .hero__contact {
	border-color: #11111166;
}

.hero__nav:is(.is-scrolled, .is-menu-open, :focus-within) .hero__contact:hover {
	background: #1111110a;

	border-color: #111111;
}

/* =========================================================
   FOCUS
   ========================================================= */

.hero__nav :is(a, button):focus-visible {
	outline: 2px solid currentColor;

	outline-offset: 5px;
}

/* =========================================================
   FALLBACK
   ========================================================= */

@supports not (
	(backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
	:root {
		--nav-surface: rgba(245, 244, 240, 0.84);
	}
}

/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-stage .hero__content {
	padding: clamp(180px, 23svh, 260px) var(--film-inset) clamp(40px, 5svh, 64px) !important;
}

.hero-stage .hero-stories {
	width: min(100%, 960px);
}

.hero-stage .hero__headline {
	max-width: min(100%, 900px) !important;

	font-size: clamp(2.25rem, 3.45vw, 3.75rem) !important;

	line-height: 1.12 !important;

	letter-spacing: -0.035em !important;

	text-wrap: pretty;

	text-shadow: none;
}

.hero-stage .hero-stories__statement {
	max-width: 900px;

	font:
		normal 400 clamp(2.125rem, 3.2vw, 3.5rem) / 1.15 Arial,
		sans-serif;

	letter-spacing: -0.03em;

	margin-bottom: 22px;

	text-shadow: none;
}

.hero-stage .hero-stories__solution-label {
	font-size: 0.8125rem;

	color: #fff;

	margin-bottom: 5px;
}

.hero-stage .hero-stories__slide p {
	max-width: 60ch;

	font-size: clamp(1rem, 1.25vw, 1.125rem);

	line-height: 1.55;
}

.hero-stage .hero-stories__actions {
	margin-top: 28px;
}

.hero-stage .hero__cta.apex-button {
	--button-height: 42px;
	--button-padding: 8px 28px;
	--button-font-size: 1rem;

	--button-border: #ffffffd9;

	--button-hover-background: #ffffff1f;
	--button-hover-border: #fff;

	text-transform: uppercase !important;

	letter-spacing: 0.01em !important;

	border-width: 1.25px !important;
}

/* =========================================================
   COLLAPSED MENU
   1180px AND BELOW
   ========================================================= */

/* =========================================================
   COLLAPSED MENU
   1180px AND BELOW
   ========================================================= */

@media (max-width: 1180px) {
	.hero__nav {
		min-height: 72px;

		padding-block: 12px !important;

		gap: 20px;

		isolation: isolate;
		overflow: visible;

		z-index: 1000;
	}

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

	.hero__nav .hero__logo {
		position: relative;
		z-index: 4;

		width: 34px;
	}

	/* =====================================================
	   ACTIONS
	   ===================================================== */

	.hero__nav-actions {
		gap: 22px;
	}

	.hero__nav .hero__contact {
		position: relative;
		z-index: 4;

		min-width: 0;

		padding: 9px 20px;
	}

	.hero__nav .hero__nav-link,
	.hero__menu-toggle {
		font-size: 0.875rem;
	}

	.hero__menu-toggle {
		position: relative;
		z-index: 4;
	}

	.hero__nav:not(.is-menu-ready) .hero__nav-actions {
		flex-wrap: wrap;

		gap: 12px;
	}

	.hero__nav.is-menu-ready .hero__menu-toggle {
		display: inline-flex;
	}

	/* =====================================================
	   NAV GLASS BACKGROUND
	   ===================================================== */

	.hero__nav::before {
		content: "";

		position: absolute;

		inset: 0;

		z-index: 0;

		border-radius: inherit;

		background: transparent;

		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);

		pointer-events: none;

		transition:
			background-color 320ms ease,
			backdrop-filter 320ms ease,
			-webkit-backdrop-filter 320ms ease,
			border-radius 220ms ease;
	}

	.hero__nav.is-scrolled::before,
	.hero__nav.is-menu-open::before,
	.hero__nav:focus-within::before {
		background: var(--nav-surface);

		-webkit-backdrop-filter: blur(12px) saturate(110%);

		backdrop-filter: blur(12px) saturate(110%);
	}

	/*
		Когда меню открывается,
		верхняя панель становится верхней частью
		единого блока.

		Нижние углы больше не скруглены.
	*/

	.hero__nav.is-menu-open {
		border-radius: 12px 12px 0 0;
	}

	.hero__nav.is-menu-open::before {
		border-radius: 12px 12px 0 0;
	}

	/*
		Сам nav не должен создавать второй
		backdrop context.
	*/

	.hero__nav.is-scrolled,
	.hero__nav.is-menu-open,
	.hero__nav:focus-within {
		background: transparent;

		-webkit-backdrop-filter: none;
		backdrop-filter: none;

		box-shadow: none;
	}

	/* =====================================================
	   DROPDOWN
	   SAME WIDTH AS HERO NAV
	   ===================================================== */

	.hero__nav.is-menu-ready .hero__nav-links {
		position: absolute;

		/*
			Dropdown начинается прямо из нижнего края nav.
			-1px убирает возможную тонкую щель.
		*/
		top: calc(100% - 1px);

		/*
			ВАЖНО:
			ровно та же ширина, что и hero__nav.
		*/
		left: 0;
		right: 0;

		width: auto !important;
		max-width: none !important;

		height: auto !important;
		min-height: 0 !important;
		max-height: none;

		display: flex;
		flex-direction: column;

		align-items: flex-start;
		justify-content: flex-start;

		gap: 2px;

		/*
			Те же горизонтальные внутренние отступы,
			что у navbar.
		*/
		padding: 14px var(--film-inset) 20px;

		margin: 0;

		border: 0;

		/*
			Верхние углы = 0,
			потому что dropdown растёт прямо
			из верхней navbar-панели.
		*/
		border-radius: 0 0 12px 12px;

		/*
			Та же glass-поверхность.
		*/
		background: var(--nav-surface);

		-webkit-backdrop-filter: blur(18px) saturate(115%);

		backdrop-filter: blur(18px) saturate(115%);

		/*
			Только очень лёгкая нижняя глубина.
			Сверху тени нет, чтобы панели
			не выглядели раздельными.
		*/
		box-shadow: 0 14px 30px rgba(17, 17, 17, 0.035);

		overflow: visible;

		z-index: 2;
	}

	/* =====================================================
	   CLOSED
	   ===================================================== */

	.hero__nav.is-menu-ready:not(.is-menu-open) .hero__nav-links {
		display: none;
	}

	/* =====================================================
	   OPEN
	   ===================================================== */

	.hero__nav.is-menu-open .hero__nav-links {
		display: flex;
	}

	/* =====================================================
	   LINKS
	   ===================================================== */

	.hero__nav.is-menu-open .hero__nav-links .hero__nav-link {
		position: relative;

		width: auto !important;

		max-width: 100%;

		min-height: 40px;

		display: inline-flex;

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

		padding: 6px 0;

		border: 0;
		border-radius: 0;

		background: transparent;

		color: #111;

		font-size: 0.9rem;
		font-weight: 500;

		line-height: 1.3;

		text-decoration: none;

		opacity: 1;

		transition:
			opacity 180ms ease,
			transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* Убираем desktop underline */

	.hero__nav.is-menu-open .hero__nav-links .hero__nav-link::after {
		content: none;

		display: none;
	}

	.hero__nav.is-menu-open .hero__nav-links .hero__nav-link:hover {
		background: transparent;

		opacity: 0.55;

		transform: translateX(4px);
	}

	/* =====================================================
	   ACTIVE PAGE
	   ===================================================== */

	.hero__nav.is-menu-open
		.hero__nav-links
		.hero__nav-link[aria-current="page"] {
		font-weight: 600;

		opacity: 1;
	}

	.hero__nav.is-menu-open
		.hero__nav-links
		.hero__nav-link[aria-current="page"]::before {
		content: "";

		position: absolute;

		left: -14px;

		top: 9px;
		bottom: 9px;

		width: 2px;

		border-radius: 999px;

		background: #111;
	}

	/* =====================================================
	   CONTACT
	   ===================================================== */

	.hero__nav.is-menu-open .hero__contact {
		color: #111;

		border-color: #11111166;
	}
}

@media (max-width: 620px) {
	:root {
		--film-frame: 12px;
		--film-radius: 10px;
		--film-inset: 20px;
		--nav-dock-top: 8px;
	}

	html {
		scroll-padding-top: 92px;
	}

	main#top {
		padding-top: 0;
	}

	.hero-stage,
	.hero-backdrop,
	.hero__nav {
		border-radius: 10px;
	}

	.hero-stage .hero {
		border-radius: 10px 10px 0 0;
	}

	/* =====================================================
	   OPEN NAV
	   ===================================================== */

	.hero__nav.is-menu-open {
		border-radius: 10px 10px 0 0;
	}

	.hero__nav.is-menu-open::before {
		border-radius: 10px 10px 0 0;
	}

	/* =====================================================
	   DROPDOWN
	   ===================================================== */

	.hero__nav.is-menu-ready .hero__nav-links {
		top: calc(100% - 1px);

		/*
			Ровно ширина hero__nav.
		*/
		left: 0;
		right: 0;

		width: auto !important;

		height: auto !important;
		min-height: 0 !important;

		padding: 12px var(--film-inset) 16px;

		border-radius: 0 0 10px 10px;

		background: var(--nav-surface);

		-webkit-backdrop-filter: blur(18px) saturate(115%);

		backdrop-filter: blur(18px) saturate(115%);

		box-shadow: 0 12px 24px rgba(17, 17, 17, 0.035);
	}

	.hero__nav.is-menu-open .hero__nav-links .hero__nav-link {
		min-height: 38px;

		padding: 5px 0;

		font-size: 0.875rem;
	}

	.hero__nav.is-menu-open
		.hero__nav-links
		.hero__nav-link[aria-current="page"]::before {
		left: -11px;

		top: 8px;
		bottom: 8px;
	}

	/* =====================================================
	   HERO
	   ===================================================== */

	.hero-stage .hero__content {
		padding: 154px var(--film-inset) 36px !important;
	}

	.hero-stage .hero__headline {
		font-size: clamp(1.875rem, 7.4vw, 2.5rem) !important;
	}

	.hero-stage .hero-stories__statement {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}

	.hero-stage .hero-stories__slide p {
		font-size: 0.9375rem;
	}

	.hero-stage .hero__cta.apex-button {
		--button-font-size: 0.875rem;
		--button-padding: 8px 24px;
	}
}

/* =========================================================
   MENU ANIMATION
   Smooth / minimal reveal from the header
   ========================================================= */

/*
	Сама стеклянная панель мягко раскрывается вниз
	из нижней границы header.
*/
.hero__nav.is-menu-open .hero__nav-links {
	overflow: hidden;

	transform-origin: top center;

	will-change: clip-path, transform, opacity;

	animation: apex-menu-reveal 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/*
	Ссылки начинают появляться сразу после начала
	раскрытия панели. Смещение очень маленькое,
	чтобы эффект оставался спокойным.
*/
.hero__nav.is-menu-open .hero__nav-links .hero__nav-link {
	will-change: transform, opacity;

	animation: apex-menu-link-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Небольшой stagger */

.hero__nav.is-menu-open .hero__nav-links .hero__nav-link:nth-child(1) {
	animation-delay: 55ms;
}

.hero__nav.is-menu-open .hero__nav-links .hero__nav-link:nth-child(2) {
	animation-delay: 85ms;
}

.hero__nav.is-menu-open .hero__nav-links .hero__nav-link:nth-child(3) {
	animation-delay: 115ms;
}

.hero__nav.is-menu-open .hero__nav-links .hero__nav-link:nth-child(4) {
	animation-delay: 145ms;
}

/* Панель */

@keyframes apex-menu-reveal {
	from {
		opacity: 0;

		transform: translateY(-6px);

		clip-path: inset(0 0 100% 0);
	}

	to {
		opacity: 1;

		transform: translateY(0);

		clip-path: inset(0 0 0 0);
	}
}

/* Пункты меню */

@keyframes apex-menu-link-in {
	from {
		opacity: 0;

		transform: translateY(-5px);
	}

	to {
		opacity: 1;

		transform: translateY(0);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.hero__nav,
	.hero__nav .hero__logo,
	.hero__nav .hero__nav-link,
	.hero__menu-toggle {
		transition: none;
	}

	.hero__nav.is-menu-open .hero__nav-links,
	.hero__nav.is-menu-open .hero__nav-links .hero__nav-link {
		animation: none;
	}

	.hero__nav.is-menu-open .hero__nav-links .hero__nav-link {
		transition: none;
	}
}