/* The Travel Stamp Company: website-ontwerp v1 */
:root{
  --navy:#13233F;--deep:#0B1630;--gold:#C8A04A;--gold-2:#E3C67E;--cream:#F4EEE1;--paper:#FBF8F1;
  --ink:#1C1F26;--muted:#5F6676;--line:#E2DACB;--red:#B5402F;--sea:#1F7A86;
  --display:'Archivo',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:14px;--wrap:1160px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.on-cream .kicker{color:#9A7428}
h1,h2,h3{font-family:var(--display);color:inherit;margin:0;letter-spacing:-.01em}
h1{font-weight:800;font-size:clamp(40px,6.4vw,76px);line-height:1;font-stretch:104%}
h2{font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.06;font-stretch:104%}
h3{font-weight:700;font-size:20px;line-height:1.2}
p{margin:0}
.lede{font-size:18px;line-height:1.6;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:600;font-size:16px;padding:14px 22px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-ghost{border-color:rgba(244,238,225,.5);color:var(--cream)}
.btn-navy{background:var(--navy);color:var(--cream)}
.btn-line{border-color:var(--navy);color:var(--navy)}
.btn-block{width:100%}

/* kop */
.top{position:absolute;inset:0 0 auto 0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.lock{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream)}
.lock svg{width:38px;height:auto}
.lock span{font-family:var(--display);font-stretch:118%;font-weight:700;font-size:11px;letter-spacing:.2em;line-height:1.35;white-space:nowrap}
.nav{display:flex;align-items:center;gap:26px;font-size:14.5px;color:rgba(244,238,225,.86)}
.nav a{text-decoration:none}
.lang{white-space:nowrap;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:rgba(244,238,225,.75)}
.lang b{color:var(--cream)}
.top .btn{padding:10px 18px;font-size:14.5px}
.solid{position:relative;background:var(--navy)}

/* opening */
.hero{position:relative;min-height:760px;color:var(--cream);background:var(--deep);overflow:hidden}
.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,22,48,.92) 0%,rgba(11,22,48,.72) 34%,rgba(11,22,48,.05) 62%)}
.hero .wrap{position:relative;z-index:2;padding-top:200px;padding-bottom:110px}
.hero-txt{max-width:470px;display:flex;flex-direction:column;gap:22px}
.hero .lede{color:rgba(244,238,225,.88);font-size:19px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.trust{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:rgba(244,238,225,.78)}
.trust span:before{content:"✦";color:var(--gold);margin-right:7px;font-size:11px}

/* blokken */
section{position:relative}
.block{padding:104px 0}
.on-cream{background:var(--cream)}
.on-paper{background:var(--paper)}
.on-navy{background:var(--navy);color:var(--cream)}
.on-navy .lede{color:rgba(244,238,225,.8)}
.head{display:flex;flex-direction:column;gap:14px;max-width:640px;margin-bottom:48px}
.head.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}

/* zo werkt het */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{display:flex;flex-direction:column;gap:16px}
.step .ph{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4}
.step .ph img{width:100%;height:100%;object-fit:cover}
.num{position:absolute;left:14px;top:14px;width:46px;height:46px;border-radius:50%;background:var(--cream);color:var(--navy);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px;box-shadow:0 0 0 3px var(--cream),0 0 0 4.5px var(--navy)}
.step p{color:var(--muted)}

