:root{
  --linnen:#F7F0E2; --linnen-diep:#EFE6D2; --kaart:#FDFAF3; --kaart-rust:#F3EADA;
  --inkt:#332A1E; --inkt-zacht:#6A5B48; --inkt-flauw:#9B8B74;
  --rand:#E0D3B9; --rand-zacht:#EDE3CF;
  --olijf:#9BA37C; --olijf-diep:#5E6A3F;
  --oker:#EDD09A; --oker-diep:#B3812A;
  --terra:#D19A7C; --terra-diep:#A05C3C;
  --kamer:#6B7845; --tuin:#83893C; --aquarium:#5F7E7C; --terrarium:#A05C3C;
  --kop:'Fraunces',Georgia,serif; --tekst:'Inter',system-ui,sans-serif;
  --breed:1080px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--linnen); color:var(--inkt);
  font-family:var(--tekst); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Beide talen staan in de pagina; er wordt er één verborgen. `revert` zet het
   element terug op zijn eigen soort — inline voor een span, block voor een
   alinea — zodat er geen lijst met uitzonderingen per element nodig is. */
.en{display:none}
html.taal-en .nl{display:none}
html.taal-en .en{display:revert}

h1,h2,h3{font-family:var(--kop); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.18rem}
p{margin:0 0 1em}
a{color:var(--olijf-diep)}

.wrap{max-width:var(--breed); margin:0 auto; padding:0 24px}
.rubriek{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--inkt-flauw); font-weight:600; margin-bottom:.9rem;
}

/* ── Taalwissel ─────────────────────────────────────────────── */
.taalbalk{position:fixed; top:16px; right:16px; z-index:20; display:flex; gap:2px;
  background:rgba(253,250,243,.86); backdrop-filter:blur(8px);
  border:1px solid var(--rand); border-radius:999px; padding:3px; }
.taalbalk button{
  font:600 .72rem/1 var(--tekst); letter-spacing:.08em; text-transform:uppercase;
  border:0; background:transparent; color:var(--inkt-flauw);
  padding:7px 13px; border-radius:999px; cursor:pointer;
}
.taalbalk button[aria-pressed="true"]{background:var(--olijf-diep); color:var(--kaart)}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; text-align:center}
.hero-beeld{
  position:absolute; inset:0 0 auto 0; height:74%;
  background:url('beeld/eilanden-breed.jpg') center 34%/cover no-repeat;
}
.hero-beeld::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(247,240,226,0) 0%,rgba(247,240,226,.25) 42%,rgba(247,240,226,.88) 76%,var(--linnen) 96%);
}
.hero-inhoud{position:relative; padding:min(52vh,420px) 24px 84px}
.hero img.teken{width:64px; height:64px; display:block; margin:0 auto 18px}
.hero img.woord{width:min(78vw,268px); display:block; margin:0 auto}
.baseline{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--inkt-flauw); margin-top:14px;
}
.pitch{
  font-family:var(--kop); font-size:clamp(1.5rem,3.4vw,2.15rem); line-height:1.3;
  max-width:640px; margin:34px auto 0;
}
.pitch em{font-style:italic; color:var(--olijf-diep)}
.onder-pitch{max-width:520px; margin:18px auto 0; color:var(--inkt-zacht)}

