@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/libre-400-normal.woff2') format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dmsans-400.woff2') format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/dmsans-700.woff2') format('woff2')} @font-face{font-family:'DM Sans Fallback';font-weight:400;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans');ascent-override:94.9%;descent-override:29.66%;line-gap-override:0%;size-adjust:104.53%} @font-face{font-family:'DM Sans Fallback';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');ascent-override:96.58%;descent-override:30.18%;line-gap-override:0%;size-adjust:102.71%} @font-face{font-family:'DM Sans Fallback Android';font-weight:400;src:local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');ascent-override:94.69%;descent-override:29.59%;line-gap-override:0%;size-adjust:104.76%} @font-face{font-family:'DM Sans Fallback Android';font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold');ascent-override:90.98%;descent-override:28.43%;line-gap-override:0%;size-adjust:109.04%} @font-face{font-family:'Libre Baskerville Fallback';src:local('Georgia');ascent-override:83.64%;descent-override:23.28%;line-gap-override:0%;size-adjust:115.97%} @font-face{font-family:'Libre Baskerville Fallback Android';src:local('Noto Serif'),local('NotoSerif-Regular');ascent-override:90.25%;descent-override:25.12%;line-gap-override:0%;size-adjust:107.48%} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#faf9f7;--white:#fff;--warm:#f5f2ed;--warm2:#ebe6dd; --text:#1a1a1a;--text2:#3d3d3d;--muted:#6e6e73;--light:#b0b0b0; --serif:'Libre Baskerville','Libre Baskerville Fallback','Libre Baskerville Fallback Android',Georgia,serif; --sans:'DM Sans','DM Sans Fallback','DM Sans Fallback Android',-apple-system,sans-serif; --ease:cubic-bezier(.25,.46,.45,.94); --ease-out:cubic-bezier(.16,1,.3,1); --border:rgba(0,0,0,.04); --border-light:rgba(250,249,247,.1);--dark:#1a1a1a;--dark-deep:#111;
 --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-pill:980px;
 --shadow-card:0 18px 48px -12px rgba(26,26,26,.08);
 --shadow-float:0 10px 36px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.03);
 --space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--space-5:3rem;--space-6:4rem;--space-7:5rem;--space-8:6rem;--space-9:7.5rem; } html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden} body{font-family:var(--sans);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} .container{max-width:1120px;margin:0 auto;padding:0 clamp(1.5rem,5vw,3rem)} img{display:block} .btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2.2rem;border-radius:980px;text-decoration:none;font-weight:600;font-size:.9rem;transition:all .4s var(--ease);border:none;cursor:pointer} .btn-dark{background:var(--text);color:var(--bg)} .btn-dark:hover{opacity:.8;transform:scale(1.02)} .btn-dark svg{flex-shrink:0} .hero{padding:8rem 0 6rem;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:5.5rem;align-items:center} .hero-tag{display:inline-block;font-size:.67rem;font-weight:600;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.8rem;animation:fadeIn .8s ease forwards;opacity:0} .hero h1{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.14;letter-spacing:-.02em;margin-bottom:1.6rem;animation:fadeUp .8s var(--ease-out) .1s forwards;opacity:0} .hero h1 em{font-style:italic} .hero-sub{font-size:1.05rem;line-height:1.75;color:var(--text2);max-width:460px;margin-bottom:2.5rem;animation:fadeUp .8s var(--ease-out) .2s forwards;opacity:0} .hero-sub strong{font-weight:700;color:var(--text)} .hero-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;animation:fadeUp .8s var(--ease-out) .3s forwards;opacity:0} .hero-visual{position:relative;animation:fadeUp 1s var(--ease-out) .35s forwards;opacity:0} .hero-img{border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:var(--warm)} .hero-img img{width:100%;height:100%;object-fit:cover;transition:transform 6s var(--ease)} .hero-img:hover img{transform:scale(1.03)} .hero-badges{position:absolute;bottom:-1rem;left:-1.5rem;right:-1.5rem;display:flex;justify-content:space-between;pointer-events:none} .h-badge{background:var(--white);border-radius:var(--radius-md);padding:.85rem 1.1rem;box-shadow:var(--shadow-float);pointer-events:auto;transition:transform .4s var(--ease)} .h-badge:hover{transform:translateY(-2px)} .h-badge-big{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--text);line-height:1.1} .h-badge-small{font-size:.66rem;color:var(--muted);margin-top:.12rem} .h-badge-row{display:flex;align-items:center;gap:.45rem} .h-badge-star{font-size:.82rem;color:var(--text)} .h-badge-text strong{display:block;font-size:.85rem;font-weight:700;color:var(--text)} .h-badge-text span{font-size:.66rem;color:var(--muted)} .divider{padding:2rem 0;border-top:1px solid var(--border)} .divider-inner{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap} .div-item{font-size:.76rem;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:.55rem} .div-item::before{content:'';width:4px;height:4px;background:var(--light);border-radius:50%} .sec{padding:7.5rem 0} .sec-warm{background:linear-gradient(180deg,#f5f2ed 0%,#f0ece5 100%)} .sec-dark{background:linear-gradient(180deg,var(--dark) 0%,var(--dark-deep) 100%);color:var(--bg)} .sec-dark .s-sub{color:rgba(250,249,247,.5)} .s-label{display:inline-block;font-size:.64rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:1.3rem} .s-label.light{color:rgba(250,249,247,.35)} h2.s-title{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.18;letter-spacing:-.015em;margin-bottom:.7rem} .s-sub{font-size:.94rem;line-height:1.7;color:var(--muted);max-width:480px} .p-header{max-width:500px;margin-bottom:4rem} .p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .p-card{background:var(--white);border:1px solid rgba(0,0,0,.03);border-radius:16px;padding:2.3rem 1.8rem;transition:all .5s var(--ease)} .p-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px) scale(1.008)} .p-card h3{font-family:var(--serif);font-size:.98rem;font-weight:400;margin-bottom:.6rem;letter-spacing:-.01em} .p-card p{font-size:.875rem;line-height:1.75;color:var(--muted)} .mini-cta{text-align:center;margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--border)} .mini-cta p{font-size:.9rem;color:var(--muted)} .mini-cta a{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--text);padding-bottom:1px;transition:opacity .3s} .mini-cta a:hover{opacity:.6} .m-header{text-align:center;max-width:500px;margin:0 auto 4.5rem} .m-header .s-sub{margin:0 auto} .m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .m-step{padding:2.5rem 2rem;border-right:1px solid var(--border)} .m-step:last-child{border-right:none} .m-num{width:36px;height:36px;background:var(--text);color:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;margin-bottom:1.5rem} .m-step h3{font-size:1rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.005em} .m-step p{font-size:.875rem;line-height:1.75;color:var(--muted)} .inline-cta{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--text);padding-bottom:1px;transition:opacity .3s} .inline-cta:hover{opacity:.6} .quote-sec{padding:6.5rem 0;background:linear-gradient(180deg,var(--dark) 0%,var(--dark-deep) 100%);color:var(--bg);text-align:center} .quote-sec blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.38;max-width:700px;margin:0 auto;letter-spacing:-.01em} .t-header{max-width:380px;margin-bottom:3.5rem} .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .t-card{background:var(--white);border:1px solid rgba(0,0,0,.03);border-radius:16px;padding:2.2rem 1.8rem;transition:all .5s var(--ease)} .t-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px) scale(1.008)} .t-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem} .t-stars{font-size:.78rem;color:var(--text);letter-spacing:2px} .t-google{opacity:.35;flex-shrink:0;transition:opacity .3s} .t-card:hover .t-google{opacity:.65} .t-card blockquote{font-size:.85rem;line-height:1.75;color:var(--text2);margin-bottom:1.3rem;font-style:normal} .t-author{display:flex;align-items:center;gap:.65rem} .t-av{width:32px;height:32px;border-radius:50%;background:var(--warm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.62rem;color:var(--muted)} .t-meta strong{display:block;font-size:.76rem;font-weight:600;letter-spacing:-.005em} .t-meta span{font-size:.66rem;color:var(--muted)} .faq-wrap{max-width:640px;margin:0 auto} .faq-item{border-bottom:1px solid var(--border);padding:2.3rem 0} .faq-item:first-child{padding-top:0} .faq-item:last-child{border-bottom:none;padding-bottom:0} .faq-q{font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--text);margin-bottom:.8rem;letter-spacing:-.01em} .faq-a{font-size:.9rem;line-height:1.8;color:var(--muted)} .a-grid{display:grid;grid-template-columns:.6fr 1.4fr;gap:5rem;align-items:center} .a-img{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--warm2)} .a-img img{width:100%;height:100%;object-fit:cover;transition:transform 6s var(--ease)} .a-img:hover img{transform:scale(1.03)} .about-text p{font-size:.98rem;line-height:1.8;color:var(--text2);margin-bottom:.9rem;max-width:52ch} .a-stats{display:flex;gap:2.8rem;margin-top:2.2rem;padding-top:2.2rem;border-top:1px solid rgba(0,0,0,.05)} .a-stat strong{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--text);letter-spacing:-.02em} .a-stat span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600} .o-header{text-align:center;max-width:520px;margin:0 auto 3.5rem} .o-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .o-card{background:rgba(250,249,247,.04);border:1px solid rgba(250,249,247,.07);border-radius:18px;padding:2.5rem 2rem;display:flex;flex-direction:column;transition:all .5s var(--ease);position:relative} .o-card:hover{border-color:rgba(250,249,247,.18);transform:translateY(-3px) scale(1.008);background:rgba(250,249,247,.07)} .o-card.feat{border-color:rgba(250,249,247,.18);background:rgba(250,249,247,.08)} .o-badge{position:absolute;top:-.5rem;left:1.6rem;background:var(--bg);color:var(--text);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .65rem;border-radius:980px} .o-card h3{font-family:var(--serif);font-size:1.2rem;margin-bottom:.35rem;letter-spacing:-.01em} .o-for{font-size:.66rem;font-weight:600;color:rgba(250,249,247,.3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1.1rem} .o-desc{font-size:.875rem;color:rgba(250,249,247,.45);line-height:1.75;margin-bottom:1.4rem} .o-list{list-style:none;margin-bottom:1.8rem;flex-grow:1} .o-list li{display:flex;align-items:flex-start;gap:.55rem;font-size:.8rem;color:rgba(250,249,247,.55);margin-bottom:.6rem;line-height:1.5} .o-list li::before{content:'✓';font-weight:700;flex-shrink:0;color:rgba(250,249,247,.65)} .o-card .btn-w{width:100%;display:flex;justify-content:center;padding:.85rem;background:var(--bg);color:var(--text);border-radius:980px;text-decoration:none;font-weight:600;font-size:.84rem;transition:all .3s var(--ease)} .o-card .btn-w:hover{opacity:.85} .o-card .btn-o{width:100%;display:flex;justify-content:center;padding:.85rem;border:1px solid rgba(250,249,247,.12);color:var(--bg);border-radius:980px;text-decoration:none;font-weight:600;font-size:.84rem;transition:all .3s var(--ease)} .o-card .btn-o:hover{border-color:rgba(250,249,247,.45)} .cta-sec{padding:7.5rem 0;text-align:center} .cta-sec h2{font-family:var(--serif);font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.18;letter-spacing:-.02em;max-width:540px;margin:0 auto 1.3rem} .cta-sec p{font-size:.94rem;color:var(--muted);max-width:400px;margin:0 auto 2.8rem;line-height:1.7} .cta-alt{display:flex;align-items:center;justify-content:center;gap:0;margin-top:1.1rem;font-size:.82rem;color:var(--muted)} .cta-alt a{color:var(--text);text-decoration:none;font-weight:600;transition:opacity .3s} .cta-alt a:hover{opacity:.6} .cta-alt span{margin:0 .45rem;color:var(--light)} @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @media(min-width:768px){.reveal{opacity:0;transform:translateY(36px);transition:all .9s var(--ease-out)} .reveal.vis{opacity:1;transform:translateY(0)}} @media(min-width:768px){.p-grid .p-card:nth-child(2){transition-delay:.08s} .p-grid .p-card:nth-child(3){transition-delay:.16s} .t-grid .t-card:nth-child(2){transition-delay:.08s} .t-grid .t-card:nth-child(3){transition-delay:.16s} .o-grid .o-card:nth-child(2){transition-delay:.08s} .o-grid .o-card:nth-child(3){transition-delay:.16s}} @media(max-width:1024px){ .hero-grid{gap:4rem} .a-grid{gap:4rem} .m-step{padding:2.2rem 1.6rem} } @media(max-width:900px){ .hero{padding:8rem 0 5rem} .hero-grid{grid-template-columns:1fr;gap:2.5rem} .hero-visual{max-width:340px;margin:0 auto} .hero-badges{left:-.5rem;right:-.5rem} .hero h1{font-size:clamp(1.9rem,6.5vw,2.6rem)} .hero-sub{font-size:.98rem;max-width:100%} .sec{padding:5rem 0} .quote-sec{padding:4.5rem 0} .cta-sec{padding:5rem 0} h2.s-title{font-size:clamp(1.5rem,5vw,2rem)} .p-grid,.t-grid,.o-grid{grid-template-columns:1fr} .p-card,.t-card{padding:2rem 1.6rem;border-radius:14px} .p-header{margin-bottom:3rem} .m-grid{grid-template-columns:1fr} .m-step{border-right:none;border-bottom:1px solid var(--border);padding:1.8rem 0} .m-step:last-child{border-bottom:none} .m-header{text-align:left;margin-bottom:3rem} .m-header .s-sub{margin:0} .t-header{margin-bottom:3rem} .faq-wrap{max-width:100%} .faq-item{padding:1.8rem 0} .a-grid{grid-template-columns:1fr;gap:2.5rem} .a-img{max-width:280px;border-radius:14px} .o-card{padding:2rem 1.6rem;border-radius:14px} .o-header{margin-bottom:3rem} .mini-cta{margin-top:2.2rem;padding-top:1.8rem} } @media(max-width:500px){ .hero{padding:7rem 0 4rem} .hero h1{font-size:clamp(1.65rem,7vw,2.2rem)} .hero-sub{font-size:.92rem} .hero-actions{flex-direction:column;align-items:stretch} .hero-actions .btn{justify-content:center} .hero-actions .hero-proof{justify-content:center} .hero-badges{position:relative;bottom:auto;left:auto;right:auto;margin-top:1.5rem;gap:.8rem} .hero-visual{max-width:100%} .h-badge{padding:.75rem .9rem} .h-badge-big{font-size:1.1rem} .a-img{max-width:100%} .a-stats{flex-direction:column;gap:1rem} .about-text p{font-size:.9rem} .divider-inner{flex-direction:column;gap:.7rem;align-items:center} .quote-sec blockquote{font-size:clamp(1.15rem,4.5vw,1.5rem);padding:0 .5rem} .cta-sec h2{font-size:clamp(1.4rem,5.5vw,1.8rem)} .cta-sec p{font-size:.88rem} .sec{padding:4rem 0} .quote-sec{padding:3.5rem 0} .cta-sec{padding:4rem 0} } .btn-cta-big{font-size:1rem;padding:1.1rem 2.3rem} .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem} .service-card{background:var(--white);border:1px solid rgba(0,0,0,.03);border-radius:16px;padding:2.5rem 2rem;transition:all .5s var(--ease);text-decoration:none;color:var(--text);display:flex;flex-direction:column} .service-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px) scale(1.008)} .service-card h3{font-family:var(--serif);font-size:1.15rem;margin-bottom:.5rem;letter-spacing:-.01em} .service-card p{font-size:.86rem;line-height:1.75;color:var(--muted);margin-bottom:1.2rem;flex-grow:1} .service-card .card-link{font-size:.84rem;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:.4rem} .service-card .card-link svg{transition:transform .3s} .service-card:hover .card-link svg{transform:translateX(3px)} .img-banner{width:100%;border-radius:16px;overflow:hidden;margin:3rem 0} .img-banner img{width:100%;height:280px;object-fit:cover;transition:transform 6s var(--ease)} .img-banner:hover img{transform:scale(1.03)} .form-field{position:relative} .form-field:focus-within label{color:rgba(250,249,247,.7)} .form-field input:hover,.form-field textarea:hover{border-color:rgba(250,249,247,.15)} .form-submit:active{transform:translateY(0) scale(.98)} @media(max-width:900px){.services-grid{grid-template-columns:1fr}.img-banner img{height:200px}} .contact-sec{padding:8rem 0 7.5rem} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center} .contact-content h1{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:1rem} .contact-content>p{font-size:1rem;color:var(--muted);line-height:1.75;margin-bottom:2.5rem;max-width:420px} .contact-links{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:2.5rem} .contact-link{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;transition:opacity .3s} .contact-link:hover{opacity:.6} .contact-link svg{flex-shrink:0;color:var(--muted)} .contact-meta{display:flex;gap:2rem;padding-top:1.8rem;border-top:1px solid var(--border)} .contact-meta span{font-size:.78rem;color:var(--light)} .contact-photo{border-radius:18px;overflow:hidden} .contact-photo img{width:100%;height:auto;display:block} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:3rem}.contact-photo{max-width:340px;margin:0 auto}} .form-grid-3{grid-template-columns:1fr 1fr 1fr} @media(max-width:900px){.form-grid-3{grid-template-columns:1fr}} .form-sec{padding:0} .form-outer{position:relative;padding:7.5rem 0;background:linear-gradient(180deg,var(--dark) 0%,var(--dark-deep) 100%);overflow:hidden} .form-outer::before{content:'';position:absolute;top:-200px;right:-200px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(250,249,247,.06) 0%,transparent 70%);pointer-events:none} .form-outer::after{content:'';position:absolute;bottom:-150px;left:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(250,249,247,.04) 0%,transparent 70%);pointer-events:none} .form-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5.5rem);align-items:center;max-width:1120px;margin:0 auto;padding:0 clamp(1.5rem,5vw,3rem)} .form-text h2{font-family:var(--serif);font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.15;letter-spacing:-.02em;color:var(--bg);margin-bottom:1rem} .form-text p{font-size:.95rem;color:rgba(250,249,247,.5);line-height:1.75;margin-bottom:1.5rem;max-width:400px} .form-text-contact{display:flex;flex-direction:column;gap:.6rem} .form-text-contact a{display:flex;align-items:center;gap:.6rem;font-size:.88rem;font-weight:600;color:rgba(250,249,247,.7);text-decoration:none;transition:color .3s} .form-text-contact a:hover{color:var(--bg)} .form-text-contact a svg{color:rgba(250,249,247,.4);flex-shrink:0} .form-card{background:rgba(250,249,247,.05);border:1px solid rgba(250,249,247,.08);border-radius:20px;padding:clamp(2rem,4vw,2.8rem);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem} .form-grid.full{grid-template-columns:1fr} .form-grid-3{grid-template-columns:1fr 1fr 1fr;gap:.8rem;margin-bottom:.8rem} .form-field label{display:block;font-size:.64rem;font-weight:600;color:rgba(250,249,247,.35);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem;transition:color .3s} .form-field:focus-within label{color:rgba(250,249,247,.8)} .form-field input,.form-field textarea{width:100%;background:rgba(250,249,247,.04);border:1.5px solid rgba(250,249,247,.07);border-radius:12px;padding:.85rem 1rem;color:var(--bg);font-family:var(--sans);font-size:.88rem;transition:all .35s var(--ease);outline:none} .form-field input:hover,.form-field textarea:hover{border-color:rgba(250,249,247,.18);background:rgba(250,249,247,.06)} .form-field input:focus,.form-field textarea:focus{border-color:rgba(250,249,247,.4);background:rgba(250,249,247,.08);box-shadow:0 0 0 4px rgba(250,249,247,.04),0 4px 16px rgba(0,0,0,.2)} .form-field input::placeholder,.form-field textarea::placeholder{color:rgba(250,249,247,.18)} .form-field textarea{resize:vertical;min-height:100px} .form-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--bg);color:var(--text);padding:1.05rem 2rem;border-radius:var(--radius-lg);font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:all .4s var(--ease);margin-top:.4rem;position:relative} .form-submit:hover:not(:disabled){background:#fff;box-shadow:0 8px 30px rgba(250,249,247,.15);transform:translateY(-2px)} .form-submit:active:not(:disabled){transform:translateY(0)} .form-submit:disabled{opacity:.2;cursor:not-allowed;transform:none} .form-submit .spinner{display:none;width:18px;height:18px;border:2px solid rgba(26,26,26,.15);border-top-color:var(--text);border-radius:50%;animation:spin .6s linear infinite} .form-submit.loading .spinner{display:block} .form-submit.loading .btn-text{opacity:0} @keyframes spin{to{transform:rotate(360deg)}} .form-success{display:none;text-align:center;padding:2.5rem 1rem} .form-success .check{width:56px;height:56px;border-radius:50%;background:rgba(250,249,247,.08);display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;animation:popIn .5s var(--ease-out)} .form-success .check svg{color:var(--bg)} .form-success h3{font-family:var(--serif);font-size:1.5rem;color:var(--bg);margin-bottom:.5rem;animation:fadeUp .6s var(--ease-out) .15s both} .form-success p{font-size:.88rem;color:rgba(250,249,247,.45);line-height:1.7;animation:fadeUp .6s var(--ease-out) .25s both} @keyframes popIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}} @media(max-width:900px){.form-inner{grid-template-columns:1fr;gap:2rem}.form-grid,.form-grid-3{grid-template-columns:1fr}.form-card{padding:1.8rem 1.5rem}.form-outer{padding:5rem 0}} footer{padding:4rem 0 2.5rem;border-top:1px solid var(--border)} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem} .f-brand{display:flex;align-items:flex-start;gap:1rem} .f-brand img{height:30px;width:auto;flex-shrink:0} .f-brand-text p{font-size:.82rem;color:var(--muted);line-height:1.65;max-width:260px;margin:0} .f-label{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--light);margin:0 0 .8rem} .f-col a{display:block;font-size:.82rem;color:var(--muted);text-decoration:none;line-height:2;transition:color .3s} .f-col a:hover{color:var(--text)} .f-col span{display:block;font-size:.82rem;color:var(--light);line-height:2} .f-bottom{display:flex;justify-content:space-between;padding-top:1.8rem;border-top:1px solid var(--border);font-size:.68rem;color:var(--light)} @media(max-width:768px){.f-grid{grid-template-columns:1fr;gap:2rem}} .blog-hero{padding:8rem 0 4rem} .blog-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:1rem} .blog-hero-sub{font-size:1rem;color:var(--muted);line-height:1.75;max-width:520px} .blog-grid-sec{padding:0 0 5rem} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .blog-card{background:var(--white);border:1px solid rgba(0,0,0,.03);border-radius:16px;padding:2rem 1.8rem;text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:all .5s var(--ease)} .blog-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px) scale(1.008)} .blog-card-meta{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.8rem} .blog-card h2{font-family:var(--serif);font-size:1.1rem;line-height:1.35;letter-spacing:-.01em;margin-bottom:.7rem} .blog-card p{font-size:.85rem;line-height:1.7;color:var(--muted);flex-grow:1;margin-bottom:1rem;max-width:55ch} .blog-card-link{font-size:.82rem;font-weight:600;color:var(--text)} @media(max-width:900px){.blog-grid{grid-template-columns:1fr}} .blog-article{padding:9rem 0 5rem} .blog-article .container{max-width:660px} .blog-article-header{margin-bottom:3.5rem;text-align:center} .blog-back{font-size:.76rem;color:var(--light);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;margin-bottom:2.5rem;transition:color .3s;letter-spacing:.03em;text-transform:uppercase;font-weight:600} .blog-back:hover{color:var(--text)} .blog-article-meta{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:600;margin-bottom:1.4rem} .blog-article h1{font-family:var(--serif);font-size:clamp(2rem,4.2vw,2.8rem);line-height:1.18;letter-spacing:-.025em} .blog-article-intro-author{display:flex;align-items:center;gap:.8rem;justify-content:center;margin-top:2rem} .blog-article-intro-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center 20%} .blog-article-intro-name{font-size:.78rem;color:var(--muted);line-height:1.4} .blog-article-intro-name strong{color:var(--text);display:block;font-family:var(--sans);font-weight:600} .blog-article-divider{width:40px;height:1.5px;background:var(--text);margin:3rem auto;opacity:.12} .blog-article-body{font-family:var(--serif)} .blog-article-body h2{font-family:var(--serif);font-size:1.35rem;line-height:1.35;margin:3.5rem 0 1.2rem;letter-spacing:-.015em;color:var(--text)} .blog-article-body p{font-family:var(--serif);font-size:1.02rem;line-height:2.05;color:var(--text2);margin-bottom:1.5rem;letter-spacing:.008em} .blog-article-body p strong{color:var(--text);font-weight:700} .blog-intro{font-size:1.12rem;line-height:2.05;color:var(--text);margin-bottom:2rem} .blog-pullquote{font-family:var(--serif);font-size:1.35rem;line-height:1.55;font-style:italic;color:var(--text);padding:2.2rem 2rem;margin:2.5rem -2rem;border-left:3px solid var(--text);text-align:left;letter-spacing:-.01em;background:var(--warm);border-radius:0 14px 14px 0} .blog-mid-cta{background:var(--text);border-radius:16px;padding:2.2rem 2.5rem;margin:3rem 0;display:flex;align-items:center;gap:2rem} .blog-mid-cta-text{flex:1} .blog-mid-cta-text p{font-family:var(--sans);font-size:.92rem;line-height:1.65;color:rgba(250,249,247,.7);margin:0 0 .3rem} .blog-mid-cta-text strong{color:var(--bg);font-family:var(--serif);font-size:1.05rem;display:block;margin-bottom:.5rem} .blog-mid-cta a{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg);color:var(--text);padding:.7rem 1.6rem;border-radius:980px;font-size:.82rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .3s var(--ease);flex-shrink:0} .blog-mid-cta a:hover{opacity:.85;transform:translateY(-1px)} .blog-cta{background:var(--warm);border-radius:16px;padding:2.2rem 2.5rem;margin-top:3.5rem} .blog-cta p{font-family:var(--sans);font-size:.92rem;line-height:1.75;color:var(--text);margin:0} .blog-cta a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(26,26,26,.25);transition:text-decoration-color .3s} .blog-cta a:hover{text-decoration-color:var(--text)} .blog-article-footer{margin-top:4rem;padding-top:2.5rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:1rem} .blog-article-footer-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid var(--warm2)} .blog-article-footer-info{font-size:.82rem;color:var(--muted);line-height:1.5} .blog-article-footer-info strong{color:var(--text);display:block;font-family:var(--serif);font-size:.95rem} .blog-article-footer-info a{color:var(--muted);text-decoration:none;font-weight:600;transition:color .3s} .blog-article-footer-info a:hover{color:var(--text)} @media(max-width:600px){.blog-pullquote{margin:2rem 0;padding:1.5rem 1.2rem}.blog-mid-cta{flex-direction:column;text-align:center;gap:1.2rem}.blog-mid-cta a{width:100%;justify-content:center}} .podcast-hero{padding:8rem 0 3rem} .podcast-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:1rem} .podcast-hero-sub{font-size:1rem;color:var(--muted);line-height:1.75;max-width:480px;margin-bottom:2rem} .podcast-links{display:flex;gap:1rem} .podcast-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--text);color:var(--bg);padding:.7rem 1.4rem;border-radius:980px;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .3s var(--ease)} .podcast-badge:hover{opacity:.85;transform:translateY(-1px)} .podcast-feed{padding:2rem 0 5rem} .podcast-embed{margin-bottom:3rem} .podcast-episodes h2{font-family:var(--serif);font-size:1.5rem;letter-spacing:-.015em;margin-bottom:1.5rem} nav#nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,249,247,.95);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);transition:all .5s var(--ease-out)} nav#nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(0,0,0,.06);transition:opacity .5s var(--ease-out)} nav#nav.scrolled{background:rgba(250,249,247,.8);backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%)} nav#nav.scrolled::after{opacity:.4} nav .container{display:flex;align-items:center;justify-content:space-between;padding-top:.9rem;padding-bottom:.9rem;transition:padding .4s var(--ease-out)} nav#nav.scrolled .container{padding-top:.65rem;padding-bottom:.65rem} .nav-logo img{height:20px;width:auto;opacity:.8;transition:opacity .25s} .nav-logo:hover img{opacity:1} .nav-links{display:flex;align-items:center;gap:.4rem} .nav-links>a,.nav-drop>span{font-family:var(--sans);font-size:.78rem;color:var(--text);text-decoration:none;padding:.35rem .55rem;transition:opacity .25s var(--ease);cursor:pointer;white-space:nowrap;opacity:.45;letter-spacing:.005em} .nav-links>a:hover,.nav-drop>span:hover,.nav-drop:hover>span{opacity:1} .nav-cta{opacity:1!important;background:var(--text)!important;color:var(--bg)!important;padding:.4rem 1rem!important;margin-left:.15rem;font-weight:600;font-size:.75rem!important;border:none!important;border-radius:980px!important;transition:opacity .25s var(--ease)!important;letter-spacing:.01em} .nav-cta:hover{opacity:.75!important} .nav-drop{position:relative} .nav-drop>span{display:flex;align-items:center;gap:.3rem;user-select:none} .nav-drop>span svg{width:10px;height:10px;min-width:10px;max-width:10px;min-height:10px;max-height:10px;transition:transform .3s;opacity:.4} .nav-drop:hover>span svg{transform:rotate(180deg);opacity:1} .nav-drop{padding-bottom:.6rem;margin-bottom:-.6rem} .nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:.4rem;min-width:170px;box-shadow:0 8px 32px rgba(0,0,0,.07);opacity:0;visibility:hidden;transition:all .2s var(--ease);pointer-events:none;z-index:200} .nav-drop-menu::before{content:'';position:absolute;top:-.6rem;left:0;right:0;height:.6rem} .nav-drop:hover{z-index:10} .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto} .nav-drop-menu a{display:block;font-family:var(--sans);font-size:.78rem;color:var(--muted);text-decoration:none;padding:.45rem .75rem;border-radius:6px;transition:all .2s;white-space:nowrap} .nav-drop-menu a:hover{color:var(--text);background:rgba(0,0,0,.03)} .nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:12px;color:var(--text);opacity:.5} .nav-hamburger svg{display:block} .nav-mobile-cta{display:none} @media(max-width:960px){ nav .container{padding-top:.75rem;padding-bottom:.75rem} nav#nav.scrolled .container{padding-top:.6rem;padding-bottom:.6rem} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid rgba(0,0,0,.06);padding:.6rem;flex-direction:column;align-items:stretch;gap:.15rem;box-shadow:0 12px 40px rgba(0,0,0,.04)} .nav-links.open{display:flex} .nav-links>a,.nav-drop>span{padding:.55rem .8rem;font-size:.85rem;opacity:.5;border-bottom:none;border-radius:8px;transition:all .2s} .nav-links>a:hover,.nav-drop>span:hover{opacity:1;background:rgba(0,0,0,.03)} .nav-drop{border-bottom:none} .nav-drop>span{padding:.55rem .8rem} .nav-drop:hover>span svg{transform:none} .nav-drop:hover .nav-drop-menu{opacity:0;visibility:hidden;pointer-events:none;max-height:0} .nav-drop.open>span svg{transform:rotate(180deg)} .nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;max-height:200px} .nav-drop-menu{position:static;transform:none;border:none;box-shadow:none;padding:0 0 .3rem .8rem;opacity:0;visibility:hidden;pointer-events:none;min-width:auto;max-height:0;overflow:hidden;transition:all .3s;border-radius:0} .nav-drop-menu a{padding:.4rem .8rem;border-radius:6px;font-size:.82rem;opacity:.4} .nav-drop-menu a:hover{opacity:.7;background:rgba(0,0,0,.02)} .nav-cta{margin:.4rem 0 .2rem!important;padding:.7rem 0!important;font-size:.85rem!important;opacity:1!important;text-align:center;display:block;background:var(--text)!important;color:var(--bg)!important;border:none!important;border-radius:10px!important} .nav-hamburger{display:block} }  .proof-sec{padding:7.5rem 0} .proof-heading{text-align:center;margin-bottom:3.5rem} .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .proof-card{background:var(--white);border:1px solid rgba(0,0,0,.03);border-radius:16px;overflow:hidden;transition:all .5s var(--ease);display:flex;flex-direction:column} .proof-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px) scale(1.008)} .proof-card-img{aspect-ratio:6/5;overflow:hidden;margin:.7rem .7rem 0;border-radius:12px} .proof-card-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .6s var(--ease)} .proof-card:hover .proof-card-img img{transform:scale(1.03)} .proof-card-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1} .proof-card-stat{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--text);line-height:1.3;letter-spacing:-.015em;margin-bottom:.7rem} .proof-card-quote{font-size:.85rem;color:var(--text2);line-height:1.75;font-style:italic;padding-top:.7rem;border-top:1px solid rgba(0,0,0,.04)} .proof-card-author{margin-top:auto;padding-top:.8rem} .proof-card-author-name{font-size:.8rem;font-weight:600;color:var(--text);line-height:1.3} .proof-card-author-role{font-size:.7rem;color:var(--muted);margin-top:.1rem} .proof-grid .proof-card:nth-child(2){transition-delay:.06s} .proof-grid .proof-card:nth-child(3){transition-delay:.12s} .proof-grid .proof-card:nth-child(4){transition-delay:.18s} @media(max-width:768px){.proof-sec{padding:5rem 0}.proof-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}} @media(max-width:480px){.proof-card-body{padding:1.2rem 1.3rem 1.4rem}.proof-card-img{margin:.6rem .6rem 0}} .nav-lang{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--muted);text-decoration:none;padding:.35rem .6rem;border:1px solid rgba(0,0,0,.08);border-radius:6px;transition:all .3s var(--ease);margin-left:.5rem} .nav-lang:hover{color:var(--text);border-color:rgba(0,0,0,.2)} .faq-section{margin-top:2rem} .faq-item{border-bottom:1px solid rgba(0,0,0,.06);padding:1.4rem 0} .faq-item:last-child{border-bottom:none} .faq-item h3{font-family:var(--serif);font-size:1.05rem;font-weight:700;line-height:1.4;margin-bottom:.6rem;color:var(--text)} .faq-item p{font-size:.9rem;line-height:1.75;color:var(--text2)} @keyframes reveal-fallback{to{opacity:1;transform:translateY(0)}} .reveal{animation:reveal-fallback .1s 1.2s forwards} .reveal.vis{animation:none} .related-grid{display:flex;flex-wrap:wrap;gap:.5rem} .related-grid a{font-family:var(--sans);font-size:.82rem;color:var(--text);text-decoration:none;padding:.5rem 1rem;border:1px solid var(--border);border-radius:8px;transition:all .2s var(--ease)} .related-grid a:hover{border-color:var(--text);background:rgba(0,0,0,.02)}
.services-grid-4{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.services-grid-4{grid-template-columns:1fr}}


.lang-switch{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);opacity:.5;padding:.45rem .8rem;border:1px solid rgba(0,0,0,.1);border-radius:999px;transition:all .25s;margin-left:.5rem}.lang-switch svg{opacity:.7}.lang-switch:hover{opacity:1;border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.02)}




