/* General */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
:root {
  --sans: 'Inter', 'Helvetica', 'Arial', sans-serif;
  font-size: 20px;
  --width: 60rem;
}
::selection {
  color: var(--color-background);
  background-color: var(--color-text);
}
.hidden {
  display: none;
}
html {
  font-family: var(--sans);
  color: var(--color-text);
  background: var(--color-background);
}
html, body {
  height: 100%;
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content {
    flex: 1;
}
img {
  width: 100%;
}
li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
strong, b {
  font-weight: 800;
}
button {
  all: unset;
	cursor: pointer;
}
button.primary {
  display: inline-block;
  line-height: 1;
  margin: 1rem auto;
  padding: .6rem 1rem;
  font-size: .9rem;
  border: 2px solid var(--color-text);
  color: var(--color-text);
  background-color: transparent;
  transition: all .3s ease;
}
button.primary:hover {
  color: var(--color-background);
  background-color: var(--color-text);
}
fieldset {
  border: 0;
  padding-top: 1rem;
}
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.checkbox-box {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--color-text);
  border-radius: 20%;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
input[type="checkbox"]:checked + .checkbox-box::before {
  content: '';
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--color-text);
  border-radius: 15%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0.2rem;
}
.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-template-columns: 1fr;
}
.grid .column {
  margin: 0;
}
.grid > .column {
  margin-bottom: var(--gutter);
}
.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}
hr {
  border-top: 2px solid var(--color-accent);
  border-bottom: none;
  border-left: none;
  border-right: none;
  width: 25%;
  margin: 1.5rem 0;
}
  
/* General typography */
article {
  width: 100%;
  max-width: var(--width);
  margin: 0 auto 5rem;
  padding: 0 2rem;
}
article h1, article h2, article h3, article h4 {
  font-weight: 800;
}
article h1 {
  display: inline-block;
  position: relative;
  font-size: 2rem;
  margin: 2rem 0 1rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  box-decoration-break: clone;
}
article .subtitle {
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.metainfo + .text h1:first-child, .metainfo + .text h2:first-child, .metainfo + .text h3:first-child {
  margin-top: 0;
}
article h2 {
  font-size: 1.6rem;
  margin: 2rem 0 1rem;
  line-height: 1;
  letter-spacing: -0.005em;
}
article h3 {
  font-size: 1.3rem;
  margin: 1.6rem 0 .5rem;
  line-height: 1.2;
}
article h4 {
  font-size: 1rem;
  margin-top: 1rem;
}
.perex {
  font-size: 1.3rem;
  font-weight: 400;
  max-width: 50rem;
  margin-bottom: 3rem;
}
article p, article ul, article ol {
  line-height: 1.2;
  margin-bottom: .75rem;
}
article p a, .hometext p a {
  border-bottom: 2px solid var(--color-accent);
  transition: all .3s ease;
}
article p a:hover, .hometext p a:hover {
  background-color: var(--color-accent);
  padding-bottom: .1rem;
}
article ul li, article ol li {
  margin-left: 1.5em;
  margin-bottom: .2em;
}
article ul li::before {
  position: absolute;
  margin-left: -1.5rem;
  display: inline-block;
  width: 1.5em;
  content: '→';
  color: var(--color-accent);
}
article ol {
  counter-reset: item;
}
article ol li::before {
  display: inline-block;
  color: var(--color-accent);
  content: counter(item) " ";
  counter-increment: item;
  width: 1.5em;
  margin-left: -1.5em;
}
article figure {
  margin: 1rem 0;
}
.breadcrumb {
  padding: .5rem 0;
  background-color: var(--color-background);
  margin-bottom: 0.3rem;
  width: 100%;
  clear: both;
  float: left;
}
.breadcrumb li {
  float: left;
  font-size: .8rem;
  color: var(--color-accent);
  margin: 0;
}
.breadcrumb li::before {
  all: unset;
}
.breadcrumb li::before {
  content: '←';
  padding: 0 .3em;
}
.breadcrumb li:first-child::before {
  padding-left: 0;
}
.breadcrumb + * {
  margin-top: 0;
}

/* Menu */
header {
  height: 4rem;
}
.logo {
  position: fixed;
  margin-left: 2rem;
  margin-top: 1.5rem;
  width: 14.5rem;
  z-index: 10;
}
.logo #wordmark, .logo svg:hover #wordmark {
  fill: var(--color-text);
  transition: all .3s ease;
  transform: translateX(0);
  fill-opacity: 1;
}
.logo #plus, .logo svg:hover #plus  {
  fill: var(--color-accent);
  transition: transform .3s ease;
  transform-origin: 412px 42px;
  transform: translateX(0);
}
.logo.hide #wordmark {
  transform: translateX(-19rem);
  fill-opacity: 0;
}
.logo.hide #plus {
  transform: translateX(-19rem);
}
.logo:not(.hide) svg:hover #plus {
  transform: rotate(90deg);
}
.menu {
  position: relative;
  z-index: 3;
}
.menu input {
  display: none;
}
.menu label {
  display: inline-block;
  position: fixed;
  right: 0;
  top: 0;
  background-color: transparent;
  width: 5rem;
  height: 5rem;
  z-index: 3;
  cursor: pointer;
}
.menu .hamburger-lines {
  box-sizing: border-box;
  height: 5rem;
  width: 5rem;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.85rem 1.75rem;
  z-index: 2;
  background-color: var(--color-accent);
}
header nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 40rem;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 90%;
  background-color: var(--color-accent);
  padding: 2rem 3rem;
  transform: translateX(100%);
  transition: transform .3s ease;
}
header nav a, header nav li {
  float: left;
  clear: both;
  font-size: 2rem;
  margin-bottom: .5em;
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  box-decoration-break: clone;
  transition: all .3s ease;
}
header nav a:hover, header nav a.active {
  text-decoration-color: #fff;
}
.menu .hamburger-lines .line {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text);
}
.menu .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
.menu .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}
.menu .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
#menubutton:checked ~ .hamburger-lines .line1 {
  transform: translateX(8px) translateY(0px) rotate(45deg);
}
#menubutton:checked ~ .hamburger-lines .line2 {
  transform: scaleX(0);
}
#menubutton:checked ~ .hamburger-lines .line3 {
  transform: translateX(8px) translateY(-3px) rotate(-45deg);
}
#menubutton:checked ~ nav {
  transform: translateX(0);
}
.languages li {
  margin-bottom: 0;
  text-transform: capitalize;
}
.languages svg {
  width: 1.5rem;
  fill: var(--color-text);
  margin: 1rem 0 .6rem;
}

