/* ==========================================================================
   LWG – inner pages. Loaded after main.css on every page except the home page.
   Uses the tokens from main.css (--c-*, --sp-*, --fs-*). One added semantic
   token: --c-error (form errors only).
   1. Shared: nav state, page hero, breadcrumb, CTA variant, photo caption, contact plate
   2. Drawings  3. Service template  4. Tjänster overview  5. Referenser + lightbox
   6. Om oss  7. Kontakt + map  8. Forms  9. Begär offert  10. Integritetspolicy  11. 404
   ========================================================================== */

:root {
	--c-error: #B3261E;      /* 6.5:1 on white, 6.0:1 on paper */
	--c-error-bg: #FCEFEE;
	--c-field-border: #7C8188; /* 3.9:1 on white – non-text contrast */
}

/* 1. Shared ------------------------------------------------------------- */

/* Current page in the header */
.primary-nav__list a.is-current { font-weight: 600; }
.primary-nav__list a.is-current::after { transform: scaleX(1); }
.header-cta[aria-current="page"] { --btn-bg: var(--c-accent-hover); --btn-bd: var(--c-accent-hover); }
@media (max-width: 1099px) {
	.primary-nav__list a.is-current { color: var(--c-accent); display: flex; align-items: center; gap: 0.75rem; }
	.primary-nav__list a.is-current::before { content: ""; width: 1.25rem; height: 3px; background: currentColor; flex: none; }
}

/* Dark surfaces: white focus ring */
.page-hero :focus-visible, .related :focus-visible, .values :focus-visible,
.map__placeholder :focus-visible, .lightbox :focus-visible, .hero-call :focus-visible { outline-color: var(--c-white); }

/* Page hero – shared by all inner pages */
.page-hero { position: relative; background: var(--c-ink); color: var(--c-white); overflow: hidden; isolation: isolate; }
.page-hero__inner { display: grid; gap: var(--sp-7); align-items: end; padding-block: clamp(1.75rem, 1rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 6rem); }
.page-hero__content { min-width: 0; }
.page-hero__title {
	font-size: clamp(2.125rem, 1.35rem + 3.6vw, 4.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
	margin-bottom: var(--sp-5); overflow-wrap: break-word; hyphens: manual;
}
.page-hero__lead { font-size: var(--fs-lead); color: var(--c-steel-300); max-width: 40rem; margin-bottom: var(--sp-6); }
.page-hero__lead:last-child { margin-bottom: 0; }
.page-hero .section-label, .page-hero .eyebrow { margin-bottom: var(--sp-4); }
.page-hero__ruler {
	height: 14px; border-bottom: 2px solid var(--c-steel-700);
	background-image:
		repeating-linear-gradient(to right, var(--c-steel-700) 0 1px, transparent 1px 12px),
		repeating-linear-gradient(to right, var(--c-accent-bright) 0 2px, transparent 2px 120px);
	background-size: 100% 7px, 100% 14px; background-position: bottom left; background-repeat: no-repeat;
}
.page-hero__photo { position: relative; max-width: 34rem; margin-left: auto; }
.page-hero__photo::before { /* perforated accent plate behind the photo, as on the home hero */
	content: ""; position: absolute; left: -1rem; bottom: -1rem; width: 55%; height: 60%; z-index: -1;
	background: var(--c-accent); background-image: radial-gradient(circle, rgba(0,0,0,.22) 1.6px, transparent 2px); background-size: 12px 12px;
}
.page-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.page-hero__bignum, .page-hero__year {
	margin: 0; font-weight: 800; line-height: 0.8; letter-spacing: -0.06em; text-align: right;
	color: transparent; -webkit-text-stroke: 2px var(--c-steel-600); user-select: none;
}
.page-hero__bignum { font-size: clamp(8rem, 4rem + 13vw, 17rem); }
.page-hero__year { font-size: clamp(5rem, 2rem + 11vw, 13rem); }
@media (min-width: 1024px) {
	.page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
	.page-hero__photo img { aspect-ratio: 1 / 1; }
	.page-hero__bignum, .page-hero__year { -webkit-text-stroke-width: 3px; }
}
@media (max-width: 1023px) {
	.page-hero__bignum { display: none; }
	.page-hero--service .page-hero__inner { gap: var(--sp-6); }
	.page-hero__photo { margin-left: 1rem; max-width: 30rem; }
	.page-hero__photo img { aspect-ratio: 16 / 10; }
	.page-hero__year { text-align: left; font-size: clamp(4.5rem, 2rem + 14vw, 8rem); }
}
@media (max-width: 479px) {
	.page-hero .hero__actions .btn { width: 100%; }
}
.page-hero--compact .page-hero__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }

