/* Hero 24 source geometry. Only fonts and Faten's colors are changed. */
.component24 {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  /* Local containing block for the source's fixed viewport composition. */
  transform: translateZ(0);
  background-color: #e6d9fa;
  color: #21112c;
  font-family: Satoshi, sans-serif;
  font-size: 16px;
  line-height: normal;
}
.component24 *, .component24 *::before, .component24 *::after { margin: 0; padding: 0; box-sizing: border-box; }
.component24 img { width: 100%; height: 100%; object-fit: cover; }
.component24 p { text-transform: uppercase; font-family: Satoshi, sans-serif; font-size: 0.7rem; }
.component24 a { text-decoration: none; text-transform: uppercase; font-family: Satoshi, sans-serif; font-size: 0.7rem; color: #21112c; }
.component24 .overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100svh; padding: 2em; background-color: #21112c; color: #fff1f7; display: flex; gap: 2em; overflow: hidden; pointer-events: none; }
.component24 .projects, .component24 .loader, .component24 .locations { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1em; }
.component24 .loader { align-items: center; gap: 0; }
.component24 .loader h1 { text-align: center; text-transform: uppercase; font-family: Satoshi, sans-serif; font-size: 2.5rem; font-weight: 900; font-style: italic; line-height: 0.9; -webkit-text-fill-color: transparent; background-clip: text; background-image: linear-gradient(0deg, #634269, #634269 50%, #fff1f7 0); background-size: 100% 200%; background-position: 0% 100%; color: #634269; }
.component24 .projects-header, .component24 .project-item, .component24 .locations-header, .component24 .location-item { display: flex; gap: 2em; opacity: 0; }
.component24 .projects-header > *, .component24 .project-item > * { flex: 1; }
.component24 .locations { align-items: center; }
.component24 .locations-header, .component24 .location-item { width: 50%; }
.component24 .project-item, .component24 .location-item { color: #8b6e91; }
.component24 .image-grid { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; display: flex; flex-direction: column; gap: 1em; z-index: 2; }
.component24 .grid-row { width: 100%; display: flex; gap: 1em; }
.component24 .img { position: relative; flex: 1; aspect-ratio: 1; clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); }
.component24 nav { position: fixed; width: 100vw; padding: 1em; display: flex; gap: 2em; }
.component24 nav > * { flex: 1; }
.component24 .links { display: flex; justify-content: space-around; align-items: center; }
.component24 .nav-logo { text-align: center; display: flex; justify-content: center; }
.component24 .nav-logo a { font-family: Satoshi, sans-serif; font-size: 1.75rem; font-weight: 900; font-style: italic; line-height: 0.9; }
.component24 .banner-img { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 20%; aspect-ratio: 4/5; }
.component24 .intro-copy { position: absolute; top: 45%; transform: translateY(-50%); width: 100%; padding: 0 8em; display: flex; justify-content: space-between; align-items: center; }
.component24 .title { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); }
.component24 .intro-copy h3, .component24 .title h1 { position: relative; text-transform: uppercase; color: #21112c; font-family: Satoshi, sans-serif; font-weight: 500; font-style: italic; line-height: 0.9; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
.component24 .title h1 { font-size: 3.5rem; }
.component24 .intro-copy h3 { font-size: 1.5rem; }
.component24 .intro-copy h3 .word, .component24 .title h1 .word { display: inline-block; position: relative; will-change: transform; margin-right: 0.1rem; }
.component24 .hero-img img { object-position: 60% 50%; }
.component24.component24-static .overlay { display: none; }
.component24.component24-static .image-grid .img:not(.hero-img) { visibility: hidden; }
.component24.component24-static .hero-img { transform: translateY(-50px) scale(4); clip-path: polygon(20% 10%, 80% 10%, 80% 90%, 20% 90%); }
.component24.component24-static .banner-img { transform: translate(-50%, -50%) scale(1); }
.component24.component24-static .banner-img-1 { left: 40%; rotate: -20deg; }
.component24.component24-static .banner-img-2 { left: 60%; rotate: 20deg; }
@media (max-width: 900px) {
  .component24 .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .component24 .projects, .component24 .locations, .component24 .intro-copy, .component24 .banner-img { display: none; }
  .component24 .title { width: 100%; bottom: 20%; display: flex; justify-content: center; }
  .component24 .title h1 { font-size: 2.5rem; }
  .component24 .image-grid { width: 75%; gap: 0.5em; }
  .component24 .grid-row { width: 95%; justify-content: space-around; gap: 0.5em; }
}
@media (prefers-reduced-motion: reduce) {
  .component24 .overlay { display: none; }
  .component24 .image-grid .img:not(.hero-img) { visibility: hidden; }
  .component24 .hero-img { transform: translateY(-50px) scale(4); clip-path: polygon(20% 10%, 80% 10%, 80% 90%, 20% 90%); }
  .component24 .banner-img { transform: translate(-50%, -50%) scale(1); }
  .component24 .banner-img-1 { left: 40%; rotate: -20deg; }
  .component24 .banner-img-2 { left: 60%; rotate: 20deg; }
}