/* Shared Apex masthead and section rhythm, matching the homepage. */
@import url("../header-frame.css") layer(apex-shared-header);
:root {
	--ink: #111111;
	--muted: #3f494b;
	--line: #b4b9ba;
	--aqua: #baccd0;
	--blue: #baccd0;
	--cream: #f5f4f0;
	--film-frame: clamp(14px, 2.25vw, 40px);
	--film-inset: clamp(24px, 2.25vw, 40px);
	--nav-edge: calc(var(--film-frame) + clamp(8px, 1.5vw, 24px));
	--nav-dock-top: 12px;
	--nav-surface: rgba(245, 244, 240, 0.58);
	--section-edge: clamp(20px, 6vw, 112px);
	--section-radius: clamp(20px, 2.2vw, 32px);
	--section-pad: clamp(24px, 4vw, 64px);
	--section-pad-block: clamp(44px, 5vw, 80px);
	--section-space: clamp(36px, 5vw, 80px);
}

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

body {
	background: #fff;
}

.site-notice {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 36px;
	margin: 8px var(--film-frame);
	padding: 8px 16px;
	border: 1px solid #11111140;
	border-radius: 6px;
	text-align: center;
}

.site-notice p {
	margin: 0;
	color: var(--ink);
	font:
		500 0.75rem/1.5 Arial,
		sans-serif;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

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

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

	position: fixed;
	z-index: 100;
	inset: var(--nav-top) var(--nav-edge) auto;

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

	min-height: 82px;

	padding: 12px var(--film-inset);
	gap: 40px;

	border: 0;
	border-radius: 12px;

	background: var(--nav-surface);

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

	transition: background-color 320ms ease;
}

.hero__logo {
	display: block;
	width: 42px;
	color: #000000;
}

.hero__nav-actions,
.hero__nav-links {
	display: flex;
	align-items: center;
	justify-content: flex-end;

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

.hero__nav-link,
.hero__menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 44px;

	color: #000000;

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

.hero__nav-link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 7px;
}

/* =========================================
   SERVICE NAVIGATION
   Minimal / clean
   ========================================= */

