/* =================================================================
   Sections — header, hero, services, studio, process, cases,
   testimonials, FAQ, CTA, footer
   ================================================================= */

/* ─── Site header — glider ind ved første scroll og bliver synlig ─── */
.site-header {
	position: fixed;
	top: var(--sp-4);
	left: var(--gutter);
	right: var(--gutter);
	z-index: 50;
	background: rgba(20, 15, 13, 0.75);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(244, 233, 221, 0.22);
	border-radius: var(--radius-pill);
	padding: 8px 10px 8px 26px;
	color: var(--color-ink-on-dark);
	transform: translateY(calc(-100% - var(--sp-6)));
	opacity: 0;
	transition: transform var(--dur-slow) var(--ease-smooth),
	            opacity var(--dur-slow) var(--ease-smooth),
	            box-shadow var(--dur) var(--ease);
	will-change: transform;
}

.site-header--visible {
	transform: translateY(0);
	opacity: 1;
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(244, 233, 221, 0.06);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	height: 56px;
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Logo sits inside pill — bone text with red accent */
.site-header .logo,
.site-header .logo__word { color: var(--color-ink-on-dark); }
.site-header .logo__num  { color: var(--color-accent); }

.site-header__brand { display: inline-flex; align-items: center; max-height: 40px; }

.site-header__brand .custom-logo-link,
.site-header__brand .custom-logo,
.site-header__brand img {
	display: block;
	height: 32px;
	width: auto;
	max-height: 32px;
}

.hero__brand .custom-logo,
.hero__brand img {
	display: block;
	height: 28px;
	width: auto;
}

.site-header__nav { display: none; }

.site-header__cta {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

/* Phone pill — light pill nested inside dark pill */
.site-header__phone {
	display: none;
	align-items: center;
	gap: var(--sp-2);
	padding: 10px 18px;
	background: var(--color-bg);
	color: var(--color-ink);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.site-header__phone:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.site-header__phone .icon { color: var(--color-accent); transition: color var(--dur-fast); }
.site-header__phone:hover .icon { color: var(--color-bg); }

/* CTA button inside header — bone pill like Colorcast */
.site-header .btn--primary {
	background: var(--s247-bone);
	color: var(--color-ink);
	border-color: transparent;
	padding: 10px 20px;
	font-size: var(--fs-sm);
}

.site-header .btn--primary:hover,
.site-header .btn--primary:focus-visible {
	background: var(--color-accent);
	color: var(--s247-bone);
	border-color: transparent;
}

@media (min-width: 1024px) {
	.site-header__nav { display: flex; }
	.site-header__phone { display: inline-flex; }
}

.nav--primary {
	display: flex;
	align-items: center;
	gap: var(--sp-7, 1.75rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

.nav__link {
	position: relative;
	color: var(--color-ink-on-dark);
	font-size: var(--fs-sm);
	font-weight: 700;
	padding: var(--sp-2) 0;
	letter-spacing: 0;
	transition: color var(--dur-fast) var(--ease);
}

.nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--color-accent);
	transition: right var(--dur) var(--ease-smooth);
}

.nav__link:hover::after,
.nav__link--current::after,
.nav__link.current-menu-item::after {
	right: 0;
}

.nav__link:hover,
.nav__link--current,
.nav__link.current-menu-item {
	color: var(--color-accent);
}

/* Mobile menu */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--color-ink-on-dark);
	border-radius: var(--radius-pill);
	transition: background var(--dur-fast);
}

.nav-toggle:hover { background: rgba(244, 233, 221, 0.1); }

@media (min-width: 1024px) {
	.nav-toggle { display: none; }
}

/* On mobile, pad the phone away and keep the pill tidy */
@media (max-width: 1023px) {
	.site-header {
		padding: 6px 8px 6px 18px;
	}
	.site-header__inner { height: 52px; gap: var(--sp-3); }
}

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--color-bg-dark);
	color: var(--color-ink-on-dark);
	padding: var(--sp-8) var(--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	transform: translateY(-100%);
	transition: transform var(--dur-slow) var(--ease-smooth);
}

.mobile-nav[data-open="true"] {
	transform: translateY(0);
}

.mobile-nav__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
}

.mobile-nav__close { color: var(--color-ink-on-dark); }

.mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-nav__link {
	display: block;
	padding: var(--sp-4) 0;
	color: var(--color-ink-on-dark);
	font-size: var(--fs-2xl);
	font-weight: 700;
	border-bottom: 1px solid var(--s247-bone-20);
	letter-spacing: var(--tracking-tight);
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.mobile-nav__link:hover {
	color: var(--color-accent);
	padding-left: var(--sp-3);
}

.mobile-nav__link em,
.mobile-nav__link--accent {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}

/* ─── HERO — editorial split: video venstre, kæmpe display højre ─── */
.hero--split {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	background: var(--color-bg);
	color: var(--color-ink);
	overflow: hidden;
	isolation: isolate;
}

@media (max-width: 900px) {
	.hero--split {
		grid-template-columns: 1fr;
		grid-template-rows: 55vh auto;
		min-height: auto;
	}
}

.hero__video {
	position: relative;
	background: var(--color-bg-dark);
	overflow: hidden;
}

.hero__video video,
.hero__video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	background:
		radial-gradient(ellipse at 30% 40%, rgba(158, 43, 37, 0.4) 0%, transparent 60%),
		linear-gradient(135deg, #282828 0%, #1e1e1e 100%);
	color: var(--s247-bone-60);
	font-size: var(--fs-sm);
	padding: var(--sp-6);
	text-align: center;
}

.hero__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: var(--sp-5) var(--sp-10) var(--sp-6);
	background: var(--color-bg);
	height: 100vh;
	min-height: 0;
	overflow: hidden;
}

@media (max-width: 900px) {
	.hero__stage {
		height: auto;
		min-height: auto;
		overflow: visible;
		padding: var(--sp-6) var(--sp-6) var(--sp-10);
	}
}

.hero__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-2);
}

.hero__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.hero__brand-img {
	display: block;
	height: clamp(28px, 2.5vw, 40px);
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

.hero__brand .logo__num {
	color: var(--color-accent);
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.4em;
	letter-spacing: -0.04em;
}

.hero-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--color-ink);
	transition: transform var(--dur-fast) var(--ease);
}

.hero-menu-toggle:hover {
	color: var(--color-accent);
	transform: scale(1.08);
}

@media (min-width: 1024px) {
	.hero-menu-toggle { display: none; }
}

/* Massive display text — fills right side */
.hero__display {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(5rem, 16vw, 18rem);
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: var(--color-ink);
	text-transform: uppercase;
	margin: auto 0;
	padding-block: var(--sp-6);
	text-wrap: nowrap;
}

.hero__display-line {
	display: block;
}

.hero__display--image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 0;
	margin: 0;
	min-height: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.hero__display--image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hero__display-line--italic {
	color: var(--color-accent);
	text-transform: none;
}

.hero__display-line--italic em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	letter-spacing: -0.08em;
	display: inline-block;
}

@media (max-width: 900px) {
	.hero__display {
		font-size: clamp(4.5rem, 22vw, 10rem);
	}
}

.hero__below {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	max-width: 46ch;
	margin-top: auto;
}

.hero__tagline {
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--color-ink);
	letter-spacing: var(--tracking-tight);
	line-height: 1.15;
	margin: 0;
}

.hero__tagline em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
	letter-spacing: -0.01em;
}

.hero__sub {
	font-size: var(--fs-base);
	color: var(--color-ink-soft);
	line-height: var(--lh-base);
	margin: 0;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: center;
	margin-top: var(--sp-3);
}

/* Outlined rectangular CTA (VJUS style) */
.btn--outline {
	background: transparent;
	color: var(--color-ink);
	border: 1.5px solid var(--color-ink);
	border-radius: var(--radius-sm);
	padding: 1.2em 3em;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: var(--fs-sm);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--color-ink);
	color: var(--s247-bone);
}

/* ─── Section heading block — editorial with number + hairline ─── */
.section-head {
	max-width: 840px;
	margin-bottom: var(--sp-16);
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.section-head__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

.section-head__title {
	font-size: var(--fs-2xl);
	line-height: 1.02;
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

.section-head__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
	letter-spacing: -0.02em;
}

.section-head__lead {
	color: var(--color-ink-soft);
	font-size: var(--fs-md);
	max-width: 60ch;
	line-height: var(--lh-base);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.section-head--center .section-head__lead { margin-inline: auto; }

.section--dark .section-head__lead { color: var(--s247-bone-80); }
.section--dark .eyebrow { color: var(--color-ink-on-dark); }

/* ─── Services section ─── */
.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--sp-6);
}

.service-card {
	padding: var(--sp-10) var(--sp-8);
	min-height: 420px;
	justify-content: space-between;
}

.service-card--has-bg {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-ink-on-dark);
	overflow: hidden;
	isolation: isolate;
}

.service-card--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 30, 30, 0.15) 0%, rgba(30, 30, 30, 0.65) 100%);
	z-index: -1;
	transition: background var(--dur) var(--ease);
}

.service-card--has-bg:hover::before {
	background: linear-gradient(180deg, rgba(30, 30, 30, 0.25) 0%, rgba(30, 30, 30, 0.8) 100%);
}

