/* =========================================
   1. RESET
   ========================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
}

img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  display: block;
}

a {
  background-color: transparent;
}

a:active, a:hover {
  outline: 0;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

textarea {
  overflow: auto;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

/* =========================================
   2. FONT FACES
   ========================================= */

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal Extralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Area;
  src: url("../fonts/area/Area Normal Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   3. CSS VARIABLES
   ========================================= */

:root {
  /* Colors */
  --srf-primary: #000;
  --srf-secondary: #7300ff;
  --srf-hovered: #a085ff;
  --srf-focused: #605bff;
  --srf-contrast: #e0e0e0;
  --srf-contrast-secondary: #bbb;
  --srf-disabled: #aaa;
  --srf-secondary-overlay: #2c2c2c80;
  --txt-primary: #ddd;
  --txt-secondary: #818181;
  --txt-hovered: #a085ff;
  --txt-focused: #8b89ff;
  --txt-contrast: #272727;
  --txt-disabled: #dddddd80;
  --strk-primary: #ddd;
  --strk-secondary: #818181;
  --strk-hovered: #a085ff;
  --strk-focused: #605bff;
  --strk-contrast: #363636;
  --strk-disabled: #ddd3;

  /* Fonts */
  --font-body: Area, Arial, sans-serif;
  --font-heading: Area, Arial, sans-serif;

  /* Spacing */
  --0: 0px;
  --1: .25rem;
  --2: .5rem;
  --3: 1rem;
  --4: 1.5rem;
  --5: 2rem;
  --6: 2.5rem;
  --7: 3rem;
  --8: 4rem;
  --9: 3.5rem;
  --10: 4.5rem;
  --11: 5rem;
  --12: 5.5rem;
  --13: 6rem;
  --14: 6.5rem;
  --15: 13rem;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #7300ff, #0055dd);
  --gradient-hover: linear-gradient(135deg, #a085ff, #4d9fff);
}

/* =========================================
   4. BASE STYLES
   ========================================= */

body {
  background-color: var(--srf-primary);
  font-family: var(--font-body);
  color: var(--txt-primary);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1rem;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--srf-secondary);
  border-radius: 3px;
}

h1 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2rem;
}

h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.5rem;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3rem;
}

h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2rem;
}

h5 {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  line-height: .875rem;
}

h6 {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  line-height: .75rem;
}

p {
  font-size: .8rem;
  line-height: 1rem;
}

a {
  color: var(--txt-primary);
  font-family: var(--font-body);
}

a:hover {
  color: var(--txt-hovered);
}

label {
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  display: block;
}

/* =========================================
   5. NAVIGATION
   ========================================= */

.cont-nav {
  z-index: 10;
  padding: var(--4) var(--5);
  gap: var(--3);
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.3s ease;
}

