@charset "UTF-8";
/* RESET */
/* @use "./base/base-reset.scss" as *;   EXEMPLE */
html {
  background-color: var(--color-white);
}

body {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-family: var(--fontfamily-DMSans);
  letter-spacing: -0.05em;
}

h1 {
  font-size: var(--fontsize-title);
  font-weight: var(--fontweight-h1);
  margin: 0;
}

h2 {
  font-size: var(--fontsize-subtitle);
  font-weight: var(--fontweight-h2);
  margin: 0;
}

h3 {
  font-size: var(--fontsize-subtitle);
  font-weight: var(--fontweight-p);
  margin: 0;
}

p {
  font-size: var(--fontsize-core);
  font-weight: var(--fontweight-p);
  margin: 0;
}

/* tablet */
@media all and (min-width: 768px) {
  h1 {
    font-size: var(--fontsize-h4);
  }
  h2 {
    font-size: var(--fontsize-p);
  }
  h3 {
    font-size: var(--fontsize-p);
  }
}
/* intermediate */
@media all and (min-width: 1024px) {
  h1 {
    font-size: var(--fontsize-h3);
  }
  h2 {
    font-size: var(--fontsize-h5);
  }
  h3 {
    font-size: var(--fontsize-p);
  }
}
/* desktop */
@media all and (min-width: 1440px) {
  h1 {
    font-size: var(--fontsize-h1);
  }
  h2 {
    font-size: var(--fontsize-h5);
  }
  h3 {
    font-size: var(--fontsize-h5);
  }
}
ul {
  padding: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--color-text-75);
}

@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: "DMSans";
  src: url("../fonts/DMSans[opsz,wght].ttf") format("truetype"), url("../fonts/DMSans[opsz,wght].ttf") format("truetype") tech("variations");
  font-weight: 100 1000;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DMSans";
  src: url("../fonts/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype"), url("../fonts/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype") tech("variations");
  font-weight: 100 1000;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/Sentient-Variable.woff2") format("woff2"), url("../fonts/Sentient-Variable.woff") format("woff");
  font-weight: 100 1000;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/Sentient-VariableItalic.woff2") format("woff2"), url("../fonts/Sentient-VariableItalic.woff") format("woff");
  font-weight: 100 1000;
  font-weight: normal;
  font-style: italic;
}
:root {
  --spacing-xxs: 6px;
  --spacing-xs: 9px;
  --spacing-s: 12px;
  --spacing-m: 18px;
  --spacing-l: 24px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-xxxl: 96px;
  --spacing-jumbo: 244px;
}

.grid-layout {
  display: grid;
  grid-template-columns: calc(var(--spacing-l) - var(--spacing-xs)) repeat(5, 1fr) calc(var(--spacing-l) - var(--spacing-xs));
  column-gap: var(--spacing-xs);
  row-gap: var(--spacing-xl);
}

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

.grid-layout__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.grid-layout__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

@media all and (min-width: 768px) {
  .grid-layout {
    grid-template-columns: calc(var(--spacing-xl) - var(--spacing-s)) repeat(7, 1fr) calc(var(--spacing-xl) - var(--spacing-s));
    column-gap: var(--spacing-s);
  }
  .grid-layout > * {
    grid-column: 3/-3;
  }
  .grid-layout__header {
    gap: var(--spacing-l);
  }
}
@media all and (min-width: 1024px) {
  .grid-layout {
    grid-template-columns: calc(var(--spacing-xl) - var(--spacing-m)) repeat(9, 1fr) calc(var(--spacing-xl) - var(--spacing-m));
    column-gap: var(--spacing-m);
    row-gap: calc(var(--spacing-xl) + var(--spacing-l));
  }
  .grid-layout__header {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-l);
  }
  .grid-layout__header p {
    max-width: 25vw;
  }
}
@media all and (min-width: 1440px) {
  .grid-layout {
    grid-template-columns: calc(var(--spacing-xxl) - var(--spacing-l)) repeat(9, 1fr) calc(var(--spacing-xxl) - var(--spacing-l));
    column-gap: var(--spacing-xxxl);
  }
  .grid-layout__header {
    gap: var(--spacing-xl);
  }
}
@media all and (min-width: 750px) {
  .mobile {
    display: none;
  }
}
:root {
  --section-spacing-mobile: calc(var(--spacing-xl)*2);
  --section-spacing-tablet: calc(var(--spacing-xl)*3);
  --section-spacing-intermediate: calc(var(--spacing-xl)*4);
  --section-spacing-desktop: calc(var(--spacing-xxl)*4);
}