.service-card--has-bg .card__title,
.service-card--has-bg .card__body,
.service-card--has-bg .card__number,
.service-card--has-bg .card__price,
.service-card--has-bg .card__cta {
	color: var(--color-ink-on-dark);
}

.service-card--has-bg .card__cta .icon {
	color: var(--color-ink-on-dark);
}

.service-card--has-bg:hover .card__cta,
.service-card--has-bg:hover .card__cta .icon {
	color: var(--color-accent);
}

.service-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
}

.service-card__title-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

/* ─── Studio section — overlap, asymmetric ─── */
.studio {
	display: grid;
	gap: var(--sp-10);
	align-items: center;
	position: relative;
}

@media (min-width: 900px) {
	.studio {
		grid-template-columns: 1.15fr 1fr;
		gap: var(--sp-16);
	}
}

.studio__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-dark);
	position: relative;
}

@media (min-width: 900px) {
	.studio__media { aspect-ratio: 3 / 4; }
}

.studio__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-cinema) var(--ease-smooth);
}

.studio__media:hover img { transform: scale(1.03); }

.studio__badge {
	position: absolute;
	inset: auto var(--sp-5) var(--sp-5) auto;
	background: var(--color-bg);
	color: var(--color-ink);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	border: 1px solid var(--color-border-strong);
	box-shadow: var(--shadow);
}

.studio__content {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.studio__specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5);
	margin-block: var(--sp-4);
	padding-block: var(--sp-5);
	border-block: 1px solid var(--color-border);
}

.studio__spec-num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 200;
	font-size: var(--fs-2xl);
	color: var(--color-accent);
	letter-spacing: -0.02em;
	line-height: 1;
	display: block;
	margin-bottom: var(--sp-1);
}

.studio__spec-label {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	color: var(--color-ink-mute);
	font-weight: 700;
}

/* ─── Process — numbered, editorial list ─── */
.process {
	display: grid;
	gap: 0;
}

.process__step {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--sp-8);
	align-items: baseline;
	padding-block: var(--sp-8);
	border-bottom: 1px solid var(--color-border-strong);
	transition: padding var(--dur) var(--ease);
}

.process__step:first-child { border-top: 1px solid var(--color-border-strong); }

.process__step:hover {
	padding-left: var(--sp-3);
}

.process__step:hover .process__arrow {
	transform: translateX(6px);
	opacity: 1;
}

.process__num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 200;
	font-size: var(--fs-3xl);
	color: var(--color-accent);
	letter-spacing: -0.02em;
	line-height: 1;
	min-width: 2.5em;
}

.process__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.process__title {
	font-size: var(--fs-xl);
	margin: 0;
	letter-spacing: var(--tracking-snug);
}

.process__desc {
	color: var(--color-ink-soft);
	max-width: 60ch;
}

.process__arrow {
	color: var(--color-accent);
	opacity: 0.5;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ─── Cases / gallery — editorial grid with mixed ratios ─── */
.cases {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(160px, auto);
	gap: var(--sp-4);
}

@media (min-width: 768px) { .cases { gap: var(--sp-5); } }

.case-item {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-dark);
	grid-column: span 12;
	aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
	.case-item { aspect-ratio: auto; }
	.case-item:nth-child(6n+1) { grid-column: span 7; grid-row: span 2; }
	.case-item:nth-child(6n+2) { grid-column: span 5; grid-row: span 1; }
	.case-item:nth-child(6n+3) { grid-column: span 5; grid-row: span 1; }
	.case-item:nth-child(6n+4) { grid-column: span 5; grid-row: span 2; }
	.case-item:nth-child(6n+5) { grid-column: span 7; grid-row: span 1; }
	.case-item:nth-child(6n+6) { grid-column: span 7; grid-row: span 1; }
}

.case-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-cinema) var(--ease-smooth);
}

.case-item:hover img { transform: scale(1.06); }

.case-item__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--sp-5) var(--sp-6);
	background: linear-gradient(0deg, rgba(40, 40, 40, 0.92) 0%, transparent 100%);
	color: var(--color-ink-on-dark);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
}

.case-item__title {
	font-size: var(--fs-md);
	margin: 0;
	color: var(--color-ink-on-dark);
	letter-spacing: var(--tracking-snug);
}

.case-item__meta {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-sm);
	color: var(--s247-bone-80);
}

/* ─── Testimonials — ONE big editorial quote ─── */
.testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--sp-8);
}

.testimonial {
	padding: var(--sp-10) var(--sp-8);
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	position: relative;
	border-top: 1px solid var(--color-border-strong);
}

.testimonial__quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 200;
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
	line-height: 1.45;
	color: var(--color-ink);
	letter-spacing: -0.005em;
}

.testimonial__quote::before {
	content: "“";
	font-size: 2em;
	line-height: 0;
	color: var(--color-accent);
	margin-right: 0.15em;
	vertical-align: -0.15em;
	font-weight: 800;
}

.testimonial__author {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	font-size: var(--fs-sm);
	margin-top: auto;
}

.testimonial__name {
	font-weight: 700;
	color: var(--color-ink);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: var(--fs-xs);
}

.testimonial__company {
	color: var(--color-ink-mute);
	font-family: var(--font-serif);
	font-style: italic;
}

/* ─── FAQ ─── */
.faq-wrap {
	display: grid;
	gap: var(--sp-12);
	align-items: start;
}

.faq__head { margin-bottom: 0; }

@media (min-width: 900px) {
	.faq-wrap { grid-template-columns: 1fr 1.5fr; gap: var(--sp-16); }
	.faq__head {
		position: sticky;
		top: calc(var(--header-h) + var(--sp-6));
	}
}

/* ─── CTA banner — HUGE editorial display ─── */
.cta-banner {
	background: var(--color-bg-dark);
	color: var(--color-ink-on-dark);
	border-radius: var(--radius-xl);
	padding: var(--sp-16) var(--sp-10);
	display: grid;
	gap: var(--sp-10);
	align-items: center;
	position: relative;
	overflow: hidden;
}

.cta-banner::before {
	content: "247";
	position: absolute;
	right: -0.12em;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(10rem, 25vw, 28rem);
	line-height: 0.8;
	color: var(--color-accent);
	opacity: 0.16;
	letter-spacing: -0.06em;
	pointer-events: none;
}

@media (min-width: 800px) {
	.cta-banner {
		grid-template-columns: 1fr auto;
		padding: var(--sp-20) var(--sp-16);
	}
}

.cta-banner__content { position: relative; z-index: 1; }

.cta-banner__eyebrow { color: var(--color-accent); }
.cta-banner__eyebrow::before { background: currentColor; }

.cta-banner__title {
	font-size: var(--fs-3xl);
	color: var(--color-ink-on-dark);
	line-height: 0.96;
	letter-spacing: var(--tracking-tight);
	margin-top: var(--sp-5);
	text-wrap: balance;
}

.cta-banner__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
	display: block;
	letter-spacing: -0.02em;
}

.cta-banner__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	position: relative;
	z-index: 1;
}

/* ─── Footer — editorial, rich ─── */
.site-footer {
	background: var(--color-bg-dark);
	color: var(--color-ink-on-dark);
	padding-block: var(--sp-20) var(--sp-8);
	position: relative;
	overflow: hidden;
}

.site-footer a {
	color: var(--color-ink-on-dark);
	transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}

.site-footer a:hover {
	color: var(--color-accent);
}

.site-footer__top {
	padding-bottom: var(--sp-16);
	border-bottom: 1px solid var(--s247-bone-20);
	margin-bottom: var(--sp-8);
}

.site-footer__big {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 200;
	font-size: clamp(3rem, 2rem + 6vw, 8rem);
	line-height: 0.98;
	color: var(--color-ink-on-dark);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.site-footer__big em {
	color: var(--color-accent);
	font-style: italic;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: var(--sp-10);
}

@media (max-width: 800px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
	.site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__col h3 {
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	margin-bottom: var(--sp-5);
	color: var(--s247-bone-60);
	font-weight: 700;
}

.site-footer__col ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
}

.site-footer__tagline {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-xl);
	color: var(--color-accent);
	margin-top: var(--sp-5);
	letter-spacing: -0.01em;
}

.site-footer__heart {
	display: inline-block;
	color: var(--color-accent);
	margin-left: 4px;
	animation: s247-heartbeat 1.6s ease-in-out infinite;
	transform-origin: center;
}
@keyframes s247-heartbeat {
	0%, 30%, 60%, 100% { transform: scale(1); }
	40% { transform: scale(1.25); }
	50% { transform: scale(1.1); }
}

.site-footer__bottom {
	margin-top: var(--sp-12);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--s247-bone-20);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--s247-bone-60);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
}

.site-footer__bottom ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--sp-6);
}

/* Breadcrumb */
.breadcrumb {
	padding: var(--sp-5) 0;
	font-size: var(--fs-xs);
	color: var(--color-ink-mute);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-weight: 700;
}

.breadcrumb ol {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: var(--sp-3);
	color: var(--color-ink-faint);
}

/* Placeholder */
.placeholder {
	min-height: 70vh;
	display: grid;
	place-items: center;
	text-align: center;
}

.placeholder__inner { max-width: 640px; }

/* ─── Studio moods — tabbed panel ─── */
.moods__title {
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--sp-10);
	line-height: 1.1;
}

