:root{
  --blue:#BDDCF1;
  --green:#0E3827;
  --green-deep:#083424;
  --lid:#1F3C2B;
  --cream:#F7F3EA;
  --black:#020302;
  --maxw:1400px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',sans-serif;
  color:var(--green);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Space Mono',monospace;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-radius:999px;
  padding:1.1rem 2.6rem;
  font-size:1.05rem;
  transition:transform .25s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  cursor:pointer;
  border:none;
}
.btn--cream{background:var(--cream);color:var(--green);box-shadow:0 8px 0 rgba(8,52,36,.18)}
.btn--cream:hover{transform:translateY(-3px);box-shadow:0 12px 0 rgba(8,52,36,.22)}
.btn--green{background:var(--green);color:var(--cream)}
.btn--green:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(8,52,36,.28)}

/* ---------- marquee ---------- */
.marquee{
  background:var(--black);
  color:var(--cream);
  overflow:hidden;
  padding:.6rem 0;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex;
  align-items:center;
  gap:2.2rem;
  font-family:'Space Mono',monospace;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.82rem;
  animation:scroll 26s linear infinite;
  will-change:transform;
}
.marquee__track i{color:#5c8b74;font-style:normal}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.header{
  background:var(--cream);
  position:relative;
  padding:1.4rem 2rem 1.6rem;
  text-align:center;
}
.logo{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(2.6rem,5vw,3.4rem);
  color:var(--green);
  letter-spacing:.02em;
  line-height:1;
  display:inline-block;
}
.nav{
  margin-top:.9rem;
  display:flex;
  gap:2.6rem;
  justify-content:center;
  flex-wrap:wrap;
  font-family:'Space Mono',monospace;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.9rem;
}
.nav a{position:relative;padding-bottom:3px}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--green);transition:width .25s ease;
}
.nav a:hover::after{width:100%}
.header__icons{
  position:absolute;top:1.5rem;right:2rem;
  display:flex;gap:1rem;color:var(--green);
}
.iconbtn{background:none;border:none;color:inherit;cursor:pointer;padding:.3rem;transition:transform .2s ease}
.iconbtn:hover{transform:scale(1.12)}

