/**
 * A-one Solutions — the whole visual layer.
 *
 * Transcribed from design/A-one_Solutions_mockup.html. Every colour lives in
 * :root; every other value is the design's, in rem. Deliberate deviations from
 * the mockup, all accessibility-driven and all computed rather than guessed:
 *
 *   - text below 12px is floored at 12px (ribbons, badges, metadata)
 *   - #8A94A0 as text became --steel #697380 (3.08:1 → 4.81:1 on white)
 *   - white-on-charcoal text alphas below .5 became --ondark-soft (.62)
 *   - the red band's .9-alpha lead became solid white (4.25:1 → 5.03:1)
 *   - primary buttons keep the design's 54px height (≥48px target); the
 *     card buttons keep the design's 41px but run full width
 *   - nav, topbar and footer links carry padding toward 44px tap targets
 *   - focus is always visible; motion can be refused
 *   - the footer carries margin-top (72px, 40px narrow) before the dark
 *     band (client request; the mockup lets the last band touch it)
 *
 * Sections:
 *   1 Fonts   2 Tokens   3 Base   4 Layout   5 Type   6 Components
 *   7 Page sections   8 Responsive
 */

/* ======================================================== 1. Fonts ======= */

/* Lato has real weights only at 400/700 — the design's 500/600/800 resolve
   to these, identically in the design reference and here. */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lato-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/montserrat-var.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/montserrat-700-italic.woff2') format('woff2');
}

/* ======================================================== 2. Tokens ====== */

:root {
	--white: #FFFFFF;
	--red: #DD1121;
	--red-dark: #B50000;
	--red-soft: #F07A80;
	--charcoal: #1C2126;
	--charcoal-2: #2C3138;
	--charcoal-3: #3A4652;
	--slate: #5B6772;
	--steel: #697380;            /* the design's #8A94A0, darkened to pass 4.5:1 */
	--paper: #FBFAF7;
	--off: #F3F1EA;
	--rose: #FBEAEC;
	--line: #E8E4DD;
	--hair: #EEEBE4;
	--purple: #6C4CD6;
	--purple-dark: #5A3DBF;
	--tv-blue: #0A6BC4;
	--gold: #F4B400;             /* stars only, always aria-hidden decoration */
	--ok: #1B6B45;
	--ok-soft: #E7F2EC;
	--error: #A32014;
	--error-soft: #F9E9E7;

	/* On the charcoal bands: .72 measures 8.98:1, .62 measures 7.04:1. */
	--ondark: rgba(255, 255, 255, 0.72);
	--ondark-soft: rgba(255, 255, 255, 0.62);
	--ondark-line: rgba(255, 255, 255, 0.1);
	--ondark-fill: rgba(255, 255, 255, 0.08);
	--ondark-card: rgba(255, 255, 255, 0.06);
	--ondark-border: rgba(255, 255, 255, 0.28);
	--ondark-ghost: rgba(255, 255, 255, 0.1);

	--scrim: rgba(20, 20, 20, 0.7);
	--select: rgba(221, 17, 33, 0.14);
	--hero-wash: rgba(221, 17, 33, 0.06);
	--mette-glow: rgba(221, 17, 33, 0.1);
	--header-bg: rgba(251, 250, 247, 0.94);
	--header-line: rgba(232, 228, 221, 0.7);
	--thumb-a: #DCE3E7;
	--thumb-b: #AAB7C0;
	--avatar-a: #66747F;
	--avatar-b: #3B4650;

	--sh1: 0 24px 70px rgba(20, 20, 20, 0.12);
	--sh2: 0 10px 30px rgba(20, 20, 20, 0.08);
	--sh3: 0 2px 10px rgba(20, 20, 20, 0.05);
	--sh-red: 0 12px 30px rgba(221, 17, 33, 0.28);
	--sh-ribbon: 0 6px 16px rgba(221, 17, 33, 0.3);

	--f-head: 'Montserrat', sans-serif;
	--f-body: 'Lato', system-ui, sans-serif;

	--wrap: 73.75rem;            /* 1180px */
	--gut: 2rem;                 /* 32px */
	--pill: 100px;
	--band: 26px;
	--focus: var(--charcoal);
}

/* ======================================================== 3. Base ======== */

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

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

