@charset "UTF-8";
/* RESET */
/* @use "./base/base-reset.scss" as *;   EXEMPLE */
:root {
  --mainnav-scroll-offset: var(--spacing-4);
}

@media all and (min-width: 1024px) {
  :root {
    --mainnav-scroll-offset: var(--spacing-5);
  }
}
* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--mainnav-scroll-offset);
  overflow-x: clip;
}

body {
  overflow-x: clip;
  background-color: var(--color-white-100);
}

html:has(.mainnav--nav:target),
body:has(.mainnav--nav:target) {
  overflow-y: clip;
}

[id] {
  scroll-margin-top: var(--mainnav-scroll-offset);
}

ul {
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

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

picture > img {
  display: block;
  width: 100%;
  height: auto;
}

.fluidimg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@property --scroll-position {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scroll-position-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --nav-transition-duration {
  syntax: "<time>";
  inherits: true;
  initial-value: 0.2s;
}
@property --when-scrolling {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes adjust-pos {
  to {
    --scroll-position: 1;
    --scroll-position-delayed: 1;
  }
}
:root {
  animation: adjust-pos linear both;
  animation-timeline: scroll(root);
}

body {
  transition: --scroll-position-delayed 0.15s linear;
  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));
  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity)); /* abs(var(--scroll-velocity)); */
  --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed)); /* sign(var(--scroll-velocity)); */
  --when-scrolling: abs(var(--scroll-direction));
  --when-not-scrolling: abs(var(--when-scrolling) - 1);
  --when-scrolling-up: min(abs(var(--scroll-direction) - abs(var(--scroll-direction))),	1);
  --when-scrolling-down: min(var(--scroll-direction) + abs(var(--scroll-direction)), 1);
  --when-scrolling-down-or-when-not-scrolling: clamp(0, var(--scroll-direction) + 1, 1);
  --when-scrolling-up-or-when-not-scrolling: clamp(0, abs(var(--scroll-direction) - 1), 1);
  /*
  --nav-transition-duration: calc(0.2s + 3s * (1 - var(--when-scrolling)));
  */
  --nav-transition-duration: calc(0s + 99999s * (1 - var(--when-scrolling)));
  --scroll-threshold: 0.05;
  --scroll-direction-thresholded: calc(var(--scroll-direction) * min(1, (var(--scroll-speed) / var(--scroll-threshold))) );
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-VariableItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}
/* Base grid system */
.grid-layout {
  display: grid;
  gap: var(--spacing-grid-gap);
  grid-template-columns: var(--spacing-1) repeat(5, 1fr) var(--spacing-1);
}

@media all and (min-width: 1024px) {
  .grid-layout {
    gap: var(--spacing-grid-gap);
    grid-template-columns: var(--spacing-3) repeat(9, 1fr) var(--spacing-3);
  }
}
/* Sub grid system */
.grid-layout-3 {
  display: grid;
  gap: var(--spacing-grid-gap);
  grid-template-columns: repeat(3, 1fr);
}

.grid-layout-4 {
  display: grid;
  gap: var(--spacing-grid-gap);
  grid-template-columns: repeat(4, 1fr);
}

.grid-layout-5 {
  display: grid;
  gap: var(--spacing-grid-gap);
  grid-template-columns: repeat(5, 1fr);
}

.grid-layout-7 {
  display: grid;
  gap: var(--spacing-grid-gap);
  grid-template-columns: repeat(7, 1fr);
}

.grid-layout-9 {
  display: grid;
  gap: var(--spacing-grid-gap);
  grid-template-columns: repeat(9, 1fr);
}

