.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1350px;
}
body {font-family: 'Inter';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Inter';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.hv-header-block {
 margin-bottom:3px;
}
.hv-footer-block {
 width:200%;
}
.hv-hero-block {
}
.hv-trust-block {
}
.hv-why-block {
}
.hv-steps-block {
}
.hv-hero {
}
.hv-trust {
}
.hv-why {
}
.hv-steps {
}
.hv-pricing-block {
}
.hv-reviews-block {
}
.hv-help-block {
}
/* ==========================================================
   HalloVPN – Basis variabelen
   Plakken in Oxygen: Manage > Stylesheets
   Volgorde: 1. main  2. hv-variabelen  3. hv-componenten

   LET OP: main zet html op font-size 62.5%,
   dus 1rem = 10px. Alle maten hieronder gaan daarvan uit.
   (1.8rem = 18px, 2.4rem = 24px, enz.)
   ========================================================== */

:root {

  /* ---------- KLEUREN: merk ---------- */
  --hv-primary:          #1768DF;  /* hoofdkleur, knoppen, links */
  --hv-primary-hover:    #1256BD;  /* knop bij hover */
  --hv-primary-active:   #0E469B;  /* knop ingedrukt */
  --hv-primary-light:    #E8F1FD;  /* lichte vlakken, badges */
  --hv-primary-lighter:  #F4F8FE;  /* sectie-achtergronden */
  --hv-primary-dark:     #0F2A5C;  /* footer, donkere secties */

  /* ---------- KLEUREN: tekst ---------- */
  --hv-text:             #16213A;
  --hv-text-soft:        #45506A;
  --hv-text-on-dark:     #FFFFFF;
  --hv-text-on-dark-soft:#C9D6EE;

  /* ---------- KLEUREN: achtergrond & lijnen ---------- */
  --hv-bg:               #FFFFFF;
  --hv-bg-soft:          #F6F8FB;
  --hv-border:           #DCE3EE;
  --hv-border-strong:    #B8C4D6;

  /* ---------- KLEUREN: status ---------- */
  --hv-success:          #1E9E5A;
  --hv-success-light:    #E6F6ED;
  --hv-warning:          #B86E00;
  --hv-warning-light:    #FFF4E0;
  --hv-error:            #C7362F;
  --hv-error-light:      #FCEBEA;
  --hv-star:             #F5B400;

  /* ---------- LETTERTYPE ---------- */
  --hv-font:             "Figtree", "Segoe UI", Roboto, Arial, sans-serif;

  --hv-weight-normal:    400;
  --hv-weight-medium:    500;
  --hv-weight-semibold:  600;
  --hv-weight-bold:      700;
  --hv-weight-black:     800;

  /* ---------- TEKSTGROOTTES (1rem = 10px) ---------- */
  --hv-text-sm:    1.6rem;                                    /* 16px – minimum */
  --hv-text-base:  1.8rem;                                    /* 18px – standaard */
  --hv-text-lg:    clamp(1.9rem, 1.76rem + 0.4vw, 2.2rem);    /* 19–22px */
  --hv-h4:         clamp(2.1rem, 1.92rem + 0.5vw, 2.4rem);    /* 21–24px */
  --hv-h3:         clamp(2.4rem, 2.08rem + 0.9vw, 3rem);      /* 24–30px */
  --hv-h2:         clamp(3rem, 2.4rem + 1.6vw, 4.4rem);       /* 30–44px */
  --hv-h1:         clamp(3.6rem, 2.56rem + 2.8vw, 6.4rem);    /* 36–64px */

  --hv-leading-snug:   1.35;  /* kleine koppen, knoppen */
  --hv-leading-normal: 1.65;  /* lopende tekst */
  /* koppen: line-height en letter-spacing komen uit main */

  /* ---------- RUIMTE ---------- */
  --hv-space-1:   0.4rem;   /*  4px */
  --hv-space-2:   0.8rem;   /*  8px */
  --hv-space-3:   1.2rem;   /* 12px */
  --hv-space-4:   1.6rem;   /* 16px */
  --hv-space-5:   2.4rem;   /* 24px */
  --hv-space-6:   3.2rem;   /* 32px */
  --hv-space-7:   4.8rem;   /* 48px */
  --hv-space-8:   6.4rem;   /* 64px */
  --hv-space-9:   9.6rem;   /* 96px */

  --hv-section-y:  clamp(5.6rem, 3.2rem + 6vw, 11.2rem);   /* 56–112px */
  --hv-section-x:  clamp(2rem, 0.8rem + 3vw, 4rem);        /* 20–40px */

  /* ---------- LAYOUT ---------- */
  /* Gelijk aan Oxygen > Global Styles > Width & Breakpoints:
     Page Width 1350 | Tablet 992 | Landscape 768 | Portrait 480
     Media queries kunnen geen variabelen gebruiken, dus gebruik in CSS:
       Tablet:    @media (max-width: 991px)
       Landscape: @media (max-width: 767px)
       Portrait:  @media (max-width: 479px)                          */
  --hv-container:        1350px;
  --hv-container-narrow: 800px;
  --hv-text-width:       65ch;
  --hv-gap:              clamp(2rem, 1.28rem + 2vw, 3.2rem);

  /* ---------- AFRONDING ---------- */
  --hv-radius-sm:   8px;
  --hv-radius:      12px;   /* icoonvlakken, kleine blokken */
  --hv-radius-btn:  6px;    /* alle knoppen – hier aanpassen */
  --hv-radius-lg:   20px;   /* kaarten */
  --hv-radius-xl:   28px;   /* grote afbeeldingen */
  --hv-radius-full: 999px;

  /* ---------- KNOPPEN & INVOERVELDEN ---------- */
  --hv-btn-height:     56px;
  --hv-btn-height-sm:  48px;   /* nooit kleiner dan dit */
  --hv-btn-padding-x:  2.8rem;
  --hv-btn-font-size:  1.8rem;
  --hv-input-height:   56px;
  --hv-border-width:   2px;

  /* ---------- FOCUS (alleen zichtbaar bij toetsenbordgebruik) ---------- */
  --hv-focus-outline: 3px solid var(--hv-primary);
  --hv-focus-offset:  3px;

  /* ---------- ICONEN ---------- */
  --hv-icon-sm:  20px;
  --hv-icon:     28px;
  --hv-icon-lg:  48px;

  /* ---------- ANIMATIE ---------- */
  --hv-ease:       ease;
  --hv-speed-fast: 150ms;
  --hv-speed:      250ms;

  /* ---------- LAAGVOLGORDE ---------- */
  --hv-z-header:   100;
  --hv-z-dropdown: 200;
  --hv-z-modal:    1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hv-speed-fast: 0ms;
    --hv-speed:      0ms;
  }
}/* ==========================================================
   HalloVPN – Basisonderdelen
   Volgorde stylesheets: 1. main  2. hv-variabelen  3. hv-componenten

   AANPASSEN:
   - Elk onderdeel heeft bovenaan eigen instellingen (bijv. --btn-bg).
   - Elk onderdeel staat in een eigen blok: los te vervangen.
   - Alles is één class diep, dus instellingen die je in Oxygen
     op een element zet (ID) winnen altijd.
   - Geen schaduwen en geen hover-vlakken: bewust vlak en rustig.
   ========================================================== */


