/**
 * Renisol Badkamer - Exact Renisol.be CSS
 * 
 * Exacte waarden van renisol.be:
 * - Orange: #ffa617
 * - Blue: #193b54
 * - Grey: #eee
 * - Container padding: 2.5rem (40px) links/rechts
 * - Container max-width: 100rem (1600px)
 */

/* ── Font ────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Owners Narrow';
    src: url('../fonts/Owners-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Owners Narrow';
    src: url('../fonts/Owners-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:wght@400;500;600;700;800&display=swap');

/* ── Custom Cursor (exact renisol.be) ───────────────────────── */
/* Standaard cursor blijft zichtbaar - bolletje is extra overlay */
@media (hover: none), (max-width: 991px) {
    .renisol-cursor-wrapper { display: none !important; }
}
html {
    scroll-behavior: smooth;
}
.renisol-cursor-wrapper {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}
.renisol-cursor-dot {
    position: absolute;
    top: 0; left: 0;
    width: 1.5rem;      /* iets kleiner dan cursor */
    height: 1.5rem;
    border: 1.5px solid #ffa617;
    border-radius: 50%;
    background: #ffa617; /* Gevuld in normale staat */
    opacity: 0;
    /* Grootte/dikte animeren snel, positie traag voor smooth lag */
    transition: opacity .3s ease,
                width .3s ease,
                height .3s ease,
                border-width .3s ease;
    /* transform wordt via JS gezet, geen CSS transition hier */
    will-change: transform;
    /* Iets hoger dan de puntcursor: -50% + kleine offset */
    margin-top: -8px;
}
@media (hover: hover) {
    body:hover .renisol-cursor-dot { opacity: 0.85; }
}

