@charset "UTF-8";

/* Uses some reset rules from: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* https://css-tricks.com/revisiting-prefers-reduced-motion/ */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body.no-js .js-only {
  display: none !important;
}

[hidden] {
  display: none !important;
}

/*
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
https://www.tpgi.com/the-anatomy-of-visually-hidden/
*/
.visually-hidden:not(:focus, :active) {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box;
  text-size-adjust: none;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

a:not([class]) {
  color: currentcolor;
  text-decoration-skip-ink: auto;
}

img,
picture {
  /* Auto block size retains aspect ratio on images with width and height attributes */
  block-size: auto;
  display: block;
  max-inline-size: 100%;
}

svg {
  /* Do not remove `inline-size: 100%;` or it will collapse SVGs on Safari! */
  inline-size: 100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

:target {
  scroll-margin-block: 5ex;
}

/* Project-specific styles: */

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Serif"),
    url("/static/fonts/roboto-serif/RobotoSerif-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Serif"),
    url("/static/fonts/roboto-serif/RobotoSerif-Bold.ttf") format("truetype");
}

:root {
  --brand-orange: #ff5500;

  --error-color: #f00;
  --success-color: #0f0;

  --body-text-color: #000;
  --light-text-color: #a1a1a1;

  --layout-gap: 3rem;
  --element-gap: 2rem;

  --outline-max-width: 87.5rem;
  --outline-min-h-padding: 1.5rem;
  --outline-max-h-padding: 6.25rem;

  --section-border-height: 0.125rem;
  --section-border-color: #000;

  --banner-col-gap-min: 1.5rem;
  --banner-col-gap-max: 3.5rem;
  --banner-transition-time: 0.3s;

  /* --nav-* variables apply to hamburger menu and footer */
  --nav-bg-color: var(--brand-orange);
  --nav-text-color: #fff;

  --soft-bg-color: #f7f7f7;
  --soft-border-color: #efefef;

  --cta-bg-color: #000;
  --cta-text-color: #fff;
  --cta-outline-offset: 0.25rem;
  --cta-transition-time: 0.2s;
  --cta-transition-props: background-color, border-color, color;
  --cta-transition-func: ease-in-out;
}

body {
  color: var(--body-text-color);
  font-family: "Roboto Serif", serif;
  font-size: 1rem;
  line-height: 1.875;
  margin: 0;
  padding: 0;
}

@media screen and (prefers-reduced-motion: no-preference) {
  body {
    scroll-behavior: smooth;
  }
}

.skip-link {
  background-color: white;
  font-size: 1rem;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: 0.25em 0.75em;
  position: fixed;
  z-index: 1;
}

/* Note: `* + *` is called the "Lobotomized owl selector" */
:where(main section, .usp, .blog-article) > *:not(.visually-hidden) + * {
  margin-block-start: var(--element-gap);
}

section > *:first-child {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.15;
  overflow: hidden;
  text-wrap: balance;
  word-break: break-word;
}

h1 {
  font-size: clamp(3.5rem, 8vw, 6.25rem);
  margin-block-end: 4rem;
}

h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-block-end: 3rem;
}

h3 {
  font-size: 1.75rem;
  margin-block-end: 1.5rem;
}

section {
  position: relative;
}

p,
ul,
ol,
pre {
  margin: 0;
}

ul,
ol {
  padding-inline-start: 1.5em;
}

pre {
  background-color: var(--soft-bg-color);
  border: 0.0625rem solid var(--soft-border-color);
  overflow-x: auto;
  padding: 1rem;
  resize: both;
}

:not(pre) > code,
p > a {
  word-wrap: break-word;
}

i {
  font-style: normal;
}

a {
  color: currentColor;
}

:is(a.cta, form button[type="submit"]) {
  --bg-color: var(--cta-bg-color);
  --text-color: var(--cta-text-color);
  --border-color: transparent;

  background-color: var(--bg-color);
  border: 0.125rem solid var(--border-color);
  color: var(--text-color);
  display: inline-block;
  outline-offset: var(--cta-outline-offset);
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  transition-duration: var(--cta-transition-time);
  transition-property: var(--cta-transition-props);
  transition-timing-function: var(--cta-transition-func);
}