/* ----------------------------------------------------------
   1. BASIS – vult main aan (box-sizing, marges en
      letter-spacing van koppen komen uit main)
   ---------------------------------------------------------- */
body {
  font-family: var(--hv-font);
  font-size: var(--hv-text-base);   /* nodig door html 62.5% */
  line-height: var(--hv-leading-normal);
  color: var(--hv-text);
  background: var(--hv-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--hv-font);
  font-weight: var(--hv-weight-black);
  color: inherit;
  margin-top: 0;
}
h1 { font-size: var(--hv-h1); }
h2 { font-size: var(--hv-h2); }
h3 { font-size: var(--hv-h3); }
h4 { font-size: var(--hv-h4); }

a { color: var(--hv-primary); }
a:hover { color: var(--hv-primary-hover); }

:focus-visible {
  outline: var(--hv-focus-outline);
  outline-offset: var(--hv-focus-offset);
}

.hv-lead      { font-size: var(--hv-text-lg); color: var(--hv-text-soft); }
.hv-text-soft { color: var(--hv-text-soft); }
.hv-text-sm   { font-size: var(--hv-text-sm); }
.hv-center    { text-align: center; margin-inline: auto; }
.hv-measure   { max-width: var(--hv-text-width); }


/* ----------------------------------------------------------
   2. SECTIES & CONTAINER
   hv-section  +  hv-section--soft / hv-section--dark
   ---------------------------------------------------------- */
