@import "vars.css";
@import "reset.css";
@import "hamburgers.css";
@import "helper.css";

html, body { min-height: 100vh; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  background-color: var(--blue-light);
  background-image: url(../img/diamond-empty.svg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 100vh;
  font-family: 'Mulish', sans-serif;  
}

h1, .h1 { font-size: /*30-60px*/clamp(2.25rem, calc(0.13rem + 5.66vw), 3.75rem); line-height: 1.25; font-weight: 700; color: var(--blue); }
h1 span { color: var(--black); }
h2 { margin-bottom: 60px; }
h3, .h3 { font-size: /*24-36px*/clamp(1.50rem, calc(0.44rem + 2.83vw), 2.25rem); line-height: 1.333; font-weight: 400; color: var(--blue); }
h4, .h4 { font-size: /*20-30px*/clamp(1.25rem, calc(0.28rem + 2.59vw), 1.94rem); line-height: 1.333; font-weight: 700; color: var(--black); }
h5, .h5 { font-size: clamp(1.50rem, calc(0.35rem + 3.07vw), 2.31rem); line-height: 1.25; margin-top: 30px; font-weight: 700; color: var(--black);}
p { font-size: /*18-24px*/clamp(1.13rem, calc(0.59rem + 1.43vw), 1.50rem); line-height: 1.5; font-weight: 400; color: var(--black); }
a { color: var(--blue); text-decoration: none; }
.small { font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--black); letter-spacing: 0.2em; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.learn-more { display: inline-flex; align-items: flex-start; font-size: 16px; text-decoration: none; letter-spacing: 0.2em; }
.learn-more span { padding: 5px 0 5px 0; border-bottom: 5px solid var(--blue); }
.learn-more img { max-width: 10px; transition: all 0.2s ease-in-out; }
.learn-more:hover img { transform: translateX(7px); transition: all 0.2s ease-in-out; }
.wrapper {width: 100%; max-width: 1300px; padding: 0 3vw; margin: 0 auto; }

.headroom { will-change: transform; transition: transform 200ms linear; }
.headroom--pinned { transform: translateY(0%); }
.headroom--unpinned { transform: translateY(-100%); }
.headroom--not-bottom.headroom--not-top { background-color: var(--blue-light); }

header { position: fixed; left: 0; top: 0; width: 100%; display: flex; justify-content: center; align-items: center; height: 180px;}
header .wrapper { display: flex; justify-content: space-between; align-items: center; }
nav { display: flex; }
nav a { position: relative; font-size: 24px; line-height: 1.5; font-weight: 400; color: var(--blue); text-decoration: none; margin-left: 1vw; }
nav a.active:after { content: ""; position: absolute; left: 0; bottom: -15px; display: block; width: 100%; height: 5px; background-color: var(--blue); }
.hamburger { display: none; }
.logo { width: 300px; }

@media only screen and (max-width : 1024px) { 

  .learn-more { font-size: 12px; }

  .hamburger { display: block; }
  nav { 
    position: fixed; left: 0; top: 120px; width: 100%; height: calc(100vh - 120px); background: var(--blue-light);
    flex-direction: column; justify-content: center; align-items: center;
    transition: all 0.2s ease-in-out; opacity: 0; display: none;
  }
  nav.is-open { display: flex; transition: all 0.2s ease-in-out; opacity: 1; z-index: 1; }
  nav a { margin: 30px 0; }
  header { height: 120px;}
  html { scroll-padding-top: 30px; }
  header.is-open { background-color: var(--blue-light); }
  .logo { max-width: 60%; }
  .small { font-size: 12px; }
	
}

section { width: 100%; max-width: 1300px; padding: 100px 3vw; margin: 0 auto; }

@media only screen and (max-width : 1024px) { 
	section { padding: 80px 3vw; }
}

.hero { max-width: 100%; min-height: 100vh; border-bottom: 1px solid var(--blue); display: flex; justify-content: center; align-items: center; }
.hero h1 { display: flex; align-items: center; }
.hero img { margin-right: 1vw; }

@media only screen and (max-width : 1024px) { 
  .hero img { max-width: 45px; margin-right: 30px; }
}

.about { display: flex; align-items: flex-start; }
.about h2 { flex: 1; }
.about ul { flex: 3.6; }
.about ul li { display: flex; align-items: center; }
.about ul > li + li { margin-top: 30px; }
.about ul li img { max-width: 60px; margin-bottom: 30px; }
.about ul li p { margin-left: 60px; padding-bottom: 30px; border-bottom: 1px solid var(--blue); }
.about ul li:last-child p { border-bottom: none; }

@media only screen and (max-width : 1024px) { 
	.about { display: block; }
  .about h2 { margin-left: 75px; }
  .about ul li img { max-width: 45px; }
  .about ul li p { margin-left: 30px; padding-bottom: 30px; }
}


.why-us img { max-width: 60px; margin: 0 60px; }
.why-us li { display: flex; align-items: center; border-bottom: 1px solid var(--blue); padding-bottom: 30px; }
.why-us ul > li + li { margin-top: 30px; }
.why-us ul li:last-child { border-bottom: none; }
.why-us h3 { flex: 1 }
.why-us p { flex: 1.2 }

@media only screen and (max-width : 1024px) { 

  .why-us h2 { margin-left: 75px; }
  .why-us img { max-width: 45px; margin: 0 30px 0 0; order: -1 }
  .why-us li { flex-wrap: wrap; justify-content: flex-end; }
  .why-us h3 { flex:auto; width: calc(100% - 75px); } 
  .why-us p { flex: auto;  width: calc(100% - 75px); margin-left: 75px; }
 
}


.services div { display: flex; justify-content: space-between; align-items: flex-start; }
.services .learn-more { margin-top: 30px; }
.services .diamond-home-services { position: relative; z-index: -1; display: block; max-width: 100%; margin: -120px auto 0 auto; }

@media only screen and (max-width : 1024px) { 
  .services .learn-more { margin-top: 10px; }
  .services .diamond-home-services { margin: -60px auto 0 auto; }
}

.client-stories { max-width: 100%; border-bottom: 1px solid var(--blue); padding-bottom: 0; }
.stories { display: flex; }
.stories .ruler-vertical { width: 1px; background-color: var(--blue); margin: 0 2vw; }
.story { 
  flex-grow: 1; flex-basis: 0; min-width: 0;
  display: flex; align-items: flex-start; flex-direction: column; padding-bottom: 60px; 
}
.story a { margin-top: auto; }
.story h4 { margin: 30px 0; }
.story h4 span { color: var(--blue); }

@media only screen and (max-width : 1024px) { 
  .stories { display: block; }
  .stories .ruler-vertical { display: none; }
}


.team-partners { display: flex; justify-content: space-between; }
.team-partners div { width: calc((100% - 6vw)/3); }
.team-photo { width: 100%; max-width: none; margin-bottom: 30px; }
.team-partners h4 { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.team-partners h4 a { margin-left: 5px; }

@media only screen and (max-width : 1024px) { 
  .team-partners { display: block; }
  .team-partners div { width: 100%; }
  .team-partners > div + div { margin-top: 60px; }
}


footer { background-color: var(--blue); padding: 80px 0; }
footer * { color: var(--white) !important; letter-spacing: 0 !important; }
footer .wrapper { display: flex; }
footer p span, footer p span a { display: block; }
footer .footer-top { justify-content: space-between; align-items: center; padding-bottom: 30px; }
footer .footer-bottom p { border-top: 1px solid var(--white); flex: 1.75; padding-top: 30px; }



@media only screen and (max-width : 1024px) { 
  footer { padding: 60px 0; }
  footer .wrapper { display: block; }
  footer .footer-top > p + p { margin-top: 15px; }
}


.cookie-consent { position: fixed; z-index: 999; bottom: 0; left: 0; width: 100%; background-color: var(--blue); }
.cookie-consent .wrapper { display: flex; justify-content: space-between; align-items: center; color: var(--white); padding: 60px 3vw; }
.cookie-consent .wrapper p { letter-spacing: 0; color: var(--white); margin-right: 3vw; }
.cookie-consent .wrapper button {
  cursor: pointer;
  display: inline-flex; justify-content: center; align-items: center; padding: 15px 30px;
  border: none; background-color: var(--white); color: var(--blue);
  font-family: 'Mulish', sans-serif; font-size: /*12-14px*/clamp(0.88rem, calc(0.70rem + 0.47vw), 1.00rem); font-weight: 700;
}

@media only screen and (max-width : 1024px) { 
  .cookie-consent .wrapper { padding: 30px 3vw; }
}



.services-page .hero h5 span { color: var(--blue); }
.services-page .services { display: flex; justify-content: center; align-content: flex-start; }

.client-stories-page { background-image: none; }
.client-story { padding-top: 300px; }
.client-story > * + * { margin-top: 60px; }
.client-story h1 { display: flex; align-items: center; }
.client-story h1 img { margin-right: 30px; }
.client-story h4 { font-weight: 400; }
.client-story h5 { margin-top: 15px; }
.client-story h5 span { color: var(--blue); }
.client-story blockquote { display: block; padding: 100px; background-color: var(--blue-mid); }
.story-text { width: 60%; margin-left: auto; margin-right: auto; }
.story-text > * + * { margin-top: 30px; }



@media only screen and (max-width : 1024px) { 

  .services-page h1 img, .client-stories-page h1 img { max-width: 30px; margin-right: 15px; }
  .client-story { padding-top: 150px; }
  .client-story > * + * { margin-top: 30px; }
  .client-story blockquote { padding: 6vw; }
  .story-text { width: 100%; padding: 0 6vw; }
  .client-stories .wrapper { padding: 0; }
}



.expertise { display: flex; align-items: flex-start; }
.expertise h2 { flex: 1; }
.expertise div { flex: 3.6; padding-left: 120px; }
.expertise div > * + * { margin-top: 30px; }
.expertise .expert { padding-left: 0; }
.expertise .expert > * + * { margin-top: 0; }
.expertise ul { list-style: disc; padding-left: 20px; }
.expertise ul ul { list-style: circle; }

@media only screen and (max-width : 1024px) { 
  .expertise { display: block; }
  .expertise div { padding-left: 0; }
}