/* Breadcrumb */
.breadcrumb { margin-bottom: var(--sp-6); font-size: 0.875rem; }
.breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; color: var(--c-steel-300); }
.breadcrumb__item { display: inline-flex; align-items: center; }
.breadcrumb__item + .breadcrumb__item::before { content: "/"; margin: 0 0.6rem; color: var(--c-steel-600); }
.breadcrumb a { color: var(--c-white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); padding-block: 0.3rem; }
.breadcrumb a:hover { color: var(--c-accent-bright); text-decoration-color: currentColor; }
.breadcrumb [aria-current="page"] { color: var(--c-steel-300); }

/* CTA band on paper background (inner pages) */
.cta-band--paper { background: var(--c-paper); padding-top: var(--section-y); }

/* Photo with caption below */
.photo-cap { position: relative; }
.photo-cap img { width: 100%; object-fit: cover; background: var(--c-steel-100); }
.photo-cap figcaption { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.65rem; font-size: 0.875rem; line-height: 1.4; color: var(--c-steel-600); }
.photo-cap figcaption::before { content: ""; flex: none; width: 1rem; height: 2px; background: var(--c-accent); transform: translateY(-0.25rem); }

/* Contact plate (service aside, Om oss, Begär offert) */
.contact-plate { background: var(--c-white); border: var(--rule); border-top: 4px solid var(--c-accent); padding: var(--sp-6) var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-2); justify-items: start; }
.contact-plate__kicker { margin: 0; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-steel-600); }
.contact-plate__name { margin: 0; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.contact-plate__phone { display: inline-flex; align-items: center; gap: 0.6rem; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; text-decoration: none; min-height: 2.75rem; }
.contact-plate__phone .icon { color: var(--c-accent); }
.contact-plate__mail { font-weight: 500; overflow-wrap: anywhere; min-height: 2rem; display: inline-flex; align-items: center; }
.contact-plate .btn { margin-top: var(--sp-4); }
.contact-plate .link-arrow { margin-top: var(--sp-3); }

/* 3. Service template ---------------------------------------------------- */
.svc { background: var(--c-paper); }
.svc__layout { display: grid; gap: var(--sp-8); }
.svc__main { min-width: 0; }
.svc__intro { max-width: 44rem; }
.svc__lead { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; }
.svc__callout {
	margin: var(--sp-7) 0 0; max-width: 44rem; padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
	background: var(--c-white); border-left: 4px solid var(--c-accent); font-weight: 600; font-size: 1.0625rem; line-height: 1.5;
}
.svc__block { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.svc__h2 { display: flex; align-items: center; gap: 0.85rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); margin-bottom: var(--sp-5); }
.svc__h2-num {
	flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
	border: 2px solid var(--c-ink); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; color: var(--c-accent);
}
.spec { border-top: 2px solid var(--c-ink); margin: 0; }
.spec__row { display: grid; gap: 0.25rem var(--sp-6); padding: var(--sp-4) 0; border-bottom: var(--rule); }
.spec dt { font-weight: 700; }
.spec dd { margin: 0; color: var(--c-steel-600); }
@media (min-width: 640px) { .spec__row { grid-template-columns: 13rem minmax(0, 1fr); padding: var(--sp-5) 0; } }

.who { display: grid; gap: var(--sp-5) var(--sp-6); margin: 0; }
.who__item { padding-top: var(--sp-4); border-top: var(--rule); }
.who__item dt { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.who__item dt::before { content: ""; display: block; width: 1.25rem; height: 3px; background: var(--c-accent); margin-bottom: 0.75rem; }
.who__item dd { margin: 0; color: var(--c-steel-600); }
@media (min-width: 640px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.steps { list-style: none; display: grid; gap: var(--sp-5) var(--sp-6); }
.steps__item { border-top: 2px solid var(--c-ink); padding-top: var(--sp-4); }
.steps__num { display: block; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--c-accent); margin-bottom: var(--sp-3); font-variant-numeric: tabular-nums; }
.steps__title { font-size: 1.125rem; margin-bottom: var(--sp-2); }
.steps__item p { color: var(--c-steel-600); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.faq { border-top: 2px solid var(--c-ink); }
.faq__item { border-bottom: var(--rule); }
.faq__q {
	display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
	min-height: 3.5rem; padding: var(--sp-4) 0; cursor: pointer; list-style: none;
	font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { flex: none; color: var(--c-accent); transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }
.faq__q:hover { color: var(--c-accent); }
.faq__a { padding: 0 0 var(--sp-5); max-width: 42rem; color: var(--c-steel-600); }
.faq__a a { color: var(--c-ink); font-weight: 600; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }

.svc__visual { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; gap: var(--sp-6); }
.svc-photos { list-style: none; display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-photos img { aspect-ratio: 3 / 4; }
.svc-photos--1 { grid-template-columns: minmax(0, 1fr); }
.svc-photos--1 img { aspect-ratio: 4 / 3; }
@media (min-width: 640px) {
	.svc-photos--1 { max-width: 34rem; }
	.svc-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.svc-photos--2 img { aspect-ratio: 4 / 5; }

.svc__aside { display: grid; gap: var(--sp-6); align-content: start; }
@media (min-width: 1024px) {
	.svc__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(3rem, 1rem + 4vw, 6rem); }
	.svc__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
.svc-index__title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-steel-600); margin-bottom: var(--sp-3); }
.svc-index__list { list-style: none; border-top: 2px solid var(--c-ink); }
.svc-index__list a { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.8rem 0.5rem 0.8rem 0; border-bottom: var(--rule); text-decoration: none; font-weight: 500; line-height: 1.35; }
.svc-index__num { color: var(--c-accent); font-weight: 700; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.svc-index__list a[aria-current="page"] { font-weight: 700; background: var(--c-steel-100); box-shadow: inset 4px 0 0 var(--c-accent); padding-left: 0.85rem; }
.svc-index__list a:hover { color: var(--c-accent); }

/* Related services – dark */
.related { background: var(--c-ink); color: var(--c-steel-300); }
.related .section-title { color: var(--c-white); }
.related__list { list-style: none; display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related__item {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-5);
	padding: var(--sp-6) var(--sp-5); border: var(--rule-dark); background: var(--c-steel-900);
	transition: border-color var(--dur) var(--ease);
}
.related__num { grid-column: 1 / -1; color: var(--c-accent-bright); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.04em; }
.related__title { grid-column: 1; font-size: var(--fs-h3); color: var(--c-white); margin: 0; }
.related__title a:hover { color: var(--c-white); }
.related__item p { grid-column: 1; margin: 0; }
.related__arrow { grid-column: 2; grid-row: 2 / 4; align-self: end; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid #7C8188; color: var(--c-white); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.related__item:hover, .related__item:focus-within { border-color: var(--c-accent-bright); }
.related__item:hover .related__arrow, .related__item:focus-within .related__arrow { background: var(--c-accent); border-color: var(--c-accent); }
.related__item:focus-within { outline: 3px solid var(--c-white); outline-offset: 3px; }
.related__item :focus-visible { outline: none; }

/* 4. Tjänster overview --------------------------------------------------- */
.jump { background: var(--c-paper); border-bottom: var(--rule); }
.jump__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jump__list li { border-bottom: var(--rule); }
.jump__list li:nth-child(odd) { border-right: var(--rule); }
.jump__list li:last-child { border-bottom: 0; }
.jump__list a { display: flex; flex-direction: column; gap: 0.1rem; padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; min-height: 3rem; text-decoration: none; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.jump__list li:nth-child(even) a { padding-left: var(--sp-4); }
.jump__num { color: var(--c-accent); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
	.jump__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.jump__list li { border-bottom: 0; border-right: var(--rule); }
	.jump__list li:last-child { border-right: 0; }
	.jump__list a, .jump__list li:nth-child(even) a { padding: var(--sp-5); }
	.jump__list li:first-child a { padding-left: 0; }
}

.overview { background: var(--c-paper); }
.overview__item { display: grid; gap: var(--sp-5); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-top: var(--rule); scroll-margin-top: calc(var(--header-h) + 1rem); }
.overview__item:first-child { border-top: 2px solid var(--c-ink); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.overview__num {
	margin: 0; font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em;
	color: transparent; -webkit-text-stroke: 1.5px var(--c-ink);
}
.overview__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); line-height: 1.1; margin-bottom: var(--sp-4); }
.overview__title a { text-decoration: none; }
.overview__title a:hover { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 2px; }
.overview__lead { font-size: var(--fs-lead); color: var(--c-steel-600); max-width: 38rem; margin-bottom: var(--sp-5); }
.overview__jobs-title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-steel-600); margin-bottom: var(--sp-2); }
.overview__jobs { list-style: none; display: grid; gap: 0.35rem; margin-bottom: var(--sp-5); }
.overview__jobs li { display: flex; align-items: center; gap: 0.65rem; font-weight: 500; }
.overview__jobs li::before { content: ""; width: 7px; height: 7px; background: var(--c-accent); flex: none; }
.overview__who { font-size: var(--fs-small); color: var(--c-steel-600); margin-bottom: var(--sp-5); max-width: 36rem; }
.overview__who span { font-weight: 600; color: var(--c-ink); }
.overview__media .photo-cap img { aspect-ratio: 4 / 3; object-position: 50% 35%; }
@media (min-width: 1024px) {
	.overview__item { grid-template-columns: 7.5rem minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-7); align-items: start; }
	.overview__media .photo-cap img { aspect-ratio: 5 / 4; }
}

/* 5. Referenser --------------------------------------------------------- */
.gallery-section { background: var(--c-paper); }
.gallery-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); border-bottom: 2px solid var(--c-ink); }
.filter__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter__btn {
	display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.95rem;
	border: 2px solid var(--c-ink); border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filter__btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.filter__btn[aria-current="true"] { background: var(--c-ink); color: var(--c-white); }
.filter__count { font-size: 0.75rem; font-weight: 600; color: var(--c-steel-600); font-variant-numeric: tabular-nums; }
.filter__btn[aria-current="true"] .filter__count { color: var(--c-steel-300); }
.gallery-bar__status { margin: 0; font-size: var(--fs-small); color: var(--c-steel-600); }

.gallery { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; grid-auto-flow: dense; }
.gallery__item[hidden] { display: none; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item figure { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--c-steel-100); }
.gallery__link { position: relative; display: block; flex: 1; overflow: hidden; }
.gallery__link img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 900ms var(--ease); }
.gallery__item--wide .gallery__link img { aspect-ratio: 3 / 2; }
.gallery__link:hover img { transform: scale(1.035); }
.gallery__link:focus-visible { outline-offset: 3px; }
.gallery__zoom { position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--c-ink); color: var(--c-white); opacity: 0.9; transition: background-color var(--dur) var(--ease); }
.gallery__link:hover .gallery__zoom, .gallery__link:focus-visible .gallery__zoom { background: var(--c-accent); opacity: 1; }
.gallery__item figcaption {
	position: absolute; left: 0; bottom: 0; max-width: calc(100% - 0.75rem); pointer-events: none;
	padding: 0.45rem 0.75rem 0.5rem 0.85rem; background: var(--c-ink); color: var(--c-white);
	font-size: 0.8125rem; font-weight: 500; line-height: 1.35; border-left: 3px solid var(--c-accent-bright);
}
.gallery__cat { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-bright); }
@media (min-width: 900px) {
	.gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
	.gallery__item figcaption { font-size: 0.875rem; }
}
@media (max-width: 479px) {
	.gallery__item figcaption { font-size: 0.75rem; padding: 0.35rem 0.5rem 0.4rem 0.6rem; }
	.gallery__cat { display: none; }
}

