/* PlastiMet – opfrissing oktober 2026
   Losse laag bovenop de bestaande stijl. Verwijder de <link> naar dit bestand om terug te keren. */

/* Lettertypes, zelf gehost (geen verbinding met Google). Inter en Lora: SIL Open Font License. */
@font-face{font-family:"PM Inter";src:url(/assets/fonts/inter-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PM Inter";src:url(/assets/fonts/inter-500.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PM Inter";src:url(/assets/fonts/inter-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PM Inter";src:url(/assets/fonts/inter-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PM Lora";src:url(/assets/fonts/lora-italic.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --pm-navy:#081f52;
  --pm-ink:#0d1f3f;
  --pm-text:#3f4b63;      /* lopende tekst: donkerder dan voorheen, beter leesbaar */
  --pm-soft:#5b6880;
  --pm-gold:#d5b374;
  --pm-gold-strong:#efb838;
  --pm-line:#d9e0eb;
}

html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{font-family:"PM Inter",Arial,Helvetica,sans-serif;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:"PM Inter",Arial,Helvetica,sans-serif;text-wrap:balance}
p{text-wrap:pretty}

/* Accentwoorden in schuine letter: Lora in plaats van Georgia */
h1 span,h2 span,em{font-family:"PM Lora",Georgia,"Times New Roman",serif}

/* Koppen iets rustiger: minder krap gespatieerd */
h1{letter-spacing:-.035em}
h2{letter-spacing:-.03em;line-height:1.08}
h3{letter-spacing:-.015em}
.eyebrow{letter-spacing:.16em}

/* Leesbaarheid lopende tekst */
.lead{color:var(--pm-text)}
.navy .lead,.hero .lead,.rail-section .lead{color:#d3dbeb}
.section p:not(.eyebrow):not(.lead){color:var(--pm-text)}
.navy p:not(.eyebrow):not(.lead),.rail-section p:not(.eyebrow):not(.lead){color:#c7d0e3}

/* Geen eigen muiscursor: gewone cursor is duidelijker */
.cursor-dot,.cursor-ring{display:none!important}
html.custom-pointer,html.custom-pointer a,html.custom-pointer button,html.custom-pointer [role=tab]{cursor:auto!important}
html.custom-pointer a,html.custom-pointer button,html.custom-pointer [role=tab]{cursor:pointer!important}

/* Kopbalk: blijft bovenaan staan op grote schermen, knoptekst op één regel */
@media (min-width:1251px){
  .header{position:sticky;top:0;z-index:50;height:88px;background:rgba(7,28,73,.96);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px)}
  .header .logo{max-height:56px;width:auto}
}
.header .button,.header .button.small{white-space:nowrap}
.header nav a{position:relative;opacity:.88;transition:opacity .2s}
.header nav a:hover,.header nav a:focus-visible{opacity:1}
.header nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--pm-gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.header nav a:hover:after{transform:scaleX(1)}

/* Mobiel: alle menu-items bereikbaar (horizontaal scrollen met zachte rand) */
@media (max-width:800px){
  .header nav a:nth-child(2){display:block!important}
  .header nav{justify-content:flex-start!important;gap:22px!important;padding-right:24px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .header nav::-webkit-scrollbar{display:none}
  .header nav a{flex:0 0 auto;font-size:13px}
}

/* Knoppen: iets strakker, duidelijke focus voor toetsenbordgebruik */
.button{border-radius:4px;letter-spacing:.005em}
.button:hover{transform:translateY(-1px)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[role=tab]:focus-visible{outline:2px solid var(--pm-gold-strong);outline-offset:3px}

/* Ritme: wat minder lege ruimte tussen secties op grote schermen */
@media (min-width:1101px){
  .section{padding-top:96px;padding-bottom:96px}
}

/* Rustiger verschijn-animatie, zodat er bij snel scrollen geen lege vlakken staan */
.reveal-ready{transition:opacity .4s ease-out,translate .4s ease-out}
.reveal-ready:not(.in-view){translate:0 8px}
@media (prefers-reduced-motion:reduce){.reveal-ready,.reveal-ready:not(.in-view){opacity:1!important;translate:none!important;transition:none!important}}

/* Kwaliteitskaarten: tweede regel weer op een nieuwe lijn ("Een extra controle. / Een gerust gevoel.") */
.quality-card h3 br{display:block!important}

/* Afbeeldingen: zachte hoeken voor een properder geheel */
.section img:not(.logo){border-radius:3px}

/* Formulier: duidelijker velden */
.quote-section input:not([type=checkbox]):not([type=radio]):not([type=file]),.quote-section select,.quote-section textarea{border-radius:4px;border-color:#c3ccdb;background:#fff;transition:border-color .2s,box-shadow .2s}
.quote-section input:focus,.quote-section select:focus,.quote-section textarea:focus{border-color:var(--pm-navy);box-shadow:0 0 0 3px rgba(8,31,82,.10);outline:none}
.quote-section label{color:var(--pm-ink)}

/* Voettekst: netjes uitgelijnd */
footer{line-height:1.6}
.footer-links a{opacity:.85}
.footer-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}