html,
body {
  background-color: var(--bg-clr);
}

body,
main,
.overlay {
  display: grid;
  grid-template-columns: var(--gs-xl);
  gap: var(--gap);
  color: var(--ft-clr);
}
main > section,
.overlay {
  margin: 0 var(--gap);
}
nav,
main {
  grid-column: 1/-1;
  grid-row: 1 / 2;
}
main > section {
  grid-column: 3/-1;
  background-color: var(--bg-clr);
  position: relative;
}

section + section {
  padding: clamp(80px, 10vw, 99999rem) 0;
}

main {
  overflow-x: clip;
}

/* ------------
Navigation
------------ */
nav {
  z-index: 98;
  user-select: none;
  pointer-events: none;
}
nav ul {
  padding: 0;
  top: 0;
  left: var(--gap);
  position: sticky;
  padding-top: clamp(60px, 8.25vw, 9999rem) !important;
  list-style: none;
  pointer-events: all;
  display: inline-block;
}
nav li + li {
  margin-top: 0.5em;
}
nav li a {
  color: var(--ft-clr-50);
}
nav li.active a {
  color: var(--ft-clr);
}

/* ------------
Sections
------------ */

section#background {
  grid-column: 1 / -1;
  z-index: 99;
}
section#background::before,
section#background::after {
  --position: calc(-6 * var(--gap));
  --gradient: var(--bg-clr) 2%, var(--bg-clr-0) 100%;

  display: block;
  content: "";
  position: absolute;
  padding: calc(
    var(--gap) * 3
  ); /* Revidera när typsättning och layout är klar. */
  left: 0;
  right: 0;
}
section#background::before {
  background: linear-gradient(to top, var(--gradient));
  top: var(--position);
}
section#background::after {
  background: linear-gradient(to bottom, var(--gradient));
  bottom: var(--position);
}
#background .message > span {
  color: var(--ft-clr-50);
}

/* -----------------------------------
  Section Intro
----------------------------------- */
#available {
  padding-top: clamp(60px, 8.25vw, 9999rem) !important;
}
.intro-content,
.intro-buttons {
  margin-top: clamp(3rem, calc(var(--gap) * 3.5), 100vw);
}
.intro-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.intro-buttons > a {
  border: 1px solid var(--ft-clr);
  border-radius: 999rem;
  padding: 0.5em 1em;
}
.intro-buttons > a:first-child {
  background-color: var(--ft-clr);
  color: var(--bg-clr);
}
.intro-options {
  display: flex;
  gap: calc(var(--gap) * 0.5);
  margin-bottom: calc(var(--gap) * 1.5);
  position: relative;
  user-select: none;
  scrollbar-width: none;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
.intro-options .option {
  font-size: var(--ft-xs);
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ft-clr-50);
  padding: 0.5rem;
}
.intro-options .option:first-of-type {
  padding-left: 0;
}
.intro-options .option.active {
  color: var(--ft-clr);
}
.intro-options .option.active::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  margin-top: 0.66em;
  border-bottom: 1px solid var(--ft-clr);
}
.intro-content .message:not(.active) {
  display: none;
}
.intro-content .message {
  font-size: var(--ft-xl);
  line-height: var(--ft-m-lh);
  letter-spacing: var(--ft-m-ls);
  font-weight: 500;
}
.scroll-mask {
  width: 80px;
  height: 44px;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.scroll-mask.right {
  right: -1px;
  background: linear-gradient(to left, var(--bg-clr) 2%, var(--bg-clr-0) 100%);
}
.scroll-mask.left {
  left: -1px;
  background: linear-gradient(to right, var(--bg-clr) 2%, var(--bg-clr-0) 100%);
}
.scroll-mask.scrolled.right,
.scroll-mask.scrolled.left {
  opacity: 1;
}

/* ------------
Philosophy section
------------ */
#philosophy {
  display: grid;
  grid-template-columns: var(--gs-l);
  gap: calc(var(--gap) * 2.5) var(--gap);
}

#philosophy .title {
  font-size: var(--ft-l);
  line-height: var(--ft-m-lh);
  letter-spacing: var(--ft-m-ls);
  grid-column: 2/-1;
  font-weight: 500;
}