.section {
  padding-block-start: var(--section-spacing-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-block-start: var(--section-spacing-tablet);
  }
}
@media (min-width: 1024px) {
  .section {
    padding-block-start: var(--section-spacing-intermediate);
  }
}
@media (min-width: 1440px) {
  .section {
    padding-block-start: var(--section-spacing-desktop);
  }
}
/* ===================================
=colors
=================================== */
:root {
  /* basic variables */
  --color-white: #FFFCFC;
  --color-black: #030000;
  --color-black-75: #423F3F;
  --color-black-50: #817E7E;
  --color-black-25: #C0BDBD;
  --color-black-opacity-75: rgba(3, 0, 0, 0.75);
  --color-black-opacity-50: rgba(3, 0, 0, 0.50);
  --color-black-opacity-25: rgba(3, 0, 0, 0.25);
  /* incident variables */
  --color-background: var(--color-white);
  --color-text: var(--color-black);
  --color-text-75: var(--color-black-75);
  --color-text-50: var(--color-black-50);
  --color-text-light: var(--color-white);
}

/* ===================================
=font size
=================================== */
:root {
  /* basic variables */
  --fontsize-h1: calc(61.04 / 16 * 1rem);
  --fontsize-h2: calc(48.83 / 16 * 1rem);
  --fontsize-h3: calc(39.06 / 16 * 1rem);
  --fontsize-h4: calc(31.25 / 16 * 1rem);
  --fontsize-h5: calc(25 / 16 * 1rem);
  --fontsize-p: 1rem;
  --fontsize-small: calc(12.8 / 16 * 1rem);
  --fontsize-xsmall: calc(10.24 / 16 * 1rem);
  /* mobile variables */
  --fontsize-core: var(--fontsize-p);
  --fontsize-subtitle: var(--fontsize-p);
  --fontsize-title: var(--fontsize-h5);
  /* tablet variables */
}
@media all and (min-width: 768px) {
  :root {
    --fontsize-core: var(--fontsize-p);
    --fontsize-subtitle: var(--fontsize-p);
    --fontsize-title: var(--fontsize-h4);
  }
}
:root {
  /* intermediate variables */
}
@media all and (min-width: 1024px) {
  :root {
    --fontsize-core: var(--fontsize-p);
    --fontsize-subtitle: var(--fontsize-h5);
    --fontsize-title: var(--fontsize-h3);
  }
}
:root {
  /* desktop variables */
}
@media all and (min-width: 1440px) {
  :root {
    --fontsize-core: var(--fontsize-p);
    --fontsize-subtitle: var(--fontsize-h5);
    --fontsize-title: var(--fontsize-h1);
  }
}

/* ===================================
=font family
=================================== */
:root {
  --fontfamily-DMSans: "DMSans";
}

/* ===================================
=font weight
=================================== */
:root {
  --fontweight-h1: 700;
  --fontweight-h2: 600;
  --fontweight-p: 400;
}

/* ===================================
=font color
=================================== */
:root {
  --fontcolor: var(--color-text);
  --fontcolor-75: var(--color-text-75);
  --fontcolor-50: var(--color-text-50);
}

/* ===================================
=classes
=================================== */
.fc-75 {
  color: var(--fontcolor-75);
}

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

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 100;
}

:root {
  --scale-hover: 1.075;
}