/* Lightbox (native <dialog>) */
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #141618; color: var(--c-white); }
.lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.lightbox__frame { position: relative; height: 100%; display: grid; place-items: center; padding: 4.5rem 1rem 5.5rem; }
.lightbox__figure { display: grid; justify-items: center; gap: 0.85rem; max-width: min(100%, 72rem); }
.lightbox__img { width: auto; max-width: 100%; max-height: calc(100dvh - 12rem); object-fit: contain; background: var(--c-steel-900); }
.lightbox__caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; font-size: 0.9375rem; color: var(--c-steel-300); text-align: center; }
.lightbox__count { font-variant-numeric: tabular-nums; color: #8F959B; }
.lightbox__btn {
	position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
	background: var(--c-ink); color: var(--c-white); border: 1px solid #7C8188; border-radius: var(--radius); cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { background: var(--c-accent); border-color: var(--c-accent); }
.lightbox__btn--close { top: 1rem; right: 1rem; }
.lightbox__btn--prev { left: 1rem; bottom: 1.25rem; }
.lightbox__btn--next { right: 1rem; bottom: 1.25rem; }
@media (min-width: 900px) {
	.lightbox__frame { padding: 4.5rem 6rem 3rem; }
	.lightbox__img { max-height: calc(100dvh - 10rem); }
	.lightbox__btn--prev, .lightbox__btn--next { top: 50%; bottom: auto; transform: translateY(-50%); }
	.lightbox__btn--prev { left: 1.5rem; }
	.lightbox__btn--next { right: 1.5rem; }
}
body.lightbox-open { overflow: hidden; }

/* 6. Om oss ------------------------------------------------------------- */
.page-hero--about .page-hero__inner { align-items: end; }
.story { background: var(--c-paper); }
.story__inner { display: grid; gap: var(--sp-6); }
.story__text { max-width: 42rem; }
.story__text p { font-size: 1.0625rem; }
.story__text > p:first-child { font-size: var(--fs-lead); font-weight: 500; }
.story__quote { margin: var(--sp-7) 0 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); border-left: 4px solid var(--c-accent); }
.story__quote p { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
@media (min-width: 1024px) { .story__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); } }

