:root{
    --accent:#01a385;
}



.heroAbout {text-align:center; background:#f6faf9; padding:40px; border-radius:20px; margin-top:20px;}
.heroAbout .strap {color: #666; font-size: 18px; font-weight: 600; margin-bottom:20px;}

.weBelieve {margin-top:30px;}
.weBelieve .head {margin-bottom:25px;}
.weBelieve .steps {display:grid; grid-template-columns: 1fr 1fr 1fr; position:relative;}
.weBelieve .steps > div {padding:0 50px; text-align:center;}
.weBelieve .steps > div.useful {border: 1px solid #dce6ee; border-top:0; border-bottom:0;}
.weBelieve .steps .icon {padding: 15px; background: #e7faf6; border-radius: 50%; display: flex; justify-content: center; align-items: center;width: 51px; height: 51px; margin: 0 auto 20px;}
.weBelieve .steps [data-icon]:before {width:36px; height:36px;}


.existing {margin-top:30px; background:#f6faf9; border-radius:20px; line-height:1.6; padding:2px;}
.existing .topContainer {display:grid; grid-template-columns: 2fr 1fr 1fr; align-items: center; gap:60px; padding:40px;}
.existing .topContainer div:nth-of-type(2), .existing .topContainer div:nth-of-type(3) {border-left:1px solid #ddd; padding-left:60px;}
.existing .bottomContainer {padding:40px; background:#fff; border-radius:20px;}
.existing .bottomContainer .head {grid-column:1 / -1; }

.existing .bottomContainer .approachCardContainer {display:grid; grid-template-columns: 1fr 1fr 1fr; max-width:900px; margin:30px auto;}
.existing .bottomContainer .approachCard {text-align:center; border-right:1px solid #ddd; padding:0 30px;}
.existing .bottomContainer .approachCard:before {content:'01';color:#ccebe4; font-size:28px; font-weight:700;}
.existing .bottomContainer .approachCard:nth-of-type(2):before {content:'02';}
.existing .bottomContainer .approachCard:nth-of-type(3) {border-right:none;}
.existing .bottomContainer .approachCard:nth-of-type(3):before {content:'03';}
.existing .bottomContainer .cta {background:#f6faf9; display:flex; gap:20px; align-items: center; padding:20px; border-radius: 10px; max-width:920px; margin:0 auto;}
.existing .bottomContainer .cta .icon {background:var(--accent); border-radius:50%; width:36px; height:36px; min-width:36px; display: flex; align-items: center; justify-content: center;}
.existing .bottomContainer .cta .icon [data-icon]:before {background:#fff; width:28px; height:28px;}
.existing .bottomContainer .cta .slogan {font-weight:600; padding-right:20px; border-right:1px solid #ddd;}
.existing .bottomContainer .cta .desc {font-size:12px;}



.ukBuilt {margin-top:30px; border-radius:20px;  padding:40px; border: 1px solid #dce6ee; display:grid; grid-template-columns: 1fr 1fr;}
.ukBuilt .graphic {background:url('/assets/images/website/ukmap.webp') no-repeat center; min-height:400px; background-size: contain;}
.ukBuilt .text {}
.ukBuilt .text h3 {margin-bottom:5px;}
.ukBuilt .item {display:grid; grid-template-columns: 50px 1fr; gap:20px; margin-top:20px;}
.ukBuilt .item .icon {background: #e7faf6; padding:10px; border-radius:50%; display:flex; justify-content: center; align-items: center; width:50px; height:50px;} 
.ukBuilt .item .icon [data-icon]:before {background: #0f8b72; width:30px; height:30px;} 
.ukBuilt .item .icon img {width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}

.propertyData {background:#fafbfb; margin-top:30px; display:grid; align-items: center; grid-template-columns:320px 1fr; gap:30px; line-height:1.6;}
.propertyData .cards {display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.propertyData .cards .card {box-shadow:none;}
.propertyData .cards .icon {padding: 15px; background: #e7faf6; border-radius: 50%; display: flex; justify-content: center; align-items: center;width: 51px; height: 51px; margin-bottom:20px;}
.propertyData .cards [data-icon]:before {width:36px; height:36px;}



.finalCTA {margin-top:30px; text-align: center;  color:#e7e7e7; padding:30px 20px; border-radius:20px; position:relative; background:#161e2f; z-index:1;}
.finalCTA::before, .finalCTA::after {content:''; position:absolute; top:0; bottom:0; width:300px;z-index:-1;border-radius:20px; background-size:cover;}
.finalCTA::before { left:0; background-image:url('/assets/images/website/ctabackground.webp'); }
.finalCTA::after { right:0; background-image:url('/assets/images/website/ctabackground.webp'); background-position: center right;}

.finalCTA .head .pill {background:transparent; font-size:16px; color:#00c39f}
.finalCTA .head h2 {color:#fff;}
.finalCTA .head .strap {color: #e7e7e7;}
.finalCTA .bens {display:flex; align-items: center; justify-content: center; gap:30px; color:#e7e7e7; font-size:12px; font-weight:600; margin-top:20px;}
.finalCTA .bens [data-icon]::before {width:18px; height:18px; background:#00c39f;}
.finalCTA .actions {display:flex; align-items: center; justify-content: center; gap:10px; margin-top:20px;}
.finalCTA .actions a {border:1px solid #00c39f; color:#fff; background:#161e2f;}
.finalCTA .actions a.prices::after {margin-left:20px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/arrow_right_alt.svg') no-repeat center/contain;}
.finalCTA .actions a.primary {background:#00c39f; border-color:#00c39f;}
.finalCTA .actions a.primary::before {margin-right:10px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/gift.svg') no-repeat center/contain;}



@media(max-width:1100px){
    .existing .topContainer {grid-template-columns: 1fr 1fr; gap: 20px 0;}
    .existing .topContainer div:nth-of-type(1) {grid-column: 1 / -1;}
    .existing .topContainer div:nth-of-type(2) {padding-left:0; border-left:none; padding-right:30px;}
    .existing .topContainer div:nth-of-type(3) {padding-left:30px;}

    .ukBuilt {grid-template-columns: 0.7fr 1.3fr; gap:30px;}

    .propertyData {grid-template-columns:1fr;}
    .propertyData .text {grid-column: 1 / -1;}
}


@media(max-width:1000px){
    .weBelieve .steps > div {padding:0 20px;}
}

@media(max-width:960px){
    h1 {font-size: clamp(24px, 4.2vw, 64px);}
    h2 {font-size: clamp(22px, 3vw, 32px);}

}


@media(max-width:880px){
    .propertyData .cards {grid-template-columns: repeat(2,1fr);}
}

@media(max-width:800px){
    .weBelieve .steps {grid-template-columns: 1fr; max-width:500px; margin:0 auto;}
    .weBelieve .steps > div {position: relative; text-align: left; padding:30px 0 30px 70px;}
    .weBelieve .steps > div h3 {margin-bottom:5px;}
    .weBelieve .steps > div.useful {border-top: 1px solid #dce6ee; border-bottom: 1px solid #dce6ee; border-left: 0; border-right: 0;}
    .weBelieve .steps .icon {position: absolute;left: 0;top: 50%;transform: translateY(-50%);}

    .existing .bottomContainer .approachCardContainer {grid-template-columns: 1fr; max-width:500px;}
    .existing .bottomContainer .approachCard {border-bottom: 1px solid #dce6ee; border-right: 0; padding:30px 0 30px 70px; position: relative; text-align: left;}
    .existing .bottomContainer .approachCard h3 {margin-bottom:5px;}
    .existing .bottomContainer .approachCard:before {position: absolute;left: 0;top: 50%;transform: translateY(-50%); font-size:44px;}
    .existing .bottomContainer .approachCard:last-child {border: 0;}

    .ukBuilt {grid-template-columns:1fr}
    .ukBuilt .graphic {display:none;}
}

@media(max-width:710px){
    .existing .bottomContainer .cta {display:block; position:relative; padding:20px 20px 20px 80px;}
    .existing .bottomContainer .cta .icon {position: absolute;left:20px;top: 50%;transform: translateY(-50%); font-size:44px;}
    .existing .bottomContainer .cta .slogan {border-right:0; padding-right:0;}
}



@media(max-width:680px){
    .existing .topContainer {grid-template-columns: 1fr;}
    .existing .topContainer div:nth-of-type(3) {padding-left:0; border-left:0;}
}

@media (max-width:600px) {
}


@media(max-width:550px) {

    .heroAbout {padding:20px;}
    .heroAbout .strap {font-size:16px;}


    /* .weBelieve .head {text-align:left;} */

    .existing .topContainer {padding:20px;}
    .existing .bottomContainer {padding:20px;}
    /* .existing .bottomContainer .head {text-align:left;} */
    .existing .bottomContainer .cta {display: flex; flex-direction: column; padding: 20px; text-align: center; gap: 0;}
    .existing .bottomContainer .cta .icon {position:static;transform: none; margin-bottom: 20px;}

    .ukBuilt {padding:20px;}

    .propertyData .cards {grid-template-columns: 1fr;}

    .finalCTA .actions {flex-direction:column}
    .finalCTA .actions {flex-direction:column}
    .finalCTA .actions a {width:250px; justify-content: center;}
    .finalCTA .bens {flex-direction: column; gap: 10px; width: 250px; margin: 20px auto 0; align-items: flex-start;}

    .finalCTA::before {background:transparent;}
    .finalCTA::after {background:transparent;}

}