.proof-card-img--logo{background:var(--warm)}.proof-card-img--logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;padding:22%!important;box-sizing:border-box!important;transform:none!important;transition:none}.proof-card:hover .proof-card-img--logo img{transform:none!important}

/* === Samenwerking section (homepage) === */
.samenwerking-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.samenwerking-card{background:var(--white);border:1px solid rgba(26,26,26,.04);border-radius:18px;padding:2.5rem 2.2rem 2rem 2.6rem;text-decoration:none;color:var(--text);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1),border-color .6s cubic-bezier(.16,1,.3,1)}
.samenwerking-card::before{content:'';position:absolute;left:0;top:3rem;bottom:3rem;width:1px;background:linear-gradient(180deg,transparent 0%,var(--accent) 25%,var(--accent) 75%,transparent 100%);opacity:.65;transition:top .6s cubic-bezier(.16,1,.3,1),bottom .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1)}
.samenwerking-card:hover{transform:translateY(-3px);box-shadow:0 18px 48px -12px rgba(26,26,26,.08);border-color:rgba(26,26,26,.06)}
.samenwerking-card:hover::before{top:1.8rem;bottom:1.8rem;opacity:1}
.samenwerking-card.c1{--accent:#6b8e5a}
.samenwerking-card.c2{--accent:#c07d3e}
.samenwerking-card.c3{--accent:#4a6fa5}
.samenwerking-card.c4{--accent:#8a5a7a}
.samenwerking-grid--4{grid-template-columns:repeat(4,1fr)}
@media(min-width:1181px){.samenwerking-grid--4 .samenwerking-card{padding:2.3rem 1.8rem 1.9rem 2.1rem}}
.samenwerking-grid .samenwerking-card:nth-child(4){transition-delay:.15s}
@media(max-width:1180px){.samenwerking-grid--4{grid-template-columns:repeat(2,1fr)}}
.samenwerking-card .tag{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1.6rem;display:inline-flex;align-items:center;gap:.55rem;transition:color .5s cubic-bezier(.16,1,.3,1)}
.samenwerking-card .tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.85}
.samenwerking-card:hover .tag{color:var(--text)}
.samenwerking-card h3{font-family:var(--serif);font-size:1.35rem;line-height:1.1;letter-spacing:-.018em;font-weight:400;margin-bottom:1rem;color:var(--text)}
.samenwerking-card h3 em{font-style:italic;font-weight:400}
.samenwerking-card p{font-size:.86rem;line-height:1.78;color:var(--muted);margin-bottom:2rem;flex-grow:1}
.samenwerking-card .card-link{font-size:.78rem;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:.5rem}
.samenwerking-card .card-link svg{transition:transform .5s cubic-bezier(.16,1,.3,1);opacity:.5}
.samenwerking-card:hover .card-link svg{transform:translateX(4px);opacity:1}
.samenwerking-grid .samenwerking-card:nth-child(2){transition-delay:.05s}
.samenwerking-grid .samenwerking-card:nth-child(3){transition-delay:.1s}
@media(max-width:920px){.samenwerking-grid{grid-template-columns:1fr}.samenwerking-card{padding:2rem 1.7rem 1.7rem 2.1rem}.samenwerking-card h3{font-size:1.25rem}}

/* === Gedeelde hero-proof en offer-bar styles === */
.offer-bar{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;padding:.6rem 0}
.offer-item{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--text2)}
.offer-item svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.hero-sep{width:1px;height:22px;background:rgba(0,0,0,.12);flex-shrink:0}
.hero-proof{display:flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--muted);line-height:1}
.hero-proof strong{color:var(--text);font-size:.76rem}
.hero-stars{color:#f5a623;font-size:.7rem;letter-spacing:-.5px;line-height:1}
.hero-google{width:13px;height:13px;flex-shrink:0}
@media(max-width:600px){.offer-bar{flex-direction:column;align-items:center;gap:.8rem}.hero-sep{display:none}}

/* === Modifier: sectie met minimale padding (CTA-connectors) === */
.sec-tight{padding:2rem 0}
/* === Homepage werkwijze sectie (donker) === */
.sec-werkwijze{padding:6rem 0 5rem;background:linear-gradient(180deg,var(--dark) 0%,var(--dark-deep) 100%);color:#fff;overflow:hidden}
/* === Page-level H1 (non-hero pages zoals Over) === */
.page-h1{font-family:var(--serif);font-size:clamp(2rem,3.5vw,2.8rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:1.5rem}
/* hero-tag binnen reveal-context heeft geen eigen animatie nodig */
.reveal .hero-tag{animation:none;opacity:1}

/* === Focus-visible: toegankelijkheid en premium feel === */
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:var(--radius-sm)}
.btn:focus-visible,.form-submit:focus-visible,.nav-cta:focus-visible{outline-offset:4px}
.nav-links a:focus-visible,.nav-drop>span:focus-visible,.nav-drop-menu a:focus-visible{outline-color:rgba(26,26,26,.4)}
.form-field input:focus-visible,.form-field textarea:focus-visible{outline:none}

/* === Desktop zoom-out (90% feel) === */
@media(min-width:961px){
  html{font-size:14.5px}
  .container{max-width:1240px}
}


/* ============================================================
   === SHOP === Overzichtspagina's /shop/ en /en/shop/
   Data: /shop/products.js — renderer: /shop/shop.js
   Alles staat onder .shop-*; geen bestaande selector wordt geraakt.
   ============================================================ */

/* --- Kop --- */
.shop-hero{padding:9.5rem 0 0}
.shop-hero-inner{max-width:760px}
.shop-hero h1{font-family:var(--serif);font-size:clamp(2.6rem,7vw,4.6rem);font-weight:400;line-height:1;letter-spacing:-.03em;margin-bottom:1.6rem}
.shop-hero h1 em{font-style:italic}
.shop-hero-sub{font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.65;color:var(--text2);max-width:520px}
.shop-rule{height:1px;background:var(--border);margin:4.5rem 0 0}

/* --- Productrijen: beeld en tekst om en om --- */
.shop-rows{padding:0 0 clamp(3rem,6vw,5rem)}
.shop-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem);align-items:center;padding:5.5rem 0;border-bottom:1px solid var(--border)}
.shop-row:last-child{border-bottom:none;padding-bottom:1.5rem}
.shop-row--flip .shop-row-media{order:2}

.shop-row-frame{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--warm);aspect-ratio:4/3;box-shadow:var(--shadow-card)}
.shop-row-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.shop-row:hover .shop-row-frame img{transform:scale(1.03)}