.moods__title-a { color: var(--color-ink-on-dark); }
.moods__title-b { color: var(--color-accent); margin-left: 0.4em; }

.moods__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	align-items: start;
}

@media (min-width: 900px) {
	.moods__panel {
		grid-template-columns: minmax(240px, 320px) 1fr;
		gap: var(--sp-10);
	}
	/* Full-variant: slider spænder hele viewport, med peek af næste slide. */
	.moods__panel--full {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.moods__panel--full .moods__stage { aspect-ratio: 21 / 9; }
}

/* Full-bleed breakout af .wrap-containeren */
.moods__panel--full {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	margin-top: var(--sp-8);
}
.moods__panel--full .moods__stage {
	border-radius: 0;
}
/* Track: slides er 92vw brede med 2vw gap → 6vw total peek-plads
   (3vw på begge sider i midten, mindre i kanterne). */
.moods__panel--full .moods__track {
	padding-left: 3vw;
}
.moods__panel--full .moods__slide {
	flex: 0 0 92vw;
	margin-right: 2vw;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.moods__panel--full .moods__slide:last-child {
	margin-right: 3vw;
}

/* Caption pr. slide — låst fast til sit billede (vist på mobil) */
.moods__slide-caption {
	position: absolute;
	left: var(--sp-4);
	bottom: var(--sp-4);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-ink-on-dark);
	border-radius: 999px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	z-index: 2;
	max-width: calc(100% - var(--sp-8));
}
.moods__slide-caption .icon {
	color: var(--color-accent);
	flex-shrink: 0;
}
@media (min-width: 1024px) {
	/* Desktop: slideren har et samlet chip-overlay i stedet, så per-slide
	   caption er overflødig og ville konkurrere. */
	.moods__slide-caption { display: none; }
}

/* Chip-overlay (label-knapper oven på billedet) — kun desktop */
.moods__tabs-overlay {
	position: absolute;
	left: 50%;
	bottom: var(--sp-5);
	transform: translateX(-50%);
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 8px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 999px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 3;
	max-width: calc(100% - var(--sp-10));
}
@media (max-width: 1023px) {
	/* Mobil + tablet: gem chip-overlay — per-slide caption tager over. */
	.moods__tabs-overlay { display: none; }
}
.moods__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}
.moods__chip:hover { color: #fff; }
.moods__chip.is-active {
	background: var(--color-accent);
	color: #fff;
}
.moods__chip .icon { opacity: 0.9; }

.moods__tabs {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.moods__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	background: transparent;
	color: var(--s247-bone-60);
	border: 1px solid var(--s247-bone-20);
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-sm);
	text-align: left;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            background var(--dur-fast) var(--ease);
}

.moods__tab .icon { color: var(--color-accent); flex: 0 0 auto; }

.moods__tab:hover {
	color: var(--color-ink-on-dark);
	border-color: var(--s247-bone-40);
}

.moods__tab.is-active {
	color: var(--color-ink-on-dark);
	border-color: var(--color-accent);
	background: rgba(158, 43, 37, 0.08);
}

.moods__stage {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-dark-rich);
}

.moods__track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.moods__slide {
	flex: 0 0 100%;
	position: relative;
	min-width: 0;
}

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

.moods__image-placeholder {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	color: var(--s247-bone-60);
	font-size: var(--fs-sm);
}

.moods__slide-caption {
	position: absolute;
	left: var(--sp-4);
	bottom: var(--sp-4);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--color-ink-on-dark);
	border-radius: 999px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	z-index: 2;
}

.moods__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transition: transform 160ms ease, background 160ms ease;
}
.moods__nav:hover { transform: translateY(-50%) scale(1.08); background: #fff; }
.moods__nav--prev { left: var(--sp-4); }
.moods__nav--prev .icon { transform: rotate(180deg); }
.moods__nav--next { right: var(--sp-4); }

@media (max-width: 1023px) {
	/* Mobil + tablet: nav-pile skal være synlige men ikke dominere */
	.moods__nav {
		width: 36px;
		height: 36px;
		top: auto;
		bottom: var(--sp-4);
		transform: none;
	}
	.moods__nav:hover { transform: scale(1.06); }
	.moods__nav--prev { left: auto; right: calc(var(--sp-4) + 44px); }
	.moods__nav--next { right: var(--sp-4); }
}

.moods__dots {
	position: absolute;
	right: var(--sp-4);
	bottom: var(--sp-4);
	display: inline-flex;
	gap: 6px;
	padding: 6px 8px;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 999px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 2;
}
.moods__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.4);
	padding: 0;
	cursor: pointer;
	transition: background 160ms ease, width 160ms ease;
}
.moods__dot.is-active {
	background: var(--color-accent);
	width: 22px;
	border-radius: 999px;
}


/* ─── Team grid & modal (Om-side) ─── */
.team-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.team-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	width: 100%;
	color: inherit;
	transition: transform var(--dur) var(--ease);
}

.team-card:hover,
.team-card:focus-visible {
	transform: translateY(-4px);
	outline: none;
}

.team-card:focus-visible .team-card__media {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.team-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface-deep);
}

.team-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) var(--ease-smooth);
}

.team-card:hover .team-card__media img {
	transform: scale(1.04);
}

.team-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 4rem;
	color: var(--color-ink-mute);
}

.team-card__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-inline: var(--sp-1);
}

.team-card__name {
	font-weight: 700;
	font-size: var(--fs-md);
	color: var(--color-ink);
	letter-spacing: var(--tracking-snug);
}

.team-card__role {
	font-size: var(--fs-sm);
	color: var(--color-ink-mute);
}

/* Modal */
.team-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
}

.team-modal[hidden] { display: none; }

.team-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
	animation: fade-in var(--dur) var(--ease);
}

.team-modal__dialog {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	max-width: 920px;
	width: 100%;
	max-height: 90vh;
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	animation: modal-in var(--dur) var(--ease-smooth);
}

@media (min-width: 768px) {
	.team-modal__dialog {
		grid-template-columns: 1fr 1fr;
	}
}

.team-modal__media {
	background: var(--color-surface-deep);
	min-height: 220px;
	aspect-ratio: 4 / 5;
	max-height: 90vh;
}

.team-modal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team-modal__body {
	padding: var(--sp-8);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.team-modal__name {
	font-family: var(--font-sans);
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: var(--tracking-tight);
	margin: 0;
}

.team-modal__role {
	color: var(--color-accent);
	font-weight: 600;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
}

.team-modal__text {
	color: var(--color-ink-soft);
	line-height: var(--lh-base);
	font-size: var(--fs-base);
}

.team-modal__text p + p { margin-top: var(--sp-3); }

.team-modal__close {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--color-bg);
	color: var(--color-ink);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: background var(--dur-fast), color var(--dur-fast);
}

.team-modal__close:hover {
	background: var(--color-accent);
	color: var(--color-ink-on-dark);
}

@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

body.team-modal-open { overflow: hidden; }


/* ─── Kontakt — "Vælg din side" ─── */
.kontakt-section {
	background: var(--color-bg);
	padding: var(--sp-16) var(--sp-5);
	display: flex;
	justify-content: center;
}

.kontakt-card {
	width: 100%;
	max-width: 680px;
	background: var(--color-bg);
	border-radius: 16px;
	padding: var(--sp-10);
}

.kontakt-head { margin-bottom: var(--sp-6); }

.kontakt-eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.15em;
	color: #5F5E5A;
	text-transform: uppercase;
	margin-bottom: var(--sp-3);
}

.kontakt-title {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	letter-spacing: -0.02em;
	color: #2C2C2A;
	line-height: 1.1;
	margin: 0;
}

.kontakt-title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: #2C2C2A;
}

.sides {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: var(--sp-6);
}

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