body {
	font-family: var(--f-body);
	font-size: 1rem;
	line-height: 1.62;
	color: var(--charcoal);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

p,
li {
	color: var(--slate);
}

h1,
h2,
h3,
h4 {
	font-family: var(--f-head);
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--charcoal);
}

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

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

::selection {
	background: var(--select);
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

[id] {
	scroll-margin-top: 9rem;
}

.aone-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aone-skip {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 200;
	padding: 0.75rem 1rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--sh2);
	font-weight: 700;
	font-size: 0.875rem;
}

.aone-skip:focus-visible {
	top: 0.5rem;
}

.aone-locked {
	overflow: hidden;
}

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.aone-btn:hover,
	.aone-ptcard:hover,
	.aone-seg:hover {
		transform: none !important;
	}
}

/* ======================================================== 4. Layout ====== */

.aone-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gut);
}

/* 16px on top: the design gives <main> and the page stack 8px each. The
   space below the last band lives on the footer itself, so every template
   gets it. */
.aone-stack {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	padding-top: 1rem;
}

.aone-grid {
	display: grid;
	grid-template-columns: var(--cols, 1fr);
	gap: var(--gap, 1rem);
}

/* ======================================================== 5. Type ======== */

.aone-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--slate);
}

.aone-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--red);
	display: block;
	border-radius: 2px;
	flex-shrink: 0;
}

.aone-kicker--ondark {
	color: var(--red-soft);
}

.aone-kicker--ondark::before {
	background: var(--red-soft);
}

.aone-h2 {
	font-size: 1.75rem;
	font-weight: 800;
	margin-top: 0.75rem;
}

/* The in-band headings (succes, values, historie) are the design's default
   Montserrat 700, not the section-head 800. */
.aone-h2--24 {
	font-size: 1.5rem;
	font-weight: 700;
}

.aone-sechead {
	max-width: 42.5rem;
}

.aone-sechead__text {
	margin-top: 0.75rem;
	font-size: 0.90625rem;
}

.aone-sechead--center {
	margin: 0 auto;
	text-align: center;
}

.aone-sechead--center .aone-kicker {
	justify-content: center;
}

.aone-accent {
	color: var(--red);
	font-style: normal;
}

.aone-accent-soft {
	color: var(--red-soft);
	font-style: normal;
}

/* ======================================================== 6. Components == */

.aone-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.aone-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--f-body);
	font-weight: 700;
	font-size: 0.9375rem;
	border-radius: var(--pill);
	padding: 0.875rem 1.75rem;
	min-height: 3rem;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform 0.18s, box-shadow 0.25s, background 0.2s, color 0.2s, border-color 0.2s;
}

.aone-btn:hover {
	transform: translateY(-2px);
}

.aone-btn--red,
.aone-btn--send {
	background: var(--red);
	color: var(--white);
	box-shadow: var(--sh-red);
}

.aone-btn--red:hover,
.aone-btn--send:hover {
	background: var(--red-dark);
}

.aone-btn--line {
	background: transparent;
	border-color: var(--line);
	color: var(--charcoal);
}

.aone-btn--line:hover {
	border-color: var(--charcoal);
	background: var(--white);
}

.aone-btn--ghost {
	background: var(--ondark-ghost);
	border-color: var(--ondark-border);
	color: var(--white);
}

.aone-btn--ghost:hover {
	background: var(--ondark-border);
}

.aone-btn--purple {
	background: var(--purple);
	color: var(--white);
}

.aone-btn--purple:hover {
	background: var(--purple-dark);
}

.aone-btn--white,
.aone-btn--white-sm {
	background: var(--white);
	color: var(--charcoal);
	border-color: var(--line);
}

.aone-btn--white:hover,
.aone-btn--white-sm:hover {
	border-color: var(--charcoal);
}

.aone-btn--white-sm {
	padding: 0.625rem 1.25rem;
	font-size: 0.8125rem;
}

.aone-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.aone-stars {
	color: var(--gold);
	font-size: 0.8125rem;
	letter-spacing: 2px;
}

.aone-notice {
	background: var(--white);
	border: 1px dashed var(--steel);
	border-radius: 16px;
	padding: 2rem;
	text-align: center;
}

.aone-notice p {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--slate);
}