@media all and (min-width: 1024px) {
  .grid-layout-desktop-3 {
    gap: var(--spacing-grid-gap);
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-layout-desktop-4 {
    gap: var(--spacing-grid-gap);
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-layout-desktop-5 {
    gap: var(--spacing-grid-gap);
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-layout-desktop-7 {
    gap: var(--spacing-grid-gap);
    grid-template-columns: repeat(7, 1fr);
  }
  .grid-layout-desktop-9 {
    gap: var(--spacing-grid-gap);
    grid-template-columns: repeat(9, 1fr);
  }
}
.section {
  background-color: var(--color-white-100);
  padding-block-end: var(--spacing-4);
  /*
  background-blend-mode: difference;
  */
}

.section--dark {
  background-color: var(--color-black-100);
  /*
  padding-block-start: var(--spacing-6);
  */
}

@media all and (min-width: 1024px) {
  .section {
    padding-block-end: var(--spacing-6);
  }
}
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: white;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.18s ease;
}

.cursor.cursor--visible {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}
/* SPACING */
:root {
  --spacing-xs: calc(6px / 16px * 1rem);
  --spacing-0: calc(10px / 16px * 1rem);
  --spacing-1: calc(16px / 16px * 1rem);
  --spacing-2: calc(24px / 16px * 1rem);
  --spacing-3: calc(36px / 16px * 1rem);
  --spacing-4: calc(54px / 16px * 1rem);
  --spacing-5: calc(81px / 16px * 1rem);
  --spacing-6: calc(121px / 16px * 1rem);
  --spacing-7: calc(182px / 16px * 1rem);
  --spacing-grid-gap: var(--spacing-0);
}

@-moz-document url-prefix() {
  :root {
    --spacing-xs: 0.375rem;
    --spacing-0: 0.625rem;
    --spacing-1: 1rem;
    --spacing-2: 1.5rem;
    --spacing-3: 2.25rem;
    --spacing-4: 3.375rem;
    --spacing-5: 5.0625rem;
    --spacing-6: 7.5625rem;
    --spacing-7: 11.375rem;
  }
}
@media all and (min-width: 1024px) {
  :root {
    --spacing-grid-gap: var(--spacing-2);
  }
}
:root {
  /*p*/
  --font-family-p: "Satoshi", sans-serif;
  --font-size-p: var(--spacing-1);
  --font-weight-p: 400;
  --font-line-height-p: 125%;
  /*h5*/
  --font-family-h5: "Satoshi", sans-serif;
  --font-size-h5: var(--spacing-1);
  --font-weight-h5: 700;
  --font-line-height-h5: 125%;
  /*h4*/
  --font-family-h4: "Satoshi", sans-serif;
  --font-size-h4: var(--spacing-2);
  --font-weight-h4: 500;
  --font-line-height-h4: 125%;
  /*h3*/
  --font-family-h3: "Satoshi", sans-serif;
  --font-size-h3: var(--spacing-2);
  --font-weight-h3: 500;
  --font-line-height-h3: 125%;
  /*h2*/
  --font-family-h2: "Satoshi", sans-serif;
  --font-size-h2: var(--spacing-3);
  --font-weight-h2: 900;
  --font-line-height-h2: 100%;
  /*h1*/
  --font-family-h1: "Satoshi", sans-serif;
  --font-size-h1: var(--spacing-4);
  --font-weight-h1: 900;
  --font-line-height-h1: 100%;
}

/* DESKTOP FONTS SIZES */
@media all and (min-width: 1024px) {
  :root {
    /*p*/
    --font-size-p: var(--spacing-2);
    --font-weight-p: 500;
    /*h5*/
    --font-size-h5: var(--spacing-2);
    /*h4*/
    --font-size-h4: var(--spacing-3);
    /*h3*/
    --font-size-h3: var(--spacing-4);
    --font-weight-h3: 700;
    /*h2*/
    --font-size-h2: var(--spacing-5);
    /*h1*/
    --font-size-h1: var(--spacing-6);
  }
}
/* APPLY TEXT PARAMETERS */
a {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--font-line-height-p);
  color: var(--text-color-75);
}

.f-nav {
  font-family: var(--font-family-p);
  font-size: var(--spacing-3);
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--color-black-100);
}

@media all and (min-width: 1024px) {
  .f-nav {
    font-size: var(--spacing-1);
  }
}
/* CALL TO ACTION */
.cta {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p);
  font-weight: var(400);
  color: var(--text-color-100);
}

