:root {
  --page-bg: #ead9bd;
  --gold: #a98334;
  --gold-deep: #7a5a1e;
  --gold-soft: rgba(184, 146, 65, 0.72);
  --cream: rgba(255, 248, 226, 0.70);
  --cream-strong: rgba(255, 248, 226, 0.90);
  --blue: #214a69;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--page-bg);
  font-family: Georgia, 'Times New Roman', serif;
}
body { min-height: 100vh; }
a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.stage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-bg);
}
.artboard {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  line-height: 0;
}
.artboard.wide-page {
  width: min(100vw, calc(100vh * 2732 / 1536));
  aspect-ratio: 2732 / 1536;
}
.artboard.mobile-artboard {
  width: min(100vw, calc(100vh * 941 / 1672));
  aspect-ratio: 941 / 1672;
}
.artboard img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  display: block;
  text-decoration: none;
  background: rgba(255,255,255,0);
  border-radius: 999px;
  z-index: 5;
}
.hotspot:focus-visible,
.return-home:focus-visible,
.action-pill:focus-visible {
  outline: 2px solid rgba(160, 121, 48, .85);
  outline-offset: 3px;
}
body.show-hotspots .hotspot {
  background: rgba(255, 230, 150, .18);
  outline: 1px solid rgba(160, 121, 48, .45);
}

/* Desktop homepage hotspots */
.nav-home       { left: 31.7%; top: 5.5%; width: 5.7%;  height: 4.6%; }
.nav-over       { left: 39.4%; top: 5.5%; width: 11.6%; height: 4.6%; }
.nav-engelen    { left: 52.7%; top: 5.5%; width: 11.2%; height: 4.6%; }
.nav-inspiratie { left: 66.0%; top: 5.5%; width: 10.0%; height: 4.6%; }
.nav-facebook   { left: 77.7%; top: 5.5%; width: 9.7%;  height: 4.6%; }

.btn-ontdek  { left: 33.1%; top: 70.0%; width: 11.2%; height: 6.7%; }
.btn-amazon  { left: 44.7%; top: 70.0%; width: 12.8%; height: 6.7%; }
.btn-contact { left: 57.9%; top: 70.0%; width: 11.0%; height: 6.7%; }

/* Mobile homepage hotspots */
.mobile-amazon { left: 31%; top: 39.2%; width: 38%; height: 4.6%; }
.mobile-lees   { left: 31%; top: 45.8%; width: 38%; height: 4.6%; }
.mobile-email  { left: 31%; top: 52.4%; width: 38%; height: 4.6%; }
.mobile-extra-facebook { left: 37%; top: 83%; width: 26%; height: 6%; }

.return-home {
  position: absolute;
  left: 3.2%;
  bottom: 3.4%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding: .72rem 1.3rem;
  border: 1px solid rgba(160, 121, 48, .50);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 251, 238, .96), rgba(247, 233, 202, .84));
  color: #765520;
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(.72rem, 1vw, .92rem);
  line-height: 1;
  box-shadow: 0 8px 24px rgba(96, 70, 30, .14), inset 0 0 18px rgba(255,255,255,.35);
  backdrop-filter: blur(2px);
}
.return-home:hover {
  background: linear-gradient(180deg, rgba(255, 253, 245, .98), rgba(250, 238, 214, .92));
}

.placeholder-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2.5rem;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.92), rgba(255,255,255,0) 22rem),
    radial-gradient(circle at 15% 82%, rgba(255,255,255,.30), rgba(255,255,255,0) 18rem),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,.22), rgba(255,255,255,0) 16rem),
    linear-gradient(135deg, #f3dfb8 0%, #f9edd3 48%, #e5d3b5 100%);
  color: #8a6824;
  text-align: center;
}
.placeholder-card {
  position: relative;
  width: min(820px, 94vw);
  padding: clamp(2rem, 5vw, 4.2rem);
  border: 1px solid rgba(160, 121, 48, .30);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,250,238,.84), rgba(252,244,225,.66));
  box-shadow: 0 20px 50px rgba(107,79,38,.14), inset 0 0 50px rgba(255,255,255,.38);
  backdrop-filter: blur(3px);
  overflow: hidden;
}
.placeholder-card::before,
.placeholder-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,220,.75), rgba(255,247,220,0));
  pointer-events: none;
}
.placeholder-card::before { left: -40px; top: -30px; }
.placeholder-card::after { right: -40px; bottom: -30px; }

