/* Desktop: ten equal viewport-height panels. Compact layouts keep all content visible. */
@media(min-width:1024px){
 html{scroll-padding-top:0}
 .screen-panel{position:relative;height:100svh;width:100%;overflow:clip;isolation:isolate}
 .screen-stage{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%) scale(var(--screen-scale,1));transform-origin:center;display:flow-root}
 #b1 .hero{height:100svh;min-height:0}
 #b1 header{top:3svh;height:70px;padding:0 22px;gap:18px}
 #b1 .hero-copy{top:29%}
 #b1 .ghost{top:17%}
 #b1 .intro{margin:23px 0 15px}
 #b1 .rule{margin:22px 0 16px}
 #b1 .postcard{bottom:15%;width:30%}
 #b1 .hero-bottom{height:65px}
 #b1 h1{font-size:clamp(40px,4.5vw,76px)}
 #b1 .promise{margin:12px 0}
 #b1 .discover{margin-top:10px}
 .bart-section .wrap{padding-top:30px;padding-bottom:30px}
 .bart-section .section-heading{margin:22px 0 24px;gap:35px}
 .bart-section h2{font-size:clamp(34px,3.6vw,58px);line-height:1.02}
 .bart-section .section-heading>p{font-size:13px;line-height:1.65}
 .configuration-image img{aspect-ratio:1.65}
 .configuration-copy{padding:18px 22px}
 .configuration-copy h3{font-size:24px;min-height:51px;margin:13px 0 10px}
 .configuration-copy p{font-size:13px;line-height:1.6;margin-bottom:12px}
 .configuration-copy .bart-text-button{padding:9px 0}
 .config-foot{padding:17px 0}
 .concept{gap:45px}
 .concept h2{margin:20px 0}
 .concept p{font-size:14px}
 .concept-image{max-height:70svh}
 .concept-image img{max-height:70svh;object-fit:contain}
 #b5 .materials{padding:25px 5% 0;margin:0 auto}
 #b5 header{margin:22px 0 25px}
 #b5 h1{font-size:clamp(40px,4.2vw,65px)}
 #b5 .tile{min-height:0}
 #b5 .tile img{max-height:175px}
 #b5 .details h2{font-size:40px}
 #b5 .details p{font-size:13px;line-height:1.65}
 #b5 footer{padding:18px 0;margin-top:22px}
 #b3 .technology{padding:22px 5% 0}
 #b3 .composition{height:490px;margin-top:10px}
 #b3 .collage{height:480px}
 #b3 .copy{top:35px;padding:35px 38px 28px}
 #b3 h1{font-size:44px}
 #b3 .copy p{font-size:14px;line-height:1.7}
 #b3 .signature{margin-top:26px}
 #b3 .technical-features{margin-top:8px;padding:19px 0;gap:20px}
 #b3 .technical-features h3{margin:9px 0 6px;font-size:16px}
 #b3 .bottom{padding:15px 0}
 #b2 .fractions{padding:28px 5% 24px;gap:5%;align-items:center}
 #b2 h1{font-size:48px;margin:18px 0}
 #b2 .lead{font-size:13px;line-height:1.65;margin-bottom:16px}
 #b2 .part{padding:9px 0}
 #b2 .drawing{max-height:460px}
 #b2 .drawing>img{max-height:460px;object-fit:contain}
 #b2 .info{padding:20px}
 #b2 .ribbon{padding:18px 5%;gap:20px}
 #b2 .ribbon span{margin-bottom:7px}
 .project-gallery{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:195px 195px;gap:12px;margin-bottom:20px}
 .project-gallery>.project-main{grid-column:1/3;grid-row:1/3}
 .project-gallery>.zoom-image:nth-child(2){grid-column:3;grid-row:1}
 .project-gallery>.zoom-image:nth-child(3){grid-column:3;grid-row:2}
 .project-gallery>.zoom-image:last-child{grid-column:2;grid-row:2;height:auto;z-index:1;width:70%;height:85%;align-self:end;justify-self:end;box-shadow:0 10px 30px #0004;border:4px solid #f3f3eb}
 .technical-data .table-scroll{margin:17px 0 21px}
 .technical-data caption{margin-bottom:10px}
 .technical-data th,.technical-data td{padding:10px 15px;font-size:12px}
 .technical-data .drawings{grid-template-columns:1fr 1fr;gap:25px}
 .technical-data .technical-drawing{height:185px}
 .technical-data .technical-drawing img{padding:8px 8px 34px}
 .technical-data .zoom-image>span{padding:10px 13px;font-size:8px}
 .technical-data .drawings h3{font-size:19px;margin:12px 0 6px}
 .technical-data .drawings p{font-size:12px;margin:0;line-height:1.6}
 .technical-data .data-note{margin:17px 0 0;padding-top:12px;font-size:10px}
 #b4 .section{padding:24px 5%}
 #b4 .value-intro{margin-bottom:18px;gap:10px 45px}
 #b4 .value-intro h2{font-size:43px}
 #b4 .value-intro>p{font-size:12px;line-height:1.6}
 #b4 .roi-controls,#b4 .roi-output{padding:20px}
 #b4 .roi-controls label{margin-top:12px}
 #b4 .test-explainer{padding:13px;margin-top:12px}
 #b4 .test-explainer p{font-size:10px;line-height:1.5}
 #b4 .number-control input,#b4 .compound-input input,#b4 select{padding-top:8px;padding-bottom:8px}
 #b4 .roi-output .scenario-pie{padding:14px 0;margin:12px 0}
 #b4 .roi-breakdown p{margin:7px 0;padding-bottom:7px}
 #b4 .roi-warning{font-size:9px;line-height:1.5}
 #b4 .investment-note{margin-top:16px;padding:17px 20px;grid-template-columns:75px .9fr 1.5fr;gap:20px}
 #b4 .investment-copy{grid-column:auto}
 #b4 .investment-note h3{font-size:22px;margin-top:8px}
 #b4 .investment-copy p{font-size:9px;line-height:1.5;margin-bottom:6px}
 #b4 .investment-copy small{font-size:8px;line-height:1.4}
 #b7 .case{padding:26px 5%;gap:7%;grid-template-columns:.9fr 1.1fr;align-items:center}
 #b7 .case-form{padding:18px;gap:10px 14px}
 #b7 .case-form>label{gap:5px}
 #b7 .case-form input:not([type=checkbox]),#b7 .case-form textarea,#b7 .case-form select{padding:8px 10px;font-size:12px}
 #b7 .case-form textarea{min-height:48px;resize:none;line-height:1.4}
 #b7 .material-check{padding:7px}
 #b7 .form-bottom{gap:15px}
 #b7 .form-bottom p{font-size:9px;line-height:1.5}
}
@media(min-width:1024px){
 #b5 header{padding:0}
 #b5 .tile img{max-height:none}
 #b6 .configuration-image img{aspect-ratio:1.9}
 #b6 .configuration-copy h3{min-height:46px;font-size:23px}
 #b2 .drawing{width:min(100%,350px);margin:12px auto 0;max-height:none}
 #b2 .drawing>img{max-height:none}
 #b2 .info{min-height:120px;margin:12px 0;padding:16px 20px}
 #b2 .info h2{font-size:22px}
 #b2 .visual{padding:20px}
 #b2 h1{font-size:44px;margin:12px 0}
 #b2 .lead{margin:10px 0 12px}
 #b2 .cta{margin-top:16px}
 #b4 .section{padding:18px 5%}
 #b4 .value-intro{gap:8px 45px;margin-bottom:14px}
 #b4 .value-intro h2{font-size:38px}
 #b4 .roi-controls,#b4 .roi-output{padding:16px}
 #b4 .roi-title{padding-bottom:10px;margin-bottom:12px}
 #b4 .roi-controls label{margin-top:10px;gap:5px}
 #b4 .roi-controls select,#b4 .number-control input,#b4 .compound-input input{padding:7px 10px}
 #b4 .result-totals{margin-top:10px}
 #b4 .result-totals article{padding:10px 12px}
 #b4 .result-totals strong{font-size:28px;margin-top:7px}
 #b4 .roi-output .scenario-pie{padding:8px 0;margin:8px 0}
 #b4 .pie-chart{width:76px}
 #b4 .pie-chart:before{inset:9px}
 #b4 .pie-chart b{font-size:23px}
 #b4 .roi-breakdown p{padding:5px 0;margin:0;font-size:10px}
 #b4 .roi-explanation{padding:8px 10px;margin:8px 0;font-size:11px}
 #b4 .roi-warning{margin:8px 0 12px;font-size:10px;line-height:1.5}
 #b4 .roi-output [data-roi-cta]{padding:11px 14px;font-size:11px}
 #b4 .test-explainer{padding:11px}
 #b4 .investment-note{padding:13px 17px;margin-top:12px}
}
@media(min-width:1024px){
 #b3 .copy{left:0;top:32px;width:44%;padding:32px}
 #b3 .copy h1{font-size:40px}
 #b3 .collage{left:48%;height:480px}
 #b3 .machine{left:0;top:0;width:61%}
 #b3 .drive{right:0;top:20px;width:35%;height:220px}
 #b3 .control{right:0;top:250px;width:39%;height:220px}
 #b3 .installation{left:0;bottom:0;width:62%;height:220px}
}
/* Each following desktop panel slides over the previous one. */
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
 body>.site-block{position:sticky;top:0;z-index:var(--stack-order);box-shadow:0 -12px 35px #00000018}
 body>#b7{position:relative}
}
#site-masthead{position:relative;z-index:1000}
/* Match the concept visual to the full adjacent copy, from status label to CTA. */
@media(min-width:1024px){
 #containerslede .concept{align-items:stretch}
 #containerslede .concept-copy{display:flex;flex-direction:column;align-items:flex-start}
 #containerslede .concept-copy .bart-button{margin-top:15px}
 #containerslede .concept-image{align-self:stretch;height:auto;min-height:0;max-height:none;width:100%}
 #containerslede .concept-image img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;padding:16px 16px 48px}
}
@media(min-width:1024px){
 #b3 .machine{height:calc(100% - 230px);aspect-ratio:auto}
 #b3 .machine .caption{font-size:9px;line-height:1.35;padding-right:26px}
}
@media(min-width:1024px){
 #b3 .machine{z-index:7}
 #b3 .machine .caption{z-index:2;background:#0b3027e6;padding:10px 12px;font-size:10px;letter-spacing:.3px}
}