.cta:after {
  content: "→";
  display: inline;
  font-family: var(--font-family-p);
  font-size: var(--font-size-p);
  font-weight: var(400);
  color: var(--text-color-100);
  padding-inline-start: var(--spacing-0);
}

.cta-Big {
  text-align: right;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-3);
  white-space: nowrap;
}

.cta-Big::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-color-100);
}

.cta-Big::after {
  content: "→";
  display: block;
  color: var(--text-color-100);
  font-family: var(--font-family-p);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
}

/* DEFAULT TEXT STYLES */
p {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--font-line-height-p);
  color: var(--text-color-75);
}

h5 {
  font-family: var(--font-family-h5);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--font-line-height-h5);
  text-transform: uppercase;
  color: var(--text-color-100);
}

h4 {
  font-family: var(--font-family-h4);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--font-line-height-h4);
  color: var(--text-color-75);
}

h3 {
  font-family: var(--font-family-h3);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--font-line-height-h3);
  color: var(--text-color-100);
}

h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--font-line-height-h2);
  text-transform: uppercase;
  color: var(--text-color-100);
}

h1 {
  font-family: var(--font-family-h1);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--font-line-height-h1);
  text-transform: uppercase;
  color: var(--text-color-100);
}

/* TEXT MODIFIERS */
.fc-100 {
  color: var(--text-color-100);
}

.fc-75 {
  color: var(--text-color-75);
}

.fc-50 {
  color: var(--text-color-50);
}

.fc-bold {
  font-weight: 700;
}

.fc-regular {
  font-weight: 400;
}

.fh-125 {
  line-height: 125%;
}

.fh-auto {
  line-height: normal;
}

/* SECTION MODIFIERS */
.section--dark {
  --text-color-100: var(--text-color-light-100);
  --text-color-75: var(--text-color-light-75);
  --text-color-50: var(--text-color-light-50);
}

:root {
  /* ROOT VARIABLES */
  --color-black-100: #030000;
  --color-black-75: #3E3C3B;
  --color-black-50: #7A7876;
  --color-white-100: #F1EFEB;
  --color-white-75: #B6B3B0;
  --color-white-50: #7A7775;
  --color-red-100: #C40E3C;
  /* TEXT VARIABLES */
  --text-color-100: var(--color-black-100);
  --text-color-75: var(--color-black-75);
  --text-color-50: var(--color-black-50);
  --text-color-light-100: var(--color-white-100);
  --text-color-light-75: var(--color-white-75);
  --text-color-light-50: var(--color-white-50);
}

.mainnav--container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-1) calc(var(--spacing-1) + var(--spacing-grid-gap));
  background-color: var(--color-white-100);
  /*
  mix-blend-mode: difference;
  */
  position: sticky;
  top: 0;
  z-index: 100;
}

.mainnav--logo {
  width: auto;
  height: 42px;
  display: flex;
  justify-content: flex-start;
}

.mainnav--nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-5);
  background-color: var(--color-white-100);
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.mainnav--nav:target {
  transform: translateX(0);
  pointer-events: auto;
}

.mainnav--list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-1);
  padding-inline-start: 10%;
}

.mainnav--item {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
}

.mainnav--item:hover a {
  color: var(--color-red-100);
}

.mainnav--item p {
  opacity: 0;
  user-select: none;
  line-height: 80%;
}

.mainnav--item-active p {
  opacity: 1;
}

.mainnav--language {
  position: absolute;
  bottom: var(--spacing-3);
  left: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  transform: translateX(-50%);
}

.mainnav--language-item-active a {
  font-style: italic;
  font-weight: 400;
}

.mainnav--language-item:hover a {
  color: var(--color-red-100);
}

/* BURGER */
.mainnav--hidden {
  opacity: 0;
  pointer-events: none;
}

.mainnav--burger {
  display: block;
}

.mainnav--nav:target ~ .mainnav--burger-open {
  display: none;
}

.mainnav--burger-close {
  display: none;
}