/* het boekje */
.inside{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.cover-ph{border-radius:var(--r);overflow:hidden}
.pages{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 26px}
.pages figure{margin:0;display:flex;flex-direction:column;gap:8px}
.pages svg{width:100%;height:auto;border-radius:3px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.pages figcaption{font-size:12.5px;color:rgba(244,238,225,.72)}
.specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;font-size:15px}
.specs li{display:flex;gap:10px;align-items:flex-start;color:rgba(244,238,225,.9)}
.specs li:before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:radial-gradient(circle,var(--gold) 0 3px,transparent 3.5px),transparent;box-shadow:inset 0 0 0 1.5px var(--gold)}
.price-line{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.price-line .p{font-family:var(--display);font-weight:800;font-size:34px;font-stretch:104%}
.price-line small{display:block;font-size:13px;color:rgba(244,238,225,.7);font-weight:400;font-family:var(--body)}

/* emotie */
.feel{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.feel .ph{border-radius:var(--r);overflow:hidden}
.feel blockquote{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1.08;font-stretch:104%;color:var(--navy)}
.feel .lede{margin-top:20px}
.feel .sig{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#9A7428;text-transform:uppercase}

/* galerij */
.mosaic{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:260px 260px;gap:14px}
.mosaic div{border-radius:var(--r);overflow:hidden;position:relative}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic .big{grid-row:span 2}
.mosaic span{position:absolute;left:12px;bottom:12px;background:rgba(19,35,63,.82);color:var(--cream);font-size:12.5px;padding:5px 10px;border-radius:999px}

/* curacao */
.port{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.port .ph{position:relative;border-radius:var(--r);overflow:hidden}
.port .stamp{position:absolute;right:-8px;bottom:-14px;width:190px;transform:rotate(-9deg);mix-blend-mode:multiply;opacity:.95;background:rgba(251,248,241,.0)}
.port .stampwrap{position:absolute;right:18px;bottom:18px;width:170px;height:170px;border-radius:50%;background:rgba(251,248,241,.92);display:grid;place-items:center;transform:rotate(-8deg);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.port .stampwrap svg{width:150px}
.facts-row{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap}
.facts-row div{display:flex;flex-direction:column;gap:2px}
.facts-row b{font-family:var(--display);font-size:26px;font-weight:800;color:var(--navy);font-stretch:104%}
.facts-row span{font-size:13.5px;color:var(--muted)}

/* bestellen */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:rgba(244,238,225,.06);border:1px solid rgba(244,238,225,.16);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:16px;position:relative}
.plan.rec{background:var(--cream);color:var(--ink);border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.plan .tag{position:absolute;top:-13px;left:24px;background:var(--gold);color:var(--navy);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.plan h3{font-size:21px}
.plan .amt{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;font-stretch:104%}
.plan .amt small{font-family:var(--body);font-size:14px;font-weight:500;opacity:.7;margin-left:4px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px;flex:1}
.plan li{display:flex;gap:9px}
.plan li:before{content:"✓";color:var(--gold);font-weight:700}
.plan.rec li:before{color:#9A7428}
.plan .note{font-size:13px;opacity:.7}
.secure{margin-top:26px;text-align:center;font-size:13.5px;color:rgba(244,238,225,.7)}

/* verhaal */
.story{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;max-width:860px;margin:0 auto}
.story .mark{width:120px}
.story p{font-size:19px;line-height:1.65;color:var(--ink)}
.story p+p{margin-top:14px}
.story .sig{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9A7428}

/* vragen */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:20px 4px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:17px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-family:var(--display);font-size:24px;line-height:1;color:var(--gold)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin-top:10px;color:var(--muted);max-width:680px}

/* voet */
.foot{background:var(--deep);color:rgba(244,238,225,.75);padding:64px 0 40px;font-size:14px}
.foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
.foot .logo svg{width:150px}
.foot h4{margin:0 0 12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.foot a{display:block;text-decoration:none;margin-bottom:7px}
.foot .legal{grid-column:1/-1;border-top:1px solid rgba(244,238,225,.14);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

/* telefoon */
@media (max-width:820px){
  .wrap{padding:0 20px}
  .nav .hide-m{display:none}
  .lock span{font-size:9.5px}
  .lock svg{width:32px}
  .top .wrap{height:64px}
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero picture img{position:relative;height:440px;object-position:50% 40%}
  .hero:after{display:none}
  .hero picture{display:block;position:relative}
  .hero picture:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,48,.55) 0%,rgba(11,22,48,0) 30%,rgba(11,22,48,0) 70%,var(--deep) 100%)}
  .hero .wrap{padding-top:8px;padding-bottom:56px}
  .hero-txt{gap:18px}
  .hero .lede{font-size:17px}
  .hero .ctas .btn{flex:1}
  .block{padding:72px 0}
  .head{margin-bottom:32px}
  .steps,.inside,.feel,.port,.plans{grid-template-columns:1fr}
  .steps{gap:34px}
  .inside,.feel,.port{gap:32px}
  .pages{grid-template-columns:repeat(4,1fr);gap:8px}
  .pages figcaption{font-size:11px}
  .specs{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:170px}
  .mosaic .big{grid-column:span 2;grid-row:auto}
  .plans{gap:24px}
  .story{grid-template-columns:1fr;gap:20px}
  .story .mark{width:90px}
  .story p{font-size:17px}
  .foot .wrap{grid-template-columns:1fr;gap:28px}
  .port .stampwrap{width:118px;height:118px;right:12px;bottom:12px}
  .port .stampwrap svg{width:104px}
}