/* Jungle — shared stylesheet. To change text, photos or contact info, edit content.txt instead. */

/* Fonts are self-hosted in fonts.css/fonts/ (not loaded live from Google) so
   that visiting this site never sends a visitor's IP address to Google —
   loading fonts.googleapis.com directly does that on every page view, which
   a German court has already held violates the AVG/GDPR without consent.
   See owners-guide.html if you ever add a new Google Font: use the same
   self-hosting approach instead of an @import. */
@import url('fonts.css');

:root{
  /* Palette lifted directly from the logo mark: deep navy canvas, a white
     "badge" surface for content, brass/teal/coral as the three accents. */
  --navy:#12161D;
  --navy-deep:#0A0D12;
  --navy-soft:#1B212B;
  --ink:#14161A;
  --ink-soft:#6E7480;
  --paper:#FFFFFF;
  --cream:#F5F2EA;
  --cloud:#EDEAE2;
  --gold:#D9A441;
  --gold-deep:#B37F27;
  --gold-soft:#F3E3C2;
  --teal:#2E9E8B;
  --teal-deep:#1E6F60;
  --teal-soft:#DCF0EC;
  --coral:#E8734A;
  --coral-deep:#C2572F;
  --on-navy:#F4F1EA;
  --on-navy-soft:rgba(244,241,234,0.72);
  --shadow-soft:0 14px 34px rgba(6,8,11,0.28);
  --shadow-lift:0 22px 54px rgba(6,8,11,0.38);
  --shadow-badge:0 16px 30px rgba(6,8,11,0.45);
  --radius-lg:22px;
  --radius-md:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--navy); color:var(--on-navy);
  font-family:'Inter',-apple-system,Segoe UI,sans-serif; font-size:17px; line-height:1.65;
}
h1,h2,h3,h4{
  font-family:'Poppins',sans-serif; font-weight:800; color:var(--on-navy);
  margin:0 0 .5em; text-wrap:balance; letter-spacing:-.01em;
}
h1{font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(2.4rem,4.8vw,3.9rem); line-height:1.04; letter-spacing:-.01em; text-transform:uppercase;}
h2{font-size:clamp(1.7rem,3vw,2.35rem); line-height:1.14;}
h3{font-size:1.28rem;}
p{margin:0 0 1.1em;}
a{color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1140px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'Inter',sans-serif; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; font-size:.76rem; color:var(--gold); margin-bottom:.7em; display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:""; width:30px; height:13px; display:inline-block; flex:none;
  background-image:url("images/snake-squiggle.svg"); background-repeat:no-repeat;
  background-position:left center; background-size:contain;
}