.shop-row-title{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:400;line-height:1.1;letter-spacing:-.02em;margin-bottom:1.1rem}
.shop-row-sub{font-size:1rem;line-height:1.72;color:var(--text2);margin-bottom:2rem;max-width:44ch}
.shop-row-desc{font-size:.92rem;line-height:1.78;color:var(--muted);margin-bottom:1.8rem;max-width:46ch}

.shop-row-list{list-style:none;margin:0 0 2.4rem;padding:0;display:grid;gap:.05rem}
.shop-row-list li{position:relative;font-size:.88rem;line-height:1.5;color:var(--text2);padding:.55rem 0 .55rem 1.5rem;border-top:1px solid var(--border)}
.shop-row-list li:last-child{border-bottom:1px solid var(--border)}
.shop-row-list li::before{content:'';position:absolute;left:.25rem;top:1.02rem;width:5px;height:5px;border-radius:50%;background:var(--light)}

.shop-row-foot{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.shop-row-price{font-family:var(--serif);font-size:2rem;line-height:1;letter-spacing:-.02em}
.shop-row-cta{padding:.95rem 1.9rem;font-size:.84rem}
.shop-row-cta svg{transition:transform .45s var(--ease-out)}
.shop-row-cta:hover svg{transform:translateX(4px)}
.shop-row-status{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--warm);border-radius:var(--radius-pill);padding:.6rem 1.15rem}