#philosophy .message {
  font-size: var(--ft-m);
  line-height: var(--ft-s-lh);
  letter-spacing: var(--ft-m-ls);
  grid-column: 3/-1;
}

/* ------------
Background section
------------ */
#background {
  display: grid;
  gap: var(--gap);
  grid-template-columns: var(--gs-xl);
}

#background .title {
  font-size: var(--ft-l);
  line-height: var(--ft-m-lh);
  letter-spacing: var(--ft-m-ls);
  font-weight: 500;
  padding: calc(var(--gap) * 1.75) 0;
  grid-column: 1/-1;
}

#background .message {
  font-size: var(--ft-xs);
  line-height: var(--ft-s-lh);
  letter-spacing: var(--ft-m-ls);
  grid-column: 5/-1;
}

/* ------------
Experiences section
------------ */

#experiences {
  display: grid;
  grid-template-columns: var(--gs-l);
  gap: calc(var(--gap) * 6);
}

#experiences .title {
  font-size: var(--ft-l);
  line-height: var(--ft-m-lh);
  letter-spacing: var(--ft-m-ls);
  padding: calc(var(--gap) * 1.75) 0;
  grid-column: 1/-1;
}
.item-experience {
  display: grid;
  gap: calc(var(--gap) * 1.5);
  grid-column: 1/-3;
}
.item-experience p + p {
  margin-top: 0;
}
.exp-company,
.desc-company {
  color: var(--ft-clr-50);
}
.title-company {
  font-size: var(--ft-xxl);
  line-height: var(--ft-l-lh);
  letter-spacing: var(--ft-m-ls);
  font-weight: 500;
}
.time-company > span {
  color: var(--ft-clr-50);
}

/* ------------
References
------------ */
#references {
  display: grid;
  grid-template-columns: var(--gs-l);
  gap: calc(var(--gap) * 6) var(--gap);
}
.item-references {
  grid-column: span 2;
}
#references .title,
.quote-reference {
  font-size: var(--ft-l);
  line-height: var(--ft-m-lh);
  letter-spacing: var(--ft-m-ls);
}
#references .title {
  grid-column: 4/-1;
}
.quote-reference {
  font-weight: 500;
}
.author-reference {
  margin-top: 0.75em;
}
.author-reference > span {
  color: var(--ft-clr-50);
}

/* ------------
Contact section
------------ */
#contact {
  display: grid;
  gap: calc(var(--gap) * 6);
  grid-column: 3 / -1;
}
#contact .title {
  font-size: var(--ft-xl);
  line-height: var(--ft-m-lh);
  letter-spacing: var(--ft-m-ls);
  font-weight: 500;
}
#contact .info {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}
/* ------------
Overlay
------------ */
.overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}
.overlay > div {
  display: flex;
  position: relative;
  justify-content: space-between;
  background-color: var(--hl-clr-05);
}
.overlay > div span {
  display: block;
  width: 1px;
  height: 100%;
  border-left: 1px solid var(--hl-clr-20);
}

