/* Comfort Home – uitgebreide offertepagina v35 */
.of-sec{padding:72px 0;background:#fff}
.of-sec:nth-of-type(even){background:#f3f6f2}
.of-h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.028em;font-weight:750;color:#13221c;margin:0 0 12px}
.of-lead{font-size:17px;line-height:1.65;color:#3a4842;max-width:640px;margin:0 0 34px}
/* tijdlijn */
.of-time{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.of-time::before{content:"";position:absolute;top:15px;left:16px;right:16px;height:2px;background:linear-gradient(90deg,#12a15a,#cfe5d7)}
.of-time li{position:relative;padding-top:46px}
.of-time li::before{content:"";position:absolute;top:4px;left:0;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #12a15a;box-shadow:0 0 0 5px #f3f6f2}
.of-time li:first-child::before{background:#12a15a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/13px no-repeat}
.of-flow{background:#f3f6f2!important}
.of-when{display:inline-block;font-size:13px;font-weight:750;color:#0d8a4c;background:#e4f3ea;border-radius:999px;padding:4px 11px;margin-bottom:10px}
.of-time b{display:block;font-size:17px;color:#13221c;margin-bottom:6px}
.of-time p{margin:0;font-size:15px;line-height:1.6;color:#5e6b65}
/* offerte-voorbeeld */
.of-doc-sec{background:#fff!important}
.of-doc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.of-checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.of-checks li{position:relative;padding-left:36px;font-size:16px;line-height:1.55;color:#3a4842}
.of-checks li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#12a15a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/13px no-repeat}
.of-checks b{color:#13221c}
.of-doc{background:#fff;border:1px solid #e2e8e3;border-radius:22px;padding:28px;box-shadow:0 2px 4px rgba(14,59,46,.04),16px 16px 0 -1px #e4efe8,0 34px 70px -40px rgba(14,59,46,.45);transform:rotate(1.2deg);position:relative}

.of-doc-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid #e2e8e3}
.of-doc-top div{text-align:right}.of-doc-top b{display:block;font-size:20px;color:#0e3b2e}.of-doc-top span{font-size:12.5px;color:#c9a55a;font-weight:700}
.of-doc-to{padding:16px 0}.of-doc-to small{display:block;font-size:12px;color:#5e6b65}.of-doc-to b{display:block;font-size:16px;color:#13221c}.of-doc-to span{font-size:13.5px;color:#5e6b65}
.of-doc-t{width:100%;border-collapse:collapse;font-size:14.5px}
.of-doc-t td{padding:11px 0;border-top:1px solid #eef2ef;color:#13221c;font-weight:650;vertical-align:top}
.of-doc-t td small{font-weight:500;color:#5e6b65;font-size:12.5px}
.of-doc-t td:last-child{text-align:right;color:#12a15a;font-weight:800;font-size:17px}
.of-doc-sum{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:14px 16px;border-radius:14px;background:#0e3b2e;color:#fff}
.of-doc-sum span{font-size:14px;color:#cfe4d9}.of-doc-sum b{font-size:18px}
.of-doc-sign{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13.5px;color:#5e6b65}
.of-doc-sign i{width:120px;height:2px;background:repeating-linear-gradient(90deg,#9fb2a9 0 6px,transparent 6px 10px)}
/* oplossingen */
.of-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.of-card{background:#fff;border:1px solid #e2e8e3;border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.of-ph{display:block;height:150px;background-size:cover;background-position:center}
.of-card-b{padding:20px;display:flex;flex-direction:column;flex:1}
.of-card h3{font-size:20px;margin:0 0 8px;color:#13221c}
.of-price{font-size:14px;line-height:1.55;color:#3a4842;background:#f3f6f2;border-radius:12px;padding:10px 12px;margin:0 0 14px}
.of-price a{color:#0d8a4c;font-weight:700}
.of-card ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;flex:1}
.of-card li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;color:#5e6b65}
.of-card li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:#e4f3ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d8a4c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/10px no-repeat}
.of-go{appearance:none;border:0;border-radius:13px;background:#0e3b2e;color:#fff;font:inherit;font-weight:750;font-size:15px;padding:14px 16px;cursor:pointer;width:100%;transition:background .2s}
.of-go:hover{background:#155743}
.of-note{margin:20px 0 0;font-size:13px;color:#5e6b65}
/* afspraken */
.of-prom{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.of-prom div{background:#fff;border:1px solid #e2e8e3;border-radius:18px;padding:22px}
.of-prom b{display:block;font-size:17px;color:#13221c;margin-bottom:6px}
.of-prom b::before{content:"";display:block;width:34px;height:34px;border-radius:11px;margin-bottom:14px;background:#12a15a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/17px no-repeat}
.of-prom p{margin:0;font-size:15px;line-height:1.55;color:#5e6b65}
/* faq */
.of-faq-in{max-width:820px}
.of-faq details{background:#fff;border:1px solid #e2e8e3;border-radius:16px;margin-bottom:10px;padding:0 20px}
.of-faq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-weight:750;font-size:16.5px;color:#13221c;position:relative}
.of-faq summary::-webkit-details-marker{display:none}
.of-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;background:#e4f3ea;color:#0d8a4c;display:grid;place-items:center;font-weight:800}
.of-faq details[open] summary::after{content:"–"}
.of-faq details p{margin:0 0 18px;font-size:15.5px;line-height:1.65;color:#3a4842}
/* slot */
.of-final{background:linear-gradient(135deg,#062e24,#0b4433);color:#fff;padding:60px 0}
.of-final-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.of-final h2{font-size:clamp(28px,3.4vw,40px);margin:0 0 8px;color:#fff;letter-spacing:-.025em}
.of-final p{margin:0;color:#cfe4d9;font-size:17px}
.of-final-b{display:flex;gap:10px;flex-wrap:wrap}
.of-go-l{width:auto;background:#12a15a;padding:16px 26px;font-size:16px}.of-go-l:hover{background:#0d8a4c}
.of-wa,.of-tel{display:inline-flex;align-items:center;padding:0 20px;min-height:52px;border-radius:13px;font-weight:750;text-decoration:none!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)}
.of-wa:hover,.of-tel:hover{background:rgba(255,255,255,.08)}
@media (max-width:1040px){.of-cards,.of-prom{grid-template-columns:1fr 1fr}.of-time{grid-template-columns:1fr 1fr;row-gap:30px}.of-time::before{display:none}.of-doc-grid{grid-template-columns:1fr;gap:40px}.of-doc{max-width:520px;transform:none}}
@media (max-width:620px){.of-sec{padding:52px 0}.of-cards,.of-prom,.of-time{grid-template-columns:1fr}.of-doc{padding:22px;box-shadow:0 18px 40px -30px rgba(14,59,46,.45)}.of-final-b>*{flex:1;justify-content:center}.of-lead{font-size:16px}}