.aone-notice a,
.aone-priceband__foot a,
.aone-prose a,
.aone-form__consent a {
	color: var(--red);
	font-weight: 700;
	text-decoration: underline;
}

.aone-notice a:hover,
.aone-priceband__foot a:hover,
.aone-prose a:hover,
.aone-form__consent a:hover {
	color: var(--red-dark);
}

/* Forms — ships with inc/forms.php; rendered once the Kontakt page is built. */

.aone-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.aone-form--boxed {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 1.5rem;
	box-shadow: var(--sh2);
}

.aone-form--dark {
	background: transparent;
}

.aone-form--dark .aone-field__label {
	color: var(--ondark);
}

.aone-field {
	display: block;
}

.aone-field--full {
	grid-column: 1 / -1;
}

.aone-field__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--slate);
	margin-bottom: 5px;
}

.aone-field__req {
	color: var(--red);
}

.aone-field__input {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0.625rem 0.75rem;
	font-size: 0.8125rem;
	font-family: inherit;
	color: var(--charcoal);
	background: var(--white);
}

.aone-field__input:focus {
	border-color: var(--red);
	outline: none;
	box-shadow: 0 0 0 2px var(--select);
}

.aone-field__input--area {
	min-height: 5rem;
	resize: vertical;
}

.aone-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.aone-form__consent {
	grid-column: 1 / -1;
	font-size: 0.75rem;
	color: var(--steel);
	line-height: 1.5;
}

.aone-form__notice {
	grid-column: 1 / -1;
	border-radius: 10px;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	font-weight: 700;
}

.aone-form__notice--ok {
	background: var(--ok-soft);
	color: var(--ok);
}

.aone-form__notice--error {
	background: var(--error-soft);
	color: var(--error);
}

.aone-btn--send {
	grid-column: 1 / -1;
	width: 100%;
}

/* Article cards and reading view */

.aone-artgrid {
	--cols: repeat(3, 1fr);
	--gap: 0.875rem;
}

.aone-artcard {
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--white);
	transition: transform 0.2s, box-shadow 0.2s;
}

.aone-artcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh2);
}

.aone-artcard__link {
	display: block;
}

.aone-artcard__th {
	display: block;
	aspect-ratio: 16 / 10;
	background: linear-gradient(150deg, var(--thumb-a), var(--thumb-b));
	overflow: hidden;
}

.aone-artcard__img,
.aone-artcard__th img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aone-artcard__b {
	display: block;
	padding: 0.9375rem;
}

.aone-artcard__meta {
	display: block;
	font-size: 0.75rem;
	color: var(--steel);
}

.aone-artcard__title {
	display: block;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 0.84375rem;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: var(--charcoal);
	margin-top: 5px;
}

.aone-article {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.aone-article__meta {
	margin-top: 0.6875rem;
	font-size: 0.78125rem;
	color: var(--steel);
	font-weight: 700;
}

.aone-article__media {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--sh2);
	max-width: 45rem;
}

.aone-article__img {
	width: 100%;
	display: block;
}

.aone-article__back {
	font-size: 0.875rem;
}

.aone-article__back a {
	color: var(--red);
	font-weight: 700;
}

.aone-article__back a:hover {
	text-decoration: underline;
}

.aone-prose {
	max-width: 45rem;
}

.aone-prose p {
	margin-top: 0.875rem;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.aone-prose .aone-prose__lead {
	font-size: 1.0625rem;
	color: var(--charcoal);
}

.aone-prose h2 {
	font-size: 1.375rem;
	font-weight: 800;
	margin-top: 1.75rem;
}

.aone-prose ul,
.aone-prose ol {
	margin-top: 0.875rem;
	padding-left: 1.25rem;
}

.aone-prose li {
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-top: 0.375rem;
}

.aone-pagination {
	display: flex;
	justify-content: center;
}

.aone-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 10px;
	margin: 0 0.25rem;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--slate);
}

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

/* ================================================== 7. Page sections ===== */

/* --- Utility bar ------------------------------------------------------- */

.aone-topbar {
	background: var(--white);
	border-bottom: 1px solid var(--hair);
	font-size: 0.75rem;
	color: var(--slate);
}

.aone-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.5rem;
}

