/* Behaviour styles for assets/site.js */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--ticker-distance, -50%)); }
}

@media (prefers-reduced-motion: reduce) {
  section ul[style*="ticker-scroll"] { animation: none !important; }
}

/* Gallery component (used by generated project pages) */
.site-gallery {
  display: flex; flex-direction: column; gap: 24px;
  width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px 24px; box-sizing: border-box;
}
@media (max-width: 809.98px) { .site-gallery { padding: 0 16px 24px; } }
.site-gallery__item {
  margin: 0; overflow: hidden; border-radius: 10px; cursor: zoom-in;
  border: 1px solid var(--token-79608fef-1345-45e5-a071-4f8d5b177174, rgba(0, 0, 0, 0.1));
}
.site-gallery__item img,
.site-gallery__item video { display: block; width: 100%; height: auto; }
.site-gallery__video { cursor: default; }
.site-gallery__cell { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.site-gallery__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 559.98px) { .site-gallery__row { gap: 12px; } }
.site-gallery__item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Lightbox for pages that have no exported lightbox styles */
.site-lightbox__back { position: fixed; inset: 0; z-index: 7; background: rgba(0, 0, 0, 0.9); cursor: zoom-out; }
.site-lightbox__box {
  position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: min(94vw, 1400px); max-height: 90vh; cursor: zoom-out;
}
.site-lightbox__box img { display: block; width: auto; height: auto; max-width: min(94vw, 1400px); max-height: 90vh; border-radius: 10px; }

/* Container for the extracted Testimonial component (look: assets/components.css) */
.site-testimonial { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px 48px; box-sizing: border-box; }
@media (max-width: 809.98px) {
  .site-testimonial { padding: 0 16px 40px; }
}

/* Sticky "Send email" bar: button centred in the bar, and its gradient hover fades (gradients cannot
   transition directly, so the top stop is a registered colour property that does). */
@property --cta-top { syntax: "<color>"; inherits: false; initial-value: rgba(0, 0, 0, 0.8); }
.framer-1dkf8gq-container .framer-129km68-container {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.framer-1dkf8gq-container a.framer-2iIzN {
  --cta-top: var(--token-555c9da2-ff1a-4643-9bcc-1881d710f1e4, rgba(0, 0, 0, 0.8));
  background: linear-gradient(180deg, var(--cta-top) 0%, var(--token-ae41973f-26d0-4a3e-95e1-965dfb5449a6, rgb(0, 0, 0)) 100%) !important;
  transition: --cta-top .25s ease, opacity .25s ease, border-color .2s ease !important;
}
.framer-1dkf8gq-container a.framer-2iIzN.hover {
  --cta-top: var(--token-ae41973f-26d0-4a3e-95e1-965dfb5449a6, rgb(0, 0, 0));
}
