/**
Theme Name: Astra child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Fix 1: Push hero content lower so right image clears top menu area */
.home-hero-section {
	padding-top: 20px !important;
}

@media (max-width: 1024px) {
	.home-hero-section {
		padding-top: 10px !important;
	}
}

/* Fix 2: Rebuild popup menu behavior (no slide/no spill) */


.sl-header .header-menu .menu-btn,
.sl-header .header-menu .menu-close-btn {
	z-index: 9010;
}

/* Panel position: --sl-menu-panel-top / --sl-menu-panel-right set by JS from .menu-btn */
.sl-header .header-menu .menu-items-container {
	position: fixed !important;
	top: 0 !important;
	right: var(--sl-menu-panel-right, 100px) !important;
	left: auto !important;
	width: min(300px, calc(100vw - 24px));
	max-width: calc(100vw - 24px);
	background: #e3fff3 !important;
	padding: 12px 10px 16px 6px !important;
	overflow: hidden !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform-origin: top right;
	transform: scale(0.94) translateY(-10px) !important;
	transition: opacity 0.22s ease, visibility 0.22s ease,
	            transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
	z-index: 9000;
	border-radius: 0 !important;
}

/* Keep Meny button above panel so it can close menu */
.sl-header .header-menu .menu-btn {
	position: relative;
	z-index: 9012;
}

.ast-custom-header .sl-header .header-right .header-contact {
	transform: translateX(0);
	transition: transform 0.22s ease;
}

/* When menu is open, move contact icons left outside the panel */
body.sl-menu-open .ast-custom-header .sl-header .header-right .header-contact {
	transform: translateX(-168px);
}

body.sl-menu-open .ast-custom-header .sl-header .header-right {
	gap: 14px;
}

/* Lukk sits at top-right corner of the mint panel (not in the white topbar row) */
.sl-header .header-menu .menu-container-inner {
	position: relative;
	padding-top: var(--sl-menu-content-top, 74px);
	min-height: 0;
	border-radius: 0 !important;
}

/* Scrolled topbar is shorter; lift menu list start to keep same visual baseline */
.ast-custom-header.is-scrolled .sl-header .header-menu .menu-container-inner {
	padding-top: calc(var(--sl-menu-content-top, 74px) - 12px);
}

.sl-header .header-menu .menu-close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	margin: 0;
	z-index: 9011;
}

.sl-header .header-menu .menu-close-btn > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.sl-header .header-menu .menu-items-container.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1) translateY(0) !important;
}

.sl-header .header-menu .menu-items-container::before,
.sl-header .header-menu .menu-items-container::after,
.sl-header .header-menu .menu-items-container *::before,
.sl-header .header-menu .menu-items-container *::after {
	animation: none !important;
	transform: none !important;
	transition: none !important;
}

.sl-header .header-menu .menu-items-container ul,
.sl-header .header-menu .menu-items-container ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-header .header-menu .menu-items-container li {
	margin: 0;
	padding: 0;
	overflow: visible !important;
}

.sl-header .header-menu .menu-items-container li + li {
	margin-top: 8px;
}

.sl-header .header-menu .menu-items-container li a {
	display: block;
	width: 100%;
	padding: 8px 16px;
	color: #000000 !important;
	border-radius: 0;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	background: transparent !important;
	transform: none !important;
	opacity: 0;
	transition: opacity 0.18s ease, background-color 0.3s ease,
	            color 0.3s ease, border-radius 0.3s ease !important;
}

/* Stagger: öğeler sırayla fade-in olur */
.sl-header .header-menu .menu-items-container.active li a {
	opacity: 1;
}
.sl-header .header-menu .menu-items-container.active li:nth-child(1) a { transition-delay: 0.08s; }
.sl-header .header-menu .menu-items-container.active li:nth-child(2) a { transition-delay: 0.13s; }
.sl-header .header-menu .menu-items-container.active li:nth-child(3) a { transition-delay: 0.18s; }
.sl-header .header-menu .menu-items-container.active li:nth-child(4) a { transition-delay: 0.23s; }
.sl-header .header-menu .menu-items-container.active li:nth-child(5) a { transition-delay: 0.28s; }
.sl-header .header-menu .menu-items-container.active li:nth-child(6) a { transition-delay: 0.33s; }

/* Kapanırken anında gizle: hover stilleri de sıfırla */
.sl-header .header-menu .menu-items-container:not(.active) li a {
	opacity: 0;
	transition: none !important;
	background: transparent !important;
	color: #000000 !important;
	border-radius: 0 !important;
	outline: none !important;
}

.sl-header .header-menu .menu-items-container li:hover > a,
.sl-header .header-menu .menu-items-container li:focus-within > a,
.sl-header .header-menu .menu-items-container li > a:hover,
.sl-header .header-menu .menu-items-container li > a:focus,
.sl-header .header-menu .menu-items-container li > a:focus-visible {
	background: #000000 !important;
	color: #00ffa3 !important;
	border-radius: 0 20px 0 20px !important;
	outline: 2px dashed #00ffa3 !important;
	outline-offset: -4px !important;
}

/* Keep first and last row hover visually consistent */
.sl-header .header-menu .menu-items-container li:first-child > a {
	margin-top: 2px;
}

.sl-header .header-menu .menu-items-container li:last-child > a {
	margin-bottom: 8px;
}

/* Topbar: single background layer + scrolled compact state */
.ast-custom-header,
.ast-custom-header .astra-advanced-hook-609,
.ast-custom-header .sl-header {
	transition: background-color 0.22s ease, box-shadow 0.22s ease, backdrop-filter 0.22s ease, padding 0.22s ease;
}

/*
 * CRITICAL: backdrop-filter creates an isolated stacking context with no
 * z-index, which lets the fixed dropdown (z 100000) render ON TOP of the
 * header. Pinning the header to z 200000 fixes the "Lukk" overlap.
 */
.ast-custom-header {
	position: sticky;
	top: 0;
	z-index: 8990 !important;
}

/* Keep top state normal and avoid double-layer backgrounds */
.ast-custom-header .astra-advanced-hook-609,
.ast-custom-header .sl-header {
	background: transparent !important;
}