/* ── CSS Variabelen (exact renisol.be) ───────────────────────── */
:root {
    --blue:   #193b54;
    --orange: #ffa617;
    --grey:   #eee;
    --white:  #ffffff;
    --black:  #1e1e1e;
    --h:      'Owners Narrow', sans-serif;
    --b:      'Funnel Sans', sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────── */
.renisol-blocks * { box-sizing: border-box; }
.renisol-blocks { font-family: var(--b); color: var(--blue); }
.renisol-blocks h1,.renisol-blocks h2,.renisol-blocks h3 { font-family: var(--h); font-weight: 500; margin: 0; }
.renisol-blocks p { margin: 0 0 16px; }
.renisol-blocks p:last-child { margin: 0; }
.renisol-blocks a { text-decoration: none; cursor: pointer; }
.renisol-blocks button { cursor: pointer; }

/* Container: max-width 1500px, padding 2.5rem */
.renisol-container {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* ── BUTTON - exact Figma specs ─────────────────────────────── */
/* Figma: h=54px, pad T:5 R:11 B:5 L:18, gap:16, fs:18px fw:500 */
.renisol-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 5px 11px 5px 18px;
    font-family: var(--b);
    font-size: 18px;
    font-weight: 500;
    line-height: 22.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    overflow: hidden;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .renisol-button {
        font-size: 16px;
    }
}
/* Specifieke padding voor de secondary (blauwe) button */
.renisol-button.renisol-button--secondary {
    padding-top: 16px;    /* Verhoog dit getal voor meer hoogte boven */
    padding-bottom: 16px; /* Verhoog dit getal voor meer hoogte onder */
    padding-right: 20px;
}
.renisol-button:hover,
.renisol-button:focus,
.renisol-button:visited { text-decoration: none; }

/* Gele button: bg oranje, tekst blauw, blauwe pijl */
.renisol-button--primary            { background: var(--orange); color: var(--blue); }
.renisol-button--primary:hover,
.renisol-button--primary:focus,
.renisol-button--primary:visited    { background: var(--orange); color: var(--blue); }

/* Blauwe button: bg blauw, tekst wit, witte pijl */
.renisol-button--secondary          { background: var(--blue); color: var(--white); }
.renisol-button--secondary:hover,
.renisol-button--secondary:focus,
.renisol-button--secondary:visited  { background: var(--blue); color: var(--white); }

/* Outline button: transparant, blauwe border 2px, tekst blauw, blauwe pijl */
.renisol-button--outline            { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.renisol-button--outline:hover,
.renisol-button--outline:focus      { background: transparent; color: var(--blue); }

/* Arrow wrapper: ruimte voor 26×26 SVG */
.button-arrows-wrap {
    width: 44px;
    height: 44px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Beide pijlen gecentreerd */
.btn-arrow {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Eerste pijl: start gecentreerd → schuift schuin rechts-boven uit */
.btn-arrow-first {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.renisol-button:hover .btn-arrow-first {
    transform: translate(65%, -115%);
}

/* Tweede pijl: start schuin links-onder → schuift naar centrum */
.btn-arrow-second {
    top: 50%; left: 50%;
    transform: translate(-165%, 65%);
}
.renisol-button:hover .btn-arrow-second {
    transform: translate(-50%, -50%);
}

/* Verberg oude button-arrow klasse */
.renisol-button .button-arrow { display: none; }
/* ==========================================================================
   SECONDARY BUTTON (Blauw met witte pijl en animatie)
   ========================================================================== */

/* 1. Kleuren van de button zelf */
.renisol-button--secondary { 
    background-color: #093c56; /* Jouw donkerblauw */
    color: #ffffff; 
}

.renisol-button--secondary:hover,
.renisol-button--secondary:focus { 
    background-color: #062b3d; /* Iets donkerder blauw op hover */
    color: #ffffff; 
}

/* 2. Forceer de SVG pijl naar wit (!important negeert de inline blauwe kleur) */
.renisol-button--secondary .btn-arrow svg path {
    stroke: #ffffff !important;
}

/* 3. Zorg dat de wrapper van de pijlen klaarstaat voor animatie */
.renisol-button--secondary .button-arrows-wrap {
    width: 26px; 
    height: 26px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 0.5rem; /* Ruimte tussen tekst en pijl */
}

/* 4. De basispositie en soepele transitie van de pijlen */
.renisol-button--secondary .btn-arrow {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 5. Eerste pijl (zichtbaar): schuift schuin rechts-boven uit */
.renisol-button--secondary .btn-arrow-first {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.renisol-button--secondary:hover .btn-arrow-first {
    transform: translate(65%, -115%);
}

/* 6. Tweede pijl (onzichtbaar): start links-onder en schuift naar het midden */
.renisol-button--secondary .btn-arrow-second {
    top: 50%; left: 50%;
    transform: translate(-165%, 65%);
}
.renisol-button--secondary:hover .btn-arrow-second {
    transform: translate(-50%, -50%);
}
/* ── HERO ────────────────────────────────────────────────────── */
.renisol-hero { background: var(--white); }

.hero-top {
    padding: 6rem 0 1.5rem;
}
.hero-title {
    font-family: var(--h);
    font-size: clamp(3rem, 7vw, 4.625rem); /* 90px op 1440px */
    font-weight: 500; /* Medium */
    line-height: 1;
    color: var(--orange);
    margin-bottom: 1.5rem;
}
.hero-subtitle {
    font-family: var(--b);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--blue);
    margin-bottom: 2rem;
}
.hero-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 50px;
}

/* 1. Zorg dat de oranje knop NOOIT wordt afgesneden of gekrompen */
.hero-actions .renisol-button {
    flex-shrink: 0; /* Cruciaal: dit stopt het afsnijden */
    white-space: nowrap; /* Zorgt dat de tekst op 1 lijn blijft */
}

/* 2. Zorg dat de Trustindex widget rechts blijft en niet de hele breedte opeist */
.hero-actions .ti-widget {
    flex-shrink: 1; /* De widget mag wel krimpen als het moet */
    margin: 0 !important;
    display: flex;
    justify-content: flex-end;
    min-width: 0; /* Voorkomt dat flexbox denkt dat de widget oneindig breed is */
}

/* 3. Optioneel: verberg de widget op heel kleine schermen als hij de knop nog steeds hindert */
@media (max-width: 1110px) {
    .hero-actions {
        flex-wrap: wrap; /* Op tablets mag het weer onder elkaar */
        justify-content: flex-start;
    }
    
    .hero-actions .ti-widget {
        justify-content: flex-start;
        width: 100%;
    }
}
.ti-widget[data-layout-id='106'][data-set-id='trustindex-style'] .ti-header {
    padding: 0 !important;
}
.hero-google-rating {
    height: 37px;
    width: auto;
    display: block;
}
.hero-image-full {
    width: 100%;
    line-height: 0;
}
.hero-image-full img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 560px;
    object-fit: cover;
}

/* ── USPs ────────────────────────────────────────────────────── */
/* 3 aparte grijze blokken, witte achtergrond, gap 22px, marge 35px */
.renisol-usps { background: var(--white); }
.usps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding: 0 2.5rem;
    max-width: 1500px;
    margin: 0 auto;
}
.usp-item {
    background: var(--grey);
    padding: 4rem 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 357px;
}
.usp-title {
    font-family: var(--h);
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--orange);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.38;
    margin-bottom: 1.25rem;
}
.usp-description {
    font-family: var(--b);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--blue);
    text-align: center;
    line-height: 1.25;
    max-width: 340px;
}

/* ── ABOUT ───────────────────────────────────────────────────── */
.renisol-about { background: var(--white); padding: 5rem 0; }
/* Figma exacte maten op 1440px canvas:
   Links padding: 53px | Tekst: 588px | Gap: 168px | Foto: 474px | Rechts: 157px
   Grid: tekst / foto, met extra rechter padding via container padding
*/
.renisol-about .renisol-container {
    /* Meer rechter padding zodat foto niet te breed loopt */
    padding-right: calc(2.5rem + 9.8%); /* 2.5rem + ~157/1440 */
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 0.65fr;
    gap: 10.5rem; /* ~168px op 1440px canvas */
    align-items: center;
}
.about-title {
    font-family: var(--h);
    font-size: 3rem; /* gevraagd */
    line-height: 1.1;
    color: var(--blue);
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .about-title, .gallery-title, .gallery-subtitle, .team-title, .contact-title {
        font-size: 2rem !important;
    }
}
.about-description {
    font-family: var(--b);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--black);
    margin-bottom: 2.5rem;
}
.about-description p { margin-bottom: 1rem; }
/* Figma: 474×582px → aspect ratio 474/582 */
.about-image {
    width: 100%;
    aspect-ratio: 474 / 582;
    overflow: hidden;
}
.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── GALLERY ─────────────────────────────────────────────────── */
.renisol-gallery { background: var(--white); padding: 5rem 0; }