@media(min-width:768px){
  .shop-row-body.reveal{transition-delay:.12s}
}
@media(max-width:900px){
  .shop-hero{padding:8rem 0 0}
  .shop-rule{margin-top:3.5rem}
  .shop-rows{padding-bottom:5rem}
  .shop-row{grid-template-columns:1fr;gap:2.2rem;padding:3.5rem 0}
  .shop-row--flip .shop-row-media{order:0}
}
@media(max-width:600px){
  .shop-row-sub{font-size:.95rem;margin-bottom:1.6rem}
  .shop-row-foot{gap:1.1rem}
  .shop-row-cta{flex-grow:1;justify-content:center}
}


/* ============================================================
   === TAPDOELEN MOBIEL ===
   Alle links hierboven zijn op maat voor de muis. Op een telefoon
   zijn ze 15 tot 30 pixels hoog en dat is te weinig om te raken
   zonder de buurman te pakken. Deze sectie zet er een vloer onder
   en raakt niets op desktop, zodat de bestaande vormgeving op
   breedte blijft staan zoals hij is.
   ============================================================ */

@media(max-width:960px){
  /* Uitklapmenu en losse navlinks in het mobiele menu */
  .nav-drop-menu a,
  .nav-links>a{min-height:44px;display:flex;align-items:center}
  /* Het uitklapmenu klapt open tot een vaste max-height. Met 44px per regel
     passen de vijf diensten niet meer in de oude 200px en viel Partnership
     eraf, dus die grens gaat mee omhoog. */
  .nav-drop.open .nav-drop-menu{max-height:320px}
  .nav-links>a.nav-cta{justify-content:center}
  .lang-switch{min-height:44px;padding-top:0;padding-bottom:0}
  /* Het logo is 21 bij 20; het anker eromheen krijgt een raakvlak */
  .nav-logo{display:flex;align-items:center;min-height:44px;padding-right:.75rem}
}

