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

/* HERO section heading and subheading "Spectral Extra Bold" */
@font-face {
font-family: 'spectral';
src: url('fonts/spectral/spectral-extrabold-webfont.eot') format('eot');
src: url('fonts/spectral/spectral-extrabold-webfont.eot?#iefix') format('embedded-opentype');
src: url('fonts/spectral/spectral-extrabold-webfont.woff') format('woff');
src: url('fonts/spectral/spectral-extrabold-webfont.woff2') format('woff2'),
url('fonts/spectral/spectral-extrabold-webfont.ttf') format('truetype'),
url('fonts/spectral/spectral-extrabold-webfont.svg#spectralextrabold') format('svg');
	font-weight:normal; font-style: normal;
}


html {
    font-size: 16px;
}

h1 {font-family: "spectral";
	font-size: clamp(2.25rem, 3.3vw, 3.3rem);
    line-height: 1.08;
	/* display: inline-block; */
  	max-width: 100%;
	color: #000;
	
}


h2.subheading {
  font-family: "Lato", sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  font-weight: 400;
  line-height: 1.4;
  display: inline-block;
  width: auto;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0.5rem;
  margin: 0;
}

/* Landing hero typography – tablet */
@media (min-width: 769px) and (max-width: 992px) {
  .paragraph--type--landing-page-hero h2.subheading {
    font-size: 0.9rem;
  }
}

/* Landing hero typography – small tablet */
@media (min-width: 577px) and (max-width: 768px) {
  .paragraph--type--landing-page-hero h2.subheading {
    font-size: 0.9rem;
  }
}

/* Landing hero typography – mobile */
@media (max-width: 576px) {
  .paragraph--type--landing-page-hero h1 {
    font-size: clamp(2rem, 7.5vw, 2.75rem);
  }
}


.pink-text {color: #ff5a87;}
.green-text {color: #00d2b9;}
.purple-text {color: #9655ff;}
.yellow-text {color: #ebeb05;}

.highlight-pink {
    background: linear-gradient(120deg, #ff5a87 80%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 75%;
    background-position: 0 50%;

}

.highlight-black {
    background: linear-gradient(120deg, #000000 100%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 85%;
    background-position: 0 50%;

}

.highlight-green {
    background: linear-gradient(120deg, #00d2b9 80%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 75%;
    background-position: 0 50%;

}

.highlight-purple {
    background: linear-gradient(120deg, #9655ff 80%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 75%;
    background-position: 0 50%;

}

.highlight-yellow {
    background: linear-gradient(120deg, #ebeb05 80%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 75%;
    background-position: 0 50%;

}

/* Removes linear gradient for text/background contrast ratio */
@media (prefers-reduced-motion: reduce) {

    .highlight-green {
        background: linear-gradient(#00d2b9, #00d2b9);
        background-repeat: no-repeat;
        background-size: 100% 75%;
        background-position: 0 50%;
    }

    .highlight-pink {
        background: linear-gradient(#ff5a87, #ff5a87);
        background-repeat: no-repeat;
        background-size: 100% 75%;
        background-position: 0 50%;
    }

    .highlight-black {
        background: linear-gradient(#000, #000);
        background-repeat: no-repeat;
        background-size: 100% 75%;
        background-position: 0 50%;
    }

    .highlight-yellow {
        background: linear-gradient(#ebeb05, #ebeb05);
        background-repeat: no-repeat;
        background-size: 100% 75%;
        background-position: 0 50%;
    }

    .highlight-purple {
        background: linear-gradient(#9655ff, #9655ff);
        background-repeat: no-repeat;
        background-size: 100% 75%;
        background-position: 0 50%;
    }

    h2.subheading {
        background: #000;
    }
}
@media (max-width: 100vw){
}

/* Responsive h1 hero, subheading, and image settings */

/* For small mobile devices */
@media (min-width: 320px) and (max-width: 480px) {
	/*h1 {
	font-size: 9.3vw;
    line-height: 10.7vw;
	/* display: inline-block; 
  	max-width: 100%;	
	}	
  h2.subheading {
  font-family: "Lato" , sans-serif;
  font-size: 3.3vw;
  font-weight: 600;
  line-height: 9.6vw;
  display: inline-block;
  width: 95%;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0 0 0 0.3em;
  margin: 0 0 0 0;
}*/
	
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 5rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -417px !important;
}
}

/* For small - medium  mobile devices */
@media (min-width: 481px) and (max-width: 576px) {
	/*h1 {
	font-size: 11.3vw;
    line-height: 12.8vw;
	/* display: inline-block; 
  	max-width: 100%;	
	}	
  h2.subheading {
  font-family: "Lato" , sans-serif;
  font-size: 3.3vw;
  font-weight: 600;
  line-height: 9.6vw;
  display: inline-block;
  width: 95%;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0 0 0 0.3em;
  margin: 0 0 0 0;
}*/
	
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 4rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -350px !important;
}
}

/* For medium mobile and tablet devices */
@media (min-width: 577px) and (max-width: 768px) {
	/*h1 {
	font-size: 9.3vw;
    line-height: 10.6vw;
	display: inline-block;
  	max-width: 100%;	
	}	
  h2.subheading {
  font-family: "Lato" , sans-serif;
  font-size: 2.6vw;
  font-weight: 600;
  line-height: 6.6vw;
  display: inline-block;
  width: 85%;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0 0 0 0.3em;
  margin: 0 0 0 0;
}*/
	
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 4rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -213px !important;
}
}

@media (min-width: 769px) and (max-width: 992px) {
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 4rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -150px !important;
}
}


/* For medium mobile and tablet devices */
@media (min-width: 993px) and (max-width: 1200px) {
		
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 4rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 0 !important;
}
}

/* Hero heading – very large screens */
@media (min-width: 1400px) {
  .paragraph--type--landing-page-hero h1 {
    font-size: clamp(3rem, 3.3vw, 4.5rem);
    line-height: 1.08;
  }
}

@media (min-width: 577px) and (max-width: 992px) {
  .paragraph--type--landing-page-hero h2.subheading {
    font-size: 0.9rem;
  }
}
/* ========================================
   BODY COPY LISTS
   ======================================== */

main .field--type-text-long ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

/* Standard circular bullets for formatted content */
main .field--type-text-long ul li,
main .field--name-body ul li {
  display: list-item;
  list-style-type: disc;
  margin-bottom: 0.2rem;
  line-height: 1.25;
  padding-left: 0.25rem;
}

/* Consistent bullet colour across formatted content */
main .field--type-text-long ul li::marker,
main .field--name-body ul li::marker {
  color: #00d2b9;
}