/*!
Theme Name: UTD Reklameprodusenten
Theme URI: http://underscores.me/
Author: Insite Media AS
Author URI: https://insitemedia.no
Description: Custom boilerplate for UTD WordPress
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: im-utd
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

UTD Reklameprodusenten is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* =============================================================================
   FONT FACE — Guardian Sans (self-hosted)
   Weights declared: only those used in the theme stylesheet.
   font-display: swap prevents invisible text while fonts load (Lighthouse req).
   ============================================================================= */

/* 400 — Regular */
@font-face {
	font-family: "Guardian Sans";
	src: url("fonts/GuardianSansRegular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Guardian Sans";
	src: url("fonts/GuardianSansRegularIt.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* 500 — Medium */
@font-face {
	font-family: "Guardian Sans";
	src: url("fonts/GuardianSansMedium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Guardian Sans";
	src: url("fonts/GuardianSansMediumIt.woff") format("woff");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* 700 — Bold */
@font-face {
	font-family: "Guardian Sans";
	src: url("fonts/GuardianSansBold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Guardian Sans";
	src: url("fonts/GuardianSansBoldIt.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* 800 — Black (used for hero titles and large headings) */
@font-face {
	font-family: "Guardian Sans";
	src: url("fonts/GuardianSansBlack.woff") format("woff");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Guardian Sans";
	src: url("fonts/GuardianSansBlackIt.woff") format("woff");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

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

:root {
	--color-orange:  #f47343;
	--color-black:   #111;
	--color-grey:    #222222;
	--color-white:   #fff;
	--color-bg-warm: #FFF4EF;

	--font-primary: "Guardian Sans", Ubuntu, sans-serif;

	--ls-title: 0.7px;
	--ls-text:  0.22px;
}

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

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

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	color: var(--color-black);
	letter-spacing: var(--ls-text);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: var(--ls-title);
}

img,
video {
	display: block;
	max-width: 100%;
}

picture {
	display: block;
}

/* Full-bleed picture containers — make Imagify <picture> wrapper transparent to layout */
.env-card__image picture,
.contact-person__photo picture,
.team-member__photo picture,
.page-gallery__figure picture,
.hero__media picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/*
 * Imagify moves the class from <img> to <picture>, leaving the inner <img>
 * classless and sized by its HTML width/height attributes. These rules override
 * that so the img fills its (already-positioned) <picture> parent.
 */
.contact-person__photo picture img,
.team-member__photo picture img,
.page-gallery__figure picture img,
.hero__media picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* about-content image flows naturally inside its padding — no absolute needed */
.about-content__image picture img {
	display: block;
	width: 100%;
	height: auto;
}

.env-card__image picture img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.contact-person__photo picture img,
.team-member__photo picture img {
	object-position: center top;
}

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

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-white);
	clip: auto !important;
	clip-path: none;
	color: var(--color-black);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 3px;
}

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

#page {
	overflow: hidden;
}

/* =============================================================================
   SITE HEADER — default (inner pages)
   ============================================================================= */

#masthead {
	background: var(--color-grey);
	position: relative;
	z-index: 1000;
}

.site-header__inner {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 2rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: minmax(4.5rem, auto);
	align-items: stretch;
}

.site-branding {
	justify-self: start;
	display: flex;
	align-items: center;
}

.custom-logo-link {
	display: flex;
	align-items: center;
}

.custom-logo {
	height: 2.75rem;
	width: auto;
	display: block;
}

.custom-logo img {
	height: 100%;
	width: auto;
	display: block;
}

#site-navigation {
	justify-self: center;
	display: flex;
	align-items: stretch; /* passes height down to ul */
	position: relative;   /* anchors sub-menu left edge to nav start */
}

.site-branding .site-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: var(--ls-title);
}

.site-branding .site-title a {
	color: var(--color-white);
	text-decoration: none;
}

.site-description {
	display: none;
}

.menu-toggle {
	display: none; /* shown only on mobile via media query below */
}

/* Top-level list */
.main-navigation > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 0;
	align-self: stretch;   /* ul fills the full masthead height */
	align-items: stretch;  /* li items fill the ul height */
}

/* li and a fill full height — closes the gap between link and submenu */
.main-navigation > ul > li {
	display: flex;
	align-items: center;
}

.main-navigation > ul > li > a {
	display: flex;
	align-items: center;
	height: 100%;
}

.main-navigation,
.main-navigation ul,
.main-navigation li {
	position: static;
}

/* All links */
.main-navigation a {
	display: block;
	color: var(--color-white);
	text-decoration: none;
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: var(--ls-text);
	padding: 0.5rem 1.25rem;
	transition: color 0.2s ease;
}

/* Top-level underline hover */
.main-navigation > ul > li > a {
	position: relative;
}

.main-navigation > ul > li > a::after {
	content: '';
	position: absolute;
	top: calc(50% + 1rem);
	left: 0.75rem;
	right: 0.75rem;
	height: 1px;
	background: var(--color-white);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.main-navigation > ul > li > a:hover::after,
.main-navigation > ul > li > a:focus-visible::after,
.main-navigation > ul > li.current-menu-item > a::after,
.main-navigation > ul > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* =============================================================================
   DROPDOWN — shared base
   ============================================================================= */

.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;   /* aligns with left edge of #site-navigation */
	list-style: none;
	margin: 0;
	padding: 1.75rem 1.25rem 2rem;
	display: grid;
	grid-template-columns: repeat(2, 16rem);
	gap: 0.15rem 4rem;
	background: transparent;
	z-index: 200;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease 0.25s, visibility 0.2s ease 0.25s, transform 0.2s ease 0.25s;
}

/* Invisible bridge — extends above the submenu to close hover gap */
.main-navigation .sub-menu::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: -200vw;
	right: -200vw;
	height: 2rem;
}

/* Full-width dark background behind the sub-menu content */
.main-navigation .sub-menu::after {
	content: '';
	position: absolute;
	inset: 0;
	left: -200vw;
	right: -200vw;
	background: rgba(28, 28, 28, 0.97);
	z-index: -1;
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.main-navigation .sub-menu a {
	font-size: 0.9rem;
	font-weight: 400;
	padding: 0.35rem 0;
	padding-left: 0;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: var(--ls-text);
	white-space: nowrap;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus-visible {
	color: var(--color-orange);
	padding-left: 0.6rem;
	text-decoration: underline;
	text-decoration-color: var(--color-orange);
	text-underline-offset: 3px;
}

/* Tjenester (2nd item) — single column, aligned to its own menu item */
.main-navigation > ul > li:nth-child(2) {
	position: relative;
}

.main-navigation > ul > li:nth-child(2) > .sub-menu {
	grid-template-columns: 16rem;
	left: 0;
}

.main-navigation .sub-menu a::after {
	display: none;
}

/* =============================================================================
   MOBILE NAV — hamburger + full-screen overlay
   ============================================================================= */

@media (max-width: 768px) {
	.site-header__inner {
		grid-template-columns: 1fr auto;
	}

	#site-navigation {
		justify-self: end;
		align-items: center;
	}

	/* Hide desktop menu list */
	.main-navigation > ul {
		display: none !important;
	}

	/* Hamburger button */
	.menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 2.75rem;
		height: 2.75rem;
		background: transparent;
		border: none;
		padding: 0;
		cursor: pointer;
		flex-shrink: 0;
	}

	.hamburger__bar {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--color-white);
		border-radius: 1px;
		transition: transform 0.25s ease, opacity 0.25s ease;
		pointer-events: none;
	}

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

	.menu-toggle.is-open .hamburger__bar:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

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

/* Overlay — full screen, sits behind masthead (z-index 1000) */
.mobile-nav-overlay {
	position: fixed;
	inset: 0;
	background: var(--color-grey);
	z-index: 999;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.mobile-nav-overlay[hidden] {
	display: none;
}

/* Admin bar offset */
.admin-bar .mobile-nav-overlay {
	top: 32px;
}

@media screen and (max-width: 600px) {
	.admin-bar .mobile-nav-overlay {
		top: 46px;
	}
}

/* Panels wrapper — slides horizontally between levels */
.mobile-nav-panels {
	flex: 1;
	position: relative;
	overflow: hidden;
}

/* Individual panel — absolutely stacked, slide via CSS classes */
.mobile-nav-panel {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	padding: 5.5rem 2rem 3rem;
	box-sizing: border-box;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.mobile-nav-panel--active {
	transform: translateX(0);
}

.mobile-nav-panel--left {
	transform: translateX(-100%);
}

.mobile-nav-panel--right {
	transform: translateX(100%);
}

/* Back button */
.mobile-nav-panel__back {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-primary);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: var(--ls-text);
	cursor: pointer;
	padding: 0;
	margin-bottom: 2rem;
	transition: color 0.2s ease;
}

.mobile-nav-panel__back:hover,
.mobile-nav-panel__back:focus-visible {
	color: var(--color-orange);
	outline: none;
}

.mobile-nav-panel__back svg {
	flex-shrink: 0;
	stroke: currentColor;
}

/* List */
.mobile-nav-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav-panel__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav-panel__item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Links and parent buttons */
.mobile-nav-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 0;
	color: var(--color-white);
	text-decoration: none;
	font-family: var(--font-primary);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: var(--ls-title);
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: color 0.2s ease;
}

.mobile-nav-panel__link:hover,
.mobile-nav-panel__link:focus-visible {
	color: var(--color-orange);
	outline: none;
}

/* Chevron on parent items */
.mobile-nav-panel__chevron {
	flex-shrink: 0;
	stroke: var(--color-orange);
	opacity: 0.85;
}

.mobile-nav-panel__link--parent:hover .mobile-nav-panel__chevron,
.mobile-nav-panel__link--parent:focus-visible .mobile-nav-panel__chevron {
	opacity: 1;
}

/* Prevent body scroll when overlay is open */
body.mobile-nav-open {
	overflow: hidden;
}


/* =============================================================================
   SERVICES STRIP
   ============================================================================= */

.services-strip {
	background: var(--color-grey);
	padding: 2.5rem 2rem;
}

.services-strip__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: 72rem;
}

