/* =============================================================================
   Colour Point — responsive overrides
   Loaded after main.css. Desktop styles live in main.css; this file scales the
   homepage down across the project breakpoints.

   Breakpoints (max-width): 1260 · 1024 · 992 · 768 · 640 · 540 · 480 · 420 · 380 · 320
   Rules are written largest → smallest so each step inherits the one above.
   ========================================================================== */

@media (min-width: 4001px) {
	.banner	{
		margin-top: -5vw;
	}
	.banner .banner-upper:before {
		height: 15vw !important;
	}
	.banner .banner-upper{
		padding-top: 10vw !important;
	}
}

@media (min-width: 2300px) and (max-width: 4000px) {
	.banner	{
		margin-top: -4vw;
	}
	.banner .banner-upper:before {
		height: 12vw;
	}
	.banner .banner-upper{
		padding-top: 8vw;
	}
	.banner::after {
		transform: rotate(-1deg);
	}
	.orange-curve-upper, .black-curve-upper {
		padding: 5vw 0 14vw;
		background-image: url(../Images/orange-curved-background.svg);
	}
	.black-curve-upper {
		background-image: url(../Images/black-curved-background.svg);
	}
	.orange-curve {
		margin-bottom: -6vw;
	}
	.black-curve {
		margin-bottom: -8vw;
	}
	.site-footer {
		background-image: url(../Images/footer-curved-background.svg);
	}
	.site-footer__inner{
		padding-top: 5vw;
	}
}
@media (max-width: 1260px) {
    h1, h2 { font-size: 52px; }

    .banner-upper { padding: 140px 0 145px; }
    .media-teaser__header { font-size: 5rem; }

    .special-image-text__title { font-size: 8rem; }

    .how-it-works__number { font-size: 7.5rem; }

    .special-numbers-list__number { font-size: 58px; }
    .special-numbers-list__header { font-size: 46px; }

    .contact-curve__contact { font-size: 7rem; }
    .contact-curve__header { font-size: 48px; }

    .teaser--secondary .teaser__image img { height: 380px; }
	.banner-overlay-box{
		margin-top: -110px;
	}

	#c21 .container__col.container__col--right{
		padding-left: 20px;
	}
	.footer-contact__header {
		font-size: 42px;
		margin-bottom: 40px;
	}
}

/* ---- 1024px ------------------------------------------------------------- */
@media (max-width: 1024px) {
    body { font-size: 26px; }
    h1, h2 { font-size: 44px; }
    h3 { font-size: 26px; }

    .text-30 { font-size: 26px; }
    .text-24 { font-size: 22px; }
    .text-20 { font-size: 19px; }
    .text-18 { font-size: 17px; }

    .site-logo img { height: 110px; }
    .site-header__phone { font-size: 24px; }

	.site-nav__close {
		margin-top: 53px;
	}

    .banner-upper { padding: 120px 0 120px; }
    .media-teaser__header { font-size: 4rem; }
    .media-teaser__text { font-size: 30px; }
    .media-teaser__items-wrapper { margin-top: 110px; }
    .media-teaser__item img { height: 64px; }
    .media-teaser__item-title { font-size: 28px; }

    .banner-overlay-box {
        margin-top: -110px;
        padding: 40px 30px;
    }
    .banner-overlay-box__image img { height: 78px; }
    .banner-overlay-box__header { font-size: 38px; }
    .banner-overlay-box__subheader { font-size: 22px; }

    .teaser__header { font-size: 30px; }
    .teaser__text { font-size: 22px; }

    .special-image-text { margin-top: 60px; margin-bottom: 50px; }
    .special-image-text__title { font-size: 6.5rem; }
    .special-image-text__text { font-size: 24px; }

    .special-list__header { font-size: 38px; }

    .how-it-works { margin-top: 70px; }
    .how-it-works__number { font-size: 6.5rem; }
    .how-it-works__title { font-size: 24px; }

    .special-numbers-list { margin-top: 60px; margin-bottom: 90px; }
    .special-numbers-list__number { font-size: 52px; margin-right: 30px; }
    .special-numbers-list__header { font-size: 42px; }

    .contact-curve__header { font-size: 44px; }
    .contact-curve__contact { font-size: 6rem; }
    .contact-curve__link a { font-size: 26px; padding: 26px 42px; }

    .teaser--secondary .teaser__image img { height: 340px; }
    .teaser--secondary .teaser__header { font-size: 30px; }

    .footer-contact__header { font-size: 38px; margin: 0 0 45px; }
    .footer-contact__text { font-size: 22px; }
    .site-footer { margin-top: 60px; }
	#c21 .container--2cols{
		gap: 30px;
	}
}