/* banner */
.banner {
  position: relative;
  width: 100%;
  grid-area: -1/1/1/-1;
}
.banner__slide {
  display: none;
  flex: 0 0 100%;
}
.banner__slide--active {
  display: block;
  position: relative;
}
.banner img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/5;
  object-fit: cover; /* preserve aspect, center & crop to fill */
  object-position: center; /* ensure centered cropping */
  display: block;
}
.banner__desc {
  position: absolute;
  max-width: calc(50vw - var(--spacing-l));
  bottom: var(--spacing-l);
  right: var(--spacing-l);
  padding: var(--spacing-s);
  color: var(--color-text-light);
  background: var(--color-black-opacity-25);
  font-size: var(--fontsize-small);
}
.banner__indicators {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xxs);
  height: 100%;
  position: absolute;
  top: 0px;
  padding-left: var(--spacing-l);
  z-index: 0;
}
.banner__indicator {
  display: inline-block;
  width: calc(var(--spacing-xxs) / 2);
  height: var(--spacing-s);
  border-radius: var(--spacing-l);
  background: var(--color-black-opacity-25);
  transition: all 0.3s;
  opacity: 0.5;
  transform: scaleX(1);
}
.banner__indicator--active {
  height: var(--spacing-l);
  opacity: 1;
  background: var(--color-white);
  transform: scaleX(1.5);
}

@media all and (min-width: 768px) {
  .banner {
    font-size: var(--fontsize-core);
  }
  .banner img {
    aspect-ratio: 18/5;
  }
  .banner__desc {
    bottom: var(--spacing-l);
    right: var(--spacing-xl);
    max-width: calc(25vw - var(--spacing-l));
  }
}
@media all and (min-width: 1440px) {
  .banner__desc {
    bottom: var(--spacing-l);
    right: var(--spacing-xxl);
    max-width: calc(12.5vw - var(--spacing-l));
  }
}
/* Intro */
.grid-layout__header--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.grid-layout__header--center h1 {
  max-width: 50vw;
}

@media all and (min-width: 768px) {
  .grid-layout__header--center h1 {
    max-width: none;
  }
}
@media all and (min-width: 1024px) {
  .grid-layout__header--center p {
    max-width: none;
    font-size: 18px;
  }
}
@media all and (min-width: 1440px) {
  .grid-layout__header--center {
    grid-column: 4/-4;
  }
  .grid-layout__header--center h1 {
    text-wrap-mode: nowrap;
  }
}
/* Carousel */
.carousel {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-m);
  overflow-x: auto; /* enable horizontal scroll */
  scroll-behavior: smooth;
  padding-top: var(--spacing-s);
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  flex: 0 0 100%; /* don't shrink, don't grow, stay at 100% */
  height: auto;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: center;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover; /* preserve aspect, center & crop to fill */
  object-position: center; /* ensure centered cropping */
  display: block;
  transition: 0.25s ease-in-out;
}

.carousel__slide img:hover {
  transform: scale(var(--scale-hover));
  filter: none;
}

.carousel__description {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.carousel--2items {
  padding-top: 0px;
}

.carousel__slide-img {
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .carousel {
    overflow-x: visible;
    gap: var(--spacing-s);
  }
  .carousel__slide {
    flex: auto;
  }
  .carousel__slide img {
    aspect-ratio: 1/1;
  }
  .carousel--2items {
    overflow-x: auto;
  }
  .carousel--2items .carousel__slide {
    flex: 0 0 calc(50% - var(--spacing-s) / 2);
  }
  .carousel--2items .carousel__slide img {
    aspect-ratio: 4/5;
  }
}
@media all and (min-width: 1024px) {
  .carousel--2items h2 {
    font-size: var(--fontsize-p);
  }
  .carousel--2items .carousel__slide {
    flex: auto;
  }
}
/* ===================================
=SERVICES
=================================== */
.grid-layout__content--services {
  gap: var(--spacing-s);
}

.grid-layout__content--services > * {
  border-bottom: 1px solid var(--color-black);
  padding-bottom: var(--spacing-s);
}

.hide-content {
  visibility: hidden;
}

.service-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.service-header :first-child {
  grid-column: 1/3;
}

.service-header :nth-child(2) {
  grid-column: 4/5;
}

.service-header :last-child {
  grid-column: 5/6;
  text-align: right;
}

.service-content input {
  display: none;
}

.service-content {
  padding-block: var(--spacing-s);
}

@media all and (min-width: 1440px) {
  .service-content {
    max-width: 40vw;
  }
}
.service__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-inline: var(--spacing-s);
}