.side {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-6) var(--sp-5);
	text-align: left;
	cursor: pointer;
	border: 0;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.side--a { background: #FFFFFF; color: #2C2C2A; }
.side--b { background: #2C2C2A; color: #F1EFE8; }

.side:hover,
.side:focus-visible { outline: none; transform: translateY(-2px); }

.side.is-selected { box-shadow: inset 0 0 0 2px var(--color-accent); }

.side__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.side--a .side__label { color: #5F5E5A; }
.side--b .side__label { color: #B4B2A9; }

.side__title {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
}

.side__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	line-height: 1.7;
}

.side--a .side__list { color: #5F5E5A; }
.side--b .side__list { color: #B4B2A9; }

.side__list li::before {
	content: "→";
	margin-right: 0.5em;
	color: var(--color-accent);
}

.kontakt-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: var(--sp-5);
}

.kontakt-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

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

.kontakt-field { display: block; }

.kontakt-field input,
.kontakt-field textarea {
	width: 100%;
	background: #FFFFFF;
	border: 0.5px solid rgba(180, 178, 169, 0.6);
	border-radius: 8px;
	padding: 12px 16px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: #2C2C2A;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.kontakt-field textarea { resize: vertical; min-height: 96px; }

.kontakt-field input::placeholder,
.kontakt-field textarea::placeholder { color: #5F5E5A; }

.kontakt-field input:focus,
.kontakt-field textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(158, 43, 37, 0.12);
}

.kontakt-submit {
	align-self: flex-start;
	background: #2C2C2A;
	color: #F1EFE8;
	border: 0;
	border-radius: 8px;
	padding: 10px 22px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background var(--dur-fast) var(--ease);
}

.kontakt-submit:hover { background: var(--color-accent); }

.kontakt-success {
	padding: var(--sp-6);
	background: #FFFFFF;
	border-radius: 12px;
	margin-top: var(--sp-5);
}

.kontakt-success h2 {
	font-family: var(--font-sans);
	font-size: 1.25rem;
	margin-bottom: var(--sp-2);
}

.kontakt-errors {
	position: relative;
	padding: var(--sp-5) var(--sp-6);
	background: #FFFFFF;
	border: 0.5px solid rgba(158, 43, 37, 0.35);
	border-left: 3px solid var(--color-accent);
	border-radius: 8px;
	color: #2C2C2A;
	margin-top: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.kontakt-errors__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.kontakt-errors ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.kontakt-errors li::before {
	content: "→";
	color: var(--color-accent);
	margin-right: 0.5em;
}


/* ─── Udlejning shop ─── */
.shop {
	padding: var(--sp-12) 0 var(--sp-16);
	background: var(--color-bg);
}

.shop__head {
	max-width: 680px;
	margin-bottom: var(--sp-10);
}

/* ─── Modern shop-hero ─── */
.shop-hero {
	position: relative;
	padding: calc(var(--sp-16) + 30px) 0 var(--sp-12);
	background: #15100d;
	color: var(--color-ink-on-dark);
	overflow: hidden;
}
.shop-hero__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 15%, rgba(158,43,37,0.28) 0%, transparent 55%),
		radial-gradient(circle at 10% 90%, rgba(158,43,37,0.15) 0%, transparent 60%),
		linear-gradient(180deg, #20161200 0%, rgba(0,0,0,0.25) 100%);
	pointer-events: none;
}
.shop-hero__inner {
	position: relative;
	max-width: 900px;
}
.shop-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	background: color-mix(in srgb, var(--color-accent) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: color-mix(in srgb, var(--color-accent) 100%, #fff 10%);
}
.shop-hero__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	position: relative;
	flex-shrink: 0;
}
.shop-hero__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--color-accent);
	animation: s247-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.shop-hero__title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(2.5rem, 1.8rem + 4vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	margin: var(--sp-5) 0 var(--sp-4);
	color: var(--color-ink-on-dark);
}
.shop-hero__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}
.shop-hero__lead {
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-ink-on-dark) 85%, transparent);
	max-width: 58ch;
	margin: 0 0 var(--sp-8);
}
.shop-hero__stats {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: rgba(244, 233, 221, 0.04);
	border: 1px solid rgba(244, 233, 221, 0.1);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
@media (min-width: 720px) {
	.shop-hero__stats { grid-template-columns: repeat(4, 1fr); }
}
.shop-hero__stats > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 14px;
	border-left: 2px solid var(--color-accent);
}
.shop-hero__stats dt {
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: color-mix(in srgb, var(--color-ink-on-dark) 65%, transparent);
}
.shop-hero__stats dd {
	margin: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
	color: var(--color-ink-on-dark);
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.shop-hero__stats dd span {
	font-size: 1rem;
	color: var(--color-accent);
}
.shop-hero__stats-small {
	font-size: 1.35rem !important;
}
.shop-hero__stats-small span {
	font-family: var(--font-mono);
	font-style: normal;
	font-weight: 400;
	font-size: 10px !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--color-ink-on-dark) 60%, transparent) !important;
}

/* ─── Kategori-tiles ─── */
.shop-cats {
	padding: var(--sp-12) 0 0;
}
.shop-cats__head { margin-bottom: var(--sp-6); }
.shop-cats__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
	margin: var(--sp-2) 0 0;
}
.shop-cats__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.shop-cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 52px;
	padding: 0 20px 0 16px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 12px);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.015em;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: background 220ms ease, border-color 220ms ease, color 220ms ease,
	            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 220ms ease;
}
.shop-cat-chip::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--color-accent);
	transform: scaleY(0.35);
	transform-origin: center;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-cat-chip:hover {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-ink-on-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.shop-cat-chip:hover::before {
	transform: scaleY(1);
}
.shop-cat-chip__num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--color-accent);
	min-width: 22px;
}
.shop-cat-chip__name {
	flex: 1;
	white-space: nowrap;
}
.shop-cat-chip__count {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-ink-mute);
	padding: 3px 8px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.shop-cat-chip:hover .shop-cat-chip__count {
	color: var(--color-ink-on-dark);
	border-color: color-mix(in srgb, var(--color-ink-on-dark) 30%, transparent);
}
.shop-cat-chip__arrow {
	display: inline-flex;
	align-items: center;
	color: var(--color-accent);
	margin-left: -4px;
	width: 0;
	opacity: 0;
	overflow: hidden;
	transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 180ms ease,
	            margin-left 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-cat-chip:hover .shop-cat-chip__arrow {
	width: 18px;
	opacity: 1;
	margin-left: 0;
	color: var(--color-accent);
}

.shop__head--compact {
	margin-bottom: var(--sp-6);
}

.shop__head--compact .shop__title {
	font-size: var(--fs-xl);
	margin-top: var(--sp-2);
	margin-bottom: 0;
}

.shop--related,
.shop--others {
	padding: var(--sp-12) 0;
	border-top: 1px solid var(--color-border);
}

.shop--others {
	padding-bottom: var(--sp-16);
}

.shop__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-2xl);
	letter-spacing: var(--tracking-tight);
	line-height: 1.05;
	margin: var(--sp-3) 0 var(--sp-4);
}

.shop__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}

.shop__lead {
	color: var(--color-ink-soft);
	font-size: var(--fs-md);
	line-height: var(--lh-base);
}

.shop__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-8);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--color-border);
}

.shop__filter {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 8px 16px;
	background: transparent;
	color: var(--color-ink-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--dur-fast) var(--ease);
}

.shop__filter:hover {
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.shop__filter.is-active {
	background: var(--color-ink);
	color: var(--color-ink-on-dark);
	border-color: var(--color-ink);
}

.shop__filter-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: rgba(40, 40, 40, 0.08);
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
}

.shop__filter.is-active .shop__filter-count {
	background: rgba(244, 233, 221, 0.2);
	color: var(--color-ink-on-dark);
}

.shop__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.shop__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.shop__grid { grid-template-columns: repeat(4, 1fr); }
}

.shop__empty {
	padding: var(--sp-16) var(--sp-5);
	text-align: center;
	color: var(--color-ink-mute);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
}

/* Product card */
.product-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid transparent;
	transition: transform var(--dur) var(--ease-smooth),
	            border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

.product-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-border);
	box-shadow: var(--shadow);
}

.product-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--color-surface-deep);
	overflow: hidden;
}

.product-card__img,
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) var(--ease-smooth);
}

.product-card:hover .product-card__img,
.product-card:hover .product-card__media img {
	transform: scale(1.04);
}

.product-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--color-ink-mute);
}

.product-card__status {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	padding: 4px 10px;
	background: var(--color-bg);
	color: var(--color-ink);
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.product-card__status--out {
	background: var(--color-ink);
	color: var(--color-ink-on-dark);
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5);
	flex: 1;
}

.product-card__cat {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-accent);
}

.product-card__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-md);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0;
}

.product-card__desc {
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
	line-height: 1.45;
	margin: 0;
}

.product-card__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--color-border-soft);
}

.product-card__prices {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.product-card__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.product-card__price-num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--color-accent);
}

.product-card__price-unit {
	font-size: 12px;
	color: var(--color-ink-mute);
}

.product-card__price--sub .product-card__price-num {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-ink-soft);
}

.product-card__price--sub .product-card__price-unit {
	font-size: 11px;
}

.product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-ink);
	transition: color var(--dur-fast) var(--ease);
}

.product-card:hover .product-card__cta {
	color: var(--color-accent);
}

.product-card:hover .product-card__cta .icon {
	transform: translateX(4px);
	transition: transform var(--dur-fast) var(--ease);
}

/* Single udlejning product detail */
.single-udlejning {
	display: grid;
	gap: var(--sp-10);
	padding: var(--sp-12) 0 var(--sp-10);
	align-items: start;
}

@media (min-width: 900px) {
	.single-udlejning { grid-template-columns: 1fr 1fr; }
}

.single-udlejning__media {
	aspect-ratio: 4 / 3;
	background: var(--color-surface-deep);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

@media (min-width: 900px) {
	.single-udlejning__media {
		aspect-ratio: 1 / 1;
	}
}

.single-udlejning__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-udlejning__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.single-udlejning__content {
	font-size: var(--fs-base);
	color: var(--color-ink-soft);
	line-height: 1.65;
	max-width: 62ch;
}
.single-udlejning__content > * { margin: 0; }
.single-udlejning__content > * + * { margin-top: var(--sp-4); }
.single-udlejning__content p { max-width: 60ch; }
.single-udlejning__content strong,
.single-udlejning__content b {
	color: var(--color-ink);
	font-weight: 700;
}
.single-udlejning__content ul,
.single-udlejning__content ol {
	padding-left: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.single-udlejning__content li { line-height: 1.5; }
.single-udlejning__content h2,
.single-udlejning__content h3,
.single-udlejning__content h4 {
	font-family: var(--font-sans);
	font-weight: 700;
	color: var(--color-ink);
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-2);
	letter-spacing: -0.01em;
}
.single-udlejning__content h2 { font-size: var(--fs-lg); }
.single-udlejning__content h3 { font-size: var(--fs-md); }

@media (min-width: 900px) {
	.single-udlejning__body {
		position: sticky;
		top: calc(var(--sp-10) + 80px);
	}
}

.single-udlejning__price-box {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	max-width: 480px;
}

.single-udlejning__price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px solid var(--color-border-soft);
}