.facts { list-style: none; display: grid; margin-top: clamp(3rem, 2rem + 3vw, 5rem); border-top: 2px solid var(--c-ink); }
.facts__item { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--sp-5) 0; border-bottom: var(--rule); }
.facts__big { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.facts__small { color: var(--c-steel-600); font-size: var(--fs-small); }
@media (min-width: 768px) {
	.facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.facts__item { border-bottom: 0; border-left: var(--rule); padding: var(--sp-6) var(--sp-5); }
	.facts__item:first-child { border-left: 0; padding-left: 0; }
}

.band-photo { background: var(--c-paper); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.band-photo figcaption.container { padding-inline: 0; }
.band-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; max-height: 42rem; }
.band-photo figcaption { padding-block: 0.75rem 0; font-size: 0.875rem; color: var(--c-steel-600); }
.band-photo figcaption span { display: inline-flex; align-items: center; gap: 0.6rem; }
.band-photo figcaption span::before { content: ""; width: 1rem; height: 2px; background: var(--c-accent); }
@media (min-width: 900px) { .band-photo img { aspect-ratio: 21 / 9; } }

.values { position: relative; background: var(--c-steel-900); color: var(--c-steel-300); overflow: hidden; isolation: isolate; margin-top: var(--sp-8); }
.values::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(circle, rgba(255,255,255,.07) 1.6px, transparent 2px); background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(to left, #000, transparent 65%); mask-image: linear-gradient(to left, #000, transparent 65%);
}
.values .section-title { color: var(--c-white); }
.values .section-intro { color: var(--c-steel-300); }
.values__list { list-style: none; display: grid; gap: var(--sp-6) var(--sp-8); }
.values__item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--sp-4); padding-top: var(--sp-5); border-top: var(--rule-dark); }
.values__num { grid-row: 1 / 3; font-size: 3rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--c-accent-bright); }
.values__title { color: var(--c-white); font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
@media (min-width: 900px) { .values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.area { background: var(--c-paper); }
.area__inner { display: grid; gap: var(--sp-6); align-items: end; }
.area__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0; font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
.area__list li:not(:last-child)::after { content: "/"; margin: 0 0.45em; color: #A8ADB2; font-weight: 400; }
.area__list .is-home { color: var(--c-accent); }
.area__list .area__more { color: var(--c-steel-600); font-weight: 500; }
@media (min-width: 1024px) { .area__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); } }

.clients { background: var(--c-white); }
.clients__inner { display: grid; gap: var(--sp-6); }
.clients__list { display: grid; gap: 0 var(--sp-6); margin: 0; border-top: 2px solid var(--c-ink); }
.clients__item { padding: var(--sp-5) 0; border-bottom: var(--rule); }
.clients__item dt { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.clients__item dd { margin: 0; color: var(--c-steel-600); }
@media (min-width: 640px) { .clients__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.clients__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--sp-8); }
	.clients__head { grid-column: 1 / -1; }
	.clients .contact-plate { align-self: start; }
}

