/*
 * SF Digitalbyraa — sitewide visual QA
 *
 * Loaded after page-specific styles. This file keeps surface contrast and
 * functional type sizes consistent without changing page content or artwork.
 */

/* Cross-platform icon rendering. */
body,
button,
input,
textarea,
select {
	font-family: Arial, "Segoe UI Symbol", "Apple Symbols", Helvetica, sans-serif;
}

svg.sfd-icon {
	display: inline-block;
	flex: 0 0 auto;
	overflow: visible;
	vertical-align: middle;
	shape-rendering: geometricPrecision;
}

svg.sfd-icon :is(path, rect, circle) {
	vector-effect: non-scaling-stroke;
}

@media (forced-colors: active) {
	svg.sfd-icon {
		forced-color-adjust: auto;
	}
}

/* Arial only contains regular and bold faces. Use the real bold face in the
 * desktop header instead of asking Windows to interpolate an 800-weight face. */
@media (min-width: 1181px) {
	.site-header :is(.nav-flyout-trigger, .header-cta) {
		font-family: Arial, "Segoe UI Symbol", "Apple Symbols", Helvetica, sans-serif;
		font-weight: 700;
		text-shadow: none;
	}
}

/* Mini-headings: yellow on dark/blue, blue on light brand-colour surfaces. */
.rich-specialist-page .eyebrow.light,
:is(
	.sp-measure-section,
	.sp-design-process,
	.sp-photo-delivery,
	.web-journey-section,
	.shop-journey-section,
	.shop-integrations-section,
	.ops-cycle-section,
	.ops-improve-section,
	.priority-feature-web,
	.priority-proof-web,
	.service-explainer,
	.case-detail-hero
) .eyebrow {
	color: #f7f7f2;
}

html[data-theme="dark"] .rich-specialist-page :is(
	.sp-editorial,
	.sp-content-map-section,
	.sp-optimise-section,
	.sp-meta-measure,
	.sp-calendar-section,
	.sp-design-opening,
	.sp-design-delivery,
	.sp-photo-opening,
	.sp-3d-opening,
	.sp-3d-delivery,
	.sp-migration-section,
	.sp-crm-opening,
	.sp-support-opening,
	.sp-faq
) .eyebrow {
	color: #f7f7f2;
}

:is(
	.sp-ads-route,
	.sp-audit-section,
	.sp-meta-journey,
	.sp-meta-delivery,
	.sp-channels-section,
	.sp-delivery-rows,
	.sp-application-wall,
	.sp-content-bank,
	.sp-format-section,
	.sp-before-after,
	.sp-3d-uses,
	.sp-m365-security,
	.sp-m365-support,
	.sp-crm-model,
	.sp-crm-fit,
	.sp-support-scope,
	.sp-support-prevent,
	.web-canvas-section,
	.priority-feature-shop,
	.shop-front-panel,
	.shop-catalog-section,
	.shop-launch-section,
	.ops-response-section,
	.service-showcase.accent-pink,
	.service-showcase.accent-mint,
	.service-showcase.accent-yellow,
	.ai-principle-section,
	.cta-card
) .eyebrow {
	color: var(--sf-ink);
}

:is(
	.sp-ads-route,
	.sp-audit-section,
	.sp-meta-journey,
	.sp-meta-delivery,
	.sp-channels-section,
	.sp-delivery-rows,
	.sp-application-wall,
	.sp-content-bank,
	.sp-format-section,
	.sp-before-after,
	.sp-3d-uses,
	.sp-m365-security,
	.sp-m365-support,
	.sp-crm-model,
	.sp-crm-fit,
	.sp-support-scope,
	.sp-support-prevent,
	.web-canvas-section,
	.priority-feature-shop,
	.shop-front-panel,
	.shop-catalog-section,
	.shop-launch-section,
	.ops-response-section,
	.service-showcase.accent-pink,
	.service-showcase.accent-mint,
	.service-showcase.accent-yellow,
	.ai-principle-section,
	.cta-card
) .eyebrow::before,
html[data-theme="dark"] .faq-section:not(.sp-faq):not(.ops-faq-section) .eyebrow::before {
	background: var(--sf-blue);
}

html[data-theme="dark"] .faq-section:not(.sp-faq):not(.ops-faq-section) .eyebrow {
	color: var(--sf-ink);
}

html[data-theme="dark"] :is(
	.web-editorial-opening,
	.web-bento-section,
	.web-process-section,
	.web-starter-note,
	.shop-delivery-section,
	.ops-opening,
	.ops-scope-section,
	.ops-takeover-section,
	.ops-faq-section
) .eyebrow {
	color: #f7f7f2;
}

html[data-theme="dark"] .ai-principle h2,
html[data-theme="dark"] .ai-principle > div:last-child > p:not(.ai-principle-note) {
	color: var(--sf-ink);
}

/* Specialist pages: explanatory copy must be comfortably readable. */
.rich-specialist-page section > .site-container > header > p {
	font-size: clamp(.98rem, 1.15vw, 1.08rem);
	line-height: 1.65;
}

.rich-specialist-page ul li {
	font-size: clamp(.9rem, 1vw, .98rem);
	line-height: 1.55;
}