.aone-topbar__left {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.aone-topbar__links {
	display: flex;
	gap: 1.125rem;
	align-items: center;
}

.aone-topbar__link,
.aone-topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--slate);
	font-weight: 700;
	padding: 0.5625rem 0.125rem;
}

.aone-topbar__link:hover,
.aone-topbar__phone:hover {
	color: var(--red);
}

.aone-topbar__brand {
	font-weight: 700;
	color: var(--tv-blue);
}

/* --- Masthead ---------------------------------------------------------- */

.aone-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--header-bg);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--header-line);
}

.aone-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 5.25rem;
}

.aone-logo {
	display: inline-flex;
}

.aone-header .aone-logo {
	transform: scale(0.92);
	transform-origin: left center;
}

.aone-logo__stack {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
}

.aone-logo__mark {
	position: relative;
	height: 46px;
	display: flex;
	align-items: flex-end;
}

.aone-logo__mark svg {
	height: 46px;
	width: auto;
	display: block;
}

.aone-logo__sol {
	font-family: var(--f-head);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--charcoal);
	margin: 2px 0 0 2px;
}

.aone-logo__stack--light .aone-logo__sol {
	color: var(--white);
}

/* Part of the brand lockup, sized as the design draws it. */
.aone-logo__tag {
	font-weight: 700;
	font-size: 8px;
	letter-spacing: 0.03em;
	color: var(--slate);
	margin: 1px 0 0 2px;
	white-space: nowrap;
}

.aone-nav {
	display: none;
	gap: 1.375rem;
	align-items: center;
}

.aone-nav__link {
	position: relative;
	font-size: 0.84375rem;
	font-weight: 700;
	color: var(--slate);
	padding: 0.75rem 0.125rem;
}

.aone-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.5rem;
	width: 0;
	height: 2px;
	background: var(--red);
	border-radius: 2px;
	transition: width 0.22s;
}

.aone-nav__link:hover,
.aone-nav__link.is-current {
	color: var(--charcoal);
}

.aone-nav__link:hover::after,
.aone-nav__link.is-current::after {
	width: 100%;
}

.aone-header__cta {
	display: none;
	align-items: center;
	gap: 0.875rem;
}

.aone-header__phone {
	font-size: 0.84375rem;
	font-weight: 700;
	color: var(--charcoal);
	padding: 0.75rem 0.25rem;
}

.aone-header__phone:hover {
	color: var(--red);
}

.aone-navtoggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 3rem;
	height: 3rem;
	padding: 0.75rem;
	background: none;
	border: none;
	cursor: pointer;
}

.aone-navtoggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--charcoal);
	border-radius: 2px;
}

/* --- Narrow-screen panel ------------------------------------------------ */

.aone-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--paper);
	padding: 1rem var(--gut) 2rem;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.aone-menu[hidden] {
	display: none;
}

.aone-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 4rem;
}

.aone-menu__close {
	width: 3rem;
	height: 3rem;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
}

.aone-menu__close::before,
.aone-menu__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	background: var(--charcoal);
	border-radius: 2px;
}

.aone-menu__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.aone-menu__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.aone-menu__nav {
	display: flex;
	flex-direction: column;
	margin-top: 0.5rem;
}

.aone-menu__link {
	display: block;
	padding: 0.75rem 0;
	font-weight: 700;
	font-size: 1rem;
	border-bottom: 1px solid var(--hair);
	color: var(--charcoal);
}

.aone-menu__link.is-current {
	color: var(--red);
}

.aone-menu__foot {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
}

.aone-menu__phone {
	font-weight: 700;
	font-size: 1rem;
	color: var(--charcoal);
	padding: 0.5rem 0;
}

.aone-menu__aside {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.aone-menu__aside a {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--slate);
	padding: 0.5rem 0;
}

.aone-menu__aside a:hover {
	color: var(--red);
}

/* --- Hero (forside) ----------------------------------------------------- */

.aone-hero {
	position: relative;
	overflow: hidden;
	background: var(--white);
}

.aone-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(760px 460px at 90% -10%, var(--hero-wash), transparent 60%);
	pointer-events: none;
}

.aone-hero__in {
	padding: 3.125rem 0 2.5rem;
	position: relative;
	max-width: 47.5rem;
}