/* Header: titel + outline knop naast elkaar */
.gallery-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.gallery-title {
    font-family: var(--h);
    font-size: 3rem;
    line-height: 1.05;
    color: var(--blue);
    max-width: 32rem; /* Figma: 2 lijnen */
    margin: 0;
}

/* Outline button extra stijl */
.renisol-button--outline {
    flex-shrink: 0;
}
/* Verberg oude button-arrow klasse */
.renisol-button .button-arrow { display: none; }
.renisol-button--outline .btn-arrow-first svg path,
.renisol-button--outline .btn-arrow-second svg path {
    stroke: var(--blue);
}

/* 2x2 grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Elk item */
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.gallery-item:hover img {
    transform: scale(1.03);
}

/* Tag badge (links boven) - Figma: y=2361/3054, h=62px */
.gallery-tag {
    position: absolute;
    top: 0; left: 0;
    padding: 0 16px;
    height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}
.gallery-tag--orange { background: var(--orange); }
.gallery-tag--blue   { background: var(--blue); }

.gallery-tag-label {
    font-family: var(--b);
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
    line-height: 1;
    margin-bottom: 2px;
}
.gallery-tag--blue .gallery-tag-label { color: var(--white); }

.gallery-tag-name {
    font-family: var(--h);
    font-size: 28px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    color: var(--black);
}
.gallery-tag--blue .gallery-tag-name { color: var(--white); }