.ast-custom-header .sl-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
}

.ast-custom-header .sl-header > .header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.ast-custom-header .sl-header .sl-header-logo img {
	height: 38px;
	width: auto;
}

/* ── Logo text ↔ logo image scroll animation ─────────────────────────────── */
/*
 * Both elements stay in normal flow so the <a> always sizes to the
 * visible content — this makes the focus outline match what's shown.
 * max-width transitions from a safe upper bound down to 0 to
 * collapse the hidden element without pulling it out of flow.
 */

.ast-custom-header .sl-header .sl-header-logo a {
	display: inline-flex;
	align-items: center;
	overflow: hidden; /* clip the collapsing element cleanly */
}

/* "Outfront" text — visible at top, collapses on scroll */
.sl-header-logo .sl-logo-text {
	display: inline-block;
	white-space: nowrap;
	font-family: 'KontrapunktMiki-regular', sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #000;
	max-width: 250px;
	opacity: 1;
	overflow: hidden;
	pointer-events: none;
	transition: max-width 0.4s ease, opacity 0.35s ease;
}

/* SVG logo — collapsed at top, expands on scroll */
.ast-custom-header .sl-header .sl-header-logo img {
	height: 38px;
	width: auto;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	flex-shrink: 0;
	transition: max-width 0.4s ease, opacity 0.35s ease, transform 0.22s ease;
}

/* Scrolled: collapse text, reveal logo */
.ast-custom-header.is-scrolled .sl-header-logo .sl-logo-text {
	max-width: 0;
	opacity: 0;
}

.ast-custom-header.is-scrolled .sl-header .sl-header-logo img {
	max-width: 250px;
	opacity: 1;
}

/* ── End logo animation ───────────────────────────────────────────────────── */

.ast-custom-header .sl-header .sl-header-logo img,
.ast-custom-header .sl-header .header-contact a,
.ast-custom-header .sl-header .header-menu .menu-btn,
.ast-custom-header .sl-header .header-menu .menu-btn span {
	transform-origin: center center;
}

.ast-custom-header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.76) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.ast-custom-header.is-scrolled .sl-header {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.ast-custom-header.is-scrolled .sl-header .sl-header-logo img {
	transform: scale(0.92);
}

.ast-custom-header.is-scrolled .sl-header .header-contact a {
	transform: scale(0.9);
}


/* Force single icon layer for phone/mail (remove white hover icon) */
.ast-custom-header .sl-header .header-contact a img.hover,
.ast-custom-header.is-scrolled .sl-header .header-contact a img.hover {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.ast-custom-header .sl-header .header-contact a img.non-hover,
.ast-custom-header.is-scrolled .sl-header .header-contact a img.non-hover {
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Contact icons: slide-expand animation on hover */
.ast-custom-header .sl-header .header-contact a {
	display: inline-flex;
	align-items: center;
	justify-content: center !important;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #111;
	border-radius: 999px;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1;
	background: transparent;
	transition: width 0.28s ease, padding 0.28s ease, justify-content 0.28s ease;
}

.ast-custom-header .sl-header .header-contact a img.non-hover {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	object-fit: contain;
	margin: 0;
	pointer-events: none;
}

/* Keep icon perfectly centered in default (non-hover) state */
.ast-custom-header .sl-header .header-contact a:not(:hover):not(:focus-visible) {
	justify-content: center !important;
	padding-left: 13px !important;
	padding-right: 0 !important;
}

.ast-custom-header .sl-header .header-contact a span {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	margin-left: 0;
	overflow: hidden;
	transform: translateX(-12px);
	transition: max-width 0.28s ease, opacity 0.2s ease, margin-left 0.28s ease, transform 0.28s ease;
}

.ast-custom-header .sl-header .header-contact a:hover,
.ast-custom-header .sl-header .header-contact a:focus-visible {
	width: 220px;
	padding-left: 12px;
	padding-right: 10px;
	justify-content: flex-start !important;
	background: #000000;
	color: #ffffff !important;
}

.ast-custom-header .sl-header .header-contact a:hover span,
.ast-custom-header .sl-header .header-contact a:focus-visible span {
	max-width: 180px;
	opacity: 1;
	margin-left: 10px;
	transform: translateX(0);
}

.ast-custom-header .sl-header .header-contact a:hover img.non-hover,
.ast-custom-header .sl-header .header-contact a:focus-visible img.non-hover {
	filter: brightness(0) invert(1);
}

/* ======================================================
   GLOBAL FOCUS VISIBILITY — COMPREHENSIVE OVERRIDE
   Astra resets outlines with high-specificity rules.
   We match or beat those rules here with !important so
   every keyboard-focusable element shows a clear ring.
   ====================================================== */

/*
 * Target every native interactive element type explicitly.
 * This beats Astra's  a:focus { outline:none }  etc.
 */
a:focus-visible,
button:focus-visible,
details > summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid rgba(0, 0, 0, 0.88) !important;
	outline-offset: 3px !important;
	border-radius: 4px !important;
	/* double-ring for extra contrast on any background */
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.08) !important;
}

/* Round outline on pill-shaped elements */
a[class*="btn"]:focus-visible,
button[class*="btn"]:focus-visible,
.sl-header .header-contact a:focus-visible,
.sl-header .header-menu .menu-btn:focus-visible,
.accordion-toggle:focus-visible,
.faq-toggle:focus-visible {
	border-radius: 999px !important;
}

/* White/green ring for elements on dark/black backgrounds */
.accordion-header:hover button:focus-visible,
.accordion-content button:focus-visible,
/* Footer — black background */
.footer-section a:focus-visible,
.footer-section button:focus-visible,
.footer-section input:focus-visible,
.footer-section select:focus-visible,
.footer-section textarea:focus-visible,
/* Team cards — card bg turns black on hover/focus-within */
.swiper-slide:focus-within a:focus-visible,
.swiper-slide:hover a:focus-visible {
	outline-color: #00ffa3 !important;
	box-shadow: 0 0 0 6px rgba(0, 255, 163, 0.18) !important;
}

/* Logo — extra offset so ring never clips through the text */
.sl-header .sl-header-logo a:focus-visible {
	outline-offset: 8px !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}

/* Accordion / FAQ toggle buttons — make the ring clearly visible */
.accordion-toggle:focus-visible,
.faq-toggle:focus-visible {
	outline: 3px solid #1a1a1a !important;
	outline-offset: 4px !important;
	background: rgba(0, 0, 0, 0.06) !important;
}

/* <details><summary> — used in package cards */
details > summary:focus-visible {
	outline-offset: 4px !important;
}

/* Swiper navigation arrows (Swiper renders them as divs with role=button) */
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
	outline: 3px solid #1a1a1a !important;
	outline-offset: 4px !important;
	border-radius: 999px !important;
}