.mainnav--nav:target ~ .mainnav--burger-close {
  display: block;
}

/* DESKTOP */
@media all and (min-width: 1024px) {
  .mainnav--container {
    padding: var(--spacing-1) calc(var(--spacing-3) + var(--spacing-grid-gap));
  }
  .mainnav--nav {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--spacing-5);
    z-index: auto;
    pointer-events: auto;
    transform: translateX(0);
  }
  .mainnav--list {
    gap: var(--spacing-xs);
    padding-inline-start: 0;
  }
  .mainnav--language {
    position: static;
    transform: none;
  }
  .mainnav--burger {
    display: none;
  }
}
.footer {
  row-gap: var(--spacing-4);
}

.footer > * {
  grid-column: 2/-2;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer-section p {
  color: var(--color-white-100);
}

.footer-content * a, p {
  width: fit-content;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-2) / 8);
  padding-top: calc(var(--spacing-2) / 4);
}

.footer-lang {
  display: flex;
  flex-direction: row;
  gap: calc(var(--spacing-2) / 4);
}

.footer-lang-item--active {
  color: var(--color-white-100);
  font-weight: 500;
  text-decoration: underline;
}

.footer-copyright {
  grid-column: 1/-1;
  padding-block: var(--spacing-2);
  background-color: var(--color-red-100);
}

.footer-copyright > * {
  grid-area: 1/2/1/-2;
}

.footer-copyright p,
.copyright-content a {
  font-size: var(--spacing-0);
  color: var(--color-white-100);
  align-self: center;
}

.copyright-content {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-0);
  justify-self: end;
}

@media all and (min-width: 1024px) {
  .footer {
    row-gap: var(--spacing-6);
  }
  .footer-section {
    display: grid;
    gap: var(--spacing-2);
    grid-template-columns: repeat(9, 1fr);
  }
  .footer-content:nth-of-type(1) {
    grid-column: 1/3;
  }
  .footer-content:nth-of-type(2) {
    grid-column: 3/5;
  }
  .footer-content:nth-of-type(3) {
    grid-column: 5/7;
  }
  .footer-content:nth-of-type(4) {
    grid-column: 7/10;
    justify-self: end;
  }
  .footer-copyright p,
  .copyright-content a {
    font-size: var(--spacing-1);
  }
}
/* =======================
TRUST SECTION
======================= */
.trust--title {
  grid-column: 2/7;
}

.trust--grid {
  grid-column: 2/-2;
  padding-block-start: var(--spacing-4);
}

.trust--partner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  align-items: stretch;
}

.trust--partner-images {
  aspect-ratio: 3/2;
  width: 100%;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  flex: 1 1 auto;
}

.trust--partner-images picture {
  height: 100%;
}

.trust--partner-images img {
  backdrop-filter: blur(2px) saturate(0) brightness(0.8);
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: var(--spacing-1);
  box-sizing: border-box;
}

.partners--contact {
  grid-column: 2/-2;
}

@media all and (min-width: 1024px) {
  .trust--grid {
    padding-block-start: var(--spacing-6);
  }
  .trust--partner-images img {
    padding: var(--spacing-4);
  }
}
.studio--content {
  row-gap: var(--spacing-7);
}

.studio--main {
  grid-column: 2/-2;
  row-gap: var(--spacing-7);
}

.studio--logo {
  grid-column: 2/5;
  justify-self: center;
}

.studio--description {
  grid-column: 1/-1;
}

.studio--location {
  grid-column: 2/-2;
  text-align: right;
  width: 100%;
}

/* ====================
    Studio Projects 
===================== */
.studio--projects {
  padding-block-start: var(--spacing-6);
}

.studio--projects-container {
  grid-column: 2/-2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.studio--projects-left,
.studio--projects-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex: 1 1 0;
  min-width: 0;
}