.rich-specialist-page .sp-three-principles strong {
	font-size: 1.08rem;
}

.rich-specialist-page .sp-three-principles span {
	font-size: clamp(.88rem, .95vw, .95rem);
	line-height: 1.55;
}

:is(
	.sp-meta-journey,
	.sp-meta-delivery,
	.sp-channels-section,
	.sp-delivery-rows,
	.sp-design-delivery,
	.sp-production-track,
	.sp-photo-delivery,
	.sp-3d-delivery,
	.sp-m365-support,
	.sp-crm-delivery,
	.sp-support-scope,
	.sp-support-collab
) article p {
	font-size: clamp(.9rem, .96vw, .98rem);
	line-height: 1.55;
}

:is(
	.sp-meta-journey,
	.sp-meta-delivery,
	.sp-channels-section,
	.sp-delivery-rows,
	.sp-design-delivery,
	.sp-production-track,
	.sp-photo-delivery,
	.sp-3d-delivery,
	.sp-m365-support,
	.sp-crm-delivery,
	.sp-support-scope,
	.sp-support-collab
) article :is(h3, strong) {
	font-size: clamp(1.08rem, 1.25vw, 1.25rem);
	line-height: 1.15;
}

/* Preserve ink text in light cards when the global dark theme is active. */
html[data-theme="dark"] :is(
	.sp-meta-journey,
	.sp-meta-delivery,
	.sp-channels-section,
	.sp-delivery-rows,
	.sp-design-delivery,
	.sp-production-track,
	.sp-3d-delivery,
	.sp-m365-support,
	.sp-crm-delivery,
	.sp-support-scope,
	.sp-crm-fit,
	.sp-3d-uses
) article :is(h3, p, small, strong) {
	color: inherit;
}

html[data-theme="dark"] :is(.sp-design-delivery, .sp-3d-delivery) article:nth-child(-n+3) {
	color: var(--sf-ink);
}

html[data-theme="dark"] .sp-content-bank,
html[data-theme="dark"] .sp-content-bank :is(h2, p, li) {
	color: var(--sf-ink);
}

html[data-theme="dark"] .sp-delivery-rows article,
html[data-theme="dark"] .sp-meta-journey article {
	color: var(--sf-ink);
}

/* Microsoft 365: balanced type hierarchy in principles, migration and support. */
.sp-migration-layout li span {
	font-size: .66rem;
}

.sp-migration-layout li strong {
	font-size: clamp(.94rem, 1.08vw, 1.04rem);
	line-height: 1.35;
}

.sp-migration-layout li small {
	max-width: 250px;
	font-size: clamp(.82rem, .9vw, .9rem);
	line-height: 1.5;
}

.sp-access-console strong {
	font-size: .8rem;
}

.sp-access-console small {
	font-size: .68rem;
	line-height: 1.45;
}

.sp-access-console em {
	font-size: .58rem;
}

.sp-access-console > footer {
	font-size: .72rem;
}

.sp-m365-support article {
	min-height: 225px;
	color: var(--sf-ink);
}

.sp-m365-support article:nth-child(4) {
	color: #fff;
}

.sp-m365-support article :is(h3, p) {
	color: inherit;
}

.sp-m365-support h3 {
	margin-top: auto;
}

/* CRM: readable decision copy and denser, clearer delivery cards. */
.sp-crm-pipeline > div > header > p,
.sp-crm-delivery > div > header > p {
	font-size: clamp(.98rem, 1.15vw, 1.08rem);
}

.sp-crm-fit ul li {
	font-size: clamp(.9rem, 1vw, .98rem);
}

.sp-crm-fit > div > footer {
	font-size: clamp(.8rem, .9vw, .9rem);
	line-height: 1.5;
}

.sp-crm-delivery article {
	min-height: 235px;
}

.sp-crm-delivery article small {
	font-size: .64rem;
	letter-spacing: .06em;
}

.sp-crm-delivery article :is(h3, p, small) {
	color: inherit;
}

/* Process and production lists are information, not decorative microcopy. */
:is(.sp-design-process, .sp-3d-process) li strong,
.sp-photo-delivery strong,
.sp-production-track strong {
	font-size: clamp(.96rem, 1.08vw, 1.08rem);
}

/* Priority service cards and small campaign notes. */
.web-journey-track p,
.web-starter-note p,
.shop-ai-note p,
.ops-ai-note p {
	font-size: clamp(.86rem, .95vw, .94rem);
	line-height: 1.55;
}

/* Customer reference cards: short descriptions and tags remain compact, not tiny. */
.reference-project-copy > small {
	font-size: .64rem;
}

.reference-project-description {
	font-size: clamp(.8rem, .88vw, .88rem);
	line-height: 1.55;
}

.reference-project-copy summary,
.reference-project-copy > a {
	font-size: .72rem;
}

.reference-project-copy li {
	font-size: .62rem;
}