.hv-section {
  --section-bg: var(--hv-bg);
  --section-color: var(--hv-text);
  --section-py: var(--hv-section-y);

  background: var(--section-bg);
  color: var(--section-color);
  padding: var(--section-py) var(--hv-section-x);
}
.hv-section--soft { --section-bg: var(--hv-primary-lighter); }
.hv-section--dark {
  --section-bg: var(--hv-primary-dark);
  --section-color: var(--hv-text-on-dark);
}
.hv-section--dark .hv-text-soft,
.hv-section--dark .hv-lead { color: var(--hv-text-on-dark-soft); }

.hv-container {
  width: 100%;
  max-width: var(--hv-container);
  margin-inline: auto;
}
.hv-container--narrow { max-width: var(--hv-container-narrow); }


/* ----------------------------------------------------------
   3. KNOPPEN – standaard blauw, vlak, geen schaduw
   hv-btn  +  hv-btn--outline / hv-btn--light
   Maten:     hv-btn--sm / hv-btn--full
   ---------------------------------------------------------- */
.hv-btn {
  --btn-bg: var(--hv-primary);
  --btn-bg-hover: var(--hv-primary-hover);
  --btn-color: var(--hv-text-on-dark);
  --btn-color-hover: var(--hv-text-on-dark);
  --btn-border: var(--btn-bg);
  --btn-height: var(--hv-btn-height);
  --btn-px: var(--hv-btn-padding-x);
  --btn-radius: var(--hv-radius-btn);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hv-space-2);
  min-height: var(--btn-height);
  padding: 0 var(--btn-px);
  font-family: var(--hv-font);
  font-size: var(--hv-btn-font-size);
  font-weight: var(--hv-weight-bold);
  line-height: var(--hv-leading-snug);
  text-align: center;
  text-decoration: none;
  color: var(--btn-color);
  background: var(--btn-bg);
  border: var(--hv-border-width) solid var(--btn-border);
  border-radius: var(--btn-radius);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--hv-speed-fast) var(--hv-ease),
              border-color var(--hv-speed-fast) var(--hv-ease);
}
.hv-btn:hover,
.hv-btn:focus-visible {
  color: var(--btn-color-hover);
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  text-decoration: none;
}
.hv-btn:active {
  background: var(--hv-primary-active);
  border-color: var(--hv-primary-active);
}

/* Blauwe rand, witte binnenkant */
.hv-btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: var(--hv-primary);
  --btn-color: var(--hv-primary);
  --btn-border: var(--hv-primary);
}

/* Wit, voor op een donkere achtergrond */
.hv-btn--light {
  --btn-bg: var(--hv-bg);
  --btn-bg-hover: var(--hv-primary-light);
  --btn-color: var(--hv-primary-dark);
  --btn-color-hover: var(--hv-primary-dark);
}

.hv-btn--sm   { --btn-height: var(--hv-btn-height-sm); --btn-px: 2rem; }
.hv-btn--full { width: 100%; }


/* ----------------------------------------------------------
   4. KAARTEN – vlak, met rand
   hv-card  +  hv-card--soft / hv-card--highlight
   ---------------------------------------------------------- */
