/* wijsstroom.ink — Warm editorial + earthy palette */
:root{
  --bg:#fffaf3;        /* cream */
  --paper:#ffffff;
  --ink:#1b1f2a;
  --muted:#6b7280;
  --primary:#b45309;   /* terracotta */
  --forest:#0e766e;    /* deep teal/forest */
  --indigo:#4338ca;    /* indigo */
  --accent:#8b5cf6;    /* purple accent */
  --border:#e7e1d9;
  --shadow: 0 20px 50px rgba(27,31,42,.08);
  --radius:18px;
  --radius-lg:28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(900px 700px at 110% -10%, rgba(180,83,9,.12), transparent 60%),
    radial-gradient(800px 700px at -10% -20%, rgba(14,118,110,.10), transparent 55%),
    linear-gradient(180deg,#fffdf8 0%, #fffaf3 60%, #fff7ec 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial;
  line-height:1.7; letter-spacing:.2px;
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header — underline nav, center brand */
.header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75); border-bottom:1px solid var(--border)}
.nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:12px 0}
.brand{justify-self:center; display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:900; letter-spacing:.2px}
.brand .logo{width:36px; height:36px; border-radius:12px; background:
  radial-gradient(40% 40% at 30% 30%, var(--primary), transparent 60%),
  radial-gradient(50% 50% at 70% 70%, var(--forest), transparent 60%),
  radial-gradient(40% 40% at 50% 90%, var(--indigo), transparent 60%);
  box-shadow: var(--shadow)}