@media(max-width:600px){
  /* Footerkolommen worden op mobiel een echte linklijst */
  .f-col a{min-height:44px;display:flex;align-items:center;line-height:1.35}
  .f-brand a{display:inline-flex;align-items:center;min-height:44px}
  /* Telefoon, WhatsApp en mail: de belangrijkste knoppen van de site */
  .contact-link,
  .form-text-contact a{min-height:44px}
  /* Blogpagina's */
  .blog-back{min-height:44px;margin-bottom:2rem}
  .blog-article-footer-info a{display:inline-flex;align-items:center;min-height:44px}
  /* Scorecard: de doorverwijzingen onder de intro */
  .sc-intro a{min-height:44px;display:flex;align-items:center}
  /* Knop midden in een blogartikel: 39px, net te laag */
  .blog-mid-cta a{min-height:44px}
  /* De linkrij op de 404 */
  .nf-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* === Conversie: geruststelling onder de hero-CTA === */
.hero-assure{display:flex;flex-wrap:wrap;gap:.45rem 1.2rem;margin-top:1.15rem;font-size:.76rem;color:var(--muted)}
.hero-assure span{display:inline-flex;align-items:center;gap:.4rem}
.hero-assure svg{color:#6b8e5a;flex-shrink:0}
@media(max-width:600px){.hero-assure{flex-wrap:nowrap;justify-content:space-between;gap:.5rem;font-size:clamp(.62rem,3.1vw,.76rem);white-space:nowrap}.hero-assure span{gap:.3rem}.hero-assure svg{width:11px;height:11px}}

/* === Conversie: klantlogo's === */
.trust-sec{padding:3.4rem 0 3.8rem;border-top:1px solid var(--border)}
.logo-strip{margin:0}
.logo-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.logo-track{list-style:none;display:flex;align-items:center;gap:4.5rem;padding-right:4.5rem;flex-shrink:0;min-width:max-content;animation:logo-scroll 48s linear infinite}
.logo-track li{display:flex;align-items:center;height:56px}
.logo-track img{height:var(--h);width:auto;opacity:.5;transition:opacity .4s var(--ease)}
.logo-track img:hover{opacity:.95}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logo-scroll{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.logo-marquee{-webkit-mask-image:none;mask-image:none;justify-content:center}.logo-track{animation:none;flex-wrap:wrap;justify-content:center;min-width:0;gap:1.5rem 3rem;padding-right:0}.logo-track[aria-hidden]{display:none}}
@media(max-width:768px){.trust-sec{padding:2.6rem 0 3rem}.logo-track{gap:3rem;padding-right:3rem}.logo-track li{height:44px}.logo-track img{height:calc(var(--h)*.78);opacity:.6}}

/* === Conversie: tussentijdse CTA === */
.mid-cta{padding:0 0 6rem}
.mid-cta-card{display:grid;grid-template-columns:1.35fr 1fr;gap:3rem;align-items:center;background:linear-gradient(180deg,#f5f2ed 0%,#f0ece5 100%);border-radius:24px;padding:3.4rem 3.6rem}
.mid-cta-text .s-title{margin-bottom:1rem}
.mid-cta-text p{font-size:.92rem;line-height:1.75;color:var(--text2);max-width:460px}
.mid-cta-actions{display:flex;flex-direction:column;align-items:center;gap:1.1rem;justify-self:end;min-width:300px;text-align:center}
.mid-cta-actions .btn{width:100%;justify-content:center}
.mid-cta-alt{display:inline-flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:600;color:var(--text);text-decoration:none;border-bottom:1.5px solid rgba(26,26,26,.25);padding-bottom:2px;transition:border-color .3s}
.mid-cta-alt:hover{border-color:var(--text)}
@media(max-width:860px){.mid-cta{padding:0 0 4rem}.mid-cta-card{grid-template-columns:1fr;gap:1.8rem;padding:2.4rem 1.6rem}.mid-cta-actions{justify-self:stretch;min-width:0;align-items:flex-start;text-align:left}}

/* === Conversie: wat er na je aanvraag gebeurt === */
.form-steps{margin-top:2.2rem;padding-top:2rem;border-top:1px solid rgba(250,249,247,.08);max-width:420px}
.form-text .form-steps .form-steps-label{max-width:none;line-height:1.2;font-size:.64rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(250,249,247,.4);margin-bottom:1.4rem}
.form-steps ol{list-style:none;counter-reset:fs;display:flex;flex-direction:column}
.form-steps li{counter-increment:fs;position:relative;display:grid;grid-template-columns:32px 1fr;column-gap:1rem;padding-bottom:1.4rem}
.form-steps li:last-child{padding-bottom:0}
.form-steps li::before{content:counter(fs);grid-row:span 2;width:32px;height:32px;border-radius:50%;background:rgba(250,249,247,.06);border:1px solid rgba(250,249,247,.16);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:.82rem;color:var(--bg);position:relative;z-index:1}
.form-steps li:not(:last-child)::after{content:'';position:absolute;left:15.5px;top:34px;bottom:2px;width:1px;background:linear-gradient(180deg,rgba(250,249,247,.18),rgba(250,249,247,.04))}
.form-steps li strong{font-size:.9rem;font-weight:600;color:var(--bg);line-height:1.35;padding-top:.3rem}
.form-steps li span{font-size:.8rem;color:rgba(250,249,247,.5);line-height:1.55;margin-top:.2rem}
.label-opt{font-weight:400;opacity:.55}

/* === Conversie: vaste contactbalk op mobiel === */
.sticky-cta{display:none}
@media(max-width:768px){
.sticky-cta{display:flex;align-items:center;gap:.3rem;position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:90;padding:.35rem;background:rgba(26,26,26,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:980px;box-shadow:0 12px 32px rgba(0,0,0,.18);transform:translateY(calc(100% + 1.5rem));opacity:0;transition:transform .45s var(--ease-out),opacity .3s}
.sticky-cta.is-visible{transform:none;opacity:1}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:44px;padding:0 .85rem;border-radius:980px;color:var(--bg);text-decoration:none;font-size:.78rem;font-weight:600}
.sticky-cta a svg{opacity:.75}
.sticky-cta .sticky-cta-main{flex:1;background:var(--bg);color:var(--text);font-size:.84rem}
body:has(.sticky-cta){padding-bottom:5rem}
}
@media(max-width:380px){.sticky-cta a span{display:none}}

/* === Reviews: foto's bij de reviewer === */
.t-av{width:40px;height:40px;font-size:.68rem;flex-shrink:0}
.t-av--photo{overflow:hidden;box-shadow:0 0 0 2px var(--white),0 0 0 3px rgba(26,26,26,.07)}
.t-av--photo img{width:100%;height:100%;object-fit:cover;display:block}

/* === Strakker ritme: compactere secties, één uitlijning, gelijke hoeken === */
.sec{padding:5.5rem 0}
.proof-sec{padding:5.5rem 0}
.form-outer{padding:6rem 0}
.hero{padding:7.5rem 0 4.5rem}
.quote-sec{padding:5rem 0}
.trust-sec{padding:2.8rem 0 3rem}
.mid-cta{padding:0 0 5.5rem}
.p-header,.t-header,.m-header,.proof-heading{text-align:left;max-width:640px;margin:0 0 2.75rem}
.m-header .s-title,.proof-heading .s-title{margin-left:0;margin-right:0}
.p-card,.t-card,.proof-card,.samenwerking-card{border-radius:14px}
.mid-cta-card{border-radius:18px}
.form-card{border-radius:16px}
.img-banner{border-radius:14px;margin:1.3rem 0 0}
.mini-cta{margin-top:2.2rem;padding-top:1.6rem}
.form-submit{font-family:inherit;border-radius:980px}
.faq-a a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.faq-wrap{max-width:760px;margin:0}
@media(max-width:900px){.sec,.proof-sec{padding:4.5rem 0}.form-outer{padding:4.5rem 0}.hero{padding:6.5rem 0 3.5rem}.quote-sec{padding:4rem 0}.mid-cta{padding:0 0 4.5rem}.p-header,.t-header,.m-header,.proof-heading{margin-bottom:2.2rem}}
@media(max-width:500px){.sec,.proof-sec{padding:3.5rem 0}.form-outer{padding:3.5rem 0}.hero{padding:6rem 0 3rem}.quote-sec{padding:3.25rem 0}.mid-cta{padding:0 0 3.5rem}}

/* === FAQ: kop links, strakke lijst rechts === */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:4rem;align-items:start}
.faq-head{position:sticky;top:6rem}
.faq-head p{font-size:.9rem;color:var(--muted);line-height:1.7}
.faq-head a{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(26,26,26,.25)}
.faq-head a:hover{border-color:var(--text)}
.faq-sec .faq-wrap{max-width:none;margin:0;border-top:1px solid rgba(26,26,26,.08)}
.faq-sec .faq-item,.faq-sec .faq-item:first-child{padding:1.6rem 0;border-bottom:1px solid rgba(26,26,26,.08)}
.faq-sec .faq-item:last-child{border-bottom:none;padding-bottom:0}
.faq-sec .faq-q{font-family:var(--serif);font-style:normal;font-size:1.08rem;line-height:1.4;letter-spacing:-.01em;margin-bottom:.55rem}
.faq-sec .faq-a{font-size:.88rem;line-height:1.75;color:var(--text2)}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr;gap:2rem}.faq-head{position:static}}
.faq-js .faq-q{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:0;user-select:none}
.faq-js .faq-q::after{content:'';flex-shrink:0;width:28px;height:28px;margin-top:-.15rem;border-radius:50%;border:1px solid rgba(26,26,26,.12);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 1.5v9M1.5 6h9'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .35s var(--ease-out),background-color .3s}
.faq-js .faq-item.is-open .faq-q::after{transform:rotate(45deg);background-color:var(--warm)}
.faq-js .faq-q:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:4px}
.faq-js .faq-a{display:none;padding-top:.7rem;padding-right:2.75rem}
.faq-js .faq-item.is-open .faq-a{display:block}

/* === Iconen bij "Herkenbaar?" === */
.p-icon{width:44px;height:44px;border-radius:12px;background:var(--warm);color:var(--text);display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;transition:background-color .4s var(--ease),color .4s var(--ease)}
.p-card:hover .p-icon{background:var(--text);color:var(--bg)}

/* === Reviewkaarten: auteur onderaan op één lijn === */
.t-card{display:flex;flex-direction:column;height:100%}
.t-card blockquote{flex-grow:1;margin-bottom:1.4rem}
.t-author{margin-top:auto;padding-top:1.15rem;border-top:1px solid rgba(26,26,26,.06);gap:.8rem}
.t-av{width:42px;height:42px}
.t-av--photo img{object-position:center}
.t-meta{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.t-meta strong{font-size:.8rem}
.t-meta span{font-size:.68rem}
.t-grid{align-items:stretch}
.p-icon svg{width:22px;height:22px;flex-shrink:0}

/* === Logo's: stilstaande rij in plaats van een bewegende band === */
.logo-marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}
/* Twee rijen van zeven; op mobiel drie per rij met een gecentreerde laatste rij */
.logo-track{animation:none;min-width:0;width:100%;padding:0;display:grid;grid-template-columns:repeat(7,auto);gap:1.6rem 1rem;justify-content:space-between;justify-items:center}
.logo-track li{height:52px}
.logo-track img{height:calc(var(--h)*.8)}
@media(max-width:768px){.logo-track{grid-template-columns:repeat(6,1fr);gap:1.6rem .8rem}.logo-track li{height:40px;grid-column:span 2}.logo-track li:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}.logo-track li:nth-child(3n+1):last-child{grid-column:3/span 2}.logo-track img{height:calc(var(--h)*.66)}}

