/* Robx – robx.nl. Masterkleuren: lime #E0E721, antraciet #3F4444, grijs #B2B4B2, wit, tint #F3F4F3. */
@font-face{font-family:Inter;src:url(../fonts/inter-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--lime:#E0E721;--antraciet:#3F4444;--grijs:#B2B4B2;--wit:#FFFFFF;--tint:#F3F4F3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Inter,system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--antraciet);background:var(--wit)}
img{max-width:100%;height:auto;display:block}
a{color:var(--antraciet);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--wit);padding:8px 12px;z-index:10}
.top{border-bottom:3px solid var(--lime);background:var(--wit)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.top__logo img{height:64px;width:auto}
.top ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.top nav a{text-decoration:none;font-weight:600}
.top nav a:hover{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px}
.intro{padding-top:72px;padding-bottom:40px}
h1{font-size:clamp(2rem,4vw,2.75rem);line-height:1.15;margin:0 0 16px;font-weight:800}
h2{font-size:1.5rem;margin:0 0 8px;font-weight:700}
.lead{font-size:1.25rem;max-width:40ch;margin:0}
.merken{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-bottom:80px}
.merk{background:var(--tint);padding:36px;border-top:3px solid var(--lime);display:flex;flex-direction:column}
.merk__logo{height:88px;width:auto;margin-bottom:28px;align-self:flex-start}
.merk__kop{font-weight:600;margin:0 0 12px}
.merk p:last-child{margin-top:auto;padding-top:12px;margin-bottom:0}
.knop{display:inline-block;background:var(--antraciet);color:var(--wit);text-decoration:none;font-weight:600;padding:12px 20px;border-radius:4px}
.knop:hover{background:#2f3333}
.knop:focus-visible{outline-color:var(--lime)}
.contact{background:var(--antraciet);color:var(--wit);border-bottom:3px solid var(--lime)}
.contact a{color:var(--wit)}
.contact__in{display:flex;align-items:center;gap:48px;padding-top:64px;padding-bottom:64px}
.contact__mark{width:160px;height:auto}
.contact__lijst{list-style:none;margin:0;padding:0;font-size:1.25rem;line-height:1.9}
.voet{background:#3F4444;border-top:3px solid #E0E721;font-size:.8125rem;color:#F3F4F3}
.voet .wrap{padding-top:20px;padding-bottom:28px}
.voet p{margin:0}
@media (max-width:760px){
  .top__in{flex-direction:column;align-items:flex-start;gap:12px}
  .top__logo img{height:52px}
  .merken{grid-template-columns:1fr;gap:24px;padding-bottom:56px}
  .merk{padding:28px 22px}
  .merk__logo{height:64px}
  .intro{padding-top:44px}
  .contact__in{flex-direction:column;align-items:flex-start;gap:24px;padding-top:48px;padding-bottom:48px}
  .contact__mark{width:120px}
}
.voet__me{margin-top:8px!important;font-size:.75rem}.voet__me a{color:#F3F4F3;opacity:.85}
body{min-height:100vh;display:flex;flex-direction:column}body>main{flex:1}