.studio--projects-title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.studio--projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.studio--projects-item a {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.studio--projects-item-img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.studio--projects-more {
  width: 100%;
  padding-block-start: 0;
  padding-block-end: var(--spacing-6);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}

.studio--projects-more p,
.studio--projects-more p:after {
  font-size: var(--font-size-h4);
}

/* ====================
    Studio Dark 
===================== */
.studio--dark {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  grid-column: 2/-2;
}

.studio--dark-title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
}

.studio--dark-title p {
  font-size: var(--font-size-h2);
  font-weight: 300;
  color: var(--text-color-light-100);
}

/* ====================
        EXPERTISE 
===================== */
.expertise--list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  grid-column: 2/-2;
  padding-block-start: var(--spacing-3);
}

.expertise--item {
  border-block-end: 1px solid var(--text-color-light-75);
  padding-block-end: var(--spacing-2);
}

.expertise--item-label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  user-select: none;
  grid-column: 1/-1;
}

.expertise--item-label::after {
  content: "↓";
  color: var(--text-color-light-100);
  font-size: var(--font-size-h4);
  font-family: var(--font-family-h4);
  transform: scaleY(100%);
  transition: all 0.2s ease;
}

.expertise--item-input {
  display: none;
}

.expertise--item-input:checked + .expertise--item-label::after {
  transform: scaleY(-100%);
}

.expertise--item-content {
  display: none;
  grid-column: 1/-2;
}

.expertise--item-input:checked ~ .expertise--item-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.expertise--item-content div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.expertise--item-cta {
  padding-block: var(--spacing-grid-gap);
}

.expertise--item-skills {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-1);
  flex-wrap: wrap;
}

.expertise--item-skills p {
  text-decoration: underline;
}

/* ====================
        PROCESS 
===================== */
.process--text {
  grid-column: 1/-1;
}

.process--content {
  grid-column: 1/-1;
  padding-block-start: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.process--steps {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.process--step-number {
  grid-column: 1/2;
  justify-self: flex-end;
}

.process--step-content {
  grid-column: 2/5;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* ====================
        VISION 
===================== */
.vision--text {
  grid-column: 1/-1;
  padding-block-end: var(--spacing-4);
}

.vision--content {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;
}

.vision--person {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-3);
  box-sizing: border-box;
  background-size: cover;
  background-position: center top;
}

.vision--person-name {
  padding: var(--spacing-1) var(--spacing-2);
  background-color: var(--color-black-100);
}

@media all and (min-width: 1024px) {
  .studio--content {
    row-gap: 0;
  }
  .studio--main {
    grid-column: 2/7;
    row-gap: var(--spacing-5);
  }
  .studio--logo {
    grid-column: 1/6;
    justify-self: start;
  }
  .studio--description {
    grid-column: 1/5;
  }
  .studio--location {
    grid-column: 8/11;
  }
  .studio--projects-container {
    flex-direction: row;
    gap: var(--spacing-grid-gap);
  }
  .studio--projects-left,
  .studio--projects-right,
  .studio--projects-list {
    gap: var(--spacing-4);
  }
  .studio--projects-item a {
    gap: var(--spacing-2);
  }
  .studio--projects-more {
    padding-block-start: var(--spacing-6);
    padding-block-end: 0;
  }
  .studio--dark {
    gap: var(--spacing-5);
  }
  .expertise--item-content {
    grid-column: 1/-1;
  }
  .expertise--item-input:checked ~ .expertise--item-content {
    display: grid;
  }
  .expertise--item-content div {
    grid-column: 1/6;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-block-end: var(--spacing-grid-gap);
  }
  .expertise--item-cta {
    padding-block: var(--spacing-grid-gap);
    grid-column: 6/-1;
    justify-self: center;
  }
  .process--text {
    grid-column: 1/6;
  }
  .process--content {
    grid-column: 1/10;
    padding-block-start: var(--spacing-6);
    display: grid;
    gap: var(--spacing-grid-gap);
  }
  .process--steps {
    grid-column: 1/5;
    gap: var(--spacing-6);
  }
  .process--steps:last-child {
    grid-column: 5/9;
  }
  .vision--text {
    grid-column: 1/6;
    padding-block-end: var(--spacing-6);
  }
  .vision--content {
    grid-column: 1/10;
    flex-direction: row;
    gap: var(--spacing-grid-gap);
    justify-content: space-between;
  }
}
.projects--target {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.projects--title h1 {
  grid-column: 2/-2;
}

.projects--container {
  row-gap: var(--spacing-3);
}

.projects--filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  grid-column: 2/-2;
  position: static;
  padding-block-end: var(--spacing-1);
}

.projects--filters-title {
  font-size: var(--font-size-h2);
  font-weight: 700;
}

.projects--filters-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--spacing-xs);
  column-gap: var(--spacing-2);
}

