/* ==========================================================================
   Zon Optimaal — Primary Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & Base
   -------------------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

body {
    font-family: "effra", sans-serif;
    font-size: 13px;
    color: #141313;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: url(../images/bg-gradient-min.jpg) no-repeat top center;
    background-size: 100% auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

@media (min-width: 1281px) {
    body {
        font-size: 18px;
    }
}

a {
    color: #3e6da4;
    transition: 0.3s;
}

a:hover {
    color: #247780;
}

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

p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "effra", sans-serif;
    font-weight: 700;
    color: #141313;
}

/* --------------------------------------------------------------------------
   2. Layout & Utility Classes
   -------------------------------------------------------------------------- */

.container {
    max-width: 1400px;
    padding: 0 15px;
    margin: 0 auto;
}

/* Display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.inline-block { display: inline-block; }
.none { display: none; }

/* Stacks */
.hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.vstack {
    display: flex;
    flex-direction: column;
}

/* Position */
.rel { position: relative; }
.abs { position: absolute; }
.fixed { position: fixed; }

.fill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Text */
.text-center { text-align: center; }
.text-white { color: #fff; }

/* Background colors */
.bg-color-1 { background-color: #247780; color: #fff; }
.bg-color-1 h2,
.bg-color-1 h3,
.bg-color-1 h4 { color: #fff; }

/* Box styles */
.box-shadow { box-shadow: 0 0 30px rgba(0, 0, 0, 0.07); }
.border-radius { border-radius: 0.75rem; }

/* Gap utilities */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }

/* Padding utilities */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }
.p-6 { padding: 3.5rem; }
.p-7 { padding: 4rem; }
.p-8 { padding: 4.5rem; }
.p-9 { padding: 5rem; }
.p-10 { padding: 5.5rem; }
.p-11 { padding: 6rem; }
.p-12 { padding: 6.5rem; }
.p-13 { padding: 7rem; }
.p-14 { padding: 7.5rem; }
.p-15 { padding: 8rem; }
.p-16 { padding: 8.5rem; }
.p-17 { padding: 9rem; }
.p-18 { padding: 9.5rem; }
.p-19 { padding: 10rem; }
.p-20 { padding: 10.5rem; }

/* Margin utilities */
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }
.m-6 { margin: 3.5rem; }
.m-7 { margin: 4rem; }
.m-8 { margin: 4.5rem; }
.m-9 { margin: 5rem; }
.m-10 { margin: 5.5rem; }
.m-11 { margin: 6rem; }
.m-12 { margin: 6.5rem; }
.m-13 { margin: 7rem; }
.m-14 { margin: 7.5rem; }
.m-15 { margin: 8rem; }
.m-16 { margin: 8.5rem; }
.m-17 { margin: 9rem; }
.m-18 { margin: 9.5rem; }
.m-19 { margin: 10rem; }
.m-20 { margin: 10.5rem; }

/* Responsive padding */
@media (min-width: 576px) {
    .p-sm-1 { padding: 0.25rem; }
    .p-sm-2 { padding: 0.5rem; }
    .p-sm-3 { padding: 1rem; }
    .p-sm-4 { padding: 1.5rem; }
    .p-sm-5 { padding: 3rem; }
}

@media (min-width: 768px) {
    .p-md-1 { padding: 0.25rem; }
    .p-md-2 { padding: 0.5rem; }
    .p-md-3 { padding: 1rem; }
    .p-md-4 { padding: 1.5rem; }
    .p-md-5 { padding: 3rem; }
}

@media (min-width: 992px) {
    .p-lg-1 { padding: 0.25rem; }
    .p-lg-2 { padding: 0.5rem; }
    .p-lg-3 { padding: 1rem; }
    .p-lg-4 { padding: 1.5rem; }
    .p-lg-5 { padding: 3rem; }
}