/* ------------
Work section
------------ */
#work {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr 1fr;
}
.skeleton-img,
.case-img_wrapper {
  aspect-ratio: 16/9;
  overflow: hidden;
  width: 100%;
}
.skeleton-img,
.skeleton-info p {
  border-radius: clamp(0.5rem, 0.5vw, 100vh);
  background-color: var(--ft-clr-15);
}
.skeleton-info {
  justify-items: end;
}
.skeleton-info > * {
  width: 100%;
}
.case-img_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: clamp(0.25rem, 0.5vw, 100vh);
}
.case-info,
.skeleton-info {
  margin-top: var(--gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 var(--gap);
}
.case-info .customer,
.skeleton-info .customer {
  margin-top: 0.25em;
}
.case-info .customer {
  color: var(--ft-clr-50);
}
.skeleton-info p {
  margin: 0;
  color: #00000000;
}
.case-info .project-type {
  text-align: right;
}

/* PROJECT MODAL */
body.project-modal-open {
  overflow: hidden;
}
body.project-modal-open #project-modal {
  position: fixed;
  inset: 0;
  display: grid;
  z-index: 100;
  overflow: auto;
  user-select: auto;
  pointer-events: all;
  opacity: 1;
}
#project-modal {
  inset: 0;
  opacity: 0;
  position: fixed;
  user-select: none;
  pointer-events: none;
  background-color: var(--bg-clr);
  transition: opacity 0.3s ease;
  padding: 0 var(--gap);
  padding-top: clamp(60px, 5vw, 9999rem) !important;
}
.modal-content {
  display: grid;
  grid-column: 3/-1;
  gap: var(--gap);
  padding-bottom: var(--gap);
}
.modal-content > p {
  font-size: var(--ft-m);
  line-height: var(--ft-s-lh);
  letter-spacing: var(--ft-m-ls);
}
.modal-content > div {
  display: flex;
  flex-direction: column;
  margin-bottom: calc(var(--gap) * 12);
}
.modal-content > div .modal-heading {
  font-size: var(--ft-xl);
  line-height: var(--ft-s-lh);
  letter-spacing: var(--ft-m-ls);
  font-weight: 500;
}
.modal-content > div .modal-customer {
  font-size: var(--ft-m);
  line-height: var(--ft-s-lh);
  letter-spacing: var(--ft-m-ls);
  margin-top: 0.25em;
}
.modal-close {
  position: fixed;
  top: var(--gap);
  left: var(--gap);
  padding: 1em;
  aspect-ratio: 1;
  background-color: var(--bg-clr);
  border-radius: 99999rem;
  border: 1px solid var(--ft-clr);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal-close:before,
.modal-close:after {
  display: block;
  content: "";
  height: 1px;
  width: 1rem;
  background-color: var(--ft-clr);
  transition: transform 0.3s ease;
}
.modal-close:before {
  transform: translateY(-4px);
}
.modal-close:after {
  transform: rotate(5px);
}
.project-modal-open .modal-close:before {
  transform: translateY(1px) rotate(-45deg);
}
.project-modal-open .modal-close:after {
  transform: rotate(45deg);
}

span:has(.load-more) {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--gap) * 2);
  grid-column: 1/-1;
}
.load-more {
  font-size: var(--ft-s);
  border: 1px solid var(--ft-clr);
  border-radius: 999rem;
  padding: 0.5em 1.25em;
  cursor: pointer;
}

.illustration.one {
  left: 30.4%;
  bottom: 2.5%;
  width: clamp(144px, 10vw, 99999rem);
  height: auto;
  z-index: 4;
}
.illustration.two,
.illustration.three {
  right: 0;
  bottom: clamp(80px, 8vw, 99999rem);
}
.illustration.two {
  width: auto;
  height: clamp(128px, 10vw, 99999rem);
}
.illustration.three {
  width: clamp(162px, 14vw, 99999rem);
  height: auto;
  animation-delay: 0.5s;
}
.illustration {
  position: absolute;
  animation: wiggle 8s infinite steps(1);
}
@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  6.25% {
    transform: rotate(0.6deg);
  }
  12.5% {
    transform: rotate(-0.4deg);
  }
  18.75% {
    transform: rotate(0.75deg);
  }
  25% {
    transform: rotate(-0.55deg);
  }
  31.25% {
    transform: rotate(0.3deg);
  }
  37.5% {
    transform: rotate(-0.825deg);
  }
  43.75% {
    transform: rotate(0.7deg);
  }
  50% {
    transform: rotate(-0.45deg);
  }
  56.25% {
    transform: rotate(0.8deg);
  }
  62.5% {
    transform: rotate(-0.65deg);
  }
  68.75% {
    transform: rotate(0.35deg);
  }
  75% {
    transform: rotate(-0.75deg);
  }
  81.25% {
    transform: rotate(0.6deg);
  }
  87.5% {
    transform: rotate(-0.25deg);
  }
  93.75% {
    transform: rotate(0.65deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
















































#intro,
#work,
#philosophy,
#experiences,
#references,
#thoughts,
#contact {
  margin-left: calc(var(--gap) / 2);
}


















.site-controls {
  position: fixed;
  left: var(--gap);
  bottom: var(--gap);
  z-index: 2;
}
.site-controls .options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-controls .option {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background-color: var(--bg-clr);
  border: 1px solid var(--ft-clr);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-controls .option:hover {
  cursor: pointer;
}
.site-controls .option svg path {
  fill: var(--ft-clr);
}
.site-controls .option.grid {
  display: flex;
  justify-content: center;
}
.site-controls .option.grid .content {
  display: flex;
  align-items: center;
}
.site-controls .option.appearance {
  position: relative;
  transition: height 0.33s ease 0.33s;
}
.site-controls .option.appearance .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 0;
  transition: bottom 0.5s ease-in-out;
  pointer-events: none;
  transform: translateX(-1px);
}
.site-controls .option.appearance .slider-container {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  transform: translateX(-1px) rotate(-90deg);
  transform-origin: top left;
  position: absolute;
  bottom: -48px;
  pointer-events: none;
  transition: width 0.3s ease 0.62s;
}
.site-controls .option.appearance .dots {
  position: absolute;
  width: 100%;
  padding: 22px;
  display: flex;
  justify-content: space-between;
}
.site-controls .option.appearance .dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  transform: translateX(-16px);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.site-controls .option.appearance .slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;
  outline: none;
  position: absolute;
  background-color: var(--color--background--0);
  cursor: pointer;
}
.site-controls .option.appearance .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  background: transparent;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  cursor: pointer;
}
.site-controls .option.appearance .slider::-moz-range-thumb {
  background: transparent;
  box-shadow: none;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  cursor: pointer;
}