/* ======================================================
   MENU BUTTON — BASE STYLES
   All four themes share these fundamentals.
   position: relative + isolation needed for ::before
   rainbow border pseudo-elements (Theme 3 & 4).
   ====================================================== */
.sl-header .header-menu .menu-btn {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	/* No justify-content: space-between — margin-left:auto on img handles right-alignment */
	gap: 8px;
	padding: 10px 18px !important;
	min-width: 108px !important;
	box-sizing: border-box !important;
	border-radius: 999px;
	border: 2px solid #1a1a1a;
	background: transparent;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	transition:
		background   0.18s ease,
		color        0.18s ease,
		border-color 0.18s ease,
		transform    0.10s ease,
		box-shadow   0.20s ease,
		filter       0.18s ease;
}

.sl-header .header-menu .menu-btn:focus-visible {
	outline: 3px dashed #1a1a1a !important;
	outline-offset: 4px !important;
}

/* Single text span — JS swaps text between "Meny" and "Lukk" */
.sl-header .header-menu .menu-btn .menu-text {
	align-self: center !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * margin-left:auto in the HIGH-specificity rule beats any Astra override.
 * align-self:center ensures the icon is vertically centred even if Astra
 * sets a different default on img elements.
 */
.sl-header .header-menu .menu-btn img {
	margin-left: auto !important;   /* pushes icon to the far right */
	align-self: center !important;  /* vertical centre regardless of Astra */
	flex-shrink: 0 !important;
	display: block !important;
	float: none !important;
	width: 16px !important;
	height: 16px !important;
	object-fit: contain;
	transition: transform 0.22s ease, filter 0.18s ease;
}
/* Rotate + → × when the menu is open */
.sl-header .header-menu .menu-btn.active img {
	transform: rotate(45deg) !important;
}

/* ======================================================
   @property — allows animating the conic-gradient angle
   (Chrome 85+, Firefox 128+, Safari 16.4+)
   ====================================================== */
@property --sl-rgb-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes sl-rgb-spin {
	to { --sl-rgb-angle: 360deg; }
}

/* ======================================================
   THEME 1 — Classic Dark
   Default: transparent, black border, black text.
   Hover:   solid black fill, white text + icon.
   Pressed: dark fill + content blur (physical press feel).
   Active:  transparent — header button shows "Lukk ×".
   ====================================================== */
.sl-btn-theme-1 .sl-header .header-menu .menu-btn:hover {
	background: #1a1a1a;
	color: #ffffff;
	border-color: #1a1a1a;
}
.sl-btn-theme-1 .sl-header .header-menu .menu-btn:hover img {
	filter: invert(1);
}
.sl-btn-theme-1 .sl-header .header-menu .menu-btn:active:not(.active) {
	background: #1a1a1a;
	color: #ffffff;
	border-color: #1a1a1a;
	transform: scale(0.95);
	filter: blur(1.5px);
}

/* ======================================================
   THEME 2 — Neon Green
   Hover:   solid black fill, NEON GREEN text + icon.
   Pressed: bright neon green fill, black text (no blur).
   Active:  transparent — "Lukk ×".
   ====================================================== */
.sl-btn-theme-2 .sl-header .header-menu .menu-btn:hover {
	background: #1a1a1a;
	color: #39ff14;
	border-color: #1a1a1a;
}
.sl-btn-theme-2 .sl-header .header-menu .menu-btn:hover img {
	/* Tint icon neon green */
	filter: brightness(0) saturate(100%) invert(62%) sepia(80%)
	        saturate(600%) hue-rotate(70deg) brightness(110%);
}
.sl-btn-theme-2 .sl-header .header-menu .menu-btn:active:not(.active) {
	background: #39ff14;
	color: #000000;
	border-color: #39ff14;
	transform: scale(0.97);
}
.sl-btn-theme-2 .sl-header .header-menu .menu-btn:active:not(.active) img {
	filter: brightness(0);
}

/* ======================================================
   THEME 3 — Animated RGB Border
   Uses CSS mask technique for gradient border:
     ::before fills the button area, mask-composite: exclude
     cuts out the center, leaving only the 2px border ring.
   Hover:   WHITE fill, rainbow animated ring, BLACK text.
   Pressed: same + multicolour glow explosion + blur.
   Active:  transparent — header shows "Lukk ×".
   ====================================================== */

/*
 * Shared gradient ring for hover AND pressed.
 * The ring is a ::before pseudo-element that covers the
 * button exactly (inset:0), with padding:2px creating the
 * ring width, and mask cutting out the inner content-box.
 */
.sl-btn-theme-3 .sl-header .header-menu .menu-btn:hover:not(.active)::before,
.sl-btn-theme-3 .sl-header .header-menu .menu-btn:active:not(.active)::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 999px;
	padding: 4px; /* ring thickness matches design (~4px) */
	background: conic-gradient(
		from var(--sl-rgb-angle),
		#ff0000,   /* Red  */
		#00ff00,   /* Green → R+G intersection = Yellow */
		#0000ff,   /* Blue  → G+B intersection = Cyan  */
		#ff0000    /* Red  → B+R intersection = Magenta */
	);
	/* Cut out the centre — only the 4px ring remains visible */
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: sl-rgb-spin 2.4s linear infinite;
	pointer-events: none;
}

.sl-btn-theme-3 .sl-header .header-menu .menu-btn:hover:not(.active) {
	background: #ffffff;
	border-color: transparent;
	color: #000000;
}
.sl-btn-theme-3 .sl-header .header-menu .menu-btn:hover:not(.active) img {
	filter: brightness(0);
}