/* ---------- scroll reveal (progressive enhancement — visible by default) ---------- */
.reveal{opacity:1; transform:none;}
body.reveal-ready .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
body.reveal-ready .reveal.visible{opacity:1; transform:translateY(0);}
body.reveal-ready .reveal-delay-1.visible{transition-delay:.08s;}
body.reveal-ready .reveal-delay-2.visible{transition-delay:.16s;}
body.reveal-ready .reveal-delay-3.visible{transition-delay:.24s;}
@media (prefers-reduced-motion: reduce){
  body.reveal-ready .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- logo mark (single raster asset, used at every size) ---------- */
.brand-mark{border-radius:22%; flex:none;}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(18,22,29,0.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(244,241,234,0.10);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 28px; max-width:1140px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand .brand-mark{width:44px; height:44px;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-name{font-family:'Archivo Black',sans-serif; font-weight:400; font-size:1.28rem; color:var(--on-navy); text-transform:uppercase;}
.brand-sub{font-size:.7rem; color:var(--gold); font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
nav.main-nav{display:flex; align-items:center; gap:2px; flex-wrap:wrap;}
nav.main-nav a{
  text-decoration:none; color:var(--on-navy-soft); font-family:'Inter',sans-serif; font-weight:700; font-size:.92rem;
  padding:9px 14px; border-radius:999px; transition:background .15s ease, color .15s ease; white-space:nowrap;
}
nav.main-nav a:hover{background:rgba(244,241,234,0.08); color:var(--on-navy);}
nav.main-nav a.active{background:var(--gold); color:var(--navy-deep);}
.lang-switch{display:flex; gap:4px; background:rgba(244,241,234,0.08); border-radius:999px; padding:3px; margin-left:6px;}
.lang-switch button{border:none; background:transparent; font-family:'Inter',sans-serif; font-weight:800; font-size:.76rem; padding:6px 12px; border-radius:999px; cursor:pointer; color:var(--on-navy-soft);}
.lang-switch button.active{background:var(--on-navy); color:var(--navy-deep); box-shadow:var(--shadow-soft);}
.nav-toggle{display:none; border:none; background:none; cursor:pointer; padding:8px; color:var(--on-navy);}
.nav-toggle svg{width:26px; height:26px;}
@media (max-width:900px){
  nav.main-nav{position:absolute; top:100%; left:0; right:0; background:var(--navy-soft); flex-direction:column; align-items:stretch; padding:10px 16px 18px; gap:2px; box-shadow:var(--shadow-soft); border-radius:0 0 18px 18px; display:none; border-bottom:1px solid rgba(244,241,234,0.1);}
  nav.main-nav.open{display:flex;}
  nav.main-nav a{padding:12px 14px;}
  .lang-switch{margin:8px 2px 0; align-self:flex-start;}
  .nav-toggle{display:block;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-weight:800; font-size:.98rem; padding:15px 28px; border-radius:999px; text-decoration:none; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; box-shadow:var(--shadow-soft);}
.btn-primary{background:linear-gradient(135deg, var(--gold), var(--gold-deep)); color:var(--navy-deep);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); filter:brightness(1.04);}
.btn-outline{background:transparent; color:var(--on-navy); border:1.5px solid rgba(244,241,234,0.35); box-shadow:none;}
.btn-outline:hover{background:rgba(244,241,234,0.08); border-color:var(--on-navy);}
.btn-gold{background:linear-gradient(135deg, var(--teal), var(--teal-deep)); color:#fff;}
.btn-gold:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); filter:brightness(1.05);}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:64px 0 88px; background:var(--navy); color:var(--on-navy);}
.hero h1, .hero .eyebrow{color:var(--on-navy);}
.hero .eyebrow{color:var(--gold);}
.hero-inner{max-width:1140px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; position:relative; z-index:1;}

/* ---------- background flourishes: Amsterdam skyline + circles/lines ----------
   Decorative only (aria-hidden via being pure CSS, no content), kept to
   dark sections at low opacity so they never compete with foreground text. */
.hero::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34px;
  background-image:url("images/amsterdam-skyline.svg");
  background-repeat:repeat-x; background-size:auto 100%; background-position:bottom left;
  opacity:0.08; pointer-events:none; z-index:0;
}
.hero::after{
  content:""; position:absolute; top:14%; left:6%; width:220px; height:220px;
  border:1.5px solid var(--on-navy); border-radius:50%; opacity:0.06;
  pointer-events:none; z-index:0;
}
.decor-line{
  content:""; position:absolute; pointer-events:none; z-index:0;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:0.14; height:1px;
}
@media (max-width:880px){.hero-inner{grid-template-columns:1fr; text-align:center;}}
.hero-mark{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
@media (max-width:880px){.hero-mark{justify-content:center;}}
.hero-mark .brand-mark{width:52px; height:52px;}
.hero-mark-line{width:1px; height:36px; background:linear-gradient(var(--gold), transparent);}
.hero-mark-text{font-family:'Inter',sans-serif; font-size:.92rem; color:var(--gold); font-weight:800; text-transform:uppercase; letter-spacing:.06em;}
.hero .lead{font-size:1.18rem; color:var(--on-navy-soft); max-width:46ch; font-family:'Inter',sans-serif; font-weight:500;}
@media (max-width:880px){.hero .lead{margin-left:auto; margin-right:auto;}}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; align-items:center;}
@media (max-width:880px){.hero-actions{justify-content:center;}}

.hero-art-frame{position:relative; display:flex; align-items:center; justify-content:center;}
.hero-badge-cluster{position:relative; width:100%; max-width:340px; aspect-ratio:1;}
.hero-badge-cluster .sticker{position:absolute; filter:drop-shadow(var(--shadow-badge));}
.hero-badge-cluster .sticker.main{inset:6% 6% 6% 6%; border-radius:26%;}
.hero-badge-cluster .float-sq{position:absolute; border-radius:8px;}
.hero-badge-cluster .float-1{top:2%; right:6%; width:30px; height:30px; background:var(--gold); transform:rotate(18deg); box-shadow:var(--shadow-soft);}
.hero-badge-cluster .float-2{bottom:8%; left:0%; width:24px; height:24px; background:var(--coral); border-radius:50%; box-shadow:var(--shadow-soft);}
.hero-badge-cluster .float-3{top:44%; left:-4%; width:14px; height:14px; background:var(--teal); border-radius:50%; opacity:.85;}

/* ---------- recurring badge flourish (pricing "eerlijke prijs" etc.) ---------- */
.deal-badge{width:132px; height:132px; flex:none; border-radius:26%; filter:drop-shadow(0 12px 26px rgba(217,164,65,.28));}

/* ---------- sections ---------- */
section{padding:78px 0;}
.section-alt{background:var(--navy-soft); position:relative; overflow:hidden;}
.section-alt::before{
  content:""; position:absolute; bottom:-60px; right:-30px; width:200px; height:200px;
  border:1.5px solid var(--coral); border-radius:50%; opacity:0.10; pointer-events:none; z-index:0;
}
.section-alt::after{
  content:""; position:absolute; top:10%; left:-40px; width:120px; height:120px;
  border:1.5px solid var(--on-navy); border-radius:50%; opacity:0.07; pointer-events:none; z-index:0;
}
.section-alt > .container{position:relative; z-index:1;}
.section-dark{background:var(--navy-deep); position:relative; overflow:hidden;}
.section-dark h2, .section-dark .eyebrow{color:var(--on-navy);}
.section-dark::before{
  content:""; position:absolute; top:-50px; right:-50px; width:260px; height:260px;
  border:1.5px solid var(--teal); border-radius:50%; opacity:0.12; pointer-events:none; z-index:0;
}
.section-dark::after{
  content:""; position:absolute; bottom:8%; left:3%; width:90px; height:90px;
  border:1.5px solid var(--gold); border-radius:50%; opacity:0.14; pointer-events:none; z-index:0;
}
.section-dark > .container{position:relative; z-index:1;}
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
section p{color:var(--on-navy-soft);}
section h2, section h3{color:var(--on-navy);}

/* ---------- cards (light "badge" surfaces floating on the dark canvas) ---------- */
.grid{display:grid; gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:880px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}}
.card{background:var(--paper); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-soft); transition:transform .2s ease, box-shadow .2s ease;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);}
.card .icon{width:44px; height:44px; margin-bottom:14px; color:var(--teal);}
.card h3{margin-bottom:.35em; font-size:1.15rem; color:var(--ink);}
.card p{color:var(--ink-soft); margin-bottom:0; font-size:.96rem;}