/* Oranje blokje rechts onder - iets groter dan Figma */
.gallery-arrow-btn {
    position: absolute;
    bottom: 0; right: 0;
    width: 62px;
    height: 62px;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.gallery-arrow-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Hover balk: zit NAAST het pijlblokje (right: 62px), groeit naar links */
.gallery-hover-bar {
    position: absolute;
    bottom: 0;
    right: 62px; /* Direct naast het pijlblokje */
    width: 0;
    height: 62px;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Tekst rechts uitgelijnd → verschijnt meteen */
    overflow: hidden;
    z-index: 2;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.gallery-hover-bar span {
    font-family: var(--b);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--black);
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 0.2s ease 0.15s;
    padding: 0 20px;
}
.gallery-hover-bar svg { display: none; }

.gallery-item:hover .gallery-hover-bar {
    width: 200px; /* Enkel de tekst, pijl staat al naast */
}
.gallery-item:hover .gallery-hover-bar span {
    opacity: 1;
}
.gallery-item:hover .gallery-arrow-btn {
    z-index: 4;
}

/* Gallery footer: gecentreerd, subtitle + tekst + button */
.gallery-footer {
    text-align: center;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
/* Figma: "Zo kan jouw badkamer er ook uitzien." - 40px, Owners Narrow */
.gallery-subtitle {
    font-family: var(--h);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--blue);
    text-align: center;
    margin: 0;
}
/* Figma: "Elke badkamer starten we opnieuw..." - 20px, Funnel Sans */
.gallery-text {
    font-family: var(--b);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--blue);
    text-align: center;
    max-width: 600px;
    line-height: 1.4;
    margin: 0;
}

/* ── PROCESS SECTIE ─────────────────────────────────────────────────── */
.renisol-process {
    background: var(--blue);
    padding: 0;
    position: relative;
    padding-bottom: 3rem; /* Iets minder ruimte op mobiel, wordt groter op desktop */
}

/* Header in container */
.process-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 3rem 0 2rem; /* Mobiele padding */
    max-width: 1500px;
    margin: 0 auto;
    flex-direction: column; /* Op mobiel onder elkaar */
}

.process-title {
    font-family: var(--h);
    font-size: 2rem; /* Kleiner op mobiel */
    line-height: 1.2;
    color: var(--white);
    margin: 0;
    white-space: normal; /* Normal voor mobiel zodat het netjes afbreekt */
    max-width: 100%;
}

.process-slider {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab; /* <-- Aangepast: toont het open handje als je over de slider zweeft */
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Dynamische padding links, lijnt uit met je container */
    padding-left: max(1.5rem, calc((100vw - 1500px) / 2 + 1.5rem)); 
    padding-right: 1.5rem; /* Beetje ademruimte rechts op het einde */
    padding-bottom: 3rem; 
}

.process-slider::-webkit-scrollbar { display: none; }

/* Tijdens het slepen wordt de cursor een gesloten handje (grabbing) */
.process-slider.is-dragging { cursor: grabbing; }
.process-slider.is-dragging * { cursor: grabbing; }

/* Track: flex, max-content zorgt dat hij exact de breedte van alle stappen neemt! */
.process-track {
    display: flex;
    gap: 0;
    width: max-content; /* Past zich aan het aantal stappen en schermbreedte aan */
    padding-bottom: 0;
    overflow: visible;
    position: relative; 
}
.process-track br { display: none; }

/* Horizontale oranje lijn op de track */
.process-track::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; 
    height: 1px;
    background: var(--orange);
    pointer-events: none;
    z-index: 1;
}

/* Elke stap */
.process-step {
    width: 80vw; /* Mobiel: neemt 80% van het scherm */
    max-width: 320px; 
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
}

.process-step-content {
    flex: 1;
    padding-bottom: 1.5rem;
}

