@font-face {
  font-family: Generalsans Variable;
  src: url('../fonts/GeneralSans-Variable.ttf') format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --colors--white: white;
  --colors--black: #141414;
  --colors--accent-color: #28fe5e;
  --colors--black-30: #1414144d;
  --sizes--corner-radius: 5px;
  --colors--black-60: #14141499;
  --colors--accent-color-70: #28fe5eb3;
  --colors--accent-color-30: #28fe5e4d;
  --colors--transparent: #fff0;
  --colors--navbar-accent-color-background: #141414e6;
  --colors--navbar-black-background: #28fe5ee6;
  --fonts--font-family: "Generalsans Variable", sans-serif;
}

body {
  background-color: var(--colors--white);
  color: var(--colors--black);
  flex-direction: column;
  font-family: Generalsans Variable, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  display: flex;
}

h1 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 8rem;
  font-weight: 500;
  line-height: .95;
}

h2 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5rem;
  font-weight: 500;
  line-height: .95;
}

h3 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
}

h4 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
}

h5 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
}

h6 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
}

p {
  margin-bottom: 10px;
  font-size: 1.25rem;
}

a {
  color: var(--colors--black);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
}

li {
  margin-bottom: .75rem;
}

img {
  max-width: 100%;
  display: inline-block;
}