.single-udlejning__price-row:last-child { border-bottom: 0; }

.single-udlejning__price-label {
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
}

.single-udlejning__price-value {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--color-accent);
}

/* ─── Studiet-side ─── */

/* 1) Hero video */
.studiet-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	padding: var(--sp-16) 0 var(--sp-12);
	overflow: hidden;
	isolation: isolate;
	color: var(--color-ink-on-dark);
}

.studiet-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-bg-dark);
}

.studiet-hero__media video,
.studiet-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.studiet-hero__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1e1e1e 0%, #3a2a26 60%, #9e2b25 140%);
}

.studiet-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.1) 0%, rgba(20, 20, 20, 0.55) 60%, rgba(20, 20, 20, 0.85) 100%);
}

.studiet-hero__content {
	position: relative;
	z-index: 1;
	max-width: 780px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.studiet-hero__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(2.5rem, 1.8rem + 4vw, 5.5rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--color-ink-on-dark);
}

.studiet-hero__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
	letter-spacing: -0.02em;
}

.studiet-hero__lead {
	font-size: var(--fs-md);
	color: var(--s247-bone-80);
	max-width: 58ch;
	line-height: 1.5;
}

.eyebrow--on-dark { color: var(--s247-bone-60); }

/* 2) Setup switcher */
.studiet-setups__head {
	margin-bottom: var(--sp-8);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.studiet-setups__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
	align-items: start;
}

@media (min-width: 900px) {
	.studiet-setups__panel {
		grid-template-columns: 1.2fr 1fr;
		gap: var(--sp-10);
	}
}

.studiet-setups__stage {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface-deep);
	max-height: 70vh;
}

@media (min-width: 900px) {
	.studiet-setups__stage {
		aspect-ratio: 1 / 1;
		max-height: 560px;
	}
}

.studiet-setups__image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--dur) var(--ease-smooth);
}

.studiet-setups__image.is-active { opacity: 1; }

.studiet-setups__image[hidden] { display: block; }

.studiet-setups__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.studiet-setups__placeholder {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	color: var(--color-ink-mute);
	font-size: var(--fs-sm);
}

.studiet-setups__tabs {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.studiet-setups__tab {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-5);
	background: transparent;
	color: var(--color-ink);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
}

.studiet-setups__tab:hover {
	border-color: var(--color-ink);
}

.studiet-setups__tab.is-active {
	background: var(--color-ink);
	color: var(--color-ink-on-dark);
	border-color: var(--color-ink);
}

.studiet-setups__tab.is-active .studiet-setups__tab-desc { color: var(--s247-bone-60); }
.studiet-setups__tab.is-active .icon { color: var(--color-accent); }

.studiet-setups__tab-num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--color-accent);
}

.studiet-setups__tab-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.studiet-setups__tab-label {
	font-weight: 700;
	font-size: var(--fs-base);
	letter-spacing: -0.01em;
}

.studiet-setups__tab-desc {
	font-size: var(--fs-sm);
	color: var(--color-ink-mute);
	line-height: 1.4;
}

/* 3) Reels */
.studiet-reels__grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
	margin-top: var(--sp-8);
}

@media (min-width: 640px) {
	.studiet-reels__grid { grid-template-columns: repeat(3, 1fr); }
}

.reel {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.reel__media {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-dark);
}

.reel__media video,
.reel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.reel__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--s247-bone-60);
}

.reel__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-inline: 2px;
}

.reel__label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-accent);
}

.reel__title {
	font-weight: 700;
	font-size: var(--fs-base);
	color: var(--color-ink);
	letter-spacing: -0.005em;
}

/* 4) Book + rent */
.studiet-book {
	background: var(--color-bg);
}

.studiet-book__card {
	display: grid;
	gap: var(--sp-8);
	padding: var(--sp-12) var(--sp-10);
	background: var(--color-bg-dark);
	color: var(--color-ink-on-dark);
	border-radius: var(--radius-xl);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 900px) {
	.studiet-book__card { grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); }
}

.studiet-book__main {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.studiet-book__main .section-head__title { color: var(--color-ink-on-dark); }
.studiet-book__main .section-head__title em { color: var(--color-accent); }

.studiet-book__lead {
	color: var(--s247-bone-80);
	font-size: var(--fs-md);
	line-height: 1.5;
	max-width: 54ch;
}

.studiet-book__main .btn--primary {
	align-self: flex-start;
	background: var(--color-accent);
	color: var(--s247-bone);
	border-color: var(--color-accent);
}

.studiet-book__card {
	position: relative;
	overflow: hidden;
}
.studiet-book__card::after {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	width: 55%;
	height: 140%;
	background: radial-gradient(circle at center, rgba(158,43,37,0.22) 0%, transparent 62%);
	pointer-events: none;
	z-index: 0;
}
.studiet-book__main,
.studiet-book__aside { position: relative; z-index: 1; }

.studiet-book__aside {
	padding: var(--sp-6);
	background: rgba(244, 233, 221, 0.05);
	border: 1px solid rgba(244, 233, 221, 0.14);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.studiet-book__aside-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--s247-bone-80, rgba(244,233,221,0.75));
}

.studiet-book__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	position: relative;
	flex-shrink: 0;
}
.studiet-book__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.5;
	animation: s247-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes s247-pulse {
	0%   { transform: scale(1);   opacity: 0.55; }
	70%  { transform: scale(2.4); opacity: 0;    }
	100% { transform: scale(2.4); opacity: 0;    }
}

.studiet-book__thumb { position: relative; }
.studiet-book__price {
	position: absolute;
	left: 6px;
	bottom: 6px;
	padding: 3px 8px;
	background: rgba(0, 0, 0, 0.75);
	color: var(--color-ink-on-dark);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	white-space: nowrap;
}

.studiet-book__count {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--color-accent);
	margin-right: 4px;
	letter-spacing: -0.01em;
}

.studiet-book__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.studiet-book__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md, 10px);
	overflow: hidden;
	background: rgba(244,233,221,0.08);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.studiet-book__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 320ms ease;
}
.studiet-book__thumb:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.studiet-book__thumb:hover img { transform: scale(1.08); }

.studiet-book__thumbs-lead {
	color: var(--s247-bone-80);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

.studiet-book__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-ink-on-dark);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 1px solid var(--color-accent);
	align-self: flex-start;
	transition: color 160ms ease, border-color 160ms ease, gap 160ms ease;
}
.studiet-book__link:hover {
	color: var(--color-accent);
	gap: 10px;
}
.studiet-book__link .icon { transition: transform 160ms ease; }
.studiet-book__link:hover .icon { transform: translateX(2px); }

.studiet-book__psst {
	color: var(--s247-bone-80);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.studiet-book__psst em {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--color-accent);
	margin-right: 0.25em;
}

.btn--on-dark {
	color: var(--color-ink-on-dark);
}

.btn--on-dark:hover {
	color: var(--color-accent);
}

/* 5) Booking guide */
.studiet-guide__list {
	list-style: none;
	padding: 0;
	margin: var(--sp-8) 0 0;
	display: grid;
	gap: 0;
}

.studiet-guide__step {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: var(--sp-5);
	padding: var(--sp-4) var(--sp-3);
	border-top: 1px solid var(--color-border);
	align-items: start;
	position: relative;
	transition: background 180ms ease, padding-left 220ms ease;
}

.studiet-guide__step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--color-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 220ms ease-out;
}

.studiet-guide__step:hover {
	background: color-mix(in srgb, var(--color-accent) 4%, transparent);
	padding-left: var(--sp-5);
}

.studiet-guide__step:hover::before {
	transform: scaleY(1);
}

.studiet-guide__step:last-child {
	border-bottom: 1px solid var(--color-border);
}

.studiet-guide__num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.7rem, 1rem + 1.2vw, 2.2rem);
	color: var(--color-accent);
	line-height: 0.9;
	opacity: 0.55;
	transition: opacity 180ms ease, transform 220ms ease-out;
}

.studiet-guide__step:hover .studiet-guide__num {
	opacity: 1;
	transform: translateY(-2px);
}

.studiet-guide__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.studiet-guide__step-title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-lg);
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0;
}

.studiet-guide__text {
	color: var(--color-ink-soft);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	margin: 0;
	max-width: 68ch;
}

.studiet-guide__joke {
	color: var(--color-ink-mute);
	font-size: var(--fs-sm);
	line-height: 1.5;
	margin: var(--sp-1) 0 0;
	font-style: italic;
	max-width: 68ch;
}

/* Final CTA under guide — mørk "pop"-variant så den ikke visuelt dubblerer
   CTA-banneret nedenunder. Adskilles via mørk baggrund + accent-glow +
   60-sek-timer-badge + sekundær rundvisnings-link. */