.ethereal-header { margin-bottom: 1rem; }
.ethereal-header .featherline {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: .45em;
  color: rgba(143, 112, 44, .8);
  margin-bottom: .8rem;
}
.ethereal-header h1 {
  margin: 0;
  color: #8a6824;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.placeholder-card p {
  margin: .75rem auto;
  max-width: 52ch;
  color: #234e68;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.7;
}
.scroll-box {
  margin: 1.5rem auto 1.25rem;
  max-width: 38rem;
  padding: 1.15rem 1.25rem;
  border-radius: 24px;
  background: rgba(255,248,226,.74);
  border: 1px solid rgba(160,121,48,.18);
  box-shadow: inset 0 0 20px rgba(255,255,255,.28);
}
.email-display {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--gold-deep);
  font-weight: 700;
  word-break: break-word;
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  margin-top: 1.35rem;
}
.action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding: .78rem 1.35rem;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .9rem;
  color: #765520;
  border: 1px solid rgba(160, 121, 48, .42);
  background: linear-gradient(180deg, rgba(255, 251, 238, .97), rgba(248, 235, 209, .86));
  box-shadow: 0 10px 24px rgba(96, 70, 30, .10), inset 0 0 18px rgba(255,255,255,.28);
}
.action-pill:hover {
  background: linear-gradient(180deg, rgba(255, 253, 245, .98), rgba(250, 238, 214, .92));
}
.note-soft {
  color: #537188;
  font-style: italic;
  font-size: clamp(.96rem, 1.8vw, 1.08rem);
}
.corner-feather {
  position: absolute;
  font-size: clamp(2.2rem, 4vw, 3rem);
  opacity: .55;
  color: rgba(155, 121, 45, .66);
  pointer-events: none;
}
.corner-feather.tl { left: 1rem; top: .8rem; }
.corner-feather.tr { right: 1rem; top: .8rem; transform: scaleX(-1); }
.corner-feather.bl { left: 1.2rem; bottom: 1rem; transform: rotate(-10deg); }
.corner-feather.br { right: 1.2rem; bottom: 1rem; transform: scaleX(-1) rotate(-10deg); }

/* V4: ethereal contact page with scrolls, feathered quill and soft temple feeling */
.contact-card {
  width: min(900px, 94vw);
  min-height: min(680px, 92vh);
  padding: clamp(2rem, 5vw, 4.4rem);
}
.contact-card .ethereal-header h1 { letter-spacing: .18em; }
.quill-scene {
  position: relative;
  width: min(420px, 80vw);
  height: 150px;
  margin: 1.2rem auto .4rem;
}
.scroll-roll {
  position: absolute;
  top: 34px;
  width: 155px;
  height: 82px;
  border: 1px solid rgba(160, 121, 48, .24);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 50%, rgba(171, 134, 53, .20), rgba(171, 134, 53, 0) 28%),
    radial-gradient(circle at 82% 50%, rgba(171, 134, 53, .20), rgba(171, 134, 53, 0) 28%),
    linear-gradient(90deg, rgba(237, 211, 150, .68), rgba(255, 248, 226, .92), rgba(237, 211, 150, .68));
  box-shadow: 0 12px 26px rgba(106, 78, 34, .12), inset 0 0 20px rgba(255,255,255,.36);
  opacity: .88;
}
.scroll-roll.left { left: 4%; transform: rotate(-5deg); }
.scroll-roll.right { right: 4%; transform: rotate(5deg); }
.scroll-roll::before,
.scroll-roll::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 18px;
  height: 96px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(139,104,35,.42), rgba(255,245,210,.92), rgba(139,104,35,.42));
  box-shadow: inset 0 0 8px rgba(255,255,255,.42);
}
.scroll-roll::before { left: -9px; }
.scroll-roll::after { right: -9px; }
.quill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 42px;
  height: 150px;
  transform: translateX(-50%) rotate(35deg);
  transform-origin: 50% 85%;
  filter: drop-shadow(0 10px 12px rgba(101, 75, 32, .16));
}
.quill::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 30px;
  height: 104px;
  border-radius: 70% 30% 60% 40%;
  background:
    radial-gradient(ellipse at 60% 20%, rgba(255,255,255,.90), rgba(255,255,255,0) 32%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,225,190,.88) 55%, rgba(196,156,70,.55));
  clip-path: polygon(48% 0%, 82% 9%, 100% 28%, 88% 54%, 62% 75%, 52% 100%, 39% 76%, 14% 54%, 0 28%, 18% 9%);
}
.quill::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 62px;
  width: 6px;
  height: 88px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(138,101,31,.62), rgba(95,72,34,.86));
}
.quill-nib {
  position: absolute;
  left: 14px;
  bottom: -2px;
  width: 14px;
  height: 26px;
  background: linear-gradient(180deg, #d6b971, #765520);
  clip-path: polygon(50% 0, 100% 72%, 53% 100%, 0 72%);
}
.contact-card .scroll-box {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(255,249,229,.82), rgba(247,232,199,.70));
}
.copy-note {
  margin-top: .6rem;
  color: #537188;
  font-size: .96rem;
}