.hv-card {
  --card-bg: var(--hv-bg);
  --card-border: var(--hv-border);
  --card-border-width: 1px;
  --card-radius: var(--hv-radius-lg);
  --card-padding: clamp(2.4rem, 1.6rem + 1.5vw, 3.6rem);

  position: relative;
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}
.hv-card--soft {
  --card-bg: var(--hv-primary-lighter);
  --card-border: transparent;
}
.hv-card--highlight {
  --card-border: var(--hv-primary);
  --card-border-width: var(--hv-border-width);
}


/* ----------------------------------------------------------
   5. BADGES
   hv-badge  +  hv-badge--success / hv-badge--solid
   ---------------------------------------------------------- */
.hv-badge {
  --badge-bg: var(--hv-primary-light);
  --badge-color: var(--hv-primary-active);

  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-2);
  padding: var(--hv-space-1) var(--hv-space-3);
  font-size: var(--hv-text-sm);
  font-weight: var(--hv-weight-semibold);
  line-height: var(--hv-leading-snug);
  color: var(--badge-color);
  background: var(--badge-bg);
  border-radius: var(--hv-radius-full);
}
.hv-badge--success {
  --badge-bg: var(--hv-success-light);
  --badge-color: #14693C;
}
.hv-badge--solid {
  --badge-bg: var(--hv-primary);
  --badge-color: var(--hv-text-on-dark);
}


/* ----------------------------------------------------------
   6. VINKJESLIJST
   <ul class="hv-checklist"><li>Tekst</li></ul>
   ---------------------------------------------------------- */
.hv-checklist {
  --check-color: var(--hv-success);
  --check-bg: var(--hv-success-light);
  --check-size: 26px;

  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hv-space-3);
}
.hv-checklist li {
  position: relative;
  padding-left: calc(var(--check-size) + var(--hv-space-3));
  line-height: var(--hv-leading-snug);
}
.hv-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.05em;
  width: var(--check-size);
  height: var(--check-size);
  border-radius: var(--hv-radius-full);
  background: var(--check-bg);
}
.hv-checklist li::after {
  content: "";
  position: absolute;
  left: calc(var(--check-size) * 0.36);
  top: calc(var(--check-size) * 0.18);
  width: calc(var(--check-size) * 0.26);
  height: calc(var(--check-size) * 0.46);
  border: solid var(--check-color);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}


/* ----------------------------------------------------------
   7. ICOON-VLAK
   ---------------------------------------------------------- */
.hv-icon {
  --icon-box: 56px;
  --icon-bg: var(--hv-primary-light);
  --icon-color: var(--hv-primary);

  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: var(--hv-radius);
  background: var(--icon-bg);
  color: var(--icon-color);
}
.hv-icon svg {
  width: var(--hv-icon);
  height: var(--hv-icon);
}


/* ----------------------------------------------------------
   8. STERREN
   ---------------------------------------------------------- */
.hv-stars {
  color: var(--hv-star);
  font-size: 2rem;
  letter-spacing: 2px;
  line-height: 1;
}


/* ----------------------------------------------------------
   9. GRID
   hv-grid  +  hv-grid--2 / --3 / --4
   ---------------------------------------------------------- */
