@charset "utf-8";
/* CSS Document */

/* ===== MOBILE RESPONSIVENESS FIX ===== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

img,
video {
    max-width: 100%;
    height: auto;
}

@media (max-width: 600px) {

    body {
        margin: 0;
        padding: 0;
    }

    .wrap,
    .container,
    main,
    section,
    header,
    footer {
        width: 100%;
        max-width: 100%;
    }

    .wrap,
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero {
        width: 100%;
        max-width: 100%;
    }

    .hero h1,
    .hero p {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    img,
    video {
        display: block;
        width: 100%;
        max-width: 100%;
    }
}.project h3 {
	font-size: clamp(1.65rem, 6vw, 2rem);
	line-height: 1.15;

}
.project-hero {
	width: 100%;
	aspect-ratio: 16/8;
	background: #d9d9d9;
	overflow: hidden;
}
.project-hero img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


.before-after .image-placeholder {
  height: auto !important;
  min-height: 0;
  aspect-ratio: auto;
  display: block;
  overflow: hidden;
}

.before-after .image-placeholder img {
  display: block;
  width: 100%;
  height: auto !important;
  padding: 0;
}

.before-after > div {
  min-width: 0;
}

.before-after .caption {
  position: static;
  margin-top: 8px;
}

@media (min-width: 901px) {
  .hero .container.hero-content {
    width: min(1100px, 90%);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 400px) {
	.container {
		width: calc(100% - 24px);
	}
	
	.logo {
		font-size: 0.9rem;
		line-height:1.35;
		letter-spacing: 1px;
	
	}
	
	.project-content {
		padding: 18px;
	}
	
	.project-type {
		font-size: 0.68rem;
		line-height: 1.5;
		letter-spacing: 1.5px;
	}
	
	.project h3{
		font-size:1.65rem;
		line-height:1.15;
		margin-bottom: 20px;
	}
	
	.project-description {
		font-size: 0.95rem;
		line-height: 1.6;
	}
	
	.section-title{
		font-size:1.8rem;
	}
	
	.service-card {
		padding: 22px;
	}
	
}