.mobile-page, .extra-page { display: none; }

@media (max-width: 900px) {
  .desktop-page { display: none; }
  .mobile-page { display: flex; }
  body.show-extra .mobile-page { display: none; }
  body.show-extra .extra-page { display: flex; }
  .return-home {
    left: 2.2%;
    bottom: 2.6%;
    min-width: 10.8rem;
    padding: .62rem 1.05rem;
  }
  .placeholder-page { padding: 1rem; }
  .action-row { flex-direction: column; align-items: center; }
  .quill-scene { height: 120px; }
  .scroll-roll { width: 130px; height: 68px; }
  .quill { height: 126px; }
}


/* V5: ethereal illustrated contact page */
.contact-stage {
  background: var(--page-bg);
}
.contact-artboard {
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
}
.contact-artboard img {
  object-fit: contain;
}
.contact-overlay {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(50vw, 620px);
  padding: clamp(1.4rem, 2vw, 2rem) clamp(1.2rem, 2.2vw, 2.2rem);
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,250,244,.54), rgba(255,248,241,.22));
  box-shadow: inset 0 0 30px rgba(255,255,255,.18);
  backdrop-filter: blur(1.4px);
}
.contact-heading {
  margin-bottom: .9rem;
  color: rgba(142,108,39,.92);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}
.contact-intro,
.contact-mailto,
.contact-email {
  margin: 0;
  line-height: 1.45;
}
.contact-intro {
  color: #335a76;
  font-size: clamp(1.25rem, 2.25vw, 2rem);
}
.contact-mailto {
  margin-top: 1.05rem;
  color: rgba(138,104,36,.92);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
}
.contact-email {
  margin-top: .35rem;
  color: #1f4d6a;
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-weight: 700;
  word-break: break-word;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  margin-top: 1.45rem;
}
@media (max-width: 1000px) {
  .contact-overlay {
    width: min(74vw, 620px);
    top: 49%;
  }
}
@media (max-width: 700px) {
  .contact-overlay {
    width: min(86vw, 560px);
    top: 51%;
    padding: 1rem 1rem 1.2rem;
  }
  .contact-actions {
    flex-direction: column;
    align-items: center;
  }
}


/* V6: final illustrated contact page with invisible hotspots */
.contact-image-page {
  position: relative;
}
.contact-hotspot {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: transparent;
}
/* positions based on 1672x941 artwork */
.contact-hotspot-mail {
  left: 38.55%;
  top: 63.35%;
  width: 22.67%;
  height: 6.8%;
}
.contact-hotspot-home {
  left: 39.02%;
  top: 73.22%;
  width: 18.78%;
  height: 6.7%;
}
body.show-hotspots .contact-hotspot {
  background: rgba(214, 180, 103, 0.18);
  outline: 2px dashed rgba(181, 132, 53, 0.7);
}