/* Monochrome Systems B.V. CSS Reset & Base Styles */

a,
abbr,
body,
div,
footer,
html,
h1,
h2,
h3,
li,
ol,
p,
section,
span,
ul {
  background: transparent;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
body {
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
ol,
ul {
  list-style: none;
}
a,
:focus {
  outline: none;
}
footer,
main,
section {
  display: block;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.nobr {
  white-space: nowrap;
}

/* CSS Custom Properties (Variables) */
:root {
  --cb-bg: 233, 234, 235;
  --cb-fill: 0, 0, 0;
  --cb-highlight: 12, 62, 69;
  --color-bg: rgba(var(--cb-bg), 1);
  --color-fill: rgba(var(--cb-fill), 0.84);
  --color-bevel: rgba(var(--cb-fill), 0.69);
  --color-subtle-highlight: rgba(var(--cb-highlight), 0.69);
  --color-faint: color-mix(in srgb, var(--color-bg), transparent 34%);
  --color-fill-light: #7ca9b8;
  --font-standard:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    "SF Mono", "Consolas", "Menlo", "Monaco", "Liberation Mono", "Courier New",
    monospace;
  --size-l: 3rem;
  --size-m: 1.5rem;
  --size-s: 1rem;
  --outerBreakpoint: 1920px;
  --innerBreakpoint: 1650px;
  --outerPad: min(7.5vw, 124px);
  --centerMargin: calc(50% - 4.3rem);
  --vertGapLarge: 11.5rem;
  --vertGap: 7.5rem;
  --innerPad: 5.25rem;
  --headerPadTop: 5.25rem;
  --headerPadBtm: 0rem;
  --headerHeight: calc(var(--headerPadTop) + var(--headerPadBtm));
  --mainCvGap: calc(var(--size-m) * 1.4);
  --cvGap: var(--mainCvGap);
  --cvSmallGap: calc(var(--mainCvGap) / 2);
  --linkLineSlide: cubic-bezier(0.57, 0, 0.12, 1);
  --linkLineSpeed: 0.21s;
  --slideTime: 0.39s;
  --headerBounce: cubic-bezier(0.12, 0.93, 0.42, 1.2);
  --plax: 0px;
  --enterDrift: 1.2em;
  --enterTiming: 0.48s;
  --enterBounce: cubic-bezier(0.42, 0, 0.21, 1);
  --dotSize: 12px;
}
html,
body {
  font-size: 16px;
  height: 100%;
}
body {
  background: var(--color-bg);
  color: var(--color-fill);
  font-family: var(--font-standard);
  font-weight: 400;
}
h1 {
  font-size: clamp(var(--size-l), 4.76vw, 78px);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: pretty;
}
h2 {
  font-family:
    Georgia,
    Times New Roman,
    Times,
    serif;
  font-size: var(--size-l);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}
h3 {
  font-weight: 700;
}
p,
h3 {
  font-size: var(--size-m);
}
p,
.list li {
  line-height: 1.4;
  text-wrap: pretty;
}
.list {
  margin-block-end: var(--size-m);
}
.list li {
  font-size: var(--size-s);
  position: relative;
  padding-inline-start: 1.5ch;
}
.list li::before {
  content: "•";
  color: currentColor;
  position: absolute;
  inset-inline-start: 0;
  font-size: var(--size-s);
  line-height: 1;
}
h3 {
  line-height: 1.2;
}
a {
  color: inherit;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
a:not(.noline):before {
  background: currentColor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform-origin: center left;
  transition: transform var(--linkLineSpeed) var(--linkLineSlide);
  width: 100%;
  will-change: transform;
  z-index: 10;
}

a:not(.noline):hover:before,
a:not(.noline).active:before {
  transform: scaleX(0);
  transform-origin: center right;
}
.wrap {
  margin: 0 auto;
  max-width: var(--innerBreakpoint);
  padding: 0 var(--outerPad);
}
.push {
  margin-inline-start: var(--centerMargin);
}
.pull {
  width: 75%;
}
[class*="stack"] {
  --stack-gap: 0.5em;
  display: flex;
  flex-wrap: nowrap;
}
.stack {
  flex-direction: column;
  gap: var(--stack-gap);
}
main {
  padding: var(--vertGap) 0 var(--vertGap) 0;
}
main .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--vertGap);
}
main .wrap > section:not(.cv-timeline) p:not(:last-child) {
  margin-block-end: 1em;
}
.drift {
  opacity: 0;
  position: relative;
  transition:
    left var(--enterTiming) var(--enterBounce),
    opacity var(--enterTiming) ease;
}
.drift.left {
  left: var(--enterDrift);
}
.drift.right {
  left: calc(var(--enterDrift) * -1);
}
.loaded .drift:not(.onscroll),
.loaded .drift.onscroll.shown,
.loaded .shown .drift.onscroll {
  opacity: 1;
  left: 0;
}
.loaded main .wrap > section:first-child {
  opacity: 1;
  top: 0;
}
.hero {
  margin: 0 auto;
  max-width: var(--outerBreakpoint);
  overflow: hidden;
  padding-block-start: var(--headerHeight);
  position: relative;
}
.hero:before {
  background: url(daniel_friman.webp) right 42% no-repeat;
  background-size: auto clamp(100%, 84vw, 30%);
  content: "";
  inset: 0 -2% 0 0;
  position: absolute;
  transform: translateY(var(--plax));
  transition:
    opacity 0.48s ease,
    right 0.48s ease;
  will-change: transform;
  z-index: 1;
}
.hero:after {
  --breakpointDelta: calc(var(--outerBreakpoint) - var(--innerBreakpoint));
  background: linear-gradient(
    to right,
    rgba(var(--cb-highlight), 0.55),
    rgba(var(--cb-highlight), 0.15)
  );
  bottom: 0;
  content: "";
  height: 2px;
  left: calc(
    var(--outerPad) +
      clamp(
        0px,
        calc((100% - var(--innerBreakpoint)) / 2),
        var(--breakpointDelta)
      )
  );
  position: absolute;
  right: 0;
  transition: opacity 0.48s ease;
  z-index: 2;
}
.hero h1 {
  padding: calc(var(--vertGapLarge) - var(--size-l)) 30% var(--vertGapLarge) 0;
  position: relative;
  z-index: 3;
}
body:not(.loaded) .hero:before {
  right: 0;
}
body:not(.loaded) .hero:before,
body:not(.loaded) .hero:after {
  opacity: 0;
}
.pull[data-section="specialty"] {
  max-width: 930px;
}
/* Full-width centred achievement callouts */
.callout {
  text-align: center;
  width: 100%;
}
.callout h2 {
  font-size: clamp(var(--size-l), 4vw, 68px);
  letter-spacing: -0.01em;
  opacity: 1;
}
/* Contact callout variant — smaller, softer */
.callout--contact {
  opacity: 0.84;
}
.contact-text {
  font-size: var(--size-m);
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 auto;
}
/* Left-aligned text for contact callout */
.contact-text-left {
  text-align: left;
}
/* Individual service blocks */
.service-block {
  border-top: 1px solid rgba(var(--cb-fill), 0.12);
  padding-block-start: calc(var(--vertGap) * 0.4);
}
.service-label {
  font-size: var(--size-m);
  font-weight: 700;
  margin-block-end: 0.5em;
}
.service-desc {
  font-size: var(--size-s);
  opacity: 0.6;
  margin-block-end: 1em;
}
.lede {
  font-size: clamp(var(--size-m), 2vw, 1.75rem);
  line-height: 1.5;
  max-width: 48ch;
}
.lightning {
  padding-block-start: 1em;
  padding-block-end: 1.25em;
}
footer {
  padding-block-end: var(--innerPad);
}
footer .wrap {
  align-items: baseline;
  display: flex;
  padding-block-start: 2em;
  position: relative;
}
footer .wrap:before {
  background: var(--color-fill);
  content: "";
  height: 1px;
  left: var(--outerPad);
  mix-blend-mode: overlay;
  position: absolute;
  right: var(--outerPad);
  top: 0;
}
footer p {
  font-size: var(--size-s);
  flex: 0;
  white-space: nowrap;
}
footer ul {
  display: flex;
  flex: 0;
  gap: 1.5em;
  justify-content: flex-end;
  white-space: nowrap;
}
.curtain {
  backdrop-filter: saturate(142%) blur(21px);
  background: color-mix(in srgb, var(--color-bg), transparent 48%);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.48s ease;
  z-index: 90;
}
.cv-intro {
  margin-block-end: var(--cvGap);
}
.cv {
  display: flex;
  flex-direction: column;
}
.cv .exp {
  align-items: baseline;
  display: flex;
  gap: var(--innerPad);
  width: 100%;
}
.cv .time {
  align-self: baseline;
  text-align: right;
  white-space: nowrap;
  min-width: calc(var(--centerMargin) - var(--innerPad));
}
.cv .time abbr:before {
  content: "20";
}
.cv .time abbr._90s:before {
  content: "19";
}
.cv .details,
.cv .title {
  position: relative;
}
.cv .role {
  padding-block-end: 0.5em;
}
.cv .role h3 {
  display: inline;
}
.cv .role .title {
  padding-inline-end: 0.125em;
}
.cv .role .company {
  white-space: nowrap;
}
.cv .role .company:before {
  content: "at";
  display: inline-block;
  font-weight: 400;
  padding-inline-end: 0.25em;
}
.cv .info p {
  font-size: var(--size-s);
  margin-block-end: 0;
  padding-block-end: var(--cvGap);
  position: relative;
}
.cv .info p + p {
  margin-block-start: 1em;
}
.cv > li:not(:last-child) .info p:before,
.cv .details:before {
  background: rgba(var(--cb-highlight), 0.45);
  content: "";
  height: 100%;
  left: calc((var(--innerPad) - 1px) / -2);
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 10;
}
.cv > li:last-child .details:before {
  height: 1.125em;
}
.cv > li:last-child .info p:last-child {
  padding-block-end: 0;
}
.cv .title:before {
  --dotCenter: calc(((var(--size-m) * 1.4 - var(--dotSize)) / 2));
  content: "▶"; /* Right-pointing triangle */
  color: rgba(var(--cb-highlight), 0.65);
  position: absolute;
  font-size: var(--dotSize);
  top: calc(var(--dotCenter) - var(--dotSize) * 0.1);
  left: calc((var(--innerPad) + var(--dotSize) - 5px) / -2);
  line-height: 1;
  z-index: 20;
}
.cv > li:first-child .details:before {
  height: calc(100% - 1em);
  top: 1em;
}
@media screen and (min-width: 1650px) {
  .hero h1 {
    padding-inline-end: 20%;
  }
}
@media screen and (width>1920px) {
  .hero {
    border-radius: 0 0 1em;
  }
  .hero:after {
    background: transparent;
    border-radius: 0 0 1em;
    bottom: 0;
    box-shadow:
      inset var(--color-bevel) -1px 0 0,
      inset var(--color-bevel) 0 -1px 0;
    height: auto;
    top: 0;
  }
}
@media screen and (max-width: 1023px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  main {
    section.push {
      margin-inline-start: 0;
    }
    section.pull {
      width: 100%;
    }
    .pull[data-section="specialty"] {
      max-width: none;
    }
    .cv-timeline {
      .cv .time {
        min-width: 120px;
        width: 120px;
      }
      .push {
        margin-inline-start: calc(120px + var(--innerPad));
      }
    }
    h2 {
      text-wrap: pretty;
    }
  }
}
@media screen and (width<768px) {
  :root {
    --size-l: 2.1rem;
    --size-m: 1.25rem;
  }
  main {
    .cv-timeline {
      margin-block-start: calc((var(--vertGap) * -1) + (var(--cvGap) * 1.75));
      .cv-intro {
        display: block;
        margin-inline-end: var(--centerMargin);
        margin-block-end: var(--cvGap);
        text-align: left;
        white-space: normal;
      }
      .exp {
        flex-direction: column;
        gap: 0.5em;
        margin-inline-start: 32px;
        width: auto;
        .details {
          order: 1;
          padding-inline-start: 18px;
          .role {
            padding-block-end: 0;
          }
        }
        .time {
          color: var(--color-fill-light);
          order: 2;
          padding-block-end: 1em;
          padding-inline-start: 18px;
          text-align: left;
        }
      }
      .info {
        margin-inline-start: 32px;
      }
      .info .info-wrap {
        padding-inline-start: 18px;
      }
      .push {
        margin-inline-start: 0;
      }
      .cv {
        .push {
          margin-inline-start: 0;
        }
        /* Hide the original two-part line pseudo-elements on mobile */
        li .details:before,
        li .info p:before {
          display: none;
        }
        /* Draw one continuous line on the li itself */
        li {
          position: relative;
        }
        li:not(:first-child):not(:last-child):before {
          background: var(--color-fill);
          content: "";
          mix-blend-mode: overlay;
          position: absolute;
          left: 13px;
          top: 0;
          bottom: 0;
          width: 2px;
          z-index: 10;
        }
        li:first-child:before {
          background: var(--color-fill);
          content: "";
          mix-blend-mode: overlay;
          position: absolute;
          left: 13px;
          top: 1em;
          bottom: 0;
          width: 2px;
          z-index: 10;
        }
        li:last-child:before {
          background: var(--color-fill);
          content: "";
          mix-blend-mode: overlay;
          position: absolute;
          left: 13px;
          top: 0;
          height: 1em;
          width: 2px;
          z-index: 10;
        }
        /* Arrow stays on .title */
        .title:before {
          left: calc(-19px - var(--dotSize) * 0.5 + 1px);
        }
      }
    }
  }
  /* Add more air between contact callout and CV timeline on narrow screens */
  .callout--contact {
    margin-block-end: 3rem;
  }
  footer {
    padding-block-end: calc(var(--innerPad) / 2);
    .wrap {
      flex-direction: column;
      gap: 1em;
    }
  }
}
@media screen and (width<=930px) {
  .hero:before {
    right: -7%;
  }
}
@media screen and (width<=840px) {
  .hero:before {
    right: -12%;
  }
}
@media screen and (width<768px) {
  :root {
    --headerPadTop: 3.4rem;
    --vertGapLarge: 7.5rem;
    --vertGap: 5.7rem;
  }
  .hero {
    min-height: 100lvh;
  }
  .hero .wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100lvh - var(--headerHeight));
  }
  .hero:before {
    right: -48%;
  }
  .hero:after {
    left: 0;
  }
  .hero h1 {
    margin-block-start: -1.2em;
    max-width: 240px;
    padding-block: 0;
    padding-inline-end: 0;
    position: relative;
  }
}
.big-name {
  font-size: 2rem;
  color: inherit;
  font-weight: 400;
  height: 0;
  left: 50%;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 0;
  overflow: visible;
  padding-top: 5rem;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 10;
}
@media screen and (width < 720px) {
  .big-name {
    font-size: 1.5rem;
    left: 50%;
    padding-top: 1.5rem;
    text-align: center;
    transform: translateX(-50%);
    max-width: min(90vw, 20em);
  }
  .big-name-sep {
    display: none;
  }
  .big-name-person {
    margin-top: 1em;
    display: block;
  }
}
a:not(.noline) {
  transition: color var(--linkLineSpeed) ease;
}
a:not(.noline):hover {
  color: var(--color-subtle-highlight);
}
/* Privacy statement in footer */
.privacy-statement {
  flex: 1 !important;
  opacity: 0.45;
  padding: 0 2em;
  text-align: center;
  white-space: normal !important;
}