.studiet-guide__cta {
	margin-top: var(--sp-12);
	padding: var(--sp-10) var(--sp-10);
	background: linear-gradient(135deg, #201815 0%, #2c1f1b 100%);
	color: var(--color-ink-on-dark);
	border-radius: var(--radius-xl, 18px);
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
	align-items: center;
}
.studiet-guide__cta::before {
	content: "";
	position: absolute;
	right: -10%;
	top: -30%;
	width: 60%;
	height: 160%;
	background: radial-gradient(circle at center, rgba(158,43,37,0.35) 0%, transparent 60%);
	pointer-events: none;
}
@media (min-width: 820px) {
	.studiet-guide__cta {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--sp-10);
	}
	/* Når video/poster er uploadet: venstre tekst-kolonne + højre medie. */
	.studiet-guide__cta.has-media {
		grid-template-columns: 1fr 1fr;
	}
}

.studiet-guide__cta-left,
.studiet-guide__cta-actions {
	position: relative;
	z-index: 1;
}

.studiet-guide__cta-actions {
	margin-top: var(--sp-5);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
}

/* Video/billede i guide-CTA */
.studiet-guide__cta-media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg, 14px);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1;
}
.studiet-guide__cta-media video,
.studiet-guide__cta-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.studiet-guide__cta-media .reel__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border: 0;
	background: rgba(255,255,255,0.92);
	color: var(--color-ink);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0,0,0,0.45);
	transition: transform 160ms ease, background 160ms ease;
}
.studiet-guide__cta-media .reel__play:hover {
	transform: scale(1.08);
	background: #fff;
}
.studiet-guide__cta-media.is-playing .reel__play { display: none; }

.studiet-guide__timer {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 6px 14px;
	background: rgba(158, 43, 37, 0.2);
	border: 1px solid rgba(158, 43, 37, 0.55);
	border-radius: 999px;
	margin-bottom: var(--sp-4);
}
.studiet-guide__timer-num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--color-accent);
	line-height: 1;
}
.studiet-guide__timer-unit {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent);
}

.studiet-guide__cta-title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-ink-on-dark);
	margin: 0 0 var(--sp-3);
}
.studiet-guide__cta-title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}
.studiet-guide__cta-lead {
	font-size: 14px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--color-ink-on-dark) 80%, transparent);
	margin: 0;
	max-width: 48ch;
}


.studiet-guide__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: color-mix(in srgb, var(--color-ink-on-dark) 75%, transparent);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 13px;
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-ink-on-dark) 30%, transparent);
	transition: color 160ms ease, border-color 160ms ease, gap 160ms ease;
}
.studiet-guide__cta-link:hover {
	color: var(--color-ink-on-dark);
	border-color: var(--color-ink-on-dark);
	gap: 10px;
}

/* ─── Stats-strip (efter hero) ─── */
.studiet-stats {
	padding: var(--sp-10) 0;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}
.studiet-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-6) var(--sp-4);
}
@media (min-width: 700px) {
	.studiet-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.studiet-stats__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding-left: var(--sp-4);
	border-left: 2px solid var(--color-accent);
}
.studiet-stats__num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 1;
	color: var(--color-accent);
	letter-spacing: -0.02em;
}
.studiet-stats__unit {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-ink-soft);
	text-transform: lowercase;
}
.studiet-stats__label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-ink-mute);
	margin-top: 4px;
}

/* ─── Book-CTA pr. setup (floating nederst på billedet) ─── */
/* .studiet-setups__image har allerede position:absolute i stage-stacking,
   så CTA'en får automatisk dette som containing block. */
.studiet-setups__book {
	position: absolute;
	left: var(--sp-5);
	bottom: var(--sp-5);
	z-index: 2;
	box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}

/* ─── Mid-page banner ─── */
.studiet-banner {
	padding: var(--sp-16) 0;
	background: linear-gradient(135deg, #18120f 0%, #2a1f1a 100%);
	color: var(--color-ink-on-dark);
	position: relative;
	overflow: hidden;
}
.studiet-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 15% 20%, rgba(158,43,37,0.25) 0%, transparent 40%),
		radial-gradient(circle at 85% 80%, rgba(158,43,37,0.15) 0%, transparent 45%);
	pointer-events: none;
}
.studiet-banner__inner {
	position: relative;
	max-width: 780px;
}
.studiet-banner__title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(2.2rem, 5vw, 3.8rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--color-ink-on-dark);
	margin: var(--sp-3) 0 var(--sp-4);
}
.studiet-banner__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}
.studiet-banner__lead {
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-ink-on-dark) 85%, transparent);
	margin: 0 0 var(--sp-6);
	max-width: 58ch;
}
.studiet-banner__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
}

.studiet-banner__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: color-mix(in srgb, var(--color-ink-on-dark) 75%, transparent);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-ink-on-dark) 30%, transparent);
	transition: color 160ms ease, border-color 160ms ease, gap 160ms ease;
}
.studiet-banner__link:hover {
	color: var(--color-ink-on-dark);
	border-color: var(--color-ink-on-dark);
	gap: 10px;
}
.studiet-banner__link .icon {
	transition: transform 160ms ease;
}
.studiet-banner__link:hover .icon {
	transform: translateX(2px);
}

.studiet-guide__joke em {
	color: var(--color-accent);
	font-style: normal;
	font-weight: 700;
	margin-right: 0.3em;
}

@media (min-width: 720px) {
	.studiet-guide__step { grid-template-columns: 120px 1fr; gap: var(--sp-8); }
}

/* Reels click-to-play */
.reel__media { cursor: pointer; }

.reel__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.1) 0%, rgba(20, 20, 20, 0.4) 100%);
	border: 0;
	color: var(--s247-bone);
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.reel__play::before {
	content: "";
	position: absolute;
	width: 64px;
	height: 64px;
	background: rgba(244, 233, 221, 0.15);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(244, 233, 221, 0.35);
	border-radius: 50%;
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.reel__play .icon {
	position: relative;
	z-index: 1;
	transform: translateX(2px);
}

.reel__play:hover::before {
	background: var(--color-accent);
	border-color: var(--color-accent);
	transform: scale(1.08);
}

.reel.is-playing .reel__play,
.reel__media.is-playing .reel__play,
.is-playing .reel__play { display: none; }

/* ─── Book-siden (kalender-grid) ─── */
.book2 { padding: var(--sp-16) 0; background: var(--color-bg); }

.book2__head { max-width: 720px; margin-bottom: var(--sp-10); }
.book2__lead { color: var(--color-ink-soft); font-size: var(--fs-md); line-height: 1.5; margin-top: var(--sp-3); }

.book2__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	align-items: start;
}

@media (min-width: 900px) {
	.book2__layout { grid-template-columns: 1.35fr 1fr; gap: var(--sp-10); }
}

/* Kalender */
.book2__calendar {
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
}

.book2__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--sp-4);
}

.book2__cal-title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-lg);
	letter-spacing: -0.01em;
	text-transform: capitalize;
}

.book2__cal-nav {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	font-size: 20px;
	color: var(--color-ink);
	text-decoration: none;
	transition: all var(--dur-fast) var(--ease);
}

.book2__cal-nav:hover {
	background: var(--color-ink);
	color: var(--color-ink-on-dark);
	border-color: var(--color-ink);
}

.book2__cal-weeknames {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: var(--sp-2);
}

.book2__cal-weeknames span {
	text-align: center;
	padding: 8px 0;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
}

.book2__cal-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.book2__day {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 14px;
	color: var(--color-ink);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
}

.book2__day:hover:not([aria-disabled]) {
	background: var(--color-surface);
	border-color: var(--color-border);
}

.book2__day--empty { visibility: hidden; cursor: default; }

.book2__day--past,
.book2__day[aria-disabled="true"] {
	color: var(--color-ink-mute);
	opacity: 0.35;
	text-decoration: line-through;
	cursor: not-allowed;
}

.book2__day--weekend { color: var(--color-ink-mute); }

.book2__day--today {
	border-color: var(--color-ink);
	font-weight: 800;
}

.book2__day.is-selected {
	background: var(--color-accent) !important;
	color: var(--s247-bone) !important;
	border-color: var(--color-accent) !important;
	opacity: 1 !important;
	text-decoration: none !important;
}

.book2__cal-legend {
	display: flex;
	gap: var(--sp-5);
	flex-wrap: wrap;
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--color-border);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-ink-mute);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.book2__cal-legend > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.book2__legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--color-border);
}

.book2__legend-dot--today { background: transparent; border: 1.5px solid var(--color-ink); }
.book2__legend-dot--on    { background: var(--color-accent); }
.book2__legend-dot--past  { background: rgba(40, 40, 40, 0.15); }

/* Slots */
.book2__slots {
	margin-top: var(--sp-6);
	padding: var(--sp-6);
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.book2__section-title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-md);
	letter-spacing: -0.01em;
	margin: 0 0 var(--sp-4);
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
}

.book2__step-num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1rem;
	color: var(--color-accent);
}

.book2__picked {
	font-size: var(--fs-sm);
	color: var(--color-ink-mute);
	margin: 0 0 var(--sp-4);
	font-style: italic;
}

.book2__time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
	margin-bottom: var(--sp-5);
}

.book2__time {
	padding: 10px 8px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-ink);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
}

.book2__time:hover { border-color: var(--color-ink); }

.book2__time.is-selected {
	background: var(--color-ink);
	color: var(--color-ink-on-dark);
	border-color: var(--color-ink);
}