/* Homepage */
.sublogo {
  padding-left: 2rem;
  font-weight: 800;
  font-size: 2.03rem;
  margin-top: -.7rem;
}
.hero {
  position: relative;
  top: 0;
  min-height: 80vh;
}
.mainimage {
  position: fixed;
  top: 4rem;
  right: 4rem;
  width: 60vw;
  max-width: calc(100% - 28rem);
  z-index: 0;
}
.hero .mainimage img.imghover {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.mainimage:hover img.imghover {
  opacity: 1;
}
.hometext {
  position: absolute;
  bottom: 0;
  font-size: 1.2rem;
  margin-bottom: 7rem;
  max-width: 21rem;
  line-height: 1.3;
  margin-left: 2rem;
}
.hometext p {
  margin-bottom: .8em;
}
.hometext svg {
  width: 1.5rem;
  fill: var(--color-accent);
  transform: translateY(.4rem);
  margin-right: .5rem;
  transition: transform .3s ease;
}
.hometextplus {
  display: inline-block;
  position: absolute;
  right: 0;
  margin-top: 1rem;
  text-transform: uppercase;
  color: var(--color-accent);
  letter-spacing: .05em;
  font-size: .9rem;
}
.hometextplus:hover > svg {
  transform: translateY(.4rem) rotate(90deg);
}

/* Services – homepage */
.services {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
  padding: 10rem 2rem 4rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.service {
  width: 10rem;
  position: relative;
}
.bubble {
  display: inline-block;
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: calc( 50% + .6rem);
  max-width: 100vw;
  width: 20rem;
  font-size: .8rem;
  background-color: var(--color-accent);
  color: var(--color-text);
  padding: 1rem;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 1;
}
.bubble.left {
  left: unset;
  right: 0;
}
.service:hover > .bubble {
  opacity: 1;
}
.service .tileimg {
  position: relative;
  width: 100%;
  height: 10rem;
  margin-bottom: .7rem;
  object-fit: cover;
}
.service .tileimg .tilebutton {
  position: absolute;
  bottom: 12.5%;
  right: 12.5%;
  width: 25%;
  height: 25%;
  background-color: var(--color-accent);
  transition: all .3s ease;
}
.service .tilebutton svg {
  position: absolute;
  width: 1.5rem;
  fill: var(--color-text);
  right: calc(50% - .75rem);
  bottom: calc(50% - .75rem);
  transition: transform .3s ease;
}
.service:hover > .tileimg .tilebutton {
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
}
.service:hover > .tileimg .tilebutton svg {
  transform: rotate(90deg);
}
.service h3 {
  text-align: center;
  font-weight: 400;
  font-size: 1rem;
}
.services-button {
  text-align: center;
  padding-bottom: 4rem;
  background-color: var(--color-background);
}

/* Services – subpage */
.serviceblock {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 3rem 0;
  gap: 2rem;
}
.blockimg {
  position: relative;
  width: 10rem;
  flex-shrink: 0;
  font-size: 0;
}
.blocktxt {
  width: calc(100% - 12rem);
}
.blocktxt h3 {
  margin-top: 0;
}
.blockimg .tilebutton {
  position: absolute;
  bottom: 12.5%;
  right: 12.5%;
  width: 25%;
  height: 25%;
  background-color: var(--color-accent);
  transition: all .3s ease;
}
.blockimg .tilebutton svg {
  position: absolute;
  width: 1.5rem;
  fill: var(--color-text);
  right: calc(50% - .75rem);
  bottom: calc(50% - .75rem);
  transition: transform .3s ease;
}
.serviceblock:hover > .blockimg .tilebutton {
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
}
.serviceblock:hover > .blockimg .tilebutton svg {
  transform: rotate(90deg);
}

/* Team */
.team {
  background-color: var(--lightest-color-text);
  padding: 2rem 2rem 4rem;
}
.teammembers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.teammember .tileimg {
  position: relative;
  width: 100%;
  transition: transform .3s ease;
  border-radius: 50%;
  background-color: var(--color-background);
  font-size: 0;
  line-height: 0;
}
.teammember .tileimg img {
  border-radius: 50%;
}
.teammember .tileimg img.imghover {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.teammember:hover .tileimg {
  transform: scale(1.05);
}
.teammember:hover .tileimg img.imghover {
  opacity: 1;
}
.teammembers.main {
  gap: 2.5rem 0;
  margin-top: 2rem;
}
.teammembers.regular {
  margin-top: 3rem;
  gap: 2rem;
}
.teammembers.main .teammember {
  width: 15rem;
}
.teammembers.main .tileimg {
  margin-bottom: 1.2rem;
  z-index: 2;
}
.teammembers.regular .tileimg {
  margin-bottom: .6rem;
  height: 7.5rem;
  background-color: #fff;
  border-radius: 50%;
}
.teammembers.regular .teammember {
  width: 7.5rem;
}
.teamplus {
  width: 3rem;
  height: 3rem;
  margin-top: 6rem;
}
.teamplus svg {
  fill: var(--color-accent);
}
.teammember {
  text-align: center;
}
.teammember h3 {
  display: inline;
  font-weight: 400;
  font-size: 1.4rem;
  border-bottom: 2px solid var(--color-accent);
}
.teammembers.regular h3 {
  font-size: 1.1rem;
}
.teammember p {
  margin-top: .5rem;
  font-size: .9rem;
}
.profile {
  display: flex;
  flex-wrap: wrap;
  padding-top: 2rem;
  gap: 2rem;
}
.profile .profileimg img {
  object-fit: cover;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile .profiletext h1 {
  margin-top: 0;
}
.profile .profiletext .breadcrumb {
  padding-top: 0;
}

/* Contact */
.contact {
  --gutter: 1rem;
  padding: 1rem 0;
}
.team + article {
  padding: 3rem;
}
.contact h4 {
  margin: 0;
}
.contact p {
  font-size: 1rem;
  margin: 0 0 .6rem 0;
}
.social li {
  float: left;
  margin: 0 .6rem 0 0;
}
.social li::before {
  display: none;
}
.social li a {
  box-sizing: border-box;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: bold;
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--color-text);
  text-align: center;
  padding-top: .5rem;
  border-radius: 50%;
  color: #fff;
}
.social li.known a {
  font-size: 0rem;
  background-color: transparent !important;
  padding-top: 0;
  border-radius: 50%;
}
.social li a svg {
  fill: #fff;
  height: 1.5rem;
  width: 1.5rem;
  margin-top: -0.3rem;
}
.social li.known a svg {
  fill: var(--color-text);
  height: 100%;
  width: 100%;
  margin-top: 0;
}

/* Blog */
.articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 2rem;
  gap: 1.5rem;
  background-color: var(--light-color-accent);
}
.articles a {
  display: block;
  background-color: var(--color-background);
  width: 16rem;
}
.articles a .tileimg {
  width: 100%;
  height: 9rem;
  overflow: hidden;
}
.articles a img {
  transition: transform .3s ease;
}
.articles a:hover img {
  transform: scale(1.1);
}
.articles a .tiletxt {
  padding: 1rem 1.5rem 1.5rem;
  font-size: 0.8rem;
}
.articles a h2 {
  font-size: 1.1rem;
  line-height: 1.1;
}
.articles a .tilemetainfo {
  padding: .3rem 0 .8rem;
  font-size: .7rem;
  color: var(--color-accent);
}
.articles a .tilemetainfo .author {
  opacity: 0;
  letter-spacing: -1em;
  transition: all 0.3s ease;
}
.articles a:hover .tilemetainfo .author  {
  letter-spacing: 0em;
  opacity: 1;
}
.tags {
  margin-bottom: 2rem;
  line-height: 1.6rem;
}
.tags li::before {
  display: none;
}
.tags li {
  display: inline-block;
  margin: 0;
}
.tags li a {
  padding: .2rem .8rem;
  background-color: var(--color-accent);
  color: var(--color-text);
  border-radius: 1rem;
  font-size: .8rem;
  transition: all 0.3s ease;
}
.tags li a.active, .tags li a:hover {
  color: var(--color-background);
  background-color: var(--color-text);
}
article + .articles {
  margin-top: -3rem;
}
article .heroimage {
  margin-bottom: 2rem;
}
.article-text {
  display: flex;
  gap: 2rem;
  }
.article-text .metainfo {
  white-space: nowrap;
  margin-bottom: 1rem;
  min-width: 8rem;
  font-size: .8rem;
}
.article-text .text {
  max-width: 40rem;
}
.pagination {
  width: 100%;
  padding-bottom: 2rem;
  text-align: center;
  background-color: var(--light-color-accent);
}
.newer::before {
    content: '← ';
}
.older::after {
    content: ' →';
}
/* Contact form */
.contactform {
  display: inline-block;
  width: 100%;
  padding: 2rem;
  background-color: var(--light-color-accent);
}
.website, .twitter { /* honeypots */
  position: absolute;
  left: -9999px;
}
.contactform h2 {
  max-width: calc( var(--width) - 4rem);
  margin: 0 auto 1.4rem;
}
.contactform form {
  max-width: calc( var(--width) - 4rem);
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
}
.field {
  text-align: left;
}
.field label {
  display: none;
}
.field input::placeholder, textarea::placeholder {
  color: var(--color-text);
  font-style: normal;
}
.field input:focus::placeholder, textarea:focus::placeholder {
  opacity: 0.2;
}
.field input, .field textarea {
  all: unset;
  box-sizing: border-box;
  float: left;
  width: 100%;
}
.field input, .field textarea {
  background-color: var(--color-background);
  border: 2px solid transparent;
  padding: .4rem .6rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.2;
  margin: .5rem 0;
}
.field input:focus, .field textarea:focus{
  border: 2px solid var(--color-accent);
}
.field input {
  height: 2.5rem;
}
.field textarea {
  resize: vertical;
  height: 7rem;
  min-height: 2.5rem;
}
.field .alert.error {
  font-size: 1rem;
  line-height: 1;
  margin: 0 .6rem 1rem;
  color: red;
}
.field ~ button {
  margin-top: 1rem;
}
.gdpr {
  font-size: 0.8rem;
  width: 100%;
  float: left;
  margin: 1rem 0 .5rem;
  line-height: 1.1;
}
.gdpr p a {
  text-decoration: underline;
}
.alert {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 2rem
}
/* Footer */
footer {
  background-color: var(--color-accent);
  padding: 2rem 2rem 0;
}
footer .grid, .copyright {
  --gutter: 2rem;
}
footer svg {
  width: 14.5rem;
  fill: var(--color-text);
}
footer svg #plus {
  fill: var(--color-background);
}
footer .grid .column ul li {
  font-size: .9rem;
  padding-bottom: .3rem;
}
.copyright {
  background-color: var(--color-accent);
  color: var(--color-text);
  padding: 1rem 2rem 0;
  font-size: .8rem;
}

/* Cookie consent */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 100%;
  max-width: 40rem;
  background: var(--light-color-accent);
  color: var(--color-text);
  padding: 2rem;
  text-align: center;
  z-index: 100;
}
.cookie-banner p {
  font-size: .8rem;
}
.cookie-banner p.small {
  margin-top: .5rem
}
.cookie-banner p.small a {
  font-size: .7rem;
  text-decoration: underline;
}
.cookie-banner button {
  line-height: 1;
  margin: .5rem .5rem 0 0;
  padding: .6rem 1rem;
  font-size: .8rem;
  border: 2px solid var(--color-text);
  transition: all .3s ease;
  cursor: pointer;
}
.cookie-banner label + button {
  margin-top: 1rem;
}
.cookie-banner button:hover {
  color: var(--color-text);
  background-color: var(--color-accent);
}
.accept-btn {
  color: var(--color-background);
  background-color: var(--color-text);
}
.accept-btn:hover {
}
.accept-btn:disabled,
.accept-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.decline-btn {
  color: var(--color-text);
  background-color: transparent;
}
.cookie-banner p + label {
  margin-top: 1rem;
}
.cookie-banner label {
  font-size: .8rem;
  padding-left: 35%;
}
/* Cookies page */
.cookies form {
  padding-top: 1rem;
}
.cookies form label {
  padding-bottom: .6rem;
}

