@font-face {
  font-family: "Corbel Light";
  src: url(../fonts/CorbelLight/corbel.ttf) format("truetype");
}

@font-face {
  font-family: "Franklin Gothic Demi";
  src: url("../fonts/FranklinGothicDemi/FranklinGothicDemi.ttf") format("truetype");
}

:root {
  --color-primary: #245dab; /*#79c7a5*/
  --color-bg: #fdfdfd;
  --color-bg-alt: #f4efde;
  --color-text: #333;

  --color-riso-blue: #245dab;
  --color-riso-red: #e42426;
  --color-riso-black: #000000;
  --color-secondary: #79c7a5;

  --main-width: 45rem; /* 60rem */
}
::selection {
  background: var(--color-primary);
  color: var(--color-text);
}

html {
  background: var(--color-primary);
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Corbel Light", sans-serif;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg);
  /*background: url("../images/paper.png");*/
  line-height: 1.25;
  font-size: 1.2em;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
.flex-grow {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

nav .logo {
  margin-right: -0.25rem;
}
nav {
  font-family: "Franklin Gothic Demi", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
}

.nav-header {
  width: 100%;
  display: flex;
  flex-flow: column;
}
.nav-name {
  color: var(--color-riso-red);
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.6rem;
}
.nav-list-container {
  border-top: 0.2em solid var(--color-text);
  padding: 0 0.5rem;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.5em;
  justify-content: space-between;
  text-transform: uppercase;
}
.nav-list-container a {
  color: var(--color-text);
  padding: 0.5rem;
  display: block;
  letter-spacing: 0.05em;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h1, h2, h3, h4, h5, h6 {
  font-family: "Franklin Gothic Demi", sans-serif;
  font-weight: 800;
  position: relative;
  text-transform: uppercase;
  margin-block-end: 0px;
}
p {
  margin-top: 0.5rem;
}
p+p {
  margin-top: initial;
}

a {
  text-decoration: none;
  color: var(--color-primary);
  /*transition: colo
   * }
   * a.active, a:hover {r 0.1s;*/
}
a.active { font-weight: bold; }
a:hover {
  opacity: 0.8;
}
a.active, a:hover {
  color: var(--color-primary);
  /*color: transparent;
  background-image: url('../images/texture-dots.png');
  background-size: 700%;
  background-position: center center;
  background-clip: text;
  -webkit-background-clip: text;*/
}
a.more {
  font-weight: bold;
  font-size: 1.2em;
}
a.more::after {
  content: ' →';
  font-weight: normal;
  display: inline-block;
  font-size: 0.8em;
  margin-left: 0.25em;
  transition: 0.2s;
}
a.more:hover::after {
  transform: translateX(0.25em);
}

.content, nav, main:not(.wide) {
  max-width: var(--main-width);
  margin-left: auto;
  margin-right: auto;
}
main {
  padding: 1rem;
}


footer {
  background: var(--color-primary);
  padding: 1rem;
  color: var(--color-bg);
  text-align: center;
  border-bottom: 2px dashed var(--color-bg);
}

main section:not(:first-of-type) {
  margin-top: 3rem;
}
main section:last-of-type {
  margin-bottom: 2rem;
}
.w100 {
  width: 100%;
}
.btn {
  padding: 0.5rem;
  /*background: var(--color-primary);*/
  background-color: var(--color-primary);
  background-image: url('../images/texture-dots.png');
  background-size: 500%;
  border: none;
  border-radius: 4px;
  color: var(--color-bg);
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}
.btn:hover {
  opacity: 0.8;
}
.flex {
  display: flex;
  flex-direction: row;
}
.hidden {
  display: none;
}

.quote-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 2px solid var(--color-text);
  border-radius: 0 10px;
  padding: 0.5rem;
  /* TODO: Ask Neve for some like, sparke images here? */
  position: relative;
}
.quote-line::before, .quote-line::after {
  content: '✨';
  position: absolute;
  border-radius: 4px;
  z-index: 2;
}
.quote-line::before {
  left: -2rem;
  top: -0.75rem;
  font-size: 2.2em;
}
.quote-line::after {
  right: -1rem;
  bottom: -0.75rem;
  font-size: 1.75em;
}
.quote-line__text {
  font-weight: 800;
  font-size: 1.5em;
  margin: 0;
}
.quote-line__btn {
  font-size: 1em;
}


.services-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.service { position: relative; }
.service__img {
  width: 100%;
  height: 200px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.service__img-wrapper {
  background: url('../images/texture-dark.png') center center / cover no-repeat;
  background-attachment: fixed;
  padding: 0.5rem;
}
.service > div {
  flex: 1 0 50%;
}
.stacked-services-wrapper .service {
  display: flex;
  gap: 2rem;
  border: 2px solid var(--color-text);
}
.stacked-services-wrapper { gap: 1rem; }

.order-id {
  text-align: center;
  padding: 1rem;
  background: #eee;
  font-size: 1.2em;
  position: relative;
  margin-top: 1.5rem;
}
.order-id::before {
  position: absolute;
  bottom: 0;
  right: 0;
  content: attr(data-title);
  font-size: small;
  font-family: monospace, mono;
  padding: 0.25rem;
}