/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/j0.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/j1.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/j2.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/j3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/j4.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/j5.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/j3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/j4.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/j5.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/j3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/j4.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/j5.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/j3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/j4.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/j5.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;
}


/* ===========================================================
   Shake Up Lifestyle — huisstijl & site-stylesheet (concept)
   Kleuren en fonts: zie Huisstijl\HUISSTIJL.md
   =========================================================== */

@font-face {
  font-family: 'Great Mango';
  src: url('fonts/great_mango.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zolina';
  src: url('fonts/Zolina-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zolina';
  src: url('fonts/Zolina-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --creme: #f5f0e6;
  --creme-donker: #ece5d6;
  --wit: #fcfaf4;
  --ink: #1c1a16;
  --ink-zacht: #43403a;
  --grijs: #7c766c;
  --groen: #33443c;
  --klei: #b06a4c;
  --lijn: #ddd4c2;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Jost', 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--creme);
  line-height: 1.7;
  font-size: 17px;
}
h1, h2 { font-family: 'Great Mango', Georgia, serif; font-weight: 400; line-height: 1.12; letter-spacing: .012em; }
h3 { font-family: 'Zolina', Georgia, serif; font-weight: 500; letter-spacing: .02em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.smal { max-width: 780px; }
section { padding: 100px 0; }
.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: var(--klei); margin-bottom: 20px;
}
h2.groot { font-size: clamp(32px, 4.2vw, 48px); margin-bottom: 22px; }
.intro { max-width: 44em; color: var(--grijs); font-weight: 300; font-size: 18px; margin-bottom: 52px; }
p.tekst, .prose p { font-weight: 300; color: var(--ink-zacht); margin-bottom: 16px; }
.prose b { font-weight: 500; color: var(--ink); }
.prose h3 { font-size: 22px; margin: 34px 0 10px; }

/* ===== knoppen ===== */
.knop {
  display: inline-block;
  background: var(--ink); color: var(--creme);
  font-weight: 500; font-size: 13.5px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 17px 34px; border-radius: 2px;
  transition: background .18s, color .18s;
  border: 0; cursor: pointer; font-family: inherit;
}
.knop:hover { background: var(--klei); color: #fff; }
.knop.omlijnd { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.knop.omlijnd:hover { background: var(--ink); color: var(--creme); }
.knop.creme { background: var(--creme); color: var(--ink); }
.knop.creme:hover { background: var(--klei); color: #fff; }
.knop.wit-lijn { background: transparent; border: 1px solid rgba(255,255,255,.75); color: #fff; }
.knop.wit-lijn:hover { background: rgba(255,255,255,.14); }

/* ===== header ===== */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,240,230,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.nav { display: flex; align-items: center; padding: 18px 0; }
.nav .logo img { height: 44px; }
.nav nav { margin-left: auto; display: flex; gap: 34px; align-items: center; font-size: 13.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nav nav a:not(.knop) { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav nav a:not(.knop):hover { border-bottom-color: var(--klei); color: var(--klei); }
.nav nav a.actief { border-bottom-color: var(--klei); color: var(--klei); }
.nav .knop { padding: 12px 24px; font-size: 12px; }

/* ===== homepage hero ===== */
.hero {
  position: relative; min-height: clamp(640px, 92vh, 900px);
  display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: -14% 0 -6% 0; z-index: 0;
  background: url('img/strand-zonsondergang.jpg') center 55% / cover no-repeat;
  will-change: transform;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(20,24,22,.5), rgba(20,24,22,.06) 45%, rgba(16,18,16,.74) 94%);
}
#tris { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero .wrap { position: relative; z-index: 3; padding-bottom: 90px; padding-top: 150px; width: 100%; }
.hero .eyebrow { color: #e8d9b8; }
.hero h1 { font-size: clamp(44px, 6.2vw, 76px); max-width: 12em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero p.sub { font-size: clamp(17px, 1.9vw, 20px); font-weight: 300; max-width: 33em; margin: 26px 0 38px; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.hero .knoppen { display: flex; gap: 18px; flex-wrap: wrap; }

/* ===== subpagina-kop ===== */
.pagina-kop { padding: 90px 0 70px; border-bottom: 1px solid var(--lijn); }
.pagina-kop h1 { font-size: clamp(36px, 5vw, 58px); max-width: 16em; }
.pagina-kop .intro { margin: 20px 0 0; }

/* ===== 3d-tilt basis ===== */
.kaart, .stap, .instagrid figure, .minicover, .kader-foto, .artikel-kaart {
  transition: transform .25s ease, box-shadow .25s ease;
  transform-style: preserve-3d; will-change: transform;
}

/* ===== strip ===== */
.strip { background: var(--ink); color: var(--creme); padding: 34px 0; }
.strip .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.strip .feit { text-align: center; flex: 1; min-width: 150px; }
.strip b { display: block; font-family: 'Zolina', serif; font-weight: 500; font-size: 30px; line-height: 1.15; }
.strip span { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #b6ac99; }

/* ===== foto-kaders ===== */
.kader-foto { border: 1px solid var(--lijn); padding: 10px; background: var(--wit); }
.kader-foto img { width: 100%; object-fit: cover; }

/* ===== lijstjes met driehoekje ===== */
ul.driehoek { list-style: none; }
ul.driehoek li { padding: 13px 0 13px 38px; position: relative; border-bottom: 1px solid var(--lijn); font-weight: 300; }
ul.driehoek li::before { content: "\25B3"; position: absolute; left: 2px; top: 11px; color: var(--klei); font-size: 15px; }
ul.driehoek b { font-weight: 500; }

/* ===== kaarten-grid ===== */
.kaarten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--lijn); }
.kaart { padding: 38px 30px; border-right: 1px solid var(--lijn); background: var(--wit); }
.kaart:last-child { border-right: 0; }
.kaart .nr { font-family: 'Zolina', serif; font-weight: 500; font-size: 15px; letter-spacing: .3em; color: var(--klei); display: block; margin-bottom: 14px; }
.kaart h3 { font-size: 20px; margin-bottom: 10px; }
.kaart p { font-size: 15px; font-weight: 300; color: var(--ink-zacht); }

/* ===== donkere stappen-sectie ===== */
.donker { background: var(--groen); color: #f2efe6; }
.donker .eyebrow { color: #cbb389; }
.donker .intro { color: #b9c2ba; }
.stappenlijst { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(255,255,255,.18); }
.stap { padding: 38px 30px; border-right: 1px solid rgba(255,255,255,.18); }
.stap:last-child { border-right: 0; }
.stap .nr { font-family: 'Zolina', serif; font-weight: 400; font-size: 44px; color: #cbb389; line-height: 1; }
.stap h3 { font-size: 19px; margin: 14px 0 10px; color: #fff; }
.stap p { font-size: 14.5px; font-weight: 300; color: #c9cfc7; }
.stap .prijs { display: inline-block; margin-top: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; color: #cbb389; text-transform: uppercase; border-top: 1px solid rgba(203,179,137,.4); padding-top: 8px; }

/* ===== witte sectie ===== */
.wit-vlak { background: var(--wit); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }

/* ===== kolommen ===== */
.kolommen-2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center; }

/* ===== producten ===== */
.productflex { display: grid; grid-template-columns: 320px 1fr; gap: 70px; align-items: center; }
.minicover {
  aspect-ratio: 210/297; overflow: hidden; position: relative;
  background: url('img/strand-zonsondergang.jpg') center 60% / cover;
  box-shadow: 24px 24px 0 var(--creme-donker);
  color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px;
}
.minicover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,24,22,.35), transparent 40%, rgba(16,18,16,.78)); }
.minicover > * { position: relative; }
.minicover .mc-logo { position: absolute; top: 20px; left: 26px; width: 74px; }
.minicover h3 { font-size: 25px; line-height: 1.15; }
.minicover p { font-size: 11.5px; font-weight: 300; margin-top: 8px; opacity: .95; }
.minicover.groen { background: var(--groen); box-shadow: 24px 24px 0 var(--creme-donker); }
.minicover.groen::before { background: none; }
.prijs-groot { font-family: 'Zolina', serif; font-weight: 500; font-size: 28px; margin: 14px 0 8px; }
ul.usp { list-style: none; margin: 20px 0 30px; }
ul.usp li { padding: 7px 0 7px 32px; position: relative; font-weight: 300; }
ul.usp li::before { content: "\25B3"; position: absolute; left: 2px; color: var(--klei); font-size: 13px; }
.gratis-balk {
  margin-top: 38px; border: 1px solid var(--lijn); background: var(--wit);
  padding: 26px 30px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.gratis-balk b { font-weight: 600; }
.gratis-balk .veld { flex: 1; min-width: 240px; display: flex; }
.gratis-balk input { flex: 1; border: 1px solid var(--lijn); border-right: 0; background: #fff; padding: 13px 18px; font: inherit; font-size: 15px; }
.gratis-balk button { border: 0; background: var(--ink); color: var(--creme); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 13px 22px; cursor: pointer; }
.gratis-balk button:hover { background: var(--klei); }

/* ===== instagram ===== */
.instagrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 44px; }
.instagrid figure { border: 1px solid var(--lijn); padding: 8px; background: var(--wit); }
.instagrid img { aspect-ratio: 1; object-fit: cover; width: 100%; }

/* ===== blog / onderweg ===== */
.artikelen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.artikel-kaart { background: var(--wit); border: 1px solid var(--lijn); display: flex; flex-direction: column; }
.artikel-kaart img { aspect-ratio: 3/2; object-fit: cover; }
.artikel-kaart .tekstdeel { padding: 24px 24px 28px; }
.artikel-kaart .datum { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--klei); font-weight: 600; }
.artikel-kaart h3 { font-size: 20px; margin: 10px 0 8px; }
.artikel-kaart p { font-size: 14.5px; font-weight: 300; color: var(--ink-zacht); }
.artikel-kaart .lees { margin-top: 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.artikel-kaart .lees:hover { color: var(--klei); }

/* ===== tijdlijn (ons verhaal) ===== */
.tijdlijn { list-style: none; margin: 20px 0; position: relative; padding-left: 34px; }
.tijdlijn::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--lijn); }
.tijdlijn li { position: relative; padding: 0 0 30px 0; }
.tijdlijn li::before {
  content: "\25B3"; position: absolute; left: -33px; top: 0;
  color: var(--klei); font-size: 13px; background: transparent;
}
.tijdlijn .jaartal { font-family: 'Zolina', serif; font-weight: 500; font-size: 19px; display: block; }
.tijdlijn p { font-weight: 300; color: var(--ink-zacht); font-size: 15.5px; }

/* ===== faq ===== */
.faq-item { border-bottom: 1px solid var(--lijn); padding: 22px 0; }
.faq-item h3 { font-size: 20px; margin-bottom: 8px; }
.faq-item p { font-weight: 300; color: var(--ink-zacht); }

/* ===== formulier ===== */
form.net { display: grid; gap: 18px; max-width: 560px; }
form.net label { font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-zacht); display: block; margin-bottom: 6px; }
form.net input, form.net textarea, form.net select {
  width: 100%; border: 1px solid var(--lijn); background: #fff;
  padding: 14px 16px; font: inherit; font-size: 16px; font-weight: 300;
}
form.net textarea { min-height: 130px; resize: vertical; }

/* ===== slot-cta ===== */
.slot { background: var(--ink); color: var(--creme); text-align: center; padding: 110px 0; }
.slot img.merk { width: 84px; margin: 0 auto 30px; opacity: .9; }
.slot h2 { font-size: clamp(34px, 4.6vw, 56px); margin-bottom: 18px; }
.slot p { max-width: 36em; margin: 0 auto 38px; font-weight: 300; font-size: 18px; color: #cfc8b8; }

/* ===== footer ===== */
footer.site { background: var(--ink); color: #a49c8c; padding: 0 0 46px; font-size: 14px; }
footer.site .wrap { border-top: 1px solid rgba(255,255,255,.14); padding-top: 44px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: center; }
footer.site img { height: 46px; }
footer.site nav { display: flex; gap: 26px; flex-wrap: wrap; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
footer.site a:hover { color: var(--creme); }
footer.site .onder { margin-top: 36px; font-size: 12px; color: #6d675c; width: 100%; text-align: center; }

/* ===== responsief ===== */
@media (max-width: 960px) {
  .kaarten, .stappenlijst { grid-template-columns: 1fr 1fr; }
  .kaart:nth-child(2), .stap:nth-child(2) { border-right: 0; }
  .kaart, .stap { border-bottom: 1px solid var(--lijn); }
  .stap { border-bottom-color: rgba(255,255,255,.18); }
  .instagrid, .artikelen { grid-template-columns: 1fr; }
  .kolommen-2, .productflex { grid-template-columns: 1fr; }
  .nav nav { display: none; }
  .minicover { max-width: 300px; }
}