/* 7. Kontakt ------------------------------------------------------------ */
.hero-call { display: grid; gap: var(--sp-2); justify-items: start; }
.hero-call__label { margin: 0; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-steel-300); }
.hero-call__number {
	font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; white-space: nowrap;
	color: var(--c-white); text-decoration: none; border-bottom: 4px solid var(--c-accent-bright); padding-bottom: 0.1em;
}
.hero-call__number:hover { color: var(--c-accent-bright); }
.hero-call__mail { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--sp-3); color: var(--c-white); font-weight: 500; min-height: 2.75rem; overflow-wrap: anywhere; }
.hero-call__mail:hover { color: var(--c-accent-bright); }
@media (min-width: 1024px) { .page-hero--contact .page-hero__aside { justify-self: end; } }

.contact { background: var(--c-paper); }
.contact__layout { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .contact__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: start; } }

.form-panel { background: var(--c-white); border: var(--rule); border-top: 4px solid var(--c-accent); padding: clamp(1.25rem, 0.75rem + 2.5vw, 3rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.form-panel__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.form-panel__intro { color: var(--c-steel-600); margin-bottom: var(--sp-6); max-width: 36rem; }
.form-panel__intro a { color: var(--c-ink); font-weight: 600; text-decoration-color: var(--c-accent); }

.nap { margin: 0; border-top: 2px solid var(--c-ink); }
.nap__row { padding: var(--sp-4) 0; border-bottom: var(--rule); }
.nap dt { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-steel-600); margin-bottom: 0.25rem; }
.nap dt .icon { color: var(--c-accent); }
.nap dd { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.nap dd a { text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; display: inline-block; padding-block: 0.2rem; }

.map { margin-top: var(--sp-6); background: var(--c-steel-900); }
.map__placeholder {
	position: relative; display: grid; align-content: center; justify-items: center; gap: var(--sp-3); text-align: center;
	min-height: 20rem; aspect-ratio: 4 / 3; padding: var(--sp-6) var(--sp-5); color: var(--c-steel-300);
	background-color: var(--c-steel-900);
	background-image:
		linear-gradient(118deg, transparent 47.5%, rgba(255,255,255,.1) 47.5% 50.5%, transparent 50.5%),
		linear-gradient(28deg, transparent 63%, rgba(255,255,255,.07) 63% 65%, transparent 65%),
		linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
}
.map__pin { color: var(--c-accent-bright); }
.map__pin .icon { width: 2.5rem; height: 2.5rem; }
.map__addr { margin: 0; color: var(--c-white); font-weight: 600; font-size: 1.125rem; }
.map__placeholder .btn { --btn-bg: var(--c-paper); --btn-fg: var(--c-ink); --btn-bd: var(--c-paper); }
.map__placeholder .btn:hover { --btn-bg: var(--c-accent); --btn-fg: var(--c-white); --btn-bd: var(--c-accent); }
.map__note { margin: 0; font-size: 0.8125rem; max-width: 22rem; }
.map__note a, .map__open a { color: var(--c-white); }
.map__open { margin: 0; font-size: var(--fs-small); }
.map__open a { display: inline-block; padding-block: 0.4rem; }
.map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 20rem; border: 0; }

/* 8. Forms -------------------------------------------------------------- */
.lwg-form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { display: block; padding: 0; margin-bottom: 0.4rem; font-weight: 600; font-size: 1rem; line-height: 1.4; }
.field__optional { font-weight: 400; color: var(--c-steel-600); font-size: 0.875rem; }
.field__hint { margin: -0.15rem 0 0.5rem; font-size: 0.875rem; line-height: 1.45; color: var(--c-steel-600); }
.field__error { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--c-error); }
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; background: var(--c-error); color: var(--c-white); font-size: 0.8125rem; font-weight: 700; }