/* ---------- hero ---------- */
.hero{
  background:var(--blue);
  position:relative;
  overflow:hidden;
  min-height:min(78vh,760px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.hero__bigtext{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  z-index:1;
  pointer-events:none;
}
.hero__line{
  font-family:'Archivo Black',sans-serif;
  color:var(--green);
  font-size:clamp(6rem,22vw,19.5rem);
  line-height:.82;
  letter-spacing:.01em;
  white-space:nowrap;
  transform:translateY(40px);
  opacity:0;
}
.hero.in .line-a{animation:wordUp .9s cubic-bezier(.2,.8,.2,1) .15s forwards}
.hero.in .line-b{animation:wordUp .9s cubic-bezier(.2,.8,.2,1) .28s forwards}
@keyframes wordUp{to{transform:translateY(0);opacity:1}}

.hero__stage{
  position:relative;
  z-index:2;
  width:min(46vw,460px);
  align-self:stretch;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:auto;
  transform:translateX(-13%); /* center the cup over the type (arm sits lower-left) */
}
.hero__hand{
  width:100%;
  transform-origin:50% 100%;
  /* entrance: rise from below */
  transform:translateY(112%);
  filter:drop-shadow(0 22px 26px rgba(8,52,36,.24));
  will-change:transform;
}
.hero__hand-inner{transform-origin:50% 100%;will-change:transform}
.hero__hand img{display:block;width:100%;transform-origin:50% 100%;will-change:transform}
.hero.in .hero__hand{
  animation:handIn 1.2s cubic-bezier(.16,.9,.24,1) .1s forwards;
}
@keyframes handIn{
  0%{transform:translateY(112%)}
  72%{transform:translateY(-2%)}
  100%{transform:translateY(0)}
}
/* after the entrance settles, the hand rests at 0 and reacts to hover:
   it slides down to reveal the type, then springs back up on leave */
.hero.settled .hero__hand{
  animation:none;
  transform:translateY(0);
  transition:transform .62s cubic-bezier(.34,1.42,.5,1); /* springy overshoot */
}
@media(hover:hover){
  .hero.settled .hero__stage:hover .hero__hand{transform:translateY(54%)}
}
/* gentle idle sway once settled (rotate from the wrist, no vertical gap) */
.hero.settled .hero__hand img{animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}

.hero__cta{
  position:absolute;
  z-index:3;
  bottom:8%;
  left:50%;
  transform:translateX(-50%);
}
.hero.in .hero__cta{animation:ctaIn .6s ease 1s both}
@keyframes ctaIn{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- strip ---------- */
.strip{
  background:var(--green-deep);
  color:var(--cream);
  text-align:center;
  padding:1.6rem 2rem;
}
.strip p{
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  font-size:clamp(1rem,2.4vw,1.7rem);
  letter-spacing:.01em;
  line-height:1.15;
}

/* ---------- menu ---------- */
.menu{
  background:var(--blue);
  padding:clamp(3rem,7vw,6rem) 2rem;
}
.menu__head{max-width:var(--maxw);margin:0 auto 2.6rem}
.menu__head h2, .faq__head h2{
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5rem);
  line-height:.9;
  letter-spacing:.01em;
}
.menu__head p{
  font-size:1.15rem;
  margin-top:.6rem;
  font-weight:500;
}
.grid{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
}
.card{
  background:var(--cream);
  border-radius:22px;
  padding:2rem 1.6rem 1.6rem;
  position:relative;
  text-align:center;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 40px rgba(8,52,36,.22)}
.card__price{
  position:absolute;
  top:1.1rem;right:1.1rem;
  width:64px;height:64px;
  border:2px solid var(--green);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:.95rem;
  transition:transform .35s ease, background .25s ease, color .25s ease;
}
.card:hover .card__price{transform:rotate(-10deg) scale(1.06);background:var(--green);color:var(--cream)}
.card__art{flex:1;display:grid;place-items:center;width:100%;padding:.4rem 0}
.card__art svg{width:120px;height:120px;transition:transform .35s ease}
.card:hover .card__art svg{transform:scale(1.08) rotate(-2deg)}
.ink path,.ink ellipse,.ink rect{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ink .steam{stroke-width:2;opacity:.7}
.ink .light{stroke-width:1.8;opacity:.55}
.ink .heart{fill:var(--green);stroke:none}
.ink .leaf{stroke-width:1.8}
.ink .dark{stroke-width:6;opacity:.9}
.ink .fill{fill:var(--green);stroke:var(--green)}
.ink .ice{fill:var(--cream);stroke:var(--green)}
.card__name{
  font-family:'Space Mono',monospace;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1.15rem;
  margin-top:.4rem;
}
.menu__cta{text-align:center;margin-top:2.6rem}

/* ---------- faq ---------- */
.faq{
  background:var(--cream);
  padding:clamp(3rem,7vw,6rem) 2rem;
}
.faq__head{max-width:900px;margin:0 auto 2.4rem}
.faq__head p{font-size:1.15rem;margin-top:.6rem;font-weight:500}
.faq__list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.qa{
  border:2px solid var(--green);
  border-radius:18px;
  overflow:hidden;
  background:var(--cream);
  transition:background .25s ease;
}
.qa[open]{background:#fffdf7}
.qa summary{
  list-style:none;
  cursor:pointer;
  padding:1.3rem 1.6rem;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(1.05rem,2.5vw,1.4rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.qa summary::-webkit-details-marker{display:none}
.qa__plus{
  flex:none;
  position:relative;width:22px;height:22px;
}
.qa__plus::before,.qa__plus::after{
  content:"";position:absolute;background:var(--green);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.qa__plus::before{width:22px;height:3px}
.qa__plus::after{width:3px;height:22px;transition:transform .3s ease}
.qa[open] .qa__plus::after{transform:translate(-50%,-50%) scaleY(0)}
.qa__body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.qa[open] .qa__body{grid-template-rows:1fr}
.qa__body>p{
  overflow:hidden;
  padding:0 1.6rem;
  font-size:1.08rem;
  line-height:1.6;
  color:#2b4a3b;
}
.qa[open] .qa__body>p{padding-bottom:1.4rem}

/* ---------- over ons ---------- */
.about{
  background:var(--green);
  color:var(--cream);
  padding:clamp(3rem,7vw,6rem) 2rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  max-width:var(--maxw);
  margin:0 auto;
}
.about__tag{
  display:inline-block;
  font-family:'Space Mono',monospace;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.8rem;
  padding:.4rem .9rem;
  border:1.5px solid rgba(247,243,234,.4);
  border-radius:999px;
  margin-bottom:1.2rem;
}
.about__text h2{
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:.92;
  margin-bottom:1.2rem;
}
.about__text p{
  font-size:1.12rem;
  line-height:1.65;
  margin-bottom:1rem;
  color:rgba(247,243,234,.88);
  max-width:46ch;
}
.about__text .btn{margin-top:.8rem}
.about__map{display:flex;flex-direction:column;gap:0}
.mapframe{
  border-radius:22px 22px 0 0;
  overflow:hidden;
  border:3px solid var(--cream);
  border-bottom:none;
  line-height:0;
  background:var(--blue);
}
.mapframe iframe{
  width:100%;
  height:340px;
  border:0;
  display:block;
  filter:saturate(1.05);
}
.mapcard{
  background:var(--cream);
  color:var(--green);
  border-radius:0 0 22px 22px;
  padding:1.3rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.mapcard strong{
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  font-size:1.15rem;
  letter-spacing:.02em;
}
.mapcard span{font-family:'Space Mono',monospace;font-size:.86rem;letter-spacing:.02em}

/* ---------- footer ---------- */
.footer{
  background:var(--green-deep);
  color:var(--cream);
  text-align:center;
  padding:3rem 2rem 3.4rem;
}
.footer__logo{
  font-family:'Archivo Black',sans-serif;
  font-size:2.4rem;
  display:block;
  margin-bottom:.8rem;
}
.footer p{font-family:'Space Mono',monospace;letter-spacing:.04em;font-size:.9rem;opacity:.9}
.footer__small{margin-top:.5rem;opacity:.6}
.footer__studio{
  margin-top:1.6rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(247,243,234,.18);
  opacity:.75;
  font-size:.82rem;
}
.footer__studio a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.footer__studio a:hover{opacity:.7}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.show{opacity:1;transform:none}
.grid .card:nth-child(2){transition-delay:.08s}
.grid .card:nth-child(3){transition-delay:.16s}
.grid .card:nth-child(4){transition-delay:.06s}
.grid .card:nth-child(5){transition-delay:.14s}
.grid .card:nth-child(6){transition-delay:.22s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero__line,.hero__hand{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .header__icons{position:static;justify-content:center;margin-top:1rem}
  .hero__stage{width:min(62vw,360px)}
  .about{grid-template-columns:1fr;gap:2.4rem}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .nav{gap:1.4rem}
  .hero{min-height:62vh}
  .hero__bigtext{justify-content:flex-start;padding-top:1.4rem}
  .hero__line{font-size:clamp(4.4rem,24vw,7.5rem);line-height:.84}
  .hero__stage{width:min(62vw,310px);transform:translateX(-6%)}
  .hero__cta{bottom:4%}
}