/* Responsivity */
@media screen and (min-width: 40rem) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }
  .autogrid {
    grid-gap: var(--gutter);
  }
}

@media screen and (max-width: 680px) {
  .team { text-align: center; }
  .teammembers.main { flex-direction: column; gap: 0; align-items: center; }
  .teammembers.main .teamplus { margin: .6rem auto 1rem;  }
  .blocktxt { width: 100%; }
  .bubble { display: none; }
  .article-text { display: block; }
  .articles a { width: 14rem; }
  .articles a .tileimg { height: 7,875rem; }
  .cookie-banner {max-width: 100%; right: 0; bottom: 0;}
}
@media screen and (max-width: 1000px){
  :root { font-size: 18px; }
  .hero { display: flex; flex-direction: column-reverse; padding: 2rem; gap: 1rem; flex-wrap: wrap; min-height: auto; }
  .mainimage { all: unset; width: 100%; max-width: 35rem; }
  .hometext { all: unset; width: 100%; max-width: 25rem; }
  .hometextplus { position: relative; }
  .services { padding: 2rem; }
  .menu {z-index: 100; }
  header nav { padding: 2rem 4rem 2rem 2rem; }
  header nav a {font-size: 1.2rem; }
  .logo.hide #plus { transform: translateX(-21rem); }
}

@media screen and (max-width: 480px) {
  .logo { width: 11rem; }
  .sublogo { font-size: 1.54rem; padding-left: 2rem; margin-top: -1.3rem; }
  .articles { display: block; }
  .articles a { width: 100%; margin-bottom: 2rem; }
  
}