.aone-hero__title {
	font-size: 2.75rem;
	font-weight: 800;
	margin-top: 1rem;
}

.aone-hero__lead {
	margin-top: 1rem;
	font-size: 1rem;
	max-width: 40rem;
}

.aone-trust {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1.5rem;
}

.aone-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78125rem;
	font-weight: 700;
	color: var(--slate);
}

.aone-trust .aone-icon {
	color: var(--red);
}

/* --- Succesfortælling --------------------------------------------------- */

.aone-success {
	background: var(--rose);
	border-radius: var(--band);
	overflow: hidden;
}

.aone-success__grid {
	--cols: 0.95fr 1.05fr;
	--gap: 0;
	align-items: stretch;
}

.aone-success__txt {
	padding: 2.5rem 2.375rem;
}

.aone-success__text {
	margin-top: 0.875rem;
	font-size: 0.875rem;
	line-height: 1.7;
}

.aone-success__txt .aone-btn {
	margin-top: 1.125rem;
}

.aone-success__visual {
	position: relative;
	padding: 2rem 2.375rem;
}

.aone-success__photo {
	border-radius: 16px;
	aspect-ratio: 16 / 11;
	position: relative;
	overflow: hidden;
	box-shadow: var(--sh1);
}

.aone-success__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aone-quotecard {
	position: absolute;
	left: 3.625rem;
	bottom: 3.25rem;
	background: var(--white);
	border-radius: 12px;
	padding: 1rem 1.125rem;
	box-shadow: var(--sh2);
	max-width: 17.5rem;
}

.aone-quotecard p {
	font-family: var(--f-head);
	font-weight: 700;
	font-style: italic;
	font-size: 0.84375rem;
	line-height: 1.5;
	color: var(--charcoal);
}

/* --- Priser (the four cards) ------------------------------------------- */

.aone-priceband {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--band);
	padding: 2.25rem;
}

.aone-ptgrid {
	--cols: repeat(4, 1fr);
	--gap: 0.875rem;
	margin-top: 1.75rem;
	padding-top: 0.75rem;      /* room for the -11px ribbons */
	align-items: stretch;
}

.aone-ptcard {
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.25rem;
	background: var(--paper);
	position: relative;
	transition: transform 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.aone-ptcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh2);
}

.aone-ptcard--hot {
	border-color: var(--red);
	background: var(--white);
	box-shadow: var(--sh1);
}

.aone-ptcard--dark {
	background: var(--charcoal);
	border-color: var(--charcoal);
}

.aone-ptcard__rb {
	position: absolute;
	top: -11px;
	left: 18px;
	background: var(--red);
	color: var(--white);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--pill);
	white-space: nowrap;
	box-shadow: var(--sh-ribbon);
}

.aone-ptcard__nm {
	font-family: var(--f-body);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--steel);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	min-height: 1rem;
}

.aone-ptcard__pr {
	font-family: var(--f-head);
	font-weight: 800;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	color: var(--charcoal);
	margin-top: 0.5rem;
}

.aone-ptcard__unit {
	font-family: var(--f-body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--steel);
}

.aone-ptcard__sub {
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--red);
	min-height: 1.25rem;
}

.aone-ptcard__list {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.aone-ptcard__list li {
	font-size: 0.75rem;
	color: var(--slate);
	display: flex;
	gap: 5px;
	align-items: flex-start;
}

.aone-ptcard__list .aone-icon {
	width: 13px;
	height: 13px;
	color: var(--red);
	margin-top: 2px;
}

/* Full-width, so the tap target is the card's width; the design's 41px height
   sits between the 24px WCAG floor and the 48px ideal. */
.aone-ptcard__btn {
	margin-top: 0.875rem;
	width: 100%;
	padding: 0.625rem 1rem;
	font-size: 0.75rem;
	min-height: 0;
}

.aone-ptcard--dark .aone-ptcard__nm {
	color: var(--ondark-soft);
}

.aone-ptcard--dark .aone-ptcard__pr {
	color: var(--white);
}

.aone-ptcard--dark .aone-ptcard__unit {
	color: var(--ondark-soft);
}

.aone-ptcard--dark .aone-ptcard__sub {
	color: var(--red-soft);
}

.aone-ptcard--dark .aone-ptcard__list li {
	color: var(--ondark);
}

.aone-ptcard--dark .aone-ptcard__list .aone-icon {
	color: var(--red-soft);
}

.aone-priceband__foot {
	margin-top: 1.25rem;
	font-size: 0.78125rem;
	color: var(--steel);
	text-align: center;
}

/* --- Software integrationer -------------------------------------------- */

.aone-integrations {
	background: var(--off);
	border-radius: var(--band);
	padding: 3.625rem 2.5rem;
}

.aone-introw {
	display: flex;
	justify-content: center;
	gap: 2.5rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.aone-inttile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}

.aone-inttile__box {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	box-shadow: var(--sh3);
}

.aone-inttile__img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.aone-inttile__label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--slate);
}

