:root{
  --navy:#15282D;
  --paper:#F4F0E8;
  --petrol:#52686A;
  --copper:#B56A45;
  --line:#D8D4CB;
  --white:#FFFFFF;
  --max:1360px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--navy);
  font-family:Inter,Arial,sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
.shell{max-width:var(--max);margin:auto;padding:0 48px}
.mono{
  font-family:"IBM Plex Mono","Courier New",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase
}
.copper{color:var(--copper)}
.muted{color:var(--petrol)}
.rule{border-top:1px solid var(--line)}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:white;padding:12px 16px;z-index:99
}
.skip:focus{left:12px;top:12px}
nav{
  position:sticky;top:0;z-index:30;background:rgba(244,240,232,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)
}
.nav{
  min-height:74px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px
}
.logo{font-size:29px;font-weight:800;text-decoration:none;letter-spacing:-.045em}
.logo span{color:var(--copper)}
.links{display:flex;gap:28px;align-items:center}
.links a{text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.links .cta{border-bottom:1px solid var(--copper);padding-bottom:5px}
.hero{
  min-height:calc(100vh - 74px);display:grid;grid-template-columns:1.03fr .97fr;
  align-items:center;gap:66px;padding:74px 0 88px
}
.hero h1{
  font-size:clamp(70px,8.6vw,132px);line-height:.86;letter-spacing:-.07em;margin:17px 0 28px
}
.promise{
  font-size:clamp(31px,3.7vw,52px);line-height:1.06;letter-spacing:-.042em;
  max-width:850px;margin:0 0 28px;font-weight:400
}
.intro{font-size:18px;line-height:1.72;color:var(--petrol);max-width:700px}
.text-link{
  display:inline-flex;align-items:center;gap:18px;text-decoration:none;font-weight:700;
  margin-top:30px;padding-bottom:8px;border-bottom:2px solid var(--copper)
}
.hero-media{aspect-ratio:4/5;overflow:hidden;background:#ddd}
.hero-media img{transition:transform .8s ease}
.hero-media:hover img{transform:scale(1.015)}
section{padding:110px 0}
.grid{display:grid;grid-template-columns:220px 1fr;gap:72px}
.section-title{
  font-size:clamp(43px,5.2vw,78px);line-height:.97;letter-spacing:-.058em;
  margin:0 0 34px;max-width:980px
}
.copy{font-size:19px;line-height:1.75;color:var(--petrol);max-width:830px}
.problem-grid{
  display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:62px
}
.problem{min-height:230px;padding:28px 28px 28px 0;border-right:1px solid var(--line)}
.problem:not(:first-child){padding-left:28px}.problem:last-child{border-right:0}
.problem .nr{color:var(--copper);margin-bottom:38px}
.problem h3{font-size:24px;margin:0 0 12px;letter-spacing:-.028em}
.problem p{margin:0;color:var(--petrol)}
.feature{
  display:grid;grid-template-columns:1.08fr .92fr;min-height:620px
}
.feature.reverse{grid-template-columns:.92fr 1.08fr}
.feature.reverse .feature-copy{order:1;border-left:1px solid var(--line);border-right:0}
.feature.reverse .feature-media{order:2}
.feature-media{min-height:520px;overflow:hidden}
.feature-copy{
  padding:72px;border:1px solid var(--line);border-left:0;
  display:flex;flex-direction:column;justify-content:center
}
.feature-copy h2{font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:-.052em;margin:12px 0 28px}
.process{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);margin-top:54px}
.step{min-height:230px;padding:24px 20px 24px 0;border-right:1px solid var(--line);position:relative}
.step:not(:first-child){padding-left:20px}.step:last-child{border-right:0}
.step:before{content:"";position:absolute;top:-4px;left:0;width:8px;height:8px;background:var(--copper)}
.step:not(:first-child):before{left:20px}
.step b{display:block;font-size:28px;margin-top:38px}.step p{font-size:14px;color:var(--petrol);margin-top:14px}
.services{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.service{min-height:250px;padding:38px 44px 44px 0;border-bottom:1px solid var(--line)}
.service:nth-child(odd){border-right:1px solid var(--line)}
.service:nth-child(even){padding-left:44px}
.service h3{font-size:30px;letter-spacing:-.035em;margin:22px 0 12px}
.service p{color:var(--petrol);max-width:480px}
.image-strip{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:66px}
.image-strip figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.applications{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.application{padding:24px 20px 35px 0;border-right:1px solid var(--line)}
.application:not(:first-child){padding-left:20px}.application:last-child{border-right:0}
.application b{display:block;font-size:20px;margin-top:22px}
.application span{display:block;color:var(--petrol);font-size:14px;margin-top:6px}
.contact{background:var(--navy);color:var(--paper)}
.contact .shell{padding-top:100px;padding-bottom:100px}
.contact-grid{display:grid;grid-template-columns:220px 1fr;gap:72px}
.contact h2{
  font-size:clamp(54px,7.2vw,106px);line-height:.91;letter-spacing:-.064em;
  max-width:1050px;margin:0 0 30px
}
.contact p{font-size:18px;color:#CBD3D1;max-width:680px}
.contact .text-link{color:var(--paper)}
footer{background:var(--navy);color:var(--paper);border-top:1px solid rgba(244,240,232,.18)}
.footer{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px;padding-top:52px;padding-bottom:52px}
.footer-logo{font-size:43px;font-weight:800;letter-spacing:-.05em}.footer-logo span{color:var(--copper)}
.footer p,.footer a{font-size:14px;color:#CBD3D1;text-decoration:none}
.footer .mono{color:#91A09D}
.legal-pending{opacity:.6;pointer-events:none}
@media(max-width:980px){
  .shell{padding:0 24px}.links a:not(.cta){display:none}
  .hero,.grid,.feature,.feature.reverse,.contact-grid{grid-template-columns:1fr}
  .hero{gap:38px;padding-top:48px}.hero-media{aspect-ratio:16/10}
  .feature.reverse .feature-copy,.feature.reverse .feature-media{order:initial}
  .feature-copy,.feature.reverse .feature-copy{border:1px solid var(--line);padding:44px 28px}
  .problem-grid,.process,.applications{grid-template-columns:1fr 1fr}
  .problem,.step,.application{border-bottom:1px solid var(--line)}
  .services{grid-template-columns:1fr}.service{border-right:0!important;padding:34px 0!important}
  .footer{grid-template-columns:1fr}
}
@media(max-width:640px){
  section{padding:78px 0}
  .problem-grid,.process,.applications,.image-strip{grid-template-columns:1fr}
  .problem,.step,.application{border-right:0;padding:25px 0!important}
  .hero h1{font-size:68px}.promise{font-size:31px}
}


/* Contactformulier */
.contact-form{margin-top:46px;max-width:900px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px 30px}
.form-field{display:flex;flex-direction:column;gap:9px}
.form-field-wide{grid-column:1/-1}
.form-field label{color:#CBD3D1;font-family:"IBM Plex Mono","Courier New",monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.form-field input,.form-field textarea{width:100%;border:0;border-bottom:1px solid rgba(244,240,232,.42);border-radius:0;background:transparent;color:var(--paper);font:inherit;font-size:17px;padding:12px 0 13px;outline:none}
.form-field textarea{resize:vertical;min-height:150px;border:1px solid rgba(244,240,232,.42);padding:15px}
.form-field input:focus,.form-field textarea:focus{border-color:var(--copper)}
.consent{display:flex;align-items:flex-start;gap:12px;margin-top:25px;max-width:780px;color:#CBD3D1;font-size:13px;line-height:1.55}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--copper);flex:0 0 auto}
.consent a{color:var(--paper)}
.privacy-note{font-size:12px!important;line-height:1.6;color:#91A09D!important;margin-top:13px}
.form-actions{margin-top:27px;display:flex;align-items:center;flex-wrap:wrap;gap:24px}
.form-actions button{appearance:none;border:0;background:var(--copper);color:var(--white);padding:16px 22px;font:inherit;font-weight:700;cursor:pointer}
.form-actions button:hover{filter:brightness(1.06)}
.form-actions a{color:#CBD3D1;font-size:14px}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}.form-field-wide{grid-column:auto}.form-actions{align-items:flex-start;flex-direction:column}}