.sl-btn-theme-3 .sl-header .header-menu .menu-btn:active:not(.active) {
	background: #ffffff;
	border-color: transparent;
	color: #000000;
	box-shadow:
		0 0 32px 12px rgba(255,   0,   0, 0.65),
		0 0 32px 12px rgba(  0, 255, 136, 0.65),
		0 0 32px 12px rgba(  0, 170, 255, 0.65),
		0 0 18px 24px rgba(200,   0, 255, 0.30);
	filter: blur(2px);
	transform: scale(0.97);
}
.sl-btn-theme-3 .sl-header .header-menu .menu-btn:active:not(.active) img {
	filter: brightness(0);
}

/* ======================================================
   THEME 4 — White Hover / Rainbow Press
   Hover:   pure white fill, solid black border, black text.
   Pressed: white fill + animated rainbow border ring + glow.
            (No blur — sharper than Theme 3.)
   Active:  transparent — "Lukk ×".
   ====================================================== */
.sl-btn-theme-4 .sl-header .header-menu .menu-btn:hover {
	background: #ffffff;
	color: #000000;
	border-color: #1a1a1a;
}
.sl-btn-theme-4 .sl-header .header-menu .menu-btn:hover img {
	filter: brightness(0);
}

/* Gradient ring on pressed only (same mask technique as T3) */
.sl-btn-theme-4 .sl-header .header-menu .menu-btn:active:not(.active)::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 999px;
	padding: 4px;
	background: conic-gradient(
		from var(--sl-rgb-angle),
		#ff0000,
		#00ff00,
		#0000ff,
		#ff0000
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: sl-rgb-spin 2.4s linear infinite;
	pointer-events: none;
}

.sl-btn-theme-4 .sl-header .header-menu .menu-btn:active:not(.active) {
	background: #ffffff;
	border-color: transparent;
	color: #000000;
	box-shadow:
		0 0 24px 10px rgba(255,   0,   0, 0.55),
		0 0 24px 10px rgba(  0, 255, 136, 0.55),
		0 0 24px 10px rgba(  0, 170, 255, 0.55),
		0 0 14px 20px rgba(200,   0, 255, 0.25);
	transform: scale(0.97);
}
.sl-btn-theme-4 .sl-header .header-menu .menu-btn:active:not(.active) img {
	filter: brightness(0);
}

/* ======================================================
   KEYBOARD SHORTCUT BADGES
   Small numbered key hints shown on the left of each
   menu item. Rendered via JS (.sl-kbd-badge span).
   ====================================================== */
.sl-header .header-menu .menu-items-container li a {
	display: flex !important;
	align-items: center;
	gap: 10px;
}

.sl-header .header-menu .menu-items-container .sl-kbd-badge {
	flex: 0 0 auto;
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	font-family: 'KontrapunktMiki-regular', sans-serif;
	border: 0;
	border-radius: 0;
	opacity: 0.7;
	flex-shrink: 0;
	transform: translateY(-9px);
	line-height: 1;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

/* Badge becomes fully visible on hover / keyboard focus */
.sl-header .header-menu .menu-items-container li:hover          > a .sl-kbd-badge,
.sl-header .header-menu .menu-items-container li:focus-within   > a .sl-kbd-badge,
.sl-header .header-menu .menu-items-container li.sl-kb-focused  > a .sl-kbd-badge {
	opacity: 1;
	transform: translateY(-10px);
}

/* Keyboard-navigation highlight ring on focused item */
.sl-header .header-menu .menu-items-container li.sl-kb-focused > a {
	background: #000000 !important;
	color: #00ffa3 !important;
	border-radius: 0 20px 0 20px !important;
	outline: 2px dashed #00ffa3 !important;
	outline-offset: -4px !important;
}

/* ======================================================
   BLANK / STUB PAGES
   ====================================================== */
.blank-page-section {
	padding: 72px 0 120px;
}

.blank-page-title {
	font-family: 'KontrapunktMiki-extrabold', sans-serif;
	font-size: clamp(2rem, 5vw, 4rem);
	margin: 0 0 24px;
	color: #101010;
}

.blank-page-placeholder {
	font-size: 1.15rem;
	color: #555;
}

/* ======================================================
   REFERANSER / PORTFOLIO PAGE
   ====================================================== */

/* Wrapper: reset Astra's flex/grid so sections stack vertically */
.ref-page-wrap {
	display: block !important;
	width: 100%;
	--ref-left-pad: 100px;
	--ref-right-pad: 100px;
}

.ref-page-wrap > section {
	width: 100%;
	box-sizing: border-box;
}

/* ── 1. HERO ─────────────────────────────────────────── */

/* bg + flex container */
.ref-hero {
	background: linear-gradient(0deg, #e2fef5 1%, #fff 100%) !important;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.ref-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 20px 32px;
}

@media (min-width: 1025px) {
	.ref-hero__inner {
		padding: 0 100px 32px;
	}
}

.ref-hero__title {
	font-family: 'KontrapunktMiki-extrabold', sans-serif;
	font-size: clamp(3rem, 6vw, 5.5rem);
	font-weight: 800;
	line-height: 1;
	color: #0a0a0a;
}

/* Bottom row: description left — button right */
.ref-hero__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

.ref-hero__text {
	font-size: clamp(0.9rem, 1.3vw, 1rem);
	line-height: 1.55;
	color: #1a1a1a;
	margin: 0;
	max-width: 420px;
}

.ref-hero__btn {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
	padding: 13px 28px;
	border: 1.5px solid #0a0a0a;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	color: #0a0a0a;
	text-decoration: none;
	background: transparent;
	transition: background 0.2s ease, color 0.2s ease;
}

.ref-hero__btn:hover,
.ref-hero__btn:focus-visible {
	background: #0a0a0a;
	color: #00ff9a;
}

/* ── Scroll-driven stacked cards (laat.no style) ─────── */

/* wp-custom-css sets overflow:hidden on .admin-bar #page which breaks
   position:sticky. overflow:clip clips without creating a scroll container,
   so sticky elements stay relative to the viewport. */
.admin-bar #page {
	overflow: clip !important;
}

/* Section height is set by JS (n × 100vh).
   overflow:visible is required — sticky breaks inside overflow:hidden */
.ref-cases {
	overflow: visible;
}

/* Sticky viewport that stays at the top while section scrolls past */
.ref-cases-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	background: linear-gradient(0deg, rgba(179, 206, 255, 1) 0%, rgba(227, 255, 245, 1) 100%);
}