.hv-grid {
  --grid-min: 260px;
  display: grid;
  gap: var(--hv-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
}
.hv-grid--2 { --grid-min: 400px; }
.hv-grid--3 { --grid-min: 300px; }
.hv-grid--4 { --grid-min: 220px; }html {
    width:100%;
    font-size: 62.5%;
    box-sizing: border-box;
}

*,*:before,*:after {
    box-sizing: inherit;
}

* {
    text-wrap: pretty;
}

body {
    width:100%;
    overflow-x: hidden;
    letter-spacing:.015em;
}

body.fixed {
    overflow: hidden;
}

main {
    position: relative;
    width: 100%;
    overflow-x:clip;
}

h1,h2,h3,h4,h5,h6 {  
    text-wrap: balance;
    letter-spacing: -.035em;
/*   text-transform: uppercase; */
  line-height: 1.1;
}
h1>span,h2>span,h3>span,h4>span,h5>span,h6>span {
    text-wrap: balance;
    letter-spacing: -.035em;
/*   text-transform: uppercase; */
  line-height: 1.1;
  
}

p {
    margin: 0 0 1.2em;
}

picture {
    display: flex;
    width: 100%;
    height: 100%;
}

.ct-inner-content figure {
    margin: 0;
}

p>a,span>a,span>p>a {
    font-weight: 600;
    text-decoration: underline;
}

a{
/*   font-weight: 900; */
}

.oxy-rich-text a{
  color:color(6);
}

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





/* ==========================================================
   HalloVPN – Header
   Plakken in: Code Block > tab "CSS"
   Vlak ontwerp: geen schaduwen, geen hover-vlakken.
   ========================================================== */

.hv-header-block {
  --header-height: 84px;
  --header-bg: var(--hv-bg);
  --header-link: var(--hv-text);
  --header-link-hover: var(--hv-primary);

  position: sticky;
  top: calc(var(--hv-topbar-h, 0px) * -1);
  z-index: var(--hv-z-header);
  width: 100%;
}
.admin-bar .hv-header-block {
  top: calc(32px - var(--hv-topbar-h, 0px));
}

/* ---------- Skiplink ---------- */
.hv-skip {
  position: absolute;
  left: -9999px;
  top: var(--hv-space-3);
  z-index: var(--hv-z-modal);
  padding: var(--hv-space-3) var(--hv-space-5);
  background: var(--hv-primary);
  color: var(--hv-text-on-dark);
  font-weight: var(--hv-weight-bold);
  border-radius: var(--hv-radius);
}
.hv-skip:focus { left: var(--hv-space-3); color: var(--hv-text-on-dark); }

/* ---------- Bovenbalk ---------- */
.hv-topbar {
  --bar-bg: #111111;
  --bar-text: #BFC3CC;
  --bar-strong: #FFFFFF;
  --bar-danger: #FF5A4F;            /* "Onbeschermd" */
  --bar-safe: #3DD68C;              /* "Beschermd" */
  --bar-btn: #5B9BFF;               /* lichter blauw, leesbaar op zwart */

  background: var(--bar-bg);
  color: var(--bar-text);
  font-size: var(--hv-text-sm);
  line-height: var(--hv-leading-snug);
}
.hv-topbar[hidden] { display: none; }

.hv-topbar__inner {
  max-width: var(--hv-container);
  margin-inline: auto;
  padding: var(--hv-space-2) var(--hv-section-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hv-space-2) var(--hv-space-5);
  text-align: center;
}
.hv-topbar__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}
.hv-topbar__item[hidden] { display: none; }

/* Puntje tussen de onderdelen */
.hv-topbar__item + .hv-topbar__item:not([hidden])::before {
  content: "·";
  margin: 0 var(--hv-space-3);
  color: var(--bar-text);
}
.hv-topbar__text strong {
  color: var(--bar-strong);
  font-weight: var(--hv-weight-medium);
}
.hv-topbar .hv-topbar__status {
  color: var(--bar-danger);
  font-weight: var(--hv-weight-bold);
}
.hv-topbar.is-safe .hv-topbar__status { color: var(--bar-safe); }

.hv-topbar__btn,
.hv-topbar__btn:hover {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--hv-space-4);
  color: var(--bar-btn);
  font-weight: var(--hv-weight-medium);
  text-decoration: none;
  border: 1.5px solid var(--bar-btn);
  border-radius: var(--hv-radius-btn);
}
.hv-topbar__btn:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* Klant is al beschermd: knop verbergen */
.hv-topbar.is-safe .hv-topbar__btn { display: none; }