/* ---------- about page: highlight strip + pull-quote ---------- */
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start;}
@media (max-width:880px){.about-grid{grid-template-columns:1fr; gap:36px;}}
.highlight-rail{display:flex; flex-direction:column; gap:16px;}
.highlight-item{background:var(--paper); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-soft);}
.highlight-item h4{font-size:1.02rem; margin-bottom:.3em; font-family:'Poppins',sans-serif; color:var(--teal-deep);}
.highlight-item p{color:var(--ink-soft); margin-bottom:0; font-size:.93rem;}
.pull-quote{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1.5rem; font-style:normal;
  line-height:1.35; color:var(--on-navy); background:var(--navy-deep); border-radius:var(--radius-lg);
  padding:34px 36px; margin:44px 0; max-width:74ch; position:relative; box-shadow:var(--shadow-soft);
}
.pull-quote::before{content:"\201C"; font-family:'Archivo Black',sans-serif; color:var(--gold); font-size:3rem; position:absolute; top:2px; left:20px; line-height:1;}

/* ---------- pricing: factor cards + connected timeline ---------- */
.factor-ribbon{position:relative; overflow:hidden;}
.factor-ribbon .numeral{
  position:absolute; top:-14px; right:-2px; font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:4.6rem; color:var(--ink); opacity:.06; line-height:1; pointer-events:none;
}
@media (min-width:881px){
  .grid-3.factors-grid > .factor-ribbon:nth-child(2){transform:translateY(-14px);}
}

.steps{counter-reset:step; display:flex; flex-direction:column; gap:22px; margin:30px 0; position:relative; padding-left:2px;}
.steps::before{content:""; position:absolute; left:19px; top:14px; bottom:14px; width:3px; background:var(--teal); opacity:.85;}
.step{display:flex; gap:20px; align-items:flex-start; position:relative;}
.step-num{flex:none; width:40px; height:40px; border-radius:50%; background:var(--navy-deep); color:var(--gold); font-family:'Poppins',sans-serif; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.05rem; position:relative; z-index:1; border:3px solid var(--paper); box-shadow:var(--shadow-soft);}
.step-body h4{margin-bottom:.25em; font-size:1.08rem; font-family:'Poppins',sans-serif; color:var(--on-navy);}
.step-body p{color:var(--on-navy-soft); margin-bottom:0;}
.info-box{background:var(--gold-soft); border-radius:var(--radius-md); padding:26px 28px; margin:26px 0; box-shadow:var(--shadow-soft);}
.info-box h2, .info-box h3, .info-box h4{color:var(--ink);}
.info-box p{margin-bottom:.5em; color:var(--ink);}
.info-box p:last-child{margin-bottom:0;}