.ref-cases-slider {
	position: absolute;
	left: var(--ref-left-pad);
	right: var(--ref-right-pad);
	bottom: clamp(16px, 3vh, 30px);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 20;
}

/* Each full-viewport card */
.ref-scroll-card {
	position: absolute;
	inset: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
	transform-origin: center center;
}

/* z-index: later cards sit on top */
.ref-scroll-card:nth-child(1) { z-index: 1; }
.ref-scroll-card:nth-child(2) { z-index: 2; }
.ref-scroll-card:nth-child(3) { z-index: 3; }
.ref-scroll-card:nth-child(4) { z-index: 4; }
.ref-scroll-card:nth-child(5) { z-index: 5; }

/* Screenshot fills the card with padding so edges of the browser mockup show */
.ref-scroll-card__frame {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 6% 22vh;
	box-sizing: border-box;
}

.ref-scroll-card__frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

@media (max-width: 768px) {
	.ref-scroll-card__frame { padding: 3vh 4% 20vh; }

	.ref-cases-slider {
		left: var(--ref-left-pad);
		right: var(--ref-right-pad);
		bottom: 14px;
	}
}

/* ── 3. TESTIMONIAL ──────────────────────────────────── */
.ref-testimonial {
	background: #e3fff3;
	padding: 56px 0 72px;
	border-top: 1.5px solid rgba(0,0,0,0.07);
}

.ref-testimonial__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.ref-testimonial__kunder {
	font-family: 'KontrapunktMiki-extrabold', sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 800;
	color: #101010;
	margin: 0 0 20px;
	align-self: flex-start;
}

.ref-stars {
	display: flex;
	gap: 6px;
	margin-bottom: 28px;
}

.ref-star {
	width: 22px;
	height: 22px;
}

.ref-testimonial__quote {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.4;
	color: #101010;
	font-weight: 800;
	text-align: center;
	margin: 0 0 36px;
	max-width: 100%;
	width: 100%;
	quotes: none;
	font-style: italic;
	border: none;
	border-left: none;
	padding: 0;
	background: none;
}

.ref-testimonial__meta {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	width: 100%;
	margin-bottom: 40px;
}

.ref-testimonial__author {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}

.ref-testimonial__author strong {
	font-size: 1rem;
	color: #101010;
}

.ref-testimonial__author span {
	font-size: 0.9rem;
	color: #555;
}

