/* Harv homepage — design tokens + section styles (everything below the hero).
   Identity preserved from the hero: green #77fb38, Albert Sans, ink #101314. */
:root {
  --ink: #101314;
  --green: #77fb38;          /* bright brand green — accents, on dark */
  --green-bright: #9bff5c;
  --green-ink: #101314;      /* ink: dark green is a forbidden colour on this site */
  --green-deep: #06180a;
  --paper: #f4f4f3;
  --surface: #ffffff;
  --night: #0d0f0e;
  --night-2: #15201a;
  --muted: #5b6166;

  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);

  --maxw: 1180px;
}

/* --- Booking prompt at the bottom of the hero (reveals when the hero
       sequence ends). Subtle: a soft question + a deep-green underlined link. -- */
.harv-hero-cta {
  position: absolute;
  left: clamp(20px, 5.2vw, 92px);     /* left-aligned, under the headline */
  bottom: clamp(56px, 9vh, 104px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12em;
  text-align: left;
  font-family: "Albert Sans", sans-serif;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--ease-out-expo), transform .75s var(--ease-out-expo);
  pointer-events: none;
}
body.hero-done .harv-hero-cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.harv-hc-q {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 600;
  color: var(--ink);
}
.harv-hc-link {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--green);                     /* bright Harv-green, as requested */
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.07em;
}
.harv-hc-ic { width: .82em; height: .82em; flex: 0 0 auto; }
/* mobiel: groter tik-doel zonder de groene tekstlink-look te veranderen */
@media (pointer: coarse) { .harv-hc-link { padding-block: 10px; } .harv-hc-q { padding-block: 2px; } }
@media (prefers-reduced-motion: reduce) {
  .harv-hero-cta { transition: none; }
}
/* phone + tablet: the CTA sits LEFT-aligned in the soft zone right under the
   laptop's shadow, with the scroll cue centred below it */
@media screen and (max-width: 991px) {
  .harv-hero-cta {
    /* left:24px lines the CTA up with the headline (which has padding-inline:24px),
       so the hero text and "Vrijblijvend verder praten?" share one left edge.
       bottom dropped ~2 lines lower (was clamp(86,15svh,120)) while still clearing
       the scroll cue below it. */
    left: 24px; right: auto; bottom: clamp(60px, 10.5svh, 84px);
    align-items: flex-start; text-align: left; gap: 2px; line-height: 1.08;
    /* on phones the CTA is present from the very first frame (no reveal gated on the
       WebGL hero sequence) — the user wants it in view from the start. */
    opacity: 1; transform: none; pointer-events: auto;
  }
  /* neutraliseer de pointer:coarse padding die de regels weer uit elkaar trekt */
  .harv-hc-link { padding-block: 4px; }
  .harv-hc-q { padding-block: 0; }
}
/* phones: snappier reveal (de .75s expo voelt te zweverig op telefoon) */
@media (max-width: 767px) {
  .harv-hero-cta { transition: opacity .3s ease-out, transform .3s ease-out !important; }
  .harv-hc-q { text-wrap: balance; }
  .harv-hc-link:active { color: var(--green-bright); transform: translateY(1px); }
  .harv-hc-link { transition: color .15s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
}