/* Responsive margin */
@media (min-width: 576px) {
    .m-sm-1 { margin: 0.25rem; }
    .m-sm-2 { margin: 0.5rem; }
    .m-sm-3 { margin: 1rem; }
    .m-sm-4 { margin: 1.5rem; }
    .m-sm-5 { margin: 3rem; }
}

@media (min-width: 768px) {
    .m-md-1 { margin: 0.25rem; }
    .m-md-2 { margin: 0.5rem; }
    .m-md-3 { margin: 1rem; }
    .m-md-4 { margin: 1.5rem; }
    .m-md-5 { margin: 3rem; }
}

@media (min-width: 992px) {
    .m-lg-1 { margin: 0.25rem; }
    .m-lg-2 { margin: 0.5rem; }
    .m-lg-3 { margin: 1rem; }
    .m-lg-4 { margin: 1.5rem; }
    .m-lg-5 { margin: 3rem; }
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    padding: 0;
    transition: 0.3s ease;
    background: transparent;
}

header.scrolled {
    position: fixed;
    top: 0;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    padding: 0;
    z-index: 99999;
    animation: slideDown 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

header.scrolled .header-inner {
    padding: 0.5rem 0;
}

header.scrolled .logo img {
    height: 40px;
}

header.scrolled nav ul li a {
    color: #141313;
}

header.scrolled .google-review .google-review-content span {
    color: #141313;
}

header.scrolled .icon-btn.phone {
    background: #247780;
}

.admin-bar header.scrolled {
    top: 32px;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 0;
}

header .logo img {
    height: 60px;
    width: auto;
    transition: 0.3s;
}

header nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    transition: 0.3s;
}

header.scrolled nav ul li a {
    color: #141313;
}

header nav ul li a:hover {
    color: #ff8400;
}

header .icon-btn.phone {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background: #247780;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
}

/* Google review badge in header */
header .google-review.top-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