.projects--filters-item:first-child {
  width: 100%;
  margin-block-end: var(--spacing-0);
}

.projects--filters-item h5 {
  font-size: var(--font-size-h4);
}

.projects--content {
  grid-column: 2/-2;
}

.projects--list {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-2);
}

.projects--item {
  flex: 0 0 90%;
  height: auto;
  scroll-snap-align: start;
}

.projects--item a {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
}

.projects--item a picture {
  grid-column: 1/-1;
  aspect-ratio: 1/1;
}

.projects--item-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.projects--item-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
  grid-column: 1/8;
}

.projects--item-title {
  grid-column: 1/4;
}

.projects--item-description {
  grid-column: 5/8;
}

.projects--item-more {
  grid-column: 1/3;
  justify-self: left;
  text-align: left;
  padding-block-start: var(--spacing-1);
}

@media all and (min-width: 1024px) {
  .projects--title {
    display: none;
  }
  .projects--container {
    row-gap: var(--spacing-grid-gap);
  }
  .projects--filters {
    grid-column: 2/4;
    position: sticky;
    top: var(--spacing-6);
    align-self: start;
    padding-block-end: 0;
  }
  .projects--filters-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
  }
  .projects--filters-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
  }
  .projects--filters-item:first-child {
    width: auto;
  }
  .projects--filters-item h5 {
    font-size: var(--font-size-h5);
  }
  .projects--content {
    grid-column: 4/11;
  }
  .projects--list {
    flex-direction: column;
    gap: var(--spacing-6);
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .projects--item {
    flex: 0 0 auto;
    scroll-snap-align: none;
  }
  .projects--item a {
    display: grid;
    gap: var(--spacing-grid-gap);
  }
  .projects--item a picture {
    aspect-ratio: 7/4;
  }
  .projects--item-content {
    display: grid;
    gap: var(--spacing-grid-gap);
  }
  .projects--item-more {
    padding-block-start: 0;
  }
}
.project--infos {
  grid-area: 1/2/2/11;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.project--title {
  grid-column: 2/-2;
  padding-block-end: var(--spacing-1);
}

.project--date {
  grid-column: 2/-2;
  text-align: left;
  align-self: flex-end;
  font-style: italic;
  font-weight: 500;
}

.project--details {
  grid-column: 2/-2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-block-end: var(--spacing-2);
}

.project--services,
.project--skills {
  grid-column: 2/-2;
  padding-block-end: var(--spacing-2);
}

.project--services-list,
.project--skills-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.project--info-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
}

/* =======================
PROJECT SECTIONS
======================= */
.project--sections {
  row-gap: var(--spacing-1);
}

.justify-left,
.justify-right {
  grid-column: 2/-2;
}

/*TEXT SECTIONS*/
.project--section-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.project--section-text-title {
  text-transform: uppercase;
}

/*IMAGE SECTIONS*/
.project--section-Himage {
  grid-column: 2/-2;
}

.project--section-Himage img {
  width: 100%;
}

.project--section-video {
  grid-column: 2/-2;
}

.project--section-video-media {
  display: block;
  width: 100%;
  height: auto;
}

/*DOUBLE MEDIA SECTIONS*/
.project--section-double-image,
.project--section-double-video {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-1);
  grid-column: 2/-2;
}

.project--section-double-image > img,
.project--section-double-image > picture,
.project--section-double-video > video {
  flex: 1 1 0;
  min-width: 0;
}