.services-strip__item {
	flex: 0 0 auto;
}

.services-strip__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--color-white);
	padding: 0.5rem;
	border-radius: 4px;
	transition: color 0.2s ease;
}

.services-strip__link:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 4px;
}

.services-strip__icon {
	width: 4.5rem;
	height: 4.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	transition: background 0.25s ease, transform 0.25s ease;
	flex-shrink: 0;
}

.services-strip__icon img,
.services-strip__icon svg {
	width: 3.25rem;
	height: 3.25rem;
	object-fit: contain;
	/* keep icons white via filter when using img tags */
	filter: brightness(0) invert(1);
	transition: filter 0.25s ease;
}

.services-strip__link:hover .services-strip__icon,
.services-strip__link:focus-visible .services-strip__icon {
	background: var(--color-orange);
	transform: scale(1.1);
}

/* icon stays white on hover */
.services-strip__link:hover .services-strip__icon img,
.services-strip__link:hover .services-strip__icon svg,
.services-strip__link:focus-visible .services-strip__icon img,
.services-strip__link:focus-visible .services-strip__icon svg {
	filter: brightness(0) invert(1);
}

.services-strip__label {
	position: relative;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: center;
	letter-spacing: var(--ls-text);
	line-height: 1.3;
	white-space: nowrap;
	padding-bottom: 0.6rem;
}

.services-strip__label::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 1.5rem;
	height: 2px;
	background: var(--color-orange);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.services-strip__link:hover .services-strip__label::after,
.services-strip__link:focus-visible .services-strip__label::after {
	transform: scaleX(1);
}

/* =============================================================================
   ABOVE FOLD — hero + services strip together fill the viewport
   ============================================================================= */

.above-fold {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	min-height: 100vh; /* fallback */
}

.admin-bar .above-fold {
	min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .above-fold {
		min-height: calc(100vh - 46px);
	}
}

/* Desktop: account for the in-flow 72px header (and 32px admin bar when present) */
@media screen and (min-width: 783px) {
	.above-fold {
		min-height: calc(100vh - 72px);
	}

	.admin-bar .above-fold {
		min-height: calc(100vh - 104px); /* 32px admin bar + 72px header */
	}
}

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

.hero {
	position: relative;
	flex: 1; /* fills remaining space after the services strip */
	display: flex;
	min-height: 550px;
	overflow: hidden;
}

/* ----------- Slides ----------- */

.hero__slides {
	position: absolute;
	inset: 0;
}

.hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
}

.hero__slide.is-active {
	opacity: 1;
	z-index: 2;              /* incoming slide fades in on top */
	pointer-events: auto;
}

/* Outgoing slide stays fully opaque underneath the incoming one, so the
   page background never shows through mid-transition (no "flash"). */
.hero__slide.is-prev {
	opacity: 1;
	z-index: 1;
	transition: none;
}

/* ----------- Media layer (video / fallback image) ----------- */

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__video,
.hero__fallback-image,
.hero__mobile-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Mobile-only image is hidden on desktop */
.hero__mobile-image {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hero__video {
		display: none;
	}
}

/* ----------- Navigation arrows ----------- */

.hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--color-white);
	cursor: pointer;
	transition: color 0.2s ease;
}

.hero__nav svg {
	display: block;
	width: 2rem;
	height: 2rem;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
}

.hero__nav:hover,
.hero__nav:focus-visible {
	color: var(--color-orange);
	outline: none;
}

.hero__nav:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 4px;
}

.hero__nav--prev { left: 1.5rem; }
.hero__nav--next { right: 1.5rem; }

/* ----------- Mobile: no slider, always show the first slide only ----------- */

@media (max-width: 768px) {
	.hero {
		min-height: 450px;
	}

	.hero__slide {
		display: none;
	}

	.hero__slide:first-child {
		display: flex;
		opacity: 1;
		pointer-events: auto;
	}

	.hero__nav {
		display: none;
	}

	/* When a dedicated mobile image is set, use it instead of video/desktop image */
	.hero__media--has-mobile .hero__video,
	.hero__media--has-mobile .hero__fallback-image {
		display: none;
	}

	.hero__mobile-image {
		display: block;
	}
}


/* ----------- Content layer ----------- */

.hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--color-white);
	padding: 8rem 1.5rem 4rem;
	max-width: 56rem;
	width: 100%;
}

.hero__heading {
	margin: 0 0 1rem;
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: var(--ls-title);
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* Smaller hero title on mobile (~28px on iPhone SE / 375px) */
@media (max-width: 768px) {
	.hero__heading {
		font-size: clamp(1.5rem, 7.5vw, 2.5rem);
	}
}

.hero__subheading {
	font-size: clamp(1rem, 1.4vw, 1.375rem); /* ~22px on wide screens */
	font-weight: 400;
	line-height: 1.375;
	letter-spacing: 0.64px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
	max-width: 866px;
	margin-inline: auto;
	margin-bottom: 2rem;
}

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

.btn {
	display: inline-block;
	padding: 0.85rem 2rem;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	border: 2px solid var(--color-white);
	color: var(--color-white);
	background: transparent;
	letter-spacing: 0.2px;
	font-family: var(--font-primary);
	transition: background 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
	background: var(--color-white);
	color: var(--color-black);
	outline: none;
}

.hero__cta.btn {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
	border-radius: 2rem;
}

.hero__cta.btn::after {
	content: "\f061";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	margin-left: 0;
	transition: max-width 0.2s ease, opacity 0.2s ease, margin-left 0.2s ease;
}

.hero__cta.btn:hover,
.hero__cta.btn:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
}

.hero__cta.btn:hover::after,
.hero__cta.btn:focus-visible::after {
	max-width: 1.5em;
	opacity: 1;
	margin-left: 0.5rem;
}

/* =============================================================================
   BUTTON — dark variant (light backgrounds)
   ============================================================================= */

.btn--dark {
	background: var(--color-grey);
	border-color: var(--color-grey);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
}

.btn--dark::after {
	content: "\f061";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	max-width: 1.5em;
	overflow: hidden;
	opacity: 1;
	margin-left: 0.5rem;
	transition: max-width 0.2s ease, opacity 0.2s ease, margin-left 0.2s ease;
}

.btn--dark:hover,
.btn--dark:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
}

.btn--dark:hover::after,
.btn--dark:focus-visible::after {
	max-width: 1.5em;
	opacity: 1;
	margin-left: 0.5rem;
}

/* =============================================================================
   BUTTON — secondary variant (grey pill, orange icon)
   ============================================================================= */

.btn--secondary {
	background: #F2F2F2;
	border-color: #F2F2F2;
	color: var(--color-grey);
	border-radius: 2rem;
	display: inline-flex;
	align-items: center;
}

.btn--secondary i {
	color: var(--color-orange);
	transition: color 0.2s ease;
}

/* Uploaded SVG/image icon inside a button */
.btn__icon-img {
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.5rem;
	object-fit: contain;
	flex-shrink: 0;
}

.btn--secondary::after {
	content: "\f061";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	max-width: 1.5em;
	overflow: hidden;
	opacity: 1;
	margin-left: 0.5rem;
	transition: max-width 0.2s ease, opacity 0.2s ease, margin-left 0.2s ease;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
}

.btn--secondary:hover i,
.btn--secondary:focus-visible i {
	color: var(--color-white);
}

.btn--secondary:hover::after,
.btn--secondary:focus-visible::after {
	max-width: 1.5em;
	opacity: 1;
	margin-left: 0.5rem;
}

/* =============================================================================
   PAGE HERO (standard page.php)
   ============================================================================= */

.page-hero {
	background: var(--color-white);
	padding: 5rem 2rem 4.5rem;
}

.page-hero__inner {
	max-width: 68rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
}

.page-hero__title {
	max-width: 38rem;
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
}

.page-template-default .page-hero__title {
	max-width: 100%;
}

.page-hero__content {
	font-size: 1rem;
	line-height: 1.7;
	letter-spacing: var(--ls-text);
	color: #333;
	max-width: 62rem;
}

.page-hero__content p {
	margin: 0 0 0.75rem;
}

.page-hero__content p:last-child {
	margin-bottom: 0;
}

/* Dark variant — used by page-about.php */
.page-hero--dark {
	background: var(--color-grey);
	padding-bottom: 5rem;
}

.page-hero--dark .page-hero__title {
	color: var(--color-white);
	max-width: none;
}

.page-hero--document .page-hero__inner {
	align-items: flex-start;
}

.page-hero--document .page-hero__title {
	max-width: none;
}

.page-hero--wide .page-hero__title {
	max-width: 56rem;
}

.post-hero .page-hero__title {
	max-width: 52rem;
}

.page-hero__subtitle {
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
	line-height: 1.7;
	letter-spacing: var(--ls-text);
	max-width: 52rem;
	margin: 0;
}

.page-hero--dark .page-hero__subtitle {
	color: rgba(255, 255, 255, 0.72);
}

/* Hero button group */
.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

/* FA icon before button text */
.btn i {
	margin-right: 0.4rem;
}

/* Hero buttons: outlined pill on white hero background */
.page-hero .btn--dark {
	background: transparent;
	color: var(--color-grey);
	border-radius: 2rem;
}

.page-hero .btn--dark:hover,
.page-hero .btn--dark:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
}

/* Hero buttons: outlined pill on dark hero background */
.page-hero--dark .btn--dark {
	background: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
	border-radius: 2rem;
}

.page-hero--dark .btn--dark:hover,
.page-hero--dark .btn--dark:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
}

/* =============================================================================
   ABOUT CONTENT (image + sections grid)
   ============================================================================= */

.about-content {
	display: grid;
	grid-template-columns: 0.9fr 1fr;
	min-height: 34rem;
	background-color: var(--color-bg-warm);
}

.about-content__image {
	position: relative;
	overflow: hidden;
	min-height: 24rem;
	margin-top: -1.5rem;
	padding: 0 1.5rem 1.5rem 1.5rem;
}

.about-content__img {
	display: block;
	width: 100%;
}