/* === Ronde 4: ritme, contact, stappen === */
/* CTA-blok direct na een warme sectie krijgt eigen ademruimte */
.sec-warm + .mid-cta{padding-top:5.5rem}
@media(max-width:900px){.sec-warm + .mid-cta{padding-top:4.5rem}}
@media(max-width:500px){.sec-warm + .mid-cta{padding-top:3.5rem}}
/* Vier kaarten naast elkaar, genummerd */
.p-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.p-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.p-grid--4{grid-template-columns:1fr}}
.p-num{font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--light);margin-bottom:1.4rem;letter-spacing:-.02em}
/* Contact: compactere hero en minder gat naar de reviews */
.contact-sec{padding:7rem 0 3.5rem}
.contact-photo{aspect-ratio:4/5;max-height:600px}
.contact-photo img{height:100%;object-fit:cover}
@media(max-width:900px){.contact-sec{padding:6rem 0 2.5rem}}
/* Formulierstappen: zelfde gevulde cirkels als "Zo werkt het" */
.form-steps li::before{background:var(--bg);border:none;color:var(--text);font-family:var(--sans);font-weight:700;font-size:.76rem}
.form-steps li:not(:last-child)::after{background:rgba(250,249,247,.14)}
/* Logo's: eigen optische hoogte per logo, één tint */
.logo-track img{height:var(--h);opacity:.42;filter:grayscale(1)}
.logo-track{justify-content:space-between;align-items:center}
@media(max-width:768px){.logo-track img{height:calc(var(--h)*.82)}}
@media(max-width:768px){.logo-track img{opacity:.55}}
@media(min-width:769px) and (max-width:1100px){.logo-track img{height:calc(var(--h)*.85)}}
/* Eén rij die langzaam naar rechts schuift; de tweede lijst sluit de lus. Bij reduced motion blijft het raster. */
.logo-track[aria-hidden]{display:none}
.logo-label{text-align:center;font-size:.74rem;letter-spacing:.02em;color:var(--muted);opacity:.85;margin-bottom:1.4rem}
@media(prefers-reduced-motion:no-preference){
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.logo-track,.logo-track[aria-hidden]{display:flex;flex-shrink:0;width:auto;min-width:max-content;gap:4rem;padding-right:4rem;animation:logo-scroll 70s linear infinite reverse}
.logo-marquee:hover .logo-track{animation-play-state:paused}
}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
.logo-track,.logo-track[aria-hidden]{gap:2.6rem;padding-right:2.6rem;animation-duration:55s}
.logo-label{margin-bottom:1rem}
}
/* Reviewmuur op mobiel inkorten */
.t-more{display:none}
@media(max-width:768px){
.t-grid:not(.is-expanded) .t-card:nth-child(n+5){display:none}
.t-more{display:flex;margin:1.4rem auto 0;align-items:center;justify-content:center;padding:.85rem 1.6rem;border-radius:980px;border:1px solid rgba(26,26,26,.15);background:transparent;font-family:inherit;font-size:.84rem;font-weight:600;color:var(--text);cursor:pointer}
/* Hero-foto lager zodat het volgende blok zichtbaar blijft */
.hero .hero-img{aspect-ratio:4/3.4;max-height:360px}
.hero .hero-img img{object-position:center 22%}
}