/* Telefoon: ISP weglaten zodat het op één regel past */
@media (max-width: 767px) {
  .hv-topbar__item--isp { display: none !important; }
  .hv-topbar__inner { gap: var(--hv-space-2) var(--hv-space-3); }
}

/* ---------- Header ---------- */
.hv-header {
  position: relative;
  z-index: var(--hv-z-header);
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--hv-speed) var(--hv-ease);
}
.hv-header.is-scrolled { border-color: var(--hv-border); }

.hv-header__inner {
  max-width: var(--hv-container);
  min-height: var(--header-height);
  margin-inline: auto;
  padding: 0 var(--hv-section-x);
  padding: 0 20px;
  
  display: flex;
  align-items: center;
  gap: var(--hv-space-5);
}

.hv-header__logo { display: flex; flex-shrink: 0; }
.hv-header__logo img {
  display: block;
  height: 38px;
  width: auto;
}

/* ---------- Hoofdmenu ---------- */
.hv-nav { margin-inline: auto; }

.hv-nav__list {
  display: flex;
  align-items: center;
  gap: var(--hv-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hv-nav__list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--header-link);
  font-size: var(--hv-text-base);
  font-weight: var(--hv-weight-semibold);
  text-decoration: none;
  transition: color var(--hv-speed-fast) var(--hv-ease);
}
.hv-nav__list a:hover { color: var(--header-link-hover); }

/* Huidige pagina */
.hv-nav__list .current-menu-item > a,
.hv-nav__list .current_page_item > a { color: var(--hv-primary); }
.hv-nav__list .current-menu-item > a::after,
.hv-nav__list .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: currentColor;
}

/* ---------- Acties rechts ---------- */
.hv-header__actions {
  display: flex;
  align-items: center;
  gap: var(--hv-space-5);
  flex-shrink: 0;
}

.hv-header__login {
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-2);
  min-height: 48px;
  color: var(--header-link);
  font-weight: var(--hv-weight-semibold);
  text-decoration: none;
  transition: color var(--hv-speed-fast) var(--hv-ease);
}
.hv-header__login:hover { color: var(--header-link-hover); }

/* ---------- Menuknop: alleen het icoon ---------- */
.hv-menu-toggle {
  --toggle-color: var(--hv-text);
  --toggle-color-hover: var(--hv-primary);
  --toggle-size: 48px;               /* klikvlak, niet kleiner maken */

  display: none;
  align-items: center;
  justify-content: center;
  width: var(--toggle-size);
  height: var(--toggle-size);
  margin-right: -12px;               /* icoon lijnt uit met de rand */
  padding: 0;
  color: var(--toggle-color);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color var(--hv-speed-fast) var(--hv-ease);
}
.hv-menu-toggle:hover,
.hv-menu-toggle:focus-visible {
  color: var(--toggle-color-hover);
}
.hv-menu-toggle:focus,
.hv-menu-toggle:active {
  background: none;               /* geen vlak bij aantikken */
}
.hv-menu-toggle { -webkit-tap-highlight-color: transparent; }

/* Tekst "Menu"/"Sluiten" blijft bestaan voor schermlezers, maar is onzichtbaar */
.hv-menu-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hv-menu-toggle__icon {
  position: relative;
  width: 26px;
  height: 18px;
}
.hv-menu-toggle__icon::before,
.hv-menu-toggle__icon::after,
.hv-menu-toggle__icon span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--hv-speed) var(--hv-ease),
              opacity var(--hv-speed-fast) var(--hv-ease);
}
.hv-menu-toggle__icon::before { top: 0; }
.hv-menu-toggle__icon span    { top: 7.75px; }
.hv-menu-toggle__icon::after  { bottom: 0; }

.hv-menu-toggle[aria-expanded="true"] .hv-menu-toggle__icon::before { transform: translateY(7.75px) rotate(45deg); }
.hv-menu-toggle[aria-expanded="true"] .hv-menu-toggle__icon span    { opacity: 0; }
.hv-menu-toggle[aria-expanded="true"] .hv-menu-toggle__icon::after  { transform: translateY(-7.75px) rotate(-45deg); }