/* --- AI ----------------------------------------------------------------- */

.aone-ai {
	position: relative;
	border-radius: var(--band);
	overflow: hidden;
	background: linear-gradient(150deg, var(--charcoal-2), var(--charcoal));
	--focus: var(--white);
}

.aone-ai__grid {
	--cols: 1.1fr 0.9fr;
	--gap: 2rem;
	align-items: center;
	padding: 2.625rem;
}

.aone-ai__title {
	color: var(--white);
	font-size: 1.625rem;
	font-weight: 800;
	margin-top: 0.75rem;
}

.aone-ai__text {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--ondark);
	max-width: 27.5rem;
}

.aone-ai .aone-actions {
	margin-top: 1.25rem;
}

.aone-ai__cards {
	display: grid;
	gap: 0.75rem;
}

.aone-ai__card {
	display: flex;
	gap: 0.75rem;
	background: var(--ondark-card);
	border: 1px solid var(--ondark-line);
	border-radius: 14px;
	padding: 0.8125rem;
	align-items: center;
	transition: background 0.2s;
}

.aone-ai__card:hover {
	background: var(--ondark-ghost);
}

.aone-ai__thumb {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: linear-gradient(150deg, var(--charcoal-3), var(--charcoal-2));
	flex-shrink: 0;
	overflow: hidden;
	display: block;
}

.aone-ai__img,
.aone-ai__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aone-ai__body {
	display: block;
}

.aone-ai__t {
	display: block;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: -0.02em;
	color: var(--white);
	line-height: 1.35;
}

.aone-ai__m {
	display: block;
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--ondark-soft);
}

/* --- De 7 kerneværdier -------------------------------------------------- */

.aone-values {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 2.125rem;
}

.aone-values__grid {
	--cols: 1fr 0.5fr;
	--gap: 2rem;
	align-items: center;
}

.aone-values__list {
	margin-top: 0.875rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.aone-values__list li {
	display: flex;
	gap: 9px;
	font-size: 0.84375rem;
	color: var(--slate);
}

.aone-values__list b {
	color: var(--charcoal);
	font-weight: 700;
}

.aone-values__list .aone-icon {
	width: 15px;
	height: 15px;
	color: var(--red);
	margin-top: 3px;
}

.aone-values__cta {
	margin-top: 1.25rem;
}

.aone-perphoto {
	margin: 0;
}

.aone-perphoto__frame {
	display: block;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 3 / 3.3;
	box-shadow: var(--sh2);
}

.aone-perphoto__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aone-perphoto__cap {
	margin-top: 9px;
	text-align: center;
	font-size: 0.75rem;
	color: var(--steel);
	font-weight: 700;
}

/* --- Kundeudtalelser ----------------------------------------------------- */

.aone-reviews__grid {
	--cols: repeat(3, 1fr);
	--gap: 1rem;
	margin-top: 2rem;
}

.aone-review {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.375rem;
	margin: 0;
}

.aone-review blockquote p {
	margin-top: 9px;
	font-size: 0.8125rem;
	line-height: 1.6;
}

.aone-review__who {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 9px;
}

.aone-review__av {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--off);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-head);
	font-weight: 800;
	font-size: 0.75rem;
	color: var(--red);
}

.aone-review__n {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--charcoal);
}

.aone-reviews__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.aone-reviews__summary .aone-stars {
	font-size: 0.9375rem;
}

.aone-reviews__score {
	font-family: var(--f-head);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--charcoal);
}