:is(a.cta, form button[type="submit"]):is(:hover, :active, :focus-visible) {
  --bg-color: var(--cta-text-color);
  --text-color: var(--cta-bg-color);
  --border-color: currentColor;
}

:not(p) + p.cta-wrapper {
  margin-block-start: var(--layout-gap);
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

form label {
  display: block;
  margin-block-end: 0.5rem;
}

form :is(input:not([type="checkbox"], [type="radio"]), textarea) {
  --border-color: var(--soft-border-color);

  background-color: var(--soft-bg-color);
  border: 0.0625rem solid var(--border-color);
  inline-size: 100%;
  padding: 1rem;
}

form
  :is(
    input:not([type="checkbox"], [type="radio"]),
    textarea
  )[aria-invalid="true"] {
  --border-color: var(--error-color);
}

form button[type="submit"] {
  padding-inline: 3.25rem;
}

form .form-status:empty,
form .hidden-inputs {
  /* Content display is needed to prevent row-gap for these elements */
  display: contents;
}

form .form-status {
  --border-color: currentColor;

  border: 0.0625rem dotted var(--border-color);
  padding: 1rem;
}

form .form-status:has(p.error-message) {
  --border-color: var(--error-color);
}

form .form-status:has(p.success-message) {
  --border-color: var(--success-color);
}

form .form-status > *:nth-child(2) {
  margin-block-start: 1.5rem;
}

form .form-status,
form .input-row {
  inline-size: 64ch;
  max-inline-size: 100%;
}

.page-outline {
  display: grid;
  grid-template-areas:
    "site-banner"
    "site-main"
    "site-footer";
  row-gap: var(--layout-gap);
}

.site-banner,
.site-content,
.site-footer {
  padding-inline: clamp(
    var(--outline-min-h-padding),
    3vw,
    var(--outline-max-h-padding)
  );
  position: relative;
}

.container--outline {
  inline-size: 100%;
  margin: 0 auto;
  max-inline-size: var(--outline-max-width);
}

.container--site-banner,
.container--content > section:not(:last-of-type) {
  border-block-end: var(--section-border-height) solid
    var(--section-border-color);
}

.nav-toggle,
.nav-icon-wrapper {
  display: none;
}

.nav-icon-wrapper {
  align-items: center;
  aspect-ratio: 8 / 5;
  block-size: 0.75em;
  justify-content: center;
  transform: translateY(-0.25rem);
}

.nav-icon {
  block-size: 100%;
  inline-size: 100%;
  position: relative;
  text-indent: -9999px;
  text-shadow: 0 0 0 gray;
}

.nav-icon__line {
  background-color: currentColor;
  block-size: 0.125rem;
  display: block;
  inline-size: 100%;
  inset-inline-start: 0;
  position: absolute;
  text-indent: 0;
  transition-duration: var(--banner-transition-time);
  transition-property: background-color, inset-block-start, opacity, transform;
  transition-timing-function: cubic-bezier(0.325, 1, 0.22, 1);
}

.nav-icon__line:nth-child(1) {
  inset-block-start: 0;
}

.nav-icon__line:nth-child(2) {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.nav-icon__line:nth-child(3) {
  inset-block-end: 0;
}

.site-banner {
  grid-area: site-banner;
  transition: all var(--banner-transition-time) cubic-bezier(0.325, 1, 0.22, 1);
  white-space: nowrap;
}

.site-banner a {
  text-decoration: none;
}

.container--site-banner {
  column-gap: var(--banner-col-gap-min);
  display: grid;
  grid-auto-columns: 0;
  grid-auto-rows: 0;
  padding-block: 1.5rem;
}

.site-header {
  font-size: clamp(1rem, 7vw, 1.5rem);
  grid-area: site-header;
}

.site-nav {
  font-size: clamp(1rem, 7vw, 1.25rem);
  grid-area: site-nav;
}

.site-nav > ul {
  column-gap: clamp(var(--banner-col-gap-min), 3vw, var(--banner-col-gap-max));
  list-style-type: "";
  padding: 0;
}

.site-content {
  grid-area: site-main;
}

.container--content {
  container-name: site-content;
  container-type: inline-size;
}

.container--content > .page-title {
  margin-block-start: 0;
}

.container--content > section {
  padding: var(--layout-gap) 0;
}

.container--content > .intro {
  font-size: clamp(1rem, 4vw, 1.25rem);
  padding-block-start: 0;
}

.site-footer {
  background-color: var(--nav-bg-color);
  background-image: url("/static/images/footer-logo.svg");
  background-position: bottom var(--layout-gap) center;
  background-repeat: no-repeat;
  background-size: 1524px 398px;
  color: var(--nav-text-color);
  grid-area: site-footer;
  padding-block: var(--layout-gap);
}

/* Adjust the position of the footer image once screen is smaller than the image itself */
@media screen and (width < 1524px) {
  .site-footer {
    background-position: bottom var(--layout-gap) left 15%;
  }
}

.container--footer {
  /* Image height is 25rem; spacing should clamp between 3rem and 15rem */
  padding-block-end: clamp(28rem, 80vw, 40rem);
}

.container--footer > .column-wrapper {
  column-gap: var(--banner-col-gap-max);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: var(--element-gap);
}

.container--footer > .column-wrapper > ul {
  flex: 1;
  list-style-type: "";
  padding: 0;
  white-space: nowrap;
}

.layout--home .jorijn-avatar {
  inline-size: max-content;
  margin-block: 4rem;
  margin-inline: auto;
}

.intro-scroll-wrapper {
  inset-block-end: 0.25rem;
  inset-inline-end: 0.75rem;
  position: absolute;
}

.intro-scroll {
  align-items: center;
  column-gap: 0.75rem;
  display: inline-flex;
  text-decoration: none;
}

.intro-scroll img {
  inline-size: 0.85em;
  transform: translateY(-2px);
}

.services__usps .usp-wrapper {
  display: grid;
  padding: 0;
  row-gap: clamp(var(--layout-gap), 8vw, 7.5rem);
}

.services__usps .usp {
  display: flex;
  flex-direction: column;
}

.services__usps .usp p:not(.cta-wrapper) {
  max-inline-size: 48ch;
}

.services__usps .usp .cta-wrapper {
  margin-block-start: auto;
  padding-block-start: var(--element-gap);
}

@container site-content (width >= 60rem) {
  .services__usps .usp-wrapper {
    column-gap: 9.5rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

.blog-previews {
  container-name: blog-previews;
  container-type: inline-size;
  list-style-type: "";
  padding: 0;
}

.blog-preview {
  align-items: center;
  border-block-end: 0.0625rem solid var(--section-border-color);
  column-gap: 2.5rem;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-areas:
    "article-date  .             article-extra"
    "article-title article-title article-title";
  grid-template-columns: max-content 1fr max-content;
  padding-block: 2.5rem;
  row-gap: 1.5rem;
}

.blog-preview time {
  grid-area: article-date;
}

@media (prefers-contrast: no-preference) {
  .blog-preview time {
    color: var(--light-text-color);
  }
}

.blog-preview a {
  grid-area: article-title;
  text-decoration: none;
  text-wrap: balance;
}

.blog-preview span {
  background-color: var(--nav-bg-color);
  block-size: max-content;
  color: var(--nav-text-color);
  grid-area: article-extra;
  inline-size: max-content;
  justify-self: end;
  padding: 0.25rem 0.75rem;
}

@container blog-previews (width >= 42rem) {
  .blog-preview {
    grid-template-areas: "article-date article-title article-extra";
  }
}

.customer-logo-wrapper {
  inline-size: 99svw;
  margin-inline-start: 50%;
  padding-inline: var(--outline-min-h-padding);
  transform: translate3d(-50%, 0, 0);
}

.customer-logos {
  align-items: center;
  column-gap: 8.5rem;
  display: flex;
  list-style-type: "";
  overflow-x: auto;
  padding: 1rem 0;
}

.customer-logo {
  max-inline-size: initial;
}

.customer-logo--logius {
  max-inline-size: 263px;
}

.customer-logo--nike {
  max-inline-size: 253px;
}

.customer-logo--politie {
  max-inline-size: 311px;
  transform: translateY(-8%);
}

.customer-logo--sanoma {
  max-inline-size: 381px;
}

.customer-logo--sbs {
  max-inline-size: 211px;
}

.customer-logo--schiphol {
  max-inline-size: 244px;
}

.customer-logo--uwv {
  max-inline-size: 151px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
  justify-content: center;
  list-style-type: "";
  padding: 0;
}

.pagination-item {
  border: 0.0625rem solid transparent;
}

.pagination-item > * {
  display: inline-block;
  padding: 0.25rem 0.75rem;
}

.pagination-item > a {
  color: currentColor;
  outline-offset: var(--cta-outline-offset);
  text-decoration: none;
}

.pagination-item:not(.pagination-item--number) {
  color: var(--cta-text-color);
}

.pagination-item:not(.pagination-item--number) > span {
  background-color: var(--light-text-color);
}

.pagination-item:not(.pagination-item--number) > a {
  background-color: var(--cta-bg-color);
}

.pagination-item--number:has(a[aria-current]) {
  border-block-end-color: currentColor;
}

@media (prefers-contrast: no-preference) {
  .pagination-item--number > a:not([aria-current]) {
    color: var(--light-text-color);
  }
}

/* Smaller layout with hamburger menu */
@media (max-width: calc(65rem - 1px)) {
  .nav-icon-wrapper {
    display: flex;
  }

  .container--site-banner {
    grid-template-areas: "site-header";
    grid-template-rows: max-content;
  }

  .site-header {
    align-items: center;
    column-gap: var(--banner-col-gap-min);
    display: flex;
  }

  .site-banner:not(:has(.nav-toggle:checked)) .site-nav {
    max-block-size: 1px;
    overflow: hidden;
  }

  .site-banner:has(.nav-toggle:checked) {
    background-color: var(--nav-bg-color);
    color: var(--nav-text-color);
    inline-size: 100%;
    min-block-size: 100svh;
  }

  .site-banner:has(.nav-toggle:checked) .nav-icon__line:nth-child(1) {
    inset-block-start: 50%;
    transform: rotate(-45deg);
  }

  .site-banner:has(.nav-toggle:checked) .nav-icon__line:nth-child(2) {
    opacity: 0;
  }

  .site-banner:has(.nav-toggle:checked) .nav-icon__line:nth-child(3) {
    inset-block-start: 50%;
    transform: rotate(45deg);
  }

  .site-banner:has(.nav-toggle:checked) .container--site-banner {
    border-block-end: none;
    grid-template-areas:
      "site-header"
      "."
      "site-nav";
    grid-template-rows: max-content 1fr max-content;
    min-block-size: 100%;
    row-gap: 0.75rem;
  }

  .site-banner:has(.nav-toggle:checked) .container--site-banner > * {
    inline-size: calc(100svw - 2 * var(--outline-min-h-padding));
  }

  .site-banner:has(.nav-toggle:checked) .site-header {
    border-block-end: var(--section-border-height) solid currentColor;
    padding-block-end: 1.5rem;
  }

  .site-banner:has(.nav-toggle:checked) .site-nav {
    font-size: clamp(1rem, 7vw, 3rem);
    max-block-size: none;
  }

  .site-banner:has(.nav-toggle:checked) .site-nav > ul {
    display: flex;
    flex-direction: column;
  }
}

/* Wider layout without hamburger menu */
@media (min-width: 65rem) {
  .page-outline {
    row-gap: 7.5rem;
  }

  .container--site-banner {
    align-items: center;
    grid-template-areas: "site-header . site-nav";
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: max-content;
  }

  .site-nav > ul {
    display: flex;
  }

  .container--content > section {
    padding-block: 7.5rem 5rem;
  }

  .layout--page .page-title,
  .container--content > section:not(.intro),
  .container--content > .intro > p:not(.intro-scroll-wrapper),
  .container--content > .intro > .jorijn-avatar {
    padding-inline: 12.5rem;
  }

  .layout--home .jorijn-avatar {
    margin-block: 5rem;
    margin-inline: 0;
  }

  .section--how-to-contact {
    column-gap: var(--banner-col-gap-max);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-inline: 0 !important;
  }

  .section--how-to-contact > * {
    flex: 1;
  }

  .section--how-to-contact :is(h2, section) {
    margin-block-start: 0;
  }

  .section--how-to-contact h3 {
    /* Increase line height to line up the vertical top of the H2 and H3 elements */
    line-height: 1.85;
  }
}