/* ── Store-knoppen ──────────────────────────────────────────── */
.stores{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.store{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  background:var(--inkt); color:var(--linnen);
  padding:13px 22px; border-radius:14px; transition:transform .16s ease, opacity .16s ease;
}
.store:hover{transform:translateY(-2px)}
.store svg{width:22px; height:22px; fill:currentColor; flex:none}
.store small{display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; opacity:.72}
.store strong{display:block; font-size:.98rem; font-weight:600; letter-spacing:-.01em}
.store[aria-disabled="true"]{cursor:default}
.store[aria-disabled="true"]:hover{transform:none}
.binnenkort{font-size:.78rem; color:var(--inkt-flauw); margin-top:14px}

/* ── Secties ────────────────────────────────────────────────── */
section{padding:clamp(56px,9vw,104px) 0}
section.rust{background:var(--linnen-diep)}
.tweeluik{display:grid; grid-template-columns:1fr; gap:42px; align-items:center}
@media(min-width:860px){ .tweeluik{grid-template-columns:1fr 1fr; gap:64px} .tweeluik.om > :first-child{order:2} }
/* Op een smal scherm is er te weinig hoogte voor een staande illustratie; daar
   wordt het beeld een strook boven de tekst in plaats van een halve pagina. */
@media(max-width:600px){ .hero-beeld{height:52%} .hero-inhoud{padding-top:min(38vh,300px)} }
.lead{font-size:1.12rem; color:var(--inkt-zacht); max-width:56ch}

/* ── Cijfers ────────────────────────────────────────────────── */
.cijfers{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--rand-zacht);
  border:1px solid var(--rand-zacht); border-radius:20px; overflow:hidden}
@media(min-width:700px){ .cijfers{grid-template-columns:repeat(4,1fr)} }
.cijfer{background:var(--linnen); padding:26px 18px; text-align:center}
.cijfer b{display:block; font-family:var(--kop); font-size:2.2rem; font-weight:600; color:var(--olijf-diep); line-height:1}
.cijfer span{display:block; font-size:.78rem; color:var(--inkt-flauw); margin-top:6px; letter-spacing:.02em}

/* ── Vertrekken ─────────────────────────────────────────────── */
.vertrekken{display:grid; grid-template-columns:1fr; gap:16px; margin-top:34px}
@media(min-width:700px){ .vertrekken{grid-template-columns:repeat(2,1fr)} }
.vertrek{
  position:relative; background:var(--kaart); border:1px solid var(--rand);
  border-radius:20px; padding:22px; overflow:hidden;
}
.vertrek::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--kleur)}
.vertrek h3{margin-bottom:5px}
.vertrek p{font-size:.94rem; color:var(--inkt-zacht); margin:0}
.vertrek .prijs{
  display:inline-block; margin-top:14px; font-size:.8rem; font-weight:600;
  color:var(--kleur); border:1px solid currentColor; border-radius:999px; padding:4px 12px;
}
.vertrek .gratis{background:var(--olijf-diep); color:var(--kaart); border-color:transparent}

/* ── Schermen ───────────────────────────────────────────────── */
.schermen{display:flex; gap:20px; overflow-x:auto; padding:10px 24px 24px; scroll-snap-type:x mandatory}
.scherm{flex:none; width:min(70vw,248px); scroll-snap-align:center}
.scherm img{width:100%; border-radius:22px; border:1px solid var(--rand); display:block; background:var(--kaart-rust)}
.scherm figcaption{font-size:.84rem; color:var(--inkt-flauw); margin-top:11px; text-align:center}

/* ── Lijst met streepjes ────────────────────────────────────── */
ul.punten{list-style:none; padding:0; margin:22px 0 0}
ul.punten li{position:relative; padding-left:26px; margin-bottom:13px; color:var(--inkt-zacht)}
ul.punten li::before{
  content:''; position:absolute; left:0; top:.62em; width:8px; height:13px;
  background:var(--olijf); border-radius:0 8px 8px 8px; transform:rotate(18deg);
}
ul.punten b{color:var(--inkt); font-weight:600}

/* ── Citaat ─────────────────────────────────────────────────── */
.citaat{
  font-family:var(--kop); font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.35;
  text-align:center; max-width:20ch; margin:0 auto; font-style:italic;
}

/* ── Voet ───────────────────────────────────────────────────── */
footer{background:var(--inkt); color:var(--linnen); padding:56px 0 40px; font-size:.9rem}
footer a{color:var(--oker)}
footer .kolommen{display:grid; grid-template-columns:1fr; gap:28px}
@media(min-width:760px){ footer .kolommen{grid-template-columns:2fr 1fr 1fr} }
footer .fijn{opacity:.6; font-size:.8rem; margin-top:34px; line-height:1.6}