/* Snelheid: secties onder de vouw pas opbouwen zodra ze bijna in beeld komen.
   Scheelt op een telefoon honderden milliseconden layout bij het laden. */
main>section:not(:first-child),footer{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* Bij een sprong naar een anker (#contact) rendert script.js eerst alles, zodat de
   scroll op de echte hoogtes uitkomt en niet op de schatting hierboven. */
.cv-all main>section,.cv-all footer{content-visibility:visible}
/* Contactfoto op mobiel: vaste breedte (dezelfde als voorheen), zodat het vak al
   de juiste hoogte heeft voordat de foto binnen is. Anders schoof de pagina op. */
@media(max-width:900px){.contact-photo{width:100%}}
@media(max-width:768px){.contact-photo{width:280px;max-width:100%}}
/* Blog: categoriefilter en categorielabels. De chips staan op hidden tot het
   script draait, zodat je zonder JavaScript alle artikelen ziet en geen knoppen
   die niets doen. */
.blog-filter{--green:#258250;display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2rem}
.blog-filter[hidden],.blog-card[hidden]{display:none}
.blog-chip{font-family:var(--sans);font-size:.82rem;font-weight:600;line-height:1;color:var(--text);background:var(--white);border:1px solid rgba(26,26,26,.12);border-radius:var(--radius-pill);padding:.65rem 1.1rem;min-height:44px;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.blog-chip:hover{border-color:var(--green)}
.blog-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.blog-chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.blog-chip-count{font-size:.72rem;font-weight:600;opacity:.65}
.blog-chip[aria-pressed="true"] .blog-chip-count{opacity:.85}
.blog-card-cat{color:#258250}
.blog-article-cat{color:#258250;text-decoration:none}
.blog-article-cat:hover{text-decoration:underline;text-underline-offset:3px}
.blog-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.blog-related{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(26,26,26,.08);font-family:var(--sans)}
.blog-related h3{font-family:var(--serif);font-size:1.05rem;margin-bottom:.8rem}
.blog-related a{display:block;color:var(--text);font-size:.92rem;line-height:1.6;padding:.35rem 0;text-underline-offset:3px}
.blog-article-body p a,.blog-article-body li a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(37,130,80,.55);transition:text-decoration-color .3s}
.blog-article-body p a:hover,.blog-article-body li a:hover{text-decoration-color:#258250}
/* Dienstblok: rustige verwijzing naar de dienst die bij een artikel hoort, vlak
   voor de eerste tussenkop. Zelfde opbouw als de dienstkaarten op de homepage
   (witte kaart, dunne rand, accentlijn en stip in de kleur van de dienst).
   Wordt gevuld door scripts/build-blog.mjs uit het veld "dienst" in _data/blogs.json. */
.dienstblok{--accent:#6b8e5a;position:relative;background:var(--white);border:1px solid rgba(26,26,26,.06);border-radius:14px;padding:1.4rem 1.6rem 1.4rem 1.8rem;margin:.5rem 0 0;font-family:var(--sans)}
.dienstblok::before{content:'';position:absolute;left:0;top:1.2rem;bottom:1.2rem;width:1px;background:linear-gradient(180deg,transparent 0%,var(--accent) 25%,var(--accent) 75%,transparent 100%);opacity:.65}
.dienstblok.c1{--accent:#6b8e5a}
.dienstblok.c2{--accent:#c07d3e}
.dienstblok.c3{--accent:#4a6fa5}
.dienstblok.c4{--accent:#8a5a7a}
.blog-article-body .dienstblok p{font-family:var(--sans);letter-spacing:0;margin:0}
.blog-article-body .dienstblok .dienstblok-tag{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--muted);display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.dienstblok-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.85;flex-shrink:0}
.blog-article-body .dienstblok .dienstblok-kop{font-family:var(--serif);font-size:1.05rem;line-height:1.4;color:var(--text);margin-bottom:.35rem}
.blog-article-body .dienstblok .dienstblok-tekst{font-size:.9rem;line-height:1.7;color:var(--muted);margin-bottom:.9rem}
.blog-article-body .dienstblok .dienstblok-actie{line-height:1}
.blog-article-body .dienstblok .dienstblok-knop{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.7rem 1.4rem;border-radius:var(--radius-pill);background:var(--text);color:var(--bg);font-family:var(--sans);font-size:.84rem;font-weight:600;line-height:1.3;text-decoration:none;transition:opacity .3s var(--ease)}
.blog-article-body .dienstblok .dienstblok-knop:hover{opacity:.85}
.blog-article-body .dienstblok .dienstblok-knop:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:var(--radius-pill)}
.dienstblok-knop svg{transition:transform .3s var(--ease)}
.dienstblok-knop:hover svg{transform:translateX(3px)}
@media(max-width:600px){.dienstblok{padding:1.25rem 1.2rem 1.25rem 1.4rem}.blog-article-body .dienstblok .dienstblok-knop{width:100%;justify-content:center}}
/* Over Jeffrey: subtiele regel met de platforms waar artikelen van Jeffrey staan.
   Zelfde gedempte toon als de logobalk, zodat het ondersteunt en niet schreeuwt. */
.a-press{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;margin-top:2.2rem;padding-top:2.2rem;border-top:1px solid rgba(0,0,0,.05)}
.a-press-label{font-size:.74rem;letter-spacing:.02em;color:var(--muted);opacity:.85}
.a-press-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem}
.a-press-list li{display:flex;align-items:center}
/* Logo's in hun eigen kleuren (wit, rood, cyaan) worden egaal donker en gedempt,
   zodat ze rustig naast elkaar staan op de warme achtergrond. */
.a-press-list img{height:var(--h);width:auto;filter:brightness(0);opacity:.45}
@media(max-width:500px){.a-press{flex-direction:column;align-items:flex-start;gap:.6rem}}
/* Artikelen onder /sales-coaching/: lijsten, tussenkoppen, tabellen en codeblokken
   in de blogopmaak. Zelfde letters en kleuren als de rest van het artikel. */
.blog-article-updated{font-family:var(--sans);font-size:.8rem;line-height:1.6;color:var(--muted);margin-top:1.4rem}
.blog-article-body h3{font-family:var(--serif);font-size:1.1rem;line-height:1.4;margin:2.5rem 0 1rem;letter-spacing:-.01em;color:var(--text)}
.blog-article-body ul,.blog-article-body ol{font-family:var(--serif);font-size:1.02rem;line-height:1.9;color:var(--text2);margin:0 0 1.5rem;padding-left:1.4rem}
.blog-article-body li{margin-bottom:.6rem;padding-left:.3rem}
.blog-article-body li::marker{color:#258250}
.blog-article-body li strong{color:var(--text);font-weight:700}
.blog-table{margin:1.5rem 0 2.5rem;overflow-x:auto;background:var(--white);border:1px solid rgba(26,26,26,.08);border-radius:var(--radius-md)}
.blog-table table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.86rem;line-height:1.55;color:var(--text2)}
.blog-table th,.blog-table td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid rgba(26,26,26,.06)}
.blog-table thead th,.blog-table thead td{background:var(--warm);color:var(--text);font-size:.78rem;font-weight:700}
.blog-table tbody th{color:var(--text);font-weight:700}
.blog-table tbody tr:last-child>*{border-bottom:0}
.blog-table a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(37,130,80,.55)}
.blog-code{margin:1.5rem 0 2rem;padding:1.3rem 1.4rem;background:var(--warm);border:1px solid rgba(26,26,26,.06);border-radius:var(--radius-md);overflow-x:auto}
.blog-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.7;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.blog-related h2{font-family:var(--serif);font-size:1.05rem;margin-bottom:.8rem}
.blog-card h3{font-family:var(--serif);font-size:1.1rem;line-height:1.35;letter-spacing:-.01em;margin-bottom:.7rem}
/* Op mobiel wordt elke tabelrij een kaartje: de eerste cel is de titel, de andere
   cellen krijgen hun kolomkop als label. Zo hoeft niemand opzij te scrollen. */
@media(max-width:600px){
.blog-table{background:none;border:0;border-radius:0;overflow:visible}
.blog-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.blog-table table,.blog-table tbody,.blog-table tr,.blog-table th,.blog-table td{display:block;width:100%}
.blog-table tr{background:var(--white);border:1px solid rgba(26,26,26,.08);border-radius:var(--radius-md);padding:.9rem 1rem;margin-bottom:.8rem}
.blog-table th,.blog-table td{padding:.35rem 0;border:0}
.blog-table tbody th{font-size:.92rem;padding-bottom:.5rem}
.blog-table td[data-label]::before{content:attr(data-label);display:block;font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
}