/* ---- 992px ------------------------------------------------------------- */
@media (max-width: 992px) {
    h1, h2 { font-size: 40px; }

    .banner-upper { padding: 100px 0 130px; }
    .media-teaser__header { font-size: 3.6rem; }

    /* Stats row wraps two-up instead of one long line */
    .special-image-text__items { gap: 40px 24px; padding: 0 0 100px;}
    .special-image-text__item { flex: 1 1 40%; }
    .special-image-text__title { font-size: 5.5rem; }

    .how-it-works__number { font-size: 6rem; }

    .special-numbers-list__number { font-size: 64px; }
    .special-numbers-list__header { font-size: 36px; }
	.special-numbers-list__item { margin-bottom: 15px;}

    .contact-curve__contact { font-size: 5rem; }

    #c21 .container__col.container__col--right { padding-left: 10px; }
	.map-consent { height: 480px;}
	.orange-curve-upper, .black-curve-upper {
		padding: 60px 0 60px;
	}
	.contact-curve__link{
		padding-bottom: 100px;
	}
	.how-it-works__items{
		padding-bottom: 100px;
	}

	.footer-nav {
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	.site-footer__bar-inner {
		flex-flow: column-reverse;
	}
	.site-footer__copyright {
		margin-top: 40px;
	}
	#c22 {
		text-align: center;
	}
	.teaser--secondary {
		gap: 10px;
	}

	.frame-layout-1 .ce-intext.ce-left .ce-gallery{
		margin-right: 0px;
  		margin-bottom: 30px;
	}
	.frame-layout-1 .ce-intext.ce-right .ce-gallery{
		margin-left: 0px;
  		margin-bottom: 30px;
	}
	.ce-left .ce-gallery, .ce-right .ce-gallery{
		float: none;
	}
	.frame-layout-1 .ce-gallery .ce-row {
		justify-content: left;
	}
	.site-nav__contact {
		font-size: 30px;
	}
	.site-nav__menu .main-nav__link {
		font-size: 36px;
	}
}

@media (min-width: 769px){
	.how-it-works__items .how-it-works__item:first-child .how-it-works__number::before { display: none; }
	.how-it-works__items .how-it-works__item:last-child .how-it-works__number::after { display: none; }

	.frame-indent {
		margin-top: 100px;
	}
}

