/* MB Industrial Products — site styles
   Design system carried over from the printed brochures:
   navy #1e2a55 on white paper, diagonal-cut photo cards. */

:root{
  --navy:#1e2a55;
  --navy-deep:#141c3a;
  --steel:#3c4d7d;
  --panel:#eef0f5;
  --hair:#d3d8e2;
  --ink:#23262e;
  --muted:#5a6478;
  --paper:#ffffff;
  --bg:#f5f7fa;
  --wrap:1150px;
  --gutter:clamp(18px,4vw,40px);
  --band:64px;
}

*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  /* always reserve the scrollbar gutter so short pages (Over ons) don't
     render wider than scrolling pages, which shifts the whole layout */
  scrollbar-gutter:stable;
}
@supports not (scrollbar-gutter:stable){
  html{overflow-y:scroll;}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}
main{flex:1 0 auto;}
img{max-width:100%; display:block;}
a{color:var(--steel);}
h1,h2,h3{margin:0; line-height:1.25; overflow-wrap:break-word; hyphens:auto;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{outline:3px solid var(--steel); outline-offset:3px;}

/* ---------- header ---------- */
.site-head{
  background:var(--paper); border-bottom:1px solid var(--hair);
  position:sticky; top:0; z-index:50;
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px 24px; flex-wrap:wrap; padding-block:14px;
}
.brand{
  display:block; width:150px; height:31px; flex:0 0 auto;
  background-image:var(--img-logo); background-size:contain;
  background-repeat:no-repeat; background-position:left center;
}
.site-nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:4px 26px; margin:0; padding:0;}
.site-nav a{
  display:inline-block; padding:6px 2px; color:var(--navy);
  font-weight:600; font-size:15px; text-decoration:none;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--steel);}
.site-nav a[aria-current="page"]{border-bottom-color:var(--navy);}

/* ---------- hero ---------- */
.hero{
  position:relative; color:#fff; background:var(--navy-deep);
  background-image:linear-gradient(105deg,rgba(20,28,58,.94) 0%,rgba(30,42,85,.86) 45%,rgba(30,42,85,.55) 100%),var(--img-hero);
  background-size:cover; background-position:center;
}
.hero .wrap{padding-block:clamp(56px,9vw,104px);}
.hero h1{
  font-size:clamp(26px,4.4vw,46px); font-weight:800; letter-spacing:-.4px;
  max-width:19ch; text-wrap:balance;
}
.hero p{margin:16px 0 0; max-width:56ch; font-size:clamp(15px,1.6vw,18px); color:#dde3f0;}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}

.btn{
  display:inline-block; padding:13px 26px; border-radius:3px;
  font-weight:700; font-size:15px; text-decoration:none;
  border:2px solid transparent; transition:background-color .18s, color .18s, border-color .18s;
}
.btn-primary{background:var(--paper); color:var(--navy); border-color:var(--paper);}
.btn-primary:hover{background:#dfe4f1; border-color:#dfe4f1;}
.btn-ghost{color:#fff; border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.btn-solid{background:var(--navy); color:#fff; border-color:var(--navy);}
.btn-solid:hover{background:var(--navy-deep); border-color:var(--navy-deep);}

/* ---------- values strip (mirrors the brochure divider line) ---------- */
.values{background:var(--paper); border-bottom:1px solid var(--hair);}
.values .wrap{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:8px 22px; padding-block:16px;
  color:var(--steel); font-weight:700; font-size:15px;
}
.values span{color:var(--hair); font-weight:400;}

/* ---------- sections ---------- */
.section{padding-block:clamp(40px,6vw,68px);}
.section-alt{background:var(--paper); border-block:1px solid var(--hair);}
.eyebrow{
  color:var(--navy); font-size:19px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase;
}
.lede{color:var(--muted); margin:8px 0 26px; max-width:66ch;}

.page-head{background:var(--navy); color:#fff;}
.page-head .wrap{padding-block:clamp(34px,5vw,56px);}
.page-head h1{font-size:clamp(26px,3.6vw,38px); font-weight:800; letter-spacing:-.3px;}
.page-head p{margin:10px 0 0; color:#d3daea; max-width:62ch;}

/* ---------- signature: diagonal-cut card ---------- */
.grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));}

.card{
  background:var(--paper); border:1px solid #e4e8ef; border-radius:3px;
  overflow:hidden; display:flex; flex-direction:column;
}
.card-band{position:relative; height:var(--band); background:var(--navy); overflow:hidden;}
.card-band .lbl{
  position:absolute; inset:0 auto 0 0; z-index:2;
  display:flex; align-items:center; gap:10px; padding:0 14px;
  color:#fff; font-weight:700; font-size:16px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.card-band .lbl svg{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:#fff; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.card-band .pic{
  position:absolute; inset:0 0 0 auto; width:44%;
  background-size:cover; background-position:center;
  clip-path:polygon(26% 0,100% 0,100% 100%,0% 100%);
  transition:width .3s ease;
}
.card-band .pic::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(30,42,85,.97) 0%,rgba(30,42,85,.66) 24%,rgba(30,42,85,.26) 58%,rgba(30,42,85,.10) 100%);
  transition:opacity .3s ease;
}
.card:hover .card-band .pic{width:52%;}
.card:hover .card-band .pic::after{opacity:.72;}