/* ---------- contact ---------- */
.contact-card{background:var(--paper); border-radius:var(--radius-lg); padding:44px; box-shadow:var(--shadow-lift); max-width:640px; margin:0 auto;}
.contact-form{display:flex; flex-direction:column; gap:14px; margin-top:22px;}
.contact-form label{font-family:'Inter',sans-serif; font-weight:700; font-size:.86rem; color:var(--ink-soft);}
.contact-form input, .contact-form textarea{
  padding:14px 16px; border-radius:10px; border:1.5px solid rgba(20,22,26,0.14); font-family:'Inter',sans-serif;
  font-size:1rem; background:var(--cream); color:var(--ink); width:100%; margin-top:6px;
  transition:border-color .15s ease, background .15s ease;
}
.contact-form textarea{min-height:120px; resize:vertical;}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--teal); background:#fff;}
.hp-field{position:absolute; left:-9999px;}
.form-success{display:none; background:var(--navy-deep); color:var(--gold); border-radius:10px; padding:16px 18px; font-weight:800; margin-top:16px; font-family:'Inter',sans-serif;}
.form-success.show{display:block;}
.form-note{font-size:.85rem; color:var(--ink-soft); margin-top:10px; font-family:'Inter',sans-serif;}

.contact-strip{display:flex; flex-wrap:wrap; gap:16px; justify-content:center;}
.contact-chip{display:flex; align-items:center; gap:10px; background:var(--paper); padding:12px 20px; border-radius:999px; box-shadow:var(--shadow-soft); text-decoration:none; color:var(--ink); font-weight:800; font-family:'Inter',sans-serif; font-size:.9rem; transition:transform .2s ease, box-shadow .2s ease;}
.contact-chip:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.contact-chip svg{width:19px; height:19px; flex:none; color:var(--teal);}
.contact-chip.muted{color:var(--ink-soft); font-style:italic; font-weight:600; box-shadow:none;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--navy-deep); color:var(--on-navy); padding:56px 0 26px; position:relative; overflow:hidden; border-top:1px solid rgba(244,241,234,0.08);}
footer.site-footer::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background-image:url("images/amsterdam-skyline.svg");
  background-repeat:repeat-x; background-size:auto 100%; background-position:bottom left;
  opacity:0.05; pointer-events:none; z-index:0;
}
footer.site-footer::after{
  content:""; position:absolute; top:-50px; right:8%; width:170px; height:170px;
  border:1.5px solid var(--gold); border-radius:50%; opacity:0.08; pointer-events:none; z-index:0;
}
.footer-inner{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; position:relative; z-index:1;}
@media (max-width:880px){.footer-inner{grid-template-columns:1fr; text-align:center;}}
.footer-bottom{position:relative; z-index:1;}
footer.site-footer h4{color:var(--gold); font-size:.9rem; font-family:'Inter',sans-serif; margin-bottom:14px; text-transform:uppercase; letter-spacing:.08em; font-weight:800;}
footer.site-footer a{color:var(--on-navy); text-decoration:none; opacity:.88;}
footer.site-footer a:hover{opacity:1; text-decoration:underline;}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
@media (max-width:880px){.footer-brand{justify-content:center;}}
.footer-brand .brand-mark{width:38px; height:38px;}
.footer-nav{display:flex; flex-direction:column; gap:9px; font-size:.94rem; font-family:'Inter',sans-serif;}
.footer-bottom{margin-top:40px; padding-top:22px; border-top:1px solid rgba(244,241,234,0.1); font-size:.8rem; opacity:.68; text-align:center; font-family:'Inter',sans-serif;}

/* ---------- decorative page-header accent ---------- */
.decor{position:absolute; pointer-events:none;}
.decor svg{width:100%; height:100%; display:block;}
.title-rule{
  width:96px; height:22px; margin:0 0 18px; display:block;
  background-image:url("images/snake-squiggle.svg"); background-repeat:no-repeat;
  background-position:left center; background-size:contain;
}

.edit-note{display:flex; gap:10px; align-items:flex-start; background:var(--gold-soft); border-radius:var(--radius-md); padding:18px 20px; margin:22px 0; font-size:.9rem; color:var(--ink); font-family:'Inter',sans-serif; box-shadow:var(--shadow-soft);}
.edit-note svg{flex:none; width:20px; height:20px; margin-top:2px;}