/* ---- 768px ------------------------------------------------------------- */
@media (max-width: 768px) {

	/* Menu overlay: stack contact + navigation vertically */
	
	.site-nav__panel-body {
		flex-direction: column-reverse;
    	align-items: flex-start;
    	justify-content: flex-end;
		gap: 40px;
		padding-top: 60px;
	}
	.site-nav__close{
		
	}
	.site-header__topbar-inner {
		display: none;
	}
	.site-nav__contact { font-size: 24px; }
	.site-nav__menu { width: 100%; }
	.site-nav__menu .main-nav { align-items: flex-start; }
	.site-nav__menu .main-nav__link { font-size: 30px; }
	.site-nav__menu .main-nav__sub { align-items: flex-start; }
	.site-nav__menu .main-nav__sub-link { font-size: 18px; }
	.site-nav__menu .main-nav__item{
		text-align: left;
	}

    body { font-size: 22px; }
    h1, h2 { font-size: 36px; }
    h3 { font-size: 24px; }

    .text-30 { font-size: 22px; }
    .text-24 { font-size: 20px; }
    .text-20 { font-size: 18px; }
    .text-18 { font-size: 16px; }

    .frame-space-before-extra-large { padding-top: 80px; }
    .frame-space-before-large { padding-top: 60px; }
    .frame-space-after-extra-large { padding-bottom: 80px; }
    .frame-space-after-large { padding-bottom: 60px; }

    .banner-upper { padding: 80px 0 90px; background: rgba(0,0,0,0.5);}
    .banner::after { height: 100px; bottom: -45px; }
    .media-teaser__header { font-size: 3rem; }
    .media-teaser__text { font-size: 24px; }
    .media-teaser__items-wrapper { margin-top: 70px; }
    .media-teaser__items { gap: 24px; justify-content: center; padding: 0; }
    .media-teaser__item { flex: 1 1 40%; }

    .banner-overlay-box {
        flex-direction: column;
        text-align: center;
        margin-top: -80px;
        margin-bottom: 50px;
        padding: 34px 24px;
        gap: 24px;
    }
    .banner-overlay-box__header { font-size: 32px; }

    .special-image-text__title { font-size: 5rem; min-height: 0; }
    .special-image-text__text { font-size: 22px; }

    .special-list {
		margin-top: 0;
		margin-bottom: 50px;
	}
    .special-list_top {  }
    .special-list__image {
		margin: 0 20px 10px 0;
		display: flex;
		align-items: center;
	}
    .special-list__header { font-size: 32px; word-break: break-word;}

    .how-it-works__number { font-size: 5.5rem; margin-bottom: 0;}

    .special-numbers-list__number {
		font-size: 54px;
		margin-right: 20px;
	}
    .special-numbers-list__header { font-size: 30px; }

    .contact-curve__header { font-size: 36px; }
    .contact-curve__contact { font-size: 4.2rem; margin: 50px 0 20px; }
    .contact-curve__link a { font-size: 22px; padding: 22px 36px; }

    .teaser--secondary {
		padding-top: 40px;
		display: block;
	}
	.teaser--secondary .teaser__item {
		margin-bottom: 50px;
	}
	.teaser--secondary .teaser__header{
		margin-bottom: 15px;
	}
    .teaser--secondary .teaser__image img { height: 300px; margin-bottom: 0;}
	.teaser--secondary .teaser__link {margin-top: 0;}

    
    #c21 .container--2cols { flex-direction: column; gap: 40px; }
    #c21 .container__col.container__col--left,
    #c21 .container__col.container__col--right { width: 100%; padding-left: 0; margin-bottom: 0; }
    .footer-contact__cta { margin: 50px 0 0; }
    .footer-contact__button { margin-left: 0; }
    
	.teaser--primary { display: block; }
	.teaser--primary .teaser__item {
		margin-bottom: 70px;
		padding: 0;
	}
	.teaser__text {
		font-size: 22px;
	}
	.teaser--primary .teaser__link a {
		font-size: 20px;
	}
	.teaser__link {
		text-align: center;
		position: relative;
	}
	.container--2cols {
		display: block;
	}
	.container--2cols .container__col--left{
		margin-bottom: 50px;
	}
	.how-it-works {
		margin-bottom: -80px;
	}
	.how-it-works__items {
		display: block;
		padding-bottom: 140px;
	}
	.how-it-works__item {
		margin-bottom: 20px;
	}
	.how-it-works__items .how-it-works__number::before{
		left: 0;
	}
	.how-it-works__items .how-it-works__number::after {
		left: auto;
		right: 0;
	}
	.site-footer__inner{
		padding-top: 80px;
	}
	.footer-contact__header{
		margin: 0 0 30px;
	}
	.aos-animate {
		transition-delay: 0s !important;
	}
	.frame-layout-1 {
		font-size: 22px;
	}
	.frame-layout-1 h3 {
		font-size: 24px;
	}
	.frame header {
		margin-bottom: 20px;
	}
	.banner-overlay-box__image.box-right{
		display: none;
	}
}