.lwg-form input[type="text"], .lwg-form input[type="email"], .lwg-form input[type="tel"], .lwg-form textarea {
	display: block; width: 100%; min-height: 3.125rem; padding: 0.75rem 0.9rem;
	font: 400 1.0625rem/1.5 var(--font); color: var(--c-ink);
	background: var(--c-white); border: 2px solid var(--c-field-border); border-radius: var(--radius);
	transition: border-color var(--dur-fast) var(--ease);
}
.lwg-form textarea { min-height: 9rem; resize: vertical; }
.lwg-form input:hover, .lwg-form textarea:hover { border-color: var(--c-ink); }
.lwg-form input:focus-visible, .lwg-form textarea:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-ink); }
.has-error input[type="text"], .has-error input[type="email"], .has-error input[type="tel"], .has-error textarea, .has-error input[type="file"] { border-color: var(--c-error); border-left-width: 6px; }

.lwg-form input[type="file"] { display: block; width: 100%; padding: 0.85rem; font: 500 0.9375rem var(--font); background: var(--c-paper); border: 2px dashed var(--c-field-border); border-radius: var(--radius); cursor: pointer; }
.lwg-form input[type="file"]::file-selector-button { margin-right: 0.85rem; padding: 0.6rem 1rem; font: 600 0.9375rem var(--font); color: var(--c-white); background: var(--c-ink); border: 0; border-radius: var(--radius); cursor: pointer; }
.lwg-form input[type="file"]:hover::file-selector-button { background: var(--c-accent); }
.lwg-form input[type="file"]:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 1px; }
.field__files { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--c-steel-600); }
.field__files:empty { display: none; }
.field__files.is-warning { color: var(--c-error); font-weight: 600; }
.field__notice { margin: 0.5rem 0 0; padding: 0.6rem 0.8rem; background: var(--c-steel-100); font-size: 0.875rem; font-weight: 500; }

