/* Stiltemaker Kantoorscan - uitslag. Geladen door wp-content/novamira-sandbox/stiltemaker-kantoorscan.php */
.sm-uitslag{--t:#1a6c7a;--td:#105763;--n:#000f2b;--x:#3a3a3a;--bg:#f3f9fb;--tr:#dce9ee;font-family:Montserrat,sans-serif;color:var(--x);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:'ring kaarten' 'oordeel kaarten' 'advies advies';gap:24px 40px;align-items:start;background:var(--bg);border-radius:16px;padding:40px;margin:0 0 24px;text-align:left}
.sm-uitslag *{box-sizing:border-box}
.sm-links{grid-area:ring;display:flex;flex-direction:column;align-items:center}
.sm-ring{position:relative;width:100%;max-width:380px;aspect-ratio:1}
.sm-ring svg{width:100%;height:100%;display:block}
.sm-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.sm-mid b{font-size:clamp(40px,7vw,60px);font-weight:600;color:var(--n);line-height:1}
.sm-mid b small{font-size:.45em;font-weight:500}
.sm-mid span{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--t);margin-top:6px;text-transform:uppercase}
.sm-legenda{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:14px 0 0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--x)}
.sm-legenda i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.sm-oordeel{grid-area:oordeel;width:100%}
.sm-oordeel h3{font-size:24px;line-height:1.25;color:var(--n);margin:0 0 6px;font-weight:600}
.sm-oordeel .sub{font-size:15px;margin:0;line-height:1.55}
.sm-stap{margin-top:20px;padding:18px 20px;border:1px solid var(--t);border-radius:12px;background:#fff}
.sm-stap .k{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--t);text-transform:uppercase;margin:0 0 4px}
.sm-stap p{margin:0 0 14px;font-size:15px;line-height:1.5}
.sm-stap a.btn{display:inline-block;background:#d5af34;color:#2e4673!important;text-decoration:none;font-weight:500;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:12px 22px;border-radius:30px}
.sm-stap a.btn:hover{background:#c39d22}
.sm-mail{font-size:13px;margin:12px 0 0}
.sm-kaarten{grid-area:kaarten;display:flex;flex-direction:column;gap:14px}
.sm-kaart{background:#fff;border-radius:12px;padding:18px 20px;border-left:5px solid var(--c)}
.sm-kaart .kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sm-kaart h4{margin:0;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--n);font-weight:600}
.sm-kaart .st{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin-top:2px}
.sm-kaart .num{font-size:34px;font-weight:600;color:var(--n);line-height:1;font-variant-numeric:tabular-nums}
.sm-kaart ul{list-style:none;margin:12px 0 0;padding:0}
.sm-kaart li{display:grid;grid-template-columns:110px 1fr 34px;gap:10px;align-items:center;padding:6px 0;font-size:14px;margin:0}
.sm-kaart li .bar{height:6px;border-radius:3px;background:var(--tr);overflow:hidden}
.sm-kaart li .bar i{display:block;height:100%;width:0;background:var(--c);border-radius:3px;transition:width .9s ease}
.sm-kaart li .v{text-align:right;font-weight:600;color:var(--n);font-variant-numeric:tabular-nums}
.sm-kaart .pill{display:inline-block;font-size:11px;font-weight:600;color:#fff;background:var(--n);border-radius:20px;padding:3px 10px;margin-top:10px}
@media (max-width:820px){.sm-uitslag{grid-template-columns:1fr;grid-template-areas:'ring' 'kaarten' 'oordeel' 'advies';padding:24px 16px;gap:28px}.sm-mid span{letter-spacing:.12em;font-size:9px}.sm-ring{max-width:300px}.sm-kaart li{grid-template-columns:100px 1fr 30px}}
@media (prefers-reduced-motion:reduce){.sm-kaart li .bar i{transition:none}}

.sm-advies{grid-area:advies;border-top:1px solid var(--tr);padding-top:24px}
.sm-advies .k{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--t);text-transform:uppercase;margin:0 0 14px}
.sm-adv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sm-adv{background:#fff;border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;border:1px solid var(--tr)}
.sm-adv.eerste{border:2px solid #d5af34}
.sm-adv h5{margin:0 0 8px;font-size:16px;line-height:1.3;color:var(--n);font-weight:600}
.sm-adv p{margin:0 0 10px;font-size:14px;line-height:1.5}
.sm-adv p.waarom{color:var(--td);font-weight:500}
.sm-adv a.btn{margin-top:auto;align-self:flex-start;display:inline-block;background:#d5af34;color:#2e4673!important;text-decoration:none;font-weight:500;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:10px 18px;border-radius:30px}
.sm-adv a.btn:hover{background:#c39d22}
.sm-advies .sm-mail{margin-top:16px}
.sm-advies .sm-mail a{color:var(--t)}
@media (max-width:820px){.sm-adv-grid{grid-template-columns:1fr}}
.sm-adv.eerste{border:2px solid var(--t)}
.sm-bel{margin-top:18px;padding:18px 20px;border:2px solid #d5af34;border-radius:12px;background:#fff}
.sm-bel .k{font-size:15px;font-weight:600;color:var(--n);margin:0 0 12px;letter-spacing:0;text-transform:none}
.sm-bel p{margin:0;font-size:14px;line-height:1.5}
.sm-bel a.btn{display:inline-block;background:#d5af34;color:#2e4673!important;text-decoration:none;font-weight:500;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:12px 22px;border-radius:30px}
.sm-bel a.btn:hover{background:#c39d22}
.sm-bel .of{margin-top:10px;font-size:13px}
.sm-bel .of a{color:var(--t)}