/*NEXT PROJECT*/
.project--nextProject {
  grid-column: 2/-2;
}

@media all and (min-width: 1024px) {
  .project--title {
    grid-column: 2/6;
    padding-block-end: 0;
  }
  .project--date {
    grid-column: 7/11;
    text-align: right;
  }
  .project--details {
    grid-column: 2/4;
    gap: var(--spacing-3);
    padding-block-end: 0;
  }
  .project--services {
    grid-column: 4/6;
    padding-block-end: 0;
  }
  .project--skills {
    grid-column: 6/10;
    padding-block-end: 0;
  }
  .project--info-list {
    gap: var(--spacing-1);
  }
  .project--sections {
    row-gap: var(--spacing-4);
  }
  .justify-left {
    grid-column: 2/span 5;
  }
  .justify-right {
    grid-column: 6/span 5;
  }
  /*DOUBLE MEDIA SECTIONS*/
  .project--section-double-image,
  .project--section-double-video {
    gap: var(--spacing-2);
  }
}
.contact--title {
  grid-column: 2/-2;
}

.contact--location {
  grid-column: 2/-2;
  width: 100%;
  align-self: center;
  text-align: right;
  padding-block-start: var(--spacing-2);
}

.contact--infos-text {
  grid-column: 2/-2;
  font-weight: 300;
}

.contact--details {
  row-gap: var(--spacing-3);
}

.contact--details-intro {
  grid-column: 2/-2;
}

.contact--details-mail {
  grid-column: 2/4;
}

.contact--details-socials {
  grid-column: 4/6;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
}

.contact--form {
  row-gap: var(--spacing-6);
}

.contact--form-form {
  grid-column: 2/-2;
  grid-row: 1/2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.contact-form-send::after {
  font-size: var(--font-size-h4);
  color: var(--text-color-75);
}

.contact--form-line {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.contact--form-name {
  text-transform: initial;
}

.contact--form-img {
  grid-column: 2/-2;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
}

/* INPUTS */
.contact--form-button {
  display: none;
}

/* CSS Variables */
:root {
  --input-radius: 0px;
  --input-bg: #D9D7D3;
  --input-color: #030000;
  --input-placeholder: #3F3C3B;
  --input-focus-ring: 1px;
}

.contact--form-input {
  width: 100%;
  font-size: var(--font-family-p);
  padding: var(--spacing-1) var(--spacing-1);
  box-sizing: border-box;
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-color);
  border: 0px solid black;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact--form-input::placeholder {
  color: var(--input-placeholder);
}

.contact--form-input:focus {
  border-color: var(--color-black-100);
  box-shadow: 0 0 0 1px black;
}

textarea.contact--form-input {
  resize: none;
  min-height: calc(var(--spacing-6) * 2);
}

@media all and (min-width: 1024px) {
  .contact--title {
    grid-column: 2/7;
  }
  .contact--location {
    grid-column: 8/11;
    padding-block-start: 0;
  }
  .contact--details {
    row-gap: var(--spacing-grid-gap);
  }
  .contact--details-intro {
    grid-column: 2/5;
  }
  .contact--details-mail {
    grid-column: 7/9;
  }
  .contact--details-socials {
    grid-column: 9/11;
  }
  .contact--form {
    row-gap: var(--spacing-grid-gap);
  }
  .contact--form-form {
    grid-column: 2/7;
    grid-row: auto;
  }
  .contact--form-img {
    grid-column: 8/11;
    height: 100%;
    aspect-ratio: auto;
  }
}
.-anim__scrollHidden,
.-anim__scrollHidden-js {
  transform: translateY(calc(-100% * var(--nav-scroll-direction, -1) - 100.1%));
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.-anim__scrollHidden {
  --nav-scroll-direction: var(--scroll-direction);
  transition-delay: var(--nav-transition-duration);
}

.-anim__scrollHidden-js {
  --nav-scroll-direction: var(--js-scroll-direction, -1);
}