:root{
  --concrete:#d2cdc5;
  --concrete-hi:#e3dfd8;
  --concrete-lo:#b9b3a9;
  --anthracite:#24231f;
  --anthracite-2:#302e29;
  --ink:#24231f;
  --soft:#5d5a53;
  --signal:#ff5b14;
  --signal-deep:#d9440a;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --stencil:"Big Shoulders Stencil Display","Archivo",Impact,sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
body{
  font-family:var(--sans);
  font-variation-settings:"wdth" 100;
  color:var(--ink);
  line-height:1.7;
  background-color:var(--concrete);
  background-image:
    radial-gradient(circle at 50% 50%,rgba(36,35,31,.42) 0 3.5px,rgba(36,35,31,.1) 4px,transparent 6px),
    linear-gradient(90deg,rgba(36,35,31,.07) 1px,transparent 1px),
    linear-gradient(0deg,rgba(36,35,31,.07) 1px,transparent 1px),
    var(--noise);
  background-size:240px 240px,240px 480px,240px 480px,220px 220px;
  background-position:120px 120px,0 0,0 0,0 0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
::selection{background:var(--signal);color:#fff;}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;}

.site{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px);}

.hero{padding:clamp(56px,10vw,120px) 0 clamp(40px,6vw,70px);}
.hero h1{
  margin:0;
  max-width:16ch;
  font-weight:800;
  font-variation-settings:"wdth" 125;
  font-size:clamp(2.3rem,1rem + 6vw,6rem);
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#3b3934;
  text-shadow:1px 1px 0 rgba(255,255,255,.55),-1px -1px 0 rgba(0,0,0,.28);
  hyphens:auto;
  overflow-wrap:break-word;
}

.slab{
  position:relative;
  margin:0 0 clamp(56px,8vw,96px);
  padding:clamp(26px,4.5vw,56px);
  background:var(--concrete-hi);
  box-shadow:0 12px 0 var(--concrete-lo),0 30px 40px -18px rgba(0,0,0,.35);
}
.slab::after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.35;pointer-events:none;mix-blend-mode:multiply;}
.slab > *{position:relative;z-index:1;}
.slab.dark{background:var(--anthracite);color:#ece8e1;box-shadow:0 12px 0 #12110f,0 30px 40px -18px rgba(0,0,0,.45);}
.slab.dark::after{opacity:.5;mix-blend-mode:overlay;}
.slab.left{margin-left:calc(-1 * clamp(16px,4vw,40px) - max(0px,(100vw - 1180px) / 2));padding-left:calc(clamp(26px,4.5vw,56px) + clamp(16px,4vw,40px) + max(0px,(100vw - 1180px) / 2));margin-right:14%;}
.slab.right{margin-right:calc(-1 * clamp(16px,4vw,40px) - max(0px,(100vw - 1180px) / 2));padding-right:calc(clamp(26px,4.5vw,56px) + clamp(16px,4vw,40px) + max(0px,(100vw - 1180px) / 2));margin-left:14%;}
.slab.edge::before{content:"";position:absolute;top:0;bottom:0;width:10px;background:var(--signal);z-index:2;}
.slab.left.edge::before{right:0;}
.slab.right.edge::before{left:0;}

.lead{margin:0;font-size:clamp(1.08rem,1rem + .5vw,1.3rem);line-height:1.65;max-width:62ch;}

.slab h2,.plain h2{
  margin:0 0 .7em;
  font-weight:800;
  font-variation-settings:"wdth" 125;
  font-size:clamp(1.45rem,1rem + 1.8vw,2.3rem);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:-.005em;
  hyphens:auto;
  overflow-wrap:break-word;
}
.slab.dark h2{color:#fff;}
.slab p,.plain p{margin:0 0 1em;font-size:clamp(1rem,.97rem + .2vw,1.08rem);max-width:70ch;hyphens:auto;overflow-wrap:break-word;}
.slab p:last-child,.plain p:last-child{margin-bottom:0;}
.slab.dark p{color:#d9d4cb;}

.text-link{color:inherit;font-weight:700;text-decoration:none;background:linear-gradient(var(--signal),var(--signal)) no-repeat 0 100%/100% 3px;padding-bottom:1px;transition:background-size .25s ease,color .25s ease;}
.text-link:hover,.text-link:focus-visible{background-size:100% 100%;color:#fff;}

.panels{list-style:none;margin:6px 0 30px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;counter-reset:p;}
.panels li{
  counter-increment:p;
  position:relative;
  padding:46px 24px 26px;
  background:var(--concrete-hi);
  font-size:1rem;
  line-height:1.6;
  background-image:
    radial-gradient(circle,rgba(36,35,31,.6) 0 3px,transparent 3.5px),
    radial-gradient(circle,rgba(36,35,31,.6) 0 3px,transparent 3.5px),
    radial-gradient(circle,rgba(36,35,31,.6) 0 3px,transparent 3.5px),
    radial-gradient(circle,rgba(36,35,31,.6) 0 3px,transparent 3.5px);
  background-repeat:no-repeat;
  background-size:14px 14px;
  background-position:10px 10px,calc(100% - 10px) 10px,10px calc(100% - 10px),calc(100% - 10px) calc(100% - 10px);
}
.panels li::before{content:counter(p,decimal-leading-zero);position:absolute;top:12px;left:34px;font-family:var(--stencil);font-weight:700;font-size:1.5rem;line-height:1;color:var(--signal);}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px;}
.facts p{margin:0;padding-top:16px;border-top:3px solid var(--signal);}
.facts strong{display:block;margin-bottom:6px;color:#fff;font-weight:700;font-size:1.08rem;line-height:1.4;}

.methods{width:100%;border-collapse:collapse;margin:6px 0 30px;font-size:1rem;line-height:1.5;}
.methods th{padding:14px 18px;text-align:left;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--anthracite);}
.methods td{padding:16px 18px;vertical-align:top;border-bottom:1px solid rgba(36,35,31,.16);}
.methods td:first-child{font-weight:700;font-variation-settings:"wdth" 112;white-space:nowrap;}
.methods tbody tr{transition:box-shadow .2s ease,background-color .2s ease;}
.methods tbody tr:hover{background:rgba(255,91,20,.07);box-shadow:inset 6px 0 0 var(--signal);}

.plain{margin:0 0 clamp(56px,8vw,96px);max-width:860px;padding:22px 20px;margin-left:-20px;background:var(--concrete) var(--noise);}
.plain.push{margin-left:auto;margin-right:-20px;}

.sum{display:inline-block;padding:0 8px;background:var(--signal);color:#fff;font-weight:700;white-space:nowrap;}

.tools{list-style:none;margin:6px 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 34px;}
.tools li{padding:12px 0 12px 22px;position:relative;border-bottom:1px solid rgba(236,232,225,.14);color:#d9d4cb;font-size:1rem;}
.tools li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:10px;background:var(--signal);}
.tools strong{color:#fff;}

.help{margin-top:26px;padding:18px 22px;border:2px solid var(--signal);color:#fff !important;}

.fazit{margin-bottom:0;}

.reveal{opacity:0;transition:transform 1s cubic-bezier(.16,.84,.24,1),opacity .6s ease;}
.reveal.left{transform:translateX(-90px);}
.reveal.right{transform:translateX(90px);}
.reveal.up{transform:translateY(40px);}
.reveal.in{opacity:1;transform:none !important;}

footer{margin-top:clamp(56px,8vw,96px);background:var(--anthracite);color:#a9a49a;font-size:.92rem;text-align:center;padding:30px 20px 36px;border-top:10px solid var(--signal);}
footer nav{margin:0;}
footer p{margin:.8em 0 0;}
footer .legal{max-width:640px;margin:.5em auto 0;font-size:.82rem;color:#8a857b;}
footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .2s ease,color .2s ease;}
footer a:hover{color:var(--signal);border-bottom-color:var(--signal);}
footer a[aria-current]{color:var(--signal);border-bottom-color:transparent;}

@media (max-width:900px){
  .panels{grid-template-columns:repeat(2,minmax(0,1fr));}
  .slab.left{margin-right:6%;}
  .slab.right{margin-left:6%;}
}
@media (max-width:640px){
  .panels,.facts,.tools{grid-template-columns:1fr;}
  .plain,.plain.push{margin-left:-16px;margin-right:-16px;padding:18px 16px;}
  .slab.left,.slab.right{margin-left:-16px;margin-right:-16px;padding-left:22px;padding-right:22px;}
  .slab.edge::before{width:6px;}
  .methods thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .methods,.methods tbody,.methods tr,.methods td{display:block;width:100%;}
  .methods tbody tr{padding:12px 0;border-bottom:1px solid rgba(36,35,31,.16);}
  .methods td{padding:2px 0;border:0;white-space:normal !important;}
  .methods td:nth-child(2)::before{content:attr(data-label) ": ";font-weight:700;}
  .reveal.left{transform:translateX(-40px);}
  .reveal.right{transform:translateX(40px);}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .reveal{opacity:1;transform:none;}
}

.blocks{list-style:none;margin:6px 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;}
.blocks li{position:relative;padding:24px 24px 24px 86px;min-height:96px;background:var(--concrete-hi);font-size:1rem;line-height:1.6;display:flex;align-items:center;}
.blocks svg{position:absolute;left:22px;top:50%;width:44px;height:44px;margin-top:-22px;padding:9px;background:var(--anthracite);}

.flow{list-style:none;margin:10px 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
.flow li{position:relative;padding:22px 18px;margin-right:26px;display:flex;align-items:center;min-height:96px;background:var(--anthracite);color:#fff;font-weight:700;font-size:.98rem;line-height:1.45;box-shadow:0 8px 0 #12110f;}
.flow li:last-child{margin-right:0;background:var(--signal);box-shadow:0 8px 0 var(--signal-deep);}
.flow .arr{position:absolute;right:-26px;top:50%;width:26px;margin-top:-.8em;text-align:center;font-weight:800;font-size:1.2rem;color:var(--signal);}

.faq{display:grid;gap:4px;margin-top:6px;}
.faq div{padding:22px 26px;background:var(--concrete-hi);}
.faq h3{margin:0 0 .5em;font-weight:800;font-variation-settings:"wdth" 118;font-size:1.08rem;line-height:1.3;text-transform:uppercase;}
.faq p{margin:0;}

@media (max-width:900px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;}
  .flow li:nth-child(2){margin-right:0;}
  .flow li:nth-child(2) .arr{right:auto;left:50%;top:auto;bottom:-30px;margin:0 0 0 -13px;transform:rotate(90deg);}
}
@media (max-width:640px){
  .blocks{grid-template-columns:1fr;}
  .blocks li{padding-left:80px;}
  .flow{grid-template-columns:1fr;row-gap:30px;}
  .flow li{margin-right:0;}
  .flow .arr{right:auto;left:50%;top:auto;bottom:-29px;margin:0 0 0 -13px;transform:rotate(90deg);}
  .faq div{padding:18px 16px;}
  .methods td:nth-child(3)::before{content:attr(data-label) ": ";font-weight:700;}
}