.service__item {
  font-size: var(--fontsize-core);
}

.service__item p:first-child {
  font-weight: 600;
}

/* Row of clickable labels */
.tab-buttons {
  display: flex;
  padding-top: var(--spacing-s);
  gap: var(--spacing-xxs);
}

.tab-buttons label {
  padding: var(--spacing-xxs) var(--spacing-xs);
  font-size: var(--fontsize-small);
  border: 1px solid var(--color-black);
  border-radius: var(--spacing-l);
  transition: 0.25s ease-in-out;
  cursor: pointer;
}

/* Hide all content by default */
.tab-content {
  display: none;
  margin-top: var(--spacing-s);
  gap: calc(var(--spacing-xxs));
}

.tab-content__project {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-xxs));
}

.tab-content__image {
  overflow: hidden;
}

.tab-content__image img {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover; /* preserve aspect, center & crop to fill */
  object-position: center; /* ensure centered cropping */
  display: block;
  filter: grayscale(100%);
  transition: 0.25s ease-in-out;
}

.tab-content__image img:hover {
  transform: scale(1.125);
  filter: none;
}

.tab-content__description {
  display: flex;
  justify-content: space-between;
}

/* Show the matched content */
/* ======== OLD ========
#tab1:checked ~ #content1 { display: flex; }
#tab2:checked ~ #content2 { display: flex; }
#tab3:checked ~ #content3 { display: flex; }
*/
/* ======== NEW ======== */
.projectSub__input:checked + .tab-content {
  display: flex;
}