.about-content__body {
	background: var(--color-bg-warm);
	padding: 4rem 3.5rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.about-section__heading {
	margin: 0 0 0.5rem;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
}

.about-section__body {
	font-size: 0.9375rem;
	line-height: 1.8;
	letter-spacing: var(--ls-text);
	color: #444;
}

.about-section__body p {
	margin: 0 0 0.6rem;
}

.about-section__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 56rem) {
	.about-content {
		grid-template-columns: 1fr;
	}

	.about-content__image {
		min-height: 22rem;
		margin-top: 0;
		padding: 1.5rem 1.5rem 0;
	}

	.about-content__body {
		padding: 3rem 2rem;
	}
}

/* =============================================================================
   ABOUT — ENVIRONMENT SECTION
   ============================================================================= */

.about-env {
	background: #F4FDF4;
	padding: 5rem 2rem;
}

.about-env__inner {
	max-width: 84rem;
	margin: 0 auto;
	text-align: center;
}

.about-env__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
}

.about-env__subtitle {
	margin: 0 0 3.5rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	letter-spacing: var(--ls-text);
	color: #555;
}

.about-env__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	text-align: left;
}

.env-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0; /* prevent grid blowout from wide images */
}

.env-card__image {
	position: relative;
	margin-bottom: 0.5rem;
	width: 100%;
	height: 8rem;
	overflow: hidden;
}

.env-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.env-card__heading {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
}

.env-card__body {
	font-size: 0.9rem;
	line-height: 1.75;
	letter-spacing: var(--ls-text);
	color: #444;
}

.env-card__body p {
	margin: 0 0 0.5rem;
}

.env-card__body p:last-child {
	margin-bottom: 0;
}

.env-card__links {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.env-card__link {
	font-size: 0.875rem;
	color: var(--color-black);
	text-decoration: underline;
	text-underline-offset: 3px;
	letter-spacing: var(--ls-text);
	transition: color 0.2s ease;
}

.env-card__link:hover,
.env-card__link:focus-visible {
	color: var(--color-orange);
}

@media (max-width: 56rem) {
	.about-env__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

@media (min-width: 36rem) and (max-width: 56rem) {
	.about-env__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* About-env contact / feedback row
   ------------------------------------------------------------------ */

.about-env__contact {
	max-width: 84rem;
	margin: 4rem auto 0;
	padding-top: 3.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 5rem;
	align-items: start;
}

.about-env__contact-heading {
	margin: 0 0 1rem;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
}

.cf-title {
	font-size: 14px;
}

.form-policy-text {
	font-size: 14px;
}

.form-policy-text a {
	color: var(--color-black);
	text-underline-offset: 3px;
}

.form-policy-text a:hover {
	color: var(--color-orange);
}

.about-env__contact-body {
	font-size: 0.9rem;
	line-height: 1.75;
	letter-spacing: var(--ls-text);
	color: #444;
}

.about-env__contact-body p {
	margin: 0 0 0.75rem;
}

.about-env__contact-body p:last-child {
	margin-bottom: 0;
}

/* Ninja Forms — green theme to match the section */

.about-env__contact-form .nf-form-cont {
	font-family: var(--font-primary);
}

.about-env__contact-form .nf-field-container {
	margin-bottom: 0;
}

.about-env__contact-form .nf-field-label label,
.about-env__contact-form .nf-field-label .nf-label-span {
	font-size: 0.85rem;
	font-weight: 500;
	color: #3a7a50;
	letter-spacing: var(--ls-text);
	margin-bottom: 0.3rem;
}

.label-above .nf-field-label {
	display: none !important;
}

.about-env__contact-form .nf-field-element input[type="text"],
.about-env__contact-form .nf-field-element input[type="email"],
.about-env__contact-form .nf-field-element input[type="tel"],
.about-env__contact-form .nf-field-element input[type="number"],
.about-env__contact-form .nf-field-element textarea {
	width: 100%;
	border: 1.5px solid #188318;
	border-radius: 0;
	background: #fff;
	padding: 0.6rem 0.85rem;
	font-family: var(--font-primary);
	font-size: 0.9rem;
	color: var(--color-black);
	letter-spacing: var(--ls-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
}

.nf-after-field .nf-error-msg {
	font-size: 12px;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: -10px;
	background: var(--color-bg-warm);
	border-radius: 3px;
	margin-right: 0 !important;
	color: #e80000 !important;
}

.nf-input-limit {
	margin-top: 16px !important;
}

.about-env__contact-form .nf-field-element input::placeholder,
.about-env__contact-form .nf-field-element textarea::placeholder {
	color: #5a9e6a;
	opacity: 1;
}

.about-env__contact-form .nf-field-element input:focus,
.about-env__contact-form .nf-field-element textarea:focus {
	border-color: #3a7a50;
	box-shadow: 0 0 0 3px rgba(106, 184, 122, 0.25);
}

.about-env__contact-form .nf-field-element textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Submit button — text + arrow style */
.about-env__contact-form .nf-field-element input[type="button"],
.about-env__contact-form .nf-field-element input[type="submit"],
.about-env__contact-form .nf-field-element button {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-primary);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--color-black);
	letter-spacing: var(--ls-text);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.about-env__contact-form .nf-field-element input[type="button"]:hover,
.about-env__contact-form .nf-field-element input[type="submit"]:hover,
.about-env__contact-form .nf-field-element button:hover {
	color: var(--color-orange);
}

.page-content-section__wysiwyg a {
	color: var(--color-orange);
	text-underline-offset: 3px;
}

/* Small consent / error text */
.about-env__contact-form .nf-before-form-content,
.about-env__contact-form .nf-after-form-content,
.about-env__contact-form .nf-response-msg {
	font-size: 0.8rem;
	color: #555;
	letter-spacing: var(--ls-text);
}

@media (max-width: 56rem) {
	.about-env__contact {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.about-env__contact-form .nf-form-layout {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   CONTACT PAGE (page-contact.php)
   ============================================================================= */

.page-contact {
	background: var(--color-grey);
	min-height: 80vh;
}

/* Main section — hero + split layout */
.page-contact__main {
	padding: 5rem 2rem 4.5rem;
	text-align: center;
}

.page-contact__main-inner {
	max-width: 72rem;
	margin: 0 auto;
}

.page-contact__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	color: var(--color-white);
	letter-spacing: var(--ls-title);
}

.page-contact__subtitle {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: var(--ls-text);
}

.page-contact__subtitle p {
	margin: 0 0 0.25rem;
}

.page-contact__subtitle p:last-child {
	margin-bottom: 0;
}

/* Split: contact buttons left, form right */
.page-contact__split {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: auto 650px;
	gap: 3rem;
	text-align: left;
	align-items: start;
}

.page-contact__contact-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: fit-content;
}

/* Contact info pill buttons */
.contact-info-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: 0.875rem;
	min-width: 20rem;
	background: #F2F2F2;
	border: 2px solid #F2F2F2;
	border-radius: 2rem;
	padding: 0.85rem 1.75rem;
	color: #222222;
	text-decoration: none;
	font-family: var(--font-primary);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.444;
	letter-spacing: 0.18px;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contact-info-btn i {
	position: absolute;
	left: 1.75rem;
	color: var(--color-orange);
	font-size: 1.375rem;
	transition: color 0.2s ease;
}

/* Uploaded SVG/image icon — matches the position/size of the FA glyph */
.contact-info-btn__icon-img {
	position: absolute;
	left: 1.2rem;
	width: 2.25rem;
	height: 2.25rem;
	object-fit: contain;
	transition: filter 0.2s ease;
}

.contact-info-btn span {
	text-align: left;
}

.contact-info-btn:hover,
.contact-info-btn:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
}

.contact-info-btn:hover i,
.contact-info-btn:focus-visible i {
	color: var(--color-white);
}

/* An <img> can't inherit currentColor, so force the uploaded icon to white on
   hover to match the text (brightness(0) → black silhouette, invert(1) → white). */
.contact-info-btn:hover .contact-info-btn__icon-img,
.contact-info-btn:focus-visible .contact-info-btn__icon-img {
	filter: brightness(0) invert(1);
}

.contact-info-btn--address {
	font-size: 0.9rem;
}

@media (max-width: 52rem) {
	.page-contact__split {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.contact-info-btn {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.page-contact__contact-col {
		width: 100%;
	}
}

/* Company info block (legacy — kept for cache flushing) */
.page-contact__info {
	padding: 3.5rem 2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.contact-logo {
	max-height: 2.75rem;
	width: auto;
	margin-bottom: 0.75rem;
}

.contact-logo img {
	max-height: 2.75rem;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}

/* Info links — same slide-in icon pattern as footer */
.contact-info__link {
	display: flex;
	align-items: center;
	gap: 0;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-size: 0.9375rem;
	letter-spacing: var(--ls-text);
	line-height: 1.8;
	transition: color 0.2s ease, gap 0.2s ease;
}

.contact-info__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: 0;
	overflow: hidden;
	opacity: 0;
	color: var(--color-orange);
	transition: width 0.2s ease, opacity 0.2s ease;
}

.contact-info__link:hover,
.contact-info__link:focus-visible {
	color: var(--color-orange);
	gap: 0.4rem;
}

.contact-info__link:hover .contact-info__icon,
.contact-info__link:focus-visible .contact-info__icon {
	width: 1rem;
	opacity: 1;
}

/* Contact persons grid */
.page-contact__persons {
	padding: 3rem 2rem 6rem;
}

.contact-persons__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 3rem 4rem;
	justify-content: center;
	max-width: 60rem;
}

.contact-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	width: 16rem;
}

.contact-person__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.contact-person__photo picture img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.contact-person__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.contact-person__name {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: var(--ls-title);
}

.contact-person__link {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	font-size: 0.875rem;
	letter-spacing: var(--ls-text);
	transition: color 0.2s ease;
}

.contact-person__link--email {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contact-person__link:hover,
.contact-person__link:focus-visible {
	color: var(--color-orange);
}

@media (max-width: 36rem) {
	.contact-persons__grid {
		gap: 2.5rem;
	}

	.contact-person {
		width: calc(50% - 1.25rem);
	}
}

/* Contact page — team section */
.page-contact__team {
	background: var(--color-white);
	padding: 5rem 2rem 6rem;
}

.team__header {
	max-width: 52rem;
	margin: 0 auto 3.5rem;
	text-align: center;
}

.team__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	color: var(--color-black);
	letter-spacing: var(--ls-title);
}

.team__subtitle {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #555;
	letter-spacing: var(--ls-text);
}

.team__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem 1.5rem;
	max-width: 72rem;
}

.team-member {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.team-member__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-bottom: 1rem;
}

.team-member__photo picture img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.team-member__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease;
}

.team-member:hover .team-member__img {
	transform: scale(1.03);
}

.team-member__info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	align-items: center;
	text-align: center;
}