.step-number {
    font-family: var(--h);
    font-size: 1.5rem; /* Kleiner op mobiel */
    font-weight: 500;
    color: var(--orange);
    display: block;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.step-title {
    font-family: var(--h);
    font-size: 1.25rem; /* Kleiner op mobiel */
    line-height: 1.2;
    color: var(--orange);
    text-transform: uppercase;
    margin: 0 0 1rem;
    white-space: pre-line;
    min-height: auto; 
}

.step-description {
    font-family: var(--b);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--white);
    margin: 0;
    max-width: 100%;
}

.step-timeline-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-top: 1.5rem;
    margin-top: auto; 
}

.step-vline {
    width: 1px;
    height: 27px;
    background: var(--orange);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    align-self: flex-end; 
}

/* ── MEDIA QUERIES (TABLET & DESKTOP) ───────────────────────── */

/* Vanaf Tablet (bijv 768px) */
@media (min-width: 768px) {
    .process-header {
        flex-direction: row; /* Terug naast elkaar */
        align-items: center;
    }
    .process-title {
        font-size: 2.5rem;
    }
    .process-step {
        width: 360px; /* Vaste breedte tablet */
        max-width: none;
    }
    .process-slider {
        padding-left: max(2.5rem, calc((100vw - 1500px) / 2 + 2.5rem)); 
        padding-right: 0; 
    }
}

/* Vanaf Desktop (zoals je Figma design) */
@media (min-width: 1024px) {
    .renisol-process {
        padding-bottom: 5rem; 
    }
    .process-header {
        padding: 5rem 0 3rem; 
    }
    .process-title {
        font-size: 3.125rem;
        white-space: pre-line;
        max-width: 36rem;
    }
    .process-step {
        width: 459px; /* Terug naar je originele Figma breedte */
    }
    .step-number {
        font-size: 1.875rem;
        line-height: 63px;
        margin-bottom: 0;
    }
    .step-title {
        font-size: 1.875rem;
        margin: 0 0 1.25rem;
        min-height: 4.125rem; 
    }
    .step-timeline-row {
        padding-top: 2.5rem; 
    }
}

/* ── JOUW CUSTOM CURSOR ───────────────────────── */
@media (hover: none), (max-width: 991px) {
    .renisol-cursor-wrapper { display: none !important; }
}

.renisol-cursor-wrapper {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.renisol-cursor-dot {
    position: absolute;
    top: 0; left: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1.5px solid #ffa617;
    border-radius: 50%;
    background: #ffa617;
    opacity: 0;
    transition: opacity .3s ease, width .3s ease, height .3s ease, border-width .3s ease, background-color .3s ease, border-color .3s ease;
    will-change: transform;
    margin-top: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    body:hover .renisol-cursor-dot { opacity: 0.85; }
}

.renisol-cursor-dot::after {
    content: '';
    width: 0%;
    height: 0%;
    /* ▼▼▼ PLAK HIERONDER JOUW AFBEELDINGS-URL UIT WORDPRESS ▼▼▼ */
    background-image: url('https://renisol.boostustaging.be/wp-content/uploads/2026/05/arrow-slider.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: width .3s ease, height .3s ease;
}

.renisol-cursor-wrapper.is-hovering-slider .renisol-cursor-dot {
    width: 80px;
    height: 80px;
    background: transparent;
    border-width: 2px;
    border-color: white;
}

.renisol-cursor-wrapper.is-hovering-slider .renisol-cursor-dot::after {
    width: 60%;
    height: 60%;
}
/* ── TEAM ────────────────────────────────────────────────────── */
.renisol-team { background: var(--white); padding: 5rem 0; }
.team-title {
    font-family: var(--h);
    font-size: 4.375rem;
    line-height: 0.92;
    color: var(--blue);
    margin-bottom: 1.5rem;
    white-space: pre-line;
}
.team-intro {
    font-family: var(--b);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--black);
    max-width: 600px;
    margin-bottom: 3rem;
}
.team-intro strong { font-weight: 700; }
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.team-member { position: relative; cursor: pointer; }
.member-photo {
    width: 100%;
    aspect-ratio: 433/648;
    overflow: hidden;
    position: relative;
}
.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.team-member:hover .member-photo img {
    transform: scale(1.03);
}
.member-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(25, 59, 84, 0.7);
    padding: 1rem 1.25rem 1.25rem;
}
.member-name {
    font-family: var(--h);
    font-size: 2rem;
    color: var(--orange);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 4px;
}
.member-role {
    font-family: var(--b);
    font-size: 0.95rem !important;
    font-weight: 500;
    color: var(--orange);
    margin: 0;
}