@media (max-width: 720px) {
	.rich-specialist-page section > .site-container > header > p {
		font-size: .98rem;
	}

	.sp-migration-layout li {
		grid-template-columns: 1fr;
		gap: .45rem;
	}

	.sp-migration-layout li small {
		grid-column: auto;
		max-width: none;
		text-align: left;
	}

	.sp-crm-fit > div > footer {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* 6.31 — launch-candidate parity and overflow pass. */

/* Every grid and flex child is allowed to shrink. This prevents long Norwegian
 * headings and labels from forcing a section wider than the viewport. */
:is(main, .site-footer) :is(.site-container, section, article, header, footer, div, a) {
	min-width: 0;
}

:is(main, .site-footer) img,
:is(main, .site-footer) svg {
	max-width: 100%;
}

/* The two desktop strings caught by the full-site width audit. */
.customer-case-copy h2 {
	overflow-wrap: break-word;
	hyphens: auto;
}

.gcs-route-board article small {
	max-width: 100%;
	font-size: clamp(.48rem, .52vw, .56rem);
	letter-spacing: .055em;
	overflow-wrap: anywhere;
}

/* Light cards keep their deliberately dark typography in dark mode. */
html[data-theme="dark"] .gcs-channel-grid article,
html[data-theme="dark"] .gcs-format-grid article:nth-child(2),
html[data-theme="dark"] .gcs-format-grid article:nth-child(4),
html[data-theme="dark"] .services-marketing-card:nth-child(5),
html[data-theme="dark"] .services-marketing-card:nth-child(6),
html[data-theme="dark"] .services-marketing-card:nth-child(7),
html[data-theme="dark"] .creative-social {
	color: var(--sf-ink);
}

html[data-theme="dark"] :is(
	.gcs-channel-grid article,
	.gcs-format-grid article:nth-child(2),
	.gcs-format-grid article:nth-child(4),
	.services-marketing-card:nth-child(5),
	.services-marketing-card:nth-child(6),
	.services-marketing-card:nth-child(7),
	.creative-social
) :is(h3, p, small, strong, b) {
	color: inherit;
}

/* Number badges use a pale brand surface and always need ink text. */
html[data-theme="dark"] .rich-extension-page .ext-middle li > span {
	color: var(--sf-ink);
}

/* The copywriting SEO checklist lives on a dark panel. */
html[data-theme="dark"] .sp-copy-seo :is(li, strong, span) {
	color: #f6f5ef;
}

html[data-theme="dark"] :is(
	.sp-photo-direction,
	.sp-photo-bank,
	.sp-photo-formats
) :is(.eyebrow, h2, p, li) {
	color: var(--sf-ink);
}

html[data-theme="dark"] :is(
	.sp-photo-direction,
	.sp-photo-bank,
	.sp-photo-formats
) .eyebrow::before {
	background: var(--sf-blue);
}

/* Branded colour sections remain branded in dark mode, with explicit contrast. */
html[data-theme="dark"] :is(.case-goals-section, .compact-case-goals),
html[data-theme="dark"] :is(.case-goals-section, .compact-case-goals) :is(h2, h3, p, .eyebrow) {
	color: var(--sf-ink);
}

html[data-theme="dark"] :is(.case-goals-section, .compact-case-goals) .eyebrow::before {
	background: var(--sf-blue);
}

html[data-theme="dark"] :is(
	.case-result-section,
	.ext-tech,
	.sp-3d-accuracy,
	.sp-photo-editing,
	.sp-crm-delivery,
	.sp-support-response,
	.web-journey-section,
	.shop-journey-section,
	.shop-integrations-section,
	.ops-cycle-section,
	.ops-improve-section
) {
	background-color: #4056c8;
}

html[data-theme="dark"] :is(
	.creative-content,
	.gcs-format-grid article:nth-child(3),
	.sp-support-scope article:nth-child(4),
	.sp-m365-support article:nth-child(4),
	.sp-3d-uses article:nth-child(3)
) {
	color: #fff;
	background-color: #4056c8;
}

html[data-theme="dark"] :is(
	.creative-content,
	.gcs-format-grid article:nth-child(3),
	.sp-support-scope article:nth-child(4),
	.sp-m365-support article:nth-child(4),
	.sp-3d-uses article:nth-child(3)
) :is(h3, p, small, strong, b) {
	color: inherit;
}

html[data-theme="dark"] :is(
	.case-result-section,
	.ext-tech,
	.sp-3d-accuracy,
	.sp-photo-editing,
	.sp-crm-delivery,
	.sp-support-response,
	.web-journey-section,
	.shop-journey-section,
	.shop-integrations-section,
	.ops-cycle-section,
	.ops-improve-section
) :is(.eyebrow, h2, p) {
	color: #fff;
}

html[data-theme="dark"] :is(
	.case-result-section,
	.ext-tech,
	.sp-3d-accuracy,
	.sp-photo-editing,
	.sp-crm-delivery,
	.sp-support-response,
	.web-journey-section,
	.shop-journey-section,
	.shop-integrations-section,
	.ops-cycle-section,
	.ops-improve-section
) .eyebrow::before {
	background: var(--sf-yellow);
}

/* The secondary compact-case action previously inherited a white fill. */
.compact-case-result .button-outline {
	color: #fff;
	background: transparent;
	border-color: #fff;
}

.compact-case-result .button-outline:hover,
.compact-case-result .button-outline:focus-visible {
	color: var(--sf-ink);
	background: #fff;
}

/* Article step cards must not combine ink text with the dark card override. */
html[data-theme="dark"] .article-steps > div:nth-child(2) {
	color: var(--sf-ink);
	background: var(--sf-mint);
}

html[data-theme="dark"] .article-steps > div:nth-child(3) {
	color: var(--sf-ink);
	background: var(--sf-yellow);
}

html[data-theme="dark"] .article-steps > div:nth-child(2) :is(strong, p),
html[data-theme="dark"] .article-steps > div:nth-child(3) :is(strong, p) {
	color: inherit;
}

/* FAQ mini-heading on the dark service overview surface. */
html[data-theme="dark"] .services-page .services-faq .eyebrow {
	color: #fff;
}

html[data-theme="dark"] .services-page .services-faq .eyebrow::before {
	background: var(--sf-yellow);
}

/* Mobile containment for every page family and every custom illustration. */
@media (max-width: 720px) {
	.site-container {
		width: min(100% - 28px, 1260px);
	}

	:is(main, .site-footer) :is(h1, h2, h3, p, li, strong, small, span, a, button) {
		max-width: 100%;
	}

	:is(main, .site-footer) :is(h1, h2, h3) {
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: auto;
		text-wrap: balance;
	}

	:is(main, .site-footer) :is(p, li, small, .eyebrow, .button, summary) {
		overflow-wrap: anywhere;
	}

	:is(
		.service-dashboard,
		.services-hero-engine,
		.services-demand-map,
		.marketing-mini,
		.creative-brand-board,
		.creative-copy-editor,
		.creative-storyboard,
		.creative-3d-visual,
		.sp-three-principles,
		.sp-intent-map,
		.sp-audit-board,
		.sp-sitemap-visual,
		.sp-measure-dashboard,
		.sp-brand-board,
		.sp-photo-contactsheet,
		.sp-bank-browser,
		.sp-3d-object,
		.sp-3d-brief,
		.sp-crm-snapshot,
		.sp-model-builder,
		.sp-support-desk,
		.sp-response-flow,
		.sp-health-board,
		.ext-board,
		.gcs-route-board,
		.gcs-material-board,
		.gcs-content-engine,
		.gcs-calendar-board,
		.gcs-plan-board,
		.gcs-social-board,
		.gcs-paid-board,
		.case-detail-hero-board,
		.case-compare,
		.compact-case-hero-board,
		.compact-site-monitor
	) {
		width: 100%;
		max-width: 100%;
	}

	/* Allow artwork to crop internally, never the page itself. */
	:is(
		.service-dashboard,
		.services-hero-engine,
		.services-demand-map,
		.marketing-mini,
		.creative-brand-board,
		.creative-copy-editor,
		.creative-storyboard,
		.creative-3d-visual,
		.sp-brand-board,
		.sp-photo-contactsheet,
		.sp-bank-browser,
		.sp-3d-object,
		.ext-board,
		.gcs-route-board,
		.gcs-material-board,
		.gcs-content-engine,
		.gcs-calendar-board,
		.gcs-plan-board,
		.gcs-social-board,
		.gcs-paid-board,
		.case-detail-hero-board,
		.compact-case-hero-board
	) {
		overflow: hidden;
	}

	.gcs-route-board > header,
	.gcs-plan-board > header,
	.gcs-social-board > header,
	.gcs-paid-board > header,
	.ext-board > header {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.customer-case-copy h2 {
		font-size: clamp(2.35rem, 11.7vw, 4rem);
		letter-spacing: -.055em;
	}

	.case-link-pair,
	.compact-result-actions {
		width: 100%;
	}

	.case-link-pair a,
	.compact-result-actions a {
		white-space: normal;
	}

	.floating-theme-toggle {
		z-index: 80;
	}
}

@media (max-width: 390px) {
	.site-container {
		width: min(100% - 22px, 1260px);
	}

	.page-hero h1,
	.specialist-page .page-hero h1,
	.case-detail-hero h1 {
		font-size: clamp(2.65rem, 13.5vw, 4rem);
	}

	:is(.button, .header-cta, .footer-primary-action) {
		padding-inline: .9rem;
	}
}

/* 6.32.0 — final contrast and containment pass for the mini-site campaign. */
html[data-theme="dark"] .simple-web-example,
html[data-theme="dark"] .simple-web-example :is(.eyebrow, h2, h3, p, li, strong, small) {
	color: var(--sf-ink);
}

html[data-theme="dark"] .simple-web-example {
	background: var(--sf-yellow);
}

html[data-theme="dark"] .simple-web-example .eyebrow::before {
	background: var(--sf-blue);
}

html[data-theme="dark"] .simple-web-scope-grid article,
html[data-theme="dark"] .simple-web-scope-grid article :is(h3, p, li, strong, small),
html[data-theme="dark"] .simple-web-offer-board,
html[data-theme="dark"] .simple-web-offer-board :is(li, strong, small, span),
html[data-theme="dark"] .simple-web-addon-card,
html[data-theme="dark"] .simple-web-addon-card :is(p, strong, small, span) {
	color: var(--sf-ink);
}

.simple-web-offer-board > footer span,
html[data-theme="dark"] .simple-web-offer-board > footer span,
html[data-theme="dark"] .simple-web-example-monitor > header strong {
	color: #fff;
}

html[data-theme="dark"] .simple-web-scope-grid article.is-business {
	background: var(--sf-yellow);
}

html[data-theme="dark"] .simple-web-growth-path article:nth-of-type(1),
html[data-theme="dark"] .simple-web-growth-path article:nth-of-type(2),
html[data-theme="dark"] .simple-web-growth-path article:nth-of-type(1) :is(strong, small, span),
html[data-theme="dark"] .simple-web-growth-path article:nth-of-type(2) :is(strong, small, span) {
	color: var(--sf-ink);
}

html[data-theme="dark"] .simple-web-growth-path article:nth-of-type(3) {
	color: #fff;
	background: #4056c8;
}

html[data-theme="dark"] .simple-web-growth-path article:nth-of-type(3) :is(strong, small, span) {
	color: #fff;
}

html[data-theme="dark"] .simple-web-faq :is(.eyebrow, h2) {
	color: #fff;
}

html[data-theme="dark"] .simple-web-faq .eyebrow::before {
	background: var(--sf-yellow);
}

@media (max-width: 720px) {
	.simple-web-page :is(.simple-web-offer-board, .simple-web-example-monitor, .simple-web-addon-card) {
		width: 100%;
		max-width: 100%;
		transform: none;
	}

	.simple-web-scope-grid .is-business {
		grid-column: auto;
	}
}

/* 6.32.1 — persistent home shortcut in every sticky in-page navigation. */
:is(.page-anchor-nav, .services-anchor-nav) {
	column-gap: clamp(.75rem, 1.25vw, 1.25rem);
}

:is(.page-anchor-nav, .services-anchor-nav) > span {
	margin-right: clamp(.15rem, .8vw, .8rem);
}

:is(.page-anchor-nav, .services-anchor-nav) > div {
	min-width: 0;
	flex: 1 1 auto;
}

.page-anchor-nav > a.anchor-home-link,
.services-anchor-nav > a.anchor-home-link {
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 6px;
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	color: var(--sf-ink);
	background: var(--sf-yellow);
	border: 1px solid var(--sf-yellow);
	border-radius: 12px;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

:is(.page-anchor-nav, .services-anchor-nav) > .anchor-home-link img {
	width: 30px;
	height: auto;
	max-width: 100%;
	max-height: 22px;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .2));
}

.page-anchor-nav > a.anchor-home-link:hover,
.services-anchor-nav > a.anchor-home-link:hover,
.page-anchor-nav > a.anchor-home-link:focus-visible,
.services-anchor-nav > a.anchor-home-link:focus-visible {
	color: var(--sf-ink);
	background: #fff;
	border-color: #fff;
	transform: translateY(-1px);
}

@media (max-width: 720px) {
	:is(.page-anchor-nav, .services-anchor-nav) {
		display: grid !important;
		grid-template-columns: 42px minmax(0, 1fr);
		gap: .55rem;
		align-items: center;
	}

	:is(.page-anchor-nav, .services-anchor-nav) > span {
		display: none !important;
		margin: 0;
	}

	:is(.page-anchor-nav, .services-anchor-nav) > div {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		min-width: 0;
		padding-bottom: .1rem;
	}
}

/* 6.32.2 — campaign CTA, delivery promise and final light/dark contrast lock. */
.simple-web-hero .simple-web-hero-copy > .eyebrow,
html[data-theme="dark"] .simple-web-hero .simple-web-hero-copy > .eyebrow {
	color: #fff !important;
}

.simple-web-hero .simple-web-hero-copy > .eyebrow::before,
html[data-theme="dark"] .simple-web-hero .simple-web-hero-copy > .eyebrow::before {
	background: var(--sf-yellow) !important;
}

.simple-web-hero .simple-web-hero-copy > p,
.simple-web-hero .simple-web-hero-copy > small,
html[data-theme="dark"] .simple-web-hero .simple-web-hero-copy > p,
html[data-theme="dark"] .simple-web-hero .simple-web-hero-copy > small {
	color: #fff !important;
}

.simple-web-offer-delivery {
	padding: .85rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--sf-ink);
	background: var(--sf-mint);
	border-top: 2px solid var(--sf-ink);
}

.simple-web-offer-delivery span,
.simple-web-offer-delivery strong,
html[data-theme="dark"] .simple-web-offer-delivery span,
html[data-theme="dark"] .simple-web-offer-delivery strong {
	color: var(--sf-ink) !important;
}

.simple-web-offer-delivery span {
	font-size: .53rem;
	font-weight: 950;
	letter-spacing: .11em;
}

.simple-web-offer-delivery strong {
	font-size: .72rem;
}

html[data-theme="dark"] .simple-web-feature-grid article:nth-child(-n+4),
html[data-theme="dark"] .simple-web-feature-grid article:nth-child(-n+4) :is(h3, p) {
	color: var(--sf-ink) !important;
}

html[data-theme="dark"] .simple-web-feature-grid article:nth-child(n+5),
html[data-theme="dark"] .simple-web-feature-grid article:nth-child(n+5) :is(h3, p) {
	color: #fff !important;
}

.simple-web-process .eyebrow,
.simple-web-process h2,
.simple-web-process h3,
.simple-web-process p,
html[data-theme="dark"] .simple-web-process .eyebrow,
html[data-theme="dark"] .simple-web-process h2,
html[data-theme="dark"] .simple-web-process h3,
html[data-theme="dark"] .simple-web-process p {
	color: #fff !important;
}

.simple-web-process .eyebrow::before,
html[data-theme="dark"] .simple-web-process .eyebrow::before {
	background: var(--sf-yellow) !important;
}

html[data-theme="dark"] .simple-web-faq .eyebrow,
html[data-theme="dark"] .simple-web-faq h2 {
	color: #fff !important;
}

html[data-theme="dark"] .simple-web-faq .eyebrow::before {
	background: var(--sf-yellow) !important;
}

/* 6.48.0 — white home tile with the light-background brand icon. */
.page-anchor-nav > a.anchor-home-link,
.services-anchor-nav > a.anchor-home-link,
html[data-theme="dark"] .page-anchor-nav > a.anchor-home-link,
html[data-theme="dark"] .services-anchor-nav > a.anchor-home-link {
	background: #fff;
	border-color: #fff;
}

:is(.page-anchor-nav, .services-anchor-nav) > .anchor-home-link img {
	filter: none;
}

.page-anchor-nav > a.anchor-home-link:hover,
.services-anchor-nav > a.anchor-home-link:hover,
.page-anchor-nav > a.anchor-home-link:focus-visible,
.services-anchor-nav > a.anchor-home-link:focus-visible {
	background: #f2f2ed;
	border-color: #f2f2ed;
}

@media (max-width: 720px) {
	.simple-web-offer-delivery {
		padding-inline: 1rem;
		align-items: flex-start;
		flex-direction: column;
		gap: .3rem;
	}
}

/* 6.32.3 — sticky campaign navigation, tighter cards and deliberate hover states. */
.page-anchor-wrap.simple-web-anchor {
	position: sticky;
	top: 0;
	z-index: 25;
}

.admin-bar .page-anchor-wrap.simple-web-anchor {
	top: 32px;
}

.simple-web-page > section[id] {
	scroll-margin-top: 82px;
}

.admin-bar .simple-web-page > section[id] {
	scroll-margin-top: 114px;
}

.contact-form#kontaktskjema {
	scroll-margin-top: 6rem;
}