label {
  margin-top: 1rem;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 500;
  display: block;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

blockquote {
  border-left: 8px solid var(--colors--accent-color);
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  line-height: 1.3;
}

figure {
  margin-bottom: 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

.section {
  width: 100%;
  min-height: 2rem;
  padding-top: 4rem;
  padding-bottom: 0rem;
  position: relative;
  overflow: hidden;
}

.section.green {
  background-color: var(--colors--accent-color);
}

.section.footer {
  background-color: var(--colors--accent-color);
  margin-top: auto;
  padding-top: 0;
  padding-bottom: 3rem;
}

.section.full-width {
  padding-top: 0;
  padding-bottom: 0;
}

.section.header {
  padding-bottom: 3rem;
}

.section.short {
  padding-top: 6rem;
  padding-bottom: 3rem;
}

.section.blog-post-hero {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.section.sticky-section {
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}

.container {
  flex-direction: column;
  width: 100%;
  min-height: 2rem;
  margin-top: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 1rem;
  display: flex;
}

.container.restricted-width {
  max-width: 1200px;
}

.container.services {
  margin-top: 4rem;
}

.swatches-container {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
}

.swatch {
  border: 1px solid var(--colors--black-30);
  width: 330px;
  height: 200px;
}

.divider {
  background-color: var(--colors--black-30);
  width: 100%;
  height: 1px;
}

.styleguide-label {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.button {
  border-radius: var(--sizes--corner-radius);
  background-color: var(--colors--accent-color);
  color: var(--colors--black);
  text-align: center;
  text-transform: uppercase;
  padding: 1.5rem 2rem;
  font-size: 1.25rem;
  font-weight: 500;
  transition: border-radius .3s cubic-bezier(.165, .84, .44, 1), transform .3s cubic-bezier(.165, .84, .44, 1);
}

.button:hover {
  border-radius: 0;
  transform: scale(1.05);
}

.button.black-button {
  background-color: var(--colors--black);
  color: var(--colors--accent-color);
}

.button.full-width {
  width: 100%;
}

.button.large-button {
  padding: 2.5rem 4rem;
  font-size: 4rem;
}

.text-field {
  border: 1.5px solid var(--colors--black-30);
  border-radius: var(--sizes--corner-radius);
  color: var(--colors--black);
  height: 4rem;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
  transition: border-color .3s cubic-bezier(.165, .84, .44, 1);
}

.text-field:focus {
  border-color: var(--colors--black);
}

.text-field::placeholder {
  color: var(--colors--black-60);
}

.textarea {
  border: 1.5px solid var(--colors--black-30);
  border-radius: var(--sizes--corner-radius);
  color: var(--colors--black);
  min-height: 8rem;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  transition: border-color .3s cubic-bezier(.165, .84, .44, 1);
}

.textarea:focus {
  border-color: var(--colors--black);
}

.textarea::placeholder {
  color: var(--colors--black-60);
}

.success-message {
  background-color: var(--colors--accent-color);
  padding: 1.5rem;
}

.error-message {
  background-color: var(--colors--black);
  color: var(--colors--accent-color);
  padding: 1rem;
}

.rich-text-block h1 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.rich-text-block h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

.rich-text-block h3, .rich-text-block h4, .rich-text-block h5, .rich-text-block h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.rich-text-block p {
  margin-bottom: 1rem;
}

.rich-text-block blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.rich-text-block strong {
  font-weight: 500;
}

.rich-text-block figure {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.rich-text-block figcaption {
  color: var(--colors--black);
  text-align: left;
  font-size: 1rem;
}

.licenses-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.text-large {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

.text-medium {
  font-size: 1.25rem;
  font-weight: 400;
}

.text-small {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.text-bold {
  font-weight: 500;
}

.black {
  background-color: var(--colors--black);
}

.white {
  background-color: var(--colors--white);
}

.accent-color {
  background-color: var(--colors--accent-color);
}

.nav-container {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
}

.nav-menu {
  background-color: var(--colors--accent-color);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin-top: -5rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  overflow: auto;
}

.nav-link-container {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: baseline;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.165, .84, .44, 1);
  display: flex;
}

.nav-link-container:hover {
  transform: translate(.5rem);
}

.nav-link {
  color: #0c0c0c;
  text-align: left;
  text-transform: uppercase;
  margin-left: 0;
  margin-right: 0;
  padding: .5rem 1rem;
  font-size: 3rem;
}

.nav-link.w--current {
  color: #0c0c0c;
}

.brand {
  z-index: 10;
  padding-left: 0;
}

.nav-logo-menu-open {
  width: 10%;
  padding: 1rem;
  display: none;
  position: static;
  inset: 0% auto auto 0%;
}

.nav-menu-container {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 960px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 5rem 1rem;
  display: flex;
}

.menu-icon-container {
  grid-row-gap: 3px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.menu-button-grid {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  display: grid;
}

.menu-button {
  padding: 1rem;
}

.menu-button.w--open {
  color: #0c0c0c;
  background-color: #0000;
}

.navbar-accent-color {
  z-index: 999;
  background-color: #0000;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: fixed;
  top: 0;
}

.menu-text-accent-color {
  color: var(--colors--accent-color);
  text-align: right;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
}

.close-text {
  color: var(--colors--black);
  text-align: right;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  display: none;
}

.nav-logo-menu-closed {
  width: 10%;
  padding: 1rem;
  position: static;
  inset: 0% auto auto 0%;
}

.nav-menu-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.h5-style-heading {
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
}

.h5-style-heading.nav-menu-heading {
  padding-top: .5rem;
  padding-bottom: 1rem;
}

.project-links-wrapper {
  text-align: left;
}

.project-nav-link {
  padding-top: .2rem;
  padding-bottom: .2rem;
  font-size: 1.25rem;
  font-weight: 400;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.165, .84, .44, 1);
  display: block;
}

.project-nav-link:hover {
  transform: translate(.3rem);
}

.social-icon-container {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  justify-content: flex-start;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2.2rem;
  display: flex;
}

.social-icon-wrapper {
  transition: transform .3s cubic-bezier(.165, .84, .44, 1);
}

.social-icon-wrapper:hover {
  transform: scale(1.07);
}

.line-top-accent-color, .line-middle-accent-color, .line-bottom-accent-color {
  background-color: var(--colors--accent-color);
  width: 18px;
  height: 2px;
}

.navbar-black {
  z-index: 999;
  background-color: #0000;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: fixed;
  top: 0;
}

.menu-text-black {
  color: var(--colors--black);
  text-align: right;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
}

.line-top-black, .line-middle-black, .line-bottom-black {
  background-color: var(--colors--black);
  width: 18px;
  height: 2px;
}

._2-column-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-links-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-link {
  text-transform: uppercase;
  padding-top: .2rem;
  padding-bottom: .2rem;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.165, .84, .44, 1);
}

.footer-link:hover {
  transform: translate(.2rem);
}

.footer-link-wrapper {
  flex-direction: column;
  display: flex;
}

.social-icons-footer-container {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  justify-content: flex-end;
  align-items: center;
  padding-left: 0;
  display: flex;
}

.huge-logo-wrapper {
  width: 100%;
  margin-top: 4rem;
  margin-bottom: 1rem;
}

.huge-logo {
  width: 100%;
}

.footer-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.utility-page-wrap {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  max-height: 100%;
  padding-top: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
}

.utility-page-content {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  text-align: center;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  padding: 10vh 2rem;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.left-arrow, .right-arrow {
  display: block;
}

.slide-nav {
  display: none;
}

.full-height-slider {
  width: 100%;
  height: 100vh;
}

.slider-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background-video-hero {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.icon, .icon-2 {
  display: none;
}

.overlay-content-wrapper {
  z-index: 30;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-bottom: 6vh;
  padding-left: 6vw;
  padding-right: 6vw;
  display: flex;
  position: absolute;
  inset: 0%;
}

.h4-style-heading {
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.1;
}

.text-green {
  color: var(--colors--accent-color);
}

.flex-vertical-medium {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.flex-vertical-medium.width-70 {
  width: 70%;
}

.flex-vertical-medium.centered-content {
  text-align: center;
  align-items: center;
}

.margin-top-large {
  margin-top: 12rem;
}

.project-images-grid {
  margin-bottom: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.project-circle-button {
  z-index: 50;
  background-color: var(--colors--accent-color-70);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: var(--colors--accent-color);
  cursor: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 16vw;
  height: 16vw;
  padding: 1.5rem 3rem;
  display: flex;
  position: absolute;
}

.project-name {
  color: #1d1d1c;
  text-align: center;
  letter-spacing: .02rem;
  text-transform: uppercase;
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.2;
}

.image-square {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  overflow: hidden;
}

.image-hero {
  width: 100vw;
  height: 60vh;
  object-fit: cover;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow: hidden;
}

.featured-project-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.flex-vertical-small {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.video-wrapper {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
}

.image-landscape {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  overflow: hidden;
}

.background-video-blog {
  height: 100vh;
}

.video-content-overlay {
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
  position: absolute;
  inset: 0%;
}

.featured-post-wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  margin-bottom: 4rem;
  margin-right: 3rem;
  text-decoration: none;
  display: flex;
}

.zoom-on-hover {
  transition: transform 3s cubic-bezier(.165, .84, .44, 1);
}

.zoom-on-hover:hover {
  transform: scale(1.1);
}

.project-info-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 12rem;
  display: grid;
}

.additional-images-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.next-project-link {
  text-align: right;
  text-transform: uppercase;
  font-size: 5rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.165, .84, .44, 1);
}

.next-project-link:hover {
  transform: translate(.3rem);
}

.overlay {
  z-index: 1;
  background-color: var(--colors--black-30);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
}

.horizontal-text-wrapper {
  grid-column-gap: .4rem;
  grid-row-gap: .4rem;
  align-items: center;
  display: flex;
}

.margin-bottom-medium {
  margin-bottom: 6rem;
}

.h3-style-heading {
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
}

.background-video-about {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.full-height-image-wrapper {
  background-image: url('../images/Content-Image-03_1Content-Image-03.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  overflow: hidden;
}

.h1-style-heading {
  text-transform: uppercase;
  font-size: 8rem;
  font-weight: 500;
  line-height: .95;
}

.form-block {
  width: 100%;
}

.contact-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.green {
  background-color: var(--colors--accent-color);
}

.contact-link {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.165, .84, .44, 1);
}

.contact-link:hover {
  transform: translate(.3rem);
}

.flex-vertical-large {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.logo-link-wrapper {
  width: 100%;
}

.subscribe-modal {
  z-index: 9999;
  background-color: var(--colors--black-30);
  opacity: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
  transform: scale(1.1);
}

.subscribe-wrapper {
  border-radius: var(--sizes--corner-radius);
  background-color: var(--colors--white);
  width: 450px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
}

.margin-top-small {
  margin-top: 2rem;
}

.h2-style-heading {
  text-transform: uppercase;
  font-size: 5rem;
  font-weight: 500;
  line-height: .95;
}

.overlay-heading-accent-color {
  color: var(--colors--accent-color);
  text-transform: uppercase;
  font-size: 8vw;
  font-weight: 500;
  line-height: .95;
}

.blog-post-heading-wrapper {
  z-index: 10;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.blog-post-wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  margin-bottom: 4rem;
  text-decoration: none;
  display: flex;
}

.contact-info-wrapper {
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 12rem 3rem 3rem;
  display: flex;
}

.contact-form-wrapper {
  flex-direction: column;
  width: 100%;
  min-height: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 12rem 3rem 3rem;
  display: flex;
}

.team-member-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.subscribe-content-wrapper {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.h6-style-heading {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
}

.thumb-image {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  overflow: hidden;
}

.thumb-image.portrait {
  aspect-ratio: 2 / 3;
}

.div-block {
  z-index: 20;
  background-color: #00000069;
  width: 100%;
  height: 100%;
  position: absolute;
}

.text-span {
  font-weight: 300;
}

.div-block-2 {
  width: 100%;
  height: 100%;
  position: relative;
}

.map {
  
  margin-bottom: 40px;
  margin-left: 0;
  padding-left: 0;
}

.div-block-3 {
  background-color: var(--colors--black);
  opacity: .16;
  width: 100%;
  height: 2px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.image {
  opacity: 1;
  vertical-align: baseline;
  mix-blend-mode: normal;
  border-radius: 6px;
  flex: 0 auto;
  align-self: center;
  margin-top: 1rem;
}

.text-span-2, .text-span-3, .text-span-4, .text-span-5, .text-span-6, .text-span-7, .paragraph, .paragraph-2, .bold-text {
  font-weight: 600;
}

.certificate-card, .award-card {
  padding: 1.5rem;
  margin-bottom: 1rem;
  background-color: var(--colors--white);
  max-width: 24rem;
  text-align: left;
}

.certificate-year, .award-date {
  color: var(--colors--accent-color);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.certificate-title, .award-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.certificate-description, .award-description {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0;
}

.award-authority {
  font-weight: 500;
  color: var(--colors--black-60);
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.section-header {
  text-align: left;
  margin-bottom: 3rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h3 {
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  line-height: 1.1;
}

.section-header p {
  margin-bottom: 2rem;
  text-align: left;
}

.section-header .button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.certificates-grid, .awards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  margin-top: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop: 2 columns, cards centered */
@media screen and (min-width: 992px) {
  .certificates-grid, .awards-grid {
    justify-items: center;
  }
}

/* Fix the "Designing your dreams" section responsiveness */
@media screen and (max-width: 991px) {
  ._2-column-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    place-items: center;
    gap: 2rem;
  }
  
  /* Ensure the heading scales properly on small laptops/tablets */
  ._2-column-grid h1 {
    font-size: 4rem !important;
    line-height: 1.1 !important;
  }
}

@media screen and (max-width: 767px) {
  ._2-column-grid h1 {
    font-size: 3rem !important;
    line-height: 1.1 !important;
  }
}

@media screen and (max-width: 479px) {
  ._2-column-grid h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
}

/* Remove excessive bottom padding from last section before footer */
.section:last-of-type:not(.footer) {
  padding-bottom: 2rem !important;
}

@media screen and (max-width: 991px) {
  .section:last-of-type:not(.footer) {
    padding-bottom: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .section:last-of-type:not(.footer) {
    padding-bottom: 2rem !important;
  }
}

@media screen and (max-width: 479px) {
  .section:last-of-type:not(.footer) {
    padding-bottom: 1.5rem !important;
  }
}

/* Fix excessive padding on contact.html and projects.html pages */
.contact-form-wrapper {
  padding-bottom: 2rem !important;
}

.contact-info-wrapper {
  padding-bottom: 2rem !important;
}

/* Responsive fixes for contact and projects pages */
@media screen and (max-width: 991px) {
  .contact-form-wrapper {
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
  }
  
  .contact-info-wrapper {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Fix projects page header section padding */
  .section.header {
    padding-bottom: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .contact-form-wrapper {
    padding-top: 3rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .contact-info-wrapper {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .section.header {
    padding-bottom: 1.5rem !important;
  }
}

@media screen and (max-width: 479px) {
  .contact-form-wrapper {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
  }
  
  .contact-info-wrapper {
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
  }
  
  .section.header {
    padding-bottom: 1rem !important;
  }
}

/* Tablet and Mobile: 1 column, section centered, cards left-aligned */
@media screen and (max-width: 991px) {
  .certificates-grid, .awards-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    justify-items: start;
  }
}

@media screen and (max-width: 991px) {
  .button.large-button {
    font-size: 2rem;
  }

  h1 {
    font-size: 6rem;
  }

  h2 {
    font-size: 4rem;
  }

  .certificate-card, .award-card {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .certificate-title, .award-title {
    font-size: 1rem;
  }

  .certificate-description, .award-description {
    font-size: 0.9rem;
  }

  .certificates-grid, .awards-grid {
    grid-template-columns: 1fr;
    grid-gap: 0.75rem;
    margin-top: 1rem;
    justify-items: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .section-header {
    margin-bottom: 2rem;
    max-width: 100%;
  }

  .section-header h3 {
    font-size: 2rem;
  }

  .section {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .section.short {
    padding-top: 4rem;
  }

  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .licenses-grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .nav-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .menu-icon-container {
    background-color: #0000;
  }

  .project-links-wrapper {
    padding-bottom: 5rem;
  }

  ._2-column-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  ._2-column-grid.team-member {
    grid-template-columns: 1fr 1fr;
  }

  ._2-column-grid.spacing-small {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .huge-logo-wrapper {
    margin-top: 9rem;
  }

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

  .utility-page-wrap {
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .full-height-slider {
    height: 800px;
  }

  .full-height-slider.hero {
    height: 100vh;
  }

  .project-images-grid {
    margin-bottom: 0;
    grid-template-columns: 1fr;
  }

  .image-hero {
    height: 50vh;
  }

  .project-circle-button {
    width: 30vw;
    height: 30vw;
    display: flex;
  }

  .project-name {
    font-size: 2.5vw;
  }

  .video-wrapper {
    height: 800px;
    position: relative;
  }

  .background-video-blog {
    height: 800px;
  }

  .video-content-overlay {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .featured-post-wrapper {
    margin-right: 2rem;
    padding-left: 2rem;
  }

  .project-info-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 9rem;
  }

  .additional-images-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .next-project-link {
    font-size: 4rem;
  }

  .background-video-about {
    height: 800px;
  }

  .full-height-image-wrapper {
    min-height: 800px;
  }

  .h1-style-heading {
    font-size: 6rem;
  }

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

  .flex-vertical-large {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .h2-style-heading {
    font-size: 4rem;
  }

  .blog-post-wrapper {
    margin-bottom: 3rem;
  }

  .contact-info-wrapper {
    padding-top: 6rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .contact-form-wrapper {
    padding-top: 9rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .team-member-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 3rem;
    line-height: 1;
  }

  h3 {
    font-size: 2rem;
    line-height: 1.1;
  }

  h4 {
    font-size: 1.75rem;
  }

  p {
    font-size: 1rem;
  }

  ul, ol {
    font-size: 1rem;
    line-height: 1.4;
  }

  li {
    margin-bottom: .5rem;
  }

  .section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .section.short {
    padding-top: 3rem;
  }

  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .swatches-container {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .swatch {
    height: 180px;
  }

  .licenses-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }

  .text-large {
    font-size: 1.75rem;
  }

  .text-medium {
    font-size: 1rem;
  }

  .text-small {
    font-size: .875rem;
  }

  .nav-container {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .nav-menu {
    min-height: 100vh;
    padding-top: 3rem;
    padding-bottom: 3rem;
    overflow: auto;
  }

  .nav-link-container {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nav-link {
    font-size: 3rem;
  }

  .nav-menu-container {
    justify-content: flex-start;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .nav-menu-grid {
    grid-template-columns: 1fr;
  }

  .project-links-wrapper {
    padding-left: 2rem;
  }

  ._2-column-grid {
    grid-template-columns: 1fr;
  }

  ._2-column-grid.team-member {
    grid-template-columns: 1fr;
  }

  .huge-logo-wrapper {
    margin-top: 6rem;
  }

  .utility-page-wrap {
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .full-height-slider, .full-height-slider.hero, .background-video-hero {
    height: 500px;
  }

  .h4-style-heading {
    font-size: 1.75rem;
  }

  .flex-vertical-medium.width-70 {
    width: 100%;
  }

  .flex-vertical-medium.margin-top-large {
    margin-top: 6rem;
  }

  .video-wrapper, .background-video-blog {
    height: 500px;
  }

  .video-content-overlay {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .featured-post-wrapper {
    margin-bottom: 3rem;
    margin-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .project-info-grid {
    margin-top: 6rem;
  }

  .additional-images-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .next-project-link {
    font-size: 3rem;
  }

  .margin-bottom-medium {
    margin-bottom: 3rem;
  }

  .h3-style-heading {
    font-size: 2rem;
    line-height: 1.1;
  }

  .background-video-about {
    height: 500px;
  }

  .full-height-image-wrapper {
    min-height: 500px;
  }

  .h1-style-heading {
    font-size: 4rem;
  }

  .subscribe-wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .h2-style-heading {
    font-size: 3rem;
    line-height: 1;
  }

  .blog-post-wrapper {
    margin-bottom: 2rem;
  }

  .contact-info-wrapper {
    padding-top: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .contact-form-wrapper {
    padding-top: 9rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .team-member-grid {
    grid-template-columns: 1fr;
  }

  .certificates-grid, .awards-grid {
    justify-items: start;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 2rem;
    line-height: 1;
  }

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

  h3 {
    font-size: 1.3rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  ul, ol {
    padding-left: 30px;
  }

  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section.header {
    padding-top: 6rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .image-hero {
    height: 40vh;
  }

  .swatch {
    height: 120px;
  }

  .button {
    width: 100%;
  }

  .rich-text-block figcaption {
    font-size: .875rem;
  }

  .licenses-grid {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .text-large {
    font-size: 1.5rem;
  }

  .nav-container {
    height: 4rem;
  }

  .nav-menu {
    margin-top: -4rem;
    padding-top: 2rem;
  }

  .nav-link-container {
    padding-left: 0;
    padding-right: 0;
  }

  .nav-link {
    padding-left: 0;
    padding-right: 0;
    font-size: 2rem;
  }

  .nav-logo-menu-open {
    width: 80px;
    padding-left: .5rem;
  }

  .nav-menu-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .menu-button {
    padding-right: .5rem;
  }

  .nav-logo-menu-closed {
    width: 80px;
    padding-top: 1.2rem;
    padding-left: .5rem;
  }

  .project-links-wrapper {
    padding-left: 0;
  }

  .social-icon-container {
    padding-left: .2rem;
  }

  ._2-column-grid {
    place-items: center;
  }

  ._2-column-grid.team-member {
    grid-template-columns: 1fr;
  }

  ._2-column-grid.spacing-small {
    place-items: center start;
  }

  .footer-links-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .social-icons-footer-container {
    justify-content: flex-end;
    align-items: center;
  }

  .huge-logo-wrapper {
    margin-top: 4rem;
  }

  .utility-page-wrap {
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .utility-page-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .right-arrow {
    overflow: hidden;
  }

  .full-height-slider.hero, .background-video-hero {
    height: 100vh;
  }

  .h4-style-heading {
    font-size: 1.3rem;
  }

  .flex-vertical-medium {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .flex-vertical-medium.margin-top-large {
    margin-top: 3rem;
  }

  .project-circle-button {
    width: 40vw;
    height: 40vw;
  }

  .project-name {
    font-size: 4vw;
  }

  .flex-vertical-small {
    white-space: normal;
    word-break: break-all;
    flex: 0 auto;
    position: static;
  }

  .video-content-overlay {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .featured-post-wrapper {
    margin-right: 1rem;
    padding-left: 1rem;
  }

  .project-info-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .additional-images-grid {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    grid-template-columns: 1fr 1fr;
  }

  .next-project-link {
    font-size: 2rem;
  }

  .horizontal-text-wrapper {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-direction: column;
  }

  .h3-style-heading {
    font-size: 1.4rem;
  }

  .h1-style-heading {
    font-size: 2rem;
    line-height: 1;
  }

  .form-block {
    display: flex;
  }

  .contact-link {
    width: 100%;
    font-size: 1.5rem;
  }

  .flex-vertical-large {
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .subscribe-wrapper {
    width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .h2-style-heading {
    font-size: 1.5rem;
    line-height: 1.1;
  }

  .overlay-heading-accent-color {
    font-size: 10vw;
    line-height: 1;
  }

  .blog-post-wrapper {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    margin-bottom: 1rem;
  }

  .contact-info-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .contact-form-wrapper {
    padding-top: 9rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .map {
    z-index: 1;
  }

  .certificates-grid, .awards-grid {
    justify-items: start;
  }
}

#w-node-_81468646-2cb9-5b22-2858-5a106f03ce54-25b5cc05, #w-node-b2523ef3-34c4-266b-a91c-25015556f732-25b5cc05 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_81f8c8c4-5b68-9ca8-9ba2-8af59187afa2-25b5cc05 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: start center;
}

#w-node-_9e76d148-54e5-b313-f206-105950ebf287-50ebf270, #w-node-ef5e0a2e-041f-db3a-a64b-5c22fe79c858-fe79c83a, #w-node-ef5e0a2e-041f-db3a-a64b-5c22fe79c864-fe79c83a, #w-node-ef5e0a2e-041f-db3a-a64b-5c22fe79c866-fe79c83a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_91c7c38a-063d-56a9-209d-fe9103d0f83c-25b5cc08 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-bef9a3da-b2af-ebfa-3c2b-b2d1c1da5ef4-c1da5ed6, #w-node-bef9a3da-b2af-ebfa-3c2b-b2d1c1da5f00-c1da5ed6, #w-node-bef9a3da-b2af-ebfa-3c2b-b2d1c1da5f02-c1da5ed6, #w-node-_6d964873-d9dc-2490-14c0-fa3e3fd72c8a-25b5cc0d {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-d27cf22e-3f17-3115-e263-1484afbcb2bf-25b5cc0d {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_17640dea-f961-7dd7-afd0-147e0d45e981-25b5cc0d {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3efe1534-3506-6025-8833-63fbfcc4e5f8-25b5cc0d {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_667c39b7-19ab-fa60-2f22-ddf703b7b895-25b5cc0e, #w-node-_667c39b7-19ab-fa60-2f22-ddf703b7b897-25b5cc0e, #w-node-_667c39b7-19ab-fa60-2f22-ddf703b7b899-25b5cc0e, #w-node-_667c39b7-19ab-fa60-2f22-ddf703b7b89b-25b5cc0e, #w-node-_667c39b7-19ab-fa60-2f22-ddf703b7b89d-25b5cc0e, #w-node-_667c39b7-19ab-fa60-2f22-ddf703b7b89f-25b5cc0e, #w-node-c4db8a72-84f5-b1cf-db91-c8837371b825-25b5cc0e, #w-node-_7b222c89-86ed-e284-5af3-45137a1043b2-25b5cc0e, #w-node-_12121a0e-1670-b1ba-bfc2-7d59e9ee82ba-25b5cc0e, #w-node-_12b2e596-a71a-fb8e-8fd0-69402dfc5472-25b5cc0e, #w-node-_57f770ab-9347-cda0-cd14-119bbcb1f629-25b5cc0e, #w-node-a68352af-ce13-e8fb-20df-021c69d0ce43-25b5cc0e, #w-node-_329d84f5-f054-3daa-5d57-40b5db71386a-25b5cc0e, #w-node-_2eb96b7c-5ec1-b843-cdbe-7803d8880e89-25b5cc0e, #w-node-_6c5fb62a-dbdf-22aa-a80a-75519251b19e-25b5cc0e, #w-node-fea6ca5c-add1-3b8d-4a03-fcae696ec10d-25b5cc0e, #w-node-a94d7a9e-ff58-6b21-ef6b-b68657130cd0-25b5cc0e, #w-node-_7a0cbfd8-833c-2fe7-40ab-ffd02200b328-25b5cc0e, #w-node-_76b3df16-abda-6fea-3ad4-a7b1596cb8e9-25b5cc0e, #w-node-c7d8220a-5d36-d882-9901-16b4240d704f-25b5cc0e, #w-node-e9ee4646-70ca-5e08-7c0a-bcc6bff20483-25b5cc0e, #w-node-_81d3b149-98a7-174b-e7b8-f8efa19468e0-25b5cc0e, #w-node-f950d745-4f20-796b-45bd-8088351ddf22-25b5cc0e, #w-node-_80804816-2cc3-660e-ae3b-657064de4fec-25b5cc0e, #w-node-_691dbe13-771f-70de-1d62-777ecd48d0a1-25b5cc0e, #w-node-_08953c74-edcc-0957-9e3b-b5cbc33bc3ce-25b5cc0e, #w-node-_99b1e8eb-e2fe-6db8-e86b-33dbe83bd09f-25b5cc0e, #w-node-_856d34a2-ffe1-c717-5dd7-394b8cec36e7-25b5cc0e, #w-node-_8a2cbef3-1f52-a296-a428-670a0fe07bf3-25b5cc0e, #w-node-_851603c0-0535-943d-e0ed-3ec82d14e562-25b5cc0e, #w-node-_14008bb1-2565-a4d1-4f62-1b23da8374b6-25b5cc0e, #w-node-_14008bb1-2565-a4d1-4f62-1b23da8374b8-25b5cc0e, #w-node-_14008bb1-2565-a4d1-4f62-1b23da8374ba-25b5cc0e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 991px) {
  #w-node-_9e76d148-54e5-b313-f206-105950ebf29a-50ebf270 {
    justify-self: start;
  }

  #w-node-_9e76d148-54e5-b313-f206-105950ebf2a3-50ebf270 {
    order: -9999;
    justify-self: start;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_9e76d148-54e5-b313-f206-105950ebf29a-50ebf270 {
    justify-self: start;
  }

  #w-node-_9e76d148-54e5-b313-f206-105950ebf2a3-50ebf270 {
    order: -9999;
    justify-self: start;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_9e76d148-54e5-b313-f206-105950ebf2a3-50ebf270 {
    place-self: center;
  }
}


@font-face {
  font-family: 'Generalsans Variable';
  src: url('../fonts/GeneralSans-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Image Modal Styles */
.image-modal {
  z-index: 9999;
  background-color: rgba(20, 20, 20, 0.9);
  opacity: 0;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  display: flex;
  position: fixed;
  inset: 0%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.image-modal.active {
  opacity: 1;
  visibility: visible;
}

.image-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  padding: 20px;
}

.image-modal-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--sizes--corner-radius);
}

.image-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--colors--white);
  color: var(--colors--black);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  transition: transform 0.2s ease;
  z-index: 10001;
}

.image-modal-close:hover {
  transform: scale(1.1);
}

.image-modal-close:before {
  content: '×';
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
  .image-modal-content {
    max-width: 95vw;
    max-height: 95vh;
    padding: 10px;
  }
  
  .image-modal-image {
    max-height: 90vh;
  }
  
  .image-modal-close {
    width: 35px;
    height: 35px;
    font-size: 16px;
    top: 5px;
    right: 5px;
  }
}