/* Radio tiles */
.choice-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.choice-grid--kontaktsatt { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); max-width: 24rem; }
.choice { position: relative; }
.choice input { position: absolute; top: 50%; left: 1rem; width: 1.15rem; height: 1.15rem; margin: 0; transform: translateY(-50%); opacity: 0; }
.choice label {
	display: flex; align-items: center; gap: 0.75rem; height: 100%; min-height: 3.25rem; padding: 0.7rem 1rem;
	background: var(--c-white); border: 2px solid var(--c-steel-200); border-radius: var(--radius);
	font-weight: 500; line-height: 1.3; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.choice label::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; border: 2px solid var(--c-field-border); border-radius: 50%; background: var(--c-white); }
.choice label:hover { border-color: var(--c-ink); }
.choice input:checked + label { border-color: var(--c-ink); background: var(--c-paper); font-weight: 600; }
.choice input:checked + label::before { border-color: var(--c-accent); background: var(--c-accent); box-shadow: inset 0 0 0 3px var(--c-white); }
.choice input:focus-visible + label { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.has-error .choice label { border-color: #E3A9A4; }
@media (forced-colors: active) {
	.choice input { opacity: 1; position: static; transform: none; }
	.choice { display: flex; align-items: center; gap: 0.5rem; }
	.choice label::before { display: none; }
}

/* Checkbox */
.check { display: flex; align-items: flex-start; gap: 0.75rem; }
.check input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--c-accent); cursor: pointer; }
.check label { font-weight: 500; line-height: 1.45; cursor: pointer; }
.check__hint { margin: 0.4rem 0 0 2.125rem; }
.check__hint a { color: var(--c-ink); font-weight: 600; text-decoration-color: var(--c-accent); }

/* Error summary + thanks */
.form-summary { padding: var(--sp-5); background: var(--c-error-bg); border: 2px solid var(--c-error); border-left-width: 6px; }
.form-summary:focus { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.form-summary__title { font-size: 1.125rem; color: var(--c-error); margin-bottom: var(--sp-2); }
.form-summary__list { padding-left: 1.2rem; display: grid; gap: 0.25rem; }
.form-summary__list a { color: var(--c-error); font-weight: 600; text-decoration-thickness: 1px; }
.form-summary__list a:hover { text-decoration-thickness: 2px; }
.form-summary__general { margin: var(--sp-2) 0 0; font-weight: 600; }
.form-thanks { padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); border-left: 6px solid var(--c-accent); }
.form-thanks__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.form-thanks__title:focus { outline: none; }
.form-thanks p { font-size: 1.0625rem; }
.form-thanks .link-arrow { margin-top: var(--sp-3); }

.hp-field { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
@media (max-width: 479px) { .form-actions .btn { width: 100%; } }
.form-note { margin: 0; font-size: 0.875rem; color: var(--c-steel-600); }

/* 9. Begär offert ------------------------------------------------------- */
.hero-steps { background: var(--c-steel-900); border: var(--rule-dark); padding: var(--sp-6) var(--sp-5); max-width: 28rem; }
.hero-steps__title { margin-bottom: var(--sp-4); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-steel-300); }
.hero-steps__list { list-style: none; counter-reset: hs; }
.hero-steps__list li { counter-increment: hs; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 0.75rem 0; border-top: var(--rule-dark); color: var(--c-white); font-weight: 500; line-height: 1.45; }
.hero-steps__list li:first-child { border-top: 0; padding-top: 0; }
.hero-steps__list li::before { content: "0" counter(hs); color: var(--c-accent-bright); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .page-hero--quote .page-hero__aside { justify-self: end; width: 100%; max-width: 26rem; } }

.quote { background: var(--c-paper); }
.quote__layout { display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) {
	.quote__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(3rem, 1rem + 4vw, 5rem); align-items: start; }
	.quote__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.quote__aside { display: grid; gap: var(--sp-6); }