header .google-review .logo {
    width: 27px;
    height: 27px;
    background: url(../images/google_logo.svg) no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

header .google-review .google-review-content .top {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

header .google-review .google-review-content span {
    font-weight: 700;
    color: #141313;
    font-size: 0.9rem;
}

header .google-review .stars {
    display: flex;
    gap: 2px;
}

header .google-review .star {
    width: 16px;
    height: 16px;
    background: url(../images/icon-star.svg) no-repeat center;
    background-size: contain;
}

/* --------------------------------------------------------------------------
   4. Mobile Navigation
   -------------------------------------------------------------------------- */

.toggle-nav {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.toggle-nav span {
    display: block;
    width: 25px;
    height: 2px;
    background: #141313;
    margin: 5px 0;
    transition: 0.3s;
}

header:not(.scrolled) .toggle-nav span {
    background: #fff;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 99;
    padding: 6rem 2rem 2rem;
}

.mobile-nav.active {
    display: block;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav ul li {
    margin-bottom: 1.5rem;
}

.mobile-nav ul li a {
    font-size: 1.25rem;
    font-weight: 700;
    color: #141313;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
    position: relative;
    font-family: "effra", sans-serif;
    font-weight: 700;
    padding: 0.5rem 2.25rem 0.5rem 1.25rem;
    border: none;
    border-radius: 0.25rem;
    background-color: #ff8400;
    background-image: url(../images/icon-chevron-right-white.svg);
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 0.5rem;
    font-size: 1rem;
    color: #fff;
    display: inline-block;
    transition: 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #e57600;
    color: #fff;
    text-decoration: none;
}

.btn.btn-color-5 {
    background-color: #c0dcd0;
    color: #3e6da4;
    background-image: url(../images/icon-chevron-right-color-6.svg);
}

.btn.btn-color-5:hover {
    background-color: #a8d0be;
}

/* --------------------------------------------------------------------------
   6. Banner / Hero Section
   -------------------------------------------------------------------------- */

.banner {
    position: relative;
    overflow: visible;
    min-height: 700px;
}

.banner .banner-inner {
    position: relative;
    z-index: 2;
}

.banner .content-container {
    padding-top: 200px;
    padding-bottom: 2rem;
}

.banner .toptitel {
    color: #585858;
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: block;
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
}

.banner h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: #141313;
    margin-bottom: 1.5rem;
}

.banner .banner-image {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    min-height: 700px;
    background-color: #141313;
    overflow: hidden;
    border-radius: 0 0 0 18px;
}

.banner .banner-image::after {
    content: '';
    position: absolute;
    top: -2rem;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(rgb(37, 69, 113), rgba(0, 0, 0, 0));
    z-index: 1;
    pointer-events: none;
}

.banner .banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    max-width: none;
}

/* CTA form inside banner */
.cta-form-small {
    background: #fff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.07);
    position: relative;
    z-index: 3;
    width: 150%;
    max-width: 830px;
}

/* USP checkmark list 2-column spacing on desktop */
.banner .animate-block ul li {
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 0.25rem;
}

.cta-form-small h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* USP list in banner */
.banner .animate-block ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.banner .animate-block ul li {
    position: relative;
    padding-left: 27px;
    font-size: 1rem;
    color: #34b87f;
    font-weight: 500;
}

.banner .animate-block ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url(../images/icon-check.svg) no-repeat center;
    background-size: contain;
}

/* --------------------------------------------------------------------------
   7. Gradient Triangle Background
   -------------------------------------------------------------------------- */

.gradient-triangle-bg {
    position: relative;
    background: linear-gradient(180deg, rgba(36, 119, 128, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
}

/* --------------------------------------------------------------------------
   8. Text with Image (tekst-met-afbeelding)
   -------------------------------------------------------------------------- */

.tekst-met-afbeelding {
    margin-bottom: 8rem;
}

/* Gradient toptitel (used across sections) */
.toptitel {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    background-image: linear-gradient(48deg, #79ba4e 0%, #2e507f 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tekst-met-afbeelding .toptitel {
    /* inherits gradient */
}

.tekst-met-afbeelding h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.tekst-met-afbeelding p {
    color: #585858;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.tekst-met-afbeelding .row {
    align-items: flex-end;
}

.tekst-met-afbeelding .image-container img {
    border-radius: 9px;
}

.tekst-met-afbeelding .image-container img {
    width: 80%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 9px;
}

/* --------------------------------------------------------------------------
   9. Text Columns / Benefits (tekst-kolommen)
   -------------------------------------------------------------------------- */

.tekst-kolommen {
    padding-top: 7rem;
    margin-bottom: 8rem;
}

.tekst-kolommen.light-gradient {
    background: linear-gradient(180deg, rgba(192, 220, 208, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

.tekst-kolommen .kolom {
    text-align: center;
    padding: 2rem 1rem;
}

.tekst-kolommen .kolom img {
    width: 55px;
    height: 55px;
    margin-bottom: 1rem;
}

.tekst-kolommen .kolom h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #141313;
}

.tekst-kolommen .kolom p {
    font-size: 0.95rem;
    color: #585858;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Reverse row variant for tekst-met-afbeelding
   -------------------------------------------------------------------------- */

.tekst-met-afbeelding.reverse-row .row > .col-md-6:first-child {
    order: 2;
}

.tekst-met-afbeelding.reverse-row .row > .col-md-6.img-col {
    order: 1;
}

.tekst-met-afbeelding .img-col {
    position: relative;
    overflow: visible;
}

.tekst-met-afbeelding .img-col > img:first-child {
    width: 65%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 9px;
}

.tekst-met-afbeelding .img-col .image-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    max-height: 400px;
    object-fit: cover;
    z-index: 2;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.tekst-met-afbeelding .content-container {
    padding-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   11. USP Cards (usps-titel-en-icoon)
   -------------------------------------------------------------------------- */

.usps-titel-en-icoon {
    margin-bottom: 8rem;
}

.usps-titel-en-icoon .section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.usps-titel-en-icoon .usp-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
    text-decoration: none;
    color: #141313;
    transition: 0.3s;
    height: 100%;
}

.usps-titel-en-icoon .usp-element:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.usps-titel-en-icoon .usp-element img,
.usps-titel-en-icoon .usp-icoon img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.usps-titel-en-icoon .usp-element span,
.usps-titel-en-icoon .usp-titel {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

/* --------------------------------------------------------------------------
   12. Guarantees / Zekerheden
   -------------------------------------------------------------------------- */

.zekerheden {
    padding-top: 7rem;
    margin-bottom: 8rem;
}

.zekerheden .intro h2 {
    font-size: 2rem;
    font-weight: 700;
}

.zekerheden .block-item {
    background: #fff;
    overflow: hidden;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.zekerheden .block-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.zekerheden .block-item .img-container {
    display: block;
    overflow: hidden;
}

.zekerheden .block-item .img-container img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: 0.3s;
}

.zekerheden .block-item:hover .img-container img {
    transform: scale(1.05);
}

.zekerheden .block-item .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.zekerheden .block-item .top-content {
    flex: 1;
}

.zekerheden .block-item h4 {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.zekerheden .block-item p {
    font-size: 0.95rem;
    color: #585858;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   13. Blog Slider
   -------------------------------------------------------------------------- */

.blog-items {
    margin-bottom: 8rem;
}

.blog-items .intro {
    text-align: center;
    margin-bottom: 2rem;
}

.blog-items h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.blog-items .blog-card {
    display: block;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: 0.3s;
    height: 100%;
    text-decoration: none;
    color: #141313;
}

.blog-items .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    color: #141313;
    text-decoration: none;
}

.blog-items .blog-card .image {
    position: relative;
    overflow: hidden;
}

.blog-items .blog-card .image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: 0.3s;
    display: block;
}

.blog-items .blog-card:hover .image img {
    transform: scale(1.05);
}

.blog-items .blog-card .image .category {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.blog-items .blog-card .card-content {
    padding: 1.25rem;
}

.blog-items .blog-card .category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #c0dcd0;
    color: #247780;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.blog-items .blog-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-items .blog-card .lees-verder {
    color: #4a9573;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-items .blog-card .lees-verder::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 12px;
    background: url(../images/icon-chevron-right-color-6.svg) no-repeat center;
    background-size: contain;
}

/* Swiper pagination */
.blog-items .swiper-pagination {
    margin-top: 2rem;
    position: relative;
}

.blog-items .swiper-pagination-bullet {
    background: #fff;
    border: 1px solid #141313;
    opacity: 1;
    width: 12px;
    height: 12px;
}

.blog-items .swiper-pagination-bullet-active {
    background: #141313;
}

/* --------------------------------------------------------------------------
   14. Content Text / Bottom CTA
   -------------------------------------------------------------------------- */

.content-tekst {
    margin-bottom: 8rem;
}

.content-tekst h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.content-tekst p {
    color: #585858;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

footer,
.site-footer {
    background: #247780;
    background-image: url(../images/gradient-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    position: relative;
}

footer::after {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 0;
    left: 0;
    right: 50%;
    background-image: url(../images/footer-triangle.png);
    z-index: 0;
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
    opacity: 0.08;
    pointer-events: none;
}

footer > * {
    position: relative;
    z-index: 1;
}

/* Footer USP row */
.footer-usp {
    padding: 4rem 0 2rem;
}

.footer-usp__heading {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
}

.footer-usp__cards {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-usp__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
    flex: 1;
    min-width: 220px;
    max-width: 300px;
}

.footer-usp__card:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-2px);
}

.footer-usp__icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.footer-usp__label {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Footer CTA box */
.footer-cta {
    padding: 0 0 3rem;
}

.footer-cta__box {
    background: #fff;
    color: #141313;
    padding: 2rem 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-cta__heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.footer-cta__green {
    color: #4a9573;
}

.footer-cta__text {
    margin: 0;
    color: #585858;
}

/* Footer columns */
.footer-columns {
    padding: 0 0 3rem;
}

.footer-columns__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}

.footer-columns__heading {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #fff;
}

.footer-columns__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-columns__list li {
    margin-bottom: 0.4rem;
}

.footer-columns__list li a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.footer-columns__list li a:hover {
    color: #fff;
}

/* Footer review */
.footer-review {
    padding: 1rem 0;
}

.footer-review__link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.footer-review__link:hover {
    color: #fff;
    opacity: 0.85;
}

.footer-review__text {
    font-weight: 500;
}

.footer-review__stars {
    color: #ffc107;
    font-size: 1.1rem;
}

.footer-review__rating {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Footer bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.5rem 0;
}

.footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom__copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.footer-bottom__nav {
    display: flex;
    gap: 1.5rem;
}

.footer-bottom__nav a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-decoration: none;
    transition: 0.3s;
}

.footer-bottom__nav a:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   16. Animations
   -------------------------------------------------------------------------- */

/* Scroll-triggered animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.scale-in {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-up.in-view,
.fade-in-down.in-view,
.fade-in-left.in-view,
.fade-in-right.in-view,
.scale-in.in-view,
.animate-block.in-view .fade-in-up,
.animate-block.in-view .fade-in-down,
.animate-block.in-view .fade-in-left,
.animate-block.in-view .fade-in-right,
.animate-block.in-view .scale-in {
    opacity: 1;
    transform: none;
}

.stagger.index-1 { transition-delay: 0.1s; }
.stagger.index-2 { transition-delay: 0.2s; }
.stagger.index-3 { transition-delay: 0.3s; }
.stagger.index-4 { transition-delay: 0.4s; }
.stagger.index-5 { transition-delay: 0.5s; }

/* Hero entrance animations */
@keyframes heroSlideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroImageReveal {
    from { opacity: 0; clip-path: inset(0 0 0 100%); }
    to { opacity: 1; clip-path: inset(0 0 0 0%); }
}

@keyframes heroFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.banner .toptitel {
    animation: heroFadeIn 0.6s ease 0.2s both;
}

.banner h1 {
    animation: heroSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.banner .cta-form-small {
    animation: heroSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.banner .animate-block {
    animation: heroFadeIn 0.6s ease 0.8s both;
}

.banner .banner-image {
    animation: heroImageReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Hover micro-interactions */
.btn {
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
}

.usp-element,
.block-item,
.blog-card,
.footer-usp__card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .banner {
        min-height: auto;
    }

    .banner .content-container {
        padding-top: 120px;
    }

    .banner .banner-image {
        position: relative;
        width: 100%;
        min-height: auto;
        margin-top: 2rem;
        border-radius: 0;
    }

    .banner h1 {
        font-size: 2rem;
    }

    .cta-form-small {
        width: 100%;
    }

    .banner .animate-block ul li {
        flex: 0 0 100%;
    }

    header nav {
        display: none;
    }

    header .toggle-nav {
        display: block;
    }

    .tekst-met-afbeelding,
    .tekst-kolommen,
    .zekerheden,
    .blog-items,
    .afbeelding-met-tekst,
    .usps-titel-en-icoon,
    .content-tekst {
        margin-bottom: 3.5rem;
    }

    .tekst-kolommen,
    .zekerheden {
        padding-top: 3rem;
    }

    .footer-columns__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-cta__box {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .banner .content-container {
        padding-top: 100px;
    }

    .banner h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    .footer-columns__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-usp__cards {
        flex-direction: column;
        align-items: center;
    }

    .footer-usp__card {
        max-width: 100%;
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom__nav {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   Calculator — Multi-step Battery Wizard
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.calculator-page {
    padding: 2rem 0 4rem;
}

.calculator-wrapper {
    max-width: 800px;
    margin: 0 auto;
    min-height: 600px;
}

/* --------------------------------------------------------------------------
   Progress Bar
   -------------------------------------------------------------------------- */

.calc-progress {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 2.5rem;
    padding: 0 1rem;
}

.calc-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.calc-progress__circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.calc-progress__number {
    font-family: "effra", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #999;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.calc-progress__check {
    position: absolute;
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.calc-progress__label {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: #999;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.calc-progress__line {
    flex: 1;
    height: 3px;
    background: #e0e0e0;
    margin-top: 18.5px;
    min-width: 24px;
    transition: background-color 0.5s ease;
}

.calc-progress__line.is-filled {
    background: #247780;
}

/* Active step */
.calc-progress__step.is-active .calc-progress__circle {
    background: #247780;
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(36, 119, 128, 0.15);
}

.calc-progress__step.is-active .calc-progress__number {
    color: #fff;
}

.calc-progress__step.is-active .calc-progress__label {
    color: #247780;
    font-weight: 700;
}

/* Completed step */
.calc-progress__step.is-complete .calc-progress__circle {
    background: #247780;
}

.calc-progress__step.is-complete .calc-progress__number {
    opacity: 0;
}

.calc-progress__step.is-complete .calc-progress__check {
    opacity: 1;
}

.calc-progress__step.is-complete .calc-progress__label {
    color: #247780;
}

/* --------------------------------------------------------------------------
   Steps Container & Transitions
   -------------------------------------------------------------------------- */

.calc-steps {
    position: relative;
    overflow: hidden;
}

.calc-step {
    display: none;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.calc-step.is-active {
    display: block;
}

@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-60px); opacity: 0; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(60px); opacity: 0; }
}

@keyframes slideInRight {
    from { transform: translateX(60px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-60px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.calc-step.slide-out-left  { animation-name: slideOutLeft; }
.calc-step.slide-out-right { animation-name: slideOutRight; }
.calc-step.slide-in-right  { animation-name: slideInRight; }
.calc-step.slide-in-left   { animation-name: slideInLeft; }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.calc-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.calc-heading {
    font-family: "effra", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #141313;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.calc-subtext {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Form Fields
   -------------------------------------------------------------------------- */

.calc-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calc-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.calc-field label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 0.35rem;
}

.calc-field-row {
    display: flex;
    gap: 1rem;
}

.calc-field--half {
    flex: 1;
}

.calc-input {
    font-family: "effra", sans-serif;
    font-size: 1rem;
    padding: 0.85rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.65rem;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
    background: #fafafa;
    color: #141313;
}

.calc-input:focus {
    border-color: #247780;
    box-shadow: 0 0 0 4px rgba(36, 119, 128, 0.1);
    background: #fff;
}

.calc-input--large {
    font-size: 1.25rem;
    padding: 1rem 1.2rem;
    font-weight: 600;
}

.calc-input::placeholder {
    color: #bbb;
}

.calc-field__error {
    display: none;
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

/* --------------------------------------------------------------------------
   Choice Cards (Step 2)
   -------------------------------------------------------------------------- */

.calc-choice-cards {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin: 2rem 0;
}

.calc-choice-card {
    flex: 1;
    max-width: 200px;
    background: #fff;
    border: 3px solid #e0e0e0;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
    -webkit-appearance: none;
    font-family: "effra", sans-serif;
}

.calc-choice-card:hover {
    border-color: #247780;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(36, 119, 128, 0.12);
}

.calc-choice-card.is-selected {
    border-color: #247780;
    background: rgba(36, 119, 128, 0.04);
    box-shadow: 0 0 0 4px rgba(36, 119, 128, 0.12);
}

.calc-choice-card__icon {
    width: 56px;
    height: 56px;
}

.calc-choice-card__label {
    font-weight: 700;
    font-size: 1.15rem;
    color: #141313;
}

/* --------------------------------------------------------------------------
   Info Panel
   -------------------------------------------------------------------------- */

.calc-info-panel {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(36, 119, 128, 0.06);
    border: 1px solid rgba(36, 119, 128, 0.15);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1rem;
}

.calc-info-panel--compact {
    padding: 1rem;
    margin-top: 1rem;
    background: rgba(74, 149, 115, 0.06);
    border-color: rgba(74, 149, 115, 0.15);
}

.calc-info-panel__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.calc-info-panel__text {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #333;
}

.calc-info-panel--compact .calc-info-panel__text {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Pills (Toggle Options)
   -------------------------------------------------------------------------- */

.calc-pills {
    display: flex;
    gap: 0.5rem;
    background: #f0f0f0;
    border-radius: 0.65rem;
    padding: 4px;
    margin-bottom: 1.5rem;
}

.calc-pill {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    font-family: "effra", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.calc-pill.is-active {
    background: #fff;
    color: #247780;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.calc-pill-content {
    display: none;
}

.calc-pill-content.is-active {
    display: block;
}

/* --------------------------------------------------------------------------
   Preview / Hint
   -------------------------------------------------------------------------- */

.calc-preview {
    background: rgba(74, 149, 115, 0.08);
    border: 1px solid rgba(74, 149, 115, 0.2);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.95rem;
    color: #4a9573;
    font-weight: 600;
}

.calc-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: #888;
}

/* --------------------------------------------------------------------------
   Toggle Cards (Step 4)
   -------------------------------------------------------------------------- */

.calc-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.calc-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.calc-toggle-card:hover {
    border-color: #d0d0d0;
}

.calc-toggle-card--large {
    padding: 1.25rem 1.5rem;
    border-color: #247780;
    background: rgba(36, 119, 128, 0.02);
}

.calc-toggle-card__content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
}

.calc-toggle-card__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.calc-toggle-card__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #141313;
    margin: 0 0 0.15rem;
}

.calc-toggle-card__desc {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
    line-height: 1.4;
}

/* Toggle Switch */
.calc-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
    margin-left: 1rem;
}

.calc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.calc-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d0d0d0;
    border-radius: 28px;
    transition: background-color 0.3s ease;
}

.calc-switch__slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.calc-switch input:checked + .calc-switch__slider {
    background: #247780;
}

.calc-switch input:checked + .calc-switch__slider::before {
    transform: translateX(24px);
}

/* --------------------------------------------------------------------------
   House Type Cards (Step 5)
   -------------------------------------------------------------------------- */

.calc-house-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.calc-house-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.85rem 0.5rem;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    font-family: "effra", sans-serif;
    -webkit-appearance: none;
}

.calc-house-card:hover {
    border-color: #247780;
    transform: translateY(-2px);
}

.calc-house-card.is-selected {
    border-color: #247780;
    background: rgba(36, 119, 128, 0.04);
    box-shadow: 0 0 0 3px rgba(36, 119, 128, 0.12);
}

.calc-house-card__icon {
    width: 40px;
    height: 40px;
}

.calc-house-card__label {
    font-weight: 600;
    font-size: 0.75rem;
    color: #333;
    text-align: center;
}

.calc-house-card__kwh {
    font-size: 0.7rem;
    color: #888;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.calc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 0 0.25rem;
}

.calc-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    font-family: "effra", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.calc-nav__back:hover {
    color: #247780;
    background: rgba(36, 119, 128, 0.06);
}

.calc-btn--next {
    margin-left: auto;
    font-size: 1rem;
    padding: 0.75rem 2.5rem 0.75rem 1.5rem;
}

.calc-btn--submit {
    width: 100%;
    text-align: center;
    padding: 0.9rem 1.5rem;
    font-size: 1.05rem;
    margin-top: 0.5rem;
    background-image: none;
}

/* --------------------------------------------------------------------------
   Result Page
   -------------------------------------------------------------------------- */

.calc-result-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}

.calc-result-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(36, 119, 128, 0.08);
    border-radius: 50%;
    margin-bottom: 1rem;
}

@keyframes batteryFill {
    0%   { opacity: 0; transform: scaleY(0); }
    100% { opacity: 1; transform: scaleY(1); }
}

.calc-battery-bar {
    transform-origin: bottom;
    animation: batteryFill 0.6s ease forwards;
}

.calc-battery-bar.bar-1 { animation-delay: 0.3s; opacity: 0; }
.calc-battery-bar.bar-2 { animation-delay: 0.5s; opacity: 0; }
.calc-battery-bar.bar-3 { animation-delay: 0.7s; opacity: 0; }

.calc-result-hero__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.calc-result-hero__number {
    font-family: "effra", sans-serif;
    font-weight: 700;
    font-size: 3.5rem;
    color: #247780;
    line-height: 1;
}

.calc-result-hero__unit {
    font-weight: 600;
    font-size: 1.25rem;
    color: #666;
}

.calc-result-hero__sub {
    color: #888;
    font-size: 0.9rem;
    margin: 0;
}

/* Result Grid */
.calc-result-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.calc-result-card {
    background: #fff;
    border-radius: 0.85rem;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.calc-result-card--profit {
    background: linear-gradient(135deg, rgba(74, 149, 115, 0.06), rgba(36, 119, 128, 0.06));
    border: 2px solid rgba(74, 149, 115, 0.2);
}

.calc-result-card__title {
    font-family: "effra", sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #247780;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.calc-result-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.calc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
    color: #555;
}

.calc-result-row:last-child {
    border-bottom: none;
}

.calc-result-row--total {
    font-weight: 700;
    color: #141313;
    border-bottom-color: #e0e0e0;
}

.calc-result-row__value {
    font-weight: 600;
    color: #141313;
    white-space: nowrap;
}

.calc-result-row__value--profit {
    color: #4a9573;
    font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   Contact Form (Result page)
   -------------------------------------------------------------------------- */

.calc-contact {
    background: #fff;
    border-radius: 0.85rem;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.calc-contact__heading {
    font-family: "effra", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #141313;
    margin: 0 0 1.25rem;
    line-height: 1.4;
}

.calc-contact__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.calc-contact__success {
    text-align: center;
    padding: 2rem 1rem;
}

.calc-contact__success h3 {
    font-weight: 700;
    color: #4a9573;
    margin: 0.75rem 0 0.35rem;
}

.calc-contact__success p {
    color: #666;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Calculator Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .calculator-page {
        padding: 1rem 0 2.5rem;
    }

    .calc-progress {
        margin-bottom: 1.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .calc-progress__circle {
        width: 32px;
        height: 32px;
    }

    .calc-progress__number {
        font-size: 0.75rem;
    }

    .calc-progress__label {
        font-size: 0.6rem;
    }

    .calc-progress__line {
        min-width: 12px;
        margin-top: 14.5px;
    }

    .calc-card {
        padding: 1.5rem 1.25rem;
        border-radius: 0.75rem;
    }

    .calc-heading {
        font-size: 1.2rem;
    }

    .calc-field-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .calc-choice-cards {
        gap: 0.75rem;
    }

    .calc-choice-card {
        padding: 1.25rem 1rem;
    }

    .calc-choice-card__icon {
        width: 44px;
        height: 44px;
    }

    .calc-house-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .calc-result-hero__number {
        font-size: 2.5rem;
    }

    .calc-result-card {
        padding: 1.25rem;
    }

    .calc-contact {
        padding: 1.25rem;
    }

    .calc-btn--next {
        padding: 0.65rem 2rem 0.65rem 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   Header tweaks: black nav text on all pages (instead of white default).
   Non-home pages get top padding on the main content so the transparent
   absolute header doesn't overlap the page content.
   -------------------------------------------------------------------------- */

header nav ul li a {
    color: #141313;
}

body:not(.home) main.website-content {
    padding-top: 160px;
}