.book2__dur-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: var(--sp-3) 0 var(--sp-3);
}

.book2__dur-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 8px;
}

.book2__dur {
	padding: 10px 14px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-ink);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
}

.book2__dur:hover { border-color: var(--color-ink); }
.book2__dur.is-selected {
	background: var(--color-accent);
	color: var(--s247-bone);
	border-color: var(--color-accent);
}
.book2__dur.is-disabled,
.book2__dur[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
	pointer-events: none;
}

/* Aside / summary */
.book2__side {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.book2__product {
	display: flex;
	gap: var(--sp-4);
	align-items: center;
	padding: var(--sp-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.book2__product-media {
	flex: 0 0 80px;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-surface-deep);
}

.book2__product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.book2__product-body { display: flex; flex-direction: column; gap: 2px; }

.book2__product-title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-base);
	margin: 0;
}

.book2__summary {
	padding: var(--sp-6);
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.book2__sum-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.book2__sum-list > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px solid var(--color-border-soft);
}

.book2__sum-list dt {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
}

.book2__sum-list dd {
	margin: 0;
	font-weight: 700;
	color: var(--color-ink);
	font-size: var(--fs-sm);
}

.book2__sum-list dd[data-filled] { color: var(--color-accent); }

.book2__sum-list > .book2__sum-total {
	margin-top: 4px;
	padding-top: 12px;
	border-bottom: 0;
	border-top: 2px solid var(--color-ink);
}

.book2__sum-total dt {
	color: var(--color-ink) !important;
	font-weight: 700;
}

.book2__sum-total dd {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.35rem !important;
	color: var(--color-accent) !important;
}

/* Form */
.book2__form {
	padding: var(--sp-6);
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.book2__form .book-field input,
.book2__form .book-field textarea {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	width: 100%;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.book2__form .book-field input:focus,
.book2__form .book-field textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(158, 43, 37, 0.12);
}

.book2__form .book-field__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-ink-mute);
	margin-bottom: 6px;
}

.book-field__optional {
	color: var(--color-ink-mute);
	opacity: 0.6;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.book-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: var(--sp-3) 0;
	padding: var(--sp-3);
	background: var(--color-surface-deep);
	border-radius: var(--radius-sm);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-ink-soft);
	cursor: pointer;
}
.book-consent input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--color-accent);
	flex-shrink: 0;
}
.book-consent a {
	color: var(--color-accent);
	text-decoration: underline;
}

.book-consent--optional {
	background: transparent;
	border: 1px dashed var(--color-border);
	padding: var(--sp-3);
}

[data-book-submit][disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.book-form__note {
	font-size: 12px;
	color: var(--color-ink-mute);
	margin: 0;
	line-height: 1.4;
}

.book-form__bulk-hint {
	margin: var(--sp-3) 0 0;
	padding: var(--sp-3) var(--sp-4);
	background: var(--color-surface-deep);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-ink-soft);
}

/* Formål-dropdown + betingede felter */
.book-field select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #FFFFFF;
	font-family: inherit;
	font-size: var(--fs-base);
	color: var(--color-ink);
	cursor: pointer;
}
.book-field select:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.book-options {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin: var(--sp-4) 0;
}

/* Gør hidden-attributten bindende — uden det overskriver display:flex nedenfor. */
.book-options[hidden],
.book-choice[hidden] {
	display: none;
}

.book-choice {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.book-choice legend {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
	padding: 0 0 4px;
	margin: 0;
}
.book-choice__opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #FFFFFF;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease;
}
.book-choice__opt:hover {
	border-color: var(--color-ink-mute);
}
.book-choice__opt:has(input:checked) {
	border-color: var(--color-accent);
	background: color-mix(in srgb, var(--color-accent) 8%, #FFFFFF);
	color: var(--color-accent);
	font-weight: 600;
}
.book-choice__opt input {
	accent-color: var(--color-accent);
}

.book-choice--sliders {
	gap: var(--sp-4);
}

.book-slider {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.book-slider__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
}
.book-slider__label output {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--color-accent);
	text-transform: none;
	letter-spacing: 0;
}
.book-slider input[type="range"] {
	width: 100%;
	accent-color: var(--color-accent);
}

.book-form__bulk-hint a {
	color: var(--color-accent);
	font-weight: 700;
	text-decoration: underline;
}

.book-success {
	max-width: 640px;
	padding: var(--sp-10);
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.book-success__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
	margin: 0;
}

/* Book — optagne dage / tider */
.book2__legend-dot--booked { background: repeating-linear-gradient(45deg, rgba(40,40,40,0.25) 0 4px, transparent 4px 8px); border: 1px solid rgba(40,40,40,0.2); }

.book2__day--booked {
	position: relative;
	background: repeating-linear-gradient(45deg, rgba(40, 40, 40, 0.08) 0 4px, transparent 4px 8px) !important;
	color: var(--color-ink-mute) !important;
	cursor: not-allowed;
	opacity: 0.55;
	text-decoration: none !important;
}

.book2__day--booked::after {
	content: "✕";
	position: absolute;
	bottom: 4px;
	right: 6px;
	font-size: 9px;
	color: var(--color-accent);
}

.book2__time.is-disabled {
	opacity: 0.3;
	cursor: not-allowed;
	text-decoration: line-through;
	pointer-events: none;
}

/* ─── Kontakt os — spørgsmåls-flow ─── */
/* ─── Single service: dynamisk layout ─── */
.service-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var(--color-ink-on-dark);
}
.service-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.service-hero__media video,
.service-hero__media img,
.service-hero__media .service-hero__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.service-hero__placeholder {
	background: linear-gradient(135deg, #282828, #3a2a26);
}
.service-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, rgba(20,14,12,0.85) 100%),
		radial-gradient(circle at 80% 30%, rgba(158,43,37,0.18) 0%, transparent 55%);
	z-index: 1;
}
.service-hero .wrap { position: relative; z-index: 2; width: 100%; }
.service-hero__inner {
	max-width: 820px;
	padding: var(--sp-12) 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}
.service-hero__crumb {
	color: color-mix(in srgb, var(--color-ink-on-dark) 70%, transparent);
	font-size: 13px;
}
.service-hero__crumb ol {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.service-hero__crumb a { color: inherit; text-decoration: none; }
.service-hero__crumb a:hover { color: var(--color-accent); }
.service-hero__crumb li + li::before {
	content: "/";
	margin-right: 8px;
	opacity: 0.5;
}
.service-hero__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(158, 43, 37, 0.2);
	border: 1px solid rgba(244, 233, 221, 0.25);
	color: var(--color-ink-on-dark);
}
.service-hero__title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	margin: 0;
	color: var(--color-ink-on-dark);
}
.service-hero__lead {
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
	line-height: 1.45;
	color: color-mix(in srgb, var(--color-ink-on-dark) 90%, transparent);
	max-width: 60ch;
	margin: 0;
}
.service-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
	margin-top: var(--sp-3);
}
.service-hero__price {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--color-accent);
}

/* Stort editorial-statement */
.service-statement {
	padding: var(--sp-16) 0;
	background: var(--color-bg);
	position: relative;
	overflow: hidden;
}
.service-statement::before {
	content: "";
	position: absolute;
	top: -30%;
	left: -10%;
	width: 50%;
	height: 160%;
	background: radial-gradient(circle at center, rgba(158,43,37,0.08) 0%, transparent 60%);
	pointer-events: none;
}
.service-statement__text {
	position: relative;
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(1.8rem, 1rem + 3.5vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--color-ink);
	margin: 0;
	max-width: 1100px;
}
.service-statement__text em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}

/* Foto-mosaik */
.service-mosaic {
	padding: var(--sp-8) 0;
}
.service-mosaic__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 200px;
	gap: var(--sp-3);
}
@media (min-width: 720px) {
	.service-mosaic__grid {
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows: 220px;
	}
	.service-mosaic__item--1 { grid-column: span 3; grid-row: span 2; }
	.service-mosaic__item--2 { grid-column: span 3; }
	.service-mosaic__item--3 { grid-column: span 2; }
	.service-mosaic__item--4 { grid-column: span 1; grid-row: span 1; }
	.service-mosaic__item--5 { grid-column: span 3; }
}
.service-mosaic__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface-deep);
}
.service-mosaic__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.service-mosaic__item:hover .service-mosaic__img {
	transform: scale(1.04);
}

/* Body-grid: content + included-aside */
.service-body__grid {
	display: grid;
	gap: var(--sp-10);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 900px) {
	.service-body__grid {
		grid-template-columns: 1.6fr 1fr;
		gap: var(--sp-12);
	}
	.service-included { position: sticky; top: calc(var(--sp-10) + 80px); }
}
.service-body__content {
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--color-ink-soft);
	max-width: 68ch;
}
.service-body__content p { margin: 0 0 var(--sp-4); }
.service-body__content h2 { margin-top: var(--sp-8); font-size: var(--fs-xl); color: var(--color-ink); }
.service-body__content h3 { margin-top: var(--sp-6); font-size: var(--fs-lg); color: var(--color-ink); }