.aone-reviews__note {
	font-size: 0.78125rem;
	color: var(--slate);
}

/* --- Løsninger til jeres størrelse -------------------------------------- */

.aone-segments__grid {
	--cols: repeat(3, 1fr);
	--gap: 1rem;
	margin-top: 2rem;
}

.aone-seg {
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.5rem;
	background: var(--white);
	transition: transform 0.2s, box-shadow 0.22s;
}

.aone-seg:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh2);
}

.aone-seg--hot {
	border-color: var(--red);
	box-shadow: var(--sh1);
}

.aone-seg__size {
	font-family: var(--f-head);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--red);
}

.aone-seg__title {
	font-size: 1.0625rem;
	font-weight: 700;
	margin-top: 6px;
}

.aone-seg__emp {
	margin-top: 3px;
	font-size: 0.75rem;
	color: var(--steel);
	font-weight: 700;
}

.aone-seg__text {
	margin-top: 9px;
	font-size: 0.78125rem;
}

.aone-seg__lnk {
	margin-top: 0.8125rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--red);
	padding: 0.375rem 0;
}

.aone-seg__lnk:hover {
	text-decoration: underline;
}

/* --- Mette band ---------------------------------------------------------- */

.aone-metteband {
	background: var(--charcoal);
	border-radius: var(--band);
	color: var(--white);
	overflow: hidden;
	position: relative;
	--focus: var(--white);
}

.aone-metteband::before {
	content: "";
	position: absolute;
	left: -100px;
	bottom: -120px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: var(--mette-glow);
	filter: blur(20px);
}

.aone-metteband__grid {
	--cols: 1.1fr 0.9fr;
	--gap: 2rem;
	align-items: center;
	padding: 2.5rem;
	position: relative;
}

.aone-metteband__title {
	color: var(--white);
	font-size: 1.5rem;
	font-weight: 800;
	margin-top: 0.75rem;
}

.aone-metteband__text {
	margin-top: 0.75rem;
	font-size: 0.84375rem;
	color: var(--ondark);
	max-width: 27.5rem;
}

.aone-metteband .aone-actions {
	margin-top: 1.125rem;
}

.aone-metteband__visual {
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	background: linear-gradient(150deg, var(--charcoal-3), var(--charcoal));
	display: flex;
	align-items: center;
	justify-content: center;
}

.aone-metteband__visual .aone-icon {
	width: 48px;
	height: 48px;
	color: var(--red-soft);
}

/* --- Page heroes --------------------------------------------------------- */

.aone-phero {
	padding: 2.5rem 0 0.375rem;
}

.aone-phero__title {
	font-size: 2rem;
	font-weight: 800;
}

.aone-phero__lead {
	margin-top: 0.6875rem;
	font-size: 0.875rem;
	max-width: 37.5rem;
}

/* --- Vores historie ------------------------------------------------------ */

.aone-history__grid {
	--cols: 0.85fr 1.15fr;
	--gap: 2.25rem;
	align-items: center;
}

.aone-history__frame {
	border-radius: 18px;
	aspect-ratio: 4 / 3.3;
	overflow: hidden;
	box-shadow: var(--sh2);
}

.aone-history__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aone-history__p {
	margin-top: 0.6875rem;
	font-size: 0.875rem;
	line-height: 1.7;
}

/* --- Holdet -------------------------------------------------------------- */

.aone-team__grid {
	--cols: repeat(4, 1fr);
	--gap: 0.875rem;
	margin-top: 1.75rem;
}

.aone-member {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--white);
}

.aone-member__ph {
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--avatar-a), var(--avatar-b));
}

.aone-member__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aone-member__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--scrim);
	color: var(--white);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: var(--pill);
	z-index: 2;
}

.aone-member__av {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 1.125rem;
}

.aone-member__av .aone-icon {
	width: 24px;
	height: 24px;
}

.aone-member__b {
	padding: 0.8125rem;
}

.aone-member__name {
	font-size: 0.84375rem;
	font-weight: 700;
}

.aone-member__role {
	margin-top: 2px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--red);
}

.aone-member__mail {
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--slate);
	padding: 0.25rem 0;
}

.aone-member__mail:hover {
	color: var(--red);
}