/* ---- 640px ------------------------------------------------------------- */
@media (max-width: 640px) {
    h1, h2 { font-size: 32px; }

	p {
		margin: 0 0 20px 0;
	}

	.site-logo img {
		width: 250px;
		height: auto;
	}
	.site-nav__toggle-label{
		font-size: 26px;
	}
	.site-nav__toggle-icon {
		width: 40px;
	}
	.site-header__phone {
		font-size: 20px;
	}
	.site-header__topbar {
		top: 10px;
	}
	.site-nav {
		margin-top: 40px;
	}
	.site-nav__close-icon {
		width: 40px;
	}

	.site-nav__close {
		margin-top: 35px;
	}
	.site-nav__close-label {
		font-size: 26px;
	}

	.banner-upper {
		padding: 80px 0 120px;
	}
    .media-teaser__header { font-size: 2.8rem; }
    .media-teaser__items { flex-direction: column; align-items: flex-start; }
    .media-teaser__item { flex: 1 1 100%; }
	.media-teaser__item img {
		max-height: 40px;
		width: auto;
		max-width: 35px;
		height: auto;
	}

	.special-image-text__image {
		height: 80px;
	}
	.special-image-text__image img {
		max-width: 100px;
	}

	.special-image-text {
		margin-bottom: -80px;
	}
    .special-image-text__items {
		gap: 36px;
		padding-bottom: 180px;
	}
    .special-image-text__item { flex: 1 1 100%; }
    .special-image-text__title { font-size: 4.4rem; }

	.frame-indent h2 {
		font-size: 24px;
	}

	.how-it-works__header {
		margin: 0px 0 20px;
	}

    .how-it-works__number { font-size: 5rem; }
	
    .special-numbers-list__header {
		margin-top: 0;
	}
	.special-numbers-list__header {
		font-size: 28px;
		margin-bottom: 10px;
	}
    .special-numbers-list__item { flex-direction: column; text-align: center; margin-bottom: 50px; }
    .special-numbers-list__number { margin-right: 0; margin-bottom: 8px; }

    .contact-curve__contact { font-size: 3.6rem; }

	.site-footer__bar {
		padding: 0 0 100px 0;
	}
	.frame-type-form_formframework .form-element-email,
    .frame-type-form_formframework .form-element-email + .form-element-text {
        grid-column: 1 / -1;
    }
	.frame-layout-1 h3, .frame-layout-2 h3 {
		font-size: 24px;
	}
	.frame-layout-2 {
		font-size: 20px;
	}
	.contact-info__item{
		font-size: 18px;
	}
	.contact-info__text {
		margin-top: -4px;
	}
	
}

/* ---- 540px -------------------------------------------------------------- */
@media (max-width: 540px) {
    body { font-size: 20px; }
    h1, h2 { font-size: 30px; }

    .text-30 { font-size: 20px; }
    .text-24 { font-size: 18px; }
    .text-20 { font-size: 17px; }
    .text-18 { font-size: 15px; }

    .banner-upper { padding: 70px 0 80px; }
    .media-teaser__header { font-size: 2.4rem; }
    .media-teaser__text { font-size: 20px; }

    .banner-overlay-box__header { font-size: 28px; }
    .banner-overlay-box__subheader { font-size: 20px; }

    .special-image-text__title { font-size: 3.6rem; }
    .special-image-text__image { height: 140px; }

    .special-list__header { font-size: 28px; }

    .how-it-works__number { font-size: 4.5rem; }
    .how-it-works__title { font-size: 22px; }

    .special-numbers-list__number { font-size: 38px; }
    .special-numbers-list__header { font-size: 28px; }

    .contact-curve__header { font-size: 32px; }
    .contact-curve__contact { font-size: 3.2rem; letter-spacing: 2px; }
    .contact-curve__link a { font-size: 20px; padding: 20px 32px; }

    .teaser--secondary .teaser__image img { height: 260px; }
    .teaser--secondary .teaser__header { font-size: 28px; }

    .footer-contact__header { font-size: 30px; }
    .footer-contact__text { font-size: 20px; }

	.frame-layout-1 {
		font-size: 20px;
	}
	.contact-hours {
		padding: 25px 20px;
	}
}