.team-member__name {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-black);
	letter-spacing: var(--ls-title);
}

.team-member__position {
	margin: 0;
	font-size: 0.875rem;
	color: #666;
	letter-spacing: var(--ls-text);
}

.team-member__link {
	color: #444;
	text-decoration: none;
	font-size: 0.875rem;
	letter-spacing: var(--ls-text);
	transition: color 0.2s ease;
}

.team-member__link--email {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.team-member__link:hover,
.team-member__link:focus-visible {
	color: var(--color-orange);
}

@media (max-width: 64rem) {
	.team__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 44rem) {
	.team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Form column */
.page-contact__form-col {
	min-width: 0;
}

/* Mobile-only form location (below the team section). Hidden until JS moves the
   form node into it, and only ever shown on mobile. */
.page-contact__form-mobile {
	display: none;
}

@media (max-width: 768px) {
	.page-contact__form-mobile:not(:empty) {
		display: block;
		background: var(--color-grey);
		padding: 4rem 2rem 5rem;
	}

	.page-contact__form-mobile .page-contact__form-col {
		width: 100%;
		max-width: 650px;
		margin: 0 auto;
	}
}

.page-contact__form-inner {
	width: 100%;
}

/* Ninja Forms — dark bottom-border style */
.page-contact__form-inner .nf-form-cont {
	font-family: var(--font-primary);
}

.page-contact__form-inner .nf-field-container {
	margin-bottom: 0.5rem;
}

.page-contact__form-inner .field-wrap:not(.checkbox-wrap) .nf-field-label label,
.page-contact__form-inner .field-wrap:not(.checkbox-wrap) .nf-field-label .nf-label-span {
	display: none; /* placeholders act as labels */
}

#nf-label-field-12 {
	color: #fff;
	font-size: 14px;
	letter-spacing: .32px;
	font-weight: 400;
}

.page-contact__form-inner .nf-field-element input[type="text"],
.page-contact__form-inner .nf-field-element input[type="email"],
.page-contact__form-inner .nf-field-element input[type="tel"],
.page-contact__form-inner .nf-field-element input[type="number"],
.page-contact__form-inner .nf-field-element textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	padding: 0.6rem;
	font-family: var(--font-primary);
	font-size: 0.9rem;
	font-style: italic;
	color: var(--color-white);
	letter-spacing: var(--ls-text);
	outline: none;
	transition: border-color 0.2s ease;
}

.page-contact__form-inner .nf-field-element input::placeholder,
.page-contact__form-inner .nf-field-element textarea::placeholder {
	color: rgba(255, 255, 255, 0.45);
	font-style: italic;
}

.page-contact__form-inner .nf-field-element input:focus,
.page-contact__form-inner .nf-field-element textarea:focus {
	border-bottom-color: var(--color-white);
	background: var(--color-white);
	color: var(--color-grey);
}

.page-contact__form-inner .nf-field-element textarea {
	min-height: 4rem;
	height: 100px !important;
	resize: none;
}

/* Checkbox */
.page-contact__form-inner .nf-field-element input[type="checkbox"] {
	accent-color: var(--color-orange);
	width: 1rem;
	height: 1rem;
	position: relative;
	top: 3px;
}

.page-contact__form-inner .nf-field-element .checkbox-wrap label,
.page-contact__form-inner .nf-field-element .checkbox-container label {
	display: flex !important;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: var(--ls-text);
	line-height: 1.5;
	font-style: normal;
}

/* Submit */
.page-contact__form-inner .nf-field-element input[type="button"],
.page-contact__form-inner .nf-field-element input[type="submit"],
.page-contact__form-inner .nf-field-element button {
	float: right;
	background: none;
	border: none;
	border-bottom: 1.5px solid var(--color-white);
	border-radius: 0;
	padding: 0.2rem 0;
	font-family: var(--font-primary);
	font-size: 0.9rem;
	font-weight: 600;
	font-style: normal;
	color: var(--color-white);
	letter-spacing: var(--ls-text);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.page-contact__form-inner .nf-field-element input[type="button"]:hover,
.page-contact__form-inner .nf-field-element input[type="submit"]:hover,
.page-contact__form-inner .nf-field-element button:hover {
	color: var(--color-orange);
	border-bottom-color: var(--color-orange);
}

/* Success / error messages */
.page-contact__form-inner .nf-response-msg,
.page-contact__form-inner .nf-error-msg {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: var(--ls-text);
}

/* =============================================================================
   PAGE GALLERY
   ============================================================================= */

.page-gallery {
	padding: 0;
}

.page-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0 0.75rem;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
}

.page-gallery__item {
	overflow: hidden;
}

.page-gallery__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
}

.page-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.page-gallery__link:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 2px;
}

.page-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.page-gallery__link:hover .page-gallery__img,
.page-gallery__link:focus-visible .page-gallery__img {
	transform: scale(1.06);
}

@media (max-width: 64rem) {
	.page-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 40rem) {
	.page-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =============================================================================
   PAGE CONTENT SECTION (WYSIWYG + feature boxes)
   ============================================================================= */

.page-content-section {
	padding: 5rem 2rem;
	background: var(--color-white);
}

.page-content-section__inner {
	max-width: 80rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 0.55fr;
	gap: 4rem;
	align-items: start;
}

/* Left column — WYSIWYG */

.page-content-section__wysiwyg {
	margin-bottom: 2.5rem;
}

.page-content-section__left .btn--dark {
	border-radius: 2rem;
}

.page-content-section__left .btn--dark::after,
.page-content-section__left .btn--dark:hover::after,
.page-content-section__left .btn--dark:focus-visible::after {
	display: none;
}

.page-content-section__wysiwyg h2 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
	margin: 0 0 0.75rem;
}

.page-content-section__wysiwyg h3 {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
	margin: 0 0 0.75rem;
}

.page-content-section__wysiwyg h2:not(:first-child),
.page-content-section__wysiwyg h3:not(:first-child) {
	margin-top: 2rem;
}

.page-content-section__wysiwyg p {
	font-size: 0.9375rem;
	line-height: 1.8;
	letter-spacing: var(--ls-text);
	color: #333;
	margin: 0 0 1rem;
}

.page-content-section__wysiwyg ul,
.page-content-section__wysiwyg ol {
	padding-left: 1.25rem;
	margin: 0 0 1.25rem;
}

.page-content-section__wysiwyg li {
	font-size: 0.9375rem;
	line-height: 1.8;
	letter-spacing: var(--ls-text);
	color: #333;
	margin-bottom: 0.7rem;
}

.page-content-section__wysiwyg strong {
	font-weight: 700;
	color: var(--color-black);
}

/* FAQ — <details> / <summary> accordion (page content + single post) */

.page-content-section__wysiwyg details,
.post-content details {
	border: 1.5px solid #e5e5e5;
	border-radius: 4px;
	margin: 0 0 0.5rem;
	transition: border-color 0.2s;
}

.page-content-section__wysiwyg details[open],
.post-content details[open] {
	border-color: var(--color-orange);
}

.page-content-section__wysiwyg details summary,
.post-content details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1.1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: var(--ls-text);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: color 0.15s;
}

.page-content-section__wysiwyg details summary::-webkit-details-marker,
.post-content details summary::-webkit-details-marker {
	display: none;
}

.page-content-section__wysiwyg details summary::after,
.post-content details summary::after {
	content: '+';
	flex-shrink: 0;
	font-size: 1.35rem;
	font-weight: 300;
	line-height: 1;
	color: var(--color-orange);
}

.page-content-section__wysiwyg details[open] summary::after,
.post-content details[open] summary::after {
	content: '−';
}

.page-content-section__wysiwyg details summary:hover,
.post-content details summary:hover {
	color: var(--color-orange);
}

.page-content-section__wysiwyg details > p,
.page-content-section__wysiwyg details > div,
.page-content-section__wysiwyg details > ul,
.page-content-section__wysiwyg details > ol,
.post-content details > p,
.post-content details > div,
.post-content details > ul,
.post-content details > ol {
	margin: 0;
	padding: 0 1.1rem 1rem;
	font-size: 0.9rem;
	line-height: 1.8;
	color: #444;
}

.page-content-section__wysiwyg details > p:first-of-type,
.post-content details > p:first-of-type {
	padding-top: 0.25rem;
}

/* Right column — feature boxes */