/* Leave a little scroll distance before the next panel starts covering this one. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  body > .site-block:not(#b7) { margin-bottom: clamp(80px, 14svh, 128px); }
}
.screen-start { display: block; height: 0; position: relative; }

#technische-gegevens .drawings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
#technische-gegevens .technical-photo {
  min-width: 0;
  aspect-ratio: 1.75;
  padding: 10px;
  border: 1px solid #d4ddca;
  background: white;
}
#technische-gegevens .technical-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 550px) {
  #technische-gegevens .drawings { grid-template-columns: 1fr; }
}

/* Let the contact form use its natural height at full text size. */
#b7 .case {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 96px 5% 24px;
}
#b7 .case-intro .index, #b7 .case-intro > p,
#b7 .case-form label > span, #b7 .material-checklist legend,
#b7 .material-checklist small, #b7 .case-form select,
#b7 .case-form input:not([type=checkbox]), #b7 .case-form textarea,
#b7 .case-form input::placeholder, #b7 .case-form textarea::placeholder,
#b7 .form-bottom p, #b7 .form-bottom button, #b7 .back,
#b7 #summary dl, #b7 .demo { font-size: 14px; }
#b7 .case-form .material-check > span { font-size: 14px !important; }
#b7 .case-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
}
#b7 .case-form > label { gap: 4px; min-width: 0; }
#b7 .case-form label > span, #b7 .material-checklist legend {
  letter-spacing: .45px;
  line-height: 1.3;
}
#b7 .material-checklist small { color: #52644a; }
#b7 .case-form input::placeholder, #b7 .case-form textarea::placeholder {
  color: #65745c;
}
#b7 .form-bottom p { color: #52644a; max-width: 42ch; }
#b7 .form-bottom button { padding: 10px 14px; white-space: normal; }
#b7 .case-form input:not([type=checkbox]), #b7 .case-form select, #b7 .case-form textarea {
  padding: 7px 9px;
}
#b7 .case-form textarea { min-height: 56px; resize: vertical; }
#b7 .material-checklist legend { margin-bottom: 5px; }
#b7 .material-check-grid { gap: 5px; }
#b7 .material-check { padding: 5px 7px; min-width: 0; }
@media (min-width: 1024px) {
  #b7 .case {
    grid-template-columns: minmax(250px, .75fr) minmax(0, 2fr);
    align-items: start;
    gap: 24px;
    padding: max(92px, calc(3svh + 66px)) 4% 20px max(62px, 5%);
  }
  #b7 .case-intro h2 { font-size: clamp(34px, 3.25vw, 52px); }
  #b7 .case-form { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px; }
  #b7 .case-form > label.wide { grid-column: span 2; }
  #b7 .material-check-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 450px) {
  #b7 .case-form { grid-template-columns: minmax(0, 1fr); }
  #b7 .material-checklist small { display: block; margin-left: 0; }
}

/* The calculator and contact form fill the same frame as the other panels. */
@media screen and (min-width: 1024px) {
  body > :is(#b4, #b7).site-block {
    block-size: 100svh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  #b7.site-block > main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
  }
  #b7.site-block .case { width: 100%; }
  #b7.site-block > .footer { flex: 0 0 auto; }
}