.cont-logo-nav {
  width: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.logo-gradient-bg {
  width: 100%;
  aspect-ratio: 1;
  background: var(--gradient-primary);
  opacity: 0;
  transition: background 0.3s ease;
  -webkit-mask-image: url('../images/001_Brand/YX_Logo_Filled White.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../images/001_Brand/YX_Logo_Filled White.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.cont-logo-nav:hover .logo-gradient-bg {
  background: var(--gradient-hover);
}

/* =========================================
   6. BUTTONS
   ========================================= */

.link-button {
  display: none;
  padding: var(--2) var(--3);
  gap: var(--2);
  background: var(--gradient-primary);
  text-transform: capitalize;
  border-radius: 500px;
  text-decoration: none;
  transition: all 0.3s ease;
  color: var(--txt-primary);
}

.link-button:hover {
  background: var(--gradient-hover);
  color: var(--txt-primary);
  animation: gentle-bob 1.5s ease-in-out infinite;
}

.link-button:active, .link-button:focus {
  background-color: var(--srf-focused);
}

@keyframes gentle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}


/* =========================================
   7. HERO SECTION
   ========================================= */

.cont-hero-scroll {
  width: 100%;
  height: 100svh;
  position: relative;
  overflow: clip;
}

.cont-hero-sticky {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.con-hero-colour {
  background-color: var(--srf-secondary);
  mix-blend-mode: color-burn;
  position: absolute;
  inset: 0%;
  z-index: 1;
}

.cont-mask {
  z-index: 5;
  mix-blend-mode: darken;
  background-color: #000;
  width: 100%;
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--4);
  justify-content: center;
  align-items: center;
}

.cont-img-hero {
  width: 50px;
  position: relative;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-logo-hero {
  width: 100%;
  height: auto;
}

.cont-hero-txt {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.heading {
  letter-spacing: .1rem;
  font-weight: 200;
}

.cont-hero-tooltip {
  z-index: 6;
  padding-bottom: var(--5);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.cont-hero-tagline {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.hero-tagline {
  max-width: min(50vw, 800px);
  text-align: left;
  line-height: 1.6;
}

.hero-tagline-word {
  display: inline-block;
  color: #fff;
}

.link-float {
  gap: var(--3);
  flex-flow: column;
  align-self: center;
  text-decoration: none;
}

.link-float:hover {
  background-color: transparent;
}

/* =========================================
   8. GALLERY
   ========================================= */

.cont-snap {
  flex-flow: column;
  align-self: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  display: flex;
  position: relative;
}

.sec-snap {
  background-color: var(--srf-primary);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.sec-snap._100svh {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
}

.cont-gallery-img {
  padding: var(--5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cont-gallery-img img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.cont-label {
  z-index: 5;
  padding: var(--5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
}

.sec-label {
  z-index: 10;
  padding: var(--2) var(--3);
  background-color: var(--srf-secondary-overlay);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.gallery-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* =========================================
   9. FILTER BAR
   ========================================= */

.filter-bar {
  position: fixed;
  bottom: var(--5);
  right: var(--5);
  z-index: 9;
  display: flex;
  gap: var(--1);
  padding: var(--1);
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.filter-bar.visible {
  opacity: 1;
  pointer-events: auto;
}

.filter-btn {
  padding: var(--1) 0.75rem;
  background-color: transparent;
  color: var(--txt-primary);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.filter-btn:hover {
  background: var(--gradient-hover);
  border-color: transparent;
  color: #fff;
  animation: gentle-bob 1.5s ease-in-out infinite;
}

.filter-btn.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

/* =========================================
   10. FOOTER
   ========================================= */

footer-component {
  width: 100%;
}

.sec-footer {
  padding: var(--3) var(--5) var(--11);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.footer-left,
.footer-right {
  display: flex;
  flex-direction: column;
  gap: var(--1);
}

.footer-right {
  text-align: right;
}

.navi-footer-item {
  opacity: .6;
  font-family: var(--font-heading);
  color: var(--txt-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0;
  font-weight: 400;
  line-height: 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.navi-footer-item:hover {
  opacity: .9;
  color: var(--txt-hovered);
}

/* =========================================
   11. UTILITY CLASSES
   ========================================= */

.text-small {
  font-size: .7rem;
  line-height: .9rem;
}

.text-semibold {
  font-weight: 600;
}

.flex-h-l-c {
  gap: var(--1);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.divider {
  background-color: var(--strk-secondary);
  width: 100%;
  height: 1px;
  display: flex;
}

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

.text-cemter {
  text-align: center;
}

.cont-max-width {
  gap: var(--13);
  flex-flow: column;
  width: 100%;
  max-width: 1900px;
  display: flex;
  position: relative;
}

/* =========================================
   12. CONTACT PAGE
   ========================================= */

.cont-contact-page {
  min-height: 100vh;
  padding-top: 120px;
  background-color: var(--srf-primary);
  color: var(--txt-primary);
}

.sec-about {
  padding: var(--8) var(--7);
  max-width: 1200px;
  margin: 0 auto;
}

.about-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--6);
  color: var(--txt-primary);
}

.about-text p {
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: var(--5);
  color: var(--txt-primary);
  max-width: 800px;
}

.sec-contact-main {
  padding: var(--8) var(--7);
  max-width: 1200px;
  margin: 0 auto;
}

.sec-social {
  padding: var(--6) var(--7);
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.social-links {
  display: flex;
  gap: var(--4);
  justify-content: center;
}

.social-link {
  padding: var(--3) var(--5);
  background: var(--gradient-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.social-link:hover {
  background: var(--gradient-hover);
  color: #fff;
  animation: gentle-bob 1.5s ease-in-out infinite;
}

/* Contact form */
.sec-contact {
  gap: var(--10);
  flex-flow: column;
  width: 100%;
  max-width: 500px;
  display: flex;
}

.flex-v-l-t-st {
  gap: var(--5);
  flex-flow: column;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}

.flex-v-l-t-st.spacing-3 {
  gap: var(--3);
}

.link-noline {
  display: flex;
  flex-flow: column;
  gap: var(--3);
  text-decoration: none;
  transition: all .1s;
}

.flex-v-c-c-gr {
  gap: var(--5);
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.form-block {
  flex: 1;
  align-self: stretch;
}

.form-wrapper {
  margin: 0 0 15px;
}

.contact-form {
  gap: var(--3);
  flex-flow: column;
  display: flex;
}

.flex-h-l-t {
  gap: var(--2);
  flex-flow: row;
  align-items: flex-start;
  display: flex;
}

.form-text-input {
  padding: var(--3);
  color: var(--txt-primary);
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 100px;
  margin-bottom: 0;
  width: 100%;
  height: 38px;
  font-size: 14px;
  line-height: 1.42857;
  transition: border-color .4s;
}

.form-text-input:hover {
  border-color: var(--strk-hovered);
  color: var(--txt-hovered);
}

.form-text-input:focus {
  border-color: var(--strk-focused);
  color: var(--txt-focused);
  outline: 0;
}

.form-text-input::placeholder {
  color: var(--txt-secondary);
}

.form-row {
  gap: var(--3);
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.form-text-area-input {
  padding: var(--3);
  color: var(--txt-primary);
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 20px;
  max-width: 100%;
  width: 100%;
  min-height: 150px;
  max-height: 200px;
  margin-bottom: 0;
  font-size: 14px;
  transition: border-color .4s;
}

.form-text-area-input:hover {
  border-color: var(--strk-hovered);
  color: var(--txt-hovered);
}

.form-text-area-input:focus {
  border-color: var(--strk-focused);
  color: var(--txt-focused);
  outline: 0;
}

.form-text-area-input::placeholder {
  color: var(--txt-secondary);
}

.btn-submit {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-success {
  text-align: center;
  padding: 20px;
  display: none;
}

.form-error {
  margin-top: 10px;
  padding: 10px;
  display: none;
}

.success-message {
  padding: var(--7) var(--7) var(--7) var(--3);
  background: var(--gradient-primary);
}

.error-message {
  margin-top: var(--7);
  padding: var(--7);
  background: var(--gradient-primary);
}

.text-error {
  color: #8f2929;
}

.crnr-r-t-s {
  border-top-right-radius: 120px;
  overflow: hidden;
}

/* =========================================
   13. PROJECT PAGES
   ========================================= */

.project-page {
  background-color: var(--srf-primary);
  color: var(--txt-primary);
}

.project-hero {
  height: 70vh;
  position: relative;
  overflow: hidden;
}

.project-hero-image {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.project-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-info {
  padding: var(--8) var(--7);
  max-width: 1200px;
  margin: 0 auto;
}

.project-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--7);
  align-items: start;
}

.project-title-section h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--4);
  color: var(--txt-primary);
}

.project-tags {
  display: flex;
  gap: var(--2);
  flex-wrap: wrap;
}

.project-tag {
  padding: var(--2) var(--4);
  background: var(--gradient-primary);
  color: #fff;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: var(--3);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--1);
}

.meta-label {
  font-size: 0.875rem;
  color: rgba(221, 221, 221, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.meta-value {
  font-size: 1.125rem;
  color: var(--txt-primary);
}

.project-description {
  padding: 0 var(--7) var(--8);
  max-width: 1200px;
  margin: 0 auto;
}

.description-content p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--txt-primary);
  max-width: 800px;
}

.project-gallery {
  padding: var(--8) var(--7);
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--4);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--2);
  cursor: pointer;
  transition: transform 0.3s ease;
  aspect-ratio: 4/3;
}

.gallery-item:hover {
  transform: scale(1.02);
}

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

.project-nav {
  padding: var(--8) var(--7);
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(221, 221, 221, 0.2);
}

.project-nav-grid {
  display: flex;
  gap: var(--4);
  justify-content: space-between;
  flex-wrap: wrap;
}

.project-nav-link {
  padding: var(--3) var(--5);
  background-color: transparent;
  color: var(--txt-primary);
  border: 1px solid var(--txt-primary);
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

.project-nav-link:hover {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}

.back-link {
  margin-right: auto;
}

/* =========================================
   14. MEDIA QUERIES
   ========================================= */

@media screen and (max-width: 991px) {
  h1, h2, h3, h4, h5, h6, p {
    text-align: left;
  }

  .filter-bar {
    right: var(--3);
  }

  .cont-mask {
    gap: var(--3);
  }

  .sec-footer {
    padding: var(--3) var(--3) var(--11);
  }

  .navi-footer-item {
    text-align: left;
  }

  .cont-nav {
    padding: 1.25rem var(--4) var(--4);
  }

  .cont-logo-nav {
    width: 20px;
  }

  .cont-gallery-img {
    padding: var(--1) var(--3);
  }

  .cont-label {
    padding: var(--1) var(--3);
  }

  /* Project page responsive */
  .project-hero {
    height: 50vh;
  }

  .project-info-grid {
    grid-template-columns: 1fr;
    gap: var(--5);
  }

  .project-title-section h1 {
    font-size: 2rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--3);
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 1.4rem;
    line-height: 1.5rem;
  }

  h2 {
    font-size: 1.1rem;
    line-height: 1.2rem;
  }

  h3 {
    font-size: .9rem;
    line-height: 1rem;
  }

  h4 {
    font-size: .8rem;
    line-height: .9rem;
  }

  h5 {
    font-size: .7rem;
    line-height: .8rem;
  }

  h6 {
    font-size: .65rem;
  }

  p {
    font-size: .7rem;
    line-height: .9rem;
  }

  .text-small {
    font-size: .6rem;
    line-height: .8rem;
  }

  .filter-bar {
    bottom: var(--3);
  }

  .sec-footer {
    padding-bottom: var(--8);
  }

  .filter-btn {
    font-size: 11px;
  }

  .cont-hero-tooltip {
    padding-bottom: var(--4);
  }

  .link-float {
    font-family: var(--font-body);
  }


  .form-row {
    gap: var(--2);
    flex-flow: row;
  }

  /* Contact page responsive */
  .cont-contact-page {
    padding-top: 80px;
  }

  .sec-about,
  .sec-contact-main,
  .sec-social {
    padding: var(--6) var(--4);
  }

  .about-content h1 {
    font-size: 2rem;
  }

  .about-text p {
    font-size: 1rem;
  }

  /* Project page responsive */
  .project-hero {
    height: 40vh;
  }

  .project-info,
  .project-description,
  .project-gallery,
  .project-nav {
    padding-left: var(--4);
    padding-right: var(--4);
  }

  .project-title-section h1 {
    font-size: 1.75rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .project-nav-grid {
    flex-direction: column;
  }

  .back-link {
    margin-right: 0;
  }
}

@media screen and (max-width: 479px) {
  .cont-mask {
    padding-right: var(--3);
    padding-left: var(--3);
  }

  .cont-nav {
    padding-right: var(--3);
    padding-left: var(--3);
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .sec-snap._100svh {
    min-height: 100svh;
    max-height: 100svh;
    align-items: flex-start;
  }

  .sec-footer {
    padding-right: var(--3);
    padding-left: var(--3);
  }

  .link-float {
    text-decoration: none;
  }

  .sec-label {
    padding: var(--1);
    border-radius: 0;
  }


  .form-row {
    flex-flow: column;
  }

  .flex-h-l-t {
    flex-flow: column;
  }

  .cont-gallery-contact {
    justify-content: center;
    align-items: center;
  }
}