.page-content-section__right {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.content-box {
	padding: 2rem 1.75rem;
	border-radius: 4px;
	text-align: center;
}

.content-box--grey {
	background: #f2f2f2;
}

.content-box--orange {
	background: var(--color-bg-warm);
}

.content-box__icon {
	display: block;
	font-size: 2rem;
	margin-bottom: 0.875rem;
	line-height: 1;
}

/* Uploaded SVG/image icon (replaces the FontAwesome glyph) */
.content-box__icon-img {
	display: block;
	width: 2rem;
	height: 2rem;
	margin-inline: auto;   /* centre within the centred box (block img ignores text-align) */
	object-fit: contain;
}

.content-box--grey .content-box__icon {
	color: var(--color-black);
}

.content-box--linked {
	position: relative;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-box--linked:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.content-box__overlay-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.content-box--orange .content-box__icon {
	color: var(--color-orange);
}

.content-box__heading {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: var(--ls-title);
	line-height: 1.3;
}

.content-box--grey .content-box__heading,
.content-box--orange .content-box__heading {
	color: var(--color-black);
}

.content-box__body {
	font-size: 0.875rem;
	line-height: 1.75;
	letter-spacing: var(--ls-text);
}

.content-box--grey .content-box__body,
.content-box--orange .content-box__body {
	color: #444;
}

.content-box__body p {
	margin: 0 0 0.5rem;
}

.content-box__body p:last-child {
	margin-bottom: 0;
}

.content-box__body a {
	color: var(--color-orange);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s;
}

.content-box__body a:hover,
.content-box__body a:focus-visible {
	text-decoration-color: var(--color-orange);
}

.content-box__body ul,
.content-box__body ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

.content-box__body li {
	padding: 0.2rem 0;
}

@media (max-width: 56rem) {
	.page-content-section__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* =============================================================================
   PROJECTS SECTION
   ============================================================================= */

.projects-section {
	background: var(--color-bg-warm);
	padding: 4rem 2rem;
}

.projects-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	max-width: 72rem;
	margin: 0 auto;
	align-items: start;
}

/* ----------- Card ----------- */

.project-card {
	display: flex;
	flex-direction: column;
}

/* ----------- Media / image swap ----------- */

.project-card__media-link {
	display: block;
	overflow: hidden;
}

.project-card__media {
	position: relative;
	overflow: hidden;
}

.project-card__img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.35s ease;
}

.project-card__img--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.project-card__media-link:hover .project-card__img--default,
.project-card__media-link:focus-visible .project-card__img--default {
	opacity: 0;
}

.project-card__media-link:hover .project-card__img--hover,
.project-card__media-link:focus-visible .project-card__img--hover {
	opacity: 1;
}

/* Respect reduced-motion — skip the crossfade */
@media (prefers-reduced-motion: reduce) {
	.project-card__img {
		transition: none;
	}
}

/* Imagify picture wrapper — class moves to <picture>, inner <img> needs explicit sizing */
.project-card__media picture {
	display: block;
	width: 100%;
}

.project-card__media picture img {
	display: block;
	width: 100%;
	height: auto;
}

/* ----------- Body ----------- */

.project-card__body {
	padding: 1.25rem 0 0;
}

.project-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--ls-title);
}

.project-card__title a {
	color: var(--color-black);
	text-decoration: none;
}

.project-card__title a:hover,
.project-card__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--color-orange);
	text-underline-offset: 3px;
}

.project-card__excerpt {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.6;
	letter-spacing: var(--ls-text);
	color: #444;
}

.project-card__readmore {
	display: inline-flex;
	align-items: flex-end;
	gap: 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-black);
	text-decoration: none;
	letter-spacing: var(--ls-text);
	transition: color 0.2s ease, gap 0.2s ease;
}

.project-card__readmore span {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.project-card__readmore i {
	display: inline-block;
}

.project-card__readmore:hover,
.project-card__readmore:focus-visible {
	color: var(--color-orange);
	gap: 1rem;
}

/* ----------- Responsive ----------- */

@media (max-width: 768px) {
	.projects-section__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}

/* =============================================================================
   CLIENTS SECTION
   ============================================================================= */

/* =============================================================================
   TESTIMONIALS SECTION (auto-scrolling marquee)
   ============================================================================= */

.testimonials-section {
	background: var(--color-white);
	padding: 3.5rem 0 1rem;
	overflow: hidden;
}

.testimonials-marquee {
	/* Fade the edges so cards glide in/out instead of hard-cutting */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	/* Horizontal scroll container — native finger-scroll on touch, JS drives auto-scroll */
	overflow-x: auto;
	overflow-y: hidden;
	touch-action: pan-x;
	cursor: grab;
	scrollbar-width: none;         /* Firefox */
	-ms-overflow-style: none;      /* old Edge */
}

.testimonials-marquee::-webkit-scrollbar {
	display: none;                 /* Chrome/Safari */
}

.testimonials-marquee.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.testimonials-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	width: max-content;
	gap: 3rem;
}

.testimonials-track__item {
	/* 3 cards visible per viewport width (accounting for the gaps) */
	flex: 0 0 calc((100vw - 6rem) / 3);
	max-width: 26rem;
}

.testimonial-card {
	margin: 0;
	padding: 0 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.testimonial-card__stars {
	display: flex;
	gap: 0.15rem;
	font-size: 1.05rem;
	line-height: 1;
	color: #FFB800;
}

.testimonial-card__quote {
	margin: 0;
	font-style: italic;
	font-size: clamp(0.95rem, 1.4vw, 1.05rem);
	line-height: 1.55;
	color: var(--color-black);
	max-width: 24rem;
}

.testimonial-card__quote::before { content: "\00AB"; margin-right: -0.15em; } /* « */
.testimonial-card__quote::after  { content: "\00BB"; margin-left: -0.15em; }  /* » */

.testimonial-card__cite {
	font-size: 0.85rem;
	font-style: italic;
	color: #777;
}

@media (max-width: 900px) {
	.testimonials-track__item {
		flex-basis: calc((100vw - 3rem) / 2); /* 2 visible on tablet */
	}
	.testimonials-track {
		gap: 2rem;
	}
}

@media (max-width: 560px) {
	.testimonials-track__item {
		flex-basis: 80vw; /* 1 visible on mobile */
	}
}

/* =============================================================================
   CLIENTS SECTION
   ============================================================================= */

.clients-section {
	background: var(--color-white);
	padding: 3.5rem 2rem;
}

.clients-section__heading {
	text-align: center;
	margin: 0 0 2.5rem;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	font-weight: 600;
	letter-spacing: var(--ls-title);
	color: #999;
	text-transform: uppercase;
}

.clients-section__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 72rem;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
	gap: 2rem 3rem;
}

.clients-section__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.clients-section__link {
	display: block;
	line-height: 0; /* removes inline-block gap under img */
	border-radius: 2px;
	transition: opacity 0.2s ease;
}

.clients-section__link:hover,
.clients-section__link:focus-visible {
	opacity: 0.5;
}

.clients-section__link:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 4px;
}

.clients-section__logo {
	display: block;
	height: 7rem;      /* explicit height — SVGs have no intrinsic dimensions */
	width: auto;
	max-width: 9rem;
	object-fit: contain;
	/* Render all logos as black regardless of source colour */
}

@media (max-width: 900px) {
	.clients-section__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.clients-section__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem 1rem;
	}

	.clients-section__logo {
		height: 4rem;
		max-width: 5rem;
	}
}

/* =============================================================================
   USP SECTION
   ============================================================================= */

.usp-section {
	background: var(--color-white);
	padding: 4rem 2rem 3.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.usp-section__heading {
	text-align: center;
	font-size: 2.25rem;
	font-weight: 500;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
	margin: 0 0 3rem;
}

.usp-section__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 72rem;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 1rem 2rem;
	flex-wrap: wrap;
}

.usp-section__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1 1 8rem;
	max-width: 12rem;
	gap: 1rem;
}

.usp-section__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.usp-section__icon img {
	display: block;
	max-width: 100%;
	height: auto;
}

.usp-section__label {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	letter-spacing: var(--ls-text);
	color: var(--color-black);
}

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

.error-404 {
	padding: 6rem 2rem 7rem;
	text-align: center;
}

.error-404__inner {
	max-width: 42rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.error-404__code {
	display: block;
	font-size: clamp(7rem, 18vw, 14rem);
	font-weight: 900;
	line-height: 1;
	color: var(--color-orange);
	letter-spacing: -0.04em;
	font-family: var(--font-primary);
	opacity: 0.15;
	user-select: none;
	margin-bottom: -1.5rem;
}

.error-404__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
	margin: 0;
}

.error-404__body {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-text-muted, #555);
	margin: 0;
	max-width: 36rem;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 0.5rem;
}

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

.site-footer {
	background: var(--color-grey);
	color: var(--color-white);
	font-size: 0.9rem;
	letter-spacing: var(--ls-text);
}

.site-footer__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 3.5rem 2rem 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

/* Logo */
.site-footer__logo {
	margin-bottom: 1.75rem;
}

.site-footer__logo a {
	display: block;
	line-height: 0;
}

.footer-logo {
	max-height: 3rem;
	width: auto;
	filter: brightness(0) invert(1);
}

.footer-logo img {
	max-height: 3rem;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}

.footer-logo-text {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-white);
}

/* Five columns */
.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem 3rem;
	width: 100%;
}

/* Groups are transparent to layout on desktop — the 5 columns sit in the grid.
   On tablet/mobile they become the two independent, self-packing columns. */
.footer-col-group {
	display: contents;
}

.footer-col__heading {
	margin: 0 0 0.75rem;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: var(--ls-title);
	color: var(--color-white);
}

/* Footer links — icon slides in on hover */
.footer-link,
.footer-address__plain {
	display: flex;
	align-items: center;
	gap: 0;
	color: var(--color-white);
	text-decoration: none;
	line-height: 1.8;
	transition: color 0.2s ease, gap 0.2s ease;
	width: fit-content;
}

.footer-address {
	display: flex;
	flex-direction: column;
	font-style: normal;
}

.footer-address__line {
	display: block;
	line-height: 1.8;
}

.footer-link__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: 0;
	overflow: hidden;
	opacity: 0;
	color: var(--color-orange);
	transition: width 0.2s ease, opacity 0.2s ease;
}

/* Uploaded SVG/image icon (replaces the FontAwesome glyph) */
.footer-link__icon-img {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	object-fit: contain;
}

.footer-link__icon svg {
	width: 1rem;
	height: 1rem;
}

.footer-link:hover,
.footer-link:focus-visible {
	color: var(--color-orange);
	gap: 0.4rem;
}

.footer-link:hover .footer-link__icon,
.footer-link:focus-visible .footer-link__icon {
	width: 1.25rem;
	opacity: 1;
}

.footer-link:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Opening hours — no link, plain text */
.footer-hours {
	margin: 0;
	line-height: 1.8;
}

/* Bottom bar */
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__bottom-inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.25rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.8rem;
}

.footer-org {
	margin: 0;
	opacity: 0.6;
	white-space: nowrap;
}

