/* Kwant Software · verfijning en inhoudspagina’s · oktober 2026 */
.skip-link { position:fixed; top:12px; left:16px; z-index:100; padding:12px 20px; background:var(--accent); color:var(--inkt); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.studio { --schaduw:0 6px 22px rgba(14,42,45,.045); }
.studio .kop { box-shadow:none; }
.voet-raster>div:has(>h4)>ul:has(a[href="/oplossingen.html"]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;align-items:start}
.voet-raster>div:has(>h4)>ul:has(a[href="/oplossingen.html"])>li{margin:0;min-width:0}
.voet-raster>div:has(>h4)>ul:has(a[href="/oplossingen.html"]) a{overflow-wrap:anywhere}
.studio .app-kaart .soort{background:var(--diep);color:var(--licht);border:1px solid var(--diep);padding:9px 13px;font-size:12px;font-weight:600;box-shadow:0 3px 10px #08242718;line-height:1.4;max-width:calc(100% - 36px);box-sizing:border-box}
.studio .app-kaart .soort i{background:var(--accent);flex:none}
.studio .portfolio-tag{max-width:100%;box-sizing:border-box}
.studio .app-kaart .soort-klant,.studio .app-kaart .soort-praktijk{background:var(--accent);color:var(--accent-tekst);border-color:var(--accent)}
.studio .app-kaart .soort-klant i,.studio .app-kaart .soort-praktijk i{background:var(--diep)}
@media(max-width:760px){
 .studio .project-card-list .app-kaart-beeld{display:flex;flex-direction:column;align-items:flex-start;padding:0;background:none}
 .studio .project-card-list .app-kaart-beeld .soort{position:static;margin:16px;max-width:calc(100% - 32px);padding:10px 14px;border-radius:6px}
 .studio .project-card-list .app-kaart-beeld img{display:block;width:100%;height:auto;margin:0;padding:26px 6px;box-sizing:border-box;background:radial-gradient(ellipse 80% 70% at 50% 100%,rgba(31,107,112,.22),transparent 70%),linear-gradient(160deg,var(--tint),var(--licht))}
}
.studio .kop-menu a[aria-current=page] { color:var(--accent); }
.studio .knop { border-radius:8px; box-shadow:none; }
.studio .knop:hover { transform:translateY(-2px); }
.studio .kop-actie { font-size:14px; }
.studio .code-label { border:0; background:none; padding:0; border-radius:0; }
.studio .gloed { opacity:.08!important; }
.studio .pijler, .studio .app-kaart, .studio .model, .studio .over-kaart { border-radius:14px; box-shadow:none; }
.studio .sectie { padding-block:80px; }
.studio .kop-sectie { margin-bottom:40px; }
.studio .pijler-nr { display:none; }
.studio .kop-menu { gap:26px; }
.eyebrow { display:block; font:600 12px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--zacht); }
.donker .eyebrow { color:var(--accent-2); }
.text-link { display:inline-flex; align-items:center; gap:12px; font-weight:650; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:5px; width:fit-content; }
.studio-hero { padding:76px 0 0; }
.studio-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.studio-hero h1 { font-size:clamp(40px,4.5vw,65px); line-height:1.08; font-stretch:100%; margin:22px 0; letter-spacing:-.045em; }
.studio-hero h1 em { color:var(--accent); font-style:normal; }
.studio-hero-grid>div>p { font-size:18px; max-width:510px; color:var(--op-donker-zacht); line-height:1.75; }
.studio-hero .held-acties { margin-top:28px; align-items:center; gap:24px; }
.studio-hero .hero-link { text-decoration:none; font-size:15px; }
.hero-proof { display:flex; gap:20px; flex-wrap:wrap; padding:0; margin:26px 0 0; list-style:none; color:var(--accent-2); font-size:12px; }
.hero-proof li:before { content:'✓'; padding-right:7px; }
.hero-project { background:#DCE8E2; border-radius:16px; display:block; overflow:hidden; text-decoration:none; color:var(--inkt)!important; transition:transform .25s; }
.hero-project:hover { transform:translateY(-4px); }
.hero-project-top { display:flex; justify-content:space-between; padding:24px 26px 0; font:500 11px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.03em; }
.hero-project img { width:100%; margin:6px 0; }
.hero-project-bottom { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:0 26px 26px; }
.hero-project-bottom strong { display:block; font-size:16px; }
.hero-project-bottom div>span { font-size:13px; color:var(--zacht); }
.project-tag { border:1px solid #B7C9C0; padding:5px 9px; border-radius:5px; font-size:11px; white-space:nowrap; }
.hero-bottom { margin-top:64px; padding-block:22px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--lijn-donker); color:var(--accent-2); font-size:12px; }
.studio-feature { padding:88px 0; background:var(--kaart); border-bottom:1px solid var(--lijn); }
.feature-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:center; }
.feature-visual { background:#E8EEE8; border-radius:12px; padding:26px 12px 8px; }
.feature-visual>.eyebrow { padding-inline:14px; }
.feature-copy { display:grid; gap:22px; }
.feature-copy h2 { font-size:clamp(30px,3.1vw,43px); }
.feature-copy>p { color:var(--zacht); }
.studio-list { padding:0; margin:0; list-style:none; font-size:14px; }
.studio-list li { padding:10px 0; border-bottom:1px solid var(--lijn); }
.studio-list li:before { content:'✓'; color:var(--gloed); margin-right:10px; }
.studio-section-head { display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:end; margin-bottom:42px; }
.studio-section-head h2 { margin-top:16px; font-size:clamp(30px,3.5vw,46px); }
.studio-section-head>p,.studio-section-head>div>p { color:var(--zacht); max-width:460px; }
.studio-section-head>div>p+p { margin-top:18px; }
.studio-section-head .text-link { margin-top:22px; }
.problem-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--lijn); }
.problem-grid article { padding:28px 24px 0 0; }
.problem-grid h3 { font-size:20px; margin:20px 0 12px; }
.problem-grid p,.solution-grid p,.studio-steps p { font-size:15px; color:var(--zacht); }
.solution-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.solution-grid article { border-top:1px solid #CBC3B2; padding-top:22px; }
.solution-grid h3 { margin:18px 0 12px; font-size:25px; }
.studio-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; list-style:none; gap:30px; }
.studio-steps li { border-top:2px solid var(--accent); padding-top:22px; }
.studio-steps h3 { margin:18px 0 12px; font-size:20px; }
.studio-personal { padding:80px 0; }
.studio-personal h2 { margin:20px 0; max-width:850px; }
.studio-personal p { max-width:670px; color:var(--op-donker-zacht); margin-bottom:28px; }
.studio-cta { background:#E7DAB8; padding:64px 0; }
.studio-cta>.container { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.studio-cta h2 { margin:14px 0 20px; font-size:clamp(30px,3.8vw,48px); }
.studio-cta p { max-width:590px; color:var(--zacht); }
.studio-cta .knop { flex-shrink:0; background:var(--diep); color:white; }
.studio-intro { padding:36px 0 64px; }
.breadcrumb { display:flex; gap:12px; font-size:12px; margin-bottom:40px; color:var(--op-donker-zacht); }
.studio-intro h1 { font-size:clamp(38px,5vw,64px); margin:20px 0; max-width:960px; font-stretch:100%; }
.studio-intro>.container>p { max-width:700px; font-size:19px; color:var(--op-donker-zacht); }
.studio-faq { max-width:850px; }
.studio-faq h2 { margin:16px 0 32px; }
.studio-faq details { border-top:1px solid var(--lijn); padding:22px 0; }
.studio-faq summary { cursor:pointer; font-weight:650; }
.studio-faq details p { margin-top:15px; color:var(--zacht); }
.studio .cb-kaart { max-width:1100px; border-radius:10px; padding:16px 20px; box-shadow:0 8px 30px #0003; }
.studio .cb-intro { font-size:13px; }
.studio .cookiebalk { padding-bottom:12px; }
.case-detail { padding:22px 0; border-bottom:1px solid var(--lijn); }
.case-detail summary { font:700 23px/1.4 var(--kop); cursor:pointer; }
.case-detail[open] summary { margin-bottom:16px; }
.studio .stappen~.veeg-hint { display:none; }
@media(max-width:1000px) {
 .studio-hero-grid { gap:32px; }
 .hero-project-bottom { flex-wrap:wrap; }
 .feature-grid { gap:36px; }
 .problem-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .studio-section-head { gap:36px; }
}
@media(max-width:760px) {
 .studio-hero { padding-top:40px; }
 .studio-hero-grid,.feature-grid,.studio-section-head { grid-template-columns:1fr; gap:30px; }
 .studio-hero h1 { font-size:clamp(36px,9.2vw,54px); }
 .studio-hero-grid>div>p { font-size:16px; }
 .studio-hero .held-acties { flex-direction:row; gap:20px; }
 .studio-hero .held-acties .knop { width:auto; padding-inline:16px; }
 .studio-hero .hero-link { font-size:13px; }
 .hero-proof { margin-top:20px; gap:8px 16px; font-size:11px; }
 .hero-project-top { padding:20px 20px 0; }
 .hero-project-bottom { padding:0 20px 20px; }
 .hero-bottom { margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:11px; }
 .studio .sectie,.studio-feature,.studio-personal { padding-block:52px; }
 .solution-grid { grid-template-columns:1fr; gap:26px; }
 .studio-steps { grid-template-columns:1fr 1fr; gap:26px; }
 .studio-section-head { margin-bottom:28px; }
 .studio-cta { padding:48px 0; }
 .studio-cta>.container { flex-direction:column; align-items:flex-start; gap:24px; }
 .studio-intro { padding-block:24px 40px; }
 .studio-intro>.container>p { font-size:17px; }
 .studio .troeven { display:grid; grid-template-columns:1fr 1fr; }
 .studio .stappen { display:grid; grid-template-columns:1fr; overflow:visible; }
 .studio .stap { min-width:0; }
 .studio .werkwijze .veeg-hint { display:none; }
}
@media(max-width:370px) {
 .studio-hero .held-acties { flex-direction:column; align-items:stretch; }
 .studio-hero .hero-link { text-align:center; }
 .problem-grid,.studio-steps { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
 .studio .knop,.hero-project { transition:none; }
 .studio .knop:hover,.hero-project:hover { transform:none; }
}
/* Matching comparison rows keep both purchase and rental cards balanced. */
@media (min-width: 961px) {
  .studio .modellen { grid-template-rows: auto repeat(6, auto) auto; row-gap: 18px; }
  .studio .modellen > .model { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 18px; border-width: 2px; }
  .studio .model > .specs { grid-row: span 6; grid-template-rows: subgrid; row-gap: 18px; }
  .studio .model .specs > div { align-content: start; }
  .studio .model > .knop { align-self: end; }
}
/* Three separate services: build, ongoing care and new functionality. */
.service-offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:0 auto; }
.service-offers .model { padding:30px 26px; box-shadow:none; border-radius:14px; }
.service-offers .model-kop { flex-direction:column-reverse; gap:18px; }
.service-offers .model h3 { font-size:27px; line-height:1.15; }
.service-offers .specs > div { display:block; }
.service-offers .specs dd { margin-top:7px; font-weight:500; }
.service-offers .knop { white-space:normal; text-align:center; }
@media(min-width:1101px) {
 .service-offers { grid-template-rows:auto repeat(4,auto) auto; row-gap:22px; }
 .service-offers > .model { display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:22px; }
 .service-offers .specs { grid-row:span 4; grid-template-rows:subgrid; row-gap:22px; }
 .service-offers .model > .knop { align-self:end; }
}
@media(max-width:1100px) {
 .service-offers { grid-template-columns:1fr; max-width:680px; }
 .service-offers .model-kop { flex-direction:row; }
 .service-offers .specs { gap:22px; }
}
@media(max-width:480px) { .service-offers .model { padding:26px 22px; } .service-offers .model h3 { font-size:25px; } .service-offers .model-kop { flex-direction:column-reverse; } }
/* Two ways to become a customer; ongoing care and enhancements follow below. */
.service-offers-main,.service-offers-support { grid-template-columns:repeat(2,minmax(0,1fr)); }
.service-support-heading { margin-top:72px; }
@media(min-width:1101px) {
 .service-offers-main { grid-template-rows:auto repeat(8,auto) auto; }
 .service-offers-main > .model { grid-row:span 10; }
 .studio .service-offers-main .model > .specs { grid-row:span 8; }
 .service-offers-main .model h3 { font-size:32px; }
 .service-offers-support .model h3 { font-size:28px; }
}
@media(max-width:1100px) { .service-offers-main,.service-offers-support { grid-template-columns:1fr; } }
@media(min-width:1101px) {
 .service-offers .model-kop { display:grid; grid-template-columns:1fr; grid-template-rows:50px 1fr; justify-content:stretch; align-content:start; }
 .service-offers .model-kop > .pijler-ico { grid-row:1; }
 .service-offers .model-kop > div { grid-row:2; }
 .service-offers .model h3 { min-height:2.3em; }
}


/* Twijfelt u? Slotzin onder de twee formulekaarten op werkwijze.html (19 oktober 2026). */
.formule-twijfel { margin:26px auto 0; max-width:760px; text-align:center; font-size:16px; color:var(--zacht); }
.formule-twijfel b { color:var(--inkt); }
/* A tailored proposal first, followed by hosting and additional features. */
.service-offers-general { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(min-width:1101px) {
 .studio .service-offers-general .model > .specs { grid-row:span 4; }
}
@media(max-width:1100px) { .service-offers-general { grid-template-columns:1fr; } }
@media(min-width:1101px) {
 .service-offers-general .model > .knop { align-self:stretch; margin-top:0; display:flex; align-items:center; justify-content:center; }
}

/* Four service families: balanced pairs on wide screens, one column on mobile. */
@media (min-width:1101px) { .studio .pijlers-platforms { grid-template-columns:repeat(2,minmax(0,1fr)); } }