nav ul{display:flex; gap:16px; list-style:none; padding:0; margin:0; align-items:center}
nav a{color:var(--ink); text-decoration:none; font-weight:800; opacity:.9; position:relative}
nav a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:3px; background:linear-gradient(90deg,var(--forest),var(--primary)); border-radius:3px; transition:width .2s ease}
nav a:hover::after{width:100%}
.actions{display:flex; justify-content:flex-end; gap:10px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--paper); color:var(--ink); font-weight:900; box-shadow:var(--shadow)}
.btn-primary{border:none; background:linear-gradient(135deg,var(--forest),#60a5fa); color:white}
.btn-ghost{background:transparent}
.burger{display:none; cursor:pointer; flex-direction:column; gap:5px; justify-self:end; margin-top: 15px; margin-right: 10px;} 
.burger span{width:24px; height:3px; border-radius:2px; background:#1b1f2a}

@media (max-width:980px){
  .nav{grid-template-columns:auto 1fr auto}
  .brand{justify-self:flex-start}
  nav ul{display:none; position:absolute; left:20px; right:20px; top:60px; padding:12px;
    background:rgba(255,255,255,.9); backdrop-filter: blur(12px); border:1px solid var(--border); border-radius:14px; flex-direction:column; gap:10px}
  nav ul.show{display:flex}
  .burger{display:flex}
}

/* Serif display for big headings */
h1,h2,h3{font-family: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif}

/* Hero — split collage and big serif */
.hero{position:relative; overflow:hidden; padding:70px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center}
.kicker{display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-weight:900; color:#0f3b9e; background:#e8f2ff; padding:6px 10px; border-radius:999px; border:1px solid var(--border)}
h1{font-size:clamp(2.4rem, 1.2rem + 3.4vw, 3.9rem); line-height:1.06; margin:.2em 0 .35em}
.lead{color:var(--muted)}
.collage{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ph{aspect-ratio:4/3; background:var(--paper); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.ph::after{content:""; position:absolute; inset:0; background:
  radial-gradient(50% 50% at 30% 30%, rgba(14,118,110,.18), transparent 60%),
  radial-gradient(50% 50% at 70% 70%, rgba(180,83,9,.18), transparent 60%);}
.ph.tilt{transform: rotate(-2deg)}
.ph.tilt2{transform: rotate(2deg)}

/* Section basics */
.section{padding:60px 0}
.section h2{font-size:clamp(1.8rem, 1rem + 2.4vw, 2.6rem); margin:.15em 0 .6em}
.subtle{color:var(--muted)}

/* Feature band (mosaic) */
.mosaic{display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px}
.tile{border:1px solid var(--border); background:var(--paper); border-radius:18px; padding:16px; box-shadow:var(--shadow)}
.tile.big{grid-row: span 2}
.tile h3{margin:.1em 0 .4em}

/* Manifest + Anti-hype code (stripe) */
.stripe{background:linear-gradient(180deg,#fff,#fff7ec); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.card{background:var(--paper); border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow)}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .collage{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
}

/* Myth vs Fact */
.mvf{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.myth{background:#fff1e6}
.fact{background:#e8fff8}
.bl{border:1px dashed var(--border); border-radius:16px; padding:14px}
@media (max-width:900px){ .mvf{grid-template-columns:1fr} }

/* Experts grid */
.experts{display:grid; grid-template-columns: repeat(4,1fr); gap:14px}
.expert{background:var(--paper); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:var(--shadow); text-align:center}
.expert .avatar{width:74px; height:74px; border-radius:999px; margin:0 auto 8px; background:linear-gradient(135deg,#fde68a,#a7f3d0)}
@media (max-width:980px){ .experts{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .experts{grid-template-columns:1fr} }

/* Workshops schedule table */
.table{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th,.table td{padding:12px 14px; border-bottom:1px solid var(--border); text-align:left}
.table th{background:#faf7f2}

/* Library with tag filter */
.library{display:grid; grid-template-columns: repeat(3,1fr); gap:14px}
.lib-item{background:var(--paper); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:var(--shadow)}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:800}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.filter{padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:800}
.filter.active{background:linear-gradient(135deg,var(--forest),#60a5fa); color:#fff; border:none}
@media (max-width:980px){ .library{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .library{grid-template-columns:1fr} }

/* FAQ */
.faq{border:1px solid var(--border); border-radius:18px; background:var(--paper); box-shadow:var(--shadow)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-q{display:flex; justify-content:space-between; align-items:center; padding:14px; cursor:pointer; font-weight:800}
.faq-a{display:none; padding:0 14px 14px; color:var(--muted)}
.faq-item.open .faq-a{display:block}

/* Newsletter + CTA form (new style) */
.news{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start}
form .row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom: 10px;}
input,select,textarea,button{width:100%; padding:14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--ink); font-size:1rem}
input::placeholder{color:#9aa3b2}
button{cursor:pointer; border:none; background:linear-gradient(135deg,var(--forest),#60a5fa); color:white; font-weight:900}
@media (max-width:980px){ .news{grid-template-columns:1fr} }

/* Footer */
.footer{border-top:1px solid var(--border); background:#fff; margin-top:70px}
.footer-inner{padding:24px 0; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:18px}
.footer a{color:#0b1220; text-decoration:none}
@media (max-width:900px){ .footer-inner{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .footer-inner{grid-template-columns:1fr; text-align:center} }

/* Cookie banner */
.cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:60; display:none; gap:14px; align-items:center; flex-wrap:nowrap;
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:var(--shadow)}
.cookie.show{display:flex}
.cookie > .text{flex:1 1 auto; min-width:260px}
.cookie .actions{margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:nowrap}
.cookie .actions a, .cookie .actions button{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; min-height:46px;
  border-radius:12px; font-weight:800; text-decoration:none; white-space:nowrap; flex:0 0 auto; border:1px solid var(--border); box-shadow:var(--shadow)}
.cookie .actions a{background:#fff; color:#0b1220}
.cookie .actions button{background:linear-gradient(135deg,var(--forest),#60a5fa); color:#fff; border:none}
@media (max-width:980px){
  .cookie{flex-direction:column; align-items:stretch}
  .cookie .actions{width:100%; flex-direction:column}
  .cookie .actions a, .cookie .actions button{width:100%}
}

/* Reveal */
.reveal{opacity:0; transform: translateY(12px); transition: all .7s ease}
.reveal.visible{opacity:1; transform: translateY(0)}

/* intl-tel-input */
.iti{width:100%}
.iti input{width:100%!important; padding:14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:#0b1220}


/* NEW: logos strip */
.logos{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff; padding:18px 0}
.logos .row{display:flex; gap:24px; justify-content:space-between; align-items:center; flex-wrap:wrap; opacity:.7}

/* NEW: image gallery (masonry) */
.gallery{column-count:3; column-gap:14px}
.gallery .g{break-inside:avoid; margin:0 0 14px; border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); background:#fff}
.gallery img{width:100%; display:block}
@media (max-width:990px){ .gallery{column-count:2} }
@media (max-width:620px){ .gallery{column-count:1} }

/* NEW: Cases grid */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.case{background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.case img{width:100%; aspect-ratio:16/10; display:block}
.case .p{padding:14px}
@media (max-width:980px){ .cases{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .cases{grid-template-columns:1fr} }

/* NEW: Horizontal timeline */
.htl{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.htl .t{min-width:220px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow); scroll-snap-align:start; position:relative}
.htl .t::before{content:""; position:absolute; left:12px; right:12px; top:-8px; height:4px; background:linear-gradient(90deg,var(--forest),var(--primary)); border-radius:999px}

/* NEW: Pricing */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.price{background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow)}
.price .big{font-size:2rem; font-weight:900}
.price .cta{margin-top:10px}
@media (max-width:980px){ .pricing{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .pricing{grid-template-columns:1fr} }

/* NEW: Quote slider */
.slider{position:relative}
.slides{display:flex; gap:14px; overflow:hidden}
.slide{min-width:100%; background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow)}
.controls{display:flex; gap:10px; justify-content:flex-end; margin-top:8px}
.btn-circle{width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#fff; cursor:pointer}

/* NEW: Stats band */
.band{background:linear-gradient(180deg,#fff,#fff7ec); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; text-align:center}
.stat{background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow)}
.stat .num{font-size:1.8rem; font-weight:900}
@media (max-width:900px){ .stats{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .stats{grid-template-columns:1fr} }

/* NEW: Split CTA with image */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:center}
.split .photo{border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); background:#fff}
.split .photo img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover}
@media (max-width:980px){ .split{grid-template-columns:1fr} }

/* NEW: Press row */
.press{display:flex; gap:18px; flex-wrap:wrap; align-items:center; opacity:.7}
.press .pill{border:1px solid var(--border); border-radius:999px; padding:8px 12px; background:#fff; box-shadow:var(--shadow)}

/* NEW: Avatar images for testimonials */
.avatar{background-size:cover!important; background-position:center!important}