/* ── Privacy policy page ─────────────────────────────────────────────────── */
body.privacy .hero-contain .hero:before {
  display: none;
}
body.privacy .big-name-sep {
  display: none;
}
body.privacy .big-name-person {
  display: none;
}
.privacy-wrapper {
  max-width: 68ch;
}
.privacy-wrapper h2 {
  font-family: var(--font-standard);
  font-size: var(--size-s);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-block-start: 2.5em;
  margin-block-end: 0.6em;
  opacity: 0.5;
  text-transform: uppercase;
}
.privacy-wrapper h2:first-child {
  margin-block-start: 0;
}
.privacy-wrapper h3 {
  font-size: var(--size-s);
  font-weight: 600;
  margin-block-start: 1.5em;
  margin-block-end: 0.4em;
  opacity: 0.7;
}
.privacy-wrapper strong {
  font-weight: 600;
  opacity: 0.7;
}
.privacy-wrapper p {
  font-size: var(--size-s);
  line-height: 1.7;
  margin-block-end: 0.75em;
}
.privacy-wrapper .list {
  margin-block-start: 0.25em;
  margin-block-end: 1.25em;
}
.privacy-wrapper .list li {
  line-height: 1.6;
}

.rights-columns {
  display: flex;
  gap: 2em;
  margin-block-start: 1.5em;
}

.right-column {
  flex: 1;
}

.right-item {
  margin-block-end: 1.8em;
}

.right-item h3 {
  font-size: var(--size-s);
  font-weight: 600;
  color: var(--color-fill-light);
  margin-block-end: 0.4em;
}

.right-item p {
  font-size: var(--size-s);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .rights-columns {
    flex-direction: column;
    gap: 0; /* Remove gap for narrow resolutions */
  }
  .right-column {
    margin-bottom: 0; /* Remove any bottom margin */
  }
}