.footer-legal {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.footer-legal__link {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-legal__link:hover,
.footer-legal__link:focus-visible {
	color: var(--color-orange);
	text-decoration: underline;
	text-decoration-color: var(--color-orange);
	text-underline-offset: 4px;
}

.footer-copyright {
	color: rgba(255, 255, 255, 0.5);
}

.footer-badges {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.footer-badge {
	display: block;
	max-height: 2.5rem;
	width: auto;
	opacity: 1;
}

.footer-badge img {
	display: block;
	max-height: 2.5rem;
	width: auto;
}

/* Responsive */
@media (max-width: 900px) {
	/* Two side-by-side groups, each stacking its own items top-down with no
	   forced equal-height rows. */
	.site-footer__columns {
		display: flex;
		align-items: flex-start;
		gap: 3rem;
	}

	.footer-col-group {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 2rem;
	}
}

@media (max-width: 540px) {
	/* Keep the two flex groups from the 900px rule; just tighten gaps */
	.site-footer__columns {
		gap: 1.5rem;
	}

	.footer-col-group {
		gap: 1.75rem;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		text-align: center;
	}

	.footer-legal {
		justify-content: center;
	}
}

/* =============================================================================
   CALCULATORS OVERVIEW (page-calculators.php)
   ============================================================================= */

.calc-overview {
	background: var(--color-white);
	padding: 0 2rem 6rem;
}

.calc-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 72rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.calc-card {
	display: flex;
}

.calc-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	width: 100%;
	padding: 2.5rem 1.75rem;
	background: var(--color-bg-warm);
	border-radius: 6px;
	text-decoration: none;
	color: var(--color-black);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calc-card__link:hover,
.calc-card__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
	outline: none;
}

.calc-card__link:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 3px;
}

.calc-card__icon {
	font-size: 2.25rem;
	line-height: 1;
	color: var(--color-orange);
}

.calc-card__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
}

.calc-card__desc {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #555;
}

.calc-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-orange);
	transition: gap 0.2s ease;
}

.calc-card__link:hover .calc-card__cta,
.calc-card__link:focus-visible .calc-card__cta {
	gap: 0.65rem;
}

@media (max-width: 900px) {
	.calc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.calc-grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   CALCULATOR — single (page-calculator.php)
   ============================================================================= */

/* Back-to-overview link at the top of the hero */
.calc-back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-orange);
	text-decoration: none;
	transition: gap 0.2s ease;
}

.calc-back:hover,
.calc-back:focus-visible {
	gap: 0.7rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.calc-hero-price {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	color: var(--color-orange);
}

.calc-hero-price__mva {
	font-size: 0.7em;
	font-weight: 600;
	color: var(--color-black);
}

.calc-hero-price__ref {
	color: var(--color-orange);
	font-weight: 700;
}

.calc-single {
	background: var(--color-white);
	padding: 0 2rem 6rem;
}

.calc-single__inner {
	max-width: 44rem;
	margin: 0 auto;
}

.calc-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem 1.5rem;
	margin-bottom: 2rem;
}

.calc-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.calc-field--hidden {
	display: none;
}

/* Checkbox add-on rows span the full width, box + label inline */
.calc-field--checkbox {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	gap: 0.6rem;
}

.calc-field__checkbox {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--color-orange);
}

.calc-field__checkbox-label {
	font-size: 0.95rem;
	color: var(--color-black);
	cursor: pointer;
}

/* Informational note attached under a field's control */
.calc-note {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #666;
}

.calc-note--hidden {
	display: none;
}

/* Read-only computed display (e.g. Totalt antall ark) */
.calc-field--display {
	grid-column: 1 / -1;
}

.calc-field--display .calc-field__control {
	background: #fafafa;
	color: #555;
}

.calc-field__label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-black);
	letter-spacing: var(--ls-text);
}

.calc-field__control {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	font-family: var(--font-primary);
	font-size: 1rem;
	color: var(--color-black);
	background: var(--color-white);
	border: 1px solid #ccc;
	border-radius: 4px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calc-field__control:focus {
	outline: none;
	border-color: var(--color-orange);
	box-shadow: 0 0 0 3px rgba(244, 115, 67, 0.2);
}

.calc-result {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 22rem;
}

.calc-result__total {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.9rem 1.25rem;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	background: #fafafa;
}

.calc-result__price {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-black);
}

.calc-result__note {
	font-size: 0.8rem;
	color: #666;
}

.calc-result__disclaimer {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #666;
}

.calc-result__disclaimer-ref {
	color: var(--color-orange);
	font-weight: 700;
}

.btn--calc-cta {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
	text-align: center;
	border-radius: 2rem;   /* pill, matching the site's other CTAs */
	padding: 0.9rem 2rem;
	font-size: 1.05rem;
}

.btn--calc-cta:hover,
.btn--calc-cta:focus-visible {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

@media (max-width: 560px) {
	.calc-form {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   BLOG ARCHIVE (home.php)
   ============================================================================= */

.blog-hero__intro {
	max-width: 52rem;
	text-align: center;
}

.blog-grid-section {
	background: #f7f7f7;
	padding: 4rem 2rem 5rem;
}

.blog-grid-section__inner {
	max-width: 72rem;
	margin: 0 auto;
}

.blog-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

/* Card */
.blog-card {
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.blog-card:hover {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Thumbnail */
.blog-card__img-wrap {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}

.blog-card__img-wrap picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.blog-card__img-wrap picture img,
.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__img-wrap picture img,
.blog-card:hover .blog-card__img {
	transform: scale(1.04);
}

/* Body */
.blog-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-card__meta {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	color: #888;
	letter-spacing: var(--ls-text);
}

.blog-card__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-title);
}

.blog-card__link {
	color: var(--color-black);
	text-decoration: none;
}

.blog-card__link:hover,
.blog-card__link:focus-visible {
	color: var(--color-orange);
}

.blog-card__excerpt {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #444;
	flex: 1;
}

.blog-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-orange);
	text-decoration: none;
	letter-spacing: var(--ls-text);
	margin-top: auto;
}

.blog-card__read-more::after {
	content: "\f061";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	-webkit-font-smoothing: antialiased;
	transition: transform 0.2s ease;
}

.blog-card__read-more:hover::after,
.blog-card__read-more:focus-visible::after {
	transform: translateX(4px);
}

/* Pagination */
.blog-pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

.blog-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers:focus-visible {
	background: var(--color-bg-warm);
	border-color: var(--color-orange);
	color: var(--color-orange);
	outline: none;
}

.blog-pagination .page-numbers.current {
	background: var(--color-orange);
	color: var(--color-white);
	border-color: var(--color-orange);
}

.blog-pagination .page-numbers.dots:hover {
	background: transparent;
	border-color: transparent;
	color: var(--color-black);
}

.blog-no-posts {
	text-align: center;
	padding: 3rem 0;
	color: #666;
}

@media (max-width: 900px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}

	.blog-grid-section {
		padding: 3rem 1.25rem 4rem;
	}
}

/* =============================================================================
   SINGLE POST
   ============================================================================= */

/* Byline — sits below the title inside the page-hero */
.post-byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: #555;
	letter-spacing: var(--ls-text);
}

.post-byline__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

/* Imagify wraps avatars too */
.post-byline__avatar img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.post-byline__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-align: left;
}

.post-byline__author a {
	font-weight: 600;
	color: var(--color-black);
	text-decoration: none;
}

.post-byline__author a:hover {
	color: var(--color-orange);
}

.post-byline__dates {
	color: #888;
	font-size: 0.8125rem;
}

.post-byline__separator {
	margin: 0 0.25rem;
}

.post-byline__updated {
	color: #aaa;
}

/* Featured image — wider than content column, not full-bleed */
.post-featured-image {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 2rem;
	max-height: 28rem;
	overflow: hidden;
}

.post-featured-image__img {
	display: block;
	width: 100%;
	height: 28rem;
	object-fit: cover;
	object-position: center;
}

/* Imagify picture wrapper */
.post-featured-image picture {
	display: block;
	width: 100%;
	height: 28rem;
}

.post-featured-image picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Content column */
.post-content-wrap {
	max-width: 48rem;
	margin: 0 auto;
	padding: 3.5rem 2rem 5rem;
}

.post-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: #222;
	letter-spacing: var(--ls-text);
}

.post-content h2 {
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
	margin: 2.5rem 0 0.75rem;
	letter-spacing: var(--ls-title);
}

.post-content h3 {
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-black);
	margin: 2rem 0 0.5rem;
}

.post-content p {
	margin: 0 0 1.25rem;
}

.post-content ul,
.post-content ol {
	margin: 0 0 1.25rem 1.5rem;
	padding: 0;
}

.post-content li {
	margin-bottom: 0.4rem;
}

.post-content a {
	color: var(--color-orange);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s ease;
}

.post-content a:hover {
	text-decoration-color: var(--color-orange);
}

.post-content strong {
	font-weight: 700;
	color: var(--color-black);
}

/* Blockquote */
.post-content blockquote,
.post-content .wp-block-quote {
	position: relative;
	margin: 2.5rem 0;
	padding: 1.5rem 1.75rem 1.5rem 2.25rem;
	border-left: 3px solid var(--color-orange);
	background: var(--color-bg-warm);
	border-radius: 0 5px 5px 0;
}

.post-content blockquote::before,
.post-content .wp-block-quote::before {
	content: '\201C';
	position: absolute;
	top: -0.25rem;
	left: 1rem;
	font-size: 11rem;
	line-height: 1;
	color: var(--color-orange);
	opacity: 0.15;
	font-family: Georgia, serif;
	pointer-events: none;
}

.post-content blockquote p,
.post-content .wp-block-quote p {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-style: italic;
	line-height: 1.85;
	color: var(--color-black);
}

.post-content blockquote p:last-of-type,
.post-content .wp-block-quote p:last-of-type {
	margin-bottom: 0;
}

.post-content blockquote cite,
.post-content .wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	font-size: 0.85rem;
	font-style: normal;
	font-weight: 500;
	color: #777;
	letter-spacing: 0.01em;
}

/* Full/large/default block images + galleries bleed slightly beyond the content column */
.post-content .wp-block-image.size-full,
.post-content .wp-block-image.size-large,
.post-content .wp-block-image.is-style-default,
.post-content figure.wp-block-gallery.has-nested-images {
	border-radius: 5px;
	overflow: hidden;
}

