/* ============================================================
   Vernast — Kelderbekuiping vs. kelderdrainage (vergelijking)
   Aanvulling op kelder.css — zelfde huisstijl, extra componenten.
   Twee technieken: BEKUIPING = rood (tegenhouden), DRAINAGE = ink/slate (afvoeren)
   ============================================================ */
:root{
  --teq-keep:#9e000f;      /* bekuiping */
  --teq-keep-soft:#fbe9ea;
  --teq-drain:#1f2a37;     /* drainage */
  --teq-drain-soft:#eef1f4;
}

/* hero subtitle line for dual concept */
.hero .dual-lead{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;}
.hero .dual-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:9999px;padding:9px 18px;font-size:14px;font-weight:700;}
.hero .dual-pill svg{width:17px;height:17px;}

/* hero brand-image background — let the dark red artwork show, drop kelder.css gradient */
.hero{background:#5e000a url('hero-bg-red.png') center/cover no-repeat !important;}
.hero::before{background:linear-gradient(100deg,rgba(46,4,9,.55) 0%,rgba(46,4,9,.28) 45%,rgba(46,4,9,0) 78%) !important;}
.hero::after{display:none !important;}

/* ---------- PRINCIPE intro (two philosophies) ---------- */
.principe-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:54px;}
.principe{position:relative;border-radius:var(--radius-lg);padding:38px 34px;overflow:hidden;color:#fff;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;}
.principe.keep{background:linear-gradient(150deg,var(--red-dark),var(--red));}
.principe.drain{background:linear-gradient(150deg,#0f1722,var(--teq-drain));}
.principe .pico{position:absolute;top:30px;right:30px;width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;}
.principe .pico svg{width:28px;height:28px;color:#fff;}
.principe .ptag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:10px;}
.principe h3{color:#fff;font-size:28px;margin:0 0 12px;}
.principe p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.6;}
.principe .verb{font-family:var(--serif);font-style:italic;font-size:19px;color:#fff;margin-bottom:6px;}

/* ---------- DUAL technique deep cards ---------- */
.tech-section{position:relative;background:#6a000a url('tech-bg-red.png') center/cover no-repeat;}
.shead.on-red h2{color:#fff;}
.shead.on-red p{color:rgba(255,255,255,.85);}
.shead.on-red .eyebrow{color:#ffb3ac;}
.shead.on-red .eyebrow::before{background:#ffb3ac;}
.tech-section .price-note{color:rgba(255,255,255,.82);}
.tech-section .faq-aside .eyebrow{color:#ffb3ac;}
.tech-section .faq-aside .eyebrow::before{background:#ffb3ac;}
.tech-section .faq-aside h2{color:#fff;}
.tech-section .faq-item{background:#fff;}

/* ---------- CTA — red brand background variant (comparison page only) ---------- */
.cta{background:#6a000a url('tech-bg-red.png') center/cover no-repeat;}
.cta::before{background:linear-gradient(95deg, rgba(28,4,8,.62) 0%, rgba(28,4,8,.18) 45%, rgba(28,4,8,0) 65%);}
.cform-shell,.cform{background:rgba(14,3,5,.64);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);box-shadow:0 34px 80px rgba(0,0,0,.42);}
.cform input,.cform select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);}
.tech{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px;}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:0;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.tcard .thead{padding:28px 30px;color:#fff;}
.tcard.keep .thead{background:var(--teq-keep);}
.tcard.drain .thead{background:var(--teq-keep);}
.tcard .thead .lbl{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;}
.tcard .thead h3{color:#fff;font-size:26px;margin:8px 0 6px;}
.tcard .thead p{font-size:14.5px;color:rgba(255,255,255,.85);line-height:1.5;}
.tcard .tbody{padding:28px 30px;}
.tcard .tbody img,.tcard .tbody image-slot{width:100%;height:380px;border-radius:var(--radius);margin-bottom:24px;display:block;}
@media (max-width:760px){.tcard .tbody img,.tcard .tbody image-slot{height:300px;}}
.tcard h4{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);margin:0 0 14px;}
.tcard .steps{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:13px;counter-reset:s;}
.tcard .steps li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--text);line-height:1.5;}
.tcard .steps li::before{counter-increment:s;content:counter(s);width:24px;height:24px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;margin-top:1px;}
.tcard.keep .steps li::before{background:var(--teq-keep);}
.tcard.drain .steps li::before{background:var(--teq-keep);}
.tcard .ideaal{border-radius:var(--radius);padding:18px 20px;font-size:14px;line-height:1.55;}
.tcard .ideaal{background:#e7f6ec;color:#155f37;border:1px solid rgba(10,124,62,.18);}
.tcard.keep .ideaal,.tcard.drain .ideaal{background:#e7f6ec;color:#155f37;}
.tcard .ideaal strong{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;color:#0a7c3e;}

/* ---------- COMPARISON TABLE ---------- */
.cmp{margin-top:54px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);}
.cmp table{width:100%;border-collapse:collapse;}
.cmp th,.cmp td{padding:20px 24px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.cmp thead th{background:var(--bg-soft);font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--ink);}
.cmp thead th:first-child{font-weight:700;color:var(--text-mid);}
.cmp thead .h-keep{color:var(--teq-keep);}
.cmp thead .h-drain{color:var(--teq-drain);}
.cmp tbody th{font-weight:700;font-size:14.5px;color:var(--ink);width:24%;background:#fff;}
.cmp tbody td{font-size:14.5px;color:var(--text-mid);line-height:1.55;width:38%;}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0;}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background:var(--bg-soft);}
.cmp .yes{color:#0a7c3e;font-weight:700;}
.cmp .mid{color:#b06a00;font-weight:700;}
.cmp .col-keep{border-left:3px solid var(--teq-keep-soft);}
.cmp .col-drain{border-left:3px solid var(--teq-drain-soft);}
@media (max-width:760px){
  .cmp{overflow-x:auto;}
  .cmp table{min-width:640px;}
}

/* ---------- DECISION / scenario ---------- */
.scen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:54px;}
.scen{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;display:flex;gap:18px;align-items:flex-start;}
.scen .badge{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border-radius:9999px;color:#fff;white-space:nowrap;}
.scen.keep .badge{background:var(--teq-keep);}
.scen.drain .badge{background:var(--teq-drain);}
.scen .txt h3{font-size:17px;margin:0 0 7px;}
.scen .txt p{font-size:14.5px;color:var(--text-mid);line-height:1.55;}
.combi-note{margin-top:30px;background:var(--bg-soft);border:1px dashed rgba(0,0,0,.18);border-radius:var(--radius);padding:22px 26px;display:flex;gap:16px;align-items:flex-start;}
.combi-note .i{flex:none;width:42px;height:42px;border-radius:11px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.combi-note .i svg{width:22px;height:22px;}
.combi-note h3{font-size:17px;margin:0 0 6px;}
.combi-note p{font-size:14.5px;color:var(--text-mid);line-height:1.6;}

/* ---------- TECHNISCHE SPECS ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px;}
.spec{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;}
.spec .si{width:46px;height:46px;border-radius:12px;background:var(--red-soft);color:var(--red);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;}
.spec .si svg{width:23px;height:23px;}
.spec h3{font-size:16.5px;margin:0 0 9px;}
.spec p{font-size:14px;color:var(--text-mid);line-height:1.6;}
.spec .meta{margin-top:14px;display:flex;flex-direction:column;gap:7px;}
.spec .meta span{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;border-top:1px solid var(--line);padding-top:7px;}
.spec .meta span b{color:var(--ink);font-weight:700;}

@media (max-width:1080px){
  .principe-grid,.tech,.scen-grid{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:1fr;}
}

/* ---------- KOSTPRIJS factoren ---------- */
.factor-card{margin-top:46px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;}
.factor{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center;padding:24px 32px;border-bottom:1px solid var(--line);transition:background .18s;}
.factor:last-child{border-bottom:0;}
.factor:hover{background:var(--bg-soft);}
.factor .fname{display:flex;align-items:center;gap:15px;}
.factor .fico{width:46px;height:46px;border-radius:12px;background:var(--red-soft);color:var(--red);display:inline-flex;align-items:center;justify-content:center;flex:none;}
.factor .fico svg{width:23px;height:23px;}
.factor .fname b{font-size:17.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.factor .fdesc{font-size:15.5px;color:var(--text-mid);line-height:1.55;}
.factor .fdesc em{font-style:normal;color:var(--red);font-weight:700;}
@media (max-width:760px){
  .factor{grid-template-columns:1fr;gap:10px;padding:22px 24px;}
}

/* ---------- NUANCE binnen/buiten ---------- */
.nuance-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px;}
.ncard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;}
.ncard .nhead{display:flex;gap:16px;align-items:flex-start;padding:28px 30px 24px;border-bottom:1px solid var(--line);position:relative;}
.ncard .nico{width:52px;height:52px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.ncard.inside .nico{background:var(--teq-keep);box-shadow:0 8px 20px rgba(158,0,15,.28);}
.ncard.outside .nico{background:var(--teq-drain);box-shadow:0 8px 20px rgba(31,42,55,.28);}
.ncard .nico svg{width:26px;height:26px;}
.ncard .nhead .ntag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:9999px;margin-bottom:9px;}
.ncard.inside .ntag{background:var(--teq-keep-soft);color:var(--teq-keep);}
.ncard.outside .ntag{background:var(--teq-drain-soft);color:var(--teq-drain);}
.ncard .nhead h3{font-size:21px;margin:0 0 6px;}
.ncard .nhead .nsub{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--text-mid);line-height:1.4;}
.ncard ul{list-style:none;margin:0;padding:24px 30px 30px;display:grid;gap:15px;}
.ncard li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--text);line-height:1.5;}
.ncard li .nb{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
.ncard.inside li .nb{background:var(--teq-keep-soft);color:var(--teq-keep);}
.ncard.outside li .nb{background:var(--teq-drain-soft);color:var(--teq-drain);}
.ncard li .nb svg{width:13px;height:13px;}
@media (max-width:1080px){
  .nuance-grid{grid-template-columns:1fr;}
}