/* ---------- Mobiel menu ---------- */
.hv-mobile {
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  padding: var(--hv-space-3) var(--hv-section-x) var(--hv-space-6);
  background: var(--hv-bg);
  border-top: 1px solid var(--hv-border);
  border-bottom: 1px solid var(--hv-border);
}
.hv-mobile[hidden] { display: none; }

.hv-mobile__list {
  margin: 0 0 var(--hv-space-5);
  padding: 0;
  list-style: none;
}
.hv-mobile__list li + li { border-top: 1px solid var(--hv-border); }
.hv-mobile__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  color: var(--hv-text);
  font-size: var(--hv-text-lg);
  font-weight: var(--hv-weight-semibold);
  text-decoration: none;
}
.hv-mobile__list a::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.hv-mobile__list a:hover,
.hv-mobile__list .current-menu-item > a { color: var(--hv-primary); }

.hv-mobile__login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hv-space-2);
  min-height: 56px;
  color: var(--hv-primary);
  font-weight: var(--hv-weight-bold);
  text-decoration: none;
}

.hv-mobile__help {
  display: flex;
  align-items: center;
  gap: var(--hv-space-4);
  margin-top: var(--hv-space-4);
  padding: var(--hv-space-4);
  color: var(--hv-text);
  text-decoration: none;
  background: var(--hv-primary-lighter);
  border-radius: var(--hv-radius-lg);
}
.hv-mobile__help .hv-icon { --icon-bg: var(--hv-bg); }
.hv-mobile__help-label {
  display: block;
  color: var(--hv-text-soft);
  font-size: var(--hv-text-sm);
}
.hv-mobile__help strong {
  font-size: var(--hv-text-lg);
  color: var(--hv-primary);
}

/* ---------- Schermgroottes (gelijk aan Oxygen-breakpoints) ---------- */

/* Kleiner desktopscherm: menu iets compacter */
@media (max-width: 1199px) {
  .hv-nav__list,
  .hv-header__actions { gap: var(--hv-space-4); }
  .hv-header__inner   { gap: var(--hv-space-4); }
}

/* Tablet (Oxygen: 992) en kleiner: menu inklappen */
@media (max-width: 991px) {
  .hv-nav { display: none; }
  .hv-header .hv-mobile.is-open { display: block !important; }
  .hv-header__actions { margin-left: auto; }
  .hv-menu-toggle { display: inline-flex; }
}

/* Desktop: mobiel menu nooit tonen */
@media (min-width: 992px) {
  .hv-mobile { display: none !important; }
}

/* Landscape (Oxygen: 768) en kleiner: alleen logo + menuknop */
@media (max-width: 767px) {
  .hv-header-block { --header-height: 72px; }
  .hv-header__login,
  .hv-header__cta { display: none; }
  .hv-header__logo img { height: 32px; }
}

/* WordPress-adminbalk is op mobiel niet vast */
@media (max-width: 782px) {
  .admin-bar .hv-header-block { top: calc(var(--hv-topbar-h, 0px) * -1); }
}/* ==========================================================
   HalloVPN – Footer
   Plakken in: Code Block > tab "CSS"
   Vlak ontwerp: geen schaduwen, geen hover-vlakken.
   ========================================================== */

.hv-footer-block { width: 100%; }

.hv-footer {
  /* Instellingen */
  --footer-bg: var(--hv-primary-dark);
  --footer-text: var(--hv-text-on-dark-soft);
  --footer-strong: var(--hv-text-on-dark);
  --footer-link: var(--hv-text-on-dark);
  --footer-line: rgba(255, 255, 255, 0.14);
  --footer-pt: clamp(5.6rem, 3.2rem + 5vw, 9.6rem);

  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: var(--hv-text-base);
  line-height: var(--hv-leading-snug);
}

.hv-footer__inner {
  max-width: var(--hv-container);
  margin-inline: auto;
  padding: var(--footer-pt) var(--hv-section-x) 0;
}