.ref-testimonial__case-btn {
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	padding: 16px 36px;
	border: 2px solid #111;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1.05rem;
	color: #111;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.ref-testimonial__case-btn:hover,
.ref-testimonial__case-btn:focus-visible {
	background: #111;
	color: #fff;
}

/* Logo / partner row — manual arrow slider */
.ref-logo-slider {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.ref-logo-arrow {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid #111;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	color: #111;
	padding: 0;
}

.ref-logo-arrow:hover {
	background: #111;
	color: #fff;
}

.ref-logo-arrow svg {
	width: 20px;
	height: 20px;
}

.ref-logo-row {
	display: flex;
	flex: 1;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	user-select: none;
}

.ref-logo-row::-webkit-scrollbar {
	display: none;
}

.ref-logo-row.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.ref-logo-item {
	flex: 0 0 140px;
	scroll-snap-align: start;
	aspect-ratio: 4/3;
	background: #fff;
	border: 1.5px solid #cde8d8;
	border-radius: 0 10px 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	opacity: 0.58;
	transform: scale(0.93);
	transition: transform 0.22s ease, opacity 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.ref-logo-item.is-active {
	opacity: 1;
	transform: scale(1);
	border-color: #0d2532;
	background: #f5fffb;
	box-shadow: 0 0 0 3px rgba(13, 37, 50, 0.38), 0 10px 22px rgba(13, 37, 50, 0.2);
}

.ref-logo-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0 8px 0 8px;
}

.ref-logo-item svg {
	width: 30px;
	height: 30px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
	.ref-hero {
		min-height: 280px;
	}

	.ref-hero__inner {
		padding: 36px 0 32px;
		min-height: 280px;
	}

	.ref-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.ref-logo-row {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 640px) {
	.ref-testimonial__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.ref-logo-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ════════════════════════════════════════════════════
   CASE DETAIL PAGE (Fjord Events)
   Design ref: Portfolio Case PDF
   Palette (comp):
     --case-teal : #00c8c8
     --case-navy : #001f2b
     --case-bg   : #e3fff3
     --case-ph   : #c8c8c0

   NOTE: Case hero is a single Outfront photo window (no mock browser).
   The WP site topbar keeps its native theme bg — no override.
   ════════════════════════════════════════════════════ */

.page-id-1276 {
	/* Portfolio Case ref — comp screenshot */
	--case-teal: #00c8c8;
	--case-navy: #001f2b;
	--case-bg:   #e3fff3;
	--case-ph:   #c8c8c0;
	/* Shared horizontal alignment with top menu content edges. */
	--case-left-pad: 100px;
	--case-right-pad: 100px;
	--case-shell-max: 100%;
	--case-inner-max: calc(100vw - var(--case-left-pad) - var(--case-right-pad));
	--case-outfront-img: url('assets/case/medprax-outfront-pane.jpg');
	--case-outfront-img-set: image-set(
		url('assets/case/medprax-outfront-pane.avif') type('image/avif'),
		url('assets/case/medprax-outfront-pane.webp') type('image/webp'),
		url('assets/case/medprax-outfront-pane.jpg') type('image/jpeg')
	);
	/* Best-practice side fill: precomputed per-case gradients (no runtime sampling). */
	/* Match hero-height top slice (avoid full-image dark tail). */
	--case-edge-left: linear-gradient(180deg, #c9f8fd 0%, #a9f1fb 52%, #8adfee 100%);
	--case-edge-right: linear-gradient(180deg, #c9f8fd 0%, #a9f1fb 52%, #8adfee 100%);
	/* Images: square TL + BR, rounded TR + BL (ref comp) */
	--case-img-r: 56px;
	/* Keep lower continuation panes at hero-scale (no zoom feel). */
	--case-pane-scale-w: var(--case-inner-max);
}

/* Force green mint on wrappers that otherwise render white.
   Header/topbar is intentionally left alone so it keeps its
   default theme colour like the other pages. */
.page-id-1276 #page,
.page-id-1276 .site,
.page-id-1276 .site-content,
.page-id-1276 .ast-container {
	background: #e3fff3 !important;
}

/* Reset Astra's ast-container flex + align with site topbar
   Topbar uses: max-width: 1820px; margin: 0 auto; padding: 20px 100px; */
.case-page-wrap {
	display: block !important;
	width: 100%;
	max-width: var(--case-shell-max);
	margin: 0 auto;
	background: #e3fff3 !important;
}

.case-page-wrap > section {
	width: 100%;
	box-sizing: border-box;
	background: #e3fff3;
	padding-left: var(--case-left-pad);
	padding-right: var(--case-right-pad);
}

@media (max-width: 1024px) {
	.page-id-1276 {
		--case-left-pad: 20px;
		--case-right-pad: 20px;
		--case-inner-max: calc(100vw - var(--case-left-pad) - var(--case-right-pad));
		--case-pane-scale-w: var(--case-inner-max);
	}

	.case-page-wrap > section {
		padding-left: var(--case-left-pad);
		padding-right: var(--case-right-pad);
	}
}

/* ── 1. CASE TOP — mint band + Outfront photo window (no mock browser UI) ─ */
.case-hero {
	padding: 0 !important;
	position: relative;
	overflow: hidden;
	/* Side fill base color */
	background-color: #bfeff6 !important;
	background-image: none !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.case-hero::before,
.case-hero::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: max(0px, calc((100vw - var(--case-pane-scale-w)) / 2));
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

.case-hero::before {
	left: 0;
	background-image: var(--case-edge-left);
	background-color: #bfeff6;
}

.case-hero::after {
	right: 0;
	background-image: var(--case-edge-right);
	background-color: #bfeff6;
}

/*
 * Outfront panes — full-res tall JPG; same subtle cool wash on all three.
 * Photo = only background (sharp). Light→cyan→navy is a thin ::before film
 * (low opacity), not a second background-image layer.
 */
.page-id-1276 .case-outfront-pane {
	position: relative;
	isolation: isolate;
	background-image: var(--case-outfront-img);
	background-image: var(--case-outfront-img-set);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	border-radius: 0 var(--case-img-r) 0 var(--case-img-r);
	transform: translateZ(0);
	backface-visibility: hidden;
}

.page-id-1276 .case-outfront-pane::before { content: none; }

.page-id-1276 .case-hero-window.case-outfront-pane {
	background-position: center top;
	display: block;
	width: min(100%, var(--case-inner-max));
	max-width: var(--case-inner-max);
	margin-left: auto;
	margin-right: auto;
	min-height: clamp(220px, 42vh, 520px);
	border-radius: 0;
}

@media (max-width: 1024px) {
	.page-id-1276 .case-hero-window.case-outfront-pane {
		width: min(100%, var(--case-inner-max));
	}
}

.page-id-1276 .case-hero-img.case-outfront-pane {
	/* Starts where hero crop finishes: upper continuation slice */
	background-position: right 12%;
	background-size: 145% auto;
	width: 100%;
	aspect-ratio: 16 / 10;
	min-height: 200px;
}

.page-id-1276 .case-bottom__big.case-outfront-pane {
	/* Continues from previous slice: lower continuation slice */
	background-position: left 34%;
	background-size: 145% auto;
}

/* ── 2. META — title | hva+år | brief ──────────────────── */
.case-meta {
	padding: 36px 0;
}

.case-meta__inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
	align-items: start;
}

@media (max-width: 900px) {
	.case-meta__inner { grid-template-columns: 1fr; gap: 20px; }
}

.case-meta__col {
	display: flex;
	flex-direction: column;
}

.case-meta__title {
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 700;
	color: #0a0a0a;
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.case-meta__label {
	font-size: 0.78rem;
	color: #555;
	margin-bottom: 3px;
	letter-spacing: 0.01em;
}

.case-meta__label--gap {
	margin-top: 14px;
}

.case-meta__subheading {
	font-size: 0.9rem;
	color: #1a1a1a;
	margin-top: 2px;
}

.case-meta__value {
	font-size: 0.9rem;
	color: #1a1a1a;
	line-height: 1.55;
}

/* ── 3. GALLERY ROW 1 — small | hero image with overlay ─ */
.case-gallery-top {
	padding-bottom: 36px;
}

.case-gallery-top__inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 36px;
	align-items: start;
}

@media (max-width: 900px) {
	.case-gallery-top__inner { grid-template-columns: 1fr; }
}

.case-gallery-top__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.case-gallery-top__right {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	min-width: 0;
}

.case-gallery-top__right > .case-cap {
	text-align: left;
}

/* Large gallery window — same Outfront bitmap, own bg-position slice */
.case-hero-img {
	position: relative;
	overflow: hidden;
}

/* ── 4. BOTTOM GRID — big | mid | quote ───────────────── */
.case-bottom {
	padding-top: 0;
	padding-bottom: 48px;
}

.case-bottom__inner {
	display: grid;
	/* ~44% / ~56% — left image a bit narrower, right column wider (ref comp) */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
	gap: 36px;
	align-items: start;
}

@media (max-width: 1024px) {
	.case-bottom__inner {
		grid-template-columns: 1fr;
	}
}

.case-bottom__right-col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 36px;
	min-width: 0;
}

.case-bottom__big-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.case-bottom__big {
	position: relative;
	overflow: hidden;
	height: 360px;
	width: 100%;
}

.case-bottom__big-col > .case-cap {
	text-align: left;
	width: 100%;
}

.case-bottom__right-col .case-bottom__mid-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	align-self: flex-end;
	width: 100%;
	max-width: min(100%, 400px);
}

.case-bottom__right-col .case-bottom__mid-stack .case-ph {
	width: 100%;
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
}

.case-bottom__right-col .case-bottom__mid-stack .case-cap {
	text-align: left;
	width: 100%;
}

.case-bottom__right-col .case-bottom__quote {
	padding-top: 0;
	width: 100%;
}

.case-quote__heading {
	font-size: 0.9rem;
	font-weight: 700;
	color: #0a0a0a;
	margin: 0 0 12px;
}

.case-quote__text {
	font-size: 0.82rem;
	line-height: 1.75;
	color: #555;
	margin: 0;
}

/* ── Shared image placeholders ─────────────────────────── */
.case-ph {
	width: 100%;
	background: var(--case-ph);
	border-radius: 0 var(--case-img-r) 0 var(--case-img-r);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.case-ph--sm   { aspect-ratio: 4 / 3; }
.case-ph--mid  { aspect-ratio: 4 / 3; }
.case-ph--big  { aspect-ratio: auto; height: 100%; }
.case-ph--hero { aspect-ratio: 16 / 10; }

/* Real photos in case gallery — fill TR/BL rounded frame */
.case-ph.case-ph--photo {
	position: relative;
	padding: 0;
	background: #0c0c0c;
	display: block;
}

.case-ph--photo picture {
	position: absolute;
	inset: 0;
	display: block;
}

.case-ph--photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-ph__icon {
	width: 48px;
	height: 40px;
	opacity: 0.5;
}

.case-ph--hero .case-ph__icon,
.case-ph--big  .case-ph__icon { width: 60px; height: 50px; }

/* ── Shared captions ───────────────────────────────────── */
.case-cap {
	font-size: 0.78rem;
	color: #555;
	display: block;
}

.case-cap--top   { margin-bottom: 4px; }
.case-cap--right { text-align: right; }

/* ── 5. MORE CASES SLIDER ─────────────────────────────── */
.case-more {
	background: #b8d8d8;
	display: flex;
	align-items: stretch;
	padding: 0;
	gap: 0;
	position: relative;
	margin-bottom: 60px;
}

.case-more__arrow {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0a0a0a;
	transition: color 0.2s ease, transform 0.2s ease;
	z-index: 2;
}

.case-more__arrow--prev {
	padding-right: 20px;
}

.case-more__arrow--next {
	padding-left: 20px;
}

.case-more__arrow:focus,
.case-more__arrow:focus-visible,
.case-more__arrow:active {
	outline: none;
	box-shadow: none !important;
	background: transparent !important;
}

.case-more__arrow:hover {
	transform: scale(1.1);
}

.case-more__arrow svg {
	width: 32px;
	height: 32px;
}

.case-more__track {
	display: flex;
	flex: 1;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	gap: 20px;
	padding: 0;
}

.case-more__track::-webkit-scrollbar { display: none; }
.case-more__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.case-more__item {
	flex: 0 0 calc(33.333% - 14px);
	scroll-snap-align: start;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-more__item:hover {
	transform: translateY(-4px);
}

/* Case detail page: same image corner treatment as gallery */
.page-id-1276 .case-more__item {
	border-radius: 0 var(--case-img-r) 0 var(--case-img-r);
}

.case-more__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.case-more__item { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 640px) {
	.case-more__item { flex: 0 0 80%; }
	.case-more__arrow { padding: 0 4px; }
	.case-more__arrow--prev { padding-left: 0; }
	.case-more__arrow--next { padding-right: 0; }
	.case-more__arrow svg { width: 24px; height: 24px; }
}

/* ── Footer animated logo ──────────────────────────── */
.footer-logo {
	margin: 0 0 20px !important;
	padding: 0 !important;
	line-height: 0 !important;
}

.footer-logo svg {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	overflow: visible;
}

/* ======================================================
   HVORFOR NETTSIDE DETAIL PAGE
   ====================================================== */
.why-page {
	background: #dff8ee;
	padding-top: var(--sl-why-header-offset, 114px);
}

body.page-hvorfor-nettside {
	--sl-why-left: 56px;
	--sl-why-right: 56px;
}

/* Keep homepage-style custom topbar/menu on this route */
body.page-hvorfor-nettside #masthead {
	display: none !important;
}

body.page-hvorfor-nettside #masthead > #ast-desktop-header,
body.page-hvorfor-nettside #masthead > #ast-mobile-header {
	display: none !important;
}

/* Match homepage header offset/layer behavior under WP admin bar */
body.page-hvorfor-nettside .ast-custom-header {
	position: fixed !important;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	z-index: 8990 !important;
}

body.admin-bar.page-hvorfor-nettside .ast-custom-header {
	top: 32px;
}

.why-wrap {
	max-width: none;
	width: 100%;
	margin: 0 auto;
	padding-left: var(--sl-why-left);
	padding-right: var(--sl-why-right);
	box-sizing: border-box;
}

.why-hero {
	background: linear-gradient(0deg, #dff8ee 1%, #fff 100%) !important;
	padding: 84px 0 42px;
}

.why-hero__title {
	font-family: 'KontrapunktMiki-extrabold', sans-serif;
	font-size: clamp(2rem, 4.8vw, 4rem);
	margin: 0 0 18px;
	color: #0c0c0c;
}

.why-hero__lead {
	max-width: 720px;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

.why-hero .why-wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
	min-height: 280px;
}

.why-hero__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 24px;
}

.why-hero__btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	border: 1.5px solid #1b1b1b;
	border-radius: 999px;
	color: #121212;
	text-decoration: none;
	font-weight: 600;
}

.why-content {
	padding: 46px 0 88px;
}

.why-content__title {
	font-family: 'KontrapunktMiki-extrabold', sans-serif;
	font-size: clamp(2rem, 3.2vw, 3rem);
	margin: 0 0 14px;
}

.why-content__intro {
	max-width: 900px;
	line-height: 1.45;
	font-size: 1.08rem;
	margin: 0 0 38px;
}

.why-collage {
	position: relative;
	margin: 40px 0;
	/* SVG right extension width ratio: 380.97 / 1802.35 */
	--why-right-slice-width: 21.14%;
}

.why-collage__main {
	position: relative;
	z-index: 2;
	aspect-ratio: 1802 / 1130;
}

.why-collage__frame {
	display: block;
	width: 100%;
	height: 100%;
}

.why-collage__panel {
	position: absolute;
	right: 1px;
	bottom: 0px;
	width: clamp(500px, 76%, 1040px);
	height: clamp(500px, 74%, 900px);
	background-image: url('/wp-content/themes/astra-child/assets/case/text-heavy-white-panel.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	z-index: 0;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	padding: clamp(14px, 1.2vw, 22px);
	column-gap: clamp(14px, 1.6vw, 28px);
	row-gap: clamp(8px, 1vw, 16px);
}

.why-collage__content {
	position: static;
	font-size: 18px;
	line-height: 1.5;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
	max-width: 100%;
}

.why-collage__content--top-right {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	align-self: center;
	justify-self: end;
	width: min(96%, 38ch);
	padding-bottom: clamp(10px, 1.4vw, 15px);
}

.why-collage__content--bottom-left {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	align-self: end;
	justify-self: start;
	width: min(96%, 40ch);
	margin-left: clamp(34px, 7%, 92px);
	margin-bottom: clamp(18px, 16.2vw, 222px);
	padding-left: 93px;
}

@media (max-width: 1841px) {
	.why-collage__panel {
		padding:0 0 0 100px;
	}
	.why-collage__content--top-right {
		align-self: center;
		width: min(83%, 35ch);
		padding:0 50px 0 50px;
	}
	.why-collage__content--bottom-left {
		width: min(94%, 36ch);
		margin-left: clamp(28px, 6%, 82px);
		margin-bottom: clamp(22px, 8vw, 120px);
		padding-left: clamp(48px, 8%, 110px);
	}
}

@media (max-width: 1686px) {
	.why-collage__content {
		font-size: clamp(17px, 1.02vw, 18px);
	}
}

@media (max-width: 1396px) {
	.why-collage__content {
		font-size: clamp(15px, 0.95vw + 2px, 17px);
	}
}

.why-columns {
	margin-top: clamp(74px, 9vw, 132px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}

.why-columns p {
	margin: 0;
	line-height: 1.7;
	font-size: 1.02rem;
}

@media (max-width: 1440px) {
	.why-hero {
		padding: 72px 0 36px;
	}
	.why-collage__panel {
		width: clamp(460px, 76%, 940px);
		height: clamp(440px, 70%, 760px);
	}
	.why-columns {
		margin-top: 108px;
	}
}

@media (max-width: 1200px) {
	.why-wrap {
		padding-left: max(24px, var(--sl-why-left));
		padding-right: max(24px, var(--sl-why-right));
	}
	.why-hero .why-wrap {
		min-height: 220px;
	}
	.why-hero__title {
		font-size: clamp(2rem, 5vw, 3rem);
	}
	.why-content__intro {
		font-size: 1rem;
		max-width: 760px;
	}
	.why-collage__panel {
		width: clamp(380px, 74%, 820px);
		height: clamp(400px, 68%, 700px);
	}
	.why-collage__content {
		font-size: clamp(14px, 0.85vw + 2px, 16px);
		line-height: 1.5;
	}
	.why-collage__content--top-right {
		width: min(96%, 34ch);
	}
	.why-collage__content--bottom-left {
		width: min(96%, 32ch);
		margin-left: clamp(20px, 6%, 56px);
		margin-bottom: clamp(12px, 1.8vw, 24px);
		padding-left: 0;
	}
	.why-columns {
		margin-top: 88px;
		gap: 34px;
	}
}

@media (max-width: 1024px) {
	.why-collage__panel {
		width: clamp(360px, 80%, 760px);
		height: clamp(360px, 72%, 620px);
	}
	.why-collage__content {
		font-size: clamp(13px, 0.8vw + 2px, 15px);
		line-height: 1.5;
	}
	.why-collage__content--top-right {
		width: min(96%, 30ch);
		padding-bottom: clamp(12px, 1.8vw, 24px);
	}
	.why-collage__content--bottom-left {
		width: min(96%, 28ch);
		margin-left: clamp(14px, 4%, 34px);
		margin-bottom: 8px;
	}
}

@media (max-width: 900px) {
	.why-wrap {
		padding: 0 20px;
	}
	.why-hero {
		padding: 44px 0 28px;
	}
	.why-hero .why-wrap,
	.why-columns {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 20px;
	}
	.why-hero__right {
		align-items: flex-start;
		gap: 14px;
	}
	.why-hero__btn {
		padding: 10px 20px;
		font-size: 0.95rem;
	}
	.why-collage {
		margin: 20px 0 16px;
	}
	.why-collage__main {
		margin-bottom: 16px;
	}
	.why-collage__panel {
		position: static;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 18px;
		border-radius: 0 40px 0 40px;
		background-image: none;
		background-color: #f6f6f6;
	}
	.why-collage__content {
		position: static;
		font-size: clamp(14px, 1vw + 1px, 16px);
		line-height: 1.55;
	}
	.why-collage__content--top-right {
		width: 100%;
		margin-bottom: 14px;
		padding-bottom: 0;
	}
	.why-collage__content--bottom-left {
		width: 100%;
		padding-left: 0;
	}
	.why-columns {
		margin-top: 34px;
	}
	.why-columns p {
		font-size: 0.98rem;
		line-height: 1.65;
	}
}

@media (max-width: 640px) {
	.why-wrap {
		padding: 0 16px;
	}
	.why-content {
		padding: 34px 0 52px;
	}
	.why-content__title {
		font-size: clamp(1.8rem, 8vw, 2.3rem);
		margin-bottom: 10px;
	}
	.why-content__intro {
		font-size: 0.94rem;
		line-height: 1.55;
		margin-bottom: 20px;
	}
	.why-collage__panel {
		padding: 16px;
	}
	.why-collage__content {
		font-size: clamp(13px, 1.2vw, 15px);
	}
	.why-columns {
		margin-top: 24px;
		gap: 20px;
	}
}