body.appearance-slider--is--visible .site-controls .option.appearance {
  height: 368px;
  transition: height 0.3s ease;
}
body.appearance-slider--is--visible .site-controls .option.appearance .icon-container {
  transition: bottom 0.3s ease;
  transition-delay: 0s !important;
}
body.appearance-slider--is--visible .site-controls .option.appearance .slider-container {
  width: 368px;
  transition: width 0.3s ease;
  pointer-events: auto;
}
body.appearance-slider--is--visible .site-controls .option.appearance .dot {
  transform: none;
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

body.appearance-slider--is--visible.color-scheme--16 .site-controls .option.appearance .icon-container { bottom: 320px; }
body.appearance-slider--is--visible.color-scheme--15 .site-controls .option.appearance .icon-container { bottom: 300px; }
body.appearance-slider--is--visible.color-scheme--14 .site-controls .option.appearance .icon-container { bottom: 280px; }
body.appearance-slider--is--visible.color-scheme--13 .site-controls .option.appearance .icon-container { bottom: 260px; }
body.appearance-slider--is--visible.color-scheme--12 .site-controls .option.appearance .icon-container { bottom: 240px; }
body.appearance-slider--is--visible.color-scheme--11 .site-controls .option.appearance .icon-container { bottom: 220px; }
body.appearance-slider--is--visible.color-scheme--10 .site-controls .option.appearance .icon-container { bottom: 200px; }
body.appearance-slider--is--visible.color-scheme--09 .site-controls .option.appearance .icon-container { bottom: 180px; }
body.appearance-slider--is--visible.color-scheme--08 .site-controls .option.appearance .icon-container { bottom: 160px; }
body.appearance-slider--is--visible.color-scheme--07 .site-controls .option.appearance .icon-container { bottom: 140px; }
body.appearance-slider--is--visible.color-scheme--06 .site-controls .option.appearance .icon-container { bottom: 120px; }
body.appearance-slider--is--visible.color-scheme--05 .site-controls .option.appearance .icon-container { bottom: 100px; }
body.appearance-slider--is--visible.color-scheme--04 .site-controls .option.appearance .icon-container { bottom: 80px; }
body.appearance-slider--is--visible.color-scheme--03 .site-controls .option.appearance .icon-container { bottom: 60px; }
body.appearance-slider--is--visible.color-scheme--02 .site-controls .option.appearance .icon-container { bottom: 40px; }
body.appearance-slider--is--visible.color-scheme--01 .site-controls .option.appearance .icon-container { bottom: 20px; }
body.appearance-slider--is--visible.color-scheme--00 .site-controls .option.appearance .icon-container { bottom: 0; }

body.color-scheme--16 .site-controls .option.appearance .icon-container { transition-delay: 0.00s; }
body.color-scheme--15 .site-controls .option.appearance .icon-container { transition-delay: 0.02s; }
body.color-scheme--14 .site-controls .option.appearance .icon-container { transition-delay: 0.04s; }
body.color-scheme--13 .site-controls .option.appearance .icon-container { transition-delay: 0.06s; }
body.color-scheme--12 .site-controls .option.appearance .icon-container { transition-delay: 0.08s; }
body.color-scheme--11 .site-controls .option.appearance .icon-container { transition-delay: 0.10s; }
body.color-scheme--10 .site-controls .option.appearance .icon-container { transition-delay: 0.12s; }
body.color-scheme--09 .site-controls .option.appearance .icon-container { transition-delay: 0.14s; }
body.color-scheme--08 .site-controls .option.appearance .icon-container { transition-delay: 0.16s; }
body.color-scheme--07 .site-controls .option.appearance .icon-container { transition-delay: 0.18s; }
body.color-scheme--06 .site-controls .option.appearance .icon-container { transition-delay: 0.20s; }
body.color-scheme--05 .site-controls .option.appearance .icon-container { transition-delay: 0.22s; }
body.color-scheme--04 .site-controls .option.appearance .icon-container { transition-delay: 0.24s; }
body.color-scheme--03 .site-controls .option.appearance .icon-container { transition-delay: 0.26s; }
body.color-scheme--02 .site-controls .option.appearance .icon-container { transition-delay: 0.28s; }
body.color-scheme--01 .site-controls .option.appearance .icon-container { transition-delay: 0.30s; }
body.color-scheme--00 .site-controls .option.appearance .icon-container { transition-delay: 0.32s; }

.site-controls .option.appearance .dot:nth-child(17) { background-color: var(--ft-clr); transition-delay: 0.00s; }
.site-controls .option.appearance .dot:nth-child(16) { background-color: var(--ft-clr-50);  transition-delay: 0.02s; }
.site-controls .option.appearance .dot:nth-child(15) { background-color: var(--ft-clr-50);  transition-delay: 0.04s; }
.site-controls .option.appearance .dot:nth-child(14) { background-color: var(--ft-clr-50);  transition-delay: 0.06s; }
.site-controls .option.appearance .dot:nth-child(13) { background-color: var(--ft-clr); transition-delay: 0.08s; }
.site-controls .option.appearance .dot:nth-child(12) { background-color: var(--ft-clr-50);  transition-delay: 0.10s; }
.site-controls .option.appearance .dot:nth-child(11) { background-color: var(--ft-clr-50);  transition-delay: 0.12s; }
.site-controls .option.appearance .dot:nth-child(10) { background-color: var(--ft-clr-50);  transition-delay: 0.14s; }
.site-controls .option.appearance .dot:nth-child(9)  { background-color: var(--ft-clr); transition-delay: 0.16s; }
.site-controls .option.appearance .dot:nth-child(8)  { background-color: var(--ft-clr-50);  transition-delay: 0.18s; }
.site-controls .option.appearance .dot:nth-child(7)  { background-color: var(--ft-clr-50);  transition-delay: 0.20s; }
.site-controls .option.appearance .dot:nth-child(6)  { background-color: var(--ft-clr-50);  transition-delay: 0.22s; }
.site-controls .option.appearance .dot:nth-child(5)  { background-color: var(--ft-clr); transition-delay: 0.24s; }
.site-controls .option.appearance .dot:nth-child(4)  { background-color: var(--ft-clr-50);  transition-delay: 0.26s; }
.site-controls .option.appearance .dot:nth-child(3)  { background-color: var(--ft-clr-50);  transition-delay: 0.28s; }
.site-controls .option.appearance .dot:nth-child(2)  { background-color: var(--ft-clr-50);  transition-delay: 0.30s; }
.site-controls .option.appearance .dot:nth-child(1)  { background-color: var(--ft-clr); transition-delay: 0.32s; }

body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(17) { transition-delay: 0.32s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(16) { transition-delay: 0.30s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(15) { transition-delay: 0.28s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(14) { transition-delay: 0.26s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(13) { transition-delay: 0.24s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(12) { transition-delay: 0.22s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(11) { transition-delay: 0.20s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(10) { transition-delay: 0.18s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(9)  { transition-delay: 0.16s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(8)  { transition-delay: 0.14s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(7)  { transition-delay: 0.12s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(6)  { transition-delay: 0.10s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(5)  { transition-delay: 0.08s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(4)  { transition-delay: 0.06s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(3)  { transition-delay: 0.04s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(2)  { transition-delay: 0.02s; }
body.appearance-slider--is--visible .site-controls .option.appearance .dot:nth-child(1)  { transition-delay: 0.00s; }