/* ---------- Kolommen ---------- */
.hv-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--hv-space-7) var(--hv-space-6);
  padding-bottom: var(--hv-space-8);
}

.hv-footer__brand { max-width: 46ch; }

.hv-footer__logo { display: inline-flex; }
.hv-footer__logo img {
  display: block;
  height: 56px;
  width: auto;
}

.hv-footer .hv-footer__intro {
  margin: var(--hv-space-5) 0 var(--hv-space-5);
  color: var(--footer-strong);
  line-height: var(--hv-leading-normal);
}

/* ---------- Social ---------- */
.hv-footer__social {
  display: flex;
  gap: var(--hv-space-2);
  margin: 0 0 0 -10px;           /* icoon lijnt uit met de tekst */
  padding: 0;
  list-style: none;
}
.hv-footer__social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--footer-link);
  transition: color var(--hv-speed-fast) var(--hv-ease);
}
.hv-footer__social a:hover { color: var(--hv-text-on-dark-soft); }

/* ---------- Koppen ---------- */
.hv-footer .hv-footer__title {
  margin: 0 0 var(--hv-space-4);
  color: var(--footer-strong);
  font-size: var(--hv-h4);
  font-weight: var(--hv-weight-black);
}

/* ---------- Linklijsten ---------- */
.hv-footer__list {
  display: grid;
  gap: var(--hv-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hv-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-2);
  min-height: 40px;
  color: var(--footer-link);
  font-weight: var(--hv-weight-medium);
  text-decoration: none;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.hv-footer__list a:hover,
.hv-footer__legal a:hover {
  color: var(--footer-link);
  text-decoration: underline;
}

/* Huidige pagina */
.hv-footer .current-menu-item > a { text-decoration: underline; }

/* ---------- Contact ---------- */
.hv-footer__contact svg {
  flex-shrink: 0;
  color: var(--footer-text);
}
.hv-footer__hours {
  display: block;
  margin: -4px 0 var(--hv-space-2) 28px;
  font-size: var(--hv-text-sm);
  color: var(--footer-text);
}

.hv-footer__company {
  display: grid;
  gap: var(--hv-space-1);
  margin: var(--hv-space-4) 0 0;
  font-size: var(--hv-text-sm);
}
.hv-footer__company div { display: flex; flex-wrap: wrap; gap: 0 var(--hv-space-2); }
.hv-footer__company dt { color: var(--footer-text); }
.hv-footer__company dt::after { content: ":"; }
.hv-footer__company dd { margin: 0; color: var(--footer-strong); }

/* ---------- Onderbalk ---------- */
.hv-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hv-space-3) var(--hv-space-6);
  padding: var(--hv-space-5) 0;
  border-top: 1px solid var(--footer-line);
  font-size: var(--hv-text-sm);
}
.hv-footer .hv-footer__copy {
  margin: 0;
  color: var(--footer-strong);
}

.hv-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--hv-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hv-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--footer-link);
  text-decoration: none;
  text-underline-offset: 4px;
}

/* ---------- Schermgroottes (Oxygen-breakpoints) ---------- */

/* Tablet: merk bovenaan over de volle breedte, 3 kolommen eronder */
@media (max-width: 991px) {
  .hv-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hv-footer__brand { grid-column: 1 / -1; max-width: 60ch; }
  .hv-footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}

/* Landscape: 2 kolommen, contact over de volle breedte */
@media (max-width: 767px) {
  .hv-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hv-space-6) var(--hv-space-5); }
  .hv-footer__main > .hv-footer__col:last-child { grid-column: 1 / -1; }
  .hv-footer__logo img { height: 44px; }
  .hv-footer__legal { gap: 0 var(--hv-space-4); }
}

/* Portrait: alles onder elkaar, juridische links in 2 kolommen */
@media (max-width: 479px) {
  .hv-footer__main { grid-template-columns: 1fr; }
  .hv-footer__legal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--hv-space-4);
    width: 100%;
  }
}