@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_black.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
}

@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_bold.woff2") format("woff2");
  font-display:auto;
  font-style:normal;
  font-weight:700;
  font-stretch:normal;
}

@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_regular_italic.woff2") format("woff2");
  font-display:auto;
  font-style:italic;
  font-weight:400;
  font-stretch:normal;
}

@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_light.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
}

@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_light_italic.woff2") format("woff2");
  font-display: auto;
  font-style: italic;
  font-weight: 300;
  font-stretch: normal;
}

@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_medium.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_medium_italic.woff2") format("woff2");
  font-display: auto;
  font-style: italic;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_regular.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {

  font-family:"azo-sans-web";
  src:url("/assets/fonts/azo_sans_thin.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 200;
  font-stretch: normal;
}

@font-face {

  font-family:"azo-sans-uber";
  src:url("/assets/fonts/azo_sans_uber.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

html {

  --light: #fff;
  --dark: #141414;
  --brown: #CB5D10;
  --blue: #001E29;
  --font-azo: azo-sans-web, -apple-system, BlinkMacSystemFont,  sans-serif;
  --font-azo-uber: azo-sans-uber, -apple-system, BlinkMacSystemFont,  sans-serif;
  --base: hsl(var(--hue), 95%, 50%);
	--complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
  --complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);
}

*, *::before, *::after {

	box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, p, ul, ol, li, figure, header, section, figcaption, footer, blockquote, svg {

  display: block;
	margin: 0;
	padding: 0;
}

ul, ol {

  display: grid;
  grid-gap: 0.75rem;
	list-style: none;
  font-size: clamp(1rem, 3vw, 1.5rem);
  line-height: 1.75;
	font-weight: 300;
}

b, strong {

	font-weight: 700;
}

html, body {

  scroll-behavior: smooth;
	width: 100%;
	height: 100%;
}

body {

	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	text-rendering: optimizeSpeed;
	font-family: var(--font-azo);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1;
	font-size: 16px;
	background: var(--dark);
	color: var(--dark);
  overflow: hidden;
}

body.loaded {

  overflow: visible;
}

h1 {

  font-weight: 400;
  font-family: var(--font-azo-uber);
}

body.no_scroll {

	overflow: hidden;
}

::selection {

	background: hsla(250, 90%, 50%, 0.5);
  color: var(--light);
}

::-moz-selection {

	background: rgba(198, 189, 180, 0.5);
}

:target {

  --top: -10rem;
  display: block;
  position: relative;
  top: calc(var(--top));
  visibility: hidden;
}

b {

  font-weight: 500;
}

img {

	display: block;
	max-width: 100%;
}

a {

	color: inherit;
	text-decoration: none;
}

p {

  font-size: clamp(1rem, 3vw, 1.5rem);
  line-height: 1.75;
	font-weight: 300;
  margin: 3rem 0;
}

.sr_only {

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Buttons */

button, a.button {

	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	border: none;
	margin: 0;
	width: auto;
	overflow: visible;
	outline: none;
  font-family: var(--font-azo-uber);
	font-size: 1.875rem;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	padding: 1em;
	border-radius: 0;
	text-transform: uppercase;
	background-color: var(--light);
	color: var(--dark);
	transition: 0.2s ease all;
  text-align: center;
}

button::-moz-focus-inner {

  border: 0;
  padding: 0;
}

button.button {

  font-family: var(--font-azo);
  font-weight: 500;
  background: hsl(var(--hue-complimentary1), 95%, 30%);
  color: var(--light);
  padding: 1rem 2rem;
}


/* Header */

ma-header h1 {

  font-size: 6rem;
  font-family: var(--font-azo-uber);
  color: var(--light);
  animation: textIn 0.5s ease-out 1s forwards;
  opacity: 0;
  z-index: 5;
}

ma-header h2 {

  align-self: center;
  font-size: 3rem;
  color: var(--light);
  animation: textIn 0.5s ease-out 1.2s forwards;
  opacity: 0;
  z-index: 5;
  font-weight: 200;
}

@keyframes textIn {

  from {

    transform: translateY(3rem);
    opacity: 0;
  }

  to {

    transform: translateY(0);
    opacity: 1;
  }
}

ma-header .lang {

  display: flex;
  gap: 1rem;
  color: var(--light);
  opacity: 0;
}

body.loaded ma-header .lang {

  opacity: 1;
}

ma-header .lang a.selected {

  text-decoration: underline;
}

@keyframes spin {

  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (max-width: 64rem) {

  ma-header h1 {

    font-size: 10vw;
    padding: 0 2rem;
  }

  ma-header h2 {

    align-self: flex-end;
    font-size: 6vw;
  }
}

/* Content */

.content {

  overflow: hidden;
}

.content.center {

  text-align: center;
}

.content.visible {

  overflow: visible;
}

.content h2:not(.sr_only) {

  --bg: hsl(var(--hue-complimentary1), 95%, 30%);
  --bg2: hsl(var(--hue-complimentary2), 95%, 10%);
  --size: clamp(1.5rem, 5vw, 3rem);
  position: relative;
  font-size: var(--size);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: calc(110 / 1000 * var(--size));
  line-height: 1.75;
  background-color: var(--dark);
  background-image: linear-gradient(-45deg, var(--bg) 20%, var(--bg2));
	background-clip: text;
  -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.content h2:not(.sr_only):after {

  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -3rem;
  width: 6rem;
  height: clamp(0.25rem, 5vw, 0.5rem);
  background: var(--bg);
}

.content h3 {

  --size: clamp(1rem, 4vw, 2rem);
  font-size: var(--size);
  font-family: var(--font-azo-uber);
  letter-spacing: calc(133 / 1000 * var(--size));
  line-height: 1.75;
}

.content .list {

  display: inline-grid;
  grid-gap: 3rem;
}

.content ul {

  text-align: left;
  width: 100%;
}

.content li {

  display: grid;
  padding-left: 1rem;
}

.content li span {

  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.content li span:before {

  display: block;
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: var(--icon);
  border-radius: 4px;
  margin-right: 1rem;
}

.content ul ul {

  margin: 1rem 0 1rem 2rem;
}

.content p.keywords {

  font-style: italic;
  margin-bottom: 0;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.content a {

  text-decoration: underline;
}

.avainlippu {

  display: block;
  max-width: 12rem;
  height: auto;
  margin: 0 auto;
}

/* Form */

input[type="text"], input[type="email"], textarea {

  --size: clamp(1rem, 5vw, 1.5rem);
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--font-azo);
  font-size: var(--size);
  font-weight: normal;
	color: var(--dark);
	background: transparent;
	padding: 1rem;
  margin: 0;
	width: 100%;
	border: none;
	border-radius: 0;
	font-weight: 400;
	outline: none;
	resize: none;
	transition: all 0.3s ease;
	text-align: left;
}

textarea {

  min-height: calc(var(--size) * 10);
}

::placeholder {

  --bg: hsl(var(--hue-complimentary1), 95%, 30%);
  --bg2: hsl(var(--hue-complimentary2), 95%, 10%);
  color: var(--dark);
  opacity: 0.5;
  background-color: var(--dark);
  background-image: linear-gradient(-45deg, var(--bg) 20%, var(--bg2));
	background-clip: text;
  -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

::-ms-input-placeholder {

  --bg: hsl(var(--hue-complimentary1), 95%, 30%);
  --bg2: hsl(var(--hue-complimentary2), 95%, 10%);
  color: var(--dark);
  opacity: 0.5;
  background-color: var(--dark);
  background-image: linear-gradient(-45deg, var(--bg) 20%, var(--bg2));
	background-clip: text;
  -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

ma-form {

  --bg: rgba(255, 255, 255, 0.95);
}

ma-form .bg {

  padding: 4rem;
  background: var(--bg);
  border-radius: 5rem 0 0 0;
}

ma-form .bg_2 {

  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 2rem 4rem 2rem 4rem;
  background: var(--bg);
  border-radius: 0 0 5rem 0;
}

ma-form .bg_2:after {

  --bg: hsl(var(--hue-complimentary1), 95%, 30%);
  --bg2: hsl(var(--hue-complimentary2), 95%, 10%);
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 1px;
  max-width: 50%;
  transform: translateX(-50%);
  background-color: var(--dark);
  background-image: linear-gradient(-45deg, var(--bg) 20%, var(--bg2));
}

ma-form .bg_2 p {

  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 2rem;
}

ma-form p {

  margin: 0;
}

ma-form p + p {

  margin-top: 2rem;
}

ma-form .logobox {

  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 0 0;
}

.logobox a {

  display: block;
  padding: 1rem;
}

.logobox a img {

  display: block;
  width: auto;
  height: 2rem;
}

.form_wrapper {

  position: relative;
}

.thanks {

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 0 2rem 0 2rem;
  background: var(--bg);
  z-index: 1;
  padding: 2rem;
  transition: all 0.8s ease;
  opacity: 0;
  visibility: hidden;
}

.form_wrapper.success .form,
.form_wrapper.success .bg_2 {

  opacity: 0;
  pointer-events: none;
}

.form_wrapper.success .thanks {

  opacity: 1;
  visibility: visible;
}

.form_wrapper.wait form input,
.form_wrapper.wait form textarea {

  opacity: 0.5;
  pointer-events: none;
}

.form {

  margin: 1rem 0 0 0;
}

.form form {

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin: 0;
}

.form .inp {

  padding: 0;
  background: var(--bg);
  border-radius: 0;
}

.form .inp.span {

  grid-column: span 2;
}

.form form input[type="submit"] {

  display: none;
}

ma-form button.arrow {

  --scale: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  padding: 0;
  background: rgba(255, 255, 255, 1);
  transform-origin: center center;
  transform: scale(var(--scale)) rotate(-90deg);
  transition: transform 0.3s ease;
	background: hsl(var(--hue-complimentary1), 95%, 30%);
}

ma-form button.arrow svg {

  position: relative;
  top: 4px;
  width: 100%;
  max-width: 1.875rem;
  height: auto;
}

ma-form button.arrow svg polygon {

  transform: translateY(0);
  transition: all 0.3s ease;
  fill: var(--light);
}

ma-form button.arrow.loading {

  pointer-events: none;
}

ma-form button.arrow.loading svg {

  opacity: 0;
}

ma-form button.arrow.loading.loading:after {

  content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1rem 0 0 -1rem;
  border: 0.3rem solid var(--light);
  border-top: 0.3rem solid hsl(var(--hue-complimentary1), 95%, 30%);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
	transition: none;
}

ma-form button.close {

  color: var(--light);
  background: hsl(var(--hue-complimentary1), 95%, 30%);
  padding: 1rem 2rem;
  font-size: 1.375rem;
  margin-top: 2rem;
}

@media screen and (pointer: fine) {

  ma-form button.arrow:hover {

    --scale: 1.1;
  }

  ma-form button.arrow:hover svg .top {

    transform: translateY(1rem);
  }

  ma-form button.arrow:hover svg .bottom {

    transform: translateY(-1rem);
  }

  ma-form button.close:hover {

    background: var(--dark);
  }
}

@media screen and (max-width: 40rem) {

  .form form {

    display: grid;
    grid-template-columns: 1fr;
  }

  .form .inp.span {

    grid-column: auto;
  }
}

/* Works */

.works {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 2rem;
}

.works a {

  display: block;
  text-decoration: none;
}

.works figure {

  aspect-ratio: 16 / 9;
  background-color: var(--dark);
  background-image: var(--bg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: center center;
  transition: 0.3s ease all;
}

.works h4 {

  font-family: var(--font-azo);
  font-weight: 500;
  font-size: clamp(1rem, 5vw, 1.5rem);
  margin: 1.5rem 0;
}

.works p {

  margin: 0;
  font-size: clamp(1rem, 3vw, 1.25rem);
}

.works div {

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.works + h3 {

  margin: 4rem 0;
}

p + .works {

  margin-top: 5rem;
}

.content .works:last-of-type {

  margin-bottom: 5rem;
}

@media screen and (pointer: fine) {

  .works a:hover figure {

    transform: scale(1.04);
  }

  .works a:hover h4 {

    text-decoration: underline;
  }
}

@media screen and (max-width: 64rem) {

  .works {

    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 40rem) {

  .works {

    grid-template-columns: 1fr;
  }

}

/* Quotes */

ma-quotes {

  max-width: 75rem;
  margin: 3rem auto;
}

/* Animaatiot */

@media screen and (prefers-reduced-motion: no-preference) {

  /* Headers */

  .content h2 {

    opacity: 0;
    transform: translateX(-50%);
    transition:
      0.4s 0.2s transform ease,
      0.4s 0.2s opacity ease;
  }

  .content h3 {

    opacity: 0;
    transform: translateX(-50%);
    transition:
      0.4s 0.4s transform ease,
      0.4s 0.4s opacity ease;
  }

  .content .list + h3 {

    transition-delay: 0.2s;
  }

  .content h2:after {

    opacity: 0;
    transition:
      0.4s 0.6s transform ease,
      0.4s 0.6s opacity ease;
    transform: translateX(100%);
  }

  .content h2.show,
  .content h3.show {

    opacity: 1;
    transform: translateX(0);
  }

  .content h2.show:after {

    transform: translateX(0);
    opacity: 1;
  }

  .content .avainlippu {

    opacity: 0;
    transform: translateY(50%);
    transition:
      0.4s 0.2s transform ease,
      0.4s 0.2s opacity ease;
  }

  .content .avainlippu.show {

    transform: translateY(0);
    opacity: 1;
  }

  /* List */

  .content ul li {

    --root-delay: 200ms;
    opacity: 0;
    transform: translateX(-100%);
    transition:
      0.4s opacity ease,
      0.4s transform ease;
    transition-delay: calc(var(--root-delay) * var(--delay));
  }

  .content ul.show li {

    opacity: 1;
    transform: translateX(0);
  }

  .works a {

    --root-delay: 200ms;
    opacity: 0;
    transform: translateY(25%);
    transition:
      0.4s opacity ease,
      0.4s transform ease;
    transition-delay: calc(var(--root-delay) * var(--delay));
  }

  .works.show a {

    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 64rem) {

  p, ul {

    line-height: 2;
  }

  p {

    margin: 2rem 0;
  }

  ma-form .content .bg {

    padding: 2rem;
    border-radius: 0;
  }

  ma-form .content .bg_2 {

    padding: 2rem;
    border-radius: 0;
  }

  .content h2:not(.sr_only) {

    line-height: 1.5;
  }
}

@media screen and (max-width: 30rem) {


  ul {

    line-height: 1.5;
  }

  .content ul ul {

    margin-left: 1rem;
  }

  .content li span:before {

    width: 2rem;
    height: 2rem;
  }

  ma-skills .content .bg {

    padding: 1rem;
    border-radius: 2rem 0 2rem 0;
  }

  ma-skills .content {

    padding: 2rem 0 0 0;
  }
}