@media (min-width: 40rem) {
	.post-content .wp-block-image.size-full,
	.post-content .wp-block-image.size-large,
	.post-content .wp-block-image.is-style-default,
	.post-content figure.wp-block-gallery.has-nested-images {
		margin-left: -40px;
		margin-right: -40px;
	}
}

/* Media-text blocks bleed wider — stacking on mobile is handled by Gutenberg */
@media (min-width: 56rem) {
	.post-content .wp-block-media-text.is-stacked-on-mobile {
		margin-left: -80px;
		margin-right: -80px;
	}
}

/* Author bio box — E-E-A-T */
.post-author-box {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-top: 3.5rem;
	padding: 1.75rem;
	background: var(--color-bg-warm);
	border-left: 4px solid var(--color-orange);
}

.post-author-box__avatar {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.post-author-box__avatar img {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.post-author-box__body {
	flex: 1;
}

.post-author-box__name {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: 0.9375rem;
}

.post-author-box__name a {
	color: var(--color-black);
	text-decoration: none;
}

.post-author-box__name a:hover {
	color: var(--color-orange);
}

.post-author-box__bio {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
	color: #444;
}

/* Responsive */
@media (max-width: 600px) {
	.post-featured-image,
	.post-featured-image picture {
		height: 18rem;
	}

	.post-featured-image__img,
	.post-featured-image picture img {
		height: 18rem;
	}

	.post-content-wrap {
		padding: 2.5rem 1.25rem 4rem;
	}

	.post-author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* =============================================================================
   SERVICE PAGE (page-service.php)
   ============================================================================= */

/* Split section — image left / intro right */
.service-split {
	display: grid;
	grid-template-columns: 53% 47%;
	align-items: stretch;
	gap: 0 4.5rem;
	background: var(--color-bg-warm);
	padding: 2.5rem;
}

/* Featured image — position:absolute trick fills the grid cell regardless of element type */
.service-split__img-wrap {
	display: block;
	position: relative;
	overflow: hidden;
	min-height: 34rem;
}

.service-split__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Imagify picture wrapper */
.service-split__img-wrap picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.service-split__img-wrap picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-split__img-wrap:hover .service-split__img,
.service-split__img-wrap:hover picture img {
	transform: scale(1.03);
}

/* Intro text — vertically centred */
.service-intro {
	padding: 3.5rem 3.5rem 3.5rem 3rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1.25rem;
}

.service-intro__heading {
	margin: 0;
	font-size: clamp(1.25rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
	letter-spacing: var(--ls-title);
}

.service-intro__text {
	font-size: 1rem;
	line-height: 1.75;
	color: #333;
	letter-spacing: var(--ls-text);
}

.service-intro__text p {
	margin: 0 0 0.75rem;
}

.service-intro__text p:last-child {
	margin-bottom: 0;
}

.service-text-link {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--color-black);
	text-decoration: none;
	letter-spacing: var(--ls-text);
	transition: color 0.2s ease, gap 0.2s ease;
}

.service-text-link span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.service-text-link i {
	display: inline-block;
}

.service-text-link:hover,
.service-text-link:focus-visible {
	color: var(--color-orange);
	gap: 1.25rem;
}

.service-intro__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.service-intro__bullet {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-black);
	letter-spacing: var(--ls-text);
}

.service-intro__bullet::before {
	content: '';
	flex-shrink: 0;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: var(--color-orange);
	margin-top: 0.45em;
}

/* 3-column lightbox gallery — sits on the warm background */
.service-gallery {
	background: var(--color-bg-warm);
	padding: 3rem 2.5rem 2.5rem;
}

.service-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.service-gallery__item {
	overflow: hidden;
}

.service-gallery__figure {
	margin: 0;
	height: 30rem;
}

.service-gallery__link {
	display: block;
	height: 100%;
}

.service-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Imagify picture wrapper */
.service-gallery__item picture {
	display: block;
	width: 100%;
	height: 100%;
}

.service-gallery__item picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-gallery__link:hover .service-gallery__img,
.service-gallery__link:hover picture img {
	transform: scale(1.04);
}

/* Responsive */
@media (max-width: 900px) {
	.service-split {
		grid-template-columns: 1fr;
		padding: 1.5rem 1.5rem 0;
	}

	.service-split__img-wrap {
		min-height: 22rem;
	}

	.service-intro {
		padding: 2rem 0.5rem;
	}

	.service-gallery {
		padding: 1.5rem 1.5rem 2rem;
	}

	.service-gallery__figure {
		height: 22rem;
	}
}

@media (max-width: 600px) {
	.service-split {
		padding: 1rem 1rem 0;
	}

	.service-gallery {
		padding: 1rem 1rem 1.5rem;
	}

	.service-gallery__grid {
		grid-template-columns: 1fr;
	}

	.service-gallery__figure {
		height: 18rem;
	}

	.service-split__img-wrap {
		min-height: 18rem;
	}
}

/* =============================================================================
   AUTHOR PAGE (author.php)
   ============================================================================= */

.author-hero {
	background: var(--color-grey);
	padding: 5rem 2rem 4.5rem;
}

.author-hero__inner {
	max-width: 52rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
}

/* Avatar */
.author-hero__avatar-wrap {
	flex-shrink: 0;
}

.author-hero__avatar {
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-orange);
	display: block;
}

/* Imagify picture wrapper for avatar */
.author-hero__avatar-wrap picture {
	display: block;
	width: 7.5rem;
	height: 7.5rem;
}

.author-hero__avatar-wrap picture img {
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-orange);
	display: block;
}

.author-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
}

.author-hero__name {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	color: var(--color-white);
	letter-spacing: var(--ls-title);
	line-height: 1.1;
}

.author-hero__job-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-orange);
	letter-spacing: var(--ls-text);
}

.author-hero__company {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
	margin-left: 0.25rem;
}

.author-hero__bio {
	margin: 0;
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.75);
	max-width: 42rem;
	letter-spacing: var(--ls-text);
}

.author-hero__post-count {
	margin: 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: var(--ls-text);
}

.author-hero__post-count strong {
	color: var(--color-white);
}

/* Social links */
.author-hero__social {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.author-hero__social-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-white);
	text-decoration: none;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: 2rem;
	letter-spacing: var(--ls-text);
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.author-hero__social-link:hover,
.author-hero__social-link:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
	outline: none;
}

.author-hero__social-link--linkedin:hover,
.author-hero__social-link--linkedin:focus-visible {
	background: #0a66c2;
	border-color: #0a66c2;
}

/* Post archive section */
.author-posts {
	background: var(--color-white);
	padding: 4rem 2rem 5rem;
}

.author-posts__inner {
	max-width: 72rem;
	margin: 0 auto;
}

.author-posts__heading {
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 700;
	color: var(--color-black);
	margin: 0 0 2.5rem;
	letter-spacing: var(--ls-title);
}

/* Responsive */
@media (max-width: 700px) {
	.author-hero {
		padding: 4rem 1.25rem 3.5rem;
	}

	.author-posts {
		padding: 3rem 1.25rem 4rem;
	}
}

/* =============================================================================
   CITY PAGE SECTIONS (page-city.php)
   ============================================================================= */

/* Text-only intro (no image) — collapses to single full-width column */
.service-split--no-image {
	grid-template-columns: 1fr;
}

.service-split--no-image .service-intro {
	max-width: 52rem;
}

/* Local projects heading — sits above the .service-gallery__grid inside .service-gallery */
.city-projects__heading {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
	margin: 0 0 2rem;
	text-align: center;
}

.city-projects__caption {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #555;
	text-align: center;
	background: rgba(255, 255, 255, 0.85);
}

/* Service radius */

.city-radius {
	background: var(--color-white);
	padding: 5rem 2.5rem;
}

.city-radius__inner {
	max-width: 80rem;
	margin: 0 auto;
}

.city-radius__body {
	font-size: 1rem;
	line-height: 1.8;
	color: #333;
	letter-spacing: var(--ls-text);
}

.city-radius__body h2 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
	margin: 0 0 1rem;
}

.city-radius__body h3 {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
	margin: 2rem 0 0.75rem;
}

.city-radius__body p {
	margin: 0 0 1rem;
}

.city-radius__body ul,
.city-radius__body ol {
	padding-left: 1.25rem;
	margin: 0 0 1.25rem;
}

.city-radius__body li {
	margin-bottom: 0.4rem;
}

/* Testimonials */

.city-testimonials {
	background: var(--color-bg-warm);
	padding: 5rem 2.5rem;
}

.city-testimonials__inner {
	max-width: 80rem;
	margin: 0 auto;
}

.city-testimonials__heading {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-black);
	margin: 0 0 3rem;
	text-align: center;
}

.city-testimonials__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.city-testimonial {
	background: var(--color-white);
	padding: 2rem;
	display: flex;
	flex-direction: column;
}