.form-step { display: grid; gap: var(--sp-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.form-step__legend { float: left; width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: var(--sp-5) 0 0; margin: 0; border-top: 2px solid var(--c-ink); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; }
.form-step__legend .field__optional { font-size: 1rem; }
.form-step__num { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--c-ink); color: var(--c-white); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; flex: none; }
.form-step--send { padding-top: var(--sp-5); border-top: 2px solid var(--c-ink); }
.quote .lwg-form { gap: var(--sp-7); }
.quote .form-step .field__label, .quote .form-step .field > legend { font-size: 1rem; }

.tips { border-top: 2px solid var(--c-ink); padding-top: var(--sp-4); }
.tips__title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-steel-600); margin-bottom: var(--sp-3); }
.tips__list { list-style: none; display: grid; gap: 0.6rem; }
.tips__list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); line-height: 1.45; }
.tips__list li::before { content: ""; width: 0.85rem; height: 2px; background: var(--c-accent); margin-top: 0.7rem; }

/* 10. Integritetspolicy -------------------------------------------------- */
.legal { background: var(--c-paper); }
.legal__layout { display: grid; gap: var(--sp-7); }
.legal__toc-title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-steel-600); margin-bottom: var(--sp-3); }
.legal__toc ol { list-style: none; counter-reset: toc; border-top: 2px solid var(--c-ink); }
.legal__toc li { counter-increment: toc; border-bottom: var(--rule); }
.legal__toc a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: 0.6rem 0; text-decoration: none; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.legal__toc a::before { content: counter(toc, decimal-leading-zero); color: var(--c-accent); font-weight: 700; font-size: 0.8125rem; padding-top: 0.1rem; }
@media (min-width: 1024px) {
	.legal__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); }
	.legal__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
.prose { max-width: 44rem; }
.prose section { scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose section + section { margin-top: var(--sp-8); }
.prose h2 { display: flex; align-items: baseline; gap: 0.75rem; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); }
.prose__num { flex: none; color: var(--c-accent); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; }
.prose p, .prose li { font-size: 1.0625rem; }
.prose ul { padding-left: 1.25rem; margin-bottom: var(--sp-4); display: grid; gap: 0.35rem; }
.prose li::marker { color: var(--c-accent); }
.prose a { color: var(--c-ink); font-weight: 500; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
.prose a:hover { color: var(--c-accent); }
.legal__updated { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: var(--rule); font-size: var(--fs-small); color: var(--c-steel-600); }

/* 11. 404 --------------------------------------------------------------- */
.page-hero--404 .page-hero__inner { padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
@media (min-width: 1024px) { .page-hero--404 .page-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); } }
.page-hero__year--404 { font-size: clamp(6rem, 3rem + 14vw, 16rem); }
.notfound { background: var(--c-paper); }
.notfound__title { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.notfound__list { list-style: none; display: grid; border-top: 2px solid var(--c-ink); }
.notfound__list a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 3.5rem; padding: var(--sp-3) 0; border-bottom: var(--rule); text-decoration: none; font-weight: 600; }
.notfound__list a .icon { color: var(--c-accent); transition: transform var(--dur) var(--ease); }
.notfound__list a:hover .icon { transform: translateX(4px); }
@media (min-width: 640px) { .notfound__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } }
@media (min-width: 1024px) { .notfound__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (forced-colors: active) {
	.filter__btn, .lightbox__btn, .related__item, .contact-plate { border: 2px solid ButtonText; }
}

/* Two fields side by side: keep the inputs aligned even when one has a hint or an error. */
.form-row--2 > .field { display: flex; flex-direction: column; }
.form-row--2 > .field > input { margin-top: auto; }

/* Single-column grids never grow wider than the viewport (min-content safety). */
.page-hero__inner, .svc__layout, .contact__layout, .quote__layout, .legal__layout, .story__inner,
.area__inner, .clients__inner, .overview__item { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
	.page-hero--split .page-hero__inner, .page-hero--404 .page-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.svc__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
	.contact__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.quote__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
	.legal__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
	.story__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.area__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.clients__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
	.overview__item { grid-template-columns: 7.5rem minmax(0, 6fr) minmax(0, 5fr); }
}
/* Map: fixed min-height on phones (an aspect-ratio + min-height would force extra width). */
.map__placeholder, .map iframe { aspect-ratio: auto; min-height: 20rem; }
@media (min-width: 640px) { .map__placeholder, .map iframe { aspect-ratio: 4 / 3; min-height: 0; } }