/* Qlimatix — "Merken" (brand index) page styles.
   Ported 1:1 from the approved prototype (Merken standalone). Self-contained
   (like overons.css): own :root tokens + base reset + .btn-pill, plus the
   .mk-* component layer. Relies on layout.css for the sitewide .wrap container
   (boxed content + breakpoint); only the brand-index components live here. */

/* ===== Self-hosted Onest (shared; drop woff2 into assets/fonts/) ===== */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:local('Onest'),url('fonts/Onest-Regular.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:local('Onest Medium'),url('fonts/Onest-Medium.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:local('Onest SemiBold'),url('fonts/Onest-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:local('Onest Bold'),url('fonts/Onest-Bold.woff2') format('woff2');}

/* ===== Design tokens (mirrors home.css / overons.css :root) ===== */
:root{
  --navy:#01273f;
  --navy-darker:#001a2b;
  --orange:#e77935;
  --orange-hover:#d96b27;
  --light-blue:#cfdae6;
  --text:#0e2a3f;
  --muted:#5e6f7c;
  --border:#e7eaee;
  --border-soft:#eef1f4;
}

/* ===== Base reset (each page-type CSS carries its own; chrome is scoped) ===== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Onest",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;color:var(--text);background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;padding:0;}
h1,h2,h3,h4{margin:0;color:var(--text);font-weight:600;letter-spacing:-0.02em;line-height:1.1;}

/* ===== Orange pill button (from home.css) ===== */
.btn-pill{
  display:inline-flex;align-items:center;gap:12px;
  height:56px;padding:4px 28px 4px 4px;
  background:var(--orange);color:#fff;
  border-radius:999px;font-weight:500;font-size:15px;letter-spacing:0.005em;
  box-shadow:0 8px 18px -8px rgba(231,121,53,0.55);
  transition:background .15s,transform .15s;
}
.btn-pill:hover{background:var(--orange-hover);}
.btn-pill__arrow{
  width:48px;height:48px;border-radius:999px;background:#fff;
  display:grid;place-items:center;color:var(--text);flex-shrink:0;
}
.btn-pill__arrow svg{display:block;}

/* ============ MERKEN PAGE — scoped (.mk-*) ============ */
/* Bottom clearance: the global footer's newsletter band (.lof-news-band--top)
   pulls UP 150px (transform:translateY(-150px)), so the page needs ~230px tail
   to keep that band off the keuzehulp help-band (matches the prototype tail). */
.mk-main{padding:8px 0 230px;}

/* ----- HERO ----- */
.mk-hero{padding:24px 0 0;}
.mk-crumb{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-bottom:26px;flex-wrap:wrap;}
.mk-crumb a{color:var(--muted);transition:color .15s;}
.mk-crumb a:hover{color:var(--text);}
.mk-crumb__sep{color:#c2ccd4;}
.mk-crumb__cur{color:var(--text);}
.mk-hero__head{max-width:720px;}
.mk-hero__title{font-size:46px;line-height:1.05;letter-spacing:-.03em;font-weight:600;color:var(--navy);margin:0 0 16px;}
.mk-hero__intro{font-size:17px;line-height:1.65;color:var(--muted);margin:0;max-width:620px;}
.mk-hero__intro b{color:var(--text);font-weight:600;}

/* ----- BRAND CARDS ----- */
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.mk-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s;}
.mk-card:hover{box-shadow:0 30px 56px -34px rgba(8,38,65,.45);border-color:#d8e0e8;transform:translateY(-4px);}

.mk-card__logo{position:relative;height:168px;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 130% at 85% 12%, #0c416a 0%, rgba(12,65,106,0) 55%), linear-gradient(155deg, #053a5e 0%, #01243a 62%, #001a2b 100%);
  background-color:#01253c;}
.mk-card__logo img{max-height:42px;max-width:72%;width:auto;object-fit:contain;}

.mk-card__body{display:flex;flex-direction:column;flex:1;padding:26px 28px 28px;}
.mk-card__name{font-size:24px;font-weight:600;color:var(--navy);letter-spacing:-.02em;margin:0 0 10px;}
.mk-card__desc{font-size:14.5px;line-height:1.62;color:var(--muted);margin:0 0 20px;}
.mk-card__facts{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;}
.mk-card__facts li{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--text);line-height:1.4;}
.mk-card__facts svg{flex-shrink:0;color:var(--orange);margin-top:2px;}
.mk-card__cta{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--navy);}
.mk-card__arrow{width:36px;height:36px;border-radius:999px;background:#f1f5f8;color:var(--navy);display:grid;place-items:center;transition:background .15s,color .15s,transform .15s;}
.mk-card:hover .mk-card__arrow{background:var(--orange);color:#fff;transform:translate(2px,-2px);}

/* ----- HELP BAND ----- */
.mk-help{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:radial-gradient(120% 130% at 88% 8%, #0c416a 0%, rgba(12,65,106,0) 52%), linear-gradient(155deg, #053a5e 0%, #01243a 60%, #001a2b 100%);
  background-color:#01253c;border:none;border-radius:24px;padding:44px 48px;margin-top:40px;}
.mk-help__t{font-size:24px;font-weight:600;color:#fff;letter-spacing:-.02em;margin:0 0 8px;}
.mk-help__s{font-size:15px;color:rgba(255,255,255,.74);margin:0;max-width:520px;line-height:1.6;}
.mk-help .btn-pill__arrow{width:48px;height:48px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;flex-shrink:0;}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .mk-grid{grid-template-columns:1fr;gap:18px;}
  .mk-card{flex-direction:row;}
  .mk-card__logo{width:240px;height:auto;flex-shrink:0;}
  .mk-card__body{padding:26px 30px;}
}
@media (max-width:680px){
  .mk-hero__title{font-size:34px;}
  .mk-hero__intro{font-size:16px;}
  .mk-grid{margin-top:30px;}
  .mk-card{flex-direction:column;}
  .mk-card__logo{width:100%;height:140px;}
  .mk-help{padding:26px 24px;}
  .mk-help__t{font-size:19px;}
  .mk-help .btn-pill{width:100%;justify-content:center;}
}