/* Interactions that Framer applied through component hover variants. */

:root {
  --lk-ease: cubic-bezier(0.44, 0, 0.56, 1);
  --lk-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --lk-ink: rgb(18, 18, 18);
  --lk-grey: rgb(117, 117, 117);
}

/* Without JavaScript, show everything that would otherwise animate in. */
html:not(.js) [style*="opacity:0"]:not([data-framer-name="Spacer"]),
html:not(.js) [style*="opacity:0.001"] {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Primary text buttons ("Book a Call", "Live website", "Next project" …) */
.framer-USjhJ .framer-text { transition: color 0.6s var(--lk-spring); }
html:not(.lk-blur-hover) .framer-USjhJ:hover .framer-text,
.framer-USjhJ:focus-visible .framer-text { --framer-text-color: var(--lk-grey) !important; }

/* With a mouse, text buttons use the cursor-following blur (lk.js) instead of the grey fade. */
.lk-letter { display: inline-block; transition: filter 0.25s var(--lk-spring); will-change: filter; }

/* Social icons. Registering the icon colour variable lets it transition. */
@property --21h8s6 { syntax: "<color>"; inherits: true; initial-value: rgb(18, 18, 18); }
.framer-lwNCp svg { transition: color 0.4s var(--lk-spring), --21h8s6 0.4s; }
.framer-lwNCp:hover svg { --21h8s6: var(--lk-grey) !important; }

/* Project cards dim slightly */
.framer-WZwJf [style*="brightness"] { transition: filter 0.8s var(--lk-spring), -webkit-filter 0.8s var(--lk-spring); }
.framer-WZwJf:hover [style*="brightness"] { filter: brightness(0.9) !important; -webkit-filter: brightness(0.9) !important; }

/* Footer "Let's Talk" ticket inverts */
.framer-ICesU { transition: background-color 0.4s var(--lk-spring); }
.framer-ICesU [class$="-container"][style*="filter"] { transition: filter 0.4s var(--lk-spring); }
.framer-ICesU:hover { background-color: var(--lk-ink) !important; }
.framer-ICesU:hover [class$="-container"][style*="filter"] { filter: invert(1) !important; -webkit-filter: invert(1) !important; }

/* Work filters */
.framer-fi9X4 { cursor: pointer; }
.framer-fi9X4 .framer-text { transition: color 0.2s var(--lk-ease); }
.framer-fi9X4:hover .framer-text { --framer-text-color: var(--lk-ink) !important; }

/* Contact form button */
.framer-JF9Mk .framer-text { transition: color 0.2s var(--lk-ease); }
html:not(.lk-blur-hover) .framer-JF9Mk:hover .framer-text,
.framer-JF9Mk:focus-visible .framer-text { --framer-text-color: var(--lk-grey) !important; }
.framer-JF9Mk[disabled] { cursor: progress; }

/* FAQ accordion (CustomAccordion) */
[data-lk-accordion-item] { transition: border-color 0.4s var(--lk-ease); }
[data-lk-accordion-item]:hover { border-bottom-color: var(--lk-grey) !important; }
[data-lk-accordion-icon] { transition: transform 0.4s var(--lk-ease); }
[data-lk-accordion-item].is-open [data-lk-accordion-icon] { transform: rotate(45deg); }
[data-lk-accordion-panel] { transition: height 0.4s var(--lk-ease); }

/* Mobile menu */
[data-framer-name="Menu button"] { cursor: pointer; }
[data-framer-name="Menu button"] svg { transition: transform 0.35s var(--lk-spring); }
.lk-menu-in { animation: lk-menu-in 0.35s var(--lk-spring) both; }
@keyframes lk-menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* The Framer CMS "load more" spinner is not needed: every project is rendered. */
.framer-IJaBb { display: none !important; }

/* Cookie consent notice: same thin rules, Geist type and monochrome palette as the site */
.lk-consent {
  position: fixed; left: 20px; bottom: 20px; z-index: 50;
  width: min(360px, calc(100vw - 24px));
  padding: 16px; box-sizing: border-box;
  background: #fff; border: 1px solid rgb(227, 227, 227);
  font-family: "Geist", "Geist Placeholder", sans-serif;
  font-size: 14px; line-height: 1.4; letter-spacing: -0.02em; color: var(--lk-ink);
  opacity: 0; transform: translateY(10px); filter: blur(5px);
  transition: opacity 0.6s var(--lk-spring), transform 0.6s var(--lk-spring), filter 0.6s var(--lk-spring);
}
.lk-consent.is-visible { opacity: 1; transform: none; filter: none; }
.lk-consent.is-leaving { opacity: 0; transform: translateY(10px); transition-duration: 0.4s; }
.lk-consent p { margin: 0 0 14px; color: var(--lk-grey); }
.lk-consent-actions { display: flex; justify-content: flex-end; gap: 16px; border-top: 1px solid rgb(227, 227, 227); padding-top: 12px; }
.lk-consent button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--lk-ink); transition: color 0.3s var(--lk-ease);
}
.lk-consent button[data-choice="denied"] { color: var(--lk-grey); }
.lk-consent button:hover { color: var(--lk-grey); }
.lk-consent button[data-choice="denied"]:hover { color: var(--lk-ink); }
.lk-consent button:focus-visible { outline: 1px solid var(--lk-ink); outline-offset: 3px; }
@media (max-width: 809.98px) { .lk-consent { left: 12px; bottom: 12px; } }

/* Footer "Cookie settings" link, set in the copyright line's own type and colour */
.lk-cookie-settings {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit; transition: color 0.3s var(--lk-ease);
}
.lk-cookie-settings:hover { color: var(--lk-ink); }
.lk-cookie-settings:focus-visible { outline: 1px solid var(--lk-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}