/* ── CONTACT ─────────────────────────────────────────────────── */
.renisol-contact { background: var(--white); }
.contact-hero {
    height: 432px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
}
.contact-hero .renisol-container {
    width: 100%;
    padding-bottom: 2.5rem;
    display: flex;
    justify-content: flex-end;
}
.contact-info-section {
    background: var(--grey);
    padding: 5rem 0;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
.contact-title {
    font-family: var(--h);
    font-size: 3.75rem;
    line-height: 1.05;
    color: var(--blue);
    margin-bottom: 2.5rem;
    white-space: pre-line;
}
.showroom-title {
    font-family: var(--h);
    font-size: 1.875rem;
    color: var(--blue);
    margin-bottom: 1.25rem;
    line-height: 1;
}
.contact-hours, .contact-address {
    font-family: var(--b);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--black);
    line-height: 1.8;
    margin-bottom: 1rem;
}
.contact-link {
    font-family: var(--b);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--black);
    text-decoration: underline;
    display: block;
    margin-bottom: 4px;
    cursor: pointer;
}
.contact-link:hover { color: var(--blue); }

/* ── FOOTER - FULL WIDTH ─────────────────────────────────────── */
/* Exact renisol.be: full width oranje, padding-global */
.renisol-footer {
    background: var(--orange);
    padding: 4rem 0 3rem;
    width: 100%;
}
/* Footer container heeft GEEN max-width beperking op de achtergrond */
.renisol-footer .renisol-container {
    max-width: 100rem;
}
.footer-logo-text {
    font-family: var(--h);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 2rem;
}
.footer-tagline {
    font-family: var(--h);
    font-size: 1.875rem;
    line-height: 1.2;
    color: var(--blue);
    margin-bottom: 1.5rem;
    white-space: pre-line;
}
.footer-description {
    font-family: var(--b);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--blue);
    max-width: 530px;
    line-height: 1.4;
    margin-bottom: 2rem;
}
.footer-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-top: 4rem;
    padding-top: 2rem;
    align-items: start;
}
.footer-nav { display: flex; flex-direction: column; gap: 0; }
.footer-nav a {
    font-family: var(--b);
    font-size: 1.125rem;
    color: var(--blue);
    text-decoration: none;
    text-transform: uppercase;
    line-height: 2.4;
    cursor: pointer;
}
.footer-nav a:hover { text-decoration: underline; }
.footer-social { display: flex; gap: 1.25rem; margin-top: 0.75rem; }
.footer-social a { color: var(--blue); cursor: pointer; transition: opacity 0.25s; }
.footer-social a:hover { opacity: 0.7; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .hero-title { font-size: 4.375rem; }
    .process-steps { grid-template-columns: repeat(2, 1fr); }
    .process-steps::before { display: none; }
}

@media (max-width: 1024px) {
    .hero-title { font-size: 3.5rem; }
    .usps-grid { grid-template-columns: 1fr; }
    .usp-item { min-height: auto; }
    .about-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-bottom { grid-template-columns: repeat(2, 1fr); }
    .renisol-container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.4rem; }
    .hero-top { padding: 4rem 0 2rem; }
    .hero-image-full img { max-height: 300px; }
    .gallery-track { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr; }
    .footer-bottom { grid-template-columns: 1fr; }
    .usps-grid { padding: 0 1.25rem; }
    .about-grid {
        gap: 3.5rem;
    }
    .renisol-about .renisol-container {
        padding: 0 1.25rem;
    }
    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
    .gallery-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.25rem;
    }
}