.hero__service-cluster {
	position: relative;

	display: flex;
	align-items: center;
	gap: 3px;

	padding: 4px;

	border: 1px solid rgba(17, 17, 17, 0.1);
	border-radius: 10px;

	background: rgba(255, 255, 255, 0.22);

	box-shadow: none;

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

/* -----------------------------------------
   ACTIVE / MAIN ITEM
   ----------------------------------------- */

.hero__service-main {
	position: relative;

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

	min-height: 38px;

	padding: 8px 14px;

	border: 1px solid transparent;
	border-radius: 7px;

	background: transparent;

	color: rgba(17, 17, 17, 0.7);

	font-weight: 500;
	letter-spacing: -0.01em;

	text-decoration: none !important;

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

/* убираем любые старые декоративные линии */

.hero__service-main::before,
.hero__service-main::after {
	content: none !important;
	display: none !important;
}

/* текущий раздел */

.hero__service-cluster .hero__service-main[aria-current="page"] {
	background: #dce5e7;

	border-color: rgba(17, 17, 17, 0.11);

	color: #111;

	font-weight: 600;

	text-decoration: none !important;

	box-shadow: none;
}

/* небольшой hover */

.hero__service-main:hover {
	background: rgba(17, 17, 17, 0.035);
	color: #111;
}

/* -----------------------------------------
   SUB NAV
   ----------------------------------------- */

.hero__service-subnav {
	display: flex;
	align-items: center;

	gap: 2px;

	padding: 0;

	border: 0;
}

/* убираем вертикальную линию */

.hero__service-subnav::before,
.hero__service-subnav::after {
	content: none;
	display: none;
}

.hero__service-sublink {
	position: relative;

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

	min-height: 38px;

	padding: 8px 12px;

	border: 1px solid transparent;
	border-radius: 7px;

	background: transparent;

	color: rgba(17, 17, 17, 0.58);

	font:
		500 0.78rem/1.3 Arial,
		sans-serif;

	white-space: nowrap;

	text-decoration: none;

	transition:
		color 200ms ease,
		background-color 200ms ease;
}

/* убираем предыдущий animated underline */

.hero__service-sublink::after {
	content: none;
	display: none;
}

.hero__service-sublink:hover {
	background: rgba(17, 17, 17, 0.03);

	color: #111;

	text-decoration: none;
}

/* контейнер тоже не должен сильно реагировать */

.hero__service-cluster:hover {
	border-color: rgba(17, 17, 17, 0.14);

	background: rgba(255, 255, 255, 0.3);

	box-shadow: none;
}

/* keyboard */

.hero__service-main:focus-visible,
.hero__service-sublink:focus-visible {
	outline: 1px solid rgba(17, 17, 17, 0.6);
	outline-offset: 2px;
}

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

.hero__contact {
	min-width: 110px;

	padding: 10px 24px;

	border: 1px solid #11111166;
	border-radius: 999px;

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

.hero__contact:hover {
	background: #1111110a;
	border-color: var(--ink);
}

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

.hero__menu-toggle {
	display: none;

	padding: 8px 0;

	border: 0;
	background: none;

	cursor: pointer;
}

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

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

/* =========================================
   PAGE LAYOUT
   ========================================= */

main.service-page {
	max-width: none;

	padding: 114px 0 0;

	margin: 0;
}

.service-page > :is(.page-intro, section) {
	width: calc(100% - var(--section-edge) * 2);

	max-width: 1600px;

	margin: 0 auto var(--section-space);

	padding: var(--section-pad-block) var(--section-pad);

	border: 0;

	border-radius: var(--section-radius);

	background: var(--cream);
}

.service-page > :is(#samarbeid, #priser, #sporsmal) {
	background: #fff;
}

.page-intro .breadcrumbs {
	margin-bottom: 32px;
}

.intro-row {
	gap: clamp(32px, 5vw, 72px);
}

h1 {
	font-size: clamp(2.4rem, 4vw, 3.75rem);
	font-weight: 400;
}

.section-title {
	margin-bottom: 32px;
}

.section-nav {
	gap: 10px;
	margin-top: 32px;
}

.section-nav a {
	padding: 9px 16px;
}

/* =========================================
   AREAS
   ========================================= */

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

	gap: 20px;
}

.area {
	padding: clamp(24px, 2.5vw, 36px);

	border-radius: 5px;

	background: #eef2f2;

	border-color: #baccd0;
}

.area:nth-child(2) {
	background: #b4b9ba;
	border-color: var(--ink);
}

.area:nth-child(3) {
	background: #eef2f2;
	border-color: #98a4a7;
}

.area:nth-child(4) {
	background: #e2e9ea;
	border-color: #98a4a7;
}

.area h3,
.area > p {
	min-height: 0;
}

.area > p {
	max-width: 48ch;

	margin: 14px 0 22px;
}

.services li {
	border-color: #1111111f;
}

/* =========================================
   PACKAGES
   ========================================= */

.packages {
	gap: 20px;
}

.package {
	border-radius: 5px;

	padding: clamp(20px, 2vw, 32px);
}

.package li {
	border-color: #11111126;
}

/* =========================================
   BUTTONS
   ========================================= */

.button,
.person {
	justify-content: center;

	min-height: 48px;

	padding: 12px 22px;

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

	background: transparent;

	color: var(--ink);

	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;

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

.button:hover,
.person:hover {
	background: var(--blue);
	border-color: var(--blue);
}

.package:nth-child(2) .button:hover {
	background: #fff;
	border-color: #fff;
}

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

.service-page > .contact {
	padding: 0;

	background: transparent;

	border-radius: 0;
}

.contact-layout {
	gap: 0;
}

.contact-content,
.person-panel {
	padding: clamp(24px, 3vw, 44px);
}

.contact-content > p,
.form-note {
	color: var(--muted);
}

.person-panel,
.person-panel[data-person="Carlos"] {
	background: #e9eded;
}

.portrait-initial {
	color: var(--ink);
}

.contact-form input,
.contact-form textarea {
	border: 1px solid #98a4a7;

	border-radius: 3px;

	background: #ffffffa6;
}

.contact-form .button {
	background: var(--ink);

	border-color: var(--ink);

	color: #fff;
}

.contact-form .button:hover {
	background: #303536;
}

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

.footer-inner {
	max-width: 1600px;

	width: calc(100% - var(--section-edge) * 2);

	padding-inline: var(--section-pad);
}

:is(a, button, input, textarea, summary):focus-visible {
	outline-color: var(--ink);
}

/* =========================================
   TABLET — PACKAGES
   ========================================= */

@media (max-width: 1000px) {
	.packages {
		grid-template-columns: 1fr;

		gap: 20px;

		padding-top: 0;
	}

	.package:nth-child(n),
	.package:nth-child(n):hover,
	.package:nth-child(n):focus-within {
		transform: none;
	}

	.package > p {
		min-height: 0;
	}

	.package .button {
		align-self: flex-start;
	}
}

/* =========================================
   NAV SMALL DESKTOP
   ========================================= */

@media (max-width: 900px) {
	.hero__nav {
		gap: 24px;
	}

	.hero__nav-actions,
	.hero__nav-links {
		gap: 24px;
	}

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

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

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

		gap: 20px;
	}

	.hero__logo {
		width: 34px;
	}

	.hero__nav-actions {
		gap: 22px;
	}

	.hero__contact {
		min-width: 0;

		padding: 9px 20px;
	}

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

	.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;
	}

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

		top: calc(100% - 2px);

		inset-inline: 0;

		max-width: none;

		flex-direction: column;

		align-items: flex-start;

		gap: 4px;

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

		border-radius: 0 0 12px 12px;

		background: #f5f4f0;
	}

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

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

	.hero__nav.is-menu-open .hero__nav-links {
		animation: apex-menu-in 220ms ease-out both;
	}

	.hero__nav.is-menu-open .hero__nav-links a {
		width: 100%;

		justify-content: flex-start;

		padding-block: 10px;
	}

	/* =====================================
	   SERVICE NAV — COLLAPSED MENU
	   Active from 1180px and below
	   ===================================== */

	.hero__nav.is-menu-ready .hero__service-cluster {
		position: relative;

		width: 100%;

		display: flex;
		flex-direction: column;
		align-items: stretch;

		gap: 0;

		margin: 4px 0 8px;
		padding: 2px 0 2px 18px;

		border: 0;
		border-radius: 0;

		background: transparent;

		box-shadow: none;
	}

	/* Quiet guide line for this page group */
	.hero__nav.is-menu-ready .hero__service-cluster::before {
		content: "";

		position: absolute;

		left: 0;
		top: 7px;
		bottom: 7px;

		width: 1px;

		background: rgba(17, 17, 17, 0.12);
	}

	.hero__nav.is-menu-ready .hero__service-cluster:hover {
		border-color: transparent;
		background: transparent;
		box-shadow: none;
	}

	/* Current page */
	.hero__nav.is-menu-ready .hero__service-main {
		position: relative;

		width: 100%;

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

		min-height: auto;

		padding: 10px 0 9px;

		border: 0 !important;
		border-radius: 0;

		background: transparent !important;

		color: #111 !important;

		font-size: 0.9rem;
		font-weight: 600;
		line-height: 1.35;

		text-decoration: none !important;

		box-shadow: none !important;
	}

	/* Remove every desktop decoration in the collapsed menu */
	.hero__nav.is-menu-ready .hero__service-main::before {
		content: none !important;
		display: none !important;
	}

	/* Minimal active marker: a short dark segment on the guide line */
	.hero__nav.is-menu-ready .hero__service-main[aria-current="page"]::after {
		content: "" !important;

		display: block !important;

		position: absolute;

		left: -18px;
		top: 8px;
		bottom: 7px;

		width: 2px;

		border-radius: 2px;

		background: #111;
	}

	.hero__nav.is-menu-ready .hero__service-main:hover {
		background: transparent !important;
		color: #111 !important;
	}

	/* Slik jobber vi / Kontakt */
	.hero__nav.is-menu-ready .hero__service-subnav {
		position: relative;

		width: 100%;

		display: flex;
		flex-direction: column;
		align-items: stretch;

		gap: 0;

		margin: 0;
		padding: 0;

		border: 0;

		background: transparent;
	}

	.hero__nav.is-menu-ready .hero__service-subnav::before,
	.hero__nav.is-menu-ready .hero__service-subnav::after {
		content: none;
		display: none;
	}

	.hero__nav.is-menu-ready .hero__service-subnav .hero__service-sublink {
		position: relative;

		width: 100%;

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

		min-height: auto;

		padding: 8px 0;

		border: 0;
		border-radius: 0;

		background: transparent;

		color: rgba(17, 17, 17, 0.58);

		font-size: 0.82rem;
		font-weight: 500;
		line-height: 1.35;

		text-decoration: none;

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

	.hero__nav.is-menu-ready .hero__service-subnav .hero__service-sublink::before,
	.hero__nav.is-menu-ready .hero__service-subnav .hero__service-sublink::after {
		content: none;
		display: none;
	}

	.hero__nav.is-menu-ready .hero__service-subnav .hero__service-sublink:hover {
		background: transparent;

		color: #111;

		transform: translateX(3px);
	}
}

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

@media (max-width: 700px) {
	.intro-row {
		gap: 22px;
	}

	.areas {
		grid-template-columns: 1fr;

		gap: 16px;
	}

	.contact-layout {
		gap: 0;
	}

	.process-grid {
		grid-template-columns: 1fr;
	}
}

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

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

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

	.hero__nav {
		border-radius: 10px;
	}

	main.service-page {
		padding-top: 96px;
	}
}

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

@media (max-width: 480px) {
	:root {
		--section-edge: 20px;
		--section-pad: 22px;
		--section-pad-block: 36px;
		--section-space: 32px;
	}

	.area {
		padding: 24px 20px;
	}

	.footer-inner {
		padding-inline: 0;
	}
}

/* =========================================
   MENU ANIMATION
   ========================================= */

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

		transform: translateY(-4px);
	}

	to {
		opacity: 1;

		transform: translateY(0);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.hero__nav,
	.hero__contact,
	.hero__service-cluster,
	.hero__service-main,
	.hero__service-main::before,
	.hero__service-sublink,
	.hero__service-sublink::after,
	.button,
	.person {
		transition: none;
	}

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