/* 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, .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, .94); }
}

/* The opening statement and contact form repeat the main accent. */
main#top .apex-choice--statement.page-panel {
  background: var(--brand-jet) !important;
  color: var(--brand-charcoal);
}
.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; }