/* Optional: highlight active tab */
/* ======== OLD ========
#tab1:checked + #tab2 + #tab3 ~ .tab-buttons label[for="tab1"],
#tab2:checked + #tab3 ~ .tab-buttons label[for="tab2"],
#tab3:checked ~ .tab-buttons label[for="tab3"] {
  background: var(--color-black);
  color: var(--color-text-light);
}
*/
/* ======== NEW ======== */
.service-content:has(#tab1:checked) .tab-buttons label[for=tab1],
.service-content:has(#tab2:checked) .tab-buttons label[for=tab2],
.service-content:has(#tab3:checked) .tab-buttons label[for=tab3],
.service-content:has(#tab4:checked) .tab-buttons label[for=tab4],
.service-content:has(#tab5:checked) .tab-buttons label[for=tab5],
.service-content:has(#tab6:checked) .tab-buttons label[for=tab6],
.service-content:has(#tab7:checked) .tab-buttons label[for=tab7],
.service-content:has(#tab8:checked) .tab-buttons label[for=tab8],
.service-content:has(#tab9:checked) .tab-buttons label[for=tab9],
.service-content:has(#tab10:checked) .tab-buttons label[for=tab10],
.service-content:has(#tab11:checked) .tab-buttons label[for=tab11],
.service-content:has(#tab12:checked) .tab-buttons label[for=tab12],
.service-content:has(#tab13:checked) .tab-buttons label[for=tab13] {
  background: var(--color-black);
  color: var(--color-text-light);
}

.banner--project {
  aspect-ratio: 16/9;
}

.projectPage__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  align-items: center;
}

.project-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.project-content img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5/6;
  object-fit: cover;
  object-position: center;
  display: block;
}

.carousel--project img {
  filter: none;
}

.carousel--project .tall {
  flex: 0 0 50%;
  aspect-ratio: 4/5;
}

.carousel--project .wide {
  flex: 0 0 100%;
  aspect-ratio: 16/9;
}

@media all and (min-width: 768px) {
  .banner--project {
    aspect-ratio: 6/4;
  }
  .project-grid .grid-layout__content:first-child {
    grid-column: 3/6;
  }
  .project-grid .grid-layout__content:last-child {
    grid-column: 5/-3;
  }
  .grid-layout__content--rinf {
    grid-column: 3/-1;
  }
  .carousel--project {
    overflow-x: auto;
  }
  .carousel--project .tall {
    flex: 0 0 35%;
    aspect-ratio: 4/5;
  }
  .carousel--project .wide {
    flex: 0 0 60%;
    aspect-ratio: 16/9;
  }
}
@media all and (min-width: 1024px) {
  .banner--project {
    aspect-ratio: 16/9;
  }
  .project-grid .grid-layout__content:first-child,
  .project-grid .grid-layout__content:last-child {
    grid-column: 3/-3;
  }
  .project-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15%;
  }
  .project-content--reverse {
    direction: rtl;
  }
  .project-content--reverse p {
    align-self: flex-end;
  }
}
.projectCards__filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
  margin-bottom: var(--spacing-xxl);
}

.filters__input {
  display: none;
}

.filters__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--spacing-s);
  row-gap: var(--spacing-l);
}

.filters__label {
  padding: var(--spacing-xs) var(--spacing-s);
  box-sizing: border-box;
  border: 1px solid var(--color-black);
  border-radius: var(--spacing-l);
  transition: 0.25s ease-in-out;
  cursor: pointer;
  white-space: nowrap;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
   supported by Chrome, Edge, Opera and Firefox */
}

.projectCards__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-inline: var(--spacing-m);
}

@media all and (min-width: 768px) {
  .projectCards__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-l);
    margin-inline: var(--spacing-s);
  }
}
@media all and (min-width: 1024px) {
  .projectCards__list {
    margin-inline: var(--spacing-l);
  }
}
@media all and (min-width: 1440px) {
  .projectCards__list {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--spacing-l);
  }
}
/* ensure each li behaves as a grid item */
.projectCards__item {
  width: 100%;
  box-sizing: border-box;
  display: none;
}

.projectCards__item a {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.projectCard__carrousel {
  display: flex;
  gap: var(--spacing-s);
  overflow: hidden;
}

.projectCard__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: all 0.25s ease;
}

.projectCard__image:hover {
  transform: scale(var(--scale-hover));
}

.projectCard__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.projectCard__content div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

@media all and (min-width: 768px) {
  .projectCard__content div:first-child {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-m);
  }
}
@media all and (min-width: 1024px) {
  .projectCard__content div:first-child {
    gap: var(--spacing-l);
  }
}
.projectCard__content div div {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xxs);
}

.projectCard__content div div p {
  font-style: italic;
}

@media all and (min-width: 1024px) {
  .projectCard__content div div {
    line-height: var(--fontsize-h5);
  }
}
.projectCard__categories {
  margin-block-start: var(--spacing-s);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}

.projectCard__categories p {
  padding: var(--spacing-xxs) var(--spacing-xs);
  border: 1px solid var(--color-black);
  border-radius: var(--spacing-m);
  font-size: var(--fontsize-small);
  box-sizing: border-box;
  white-space: nowrap;
}

/* ============ Filter ALL ============ */
#filter-all:checked ~ .projectCards__filters .filters__label[for=filter-all] {
  background: var(--color-black);
  color: var(--color-text-light);
}

#filter-all:checked ~ .projectCard__container .projectCards__item {
  display: block;
}

#filter-all:checked ~ .projectCard__container .projectCard__categories p {
  background: var(--color-black);
  color: var(--color-text-light);
}

body:has(.mainnav__toggle:checked) {
  overflow: hidden;
  height: 100vh;
  box-sizing: border-box;
}

.-invisible {
  margin-right: auto;
  pointer-events: none;
  opacity: 0;
}