.service-included {
	padding: var(--sp-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}
.service-included__title {
	font-size: var(--fs-lg);
	font-family: var(--font-sans);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}
.service-included__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}
.service-included__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.service-included__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
}
.service-included__check {
	color: var(--color-accent);
	margin-top: 2px;
	flex-shrink: 0;
}
.service-included__price {
	margin-top: var(--sp-2);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--color-border-soft);
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.service-included__price-label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
}
.service-included__price-value {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--color-accent);
}

/* ─── Dashboard-siden ─── */
.dash {
	padding: calc(var(--sp-16) + 30px) 0 var(--sp-16);
	background: var(--color-bg);
	min-height: 70vh;
}

.dash-gate {
	max-width: 480px;
	margin: var(--sp-10) auto;
	text-align: center;
	padding: var(--sp-10);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.dash-gate__title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: var(--fs-xl);
	margin: var(--sp-3) 0 var(--sp-3);
	letter-spacing: -0.02em;
}
.dash-gate__lead {
	color: var(--color-ink-soft);
	margin-bottom: var(--sp-5);
}
.dash-gate__form { text-align: left; }
.dash-gate__form .login-username,
.dash-gate__form .login-password { margin-bottom: var(--sp-3); }
.dash-gate__form label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
	margin-bottom: 4px;
}
.dash-gate__form input[type="text"],
.dash-gate__form input[type="password"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
}
.dash-gate__form .button-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	background: var(--color-accent);
	color: var(--color-ink-on-dark);
	border: 0;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 700;
	cursor: pointer;
	margin-top: var(--sp-2);
}

/* Header */
.dash-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sp-5);
	flex-wrap: wrap;
	margin-bottom: var(--sp-10);
}
.dash-head__title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: var(--sp-2) 0 0;
}
.dash-head__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}
.dash-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Stats-grid */
.dash-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
	margin-bottom: var(--sp-10);
}
@media (min-width: 640px) {
	.dash-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (min-width: 1024px) {
	.dash-grid { grid-template-columns: repeat(3, 1fr); }
}

.dash-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--sp-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
	transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.dash-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--color-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 220ms ease-out;
}
a.dash-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
a.dash-card:hover::before { transform: scaleY(1); }

.dash-card__label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
}
.dash-card__num {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 2.75rem;
	line-height: 1.05;
	color: var(--color-ink);
	margin: 4px 0 2px;
}
.dash-card__num--sm {
	font-size: 1.75rem;
	color: var(--color-accent);
}
.dash-card__hint {
	font-size: 12px;
	color: var(--color-ink-soft);
}
.dash-card--revenue { background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)); }
.dash-card--revenue .dash-card__label { color: var(--color-accent); }
.dash-card--info .dash-card__num { font-family: var(--font-sans); font-style: normal; font-size: 2.25rem; }

/* Lister */
.dash-lists {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}
@media (min-width: 900px) {
	.dash-lists { grid-template-columns: 1fr 1fr; }
	.dash-list--wide { grid-column: 1 / -1; }
}

.dash-list {
	padding: var(--sp-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.dash-list__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-md);
	letter-spacing: -0.01em;
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--color-border-soft);
}
.dash-list__empty {
	color: var(--color-ink-mute);
	font-size: 14px;
	margin: 0;
}
.dash-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dash-list__items li a {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 10px 8px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: inherit;
	font-size: 13px;
	transition: background 160ms ease;
}
.dash-list__items li a:hover {
	background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
.dash-list__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--color-ink);
	color: var(--color-ink-on-dark);
}
.dash-list__badge--rental { background: var(--color-accent); }
.dash-list__badge--msg { background: #0a7c2f; }
.dash-list__name { font-weight: 600; color: var(--color-ink); }
.dash-list__meta { color: var(--color-ink-mute); font-size: 12px; }
.dash-list__price {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 700;
	color: var(--color-accent);
}
.dash-list__rank {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--color-accent);
	min-width: 32px;
	line-height: 1;
}

/* ─── Om-side: editorial statement ─── */
.om-statement {
	background: #18120f;
	color: var(--color-ink-on-dark);
	padding: var(--sp-16) 0;
	position: relative;
	overflow: hidden;
}
.om-statement::before {
	content: "";
	position: absolute;
	left: -8%;
	top: -30%;
	width: 55%;
	height: 160%;
	background: radial-gradient(circle at center, rgba(158,43,37,0.25) 0%, transparent 62%);
	pointer-events: none;
}
.om-statement__inner {
	position: relative;
	max-width: 1100px;
}
.om-statement__text {
	margin: var(--sp-5) 0 0;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(2rem, 1rem + 3.5vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--color-ink-on-dark);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}
.om-statement__line {
	display: block;
}
.om-statement__line--em em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}

/* ─── Om-side: foto-collage (asymmetrisk grid) ─── */
.om-collage {
	padding: var(--sp-12) 0;
}
.om-collage__eyebrow {
	display: block;
	margin-bottom: var(--sp-6);
}
.om-collage__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 180px;
	gap: var(--sp-3);
}
@media (min-width: 720px) {
	.om-collage__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 220px;
	}
	.om-collage__item--1 { grid-column: span 2; grid-row: span 2; }
	.om-collage__item--2 { grid-column: span 2; }
	.om-collage__item--3 { grid-column: span 1; }
	.om-collage__item--4 { grid-column: span 1; }
	.om-collage__item--5 { grid-column: span 2; }
}
.om-collage__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface-deep);
	position: relative;
}
.om-collage__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.om-collage__item:hover img {
	transform: scale(1.04);
}

/* ─── Om-side: manifest-block ─── */
.om-manifest {
	padding: var(--sp-12) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.om-manifest__head {
	margin-bottom: var(--sp-10);
	max-width: 680px;
}
.om-manifest__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-2xl);
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: var(--sp-3) 0 0;
}
.om-manifest__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
}
@media (min-width: 820px) {
	.om-manifest__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); }
}
.om-manifest__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 2px solid var(--color-accent);
}
.om-manifest__num {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--color-accent);
}
.om-manifest__text {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
	line-height: 1.2;
	color: var(--color-ink);
	margin: 0;
	letter-spacing: -0.015em;
}

/* Tilpas stats-strip lidt på om-siden så den ikke bliver for tung */
.om-stats { padding: var(--sp-10) 0; }

.ko-section { padding: var(--sp-16) 0; background: var(--color-bg); }

/* 2-kolonne layout: info-sidebar + form */
.ko-layout {
	display: grid;
	gap: var(--sp-10);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 900px) {
	.ko-layout { grid-template-columns: 320px 1fr; gap: var(--sp-12); }
}

.ko-side {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}
@media (min-width: 900px) {
	.ko-side { position: sticky; top: calc(var(--sp-10) + 80px); }
}

.ko-promise {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
	border-radius: 999px;
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-accent);
}
.ko-promise__pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	position: relative;
}
.ko-promise__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--color-accent);
	animation: s247-pulse 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
}

.ko-stats {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.ko-stats > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--color-border-soft);
}
.ko-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ko-stats dt {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
}
.ko-stats dd {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.ko-stats__big {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--color-accent);
	line-height: 1;
}
.ko-stats__hint {
	font-size: 12px;
	color: var(--color-ink-soft);
}

.ko-team {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.ko-team__avatars {
	display: inline-flex;
	flex-shrink: 0;
}
.ko-team__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--color-surface);
	margin-left: -10px;
	background: var(--color-bg);
}
.ko-team__avatar:first-child { margin-left: 0; }
.ko-team__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ko-team__caption {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-ink-soft);
}

.ko-direct {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ko-direct__label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-mute);
	margin: 0 0 4px;
}
.ko-direct__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	padding: 6px 0;
	transition: color 160ms ease;
}
.ko-direct__link:hover { color: var(--color-accent); }
.ko-direct__link .icon { color: var(--color-accent); flex-shrink: 0; }

.ko-headwrap { margin-bottom: var(--sp-10); }

.ko-head {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: var(--sp-3) 0;
}

.ko-head em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}

.ko-lead {
	color: var(--color-ink-soft);
	font-size: var(--fs-md);
	max-width: 52ch;
}

.ko-flow {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.ko-steps {
	position: relative;
	min-height: 340px;
}

.ko-step {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	animation: ko-fade 340ms var(--ease-smooth);
}

.ko-step[hidden] { display: none; }

@keyframes ko-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ko-counter {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--color-accent);
}

.ko-q {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0;
}

.ko-q em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-accent);
}

.ko-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ko-topic {
	padding: 10px 18px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--color-ink);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
}

.ko-topic:hover { border-color: var(--color-ink); }

.ko-topic.is-selected {
	background: var(--color-ink);
	color: var(--color-ink-on-dark);
	border-color: var(--color-ink);
}

.ko-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ko-field-label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-ink-mute);
}

.ko-field input,
.ko-field textarea {
	width: 100%;
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 14px 16px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--color-ink);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.ko-field textarea { resize: vertical; min-height: 120px; }

.ko-field input:focus,
.ko-field textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(158, 43, 37, 0.12);
}

.ko-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}

.ko-note {
	font-size: 13px;
	color: var(--color-ink-mute);
	margin: 0;
}

.ko-progress {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: var(--sp-4);
}

.ko-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-border);
	transition: all var(--dur-fast) var(--ease);
}

.ko-dot.is-active {
	background: var(--color-accent);
	width: 24px;
	border-radius: 4px;
}

.ko-success {
	padding: var(--sp-10);
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	align-items: flex-start;
}