/* ---------- hero ---------- */
.hero{
    padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
}

.hero__grid{
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
}

.hero__title{
    font-size: clamp(2.25rem, 3.9vw, 3.75rem);
    margin: 1rem 0 1.5rem;
    text-wrap: balance;
}

.hero__title .line{
    display: block;
    overflow: hidden;
    padding-bottom: .08em;
}
.hero__title .line > span{ display: block; }

.hero__lead{
    max-width: 34rem;
    font-size: 1.1875rem;
    color: var(--ink-soft);
    margin: 0 0 1.5rem;
}

.hero__checks{ margin-bottom: 2rem; }

.hero__actions{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* foto met een schuin kleurblok erachter, staand zodat de hele ketel zichtbaar is */
.hero__visual{
    position: relative;
    justify-self: center;
    width: min(100%, calc((100svh - 13rem) * .75 + 1.75rem));
    min-width: 17rem;
    padding: 0 1.75rem 1.75rem 0;
}

.hero__offset{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 80%;
    height: 80%;
    border-radius: 16px;
    background: var(--accent);
}

.hero__media{
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px;
    background: var(--paper-2);
}

.hero__parallax{
    position: absolute;
    inset: 0;
}

.hero__parallax img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 860px){
    .hero__grid{ grid-template-columns: 1fr; }
}

/* ---------- feiten ---------- */
.facts{
    background: var(--paper-2);
    padding-block: clamp(2rem, 4vw, 3rem);
}

.facts__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.fact{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.fact__icon{
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--accent);
}
.fact__icon svg{
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fact__title{
    display: block;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
    color: var(--ink);
}
.fact__text{ display: block; margin-top: .15rem; color: var(--muted); }

@media (max-width: 860px){
    .facts__grid{ grid-template-columns: 1fr; }
}

/* ---------- merken ---------- */
.brands{ padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.brands__row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem clamp(2rem, 6vw, 5rem);
}
.brands__label{
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.brands img{ height: 2.25rem; width: auto; }

/* ---------- diensten ---------- */
.services{
    padding-block: clamp(4rem, 9vw, 8rem);
}

.section-head{
    max-width: 44rem;
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    text-align: center;
}
.section-head__title{
    font-size: clamp(2.25rem, 4.4vw, 3.75rem);
    margin: 1rem 0 1.25rem;
}
.section-head__note{ margin: 0; color: var(--muted); }

.services__list{
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 9vw, 8rem);
}

.service{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
}
.service:nth-child(even) .service__visual{ order: 2; }

.service__visual{ position: relative; padding: 0 1.5rem 1.5rem 0; }
.service:nth-child(even) .service__visual{ padding: 0 0 1.5rem 1.5rem; }

.service__offset{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 78%;
    height: 78%;
    border-radius: 14px;
    background: var(--accent);
}
.service:nth-child(even) .service__offset{ right: auto; left: 0; }

.service__media{
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
}
.service__media img{
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 116%;
    object-fit: cover;
}

.service__name{
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: .5rem 0 1rem;
}
.service__text{ margin: 0 0 1.5rem; max-width: 34rem; color: var(--ink-soft); }

.services__more{ text-align: center; margin: clamp(3rem, 6vw, 4.5rem) 0 0; }

.link-arrow{
    font-weight: 600;
    border-bottom: 1.5px solid var(--accent);
    padding-bottom: .15rem;
    transition: color .2s;
}
.link-arrow:hover{ color: var(--accent-deep); }

@media (max-width: 860px){
    .service{ grid-template-columns: 1fr; }
    .service:nth-child(even) .service__visual{ order: 0; }
}

/* ---------- over ons ---------- */
.about{
    background: var(--brand);
    color: #fff;
    padding-block: clamp(4.5rem, 10vw, 9rem);
}

.about__eyebrow{ color: #fff; margin: 0 0 2rem; opacity: .85; }

.about__statement{
    font-size: clamp(1.75rem, 4.2vw, 3.5rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    max-width: 22em;
    margin: 0;
}

/* ---------- offerte ---------- */
.quote{
    padding-block: clamp(4rem, 8vw, 7rem);
    background: var(--accent);
    color: var(--ink);
}

.quote__grid{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.quote__price{
    font-size: clamp(5rem, 14vw, 11rem);
    color: var(--ink);
    line-height: .9;
    margin: 0;
}

.quote__title{
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 .75rem;
}

.quote__grid p{ margin: 0; max-width: 34rem; color: var(--ink); }
.quote__grid .quote__price{ color: var(--ink); max-width: none; }

@media (max-width: 760px){
    .quote__grid{ grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- afsluiter ---------- */
.cta{
    padding-block: clamp(4rem, 9vw, 8rem);
    background: var(--ink);
    color: #fff;
}

.cta__inner{
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 2.5rem;
}

.cta__title{
    font-size: clamp(2.75rem, 7vw, 6rem);
    margin: 0;
}
.cta__title em{ color: var(--accent); box-shadow: none; }
.cta .btn--solid:hover{ background: #fff; border-color: #fff; color: var(--ink); }

.cta__actions{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* ---------- telefoon ---------- */
@media (max-width: 560px){
    .hero{ padding-block: 1.75rem 2.5rem; }
    .hero__title{ margin: .75rem 0 1.1rem; }
    .hero__lead{ font-size: 1.0625rem; margin-bottom: 1.25rem; }
    .hero__checks{ margin-bottom: 1.5rem; }
    .hero__visual{ width: 100%; padding: 0 1rem 1rem 0; }

    .brands__row{ gap: 1rem 2rem; }
    .brands img{ height: 1.75rem; }


    .section-head{ margin-bottom: 2.25rem; }
    .services{ padding-block: 3rem; }
    .services__list{ gap: 3rem; }
    .service{ gap: 1.5rem; }
    .service__visual,
    .service:nth-child(even) .service__visual{ padding: 0 1rem 1rem 0; }
    .service:nth-child(even) .service__offset{ right: 0; left: auto; }

    .about{ padding-block: 3.5rem; }
    .quote{ padding-block: 3rem; }
    .cta{ padding-block: 3rem; }
    .cta__inner{ gap: 1.75rem; }
    .cta__actions{ width: 100%; flex-direction: column; }
}

.service__more{ display: inline-block; margin-top: 1.25rem; }