/* PACK Consultancy, huisstijl vastgesteld op 13 september 2026.
   Alle kleuren vlak: geen verloop, glans, gloed of schaduw onder knoppen. */

/* ── Lettertypen, zelf gehost (font-src 'self') ── */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('assets/fonts/BricolageGrotesque-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('assets/fonts/BricolageGrotesque-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/Inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Kleuren ── */
:root{
  --diep:#093534; --petrol:#155049; --goud:#C09C4E; --goud-donker:#8C7130;
  --ivoor:#F5F3EE; --steen:#E1E6E2; --kaart:#FBFAF7; --kaart-rand:#E3E1DA;
  --inkt:#0E2624; --tekst-licht:#4E5856;
  --zilver:#B0B6B9; --tekst-donker:#CFD4D5; --lijn-donker:rgba(176,182,185,.18);
  --kop:'Bricolage Grotesque',Arial,sans-serif; --tekst:'Inter',system-ui,sans-serif;
  --rand:72px;
}

/* ── Basis ── */
[hidden]{display:none !important}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip}
body{font-family:var(--tekst);font-size:17px;line-height:1.6;color:var(--inkt);background:var(--ivoor);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.accent{color:var(--goud)}
.sectie .accent{color:var(--petrol)}
.rand{padding-left:var(--rand);padding-right:var(--rand)}
.skip{position:absolute;left:-9999px;top:0;background:var(--goud);color:var(--inkt);padding:10px 16px;font-weight:600;z-index:20}
.skip:focus{left:16px;top:16px}

/* ── Knoppen ── */
.knop{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:999px;background:var(--goud);color:var(--inkt);font:600 16.5px var(--tekst);letter-spacing:.005em;text-decoration:none;white-space:nowrap}
.knop:hover{background:#B38F42}
.knop:focus-visible,.knop-tekst:focus-visible,.nav a:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.knop-klein{height:44px;padding:0 20px;font-size:15px}
.knop-tekst{font:600 17px var(--tekst);display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.knop-tekst .pijl{color:var(--goud)}
.knop-tekst:hover .pijl{transform:translateX(3px)}
.pijl{display:inline-block;transition:transform .2s}

/* ── Boventitel ── */
.boventitel{display:flex;align-items:center;gap:12px;font:500 15px var(--tekst);letter-spacing:.01em;margin-bottom:22px}
.stip{width:10px;height:10px;border-radius:50%;background:var(--goud);box-shadow:0 0 0 5px rgba(192,156,78,.22);flex:none}

/* ── Header ── */
.hero{position:relative;background:var(--diep);color:var(--tekst-donker);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 85% at 80% 50%,#14453F 0%,var(--diep) 70%)}
.hero>*{position:relative}
.nav{height:96px;display:flex;align-items:center;gap:40px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font:700 22px var(--kop);letter-spacing:-.01em}
.logo img{width:38px;height:38px}
.logo em{font-style:normal;font-weight:500;color:var(--tekst-donker)}
.nav ul{display:flex;gap:32px;list-style:none;margin-left:auto;font:500 15.5px var(--tekst)}
.nav ul a{text-decoration:none;color:var(--tekst-donker)}
.nav ul a:hover{color:#fff}
.menu-knop{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;color:#fff;cursor:pointer;border-radius:8px}
.menu-knop svg{width:26px;height:26px;margin:auto}
.hero-inhoud{display:grid;grid-template-columns:minmax(0,720px) 1fr;min-height:764px}
.hero-tekst{padding:64px 0 72px}
.hero .boventitel{color:var(--tekst-donker)}
.hero h1{font-size:clamp(44px,5.3vw,76px);color:var(--zilver);margin-bottom:28px}
.hero .intro{font-size:20px;line-height:1.55;max-width:560px;margin-bottom:40px}
.knoppen{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-bottom:44px}
.hero .knop-tekst{color:var(--zilver)}
.bewijs{display:flex;gap:36px;list-style:none;font-size:14.5px;line-height:1.4;padding-top:26px;max-width:640px;color:#B4BABB;border-top:1px solid var(--lijn-donker)}
.bewijs li{max-width:190px}
.bewijs b{display:block;font:700 17px var(--kop);color:var(--zilver);margin-bottom:2px}
.hero-foto{position:relative;align-self:end;justify-self:end;margin-right:calc(-1 * var(--rand));height:760px;max-height:100%}
.hero-foto img{height:100%;width:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 22%,#000 50%),linear-gradient(to bottom,transparent 0,#000 12%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 22%,#000 50%),linear-gradient(to bottom,transparent 0,#000 12%);mask-composite:intersect}

/* ── Secties ── */
.sectie{padding-top:120px;padding-bottom:120px}
.sectie .boventitel{color:var(--petrol)}
.sectie h2{font-size:clamp(34px,3.8vw,54px);max-width:760px}
.kopregel{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:64px}
.kopregel p{font-size:18px;color:var(--tekst-licht);max-width:440px}

/* diensten */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dienst{background:var(--kaart);border-radius:18px;padding:36px 34px 38px;border:1px solid var(--kaart-rand)}
.dienst .ic{width:56px;height:56px;border-radius:14px;background:var(--steen);color:var(--petrol);display:grid;place-items:center;margin-bottom:28px}
.dienst .ic svg{width:26px;height:26px}
.dienst h3{font-size:25px;letter-spacing:-.015em;margin-bottom:12px}
.dienst p{font-size:16px;color:var(--tekst-licht);margin-bottom:22px}
.dienst a{font:600 15px var(--tekst);color:var(--petrol);display:inline-flex;gap:8px;text-decoration:none}
.dienst a .pijl{color:var(--goud-donker)}
.dienst.uit{background:var(--petrol);border-color:var(--petrol)}
.dienst.uit .ic{background:rgba(255,255,255,.14);color:var(--goud)}
.dienst.uit h3{color:#EEF1F1}.dienst.uit p{color:#D9DEDE}.dienst.uit a{color:#EEF1F1}.dienst.uit a .pijl{color:var(--goud)}

/* werkwijze */
.werkwijze{background:var(--steen)}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);position:relative;list-style:none}
.stappen::before{content:"";position:absolute;left:26px;right:33%;top:26px;border-top:1px solid rgba(21,80,73,.28)}
.stap{padding-right:40px}
.stap .nr{width:52px;height:52px;border-radius:50%;background:var(--goud);color:var(--inkt);display:grid;place-items:center;font:700 20px var(--kop);margin-bottom:26px;position:relative}
.stap .wie{font:600 13px var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);margin-bottom:14px}
.stap h3{font-size:26px;letter-spacing:-.015em;margin-bottom:6px}
.stap p{font-size:16.5px;color:#3E4C49;max-width:340px}

/* werk */
.werk-lijst{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none}
.werk-lijst a{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--kaart);border:1px solid var(--kaart-rand);border-radius:16px;padding:26px 28px;text-decoration:none}
.werk-lijst a:hover{border-color:var(--petrol)}
.werk-lijst b{display:block;font:700 20px var(--kop);letter-spacing:-.015em;margin-bottom:4px}
.werk-lijst span{font-size:14.5px;color:var(--tekst-licht)}
.werk-lijst .pijl{color:var(--goud-donker);font-size:20px}

/* beloftes */
.beloftes{background:var(--steen)}
.belofte-lijst{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 48px;list-style:none;max-width:1000px}
.belofte-lijst li{padding-left:28px;position:relative}
.belofte-lijst li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;background:var(--goud)}
.belofte-lijst b{display:block;font:700 22px var(--kop);letter-spacing:-.015em;margin-bottom:6px}
.belofte-lijst p{font-size:16.5px;color:#3E4C49}

/* over */
.over{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:80px;align-items:center}
.over .tekst p{font-size:17.5px;color:var(--tekst-licht);margin-bottom:18px;max-width:600px}
.over h2{margin-bottom:24px}
.kenmerken{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:28px}
.kenmerken li{font:500 14px var(--tekst);color:var(--petrol);background:var(--steen);border-radius:999px;padding:8px 16px}
.over-foto{border-radius:24px;overflow:hidden;background:var(--diep);aspect-ratio:4/5}
.over-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}

/* slot */
.slot{background:var(--diep);color:var(--tekst-donker);padding-top:96px;padding-bottom:96px;position:relative;overflow:hidden}
.slot-inhoud{display:flex;align-items:center;justify-content:space-between;gap:60px;position:relative}
.slot h2{font-size:clamp(32px,3.4vw,48px);color:var(--zilver);max-width:720px}
.slot p{font-size:18px;margin-top:16px;max-width:560px}
.slot .zonbg{position:absolute;right:-120px;bottom:-320px;width:520px;height:520px;opacity:.07;pointer-events:none}
.slot .knop{flex:none}
.slot .mail{display:block;margin-top:22px;font:600 17px var(--tekst);color:var(--zilver);text-decoration:none}
.slot .mail:hover{color:#fff}

/* voet */
.voet{background:var(--diep);color:#B4BABB;font-size:14px;padding-top:26px;padding-bottom:26px;border-top:1px solid var(--lijn-donker)}
.voet-balk{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.voet a{color:var(--zilver);text-decoration:none}
.voet a:hover{color:#fff}

/* onthullen bij scrollen; zonder script of met reduced motion gewoon zichtbaar */
.onthul{opacity:1;transform:none}
.js .onthul{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .onthul.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .onthul{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.pijl{transition:none}}

/* ── Tablet ── */
@media (max-width:1100px){
  :root{--rand:40px}
  .hero-inhoud{grid-template-columns:minmax(0,1fr) 360px}
  .hero-foto{height:600px}
  .diensten,.stappen,.werk-lijst{grid-template-columns:repeat(2,1fr);gap:20px}
  .stappen::before{display:none}
  .stap{padding-right:0;padding-bottom:20px}
  .over{grid-template-columns:1fr;gap:40px}
  .over-foto{max-width:420px}
}

/* ── Telefoon ── */
@media (max-width:760px){
  :root{--rand:22px}
  body{font-size:16px}
  .nav{height:76px;gap:16px}
  .nav ul{display:none}
  .nav .knop-klein{display:none}
  .menu-knop{display:flex}
  .nav.open ul{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:76px;background:var(--diep);padding:8px var(--rand) 24px;gap:0;z-index:10;border-bottom:1px solid var(--lijn-donker)}
  .nav.open ul li{border-top:1px solid var(--lijn-donker)}
  .nav.open ul a{display:block;padding:16px 0;font-size:17px}
  .hero-inhoud{grid-template-columns:1fr;min-height:0}
  .hero-tekst{padding:32px 0 8px}
  .hero h1{font-size:clamp(38px,11vw,48px);max-width:none;margin-bottom:20px}
  .hero .intro{font-size:17.5px;margin-bottom:28px}
  .knoppen{gap:18px;margin-bottom:28px}
  .knop{height:52px;padding:0 24px;width:100%;max-width:360px}
  .bewijs{flex-direction:column;gap:14px;padding-top:20px}
  .bewijs li{max-width:none}
  .hero-foto{justify-self:center;margin:8px auto 0;height:auto;width:min(100%,360px)}
  .hero-foto img{width:100%;height:auto;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);-webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-composite:add}
  .sectie{padding-top:72px;padding-bottom:72px}
  .sectie h2{font-size:clamp(30px,8.5vw,40px)}
  .kopregel{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px}
  .diensten,.stappen,.werk-lijst,.belofte-lijst{grid-template-columns:1fr;gap:16px}
  .dienst{padding:28px 24px 30px}
  .slot{padding-top:64px;padding-bottom:64px}
  .slot-inhoud{flex-direction:column;align-items:flex-start;gap:28px}
  .slot .zonbg{right:-200px;bottom:-380px}
  .voet-balk{flex-direction:column;gap:8px}
}