.aone-member__mail .aone-icon {
	width: 12px;
	height: 12px;
	color: var(--steel);
}

/* --- Footer -------------------------------------------------------------- */

/* The mockup lets the last band touch the footer; the client asked for air.
   Larger than the 48px section gap so the footer reads as its own chapter,
   stepping down with the section rhythm on narrow screens. */
.aone-footer {
	background: var(--charcoal);
	color: var(--white);
	margin-top: 4.5rem;
	padding: 2.5rem 0 1.25rem;
	border-radius: var(--band) var(--band) 0 0;
	--focus: var(--white);
}

.aone-footer__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.625rem;
	padding-bottom: 1.375rem;
	border-bottom: 1px solid var(--ondark-line);
}


.aone-footer__tagline {
	margin-top: 0.6875rem;
	max-width: 16.875rem;
	font-size: 0.75rem;
	color: var(--ondark-soft);
}

.aone-footer__social {
	margin-top: 1rem;
	display: flex;
	gap: 0.625rem;
}

.aone-footer__social a {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 10px;
	background: var(--ondark-fill);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.aone-footer__social a:hover {
	background: var(--red);
}

.aone-footer__social svg {
	width: 18px;
	height: 18px;
	color: var(--white);
}

.aone-footer__heading {
	font-family: var(--f-head);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ondark-soft);
	margin-bottom: 0.375rem;
	line-height: 1.4;
}

.aone-footer__link {
	display: block;
	font-size: 0.75rem;
	color: var(--ondark-soft);
	padding: 0.5rem 0;
}

.aone-footer__link:hover {
	color: var(--white);
}

.aone-footer__plain {
	font-size: 0.75rem;
	color: var(--ondark-soft);
	padding: 0.5rem 0;
}

.aone-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.625rem;
	padding-top: 1rem;
}

.aone-footer__bottom p {
	font-size: 0.75rem;
	color: var(--ondark-soft);
}

/* ==================================================== 8. Responsive ====== */

@media (min-width: 1081px) {
	.aone-nav {
		display: flex;
	}

	.aone-header__cta {
		display: flex;
	}

	.aone-navtoggle {
		display: none;
	}

	.aone-menu {
		display: none;
	}
}

@media (max-width: 1000px) {
	.aone-ptgrid {
		--cols: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.aone-stack {
		gap: 2rem;
	}

	.aone-footer {
		margin-top: 2.5rem;
	}

	.aone-h2 {
		font-size: 1.4375rem;
	}

	.aone-integrations {
		padding: 2.5rem 1.5rem;
	}
}

@media (max-width: 860px) {
	.aone-success__grid {
		--cols: 1fr;
	}

	.aone-quotecard {
		position: static;
		margin: -2.5rem 1.25rem 0;
	}

	.aone-reviews__grid,
	.aone-segments__grid,
	.aone-artgrid {
		--cols: 1fr;
	}

	.aone-team__grid {
		--cols: repeat(2, 1fr);
	}

	.aone-values__grid {
		--cols: 1fr;
		--gap: 1.375rem;
	}

	.aone-ai__grid {
		--cols: 1fr;
		--gap: 1.5rem;
		padding: 1.875rem;
	}

	.aone-metteband__grid {
		--cols: 1fr;
		--gap: 1.375rem;
		padding: 1.75rem;
	}

	.aone-history__grid {
		--cols: 1fr;
		--gap: 1.25rem;
	}
}

@media (max-width: 820px) {
	.aone-hero__title {
		font-size: 2rem;
	}

	.aone-phero__title {
		font-size: 1.5rem;
	}
}

@media (max-width: 720px) {
	.aone-topbar__links {
		gap: 0.625rem;
	}

	.aone-topbar__link--wide {
		display: none;
	}
}

@media (max-width: 640px) {
	.aone-wrap {
		padding: 0 1.25rem;
	}

	.aone-priceband {
		padding: 1.5rem 1.25rem;
	}

	.aone-values {
		padding: 1.5rem 1.25rem;
	}

	.aone-success__txt,
	.aone-success__visual {
		padding: 1.5rem 1.25rem;
	}
}

@media (max-width: 560px) {
	.aone-ptgrid {
		--cols: 1fr;
	}

	.aone-form {
		grid-template-columns: 1fr;
	}
}