/* Palette selected by Stina: Gray, Jet Stream, Chinese Black and Black.
   White and pale mixes provide space between the stronger color surfaces. */
:root {
	--brand-gray: #b4b9ba;
	--brand-jet: #baccd0;
	--brand-charcoal: #111111;
	--brand-black: #000000;
	--brand-paper: #f5f4f0;
	--brand-mist: #e9efef;
	--brand-muted: #3f494b;
	--ink: var(--brand-charcoal);
	--ink-deep: var(--brand-black);
	--black: var(--brand-black);
	--muted: var(--brand-muted);
	--slate: var(--brand-muted);
	--accent: var(--brand-jet);
	--accent-strong: var(--brand-charcoal);
	--accent-soft: var(--brand-mist);
	--aqua: var(--brand-jet);
	--blue: var(--brand-jet);
	--silver: var(--brand-gray);
	--cream: var(--brand-mist);
	--cream-soft: var(--brand-paper);
	--paper: var(--brand-paper);
	--line: #c7cfd0;
	--line-strong: #8b989b;
	--nav-ink: var(--brand-black);
	--nav-surface: rgba(245, 244, 240, 0.58);
	--button-ink: var(--brand-charcoal);
	--button-line: #11111140;
	--button-hover: var(--brand-jet);
}

::selection {
	background: var(--brand-jet);
	color: var(--brand-black);
}

/* A quiet paper-colored masthead, shared across both pages. */
.site-notice {
	background: var(--brand-paper);
	border-color: #11111126;
	color: var(--brand-charcoal);
}
.site-notice p {
	color: inherit;
}
@supports not (
	(backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
	:root {
		--nav-surface: rgba(245, 244, 240, 0.94);
	}
}

/* The opening statement and contact form repeat the main accent. */
main#top .apex-choice--statement.page-panel {
	color: var(--brand-charcoal);
	opacity: 0.98;
}
.apex-choice__description {
	color: var(--brand-muted);
}
.apex-choice--statement .apex-button {
	--button-hover-background: #fff;
	--button-hover-border: #fff;
}

/* Four related surfaces, in the same order on both pages. */
.service-grid .service-card:nth-child(1),
.service-page .area:nth-child(1) {
	background: var(--brand-jet) !important;
	border-top-color: var(--brand-jet) !important;
}
.service-grid .service-card:nth-child(2),
.service-page .area:nth-child(2) {
	background: var(--brand-gray) !important;
	border-top-color: var(--brand-gray) !important;
}
.service-grid .service-card:nth-child(3),
.service-page .area:nth-child(3) {
	background: var(--brand-mist) !important;
	border-top-color: var(--brand-mist) !important;
}
.service-grid .service-card:nth-child(4),
.service-page .area:nth-child(4) {
	background: var(--brand-charcoal) !important;
	border-top-color: var(--brand-charcoal) !important;
	color: #fff;
}
.service-grid .service-card:nth-child(4) :is(h2, p, span, li),
.service-page .area:nth-child(4) :is(h3, p, li, a, summary) {
	color: #fff !important;
}
.service-grid
	.service-card:nth-child(4)
	:is(.service-card__number, .service-card__cue, .service-card__arrow),
.service-page .area:nth-child(4) .number {
	color: var(--brand-jet) !important;
}
.service-grid .service-card:nth-child(4) .service-card__arrow,
.service-page .area:nth-child(4) .services li {
	border-color: #ffffff40;
}

/* Portfolio and service index are quieter, so the photographs stay prominent. */
main#top .selected-work.page-panel {
	background: var(--brand-paper) !important;
}
.selected-work--canva .selected-work__filter[aria-pressed="true"] {
	background: var(--brand-jet) !important;
	border-color: var(--brand-jet) !important;
}
.selected-work--canva .selected-work__filter:hover {
	background: var(--brand-mist) !important;
}
.service-index {
	background: var(--brand-mist) !important;
}
.team-story {
	background: #fff !important;
}
.faq__item[open] {
	background: var(--brand-paper);
}

/* Contact: a blue form and clean monochrome portraits with dark captions. */
.contact-layout,
.apex-contact .contact-layout {
	background: var(--brand-jet);
}
.contact-content > p,
.apex-contact .form-note {
	color: var(--brand-muted);
}
.contact-form input,
.contact-form textarea,
.apex-contact input,
.apex-contact textarea {
	background: #fffffff0;
	border-color: #7f8c8f;
	color: var(--brand-charcoal);
}
.contact-form .button,
.apex-contact .contact-form .apex-button {
	background: var(--brand-charcoal) !important;
	border-color: var(--brand-charcoal) !important;
	color: #fff !important;
}
.contact-form .button:hover,
.apex-contact .contact-form .apex-button:hover {
	background: #303536 !important;
	border-color: #303536 !important;
}
.person-panel--portrait .person-details {
	background: var(--brand-charcoal);
	color: #fff;
}
.person-panel--portrait .person-details h3 {
	color: var(--brand-jet);
}
.person-panel--portrait .person-details :is(p, a) {
	color: #fff;
}

/* Service page chapters share the homepage's color rhythm. */
.service-page > .page-intro {
	background: var(--brand-jet);
}
.service-page .section-nav a {
	border-color: #11111140;
}
.service-page .section-nav a:hover {
	background: #fff;
	border-color: #fff;
}
.service-page > #tjenester {
	background: #fff;
}
.service-page > #prosess {
	background: var(--brand-gray);
}
.service-page .way {
	border-left-color: var(--brand-jet);
}
.service-page .package:nth-child(2) {
	background: var(--brand-charcoal);
	border-color: var(--brand-charcoal);
	color: #fff;
}
.service-page .package:nth-child(2) :is(p, li) {
	color: #fff;
}
.service-page .package:nth-child(2) :is(.label, .price) {
	color: var(--brand-jet);
}
.service-page .package:nth-child(2) li {
	border-color: #ffffff40;
}
.service-page .package:nth-child(2) .button {
	background: var(--brand-jet);
	border-color: var(--brand-jet);
	color: var(--brand-black);
}
.service-page .package:nth-child(2) .button:hover {
	background: #fff;
	border-color: #fff;
}

/* The same dark finish ties the two pages together. */
body > footer.site-footer,
.service-page + footer {
	background: var(--brand-charcoal) !important;
	color: #fff !important;
	border-color: var(--brand-charcoal);
}
.site-footer :is(a, strong, address),
.service-page + footer a {
	color: #fff !important;
}
.site-footer :is(.site-footer__title, .site-footer__label, .site-footer__legal),
.service-page + footer .footer-inner > span {
	color: var(--brand-gray) !important;
}
.site-footer .site-footer__wordmark {
	color: var(--brand-jet) !important;
}
.site-footer .site-footer__legal {
	border-color: #ffffff26;
}
.site-footer a:hover,
.service-page + footer a:hover {
	color: var(--brand-jet) !important;
}