.city-testimonial__blockquote {
	margin: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.city-testimonial__quote {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: #333;
	letter-spacing: var(--ls-text);
	font-style: italic;
	flex: 1;
	margin: 0 0 1.5rem;
	position: relative;
	padding-top: 2rem;
}

.city-testimonial__quote::before {
	content: '\201C';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 3rem;
	line-height: 1;
	color: var(--color-orange);
	font-style: normal;
}

.city-testimonial__footer {
	border-top: 1px solid #eee;
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.city-testimonial__name {
	font-style: normal;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--color-black);
	letter-spacing: var(--ls-text);
}

.city-testimonial__company {
	font-size: 0.8125rem;
	color: #666;
	letter-spacing: var(--ls-text);
}

/* Google Maps */

.city-map {
	line-height: 0; /* removes ghost whitespace under iframe */
}

.city-map__iframe {
	display: block;
	width: 100%;
	height: 26rem;
	border: 0;
}

/* Local CTA */

.city-cta {
	background: var(--color-grey);
	padding: 5rem 2rem;
	text-align: center;
}

.city-cta__inner {
	max-width: 48rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.city-cta__heading {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	letter-spacing: var(--ls-title);
	color: var(--color-white);
	margin: 0;
}

.city-cta__sub {
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: var(--ls-text);
	margin: 0;
}

.city-cta__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.5rem;
}

/* City page responsive */

@media (max-width: 900px) {
	.city-testimonials__grid {
		grid-template-columns: 1fr 1fr;
	}

	.city-radius,
	.city-testimonials {
		padding: 3.5rem 1.5rem;
	}

	.city-map__iframe {
		height: 22rem;
	}
}

@media (max-width: 600px) {
	.city-testimonials__grid {
		grid-template-columns: 1fr;
	}

	.city-cta {
		padding: 4rem 1.25rem;
	}

	.city-cta__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.city-cta__actions .btn {
		text-align: center;
		justify-content: center;
	}

	.city-map__iframe {
		height: 18rem;
	}
}

/* =============================================================================
   PROJECTS ARCHIVE PAGE  (page-project.php)
   ============================================================================= */

/* ── Featured project image link hover ── */

.featured-project__img-link {
	display: block;
	overflow: hidden;
}

.featured-project__img-link:hover .service-split__img,
.featured-project__img-link:focus-visible .service-split__img {
	transform: scale(1.03);
}

.service-split__img {
	transition: transform 0.35s ease;
}

/* ── Quote / testimonial inside featured split ── */

.featured-project__quote {
	margin: 1.25rem 0 1.5rem;
	padding: 0;
	border: none;
	font-style: italic;
	color: var(--color-black);
}

.featured-project__quote p {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	line-height: 1.7;
}

.featured-project__cite {
	display: block;
	font-style: normal;
	font-size: 0.875rem;
	color: #666;
}

/* ── Archive grid (white background) ── */

.projects-archive {
	background: #fff;
	padding: 4rem 2rem;
}

.projects-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 2rem;
	max-width: 72rem;
	margin: 0 auto;
}

@media (max-width: 56rem) {
	.projects-archive__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}

@media (min-width: 36rem) and (max-width: 56rem) {
	.projects-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Pagination ── */

.projects-pagination {
	max-width: 72rem;
	margin: 3.5rem auto 0;
}

.projects-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.projects-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1.5px solid #ddd;
	border-radius: 3px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--color-black);
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.projects-pagination .page-numbers:hover,
.projects-pagination .page-numbers:focus-visible {
	border-color: var(--color-orange);
	color: var(--color-orange);
	outline: none;
}

.projects-pagination .page-numbers.current {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: #fff;
	cursor: default;
}

.projects-pagination .page-numbers.prev,
.projects-pagination .page-numbers.next {
	padding: 0 1rem;
	border-color: var(--color-grey);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
}

.projects-pagination .page-numbers.dots {
	border-color: transparent;
	cursor: default;
	color: #999;
}

@media (max-width: 40rem) {
	.projects-pagination .page-numbers.prev,
	.projects-pagination .page-numbers.next {
		font-size: 0;
	}

	.projects-pagination .page-numbers.prev::before {
		content: '\f060';
		font-family: "Font Awesome 6 Pro";
		font-weight: 900;
		-webkit-font-smoothing: antialiased;
		font-size: 1rem;
	}

	.projects-pagination .page-numbers.next::after {
		content: '\f061';
		font-family: "Font Awesome 6 Pro";
		font-weight: 900;
		-webkit-font-smoothing: antialiased;
		font-size: 1rem;
	}
}

/* =============================================================================
   GLIGHTBOX — mobile nav arrows
   ============================================================================= */

/* GLightbox hides prev/next on touch devices via .glightbox-mobile.
   Re-show them and move below the image as a centred pair. */
.glightbox-mobile .gnext,
.glightbox-mobile .gprev {
	display: flex !important;
	position: fixed;
	top: auto !important;
	bottom: 1.5rem;
	width: 3rem;
	height: 3rem;
	background: rgba(28, 28, 28, 0.85);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	left: 50% !important;
	right: auto !important;
}

.glightbox-mobile .gprev {
	transform: translateX(calc(-100% - 0.375rem)) !important;
}

.glightbox-mobile .gnext {
	transform: translateX(0.375rem) !important;
}

/* =============================================================================
   COOKIEYES — banner & preference-center buttons in theme colours
   (!important overrides the plugin's inline/default button styles)
   ============================================================================= */

.cky-consent-container .cky-btn,
.cky-preference-center .cky-btn {
	border-radius: 2rem !important;
	font-family: var(--font-primary) !important;
	font-weight: 600 !important;
	opacity: 1 !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* Kill the plugin's translucent hover fade */
.cky-consent-container .cky-btn:hover,
.cky-consent-container .cky-btn:focus-visible,
.cky-preference-center .cky-btn:hover,
.cky-preference-center .cky-btn:focus-visible {
	opacity: 1 !important;
}

/* Floating "revisit consent" badge → orange */
.cky-btn-revisit-wrapper {
	background: var(--color-orange) !important;
}
.cky-btn-revisit-wrapper:hover {
	background: var(--color-black) !important;
}

/* Godta alle / Accept all — primary */
.cky-btn-accept {
	background: var(--color-orange) !important;
	border: 2px solid var(--color-orange) !important;
	color: var(--color-white) !important;
}
.cky-btn-accept:hover,
.cky-btn-accept:focus-visible {
	background: var(--color-black) !important;
	border-color: var(--color-black) !important;
	color: var(--color-white) !important;
}

/* Avvis alle / Reject all — secondary dark */
.cky-btn-reject {
	background: var(--color-grey) !important;
	border: 2px solid var(--color-grey) !important;
	color: var(--color-white) !important;
}
.cky-btn-reject:hover,
.cky-btn-reject:focus-visible {
	background: var(--color-orange) !important;
	border-color: var(--color-orange) !important;
	color: var(--color-white) !important;
}

/* Samtykke (Customize) + Lagre samtykke (Save preferences) — black outline */
.cky-btn-customize,
.cky-btn-preferences {
	background: transparent !important;
	border: 2px solid var(--color-black) !important;
	color: var(--color-black) !important;
}
.cky-btn-customize:hover,
.cky-btn-customize:focus-visible,
.cky-btn-preferences:hover,
.cky-btn-preferences:focus-visible {
	background: var(--color-black) !important;
	border-color: var(--color-black) !important;
	color: var(--color-white) !important;
}

/* =============================================================================
   MEETING ROOM BOOKING (page-booking.php)
   ============================================================================= */

.mrb {
	background: var(--color-white);
	padding: 2.5rem 2rem 6rem;
}

.mrb__inner {
	max-width: 64rem;
	margin: 0 auto;
}

/* ----------- Form ----------- */

.mrb-form {
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 1.75rem;
	margin-bottom: 2.5rem;
}

.mrb-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.mrb-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.mrb-msg {
	margin: 0;
	font-size: 0.9rem;
}
.mrb-msg--ok  { color: #1f7a3d; font-weight: 600; }
.mrb-msg--err { color: #c0392b; font-weight: 600; }

/* Honeypot — hidden from humans */
.mrb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ----------- Calendar ----------- */

.mrb-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.mrb-legend {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: #555;
}
.mrb-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.mrb-swatch {
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 3px;
	display: inline-block;
}
.mrb-swatch--gronn { background: #1f9d55; }
.mrb-swatch--bla   { background: #2563eb; }

.mrb-cal__nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.mrb-cal__title {
	min-width: 9rem;
	text-align: center;
	font-weight: 700;
	text-transform: capitalize;
}
.mrb-cal__btn {
	border: 1px solid #ccc;
	background: var(--color-white);
	border-radius: 4px;
	padding: 0.4rem 0.7rem;
	cursor: pointer;
	font-family: var(--font-primary);
	font-size: 0.95rem;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mrb-cal__btn:hover,
.mrb-cal__btn:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-white);
	outline: none;
}

.mrb-cal__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.4rem;
	margin-bottom: 0.4rem;
}
.mrb-cal__weekdays span {
	font-size: 0.75rem;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0 0.25rem;
}

.mrb-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.4rem;
}

.mrb-cal__day {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
	min-height: 6.5rem;
	padding: 0.4rem;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 4px;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.mrb-cal__day:hover {
	border-color: var(--color-orange);
}
.mrb-cal__day--blank {
	background: transparent;
	border: none;
	cursor: default;
}
.mrb-cal__day--past {
	opacity: 0.5;
	cursor: default;
}
.mrb-cal__day--past:hover {
	border-color: #eee;
}
.mrb-cal__day--today {
	border-color: var(--color-orange);
	box-shadow: inset 0 0 0 1px var(--color-orange);
}

.mrb-cal__daynum {
	font-size: 0.8rem;
	font-weight: 700;
	color: #444;
}
.mrb-cal__dow { display: none; } /* shown on mobile only */

.mrb-cal__events {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.mrb-event {
	display: block;
	font-size: 0.72rem;
	line-height: 1.3;
	color: var(--color-white);
	border-radius: 3px;
	padding: 0.15rem 0.4rem;
}
.mrb-event__time {
	font-weight: 700;
	display: inline-block;
	margin-right: 0.3rem;
}
.mrb-event__name {
	font-weight: 500;
	word-break: break-word;
}
.mrb-event--gronn { background: #1f9d55; }
.mrb-event--bla   { background: #2563eb; }

/* Show only the first 3 bookings per day until the day is expanded */
.mrb-cal__day:not(.mrb-cal__day--expanded) .mrb-cal__events > .mrb-event:nth-child(n+4) {
	display: none;
}

.mrb-cal__more {
	align-self: flex-start;
	margin-top: 0.15rem;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--color-orange);
	cursor: pointer;
}
.mrb-cal__more:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.mrb-form__grid {
		grid-template-columns: 1fr;
	}
	/* Calendar collapses to a list of days that have bookings */
	.mrb-cal__weekdays {
		display: none;
	}
	.mrb-cal__grid {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	.mrb-cal__day {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
		min-height: 0;
	}
	.mrb-cal__day--blank,
	.mrb-cal__day--empty {
		display: none;
	}
	.mrb-cal__dow {
		display: inline;
		text-transform: capitalize;
	}
	.mrb-cal__daynum {
		flex: 0 0 5.5rem;
	}
	.mrb-cal__events {
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
	}
}