/* ---- 480px -------------------------------------------------------------- */
@media (max-width: 480px) {
    body { font-size: 18px; }
    h1, h2 { font-size: 28px; }

    .text-30 { font-size: 18px; }
    .text-24 { font-size: 17px; }
    .text-20 { font-size: 16px; }
    .text-18 { font-size: 14px; }

	.site-logo img {
		height: auto;
		width: 200px;
	}
	.site-nav {
		margin-top: 25px;
		margin-top: 10px;
	}

	.site-nav__close-icon {
		width: 30px;
	}

    .site-header__phone { font-size: 20px; }

	.site-nav__toggle-label, .site-nav__close-label {
		font-size: 20px;
	}
	.site-nav__toggle-icon {
		width: 30px;
		margin-right: 10px;
	}
	.site-nav__close {
		margin-top: 10px;
		gap: 10px;
	}
	
	.site-nav__toggle-icon span, .site-nav__close-icon span {
		height: 3px;
	}
	.site-header__phone {
		font-size: 16px;
	}
	.site-header__phone-icon img {
		width: 20px;
	}

	.site-nav__menu .main-nav__link{
		font-size: 24px;
	}

	.site-nav__menu .main-nav__sub-link{
		font-size: 16px;
	}

	.site-nav__contact{
		font-size: 22px;
	}

	.banner-upper {
		padding: 70px 0 100px;
	}
    .media-teaser__header { font-size: 2rem; }
    .media-teaser__text { font-size: 18px; }
    .media-teaser__item img { height: 40px; }
    .media-teaser__item-title { font-size: 22px; }

    .banner-overlay-box { padding: 26px 18px; }

	.teaser__header {
		font-size: 28px;
	}
	.teaser__text {
		font-size: 20px;
	}

    .special-image-text__title { font-size: 3rem; }
    .special-image-text__image { height: 120px; }
    .special-image-text__text { font-size: 20px; }

    .how-it-works__number { font-size: 4rem; }

    .special-numbers-list__number { font-size: 50px; }
    .special-numbers-list__header { font-size: 26px; }

    .contact-curve__header { font-size: 28px; }
    .contact-curve__contact { font-size: 2.8rem; }
    .contact-curve__link a { font-size: 18px; padding: 18px 28px; }

    .teaser--secondary .teaser__image img { height: 220px; }
	.site-footer__bar {
		font-size: 20px;
	}
	.special-image-text__image img {
		max-width: 80px;
	}

	.frame-layout-1 {
		font-size: 18px;
	}
}

/* ---- 420px -------------------------------------------------------------- */
@media (max-width: 420px) {
    h1, h2 { font-size: 26px; }

		

    .media-teaser__header { font-size: 1.8rem; }

    .special-image-text__title { font-size: 2.6rem; }

    .how-it-works__number { font-size: 3.5rem; }

    .special-numbers-list__header { font-size: 24px; }

    .contact-curve__contact { font-size: 2.4rem; }
}

/* ---- 380px -------------------------------------------------------------- */
@media (max-width: 380px) {
    body { font-size: 17px; }
    h1, h2 { font-size: 24px; }

    .text-30 { font-size: 17px; }
    .text-24 { font-size: 16px; }
    .text-20 { font-size: 15px; }
    .text-18 { font-size: 14px; }
	h3{
		font-size: 20px;
	}

    .media-teaser__header { font-size: 1.6rem; }
    .media-teaser__text { font-size: 17px; }

    .special-image-text__title { font-size: 2.3rem; }

    .contact-curve__contact { font-size: 2.1rem; }
    .contact-curve__link a { font-size: 16px; padding: 16px 24px; }

    .teaser--secondary .teaser__image img { height: 190px; }

	.frame-layout-1 h3{
		font-size: 20px;
	}
}

/* ---- 320px -------------------------------------------------------------- */
@media (max-width: 320px) {
    body { font-size: 16px; }
    h1, h2 { font-size: 22px; }

    .text-30 { font-size: 16px; }
    .text-24 { font-size: 15px; }
    .text-20 { font-size: 14px; }
    .text-18 { font-size: 13px; }

    .container { padding: 0 14px; }

    .site-logo img { height: 80px; }

    .media-teaser__header { font-size: 1.4rem; }

    .special-image-text__title { font-size: 2rem; }

    .how-it-works__number { font-size: 3rem; }

    .special-numbers-list__number { font-size: 30px; }
    .special-numbers-list__header { font-size: 22px; }

    .contact-curve__contact { font-size: 1.9rem; }

    .teaser--secondary .teaser__image img { height: 170px; }
}