.card-sub{
  background:var(--panel); padding:11px 16px;
  color:var(--navy); font-weight:700; font-size:14.5px;
}
.card-body{padding:15px 16px 18px; font-size:14.5px;}
.card-body ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.card-body li{display:flex; gap:10px; color:#33373f;}
.card-body li::before{
  content:""; flex:0 0 auto; width:7px; height:12px; margin-top:5px;
  border-right:2px solid var(--steel); border-bottom:2px solid var(--steel);
  transform:rotate(40deg);
}

/* ---------- product blocks ---------- */
.product{background:var(--paper); border:1px solid #e4e8ef; border-radius:3px; overflow:hidden;}
.product > .card-band{height:78px;}
.product > .card-band .lbl{font-size:19px; font-weight:800; letter-spacing:.3px;}
.product-inner{padding:20px 22px 24px;}
.product .tagline{
  display:block; color:var(--steel); font-weight:700; font-size:14.5px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--hair);
}
.benefits{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:11px;}
.benefits li{display:flex; gap:10px; font-size:14.5px; color:#33373f;}
.benefits li::before{
  content:""; flex:0 0 auto; width:15px; height:15px; margin-top:3px;
  background:var(--navy); border-radius:2px;
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,38% 68%);
}
.benefits b{color:var(--navy);}

/* product benefit rows share the specs table's 42% label column,
   so label and description line up down the whole block */
.product .benefits li{
  display:grid; align-items:start;
  grid-template-columns:15px calc(42% - 35px) 1fr;
  column-gap:10px; row-gap:2px;
}
@media (max-width:560px){
  .product .benefits li{grid-template-columns:15px 1fr;}
  .product .benefits li b,
  .product .benefits li span{grid-column:2;}
}

table.specs{width:100%; border-collapse:collapse; font-size:14.5px;}
table.specs th,table.specs td{
  text-align:left; padding:9px 0; border-bottom:1px solid #e7e9ef; vertical-align:top;
}
table.specs th{color:var(--navy); font-weight:700; width:42%;}

/* ---------- contact ---------- */
.contact-grid{display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.detail-list{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
.detail-list dd{margin:0;}
.detail-list .v{overflow-wrap:anywhere;}
.detail-list dt,.detail-list .k{
  color:var(--navy); font-weight:700; font-size:13px;
  letter-spacing:.6px; text-transform:uppercase;
}
.detail-list a{color:var(--steel); text-decoration:none; border-bottom:1px solid rgba(60,77,125,.4);}
.detail-list a:hover{color:var(--navy); border-bottom-color:var(--navy);}
.detail-list .v{font-size:17px;}

.form{display:grid; gap:16px;}
.field{display:grid; gap:6px;}
.field label{font-weight:700; font-size:14px; color:var(--navy);}
.field input,.field textarea{
  font:inherit; font-size:15px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--hair); border-radius:3px;
  background:var(--paper); width:100%;
}
.field textarea{min-height:140px; resize:vertical;}
.field input:focus,.field textarea:focus{border-color:var(--steel); outline:none; box-shadow:0 0 0 3px rgba(60,77,125,.18);}
.form button{
  justify-self:start; font:inherit; cursor:pointer;
  padding:13px 28px; border-radius:3px; font-weight:700; font-size:15px;
  background:var(--navy); color:#fff; border:2px solid var(--navy);
  transition:background-color .18s;
}
.form button:hover{background:var(--navy-deep);}
.note{
  background:var(--panel); border-left:4px solid var(--steel);
  padding:12px 16px; font-size:14px; color:#3a3f48; border-radius:0 3px 3px 0;
}

/* ---------- callout + footer ---------- */
.callout{background:var(--navy); color:#fff;}
.callout .wrap{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:18px 30px; padding-block:34px;
}
.callout h2{font-size:clamp(20px,2.6vw,27px); font-weight:800; max-width:24ch;}
.callout p{margin:6px 0 0; color:#d3daea;}
.callout .btn-primary{background:#fff; color:var(--navy); border-color:#fff;}

.site-foot{background:var(--navy-deep); color:#c9d2e6; font-size:14px;}
.site-foot .wrap{padding-block:26px;}
.foot-top{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  align-items:center; justify-content:center; text-align:center;
}
.foot-top a{color:#dbe2f2; text-decoration:none; border-bottom:1px solid rgba(219,226,242,.35);}
.foot-top a:hover{border-bottom-color:#fff; color:#fff;}
.foot-name{
  margin-top:14px; text-align:center; color:#fff;
  font-weight:800; letter-spacing:.5px; font-size:15px;
}
.foot-legal{margin-top:4px; text-align:center; color:#96a2bd; font-size:13px;}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .site-head .wrap{justify-content:center;}
  .site-nav ul{justify-content:center; gap:2px 18px;}
  .card-band .pic{width:38%;}
  .card:hover .card-band .pic{width:44%;}
  .callout .wrap{flex-direction:column; align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}

/* ---------- header right cluster + language selector ---------- */
.head-right{
  display:flex; align-items:center; justify-content:flex-end;
  flex-wrap:wrap; gap:8px 22px;
}
.lang{display:flex; align-items:center; gap:3px; font-size:12.5px; font-weight:700;}
.lang a{
  color:var(--muted); text-decoration:none; letter-spacing:.4px;
  padding:4px 8px; border-radius:3px; border:1px solid transparent;
  transition:background-color .18s, color .18s;
}
.lang a:hover{color:var(--navy); background:var(--panel);}
.lang a[aria-current="true"]{color:#fff; background:var(--navy); border-color:var(--navy);}

/* ---------- about block on the homepage (moved from the Over ons page) ---------- */
.about-grid{
  display:grid; gap:24px 40px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  margin-top:18px;
}
.about-grid h3{color:var(--navy); font-size:17px; font-weight:800; margin-bottom:8px;}
.about-grid p{color:var(--muted);}

@media (max-width:640px){
  .head-right{justify-content:center; width:100%;}
}

/* ---------- form status banner + spam honeypot ---------- */
.status{
  padding:13px 16px; border-radius:0 3px 3px 0; font-size:14.5px;
  margin-bottom:18px; line-height:1.5;
}
.status-ok{background:#e8f2ea; border-left:4px solid #2f7d46; color:#1f5330;}
.status-err{background:#fdeceb; border-left:4px solid #b3261e; color:#7c1d17;}
.hp{
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}