.contact-form.is-complete {
	min-height: 460px;
	display: grid;
	align-content: center;
}

.contact-confirmation {
	padding: clamp(1.6rem, 4vw, 3rem);
	color: var(--sf-ink);
	background: #fff;
	border: 2px solid var(--sf-ink);
	border-radius: 22px;
}

.contact-confirmation-icon {
	width: 68px;
	height: 68px;
	margin-bottom: 1.4rem;
	display: grid;
	place-items: center;
	color: var(--sf-ink);
	background: var(--sf-mint);
	border: 2px solid var(--sf-ink);
	border-radius: 18px;
}

.contact-confirmation-icon svg {
	width: 32px;
	height: 32px;
	stroke-width: 2.5;
}

.contact-confirmation-label {
	margin-bottom: .65rem;
	display: block;
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.contact-confirmation h2 {
	max-width: 12ch;
	margin: 0;
	color: var(--sf-ink) !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(2.2rem, 4vw, 3.8rem);
	font-weight: 790;
	line-height: .98;
	letter-spacing: -.055em;
}

.contact-confirmation p {
	max-width: 42ch;
	margin: 1.2rem 0 0;
	color: #343431 !important;
	font-size: 1rem;
	line-height: 1.65;
}

html[data-theme="dark"] .contact-confirmation {
	color: var(--sf-ink);
	background: #fff;
	border-color: var(--sf-ink);
}

@media (max-width: 720px) {
	.contact-form.is-complete {
		min-height: 380px;
	}

	.contact-confirmation {
		padding: 1.5rem;
	}
}

.simple-web-intro-grid {
	column-gap: clamp(2rem, 7vw, 7rem);
	row-gap: clamp(2rem, 4vw, 4rem);
}

.simple-web-audience-grid {
	margin-top: 0;
}

.simple-web-audience-grid article {
	min-height: 245px;
	padding: 1.35rem;
}

.simple-web-audience-grid h3 {
	margin-bottom: .75rem;
}

.simple-web-audience-grid p {
	font-size: .83rem;
	line-height: 1.55;
}

.simple-web-page :is(.simple-web-hero, .simple-web-process, .simple-web-final) .button-primary,
html[data-theme="dark"] .simple-web-page :is(.simple-web-hero, .simple-web-process, .simple-web-final) .button-primary {
	color: var(--sf-ink) !important;
	background: var(--sf-yellow) !important;
	border-color: var(--sf-yellow) !important;
}

.simple-web-page :is(.simple-web-hero, .simple-web-process, .simple-web-final) .button-primary:hover,
.simple-web-page :is(.simple-web-hero, .simple-web-process, .simple-web-final) .button-primary:focus-visible,
html[data-theme="dark"] .simple-web-page :is(.simple-web-hero, .simple-web-process, .simple-web-final) .button-primary:hover,
html[data-theme="dark"] .simple-web-page :is(.simple-web-hero, .simple-web-process, .simple-web-final) .button-primary:focus-visible {
	color: var(--sf-ink) !important;
	background: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	transform: translateY(-2px);
}

.simple-web-example .button-primary,
html[data-theme="dark"] .simple-web-example .button-primary {
	color: #fff !important;
	background: var(--sf-ink) !important;
	border-color: var(--sf-ink) !important;
}

.simple-web-example .button-primary:hover,
.simple-web-example .button-primary:focus-visible,
html[data-theme="dark"] .simple-web-example .button-primary:hover,
html[data-theme="dark"] .simple-web-example .button-primary:focus-visible {
	color: var(--sf-ink) !important;
	background: #fff !important;
	border-color: var(--sf-ink) !important;
	box-shadow: none !important;
	transform: translateY(-2px);
}

.simple-web-anchor .anchor-contact-link:hover,
.simple-web-anchor .anchor-contact-link:focus-visible,
html[data-theme="dark"] .simple-web-anchor .anchor-contact-link:hover,
html[data-theme="dark"] .simple-web-anchor .anchor-contact-link:focus-visible {
	color: var(--sf-ink) !important;
	background: #fff !important;
	border-color: #fff !important;
}

.simple-web-hero .simple-web-text-link:hover,
.simple-web-hero .simple-web-text-link:focus-visible {
	color: var(--sf-yellow);
}

.simple-web-example .simple-web-text-link:hover,
.simple-web-example .simple-web-text-link:focus-visible {
	color: var(--sf-blue);
}

@media (max-width: 782px) {
	.admin-bar .page-anchor-wrap.simple-web-anchor {
		top: 46px;
	}

	.admin-bar .simple-web-page > section[id] {
		scroll-margin-top: 128px;
	}
}

@media (max-width: 720px) {
	.simple-web-audience-grid article {
		min-height: 210px;
	}
}

/* 6.34.0 — Logo B brand yellow across the active design system. */
:root {
	--sf-ink: #111111;
	--sf-yellow: #ffc400;
	--signal-black: #111111;
	--signal-yellow: #ffc400;
}

.sf-concept-home {
	--ink: #111111;
	--yellow: #ffc400;
}

.refined-home {
	--rp-ink: #111111;
	--rp-yellow: #ffc400;
}

/* Final Logo B proportions must win over older page-specific artwork rules. */
.case-compare-brand {
	width: 38px;
	height: 20px;
}

.surface-offer-brand {
	width: 34px;
	height: 18px;
}

/* 6.37.0 — final readability, spacing and comparison-card QA for the mini-site page. */
.simple-web-page,
.simple-web-page *,
.simple-web-page *::before,
.simple-web-page *::after {
	box-sizing: border-box;
}

.simple-web-hero-grid,
.simple-web-example-grid,
.simple-web-addons-grid,
.simple-web-growth-grid,
.simple-web-process-grid,
.simple-web-final > .site-container,
.simple-web-page :is(.simple-web-hero-copy, .simple-web-example-copy, .simple-web-addons-grid > *, .simple-web-growth-grid > *, .simple-web-process-grid > *) {
	min-width: 0;
}

.simple-web-page :is(h1, h2, h3, strong) {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.simple-web-hero-copy h1 mark {
	white-space: nowrap;
}

.simple-web-example-grid {
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
}

.simple-web-intro-grid > div:nth-child(2) p,
.simple-web-example-copy > p,
.simple-web-scope .simple-web-section-head > p,
.simple-web-growth p,
.simple-web-faq .faq-list details p {
	color: #343430;
}

.simple-web-included .simple-web-section-head > p,
.simple-web-addons-grid > div > p,
.simple-web-process-grid > div > p,
.simple-web-final p {
	color: #e1e1db;
}

.simple-web-feature-grid article {
	min-height: 230px;
	padding: 1.25rem;
}

.simple-web-feature-grid h3 {
	margin: 2.35rem 0 .65rem;
}

.simple-web-feature-grid p {
	font-size: .8rem;
	line-height: 1.55;
}

.simple-web-scope-grid article {
	display: flex;
	flex-direction: column;
}

.simple-web-scope-grid article > ul {
	margin-bottom: 1.15rem;
}

.simple-web-scope-grid article > .simple-web-scope-summary {
	min-height: 96px;
	margin: auto 0 0;
	padding: 1rem;
	display: flex;
	align-items: center;
	color: var(--sf-ink);
	background: #fff;
	border: 1px solid rgba(17, 17, 17, .2);
	border-radius: 12px;
	font-size: .72rem;
	font-weight: 780;
	line-height: 1.5;
}

html[data-theme="dark"] .simple-web-intro-grid > div:nth-child(2) p,
html[data-theme="dark"] .simple-web-scope .simple-web-section-head > p,
html[data-theme="dark"] .simple-web-growth p,
html[data-theme="dark"] .simple-web-included .simple-web-section-head > p,
html[data-theme="dark"] .simple-web-addons-grid > div > p,
html[data-theme="dark"] .simple-web-process-grid > div > p,
html[data-theme="dark"] .simple-web-final p {
	color: #e4e4de;
}

html[data-theme="dark"] .simple-web-faq .faq-list details p,
html[data-theme="dark"] .simple-web-scope-grid article > .simple-web-scope-summary {
	color: var(--sf-ink);
}

@media (max-width: 1100px) {
	.simple-web-example-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.simple-web-feature-grid article {
		min-height: 205px;
	}

	.simple-web-feature-grid h3 {
		margin-top: 1.8rem;
	}

	.simple-web-scope-grid article > .simple-web-scope-summary {
		min-height: 0;
	}
}

/* 6.43.0 — final cross-page colour and contrast contract. */
:root {
	--sf-blue: #526be4;
}

.sf-concept-home {
	--blue: #526be4;
}

.refined-home {
	--rp-blue: #526be4;
}

/* Dark mode must not recolour copy that sits on retained light brand surfaces. */
html[data-theme="dark"] .case-detail-page :is(.case-goals-section, .compact-case-goals) .case-section-head > p,
html[data-theme="dark"] .case-detail-page :is(.case-goals-section, .compact-case-goals) :is(h2, h3, p, .eyebrow) {
	color: var(--sf-ink) !important;
}

html[data-theme="dark"] .case-detail-page :is(.case-goals-section, .compact-case-goals) .eyebrow::before {
	background: var(--sf-blue) !important;
}

html[data-theme="dark"] .compact-case-principle :is(.eyebrow, strong, p, a) {
	color: #fff !important;
}

html[data-theme="dark"] .compact-case-principle .eyebrow::before,
html[data-theme="dark"] .priority-proof-web .eyebrow::before {
	background: var(--sf-yellow) !important;
}

html[data-theme="dark"] .priority-proof-web .priority-proof-copy :is(.eyebrow, h2, p) {
	color: #fff !important;
}

html[data-theme="dark"] .web-journey-section .web-journey-track article,
html[data-theme="dark"] .web-journey-section .web-journey-track article :is(small, strong, p, span, svg) {
	color: var(--sf-ink) !important;
}

/* Mini interfaces and light cards keep their own readable ink palette in both modes. */
html[data-theme="dark"] :is(
	.engine-foundation,
	.engine-demand,
	.engine-action,
	.marketing-mini-seo,
	.marketing-mini-ads,
	.marketing-mini-content,
	.marketing-mini-email,
	.creative-brand-board,
	.creative-storyboard,
	.web-canvas-demo-page,
	.web-canvas-demo-mobile,
	.shop-launch-board,
	.shop-booking-board,
	.gcs-content-engine,
	.gcs-calendar-board,
	.sp-three-principles
),
html[data-theme="dark"] :is(
	.engine-foundation,
	.engine-demand,
	.engine-action,
	.marketing-mini-seo,
	.marketing-mini-ads,
	.marketing-mini-content,
	.marketing-mini-email,
	.creative-brand-board,
	.creative-storyboard,
	.web-canvas-demo-page,
	.web-canvas-demo-mobile,
	.shop-launch-board,
	.shop-booking-board,
	.gcs-content-engine,
	.gcs-calendar-board,
	.sp-three-principles
) :is(h3, p, small, strong, b, span, em, a, svg) {
	color: var(--sf-ink) !important;
}

html[data-theme="dark"] :is(
	.gcs-channel-grid article,
	.gcs-delivery-grid article,
	.gcs-format-grid article:nth-child(1),
	.gcs-format-grid article:nth-child(2),
	.gcs-format-grid article:nth-child(4),
	.web-bento-1,
	.web-bento-2,
	.web-bento-4,
	.shop-delivery-1,
	.shop-delivery-2,
	.shop-delivery-4
),
html[data-theme="dark"] :is(
	.gcs-channel-grid article,
	.gcs-delivery-grid article,
	.gcs-format-grid article:nth-child(1),
	.gcs-format-grid article:nth-child(2),
	.gcs-format-grid article:nth-child(4),
	.web-bento-1,
	.web-bento-2,
	.web-bento-4,
	.shop-delivery-1,
	.shop-delivery-2,
	.shop-delivery-4
) :is(h3, p, small, strong, b, span, em, a, svg) {
	color: var(--sf-ink) !important;
}

/* Dark and cobalt surfaces use a single high-contrast foreground. */
html[data-theme="dark"] :is(
	.web-bento-3,
	.shop-delivery-3,
	.gcs-format-grid article:nth-child(3),
	.gcs-material-board article:nth-child(2),
	.gcs-engine-output article:nth-child(3)
),
html[data-theme="dark"] :is(
	.web-bento-3,
	.shop-delivery-3,
	.gcs-format-grid article:nth-child(3),
	.gcs-material-board article:nth-child(2),
	.gcs-engine-output article:nth-child(3)
) :is(h3, p, small, strong, b, span, em, a, svg) {
	color: #fff !important;
}

html[data-theme="dark"] .simple-web-example-monitor > header strong {
	color: #fff !important;
}

html[data-theme="dark"] .simple-web-example-monitor > footer {
	color: var(--sf-ink) !important;
}

.customer-case-before-after > footer strong,
.sfh-reference-gateway,
.sfh-reference-gateway strong,
.sfh-glossary-link,
.sfh-glossary-link strong {
	color: #fff !important;
}

html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .footer-identity > span {
	color: #b9b9b2;
}