.-anim__scrollHidden {
  transform: translateY(calc(-100% * var(--scroll-direction) - 100.1%));
  transition-property: transform;
  transition-duration: 0.2s;
  transition-delay: var(--nav-transition-duration);
  transition-timing-function: ease-in-out;
}

.mainnav__container {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  z-index: 1;
  background-color: var(--color-background);
  box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.45);
}

.mainnav__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.mainnav__bar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.mainnav__bar a {
  pointer-events: all;
}

.mainnav__icon {
  margin-left: auto;
  padding: var(--spacing-m);
  cursor: pointer;
  pointer-events: all;
}

.mainnav__icon::after {
  content: "menu ";
  font-size: 1.5rem;
  font-weight: bold;
}

.mainnav__icon:first-child {
  margin-left: 0;
}

/*===================
= NAVIGATION 
===================*/
.mainnav__nav {
  width: 100%;
  height: 100vh;
  position: absolute;
  right: -100%;
  z-index: 1;
  background-color: white;
  transition: all 0.3s ease-in-out;
}

.mainnav__list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-l);
}

.mainnav__item h2 {
  font-size: var(--fontsize-h4);
}

.mainnav__item--active h2 {
  text-decoration: underline;
}

/* ---- TOGGLE NAVIGATION ---- */
.mainnav__toggle {
  display: none;
}

.mainnav__toggle:checked ~ .mainnav__nav {
  right: 0;
  z-index: 1;
}

.mainnav__toggle:checked ~ .mainnav__bar .mainnav__icon::after {
  content: "close";
}

/*===================
= MEDIA QUERIES
===================*/
@media all and (min-width: 768px) {
  .mainnav__container {
    padding-inline: var(--spacing-xl);
  }
  .mainnav__content {
    flex-direction: row;
  }
  .mainnav__bar {
    justify-content: space-between;
  }
  .mainnav__name {
    padding-block: var(--spacing-l);
  }
  .mainnav__icon {
    display: none !important;
  }
  .mainnav__nav {
    width: 100%;
    position: absolute;
    height: auto;
    right: 0;
    transition: none;
    background-color: transparent;
  }
  .mainnav__list {
    flex-direction: row;
    gap: var(--spacing-xl);
  }
  .mainnav__item h2 {
    font-size: var(--fontsize-p);
  }
}
@media all and (min-width: 1024px) {
  .mainnav__item h2 {
    font-size: var(--fontsize-h5);
  }
}
.banner--footer img {
  aspect-ratio: 16/9;
}

.grid-layout__content--footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.grid-layout__content--footer--contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

@media all and (min-width: 768px) {
  .banner--footer img {
    aspect-ratio: 18/5;
  }
  .grid-layout__content--footer {
    flex-direction: row;
  }
}
@media all and (min-width: 1024px) {
  .grid-layout__content--footer {
    flex-direction: row;
    gap: var(--spacing-xxxl);
  }
}
@media all and (min-width: 1440px) {
  .grid-layout__content--footer {
    justify-content: center;
    gap: var(--spacing-jumbo);
  }
}
.footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.footer__contact-item-link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: var(--color-text-75);
}

.footer-copyright {
  font-size: var(--fontsize-small);
  text-align: center;
  padding-bottom: var(--spacing-s);
}

@media all and (min-width: 1024px) {
  .footer-copyright {
    font-size: var(--fontsize-p);
  }
}
.line {
  border-top: 1px solid var(--color-black);
}

/* 1. Opt‑in to animating to/from height:auto */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}
/* 3. Animate the *content* of <details>, not the element itself */
details::details-content {
  height: 0;
  overflow: clip; /* avoid content bleeding while animating */
  /* Important: also transition content-visibility discretely */
  transition: height 250ms ease, content-visibility 250ms ease allow-discrete;
}

/* 4. When <details open>… animate to auto-height */
details[open]::details-content {
  height: auto; /* this is where interpolate-size kicks in */
}

summary {
  list-style: none;
  cursor: pointer;
}